/* =====================================================
   Finance Assistant
   Page        : Airdrop
   Module      : Summary
   File        : summary.css
   Version     : 1.2.0

   Description :
   Airdrop Summary Styling

   Components :
   - Overview
   - Distribution
   - Wallet Distribution
   - Airdrop Detail
===================================================== */


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

#summary-page .section{

    margin-bottom:20px;

}


/* =====================================================
   OVERVIEW
===================================================== */

.airdrop-summary-overview{

    display:flex;

    flex-direction:column;

    gap:20px;

}


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

.airdrop-summary-total{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:20px;

    text-align:center;

}


.airdrop-summary-total-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    margin-bottom:4px;

    border-radius:13px;

    background:var(--surface-secondary);

    font-size:22px;

}


.airdrop-summary-total-label{

    font-size:13px;

    font-weight:600;

    color:var(--text-secondary);

}


.airdrop-summary-total strong{

    font-size:30px;

    line-height:1.2;

    font-weight:800;

    color:var(--text-primary);

}


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

.airdrop-summary-status-grid{

    display:grid;

    grid-template-columns:

        repeat(

            2,

            minmax(

                0,

                1fr

            )

        );

    gap:12px;

}


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

.airdrop-summary-status{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-height:100px;

    padding:14px 10px;

    box-sizing:border-box;

    border-radius:16px;

    background:var(--surface);

    text-align:center;

}


.airdrop-summary-status-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border-radius:11px;

    background:var(--surface-secondary);

    font-size:18px;

}


.airdrop-summary-status span:not(

    .airdrop-summary-status-icon

){

    font-size:12px;

    line-height:1.3;

    font-weight:600;

    color:var(--text-secondary);

}


.airdrop-summary-status strong{

    font-size:22px;

    line-height:1.15;

    font-weight:800;

    color:var(--text-primary);

}


/* =====================================================
   DISTRIBUTION
===================================================== */

#summary-distribution-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}


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

#summary-distribution-chart{

    display:block;

    width:260px !important;

    height:260px !important;

    max-width:100%;

    margin:auto;

}


/* =====================================================
   DISTRIBUTION LIST
===================================================== */

#summary-distribution-list{

    width:100%;

    margin-top:4px;

    display:flex;

    flex-direction:column;

    gap:14px;

}


/* =====================================================
   WALLET ITEM
===================================================== */

.airdrop-wallet-item{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:16px;

    border-radius:16px;

    background:var(--surface);

}


/* =====================================================
   WALLET HEADER
===================================================== */

.airdrop-wallet-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}


.airdrop-wallet-header strong{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:15px;

    font-weight:700;

    color:var(--text-primary);

}


.airdrop-wallet-header span{

    flex-shrink:0;

    font-size:12px;

    font-weight:600;

    color:var(--text-secondary);

}


/* =====================================================
   WALLET BARS
===================================================== */

.airdrop-wallet-bars{

    display:flex;

    flex-direction:column;

    gap:10px;

}


/* =====================================================
   WALLET BAR ROW
===================================================== */

.airdrop-wallet-bar-row{

    display:flex;

    flex-direction:column;

    gap:5px;

}


/* =====================================================
   WALLET BAR LABEL
===================================================== */

.airdrop-wallet-bar-label{

    display:flex;

    align-items:center;

    gap:6px;

}


.airdrop-wallet-bar-label span{

    width:18px;

    flex-shrink:0;

    font-size:14px;

    text-align:center;

}


.airdrop-wallet-bar-label small{

    flex:1;

    min-width:0;

    font-size:12px;

    font-weight:600;

    color:var(--text-secondary);

}


.airdrop-wallet-bar-label strong{

    flex-shrink:0;

    font-size:12px;

    font-weight:700;

    color:var(--text-primary);

}


/* =====================================================
   WALLET BAR TRACK
===================================================== */

.airdrop-wallet-bar-track{

    width:100%;

    height:8px;

    overflow:hidden;

    border-radius:999px;

    background:var(--surface-secondary);

}


/* =====================================================
   WALLET BAR FILL
===================================================== */

.airdrop-wallet-bar-fill{

    width:0;

    height:100%;

    border-radius:999px;

    transition:

        width .5s ease;

}


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

.airdrop-wallet-ongoing

.airdrop-wallet-bar-fill{

    background:#F59E0B;

}


.airdrop-wallet-ended

.airdrop-wallet-bar-fill{

    background:#94A3B8;

}


.airdrop-wallet-win

.airdrop-wallet-bar-fill{

    background:#22C55E;

}


.airdrop-wallet-not-win

.airdrop-wallet-bar-fill{

    background:#EF4444;

}


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

.summary-empty{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:80px;

    padding:16px;

    text-align:center;

    font-size:13px;

    color:var(--text-secondary);

}


/* =====================================================
   AIRDROP DETAIL
===================================================== */

#summary-airdrop-detail{

    margin-top:0;

}


/* =====================================================
   DETAIL CARD
===================================================== */

#summary-airdrop-detail-card{

    display:flex;

    flex-direction:column;

    gap:0;

    padding:18px;

}


/* =====================================================
   DETAIL GROUP
===================================================== */

.airdrop-detail-group{

    display:flex;

    flex-direction:column;

}


.airdrop-detail-group.hidden{

    display:none;

}


/* =====================================================
   DETAIL GROUP SEPARATOR
===================================================== */

.airdrop-detail-group + .airdrop-detail-group{

    margin-top:14px;

    padding-top:14px;

    border-top:

        1px solid

        var(--border-color);

}


