/* ===================================================================   H360 UI · Sovereign Institutional · Terminal v2
   --------------------------------------------------------------------------
   Source of truth: /design.md
   Aesthetic: Bloomberg/FactSet terminal × VakeelPro navy + gold.
   Pure neo-grotesque (Geist + Geist Mono). No editorial serif.
   V2 scope: login (index.php). Other surfaces added page-by-page.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   1. TOKENS  (mirrors design.md §1)
   -------------------------------------------------------------------------- */
:root {
  /* Navy scale (primary) — VakeelPro */
  --navy-50:  #F1F5FB;
  --navy-100: #DCE6F2;
  --navy-200: #B7C9E2;
  --navy-300: #8AA5CB;
  --navy-400: #5A7DAD;
  --navy-500: #335B91;
  --navy-600: #1E4475;
  --navy-700: #15315A;
  --navy-800: #0E2244;
  --navy-900: #081530;
  --navy-950: #050E22;

  /* Institutional pane */
  --pane:       var(--navy-900);
  --pane-2:     var(--navy-800);
  --pane-edge:  var(--navy-700);
  --pane-fore:  #EDE9DD;
  --pane-mute:  #8895AC;

  /* Working surface */
  --cream:    #F7F4EE;
  --cream-2:  #EFEAE0;
  --surface:  #FFFFFF;

  /* Ink */
  --ink:        var(--navy-950);
  --ink-soft:   var(--navy-700);
  --ink-mute:   #5C667B;
  --ink-faint:  #8C95A6;

  /* Hairlines */
  --line:    rgba(8,21,48,.10);
  --line-2:  rgba(8,21,48,.18);

  /* Gold — mark of office */
  --gold:        #C49A3F;
  --gold-deep:   #A37E2B;
  --gold-light:  #E5CB8A;

  /* Status — terminal indicators */
  --ok:    #16A85F;
  --warn:  #C49A3F;
  --bad:   #C8362F;
  --info:  #4878B8;

  /* Radius — sharper for terminal */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Elevation — flat for terminal */
  --shadow-1:   0 1px 0 rgba(8,21,48,.04);
  --shadow-2:   0 1px 0 rgba(8,21,48,.04), 0 4px 12px rgba(8,21,48,.06);
  --shadow-pop: 0 24px 48px rgba(8,21,48,.20), 0 8px 16px rgba(8,21,48,.10);

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 360ms;

  /* Type stacks */
  --font-body:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Chrome bar dimensions */
  --bar-h: 28px;
}

/* ===================================================================   3.1  LOGIN  (design.md §3.1) — Terminal v2
   ========================================================================== */

