/* =====================================================
   Finance Assistant
   Page        : Payroll Daily
   Module      : Statistics
   File        : statistics.css
   Version     : 2.1.0

   Description :
   Payroll Daily Statistics Page

   Theme Aware :
   - Light
   - Dark
   - Green
   - Pink
===================================================== */


/* =====================================================
   STATISTICS PAGE
===================================================== */

#statistics-page{

    padding-bottom:40px;

}


#statistics-page .section{

    margin-bottom:32px;

}


#statistics-page .section-header{

    margin-bottom:16px;

}


/* =====================================================
   SECTION BADGE
===================================================== */

#statistics-page .section-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 16px;

    border-radius:999px;

    background:var(--surface);

    color:var(--text);

    font-size:1.15rem;

    font-weight:700;

}


/* =====================================================
   SUMMARY CARD
===================================================== */

#statistics-summary-card{

    padding:24px;

    overflow:hidden;

}


/* =====================================================
   SUMMARY CONTENT
===================================================== */

.statistics-summary-content{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* =====================================================
   TODAY INCOME
===================================================== */

.statistics-summary-today{

    width:100%;

    padding:24px;

    box-sizing:border-box;

    border-radius:22px;

    background:var(--surface);

}


/* =====================================================
   TODAY LABEL
===================================================== */

.statistics-summary-today-label{

    display:block;

    margin-bottom:8px;

    color:var(--text);

    font-size:18px;

    line-height:1.3;

    font-weight:600;

}


/* =====================================================
   TODAY VALUE
===================================================== */

.statistics-summary-today-value{

    display:block;

    color:var(--text);

    font-size:34px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-.5px;

    word-break:break-word;

}


/* =====================================================
   WEEKLY SUMMARY
===================================================== */

.statistics-summary-weekly{

    display:grid;

    grid-template-columns:

        repeat(

            2,

            minmax(

                0,

                1fr

            )

        );

    gap:14px;

}


/* =====================================================
   WEEKLY ITEM
===================================================== */

.statistics-summary-week-item{

    min-width:0;

    padding:18px;

    box-sizing:border-box;

    border-radius:20px;

    background:var(--surface);

}


/* =====================================================
   WEEKLY LABEL
===================================================== */

.statistics-summary-week-item span{

    display:block;

    margin-bottom:7px;

    color:var(--text-secondary);

    font-size:14px;

    line-height:1.35;

}


/* =====================================================
   WEEKLY VALUE
===================================================== */

.statistics-summary-week-item strong{

    display:block;

    color:var(--text);

    font-size:21px;

    line-height:1.25;

    font-weight:700;

    word-break:break-word;

}


/* =====================================================
   SUMMARY EMPTY
===================================================== */

.statistics-summary-empty{

    padding:24px 10px;

    text-align:center;

    color:var(--text-secondary);

    font-size:14px;

}


/* =====================================================
   FILTER
===================================================== */

#statistics-filter-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


/* =====================================================
   CHART CARD
===================================================== */

#statistics-chart .card{

    padding:20px;

    overflow:hidden;

}


/* =====================================================
   CHART
===================================================== */

#statistics-chart-canvas{

    width:100% !important;

    max-width:100%;

}

/* =====================================================
   TRANSACTION CARD
===================================================== */

#statistics-transaction .card{

    padding:18px 20px;

    overflow:hidden;

}


/* =====================================================
   TRANSACTION LIST
===================================================== */

#statistics-transaction-list{

    display:flex;

    flex-direction:column;

}


/* =====================================================
   TRANSACTION ITEM
===================================================== */

#statistics-transaction-list
.transaction-item{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:18px 16px;

    border-bottom:

        1px solid

        var(--border);

}


/* =====================================================
   LAST TRANSACTION
===================================================== */

#statistics-transaction-list
.transaction-item:last-child{

    border-bottom:none;

}


/* =====================================================
   TRANSACTION HEADER
   Tanggal kiri
   Nominal kanan
===================================================== */

#statistics-transaction-list
.transaction-header{

    display:grid;

    grid-template-columns:

        minmax(0,1fr)

        auto;

    align-items:center;

    width:100%;

    gap:16px;

}


/* =====================================================
   DATE
===================================================== */

#statistics-transaction-list
.transaction-header strong:first-child{

    min-width:0;

    color:

        var(--text);

    font-size:16px;

    line-height:1.3;

    font-weight:700;

    text-align:left;

    white-space:nowrap;

}


/* =====================================================
   DAILY INCOME
===================================================== */

#statistics-transaction-list
.transaction-header
.transaction-income{

    color:

        var(--text);

    font-size:17px;

    line-height:1.3;

    font-weight:700;

    text-align:right;

    white-space:nowrap;

}

/* =====================================================
   TOTAL PEKERJAAN
===================================================== */

#statistics-transaction-list
.transaction-total-work{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    gap:12px;

    color:

        var(--text);

    font-size:15px;

    line-height:1.4;

}


/* =====================================================
   TOTAL PEKERJAAN LABEL
===================================================== */

#statistics-transaction-list
.transaction-total-work span{

    min-width:0;

    color:

        var(--text-secondary);

    font-size:15px;

    font-weight:600;

}


/* =====================================================
   TOTAL PEKERJAAN VALUE
===================================================== */

#statistics-transaction-list
.transaction-total-work strong{

    flex-shrink:0;

    color:

        var(--text);

    font-size:16px;

    font-weight:700;

    text-align:right;

    white-space:nowrap;

}


/* =====================================================
   TRANSACTION DETAIL
===================================================== */

#statistics-transaction-list
.transaction-detail{

    display:flex;

    flex-direction:column;

    gap:5px;

    color:

        var(--text);

    font-size:15px;

    line-height:1.45;

}


