:root{--ink:#10302A;--green:#176B4D;--deep:#0E4A37;--gold:#B07D2B;--bg:#F1F5F3;--line:#DAE3DE;--muted:#5C6F68;--in:#14795A;--out:#B3402C;--warn:#FFF3D6}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 "Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,.serif{font-family:"Newsreader",Georgia,serif;font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:1.9rem}h2{font-size:1.25rem}a{color:var(--green)}
.shell{display:grid;grid-template-columns:var(--sw,252px) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .22s ease}
.side{background:var(--deep);color:#DCEBE4;padding:20px 12px 14px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;z-index:50}
.brand{padding:0 10px 18px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:12px}
.brand img{width:60px;height:60px;object-fit:contain;background:#fff;border-radius:12px;padding:4px;margin-bottom:10px;display:block}
.brand b{font:600 1.15rem/1.25 "Newsreader",Georgia,serif;display:block;color:#fff}.brand span{font-size:.8rem;color:#9FC2B4}
.side a,.side .cbtn{color:#CFE3DA;text-decoration:none;padding:10px 12px;border-radius:9px;font-weight:500;display:flex;align-items:center;gap:12px;border:0;background:none;font:inherit;font-weight:500;cursor:pointer;width:100%;text-align:left}
.ni{width:21px;height:21px;flex:none}.grp{font-size:.76rem;color:#8DB5A5;padding:14px 12px 4px;font-weight:600}
.side .cbtn:hover{background:rgba(255,255,255,.08)}.side .cbtn svg{transition:transform .2s}
.side a:hover{background:rgba(255,255,255,.08)}.side a.on{background:#fff;color:var(--deep)}
.side .sp{flex:1}.side .who{font-size:.8rem;color:#9FC2B4;padding:8px 12px}
main{padding:30px clamp(16px,3.5vw,44px) 60px;max-width:1280px;width:100%}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.head p{margin:4px 0 0;color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g2{grid-template-columns:3fr 2fr}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero{background:var(--deep);color:#fff;border:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.hero small{color:#A9CDBE}.hero .big{font:600 clamp(1.5rem,2.2vw,2.5rem)/1.1 "Newsreader",Georgia,serif;font-variant-numeric:tabular-nums}
.kpi small,.lbl{color:var(--muted);font-size:.84rem}.kpi .v{font:600 1.45rem/1.3 "Newsreader",Georgia,serif;font-variant-numeric:tabular-nums}
.in{color:var(--in)}.out{color:var(--out)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;border:1px solid var(--green);background:var(--green);color:#fff;font:600 .9rem inherit;font-family:inherit;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--deep)}.btn.ghost{background:#fff;color:var(--green)}.btn.ghost:hover{background:#EDF5F1}.btn.sm{padding:5px 10px;font-size:.82rem}.btn.danger{background:#fff;color:var(--out);border-color:#E6C2BA}
.btn.gold{background:var(--gold);border-color:var(--gold)}
table{width:100%;border-collapse:collapse}th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;font-size:.82rem;color:var(--muted);background:#F7FAF8;position:sticky;top:0}
tr:hover td{background:#FAFCFB}.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.scroll table{min-width:860px}
.sub{color:var(--muted);font-size:.85rem}.tag{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.76rem;background:#E8F1EC;color:var(--deep)}
.tag.expense{background:#F8E6E2;color:var(--out)}.tag.opening{background:#F4EBD6;color:#7B5716}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #C5D2CB;border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,.btn:focus-visible,.side a:focus-visible{outline:3px solid #9ED3BC;outline-offset:1px}
label{font-weight:600;font-size:.88rem;display:block;margin-bottom:5px}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.bar>div{flex:1 1 150px}.bar>.fit{flex:0 0 auto}
.flash{padding:11px 14px;border-radius:9px;margin-bottom:14px;border:1px solid}.flash.success{background:#E6F4EC;border-color:#B8DEC9}
.flash.danger{background:#FBE9E5;border-color:#EBC0B7}.flash.info,.flash.warning{background:var(--warn);border-color:#EBD7A3}
.alert{background:var(--warn);border:1px solid #EBD7A3;border-radius:10px;padding:10px 14px;margin-bottom:16px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.seg input{position:absolute;opacity:0}
.seg label{margin:0;border:1px solid #C5D2CB;border-radius:9px;padding:10px;text-align:center;cursor:pointer;background:#fff}
.seg input:checked+label{background:var(--green);color:#fff;border-color:var(--green)}.seg input:focus-visible+label{outline:3px solid #9ED3BC}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form .w{grid-column:1/-1}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap}.empty{text-align:center;padding:42px 16px;color:var(--muted)}
.meter{height:6px;background:#E8F1EC;border-radius:9px;overflow:hidden;min-width:70px}.meter i{display:block;height:100%;background:var(--gold)}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,var(--deep),#12604A)}
.login .card{width:min(420px,100%);padding:32px}
.login .card img{width:92px;height:92px;object-fit:contain;display:block;margin:0 auto 14px}.login .card h1,.login .card .sub{text-align:center}
.titlebar{display:flex;align-items:center;gap:16px}.titlebar img{width:58px;height:58px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px}
.paper .logo{display:block;margin:0 auto 8px;max-height:84px;max-width:200px;object-fit:contain}
.pre{max-width:140px;max-height:100px;object-fit:contain;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff;display:block;margin-bottom:10px}
.paper{background:#fff;max-width:760px;margin:0 auto;padding:44px;border:1px solid var(--line)}
.paper h1{text-align:center}.paper .row{display:flex;justify-content:space-between;gap:20px;margin:10px 0;border-bottom:1px dotted #9AB;padding-bottom:6px}
.sig{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:64px;text-align:center;font-size:.85rem}.sig div{border-top:1px solid #333;padding-top:6px}
@media(max-width:1000px){.g4{grid-template-columns:1fr 1fr}.g2,.g3{grid-template-columns:1fr}}
@media(min-width:1001px){.dg{grid-template-columns:1.35fr 1fr 1fr 1fr}}
@media(min-width:901px){body.collapsed{--sw:74px}body.collapsed .brand b,body.collapsed .brand span,body.collapsed .grp,body.collapsed .who,body.collapsed .tx{display:none}
body.collapsed .side a,body.collapsed .side .cbtn{justify-content:center;padding:11px 0}body.collapsed .brand{padding:0 0 14px;text-align:center}body.collapsed .brand img{margin:0 auto 4px;width:44px;height:44px}body.collapsed .cbtn svg{transform:rotate(180deg)}}
.topbar,.scrim{display:none}
@media(max-width:900px){.shell{display:block}.cbtn{display:none!important}
.topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;background:var(--deep);color:#fff;padding:10px 14px;box-shadow:0 2px 14px rgba(6,38,28,.25)}
.topbar .mb{width:42px;height:42px;border-radius:10px;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}.topbar .mb:focus-visible{outline:3px solid #9ED3BC}
.topbar .ttl{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font:600 1.05rem "Newsreader",Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar .ttl img{width:30px;height:30px;object-fit:contain;background:#fff;border-radius:7px;padding:2px}
.topbar .btn{padding:8px 14px;background:var(--gold);border-color:var(--gold)}
.side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-102%);transition:transform .26s ease;box-shadow:none;padding-top:18px}
body.nav-open .side{transform:none;box-shadow:0 0 50px rgba(0,0,0,.45)}
.scrim{display:block;position:fixed;inset:0;background:rgba(6,38,28,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s;z-index:40}
body.nav-open .scrim{opacity:1;pointer-events:auto}body.nav-open{overflow:hidden}
.bar>div{flex:1 1 130px;min-width:0}.bar>div[style*='flex:2']{flex-basis:100%}input[type=date]{min-width:0}.form{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}.g4 .hero{grid-column:1/-1}.kpi .v{font-size:1.2rem}.head h1{font-size:1.6rem}main{padding-top:22px}.scroll{margin-inline:-4px}}
@media(prefers-reduced-motion:reduce){.side,.scrim,.shell{transition:none}}
@media print{.side,.topbar,.scrim,.noprint,.btn,.flash{display:none!important}.shell{display:block}main{padding:0}.card,.scroll,.paper{border:0}body{background:#fff}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.bal{font-weight:600}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:38px 18px;border:2px dashed #B8CCC2;border-radius:14px;background:#F6FAF8;cursor:pointer;margin:0 0 14px;font-weight:400;transition:border-color .2s,background .2s}
.drop svg{width:34px;height:34px;color:var(--green)}.drop b{font-size:1.05rem}.drop:hover,.drop.over{border-color:var(--gold);background:#FFF9EC}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;cursor:pointer}.chk input{width:auto;margin-top:4px}
.help{margin:0 0 12px;padding-left:18px}.help li{margin-bottom:6px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.app-logo{object-fit:contain;display:block}.top-logo{width:34px;height:34px;margin-right:10px}.side-logo{width:56px;height:56px;margin:0 auto 10px}.settings-logo{width:100px;height:100px;margin:8px 0}.login-logo{width:88px;height:88px;margin:0 auto 18px}.ttl{display:flex;align-items:center}


/* =========================================
   PAYROLL MODULE — RESPONSIVE ENHANCEMENTS
   ========================================= */

.payroll-wrap {
    width: 100%;
    max-width: 1450px;
    min-width: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

.payroll-wrap *,
.payroll-wrap *::before,
.payroll-wrap *::after {
    box-sizing: border-box;
}

.payroll-title {
    background: linear-gradient(125deg, #103b2a, #1f6a4c);
    color: #fff;
    padding: clamp(16px, 3vw, 30px);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(16, 59, 42, .12);
}

.payroll-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: left;
}

.payroll-logo {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    object-fit: contain;
    padding: 6px;
    background: #fff;
    border-radius: 14px;
}

.payroll-brand-text h1 {
    margin: 0;
    font-size: clamp(19px, 2.5vw, 32px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.payroll-brand-text p {
    margin: 7px 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
}

.payroll-brand-text span {
    font-size: 13px;
    opacity: .9;
}

.payroll-heading-bottom {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.25);
    text-align: center;
}

.payroll-heading-bottom h2 {
    margin: 0;
    font-size: clamp(16px, 2vw, 23px);
    font-weight: 800;
    line-height: 1.4;
}

.payroll-heading-bottom span {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: .12em;
}

.payroll-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.payroll-stat {
    min-width: 0;
    overflow-wrap: anywhere;
}

.payroll-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.payroll-actions .btn,
.payroll-actions button {
    min-height: 42px;
}

.payroll-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}

.payroll-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.payroll-table th,
.payroll-table td {
    padding: 11px 12px;
    vertical-align: middle;
}

.payroll-table input {
    width: 130px;
    max-width: 100%;
    min-height: 40px;
}

.payroll-wrap input,
.payroll-wrap select,
.payroll-wrap button {
    max-width: 100%;
}

@media (max-width: 900px) {
    .payroll-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .payroll-title {
        padding: 16px 12px;
        border-radius: 10px;
    }

    .payroll-brand {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .payroll-logo {
        width: 70px;
        height: 70px;
        flex-basis: 70px;
    }

    .payroll-brand-text h1 {
        font-size: 20px;
    }

    .payroll-brand-text p {
        font-size: 10px;
    }

    .payroll-heading-bottom {
        margin-top: 15px;
        padding-top: 12px;
    }

    .payroll-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .payroll-stat {
        padding: 11px;
    }

    .payroll-stat strong {
        font-size: 15px;
    }

    .payroll-actions {
        flex-direction: column;
    }

    .payroll-actions .btn,
    .payroll-actions button {
        width: 100%;
    }
}

@media print {
    .payroll-title {
        color: #111 !important;
        background: #fff !important;
        box-shadow: none;
        border: 1px solid #aaa;
    }

    .payroll-heading-bottom {
        border-color: #aaa;
    }

    .payroll-table-container {
        overflow: visible;
    }

    .payroll-table {
        min-width: 0;
        font-size: 9pt;
    }

    .payroll-table th {
        color: #fff !important;
        background: #104a38 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .payroll-actions,
    .no-print {
        display: none !important;
    }
}