/* VGROUP HR – corporate premium theme (Manrope, navy + corporate blue) */
:root{
  --navy:#163A63; --navy-d:#102A43; --blue:#2563EB; --blue-d:#1D4ED8; --blue-l:#EFF6FF; --blue-m:#DBEAFE;
  --bg:#F5F7FA; --paper:#FFFFFF; --soft:#F8FAFC; --ink:#172B4D; --muted:#64748B; --line:#E2E8F0; --line-2:#CBD5E1;
  --ok:#15803D; --ok-l:#DCFCE7; --warn-c:#D97706; --warn-d:#B45309; --warn-l:#FEF3C7; --err:#DC2626; --err-d:#B91C1C; --err-l:#FEE2E2; --info:#475569; --info-l:#F1F5F9;
  /* status colours used by badges, tiles, bars and the timeline */
  --none:#94A3B8; --draft:#94A3B8; --submitted:#D97706; --verified:#2563EB; --approved:#15803D; --returned:#DC2626; --hr_returned:#EA580C; --warn:#FEF3C7;
  --side-w:256px; --side-mini:76px; --top-h:64px; --r:10px; --r-sm:8px;
  --sh:0 1px 2px rgba(16,42,67,.05),0 1px 3px rgba(16,42,67,.04); --sh-h:0 4px 14px rgba(16,42,67,.08);
  font-family:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink); font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-weight:500;font-size:14px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;background:var(--paper);width:100%;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#94A3B8;font-weight:400}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