/* ---- 3.1.0  Page surface + chrome bars ---- */
html:has(#login_form),
body:has(#login_form) {
  margin: 0 !important;
  padding: 0 !important;
}
body:has(#login_form) {
  background: var(--cream) !important;
  font-family: var(--font-body) !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* TOP CHROME BAR — full-width terminal status line */
html:has(#login_form)::before {
  content: "H360  ·  OP CONSOLE  ·  BUILD 2026.05  ·  ASIA/KOLKATA  ·  ● SECURE  ·  TLS 1.3";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  background: var(--navy-950);
  color: var(--pane-mute);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(196,154,63,.20);
  z-index: 100;
  white-space: pre;
  overflow: hidden;
}

/* BOTTOM CHROME BAR */
html:has(#login_form)::after {
  content: "AUTHORISED PERSONNEL ONLY  ·  PRIVATE  ·  ENCRYPTED  ·  © H360 OP";
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bar-h);
  background: var(--navy-950);
  color: var(--pane-mute);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  border-top: 1px solid rgba(196,154,63,.20);
  z-index: 100;
  white-space: pre;
  overflow: hidden;
}

body:has(#login_form) ::selection { background: var(--gold-light); color: var(--ink); }

/* Loader */
body:has(#login_form) .loader {
  position: fixed; inset: var(--bar-h) 0 var(--bar-h) 0;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  z-index: 99;
}
body:has(#login_form) .loader::after {
  content: "";
  width: 22px; height: 22px;
  border: 1.5px solid var(--line-2);
  border-top-color: var(--ink);
  border-right-color: var(--gold);
  border-radius: 50%;
  animation: vk-spin .85s linear infinite;
}
@keyframes vk-spin { to { transform: rotate(360deg); } }

/* ---- 3.1.1  LEFT PANE — terminal frame on navy ---- */
body:has(#login_form)::before {
  content: "";
  position: fixed;
  left: 0;
  top: var(--bar-h);
  bottom: var(--bar-h);
  width: 50vw;
  background:
    /* faint cross-hatch grid for terminal texture */
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(255,255,255,.018) 39px, rgba(255,255,255,.018) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255,255,255,.018) 39px, rgba(255,255,255,.018) 40px),
    radial-gradient(900px 600px at 30% 20%, rgba(196,154,63,.06), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  z-index: 0;
  border-right: 1px solid rgba(196,154,63,.20);
  animation: vk-pane-in .7s var(--ease-out) both;
}

/* Left-pane content as positioned SVG */
body:has(#login_form)::after {
  content: "";
  position: fixed;
  left: 0;
  top: var(--bar-h);
  bottom: var(--bar-h);
  width: 50vw;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 900' preserveAspectRatio='xMinYMid meet'>\
<style>\
.sans { font-family: 'Geist', system-ui, sans-serif; }\
.mono { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: 2px; text-transform: uppercase; }\
.label { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: 2.4px; text-transform: uppercase; fill: %238895AC; }\
</style>\
<g transform='translate(56,72)'>\
<text class='label' font-size='10' font-weight='500'>SYSTEM /</text>\
<text x='65' class='label' font-size='10' font-weight='500' fill='%23C49A3F'>ID 0001</text>\
</g>\
<g transform='translate(56,140)'>\
<text class='sans' font-size='112' font-weight='700' letter-spacing='-5' fill='%23EDE9DD'>H360</text>\
<text y='40' x='220' class='sans' font-size='13' font-weight='500' letter-spacing='2' fill='%238895AC'>OP CONSOLE</text>\
<text y='62' x='220' class='sans' font-size='13' font-weight='400' fill='%23EDE9DD' opacity='0.85'>v.2026.05</text>\
</g>\
<g transform='translate(56,260)'>\
<rect x='0' y='0' width='28' height='1' fill='%23C49A3F'/>\
<text x='0' y='22' class='sans' font-size='14' font-weight='400' fill='%23EDE9DD' opacity='0.92'>Patient-care software for the disciplined clinic.</text>\
<text x='0' y='44' class='sans' font-size='13' font-weight='400' fill='%238895AC'>Appointments · Prescriptions · Billing · Tests · Reports.</text>\
</g>\
<g transform='translate(56,360)'>\
<rect x='0' y='0' width='100%25' height='1' fill='%23142949' opacity='0.6'/>\
</g>\
<g transform='translate(56,392)'>\
<text class='label' font-size='9.5' font-weight='500'>SYSTEM STATUS</text>\
</g>\
<g transform='translate(56,420)'>\
<circle cx='5' cy='6' r='4' fill='%2316A85F'/>\
<text x='18' y='10' class='mono' font-size='11' font-weight='500' fill='%23EDE9DD'>OPERATIONAL</text>\
<circle cx='5' cy='30' r='4' fill='%2316A85F'/>\
<text x='18' y='34' class='mono' font-size='11' font-weight='500' fill='%23EDE9DD'>SECURE TLS 1.3</text>\
<circle cx='5' cy='54' r='4' fill='%23C49A3F'/>\
<text x='18' y='58' class='mono' font-size='11' font-weight='500' fill='%23EDE9DD'>0 ACTIVE SESSIONS</text>\
</g>\
<g transform='translate(56,520)'>\
<rect x='0' y='0' width='100%25' height='1' fill='%23142949' opacity='0.6'/>\
</g>\
<g transform='translate(56,556)'>\
<text class='label' font-size='9.5'>EST.</text>\
<text y='30' class='mono' font-size='28' font-weight='600' fill='%23EDE9DD'>2024</text>\
<text x='160' class='label' font-size='9.5'>VOL.</text>\
<text x='160' y='30' class='mono' font-size='28' font-weight='600' fill='%23EDE9DD'>XXIV</text>\
<text x='320' class='label' font-size='9.5'>BUILD</text>\
<text x='320' y='30' class='mono' font-size='28' font-weight='600' fill='%23C49A3F'>26.05</text>\
</g>\
<g transform='translate(56,820)'>\
<text class='mono' font-size='9.5' font-weight='500' fill='%238895AC'>NODE: SRV-OP-01</text>\
<text x='220' class='mono' font-size='9.5' font-weight='500' fill='%238895AC'>UPTIME 142D 06:12:54</text>\
</g>\
</svg>");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  pointer-events: none;
  z-index: 1;
  animation: vk-pane-text-in 1s var(--ease-out) .12s both;
}

@keyframes vk-pane-in     { from { opacity: 0; transform: translateX(-1.5%); } to { opacity: 1; transform: none; } }
@keyframes vk-pane-text-in{ from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- 3.1.2  RIGHT PANE — form on cream ---- */
body:has(#login_form) #app {
  position: relative;
  z-index: 2;
  width: 50vw;
  margin-left: 50vw;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--bar-h) 0;
}
body:has(#login_form) #app .section { width: 100%; padding: 0; }
body:has(#login_form) .container.mt-5 { margin: 0 !important; max-width: 440px; }
body:has(#login_form) .container.mt-5 .row { margin: 0; }
body:has(#login_form) .container.mt-5 .row > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 32px !important;
}

/* ---- 3.1.3  CARD ---- */
body:has(#login_form) .card.card-primary {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
  animation: vk-card-rise .55s var(--ease-out) .2s both;
}
@keyframes vk-card-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* card "header strip" — terminal eyebrow */
body:has(#login_form) .card.card-primary::before {
  content: "AUTH / SIGN-IN";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  padding: 0 16px;
}
body:has(#login_form) .card.card-primary::after {
  content: "REQUIRED";
  position: absolute;
  top: 0; right: 0;
  height: 28px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  padding: 0 16px;
}

body:has(#login_form) .card.card-primary > .card-body {
  padding: 56px 28px 28px !important;     /* extra top to clear eyebrow */
}
body:has(#login_form) .card.card-primary > .card-body::before {
  content: "Authenticate";
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}
body:has(#login_form) .card.card-primary > .card-body::after {
  content: "Enter credentials to access the console.";
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-mute);
  margin-bottom: 24px;
}

body:has(#login_form) .card.card-primary .sidebar-brand { display: none !important; }
body:has(#login_form) .card.card-primary > .row { display: none !important; }

body:has(#login_form) .card.card-primary > p {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 10px 28px !important;
  margin: 0 !important;
  background: var(--cream-2) !important;
  border-bottom: 1px solid var(--line) !important;
  position: relative;
  z-index: 2;
}
body:has(#login_form) .card.card-primary > p:empty { display: none; }

/* ---- 3.1.4  FORM FIELDS ---- */
body:has(#login_form) #login_form .form-group { margin-bottom: 14px; }

body:has(#login_form) #login_form label,
body:has(#login_form) #login_form .control-label {
  display: block !important;
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  margin-bottom: 6px !important;
}
body:has(#login_form) #login_form label .text-danger { display: none; }

body:has(#login_form) #login_form .form-control {
  width: 100%;
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-family: var(--font-mono) !important;     /* mono inputs = terminal */
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-xs) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition:
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease) !important;
}
body:has(#login_form) #login_form .form-control::placeholder {
  color: var(--ink-faint) !important;
  font-family: var(--font-mono);
}
body:has(#login_form) #login_form .form-control:focus {
  outline: 0 !important;
  border-color: var(--navy-900) !important;
  box-shadow: 0 0 0 3px rgba(196,154,63,.20) !important;
}

body:has(#login_form) #login_form .custom-control,
body:has(#login_form) #login_form .float-right { display: none !important; }
body:has(#login_form) #login_form .form-group:has(.custom-control) { margin: 0 !important; }

/* ---- 3.1.5  PRIMARY BUTTON ---- */
body:has(#login_form) #login_form .btn-primary {
  background: var(--navy-950) !important;
  border: 1px solid var(--navy-950) !important;
  color: var(--pane-fore) !important;
  border-radius: var(--r-xs) !important;
  height: 42px !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  width: 100%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  box-shadow: var(--shadow-1);
  position: relative;
  transition:
    background var(--d-base) var(--ease),
    transform var(--d-fast) var(--ease),
    box-shadow var(--d-base) var(--ease) !important;
}
/* Replace the "Login" word — but we can't change the button's text without
   touching markup, so we layer "Authenticate" via a pseudo and visually hide
   the original text */
body:has(#login_form) #login_form .btn-primary {
  font-size: 0 !important;        /* hide the inner "Login" text */
}
body:has(#login_form) #login_form .btn-primary::before {
  content: "Authenticate";
  font-size: 11.5px;
  letter-spacing: 0.18em;
}
body:has(#login_form) #login_form .btn-primary::after {
  content: "→";
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--gold-light);
  transform: translateX(0);
  transition: transform var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
body:has(#login_form) #login_form .btn-primary:hover {
  background: var(--navy-800) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
body:has(#login_form) #login_form .btn-primary:hover::after {
  transform: translateX(4px);
  color: var(--gold);
}
body:has(#login_form) #login_form .btn-primary:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(196,154,63,.30), var(--shadow-1) !important;
}
body:has(#login_form) #login_form .btn-primary:active {
  transform: translateY(0);
  background: var(--navy-950) !important;
}

/* ---- 3.1.6  RESPONSIVE ---- */
@media (max-width: 1100px) {
  body:has(#login_form)::before,
  body:has(#login_form)::after { width: 42vw; }
  body:has(#login_form) #app { width: 58vw; margin-left: 42vw; }
  body:has(#login_form)::after { background-position: left top; background-size: 110% auto; }
}
@media (max-width: 900px) {
  body:has(#login_form)::before,
  body:has(#login_form)::after {
    position: relative;
    width: 100vw;
    height: 38vh;
    inset: auto;
    top: var(--bar-h);
    bottom: auto;
    display: block;
  }
  body:has(#login_form)::after { margin-top: -38vh; height: 38vh; background-size: cover; background-position: left center; }
  body:has(#login_form) #app { width: 100%; margin: 0; min-height: calc(62vh + var(--bar-h)); padding: 24px 0 calc(24px + var(--bar-h)); }
  body:has(#login_form) .container.mt-5 .row > [class*="col-"] { padding: 0 24px !important; }
}
@media (max-width: 600px) {
  body:has(#login_form)::before,
  body:has(#login_form)::after { height: 120px; }
  body:has(#login_form)::after { margin-top: -120px; background-size: auto 120px; background-position: 24px center; }
  body:has(#login_form) .card.card-primary > .card-body { padding: 50px 20px 22px !important; }
  body:has(#login_form) .card.card-primary > .card-body::before { font-size: 18px; }
  html:has(#login_form)::before, html:has(#login_form)::after { font-size: 9px; padding: 0 12px; letter-spacing: 0.10em; }
}

/* ---- 3.1.7  REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  body:has(#login_form) *,
  body:has(#login_form) *::before,
  body:has(#login_form) *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===================================================================   3.2  ADMIN SHELL  (design.md §3.2)
   Scoped under `body:has(.main-sidebar)`. Login does not have this element,
   so login styles remain isolated.

   Decisions are derived from live captures in design-proofs/admin-shell/.
   Every CR-2 box-metric (sidebar width, nav height, item height) is
   preserved or reasoned about explicitly.
   ========================================================================== */

/* ---- 3.2.0  Surface, fonts, scrollbar  ---- */
body:has(.main-sidebar) {
  font-family: var(--font-body) !important;
  background: var(--cream) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
body:has(.main-sidebar) ::selection { background: var(--gold-light); color: var(--ink); }

body:has(.main-sidebar) ::-webkit-scrollbar { width: 10px; height: 10px; }
body:has(.main-sidebar) ::-webkit-scrollbar-thumb {
  background: rgba(8,21,48,.16);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
body:has(.main-sidebar) ::-webkit-scrollbar-thumb:hover { background: rgba(8,21,48,.32); background-clip: padding-box; }

/* Override the inline <style> block in ajax/header.php (CR-3) */
body:has(.main-sidebar) .main-sidebar .sidebar-menu li a { font-weight: 500 !important; }
body:has(.main-sidebar) .form-group > label { font-weight: 600 !important; }
body:has(.main-sidebar) table thead th, body:has(.main-sidebar) table th { font-weight: 600 !important; }
body:has(.main-sidebar) table tbody td, body:has(.main-sidebar) table td { font-weight: 400 !important; }

/* ---- 3.2.1  Sidebar wrapper  ---- */
body:has(.main-sidebar) .main-sidebar,
body:has(.main-sidebar) .main-sidebar.sidebar-style-2 {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%) !important;
  border-right: 1px solid rgba(196,154,63,.18) !important;
  box-shadow: none !important;
  /* outer width preserved (CR-2) — Stisla owns the px width */
}
body:has(.main-sidebar) .main-sidebar #sidebar-wrapper { color: var(--pane-fore); }

/* paper grain on the navy */
body:has(.main-sidebar) .main-sidebar::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 0;
}
body:has(.main-sidebar) .main-sidebar > * { position: relative; z-index: 1; }

/* Stisla's `.main-sidebar::after` is a fixed-position 65px white slab that
   fades in during sidebar-mini transition.  We have our own navy bg on the
   sidebar itself, so this pseudo is dead weight — kill it outright. */
body:has(.main-sidebar) .main-sidebar::after,
body.sidebar-mini:has(.main-sidebar) .main-sidebar::after,
body:has(.main-sidebar) .main-sidebar.sidebar-style-2::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  width: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* And belt: pin .main-sidebar bg + every descendant container to navy/transparent
   in every state Stisla cares about (default, sidebar-mini, sidebar-gone). */
body:has(.main-sidebar) .main-sidebar,
body.sidebar-mini:has(.main-sidebar) .main-sidebar,
body.sidebar-gone:has(.main-sidebar) .main-sidebar,
body:has(.main-sidebar) .main-sidebar #sidebar-wrapper,
body:has(.main-sidebar) .main-sidebar .sidebar-menu {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%) !important;
  background-color: var(--navy-900) !important;
}

/* ---- 3.2.2  Sidebar brand (logo1 / logo2)  ----
   Multi-colour brand marks survive on dark rails only when given their
   native white environment. We frame logo2 inside a cream "letterhead
   plaque" — feels like a hospital badge plate, not a sticker on navy. */
body:has(.main-sidebar) .sidebar-brand {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 18px 16px 18px !important;
  position: relative;
  text-align: center;
}
body:has(.main-sidebar) .sidebar-brand::after {
  content: "";
  position: absolute; left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 32px; height: 1px;
  background: var(--gold);
}
body:has(.main-sidebar) .sidebar-brand a {
  /* typographic mark — image is hidden; brand reads clean on navy */
  display: flex !important;
  flex-direction: column;
  align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 8px;
  width: 100%;
  min-height: 56px;
  text-decoration: none;
  position: relative;
  transition: opacity var(--d-base) var(--ease);
}
body:has(.main-sidebar) .sidebar-brand a:hover { opacity: .92; }

/* hide the JPEGs but keep them in DOM so iconimage() JS still works (CR-1) */
body:has(.main-sidebar) .sidebar-brand img.header-logo {
  /* preserve box for JS that may measure it; just remove visual */
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none;
}

/* the mark itself */
body:has(.main-sidebar) .sidebar-brand a::before {
  content: "H360";
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--pane-fore);
  line-height: 1;
}
body:has(.main-sidebar) .sidebar-brand a::after {
  content: "OP CONSOLE";
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-top: 4px;
  line-height: 1;
}

/* mini state — just "H360", no eyebrow */
body.sidebar-mini:has(.main-sidebar) .sidebar-brand a { padding: 4px; min-height: 36px; }
body.sidebar-mini:has(.main-sidebar) .sidebar-brand a::before { font-size: 16px; }
body.sidebar-mini:has(.main-sidebar) .sidebar-brand a::after { display: none; }
body:has(.main-sidebar) .sidebar-brand img.header-logo {
  /* CR-2: cancel Bootstrap .w-50 only inside our plaque (visual only, not box-metric of <a>) */
  width: auto !important;
  max-width: 100% !important;
  max-height: 44px !important;
  height: auto !important;
  display: block;
  margin: 0 !important;
  filter: none;
}

/* mini-state plaque is small and square */
body.sidebar-mini:has(.main-sidebar) .sidebar-brand { padding: 14px 8px !important; }
body.sidebar-mini:has(.main-sidebar) .sidebar-brand a {
  width: 44px; min-height: 44px; padding: 6px;
  border-radius: var(--r-sm);
}
body.sidebar-mini:has(.main-sidebar) .sidebar-brand img.header-logo { max-height: 28px !important; }

/* ---- 3.2.3  Sidebar user card  ---- */
body:has(.main-sidebar) .sidebar-user {
  padding: 18px 18px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  text-align: center;
}
/* The user's image is a JPG with a built-in white background, which would
   read as a bright tile against the navy rail.  Identity already lives in
   the topbar avatar; here we drop the picture and keep just the name + org
   + icon shortcuts.  No white tile in the navy. */
body:has(.main-sidebar) .sidebar-user-picture { display: none !important; }
body:has(.main-sidebar) .sidebar-user-details .user-name {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--pane-fore) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px;
  line-height: 1.2;
}
/* `.user-role` actually shows org name — render in mono caps */
body:has(.main-sidebar) .sidebar-user-details .user-role {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  color: var(--pane-mute) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px;
}
body:has(.main-sidebar) .sidebar-userpic-btn {
  display: inline-flex !important;
  gap: 8px;
  margin-top: 4px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  width: 100%;
  justify-content: center;
}
body:has(.main-sidebar) .sidebar-userpic-btn a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--pane-mute) !important;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .sidebar-userpic-btn a:hover {
  color: var(--gold) !important;
  background: rgba(196,154,63,.10);
  border-color: rgba(196,154,63,.30);
}
body:has(.main-sidebar) .sidebar-userpic-btn a svg { width: 16px; height: 16px; }

/* ---- 3.2.4  Sidebar section labels  ---- */
body:has(.main-sidebar) .sidebar-menu li.menu-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  opacity: 0.85;
  padding: 22px 22px 8px !important;
  background: transparent !important;
  border: none !important;
}

/* ---- 3.2.5/6  Sidebar menu items + submenu  ---- */
body:has(.main-sidebar) .sidebar-menu { padding: 4px 0 24px; }

body:has(.main-sidebar) .sidebar-menu li > a {
  /* outer height preserved by Stisla — we only restyle */
  color: rgba(237,233,221,.78) !important;
  padding: 10px 16px !important;
  margin: 1px 12px !important;
  border-radius: var(--r-sm);
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: -0.005em;
  display: flex !important;
  align-items: center;
  gap: 10px;
  position: relative;
  transition:
    background var(--d-base) var(--ease),
    color var(--d-base) var(--ease),
    transform var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .sidebar-menu li > a > i,
body:has(.main-sidebar) .sidebar-menu li > a > svg.feather {
  color: var(--pane-mute) !important;
  stroke: currentColor !important;
  width: 16px; height: 16px; flex: 0 0 16px;
  transition: color var(--d-base) var(--ease), stroke var(--d-base) var(--ease), transform var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .sidebar-menu li > a:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--pane-fore) !important;
}
body:has(.main-sidebar) .sidebar-menu li > a:hover > i,
body:has(.main-sidebar) .sidebar-menu li > a:hover > svg.feather {
  color: var(--gold-light) !important;
  transform: translateX(1px);
}

/* Stisla's `+/-` dropdown indicator (`.has-dropdown::after`) */
body:has(.main-sidebar) .sidebar-menu li > a.has-dropdown::after {
  color: var(--pane-mute) !important;
  font-weight: 500;
  opacity: .75;
}
body:has(.main-sidebar) .sidebar-menu li > a.has-dropdown:hover::after {
  color: var(--gold-light) !important;
  opacity: 1;
}

/* Active row — gold left rail */
body:has(.main-sidebar) .sidebar-menu li.active > a,
body:has(.main-sidebar) .sidebar-menu li > a.active {
  background: linear-gradient(90deg, rgba(196,154,63,.14), rgba(196,154,63,.04) 60%, transparent 100%) !important;
  color: var(--pane-fore) !important;
}
body:has(.main-sidebar) .sidebar-menu li.active > a::before,
body:has(.main-sidebar) .sidebar-menu li > a.active::before {
  content: "";
  position: absolute;
  left: -12px; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(196,154,63,.55);
}
body:has(.main-sidebar) .sidebar-menu li.active > a > i,
body:has(.main-sidebar) .sidebar-menu li.active > a > svg.feather,
body:has(.main-sidebar) .sidebar-menu li > a.active > i {
  color: var(--gold) !important;
}

/* Submenu */
body:has(.main-sidebar) .sidebar-menu .dropdown-menu {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: var(--r-sm) !important;
  margin: 4px 12px 8px !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
}
/* Stisla injects an `<li class="dropdown-title pt-3">` re-stating the parent
   menu name at the top of every expanded submenu.  Style it as a small
   mono-caps eyebrow so it reads as a section header, not random text. */
body:has(.main-sidebar) .sidebar-menu .dropdown-menu li.dropdown-title {
  padding: 8px 14px 6px !important;
  margin: 0 6px 4px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  opacity: .85;
  background: transparent !important;
  border-radius: 0 !important;
}
body:has(.main-sidebar) .sidebar-menu .dropdown-menu li > a {
  margin: 0 6px !important;
  padding: 7px 14px 7px 50px !important;
  font-size: 12.5px !important;
  color: rgba(237,233,221,.65) !important;
  position: relative;
  background: transparent !important;
}
/* Stisla's base sub-item rule paints Font Awesome \f105 chevron-right at left:30px
   with high specificity. We let that chevron stand (it matches the aesthetic) but
   force the text to start past its right edge with the padding above. The rule
   below is a defensive reposition / restyle that wins only if Stisla's selector
   loses (use of !important is required because Stisla's selector chain has
   higher base specificity than our :has(.main-sidebar) chain). */
body:has(.main-sidebar) .sidebar-menu .dropdown-menu li > a::before {
  content: "›" !important;
  position: absolute !important;
  left: 22px !important; top: 6px !important;
  width: 12px !important;
  text-align: center !important;
  color: var(--pane-mute) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: none !important;
}
body:has(.main-sidebar) .sidebar-menu .dropdown-menu li > a:hover::before {
  color: var(--gold) !important;
  left: 22px !important;
}
body:has(.main-sidebar) .sidebar-menu .dropdown-menu li > a:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--pane-fore) !important;
}
body:has(.main-sidebar) .sidebar-menu .dropdown-menu li > a:hover::before { color: var(--gold); }
/* Override Stisla's `.sidebar-style-2 .sidebar-menu>li.active ul.dropdown-menu li a { background:#353c48 }` which leaks through */
body:has(.main-sidebar) .main-sidebar.sidebar-style-2 .sidebar-menu > li.active ul.dropdown-menu li a {
  background: transparent !important;
}

/* DEFENSIVE: Stisla ships several rules that paint sidebar items with
   white / off-white backgrounds (#fff, #fcfcfd, #f5f5f5) on hover, active,
   and submenu states.  Pin every menu-area background to either transparent
   (so the navy bleeds through) or our explicit overrides. */
body:has(.main-sidebar) .main-sidebar .sidebar-menu li,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li > a,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li.active,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li.active > a,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li.active ul.dropdown-menu,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li.active ul.dropdown-menu li,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li.active ul.dropdown-menu li a,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li ul.dropdown-menu,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li ul.dropdown-menu li,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li ul.dropdown-menu li a {
  background-color: transparent !important;
}
/* Then re-apply our explicit treatments at higher specificity */
body:has(.main-sidebar) .main-sidebar .sidebar-menu li.active > a {
  background: linear-gradient(90deg, rgba(196,154,63,.14), rgba(196,154,63,.04) 60%, transparent 100%) !important;
}
body:has(.main-sidebar) .main-sidebar .sidebar-menu li > a:hover,
body:has(.main-sidebar) .main-sidebar .sidebar-menu li.active > a:hover {
  background: rgba(255,255,255,.04) !important;
}
body:has(.main-sidebar) .main-sidebar .sidebar-menu li.dropdown-title {
  background: transparent !important;
}

/* Feather inline SVGs after the Feather library swaps placeholders. Make sure
   stroke + size are stable regardless of where the SVG sits. */
body:has(.main-sidebar) .sidebar-menu li > a svg.feather {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  stroke-width: 2 !important;
  stroke: currentColor !important;
  color: var(--pane-mute) !important;
}
body:has(.main-sidebar) .sidebar-menu li > a:hover svg.feather { color: var(--gold-light) !important; }
body:has(.main-sidebar) .sidebar-menu li.active > a svg.feather,
body:has(.main-sidebar) .sidebar-menu li > a.active svg.feather { color: var(--gold) !important; }
/* topbar feathers */
body:has(.main-sidebar) .main-navbar svg.feather {
  width: 18px !important; height: 18px !important;
  stroke-width: 2 !important;
  stroke: currentColor !important;
}
/* sidebar user-card icon shortcuts */
body:has(.main-sidebar) .sidebar-userpic-btn a svg.feather {
  width: 16px !important; height: 16px !important;
  stroke-width: 2 !important;
  stroke: currentColor !important;
}

/* ---- 3.2.7  Mini state  ----
   Mini hides everything that has any cream/white surface — the only visible
   elements in the rail are the H360 mark + menu icons.  Pure navy.
   Each icon gets a tooltip on hover via the JS-injected `data-tip` attr.

   Stisla also toggles `body.sidebar-gone` at viewports ≤ 1024 which slides
   the sidebar off-screen via `left:-250px`.  We don't want a click on the
   collapse btn to disappear the sidebar — keep the icons rail visible at
   65 px regardless of which class Stisla applies. */
body.sidebar-mini:has(.main-sidebar) .sidebar-brand::after,
body.sidebar-gone:has(.main-sidebar) .sidebar-brand::after { display: none; }
body.sidebar-mini:has(.main-sidebar) .sidebar-user,
body.sidebar-gone:has(.main-sidebar) .sidebar-user { display: none !important; }

/* keep the rail on-screen even when sidebar-gone is applied */
body.sidebar-gone:has(.main-sidebar) .main-sidebar {
  left: 0 !important;
  width: 65px !important;
  visibility: visible !important;
  transform: none !important;
  opacity: 1 !important;
  display: block !important;
}

/* In mini Stisla switches the sidebar to `position: absolute` which makes it
   scroll with the page.  Pin it to fixed in every collapsed state so the
   rail stays on-screen exactly like the expanded version. */
body.sidebar-mini:has(.main-sidebar) .main-sidebar,
body.sidebar-gone:has(.main-sidebar) .main-sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100% !important;
  z-index: 880 !important;
}
/* and apply the same mini visual rules to sidebar-gone */
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li.menu-header { display: none !important; }
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li > a { justify-content: center; padding: 10px 0 !important; margin: 1px 8px !important; }
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li > a > span,
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li > a.has-dropdown::after { display: none !important; }
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li.active > a::before { left: -8px; }
body.sidebar-gone:has(.main-sidebar) .sidebar-menu .dropdown-menu { display: none !important; }

/* Stisla auto-shows the submenu as a popover on hover in mini state via:
   `.sidebar-mini .main-sidebar .sidebar-menu li:hover > ul.dropdown-menu
   { display: block !important }`
   Outspecify it so our tooltip is the only hover surface. */
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li:hover > ul.dropdown-menu,
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.active > ul.dropdown-menu,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li:hover > ul.dropdown-menu,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.active > ul.dropdown-menu {
  display: none !important;
  visibility: hidden !important;
}

/* ---- Pinned popover: shown when JS adds `.vk-popped` to the parent <li>
   in collapsed state.  Click outside or ESC dismisses.  Anchored right
   of the icon, navy theme to match the rail.  Wins specificity over the
   hide rule above via the .vk-popped class. */
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: calc(100% + 14px) !important;
  top: 0 !important;
  width: 240px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  background: var(--navy-950) !important;
  background-color: var(--navy-950) !important;
  border: 1px solid rgba(196,154,63,.30) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-pop) !important;
  z-index: 1100;
  animation: vk-pop-in 160ms var(--ease-out) both;
}
/* Arrow on the popped popover */
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > a::before,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > a::before {
  content: "" !important;
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--navy-950);
  border-left: 1px solid rgba(196,154,63,.30);
  border-bottom: 1px solid rgba(196,154,63,.30);
  z-index: 1101;
}
/* Suppress the hover tooltip while the popover is pinned (avoid duplicate UI) */
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li.vk-popped > a[data-tip]:hover::after,
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li.vk-popped > a[data-tip]:hover::after {
  display: none !important;
}

/* Popover content styling */
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li.dropdown-title,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li.dropdown-title {
  color: var(--gold) !important;
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  padding: 10px 16px 8px !important;
  margin: 0 0 4px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: transparent !important;
}
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li > a,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li > a {
  display: block !important;
  padding: 9px 16px 9px 22px !important;
  margin: 0 6px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(237,233,221,.80) !important;
  background: transparent !important;
  border-radius: var(--r-xs) !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  height: auto !important;
  position: relative;
  text-align: left !important;
  justify-content: flex-start !important;
}
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li > a::before,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li > a::before {
  content: "›" !important;
  position: absolute !important;
  left: 8px; top: 9px;
  color: var(--pane-mute) !important;
  font-family: var(--font-mono);
  font-weight: 600;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  transform: none !important;
}
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li > a:hover,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li > a:hover {
  background: rgba(255,255,255,.05) !important;
  color: var(--pane-fore) !important;
}
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li > a:hover::before,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu li > a:hover::before {
  color: var(--gold) !important;
}

/* Visual marker on the parent icon while popped */
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > a,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > a {
  background: linear-gradient(90deg, rgba(196,154,63,.18), rgba(196,154,63,.06) 60%, transparent 100%) !important;
  color: var(--pane-fore) !important;
}
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > a svg.feather,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > a svg.feather {
  color: var(--gold) !important;
}

@keyframes vk-pop-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu,
  body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li.vk-popped > ul.dropdown-menu {
    animation: none !important;
  }
}
body.sidebar-gone:has(.main-sidebar) .sidebar-brand a::before { font-size: 16px; }
body.sidebar-gone:has(.main-sidebar) .sidebar-brand a::after { display: none; }
body.sidebar-gone:has(.main-sidebar) .sidebar-brand a { padding: 4px; min-height: 36px; }

/* In mini state the tooltip needs to escape the 65 px sidebar.  Inline
   `style="overflow: hidden"` on .main-sidebar (and overflow on its children)
   clips it — override with !important.  Same for sidebar-gone (which we
   now treat as mini visually). */
body.sidebar-mini:has(.main-sidebar) .main-sidebar,
body.sidebar-mini:has(.main-sidebar) .main-sidebar #sidebar-wrapper,
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu,
body.sidebar-mini:has(.main-sidebar) .main-sidebar .sidebar-menu li,
body.sidebar-gone:has(.main-sidebar) .main-sidebar,
body.sidebar-gone:has(.main-sidebar) .main-sidebar #sidebar-wrapper,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu,
body.sidebar-gone:has(.main-sidebar) .main-sidebar .sidebar-menu li {
  overflow: visible !important;
}

/* mini tooltip — rendered via ::after on the <a> when hovered */
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li > a,
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li > a {
  position: relative !important;
}
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li > a[data-tip]:hover::after,
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li > a[data-tip]:hover::after {
  content: attr(data-tip);
  display: block !important;
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--navy-950) !important;
  color: var(--pane-fore) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  padding: 7px 12px !important;
  border-radius: var(--r-xs) !important;
  border: 1px solid rgba(196,154,63,.30) !important;
  box-shadow: var(--shadow-pop) !important;
  z-index: 1000;
  pointer-events: none;
  /* Force shrink-to-content sizing — without this, an absolute-positioned
     ::after inside a narrow `<a>` collapses to padding-only width. */
  width: max-content !important;
  max-width: 260px !important;
  min-width: 0;
  box-sizing: border-box;
  right: auto !important;
  animation: vk-tip-in 140ms var(--ease-out) both;
}
/* tooltip arrow */
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li > a[data-tip]:hover::before,
body.sidebar-gone:has(.main-sidebar) .sidebar-menu li > a[data-tip]:hover::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--navy-950);
  border-left: 1px solid rgba(196,154,63,.30);
  border-bottom: 1px solid rgba(196,154,63,.30);
  z-index: 999;
  pointer-events: none;
  animation: vk-tip-in 140ms var(--ease-out) both;
}
@keyframes vk-tip-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  to   { opacity: 1; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.sidebar-mini:has(.main-sidebar) .sidebar-menu li > a[data-tip]:hover::after,
  body.sidebar-mini:has(.main-sidebar) .sidebar-menu li > a[data-tip]:hover::before {
    animation: none !important;
  }
}
/* hide section labels + menu text in mini; icons stay */
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li.menu-header { display: none !important; }
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li > a { justify-content: center; padding: 10px 0 !important; margin: 1px 8px !important; }
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li > a > span,
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li > a.has-dropdown::after { display: none !important; }
body.sidebar-mini:has(.main-sidebar) .sidebar-menu li.active > a::before { left: -8px; }
body.sidebar-mini:has(.main-sidebar) .sidebar-menu .dropdown-menu { display: none !important; }

/* ---- 3.2.8  Topbar + navbar-bg  ---- */
body:has(.main-sidebar) .navbar-bg {
  background: linear-gradient(90deg, var(--gold), transparent 60%) !important;
  height: 2px !important;
  position: relative;
  z-index: 5;
  /* sits above the navbar to read as a gold accent rail */
}
body:has(.main-sidebar) .main-navbar,
body:has(.main-sidebar) .navbar.main-navbar {
  background: rgba(247,244,238,.92) !important;   /* slight blur over content */
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  height: 60px !important;
  z-index: 800;
  /* height preserved (CR-2) */
}
body:has(.main-sidebar) .main-navbar .nav-link { color: var(--ink-soft) !important; }
body:has(.main-sidebar) .main-navbar .nav-link:hover { color: var(--ink) !important; }

/* ---- 3.2.9  Collapse-btn  ---- */
body:has(.main-sidebar) .nav-link.collapse-btn {
  width: 38px; height: 38px;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink-soft) !important;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .nav-link.collapse-btn:hover {
  background: var(--cream-2);
  color: var(--ink) !important;
}
body:has(.main-sidebar) .nav-link.collapse-btn svg.feather { width: 18px; height: 18px; }

/* ---- 3.2.10  Topbar search  ---- */
body:has(.main-sidebar) .main-navbar .search-element {
  position: relative;
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  height: 36px;
  width: 280px;
  padding: 0 12px 0 36px;
  display: flex; align-items: center;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .main-navbar .search-element::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--ink-mute);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") center/14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") center/14px no-repeat;
}
body:has(.main-sidebar) .main-navbar .search-element input.form-control {
  background: transparent !important;
  border: none !important;
  height: 34px !important;
  padding: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12.5px !important;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
  box-shadow: none !important;
  flex: 1;
}
body:has(.main-sidebar) .main-navbar .search-element input.form-control::placeholder {
  color: var(--ink-faint) !important;
  font-family: var(--font-mono);
}
body:has(.main-sidebar) .main-navbar .search-element:focus-within {
  border-color: var(--ink-soft);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(196,154,63,.12);
}
body:has(.main-sidebar) .main-navbar .search-element button.btn { display: none; } /* dead submit */

/* ---- 3.2.11  Fullscreen-btn  ---- */
body:has(.main-sidebar) .fullscreen-btn {
  width: 38px; height: 38px;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink-soft) !important;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .fullscreen-btn:hover {
  background: var(--cream-2);
  color: var(--ink) !important;
}

/* ---- 3.2.12  Profile dropdown  ---- */
body:has(.main-sidebar) .nav-link-user {
  padding: 4px !important;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  transition: box-shadow var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .nav-link-user:hover {
  background: var(--cream-2);
  box-shadow: 0 0 0 1px var(--gold);
}
body:has(.main-sidebar) .nav-link-user img {
  /* CR-3: override inline border-radius:50px;height:30px */
  border-radius: 999px !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: cover;
  object-position: center 22%;
  background: var(--cream);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(8,21,48,.10);
  display: block;
}

body:has(.main-sidebar) .dropdown-menu.dropdown-menu-right {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-pop) !important;
  padding: 6px !important;
  margin-top: 8px !important;
  min-width: 200px;
}
body:has(.main-sidebar) .dropdown-title {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--gold-deep) !important;
  padding: 8px 10px 4px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 4px !important;
}
/* B-1702 — dropdown-menu anchor contrast sweep.
   Light dropdown panels (.dropdown-menu / .dropdown-menu-right) sit on --surface.
   Default --ink-soft (#15315A) on white ≈13:1 but icons used --ink-mute (#5C667B)
   ≈5.45:1 — passes AA but blends with body copy. We promote text to --ink
   (#050E22, ~19:1) and icons to --ink-soft (~13:1) for clear hierarchy and
   AAA-tier separation. Danger items keep --bad (#C8362F, 5.3:1 AA) with a
   slightly darker tone on hover for stronger affordance. Focus-visible gets
   a gold outline; disabled gets 50% opacity. CR-3, CR-4 compliant. */
body:has(.main-sidebar) .dropdown-item {
  border-radius: var(--r-xs);
  padding: 8px 10px !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .dropdown-item:hover {
  background: var(--cream-2) !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .dropdown-item:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: -2px !important;
  background: var(--cream-2) !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .dropdown-item.has-icon i {
  width: 16px; text-align: center;
  color: var(--ink-soft) !important;
}
body:has(.main-sidebar) .dropdown-item:hover.has-icon i,
body:has(.main-sidebar) .dropdown-item.has-icon:hover i {
  color: var(--ink) !important;
}
body:has(.main-sidebar) .dropdown-item.text-danger,
body:has(.main-sidebar) .dropdown-item.text-danger.has-icon { color: var(--bad) !important; }
body:has(.main-sidebar) .dropdown-item.text-danger.has-icon i,
body:has(.main-sidebar) .dropdown-item.text-danger i { color: var(--bad) !important; }
body:has(.main-sidebar) .dropdown-item.text-danger:hover {
  background: rgba(200,54,47,.08) !important;
  color: #A52323 !important;             /* darker red for hover bg, ≥6:1 on cream-tint */
}
body:has(.main-sidebar) .dropdown-item.text-danger:hover i { color: #A52323 !important; }
body:has(.main-sidebar) .dropdown-item.disabled,
body:has(.main-sidebar) .dropdown-item[aria-disabled="true"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
/* If a parent ever renders the dropdown panel on a dark navy pane (rare —
   e.g. nested sidebar-menu dropdowns), force cream text + gold-tint icons so
   text never falls back to --ink-soft on dark. */
body:has(.main-sidebar) .main-sidebar .dropdown-menu .dropdown-item,
body:has(.main-sidebar) .main-sidebar .dropdown-menu .dropdown-item.has-icon {
  color: var(--pane-fore) !important;
}
body:has(.main-sidebar) .main-sidebar .dropdown-menu .dropdown-item.has-icon i {
  color: var(--gold-light, var(--gold)) !important;
}
body:has(.main-sidebar) .main-sidebar .dropdown-menu .dropdown-item.text-danger,
body:has(.main-sidebar) .main-sidebar .dropdown-menu .dropdown-item.text-danger i {
  color: #FF6B62 !important;            /* lightened bad red for dark navy pane */
}
body:has(.main-sidebar) .dropdown-divider {
  border-top: 1px solid var(--line) !important;
  margin: 4px -2px !important;
}
body:has(.main-sidebar) .dropdown-header {
  color: var(--ink-soft) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 8px 10px 4px !important;
}

/* ---- 3.2.13  Floating quick-access  ---- */
body:has(.main-sidebar) .quick-wrap .toggle-btn {
  background: var(--navy-900) !important;
  width: 40px !important; height: 40px !important;
  border-radius: var(--r-md) 0 0 var(--r-md) !important;
  color: var(--gold-light) !important;
  font-size: 18px !important;
  border: 1px solid rgba(255,255,255,.06);
  border-right: none;
  box-shadow: var(--shadow-2);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .quick-wrap .toggle-btn:hover {
  background: var(--navy-800) !important;
  color: var(--gold) !important;
}
body:has(.main-sidebar) .quick-wrap .toggle-btn::before {
  /* gold left rail */
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--gold);
}

body:has(.main-sidebar) .quick-access {
  background: var(--navy-900) !important;
  background-image:
    radial-gradient(280px 200px at 0% 0%, rgba(196,154,63,.06), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950)) !important;
  border: 1px solid rgba(196,154,63,.20) !important;
  border-right: none !important;
  border-radius: var(--r-md) 0 0 var(--r-md) !important;
  box-shadow: var(--shadow-pop) !important;
  padding: 12px !important;
  /* width 220px preserved from inline css */
}
body:has(.main-sidebar) .quick-access .menu a {
  padding: 10px 4px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--pane-mute) !important;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
  border: 1px solid transparent;
}
body:has(.main-sidebar) .quick-access .menu a:hover {
  background: rgba(196,154,63,.08) !important;
  color: var(--pane-fore) !important;
  border-color: rgba(196,154,63,.30) !important;
  transform: translateY(-1px);
}
body:has(.main-sidebar) .quick-access .menu a i {
  font-size: 22px !important;
  margin-bottom: 6px !important;
  color: var(--gold) !important;
  transition: color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .quick-access .menu a:hover i {
  color: var(--gold-light) !important;
  transform: scale(1.05);
}

/* ---- 3.2.14  Page chrome / main content  ----
   The sidebar is `position: fixed/absolute` and overlays its 250 px column.
   Content needs an explicit left offset that tracks the sidebar's current
   width so it never sits under the rail.  Animated for a smooth feel. */
body:has(.main-sidebar) .main-wrapper { background: transparent !important; }
body:has(.main-sidebar) .main-content {
  /* expanded: 250px sidebar + 28px breathing room.  Navbar is 60px sticky/
     fixed at top — clear it with 84px top padding (60 + 24 gutter). */
  padding: 84px 28px 24px 278px !important;
  background: var(--cream) !important;
  position: relative;
  z-index: 1;
  transition: padding-left 280ms var(--ease-out);
}
body.sidebar-mini:has(.main-sidebar) .main-content,
body.sidebar-gone:has(.main-sidebar) .main-content {
  /* collapsed rail at 65px + 28px breathing room */
  padding-left: 93px !important;
}

/* navbar must also clear the sidebar so the topbar starts to the right of it */
body:has(.main-sidebar) .main-navbar,
body:has(.main-sidebar) .navbar.main-navbar {
  padding-left: 270px !important;
  transition: padding-left 280ms var(--ease-out);
}
body.sidebar-mini:has(.main-sidebar) .main-navbar,
body.sidebar-mini:has(.main-sidebar) .navbar.main-navbar,
body.sidebar-gone:has(.main-sidebar) .main-navbar,
body.sidebar-gone:has(.main-sidebar) .navbar.main-navbar {
  padding-left: 85px !important;
}

/* footer mirrors content offset */
body:has(.main-sidebar) .main-footer {
  padding-left: 278px !important;
  transition: padding-left 280ms var(--ease-out);
}
body.sidebar-mini:has(.main-sidebar) .main-footer,
body.sidebar-gone:has(.main-sidebar) .main-footer {
  padding-left: 93px !important;
}

/* mobile: full bleed (sidebar overlays as off-canvas) */
@media (max-width: 600px) {
  body:has(.main-sidebar) .main-content,
  body.sidebar-mini:has(.main-sidebar) .main-content,
  body.sidebar-gone:has(.main-sidebar) .main-content { padding-left: 16px !important; padding-right: 16px !important; }
  body:has(.main-sidebar) .main-navbar,
  body.sidebar-mini:has(.main-sidebar) .main-navbar,
  body.sidebar-gone:has(.main-sidebar) .main-navbar { padding-left: 12px !important; }
  body:has(.main-sidebar) .main-footer,
  body.sidebar-mini:has(.main-sidebar) .main-footer,
  body.sidebar-gone:has(.main-sidebar) .main-footer { padding-left: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.main-sidebar) .main-content,
  body:has(.main-sidebar) .main-navbar,
  body:has(.main-sidebar) .main-footer { transition: none !important; }
}

body:has(.main-sidebar) .main-content section.section { padding: 0 !important; }

/* Default styling for pages that DO use a section-header */
body:has(.main-sidebar) .section-header {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px !important;
}
body:has(.main-sidebar) .section-header h1 {
  font-family: var(--font-body) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
}
body:has(.main-sidebar) .breadcrumb-item + .breadcrumb-item::before {
  content: "·" !important;
  color: var(--ink-faint);
  padding: 0 6px;
}
body:has(.main-sidebar) .breadcrumb-item.active { color: var(--ink-soft); font-weight: 600; }

/* Footer */
body:has(.main-sidebar) .main-footer {
  background: transparent !important;
  border-top: 1px solid var(--line) !important;
  padding: 16px 28px !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
}

/* ---- Modal (locked here; first seen via Birthday Wishes Reminder)  ---- */
body:has(.main-sidebar) .modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-pop) !important;
  overflow: hidden;
}
body:has(.main-sidebar) .modal-header {
  border-bottom: 1px solid var(--line) !important;
  padding: 18px 22px !important;
  position: relative;
  align-items: center;
}
body:has(.main-sidebar) .modal-header::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 22px;
  width: 28px; height: 1px;
  background: var(--gold);
}
body:has(.main-sidebar) .modal-header .modal-title,
body:has(.main-sidebar) .modal-header h5,
body:has(.main-sidebar) .modal-title {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .modal-header .close,
body:has(.main-sidebar) .modal-header button.close {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-soft);
  opacity: .75;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 !important;
  transition: background var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .modal-header .close:hover { background: var(--cream-2); opacity: 1; }
body:has(.main-sidebar) .modal-body {
  padding: 22px !important;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
}
body:has(.main-sidebar) .modal-footer {
  border-top: 1px solid var(--line) !important;
  background: var(--cream) !important;
  padding: 14px 18px !important;
}
body:has(.main-sidebar) .modal-backdrop.show {
  background: rgba(8,21,48,.45) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---- Tooltips (Bootstrap 5)  ---- */
body:has(.main-sidebar) .tooltip-inner {
  background: var(--navy-950) !important;
  color: var(--pane-fore) !important;
  border-radius: var(--r-xs);
  padding: 6px 10px;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  box-shadow: var(--shadow-2);
}
body:has(.main-sidebar) .tooltip .tooltip-arrow::before,
body:has(.main-sidebar) .tooltip .arrow::before {
  border-top-color: var(--navy-950) !important;
  border-bottom-color: var(--navy-950) !important;
  border-left-color: var(--navy-950) !important;
  border-right-color: var(--navy-950) !important;
}

/* ---- Buttons (locked here; first appearance is the modal Close button)  ---- */
body:has(.main-sidebar) .btn {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 16px !important;
  border: 1px solid transparent !important;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), transform var(--d-fast) var(--ease), box-shadow var(--d-base) var(--ease) !important;
}
body:has(.main-sidebar) .btn:active { transform: translateY(1px); }

/* ---- DataTables export-button row (Copy / Excel / CSV / PDF / Print) ----
   Bootstrap's `.btn-group > * { flex: 1 1 auto }` was stretching them across
   the wrapper width and the uppercase + tracking combination wrapped each
   label vertically.  Pin to compact, content-sized horizontal pills. */
body:has(.main-sidebar) .dt-buttons,
body:has(.main-sidebar) .dt-buttons.btn-group {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  gap: 6px !important;
  vertical-align: middle;
}
body:has(.main-sidebar) .dt-buttons .btn,
body:has(.main-sidebar) .dt-buttons .dt-button,
body:has(.main-sidebar) .dt-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 4px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: var(--cream-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-soft) !important;
  border-radius: var(--r-xs) !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body:has(.main-sidebar) .dt-buttons .btn:hover,
body:has(.main-sidebar) .dt-buttons .dt-button:hover {
  background: var(--surface) !important;
  border-color: rgba(196,154,63,.45) !important;
  color: var(--ink) !important;
}
/* FIX_M2 (B-988): selected state for DataTables toolbar buttons (e.g. column-visibility) */
body:has(.main-sidebar) .dt-buttons .btn.active,
body:has(.main-sidebar) .dt-buttons .dt-button.active,
body:has(.main-sidebar) .dt-buttons .dt-button.dt-button-active {
  background: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: var(--pane-fore) !important;
}
body:has(.main-sidebar) .dt-buttons .btn span,
body:has(.main-sidebar) .dt-buttons .dt-button span {
  font: inherit !important;
  letter-spacing: inherit;
}
body:has(.main-sidebar) .btn-primary {
  background: var(--navy-950) !important;
  border-color: var(--navy-950) !important;
  color: var(--pane-fore) !important;
  box-shadow: var(--shadow-1);
}
body:has(.main-sidebar) .btn-primary:hover {
  background: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
body:has(.main-sidebar) .btn-secondary {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .btn-secondary:hover {
  /* FIX_M3 (B-989): was var(--ink-200) which is undefined → unset → transparent border on hover */
  background: var(--cream-2) !important;
  border-color: var(--ink-faint) !important;
}

/* ---- FIX_B_1700 — Button-colour contrast sweep (every variant readable)
   ----------------------------------------------------------------------
   The `body:has(.main-sidebar) .btn { ... }` base rule above sets only
   typography, padding, transparent border. It does NOT set a background or
   colour, so Bootstrap's variant rules (.btn-danger / -success / -warning /
   -info / outline-* etc.) fall through. Many of those variants in the
   redesign era end up with light text on light backgrounds (or coloured text
   on coloured backgrounds) because of cascade leaks elsewhere. Lock every
   variant to an aesthetic-safe pairing with WCAG ≥4.5:1 contrast.

   Aesthetic decisions (Sovereign Institutional, palette-locked):
     · danger   → bad #C8362F + cream  (ratio ≈5.6 :1)
     · success  → ok   #16A85F + cream  (ratio ≈3.8 :1 — bumped to deeper #16744D for ≥4.5 :1)
     · warning  → gold #C49A3F + ink    (ratio ≈8.2 :1 — gold-on-ink reads like a page bookmark)
     · info     → info #4878B8 + cream  (ratio ≈5.1 :1)
     · light    → cream-2 + ink         (page surface bookmark)
     · dark     → navy-950 + cream      (matches primary)
     · outline  → transparent bg + variant colour text + variant border
                  (hover fills with variant colour, swaps to cream/ink)
     · btn-icon → inherits family colour; force fill for visibility
     · disabled → opacity:.55; colours preserved so still readable
   ---------------------------------------------------------------------- */

/* --- DANGER --- */
body:has(.main-sidebar) .btn-danger,
body:has(.main-sidebar) .main-content .btn-danger {
  background: var(--bad) !important;
  border-color: var(--bad) !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) .btn-danger:hover,
body:has(.main-sidebar) .btn-danger:focus,
body:has(.main-sidebar) .btn-danger:active,
body:has(.main-sidebar) .btn-danger.active {
  background: #A82A24 !important;
  border-color: #A82A24 !important;
  color: var(--cream) !important;
}

/* --- SUCCESS  (deeper than --ok #16A85F to clear 4.5:1 on cream text) --- */
body:has(.main-sidebar) .btn-success,
body:has(.main-sidebar) .main-content .btn-success {
  background: #16744D !important;
  border-color: #16744D !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) .btn-success:hover,
body:has(.main-sidebar) .btn-success:focus,
body:has(.main-sidebar) .btn-success:active,
body:has(.main-sidebar) .btn-success.active {
  background: #0F5C3D !important;
  border-color: #0F5C3D !important;
  color: var(--cream) !important;
}

/* --- WARNING  (gold-on-ink — the locked aesthetic mark) --- */
body:has(.main-sidebar) .btn-warning,
body:has(.main-sidebar) .main-content .btn-warning {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .btn-warning:hover,
body:has(.main-sidebar) .btn-warning:focus,
body:has(.main-sidebar) .btn-warning:active,
body:has(.main-sidebar) .btn-warning.active {
  background: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
  color: var(--cream) !important;
}

/* --- INFO  (deepened from --info #4878B8 → #355C92 to hit 4.5:1 on cream) --- */
body:has(.main-sidebar) .btn-info,
body:has(.main-sidebar) .main-content .btn-info {
  background: #355C92 !important;
  border-color: #355C92 !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) .btn-info:hover,
body:has(.main-sidebar) .btn-info:focus,
body:has(.main-sidebar) .btn-info:active,
body:has(.main-sidebar) .btn-info.active {
  background: #25457A !important;
  border-color: #25457A !important;
  color: var(--cream) !important;
}

/* --- LIGHT --- */
body:has(.main-sidebar) .btn-light,
body:has(.main-sidebar) .main-content .btn-light {
  background: var(--cream-2) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .btn-light:hover,
body:has(.main-sidebar) .btn-light:focus,
body:has(.main-sidebar) .btn-light:active {
  background: var(--cream) !important;
  border-color: var(--ink-faint) !important;
  color: var(--ink) !important;
}

/* --- DARK --- */
body:has(.main-sidebar) .btn-dark,
body:has(.main-sidebar) .main-content .btn-dark {
  background: var(--navy-950) !important;
  border-color: var(--navy-950) !important;
  color: var(--pane-fore) !important;
}
body:has(.main-sidebar) .btn-dark:hover,
body:has(.main-sidebar) .btn-dark:focus,
body:has(.main-sidebar) .btn-dark:active {
  background: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
  color: var(--pane-fore) !important;
}

/* --- OUTLINE PRIMARY --- */
body:has(.main-sidebar) .btn-outline-primary,
body:has(.main-sidebar) .main-content .btn-outline-primary {
  background: transparent !important;
  border-color: var(--navy-700) !important;
  color: var(--navy-700) !important;
}
body:has(.main-sidebar) .btn-outline-primary:hover,
body:has(.main-sidebar) .btn-outline-primary:focus,
body:has(.main-sidebar) .btn-outline-primary:active,
body:has(.main-sidebar) .btn-outline-primary.active {
  background: var(--navy-950) !important;
  border-color: var(--navy-950) !important;
  color: var(--cream) !important;
}

/* --- OUTLINE SECONDARY --- */
body:has(.main-sidebar) .btn-outline-secondary,
body:has(.main-sidebar) .main-content .btn-outline-secondary {
  background: transparent !important;
  border-color: var(--ink-mute) !important;
  color: var(--ink-soft) !important;
}
body:has(.main-sidebar) .btn-outline-secondary:hover,
body:has(.main-sidebar) .btn-outline-secondary:focus,
body:has(.main-sidebar) .btn-outline-secondary:active,
body:has(.main-sidebar) .btn-outline-secondary.active {
  background: var(--ink-soft) !important;
  border-color: var(--ink-soft) !important;
  color: var(--cream) !important;
}

/* --- OUTLINE DANGER --- */
body:has(.main-sidebar) .btn-outline-danger,
body:has(.main-sidebar) .main-content .btn-outline-danger {
  background: transparent !important;
  border-color: var(--bad) !important;
  color: var(--bad) !important;
}
body:has(.main-sidebar) .btn-outline-danger:hover,
body:has(.main-sidebar) .btn-outline-danger:focus,
body:has(.main-sidebar) .btn-outline-danger:active,
body:has(.main-sidebar) .btn-outline-danger.active {
  background: var(--bad) !important;
  border-color: var(--bad) !important;
  color: var(--cream) !important;
}

/* --- OUTLINE SUCCESS --- */
body:has(.main-sidebar) .btn-outline-success,
body:has(.main-sidebar) .main-content .btn-outline-success {
  background: transparent !important;
  border-color: #16744D !important;
  color: #0F5C3D !important;
}
body:has(.main-sidebar) .btn-outline-success:hover,
body:has(.main-sidebar) .btn-outline-success:focus,
body:has(.main-sidebar) .btn-outline-success:active,
body:has(.main-sidebar) .btn-outline-success.active {
  background: #16744D !important;
  border-color: #16744D !important;
  color: var(--cream) !important;
}

/* --- OUTLINE WARNING  (text deepened from gold-deep to #7A5E1F for ≥4.5:1 on cream) --- */
body:has(.main-sidebar) .btn-outline-warning,
body:has(.main-sidebar) .main-content .btn-outline-warning {
  background: transparent !important;
  border-color: var(--gold-deep) !important;
  color: #7A5E1F !important;
}
body:has(.main-sidebar) .btn-outline-warning:hover,
body:has(.main-sidebar) .btn-outline-warning:focus,
body:has(.main-sidebar) .btn-outline-warning:active,
body:has(.main-sidebar) .btn-outline-warning.active {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
}

/* --- OUTLINE INFO --- */
body:has(.main-sidebar) .btn-outline-info,
body:has(.main-sidebar) .main-content .btn-outline-info {
  background: transparent !important;
  border-color: var(--info) !important;
  color: #355C92 !important;
}
body:has(.main-sidebar) .btn-outline-info:hover,
body:has(.main-sidebar) .btn-outline-info:focus,
body:has(.main-sidebar) .btn-outline-info:active,
body:has(.main-sidebar) .btn-outline-info.active {
  background: var(--info) !important;
  border-color: var(--info) !important;
  color: var(--cream) !important;
}

/* --- OUTLINE DARK --- */
body:has(.main-sidebar) .btn-outline-dark,
body:has(.main-sidebar) .main-content .btn-outline-dark {
  background: transparent !important;
  border-color: var(--navy-900) !important;
  color: var(--navy-900) !important;
}
body:has(.main-sidebar) .btn-outline-dark:hover,
body:has(.main-sidebar) .btn-outline-dark:focus,
body:has(.main-sidebar) .btn-outline-dark:active,
body:has(.main-sidebar) .btn-outline-dark.active {
  background: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: var(--cream) !important;
}

/* --- OUTLINE LIGHT --- */
body:has(.main-sidebar) .btn-outline-light,
body:has(.main-sidebar) .main-content .btn-outline-light {
  background: transparent !important;
  border-color: var(--ink-faint) !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .btn-outline-light:hover,
body:has(.main-sidebar) .btn-outline-light:focus,
body:has(.main-sidebar) .btn-outline-light:active {
  background: var(--cream-2) !important;
  border-color: var(--ink-faint) !important;
  color: var(--ink) !important;
}

/* --- BTN-CLOSE (Bootstrap 5 modal/alert close X) ---
   Bootstrap renders this as a transparent X icon via background-image. The
   redesign already styles `button.close` (legacy) but `.btn-close` (BS5) was
   leaking the default. Force a visible cross-stroke colour. */
body:has(.main-sidebar) .btn-close,
body:has(.main-sidebar) .modal-header .btn-close {
  /* invert the BS-default black SVG to ink-mute via filter — works regardless
     of locale-injected SVG path */
  filter: none !important;
  opacity: .65 !important;
  color: var(--ink-mute) !important;
}
body:has(.main-sidebar) .btn-close:hover,
body:has(.main-sidebar) .modal-header .btn-close:hover {
  opacity: 1 !important;
  color: var(--ink) !important;
}

/* --- BTN-ICON (small round/icon-only buttons) ---
   These typically inherit the family colour; ensure icon stroke is readable
   against whatever fill the variant gives. */
body:has(.main-sidebar) .btn-icon i,
body:has(.main-sidebar) .btn-icon svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* --- INPUT-GROUP buttons (search submit / password reveal etc.) ---
   When unstyled (just `.btn` inside an .input-group), force a readable pairing
   so the icon doesn't disappear into the cream input frame. */
body:has(.main-sidebar) .input-group .btn:not([class*="btn-"]),
body:has(.main-sidebar) .input-group-append .btn:not([class*="btn-"]),
body:has(.main-sidebar) .input-group-prepend .btn:not([class*="btn-"]) {
  background: var(--cream-2) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}

/* --- DISABLED state (every variant) ---
   Preserve colours, just visibly de-emphasise so labels stay readable. */
body:has(.main-sidebar) .btn:disabled,
body:has(.main-sidebar) .btn[disabled],
body:has(.main-sidebar) .btn.disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  /* do NOT touch color/background — keep contrast within the variant */
}

/* --- SweetAlert family parity ---
   .swal-button--confirm + cancel are styled at line 2514. Add danger for
   destructive prompts ("Delete", "Yes, refund") so they get the same red as
   .btn-danger rather than navy primary. */
.swal-button--danger,
.swal-button.btn.btn-danger {
  background: var(--bad) !important;
  border-color: var(--bad) !important;
  color: var(--cream) !important;
}
.swal-button--danger:hover,
.swal-button.btn.btn-danger:hover {
  background: #A82A24 !important;
  border-color: #A82A24 !important;
  color: var(--cream) !important;
}

/* --- DROPDOWN-TOGGLE used as a button ---
   The caret + label inherit from the wrapping .btn-* variant; nothing extra
   to force here, but if Bootstrap injects a dropdown-toggle alone (no btn-*),
   make sure it's readable. */
body:has(.main-sidebar) .btn.dropdown-toggle:not([class*="btn-primary"]):not([class*="btn-secondary"]):not([class*="btn-danger"]):not([class*="btn-success"]):not([class*="btn-warning"]):not([class*="btn-info"]):not([class*="btn-light"]):not([class*="btn-dark"]):not([class*="btn-outline"]):not([class*="btn-filter"]):not(.dt-button) {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}

/* end FIX_B_1700 ---------------------------------------------------------- */


/* ---- Responsive (CR-9) — admin shell  ---- */

/* Mobile / small tablet: sidebar already collapses via Stisla. We just polish.  */
@media (max-width: 1024px) {
  body:has(.main-sidebar) .main-content { padding: 20px 22px !important; }
  body:has(.main-sidebar) .main-navbar .search-element { width: 220px; }
}
@media (max-width: 768px) {
  body:has(.main-sidebar) .main-navbar .search-element {
    width: 36px;
    padding: 0;
    background: transparent;
    border-color: transparent;
  }
  body:has(.main-sidebar) .main-navbar .search-element::before { left: 11px; }
  body:has(.main-sidebar) .main-navbar .search-element input { display: none; }
  body:has(.main-sidebar) .main-content { padding: 16px 16px !important; }
  body:has(.main-sidebar) .main-footer { padding: 14px 16px !important; }
}
@media (max-width: 600px) {
  body:has(.main-sidebar) .main-navbar .search-element { display: none; }
  body:has(.main-sidebar) .quick-wrap { top: 64px !important; } /* clear navbar */
  body:has(.main-sidebar) .quick-wrap .toggle-btn { width: 36px !important; height: 36px !important; }
  body:has(.main-sidebar) .modal-dialog { margin: 0 !important; max-width: 100% !important; }
  body:has(.main-sidebar) .modal-content { border-radius: 0 !important; min-height: 100vh; }
}

/* ---- Reduced motion  ---- */
@media (prefers-reduced-motion: reduce) {
  body:has(.main-sidebar) *,
  body:has(.main-sidebar) *::before,
  body:has(.main-sidebar) *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* end §3.2 admin shell */

/* ===================================================================   3.3  DASHBOARD  (design.md §3.3)
   Decisions locked 2026-05-08:
     · Stat tiles → white + gold rule + italic-mono numeral (drop rainbow)
     · Avatars  → square ID-badge style
     · ApexCharts → custom navy + gold theme
     · SweetAlert → restyle to our modal pattern
     · KPI dividers → hairline vertical rules
     · Loading → skeleton rows
   Scoping: `body:has(.main-sidebar) .main-content`. Login is unaffected.
   ========================================================================== */

/* ---- 3.3.A  Section header + page title ---- */
body:has(.main-sidebar) .main-content .page-title {
  font-family: var(--font-body) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* ---- 3.3.A  Doctor-scope filter — REDESIGNED as a Filter Pill Bar
     The avatars are filter buttons (each onclick re-fetches dashboard data
     scoped to that doctor).  We turn them into pills with:
        [avatar circle] [name in mono caps]
     and stack a thin "filtering by" banner under the pill row, fed from the
     same #doctorDisplay/#docName/#docSpec the JS already populates.

     We do not change the markup — the floating card is repurposed visually
     into the banner via CSS.  An active class (`vk-active`) is added by our
     overlay JS on avatar click. */

/* Container — flex column.  Reorder via `order` since #doctorDisplay
   appears BEFORE the avatars in the original markup. */
body:has(.main-sidebar) .main-content .avatar-group {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end;
  gap: 0;
}
body:has(.main-sidebar) .main-content .avatar-group .avatar-group-avatar { order: 1; }   /* pills first */
body:has(.main-sidebar) .main-content .avatar-group .doctor-display.card { order: 2; width: 100%; }   /* banner second */
body:has(.main-sidebar) .main-content .avatar-group .avatar-doctor-detailes { order: 3; width: 100%; position: relative; }

/* Pill row */
body:has(.main-sidebar) .main-content .avatar-group-avatar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 6px;
  padding: 0;
}

/* The default "ALL" indicator before the pills (visual only — clicking it
   doesn't reset because there's no backend "all" toggle in upstream JS). */
body:has(.main-sidebar) .main-content .avatar-group-avatar::before {
  content: "FILTER ▸";
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 6px;
}

/* Each avatar becomes a horizontal pill */
body:has(.main-sidebar) .main-content .avatar {
  width: auto !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  padding: 2px 12px 2px 2px !important;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft) !important;
  cursor: pointer;
  position: relative;
  overflow: visible !important;
  transition: transform var(--d-fast) var(--ease),
              border-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease),
              background var(--d-base) var(--ease);
}
/* The avatar image inside the pill — small circle on the left */
body:has(.main-sidebar) .main-content .avatar img.avatar-img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  background: var(--cream-2);
  flex: 0 0 28px;
}
/* If the avatar has no image, the PHP renders a single character in the div
   itself.  We give it a circular bg as a fallback. */
body:has(.main-sidebar) .main-content .avatar:not(.more):not(:has(img))::before {
  content: "";
  width: 28px; height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cream-2), var(--cream));
  border: 1px solid var(--line);
  flex: 0 0 28px;
}
/* The doctor's name — rendered from data-name via ::after */
body:has(.main-sidebar) .main-content .avatar:not(.more)::after {
  content: attr(data-name);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
body:has(.main-sidebar) .main-content .avatar:not(.more):hover {
  border-color: rgba(196,154,63,.45);
  color: var(--ink) !important;
}

/* Active pill — gold underline + bolder text */
body:has(.main-sidebar) .main-content .avatar.vk-active {
  background: var(--cream-2) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 0 var(--gold);
}
body:has(.main-sidebar) .main-content .avatar.vk-active::after {
  font-weight: 600;
  color: var(--ink);
}

/* "+N MORE" overflow pill */
body:has(.main-sidebar) .main-content .avatar.more {
  background: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: var(--gold) !important;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 12px !important;
  height: 32px !important;
}
body:has(.main-sidebar) .main-content .avatar.more::before { content: none !important; display: none !important; }
body:has(.main-sidebar) .main-content .avatar.more:hover {
  background: var(--navy-800) !important;
  color: var(--gold-light) !important;
}

/* Hidden users panel — opens beneath the "+N MORE" pill */
body:has(.main-sidebar) .main-content .hidden-users {
  position: absolute !important;
  top: auto !important; right: 0 !important;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  min-width: 220px;
  z-index: 100;
  font-family: var(--font-body);
}
body:has(.main-sidebar) .main-content .hidden-users > div {
  padding: 8px 12px !important;
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease);
}
body:has(.main-sidebar) .main-content .hidden-users > div:hover {
  background: var(--cream-2);
  color: var(--ink);
}

/* The floating doctor display card (#doctorDisplay) — repurposed as a thin
   "filtering dashboard by" banner under the pill row. */
body:has(.main-sidebar) .main-content .doctor-display.card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  position: relative;
  overflow: visible;
  border-top: 1px solid var(--line) !important;
  padding-top: 8px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
body:has(.main-sidebar) .main-content .doctor-display.card::before {
  content: "VIEWING ▸";
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  position: static;
  width: auto; height: auto;
  flex: 0 0 auto;
}
/* The default placeholder paragraph */
body:has(.main-sidebar) .main-content .doctor-display.card > p.text-muted {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  margin: 0 !important;
}
/* Once #doctorDisplay is populated, JS replaces innerHTML with #docName +
   #docSpec + #docAvatar.  Style those as the inline scope readout. */
body:has(.main-sidebar) .main-content .doctor-display.card #docName {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
body:has(.main-sidebar) .main-content .doctor-display.card #docSpec,
body:has(.main-sidebar) .main-content .doctor-display.card small {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
}
body:has(.main-sidebar) .main-content .doctor-display.card #docAvatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--line-2);
}

/* Compact the section header row so it doesn't bleed into the next row */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(1) {
  align-items: flex-start !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(1) > .col-12.col-md-6:first-child {
  padding-top: 6px;
}
/* Restore extra space at the top of subsequent rows so the gold eyebrow
   doesn't sit under the divider */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) {
  padding-top: 28px;
}

/* Mobile: pill bar wraps under the page title */
@media (max-width: 768px) {
  body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(1) > .col-12.col-md-6:nth-child(2) {
    margin-top: 10px;
  }
  body:has(.main-sidebar) .main-content .avatar-group-avatar { gap: 4px; }
  body:has(.main-sidebar) .main-content .avatar:not(.more)::after { font-size: 9.5px; letter-spacing: 0.06em; }
}

/* ---- 3.3.B  Stat tiles — white + gold rule (drop rainbow) ---- */
body:has(.main-sidebar) .main-content .card.l-bg-style1,
body:has(.main-sidebar) .main-content .card.l-bg-style2,
body:has(.main-sidebar) .main-content .card.l-bg-style3,
body:has(.main-sidebar) .main-content .card.l-bg-style4 {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-1) !important;
  position: relative;
  overflow: hidden;
}
/* gold left rule on every tile (the institutional mark) */
body:has(.main-sidebar) .main-content .card.l-bg-style1::before,
body:has(.main-sidebar) .main-content .card.l-bg-style2::before,
body:has(.main-sidebar) .main-content .card.l-bg-style3::before,
body:has(.main-sidebar) .main-content .card.l-bg-style4::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
}
/* the inner card-statistic-3 wrapper */
body:has(.main-sidebar) .main-content .card-statistic-3 {
  height: auto !important;
  padding: 18px 20px !important;
  background: transparent !important;
  background-image: none !important;
  position: relative;
}
/* the giant faded-icon background — desaturate but keep as a quiet mark */
body:has(.main-sidebar) .main-content .card-statistic-3 .card-icon.card-icon-large,
body:has(.main-sidebar) .main-content .card-statistic-3 .card-icon-large {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  width: auto !important; height: auto !important;
  font-size: 64px !important;
  line-height: 1;
  opacity: .07;
  color: var(--ink-mute) !important;
}
body:has(.main-sidebar) .main-content .card-statistic-3 .card-icon.card-icon-large i,
body:has(.main-sidebar) .main-content .card-statistic-3 .card-icon-large i {
  font-size: 64px !important;
  color: var(--ink-mute) !important;
}
/* card-content — title + numeral + change */
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content {
  margin-top: 0 !important;
  position: relative;
  z-index: 2;
}
body:has(.main-sidebar) .main-content .card-statistic-3 .card-title {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  margin: 0 0 8px !important;
}
/* the BIG numeral inside the tile — institutional mono.
   The actual PHP renders it as a class-less <span> directly inside
   .card-content (next to the .card-title). Target it explicitly. */
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content > span,
body:has(.main-sidebar) .main-content .card.l-bg-style1 .card-statistic-3 strong,
body:has(.main-sidebar) .main-content .card.l-bg-style2 .card-statistic-3 strong,
body:has(.main-sidebar) .main-content .card.l-bg-style3 .card-statistic-3 strong,
body:has(.main-sidebar) .main-content .card.l-bg-style4 .card-statistic-3 strong,
body:has(.main-sidebar) .main-content .card.l-bg-style1 .card-statistic-3 h2,
body:has(.main-sidebar) .main-content .card.l-bg-style1 .card-statistic-3 .stat-value {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  font-feature-settings: "tnum","lnum" !important;
  margin: 6px 0 8px !important;
}

/* The % change line below the numeral.  Inherit colours from the change
   direction (up = ok, down = bad) but keep the rest in ink-mute. */
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p,
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p > span {
  color: var(--ink-mute) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
  text-transform: uppercase;
}
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p i {
  color: var(--ink-mute) !important;
  margin-right: 4px;
}
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p i.fa-arrow-up { color: var(--ok) !important; }
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p i.fa-arrow-down { color: var(--bad) !important; }
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p i.fa-arrows-alt-h { color: var(--gold-deep) !important; }
/* progress bar inside tiles */
body:has(.main-sidebar) .main-content .card-statistic-3 .progress {
  background: var(--cream-2) !important;
  border-radius: 999px !important;
  height: 4px !important;
  margin-top: 10px !important;
}
body:has(.main-sidebar) .main-content .card-statistic-3 .progress-bar {
  background: var(--gold) !important;
}
/* the % change line */
body:has(.main-sidebar) .main-content .card-statistic-3 small,
body:has(.main-sidebar) .main-content .card-statistic-3 .progress-name {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.10em !important;
  color: var(--ink-mute) !important;
  text-transform: uppercase;
}

/* ---- 3.3.C  Detailed Metrics card ---- */
body:has(.main-sidebar) .main-content .card .card-body.p-3 .row.text-center > [class*="col-"].border-end {
  border-right: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  position: relative;
}
body:has(.main-sidebar) .main-content .card .card-body.p-3 .row.text-center > [class*="col-"]:last-child.border-end {
  border-right: none !important;
}
body:has(.main-sidebar) .main-content .card .card-body.p-3 h6 {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  margin-top: 12px !important;
}
body:has(.main-sidebar) .main-content .card .card-body.p-3 h4#todayAppointments,
body:has(.main-sidebar) .main-content .card .card-body.p-3 h4#followUps,
body:has(.main-sidebar) .main-content .card .card-body.p-3 h4#avgWaitTime,
body:has(.main-sidebar) .main-content .card .card-body.p-3 h4#doctorsStatus {
  font-family: var(--font-mono) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  font-feature-settings: "tnum","lnum" !important;
  margin: 4px 0 !important;
}
body:has(.main-sidebar) .main-content .card .card-body.p-3 h4.text-success { color: var(--ok) !important; }
body:has(.main-sidebar) .main-content .card .card-body.p-3 h4.text-danger { color: var(--bad) !important; }

/* ---- 3.3.D / E / F / G  Generic dashboard cards ---- */
body:has(.main-sidebar) .main-content .card.fixed-height-card,
body:has(.main-sidebar) .main-content .card.dashboard-list-card,
body:has(.main-sidebar) .main-content .card.flex-fill {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-1) !important;
}
body:has(.main-sidebar) .main-content .card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 18px !important;
  position: relative;
}
body:has(.main-sidebar) .main-content .card-header h4,
body:has(.main-sidebar) .main-content .card-header h5 {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
body:has(.main-sidebar) .main-content .card-header::after {
  content: "";
  position: absolute;
  left: 18px; bottom: -1px;
  width: 24px; height: 1px;
  background: var(--gold);
  opacity: .65;
}

/* date input + selects in card headers */
body:has(.main-sidebar) .main-content .card-header input[type="date"],
body:has(.main-sidebar) .main-content .card-header .form-control,
body:has(.main-sidebar) .main-content .card-header .form-select {
  height: 32px !important;
  padding: 4px 10px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-xs) !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  width: auto;
  min-width: 120px;
}

/* Doctor Slots filter dropdown button */
body:has(.main-sidebar) .main-content .btn.btn-filter {
  background: var(--cream-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  height: 32px;
  padding: 4px 12px !important;
  border-radius: var(--r-xs) !important;
}
/* FIX_M1 (B-987): open-state and hover feedback for filter dropdown toggles */
body:has(.main-sidebar) .main-content .btn.btn-filter:hover,
body:has(.main-sidebar) .main-content .btn.btn-filter:focus,
body:has(.main-sidebar) .main-content .btn.btn-filter.show,
body:has(.main-sidebar) .main-content .btn.btn-filter[aria-expanded="true"] {
  background: var(--surface) !important;
  border-color: rgba(196,154,63,.45) !important;
  color: var(--ink) !important;
}

/* dashboard-pill (the "Top 10" badges on Birthdays / Revisits)
   FIX_B_1705 — Direction B stronger tint (.35 + deepened text + visible
   border) so the chip reads on cream-1 instead of dissolving into it. */
body:has(.main-sidebar) .main-content .dashboard-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(196,154,63,.35) !important;
  color: #6B5219 !important;
  border: 1px solid rgba(196,154,63,.60) !important;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* tables in dashboard cards */
body:has(.main-sidebar) .main-content .card .table {
  font-family: var(--font-body);
  font-size: 13px;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
body:has(.main-sidebar) .main-content .card .table thead th {
  background: var(--surface) !important;
  color: var(--ink-mute) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--line-2) !important;
  border-top: none !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}
body:has(.main-sidebar) .main-content .card .table thead th b {
  font-weight: inherit !important;
}
body:has(.main-sidebar) .main-content .card .table tbody td {
  padding: 12px 14px !important;
  border-top: 1px solid var(--line) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
body:has(.main-sidebar) .main-content .card .table tbody tr:hover td {
  background: rgba(196,154,63,.04) !important;
}

/* ---- Skeleton loading rows (CR-locked here for first time) ---- */
body:has(.main-sidebar) .main-content .table tbody tr td.dashboard-empty-state,
body:has(.main-sidebar) .main-content .table tbody td:has(> *:empty:only-child),
body:has(.main-sidebar) .main-content .table tbody tr.skeleton td {
  position: relative;
}
@keyframes vk-skeleton {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
body:has(.main-sidebar) .main-content .table tbody td.dashboard-empty-state {
  color: transparent !important;
  font-size: 0 !important;
}
body:has(.main-sidebar) .main-content .table tbody td.dashboard-empty-state::before {
  content: "";
  display: block;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cream-2) 25%, var(--paper-2, #efeae0) 50%, var(--cream-2) 75%);
  background-size: 400px 100%;
  animation: vk-skeleton 1.4s linear infinite;
  margin: 4px 0;
}
body:has(.main-sidebar) .main-content .table tbody td.dashboard-empty-state::after {
  content: "";
  display: block;
  height: 12px;
  width: 60%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cream-2) 25%, var(--paper-2, #efeae0) 50%, var(--cream-2) 75%);
  background-size: 400px 100%;
  animation: vk-skeleton 1.4s linear infinite .2s;
  margin: 4px 0;
}

/* User Access List scroll wrapper */
body:has(.main-sidebar) .main-content #proTeamScroll {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Doctor list (rendered into #doctorSlotChart) — quiet rows */
body:has(.main-sidebar) .main-content .doctor-list {
  font-family: var(--font-body);
  font-size: 13px;
}

/* ---- 3.3.H  Appointments line chart card + ApexCharts ---- */
body:has(.main-sidebar) .main-content .card-header-action .nav-pills {
  margin: 0;
  padding: 0;
}
body:has(.main-sidebar) .main-content .card-header-action select#year,
body:has(.main-sidebar) .main-content .card-header-action select.form-select {
  min-width: 100px;
  height: 32px !important;
  padding: 4px 10px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-xs) !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
/* ApexCharts SVG overrides */
body:has(.main-sidebar) .main-content #chart text { font-family: var(--font-mono) !important; fill: var(--ink-mute) !important; }
body:has(.main-sidebar) .main-content #chart .apexcharts-tooltip {
  background: var(--navy-950) !important;
  color: var(--pane-fore) !important;
  border: 1px solid rgba(196,154,63,.30) !important;
  border-radius: var(--r-xs) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  box-shadow: var(--shadow-pop) !important;
}
body:has(.main-sidebar) .main-content #chart .apexcharts-tooltip-title {
  background: var(--navy-900) !important;
  color: var(--gold) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px !important;
}
body:has(.main-sidebar) .main-content #chart .apexcharts-gridline {
  stroke: var(--line) !important;
  stroke-dasharray: 0 !important;
}
body:has(.main-sidebar) .main-content #chart .apexcharts-xaxis line,
body:has(.main-sidebar) .main-content #chart .apexcharts-yaxis line {
  stroke: var(--line-2) !important;
}

/* ---- 3.3.I  SweetAlert (Birthday Wishes Reminder) restyle ---- */
.swal-overlay {
  background: rgba(8,21,48,.45) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.swal-modal {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-pop) !important;
  overflow: hidden !important;
  font-family: var(--font-body) !important;
  padding: 0 !important;
  width: 480px !important;
  max-width: 92vw !important;
}
.swal-icon {
  width: 60px !important; height: 60px !important;
  border-color: var(--gold) !important;
  margin: 22px auto 14px !important;
}
.swal-icon--info::before, .swal-icon--info::after {
  background-color: var(--gold) !important;
}
.swal-title {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  color: var(--ink) !important;
  padding: 0 22px 6px !important;
  position: relative;
}
.swal-title::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 32px; height: 1px;
  background: var(--gold);
}
.swal-text, .swal-content {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  padding: 14px 22px !important;
}
.swal-content table { width: 100%; font-size: 13px; }
.swal-content table th {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  text-align: left;
  padding: 10px 8px !important;
  border-bottom: 1px solid var(--line-2);
}
.swal-content table td {
  padding: 10px 8px !important;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.swal-footer {
  background: var(--cream) !important;
  border-top: 1px solid var(--line) !important;
  padding: 14px 18px !important;
  text-align: right !important;
}
.swal-button {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 18px !important;
  border: 1px solid transparent !important;
}
.swal-button--confirm,
.swal-button.btn.btn-primary {
  background: var(--navy-950) !important;
  border-color: var(--navy-950) !important;
  color: var(--pane-fore) !important;
  box-shadow: var(--shadow-1);
}
.swal-button--confirm:hover,
.swal-button.btn.btn-primary:hover {
  background: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
  box-shadow: var(--shadow-2);
}
.swal-button--cancel {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}

/* ---- 3.3.J  Misc dashboard polish ---- */
body:has(.main-sidebar) .main-content .nav-pills .nav-link,
body:has(.main-sidebar) .main-content .nav-pills input.nav-link {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  padding: 6px 14px !important;
  color: var(--ink-mute) !important;
  background: transparent !important;
  /* nav-pills sometimes use <input type="button"> which inherits OS-default
     appearance — strip it so our color/background actually paint the label. */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: 1px solid var(--line) !important;
  cursor: pointer;
  height: 32px;
  margin-right: 6px;
}
body:has(.main-sidebar) .main-content .nav-pills .nav-link.active,
body:has(.main-sidebar) .main-content .nav-pills input.nav-link.active {
  background: var(--navy-900) !important;
  background-color: var(--navy-900) !important;
  color: var(--pane-fore) !important;
  border-color: var(--navy-900) !important;
}
body:has(.main-sidebar) .main-content .nav-pills .nav-link:hover:not(.active),
body:has(.main-sidebar) .main-content .nav-pills input.nav-link:hover:not(.active) {
  background: var(--cream-2) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}


/* ===================================================================   3.3 (cont)  CREATIVE LAYOUT — Operational Console with Section Rhythm
   --------------------------------------------------------------------------
   Original PHP markup is sequential .row blocks (no semantic ids on rows).
   We target each via :nth-of-type within `section.section`:
     1: header (page title + avatars)
     2: 4 stat tiles
     3: Detailed Metrics
     4: Appointments + Doctors
     5: User Access + Top 5 Prescribed Tests
     6: Upcoming Birthdays + Upcoming Revisits
     7: Appointments line chart
   ========================================================================== */

/* Section base — vertical rhythm container.
   Stays as a regular block (let Bootstrap rows flow naturally) — only the
   spacing is rewired to give a tighter, more deliberate cadence. */
body:has(.main-sidebar) .main-content section.section { padding-top: 4px !important; }
body:has(.main-sidebar) .main-content section.section > .row {
  margin-bottom: 14px !important;
  position: relative;
}
/* Dashboard rows reserve space for their gold-eyebrow ::before; non-dashboard
   pages don't have the eyebrow so they don't need the 26px top reservation. */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row {
  margin-bottom: 22px !important;
}

/* mono section-label eyebrows BEFORE each row block — DASHBOARD ONLY.
   `position: absolute` so the pseudo doesn't become a flex item that steals
   width from the cols inside the row.  Row gets a padding-top to reserve
   space for the label.  Other pages skip the reservation. */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row {
  padding-top: 26px;
}
body:has(.main-sidebar) .main-content section.section > .row::before {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  position: absolute !important;
  top: 0; left: 4px;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  width: auto;
  z-index: 1;
}
/* the header row has no eyebrow — no extra space needed */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(1) {
  padding-top: 0;
}
/* Row labels — read top to bottom: TODAY / GROWTH / OPERATIONS / PRACTICE / ENGAGEMENT / TRENDS */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(1)::before { content: ""; display: none; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2)::before { content: "01 · GROWTH ▸ MONTH-ON-MONTH"; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3)::before { content: "02 · TODAY · LIVE  ●"; color: var(--ok) !important; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(4)::before { content: "03 · OPERATIONS"; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(5)::before { content: "04 · PRACTICE"; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(6)::before { content: "05 · ENGAGEMENT"; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7)::before { content: "06 · TRENDS"; }

/* Pulsing live dot in the TODAY label */
@keyframes vk-live {
  0%   { box-shadow: 0 0 0 0 rgba(22,116,77,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(22,116,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,116,77,0); }
}

/* ---- 3.3.B (creative)  Stat tiles — compress to 96px, delta chip top-right.
   Force 4-per-row even on tighter content widths (≥ 992 px viewport — `lg`).
   Bootstrap defaults to col-lg-6 (2 per row) below xl which is awkward at the
   widths we see after the sidebar takes its 250 px. */
@media (min-width: 992px) {
  body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}
body:has(.main-sidebar) .main-content .card-statistic-3 {
  height: 96px !important;
  padding: 14px 16px !important;
}
body:has(.main-sidebar) .main-content .card-statistic-3 .card-icon-large i,
body:has(.main-sidebar) .main-content .card-statistic-3 .card-icon-large {
  font-size: 48px !important;
  opacity: .06 !important;
  right: 12px !important;
}
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content > span {
  font-size: 26px !important;
  margin: 4px 0 6px !important;
}
body:has(.main-sidebar) .main-content .card-statistic-3 .progress {
  height: 3px !important;
  margin-top: 6px !important;
}
/* delta chip — small mono pill in top-right corner */
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p {
  position: absolute;
  top: 10px; right: 12px;
  background: var(--cream-2);
  padding: 3px 8px !important;
  border-radius: 999px;
  font-size: 9.5px !important;
  letter-spacing: 0.10em !important;
  margin: 0 !important;
  border: 1px solid var(--line);
}
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p span.text-nowrap {
  display: none;  /* hide the redundant 'Increment' / 'No Change' label inside the chip */
}

/* Tile #1 (APPOINTMENTS) becomes the hero — full visual emphasis */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"]:first-child .card.l-bg-style1 {
  background:
    radial-gradient(360px 220px at 100% 0%, rgba(196,154,63,.10), transparent 60%),
    var(--surface) !important;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"]:first-child .card.l-bg-style1 .card-statistic-3 .card-content > span {
  font-size: 32px !important;
}

/* ---- 3.3.C (creative)  Detailed Metrics → live LIVE STRIP look.
   Keep the Bootstrap row.text-center inner flex columns (don't switch to grid).
   Just polish: hide the redundant in-card heading, tighten spacing, tone the
   look so it reads like a live console strip not a stat card. */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  overflow: hidden;
  position: relative;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card-header { display: none !important; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card-body { padding: 14px 18px !important; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card-body .row.text-center > [class*="col-"] {
  padding: 4px 12px !important;
  border-right: 1px solid var(--line) !important;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card-body .row.text-center > [class*="col-"]:last-child { border-right: none !important; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card-body h6 {
  margin-top: 4px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.20em !important;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card-body h4 {
  font-size: 22px !important;
  margin: 4px 0 2px !important;
}

/* ---- 3.3.H (creative)  Chart card → slate background, gold gridlines ---- */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950)) !important;
  border-color: var(--navy-700) !important;
  color: var(--pane-fore);
  position: relative;
  overflow: hidden;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card::before {
  /* paper grain on the navy chart card */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 0;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card > * { position: relative; z-index: 1; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card-header::after {
  background: var(--gold);
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card-header h4 {
  color: var(--pane-fore) !important;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card-header select {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(196,154,63,.30) !important;
  color: var(--pane-fore) !important;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) #chart text {
  fill: var(--pane-mute) !important;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) #chart .apexcharts-gridline {
  stroke: rgba(196,154,63,.10) !important;
}

/* ---- Engagement row (Birthdays + Revisits) — pinned cards with a marquee feel ---- */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(6) .dashboard-list-card {
  background: var(--surface) !important;
  position: relative;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(6) .dashboard-list-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  opacity: .55;
}

/* Sticky page header — pin just below the navbar so DASHBOARD title + filter
   pill bar stay visible while the page scrolls.  Now safe because the
   redesigned avatar-group is bounded (no floating card overflow). */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(1) {
  position: sticky;
  top: 60px;                      /* nav height */
  z-index: 20;                    /* below navbar (880) but above content */
  background: rgba(247,244,238,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: 12px !important;
  padding-bottom: 10px;
  margin-left: -28px !important;
  margin-right: -28px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
@media (max-width: 600px) {
  body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(1) {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Reduced-motion: kill the live-dot pulse */
@media (prefers-reduced-motion: reduce) {
  body:has(.main-sidebar) .main-content section.section > .row::before { animation: none !important; }
}

/* Responsive — Bootstrap col-xl-3 / col-lg-6 already handles tile stacking.
   Just hide the section eyebrows on phones to avoid clutter. */
@media (max-width: 600px) {
  body:has(.main-sidebar) .main-content section.section > .row::before { display: none !important; }
}


/* ===================================================================   3.3.X  Icon relevance + theme-bound colours
   --------------------------------------------------------------------------
   Sweep every icon and colour signal to honour the locked palette.  No
   markup changes — we override the FontAwesome glyph via the pseudo-element
   `content` trick where the existing icon class is wrong, and re-bind every
   Bootstrap utility colour to our theme.
   ========================================================================== */

/* ---- Stat tile icon swaps (fa-briefcase → stethoscope, fa-id-card-alt → sitemap) ---- */
body:has(.main-sidebar) .main-content .card.l-bg-style2 .card-icon i.fa-briefcase::before {
  content: "\f0f1" !important;   /* fa-stethoscope */
}
body:has(.main-sidebar) .main-content .card.l-bg-style4 .card-icon i.fa-id-card-alt::before {
  content: "\f0e8" !important;   /* fa-sitemap */
}
/* Force the FA font-family on these specifically (some FA forks need it) */
body:has(.main-sidebar) .main-content .card.l-bg-style2 .card-icon i.fa-briefcase,
body:has(.main-sidebar) .main-content .card.l-bg-style4 .card-icon i.fa-id-card-alt {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome", FontAwesome !important;
  font-weight: 900 !important;
}

/* ---- Detailed Metrics icons — institutional palette ----
   Original: bi-calendar-check (text-success), bi-arrow-repeat (text-info),
   bi-stopwatch (text-danger), bi-person-workspace (text-warning).
   Glyphs are correct; we just retint to the theme. */
body:has(.main-sidebar) .main-content section.section .card .card-body.p-3 .row.text-center i.bi { font-size: 22px !important; }
body:has(.main-sidebar) .main-content section.section .card .card-body.p-3 .row.text-center i.bi.text-success { color: var(--ok) !important; }
body:has(.main-sidebar) .main-content section.section .card .card-body.p-3 .row.text-center i.bi.text-info { color: var(--info) !important; }
body:has(.main-sidebar) .main-content section.section .card .card-body.p-3 .row.text-center i.bi.text-danger { color: var(--bad) !important; }
body:has(.main-sidebar) .main-content section.section .card .card-body.p-3 .row.text-center i.bi.text-warning { color: var(--gold) !important; }

/* ---- Re-bind Bootstrap utility colours globally inside main-content ---- */
body:has(.main-sidebar) .main-content .text-success { color: var(--ok) !important; }
body:has(.main-sidebar) .main-content .text-info    { color: var(--info) !important; }
body:has(.main-sidebar) .main-content .text-warning { color: var(--gold-deep) !important; }
body:has(.main-sidebar) .main-content .text-danger  { color: var(--bad) !important; }
body:has(.main-sidebar) .main-content .text-primary { color: var(--navy-700) !important; }
body:has(.main-sidebar) .main-content .text-muted   { color: var(--ink-mute) !important; }

/* FIX_B_1703 — Bootstrap text-utility ANCHORS (a.text-*) need AA-safe deepening.
   Anchors are interactive: they live in card bodies, modal footers, "Read more"
   inline links, page headers — surfaces of cream `#F7F4EE` or white. The base
   tokens (--ok #16A85F = 2.69:1, --info #4878B8 = 3.95:1, --gold-deep #A37E2B
   = 3.33:1, --bad #C8362F = 4.66:1 borderline) fail/borderline-fail AA on
   cream. Deepen per-anchor (not the root token) so inline-button affordance
   is readable.
   SCOPE: excludes anchors inside `td` (table-icon agent, B-1701) and inside
   `.dropdown-menu` (dropdown agent, B-1702). Also mirrors the existing Stisla
   `:not()` chain (btn/nav-link/dropdown-item/page-link/dt-button/has-icon) so
   it WINS the specificity duel against that rule (Stisla rule otherwise paints
   every non-button anchor navy-700, erasing intent colour). */
body:has(.main-sidebar) .main-content a.text-success:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a) { color: #0F6B3F !important; text-decoration: none; }
body:has(.main-sidebar) .main-content a.text-info:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a)    { color: #2E5A8E !important; text-decoration: none; }
body:has(.main-sidebar) .main-content a.text-warning:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a) { color: #7A5E1F !important; text-decoration: none; }
body:has(.main-sidebar) .main-content a.text-danger:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a)  { color: #A02824 !important; text-decoration: none; }
body:has(.main-sidebar) .main-content a.text-primary:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a) { color: var(--navy-700) !important; text-decoration: none; }
body:has(.main-sidebar) .main-content a.text-muted:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a)   { color: #4A5468 !important; text-decoration: none; }

/* Hover: ~15% darker + underline for affordance (still ≥4.5:1). */
body:has(.main-sidebar) .main-content a.text-success:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):hover { color: #0A5430 !important; text-decoration: underline !important; }
body:has(.main-sidebar) .main-content a.text-info:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):hover    { color: #234770 !important; text-decoration: underline !important; }
body:has(.main-sidebar) .main-content a.text-warning:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):hover { color: #5E4818 !important; text-decoration: underline !important; }
body:has(.main-sidebar) .main-content a.text-danger:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):hover  { color: #821F1B !important; text-decoration: underline !important; }
body:has(.main-sidebar) .main-content a.text-primary:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):hover { color: var(--navy-800) !important; text-decoration: underline !important; }
body:has(.main-sidebar) .main-content a.text-muted:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):hover   { color: #353C4D !important; text-decoration: underline !important; }

/* Focus-visible: gold ring per Sovereign Institutional spec. */
body:has(.main-sidebar) .main-content a.text-success:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):focus-visible,
body:has(.main-sidebar) .main-content a.text-info:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):focus-visible,
body:has(.main-sidebar) .main-content a.text-warning:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):focus-visible,
body:has(.main-sidebar) .main-content a.text-danger:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):focus-visible,
body:has(.main-sidebar) .main-content a.text-primary:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):focus-visible,
body:has(.main-sidebar) .main-content a.text-muted:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):not(td a):not(.dropdown-menu a):focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Disabled affordance — same specificity boost as the colour rules above. */
body:has(.main-sidebar) .main-content a.text-success.disabled:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-success[aria-disabled="true"]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-info.disabled:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-info[aria-disabled="true"]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-warning.disabled:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-warning[aria-disabled="true"]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-danger.disabled:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-danger[aria-disabled="true"]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-primary.disabled:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-primary[aria-disabled="true"]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-muted.disabled:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon),
body:has(.main-sidebar) .main-content a.text-muted[aria-disabled="true"]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon) {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* FIX_B_1705 — non-badge `.bg-*` utility chips: Direction B (stronger tint
   .28-.35 + deepened text + visible border) so they don't wash out on cream. */
body:has(.main-sidebar) .main-content .bg-success { background-color: rgba(22,116,77,.28) !important;  color: #0A5832 !important; border: 1px solid rgba(22,116,77,.50) !important; }
body:has(.main-sidebar) .main-content .bg-info    { background-color: rgba(30,68,117,.28) !important;  color: #244A75 !important; border: 1px solid rgba(30,68,117,.50) !important; }
body:has(.main-sidebar) .main-content .bg-warning { background-color: rgba(196,154,63,.35) !important; color: #6B5219 !important; border: 1px solid rgba(196,154,63,.60) !important; }
body:has(.main-sidebar) .main-content .bg-danger  { background-color: rgba(165,35,35,.28) !important;  color: #8E1F1B !important; border: 1px solid rgba(165,35,35,.50) !important; }

/* ---- Badges — institutional pill treatment ---- */
body:has(.main-sidebar) .main-content .badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  border: 1px solid transparent;
}
/* FIX_B_1705 — `.badge.bg-*` action-significant pills: Direction A (saturated
   solid intent fills). Cream text on dark intents, ink on gold/light. */
body:has(.main-sidebar) .main-content .badge.bg-warning,
body:has(.main-sidebar) .main-content .badge.badge-warning,
body:has(.main-sidebar) .main-content .badge-warning,
body:has(.main-sidebar) .main-content .badge[class*="warning"] {
  background: var(--gold) !important;
  background-color: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold-deep) !important;
}
body:has(.main-sidebar) .main-content .badge.bg-success,
body:has(.main-sidebar) .main-content .badge-success {
  background: #16744D !important;
  background-color: #16744D !important;
  color: var(--cream) !important;
  border-color: #0F5A3B !important;
}
body:has(.main-sidebar) .main-content .badge.bg-danger,
body:has(.main-sidebar) .main-content .badge-danger {
  background: var(--bad) !important;
  background-color: var(--bad) !important;
  color: var(--cream) !important;
  border-color: #A02824 !important;
}

/* ---- Pending pills (Bootstrap orange + extras) on the appointments table ----
   FIX_B_1705 — Direction B stronger tint. Restricted to inline-styled spans
   and bare .badge with no bg-* utility (the `.badge.bg-*` family is handled
   by Direction A solids above). */
body:has(.main-sidebar) .main-content .card .table tbody td .badge:not([class*="bg-"]):not([class*="badge-"]),
body:has(.main-sidebar) .main-content .card .table tbody td span[style*="background"] {
  background: rgba(196,154,63,.35) !important;
  background-color: rgba(196,154,63,.35) !important;
  color: #6B5219 !important;
  border: 1px solid rgba(196,154,63,.60) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ---- JS-injected inline role-badge backgrounds (#1a56a0 blue + dynamic
   roleColor()) — neutralise to our palette via attribute selector ---- */
body:has(.main-sidebar) .main-content span[style*="background:#1a56a0"],
body:has(.main-sidebar) .main-content span[style*="background: #1a56a0"],
body:has(.main-sidebar) .main-content span[style*="background-color:#1a56a0"] {
  background: var(--navy-900) !important;
  background-color: var(--navy-900) !important;
  color: var(--pane-fore) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}
/* Catch-all for the JS-injected role badges (any inline bg color in role
   header cells) — re-tint to gold mono */
body:has(.main-sidebar) .main-content table th b[style*="color"],
body:has(.main-sidebar) .main-content table th[style*="color"] {
  color: var(--gold-deep) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ---- Doctor Slots progress bars — neutralise red/blue to gold scale ---- */
body:has(.main-sidebar) .main-content .doctor-list .progress,
body:has(.main-sidebar) .main-content #doctorSlotChart .progress {
  background: var(--cream-2) !important;
  border-radius: 999px;
  height: 4px !important;
}
body:has(.main-sidebar) .main-content #doctorSlotChart [style*="background:#"],
body:has(.main-sidebar) .main-content #doctorSlotChart [style*="background-color:#"],
body:has(.main-sidebar) .main-content #doctorSlotChart .progress-bar,
body:has(.main-sidebar) .main-content .doctor-list .progress-bar {
  background: var(--gold) !important;
  background-color: var(--gold) !important;
}
/* the two-tone bars in screenshots (red + blue) — looks like flex/inline bars */
body:has(.main-sidebar) .main-content #doctorSlotChart .bar-booked,
body:has(.main-sidebar) .main-content #doctorSlotChart [class*="booked"] { background: var(--gold) !important; background-color: var(--gold) !important; }
body:has(.main-sidebar) .main-content #doctorSlotChart .bar-available,
body:has(.main-sidebar) .main-content #doctorSlotChart [class*="available"] { background: var(--navy-600) !important; background-color: var(--navy-600) !important; }

/* ---- The big faded background icons in stat tiles — desaturate ---- */
body:has(.main-sidebar) .main-content .card-statistic-3 .card-icon i {
  color: var(--navy-700) !important;
}

/* ---- Stat tile delta-chip arrow icons (fa-arrow-up / down / arrows-alt-h) ---- */
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p i.fa-arrow-up { color: var(--ok) !important; }
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p i.fa-arrow-down { color: var(--bad) !important; }
body:has(.main-sidebar) .main-content .card-statistic-3 .card-content p i.fa-arrows-alt-h { color: var(--gold-deep) !important; }

/* ---- ApexCharts colour overrides at the SVG level (in case JS theme didn't
       run before chart init) ---- */
body:has(.main-sidebar) .main-content #chart .apexcharts-area,
body:has(.main-sidebar) .main-content #chart .apexcharts-line {
  /* Apex draws areas/lines via SVG paths.  We set fill/stroke directly. */
}
body:has(.main-sidebar) .main-content #chart .apexcharts-series path[fill] {
  fill: rgba(196,154,63,.18) !important;
}
body:has(.main-sidebar) .main-content #chart .apexcharts-series path[stroke]:not([stroke="none"]) {
  stroke: var(--gold) !important;
}
body:has(.main-sidebar) .main-content #chart .apexcharts-marker { fill: var(--gold) !important; stroke: var(--navy-950) !important; }

/* ---- Filter dropdown toggle (Doctor Slots) gold accent ---- */
body:has(.main-sidebar) .main-content .btn.btn-filter::after { color: var(--gold-deep) !important; }

/* ===================================================================   3.3.Y  Creative flourishes
   --------------------------------------------------------------------------
   Atmospheric depth + small premium markers, all institutional.
   ========================================================================== */

/* ---- Page watermark (bottom-right of main-content) ---- */
body:has(.main-sidebar) .main-content::after {
  content: "OP CONSOLE";
  position: fixed;
  right: 16px;
  bottom: 50px;
  font-family: var(--font-display, "Geist"), serif;
  font-style: italic;
  font-weight: 300;
  font-size: 96px;
  letter-spacing: -0.04em;
  color: rgba(8,21,48,.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
@media (max-width: 900px) {
  body:has(.main-sidebar) .main-content::after { font-size: 56px; bottom: 80px; right: 12px; }
}

/* ---- Card corner ticks (gold L-marks at top-right of every card) ---- */
body:has(.main-sidebar) .main-content .card {
  position: relative;
}
body:has(.main-sidebar) .main-content .card::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 10px; height: 10px;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right, var(--gold), var(--gold)) top / 10px 1px no-repeat,
    linear-gradient(to bottom, var(--gold), var(--gold)) right / 1px 10px no-repeat;
  opacity: .55;
}
/* hide on cards where we already render decorative content there
   (stat tiles use ::before for gold left rule, ::after for decorative
   icon — but ::after is the icon container, so we need a different mark) */
body:has(.main-sidebar) .main-content .card.l-bg-style1::after,
body:has(.main-sidebar) .main-content .card.l-bg-style2::after,
body:has(.main-sidebar) .main-content .card.l-bg-style3::after,
body:has(.main-sidebar) .main-content .card.l-bg-style4::after {
  /* the stat-tile cards already carry visual weight; skip the corner tick */
  display: none;
}

/* ---- Roman numeral decoration on stat tiles ----
   The PHP order is fixed (Appointments, Services, Doctors, Departments).
   Anchor to the bottom-left of the tile so it doesn't collide with the
   top-right delta chip or the corner tick. */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"] .card-statistic-3 {
  position: relative;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"] .card-statistic-3 .card-content::before {
  position: absolute;
  bottom: 8px; left: 12px;
  font-family: "Geist", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  opacity: .75;
  text-transform: lowercase;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"]:nth-of-type(1) .card-statistic-3 .card-content::before { content: "i"; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"]:nth-of-type(2) .card-statistic-3 .card-content::before { content: "ii"; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"]:nth-of-type(3) .card-statistic-3 .card-content::before { content: "iii"; }
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"]:nth-of-type(4) .card-statistic-3 .card-content::before { content: "iv"; }

/* ---- Hover glow on stat tiles ---- */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"] .card {
  transition:
    box-shadow var(--d-base) var(--ease),
    transform var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"] .card:hover {
  border-color: rgba(196,154,63,.45) !important;
  box-shadow:
    var(--shadow-2),
    0 0 0 4px rgba(196,154,63,.06) !important;
  transform: translateY(-1px);
}

/* ---- Stronger LIVE pulse on the TODAY eyebrow ----
   The existing eyebrow has `●` after the text; animate it. */
@keyframes vk-live-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(22,116,77,0); }
  50%      { text-shadow: 0 0 12px rgba(22,116,77,.6); }
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3)::before {
  animation: vk-live-pulse 1.6s ease-in-out infinite;
}

/* ---- Diagonal pinstripe on chart card (subtle ledger texture) ---- */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 8px,
      rgba(196,154,63,.04) 8px,
      rgba(196,154,63,.04) 9px
    );
  z-index: 0;
  opacity: .5;
  /* keep the corner tick on top */
  background-blend-mode: normal;
}
/* re-add the corner tick on top of the pinstripe */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7) .card::before {
  /* paper grain already lives here from earlier rule — supplement with the corner tick */
}

