/* Staff Desk shell. Tokens, light + dark, and components ported from mockups/hr-prototype.html. */
:root{
  --bg:#f2f4f8; --surface:#ffffff; --surface-2:#edf1f7; --fg:#1b2332; --muted:#5b687d; --line:#dce2eb;
  --accent:#3a78c9; --accent-fg:#ffffff; --accent-soft:#e3edf9; --navy:#24497c; --navy-fg:#ffffff; --notice:#f5c95a;
  --ok:#2e8f5e; --ok-soft:#e1f2e8; --bad:#c94141; --bad-soft:#fbe5e5; --warn:#a86a00; --warn-soft:#fdf1d8;
  --shadow:0 1px 2px rgba(20,35,60,.06),0 2px 8px rgba(20,35,60,.05); --off:#b7c0cd;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f141c; --surface:#161d28; --surface-2:#1d2633; --fg:#e5eaf1; --muted:#97a3b6; --line:#28323f;
  --accent:#5b97e3; --accent-fg:#0d1420; --accent-soft:#1b2c44; --navy:#1a3256; --navy-fg:#e9eef6; --notice:#f2c75b;
  --ok:#5cc28c; --ok-soft:#14301f; --bad:#ec7272; --bad-soft:#3a1d1f; --warn:#e6b04a; --warn-soft:#352813;
  --shadow:0 1px 2px rgba(0,0,0,.4); --off:#3b4759; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0f141c; --surface:#161d28; --surface-2:#1d2633; --fg:#e5eaf1; --muted:#97a3b6; --line:#28323f;
  --accent:#5b97e3; --accent-fg:#0d1420; --accent-soft:#1b2c44; --navy:#1a3256; --navy-fg:#e9eef6; --notice:#f2c75b;
  --ok:#5cc28c; --ok-soft:#14301f; --bad:#ec7272; --bad-soft:#3a1d1f; --warn:#e6b04a; --warn-soft:#352813;
  --shadow:0 1px 2px rgba(0,0,0,.4); --off:#3b4759; color-scheme:dark;}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg)}
body{margin:0;font-family:var(--font);font-size:14px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
.num{font-variant-numeric:tabular-nums}
body{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Top bar: icon menu ---- */
.topbar{display:flex;align-items:center;gap:12px;background:var(--surface);border-bottom:1px solid var(--line);padding-inline:16px;min-height:62px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.brand .mark{width:28px;height:28px;border-radius:7px;background:var(--navy);color:var(--navy-fg);display:grid;place-items:center;font-size:13px}
.menu{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.menu a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 10px;color:var(--muted);text-decoration:none;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-bottom:2px solid transparent;white-space:nowrap}
.menu a svg{width:20px;height:20px}
.menu a.on{color:var(--accent);border-bottom-color:var(--accent)}
.menu a{position:relative}
.menu a .count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;letter-spacing:0;line-height:16px;text-align:center}
.right{display:flex;align-items:center;gap:10px;white-space:nowrap}
@media (max-width:860px){.topbar{flex-wrap:wrap;padding-block:6px}.right{margin-left:auto}.menu{order:3;flex-basis:100%}}
.co-form{margin:0}
.co-form select{width:auto;margin:0;border:1px solid var(--line);background:var(--surface-2);border-radius:6px;padding:5px 8px;font-size:13px}
.co-one{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--navy-fg);display:grid;place-items:center;font-weight:700;font-size:12px;border:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* User menu */
.usermenu{position:relative}
.usermenu summary{list-style:none;cursor:pointer;display:flex}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu .pop{position:absolute;right:0;top:40px;z-index:10;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 24px rgba(0,0,0,.18);padding:6px;white-space:normal}
.usermenu .who{padding:8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-weight:600}
.usermenu .pop a,.usermenu .pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;color:var(--fg);text-decoration:none}
.usermenu .pop a:hover,.usermenu .pop button:hover{background:var(--surface-2)}
.usermenu form{margin:0}

/* ---- Navy strip ---- */
.strip{background:var(--navy);color:var(--navy-fg);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-block:7px;padding-inline:16px;font-size:12.5px}
.strip b{font-weight:600}
.strip .sep{opacity:.6;padding-inline:4px}

/* ---- Page + sidebar ---- */
.page{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;padding-block:16px;padding-inline:16px;max-width:1320px;margin-inline:auto}
@media (max-width:860px){.page{grid-template-columns:minmax(0,1fr)}}
/* No sub-pages for this section: no sidebar, the content takes the full width. */
.page:not(:has(> .side)){grid-template-columns:minmax(0,1fr)}
.side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);align-self:start;overflow:hidden}
.side h3{font-size:13px;color:var(--accent);padding:12px 14px 6px;letter-spacing:.02em}
.side a{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 14px;border-left:3px solid transparent;color:var(--fg);text-decoration:none}
.side a:hover{background:var(--surface-2)}
.side a[aria-current="page"]{background:var(--surface-2);border-left-color:var(--accent);font-weight:600}
@media (max-width:860px){.side{display:flex;overflow-x:auto}.side h3{display:none}.side a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}.side a[aria-current="page"]{border-bottom-color:var(--accent)}}

