/* ─────────────────────────────────────────────────────────────────────────
   HRMS Design System — custom properties & components
───────────────────────────────────────────────────────────────────────── */
:root {
  --primary:       #4f46e5;
  --primary-dark:  #3730a3;
  --primary-light: #eef2ff;
  --accent:        #0ea5e9;
  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --info:          #0ea5e9;
  --bg:            #f1f5f9;
  --surface:       #ffffff;
  --text:          #1e293b;
  --muted:         #64748b;
  /* Bumped from #e2e8f0 — that read as nearly invisible against --surface
     (#fff)/--bg (#f1f5f9), especially on cards and form inputs where a
     visible edge actually matters (WCAG 1.4.11 non-text contrast wants
     ~3:1 against adjacent colors; #e2e8f0 was closer to 1.2:1). */
  --border:        #cbd5e1;
  --radius:        .75rem;
  --shadow-sm:     0 1px 3px 0 rgb(0 0 0/.08), 0 1px 2px -1px rgb(0 0 0/.08);
  --shadow:        0 4px 6px -1px rgb(0 0 0/.08), 0 2px 4px -2px rgb(0 0 0/.08);
  --shadow-lg:     0 10px 15px -3px rgb(0 0 0/.08), 0 4px 6px -4px rgb(0 0 0/.08);

  /* ── Portal appearance system ──────────────────────────────────────────
     Every value below is the exact pre-existing look, captured verbatim as
     the "Default" preset (data-portal-theme="default") so switching this
     system in changes nothing for anyone who doesn't touch Settings →
     Appearance. Theme presets below only ever override these same tokens. */
  --sidebar-bg:                  #1e293b;
  --sidebar-text:                #94a3b8;
  --sidebar-text-hover:          #e2e8f0;
  --sidebar-text-active:         #c7d2fe;
  --sidebar-icon-active:         #a5b4fc;
  --sidebar-hover-bg:            rgba(255,255,255,.05);
  --sidebar-active-bg:           rgba(99,102,241,.14);
  --sidebar-active-border:       #818cf8;
  --sidebar-section-label:       #64748b;
  --sidebar-section-label-hover: #cbd5e1;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.04);
  --sidebar-group-accent:        rgba(148,163,184,.16);
  --sidebar-border:              rgba(255,255,255,.06);

  --portal-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --portal-font-size:   .9375rem;
  --portal-line-height: 1.6;
  --sidebar-font-size:  .875rem;

  --motion-fast: .15s;
  --motion-med:  .2s;
  --motion-slow: .3s;

  /* ── Preset "personality" tokens — Default (Indigo Tech) baseline ────────
     border-width, shadow-* and heading-font are what actually make each of
     the 6 Appearance presets FEEL different rather than just re-tinted.
     Every preset below overrides a subset of these; whatever it doesn't
     override falls back to this Default fingerprint: soft ambient shadows,
     a modest .75rem radius, 1px hairline borders, Inter throughout.
     Caution: never let an asterisk sit immediately before a slash anywhere
     in this comment block. That exact two-character pair is the CSS
     comment terminator, so it ends this comment wherever it appears — an
     earlier revision wrote "shadow" then a star then a slash then
     "heading-font" as a run-together shorthand, which closed this comment
     mid-sentence and silently deleted the --border-width declaration and
     its --bs-border-width mirror below. Every .form-control/.form-select
     sitewide rendered with a 0-width, style-none border as a result —
     invisible field outlines on every non-dark preset (dark preset hid it
     behind its own background-color contrast instead of a real border). */
  --border-width:           1px;
  --heading-font-family:    var(--portal-font-family);
  --letter-spacing-heading: -.02em;
  /* Standard "material" ease — brisk, neutral. Each preset below swaps
     this for a curve that fits its own personality (see hover transitions
     on .card/.feature-card/.msgc-row, which read this token). */
  --motion-easing: cubic-bezier(.4, 0, .2, 1);

  /* Mirrored onto Bootstrap 5.3's own root variables so every stock
     Bootstrap component (buttons, inputs, cards, tables, modals, dropdowns,
     accordions...) inherits each preset's identity automatically, without a
     bespoke override per component. Custom-property values resolve lazily,
     so a preset only ever needs to redeclare the left-hand tokens
     (--radius, --shadow, --border-width, --portal-font-family...) — these
     mirrors recompute on their own. */
  --bs-border-radius:      var(--radius);
  --bs-border-radius-sm:   calc(var(--radius) * .66);
  --bs-border-radius-lg:   calc(var(--radius) * 1.34);
  --bs-border-radius-xl:   calc(var(--radius) * 1.75);
  --bs-border-radius-pill: 999px;
  --bs-border-width:       var(--border-width);
  --bs-body-font-family:   var(--portal-font-family);
  --bs-box-shadow:         var(--shadow);
  --bs-box-shadow-sm:      var(--shadow-sm);
  --bs-box-shadow-lg:      var(--shadow-lg);
}

/* ── Buttons follow the active theme ───────────────────────────────────────
   Bootstrap's compiled CSS bakes .btn-primary/.btn-success/etc.'s colors in
   as literal hex at build time — they don't actually read --bs-primary (or
   any other custom property) at runtime, so re-declaring that variable per
   preset silently changed nothing. Every "Publish"/"Save"/primary-action
   button sitewide stayed Bootstrap's stock blue/green/red regardless of
   which Appearance preset or accent theme was selected. These overrides use
   plain color properties (not Bootstrap's internal variable chain) so they
   win by cascade order alone — site.css always loads after the Bootstrap
   CDN link — and they reference this file's own theme tokens, so they
   already track every preset above and any future one added. Outline
   variants keep proper text/hover contrast the same way Bootstrap's own
   outline buttons do (filled on hover). */
.btn-primary {
  background-color: var(--primary); border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-check:checked + .btn-primary {
  background-color: var(--primary-dark); border-color: var(--primary-dark);
}
.btn-outline-primary {
  color: var(--primary); border-color: var(--primary);
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--primary); border-color: var(--primary); color: #fff;
}
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: color-mix(in srgb, var(--success) 85%, black); border-color: color-mix(in srgb, var(--success) 85%, black);
}
.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover, .btn-outline-success:active {
  background-color: var(--success); border-color: var(--success); color: #fff;
}
.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: color-mix(in srgb, var(--danger) 85%, black); border-color: color-mix(in srgb, var(--danger) 85%, black);
}
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover, .btn-outline-danger:active {
  background-color: var(--danger); border-color: var(--danger); color: #fff;
}
.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #1c1917; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: color-mix(in srgb, var(--warning) 85%, black); border-color: color-mix(in srgb, var(--warning) 85%, black); color: #1c1917;
}
.btn-outline-warning { color: var(--warning); border-color: var(--warning); }
.btn-outline-warning:hover, .btn-outline-warning:active {
  background-color: var(--warning); border-color: var(--warning); color: #1c1917;
}
.btn-info { background-color: var(--info); border-color: var(--info); color: #fff; }
.btn-outline-info { color: var(--info); border-color: var(--info); }
.btn-outline-info:hover, .btn-outline-info:active {
  background-color: var(--info); border-color: var(--info); color: #fff;
}
.btn-outline-secondary { color: var(--muted); border-color: var(--border); }
.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background-color: var(--muted); border-color: var(--muted); color: #fff;
}
.btn-check:focus + .btn, .btn:focus {
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 25%, transparent);
}

/* ── Theme presets — pick any in Settings → Appearance ────────────────── */
html[data-portal-theme="ocean"] {
  --sidebar-bg: #0c2d48;
  --sidebar-hover-bg: rgba(255,255,255,.06);
  --sidebar-active-bg: rgba(56,189,248,.16);
  --sidebar-active-border: #38bdf8;
  --sidebar-icon-active: #7dd3fc;
  --sidebar-text-active: #bae6fd;
  --sidebar-group-accent: rgba(125,211,252,.18);
}
html[data-portal-theme="forest"] {
  --sidebar-bg: #0f2a1d;
  --sidebar-hover-bg: rgba(255,255,255,.05);
  --sidebar-active-bg: rgba(52,211,153,.16);
  --sidebar-active-border: #34d399;
  --sidebar-icon-active: #6ee7b7;
  --sidebar-text-active: #a7f3d0;
  --sidebar-group-accent: rgba(110,231,183,.18);
}
html[data-portal-theme="sunset"] {
  --sidebar-bg: #2a1810;
  --sidebar-hover-bg: rgba(255,255,255,.05);
  --sidebar-active-bg: rgba(251,146,60,.18);
  --sidebar-active-border: #fb923c;
  --sidebar-icon-active: #fdba74;
  --sidebar-text-active: #fed7aa;
  --sidebar-group-accent: rgba(253,186,116,.18);
}
html[data-portal-theme="violet"] {
  --sidebar-bg: #1e1b2e;
  --sidebar-hover-bg: rgba(255,255,255,.05);
  --sidebar-active-bg: rgba(192,132,252,.18);
  --sidebar-active-border: #c084fc;
  --sidebar-icon-active: #d8b4fe;
  --sidebar-text-active: #e9d5ff;
  --sidebar-group-accent: rgba(216,180,254,.18);
}
html[data-portal-theme="light"] {
  --sidebar-bg: #ffffff;
  --sidebar-text: #64748b;
  --sidebar-text-hover: #0f172a;
  --sidebar-hover-bg: rgba(15,23,42,.05);
  --sidebar-active-bg: rgba(79,70,229,.1);
  --sidebar-active-border: #4f46e5;
  --sidebar-icon-active: #4f46e5;
  --sidebar-text-active: #4338ca;
  --sidebar-section-label: #94a3b8;
  --sidebar-section-label-hover: #475569;
  --sidebar-toggle-hover-bg: rgba(15,23,42,.04);
  --sidebar-group-accent: rgba(79,70,229,.18);
  --sidebar-border: rgba(15,23,42,.08);
}
html[data-portal-theme="contrast"] {
  --sidebar-bg: #000000;
  --sidebar-text: #e5e7eb;
  --sidebar-text-hover: #ffffff;
  --sidebar-hover-bg: rgba(255,255,255,.1);
  --sidebar-active-bg: rgba(250,204,21,.22);
  --sidebar-active-border: #facc15;
  --sidebar-icon-active: #fde047;
  --sidebar-text-active: #fef9c3;
  --sidebar-section-label: #9ca3af;
  --sidebar-section-label-hover: #ffffff;
  --sidebar-group-accent: rgba(250,204,21,.3);
  --sidebar-border: rgba(255,255,255,.15);
}

/* Every --border/--bs-border-color value in the preset blocks below was
   recomputed to clear the WCAG 1.4.11 non-text-contrast minimum (3:1)
   against that preset's own --surface/--bg — the original values (picked
   for a "subtle" look) landed between 1.4:1 and 2.5:1, so card edges, form
   fields, and table rows were effectively borderless on every non-dark
   preset. Each value keeps its preset's hue, just darkened until contrast
   hits ~3.6:1. */
/* ══════════════════════════════════════════════════════════════════════════
   UI PRESET THEMES  —  full-portal colour system
   Set via html[data-portal-preset="X"] from PlatformSettings.portal_ui_preset.
   Each preset overrides ALL colour tokens (body, surface, primary, sidebar).
   These come AFTER portal-theme presets so they win the cascade.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Preset: Light — airy & minimal ────────────────────────────────────
   Identity: generous 1.25rem radius, near-invisible ambient shadows, wide
   line-height and slightly loosened heading tracking — the "breathing
   room" preset. Border stays a crisp 1px so cards/inputs never look like
   they're floating with no edge at all. */
html[data-portal-preset="light"] body.portal-page {
  --bg:            #ECEEF1;
  --surface:       #F5F7FA;
  --text:          #2C3B52;
  --muted:         #6A7E96;
  /* Darkened again + widened to 1.5px — #B7C2D4 at 1px still read as
     "barely there" against this preset's near-white input/card
     backgrounds per direct feedback; #8CA0B8 (closer to Tailwind
     slate-400) is unambiguously a visible edge without looking heavy. */
  --border:        #738397;
  --primary:       #5048E5;
  --primary-dark:  #3730C8;
  --primary-light: #EEEEFF;

  --radius:      1.25rem;
  --border-width: 1.5px;
  --shadow-sm: 0 1px 2px rgba(44,59,82,.04);
  --shadow:    0 2px 10px -2px rgba(44,59,82,.07);
  --shadow-lg: 0 10px 28px -6px rgba(44,59,82,.10);
  --portal-line-height:     1.7;
  --letter-spacing-heading: -.01em;
  --motion-easing: ease-out;

  --bs-body-bg:          #ECEEF1;
  --bs-body-color:       #2C3B52;
  --bs-secondary-color:  #6A7E96;
  --bs-border-color:     #738397;
  --bs-tertiary-bg:      #F5F7FA;
  --bs-link-color:       #5048E5;
  --bs-link-hover-color: #3730C8;

  --sidebar-bg:                  #F0F2F5;
  --sidebar-text:                #4E6176;
  --sidebar-text-hover:          #1E2A38;
  --sidebar-text-active:         #4338CA;
  --sidebar-icon-active:         #5048E5;
  --sidebar-hover-bg:            rgba(80,72,229,.07);
  --sidebar-active-bg:           rgba(80,72,229,.10);
  --sidebar-active-border:       #5048E5;
  --sidebar-section-label:       #8DA0B8;
  --sidebar-section-label-hover: #4E6176;
  --sidebar-toggle-hover-bg:     rgba(80,72,229,.05);
  --sidebar-group-accent:        rgba(80,72,229,.12);
  --sidebar-border:              rgba(0,0,0,.08);
}

/* ── Preset: Dark — full dark portal ──────────────────────────────────── */
/* Bootstrap dark mode activates automatically via data-bs-theme="dark"
   (set server-side + enforced by the anti-flash script in base.html).
   These tokens cover HRMS-specific non-Bootstrap elements.               */
html[data-portal-preset="dark"] body.portal-page {
  --bg:            #0F1117;
  --surface:       #1A1D27;
  --text:          #DDE3EF;
  --muted:         #8895A8;
  --border:        rgba(255,255,255,.40);
  --primary:       #818CF8;
  --primary-dark:  #6366F1;
  --primary-light: rgba(99,102,241,.18);

  /* Identity: an accent-colored halo instead of a neutral black shadow —
     the signature "glow" that reads as depth on a dark surface, where a
     plain gray drop-shadow would be nearly invisible. */
  --radius:      .625rem;
  --border-width: 1px;
  --shadow-sm: 0 0 0 1px rgba(129,140,248,.08), 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 0 0 1px rgba(129,140,248,.10), 0 8px 20px -4px rgba(129,140,248,.25), 0 4px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 0 0 1px rgba(129,140,248,.14), 0 16px 40px -8px rgba(129,140,248,.35), 0 8px 20px rgba(0,0,0,.55);
  --letter-spacing-heading: -.025em;
  --motion-easing: cubic-bezier(.16, 1, .3, 1);

  --bs-body-bg:          #0F1117;
  --bs-body-color:       #DDE3EF;
  --bs-secondary-color:  #8895A8;
  --bs-border-color:     rgba(255,255,255,.40);
  --bs-tertiary-bg:      #1A1D27;
  --bs-secondary-bg:     #1E2230;
  --bs-link-color:       #818CF8;
  --bs-link-hover-color: #A5B4FC;

  --sidebar-bg:                  #111318;
  --sidebar-text:                #8895A8;
  --sidebar-text-hover:          #DDE3EF;
  --sidebar-text-active:         #C7D2FE;
  --sidebar-icon-active:         #A5B4FC;
  --sidebar-hover-bg:            rgba(255,255,255,.05);
  --sidebar-active-bg:           rgba(129,140,248,.14);
  --sidebar-active-border:       #818CF8;
  --sidebar-section-label:       #5A6880;
  --sidebar-section-label-hover: #8895A8;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.04);
  --sidebar-group-accent:        rgba(165,180,252,.12);
  --sidebar-border:              rgba(255,255,255,.07);
}

/* ── Preset: Classic — traditional corporate navy ─────────────────────── */
html[data-portal-preset="classic"] body.portal-page {
  --bg:            #EDF1F5;
  --surface:       #FFFFFF;
  --text:          #1A2940;
  --muted:         #566980;
  --border:        #7B8897;
  --primary:       #1B4B8A;
  --primary-dark:  #0E2F5C;
  --primary-light: #E8EFF8;

  /* Identity: sharp corners, a thicker defined border, and hard offset
     shadows (no blur) instead of soft ambient ones — precise and formal.
     Serif headings (body text stays sans for readability) are the single
     biggest differentiator: a traditional/corporate signal no other
     preset uses. */
  --radius:      .25rem;
  --border-width: 1.5px;
  --shadow-sm: 0 1px 0 rgba(26,41,64,.14);
  --shadow:    0 2px 0 rgba(26,41,64,.10), 0 1px 3px rgba(26,41,64,.16);
  --shadow-lg: 0 4px 0 rgba(26,41,64,.08), 0 2px 10px rgba(26,41,64,.20);
  --portal-font-size:       .875rem;
  --portal-line-height:     1.55;
  --heading-font-family:    Georgia, 'Times New Roman', serif;
  --letter-spacing-heading: 0;
  --motion-easing: ease;

  --bs-body-bg:          #EDF1F5;
  --bs-body-color:       #1A2940;
  --bs-secondary-color:  #566980;
  --bs-border-color:     #7B8897;
  --bs-tertiary-bg:      #F0F4F8;
  --bs-link-color:       #1B4B8A;
  --bs-link-hover-color: #0E2F5C;

  --sidebar-bg:                  #1A2940;
  --sidebar-text:                #88A4C0;
  --sidebar-text-hover:          #E8EFF8;
  --sidebar-text-active:         #B8D4F0;
  --sidebar-icon-active:         #88C0F0;
  --sidebar-hover-bg:            rgba(255,255,255,.06);
  --sidebar-active-bg:           rgba(43,122,228,.18);
  --sidebar-active-border:       #2A7AE4;
  --sidebar-section-label:       #506880;
  --sidebar-section-label-hover: #88A4C0;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.04);
  --sidebar-group-accent:        rgba(136,192,240,.18);
  --sidebar-border:              rgba(255,255,255,.08);
}