/* ---- Live timestamp under TRENDS eyebrow ---- */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(7)::after {
  content: "REV · 2026.05.08";
  position: absolute;
  top: 0; left: 140px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 4px;
}

/* ---- Detailed Metrics live strip — corner ticks on each KPI cell ---- */
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card-body .row.text-center > [class*="col-"] {
  position: relative;
}
body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3) .card-body .row.text-center > [class*="col-"]::after {
  content: "";
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  background:
    linear-gradient(to right, var(--gold), var(--gold)) top / 6px 1px no-repeat,
    linear-gradient(to bottom, var(--gold), var(--gold)) right / 1px 6px no-repeat;
  opacity: .4;
}

/* ---- Card-header gold tick — keep alive (already exists), strengthen on hover ---- */
body:has(.main-sidebar) .main-content .card-header::after {
  transition: width var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}
body:has(.main-sidebar) .main-content .card:hover .card-header::after {
  width: 48px;
  opacity: 1;
}

/* ---- Subtle background gradient mesh on .main-content ---- */
body:has(.main-sidebar) .main-content {
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(196,154,63,.04), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(8,21,48,.04), transparent 60%),
    var(--cream) !important;
}

/* ---- Reduced motion: disable any pulse / hover-translate animations ---- */
@media (prefers-reduced-motion: reduce) {
  body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(3)::before { animation: none !important; }
  body.h360-page-dashboard:has(.main-sidebar) .main-content section.section > .row:nth-of-type(2) > [class*="col-"] .card:hover { transform: none !important; }
}


