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

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


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

    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);

}


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

}