/* ── Preset: Modern — contemporary violet ─────────────────────────────── */
html[data-portal-preset="modern"] body.portal-page {
  --bg:            #F5F5FB;
  --surface:       #FFFFFF;
  --text:          #1D1932;
  --muted:         #7B7499;
  --border:        #8B82A3;
  --primary:       #7C3AED;
  --primary-dark:  #5B21B6;
  --primary-light: #F3EEFF;

  /* Identity: large pill-like radius + large diffused colour-tinted
     shadows (floaty, contemporary) and Poppins — a bold geometric sans
     already loaded site-wide — instead of Inter, so headings/buttons
     read as a distinct typeface, not just a re-tinted Default. */
  --radius:      1.5rem;
  --border-width: 1px;
  --shadow-sm: 0 2px 8px -2px rgba(124,58,237,.10);
  --shadow:    0 10px 26px -6px rgba(124,58,237,.16), 0 2px 6px rgba(29,25,50,.06);
  --shadow-lg: 0 22px 52px -12px rgba(124,58,237,.24), 0 8px 18px rgba(29,25,50,.08);
  --portal-font-family:     'Poppins', system-ui, -apple-system, sans-serif;
  --heading-font-family:    'Poppins', system-ui, -apple-system, sans-serif;
  --letter-spacing-heading: -.03em;
  --motion-easing: cubic-bezier(.34, 1.56, .64, 1);

  --bs-body-bg:          #F5F5FB;
  --bs-body-color:       #1D1932;
  --bs-secondary-color:  #7B7499;
  --bs-border-color:     #8B82A3;
  --bs-tertiary-bg:      #FAF9FF;
  --bs-link-color:       #7C3AED;
  --bs-link-hover-color: #5B21B6;

  --sidebar-bg:                  #1D1932;
  --sidebar-text:                #8880AA;
  --sidebar-text-hover:          #E8E4FF;
  --sidebar-text-active:         #D8B4FE;
  --sidebar-icon-active:         #C084FC;
  --sidebar-hover-bg:            rgba(192,132,252,.07);
  --sidebar-active-bg:           rgba(192,132,252,.16);
  --sidebar-active-border:       #A855F7;
  --sidebar-section-label:       #5C5880;
  --sidebar-section-label-hover: #8880AA;
  --sidebar-toggle-hover-bg:     rgba(192,132,252,.05);
  --sidebar-group-accent:        rgba(216,180,254,.16);
  --sidebar-border:              rgba(255,255,255,.07);
}

/* ── Preset: Windows 7 — Aero glass inspired ──────────────────────────── */
html[data-portal-preset="win7"] body.portal-page {
  --bg:            #E8F0F8;
  --surface:       #FFFFFF;
  --text:          #1A2030;
  --muted:         #4A6280;
  --border:        #7389A1;
  --primary:       #2B5FAA;
  --primary-dark:  #1A3C78;
  --primary-light: #DCE9F8;
  --radius:        .5rem;

  /* Identity: an inset top highlight stacked under the drop shadow — the
     classic Aero "glossy chrome" trick — plus a visible 1.5px border and
     the actual Windows system-font stack (no web font, loads instantly
     and reads as authentically "OS chrome" rather than a themed website). */
  --border-width: 1.5px;
  --shadow-sm: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(26,32,48,.16);
  --shadow:    inset 0 1px 0 rgba(255,255,255,.65), 0 2px 7px rgba(26,32,48,.20);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,.75), 0 7px 20px rgba(26,32,48,.26);
  --portal-font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --heading-font-family:    "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --portal-font-size:       .8125rem;
  --portal-line-height:     1.5;
  --letter-spacing-heading: 0;
  --motion-easing: cubic-bezier(.25, .1, .25, 1);

  --bs-body-bg:          #E8F0F8;
  --bs-body-color:       #1A2030;
  --bs-secondary-color:  #4A6280;
  --bs-border-color:     #7389A1;
  --bs-tertiary-bg:      #EEF4FC;
  --bs-link-color:       #2B5FAA;
  --bs-link-hover-color: #1A3C78;

  --sidebar-bg:                  #1C3A6E;
  --sidebar-text:                #8AAED4;
  --sidebar-text-hover:          #DEECF8;
  --sidebar-text-active:         #BAD9F5;
  --sidebar-icon-active:         #6DC0F0;
  --sidebar-hover-bg:            rgba(255,255,255,.07);
  --sidebar-active-bg:           rgba(66,152,232,.20);
  --sidebar-active-border:       #4298E8;
  --sidebar-section-label:       #506888;
  --sidebar-section-label-hover: #8AAED4;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.05);
  --sidebar-group-accent:        rgba(109,192,240,.20);
  --sidebar-border:              rgba(255,255,255,.10);
}
html[data-portal-preset="win7"] body.portal-page .hrms-sidebar {
  background: linear-gradient(180deg, #1F3E72 0%, #162E5A 55%, #1A3466 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.08), 2px 0 12px rgba(0,0,0,.20);
}
html[data-portal-preset="win7"] body.portal-page .btn-primary {
  background: linear-gradient(180deg, #4E9AE8 0%, #2B5FAA 100%) !important;
  border-color: #1A3C78 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html[data-portal-preset="win7"] body.portal-page .btn-primary:hover {
  background: linear-gradient(180deg, #5CA8F5 0%, #3468BE 100%) !important;
}

/* ── Win7 preset, part 2 — glossy chrome beyond the primary button, so the
   "Aero" identity reads on every control, not just one. Every rule below is
   .portal-page-scoped — it must never touch the public marketing site,
   which shares .btn/.card/.accordion-button/.badge class names. ──────────── */
html[data-portal-preset="win7"] body.portal-page .btn-secondary,
html[data-portal-preset="win7"] body.portal-page .btn-outline-secondary,
html[data-portal-preset="win7"] body.portal-page .btn-light {
  background: linear-gradient(180deg, #FDFDFE 0%, #E7EBF0 48%, #D7DEE7 50%, #EBEEF2 100%) !important;
  border: 1px solid #98A7B8 !important;
  color: #1A2030 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(26,32,48,.12) !important;
}
html[data-portal-preset="win7"] body.portal-page .btn-secondary:hover,
html[data-portal-preset="win7"] body.portal-page .btn-outline-secondary:hover,
html[data-portal-preset="win7"] body.portal-page .btn-light:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FC 48%, #DCEAFA 50%, #F1F7FE 100%) !important;
  border-color: #6FA3D8 !important;
}
html[data-portal-preset="win7"] body.portal-page .btn-outline-primary {
  background: linear-gradient(180deg, #EEF6FF 0%, #D9E9FB 100%) !important;
  border-color: #6FA3D8 !important;
  color: #1A3C78 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* Aero-glass titlebar for the topbar/header — the single most recognizable
   Windows 7 signature (frosted blue-glass gradient with a bright top edge). */
html[data-portal-preset="win7"] body.portal-page .portal-topbar {
  background: linear-gradient(180deg, #DCEBFB 0%, #B9D8F5 6%, #9FC8F0 50%, #B4D5F4 94%, #CBE2F8 100%) !important;
  border-bottom: 1px solid #6FA3D8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 4px rgba(26,32,48,.18) !important;
}
html[data-portal-preset="win7"] body.portal-page .portal-topbar-nav-link,
html[data-portal-preset="win7"] body.portal-page .portal-topbar-icon-btn {
  color: #1A3C78 !important;
}

/* Raised "glass panel" cards/widgets — a bevelled edge plus a soft top
   highlight instead of a flat modern drop shadow. */
html[data-portal-preset="win7"] body.portal-page .card,
html[data-portal-preset="win7"] body.portal-page .feature-card,
html[data-portal-preset="win7"] body.portal-page .stg-card,
html[data-portal-preset="win7"] body.portal-page .kpi-card {
  border: 1px solid #818C9A !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(26,32,48,.10) !important;
}

/* Flat bevelled accordion panels, Explorer-pane style. */
html[data-portal-preset="win7"] body.portal-page .accordion-button {
  background: linear-gradient(180deg, #F7FAFD 0%, #E3EBF3 100%) !important;
  border: 1px solid #818C9A !important;
}
html[data-portal-preset="win7"] body.portal-page .accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, #DCEBFB 0%, #C3DEF6 100%) !important;
  color: #1A3C78 !important;
}

/* Sunken (inset) form controls — the classic Win7 "etched" text field. */
html[data-portal-preset="win7"] body.portal-page .form-control,
html[data-portal-preset="win7"] body.portal-page .form-select {
  border: 1px solid #93AFCE !important;
  box-shadow: inset 0 1px 3px rgba(26,32,48,.18) !important;
}

/* ── Preset: Simple (Default) — deliberately low-colour ───────────────────
   Identity: mostly grayscale surfaces/text/borders with a single muted
   slate accent instead of a saturated brand hue — the "not colorful" look.
   Sidebar tokens are intentionally left unset here so the separate Sidebar
   accent picker (data-portal-theme, below) keeps controlling the sidebar
   exactly as it always has for this preset. */
html[data-portal-preset="default"] body.portal-page {
  --bg:            #F4F5F7;
  --surface:       #FFFFFF;
  --text:          #24282F;
  --muted:         #667085;
  --border:        #85878A;
  --primary:       #475569;
  --primary-dark:  #334155;
  --primary-light: #EEF0F3;

  --radius:       .5rem;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow:    0 2px 8px -2px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 28px -8px rgba(15,23,42,.12);
  --letter-spacing-heading: -.01em;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);

  --bs-body-bg:          #F4F5F7;
  --bs-body-color:       #24282F;
  --bs-secondary-color:  #667085;
  --bs-border-color:     #85878A;
  --bs-tertiary-bg:      #F8F9FA;
  --bs-link-color:       #475569;
  --bs-link-hover-color: #334155;
}

/* ── Preset: Red — bold crimson ───────────────────────────────────────── */
html[data-portal-preset="red"] body.portal-page {
  --bg:            #FDF3F3;
  --surface:       #FFFFFF;
  --text:          #3A1414;
  --muted:         #8A5A5A;
  --border:        #9A8181;
  --primary:       #DC2626;
  --primary-dark:  #991B1B;
  --primary-light: #FEE2E2;

  --radius:       .75rem;
  --border-width: 1px;
  --shadow-sm: 0 1px 3px rgba(153,27,27,.07);
  --shadow:    0 4px 10px -2px rgba(153,27,27,.12);
  --shadow-lg: 0 14px 30px -6px rgba(153,27,27,.18);
  --letter-spacing-heading: -.02em;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);

  --bs-body-bg:          #FDF3F3;
  --bs-body-color:       #3A1414;
  --bs-secondary-color:  #8A5A5A;
  --bs-border-color:     #9A8181;
  --bs-tertiary-bg:      #FEF6F6;
  --bs-link-color:       #DC2626;
  --bs-link-hover-color: #991B1B;

  --sidebar-bg:                  #450A0A;
  --sidebar-text:                #E8A9A9;
  --sidebar-text-hover:          #FEE2E2;
  --sidebar-text-active:         #FECACA;
  --sidebar-icon-active:         #FCA5A5;
  --sidebar-hover-bg:            rgba(255,255,255,.06);
  --sidebar-active-bg:           rgba(248,113,113,.20);
  --sidebar-active-border:       #F87171;
  --sidebar-section-label:       #8A3E3E;
  --sidebar-section-label-hover: #E8A9A9;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.04);
  --sidebar-group-accent:        rgba(252,165,165,.20);
  --sidebar-border:              rgba(255,255,255,.08);
}

/* ── Preset: Blue — ocean blue ─────────────────────────────────────────── */
html[data-portal-preset="blue"] body.portal-page {
  --bg:            #EFF6FF;
  --surface:       #FFFFFF;
  --text:          #0F1E33;
  --muted:         #5D7290;
  --border:        #77899E;
  --primary:       #2563EB;
  --primary-dark:  #1D4ED8;
  --primary-light: #DBEAFE;

  --radius:       .75rem;
  --border-width: 1px;
  --shadow-sm: 0 1px 3px rgba(29,78,216,.07);
  --shadow:    0 4px 10px -2px rgba(29,78,216,.12);
  --shadow-lg: 0 14px 30px -6px rgba(29,78,216,.18);
  --letter-spacing-heading: -.02em;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);

  --bs-body-bg:          #EFF6FF;
  --bs-body-color:       #0F1E33;
  --bs-secondary-color:  #5D7290;
  --bs-border-color:     #77899E;
  --bs-tertiary-bg:      #F5F9FF;
  --bs-link-color:       #2563EB;
  --bs-link-hover-color: #1D4ED8;

  --sidebar-bg:                  #0B2545;
  --sidebar-text:                #93C5FD;
  --sidebar-text-hover:          #DBEAFE;
  --sidebar-text-active:         #BFDBFE;
  --sidebar-icon-active:         #93C5FD;
  --sidebar-hover-bg:            rgba(255,255,255,.06);
  --sidebar-active-bg:           rgba(96,165,250,.20);
  --sidebar-active-border:       #60A5FA;
  --sidebar-section-label:       #3E5C85;
  --sidebar-section-label-hover: #93C5FD;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.04);
  --sidebar-group-accent:        rgba(147,197,253,.20);
  --sidebar-border:              rgba(255,255,255,.08);
}

/* ── Preset: Black & White — zero hue, pure contrast ──────────────────────
   The only preset with no accent colour at all: --primary is literal black.
   Distinct from Simple (which keeps a faint slate-blue tint) by design. */
html[data-portal-preset="bw"] body.portal-page {
  --bg:            #FFFFFF;
  --surface:       #FFFFFF;
  --text:          #000000;
  --muted:         #595959;
  --border:        #878787;
  --primary:       #000000;
  --primary-dark:  #000000;
  --primary-light: #F0F0F0;

  --radius:       .375rem;
  --border-width: 1.5px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.10);
  --shadow:    0 3px 8px rgba(0,0,0,.14);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.18);
  --letter-spacing-heading: 0;
  --motion-easing: ease;

  --bs-body-bg:          #FFFFFF;
  --bs-body-color:       #000000;
  --bs-secondary-color:  #595959;
  --bs-border-color:     #878787;
  --bs-tertiary-bg:      #F5F5F5;
  --bs-link-color:       #000000;
  --bs-link-hover-color: #404040;

  --sidebar-bg:                  #000000;
  --sidebar-text:                #B3B3B3;
  --sidebar-text-hover:          #FFFFFF;
  --sidebar-text-active:         #FFFFFF;
  --sidebar-icon-active:         #FFFFFF;
  --sidebar-hover-bg:            rgba(255,255,255,.08);
  --sidebar-active-bg:           rgba(255,255,255,.16);
  --sidebar-active-border:       #FFFFFF;
  --sidebar-section-label:       #666666;
  --sidebar-section-label-hover: #CCCCCC;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.05);
  --sidebar-group-accent:        rgba(255,255,255,.16);
  --sidebar-border:              rgba(255,255,255,.14);
}
/* --primary/--primary-dark are both pure black here, so .btn-primary's own
   hover rule (background: var(--primary-dark)) would show zero visual
   change on hover — bump lightness explicitly instead. */
html[data-portal-preset="bw"] body.portal-page .btn-primary:hover {
  background: #262626 !important;
  border-color: #262626 !important;
}

/* ── Preset: Retro — vintage terracotta & teal ─────────────────────────────
   Identity: warm cream paper, bold 2px outlines, and hard offset shadows
   (no blur) instead of soft ambient ones — the "printed badge" look, plus
   Poppins (already loaded site-wide) for a rounder, friendlier heading
   voice than Inter gives every other preset. */
html[data-portal-preset="retro"] body.portal-page {
  --bg:            #F5EFE0;
  --surface:       #FFFBF2;
  --text:          #2B2118;
  --muted:         #6B5A45;
  --border:        #8E836F;
  --primary:       #C1440E;
  --primary-dark:  #8F3009;
  --primary-light: #FBE4D4;

  --radius:       .375rem;
  --border-width: 2px;
  --shadow-sm: 2px 2px 0 rgba(43,33,24,.16);
  --shadow:    4px 4px 0 rgba(43,33,24,.18);
  --shadow-lg: 6px 6px 0 rgba(43,33,24,.20);
  --portal-font-family:     'Poppins', system-ui, -apple-system, sans-serif;
  --heading-font-family:    'Poppins', system-ui, -apple-system, sans-serif;
  --letter-spacing-heading: 0;
  --motion-easing: cubic-bezier(.65, 0, .35, 1);

  --bs-body-bg:          #F5EFE0;
  --bs-body-color:       #2B2118;
  --bs-secondary-color:  #6B5A45;
  --bs-border-color:     #8E836F;
  --bs-tertiary-bg:      #FBF3E4;
  --bs-link-color:       #C1440E;
  --bs-link-hover-color: #8F3009;

  --sidebar-bg:                  #3D2B1F;
  --sidebar-text:                #D8C3A8;
  --sidebar-text-hover:          #F5EFE0;
  --sidebar-text-active:         #F5D9B8;
  --sidebar-icon-active:         #F0A868;
  --sidebar-hover-bg:            rgba(255,255,255,.06);
  --sidebar-active-bg:           rgba(240,168,104,.20);
  --sidebar-active-border:       #F0A868;
  --sidebar-section-label:       #8A6F55;
  --sidebar-section-label-hover: #D8C3A8;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.05);
  --sidebar-group-accent:        rgba(240,168,104,.20);
  --sidebar-border:              #978070;
}
/* Chunky, offset-shadow buttons — pressed-badge feel on click. */
html[data-portal-preset="retro"] body.portal-page .btn-primary {
  box-shadow: 3px 3px 0 rgba(43,33,24,.35) !important;
  transition: transform .1s ease, box-shadow .1s ease !important;
}
html[data-portal-preset="retro"] body.portal-page .btn-primary:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 rgba(43,33,24,.35) !important;
}
html[data-portal-preset="retro"] body.portal-page .btn-primary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 rgba(43,33,24,.35) !important;
}
html[data-portal-preset="retro"] body.portal-page .card,
html[data-portal-preset="retro"] body.portal-page .feature-card,
html[data-portal-preset="retro"] body.portal-page .stg-card {
  box-shadow: var(--shadow-sm) !important;
}

/* ── Preset: Windows 11 — Fluent / Mica ─────────────────────────────────────
   Identity: heavy corner rounding, soft layered "Mica" shadows instead of
   hard borders, Win11's own accent blue, and the real system font stack —
   on an actual Windows machine this renders in genuine Segoe UI. */
html[data-portal-preset="win11"] body.portal-page {
  --bg:            #F3F3F3;
  --surface:       #FFFFFF;
  --text:          #1B1B1B;
  --muted:         #5F6368;
  --border:        #878787;
  --primary:       #0067C0;
  --primary-dark:  #004A87;
  --primary-light: #E5F1FB;

  --radius:       .75rem;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.07);
  --shadow:    0 2px 6px rgba(0,0,0,.07), 0 6px 16px -4px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px -6px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  --portal-font-family:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-font-family:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letter-spacing-heading: -.01em;
  --motion-easing: cubic-bezier(.16, 1, .3, 1);

  --bs-body-bg:          #F3F3F3;
  --bs-body-color:       #1B1B1B;
  --bs-secondary-color:  #5F6368;
  --bs-border-color:     #878787;
  --bs-tertiary-bg:      #F9F9F9;
  --bs-link-color:       #0067C0;
  --bs-link-hover-color: #004A87;

  --sidebar-bg:                  #F9F9F9;
  --sidebar-text:                #3B3B3B;
  --sidebar-text-hover:          #0F0F0F;
  --sidebar-text-active:         #004A87;
  --sidebar-icon-active:         #0067C0;
  --sidebar-hover-bg:            rgba(0,0,0,.04);
  --sidebar-active-bg:           rgba(0,103,192,.10);
  --sidebar-active-border:       #0067C0;
  --sidebar-section-label:       #6B6B6B;
  --sidebar-section-label-hover: #3B3B3B;
  --sidebar-toggle-hover-bg:     rgba(0,0,0,.035);
  --sidebar-group-accent:        rgba(0,103,192,.16);
  --sidebar-border:              #D9D9D9;
}
/* Mica-style rounded, softly-elevated surfaces instead of hard edges.
   Real Fluent cards lean on shadow over a hard border, but a 6%-opacity
   line fails contrast outright rather than just reading as "subtle" — use
   the same --border token every other preset's card relies on instead of
   a bespoke near-invisible value. */