/* ===================================================================   3.3.Z  Off-theme colour sweep
   --------------------------------------------------------------------------
   Catches every default colour I identified in the live audit:
     · JS-injected #1a56a0 role badges + variations
     · Inline orange / #fd7e14 (Pending pills)
     · Material #4CAF50 (.col-green)
     · Bootstrap #DEE2E6 table borders
     · Stisla #333 / #777 (Doctor Slots)
     · Feather/SVG #555556 / #000000 fallbacks
     · ApexCharts greys + tooltip marker purple
   All re-pointed to our locked palette.
   ========================================================================== */

/* ---- (1+2) JS-injected role/team badges — broader inline-style catcher.
   Catches: style="background:#1a56a0", "background-color:#1a56a0",
   "background:#1A56A0", with/without space, and the dynamic roleColor()
   variants which interpolate hex strings.  Match anything that looks like
   a span with an inline `background[-color]:#XXXXXX`. */
body:has(.main-sidebar) .main-content span[style*="background:#"],
body:has(.main-sidebar) .main-content span[style*="background-color:#"],
body:has(.main-sidebar) .main-content span[style*="background: #"],
body:has(.main-sidebar) .main-content span[style*="background-color: #"] {
  background: rgba(196,154,63,.16) !important;
  background-color: rgba(196,154,63,.16) !important;
  color: var(--gold-deep) !important;
  border: 1px solid rgba(196,154,63,.30) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  display: inline-block;
}
/* role-header cells with inline styles get the gold-deep treatment */
body:has(.main-sidebar) .main-content table th[style*="color"] b,
body:has(.main-sidebar) .main-content table th b[style*="color"] {
  color: var(--gold-deep) !important;
}

