/* =====================================================
   STATISTICS
   FILE : statistics.css
   DESCRIPTION : Statistics Page
   VERSION : 1.0.0
===================================================== */


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

#statistics-filter{

    margin-bottom:24px;

}

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

#statistics-filter .card{

    padding:20px;

}


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

.filter-grid{

    display:grid;

    grid-template-columns:

        repeat(

            auto-fit,

            minmax(

                150px,

                1fr

            )

        );

    gap:16px;

}


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

.filter-item{

    display:flex;

    flex-direction:column;

    gap:8px;

}


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

.filter-label{

    font-size:13px;

    font-weight:600;

    color:var(

        --text-secondary

    );

}


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

.filter-select{

    width:100%;

    height:46px;

    padding:0 14px;

    border:none;

    border-radius:14px;

    background:#F5F7FB;

    font-size:14px;

    color:var(

        --text-primary

    );

    outline:none;

    transition:.2s;

}


.filter-select:focus{

    background:#EEF3FF;

}


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

.statistics-chart{

    position:relative;

    width:100%;

    height:380px;

    padding:12px 8px;

}

.statistics-chart canvas{

    width:100% !important;

    height:380px !important;

}


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

#statistics-transaction{

    margin-bottom:32px;

}

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

.transaction-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:16px;

    padding:16px 0;

    border-bottom:1px solid var(--border-color);

}

.transaction-item:last-child{

    border-bottom:none;

}


/* =====================================================
   INFO
===================================================== */

.transaction-info{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.transaction-info strong{

    font-size:15px;

    font-weight:600;

    color:var(--text-primary);

}

.transaction-info small{

    font-size:12px;

    color:var(--text-secondary);

}

.transaction-info p{

    margin:4px 0 0;

    font-size:13px;

    color:var(--text-secondary);

}


/* =====================================================
   AMOUNT
===================================================== */

.transaction-amount{

    font-size:15px;

    font-weight:700;

    color:var(--text-primary);

    white-space:nowrap;

}

/* =====================================================
   TRANSACTION TYPE
===================================================== */

.transaction-masuk{

    color:#22C55E;

}

.transaction-keluar{

    color:#EF4444;

}

.transaction-transfer{

    color:var(--text-primary);

}

/* ==========================================
   SHOW MORE BUTTON
========================================== */

.show-more-button{

    width:100%;

    margin-top:16px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:6px;

    background:none;

    border:none;

    color:#2563eb;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

}

.show-more-button span{

    font-size:12px;

}

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

.statistics-pagination{

    margin-top:20px;

    padding:12px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    border-radius:16px;

    background:var(--surface);

}


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

.statistics-pagination button{

    padding:10px 14px;

    border:none;

    border-radius:12px;

    background:#9ca3af;

    color:#1f2937:

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:

        opacity .2s ease,

        transform .15s ease;

}


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

.statistics-pagination button:disabled{

    opacity:.45;

    background:#9ca3af;

    color:#1f2937:

    cursor:not-allowed;

   }


/* =====================================================
   PAGE INFO
===================================================== */

.statistics-pagination span{

    color:var(--text);

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}


/* =====================================================
   PRESS
===================================================== */

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

    transform:scale(.97);

}