html[data-portal-preset="win11"] body.portal-page .card,
html[data-portal-preset="win11"] body.portal-page .feature-card,
html[data-portal-preset="win11"] body.portal-page .stg-card,
html[data-portal-preset="win11"] body.portal-page .kpi-card {
  border-radius: 1rem !important;
  border-color: var(--border) !important;
}
html[data-portal-preset="win11"] body.portal-page .btn {
  border-radius: .5rem !important;
}
html[data-portal-preset="win11"] body.portal-page .hrms-sidebar,
html[data-portal-preset="win11"] body.portal-page .stg-sidebar {
  border-radius: 0 !important;
  box-shadow: 1px 0 0 rgba(0,0,0,.06) !important;
}

/* ── Preset: Windows XP (Luna Blue) ────────────────────────────────────────
   Identity: the "Luna" theme — a saturated blue gradient titlebar/taskbar,
   the classic sandy-silver (#ECE9D8) chrome behind white content panes,
   noticeably ROUNDED buttons/cards (Luna's corners were softer than win7's
   subtler bevel), a bright blue focus/hover GLOW halo (the single most
   recognizable Luna interaction cue), and Tahoma as the system font. A
   pale-yellow, black-bordered tooltip is included too — instantly reads as
   "old Windows" on its own. */
html[data-portal-preset="winxp"] body.portal-page {
  --bg:            #ECE9D8;
  --surface:       #FFFFFF;
  --text:          #000000;
  --muted:         #4D4D4D;
  --border:        #7F9DB9;
  --primary:       #2A66E8;
  --primary-dark:  #0A3FA6;
  --primary-light: #D9E7FB;
  --radius:        .75rem;

  --border-width: 1px;
  --shadow-sm: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.18);
  --shadow:    inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(0,0,0,.22);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px rgba(0,0,0,.28);
  --portal-font-family:     Tahoma, "Segoe UI", Verdana, sans-serif;
  --heading-font-family:    Tahoma, "Segoe UI", Verdana, sans-serif;
  --portal-font-size:       .8125rem;
  --letter-spacing-heading: 0;
  --motion-easing: cubic-bezier(.2, .85, .4, 1);

  --bs-body-bg:          #ECE9D8;
  --bs-body-color:       #000000;
  --bs-secondary-color:  #4D4D4D;
  --bs-border-color:     #7F9DB9;
  --bs-tertiary-bg:      #F4F2E8;
  --bs-link-color:       #2A66E8;
  --bs-link-hover-color: #0A3FA6;

  --sidebar-bg:                  #0A3FA6;
  --sidebar-text:                #AFCBF5;
  --sidebar-text-hover:          #FFFFFF;
  --sidebar-text-active:         #FFFFFF;
  --sidebar-icon-active:         #6FC0FF;
  --sidebar-hover-bg:            rgba(255,255,255,.10);
  --sidebar-active-bg:           rgba(111,192,255,.24);
  --sidebar-active-border:       #6FC0FF;
  --sidebar-section-label:       #7FA5E0;
  --sidebar-section-label-hover: #AFCBF5;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.08);
  --sidebar-group-accent:        rgba(111,192,255,.24);
  --sidebar-border:              rgba(255,255,255,.14);
}
/* Taskbar-style sidebar: a saturated blue gradient (brighter than win7's
   Aero glass), flat rather than glassy. */
html[data-portal-preset="winxp"] body.portal-page .hrms-sidebar {
  background: linear-gradient(180deg, #1657D6 0%, #0A3FA6 55%, #0C48BE 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.12), 2px 0 10px rgba(0,0,0,.24);
}
/* The Luna button: rounded, glossy blue gradient with a bright top-half
   highlight — and a soft blue GLOW on hover/focus, the defining Luna cue. */
html[data-portal-preset="winxp"] body.portal-page .btn {
  border-radius: .5rem !important;
}
html[data-portal-preset="winxp"] body.portal-page .btn-primary {
  background: linear-gradient(180deg, #5FA3FF 0%, #2A66E8 46%, #1650D6 100%) !important;
  border: 1px solid #0A3FA6 !important;
  border-radius: .85rem !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5) !important;
  transition: box-shadow var(--motion-med, .2s) var(--motion-easing),
              transform var(--motion-fast, .15s) var(--motion-easing) !important;
}
html[data-portal-preset="winxp"] body.portal-page .btn-primary:hover {
  background: linear-gradient(180deg, #7AB6FF 0%, #3E78F0 46%, #1D5AE0 100%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.6),
              0 0 0 3px rgba(42,102,232,.30) !important;
}
html[data-portal-preset="winxp"] body.portal-page .btn-primary:focus,
html[data-portal-preset="winxp"] body.portal-page .btn-primary:focus-visible {
  box-shadow: 0 1px 2px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5),
              0 0 0 4px rgba(111,192,255,.55) !important;
  animation: winxp-glow-pulse 1.6s ease-in-out infinite;
}
html[data-portal-preset="winxp"] body.portal-page .btn-primary:active {
  background: linear-gradient(180deg, #1650D6 0%, #2A66E8 100%) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25) !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-portal-preset="winxp"] body.portal-page .btn-primary:focus { animation: none; }
}
html[data-portal-preset="winxp"] body.portal-page[data-portal-motion="reduced"] .btn-primary:focus {
  animation: none;
}
@keyframes winxp-glow-pulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 4px rgba(111,192,255,.45); }
  50%      { box-shadow: 0 1px 2px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 6px rgba(111,192,255,.65); }
}
/* Silver "Classic" button — the workhorse secondary/cancel button. */
html[data-portal-preset="winxp"] body.portal-page .btn-secondary,
html[data-portal-preset="winxp"] body.portal-page .btn-outline-secondary,
html[data-portal-preset="winxp"] body.portal-page .btn-light {
  background: linear-gradient(180deg, #FFFFFF 0%, #ECEBE4 46%, #DCDAD1 50%, #F0EFE9 100%) !important;
  border: 1px solid #ACA899 !important;
  border-radius: .5rem !important;
  color: #000000 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(0,0,0,.12) !important;
}
html[data-portal-preset="winxp"] body.portal-page .btn-secondary:hover,
html[data-portal-preset="winxp"] body.portal-page .btn-outline-secondary:hover,
html[data-portal-preset="winxp"] body.portal-page .btn-light:hover {
  border-color: #7F9DB9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 0 3px rgba(42,102,232,.18) !important;
}
html[data-portal-preset="winxp"] body.portal-page .btn-outline-primary {
  background: linear-gradient(180deg, #EAF2FF 0%, #D2E4FC 100%) !important;
  border: 1px solid #7F9DB9 !important;
  border-radius: .5rem !important;
  color: #0A3FA6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* The Luna titlebar — the single most iconic identity element: a bright
   blue gloss gradient with a crisp white top edge and bold white text. */
html[data-portal-preset="winxp"] body.portal-page .portal-topbar {
  background: linear-gradient(180deg, #4F9AFF 0%, #2A66E8 18%, #0A3FA6 82%, #0850C6 100%) !important;
  border-bottom: 2px solid #0A3FA6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.22) !important;
}
html[data-portal-preset="winxp"] body.portal-page .portal-topbar-nav-link,
html[data-portal-preset="winxp"] body.portal-page .portal-topbar-icon-btn {
  color: #FFFFFF !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* Rounded "dialog box" cards on the sandy-silver body background. */
html[data-portal-preset="winxp"] body.portal-page .card,
html[data-portal-preset="winxp"] body.portal-page .feature-card,
html[data-portal-preset="winxp"] body.portal-page .stg-card,
html[data-portal-preset="winxp"] body.portal-page .kpi-card {
  border: 1px solid #ACA899 !important;
  border-radius: .85rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 4px rgba(0,0,0,.14) !important;
}

/* "Groupbox" style panel headers — silver gradient bar, blue when active,
   matching the classic XP grouped-controls / Explorer task-pane look. */
html[data-portal-preset="winxp"] body.portal-page .accordion-button {
  background: linear-gradient(180deg, #FBFAF6 0%, #E6E4DA 100%) !important;
  border: 1px solid #ACA899 !important;
  border-radius: .5rem !important;
}
html[data-portal-preset="winxp"] body.portal-page .accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, #6FA9FF 0%, #2A66E8 100%) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

/* Sunken white text fields with the classic blue-gray XP border, and the
   same signature blue glow on focus as the primary button. */
html[data-portal-preset="winxp"] body.portal-page .form-control,
html[data-portal-preset="winxp"] body.portal-page .form-select {
  background: #FFFFFF !important;
  border: 1px solid #7F9DB9 !important;
  border-radius: .35rem !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15) !important;
}
html[data-portal-preset="winxp"] body.portal-page .form-control:focus,
html[data-portal-preset="winxp"] body.portal-page .form-select:focus {
  border-color: #2A66E8 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15), 0 0 0 3px rgba(111,192,255,.45) !important;
}

/* The pale-yellow, black-bordered XP tooltip — recognizable on sight. */
html[data-portal-preset="winxp"] body.portal-page .tooltip .tooltip-inner {
  background: #FFFFE1 !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 2px !important;
  box-shadow: 2px 2px 4px rgba(0,0,0,.25) !important;
  font-family: var(--portal-font-family);
}
html[data-portal-preset="winxp"] body.portal-page .tooltip .tooltip-arrow::before {
  display: none;
}

html[data-portal-preset="winxp"] body.portal-page .hrms-footer {
  background: linear-gradient(180deg, #F4F2E8 0%, #E6E4DA 100%) !important;
  border-top: 1px solid #ACA899 !important;
}

/* ── Preset: Nord — Arctic ────────────────────────────────────────────────
   Identity: the real Nord palette (Arctic Ice Studio / nordtheme.com) —
   Polar Night sidebar, Snow Storm content, Frost blue/cyan accents. */
html[data-portal-preset="nord"] body.portal-page {
  --bg:            #ECEFF4;
  --surface:       #FFFFFF;
  --text:          #2E3440;
  --muted:         #4C566A;
  --border:        #828790;
  --primary:       #57779F;
  --primary-dark:  #4A6587;
  --primary-light: #E1E8F0;

  --radius:       .5rem;
  --border-width: 1px;
  --shadow-sm: 0 1px 3px rgba(46,52,64,.08);
  --shadow:    0 4px 12px -2px rgba(46,52,64,.12);
  --shadow-lg: 0 14px 32px -8px rgba(46,52,64,.18);
  --letter-spacing-heading: -.02em;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);

  --bs-body-bg:          #ECEFF4;
  --bs-body-color:       #2E3440;
  --bs-secondary-color:  #4C566A;
  --bs-border-color:     #828790;
  --bs-tertiary-bg:      #E5E9F0;
  --bs-link-color:       #57779F;
  --bs-link-hover-color: #4A6587;

  --sidebar-bg:                  #2E3440;
  --sidebar-text:                #D8DEE9;
  --sidebar-text-hover:          #ECEFF4;
  --sidebar-text-active:         #E5E9F0;
  --sidebar-icon-active:         #88C0D0;
  --sidebar-hover-bg:            rgba(255,255,255,.05);
  --sidebar-active-bg:           rgba(136,192,208,.16);
  --sidebar-active-border:       #88C0D0;
  --sidebar-section-label:       #616E88;
  --sidebar-section-label-hover: #D8DEE9;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.04);
  --sidebar-group-accent:        rgba(136,192,208,.18);
  --sidebar-border:              #838A98;
}

/* ── Preset: Solarized — precision cream & teal ──────────────────────────
   Identity: Ethan Schoonover's Solarized palette — the light (base3/base2)
   surfaces with the dark (base03) sidebar from the same family, exactly
   like the real Solarized Light/Dark pairing was designed to combine. */
html[data-portal-preset="solarized"] body.portal-page {
  --bg:            #EEE8D5;
  --surface:       #FDF6E3;
  --text:          #073642;
  --muted:         #5F737B;
  --border:        #87816E;
  --primary:       #217AB9;
  --primary-dark:  #1C689D;
  --primary-light: #E3F1FB;

  --radius:       .375rem;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(7,54,66,.08);
  --shadow:    0 3px 10px -2px rgba(7,54,66,.12);
  --shadow-lg: 0 12px 28px -6px rgba(7,54,66,.16);
  --letter-spacing-heading: -.01em;
  --motion-easing: ease;

  --bs-body-bg:          #EEE8D5;
  --bs-body-color:       #073642;
  --bs-secondary-color:  #5F737B;
  --bs-border-color:     #87816E;
  --bs-tertiary-bg:      #FDF6E3;
  --bs-link-color:       #217AB9;
  --bs-link-hover-color: #1C689D;

  --sidebar-bg:                  #002B36;
  --sidebar-text:                #93A1A1;
  --sidebar-text-hover:          #EEE8D5;
  --sidebar-text-active:         #E3F1FB;
  --sidebar-icon-active:         #2AA198;
  --sidebar-hover-bg:            rgba(255,255,255,.05);
  --sidebar-active-bg:           rgba(42,161,152,.18);
  --sidebar-active-border:       #2AA198;
  --sidebar-section-label:       #4A6870;
  --sidebar-section-label-hover: #93A1A1;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.04);
  --sidebar-group-accent:        rgba(42,161,152,.18);
  --sidebar-border:              #57838E;
}

/* ── Preset: Emerald — premium forest & gold ─────────────────────────────
   Identity: deep-green "premium fintech" surfaces with a gold accent on
   active sidebar items — a classic emerald + gold luxury pairing. */
html[data-portal-preset="emerald"] body.portal-page {
  --bg:            #F2F7F5;
  --surface:       #FFFFFF;
  --text:          #0F2A22;
  --muted:         #4F6B60;
  --border:        #778C83;
  --primary:       #047857;
  --primary-dark:  #035C43;
  --primary-light: #D1FAE5;

  --radius:       .625rem;
  --border-width: 1px;
  --shadow-sm: 0 1px 3px rgba(4,55,39,.08);
  --shadow:    0 4px 14px -2px rgba(4,55,39,.12);
  --shadow-lg: 0 16px 36px -8px rgba(4,55,39,.18);
  --letter-spacing-heading: -.02em;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);

  --bs-body-bg:          #F2F7F5;
  --bs-body-color:       #0F2A22;
  --bs-secondary-color:  #4F6B60;
  --bs-border-color:     #778C83;
  --bs-tertiary-bg:      #EAF4F0;
  --bs-link-color:       #047857;
  --bs-link-hover-color: #035C43;

  --sidebar-bg:                  #0B2A21;
  --sidebar-text:                #A9CFC0;
  --sidebar-text-hover:          #F2F7F5;
  --sidebar-text-active:         #F3E2AE;
  --sidebar-icon-active:         #D4AF37;
  --sidebar-hover-bg:            rgba(255,255,255,.05);
  --sidebar-active-bg:           rgba(212,175,55,.16);
  --sidebar-active-border:       #D4AF37;
  --sidebar-section-label:       #4F7A69;
  --sidebar-section-label-hover: #A9CFC0;
  --sidebar-toggle-hover-bg:     rgba(255,255,255,.04);
  --sidebar-group-accent:        rgba(212,175,55,.18);
  --sidebar-border:              #5D8275;
}

/* ── Font family options — Settings → Appearance ───────────────────────── */
html[data-portal-font="system"] { --portal-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-portal-font="poppins"] { --portal-font-family: 'Poppins', system-ui, sans-serif; }

/* ── Density (layout) presets — Settings → Appearance ──────────────────── */
html[data-portal-density="compact"] .sidebar-link { padding: .42rem .65rem; font-size: .81rem; margin-bottom: 0; }
html[data-portal-density="compact"] .hrms-sidebar { padding: 1rem .75rem; }
html[data-portal-density="compact"] .sidebar-section-toggle { margin-top: .85rem; padding: .25rem .65rem; }
html[data-portal-density="compact"] .hrms-table thead th { padding: .55rem .75rem; }
html[data-portal-density="compact"] .hrms-table tbody td { padding: .6rem .75rem; }

/* ── Motion presets — Settings → Appearance ─────────────────────────────── */
html[data-portal-motion="reduced"] .hrms-sidebar,
html[data-portal-motion="reduced"] .sidebar-link,
html[data-portal-motion="reduced"] .sidebar-section-toggle,
html[data-portal-motion="reduced"] .sidebar-section-chevron,
html[data-portal-motion="reduced"] .sidebar-toggle-btn,
html[data-portal-motion="reduced"] .sidebar-backdrop {
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
}

/* ── Public CMS pages — dark background ─────────────────────────────────
   Home/About/FAQ/Contact/News and every CMS-authored page previously sat
   on the same light --bg/--surface tokens as the admin portal's "light"
   preset (#f1f5f9 / #fff), while the hero/CTA bands scattered through the
   seeded page content were already dark navy/indigo — light content
   sandwiched between dark hero bands read as unfinished. Scoping the
   override to body.public-cms-page (set via {% block body_class %} in the
   public/*.html templates) redeclares these custom properties for the
   public site only: since CSS custom properties resolve to the nearest
   ancestor that declares them, this wins over both the plain :root
   fallback AND any html[data-portal-preset] the admin has chosen —
   without touching a single portal/admin page, which never sets that
   body class and keeps inheriting whatever preset is active as before.
   Bootstrap's own component theming (cards, tables, badges, accordions —
   all over the CMS block library) is handled separately via
   data-bs-theme="dark" on the same <body> ({% block body_bs_theme %}),
   since Bootstrap 5.3's dark-mode CSS is selector-gated on that attribute
   and isn't reachable through these custom properties alone. */
body.public-cms-page {
  --bg:            #0f172a;
  --surface:       #1e293b;
  --primary-light: rgba(99, 102, 241, .16);
  --text:          #e2e8f0;
  --muted:         #94a3b8;
  --border:        rgba(255, 255, 255, .12);
}

/* ── Base ── */
body {
  font-family: var(--portal-font-family);
  background: var(--bg);
  color: var(--text);
  font-size: var(--portal-font-size);
  line-height: var(--portal-line-height, 1.6);
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* Heading typeface/tracking is a per-preset token so Classic (serif),
   Modern (Poppins) and Win7 (Segoe UI) read as genuinely different
   typography, not just a re-tinted Default — see the --heading-font-family
   / --letter-spacing-heading overrides on each html[data-portal-preset]
   block above. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family, var(--portal-font-family));
  letter-spacing: var(--letter-spacing-heading, -.02em);
}

/* ── Navbar (public site) ── */
.hrms-nav {
  /* Fully opaque — this header is sticky over hero banners with colorful
     gradients (Home, News) that scroll underneath it. A semi-transparent
     backdrop-blur background let that color bleed through and washed out
     the muted-gray nav-link text, making the links hard to read/easy to
     miss against busy content rather than the plain page background it
     looked fine against in isolation. */
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgb(0 0 0 / .03);
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: .25rem 0;
}
.hrms-nav .container { min-height: 64px; display: flex; align-items: center; }
.hrms-nav .navbar-brand {
  display: flex; align-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}
.hrms-nav .navbar-brand svg { color: var(--primary); }
.hrms-nav .nav-link {
  position: relative;
  font-weight: 500;
  font-size: .875rem;
  color: var(--muted);
  padding: .55rem .85rem;
  border-radius: .5rem;
  transition: background .15s ease, color .15s ease;
}
.hrms-nav .nav-link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 2px;
  background: var(--primary); border-radius: 2px; transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.hrms-nav .nav-link:hover { color: var(--text); }
.hrms-nav .nav-link:hover::after { transform: scaleX(.45); }
.hrms-nav .nav-link.active { color: var(--primary); font-weight: 600; }
.hrms-nav .nav-link.active::after { transform: scaleX(1); }
.hrms-nav .btn-nav-cta {
  display: inline-flex; align-items: center;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  padding: .5rem 1.15rem;
  border-radius: .55rem;
  border: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 0 0 0 rgb(79 70 229 / 0);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.hrms-nav .btn-nav-cta:hover {
  background: var(--primary-dark); color: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgb(79 70 229 / .35);
}

/* ── Shared "signed in as" account button — used in both the public nav
   (.hrms-nav) and the portal topbar (.portal-topbar), both of which have
   a light/white background. This used to be a near-invisible white-on-
   white pill (rgba(255,255,255,.12) border + .06 background) inherited
   from an earlier dark-navbar design that never got updated when the
   navbar itself became light — fixed with a real neutral border and
   text color that's actually visible against a light surface, plus a
   matching dark-mode variant. ── */
.navbar-user-btn {
  border: 1.5px solid var(--border);
  border-radius: .55rem;
  font-size: .875rem; line-height: 1;
  background: var(--bg);
  color: var(--text);
  padding: .35rem .6rem;
  transition: background-color .15s ease, border-color .15s ease;
}
.navbar-user-btn:hover { background: var(--primary-light); border-color: var(--primary); }
[data-bs-theme="dark"] .navbar-user-btn { border-color: #334155; background: rgba(255,255,255,.05); color: #e2e8f0; }
[data-bs-theme="dark"] .navbar-user-btn:hover { background: rgba(99,102,241,.15); border-color: #6366f1; }

/* ── Cards ── */
.card {
  border: var(--border-width, 1px) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--motion-easing), transform .2s var(--motion-easing);
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: .875rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .875rem 1.25rem;
}

/* ── KPI stat cards ── */
.kpi-card { border-radius: var(--radius); padding: 1.25rem; position: relative; overflow: hidden; }
.kpi-card .kpi-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: .625rem;
  display: flex; align-items: center; justify-content: center;
  opacity: .9;
}
.kpi-card .kpi-value { font-size: 2rem; font-weight: 800; line-height: 1; margin-top: .5rem; }
.kpi-card .kpi-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-top: .25rem; }
.kpi-card::after {
  content: '';
  position: absolute; right: -1rem; top: -1rem;
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .06;
}

/* ── Hero ── */
.hero-section {
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #0ea5e9 100%);
  color: #fff;
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Two soft radial glows add depth behind the hero copy/mockup without a
   licensed photo — z-index:1 on the container in home.html keeps content
   above both this and ::before. */
.hero-section::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(38rem 26rem at 88% -10%, rgba(34,211,238,.20) 0%, transparent 60%),
    radial-gradient(30rem 24rem at -5% 110%, rgba(129,140,248,.22) 0%, transparent 65%);
  pointer-events: none;
}
.hero-section h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; }
.hero-section p.lead { font-size: 1.125rem; opacity: .88; max-width: 600px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  padding: .3rem .85rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  backdrop-filter: blur(4px);
  margin-bottom: 1.25rem;
}

/* ── Feature cards ── */
.feature-card {
  background: var(--surface);
  border: var(--border-width, 1px) solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  height: 100%;
  transition: transform .2s var(--motion-easing), box-shadow .2s var(--motion-easing);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-icon {
  width: 3rem; height: 3rem;
  border-radius: .625rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light);
  margin-bottom: 1rem;
}
.feature-icon svg { color: var(--primary); }

/* Product/cross-sell cards on the public marketing pages get the same
   lift-on-hover as .feature-card. Scoped to body.public-cms-page (not a
   bare .card rule) so portal/admin cards — dense dashboard tiles that
   shouldn't jump around on hover — are unaffected. */
body.public-cms-page .card {
  transition: transform .2s var(--motion-easing), box-shadow .2s var(--motion-easing);
}
body.public-cms-page .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── "How it works" numbered steps — connecting dashed line behind the
   circles on wide screens, applied via .how-steps on the row wrapper.
   top = this row's own .g-4 gutter-y padding-top (1.5rem, added to each
   column by Bootstrap's grid) + half the 3.5rem circle's height (1.75rem)
   — i.e. the circle's true vertical center, not just its own half-height.
   Getting only the second half right left the line running through the
   circles' top rim instead of behind their center (visible poking out on
   both sides of every circle). If .how-steps is ever reused on a row with
   a different gutter class, update the first term to match. ── */
.how-steps { position: relative; }
.how-steps::before {
  content: '';
  position: absolute; top: calc(1.5rem + 1.75rem); left: 12.5%; right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(129,140,248,.4) 0 10px, transparent 10px 20px);
  z-index: 0;
}
.how-steps > [class*="col-"] { position: relative; z-index: 1; }
@media (max-width: 767.98px) { .how-steps::before { display: none; } }