/* ---- (3+4) Inline orange / #fd7e14 / "orange" keyword ---- */
body:has(.main-sidebar) .main-content [style*="color:orange"],
body:has(.main-sidebar) .main-content [style*="color: orange"],
body:has(.main-sidebar) .main-content [style*="color:#fd7e14"],
body:has(.main-sidebar) .main-content [style*="color: #fd7e14"],
body:has(.main-sidebar) .main-content [style*="background:orange"],
body:has(.main-sidebar) .main-content [style*="background: orange"],
body:has(.main-sidebar) .main-content [style*="background-color:orange"],
body:has(.main-sidebar) .main-content [style*="background:#fd7e14"],
body:has(.main-sidebar) .main-content [style*="background-color:#fd7e14"] {
  color: var(--gold-deep) !important;
  background-color: rgba(196,154,63,.16) !important;
}

/* ---- (5) Material green `.col-green` and similar custom classes ---- */
body:has(.main-sidebar) .main-content .col-green,
body:has(.main-sidebar) .main-content .text-green,
body:has(.main-sidebar) .main-content [class*="col-green"] {
  color: var(--ok) !important;
}
body:has(.main-sidebar) .main-content .col-red,
body:has(.main-sidebar) .main-content .text-red {
  color: var(--bad) !important;
}
body:has(.main-sidebar) .main-content .col-orange,
body:has(.main-sidebar) .main-content .text-orange {
  color: var(--gold-deep) !important;
}
body:has(.main-sidebar) .main-content .col-blue,
body:has(.main-sidebar) .main-content .text-blue {
  color: var(--info) !important;
}

/* ---- (6) Bootstrap table border default `#DEE2E6` ---- */
body:has(.main-sidebar) .main-content .table,
body:has(.main-sidebar) .main-content .table > :not(caption) > * > *,
body:has(.main-sidebar) .main-content .table-bordered,
body:has(.main-sidebar) .main-content .table-bordered > :not(caption) > * > * {
  --bs-table-border-color: var(--line) !important;
  border-color: var(--line) !important;
}
body:has(.main-sidebar) .main-content .table-striped > tbody > tr:nth-of-type(odd) > *,
body:has(.main-sidebar) .main-content .table-striped > tbody > tr:nth-of-type(odd) > td {
  --bs-table-accent-bg: rgba(196,154,63,.04) !important;
  background-color: transparent !important;
}
body:has(.main-sidebar) .main-content .border,
body:has(.main-sidebar) .main-content .border-top,
body:has(.main-sidebar) .main-content .border-bottom,
body:has(.main-sidebar) .main-content .border-start,
body:has(.main-sidebar) .main-content .border-end {
  border-color: var(--line) !important;
}

/* ---- (7+8) Stisla Doctor Slots component greys ---- */
body:has(.main-sidebar) .main-content #doctorSlotChart .doctor-name,
body:has(.main-sidebar) .main-content .doctor-list .doctor-name {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
body:has(.main-sidebar) .main-content #doctorSlotChart .doctor-slots,
body:has(.main-sidebar) .main-content .doctor-list .doctor-slots,
body:has(.main-sidebar) .main-content #doctorSlotChart .doctor-meta,
body:has(.main-sidebar) .main-content .doctor-list .doctor-meta {
  color: var(--ink-mute) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
body:has(.main-sidebar) .main-content #doctorSlotChart .doctor-avatar,
body:has(.main-sidebar) .main-content .doctor-list .doctor-avatar {
  border: 1px solid var(--line-2) !important;
  background: var(--cream-2) !important;
}

/* ---- (9+10) Feather SVG fallback strokes (#555556) + plain `#000` SVG fills.
   Feathers should always inherit currentColor; force where missing. */
body:has(.main-sidebar) .main-content svg.feather,
body:has(.main-sidebar) .main-content svg.feather * {
  stroke: currentColor !important;
  fill: none !important;
}
body:has(.main-sidebar) .main-content svg:not(.apexcharts-svg):not(.feather) path[fill="#000"],
body:has(.main-sidebar) .main-content svg:not(.apexcharts-svg):not(.feather) path[fill="#000000"],
body:has(.main-sidebar) .main-content svg:not(.apexcharts-svg):not(.feather) path[fill="black"] {
  fill: currentColor !important;
}
/* avatar img browser default border */
body:has(.main-sidebar) .main-content img {
  border-color: var(--line) !important;
}

/* ---- (11) ApexCharts default greys → palette ---- */
body:has(.main-sidebar) .main-content .apexcharts-canvas .apexcharts-grid line,
body:has(.main-sidebar) .main-content .apexcharts-canvas .apexcharts-gridlines-vertical line,
body:has(.main-sidebar) .main-content .apexcharts-canvas .apexcharts-gridlines-horizontal line {
  stroke: rgba(196,154,63,.10) !important;
}
body:has(.main-sidebar) .main-content .apexcharts-canvas .apexcharts-xaxis line,
body:has(.main-sidebar) .main-content .apexcharts-canvas .apexcharts-yaxis line {
  stroke: rgba(196,154,63,.18) !important;
}
body:has(.main-sidebar) .main-content .apexcharts-canvas .apexcharts-xaxis-tick,
body:has(.main-sidebar) .main-content .apexcharts-canvas .apexcharts-yaxis-tick {
  stroke: rgba(255,255,255,.20) !important;
}
body:has(.main-sidebar) .main-content .apexcharts-canvas text {
  fill: var(--pane-mute) !important;
}
body:has(.main-sidebar) .main-content .apexcharts-canvas .apexcharts-legend-text {
  color: var(--pane-fore) !important;
}
/* tooltip leftovers */
body:has(.main-sidebar) .main-content .apexcharts-tooltip,
body:has(.main-sidebar) .main-content .apexcharts-xaxistooltip,
body:has(.main-sidebar) .main-content .apexcharts-yaxistooltip {
  background: var(--navy-950) !important;
  background-color: var(--navy-950) !important;
  border-color: rgba(196,154,63,.30) !important;
  color: var(--pane-fore) !important;
}
body:has(.main-sidebar) .main-content .apexcharts-tooltip-text,
body:has(.main-sidebar) .main-content .apexcharts-xaxistooltip-text,
body:has(.main-sidebar) .main-content .apexcharts-yaxistooltip-text,
body:has(.main-sidebar) .main-content .apexcharts-tooltip-title,
body:has(.main-sidebar) .main-content .apexcharts-tooltip-y-group,
body:has(.main-sidebar) .main-content .apexcharts-tooltip-series-group {
  color: var(--pane-fore) !important;
  background: transparent !important;
}
body:has(.main-sidebar) .main-content .apexcharts-tooltip-title {
  color: var(--gold) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}
/* the bright purple tooltip-marker (rgb(139,49,208)) → gold */
body:has(.main-sidebar) .main-content .apexcharts-tooltip-marker {
  background: var(--gold) !important;
  background-color: var(--gold) !important;
}
/* xaxis tooltip arrow */
body:has(.main-sidebar) .main-content .apexcharts-xaxistooltip:before,
body:has(.main-sidebar) .main-content .apexcharts-xaxistooltip:after {
  border-bottom-color: rgba(196,154,63,.30) !important;
  border-top-color: var(--navy-950) !important;
}


/* ---- Final sweep: Bootstrap utility colour map + Stisla background greys
   + remaining icon defaults ---- */

/* Bootstrap utility colours (`.bg-primary`, `.text-primary`, `.btn-primary`
   etc.) — re-bind to our palette wherever they leak. */
body:has(.main-sidebar) .main-content .bg-primary,
body:has(.main-sidebar) .main-content .text-bg-primary {
  background: var(--navy-700) !important;
  color: var(--pane-fore) !important;
}
body:has(.main-sidebar) .main-content .text-primary { color: var(--navy-700) !important; }
body:has(.main-sidebar) .main-content .bg-danger,
body:has(.main-sidebar) .main-content .text-bg-danger {
  background: rgba(165,35,35,.10) !important;
  color: var(--bad) !important;
}
body:has(.main-sidebar) .main-content [class*="btn-primary"]:not(.swal-button) {
  background: var(--navy-950) !important;
  border-color: var(--navy-950) !important;
  color: var(--pane-fore) !important;
}

/* Stisla / theme background greys that leaked through (#EEE, #F3F3F3 etc) */
body:has(.main-sidebar) .main-content [style*="background:#eee"],
body:has(.main-sidebar) .main-content [style*="background-color:#eee"],
body:has(.main-sidebar) .main-content [style*="background:#F3F3F3"],
body:has(.main-sidebar) .main-content [style*="background-color:#F3F3F3"] {
  background-color: var(--cream-2) !important;
}

/* Detailed Metrics bi.* icons — fight any inherited Bootstrap text-* colour */
body:has(.main-sidebar) .main-content i.bi.text-info,
body:has(.main-sidebar) .main-content i.bi.bi-arrow-repeat,
body:has(.main-sidebar) .main-content section.section i.bi.text-info { color: var(--info) !important; }
body:has(.main-sidebar) .main-content i.bi.text-success { color: var(--ok) !important; }
body:has(.main-sidebar) .main-content i.bi.text-warning { color: var(--gold) !important; }
body:has(.main-sidebar) .main-content i.bi.text-danger  { color: var(--bad) !important; }

/* Bootstrap default body color #212529 → ink (catches inherited text spots) */
body:has(.main-sidebar) .main-content,
body:has(.main-sidebar) .main-content p,
body:has(.main-sidebar) .main-content td,
body:has(.main-sidebar) .main-content th,
body:has(.main-sidebar) .main-content div {
  color: inherit;
}
body:has(.main-sidebar) .main-content { color: var(--ink); }

/* Final ApexCharts catch-all: any svg path/line/circle/rect inside .apexcharts
   without our explicit colour gets the gold/navy treatment */
body:has(.main-sidebar) .main-content .apexcharts-canvas line[stroke="#90A4AE"],
body:has(.main-sidebar) .main-content .apexcharts-canvas line[stroke="#78909C"],
body:has(.main-sidebar) .main-content .apexcharts-canvas line[stroke="#B6B6B6"] {
  stroke: rgba(196,154,63,.18) !important;
}
body:has(.main-sidebar) .main-content .apexcharts-canvas rect[fill="#B1B9C4"],
body:has(.main-sidebar) .main-content .apexcharts-canvas path[fill="#B1B9C4"] {
  fill: rgba(196,154,63,.10) !important;
}
body:has(.main-sidebar) .main-content .apexcharts-canvas text[fill="#373D3F"],
body:has(.main-sidebar) .main-content .apexcharts-canvas text[fill="#555556"] {
  fill: var(--pane-mute) !important;
}


/* ---- Appointments-table status pill alignment fix ----
   The PHP renders the Status pill as a <p> (block, default margin) inside a
   <td style="padding-top: 15px">.  The Payment pill is a <span> (inline)
   in a clean cell.  Result: the two pills sit on different baselines.
   Cancel the inline padding, force the <p> to inline-block + zero margin,
   and map the inline status colours to our semantic palette. */
body:has(.main-sidebar) .main-content table tr.clickable-row td {
  vertical-align: middle !important;
}
body:has(.main-sidebar) .main-content table tr.clickable-row td.align-middle[style*="padding-top"] {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
body:has(.main-sidebar) .main-content table tr.clickable-row td p.text-center {
  display: inline-block !important;
  margin: 0 !important;
  padding: 3px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  vertical-align: middle !important;
}

/* Map the inline status colours to our semantic palette
   FIX_B_1705 — Direction B stronger tints (.28-.35 + deepened text + visible
   .50+ border) so status pills don't blend into the cream row background. */
body:has(.main-sidebar) .main-content table tr.clickable-row td p.text-center[style*="orange"] {
  background-color: rgba(196,154,63,.35) !important;
  color: #6B5219 !important;
  border-color: rgba(196,154,63,.60) !important;
}
body:has(.main-sidebar) .main-content table tr.clickable-row td p.text-center[style*="green"] {
  background-color: rgba(22,116,77,.28) !important;
  color: #0A5832 !important;
  border-color: rgba(22,116,77,.50) !important;
}
body:has(.main-sidebar) .main-content table tr.clickable-row td p.text-center[style*="red"] {
  background-color: rgba(165,35,35,.28) !important;
  color: #8E1F1B !important;
  border-color: rgba(165,35,35,.50) !important;
}
body:has(.main-sidebar) .main-content table tr.clickable-row td p.text-center[style*="6777EF"],
body:has(.main-sidebar) .main-content table tr.clickable-row td p.text-center[style*="6777ef"] {
  background-color: rgba(30,68,117,.28) !important;
  color: #244A75 !important;
  border-color: rgba(30,68,117,.50) !important;
}

/* "Assigned to Dr.X" sub-line — make the doctor name use --ok semantic */
body:has(.main-sidebar) .main-content table tr.clickable-row td .col-green.font-weight-bold {
  color: var(--ok) !important;
  font-weight: 600 !important;
}

/* end §3.3.Z off-theme sweep */

/* ===================================================================   GLOBAL  Final off-theme sweep — repeats across every page
   --------------------------------------------------------------------------
   These hex values were flagged on every audited page (Stisla `#6777EF`
   primary purple, Bootstrap default border `#BDC1C5`, near-white `#FDFDFF`,
   Stisla teal `#3DC7BE`, purple `#8E44AD`, magenta `#E91E8C`).  Re-bind to
   our locked palette via attribute selectors so they no longer render in
   the default theme — affects ALL 44 pages with one rule block.
   ========================================================================== */
body:has(.main-sidebar) [style*="#6777EF"],
body:has(.main-sidebar) [style*="#6777ef"] {
  /* Stisla brand purple → navy-700 */
  background: var(--navy-700) !important;
  background-color: var(--navy-700) !important;
  color: var(--pane-fore) !important;
  border-color: var(--navy-700) !important;
}
body:has(.main-sidebar) [style*="#3DC7BE"],
body:has(.main-sidebar) [style*="#3dc7be"] {
  /* Stisla teal */
  background: rgba(30,68,117,.10) !important;
  background-color: rgba(30,68,117,.10) !important;
  color: var(--info) !important;
}
body:has(.main-sidebar) [style*="#8E44AD"],
body:has(.main-sidebar) [style*="#8e44ad"] {
  /* purple → ink-700 */
  background-color: rgba(8,21,48,.06) !important;
  color: var(--ink-soft) !important;
}
body:has(.main-sidebar) [style*="#E91E8C"],
body:has(.main-sidebar) [style*="#e91e8c"] {
  /* magenta → bad */
  background-color: rgba(165,35,35,.08) !important;
  color: var(--bad) !important;
}
/* Bootstrap default border `#BDC1C5` and near-white `#FDFDFF` */
body:has(.main-sidebar) [style*="border-color:#BDC1C5"],
body:has(.main-sidebar) [style*="border-color: #BDC1C5"],
body:has(.main-sidebar) [style*="border: 1px solid #BDC1C5"] {
  border-color: var(--line) !important;
}
body:has(.main-sidebar) [style*="background:#FDFDFF"],
body:has(.main-sidebar) [style*="background-color:#FDFDFF"] {
  background-color: var(--cream-2) !important;
}

/* Catch the iziToast & sweetalert defaults that occasionally leak */
body:has(.main-sidebar) .iziToast { font-family: var(--font-body) !important; }
body:has(.main-sidebar) .iziToast .iziToast-title { color: var(--ink) !important; }


/* ===================================================================   GLOBAL  Off-theme tightening pass — top inline-style + utility-class hits
   --------------------------------------------------------------------------
   Top render counts across all 43 pages (1108..33 renders each) — the
   biggest 30 hexes mapped to our locked palette via attribute selectors so
   they re-paint without backend edits.
   ========================================================================== */

/* ---- Light greys / off-whites → cream/line system ---- */
body:has(.main-sidebar) [style*="#BDC1C5" i],
body:has(.main-sidebar) [style*="#E9ECEF" i],
body:has(.main-sidebar) [style*="#F9FAFE" i],
body:has(.main-sidebar) [style*="#EDEDED" i],
body:has(.main-sidebar) [style*="#DDDDDD" i],
body:has(.main-sidebar) [style*="#EAE9E9" i],
body:has(.main-sidebar) [style*="#ECE8E8" i],
body:has(.main-sidebar) [style*="#E3EAEF" i] {
  border-color: var(--line) !important;
}
body:has(.main-sidebar) [style*="background:#FDFDFF" i],
body:has(.main-sidebar) [style*="background-color:#FDFDFF" i],
body:has(.main-sidebar) [style*="background:#F9FAFE" i],
body:has(.main-sidebar) [style*="background-color:#F9FAFE" i],
body:has(.main-sidebar) [style*="background:#E9ECEF" i],
body:has(.main-sidebar) [style*="background-color:#E9ECEF" i],
body:has(.main-sidebar) [style*="background:#EDEDED" i],
body:has(.main-sidebar) [style*="background-color:#EDEDED" i] {
  background-color: var(--cream-2) !important;
}

/* ---- Stisla dark text → ink ---- */
body:has(.main-sidebar) [style*="color:#34395E" i],
body:has(.main-sidebar) [style*="color: #34395E" i],
body:has(.main-sidebar) [style*="color:#191D21" i],
body:has(.main-sidebar) [style*="color: #191D21" i],
body:has(.main-sidebar) [style*="color:#424242" i],
body:has(.main-sidebar) [style*="color: #424242" i],
body:has(.main-sidebar) [style*="color:#444444" i],
body:has(.main-sidebar) [style*="color: #444444" i],
body:has(.main-sidebar) [style*="color:#343A40" i],
body:has(.main-sidebar) [style*="color: #343A40" i] {
  color: var(--ink) !important;
}

/* ---- Stisla mid greys → ink-mute ---- */
body:has(.main-sidebar) [style*="color:#888888" i],
body:has(.main-sidebar) [style*="color: #888888" i],
body:has(.main-sidebar) [style*="color:#AAAAAA" i],
body:has(.main-sidebar) [style*="color: #AAAAAA" i],
body:has(.main-sidebar) [style*="color:#6C757D" i],
body:has(.main-sidebar) [style*="color: #6C757D" i] {
  color: var(--ink-mute) !important;
}

/* ---- Stisla blues (bg + text) → navy / info ---- */
body:has(.main-sidebar) [style*="background:#4879C1" i],
body:has(.main-sidebar) [style*="background-color:#4879C1" i],
body:has(.main-sidebar) [style*="background:#4878B8" i],
body:has(.main-sidebar) [style*="background-color:#4878B8" i],
body:has(.main-sidebar) [style*="background:#002864" i],
body:has(.main-sidebar) [style*="background-color:#002864" i],
body:has(.main-sidebar) [style*="background:#3498DB" i],
body:has(.main-sidebar) [style*="background-color:#3498DB" i] {
  background-color: var(--navy-700) !important;
  color: var(--pane-fore) !important;
  border-color: var(--navy-700) !important;
}
body:has(.main-sidebar) [style*="color:#4879C1" i],
body:has(.main-sidebar) [style*="color: #4879C1" i],
body:has(.main-sidebar) [style*="color:#4878B8" i],
body:has(.main-sidebar) [style*="color: #4878B8" i],
body:has(.main-sidebar) [style*="color:#3498DB" i],
body:has(.main-sidebar) [style*="color: #3498DB" i] {
  color: var(--info) !important;
}

/* ---- Stisla reds → bad ---- */
body:has(.main-sidebar) [style*="background:#D63F4D" i],
body:has(.main-sidebar) [style*="background-color:#D63F4D" i],
body:has(.main-sidebar) [style*="background:#E74C3C" i],
body:has(.main-sidebar) [style*="background-color:#E74C3C" i] {
  background-color: rgba(165,35,35,.10) !important;
  color: var(--bad) !important;
  border-color: rgba(165,35,35,.30) !important;
}
body:has(.main-sidebar) [style*="color:#D63F4D" i],
body:has(.main-sidebar) [style*="color: #D63F4D" i],
body:has(.main-sidebar) [style*="color:#E74C3C" i],
body:has(.main-sidebar) [style*="color: #E74C3C" i] {
  color: var(--bad) !important;
}

/* ---- Stisla oranges/yellows → gold ---- */
body:has(.main-sidebar) [style*="background:#E67E22" i],
body:has(.main-sidebar) [style*="background-color:#E67E22" i],
body:has(.main-sidebar) [style*="background:#F39C12" i],
body:has(.main-sidebar) [style*="background-color:#F39C12" i],
body:has(.main-sidebar) [style*="background:#F1C40F" i],
body:has(.main-sidebar) [style*="background-color:#F1C40F" i],
body:has(.main-sidebar) [style*="background:#FFA117" i],
body:has(.main-sidebar) [style*="background-color:#FFA117" i] {
  background-color: rgba(196,154,63,.16) !important;
  color: var(--gold-deep) !important;
  border-color: rgba(196,154,63,.30) !important;
}
body:has(.main-sidebar) [style*="color:#E67E22" i],
body:has(.main-sidebar) [style*="color: #E67E22" i],
body:has(.main-sidebar) [style*="color:#F39C12" i],
body:has(.main-sidebar) [style*="color: #F39C12" i],
body:has(.main-sidebar) [style*="color:#F1C40F" i],
body:has(.main-sidebar) [style*="color: #F1C40F" i],
body:has(.main-sidebar) [style*="color:#FFA117" i],
body:has(.main-sidebar) [style*="color: #FFA117" i] {
  color: var(--gold-deep) !important;
}

/* ---- Stisla teals/cyans → info ---- */
body:has(.main-sidebar) [style*="background:#07A9A9" i],
body:has(.main-sidebar) [style*="background-color:#07A9A9" i],
body:has(.main-sidebar) [style*="background:#3DC7BE" i],
body:has(.main-sidebar) [style*="background-color:#3DC7BE" i] {
  background-color: rgba(30,68,117,.10) !important;
  color: var(--info) !important;
  border-color: rgba(30,68,117,.25) !important;
}
body:has(.main-sidebar) [style*="color:#07A9A9" i],
body:has(.main-sidebar) [style*="color: #07A9A9" i],
body:has(.main-sidebar) [style*="color:#3DC7BE" i],
body:has(.main-sidebar) [style*="color: #3DC7BE" i] {
  color: var(--info) !important;
}

/* ---- Bootstrap form-control border default (#BDC1C5 / #CED4DA) ---- */
body:has(.main-sidebar) input.form-control,
body:has(.main-sidebar) textarea.form-control,
body:has(.main-sidebar) select.form-control,
body:has(.main-sidebar) select.form-select {
  border-color: var(--line-2) !important;
}

/* ---- Stisla utility background classes (.l-bg-* / .bg-light-*) ---- */
body:has(.main-sidebar) .l-bg-cyan,
body:has(.main-sidebar) .l-bg-cherry,
body:has(.main-sidebar) .l-bg-green-dark,
body:has(.main-sidebar) .l-bg-orange-dark,
body:has(.main-sidebar) .l-bg-purple-dark,
body:has(.main-sidebar) .l-bg-purple,
body:has(.main-sidebar) .l-bg-blue-dark,
body:has(.main-sidebar) .l-bg-blue {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) .bg-light-blue,
body:has(.main-sidebar) .bg-light-cyan,
body:has(.main-sidebar) .bg-light-green,
body:has(.main-sidebar) .bg-light-orange,
body:has(.main-sidebar) .bg-light-purple,
body:has(.main-sidebar) .bg-light-pink,
body:has(.main-sidebar) .bg-light-warning {
  background-color: var(--cream-2) !important;
}

/* ---- View/Edit/Delete action chips inside tables ----
   FIX_B_1704 (supersedes FIX_B_1701) — Direction A: SATURATED SOLID FILLS.
   Previous tinted chips (alpha 0.10-0.16) were AA-mathematical but
   perceptually washed-out. Replace with solid intent fills + cream/ink
   icons so the chips POP at a glance. Aesthetic locked: Sovereign
   Institutional (navy / cream / gold / bad / info / ok). Page-scoped under
   body:has(.main-sidebar), !important per CR-3/CR-4, CSS-only per CR-1. */

/* (0) Default chip — solid GOLD fill, INK icon (≥10:1).
   Edit-action default. */
body:has(.main-sidebar) td a.has-icon {
  background-color: var(--gold) !important;
  color: var(--ink) !important;
  border: 1px solid var(--gold-deep) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: var(--r-xs) !important;
  padding: 4px 10px !important;
}
body:has(.main-sidebar) td a.has-icon i { color: var(--ink) !important; }

/* (a) `text-dark` (View/inspect) — solid NAVY-700 fill, CREAM icon (≥10:1). */
body:has(.main-sidebar) td a.has-icon.text-dark,
body:has(.main-sidebar) td a.has-icon.text-dark i {
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-dark {
  background-color: var(--navy-700) !important;
  border-color: var(--navy-700) !important;
}

/* (b) `text-danger` / fa-trash / fa-times / fa-remove / .delete-vital —
   solid BAD fill #C8362F, CREAM icon (≥5.4:1). Selectors include
   `.main-content` to win the specificity duel against the Stisla generic
   `<a>` rebind (`.main-content a:not(.has-icon)` → navy-700) for the
   no-`.has-icon` `.delete-vital` variant. */
body:has(.main-sidebar) .main-content td a.has-icon:has(.fa-trash):not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button),
body:has(.main-sidebar) .main-content td a.has-icon:has(.fa-times):not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button),
body:has(.main-sidebar) .main-content td a.has-icon:has(.fa-remove):not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button),
body:has(.main-sidebar) .main-content td a.has-icon.text-danger:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button),
body:has(.main-sidebar) .main-content td a.delete-vital:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button),
body:has(.main-sidebar) .main-content td a.delete-vital.text-danger:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button) {
  background-color: var(--bad) !important;
  color: var(--cream) !important;
  border-color: var(--bad) !important;
}
body:has(.main-sidebar) .main-content td a.has-icon:has(.fa-trash) i,
body:has(.main-sidebar) .main-content td a.has-icon:has(.fa-times) i,
body:has(.main-sidebar) .main-content td a.has-icon:has(.fa-remove) i,
body:has(.main-sidebar) .main-content td a.has-icon.text-danger i,
body:has(.main-sidebar) .main-content td a.delete-vital i,
body:has(.main-sidebar) .main-content td a.delete-vital.text-danger i {
  color: var(--cream) !important;
}

