@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#F5F6F8; --card:#FFFFFF; --ink:#14213D; --muted:#5A6478;
  --pine:#1C2E54; --pine-soft:#E7EBF4; --marigold:#C9A227; --marigold-soft:#F6EFD8;
  --brick:#C4553B; --brick-soft:#F7E4DF; --line:#DBE0E8;
  --mono:'IBM Plex Mono',ui-monospace,monospace; --disp:'Archivo',sans-serif; --body:'Public Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:var(--body);font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--pine);outline-offset:1px}
label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}

/* ===== LOGIN ===== */
#loginScreen{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.login-card{background:var(--card);border-radius:14px;padding:34px 32px;width:100%;max-width:380px}
.login-card h1{font-family:var(--disp);font-weight:800;font-size:22px;margin-bottom:2px}
.login-card .sub{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:22px}
.login-card .field{margin-bottom:14px}
.login-err{color:var(--brick);font-size:12.5px;margin-top:10px;min-height:18px}
.login-hint{margin-top:16px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.login-hint code{font-family:var(--mono);background:var(--pine-soft);padding:1px 6px;border-radius:4px}

header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-bottom:2px solid var(--ink);background:var(--card);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand h1::before{content:"";display:inline-block;width:10px;height:10px;background:var(--marigold);border-radius:2px;margin-right:9px;vertical-align:1px}
.brand .header-logo{height:34px;width:auto;display:block}
.brand .header-logo + h1::before{display:none}
.login-logo{display:block;height:56px;width:auto;margin:0 auto 16px}
.brand span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.hdr-actions{display:flex;gap:8px;align-items:center}
.who{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-right:4px}
.btn{border:1px solid var(--ink);background:var(--card);color:var(--ink);border-radius:7px;padding:7px 13px;font-weight:600;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:hover{background:var(--pine-soft)}
.btn.primary{background:var(--pine);border-color:var(--pine);color:#fff;width:auto}
.btn.primary:hover{background:#16264A}
.btn.block{width:100%}
.btn.small{padding:4px 9px;font-size:11.5px;border-radius:6px}
.btn.danger{background:#fff;border-color:var(--brick);color:var(--brick)}
.btn.danger:hover{background:var(--brick-soft)}

.queue{background:var(--ink);color:#EDF0F6;padding:10px 22px;display:flex;gap:10px;align-items:center;overflow-x:auto}
.queue .q-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9AA8C4;white-space:nowrap;flex-shrink:0}
.chip{display:inline-flex;align-items:center;gap:8px;background:#22304F;border:1px solid #39496F;border-radius:999px;padding:5px 13px 5px 5px;font-size:12px;white-space:nowrap;color:#EDF0F6;flex-shrink:0}
.chip:hover{border-color:var(--marigold)}
.chip .ic{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;flex-shrink:0;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.chip .ic.warn{background:rgba(201,162,39,.20);color:#F0C24B;box-shadow:inset 0 0 0 1px rgba(240,194,75,.35)}
.chip .ic.danger{background:rgba(224,106,85,.20);color:#F5947F;box-shadow:inset 0 0 0 1px rgba(245,148,127,.35)}
.chip .ic.ok{background:rgba(78,155,110,.20);color:#7FD9A0;box-shadow:inset 0 0 0 1px rgba(127,217,160,.35)}
.chip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot.warn{background:var(--marigold)} .dot.danger{background:#E06A55} .dot.ok{background:#4E9B6E}
.chip b{font-family:var(--mono);font-weight:700;color:#fff}
.queue .clear{font-size:12px;color:#9AA8C4;white-space:nowrap}

nav{display:flex;gap:2px;padding:0 22px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto}
nav button{background:none;border:none;border-bottom:3px solid transparent;padding:12px 16px;font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--muted);white-space:nowrap}
nav button.active{color:var(--ink);border-bottom-color:var(--marigold)}
nav button:hover{color:var(--ink)}

main{padding:20px 22px 60px;max-width:1180px;margin:0 auto}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.two{grid-template-columns:1fr 1fr}
@media(max-width:840px){.two{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.card h3{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.card h3 .meta{font-family:var(--mono);font-size:11px;text-transform:none;letter-spacing:0;font-weight:500}
.kpi .num{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1.1}
.kpi .lbl{font-size:12px;color:var(--muted);margin-top:3px}
.kpi.alert .num{color:var(--brick)} .kpi.warn .num{color:#A5821B} .kpi.good .num{color:var(--pine)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:2px solid var(--ink)}
th.num,td.num{text-align:right}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td.mono{font-family:var(--mono);font-size:12px}
tr:hover td{background:#F8F9FB}
tr.branchgrp td{background:var(--pine-soft);color:var(--pine);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
tr.branchgrp:hover td{background:var(--pine-soft)}
tr.branchgrp .bg-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
tr.branchgrp .bg-act .mailbtn{text-transform:none;letter-spacing:0;font-family:var(--body)}
/* view toggle */
.segbtn{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:6px;padding:4px 11px;font-size:12px;font-weight:600;font-family:var(--body)}
.segbtn.on{background:var(--pine);border-color:var(--pine);color:#fff}
.segbtn:hover{border-color:var(--pine)}
.tag.inbox{background:#E4ECF5;color:#2E4E7D}
.tag.rn-initiated{background:var(--marigold-soft);color:#7A6210}
.tag.rn-followup{background:var(--brick);color:#fff}
.rn-dates{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.rn-dates label{display:inline;text-transform:none;letter-spacing:0;font-size:10.5px;color:var(--muted);margin:0 3px 0 0}
.rn-dates input[type=date]{width:auto;padding:3px 6px;font-size:11.5px}
/* calendar */
.cal-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cal-nav .cal-title{font-family:var(--disp);font-weight:700;font-size:14px;min-width:150px}
.cal-scroll{overflow-x:auto}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:620px}
.cal-dow{background:var(--pine);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:5px 6px;text-align:center;min-width:0;overflow:hidden;white-space:nowrap}
.cal-cell{background:var(--card);min-height:78px;padding:4px 5px;font-size:11px;vertical-align:top;min-width:0;overflow:hidden}
.cal-cell.blank{background:#FAFBFC}
.cal-cell.today{outline:2px solid var(--marigold);outline-offset:-2px}
.cal-daynum{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:600;margin-bottom:3px}
.cal-chip{display:block;max-width:100%;font-size:10px;line-height:1.25;padding:2px 5px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;box-sizing:border-box}
.cal-chip.expired{background:var(--brick);color:#fff}
.cal-chip.due{background:var(--marigold-soft);color:#7A6210}
.cal-chip.ok{background:var(--pine-soft);color:var(--pine)}
.cal-chip.followup{background:#E4ECF5;color:#2E4E7D;border:1px dashed #2E4E7D}
.cal-more{font-size:10px;color:var(--muted)}
@media(max-width:640px){.cal-cell{min-height:58px}.cal-chip{font-size:9px}}
td select{width:auto;min-width:120px;padding:4px 7px;font-size:12px}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;padding:3px 9px;border-radius:999px}
.tag.expired{background:var(--brick);color:#fff}
.lrq-st-approved{background:#D9EAD3 !important}
.lrq-st-rejected{background:#F4CCCC !important}
.lrq-st-pending{background:#FFF2CC !important}
.tag.due{background:var(--marigold-soft);color:#7A6210}
.tag.ok{background:var(--pine-soft);color:var(--pine)}
.tag.stage-Applied{background:#ECEFF4;color:#5A6478}
.tag.stage-Screening{background:var(--marigold-soft);color:#7A6210}
.tag.stage-Interview{background:#E4ECF5;color:#2E4E7D}
.tag.stage-Offer{background:#F0E4F5;color:#6E2E7D}
.tag.stage-Hired{background:var(--pine);color:#fff}
.tag.stage-Rejected{background:var(--brick-soft);color:var(--brick)}
.tag.stage-CV{background:#ECEFF4;color:#5A6478}
.tag.stage-1st{background:#E4ECF5;color:#2E4E7D}
.tag.stage-2nd{background:#D9E5F3;color:#27446E}
.tag.stage-3rd{background:#CBDCF0;color:#1F3A61}
.tag.stage-Waiting{background:var(--marigold-soft);color:#7A6210}
.tag.stage-No{background:#EEEEF0;color:#6B7280}
.tag.stage-Archived{background:#E5E7EB;color:#4B5563}
.tag.stage-Back-up{background:#F0E4F5;color:#6E2E7D}
.tag.stage-Unqualified{background:var(--brick-soft);color:var(--brick)}
.tag.stage-Resigned{background:#3F3F46;color:#fff}
.tag.stage-Trainee\/Temporary{background:#E0F2F1;color:#0F5C55}
.tag.stage-Immediate{background:#0F5C55;color:#fff}
.tag.open{background:var(--pine-soft);color:var(--pine)}
.tag.pr-High{background:var(--brick-soft);color:var(--brick)}
.tag.pr-Medium{background:var(--marigold-soft);color:#7A6210}
.tag.pr-Low{background:#ECEFF4;color:#5A6478}
.tag.bt{background:var(--pine);color:#fff}
.tag.bd{background:var(--brick);color:#fff}
.btn.bt{background:var(--pine);border-color:var(--pine);color:#fff}
.btn.bt:hover{background:#16264A}
.btn.bd{background:#fff;border-color:var(--brick);color:var(--brick)}
.btn.bd:hover{background:var(--brick-soft)}
.tag.hold{background:var(--marigold-soft);color:#7A6210}
.tag.closed{background:#ECEFF4;color:#5A6478}
.tag.lv-approved{background:var(--pine-soft);color:var(--pine)}
.tag.lv-hr{background:var(--brick-soft);color:var(--brick)}
.tag.lv-teamlead{background:#E4ECF5;color:#2E4E7D}
.tag.lv-mgmt{background:var(--marigold-soft);color:#7A6210}
.tag.lv-other{background:#ECEFF4;color:#5A6478}

.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.section-note{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.empty{padding:22px;text-align:center;color:var(--muted);font-size:13px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
a.mailbtn{display:inline-block;font-size:11.5px;color:var(--pine);font-weight:600;text-decoration:none;border:1px solid var(--pine);border-radius:6px;padding:3px 8px;white-space:nowrap}
a.mailbtn:hover{background:var(--pine-soft)}
a.mailbtn.big{font-size:12.5px;padding:7px 13px;border-radius:7px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:200}
.toast.show{opacity:1}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
@media print{
  header .hdr-actions, .queue, nav, .no-print{display:none !important}
  header{border-bottom:2px solid #000}
  body{background:#fff}
  .card{break-inside:avoid;border-color:#bbb}
  main{padding:10px 0;max-width:100%}
}
#appShell{display:none}

main{
  max-width:1680px !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding-left:clamp(16px, 2.6vw, 56px) !important;
  padding-right:clamp(16px, 2.6vw, 56px) !important;
}
@media(min-width:1760px){
  main{max-width:100% !important;}
}
header,.queue,nav{
  padding-left:clamp(16px, 2.6vw, 56px) !important;
  padding-right:clamp(16px, 2.6vw, 56px) !important;
}

/* ---- touch-friendly scrollbars, everywhere ---- */
*{scrollbar-width:auto; scrollbar-color:#94A2BC #E7EAF0;}
::-webkit-scrollbar{width:14px; height:14px;}
::-webkit-scrollbar-track{background:#E7EAF0; border-radius:999px;}
::-webkit-scrollbar-thumb{
  background:#94A2BC; border-radius:999px; border:3px solid #E7EAF0; min-height:40px;
}
::-webkit-scrollbar-thumb:hover{background:#6E7EA0;}
::-webkit-scrollbar-corner{background:transparent;}

/* extra-prominent horizontal bars on the strips people actually drag on
   touchscreens: tab nav, status queue, kanban boards, wide tables */
.queue,nav,.card:has(table),.glass:has(table),
.r2-board,.ats-board,#tab-onboard .ob-board{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.queue::-webkit-scrollbar,nav::-webkit-scrollbar,
.card:has(table)::-webkit-scrollbar,.glass:has(table)::-webkit-scrollbar,
.r2-board::-webkit-scrollbar,.ats-board::-webkit-scrollbar,
#tab-onboard .ob-board::-webkit-scrollbar{
  height:16px;
}
.queue::-webkit-scrollbar-thumb,nav::-webkit-scrollbar-thumb{
  background:#5A6C93; border-color:var(--ink);
}
.queue::-webkit-scrollbar-track,nav::-webkit-scrollbar-track{background:#0F1B33;}

/* momentum scrolling on touch devices for every scrollable region */
main,.card,.glass,table,.ats-overlay,.r2-overlay,#hrbot-log,.nb-panel,
.cal-grid,.formrow{
  -webkit-overflow-scrolling:touch;
}

@media(max-width:640px){
  main{padding-left:14px !important; padding-right:14px !important;}
  header,.queue,nav{padding-left:14px !important; padding-right:14px !important;}
  ::-webkit-scrollbar{width:12px; height:12px;}
}
@media print{
  main{max-width:100% !important; padding-left:0 !important; padding-right:0 !important;}
}

.r2-col{
  max-height:calc(100vh - 250px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.r2-col-h{
  position:sticky;
  top:0;
  z-index:2;
  background:#F4F6FA;
  margin:-10px -10px 9px -10px;
  padding:10px 13px 9px 13px;
  border-radius:12px 12px 0 0;
  box-shadow:0 2px 4px rgba(15,31,61,.05);
}
html[data-theme="dark"] .r2-col-h{background:#121C32;}
@media(max-width:640px){
  .r2-col{max-height:calc(100vh - 320px);}
}

/* =========================================================
   WINNER HC — MODERN PROFESSIONAL UI REFRESH
   Visual enhancement only. Existing workflow/logic preserved.
   ========================================================= */
:root{
  --paper:#F4F7FB;
  --card:#FFFFFF;
  --ink:#0F1F3D;
  --muted:#68758A;
  --pine:#14284D;
  --pine-soft:#EAF0F9;
  --marigold:#C9A227;
  --marigold-soft:#FBF5DF;
  --brick:#C64F3D;
  --brick-soft:#FCEBE7;
  --line:#E2E8F0;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Archivo',sans-serif;
  --body:'Public Sans',sans-serif;
  --shadow-sm:0 1px 2px rgba(15,31,61,.04),0 4px 14px rgba(15,31,61,.05);
  --shadow-md:0 10px 30px rgba(15,31,61,.09);
  --radius:14px;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 100% 0,rgba(201,162,39,.055),transparent 28rem),
    linear-gradient(180deg,#F8FAFD 0,#F3F6FA 100%);
  min-height:100vh;
  letter-spacing:-.005em;
}
button,input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease}
input,select,textarea{
  border-color:#D8E0EB;
  border-radius:9px;
  min-height:38px;
  padding:8px 11px;
  background:#FBFCFE;
}
textarea{min-height:76px}
input:hover,select:hover,textarea:hover{border-color:#B9C5D5;background:#fff}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#31568F;
  box-shadow:0 0 0 3px rgba(49,86,143,.12);
  background:#fff;
}
label{color:#718096;font-size:10.5px;letter-spacing:.075em}

/* Login */
#loginScreen{
  background:
    radial-gradient(circle at 18% 20%,rgba(201,162,39,.20),transparent 22rem),
    radial-gradient(circle at 85% 80%,rgba(55,91,148,.28),transparent 30rem),
    linear-gradient(135deg,#0D1B35,#162B51 55%,#0E1D38);
}
.login-card{
  border-radius:22px;
  padding:40px 38px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
}
.login-card::before{
  content:"";
  position:absolute;left:0;top:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--marigold),#E2C75D);
}
.login-card h1{font-size:25px;letter-spacing:-.035em}
.login-card .sub{margin-top:6px;margin-bottom:27px;line-height:1.6}
.login-card .field{margin-bottom:17px}
.login-hint{background:#F8FAFC;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-top:18px}

/* Header */
header{
  padding:17px 28px;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(15,31,61,.02);
  position:relative;
  z-index:20;
}
.brand{gap:12px}
.brand h1{
  font-size:21px;
  letter-spacing:-.035em;
  color:#0B1C39;
}
.brand h1::before{
  width:11px;height:17px;border-radius:3px;
  margin-right:11px;vertical-align:-2px;
  box-shadow:0 4px 10px rgba(201,162,39,.25);
}
.brand span{color:#748198}
.hdr-actions{gap:9px}
.who{
  background:#F4F7FB;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 12px;
  color:#526178;
}

/* Buttons */
.btn{
  border-color:#C9D3E0;
  border-radius:9px;
  padding:8px 14px;
  font-weight:650;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,31,61,.03);
}
.btn:hover{
  background:#F6F8FC;
  border-color:#9EADC1;
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(15,31,61,.07);
}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.primary,.btn.bt{
  background:linear-gradient(135deg,#172F59,#203F73);
  border-color:#172F59;
  box-shadow:0 5px 13px rgba(20,46,84,.17);
}
.btn.primary:hover,.btn.bt:hover{background:linear-gradient(135deg,#102647,#1B3766)}
.btn.danger,.btn.bd{box-shadow:none}

/* Action queue */
.queue{
  padding:11px 28px;
  background:linear-gradient(100deg,#10213F,#172B50 68%,#1B3158);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.queue .q-label{color:#9EB1D0}
.chip{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.14);
  padding:6px 13px;
  backdrop-filter:blur(6px);
}
.chip:hover{background:rgba(255,255,255,.11);border-color:rgba(201,162,39,.7)}

/* Navigation */
nav{
  padding:0 28px;
  gap:4px;
  border-bottom:1px solid #DDE4EE;
  box-shadow:0 3px 10px rgba(15,31,61,.025);
  position:relative;
  z-index:10;
}
nav button{
  padding:14px 15px 13px;
  border-bottom-width:3px;
  font-size:13.5px;
  border-radius:8px 8px 0 0;
}
nav button:hover{background:#F7F9FC}
nav button.active{
  color:#102445;
  border-bottom-color:var(--marigold);
  background:linear-gradient(180deg,transparent,#FCF9EE);
}

/* Main content */
main{padding:26px 28px 70px;max-width:1320px}
.grid{gap:17px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.card{
  border:1px solid #E0E6EF;
  border-radius:var(--radius);
  padding:19px;
  box-shadow:var(--shadow-sm);
}
.card:hover{border-color:#D4DCE8}
.card h3{
  font-size:11.5px;
  color:#68778E;
  margin-bottom:15px;
  padding-bottom:10px;
  border-bottom:1px solid #EEF1F5;
}
.card h3 .meta{
  background:#F5F7FA;
  border:1px solid #E5EAF1;
  border-radius:999px;
  padding:4px 9px;
  color:#718096;
}
.kpi{
  position:relative;
  overflow:hidden;
  min-height:122px;
}
.kpi::after{
  content:"";
  position:absolute;
  width:72px;height:72px;border-radius:50%;
  right:-28px;top:-30px;
  background:rgba(20,46,84,.045);
}
.kpi .num{font-size:34px;letter-spacing:-.055em}
.kpi .lbl{margin-top:7px;color:#718096}

/* Tables */
.card:has(table){overflow-x:auto}
table{border-collapse:separate;border-spacing:0}
th{
  background:#F7F9FC;
  color:#718096;
  border-bottom:1px solid #CBD5E1;
  padding:9px 10px;
}
td{padding:10px;border-bottom-color:#E9EDF3}
tbody tr{transition:background .15s ease}
tr:hover td{background:#F8FAFD}
table th:first-child{border-top-left-radius:7px}
table th:last-child{border-top-right-radius:7px}

/* Tags */
.tag{
  padding:4px 9px;
  border-radius:999px;
  letter-spacing:.035em;
  border:1px solid transparent;
}
.tag.stage-Applied,.tag.pr-Low,.tag.closed{border-color:#DDE3EC}
.tag.stage-Screening,.tag.pr-Medium,.tag.hold,.tag.due{border-color:#E9DDAE}
.tag.stage-Interview{border-color:#C8D8EB}
.tag.stage-Offer{border-color:#DDCBE6}
.tag.stage-Rejected,.tag.pr-High{border-color:#F0C8BF}
.tag.ok,.tag.open{border-color:#D2DCEB}

/* Forms and utility areas */
.formrow{gap:13px;margin-bottom:15px}
.section-note{
  background:#F8FAFC;
  border-left:3px solid var(--marigold);
  padding:9px 11px;
  border-radius:0 8px 8px 0;
}
.empty{
  padding:34px 22px;
  background:#FAFBFD;
  border:1px dashed #D6DEE9;
  border-radius:10px;
}
.legend{padding-top:5px}
a.mailbtn{border-radius:8px;padding:5px 9px}
.toast{
  bottom:25px;
  border-radius:11px;
  padding:12px 20px;
  box-shadow:0 14px 40px rgba(15,31,61,.24);
}

/* Embedded modules */
#tab-reckpi iframe,#weeklyMisFrame,#tab-fnf iframe{
  border:none !important;
  border-radius:16px !important;
  box-shadow:var(--shadow-md);
  background:#fff !important;
}
#tab-weeklymis>.card,#tab-reckpi>.card{
  background:linear-gradient(135deg,#FFFFFF,#FBFCFE);
}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#B7C1CF transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#BCC6D3;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#98A6B9;background-clip:padding-box}

/* Responsive polish */
@media(max-width:1000px){
  header{padding:14px 18px}
  .queue,nav{padding-left:18px;padding-right:18px}
  main{padding:20px 18px 60px}
  .who{display:none}
}
@media(max-width:640px){
  .brand span{display:none}
  .brand h1{font-size:18px}
  .hdr-actions{width:100%;overflow-x:auto;padding-bottom:2px}
  header{align-items:flex-start}
  nav button{padding:12px 11px;font-size:12.5px}
  main{padding:16px 12px 50px}
  .card{padding:15px;border-radius:12px}
  .kpi .num{font-size:29px}
}
@media print{
  body{background:#fff}
  .card{box-shadow:none;border-radius:4px}
}

#tab-reckpi,#tab-weeklymis{width:100%}
#tab-reckpi iframe,#weeklyMisFrame{
  width:100% !important;
  min-height:calc(100vh - 235px);
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  display:block;
}

/* ---- Candidate card modal ---- */
.ats-overlay{position:fixed;inset:0;background:rgba(15,31,61,.48);z-index:150;display:flex;align-items:flex-start;justify-content:center;padding:30px 14px;overflow-y:auto;backdrop-filter:blur(3px)}
.ats-card{background:var(--card);border-radius:16px;max-width:880px;width:100%;box-shadow:0 30px 80px rgba(15,31,61,.32);overflow:hidden;animation:atsIn .16s ease}
@keyframes atsIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.ats-card{animation:none}}
.ats-head{background:linear-gradient(135deg,#172F59,#203F73);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ats-head h2{font-family:var(--disp);font-size:19px;font-weight:800;margin:0;letter-spacing:-.02em}
.ats-head .ats-role{font-family:var(--mono);font-size:11.5px;color:#B9C7E2;margin-top:3px}
.ats-head select{width:auto;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.ats-head select option{color:var(--ink)}
.ats-close{background:none;border:none;color:#B9C7E2;font-size:20px;line-height:1;padding:2px 6px;cursor:pointer}
.ats-close:hover{color:#fff}
.ats-body{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
@media(max-width:720px){.ats-body{grid-template-columns:1fr}}
.ats-main{padding:18px 20px;border-right:1px solid var(--line)}
@media(max-width:720px){.ats-main{border-right:none;border-bottom:1px solid var(--line)}}
.ats-side{padding:18px 20px;background:#FAFBFD}
.ats-sec{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.ats-sec:not(:first-child){margin-top:18px}
.ats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ats-grid .full{grid-column:1/-1}
/* ---- Stage timeline (signature element) ---- */
.ats-rail{position:relative;margin:4px 0 0;padding-left:20px}
.ats-rail::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.ats-step{position:relative;padding:0 0 16px}
.ats-step:last-child{padding-bottom:2px}
.ats-step .dot{position:absolute;left:-20px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--pine)}
.ats-step.now .dot{border-color:var(--marigold);box-shadow:0 0 0 4px rgba(201,162,39,.18)}
.ats-step.event .dot{width:10px;height:10px;left:-18px;top:5px;border-width:2px;border-color:#8FA3C8}
.ats-step b{font-size:13px}
.ats-step .when{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-top:1px}
/* ---- Document links ---- */
.ats-doclink{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--pine);text-decoration:none;border:1px solid var(--pine);border-radius:6px;padding:3px 9px;margin:2px 6px 2px 0}
.ats-doclink:hover{background:var(--pine-soft)}
.ats-foot{padding:13px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:#fff}
/* ---- Recruitment desk widgets on Dashboard ---- */
.ats-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ats-stat{flex:1;min-width:130px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#FBFCFE}
.ats-stat .n{font-family:var(--mono);font-size:24px;font-weight:600;line-height:1.1}
.ats-stat .l{font-size:11px;color:var(--muted);margin-top:3px}
.ats-stat.hot{border-color:var(--marigold);background:var(--marigold-soft)}
.ats-stat.alert .n{color:var(--brick)}
.ats-namelink{cursor:pointer;color:var(--pine);text-decoration:underline;text-decoration-color:rgba(20,40,77,.3);text-underline-offset:2px}
.ats-namelink:hover{text-decoration-color:var(--pine)}
/* ---- Onboarding kanban board ---- */
.ats-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.ats-col{flex:0 0 210px;background:#F7F9FC;border:1px solid var(--line);border-radius:10px;padding:9px}
.ats-col-h{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 2px}
.ats-col-h b{font-size:11px;color:var(--ink)}
.ats-col.onb-Joined{border-top:3px solid var(--pine)}
.ats-col.onb-Cancelled{border-top:3px solid var(--brick)}
.ats-col.onb-Hired{border-top:3px solid var(--marigold)}
.ats-mini{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-bottom:8px;box-shadow:0 1px 2px rgba(15,31,61,.04)}
.ats-mini .r{font-size:11px;color:var(--muted);margin:2px 0 6px}
.ats-mini select{width:100%;margin-top:6px;font-size:11.5px;padding:4px 6px}
.ats-fu{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:99px;margin:2px 3px 0 0}
.ats-fu.due{background:var(--brick-soft);color:var(--brick);border:1px solid #F0C8BF}
.ats-fu.done{background:var(--pine-soft);color:var(--pine)}
.ats-fu.up{background:#ECEFF4;color:#5A6478}

/* ---------- scoped glass canvas ---------- */
#tab-dash{
  position:relative;
  padding:22px 20px 26px;
  border-radius:20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(201,162,39,.14), transparent 26rem),
    radial-gradient(circle at 95% 12%, rgba(37,88,166,.20), transparent 30rem),
    linear-gradient(160deg,#0E1D3A 0%,#16305C 55%,#101F3E 100%);
  box-shadow:0 24px 60px rgba(10,22,48,.28);
  overflow:hidden;
}
#tab-dash[hidden]{display:none!important}
#tab-dash::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% -20%,rgba(255,255,255,.06),transparent 40rem);
}
#tab-dash>*{position:relative;z-index:1}

/* ---------- hero strip ---------- */
.xd-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.xd-hero .greet{color:#EDF2FB}
.xd-hero .greet .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#9DB2D8;margin-bottom:5px}
.xd-hero .greet h2{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.03em;margin:0;line-height:1.15}
.xd-hero .greet .sub{font-size:12.5px;color:#AFC0DF;margin-top:5px}
.xd-hero .greet .sub b{color:#EDF2FB}
.xd-clockwrap{display:flex;align-items:center;gap:16px}
.xd-clock{text-align:right;color:#EDF2FB}
.xd-clock .t{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:.02em}
.xd-clock .dte{font-size:11.5px;color:#9DB2D8;margin-top:2px}
/* signature: day-progress ring */
.xd-ring{position:relative;width:76px;height:76px;flex:none}
.xd-ring svg{transform:rotate(-90deg)}
.xd-ring .track{stroke:rgba(255,255,255,.14)}
.xd-ring .bar{stroke:var(--marigold);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.3,1)}
.xd-ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.xd-ring .lbl b{font-family:var(--mono);font-size:15px}
.xd-ring .lbl span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#AFC0DF}

/* ---------- glass primitives ---------- */
#tab-dash .glass{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  box-shadow:0 8px 26px rgba(10,22,48,.18);
  padding:16px 17px;
}
#tab-dash .glass h3{
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#5D6B84;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
}
#tab-dash .glass h3 .meta{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:none;letter-spacing:0;color:#7F8CA3}

/* ---------- animated KPI cards ---------- */
.xd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:14px}
.xd-kpi{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:13px;padding:14px 15px;color:#EDF2FB;
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
  animation:xdRise .5s cubic-bezier(.22,1,.3,1) both;
}
.xd-kpi:nth-child(2){animation-delay:.05s}.xd-kpi:nth-child(3){animation-delay:.1s}
.xd-kpi:nth-child(4){animation-delay:.15s}.xd-kpi:nth-child(5){animation-delay:.2s}
.xd-kpi:nth-child(6){animation-delay:.25s}.xd-kpi:nth-child(7){animation-delay:.3s}
.xd-kpi:nth-child(8){animation-delay:.35s}
@keyframes xdRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.xd-kpi:hover{transform:translateY(-3px);background:rgba(255,255,255,.16);border-color:rgba(201,162,39,.55)}
.xd-kpi .num{font-family:var(--mono);font-size:29px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.xd-kpi .lbl{font-size:11px;color:#AFC0DF;margin-top:5px;line-height:1.35}
.xd-kpi.warn .num{color:#EBCB63}
.xd-kpi.alert .num{color:#F0937E}
.xd-kpi.good .num{color:#8FD6A9}
.xd-kpi .spark{position:absolute;right:-16px;top:-16px;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.05)}

/* ---------- layout grid ---------- */
.xd-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px}
.xd-grid>.glass{grid-column:span 6}
.xd-grid>.glass.w4{grid-column:span 4}
.xd-grid>.glass.w8{grid-column:span 8}
.xd-grid>.glass.w12{grid-column:span 12}
@media(max-width:980px){.xd-grid>.glass,.xd-grid>.glass.w4,.xd-grid>.glass.w8{grid-column:span 12}}

/* ---------- tables inside glass ---------- */
#tab-dash .glass table{width:100%;border-collapse:collapse;font-size:12.5px}
#tab-dash .glass th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A96AC;text-align:left;padding:5px 8px;border-bottom:2px solid #22375F}
#tab-dash .glass td{padding:8px;border-bottom:1px solid #EAEEF5;vertical-align:middle;color:var(--ink)}
#tab-dash .glass tr:last-child td{border-bottom:none}
#tab-dash .glass tr:hover td{background:#F7F9FD}

/* ---------- misc widgets ---------- */
.xd-actions{display:flex;gap:8px;flex-wrap:wrap}
.xd-actions button{
  font-family:var(--disp);font-weight:700;font-size:12px;
  border:1px solid #C9D3E4;border-radius:9px;background:#fff;color:#16305C;
  padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.xd-actions button:hover{transform:translateY(-1px);border-color:var(--marigold);box-shadow:0 5px 14px rgba(16,32,66,.12)}
.xd-actions button .ic{font-size:14px}
.xd-feed{list-style:none;margin:0;padding:0}
.xd-feed li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #EAEEF5;font-size:12.5px;color:var(--ink)}
.xd-feed li:last-child{border-bottom:none}
.xd-feed .ic{width:26px;height:26px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--pine-soft)}
.xd-feed .when{font-family:var(--mono);font-size:10.5px;color:#8A96AC;margin-left:auto;white-space:nowrap;padding-top:3px}
.xd-bar{height:7px;background:#E8EDF5;border-radius:99px;overflow:hidden}
.xd-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1C2E54,#3D5A93);transform-origin:left;animation:xdGrow .9s cubic-bezier(.22,1,.3,1) both}
@keyframes xdGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.xd-empty{padding:20px 10px;text-align:center;color:#7F8CA3;font-size:12.5px;background:#F7F9FD;border:1px dashed #D6DEEA;border-radius:10px}
.dept-strength table{table-layout:fixed}
.dept-strength th:first-child,.dept-strength td:first-child{width:44%}
.dept-strength th:nth-child(2),.dept-strength td.num:nth-child(2){width:18%}
.dept-strength th:nth-child(3),.dept-strength td.num:nth-child(3){width:16%}
.dept-strength td.num{font-family:var(--mono);text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.dept-strength td.bar-cell{width:22%}
.dept-strength .xd-bar{margin-top:1px}
.dept-strength tbody tr:last-child td{border-bottom:none}
.dept-strength-scroll{max-height:360px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.dept-strength-scroll thead th{position:sticky;top:0;background:var(--card);z-index:1;box-shadow:0 1px 0 var(--line)}
.dept-strength-scroll::-webkit-scrollbar{width:7px}
.dept-strength-scroll::-webkit-scrollbar-thumb{background:#D6DEEA;border-radius:99px}
.dept-strength-scroll::-webkit-scrollbar-track{background:transparent}
.xd-leave-frame{width:100%;height:420px;border:0;border-radius:10px;background:#F3F6FB}
.xd-range{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.xd-range label{color:#9DB2D8}
.xd-range input{max-width:160px}
.xd-range .btn.primary{background:var(--marigold);border-color:var(--marigold);color:#14213D}
.xd-range .btn.primary:hover{background:#B8931F}
#tab-dash .btn.small.bt{background:var(--pine);border-color:var(--pine);color:#fff}
#tab-dash .btn.small.bd{background:#fff;border-color:var(--brick);color:var(--brick)}

@media (prefers-reduced-motion: reduce){
  .xd-kpi,.xd-bar i{animation:none}
  .xd-kpi:hover{transform:none}
  .xd-ring .bar{transition:none}
}
@media print{
  #tab-dash{background:#fff;box-shadow:none;color:#000}
  #tab-dash .glass{box-shadow:none;border:1px solid #ccc}
  .xd-kpi{background:#fff;border:1px solid #ccc;color:#14213D;animation:none}
  .xd-kpi .lbl{color:#555}
}

/* ---------- sub navigation ---------- */
.r2-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.r2-nav button{
  font-family:var(--disp);font-weight:700;font-size:12.5px;
  border:1px solid var(--line);border-radius:99px;background:#fff;color:#5A6478;
  padding:8px 16px;cursor:pointer;transition:all .15s ease;
}
.r2-nav button:hover{border-color:var(--pine);color:var(--pine)}
.r2-nav button.on{background:var(--pine);border-color:var(--pine);color:#fff;box-shadow:0 4px 12px rgba(20,46,84,.22)}
.r2-nav button b{font-family:var(--mono);font-weight:600;font-size:11px;opacity:.75;margin-left:5px}

/* ---------- kanban pipeline ---------- */
.r2-board{display:flex;gap:11px;overflow-x:auto;padding:2px 2px 10px;align-items:flex-start}
.r2-col{flex:0 0 236px;background:#F4F6FA;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:120px;transition:background .15s,border-color .15s}
.r2-col.dragover{background:var(--marigold-soft);border-color:var(--marigold)}
.r2-col-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;padding:0 3px}
.r2-col-h span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#68758A}
.r2-col-h b{font-family:var(--mono);font-size:11px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:1px 8px;color:var(--ink)}
.r2-col.st-Applied{border-top:3px solid #8FA3C8}
.r2-col.st-Screening{border-top:3px solid var(--marigold)}
.r2-col.st-Interview{border-top:3px solid #2E4E7D}
.r2-col.st-Offer{border-top:3px solid #6E2E7D}
.r2-col.st-Hired{border-top:3px solid var(--pine)}
.r2-col.st-Rejected{border-top:3px solid var(--brick)}
.r2-ccard{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:8px;
  cursor:grab;box-shadow:0 1px 3px rgba(15,31,61,.06);transition:transform .13s,box-shadow .13s,opacity .13s;
}
.r2-ccard:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,31,61,.12)}
.r2-ccard.dragging{opacity:.45;cursor:grabbing}
.r2-ccard .top{display:flex;gap:9px;align-items:center;margin-bottom:5px}
.r2-avatar{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;background:var(--pine-soft);
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:13px;color:var(--pine);border:1px solid #D9E2F0}
img.r2-avatar{display:block}
.r2-ccard .nm{font-weight:700;font-size:12.5px;color:var(--ink);line-height:1.2}
.r2-ccard .rl{font-size:10.5px;color:#68758A;margin-top:1px}
.r2-stars{font-size:11px;letter-spacing:1px;color:var(--marigold)}
.r2-stars .off{color:#D9DEE8}
.r2-ccard .ft{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-family:var(--mono);font-size:9.5px;color:#8A96AC}
.r2-ccard .ft .iv{color:#7A6210;background:var(--marigold-soft);border-radius:99px;padding:1px 7px}
.r2-hint{font-size:11px;color:#8A96AC;padding:6px 3px 0;text-align:center}

/* ---------- candidate profile modal ---------- */
.r2-overlay{position:fixed;inset:0;background:rgba(15,31,61,.5);z-index:160;display:flex;align-items:flex-start;justify-content:center;padding:26px 12px;overflow-y:auto;backdrop-filter:blur(3px)}
.r2-card{background:#fff;border-radius:16px;max-width:920px;width:100%;box-shadow:0 30px 80px rgba(15,31,61,.34);overflow:hidden;animation:r2In .16s ease}
@keyframes r2In{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.r2-card{animation:none}}
.r2-head{background:linear-gradient(135deg,#172F59,#25457D);color:#fff;padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.r2-photo{position:relative;width:72px;height:72px;flex:none}
.r2-photo .img{width:72px;height:72px;border-radius:14px;object-fit:cover;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:24px;color:#fff}
img.r2-photo-img{width:72px;height:72px;border-radius:14px;object-fit:cover;border:2px solid rgba(255,255,255,.35);display:block}
.r2-photo .cam{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;background:var(--marigold);color:#14213D;
  border:2px solid #172F59;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.r2-head h2{font-family:var(--disp);font-size:21px;font-weight:800;margin:0;letter-spacing:-.02em}
.r2-head .rr{font-family:var(--mono);font-size:11.5px;color:#B9C7E2;margin-top:3px}
.r2-head .stars{margin-top:6px;font-size:16px;letter-spacing:2px;cursor:pointer;user-select:none}
.r2-head .stars .s{color:rgba(255,255,255,.28)}
.r2-head .stars .s.on{color:var(--marigold)}
.r2-head select{width:auto;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.r2-head select option{color:var(--ink)}
.r2-x{background:none;border:none;color:#B9C7E2;font-size:20px;padding:2px 6px;cursor:pointer;margin-left:auto;align-self:flex-start}
.r2-x:hover{color:#fff}
.r2-tabs{display:flex;gap:2px;background:#F2F5FA;border-bottom:1px solid var(--line);padding:0 12px;overflow-x:auto}
.r2-tabs button{font-family:var(--disp);font-weight:700;font-size:12px;border:none;border-bottom:3px solid transparent;
  background:none;color:#68758A;padding:11px 14px;cursor:pointer;white-space:nowrap}
.r2-tabs button.on{color:var(--ink);border-bottom-color:var(--marigold)}
.r2-body{padding:18px 20px;max-height:56vh;overflow-y:auto}
.r2-body .grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.r2-body .grid2 .full{grid-column:1/-1}
@media(max-width:680px){.r2-body .grid2{grid-template-columns:1fr}}
.r2-foot{padding:13px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:#FAFBFD}
.r2-doclink{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--pine);text-decoration:none;
  border:1px solid var(--pine);border-radius:7px;padding:4px 10px;margin:2px 6px 6px 0}
.r2-doclink:hover{background:var(--pine-soft)}
/* timeline */
.r2-rail{position:relative;margin:4px 0 0;padding-left:22px}
.r2-rail::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.r2-step{position:relative;padding-bottom:15px}
.r2-step:last-child{padding-bottom:2px}
.r2-step .dot{position:absolute;left:-22px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--pine)}
.r2-step.now .dot{border-color:var(--marigold);box-shadow:0 0 0 4px rgba(201,162,39,.18)}
.r2-step.ev .dot{width:10px;height:10px;left:-20px;top:5px;border-width:2px;border-color:#8FA3C8}
.r2-step b{font-size:13px}
.r2-step .when{font-family:var(--mono);font-size:10.5px;color:#8A96AC;display:block;margin-top:1px}
/* notes */
.r2-note{background:#FAFBFD;border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px;font-size:12.5px}
.r2-note .who{font-family:var(--mono);font-size:10px;color:#8A96AC;margin-top:4px}
/* offer status pills */
.r2-off-Draft{background:#ECEFF4;color:#5A6478}
.r2-off-Sent{background:var(--marigold-soft);color:#7A6210}
.r2-off-Accepted{background:var(--pine);color:#fff}
.r2-off-Declined{background:var(--brick-soft);color:var(--brick)}
.tag.r2-off-Draft,.tag.r2-off-Sent,.tag.r2-off-Accepted,.tag.r2-off-Declined{border:1px solid transparent}

/* ---------- auto KPI sheet ---------- */
.r2-kpisheet th{background:var(--pine);color:#fff;border-bottom:none}
.r2-kpisheet td.num{font-family:var(--mono);text-align:center;font-weight:600}
.r2-kpisheet tr.tot td{background:var(--marigold-soft);font-weight:700}
@media print{
  .r2-nav,.no-print{display:none!important}
}

/* ---------- scoped glass canvas ---------- */
#tab-dash{
  position:relative;
  padding:22px 20px 26px;
  border-radius:20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(201,162,39,.14), transparent 26rem),
    radial-gradient(circle at 95% 12%, rgba(37,88,166,.20), transparent 30rem),
    linear-gradient(160deg,#0E1D3A 0%,#16305C 55%,#101F3E 100%);
  box-shadow:0 24px 60px rgba(10,22,48,.28);
  overflow:hidden;
}
#tab-dash[hidden]{display:none!important}
#tab-dash::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% -20%,rgba(255,255,255,.06),transparent 40rem);
}
#tab-dash>*{position:relative;z-index:1}

/* ---------- hero strip ---------- */
.xd-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.xd-hero .greet{color:#EDF2FB}
.xd-hero .greet .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#9DB2D8;margin-bottom:5px}
.xd-hero .greet h2{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.03em;margin:0;line-height:1.15}
.xd-hero .greet .sub{font-size:12.5px;color:#AFC0DF;margin-top:5px}
.xd-hero .greet .sub b{color:#EDF2FB}
.xd-clockwrap{display:flex;align-items:center;gap:16px}
.xd-clock{text-align:right;color:#EDF2FB}
.xd-clock .t{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:.02em}
.xd-clock .dte{font-size:11.5px;color:#9DB2D8;margin-top:2px}
/* signature: day-progress ring */
.xd-ring{position:relative;width:76px;height:76px;flex:none}
.xd-ring svg{transform:rotate(-90deg)}
.xd-ring .track{stroke:rgba(255,255,255,.14)}
.xd-ring .bar{stroke:var(--marigold);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.3,1)}
.xd-ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.xd-ring .lbl b{font-family:var(--mono);font-size:15px}
.xd-ring .lbl span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#AFC0DF}

/* ---------- glass primitives ---------- */
#tab-dash .glass{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  box-shadow:0 8px 26px rgba(10,22,48,.18);
  padding:16px 17px;
}
#tab-dash .glass h3{
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#5D6B84;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
}
#tab-dash .glass h3 .meta{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:none;letter-spacing:0;color:#7F8CA3;display:flex;align-items:center;gap:6px}

/* ---------- animated KPI cards ---------- */
.xd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:14px}
.xd-kpi{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:13px;padding:14px 15px;color:#EDF2FB;
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
  animation:xdRise .5s cubic-bezier(.22,1,.3,1) both;
}
.xd-kpi:nth-child(2){animation-delay:.05s}.xd-kpi:nth-child(3){animation-delay:.1s}
.xd-kpi:nth-child(4){animation-delay:.15s}.xd-kpi:nth-child(5){animation-delay:.2s}
.xd-kpi:nth-child(6){animation-delay:.25s}.xd-kpi:nth-child(7){animation-delay:.3s}
.xd-kpi:nth-child(8){animation-delay:.35s}
@keyframes xdRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.xd-kpi:hover{transform:translateY(-3px);background:rgba(255,255,255,.16);border-color:rgba(201,162,39,.55)}
.xd-kpi .num{font-family:var(--mono);font-size:29px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.xd-kpi .lbl{font-size:11px;color:#AFC0DF;margin-top:5px;line-height:1.35}
.xd-kpi.warn .num{color:#EBCB63}
.xd-kpi.alert .num{color:#F0937E}
.xd-kpi.good .num{color:#8FD6A9}
.xd-kpi .spark{position:absolute;right:-16px;top:-16px;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.05)}

/* leave card KPIs sit on a light glass card, so use dark-on-light variant */
.xd-leave-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}
.xd-leave-kpi{
  background:#F4F7FC;border:1px solid #E3E9F3;border-radius:12px;padding:13px 14px;
  animation:xdRise .5s cubic-bezier(.22,1,.3,1) both;
}
.xd-leave-kpi .num{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.03em;color:#16305C}
.xd-leave-kpi .lbl{font-size:11px;color:#7F8CA3;margin-top:4px}
.xd-leave-kpi.warn .num{color:#B8862A}
.xd-leave-kpi.good .num{color:#2E8B57}

/* ---------- layout grid ---------- */
.xd-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px}
.xd-grid>.glass{grid-column:span 6}
.xd-grid>.glass.w4{grid-column:span 4}
.xd-grid>.glass.w8{grid-column:span 8}
.xd-grid>.glass.w12{grid-column:span 12}
@media(max-width:980px){.xd-grid>.glass,.xd-grid>.glass.w4,.xd-grid>.glass.w8{grid-column:span 12}}

/* ---------- tables inside glass ---------- */
#tab-dash .glass table{width:100%;border-collapse:collapse;font-size:12.5px}
#tab-dash .glass th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A96AC;text-align:left;padding:5px 8px;border-bottom:2px solid #22375F}
#tab-dash .glass td{padding:8px;border-bottom:1px solid #EAEEF5;vertical-align:middle;color:var(--ink)}
#tab-dash .glass tr:last-child td{border-bottom:none}
#tab-dash .glass tr:hover td{background:#F7F9FD}

/* ---------- misc widgets ---------- */
.xd-actions{display:flex;gap:8px;flex-wrap:wrap}
.xd-actions button{
  font-family:var(--disp);font-weight:700;font-size:12px;
  border:1px solid #C9D3E4;border-radius:9px;background:#fff;color:#16305C;
  padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.xd-actions button:hover{transform:translateY(-1px);border-color:var(--marigold);box-shadow:0 5px 14px rgba(16,32,66,.12)}
.xd-actions button .ic{font-size:14px}
.xd-feed{list-style:none;margin:0;padding:0}
.xd-feed li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #EAEEF5;font-size:12.5px;color:var(--ink)}
.xd-feed li:last-child{border-bottom:none}
.xd-feed .ic{width:26px;height:26px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--pine-soft)}
.xd-feed .when{font-family:var(--mono);font-size:10.5px;color:#8A96AC;margin-left:auto;white-space:nowrap;padding-top:3px}
.xd-bar{height:7px;background:#E8EDF5;border-radius:99px;overflow:hidden}
.xd-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1C2E54,#3D5A93);transform-origin:left;animation:xdGrow .9s cubic-bezier(.22,1,.3,1) both}
@keyframes xdGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.xd-empty{padding:20px 10px;text-align:center;color:#7F8CA3;font-size:12.5px;background:#F7F9FD;border:1px dashed #D6DEEA;border-radius:10px}
.xd-range{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.xd-range label{color:#9DB2D8}
.xd-range input{max-width:160px}
.xd-range .btn.primary{background:var(--marigold);border-color:var(--marigold);color:#14213D}
.xd-range .btn.primary:hover{background:#B8931F}
#tab-dash .btn.small.bt{background:var(--pine);border-color:var(--pine);color:#fff}
#tab-dash .btn.small.bd{background:#fff;border-color:var(--brick);color:var(--brick)}

@media (prefers-reduced-motion: reduce){
  .xd-kpi,.xd-leave-kpi,.xd-bar i{animation:none}
  .xd-kpi:hover{transform:none}
  .xd-ring .bar{transition:none}
}
@media print{
  #tab-dash{background:#fff;box-shadow:none;color:#000}
  #tab-dash .glass{box-shadow:none;border:1px solid #ccc}
  .xd-kpi{background:#fff;border:1px solid #ccc;color:#14213D;animation:none}
  .xd-kpi .lbl{color:#555}
}

/* ---------- AI Resume view ---------- */
.ai-drop{
  border:2px dashed #C6D2E4;border-radius:14px;background:#F8FAFD;
  padding:26px 18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.ai-drop:hover,.ai-drop.over{border-color:var(--marigold);background:var(--marigold-soft)}
.ai-drop .big{font-size:30px;line-height:1;margin-bottom:8px}
.ai-drop b{font-family:var(--disp);font-size:14px;color:var(--ink)}
.ai-drop .sub{font-size:11.5px;color:#7F8CA3;margin-top:5px}
.ai-mode{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.ai-mode button{border:none;background:#fff;color:#68758A;font-family:var(--disp);font-weight:700;font-size:11.5px;padding:7px 14px;cursor:pointer}
.ai-mode button.on{background:var(--pine);color:#fff}
.ai-mode button:disabled{opacity:.45;cursor:not-allowed}
.ai-status{font-family:var(--mono);font-size:10.5px;color:#7F8CA3}
.ai-status .ok{color:#2E8B57;font-weight:600}
.ai-status .off{color:#B8862A;font-weight:600}
/* match ring */
.ai-match{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ai-ring{position:relative;width:92px;height:92px;flex:none}
.ai-ring svg{transform:rotate(-90deg)}
.ai-ring .tr{stroke:#E7ECF4}
.ai-ring .br{stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.3,1)}
.ai-ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ai-ring .c b{font-family:var(--mono);font-size:20px;color:var(--ink)}
.ai-ring .c span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A96AC}
.ai-verdict{flex:1;min-width:200px}
.ai-verdict .v{font-family:var(--disp);font-weight:800;font-size:16px}
.ai-verdict .v.s5{color:#1D6B37}.ai-verdict .v.s4{color:var(--pine)}
.ai-verdict .v.s3{color:#A5821B}.ai-verdict .v.s2{color:var(--brick)}
.ai-verdict .why{font-size:12px;color:#68758A;margin-top:4px;line-height:1.5}
.ai-stars{font-size:19px;letter-spacing:2px;color:var(--marigold)}
.ai-stars .off{color:#DDE3EC}
/* duplicate banner */
.ai-dup{border:1px solid #E9C8BF;background:var(--brick-soft);border-radius:10px;padding:11px 13px;font-size:12.5px;color:#8A3A2A;margin:12px 0}
.ai-dup b{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ai-dup.clean{border-color:#CFE3D6;background:#EAF6EF;color:#1D6B37}
/* question list */
.ai-qs{counter-reset:q;list-style:none;margin:0;padding:0}
.ai-qs li{counter-increment:q;position:relative;padding:8px 8px 8px 36px;border-bottom:1px solid #EDF1F6;font-size:12.5px}
.ai-qs li:last-child{border-bottom:none}
.ai-qs li::before{content:counter(q,decimal-leading-zero);position:absolute;left:4px;top:9px;
  font-family:var(--mono);font-size:10px;font-weight:600;color:var(--marigold)}
/* extraction spinner */
.ai-busy{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#68758A;padding:12px 0}
.ai-busy .sp{width:16px;height:16px;border:2.5px solid #DDE3EC;border-top-color:var(--pine);border-radius:50%;animation:aiSpin .8s linear infinite}
@keyframes aiSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ai-busy .sp{animation:none}.ai-ring .br{transition:none}}
/* ---------- notification bell ---------- */
.nb-wrap{position:relative}
.nb-btn{position:relative;border:1px solid var(--ink);background:#fff;border-radius:8px;padding:7px 11px;font-size:14px;cursor:pointer;line-height:1}
.nb-btn:hover{background:var(--pine-soft)}
.nb-badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;border-radius:99px;background:var(--brick);color:#fff;
  font-family:var(--mono);font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
.nb-panel{position:absolute;right:0;top:calc(100% + 8px);width:330px;max-height:420px;overflow-y:auto;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(15,31,61,.22);z-index:120;display:none}
.nb-panel.open{display:block}
.nb-panel h4{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#68758A;
  margin:0;padding:12px 14px 9px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;
  display:flex;justify-content:space-between;align-items:center}
.nb-clear{border:1px solid var(--line);background:#fff;border-radius:99px;padding:3px 11px;font-size:10px;font-weight:700;
  letter-spacing:.05em;color:var(--pine);cursor:pointer;text-transform:none}
.nb-clear:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
.nb-x{flex:none;border:none;background:none;color:#B9C1CF;font-size:12px;cursor:pointer;padding:2px 4px;border-radius:6px;margin-left:auto}
.nb-x:hover{background:var(--brick-soft);color:var(--brick)}
.nb-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid #EEF1F6;font-size:12.5px;cursor:pointer;align-items:flex-start;text-align:left;width:100%;background:none;border-left:none;border-right:none;border-top:none;font-family:var(--body);color:var(--ink)}
.nb-item:hover{background:#F7F9FD}
.nb-item:last-child{border-bottom:none}
.nb-item .ic{width:26px;height:26px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px}
.nb-item .ic.warn{background:var(--marigold-soft)}.nb-item .ic.bad{background:var(--brick-soft)}.nb-item .ic.ok{background:var(--pine-soft)}
.nb-item .tx b{font-weight:700}
.nb-item .tx .sm{font-size:10.5px;color:#8A96AC;font-family:var(--mono);margin-top:2px}
.nb-empty{padding:22px 14px;text-align:center;color:#8A96AC;font-size:12px}
/* ---------- AI assistant (floating widget removed — see ensureAssistant()) ---------- */
/* ---------- reports centre ---------- */
.rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.rp-card{border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:#FBFCFE}
.rp-card .ic{font-size:22px;margin-bottom:8px}
.rp-card b{font-family:var(--disp);font-size:13.5px;display:block;color:var(--ink)}
.rp-card p{font-size:11.5px;color:#7F8CA3;margin:5px 0 11px;line-height:1.5}
.rp-card .row{display:flex;gap:7px;flex-wrap:wrap}
@media print{.nb-panel{display:none!important}}

/* ---------- Executive dashboard: neat professional alignment ---------- */
#tab-dash .xd-hero{align-items:flex-end;margin-bottom:20px;padding-bottom:4px}
#tab-dash .xd-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:16px}
@media(max-width:1100px){#tab-dash .xd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#tab-dash .xd-kpis{grid-template-columns:1fr}}
#tab-dash .xd-kpi{min-height:96px;display:flex;flex-direction:column;justify-content:center;border-radius:14px}
#tab-dash .xd-kpi .num{font-size:30px;letter-spacing:-.02em}
#tab-dash .xd-kpi .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-top:4px}
#tab-dash .xd-grid{gap:15px;align-items:stretch}
#tab-dash .xd-grid>.glass{display:flex;flex-direction:column;border-radius:15px;padding:17px 18px}
#tab-dash .xd-grid>.glass>h3{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid rgba(130,150,190,.18);padding-bottom:9px}
#tab-dash .xd-grid>.glass>h3 .meta{font-size:10px;letter-spacing:.04em;text-transform:none;opacity:.75}
#tab-dash .xd-grid>.glass>*:last-child{margin-bottom:0}
#tab-dash .xd-range{align-items:end;gap:10px;margin-bottom:16px}
@media(max-width:900px){#tab-dash .xd-grid>.glass,#tab-dash .xd-grid>.glass.w4{grid-column:span 12}}

/* ---------- Recruitment dashboard: colourful stat strip ---------- */
#tab-rec .ats-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media(max-width:1100px){#tab-rec .ats-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#tab-rec .ats-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
#tab-rec .ats-stat{border:none;border-radius:14px;padding:15px 16px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 8px 20px rgba(15,31,61,.14);min-height:86px;display:flex;flex-direction:column;justify-content:center}
#tab-rec .ats-stat::after{content:"";position:absolute;right:-22px;top:-22px;width:82px;height:82px;border-radius:50%;
  background:rgba(255,255,255,.14)}
#tab-rec .ats-stat .n{font-size:27px;font-weight:700;color:#fff}
#tab-rec .ats-stat .l{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:4px}
#tab-rec .ats-stat:nth-child(1){background:linear-gradient(135deg,#1C2E54,#31518F)}
#tab-rec .ats-stat:nth-child(2){background:linear-gradient(135deg,#0E5C55,#18937F)}
#tab-rec .ats-stat:nth-child(3){background:linear-gradient(135deg,#8A6410,#C9A227)}
#tab-rec .ats-stat:nth-child(4){background:linear-gradient(135deg,#8C3B2C,#C4553B)}
#tab-rec .ats-stat:nth-child(5){background:linear-gradient(135deg,#5B2E7D,#8A4DB8)}
#tab-rec .ats-stat:nth-child(6){background:linear-gradient(135deg,#1F5C3A,#2F8A57)}
#tab-rec .ats-stat.hot{outline:2px solid rgba(255,255,255,.55);outline-offset:-2px}

/* ---------- Kanban pipeline: coloured stage columns ---------- */
#tab-rec .r2-col{border-top-width:4px;border-top-style:solid;border-top-color:#8FA3C8;border-radius:12px}
#tab-rec .r2-col.st-CV{border-top-color:#6D82AC}
#tab-rec .r2-col.st-1st{border-top-color:#2E6ED9}
#tab-rec .r2-col.st-2nd{border-top-color:#1F55AF}
#tab-rec .r2-col.st-3rd{border-top-color:#153E85}
#tab-rec .r2-col.st-Waiting{border-top-color:#C9A227}
#tab-rec .r2-col.st-No{border-top-color:#9AA3B2}
#tab-rec .r2-col.st-Archived{border-top-color:#6B7280}
#tab-rec .r2-col.st-Back-up{border-top-color:#8A4DB8}
#tab-rec .r2-col.st-Rejected{border-top-color:#C4553B}
#tab-rec .r2-col.st-Unqualified{border-top-color:#A34433}
#tab-rec .r2-col.st-Resigned{border-top-color:#3F3F46}
#tab-rec .r2-col.st-Trainee\/Temporary{border-top-color:#18937F}
#tab-rec .r2-col.st-Hired{border-top-color:#2F8A57}
#tab-rec .r2-col.st-Immediate{border-top-color:#0E5C55}
#tab-rec .r2-col-h span{color:var(--ink);font-weight:700}
#tab-rec .r2-col-h b{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Recruitment sub-nav: bolder active state ---------- */
#tab-rec .r2-nav button{border-radius:99px;font-weight:600}
#tab-rec .r2-nav button.on{background:var(--pine);color:#fff;border-color:var(--pine)}

/* ================= THEME TOGGLE BUTTON ================= */
.th-toggle{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:99px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;line-height:1;
  transition:background .15s,border-color .15s;
}
.th-toggle:hover{border-color:var(--marigold)}
#loginThemeBtn{position:fixed;top:16px;right:16px;z-index:200}

/* ================= DARK THEME ================= */
html[data-theme="dark"]{
  --paper:#0E1524; --card:#151F35; --ink:#E8EDF7; --muted:#9AA8C2;
  --pine:#5B82C9; --pine-soft:#1D2A47; --marigold:#D9B23A; --marigold-soft:#3A3218;
  --brick:#E0725B; --brick-soft:#3B241E; --line:#2A3A5C;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 100% 0,rgba(217,178,58,.06),transparent 28rem),
    linear-gradient(180deg,#0C1220 0,#0E1524 100%) !important;
  color:var(--ink);
}
/* header / nav / queue */
html[data-theme="dark"] header{background:var(--card);border-bottom-color:var(--line);box-shadow:none}
html[data-theme="dark"] .brand h1{color:var(--ink)}
html[data-theme="dark"] .brand span{color:var(--muted)}
html[data-theme="dark"] .who{background:#1B2740;border-color:var(--line);color:var(--muted)}
html[data-theme="dark"] nav{background:var(--card);border-bottom-color:var(--line);box-shadow:none}
html[data-theme="dark"] nav button{color:var(--muted)}
html[data-theme="dark"] nav button:hover{background:#1B2740;color:var(--ink)}
html[data-theme="dark"] nav button.active{color:var(--ink);background:linear-gradient(180deg,transparent,#2A2717)}
/* cards & tables */
html[data-theme="dark"] .card{background:var(--card);border-color:var(--line);box-shadow:0 6px 20px rgba(0,0,0,.35)}
html[data-theme="dark"] .card:hover{border-color:#33456C}
html[data-theme="dark"] .card h3{color:var(--muted);border-bottom-color:#22304F}
html[data-theme="dark"] .card h3 .meta{background:#1B2740;border-color:var(--line);color:var(--muted)}
html[data-theme="dark"] th{background:#1B2740;color:var(--muted);border-bottom-color:#3A4C74}
html[data-theme="dark"] td{border-bottom-color:#22304F;color:var(--ink)}
html[data-theme="dark"] tr:hover td{background:#1A2540}
html[data-theme="dark"] .kpi .num{color:var(--ink)}
html[data-theme="dark"] .kpi::after{background:rgba(255,255,255,.04)}
/* inputs */
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  background:#101A30;border-color:#2E3F63;color:var(--ink)}
html[data-theme="dark"] input:hover,html[data-theme="dark"] select:hover,html[data-theme="dark"] textarea:hover{
  background:#13203A;border-color:#3D5280}
html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{
  background:#13203A;border-color:#5B82C9;box-shadow:0 0 0 3px rgba(91,130,201,.18)}
html[data-theme="dark"] label{color:var(--muted)}
html[data-theme="dark"] input[disabled]{opacity:.6}
/* buttons */
html[data-theme="dark"] .btn{background:#1B2740;border-color:#33456C;color:var(--ink);box-shadow:none}
html[data-theme="dark"] .btn:hover{background:#22304F;border-color:#4A5F8F}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .btn.bt{
  background:linear-gradient(135deg,#26437D,#31569F);border-color:#31569F;color:#fff}
html[data-theme="dark"] .btn.danger,html[data-theme="dark"] .btn.bd{background:#241A18;border-color:var(--brick);color:var(--brick)}
/* misc surfaces */
html[data-theme="dark"] .empty{background:#121C32;border-color:#2E3F63;color:var(--muted)}
html[data-theme="dark"] .section-note{background:#141F38;color:var(--muted)}
html[data-theme="dark"] .toast{background:#26437D}
html[data-theme="dark"] a.mailbtn{color:#8FB0E8;border-color:#8FB0E8}
html[data-theme="dark"] a.mailbtn:hover{background:#1D2A47}
/* login */
html[data-theme="dark"] .login-card{background:var(--card);color:var(--ink)}
html[data-theme="dark"] .login-card .login-hint{background:#121C32;border-color:var(--line)}
/* --- Executive dashboard glass cards --- */
html[data-theme="dark"] #tab-dash .glass{
  background:rgba(21,31,53,.92);border-color:rgba(90,115,165,.35);color:var(--ink)}
html[data-theme="dark"] #tab-dash .glass h3{color:var(--muted)}
html[data-theme="dark"] #tab-dash .glass td{color:var(--ink);border-bottom-color:#22304F}
html[data-theme="dark"] #tab-dash .glass tr:hover td{background:#1A2540}
html[data-theme="dark"] .xd-leave-kpi{background:#1B2740;border-color:#2E3F63}
html[data-theme="dark"] .xd-leave-kpi .num{color:var(--ink)}
html[data-theme="dark"] .xd-empty{background:#121C32;border-color:#2E3F63;color:var(--muted)}
html[data-theme="dark"] .xd-actions button{background:#1B2740;border-color:#33456C;color:var(--ink)}
html[data-theme="dark"] .xd-feed li{border-bottom-color:#22304F;color:var(--ink)}
html[data-theme="dark"] .xd-feed .ic{background:#1D2A47}
html[data-theme="dark"] .xd-bar{background:#22304F}
/* --- Recruitment kanban / modal / ATS --- */
html[data-theme="dark"] .r2-nav button{background:#1B2740;border-color:#33456C;color:var(--muted)}
html[data-theme="dark"] .r2-nav button:hover{color:var(--ink);border-color:#5B82C9}
html[data-theme="dark"] .r2-nav button.on{background:#31569F;border-color:#31569F;color:#fff}
html[data-theme="dark"] .r2-col{background:#121C32;border-color:#2A3A5C}
html[data-theme="dark"] .r2-col.dragover{background:#2A2717;border-color:var(--marigold)}
html[data-theme="dark"] .r2-col-h span{color:var(--ink)!important}
html[data-theme="dark"] .r2-ccard{background:#1B2740;border-color:#2E3F63;box-shadow:0 2px 8px rgba(0,0,0,.35)}
html[data-theme="dark"] .r2-ccard .nm{color:var(--ink)}
html[data-theme="dark"] .r2-ccard .rl,html[data-theme="dark"] .r2-ccard .ft{color:var(--muted)}
html[data-theme="dark"] .r2-avatar{background:#22304F;border-color:#33456C;color:#9DB8E8}
html[data-theme="dark"] .r2-card{background:var(--card)}
html[data-theme="dark"] .r2-tabs{background:#121C32;border-bottom-color:var(--line)}
html[data-theme="dark"] .r2-tabs button{color:var(--muted)}
html[data-theme="dark"] .r2-tabs button.on{color:var(--ink)}
html[data-theme="dark"] .r2-body{color:var(--ink)}
html[data-theme="dark"] .r2-foot{background:#121C32;border-top-color:var(--line)}
html[data-theme="dark"] .r2-note{background:#121C32;border-color:#2E3F63}
html[data-theme="dark"] .r2-rail::before{background:#2E3F63}
html[data-theme="dark"] .r2-step .dot{background:var(--card)}
html[data-theme="dark"] .rp-card{background:#121C32;border-color:#2E3F63}
html[data-theme="dark"] .rp-card b{color:var(--ink)}
/* --- AI resume / assistant / notifications --- */
html[data-theme="dark"] .ai-drop{background:#121C32;border-color:#33456C}
html[data-theme="dark"] .ai-drop b{color:var(--ink)}
html[data-theme="dark"] .ai-dup{background:#2E1B16;border-color:#5A3428;color:#E8A392}
html[data-theme="dark"] .ai-dup.clean{background:#14291D;border-color:#2A5A3D;color:#8FD6A9}
html[data-theme="dark"] .ai-mode button{background:#1B2740;color:var(--muted)}
html[data-theme="dark"] .ai-mode button.on{background:#31569F;color:#fff}
html[data-theme="dark"] .ai-qs li{border-bottom-color:#22304F}
html[data-theme="dark"] .nb-btn{background:#1B2740;border-color:#33456C;color:var(--ink)}
html[data-theme="dark"] .nb-panel{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .nb-panel h4{background:var(--card);color:var(--muted);border-bottom-color:var(--line)}
html[data-theme="dark"] .nb-item{color:var(--ink);border-bottom-color:#22304F}
html[data-theme="dark"] .nb-item:hover{background:#1A2540}
html[data-theme="dark"] .nb-clear{background:#1B2740;border-color:#33456C;color:#8FB0E8}
/* onboarding board minis + doc links */
html[data-theme="dark"] .ats-col{background:#121C32;border-color:#2A3A5C}
html[data-theme="dark"] .ats-mini{background:#1B2740;border-color:#2E3F63}
html[data-theme="dark"] .ats-doclink,html[data-theme="dark"] .r2-doclink{color:#8FB0E8;border-color:#8FB0E8}
/* embedded iframes keep their own light styling (separate documents) */
html[data-theme="dark"] iframe{filter:none}
/* tags stay readable */
html[data-theme="dark"] .tag.stage-Applied,html[data-theme="dark"] .tag.stage-No,
html[data-theme="dark"] .tag.stage-Archived,html[data-theme="dark"] .tag.closed,
html[data-theme="dark"] .tag.pr-Low{background:#22304F;color:#AEBBD4;border-color:#33456C}
html[data-theme="dark"] .tag.ok,html[data-theme="dark"] .tag.open{background:#1D2A47;color:#9DB8E8;border-color:#33456C}
html[data-theme="dark"] .tag.due,html[data-theme="dark"] .tag.hold,
html[data-theme="dark"] .tag.stage-Screening,html[data-theme="dark"] .tag.stage-Waiting,
html[data-theme="dark"] .tag.pr-Medium{background:#3A3218;color:#E4C766;border-color:#5A4E22}
html[data-theme="dark"] .tag.stage-Rejected,html[data-theme="dark"] .tag.stage-Unqualified,
html[data-theme="dark"] .tag.pr-High{background:#3B241E;color:#E8A392;border-color:#5A3428}
html[data-theme="dark"] .tag.stage-Interview,html[data-theme="dark"] .tag.stage-1st,
html[data-theme="dark"] .tag.stage-2nd,html[data-theme="dark"] .tag.stage-3rd,
html[data-theme="dark"] .tag.lv-teamlead{background:#1D2E4F;color:#9DB8E8;border-color:#33456C}
html[data-theme="dark"] .tag.stage-Offer,html[data-theme="dark"] .tag.stage-Back-up{background:#32224A;color:#C9A8E8;border-color:#4A3568}
html[data-theme="dark"] .legend{color:var(--muted)}
/* keep light chart backgrounds readable inside dark cards */
html[data-theme="dark"] svg text{fill-opacity:.95}

/* ================= LOCATION FILTER BAR ================= */
.loc-filter{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;margin-bottom:14px;
}
.loc-filter .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.loc-filter select{width:auto;min-width:190px}
.loc-filter .count{font-family:var(--mono);font-size:11px;color:var(--muted)}
.loc-filter .clear-btn{font-size:11.5px;padding:5px 11px}

/* ================= PIPELINE CARD EXTRA INFO ================= */
.r2-ccard .v5-info{
  display:flex;flex-direction:column;gap:2px;margin-top:6px;
  font-size:10.5px;color:#68758A;line-height:1.4;
  border-top:1px dashed var(--line);padding-top:6px;
}
html[data-theme="dark"] .r2-ccard .v5-info{color:var(--muted)}
.r2-ccard .v5-info b{color:var(--ink);font-weight:600}
.r2-ccard .v5-info .v5-row{display:flex;gap:5px;align-items:baseline}
.r2-ccard .v5-info .v5-ic{flex:none;width:14px;text-align:center}

.v6-box{border:1px solid var(--line);border-radius:12px;background:var(--pine-soft);
  padding:13px 15px;margin-bottom:16px}
html[data-theme="dark"] .v6-box{background:#141F38}
.v6-box .hd{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.v6-box .hd b{font-family:var(--disp);font-size:12.5px;color:var(--ink)}
.v6-file{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.v6-file .ic{font-size:22px;flex:none}
.v6-file .nm{font-weight:700;font-size:13px;color:var(--ink);word-break:break-all}
.v6-file .meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}
.v6-file .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.v6-share{display:flex;align-items:flex-start;gap:9px;margin-top:11px;font-size:12.5px;color:var(--ink)}
.v6-share input[type=checkbox]{width:auto;min-height:auto;margin-top:2px;accent-color:var(--pine)}
.v6-share .st{display:block;font-size:11px;margin-top:3px}
.v6-share .st.on{color:#1D6B37;font-weight:600}
html[data-theme="dark"] .v6-share .st.on{color:#8FD6A9}
.v6-share .st.off{color:var(--muted)}
.v6-empty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12.5px}
.v6-busy{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.v6-busy .sp{width:14px;height:14px;border:2.5px solid var(--line);border-top-color:var(--pine);
  border-radius:50%;animation:v6spin .8s linear infinite}
@keyframes v6spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.v6-busy .sp{animation:none}}

/* ---------------- banner ---------------- */
.v7-banner{
  border:1.5px solid var(--marigold);border-radius:12px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--marigold-soft),var(--card));
  box-shadow:0 4px 14px rgba(214,167,44,.18);overflow:hidden;
}
.v7-banner .v7-hd{
  display:flex;align-items:center;gap:9px;padding:10px 15px 8px;
  font-family:var(--disp);font-weight:800;font-size:13px;color:var(--ink);
}
.v7-banner .v7-hd .bell{font-size:16px;animation:v7ring 2.4s ease-in-out infinite;transform-origin:top center}
.v7-banner .v7-hd .cnt{
  font-family:var(--mono);font-size:10.5px;background:var(--marigold);color:#3A2E07;
  border-radius:99px;padding:2px 9px;font-weight:700;
}
.v7-banner .v7-hd .dt{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:400}
.v7-list{display:flex;flex-direction:column}
.v7-item{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;cursor:pointer;
  padding:9px 15px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink);
  transition:background .15s;
}
.v7-item:hover{background:rgba(214,167,44,.12)}
.v7-item .tm{
  font-family:var(--mono);font-weight:700;font-size:12px;min-width:76px;
  color:var(--ink);
}
.v7-item .nm{font-weight:700}
.v7-item .rl,.v7-item .mut{color:var(--muted);font-size:11.5px}
.v7-item .st{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  border-radius:99px;padding:3px 9px;font-weight:700;white-space:nowrap;
}
.v7-item .st.up{background:var(--pine-soft);color:var(--pine);border:1px solid var(--line)}
.v7-item .st.soon{background:var(--brick);color:#fff;animation:v7pulse 1.2s ease-in-out infinite}
.v7-item .st.now{background:#1D6B37;color:#fff}
.v7-item .st.done{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.v7-item .v7-done-btn{
  font-family:var(--disp);font-size:10.5px;font-weight:700;
  background:var(--card);border:1px solid var(--pine);color:var(--pine);
  border-radius:99px;padding:3px 10px;cursor:pointer;white-space:nowrap;
}
.v7-item .v7-done-btn:hover{background:var(--pine);color:#fff}
html[data-theme="dark"] .v7-item .v7-done-btn{background:transparent}
.v7-item.done{opacity:.62}
.v7-item.done .nm{text-decoration:line-through;text-decoration-thickness:1px}
html[data-theme="dark"] .v7-banner{box-shadow:0 4px 16px rgba(0,0,0,.4)}
html[data-theme="dark"] .v7-item:hover{background:rgba(217,178,58,.1)}
html[data-theme="dark"] .v7-item .st.up{color:#9DB8E8}

/* ---------------- pipeline card glow ---------------- */
.r2-ccard.v7-today{
  border:1.5px solid var(--marigold)!important;
  box-shadow:0 0 0 3px rgba(214,167,44,.18),0 4px 12px rgba(214,167,44,.22)!important;
}
.r2-ccard .v7-ribbon{
  display:flex;align-items:center;gap:6px;margin:-2px 0 6px;
  background:var(--marigold);color:#3A2E07;border-radius:6px;
  font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.08em;
  padding:3px 8px;text-transform:uppercase;
}
.r2-ccard .v7-ribbon.done{background:var(--line);color:var(--muted);text-transform:none;letter-spacing:.02em}

/* ---------------- table row highlight ---------------- */
#tab-rec tr.v7-today-row td{
  background:var(--marigold-soft)!important;
  border-left:none;
}
#tab-rec tr.v7-today-row td:first-child{box-shadow:inset 3px 0 0 var(--marigold)}
html[data-theme="dark"] #tab-rec tr.v7-today-row td{background:#2E2A15!important}

/* ---------------- nav badge ---------------- */
.v7-nav-badge{
  display:inline-flex;align-items:center;justify-content:center;margin-left:6px;
  min-width:17px;height:17px;padding:0 5px;border-radius:99px;
  background:var(--brick);color:#fff;font-family:var(--mono);font-size:10px;font-weight:800;
  animation:v7pulse 2s ease-in-out infinite;vertical-align:1px;
}
@keyframes v7pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes v7ring{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(14deg)}90%{transform:rotate(-12deg)}92%{transform:rotate(9deg)}94%{transform:rotate(-6deg)}96%{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){
  .v7-banner .v7-hd .bell,.v7-item .st.soon,.v7-nav-badge{animation:none}
}

.v8-cv-hint{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}
.v8-cv-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.v8-cv-actions .btn.small{padding:4px 10px;font-size:11.5px}
.tag.role-superadmin{background:#5A2CA0;color:#fff}
.tag.role-teamlead{background:#0E6B5C;color:#fff}
.tag.role-viewer{background:#5A6478;color:#fff}
.v8-ro-banner{background:#FFF8E6;border:1px solid #E6C878;color:#7A5C00;border-radius:8px;
  padding:7px 12px;font-size:12.5px;font-weight:600;margin:8px 0}
html[data-theme="dark"] .v8-ro-banner{background:#3A3010;border-color:#8A6D1F;color:#F0DFA0}

#tab-tasks .dt-hero{
  background:linear-gradient(115deg,#0F1F3D 0%,#16305B 58%,#1C3A6B 100%);
  border-radius:18px;color:#fff;padding:22px 24px;margin-bottom:18px;
  position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(15,31,61,.22);
}
#tab-tasks .dt-hero::before{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.28),transparent 70%)}
#tab-tasks .dt-hero::after{content:"";position:absolute;left:38%;bottom:-120px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%)}
#tab-tasks .dt-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;position:relative;z-index:1}
#tab-tasks .dt-hero .dt-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#C9A227;margin-bottom:6px}
#tab-tasks .dt-hero h2{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1.15}
#tab-tasks .dt-hero .dt-date{font-size:12.5px;color:#AFC0DD;margin-top:5px}
#tab-tasks .dt-stats{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
#tab-tasks .dt-stat{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:13px;padding:10px 16px;min-width:96px;backdrop-filter:blur(6px);
}
#tab-tasks .dt-stat .n{font-family:var(--mono);font-size:23px;font-weight:600;line-height:1}
#tab-tasks .dt-stat .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#A9BBDA;margin-top:5px}
#tab-tasks .dt-stat.bt .n{color:#7FD6A4}
#tab-tasks .dt-stat.bd .n{color:#F2907C}
#tab-tasks .dt-stat.warn .n{color:#E9CB6B}
#tab-tasks .dt-progress{margin-top:18px;position:relative;z-index:1}
#tab-tasks .dt-progress .lbl{display:flex;justify-content:space-between;font-size:11.5px;color:#AFC0DD;margin-bottom:7px}
#tab-tasks .dt-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden;display:flex}
#tab-tasks .dt-bar i{display:block;height:100%}
#tab-tasks .dt-bar .p-bt{background:linear-gradient(90deg,#3E9E6D,#63C08F)}
#tab-tasks .dt-bar .p-bd{background:linear-gradient(90deg,#C64F3D,#E07A62)}

/* --- input cards --- */
#tab-tasks .dt-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
@media(max-width:900px){#tab-tasks .dt-inputs{grid-template-columns:1fr}}
#tab-tasks .dt-card{
  background:#fff;border:1px solid #E0E6EF;border-radius:16px;padding:20px;
  box-shadow:0 1px 2px rgba(15,31,61,.04),0 6px 18px rgba(15,31,61,.05);
}
#tab-tasks .dt-card-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #EEF1F6}
#tab-tasks .dt-ic{
  width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;background:linear-gradient(135deg,#EAF0F9,#DDE7F5);color:#14284D;
}
#tab-tasks .dt-ic.gold{background:linear-gradient(135deg,#FBF5DF,#F3E7B8);color:#7A6210}
#tab-tasks .dt-card-head b{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:-.01em;display:block}
#tab-tasks .dt-card-head small{font-size:11.5px;color:#748198;display:block;margin-top:1px}
#tab-tasks .dt-card-head .meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:#68758A;background:#F5F7FA;border:1px solid #E5EAF1;border-radius:999px;padding:4px 10px;white-space:nowrap}
#tab-tasks .dt-card textarea{border-radius:11px;background:#FAFBFD}
#tab-tasks .dt-note{font-size:11.8px;color:#68758A;background:#F8FAFC;border-left:3px solid var(--marigold);padding:9px 12px;border-radius:0 9px 9px 0;margin-top:11px;line-height:1.55}
#tab-tasks .dt-report{margin-top:15px;border-top:1px dashed #DCE3ED;padding-top:13px}
#tab-tasks .dt-report-row{display:flex;gap:9px;align-items:end;flex-wrap:wrap}
#tab-tasks .dt-report-row>div{flex:1;min-width:120px}
#tab-tasks .dt-actions-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}

/* --- day timeline --- */
#tab-tasks .dt-day{
  background:#fff;border:1px solid #E0E6EF;border-radius:16px;margin-bottom:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,31,61,.04),0 6px 18px rgba(15,31,61,.05);
}
#tab-tasks .dt-day.today{border-color:#B9CBE8;box-shadow:0 0 0 3px rgba(23,47,89,.07),0 10px 26px rgba(15,31,61,.09)}
#tab-tasks .dt-day-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;background:linear-gradient(180deg,#FBFCFE,#F6F8FB);border-bottom:1px solid #E9EDF3;
}
#tab-tasks .dt-daybadge{
  width:48px;height:48px;border-radius:13px;background:#14284D;color:#fff;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
}
#tab-tasks .dt-day.today .dt-daybadge{background:linear-gradient(135deg,#C9A227,#B08D1B);color:#1E1A08}
#tab-tasks .dt-daybadge b{font-family:var(--disp);font-size:18px;font-weight:800}
#tab-tasks .dt-daybadge span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-top:3px;opacity:.85}
#tab-tasks .dt-day-title b{font-family:var(--disp);font-size:15px;font-weight:750;letter-spacing:-.01em}
#tab-tasks .dt-pill{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:1px}
#tab-tasks .dt-pill.today{background:#14284D;color:#fff}
#tab-tasks .dt-pill.past{background:#ECEFF4;color:#5A6478}
#tab-tasks .dt-day-title .cnt{display:flex;gap:12px;font-size:11.5px;color:#68758A;margin-top:4px;flex-wrap:wrap}
#tab-tasks .dt-day-title .cnt b{font-weight:700}
#tab-tasks .dt-day-title .cnt .cbt{color:#2E7D53}
#tab-tasks .dt-day-title .cnt .cbd{color:#C64F3D}
#tab-tasks .dt-day-head .dt-day-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#tab-tasks .dt-minibar{height:6px;border-radius:99px;background:#E9EDF3;overflow:hidden;display:flex;width:150px}
#tab-tasks .dt-minibar i{display:block;height:100%}
#tab-tasks .dt-sec{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8A97AB;
  padding:12px 18px 6px;display:flex;align-items:center;gap:9px;
}
#tab-tasks .dt-sec::after{content:"";flex:1;height:1px;background:#EDF0F5}
#tab-tasks .dt-row{
  display:flex;align-items:flex-start;gap:13px;padding:13px 18px;border-bottom:1px solid #F0F3F7;
  transition:background .15s ease;
}
#tab-tasks .dt-row:last-child{border-bottom:none}
#tab-tasks .dt-row:hover{background:#F8FAFD}
#tab-tasks .dt-row.done{background:#FAFBFC}
#tab-tasks .dt-num{
  font-family:var(--mono);font-size:11px;font-weight:600;color:#8A97AB;flex-shrink:0;
  width:26px;height:26px;border-radius:8px;background:#F1F4F8;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
#tab-tasks .dt-row .dt-body{flex:1;min-width:0}
#tab-tasks .dt-title{font-weight:600;font-size:13.5px;color:#14213D;word-break:break-word}
#tab-tasks .dt-row.done .dt-title{color:#78859B;font-weight:450}
#tab-tasks .dt-row.bd .dt-title{text-decoration:line-through;text-decoration-color:#C4553B66}
#tab-tasks .dt-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:6px}
#tab-tasks .dt-owner{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#3E4E68;
  background:#F1F4F9;border:1px solid #E2E8F1;border-radius:999px;padding:3px 10px 3px 4px;
}
#tab-tasks .dt-avatar{
  width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#31568F,#1C3A6B);color:#fff;
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;
}
#tab-tasks .dt-prio{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 9px;border-radius:999px}
#tab-tasks .dt-prio i{width:6px;height:6px;border-radius:50%;display:inline-block}
#tab-tasks .dt-prio.High{background:#FCEBE7;color:#A9432F;border:1px solid #F0C8BF}#tab-tasks .dt-prio.High i{background:#C64F3D}
#tab-tasks .dt-prio.Medium{background:#FBF5DF;color:#7A6210;border:1px solid #E9DDAE}#tab-tasks .dt-prio.Medium i{background:#C9A227}
#tab-tasks .dt-prio.Low{background:#EFF2F6;color:#5A6478;border:1px solid #DDE3EC}#tab-tasks .dt-prio.Low i{background:#8A97AB}
#tab-tasks .dt-rep{font-family:var(--mono);font-size:10px;color:#2E4E7D;background:#E4ECF5;border:1px solid #C8D8EB;border-radius:999px;padding:3px 9px}
#tab-tasks .dt-meta select{min-height:28px;padding:3px 7px;font-size:11.5px;width:auto;border-radius:7px}
#tab-tasks .dt-do{display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
#tab-tasks .dt-out{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:5px 12px;border-radius:999px}
#tab-tasks .dt-out.bt{background:linear-gradient(135deg,#2E7D53,#3E9E6D);color:#fff;box-shadow:0 3px 8px rgba(46,125,83,.25)}
#tab-tasks .dt-out.bd{background:linear-gradient(135deg,#B0432F,#C64F3D);color:#fff;box-shadow:0 3px 8px rgba(198,79,61,.25)}
#tab-tasks .dt-empty{
  padding:46px 22px;text-align:center;color:#68758A;background:#fff;border:1px dashed #CBD5E2;border-radius:16px;
}
#tab-tasks .dt-empty .big{font-size:30px;margin-bottom:8px}
#tab-tasks details.dt-older{margin-top:4px}
#tab-tasks details.dt-older>summary{
  cursor:pointer;list-style:none;text-align:center;font-family:var(--disp);font-weight:650;font-size:12.5px;color:#3E4E68;
  background:#fff;border:1px solid #DCE3ED;border-radius:12px;padding:11px;margin-bottom:16px;user-select:none;
}
#tab-tasks details.dt-older>summary:hover{background:#F6F8FC;border-color:#B9C5D5}
#tab-tasks details.dt-older>summary::-webkit-details-marker{display:none}
@media(max-width:640px){
  #tab-tasks .dt-hero{padding:18px}
  #tab-tasks .dt-row{flex-wrap:wrap}
  #tab-tasks .dt-do{width:100%;justify-content:flex-start;padding-left:39px}
  #tab-tasks .dt-day-head .dt-day-actions{margin-left:0;width:100%}
}
@media print{#tab-tasks .dt-hero,#tab-tasks .dt-inputs{display:none}}

#tab-rec .cal-card{
  background:#fff;border:1px solid #E0E6EF;border-radius:16px;padding:20px;margin-top:18px;
  box-shadow:0 1px 2px rgba(15,31,61,.04),0 6px 18px rgba(15,31,61,.05);
}
#tab-rec .cal-head{display:flex;align-items:center;gap:11px;margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid #EEF1F6;flex-wrap:wrap}
#tab-rec .cal-head .cal-ic{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#14284D,#22406F);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
#tab-rec .cal-head b{font-family:var(--disp);font-size:14px;font-weight:700;display:block}
#tab-rec .cal-head small{font-size:11.5px;color:#748198;display:block;margin-top:1px}
#tab-rec .cal-head .cal-admin{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:#FBF5DF;color:#7A6210;border:1px solid #E9DDAE;border-radius:999px;padding:4px 11px}
#tab-rec .cal-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
#tab-rec .cal-filters button{
  border:1px solid #D6DEE9;background:#fff;color:#3E4E68;border-radius:999px;
  padding:5px 13px;font-size:12px;font-weight:600;
}
#tab-rec .cal-filters button.on{background:#14284D;border-color:#14284D;color:#fff}
#tab-rec .cal-row{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid #F0F3F7}
#tab-rec .cal-row:last-child{border-bottom:none}
#tab-rec .cal-row.gone{background:#FDF7F5;border-radius:10px;padding-left:10px;padding-right:10px}
#tab-rec .cal-act{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;flex-shrink:0;margin-top:2px;
}
#tab-rec .cal-act.recorded{background:#EAF3ED;color:#2E7D53;border:1px solid #BFDECB}
#tab-rec .cal-act.edited{background:#E4ECF5;color:#2E4E7D;border:1px solid #C8D8EB}
#tab-rec .cal-act.deleted{background:#FCEBE7;color:#A9432F;border:1px solid #F0C8BF}
#tab-rec .cal-act.restored{background:#FBF5DF;color:#7A6210;border:1px solid #E9DDAE}
#tab-rec .cal-body{flex:1;min-width:0}
#tab-rec .cal-body .who{font-size:12px;color:#3E4E68}
#tab-rec .cal-body .who b{font-weight:700;color:#14213D}
#tab-rec .cal-body .when{font-family:var(--mono);font-size:10.5px;color:#8A97AB;margin-left:7px}
#tab-rec .cal-text{margin-top:5px;font-size:13px;color:#14213D;background:#F7F9FC;border:1px solid #E7ECF3;border-radius:9px;padding:8px 11px;word-break:break-word}
#tab-rec .cal-text.old{background:#FBF3F1;border-color:#F0D6CF;color:#7A4436;text-decoration:line-through}
#tab-rec .cal-text .lbl{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#98A5B8;text-decoration:none;margin-bottom:3px}
#tab-rec .cal-restore{flex-shrink:0;margin-top:2px}
#tab-rec .cal-empty{padding:24px;text-align:center;color:#68758A;font-size:12.5px;background:#FAFBFD;border:1px dashed #D6DEE9;border-radius:10px}
#tab-rec .cal-more{display:block;margin:12px auto 0;border:1px solid #D6DEE9;background:#fff;border-radius:9px;padding:7px 16px;font-size:12px;font-weight:600;color:#3E4E68}
.r2-note{position:relative;padding-right:44px !important}
.r2-note .cal-del-note{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:11px;line-height:1.4}

#tab-onboard .ob-hero{
  background:linear-gradient(115deg,#0F1F3D 0%,#16305B 58%,#1C3A6B 100%);
  border-radius:18px;color:#fff;padding:20px 24px;margin-bottom:16px;
  position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(15,31,61,.22);
}
#tab-onboard .ob-hero::before{content:"";position:absolute;right:-70px;top:-90px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.28),transparent 70%)}
#tab-onboard .ob-hero .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#C9A227;margin-bottom:6px}
#tab-onboard .ob-hero h2{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.02em}
#tab-onboard .ob-hero .sub{font-size:12.5px;color:#AFC0DD;margin-top:5px}
#tab-onboard .ob-hero .ob-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:1}
#tab-onboard .ob-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 14px;min-width:86px}
#tab-onboard .ob-stat .n{font-family:var(--mono);font-size:20px;font-weight:600;line-height:1}
#tab-onboard .ob-stat .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#A9BBDA;margin-top:4px}
#tab-onboard .ob-stat.due .n{color:#F2C069}

#tab-onboard .ob-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
#tab-onboard .ob-toolbar input,#tab-onboard .ob-toolbar select{width:auto;min-width:170px}
#tab-onboard .ob-toolbar .hint{font-size:11.5px;color:#68758A;margin-left:auto}

#tab-onboard .ob-board{display:flex;gap:13px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
#tab-onboard .ob-col{
  flex:0 0 262px;background:#F3F6FA;border:1px solid #E0E6EF;border-radius:14px;
  display:flex;flex-direction:column;max-height:74vh;
}
#tab-onboard .ob-col.dragover{outline:2px dashed #31568F;outline-offset:-4px;background:#EDF3FB}
#tab-onboard .ob-col-h{
  display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid #E4E9F1;
  position:sticky;top:0;background:inherit;border-radius:14px 14px 0 0;
}
#tab-onboard .ob-col-h i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
#tab-onboard .ob-col-h b{font-family:var(--disp);font-size:12px;font-weight:750;letter-spacing:-.01em;color:#14213D}
#tab-onboard .ob-col-h .cnt{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:600;background:#fff;border:1px solid #DCE3ED;border-radius:999px;padding:2px 9px;color:#5A6478}
#tab-onboard .ob-col-h small{display:block;font-size:9.5px;color:#8A97AB;font-weight:400;margin-top:1px}
#tab-onboard .ob-cards{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
#tab-onboard .ob-card{
  background:#fff;border:1px solid #E2E8F1;border-radius:11px;padding:11px 12px;
  box-shadow:0 1px 2px rgba(15,31,61,.05);cursor:grab;transition:box-shadow .15s ease,transform .15s ease;
}
#tab-onboard .ob-card:hover{box-shadow:0 6px 16px rgba(15,31,61,.11);transform:translateY(-1px)}
#tab-onboard .ob-card.dragging{opacity:.5}
#tab-onboard .ob-name{font-family:var(--disp);font-weight:750;font-size:13px;color:#14213D;display:flex;align-items:center;gap:7px}
#tab-onboard .ob-name .open{margin-left:auto;font-size:11px;color:#31568F;cursor:pointer;border:1px solid #C8D8EB;border-radius:6px;padding:1px 7px;background:#F4F8FC}
#tab-onboard .ob-role{font-size:11.5px;color:#5A6478;margin-top:3px}
#tab-onboard .ob-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
#tab-onboard .ob-chip{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:999px;background:#EFF3F8;color:#3E4E68;border:1px solid #E0E7F0}
#tab-onboard .ob-chip.office{background:#E4ECF5;color:#2E4E7D;border-color:#C8D8EB}
#tab-onboard .ob-chip.hr{background:#FBF5DF;color:#7A6210;border-color:#E9DDAE}
#tab-onboard .ob-chip.fu-due{background:#FCEBE7;color:#A9432F;border-color:#F0C8BF;cursor:pointer}
#tab-onboard .ob-chip.fu-done{background:#EAF3ED;color:#2E7D53;border-color:#BFDECB}
#tab-onboard .ob-chip.fu-wait{background:#EFF2F6;color:#68758A;border-color:#DDE3EC}
#tab-onboard .ob-chip.doc{background:#F4F8FC;color:#31568F;border-color:#C8D8EB;text-decoration:none;cursor:pointer}
#tab-onboard .ob-det{margin-top:8px;border-top:1px dashed #E4E9F1;padding-top:7px;display:flex;flex-direction:column;gap:3px}
#tab-onboard .ob-det-row{display:flex;gap:8px;font-size:11px;line-height:1.45}
#tab-onboard .ob-det-row .k{flex:0 0 62px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#8A97AB;padding-top:1px}
#tab-onboard .ob-det-row .v{color:#3E4E68;word-break:break-word}
#tab-onboard .ob-join{display:flex;gap:6px;align-items:center;margin-top:8px}
#tab-onboard .ob-join label{margin:0;font-size:9px;white-space:nowrap}
#tab-onboard .ob-join input{min-height:28px;padding:3px 6px;font-size:11px}
#tab-onboard .ob-card select{min-height:28px;padding:3px 6px;font-size:11px;width:100%;margin-top:7px}
#tab-onboard .ob-empty-col{font-size:11px;color:#98A5B8;text-align:center;padding:14px 6px;border:1px dashed #D6DEE9;border-radius:9px}
#tab-onboard .ob-empty{padding:44px 22px;text-align:center;color:#68758A;background:#fff;border:1px dashed #CBD5E2;border-radius:16px}
#tab-onboard .ob-note{font-size:11.8px;color:#68758A;background:#F8FAFC;border-left:3px solid var(--marigold);padding:9px 12px;border-radius:0 9px 9px 0;margin-top:12px;line-height:1.55}
@media print{#tab-onboard .ob-hero{display:none}#tab-onboard .ob-board{flex-wrap:wrap}}

#tab-rec, #tab-onboard{
  --nt-bg:#FFFFFF; --nt-col-bg:#F7F7F5; --nt-border:#E9E9E7; --nt-border-strong:#DFDEDA;
  --nt-text:#37352F; --nt-text-light:#787774; --nt-hover:#F1F1EF; --nt-accent:#2383E2;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--nt-text);
}

/* ---- page header (replaces gradient hero for onboarding; plain header look for recruitment) ---- */
#tab-onboard .ob-hero{
  background:var(--nt-bg);color:var(--nt-text);border:1px solid var(--nt-border);
  border-radius:8px;box-shadow:none;padding:18px 20px 20px;
}
#tab-onboard .ob-hero::before{display:none}
#tab-onboard .ob-hero .k{color:var(--nt-text-light);font-family:inherit;letter-spacing:.08em}
#tab-onboard .ob-hero h2{font-family:inherit;font-weight:700;color:var(--nt-text);letter-spacing:0}
#tab-onboard .ob-hero .sub{color:var(--nt-text-light)}
#tab-onboard .ob-stat{background:var(--nt-col-bg);border:1px solid var(--nt-border);border-radius:6px;padding:7px 13px}
#tab-onboard .ob-stat .n{color:var(--nt-text);font-family:inherit;font-weight:600}
#tab-onboard .ob-stat .l{color:var(--nt-text-light)}
#tab-onboard .ob-stat.due .n{color:#C4554D}

/* ---- view switcher (Notion's Board/Table tabs: plain text, soft pill on the active one) ---- */
#tab-rec .r2-nav{gap:2px;margin-bottom:10px}
#tab-rec .r2-nav button{
  background:transparent;border:1px solid transparent;color:var(--nt-text-light);
  font-family:inherit;font-weight:500;border-radius:6px;padding:6px 10px;box-shadow:none;
}
#tab-rec .r2-nav button:hover{background:var(--nt-hover);color:var(--nt-text);border-color:transparent}
#tab-rec .r2-nav button.on{background:var(--nt-hover);color:var(--nt-text);border-color:transparent;font-weight:600;box-shadow:none}
#tab-rec .r2-nav button b{opacity:.55;font-weight:500}

/* ---- toolbar (search/filter row) ---- */
#tab-onboard .ob-toolbar input,#tab-onboard .ob-toolbar select,
#tab-rec .card input,#tab-rec .card select{
  border:1px solid var(--nt-border-strong);border-radius:6px;background:var(--nt-bg);box-shadow:none;
}
#tab-onboard .ob-toolbar input:focus,#tab-onboard .ob-toolbar select:focus{box-shadow:0 0 0 1px var(--nt-accent);border-color:var(--nt-accent)}
#tab-onboard .ob-toolbar .hint{color:var(--nt-text-light)}

/* ---- kanban board shell ---- */
#tab-rec .r2-board,#tab-onboard .ob-board{padding:2px 2px 12px;gap:10px}
#tab-rec .r2-col{
  background:var(--nt-col-bg);border:1px solid var(--nt-border);border-top:1px solid var(--nt-border);
  border-radius:8px;padding:8px;
}
#tab-rec .r2-col.dragover,#tab-onboard .ob-col.dragover{background:#EDF3FB;border-color:var(--nt-accent);outline:none}
#tab-onboard .ob-col{background:var(--nt-col-bg);border:1px solid var(--nt-border);border-radius:8px}

/* colored dot instead of a heavy top border, Notion board-view style */
#tab-rec .r2-col{border-top-width:1px !important;position:relative;padding-top:14px}
#tab-rec .r2-col::before{
  content:"";position:absolute;left:18px;top:10px;width:8px;height:8px;border-radius:50%;
  background:var(--dot,#9B9A97);
}
#tab-rec .r2-col.st-Applied{--dot:#9B9A97}
#tab-rec .r2-col.st-CV{--dot:#9B9A97}
#tab-rec .r2-col.st-Screening{--dot:#DFAB01}
#tab-rec .r2-col.st-1st{--dot:#337EA9}
#tab-rec .r2-col.st-2nd{--dot:#337EA9}
#tab-rec .r2-col.st-3rd{--dot:#0B6E99}
#tab-rec .r2-col.st-Interview{--dot:#337EA9}
#tab-rec .r2-col.st-Waiting{--dot:#DFAB01}
#tab-rec .r2-col.st-Offer{--dot:#9065B0}
#tab-rec .r2-col.st-Hired{--dot:#448361}
#tab-rec .r2-col.st-Rejected{--dot:#D44C47}
#tab-rec .r2-col.st-Unqualified{--dot:#D44C47}
#tab-rec .r2-col.st-Archived{--dot:#9B9A97}
#tab-rec .r2-col.st-Back-up{--dot:#9065B0}
#tab-rec .r2-col.st-Resigned{--dot:#605F5B}
#tab-rec .r2-col.st-Trainee\/Temporary{--dot:#4FA687}
#tab-rec .r2-col.st-Immediate{--dot:#448361}

#tab-rec .r2-col-h{padding:0 6px 8px 22px;margin-bottom:6px;border-bottom:1px solid var(--nt-border)}
#tab-rec .r2-col-h span{color:var(--nt-text);font-family:inherit;font-weight:600;font-size:12.5px;letter-spacing:0;text-transform:none}
#tab-rec .r2-col-h b{background:transparent;border:none;color:var(--nt-text-light);font-family:inherit;font-weight:500;padding:0}

#tab-onboard .ob-col-h{border-bottom:1px solid var(--nt-border);background:var(--nt-col-bg)}
#tab-onboard .ob-col-h b{font-family:inherit;color:var(--nt-text);font-weight:600;letter-spacing:0}
#tab-onboard .ob-col-h .cnt{background:transparent;border:none;color:var(--nt-text-light);font-family:inherit}
#tab-onboard .ob-col.onb-Joined .ob-col-h i,.ats-col.onb-Joined .ob-col-h i{background:#448361}
#tab-onboard .ob-col.onb-Cancelled .ob-col-h i{background:#D44C47}
#tab-onboard .ob-col.onb-Hired .ob-col-h i{background:#DFAB01}

/* ---- cards: flat white, hairline border, shadow only on hover ---- */
#tab-rec .r2-ccard,#tab-onboard .ob-card{
  background:var(--nt-bg);border:1px solid var(--nt-border);border-radius:6px;
  box-shadow:none;padding:9px 10px;
}
#tab-rec .r2-ccard:hover,#tab-onboard .ob-card:hover{
  border-color:var(--nt-border-strong);box-shadow:0 1px 3px rgba(15,15,15,.09);transform:none;
}
#tab-rec .r2-ccard .nm,#tab-onboard .ob-name{font-family:inherit;color:var(--nt-text);font-weight:600}
#tab-rec .r2-ccard .rl,#tab-onboard .ob-role{color:var(--nt-text-light)}
#tab-rec .r2-avatar{border-radius:5px;background:var(--nt-col-bg);border-color:var(--nt-border);color:var(--nt-text-light)}

/* ---- tags & chips → Notion select-tag pastels, small rounded rectangles ---- */
#tab-rec .tag,#tab-onboard .ob-chip{
  border-radius:4px;font-family:inherit;font-weight:500;letter-spacing:0;border:none;padding:2px 7px;font-size:11px;
}
#tab-rec .tag.stage-Applied,#tab-rec .tag.stage-CV{background:#E3E2E0;color:#32302C}
#tab-rec .tag.stage-Screening,#tab-rec .tag.stage-Waiting{background:#FBF3DB;color:#866300}
#tab-rec .tag.stage-Interview,#tab-rec .tag.stage-1st,#tab-rec .tag.stage-2nd,#tab-rec .tag.stage-3rd{background:#DDEBF1;color:#0B6E99}
#tab-rec .tag.stage-Offer,#tab-rec .tag.stage-Back-up{background:#E8DEEE;color:#6940A5}
#tab-rec .tag.stage-Hired,#tab-rec .tag.stage-Trainee\/Temporary,#tab-rec .tag.stage-Immediate{background:#DBEDDB;color:#256029}
#tab-rec .tag.stage-Rejected,#tab-rec .tag.stage-Unqualified{background:#FFE2DD;color:#C4554D}
#tab-rec .tag.stage-No,#tab-rec .tag.stage-Archived,#tab-rec .tag.stage-Resigned{background:#E3E2E0;color:#32302C}
#tab-rec .tag.expired,#tab-onboard .ob-chip.fu-due{background:#FFE2DD;color:#C4554D}
#tab-rec .tag.due,#tab-onboard .ob-chip.fu-wait{background:#FBF3DB;color:#866300}
#tab-rec .tag.ok,#tab-onboard .ob-chip.fu-done{background:#DBEDDB;color:#256029}
#tab-onboard .ob-chip.office{background:#DDEBF1;color:#0B6E99;border:none}
#tab-onboard .ob-chip.hr{background:#FBF3DB;color:#866300;border:none}
#tab-onboard .ob-chip.doc{background:#E3E2E0;color:#32302C;border:none}

/* ---- detail / notes ---- */
#tab-onboard .ob-det{border-top:1px solid var(--nt-border)}
#tab-onboard .ob-det-row .k{color:var(--nt-text-light)}
#tab-onboard .ob-det-row .v{color:var(--nt-text)}
#tab-onboard .ob-note{background:var(--nt-col-bg);border-left-color:var(--nt-accent);color:var(--nt-text-light)}
#tab-onboard .ob-empty,#tab-onboard .ob-empty-col{background:var(--nt-bg);border:1px dashed var(--nt-border-strong);color:var(--nt-text-light)}

/* ---- table view (Notion database table: hairline rows, no heavy header rule) ---- */
#tab-rec table{font-family:inherit}
#tab-rec th{
  font-family:inherit;text-transform:none;letter-spacing:0;font-weight:600;font-size:12px;
  color:var(--nt-text-light);border-bottom:1px solid var(--nt-border-strong);background:var(--nt-col-bg);
}
#tab-rec td{border-bottom:1px solid var(--nt-border);color:var(--nt-text)}
#tab-rec tr:hover td{background:var(--nt-hover)}
#tab-rec tr.branchgrp td{background:var(--nt-col-bg);color:var(--nt-text-light);border-color:var(--nt-border-strong)}

/* ---- buttons inside these two tabs ---- */
#tab-rec .btn,#tab-onboard .btn{
  border-color:var(--nt-border-strong);border-radius:6px;background:var(--nt-bg);color:var(--nt-text);
  font-family:inherit;font-weight:500;box-shadow:none;
}
#tab-rec .btn:hover,#tab-onboard .btn:hover{background:var(--nt-hover);border-color:var(--nt-border-strong)}
#tab-rec .btn.primary,#tab-onboard .btn.primary{background:var(--nt-accent);border-color:var(--nt-accent);color:#fff}
#tab-rec .btn.primary:hover,#tab-onboard .btn.primary:hover{background:#1A6FC4}

html[data-theme="dark"] #tab-rec, html[data-theme="dark"] #tab-onboard{
  --nt-bg:#2F3437; --nt-col-bg:#25282B; --nt-border:#3A3F42; --nt-border-strong:#4A4F52;
  --nt-text:#E9E9E7; --nt-text-light:#9B9A97; --nt-hover:#373C3F;
}

#hrbot-fab{position:fixed;right:20px;bottom:20px;z-index:180;width:54px;height:54px;border-radius:50%;
  background:var(--pine);color:#fff;border:none;font-size:23px;box-shadow:0 6px 20px rgba(20,33,61,.35);
  display:none;align-items:center;justify-content:center;transition:transform .15s;touch-action:none;cursor:grab}
#hrbot-fab:hover{transform:scale(1.07)}
#hrbot-fab.dragging{cursor:grabbing;transition:none;transform:scale(1.04)}
#hrbot-fab .badge{position:absolute;top:-3px;right:-3px;background:var(--brick);color:#fff;font-family:var(--mono);
  font-size:10px;font-weight:600;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
#hrbot-panel{position:fixed;right:20px;bottom:86px;z-index:181;width:min(380px,calc(100vw - 32px));
  height:min(540px,calc(100vh - 130px));background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 48px rgba(20,33,61,.28);display:none;flex-direction:column;overflow:hidden}
#hrbot-panel.open{display:flex}
.hrbot-head{background:var(--ink);color:#fff;padding:12px 15px;display:flex;align-items:center;gap:10px;touch-action:none;cursor:grab}
.hrbot-head.dragging{cursor:grabbing}
.hrbot-head .t{font-family:var(--disp);font-weight:700;font-size:14.5px;flex:1}
.hrbot-head .s{font-family:var(--mono);font-size:10px;color:#9AA8C4;display:block;margin-top:1px}
.hrbot-head button{background:none;border:none;color:#9AA8C4;font-size:17px;padding:2px 6px}
.hrbot-head button:hover{color:#fff}
#hrbot-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;background:var(--paper)}
.hrbot-msg{max-width:86%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.hrbot-msg.user{align-self:flex-end;background:var(--pine);color:#fff;border-bottom-right-radius:4px}
.hrbot-msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.hrbot-msg.bot b{color:var(--pine)}
.hrbot-msg.bot .rd{color:var(--brick);font-weight:600}
.hrbot-msg.bot .am{color:#A5821B;font-weight:600}
.hrbot-msg a.hb-go{color:var(--pine);font-weight:600;text-decoration:underline;cursor:pointer}
.hrbot-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid var(--line);background:var(--card)}
.hrbot-chips button{font-size:11px;border:1px solid var(--line);background:var(--pine-soft);color:var(--pine);
  border-radius:999px;padding:4px 10px;font-weight:600}
.hrbot-chips button:hover{border-color:var(--pine)}
.hrbot-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--card)}
.hrbot-input input{flex:1}
.hrbot-input button{background:var(--pine);color:#fff;border:none;border-radius:7px;padding:0 15px;font-weight:600;font-size:13px}
.hrbot-input button:hover{background:#16264A}
@media print{#hrbot-fab,#hrbot-panel{display:none !important}}

/* ---------- design tokens ---------- */
:root{
  --paper:#F3F5FA; --card:#FFFFFF; --ink:#101A33; --muted:#66738C;
  --pine:#2A4DA0; --pine-deep:#152A5C;
  --pine-soft:#EAF0FC; --marigold:#D7A422; --marigold-soft:#FBF3DA;
  --brick:#D14E36; --brick-soft:#FBE9E4; --line:#E4E9F2;
  --disp:'Sora',sans-serif; --body:'Inter',sans-serif;
  --shadow-sm:0 1px 2px rgba(16,26,51,.05),0 6px 18px rgba(16,26,51,.06);
  --shadow-md:0 14px 40px rgba(16,26,51,.12);
  --radius:14px;
  --grad-primary:linear-gradient(135deg,#2A4DA0 0%,#152A5C 100%);
  --grad-accent:linear-gradient(90deg,#D7A422,#2A4DA0);
}
body{
  background:
    radial-gradient(60rem 30rem at 110% -10%,rgba(42,77,160,.07),transparent),
    radial-gradient(50rem 26rem at -10% 110%,rgba(215,164,34,.06),transparent),
    linear-gradient(180deg,#F7F9FD,#F1F4FA);
  font-size:14px; letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header: sticky, frosted, gradient hairline ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(16,26,51,.03);
  padding:13px 24px;
}
header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--grad-accent); opacity:.85;
}
.brand h1{font-size:19.5px; letter-spacing:-.02em}
.brand h1::before{
  width:26px; height:26px; border-radius:8px; margin-right:11px; vertical-align:-6px;
  background:var(--grad-primary);
  box-shadow:0 4px 10px rgba(42,77,160,.35), inset 0 0 0 1.5px rgba(255,255,255,.25);
}
.who{background:var(--pine-soft); color:var(--pine-deep); padding:5px 11px; border-radius:999px; font-weight:500}

/* ---------- brand logo (login + header) ---------- */
.brand{display:flex; align-items:center; gap:12px}
.brand .header-logo{height:36px; width:auto; display:block}
.brand .header-logo + h1::before{display:none}   /* hide the badge square when the logo is shown */
.login-logo{display:block; height:60px; width:auto; margin:2px auto 18px}

/* ---------- action queue: dark glass ribbon ---------- */
.queue{
  background:linear-gradient(100deg,#101A33 0%,#1B2C55 60%,#22355F 100%);
  padding:11px 24px; box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
.chip{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.chip:hover{transform:translateY(-1px); background:rgba(255,255,255,.12); border-color:var(--marigold)}
.chip .ic{transition:transform .15s ease}
.chip:hover .ic{transform:scale(1.08)}

/* ---------- nav: pill tabs ---------- */
nav{
  position:sticky; top:59px; z-index:59;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  gap:6px; padding:9px 22px; border-bottom:1px solid var(--line);
}
nav button{
  border:1px solid transparent; border-radius:999px; padding:8px 15px;
  font-size:13px; transition:all .16s ease; border-bottom:1px solid transparent;
}
nav button:hover{background:var(--pine-soft); color:var(--pine-deep)}
nav button.active{
  color:#fff; background:var(--grad-primary); border-bottom-color:transparent;
  box-shadow:0 5px 14px rgba(42,77,160,.32);
}

/* ---------- cards: elevated, hover lift ---------- */
.card{
  border-radius:var(--radius); border-color:var(--line);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease,transform .2s ease;
}
.card:hover{box-shadow:var(--shadow-md)}
.card h3{letter-spacing:.11em; color:#7C88A0}
.kpi{position:relative; overflow:hidden}
.kpi::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:var(--grad-primary); border-radius:0 4px 4px 0; opacity:.9;
}
.kpi.alert::before{background:linear-gradient(180deg,#D14E36,#A33B27)}
.kpi.warn::before{background:linear-gradient(180deg,#D7A422,#A5821B)}
.kpi .num{font-size:32px; letter-spacing:-.02em}
.kpi .lbl{font-weight:500}

/* ---------- buttons ---------- */
.btn{
  border-radius:9px; border-color:#D5DDEA; font-weight:600;
  transition:all .16s ease; box-shadow:0 1px 2px rgba(16,26,51,.05);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,26,51,.1); background:var(--pine-soft)}
.btn:active{transform:translateY(0)}
.btn.primary,.btn.bt{
  background:var(--grad-primary); border:none; color:#fff;
  box-shadow:0 5px 16px rgba(42,77,160,.32);
}
.btn.primary:hover,.btn.bt:hover{filter:brightness(1.1); background:var(--grad-primary); box-shadow:0 7px 20px rgba(42,77,160,.4)}
.btn.danger,.btn.bd{box-shadow:none}
.btn.danger:hover,.btn.bd:hover{background:var(--brick-soft); transform:translateY(-1px)}

/* ---------- inputs ---------- */
input,select,textarea{
  border-radius:10px; border-color:#D8E0EC; background:#FCFDFF;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:hover,select:hover,textarea:hover{border-color:#B9C6DC}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--pine);
  box-shadow:0 0 0 3.5px rgba(42,77,160,.14);
}
button:focus-visible{outline:2px solid var(--pine); outline-offset:2px}
label{color:#7C88A0}

/* ---------- tables ---------- */
table{font-size:13.2px}
th{border-bottom:1px solid var(--line); background:#F7F9FC; color:#7C88A0; padding:9px 10px}
th:first-child{border-radius:8px 0 0 8px} th:last-child{border-radius:0 8px 8px 0}
td{padding:11px 10px; border-bottom-color:#EDF0F6}
tr:hover td{background:#F6F8FC}
tr:last-child td{border-bottom:none}

/* ---------- tags ---------- */
.tag{padding:4px 11px; font-weight:600; letter-spacing:.04em; box-shadow:inset 0 0 0 1px rgba(16,26,51,.04)}
.tag.expired{background:linear-gradient(135deg,#D14E36,#B03A24); box-shadow:0 2px 8px rgba(209,78,54,.3)}
.tag.stage-Hired,.tag.bt{background:var(--grad-primary); box-shadow:0 2px 8px rgba(42,77,160,.28)}

/* ---------- login screen ---------- */
#loginScreen{
  background:
    radial-gradient(50rem 30rem at 80% 10%,rgba(215,164,34,.14),transparent),
    radial-gradient(45rem 30rem at 10% 90%,rgba(42,77,160,.28),transparent),
    linear-gradient(140deg,#0C1428,#152A5C 70%,#1B355F);
}
.login-card{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-radius:20px; padding:38px 34px;
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.8);
  animation:loginIn .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes loginIn{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
.login-card h1{font-size:24px}
.login-card h1::before{
  content:""; display:block; width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  background:var(--grad-primary); box-shadow:0 8px 20px rgba(42,77,160,.4);
}

/* ---------- toast, scrollbars, misc ---------- */
.toast{
  border-radius:12px; padding:12px 20px;
  background:rgba(16,26,51,.94); backdrop-filter:blur(8px);
  box-shadow:0 12px 32px rgba(16,26,51,.35);
}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C6CFDE; border-radius:99px; border:2.5px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:#A9B6CC}
a.mailbtn{border-radius:8px; transition:all .15s ease}
a.mailbtn:hover{transform:translateY(-1px); box-shadow:0 3px 10px rgba(42,77,160,.18)}
main{padding-top:24px}
main > section > .grid:first-child{animation:fadeUp .4s ease both}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- assistant polish ---------- */
#hrbot-fab{background:var(--grad-primary); box-shadow:0 10px 26px rgba(42,77,160,.45)}
#hrbot-panel{border-radius:18px; box-shadow:0 24px 64px rgba(16,26,51,.32); border:none}
.hrbot-head{background:linear-gradient(120deg,#101A33,#1B2C55)}
.hrbot-msg.user{background:var(--grad-primary)}
.hrbot-msg{box-shadow:0 1px 3px rgba(16,26,51,.06)}

/* ---------- accessibility & print ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}
@media print{
  header,nav{position:static; background:#fff; backdrop-filter:none}
  header::after{display:none}
  body{background:#fff}
  .card{box-shadow:none}
}
@media (max-width:640px){
  header{padding:11px 14px}
  nav{padding:8px 12px; top:auto; position:static}
  main{padding-left:14px; padding-right:14px}
  .kpi .num{font-size:26px}
}

#erp-sync{display:inline-flex;align-items:center;gap:8px;background:var(--pine-soft);
  border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px;
  font-family:var(--mono);font-size:11px;color:var(--pine-deep,#152A5C);white-space:nowrap}
#erp-sync .edot{width:8px;height:8px;border-radius:50%;background:#9AA8C4;flex-shrink:0}
#erp-sync.ok .edot{background:#2E9B62;box-shadow:0 0 0 3px rgba(46,155,98,.18)}
#erp-sync.err .edot{background:var(--brick);box-shadow:0 0 0 3px rgba(209,78,54,.18)}
#erp-sync.busy .edot{background:var(--marigold);animation:erpPulse 1s infinite}
@keyframes erpPulse{50%{opacity:.35}}
#erp-sync button{background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;color:var(--pine);
  font-family:var(--body);transition:all .15s}
#erp-sync button:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
#erp-sync button:disabled{opacity:.5;cursor:default}
.tag.erp-src{background:#E8F3EE;color:#1F6B45;margin-left:6px}
@media(max-width:760px){#erp-sync .etxt{display:none}}
@media print{#erp-sync{display:none}}
@media (prefers-reduced-motion: reduce){#erp-sync.busy .edot{animation:none}}

#attn-card .attn-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
#attn-card .attn-kpi{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-align:center}
#attn-card .attn-kpi .n{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.1}
#attn-card .attn-kpi .l{font-size:10.5px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
#attn-card .attn-kpi.good .n{color:#2E9B62}
#attn-card .attn-kpi.bad .n{color:var(--brick)}
#attn-card .attn-kpi.warn .n{color:#A5821B}
#attn-card .attn-kpi.info .n{color:var(--pine)}
#attn-card .attn-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
#attn-card .attn-bar select{width:auto;min-width:130px;padding:4px 8px;font-size:12px}
#attn-card .attn-bar input[type=date]{width:auto;padding:3px 7px;font-size:12px}
#attn-card .attn-bar button{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--ink)}
#attn-card .attn-bar button:hover{border-color:var(--marigold)}
#attn-card .attn-bar button.on{background:var(--pine);border-color:var(--pine);color:#fff}
#attn-card table{width:100%;border-collapse:collapse;font-size:12.5px}
#attn-card th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:5px 6px;border-bottom:2px solid var(--line)}
#attn-card td{padding:6px;border-bottom:1px solid var(--line)}
#attn-card td.num{font-family:var(--mono);text-align:right}
#attn-card td.num.bad{color:var(--brick);font-weight:600}
#attn-card td.num.warn{color:#A5821B;font-weight:600}
#attn-card td.num.good{color:#2E9B62;font-weight:600}
#attn-card td.tm{font-family:var(--mono);font-size:11.5px;white-space:nowrap}
#attn-card .attn-emp-wrap{max-height:290px;overflow-y:auto;border:1px solid var(--line);border-radius:8px}
#attn-card .attn-emp-wrap table th{position:sticky;top:0;background:var(--card);z-index:1}
#attn-card .mini{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:600;cursor:pointer;color:var(--ink);white-space:nowrap}
#attn-card .mini:hover{border-color:var(--pine);background:var(--pine-soft)}
#attn-card .mini.out{color:var(--brick)}
#attn-card .mini.out:hover{border-color:var(--brick);background:var(--brick-soft)}
#attn-card .mini:disabled{opacity:.4;cursor:default}
#attn-card .attn-foot{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
#attn-card .attn-foot button{background:none;border:1px solid var(--line);border-radius:6px;padding:2px 9px;font-size:10.5px;color:inherit;cursor:pointer}
#attn-card .attn-foot button:hover{border-color:var(--marigold)}
#attn-card .st-in{color:#2E9B62;font-weight:600}
#attn-card .st-out{color:var(--muted)}
#attn-card .st-no{color:var(--brick)}
#attn-card .st-lv{color:#A5821B}
/* ---- leave viewer modal ---- */
#attn-leave-modal{position:fixed;inset:0;background:rgba(20,33,61,.55);z-index:90;display:flex;align-items:center;justify-content:center;padding:18px}
#attn-leave-modal .box{background:var(--card);border-radius:12px;max-width:760px;width:100%;max-height:84vh;display:flex;flex-direction:column;overflow:hidden}
#attn-leave-modal .box h3{font-family:var(--disp);font-size:14px;font-weight:700;padding:14px 18px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:10px}
#attn-leave-modal .box h3 button{background:none;border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer}
#attn-leave-modal .lv-bar{display:flex;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
#attn-leave-modal .lv-bar select,#attn-leave-modal .lv-bar input{width:auto;min-width:120px;padding:4px 8px;font-size:12px}
#attn-leave-modal .lv-body{overflow-y:auto;padding:0 18px 16px}
#attn-leave-modal table{width:100%;border-collapse:collapse;font-size:12.5px}
#attn-leave-modal th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 6px;border-bottom:2px solid var(--line);position:sticky;top:0;background:var(--card)}
#attn-leave-modal td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
#attn-leave-modal .mono{font-family:var(--mono);font-size:11.5px}

/* ---- section headers ---- */
#tab-dash .hrr-section{margin:26px 0 0}
#tab-dash .hrr-section:first-of-type{margin-top:18px}
#tab-dash .hrr-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;border-bottom:2px solid var(--ink);padding-bottom:7px}
#tab-dash .hrr-head .no{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--marigold);background:var(--ink);border-radius:4px;padding:2px 8px}
#tab-dash .hrr-head h2{font-family:var(--disp);font-size:15px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
#tab-dash .hrr-head .rule{flex:1}
#tab-dash .hrr-head .cnt{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
/* ---- aligned grids ---- */
#tab-dash .hrr-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px;align-items:stretch}
#tab-dash .hrr-grid>.glass{grid-column:span 6;margin:0;display:flex;flex-direction:column;height:100%}
#tab-dash .hrr-grid>.glass.hrr-s4{grid-column:span 4}
#tab-dash .hrr-grid>.glass.hrr-s5{grid-column:span 5}
#tab-dash .hrr-grid>.glass.hrr-s7{grid-column:span 7}
#tab-dash .hrr-grid>.glass.hrr-s8{grid-column:span 8}
#tab-dash .hrr-grid>.glass.hrr-s12{grid-column:span 12}
@media(max-width:980px){#tab-dash .hrr-grid>.glass{grid-column:span 12 !important}}
#tab-dash .hrr-grid>.glass>h3{min-height:34px;align-items:center}
/* ---- Daily Tasks by Member ---- */
#hrr-team .tt-bar{height:7px;background:#EDF1F7;border-radius:99px;overflow:hidden;min-width:90px}
#hrr-team .tt-bar i{display:block;height:100%;background:linear-gradient(90deg,#1C2E54,#3A5488);border-radius:99px}
#hrr-team td.num{font-family:var(--mono);text-align:right}
#hrr-team td.num.bad{color:var(--brick);font-weight:600}
#hrr-team td.num.warn{color:#A5821B;font-weight:600}
#hrr-team td.num.good{color:#2E9B62;font-weight:600}
#hrr-team tr.total td{border-top:2px solid var(--ink);font-weight:700;background:#F7F9FD}
#hrr-team .pct{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px}
/* ---- Daily Tasks by Member card, when shown in the Tasks section / dashboard ---- */
.tbm .tt-bar{height:7px;background:#EDF1F7;border-radius:99px;overflow:hidden;min-width:90px}
.tbm .tt-bar i{display:block;height:100%;background:linear-gradient(90deg,#1C2E54,#3A5488);border-radius:99px}
.tbm td.num{font-family:var(--mono);text-align:right}
.tbm td.num.bad{color:var(--brick);font-weight:600}
.tbm td.num.warn{color:#A5821B;font-weight:600}
.tbm td.num.good{color:#2E9B62;font-weight:600}
.tbm tr.total td{border-top:2px solid var(--ink);font-weight:700;background:#F7F9FD}
.tbm .pct{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px}
/* per-member BT/BD mark list */
.tbm tr.tbm-mark>td{background:#F7F9FD;padding:6px 10px 10px}
.tbm .tbm-task{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 8px;border:1px solid var(--line-soft,#E9ECF2);border-radius:7px;background:#fff;margin-top:6px}
.tbm .tbm-task .tt{font-size:12.5px;color:var(--ink)}
.tbm .tbm-task .tt .od{font:600 9.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  color:var(--brick);border:1px solid #E7C3B9;border-radius:99px;padding:2px 6px;margin-left:6px}
.tbm .tbm-b{display:inline-flex;gap:6px;white-space:nowrap;flex-wrap:wrap;justify-content:flex-end}
.tbm .tbm-lock{font-size:11px;color:var(--faint,#8B94A8);font-style:italic}
.tbm .tbm-more{font-size:11px;color:var(--muted);margin:6px 2px 0}
.tbm .tbm-task .xt{font:600 9.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  color:#A5821B;border:1px solid #E7D6A6;border-radius:99px;padding:2px 6px;margin-left:6px}
.tbm .tbm-task.is-bt{opacity:.72}
.tbm .tbm-task.is-bd .tt{text-decoration:line-through;color:var(--muted)}
.tbm .dt-out{font:700 10.5px/1 var(--mono);letter-spacing:.04em;padding:5px 9px;border-radius:99px}
.tbm .dt-out.bt{background:#E9F4EE;color:#1E5B3A;border:1px solid #BBDCC9}
.tbm .dt-out.bd{background:#FAECE8;color:#8C3B2C;border:1px solid #ECC5B9}
/* ---- KPI drill-down ---- */
.xd-kpi{position:relative}
.xd-kpi .hrr-i{position:absolute;top:7px;right:8px;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:10.5px;font-weight:700;
  line-height:16px;text-align:center;cursor:pointer;z-index:2;font-family:var(--mono)}
.xd-kpi .hrr-i:hover{border-color:var(--marigold);color:var(--ink);background:var(--marigold-soft)}
#hrr-kpi-modal{position:fixed;inset:0;background:rgba(20,33,61,.55);z-index:95;display:flex;align-items:center;justify-content:center;padding:18px}
#hrr-kpi-modal .box{background:var(--card);border-radius:12px;max-width:780px;width:100%;max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
#hrr-kpi-modal .box>h3{font-family:var(--disp);font-size:14px;font-weight:800;padding:14px 18px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:10px}
#hrr-kpi-modal .box>h3 .v{font-family:var(--mono);font-size:20px;color:var(--pine)}
#hrr-kpi-modal .box>h3 button{background:none;border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer}
#hrr-kpi-modal .docu{display:grid;grid-template-columns:110px 1fr;gap:4px 14px;padding:12px 18px;border-bottom:1px solid var(--line);background:#F7F9FD;font-size:12.5px}
#hrr-kpi-modal .docu dt{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding-top:2px}
#hrr-kpi-modal .docu dd{margin:0;color:var(--ink)}
#hrr-kpi-modal .body{overflow-y:auto;padding:4px 18px 16px}
#hrr-kpi-modal table{width:100%;border-collapse:collapse;font-size:12.5px}
#hrr-kpi-modal th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 6px;border-bottom:2px solid var(--line);position:sticky;top:0;background:var(--card)}
#hrr-kpi-modal td{padding:8px 6px;border-bottom:1px solid var(--line)}
#hrr-kpi-modal .mono{font-family:var(--mono);font-size:11.5px}
/* ---- KPI definitions documentation panel ---- */
#hrr-defs table{width:100%;border-collapse:collapse;font-size:12px}
#hrr-defs th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:7px 8px;border-bottom:2px solid var(--ink)}
#hrr-defs td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
#hrr-defs td:first-child{font-weight:700;white-space:nowrap}
#hrr-defs td.mono{font-family:var(--mono);font-size:11px;color:var(--muted)}
/* ---- report meta strip ---- */
#tab-dash .hrr-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);margin:14px 0 0;
  border-top:1px solid var(--line);padding-top:8px}
#tab-dash .hrr-meta b{color:var(--ink)}
/* ---- print button ---- */
.hrr-print-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#EDF2FB;
  border-radius:7px;padding:7px 13px;font-weight:600;font-size:12.5px;cursor:pointer}
.hrr-print-btn:hover{border-color:var(--marigold);color:#fff}
/* ---- print stylesheet: clean A4 HR report ---- */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff !important}
  header,nav,.queue,.xd-range,#erp-sync,.hrr-print-btn,.attn-foot,#attn-card .attn-bar button,.no-print,
  .xd-kpi .hrr-i,#hrr-kpi-modal,#attn-leave-modal{display:none !important}
  main{padding:0 !important;max-width:none !important}
  #tab-dash .xd-hero{background:#fff !important;color:#14213D !important;border:none !important;box-shadow:none !important;padding:0 0 8px !important;margin-bottom:6px !important;border-bottom:3px solid #14213D !important;border-radius:0 !important}
  #tab-dash .xd-hero *{color:#14213D !important}
  #tab-dash .xd-clockwrap,#tab-dash .xd-ring{display:none !important}
  #tab-dash .glass{box-shadow:none !important;border:1px solid #C9D2E0 !important;break-inside:avoid;page-break-inside:avoid}
  #tab-dash .hrr-section{break-inside:auto;margin-top:14px}
  #tab-dash .hrr-head{break-after:avoid;page-break-after:avoid}
  .xd-kpi{border:1px solid #C9D2E0 !important;box-shadow:none !important}
  #attn-card .mini{display:none !important}
}

/* the chat assistant is a chat button, not a notification center */
#hrbot-badge{display:none !important}
/* rec filters */
.recf-cell select{width:100%}
/* activity log button */
#alog-btn{position:relative;border:1px solid var(--ink);background:var(--card);color:var(--ink);border-radius:7px;padding:7px 13px;font-weight:600;font-size:12.5px;cursor:pointer}
#alog-btn:hover{background:var(--pine-soft)}
/* activity log modal */
#alog-modal{position:fixed;inset:0;background:rgba(20,33,61,.55);z-index:96;display:flex;align-items:center;justify-content:center;padding:18px}
#alog-modal .box{background:var(--card);border-radius:12px;max-width:900px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
#alog-modal .box>h3{font-family:var(--disp);font-size:14px;font-weight:800;padding:14px 18px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:10px}
#alog-modal .box>h3 button{background:none;border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer}
#alog-modal .alog-bar{display:flex;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center}
#alog-modal .alog-bar select,#alog-modal .alog-bar input{width:auto;min-width:130px;padding:4px 8px;font-size:12px}
#alog-modal .alog-bar .n{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto}
#alog-modal .body{overflow-y:auto;padding:0 18px 16px}
#alog-modal table{width:100%;border-collapse:collapse;font-size:12.5px}
#alog-modal th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 6px;border-bottom:2px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
#alog-modal td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
#alog-modal td.mono{font-family:var(--mono);font-size:11px;white-space:nowrap;color:var(--muted)}
#alog-modal .rv{background:var(--card);border:1px solid var(--brick);color:var(--brick);border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
#alog-modal .rv:hover{background:var(--brick-soft)}
#alog-modal .rv:disabled{opacity:.45;cursor:default}
#alog-modal .tag.act-add{background:#E8F3EE;color:#1F6B45}
#alog-modal .tag.act-edit{background:#E4ECF5;color:#2E4E7D}
#alog-modal .tag.act-del{background:var(--brick-soft);color:var(--brick)}
#alog-modal .tag.act-undo{background:var(--marigold-soft);color:#7A6210}
#alog-modal .tag.act-login{background:#E4ECF5;color:#2E4E7D}
#alog-modal .tag.act-logout{background:#ECEFF4;color:#5A6478}
@media print{#alog-btn,#alog-modal{display:none !important}}

#ts-card .tx-kpis,#ex-card .tx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
#ex-card .tx-kpis{grid-template-columns:repeat(3,1fr)}
#ex-card .ex-stage-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
#ex-card .ex-group-lbl{font-size:10.5px;color:var(--muted);margin:14px 0 8px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:560px){#ex-card .ex-stage-kpis{grid-template-columns:repeat(2,1fr)}}
#ts-card .tx-kpi,#ex-card .tx-kpi{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-align:center}
#ts-card .tx-kpi .n,#ex-card .tx-kpi .n{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.1}
#ex-card .tx-kpi .n{font-size:18px}
#ts-card .tx-kpi .l,#ex-card .tx-kpi .l{font-size:10.5px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
#ts-card .tx-kpi.good .n,#ex-card .tx-kpi.good .n{color:#2E9B62}
#ts-card .tx-kpi.bad .n,#ex-card .tx-kpi.bad .n{color:var(--brick)}
#ts-card .tx-kpi.warn .n,#ex-card .tx-kpi.warn .n{color:#A5821B}
#ts-card .tx-kpi.info .n,#ex-card .tx-kpi.info .n{color:var(--pine)}
#ts-card .tx-bar,#ex-card .tx-bar,#leave-dash-card .tx-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
#ts-card .tx-bar select,#ex-card .tx-bar select,#leave-dash-card .tx-bar select{width:auto;min-width:118px;padding:4px 8px;font-size:12px}
#ts-card .tx-bar input,#ex-card .tx-bar input,#leave-dash-card .tx-bar input{width:auto;padding:3px 7px;font-size:12px}
#ts-card .tx-bar button,#ex-card .tx-bar button,#leave-dash-card .tx-bar button{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--ink)}
#ts-card .tx-bar button:hover,#ex-card .tx-bar button:hover,#leave-dash-card .tx-bar button:hover{border-color:var(--marigold)}
#ts-card .tx-bar button.on,#ex-card .tx-bar button.on,#leave-dash-card .tx-bar button.on{background:var(--pine);border-color:var(--pine);color:#fff}
#ts-card table,#ex-card table,#leave-dash-card table{width:100%;border-collapse:collapse;font-size:12.5px}
#ts-card th,#ex-card th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:5px 6px;border-bottom:2px solid var(--line)}
#ts-card td,#ex-card td{padding:6px;border-bottom:1px solid var(--line)}
#ts-card .num,#ex-card .num{text-align:right;font-family:var(--mono)}
#ts-card th.num,#ex-card th.num,#ts-card td.num,#ex-card td.num{text-align:right}
#ts-card .foot,#ex-card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;
  font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.tx-mini{height:6px;border-radius:99px;background:var(--pine-soft);overflow:hidden;min-width:52px}
.tx-mini i{display:block;height:100%;background:var(--pine);border-radius:99px}
.tx-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px}
.tx-pill.f{background:#E3F3E9;color:#1F6B42}
.tx-pill.m{background:var(--brick-soft);color:#8E3524}
.tx-pill.ap{background:#E3F3E9;color:#1F6B42}
.tx-pill.pe{background:var(--marigold-soft);color:#7A6210}
.tx-pill.rj{background:var(--brick-soft);color:#8E3524}
.tx-pill.dr{background:var(--pine-soft);color:var(--muted)}
html[data-theme="dark"] .tx-pill.f,html[data-theme="dark"] .tx-pill.ap{background:#12301F;color:#5FD494}
html[data-theme="dark"] .tx-pill.m,html[data-theme="dark"] .tx-pill.rj{background:#3A1B15;color:#F0836B}
html[data-theme="dark"] .tx-pill.pe{background:#3A3113;color:#E3BE4E}
html[data-theme="dark"] .tx-pill.dr{background:#1C2A4C;color:var(--muted)}

.r2-ccard{position:relative}
.r2-ccard .kd-del{
  position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:#8A96AC;
  font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .12s,color .12s,border-color .12s,background .12s;
  z-index:2;
}
.r2-ccard:hover .kd-del{opacity:1}
.r2-ccard .kd-del:hover{background:var(--brick);border-color:var(--brick);color:#fff}
html[data-theme="dark"] .r2-ccard .kd-del{background:#1B2740;border-color:#2E3F63;color:#8A96AC}
html[data-theme="dark"] .r2-ccard .kd-del:hover{background:var(--brick);border-color:var(--brick);color:#fff}
@media(hover:none){ .r2-ccard .kd-del{opacity:1} } /* always visible on touch devices */

#tab-attnsheet .ash-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#tab-attnsheet .ash-bar select,#tab-attnsheet .ash-bar input{width:auto;min-width:120px}
#tab-attnsheet .ash-bar button{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--ink);font-family:var(--body)}
#tab-attnsheet .ash-bar button:hover{border-color:var(--marigold)}
#tab-attnsheet .ash-bar button.on{background:var(--pine);border-color:var(--pine);color:#fff}
#tab-attnsheet .ash-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto}
#tab-attnsheet .ash-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;font-size:11.5px;color:var(--muted)}
#tab-attnsheet .ash-legend .lg{display:inline-flex;align-items:center;gap:6px}
#tab-attnsheet .ash-legend .sw{width:14px;height:14px;border-radius:3px;flex:none;display:inline-block}
#tab-attnsheet .ash-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:70vh}
#tab-attnsheet table.ash-grid{border-collapse:separate;border-spacing:0;font-size:12px;width:max-content}
#tab-attnsheet table.ash-grid th,#tab-attnsheet table.ash-grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;text-align:center}
#tab-attnsheet table.ash-grid thead th{background:var(--card);font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted);padding:6px 4px;position:sticky;top:0;z-index:2;white-space:nowrap}
#tab-attnsheet table.ash-grid thead th small{display:block;font-weight:400;color:#B7C1CF}
#tab-attnsheet table.ash-grid th.ash-emp,#tab-attnsheet table.ash-grid td.ash-emp{
  position:sticky;left:0;z-index:3;background:var(--card);text-align:left;padding:7px 10px;
  min-width:170px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:600;box-shadow:2px 0 4px rgba(15,31,61,.05);
}
#tab-attnsheet table.ash-grid th.ash-dept,#tab-attnsheet table.ash-grid td.ash-dept,
#tab-attnsheet table.ash-grid th.ash-branch,#tab-attnsheet table.ash-grid td.ash-branch{
  text-align:left;padding:7px 10px;min-width:110px;max-width:150px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:11.5px;background:var(--card);
}
#tab-attnsheet table.ash-grid thead th.ash-emp{z-index:4}
#tab-attnsheet table.ash-grid td.ash-day{width:38px;min-width:38px;height:30px;font-family:var(--mono);font-weight:700;font-size:10.5px;cursor:default}
#tab-attnsheet table.ash-grid td.ash-day.weekend{background:#FDF0F0}
#tab-attnsheet table.ash-grid thead th.weekend{background:#FBE3E3;color:#A8503C}
#tab-attnsheet table.ash-grid td.ash-day.weekend.cd-weekoff{background:#FBE3E3;color:#B36A55}
#tab-attnsheet table.ash-grid td.ash-sum{width:40px;min-width:40px;font-family:var(--mono);font-weight:700;font-size:10.5px;background:#F3F6FB;color:#16305C}
#tab-attnsheet table.ash-grid td.ash-sum.zero{color:#C7CDD8;font-weight:400}
#tab-attnsheet table.ash-grid thead th.ash-sum{background:#E7EDF6;color:#16305C}
#tab-attnsheet table.ash-grid td.ash-sum.first,#tab-attnsheet table.ash-grid thead th.ash-sum.first{border-left:2px solid var(--line)}
#tab-attnsheet .cd-present{background:var(--pine-soft);color:var(--pine)}
#tab-attnsheet .cd-absent{background:var(--brick-soft);color:var(--brick)}
#tab-attnsheet .cd-halfday{background:var(--marigold-soft);color:#7A6210}
#tab-attnsheet .cd-wfh{background:#E4ECF5;color:#2E4E7D}
#tab-attnsheet .cd-leave{background:#F0E4F5;color:#6E2E7D}
#tab-attnsheet .cd-planned{background:#FBF3D9;color:#7A6210;box-shadow:inset 0 0 0 1.5px #C9A227}
#tab-attnsheet .cd-holiday{background:#ECEFF4;color:#5A6478}
#tab-attnsheet .cd-blank{background:transparent;color:#C7CDD8}
#tab-attnsheet table.ash-grid td.ash-day.editable{cursor:pointer}
#tab-attnsheet table.ash-grid td.ash-day.editable:hover{outline:2px solid var(--marigold);outline-offset:-2px}
#tab-attnsheet table.ash-grid td.ash-day.manual::after{content:"";position:absolute;top:1px;right:1px;width:0;height:0;
  border-top:4px solid #2E8B57;border-left:4px solid transparent}
/* provisional = marked here for reference, NOT an approved leave application */
#tab-attnsheet table.ash-grid td.ash-day.prov{background:#FBF3D9;color:#7A6210;
  box-shadow:inset 0 0 0 1.5px #C9A227;font-style:italic}
#tab-attnsheet table.ash-grid td.ash-day.prov::after{border-top-color:#C9A227}
#tab-attnsheet table.ash-grid td.ash-day{position:relative}
#ash-pick{position:fixed;z-index:9999;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 28px rgba(15,31,61,.18);padding:8px;display:none;min-width:190px}
#ash-pick .hd{font-size:10.5px;color:var(--muted);font-family:var(--mono);padding:2px 4px 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
#ash-pick .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#ash-pick button{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:6px 4px;
  font-family:var(--mono);font-size:11px;font-weight:700;cursor:pointer;color:var(--ink)}
#ash-pick button:hover{border-color:var(--marigold);background:var(--marigold-soft)}
#ash-pick button.clr{grid-column:1/-1;font-weight:600;color:var(--brick);font-family:var(--body)}
#ash-pick .busy{font-size:11px;color:var(--muted);padding:6px 4px 2px}
html[data-theme="dark"] #tab-attnsheet table.ash-grid th.ash-emp,
html[data-theme="dark"] #tab-attnsheet table.ash-grid td.ash-emp,
html[data-theme="dark"] #tab-attnsheet table.ash-grid thead th{background:var(--card)}
@media(max-width:640px){
  #tab-attnsheet table.ash-grid td.ash-emp{min-width:130px}
}
/* upload-attendance modal */
#ash-upload{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;background:rgba(15,31,61,.45);padding:16px}
#ash-upload .ash-upload-card{background:var(--card);border-radius:12px;padding:18px 20px;width:100%;max-width:640px;max-height:86vh;overflow:auto;box-shadow:0 12px 36px rgba(15,31,61,.25)}
#ash-upload .ash-upload-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-family:var(--disp);font-size:15px}
#ash-upload .ash-upload-hd .x{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);padding:2px 6px}
#ash-upload .ash-upload-note{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5}
#ash-upload .ash-upload-note a{color:var(--pine);font-weight:600}
#ash-upload input[type=file]{width:100%;margin-bottom:8px}
#ash-upload .ash-upload-err{background:var(--brick-soft);color:var(--brick);border-radius:6px;padding:8px 10px;font-size:12.5px;margin-bottom:8px}
#ash-upload .ash-upload-summary{font-size:12.5px;color:var(--muted);margin-bottom:6px}
#ash-upload .ash-upload-sheets{margin:10px 0;border:1px solid var(--line);border-radius:8px;padding:10px}
#ash-upload .ash-upload-sheets-hd{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:8px;flex-wrap:wrap}
#ash-upload .ash-selall{background:none;border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:11.5px;cursor:pointer;color:var(--pine);font-weight:600}
#ash-upload .ash-selall:hover{background:var(--pine-soft,#EAF3ED)}
#ash-upload .ash-upload-sheetlist{display:flex;flex-wrap:wrap;gap:7px}
#ash-upload .ash-sheet-chip{display:flex;gap:6px;align-items:center;font-size:12px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;user-select:none;margin:0}
#ash-upload .ash-sheet-chip input{width:auto;min-height:0;margin:0}
#ash-upload .ash-sheet-chip.on{background:var(--pine-soft,#EAF3ED);border-color:var(--pine);color:var(--pine);font-weight:600}
#ash-upload .ash-skipp{display:flex;gap:6px;align-items:center;margin:9px 0 0;font-size:12px;cursor:pointer}
#ash-upload .ash-skipp input{width:auto;min-height:0;margin:0}
/* floating background-upload progress pill */
#ash-upload-pill{position:fixed;right:18px;bottom:18px;z-index:99999;display:none;
  width:290px;max-width:calc(100vw - 36px);background:var(--card,#fff);
  border:1px solid var(--line,#DCE3ED);border-radius:12px;padding:12px 14px;
  box-shadow:0 10px 30px rgba(15,31,61,.18);font-family:var(--body,'Public Sans',sans-serif)}
#ash-upload-pill .aup-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
#ash-upload-pill .aup-hd b{font-weight:700;color:var(--ink,#14213D)}
#ash-upload-pill .aup-x{background:none;border:1px solid var(--line,#DCE3ED);border-radius:6px;
  padding:2px 9px;font-size:11px;cursor:pointer;color:var(--muted,#5A6478)}
#ash-upload-pill .aup-x:hover{background:var(--hover,#F4F8FC)}
#ash-upload-pill .aup-sub{font-size:11.5px;color:var(--muted,#5A6478);margin:6px 0 8px}
#ash-upload-pill .aup-bar{height:7px;border-radius:999px;background:var(--line,#ECEFF4);overflow:hidden}
#ash-upload-pill .aup-bar i{display:block;height:100%;background:var(--pine,#2E7D53);border-radius:999px;transition:width .3s ease}
html[data-theme="dark"] #ash-upload-pill{background:#25282B;border-color:#3A3F42}
html[data-theme="dark"] #ash-upload-pill .aup-bar{background:#3A3F42}
#ash-upload .ash-upload-summary .bad{color:var(--brick);font-weight:600}
#ash-upload .ash-upload-wrap{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:10px}
#ash-upload table{width:100%;border-collapse:collapse;font-size:12px}
#ash-upload th{position:sticky;top:0;background:var(--card);text-align:left;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:5px 8px;border-bottom:2px solid var(--ink)}
#ash-upload td{padding:5px 8px;border-bottom:1px solid var(--line)}
#ash-upload tr.bad td{background:var(--brick-soft);color:var(--brick)}
#ash-upload .ash-upload-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
#ash-upload .ash-upload-progress{font-size:12px;color:var(--muted);margin-top:8px;text-align:right}
html[data-theme="dark"] #ash-upload .ash-upload-card{background:var(--card)}
html[data-theme="dark"] #ash-upload th{background:var(--card)}
/* leave summary panel */
#tab-attnsheet .ash-leavesum-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:56vh;margin-top:10px}
#tab-attnsheet table.ash-leavesum-grid{width:100%;border-collapse:collapse;font-size:12.5px}
#tab-attnsheet table.ash-leavesum-grid th{text-align:left;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:500;padding:7px 8px;border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--card)}
#tab-attnsheet table.ash-leavesum-grid td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:center}
#tab-attnsheet table.ash-leavesum-grid td.nm{text-align:left;font-weight:600}
#tab-attnsheet table.ash-leavesum-grid tr:hover td{background:#F8F9FB}
#tab-attnsheet table.ash-leavesum-grid tfoot td{background:var(--marigold-soft);font-weight:700}
#tab-attnsheet table.ash-leavesum-grid tfoot td.nm{text-align:left}
html[data-theme="dark"] #tab-attnsheet table.ash-leavesum-grid th{background:var(--card)}

/* ============================================================
   MOBILE / PWA USABILITY LAYER  (loaded last — wins the cascade)
   Turns the desktop HR console into a comfortable phone app:
   bottom tab bar, larger tap targets, readable text, stacked
   toolbars, and full-bleed cards. All scoped to <=720px so the
   desktop layout is untouched. Fully reversible — delete this
   block to restore the previous behaviour.
   ============================================================ */
@media(max-width:720px){

  /* room for the fixed bottom nav + iOS safe area */
  body{ -webkit-text-size-adjust:100%; }
  main{
    padding-left:12px !important; padding-right:12px !important;
    padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important;
  }

  /* ---- header: compact, wraps cleanly ---- */
  header{
    flex-wrap:wrap; gap:8px; padding:10px 12px !important;
    position:sticky; top:0; z-index:60;
    padding-top:calc(10px + env(safe-area-inset-top)) !important;
  }
  header .brand{ gap:8px; }
  header .brand h1{ font-size:15px; }
  header .header-logo{ height:26px; width:auto; }
  header #todayLbl{ display:none; }              /* saves a line on small screens */
  .hdr-actions{ width:100%; flex-wrap:wrap; gap:6px; }
  .hdr-actions .who{ flex:1 1 100%; font-size:11px; }
  .hdr-actions .btn{ flex:1 1 auto; min-height:40px; font-size:12px; }

  /* ---- status queue: horizontal scroll, bigger chips ---- */
  .queue{ padding:8px 12px !important; gap:8px; }
  .queue .chip{ min-height:38px; padding:8px 12px; font-size:12px; }

  /* ---- MAIN NAV becomes a bottom tab bar ---- */
  nav#mainNav{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom)) !important;
    display:flex; gap:0; border-top:1px solid var(--line);
    border-bottom:none; background:var(--card);
    box-shadow:0 -4px 16px rgba(20,33,61,.10);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav#mainNav::-webkit-scrollbar{ display:none; }
  nav#mainNav button{
    flex:0 0 auto; min-width:64px; padding:8px 12px 6px !important;
    border-bottom:none !important; border-radius:10px;
    font-size:11px; line-height:1.15; white-space:nowrap;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    min-height:52px; justify-content:center;
  }
  nav#mainNav button.active{
    background:var(--pine-soft); color:var(--ink);
  }
  html[data-theme="dark"] nav#mainNav button.active{ background:rgba(255,255,255,.08); }

  /* ---- cards: edge-to-edge, less padding ---- */
  .card{ padding:13px !important; border-radius:12px; }
  main > .card, main > div > .card{ margin-left:0; margin-right:0; }
  h3{ font-size:15px; }

  /* ---- forms & buttons: finger-friendly ---- */
  input,select,textarea{
    font-size:16px !important;           /* 16px stops iOS auto-zoom on focus */
    min-height:44px; padding:10px 12px;
  }
  button,.btn{ min-height:44px; }
  .btn.small{ min-height:38px; }
  label{ font-size:11px; }

  /* toolbars (attendance, tasks, etc.) stack and go full width */
  .toolbar,.cal-nav,.filters,.controls{
    flex-wrap:wrap; gap:8px;
  }
  .toolbar > *,.filters > *{ flex:1 1 140px; }
  .toolbar select,.toolbar input,.filters select,.filters input{ width:100%; }

  /* ---- wide tables: let them scroll, freeze first column ---- */
  .card:has(table){ padding:10px !important; }
  table{ font-size:12px; }
  th,td{ padding:8px 6px; }

  /* attendance sheet tuning for phones */
  #tab-attnsheet .toolbar button,
  #tab-attnsheet .toolbar select{ min-height:42px; }
  #tab-attnsheet table.ash-grid td.ash-day{
    width:34px; min-width:34px; height:38px; font-size:12px;
  }
  #tab-attnsheet table.ash-grid td.ash-emp{
    position:sticky; left:0; z-index:2; background:var(--card);
    box-shadow:2px 0 4px rgba(20,33,61,.06);
  }
  #tab-attnsheet table.ash-grid thead th.ash-emp{
    position:sticky; left:0; z-index:3;
  }

  /* the click-to-mark picker: bottom sheet instead of floating box */
  #ash-pick{
    position:fixed !important; left:0 !important; right:0 !important;
    bottom:calc(64px + env(safe-area-inset-bottom)) !important;
    top:auto !important; width:100% !important; min-width:0 !important;
    border-radius:16px 16px 0 0; padding:14px 14px 18px;
    box-shadow:0 -8px 30px rgba(15,31,61,.28);
  }
  #ash-pick .opts{ grid-template-columns:repeat(4,1fr); gap:8px; }
  #ash-pick button{ min-height:46px; font-size:13px; }

  /* modals / dialogs fill the screen */
  .modal,.dialog,.sheet{ width:96vw !important; max-width:96vw !important; }

  /* kanban columns: one at a time, swipeable */
  .kanban,.board{ gap:10px; }
  .kanban-col,.board-col{ min-width:82vw; }
}

/* very small phones */
@media(max-width:380px){
  header .brand h1{ font-size:13.5px; }
  nav#mainNav button{ min-width:58px; font-size:10.5px; }
}

/* landscape phones: shorter bottom bar */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  nav#mainNav button{ min-height:44px; }
  main{ padding-bottom:60px !important; }
}

#tab-empnotes .en-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#tab-empnotes .en-bar label{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
#tab-empnotes .en-bar select,#tab-empnotes .en-bar input[type=date],#tab-empnotes .en-bar input[type=text]{width:auto;min-width:120px}
#tab-empnotes .en-bar button{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--ink);font-family:var(--body)}
#tab-empnotes .en-bar button:hover{border-color:var(--marigold)}
#tab-empnotes .en-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px;padding:14px;background:var(--pine-soft);border-radius:10px}
#tab-empnotes .en-form .full{grid-column:1/-1}
#tab-empnotes .en-form label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
#tab-empnotes .en-form button{grid-column:1/-1;background:var(--pine);color:#fff;border:none;border-radius:7px;padding:9px;font-weight:700;font-size:13px;cursor:pointer}
#tab-empnotes .en-form button:hover{background:#16264A}
#tab-empnotes .en-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px;margin-bottom:16px}
#tab-empnotes .en-sum .c{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 6px;text-align:center}
#tab-empnotes .en-sum .c .n{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--pine)}
#tab-empnotes .en-sum .c .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
#tab-empnotes .en-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:56vh}
#tab-empnotes table.en-grid{width:100%;border-collapse:collapse;font-size:12.5px}
#tab-empnotes table.en-grid th{text-align:left;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500;padding:7px 8px;border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--card)}
#tab-empnotes table.en-grid td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
#tab-empnotes table.en-grid tr:hover td{background:#F8F9FB}
#tab-empnotes .en-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
#tab-empnotes .en-tag.perm{background:var(--pine-soft);color:var(--pine)}
#tab-empnotes .en-tag.late{background:var(--marigold-soft);color:#7A6210}
#tab-empnotes .en-del{background:none;border:none;color:var(--brick);cursor:pointer;font-size:13px}
#tab-empnotes .en-empty{padding:30px;text-align:center;color:var(--muted)}
#tab-empnotes .en-cellbtn{background:none;border:none;font-family:var(--mono);font-size:12.5px;color:var(--pine);font-weight:700;cursor:pointer;padding:2px 6px;border-radius:5px}
#tab-empnotes .en-cellbtn:hover{background:var(--pine-soft);text-decoration:underline}
#en-pick{position:fixed;z-index:9999;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 28px rgba(15,31,61,.18);padding:8px;display:none;min-width:220px;max-width:280px;max-height:340px;overflow:auto}
#en-pick .hd{font-size:10.5px;color:var(--muted);font-family:var(--mono);padding:2px 4px 6px;border-bottom:1px solid var(--line);margin-bottom:6px;white-space:nowrap}
#en-pick .en-pick-row{padding:5px 4px;border-bottom:1px solid var(--line);font-size:12px}
#en-pick .en-pick-row:last-child{border-bottom:none}
#en-pick .en-pick-row b{display:block;color:var(--ink)}
#en-pick .en-pick-row span{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
html[data-theme="dark"] #en-pick{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] #tab-empnotes .en-form{background:#16233F}
html[data-theme="dark"] #tab-empnotes table.en-grid th{background:var(--card)}
@media(max-width:640px){ #tab-empnotes .en-form{grid-template-columns:1fr} }

#tab-mpr .mpr-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#tab-mpr .mpr-bar select,#tab-mpr .mpr-bar input[type=text]{width:auto;min-width:140px}
#tab-mpr .mpr-bar button{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--ink);font-family:var(--body);cursor:pointer}
#tab-mpr .mpr-bar button:hover{border-color:var(--marigold)}
#tab-mpr .mpr-bar button.on{background:var(--pine);border-color:var(--pine);color:#fff}
#tab-mpr .mpr-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
#tab-mpr .mpr-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:16px}
#tab-mpr .mpr-sum .c{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;text-align:center}
#tab-mpr .mpr-sum .c .n{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--pine)}
#tab-mpr .mpr-sum .c .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-mpr .mpr-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:66vh}
#tab-mpr table.mpr-grid{width:100%;border-collapse:collapse;font-size:12.5px}
#tab-mpr table.mpr-grid th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--card);white-space:nowrap;z-index:1}
#tab-mpr table.mpr-grid td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;max-width:260px}
#tab-mpr table.mpr-grid tr:nth-child(even) td{background:#FAFBFC}
#tab-mpr table.mpr-grid tr:hover td{background:#F3F6FB}
#tab-mpr .mpr-empty{padding:34px;text-align:center;color:var(--muted)}
#tab-mpr .mpr-err{background:var(--brick-soft);color:var(--brick);border-radius:8px;padding:12px 14px;font-size:13px;margin-bottom:14px}
#tab-mpr .mpr-err a{color:var(--brick);font-weight:600;text-decoration:underline}
#tab-mpr table.mpr-grid tbody tr{cursor:pointer}
#tab-mpr table.mpr-grid tr.mpr-new td{background:var(--marigold-soft) !important;font-weight:600}
#tab-mpr table.mpr-grid tr.mpr-new:hover td{background:#F0E6BE !important}
#tab-mpr .mpr-newtag{display:inline-block;background:var(--brick);color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:999px;margin-right:6px;vertical-align:middle}
.mpr-overlay{position:fixed;inset:0;background:rgba(15,31,61,.5);z-index:170;display:flex;align-items:flex-start;justify-content:center;padding:26px 12px;overflow-y:auto;backdrop-filter:blur(3px)}
.mpr-card{background:#fff;border-radius:16px;max-width:640px;width:100%;box-shadow:0 30px 80px rgba(15,31,61,.34);overflow:hidden;margin:auto}
.mpr-card .hd{background:var(--ink);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.mpr-card .hd b{font-family:var(--disp);font-size:15px}
.mpr-card .hd .nav{display:flex;gap:6px;align-items:center}
.mpr-card .hd button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.mpr-card .hd button:hover{background:rgba(255,255,255,.22)}
.mpr-card .hd button:disabled{opacity:.35;cursor:default}
.mpr-card .bd{padding:18px 20px;max-height:70vh;overflow-y:auto}
.mpr-card .fld{padding:9px 0;border-bottom:1px solid var(--line)}
.mpr-card .fld:last-child{border-bottom:none}
.mpr-card .fld .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.mpr-card .fld .v{font-size:13.5px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.mpr-card .fld .v:empty::before{content:"—";color:var(--muted)}
html[data-theme="dark"] .mpr-card{background:var(--card)}
html[data-theme="dark"] #tab-mpr table.mpr-grid th{background:var(--card)}
html[data-theme="dark"] #tab-mpr table.mpr-grid tr:nth-child(even) td{background:#141F38}
@media(max-width:640px){ #tab-mpr .mpr-bar{flex-direction:column;align-items:stretch} }

#tab-leavereq .mpr-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#tab-leavereq .mpr-bar select,#tab-leavereq .mpr-bar input[type=text]{width:auto;min-width:140px}
#tab-leavereq .mpr-bar button{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--ink);font-family:var(--body);cursor:pointer}
#tab-leavereq .mpr-bar button:hover{border-color:var(--marigold)}
#tab-leavereq .mpr-bar button.on{background:var(--pine);border-color:var(--pine);color:#fff}
#tab-leavereq .mpr-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
#tab-leavereq .mpr-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:16px}
#tab-leavereq .mpr-sum .c{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;text-align:center;cursor:pointer;transition:border-color .15s,box-shadow .15s}
#tab-leavereq .mpr-sum .c:hover{border-color:var(--marigold)}
#tab-leavereq .mpr-sum .c.on{border-color:var(--marigold);box-shadow:0 0 0 2px var(--marigold-soft) inset;background:var(--marigold-soft)}
#tab-leavereq .lrq-crumb{font-size:12px;color:var(--muted);margin:-8px 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#tab-leavereq .lrq-crumb b{color:var(--ink)}
#tab-leavereq .lrq-crumb button{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600;color:var(--brick);cursor:pointer}
#tab-leavereq .lrq-crumb button:hover{border-color:var(--brick)}
#tab-leavereq tr.lrq-grp td{background:var(--pine-soft) !important;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--pine);padding:6px 10px}
html[data-theme="dark"] #tab-leavereq tr.lrq-grp td{background:#1D2A47 !important;color:var(--ink)}
#tab-leavereq .lrq-range{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;margin:0}
#tab-leavereq .lrq-range input[type=date]{width:auto;min-width:130px;padding:4px 6px;font-size:12px}
#tab-leavereq .mpr-sum .c .n{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--pine)}
#tab-leavereq .mpr-sum .c .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-leavereq .mpr-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:66vh}
#tab-leavereq table.mpr-grid{width:100%;border-collapse:collapse;font-size:12.5px}
#tab-leavereq table.mpr-grid th{position:sticky;top:0;background:var(--card);text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1.5px solid var(--line);white-space:nowrap;z-index:1}
#tab-leavereq table.mpr-grid td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;max-width:260px}
#tab-leavereq table.mpr-grid tr:nth-child(even) td{background:#FAFBFC}
#tab-leavereq table.mpr-grid tr:hover td{background:#F3F6FB;cursor:pointer}
#tab-leavereq .mpr-empty{padding:34px;text-align:center;color:var(--muted)}
#tab-leavereq .mpr-err{background:var(--brick-soft);color:var(--brick);border-radius:8px;padding:12px 14px;font-size:13px;margin-bottom:14px}
#tab-leavereq .mpr-err a{color:inherit;font-weight:700}
#tab-leavereq tr.mpr-new td{background:var(--marigold-soft) !important}
#tab-leavereq .mpr-newtag{display:inline-block;background:var(--marigold);color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:1px 5px;vertical-align:1px}
html[data-theme="dark"] #tab-leavereq table.mpr-grid tr:nth-child(even) td{background:#141F38}
html[data-theme="dark"] #tab-leavereq table.mpr-grid tr:hover td{background:#1B2740}
html[data-theme="dark"] #tab-leavereq tr.mpr-new td{background:var(--marigold-soft) !important}
@media(max-width:640px){ #tab-leavereq .mpr-bar{flex-direction:column;align-items:stretch} }
#tab-leavereq .lrq-view-toggle .segbtn{margin:0}
#tab-leavereq .rst-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;padding:2px 0}
#tab-leavereq .rst-grid{min-width:640px}
#tab-leavereq .rst-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
#tab-leavereq .rst-row.rst-head{border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
#tab-leavereq .rst-row.rst-sub{border-bottom:1px solid var(--line);background:#FAFBFC}
html[data-theme="dark"] #tab-leavereq .rst-row.rst-sub{background:#141F38}
#tab-leavereq .rst-name{flex:0 0 160px;padding:7px 10px;font-size:12px;font-weight:600;border-right:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tab-leavereq .rst-row.rst-sub .rst-name{font-weight:400;color:var(--muted)}
#tab-leavereq .rst-track{position:relative;flex:1;min-height:26px}
#tab-leavereq .rst-weekhead{display:flex}
#tab-leavereq .rst-wk{text-align:center;padding:7px 2px;border-right:1px solid var(--line);flex-shrink:0}
#tab-leavereq .rst-wk:last-child{border-right:none}
#tab-leavereq .rst-bar{position:absolute;top:4px;bottom:4px;border-radius:4px;min-width:6px}
#tab-leavereq .rst-bar.rst-plan{background:var(--pine);opacity:.85}
#tab-leavereq .rst-bar.rst-actual{background:#4E9B6E}
#tab-leavereq .rst-none{color:var(--muted);font-size:11px;padding:6px 10px;display:inline-block}
@media print{ #tab-leavereq .cal-nav,#tab-leavereq .lrq-view-toggle{display:none} }

#tab-selfservice .ss-wrap{max-width:640px;margin:0 auto}
#tab-selfservice .ss-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
#tab-selfservice .ss-tabs button{flex:1 1 120px;min-height:44px;border:1px solid var(--line);background:var(--card);
  border-radius:10px;font-family:var(--disp);font-weight:600;font-size:13px;color:var(--muted);padding:9px 10px}
#tab-selfservice .ss-tabs button.on{background:var(--pine);color:#fff;border-color:var(--pine)}
#tab-selfservice .ss-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
#tab-selfservice .ss-card h3{font-family:var(--disp);font-size:16px;margin-bottom:4px}
#tab-selfservice .ss-card .sub{font-size:12px;color:var(--muted);margin-bottom:14px}
#tab-selfservice .ss-row{margin-bottom:12px}
#tab-selfservice .ss-row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#tab-selfservice label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
#tab-selfservice .ss-btn{width:100%;min-height:48px;border:none;border-radius:12px;background:var(--pine);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:15px;cursor:pointer;margin-top:4px}
#tab-selfservice .ss-btn:disabled{opacity:.5;cursor:not-allowed}
#tab-selfservice .ss-btn.alt{background:var(--marigold);color:#2a2205}
#tab-selfservice .ss-btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
#tab-selfservice .cam-stage{position:relative;width:100%;aspect-ratio:3/4;max-height:360px;background:#0d1526;
  border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
#tab-selfservice .cam-stage video,#tab-selfservice .cam-stage img{width:100%;height:100%;object-fit:cover}
#tab-selfservice .cam-stage .cam-hint{position:absolute;color:#9fb0cc;font-size:13px;text-align:center;padding:20px}
#tab-selfservice .cam-stage.mirror video{transform:scaleX(-1)}
#tab-selfservice .who-badge{display:flex;align-items:center;gap:10px;background:var(--pine-soft);
  border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:13px}
#tab-selfservice .who-badge b{font-family:var(--disp)}
#tab-selfservice .ss-meta{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
#tab-selfservice .ss-status{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:13px;display:none}
#tab-selfservice .ss-status.ok{display:block;background:#E4F4EA;color:#1E6B3A;border:1px solid #B7E0C4}
#tab-selfservice .ss-status.err{display:block;background:var(--brick-soft);color:var(--brick);border:1px solid #E7C0B6}
#tab-selfservice .ss-status.info{display:block;background:var(--pine-soft);color:var(--pine)}
#tab-selfservice .exp-line{display:grid;grid-template-columns:1fr 96px 34px;gap:8px;margin-bottom:8px;align-items:end}
#tab-selfservice .exp-line button{min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:8px;color:var(--brick);font-size:18px;cursor:pointer}
#tab-selfservice .exp-total{text-align:right;font-family:var(--disp);font-weight:700;font-size:16px;margin:6px 0 12px}
#tab-selfservice .recent{margin-top:8px}
#tab-selfservice .recent .r{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
#tab-selfservice .recent .r:last-child{border-bottom:none}
#tab-selfservice .pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
#tab-selfservice .pill.Approved,#tab-selfservice .pill.Paid{background:#E4F4EA;color:#1E6B3A}
#tab-selfservice .pill.Open,#tab-selfservice .pill.Draft,#tab-selfservice .pill.Submitted{background:var(--marigold-soft);color:#7a5c00}
#tab-selfservice .pill.Rejected,#tab-selfservice .pill.Cancelled{background:var(--brick-soft);color:var(--brick)}
@media(max-width:720px){ #tab-selfservice .ss-row.two{grid-template-columns:1fr} }

:root{
  /* soft, layered shadows tuned for the light theme */
  --pl-shadow-sm: 0 1px 2px rgba(20,33,61,.04), 0 1px 3px rgba(20,33,61,.06);
  --pl-shadow-md: 0 2px 6px rgba(20,33,61,.06), 0 6px 18px rgba(20,33,61,.08);
  --pl-shadow-lg: 0 10px 34px rgba(20,33,61,.12);
  --pl-ring: 0 0 0 3px color-mix(in srgb, var(--marigold) 34%, transparent);
  --pl-ease: cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --pl-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --pl-shadow-md: 0 4px 14px rgba(0,0,0,.42);
  --pl-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
}

/* ---------- global motion (gentle, and only where it helps) ---------- */
@media (prefers-reduced-motion: no-preference){
  .card, .btn, nav button, .chip, .tag,
  #tab-onboard .ob-card, #tab-rec .r2-ccard, .r2-col, .ob-col,
  #ash-upload-pill, .ats-mini, .r2-note{
    transition: background-color .18s var(--pl-ease),
                border-color .18s var(--pl-ease),
                box-shadow .22s var(--pl-ease),
                transform .18s var(--pl-ease),
                color .18s var(--pl-ease);
  }
  /* soft fade+rise when a tab's content appears */
  main > section:not([hidden]){ animation: pl-fade .26s var(--pl-ease) both; }
  @keyframes pl-fade{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
}

/* ---------- cards: more depth, warmer lift on hover ---------- */
.card{
  box-shadow: var(--pl-shadow-sm);
  border-radius: 13px;
}
@media (prefers-reduced-motion: no-preference){
  .card:hover{ box-shadow: var(--pl-shadow-md); }
}
/* a subtle warm top-accent hairline on cards ties the gold theme together */
.card > h3:first-child{
  position: relative;
}
.card > h3:first-child::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:34px;
  background: linear-gradient(90deg, var(--marigold), transparent);
  border-radius: 2px;
}

/* ---------- buttons: tactile press + warm primary ---------- */
.btn{ border-radius: 8px; box-shadow: var(--pl-shadow-sm); }
@media (prefers-reduced-motion: no-preference){
  .btn:hover{ transform: translateY(-1px); box-shadow: var(--pl-shadow-md); }
  .btn:active{ transform: translateY(0); box-shadow: var(--pl-shadow-sm); }
}
.btn.primary{
  background: linear-gradient(180deg, color-mix(in srgb, var(--pine) 92%, #fff 8%), var(--pine));
  border-color: var(--pine);
}
/* gold call-to-action accent for the most important actions, without
   changing their markup — primary buttons that carry an arrow/emoji CTA */
.btn.primary:hover{ filter: saturate(1.06) brightness(1.03); }

/* ---------- inputs: softer, with a warm focus ring ---------- */
input, select, textarea{ border-radius: 8px; transition: border-color .15s var(--pl-ease), box-shadow .15s var(--pl-ease); }
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: var(--marigold);
  box-shadow: var(--pl-ring);
}

/* ---------- nav tabs: smoother active indicator ---------- */
nav button{ border-radius: 8px 8px 0 0; }
@media (prefers-reduced-motion: no-preference){
  nav button:hover{ background: color-mix(in srgb, var(--marigold) 10%, transparent); color: var(--ink); }
}
nav button.active{ border-bottom-color: var(--marigold); }

/* ---------- chips / tags: rounded, gentle ---------- */
.chip{ border-radius: 999px; }
.tag{ border-radius: 999px; letter-spacing:.02em; }

/* ---------- kanban cards (recruitment + onboarding): premium hover ---------- */
@media (prefers-reduced-motion: no-preference){
  #tab-rec .r2-ccard:hover, #tab-onboard .ob-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--pl-shadow-md);
  }
}
#tab-rec .r2-ccard, #tab-onboard .ob-card{ border-radius: 11px; }

/* ---------- tables: quieter rows, warm hover ---------- */
tbody tr{ transition: background-color .12s var(--pl-ease); }
tbody tr:hover{ background: color-mix(in srgb, var(--marigold) 7%, transparent); }

/* ---------- the background-upload pill: match the premium feel ---------- */
#ash-upload-pill{ box-shadow: var(--pl-shadow-lg); border-radius: 14px; }
#ash-upload-pill .aup-bar i{ background: linear-gradient(90deg, var(--marigold), color-mix(in srgb, var(--marigold) 55%, var(--pine))); }

/* ---------- modals / overlays: smooth entrance ---------- */
@media (prefers-reduced-motion: no-preference){
  .r2-overlay, .ats-overlay, #ash-upload{ animation: pl-overlay .2s var(--pl-ease) both; }
  @keyframes pl-overlay{ from{ opacity:0 } to{ opacity:1 } }
  .r2-card, .login-card, #ash-upload .ash-upload-card{ animation: pl-pop .24s var(--pl-ease) both; }
  @keyframes pl-pop{ from{ opacity:0; transform: translateY(10px) scale(.99) } to{ opacity:1; transform:none } }
}

/* ---------- scrollbars: slim & on-brand (WebKit) ---------- */
#appShell ::-webkit-scrollbar{ height:10px; width:10px; }
#appShell ::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius:999px; border:2px solid transparent; background-clip: padding-box; }
#appShell ::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--marigold) 60%, transparent); background-clip: padding-box; }
#appShell ::-webkit-scrollbar-track{ background: transparent; }

/* graceful fallback: browsers without color-mix() ignore those rules and
   simply keep the app's existing colors — nothing breaks. */

/* Expiry register — Excel/CSV import modal (mirrors the attendance upload look) */
#expi-import{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;background:rgba(15,31,61,.45);padding:16px}
#expi-import .ash-upload-card{background:var(--card);border-radius:12px;padding:18px 20px;width:100%;max-width:680px;max-height:86vh;overflow:auto;box-shadow:0 12px 36px rgba(15,31,61,.25)}
#expi-import .ash-upload-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-family:var(--disp);font-size:15px}
#expi-import .ash-upload-hd .x{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);padding:2px 6px}
#expi-import .ash-upload-note{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5}
#expi-import .ash-upload-note a{color:var(--pine);font-weight:600}
#expi-import input[type=file]{width:100%;margin-bottom:8px}
#expi-import .ash-upload-err{background:var(--brick-soft);color:var(--brick);border-radius:6px;padding:8px 10px;font-size:12.5px;margin-bottom:8px}
#expi-import .ash-upload-summary{font-size:12.5px;color:var(--muted);margin-bottom:6px}
#expi-import .ash-upload-summary .bad,#expi-import tr.bad td{color:var(--brick)}
#expi-import .ash-upload-wrap{max-height:44vh;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:10px}
#expi-import table{width:100%;border-collapse:collapse;font-size:12px}
#expi-import th{position:sticky;top:0;background:var(--card);text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:7px 8px;border-bottom:1.5px solid var(--line)}
#expi-import td{padding:6px 8px;border-bottom:1px solid var(--line)}
#expi-import .ash-upload-actions{display:flex;gap:8px;justify-content:flex-end}
html[data-theme="dark"] #expi-import .ash-upload-card{box-shadow:0 16px 44px rgba(0,0,0,.55)}

#tab-empdash .ed-emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
#tab-empdash .ed-emp-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;background:#fff;transition:box-shadow .15s,border-color .15s}
#tab-empdash .ed-emp-card:hover{border-color:var(--pine);box-shadow:0 4px 14px rgba(20,33,61,.10)}
#tab-empdash .ed-emp-name{font-family:var(--disp);font-weight:700;font-size:14px}
#tab-empdash .ed-emp-meta{font-size:12px;color:var(--muted);margin-top:2px}
#tab-empdash .ed-emp-id{font-size:10.5px;color:var(--muted);margin-top:6px}
#tab-empdash h4.ed-subhead{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
#tab-empdash h4.ed-subhead:first-child{margin-top:0}
#tab-empdash .ed-tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600}
#tab-empdash .ed-tag.ed-ok{background:var(--pine-soft);color:var(--pine)}
#tab-empdash .ed-tag.ed-warn{background:var(--marigold-soft);color:#7A6210}
#tab-empdash .ed-tag.ed-bad{background:var(--brick-soft);color:var(--brick)}
#tab-empdash textarea{min-height:64px;resize:vertical}
html[data-theme="dark"] #tab-empdash .ed-emp-card{background:#1B2740;border-color:#33456C}

/* ---------- employee profile header (detail view) ---------- */
#tab-empdash .ed-profile-card{padding:18px 20px 8px}
#tab-empdash .ed-profile-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
#tab-empdash .ed-back{order:-1;flex-shrink:0}
#tab-empdash .ed-profile-id{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
#tab-empdash .ed-profile-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--pine) 0%,#1f3a6b 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:15px;flex-shrink:0;box-shadow:0 3px 10px rgba(20,33,61,.22)}
#tab-empdash .ed-profile-name{font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tab-empdash .ed-profile-meta{display:flex;align-items:center;gap:7px;margin-top:5px;flex-wrap:wrap}
#tab-empdash .ed-profile-code{font-size:11px;color:var(--muted)}
#tab-empdash .ed-sync-btn{flex-shrink:0}

/* ---------- icon tab bar (replaces old pill segbtn subnav) ---------- */
#tab-empdash .ed-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#tab-empdash .ed-tabs::-webkit-scrollbar{display:none}
#tab-empdash .ed-tab{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:none;background:none;color:var(--muted);font-size:12.5px;font-weight:600;font-family:var(--body);border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;transition:color .15s,border-color .15s}
#tab-empdash .ed-tab .ic{font-size:13px;line-height:1}
#tab-empdash .ed-tab:hover{color:var(--ink)}
#tab-empdash .ed-tab.on{color:var(--pine);border-color:var(--pine)}
html[data-theme="dark"] #tab-empdash .ed-profile-card{background:#1B2740;border-color:#33456C}
html[data-theme="dark"] #tab-empdash .ed-tabs{border-color:#33456C}

/* ---------- modern tables inside the detail panel ---------- */
#ed-detail table{width:100%;border-collapse:collapse;font-size:13px}
#ed-detail table thead th{background:var(--paper);color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
#ed-detail table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
#ed-detail table tbody tr:last-child td{border-bottom:none}
#ed-detail table tbody tr:hover{background:var(--paper)}
html[data-theme="dark"] #ed-detail table thead th{background:#141E33}
html[data-theme="dark"] #ed-detail table tbody tr:hover{background:#141E33}

/* ============ MODERN CORPORATE SKIN — Employee Dashboard ============ */
#tab-empdash .ed-hero{background:linear-gradient(135deg,var(--pine) 0%,#1f3a6b 100%);border-radius:14px;padding:20px 22px;color:#fff;margin-bottom:16px;box-shadow:0 8px 24px rgba(20,33,61,.16)}
#tab-empdash .ed-hero .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C7D3EA;margin-bottom:4px}
#tab-empdash .ed-hero h2{font-family:var(--disp);font-size:20px;font-weight:700;margin-bottom:14px}
#tab-empdash .ed-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
#tab-empdash .ed-stat{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 12px}
#tab-empdash .ed-stat .n{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.1}
#tab-empdash .ed-stat .l{font-size:11px;color:#C7D3EA;margin-top:2px}
#tab-empdash .ed-filterbar{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:14px}
@media(max-width:720px){#tab-empdash .ed-filterbar{grid-template-columns:1fr}}
#tab-empdash .ed-emp-card{box-shadow:0 1px 3px rgba(20,33,61,.06)}
#tab-empdash .ed-emp-card:hover{transform:translateY(-1px)}
#tab-empdash .ed-emp-avatar{width:34px;height:34px;border-radius:50%;background:var(--pine-soft);color:var(--pine);display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:13px;margin-bottom:8px}
#tab-empdash .ed-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 1px 3px rgba(20,33,61,.05);margin-bottom:14px}
#tab-empdash .ed-card h4{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
#tab-empdash .ed-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
#tab-empdash .ed-kpi{border-radius:10px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;gap:10px}
#tab-empdash .ed-kpi .ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
#tab-empdash .ed-kpi.good .ic{background:var(--pine-soft);color:var(--pine)}
#tab-empdash .ed-kpi.warn .ic{background:var(--marigold-soft);color:#7A6210}
#tab-empdash .ed-kpi.bad .ic{background:var(--brick-soft);color:var(--brick)}
#tab-empdash .ed-kpi .n{font-family:var(--mono);font-size:19px;font-weight:700;line-height:1}
#tab-empdash .ed-kpi .l{font-size:11px;color:var(--muted);margin-top:2px}
#tab-empdash .ed-gauge-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#tab-empdash .ed-gauge-num{font-family:var(--mono);font-size:26px;font-weight:700;fill:var(--ink)}
#tab-empdash .ed-stars{font-size:17px;letter-spacing:2px;cursor:pointer;user-select:none}
#tab-empdash .ed-stars .s{color:#D9DEE6;transition:color .1s}
#tab-empdash .ed-stars .s.on{color:var(--marigold)}
#tab-empdash .ed-crit-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
#tab-empdash .ed-crit-row:last-child{border-bottom:none}
#tab-empdash .ed-crit-label{font-size:13px;font-weight:600;color:var(--ink)}
#tab-empdash .ed-crit-hint{font-size:11px;color:var(--muted);font-weight:400;display:block;margin-top:1px}
#tab-empdash .ed-review-hist{border-left:3px solid var(--pine-soft);padding:8px 0 8px 14px;margin-bottom:10px}
#tab-empdash .ed-review-hist .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#tab-empdash .ed-review-hist .score{font-family:var(--mono);font-weight:700;color:var(--pine)}
html[data-theme="dark"] #tab-empdash .ed-hero{background:linear-gradient(135deg,#1B2740 0%,#0F1830 100%)}
/* ---------- mobile alignment pass (Employee Dashboard + shared widgets) ---------- */
@media(max-width:720px){
  /* hero: title row and sync controls stack instead of colliding */
  #tab-empdash .ed-hero{padding:16px 14px}
  #tab-empdash .ed-hero .k{flex-direction:column;align-items:flex-start !important;gap:8px !important}
  #tab-empdash .ed-hero .k > span:last-child{width:100%;justify-content:space-between}
  #tab-empdash .ed-hero h2{font-size:17px;line-height:1.3}
  #tab-empdash .ed-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  /* KPI cards: clean 2-up grid */
  #tab-empdash .ed-kpi-row{grid-template-columns:1fr 1fr}
  /* profile header: back button, avatar+name and sync stack neatly */
  #tab-empdash .ed-profile-head{align-items:flex-start}
  #tab-empdash .ed-back{order:0;width:100%}
  #tab-empdash .ed-profile-id{order:1;width:100%}
  #tab-empdash .ed-sync-btn{order:2;width:100%}
  #tab-empdash .ed-profile-name{white-space:normal}
  /* attendance / generic filter bars: full-width stacked controls */
  #tab-empdash .ed-filterbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #tab-empdash .ed-filterbar > div{min-width:0}
  #tab-empdash .ed-filterbar input,#tab-empdash .ed-filterbar select{width:100%;box-sizing:border-box}
  #tab-empdash .ed-filterbar > .btn{grid-column:1 / -1}
  /* evaluation level rows: buttons wrap under the level name */
  #tab-empdash .ed-card [style*="width:130px"]{width:100% !important;flex-basis:100%}
  #tab-empdash .ed-card h4{flex-wrap:wrap}
  /* wide tables scroll sideways instead of breaking the layout */
  #ed-detail table,#tab-empdash .ed-card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  #ed-detail table td,#ed-detail table th{white-space:nowrap}
  /* expense month headers: total moves under the month name */
  #ed-detail td[colspan] span[style*="float:right"]{float:none !important;display:block;margin-top:3px}
  /* record cards (MPR / Leave Request): header controls wrap, buttons stay tappable */
  .mpr-card .hd{flex-wrap:wrap}
  .mpr-card .hd .nav{flex-wrap:wrap;justify-content:flex-end;width:100%}
  .mpr-card .hd .nav button{min-height:34px}
}
@media(max-width:420px){
  #tab-empdash .ed-kpi-row{grid-template-columns:1fr 1fr}
  #tab-empdash .ed-kpi .n{font-size:16px}
  #tab-empdash .ed-filterbar{grid-template-columns:1fr}
  #tab-empdash .ed-stats{grid-template-columns:1fr 1fr}
}
html[data-theme="dark"] #tab-empdash .ed-card{background:#1B2740;border-color:#33456C}
html[data-theme="dark"] #tab-empdash .ed-kpi{background:#141E33;border-color:#33456C}

:root{ --ease-premium: cubic-bezier(.16,1,.3,1); }

#loginScreen{ transition: opacity .35s var(--ease-premium); }
#loginScreen.pp-fade-out{ opacity:0; pointer-events:none; }

#appShell{ transition: opacity .45s var(--ease-premium); }
#appShell.pp-hidden{ opacity:0; }

main > section.pp-tab-in{ animation: ppTabIn .32s var(--ease-premium); }
@keyframes ppTabIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.btn, #mainNav button{
  transition: transform .16s var(--ease-premium), box-shadow .16s var(--ease-premium),
              background-color .16s var(--ease-premium), border-color .16s var(--ease-premium),
              color .16s var(--ease-premium), opacity .16s var(--ease-premium);
}
.btn:hover:not(:disabled){ transform: translateY(-1px); }
.btn:active:not(:disabled){ transform: translateY(0); }
#mainNav button:hover:not(.active){ transform: translateY(-1px); }
#mainNav button:active{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  #loginScreen, #appShell, main > section.pp-tab-in, .btn, #mainNav button{
    animation:none !important; transition:none !important;
  }
}

#leave-roster-panel{ margin:0 0 16px; }
.lr-wrap{ background:var(--card,#fff); border:1px solid var(--line,#E2E8F0); border-radius:14px; padding:15px 15px 11px; }
.lr-top{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.lr-h3{ font-family:var(--disp,inherit); font-size:16px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.lr-h3 .lr-meta{ font-family:var(--body,inherit); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#68758A); }
.lr-sub{ font-size:11.5px; color:var(--muted,#68758A); margin-top:3px; max-width:70ch; }
.lr-ctl{ display:flex; flex-wrap:wrap; gap:9px; align-items:flex-end; margin:0 0 11px; }
.lr-ctl .f{ display:flex; flex-direction:column; gap:3px; }
.lr-ctl label{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted,#68758A); margin:0; }
.lr-ctl select,.lr-ctl input[type=date],.lr-ctl input[type=text],.lr-ctl input[type=number]{ font-size:12px; padding:5px 7px; border:1px solid var(--line,#E2E8F0); border-radius:6px; background:#fff; color:var(--ink,#101A33); width:auto; min-width:104px; }
.lr-ctl input[type=text]{ min-width:150px; }
.lr-ctl input[type=number]{ min-width:60px; width:64px; }
.lr-chk{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink,#101A33); padding-bottom:6px; cursor:pointer; }
.lr-chk input{ width:13px; height:13px; margin:0; }
.lr-btn{ font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:6px; border:1px solid var(--line,#E2E8F0); background:#fff; color:var(--ink,#101A33); }
.lr-btn:hover{ border-color:var(--pine,#2A4DA0); color:var(--pine,#2A4DA0); }
.lr-btn.pri{ background:var(--pine,#2A4DA0); border-color:var(--pine,#2A4DA0); color:#fff; }

.lr-legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:11px; color:var(--muted,#68758A); margin:9px 2px 0; }
.lr-legend i{ display:inline-block; width:22px; height:9px; border-radius:2px; vertical-align:middle; margin-right:5px; }
.lr-sw-plan{ background:#4F7FD4; }
.lr-sw-act{ background:#8CC08F; }
.lr-sw-clash{ background:repeating-linear-gradient(45deg,#D14E36,#D14E36 3px,#F2B9AC 3px,#F2B9AC 6px); }

.lr-scroll{ overflow:auto; max-height:74vh; border:1px solid var(--line,#E2E8F0); border-radius:10px; background:#fff; }
table.lr{ border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:11.5px; }
table.lr th, table.lr td{ background:#fff; border-right:1px solid var(--line,#E2E8F0); border-bottom:1px solid var(--line,#E2E8F0); padding:3px 6px; white-space:nowrap; text-align:center; vertical-align:middle; }
table.lr thead th{ position:sticky; z-index:3; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink,#101A33); background:var(--pine-soft,#EAF0FC); }
table.lr thead tr:nth-child(1) th{ top:0; height:24px; }
table.lr thead tr:nth-child(2) th{ top:24px; height:20px; }
table.lr thead tr:nth-child(3) th{ top:44px; height:18px; font-size:9px; color:var(--muted,#68758A); }
table.lr thead th.lr-corner{ background:var(--pine,#2A4DA0); color:#fff; }
table.lr td.lr-name{ text-align:left; font-weight:600; }
table.lr td.lr-name small{ display:block; font-weight:400; font-size:10px; color:var(--muted,#68758A); }
table.lr td.lr-num{ font-family:var(--mono,ui-monospace,monospace); font-size:11px; }
.lr-pa{ font-size:9px; font-weight:800; letter-spacing:.08em; color:var(--muted,#68758A); }
.lr-pa.is-plan{ color:#2F5FB0; }
.lr-pa.is-act{ color:#3F7A48; }
tr.lr-row-plan td{ border-bottom:1px dotted var(--line,#E2E8F0); }
td.lr-avail{ background:#EAF5EC !important; }
td.lr-plan{ background:#FBEDE6 !important; }
td.lr-rem{ background:#EAF0FC !important; }
td.lr-rem.neg{ color:var(--brick,#D14E36); font-weight:800; }
td.lr-rem.low{ color:#A5821B; font-weight:700; }

td.lr-w{ position:relative; width:30px; min-width:30px; max-width:30px; padding:0; height:19px; }
td.lr-w.wk-alt{ background:#FAFBFD; }
td.lr-w.wk-today{ background:#FFF6E6; }
th.wk-today{ box-shadow:inset 0 -2px 0 var(--marigold,#D7A422); }
.lr-bar{ position:absolute; top:3px; bottom:3px; border-radius:2px; }
.lr-bar.plan{ background:#4F7FD4; }
.lr-bar.act{ background:#8CC08F; }
.lr-bar.clash{ background:repeating-linear-gradient(45deg,#C4442C,#C4442C 3px,#E98D78 3px,#E98D78 6px); }
.lr-bar.ghost{ background:transparent; border:1px dashed #B6BFCE; }

tr.lr-dept td{ background:var(--pine,#2A4DA0) !important; color:#fff; text-align:left; font-weight:700; font-size:11.5px; letter-spacing:.02em; padding:5px 8px; }
tr.lr-dept .d-in{ position:sticky; left:8px; display:inline-block; cursor:pointer; }
tr.lr-dept td span.d-kpi{ font-weight:500; font-size:10.5px; opacity:.85; margin-left:10px; }
tr.lr-cov td{ background:#F7F9FC; }
tr.lr-cov td.lr-cw{ font-family:var(--mono,monospace); font-size:9.5px; color:var(--muted,#68758A); padding:0; height:16px; }
tr.lr-cov td.lr-cw.c1{ background:#EDF3FB; color:#2F5FB0; }
tr.lr-cov td.lr-cw.c2{ background:#FBF1D9; color:#8A6B12; font-weight:700; }
tr.lr-cov td.lr-cw.c3{ background:#F7D9D0; color:#A83A22; font-weight:800; }
tr.lr-cov td.lr-cov-lbl{ text-align:right; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#68758A); }

.lr-flag{ display:inline-block; font-size:9px; font-weight:800; padding:1px 5px; border-radius:4px; background:var(--brick-soft,#FBE9E4); color:var(--brick,#D14E36); margin-left:5px; }
.lr-flag.ok{ background:#E7F3E9; color:#3F7A48; }
.lr-flag.dup{ background:var(--marigold-soft,#FBF3DA); color:#8A6B12; }
.lr-empty{ padding:22px; text-align:center; color:var(--muted,#68758A); font-size:12.5px; }
.lr-note{ font-size:10.5px; color:var(--muted,#68758A); margin:9px 2px 0; line-height:1.55; }
.lr-warnbox{ border:1px solid #F0C9BF; background:#FDF3F0; border-radius:9px; padding:9px 11px; margin:0 0 11px; font-size:11.5px; color:#8E3A24; }
.lr-warnbox b{ font-weight:700; }
.lr-warnbox.dq{ border-color:#E4E9F2; background:#F7F9FC; color:var(--muted,#66738C); }
.lr-warnbox ul{ margin:5px 0 0 16px; }

/* freeze the left block only where there is room for it */
@media (min-width:1120px){
  table.lr th.stick, table.lr td.stick{ position:sticky; z-index:2; }
  table.lr thead th.stick{ z-index:6; }
}
@media print{
  .lr-ctl,.lr-btn{ display:none !important; }
  .lr-scroll{ max-height:none; overflow:visible; }
}

/* ============ DASHBOARD LAYOUT — floating, drag-to-rearrange cards ============
   Grab handle (∷) and width control (⇔) live in each card's <h3>. The card
   lifts on hover, follows the pointer while dragging, and a dashed slot shows
   where it will land. Layout is stored per signed-in user in localStorage.
   Fully reversible — delete this block and the matching JS module. ========== */
#tab-dash .dd-card{position:relative;transition:box-shadow .18s ease,transform .18s ease}
#tab-dash .dd-card:hover{box-shadow:0 8px 24px rgba(20,33,61,.13);transform:translateY(-2px)}
#tab-dash .dd-card>h3{position:relative;padding-right:62px}

#tab-dash .dd-tools{position:absolute;top:50%;right:0;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s ease}
#tab-dash .dd-card:hover .dd-tools,
#tab-dash .dd-card:focus-within .dd-tools{opacity:1}

#tab-dash .dd-tools .dd-shrink,
#tab-dash .dd-tools .dd-grow{all:unset;cursor:pointer;font-family:var(--mono);font-weight:700;
  font-size:12px;line-height:1;color:var(--muted);padding:3px 7px;border-radius:5px;min-width:20px;text-align:center}
#tab-dash .dd-tools .dd-shrink:hover:not(:disabled),
#tab-dash .dd-tools .dd-grow:hover:not(:disabled){background:rgba(20,33,61,.08);color:var(--ink)}
#tab-dash .dd-tools .dd-shrink:disabled,
#tab-dash .dd-tools .dd-grow:disabled{opacity:.28;cursor:default}

#tab-dash .dd-tools .dd-grip{cursor:grab;font-size:15px;line-height:1;letter-spacing:1px;
  color:var(--muted);padding:4px 6px;border-radius:5px;touch-action:none;user-select:none;
  transform:rotate(90deg)}
#tab-dash .dd-tools .dd-grip:hover{background:rgba(20,33,61,.08);color:var(--ink)}
#tab-dash .dd-tools .dd-grip:active{cursor:grabbing}

/* the card being dragged is hidden in place; a clone follows the pointer */
#tab-dash .dd-card.dd-hidden{display:none !important}
.dd-ghost{position:fixed;z-index:9999;pointer-events:none;margin:0 !important;
  opacity:.94;border-radius:14px;overflow:hidden;
  box-shadow:0 22px 48px rgba(20,33,61,.30);transform:scale(1.015) rotate(.4deg)}
.dd-ghost .dd-tools{display:none}
body.dd-dragging{cursor:grabbing;user-select:none}
body.dd-dragging #tab-dash .dd-card{transition:none}

/* landing slot */
#tab-dash .hrr-grid>.dd-placeholder{background:rgba(20,33,61,.035) !important;
  border:2px dashed rgba(20,33,61,.28) !important;border-radius:14px;
  box-shadow:none !important;backdrop-filter:none !important}

@keyframes ddLanded{0%{box-shadow:0 0 0 0 rgba(46,155,98,.45)}100%{box-shadow:0 0 0 14px rgba(46,155,98,0)}}
#tab-dash .dd-card.dd-landed{animation:ddLanded .42s ease-out}

#tab-dash .xd-range .dd-reset{cursor:pointer}

/* touch: keep the handles permanently visible, there is no hover */
@media(hover:none){
  #tab-dash .dd-tools{opacity:1}
  #tab-dash .dd-card:hover{transform:none;box-shadow:none}
}
/* the handles are screen furniture, never part of a printed report */
@media print{ #tab-dash .dd-tools,#tab-dash .dd-placeholder,.dd-ghost{display:none !important} }