.payroll-simple{
    min-height:calc(100vh - 108px);
    padding:50px 24px 75px;
    background:
        radial-gradient(circle at 80% 0%,
        rgba(38,82,119,.16),transparent 34%),
        #06182b;
    color:#eef4fa;
}

.payroll-wrap{
    width:min(1380px,100%);
    margin:0 auto;
}

.payroll-title{
    margin-bottom:27px;
}

.payroll-title .eyebrow{
    color:#d9ae5f;
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    margin-bottom:9px;
}

.payroll-title h1{
    margin:0 0 9px;
    color:#fff;
    font-size:clamp(30px,4vw,45px);
    line-height:1.08;
}

.payroll-title p{
    margin:0;
    color:#9fb0c2;
    font-size:14px;
}

.payroll-controls{
    display:grid;
    grid-template-columns:1.35fr 1fr 1.2fr;
    gap:16px;
    padding:20px;
    margin-bottom:12px;

    background:linear-gradient(
        180deg,
        rgba(12,39,65,.98),
        rgba(8,29,49,.98)
    );

    border:1px solid rgba(255,255,255,.08);
    border-radius:13px;
}

.control-block label{
    display:block;
    margin-bottom:7px;
    color:#b8c7d5;
    font-size:11px;
    font-weight:650;
}

.control-block select{
    width:100%;
    height:44px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:#071c31;
    color:#f1f5f9;
    outline:none;
    font:inherit;
    font-size:13px;
}

.direction-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    padding:4px;
    background:#07192c;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
}

.direction-btn{
    height:36px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#a9bbcc;
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:650;
}

.direction-btn.active{
    color:#07182a;
    background:linear-gradient(135deg,#efcb82,#d9ae5f);
}

.autofill-note{
    margin:0 2px 18px;
    color:#7f94a8;
    font-size:11px;
}

.payroll-table-card{
    overflow:hidden;

    background:linear-gradient(
        180deg,
        rgba(11,35,59,.98),
        rgba(7,26,45,.98)
    );

    border:1px solid rgba(255,255,255,.08);
    border-radius:13px;
    box-shadow:0 22px 60px rgba(0,0,0,.16);
}

.table-scroll{
    width:100%;
    overflow-x:auto;
}

.payroll-table{
    width:100%;
    min-width:1130px;
    border-collapse:collapse;
    font-variant-numeric:tabular-nums;
}

.payroll-table th{
    padding:13px 11px;
    text-align:right;

    color:#9dafc0;
    background:#071b30;

    font-size:10px;
    font-weight:700;
    letter-spacing:.02em;

    border-bottom:1px solid rgba(255,255,255,.08);
    white-space:nowrap;
}

.payroll-table th:first-child,
.payroll-table th:nth-child(2){
    text-align:left;
}

.payroll-table td{
    height:53px;
    padding:7px 11px;

    text-align:right;
    color:#dce5ed;

    font-size:12px;
    border-bottom:1px solid rgba(255,255,255,.052);
    white-space:nowrap;
}

.payroll-table tbody tr:hover td{
    background:rgba(255,255,255,.018);
}

.payroll-table .month-name{
    text-align:left;
    color:#f0f4f8;
    font-weight:650;
}

.payroll-table .salary-cell{
    text-align:left;
    width:150px;
}

.month-salary{
    width:135px;
    height:36px;
    box-sizing:border-box;

    border-radius:6px;
    border:1px solid rgba(255,255,255,.10);

    background:#06182b;
    color:#fff;

    padding:0 9px;
    outline:none;

    font:inherit;
    font-size:12px;
}

.month-salary:focus{
    border-color:#d9ae5f;
    box-shadow:0 0 0 2px rgba(217,174,95,.08);
}

.net-col{
    color:#efcb82 !important;
    font-weight:700;
}

.cost-col{
    color:#dfeaf5 !important;
    font-weight:700;
}

.payroll-table tfoot td{
    padding:15px 11px;
    background:#071b30;

    color:#efcb82;
    font-weight:700;

    border-top:1px solid rgba(217,174,95,.20);
    border-bottom:0;
}

.payroll-table tfoot td:first-child{
    text-align:left;
}

.calculate-area{
    display:flex;
    justify-content:flex-end;
    padding:17px 20px;
}

#calculateAnnualPayroll{
    min-width:245px;
    min-height:46px;

    border:0;
    border-radius:8px;

    color:#07182a;
    background:linear-gradient(135deg,#efcb82,#d9ae5f);

    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:750;
}

#calculateAnnualPayroll:hover{
    filter:brightness(1.04);
}

#calculateAnnualPayroll:disabled{
    opacity:.65;
    cursor:wait;
}

.payroll-error{
    margin:17px 20px 0;
    padding:11px 13px;

    border-radius:7px;
    border:1px solid rgba(220,80,80,.25);

    background:rgba(190,55,55,.10);
    color:#ffd1d1;

    font-size:11px;
}

.hidden{
    display:none !important;
}

.payroll-footnote{
    margin-top:15px;
    color:#657e95;
    font-size:10px;
}

@media(max-width:900px){

    .payroll-controls{
        grid-template-columns:1fr;
    }

}

@media(max-width:650px){

    .payroll-simple{
        padding:34px 14px 60px;
    }

    .payroll-controls{
        padding:15px;
    }

    .calculate-area{
        justify-content:stretch;
    }

    #calculateAnnualPayroll{
        width:100%;
    }

}


/* YAKA EXCEL EXPORT V1 */

.calculate-area{
    gap:10px;
    align-items:center;
}

.export-excel-btn{
    min-width:155px;
    min-height:46px;

    padding:0 20px;

    border-radius:8px;
    border:1px solid rgba(217,174,95,.45);

    background:transparent;
    color:#efcb82;

    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:700;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.export-excel-btn:hover:not(:disabled){
    background:rgba(217,174,95,.10);
    border-color:#d9ae5f;
}

.export-excel-btn:disabled{
    opacity:.38;
    cursor:not-allowed;
}

@media(max-width:650px){

    .calculate-area{
        flex-direction:column-reverse;
    }

    .export-excel-btn,
    #calculateAnnualPayroll{
        width:100%;
    }
}