/* (c) `text-primary` — solid NAVY-700 fill, CREAM icon. */
body:has(.main-sidebar) td a.has-icon.text-primary,
body:has(.main-sidebar) td a.has-icon.text-primary i {
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-primary {
  background-color: var(--navy-700) !important;
  border-color: var(--navy-700) !important;
}

/* (d) `text-success` — solid deepened GREEN #16744D, CREAM icon. */
body:has(.main-sidebar) td a.has-icon.text-success,
body:has(.main-sidebar) td a.has-icon.text-success i {
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-success {
  background-color: #16744D !important;
  border-color: #16744D !important;
}

/* (e) `text-info` — solid deepened INFO #355C92, CREAM icon. */
body:has(.main-sidebar) td a.has-icon.text-info,
body:has(.main-sidebar) td a.has-icon.text-info i {
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-info {
  background-color: #355C92 !important;
  border-color: #355C92 !important;
}

/* (f) `text-warning` — same as default (gold ≈ warning), INK icon. */
body:has(.main-sidebar) td a.has-icon.text-warning,
body:has(.main-sidebar) td a.has-icon.text-warning i {
  color: var(--ink) !important;
}
body:has(.main-sidebar) td a.has-icon.text-warning {
  background-color: var(--gold) !important;
  border-color: var(--gold-deep) !important;
}

/* (g) Class-named anchor buttons — share the default gold/ink chip. */
body:has(.main-sidebar) td a.editTestGroupBtn,
body:has(.main-sidebar) td a.view-details-btn {
  background-color: var(--gold) !important;
  border-color: var(--gold-deep) !important;
  color: var(--ink) !important;
}
body:has(.main-sidebar) td a.editTestGroupBtn i,
body:has(.main-sidebar) td a.view-details-btn i {
  color: var(--ink) !important;
}

/* (h) Hover — deepen each fill. Gold-family chips switch to navy-900 with
   cream icon (16.5:1) for the strongest "press" cue and AA-safe contrast.
   Note: gold-deep on cream is only 3.4:1 — too low for the icon — hence
   the colour-jump to navy-900 on hover. */
body:has(.main-sidebar) td a.has-icon:hover {
  background-color: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon:hover i { color: var(--cream) !important; }
body:has(.main-sidebar) td a.has-icon.text-warning:hover,
body:has(.main-sidebar) td a.editTestGroupBtn:hover,
body:has(.main-sidebar) td a.view-details-btn:hover {
  background-color: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-warning:hover i,
body:has(.main-sidebar) td a.editTestGroupBtn:hover i,
body:has(.main-sidebar) td a.view-details-btn:hover i {
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-dark:hover,
body:has(.main-sidebar) td a.has-icon.text-primary:hover {
  background-color: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-dark:hover i,
body:has(.main-sidebar) td a.has-icon.text-primary:hover i {
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-danger:hover,
body:has(.main-sidebar) td a.has-icon:has(.fa-trash):hover,
body:has(.main-sidebar) td a.has-icon:has(.fa-times):hover,
body:has(.main-sidebar) td a.has-icon:has(.fa-remove):hover,
body:has(.main-sidebar) td a.delete-vital:hover,
body:has(.main-sidebar) td a.delete-vital.text-danger:hover {
  background-color: #A52323 !important;
  border-color: #A52323 !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-danger:hover i,
body:has(.main-sidebar) td a.has-icon:has(.fa-trash):hover i,
body:has(.main-sidebar) td a.has-icon:has(.fa-times):hover i,
body:has(.main-sidebar) td a.has-icon:has(.fa-remove):hover i,
body:has(.main-sidebar) td a.delete-vital:hover i,
body:has(.main-sidebar) td a.delete-vital.text-danger:hover i {
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-success:hover {
  background-color: #0F5938 !important;
  border-color: #0F5938 !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-success:hover i { color: var(--cream) !important; }
body:has(.main-sidebar) td a.has-icon.text-info:hover {
  background-color: #2A4774 !important;
  border-color: #2A4774 !important;
  color: var(--cream) !important;
}
body:has(.main-sidebar) td a.has-icon.text-info:hover i { color: var(--cream) !important; }

/* (i) Focus-visible — gold outline for keyboard navigation. */
body:has(.main-sidebar) td a.has-icon:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* (j) Disabled — de-emphasised but still readable. */
body:has(.main-sidebar) td a.has-icon.disabled,
body:has(.main-sidebar) td a.has-icon[aria-disabled="true"],
body:has(.main-sidebar) td a.delete-vital.disabled,
body:has(.main-sidebar) td a.delete-vital[aria-disabled="true"],
body:has(.main-sidebar) td a.editTestGroupBtn.disabled,
body:has(.main-sidebar) td a.editTestGroupBtn[aria-disabled="true"],
body:has(.main-sidebar) td a.view-details-btn.disabled,
body:has(.main-sidebar) td a.view-details-btn[aria-disabled="true"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* ===================================================================   GLOBAL  Tightening pass #2 — class-based widget catchers
   --------------------------------------------------------------------------
   Targets the residual leaks that are NOT inline-style based and so
   couldn't be caught by attribute selectors.  Each block is a small
   semantic re-skin of a Stisla / Bootstrap widget.
   ========================================================================== */

/* ---- Form labels (Stisla emits #34395E by default) → ink ---- */
body:has(.main-sidebar) .main-content label,
body:has(.main-sidebar) .main-content .form-label,
body:has(.main-sidebar) .main-content .control-label {
  color: var(--ink-soft) !important;
}

/* ---- Bootstrap pagination (.page-link, .page-item) ---- */
body:has(.main-sidebar) .page-link {
  color: var(--ink-soft) !important;
  background-color: var(--surface) !important;
  border-color: var(--line-2) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: var(--r-xs) !important;
  margin: 0 2px !important;
}
body:has(.main-sidebar) .page-link:hover {
  background-color: var(--cream-2) !important;
  color: var(--ink) !important;
  border-color: rgba(196,154,63,.45) !important;
}
body:has(.main-sidebar) .page-item.active .page-link,
body:has(.main-sidebar) .page-link.active {
  background-color: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: var(--pane-fore) !important;
  box-shadow: none !important;
}
body:has(.main-sidebar) .page-item.disabled .page-link {
  color: var(--ink-faint) !important;
  background-color: var(--cream) !important;
  border-color: var(--line) !important;
}

/* ---- input-group-text + selectgroup buttons ---- */
body:has(.main-sidebar) .input-group-text {
  background-color: var(--cream-2) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-mute) !important;
  border-radius: var(--r-xs) !important;
}
body:has(.main-sidebar) .selectgroup-button {
  background-color: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
}
body:has(.main-sidebar) .selectgroup-input:checked + .selectgroup-button,
body:has(.main-sidebar) .selectgroup-input-radio:checked + .selectgroup-button {
  background-color: var(--cream-2) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 0 var(--gold);
}
/* FIX_B_984: AppointmentOnline.php gender radios use class
   `selectgroup-input-radio` (Stisla H360 variant), not the standard
   `selectgroup-input`. The previous :checked override matched only
   `selectgroup-input`, and the unchecked .selectgroup-button rule above
   uses !important — so clicking Male/Female/Others gave NO visual
   feedback and users thought the click failed. */

/* ---- Bootstrap Icons (.bi) without inline color → ink-mute ---- */
/* Only apply when the icon doesn't have an inline color and isn't part of
   a text-* utility class.  Quick-access panel keeps its inline colours. */
body:has(.main-sidebar) .main-content i.bi:not([style*="color"]):not([class*="text-"]) {
  color: var(--ink-mute) !important;
}

/* ---- DataTables sort indicator <b> border → palette ---- */
body:has(.main-sidebar) table b[style*="border"],
body:has(.main-sidebar) table .sorting b,
body:has(.main-sidebar) table th .sort-icon {
  border-color: var(--ink-faint) !important;
}
body:has(.main-sidebar) table th[aria-sort] {
  color: var(--ink) !important;
}

/* ---- Stisla `.table-hover tr:hover` (#FDFDFF bg) → cream tint ---- */
body:has(.main-sidebar) .table-hover > tbody > tr:hover,
body:has(.main-sidebar) .table-hover > tbody > tr:hover > td,
body:has(.main-sidebar) .table-hover tbody tr:hover {
  background-color: rgba(196,154,63,.04) !important;
}

/* ---- Bootstrap card hover (.card:hover) sometimes flashes #FDFDFF ---- */
body:has(.main-sidebar) .card[style*="#FDFDFF" i],
body:has(.main-sidebar) .card[style*="#fdfdff"] {
  background-color: var(--surface) !important;
}

/* ---- Stisla `<a>` default link colour (#6777EF) → ink-soft ---- */
body:has(.main-sidebar) .main-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon) {
  color: var(--navy-700) !important;
}
body:has(.main-sidebar) .main-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.dt-button):not(.has-icon):hover {
  color: var(--gold-deep) !important;
}

/* ---- Stisla `<b>` and `.text-bold` defaults ---- */
body:has(.main-sidebar) .main-content b,
body:has(.main-sidebar) .main-content strong {
  color: inherit !important;
}

/* ---- Bootstrap form-check + form-switch (#0D6EFD checked color) ---- */
body:has(.main-sidebar) .form-check-input:checked {
  background-color: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
}
body:has(.main-sidebar) .form-switch .form-check-input:checked {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* ---- Bootstrap progress bar default ---- */
body:has(.main-sidebar) .progress {
  background-color: var(--cream-2) !important;
  border-radius: 999px;
  height: 6px;
}
body:has(.main-sidebar) .progress-bar {
  background-color: var(--gold) !important;
}

/* ---- Stisla `.text-jet`, `.text-gray`, `.text-fade` (residual classes) ---- */
body:has(.main-sidebar) .main-content .text-jet,
body:has(.main-sidebar) .main-content .text-job { color: var(--ink) !important; }
body:has(.main-sidebar) .main-content .text-gray,
body:has(.main-sidebar) .main-content .text-fade,
body:has(.main-sidebar) .main-content .text-light { color: var(--ink-mute) !important; }

/* ---- Stisla legacy `.bg-success/info/warning/danger` shades ---- */
body:has(.main-sidebar) .bg-info,
body:has(.main-sidebar) .text-bg-info {
  background-color: rgba(30,68,117,.10) !important;
  color: var(--info) !important;
}
body:has(.main-sidebar) .bg-success {
  background-color: rgba(22,116,77,.10) !important;
  color: var(--ok) !important;
}
body:has(.main-sidebar) .bg-warning {
  background-color: rgba(196,154,63,.16) !important;
  color: var(--gold-deep) !important;
}
body:has(.main-sidebar) .bg-danger {
  background-color: rgba(165,35,35,.10) !important;
  color: var(--bad) !important;
}


/* ---- #medicineTable (prescription.php Rx repeater) ----
   The whole table is JS-generated with hardcoded inline styles:
     · headers: `background: lightblue`
     · borders: `#CCC` / `#DDD`
     · drag handle: `#AAA`
     · edit: `#007BFF`  ·  delete: `#FF0000`
   Re-skin to the institutional palette with high-specificity overrides. */
body:has(.main-sidebar) #medicineTable {
  border: 1px solid var(--line) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--surface) !important;
  font-family: var(--font-body) !important;
}
body:has(.main-sidebar) #medicineTable thead th,
body:has(.main-sidebar) #medicineTable thead th[style] {
  background: var(--cream-2) !important;
  background-color: var(--cream-2) !important;
  color: var(--ink-mute) !important;
  border: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line-2) !important;
  font-family: var(--font-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 10px 8px !important;
}
body:has(.main-sidebar) #medicineTable tbody td,
body:has(.main-sidebar) #medicineTable tbody td[style] {
  border: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  padding: 8px 6px !important;
  vertical-align: middle !important;
}
body:has(.main-sidebar) #medicineTable tbody tr:hover td {
  background: rgba(196,154,63,.04) !important;
}
/* drag handle */
body:has(.main-sidebar) #medicineTable .drag-handle,
body:has(.main-sidebar) #medicineTable i.drag-handle[style] {
  color: var(--ink-faint) !important;
  cursor: grab;
  transition: color var(--d-fast) var(--ease);
}
body:has(.main-sidebar) #medicineTable .drag-handle:hover { color: var(--gold) !important; }

/* row action icons */
body:has(.main-sidebar) #medicineTable .edit-btn,
body:has(.main-sidebar) #medicineTable i.edit-btn[style] {
  color: var(--navy-700) !important;
  cursor: pointer;
  margin-right: 8px;
  transition: color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
body:has(.main-sidebar) #medicineTable .edit-btn:hover {
  color: var(--gold) !important;
  transform: scale(1.1);
}
body:has(.main-sidebar) #medicineTable .delete-btn,
body:has(.main-sidebar) #medicineTable i.delete-btn[style] {
  color: var(--bad) !important;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
body:has(.main-sidebar) #medicineTable .delete-btn:hover {
  color: #7E1818 !important;
  transform: scale(1.1);
}

/* Same treatment for any other JS-generated table that uses `lightblue`
   headers via inline style (catches any sibling rx/test-table widgets). */
body:has(.main-sidebar) th[style*="lightblue" i],
body:has(.main-sidebar) th[style*="background: lightblue" i] {
  background: var(--cream-2) !important;
  background-color: var(--cream-2) !important;
  color: var(--ink-mute) !important;
  font-family: var(--font-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* And the catch-all border colours for inline #CCC/#DDD on tables */
body:has(.main-sidebar) table[style*="#CCC" i] td,
body:has(.main-sidebar) table[style*="#CCC" i] th,
body:has(.main-sidebar) td[style*="#CCC" i],
body:has(.main-sidebar) th[style*="#CCC" i],
body:has(.main-sidebar) td[style*="#DDD" i],
body:has(.main-sidebar) th[style*="#DDD" i] {
  border-color: var(--line) !important;
}

/* end global tightening sweep #2 */
/* end global tightening sweep */
/* end §3.3.Y creative flourishes */

/* ===================================================================   FIX_B_1705 — Badge / pill / KPI / alert / filter-active perceptual contrast
   --------------------------------------------------------------------------
   User feedback: "We have a similar issue across the application, not just
   this page." — soft-tint backgrounds (rgba .08-.20 of an intent over cream)
   paired with same-family text/icon dissolve into the page.

   Two consistent design directions:
     A) Saturated solid intent fill + cream/ink text — for action-significant
        labels (status: Active, Cancelled, Failed, Refunded; filter active;
        audit log action verbs).
     B) Stronger tint (alpha .28-.35) + deepened intent text + visible .50+
        border — for informational sub-data (count chips, dashboard pills,
        soft status displays).

   Boundary: stays out of lines 4128-4290 (action-chip family — owned by
   B-1701 / parallel agent). All overrides page-scoped under
   body:has(.main-sidebar) and use !important per CR-3 / CR-4.
   Aesthetic locked: navy-900 / cream / cream-2 / gold #C49A3F /
   bad #C8362F / info #4878B8 / ok #16744D.
   ========================================================================== */

/* ---- Direction A — `.badge.bg-primary/secondary/dark/light` solids ---- */
body:has(.main-sidebar) .main-content .badge.bg-primary,
body:has(.main-sidebar) .main-content .badge-primary,
body:has(.main-sidebar) .main-content .badge.bg-info,
body:has(.main-sidebar) .main-content .badge-info {
  background: var(--navy-700) !important;
  background-color: var(--navy-700) !important;
  color: var(--cream) !important;
  border: 1px solid var(--navy-800) !important;
}
body:has(.main-sidebar) .main-content .badge.bg-secondary,
body:has(.main-sidebar) .main-content .badge-secondary {
  background: var(--ink-mute) !important;
  background-color: var(--ink-mute) !important;
  color: var(--cream) !important;
  border: 1px solid var(--ink-soft) !important;
}
body:has(.main-sidebar) .main-content .badge.bg-dark,
body:has(.main-sidebar) .main-content .badge-dark {
  background: var(--navy-900) !important;
  background-color: var(--navy-900) !important;
  color: var(--cream) !important;
  border: 1px solid var(--navy-950) !important;
}
body:has(.main-sidebar) .main-content .badge.bg-light,
body:has(.main-sidebar) .main-content .badge-light {
  background: var(--cream-2) !important;
  background-color: var(--cream-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}

/* Direction A hover — deepen background ~10% lightness */
body:has(.main-sidebar) .main-content .badge.bg-primary:hover,
body:has(.main-sidebar) .main-content .badge.bg-info:hover {
  background: var(--navy-800) !important;
  background-color: var(--navy-800) !important;
}
body:has(.main-sidebar) .main-content .badge.bg-success:hover {
  background: #0F5A3B !important;
  background-color: #0F5A3B !important;
}
body:has(.main-sidebar) .main-content .badge.bg-danger:hover {
  background: #A02824 !important;
  background-color: #A02824 !important;
}
body:has(.main-sidebar) .main-content .badge.bg-warning:hover {
  background: var(--gold-deep) !important;
  background-color: var(--gold-deep) !important;
}

/* ---- Direction A/B — `.badge.text-*` text-only Bootstrap badges ----
   Bootstrap renders these with no bg by default — paint Direction B tint. */
body:has(.main-sidebar) .main-content .badge.text-success {
  background: rgba(22,116,77,.28) !important;
  color: #0A5832 !important;
  border: 1px solid rgba(22,116,77,.50) !important;
}
body:has(.main-sidebar) .main-content .badge.text-info {
  background: rgba(30,68,117,.28) !important;
  color: #244A75 !important;
  border: 1px solid rgba(30,68,117,.50) !important;
}
body:has(.main-sidebar) .main-content .badge.text-warning {
  background: rgba(196,154,63,.35) !important;
  color: #6B5219 !important;
  border: 1px solid rgba(196,154,63,.60) !important;
}
body:has(.main-sidebar) .main-content .badge.text-danger {
  background: rgba(165,35,35,.28) !important;
  color: #8E1F1B !important;
  border: 1px solid rgba(165,35,35,.50) !important;
}
body:has(.main-sidebar) .main-content .badge.text-primary {
  background: rgba(21,49,90,.18) !important;
  color: var(--navy-800) !important;
  border: 1px solid rgba(21,49,90,.40) !important;
}

/* ---- Direction B — `.kpi-tile`, `.status-pill`, `.tag-pill`, `.tag-mono`,
   `.pill-success/info/warning/danger` (defensive — even if not yet in markup,
   re-paint when introduced). ---- */
body:has(.main-sidebar) .main-content .status-pill,
body:has(.main-sidebar) .main-content .tag-pill,
body:has(.main-sidebar) .main-content .tag-mono {
  display: inline-block;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: var(--cream-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}
body:has(.main-sidebar) .main-content .status-pill.is-success,
body:has(.main-sidebar) .main-content .pill-success {
  background: rgba(22,116,77,.28) !important;
  color: #0A5832 !important;
  border-color: rgba(22,116,77,.50) !important;
}
body:has(.main-sidebar) .main-content .status-pill.is-info,
body:has(.main-sidebar) .main-content .pill-info {
  background: rgba(30,68,117,.28) !important;
  color: #244A75 !important;
  border-color: rgba(30,68,117,.50) !important;
}
body:has(.main-sidebar) .main-content .status-pill.is-warning,
body:has(.main-sidebar) .main-content .pill-warning {
  background: rgba(196,154,63,.35) !important;
  color: #6B5219 !important;
  border-color: rgba(196,154,63,.60) !important;
}
body:has(.main-sidebar) .main-content .status-pill.is-danger,
body:has(.main-sidebar) .main-content .pill-danger {
  background: rgba(165,35,35,.28) !important;
  color: #8E1F1B !important;
  border-color: rgba(165,35,35,.50) !important;
}

/* ---- Alert banners — Direction B stronger tint at page-banner scale ---- */
body:has(.main-sidebar) .main-content .alert {
  border-radius: var(--r-md) !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-family: var(--font-body) !important;
}
body:has(.main-sidebar) .main-content .alert-success {
  background: rgba(22,116,77,.28) !important;
  background-color: rgba(22,116,77,.28) !important;
  color: #0A5832 !important;
  border-color: rgba(22,116,77,.55) !important;
}
body:has(.main-sidebar) .main-content .alert-info {
  background: rgba(30,68,117,.28) !important;
  background-color: rgba(30,68,117,.28) !important;
  color: #244A75 !important;
  border-color: rgba(30,68,117,.55) !important;
}
body:has(.main-sidebar) .main-content .alert-warning {
  background: rgba(196,154,63,.35) !important;
  background-color: rgba(196,154,63,.35) !important;
  color: #6B5219 !important;
  border-color: rgba(196,154,63,.60) !important;
}
body:has(.main-sidebar) .main-content .alert-danger {
  background: rgba(165,35,35,.28) !important;
  background-color: rgba(165,35,35,.28) !important;
  color: #8E1F1B !important;
  border-color: rgba(165,35,35,.55) !important;
}
body:has(.main-sidebar) .main-content .alert-primary {
  background: rgba(21,49,90,.18) !important;
  background-color: rgba(21,49,90,.18) !important;
  color: var(--navy-800) !important;
  border-color: rgba(21,49,90,.45) !important;
}
body:has(.main-sidebar) .main-content .alert-secondary {
  background: var(--cream-2) !important;
  background-color: var(--cream-2) !important;
  color: var(--ink-soft) !important;
  border-color: var(--line-2) !important;
}

/* ---- Filter button-group active state — Direction A solid navy.
   Catches `.btn-group .btn.active`, `.dropdown-toggle.btn.active`, and
   `.btn-toggle .btn.active` used on RevenueReport / org_revenue / period
   filters. ---- */
body:has(.main-sidebar) .main-content .btn-group > .btn.active,
body:has(.main-sidebar) .main-content .btn-group > .btn.btn-primary.active,
body:has(.main-sidebar) .main-content .btn-group-toggle > .btn.active,
body:has(.main-sidebar) .main-content .btn.dropdown-toggle.active,
body:has(.main-sidebar) .main-content .btn-toggle .btn.active {
  background: var(--navy-700) !important;
  background-color: var(--navy-700) !important;
  color: var(--cream) !important;
  border-color: var(--navy-800) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body:has(.main-sidebar) .main-content .btn-group > .btn.active:hover,
body:has(.main-sidebar) .main-content .btn-group-toggle > .btn.active:hover,
body:has(.main-sidebar) .main-content .btn-toggle .btn.active:hover {
  background: var(--navy-800) !important;
  background-color: var(--navy-800) !important;
  color: var(--cream) !important;
}

/* ---- Disabled / focus-visible — preserve aesthetic ---- */
body:has(.main-sidebar) .main-content .badge:disabled,
body:has(.main-sidebar) .main-content .badge[aria-disabled="true"],
body:has(.main-sidebar) .main-content .status-pill[aria-disabled="true"],
body:has(.main-sidebar) .main-content .tag-pill[aria-disabled="true"] {
  opacity: 0.45 !important;
}
body:has(.main-sidebar) .main-content .badge:focus-visible,
body:has(.main-sidebar) .main-content .status-pill:focus-visible,
body:has(.main-sidebar) .main-content .tag-pill:focus-visible,
body:has(.main-sidebar) .main-content .alert :focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* end FIX_B_1705 */

/* =====================================================================   B-2020: Doctor Dashboard partial — Sovereign Institutional terminal style.
   All rules are scoped under body[data-role-dashboard="doctor"] .h360-doc-dashboard
   so they never leak into other pages or other partials.
   ========================================================================== */
body[data-role-dashboard="doctor"] .h360-doc-dashboard {
    --hdoc-bg:        var(--cream);
    --hdoc-pane:      #FFFFFF;
    --hdoc-pane-2:    #FAF8F2;
    --hdoc-edge:      #E4DDCB;
    --hdoc-ink:       var(--ink);
    --hdoc-ink-soft:  var(--ink-soft);
    --hdoc-ink-mute:  var(--ink-mute);
    --hdoc-navy:      var(--navy-700);
    --hdoc-navy-deep: var(--navy-900);
    --hdoc-gold:      var(--gold);
    --hdoc-gold-deep: var(--gold-deep);
    --hdoc-ok:        #1F7A4D;
    --hdoc-warn:      #B47A00;
    --hdoc-bad:       #B5341A;
    color: var(--hdoc-ink);
    font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 16px 18px 28px;
    background: var(--hdoc-bg);
}
body[data-role-dashboard="doctor"] .h360-doc-dashboard * { box-sizing: border-box; }

/* Chrome bar */
body[data-role-dashboard="doctor"] .hdoc-chrome {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 14px; margin-bottom: 14px;
    background: var(--hdoc-navy-deep);
    color: #F0E9D8;
    border-radius: 8px;
    border: 1px solid var(--hdoc-navy);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -18px rgba(8,21,48,0.6);
}
body[data-role-dashboard="doctor"] .hdoc-chrome__left,
body[data-role-dashboard="doctor"] .hdoc-chrome__right {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
body[data-role-dashboard="doctor"] .hdoc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hdoc-gold); box-shadow: 0 0 10px rgba(196,154,63,0.8);
}
body[data-role-dashboard="doctor"] .hdoc-mono {
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: #C9BE9C;
}
body[data-role-dashboard="doctor"] .hdoc-faint { color: rgba(240,233,216,0.55); }
body[data-role-dashboard="doctor"] .hdoc-sep { color: rgba(240,233,216,0.35); }
body[data-role-dashboard="doctor"] .hdoc-title { font-size: 15px; font-weight: 600; color: #F7F4EE; }
body[data-role-dashboard="doctor"] .hdoc-tag {
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-size: 11px; letter-spacing: 0.08em;
    padding: 3px 8px; border-radius: 4px;
    background: rgba(196,154,63,0.18); color: var(--hdoc-gold);
    border: 1px solid rgba(196,154,63,0.45);
}

/* KPI grid */
body[data-role-dashboard="doctor"] .hdoc-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px; margin-bottom: 14px;
}
@media (max-width: 1100px) { body[data-role-dashboard="doctor"] .hdoc-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { body[data-role-dashboard="doctor"] .hdoc-kpis { grid-template-columns: 1fr; } }

body[data-role-dashboard="doctor"] .hdoc-kpi {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: 16px 16px 14px; background: var(--hdoc-pane);
    border: 1px solid var(--hdoc-edge); border-radius: 10px;
    color: var(--hdoc-ink); text-decoration: none; cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden; min-height: 138px;
}
body[data-role-dashboard="doctor"] .hdoc-kpi::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--hdoc-navy); transition: background .25s ease;
}
body[data-role-dashboard="doctor"] .hdoc-kpi--primary::before { background: var(--hdoc-navy-deep); }
body[data-role-dashboard="doctor"] .hdoc-kpi--accent::before  { background: var(--hdoc-gold); }
body[data-role-dashboard="doctor"] .hdoc-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(8,21,48,0.35);
    border-color: var(--hdoc-navy);
}
body[data-role-dashboard="doctor"] .hdoc-kpi:focus-visible {
    outline: 2px solid var(--hdoc-gold); outline-offset: 2px;
}
body[data-role-dashboard="doctor"] .hdoc-kpi__top {
    display: flex; align-items: center; justify-content: space-between;
}
body[data-role-dashboard="doctor"] .hdoc-kpi__icon {
    width: 28px; height: 28px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hdoc-pane-2); color: var(--hdoc-navy);
    border: 1px solid var(--hdoc-edge);
}
body[data-role-dashboard="doctor"] .hdoc-kpi--accent .hdoc-kpi__icon {
    background: rgba(196,154,63,0.12); color: var(--hdoc-gold-deep);
    border-color: rgba(196,154,63,0.35);
}
body[data-role-dashboard="doctor"] .hdoc-kpi__num {
    font-size: 38px; font-weight: 700; line-height: 1;
    font-feature-settings: "tnum"; letter-spacing: -0.02em;
    color: var(--hdoc-navy-deep);
}
body[data-role-dashboard="doctor"] .hdoc-kpi__name {
    font-size: 18px; font-weight: 700; line-height: 1.2;
    color: var(--hdoc-navy-deep);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-role-dashboard="doctor"] .hdoc-empty { color: var(--hdoc-ink-mute); font-style: italic; font-weight: 500; }
body[data-role-dashboard="doctor"] .hdoc-kpi__sub { display: flex; gap: 6px; flex-wrap: wrap; }
body[data-role-dashboard="doctor"] .hdoc-pill {
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-size: 11px; padding: 2px 7px; border-radius: 4px;
    background: var(--hdoc-pane-2); color: var(--hdoc-ink-soft);
    border: 1px solid var(--hdoc-edge);
}
body[data-role-dashboard="doctor"] .hdoc-pill--gold {
    background: rgba(196,154,63,0.14); color: var(--hdoc-gold-deep);
    border-color: rgba(196,154,63,0.4);
}
body[data-role-dashboard="doctor"] .hdoc-kpi__label {
    font-size: 12px; color: var(--hdoc-ink-mute); letter-spacing: 0.02em;
}
body[data-role-dashboard="doctor"] .hdoc-kpi__cta {
    margin-top: auto; font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--hdoc-navy); display: inline-flex; align-items: center; gap: 6px;
    transition: gap .25s ease, color .25s ease;
}
body[data-role-dashboard="doctor"] .hdoc-kpi:hover .hdoc-kpi__cta { gap: 10px; color: var(--hdoc-gold-deep); }
body[data-role-dashboard="doctor"] .hdoc-spark {
    width: 100%; height: 28px; color: var(--hdoc-navy);
}
body[data-role-dashboard="doctor"] .hdoc-meter {
    height: 4px; background: var(--hdoc-pane-2); border-radius: 2px; overflow: hidden;
}
body[data-role-dashboard="doctor"] .hdoc-meter > span {
    display: block; height: 100%; width: var(--util, 0%);
    background: linear-gradient(90deg, var(--hdoc-navy), var(--hdoc-gold));
    transition: width .9s cubic-bezier(.2,.8,.2,1);
}

/* Pulse on Next-patient card */
@keyframes hdoc-pulse-kf {
    0%   { box-shadow: 0 0 0 0 rgba(196,154,63,0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(196,154,63,0); }
    100% { box-shadow: 0 0 0 0 rgba(196,154,63,0); }
}
body[data-role-dashboard="doctor"] .hdoc-pulse { animation: hdoc-pulse-kf 1.6s ease-out 1; }

/* Quick actions */
body[data-role-dashboard="doctor"] .hdoc-quick {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
body[data-role-dashboard="doctor"] .hdoc-quick__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 6px;
    background: var(--hdoc-pane); color: var(--hdoc-ink);
    border: 1px solid var(--hdoc-edge); text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
body[data-role-dashboard="doctor"] .hdoc-quick__btn i { color: var(--hdoc-navy); transition: color .2s ease; }
body[data-role-dashboard="doctor"] .hdoc-quick__btn:hover {
    transform: translateY(-1px); background: var(--hdoc-navy-deep); color: #F7F4EE; border-color: var(--hdoc-navy-deep);
}
body[data-role-dashboard="doctor"] .hdoc-quick__btn:hover i { color: var(--hdoc-gold); }
body[data-role-dashboard="doctor"] .hdoc-quick__btn--gold {
    background: var(--hdoc-gold); color: var(--hdoc-navy-deep);
    border-color: var(--hdoc-gold-deep); font-weight: 600;
}
body[data-role-dashboard="doctor"] .hdoc-quick__btn--gold i { color: var(--hdoc-navy-deep); }
body[data-role-dashboard="doctor"] .hdoc-quick__btn--gold:hover {
    background: var(--hdoc-gold-deep); color: #F7F4EE; border-color: var(--hdoc-gold-deep);
}
body[data-role-dashboard="doctor"] .hdoc-quick__btn--gold:hover i { color: var(--hdoc-gold); }

/* Main grid */
body[data-role-dashboard="doctor"] .hdoc-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
        "queue rx"
        "trend spec";
    gap: 14px;
}
@media (max-width: 1100px) {
    body[data-role-dashboard="doctor"] .hdoc-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "queue" "rx" "spec" "trend";
    }
}
body[data-role-dashboard="doctor"] .hdoc-card--queue { grid-area: queue; }
body[data-role-dashboard="doctor"] .hdoc-card--rx    { grid-area: rx; }
body[data-role-dashboard="doctor"] .hdoc-card--spec  { grid-area: spec; }
body[data-role-dashboard="doctor"] .hdoc-card--trend { grid-area: trend; }

body[data-role-dashboard="doctor"] .hdoc-card {
    background: var(--hdoc-pane); border: 1px solid var(--hdoc-edge);
    border-radius: 10px; overflow: hidden;
    transition: box-shadow .25s ease;
}
body[data-role-dashboard="doctor"] .hdoc-card:hover { box-shadow: 0 10px 26px -18px rgba(8,21,48,0.35); }
body[data-role-dashboard="doctor"] .hdoc-card__head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--hdoc-edge);
    background: var(--hdoc-pane-2);
}
body[data-role-dashboard="doctor"] .hdoc-card__head h3 {
    margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
    color: var(--hdoc-navy-deep);
}
body[data-role-dashboard="doctor"] .hdoc-card__head .hdoc-mono { color: var(--hdoc-ink-mute); }
body[data-role-dashboard="doctor"] .hdoc-card__action,
body[data-role-dashboard="doctor"] .hdoc-card__link {
    margin-left: auto; font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    background: transparent; border: 1px solid var(--hdoc-edge);
    color: var(--hdoc-navy); padding: 5px 10px; border-radius: 4px;
    cursor: pointer; text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
body[data-role-dashboard="doctor"] .hdoc-card__action:hover,
body[data-role-dashboard="doctor"] .hdoc-card__link:hover {
    background: var(--hdoc-navy-deep); color: #F7F4EE; border-color: var(--hdoc-navy-deep);
}
body[data-role-dashboard="doctor"] .hdoc-card__body { padding: 12px 16px; }

/* Table (queue) */
body[data-role-dashboard="doctor"] .hdoc-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
body[data-role-dashboard="doctor"] .hdoc-table thead th {
    text-align: left; font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--hdoc-ink-mute); padding: 6px 8px; border-bottom: 1px solid var(--hdoc-edge);
    font-weight: 600;
}
body[data-role-dashboard="doctor"] .hdoc-table tbody td {
    padding: 10px 8px; border-bottom: 1px solid rgba(228,221,203,0.55);
    color: var(--hdoc-ink); vertical-align: middle;
}
body[data-role-dashboard="doctor"] .hdoc-table tbody tr {
    cursor: pointer; transition: background .18s ease;
}
body[data-role-dashboard="doctor"] .hdoc-table tbody tr:hover { background: var(--hdoc-pane-2); }
body[data-role-dashboard="doctor"] .hdoc-table tbody tr.is-flash {
    background: rgba(196,154,63,0.18); transition: background .35s ease;
}
body[data-role-dashboard="doctor"] .hdoc-tok {
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-weight: 700; color: var(--hdoc-navy-deep); width: 32px;
}
body[data-role-dashboard="doctor"] .hdoc-row__sub {
    display: block; font-size: 11px; color: var(--hdoc-ink-mute);
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
}
body[data-role-dashboard="doctor"] .ta-r { text-align: right; }

