/* =====================================================
   Finance Assistant
   Page        : Payroll Daily
   Module      : Home
   File        : home.css
   Version     : 1.0.0

   Description :
   Payroll Daily Home

   Theme Aware :
   - Light
   - Dark
   - Green
   - Pink
===================================================== */


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

#summary{

    margin-bottom:32px;

}


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

#summary-card{

    display:flex;

    flex-direction:column;

    gap:16px;

    padding:22px;

    box-sizing:border-box;

}


/* =====================================================
   PAYROLL TITLE
===================================================== */

.home-payroll-title{

    font-size:15px;

    line-height:1.4;

    font-weight:600;

    color:var(--text-secondary);

}


/* =====================================================
   PAYROLL PERIOD
===================================================== */

.home-payroll-period{

    font-size:13px;

    line-height:1.4;

    color:var(--text-secondary);

    margin-top:-8px;

}


/* =====================================================
   PAYROLL SALARY
===================================================== */

.home-payroll-salary{

    font-size:32px;

    line-height:1.2;

    font-weight:800;

    color:var(--text);

    letter-spacing:-.3px;

    word-break:break-word;

}


/* =====================================================
   INCOME GRID
===================================================== */

.home-income-grid{

    display:grid;

    grid-template-columns:

        repeat(

            2,

            minmax(

                0,

                1fr

            )

        );

    gap:12px;

    margin-top:6px;

}


/* =====================================================
   INCOME ITEM
===================================================== */

.home-income-item{

    min-width:0;

    min-height:82px;

    padding:14px;

    box-sizing:border-box;

    border-radius:18px;

    background:var(--surface);

    border:

        1px solid

        var(--border);

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:7px;

}


/* =====================================================
   INCOME LABEL
===================================================== */

.home-income-item span{

    display:block;

    width:100%;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.3;

}


/* =====================================================
   INCOME VALUE
===================================================== */

.home-income-item strong{

    display:block;

    width:100%;

    color:var(--text);

    font-size:19px;

    line-height:1.2;

    font-weight:700;

    word-break:break-word;

}


/* =====================================================
   OPTIONAL PRIMARY ACCENT
===================================================== */

.home-payroll-salary{

    color:var(--primary);

}


/* =====================================================
   TABLET
===================================================== */

@media(

    max-width:700px

){

    #summary-card{

        padding:20px;

    }


    .home-payroll-salary{

        font-size:30px;

    }


    .home-income-item{

        min-height:78px;

        padding:13px;

    }


    .home-income-item strong{

        font-size:18px;

    }

}


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

@media(

    max-width:480px

){

    #summary-card{

        padding:18px 14px;

        gap:14px;

    }


    .home-payroll-title{

        font-size:14px;

    }


    .home-payroll-period{

        font-size:12px;

        margin-top:-6px;

    }


    .home-payroll-salary{

        font-size:28px;

    }


    .home-income-grid{

        gap:10px;

        margin-top:4px;

    }


    .home-income-item{

        min-height:76px;

        padding:12px;

        border-radius:16px;

        gap:6px;

    }


    .home-income-item span{

        font-size:12px;

    }


    .home-income-item strong{

        font-size:17px;

    }

}