/* =====================================================
   Finance Assistant
   Page        : Airdrop
   Module      : Statistics
   File        : statistics.css
   Version     : 2.0.0

   Description :
   Airdrop Statistics Page

   Pattern :
   - Same layout as Kas
   - Airdrop status logic
   - Theme aware
===================================================== */


/* =====================================================
   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{

    margin-bottom:32px;

}


#statistics-chart .card{

    padding:20px;

}


#statistics-chart-canvas{

    display:block;

    width:100% !important;

    min-height:260px;

}


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

#statistics-transaction{

    margin-bottom:32px;

}


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

#statistics-transaction-list{

    display:flex;

    flex-direction:column;

    gap:0;

}


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

.transaction-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:16px;

    width:100%;

    padding:16px 0;

    box-sizing:border-box;

    border-bottom:

        1px solid

        var(--border-color);

}


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

.transaction-item:last-child{

    border-bottom:none;

}


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

.transaction-info{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    gap:4px;

    text-align:left;

}


/* =====================================================
   PROJECT
===================================================== */

.transaction-info strong{

    display:block;

    width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:15px;

    line-height:1.3;

    font-weight:600;

    color:var(

        --text-primary

    );

    text-align:left;

}


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

.transaction-info small{

    display:block;

    font-size:12px;

    line-height:1.3;

    color:var(

        --text-secondary

    );

    text-align:left;

}


/* =====================================================
   WALLET / TYPE
===================================================== */

.transaction-info p{

    display:block;

    width:100%;

    margin:4px 0 0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:13px;

    line-height:1.3;

    color:var(

        --text-secondary

    );

    text-align:left;

}


/* =====================================================
   STATUS
===================================================== */

.transaction-amount{

    flex-shrink:0;

    min-width:90px;

    padding-top:4px;

    font-size:15px;

    line-height:1.3;

    font-weight:700;

    color:var(

        --text-primary

    );

    text-align:right;

    white-space:nowrap;

}


/* =====================================================
   AIRDROP STATUS
===================================================== */

.transaction-win{

    color:#22C55E;

}


.transaction-not-win{

    color:#EF4444;

}


.transaction-ongoing{

    color:#F59E0B;

}


.transaction-ended{

    color:var(

        --text-secondary

    );

}


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

}


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

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

    opacity:.85;

}


/* =====================================================
   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:600px

){

    #statistics-filter .card{

        padding:16px;

    }


    #statistics-chart .card{

        padding:16px;

    }


    #statistics-chart-canvas{

        min-height:220px;

    }


    .transaction-item{

        gap:12px;

        padding:15px 0;

    }


    .transaction-info strong{

        font-size:15px;

    }


    .transaction-info small{

        font-size:11px;

    }


    .transaction-info p{

        font-size:12px;

    }


    .transaction-amount{

        min-width:82px;

        font-size:13px;

    }


    .statistics-pagination{

        padding:10px;

        gap:8px;

    }


    .statistics-pagination button{

        padding:9px 11px;

        font-size:12px;

    }


    .statistics-pagination span{

        font-size:12px;

    }

}


/* =====================================================
   VERY SMALL SCREEN
===================================================== */

@media(

    max-width:380px

){

    .transaction-item{

        gap:8px;

        padding:14px 0;

    }


    .transaction-info strong{

        font-size:14px;

    }


    .transaction-info small{

        font-size:10px;

    }


    .transaction-info p{

        font-size:11px;

    }


    .transaction-amount{

        min-width:76px;

        font-size:11px;

    }


    .statistics-pagination{

        gap:6px;

    }


    .statistics-pagination button{

        padding:8px 9px;

        font-size:11px;

    }

}