/* ---- Cards, stacks, tiles ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:16px}
.card-b{padding:14px 16px}
.stack{display:grid;gap:16px;min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.big{font-size:30px;font-weight:700;line-height:1.1}
/* Small number cards sit side by side, two per row, at every width. */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:480px){.pair{gap:10px}.mini .card-h{padding:10px 12px}.mini .card-b{padding:10px 12px}.mini .card-h h2{font-size:14px}}
.rows{display:grid}
.rows .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.rows .row:first-child{border-top:0}
.rows .sub{font-size:12px;color:var(--muted)}
.empty{color:var(--muted);margin:0}
.notice{padding:12px 14px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--line)}

/* ---- Controls ---- */
.btn{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 12px;font-weight:500;text-decoration:none;color:var(--fg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
.btn.secondary{background:var(--surface-2)}
.btn.bad{color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.b-pend{background:var(--warn-soft);color:var(--warn)} .b-ok{background:var(--ok-soft);color:var(--ok)} .b-bad{background:var(--bad-soft);color:var(--bad)}
.b-info{background:var(--accent-soft);color:var(--accent)} .b-grey{background:var(--surface-2);color:var(--muted)}
.co-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--muted)}

/* ---- Forms (shared with the login / password pages) ---- */
label{display:block;font-weight:600;margin-bottom:4px}
input[type=text],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=number],input[type=date],textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);margin-bottom:14px}
.msg{border-radius:6px;padding:9px 12px;margin-bottom:14px}
.msg.error{background:var(--bad-soft);color:var(--bad)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.errorlist{margin:-8px 0 12px;padding:0;list-style:none;color:var(--bad)}
.help{color:var(--muted);font-size:12.5px;margin:-8px 0 14px}

/* ---- Tables ---- */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:12px;color:var(--accent);font-weight:600;background:var(--surface-2);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}

/* ---- Toasts (Django messages) ---- */
.toasts{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;gap:8px;max-width:min(420px,calc(100% - 32px))}
.toast{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:8px;padding:10px 14px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.toast.error{border-left-color:var(--bad)}
.toast.warning{border-left-color:var(--warn)}
@media (prefers-reduced-motion:no-preference){.toast{animation:up .2s ease-out}@keyframes up{from{transform:translateY(8px);opacity:0}}}

/* ---- Phone layout (employees, at every width) ---- */
.phone-app{max-width:480px;margin-inline:auto;min-height:100vh;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.ph-top{background:var(--navy);color:var(--navy-fg);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ph-top .hi{display:flex;align-items:center;gap:12px;min-width:0}
.ph-top .avatar{background:var(--navy-fg);color:var(--navy);width:42px;height:42px;font-size:14px;flex:none}
.ph-top small{opacity:.8;display:block}
.ph-top form{margin:0}
.ph-top .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:var(--navy-fg)}
.ph-body{padding:14px;display:grid;gap:12px}
.ph-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ph-card h3{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ph-profile{display:flex;align-items:center;gap:14px}
.ph-profile .avatar{width:56px;height:56px;font-size:19px;flex:none}
.ph-profile b{font-size:17px;display:block}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:480px;margin-inline:auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs a{padding:9px 4px 11px;font-size:11px;color:var(--muted);display:grid;justify-items:center;gap:2px;text-decoration:none}
.tabs a svg{width:20px;height:20px}
.tabs a.on{color:var(--accent);font-weight:600}
.phone-app .toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px))}