/* ── Home "who we serve" carousel — real photography, high-res sources,
   slow Ken-Burns zoom on the active slide only (kept subtle; the zoom
   lives on the inner .who-slide-bg layer, never on .carousel-item itself,
   so it can't fight Bootstrap's own translateX transform during slide
   transitions). ── */
.who-slide {
  position: relative;
  height: 440px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.who-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  transition: transform 7s cubic-bezier(.25,.46,.45,.94);
}
.carousel-item.active .who-slide-bg { transform: scale(1.15); }
.who-slide-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,10,20,.92) 0%, rgba(5,10,20,.55) 55%, rgba(5,10,20,.15) 100%);
}
.who-slide-credit {
  position: absolute; right: .75rem; bottom: .5rem; z-index: 1;
  font-size: .65rem; color: rgba(255,255,255,.55);
  letter-spacing: .01em;
}
@media (prefers-reduced-motion: reduce) {
  .who-slide-bg { transition: none; transform: none; }
}
@media (max-width: 575.98px) { .who-slide { height: 340px; } }

#whoWeServeCarousel .carousel-control-prev,
#whoWeServeCarousel .carousel-control-next { width: 4rem; opacity: 1; }
#whoWeServeCarousel .carousel-control-prev-icon,
#whoWeServeCarousel .carousel-control-next-icon {
  width: 2.5rem; height: 2.5rem;
  background-color: rgba(15,23,42,.55);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background-size: 1.1rem;
  backdrop-filter: blur(3px);
  transition: background-color .15s ease, transform .15s ease;
}
#whoWeServeCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#whoWeServeCarousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(79,70,229,.85);
  transform: scale(1.08);
}
#whoWeServeCarousel .carousel-indicators { margin-bottom: .25rem; }
#whoWeServeCarousel .carousel-indicators [data-bs-target] {
  width: 2.25rem; height: 4px;
  border-radius: 999px;
  background-color: rgba(255,255,255,.35);
  opacity: 1; border: 0;
  transition: background-color .2s ease, width .2s ease;
}
#whoWeServeCarousel .carousel-indicators .active { background-color: #818cf8; width: 3rem; }

/* ── Sidebar (mgmt layout) ── */
.hrms-sidebar {
  background-color: var(--sidebar-bg);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .025) 0%, transparent 30%), linear-gradient(0deg, rgb(0 0 0 / .08) 0%, transparent 12%);
  min-height: calc(100vh - 64px);
  padding: 1.5rem 1rem;
  position: sticky;
  top: 64px;
  width: 240px;
  min-width: 240px;
  transition: width var(--motion-med) ease, min-width var(--motion-med) ease, padding var(--motion-med) ease, background var(--motion-med) ease;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 1px 0 0 var(--sidebar-border), 4px 0 24px -8px rgb(0 0 0 / .25);
}
/* ── Collapsed state ── */
.hrms-sidebar.sidebar-collapsed {
  width: 64px;
  min-width: 64px;
  padding: 1.5rem .5rem;
}

/* ── Sidebar position — Settings → Appearance → "Sidebar position" ──────
   Flipping the flex order moves the sidebar to the right edge without
   touching any of its own width/spacing/background rules; only the
   directional shadow (cast toward the content on the left by default)
   needs its own mirrored rule to still point at the content. ── */
html[data-sidebar-position="right"] .portal-shell { flex-direction: row-reverse; }
html[data-sidebar-position="right"] .hrms-sidebar {
  box-shadow: -1px 0 0 var(--sidebar-border), -4px 0 24px -8px rgb(0 0 0 / .25);
}
/* Collapsing/expanding fades + shrinks the text labels in sync with the
   sidebar's own width transition (both use --motion-med) instead of an
   instant display:none swap — toggling display can't be animated at all,
   so it used to make text vanish in a single frame while the sidebar box
   was still mid-way through its 200ms width animation, a jarring
   snap/flash right in the middle of an otherwise smooth motion. Overflow
   stays hidden on the link itself so the shrinking text never wraps or
   spills outside the icon-only rail while it's mid-transition. */
.sidebar-link-text {
  display: inline-block; overflow: hidden;
  max-width: 12rem; opacity: 1;
  transition: max-width var(--motion-med) ease, opacity var(--motion-fast) ease, margin var(--motion-med) ease;
}
.hrms-sidebar.sidebar-collapsed .sidebar-section-label {
  max-width: 0; opacity: 0; margin: 0; overflow: hidden; white-space: nowrap;
  transition: max-width var(--motion-med) ease, opacity var(--motion-fast) ease, margin var(--motion-med) ease;
}
.hrms-sidebar.sidebar-collapsed .sidebar-link-text {
  max-width: 0; opacity: 0; margin: 0;
}
.hrms-sidebar.sidebar-collapsed .sidebar-link {
  justify-content: center;
  /* Ultra-compact icon-only rail: minimal vertical spacing */
  padding: .22rem 0;
  margin-bottom: .02rem;
  gap: 0;
  border-radius: .4rem;
}
.hrms-sidebar.sidebar-collapsed .sidebar-link svg { opacity: .85; }
.hrms-sidebar.sidebar-collapsed .sidebar-user-info { display: none; }
.sidebar-user-avatar-only { display: none; }
.hrms-sidebar.sidebar-collapsed .sidebar-user-avatar-only {
  display: flex !important; justify-content: center; align-items: center;
  margin-top: auto; padding-top: .5rem; position: relative;
}
/* Profile hover popup in collapsed mode — positioned to the RIGHT of the
   badge. `left`/`bottom` here are just a fallback for the instant before
   JS runs (mgmt.html's positionAvatarPopup(), wired to mouseenter/focusin
   on .sidebar-user-avatar-only): those two numbers used to be hardcoded
   as "sidebar collapsed width (64px) + 4px gap" / "anchor near the
   viewport bottom", which drifted out of sync with the avatar's *actual*
   rendered position (density/preset changes, different viewport heights)
   and made the popup appear detached from the badge it belongs to. The
   JS now reads the real getBoundingClientRect() of the avatar every time
   the popup opens and sets `left`/`bottom` as inline styles, so this
   stays correct regardless of how the sidebar is sized. */
.sidebar-avatar-popup {
  display: none;
  position: fixed;          /* escape the sidebar's stacking context entirely */
  left: 68px;
  bottom: 1rem;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: .65rem;
  padding: .6rem .5rem;
  min-width: 11rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.30);
  z-index: 2000;            /* above everything including modals' backdrops */
  white-space: nowrap;
}
/* Left-pointing caret — vertical position is set inline by the same JS,
   aligned to the avatar's vertical center regardless of popup height. */
.sidebar-avatar-popup::after {
  content: '';
  position: absolute;
  left: -.45rem;
  top: var(--avatar-caret-top, 1.1rem);
  border-top: .45rem solid transparent;
  border-bottom: .45rem solid transparent;
  border-right: .45rem solid var(--sidebar-border);
}
.sidebar-user-avatar-only:focus-within .sidebar-avatar-popup {
  display: block;
}
/* Hover visibility is JS-managed (mgmt.html), not pure :hover — the popup
   sits `position:fixed` a few pixels away from the avatar it's anchored to,
   and pure CSS :hover drops the instant the cursor crosses that gap, closing
   the popup before it can be reached. JS keeps it open across the gap with
   a short grace-period timer instead. .is-open is the JS-driven equivalent
   of what :hover used to do here. */
.sidebar-avatar-popup.is-open {
  display: block;
}
.sidebar-avatar-popup .sidebar-link {
  justify-content: flex-start !important;
  padding: .3rem .6rem !important;
  margin-bottom: .15rem !important;
  gap: .5rem !important;
  border-radius: .4rem !important;
  font-size: .78rem;
}
.sidebar-avatar-popup-name {
  font-size: .75rem; font-weight: 600; color: var(--sidebar-text);
  padding: .2rem .6rem .45rem; border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: .25rem; overflow: hidden; text-overflow: ellipsis;
}
.hrms-sidebar.sidebar-collapsed .sidebar-toggle-open { display: none !important; }
.hrms-sidebar .sidebar-toggle-close { display: none !important; }
.hrms-sidebar.sidebar-collapsed .sidebar-toggle-close { display: inline-flex !important; }
/* Toggle button — always visible on desktop (≥992px) */
/* Collapse/expand toggle — upper-right corner of sidebar, always visible on desktop */
.sidebar-toggle-btn {
  display: flex;
  align-items: center; justify-content: flex-end;
  width: 100%;
  background: transparent; border: none; box-shadow: none;
  appearance: none; -webkit-appearance: none; outline: none; cursor: pointer;
  color: var(--sidebar-section-label);
  padding: .1rem .1rem .6rem .1rem; margin-bottom: .35rem;
  border-bottom: 1px solid var(--sidebar-border);
  transition: color var(--motion-fast), opacity var(--motion-fast);
}
/* The actual chevron icon sits in a small pill so it's visually distinct */
.sidebar-toggle-btn svg {
  padding: .2rem;
  border-radius: .375rem;
  background: var(--sidebar-toggle-hover-bg, rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.08);
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.sidebar-toggle-btn:hover { color: var(--sidebar-text-hover); }
.sidebar-toggle-btn:hover svg {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
}
.sidebar-toggle-btn:active svg { transform: scale(.9); }
.sidebar-toggle-btn:focus, .sidebar-toggle-btn:active { background: transparent; outline: none; box-shadow: none; }
.sidebar-toggle-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--sidebar-active-border);
  border-radius: .375rem;
}
/* When collapsed: center the icon */
.hrms-sidebar.sidebar-collapsed .sidebar-toggle-btn {
  justify-content: center;
  padding: .1rem .1rem .6rem;
}
/* Hide on mobile (has its own hamburger menu) */
@media (max-width: 991.98px) {
  .sidebar-toggle-btn { display: none !important; }
}

/* ── Collapsible sidebar group headers ───────────────────────────────── */
.sidebar-section-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent; background-color: transparent;
  border: none; box-shadow: none;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  padding: .4rem .75rem;
  margin-bottom: .375rem;
  margin-top: 1.25rem;
  border-radius: .5rem;
  outline: none;
  overflow: hidden;
  transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease,
              justify-content var(--motion-med) ease, padding var(--motion-med) ease;
}
.sidebar-section-toggle:first-of-type { margin-top: 0; }
.sidebar-section-toggle:focus,
.sidebar-section-toggle:active { background: transparent; outline: none; box-shadow: none; }
.sidebar-section-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--sidebar-active-border);
}
.sidebar-section-icon {
  flex-shrink: 0; opacity: .7; color: var(--sidebar-section-label);
  transition: color var(--motion-fast), opacity var(--motion-fast);
}
.sidebar-section-toggle:hover .sidebar-section-icon { opacity: 1; color: var(--sidebar-text); }
.sidebar-section-toggle[aria-expanded="true"] .sidebar-section-icon { color: var(--sidebar-section-label-hover); opacity: .9; }
.sidebar-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sidebar-section-label);
  flex: 1; text-align: left;
  max-width: 999px; opacity: 1; overflow: hidden; white-space: nowrap;
  transition: color var(--motion-fast), max-width var(--motion-med) ease,
              opacity var(--motion-fast) ease, margin var(--motion-med) ease;
}
.sidebar-section-chevron {
  color: var(--sidebar-section-label); flex-shrink: 0; opacity: 1; max-width: 1rem;
  transition: transform var(--motion-fast) ease, color var(--motion-fast),
              opacity var(--motion-fast) ease, max-width var(--motion-med) ease;
}
.sidebar-section-toggle.collapsed .sidebar-section-chevron { transform: rotate(-90deg); }
.sidebar-section-body { display: block; }
/* Expanded group stays transparent (matches the sidebar's own background —
   no colored "box" around the links) and is marked instead by a slim accent
   rule down the left edge, a common modern-dashboard convention (VS Code's
   tree view, GitHub's side nav) that reads as "open" without adding visual
   weight or clashing with link hover/active states inside it.

   The accent border/indent is applied to BOTH .collapsing (Bootstrap's
   in-progress height-transition state) and .show (the final state) —
   applying it only to .show made the indent pop in abruptly the instant
   Bootstrap's own height animation finished, on top of which a separate
   fade+slide animation re-triggered every time .show was added, so you'd
   see the box grow, THEN its content visibly snap into an indent and
   fade in afterward — two uncoordinated motions instead of one smooth
   expand. Bootstrap's height transition is now the only animation. */
.sidebar-section-body.collapsing,
.sidebar-section-body.show {
  background: transparent;
  border-left: 2px solid var(--sidebar-group-accent);
  padding-left: .5rem;
  margin-left: .25rem;
}
.sidebar-section-toggle[aria-expanded="true"] .sidebar-section-label { color: var(--sidebar-section-label-hover); }
.sidebar-section-toggle:hover { background-color: var(--sidebar-toggle-hover-bg); transform: translateX(1px); }
.sidebar-section-toggle:hover .sidebar-section-label { color: var(--sidebar-section-label-hover); }
.sidebar-section-toggle:hover .sidebar-section-chevron { color: var(--sidebar-text); }
.sidebar-section-toggle:active { transform: translateX(1px) scale(.98); }
/* Icon-only sidebar (desktop only — mobile always shows the full sidebar
   regardless of this flag, see the mobile media query below): group
   headers shrink to a centered icon (their text label hides, same pattern
   as .sidebar-link below) instead of disappearing entirely, so each
   section still has a visible, hoverable identifier — the chevron and
   click-to-collapse affordance are hidden since every group is also
   forced open below, so toggling would have no visible effect anyway. */
