/* ==========================================================================
NAAM HRMS — Enterprise design system
One stylesheet, no external fonts or UI frameworks. Organised as:
01 foundation · 02 shell · 03 page structure · 04 controls · 05 feedback
06 data workspace · 07 cards & insight · 08 business modules
09 authentication & system pages · 10 motion · 11 responsive · 12 print
========================================================================== */
/* ---- 01 Foundation ------------------------------------------------------ */
/* Preserve the established type scale and use the locally available Inter/Segoe UI font stack. */
:root{
--font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
--font-display:"Inter","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
/* Brand — NAAM blue and NAAM green from the logo */
--brand:#0c50a1;--brand-50:#eff5ff;--brand-100:#dcebff;--brand-200:#b8d4f6;--brand-300:#7fb0ec;
--brand-400:#3b80d6;--brand-500:#1c66c2;--brand-600:#0c50a1;--brand-700:#0a4288;--brand-800:#08356d;--brand-900:#062852;
--brand-soft:var(--brand-50);--brand-strong:var(--brand-700);--brand-deep:var(--brand-900);
--accent:#5cb543;--accent-strong:#3c8a2b;--accent-soft:#edf8e8;
/* Neutral surfaces */
--bg:#f2f5f9;--surface:#fff;--surface-2:#f7f9fc;--surface-3:#edf1f6;--surface-sunken:#e9eef4;
--text:#1a2b3e;--text-strong:#0c1b2c;--muted:#526376;--subtle:#5b6a7b;--faint:#8a98a8;
--border:#e0e6ee;--border-strong:#cbd5e1;--border-soft:#edf1f5;--focus:#2f74c9;
/* Semantic */
--success:#1f7a3d;--success-bg:#ebf8ef;--success-border:#bfe3ca;--success-solid:#22a352;
--warning:#8f5a00;--warning-bg:#fff7e3;--warning-border:#f0d99c;--warning-solid:#e69b12;
--danger:#b3261e;--danger-bg:#fff0ef;--danger-border:#f2c6c2;--danger-solid:#e0473b;
--info:#135ea3;--info-bg:#eef6ff;--info-border:#c3dcf4;--info-solid:#2f86d9;
--violet:#5e45a8;--violet-bg:#f4f0fd;--violet-border:#dcd2f6;--violet-solid:#7c5ce0;
--teal:#0b7b78;--teal-bg:#eaf8f7;--teal-border:#bfe6e3;
--tint-blue:#eef5fe;--tint-green:#eef8ea;--tint-amber:#fff6e3;--tint-violet:#f4f0fd;--ink-violet:#6b4fb3;
/* Navigation */
--sidebar-top:#0b1c33;--sidebar-bottom:#0a2645;--sidebar-line:rgba(255,255,255,.08);
--sidebar-text:#c9d7e8;--sidebar-text-strong:#fff;--sidebar-hover:rgba(255,255,255,.06);
/* Depth */
--shadow-xs:0 1px 2px rgba(15,34,58,.05);
--shadow-sm:0 1px 2px rgba(15,34,58,.04),0 2px 0.5714rem rgba(15,34,58,.05);
--shadow-card:0 1px 2px rgba(15,34,58,.04),0 0.2857rem 1rem rgba(15,34,58,.05);
--shadow-md:0 0.5714rem 1.7143rem rgba(15,34,58,.12),0 2px 0.4286rem rgba(15,34,58,.06);
--shadow-lg:0 1.7143rem 4.2857rem -0.8571rem rgba(9,30,56,.30),0 0.5714rem 1.4286rem rgba(9,30,56,.10);
--shadow-lift:0 0.7143rem 2rem -0.5714rem rgba(12,80,161,.22),0 0.2857rem 0.7143rem rgba(15,34,58,.06);
--ring:0 0 0 0.2143rem rgba(47,116,201,.18);
--grad-brand:linear-gradient(135deg,#0a3c7c 0%,#0c50a1 48%,#1f6fce 100%);
--grad-accent:linear-gradient(135deg,#3c8a2b,#5cb543);
--grad-hero:radial-gradient(120% 160% at 100% 0%,rgba(92,181,67,.32) 0%,rgba(92,181,67,0) 42%),radial-gradient(90% 120% at 0% 100%,rgba(59,128,214,.45) 0%,rgba(59,128,214,0) 55%),linear-gradient(125deg,#07274f 0%,#0a3f80 55%,#1263be 100%);
--radius-xs:0.3571rem;--radius-sm:0.5rem;--radius:0.7143rem;--radius-lg:0.9286rem;--radius-xl:1.2857rem;
--control-h:2.4286rem;--control-h-sm:2rem;--topbar-h:4.1429rem;--sidebar-w:18rem;--sidebar-mini:5rem;
--content-max:157.1429rem;--transition:150ms cubic-bezier(.2,.8,.2,1);
/* Workspace accent (overridden per business area below) */
--workspace-accent:var(--brand);--workspace-soft:var(--brand-50);--workspace-border:#c8dbf2;--workspace-grad:linear-gradient(135deg,#0c50a1,#3b80d6);
}
body[data-workspace="dashboard"]{--workspace-accent:#0c50a1;--workspace-soft:#eef5ff;--workspace-border:#c8dbf2;--workspace-grad:linear-gradient(135deg,#0a3f80,#2f7ad6)}
body[data-workspace="people"]{--workspace-accent:#0b7b78;--workspace-soft:#eaf8f7;--workspace-border:#bfe6e3;--workspace-grad:linear-gradient(135deg,#0b6f86,#18a39a)}
body[data-workspace="attendance"]{--workspace-accent:#1c66c2;--workspace-soft:#eef5ff;--workspace-border:#c3dcf4;--workspace-grad:linear-gradient(135deg,#1553a6,#3b8ff0)}
body[data-workspace="leave"]{--workspace-accent:#3c8a2b;--workspace-soft:#f0f9ec;--workspace-border:#cae6bd;--workspace-grad:linear-gradient(135deg,#2f7d27,#62bd48)}
body[data-workspace="payroll"]{--workspace-accent:#187a4b;--workspace-soft:#ecf8f1;--workspace-border:#bfe3cf;--workspace-grad:linear-gradient(135deg,#136c43,#23a868)}
body[data-workspace="claims"]{--workspace-accent:#a2600c;--workspace-soft:#fff7ea;--workspace-border:#efd3a6;--workspace-grad:linear-gradient(135deg,#b4640a,#eba13a)}
body[data-workspace="exit"]{--workspace-accent:#b0442f;--workspace-soft:#fff2ee;--workspace-border:#f0c8bd;--workspace-grad:linear-gradient(135deg,#a83a2a,#e0694f)}
body[data-workspace="reports"]{--workspace-accent:#6b48b8;--workspace-soft:#f5f0fd;--workspace-border:#dccff3;--workspace-grad:linear-gradient(135deg,#5b3aa6,#9a72e8)}
body[data-workspace="administration"]{--workspace-accent:#475d74;--workspace-soft:#f1f5f9;--workspace-border:#cfd9e4;--workspace-grad:linear-gradient(135deg,#34475c,#6b8299)}
body[data-workspace="general"]{--workspace-accent:#0c50a1;--workspace-soft:#eef5ff;--workspace-border:#c8dbf2}
*,*::before,*::after{box-sizing:border-box}
html{font-size:14px;background:var(--bg);color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + 12px)}
body{margin:0;background:radial-gradient(78.5714rem 37.1429rem at 100% -8%,rgba(99,102,241,.07),transparent 62%),radial-gradient(64.2857rem 34.2857rem at 0% 108%,rgba(16,185,129,.06),transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);font-family:var(--font);font-size:0.9286rem;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01","tnum" 0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:var(--brand-500);text-decoration:none;transition:color var(--transition)}a:hover{color:var(--brand-700)}
img,svg{max-width:100%}button{cursor:pointer}
button:disabled,.btn:disabled,[aria-disabled="true"]{cursor:not-allowed;opacity:.55}
[hidden]{display:none!important}
::selection{background:#cfe2fb;color:var(--text-strong)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
hr{border:0;border-top:1px solid var(--border);margin:0.8571rem 0}
code,kbd,pre,samp{font-family:var(--mono)}
dl{margin:0}dt{font-size:0.7857rem;color:var(--muted);font-weight:600}dd{margin:1px 0 0;color:var(--text-strong);font-weight:600}
table{border-collapse:collapse}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;z-index:20000;left:1rem;top:0.8571rem;transform:translateY(-200%);background:var(--text-strong);color:#fff;padding:0.6429rem 1rem;border-radius:var(--radius-sm);font-weight:700;box-shadow:var(--shadow-md);transition:transform var(--transition)}
.skip-link:focus,.skip-link:focus-visible{transform:none;color:#fff}
/* Typography */
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{color:var(--text-strong);line-height:1.22;font-family:var(--font-display)}
h1{font-size:1.5rem;margin-bottom:2px;font-weight:720;letter-spacing:-.018em}
h2{font-size:1.0714rem;margin-bottom:0.2143rem;font-weight:700;letter-spacing:-.008em}
h3{font-size:0.9643rem;margin-bottom:0.2143rem;font-weight:680}
h4{font-size:0.8929rem;margin-bottom:0.2143rem;font-weight:680}
p{margin-bottom:0.5714rem}
small{font-size:0.7857rem;color:var(--subtle)}
b,strong{font-weight:680}
.muted{color:var(--muted)}
.muted-note{color:var(--muted);font-size:0.8214rem;line-height:1.5}
.eyebrow,.step-kicker,.login-kicker{display:inline-flex;align-items:center;gap:0.4286rem;color:var(--workspace-accent,var(--brand));font-size:0.75rem;line-height:1.2;font-weight:760;letter-spacing:.09em;text-transform:uppercase;margin-bottom:0.2857rem}
.eyebrow::before,.step-kicker::before{content:"";width:0.4286rem;height:0.4286rem;border-radius:2px;background:currentColor;opacity:.85;transform:rotate(45deg);flex:0 0 auto}
.eyebrow.light{color:#bfe6b3}
.nowrap{white-space:nowrap}.num{text-align:right;font-variant-numeric:tabular-nums}
.break-value{overflow-wrap:anywhere}
/* Icons — one duotone family. The tinted backdrop is painted at low opacity. */
.ui-icon{width:1.1429rem;height:1.1429rem;display:inline-block;vertical-align:-0.2143rem;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;overflow:visible}
.ui-icon .icon-fill,.icon-fill{fill:currentColor;stroke:none;fill-opacity:.18}
body[data-workspace="dashboard"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 13h8V3H3zM3 21h8v-6H3zM13 21h8V11h-8zM13 3v6h8V3z%22/%3E%3C/svg%3E")}
body[data-workspace="people"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75%22/%3E%3C/svg%3E")}
body[data-workspace="attendance"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E")}
body[data-workspace="leave"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 2v4M18 2v4M3 9h18M5 4h14a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2Z%22/%3E%3Cpath d=%22m9 14 2 2 4-4%22/%3E%3C/svg%3E")}
body[data-workspace="payroll"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M3 10h18M7 15h4%22/%3E%3C/svg%3E")}
body[data-workspace="claims"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 2h9l3 3v17l-3-2-3 2-3-2-3 2z%22/%3E%3Cpath d=%22M9 9h6M9 13h6%22/%3E%3C/svg%3E")}
body[data-workspace="exit"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 12h9M18 9l3 3-3 3M17 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3%22/%3E%3C/svg%3E")}
body[data-workspace="reports"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20V10M10 20V4M16 20v-7M22 20H2%22/%3E%3C/svg%3E")}
body[data-workspace="administration"]{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E")}
body{--ws-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11H3Z%22/%3E%3C/svg%3E")}
/* ---- 02 Application shell ---------------------------------------------- */
.app-shell{min-height:100vh}
/* Sidebar */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:1000;display:flex;flex-direction:column;overflow:hidden;color:var(--sidebar-text);
background:radial-gradient(140% 60% at 0% 0%,rgba(59,128,214,.28) 0%,rgba(59,128,214,0) 55%),radial-gradient(120% 40% at 100% 100%,rgba(92,181,67,.16) 0%,rgba(92,181,67,0) 60%),linear-gradient(180deg,var(--sidebar-top) 0%,var(--sidebar-bottom) 100%);
border-right:1px solid rgba(255,255,255,.04);box-shadow:1px 0 0 rgba(8,24,44,.35);transition:width var(--transition),transform var(--transition),box-shadow var(--transition)}
.brand-row{height:var(--topbar-h);display:flex;align-items:center;gap:0.4286rem;padding:0 0.7143rem 0 1rem;border-bottom:1px solid var(--sidebar-line);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:0.7143rem;flex:1;min-width:0;color:#fff;border-radius:var(--radius-sm)}
.brand:hover{color:#fff}
.brand-logo-full{display:block;width:10.7143rem;height:auto}
.brand-logo-compact{display:none;width:2.5714rem;height:2.5714rem;border-radius:50%;box-shadow:0 0 0 0.2143rem rgba(255,255,255,.06)}
.sidebar-pin{width:2.1429rem;height:2.1429rem;border:1px solid rgba(255,255,255,.12);border-radius:0.5714rem;background:rgba(255,255,255,.04);color:#c7d7ea;display:grid;place-items:center;flex:0 0 auto;transition:background var(--transition),border-color var(--transition),color var(--transition)}
.sidebar-pin:hover,.sidebar-pin[aria-pressed="true"]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff}
.sidebar-pin .ui-icon{width:1.0714rem;height:1.0714rem}
.nav-tree{flex:1;display:flex;flex-direction:column;gap:2px;padding:0.8571rem 0.7143rem 6rem;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;overscroll-behavior:contain}
.nav-section-label{display:block;padding:0.8571rem 0.7143rem 0.3571rem;font-size:0.7143rem;font-weight:760;letter-spacing:.12em;text-transform:uppercase;color:rgba(201,215,232,.55);white-space:nowrap;overflow:hidden}
.nav-section-label:first-child{padding-top:2px}
.nav-link{position:relative;width:100%;min-height:2.8571rem;display:flex;align-items:center;gap:0.7857rem;padding:0 0.7143rem;border:0;border-radius:0.7143rem;background:transparent;color:var(--sidebar-text);font-size:0.9286rem;font-weight:600;white-space:nowrap;text-align:left;transition:background var(--transition),color var(--transition)}
.nav-link:hover{background:var(--sidebar-hover);color:#fff}
.nav-link.active{color:#fff;background:linear-gradient(90deg,rgba(59,128,214,.42) 0%,rgba(59,128,214,.12) 70%,rgba(59,128,214,0) 100%);box-shadow:inset 0 0 0 1px rgba(127,176,236,.16)}
.nav-link.active::before{content:"";position:absolute;left:-0.7143rem;top:0.6429rem;bottom:0.6429rem;width:0.2857rem;border-radius:0 0.2857rem 0.2857rem 0;background:linear-gradient(180deg,#7fe0ff,#5cb543);box-shadow:0 0 0.8571rem rgba(127,224,255,.55)}
.nav-icon-wrap{width:2.1429rem;height:2.1429rem;display:grid;place-items:center;flex:0 0 auto;border-radius:0.6429rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);transition:background var(--transition),transform var(--transition)}
.nav-icon-wrap .ui-icon{width:1.2143rem;height:1.2143rem;stroke-width:1.8}
.nav-icon-wrap .ui-icon .icon-fill{fill-opacity:.26}
.nav-link:hover .nav-icon-wrap{background:rgba(255,255,255,.09)}
.nav-link.active .nav-icon-wrap{background:rgba(255,255,255,.96);border-color:#fff;box-shadow:0 0.2857rem 0.8571rem rgba(0,0,0,.25)}
.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-badge{margin-left:auto;min-width:1.4286rem;height:1.4286rem;padding:0 0.4286rem;border-radius:0.7143rem;display:inline-grid;place-items:center;background:linear-gradient(135deg,#ff6b5a,#e0473b);color:#fff;font-size:0.75rem;font-weight:760;box-shadow:0 2px 0.5714rem rgba(224,71,59,.4)}
/* Domain colour for navigation glyphs (dark surface) */
.nav-icon-wrap .ui-icon[data-icon="dashboard"]{color:#6cc8ff}
.nav-icon-wrap .ui-icon[data-icon="profile"]{color:#6fe0c8}
.nav-icon-wrap .ui-icon[data-icon="people"],.nav-icon-wrap .ui-icon[data-icon="users"]{color:#5fd8d0}
.nav-icon-wrap .ui-icon[data-icon="clock"]{color:#86b9ff}
.nav-icon-wrap .ui-icon[data-icon="leave"],.nav-icon-wrap .ui-icon[data-icon="calendar"]{color:#9ee07c}
.nav-icon-wrap .ui-icon[data-icon="payroll"],.nav-icon-wrap .ui-icon[data-icon="payments"]{color:#6fe3a4}
.nav-icon-wrap .ui-icon[data-icon="expense"]{color:#ffc86e}
.nav-icon-wrap .ui-icon[data-icon="exit"]{color:#ff9f86}
.nav-icon-wrap .ui-icon[data-icon="policy"]{color:#bba6ff}
.nav-icon-wrap .ui-icon[data-icon="report"]{color:#d4a3ff}
.nav-icon-wrap .ui-icon[data-icon="folder"],.nav-icon-wrap .ui-icon[data-icon="documents"]{color:#9fcbef}
.nav-icon-wrap .ui-icon[data-icon="settings"],.nav-icon-wrap .ui-icon[data-icon="wrench"]{color:#ffd36f}
.nav-icon-wrap .ui-icon[data-icon="shield"],.nav-icon-wrap .ui-icon[data-icon="audit"]{color:#86dc97}
.nav-link.active .nav-icon-wrap .ui-icon{color:var(--brand-600)!important}
.sidebar-footer{position:absolute;left:0.7143rem;right:0.7143rem;bottom:0.7143rem;min-height:3.7143rem;padding:0.6429rem 0.7143rem;display:flex;align-items:center;gap:0.7143rem;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:0.8571rem;background:rgba(255,255,255,.045);backdrop-filter:blur(0.4286rem);overflow:hidden}
.sidebar-footer-indicator{width:0.6429rem;height:0.6429rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0.2857rem rgba(92,181,67,.18),0 0 0.8571rem rgba(92,181,67,.6);flex:0 0 auto}
.sidebar-footer div{min-width:0}
.sidebar-footer b,.sidebar-footer small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer b{font-size:0.8571rem;font-weight:650}
.sidebar-footer small{color:#9fb4cb;font-size:0.7857rem;margin-top:1px}
/* Collapsed rail (desktop, not pinned) — expands temporarily on hover/focus */
.sidebar-collapsed .sidebar{width:var(--sidebar-mini)}
.sidebar-collapsed .main{margin-left:var(--sidebar-mini)}
.sidebar-collapsed .brand-row{padding:0;justify-content:center}
.sidebar-collapsed .brand{justify-content:center;flex:0 0 auto}
.sidebar-collapsed .brand-logo-full,.sidebar-collapsed .sidebar-pin,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-badge,.sidebar-collapsed .sidebar-footer div,.sidebar-collapsed .nav-section-label{display:none}
.sidebar-collapsed .brand-logo-compact{display:block}
.sidebar-collapsed .nav-tree{padding-left:0.5714rem;padding-right:0.5714rem}
.sidebar-collapsed .nav-link{justify-content:center;padding:0}
.sidebar-collapsed .nav-link.active::before{left:-0.5714rem}
.sidebar-collapsed .nav-section-label+.nav-link{margin-top:0.7143rem}
.sidebar-collapsed .sidebar-footer{left:0.7143rem;right:0.7143rem;justify-content:center;padding:0.5714rem}
@media (min-width:821px){
.sidebar-collapsed .sidebar:hover,.sidebar-collapsed .sidebar:focus-within{width:var(--sidebar-w);box-shadow:var(--shadow-lg)}
.sidebar-collapsed .sidebar:hover .brand-row,.sidebar-collapsed .sidebar:focus-within .brand-row{padding:0 0.7143rem 0 1rem;justify-content:flex-start}
.sidebar-collapsed .sidebar:hover .brand,.sidebar-collapsed .sidebar:focus-within .brand{flex:1;justify-content:flex-start}
.sidebar-collapsed .sidebar:hover .brand-logo-full,.sidebar-collapsed .sidebar:focus-within .brand-logo-full{display:block}
.sidebar-collapsed .sidebar:hover .brand-logo-compact,.sidebar-collapsed .sidebar:focus-within .brand-logo-compact{display:none}
.sidebar-collapsed .sidebar:hover .sidebar-pin,.sidebar-collapsed .sidebar:focus-within .sidebar-pin{display:grid}
.sidebar-collapsed .sidebar:hover :is(.nav-label,.sidebar-footer div,.nav-section-label),.sidebar-collapsed .sidebar:focus-within :is(.nav-label,.sidebar-footer div,.nav-section-label){display:block}
.sidebar-collapsed .sidebar:hover .nav-section-label+.nav-link,.sidebar-collapsed .sidebar:focus-within .nav-section-label+.nav-link{margin-top:0}
.sidebar-collapsed .sidebar:hover .nav-badge,.sidebar-collapsed .sidebar:focus-within .nav-badge{display:inline-grid}
.sidebar-collapsed .sidebar:hover .nav-tree,.sidebar-collapsed .sidebar:focus-within .nav-tree{padding-left:0.7143rem;padding-right:0.7143rem}
.sidebar-collapsed .sidebar:hover .nav-link,.sidebar-collapsed .sidebar:focus-within .nav-link{justify-content:flex-start;padding:0 0.7143rem}
.sidebar-collapsed .sidebar:hover .nav-link.active::before,.sidebar-collapsed .sidebar:focus-within .nav-link.active::before{left:-0.7143rem}
.sidebar-collapsed .sidebar:hover .sidebar-footer,.sidebar-collapsed .sidebar:focus-within .sidebar-footer{justify-content:flex-start;padding:0.6429rem 0.7143rem}
}
/* Collapsed-rail badge dot */
.sidebar-collapsed .nav-link:has(.nav-badge:not([hidden]))::after{content:"";position:absolute;top:0.5rem;right:0.7857rem;width:0.5714rem;height:0.5714rem;border-radius:50%;background:#ff5a4a;box-shadow:0 0 0 2px var(--sidebar-top)}
@media (min-width:821px){.sidebar-collapsed .sidebar:is(:hover,:focus-within) .nav-link::after{display:none}}
/* Main column and top bar */
.main{margin-left:var(--sidebar-w);min-width:0;transition:margin-left var(--transition)}
.topbar{height:var(--topbar-h);position:sticky;top:0;z-index:800;display:grid;grid-template-columns:minmax(15.7143rem,1fr) minmax(18.5714rem,31.4286rem) minmax(15.7143rem,1fr);align-items:center;gap:1.1429rem;padding:0 1.4286rem;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(1rem);-webkit-backdrop-filter:saturate(1.6) blur(1rem);border-bottom:1px solid var(--border);transition:box-shadow var(--transition)}
.is-scrolled .topbar{box-shadow:0 0.4286rem 1.2857rem -0.7143rem rgba(15,34,58,.25)}
.topbar-left,.topbar-actions{display:flex;align-items:center;min-width:0}
.topbar-left{gap:0.8571rem}
.topbar-actions{justify-content:flex-end;gap:0.5714rem}
.page-context{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.page-context .context-kicker{display:flex;align-items:center;gap:0.4286rem;font-size:0.75rem;text-transform:uppercase;letter-spacing:.09em;color:var(--workspace-accent);font-weight:760}
.page-context .context-kicker::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:var(--workspace-grad);box-shadow:0 0 0 0.2143rem var(--workspace-soft)}
.page-context strong{font-size:1rem;color:var(--text-strong);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0.2857rem;letter-spacing:-.005em}
.icon-btn{width:2.5714rem;height:2.5714rem;border:1px solid var(--border);border-radius:0.7143rem;background:#fff;color:#44607c;display:grid;place-items:center;position:relative;flex:0 0 auto;transition:background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition),transform var(--transition)}
.icon-btn:hover{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-600);box-shadow:var(--shadow-sm)}
.icon-btn .ui-icon{width:1.2857rem;height:1.2857rem}
.icon-btn.help-shortcut{color:#0b7f96}
.icon-btn.settings-shortcut{color:#9a6a00}
.mobile-menu{display:grid}
.mobile-search-button{display:none}
.notification-count{position:absolute;top:-0.4286rem;right:-0.4286rem;min-width:1.3571rem;height:1.3571rem;padding:0 0.3571rem;border-radius:0.7143rem;background:linear-gradient(135deg,#ff6b5a,#e0473b);color:#fff;border:2px solid #fff;font-size:0.7143rem;font-weight:780;display:grid;place-items:center;box-shadow:0 2px 0.4286rem rgba(224,71,59,.4)}
/* Global command search */
.global-search{position:relative;height:2.7143rem;display:flex;align-items:center;gap:2px;min-width:0;padding:0 0.7143rem;border:1px solid var(--border);border-radius:0.7857rem;background:var(--surface-2);transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}
.global-search:focus-within{background:#fff;border-color:var(--brand-300);box-shadow:var(--ring)}
.global-search>span{display:grid;color:#7a8ea4}
.global-search input{flex:1;min-width:0;height:2.4286rem;padding:0 0.5714rem;font-size:0.9286rem}
:is(.global-search,.search-control,.quick-search-control,.attendance-date-scope) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;outline:0}
.global-search input::placeholder{color:#7b8b9c}
.global-search kbd{min-width:1.5714rem;height:1.5714rem;display:grid;place-items:center;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:0.4286rem;background:#fff;color:#5b6f84;font:600 0.7857rem/1 var(--mono)}
.search-popover{position:absolute;top:3.1429rem;left:50%;transform:translateX(-50%);width:min(37.1429rem,calc(100vw - 1.7143rem));max-height:min(30rem,70vh);overflow:auto;padding:0.4286rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;box-shadow:var(--shadow-lg);z-index:4300;animation:hrms-pop .16s ease both}
.search-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0.8571rem;min-height:3.1429rem;padding:0.5rem 0.7143rem;border-radius:0.6429rem;color:var(--text)}
.search-result:hover,.search-result.active{background:var(--brand-50);color:var(--brand-700)}
.search-result-copy{display:grid;gap:0.2857rem;min-width:0}
.search-result-copy>strong{font-size:0.9286rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.search-result-copy>small{display:flex;align-items:center;gap:0.4286rem;min-width:0;white-space:nowrap}
.search-module-badge,.search-type-badge{display:inline-flex;align-items:center;height:1.2857rem;max-width:13.5714rem;padding:0 0.4286rem;border-radius:0.3571rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.7143rem;font-weight:720;letter-spacing:.02em}
.search-module-badge{background:#e6f0fb;color:#174f86}
.search-type-badge{background:#eef1f5;color:#566a7e}
.search-type-badge[data-kind="action"]{background:#fff3dc;color:#8a5a08}
.search-type-badge[data-kind="setting"]{background:#f1ecfe;color:#5b46a8}
.search-type-badge[data-kind="master"]{background:#e8f6f5;color:#1f6d6c}
.search-type-badge[data-kind="module"]{background:#eaf2fc;color:#2c5d8f}
.search-type-badge[data-kind="page"]{background:#edf7ea;color:#39702f}
.search-context{min-width:0;max-width:12.8571rem;overflow:hidden;text-overflow:ellipsis;color:var(--faint);font-size:0.75rem}
.search-result-action{display:inline-flex;align-items:center;gap:0.3571rem;color:#6b7f93;font-size:0.7857rem;font-weight:650;white-space:nowrap}
.search-result-action b{font-size:1.1429rem;line-height:1;color:#9aabbb}
.search-result:hover .search-result-action,.search-result.active .search-result-action,.search-result.active .search-result-action b{color:var(--brand-600)}
.search-summary{position:sticky;bottom:-0.4286rem;margin:0.2857rem -0.4286rem -0.4286rem;padding:0.5rem 0.8571rem;border-top:1px solid var(--border-soft);background:rgba(255,255,255,.96);color:var(--faint);font-size:0.75rem;text-align:right}
.search-empty{padding:1.2857rem 0.8571rem;color:var(--muted);font-size:0.8929rem;text-align:center}
/* Attendance quick action */
.punch-wrap{display:flex;align-items:center;gap:0.5714rem}
.punch-button{height:2.5714rem!important;padding:0 1rem 0 0.8571rem!important;border-radius:0.7143rem!important;font-weight:680!important;border-color:var(--success-border)!important;background:linear-gradient(180deg,#f3fbf5,#e6f6ea)!important;color:var(--success)!important}
.punch-button::before{content:"";width:0.5714rem;height:0.5714rem;border-radius:50%;background:var(--success-solid);box-shadow:0 0 0 0.2143rem rgba(34,163,82,.18);flex:0 0 auto}
.punch-button[data-type="OUT"]{border-color:var(--warning-border)!important;background:linear-gradient(180deg,#fffaf0,#fff1d6)!important;color:var(--warning)!important}
.punch-button[data-type="OUT"]::before{background:var(--warning-solid);box-shadow:0 0 0 0.2143rem rgba(230,155,18,.2)}
.punch-button:hover{filter:brightness(.98);box-shadow:var(--shadow-sm)}
.punch-feedback{font-size:0.7857rem;color:var(--muted);max-width:10.7143rem;line-height:1.25}
.activation-pill{max-width:14.2857rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--warning-border);background:var(--warning-bg);color:var(--warning);border-radius:71.3571rem;padding:0.3571rem 0.7143rem;font-size:0.7857rem;font-weight:680}
/* Profile menu */
.profile-menu{position:relative}
.profile-trigger{height:2.7143rem;display:flex;align-items:center;gap:0.6429rem;min-width:0;padding:0.2143rem 0.6429rem 0.2143rem 0.2143rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition)}
.profile-trigger:hover,.profile-trigger[aria-expanded="true"]{background:var(--surface-2);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.profile-glyph{width:2.1429rem;height:2.1429rem;border-radius:0.6429rem;display:grid;place-items:center;background:var(--grad-brand);color:#fff;font-size:0.7857rem;font-weight:760;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.profile-copy{display:none;line-height:1.15;text-align:left;max-width:11.4286rem}
.profile-copy b,.profile-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-copy b{font-size:0.8571rem;font-weight:650;color:var(--text-strong)}
.profile-copy small{font-size:0.75rem;color:var(--muted);margin-top:2px}
.profile-caret{display:grid;color:#8093a7}
.profile-caret .ui-icon{width:1rem;height:1rem;transition:transform var(--transition)}
.profile-trigger[aria-expanded="true"] .profile-caret .ui-icon{transform:rotate(180deg)}
.profile-popover{position:absolute;right:0;top:3.2857rem;width:19.2857rem;padding:0.4286rem;border:1px solid var(--border);border-radius:1rem;background:#fff;box-shadow:var(--shadow-lg);z-index:3000;animation:hrms-pop .16s ease both}
.profile-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 0.7143rem;align-items:center;padding:0.7143rem;margin-bottom:0.2857rem;border-radius:0.7143rem;background:linear-gradient(135deg,var(--brand-50),#f4fbf1)}
.profile-meta::before{content:attr(data-initials);grid-row:1/4;width:2.7143rem;height:2.7143rem;border-radius:0.7857rem;display:grid;place-items:center;background:var(--grad-brand);color:#fff;font-weight:760;font-size:0.9286rem}
.profile-meta b,.profile-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-meta b{color:var(--text-strong);font-size:0.9286rem}
.profile-meta small{color:var(--muted);font-size:0.7857rem}
.profile-meta .role-tag{justify-self:start;margin-top:0.2143rem}
.profile-popover>a,.profile-popover form .logout-link{width:100%;height:2.7143rem;padding:0 0.7143rem;border:0;border-radius:0.6429rem;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:flex-start;gap:0.7143rem;font-size:0.8929rem;font-weight:560;text-align:left;box-shadow:none}
.profile-popover>a .ui-icon,.profile-popover .logout-link .ui-icon{width:1.2143rem;height:1.2143rem;color:#6c8196}
.profile-popover>a:hover,.profile-popover form .logout-link:hover{background:var(--surface-2);color:var(--brand-600)}
.profile-popover form{margin:0.2857rem 0 0;padding-top:0.2857rem;border-top:1px solid var(--border-soft)}
.profile-popover form .logout-link{color:var(--danger)}
.profile-popover form .logout-link .ui-icon{color:var(--danger)}
.profile-popover form .logout-link:hover{background:var(--danger-bg);color:var(--danger)}
/* Content region */
.content{width:100%;max-width:var(--content-max);margin:0 auto;padding:0.4286rem 1.4286rem 2.2857rem}
.breadcrumb-row{min-height:2.1429rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;color:var(--faint);font-size:0.8214rem}
.breadcrumb-row a{color:#5a6d82;font-weight:520}
.breadcrumb-row a:hover{color:var(--brand-600)}
.breadcrumb-row span[aria-hidden]{color:#b3c0cd}
.breadcrumb-row strong{color:var(--text-strong);font-weight:640}
.mobile-overlay{display:none}
/* ---- 03 Page structure ------------------------------------------------- */
.page-title,.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1.1429rem}
.page-title{position:relative;align-items:center;min-height:4.8571rem;margin:0 0 0.8571rem;padding:0.9286rem 1.1429rem 0.9286rem 1rem;background:linear-gradient(100deg,#fff 0%,#fff 58%,var(--workspace-soft) 100%);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.page-title::before{content:"";flex:0 0 3rem;width:3rem;height:3rem;border-radius:0.8571rem;background:var(--workspace-grad);box-shadow:0 0.4286rem 1.1429rem -0.4286rem var(--workspace-accent),inset 0 0 0 1px rgba(255,255,255,.2);align-self:center}
.page-title::after{content:"";position:absolute;left:1rem;top:50%;margin-top:-1.5rem;width:3rem;height:3rem;background:#fff;-webkit-mask:var(--ws-icon) center/1.5rem 1.5rem no-repeat;mask:var(--ws-icon) center/1.5rem 1.5rem no-repeat;pointer-events:none}
.page-title>div:first-child{flex:1 1 auto;min-width:0}
.page-title h1{margin:0}
.page-title .eyebrow{margin-bottom:0.2143rem}
.page-title p,.section-heading p,.panel-title p{color:var(--muted);font-size:0.8571rem;line-height:1.45;margin:0.2143rem 0 0;max-width:62.8571rem}
.page-title .actions,.page-title>.btn{align-self:center;flex:0 0 auto}
.page-title>.btn{margin-left:auto}
.section-heading{align-items:flex-end;padding:0.2857rem 2px 0.5714rem;margin:1.2857rem 0 0.7143rem;border-bottom:1px solid var(--border)}
.section-heading h2{margin:0;font-size:1.0714rem}
.actions{display:flex;align-items:center;gap:0.5714rem;flex-wrap:wrap}
.page-gap{height:0.7143rem}
.page-primary-actions{display:flex;gap:0.5714rem;flex-wrap:wrap}
/* Module workspace tabs (second navigation level) */
.module-workspace.module-workspace-tabs{position:relative;display:flex;align-items:center;gap:0.2857rem;padding:0.3571rem;margin:0 0 0.8571rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;box-shadow:var(--shadow-xs);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.module-workspace.module-workspace-tabs::-webkit-scrollbar{display:none}
.module-workspace-tabs .module-workspace-link{position:relative;display:inline-flex;align-items:center;gap:0.5714rem;min-height:2.5714rem;padding:0.2857rem 0.8571rem 0.2857rem 0.3571rem;border-radius:0.6429rem;color:#4a5f75;font-size:0.8929rem;font-weight:620;white-space:nowrap;scroll-snap-align:start;transition:background var(--transition),color var(--transition),box-shadow var(--transition)}
.module-workspace-tabs .module-workspace-link:hover{background:var(--surface-2);color:var(--text-strong)}
.module-workspace-tabs .module-workspace-link.active{background:var(--workspace-soft);color:var(--workspace-accent);box-shadow:inset 0 0 0 1px var(--workspace-border)}
.module-workspace-tabs .module-workspace-link.active::after{content:"";position:absolute;left:0.8571rem;right:0.8571rem;bottom:-0.4286rem;height:0.2143rem;border-radius:0.2143rem 0.2143rem 0 0;background:var(--workspace-grad)}
.module-workspace-icon{width:1.8571rem;height:1.8571rem;display:grid;place-items:center;flex:0 0 auto;border-radius:0.5714rem;background:var(--surface-3);color:#6b7f94;transition:background var(--transition),color var(--transition)}
.module-workspace-icon .ui-icon{width:1.0714rem;height:1.0714rem}
.module-workspace-link.active .module-workspace-icon{background:var(--workspace-grad);color:#fff;box-shadow:0 0.2143rem 0.5714rem -0.2143rem var(--workspace-accent)}
.module-workspace-link.active .module-workspace-icon .icon-fill{fill-opacity:.3}
/* Secondary tabs: settings, form sections, employee workspace */
.form-section-nav,.employee-form-tabs,.employee-workspace-tabs,.settings-tabs{display:flex;gap:0.2857rem;overflow-x:auto;padding:0.2857rem;margin:0 0 0.8571rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;scrollbar-width:none;scroll-snap-type:x proximity}
.form-section-nav::-webkit-scrollbar,.employee-form-tabs::-webkit-scrollbar,.employee-workspace-tabs::-webkit-scrollbar,.settings-tabs::-webkit-scrollbar{display:none}
.settings-tabs{position:sticky;top:calc(var(--topbar-h) + 0.4286rem);z-index:35;box-shadow:var(--shadow-sm)}
.form-section-nav a,.employee-workspace-tabs a,.settings-tab{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.4286rem;padding:0 0.7857rem;border:0;border-radius:0.6429rem;background:transparent;color:#4d6278;font-size:0.8929rem;font-weight:620;white-space:nowrap;scroll-snap-align:start;transition:background var(--transition),color var(--transition)}
.form-section-nav a:hover,.employee-workspace-tabs a:hover,.settings-tab:hover{background:var(--surface-2);color:var(--text-strong)}
.form-section-nav a.active,.employee-workspace-tabs a.active,.settings-tab.active{background:var(--workspace-soft);color:var(--workspace-accent);box-shadow:inset 0 0 0 1px var(--workspace-border)}
.tab-svg{width:1.5714rem;height:1.5714rem;display:grid;place-items:center;flex:0 0 auto;border-radius:0.5rem;background:var(--surface-3);color:#6b7f94}
.tab-svg .ui-icon{width:0.9286rem;height:0.9286rem}
.settings-tab.active .tab-svg,.form-section-nav a.active .tab-svg{background:var(--workspace-grad);color:#fff}
.employee-workspace-tabs a .ui-icon{width:1.0714rem;height:1.0714rem;color:#7185a0}
.employee-workspace-tabs a.active .ui-icon{color:var(--workspace-accent)}
.employee-workspace-label{display:flex;align-items:baseline;gap:0.5714rem;margin:2px 2px 0.4286rem}
.employee-workspace-label span{font-size:0.75rem;font-weight:760;letter-spacing:.09em;text-transform:uppercase;color:var(--workspace-accent)}
.employee-workspace-label small{font-size:0.7857rem;color:var(--muted)}
.employee-form-tabs{gap:0.4286rem;padding:0.3571rem}
.employee-form-tabs button{position:relative;min-height:3.4286rem;padding:0.5rem 0.8571rem;border:1px solid transparent;border-radius:0.7143rem;background:transparent;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;white-space:nowrap;color:#4d6278;font-size:0.8929rem;font-weight:660;line-height:1.2;text-align:left;transition:background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition)}
.employee-form-tabs button>small{font-size:0.75rem;font-weight:500;color:var(--subtle);max-width:17.1429rem;overflow:hidden;text-overflow:ellipsis}
.employee-form-tabs button:hover{background:var(--surface-2);color:var(--text-strong)}
.employee-form-tabs button.active{background:var(--workspace-soft);border-color:var(--workspace-border);color:var(--workspace-accent);box-shadow:inset 0 -0.2143rem 0 var(--workspace-accent)}
.employee-form-tabs button.has-errors{border-color:var(--danger-border)}
.employee-form-tabs button.has-errors:not(.active){background:#fff7f6;color:var(--danger)}
.employee-tab-title{display:flex;align-items:center;gap:0.5rem}
.employee-tab-title .ui-icon{width:1.0714rem;height:1.0714rem;color:#7185a0}
.employee-form-tabs button.active .employee-tab-title .ui-icon{color:var(--workspace-accent)}
.tab-error-count{position:absolute;right:0.4286rem;top:0.3571rem;min-width:1.2143rem;height:1.2143rem;padding:0 0.2857rem;border-radius:0.6429rem;background:var(--danger-solid);color:#fff;font:760 0.7143rem/1.2143rem var(--font);text-align:center;font-style:normal}
/* Panel headings */
.panel-title,.panel-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:0.4286rem 0.8571rem;margin-bottom:0.7143rem}
.panel-title>h2,.panel-title>h3{flex:1 1 auto}
.panel-title h2,.panel-title h3,.panel-head h2,.panel-head h3{margin:0;color:var(--text-strong)}
.panel-title h2{font-size:1.0357rem}.panel-title h3{font-size:0.9643rem}
.panel-title>span,.panel-head>span{flex:0 0 auto;color:var(--muted);font-size:0.8214rem;font-weight:560}
.panel-title>span a{font-weight:640}
.panel-body{min-width:0}
.head{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem}
.box,.sheet{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:0.8571rem}
@media (min-width:821px){.module-workspace.module-workspace-tabs{flex-wrap:wrap;overflow:visible}.module-workspace-tabs .module-workspace-link.active::after{bottom:-0.3571rem}}
/* ---- 04 Controls ------------------------------------------------------- */
/* Buttons */
.btn{position:relative;min-height:var(--control-h);padding:0 0.9286rem;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;border:1px solid var(--border-strong);border-radius:0.6429rem;background:#fff;color:#2c4460;font-size:0.8929rem;font-weight:620;line-height:1;white-space:nowrap;vertical-align:middle;text-decoration:none;box-shadow:0 1px 1px rgba(15,34,58,.04);transition:background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition),transform var(--transition),filter var(--transition)}
.btn:hover{background:var(--surface-2);border-color:#b3c1d1;color:var(--text-strong);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn .ui-icon{width:1.0714rem;height:1.0714rem}
.btn.primary{border-color:transparent;background:linear-gradient(180deg,#1766c4 0%,#0c50a1 100%);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0.2857rem 0.8571rem -0.2857rem rgba(12,80,161,.55)}
.btn.primary:hover{background:linear-gradient(180deg,#1c71d6 0%,#0d57b0 100%);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 0.5714rem 1.2857rem -0.4286rem rgba(12,80,161,.6)}
.btn.primary .ui-icon .icon-fill{fill-opacity:.3}
.btn.danger{color:var(--danger);border-color:var(--danger-border);background:#fff}
.btn.danger:hover{background:var(--danger-bg);border-color:#e8a8a2;color:var(--danger)}
.btn.danger-fill{border-color:transparent;background:linear-gradient(180deg,#e0473b,#bf2f25);color:#fff;box-shadow:0 0.2857rem 0.8571rem -0.2857rem rgba(191,47,37,.55)}
.btn.danger-fill:hover{background:linear-gradient(180deg,#e85a4e,#c9362b);color:#fff}
.btn.btn-danger-soft{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.btn.btn-danger-soft:hover{background:#ffe2de;border-color:#e8a8a2;color:var(--danger)}
.btn.quiet{border-color:transparent;background:transparent;box-shadow:none;color:#4c6279}
.btn.quiet:hover{background:var(--surface-3);color:var(--brand-600);box-shadow:none}
.btn.compact{min-height:var(--control-h-sm);padding:0 0.7143rem;font-size:0.8214rem;border-radius:0.5714rem}
.btn.icon-only{width:2.2857rem;min-width:2.2857rem;padding:0}
.btn.icon-leading .ui-icon{width:1.0714rem;height:1.0714rem}
.text-link{background:none;border:0;padding:0;color:var(--brand-500);font-weight:640;font-size:0.8571rem;cursor:pointer}
.text-link:hover{color:var(--brand-700);text-decoration:underline;text-underline-offset:0.2143rem}
.table-action{width:2rem;min-width:2rem;height:2rem;padding:0;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:0.5714rem;background:#fff;color:#4f6882;transition:background var(--transition),border-color var(--transition),color var(--transition),transform var(--transition)}
.table-action .ui-icon{width:1.0714rem;height:1.0714rem}
.table-action:hover{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-600);transform:translateY(-1px)}
.table-action.view{color:var(--brand-500)}
.table-action.edit{color:#8a6400}.table-action.edit:hover{background:var(--warning-bg);border-color:var(--warning-border);color:#7a5600}
.table-action.delete{color:var(--danger)}.table-action.delete:hover{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.table-action.approve{color:var(--success)}.table-action.approve:hover{background:var(--success-bg);border-color:var(--success-border)}
.table-action.download{color:#3f6384}
.row-action .inline-action{display:inline-block;margin-right:0.2857rem}
.btn.is-busy,button.is-busy{pointer-events:none;opacity:.78;color:transparent!important}
.btn.is-busy::after,button.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:1rem;height:1rem;margin:-0.5rem 0 0 -0.5rem;border-radius:50%;border:2px solid #fff;border-top-color:transparent;animation:naam-busy-spin .7s linear infinite}
.btn.is-busy:not(.primary):not(.danger-fill)::after{border-color:#4d6882;border-top-color:transparent}
@keyframes naam-busy-spin{to{transform:rotate(360deg)}}
/* Form controls */
.form-control,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),select,textarea{min-height:var(--control-h);max-width:100%;padding:0.4286rem 0.7143rem;border:1px solid var(--border-strong);border-radius:0.5714rem;background:#fff;color:var(--text-strong);font-size:0.9286rem;outline:none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}
.form-control:hover,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):hover,select:hover,textarea:hover{border-color:#b0bfd0}
.form-control:focus,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,select:focus,textarea:focus{border-color:var(--brand-400);box-shadow:var(--ring);outline:0}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:#8d9bab}
textarea{min-height:5.1429rem;line-height:1.45;resize:vertical}
select:not([multiple]){-webkit-appearance:none;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235b6f84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.7143rem center;background-size:0.8571rem 0.8571rem;padding-right:2.2857rem!important}
.form-control:disabled,input:disabled,select:disabled,textarea:disabled,.readonly{background-color:var(--surface-3);color:#5f7084;cursor:not-allowed;border-color:var(--border)}
select:not([multiple]):disabled{background-color:var(--surface-3);background-repeat:no-repeat}
.form-control.readonly{display:flex;align-items:center;min-height:var(--control-h);color:#46596d;background:var(--surface-2);border-style:dashed}
.readonly-multiline{align-items:flex-start;white-space:pre-wrap;min-height:4.5714rem}
input[type="checkbox"],input[type="radio"]{width:1.1429rem;height:1.1429rem;min-height:1.1429rem;margin:0;accent-color:var(--brand-600);flex:0 0 auto;cursor:pointer}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{cursor:not-allowed}
input[type="date"],input[type="month"],input[type="time"],input[type="datetime-local"]{font-variant-numeric:tabular-nums}
input[type="file"]{max-width:100%;padding:0.4286rem;border:1px dashed var(--border-strong);border-radius:0.6429rem;background:var(--surface-2);font-size:0.8571rem;color:var(--muted);cursor:pointer}
input[type="file"]:hover{border-color:var(--brand-300);background:var(--brand-50)}
input[type="file"]::file-selector-button{margin-right:0.7143rem;padding:0.5rem 0.8571rem;border:1px solid var(--brand-200);border-radius:0.5rem;background:#fff;color:var(--brand-600);font:600 0.8571rem/1.2 var(--font);cursor:pointer;transition:background var(--transition)}
input[type="file"]::file-selector-button:hover{background:var(--brand-50)}
input[type="file"]~:is(.btn,button),.field:has(input[type="file"])+:is(.btn,button){margin-top:0.7143rem}
.table-wrap tbody td .form-control,.table-wrap tbody td input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),.table-wrap tbody td select{min-height:2rem;height:2rem;padding:0 0.5714rem;font-size:0.8571rem;border-radius:0.5rem}
.table-wrap tbody td select{padding-right:1.7143rem!important;background-position:right 0.5rem center;background-size:0.7143rem 0.7143rem}
.table-wrap tbody td .btn{min-height:2rem;height:2rem;padding:0 0.7143rem;font-size:0.8214rem}
[aria-invalid="true"]{border-color:#dc6a61!important;box-shadow:0 0 0 0.2143rem rgba(224,71,59,.12)!important}
/* Field layout */
.field{display:flex;flex-direction:column;gap:0.3571rem;min-width:0}
.field>label,.field-label-text,.criteria-row label>span,.advanced-filter-grid label>span{color:#34495f;font-size:0.8571rem;font-weight:620}
.field-help,.field-optional{font-size:0.7857rem;line-height:1.45;color:var(--muted);font-weight:400}
.field-error,.field.has-error .field-help{color:var(--danger)}
.required-mark{color:var(--danger-solid);font-weight:760;margin-left:1px}
.optional-label{display:inline-flex;margin-left:0.4286rem;color:var(--faint);font-size:0.75rem;font-weight:500}
.field.is-required-field>label{font-weight:680}
.field.is-activation-required>label{color:var(--warning)}
.field.is-activation-required :is(.form-control,select,textarea){border-color:var(--warning-border);background-color:#fffdf5}
.field.employment-applicable>label{color:var(--text-strong)}
.field.employment-not-applicable{opacity:.6}
.field.employment-not-applicable>label::after{content:" · not applicable";font-size:0.7143rem;font-weight:600;color:var(--subtle)}
.leave-balance-help{min-height:1.1429rem}.leave-balance-help.success{color:var(--success)}.leave-balance-help.warning{color:var(--warning)}
.form-grid,.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.8571rem 1.1429rem}
.form-grid .span-2,.span-2{grid-column:span 2}
.two-col,.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.8571rem 1.1429rem}
.inline-form{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0.7143rem}
.inline-form .field{flex:0 1 15.7143rem}
.inline-form .field>span{font-size:0.7857rem;font-weight:680;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.inline-form .btn{flex:0 0 auto}
.inline-action{display:flex;gap:0.5714rem;align-items:end}
.checkbox-control,.toggle{display:flex!important;align-items:center;gap:0.6429rem!important;font-weight:600!important;cursor:pointer}
.day-toggle{display:flex;gap:0.4286rem;flex-wrap:wrap;align-items:center}
.day-toggle label{display:inline-flex;align-items:center;gap:0.4286rem;padding:0.3571rem 0.7143rem;border:1px solid var(--border);border-radius:71.3571rem;background:#fff;font-size:0.8571rem;font-weight:600;cursor:pointer;transition:background var(--transition),border-color var(--transition)}
.day-toggle label:hover{border-color:var(--brand-200);background:var(--brand-50)}
.day-toggle label:has(input:checked){border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-700)}
.multi-select-control,.multi-select{min-height:6rem}
.readonly-box{background:var(--surface-2);border:1px solid var(--border);border-radius:0.6429rem;padding:0.6429rem 0.7857rem}
.system-chip,.field-chip{display:inline-flex;align-items:center;gap:0.2857rem;border:1px solid var(--border);background:var(--surface-2);border-radius:71.3571rem;padding:0.2143rem 0.6429rem;font-size:0.7857rem;color:#4a6076;font-weight:560}
.system-default-chips,.tag-list{display:flex;gap:0.4286rem;flex-wrap:wrap}
.empty-chip{border-style:dashed!important;color:var(--muted)!important;background:var(--surface-2)!important}
.activation-chip{border-color:var(--warning-border);background:var(--warning-bg);color:var(--warning);font-weight:680}
.conditional-required{margin-left:0.2857rem}
/* Form cards */
.form-card,.card,.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.form-card{padding:1.1429rem 1.2857rem}
.content>.form-card{border-top:0.2143rem solid var(--workspace-border)}
.form-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:1.1429rem;padding-bottom:0.8571rem;margin-bottom:0.8571rem;border-bottom:1px solid var(--border-soft)}
.form-intro h2,.form-intro h3{margin:0;font-size:1.0714rem}
.form-intro p{color:var(--muted);font-size:0.8571rem;margin:0.2143rem 0 0}
.form-intro+.form-section{border-top:0;padding-top:2px}
.form-section{padding:1rem 0;border-top:1px solid var(--border-soft)}
.form-section:first-child{border-top:0}
.form-group-heading{display:flex;align-items:center;gap:0.5714rem;margin:0 0 0.7143rem;color:var(--text-strong);font-size:0.9286rem;font-weight:700}
.form-group-heading::before{content:"";width:0.2857rem;height:1.1429rem;border-radius:0.2143rem;background:var(--workspace-grad,linear-gradient(180deg,var(--brand),var(--accent)));flex:0 0 auto}
.form-group-heading small{font-weight:500;color:var(--faint);font-size:0.7857rem}
.form-legend{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;color:#4a5f75;font-size:0.8214rem;font-weight:600}
.form-legend>span{display:inline-flex;align-items:center;gap:0.4286rem;white-space:nowrap}
.legend-required,.legend-system{width:0.5714rem;height:0.5714rem;border-radius:50%;flex:0 0 auto;display:inline-block}
.legend-required{background:var(--danger-solid);box-shadow:0 0 0 0.2143rem var(--danger-bg)}
.legend-system{background:#8797a8;box-shadow:0 0 0 0.2143rem var(--surface-3)}
.form-actions{position:sticky;bottom:0;z-index:40;display:flex;align-items:center;justify-content:flex-end;gap:0.5714rem;padding:0.8571rem 0 2px;margin-top:0.8571rem;background:linear-gradient(180deg,rgba(255,255,255,0) 0,#fff 1rem);border-top:1px solid var(--border-soft)}
.form-actions .btn{min-width:6.8571rem}
.request-form-compact{padding:1rem 1.1429rem}
.request-form-compact .form-intro{margin-bottom:0.7143rem;padding-bottom:0.5714rem}
.request-form-compact .form-grid{gap:0.7143rem 1rem}
.request-form-compact textarea.form-control{min-height:4.2857rem}
.form-card-compact{padding:1rem 1.1429rem}
.compact-intro{padding-bottom:0.5714rem;margin-bottom:0.5714rem}
.request-calculated-strip{display:flex;align-items:center;gap:0.6429rem;min-height:var(--control-h);padding:0.4286rem 0.7143rem;border:1px solid var(--brand-100);border-radius:0.6429rem;background:linear-gradient(90deg,var(--brand-50),#fff)}
.request-calculated-strip small{font-size:0.7143rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.request-calculated-strip b{font-size:1.1429rem;line-height:1;color:var(--brand-700);font-variant-numeric:tabular-nums}
.request-calculated-strip span{font-size:0.7857rem;color:var(--muted)}
.request-system-summary{border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2);margin:0 0 0.7143rem;padding:0 0.8571rem}
.request-system-summary>summary{cursor:pointer;min-height:2.7143rem;display:flex;align-items:center;gap:0.5714rem;font-size:0.8571rem;font-weight:680;color:#475c72;list-style:none}
.request-system-summary>summary::-webkit-details-marker{display:none}
.request-system-summary>summary span{margin-left:auto;min-width:1.5714rem;height:1.4286rem;border-radius:0.7143rem;background:var(--surface-3);display:inline-grid;place-items:center;font-size:0.75rem}
.request-system-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5714rem;padding:0 0 0.8571rem}
.request-system-grid>div{min-width:0;padding:0.5rem 0.6429rem;border:1px solid var(--border);border-radius:0.5714rem;background:#fff}
.request-system-grid small{display:block;color:var(--muted);font-size:0.75rem;margin-bottom:2px}
.request-system-grid b{display:block;font-size:0.8571rem;color:var(--text-strong);overflow-wrap:anywhere}
/* Checkbox multi-select (enhanced native multi-select) */
.criteria-multi,.checkbox-multi{position:relative;display:block;min-width:0;width:100%}
.criteria-multi-trigger,.checkbox-multi-trigger{position:relative;width:100%;height:var(--control-h);min-height:var(--control-h);padding:0 2.1429rem 0 0.7143rem;border:1px solid var(--border-strong);border-radius:0.5714rem;background:#fff;color:var(--text-strong);font-size:0.8929rem;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition)}
.criteria-multi-trigger::after,.checkbox-multi-trigger::after{content:"";position:absolute;right:0.7857rem;top:50%;width:0.5rem;height:0.5rem;margin-top:-0.3571rem;border-right:0.1143rem solid #5b6f84;border-bottom:0.1143rem solid #5b6f84;transform:rotate(45deg)}
.criteria-multi.is-open>.criteria-multi-trigger,.checkbox-multi.is-open>.checkbox-multi-trigger{border-color:var(--brand-400);box-shadow:var(--ring)}
.criteria-multi-panel,.checkbox-multi-panel{position:fixed!important;z-index:1200;display:flex;flex-direction:column;min-width:0;max-height:22.8571rem;margin:0;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:0.7143rem;background:#fff;box-shadow:0 1rem 2.4286rem rgba(15,35,60,.18),0 2px 0.4286rem rgba(15,35,60,.08);overscroll-behavior:contain;animation:multi-pop .12s ease-out}
.criteria-multi-panel[hidden],.checkbox-multi-panel[hidden]{display:none!important}
@keyframes multi-pop{from{opacity:0;transform:translateY(-0.2143rem)}to{opacity:1;transform:none}}
.criteria-multi-panel.opens-up,.checkbox-multi-panel.opens-up{animation-name:multi-pop-up}
@keyframes multi-pop-up{from{opacity:0;transform:translateY(0.2143rem)}to{opacity:1;transform:none}}
.criteria-multi-tools,.checkbox-multi-tools{flex:0 0 auto;display:flex;gap:0.2857rem;align-items:center;padding:0.4286rem;border-bottom:1px solid var(--border-soft);background:var(--surface-2,#f6f8fb)}
.multi-search{flex:1 1 auto;min-width:0;height:2.1429rem!important;min-height:2.1429rem!important;padding:0 0.6429rem!important;border:1px solid var(--border-strong)!important;border-radius:0.5rem!important;background:#fff!important;font-size:0.8571rem!important}
.multi-search:focus{outline:none;border-color:var(--brand-400)!important;box-shadow:var(--ring)}
.criteria-multi-tools .btn,.checkbox-multi-tools .btn{flex:0 0 auto;height:2.1429rem;min-height:2.1429rem;padding:0 0.5714rem;font-size:0.8214rem}
.criteria-multi-options,.checkbox-multi-options{flex:1 1 auto;display:flex;flex-direction:column;gap:1px;padding:0.3571rem;overflow:auto;overscroll-behavior:contain}
.criteria-multi-option[hidden],.checkbox-multi-option[hidden]{display:none!important}
.criteria-multi-option,.checkbox-multi-option{display:flex!important;align-items:center!important;gap:0.5714rem!important;min-width:0;min-height:2.1429rem;padding:0.2857rem 0.5rem;border-radius:0.5rem;font-size:0.8571rem!important;font-weight:560!important;color:var(--text)!important;cursor:pointer}
.criteria-multi-option>span,.checkbox-multi-option>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.criteria-multi-option:hover,.checkbox-multi-option:hover{background:var(--surface-2)}
.criteria-multi-option:has(input:checked),.checkbox-multi-option:has(input:checked){background:var(--brand-50);color:var(--brand-700)!important}
.criteria-multi-option input,.checkbox-multi-option input{width:1.0714rem!important;height:1.0714rem!important;min-height:1.0714rem!important;margin:0!important}
.criteria-multi-option.stale{opacity:.7}
.native-multi-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
/* Sensitive values */
.sensitive-field-wrap{display:flex;align-items:center;gap:0.4286rem;min-width:0}
.sensitive-field-wrap>.form-control,.sensitive-field-wrap>.sensitive-value{flex:1;min-width:0}
.sensitive-value{display:inline-flex;align-items:center;min-height:var(--control-h);padding:0.4286rem 0.7143rem;border:1px solid var(--border);border-radius:0.5714rem;background:var(--surface-2);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sensitive-reveal{flex:0 0 auto}
.sensitive-note{font-size:0.7857rem;color:var(--muted)}
.criteria-multi-option.is-filtered,.checkbox-multi-option.is-filtered{display:none!important}
.is-mirrored-field .form-control{background:var(--surface-2,#f2f5f8)!important;color:var(--muted)!important;border-style:dashed!important;cursor:not-allowed}
.is-mirrored-field label{color:var(--muted)}
/* ---- 05 Feedback: alerts, statuses, empty states, dialogs --------------- */
.alert,.callout,.note,.decision-note,.official-note,.inline-note{position:relative;margin:0.7143rem 0;padding:0.7143rem 0.8571rem;border:1px solid var(--info-border);border-radius:0.7143rem;background:var(--info-bg);color:#154f86;font-size:0.8929rem;line-height:1.5;overflow-wrap:anywhere}
.alert{display:flex;align-items:flex-start;gap:0.7143rem;padding-left:0.8571rem;box-shadow:var(--shadow-xs)}
.alert::before{content:"";flex:0 0 auto;width:1.2857rem;height:1.2857rem;margin-top:0;background-color:currentColor;-webkit-mask:var(--alert-glyph) center/1.2857rem 1.2857rem no-repeat;mask:var(--alert-glyph) center/1.2857rem 1.2857rem no-repeat;--alert-glyph:url('data:image/svg+xml;utf8,')}
.alert>*{min-width:0}
.alert b:first-child{font-weight:720}
.alert p{margin:0.2143rem 0 0}
.alert a:not(.btn){font-weight:650;text-decoration:underline;text-underline-offset:2px}
.alert.success,.success{border-color:var(--success-border);background:var(--success-bg);color:var(--success)}
.alert.success::before{--alert-glyph:url('data:image/svg+xml;utf8,')}
.alert.error,.error{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger)}
.alert.error::before{--alert-glyph:url('data:image/svg+xml;utf8,')}
.alert.warning,.warning,.attention-panel{border-color:var(--warning-border);background:var(--warning-bg);color:#6f4700}
.alert.warning::before{--alert-glyph:url('data:image/svg+xml;utf8,')}
.alert.info,.info{border-color:var(--info-border);background:var(--info-bg);color:#154f86}
.alert:has(.alert-dismiss){flex-wrap:wrap;padding-right:2.8571rem}
.alert-dismiss{position:absolute;top:0.5714rem;right:0.5714rem;width:1.7143rem;height:1.7143rem;padding:0;display:grid;place-items:center;border:1px solid transparent;border-radius:0.5rem;background:transparent;color:inherit;opacity:.6;font-size:1.1429rem;line-height:1}
.alert-dismiss:hover{opacity:1;background:rgba(255,255,255,.7);border-color:currentColor}
.card.attention-panel,.panel.attention-panel{border-left:0.2857rem solid var(--warning-solid)}
/* Status pills and tags */
.status,.role-tag,.tag,.tag-muted,.payroll-status-badge{display:inline-flex;align-items:center;gap:0.3571rem;max-width:100%;min-height:1.5714rem;padding:1px 0.6429rem;border:1px solid var(--border);border-radius:71.3571rem;background:var(--surface-2);color:#50667c;font-size:0.7857rem;font-weight:680;line-height:1.2;white-space:nowrap}
.status::before{content:"";width:0.4286rem;height:0.4286rem;border-radius:50%;background:#8da0b2;flex:0 0 auto}
.status[data-status="Active"],.status[data-status="Selected"],.status[data-status="Approved"],.status[data-status="Present"],.status[data-status="Paid"],.status[data-status="Posted"],.status[data-status="Completed"],.status[data-status="Final"],.status[data-status="Clear"],.status[data-status="Cleared"],.status[data-status="Ready for Closure"],.status[data-status="Enabled"],.status[data-status="Confirmed"],.status[data-status="Settled"],.status[data-status="Closed"],.status[data-status="Processed"],.status[data-status="Credited"],.status[data-status="Holiday Present"],.status[data-status="Mapped"]{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}
.status[data-status="Active"]::before,.status[data-status="Selected"]::before,.status[data-status="Approved"]::before,.status[data-status="Present"]::before,.status[data-status="Paid"]::before,.status[data-status="Posted"]::before,.status[data-status="Completed"]::before,.status[data-status="Final"]::before,.status[data-status="Clear"]::before,.status[data-status="Cleared"]::before,.status[data-status="Ready for Closure"]::before,.status[data-status="Enabled"]::before,.status[data-status="Confirmed"]::before,.status[data-status="Settled"]::before,.status[data-status="Closed"]::before,.status[data-status="Processed"]::before,.status[data-status="Credited"]::before,.status[data-status="Holiday Present"]::before,.status[data-status="Mapped"]::before{background:var(--success-solid);box-shadow:0 0 0 2px rgba(34,163,82,.15)}
.status[data-status="Pending"],.status[data-status="Pending Approval"],.status[data-status="Draft"],.status[data-status="Calculated"],.status[data-status="In Progress"],.status[data-status="Pending Activation"],.status[data-status="Missing"],.status[data-status="Submitted"],.status[data-status="Open"],.status[data-status="Notice Period"],.status[data-status="Ready"],.status[data-status="Authorized"],.status[data-status="Locked"],.status[data-status="Needs Review"],.status[data-status="Half Day"],.status[data-status="Unmapped"],.status[data-status="No Shift"]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning)}
.status[data-status="Pending"]::before,.status[data-status="Pending Approval"]::before,.status[data-status="Draft"]::before,.status[data-status="Calculated"]::before,.status[data-status="In Progress"]::before,.status[data-status="Pending Activation"]::before,.status[data-status="Missing"]::before,.status[data-status="Submitted"]::before,.status[data-status="Open"]::before,.status[data-status="Notice Period"]::before,.status[data-status="Ready"]::before,.status[data-status="Authorized"]::before,.status[data-status="Locked"]::before,.status[data-status="Needs Review"]::before,.status[data-status="Half Day"]::before,.status[data-status="Unmapped"]::before,.status[data-status="No Shift"]::before{background:var(--warning-solid);box-shadow:0 0 0 2px rgba(230,155,18,.16)}
.status[data-status="Rejected"],.status[data-status="Cancelled"],.status[data-status="Inactive"],.status[data-status="Disabled"],.status[data-status="Absent"],.status[data-status="LOP"],.status[data-status="Blocked"],.status[data-status="Failed"],.status[data-status="Separated"],.status[data-status="Withdrawn"],.status[data-status="Processing Error"],.status[data-status="On Hold"]{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.status[data-status="Rejected"]::before,.status[data-status="Cancelled"]::before,.status[data-status="Inactive"]::before,.status[data-status="Disabled"]::before,.status[data-status="Absent"]::before,.status[data-status="LOP"]::before,.status[data-status="Blocked"]::before,.status[data-status="Failed"]::before,.status[data-status="Separated"]::before,.status[data-status="Withdrawn"]::before,.status[data-status="Processing Error"]::before,.status[data-status="On Hold"]::before{background:var(--danger-solid)}
.status[data-status="Leave"],.status[data-status="On Leave"],.status[data-status="Work From Home"],.status[data-status="Holiday"],.status[data-status="Public Holiday"],.status[data-status="Weekly Off"],.status[data-status="Optional"],.status[data-status="Optional Holiday"],.status[data-status="External Benefit Leave"]{background:var(--violet-bg);border-color:var(--violet-border);color:var(--violet)}
.status[data-status="Leave"]::before,.status[data-status="On Leave"]::before,.status[data-status="Work From Home"]::before,.status[data-status="Holiday"]::before,.status[data-status="Public Holiday"]::before,.status[data-status="Weekly Off"]::before,.status[data-status="Optional"]::before,.status[data-status="Optional Holiday"]::before,.status[data-status="External Benefit Leave"]::before{background:var(--violet-solid)}
.status[data-status="Probation"],.status[data-status="Fixed"]{background:var(--info-bg);border-color:var(--info-border);color:var(--info)}
.status[data-status="Probation"]::before,.status[data-status="Fixed"]::before{background:var(--info-solid)}
.role-tag{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
.tag-muted{color:#52657a;background:var(--surface-3)}
.status-dot{width:0.5714rem;height:0.5714rem;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 0 0.2143rem rgba(92,181,67,.18)}
.mini-progress{display:block;height:0.4286rem;border-radius:0.4286rem;background:var(--surface-3);overflow:hidden}
.mini-progress>span,.mini-progress>em{display:block;height:100%;border-radius:inherit;background:var(--grad-accent)}
.mini-progress.is-over>em{background:linear-gradient(90deg,#f97316,#ef4444)}
/* Empty states */
.empty-cell{padding:0!important}
.empty-state{min-height:7.8571rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.2857rem;padding:1.5714rem 1.1429rem;text-align:center;color:var(--muted);font-size:0.8929rem;line-height:1.5}
.empty-state::before{content:"";width:3.1429rem;height:3.1429rem;margin-bottom:0.4286rem;background:linear-gradient(135deg,#7fb0ec,#5cb543);-webkit-mask:url('data:image/svg+xml;utf8,') center/2.4286rem 2.4286rem no-repeat;mask:url('data:image/svg+xml;utf8,') center/2.4286rem 2.4286rem no-repeat;opacity:.75}
.empty-state.compact,.compact-empty{min-height:5.1429rem;padding:1rem}
.empty-state.compact::before,.compact-empty::before{display:none}
.empty-state strong,.empty-state h2{display:block;margin:0;color:var(--text-strong);font-size:0.9643rem;font-weight:680}
.empty-state p{margin:0}
.empty-actions{margin-top:0.5714rem}
.setup-empty-state{min-height:16.4286rem;gap:0.4286rem}
.setup-empty-state>strong{font-size:1.1429rem}
.setup-empty-state>span{font-size:0.8929rem;max-width:40rem;line-height:1.55}
.setup-empty-state>.actions{margin-top:0.7143rem;justify-content:center}
.compact-empty b,.compact-empty span{display:block}
.compact-empty span{margin-top:0.2857rem;color:var(--muted)}
/* Confirmation dialog */
.confirm-backdrop{position:fixed;inset:0;z-index:15000;display:grid;place-items:center;padding:1.1429rem;background:rgba(6,22,42,.46);backdrop-filter:blur(0.2857rem);-webkit-backdrop-filter:blur(0.2857rem);animation:hrms-fade .15s ease both}
.confirm-dialog{width:min(30rem,100%);padding:1.5714rem;border:1px solid var(--border);border-radius:1.1429rem;background:#fff;box-shadow:var(--shadow-lg);animation:hrms-pop .18s cubic-bezier(.2,.8,.2,1) both}
.confirm-icon{width:3.1429rem;height:3.1429rem;margin-bottom:0.8571rem;display:grid;place-items:center;border-radius:0.9286rem;background:linear-gradient(135deg,#fff0ef,#ffe0dc);color:var(--danger);font-size:1.2857rem;font-weight:800;box-shadow:inset 0 0 0 1px var(--danger-border)}
.punch-alert-icon{background:linear-gradient(135deg,#fff7e3,#ffedc2);color:var(--warning);box-shadow:inset 0 0 0 1px var(--warning-border)}
.confirm-dialog h2{font-size:1.2143rem;margin-bottom:0.4286rem}
.confirm-dialog p{color:var(--muted);font-size:0.9286rem;line-height:1.55;margin:0}
.confirm-actions{display:flex;justify-content:flex-end;gap:0.5714rem;margin-top:1.2857rem}
.confirm-actions .btn{min-width:6.8571rem}
/* Horizontal scroll affordance on wide tables (toggled by app.js) */
.table-wrap.has-x-overflow{box-shadow:var(--shadow-xs),inset -1.1429rem 0 1rem -1rem rgba(15,34,58,.28)}
.table-wrap.has-x-overflow.is-scrolled-x{box-shadow:var(--shadow-xs),inset 1.1429rem 0 1rem -1rem rgba(15,34,58,.28),inset -1.1429rem 0 1rem -1rem rgba(15,34,58,.28)}
.table-wrap.has-x-overflow.is-at-scroll-end{box-shadow:var(--shadow-xs),inset 1.1429rem 0 1rem -1rem rgba(15,34,58,.28)}
.table-wrap.has-x-overflow.is-at-scroll-end:not(.is-scrolled-x){box-shadow:var(--shadow-xs)}
.alert{align-self:start}
.breadcrumb-static{color:#5a6d82;font-weight:520}
/* ---- 06 Data workspace: toolbars, filters, tables ---------------------- */
.list-workspace{position:relative;margin-bottom:0.7143rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card);overflow:visible}
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;min-height:3.8571rem;padding:0.6429rem 0.7143rem}
.list-toolbar-primary,.list-toolbar-tools,.filters{display:flex;align-items:center;gap:0.5714rem;flex-wrap:wrap;min-width:0}
.list-toolbar-primary{flex:1}
.list-toolbar-tools{justify-content:flex-end}
.search-control,.quick-search-control{height:var(--control-h);min-width:15.7143rem;max-width:30rem;flex:1 1 18.5714rem;display:flex;align-items:center;padding:0 0.7143rem;border:1px solid var(--border-strong);border-radius:0.6429rem;background:var(--surface-2);transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}
.search-control:focus-within,.quick-search-control:focus-within{background:#fff;border-color:var(--brand-400);box-shadow:var(--ring)}
.search-control>.ui-icon,.quick-search-control>.ui-icon{width:1.0714rem;height:1.0714rem;color:#7a8ea4}
.search-control input,.quick-search-control input{flex:1;min-width:5.7143rem;height:2.1429rem!important;min-height:2.1429rem!important;padding:0 0.5714rem!important;font-size:0.9286rem}
.toolbar-select{height:var(--control-h);min-height:var(--control-h);min-width:10rem}
.toolbar-scope{display:flex;align-items:center;gap:0.4286rem;height:var(--control-h);padding:0 0.2857rem 0 0.7143rem;border:1px solid var(--border);border-radius:0.6429rem;background:#fff;white-space:nowrap}
.toolbar-scope>span{font-size:0.7143rem;font-weight:760;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.toolbar-scope select{height:2rem;min-height:2rem;border:0;padding-left:2px!important;font-size:0.8929rem;font-weight:650;box-shadow:none;background-color:transparent}
.list-meta,.list-result-summary{font-size:0.8214rem;color:var(--muted);white-space:nowrap}
.list-result-summary b{color:var(--text-strong)}
.list-meta{padding:0 0.8571rem 0.7143rem}
.list-workspace>.list-meta{border-top:1px solid var(--border-soft);padding-top:0.5714rem}
.page-size-control{height:var(--control-h);display:inline-flex;align-items:center;gap:0.4286rem;padding:0 0.2857rem 0 0.7143rem;border:1px solid var(--border);border-radius:0.6429rem;background:#fff;color:var(--muted);font-size:0.8214rem;white-space:nowrap}
.page-size-control select{height:2rem;min-height:2rem;border:0;padding:0 1.5714rem 0 0.2857rem;font-weight:650;background-color:transparent;box-shadow:none}
.density-toggle{font-size:1.0714rem;letter-spacing:-1px}
.density-toggle[aria-pressed="true"]{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-600)}
.filter-chip-row{display:flex;gap:0.4286rem;flex-wrap:wrap;margin:0 0 0.7143rem}
.filter-chip{min-height:1.8571rem;display:inline-flex;align-items:center;gap:0.4286rem;padding:2px 0.2857rem 2px 0.7143rem;border:1px solid var(--brand-100);border-radius:71.3571rem;background:var(--brand-50);color:var(--brand-700);font-size:0.8214rem}
.filter-chip b{font-weight:700}
.filter-chip a{width:1.2857rem;height:1.2857rem;display:grid;place-items:center;border-radius:50%;color:#4d6f96}
.filter-chip a:hover{background:#cfe2f9;color:var(--brand-700)}
.advanced-filter-panel{display:none;padding:0.8571rem;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.filters-open .advanced-filter-panel{display:block}
.advanced-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5714rem,1fr));gap:0.7143rem;align-items:start}
.advanced-filter-grid label{display:flex;flex-direction:column;gap:0.3571rem;min-width:0}
.filter-advanced{width:100%}
.advanced-filter-actions{display:flex;justify-content:flex-end;gap:0.5714rem;margin-top:0.7143rem}
.attendance-date-scope{height:var(--control-h);display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:0.6429rem;background:#fff;overflow:hidden}
.attendance-date-scope label{height:100%;display:flex;align-items:center;gap:0.3571rem;padding-left:0.6429rem}
.attendance-date-scope label>span{font-size:0.7857rem;font-weight:620;color:var(--subtle)}
.attendance-date-scope input{height:2.1429rem!important;min-height:2.1429rem!important;width:9.4286rem;padding:0 0.4286rem!important}
.date-scope-separator{color:var(--faint);font-size:0.7857rem;padding:0 2px}
/* Search criteria builder */
.criteria-builder{position:static;padding:0.7143rem 0.8571rem 0.8571rem;border-top:1px solid var(--border);background:linear-gradient(180deg,var(--surface-2),#fff);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.criteria-builder-head{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;padding:0 0 0.5714rem;margin:0 0 0.5714rem;border-bottom:1px solid var(--border-soft)}
.criteria-builder-head>div{display:flex;align-items:baseline;gap:0.7143rem;min-width:0}
.criteria-builder-head h2{font-size:0.9286rem;margin:0}
.criteria-builder-head p,.criteria-builder-head span{display:block;margin:0;color:var(--muted);font-size:0.7857rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.criteria-rows{display:flex;flex-direction:column;gap:0.4286rem}
.criteria-row{display:grid;grid-template-columns:minmax(12.8571rem,.9fr) minmax(9.2857rem,.55fr) minmax(20rem,1.55fr) 2.2857rem;gap:0.5714rem;align-items:start}
.criteria-row:has(.criteria-range-end:not([hidden])){grid-template-columns:minmax(12.1429rem,.8fr) minmax(8.5714rem,.5fr) minmax(15rem,1fr) minmax(12.1429rem,.75fr) 2.2857rem}
.criteria-row label{display:grid;grid-template-columns:4rem minmax(0,1fr);align-items:center;gap:0.4286rem;min-width:0}
.criteria-row label>span{font-size:0.75rem!important;text-align:right;color:var(--muted)!important;white-space:nowrap}
.criteria-row select,.criteria-row input,.criteria-multi-trigger{width:100%;min-width:0;height:2.2857rem;min-height:2.2857rem;font-size:0.8571rem}
.criteria-range-end[hidden]{display:none!important}
.criterion-remove{color:var(--danger)}
.criteria-builder-actions{display:flex;justify-content:flex-end;gap:0.5714rem;margin-top:0.5714rem;padding-top:0.5714rem;border-top:1px solid var(--border-soft)}
/* Column chooser and export menus (portalled to by app.js) */
.column-menu-wrap,.export-menu{position:relative}
.export-menu>summary{list-style:none}
.export-menu>summary::-webkit-details-marker{display:none}
.column-menu,.export-menu-panel{position:absolute;right:0;top:2.8571rem;z-index:2500;min-width:17.1429rem;max-height:25.7143rem;overflow:auto;padding:0.4286rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;box-shadow:var(--shadow-lg)}
.column-menu-portal{position:fixed!important;z-index:14000!important;min-width:20rem;max-width:min(25rem,calc(100vw - 1.4286rem));max-height:calc(100vh - 1.4286rem);overscroll-behavior:contain;animation:hrms-pop .15s ease both}
.export-menu-portal{position:fixed!important;z-index:14500!important;min-width:15.7143rem;max-height:min(24.2857rem,calc(100vh - 1.4286rem));overflow:auto;padding:0.4286rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;box-shadow:var(--shadow-lg);animation:hrms-pop .15s ease both}
.export-menu-portal[hidden]{display:none!important}
.column-menu-title{padding:0.4286rem 0.5714rem 0.6429rem;margin-bottom:0.2857rem;border-bottom:1px solid var(--border-soft)}
.column-menu-title b,.column-menu-title small{display:block}
.column-menu-title b{font-size:0.8929rem;color:var(--text-strong)}
.column-menu-title small{font-size:0.7857rem;line-height:1.4;color:var(--muted);margin-top:2px}
.column-option-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.4286rem;align-items:center;border-radius:0.5714rem}
.column-option-row:hover{background:var(--surface-2)}
.column-option{display:flex;align-items:center;gap:0.5714rem;min-width:0;padding:0.5rem 0.5714rem;border-radius:0.5714rem;font-size:0.8571rem}
.column-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.column-order-actions{display:inline-flex;gap:0.2143rem;padding-right:0.2857rem}
.column-order-actions button{width:1.8571rem;height:1.8571rem;border:1px solid var(--border);border-radius:0.5rem;background:#fff;color:#4f6882;font-size:0.8571rem;line-height:1}
.column-order-actions button:hover:not(:disabled){border-color:var(--brand-200);background:var(--brand-50);color:var(--brand-600)}
.column-order-actions button:disabled{opacity:.3;cursor:default}
.column-menu-footer{border-top:1px solid var(--border-soft);margin-top:0.3571rem;padding-top:0.2143rem}
.column-reset{width:100%;border:0;background:transparent;padding:0.6429rem 0.5714rem;text-align:left;color:var(--brand-600);font-size:0.8571rem;font-weight:650;border-radius:0.5714rem}
.column-reset:hover{background:var(--brand-50)}
.export-menu-panel a,.export-menu-portal a{display:flex;align-items:center;gap:0.5714rem;min-height:2.4286rem;padding:0 0.7143rem;border-radius:0.5714rem;color:var(--text);font-size:0.8929rem}
.export-menu-panel a:hover,.export-menu-portal a:hover{background:var(--brand-50);color:var(--brand-600)}
/* Tables */
.table-wrap{width:100%;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);scrollbar-width:thin;scrollbar-color:#c3cfdc transparent;overscroll-behavior-x:contain}
.table-wrap.borderless{border:0;border-radius:0;box-shadow:none}
.card .table-wrap,.panel .table-wrap{box-shadow:none;border-radius:var(--radius)}
.table-wrap table{width:100%;min-width:max-content;border-collapse:separate;border-spacing:0;background:#fff}
.table-wrap thead th{position:sticky;top:0;z-index:5;height:2.5714rem;padding:0.4286rem 0.8571rem;background:#f5f8fb;color:#4a5f75;border-bottom:1px solid var(--border-strong);font-size:0.7714rem;font-weight:720;text-align:left;text-transform:uppercase;letter-spacing:.055em;white-space:nowrap}
.table-wrap thead th+th{box-shadow:inset 1px 0 0 rgba(203,213,225,.45)}
.table-wrap thead th a{display:flex;align-items:center;gap:0.4286rem;color:inherit}
.table-wrap thead th a:hover{color:var(--brand-600)}
.table-wrap tbody td{height:2.8571rem;max-width:24.2857rem;padding:0.4286rem 0.8571rem;border-bottom:1px solid var(--border-soft);color:#223549;font-size:0.9143rem;vertical-align:middle}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr{transition:background-color var(--transition)}
.table-wrap tbody tr:nth-child(even) td{background:#fbfcfe}
.table-wrap tbody tr:hover td{background:#f1f6fd}
.table-wrap tbody tr.row-clickable{cursor:pointer}
.table-wrap tbody tr.row-clickable:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.table-wrap tbody tr.row-protected:nth-child(n) td{background:#fffaf0}
.table-wrap tbody tr.row-protected:nth-child(n):hover td{background:var(--warning-bg)}
.table-wrap tfoot th,.table-wrap tfoot td{padding:0.5714rem 0.8571rem;background:var(--surface-2);border-top:1px solid var(--border);font-size:0.8571rem;font-weight:650}
.table-wrap .num{text-align:right;font-variant-numeric:tabular-nums}
.table-primary{font-weight:650;color:#0f2f52!important}
.table-id{color:#6f8398;font-family:var(--mono);font-size:0.7857rem!important}
.serial-col{width:3.4286rem;min-width:3.4286rem;max-width:3.4286rem;text-align:center!important;color:var(--faint)!important;font-variant-numeric:tabular-nums}
.sort-mark{margin-left:auto;color:#91a3b6;font-size:0.7143rem}
.table-subtext,.cell-secondary{display:block;max-width:20rem;margin-top:2px;color:#5b6e82;font-size:0.7857rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-note{display:block;margin-top:0.2143rem;color:var(--muted);font-size:0.8214rem}
.row-action{white-space:nowrap;text-align:right!important}
.sticky-action{position:sticky!important;right:0!important;z-index:6!important;background:#fff!important;box-shadow:-1px 0 0 var(--border)}
thead .sticky-action{background:#f5f8fb!important;z-index:9!important}
.table-wrap tbody tr:nth-child(even) .sticky-action{background:#fbfcfe!important}
.table-wrap tbody tr:hover .sticky-action{background:#f1f6fd!important}
.action-col{width:4rem;min-width:4rem}
.row-actions-stack{display:flex;align-items:center;justify-content:flex-end;gap:0.3571rem}
.compact-density tbody td{height:2.4286rem;padding-top:0.2857rem;padding-bottom:0.2857rem}
.compact-density thead th{height:2.4286rem}
.compact-density .status{min-height:1.4286rem}
.entity-table-wrap{margin-bottom:0.5714rem}
.entity-table [hidden]{display:none!important}
.table-input,.table-select{min-width:8.5714rem;height:2rem!important;min-height:2rem!important;padding:0 0.5714rem!important;font-size:0.8571rem}
.user-access-table td{max-width:none}
.user-inline-edit td{background:var(--brand-50)!important}
.table-footer{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;padding:0.5714rem 2px}
.dense-line{font-size:0.8929rem;line-height:1.45;white-space:normal}.dense-line+.dense-line{margin-top:0.2143rem}
.paytable{width:100%;border-collapse:collapse}
.paytable td,.paytable th{padding:0.5rem 0.6429rem;border-bottom:1px solid var(--border-soft)}
.net,.total-row{font-weight:720}
/* Column resize / reorder (app.js) */
.table-wrap thead th.resizable-column-head{padding-right:1.8571rem}
.column-resize-handle{position:absolute;top:0;right:-0.2143rem;width:0.5714rem;height:100%;z-index:12;cursor:col-resize;touch-action:none}
.column-resize-handle::after{content:"";position:absolute;top:25%;bottom:25%;left:0.2143rem;width:2px;border-radius:2px;background:transparent}
.resizable-column-head:hover>.column-resize-handle::after,.column-resize-handle:hover::after{background:var(--brand-300)}
.table-column-resizing,.table-column-resizing *{cursor:col-resize!important;user-select:none!important}
.column-drag-handle{position:absolute;right:0.5714rem;top:50%;width:0.7143rem;height:1.2857rem;transform:translateY(-50%);z-index:11;cursor:grab;opacity:0;touch-action:none}
.column-drag-handle::before{content:"⋮";position:absolute;inset:0;display:grid;place-items:center;color:#7f95aa;font-size:1rem;line-height:1}
.resizable-column-head:hover>.column-drag-handle,.column-drag-handle:focus{opacity:.85}
.column-drag-handle:active{cursor:grabbing}
.column-being-dragged{opacity:.55}
.column-drop-before::before,.column-drop-after::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--brand-500);z-index:14}
.column-drop-before::before{left:-1px}.column-drop-after::before{right:-1px}
/* Pagination */
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:0.3571rem;margin-top:0.7143rem;flex-wrap:wrap}
.pagination a,.pagination span,.page-step,.page-position{min-width:2.4286rem;height:2.4286rem;padding:0 0.7143rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:0.6429rem;background:#fff;color:#4c6279;font-size:0.8571rem;font-weight:600}
.pagination a:hover,.page-step:hover{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-600)}
.pagination .active,.pagination [aria-current="page"]{border-color:transparent;background:linear-gradient(180deg,#1766c4,#0c50a1);color:#fff;box-shadow:0 0.2857rem 0.7143rem -0.2857rem rgba(12,80,161,.6)}
.page-step.disabled{background:var(--surface-2);color:#8190a0}
.pagination .page-gap{border:0;background:transparent;min-width:auto;height:auto}
.page-position{border:0;background:transparent;min-width:auto}
/* ---- 07 Cards, KPIs and dashboard -------------------------------------- */
.card,.panel{padding:1rem 1.1429rem}
.content>.card,.content>.panel,.content>section.card{margin-bottom:0.8571rem}
.card+.card,.panel+.panel{margin-top:0}
#main-content>.card,#main-content>.panel,#main-content>section,#main-content>.grid,#main-content>.charts,#main-content>.quick-grid,#main-content>.self-service-grid,#main-content>.employee-dashboard-cards,#main-content>.metric-grid,#main-content>.metrics-grid{margin-bottom:0.8571rem}
/* Welcome hero (dashboard) */
.welcome-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1.1429rem;min-height:6.8571rem;margin-bottom:0.8571rem;padding:1.2857rem 1.5714rem;border-radius:var(--radius-xl);background:var(--grad-hero);color:#fff;box-shadow:0 1.2857rem 2.8571rem -1.2857rem rgba(7,39,79,.7)}
.welcome-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:2rem 2rem;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);pointer-events:none}
.welcome-card::after{content:"";position:absolute;right:-5rem;top:-6.4286rem;width:21.4286rem;height:21.4286rem;border-radius:50%;border:2.1429rem solid rgba(255,255,255,.06);box-shadow:0 0 0 3rem rgba(255,255,255,.03);pointer-events:none}
.welcome-card>*{position:relative;z-index:1}
.welcome-card .eyebrow{color:#bdf0a8;margin-bottom:0.4286rem}
.welcome-card .eyebrow::before{background:#7ee25e;box-shadow:0 0 0.7143rem #7ee25e}
.welcome-card h1{color:#fff;font-size:1.6429rem;letter-spacing:-.02em;margin:0}
.welcome-card p{margin:0.3571rem 0 0;color:rgba(255,255,255,.8);font-size:0.8929rem}
.welcome-meta{display:flex;flex-wrap:wrap;gap:0.4286rem;margin-top:0.6429rem}
.welcome-meta span{display:inline-flex;align-items:center;gap:0.4286rem;padding:0.2857rem 0.7143rem;border:1px solid rgba(255,255,255,.18);border-radius:71.3571rem;background:rgba(255,255,255,.08);color:#e6f0fb;font-size:0.8214rem;font-weight:560;backdrop-filter:blur(0.2857rem)}
.welcome-card .btn.primary{background:#fff;color:var(--brand-700);border-color:#fff;box-shadow:0 0.5714rem 1.4286rem -0.5714rem rgba(0,0,0,.45)}
.welcome-card .btn.primary:hover{background:var(--brand-50);color:var(--brand-800)}
/* Metric tiles */
.metric-grid,.metrics-grid,.employee-dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.2857rem,1fr));gap:0.8571rem;margin-bottom:0.8571rem}
.metrics-grid:has(> :only-child){grid-template-columns:minmax(0,25.7143rem)}
.metric{--m-accent:var(--brand-500);--m-soft:var(--brand-50);--m-icon:url('data:image/svg+xml;utf8,');position:relative;display:flex;flex-direction:column;min-width:0;padding:1rem 1.1429rem 1rem 1.1429rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;color:var(--text);box-shadow:var(--shadow-card);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.metric::before{content:"";position:absolute;right:1rem;top:1rem;width:2.5714rem;height:2.5714rem;border-radius:0.7857rem;background:var(--m-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-accent) 18%,transparent)}
.metric::after{content:"";position:absolute;right:1rem;top:1rem;width:2.5714rem;height:2.5714rem;background:var(--m-accent);-webkit-mask:var(--m-icon) center/1.3571rem 1.3571rem no-repeat;mask:var(--m-icon) center/1.3571rem 1.3571rem no-repeat}
a.metric:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--m-accent) 35%,var(--border));box-shadow:var(--shadow-lift);color:var(--text)}
.metric>small,.metric>span{display:block;padding-right:3.2857rem;color:var(--muted);font-size:0.8571rem;font-weight:600}
.metric>strong{display:block;margin:0.4286rem 0 2px;color:var(--text-strong);font-size:1.8571rem;line-height:1.1;font-weight:760;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric>em{margin-top:auto;padding-top:0.2857rem;font-style:normal;font-size:0.8571rem;font-weight:640;color:var(--m-accent)}
.metric-grid>.metric:nth-child(4n+1),.metrics-grid>.metric:nth-child(4n+1){--m-accent:#1c66c2;--m-soft:#eaf2fe}
.metric-grid>.metric:nth-child(4n+2),.metrics-grid>.metric:nth-child(4n+2){--m-accent:#2f8a2a;--m-soft:#ecf8e7;--m-icon:url('data:image/svg+xml;utf8,')}
.metric-grid>.metric:nth-child(4n+3),.metrics-grid>.metric:nth-child(4n+3){--m-accent:#b86e00;--m-soft:#fff4de;--m-icon:url('data:image/svg+xml;utf8,')}
.metric-grid>.metric:nth-child(4n),.metrics-grid>.metric:nth-child(4n){--m-accent:#6b48b8;--m-soft:#f3eefd}
.metrics-grid>.metric:nth-child(4n+1){--m-icon:url('data:image/svg+xml;utf8,')}
.metrics-grid>.metric:only-child{--m-icon:url('data:image/svg+xml;utf8,')}
/* KPI strip */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.2857rem,1fr));gap:0.5714rem;margin-bottom:0.7143rem}
.kpi-strip:has(> :only-child){grid-template-columns:minmax(0,24.2857rem)}
.kpi-small{position:relative;min-width:0;padding:0.6429rem 0.8571rem 0.6429rem 1rem;border:1px solid var(--border);border-radius:0.7143rem;background:linear-gradient(180deg,#fff,var(--surface-2));color:var(--text);overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition)}
.kpi-small::before{content:"";position:absolute;left:0;top:0.5714rem;bottom:0.5714rem;width:0.2143rem;border-radius:0 0.2143rem 0.2143rem 0;background:var(--workspace-grad)}
a.kpi-small:hover{border-color:var(--brand-200);box-shadow:var(--shadow-sm);color:var(--text)}
.kpi-small small{display:block;color:var(--muted);font-size:0.7857rem;font-weight:620}
.kpi-small b{display:block;margin-top:0.2143rem;color:var(--text-strong);font-size:1.0714rem;line-height:1.2;font-variant-numeric:tabular-nums}
/* Employee insight cards */
.insight-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0.2143rem;min-width:0;padding:0.9286rem 1.0714rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;color:var(--text);box-shadow:var(--shadow-card);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.insight-card::before{content:"";position:absolute;left:0;top:0;right:0;height:0.2143rem;background:var(--i-accent,var(--brand-500))}
a.insight-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);color:var(--text)}
.insight-card>small{font-size:0.8214rem;font-weight:620;color:var(--muted)}
.insight-card>b{font-size:1.3571rem;line-height:1.2;font-weight:740;color:var(--text-strong);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.insight-card>span{font-size:0.8214rem;color:var(--muted)}
.insight-card>i.mini-progress{margin-top:0.5714rem}
.employee-dashboard-cards>.insight-card:nth-child(6n+1){--i-accent:linear-gradient(90deg,#1c66c2,#5aa2f0)}
.employee-dashboard-cards>.insight-card:nth-child(6n+2){--i-accent:linear-gradient(90deg,#2f8a2a,#6fcf52)}
.employee-dashboard-cards>.insight-card:nth-child(6n+3){--i-accent:linear-gradient(90deg,#c27600,#f2b64a)}
.employee-dashboard-cards>.insight-card:nth-child(6n+4){--i-accent:linear-gradient(90deg,#6b48b8,#a283ee)}
.employee-dashboard-cards>.insight-card:nth-child(6n+5){--i-accent:linear-gradient(90deg,#0b7b78,#2cc2b6)}
.employee-dashboard-cards>.insight-card:nth-child(6n){--i-accent:linear-gradient(90deg,#b0442f,#ef7a5f)}
.insight-card::before{background:var(--i-accent,var(--grad-brand))}
/* Quick access */
.quick-grid,.self-service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18.5714rem,1fr));gap:0.7143rem}
.self-service-grid{grid-template-columns:repeat(auto-fit,minmax(22.8571rem,1fr))}
.quick-card{position:relative;display:flex;align-items:center;gap:0.8571rem;min-width:0;padding:0.7857rem 1rem 0.7857rem 0.7857rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;color:var(--text);box-shadow:var(--shadow-xs);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.quick-card:hover{transform:translateY(-2px);border-color:var(--brand-200);box-shadow:var(--shadow-lift);color:var(--text)}
.quick-icon{width:2.8571rem;height:2.8571rem;flex:0 0 2.8571rem;display:grid;place-items:center;border-radius:0.8571rem;color:#fff;background:var(--q-grad,var(--grad-brand));box-shadow:0 0.4286rem 1rem -0.4286rem var(--q-shadow,rgba(12,80,161,.6))}
.quick-icon .ui-icon{width:1.3571rem;height:1.3571rem;color:#fff!important;stroke-width:1.9}
.quick-icon .ui-icon .icon-fill{fill-opacity:.28}
.quick-card>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.quick-card>div>b{font-size:0.9286rem;line-height:1.3;font-weight:680;color:var(--text-strong)}
.quick-card>div>small{font-size:0.8214rem;line-height:1.35;color:var(--muted)}
.quick-card>i{margin-left:auto;padding-left:0.4286rem;font-style:normal;color:#9fb0c2;transition:transform var(--transition),color var(--transition)}
.quick-card:hover>i{color:var(--brand-600);transform:translateX(0.2143rem)}
.quick-grid .quick-card:nth-child(6n+1){--q-grad:linear-gradient(135deg,#0b6f86,#18a39a);--q-shadow:rgba(11,123,120,.55)}
.quick-grid .quick-card:nth-child(6n+2){--q-grad:linear-gradient(135deg,#1553a6,#3b8ff0);--q-shadow:rgba(28,102,194,.55)}
.quick-grid .quick-card:nth-child(6n+3){--q-grad:linear-gradient(135deg,#2f7d27,#62bd48);--q-shadow:rgba(60,138,43,.55)}
.quick-grid .quick-card:nth-child(6n+4){--q-grad:linear-gradient(135deg,#5b3aa6,#9a72e8);--q-shadow:rgba(107,72,184,.5)}
.quick-grid .quick-card:nth-child(6n+5){--q-grad:linear-gradient(135deg,#136c43,#23a868);--q-shadow:rgba(24,122,75,.5)}
.quick-grid .quick-card:nth-child(6n){--q-grad:linear-gradient(135deg,#b4640a,#eba13a);--q-shadow:rgba(180,100,10,.5)}
/* Action centre */
.dashboard-action-panel .panel-title>span{display:inline-flex;align-items:center;gap:0.4286rem;padding:0.2143rem 0.7143rem;border-radius:71.3571rem;background:var(--surface-3);color:#41566c;font-weight:680}
.dashboard-actions-list{display:flex;flex-direction:column;gap:0.4286rem}
.dashboard-action-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.8571rem;padding:0.6429rem 0.8571rem 0.6429rem 1.1429rem;border:1px solid var(--border);border-radius:0.7857rem;background:#fff;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition)}
.dashboard-action-row::before{content:"";position:absolute;left:0;top:0.7143rem;bottom:0.7143rem;width:0.2143rem;border-radius:0 0.2143rem 0.2143rem 0;background:linear-gradient(180deg,#f2b64a,#e0473b)}
.dashboard-action-row:hover{background:var(--surface-2);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.dashboard-action-row>div:first-child{min-width:0}
.dashboard-action-row small{display:block;font-size:0.75rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase;color:var(--warning);line-height:1.3}
.dashboard-action-row b{display:block;font-size:0.9286rem;line-height:1.35}
.dashboard-action-row b a{color:var(--text-strong)}
.dashboard-action-row b a:hover{color:var(--brand-600)}
.dashboard-action-row p{margin:1px 0 0;font-size:0.8571rem;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-action-row .actions .btn{min-height:2.1429rem;padding:0 0.8571rem;font-size:0.8571rem}
/* Dashboard attendance glance */
.dashboard-glance .glance-body{display:grid;grid-template-columns:auto minmax(12.1429rem,1fr) minmax(15.7143rem,1.3fr);align-items:center;gap:1.2857rem 1.8571rem}
.dashboard-ring{width:9.4286rem;height:9.4286rem;display:block}
.dashboard-ring .ring-seg{transition:stroke-width .2s ease;animation:hrms-ring 1s cubic-bezier(.2,.8,.2,1) both}
.dashboard-ring .ring-seg:hover{stroke-width:17}
@keyframes hrms-ring{from{stroke-dasharray:0 400}}
.dashboard-ring .ring-value{font:780 1.7143rem/1 var(--font);fill:var(--text-strong);letter-spacing:-.02em}
.dashboard-ring .ring-label{font:650 0.6429rem/1 var(--font);fill:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.glance-legend{list-style:none;margin:0;padding:0;display:grid;gap:0.2857rem}
.glance-legend li{display:grid;grid-template-columns:0.7143rem minmax(0,1fr) auto;align-items:center;gap:0.6429rem;padding:0.2857rem 0.5714rem;border-radius:0.5714rem;font-size:0.8929rem;color:#334155}
.glance-legend li:hover{background:var(--surface-2)}
.glance-legend i{width:0.7143rem;height:0.7143rem;border-radius:0.2143rem}
.glance-legend b{font-variant-numeric:tabular-nums;color:var(--text-strong)}
.glance-legend .glance-total{grid-template-columns:minmax(0,1fr) auto;margin-top:2px;padding-top:0.5rem;border-top:1px dashed var(--border);border-radius:0;color:var(--muted);font-weight:600}
.glance-trend{display:grid;gap:0.5714rem;min-width:0}
.glance-trend-title{font-size:0.75rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.glance-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0.5714rem;height:8rem;align-items:end}
.glance-bar{display:grid;grid-template-rows:1fr auto;gap:0.3571rem;height:100%;text-align:center}
.glance-bar-track{display:flex;align-items:flex-end;justify-content:center;height:100%}
.glance-bar-track em{position:relative;display:flex;align-items:flex-end;width:min(1.8571rem,100%);border-radius:0.5rem 0.5rem 0.2857rem 0.2857rem;background:#e2e8f0;overflow:hidden;animation:hrms-rise-bar .8s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom}
.glance-bar-track em i{display:block;width:100%;border-radius:inherit;background:linear-gradient(180deg,#34d399,#059669)}
.glance-bar.is-today .glance-bar-track em i{background:linear-gradient(180deg,#60a5fa,#2563eb)}
.glance-bar small{font-size:0.75rem;font-weight:650;color:var(--muted)}
.glance-bar.is-today small{color:var(--brand-600)}
@keyframes hrms-rise-bar{from{transform:scaleY(0)}}
.glance-trend-key{display:flex;align-items:center;gap:0.4286rem;font-size:0.7857rem;color:var(--muted)}
.glance-trend-key i{width:0.6429rem;height:0.6429rem;border-radius:0.2143rem;background:#10b981}
.glance-trend-key i.is-recorded{margin-left:0.5714rem;background:#e2e8f0}
@media (max-width:900px){.dashboard-glance .glance-body{grid-template-columns:auto minmax(0,1fr)}.glance-trend{grid-column:1/-1}}
@media (max-width:420px){.dashboard-glance .glance-body{grid-template-columns:1fr;justify-items:center}.glance-legend,.glance-trend{width:100%}}
/* Action centre tools */
.action-tools{display:grid;gap:0.5714rem;margin-bottom:0.7143rem}
.action-kind-chips{display:flex;gap:0.3571rem;flex-wrap:wrap}
.action-kind-chip{display:inline-flex;align-items:center;gap:0.4286rem;min-height:2rem;padding:0 0.7143rem;border:1px solid var(--border);border-radius:71.3571rem;background:#fff;color:#44596e;font-size:0.8214rem;font-weight:650;transition:all var(--transition)}
.action-kind-chip b{min-width:1.2857rem;height:1.2857rem;padding:0 0.3571rem;display:inline-grid;place-items:center;border-radius:0.6429rem;background:var(--surface-3);font-size:0.75rem}
.action-kind-chip:hover{border-color:var(--border-strong);background:var(--surface-2)}
.action-kind-chip.active{border-color:transparent;background:var(--grad-brand);color:#fff;box-shadow:0 0.4286rem 1rem -0.5714rem rgba(12,80,161,.8)}
.action-kind-chip.active b{background:rgba(255,255,255,.22);color:#fff}
.action-search{display:flex;align-items:center;gap:0.4286rem;height:2.4286rem;padding:0 0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.action-search:focus-within{background:#fff;border-color:var(--brand-300);box-shadow:var(--ring)}
.action-search .ui-icon{width:1.0714rem;height:1.0714rem;color:var(--faint)}
.action-search input{flex:1;min-width:0;height:2.2857rem;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;padding:0}
.action-show-more{width:100%;margin-top:0.5714rem;justify-content:center}
.dashboard-action-row[data-kind-tone="approvals"]::before{background:linear-gradient(180deg,#60a5fa,#2563eb)}
.dashboard-action-row[data-kind-tone="approvals"] small{color:var(--brand-600)}
.dashboard-action-row[data-kind-tone="my-requests"]::before{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.dashboard-action-row[data-kind-tone="my-requests"] small{color:#6d28d9}
.dashboard-action-row[data-kind-tone="onboarding"]::before,.dashboard-action-row[data-kind-tone="people"]::before{background:linear-gradient(180deg,#2dd4bf,#0d9488)}
.dashboard-action-row[data-kind-tone="onboarding"] small,.dashboard-action-row[data-kind-tone="people"] small{color:#0f766e}
.dashboard-action-row[data-kind-tone="documents"]::before,.dashboard-action-row[data-kind-tone="attendance"]::before{background:linear-gradient(180deg,#38bdf8,#0284c7)}
.dashboard-action-row[data-kind-tone="documents"] small,.dashboard-action-row[data-kind-tone="attendance"] small{color:#0369a1}
@media (max-width:560px){.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5714rem}.metrics-grid>.metric:last-child:nth-child(odd){grid-column:1/-1}.metric>strong{font-size:1.5714rem}.metric>small{padding-right:2.8571rem}.metric::before,.metric::after{width:2.1429rem;height:2.1429rem}}
/* Charts & bars */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.8571rem}
.bar-list{display:flex;flex-direction:column;gap:0.6429rem}
.bar-row{display:grid;grid-template-columns:minmax(7.8571rem,1fr) minmax(7.1429rem,2.2fr) 2.8571rem;align-items:center;gap:0.7143rem;font-size:0.8929rem}
.bar-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#34495f;font-weight:560}
.bar-row>b{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.bar{height:0.7143rem;border-radius:0.4286rem;background:var(--surface-3);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1c66c2,#5aa2f0)}
.bar-row:nth-child(5n+2) .bar>span{background:linear-gradient(90deg,#2f8a2a,#6fcf52)}
.bar-row:nth-child(5n+3) .bar>span{background:linear-gradient(90deg,#6b48b8,#a283ee)}
.bar-row:nth-child(5n+4) .bar>span{background:linear-gradient(90deg,#c27600,#f2b64a)}
.bar-row:nth-child(5n) .bar>span{background:linear-gradient(90deg,#0b7b78,#2cc2b6)}
/* Lists and small structures */
.balance-list{display:flex;flex-direction:column}
.balance-row{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;padding:0.5714rem 2px;border-bottom:1px dashed var(--border)}
.balance-row:last-child{border-bottom:0}
.balance-row b{font-variant-numeric:tabular-nums;color:var(--text-strong)}
.shift-time{font-size:1.4286rem;font-weight:720;color:var(--text-strong);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.working-day-actions{margin-top:0.7143rem}
.leave-apply-action{margin-top:0.7143rem}
.compact-list{margin:0;padding-left:1.2857rem}
.compact-list li{margin:0.2857rem 0}
div.compact-list{padding:0;display:flex;flex-direction:column;gap:0.4286rem}
div.compact-list>div{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;flex-wrap:wrap;padding:0.5714rem 0.7143rem;border:1px solid var(--border);border-radius:0.6429rem;background:var(--surface-2)}
div.compact-list>div small{display:block}
.record-links{display:flex;gap:0.4286rem;flex-wrap:wrap;margin-bottom:0.7143rem}
.route-row,.record-links,.completion-meta{font-size:0.8571rem}
.route-stages{display:flex;gap:0.3571rem;flex-wrap:wrap}
.route-row{display:flex;align-items:center;gap:0.4286rem}
.processing-note{font-size:0.8214rem;color:var(--muted)}
.completion-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5714rem}
.signature{border-top:1px solid var(--border);padding-top:0.4286rem;margin-top:1.2857rem}
.folder-breadcrumb{display:flex;gap:0.4286rem;align-items:center;flex-wrap:wrap}
.detail-grid,.exit-summary-grid,.profile-summary-grid,.requirement-grid,.activation-requirement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.7143rem}
.detail-grid-wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.detail-grid>div,.detail-cell,.detail-block{min-width:0;padding:0.6429rem 0.7857rem;border:1px solid var(--border-soft);border-radius:0.6429rem;background:var(--surface-2)}
.detail-cell b,.detail-block b{display:block;font-size:0.7857rem;color:var(--muted);font-weight:620;margin-bottom:2px}
.timeline,.approval-timeline{display:flex;flex-direction:column;gap:0.4286rem}
.timeline-item{display:grid;grid-template-columns:1.1429rem 1fr;gap:0.5714rem}
.timeline-dot{width:0.7143rem;height:0.7143rem;border-radius:50%;background:var(--brand-500);margin-top:0.2857rem;box-shadow:0 0 0 0.2143rem var(--brand-100)}
/* Dashboard layout: working area with the action centre alongside */
.breadcrumb-spacer{height:0.7143rem}
.dashboard-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0.8571rem;align-items:start}
.dashboard-main{min-width:0}
.dashboard-main>*{margin-bottom:0.8571rem}
.dashboard-main>.section-heading{margin-top:0.4286rem}
.dashboard-side{min-width:0}
.dashboard-side .dashboard-action-panel{margin:0}
.dashboard-actions-list{max-height:min(40rem,62vh);overflow:auto;margin-right:-0.4286rem;padding-right:0.4286rem;scrollbar-width:thin}
@media (min-width:1280px){
.dashboard-layout{grid-template-columns:minmax(0,1fr) minmax(24.2857rem,28.5714rem)}
.dashboard-side{position:sticky;top:calc(var(--topbar-h) + 0.8571rem);order:2}
.dashboard-side .dashboard-actions-list{max-height:calc(100vh - var(--topbar-h) - 8.5714rem)}
.dashboard-side .dashboard-action-row{flex-direction:column;align-items:stretch;gap:0.4286rem}
.dashboard-side .dashboard-action-row p{white-space:normal}
.dashboard-side .dashboard-action-row .actions{justify-content:flex-start}
}
@media (max-width:1279px){.dashboard-side:has(.dashboard-action-row){order:-1}.dashboard-layout{display:flex;flex-direction:column}.dashboard-main,.dashboard-side{width:100%}}
@media (min-width:1100px){
.list-toolbar{flex-wrap:nowrap}
.list-toolbar-primary,.list-toolbar-tools{flex-wrap:nowrap}
.list-toolbar-primary .quick-search-control{min-width:12.8571rem;max-width:22.8571rem}
.list-toolbar .btn{white-space:nowrap}
.list-toolbar-tools .list-meta{max-width:10.7143rem;overflow:hidden;text-overflow:ellipsis}
}
/* Payroll table controls use the same visual grammar as entity list workspaces. */
.payroll-local-toolbar{display:flex;align-items:center;justify-content:space-between;gap:0.5714rem;min-height:3.8571rem;padding:0.6429rem 0.7143rem;margin-bottom:0.5714rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card)}
.payroll-local-toolbar .search-control{max-width:30rem}
.payroll-filter-workspace{margin-bottom:0.5714rem}
.payroll-filter-workspace .toolbar-scope{min-width:12.8571rem}
.payroll-filter-workspace .toolbar-scope .checkbox-multi{width:10.7143rem}
.payroll-filter-workspace .toolbar-scope .checkbox-multi-trigger{height:2rem;min-height:2rem;border:0;padding-left:0.2857rem;background:transparent;box-shadow:none}
[data-local-table-empty]{padding:0.7143rem 0.8571rem;color:var(--muted);font-size:0.8571rem}
/* ---- 08 Business modules ----------------------------------------------- */
/* Attendance calendar */
.attendance-calendar{padding:0;overflow:hidden}
.filter-select,.filter-date{min-height:var(--control-h);max-width:100%}
.employee-calendar-select{min-width:16.4286rem;max-width:24.2857rem}
/* Attendance calendar: compact scope filters and a clean, non-legend monthly summary. */
.attendance-scope-select{min-width:12.8571rem;max-width:18.5714rem}
@media (max-width:700px){.attendance-scope-select{min-width:100%;width:100%;max-width:none}}
.filter-date{min-width:10.7143rem}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.calendar-weekdays{border:1px solid var(--border);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:#f5f8fb;overflow:hidden}
.calendar-weekdays>div{padding:0.5714rem 0.4286rem;text-align:center;color:var(--muted);font-size:0.7857rem;font-weight:720;letter-spacing:.06em;text-transform:uppercase}
.calendar-grid{border-left:1px solid var(--border);border-top:1px solid var(--border);border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-card)}
.calendar-day{position:relative;min-width:0;min-height:8.4286rem;padding:0.5714rem 0.6429rem;background:#fff;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background var(--transition),box-shadow var(--transition)}
.calendar-day:not(.outside-month)::before{content:"";position:absolute;left:0;top:0;right:0;height:0.2143rem;background:transparent}
.calendar-day:hover{background:var(--surface-2)}
.calendar-day.today{box-shadow:inset 0 0 0 2px var(--brand-300);background:linear-gradient(180deg,var(--brand-50),#fff 60%)}
.calendar-day.outside-month{background:var(--surface-2);color:var(--faint)}
.calendar-day.status-present,.calendar-day.status-holiday-present,.calendar-day.status-paid-off{background:#f5fcf7}
.calendar-day.status-present::before,.calendar-day.status-holiday-present::before,.calendar-day.status-paid-off::before{background:var(--success-solid)}
.calendar-day.status-in-progress,.calendar-day.status-half-day{background:#fffaf0}
.calendar-day.status-in-progress::before,.calendar-day.status-half-day::before{background:var(--warning-solid)}
.calendar-day.status-absent,.calendar-day.status-lop{background:#fff6f5}
.calendar-day.status-absent::before,.calendar-day.status-lop::before{background:var(--danger-solid)}
.calendar-day.status-leave,.calendar-day.status-external-benefit-leave,.calendar-day.status-work-from-home{background:#f8f5fe}
.calendar-day.status-leave::before,.calendar-day.status-external-benefit-leave::before,.calendar-day.status-work-from-home::before{background:var(--violet-solid)}
.calendar-day.status-weekly-off,.calendar-day.status-public-holiday{background:#f5f7fa}
.calendar-day.status-weekly-off::before,.calendar-day.status-public-holiday::before{background:#98a6b5}
.calendar-day-head{display:flex;justify-content:space-between;align-items:center;gap:0.4286rem}
.calendar-date-number{font-weight:760;font-size:1rem;color:var(--text-strong);font-variant-numeric:tabular-nums}
.calendar-day-name{font-size:0.75rem;color:var(--faint);font-weight:600}
.calendar-status{display:inline-block;margin:0.4286rem 0 0.2143rem;font-size:0.8571rem;font-weight:700;color:var(--muted)}
.calendar-status[data-status="Present"],.calendar-status[data-status="Holiday Present"]{color:var(--success)}
.calendar-status[data-status="In Progress"],.calendar-status[data-status="Half Day"]{color:var(--warning)}
.calendar-status[data-status="Absent"],.calendar-status[data-status="LOP"]{color:var(--danger)}
.calendar-status[data-status="Leave"],.calendar-status[data-status="External Benefit Leave"],.calendar-status[data-status="Work From Home"],.calendar-status[data-status="Optional Holiday"]{color:var(--violet)}
.calendar-status[data-status="Weekly Off"],.calendar-status[data-status="Public Holiday"],.calendar-status[data-status="Holiday"]{color:var(--muted)}
.calendar-shift{max-width:100%;margin:0 0 0.3571rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4a6179;font-size:0.75rem;font-weight:620}
.calendar-shift::before{content:"Shift · ";color:var(--faint);font-weight:560}
.calendar-punch-summary{display:flex;flex-direction:column;gap:2px;font-size:0.7857rem;color:var(--muted)}
.calendar-punch-row{display:flex;justify-content:space-between;gap:0.2857rem}
.calendar-punch-row b{color:var(--text-strong);font-variant-numeric:tabular-nums;font-weight:640}
.calendar-day-actions{display:flex;gap:0.4286rem;margin-top:0.4286rem}
.calendar-link{font-size:0.7857rem;font-weight:680}
.calendar-holiday-name{display:flex;align-items:center;gap:0.3571rem;min-width:0;margin:-1px 0 0.3571rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:0.75rem}
.calendar-holiday-name span{flex:0 0 auto;padding:1px 0.4286rem;border:1px solid var(--violet-border);border-radius:71.3571rem;background:var(--violet-bg);color:var(--violet);font-size:0.6786rem;font-weight:760;text-transform:uppercase;letter-spacing:.04em}
.calendar-grace-flags{display:block;min-width:0;margin-top:0.4286rem}
.calendar-grace-chip{display:block;max-width:100%;padding:2px 0.5rem;border:1px solid var(--border);border-radius:71.3571rem;background:var(--surface-2);color:#50657b;font-size:0.75rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-grace-chip.violation{font-weight:700;border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger)}
.day-chip{display:inline-flex;align-items:center;gap:0.3571rem;font-size:0.7857rem}
.attendance-leave-hub{display:flex;flex-direction:column;gap:0.7143rem}
.attendance-movement-table tbody td{max-width:17.1429rem}
.punch-origin-mini{display:flex;gap:0.2857rem;flex-wrap:wrap;margin-top:0.2143rem}
.punch-origin-mini span{padding:1px 0.4286rem;border-radius:0.3571rem;background:var(--surface-3);color:#566a7e;font-size:0.75rem;font-weight:600}
.punch-origin-mini .origin-device{background:var(--brand-50);color:var(--brand-600)}
.punch-origin-mini .origin-web{background:var(--accent-soft);color:var(--accent-strong)}
.geofence-evidence{display:block;margin-top:2px;color:var(--muted);font-size:0.75rem;white-space:nowrap}
/* Optional holiday planner */
.optional-holiday-planner{margin:0 0 0.8571rem;padding:1rem 1.1429rem}
.optional-holiday-planner-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.1429rem;align-items:start;padding-bottom:0.7143rem;border-bottom:1px solid var(--border-soft)}
.optional-holiday-planner-head h2{font-size:1.0357rem;margin:2px 0}
.optional-holiday-planner-head p{margin:0;color:var(--muted);font-size:0.8571rem;line-height:1.45}
.optional-holiday-stats{display:grid;grid-template-columns:repeat(3,minmax(5.7143rem,1fr));gap:0.4286rem}
.optional-holiday-stats span{padding:0.5rem 0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.optional-holiday-stats small,.optional-holiday-stats b{display:block}
.optional-holiday-stats small{font-size:0.7143rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.optional-holiday-stats b{font-size:1.1429rem;color:var(--text-strong);margin-top:1px}
.optional-holiday-choice-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(18.5714rem,1fr));gap:0.5714rem;margin-top:0.7143rem}
.optional-holiday-choice{display:grid;grid-template-columns:3.4286rem minmax(0,1fr) auto;gap:0.7143rem;align-items:center;min-width:0;padding:0.5714rem 0.7143rem;border:1px solid var(--border);border-radius:0.7857rem;background:#fff;transition:border-color var(--transition),box-shadow var(--transition)}
.optional-holiday-choice:hover{box-shadow:var(--shadow-sm)}
.optional-holiday-choice.is-selected{border-color:var(--violet-border);background:linear-gradient(90deg,var(--violet-bg),#fff)}
.optional-holiday-date{width:3.2857rem;min-height:3.4286rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0.7143rem;background:linear-gradient(180deg,#fff,var(--surface-3));box-shadow:inset 0 0 0 1px var(--border);line-height:1}
.optional-holiday-date b{font-size:1.1429rem;color:var(--text-strong)}
.optional-holiday-date span{margin-top:2px;font-size:0.7143rem;font-weight:780;color:var(--violet);text-transform:uppercase}
.optional-holiday-date small{margin-top:2px;font-size:0.6786rem;color:var(--muted)}
.optional-holiday-copy{min-width:0}
.optional-holiday-copy strong,.optional-holiday-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.optional-holiday-copy strong{font-size:0.8929rem;color:var(--text-strong)}
.optional-holiday-copy small{font-size:0.7857rem;color:var(--muted);margin-top:2px}
.optional-holiday-choice-action{display:flex;align-items:center;justify-content:flex-end;gap:0.4286rem;flex-wrap:wrap}
.optional-holiday-choice-action form{margin:0}
.optional-holiday-planner-foot{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;margin-top:0.7143rem;padding-top:0.6429rem;border-top:1px solid var(--border-soft);font-size:0.8214rem;color:var(--muted)}
.optional-holiday-planner-foot a{font-weight:700;white-space:nowrap}
/* Biometric review */
.biometric-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.7143rem;margin:0 0 0.7143rem}
.biometric-kpis>div{--c:var(--info-solid);position:relative;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-areas:"label value" "hint value";gap:2px 0.7143rem;align-items:center;padding:0.7857rem 1rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;box-shadow:var(--shadow-xs);overflow:hidden}
.biometric-kpis>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0.2857rem;background:var(--c)}
.biometric-kpis>div:nth-child(2){--c:var(--success-solid)}.biometric-kpis>div:nth-child(3){--c:var(--warning-solid)}.biometric-kpis>div:nth-child(4){--c:var(--danger-solid)}
.biometric-kpis>div>span{grid-area:label;color:#465b71;font-size:0.8214rem;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biometric-kpis>div>strong{grid-area:value;font-size:1.5714rem;color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1}
.biometric-kpis>div>small{grid-area:hint;color:var(--muted);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biometric-table tbody td{max-width:20rem}
.biometric-punch-cell b{display:block;color:#123d66}
.evidence-line{display:flex;align-items:center;gap:0.3571rem;margin-top:2px;font-size:0.7857rem;color:var(--muted)}
.evidence-device{color:var(--info)}.evidence-hrms{color:var(--accent-strong)}.evidence-unmapped{color:var(--warning)}
.biometric-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.7143rem}
.biometric-detail-card{padding:1rem 1.1429rem}
.biometric-detail-grid>div{padding:0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.raw-json{max-height:22.8571rem;overflow:auto;padding:0.8571rem;border:1px solid #1b3350;border-radius:0.7143rem;background:#0c1d31;color:#d8e6f5;font:0.8214rem/1.5 var(--mono);white-space:pre-wrap}
/* Payroll */
.payroll-hub{display:flex;flex-direction:column;gap:0.7143rem}
.payroll-page-title{margin-bottom:0.7143rem}
.payroll-overview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.7143rem;margin:0 0 0.7143rem}
.payroll-overview-metrics article{display:grid;grid-template-columns:1fr auto;grid-template-areas:'label value' 'hint value';align-items:center;gap:2px 1rem;padding:0.9286rem 1.0714rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-xs)}
.payroll-overview-metrics small{grid-area:label;color:var(--muted);font-size:0.7857rem;font-weight:650}
.payroll-overview-metrics b{grid-area:value;font-size:1.7143rem;line-height:1;color:var(--text-strong);font-variant-numeric:tabular-nums}
.payroll-overview-metrics span{grid-area:hint;color:var(--muted);font-size:0.75rem;line-height:1.3}
.payroll-stage-text{font-weight:650;color:var(--text-strong);white-space:nowrap}
@media (max-width:900px){.payroll-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.payroll-overview-metrics{grid-template-columns:1fr}}
.payroll-control-shell{padding:0.8571rem 1rem;margin-bottom:0.7143rem;border-top:0.2143rem solid var(--workspace-accent)}
.payroll-control-row{display:grid;grid-template-columns:minmax(15.7143rem,.8fr) minmax(30rem,1.6fr) auto;gap:0.8571rem;align-items:end}
.payroll-runs-head{margin-top:1rem;padding-top:0.8571rem;border-top:1px solid var(--border-soft)}
.payroll-runs-head h2{font-size:1.0714rem;margin:1px 0 2px}
.payroll-runs-table{margin-top:0.5714rem}
.payroll-runs-table tr.selected-row td{background:var(--workspace-soft)}
.payroll-runs-table td:first-child b{font-variant-numeric:tabular-nums}
.payroll-cycle-summary{display:flex;flex-direction:column;gap:2px;min-width:15rem}
.payroll-cycle-summary strong{font-size:1.1429rem;color:var(--text-strong)}
.payroll-cycle-summary small{color:var(--muted);font-size:0.8214rem}
.payroll-selectors,.payroll-action-bar{display:flex;align-items:end;gap:0.5714rem;flex-wrap:wrap}
.payroll-selectors.compact{justify-content:flex-end}
.payroll-selectors.compact label{font-size:0.7857rem;color:var(--muted);font-weight:650}
.payroll-selectors.compact select{min-width:8.2143rem}
.payroll-run-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.7143rem;margin-top:0.8571rem}
.payroll-run-mode{min-width:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.7857rem 0.8571rem;border:1px solid var(--border);border-radius:0.8571rem;background:linear-gradient(180deg,#fff,var(--surface-2));transition:border-color var(--transition),box-shadow var(--transition)}
.payroll-run-mode:hover{box-shadow:var(--shadow-sm)}
.payroll-run-mode.selected{border-color:var(--workspace-border);background:linear-gradient(180deg,var(--workspace-soft),#fff);box-shadow:inset 0 0.2143rem 0 var(--workspace-accent)}
.payroll-run-mode>div:first-child{display:flex;align-items:center;gap:0.6429rem}
.payroll-run-mode .mode-icon{width:2.1429rem;height:2.1429rem;display:grid;place-items:center;border-radius:0.6429rem;background:var(--workspace-grad);color:#fff;font-size:0.7857rem;font-weight:800}
.payroll-run-mode b,.payroll-run-mode small{display:block}
.payroll-run-mode b{font-size:0.9286rem;color:var(--text-strong)}
.payroll-run-mode small{font-size:0.7857rem;color:var(--muted);margin-top:1px}
.payroll-run-mode p{margin:0;color:var(--muted);font-size:0.8214rem;line-height:1.45}
.payroll-run-mode .mode-note{margin-top:auto;padding-top:0.2857rem}
.payroll-create-details{margin-top:auto;padding-top:0.5rem;border-top:1px solid var(--border-soft)}
.payroll-create-details>summary{cursor:pointer;color:var(--brand-600);font-size:0.8571rem;font-weight:720;list-style:none}
.payroll-create-details>summary::-webkit-details-marker{display:none}
.payroll-create-details>summary::after{content:"›";display:inline-block;margin-left:0.4286rem;transform:rotate(90deg);transition:transform var(--transition)}
.payroll-create-details[open]>summary::after{transform:rotate(-90deg)}
.payroll-create-form{display:flex;flex-direction:column;gap:0.5714rem;margin-top:0.5714rem;padding-top:0.5714rem;border-top:1px solid var(--border-soft)}
.payroll-create-form>label,.payroll-form-row>label{font-size:0.7857rem;font-weight:650;color:#46596d}
.payroll-form-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5714rem}
.payroll-create-form .form-control{margin-top:0.2143rem;width:100%}
.payroll-create-form select[multiple],.payroll-employee-multi{min-height:7.1429rem}
.payroll-create-form .form-actions{position:static;margin-top:2px;padding:0;border:0;background:transparent}
.payroll-active-run{padding:0.8571rem 1rem;margin-bottom:0.7143rem}
.payroll-active-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center}
.payroll-active-head h2{font-size:1.0714rem;margin:1px 0 2px}
.payroll-active-head p{margin:0;color:var(--muted);font-size:0.8214rem;line-height:1.4}
.payroll-active-facts{display:grid;grid-template-columns:repeat(4,minmax(5.7143rem,1fr));gap:0.4286rem}
.payroll-active-facts span{padding:0.4286rem 0.6429rem;border:1px solid var(--border);border-radius:0.6429rem;background:var(--surface-2)}
.payroll-active-facts small,.payroll-active-facts b{display:block}
.payroll-active-facts small{font-size:0.7143rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.payroll-active-facts b{margin-top:1px;font-size:0.8929rem;font-variant-numeric:tabular-nums}
.payroll-stepper{display:grid;grid-template-columns:repeat(7,minmax(9.4286rem,1fr));gap:0.4286rem;overflow-x:auto;padding:2px 0 0.4286rem;scrollbar-width:thin}
.payroll-stepper.compact{grid-template-columns:repeat(5,minmax(8.8571rem,1fr));margin-top:0.7143rem;padding-bottom:0}
.payroll-step{position:relative;min-width:8.8571rem;display:flex;align-items:flex-start;gap:0.5714rem;padding:0.5714rem 0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:#fff;transition:border-color var(--transition),background var(--transition)}
.payroll-step>span{width:1.5714rem;height:1.5714rem;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--surface-3);color:var(--muted);font-size:0.7857rem;font-weight:780}
.payroll-step>div{min-width:0}
.payroll-step b{display:block;font-size:0.8571rem;line-height:1.25}
.payroll-step small{display:block;margin-top:2px;color:var(--muted);font-size:0.75rem;line-height:1.3}
.payroll-step.complete{border-color:var(--success-border);background:var(--success-bg)}
.payroll-step.complete>span{background:var(--success-solid);color:#fff}
.payroll-step.current{border-color:var(--brand-200);background:var(--brand-50);box-shadow:0 0 0 0.2143rem rgba(47,116,201,.1)}
.payroll-step.current>span{background:var(--grad-brand);color:#fff}
.payroll-step.pending{opacity:.86}
.payroll-focus-inline{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;margin-top:0.7143rem;padding:0.5714rem 0.7857rem;border:1px solid var(--info-border);border-left:0.2857rem solid var(--info-solid);border-radius:0.6429rem;background:var(--info-bg)}
.payroll-focus-inline.warning{border-color:var(--warning-border);border-left-color:var(--warning-solid);background:var(--warning-bg)}
.payroll-focus-inline.ready,.payroll-focus-inline.success{border-color:var(--success-border);border-left-color:var(--success-solid);background:var(--success-bg)}
.payroll-focus-inline>div{min-width:0;display:flex;align-items:baseline;gap:0.5714rem}
.payroll-focus-inline b{font-size:0.8571rem;white-space:nowrap;color:var(--text-strong)}
.payroll-focus-inline span{font-size:0.8214rem;color:var(--muted)}
.payroll-work-section{margin-top:0.7143rem}
.payroll-work-section>.panel-title{padding-bottom:0.5714rem;margin-bottom:0.7143rem;border-bottom:1px solid var(--border-soft)}
.payroll-work-section>.panel-title h2{font-size:1.0357rem}
.pending-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:0.5714rem}
.pending-type{min-height:2.8571rem;padding:0.5714rem 0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.pending-type b{font-size:1.0714rem;font-variant-numeric:tabular-nums}.pending-type span{display:block;font-size:0.7857rem;color:var(--muted)}
.payroll-action-bar{padding:0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.payroll-action-bar form{display:flex;align-items:end;gap:0.5714rem;margin:0}
.payroll-decision-form{display:grid!important;grid-template-columns:minmax(17.8571rem,30rem) auto;align-items:end!important;gap:0.5714rem!important;padding-left:0.7143rem;border-left:1px solid var(--border)}
.payroll-decision-form label{font-size:0.7857rem;font-weight:650;color:var(--muted)}
.payroll-integrity-note{margin-top:0.5714rem;padding:0.5rem 0.7143rem;border-radius:0.5714rem;background:var(--surface-2);color:var(--muted);font-size:0.8214rem}
.payroll-integrity-note b{color:var(--text-strong)}
.payroll-data-table td{font-variant-numeric:tabular-nums}
.payroll-table-wrap{max-height:min(64vh,47.1429rem)}
.payroll-payment-form{display:flex;gap:0.5714rem;align-items:end;flex-wrap:wrap}
.payroll-statement{max-width:74.2857rem;margin:auto}
.payroll-statement .profile-summary-grid{gap:1.2857rem;margin-top:0.8571rem}
.payroll-statement h3{display:flex;align-items:center;gap:0.5714rem;font-size:0.9643rem;margin:0 0 0.5714rem}
.payroll-statement h3::before{content:"";width:0.2857rem;height:1.0714rem;border-radius:2px;background:var(--accent)}
.payroll-statement .profile-summary-grid>div:nth-child(2) h3::before{background:var(--danger-solid)}
.payroll-statement .compact-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:0.8571rem;padding:0.5714rem 2px;border:0;border-bottom:1px dashed var(--border);border-radius:0;background:transparent}
.payroll-statement .compact-list>div:last-child{border-bottom:0}
.payroll-statement .compact-list>div>b{font-weight:520;color:var(--text)}
.payroll-statement .compact-list>div>small{font-size:0.9286rem;font-weight:680;color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.payroll-statement .profile-summary-grid>div:nth-child(2) .compact-list>div>small{color:var(--danger)}
.payroll-statement .kpi-small:nth-child(3){background:var(--grad-accent);border-color:transparent;color:#fff}
.payroll-statement .kpi-small:nth-child(3)::before{display:none}
.payroll-statement .kpi-small:nth-child(3) small{color:rgba(255,255,255,.88)}
.payroll-statement .kpi-small:nth-child(3) b{color:#fff;font-size:1.2857rem}
.payroll-statement .employer-contributions{margin-top:1.1429rem;padding:0.8571rem 1rem;border-radius:var(--radius);background:var(--info-bg);border:1px solid var(--info-border)}
/* Workflow, approvals and exit */
.workflow-panel,.correction-reference-panel{margin-top:0.7143rem;padding:0.8571rem 1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-xs)}
.workflow-panel .panel-title{margin-bottom:0.4286rem}
.workflow-blocked{border-left:0.2857rem solid var(--warning-solid)}
.approval-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.1429rem,1fr));gap:0.4286rem;margin:0.4286rem 0 0.7143rem;padding:0;list-style:none}
.approval-timeline>li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:0.5rem;min-width:0;padding:0.5rem 0.6429rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.approval-timeline>li b{display:block;font-size:0.8214rem;color:var(--text-strong);line-height:1.25}
.approval-timeline>li small{display:block;font-size:0.75rem;color:var(--muted);line-height:1.3;margin-top:1px}
.approval-timeline>li p{margin:2px 0 0;font-size:0.7857rem;line-height:1.35;color:#566a7e}
.workflow-decision-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.7143rem;align-items:end;width:100%;padding:0.7143rem;border:1px solid var(--border);border-radius:0.7857rem;background:linear-gradient(180deg,var(--surface-2),#fff)}
.workflow-comment{display:flex;flex-direction:column;gap:0.3571rem;min-width:0}
.workflow-comment>span{font-size:0.8214rem;font-weight:680;color:#40566c}
.workflow-comment>span b{color:var(--danger)}
.workflow-comment textarea{min-height:3.8571rem}
.workflow-decision-buttons{display:flex;gap:0.4286rem;align-items:center}
.workflow-approve-options{grid-column:1/-1;display:flex;gap:0.5714rem;align-items:end;flex-wrap:wrap}
.workflow-approve-only{grid-column:1/-1}
.workflow-inline-field{display:flex;flex-direction:column;gap:0.2857rem;min-width:12.8571rem;font-size:0.8214rem;font-weight:650;color:#40566c}
.workflow-exception-choice{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.4286rem 0.5714rem;padding:0.6429rem 0.7143rem;border:1px solid var(--warning-border);border-radius:0.7143rem;background:var(--warning-bg)}
.workflow-exception-choice legend{padding:0 0.2857rem;font-size:0.8214rem;font-weight:760;color:var(--text-strong)}
.workflow-exception-choice>p{grid-column:1/-1;margin:0 0 2px;font-size:0.8214rem;line-height:1.4;color:#6d5217}
.workflow-exception-choice>label{display:flex;gap:0.5rem;align-items:flex-start;padding:0.5714rem;border:1px solid var(--warning-border);border-radius:0.5714rem;background:#fff;cursor:pointer}
.workflow-exception-choice>label:has(input:checked){border-color:var(--warning-solid);box-shadow:0 0 0 2px rgba(230,155,18,.15)}
.workflow-exception-choice input{margin-top:2px}
.workflow-exception-choice b,.workflow-exception-choice small{display:block}
.workflow-exception-choice b{font-size:0.8214rem;color:var(--text-strong)}
.workflow-exception-choice small{font-size:0.75rem;color:var(--muted);margin-top:1px}
.workflow-reassign-form{display:grid;grid-template-columns:minmax(15rem,1.3fr) minmax(12.8571rem,.8fr) minmax(15.7143rem,1fr) auto;gap:0.5714rem;align-items:end;margin:0.5714rem 0;padding:0.6429rem 0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.workflow-reassign-copy b,.workflow-reassign-copy small{display:block}
.workflow-reassign-copy b{font-size:0.8571rem;color:var(--text-strong)}
.workflow-reassign-copy small{font-size:0.7857rem;line-height:1.4;color:var(--muted);margin-top:2px}
.workflow-reassign-reason{min-width:15.7143rem}
.correction-reference-panel .kpi-strip{gap:0.4286rem}
.correction-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0.5714rem;padding-top:0.5714rem;border-top:1px solid var(--border-soft)}
.correction-flow-step{min-width:0;padding:0.4286rem 0.5714rem;border-radius:0.6429rem;background:var(--surface-2)}
.correction-flow-step small{display:block;font-size:0.7143rem;line-height:1.2;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:720}
.correction-flow-step b{display:block;margin-top:2px;font-size:0.8571rem;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.correction-flow-step span{display:block;margin-top:1px;font-size:0.7857rem;color:#5d7186;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.correction-flow-arrow{font-size:1rem;color:var(--brand-300)}
.leave-evidence-panel{display:flex;flex-direction:column;gap:0.5714rem;padding:0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.leave-evidence-head{display:flex;justify-content:space-between;gap:0.7143rem;align-items:flex-start}
.leave-evidence-head small,.leave-evidence-head b{display:block}
.leave-evidence-head small{font-size:0.7143rem;letter-spacing:.06em;color:var(--muted);font-weight:760}
.leave-evidence-head b{font-size:0.9286rem;color:var(--text-strong);margin-top:1px}
.leave-evidence-requirement{margin:2px 0 0;font-size:0.8214rem;line-height:1.4;color:var(--muted)}
.leave-evidence-requirement.required{color:var(--warning)}
.evidence-chip{flex:0 0 auto;padding:0.2143rem 0.6429rem;border:1px solid var(--border);border-radius:71.3571rem;background:#fff;font-size:0.75rem;font-weight:760;color:var(--muted)}
.evidence-chip.required{border-color:var(--warning-border);background:var(--warning-bg);color:var(--warning)}
.leave-evidence-list{display:flex;flex-direction:column;gap:0.4286rem}
.leave-evidence-item{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;padding:0.5rem 0.6429rem;border:1px solid var(--border);border-radius:0.5714rem;background:#fff}
.leave-evidence-item b,.leave-evidence-item small{display:block}
.leave-evidence-item b{font-size:0.8571rem;color:var(--text-strong)}
.leave-evidence-item small{font-size:0.75rem;color:var(--muted);margin-top:1px}
.leave-evidence-upload{padding-top:0.5714rem;border-top:1px solid var(--border)}
.leave-evidence-upload label{display:block;margin-bottom:0.2857rem;font-size:0.8214rem;font-weight:680;color:#40566c}
.leave-evidence-upload small{display:block;margin-top:0.2857rem;font-size:0.75rem;line-height:1.4;color:var(--muted)}
.leave-exception-banner{display:flex;justify-content:space-between;gap:0.7143rem;align-items:center;margin-bottom:0.7143rem;padding:0.6429rem 0.7857rem;border:1px solid var(--warning-border);border-left:0.2857rem solid var(--warning-solid);border-radius:0.7143rem;background:var(--warning-bg)}
.leave-exception-banner b,.leave-exception-banner span{display:block}
.leave-exception-banner b{font-size:0.8929rem;color:var(--text-strong)}
.leave-exception-banner>div>span{font-size:0.8214rem;color:#6d5217;margin-top:1px}
.leave-exception-meta{display:flex;gap:0.3571rem;flex-wrap:wrap;justify-content:flex-end}
.leave-exception-meta span{padding:2px 0.5714rem;border:1px solid var(--warning-border);border-radius:71.3571rem;background:#fff;font-size:0.75rem!important;font-weight:700;white-space:nowrap}
.clearance-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(21.4286rem,1fr));gap:0.7143rem}
.clearance-card{padding:0.7857rem 0.8571rem;border:1px solid var(--border);border-radius:0.7857rem;background:#fff;box-shadow:var(--shadow-xs)}
.clearance-card-head{display:flex;align-items:center;justify-content:space-between;gap:0.5714rem}
.clearance-form,.closure-form,.interview-form{display:flex;gap:0.5714rem;align-items:end;flex-wrap:wrap;margin-top:0.5714rem}
.clearance-assignment{display:flex;align-items:flex-end;gap:0.5714rem;flex-wrap:wrap;margin-top:0.5714rem}
.clearance-assignment select,.clearance-assignment input{min-width:11.4286rem}
.inline-editor{margin-top:0.7143rem;border:1px solid var(--border);border-radius:0.7857rem;background:var(--surface-2);overflow:hidden}
.inline-editor>summary{list-style:none;cursor:pointer;padding:0.7143rem 0.8571rem;font-weight:680;font-size:0.8929rem;color:var(--brand-600);display:flex;align-items:center;gap:0.5714rem}
.inline-editor>summary::before{content:"+";width:1.2857rem;height:1.2857rem;display:grid;place-items:center;border-radius:0.4286rem;background:var(--brand-100);color:var(--brand-700);font-weight:800}
.inline-editor[open]>summary::before{content:"−"}
.inline-editor>summary::-webkit-details-marker{display:none}
.inline-editor>summary:hover{background:var(--brand-50)}
.inline-editor[open]>summary{border-bottom:1px solid var(--border);background:#fff}
.inline-editor>form{padding:0.8571rem;background:#fff}
/* Employee profile, lifecycle, activation */
.employee-profile-hub,.previous-experience-profile{display:flex;flex-direction:column;gap:0.7143rem}
.employee-lifecycle-action{display:grid;grid-template-columns:auto minmax(17.1429rem,1fr) auto;align-items:center;gap:0.8571rem;margin:0 0 0.8571rem;padding:0.7143rem 0.8571rem;border:1px solid var(--workspace-border);border-left:0.2857rem solid var(--workspace-accent);border-radius:0.7857rem;background:linear-gradient(90deg,var(--workspace-soft),#fff)}
.employee-lifecycle-state{display:flex;align-items:center;gap:0.5714rem;flex-wrap:wrap;padding-right:0.8571rem;border-right:1px solid var(--border)}
.employee-lifecycle-state>span{display:flex;align-items:center;gap:0.4286rem;color:#566b80;font-size:0.8214rem;white-space:nowrap}
.employee-lifecycle-copy{display:flex;flex-direction:column;min-width:0}
.employee-lifecycle-copy>b{font-size:0.8929rem;color:var(--text-strong)}
.employee-lifecycle-copy>small{font-size:0.8214rem;color:var(--muted);margin-top:2px;line-height:1.4}
.employee-lifecycle-action>.btn{justify-self:end}
.activation-readiness{margin-bottom:0.8571rem;padding:0.8571rem 1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-xs)}
.activation-readiness.needs-attention{border-color:var(--warning-border);background:linear-gradient(180deg,var(--warning-bg),#fff)}
.activation-readiness.is-ready{border-color:var(--success-border);background:linear-gradient(180deg,var(--success-bg),#fff)}
.activation-readiness-head{display:flex;justify-content:space-between;align-items:flex-start;gap:0.8571rem;margin-bottom:0.7143rem}
.activation-readiness-head p{margin:2px 0 0;color:var(--muted);font-size:0.8571rem}
.activation-readiness-count{flex:0 0 auto;padding:0.3571rem 0.8571rem;border:1px solid var(--border-strong);border-radius:71.3571rem;background:#fff;font-size:0.8214rem;font-weight:760;white-space:nowrap;color:#41586f}
.activation-readiness.needs-attention .activation-readiness-count{border-color:var(--warning-border);color:var(--warning)}
.activation-readiness.is-ready .activation-readiness-count{border-color:var(--success-border);color:var(--success)}
.readiness-list{display:flex;flex-direction:column;gap:0.3571rem}
.activation-requirement-grid{grid-template-columns:repeat(auto-fill,minmax(15.7143rem,1fr))}
.activation-requirement{display:grid;grid-template-columns:1.5714rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:0.6429rem;align-items:center;padding:0.5714rem 0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:#fff;color:var(--text);transition:border-color var(--transition),background var(--transition)}
.activation-requirement>span[aria-hidden]{grid-row:1/3;width:1.5714rem;height:1.5714rem;display:grid;place-items:center;border-radius:50%;font-size:0.7857rem;font-weight:800;background:var(--info-bg);border:1px solid var(--info-border);color:var(--info)}
.activation-requirement:not(.missing):not(.complete){border-color:var(--info-border);background:var(--info-bg)}
.activation-requirement>b{font-size:0.8929rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activation-requirement>small{color:var(--muted);font-size:0.7857rem}
.activation-requirement.complete{border-color:var(--success-border);background:var(--success-bg)}
.activation-requirement.complete>span[aria-hidden]{background:var(--success-solid);border-color:var(--success-solid);color:#fff}
.activation-requirement.complete>small{color:var(--success)}
.activation-requirement.missing{border-color:var(--danger-border);background:var(--danger-bg)}
.activation-requirement.missing>span[aria-hidden]{background:var(--danger-solid);border-color:var(--danger-solid);color:#fff}
.activation-requirement.missing>small{color:var(--danger);font-weight:700}
.activation-requirement.missing:hover{border-color:var(--danger-solid);background:#fff}
.employee-experience-intro{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0.7143rem;align-items:center}
.employee-experience-intro p{margin:2px 0 0;color:var(--muted);font-size:0.8214rem}
.experience-derived-summary{min-width:12.8571rem;padding:0.5rem 0.7143rem;border:1px solid var(--brand-100);border-radius:0.7143rem;background:var(--brand-50);text-align:right}
.experience-derived-summary small{display:block;color:var(--muted);font-size:0.7143rem;font-weight:720;text-transform:uppercase;letter-spacing:.05em}
.experience-derived-summary b{display:block;margin-top:2px;color:var(--brand-700);font-size:0.9286rem;font-variant-numeric:tabular-nums}
.employee-experience-list{display:flex;flex-direction:column;gap:0.5714rem}
.employee-experience-row{padding:0.7143rem 0;border-top:1px solid var(--border-soft)}
.experience-row-head{display:flex;justify-content:space-between;gap:0.5714rem}
.experience-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5714rem 0.8571rem}
.employee-activity-panel{margin-top:0.8571rem;padding:0.8571rem 1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff}
.employee-attachment{font-size:0.7857rem;color:var(--muted)}
.profile-correction-card,.profile-request-evidence,.correction-request-layout,.profile-request-layout{padding:1rem 1.1429rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card)}
.profile-change-help{margin:0 0 0.7143rem}
.profile-change-table td{vertical-align:top}
.profile-change-table .request-value{min-width:15.7143rem}
.profile-change-table .request-current{min-width:11.4286rem}
.profile-change-table tr[data-profile-change-row].is-selected td{background:var(--brand-50)}
.profile-change-table tr[data-profile-change-row]:not(.is-selected) .request-value{opacity:.6}
/* Documents, imports, setup */
.document-grid,.master-grid,.setup-grid,.help-category-grid,.help-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.1429rem,1fr));gap:0.7143rem}
.document-card,.setup-card,.help-category-card,.help-topic-card{padding:0.8571rem 1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-xs);color:var(--text);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.document-card{display:flex;gap:0.7143rem;align-items:flex-start}
a.document-card:hover,a.setup-card:hover,a.help-category-card:hover,a.help-topic-card:hover{transform:translateY(-2px);border-color:var(--brand-200);box-shadow:var(--shadow-lift);color:var(--text)}
.document-icon,.help-category-icon{width:2.7143rem;height:2.7143rem;flex:0 0 auto;display:grid;place-items:center;border-radius:0.7857rem;background:var(--grad-brand);color:#fff;box-shadow:0 0.4286rem 1rem -0.4286rem rgba(12,80,161,.55)}
.document-icon .ui-icon,.help-category-icon .ui-icon{width:1.2857rem;height:1.2857rem}
.upload-area{padding:1.2857rem;border:1.5px dashed var(--border-strong);border-radius:0.8571rem;background:linear-gradient(180deg,var(--surface-2),#fff);text-align:center;transition:border-color var(--transition),background var(--transition)}
.upload-area:hover{border-color:var(--brand-300);background:var(--brand-50)}
.upload-guide,.import-review-card{padding:1rem 1.1429rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff}
.import-steps,.implementation-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.8571rem,1fr));gap:0.5714rem;margin-bottom:0.8571rem}
.import-step,.setup-step{position:relative;display:flex;align-items:flex-start;gap:0.7143rem;padding:0.7143rem 0.8571rem;border:1px solid var(--border);border-radius:0.7857rem;background:#fff}
.import-step>span{flex:0 0 1.7143rem;height:1.7143rem;display:grid;place-items:center;border-radius:50%;background:var(--surface-3);color:var(--muted);font-size:0.7857rem;font-weight:780}
.import-step>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.import-step>div>b{font-size:0.8929rem;line-height:1.3}
.import-step>div>small{font-size:0.8214rem;line-height:1.35;color:var(--muted)}
.import-step.complete,.setup-step.complete{border-color:var(--success-border);background:var(--success-bg)}
.import-step.complete>span{background:var(--success-solid);color:#fff}
.import-step.current{border-color:var(--brand-200);background:var(--brand-50);box-shadow:0 0 0 0.2143rem rgba(47,116,201,.1)}
.import-step.current>span{background:var(--grad-brand);color:#fff}
.setup-step{flex-direction:column;gap:0.2857rem}
.setup-step>h3{margin:0;color:var(--text-strong)}
.setup-step>p{margin:0;color:var(--muted);font-size:0.8571rem}
.step-no,.setup-step>.step-no{width:1.7143rem;height:1.7143rem;display:inline-grid;place-items:center;border-radius:50%;background:var(--grad-brand);color:#fff!important;font-size:0.7857rem;font-weight:780}
.setup-flow{display:flex;align-items:center;gap:0.4286rem;flex-wrap:wrap;margin:0 0 0.7143rem}
.setup-flow>span{padding:0.3571rem 0.7857rem;border:1px solid var(--border);border-radius:71.3571rem;background:var(--surface-2);font-size:0.8214rem;font-weight:640;color:#41586f;white-space:nowrap}
.setup-flow>span:first-child{border-color:var(--brand-200);background:var(--brand-50);color:var(--brand-600)}
/* Settings and reference lists */
.settings-wide{max-width:none}
.settings-card-stack,.implementation-settings-grid,.settings-operational-form{display:flex;flex-direction:column;gap:0.8571rem}
.settings-card{--card-accent:#9ab2c7;position:relative;overflow:hidden}
.settings-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0.2857rem;background:var(--card-accent)}
.settings-card.accent-blue{--card-accent:linear-gradient(180deg,#1553a6,#3b8ff0)}
.settings-card.accent-teal{--card-accent:linear-gradient(180deg,#0b6f86,#18a39a)}
.settings-card.accent-green{--card-accent:linear-gradient(180deg,#2f7d27,#62bd48)}
.settings-card.accent-violet{--card-accent:linear-gradient(180deg,#5b3aa6,#9a72e8)}
.settings-card.accent-amber{--card-accent:linear-gradient(180deg,#b4640a,#eba13a)}
.settings-card.accent-slate{--card-accent:linear-gradient(180deg,#34475c,#6b8299)}
.configuration-card,.integration-test-card{margin-bottom:0.8571rem;padding:1rem 1.1429rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff}
.configuration-card>.form-card{border:0;box-shadow:none;padding:0}
.settings-guidance-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5714rem}
.settings-guidance-strip>div{padding:0.6429rem 0.7857rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.settings-guidance-strip b,.settings-guidance-strip span{display:block}
.settings-guidance-strip b{font-size:0.8571rem;color:var(--text-strong)}
.settings-guidance-strip span{margin-top:2px;font-size:0.8214rem;line-height:1.45;color:var(--muted)}
.settings-footnote{margin:0;padding-top:0.5714rem;border-top:1px solid var(--border-soft);font-size:0.8214rem;line-height:1.45;color:var(--muted)}
.integration-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5714rem;margin:0 0 0.8571rem}
.integration-summary-grid>div{min-width:0;display:flex;flex-direction:column;gap:2px;padding:0.5714rem 0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2)}
.integration-summary-grid small{font-size:0.7143rem;color:var(--muted);font-weight:720;text-transform:uppercase;letter-spacing:.05em}
.integration-summary-grid b{font-size:0.8571rem;color:var(--text-strong);font-weight:620}
.inline-card-action{display:flex;justify-content:flex-end;gap:0.5714rem;padding-top:0.7143rem;border-top:1px solid var(--border-soft)}
.inline-test-row{display:grid;grid-template-columns:minmax(17.1429rem,1fr) auto;gap:0.7143rem;align-items:end}
.readiness-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5714rem}
.readiness-item{display:grid;grid-template-columns:auto 1fr auto;gap:0.2143rem 0.5714rem;align-items:center;padding:0.6429rem 0.7857rem;border:1px solid var(--border);border-radius:0.7143rem;background:#fff}
.readiness-item>b{font-size:0.7143rem;text-transform:uppercase;letter-spacing:.05em}
.readiness-item>span{font-size:0.8571rem;font-weight:680}
.readiness-item>small{grid-column:2/-1;color:var(--muted);font-size:0.7857rem}
.readiness-item.ready{border-left:0.2857rem solid var(--success-solid)}
.readiness-item.pending{border-left:0.2857rem solid var(--warning-solid)}
.api-key-box{word-break:break-all;font-family:var(--mono)}
.danger-zone{padding:0.8571rem 1rem;border:1px solid var(--danger-border);border-radius:var(--radius-lg);background:var(--danger-bg)}
.master-panel{display:flex;flex-direction:column;gap:0.7143rem}
.master-group{min-width:0;padding:0.8571rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2)}
.master-group>h3{display:flex;align-items:center;gap:0.5714rem;margin:0 0 0.7143rem;font-size:0.8571rem;letter-spacing:.06em;text-transform:uppercase;color:#40566c}
.master-group>h3::before{content:"";width:0.5714rem;height:0.5714rem;border-radius:0.2143rem;background:var(--mg,#2f7fca);transform:rotate(45deg)}
.master-group:nth-of-type(4n+2){--mg:#18a39a}.master-group:nth-of-type(4n+3){--mg:#7c5ce0}.master-group:nth-of-type(4n){--mg:#e69b12}
.setup-control-centre>.master-group+.master-group,.settings-master-full>.master-group+.master-group{margin-top:0.7143rem}
.master-grid{grid-template-columns:repeat(auto-fill,minmax(15.7143rem,1fr));gap:0.5714rem}
.master-card{position:relative;min-height:6.1429rem;display:flex;flex-direction:column;justify-content:space-between;padding:0.7857rem 0.8571rem 0.7143rem 1rem;border:1px solid var(--border);border-radius:0.7857rem;background:#fff;overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.master-card::before{content:"";position:absolute;left:0;top:0.7143rem;bottom:0.7143rem;width:0.2143rem;border-radius:0 0.2143rem 0.2143rem 0;background:var(--mg,#2f7fca)}
.master-card:hover{border-color:var(--brand-200);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.master-card-copy{min-width:0;display:flex;flex-direction:column;gap:0.2143rem}
.master-card-copy>b{font-size:0.8929rem;color:var(--text-strong);line-height:1.3}
.master-card-copy>small{font-size:0.7857rem;color:var(--muted);line-height:1.35}
.master-card-actions{display:flex;gap:0.4286rem;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:0.6429rem;padding-top:0.5714rem;border-top:1px solid var(--border-soft)}
.master-card-actions>.text-link{margin-right:auto;font-size:0.8214rem}
.setup-grid>.setup-card{position:relative;overflow:hidden}
/* Comp-Off */
.comp-off-policy-card{padding:1.1429rem 1.2857rem}
.criteria-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.7143rem;margin-top:0.8571rem}
.criteria-grid>div{min-width:0;padding:0.7857rem 0.8571rem;border:1px solid var(--border);border-radius:0.7857rem;background:var(--surface-2)}
.criteria-grid b,.criteria-grid span{display:block}
.criteria-grid span{margin-top:0.2857rem;font-size:0.8571rem;line-height:1.45;color:var(--muted)}
.metric-strip,.comp-off-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.1429rem,1fr));gap:0.7143rem;margin:0 0 0.8571rem}
.metric-strip>div{position:relative;min-width:0;padding:0.7857rem 1rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;box-shadow:var(--shadow-xs);overflow:hidden}
.metric-strip>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0.2857rem;background:var(--workspace-grad)}
.metric-strip>div small,.metric-strip>div span{display:block;color:var(--muted);font-size:0.8214rem;font-weight:620}
.metric-strip>div b,.metric-strip>div strong{display:block;margin-top:2px;font-size:1.4286rem;color:var(--text-strong);font-variant-numeric:tabular-nums}
.compact-page-title{align-items:center}
.compact-switcher{min-width:min(25.7143rem,100%)}
.compact-switcher label{display:grid;gap:0.3571rem}
.dense-inline-form{display:flex;align-items:end;gap:0.7143rem;flex-wrap:wrap}
.dense-inline-form label{display:grid;gap:0.3571rem;min-width:12.8571rem;font-size:0.8571rem;font-weight:620}
.dense-inline-form .grow{flex:1 1 20rem}
.compact-decision{display:grid;gap:0.4286rem;min-width:15.7143rem}
.compact-decision>div{display:flex;gap:0.4286rem;flex-wrap:wrap}
.allowance-calc-panel{margin-bottom:0.8571rem}
/* Help */
.help-shell{max-width:111.4286rem}
.help-hero{position:relative;margin-bottom:0.8571rem;padding:1.2857rem 1.4286rem;border:1px solid var(--border);border-radius:var(--radius-xl);background:radial-gradient(90% 140% at 100% 0%,rgba(92,181,67,.12) 0%,rgba(92,181,67,0) 50%),linear-gradient(120deg,#fff 40%,var(--brand-50));box-shadow:var(--shadow-card)}
.help-hero-path{display:flex;gap:0.4286rem;flex-wrap:wrap;font-size:0.8214rem;color:var(--muted)}
.help-lead{color:var(--muted);font-size:0.9286rem}
.help-search{display:flex;gap:0.5714rem;max-width:54.2857rem}
.help-search input{flex:1}
.help-toolbar{display:flex;gap:0.5714rem;align-items:center;flex-wrap:wrap}
.help-result-list{display:flex;flex-direction:column;gap:0.4286rem}
.help-result{display:flex;gap:0.7143rem;padding:0.7143rem 0.8571rem;border:1px solid var(--border);border-radius:0.7857rem;background:#fff;color:var(--text);transition:background var(--transition),border-color var(--transition)}
.help-result:hover{background:var(--brand-50);border-color:var(--brand-200);color:var(--text)}
.help-result-icon{color:var(--brand-500)}
.help-category-card{display:flex;flex-direction:column;gap:0.4286rem}
.help-category-card h2{font-size:1rem;margin:0;color:var(--text-strong)}
.help-category-card p{margin:0;color:var(--muted);font-size:0.8571rem}
.help-category-card:hover h2{color:var(--brand-600)}
.help-article{padding:1.2857rem 1.4286rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card)}
.help-article-header{margin-bottom:0.8571rem;padding-bottom:0.7143rem;border-bottom:1px solid var(--border-soft)}
.help-section{padding:0.8571rem 0;border-bottom:1px solid var(--border-soft)}
.help-section:last-child{border-bottom:0}
.help-section-heading{display:flex;flex-direction:column;gap:2px;margin-bottom:0.5714rem}
.help-section-heading>span{font-size:0.75rem;font-weight:760;letter-spacing:.09em;color:var(--brand-500)}
.help-section-heading h2{margin:0}
.help-section-heading p{margin:0;color:var(--muted);font-size:0.8571rem}
.help-bullets{padding-left:1.4286rem;margin:0}
.help-bullets li{margin:0.3571rem 0;line-height:1.5}
.help-field-table{width:100%;border-collapse:collapse}
.help-field-table td,.help-field-table th{padding:0.5714rem 0.7143rem;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:top;white-space:normal}
.help-field-key{display:block;margin-top:2px;color:var(--faint);font-family:var(--mono);font-size:0.75rem}
.help-howto-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.7143rem,1fr));gap:0.5714rem}
.help-howto{padding:0.7143rem 0.8571rem;border:1px solid var(--border);border-radius:0.7857rem;background:var(--surface-2)}
.help-callouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5714rem}
.help-callout{padding:0.7143rem 0.8571rem;border:1px solid var(--info-border);border-radius:0.7857rem;background:var(--info-bg)}
.help-topic-footer{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;flex-wrap:wrap;margin-top:1rem;padding-top:0.7143rem;border-top:1px solid var(--border-soft)}
.help-manual-cover{padding:1.5714rem;border:1px solid var(--border);border-radius:var(--radius-xl);background:#fff}
.help-manual-toc{columns:2}
.help-manual-category{break-inside:avoid;margin-bottom:0.8571rem}
.help-manual-category-head{border-bottom:1px solid var(--border);padding-bottom:0.4286rem}
/* Settings refinements */
.form-intro:has(>h2),.form-intro:has(>h3){display:block}
.form-intro>h2+p,.form-intro>h3+p{max-width:64.2857rem}
.configuration-card>form+form{margin-top:1.2857rem;padding-top:1.1429rem;border-top:1px dashed var(--border-strong)}
.form-section>div:first-child>h3{margin:0 0 2px}
.form-section>div:first-child>p{margin:0 0 0.7143rem;color:var(--muted);font-size:0.8571rem;max-width:64.2857rem}
.requirement-grid{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0.4286rem}
.requirement-grid>label{display:flex;align-items:center;gap:0.6429rem;min-width:0;padding:0.5rem 0.7143rem;border:1px solid var(--border);border-radius:0.6429rem;background:#fff;font-size:0.8929rem;font-weight:560;cursor:pointer;transition:border-color var(--transition),background var(--transition)}
.requirement-grid>label:hover{border-color:var(--brand-200);background:var(--brand-50)}
.requirement-grid>label:has(input:checked){border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-700)}
fieldset{min-width:0;margin:0 0 0.7143rem;padding:0.7143rem 0.8571rem 0.8571rem;border:1px solid var(--border);border-radius:0.7857rem;background:var(--surface-2)}
legend{padding:0 0.4286rem;font-size:0.8571rem;font-weight:700;color:var(--text-strong)}
fieldset.route-row{display:block}
.route-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.1429rem,1fr));gap:0.5714rem}
@media (min-width:821px){.settings-tabs{flex-wrap:wrap}}
p.workflow-blocked,.muted-note.workflow-blocked{margin:0;padding:0.5rem 0.7857rem;border-radius:0 0.6429rem 0.6429rem 0;background:var(--warning-bg);color:#6f4700;font-size:0.8571rem}
.biometric-table td>b,.biometric-table td>small{display:block}
.biometric-table td>small{margin-top:2px;color:var(--muted);font-size:0.7857rem;line-height:1.35}
/* Payroll step-by-step guide */
.payroll-guide{padding:0.8571rem 1rem;margin-bottom:0.8571rem}
.payroll-guide-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.4286rem 0.8571rem;margin-bottom:0.7143rem}
.payroll-guide-hint{flex:1 1 auto;color:var(--muted);font-size:0.8571rem}
.payroll-guide-steps{display:grid;grid-template-columns:repeat(8,minmax(9.1429rem,1fr));gap:0.5714rem;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:thin}
.payroll-guide-step{position:relative;display:flex;flex-direction:column;gap:0.2857rem;min-width:0;padding:0.7143rem 0.7143rem 0.6429rem;border:1px solid var(--border);border-radius:0.7143rem;background:#fff}
.payroll-guide-step b{font-size:0.8929rem;line-height:1.25;color:var(--text-strong)}
.payroll-guide-step small{flex:1 1 auto;font-size:0.8214rem;line-height:1.4;color:var(--muted)}
.payroll-guide-step a{font-size:0.8214rem;font-weight:650;color:var(--brand-700);text-decoration:none}
.payroll-guide-step a:hover{text-decoration:underline}
.payroll-guide-no{display:inline-grid;place-items:center;width:1.5714rem;height:1.5714rem;border-radius:50%;background:var(--surface-2,#eef2f6);color:var(--text);font-size:0.8214rem;font-weight:700}
.payroll-guide-step.done{background:#f3faf5;border-color:#cfe9d7}
.payroll-guide-step.done .payroll-guide-no{background:#1e8e4f;color:#fff}
.payroll-guide-step.current{border-color:var(--brand-400);box-shadow:0 0 0 0.2143rem rgba(31,111,235,.12);background:#f5f9ff}
.payroll-guide-step.current .payroll-guide-no{background:var(--brand-600,#1f6feb);color:#fff}
.payroll-guide-step.current b::after{content:" · Next";color:var(--brand-700);font-weight:700}
@media (max-width:1100px){.payroll-guide-steps{grid-template-columns:repeat(8,10.7143rem)}}
/* Error explainers */
.alert-help-link{display:inline-block;margin-left:0.4286rem;font-weight:700;white-space:nowrap;color:inherit;text-decoration:underline;text-underline-offset:2px}
.error-help-card{padding:1.2857rem 1.4286rem}
.error-help-card h2{margin:1rem 0 0.4286rem;font-size:1rem}
.error-help-message{padding:0.7143rem 0.8571rem;border:1px solid var(--danger-border,#f3c2c2);border-radius:0.7143rem;background:var(--danger-bg,#fff5f5)}
.error-help-message small{display:block;font-size:0.7857rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.error-help-message p{margin:0.2857rem 0 0;color:#8a1f1f;font-size:0.9286rem;overflow-wrap:anywhere}
.error-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.2857rem 1.4286rem}
.error-help-grid p{margin:0;font-size:0.9286rem;line-height:1.55;color:var(--text)}
.error-help-steps{margin:0;padding-left:1.4286rem;font-size:0.9286rem;line-height:1.6}
.error-help-steps li{margin:0.2143rem 0}
.error-help-where{display:flex;align-items:center;gap:0.7143rem;margin-top:1rem;padding-top:0.8571rem;border-top:1px solid var(--border-soft)}
.error-help-where span{font-size:0.8571rem;color:var(--muted)}
.error-help-search{display:flex;gap:0.4286rem;min-width:min(24.2857rem,100%)}
.error-help-area{margin:1rem 0 0.4286rem;font-size:0.8571rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.error-help-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.8571rem,1fr));gap:0.5714rem}
.error-help-item{display:flex;flex-direction:column;gap:0.2143rem;padding:0.7143rem 0.8571rem;border:1px solid var(--border);border-radius:0.7143rem;background:#fff;color:var(--text);text-decoration:none}
.error-help-item:hover{border-color:var(--brand-400)}
.error-help-item.active{border-color:var(--brand-400);background:#f5f9ff}
.error-help-item b{font-size:0.8929rem;color:var(--text-strong)}
.error-help-item small{font-size:0.8214rem;color:var(--muted);line-height:1.4}
@media (max-width:720px){.error-help-grid{grid-template-columns:1fr}}
/* Employee form: compact sections */
body[data-page="employees"] form.form-card .form-group-heading{margin:1rem 0 2px;padding-top:0.8571rem;border-top:1px solid var(--border-soft)}
body[data-page="employees"] form.form-card .form-group-heading:first-of-type{border-top:0;padding-top:0;margin-top:0.2857rem}
body[data-page="employees"] form.form-card .field:has(input[name="present_same_as_permanent"]){grid-column:1/-1;flex-direction:row;align-items:center;gap:0.7143rem;padding:0.4286rem 0.7143rem;border:1px solid var(--border-soft);border-radius:0.5714rem;background:var(--surface-2,#f6f8fb)}
body[data-page="employees"] form.form-card .field:has(input[name="present_same_as_permanent"])>label:first-child{margin:0}
.field-info{display:inline-grid;place-items:center;width:1.0714rem;height:1.0714rem;margin-left:0.3571rem;border-radius:50%;background:var(--surface-2,#e9eef4);color:var(--muted);font-size:0.7143rem;font-weight:700;font-style:normal;line-height:1;cursor:help;position:relative;vertical-align:1px}
.field-info:hover,.field-info:focus{background:var(--brand-50,#e8f0fe);color:var(--brand-700);outline:none}
.field-info-tip{position:absolute;left:50%;bottom:calc(100% + 0.4286rem);transform:translateX(-50%);z-index:50;width:max-content;max-width:18.5714rem;padding:0.5rem 0.6429rem;border-radius:0.5rem;background:#1d2b3a;color:#fff;font-size:0.8214rem;font-weight:500;line-height:1.45;text-align:left;white-space:normal;box-shadow:0 0.4286rem 1.2857rem rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s}
.field-info:hover .field-info-tip,.field-info:focus .field-info-tip{opacity:1;visibility:visible}
body[data-page="employees"] form.form-card .field:has(input[name="present_same_as_permanent"])>label:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---- 09 Sign-in, installer and system pages ---------------------------- */
.login-page,.app-error-page,.installer-body{min-height:100vh;margin:0;background:#07203f;color:var(--text)}
.login-page::before,.app-error-page::before,.installer-body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(60% 70% at 85% 10%,rgba(92,181,67,.30) 0%,rgba(92,181,67,0) 60%),radial-gradient(70% 80% at 10% 90%,rgba(59,128,214,.55) 0%,rgba(59,128,214,0) 60%),radial-gradient(50% 50% at 50% 50%,rgba(18,99,190,.35) 0%,rgba(18,99,190,0) 70%),linear-gradient(135deg,#061a33 0%,#082d5b 50%,#0b3f7d 100%)}
.login-page::after,.app-error-page::after,.installer-body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:3.1429rem 3.1429rem;-webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 100%)}
.login-wrap{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(25.7143rem,1.05fr) minmax(30rem,.95fr);align-items:center;gap:clamp(1.7143rem,4vw,4.5714rem);width:min(94.2857rem,100%);margin:0 auto;padding:clamp(1.4286rem,4vw,4rem)}
.login-brand-panel{display:flex;flex-direction:column;justify-content:space-between;gap:2.5714rem;min-height:min(45.7143rem,82vh);padding:clamp(0.5714rem,2vw,1.7143rem);color:#d6e4f3}
.login-brand-panel>img{width:15rem;height:auto;filter:drop-shadow(0 0.5714rem 1.7143rem rgba(0,0,0,.25))}
.login-brand-panel h2{max-width:40rem;margin:0.7143rem 0 0.8571rem;color:#fff;font-size:clamp(2rem,3vw,3rem);line-height:1.12;font-weight:760;letter-spacing:-.03em}
.login-brand-panel p{max-width:37.1429rem;color:#b6cbe1;font-size:1.0357rem;line-height:1.6}
.login-brand-panel>small{color:#89a5c4;font-size:0.8214rem}
.login-brand-panel .eyebrow{color:#a8e693}
.login-brand-points{display:flex;gap:0.5714rem;flex-wrap:wrap;margin-top:1.4286rem}
.login-brand-points span{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.8571rem;border:1px solid rgba(255,255,255,.14);border-radius:71.3571rem;background:rgba(255,255,255,.06);color:#e3edf8;font-size:0.8571rem;font-weight:560;backdrop-filter:blur(0.4286rem)}
.login-brand-points span::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:#7ee25e;box-shadow:0 0 0.7143rem #7ee25e}
.login-card{position:relative;width:min(31.4286rem,100%);justify-self:center;padding:2.1429rem 2.1429rem 1.8571rem;border:1px solid rgba(255,255,255,.5);border-radius:1.5714rem;background:#fff;box-shadow:0 2.1429rem 5.7143rem -1.4286rem rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);animation:hrms-rise .45s cubic-bezier(.2,.8,.2,1) both}
.login-card::before{content:"";position:absolute;left:2.1429rem;right:2.1429rem;top:0;height:0.2143rem;border-radius:0 0 0.2857rem 0.2857rem;background:linear-gradient(90deg,#0c50a1,#3b80d6,#5cb543)}
.login-card h1{font-size:1.8571rem;margin:0.2857rem 0 0.4286rem;letter-spacing:-.025em}
.login-card>p{color:var(--muted);font-size:0.9286rem;margin-bottom:1rem}
.login-kicker{color:var(--brand-500)}
.login-kicker::before{content:"";width:0.4286rem;height:0.4286rem;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.login-card .field{margin-bottom:0.8571rem}
.login-card .field>label,.login-inline-form label{font-size:0.8571rem;font-weight:650;color:#34495f}
.login-card .form-control{height:3rem;border-radius:0.7143rem;font-size:1rem}
.login-button{width:100%;height:3.1429rem;margin:0.7143rem 0 0.4286rem;border-radius:0.7857rem!important;font-size:1rem!important}
.microsoft-button{justify-content:center;gap:0.7143rem}
.ms-mark{width:1.2857rem;height:1.2857rem;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ms-mark i{display:block;background:#fff}
.ms-mark i:nth-child(1){background:#f35325}.ms-mark i:nth-child(2){background:#81bc06}.ms-mark i:nth-child(3){background:#05a6f0}.ms-mark i:nth-child(4){background:#ffba08}
.login-method-note{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;padding:0.7143rem 0;border-bottom:1px solid var(--border-soft);font-size:0.8571rem}
.login-method-note b{color:var(--text-strong)}
.login-method-note span{color:var(--muted)}
.login-local-primary{margin-top:0.4286rem;padding:1rem;border:1px solid var(--border);border-radius:1rem;background:linear-gradient(180deg,var(--surface-2),#fff)}
.login-local-primary .login-method-note{flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 0.7143rem;padding:0;border:0}
.login-local-primary .muted-note{margin:0.5714rem 0 0;font-size:0.8214rem}
.login-inline-form{display:grid;gap:0.5rem}
.login-inline-form .form-control{height:2.8571rem;border-radius:0.7143rem}
.login-alternatives{margin-top:0.7143rem}
.login-alternative{border-bottom:1px solid var(--border-soft)}
.login-alternative summary{display:flex;align-items:center;justify-content:space-between;gap:0.7143rem;padding:0.8571rem 2px;font-weight:650;font-size:0.9286rem;list-style:none;cursor:pointer}
.login-alternative summary::-webkit-details-marker{display:none}
.login-alternative summary::after{content:"";width:0.5rem;height:0.5rem;border-right:0.1143rem solid #6b7f94;border-bottom:0.1143rem solid #6b7f94;transform:rotate(45deg);transition:transform var(--transition)}
.login-alternative[open] summary::after{transform:rotate(-135deg)}
.login-alternative summary small{margin-left:auto;color:var(--muted);font-weight:400}
.login-alternative-panel{padding:0 0 0.8571rem}
.login-alternative-panel p{font-size:0.8571rem;color:var(--muted)}
.emergency-alternative summary{color:#7a4c00}
.login-help{margin:0.5714rem 0;font-size:0.8214rem;color:var(--muted)}
.login-back,.emergency-link{display:inline-flex;margin:0.2857rem 0 0.7143rem;font-size:0.8929rem}
.login-mobile-brand{display:none;width:max-content;max-width:100%;margin-bottom:1rem;padding:0.4286rem 0.7143rem;border-radius:0.8571rem;background:var(--brand-600)}
.login-mobile-brand img{display:block;width:10.7143rem}
/* Error / access pages */
.app-error-page{display:grid;place-items:center;padding:1.4286rem}
.app-error-card{position:relative;z-index:1;width:min(40rem,100%);padding:2.1429rem;border-radius:1.5714rem;background:#fff;box-shadow:0 2.1429rem 5.7143rem -1.4286rem rgba(0,0,0,.55);animation:hrms-rise .4s cubic-bezier(.2,.8,.2,1) both}
.app-error-card h1{font-size:1.7143rem;margin:0.4286rem 0 0.5714rem}
.app-error-card p{color:var(--muted);font-size:0.9643rem;line-height:1.6}
.app-error-card .btn{margin-top:0.5714rem}
.app-error-logo{display:block;width:12.1429rem;margin-bottom:1.2857rem;border-radius:0.7143rem}
.app-error-detail{padding:0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2);font:0.8214rem var(--mono);white-space:pre-wrap;word-break:break-word}
/* Installer */
.installer-wrap{position:relative;z-index:1;width:min(62.8571rem,calc(100% - 2rem));margin:0 auto;padding:2.5714rem 0 3.1429rem}
.installer-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:1.4286rem;margin-bottom:1.2857rem;color:#d6e4f3}
.installer-logo{display:block;width:13.5714rem;height:auto;margin-bottom:1.2857rem;filter:drop-shadow(0 0.5714rem 1.4286rem rgba(0,0,0,.3))}
.installer-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.3571rem 0.7857rem;border:1px solid rgba(255,255,255,.18);border-radius:71.3571rem;background:rgba(255,255,255,.07);color:#bfe6b3;font-size:0.75rem;font-weight:760;letter-spacing:.1em;text-transform:uppercase}
.installer-badge::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:#7ee25e;box-shadow:0 0 0.7143rem #7ee25e}
.installer-hero h1{margin:0.8571rem 0 0.4286rem;color:#fff;font-size:2.1429rem;letter-spacing:-.03em}
.installer-hero p{margin:0;max-width:45.7143rem;color:#b6cbe1;font-size:1rem;line-height:1.6}
.installer-panel{padding:1.7143rem;border-radius:1.4286rem;background:#fff;box-shadow:0 2.1429rem 5.7143rem -1.7143rem rgba(0,0,0,.6)}
.installer-simple-form{display:grid;gap:1.2857rem}
.section-title{display:flex;gap:0.8571rem;align-items:flex-start}
.section-title>span{flex:0 0 2.1429rem;height:2.1429rem;display:grid;place-items:center;border-radius:0.7143rem;background:var(--grad-brand);color:#fff;font-size:0.8571rem;font-weight:780;box-shadow:0 0.4286rem 1rem -0.4286rem rgba(12,80,161,.6)}
.section-title h2{margin:0.2143rem 0 0.2143rem;font-size:1.1429rem}
.section-title p{margin:0;color:var(--muted);font-size:0.8929rem;line-height:1.5}
.installer-fields{display:grid;gap:0.8571rem;padding-left:3rem}
.installer-fields.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.installer-fields.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.installer-fields label{display:grid;align-content:start;gap:0.4286rem;font-size:0.8571rem;font-weight:650;color:#34495f}
.installer-fields input{width:100%;height:3rem!important;border-radius:0.7143rem!important;font-size:1rem!important}
.installer-fields small{font-size:0.7857rem;line-height:1.4;color:var(--muted);font-weight:400}
.installer-note{display:flex;gap:0.7143rem;align-items:flex-start;padding:0.7857rem 0.9286rem;border:1px solid var(--info-border);border-radius:0.8571rem;background:var(--info-bg);font-size:0.8929rem;line-height:1.5;color:#154f86}
.installer-note b{white-space:nowrap}
.installer-actions{display:flex;justify-content:flex-end;gap:0.5714rem;padding-top:0.2857rem;border-top:1px solid var(--border-soft)}
.installer-actions .btn{height:3.1429rem;padding:0 1.5714rem;font-size:1rem;border-radius:0.7857rem}
.installer-alert{display:flex;gap:0.7143rem;align-items:flex-start;margin:0 0 1rem;padding:0.8571rem 1rem;border-radius:1rem;font-size:0.9286rem;box-shadow:var(--shadow-md)}
.installer-alert.error{border:1px solid var(--danger-border);background:#fff4f3;color:var(--danger)}
.installer-alert b{white-space:nowrap}
.installer-footer{margin-top:1.1429rem;color:#9cb4cd;font-size:0.8571rem;line-height:1.55}
.installer-footer>div{display:flex;gap:0.5714rem}
.installer-footer b{color:#dbe7f4}
/* ---- 10 Motion ---------------------------------------------------------- */
/* Navigation progress bar and back-to-top (app.js) */
.nav-progress{position:fixed;left:0;top:0;z-index:20001;width:100%;height:0.2143rem;pointer-events:none;transform-origin:left;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,#22c55e,#06b6d4,#3b82f6,#8b5cf6);box-shadow:0 0 0.7143rem rgba(59,130,246,.6)}
.nav-progress.is-loading{opacity:1;animation:hrms-progress 8s cubic-bezier(.08,.8,.2,1) forwards}
.nav-progress.is-done{transform:scaleX(1)!important;opacity:0;animation:none;transition:opacity .3s ease .05s}
@keyframes hrms-progress{0%{transform:scaleX(0)}20%{transform:scaleX(.45)}60%{transform:scaleX(.8)}100%{transform:scaleX(.94)}}
.back-to-top{position:fixed;right:1.4286rem;bottom:1.5714rem;z-index:900;width:3rem;height:3rem;display:grid;place-items:center;border:1px solid var(--border);border-radius:1rem;background:rgba(255,255,255,.92);color:var(--brand-600);box-shadow:var(--shadow-md);backdrop-filter:blur(0.5714rem);animation:hrms-pop .2s ease both;transition:transform var(--transition),box-shadow var(--transition)}
.back-to-top svg{width:1.4286rem;height:1.4286rem}
.back-to-top:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
@media print{.nav-progress,.back-to-top{display:none!important}}
@keyframes hrms-rise{from{opacity:0;transform:translateY(0.5714rem)}to{opacity:1;transform:none}}
@keyframes hrms-pop{from{opacity:0;transform:translateY(-0.2857rem) scale(.98)}to{opacity:1;transform:none}}
@keyframes hrms-fade{from{opacity:0}to{opacity:1}}
@keyframes hrms-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.search-popover{animation-name:hrms-pop-center}
@keyframes hrms-pop-center{from{opacity:0;transform:translateX(-50%) translateY(-0.2857rem)}to{opacity:1;transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
#main-content>:not(.sr-only){animation:hrms-rise .38s cubic-bezier(.2,.8,.2,1) both}
#main-content>:nth-child(3){animation-delay:30ms}#main-content>:nth-child(4){animation-delay:60ms}#main-content>:nth-child(5){animation-delay:90ms}#main-content>:nth-child(6){animation-delay:120ms}#main-content>:nth-child(n+7){animation-delay:150ms}
.bar>span,.mini-progress>span,.mini-progress>em{animation:hrms-grow .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
.quick-card:hover .quick-icon{transform:scale(1.06) rotate(-3deg)}
.quick-icon{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.nav-link:hover .nav-icon-wrap{transform:translateX(1px)}
.punch-button::before{animation:hrms-pulse 2.4s ease-in-out infinite}
}
@keyframes hrms-pulse{0%,100%{box-shadow:0 0 0 0.2143rem rgba(34,163,82,.18)}50%{box-shadow:0 0 0 0.4286rem rgba(34,163,82,.05)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* ---- 11 Responsive ------------------------------------------------------ */
@media (min-width:1480px){
.content{padding-left:1.7143rem;padding-right:1.7143rem}
.topbar{padding-left:1.7143rem;padding-right:1.7143rem}
.profile-copy{display:block}
}
@media (min-width:1181px){
body[data-page="employees"] form.form-card .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-page="employees"] form.form-card .form-grid>.span-2{grid-column:1/-1}
}
@media (min-width:1320px){
body[data-page="employees"] form.form-card .form-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0.7143rem 1rem}
body[data-page="employees"] form.form-card .field:has(>input[name$="address_line1"]),
body[data-page="employees"] form.form-card .field:has(>input[name$="address_line2"]){grid-column:span 2}
}
@media (max-width:1280px){
.payroll-control-row{grid-template-columns:1fr}
.payroll-selectors.compact{justify-content:flex-start}
.payroll-active-head{grid-template-columns:1fr}
}
@media (max-width:1180px){
.topbar{grid-template-columns:minmax(12.8571rem,1fr) minmax(15.7143rem,22.8571rem) auto;gap:0.8571rem}
.profile-copy{display:none}
.criteria-row,.criteria-row:has(.criteria-range-end:not([hidden])){grid-template-columns:minmax(12.1429rem,1fr) minmax(9.2857rem,.7fr) minmax(14.2857rem,1.3fr) 2.2857rem}
.criteria-range-end:not([hidden]){grid-column:3}
.payroll-run-modes{grid-template-columns:1fr 1fr}
.integration-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.workflow-reassign-form{grid-template-columns:1fr 1fr}.workflow-reassign-copy{grid-column:1/-1}
}
@media (max-width:960px){
.global-search{display:none}
.mobile-search-button{display:grid}
.topbar{grid-template-columns:1fr auto}
body.search-open .global-search{display:flex;position:fixed;z-index:4200;top:calc(var(--topbar-h) + 0.5714rem);left:0.8571rem;right:0.8571rem;height:3.4286rem;background:#fff;border-color:var(--brand-300);box-shadow:var(--shadow-lg)}
body.search-open .global-search input{font-size:1.0714rem}
body.search-open .global-search kbd{display:none}
body.search-open .search-popover{top:3.8571rem;left:0;right:0;width:100%;transform:none;animation-name:hrms-pop}
.list-toolbar{align-items:stretch;flex-direction:column}
.list-toolbar-primary,.list-toolbar-tools{width:100%}
.list-toolbar-tools{justify-content:flex-start;padding-top:0.5714rem;border-top:1px solid var(--border-soft)}
.charts,.clearance-grid,.help-callouts,.settings-guidance-strip,.readiness-grid{grid-template-columns:1fr}
.employee-lifecycle-action{grid-template-columns:1fr auto}
.employee-lifecycle-state{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--border);padding:0 0 0.5714rem}
.employee-experience-intro{grid-template-columns:1fr auto}
.experience-derived-summary{text-align:left}
.biometric-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.criteria-row,.criteria-row:has(.criteria-range-end:not([hidden])){grid-template-columns:1fr 1fr}
.criteria-row label{grid-template-columns:1fr}
.criteria-row label>span{text-align:left}
.criteria-value,.criteria-range-end{grid-column:1/-1!important}
.criterion-remove{grid-column:2;justify-self:end}
.criteria-builder-head{align-items:flex-start}
.criteria-builder-head>div{display:block}
.criteria-builder-head>div>span{white-space:normal}
.payroll-stepper{grid-template-columns:repeat(7,10.7143rem)}
.payroll-stepper.compact{grid-template-columns:repeat(5,10rem)}
}
@media (max-width:820px){
:root{--topbar-h:4rem}
.sidebar-pin{display:none!important}
.sidebar,.sidebar-collapsed .sidebar{width:min(21.4286rem,86vw);transform:translateX(-104%);box-shadow:none}
.main,.sidebar-collapsed .main{margin-left:0}
.sidebar-collapsed .brand-row{padding:0 0.7143rem 0 1rem;justify-content:flex-start}
.sidebar-collapsed .brand{flex:1;justify-content:flex-start}
.sidebar-collapsed .brand-logo-full{display:block}
.sidebar-collapsed .brand-logo-compact{display:none}
.sidebar-collapsed :is(.nav-label,.sidebar-footer div,.nav-section-label){display:block}
.sidebar-collapsed .nav-badge{display:inline-grid}
.sidebar-collapsed .nav-tree{padding-left:0.7143rem;padding-right:0.7143rem}
.sidebar-collapsed .nav-link{justify-content:flex-start;padding:0 0.7143rem}
.sidebar-collapsed .nav-link.active::before{left:-0.7143rem}
.sidebar-collapsed .nav-link::after{display:none}
.sidebar-collapsed .nav-section-label+.nav-link{margin-top:0}
.sidebar-collapsed .sidebar-footer{justify-content:flex-start;padding:0.6429rem 0.7143rem}
.menu-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
.menu-open .mobile-overlay{display:block;position:fixed;inset:0;z-index:900;background:rgba(6,22,42,.5);backdrop-filter:blur(0.2143rem);animation:hrms-fade .15s ease both}
.content{padding:0.2857rem 0.8571rem 1.8571rem}
.topbar{padding:0 0.8571rem}
.page-title,.section-heading{flex-wrap:wrap}
.page-title .actions{width:100%;justify-content:flex-start}
.form-grid,.two-col,.cols-2,.detail-grid,.profile-summary-grid,.requirement-grid,.exit-summary-grid,.biometric-detail-grid{grid-template-columns:1fr}
.form-grid .span-2,.span-2{grid-column:1}
.detail-grid-wide{grid-template-columns:1fr}
.calendar-day{min-height:6.8571rem;padding:0.4286rem}
.help-manual-toc{columns:1}
.request-system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.workflow-decision-form{grid-template-columns:1fr}
.workflow-decision-buttons{justify-content:flex-end}
.workflow-exception-choice{grid-template-columns:1fr}
.workflow-exception-choice>p{grid-column:1}
.leave-evidence-item,.leave-exception-banner{align-items:flex-start;flex-direction:column}
.leave-exception-meta{justify-content:flex-start}
.optional-holiday-planner-head{grid-template-columns:1fr}
.optional-holiday-planner-foot{align-items:flex-start;flex-direction:column}
.login-wrap{grid-template-columns:1fr;padding:1.4286rem}
.login-brand-panel{min-height:0;gap:1rem;padding:0}
.login-brand-panel>small,.login-brand-points{display:none}
.login-brand-panel h2{font-size:1.7143rem}
.login-brand-panel p{display:none}
.column-resize-handle,.column-drag-handle{display:none!important}
.table-wrap thead th.resizable-column-head{padding-right:0.8571rem}
}
@media (max-width:720px){
.payroll-run-modes,.payroll-form-row{grid-template-columns:1fr}
.payroll-active-facts{grid-template-columns:1fr 1fr}
.payroll-focus-inline,.payroll-focus-inline>div{align-items:flex-start;flex-direction:column}
.payroll-decision-form{grid-template-columns:1fr;width:100%;padding-left:0;border-left:0}
.payroll-selectors.compact{display:grid;grid-template-columns:1fr 1fr;width:100%}
.payroll-selectors.compact label,.payroll-selectors.compact select{width:100%}
.installer-fields{padding-left:0}
.installer-fields.cols-2,.installer-fields.cols-3{grid-template-columns:1fr}
}
@media (max-width:620px){
body{font-size:0.9286rem}
.topbar-actions{gap:0.4286rem}
.topbar-actions .help-shortcut,.topbar-actions .settings-shortcut{display:none}
.page-context .context-kicker{display:none}
.page-context strong{margin-top:0;font-size:1rem}
.icon-btn,.mobile-search-button{width:2.8571rem;height:2.8571rem}
.profile-trigger{height:2.8571rem;padding:0.2143rem}
.profile-caret{display:none}
.punch-feedback{display:none}
.punch-button{padding:0 0.7143rem!important;font-size:0.8571rem!important}
.content{padding-left:0.7143rem;padding-right:0.7143rem}
.breadcrumb-row{font-size:0.7857rem}
.page-title{padding:0.8571rem;gap:0.7143rem;min-height:0}
.page-title::before{flex-basis:2.5714rem;width:2.5714rem;height:2.5714rem;border-radius:0.7143rem;align-self:flex-start}
.page-title::after{left:0.8571rem;top:0.8571rem;margin-top:0;width:2.5714rem;height:2.5714rem;-webkit-mask-size:1.2857rem 1.2857rem;mask-size:1.2857rem 1.2857rem}
.page-title>div:first-child{flex:1 1 calc(100% - 3.5714rem)}
.page-title p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:0.8214rem}
.page-title .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.2857rem,1fr));width:100%}
.page-title .actions .btn{width:100%}
h1{font-size:1.3571rem}
.welcome-card{flex-direction:column;align-items:flex-start;padding:1.1429rem}
.welcome-card h1{font-size:1.4286rem}
.welcome-card .btn{width:100%}
.list-toolbar{padding:0.5714rem}
.list-toolbar-primary{display:grid;grid-template-columns:1fr auto;gap:0.4286rem;width:100%}
.list-toolbar-primary>.search-control,.list-toolbar-primary>.quick-search-control,.list-toolbar-primary>.attendance-date-scope,.list-toolbar-primary>.toolbar-scope{grid-column:1/-1;min-width:0;max-width:none;width:100%}
.attendance-date-scope label{flex:1}
.attendance-date-scope input{width:100%;min-width:0}
.list-toolbar-tools{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.list-result-summary{display:none}
.advanced-filter-grid{grid-template-columns:1fr}
.criteria-row,.criteria-row:has(.criteria-range-end:not([hidden])){grid-template-columns:1fr}
.criteria-row>*{grid-column:1!important}
.criterion-remove{justify-self:end}
.metric-grid,.metrics-grid,.employee-dashboard-cards,.metric-strip,.kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5714rem}
.metrics-grid:has(> :only-child),.kpi-strip:has(> :only-child){grid-template-columns:1fr}
.metric{padding:0.8571rem}
.metric::before,.metric::after{width:2.1429rem;height:2.1429rem;right:0.7143rem;top:0.7143rem}
.metric>strong{font-size:1.5714rem}
.metric>small,.metric>span{padding-right:2.5714rem;font-size:0.8214rem}
.insight-card>b{font-size:1.2143rem}
.quick-grid,.self-service-grid,.document-grid,.master-grid,.setup-grid,.help-category-grid,.help-topic-grid,.criteria-grid{grid-template-columns:1fr}
.calendar-weekdays{display:none}
.calendar-grid{grid-template-columns:1fr 1fr;border-radius:var(--radius-lg)}
.calendar-day{padding:0.5rem 0.5714rem}
.calendar-shift{display:none}
.calendar-status{margin:0.2143rem 0 2px;font-size:0.8214rem}
.calendar-day{min-height:auto;border-left:1px solid var(--border)}
.calendar-day.outside-month{display:none}
.calendar-day-head{justify-content:flex-start;gap:0.5714rem}
.table-wrap{border-radius:0.7857rem}
.table-wrap thead th{height:2.4286rem;padding:0.4286rem 0.7143rem}
.table-wrap tbody td{height:2.7143rem;padding:0.4286rem 0.7143rem}
.form-card{padding:1rem 0.8571rem}
.form-intro{flex-direction:column;gap:0.5714rem}
.form-actions{position:sticky;bottom:0;z-index:70;margin-left:-0.8571rem;margin-right:-0.8571rem;padding:0.7143rem 0.8571rem;background:rgba(255,255,255,.95);backdrop-filter:blur(0.5714rem);border-top:1px solid var(--border)}
.form-actions .btn{flex:1;min-height:3rem}
.employee-workspace-label small{display:none}
.employee-form-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
.employee-form-tabs button{white-space:normal;min-height:3.7143rem}
.employee-form-tabs button>small{white-space:normal}
.employee-lifecycle-action{grid-template-columns:1fr}
.employee-lifecycle-state,.employee-lifecycle-copy,.employee-lifecycle-action>.btn{grid-column:1}
.employee-lifecycle-action>.btn{justify-self:stretch}
.employee-experience-intro,.experience-fields{grid-template-columns:1fr}
.activation-readiness-head{flex-direction:column;gap:0.4286rem}
.settings-tabs,.form-section-nav,.employee-workspace-tabs,.module-workspace.module-workspace-tabs{margin-left:-2px;margin-right:-2px}
.settings-tab,.form-section-nav a,.employee-workspace-tabs a,.module-workspace-tabs .module-workspace-link{min-height:2.8571rem}
.settings-tabs{top:calc(var(--topbar-h) + 0.2857rem)}
.integration-summary-grid,.request-system-grid,.inline-test-row{grid-template-columns:1fr}
.workflow-decision-buttons{display:grid;grid-template-columns:1fr 1fr}
.workflow-decision-buttons .btn{width:100%}
.workflow-reassign-form{grid-template-columns:1fr}
.workflow-reassign-reason{min-width:0}
.correction-flow{grid-template-columns:1fr}
.correction-flow-arrow{display:none}
.clearance-assignment select,.clearance-assignment input,.workflow-inline-field{min-width:100%}
.employee-calendar-select,.filter-date{min-width:100%;width:100%}
.help-howto-flow{grid-template-columns:1fr}
.help-topic-footer{flex-direction:column;align-items:flex-start}
.import-steps,.implementation-steps{grid-template-columns:1fr}
.actions{flex-wrap:wrap}
.actions>.btn,.actions>a{max-width:100%}
.btn{white-space:normal;text-align:center;overflow-wrap:anywhere}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr}
.login-wrap{padding:1rem}
.login-brand-panel{display:none}
.login-card{padding:1.5714rem 1.2857rem;border-radius:1.2857rem}
.login-mobile-brand{display:block}
.login-card h1{font-size:1.6429rem}
.installer-wrap{padding-top:1.5714rem}
.installer-panel{padding:1.2857rem}
.installer-hero h1{font-size:1.7143rem}
.installer-note,.installer-footer>div{display:grid}
.installer-actions .btn{width:100%}
}
@media (max-width:420px){
.metric-grid,.metrics-grid,.metric-strip{grid-template-columns:1fr}
.insight-card{padding:0.7857rem 0.8571rem}.insight-card>b{font-size:1.1429rem}
.biometric-kpis{grid-template-columns:1fr 1fr}
.page-size-control{display:none}
.pagination{justify-content:center}
.pagination a,.pagination span{min-width:2.2857rem;padding:0 0.5rem}
.employee-form-tabs{grid-template-columns:1fr}
.punch-button{max-width:6.8571rem}
}
@media (pointer:coarse){
th a,.table-wrap tbody td a,.dashboard-action-row a,.compact-list a,.calendar-link,.text-link,.alert a,.breadcrumb-row a{display:inline-block;min-height:2rem;line-height:2rem}
.table-action{width:2.4286rem;min-width:2.4286rem;height:2.4286rem}
}
/* ---- 11b Fluid scale and device refinements --------------------------- */
/* Every interface size in this stylesheet is rem-based on the root size below.
Phones, tablets and small laptops keep the 14px baseline. From 1280px the root
grows smoothly, so a 14-inch laptop (about 1280-1536 CSS px) reads comfortably
and larger monitors get proportionally larger text, controls and cards rather
than only wider empty space: about 15px at 1536, 16px at 1920, 18px at 2560. */
@media (min-width:1280px){html{font-size:clamp(14px,calc(10.4px + .297vw),19px)}}
/* Table tool buttons keep their labels on one line on every screen. */
.list-toolbar-tools>*{flex:0 0 auto}
.list-toolbar-tools .btn,.list-toolbar-tools summary.btn,.list-meta{white-space:nowrap}
/* Tablets: comfortable gutters, two-column cards where space allows. */
@media (min-width:621px) and (max-width:1279px){
.content{padding-left:1.1429rem;padding-right:1.1429rem}
}
/* Phones: wrap table tools instead of squeezing them, compact alerts. */
@media (max-width:620px){
.content{padding-left:0.7143rem;padding-right:0.7143rem}
.list-toolbar-tools{flex-wrap:wrap;overflow-x:visible;row-gap:0.4286rem}
.list-toolbar-tools .list-meta{flex:1 0 100%}
.alert{padding-top:0.6429rem;padding-bottom:0.6429rem;font-size:0.8571rem;line-height:1.4}
.table-wrap{-webkit-overflow-scrolling:touch}
}
/* Help/manual reference tables scroll inside their card on narrow screens. */
@media (max-width:820px){.help-field-table{display:block;width:100%!important;max-width:100%!important;overflow-x:auto}}
/* Touch screens: 40px controls and larger checkboxes for reliable tapping. */
@media (pointer:coarse){
:root{--control-h:2.8571rem;--control-h-sm:2.2857rem}
input[type="checkbox"],input[type="radio"]{width:1.2857rem!important;height:1.2857rem!important}
.btn.compact,.table-wrap .btn,.inline-action .btn,.form-control.decision-note{min-height:2.5714rem!important;height:auto!important}
.alert-dismiss{min-width:2.5714rem!important;min-height:2.5714rem!important}
}
@media print{html{font-size:14px}}
/* ---- 12 Print ----------------------------------------------------------- */
@media print{
body{background:#fff;color:#000;font-size:10pt}
body::before,body::after{display:none!important}
.sidebar,.topbar,.breadcrumb-row,.page-primary-actions,.list-workspace,.filter-chip-row,.pagination,.form-actions,.btn,.icon-btn,.confirm-backdrop,.actions,.list-toolbar,.help-toolbar,.inline-form,.module-workspace,.settings-tabs,.alert-dismiss,.mobile-overlay{display:none!important}
.main{margin:0!important}
.content{width:100%;max-width:none;padding:0}
#main-content>*{animation:none!important}
.page-title,.card,.panel,.table-wrap,.form-card,.metric,.insight-card,.quick-card{border-color:#bbb!important;box-shadow:none!important;transform:none!important}
.page-title{background:#fff;padding:0.4286rem 0;border:0;border-bottom:1px solid #bbb}
.page-title::before,.page-title::after,.metric::before,.metric::after,.alert::before{display:none}
.welcome-card{background:#fff!important;color:#000;box-shadow:none;border:1px solid #bbb}
.welcome-card *{color:#000!important}
.table-wrap{overflow:visible}
.table-wrap table,table.entity-table,table.payroll-data-table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed;font-size:8pt}
.table-wrap th,.table-wrap td{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;padding:0.2143rem 0.2857rem}
.table-wrap thead th{position:static;background:#eee;color:#000}
.sticky-action{position:static!important}
.status,.status[data-status]{color:#000!important;background:#fff!important;border-color:#aaa!important}
.activation-requirement.missing,.activation-requirement.complete{background:#fff}
}
.table-wrap .empty-state{position:sticky;left:0;width:calc(100vw - 3.4286rem);max-width:100%}
@media (max-width:620px){
.dashboard-action-row{flex-direction:column;align-items:stretch;gap:0.4286rem}
.dashboard-action-row p{white-space:normal}
.dashboard-action-row .actions{justify-content:flex-start}
.dashboard-action-row .actions .btn{white-space:nowrap}
}
/* Searchable single-reference select */
.native-search-select-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;left:0!important;top:0!important;overflow:hidden!important}
.search-select-wrap{position:relative;min-width:0;width:100%}
.search-select-trigger{width:100%;min-height:var(--control-h);padding:0.4286rem 2.4286rem 0.4286rem 0.7143rem;border:1px solid var(--border);border-radius:0.5714rem;background:#fff;color:var(--text);text-align:left;font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative}
.search-select-trigger::after{content:"";position:absolute;right:0.7857rem;top:50%;width:0.5rem;height:0.5rem;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-65%) rotate(45deg)}
.search-select-wrap.is-open .search-select-trigger,.search-select-trigger:focus{outline:none;border-color:var(--brand-300,#8ab4e6);box-shadow:0 0 0 0.2143rem rgba(45,111,177,.12)}
.search-select-panel{position:fixed;z-index:1200;padding:0.5714rem;border:1px solid var(--border);border-radius:0.7143rem;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden}
.search-select-input{width:100%;min-height:2.5714rem;margin:0 0 0.5rem;padding:0.4286rem 0.6429rem;border:1px solid var(--border);border-radius:0.5rem;background:#fff;color:var(--text);font:inherit}
.search-select-options{max-height:20rem;overflow:auto;display:grid;gap:2px}
.search-select-option{width:100%;padding:0.5rem 0.6429rem;border:0;border-radius:0.5rem;background:transparent;color:var(--text);text-align:left;font:inherit;cursor:pointer;white-space:normal}
.search-select-option:hover,.search-select-option:focus{outline:none;background:var(--surface-2)}
.search-select-option.is-selected{background:var(--brand-50);color:var(--brand-700);font-weight:680}
.search-select-option:disabled{opacity:.45;cursor:not-allowed}
.search-select-empty{padding:0.8571rem 0.6429rem;color:var(--muted);font-size:0.8571rem;text-align:center}
.table-select.search-select+ .search-select-wrap{min-width:12.8571rem}
/* Holiday Calendar / Optional Holiday Choices remain one engine with two clear views. */
.module-tabs{display:flex;align-items:center;gap:0.2857rem;margin:-2px 0 1rem;padding:0.2857rem;border:1px solid var(--border-soft);border-radius:0.7143rem;background:var(--surface-2);width:max-content;max-width:100%;overflow:auto}
.module-tab{display:inline-flex;align-items:center;min-height:2.2857rem;padding:0.3571rem 0.7143rem;border-radius:0.5rem;color:var(--muted);font-size:0.8571rem;font-weight:680;text-decoration:none;white-space:nowrap}
.module-tab:hover{background:#fff;color:var(--text)}
.module-tab.active{background:#fff;color:var(--brand-700);box-shadow:var(--shadow-xs)}
/* Calendar work-on-off-day outcomes */
.calendar-day.status-weekly-off-worked-full-day,.calendar-day.status-holiday-worked-full-day,.calendar-day.status-optional-holiday-worked-full-day{background:#f5fcf7}
.calendar-day.status-weekly-off-worked-full-day::before,.calendar-day.status-holiday-worked-full-day::before,.calendar-day.status-optional-holiday-worked-full-day::before{background:var(--success-solid)}
.calendar-day.status-weekly-off-worked-half-day,.calendar-day.status-holiday-worked-half-day,.calendar-day.status-optional-holiday-worked-half-day,.calendar-day.status-weekly-off-work-in-progress,.calendar-day.status-holiday-work-in-progress,.calendar-day.status-optional-holiday-work-in-progress{background:#fffaf0}
.calendar-day.status-weekly-off-worked-half-day::before,.calendar-day.status-holiday-worked-half-day::before,.calendar-day.status-optional-holiday-worked-half-day::before,.calendar-day.status-weekly-off-work-in-progress::before,.calendar-day.status-holiday-work-in-progress::before,.calendar-day.status-optional-holiday-work-in-progress::before{background:var(--warning-solid)}
.calendar-day.status-weekly-off-worked-needs-regularization,.calendar-day.status-holiday-worked-needs-regularization,.calendar-day.status-optional-holiday-worked-needs-regularization{background:#fff6f5}
.calendar-day.status-weekly-off-worked-needs-regularization::before,.calendar-day.status-holiday-worked-needs-regularization::before,.calendar-day.status-optional-holiday-worked-needs-regularization::before{background:var(--danger-solid)}
/* Holiday/Weekly-Off worked outcomes use the same visual language everywhere. */
.status[data-status="Holiday Half Day"]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning)}
.status[data-status="Holiday Half Day"]::before{background:var(--warning-solid);box-shadow:0 0 0 2px rgba(230,155,18,.16)}
.status[data-status="Holiday Needs Regularization"]{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.status[data-status="Holiday Needs Regularization"]::before{background:var(--danger-solid)}
.calendar-status[data-status$="Worked – Full Day"]{color:var(--success)}
.calendar-status[data-status$="Worked – Half Day"],.calendar-status[data-status$="Work In Progress"]{color:var(--warning)}
.calendar-status[data-status$="Worked – Needs Regularization"]{color:var(--danger)}
/* ===== Reports & Insights workspace =====
Report pages as tabs, a filter pane beside the canvas, KPI cards with
sparklines and a dependency-free SVG visual engine (assets/reports.js). */
.analytics-page{--rp-gap:0.8571rem;max-width:134.2857rem;margin:0 auto;position:relative}
.analytics-page-title{align-items:center;margin-bottom:0.7143rem}
.analytics-page-title p{max-width:60.7143rem}
.analytics-page-actions{display:flex;gap:0.5714rem;align-items:center;flex-wrap:wrap}
.analytics-page-actions .ui-icon{width:1.0714rem;height:1.0714rem}
.analytics-filter-toggle[aria-expanded="true"]{background:var(--workspace-soft);border-color:var(--workspace-border);color:var(--workspace-accent)}
.analytics-filter-count{min-width:1.3571rem;height:1.3571rem;padding:0 0.3571rem;border-radius:0.7143rem;display:inline-grid;place-items:center;background:var(--workspace-grad);color:#fff;font-size:0.75rem;font-weight:760}
/* Report bar: page tabs + applied filters */
.analytics-reportbar{position:sticky;top:calc(var(--topbar-h) + 0.4286rem);z-index:120;display:flex;flex-direction:column;gap:0.5rem;margin:0 0 var(--rp-gap);padding:0.4286rem;border:1px solid var(--border);border-radius:1.1429rem;background:rgba(255,255,255,.9);backdrop-filter:blur(1rem) saturate(1.3);-webkit-backdrop-filter:blur(1rem) saturate(1.3);box-shadow:0 0.8571rem 2rem -1.5714rem rgba(15,34,58,.45)}
.analytics-section-nav{display:flex;gap:0.2857rem;overflow-x:auto;scrollbar-width:none}
.analytics-section-nav::-webkit-scrollbar{display:none}
.analytics-section-nav a{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:0.5rem;min-height:2.5714rem;padding:0 0.9286rem 0 0.7143rem;border-radius:0.7143rem;color:#4b5f75;font-size:0.8929rem;font-weight:650;white-space:nowrap;transition:background var(--transition),color var(--transition),box-shadow var(--transition)}
.analytics-section-nav a .ui-icon{width:1.1429rem;height:1.1429rem;color:#8093a8}
.analytics-section-nav a:hover{background:var(--surface-2);color:var(--text-strong)}
.analytics-section-nav a.active{background:var(--workspace-grad);color:#fff;box-shadow:0 0.5714rem 1.2857rem -0.7143rem var(--workspace-accent)}
.analytics-section-nav a.active .ui-icon{color:#fff}
.analytics-section-nav .analytics-tab-all{margin-left:auto}
.analytics-applied{display:flex;align-items:center;gap:0.4286rem;flex-wrap:wrap;padding:0 0.2857rem 2px}
.analytics-applied-range{display:inline-flex;align-items:center;gap:0.4286rem;min-height:1.8571rem;padding:0 0.7143rem;border-radius:71.3571rem;background:var(--surface-3);color:#334a61;font-size:0.8214rem;font-weight:650}
.analytics-applied-range .ui-icon{width:1rem;height:1rem;color:var(--workspace-accent)}
.analytics-applied-range small{color:var(--muted);font-weight:560}
.analytics-chip{display:inline-flex;align-items:center;gap:0.3571rem;min-height:1.8571rem;padding:0 0.4286rem 0 0.7143rem;border:1px solid var(--workspace-border);border-radius:71.3571rem;background:var(--workspace-soft);color:var(--workspace-accent);font-size:0.8214rem;font-weight:560;transition:background var(--transition),border-color var(--transition)}
.analytics-chip b{font-weight:720}
.analytics-chip>span[aria-hidden]{width:1.2143rem;height:1.2143rem;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.8);font-size:0.9286rem;line-height:1}
.analytics-chip:hover{border-color:var(--workspace-accent);color:var(--workspace-accent)}
.analytics-chip-clear{padding-right:0.7143rem;background:#fff;border-color:var(--border);color:var(--muted)}
/* Canvas + filter pane */
.analytics-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--rp-gap);align-items:start}
@media (min-width:1200px){.analytics-page.filters-open .analytics-workspace{grid-template-columns:minmax(0,1fr) 21.4286rem}.analytics-page.filters-collapsed .analytics-filter-pane{display:none}}
.analytics-canvas{min-width:0}
.analytics-filter-pane{position:sticky;top:calc(var(--topbar-h) + 7.4286rem);max-height:calc(100vh - var(--topbar-h) - 8.2857rem);overflow:auto;scrollbar-width:thin;border-radius:1.2857rem}
.analytics-slicer{display:flex;flex-direction:column;gap:0.8571rem;padding:1rem;border:1px solid var(--border);border-radius:1.2857rem;background:linear-gradient(180deg,#fff,#fbfcff);box-shadow:var(--shadow-card)}
.analytics-slicer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:0.5714rem}
.analytics-slicer-head>div{display:grid;gap:2px;min-width:0}
.analytics-slicer-head b{display:inline-flex;align-items:center;gap:0.4286rem;font-size:0.9643rem;color:var(--text-strong)}
.analytics-slicer-head b .ui-icon{width:1.0714rem;height:1.0714rem;color:var(--workspace-accent)}
.analytics-slicer-head span{font-size:0.8214rem;color:var(--muted)}
.analytics-pane-close{width:2.1429rem;height:2.1429rem}
.analytics-slicer-group{display:grid;gap:0.5714rem;padding-top:0.7143rem;border-top:1px solid var(--border-soft)}
.analytics-slicer-group-title{font-size:0.75rem;font-weight:780;letter-spacing:.09em;text-transform:uppercase;color:var(--workspace-accent)}
.analytics-slicer-grid{display:grid;grid-template-columns:1fr;gap:0.5714rem}
.analytics-slicer-dates{grid-template-columns:1fr 1fr}
.analytics-slicer-grid label,.analytics-slicer-single,.analytics-extract-filter label{display:grid;gap:0.2857rem;min-width:0}
.analytics-slicer-grid label>span,.analytics-slicer-single>span,.analytics-extract-filter label>span{display:flex;align-items:center;gap:0.3571rem;font-size:0.75rem;font-weight:720;color:#496076;text-transform:uppercase;letter-spacing:.045em}
.analytics-slicer .form-control{min-width:0;height:2.5714rem}
.analytics-hint{width:1.0714rem;height:1.0714rem;display:inline-grid;place-items:center;border-radius:50%;background:var(--surface-3);color:var(--muted);font:italic 700 0.7143rem/1 Georgia,serif;text-transform:none;cursor:help}
.analytics-quick-ranges{display:flex;gap:0.3571rem;flex-wrap:wrap}
.analytics-quick-ranges a{padding:0.3571rem 0.7143rem;border:1px solid var(--border);border-radius:71.3571rem;background:#fff;font-size:0.7857rem;font-weight:680;color:#425a71;transition:all var(--transition)}
.analytics-quick-ranges a:hover{border-color:var(--workspace-border);background:var(--workspace-soft);color:var(--workspace-accent)}
.analytics-quick-ranges a.active{border-color:transparent;background:var(--workspace-grad);color:#fff;box-shadow:0 0.4286rem 1rem -0.5714rem var(--workspace-accent)}
.analytics-auto-apply{display:flex;align-items:center;gap:0.5714rem;font-size:0.8571rem;color:var(--muted);cursor:pointer}
.analytics-auto-apply input{width:1.1429rem;height:1.1429rem;accent-color:var(--workspace-accent)}
.analytics-slicer-actions{position:sticky;bottom:-1rem;margin:0 -1rem -1rem;padding:0.7143rem 1rem 1rem;display:grid;grid-template-columns:1fr auto;gap:0.5714rem;background:linear-gradient(180deg,rgba(255,255,255,.85),#fff 35%);border-top:1px solid var(--border-soft)}
@media (max-width:1199.98px){
.analytics-filter-pane{position:fixed;z-index:4200;top:0;right:0;bottom:0;width:min(25.7143rem,92vw);max-height:none;border-radius:0;clip-path:inset(0 0 0 100%);visibility:hidden;transition:clip-path .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s;box-shadow:var(--shadow-lg)}
.analytics-filter-pane .analytics-slicer{min-height:100%;border-radius:0;border:0}
.analytics-page.filters-open .analytics-filter-pane{clip-path:inset(0);visibility:visible;transition:clip-path .28s cubic-bezier(.2,.8,.2,1)}
body.analytics-drawer-open::after{content:"";position:fixed;inset:0;z-index:4100;background:rgba(8,22,37,.45);backdrop-filter:blur(2px)}
}
@media (min-width:1200px){.analytics-pane-close{display:none}}
/* Report pages */
@media screen{.analytics-section.is-inactive-page{display:none}}
.analytics-section{margin-bottom:1.5714rem;scroll-margin-top:calc(var(--topbar-h) + 7.8571rem)}
.analytics-page[data-report-view]:not([data-report-view="all"]) .analytics-section{animation:hrms-rise .32s cubic-bezier(.2,.8,.2,1) both}
.analytics-section>.section-heading{margin:0.2857rem 0 0.7143rem}
.analytics-section>.section-heading p{max-width:64.2857rem}
.analytics-notice{margin-bottom:0.7143rem}
/* KPI cards */
.analytics-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.2143rem,1fr));gap:0.7143rem;margin-bottom:var(--rp-gap)}
.analytics-kpi{--kpi:#2563eb;--kpi-soft:#eff6ff;position:relative;display:flex;flex-direction:column;min-height:8.4286rem;padding:0.9286rem 1rem 0.8571rem;border:1px solid var(--border);border-radius:1.1429rem;background:radial-gradient(120% 90% at 100% 0%,var(--kpi-soft) 0%,#fff 58%);box-shadow:var(--shadow-xs);color:var(--text);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.analytics-kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:0.2143rem;background:linear-gradient(90deg,var(--kpi),color-mix(in srgb,var(--kpi) 40%,#fff))}
a.analytics-kpi:hover,.analytics-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--kpi) 30%,var(--border));box-shadow:0 1rem 2rem -1.2857rem color-mix(in srgb,var(--kpi) 60%,transparent);color:var(--text)}
.analytics-kpi-icon{position:absolute;right:0.8571rem;top:0.8571rem;width:2.2857rem;height:2.2857rem;display:grid;place-items:center;border-radius:0.7143rem;background:#fff;color:var(--kpi);box-shadow:0 0 0 1px color-mix(in srgb,var(--kpi) 18%,transparent),0 0.4286rem 1rem -0.5714rem var(--kpi)}
.analytics-kpi-icon .ui-icon{width:1.2143rem;height:1.2143rem}
.analytics-kpi-label{display:block;padding-right:2.8571rem;font-size:0.75rem;font-weight:780;text-transform:uppercase;letter-spacing:.06em;color:#52697f}
.analytics-kpi strong{display:block;margin-top:0.4286rem;font-size:1.7857rem;line-height:1.05;color:var(--text-strong);font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-weight:780}
.analytics-kpi small{display:block;margin-top:0.2143rem;font-size:0.7857rem;color:var(--muted);line-height:1.3}
.analytics-kpi strong.is-long{font-size:1.3571rem;padding-right:2.4286rem;overflow-wrap:anywhere}
.analytics-kpi-delta{white-space:nowrap;display:inline-flex;align-items:center;gap:0.2857rem;align-self:flex-start;margin-top:0.4286rem;padding:2px 0.5rem;border-radius:71.3571rem;font-size:0.75rem;font-weight:760;font-style:normal}
.analytics-kpi-delta i{font-style:normal;font-weight:560;opacity:.8}
.analytics-kpi-delta.is-good{background:#dcfce7;color:#15803d}.analytics-kpi-delta.is-bad{background:#fee2e2;color:#b91c1c}.analytics-kpi-delta.is-flat{background:var(--surface-3);color:var(--muted)}
.analytics-kpi-spark{display:block;margin-top:auto;padding-top:0.5714rem;color:var(--kpi);opacity:.95;pointer-events:none}
.analytics-kpi-spark svg{display:block;width:100%;height:2rem}
.analytics-kpi.tone-blue{--kpi:#2563eb;--kpi-soft:#eff6ff}.analytics-kpi.tone-green{--kpi:#059669;--kpi-soft:#ecfdf5}.analytics-kpi.tone-violet{--kpi:#7c3aed;--kpi-soft:#f5f3ff}.analytics-kpi.tone-amber{--kpi:#d97706;--kpi-soft:#fffbeb}.analytics-kpi.tone-red{--kpi:#dc2626;--kpi-soft:#fef2f2}.analytics-kpi.tone-teal{--kpi:#0d9488;--kpi-soft:#f0fdfa}.analytics-kpi.tone-slate{--kpi:#475569;--kpi-soft:#f1f5f9}
/* Visual cards */
.analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--rp-gap)}
.analytics-card-wide{grid-column:span 2}
.analytics-card-full{grid-column:1/-1}
.analytics-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:1.2857rem;background:#fff;box-shadow:0 0.7143rem 1.8571rem -1.5714rem rgba(12,36,65,.45);overflow:hidden;transition:box-shadow var(--transition),border-color var(--transition)}
.analytics-card:hover{border-color:#c9d8e7;box-shadow:0 1.2857rem 2.5714rem -1.7143rem rgba(12,36,65,.5)}
.analytics-card-head{display:flex;justify-content:space-between;gap:0.7143rem;align-items:flex-start;padding:0.9286rem 0.8571rem 0.5714rem 1.1429rem}
.analytics-card-head>div:first-child{min-width:0}
.analytics-card-head h3{margin:0;color:var(--text-strong);font-size:0.9643rem;letter-spacing:-.01em}
.analytics-card-head p{margin:2px 0 0;color:var(--muted);font-size:0.8214rem;line-height:1.35}
.analytics-card-actions{display:flex;gap:0.2143rem;flex:0 0 auto}
.analytics-card-menu-trigger{min-height:2.1429rem;padding:0 0.5714rem 0 0.7143rem;gap:0.3571rem;color:#52687e;background:#fff}
.analytics-card-menu-trigger .ui-icon{width:1rem;height:1rem}
.analytics-card-menu-trigger[aria-expanded="true"]{background:var(--workspace-soft);border-color:var(--workspace-border);color:var(--workspace-accent)}
.analytics-chart{position:relative;flex:1;min-height:17.8571rem;padding:0.2857rem 1rem 0.8571rem;overflow:hidden}
.analytics-svg{display:block;max-width:none;overflow:visible}
.analytics-svg-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:0.2857rem;scrollbar-width:thin}
.analytics-svg-mark{transition:opacity .15s ease,filter .15s ease,transform .18s ease}
.analytics-svg .is-drillable,.analytics-band.is-drillable{cursor:pointer}
.analytics-svg:hover .analytics-svg-mark{opacity:.55}
.analytics-svg .analytics-svg-mark:hover,.analytics-svg .analytics-svg-mark:focus{opacity:1;filter:brightness(1.06) drop-shadow(0 0.2143rem 0.3571rem rgba(15,34,58,.18));outline:none}
.analytics-svg:has(.analytics-band:hover) .analytics-svg-mark{opacity:1}
.analytics-band:hover{fill:rgba(37,99,235,.05)}
.analytics-band:focus{outline:none;fill:rgba(37,99,235,.08)}
.analytics-legend{display:flex;gap:0.2857rem 0.4286rem;flex-wrap:wrap;align-items:center;margin-top:0.4286rem}
.analytics-legend-item{display:inline-flex;align-items:center;gap:0.4286rem;min-height:1.7143rem;padding:0 0.6429rem;border:1px solid var(--border);border-radius:71.3571rem;background:#fff;color:#44596e;font-size:0.7857rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.analytics-legend-item:hover{border-color:var(--border-strong);background:var(--surface-2)}
.analytics-legend-item i{width:0.6429rem;height:0.6429rem;border-radius:0.2143rem;background:var(--legend)}
.analytics-legend-item[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
/* Donut */
.analytics-donut-layout{display:flex;align-items:center;justify-content:center;gap:1.1429rem 1.5714rem;flex-wrap:wrap;min-height:16.4286rem}
.analytics-donut-seg{transform-origin:center;transform-box:view-box}
.analytics-donut-seg:hover,.analytics-donut-seg:focus,.analytics-donut-seg.is-hot{transform:translate(var(--dx),var(--dy))}
.analytics-svg:has(.analytics-donut-seg.is-hot) .analytics-donut-seg:not(.is-hot){opacity:.45}
.analytics-donut-legend{display:grid;gap:2px;min-width:0;flex:1 1 12.8571rem;max-width:22.8571rem;max-height:16.4286rem;overflow:auto;scrollbar-width:thin}
.analytics-donut-item{display:grid;grid-template-columns:0.7143rem minmax(0,1fr) auto 3.1429rem;align-items:center;gap:0.5714rem;width:100%;padding:0.3571rem 0.5714rem;border:0;border-radius:0.5714rem;background:transparent;color:var(--text);font-size:0.8214rem;text-align:left}
button.analytics-donut-item{cursor:pointer}
.analytics-donut-item:hover,.analytics-donut-item.is-active{background:var(--surface-2)}
.analytics-donut-item i{width:0.7143rem;height:0.7143rem;border-radius:0.2143rem}
.analytics-donut-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155}
.analytics-donut-item b{font-variant-numeric:tabular-nums;color:var(--text-strong)}
.analytics-donut-item em{font-style:normal;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
/* Gauge */
.analytics-chart:has(.analytics-gauge){display:flex;flex-direction:column;align-items:center;justify-content:center}
.analytics-gauge-value{stroke-dasharray:var(--len) 2000;animation:rp-gauge 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rp-gauge{from{stroke-dasharray:0 2000}}
.analytics-gauge-note{display:flex;gap:0.4286rem;flex-wrap:wrap;justify-content:center;margin-top:0.2857rem}
.analytics-gauge-note span{display:inline-flex;align-items:center;gap:0.3571rem;padding:2px 0.5714rem;border-radius:71.3571rem;font-size:0.75rem;font-weight:650}
.analytics-gauge-note .is-red{background:#fee2e2;color:#b91c1c}.analytics-gauge-note .is-amber{background:#fef3c7;color:#b45309}.analytics-gauge-note .is-green{background:#d1fae5;color:#047857}
/* Heat map matrix */
.analytics-matrix-wrap{max-height:25.7143rem;border:1px solid var(--border-soft);border-radius:0.8571rem}
.analytics-matrix{width:100%;font-size:0.8214rem}
.analytics-matrix th,.analytics-matrix td{padding:0.5rem 0.7143rem;border-bottom:1px solid #fff;border-right:1px solid #fff;white-space:nowrap}
.analytics-matrix thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);font-size:0.75rem;text-transform:uppercase;letter-spacing:.04em;color:#475569}
.analytics-matrix thead th i{display:inline-block;width:0.5714rem;height:0.5714rem;margin-right:0.3571rem;border-radius:2px;vertical-align:0}
.analytics-matrix tbody th{text-align:left;font-weight:650;color:#1e293b;background:#fff}
.analytics-matrix td{font-variant-numeric:tabular-nums;font-weight:600;transition:filter .15s}
.analytics-matrix td:hover{filter:brightness(.94)}
.analytics-matrix-total{background:var(--surface-2);color:var(--text-strong)}
.analytics-matrix tfoot th,.analytics-matrix tfoot td{position:sticky;bottom:0;background:var(--surface-3);font-weight:760;color:var(--text-strong)}
.analytics-matrix-drill{padding:0;border:0;background:none;color:var(--brand-600);font:inherit;font-weight:650;cursor:pointer;text-align:left}
.analytics-matrix-drill:hover{text-decoration:underline}
/* Empty */
.analytics-chart-empty{min-height:15.7143rem;display:grid;place-content:center;justify-items:center;gap:0.2143rem;text-align:center;color:var(--muted)}
.analytics-chart-empty svg{width:3.2857rem;height:3.2857rem;fill:#dbe4ee}
.analytics-chart-empty b{margin-top:0.2857rem;color:#52697f}
/* Tooltip */
.analytics-tooltip{position:fixed;z-index:6000;min-width:10.7143rem;max-width:18.5714rem;padding:0.5714rem 0.7143rem;border-radius:0.7143rem;background:rgba(15,23,42,.94);box-shadow:0 1rem 2.1429rem -0.7143rem rgba(2,8,23,.5);color:#e2e8f0;font-size:0.8214rem;line-height:1.4;pointer-events:none;backdrop-filter:blur(0.4286rem)}
.analytics-tooltip>b{display:block;margin-bottom:0.2857rem;color:#fff;font-size:0.8571rem}
.analytics-tooltip .tt-row{display:grid;grid-template-columns:0.6429rem minmax(0,1fr) auto;align-items:center;gap:0.5rem;padding:1px 0}
.analytics-tooltip .tt-row i{width:0.6429rem;height:0.6429rem;border-radius:0.2143rem}
.analytics-tooltip .tt-row b{color:#fff;font-variant-numeric:tabular-nums}
.analytics-tooltip .tt-hint{margin-top:0.3571rem;padding-top:0.3571rem;border-top:1px solid rgba(255,255,255,.14);color:#93c5fd;font-size:0.75rem}
/* Visual menu */
.analytics-menu{position:fixed;z-index:5200;width:15.7143rem;max-height:min(32.8571rem,80vh);overflow:auto;padding:0.4286rem;border:1px solid var(--border);border-radius:1rem;background:#fff;box-shadow:var(--shadow-lg);animation:hrms-pop .16s ease both}
.analytics-menu-group{display:grid;gap:1px;padding:0.2857rem 0}
.analytics-menu-group+.analytics-menu-group{border-top:1px solid var(--border-soft)}
.analytics-menu-group>span{padding:0.2857rem 0.5714rem 0.2143rem;font-size:0.7143rem;font-weight:780;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.analytics-menu-group button{display:grid;grid-template-columns:1.2857rem 1fr;align-items:center;gap:0.2857rem;min-height:2.2857rem;padding:0 0.5714rem;border:0;border-radius:0.5714rem;background:transparent;color:var(--text);font-size:0.8929rem;text-align:left}
.analytics-menu-group button i{font-style:normal;color:var(--workspace-accent);font-weight:800}
.analytics-menu-group button:hover,.analytics-menu-group button:focus-visible{background:var(--workspace-soft);color:var(--workspace-accent);outline:none}
.analytics-menu-group button[aria-checked="true"]{font-weight:680}
/* Data tables */
.analytics-data-table{padding:0 1rem 1rem}
.analytics-data-table .table-wrap,.analytics-table-view .table-wrap{max-height:18.5714rem;border:1px solid var(--border);border-radius:0.8571rem}
.analytics-table-view table,.analytics-data-table table{font-size:0.8214rem}
.analytics-table-view tfoot th,.analytics-table-view tfoot td{position:sticky;bottom:0;background:var(--surface-3);font-weight:760}
.analytics-table-tools{display:flex;justify-content:flex-end;margin:0 0 0.5714rem}
.analytics-table-search{display:flex;align-items:center;gap:0.4286rem;width:min(22.8571rem,100%);height:2.4286rem;padding:0 0.7143rem;border:1px solid var(--border);border-radius:0.7143rem;background:#fff}
.analytics-table-search:focus-within{border-color:var(--brand-300);box-shadow:var(--ring)}
.analytics-table-search .ui-icon{width:1.0714rem;height:1.0714rem;color:var(--faint)}
.analytics-table-search input{flex:1;min-width:0;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;height:2.2857rem;padding:0}
th.is-sortable{cursor:pointer;user-select:none}
th.is-sortable::after{content:"↕";margin-left:0.3571rem;color:#b6c3d1;font-size:0.7143rem}
th.is-sortable[aria-sort="ascending"]::after{content:"↑";color:var(--workspace-accent)}
th.is-sortable[aria-sort="descending"]::after{content:"↓";color:var(--workspace-accent)}
/* Extracts */
.analytics-download-strip{display:flex;align-items:center;justify-content:space-between;gap:0.8571rem;margin-top:0.7143rem;margin-bottom:0.7143rem;padding:0.7857rem 1rem}
.analytics-download-strip>div:first-child{display:grid;gap:2px;min-width:0}
.analytics-download-strip b{color:var(--text-strong);font-size:0.8929rem}
.analytics-download-strip span{color:var(--muted);font-size:0.7857rem}
.analytics-download-strip-actions{display:flex;align-items:center;justify-content:flex-end;gap:0.4286rem;flex-wrap:wrap}
.analytics-export-group{padding:1rem;margin-bottom:0.8571rem}
.analytics-export-group-head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:0.7857rem}
.analytics-export-group-head h3{margin:0.1429rem 0 0;font-size:1rem;color:var(--text-strong)}
.analytics-export-group-head p{margin:0.2143rem 0 0;color:var(--muted);font-size:0.8214rem}
.analytics-export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.7143rem,1fr));gap:0.5714rem}
.analytics-export-card{min-width:0;display:grid;grid-template-columns:2.1429rem minmax(0,1fr);grid-template-areas:"icon title" "icon note" "icon action";column-gap:0.7143rem;row-gap:0.1429rem;padding:0.7857rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;color:var(--text);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.analytics-export-card:hover{border-color:var(--workspace-border);box-shadow:var(--shadow-xs);transform:translateY(-1px);color:var(--text)}
.analytics-export-card>span{grid-area:icon;width:2.1429rem;height:2.1429rem;display:grid;place-items:center;border-radius:0.6429rem;background:var(--workspace-soft);color:var(--workspace-accent)}
.analytics-export-card>span .ui-icon{width:1.0714rem;height:1.0714rem}
.analytics-export-card>b{grid-area:title;color:var(--text-strong);font-size:0.8571rem}
.analytics-export-card>small{grid-area:note;color:var(--muted);line-height:1.35;font-size:0.7857rem}
.analytics-export-card>em{grid-area:action;display:inline-flex;align-items:center;gap:0.2857rem;margin-top:0.2857rem;color:var(--workspace-accent);font-style:normal;font-size:0.7857rem;font-weight:700}
.analytics-export-card>em .ui-icon{width:0.9286rem;height:0.9286rem}
.analytics-extract-toolbar{padding:0;margin-bottom:0.7143rem}
.analytics-extract-filter{display:flex;align-items:end;gap:0.5714rem;flex-wrap:wrap}
.analytics-extract-filter label{min-width:13.5714rem}
.analytics-extract-filter .form-control{height:2.5714rem}
.analytics-detail{padding:0;margin-bottom:0.7143rem;overflow:hidden}
.analytics-detail>summary{cursor:pointer;display:flex;justify-content:space-between;gap:0.8571rem;padding:0.8571rem 1.1429rem;font-size:0.8929rem;font-weight:750;color:var(--text-strong);background:linear-gradient(180deg,#fff,#f9fbfd);list-style:none}
.analytics-detail>summary::-webkit-details-marker{display:none}
.analytics-detail>summary::before{content:"+";width:1.4286rem;height:1.4286rem;display:inline-grid;place-items:center;margin-right:0.5714rem;border-radius:0.4286rem;background:var(--workspace-soft);color:var(--workspace-accent);font-weight:800}
.analytics-detail[open]>summary::before{content:"−"}
.analytics-detail>summary>span{margin-left:auto;color:var(--muted);font-weight:600}
.analytics-detail>.analytics-table-tools,.analytics-detail>.table-wrap,.analytics-detail>.analytics-table-footer{margin:0 1rem 0.8571rem}
.analytics-detail>.table-wrap{max-height:37.1429rem}
/* Focus mode */
.analytics-focus{position:fixed;z-index:5000;inset:0;padding:1.5714rem;background:rgba(8,22,37,.66);backdrop-filter:blur(0.5714rem);display:grid;place-items:center}
.analytics-focus[hidden]{display:none}
.analytics-focus-dialog{width:min(105.7143rem,96vw);height:min(64.2857rem,94vh);display:grid;grid-template-rows:auto minmax(22.8571rem,1fr) minmax(8.5714rem,34%);overflow:hidden;border-radius:1.5714rem;background:#fff;box-shadow:0 2.8571rem 6.4286rem -2.1429rem rgba(0,0,0,.55);animation:hrms-pop .2s ease both}
.analytics-focus-dialog>header{display:flex;justify-content:space-between;gap:0.8571rem;padding:1.1429rem 1.4286rem 0.7143rem;border-bottom:1px solid var(--border-soft)}
.analytics-focus-dialog>header h2{margin:0;font-size:1.2143rem}
.analytics-focus-dialog>header p{margin:0.2143rem 0 0;font-size:0.8571rem;color:var(--muted)}
.analytics-focus-chart{position:relative;min-height:0;padding:0.8571rem 1.4286rem;overflow:auto}
.analytics-focus-table{min-height:0;padding:0.7143rem 1.4286rem 1.2857rem;overflow:auto;border-top:1px solid var(--border-soft);background:var(--surface-2)}
.analytics-focus-table .table-wrap{max-height:none}
body.analytics-focus-open{overflow:hidden}
/* Refreshing overlay */
.analytics-refreshing{position:fixed;left:50%;bottom:2rem;z-index:5100;display:flex;align-items:center;gap:0.7143rem;padding:0.7143rem 1.1429rem;border-radius:71.3571rem;background:rgba(15,23,42,.92);color:#fff;font-size:0.8929rem;box-shadow:var(--shadow-lg);transform:translateX(-50%);animation:hrms-pop .18s ease both}
.analytics-refreshing[hidden]{display:none}
.analytics-spinner{width:1.1429rem;height:1.1429rem;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:rp-spin .7s linear infinite}
@keyframes rp-spin{to{transform:rotate(360deg)}}
.analytics-page:has(.analytics-refreshing:not([hidden])) .analytics-canvas{opacity:.55;filter:saturate(.6);transition:opacity .2s,filter .2s}
@media (max-width:1500px){.analytics-page.filters-open .analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-page.filters-open .analytics-card-wide{grid-column:1/-1}}
@media (max-width:1180px){.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-card-wide{grid-column:1/-1}}
@media (max-width:760px){
.analytics-page-title{flex-direction:column;align-items:stretch}
.analytics-page-actions{width:100%}
.analytics-page-actions .btn{flex:1 1 auto;justify-content:center}
.analytics-reportbar{top:calc(var(--topbar-h) + 0.2857rem);border-radius:1rem}
.analytics-section-nav a span{display:none}
.analytics-section-nav a{padding:0 0.7857rem}
.analytics-section-nav a.active span{display:inline}
.analytics-grid{grid-template-columns:1fr}
.analytics-card-wide,.analytics-card-full{grid-column:auto}
.analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5714rem}
.analytics-kpi{min-height:8rem;padding:0.7857rem 0.8571rem}
.analytics-kpi strong{font-size:1.5rem}
.analytics-chart{padding-left:0.5714rem;padding-right:0.5714rem}
.analytics-focus{padding:0}
.analytics-focus-dialog{width:100vw;height:100vh;border-radius:0}
.analytics-extract-filter label{min-width:0;flex:1 1 100%}
.analytics-card-menu-trigger span{display:none}
.analytics-card-menu-trigger{width:2.2857rem;padding:0;justify-content:center}
.analytics-download-strip{align-items:stretch;flex-direction:column}
.analytics-download-strip-actions{justify-content:flex-start}
.analytics-download-strip-actions .btn{flex:1 1 auto}
.analytics-export-grid{grid-template-columns:1fr}
.analytics-table-footer{align-items:flex-start;gap:0.5714rem}
.analytics-table-footer>.actions{width:100%;justify-content:space-between}
}
@media (max-width:380px){.analytics-kpi-grid{grid-template-columns:1fr}}
@media print{
.analytics-reportbar,.analytics-filter-pane,.analytics-card-actions,.analytics-page-actions,.analytics-data-table,.analytics-focus,.analytics-refreshing,.analytics-table-tools{display:none!important}
.analytics-workspace{display:block}
.analytics-grid{grid-template-columns:repeat(2,1fr)!important}
.analytics-card,.analytics-kpi{break-inside:avoid;box-shadow:none}
.analytics-card-wide,.analytics-card-full{grid-column:1/-1}
.analytics-svg-scroll{overflow:visible}
}
/* ---------- Payroll: employees still to be paid (repeat runs) ---------- */
.payroll-pending-panel{margin-top:0.8571rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;overflow:hidden}
.payroll-pending-panel.warn{border-color:var(--warning-border);box-shadow:inset 0.2143rem 0 0 var(--warning-solid)}
.payroll-pending-panel.ok{border-color:var(--success-border);box-shadow:inset 0.2143rem 0 0 var(--success-solid)}
.payroll-pending-head{display:flex;align-items:center;justify-content:space-between;gap:0.8571rem;padding:0.7143rem 1rem}
.payroll-pending-head h3{margin:0;font-size:1rem;color:var(--text-strong)}
.payroll-pending-head p{margin:2px 0 0;font-size:0.8571rem;color:var(--muted);max-width:54.2857rem}
.payroll-pending-panel .table-wrap{border-top:1px solid var(--border-soft);max-height:22.8571rem;overflow:auto}
.payroll-pending-panel .entity-table td,.payroll-pending-panel .entity-table th{padding:0.4286rem 0.7143rem;font-size:0.8929rem}
.payroll-run-mode .inline-form{margin:0.4286rem 0}
@media (max-width:720px){.payroll-pending-head{flex-direction:column;align-items:flex-start}}
/* ---------- Reports: drill-through tables ---------- */
.rate-pill{display:inline-block;min-width:3.8571rem;text-align:center;padding:1px 0.5714rem;border-radius:71.3571rem;font-weight:700;font-size:0.8214rem}
.rate-pill.good{background:var(--success-bg);color:var(--success)}
.rate-pill.warn{background:var(--warning-bg);color:var(--warning)}
.rate-pill.bad{background:var(--danger-bg);color:var(--danger)}
.analytics-auto-apply{padding:0.4286rem 0 0.8571rem}
.analytics-detail .table-wrap{max-height:32.8571rem;overflow:auto}
.analytics-detail thead th{position:sticky;top:0;background:#f6f8fb;z-index:1}
.analytics-chart:has(.analytics-matrix-wrap){min-height:0;flex:0 0 auto}
.table-wrap,.entity-table-wrap{position:relative}
.payroll-ready-strip{display:flex;align-items:center;gap:0.7143rem;margin:0 0 0.8571rem;padding:0.6429rem 1rem;border:1px solid var(--success-border);border-radius:0.8571rem;background:var(--success-bg);color:var(--success)}
.payroll-ready-strip>span{width:1.7143rem;height:1.7143rem;border-radius:50%;display:grid;place-items:center;background:var(--success-solid);color:#fff;font-weight:800;flex:0 0 auto}
.payroll-ready-strip b{display:block;color:var(--text-strong);font-size:0.9286rem}.payroll-ready-strip small{color:var(--muted);font-size:0.8571rem}
.bulk-payment-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.5714rem;padding:0.5714rem 0.8571rem;margin:0 0 0.5714rem;border:1px solid var(--border);border-radius:0.7143rem;background:var(--surface-2,#f6f8fb)}
.bulk-payment-bar .bulk-count{font-weight:700;font-size:0.8929rem;color:var(--text-strong);min-width:5.5714rem}
.bulk-payment-bar .decision-note{max-width:18.5714rem;height:2.2857rem}
.bulk-payment-bar .muted-note{flex-basis:100%}
.check-col{width:2.4286rem;text-align:center}
/* ---------- Pending with (every approval screen) ---------- */
.pending-with{display:flex;flex-wrap:wrap;align-items:center;gap:0.5714rem 1.1429rem;margin:0 0 0.7143rem;padding:0.6429rem 0.8571rem;border:1px solid var(--warning-border);border-left:0.2857rem solid var(--warning-solid);border-radius:0.7143rem;background:var(--warning-bg)}
.pending-with.is-mine{border-color:var(--brand-200);border-left-color:var(--brand-500);background:var(--brand-50)}
.pending-with-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.2857rem 0.5714rem;min-width:0}
.pending-with-label{font-size:0.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--warning)}
.pending-with.is-mine .pending-with-label{color:var(--brand-600)}
.pending-with-head>b{font-size:1rem;color:var(--text-strong)}
.pending-with-head small{flex-basis:100%;color:var(--muted);font-size:0.8571rem}
.pending-with-you{font-style:normal;font-size:0.7857rem;font-weight:700;padding:1px 0.5714rem;border-radius:71.3571rem;background:var(--brand-500);color:#fff}
.pending-with-people{display:flex;flex-wrap:wrap;align-items:center;gap:0.4286rem;margin-left:auto}
.pending-with-any{color:var(--muted);font-size:0.8214rem}
.pending-with-person{display:inline-flex;flex-direction:column;padding:0.2143rem 0.7143rem;border:1px solid var(--border);border-radius:0.5714rem;background:#fff;line-height:1.25}
.pending-with-person b{font-size:0.8929rem;color:var(--text-strong)}
.pending-with-person small{font-size:0.75rem;color:var(--muted)}
.pending-with-person.none,.pending-with-person.more{font-size:0.8571rem;color:var(--muted);justify-content:center}
.pending-with-inline{display:block;margin-top:2px;font-size:0.7857rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:15.7143rem}
@media (max-width:720px){.pending-with-people{margin-left:0}}
/* ---------- One-row filter bar (search · scopes · Search · Reset) ---------- */
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.4286rem;min-width:0;flex:1 1 auto}
.filter-row .filter-row-search{flex:1 1 15.7143rem;min-width:12.8571rem;max-width:25.7143rem}
.filter-row .toolbar-scope input[type=date]{height:2rem;border:0;padding:0 2px;font-size:0.8929rem;font-weight:650;background:transparent;box-shadow:none;width:9.1429rem}
.filter-row .toolbar-scope em{font-style:normal;color:var(--faint)}
.filter-row .toolbar-scope .checkbox-multi{width:10.7143rem}
.filter-row .toolbar-scope .checkbox-multi-trigger{height:2rem;min-height:2rem;border:0;padding-left:0.2857rem;background:transparent;box-shadow:none;font-size:0.8929rem;font-weight:650}
.filter-row .toolbar-scope .search-select-trigger{height:2rem;min-height:2rem;border:0;background:transparent;box-shadow:none}
.list-toolbar:has(.filter-row){flex-wrap:wrap;row-gap:0.4286rem}
/* ---------- Compact page headers on operational screens ---------- */
.page-title{min-height:0;margin:0 0 0.7143rem;padding:0.5714rem 0.8571rem}
.page-title::before{flex-basis:2.4286rem;width:2.4286rem;height:2.4286rem;border-radius:0.7143rem}
.page-title::after{left:0.8571rem;margin-top:-1.2143rem;width:2.4286rem;height:2.4286rem;-webkit-mask-size:1.2143rem 1.2143rem;mask-size:1.2143rem 1.2143rem}
.page-title .eyebrow{display:none}
.page-title h1{font-size:1.2857rem;line-height:1.25}
.page-title p{margin-top:1px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.page-title .actions .btn{height:2.2857rem}
.list-toolbar:has(.filter-row) .list-toolbar-tools .list-meta{max-width:none}
@media (max-width:820px){.page-title::after{top:0.5714rem;margin-top:0}}
/* Compact welcome strip: information first, not a banner. */
.welcome-card{min-height:0;padding:0.7143rem 1.1429rem;margin-bottom:0.7143rem}
.welcome-card .eyebrow{display:none}
.welcome-card h1{font-size:1.2143rem}
.welcome-card p{margin-top:2px;font-size:0.8571rem}
.welcome-meta{margin-top:0.3571rem}
.welcome-meta span{padding:2px 0.6429rem}
@media (min-width:821px){.payroll-run-mode .payroll-create-form .payroll-form-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Payroll Needs Review: standard horizontal entity-table period editor. */
.payroll-review-workspace{overflow:hidden}
.payroll-review-guidance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5714rem;margin:0 0 0.7143rem}
.payroll-review-guidance>span{display:block;padding:0.5714rem 0.7143rem;border:1px solid var(--border);border-radius:0.6429rem;background:var(--surface-soft,#f8fafc);color:var(--muted);font-size:0.8214rem;line-height:1.45}
.payroll-day-review-wrap{max-width:100%;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
.payroll-day-review-table{min-width:max-content;margin:0}
.payroll-day-review-table .review-row-label{position:sticky!important;left:0;z-index:8!important;min-width:8rem;max-width:8rem;background:#f5f8fb!important;box-shadow:1px 0 0 var(--border)}
.payroll-day-review-table tbody .review-row-label{background:#fff!important;color:var(--text-strong);font-size:0.7857rem;text-transform:uppercase;letter-spacing:.04em}
.payroll-day-review-table .review-day-head{min-width:10.7143rem;text-align:left}
.payroll-day-review-table .review-day-head b{display:block}
.payroll-day-review-table .review-day-head small{display:block;color:var(--muted);font-size:0.75rem;text-transform:none;letter-spacing:0}
.payroll-day-review-table .review-day-head.needs-review,.payroll-day-review-table .review-status-cell.needs-review{background:var(--warning-bg,#fff7ed)!important}
.payroll-day-review-table .review-status-cell,.payroll-day-review-table .review-action-cell{min-width:10.7143rem;max-width:12.8571rem;vertical-align:top}
.payroll-review-select{width:100%;min-width:10.3571rem}
.review-cell-lock{display:grid;gap:2px;min-width:9.2857rem}
.review-cell-lock b{font-size:0.8571rem}
.review-cell-lock small{color:var(--muted);font-size:0.7857rem;line-height:1.35}
@media(max-width:760px){.payroll-review-guidance{grid-template-columns:1fr}.payroll-day-review-table .review-day-head,.payroll-day-review-table .review-status-cell,.payroll-day-review-table .review-action-cell{min-width:10rem}}
.payroll-review-ack{display:flex;align-items:flex-start;gap:0.4286rem;max-width:30rem;font-size:0.8929rem;line-height:1.35;color:var(--text);padding:0.4286rem 0.5714rem;border:1px solid var(--warning,#d9a300);border-radius:0.5714rem;background:var(--surface,#fff)}.payroll-review-ack input{margin-top:2px}
/* 12 Workspace switch — My Workspace (employee self-service) / job workspace */
.workspace-switch{display:inline-flex;align-items:center;gap:0.1429rem;padding:0.1429rem;border:1px solid var(--border);border-radius:71.3571rem;background:var(--surface-2);flex:0 0 auto}
.workspace-switch .workspace-option{display:inline-flex;align-items:center;gap:0.3571rem;min-height:2.2857rem;padding:0 0.8571rem;border:0;border-radius:71.3571rem;background:transparent;color:var(--muted);font:inherit;font-size:0.8929rem;font-weight:600;cursor:pointer;white-space:nowrap}
.workspace-switch .workspace-option svg{width:1rem;height:1rem;flex:0 0 auto}
.workspace-switch .workspace-option:hover{color:var(--text-strong)}
.workspace-switch .workspace-option.is-active{background:var(--brand-600,#0c50a1);color:#fff;box-shadow:0 0.1429rem 0.4286rem rgba(12,80,161,.35)}
.workspace-switch.mode-employee .workspace-option.is-active{background:var(--success-solid,#15803d);box-shadow:0 0.1429rem 0.4286rem rgba(21,128,61,.35)}
.workspace-switch .workspace-option.is-active:hover{color:#fff}
.workspace-switch .workspace-option:not(.is-active){color:var(--text)}
.workspace-switch-label{padding:0 0.4286rem 0 0.5714rem;font-size:0.7857rem;font-weight:600;color:var(--muted);white-space:nowrap}
.workspace-pill{display:inline-block;white-space:nowrap;line-height:1.4;margin-left:0.1429rem;letter-spacing:.02em;padding:0.0714rem 0.5rem;border-radius:71.3571rem;font-size:0.7143rem;font-weight:700;letter-spacing:.02em;text-transform:none;vertical-align:middle;color:#fff;background:var(--brand-600,#0c50a1)}
.workspace-pill.is-employee{background:var(--success-solid,#15803d)}
.workspace-switch .workspace-option:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.workspace-deny-switch{margin:0 0 0.8571rem}
.topbar:has(.workspace-switch){grid-template-columns:minmax(11rem,1fr) minmax(14rem,26rem) auto}
@media (max-width:1440px){.workspace-switch-label{display:none}}
@media (max-width:1280px){.workspace-switch .workspace-option span{display:none}.workspace-switch .workspace-option{padding:0 0.6429rem}}
@media print{.workspace-switch{display:none!important}}
.my-workspace-card .my-workspace-links{display:flex;flex-wrap:wrap;gap:0.5714rem}
.my-workspace-card .my-workspace-links form{margin:0}
/* Payroll batch: remove an employee before inputs are locked */
.table-action.remove{color:var(--danger,#b42318)}.table-action.remove:hover{background:#fdecec;border-color:#f5b5b0;color:#9b1c14}
.batch-remove{position:relative;display:inline-block}
.batch-remove>summary{list-style:none;cursor:pointer}.batch-remove>summary::-webkit-details-marker{display:none}
.batch-remove[open]>summary{background:#fdecec;border-color:#f5b5b0}
.batch-remove-form{position:absolute;right:0;top:calc(100% + 0.4286rem);z-index:30;width:min(20rem,80vw);display:grid;gap:0.5rem;padding:0.8571rem;background:var(--surface);border:1px solid var(--border);border-radius:0.8571rem;box-shadow:0 1.2857rem 2.8571rem -1.2857rem rgba(15,35,60,.35);text-align:left;white-space:normal}
.batch-remove-form small{color:var(--muted);line-height:1.4}
.batch-remove-form label{display:grid;gap:0.2857rem;font-size:0.8571rem;color:var(--text)}
.review-day-flag{background:var(--warning-bg)!important}
.other-workspace-list>div{display:flex;align-items:center;justify-content:space-between;gap:0.8571rem}
.other-workspace-list form{margin:0;flex:0 0 auto}
.other-workspace-more{margin-top:0.5714rem}
/* Payroll workspace: keep one clear working table visible at a time. */
.payroll-workspace-tabs{width:100%;margin:0.7143rem 0 0.7143rem}
.payroll-workspace-tabs .module-tab{gap:0.4286rem}
.payroll-workspace-tabs .tab-count{display:inline-grid;place-items:center;min-width:1.5714rem;height:1.5714rem;padding:0 0.4286rem;border-radius:71.3571rem;background:#fff;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;font-weight:720;font-variant-numeric:tabular-nums}
.payroll-workspace-tabs .module-tab.active .tab-count{border-color:var(--brand-200);background:var(--brand-50);color:var(--brand-700)}
.payroll-more-actions{position:relative;display:inline-block}
.payroll-more-actions>summary{list-style:none;cursor:pointer}
.payroll-more-actions>summary::-webkit-details-marker{display:none}
.payroll-more-actions-menu{position:absolute;right:0;top:calc(100% + 0.4286rem);z-index:45;width:min(22rem,calc(100vw - 2rem));display:grid;gap:0.5rem;padding:0.8571rem;border:1px solid var(--border);border-radius:0.8571rem;background:#fff;box-shadow:var(--shadow-lg);white-space:normal}
.payroll-more-actions-menu b{font-size:0.8929rem;color:var(--text-strong)}
.payroll-more-actions-menu small{font-size:0.8rem;line-height:1.45;color:var(--muted)}
.payroll-more-actions-menu form{display:block}
.payroll-more-actions-menu .btn{width:100%}
#payrollAttendanceTable .action-col{width:9.5rem;min-width:9.5rem}
#payrollAttendanceTable .row-actions-stack{gap:0.4286rem}
.batch-remove-trigger{color:var(--danger)}
.batch-remove[open]>.batch-remove-trigger{background:#fdecec;border-color:#f5b5b0;color:#9b1c14}
#payrollReviewTable th[data-col-key="employee_no"],
#payrollReviewTable td[data-col-key="employee_no"]{min-width:7rem}
#payrollReviewTable th[data-col-key="employee_name"],
#payrollReviewTable td[data-col-key="employee_name"]{min-width:13rem}
#payrollReviewTable th[data-col-key="department_name"],
#payrollReviewTable td[data-col-key="department_name"]{min-width:10rem}
#payrollReviewTable th[data-col-key="gross_pay"],
#payrollReviewTable td[data-col-key="gross_pay"],
#payrollReviewTable th[data-col-key="deductions"],
#payrollReviewTable td[data-col-key="deductions"],
#payrollReviewTable th[data-col-key="net_pay"],
#payrollReviewTable td[data-col-key="net_pay"],
#payrollReviewTable th[data-col-key="previously_processed_net"],
#payrollReviewTable td[data-col-key="previously_processed_net"],
#payrollReviewTable th[data-col-key="cumulative_processed_net"],
#payrollReviewTable td[data-col-key="cumulative_processed_net"]{min-width:8.75rem}
#payrollReviewTable td[data-col-key="net_pay"],
#payrollReviewTable td[data-col-key="cumulative_processed_net"]{font-weight:720;color:var(--text-strong)}
@media(max-width:720px){
.payroll-workspace-tabs{width:100%}
.payroll-workspace-tabs .module-tab{flex:0 0 auto}
.payroll-more-actions{width:100%}
.payroll-more-actions>summary{width:100%;justify-content:center}
.payroll-more-actions-menu{left:0;right:auto;width:min(22rem,calc(100vw - 2rem))}
}
/* Unified Basic V0 visual system — presentation only. */
@media screen {
body{background:var(--bg);font-family:var(--font);font-size:0.9286rem}
body[data-workspace]{--workspace-accent:var(--brand-600);--workspace-soft:var(--brand-50);--workspace-border:var(--brand-200);--workspace-grad:var(--brand-600)}
.sidebar{background:var(--sidebar-top);box-shadow:1px 0 0 var(--border)}
.nav-link.active{background:rgba(93,151,214,.18);box-shadow:none}
.nav-link.active::before{background:var(--brand-300);box-shadow:none}
.nav-badge,.notification-count{background:var(--danger-solid);box-shadow:none}
.page-title{background:#fff;box-shadow:var(--shadow-xs);border-color:var(--border)}
.page-title h1,.acx-head h1{font-weight:700;letter-spacing:-.02em}
.page-title .eyebrow{color:var(--muted)}
.btn.primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff;box-shadow:none}
.btn.primary:hover{background:var(--brand-700);border-color:var(--brand-700);box-shadow:none}
.btn.danger-fill{background:var(--danger);box-shadow:none}
.btn.danger-fill:hover{background:#92201b;box-shadow:none}
.btn{box-shadow:none;transform:none}
.btn:hover,.table-action:hover,a.metric:hover,.master-card:hover{transform:none}
.btn:focus-visible,.table-action:focus-visible,.module-workspace-link:focus-visible,.nav-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pagination .active,.pagination [aria-current="page"]{background:var(--brand-600);box-shadow:none}
.module-workspace-link.active .module-workspace-icon{background:var(--brand-600);box-shadow:none}
.module-workspace-tabs .module-workspace-link.active::after{background:var(--brand-600)}
.form-group-heading::before,.settings-card::before{background:var(--brand-600)}
.form-actions{background:#fff}
.welcome-card{background:var(--brand-800);box-shadow:none;border:1px solid var(--brand-900)}
.welcome-card::before,.welcome-card::after{display:none}
.welcome-card .btn.primary{background:#fff;color:var(--brand-800);border-color:#fff;box-shadow:none}
.welcome-card .btn.primary:hover{background:var(--brand-50);box-shadow:none}
.profile-meta,.request-calculated-strip,.criteria-builder,.workflow-decision-form,.upload-area,
.activation-readiness.needs-attention,.activation-readiness.is-ready,.analytics-slicer,
.analytics-kpi,.help-hero,.analytics-detail>summary,.kpi-small{background:#fff}
.table-wrap,.card,.panel,.metric,.quick-card,.insight-card{box-shadow:var(--shadow-xs)}
.table-wrap{border:1px solid var(--border);border-radius:var(--radius)}
.table-wrap thead th{font-size:0.7857rem;font-weight:700;letter-spacing:.015em;text-transform:none;background:var(--surface-2);color:var(--text-strong);border-bottom:1px solid var(--border)}
.table-wrap tbody tr:nth-child(even) td,.table-wrap tbody tr:nth-child(even) .sticky-action{background:#fff!important}
.table-wrap tbody tr:hover td,.table-wrap tbody tr:hover .sticky-action{background:var(--brand-50)!important}
.table-wrap tbody td{font-size:0.8929rem;line-height:1.45}
.table-wrap tfoot th,.table-wrap tfoot td{background:var(--surface-2)}
.table-wrap .num,.table-wrap td[data-type="number"]{font-variant-numeric:tabular-nums}
.master-group>h3::before{transform:none;border-radius:50%;background:var(--brand-600)}
.master-card::before{background:var(--brand-600)}
.master-card:hover{box-shadow:var(--shadow-xs)}
.quick-card,.insight-card{--q-grad:var(--brand-600);--i-accent:var(--brand-600)}
.punch-button{background:var(--success-bg)!important;box-shadow:none!important}
.punch-button[data-type="OUT"]{background:var(--warning-bg)!important}
.quick-grid .quick-card{--q-grad:var(--brand-600)!important;--q-shadow:transparent!important}
.employee-dashboard-cards>.insight-card{--i-accent:var(--brand-600)!important}
.setup-grid .setup-card{--card-accent:var(--brand-600)!important}
.form-help-disclosure{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6429rem .8571rem;background:var(--surface-2);color:var(--muted);font-size:.8571rem}
.form-help-disclosure>summary{cursor:pointer;font-weight:600;color:var(--text);list-style-position:inside}
.form-help-disclosure p{margin:.4286rem 0 0;line-height:1.5}
.form-help-disclosure:focus-within{border-color:var(--brand-300)}
.acx-grace-total{display:inline-flex;align-items:center;min-height:2.2rem;padding:0 .7143rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text-strong);font-size:.8571rem;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.calendar-shift{white-space:normal;overflow-wrap:anywhere}
.calendar-shift small{display:block;font-size:.7321rem;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.calendar-grace-chip{white-space:normal;overflow-wrap:anywhere;border-radius:var(--radius-sm)}
.calendar-grace-chip small{display:block;font-weight:500;line-height:1.35}
.calendar-day-actions{align-items:flex-start}
.calendar-day-actions .calendar-link{line-height:1.5}
}
@media screen and (max-width:720px){
.acx-head .actions{width:100%;flex-wrap:wrap;align-items:center}
.acx-grace-total{flex:0 0 auto}
.acx .attendance-calendar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.acx .calendar-weekdays,.acx .calendar-grid{min-width:57.5rem}
.acx .calendar-punch-summary{display:flex}
.acx .calendar-shift,.acx .calendar-grace-flags{display:block}
.acx .calendar-day{min-height:9.1429rem}
}
@media screen and (prefers-reduced-motion:reduce){
.btn,.table-action,.nav-link,.metric,.master-card,.card{transition:none}
}