/* =====================================================
   Finance Assistant
   Page        : Payroll Daily
   Module      : Summary
   File        : summary.css
   Version     : 2.0.0

   Description :
   Payroll Daily Summary Styling

   Theme :
   Mengikuti global theme variables.
===================================================== */


/* =====================================================
   PAYROLL SUMMARY SECTION
===================================================== */

#summary-payroll-last,
#summary-payroll-current{

    width:100%;

}


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

.summary-payroll-card{

    width:100%;

    box-sizing:border-box;

}


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

.summary-payroll-period{

    font-size:16px;

    line-height:1.5;

    color:var(
        --text-secondary,
        #6b7280
    );

    margin-bottom:16px;

}


/* =====================================================
   LAST PERIOD
===================================================== */

#summary-payroll-last
.summary-payroll-total{

    font-size:32px;

    line-height:1.2;

    font-weight:700;

    color:var(
        --text-primary,
        inherit
    );

    margin:8px 0 24px;

}


/* =====================================================
   LAST PERIOD NAVIGATION
===================================================== */

.summary-payroll-navigation{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:8px;

}


.summary-payroll-nav{

    border:0;

    background:transparent;

    padding:8px 0;

    font-size:17px;

    font-weight:600;

    color:var(
        --text-primary,
        inherit
    );

    cursor:pointer;

}


.summary-payroll-nav.disabled{

    color:var(
        --text-muted,
        #9ca3af
    );

    cursor:default;

}


/* =====================================================
   DETAIL BUTTON
===================================================== */

.summary-payroll-detail-button{

    display:block;

    width:100%;

    margin-top:22px;

    padding:10px 0;

    border:0;

    background:transparent;

    color:var(
        --primary-color,
        var(--accent-color, #2563eb)
    );

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}


.summary-payroll-detail-button:active{

    opacity:.7;

}


/* =====================================================
   CURRENT PERIOD NET
===================================================== */

.summary-payroll-net-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    width:100%;

    font-size:17px;

    line-height:1.4;

    color:var(
        --text-primary,
        inherit
    );

}


.summary-payroll-net-row strong:last-child{

    white-space:nowrap;

}


/* =====================================================
   FINAL NET
===================================================== */

.summary-payroll-net-final{

    padding-top:2px;

    font-size:19px;

}


.summary-payroll-net-final strong:last-child{

    font-size:21px;

}


/* =====================================================
   DIVIDER
===================================================== */

.summary-payroll-divider{

    width:100%;

    height:1px;

    margin:20px 0;

    background:var(
        --border-color,
        rgba(128,128,128,.20)
    );

}


/* =====================================================
   GROUP
===================================================== */

.summary-payroll-group{

    width:100%;

}


/* =====================================================
   GROUP TITLE
===================================================== */

.summary-payroll-group-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:6px;

    margin-bottom:14px;

    font-size:18px;

    line-height:1.4;

    font-weight:600;

    color:var(
        --text-primary,
        inherit
    );

}


/* =====================================================
   WORK LIST
===================================================== */

.summary-payroll-work-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}


/* =====================================================
   WORK ROW
===================================================== */

.summary-payroll-work-row{

    display:grid;

    grid-template-columns:

        minmax(0, 1fr)

        auto;

    align-items:center;

    column-gap:16px;

    width:100%;

}


/* =====================================================
   WORK INFO
===================================================== */

.summary-payroll-work-info{

    min-width:0;

    display:flex;

    align-items:baseline;

    gap:7px;

    flex-wrap:wrap;

}


.summary-payroll-work-info strong{

    font-size:15px;

    line-height:1.35;

    font-weight:600;

    color:var(
        --text-primary,
        inherit
    );

}


.summary-payroll-work-info span{

    font-size:14px;

    line-height:1.35;

    color:var(
        --text-secondary,
        #6b7280
    );

    white-space:nowrap;

}


/* =====================================================
   ROW VALUE
===================================================== */

.summary-payroll-row-value{

    text-align:right;

    white-space:nowrap;

    font-size:15px;

    line-height:1.35;

    color:var(
        --text-primary,
        inherit
    );

}


/* =====================================================
   NORMAL ROW
===================================================== */

.summary-payroll-row{

    display:grid;

    grid-template-columns:

        minmax(0, 1fr)

        auto;

    align-items:center;

    gap:16px;

    width:100%;

    margin-bottom:10px;

}


/* =====================================================
   ROW MAIN
===================================================== */

.summary-payroll-row-main{

    display:flex;

    align-items:baseline;

    gap:7px;

    min-width:0;

}