/* =====================================================
   WORK ROW
===================================================== */

#statistics-transaction-list
.transaction-work-row{

    display:block;

    color:

        var(--text);

    font-size:15px;

    line-height:1.5;

    font-weight:400;

    font-style:italic;

}


/* =====================================================
   WORK TEXT
===================================================== */

#statistics-transaction-list
.transaction-work-row span{

    display:block;

    color:

        var(--text);

    font-size:15px;

    line-height:1.5;

    font-weight:400;

    font-style:italic;

}


/* =====================================================
   MOBILE
===================================================== */

@media(

    max-width:480px

){

    #statistics-transaction .card{

        padding:16px 12px;

    }


    #statistics-transaction-list
    .transaction-item{

        padding:16px 8px;

        gap:11px;

    }


    /* ---------------------------------------------
       DATE
    --------------------------------------------- */

    #statistics-transaction-list
    .transaction-header strong:first-child{

        font-size:15px;

    }


    /* ---------------------------------------------
       NOMINAL
    --------------------------------------------- */

    #statistics-transaction-list
    .transaction-header
    .transaction-income{

        font-size:16px;

    }


    /* ---------------------------------------------
       WORK DETAIL
    --------------------------------------------- */

    #statistics-transaction-list
    .transaction-work-row,

    #statistics-transaction-list
    .transaction-work-row span{

        font-size:15px;

        line-height:1.5;

        font-style:italic;

    }

}


/* =====================================================
   PAGINATION
===================================================== */

#statistics-show-more{

    margin-top:14px;

}


/* =====================================================
   PAGINATION CONTAINER
===================================================== */

.statistics-pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    padding:14px 0 4px;

}


/* =====================================================
   PAGINATION BUTTON
===================================================== */

.statistics-pagination button{

    min-width:110px;

    padding:10px 14px;

    border:

        1px solid

        var(--border);

    border-radius:14px;

    background:var(--surface);

    color:var(--text);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:

        background .2s ease,

        border-color .2s ease,

        color .2s ease,

        opacity .2s ease;

}


/* =====================================================
   PAGINATION HOVER
===================================================== */

.statistics-pagination button:hover:not(:disabled){

    border-color:var(--primary);

    color:var(--primary);

}


/* =====================================================
   PAGINATION DISABLED
===================================================== */

.statistics-pagination button:disabled{

    opacity:.45;

    cursor:not-allowed;

}


/* =====================================================
   PAGE NUMBER
===================================================== */

.statistics-pagination span{

    min-width:40px;

    text-align:center;

    color:var(--text-secondary);

    font-size:14px;

    font-weight:600;

}


/* =====================================================
   TABLET
===================================================== */

@media(

    max-width:700px

){

    /* ---------------------------------------------
       SUMMARY
    --------------------------------------------- */

    .statistics-summary-today{

        padding:22px;

    }


    .statistics-summary-today-value{

        font-size:32px;

    }


    .statistics-summary-weekly{

        gap:12px;

    }


    .statistics-summary-week-item{

        padding:16px;

    }


    .statistics-summary-week-item strong{

        font-size:20px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(

    max-width:480px

){

    /* ---------------------------------------------
       SUMMARY
    --------------------------------------------- */

    #statistics-summary-card{

        padding:18px 14px;

    }


    .statistics-summary-content{

        gap:12px;

    }


    .statistics-summary-today{

        padding:22px 18px;

        border-radius:20px;

    }


    .statistics-summary-today-label{

        font-size:17px;

        margin-bottom:7px;

    }


    .statistics-summary-today-value{

        font-size:30px;

        line-height:1.2;

    }


    .statistics-summary-weekly{

        grid-template-columns:

            repeat(

                2,

                minmax(

                    0,

                    1fr

                )

            );

        gap:10px;

    }


    .statistics-summary-week-item{

        padding:15px 13px;

        border-radius:18px;

    }


    .statistics-summary-week-item span{

        font-size:13px;

        margin-bottom:6px;

    }


    .statistics-summary-week-item strong{

        font-size:18px;

        line-height:1.25;

    }


    /* ---------------------------------------------
       CHART
    --------------------------------------------- */

    #statistics-chart .card{

        padding:16px 12px;

    }


    /* ---------------------------------------------
       TRANSACTION
    --------------------------------------------- */

    #statistics-transaction .card{

        padding:16px 12px;

    }


    #statistics-transaction-list
    .transaction-item{

        padding:15px 8px;

    }


    #statistics-transaction-list
    .transaction-header{

        gap:8px;

        margin-bottom:8px;

    }


    #statistics-transaction-list
    .transaction-header > strong:first-child{

        font-size:15px;

    }


    #statistics-transaction-list
    .transaction-income{

        font-size:20px;

    }

   /* ---------------------------------------------
   TOTAL PEKERJAAN
--------------------------------------------- */

#statistics-transaction-list
.transaction-total-work{

    gap:8px;

}


#statistics-transaction-list
.transaction-total-work span{

    font-size:14px;

}


#statistics-transaction-list
.transaction-total-work strong{

    font-size:15px;

}


    #statistics-transaction-list
    .transaction-detail{

        gap:3px;

    }


    #statistics-transaction-list
    .transaction-work-row{

        font-size:14px;

        line-height:1.45;

    }


    /* ---------------------------------------------
       PAGINATION
    --------------------------------------------- */

    .statistics-pagination{

        gap:8px;

    }


    .statistics-pagination button{

        min-width:95px;

        padding:9px 10px;

        font-size:13px;

    }


    .statistics-pagination span{

        font-size:13px;

    }

}