/* ---- Auth pages (login, password change, slip) ----
   :where() keeps these rules at zero specificity so page-level overrides (the slip's print CSS) win. */
:where(body.auth){min-height:100vh;display:grid;place-items:center;padding:16px}
:where(body.auth) .wrap{width:min(100%,400px)}
:where(body.auth) .brand{font-size:18px;margin-bottom:16px}
:where(body.auth) .card{padding:20px}
:where(body.auth) h1{font-size:18px;margin:0 0 14px}
:where(body.auth) .btn{padding:9px 16px}
:where(body.auth) button.btn:not(.secondary){background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}

/* ---- Employees ---- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.actions form{margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.filters input[type=search]{flex:1 1 220px;min-width:0;margin:0}
.filters select{flex:0 1 auto;margin:0}
select,.sel{padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);max-width:100%}
.fld select{width:100%;margin-bottom:14px}
a.who{color:var(--fg);text-decoration:none}
a.who:hover{text-decoration:underline}
.sub{font-size:12px}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.profile{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.profile .who-block{flex:1 1 220px;min-width:0}
.profile h1{font-size:20px}
.big-av{width:56px;height:56px;font-size:19px;flex:none}
.tabnav{display:flex;overflow-x:auto;border-top:1px solid var(--line)}
.tabnav a{padding:10px 16px;color:var(--muted);text-decoration:none;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.tabnav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabnav a.has-error{color:var(--bad)}
.tabbed-form .tabpanel+.tabpanel{border-top:1px solid var(--line)}
.tabbed-form .tabpanel[hidden]{display:none}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 16px}
.fld .req{color:var(--bad)}
.fld-check{align-self:end}
label.check{display:flex;align-items:center;gap:8px;font-weight:500;margin-bottom:14px}
label.check input{width:auto;margin:0}
.addr{text-align:right;max-width:60%}
.hist{align-items:flex-start}
.confirm-date{max-width:240px}
.sub-h{font-size:14px;margin:16px 0 4px}
.card-b p:first-child{margin-top:0}

/* ---- Documents ---- */
.doc{align-items:flex-start}
.doc .badge{margin-left:4px}
.doc .actions{flex:none}
.fld label.camera{margin-top:8px;font-weight:500}
.fld input[type=file]{width:100%;margin-bottom:6px}

/* ---- Settings ---- */
.lead{font-size:13px;margin-top:3px;max-width:62ch}
.linklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.linklist a{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--fg);background:var(--surface-2)}
.linklist a:hover{border-color:var(--accent)}
.linklist .muted{font-size:12.5px}
tr.off td{color:var(--muted)}
.nowrap{white-space:nowrap}
form.inline{margin:0}
form.inline select{margin:0}
.grid-t td:not(:first-child),.grid-t th:not(:first-child){text-align:center}
.swc{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.swl{position:relative;display:inline-flex;align-items:center;cursor:pointer;margin:0}
.swl input{position:absolute;opacity:0;width:40px;height:22px;margin:0;cursor:pointer}
.swl .track{width:40px;height:22px;border-radius:999px;background:var(--off);position:relative;transition:background .15s}
.swl .track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.swl input:checked + .track{background:var(--accent)}
.swl input:checked + .track::after{transform:translateX(18px)}
.swl input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.swl .track,.swl .track::after{transition:none}}
.htmx-request .swl{opacity:.6}
fieldset.companies{border:1px solid var(--line);border-radius:var(--r);margin:0 0 14px;padding:10px 14px}
fieldset.companies legend{font-weight:600;padding-inline:4px}
fieldset.companies label.check{margin-bottom:8px}
fieldset.companies .help{margin:0}
.filters label.inl{display:flex;align-items:center;gap:6px;margin:0;font-weight:500;color:var(--muted)}
.filters input[type=date]{width:auto;margin:0}