@media (min-width: 768px) {
  .hrms-sidebar.sidebar-collapsed .sidebar-section-toggle {
    /* Ultra-compact: minimal padding so the icon rail is dense */
    display: flex; justify-content: center; padding: .18rem 0; margin-bottom: .05rem;
    margin-top: .45rem; cursor: default;
  }
  .hrms-sidebar.sidebar-collapsed .sidebar-section-toggle:first-of-type {
    margin-top: 0;
  }
  .hrms-sidebar.sidebar-collapsed .sidebar-section-icon { display: flex; opacity: .85; }
  .hrms-sidebar.sidebar-collapsed .sidebar-section-chevron { opacity: 0; max-width: 0; }
  .hrms-sidebar.sidebar-collapsed .sidebar-section-toggle:hover { background-color: var(--sidebar-toggle-hover-bg); transform: none; }
  .hrms-sidebar.sidebar-collapsed .sidebar-section-body {
    display: block !important; height: auto !important; visibility: visible !important;
  }
}
.sidebar-link {
  display: flex; align-items: center; gap: .625rem;
  padding: .6rem .75rem;
  border-radius: .55rem;
  font-size: var(--sidebar-font-size); font-weight: 500;
  color: var(--sidebar-text);
  border-left: 2px solid transparent;
  outline: none;
  overflow: hidden;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease,
              border-color var(--motion-fast) ease, transform var(--motion-fast) ease,
              justify-content var(--motion-med) ease, padding var(--motion-med) ease, gap var(--motion-med) ease;
  margin-bottom: .15rem;
}
.sidebar-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-hover);
  transform: translateX(2px);
}
.sidebar-link:focus-visible {
  box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--sidebar-active-border);
}
.sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active);
  border-left-color: var(--sidebar-active-border);
  font-weight: 600;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgb(255 255 255 / .04);
}
.sidebar-link svg { flex-shrink: 0; opacity: .75; transition: opacity var(--motion-fast), transform var(--motion-fast); }
.sidebar-link:hover svg { opacity: .95; }
.sidebar-link.active svg { opacity: 1; color: var(--sidebar-icon-active); }

/* ── Quick find ── */
.sidebar-quickfind {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: 1rem; padding: .45rem .65rem;
  border-radius: .55rem;
  background: rgb(255 255 255 / .04);
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-section-label);
  max-height: 3rem; opacity: 1; overflow: hidden;
  transition: border-color var(--motion-fast), background-color var(--motion-fast),
              max-height var(--motion-med) ease, opacity var(--motion-fast) ease,
              margin var(--motion-med) ease, padding var(--motion-med) ease;
}
.sidebar-quickfind:has(input:focus) { border-color: var(--sidebar-active-border); background: rgb(255 255 255 / .06); }
.sidebar-quickfind svg { flex-shrink: 0; opacity: .7; }
.sidebar-quickfind input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--sidebar-text-hover); font-size: .8125rem; font-family: inherit;
}
.sidebar-quickfind input::placeholder { color: var(--sidebar-section-label); }
.sidebar-quickfind-clear {
  display: flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; flex-shrink: 0;
  background: none; border: none; outline: none; cursor: pointer;
  color: var(--sidebar-section-label); border-radius: 50%;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}
.sidebar-quickfind-clear:hover { color: var(--sidebar-text-hover); background: rgb(255 255 255 / .1); }
.sidebar-link-hidden { display: none; }
.hrms-sidebar.sidebar-collapsed .sidebar-quickfind {
  max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
}

/* ── Expand all / collapse all ── */
.sidebar-bulk-toggle {
  display: flex; gap: .4rem; margin-bottom: .65rem;
  max-height: 2rem; opacity: 1; overflow: hidden;
  transition: max-height var(--motion-med) ease, opacity var(--motion-fast) ease, margin var(--motion-med) ease;
}
.sidebar-bulk-toggle-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .35rem .5rem; border-radius: .5rem;
  background: rgb(255 255 255 / .04); border: 1px solid var(--sidebar-border);
  color: var(--sidebar-section-label); font-size: .72rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast);
}
.sidebar-bulk-toggle-btn svg { flex-shrink: 0; }
.sidebar-bulk-toggle-btn:hover {
  border-color: var(--sidebar-active-border); background: rgb(255 255 255 / .08); color: var(--sidebar-text-hover);
}
.hrms-sidebar.sidebar-collapsed .sidebar-bulk-toggle {
  max-height: 0; opacity: 0; margin-bottom: 0;
}

/* ── Thin, themed scrollbar for the nav area ── */
#sidebar-nav { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .15) transparent; }
#sidebar-nav::-webkit-scrollbar { width: 5px; }
#sidebar-nav::-webkit-scrollbar-track { background: transparent; }
#sidebar-nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .15); border-radius: 999px; }
#sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / .25); }

/* ── Polished user footer card ── */
.sidebar-user-info > div {
  background: rgb(255 255 255 / .035);
  border: 1px solid var(--sidebar-border) !important;
  border-radius: .75rem;
  padding: .75rem !important;
}

/* ── Mobile sidebar (< 768 px) ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .hrms-sidebar {
    position: fixed !important;
    top: 64px;
    left: 0;
    height: calc(100vh - 64px);
    min-height: 0;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    box-shadow: none;
    width: 260px !important;
    min-width: 260px !important;
    padding: 1.25rem 1rem !important;
  }
  .hrms-sidebar.sidebar-mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, .45);
  }
  /* Mirror the off-canvas slide-in edge and its shadow when the sidebar is
     pinned to the right — otherwise it would still fly in from the left
     and land on the right, a jarring direction mismatch. */
  html[data-sidebar-position="right"] .hrms-sidebar {
    left: auto; right: 0;
    transform: translateX(100%);
  }
  html[data-sidebar-position="right"] .hrms-sidebar.sidebar-mobile-open {
    transform: translateX(0);
    box-shadow: -4px 0 32px rgba(0, 0, 0, .45);
  }
  /* On mobile always show full sidebar, ignore collapse state */
  .hrms-sidebar.sidebar-collapsed {
    width: 260px !important;
    min-width: 260px !important;
    padding: 1.25rem 1rem !important;
  }
  .hrms-sidebar.sidebar-collapsed .sidebar-section-label { display: block !important; }
  .hrms-sidebar.sidebar-collapsed .sidebar-section-toggle { display: flex !important; }
  .hrms-sidebar.sidebar-collapsed .sidebar-link-text { display: inline !important; }
  .hrms-sidebar.sidebar-collapsed .sidebar-link {
    justify-content: flex-start !important;
    gap: .625rem !important;
    padding: .6rem .75rem !important;
  }
  .hrms-sidebar.sidebar-collapsed .sidebar-user-info { display: block !important; }
  .hrms-sidebar.sidebar-collapsed .sidebar-user-avatar-only { display: none !important; }
  /* Hide the desktop collapse toggle on mobile */
  .hrms-sidebar .sidebar-toggle-btn { display: none !important; }
}
/* Backdrop overlay */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1044;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

/* ── My Portal sidebar (layouts/portal.html) ──────────────────────────────
   Reuses .hrms-sidebar's look (same collapse/mobile behavior as the HR admin
   shell) but sits under base.html's public marketing nav instead of
   mgmt.html's .portal-topbar, which is a different height (73px vs 64px) —
   these overrides correct the sticky offset / min-height / mobile inset
   math that .hrms-sidebar hardcodes against the 64px admin topbar. */
.portal-sidebar {
  top: 73px;
  min-height: calc(100vh - 73px);
}
.portal-backdrop { inset: 73px 0 0 0; }
@media (max-width: 767.98px) {
  .portal-sidebar {
    top: 73px;
    height: calc(100vh - 73px);
  }
}

/* Mobile portal header bar (hamburger row, hidden on desktop via d-none d-md-none Bootstrap classes) */
.portal-mobile-header {
  align-items: center;
  gap: .75rem;
  padding: .25rem 0 .875rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, .15));
}
.portal-mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: .5rem;
  background: rgba(99, 102, 241, .1);
  border: 1px solid rgba(99, 102, 241, .2);
  color: var(--primary, #6366f1);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
  padding: 0;
}
.portal-mobile-menu-btn:hover,
.portal-mobile-menu-btn:focus-visible { background: rgba(99, 102, 241, .2); outline: none; }

