/* =====================================================
   STATISTICS
   FILE : statistics.css
   DESCRIPTION : Statistics Page
   VERSION : 2.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:
        background .2s ease;

}


.filter-select:focus{

    background:#EEF3FF;

}


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

#statistics-chart .card{

    padding:20px;

}


#statistics-chart-canvas{

    width:100% !important;

    min-height:260px;

}


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

#statistics-transaction{

    margin-bottom:32px;

}


#statistics-transaction-list{

    display:flex;

    flex-direction:column;

    gap:0;

}


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

.transaction-item{

    display:flex;

    flex-direction:column;

    gap:0;

    padding:18px 0;

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

}


.transaction-item:first-child{

    padding-top:0;

}


.transaction-item:last-child{

    border-bottom:none;

}


/* =====================================================
   KAS TRANSACTION TOP
===================================================== */

.kas-transaction-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    width:100%;

}


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

.kas-transaction-date{

    font-size:15px;

    font-weight:500;

    color:
        var(--text-primary);

    line-height:1.4;

}


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

.transaction-amount{

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

    line-height:1.4;

}


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

.kas-transaction-type{

    margin-top:10px;

    font-size:16px;

    font-weight:600;

    line-height:1.4;

    color:
        var(--text-primary);

}


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

.kas-transaction-member{

    margin-top:5px;

    font-size:14px;

    font-weight:500;

    line-height:1.4;

    color:
        var(--text-secondary);

}


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

.kas-transaction-description{

    margin-top:7px;

    font-size:12px;

    font-style:italic;

    line-height:1.5;

    color:
        var(--text-secondary);

}


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


/*
   NABUNG
   Hijau
*/

.kas-transaction-type:has(+ .kas-transaction-member){

    color:
        var(--text-primary);

}


/*
   Karena type dan member adalah elemen
   terpisah, warna berdasarkan kategori
   dipasang dari parent menggunakan class
   tambahan jika tersedia.
*/


.transaction-masuk{

    color:#22C55E;

}


.transaction-keluar{

    color:#EF4444;

}


/* =====================================================
   KATEGORI COLORS
===================================================== */


/*
   Class tambahan dapat dipasang pada
   transaction item jika diperlukan.
*/

.kas-transaction-item.nabung
.kas-transaction-type{

    color:#22C55E;

}


.kas-transaction-item.hutang
.kas-transaction-type{

    color:#EF4444;

}


.kas-transaction-item.bayar
.kas-transaction-type{

    color:#3B82F6;

}


/* =====================================================
   TRANSACTION AMOUNT COLORS
===================================================== */

.transaction-masuk{

    color:#22C55E;

}


.transaction-keluar{

    color:#EF4444;

}


.transaction-transfer{

    color:
        var(--text-primary);

}


/* =====================================================
   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);

}


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

@media(

    max-width:480px

){

    .kas-transaction-date{

        font-size:14px;

    }


    .transaction-amount{

        font-size:14px;

    }


    .kas-transaction-type{

        font-size:15px;

    }


    .kas-transaction-member{

        font-size:13px;

    }


    .kas-transaction-description{

        font-size:12px;

    }


    .statistics-pagination button{

        padding:9px 11px;

        font-size:13px;

    }

}