/* ---- Attendance ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.tile{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.tile b{font-size:24px;line-height:1.1}
.tile span{font-size:12px;color:var(--muted)}
.note{color:var(--muted);font-size:12.5px;margin:0;padding:10px 16px 0}
.card-b .note{padding:10px 0 0}
/* status colours (DESIGN 5.3); dark text where white would be hard to read */
.st-present,.st-in_now{--st:#3A78C9;--st-fg:#fff}
.st-late{--st:#E0B000;--st-fg:#1b2332}
.st-early_leave{--st:#2E9E5B;--st-fg:#fff}
.st-half_day{--st:#159A9C;--st-fg:#fff}
.st-short_day{--st:#E8832A;--st-fg:#1b2332}
.st-absent,.st-absent_no_record{--st:#D64545;--st-fg:#fff}
.st-missing_punch{--st:#8A5CC2;--st-fg:#fff}
.st-holiday,.st-weekly_off{--st:#222;--st-fg:#fff}
/* #222 disappears on the dark background: a lighter charcoal there */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.st-holiday,.st-weekly_off){--st:#5b6676}}
:root[data-theme="dark"] :is(.st-holiday,.st-weekly_off){--st:#5b6676}
/* the phone day list fits 375 px: tighter cells, the Correct button may wrap */
@media (max-width:480px){table.att th,table.att td{padding-inline:6px}table.att .btn.sm{white-space:normal}}
.ap-h{font-size:14px;padding:12px 16px 4px}
.st-leave,.st-half_day_leave{--st:#A8D5B5;--st-fg:#1b2332}
.st-not_tracked{--st:#9AA3AF;--st-fg:#1b2332}
.st-outage{--st:#9AA3AF;--st-fg:#1b2332}
.st-none{--st:transparent;--st-fg:var(--muted)}
.sb{display:inline-block;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--st,transparent);color:var(--st-fg,var(--muted))}
.sb.st-none{padding-inline:0;font-weight:500}
.sb.st-outage,.mc.st-outage{background-image:repeating-linear-gradient(45deg,#9AA3AF 0 5px,#c9ced6 5px 10px)}
/* judged on a day the sensors were down: the colour stays, stripes say "do not trust" */
.ox:not(.st-outage){background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 4px,transparent 4px 8px)}
table.att td{vertical-align:middle}
table.att tr.off td{color:var(--muted)}
table.att tr.off .sb{opacity:.7}
.mgrid{border-collapse:separate;border-spacing:0;width:auto;min-width:100%}
.mgrid th,.mgrid td{padding:4px 3px;border-bottom:1px solid var(--line)}
.mgrid th.dh{text-align:center;min-width:26px;padding-inline:2px}
.mgrid th.dh a{color:inherit;text-decoration:none}
.mgrid th.sun{color:var(--bad)}
.mgrid th.tot,.mgrid td.tot{text-align:center;min-width:56px;white-space:normal}
.mgrid td.tot{font-weight:600;padding-inline:6px}
.mgrid .stick{position:sticky;left:0;z-index:1;background:var(--surface);min-width:170px;padding-inline:10px;border-right:1px solid var(--line)}
.mgrid th.stick{background:var(--surface-2)}
.mc{text-align:center;font-size:11.5px;font-weight:700;min-width:26px;width:26px;height:28px;background:var(--st,transparent);color:var(--st-fg,var(--muted))}
.mc.st-none{background:transparent}
.mc.nr{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend .mc{display:inline-block;height:22px;width:24px;min-width:24px;line-height:22px;border-radius:4px}
.outage{border:1px solid var(--warn);background:var(--warn-soft);color:var(--fg);border-radius:var(--r);padding:12px 16px;display:grid;gap:6px}
.outage-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.outage p{margin:0}
.outage-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 0}
.outage-f input[type=text]{flex:1 1 240px;min-width:0;margin:0}
details.amend summary{list-style:none;display:inline-block}
details.amend summary::-webkit-details-marker{display:none}
details.amend[open]{min-width:260px}
.amend-f{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.amend-f input[type=time]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);margin-bottom:6px}
.amend-f input[type=text]{background:var(--surface)}
.amend-t{display:grid;grid-template-columns:1fr 1fr;gap:8px}
input[type=month]{width:auto;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);margin:0}
.today-card .tiles{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
@media (max-width:480px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.mgrid .stick{min-width:130px}}

/* ---- Correction requests and the approvals inbox ---- */
.req-f{max-width:560px}
.req-f input[type=time]{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);margin-bottom:14px}
.req-f select,.req-f textarea{width:100%;margin-bottom:14px}
.req-f textarea{padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2)}
.rq-list{display:grid;gap:12px}
.rq-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;margin-bottom:4px}
.rq p{margin:4px 0}
.rq-hist{list-style:none;margin:8px 0;padding:0;font-size:12.5px;color:var(--muted);display:grid;gap:2px}
.cmp{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px 8px;min-width:230px}
.cmp small{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.cmp-was,.cmp-now{border-radius:6px;padding:6px 9px;display:grid;gap:3px;align-content:start;border:1px solid transparent}
.cmp-was{background:var(--bad-soft);border-color:var(--bad)}
.cmp-now{background:var(--ok-soft);border-color:var(--ok)}
.cmp-arrow{align-self:center;color:var(--muted)}
.amended{margin-top:6px;padding:4px 8px;border-radius:6px;background:var(--warn-soft);color:var(--warn);max-width:36ch}
.warn-t{color:var(--warn);font-weight:600}
.ap .sel-c{width:32px}
.ap td input[type=checkbox]{margin:2px 0 0;width:16px;height:16px}
.ap-why{max-width:30ch;overflow-wrap:anywhere}
.ap-do{display:grid;gap:6px;justify-items:start;min-width:120px}
.ap-do form{margin:0}
.ap-do .amend-f input[type=text]{margin-bottom:6px;background:var(--surface)}
.today-card .waiting{display:inline-block;margin-top:12px;font-weight:600}

/* ---- Employee self-service: today, month bars, missing days ---- */
.today-card .big{font-size:18px;font-weight:600;margin:0 0 2px}
.bars{display:flex;align-items:flex-end;gap:2px;height:96px;margin-bottom:16px}
.bc{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid var(--line)}
.bc .bar{display:block;border-radius:2px 2px 0 0;background:var(--st,var(--line));min-height:3px}
.bc.today{outline:2px solid var(--fg);outline-offset:1px;border-radius:2px}
.bc .bd{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;font-size:9px;font-weight:500;color:var(--muted)}
.bar.st-outage,.sw.st-outage{background-image:repeating-linear-gradient(45deg,#9AA3AF 0 4px,#c9ced6 4px 8px)}
.ph-card .legend,.self-month .legend{list-style:none;margin:0;padding:6px 0 0;border-top:0;gap:4px 14px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--st,var(--line))}
.counts{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;font-size:13px}
.counts span+span::before{content:"\00b7";margin-right:12px;color:var(--muted)}
.ph-card .note,.self-month .note{padding:6px 0 0}
.miss{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px}
.miss li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
a.bc{text-decoration:none;color:inherit}
a.bc:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* "In today" is not finished yet: an outlined blue, so it never reads as a solid Present day */
.bar.st-in_now,.sw.st-in_now{background:transparent;box-shadow:inset 0 0 0 2px #3A78C9}

/* Attendance settings: working-day boxes, rule switches, token row */
fieldset.days{border:0;margin:0 0 14px;padding:0}
fieldset.days legend{font-weight:600;margin-bottom:6px;padding:0}
fieldset.plain{border:0;margin:0;padding:0;min-width:0}
.daychecks{display:flex;flex-wrap:wrap;gap:4px 18px}
.daychecks label.check{margin-bottom:6px}
.sub-h{margin:18px 0 4px;font-size:15px}
.ruleset{margin:0 0 12px}
.rule-sw{gap:10px;margin:0}
.rule-sw .swt{font-weight:500;margin-left:50px}
.rule-sw .track{position:absolute;left:0}
.ruleset .help{margin:4px 0 0 50px}
.rule-val{margin:8px 0 0 50px;max-width:260px}
.rule-val[hidden]{display:none}
.tokenrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tokenrow input{flex:1 1 320px;min-width:0;margin:0;letter-spacing:.02em}
.token-card{border-color:var(--accent)}

/* ---- Leave: balances, the apply form with its live preview ---- */
.lv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lv-card{display:grid;gap:2px;align-content:start;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:10px 12px;min-width:0}
.lv-card b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lv-big{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.lv-hint{margin:0 0 12px}
.lv-bal{font-size:16px;font-weight:600;margin:0 0 10px}
.lv-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.lv-form input[type=date]{min-width:0}
.lv-form input[type=file]{width:100%;margin-bottom:14px}
.lv-sum,.lv-error{margin:0 0 14px}
.lv-sum span{display:inline-block}
.lv-dyn:empty{display:none}
.rows .waiting{display:inline-block;margin-top:12px;font-weight:600}
details>summary.card-h{cursor:pointer;list-style:none}
details>summary.card-h::-webkit-details-marker{display:none}
details>summary.card-h h2::after{content:" +";color:var(--muted)}
details[open]>summary.card-h h2::after{content:" -"}
table.att tfoot th{border-top:1px solid var(--line);border-bottom:0;color:var(--fg)}
.miss-act{display:flex;flex-wrap:wrap;gap:6px}

/* ---- Org chart ---- */
.oc-scroll{overflow-x:auto}
.oc-co+.oc-co{margin-top:22px}
.oc-co-h{font-size:15px;margin:0 0 8px;color:var(--fg)}
.oc-dept+.oc-dept{margin-top:14px}
.oc-dept-h{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.oc{--oc-i:16px;list-style:none;margin:0;padding:0}
.oc ul{list-style:none;margin:0 0 0 var(--oc-i);padding:0 0 0 var(--oc-i)}
.oc li{position:relative;padding:4px 0}
.oc ul>li::before{content:"";position:absolute;left:calc(var(--oc-i) * -1);top:0;width:var(--oc-i);height:26px;border-left:1px solid var(--off);border-bottom:1px solid var(--off);border-bottom-left-radius:8px}
.oc ul>li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--oc-i) * -1);top:26px;bottom:0;border-left:1px solid var(--off)}
.oc summary{list-style:none;cursor:pointer}
.oc summary::-webkit-details-marker{display:none}
.oc-card{display:flex;align-items:center;gap:10px;min-width:210px;max-width:380px;padding:6px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.oc summary:hover .oc-card{background:var(--surface-2)}
.oc-card .avatar{flex:none}
.oc-t{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.oc-t .sub{font-size:12px;display:block}
.oc-n{flex:none}
.oc-n::after{content:" +";color:var(--muted)}
.oc details[open]>summary .oc-n::after{content:" -"}
@media (max-width:480px){.oc{--oc-i:9px}.oc-card{min-width:190px;padding:5px 8px}}
@media print{
  /* Only the org chart page: print it as on a light page whatever theme is on screen. */
  body:has(.oc-page){
    --bg:#f2f4f8; --surface:#ffffff; --surface-2:#edf1f7; --fg:#1b2332; --muted:#5b687d; --line:#dce2eb;
    --accent:#3a78c9; --navy:#24497c; --off:#b7c0cd; --shadow:none; color-scheme:light;
    background:var(--surface);color:var(--fg)}
  body:has(.oc-page) :is(.topbar,.strip,.side,.tabs,.ph-top,.toasts){display:none!important}
  body:has(.oc-page) :is(.page,.ph-body){display:block;padding:0}
  .oc-page{box-shadow:none;border:0;background:var(--surface)}
  .oc-page .oc-tools,.oc-page .oc-n{display:none}
  .oc-page .oc-scroll{overflow:visible}
  .oc-page .oc li{break-inside:avoid}
  .oc-page .oc-card{max-width:none}
  .oc-page a{color:inherit;text-decoration:none}
}

/* ---- Payslip (the page itself; its print rules are scoped to it below) ---- */
.payslip-page{padding:16px;display:grid;gap:14px;max-width:900px;margin-inline:auto;width:100%}
.ps-tools{display:flex;justify-content:space-between;gap:8px}
.ps-head h1{font-size:20px}
.ps-head p{margin:2px 0 0}
.ps-co{font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:12px}
.ps-emp{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px 16px;margin:0;padding:12px;background:var(--surface-2);border-radius:var(--r)}
.ps-emp>div{min-width:0}
.ps-emp dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ps-emp dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.ps-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ps-col{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-width:0}
.ps-col h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ps-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.ps-row:last-child{border-bottom:0}
.ps-row>span{min-width:0;overflow-wrap:anywhere}
.ps-row small{display:block;font-size:12px}
.ps-row b{white-space:nowrap}
.ps-total{border-top:2px solid var(--line);margin-top:4px;font-weight:600}
.ps-none{margin:4px 0}
.ps-ben{margin:0}
.ps-net{display:grid;gap:2px;padding:12px 14px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--line)}
.ps-net span{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ps-net b{font-size:24px}
.ps-foot{margin:0;font-size:12px}
@media (max-width:760px){.ps-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.payslip-page{padding:12px;border-radius:12px}.ps-net b{font-size:21px}}
.mp-list{display:grid;gap:8px}
.mp-slip{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--fg);text-decoration:none;min-height:44px}
.mp-slip:hover{border-color:var(--accent)}
.mp-credit{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.mp-credit p{margin:0 0 4px}
.mp-sched{width:100%;margin-top:6px;border-collapse:collapse}
.mp-sched caption{text-align:left;font-size:12px;padding-bottom:4px}
.mp-sched td{padding:5px 6px}
.mp-ask{margin:0}
.mp-cancel{margin:6px 0 0}
.mp-down p{margin:0 0 6px}
@media print{
  /* Only the payslip page: print it as on a light page whatever theme is on screen. */
  body:has(.payslip-page){
    --bg:#ffffff; --surface:#ffffff; --surface-2:#f2f4f8; --fg:#111111; --muted:#444444; --line:#bbbbbb;
    --accent:#24497c; --accent-soft:#eef2f8; --shadow:none; color-scheme:light;
    background:#fff;color:#111}
  body:has(.payslip-page) :is(.topbar,.strip,.side,.tabs,.ph-top,.toasts){display:none!important}
  body:has(.payslip-page) :is(.page,.ph-body,.phone-app){display:block;padding:0;margin:0;max-width:none}
  body:has(.payslip-page) .stack{display:block}
  .payslip-page{box-shadow:none;border:0;background:#fff;padding:0;max-width:none}
  .payslip-page .ps-tools{display:none}
  .payslip-page .ps-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .payslip-page :is(.ps-col,.ps-net,.ps-emp){break-inside:avoid}
  .payslip-page a{color:inherit;text-decoration:none}
}

/* ---- Cash sheet (the page itself; its print rules are scoped to it below) ---- */
.cash-page{padding:16px;display:grid;gap:14px;max-width:900px;margin-inline:auto;width:100%}
.cash-tools{display:flex;justify-content:space-between;gap:8px}
.cash-head h1{font-size:20px}
.cash-head p{margin:2px 0 0}
.cash-co{font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:12px}
.cash-group h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.cash-sign{min-width:140px;height:44px;border-bottom:1px solid var(--line)}
.cash-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;padding:12px 14px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--line)}
.cash-total span{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
@media (max-width:480px){.cash-page{padding:12px;border-radius:12px}.cash-sign{min-width:110px}}
@media print{
  /* Only the cash sheet: print it as on a light page whatever theme is on screen. */
  body:has(.cash-page){
    --bg:#ffffff; --surface:#ffffff; --surface-2:#f2f4f8; --fg:#111111; --muted:#444444; --line:#777777;
    --accent:#24497c; --accent-soft:#eef2f8; --shadow:none; color-scheme:light;
    background:#fff;color:#111}
  body:has(.cash-page) :is(.topbar,.strip,.side,.tabs,.ph-top,.toasts){display:none!important}
  body:has(.cash-page) :is(.page,.ph-body,.phone-app){display:block;padding:0;margin:0;max-width:none}
  body:has(.cash-page) .stack{display:block}
  .cash-page{box-shadow:none;border:0;background:#fff;padding:0;max-width:none}
  .cash-page .cash-tools{display:none}
  .cash-page .tw{overflow:visible}
  .cash-page .cash-table :is(th,td){border-bottom:1px solid var(--line)}
  .cash-page .cash-sign{height:52px}
  .cash-page :is(.cash-group,.cash-total,tr){break-inside:avoid}
  .cash-page a{color:inherit;text-decoration:none}
}