/* ── Tables ── */
.hrms-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.hrms-table thead th {
  background: var(--bg);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--border);
}
.hrms-table tbody tr { transition: background .1s; }
.hrms-table tbody tr:hover { background: var(--primary-light); }
.hrms-table tbody td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* ── Avatar ── */
.avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
  flex-shrink: 0;
}
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.1rem; }
.avatar-xl { width: 5rem; height: 5rem; font-size: 1.5rem; }
.avatar-primary { background: var(--primary-light); color: var(--primary); }
.avatar-success { background: #d1fae5; color: var(--success); }
.avatar-warning { background: #fef3c7; color: var(--warning); }
.avatar-danger  { background: #fee2e2; color: var(--danger); }

/* ── Badges ── */
.badge-dot {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600;
  padding: .3rem .7rem;
  border-radius: 999px;
}
.badge-dot::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.badge-present  { background: #d1fae5; color: #065f46; }
.badge-late     { background: #fef3c7; color: #92400e; }
.badge-absent   { background: #fee2e2; color: #991b1b; }
.badge-leave    { background: #dbeafe; color: #1e40af; }
.badge-pending  { background: #fef9c3; color: #854d0e; }
.badge-approved { background: #d1fae5; color: #065f46; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-hr       { background: var(--primary-light); color: var(--primary); }
.badge-admin    { background: #ede9fe; color: #5b21b6; }
.badge-employee { background: var(--bg); color: var(--muted); }

/* ── Buttons ──
   .btn-primary/.btn-outline-primary already read --primary — the two
   below (secondary/outline-secondary/light) previously fell through to
   Bootstrap's own compiled gray with NO base override at all (only a
   dark-mode-only override existed), so on every OTHER preset they looked
   identical regardless of which theme was active. Tokenized so they pick
   up each preset's own surface/border/text identity too. */
.btn-primary { background: var(--primary); border-color: var(--primary); font-weight: 600; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); font-weight: 600; }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-secondary, .btn-outline-secondary {
  color: var(--text); border-color: var(--border); background: var(--surface);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background: var(--bg); border-color: var(--muted); color: var(--text);
}
.btn-light { background: var(--bg); border-color: var(--border); color: var(--text); }
.btn-light:hover { background: var(--border); }

/* ── Dropdown menus — Bootstrap's own component vars (--bs-dropdown-*)
   aren't part of the preset mirror set, so this always rendered as stock
   white-bg/dark-text regardless of preset (fine on a pure-white surface,
   visibly mismatched on any colour-tinted one). Reads the same tokens as
   .card so a dropdown always looks like it belongs to the page it's on. */
.dropdown-menu {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg); color: var(--text); }
.dropdown-item.active, .dropdown-item:active { background: var(--primary); color: #fff; }
.dropdown-divider { border-color: var(--border); }

/* ── Forms ── */
.form-control, .form-select {
  border-color: var(--border);
  border-radius: .5rem;
  padding: .625rem .875rem;
  font-size: .9375rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.form-label { font-weight: 600; font-size: .875rem; color: var(--text); margin-bottom: .375rem; }

/* Suppress Edge/IE's built-in password-reveal ("eye") and clear-field
   icons on every password input site-wide (login, register, change/reset
   password). Without this, Edge renders its own native reveal icon on top
   of/right next to our custom eye-toggle button once the field has text —
   the "two eye icons" bug. Chrome/Firefox never had this icon; this rule
   is a no-op there. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

/* ── Login page ── */
.login-wrapper {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.login-card {
  background: var(--surface);
  border: var(--border-width, 1px) solid var(--border);
  border-radius: var(--radius, 1rem);
  /* Colored halo layered under the neutral elevation shadow — built from
     --primary, so it automatically shifts hue per Appearance preset
     (indigo/violet/navy/win7-blue/etc.) instead of a fixed gray card
     shadow every preset would otherwise share. */
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent),
    0 22px 60px -14px color-mix(in srgb, var(--primary) 45%, transparent);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  transition: box-shadow .3s var(--motion-easing, ease);
}
.login-card:focus-within {
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent),
    0 26px 70px -14px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* ── Footer ── */
.hrms-footer {
  background: #1e293b;
  color: #94a3b8;
  padding: 3rem 0 2rem;
  margin-top: auto;
}
.hrms-footer a { color: #94a3b8; transition: color .15s; }
.hrms-footer a:hover { color: #e2e8f0; }
.hrms-footer .footer-brand {
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: #fff; margin-bottom: .5rem;
}
.hrms-footer .footer-divider { border-color: #334155; }

/* Portal footer — inherited from base.html on every /portal/ and /me/ page,
   but until now always hardcoded to the public site's fixed dark-navy
   branding regardless of UI theme preset. Re-themed to share the sidebar's
   own colour identity (so it reads as the same "frame" as the sidebar,
   and automatically follows whichever preset/sidebar-accent is active). */
body.portal-page .hrms-footer {
  background: var(--sidebar-bg, #1e293b);
  color: var(--sidebar-text, #94a3b8);
}
body.portal-page .hrms-footer a { color: var(--sidebar-text, #94a3b8); }
body.portal-page .hrms-footer a:hover { color: var(--sidebar-text-hover, #e2e8f0); }
body.portal-page .hrms-footer .footer-brand { color: var(--sidebar-text-hover, #fff); }
body.portal-page .hrms-footer .footer-divider { border-color: var(--sidebar-border, #334155); }

/* Win7 preset — the footer picks up the exact same Aero-glass gradient as
   the sidebar (site.css ~line 460, html[data-portal-preset="win7"]
   .hrms-sidebar) instead of just a flat colour, so it reads as one
   continuous "frame" the way Explorer's own chrome does. */
html[data-portal-preset="win7"] body.portal-page .hrms-footer {
  background: linear-gradient(180deg, #1F3E72 0%, #162E5A 55%, #1A3466 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ── Cookie consent banner ──────────────────────────────────────────────
   A floating card (not an edge-to-edge bar) — the modern convention: it
   reads as a deliberate prompt rather than a strip stealing viewport height
   from every page while it's up. Full-width on mobile, where a floating
   card would eat too much side margin to be worth it. */
.hrms-cookie-banner {
  position: fixed;
  left: 1.25rem; bottom: 1.25rem;
  z-index: 10500;
  width: min(420px, calc(100vw - 2.5rem));
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
}
.hrms-cookie-banner[hidden] { display: none; }
.hrms-cookie-banner-inner {
  padding: 1.25rem 1.35rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.hrms-cookie-banner-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: .65rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 211, 238, .14);
  color: #22d3ee;
  flex-shrink: 0;
}
.hrms-cookie-banner-body { display: flex; flex-direction: column; gap: .3rem; }
.hrms-cookie-banner-title {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #f8fafc;
}
.hrms-cookie-banner-text {
  margin: 0;
  font-size: .8rem;
  line-height: 1.55;
  color: #94a3b8;
}
.hrms-cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: .15rem;
}
.hrms-cookie-btn {
  border: 1px solid transparent;
  border-radius: .5rem;
  padding: .42rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
  white-space: nowrap;
}
.hrms-cookie-btn:active { transform: scale(.97); }
/* Ghost — lowest visual weight, "manage" is an escape hatch, not the ask */
.hrms-cookie-btn-ghost {
  background: transparent;
  color: #94a3b8;
  margin-right: auto;
}
.hrms-cookie-btn-ghost:hover { color: #e2e8f0; text-decoration: underline; }
/* Outline — secondary action */
.hrms-cookie-btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,.18);
  color: #cbd5e1;
}
.hrms-cookie-btn-outline:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
/* Primary — the intended action, given the strongest visual weight */
.hrms-cookie-btn-primary {
  background: #22d3ee;
  color: #04252b;
}
.hrms-cookie-btn-primary:hover { background: #67e3f5; }
.hrms-cookie-btn:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}
.hrms-cookie-cat {
  padding: .65rem 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.hrms-cookie-cat:last-of-type { border-bottom: none; }
@media (max-width: 575.98px) {
  .hrms-cookie-banner { left: .6rem; right: .6rem; bottom: .6rem; width: auto; }
  .hrms-cookie-banner-actions { flex-direction: column; align-items: stretch; }
  .hrms-cookie-btn-ghost { margin-right: 0; text-align: center; order: 3; }
  .hrms-cookie-btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .hrms-cookie-banner { animation: hrms-cookie-rise .3s cubic-bezier(.16,1,.3,1); }
}
@keyframes hrms-cookie-rise {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Accessibility (WCAG 2.2 AA) ──────────────────────────────────────── */

/* Skip link -- visually hidden until it receives keyboard focus, then
   appears as the very first thing a keyboard/screen-reader user encounters,
   letting them jump past the nav straight to <main id="main-content">. */
.hrms-skip-link {
  position: absolute;
  top: -3rem;
  left: .75rem;
  z-index: 100000;
  background: #111827;
  color: #fff;
  padding: .6rem 1rem;
  border-radius: .5rem;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.hrms-skip-link:focus {
  top: .75rem;
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Visible keyboard-focus indicator everywhere (SC 2.4.7 / 2.4.11), even on
   elements that set outline:none for the mouse-click state elsewhere --
   :focus-visible only matches keyboard/programmatic focus in modern
   browsers, so a mouse click never triggers this ring. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .form-check-input:focus-visible {
  outline: 2px solid var(--primary, #4f46e5) !important;
  outline-offset: 2px !important;
}

/* Respect the OS-level "reduce motion" preference (SC 2.3.3) -- shortens
   or removes decorative animation/transition instead of stripping it
   outright, so state changes are still perceivable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Page header ── */
.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0 1.25rem;
  margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }

/* ── Accordion ── */
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius) !important; margin-bottom: .5rem; overflow: hidden; }
.accordion-button { font-weight: 600; font-size: .9375rem; }
.accordion-button:not(.collapsed) { background: var(--primary-light); color: var(--primary); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

/* ── Tech stack badges ── */
.tech-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid #c7d2fe;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600;
}

/* ── Tabs ── */
.nav-tabs { border-bottom: 2px solid var(--border); }
.nav-tabs .nav-link {
  font-weight: 600; font-size: .875rem;
  color: var(--muted); border: none;
  padding: .75rem 1.25rem;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s;
}
.nav-tabs .nav-link:hover { color: var(--primary); border-bottom-color: var(--border); }
.nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ''; position: absolute; left: .5rem; top: 0; bottom: 0; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 1.5rem; }
.timeline-item::before {
  content: ''; position: absolute; left: -1.1rem; top: .3rem;
  width: .625rem; height: .625rem;
  border-radius: 50%; background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--primary);
}

/* ── News card ── */
.news-date { font-size: .75rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; }

/* ── Utilities ── */
.text-primary { color: var(--primary) !important; }
.bg-primary  { background: var(--primary) !important; }
.bg-surface  { background: var(--surface); }
.rounded-xl  { border-radius: var(--radius); }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow      { box-shadow: var(--shadow) !important; }
.shadow-lg   { box-shadow: var(--shadow-lg) !important; }
.fw-semibold { font-weight: 600; }
.fw-extrabold { font-weight: 800; }
.fs-sm       { font-size: .875rem; }
.fs-xs       { font-size: .75rem; }
.text-muted  { color: var(--muted) !important; }
/* Not a real Bootstrap 5 utility (despite the Bootstrap-style name, which
   several templates already assumed existed) — a flex child's default
   min-width is auto (= its content size), which stops text-truncate /
   wrapping from working inside a flex row on narrow screens. */
.min-width-0 { min-width: 0; }

/* Lucide icon sizing helper */
.icon-sm  { width: 1rem;    height: 1rem;    }
.icon-md  { width: 1.25rem; height: 1.25rem; }
.icon-lg  { width: 1.5rem;  height: 1.5rem;  }

/* ── Responsive sidebar ── */
@media (max-width: 767.98px) {
  .hrms-sidebar { min-height: auto; position: static; margin-bottom: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE  —  Bootstrap 5.3+ data-bs-theme="dark" + custom overrides
   All custom CSS vars are re-declared; Bootstrap handles its own tokens.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme toggle button (shared between navbar & sidebar footer) ── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: .5rem;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-bs-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Dark custom properties ── */
[data-bs-theme="dark"] {
  --bg:            #0f172a;
  --surface:       #1e293b;
  --text:          #e2e8f0;
  --muted:         #94a3b8;
  --border:        #334155;
  --primary-light: rgba(99,102,241,.15);
  color-scheme: dark;
}

/* ── Base ── */
[data-bs-theme="dark"] body  { background: var(--bg); color: var(--text); }
/* :where(...) wraps ONLY the attribute selector so it contributes ZERO
   specificity, leaving the bare `a`/`a:hover` type-selector specificity
   ((0,0,1) / (0,1,1)) intact — enough to beat the equivalent light-mode
   `a`/`a:hover` rules above (same specificity, later source order wins)
   but, critically, LOWER than any single class selector. Previously this
   was plain `[data-bs-theme="dark"] a`, an attribute+tag selector at
   (0,1,1)/(0,2,1) — HIGHER than a lone class like `.btn-primary` (0,1,0)
   — so it silently beat every class-styled anchor that doesn't happen to
   carry its own dark-mode color override: .btn-primary, .msgc-compose-btn,
   .btn-nav-cta, .profile-section-link, .portal-subnav-link, and any future
   one-off "anchor styled as a button/nav-item/card" component, each
   rendering invisible (indigo-on-indigo) in dark mode until individually
   excluded. Rather than keep chasing that allowlist one class at a time,
   :where() makes this rule structurally unable to ever outrank a class
   selector again — it only colors anchors with no styling opinion of
   their own (genuine inline prose links), which is what a "plain link
   color" reset is supposed to do. */
:where([data-bs-theme="dark"]) a       { color: #818cf8; }
:where([data-bs-theme="dark"]) a:hover { color: #a5b4fc; }

/* ── Navbar ── */
[data-bs-theme="dark"] .hrms-nav { background: #0f172a; border-bottom-color: #334155; }
[data-bs-theme="dark"] .hrms-nav .nav-link { color: #94a3b8; }
[data-bs-theme="dark"] .hrms-nav .nav-link:hover { color: #e2e8f0; }
[data-bs-theme="dark"] .hrms-nav .nav-link.active { color: #a5b4fc; }
[data-bs-theme="dark"] .hrms-nav .navbar-toggler { border-color: #334155; }
[data-bs-theme="dark"] .hrms-nav .navbar-toggler svg { color: #94a3b8; }

/* ── Sidebar ──
   Reads var(--sidebar-bg) rather than a hardcoded hex so that toggling dark
   mode on top of a non-dark UI preset (Red/Blue/Simple/...) doesn't stomp
   that preset's own --sidebar-bg back to an unrelated navy-black. */
[data-bs-theme="dark"] .hrms-sidebar { background: var(--sidebar-bg, #080f1e); }

/* ── Cards ── */
[data-bs-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
[data-bs-theme="dark"] .card-header { background: transparent; border-bottom-color: var(--border); color: var(--muted); }
[data-bs-theme="dark"] .card-body { color: var(--text); }

/* ── Tables ── */
[data-bs-theme="dark"] .hrms-table thead th { background: #0f172a; color: var(--muted); border-bottom-color: var(--border); }
[data-bs-theme="dark"] .hrms-table tbody tr:hover { background: rgba(99,102,241,.07); }
[data-bs-theme="dark"] .hrms-table tbody td { border-bottom-color: var(--border); color: var(--text); }

/* ── Forms ── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #1e293b; color: var(--text); border-color: #334155;
  color-scheme: dark;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #64748b; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #1e293b; color: var(--text);
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}
[data-bs-theme="dark"] .form-label { color: var(--text); }
[data-bs-theme="dark"] .form-check-input { background-color: #334155; border-color: #475569; }
[data-bs-theme="dark"] .form-text  { color: #64748b; }
[data-bs-theme="dark"] .input-group-text { background-color: #334155; border-color: #334155; color: var(--muted); }

/* ── Buttons ──
   .btn-outline-secondary/.btn-light are now token-driven year-round (see
   the base rules above), so Dark preset's own --surface/--border/--text
   already produce the right look here without a hardcoded override —
   keeping one would just fight the token values with stale hex. */
[data-bs-theme="dark"] .btn-link { color: #818cf8; }
[data-bs-theme="dark"] .btn-link:hover { color: #a5b4fc; }

/* ── Badges (semantic) ── */
[data-bs-theme="dark"] .badge-present  { background: rgba(16,185,129,.2);  color: #6ee7b7; }
[data-bs-theme="dark"] .badge-late     { background: rgba(245,158,11,.2);  color: #fcd34d; }
[data-bs-theme="dark"] .badge-absent   { background: rgba(239,68,68,.2);   color: #fca5a5; }
[data-bs-theme="dark"] .badge-leave    { background: rgba(14,165,233,.2);  color: #7dd3fc; }
[data-bs-theme="dark"] .badge-pending  { background: rgba(245,158,11,.2);  color: #fcd34d; }
[data-bs-theme="dark"] .badge-approved { background: rgba(16,185,129,.2);  color: #6ee7b7; }
[data-bs-theme="dark"] .badge-rejected { background: rgba(239,68,68,.2);   color: #fca5a5; }
[data-bs-theme="dark"] .badge-hr       { background: rgba(99,102,241,.2);  color: #a5b4fc; }
[data-bs-theme="dark"] .badge-admin    { background: rgba(139,92,246,.2);  color: #c4b5fd; }
[data-bs-theme="dark"] .badge-employee { background: rgba(148,163,184,.1); color: #cbd5e1; }

/* ── Alerts ── */
[data-bs-theme="dark"] .alert-info    { background: rgba(14,165,233,.15);  color: #7dd3fc; border-color: rgba(14,165,233,.3); }
[data-bs-theme="dark"] .alert-success { background: rgba(16,185,129,.15);  color: #6ee7b7; border-color: rgba(16,185,129,.3); }
[data-bs-theme="dark"] .alert-warning { background: rgba(245,158,11,.15);  color: #fcd34d; border-color: rgba(245,158,11,.3); }
[data-bs-theme="dark"] .alert-danger  { background: rgba(239,68,68,.15);   color: #fca5a5; border-color: rgba(239,68,68,.3); }
[data-bs-theme="dark"] .alert-primary { background: rgba(99,102,241,.15);  color: #a5b4fc; border-color: rgba(99,102,241,.3); }

/* ── Employee registration workspace ── */
.emp-register-shell {
  display: grid;
  gap: 1.25rem;
}
.emp-register-hero {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(99,102,241,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(14,165,233,.08) 0%, transparent 40%),
    linear-gradient(135deg, var(--surface) 0%, rgba(241,245,249,.55) 100%);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(255,255,255,.5) inset;
  padding: 1.5rem 1.5rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.emp-register-hero::before {
  content: '';
  position: absolute;
  top: -2rem; right: -2rem;
  width: 12rem; height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.08) 0%, transparent 70%);
  pointer-events: none;
}
.emp-register-title {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: .3rem;
  background: linear-gradient(135deg, var(--text) 0%, rgba(var(--bs-primary-rgb),.75) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.emp-register-subtitle {
  color: var(--muted);
  margin-bottom: 0;
  max-width: 58rem;
  font-size: .88rem;
}
.emp-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.emp-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: .9rem 1rem;
  box-shadow: var(--shadow-sm);
}
.emp-stat-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.emp-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
  margin-top: .15rem;
}
.emp-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .875rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  overflow: hidden;
  transition: box-shadow .2s;
}
.emp-panel:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.05); }
.emp-panel-header {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(241,245,249,.45) 100%);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.emp-panel-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: -.025em;
}
.emp-panel-copy {
  color: var(--muted);
  margin: .2rem 0 0;
  font-size: .83rem;
  line-height: 1.5;
}
.emp-import-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: .875rem;
}
.emp-help-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-light) 72%, var(--surface) 28%) 0%, var(--surface) 100%);
  border: 1px solid color-mix(in srgb, var(--primary-light) 64%, var(--border) 36%);
  border-radius: 1rem;
  padding: 1rem;
}
.emp-result-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .3rem .65rem;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .02em;
}
.emp-result-badge.created { background: #dcfce7; color: #166534; }
.emp-result-badge.failed { background: #fee2e2; color: #991b1b; }
.emp-result-badge.blocked { background: #fef3c7; color: #92400e; }
.emp-upload-summary {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Dark mode: register workspace */
[data-bs-theme="dark"] .emp-register-hero,
[data-bs-theme="dark"] .emp-stat-card,
[data-bs-theme="dark"] .emp-panel {
  background: var(--surface);
  border-color: var(--border);
}
[data-bs-theme="dark"] .emp-register-hero {
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.16), transparent 34%),
    linear-gradient(135deg, #111827 0%, #0f172a 100%);
}
[data-bs-theme="dark"] .emp-panel-header {
  background: linear-gradient(180deg, #1e293b 0%, #111827 100%);
}
[data-bs-theme="dark"] .emp-help-card {
  background: linear-gradient(135deg, rgba(99,102,241,.12) 0%, #111827 100%);
  border-color: rgba(99,102,241,.25);
}
[data-bs-theme="dark"] .emp-result-badge.created { background: rgba(16,185,129,.18); color: #6ee7b7; }
[data-bs-theme="dark"] .emp-result-badge.failed { background: rgba(239,68,68,.18); color: #fca5a5; }
[data-bs-theme="dark"] .emp-result-badge.blocked { background: rgba(245,158,11,.18); color: #fcd34d; }

/* ── Employee registration: industry-standard stepper ── */
.emp-stepper {
  list-style: none;
  margin: 0 0 2rem;
  padding: .5rem 0;
  display: flex;
  position: relative;
}
.emp-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border: none;
  user-select: none;
}
/* Connector line */
.emp-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(1.4rem - 1px);
  left: calc(50% + 1.5rem);
  width: calc(100% - 3rem);
  height: 2px;
  background: var(--border);
  z-index: 0;
  transition: background .4s ease;
  border-radius: 999px;
}
.emp-step.is-done:not(:last-child)::after {
  background: linear-gradient(90deg, var(--success), rgba(34,197,94,.5));
}

.emp-step-circle {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  color: var(--muted);
  position: relative;
  z-index: 1;
  transition: border-color .3s, background .3s, box-shadow .3s, color .3s, transform .2s;
  margin-bottom: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.emp-step-num { line-height: 1; }
.emp-step-check { display: none; }
.emp-step.is-done .emp-step-num  { display: none; }
.emp-step.is-done .emp-step-check { display: block; }
.emp-step.is-active .emp-step-circle {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary) 0%, rgba(79,70,229,.8) 100%);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(79,70,229,.15), 0 4px 12px rgba(79,70,229,.3);
  transform: scale(1.08);
}
.emp-step.is-done .emp-step-circle {
  border-color: transparent;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34,197,94,.25);
}
.emp-step-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  transition: color .25s, font-weight .15s;
  letter-spacing: .01em;
}
.emp-step.is-active .emp-step-label { color: var(--primary); font-weight: 700; }
.emp-step.is-done   .emp-step-label { color: #16a34a; font-weight: 600; }
.emp-step-panel { display: none; }
.emp-step-panel.is-active { display: block; }

/* Camera */
.emp-camera-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0f172a;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
}
.emp-camera-video, .emp-camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.emp-camera-canvas { display: none; }
.emp-camera-idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: #94a3b8;
}

/* Step-2 mini card */
.emp-card-mini {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(241,245,249,.6) 100%);
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .8rem 1rem;
}
.emp-card-mini-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.emp-card-mini-value { font-weight: 700; font-size: 1.05rem; margin-top: .1rem; }
.emp-card-mini-sub { color: var(--muted); font-size: .85rem; }

/* Step-3 summary card */
.emp-summary-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--surface) 0%, rgba(241,245,249,.6) 100%);
}
.emp-summary-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: .85rem;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emp-summary-photo img { width: 100%; height: 100%; object-fit: cover; }
.emp-summary-photo-placeholder { color: #64748b; font-size: .85rem; font-weight: 600; }
.emp-summary-name { font-weight: 800; font-size: 1.1rem; }
.emp-summary-number { font-weight: 700; color: var(--primary); font-size: .9rem; letter-spacing: .04em; }
.emp-summary-meta { color: var(--muted); font-size: .85rem; }

/* Tooltip badge in dropzone */
.emp-tooltip-badge {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-light) 80%, var(--surface));
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary-light) 60%, var(--border));
  font-size: .72rem;
  font-weight: 700;
  cursor: help;
  z-index: 2;
  transition: background .15s;
}
.emp-tooltip-badge:hover { background: var(--primary-light); }

/* ── Enhanced CSV drop zone ── */
.emp-dropzone {
  border: 1.5px dashed color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 8%, var(--surface)) 0%, var(--surface) 100%);
  border-radius: 1rem;
  padding: .75rem;
  transition: border-color .2s, background .2s;
}
.emp-dropzone:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.emp-drop-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 1.75rem 1rem;
  border-radius: .75rem;
  cursor: pointer;
  text-align: center;
  color: var(--muted);
  transition: background .2s;
}
.emp-drop-area:hover, .emp-drop-area.has-file { background: color-mix(in srgb, var(--primary-light) 18%, var(--surface)); }
.emp-drop-area.is-dragover {
  background: color-mix(in srgb, var(--primary-light) 30%, var(--surface));
  outline: 2px dashed var(--primary);
  outline-offset: -4px;
}
.emp-drop-icon { color: var(--primary); opacity: .75; margin-bottom: .2rem; flex-shrink: 0; }
.emp-drop-title { font-weight: 700; font-size: .9rem; color: var(--text); }
.emp-drop-hint { font-size: .8rem; color: var(--muted); }
.emp-drop-link { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* File selection info card */
.emp-file-info {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .85rem;
  margin-top: .5rem;
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
  border-radius: .75rem;
}
.emp-file-info-icon { color: var(--success); flex-shrink: 0; }
.emp-file-info-body { flex: 1; min-width: 0; }
.emp-file-info-name { font-weight: 700; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-file-info-size { font-size: .74rem; color: var(--muted); margin-top: .05rem; }
.emp-file-clear-btn {
  background: none;
  border: none;
  padding: .3rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: .35rem;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.emp-file-clear-btn:hover { background: rgba(239,68,68,.12); color: #dc2626; }

/* Bulk progress */
.emp-bulk-progress {
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: .9rem 1rem;
  background: var(--surface);
}
.emp-bulk-log {
  margin-top: .65rem;
  max-height: 8rem;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: .5rem;
}
.emp-bulk-log-line.is-fail { color: #b91c1c; }

/* Dark mode: stepper, camera, dropzone, progress */
[data-bs-theme="dark"] .emp-step-circle { border-color: #334155; background: #1e293b; color: #94a3b8; }
[data-bs-theme="dark"] .emp-step.is-active .emp-step-circle {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
[data-bs-theme="dark"] .emp-step.is-done .emp-step-circle { border-color: var(--success); background: var(--success); color: #fff; }
[data-bs-theme="dark"] .emp-step-label { color: #64748b; }
[data-bs-theme="dark"] .emp-step.is-active .emp-step-label { color: #a5b4fc; }
[data-bs-theme="dark"] .emp-step.is-done .emp-step-label { color: #6ee7b7; }
[data-bs-theme="dark"] .emp-step:not(:last-child)::after { background: #334155; }
[data-bs-theme="dark"] .emp-step.is-done:not(:last-child)::after { background: var(--success); }
[data-bs-theme="dark"] .emp-card-mini,
[data-bs-theme="dark"] .emp-summary-card { background: linear-gradient(135deg, #111827 0%, #0f172a 100%); border-color: #334155; }
[data-bs-theme="dark"] .emp-summary-photo { background: #1e293b; }
[data-bs-theme="dark"] .emp-summary-photo-placeholder { color: #94a3b8; }
[data-bs-theme="dark"] .emp-tooltip-badge { background: rgba(99,102,241,.18); color: #a5b4fc; border-color: rgba(99,102,241,.35); }
[data-bs-theme="dark"] .emp-dropzone { background: linear-gradient(180deg, rgba(99,102,241,.05) 0%, #0f172a 100%); border-color: rgba(99,102,241,.28); }
[data-bs-theme="dark"] .emp-drop-area:hover,
[data-bs-theme="dark"] .emp-drop-area.has-file { background: rgba(99,102,241,.1); }
[data-bs-theme="dark"] .emp-drop-area.is-dragover { background: rgba(99,102,241,.18); }
[data-bs-theme="dark"] .emp-file-info { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.22); }
[data-bs-theme="dark"] .emp-bulk-progress { background: #0f172a; border-color: #334155; }
[data-bs-theme="dark"] .emp-bulk-log { border-top-color: #334155; }
[data-bs-theme="dark"] .emp-bulk-log-line.is-fail { color: #fca5a5; }

/* ── Register page: mobile / responsive improvements ─────────────────── */
@media (max-width: 767px) {
  /* Tighten hero + panel padding on small screens */
  .emp-register-hero { padding: .9rem 1rem .75rem; }
  .emp-panel-header   { padding: .85rem 1rem; }
  /* Prevent horizontal overflow */
  .emp-register-shell { overflow-x: clip; }
  /* Camera stage can be slightly shorter on phones */
  .emp-camera-stage   { aspect-ratio: 16 / 10; }
  /* HID hint text can be hidden on very narrow viewports to save space */
  #empHidHint { display: none; }
}
@media (max-width: 575px) {
  .emp-stepper { gap: .5rem; }
  .emp-step-label { font-size: .72rem; }
  .emp-step-circle { width: 2rem; height: 2rem; font-size: .78rem; }
  .emp-step:not(:last-child)::after { top: calc(1rem - 1px); left: calc(50% + 1.1rem); width: calc(100% - 2.2rem); }
  /* Even tighter padding on xs */
  .emp-register-hero { padding: .75rem .85rem .65rem; }
  .emp-panel-header   { padding: .75rem .85rem; }
  /* Allow camera to breathe on small phones */
  .emp-camera-stage   { aspect-ratio: 4 / 3; }
  /* QR code thumbnail: smaller on xs to avoid layout push */
  #empQrImg, #empQrPlaceholder { width: 80px !important; height: 80px !important; }
}

/* ── Modals & dropdowns — token-driven year-round now (see the base
   .dropdown-menu/.dropdown-item rules above), not just under dark mode. ── */
.modal-content { background: var(--surface); border-color: var(--border); }
.modal-header  { border-bottom-color: var(--border); }
.modal-footer  { border-top-color: var(--border); }
[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(99,102,241,.15); color: #a5b4fc; }
[data-bs-theme="dark"] .dropdown-divider { border-color: #334155; }

/* ── List groups ── */
[data-bs-theme="dark"] .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-bs-theme="dark"] .list-group-item:hover { background: rgba(99,102,241,.07); }

/* ── Tabs ── */

/* ══════════════════════════════════════════════
   Toast Notification System (config-driven)
   ══════════════════════════════════════════════ */
#hrms-toast-container { max-width: 420px; }
.hrms-toast-wrap {
  pointer-events: all;
  animation: hrmsToastIn .3s cubic-bezier(.34,1.4,.64,1);
  will-change: transform, opacity;
  transform-origin: right center;
}
#hrms-toast-container[data-pos-type="bottom"] .hrms-toast-wrap {
  animation-name: hrmsToastInBottom;
  transform-origin: right bottom;
}
.hrms-toast-wrap.hrms-toast-out {
  animation: hrmsToastOut .28s ease forwards !important;
  pointer-events: none;
}
#hrms-toast-container[data-pos-type="bottom"] .hrms-toast-wrap.hrms-toast-out {
  animation-name: hrmsToastOutBottom !important;
}
@keyframes hrmsToastIn        { from { opacity:0; transform:translateX(16px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes hrmsToastInBottom  { from { opacity:0; transform:translateY(10px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes hrmsToastOut        { from { opacity:1; max-height:200px; } to { opacity:0; transform:translateX(16px) scale(.94); max-height:0; margin-bottom:0; overflow:hidden; } }
@keyframes hrmsToastOutBottom  { from { opacity:1; max-height:200px; } to { opacity:0; transform:translateY(8px) scale(.94); max-height:0; margin-bottom:0; overflow:hidden; } }
.hrms-toast {
  display: flex;
  border-radius: .9rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.05);
  overflow: hidden;
  min-width: 280px;
  max-width: 420px;
}
.hrms-toast-strip  { width: 4px; flex-shrink: 0; }
.hrms-toast-inner  { flex: 1; padding: .8rem 1rem; }
.hrms-toast-inner.filled { padding: .8rem 1rem; }
.hrms-toast-header { display: flex; align-items: center; gap: .45rem; }
.hrms-toast-icon   { display: flex; align-items: center; flex-shrink: 0; }
.hrms-toast-title  { font-weight: 700; font-size: .875rem; flex: 1; min-width: 0; }
.hrms-toast-close  {
  background: none; border: none; padding: .25rem; cursor: pointer; line-height: 1;
  border-radius: .35rem; display: inline-flex; align-items: center; flex-shrink: 0;
  opacity: .6; transition: opacity .15s, background .15s;
}
.hrms-toast-close:hover { opacity: 1; background: rgba(0,0,0,.08); }
.hrms-toast-body   { font-size: .82rem; line-height: 1.45; margin-top: .3rem; }

/* ── Toast settings page: position picker ── */
.toast-pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  max-width: 210px;
}
.toast-pos-btn {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: .5rem;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: .28rem .32rem;
  transition: border-color .15s, background .15s;
}
.toast-pos-btn[data-pos^="bottom"] { align-items: flex-end; }
.toast-pos-btn[data-pos*="center"] { justify-content: center; }
.toast-pos-btn[data-pos*="start"]  { justify-content: flex-start; }
.toast-pos-dot {
  width: 11px; height: 7px;
  background: var(--muted);
  border-radius: 2px;
  transition: background .15s;
}
.toast-pos-btn.is-active             { border-color: var(--primary); background: color-mix(in srgb, var(--primary-light) 28%, var(--surface)); }
.toast-pos-btn.is-active .toast-pos-dot { background: var(--primary); }
.toast-pos-btn:hover:not(.is-active) { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }

/* ── Toast style selector cards ── */
.toast-style-cards { display: flex; gap: .6rem; }
.toast-style-card {
  flex: 1; border: 1.5px solid var(--border); border-radius: .75rem;
  padding: .7rem .75rem; cursor: pointer; transition: border-color .15s, background .15s; text-align: center;
}
.toast-style-card.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary-light) 22%, var(--surface)); }
.toast-style-card:hover:not(.is-active) { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.toast-style-preview {
  border-radius: .45rem; height: 36px; margin-bottom: .45rem;
  display: flex; align-items: center; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
}
.toast-style-preview-strip { width: 4px; height: 100%; background: #4f46e5; flex-shrink: 0; }
.toast-style-preview-body  { flex: 1; padding: .4rem .6rem; }
.toast-style-preview-bar   { background: var(--border); border-radius: 2px; }
.toast-style-preview.filled { background: #4f46e5; border-color: transparent; }
.toast-style-preview.filled .toast-style-preview-bar { background: rgba(255,255,255,.5); }

/* ── Toast color rows ── */
.toast-color-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .8rem;
  border: 1px solid var(--border); border-radius: .65rem; background: var(--surface);
}
.toast-color-swatch { width: .9rem; height: .9rem; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.1); }
.toast-color-label  { font-size: .82rem; font-weight: 600; flex: 1; }
.toast-color-hex    { font-size: .75rem; color: var(--muted); font-family: ui-monospace, monospace; }
input[type="color"].toast-color-input {
  width: 2.1rem; height: 2.1rem; border-radius: .4rem;
  padding: .1rem; cursor: pointer; border: 1px solid var(--border);
}

/* Dark mode overrides for toast settings */
[data-bs-theme="dark"] .toast-pos-btn     { background: #111827; border-color: #334155; }
[data-bs-theme="dark"] .toast-pos-btn.is-active { background: rgba(99,102,241,.18); border-color: #818cf8; }
[data-bs-theme="dark"] .toast-style-card  { background: #111827; border-color: #334155; }
[data-bs-theme="dark"] .toast-style-card.is-active { background: rgba(99,102,241,.18); border-color: #818cf8; }
[data-bs-theme="dark"] .toast-style-preview { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .toast-color-row   { background: #111827; border-color: #334155; }
[data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--border); }
[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--muted); }
[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: #a5b4fc; border-bottom-color: #334155; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: #818cf8; border-bottom-color: #818cf8; }
[data-bs-theme="dark"] .tab-content { background: var(--surface); border-color: var(--border); }

/* ── Accordion ── */
[data-bs-theme="dark"] .accordion-item { background: var(--surface); border-color: var(--border); }
[data-bs-theme="dark"] .accordion-button { background: var(--surface); color: var(--text); }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(99,102,241,.15); color: #a5b4fc; box-shadow: none; }
[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) hue-rotate(180deg); }
[data-bs-theme="dark"] .accordion-body { background: var(--surface); color: var(--text); }

/* ── Page header ── */
[data-bs-theme="dark"] .page-header { background: var(--surface); border-bottom-color: var(--border); }
[data-bs-theme="dark"] .page-header h1 { color: var(--text); }

/* ── Login card ── */
[data-bs-theme="dark"] .login-card { background: var(--surface); border-color: var(--border); }

/* ── Feature cards ── */
[data-bs-theme="dark"] .feature-card { background: var(--surface); border-color: var(--border); }
[data-bs-theme="dark"] .feature-icon { background: rgba(99,102,241,.15); }
[data-bs-theme="dark"] .feature-icon svg { color: #818cf8; }

/* ── Tech badges ── */
[data-bs-theme="dark"] .tech-badge { background: rgba(99,102,241,.15); color: #a5b4fc; border-color: rgba(99,102,241,.3); }

/* ── Timeline ── */
[data-bs-theme="dark"] .timeline::before { background: var(--border); }
[data-bs-theme="dark"] .timeline-item::before { background: #818cf8; border-color: var(--surface); box-shadow: 0 0 0 2px #818cf8; }

/* ── Pagination ── */
/* Unconditional base rules, bound directly to the app's own design tokens
   (--surface/--text/--border/--primary/--muted) instead of leaning on
   Bootstrap's separate --bs-pagination-* variable chain. That chain only
   gets a real second look from this stylesheet for the dark-MODE toggle
   (below) -- it's never been pinned for the 5 UI presets on their own, so
   a page-link could inherit stock Bootstrap blue-on-white regardless of
   which preset (light/classic/modern/win7) was actually active, clashing
   with -- or in some preset/dark-mode combinations, nearly disappearing
   against -- the surrounding themed page. Binding straight to the same
   tokens every other themed component already uses removes that gap. */
.page-link { background: var(--surface); border-color: var(--border); color: var(--text); }
.page-link:hover { background: var(--bg); color: var(--primary); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-item.disabled .page-link { background: var(--surface); color: var(--muted); border-color: var(--border); opacity: .6; }

[data-bs-theme="dark"] .page-link { background: var(--surface); border-color: var(--border); color: #818cf8; }
[data-bs-theme="dark"] .page-link:hover { background: rgba(99,102,241,.15); color: #a5b4fc; }
[data-bs-theme="dark"] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
[data-bs-theme="dark"] .page-item.disabled .page-link { background: var(--surface); color: #475569; border-color: var(--border); }

/* ── Breadcrumb ── */
[data-bs-theme="dark"] .breadcrumb-item { color: var(--muted); }
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #475569; }
[data-bs-theme="dark"] .breadcrumb-item.active { color: var(--text); }

/* ── KPI cards ── */
[data-bs-theme="dark"] .kpi-card { color: inherit; }

/* ── Semantic KPI card color variants (work across all layouts) ── */
.kpi-green  { background: #d1fae5; color: #065f46; }
.kpi-yellow { background: #fef9c3; color: #854d0e; }
.kpi-red    { background: #fee2e2; color: #991b1b; }
.kpi-indigo { background: #e0e7ff; color: #3730a3; }
.kpi-indigo2{ background: #eef2ff; color: #3730a3; }
.kpi-slate  { background: #f1f5f9; color: #0f172a; }
.kpi-cyan   { background: #cffafe; color: #155e75; }
.kpi-pink   { background: #fce7f3; color: #9d174d; }
[data-bs-theme="dark"] .kpi-green  { background: rgba(16,185,129,.2);  color: #6ee7b7; }
[data-bs-theme="dark"] .kpi-yellow { background: rgba(245,158,11,.2);  color: #fcd34d; }
[data-bs-theme="dark"] .kpi-red    { background: rgba(239,68,68,.2);   color: #fca5a5; }
[data-bs-theme="dark"] .kpi-indigo { background: rgba(99,102,241,.2);  color: #a5b4fc; }
[data-bs-theme="dark"] .kpi-indigo2{ background: rgba(99,102,241,.15); color: #a5b4fc; }
[data-bs-theme="dark"] .kpi-slate  { background: rgba(100,116,139,.2); color: #cbd5e1; }
[data-bs-theme="dark"] .kpi-cyan   { background: rgba(6,182,212,.2);   color: #67e8f9; }
[data-bs-theme="dark"] .kpi-pink   { background: rgba(236,72,153,.2);  color: #f9a8d4; }

/* ── Avatar (dark accent colours) ── */
[data-bs-theme="dark"] .avatar-primary  { background: rgba(99,102,241,.2);  color: #a5b4fc; }
[data-bs-theme="dark"] .avatar-success  { background: rgba(16,185,129,.2);  color: #6ee7b7; }
[data-bs-theme="dark"] .avatar-warning  { background: rgba(245,158,11,.2);  color: #fcd34d; }
[data-bs-theme="dark"] .avatar-danger   { background: rgba(239,68,68,.2);   color: #fca5a5; }

/* ── hr element ── */
[data-bs-theme="dark"] hr { border-color: var(--border); opacity: 1; }

/* ── Table Bootstrap default ── */
[data-bs-theme="dark"] .table { color: var(--text); --bs-table-bg: transparent; border-color: var(--border); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background: rgba(99,102,241,.07); }
[data-bs-theme="dark"] .table thead th { border-bottom-color: var(--border); }
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255,255,255,.03); }

/* ── Code / pre ── */
[data-bs-theme="dark"] code { color: #f472b6; background: rgba(244,114,182,.08); padding: .1em .35em; border-radius: .25em; }
[data-bs-theme="dark"] pre  { background: #080f1e; color: #e2e8f0; border: 1px solid var(--border); }


/* ── Employee ID Card ──────────────────────────────────────────────────── */
.emp-id-card {
  width: 324px; height: 204px; border-radius: 8px;
  border: 1px solid #c8d9ea; overflow: hidden; position: relative;
  background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.18);
  font-family: Inter, system-ui, sans-serif; user-select: none;
}
.emp-id-front { display: flex; flex-direction: column; }
.emp-id-band { background: linear-gradient(135deg,#1e40af 0%,#2563eb 60%,#0ea5e9 100%); padding: 6px 10px; flex-shrink: 0; }
.emp-id-band-inner { display: flex; align-items: center; gap: 8px; }
.emp-id-logo-box { width: 28px; height: 28px; background: rgba(255,255,255,.2); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.emp-id-company { font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.emp-id-body { display: flex; flex: 1; padding: 8px 10px 4px; gap: 10px; min-height: 0; }
.emp-id-photo-col { flex-shrink: 0; }
.emp-id-photo-frame { width: 60px; height: 72px; border-radius: 4px; border: 2px solid #e2e8f0; overflow: hidden; background: #f1f5f9; display: flex; align-items: center; justify-content: center; }
.emp-id-photo-ph { display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.emp-id-info-col { flex: 1; min-width: 0; padding-top: 2px; }
.emp-id-emp-name { font-size: 10.5px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-id-emp-pos { font-size: 8.5px; font-weight: 600; color: #2563eb; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-id-emp-dept { font-size: 8px; color: #64748b; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-id-emp-detail { display: flex; align-items: center; gap: 3px; font-size: 7.5px; color: #475569; margin-bottom: 2px; overflow: hidden; }
.emp-id-foot { background: linear-gradient(90deg,#f8fafc,#eff6ff); border-top: 1px solid #e2e8f0; padding: 5px 10px; flex-shrink: 0; }
.emp-id-foot-inner { display: flex; align-items: center; gap: 10px; }
.emp-id-qr-col { flex-shrink: 0; width: 46px; height: 46px; background: #fff; border: 1px solid #e2e8f0; border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.emp-id-qr-ph { font-size: 8px; font-weight: 700; color: #94a3b8; }
.emp-id-sig-col { flex: 1; }
.emp-id-id-number { font-size: 8px; color: #64748b; margin-bottom: 10px; }
.emp-id-id-number span { font-weight: 700; color: #0f172a; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.emp-id-sig-line { border-bottom: 1px solid #64748b; margin-bottom: 2px; }
.emp-id-sig-lbl { font-size: 7px; color: #94a3b8; text-align: center; letter-spacing: .03em; }
.emp-id-back-card { background: linear-gradient(160deg,#f8fafc,#eff6ff); display: flex; flex-direction: column; }
.emp-id-back-header { background: linear-gradient(135deg,#1e40af,#2563eb 60%,#0ea5e9 100%); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 5px 10px; flex-shrink: 0; }
.emp-id-back-body { flex: 1; padding: 7px 10px 4px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.emp-id-bk-label { font-size: 6.5px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1px; }
.emp-id-bk-val { font-size: 8px; color: #1e293b; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-id-bk-val.fw-bold { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.emp-id-back-footer { border-top: 1px solid #e2e8f0; padding: 4px 10px; flex-shrink: 0; }
.emp-id-bk-note { font-size: 6.5px; color: #94a3b8; text-align: center; }

/* ── Real-world Employee ID Card (Flip-card design) ──────────────────────
 *  Landscape: 340×214px  |  Portrait: 214×340px
 *  .rid-scene(.portrait) → .rid-card(.qr-on-front) → .rid-face(.rid-front/.rid-back)
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Scene / card shell ─────────────────────────────────────────────── */
/* zoom (not transform:scale) so every descendant's dozens of hand-tuned
   hardcoded px values -- fonts, padding, the photo box, the QR frame,
   badge sizes -- all stay in exact proportion with zero risk of manually
   rewriting each one individually, AND the surrounding flex-centered
   layout (templates/portal/id_card.html, templates/idcards/card_detail.html)
   correctly reserves the larger box automatically (transform alone would
   leave the old, smaller layout footprint and either clip or misalign the
   now-bigger visual). Applies to every .rid-scene instance including the
   small branding-preview thumbnail in templates/idcards/card_list.html,
   whose own transform:scale() is compensated below so that one specific
   compact widget keeps its original size instead of growing too. */
.rid-scene { width: 340px; height: 214px; perspective: 1100px; display: inline-block; position: relative; zoom: 1.8; transition: width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1); }
.rid-scene.portrait { width: 214px; height: 340px; }

.rid-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.rid-card.is-flipped { transform: rotateY(180deg); }

/* ── Face base ──────────────────────────────────────────────────────── */
.rid-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 13px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 3px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.12); font-family: Inter, 'Segoe UI', system-ui, sans-serif; user-select: none; display: flex; flex-direction: column; }
.rid-front { background: #ffffff; border: 1px solid rgba(0,0,0,.05); }
.rid-back { background: linear-gradient(155deg,#eaf0fe 0%,#eff6ff 55%,#f0fdf4 100%); transform: rotateY(180deg); border: 1px solid rgba(30,58,138,.07); }

/* ── Left accent strip (front landscape only) ───────────────────────── */
.rid-front::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#1e3a8a 0%,#1d4ed8 50%,#0284c7 100%); z-index:2; }
.rid-scene.portrait .rid-front::before { display: none; }

/* ── Header ──────────────────────────────────────────────────────────── */
.rid-header { background: linear-gradient(125deg,#1e3a8a 0%,#2563eb 45%,#0369a1 100%); padding: 7px 10px 7px 16px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; overflow: hidden; }
.rid-scene.portrait .rid-header { padding: 8px 12px; }
.rid-header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 85% 40%, rgba(255,255,255,.18) 0%, transparent 65%); pointer-events:none; }
.rid-header::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 8px); pointer-events:none; }

.rid-logo { width: 32px; height: 32px; border-radius: 7px; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.32); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; position: relative; z-index: 1; }
.rid-logo img { width: 100%; height: 100%; object-fit: contain; }
.rid-co-block { flex: 1; min-width: 0; position: relative; z-index: 1; }
.rid-co-name { font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rid-co-sub { font-size: 6px; color: rgba(255,255,255,.72); letter-spacing: .05em; text-transform: uppercase; margin-top: 1px; }
.rid-emp-badge { font-size: 5.5px; font-weight: 800; background: rgba(255,255,255,.15); color: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.3); border-radius: 3px; padding: 2px 5px; letter-spacing: .1em; text-transform: uppercase; flex-shrink: 0; position: relative; z-index: 1; }

/* ── Body (landscape) ────────────────────────────────────────────────── */
.rid-body { display: flex; flex: 1; padding: 7px 10px 5px 15px; gap: 9px; overflow: hidden; }

/* Portrait body */
.rid-scene.portrait .rid-body { flex-direction: column; padding: 8px 12px 5px; gap: 6px; }

.rid-photo-col { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
/* Portrait photo col */
.rid-scene.portrait .rid-photo-col { flex-direction: row; width: 100%; justify-content: center; align-items: flex-start; gap: 10px; }

.rid-photo { width: 84px; height: 84px; border-radius: 6px; border: 1px solid rgba(191,219,254,.45); overflow: hidden; background: #f1f5f9; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(37,99,235,.12); }
.rid-scene.portrait .rid-photo { width: 100px; height: 100px; }
.rid-photo img { width: 100%; height: 100%; object-fit: cover; }
.rid-photo-ph { color: #94a3b8; }

.rid-sig-area { width: 66px; margin-top: auto; padding-top: 4px; }
.rid-scene.portrait .rid-sig-area { display: none; }
.rid-sig-line { border-bottom: 1.5px solid #cbd5e1; margin-bottom: 2px; }
.rid-sig-lbl { font-size: 5px; color: #94a3b8; text-align: center; letter-spacing: .04em; text-transform: uppercase; }

.rid-info { flex: 1; min-width: 0; padding-top: 1px; display: flex; flex-direction: column; overflow: hidden; }
.rid-scene.portrait .rid-info { align-items: center; text-align: center; }
.rid-scene.portrait .rid-name,
.rid-scene.portrait .rid-pos,
.rid-scene.portrait .rid-dept { text-align: center; }
.rid-scene.portrait .rid-info-divider { margin-left: auto; margin-right: auto; }
.rid-scene.portrait .rid-row { justify-content: center; }
.rid-name { font-size: 11.5px; font-weight: 900; color: #0f172a; letter-spacing: -.02em; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rid-pos { font-size: 7.5px; font-weight: 700; color: #1d4ed8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rid-dept { font-size: 7px; color: #64748b; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rid-info-divider { width: 22px; height: 2px; background: linear-gradient(90deg,#1d4ed8,#0284c7,transparent); border-radius: 2px; margin-bottom: 4px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════
   ID Card Colour Themes
   Apply the class  .rid-theme-<name>  on the .rid-scene (or any ancestor).
   Default (blue corporate) needs no extra class.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Emerald Professional ── */
.rid-theme-emerald .rid-header,
.rid-theme-emerald .rid-back-header  { background: linear-gradient(125deg,#064e3b 0%,#059669 45%,#0d9488 100%); }
.rid-theme-emerald .rid-front::before { background: linear-gradient(180deg,#064e3b 0%,#059669 50%,#0d9488 100%); }
.rid-theme-emerald .rid-foot          { border-top-color: #059669; }
.rid-theme-emerald .rid-scene:not(.portrait) .rid-foot::before { background: linear-gradient(180deg,#f59e0b 0%,#d97706 100%); }
.rid-theme-emerald .rid-info-divider  { background: linear-gradient(90deg,#059669,#0d9488,transparent); }
.rid-theme-emerald .rid-pos           { color: #065f46; }
.rid-theme-emerald .rid-bk-label      { color: #059669; }
.rid-theme-emerald .rid-qr-frame      { border-color: #a7f3d0; box-shadow: 0 2px 10px rgba(5,150,105,.18), 0 0 0 3px rgba(167,243,208,.5); }
.rid-theme-emerald .rid-back          { background: linear-gradient(155deg,#ecfdf5 0%,#f0fdfa 55%,#f0fdf4 100%); border-color: rgba(5,150,105,.1); }

/* ── Midnight Slate ── */
.rid-theme-midnight .rid-header,
.rid-theme-midnight .rid-back-header  { background: linear-gradient(125deg,#0f172a 0%,#1e293b 45%,#334155 100%); }
.rid-theme-midnight .rid-front::before { background: linear-gradient(180deg,#0f172a 0%,#1e293b 50%,#334155 100%); }
.rid-theme-midnight .rid-foot          { border-top-color: #7c3aed; }
.rid-theme-midnight .rid-scene:not(.portrait) .rid-foot::before { background: linear-gradient(180deg,#7c3aed 0%,#6366f1 100%); }
.rid-theme-midnight .rid-info-divider  { background: linear-gradient(90deg,#7c3aed,#6366f1,transparent); }
.rid-theme-midnight .rid-pos           { color: #7c3aed; }
.rid-theme-midnight .rid-bk-label      { color: #7c3aed; }
.rid-theme-midnight .rid-qr-frame      { border-color: #ddd6fe; box-shadow: 0 2px 10px rgba(124,58,237,.18), 0 0 0 3px rgba(221,214,254,.5); }
.rid-theme-midnight .rid-photo         { border-color: #ddd6fe; box-shadow: 0 2px 10px rgba(124,58,237,.18), 0 0 0 4px rgba(237,233,254,.45); }
.rid-theme-midnight .rid-back          { background: linear-gradient(155deg,#f5f3ff 0%,#ede9fe 30%,#f0f4ff 100%); border-color: rgba(124,58,237,.1); }

/* ── Ruby Enterprise ── */
.rid-theme-ruby .rid-header,
.rid-theme-ruby .rid-back-header      { background: linear-gradient(125deg,#7f1d1d 0%,#dc2626 45%,#e11d48 100%); }
.rid-theme-ruby .rid-front::before    { background: linear-gradient(180deg,#7f1d1d 0%,#dc2626 50%,#e11d48 100%); }
.rid-theme-ruby .rid-foot             { border-top-color: #dc2626; }
.rid-theme-ruby .rid-scene:not(.portrait) .rid-foot::before { background: linear-gradient(180deg,#f97316 0%,#f59e0b 100%); }
.rid-theme-ruby .rid-info-divider     { background: linear-gradient(90deg,#dc2626,#e11d48,transparent); }
.rid-theme-ruby .rid-pos              { color: #be123c; }
.rid-theme-ruby .rid-bk-label         { color: #dc2626; }
.rid-theme-ruby .rid-qr-frame         { border-color: #fecaca; box-shadow: 0 2px 10px rgba(220,38,38,.18), 0 0 0 3px rgba(254,202,202,.5); }
.rid-theme-ruby .rid-photo            { border-color: #fecaca; box-shadow: 0 2px 10px rgba(220,38,38,.18), 0 0 0 4px rgba(254,226,226,.45); }
.rid-theme-ruby .rid-back             { background: linear-gradient(155deg,#fff1f2 0%,#ffe4e6 30%,#fef2f2 100%); border-color: rgba(220,38,38,.1); }

/* ── Violet Modern ── */
.rid-theme-violet .rid-header,
.rid-theme-violet .rid-back-header    { background: linear-gradient(125deg,#4c1d95 0%,#7c3aed 45%,#6366f1 100%); }
.rid-theme-violet .rid-front::before  { background: linear-gradient(180deg,#4c1d95 0%,#7c3aed 50%,#6366f1 100%); }
.rid-theme-violet .rid-foot           { border-top-color: #7c3aed; }
.rid-theme-violet .rid-scene:not(.portrait) .rid-foot::before { background: linear-gradient(180deg,#06b6d4 0%,#0891b2 100%); }
.rid-theme-violet .rid-info-divider   { background: linear-gradient(90deg,#7c3aed,#6366f1,transparent); }
.rid-theme-violet .rid-pos            { color: #6d28d9; }
.rid-theme-violet .rid-bk-label       { color: #7c3aed; }
.rid-theme-violet .rid-qr-frame       { border-color: #ddd6fe; box-shadow: 0 2px 10px rgba(124,58,237,.18), 0 0 0 3px rgba(221,214,254,.5); }
.rid-theme-violet .rid-photo          { border-color: #ddd6fe; box-shadow: 0 2px 10px rgba(124,58,237,.18), 0 0 0 4px rgba(237,233,254,.45); }
.rid-theme-violet .rid-back           { background: linear-gradient(155deg,#faf5ff 0%,#ede9fe 30%,#eef2ff 100%); border-color: rgba(99,102,241,.1); }
.rid-row { display: flex; align-items: flex-start; gap: 3px; font-size: 7px; color: #475569; margin-bottom: 2.5px; overflow: hidden; }
.rid-row-icon { flex-shrink: 0; color: #93c5fd; margin-top: .5px; }
.rid-row-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.rid-row-val.addr { white-space: normal; line-height: 1.35; max-height: 2.7em; overflow: hidden; }

/* ── Front QR (shown when qr-on-front) ──────────────────────────────── */
.rid-front-qr { display: none; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-top: 2px; }
.rid-card.qr-on-front .rid-front-qr { display: flex; }
.rid-card.qr-on-front .rid-back .rid-qr-zone { visibility: hidden; }
.rid-front-qr .rid-qr-frame { width: 52px; height: 52px; }
.rid-front-qr .rid-qr-lbl { font-size: 5px; color: #94a3b8; text-align: center; letter-spacing: .04em; text-transform: uppercase; }
/* Portrait qr-on-front */
.rid-scene.portrait .rid-card.qr-on-front .rid-body { flex-direction: row; }
.rid-scene.portrait .rid-card.qr-on-front .rid-photo-col { flex-direction: column; align-items: center; justify-content: flex-start; }
.rid-scene.portrait .rid-card.qr-on-front .rid-front-qr { padding-top: 6px; }
.rid-scene.portrait .rid-card.qr-on-front .rid-front-qr .rid-qr-frame { width: 56px; height: 56px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.rid-foot { background: linear-gradient(90deg,#f8fafc,#eff6ff 100%); border-top: 1px solid #e2e8f0; padding: 4px 10px 4px 15px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; }
.rid-foot::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#fbbf24 0%,#f59e0b 100%); }
.rid-scene.portrait .rid-foot { padding: 4px 12px; border-top: 2px solid #1d4ed8; justify-content: center; gap: 12px; }
.rid-scene.portrait .rid-foot::before { display: none; }
.rid-foot-idno { font-size: 7.5px; color: #64748b; }
.rid-foot-idno strong { color: #0f172a; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 8px; }
.rid-foot-valid { margin-left: auto; font-size: 6px; color: #94a3b8; text-align: right; line-height: 1.5; }
.rid-scene.portrait .rid-foot-valid { margin-left: 0; text-align: center; }

/* ── Back header ──────────────────────────────────────────────────────── */
.rid-back-header { background: linear-gradient(125deg,#1e3a8a 0%,#2563eb 45%,#0369a1 100%); color: #fff; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; padding: 7px 12px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; overflow: hidden; }
.rid-back-header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 85% 40%, rgba(255,255,255,.18) 0%, transparent 65%); pointer-events:none; }
.rid-back-header::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 8px); pointer-events:none; }
.rid-back-header .rid-logo { width: 26px; height: 26px; z-index: 1; }
.rid-back-header > span { position: relative; z-index: 1; }

/* Magnetic stripe (decorative) */
.rid-back-stripe { height: 22px; background: linear-gradient(90deg,#111827 0%,#1e293b 30%,#111827 100%); flex-shrink: 0; position: relative; overflow: hidden; }
.rid-back-stripe::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.07) 25%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.07) 75%, transparent 100%); }

/* ── Back body ────────────────────────────────────────────────────────── */
.rid-back-body { flex: 1; padding: 7px 12px 5px; display: flex; align-items: center; gap: 12px; overflow: hidden; }
.rid-scene.portrait .rid-back-body { flex-direction: column; align-items: center; padding: 10px 12px; gap: 8px; }
.rid-qr-zone { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rid-qr-frame { width: 76px; height: 76px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px; box-shadow: 0 2px 10px rgba(37,99,235,.15); }
.rid-scene.portrait .rid-qr-frame { width: 90px; height: 90px; }
.rid-qr-frame img { width: 100%; height: 100%; object-fit: contain; }
.rid-qr-ph { font-size: 8px; font-weight: 700; color: #94a3b8; }
.rid-qr-lbl { font-size: 5px; color: #94a3b8; text-align: center; letter-spacing: .05em; text-transform: uppercase; }
.rid-back-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rid-scene.portrait .rid-back-info { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.rid-bk-section {}
.rid-scene.portrait .rid-bk-section { flex: 1; min-width: 80px; }
.rid-bk-label { font-size: 5.5px; font-weight: 700; color: #1d4ed8; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 2px; }
.rid-bk-val { font-size: 8px; color: #1e293b; line-height: 1.4; }
.rid-bk-val.mono { font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 700; color: #0f172a; }
.rid-back-foot { border-top: 1px solid #dde6f5; padding: 4px 12px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.rid-back-note { font-size: 5.5px; color: #94a3b8; line-height: 1.4; }

/* ── Dark theme ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .rid-front { background: #1e293b; border-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .rid-back { background: linear-gradient(155deg,#1a2540 0%,#162032 55%,#14213d 100%); border-color: rgba(99,155,255,.07); }
[data-bs-theme="dark"] .rid-front::before { background: linear-gradient(180deg,#1e40af,#2563eb 50%,#0284c7 100%); }
[data-bs-theme="dark"] .rid-name { color: #f1f5f9; }
[data-bs-theme="dark"] .rid-pos { color: #60a5fa; }
[data-bs-theme="dark"] .rid-dept { color: #94a3b8; }
[data-bs-theme="dark"] .rid-row { color: #94a3b8; }
[data-bs-theme="dark"] .rid-row-icon { color: #3b82f6; }
[data-bs-theme="dark"] .rid-info-divider { background: linear-gradient(90deg,#3b82f6,#0284c7,transparent); }
[data-bs-theme="dark"] .rid-foot { background: linear-gradient(90deg,#1e293b,#172033 70%); border-color: #334155; }
[data-bs-theme="dark"] .rid-foot::before { background: linear-gradient(180deg,#d97706,#b45309); }
[data-bs-theme="dark"] .rid-foot-idno { color: #94a3b8; }
[data-bs-theme="dark"] .rid-foot-idno strong { color: #f1f5f9; }
[data-bs-theme="dark"] .rid-foot-valid, [data-bs-theme="dark"] .rid-back-note, [data-bs-theme="dark"] .rid-sig-lbl { color: #64748b; }
[data-bs-theme="dark"] .rid-qr-frame { background: #fff; }
[data-bs-theme="dark"] .rid-bk-val { color: #cbd5e1; }
[data-bs-theme="dark"] .rid-bk-val.mono { color: #f1f5f9; }
[data-bs-theme="dark"] .rid-bk-label { color: #60a5fa; }
[data-bs-theme="dark"] .rid-back-foot { border-color: #334155; }
[data-bs-theme="dark"] .rid-photo { border-color: #334155; background: #0f172a; }
[data-bs-theme="dark"] .rid-sig-line { border-color: #475569; }
[data-bs-theme="dark"] .rid-back-stripe { background: linear-gradient(90deg,#020617,#0f172a 30%,#020617 100%); }
[data-bs-theme="dark"] .rid-front-qr .rid-qr-lbl { color: #475569; }
/* Door open toast indicator (tap simulator) */
@keyframes door-slide-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes door-slide-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
.door-open-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2000; min-width: 320px; max-width: 480px; background: linear-gradient(135deg,#14532d,#15803d); color: #fff; border-radius: 1rem; padding: 1rem 1.5rem; box-shadow: 0 8px 32px rgba(21,128,61,.45), 0 2px 8px rgba(0,0,0,.2); display: flex; align-items: center; gap: .85rem; animation: door-slide-in .35s cubic-bezier(.34,1.56,.64,1); }
.door-open-toast.hiding { animation: door-slide-out .35s ease forwards; }
.door-open-toast-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.door-open-toast-body { flex: 1; min-width: 0; }
.door-open-toast-title { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .15rem; }
.door-open-toast-sub { font-size: .78rem; opacity: .82; }

/* ── Nav hover dropdowns (desktop only) ──────────────────────────────── */
@media (min-width: 992px) {
  .nav-hover-dd { position: relative; }
  .nav-hover-dd > .nav-hover-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    margin-top: 0 !important;
    border-top: 2px solid var(--primary, #4f46e5);
    border-radius: 0 0 .5rem .5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
    animation: navHoverIn .16s cubic-bezier(.22,1,.36,1);
  }
  .nav-hover-dd:hover > .nav-hover-menu { display: block; }
  @keyframes navHoverIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-hover-dd .nav-dd-caret { transition: transform .18s ease; }
  .nav-hover-dd:hover .nav-dd-caret { transform: rotate(-180deg); }
}

/* ── My Portal — Profile page (promoted from a per-template <style> block so
   it's shared by any self-service page that needs the same hero/section/info
   layout, instead of being duplicated) ─────────────────────────────────── */
.profile-hero {
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .profile-hero { padding: 1.5rem; }
}
.profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.profile-avatar {
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.profile-section-nav,
.portal-subnav-scroll {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  scrollbar-width: none;
}
.profile-section-nav::-webkit-scrollbar,
.portal-subnav-scroll::-webkit-scrollbar { display: none; }
.profile-section-link,
.portal-subnav-link {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.05rem;
  border-radius: var(--bs-border-radius-pill, 999px);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.profile-section-link:hover,
.portal-subnav-link:hover {
  background: var(--bg);
  color: var(--text);
  transform: translateY(-1px);
}
.profile-section-link.active,
.portal-subnav-link.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* ── My Portal — top-level self-service sub-nav shell (layouts/portal.html):
   a slim, sticky tab bar reusing the .profile-section-nav look above so
   every /me/ page shares one consistent, app-like way to move between
   sections instead of only a per-page "Back" button. A filled pill marks
   the active section (rather than a plain color swap) so it reads clearly
   at a glance even on a busy 16-tab strip. ────────────────────────────── */
.portal-subnav {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-width, 1px) solid var(--border);
  position: sticky;
  top: 0;
  z-index: 900;
}
.portal-subnav .portal-subnav-scroll {
  margin-bottom: 0;
  padding-top: .6rem;
  padding-bottom: .6rem;
  border-bottom: none;
  /* The scrollbar is hidden (see .portal-subnav-scroll::-webkit-scrollbar
     above) so on a phone-width screen, with most of the 16 tabs off-screen,
     there was otherwise zero visual hint that swiping reveals more —
     fading both edges is the standard cue that a strip scrolls. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
@media (max-width: 575.98px) {
  .profile-section-link,
  .portal-subnav-link {
    padding: .6rem 1rem;
    font-size: .8rem;
    min-height: 2.5rem;
  }
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.info-item label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  display: block;
  margin-bottom: .2rem;
}
.info-item .value {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text);
}
.info-item .value.empty { color: var(--muted); font-style: italic; }
.section-card {
  background: var(--surface);
  border: var(--border-width, 1px) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.section-card h3 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.tap-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.tap-row:last-child { border-bottom: none; }
.tap-badge {
  padding: .2rem .6rem;
  border-radius: .375rem;
  font-size: .72rem;
  font-weight: 700;
}
.tap-in  { background: #d1fae5; color: #065f46; }
.tap-out { background: #ede9fe; color: #5b21b6; }
.tap-tap { background: #dbeafe; color: #1e40af; }

/* ── Extra .badge-dot color variant for in-progress / in-review states,
   used by the workflow request-detail/list pages below. ────────────────── */
.badge-inprogress { background: #dbeafe; color: #1e40af; }

/* ── Workflow Approval Engine — chain visualization (promoted from a
   per-template <style> block in workflows/request_detail.html so any future
   request-detail-style page shares one real implementation). ───────────── */
.chain-node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: .875rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.chain-node:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.chain-node.status-in_review { border-color: #3b82f6; background: #eff6ff; }
.chain-node.status-approved  { border-color: #10b981; background: #f0fdf4; }
.chain-node.status-rejected  { border-color: #ef4444; background: #fef2f2; }
.chain-node.status-reassigned{ border-color: #f59e0b; background: #fffbeb; }
.chain-connector {
  width: 2px;
  height: 1.5rem;
  background: var(--border);
  margin: .25rem 0 .25rem 1.8rem;
}
.chain-step-num {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: .75rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chain-node.status-approved  .chain-step-num { background: #d1fae5; color: #065f46; }
.chain-node.status-rejected  .chain-step-num { background: #fee2e2; color: #991b1b; }
.chain-node.status-in_review .chain-step-num { background: #dbeafe; color: #1e40af; }

.audit-entry {
  font-size: .78rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.audit-entry:last-child { border-bottom: none; }
.action-chip {
  padding: .15rem .55rem;
  border-radius: .375rem;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}
.chip-assign    { background: #dbeafe; color: #1e40af; }
.chip-approve   { background: #d1fae5; color: #065f46; }
.chip-reject    { background: #fee2e2; color: #991b1b; }
.chip-reassign  { background: #fef3c7; color: #92400e; }
.chip-edit      { background: #ede9fe; color: #5b21b6; }
.payload-table td:first-child { color: var(--muted); font-size:.8rem; width: 35%; }