/* =====================================================
   Finance Assistant
   Page        : Financial
   Module      : Home
   File        : home.css
   Version     : 2.0.0

   Description :
   Financial Home Summary Styling
===================================================== */


/* =====================================================
   HOME SUMMARY CARD
===================================================== */

#home-summary-card{

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:24px;

    box-sizing:border-box;

}


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

.financial-home-balance{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:26px 20px;

    box-sizing:border-box;

    border-radius:20px;

    background:var(--surface);

    text-align:center;

}


/* =====================================================
   BALANCE LABEL
===================================================== */

.financial-home-balance-label{

    color:var(--text-secondary);

    font-size:16px;

    line-height:1.35;

    font-weight:600;

}


/* =====================================================
   BALANCE VALUE
===================================================== */

.financial-home-balance-value{

    display:block;

    margin-top:8px;

    color:var(--text);

    font-size:32px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-.5px;

    word-break:break-word;

}


/* =====================================================
   EXPENSE GRID
===================================================== */

.financial-home-expense-grid{

    display:grid;

    grid-template-columns:

        repeat(

            2,

            minmax(

                0,

                1fr

            )

        );

    gap:14px;

}


/* =====================================================
   EXPENSE ITEM
===================================================== */

.financial-home-expense-item{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-width:0;

    min-height:105px;

    padding:16px;

    box-sizing:border-box;

    border-radius:18px;

    background:var(--surface);

}


/* =====================================================
   EXPENSE LABEL
===================================================== */

.financial-home-expense-item span{

    display:block;

    color:var(--text-secondary);

    font-size:14px;

    line-height:1.4;

    font-weight:600;

}


/* =====================================================
   EXPENSE VALUE
===================================================== */

.financial-home-expense-item strong{

    display:block;

    margin-top:12px;

    color:var(--text);

    font-size:20px;

    line-height:1.25;

    font-weight:800;

    letter-spacing:-.2px;

    word-break:break-word;

}


/* =====================================================
   DIVIDER
   Financial Home Summary
   Theme Aware
===================================================== */

.financial-home-divider{

    width:100%;

    height:2px;

    margin:2px 0;

    background:var(--border);

    opacity:.50;

    flex-shrink:0;

}


/* =====================================================
   HIGHEST EXPENSE
===================================================== */

.financial-home-highest-grid{

    display:grid;

    grid-template-columns:

        repeat(

            2,

            minmax(

                0,

                1fr

            )

        );

    gap:14px;

}


/* =====================================================
   HIGHEST EXPENSE ITEM
===================================================== */

.financial-home-highest-item{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-width:0;

    min-height:125px;

    padding:16px;

    box-sizing:border-box;

    border-radius:18px;

    background:var(--surface);

}


/* =====================================================
   HIGHEST EXPENSE LABEL
===================================================== */

.financial-home-highest-label{

    display:block;

    color:var(--text-secondary);

    font-size:14px;

    line-height:1.4;

    font-weight:600;

}


/* =====================================================
   HIGHEST EXPENSE DATE
===================================================== */

.financial-home-highest-date{

    display:block;

    margin-top:12px;

    color:var(--text);

    font-size:18px;

    line-height:1.35;

    font-weight:700;

    font-style:italic;

}


/* =====================================================
   HIGHEST EXPENSE VALUE
===================================================== */

.financial-home-highest-value{

    display:block;

    margin-top:6px;

    color:var(--text);

    font-size:20px;

    line-height:1.25;

    font-weight:800;

    letter-spacing:-.2px;

    word-break:break-word;

}


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

@media(

    max-width:480px

){

    #home-summary-card{

        padding:

            20px 16px;

        gap:12px;

    }


    /* ---------------------------------------------
       BALANCE
    --------------------------------------------- */

    .financial-home-balance{

        padding:

            22px 16px;

        border-radius:18px;

    }


    .financial-home-balance-label{

        font-size:15px;

    }


    .financial-home-balance-value{

        font-size:30px;

    }


    /* ---------------------------------------------
       EXPENSE
    --------------------------------------------- */

    .financial-home-expense-grid{

        gap:10px;

    }


    .financial-home-expense-item{

        min-height:92px;

        padding:

            14px 12px;

        border-radius:16px;

    }


    .financial-home-expense-item span{

        font-size:13px;

    }


    .financial-home-expense-item strong{

        margin-top:10px;

        font-size:18px;

        font-weight:800;

    }


    /* ---------------------------------------------
       HIGHEST EXPENSE
    --------------------------------------------- */

    .financial-home-highest-grid{

        gap:10px;

    }


    .financial-home-highest-item{

        min-height:110px;

        padding:

            14px 12px;

        border-radius:16px;

    }


    .financial-home-highest-label{

        font-size:13px;

    }


    .financial-home-highest-date{

        margin-top:10px;

        font-size:17px;

        font-style:italic;

    }


    .financial-home-highest-value{

        margin-top:5px;

        font-size:18px;

        font-weight:800;

    }

}


/* =====================================================
   HOME : HIGHEST EXPENSE VALUE FIX
===================================================== */

.financial-home-highest-date{

    color:#202733 !important;

    font-size:17px !important;

    line-height:1.3;

    font-weight:700 !important;

    font-style:italic;

}


.financial-home-highest-value{

    color:#202733 !important;

    font-size:20px !important;

    line-height:1.25;

    font-weight:800 !important;

}