/* =====================================================
   Finance Assistant
   Workspace   : Kas
   Module      : Summary
   File        : summary.css
   Version     : 1.0.0

   Description :
   Summary Page Kas
===================================================== */


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

#summary-page .section{

    margin-bottom:32px;

}


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

.summary-total{

    text-align:center;

}

.summary-total p{

    margin:0;

}

.summary-total h2{

    margin-top:8px;

}


/* =====================================================
   SUMMARY GRID
===================================================== */

.summary-grid{

    margin-top:20px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}


.summary-item{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:16px;

    border-radius:16px;

    background:var(--surface);

}


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

#summary-debt{

    margin-top:24px;

}


/* =====================================================
   DEBT CONTAINER
===================================================== */

#summary-debt-card{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* =====================================================
   DEBT CARD
===================================================== */

.debt-card{

    padding:18px;

    border-radius:18px;

    background:var(--surface);

}


/* =====================================================
   DEBT HEADER
===================================================== */

.debt-card-header{

    margin-bottom:16px;

}


.debt-card-header h3{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:var(--text-primary);

}


.debt-card-header p{

    margin:6px 0 0;

    font-size:12px;

    line-height:1.5;

    color:var(--text-secondary);

}


/* =====================================================
   DEBT LIST
===================================================== */

.debt-list{

    display:flex;

    flex-direction:column;

}


/* =====================================================
   ACTIVE DEBT
===================================================== */

.debt-member{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:14px 0;

    border-bottom:

        1px solid

        var(--border-color);

}


.debt-member:first-child{

    padding-top:0;

}


.debt-member:last-child{

    padding-bottom:0;

    border-bottom:none;

}


.debt-member-info{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;

}


.debt-member-info strong{

    font-size:15px;

    font-weight:600;

    color:var(--text-primary);

}


.debt-member-info small{

    font-size:12px;

    color:var(--text-secondary);

}


.debt-active-amount{

    flex-shrink:0;

    white-space:nowrap;

    font-size:15px;

    font-weight:700;

    color:#EF4444;

}


/* =====================================================
   DEBT HISTORY
===================================================== */

.debt-history-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 0;

    border-bottom:

        1px solid

        var(--border-color);

}


.debt-history-item:first-child{

    padding-top:0;

}


.debt-history-item:last-child{

    border-bottom:none;

}


/* =====================================================
   DEBT HISTORY ICON
===================================================== */

.debt-history-icon{

    width:40px;

    height:40px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#F5F7FB;

    font-size:18px;

}


/* =====================================================
   DEBT HISTORY INFO
===================================================== */

.debt-history-info{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;

}


.debt-history-info strong{

    font-size:14px;

    font-weight:600;

    color:var(--text-primary);

}


.debt-history-info small{

    font-size:12px;

    color:var(--text-secondary);

}


.debt-history-info p{

    margin:3px 0 0;

    font-size:12px;

    color:var(--text-secondary);

}


/* =====================================================
   DEBT HISTORY AMOUNT
===================================================== */

.debt-history-amount{

    flex-shrink:0;

    white-space:nowrap;

    font-size:14px;

    font-weight:700;

}


.debt-borrow{

    color:#EF4444;

}


.debt-paid{

    color:#22C55E;

}


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

.debt-empty{

    padding:20px 10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}


.debt-empty span{

    margin-bottom:8px;

    font-size:28px;

}


.debt-empty p{

    margin:0;

    font-size:13px;

    color:var(--text-secondary);

}


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

.debt-pagination{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:16px;

    padding-top:14px;

    border-top:

        1px solid

        var(--border-color);

}


.debt-page-button{

    min-width:100px;

    height:38px;

    padding:0 12px;

    border:none;

    border-radius:10px;

    background:#F5F7FB;

    color:#2563EB;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}


.debt-page-button:hover{

    background:#EEF3FF;

}


.debt-page-button:active{

    transform:scale(.97);

}


.debt-page-button:disabled{

    opacity:.4;

    cursor:not-allowed;

}


.debt-page-info{

    font-size:12px;

    font-weight:600;

    color:var(--text-secondary);

}


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

#summary-distribution-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:24px;

}


#summary-distribution-chart{

    display:block;

    width:260px !important;

    height:260px !important;

    margin:auto;

}


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

#summary-distribution-list{

    width:100%;

    margin-top:24px;

    display:flex;

    flex-direction:column;

    gap:18px;

}


.distribution-item{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.distribution-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:15px;

    font-weight:600;

}


.distribution-bar{

    width:100%;

    height:10px;

    overflow:hidden;

    border-radius:999px;

    background:#edf2ff;

}


.distribution-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        #4f7cff,

        #6fa4ff

    );

}


.distribution-percent{

    text-align:right;

    font-size:12px;

    color:#7b8597;

}


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

.distribution-bank{

    display:flex;

    align-items:center;

    gap:10px;

}


.distribution-icon{

    width:20px;

    height:20px;

    flex-shrink:0;

    object-fit:contain;

    object-position:center;

}