/* Badges */
body[data-role-dashboard="doctor"] .hdoc-badge {
    display: inline-block; padding: 3px 8px; border-radius: 4px;
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--hdoc-pane-2); color: var(--hdoc-ink-soft);
    border: 1px solid var(--hdoc-edge);
}
body[data-role-dashboard="doctor"] .hdoc-badge--waiting {
    background: rgba(196,154,63,0.16); color: #7A5A0F; border-color: rgba(196,154,63,0.45);
}
body[data-role-dashboard="doctor"] .hdoc-badge--active {
    background: rgba(31,122,77,0.14); color: #11593A; border-color: rgba(31,122,77,0.45);
}
body[data-role-dashboard="doctor"] .hdoc-badge--done {
    background: rgba(21,49,90,0.10); color: var(--hdoc-navy-deep); border-color: rgba(21,49,90,0.3);
}
body[data-role-dashboard="doctor"] .hdoc-badge--cancelled {
    background: rgba(181,52,26,0.12); color: #802413; border-color: rgba(181,52,26,0.4);
}

/* Mini button (Write Rx) */
body[data-role-dashboard="doctor"] .hdoc-mini-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 4px;
    background: var(--hdoc-navy-deep); color: #F7F4EE;
    text-decoration: none; font-size: 12px; font-weight: 500;
    transition: background .2s ease, transform .2s ease;
}
body[data-role-dashboard="doctor"] .hdoc-mini-btn:hover {
    background: var(--hdoc-gold-deep); color: #F7F4EE; transform: translateX(2px);
}

/* Lists (Recent Rx, Specialty) */
body[data-role-dashboard="doctor"] .hdoc-list { list-style: none; margin: 0; padding: 0; }
body[data-role-dashboard="doctor"] .hdoc-list__item + .hdoc-list__item { border-top: 1px solid rgba(228,221,203,0.55); }
body[data-role-dashboard="doctor"] .hdoc-list__item a {
    display: block; padding: 10px 4px; text-decoration: none; color: var(--hdoc-ink);
    transition: background .2s ease, padding-left .2s ease;
    border-left: 2px solid transparent;
}
body[data-role-dashboard="doctor"] .hdoc-list__item a:hover {
    background: var(--hdoc-pane-2);
    border-left-color: var(--hdoc-gold);
    padding-left: 10px;
}
body[data-role-dashboard="doctor"] .hdoc-list__main {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
body[data-role-dashboard="doctor"] .hdoc-list__name { font-weight: 600; color: var(--hdoc-navy-deep); font-size: 13px; }
body[data-role-dashboard="doctor"] .hdoc-list__date {
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
    font-size: 11px; color: var(--hdoc-ink-mute);
}
body[data-role-dashboard="doctor"] .hdoc-list__sub {
    font-size: 12px; color: var(--hdoc-ink-soft); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Skeleton + empty */
body[data-role-dashboard="doctor"] .hdoc-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
body[data-role-dashboard="doctor"] .hdoc-skeleton > span {
    display: block; height: 14px; border-radius: 4px;
    background: linear-gradient(90deg, var(--hdoc-pane-2) 0%, #EFEAE0 50%, var(--hdoc-pane-2) 100%);
    background-size: 200% 100%;
    animation: hdoc-shimmer 1.4s ease-in-out infinite;
}
body[data-role-dashboard="doctor"] .hdoc-skeleton > span:nth-child(2) { width: 80%; }
body[data-role-dashboard="doctor"] .hdoc-skeleton > span:nth-child(3) { width: 60%; }
@keyframes hdoc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
body[data-role-dashboard="doctor"] .hdoc-empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 28px 8px; color: var(--hdoc-ink-mute); text-align: center;
}
body[data-role-dashboard="doctor"] .hdoc-empty-state i { font-size: 28px; color: var(--hdoc-navy); opacity: 0.4; }
body[data-role-dashboard="doctor"] .hdoc-empty-state p { margin: 0; font-size: 13px; }

/* Reduced motion: kill all transitions / animations */
@media (prefers-reduced-motion: reduce) {
    body[data-role-dashboard="doctor"] .h360-doc-dashboard *,
    body[data-role-dashboard="doctor"] .h360-doc-dashboard *::before,
    body[data-role-dashboard="doctor"] .h360-doc-dashboard *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* end B-2020 doctor dashboard */
/* ======================================================   B-2040 — Admin (caretaker) dashboard
   Scoped under body[data-role-dashboard="admin"]. Sovereign
   Institutional aesthetic: navy + cream + gold. WCAG-AA contrast.
   ============================================================= */
body[data-role-dashboard="admin"] {
  background: var(--cream) !important;
}
body[data-role-dashboard="admin"] .main-content {
  padding: 18px 22px 28px !important;
}
body[data-role-dashboard="admin"] .ad-wrap {
  --ad-radius: 10px;
  --ad-pad: 18px;
  --ad-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ad-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--ad-sans);
  color: var(--ink);
  display: flex; flex-direction: column; gap: 18px;
  max-width: 1480px; margin: 0 auto;
}

/* ---- chrome bar ---- */
body[data-role-dashboard="admin"] .ad-chrome {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: var(--cream);
  border-radius: var(--ad-radius);
  padding: 18px 22px;
  border: 1px solid var(--navy-700);
  box-shadow: 0 6px 18px rgba(8,21,48,0.12);
}
body[data-role-dashboard="admin"] .ad-chrome-l h1 {
  margin: 4px 0 0; font-size: 22px; letter-spacing: 0.3px; color: var(--cream);
}
body[data-role-dashboard="admin"] .ad-eyebrow {
  font-family: var(--ad-mono); font-size: 11px; letter-spacing: 1.4px;
  color: var(--gold-light); text-transform: uppercase;
}
body[data-role-dashboard="admin"] .ad-chrome-r {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--ad-mono); font-size: 12px; color: var(--navy-100);
}
body[data-role-dashboard="admin"] .ad-scope-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(196,154,63,0.15);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--ad-mono); font-size: 11px; letter-spacing: 0.6px;
  animation: ad-scope-fade-in 480ms ease both;
}
body[data-role-dashboard="admin"] .ad-scope-chip strong {
  color: var(--cream); font-weight: 600;
}
@keyframes ad-scope-fade-in {
  0%   { opacity: 0; transform: translateY(-4px); }
  60%  { opacity: 1; transform: translateY(0); }
  80%  { box-shadow: 0 0 0 4px rgba(196,154,63,0.18); }
  100% { box-shadow: 0 0 0 0 rgba(196,154,63,0); }
}
body[data-role-dashboard="admin"] .ad-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); display: inline-block;
  box-shadow: 0 0 0 3px rgba(22,168,95,0.18);
}

/* ---- KPI strip ---- */
body[data-role-dashboard="admin"] .ad-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 1100px) {
  body[data-role-dashboard="admin"] .ad-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body[data-role-dashboard="admin"] .ad-kpis { grid-template-columns: 1fr; }
}
body[data-role-dashboard="admin"] .ad-kpi {
  position: relative; display: block;
  background: #fff;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--gold);
  border-radius: var(--ad-radius);
  padding: 18px 18px 16px;
  text-decoration: none !important; color: inherit !important;
  cursor: pointer;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  overflow: hidden;
}
body[data-role-dashboard="admin"] .ad-kpi::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(196,154,63,0.07), transparent 60%);
  pointer-events: none;
}
body[data-role-dashboard="admin"] .ad-kpi:hover,
body[data-role-dashboard="admin"] .ad-kpi:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(8,21,48,0.14);
  border-left-color: var(--navy-700);
  outline: none;
}
body[data-role-dashboard="admin"] .ad-kpi:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
body[data-role-dashboard="admin"] .ad-cta {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--ad-mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--navy-500); text-transform: uppercase; opacity: 0.8;
}
body[data-role-dashboard="admin"] .ad-kpi:hover .ad-cta { color: var(--gold-deep); opacity: 1; }
body[data-role-dashboard="admin"] .ad-kpi-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ad-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--navy-700); text-transform: uppercase;
}
body[data-role-dashboard="admin"] .ad-ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--navy-50); color: var(--navy-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
body[data-role-dashboard="admin"] .ad-kpi-value {
  font-family: var(--ad-mono); font-weight: 700;
  font-size: 34px; line-height: 1.1; margin: 12px 0 6px;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}
body[data-role-dashboard="admin"] .ad-rupee {
  font-size: 22px; color: var(--gold-deep); margin-right: 2px;
}
body[data-role-dashboard="admin"] .ad-kpi-sub {
  font-size: 12px; color: var(--ink-soft);
}

/* ---- shared row + card ---- */
body[data-role-dashboard="admin"] .ad-row {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px;
}
body[data-role-dashboard="admin"] .ad-row-1 { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
  body[data-role-dashboard="admin"] .ad-row { grid-template-columns: 1fr; }
}
body[data-role-dashboard="admin"] .ad-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--ad-radius);
  display: flex; flex-direction: column;
  overflow: hidden;
}
body[data-role-dashboard="admin"] .ad-card-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cream-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
body[data-role-dashboard="admin"] .ad-card-head h3 {
  margin: 0; font-size: 14px; letter-spacing: 0.2px; color: var(--navy-900);
}
body[data-role-dashboard="admin"] .ad-tag {
  font-family: var(--ad-mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--navy-700);
  background: #fff; border: 1px solid var(--line-2);
  padding: 4px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
body[data-role-dashboard="admin"] .ad-card-body { padding: 14px 16px; flex: 1; min-height: 0; }
body[data-role-dashboard="admin"] .ad-card-foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper, var(--cream));
  font-family: var(--ad-mono); font-size: 11px; color: var(--navy-700);
}
body[data-role-dashboard="admin"] .ad-card-foot .ad-foot-r { margin-left: auto; }
body[data-role-dashboard="admin"] .ad-empty {
  text-align: center; color: var(--navy-500); font-size: 13px; padding: 20px 8px;
}
body[data-role-dashboard="admin"] .ad-legend {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px;
  vertical-align: middle;
}
body[data-role-dashboard="admin"] .ad-legend-good { background: var(--ok); }
body[data-role-dashboard="admin"] .ad-legend-mid  { background: var(--gold); }
body[data-role-dashboard="admin"] .ad-legend-low  { background: var(--bad); }

/* ---- doctor schedule grid ---- */
body[data-role-dashboard="admin"] .ad-sched-axis {
  display: grid; grid-template-columns: 200px 1fr; gap: 8px;
  padding: 8px 16px 0;
}
body[data-role-dashboard="admin"] .ad-sched-days {
  display: grid; gap: 6px;
}
body[data-role-dashboard="admin"] .ad-sched-day-h {
  text-align: center; padding: 4px 2px;
  font-family: var(--ad-mono); font-size: 10px; color: var(--navy-700);
  border-bottom: 1px solid var(--line);
}
body[data-role-dashboard="admin"] .ad-sched-day-h-l { font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
body[data-role-dashboard="admin"] .ad-sched-day-h-s { font-size: 9px; opacity: 0.7; }
body[data-role-dashboard="admin"] .ad-sched-grid {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 6px;
}
body[data-role-dashboard="admin"] .ad-sched-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 8px;
  align-items: center;
  padding: 8px 4px;
  border-radius: 8px;
  background: #fff;
  animation: ad-row-in 380ms ease both;
  animation-delay: calc(var(--ad-row-i, 0) * 70ms);
}
@keyframes ad-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
body[data-role-dashboard="admin"] .ad-sched-doc {
  display: flex; align-items: center; gap: 10px; padding-left: 6px;
}
body[data-role-dashboard="admin"] .ad-sched-doc-img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--gold); background: var(--navy-50);
}
body[data-role-dashboard="admin"] .ad-sched-doc-name {
  font-weight: 600; color: var(--navy-900); font-size: 13px;
}
body[data-role-dashboard="admin"] .ad-sched-doc-type {
  font-family: var(--ad-mono); font-size: 10px; color: var(--navy-500); text-transform: uppercase;
}
body[data-role-dashboard="admin"] .ad-sched-cells {
  display: grid; gap: 6px;
}
body[data-role-dashboard="admin"] .ad-sched-cell {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  padding: 6px 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: #fff; color: var(--navy-900);
  text-decoration: none !important;
  font-family: var(--ad-mono); font-size: 11px;
  min-height: 50px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  cursor: pointer;
}
body[data-role-dashboard="admin"] .ad-sched-cell:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(8,21,48,0.12);
  border-color: var(--navy-500);
  z-index: 2;
}
body[data-role-dashboard="admin"] .ad-sched-cell-top {
  text-align: center; font-weight: 700; color: var(--navy-900);
}
body[data-role-dashboard="admin"] .ad-sched-cell-bot {
  text-align: center; font-size: 9px; color: var(--navy-500); margin-top: 2px;
}
body[data-role-dashboard="admin"] .ad-sched-cell-bar {
  height: 4px; border-radius: 2px; margin-top: 4px;
  background: linear-gradient(to right, currentColor var(--ad-util, 0%), rgba(0,0,0,0.06) var(--ad-util, 0%));
}
body[data-role-dashboard="admin"] .ad-sched-cell-good { color: var(--ok); border-color: rgba(22,168,95,0.35); background: rgba(22,168,95,0.06); }
body[data-role-dashboard="admin"] .ad-sched-cell-mid  { color: var(--gold); border-color: rgba(196,154,63,0.45); background: rgba(196,154,63,0.06); }
body[data-role-dashboard="admin"] .ad-sched-cell-low  { color: var(--bad); border-color: rgba(200,54,47,0.30); background: rgba(200,54,47,0.04); }
body[data-role-dashboard="admin"] .ad-sched-cell-empty {
  color: var(--navy-300); border-style: dashed; background: var(--cream-2); cursor: not-allowed;
}
body[data-role-dashboard="admin"] .ad-sched-cell-empty:hover { transform: none; box-shadow: none; }

