/* =====================================================
   PAYROLL MONTHLY
   FILE : home.css
   DESCRIPTION : Payroll Monthly Home Page
   VERSION : 1.3.0

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


/* =====================================================
   HERO
===================================================== */

#hero{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:20px 0;

}


#hero-content{

    flex:1.4;

}


#hero-title{

    margin-top:14px;

    font-size:22px;

    font-weight:700;

    line-height:1.35;

    letter-spacing:-0.3px;

    color:var(--text);

}


#hero-description{

    margin-top:12px;

    max-width:220px;

    color:var(--text-secondary);

    font-size:15px;

    line-height:1.6;

}


#hero-image{

    flex:1;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

}


#hero-image img{

    width:200px;

    max-width:42vw;

    height:auto;

    display:block;

}


/* =====================================================
   HOME SECTION SPACING
===================================================== */

#home-page .section{

    margin-bottom:32px;

}


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

.section-header{

    margin-bottom:16px;

}


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

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 16px;

    border-radius:999px;

    background:var(--surface);

    color:var(--text);

    font-size:1.15rem;

    font-weight:700;

}


/* =====================================================
   PREVIOUS PAYROLL
===================================================== */

#summary{

    margin-bottom:32px;

}


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

#summary-card .home-payroll-title{

    margin:0;

    font-size:21px;

    font-weight:600;

    line-height:1.3;

    text-align:center;

    color:var(--text);

}


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

#summary-card .home-payroll-period{

    margin-top:7px;

    font-size:12px;

    line-height:1.4;

    text-align:center;

    color:var(--text-secondary);

}


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

#summary-card .home-payroll-salary{

    margin-top:20px;

    font-size:28px;

    line-height:1.2;

    font-weight:800;

    text-align:center;

    color:var(--text);

}


/* =====================================================
   PREVIOUS ATTENDANCE GRID
===================================================== */

#summary-card .home-attendance-grid{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:8px;

    width:100%;

    margin-top:22px;

}


/* =====================================================
   PREVIOUS ATTENDANCE ITEM
===================================================== */

#summary-card .home-attendance-item{

    min-width:0;

    min-height:78px;

    padding:13px 8px;

    box-sizing:border-box;

    border-radius:18px;

    background:var(--surface);

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:5px;

}


/* =====================================================
   PREVIOUS ATTENDANCE LABEL
===================================================== */

#summary-card .home-attendance-item span{

    display:block;

    width:100%;

    font-size:13px;

    line-height:1.3;

    color:var(--text-secondary);

    white-space:nowrap;

}


/* =====================================================
   PREVIOUS ATTENDANCE VALUE
===================================================== */

#summary-card .home-attendance-item strong{

    display:block;

    width:100%;

    font-size:23px;

    line-height:1.1;

    font-weight:700;

    color:var(--text);

}


/* =====================================================
   ATTENDANCE CURRENT MONTH
===================================================== */

#attendance{

    margin-bottom:32px;

}


/* =====================================================
   CURRENT ATTENDANCE PERIOD
===================================================== */

.attendance-period{

    margin-bottom:18px;

    text-align:center;

    color:var(--text-secondary);

    font-size:15px;

    line-height:1.4;

}


/* =====================================================
   CURRENT ATTENDANCE GRID
===================================================== */

.attendance-grid{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:8px;

}


/* =====================================================
   CURRENT ATTENDANCE ITEM
===================================================== */

.attendance-item{

    min-width:0;

    min-height:78px;

    padding:12px 10px;

    box-sizing:border-box;

    border-radius:18px;

    background:var(--surface);

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:5px;

}


/* =====================================================
   CURRENT ATTENDANCE LABEL
===================================================== */

.attendance-item span{

    display:block;

    width:100%;

    font-size:13px;

    line-height:1.3;

    color:var(--text-secondary);

    white-space:nowrap;

}


/* =====================================================
   CURRENT ATTENDANCE VALUE
===================================================== */

.attendance-item strong{

    display:block;

    width:100%;

    font-size:23px;

    line-height:1.1;

    font-weight:700;

    color:var(--text);

}


/* =====================================================
   INPUT
===================================================== */

#input{

    margin-bottom:32px;

}


/* =====================================================
   SETTING
===================================================== */

#setting{

    margin-bottom:32px;

}


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

@media(

    max-width:480px

){

    /* ---------------------------------------------
       HERO
    --------------------------------------------- */

    #hero{

        gap:8px;

    }


    #hero-title{

        font-size:22px;

    }


    #hero-description{

        font-size:15px;

    }


    #hero-image img{

        width:180px;

    }


    /* ---------------------------------------------
       PREVIOUS PAYROLL
    --------------------------------------------- */

    #summary-card .home-payroll-title{

        font-size:20px;

    }


    #summary-card .home-payroll-period{

        font-size:12px;

    }


    #summary-card .home-payroll-salary{

        margin-top:18px;

        font-size:28px;

    }


    #summary-card .home-attendance-grid{

        gap:8px;

        margin-top:20px;

    }


    #summary-card .home-attendance-item{

        min-height:76px;

        padding:12px 8px;

        border-radius:17px;

    }


    #summary-card .home-attendance-item span{

        font-size:12px;

    }


    #summary-card .home-attendance-item strong{

        font-size:22px;

    }


    /* ---------------------------------------------
       CURRENT ATTENDANCE
    --------------------------------------------- */

    .attendance-grid{

        gap:8px;

    }


    .attendance-item{

        min-height:76px;

        padding:12px 8px;

        border-radius:17px;

    }


    .attendance-item span{

        font-size:12px;

    }


    .attendance-item strong{

        font-size:22px;

    }

}