/* base reset: [hidden] must always win over layout rules (the sign-in box uses display:grid) */
[hidden]{display:none!important}
html,body{margin:0}
img{max-width:100%}

/* Layout: a dispatch-office desk — slim app bar with the reporting period, tab rail, one working pane. */
:root{
  --bg:#eef1f3; --surface:#ffffff; --surface-2:#f6f8f9; --ink:#16212b; --muted:#5a6672; --line:#d9dfe4;
  --primary:#0B0E13; --primary-ink:#ffffff; --amber:#E8232F; --brand-red:#E8232F; --focus:#1d6fd6;
  --good:#2e7d32; --good-bg:#e3f1e4; --warn:#9a5b00; --warn-bg:#fff1d6; --crit:#b42318; --crit-bg:#fde7e4;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --plate-bg:#f7d64a; --plate-ink:#111; --plate-edge:#2a2a2a;
  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-body:"Barlow","Segoe UI",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,monospace;
  --r:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11161b; --surface:#192028; --surface-2:#1f2831; --ink:#e7ecf0; --muted:#9ba7b3; --line:#2c3743;
  --primary:#E7ECF0; --primary-ink:#0B0E13; --amber:#FF4B55; --brand-red:#FF4B55; --focus:#6aa8f5;
  --good:#7cc97f; --good-bg:#1c3320; --warn:#f2b45a; --warn-bg:#3a2b12; --crit:#ff8a7a; --crit-bg:#3d1c19;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11161b; --surface:#192028; --surface-2:#1f2831; --ink:#e7ecf0; --muted:#9ba7b3; --line:#2c3743;
  --primary:#E7ECF0; --primary-ink:#0B0E13; --amber:#FF4B55; --brand-red:#FF4B55; --focus:#6aa8f5;
  --good:#7cc97f; --good-bg:#1c3320; --warn:#f2b45a; --warn-bg:#3a2b12; --crit:#ff8a7a; --crit-bg:#3d1c19;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--font-body);font-variant-numeric:tabular-nums}
.wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.bar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:10px}
.brand{display:flex;align-items:center;gap:14px;margin-right:auto}
.brand-logo{display:block;flex:0 0 auto;width:203px;height:34px;color:var(--ink)}
.brand-logo .lg{width:203px;height:34px;display:block;overflow:visible}
.lg .lg-desc{color:var(--muted)}
.brand h1{padding-left:14px;border-left:1px solid var(--line)}
.brand h1{font:700 26px/1 var(--font-display);letter-spacing:.02em;margin:0;text-transform:uppercase}
.brand span{color:var(--muted);font-size:13px}
.period{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.period label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
select,input,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:7px 9px;min-width:0}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
nav.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
@media (min-width:900px){nav.tabs{flex-wrap:wrap;overflow:visible}}
nav.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 7px 9px;font:600 15px var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap}
nav.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--amber)}
nav.tabs .count{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--crit-bg);color:var(--crit);font:600 12px var(--font-body)}
main{padding-block:20px 48px;display:grid;gap:20px}
h2{font:600 22px/1.15 var(--font-display);letter-spacing:.03em;text-transform:uppercase;margin:0;text-wrap:balance}
h3{font:600 17px/1.2 var(--font-display);letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kpi{background:var(--surface);padding:12px 14px}
.kpi .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.kpi .v{font:600 clamp(24px,2.3vw,30px)/1.1 var(--font-display);margin-top:4px;white-space:nowrap}
.kpi .s{font-size:12px;color:var(--muted)}
.kpi.bad .v{color:var(--crit)} .kpi.ok .v{color:var(--good)}
.tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{position:sticky;top:0;background:var(--surface-2);text-align:left;font:600 12px var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right}
tfoot td{font-weight:600;background:var(--surface-2)}
tbody tr.click{cursor:pointer} tbody tr.click:hover,tbody tr.sel{background:var(--surface-2)}
.plate{display:inline-block;font:500 13px/1 var(--font-mono);letter-spacing:.06em;background:var(--plate-bg);color:var(--plate-ink);border:1.5px solid var(--plate-edge);border-radius:3px;padding:3px 6px}
.mono{font-family:var(--font-mono);font-size:13px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap}
.chip.crit{background:var(--crit-bg);color:var(--crit)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.good{background:var(--good-bg);color:var(--good)} .chip.info{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.chip.crit::before{content:"▲"} .chip.warn::before{content:"●"} .chip.good::before{content:"✓"}
.muted{color:var(--muted)} .small{font-size:13px}
.bad{color:var(--crit)}
button.btn{font:600 15px var(--font-body);border-radius:var(--r);padding:8px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
button.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
button.btn.danger{color:var(--crit);border-color:var(--crit)}
button.btn.link,label.btn.link{border:0;background:none;color:var(--focus);padding:4px 6px;font-weight:500}
button:disabled{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:var(--surface);padding:8px 16px;font:600 15px var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
form.cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px 16px}
.f{display:grid;gap:4px;min-width:0;align-content:start}
.f label{font-size:13px;font-weight:600}
.f label .req{color:var(--amber)}
.f .hint{font-size:12px;color:var(--muted)}
.preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:14px}
.preview div{background:var(--surface-2);padding:10px 12px}
.preview b{display:block;font:600 22px var(--font-display)}
.notice{border-radius:var(--r);padding:10px 12px;font-size:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.notice.crit{background:var(--crit-bg);color:var(--crit)} .notice.warn{background:var(--warn-bg);color:var(--warn)} .notice.good{background:var(--good-bg);color:var(--good)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin-bottom:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
svg text{fill:var(--muted);font:12px var(--font-body)}
svg .grid{stroke:var(--line);stroke-width:1}
svg .zero{stroke:var(--muted);stroke-width:1.2}
svg .ref{stroke:var(--crit);stroke-width:1.5;stroke-dasharray:5 4}
svg .conn{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
svg text.vlab{fill:var(--ink);font-weight:600}
#tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--surface);font-size:13px;padding:6px 9px;border-radius:4px;z-index:20;max-width:260px}
.bullet{position:relative;height:14px;background:var(--surface-2);border-radius:3px;min-width:120px}
.bullet .fill{position:absolute;left:0;top:2px;bottom:2px;background:var(--s1);border-radius:0 4px 4px 0}
.bullet .tgt{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.detail-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.inline-in{padding:4px 6px;width:100%;min-width:90px}
td .inline-in.num{width:90px}
@media (max-width:560px){.brand-logo,.brand-logo .lg{width:155px;height:26px}.brand h1{font-size:20px;padding-left:10px}.kpi .v{font-size:24px}}
@media (prefers-reduced-motion:no-preference){.panel{transition:border-color .2s}}

/* sign-in and account */
.login-wrap{min-height:80vh;display:grid;place-items:center;padding-block:24px}
.login{width:min(100%,380px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:14px}
.login h1{font:700 30px/1 var(--font-display);text-transform:uppercase;letter-spacing:.03em;margin:0}
.login-logo{color:var(--ink);padding-bottom:6px}
.login-logo .lg{width:300px;max-width:100%;height:auto;display:block}
.login p{margin:0;color:var(--muted)}
.login input{width:100%}
.login input[type=checkbox]{width:18px;flex:none}
#loginMsg{color:var(--crit);min-height:1.2em;font-size:14px}
.account{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
a.btn{display:inline-block;text-decoration:none;font:600 15px var(--font-body);border-radius:var(--r);padding:8px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}

.scrollbox .tablebox{max-height:440px;overflow:auto}
.scanbar{display:grid;gap:10px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.scanbar label.btn{display:inline-flex;align-items:center;cursor:pointer;font:600 15px var(--font-body);border-radius:var(--r);padding:8px 16px;border:1px solid var(--s1);color:var(--s1);background:var(--surface)}
.scanbar label.btn.is-disabled{opacity:.6;pointer-events:none}
.thumbs{display:flex;flex-wrap:wrap;gap:12px}
.thumb{margin:0;display:grid;gap:4px;width:150px}
.thumb img,.thumb .pdf{width:150px;height:180px;object-fit:cover;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);display:grid;place-items:center;font:600 18px var(--font-display);color:var(--muted)}
.thumb figcaption{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.thumb figcaption .btn{padding:0;font-size:12px}
.aifill{background:color-mix(in srgb,var(--s1) 12%,var(--surface))!important;border-color:var(--s1)!important}
.notice.info{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--s1);border-radius:50%;animation:spin .8s linear infinite;margin-right:8px;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
a.clip{text-decoration:none;font-size:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vatbox{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.vatbox>div{display:flex;flex-direction:column;gap:4px}
.vatbox b{font-size:20px}
.news-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:980px){.news-grid{grid-template-columns:minmax(0,1fr)}}
.news-list{display:grid;gap:0}
.news{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.news:first-child{padding-top:0}.news:last-child{border-bottom:0}
.news.unrest{border-left:4px solid var(--crit);padding-left:12px}
.news-t{margin:0;font:600 17px/1.35 var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink)}
.news-t a{color:var(--ink);text-decoration:none}.news-t a:hover{text-decoration:underline}
.news-s{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
ul.links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
ul.links a{font-weight:600}
.good-t{color:var(--good)}
.print-brand{display:none}
.fld{display:grid;gap:4px;min-width:0;font-size:13px;font-weight:600}.fld input,.fld select,.fld textarea{font-weight:400;width:100%}
.fld input:disabled{opacity:.65}
.kpi.warn .v{color:var(--warn)}
.mt-table tr.mt-off td{opacity:.45}.mt-table tr.mt-off td:first-child{opacity:1}
.print-only{display:none}
.mt-print{display:grid;gap:20px;min-width:0}
.emp-sec{grid-column:1/-1;margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);font:700 14px var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 18px;margin-top:6px}
.emp-prog{height:10px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}.emp-prog i{display:block;height:100%;background:var(--good)}
.emp-steps td{vertical-align:top}
/* payslip */
.payslip-wrap{overflow-x:auto}
.payslip{position:relative;background:#fff;color:#0B0E13;border:1px solid var(--line);border-radius:6px;padding:26px 28px;max-width:820px;margin:0 auto;font:13px/1.45 var(--font-body)}
.payslip .ps-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:4px solid #E8232F;padding-bottom:12px}
.payslip .ps-logo svg{width:230px;height:38px;color:#0B0E13}.payslip .ps-logo .lg-desc{color:#5B636B}
.payslip .ps-title{text-align:right}.payslip .ps-title .t{font:700 26px var(--font-display);text-transform:uppercase;letter-spacing:.04em}.payslip .ps-title .s{color:#5B636B}
.payslip .ps-draft{display:inline-block;margin-top:4px;border:2px solid #E8232F;color:#E8232F;font-weight:700;padding:1px 10px;border-radius:4px;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.payslip .ps-parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0}
.payslip .ps-k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#5B636B;margin-bottom:3px;font-weight:600}
.payslip .ps-small{font-size:11.5px;color:#5B636B}
.payslip .ps-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
.payslip table.ps-t{width:100%;border-collapse:collapse;margin-top:8px}
.payslip .ps-t th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#5B636B;text-align:left;border-bottom:2px solid #0B0E13;padding:5px 4px;background:none;position:static}
.payslip .ps-t td{padding:4px;border-bottom:1px solid #E6E8EB;color:#0B0E13;background:none;white-space:normal}
.payslip .ps-t tfoot td{font-weight:700;border-bottom:0;border-top:1px solid #0B0E13}
.payslip .ps-t .n{text-align:right;white-space:nowrap}
.payslip .ps-net{display:flex;justify-content:space-between;align-items:center;margin:16px 0 6px;padding:12px 16px;border:2px solid #0B0E13;border-left:8px solid #E8232F;border-radius:4px}
.payslip .ps-net span{font:700 16px var(--font-display);text-transform:uppercase;letter-spacing:.06em}.payslip .ps-net b{font-size:22px}
.payslip .ps-small-cols .ps-t td{font-size:12px}
.payslip .ps-trips{margin-top:16px;padding-top:10px;border-top:1px dashed #C9CED3}
.payslip .ps-mini td,.payslip .ps-mini th{font-size:11px;padding:3px 4px}
.payslip .ps-sum{margin-top:8px;font-size:12.5px}
.payslip .ps-foot{margin-top:16px;padding-top:8px;border-top:1px solid #E6E8EB;font-size:11px;color:#5B636B}
.payslip.draft::after{content:"DRAFT";position:absolute;top:40%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font:700 110px var(--font-display);color:rgba(232,35,47,.08);pointer-events:none}
#payPrint{display:none}
@media (max-width:640px){.payslip{padding:16px}.payslip .ps-parties,.payslip .ps-cols{grid-template-columns:1fr;gap:8px}.payslip .ps-logo svg{width:160px;height:27px}}
.rate-a{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.rate-in{display:flex;align-items:center;gap:6px}.rate-in input{width:100%;font-weight:600}
.rate-table tr.rate-group td{background:var(--surface-2);font:700 13px var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rate-table td .inline-in.num{width:90px}
.kpi.bad .v{color:var(--crit)}
.st-only{display:none}.st-head .chip{display:none}
.svc-thumb{position:relative;display:inline-flex;align-items:flex-start;gap:2px}.svc-thumb img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.svc-thumb .pdf{display:grid;place-items:center;width:72px;height:72px;border-radius:6px;border:1px solid var(--line);font-weight:700;text-decoration:none}
label.btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:600 15px var(--font-body);border-radius:var(--r);padding:8px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
label.btn.link{border:0;background:none;color:var(--focus);padding:4px 6px;font-weight:500}
@media (max-width:640px){
  .tablebox:has(> table.stack){overflow:visible;border:0;background:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack thead{display:none}
  table.stack tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:10px}
  table.stack td{border:0;padding:3px 0;text-align:left!important;white-space:normal!important;min-width:0!important}
  table.stack td[data-l]{position:relative;padding-left:118px}
  table.stack td[data-l]::before{content:attr(data-l);position:absolute;left:0;top:5px;width:108px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
  header.bar{position:static}
  table.stack td.st-hide{display:none}
  table.stack .st-only{display:inline}table.stack .st-head .chip{display:inline-flex}
  table.stack td.st-head{padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  table.stack td:empty{display:none}
}
@media print{
  body.pp > *:not(#payPrint){display:none!important}body.pp #payPrint{display:block}
  #payPrint .payslip{border:0;padding:0;max-width:none;break-after:page;page-break-after:always}#payPrint .payslip:last-child{break-after:auto;page-break-after:auto}
  header.bar,nav.tabs,.no-print,#tip,.btn,button{display:none!important}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-brand{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:12px;border-bottom:4px solid #E8232F;margin-bottom:8px;color:#0B0E13}
  .print-brand .lg{width:240px;height:40px}.print-brand .lg .lg-desc{color:#5B636B}
  .print-brand .pb-t{font:700 22px var(--font-display);text-transform:uppercase;text-align:right}.print-brand .pb-s{font-size:13px;color:#5B636B;text-align:right}
  .toolbar.no-print-gap h2{display:none}
  .print-only{display:initial}p.print-only{display:block}.mt-table tr.mt-off{display:none}
  .mt-table{font-size:11px}.mt-table td,.mt-table th{padding:5px 6px}
  .mt-print .panel,.mt-print .tablebox{break-inside:auto;overflow:visible;max-height:none}
  .mt-print .grid2{grid-template-columns:1fr}.mt-print .grid2 .panel{break-inside:avoid}
  .mt-print .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .mt-print thead{display:table-header-group}.mt-print thead th{position:static!important}.mt-print tr{break-inside:avoid}
  body{background:#fff;color:#000}main{padding:0}.panel,.kpis,.tablebox{break-inside:avoid;border-color:#ccc}
  .wrap{max-width:none;padding:0}.grid2{grid-template-columns:1fr 1fr}
}