/* ---- staff activity feed ---- */
body[data-role-dashboard="admin"] .ad-feed-section { margin-bottom: 14px; }
body[data-role-dashboard="admin"] .ad-feed-section:last-child { margin-bottom: 0; }
body[data-role-dashboard="admin"] .ad-feed-h {
  font-family: var(--ad-mono); font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--navy-700);
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px;
}
body[data-role-dashboard="admin"] .ad-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
body[data-role-dashboard="admin"] .ad-feed-row {
  display: grid; grid-template-columns: 70px 1fr; column-gap: 8px; row-gap: 2px;
  padding: 6px 8px; border-radius: 6px;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
  animation: ad-feed-in 380ms ease both;
  animation-delay: calc(var(--ad-feed-i, 0) * 60ms);
}
@keyframes ad-feed-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body[data-role-dashboard="admin"] .ad-feed-row:hover,
body[data-role-dashboard="admin"] .ad-feed-row:focus-visible {
  background: var(--cream-2); outline: none;
}
body[data-role-dashboard="admin"] .ad-feed-row:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
body[data-role-dashboard="admin"] .ad-feed-when {
  font-family: var(--ad-mono); font-size: 10px; color: var(--navy-500);
  align-self: start; padding-top: 2px;
}
body[data-role-dashboard="admin"] .ad-feed-who {
  font-size: 12px; color: var(--navy-900);
}
body[data-role-dashboard="admin"] .ad-feed-who em {
  font-style: normal; color: var(--navy-500); font-size: 11px;
}
body[data-role-dashboard="admin"] .ad-feed-detail {
  grid-column: 2; font-size: 11px; color: var(--ink-soft); line-height: 1.35;
}

/* ---- finance chart card ---- */
body[data-role-dashboard="admin"] #ad-fin-chart text { fill: var(--navy-700) !important; }
body[data-role-dashboard="admin"] #ad-fin-chart .apexcharts-tooltip {
  background: var(--navy-900) !important; color: var(--cream) !important;
  border: 1px solid var(--gold) !important;
  font-family: var(--ad-mono) !important; font-size: 11px !important;
}
body[data-role-dashboard="admin"] #ad-fin-chart .apexcharts-tooltip-title {
  background: var(--navy-950) !important; border-bottom: 1px solid var(--gold) !important;
}

/* ---- quick actions ---- */
body[data-role-dashboard="admin"] .ad-actions {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px;
}
@media (max-width: 1100px) {
  body[data-role-dashboard="admin"] .ad-actions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  body[data-role-dashboard="admin"] .ad-actions { grid-template-columns: repeat(2, 1fr); }
}
body[data-role-dashboard="admin"] .ad-action-btn {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  background: var(--navy-900); color: var(--cream);
  border: 1px solid var(--navy-700);
  border-radius: 8px; padding: 14px 12px;
  text-decoration: none !important;
  min-height: 80px;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
  position: relative; overflow: hidden;
}
body[data-role-dashboard="admin"] .ad-action-btn::after {
  content: '\2192'; position: absolute; right: 12px; bottom: 10px;
  font-family: var(--ad-mono); color: var(--gold-light); opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}
body[data-role-dashboard="admin"] .ad-action-btn:hover {
  transform: translateY(-2px);
  background: var(--navy-800);
  border-color: var(--gold);
}
body[data-role-dashboard="admin"] .ad-action-btn:hover::after { opacity: 1; transform: translateX(2px); }
body[data-role-dashboard="admin"] .ad-ab-eyebrow {
  font-family: var(--ad-mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--gold-light); text-transform: uppercase;
}
body[data-role-dashboard="admin"] .ad-ab-title {
  font-size: 14px; font-weight: 600; color: var(--cream); margin-top: 4px;
}

/* ---- footer meta ---- */
body[data-role-dashboard="admin"] .ad-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 4px;
  font-family: var(--ad-mono); font-size: 11px; color: var(--navy-700);
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  body[data-role-dashboard="admin"] .ad-scope-chip,
  body[data-role-dashboard="admin"] .ad-sched-row,
  body[data-role-dashboard="admin"] .ad-feed-row { animation: none !important; }
  body[data-role-dashboard="admin"] .ad-kpi,
  body[data-role-dashboard="admin"] .ad-sched-cell,
  body[data-role-dashboard="admin"] .ad-action-btn { transition: none !important; }
}
/* end B-2040 */


/* B-2010 SA dashboard scoped CSS (extracted from rogue branch) */
body[data-role-dashboard="sa"]
   ============================================================ */
body[data-role-dashboard="sa"] {
  background: var(--cream);
  color: var(--navy-900);
  font-family: "Inter", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body[data-role-dashboard="sa"] .sa-wrap {
  padding: 18px 22px 60px;
  max-width: 1640px;
  margin: 0 auto;
}
body[data-role-dashboard="sa"] .sa-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy-900);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--gold);
}
body[data-role-dashboard="sa"] .sa-chrome .sa-chrome-l {
  display: flex; align-items: center; gap: 12px;
}
body[data-role-dashboard="sa"] .sa-chrome .sa-eyebrow {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-soft);
}
body[data-role-dashboard="sa"] .sa-chrome h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--cream);
  letter-spacing: 0.2px;
}
body[data-role-dashboard="sa"] .sa-chrome .sa-chrome-r {
  display: flex; align-items: center; gap: 16px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--navy-200);
}
body[data-role-dashboard="sa"] .sa-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(11,107,58,.15);
  vertical-align: middle; margin-right: 6px;
}
body[data-role-dashboard="sa"] .sa-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
  margin-bottom: 18px;
}
body[data-role-dashboard="sa"] .sa-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }
body[data-role-dashboard="sa"] .sa-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
body[data-role-dashboard="sa"] .sa-kpi {
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  text-decoration: none;
  color: var(--navy-900);
  box-shadow: var(--shadow-xs);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
  cursor: pointer;
}
body[data-role-dashboard="sa"] .sa-kpi::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--gold);
  transition: width .22s ease;
}
body[data-role-dashboard="sa"] .sa-kpi:hover,
body[data-role-dashboard="sa"] .sa-kpi:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy-300);
  outline: none;
}
body[data-role-dashboard="sa"] .sa-kpi:hover::before { width: 5px; }
body[data-role-dashboard="sa"] .sa-kpi .sa-kpi-label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--navy-700);
  display: flex; align-items: center; gap: 8px;
}
body[data-role-dashboard="sa"] .sa-kpi .sa-kpi-label .sa-ico {
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-2);
}
body[data-role-dashboard="sa"] .sa-kpi .sa-kpi-value {
  font-size: 30px; font-weight: 700; line-height: 1.05;
  margin-top: 8px; color: var(--navy-950);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
body[data-role-dashboard="sa"] .sa-kpi .sa-kpi-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--navy-700);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
body[data-role-dashboard="sa"] .sa-kpi .sa-delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
}
body[data-role-dashboard="sa"] .sa-delta.up   { background: var(--ok-bg);   color: var(--ok); }
body[data-role-dashboard="sa"] .sa-delta.down { background: var(--bad-bg);  color: var(--bad); }
body[data-role-dashboard="sa"] .sa-delta.flat { background: var(--navy-100); color: var(--navy-700); }
body[data-role-dashboard="sa"] .sa-kpi .sa-spark { margin-top: 8px; height: 38px; }
body[data-role-dashboard="sa"] .sa-kpi .sa-cta {
  position: absolute; right: 12px; top: 12px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px; color: var(--navy-300);
  transition: color .22s ease, transform .22s ease;
}
body[data-role-dashboard="sa"] .sa-kpi:hover .sa-cta { color: var(--gold-2); transform: translateX(2px); }
body[data-role-dashboard="sa"] .sa-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
body[data-role-dashboard="sa"] .sa-row { grid-template-columns: 1fr; }
body[data-role-dashboard="sa"] .sa-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex; flex-direction: column;
}
body[data-role-dashboard="sa"] .sa-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--cream-2), var(--cream));
  border-bottom: 1px solid var(--line);
}
body[data-role-dashboard="sa"] .sa-card-head h3 {
  font-size: 13px; font-weight: 600; margin: 0;
  color: var(--navy-900);
  letter-spacing: .2px;
}
body[data-role-dashboard="sa"] .sa-card-head .sa-tag {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--navy-700);
  display: inline-flex; align-items: center; gap: 6px;
}
body[data-role-dashboard="sa"] .sa-card-body { padding: 8px 6px 8px; max-height: 460px; overflow: auto; }
body[data-role-dashboard="sa"] .sa-feed { list-style: none; margin: 0; padding: 0; }
body[data-role-dashboard="sa"] .sa-feed li {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .18s ease;
}
body[data-role-dashboard="sa"] .sa-feed li:hover { background: #fbf6e6; }
body[data-role-dashboard="sa"] .sa-feed li:last-child { border-bottom: none; }
body[data-role-dashboard="sa"] .sa-feed .sa-ts {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--navy-700);
}
body[data-role-dashboard="sa"] .sa-feed .sa-action {
  display: inline-flex; align-items: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  font-weight: 600;
}
body[data-role-dashboard="sa"] .sa-action.a-create  { background: var(--ok-bg);   color: var(--ok); }
body[data-role-dashboard="sa"] .sa-action.a-update  { background: var(--info-bg); color: var(--info); }
body[data-role-dashboard="sa"] .sa-action.a-delete  { background: var(--bad-bg);  color: var(--bad); }
body[data-role-dashboard="sa"] .sa-action.a-login   { background: var(--cream-2); color: var(--navy-900); border: 1px solid var(--line); }
body[data-role-dashboard="sa"] .sa-action.a-logout  { background: var(--cream-2); color: var(--navy-700); border: 1px solid var(--line); }
body[data-role-dashboard="sa"] .sa-feed .sa-msg     { color: var(--navy-900); }
body[data-role-dashboard="sa"] .sa-feed .sa-msg b   { color: var(--navy-950); }
body[data-role-dashboard="sa"] .sa-feed .sa-meta    { color: var(--navy-700); font-size: 11px; margin-top: 2px; }
body[data-role-dashboard="sa"] .sa-feed li.sa-new {
    animation: sa-slide-in .25s ease both;
  }
body[data-role-dashboard="sa"] .sa-heat {
  display: grid; gap: 8px; padding: 12px;
}
body[data-role-dashboard="sa"] .sa-heat .sa-heat-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center; gap: 10px;
}
body[data-role-dashboard="sa"] .sa-heat .sa-heat-name {
  font-size: 12px; font-weight: 500; color: var(--navy-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-role-dashboard="sa"] .sa-heat .sa-heat-name small {
  display: block; font-size: 10.5px; color: var(--navy-700);
  font-family: "Geist Mono", ui-monospace, monospace;
}
body[data-role-dashboard="sa"] .sa-heat .sa-heat-cells {
  display: grid;
  grid-template-columns: repeat(var(--sa-heat-days, 7), 1fr);
  gap: 4px;
}
body[data-role-dashboard="sa"] .sa-heat .sa-cell {
  aspect-ratio: 1.4 / 1;
  border-radius: var(--radius-sm);
  background: var(--cream-2);
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--navy-900);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body[data-role-dashboard="sa"] .sa-heat .sa-cell:hover {
  transform: scale(1.07);
  z-index: 2;
  box-shadow: var(--shadow-sm);
  border-color: var(--gold);
}
body[data-role-dashboard="sa"] .sa-heat .sa-cell[data-level="0"] { background: #f0eada; color: var(--navy-300); }
body[data-role-dashboard="sa"] .sa-heat .sa-cell[data-level="1"] { background: #e2d6ad; color: var(--navy-900); }
body[data-role-dashboard="sa"] .sa-heat .sa-cell[data-level="2"] { background: #cfb573; color: #2a1f00; }
body[data-role-dashboard="sa"] .sa-heat .sa-cell[data-level="3"] { background: #b88a2a; color: var(--cream); }
body[data-role-dashboard="sa"] .sa-heat .sa-cell[data-level="4"] { background: #8e6915; color: var(--cream); }
body[data-role-dashboard="sa"] .sa-heat-axis {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px; padding: 0 12px 8px;
}
body[data-role-dashboard="sa"] .sa-heat-axis .sa-heat-days {
  display: grid;
  grid-template-columns: repeat(var(--sa-heat-days, 7), 1fr);
  gap: 4px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; color: var(--navy-700); text-align: center;
  letter-spacing: .5px; text-transform: uppercase;
}
body[data-role-dashboard="sa"] .sa-gov-tbl {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
body[data-role-dashboard="sa"] .sa-gov-tbl th {
  text-align: left; padding: 8px 14px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--navy-700); border-bottom: 1px solid var(--line);
  background: var(--cream);
}
body[data-role-dashboard="sa"] .sa-gov-tbl td {
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .18s ease;
}
body[data-role-dashboard="sa"] .sa-gov-tbl tr:hover td { background: #fbf6e6; }
body[data-role-dashboard="sa"] .sa-gov-tbl tr:last-child td { border-bottom: none; }
body[data-role-dashboard="sa"] .sa-gov-tbl .sa-ent-tag {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  background: var(--navy-100); color: var(--navy-900);
}
body[data-role-dashboard="sa"] .sa-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
}
body[data-role-dashboard="sa"] .sa-actions { grid-template-columns: repeat(3, minmax(0,1fr)); }
body[data-role-dashboard="sa"] .sa-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
body[data-role-dashboard="sa"] .sa-action-btn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  background: var(--navy-900);
  color: var(--cream);
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid var(--navy-800);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
  cursor: pointer;
}
body[data-role-dashboard="sa"] .sa-action-btn:hover {
  transform: translateY(-2px);
  background: var(--navy-800);
  box-shadow: var(--shadow-md);
  color: var(--cream);
}
body[data-role-dashboard="sa"] .sa-action-btn .sa-ab-eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-soft);
}
body[data-role-dashboard="sa"] .sa-action-btn .sa-ab-title { font-size: 14px; font-weight: 600; }
body[data-role-dashboard="sa"] .sa-dbh-tbl {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
body[data-role-dashboard="sa"] .sa-dbh-tbl th, body[data-role-dashboard="sa"] .sa-dbh-tbl td {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
body[data-role-dashboard="sa"] .sa-dbh-tbl th {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--navy-700); text-align: left;
  background: var(--cream);
}
body[data-role-dashboard="sa"] .sa-dbh-tbl td.num {
  font-family: "Geist Mono", ui-monospace, monospace;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--navy-950);
}
body[data-role-dashboard="sa"] .sa-skel {
  background: linear-gradient(90deg, var(--cream-2) 0%, var(--cream) 50%, var(--cream-2) 100%);
  background-size: 200% 100%;
  animation: sa-skel 1.4s linear infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
body[data-role-dashboard="sa"] .sa-skel { animation: none; }
body[data-role-dashboard="sa"] .sa-kpi:hover { transform: none; }
body[data-role-dashboard="sa"] .sa-action-btn:hover { transform: none; }
body[data-role-dashboard="sa"] .sa-heat .sa-cell:hover { transform: none; }
body[data-role-dashboard="sa"] .sa-empty {
  padding: 28px 18px; text-align: center;
  color: var(--navy-700);
  font-size: 13px;
}
body[data-role-dashboard="sa"] .sa-error {
  padding: 12px 16px; margin: 8px 12px;
  background: var(--bad-bg); color: var(--bad);
  border: 1px solid #e9b3b3; border-radius: var(--radius-sm);
  font-size: 12.5px;
}
body[data-role-dashboard="sa"] .sa-foot {
  margin-top: 16px; padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--navy-700);
  letter-spacing: .4px;
}

/* ============================================================
   B-2100 — Roles & Permissions Redesign (Sovereign Institutional)
   Scoped under .roles-redesign so other pages are untouched.
   ============================================================ */
.roles-redesign { color: var(--ink); }

.roles-redesign .rr-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 991.98px) {
  .roles-redesign .rr-grid { grid-template-columns: 1fr; }
}

/* ---------- Cards / shared chrome ---------- */
.roles-redesign .rr-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(8,21,48,.04);
}
.roles-redesign .rr-card-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
  border-radius: 8px 8px 0 0;
}
.roles-redesign .rr-eyebrow {
  display: block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2px;
}
.roles-redesign .rr-card-title {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em;
}

/* ---------- Roles list (left pane) ---------- */
.roles-redesign .rr-roles-pane { position: sticky; top: 76px; }
@media (max-width: 991.98px) { .roles-redesign .rr-roles-pane { position: static; } }

.roles-redesign .rr-roles-toolbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.roles-redesign .rr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.roles-redesign .rr-btn-primary {
  background: var(--navy-900); color: var(--cream);
  border-color: var(--navy-900);
}
.roles-redesign .rr-btn-primary:hover {
  background: #0c1e44; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8,21,48,.18);
}
.roles-redesign .rr-btn-primary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.roles-redesign .rr-btn-ghost {
  background: transparent; color: var(--ink-soft);
  border-color: var(--line-2);
}
.roles-redesign .rr-btn-ghost:hover { background: var(--cream-2); color: var(--ink); }
.roles-redesign .rr-btn-block { width: 100%; }

.roles-redesign .rr-search {
  position: relative;
}
.roles-redesign .rr-search i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); font-size: 12px;
}
.roles-redesign .rr-search input {
  width: 100%; padding: 7px 10px 7px 30px;
  border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 13px; color: var(--ink);
  background: var(--surface);
  transition: border .15s ease, box-shadow .15s ease;
}
.roles-redesign .rr-search input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196,154,63,.15);
}

.roles-redesign .rr-roles-list-wrap { max-height: calc(100vh - 240px); overflow-y: auto; }
.roles-redesign .rr-roles-list { padding: 6px 0; }
.roles-redesign .rr-loading,
.roles-redesign .rr-empty {
  padding: 18px 16px; font-size: 12.5px; color: var(--ink-mute);
  text-align: center; font-style: italic;
}

.roles-redesign .rr-role-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line);
  cursor: default;
  transition: background .12s ease, border-color .12s ease;
}
.roles-redesign .rr-role-row:hover { background: rgba(196,154,63,.05); }
.roles-redesign .rr-role-row.is-active {
  background: var(--cream-2);
  border-left-color: var(--gold);
}
.roles-redesign .rr-role-num {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--ink-faint);
  text-align: right;
}
.roles-redesign .rr-role-name {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.roles-redesign .rr-role-actions { display: inline-flex; gap: 10px; }
.roles-redesign .rr-role-actions .has-icon {
  color: var(--ink-mute); font-size: 14px;
  transition: color .12s ease, transform .12s ease;
}
.roles-redesign .rr-role-actions .has-icon:hover { color: var(--navy-900); transform: scale(1.08); }
.roles-redesign .rr-role-actions .text-danger:hover { color: var(--bad) !important; }

/* ---------- Sticky bars (top + bottom) ---------- */
.roles-redesign .rr-sticky-bar {
  position: sticky;
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.roles-redesign .rr-sticky-top { top: 64px; border-radius: 8px 8px 0 0; border-bottom: none; }
.roles-redesign .rr-sticky-bottom { bottom: 0; border-radius: 0 0 8px 8px; border-top: 1px solid var(--line); }
.roles-redesign .rr-bar-left { display: flex; flex-direction: column; gap: 4px; min-width: 240px; flex: 1 1 240px; }
.roles-redesign .rr-bar-right { display: inline-flex; align-items: center; gap: 8px; }
.roles-redesign .rr-bar-hint {
  font-size: 11.5px; color: var(--ink-mute);
  font-family: "Geist Mono", ui-monospace, monospace;
  letter-spacing: .04em;
}
.roles-redesign .rr-input {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  transition: border .15s ease, box-shadow .15s ease;
}
.roles-redesign .rr-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196,154,63,.18);
}
.roles-redesign .rr-dirty-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; transition: background .2s ease;
}
body.rr-dirty .roles-redesign .rr-dirty-dot {
  background: var(--gold);
  animation: rrPulse 1.6s ease-in-out infinite;
}
@keyframes rrPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,154,63,.6); }
  50%      { box-shadow: 0 0 0 6px rgba(196,154,63,0); }
}
body.rr-dirty .roles-redesign #savemenus,
body.rr-dirty .roles-redesign #savemenus2 {
  animation: rrSavePulse 2.2s ease-in-out infinite;
}
@keyframes rrSavePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,154,63,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(196,154,63,0); }
}

/* ---------- Matrix (parent cards container) ---------- */
.roles-redesign .rr-matrix {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 0;
  transition: opacity .18s ease;
}
.roles-redesign .rr-matrix.rr-shimmer { opacity: .55; }

/* ---------- Parent card ---------- */
.roles-redesign .rr-pcard {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.roles-redesign .rr-pcard:hover { box-shadow: 0 2px 8px rgba(8,21,48,.06); }
.roles-redesign .rr-pcard.is-full   { border-color: var(--gold); }
.roles-redesign .rr-pcard.is-partial { border-color: var(--gold-light); }

.roles-redesign .rr-pcard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--cream-2);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}
.roles-redesign .rr-pcard.is-open .rr-pcard-head { border-bottom-color: var(--line); }
.roles-redesign .rr-pcard-head:hover { background: #e8e2d3; }

.roles-redesign .rr-pcheck {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; margin: 0;
}
.roles-redesign .rr-pcheck input { position: absolute; opacity: 0; pointer-events: none; }
.roles-redesign .rr-pcheck-box {
  width: 18px; height: 18px; flex: 0 0 18px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 4px;
  background: var(--surface);
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.roles-redesign .rr-pcheck input:checked + .rr-pcheck-box {
  background: var(--gold); border-color: var(--gold-deep);
}
.roles-redesign .rr-pcheck input:checked + .rr-pcheck-box::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--navy-900);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.roles-redesign .rr-pcheck input:focus-visible + .rr-pcheck-box {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.roles-redesign .rr-pcheck-name {
  font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
}

.roles-redesign .rr-pcard-meta { display: inline-flex; align-items: center; gap: 8px; }
.roles-redesign .rr-count {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; color: var(--ink-mute);
  background: var(--surface);
  padding: 3px 7px; border-radius: 10px;
  border: 1px solid var(--line);
  letter-spacing: .03em;
}
.roles-redesign .rr-mini, .roles-redesign .rr-row-mini {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: 4px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.roles-redesign .rr-mini:hover, .roles-redesign .rr-row-mini:hover {
  background: var(--navy-900); color: var(--cream); border-color: var(--navy-900);
}
.roles-redesign .rr-toggle {
  background: transparent; border: none;
  color: var(--ink-mute); padding: 4px 8px;
  cursor: pointer; transition: transform .25s ease, color .12s ease;
}
.roles-redesign .rr-pcard.is-open .rr-toggle { transform: rotate(180deg); color: var(--ink); }

/* ---------- Parent card body / collapse animation ---------- */
.roles-redesign .rr-pcard-body {
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease;
}
.roles-redesign .rr-pcard.is-open .rr-pcard-body { max-height: 2400px; }

/* ---------- Permission table ---------- */
.roles-redesign .rr-perm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}
.roles-redesign .rr-perm-table thead th {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 10px 12px;
  background: #fafaf7;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.roles-redesign .rr-perm-table thead th.rr-th-name { text-align: left; width: 38%; }
.roles-redesign .rr-perm-table thead th.rr-th-act  { width: 10%; }
.roles-redesign .rr-perm-table thead th.rr-th-bulk { width: 12%; }

.roles-redesign .rr-prow td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.roles-redesign .rr-prow:last-child td { border-bottom: none; }
.roles-redesign .rr-prow:hover { background: rgba(196,154,63,.04); }
.roles-redesign .rr-td-act, .roles-redesign .rr-td-bulk { text-align: center; }
.roles-redesign .rr-td-bulk { white-space: nowrap; }
.roles-redesign .rr-td-bulk .rr-row-mini { margin: 0 2px; }

/* ---------- Sub-menu checkbox ---------- */
.roles-redesign .rr-subcheck {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; cursor: pointer;
}
.roles-redesign .rr-subcheck input { position: absolute; opacity: 0; pointer-events: none; }
.roles-redesign .rr-subcheck-box {
  width: 16px; height: 16px; flex: 0 0 16px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 3px;
  background: var(--surface);
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.roles-redesign .rr-subcheck input:checked + .rr-subcheck-box {
  background: var(--ink-soft); border-color: var(--ink);
}
.roles-redesign .rr-subcheck input:checked + .rr-subcheck-box::after {
  content: ""; position: absolute; left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid var(--cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.roles-redesign .rr-subcheck input:focus-visible + .rr-subcheck-box {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.roles-redesign .rr-subcheck-name {
  font-size: 13px; color: var(--ink);
}

/* ---------- Action (perm) checkbox ---------- */
.roles-redesign .rr-actcheck {
  display: inline-block; cursor: pointer; margin: 0; line-height: 0;
}
.roles-redesign .rr-actcheck input { position: absolute; opacity: 0; pointer-events: none; }
.roles-redesign .rr-actcheck-box {
  display: inline-block;
  width: 18px; height: 18px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 4px;
  background: var(--surface);
  position: relative;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.roles-redesign .rr-actcheck input:checked + .rr-actcheck-box {
  background: var(--ok); border-color: #0e8a4a;
}
.roles-redesign .rr-actcheck input:checked + .rr-actcheck-box::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.roles-redesign .rr-actcheck input:focus-visible + .rr-actcheck-box {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.roles-redesign .rr-actcheck-box:hover { transform: scale(1.08); }
.roles-redesign .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Mobile card-list view of the matrix ---------- */
@media (max-width: 767.98px) {
  .roles-redesign .rr-perm-table thead { display: none; }
  .roles-redesign .rr-perm-table,
  .roles-redesign .rr-perm-table tbody,
  .roles-redesign .rr-prow,
  .roles-redesign .rr-prow td { display: block; width: 100%; }
  .roles-redesign .rr-prow {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .roles-redesign .rr-prow td {
    padding: 4px 0;
    border-bottom: none;
    text-align: left !important;
  }
  .roles-redesign .rr-td-act::before {
    content: attr(data-label);
    display: inline-block;
    width: 60px; font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px; text-transform: uppercase; color: var(--ink-mute);
    letter-spacing: .12em;
  }
  .roles-redesign .rr-td-act {
    display: inline-flex !important; align-items: center; gap: 8px;
    width: 50% !important; padding: 6px 0 !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .roles-redesign *,
  .roles-redesign *::before,
  .roles-redesign *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   FIX_B_2204 — SA Quick Actions WCAG contrast
   A global anchor rule (likely in custom.css) was overriding
   the sa-action-btn cream text to navy-700 on navy-900 bg,
   producing 1.4 contrast. Force cream + gold per design with
   !important per CR-1 (CSS-only overlay).
   ============================================================ */
body[data-role-dashboard="sa"] .sa-action-btn,
body[data-role-dashboard="sa"] .sa-action-btn:link,
body[data-role-dashboard="sa"] .sa-action-btn:visited,
body[data-role-dashboard="sa"] .sa-action-btn:hover,
body[data-role-dashboard="sa"] .sa-action-btn:focus,
body[data-role-dashboard="sa"] .sa-action-btn:active {
  color: var(--cream) !important;
  text-decoration: none !important;
}
body[data-role-dashboard="sa"] .sa-action-btn .sa-ab-title {
  color: var(--cream) !important;
}
body[data-role-dashboard="sa"] .sa-action-btn .sa-ab-eyebrow {
  color: var(--gold-soft, #d4a84a) !important;
}

/* FIX_B_2204b — Audit feed <li> rows (#sa-feed-list li) are also
   clickable; ensure inherited link colors don't muddy the meta line. */
body[data-role-dashboard="sa"] #sa-feed-list li .sa-msg,
body[data-role-dashboard="sa"] #sa-feed-list li .sa-meta {
  color: var(--navy-800) !important;
}
body[data-role-dashboard="sa"] #sa-feed-list li .sa-meta { color: var(--navy-700) !important; }