/* =====================================================
   DETAIL HEADER
===================================================== */

.airdrop-detail-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-bottom:10px;

}


/* =====================================================
   DETAIL TITLE
===================================================== */

.airdrop-detail-title{

    display:flex;

    align-items:center;

    gap:10px;

}


.airdrop-detail-title strong{

    font-size:17px;

    font-weight:700;

    color:var(--text-primary);

}


/* =====================================================
   DETAIL ICON
===================================================== */

.airdrop-detail-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    flex-shrink:0;

    border-radius:11px;

    background:var(--surface-secondary);

    font-size:22px;

    line-height:1;

}


/* =====================================================
   DETAIL COUNT
===================================================== */

.airdrop-detail-count{

    min-width:28px;

    text-align:right;

    font-size:14px;

    font-weight:700;

    color:var(--text-secondary);

}


/* =====================================================
   DETAIL LIST
===================================================== */

.airdrop-detail-list{

    display:flex;

    flex-direction:column;

}


/* =====================================================
   DETAIL ITEM
===================================================== */

.airdrop-detail-item{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    padding:13px 0;

    border-bottom:

        1px solid

        var(--border-color);

}


.airdrop-detail-item:first-child{

    padding-top:4px;

}


.airdrop-detail-item:last-child{

    padding-bottom:4px;

    border-bottom:none;

}


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

.airdrop-detail-item-info{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:7px;

}


.airdrop-detail-item-info > strong{

    font-size:15px;

    font-weight:700;

    color:var(--text-primary);

}


/* =====================================================
   DETAIL META
===================================================== */

.airdrop-detail-item-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:6px 14px;

}


.airdrop-detail-item-meta span{

    font-size:12px;

    line-height:1.5;

    color:var(--text-secondary);

}


/* =====================================================
   REWARD
===================================================== */

.airdrop-detail-item-reward{

    flex-shrink:0;

    white-space:nowrap;

    font-size:15px;

    font-weight:700;

    color:#22C55E;

}


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

.airdrop-detail-pagination{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:14px;

    padding-top:14px;

    border-top:

        1px solid

        var(--border-color);

}


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

.airdrop-detail-page-button{

    min-width:108px;

    height:38px;

    padding:0 14px;

    border:none;

    border-radius:12px;

    background:#F5F7FB;

    color:#2563EB;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:

        background .2s ease,

        transform .15s ease,

        opacity .2s ease;

}


.airdrop-detail-page-button:hover{

    background:#EEF3FF;

}


.airdrop-detail-page-button:active{

    transform:scale(.97);

}


.airdrop-detail-page-button:disabled{

    opacity:.4;

    cursor:not-allowed;

}


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

.airdrop-detail-page-info{

    flex:1;

    text-align:center;

    font-size:12px;

    font-weight:600;

    color:var(--text-secondary);

    white-space:nowrap;

}


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

.airdrop-detail-group .summary-empty{

    padding:20px 10px;

    text-align:center;

    font-size:13px;

    color:var(--text-secondary);

}


/* =====================================================
   WIN
===================================================== */

.airdrop-detail-win

.airdrop-detail-item-reward{

    color:#22C55E;

}


/* =====================================================
   ONGOING
===================================================== */

.airdrop-detail-ongoing

.airdrop-detail-item-info > strong{

    color:var(--text-primary);

}


/* =====================================================
   ENDED
===================================================== */

.airdrop-detail-ended

.airdrop-detail-item-info > strong{

    color:var(--text-primary);

}


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

@media(

    max-width:480px

){

    .airdrop-detail-item{

        gap:12px;

    }


    .airdrop-detail-item-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:2px;

    }


    .airdrop-detail-item-reward{

        font-size:14px;

    }


    .airdrop-detail-page-button{

        min-width:96px;

        padding:0 10px;

        font-size:11px;

    }

}


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

@media(

    max-width:600px

){

    .airdrop-summary-overview{

        gap:16px;

    }


    .airdrop-summary-total{

        padding:16px;

    }


    .airdrop-summary-total strong{

        font-size:28px;

    }


    .airdrop-summary-status-grid{

        gap:10px;

    }


    .airdrop-summary-status{

        min-height:92px;

        padding:12px 8px;

        border-radius:14px;

    }


    .airdrop-summary-status-icon{

        width:32px;

        height:32px;

        font-size:17px;

    }


    .airdrop-summary-status strong{

        font-size:20px;

    }


    #summary-distribution-chart{

        width:230px !important;

        height:230px !important;

    }


    .airdrop-wallet-item{

        padding:14px;

        border-radius:15px;

    }


    #summary-airdrop-detail-card{

        padding:16px;

    }


    .airdrop-detail-header{

        margin-bottom:8px;

    }


    .airdrop-detail-item{

        padding:11px 0;

    }


    .airdrop-detail-item-info strong{

        font-size:13px;

    }


    .airdrop-detail-item-reward{

        font-size:13px;

    }


    .airdrop-detail-group + .airdrop-detail-group{

        margin-top:12px;

        padding-top:12px;

    }

}


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

@media(

    max-width:380px

){

    .airdrop-summary-status{

        min-height:88px;

    }


    .airdrop-summary-status strong{

        font-size:19px;

    }


    #summary-distribution-chart{

        width:210px !important;

        height:210px !important;

    }


    #summary-airdrop-detail-card{

        padding:14px;

    }


    .airdrop-detail-icon{

        width:32px;

        height:32px;

        border-radius:10px;

        font-size:16px;

    }


    .airdrop-detail-title strong{

        font-size:14px;

    }

}