/* Layout: light module sidebar with logo and signed-in profile, navy title band, chip tabs per module, widget grid in the work area. */
/* Colours and shapes follow the Qualitech Snagging app, so both apps look like one family. */
:root{
  --navy:#04376F; --blue:#0A6ED6; --blue-dark:#085DB8; --red:#E5484D;
  --bg:#F2F6FC; --surface:#FFFFFF; --surface-2:#F7FAFE; --line:#E3EAF4;
  --fg:#1F2937; --ink:#0F1E3D; --muted:#667085; --neutral-soft:#EEF1F4; --shadow:rgba(15,23,42,.14);
  --band:#FFFFFF; --band-fg:#172033; --band-chip:#EEF1F4;
  --accent:#0A6ED6; --accent-fg:#FFFFFF; --accent-soft:#E8F2FD; --link:#0A62C2;
  --ok:#18794E; --ok-soft:#E7F6EC; --ok-line:#A7D9B8;
  --warn:#9A6700; --warn-soft:#FFF4D6; --warn-line:#F3D37A;
  --orange:#C2410C; --orange-soft:#FFF7ED; --orange-line:#FED7AA;
  --bad:#B42318; --bad-soft:#FDECEC; --bad-line:#F5B7B1;
  --info:#0A62C2; --info-soft:#E8F2FD; --info-line:#BBD8F6;
  --font-display:Arial,Helvetica,sans-serif;
  --font-body:Arial,Helvetica,sans-serif;
  --font-mono:Arial,Helvetica,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
[hidden]{display:none!important}
img{max-width:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:14px;line-height:1.45}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);padding:16px 12px}
.side-in{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);display:flex;flex-direction:column;gap:14px}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 8px}
.logo img{max-height:48px;max-width:100%;object-fit:contain;display:block}
.me{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 8px;background:var(--surface-2);border-radius:var(--r)}
.me strong{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.2}
.me span{font-size:12.5px;color:var(--muted)}
#nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:0;background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer;width:100%}
.nav-item:hover{background:var(--surface-2)}
.nav-item.on{background:var(--accent);color:var(--accent-fg);font-weight:600}
.nav-item svg{width:18px;height:18px;flex:none}
.badge{margin-left:auto;background:var(--red);color:#FFFFFF;border-radius:99px;font-size:11px;font-weight:600;padding:1px 7px;font-variant-numeric:tabular-nums}
.nav-item.on .badge{background:var(--accent-fg);color:var(--accent)}
.main{min-width:0;display:flex;flex-direction:column}
.band{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 24px;background:var(--band);color:var(--band-fg);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
h1{font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.15;margin:0;flex:1 1 auto;min-width:0;text-wrap:balance;letter-spacing:.01em}
.seg{display:inline-flex;background:var(--band-chip);border-radius:8px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:6px;font:inherit;color:var(--band-fg);cursor:pointer;opacity:.85}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);font-weight:600;opacity:1}
.seg button:focus-visible{outline-color:var(--band-fg)}
.tabsbar{display:flex;gap:6px;flex-wrap:wrap;padding:10px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.chip{border:1px solid var(--line);background:var(--surface-2);border-radius:99px;padding:5px 14px;font:inherit;cursor:pointer;color:var(--fg)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-grid;place-items:center;font-weight:600;font-size:12px;flex:none;object-fit:cover}
.av.lg{width:60px;height:60px;font-size:20px}
.av.md{width:44px;height:44px;font-size:15px}
.note{margin:16px 24px 0;padding:8px 12px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:13px}
#view{padding:16px 24px 40px;display:flex;flex-direction:column;gap:16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}
.split{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h2{font-family:var(--font-display);font-size:17px;margin:0;font-weight:600;letter-spacing:.01em}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0}
.muted{color:var(--muted)} .small{font-size:12.5px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stackv{display:flex;flex-direction:column;gap:12px}
.list{display:flex;flex-direction:column}
.list > div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);min-width:0}
.list > div:last-child{border-bottom:0;padding-bottom:0}
.list > div:first-child{padding-top:0}
.grow{min-width:0;flex:1}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tfoot td{border-top:1px solid var(--line);border-bottom:0;font-weight:600}
.num{text-align:right;font-family:var(--font-mono)}
th.num{font-family:var(--font-body)}
.nowrap{white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-soft);color:var(--ok)} .p-warn{background:var(--warn-soft);color:var(--warn)}
.p-orange{background:var(--orange-soft);color:var(--orange)}
.p-bad{background:var(--bad-soft);color:var(--bad)} .p-info{background:var(--info-soft);color:var(--info)}
.p-neutral{background:var(--neutral-soft);color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.d-bad{background:var(--bad)} .d-orange{background:var(--orange)} .d-warn{background:var(--warn)} .d-info{background:var(--info)} .d-ok{background:var(--ok)}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:7px 12px;border-radius:8px;font:inherit;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sm{padding:4px 9px;font-size:13px}
.btn.t-ok{color:var(--ok)} .btn.t-bad{color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link{border:0;background:none;padding:0;font:inherit;color:var(--link);cursor:pointer;font-weight:500;text-align:left}
.link:hover{text-decoration:underline}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500}
input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0;width:100%}
textarea{resize:vertical;min-height:72px}
input:disabled,select:disabled{background:var(--surface-2);color:var(--muted)}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.hint{font-weight:400;color:var(--muted);font-size:12.5px}
.err{color:var(--bad);font-weight:500}
.preview{background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:13px}
.tgroup{display:flex;flex-direction:column;gap:8px}
.stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;display:flex;flex-direction:column;gap:1px;text-align:left;font:inherit;color:inherit;min-width:0}
button.stat{cursor:pointer}
button.stat:hover{border-color:var(--accent)}
.stat.on{border-color:var(--accent);background:var(--accent-soft)}
.stat b{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:12.5px}
.stat em{font-style:normal;font-size:12px;color:var(--bad);font-weight:600}
.clock{font-family:var(--font-mono);font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;height:120px}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.bar-val{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.bar-track{flex:1;width:100%;max-width:40px;display:flex;align-items:flex-end;background:var(--neutral-soft);border-radius:5px;overflow:hidden}
.bar{width:100%;background:var(--accent)}
.bar-lab{font-size:11.5px;color:var(--muted)}
.bar-col.today .bar-lab{color:var(--fg);font-weight:600}
.meter{height:8px;background:var(--neutral-soft);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.tiers{display:grid;grid-template-columns:15fr 30fr 45fr;gap:3px}
.tier{display:flex;flex-direction:column;gap:4px;min-width:0}
.tier div{height:8px;background:var(--neutral-soft);border-radius:3px;overflow:hidden}
.tier i{display:block;height:100%}
.tier:nth-child(1) i{background:var(--ok)} .tier:nth-child(2) i{background:var(--warn)} .tier:nth-child(3) i{background:var(--bad)}
.tier span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;background:var(--neutral-soft)}
.stack i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.c-ok{background:var(--ok)} .c-warn{background:var(--warn)} .c-info{background:var(--info)} .c-bad{background:var(--bad)} .c-neutral{background:var(--muted)}
.hbar{display:grid;grid-template-columns:132px minmax(0,1fr) 24px;gap:10px;align-items:center;font-size:13px}
.hbar .meter{height:10px;border-radius:3px}
.qa{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.qa button{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;font:inherit;font-size:12.5px;color:var(--fg);cursor:pointer;padding:4px;border-radius:8px;text-align:center}
.qa button span{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.qa button svg{width:22px;height:22px}
.qa button:hover span{background:var(--accent);color:var(--accent-fg)}
.chain{display:flex;gap:4px;flex-wrap:wrap}
.chain span{font-size:11.5px;padding:2px 8px;border-radius:4px;background:var(--neutral-soft);color:var(--muted);white-space:nowrap}
.chain .done{background:var(--ok-soft);color:var(--ok);font-weight:600}
.chain .now{background:var(--accent-soft);color:var(--accent);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
.chain .rej{background:var(--bad-soft);color:var(--bad);font-weight:600}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:188px;gap:10px;align-items:start;padding-bottom:4px}
.col{background:var(--surface-2);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px}
.col h3{margin:0;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:6px}
.cand{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.ts-table input[type="number"]{width:58px;padding:6px;text-align:right;font-family:var(--font-mono)}
.ts-table select{min-width:150px} .ts-table input[type="text"]{min-width:140px}
.ts-table td,.ts-table th{padding:6px}
.dl{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:8px 16px;margin:0}
.dl dt{color:var(--muted)} .dl dd{margin:0;overflow-wrap:anywhere}
.mailbody{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;color:var(--muted);margin:0;font-family:var(--font-body)}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:500;max-width:calc(100% - 32px);z-index:20;box-shadow:0 6px 20px var(--shadow)}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);padding:20px;width:min(640px,calc(100% - 32px));max-height:85%}
dialog::backdrop{background:rgba(8,14,28,.55)}
#dlg-body{display:flex;flex-direction:column;gap:14px}
#dlg-body h2{font-family:var(--font-display);font-size:20px;font-weight:600;margin:0}
@media (max-width:1000px){ .split{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .side{padding:12px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .side-in{position:static;gap:10px}
  .me{flex-direction:row;text-align:left;padding:8px 10px;gap:10px}
  .me .av.lg{width:40px;height:40px;font-size:14px}
  #nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .nav-item{width:auto;padding:6px 10px}
  .badge{margin-left:2px}
  .band{padding:12px 16px;position:static}
  .tabsbar{padding:10px 16px}
  .note{margin:12px 16px 0}
  #view{padding:12px 16px 32px}
}

/* ---- additions for the real app ---- */
.band-user{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.band .btn{background:var(--band-chip);border-color:var(--band-chip);color:var(--band-fg)}
.band .btn:hover{filter:brightness(1.15);background:var(--band-chip)}
.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.login-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 30px var(--shadow)}
.login-card .logo{padding:0;align-items:center}
.login-card h1{font-size:24px;text-align:center;flex:none}
.login-card form{display:flex;flex-direction:column;gap:12px}
.warnbar{margin:16px 24px 0;padding:8px 12px;border-radius:8px;background:var(--warn-soft);color:var(--warn);font-size:13px;font-weight:500}
a.link{text-decoration:none}
a.link:hover{text-decoration:underline}
.copybox{font-family:var(--font-mono);font-size:13px;min-height:120px}
.kv{display:flex;flex-direction:column;gap:2px}
@media (max-width:860px){ .warnbar{margin:12px 16px 0} }
/* ---- Theme: same family as the Qualitech Snagging app ---- */
body{font-size:14px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Left menu: navy panel, logo on a white plate, soft white highlight for the open page */
.side{background:var(--navy);border-right:0;color:#FFFFFF;padding:26px 16px 22px;box-shadow:5px 0 25px rgba(15,23,42,.08)}
.side :focus-visible{outline-color:#FFFFFF}
.side .logo{padding:0 6px}
.side .logo img{width:165px;max-width:100%;max-height:none;padding:8px 10px;background:#FFFFFF;border-radius:9px}
.side-label{display:block;margin:-2px 6px 0;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);font-size:10px;font-weight:700;letter-spacing:1.4px}
.me{flex-direction:row;align-items:center;text-align:left;gap:12px;padding:10px 12px;background:rgba(255,255,255,.08);border-radius:10px}
.me .av.lg{width:42px;height:42px;font-size:15px}
.me strong{color:#FFFFFF;font-size:15px;font-weight:700}
.me span{color:rgba(255,255,255,.62)}
.me .av{background:rgba(255,255,255,.16);color:#FFFFFF}
#nav{gap:4px}
.nav-item{gap:12px;padding:7px 12px;border-radius:9px;color:rgba(255,255,255,.72);font-size:13px;font-weight:500}
.nav-item:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
.nav-item.on{background:rgba(255,255,255,.14);color:#FFFFFF;font-weight:700;box-shadow:none}
.nav-item svg{width:25px;height:25px;padding:5px;border-radius:6px;background:rgba(255,255,255,.08)}
.nav-item.on .badge{background:var(--red);color:#FFFFFF}

/* Top bar: white, page title on the left, buttons on the right */
.band{min-height:72px;padding:12px 38px;border-bottom:1px solid #E7EBF0}
.band h1{color:var(--ink);font-size:24px;font-weight:700;letter-spacing:-.3px}
.band .btn{background:#FFFFFF;border-color:#D8DEE7;color:#344054;font-weight:600}
.band .btn:hover{background:#F7F9FB;filter:none}
.seg button{opacity:1;color:#53657A;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--blue);color:#FFFFFF}
.seg button:focus-visible{outline-color:var(--blue)}
.tabsbar{padding:10px 38px}
.chip{background:#FFFFFF;border-color:#DFE4EA;color:#344054;border-radius:8px;font-size:13px}
.chip.on{background:var(--accent-soft);border-color:var(--blue);color:var(--blue)}
.warnbar{margin:18px 38px 0;border:1px solid var(--warn-line);border-radius:10px}
#view{padding:26px 38px 56px;gap:20px}

/* Cards and number tiles */
.card{padding:22px 24px;border-color:var(--line);box-shadow:0 4px 14px rgba(31,78,120,.05)}
.card h2{color:var(--ink);font-size:17px;font-weight:700}
.card-head{border-bottom-color:#EDF0F4}
.stats{gap:16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{position:relative;min-height:104px;justify-content:center;gap:6px;padding:18px 20px;border-color:var(--line);box-shadow:0 4px 14px rgba(31,78,120,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.stat::before{content:'';position:absolute;top:18px;left:0;width:4px;height:35px;background:var(--blue);border-radius:0 4px 4px 0}
.stat:nth-child(4n+2)::before{background:#D99A28}
.stat:nth-child(4n+3)::before{background:#C84C4C}
.stat:nth-child(4n+4)::before{background:#3B8B68}
button.stat:hover{transform:translateY(-3px);border-color:#CBD7E3;box-shadow:0 10px 24px rgba(31,78,120,.10)}
.stat.on{border-color:var(--blue);background:var(--accent-soft)}
.stat b{color:var(--ink);font-size:29px;font-weight:700;line-height:1}
.stat span{color:#7A8696;font-size:12px;font-weight:500}
.clock{font-weight:700;letter-spacing:0;color:var(--ink)}

/* Buttons and form fields */
.btn{border-color:#D5DCE5;color:#344054;border-radius:8px;font-weight:600;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.btn:hover{background:#F7F9FB}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#FFFFFF;box-shadow:0 4px 10px rgba(31,78,120,.15)}
.btn.pri:hover{background:var(--blue-dark);border-color:var(--blue-dark);filter:none;transform:translateY(-1px)}
.btn.t-ok{color:var(--ok)} .btn.t-bad{color:var(--bad)}
label{color:#344054;font-weight:600}
input,select,textarea{border-color:#D1D5DB;border-radius:8px;padding:10px 12px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,78,120,.09)}
input[type="file"]{padding:8px}
.hint{font-weight:400}

/* Tables and status labels */
th{background:#F3F6F9;color:#405665;font-size:11px;font-weight:700;letter-spacing:.4px;border-bottom-color:var(--line)}
th:first-child{border-radius:8px 0 0 8px} th:last-child{border-radius:0 8px 8px 0}
td{border-bottom-color:#EDF0F4}
tbody tr:hover td{background:#F7FAFC}
.pill{padding:4px 10px;font-size:11px;font-weight:700;border:1px solid transparent}
.pill::before{display:none}
.p-ok{border-color:var(--ok-line)} .p-warn{border-color:var(--warn-line)} .p-orange{border-color:var(--orange-line)}
.p-bad{border-color:var(--bad-line)} .p-info{border-color:var(--info-line)} .p-neutral{border-color:#DDE2E8}
.d-bad,.c-bad{background:#C84C4C} .d-orange{background:#EA580C} .d-warn,.c-warn{background:#D99A28} .d-info,.c-info{background:var(--blue)} .d-ok,.c-ok{background:#3B8B68}
.tier:nth-child(1) i{background:#3B8B68} .tier:nth-child(2) i{background:#D99A28} .tier:nth-child(3) i{background:#C84C4C}
.av{background:var(--accent-soft);color:var(--blue);font-weight:700}
.qa button span{border-radius:10px}
.col{border-radius:10px} .cand{border-color:var(--line)}
dialog{border-radius:16px;border-color:var(--line);padding:26px;box-shadow:0 24px 70px rgba(15,23,42,.25)}
#dlg-body h2{color:var(--ink);font-weight:700}
#toast{background:var(--ink);color:#FFFFFF}

/* Top bar: title with a small line under it, then search, alerts bell and the name menu */
.band{gap:14px}
.band-title{flex:1 1 220px;min-width:0}
.band-title p{margin:3px 0 0;color:#7B8797;font-size:13px}
.band-title p:empty{display:none}
.band-user{gap:12px;flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.topsearch{position:relative;flex-direction:row;align-items:center;width:240px}
.topsearch svg{position:absolute;left:12px;width:16px;height:16px;color:#98A2B3;pointer-events:none}
.topsearch input{height:40px;padding:0 12px 0 36px;background:#F9FAFB;border-color:#DFE4EA;font-weight:400}
.topsearch input:focus{background:#FFFFFF}
.bell{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid #DFE4EA;border-radius:50%;background:#FFFFFF;color:#53657A;cursor:pointer}
.bell:hover{background:#F7F9FB}
.bell svg{width:19px;height:19px}
.bell .badge{position:absolute;top:-5px;right:-6px;margin:0;border:2px solid #FFFFFF}
.usermenu{position:relative}
.usermenu summary{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border:1px solid #DFE4EA;border-radius:99px;cursor:pointer;list-style:none;background:#FFFFFF}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu summary:hover{background:#F7F9FB}
.usermenu .av{background:var(--blue);color:#FFFFFF}
.um-text{display:flex;flex-direction:column;line-height:1.25;max-width:150px}
.um-text strong{color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-text span{color:#7B8797;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-caret{width:7px;height:7px;margin:0 2px 3px 2px;border-right:2px solid #98A2B3;border-bottom:2px solid #98A2B3;transform:rotate(45deg)}
.um-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:210px;display:flex;flex-direction:column;gap:6px;padding:12px;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(15,23,42,.16)}
.um-who{display:flex;flex-direction:column;gap:2px;padding:2px 4px 10px;margin-bottom:4px;border-bottom:1px solid #EDF0F4}
.um-who strong{color:var(--ink)} .um-who span{color:#7B8797;font-size:12px}
.um-menu .btn{text-align:left}
.nav-item.on{background:#2D6CC0}

/* HR dashboard: three sections of coloured number boxes, with two charts under Workforce */
.sec{gap:18px}
.sec-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sec-head h2{font-size:19px}
.sec-head p{margin:2px 0 0;color:#7B8797;font-size:13px}
.sec-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--blue)}
.sec-ic svg{width:22px;height:22px}
.sec-date{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #DFE4EA;border-radius:8px;color:#344054;font-size:13px;font-weight:600}
.sec-date svg{width:16px;height:16px;color:#7B8797}
.sec-btn{background:var(--accent-soft);border-color:var(--info-line);color:var(--blue);padding:8px 14px}
.sec-btn:hover{background:#DDE9F4}
.kpis{display:grid;gap:14px}
.k6{grid-template-columns:repeat(6,minmax(0,1fr))}
.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:16px;border:1px solid transparent;border-radius:12px;font:inherit;color:inherit;text-align:left;background:var(--tint)}
.kpi.row-kpi{flex-direction:row;align-items:center;gap:12px}
button.kpi{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
button.kpi:hover{transform:translateY(-2px);border-color:var(--tone);box-shadow:0 8px 20px rgba(31,78,120,.10)}
.kpi-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:#FFFFFF;color:var(--tone)}
.kpi-ic svg{width:21px;height:21px}
.kpi-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.kpi b{color:var(--ink);font-size:26px;font-weight:700;line-height:1}
.kpi-l{color:#475467;font-size:12.5px;font-weight:500}
.kpi em{font-style:normal;color:#7B8797;font-size:11.5px}
.kpi em.bad{color:var(--bad);font-weight:700}
.kpi em.hot{color:var(--tone);font-weight:700}
.k-blue{--tint:#EAF2FB;--tone:#1F6FD0} .k-green{--tint:#E8F6EE;--tone:#1B8A5A} .k-violet{--tint:#F0ECFB;--tone:#6B4FD3}
.k-orange{--tint:#FDF0E6;--tone:#D9691F} .k-red{--tint:#FDECEC;--tone:#C84C4C} .k-teal{--tint:#E4F4F3;--tone:#17807D}
.panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.panel{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:12px}
.panel h3{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink);font-size:14px;font-weight:700}
.panel h3 svg{width:17px;height:17px;color:#7B8797}
.donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.donut{position:relative;width:172px;height:172px;flex:none}
.donut svg{width:100%;height:100%;display:block}
.donut-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-mid b{color:var(--ink);font-size:28px;line-height:1}
.donut-mid span{margin-top:4px;color:#7B8797;font-size:12px}
.donut-legend{flex:1 1 180px;display:flex;flex-direction:column;gap:10px;min-width:0;font-size:13px}
.donut-legend div{display:flex;align-items:center;gap:10px;color:#344054}
.donut-legend i{width:10px;height:10px;flex:none;border-radius:50%}
.donut-legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.donut-legend .pct{width:46px;color:#7B8797;font-variant-numeric:tabular-nums}
.donut-legend p{margin:4px 0 0;color:#98A2B3;font-size:11.5px}
.cols{display:flex;gap:10px;height:196px}
.cols-y{position:relative;width:16px;color:#98A2B3;font-size:11px;font-variant-numeric:tabular-nums}
.cols-y span{position:absolute;right:0;transform:translateY(-50%)}
.cols-y span:nth-child(1){top:20px} .cols-y span:nth-child(2){top:calc(20px + (100% - 46px) * .25)} .cols-y span:nth-child(3){top:calc(20px + (100% - 46px) * .5)} .cols-y span:nth-child(4){top:calc(20px + (100% - 46px) * .75)} .cols-y span:nth-child(5){top:calc(100% - 26px)}
.cols-plot{flex:1;display:flex;justify-content:space-around;gap:10px;padding:0 8px;background:linear-gradient(#EDF0F4,#EDF0F4) 0 20px/100% 1px no-repeat,linear-gradient(#EDF0F4,#EDF0F4) 0 calc(20px + (100% - 46px) * .25)/100% 1px no-repeat,linear-gradient(#EDF0F4,#EDF0F4) 0 calc(20px + (100% - 46px) * .5)/100% 1px no-repeat,linear-gradient(#EDF0F4,#EDF0F4) 0 calc(20px + (100% - 46px) * .75)/100% 1px no-repeat,linear-gradient(#D5DCE5,#D5DCE5) 0 calc(100% - 26px)/100% 1px no-repeat}
.col-bar{flex:1;max-width:80px;display:flex;flex-direction:column;align-items:center;min-width:0}
.col-track{flex:1;width:100%;max-width:48px;display:flex;flex-direction:column;justify-content:flex-end;padding-top:20px}
.col-fill{position:relative;min-height:2px;border-radius:4px 4px 0 0}
.col-val{position:absolute;left:0;right:0;bottom:calc(100% + 3px);text-align:center;color:var(--ink);font-size:12px;font-weight:700}
.col-lab{height:26px;line-height:28px;color:#667085;font-size:12px;white-space:nowrap}
@media (max-width:1180px){ .k6{grid-template-columns:repeat(3,minmax(0,1fr))} .k5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){ .panels{grid-template-columns:minmax(0,1fr)} .topsearch{width:100%;order:5} .band-user{width:100%} }
@media (max-width:520px){ .k6,.k5{grid-template-columns:repeat(2,minmax(0,1fr))} .um-text{display:none} }

/* Employee profile page: breadcrumb, header card, tab strip, then the detail cards */
.btn svg{width:16px;height:16px;flex:none}
.btn:has(svg){display:inline-flex;align-items:center;gap:8px}
.btn.soft{background:var(--accent-soft);border-color:var(--info-line);color:var(--blue)}
.btn.soft:hover{background:#DDE9F4}
.crumbs{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.crumbs nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.crumbs nav i{font-style:normal;color:#98A2B3}
.crumbs nav strong{color:var(--ink)}
.more{position:relative}
.more summary{list-style:none;cursor:pointer}
.more summary::-webkit-details-marker{display:none}
.emp-head{flex-direction:row;align-items:stretch;gap:26px;flex-wrap:wrap}
.eh-photo{width:140px;height:140px;flex:none;border-radius:14px;overflow:hidden;background:var(--accent-soft);display:grid;place-items:center}
.eh-photo img{width:100%;height:100%;object-fit:cover;display:block}
.eh-photo span{color:var(--blue);font-size:44px;font-weight:700}
.eh-main{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center}
.eh-name{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eh-name h2{margin:0;color:var(--ink);font-size:24px;font-weight:700;letter-spacing:-.3px}
.eh-id{color:#475467;font-size:15px}
.eh-title{margin-top:8px;color:var(--ink);font-size:17px;font-weight:700}
.eh-sub{color:var(--blue);font-size:13.5px}
.eh-sub i{font-style:normal;margin:0 10px;color:#C2CAD6}
.eh-contacts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px;color:#344054;font-size:13.5px}
.eh-contacts span{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.eh-contacts svg{width:17px;height:17px;flex:none;color:#53657A}
.eh-facts{flex:0 1 330px;margin:0;padding-left:26px;border-left:1px solid #EDF0F4;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;font-size:13.5px}
.eh-facts dt,.eh-facts dd{margin:0;padding:8px 0;border-bottom:1px solid #EDF0F4}
.eh-facts dt{padding-right:24px;color:#667085}
.eh-facts dd{color:var(--ink);font-weight:600}
.eh-facts dt:nth-last-of-type(1),.eh-facts dd:nth-last-of-type(1){border-bottom:0}
.ptabs{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(31,78,120,.05)}
.ptab{display:inline-flex;align-items:center;gap:9px;padding:14px 14px 12px;border:0;border-bottom:3px solid transparent;background:none;font:inherit;font-size:13.5px;font-weight:600;color:#475467;cursor:pointer;white-space:nowrap}
.ptab svg{width:17px;height:17px;color:#7B8797}
.ptab:hover{color:var(--ink)}
.ptab.on{color:var(--blue);border-bottom-color:var(--blue)}
.ptab.on svg{color:var(--blue)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.pcard{gap:16px}
.pc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pc-head h2{flex:1;min-width:0;font-size:17px}
.pc-ic{display:grid;place-items:center;color:var(--blue)}
.pc-ic svg{width:21px;height:21px}
.pers{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:22px;align-items:start}
.flds{display:grid;gap:12px 20px}
.flds.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fld{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.fld-l{color:#475467;font-size:13px;font-weight:500}
.fld-v{min-height:36px;display:flex;align-items:center;padding:6px 12px;border:1px solid #E1E6EE;border-radius:8px;background:#F8FAFC;color:var(--ink);font-size:13.5px;overflow-wrap:anywhere}
.photo-box{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.photo-box img,.photo-ph{width:100%;aspect-ratio:1/1.08;border-radius:10px;object-fit:cover;display:block}
.photo-ph{display:grid;place-items:center;background:var(--accent-soft);color:var(--blue);font-size:40px;font-weight:700}
.photo-box .btn{justify-content:center}
.photo-box .hint{text-align:center;font-size:11.5px}
.monies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.money{display:flex;flex-direction:column;gap:8px;min-width:0}
.money-v{display:flex;align-items:stretch;border:1px solid #E1E6EE;border-radius:8px;overflow:hidden;background:#FFFFFF}
.money-v i{font-style:normal;padding:9px 11px;border-right:1px solid #E1E6EE;background:#F8FAFC;color:#475467;font-size:13px;font-weight:600}
.money-v b{flex:1;padding:9px 12px;color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.money.total .money-v{background:var(--accent-soft);border-color:var(--info-line)}
.money.total .money-v i{background:transparent;border-right-color:var(--info-line);color:var(--blue)}
.doc-name{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink)}
.doc-name svg{width:17px;height:17px;flex:none;color:var(--blue)}
.icon-btn{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;color:#53657A}
.icon-btn:hover{background:var(--accent-soft);color:var(--blue)}
.icon-btn svg{width:18px;height:18px}
.timeline{display:flex;flex-direction:column}
.timeline > div{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid #EDF0F4}
.timeline > div:last-child{border-bottom:0}
.tl-date{width:96px;flex:none;color:#667085;font-size:13px}
.tl-dot{width:10px;height:10px;flex:none;margin-top:4px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--accent-soft)}
@media (max-width:1180px){ .pgrid{grid-template-columns:minmax(0,1fr)} .eh-facts{flex:1 1 100%;padding:14px 0 0;border-left:0;border-top:1px solid #EDF0F4} }
@media (max-width:620px){
  .pers{grid-template-columns:minmax(0,1fr)} .photo-box{max-width:170px}
  .flds.two{grid-template-columns:minmax(0,1fr)} .fld{grid-template-columns:minmax(0,1fr);gap:5px}
  .monies{grid-template-columns:minmax(0,1fr)}
  .eh-photo{width:96px;height:96px}
}

/* Document Expiry Centre: four boxes, a filter row, the table with page buttons, and the alert rules */
.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k-amber{--tint:#FEF5D9;--tone:#B7791F}
.xt{position:relative;padding:18px 18px 20px}
.xt b{font-size:27px}
.xt .kpi-l{font-size:13.5px;color:#344054}
.xt-view{position:absolute;right:16px;bottom:12px;color:var(--tone);font-size:12.5px;font-weight:700}
.xt.on{border-color:var(--tone);box-shadow:0 0 0 2px var(--tone) inset}
.filters{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:end;padding:18px 22px}
.filters .btn{height:42px;padding:0 16px}
.filters input,.filters select{height:42px;padding-top:0;padding-bottom:0;font-weight:400}
.ex-table td,.ex-table th{padding:9px 10px}
.ck{width:34px}
.ck input,#ex-all{width:16px;height:16px;padding:0;accent-color:var(--blue);cursor:pointer}
.dl-expired,.dl-d30,.dl-d60,.dl-valid{font-weight:700}
.dl-expired{color:var(--bad)} .dl-d30{color:var(--orange)} .dl-d60{color:var(--warn)} .dl-valid{color:var(--ok)}
button.icon-btn{border:0;background:none;padding:0;cursor:pointer}
.icon-btn.off{opacity:.3}
.icon-btn.off:hover{background:none;color:#53657A}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.pg{min-width:34px;height:34px;padding:0 8px;border:1px solid #DFE4EA;border-radius:8px;background:#FFFFFF;color:#344054;font:inherit;font-weight:600;cursor:pointer}
.pg:hover:not(:disabled){background:#F7F9FB}
.pg.on{border-color:var(--blue);color:var(--blue);background:var(--accent-soft)}
.pg:disabled{opacity:.4;cursor:not-allowed}
.rules{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.rules th{white-space:normal}
@media (max-width:1180px){ .k4{grid-template-columns:repeat(2,minmax(0,1fr))} .filters{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .k4{grid-template-columns:minmax(0,1fr)} .filters{grid-template-columns:minmax(0,1fr)} .rules{grid-template-columns:minmax(0,1fr)} }

/* Recruitment: number boxes, the pipeline row, the candidate list with tabs, and the candidate panel */
.rec-top{display:flex;justify-content:flex-end;gap:10px;margin-bottom:-6px}
label.inline{flex-direction:row;align-items:center;gap:10px;font-weight:500;color:#475467}
label.inline select{width:auto;min-width:180px}
.pipe{display:flex;align-items:stretch;gap:4px;overflow-x:auto;padding-bottom:2px}
.pipe-box{flex:1 0 108px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:92px;padding:12px 14px;border:1px solid transparent;border-radius:10px;background:var(--tint);font:inherit;text-align:left;cursor:pointer}
.pipe-box span{color:color-mix(in srgb,var(--tone) 72%,#000);font-size:12.5px;font-weight:700}
.pipe-box b{color:var(--ink);font-size:24px;line-height:1}
.pipe-box:hover,.pipe-box.on{border-color:var(--tone)}
.pipe-box.on{box-shadow:0 0 0 2px var(--tone) inset}
.pipe-arrow{align-self:center;flex:none;font-style:normal;color:#98A2B3;font-size:20px}
.rec-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(320px,1fr);gap:20px;align-items:start}
.ptabs.flat{padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:none}
.rec-filters{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:center}
.rec-table th{white-space:normal;line-height:1.3}
.rec-table td,.rec-table th{padding:9px 8px}
.rec-filters .topsearch{width:auto;order:0}
.rec-filters select,.rec-filters .btn{height:40px;padding-top:0;padding-bottom:0}
.rec-filters select{font-size:13px}
.spill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:6px;background:var(--tint);color:color-mix(in srgb,var(--tone) 72%,#000);font-size:11.5px;font-weight:700;white-space:nowrap}
.cand-cell{display:flex;align-items:center;gap:10px;min-width:0}
.cand-cell > span:last-child{display:flex;flex-direction:column;min-width:0}
.cand-cell .link{font-weight:700;color:var(--ink)}
tr.sel td{background:var(--accent-soft)}
tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.cpanel{gap:18px}
.cp-head{display:flex;align-items:flex-start;gap:14px}
.cp-head .av.lg{width:56px;height:56px;font-size:19px}
.cp-head .eh-name h2{font-size:20px}
.cp-head .eh-contacts{margin-top:8px;gap:6px 16px;font-size:12.5px}
.cpanel .ptab{padding:10px 9px 9px;font-size:12.5px}
.cp-block{display:flex;flex-direction:column;gap:12px}
.cp-block + .cp-block{padding-top:16px;border-top:1px solid #EDF0F4}
.cp-block h3{margin:0;color:var(--blue);font-size:14px;font-weight:700}
.info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.info > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.info-v{color:var(--ink);font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-s{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #E1E6EE;border-radius:6px;background:#F8FAFC;color:#344054;font-size:12px;font-weight:600}
.chip-s svg{width:14px;height:14px;color:var(--ok)}
.cp-text{margin:0;color:#344054;font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.cp-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid #EDF0F4}
@media (max-width:1400px){ .rec-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:1000px){ .rec-filters{grid-template-columns:repeat(2,minmax(0,1fr))} .rec-filters .topsearch{grid-column:1/-1} }
@media (max-width:520px){ .rec-filters{grid-template-columns:minmax(0,1fr)} .info{grid-template-columns:minmax(0,1fr)} label.inline{width:100%} label.inline select{flex:1;min-width:0} }

/* Digital Onboarding: four steps across the top, the person, the checklist, and the progress column */
.steps{list-style:none;margin:0;padding:4px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.steps li{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.steps li::after{content:'';position:absolute;top:17px;left:44px;right:2px;height:3px;border-radius:2px;background:#E1E6EE}
.steps li:last-child::after{display:none}
.steps li.done::after{background:var(--blue)}
.st-n{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#C6CDD8;color:#FFFFFF;font-weight:700}
.steps li.done .st-n{background:var(--blue)}
.steps li.now .st-n{background:#FFFFFF;color:var(--blue);box-shadow:inset 0 0 0 3px var(--blue)}
.st-t{display:flex;flex-direction:column;gap:2px}
.st-t b{color:#667085;font-size:14px}
.steps li.done .st-t b,.steps li.now .st-t b{color:var(--blue)}
.st-t span{color:#7B8797;font-size:12.5px}
.ob-grid{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(280px,1fr);gap:20px;align-items:start}
.side-h{margin:0;color:var(--ink);font-size:17px}
.ob-ring{display:flex;align-items:center;gap:18px}
.donut.small-d{width:112px;height:112px}
.donut.small-d .donut-mid b{font-size:20px}
.ob-ring > div:last-child{display:flex;flex-direction:column;gap:4px}
.ob-pct{color:var(--ink);font-size:26px;line-height:1}
.ob-legend > div{padding:8px 0}
.ob-legend .dot{width:10px;height:10px}
.ob-legend b{color:var(--ink)}
.ob-join{flex-direction:row;align-items:center;gap:14px;background:var(--accent-soft);border-color:var(--info-line)}
.ob-join .grow{display:flex;flex-direction:column;gap:3px}
.ob-join b{color:var(--ink)}
.ob-link{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 0;border:1px solid #E1E6EE;border-radius:8px;background:#F8FAFC}
.ob-link input{border:0;background:none;box-shadow:none;font-size:12.5px;padding:6px 10px;min-width:0}
.ob-alert{padding:12px 14px;border:1px solid var(--bad-line);border-radius:10px;background:var(--bad-soft);color:var(--bad);font-size:13.5px}
.ob-prog{display:flex;align-items:center;gap:10px}
.ob-prog .meter{flex:1;min-width:70px}
.ob-prog .meter i{background:#1BAF7A}
.ob-prog span{color:#475467;font-size:12.5px;white-space:nowrap}
@media (max-width:1180px){ .ob-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:620px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px} .steps li:nth-child(2)::after{display:none} }

/* Leave Management: balance boxes, the apply form with the approval steps, requests, calendar and leave types */
.tabrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tabrow .ptabs{flex:1 1 auto}
.ptab .badge{margin-left:2px}
.lv-tile{display:flex;align-items:center;gap:16px;min-width:0;padding:18px 20px;border-radius:12px;background:var(--tint)}
.lv-tile .kpi-ic{width:48px;height:48px}
.lv-tile .kpi-ic svg{width:26px;height:26px}
.lv-tile > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.lv-t{color:var(--ink);font-size:14px;font-weight:700}
.lv-n{display:flex;align-items:baseline;gap:8px;color:#475467;font-size:13px}
.lv-n b{color:var(--ink);font-size:30px;line-height:1}
.lv-f{color:#475467;font-size:12.5px}
.lv-f i{font-style:normal;margin:0 7px;color:var(--tone)}
.lv-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(300px,1fr);gap:20px;align-items:start}
.lv-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lv-form-grid .fld-v{min-height:39px;font-weight:600}
.lv-submit{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lv-submit .btn{height:44px;padding:0 20px}
.lv-submit label{flex:1 1 240px}
.wf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.wf li{position:relative;display:flex;align-items:center;gap:14px;padding:10px 0}
.wf li + li::before{content:'';position:absolute;left:17px;top:-12px;height:24px;width:2px;background:#DCE2EA}
.wf-n{position:relative;z-index:1;width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;background:#C6CDD8;color:#FFFFFF;font-weight:700}
.wf li.done .wf-n{background:#1BAF7A} .wf li.now .wf-n{background:var(--blue)} .wf li.rej .wf-n{background:#C84C4C}
.wf .grow{display:flex;flex-direction:column;gap:2px}
.wf .grow b{color:var(--ink);font-size:14px}
.wf .grow span{color:#7B8797;font-size:12.5px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-h{padding:4px 0 8px;text-align:center;color:#667085;font-size:12px;font-weight:600}
.cal-d{min-height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;color:var(--ink);font-size:13px}
.cal-d.out{color:#B8C0CC}
.cal-d.team{background:#DDF4EA}
.cal-d.mine{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--info-line)}
.cal-d.mine.team{background:linear-gradient(135deg,var(--accent-soft) 50%,#DDF4EA 50%)}
.cal-d.today > span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#FFFFFF;font-weight:700}
.cal-top{display:flex;align-items:center;justify-content:center;gap:8px}
.cal-m{min-width:140px;text-align:center;color:var(--blue);font-size:14px}
.lv-req th{white-space:normal;line-height:1.3}
.lv-req td,.lv-req th{padding:9px 8px}
.cal.big{gap:6px}
.cal.big .cal-d{min-height:96px;align-items:stretch;justify-content:flex-start;gap:5px;padding:8px;border:1px solid #EDF0F4}
.cal.big .cal-d.today > span{align-self:flex-start}
.cal-names{display:flex;flex-direction:column;gap:3px;min-width:0}
.cal-names i{font-style:normal;padding:2px 6px;border-radius:5px;background:#FFFFFF;color:#17754C;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-names i.me{color:var(--blue)}
.cal-names i.more-n{background:none;color:#475467}
.dot.ring{background:var(--blue);box-shadow:0 0 0 3px var(--accent-soft)}
.lv-filters{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)) auto}
@media (max-width:1400px){ .lv-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){ .lv-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cal.big .cal-d{min-height:64px;padding:5px} .cal-names i{font-size:10px;padding:1px 4px} }
@media (max-width:620px){ .lv-filters{grid-template-columns:minmax(0,1fr)} .cal-h{font-size:11px} }

/* HSE & PPE: the five boxes, the records table, the item pictures, the status flow and the issue form */
.k-grey{--tint:#EEF1F4;--tone:#5B6B7F}
.ppe-kpi{gap:14px;padding:16px 18px}
.ppe-kpi .kpi-ic{width:48px;height:48px;border-radius:50%;background:var(--tone);color:#FFFFFF}
.ppe-kpi .kpi-ic svg{width:24px;height:24px}
.ppe-kpi.on{border-color:var(--tone);box-shadow:0 0 0 2px var(--tone) inset}
.ppe-filters{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:center;padding:14px 18px}
.ppe-filters .topsearch{width:auto;order:0}
.ppe-filters .topsearch input,.ppe-filters select,.ppe-filters .btn{height:42px;padding-top:0;padding-bottom:0}
.ppe-filters select{font-weight:400}
.ppe-table td,.ppe-table th{padding:9px 6px}
.ppe-table th.ppe-th{white-space:normal;line-height:1.25}
.ppe-th span{display:inline-flex;align-items:center;gap:6px}
.ppe-cell{white-space:nowrap}
.ppe-cell .pill{padding:3px 8px;font-size:10.5px}
.ppe-date{display:block;margin-top:4px;color:#475467;font-size:12px}
.ppe-art{display:inline-grid;place-items:center;flex:none;width:54px;height:54px}
.ppe-art svg{display:block;width:100%;height:100%}
.ppe-art.sm{width:34px;height:34px}
.ppe-art.mono{width:17px;height:17px;color:var(--blue)}
.ppe-art.mono svg *{fill:currentColor}
.ppe-art.mono svg .hl{fill:#F3F6F9}
.ppe-art.mono svg [fill="none"]{fill:none;stroke:#F3F6F9}
.ppe-name{display:inline-flex;align-items:center;gap:10px}
.t-due{color:var(--orange)} .t-over{color:var(--bad)}
.ppe-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.ppe-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ppe-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:14px 10px;border:1px solid var(--line);border-radius:12px;background:#FFFFFF;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.ppe-tile:hover{border-color:var(--info-line);box-shadow:0 6px 16px rgba(31,78,120,.08)}
.ppe-tile.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.ppe-tile-t{display:flex;flex-direction:column;gap:3px;min-width:0;color:#475467;font-size:12px}
.ppe-tile-t strong{margin-bottom:3px;color:var(--ink);font-size:13.5px}
.ppe-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:18px}
.flow-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:26px 6px 12px;border:1px solid transparent;border-radius:10px;background:var(--tint);font:inherit;text-align:center;cursor:pointer}
.flow-step:hover,.flow-step.on{border-color:var(--tone)}
.flow-step.on{box-shadow:0 0 0 1px var(--tone) inset}
.flow-ic{position:absolute;top:-18px;left:50%;width:36px;height:36px;margin-left:-18px;display:grid;place-items:center;border-radius:50%;background:var(--tone);color:#FFFFFF;box-shadow:0 0 0 3px #FFFFFF}
.flow-ic svg{width:18px;height:18px}
.flow-step strong{color:color-mix(in srgb,var(--tone) 78%,#000);font-size:12.5px}
.flow-step > span:last-child{color:#475467;font-size:11.5px}
.flow-step:not(:last-child)::after{content:'';position:absolute;z-index:1;top:-1px;left:calc(50% + 26px);width:calc(100% - 42px);border-top:2px solid #C5D0DC}
.flow-step:not(:last-child)::before{content:'';position:absolute;z-index:1;top:-4px;left:calc(150% - 25px);width:6px;height:6px;border-top:2px solid #C5D0DC;border-right:2px solid #C5D0DC;transform:rotate(45deg)}
.ppe-rule{width:100%;margin:2px 0;border:0;border-top:1px solid #EDF0F4}
.ppe-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
#ppe-form textarea{min-height:64px}
.req{color:var(--bad);font-style:normal}
.ppe-list{display:flex;flex-direction:column}
.ppe-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #EDF0F4}
.ppe-item:last-child{border-bottom:0;padding-bottom:0}
.ppe-item .grow{display:flex;flex-direction:column;gap:4px;min-width:0}
.ppe-item strong{color:var(--ink);font-size:13.5px}
@media (max-width:1480px){ .ppe-grid{grid-template-columns:minmax(0,1fr)} }
@media (min-width:621px) and (max-width:1480px){ .ppe-form-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1000px){ .ppe-filters{grid-template-columns:repeat(2,minmax(0,1fr))} .ppe-filters .topsearch{grid-column:1/-1} }
@media (max-width:620px){ .ppe-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .ppe-flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px} .flow-step::after,.flow-step::before{display:none}
  .ppe-item{flex-wrap:wrap} .ppe-item .grow{flex:1 1 0} .ppe-item > .row{flex:1 1 100%;justify-content:flex-end} .ppe-filters{grid-template-columns:minmax(0,1fr)} .ppe-filters .topsearch{grid-column:auto} }
@media (max-width:420px){ .ppe-tiles,.ppe-form-grid{grid-template-columns:minmax(0,1fr)} }

/* Employee Self-Service Portal: greeting banner, four boxes, one card for each area, quick actions, announcements */
.punch-card{flex-direction:row;align-items:center;gap:16px;padding:16px 20px}
.punch-card .grow{display:flex;flex-direction:column;gap:2px}
.punch-card strong{color:var(--ink);font-size:16px}
.punch-card .btn{white-space:nowrap}
.estats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.estat{display:flex;align-items:center;gap:16px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF;box-shadow:0 4px 14px rgba(31,78,120,.05);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.estat:hover{transform:translateY(-2px);border-color:var(--info-line);box-shadow:0 8px 20px rgba(31,78,120,.10)}
.estat-t{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.estat-l{color:#344054;font-size:12.5px;font-weight:600}
.estat-l span{font-weight:400;color:#667085}
.estat-n{color:#475467;font-size:13px}
.estat-n b{color:var(--ink);font-size:26px;line-height:1.1}
.estat em{font-style:normal;color:#667085;font-size:12.5px}
.estat-link{color:#1F6FD0;font-weight:600}
.estat-go{flex:none;color:#344054}
.estat-go svg{display:block;width:18px;height:18px}
.mod-ic{flex:none;width:54px;height:54px;display:grid;place-items:center;border-radius:12px;background:var(--tint);color:var(--tone)}
.mod-ic svg{width:27px;height:27px}
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.mod{position:relative;gap:14px;padding:20px 20px 18px}
.mod-head{display:flex;align-items:flex-start;gap:14px}
.mod-head h3{margin:4px 0 4px;color:var(--ink);font-size:16.5px}
.mod-head p{margin:0;color:#475467;font-size:12.5px;line-height:1.45}
.mod-links{display:flex;flex-direction:column;gap:2px;padding-right:30px}
.mod-link{display:flex;align-items:center;gap:14px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;color:#344054;text-align:left;cursor:pointer}
.mod-link svg{flex:none;width:17px;height:17px;color:#53657A}
.mod-link:hover{background:var(--accent-soft);color:var(--blue)}
.mod-link:hover svg{color:var(--blue)}
.mod-go{position:absolute;right:14px;bottom:14px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:#344054;cursor:pointer}
.mod-go:hover{background:var(--accent-soft);color:var(--blue)}
.mod-go svg{width:19px;height:19px}
.qa-card{gap:10px}
.qa-bolt{color:#E8A400}
.qa-bolt svg{fill:currentColor}
.qa-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#FFFFFF;font:inherit;color:#344054;text-align:left;cursor:pointer}
.qa-row:hover{border-color:var(--info-line);background:#F7FAFD}
.qa-row > span{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#EAF2FB;color:#1F6FD0}
.qa-row > span svg{width:18px;height:18px}
.qa-row strong{flex:1;font-size:13.5px;font-weight:500}
.qa-row > svg{flex:none;width:16px;height:16px;color:#475467}
.ann-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;background:#EDF4FB;color:#1F2937;font-size:13.5px}
.ann-row > svg{flex:none;width:18px;height:18px;color:#1F6FD0}
.ann-all{font-weight:700;white-space:nowrap}
@media (max-width:1300px){ .mods,.estats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .mods,.estats{grid-template-columns:minmax(0,1fr)} .punch-card{flex-wrap:wrap} }

/* Notifications: the alert list and the "Automatic Notifications" panel */
.nt-list{display:flex;flex-direction:column}
.nt-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #EDF0F4}
.nt-row:first-child{padding-top:0}
.nt-row:last-child{border-bottom:0}
.nt-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--tint);color:var(--tone)}
.nt-ic svg{width:20px;height:20px}
.nt-row .grow{display:flex;flex-direction:column;gap:2px}
.nt-row strong{color:var(--ink)}
.nt-rules{display:flex;flex-direction:column;gap:12px}
.nt-rules > div{display:flex;align-items:flex-start;gap:10px}
.nt-rules .dot{margin-top:5px}
.nt-rules .grow{display:flex;flex-direction:column;gap:1px;font-size:13px}
.pc-head .legend{font-size:12px;color:#475467}
@media (max-width:620px){ .nt-row{flex-wrap:wrap} .nt-row .grow{flex:1 1 0} .nt-acts{flex:1 1 100%;justify-content:flex-end} }

/* Import employees from Excel: a wider box with the list to check */
dialog.wide{width:min(1180px,calc(100% - 32px))}
.imp-scroll{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.imp-scroll table{min-width:860px;font-size:13px}
.imp-scroll th{position:sticky;top:0;z-index:1;border-radius:0}
.imp-scroll td,.imp-scroll th{padding:7px 10px}
.imp-bad td{background:#FFF7F6}
.imp-paste summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:13px}
.imp-paste > div{margin-top:10px}

/* ================= Theme: royal blue, photo banner, floating white cards =================
   The banner photo is frontend/banner-bg.jpg (HR side) and frontend/portal-bg.jpg (employee side). */
/* Left menu */
.side{padding:26px 16px 24px;background:linear-gradient(180deg,#04376F 0%,#033268 50%,#022F62 100%);box-shadow:6px 0 28px rgba(2,30,70,.18)}
.side{padding-top:0;padding-bottom:0}
.side-in{top:0;min-height:100vh;max-height:100vh;padding:24px 0 22px;overflow-y:auto;scrollbar-width:none}
.side-in::-webkit-scrollbar{display:none}
.side-in::after{content:'Lasting Relationship\A with Quality and Ethics';white-space:pre;margin:auto 8px 6px;padding-bottom:16px;color:rgba(255,255,255,.82);font-size:17px;font-style:italic;line-height:1.35;background:linear-gradient(#3B9BFF,#3B9BFF) left bottom/34px 3px no-repeat}
.side .logo img{width:176px}
/* Under the logo: round photo, then the name, then the job title */
.side-label.me{display:flex;flex-direction:column;align-items:center;gap:9px;margin:2px 0 0;padding:6px 8px 16px;border:0;border-bottom:1px solid rgba(255,255,255,.14);border-radius:0;background:none;letter-spacing:0;text-align:center}
.me .av.lg{width:68px;height:68px;font-size:22px;background:#FFFFFF;color:#04376F;box-shadow:0 0 0 4px rgba(255,255,255,.22),0 8px 20px rgba(1,20,50,.35)}
.me-t{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:100%}
.me-t strong{overflow:hidden;color:#FFFFFF;font-size:15.5px;font-weight:700;line-height:1.25;text-overflow:ellipsis}
.me-t span{overflow:hidden;color:rgba(255,255,255,.75);font-size:12.5px;font-weight:400;text-overflow:ellipsis}
#nav{gap:4px}
.nav-item{gap:10px;padding:8px 12px;border-radius:10px;color:rgba(255,255,255,.86);font-size:13px}
.nav-item svg{width:20px;height:20px;padding:0;border-radius:0;background:none}
.nav-item:hover{background:rgba(255,255,255,.10)}
.nav-item.on{background:#0A6ED6;color:#FFFFFF;box-shadow:0 8px 18px rgba(1,20,50,.35)}
/* Photo banner across the top of every page, with the page name on it */
.band{position:relative;top:auto;z-index:auto;align-items:flex-start;gap:14px;min-height:218px;margin-bottom:-54px;padding:22px 38px 76px;border-bottom:0;color:#FFFFFF;
  background:linear-gradient(90deg,rgba(4,55,111,.90) 0%,rgba(12,78,150,.70) 30%,rgba(60,130,205,.40) 62%,rgba(150,195,238,.22) 100%),url(/banner-bg.jpg) center 45%/cover no-repeat #04376F}
.app.emp .band{background:linear-gradient(270deg,rgba(4,55,111,.08) 0px,rgba(4,55,111,.22) 240px,rgba(4,55,111,.72) 520px,#04376F 735px),url(/portal-bg.jpg) right -110px top 26%/auto 250% no-repeat #04376F}
.band-title{padding-top:38px}
.band-title::before{content:'HR MANAGEMENT PORTAL';display:block;margin-bottom:8px;color:rgba(255,255,255,.88);font-size:13px;font-weight:700;letter-spacing:2px}
.app.emp .band-title::before{content:'EMPLOYEE SELF-SERVICE PORTAL'}
.band h1{color:#FFFFFF;font-size:30px;letter-spacing:-.3px;text-shadow:0 2px 14px rgba(6,26,72,.35)}
.band h1 span{color:#56B6F7}
.band-title p{margin-top:8px;color:rgba(255,255,255,.92);font-size:15px;text-shadow:0 1px 10px rgba(6,26,72,.35)}
.topsearch input{height:44px;border-color:transparent;border-radius:12px;background:#FFFFFF;box-shadow:0 6px 18px rgba(8,36,96,.14)}
.bell{width:44px;height:44px;border-color:transparent;box-shadow:0 6px 18px rgba(8,36,96,.14)}
.seg{padding:4px;border-radius:12px;background:#FFFFFF;box-shadow:0 6px 18px rgba(8,36,96,.14)}
.seg button{border-radius:9px}
.seg button[aria-pressed="true"]{background:#04376F;color:#FFFFFF}
.usermenu summary{border-color:transparent;box-shadow:0 6px 18px rgba(8,36,96,.14)}
.usermenu .av{background:#04376F}
.tabsbar,.warnbar,#view{position:relative;z-index:1}
.tabsbar{padding:0 38px 14px;background:none;border-bottom:0}
.chip{box-shadow:0 4px 12px rgba(8,36,96,.10)}
.warnbar{margin:0 38px 16px;box-shadow:0 4px 12px rgba(8,36,96,.10)}
#view{padding-top:0}
/* Cards */
.card{border-color:#E6EDF7;border-radius:16px;box-shadow:0 8px 24px rgba(16,56,130,.07)}
.ptabs{border-color:#E6EDF7;border-radius:14px;box-shadow:0 8px 24px rgba(16,56,130,.07)}
.kpi{border-radius:14px}
button.kpi:not(.row-kpi){position:relative;padding-right:52px}
button.kpi:not(.row-kpi)::after{content:'\2192';position:absolute;right:16px;top:50%;width:26px;height:26px;margin-top:-13px;display:grid;place-items:center;border-radius:50%;background:#FFFFFF;color:var(--tone);font-size:14px;box-shadow:0 2px 6px rgba(16,56,130,.12)}
.btn.pri{box-shadow:0 6px 14px rgba(10,110,214,.25)}
th{background:#F1F5FB;color:#3A4D6B}
tbody tr:hover td{background:#F6FAFF}
.pc-ic,.sec-ic{color:var(--blue)}
@media (max-height:800px){ .side-in::after{display:none} }
@media (max-width:860px){
  .side{padding:14px 16px} .side-in{min-height:0;max-height:none;padding:0;overflow:visible} .side-in::after{display:none} .side-label.me{display:none}
  #nav{gap:4px} .nav-item{gap:8px;padding:7px 10px;font-size:13px} .nav-item svg{width:17px;height:17px}
  .band{min-height:0;margin-bottom:-34px;padding:16px 16px 52px}
  .app.emp .band{background:linear-gradient(90deg,rgba(4,55,111,.95) 0%,rgba(4,55,111,.78) 55%,rgba(4,55,111,.5) 100%),url(/portal-bg.jpg) 80% 30%/cover no-repeat #04376F}
  .band-title{flex:1 1 100%;order:2;padding-top:6px} .band-user{order:1;width:100%}
  .band h1{font-size:24px}
  .tabsbar{padding:0 16px 12px} .warnbar{margin:0 16px 12px}
  #view{padding-top:0}
}

/* Timesheet drawn like the company's paper form (QTH-TS-001) */
.ms-paper{min-width:1040px;border:1.5px solid #1F2937;background:#FFFFFF;color:#111827}
.ms-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px 16px;border-bottom:1.5px solid #1F2937}
.ms-top .logo{padding:0}
.ms-top .logo img{height:34px;width:auto;max-height:none}
.ms-top h2{font-size:19px;letter-spacing:.3px;color:#111827}
.ms-doc{justify-self:end;font-size:11px;font-weight:700}
.ms-meta{display:grid;grid-template-columns:120px 1.25fr 140px 1fr;border-bottom:1.5px solid #1F2937}
.ms-meta > *{display:flex;align-items:center;min-height:32px;padding:4px 10px;border-right:1px solid #1F2937;border-bottom:1px solid #1F2937;font-size:13.5px}
.ms-meta > :nth-child(4n){border-right:0}
.ms-meta > :nth-last-child(-n+4){border-bottom:0}
.ms-meta b{font-size:12px}
.ms-meta span{justify-content:center;font-weight:700}
table.ms-grid{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px}
.ms-grid th,.ms-grid td{border:1px solid #1F2937;border-radius:0!important}
.ms-grid th:first-child,.ms-grid td:first-child{border-left:0}
.ms-grid th:last-child,.ms-grid td:last-child{border-right:0}
.ms-grid th{padding:5px 4px;background:#FFFFFF;color:#111827;font-size:11px;font-weight:700;letter-spacing:0;line-height:1.25;text-align:center;white-space:normal}
.ms-grid td{height:29px;padding:0;text-align:center}
.ms-grid tbody tr:hover td{background:none}
.ms-we td{background:#F3F5F8}
.ms-date{font-weight:700;white-space:nowrap}
.ms-grid td.ms-date > span{display:inline;margin-left:6px;padding:0;color:#667085;font-size:11px;font-weight:400}
.ms-grid input{width:100%;height:28px;padding:0 6px;border:0;border-radius:0;background:transparent;font-size:12.5px;font-weight:400;text-align:center;box-shadow:none}
.ms-grid input:focus{background:#EAF3FE;box-shadow:inset 0 0 0 2px var(--blue)}
/* an empty time box stays quiet until it is clicked */
.ms-grid input[type="time"]:invalid:not(:focus){color:transparent}
.ms-grid input[type="time"]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
.ms-grid td:hover input[type="time"]::-webkit-calendar-picker-indicator,.ms-grid input[type="time"]:focus::-webkit-calendar-picker-indicator{opacity:.6}
.ms-grid input::placeholder{color:#B4BCC8}
.ms-grid td > span{display:block;padding:5px 6px;overflow-wrap:anywhere}
.ms-grid tfoot td{height:auto;padding:8px;font-weight:700}
.ms-grid td.ms-notes{padding:8px 10px;font-size:11.5px;font-weight:400;line-height:1.5;text-align:left}
.ms-sign{display:grid;grid-template-columns:38% 22% 1fr;border-top:1.5px solid #1F2937}
.ms-sign > div{display:flex;flex-direction:column;gap:6px;min-height:74px;padding:6px 10px;border-right:1px solid #1F2937;font-size:12.5px}
.ms-sign > div:last-child{border-right:0}
.ms-sign b{font-size:12px;text-decoration:underline}
.ms-sign input{height:32px;padding:0 8px;border:1px dashed #9AA4B2;border-radius:6px;background:#FFFFFF;font-size:12.5px;box-shadow:none}
.ms-sign input:focus{border-style:solid;border-color:var(--blue);background:#EAF3FE}

/* Sign-in page: your office photo filling the page, with a blue glass sign-in box in the middle.
   The photo is the file frontend/signin-bg.jpg. Replace that file to change the photo. */
.login-wrap{position:relative;display:grid;place-items:center;min-height:100%;padding:24px 16px;overflow:hidden;background:#0D3470}
.login-wrap::before{content:'';position:absolute;inset:0;background:url(/signin-bg.jpg) center/cover no-repeat}
.login-wrap::after{content:'';position:absolute;inset:0;background:rgba(8,30,66,.14)}
.login-shell{position:relative;z-index:1;display:block;width:100%;max-width:480px;background:linear-gradient(180deg,rgba(13,54,116,.88),rgba(10,45,100,.90));border:1px solid rgba(255,255,255,.20);border-radius:22px;box-shadow:0 30px 80px rgba(6,20,45,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.login-brand{display:none}
.login-form-panel{display:flex;align-items:center;justify-content:center;padding:36px 42px 32px}
.login-card{width:100%;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;gap:0}
.login-card .logo{align-items:center;padding:0;margin-bottom:22px}
.login-card .logo img{width:250px;max-height:none;padding:11px 18px;background:#FFFFFF;border-radius:12px}
.login-card h1{flex:none;margin:0 0 10px;text-align:center;color:#FFFFFF;font-size:26px;font-weight:700;letter-spacing:-.3px}
.login-intro{margin:0 0 24px;text-align:center;color:rgba(255,255,255,.92);font-size:15px;line-height:1.55}
.login-card form{gap:18px}
.login-card form > label{gap:9px;color:#FFFFFF;font-size:14px;font-weight:700}
.field{position:relative;display:flex;align-items:center}
.field > svg{position:absolute;left:16px;width:20px;height:20px;color:#FFFFFF;pointer-events:none}
.field input{height:52px;padding:0 48px 0 50px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);border-radius:10px;color:#FFFFFF;font-size:15px;font-weight:400}
.field input::placeholder{color:rgba(255,255,255,.78)}
.field input:focus{background:rgba(255,255,255,.16);border-color:#8FC2FF;box-shadow:0 0 0 4px rgba(111,168,255,.26)}
/* when the browser fills in a saved email, keep the box blue with white writing */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{-webkit-text-fill-color:#FFFFFF;caret-color:#FFFFFF;box-shadow:0 0 0 1000px #23508F inset;transition:background-color 9999s ease-out}
.eye{position:absolute;right:8px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:#FFFFFF;cursor:pointer}
.eye:hover{background:rgba(255,255,255,.16)}
.eye svg{width:21px;height:21px}
.eye[aria-pressed="true"]{color:#8FC2FF}
.login-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.remember{flex-direction:row;align-items:center;gap:10px;color:#FFFFFF;font-size:14px;font-weight:400;cursor:pointer}
.remember input{width:18px;height:18px;padding:0;accent-color:#1668F5}
.login-row .link{color:#4DB2FF;font-weight:700}
.login-help{padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.14);color:#FFFFFF;font-size:13px;line-height:1.5}
.login-card .err{color:#FFD3CF}
.login-card .btn.pri{height:54px;margin-top:4px;border:0;border-radius:10px;background:#1668F5;font-size:16px;font-weight:700;box-shadow:0 10px 22px rgba(6,26,70,.35)}
.login-card .btn.pri:hover{background:#0F5AE0}
.login-note{margin-top:22px;text-align:center;color:rgba(255,255,255,.88);font-size:12px}

@media (max-width:860px){
  .side{padding:14px 16px}
  .side .logo img{width:145px}
  .side-label{display:none}
  #view{padding:0 16px 40px}
  .card{padding:18px 16px}
}
@media (max-width:760px){ .login-wrap{padding:16px 12px} .login-wrap::before{background-position:62% center} .login-shell{border-radius:18px} .login-form-panel{padding:28px 22px 26px} .login-card h1{font-size:23px} .login-card .logo img{width:210px} .login-intro br{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---- the onboarding page a new joiner opens from the emailed link ---- */
.ob-wrap{max-width:720px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:16px}
.ob-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:3px solid var(--navy)}
.ob-head .logo{padding:0}
.ob-head .logo img{max-height:none;width:min(220px,60vw)}
.ob-tag{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--muted)}
.ob-card h1{flex:none}
.ob-foot{margin:0;text-align:center}

/* Leave request form drawn like the company's paper form (QTH-LF-001) */
.lf-paper{width:860px;min-width:860px;margin:0 auto;padding:22px 26px 14px;border:1.5px solid #808080;background:#FFFFFF;color:#111827;font-size:13.5px;line-height:1.35}
.lf-head .logo{padding:0;justify-content:flex-start}
.lf-head .logo img{height:38px;width:auto;max-height:none}
.lf-paper .lf-head h2,dialog .lf-paper .lf-head h2,#dlg-body .lf-paper .lf-head h2{margin:8px 0 16px;text-align:center;font-family:"Times New Roman",Times,serif;font-size:27px;font-weight:700;letter-spacing:.2px;color:#203764}
.lf-box{border:1px solid #808080}
.lf-bar{padding:2px 8px;background:#003399;color:#FFFFFF;font-family:"Times New Roman",Times,serif;font-size:17px;letter-spacing:.2px}
.lf-bar.mid{text-align:center}
.lf-r{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #808080}
.lf-r.one{grid-template-columns:1fr}
.lf-r.tk{grid-template-columns:42.5% 22.3% 1fr;border-bottom:3px solid #111827}
.lf-r.top{border-top:0}
.lf-c{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px 8px;min-width:0}
.lf-c + .lf-c{border-left:1px solid #808080}
.lf-c > b,.lf-ln > b,.lf-ft b{flex:none;font-weight:400}
.lf-c > b.strong{font-weight:700}
.lf-col{flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:6px 8px}
.lf-ln{display:flex;align-items:center;gap:8px;min-height:28px}
.lf-ft{display:flex;gap:14px;flex-wrap:nowrap}
.lf-ft > span{display:flex;align-items:center;gap:6px;min-height:28px;white-space:nowrap}
.lf-new .lf-ft{flex-direction:column;gap:4px}
.lf-new .lf-ft > span > b{flex:0 0 82px}
.lf-new .lf-ln > b{flex:0 0 122px}
.lf-v{min-width:0;font-weight:600;overflow-wrap:anywhere}
.lf-types{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 8px;border-bottom:1px solid #808080}
.lf-other{display:flex;align-items:center;gap:4px}
.lf-tick{display:inline-flex;flex-direction:row;align-items:center;gap:7px;margin:0;font-size:13.5px;font-weight:400;color:#111827;cursor:default}
.lf-c .lf-tick{margin-right:18px}
.lf-tick input{width:16px;height:16px;margin:0;accent-color:#003399;cursor:pointer}
.lf-new .lf-tick,.lf-paper .lf-tick:has(input){cursor:pointer}
.lf-bx{display:inline-block;position:relative;width:15px;height:15px;border:1.5px solid #4B5563;background:#FFFFFF}
.lf-bx.on::before,.lf-bx.on::after{content:'';position:absolute;left:50%;top:50%;width:15px;height:1.6px;background:#111827}
.lf-bx.on::before{transform:translate(-50%,-50%) rotate(45deg)}
.lf-bx.on::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lf-paper input[type="text"],.lf-paper input[type="email"],.lf-paper input[type="tel"],.lf-paper input[type="date"]{flex:1 1 auto;min-width:0;width:auto;height:28px;padding:0 8px;border:1px dashed #9AA4B2;border-radius:5px;background:#FFFFFF;font-size:13.5px;font-weight:600;box-shadow:none}
.lf-paper input[type="date"]{flex:0 0 150px}
.lf-other input[type="text"]{flex:0 0 190px;font-weight:400}
.lf-paper input:focus{border-style:solid;border-color:var(--blue);background:#EAF3FE;outline:0}
.lf-sign{display:grid;border-bottom:1px solid #808080}
.lf-sign.three{grid-template-columns:30.6% 34.2% 1fr}
.lf-sign.two{grid-template-columns:1fr 1fr;border-bottom:0}
.lf-sign > div{display:flex;flex-direction:column}
.lf-sign > div + div{border-left:1px solid #808080}
.lf-sign span{display:block;min-height:50px;padding:6px 8px;font-size:13px}
.lf-sign b{display:block;padding:4px 8px;border-top:1px solid #808080;text-align:center;font-size:13.5px}
.lf-sub{padding:2px 8px;border-top:3px solid #111827;border-bottom:1px solid #808080;text-align:center;font-weight:700}
.lf-bar + .lf-sub{border-top-width:3px}
.lf-off{opacity:.55}
.lf-note{padding:8px 0 0 80px}
.lf-note b{font-size:14px}
.lf-note ul{margin:10px 0 0 28px;padding:0 60px 0 0;font-size:10.5px;line-height:1.5}
.lf-doc{margin-top:14px;text-align:right;font-size:12.5px}
/* "This does not expire" tick box in the upload box */
.ck-line{display:flex;flex-direction:row;align-items:center;gap:9px;font-weight:500;cursor:pointer}
.ck-line input{width:17px;height:17px;margin:0;accent-color:var(--blue)}
/* Employee dashboard: a tall banner with the engineer photo (helmet and Qualitech vest), the date and time, and the summary boxes on the photo */
.app.emp .band.welcome{flex-wrap:wrap;min-height:390px;margin-bottom:24px;padding-bottom:36px;
  background:linear-gradient(90deg,rgba(4,55,111,.92) 0%,rgba(4,55,111,.70) 40%,rgba(4,55,111,.25) 75%,rgba(4,55,111,.15) 100%),url(/portal-bg.jpg) right 35%/cover no-repeat #04376F}
@media (min-width:1700px){ .app.emp .band.welcome{min-height:440px} }
#band-when{margin-top:10px;color:#9CD3FB;font-size:13.5px;font-weight:600;letter-spacing:.2px}
#band-stats{order:2;flex:1 1 100%;margin-top:auto;padding-top:30px}
.app.emp .band.welcome .band-user{order:1;margin-left:auto}
#band-stats .estats{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;gap:14px}
@media (max-width:1100px){ #band-stats .estats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1500px){ #band-stats .estats{max-width:min(1000px,62%)} } /* on wide screens the boxes stay on the left, so the engineer and the Qualitech vest stay in view */
#band-stats .estat{border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none;color:#FFFFFF}
#band-stats .estat:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
#band-stats .estat *,#band-stats .estat-l span,#band-stats .estat em,#band-stats .estat-n,#band-stats .estat-n b,#band-stats .estat-link,#band-stats .estat-go{color:#FFFFFF}
#band-stats .mod-ic{width:40px;height:40px;background:rgba(255,255,255,.18)}
#band-stats .mod-ic svg{width:20px;height:20px}
#band-stats .estat{gap:12px;padding:14px}
#band-stats .estat-n b{font-size:22px}
#band-stats .estat-n{white-space:nowrap}
@media (max-width:1400px){ #band-stats .estat-go{display:none} }
@media (max-width:860px){
  .app.emp .band.welcome{min-height:0;margin-bottom:16px;padding-bottom:18px;background:linear-gradient(90deg,rgba(4,55,111,.95) 0%,rgba(4,55,111,.78) 55%,rgba(4,55,111,.5) 100%),url(/portal-bg.jpg) 80% 30%/cover no-repeat #04376F}
  #band-stats{padding-top:16px}
  #band-stats .mod-ic{display:none} #band-stats .estat{padding:12px} #band-stats .estats{gap:10px}
  #band-stats .estat-n,#band-stats .estat-l{white-space:normal}
}
/* My Profile */
.av.xl{width:96px;height:96px;font-size:30px;border:4px solid #FFFFFF;box-shadow:0 6px 18px rgba(16,56,130,.16)}
.card.pf-head{display:flex;flex-direction:row;align-items:center;gap:22px;padding:24px 26px;flex-wrap:wrap}
.pf-who{flex:1 1 320px;min-width:0}
.pf-who h2{font-size:24px;color:var(--ink)}
.pf-title{display:block;margin-top:2px;color:#4A5A75;font-size:14.5px}
.pf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.pf-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#F1F5FB;color:#334766;font-size:12.5px;font-weight:600}
.pf-chip svg{width:14px;height:14px;color:var(--blue)}
.pf-acts{display:flex;gap:10px;flex-wrap:wrap}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.pf-f{display:flex;align-items:flex-start;gap:12px;min-width:0}
.pf-f.wide{grid-column:1/-1}
.pf-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--blue)}
.pf-ic svg{width:18px;height:18px}
.pf-l{display:block;color:#7A869A;font-size:12px;font-weight:500}
.pf-v{display:block;margin-top:2px;color:var(--ink);font-size:14px;font-weight:600;overflow-wrap:anywhere}
.pf-miss{color:#A6B0C0;font-weight:500;font-style:italic}
.pf-ppe{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pf-tile{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF}
.pf-tile strong{display:block;color:var(--ink);font-size:14px}
.pf-tile span{display:block;color:#667085;font-size:12.5px}
.pf-tile span.pill{display:inline-flex;width:auto;margin-top:7px}
.pf-none{padding:10px 14px;border-radius:10px;background:#F6F8FC;color:#4A5A75;font-size:13px}
@media (max-width:620px){ .pf-grid{grid-template-columns:minmax(0,1fr)} .card.pf-head{padding:18px} .av.xl{width:76px;height:76px;font-size:24px} }
/* My Documents and My Certificates tiles */
.dt-sums{display:flex;flex-wrap:wrap;gap:8px}
.dt-sum{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600}
.s-blue{background:#E8F2FD;color:#0A62C2}.s-red{background:#FDECEC;color:#B42318}.s-orange{background:#FFF1E6;color:#B54708}
.dt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.dt-tile{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--line);border-top:4px solid var(--tc,#0A6ED6);border-radius:14px;background:#FFFFFF}
.dt-tile.t-green{--tc:#12B76A}.dt-tile.t-orange{--tc:#F79009}.dt-tile.t-red{--tc:#F04438}
.dt-top{display:flex;align-items:flex-start;gap:12px}
.dt-top strong{display:block;margin-bottom:6px;color:var(--ink);font-size:15px}
.dt-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--blue)}
.dt-ic svg{width:20px;height:20px}
.dt-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px;border-radius:10px;background:#F6F8FC}
.dt-f span{display:block;color:#7A869A;font-size:11.5px}
.dt-f b{display:block;margin-top:2px;color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.dt-f i{color:#A6B0C0;font-weight:500}
.dt-file{font-size:13px;overflow-wrap:anywhere}
.dt-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.dt-acts .btn svg{width:15px;height:15px}
.dt-acts a.btn{text-decoration:none}
/* Date boxes and the calendar */
.dp-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important}
.dp-box{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;height:42px;padding:0 12px;border:1px solid #D1D5DB;border-radius:8px;background:#FFFFFF;color:var(--ink);font:inherit;font-weight:500;text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.dp-box:hover{border-color:#9EB9DC}
.dp-box:focus-visible{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,78,120,.09)}
.dp-box.empty .dp-txt{color:#98A2B3;font-weight:400}
.dp-box svg{flex:none;width:17px;height:17px;color:var(--blue)}
.dp-box:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.dp-txt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lf-paper .dp-box{flex:0 0 150px;width:150px;height:28px;padding:0 8px;border:1px dashed #9AA4B2;border-radius:5px;font-size:13.5px;font-weight:600}
.lf-paper .dp-box svg{width:14px;height:14px}
.dp-pop{position:fixed;z-index:1000;width:300px;padding:12px;border:1px solid #E3EAF4;border-radius:14px;background:#FFFFFF;box-shadow:0 18px 40px rgba(6,30,70,.22);color:var(--ink)}
.dp-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.dp-head select{flex:1 1 auto;width:auto;height:34px;padding:0 8px;border-radius:8px;font-weight:600;font-size:13.5px}
.dp-head select[data-dp-y]{flex:0 0 84px}
.dp-nav{flex:none;width:32px;height:32px;border:1px solid #E3EAF4;border-radius:8px;background:#FFFFFF;color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.dp-nav:hover{background:#F1F5FB}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-grid span{padding:3px 0;color:#7A869A;font-size:11.5px;font-weight:600;text-align:center}
.dp-d{height:30px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.dp-d:hover{background:#EAF3FE}
.dp-d.out{color:#B4BCC8}
.dp-d.today{box-shadow:inset 0 0 0 1.5px var(--blue);font-weight:700}
.dp-d.on{background:var(--blue);color:#FFFFFF;font-weight:700}
.dp-d:disabled{color:#D0D5DD;background:none;cursor:not-allowed}
.dp-foot{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #EEF1F6}
.dp-foot button{border:0;background:none;color:var(--blue);font:inherit;font-weight:600;font-size:13px;cursor:pointer;padding:4px 6px;border-radius:6px}
.dp-foot button:hover{background:#EAF3FE}
.dp-foot button:disabled{color:#B4BCC8;cursor:not-allowed}
/* My Leave: the Apply for Leave card (the form itself opens in a large box) */
.card.lv-cta{display:flex;flex-direction:row;align-items:center;gap:18px;padding:20px 24px;background:linear-gradient(90deg,#FFFFFF 0%,#F2F8FF 100%)}
.lv-cta-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--blue)}
.lv-cta-ic svg{width:26px;height:26px}
.lv-cta h2{font-size:17px;color:var(--ink)}
.lv-cta p{margin:4px 0 0;color:#4A5A75;font-size:13.5px}
.lv-cta .btn{height:44px;padding:0 22px}
@media (max-width:620px){ .card.lv-cta{flex-wrap:wrap} .lv-cta .btn{width:100%;justify-content:center} }
/* Bottom of the leave form: note, attachment, summary and buttons */
.lv-extra{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.lv-box{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#FAFCFF}
.lv-box-h{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:13.5px;font-weight:700}
.lv-box-h svg{width:16px;height:16px;color:var(--blue)}
.lv-box-h em{color:#7A869A;font-style:normal;font-weight:500;font-size:12.5px}
.lv-box-h em.req{color:#B42318;font-weight:600}
.lv-box textarea{min-height:76px;resize:vertical;background:#FFFFFF}
.lv-drop{cursor:pointer}
.lv-drop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.lv-drop-in{display:flex;align-items:center;gap:12px;flex:1;min-height:76px;padding:12px 14px;border:1.5px dashed #A9C4E8;border-radius:12px;background:#FFFFFF;transition:border-color .2s,background .2s}
.lv-drop:hover .lv-drop-in,.lv-drop:focus-within .lv-drop-in{border-color:var(--blue);background:#F2F8FF}
.lv-drop.has .lv-drop-in{border-style:solid;border-color:#12B76A;background:#F0FBF5}
.lv-drop-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--blue)}
.lv-drop.has .lv-drop-ic{background:#DCFAE6;color:#067647}
.lv-drop-ic svg{width:20px;height:20px}
.lv-drop-in b{display:block;color:var(--ink);font-size:13.5px;overflow-wrap:anywhere}
.lv-drop-in span span{display:block;color:#7A869A;font-size:12px;font-weight:500}
.lv-foot{position:sticky;bottom:-26px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 -26px -26px;padding:14px 26px;border-top:1px solid var(--line);background:#FFFFFF;box-shadow:0 -8px 20px rgba(16,40,90,.06)}
.lv-foot .btn{height:44px}
.lv-sum{display:flex;flex-wrap:wrap;gap:8px}
.lv-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#EEF4FC;color:#24406A;font-size:13px}
.lv-chip svg{width:15px;height:15px;color:var(--blue)}
.lv-chip.ok{background:#ECFDF3;color:#067647}.lv-chip.ok svg{color:#12B76A}
.lv-chip.bad{background:#FEF3F2;color:#B42318}.lv-chip.bad svg{color:#F04438}
@media (max-width:760px){ .lv-extra{grid-template-columns:minmax(0,1fr)} .lv-foot{padding:12px 26px} .lv-foot .row{width:100%} .lv-foot .btn{flex:1;justify-content:center} }
/* Requests page */
.rq-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
.rq-label{color:var(--ink);font-size:13.5px;font-weight:700}
.rq-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rq-tile{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#FFFFFF;cursor:pointer;font-weight:400;transition:border-color .15s,background .15s}
.rq-tile:hover{border-color:#A9C4E8}
.rq-tile input{position:absolute;opacity:0;pointer-events:none}
.rq-tile b{display:block;color:var(--ink);font-size:13.5px}
.rq-tile .grow > span{display:block;color:#7A869A;font-size:12px}
.rq-tile:has(input:checked){border-color:var(--blue);background:#F2F8FF;box-shadow:0 0 0 3px rgba(10,110,214,.10)}
.rq-tile:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.rq-tick{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #D0D5DD;color:transparent}
.rq-tick svg{width:13px;height:13px}
.rq-tile:has(input:checked) .rq-tick{border-color:var(--blue);background:var(--blue);color:#FFFFFF}
.rq-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--blue)}
.rq-ic svg{width:19px;height:19px}
.rq-label textarea{margin-top:6px;min-height:80px;resize:vertical;font-weight:400}
.rq-send{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rq-send .btn{height:44px;padding:0 22px}
.rq-sum{display:flex;gap:8px;flex-wrap:wrap}
.rq-list{display:flex;flex-direction:column;gap:10px}
.rq-card{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-left:4px solid #F79009;border-radius:12px;background:#FFFFFF}
.rq-card.done{border-left-color:#12B76A}
.rq-card b{color:var(--ink);font-size:14px}
.rq-card p{margin:6px 0 0;color:#4A5A75;font-size:13px;overflow-wrap:anywhere}
.rq-when{display:inline-flex;align-items:center;gap:5px;margin-top:8px;color:#7A869A;font-size:12px}
.rq-when svg{width:13px;height:13px}
.rq-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 10px;text-align:center}
.rq-empty .rq-ic{width:56px;height:56px;border-radius:50%}
.rq-empty .rq-ic svg{width:26px;height:26px}
.rq-empty b{color:var(--ink)}
.rq-empty > span:last-child{color:#7A869A;font-size:13px;max-width:280px}
@media (max-width:1180px){ .rq-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:620px){ .rq-tiles{grid-template-columns:minmax(0,1fr)} .rq-send .btn{width:100%;justify-content:center} }

/* Salary slip drawn like the company form */
.sp-paper{min-width:860px;max-width:980px;margin:0 auto;border:1.5px solid #6B7280;background:#FFFFFF;color:#111827;font-size:13px}
.sp-top{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #6B7280}
.sp-top .logo{display:flex;align-items:center;justify-content:center;padding:14px}
.sp-top .logo img{height:44px;width:auto;max-height:none}
.sp-who,.sp-kv{width:100%;border-collapse:collapse}
.sp-who th,.sp-who td,.sp-kv th,.sp-kv td{padding:4px 8px;border:1px solid #6B7280;text-align:left;font-size:12.5px}
.sp-who th,.sp-kv th{width:46%;font-weight:700;background:#FFFFFF;color:#111827;letter-spacing:0;text-transform:none}
.sp-who tr:first-child th,.sp-who tr:first-child td{border-top:0}
.sp-who tr > :last-child{border-right:0}
.sp-bar{padding:3px;background:#000080;color:#FFFFFF;text-align:center;font-weight:700;letter-spacing:.5px}
.sp-two{display:grid;grid-template-columns:1fr 1fr}
.sp-two .sp-kv:first-child th,.sp-two .sp-kv:first-child td{border-left:0}
.sp-two .sp-kv:last-child td{border-right:0}
.sp-strong th,.sp-strong td{font-weight:700}
table.sp-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.sp-grid th,.sp-grid td{padding:3px 8px;border:1px solid #6B7280;border-radius:0!important;font-size:12.5px;text-align:left;background:#FFFFFF;color:#111827;letter-spacing:0;text-transform:none}
.sp-grid thead th{font-weight:700;text-align:center}
.sp-grid tr > :first-child{border-left:0}.sp-grid tr > :last-child{border-right:0}
.sp-grid tbody td{border-top:0;border-bottom:0;height:26px}
.sp-grid tbody tr:hover td{background:#FFFFFF}
.sp-grid .sp-h{font-weight:700}
.sp-amt{text-align:right!important;white-space:nowrap}
.sp-net td{font-weight:700;font-size:13.5px}
.sp-paper input{width:100%;height:24px;padding:0 6px;border:1px dashed #9AA4B2;border-radius:4px;background:#FFFFFF;font-size:12.5px;box-shadow:none}
.sp-paper input:focus{border-style:solid;border-color:var(--blue);background:#EAF3FE}
.sp-amt input{text-align:right}
.sp-paper input.sp-n{display:inline-block;width:54px;text-align:center}
.sp-sign{display:grid;grid-template-columns:repeat(3,1fr)}
.sp-sign > div{display:flex;flex-direction:column;justify-content:space-between;min-height:110px;border-right:1px solid #6B7280;text-align:center}
.sp-sign > div:last-child{border-right:0}
.sp-sign b{padding:3px;border-bottom:1px solid #6B7280;font-style:italic}
.sp-sign span{padding:8px;font-size:12.5px}
.sp-emp{min-height:70px;padding:6px 8px;border-top:1px solid #6B7280;font-style:italic}

/* HR portal: plain white top area instead of the photo banner */
.app:not(.emp) .band{min-height:0;margin-bottom:0;padding:22px 38px 22px;background:#FFFFFF;color:var(--ink);border-bottom:1px solid #E8EEF6}
.app:not(.emp) .band-title{padding-top:30px}
.app:not(.emp) .band-title::before{color:#5B6B85}
.app:not(.emp) .band h1{color:var(--ink);text-shadow:none}
.app:not(.emp) .band h1 span{color:#0A6ED6}
.app:not(.emp) .band-title p{color:#344054;text-shadow:none}
.app:not(.emp) .topsearch input,.app:not(.emp) .bell,.app:not(.emp) .seg,.app:not(.emp) .usermenu summary{border:1px solid #E3EAF4;box-shadow:0 2px 8px rgba(16,40,90,.06)}
.app:not(.emp) .tabsbar{padding-top:16px}
.app:not(.emp) #view{padding-top:22px}
@media (max-width:860px){ .app:not(.emp) .band{padding:14px 16px} .app:not(.emp) .band-title{padding-top:6px} .app:not(.emp) #view{padding-top:14px} }

/* Settings: who approves, payslip, weekend */
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.set-roles{display:flex;flex-direction:column}
.set-role{display:grid;grid-template-columns:240px minmax(0,1fr) 300px;gap:18px;align-items:center;padding:14px 0;border-top:1px solid #EEF1F6}
.set-role:first-child{border-top:0;padding-top:4px}
.set-role > div:first-child b{display:block;color:var(--ink);font-size:14px}
.set-people{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.set-person{display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 6px;border:1px solid var(--line);border-radius:999px;background:#F8FAFD;font-size:13px;font-weight:600;color:var(--ink)}
.set-person em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:#7A869A}
.set-person .av{width:28px;height:28px;font-size:11px}
.set-person .icon-btn{width:26px;height:26px}
.set-add{display:flex;gap:8px}
.set-add select{flex:1;min-width:0}
.set-week{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:1180px){ .set-role{grid-template-columns:minmax(0,1fr)} .form-grid.three{grid-template-columns:minmax(0,1fr)} }
@media (max-width:620px){ .set-week{grid-template-columns:minmax(0,1fr)} }

/* ---------- Settings page: menu on the left, one section on the right ---------- */
.set-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.set-nav{padding:10px;display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
.set-tab{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-radius:12px;background:transparent;text-align:left;cursor:pointer;font:inherit;color:var(--fg)}
.set-tab:hover{background:var(--surface-2)}
.set-tab b{display:block;font-size:14px;color:var(--ink)}
.set-tab .grow > span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.set-tab.on{background:var(--accent-soft)}
.set-tab.on b{color:var(--blue-dark)}
.set-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--neutral-soft);color:var(--navy)}
.set-ic svg{width:18px;height:18px}
.set-tab.on .set-ic{background:var(--accent);color:#fff}
.set-ic.big{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.set-ic.big svg{width:22px;height:22px}
.set-panel{padding:0;overflow:hidden}
.set-head{display:flex;align-items:center;gap:14px;padding:22px 26px;border-bottom:1px solid var(--line)}
.set-head h2{margin:0;font-size:19px;color:var(--ink)}
.set-head p{margin:2px 0 0;color:var(--muted)}
.set-row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:center;padding:18px 26px;border-bottom:1px solid #EEF1F6}
.set-lbl b{display:block;color:var(--ink);font-size:14px}
.set-lbl span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.set-ctl{display:flex;flex-direction:column;gap:10px;min-width:0}
.set-ctl > input{max-width:460px}
.set-val{color:var(--ink)}
.set-sub{padding:18px 26px 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--surface-2);border-bottom:1px solid #EEF1F6}
.set-note{padding:12px 26px;font-size:12.5px;color:var(--muted);background:var(--surface-2);border-bottom:1px solid #EEF1F6}
.set-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 26px;background:var(--surface-2)}
.set-logo{padding:8px 12px!important;border:1px solid var(--line);border-radius:10px;background:#fff;min-height:48px;justify-content:center}
.set-logo img{max-height:36px;width:auto}
.set-money{display:flex;align-items:center;max-width:300px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.set-money span,.set-money em{flex:none;padding:0 12px;font-size:13px;color:var(--muted);font-style:normal;background:var(--surface-2);align-self:stretch;display:flex;align-items:center}
.set-money span{border-right:1px solid var(--line);font-weight:700;color:var(--ink)}
.set-money em{border-left:1px solid var(--line)}
.set-money input{border:0!important;border-radius:0!important;box-shadow:none!important;min-width:0;flex:1;text-align:right}
.set-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;max-width:560px}
.set-add{max-width:460px}
@media (max-width:1100px){ .set-wrap{grid-template-columns:minmax(0,1fr)} .set-nav{position:static;flex-direction:row;overflow-x:auto} .set-tab{flex:none;width:auto} .set-tab .grow > span{display:none} }
@media (max-width:760px){ .set-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px} .set-head,.set-sub,.set-note,.set-foot{padding-left:16px;padding-right:16px} .set-pair{grid-template-columns:minmax(0,1fr)} }

/* ---------- Delete employee ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon-btn.del{color:#98A2B3}
.icon-btn.del:hover{color:var(--bad);background:var(--bad-soft);border-color:var(--bad-line)}
.btn.danger{background:#D92D20;border-color:#D92D20;color:#fff}
.btn.danger:hover{background:#B42318;border-color:#B42318}
.btn.danger-t{color:var(--bad)}

/* ---------- Recruitment: overview card and pipeline stepper ---------- */
.rc-hero{padding:0;overflow:hidden;gap:0}
.rc-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px}
.rc-hero-top h2{margin:0;font-size:18px;color:var(--ink)}
.rc-hero-top p{margin:2px 0 0}
.rc-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);background:var(--surface-2)}
.rc-stat{display:flex;align-items:center;gap:12px;padding:18px 20px;border-left:1px solid var(--line);min-width:0}
.rc-stat:first-child{border-left:0}
.rc-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--tint);color:var(--tone)}
.rc-ic svg{width:19px;height:19px}
.rc-stat div > b{display:block;font-size:24px;line-height:1.05;color:var(--ink)}
.rc-stat div > span{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-top:2px}
.rc-stat div > em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-pipe{display:flex;gap:14px;align-items:stretch}
.rc-all{flex:none;width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:inherit;color:var(--ink)}
.rc-all b{font-size:22px;line-height:1}
.rc-all span{font-size:12.5px;font-weight:700;color:var(--muted)}
.rc-all:hover{border-color:var(--navy)}
.rc-all.on{background:var(--navy);border-color:var(--navy);color:#fff}
.rc-all.on span{color:#DCE6F5}
.rc-steps{flex:1;min-width:0;display:grid;grid-template-columns:repeat(9,minmax(84px,1fr));overflow-x:auto;position:relative;padding:4px 0 2px}
.rc-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px 12px;border:0;border-radius:12px;background:transparent;cursor:pointer;font:inherit;text-align:center}
.rc-step::before{content:"";position:absolute;top:31px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.rc-step:first-child::before{display:none}
.rc-step b{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:color-mix(in srgb,var(--tone) 78%,#000);font-size:16px;border:2px solid #fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 25%,transparent)}
.rc-step span{font-size:12px;font-weight:700;color:#475467;line-height:1.25}
.rc-step:hover{background:var(--surface-2)}
.rc-step.on{background:var(--tint)}
.rc-step.on b{background:var(--tone);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 30%,transparent)}
.rc-step.on span{color:color-mix(in srgb,var(--tone) 80%,#000)}
.rc-showing{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--surface-2);font-size:13px;color:#475467}
.rc-showing svg{width:16px;height:16px;color:var(--accent)}
@media (max-width:1280px){ .rc-stats{grid-template-columns:repeat(3,minmax(0,1fr))} .rc-stat:nth-child(4){border-left:0} .rc-stat:nth-child(n+4){border-top:1px solid var(--line)} }
@media (max-width:760px){ .rc-pipe{flex-direction:column} .rc-all{width:auto;flex-direction:row;padding:10px} .rc-steps{grid-template-columns:repeat(9,92px)} }
@media (max-width:560px){ .rc-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .rc-stat{border-left:1px solid var(--line)!important;border-top:1px solid var(--line)} .rc-stat:nth-child(odd){border-left:0!important} .rc-stat:nth-child(-n+2){border-top:0} .rc-hero-top .row{width:100%} .rc-hero-top .btn{flex:1;justify-content:center} }

/* ---------- Requests: the letter HR gives back ---------- */
.rq-reply{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:var(--ok-soft);color:#14532D;font-size:13px}
.rq-dl{margin-top:8px;align-self:flex-start;display:inline-flex;text-decoration:none}
a.btn{text-decoration:none}
/* the "choose a file" box in dialogs */
.fpick{margin:0}
.fp-btn{flex:none;padding:7px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px;font-weight:700;color:var(--blue)}
.fpick.has .fp-btn{color:#067647;border-color:#A6E4C0}
.fpick .lv-drop-in{min-height:64px}
.rq-card .rq-dl{display:flex;width:max-content;max-width:100%;margin:10px 0 8px}

/* ---------- Employee Master: On Board / Off Board cards ---------- */
.eb-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.eb-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;font:inherit;text-align:left;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .15s,box-shadow .15s}
.eb-card:hover{border-color:var(--tone)}
.eb-card.on{border-color:var(--tone);box-shadow:0 0 0 2px var(--tone) inset;background:var(--tint)}
.eb-card b{display:block;font-size:16px;color:var(--ink)}
.eb-card .grow > span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.eb-card em{font-style:normal;font-size:28px;font-weight:700;color:var(--tone);line-height:1}
.eb-card.on .rc-ic{background:#fff}
@media (max-width:620px){ .eb-sides{grid-template-columns:minmax(0,1fr)} }

/* ---------- Birthday greeting ---------- */
dialog.bday-dlg{width:min(460px,calc(100% - 32px));padding:0;overflow:hidden;border:0}
.bday{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 30px 28px;text-align:center;background:linear-gradient(180deg,#EAF2FD 0%,#FFFFFF 55%);overflow:hidden}
.bday svg{position:relative;z-index:1;margin-top:6px}
.bday h2{position:relative;z-index:1;margin:0!important;font-size:25px!important;color:#04376F!important}
.bd-kicker{position:relative;z-index:1;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E5484D}
.bday p{position:relative;z-index:1;margin:2px 0 4px;font-size:15px;line-height:1.6;color:#344054}
.bd-sign{position:relative;z-index:1;font-size:13px;color:#667085;margin-bottom:6px}
.bd-sign b{display:block;font-size:14px;color:#0F1E3D;margin-top:2px}
.bday .btn{position:relative;z-index:1;min-width:150px;justify-content:center}
.bd-confetti{position:absolute;inset:0;pointer-events:none;z-index:0}
.bd-confetti i{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;opacity:.9;animation:bd-fall linear infinite}
@keyframes bd-fall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.95}70%{opacity:.8}100%{transform:translateY(230px) rotate(540deg);opacity:0}}
.bd-flame{transform-origin:center bottom;animation:bd-flick .9s ease-in-out infinite alternate}
@keyframes bd-flick{from{transform:scale(1,1)}to{transform:scale(.85,1.12)}}
@media (prefers-reduced-motion:reduce){ .bd-confetti i,.bd-flame{animation:none} .bd-confetti{display:none} }

/* ---------- HR Calendar ---------- */
.hc-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.hc-legend{display:flex;flex-wrap:wrap;gap:8px}
.hc-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.hc-chip i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.hc-chip b{min-width:20px;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font-size:11.5px;text-align:center}
.hc-chip.off{opacity:.45;background:var(--surface-2)}
.hc-chip.off i{background:#CBD5E1}
.hc-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hc-h{padding:4px 0;text-align:center;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.hc-d{min-height:104px;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:7px;border:1px solid #EDF0F4;border-radius:10px;background:#fff;font:inherit;text-align:left;cursor:pointer;min-width:0}
.hc-d:hover{border-color:#A9C4E8}
.hc-d.out{background:var(--surface-2);cursor:default;opacity:.55}
.hc-d.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.hc-n{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px}
.hc-d.today .hc-n{align-self:flex-start;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff}
.hc-d i{display:block;font-style:normal;font-size:11px;font-weight:600;line-height:1.35;padding:2px 6px;border-radius:5px;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);color:color-mix(in srgb,var(--c) 80%,#000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-d i.hc-more{border-left-color:transparent;background:none;color:var(--muted);padding-left:2px}
.hc-list{display:flex;flex-direction:column;gap:8px}
.hc-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;background:#fff}
.hc-item b{display:block;font-size:13px;color:var(--ink)}
.hc-item .grow > span{display:block;font-size:12.5px;color:#475467;margin-top:1px}
.hc-ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.hc-ic svg{width:16px;height:16px}
.hc-side{position:sticky;top:16px}
@media (max-width:1280px){ .hc-grid{grid-template-columns:minmax(0,1fr)} .hc-side{position:static} }
@media (max-width:700px){ .hc-cal{gap:3px} .hc-d{min-height:58px;padding:4px} .hc-d i{font-size:0;padding:0;height:6px;border-left-width:0;background:var(--c)} .hc-d i.hc-more{display:none} .hc-h{font-size:10px} }

/* ---------- Reports ---------- */
.rp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rp-bars{display:flex;flex-direction:column;gap:10px}
.rp-bar{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) 34px;align-items:center;gap:12px;font-size:13px}
.rp-k{color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-track{height:12px;border-radius:999px;background:#EEF2F7;overflow:hidden}
.rp-track i{display:block;height:100%;border-radius:999px}
.rp-bar b{text-align:right;color:var(--ink)}
.rp-split{display:flex;gap:16px;flex-wrap:wrap;padding-top:6px;border-top:1px solid #EEF1F6;font-size:13px;color:#475467}
.rp-split b{color:var(--ink);font-size:15px}
.rp-t{width:100%;min-width:640px}
.rp-total td{font-weight:700;background:var(--accent-soft);color:var(--ink)}
@media (max-width:1100px){ .rp-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .rp-bar{grid-template-columns:90px minmax(0,1fr) 28px;gap:8px} }
.rc-stat div > b small{font-size:13px;font-weight:700;color:var(--muted)}
.dt-acts .dt-del{margin-left:auto}

/* ---------- Settings: Change History ---------- */
.au-bar{display:grid;grid-template-columns:minmax(0,1fr) 230px auto auto;gap:10px;align-items:center;padding:16px 26px;border-bottom:1px solid #EEF1F6}
.au-bar .topsearch{width:auto}
.au-bar select,.au-bar .btn{height:40px}
.au-list{display:flex;flex-direction:column}
.au-row{display:flex;gap:14px;padding:14px 26px;border-bottom:1px solid #EEF1F6}
.au-dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;background:#1F6FD0}
.au-dot.c-doc{background:#C84C4C} .au-dot.c-leave{background:#1B8A5A} .au-dot.c-pay{background:#6B4FD3} .au-dot.c-rec{background:#17807D} .au-dot.c-req{background:#D9691F} .au-dot.c-set{background:#667085}
.au-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.au-top b{color:var(--ink);font-size:14px}
.au-target{font-size:13px;color:var(--blue-dark);font-weight:600}
.au-det{margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--surface-2);font-size:12.5px;line-height:1.6;color:#344054}
.au-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--muted)}
.au-meta svg{width:13px;height:13px}
@media (max-width:760px){ .au-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:14px 16px} .au-bar .topsearch{grid-column:1/-1} .au-row{padding:12px 16px} }

/* ---------- HR dashboard: Today box ---------- */
.tb{gap:14px}
.tb-top h2{margin:0;font-size:18px;color:var(--ink)}
.tb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tb-col{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid #EDF0F4;border-radius:12px;background:#FBFCFE;min-width:0}
.tb-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tb-h b{font-size:14px;color:var(--ink);line-height:1.25}
.tb-h em{margin-left:auto;font-style:normal;font-weight:700;font-size:12.5px;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--blue-dark)}
.tb-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px}
.tb-it{display:flex;align-items:center;gap:9px;width:100%;padding:8px 6px;border:0;border-top:1px solid #EEF1F6;background:none;font:inherit;text-align:left;cursor:pointer;border-radius:8px;min-width:0}
.tb-it:hover{background:#F1F6FD}
.tb-it .av{width:28px;height:28px;font-size:11px;flex:none}
.tb-it b{display:block;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-it .grow{min-width:0}
.tb-it .grow > span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-none{padding:10px 6px;border-top:1px solid #EEF1F6;font-size:13px;color:var(--muted)}
.tb-more{padding:6px 6px 0;font-size:12px;color:var(--muted)}
.tb-link{margin-top:auto;padding:8px 6px 0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--link);text-align:left;cursor:pointer}
@media (max-width:1280px){ .tb-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .tb-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- Upload several documents ---------- */
.bu-drop .lv-drop-in{min-height:84px}
.bu-t{width:100%;min-width:640px;margin-top:4px}
.bu-t td{vertical-align:middle}
.bu-t select,.bu-t input{width:100%;min-width:120px;height:38px}
.bu-name{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
select.bu-miss{border-color:#E5484D;color:#B42318}