input[readonly]{background:var(--soft)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
button{border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);padding:8px 15px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--ink);transition:background .15s,border-color .15s,color .15s}
button:hover{border-color:var(--line-2);background:var(--soft)}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
button.primary:hover{background:var(--blue-d);border-color:var(--blue-d)}
button.danger{color:var(--err);border-color:#FECACA}
button.danger:hover{border-color:var(--err);background:var(--err-l)}
button.link{border:0;background:none;color:var(--blue);text-decoration:none;padding:2px 4px;font-weight:600}
button.link:hover{text-decoration:underline;background:none}
label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:13.5px}
label.check input{width:auto;accent-color:var(--blue)}
input[type=checkbox]{accent-color:var(--blue)}
[hidden]{display:none!important}
h2{font-size:16px;font-weight:700;margin:0 0 14px;letter-spacing:-.1px}
.muted{color:var(--muted);font-weight:400}
.empty{padding:36px;text-align:center;color:var(--muted);background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--r)}
.loading{color:var(--muted);padding:20px 0}
.eyebrow{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.warn-txt{color:var(--err);font-weight:600}
svg.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
svg.ic.sm{width:16px;height:16px}

/* ---------- App frame: navy sidebar + white top bar ---------- */
.side{position:fixed;top:0;bottom:0;left:0;width:var(--side-w);background:var(--navy-d);color:#CBD5E1;display:flex;flex-direction:column;z-index:35;transition:width .2s ease,transform .2s ease;overflow:hidden}
.side-brand{display:flex;align-items:center;gap:12px;height:var(--top-h);padding:0 20px;border-bottom:1px solid rgba(255,255,255,.07);flex:none}
.side-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-brand b{color:#fff;font-size:15.5px;font-weight:800;letter-spacing:.4px}
.side-brand small,.side-user small{font-size:12px;color:#94A3B8;font-weight:500}
.logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--blue);color:#fff;font-weight:800;font-size:18px;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.logo.big{width:56px;height:56px;font-size:28px;border-radius:13px}
.side nav{flex:1;padding:14px 12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.nav-group + .nav-group{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.nav-head{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 10px;border-radius:6px;font-weight:700;color:#7C8DA6;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;text-align:left}
.nav-head:hover{background:none;color:#CBD5E1}
.nav-head .chev{margin-left:auto;transition:transform .15s;width:14px;height:14px}
.nav-group:not(.open) .chev{transform:rotate(-90deg)}
.nav-group:not(.open) .nav-items{display:none}
.nav-items{padding:4px 0 0}
.side .nav-items a{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:2px 0;border-radius:var(--r-sm);color:#CBD5E1;text-decoration:none;font-weight:600;font-size:14px;position:relative;white-space:nowrap}
.side .nav-items a svg{color:#8FA1BA}
.side .nav-items a:hover{background:rgba(255,255,255,.06);color:#fff}
.side .nav-items a:hover svg{color:#fff}
.side .nav-items a.on{background:rgba(37,99,235,.22);color:#fff}
.side .nav-items a.on svg{color:#93C5FD}
.side .nav-items a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#60A5FA}
.side .nav-items a span{flex:1;overflow:hidden;text-overflow:ellipsis}
.count{background:var(--err);color:#fff;border-radius:10px;font-size:11.5px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center;line-height:17px}
.side-foot{flex:none;padding:10px 12px 14px;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:6px}
.side-collapse{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;color:#8FA1BA;padding:8px 12px;font-weight:600;font-size:13px;text-align:left;white-space:nowrap}
.side-collapse:hover{background:rgba(255,255,255,.06);color:#fff}
.side-collapse .pl-open{display:none}
.side-user{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-sm);text-decoration:none;color:#fff;background:rgba(255,255,255,.04)}
.side-user:hover{background:rgba(255,255,255,.09)}
.side-user b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue-m);color:var(--navy);font-weight:800;font-size:12.5px;flex:none;letter-spacing:.3px}
.side .avatar{background:#1E4A7A;color:#fff}

/* collapsed sidebar (desktop only) */
@media (min-width:901px){
  body.side-mini{--side-w:var(--side-mini)}
  body.side-mini .side-txt,body.side-mini .nav-head,body.side-mini .side .nav-items a span,body.side-mini .side .count{display:none}
  body.side-mini .side-brand{padding:0;justify-content:center}
  body.side-mini .nav-group:not(.open) .nav-items{display:block}
  body.side-mini .side .nav-items a{justify-content:center;padding:10px 0}
  body.side-mini .side .nav-items a.has-count::after{content:"";position:absolute;top:7px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--err)}
  body.side-mini .side-collapse{justify-content:center;padding:9px 0}
  body.side-mini .side-collapse .pl-close{display:none} body.side-mini .side-collapse .pl-open{display:inline}
  body.side-mini .side-user{justify-content:center;padding:8px 0;background:none}
  body.side-mini .nav-group + .nav-group{margin-top:8px;padding-top:8px}
}

.top{position:fixed;top:0;right:0;left:var(--side-w);height:var(--top-h);display:flex;align-items:center;gap:14px;background:var(--paper);border-bottom:1px solid var(--line);padding:0 24px;z-index:30;transition:left .2s ease}
.menu-btn{display:none;background:none;border:0;color:var(--ink);padding:7px;border-radius:var(--r-sm)}
.menu-btn:hover{background:var(--soft)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600;min-width:0;flex:1;white-space:nowrap;overflow:hidden}
.crumbs span{overflow:hidden;text-overflow:ellipsis}
.crumbs b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.crumbs svg{width:14px;height:14px;color:#94A3B8;flex:none}
.who{position:relative}
.who-btn{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);padding:5px 8px 5px 5px;border-radius:999px;font-weight:600}
.who-btn:hover{background:var(--soft)}
.who-txt{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.who-txt b{font-size:13.5px}
.who-txt small{color:var(--muted);font-size:12px;font-weight:500}
.who-btn > svg{color:var(--muted)}
.who-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 16px 40px rgba(16,42,67,.16);min-width:240px;padding:6px;z-index:40}
.who-head{margin:0 0 4px;padding:9px 10px 11px;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.who-head small{color:var(--muted);font-size:12.5px}
.who-menu a,.who-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border:0;background:none;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:600;font-size:13.5px}
.who-menu a svg,.who-menu button svg{color:var(--muted)}
.who-menu a:hover,.who-menu button:hover{background:var(--blue-l);color:var(--blue-d)}
.scrim{position:fixed;inset:0;background:rgba(16,42,67,.45);z-index:34}

/* quick search */
.qs{position:relative;display:flex;align-items:center;width:min(340px,32vw);flex:none}
.qs > svg{position:absolute;left:11px;color:#94A3B8;pointer-events:none;width:16px;height:16px}
.qs input{padding:8px 34px 8px 34px;background:var(--soft);border-color:var(--line);font-size:13.5px;border-radius:9px}
.qs input:focus{background:#fff}
.qs input::-webkit-search-cancel-button{display:none}
.qs kbd{position:absolute;right:9px;font:600 11px/1 "Manrope",sans-serif;color:#94A3B8;border:1px solid var(--line);border-radius:5px;padding:3px 6px;background:#fff;pointer-events:none}
.qs input:focus ~ kbd{display:none}
.qs-box{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 16px 40px rgba(16,42,67,.16);padding:6px;z-index:45;max-height:420px;overflow:auto;min-width:300px}
.qs-box p{margin:6px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#94A3B8}
.qs-box a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600}
.qs-box a small{margin-left:auto;color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap}
.qs-box a svg{color:var(--muted)}
.qs-box a.on,.qs-box a:hover{background:var(--blue-l);color:var(--blue-d)}
.qs-box a.on svg{color:var(--blue)}
.qs-box .none{padding:14px 10px;color:var(--muted);font-size:13px}

main{margin-left:var(--side-w);padding:calc(var(--top-h) + 26px) 32px 48px;max-width:calc(1560px + var(--side-w));transition:margin-left .2s ease}
.page-head{margin-bottom:20px}
.page-head h1{font-size:28px;font-weight:700;margin:0;letter-spacing:-.4px;line-height:1.25}
.page-head p{margin:4px 0 0}

/* ---------- Building blocks ---------- */
.bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.bar label{min-width:170px}
.bar > p{margin:0 0 9px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:0 0 18px;box-shadow:var(--sh)}
.card.flush{padding:0;overflow:hidden}
.card.flush .empty{border:0}
fieldset.card{min-width:0}
legend{font-weight:700;font-size:16px;padding:0 6px}
.head{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.head .wide{grid-column:1/-1}
.head label{justify-content:flex-end}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.two>.card{display:flex;flex-direction:column;gap:12px}
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:12px}
.actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.actions.sticky,.review.sticky{position:sticky;bottom:0;z-index:5}
.actions.sticky{background:linear-gradient(transparent,var(--bg) 30%);padding:14px 0 6px}
.review.sticky{box-shadow:0 -8px 24px rgba(16,42,67,.08);border-color:var(--blue-m)}
.row-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.status-line{margin-bottom:6px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.note{padding:11px 14px;border-radius:var(--r-sm);background:var(--info-l);margin:10px 0;border:1px solid var(--line)}
.note.bad{background:var(--err-l);color:var(--err-d);border-color:#FECACA}
.note.good{background:var(--ok-l);color:var(--ok);border-color:#BBF7D0}
.summary{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-sm);padding:11px 16px;margin:0 0 16px;box-shadow:var(--sh)}
.period{font-weight:700;margin-right:8px}
p.period{margin:0 0 12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.count-line{margin:0 0 8px}
.callout{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--blue-l);border:1px solid var(--blue-m);border-radius:var(--r);padding:14px 18px;margin-bottom:16px;color:var(--navy)}
.callout span{display:block}
.back{padding-left:0}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.detail-head h2{font-size:20px;margin:2px 0 4px}

/* Segmented control */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;background:var(--soft);padding:3px;gap:2px}
.seg button{border:0;border-radius:7px;padding:6px 14px;color:var(--muted);background:none;font-size:13px}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.seg button.on{background:#fff;color:var(--blue-d);box-shadow:0 1px 2px rgba(16,42,67,.1),0 0 0 1px var(--line)}

/* Status badges: soft pills */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--info);background:var(--info-l);white-space:nowrap;line-height:1.5}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.badge.draft{color:#475569;background:#F1F5F9}
.badge.submitted{color:var(--warn-d);background:var(--warn-l)}
.badge.verified{color:var(--blue-d);background:var(--blue-m)}
.badge.approved{color:var(--ok);background:var(--ok-l)}
.badge.returned{color:var(--err-d);background:var(--err-l)}
.badge.hr_returned{color:#C2410C;background:#FFEDD5}
.badge.none{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.badge.none::before{background:#CBD5E1}
a .badge{text-decoration:none}
a:hover .badge{filter:brightness(.97)}
.step{font-weight:700}
.step.area_approved{color:var(--blue-d)} .step.hr_approved{color:var(--ok)} .step.returned,.step.reopened{color:var(--err)} .step.submitted{color:var(--warn-d)}
.pill{display:inline-flex;align-items:center;margin-left:8px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--info-l);color:var(--info)}
.pill.done{background:var(--ok-l);color:var(--ok)}
.pill.bad{background:var(--err-l);color:var(--err-d)}

/* KPI cards / dashboard tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:16px;margin-bottom:20px}
.tiles.two{grid-template-columns:1fr 1fr}
.tiles.kpi{grid-template-columns:repeat(var(--n,6),1fr)}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;box-shadow:var(--sh);transition:box-shadow .2s,transform .2s,border-color .2s;position:relative;min-height:128px}
.tile:hover{box-shadow:var(--sh-h);border-color:var(--line-2)}
.tile span{font-size:13px;color:var(--muted);font-weight:600}
.tile:has(.k-ic) > span{padding-right:44px}
.tile b{font-size:30px;font-weight:700;line-height:1.15;margin:10px 0 4px;letter-spacing:-.6px;color:var(--ink)}
.tile small{color:var(--muted);font-size:12.5px;font-weight:500}
.tile .k-ic{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--blue-l);color:var(--blue)}
.tile .k-ic svg{width:19px;height:19px}
.tile.approved .k-ic{background:var(--ok-l);color:var(--ok)} .tile.verified .k-ic{background:var(--blue-l);color:var(--blue)}
.tile.submitted .k-ic{background:var(--warn-l);color:var(--warn-c)} .tile.returned .k-ic{background:var(--err-l);color:var(--err)}
.tile.none .k-ic{background:var(--info-l);color:var(--info)} .tile.navy .k-ic{background:#E0E7F1;color:var(--navy)}
.tile.hr_returned .k-ic{background:#FFEDD5;color:#EA580C}
.tile-big h2{font-size:20px;margin:4px 0 10px}
.card>.badge{align-self:flex-start}
.tiles.three{grid-template-columns:repeat(3,1fr)}
.tiles.three>.card{display:flex;flex-direction:column;gap:6px;margin:0}
.tiles.three>.card .actions{margin-top:auto}
.tiles.four{grid-template-columns:repeat(3,1fr)}
.tiles.six{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.grid.others input[data-f=description]{min-width:220px;text-align:left}
.grid.others input[data-f=amount]{min-width:110px}
.neg,.grid input.neg{color:var(--err)}
.grid th.ex{background:#EEF2F7}
.grid td.ex{background:#F8FAFC}

/* HR review, reconciliation flags, returned rows */
.stack .hr_returned,.legend .hr_returned{background:var(--hr_returned)}
.step.hr_returned{color:var(--hr_returned)} .step.am_resubmitted{color:var(--warn-d)} .step.admin_edit{color:var(--navy)} .step.processed{color:var(--ok)}
.timeline li.hr_returned::before{background:var(--hr_returned)} .timeline li.processed::before{background:var(--ok)} .timeline li.admin_edit::before{background:var(--navy)}
.flag{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;font-size:11.5px;font-weight:700;text-align:center;color:#fff;background:var(--blue);cursor:default}
.flag.error{background:var(--err)} .flag.warn{background:var(--warn-c)} .flag.info{background:var(--blue)}
.flags ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.flags li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
tr.f-error td{background:#FEF2F2} tr.f-warn td{background:#FFFBEB}
tr.ret td{background:#FFF7ED!important} tr.ret td:first-child{box-shadow:inset 3px 0 0 var(--hr_returned)}
.lines-am tr.ret input{background:#fff;border-color:var(--hr_returned)}
td.c{text-align:center} td.c input{width:18px;height:18px}
.lines-hr input[data-m=hr_note]{min-width:180px}
.card.process{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-left:3px solid var(--blue)}
.card.process h2{margin:0 0 2px}
.card.process.is-done{border-left-color:var(--ok);background:#F7FDF9}
button:disabled{opacity:.5;cursor:not-allowed}
.rep-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.rep-pick button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;border-radius:var(--r);font-weight:400;box-shadow:var(--sh)}
.rep-pick button b{font-size:14.5px;font-weight:700}
.rep-pick button span{color:var(--muted);font-size:12.5px;line-height:1.45}
.rep-pick button:hover{background:#fff;border-color:var(--line-2)}
.rep-pick button.on{border-color:var(--blue);background:var(--blue-l);box-shadow:0 0 0 1px var(--blue)}
.rep-pick button.on b{color:var(--blue-d)}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-6px 0 22px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:10px 14px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color .15s}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--blue-d);border-bottom-color:var(--blue)}
.login-side h1{font-size:28px;letter-spacing:.5px;margin:22px 0 4px;font-weight:800}
.login-side p{font-size:15px}

/* Notifications */
.bell{position:relative}
.bell-btn{position:relative;background:none;border:0;color:var(--muted);padding:9px;border-radius:9px;display:flex}
.bell-btn:hover{background:var(--soft);color:var(--ink)}
.bell-btn svg{width:20px;height:20px}
.bell-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
.bell-count.act{background:var(--err)}
.bell-panel{position:absolute;right:-60px;top:calc(100% + 10px);width:min(390px,92vw);max-height:70vh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 16px 40px rgba(16,42,67,.16);z-index:45}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper)}
.bell-panel .empty{border:0;margin:0}
a.nt{display:flex;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
a.nt:hover{background:var(--soft)}
a.nt.read{opacity:.62}
a.nt.open{background:#FFF8F8;opacity:1}
.nt-ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12.5px;background:var(--blue-l);color:var(--blue)}
.nt.action .nt-ic{background:var(--err-l);color:var(--err)}
.nt.warning .nt-ic{background:var(--warn-l);color:var(--warn-d)}
.nt-tx{display:flex;flex-direction:column;gap:1px;font-size:13.5px}
.nt-tx em{font-style:normal;font-size:11px;font-weight:800;color:var(--err);text-transform:uppercase;letter-spacing:.6px}
.nt-tx em.done{color:var(--ok)}
.nt-tx small{font-size:12.5px;color:var(--ink)}
.nt-tx small.muted{color:var(--muted)}
.tracker .na .dot{border-style:dashed;color:var(--muted)}
.tracker .na small{font-style:italic}
label.tickall{flex-direction:row;align-items:center;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap}
label.tickall input{width:auto}
.actions.spread{justify-content:space-between;align-items:center;margin:0}
.actions.spread p{margin:0}
.st-note{min-width:200px}
th.c{text-align:center}

/* Entry settings editor (departments / branches) */
.cfg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:4px 0 8px}
.cfg fieldset{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 13px 11px;margin:0;display:flex;flex-direction:column;gap:5px;background:var(--soft)}
.cfg legend{font-size:12.5px;color:var(--muted);padding:0 4px}
.cfg label.check{font-weight:600;font-size:13.5px}
h3.sub-h{font-size:14px;margin:12px 0 6px;color:var(--muted);font-weight:700}

/* Branch target vs staff targets check, duty days over the period */
.tgt-check{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;font-weight:600;font-size:13.5px}
.tgt-check:empty{display:none}
.tgt-check .ok{color:var(--ok)}
.tgt-check .bad{color:var(--err)}
input.over{border-color:var(--err);background:#FEF2F2;color:var(--err)}

/* Accounts returns rows to PRO */
small.ret-why{display:block;color:var(--err);font-size:12px;white-space:normal;max-width:260px}
tr.resub td{background:#F7FDF9}
.returned-box{border-color:#FECACA}
.return-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--line);background:var(--soft)}
.return-bar label{flex:1;min-width:240px}
.return-bar p{margin:0 0 8px}
ul.plog{margin:0;padding-left:18px;display:grid;gap:4px}

/* Employee search (code or name) */
.emp-box{position:absolute;z-index:60;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 12px 30px rgba(16,42,67,.16);max-height:280px;overflow:auto;padding:4px}
.emp-box div{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13.5px;white-space:nowrap}
.emp-box div:hover,.emp-box div.on{background:var(--blue-l);color:var(--blue-d)}
.emp-box .muted{font-size:12px}
.combo{position:relative}
.combo-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 12px 30px rgba(16,42,67,.16);max-height:280px;overflow:auto;padding:4px}
.combo-list div{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13.5px;color:var(--ink);font-weight:500}
.combo-list div:hover,.combo-list div.on{background:var(--blue-l);color:var(--blue-d)}
.combo-list div.muted{color:var(--muted)}
.combo-list p{margin:0;padding:8px 10px;font-size:13px}
small.pick-name{font-weight:600;color:var(--ink);min-height:1em}

/* PRO module */
h2.sec{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:0 0 12px;font-weight:700}
.wallets{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.wallet{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;box-shadow:var(--sh);position:relative;overflow:hidden}
.wallet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ok)}
.wallet span{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
.wallet b{font-size:22px;font-weight:700;margin:4px 0 2px;letter-spacing:-.3px}
.wallet small{color:var(--muted);font-size:12px}
.wallet.neg{background:#FFFBFB;border-color:#FECACA}
.wallet.neg::before{background:var(--err)}
.wallet.neg b,.wallet.neg small{color:var(--err)}
.actions.left{justify-content:flex-start}
.pentry select{min-width:150px}
.pentry input[data-f=amount]{min-width:110px;text-align:right}
.pentry input[data-f=remarks],.pentry input[data-f=description]{min-width:200px}
.pentry .name{min-width:160px}
td.miss{background:var(--warn-l)!important;color:var(--warn-d);font-weight:700;text-align:center;font-size:12px}
td.earlier{color:var(--ok);text-align:center;font-size:12px}
.legend i.miss{background:var(--warn-l);border:1px solid #FCD34D}
table.pivot th{white-space:normal;min-width:80px;vertical-align:bottom}
tr.picked td{background:var(--blue-l)!important}
tr.sub td{background:var(--soft);font-weight:700}
tr.negbal td:nth-child(6){color:var(--err);font-weight:700}
tr.confirmed td{color:var(--muted)}
.dayhead{margin:0;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.card.day{margin-bottom:14px}
.stack{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#EEF2F6;min-width:140px}
.stack i,.legend i{display:block;background:var(--none)}
.stack .approved,.legend .approved{background:var(--approved)} .stack .verified,.legend .verified{background:var(--verified)}
.stack .submitted,.legend .submitted{background:var(--submitted)} .stack .returned,.legend .returned{background:var(--returned)}
.stack .draft,.legend .draft{background:#CBD5E1} .stack .none,.legend .none{background:#E2E8F0}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px}
table.regions tbody tr{cursor:pointer}
table.regions tr.sel td{background:var(--blue-l)}
td.w{width:30%}

/* Approval step tracker */
.tracker{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tracker li{display:flex;gap:10px;align-items:flex-start;position:relative;padding-right:14px}
.tracker li:not(:last-child)::after{content:"";position:absolute;top:14px;left:40px;right:8px;height:2px;background:var(--line)}
.tracker li.done:not(:last-child)::after{background:var(--ok)}
.tracker .dot{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--paper);font-weight:700;font-size:12.5px;color:var(--muted);position:relative;z-index:1}
.tracker div{background:var(--paper);position:relative;z-index:1;padding-right:8px;margin-top:3px}
.tracker b{display:block;font-size:13.5px}
.tracker small{display:block;color:var(--muted);font-size:12px}
.tracker .done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.tracker .now .dot{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px var(--blue-l)}
.tracker .now small{color:var(--blue-d);font-weight:600}
.tracker .back .dot{background:var(--err);border-color:var(--err);color:#fff}
.tracker .back small{color:var(--err);font-weight:600}

/* History timeline */
.timeline summary{cursor:pointer;font-weight:700}
.timeline ul{list-style:none;margin:14px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 14px 12px}
.timeline li::before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--submitted);box-shadow:0 0 0 3px var(--paper)}
.timeline li.area_approved::before{background:var(--verified)} .timeline li.hr_approved::before{background:var(--approved)}
.timeline li.returned::before,.timeline li.reopened::before{background:var(--returned)}
.timeline li p{margin:5px 0 0;background:var(--soft);padding:7px 11px;border-radius:var(--r-sm);border:1px solid var(--line)}

/* ---------- Tables ---------- */
.scroll{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;background:var(--paper);font-size:13.5px}
th,td{border-bottom:1px solid #EEF2F6;padding:11px 14px;text-align:left;white-space:nowrap;vertical-align:middle}
th{font-size:12px;color:var(--muted);background:var(--soft);position:sticky;top:0;font-weight:700;letter-spacing:.2px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
td.wrap{white-space:normal;min-width:180px}
table.list tbody tr:hover td,table.ptab tbody tr:hover td,table.grid.ro tbody tr:hover td{background:#F8FAFF}
table.list tr.off td,table.ptab tr.off td{color:#94A3B8}
table td button{padding:5px 12px;font-size:12.5px}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sortable::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border:4px solid transparent;border-top-color:#CBD5E1;transform:translateY(2px)}
th.sortable[aria-sort=ascending]::after{border-top-color:transparent;border-bottom-color:var(--blue);transform:translateY(-2px)}
th.sortable[aria-sort=descending]::after{border-top-color:var(--blue)}
th.sortable[aria-sort=ascending],th.sortable[aria-sort=descending]{color:var(--blue-d)}
th.n.sortable::after{margin-left:6px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);background:var(--paper);font-size:13px;color:var(--muted)}
.pager .pg{display:flex;gap:4px;align-items:center}
.pager button{min-width:32px;height:32px;padding:0 9px;font-size:13px;border-radius:7px}
.pager button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .gap{padding:0 4px}
.grid td{padding:4px 5px}
.grid input{min-width:64px;padding:6px 7px;text-align:right;font-size:13.5px}
.grid input.code,.grid input[data-f=remarks]{text-align:left}
.grid input.code{min-width:90px}
.grid input[data-f=remarks]{min-width:160px}
.grid .name{min-width:150px;font-size:13.5px}
.grid .tot{font-weight:700;text-align:right;background:var(--soft)}
.grid .tot.over{background:#FEE2E2;color:var(--err);box-shadow:inset 0 0 0 2px var(--err)}
.grid.ro td{padding:10px 14px}
.n,th.n,tfoot td{text-align:right;font-variant-numeric:tabular-nums}
tfoot td:first-child{text-align:left}
tfoot td{font-weight:700;background:var(--soft);border-top:1px solid var(--line);border-bottom:0}
button.x{padding:2px 9px;color:var(--err)}
dl.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:16px 0 4px}
dl.facts.one{grid-template-columns:1fr}
dt{font-size:12px;color:var(--muted);font-weight:600} dd{margin:2px 0 0;font-weight:600}
.review textarea{width:100%}
.subtabs{display:flex;gap:4px;margin:0 0 -1px;position:relative;z-index:1}
.subtabs button{border-radius:8px 8px 0 0;border-bottom-color:transparent;background:transparent;color:var(--muted)}
.subtabs button.on{background:var(--paper);color:var(--ink);border-color:var(--line);border-bottom-color:var(--paper)}
#rp-body{border-top-left-radius:0}

/* Toast */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--navy-d);color:#fff;padding:11px 18px;border-radius:var(--r-sm);transition:.2s;pointer-events:none;max-width:90vw;z-index:50;font-weight:600;font-size:13.5px;box-shadow:0 12px 30px rgba(16,42,67,.25)}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.bad{background:var(--err)}

/* ---------- Login and install ---------- */
body.login{display:grid;place-items:center;min-height:100vh;padding:20px;background:var(--bg)}
.login-wrap{display:grid;grid-template-columns:1fr 1fr;max-width:860px;width:100%;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(16,42,67,.18);border:1px solid var(--line)}
.login-side{background:var(--navy-d);color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-side::after{content:"";position:absolute;right:-90px;bottom:-90px;width:260px;height:260px;border-radius:50%;border:40px solid rgba(37,99,235,.18)}
.login-side p{color:#94A3B8;margin:0}
.login-box{background:var(--paper);padding:44px 40px;width:100%;display:flex;flex-direction:column;gap:16px}
.login-box h1,.login-box h2{font-size:24px;margin:0 0 4px;font-weight:700}
.login-box p{margin:0}
.login-box button.primary{padding:11px 15px;font-size:14px;margin-top:4px}
body.login>.login-box{max-width:400px;border-radius:14px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(16,42,67,.14)}

/* ---------- Phones and tablets ---------- */
@media (max-width:1250px){ .tiles.kpi{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1100px){ .tiles.three,.rep-pick{grid-template-columns:1fr 1fr} .tracker{grid-template-columns:1fr 1fr;row-gap:12px} .tracker li:nth-child(2)::after{display:none} .qs{width:240px} }
@media (max-width:900px){
  .side-collapse{display:none!important}
  .menu-btn{display:flex}
  .side{transform:translateX(-100%);width:256px;box-shadow:none}
  body.menu-open .side{transform:none;box-shadow:12px 0 32px rgba(16,42,67,.3)}
  .top{left:0;padding:0 14px;gap:8px}
  main{margin-left:0;padding:calc(var(--top-h) + 18px) 16px 32px}
  .who-txt small{display:none}
}
@media (max-width:760px){
  .tiles.four{grid-template-columns:1fr 1fr}
  .bell-panel{position:fixed;left:8px;right:8px;top:68px;width:auto}
  .two,.tiles.two,.tiles.three,.login-wrap{grid-template-columns:1fr}
  .tiles,.tiles.six,.tiles.kpi{grid-template-columns:1fr 1fr;gap:12px}
  .tile{min-height:0;padding:14px 16px}
  .tile b{font-size:24px}
  .tile .k-ic{width:32px;height:32px;top:12px;right:12px}
  .rep-pick{grid-template-columns:1fr 1fr}
  .bar label{min-width:calc(50% - 6px);flex:1}
  .who-txt{display:none}
  .qs{display:none}
  .tracker{grid-template-columns:1fr;gap:12px}
  .tracker li::after{display:none}
  .page-head h1{font-size:23px}
  .card{padding:18px}
  .login-side{padding:28px}
  .login-box{padding:28px}
  .actions.sticky button{flex:1}
  .review.sticky{position:static}
}
@media (prefers-reduced-motion:reduce){#toast,.side,.top,main,.tile{transition:none}}
@media (min-width:901px){ .scrim{display:none!important} }