.summary-payroll-row-main strong{

    font-size:15px;

    font-weight:600;

    line-height:1.4;

    color:var(
        --text-primary,
        inherit
    );

}


.summary-payroll-row-main small{

    font-size:13px;

    color:var(
        --text-secondary,
        #6b7280
    );

}


/* =====================================================
   SUBTOTAL
===================================================== */

.summary-payroll-subtotal{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:14px;

    font-size:15px;

    line-height:1.4;

    color:var(
        --text-primary,
        inherit
    );

}


.summary-payroll-subtotal strong{

    white-space:nowrap;

}


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

.summary-payroll-empty{

    padding:4px 0;

    font-size:14px;

    line-height:1.5;

    color:var(
        --text-secondary,
        #6b7280
    );

}


/* =====================================================
   OVERLAY
===================================================== */

.summary-payroll-overlay{

    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:flex-end;

    justify-content:center;

}


.summary-payroll-overlay.hidden{

    display:none;

}


/* =====================================================
   OVERLAY BACKDROP
===================================================== */

.summary-payroll-overlay-backdrop{

    position:absolute;

    inset:0;

    background:rgba(
        0,
        0,
        0,
        .45
    );

}


/* =====================================================
   OVERLAY PANEL
===================================================== */

.summary-payroll-overlay-panel{

    position:relative;

    z-index:1;

    width:100%;

    max-width:680px;

    max-height:88vh;

    overflow-y:auto;

    box-sizing:border-box;

    padding:20px;

    border-radius:24px 24px 0 0;

    background:var(
        --card-background,
        var(--bg-card, #fff)
    );

    color:var(
        --text-primary,
        inherit
    );

    box-shadow:

        0 -8px 30px

        rgba(
            0,
            0,
            0,
            .15
        );

}


/* =====================================================
   OVERLAY HEADER
===================================================== */

.summary-payroll-overlay-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding-bottom:16px;

    margin-bottom:4px;

    border-bottom:1px solid;

    border-color:var(
        --border-color,
        rgba(128,128,128,.20)
    );

}


.summary-payroll-overlay-header > div{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;

}


.summary-payroll-overlay-header strong{

    font-size:18px;

    color:var(
        --text-primary,
        inherit
    );

}


.summary-payroll-overlay-header small{

    font-size:13px;

    color:var(
        --text-secondary,
        #6b7280
    );

}


/* =====================================================
   OVERLAY CLOSE
===================================================== */

.summary-payroll-overlay-close{

    width:38px;

    height:38px;

    flex:none;

    border:0;

    border-radius:50%;

    background:var(
        --surface-secondary,
        rgba(128,128,128,.10)
    );

    color:var(
        --text-primary,
        inherit
    );

    font-size:18px;

    cursor:pointer;

}


/* =====================================================
   OVERLAY CONTENT
===================================================== */

.summary-payroll-overlay-content{

    padding-top:4px;

}


/* =====================================================
   OVERLAY TOTAL
===================================================== */

.summary-payroll-overlay-total{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    font-size:17px;

    color:var(
        --text-primary,
        inherit
    );

}


.summary-payroll-overlay-total strong{

    font-size:20px;

    white-space:nowrap;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(

    max-width:480px

){

    .summary-payroll-period{

        font-size:15px;

    }


    #summary-payroll-last
    .summary-payroll-total{

        font-size:30px;

    }


    .summary-payroll-group-title{

        font-size:17px;

    }


    .summary-payroll-work-info strong,
    .summary-payroll-row-main strong{

        font-size:14px;

    }


    .summary-payroll-work-info span,
    .summary-payroll-row-main small{

        font-size:12px;

    }


    .summary-payroll-row-value{

        font-size:14px;

    }


    .summary-payroll-net-row{

        font-size:16px;

    }


    .summary-payroll-net-final strong:last-child{

        font-size:19px;

    }


    .summary-payroll-overlay-panel{

        padding:18px;

        border-radius:20px 20px 0 0;

    }

}


/* =====================================================
   DARK THEME SUPPORT
===================================================== */

[data-theme="dark"]
.summary-payroll-overlay-panel{

    box-shadow:

        0 -8px 30px

        rgba(
            0,
            0,
            0,
            .35
        );

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

.summary-payroll-detail-button:focus-visible,
.summary-payroll-nav:focus-visible,
.summary-payroll-overlay-close:focus-visible{

    outline:2px solid;

    outline-color:var(
        --primary-color,
        var(--accent-color, #2563eb)
    );

    outline-offset:3px;

}