/* ==========================================================================
   core.css — UI theme for the Bootstrap 3 (7pro 3.4.x) back-office core
   --------------------------------------------------------------------------
   Load order (layout/assets.php):
     base.css (Bootstrap in a layer) → core.css → fonts/<font>.css
     → themes/<palette>.css → app.css (page-specific rules)
   Every colour, size and radius comes from the tokens in section 1.
   A palette file (css/themes/*.css) overrides only the "preset" tokens.

    1. Tokens
    2. Base & typography
    3. Shell: grid, sidebar, mini sidebar, top bar, right sidebar,
       page header, footer, to-top
    4. Panels & KPI cards
    5. Buttons
    6. Forms
    7. Tables
    8. Navigation components
    9. Feedback & overlays
   10. Icons
   11. Login page
   12. Plugin: DataTables 1.13 (bootstrap integration)
   13. Plugin: Tom Select 2
   14. Plugin: Highcharts 12 (styled mode)
   15. Plugin: FullCalendar 2.4
   16. Utilities
   17. Responsive, motion, print
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* ---- preset tokens: palette files override these (defaults = Clearview) */
  --accent: #2175D9;
  --accent-ink: #FFFFFF;
  --accent-text: #1C64BC;
  --tint-h: 262;
  --tint-c: 0.012;
  --chrome-bg: #0F1941;
  --chrome-indicator: #FFB511;
  --radius: 4px;
  --radius-lg: 6px;

  /* ---- font: set by fonts/<font>.css; this is only the fallback */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* ---- neutrals: greys carrying a trace of the palette hue */
  --n-0:   #FFFFFF;
  --n-25:  oklch(0.977 calc(var(--tint-c) * 0.45) var(--tint-h));
  --n-50:  oklch(0.962 calc(var(--tint-c) * 0.55) var(--tint-h));
  --n-100: oklch(0.932 calc(var(--tint-c) * 0.65) var(--tint-h));
  --n-200: oklch(0.894 calc(var(--tint-c) * 0.75) var(--tint-h));
  --n-300: oklch(0.836 calc(var(--tint-c) * 0.9) var(--tint-h));
  --n-400: oklch(0.712 var(--tint-c) var(--tint-h));
  --n-500: oklch(0.604 var(--tint-c) var(--tint-h));
  --n-600: oklch(0.520 var(--tint-c) var(--tint-h));
  --n-700: oklch(0.430 var(--tint-c) var(--tint-h));
  --n-800: oklch(0.332 var(--tint-c) var(--tint-h));
  --n-900: oklch(0.238 calc(var(--tint-c) * 1.15) var(--tint-h));

  /* ---- semantic surfaces & text */
  --bg: var(--n-25);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --border-subtle: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-900);
  --text-2: var(--n-700);
  --text-muted: var(--n-600);   /* 4.9:1 on white: still AA */
  --text-faint: var(--n-500);   /* icons, placeholders, disabled */

  /* ---- accent derivatives */
  --accent-hover: color-mix(in oklab, var(--accent), #000 12%);
  --accent-active: color-mix(in oklab, var(--accent), #000 20%);
  --accent-soft: color-mix(in oklab, var(--accent) 9%, #FFF);
  --accent-soft-2: color-mix(in oklab, var(--accent) 17%, #FFF);
  --accent-line: color-mix(in oklab, var(--accent) 45%, #FFF);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);

  /* ---- chrome (sidebar) derivatives, for dark chromes; Paper overrides them */
  --chrome-fg: color-mix(in oklab, #FFF 76%, var(--chrome-bg));
  --chrome-fg-strong: #FFFFFF;
  --chrome-muted: color-mix(in oklab, #FFF 48%, var(--chrome-bg));
  --chrome-hover: color-mix(in oklab, #FFF 8%, var(--chrome-bg));
  --chrome-active-bg: color-mix(in oklab, #FFF 14%, var(--chrome-bg));
  --chrome-active-fg: #FFFFFF;
  --chrome-line: color-mix(in oklab, #FFF 10%, var(--chrome-bg));
  --chrome-border: var(--chrome-bg);
  --flyout-bg: var(--chrome-bg);

  /* ---- top bar */
  --topbar-bg: var(--surface);
  --topbar-fg: var(--text-2);

  /* ---- status colours: fixed across palettes (meaning must not change per app).
          The base value is text-safe on white (≥ 5:1); -solid is for fills. */
  --success: #1D7A46;   --success-solid: #1D7A46;   --success-ink: #FFF;
  --info:    #1F68AE;   --info-solid:    #1F68AE;   --info-ink: #FFF;
  --warning: #9A5B00;   --warning-solid: #F2A900;   --warning-ink: #2B1D00;
  --danger:  #C0352E;   --danger-solid:  #C0352E;   --danger-ink: #FFF;
  --success-soft: color-mix(in oklab, var(--success) 9%, #FFF);
  --info-soft:    color-mix(in oklab, var(--info) 9%, #FFF);
  --warning-soft: color-mix(in oklab, var(--warning-solid) 16%, #FFF);
  --danger-soft:  color-mix(in oklab, var(--danger) 9%, #FFF);
  --success-line: color-mix(in oklab, var(--success) 35%, #FFF);
  --info-line:    color-mix(in oklab, var(--info) 35%, #FFF);
  --warning-line: color-mix(in oklab, var(--warning-solid) 60%, #FFF);
  --danger-line:  color-mix(in oklab, var(--danger) 35%, #FFF);

  /* ---- categorical palette for charts, calendars, legends.
          Fixed order, validated for colour-vision deficiency (adjacent pairs).
          Never cycle beyond 8 for identity: fold extras into "Other" (--cat-other). */
  --cat-1: #2A78D6;  /* blue    */
  --cat-2: #EB6834;  /* orange  */
  --cat-3: #1BAF7A;  /* aqua    */
  --cat-4: #EDA100;  /* yellow  */
  --cat-5: #E87BA4;  /* magenta */
  --cat-6: #008300;  /* green   */
  --cat-7: #6250D6;  /* violet  */
  --cat-8: #E34948;  /* red     */
  --cat-other: var(--n-400);

  /* ---- elevation */
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-md: 0 4px 12px rgb(16 24 40 / 0.08), 0 1px 3px rgb(16 24 40 / 0.06);
  --shadow-lg: 0 16px 40px rgb(16 24 40 / 0.16), 0 2px 8px rgb(16 24 40 / 0.08);

  /* ---- sizes & density */
  --font-size: 14px;
  --font-size-sm: 13px;
  --font-size-xs: 12px;
  --control-h: 32px;
  --cell-y: 8px;
  --cell-x: 10px;
  --sidebar-w: 232px;
  --sidebar-mini-w: 60px;
  --topbar-h: 56px;
  --rightbar-w: 280px;
  --content-pad: 24px;
  --gutter: 20px;
  --icon-stroke: 2;

  color-scheme: light;
}


/* ==========================================================================
   2. Base & typography
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--font-size);
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1, .h1 { font-size: 26px; }
h2, .h2 { font-size: 22px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 13px; }
h1, h2, h3 { margin: 0 0 12px; }
h4, h5, h6 { margin: 0 0 8px; }
:is(h1, h2, h3, h4, h5, h6) :is(small, .small) { font-weight: 400; color: var(--text-muted); }

p { margin: 0 0 10px; }
small, .small { font-size: 85%; }
strong, b { font-weight: 600; }
.lead { font-size: 16px; font-weight: 400; color: var(--text-2); }

a { color: var(--accent-text); text-decoration: none; transition: color .12s ease; }
a:hover, a:focus { color: color-mix(in oklab, var(--accent-text), #000 22%); text-decoration: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft-2); color: var(--text); }

hr { border-top: 1px solid var(--border-subtle); margin: 16px 0; }

code, kbd, pre, samp { font-family: var(--font-mono); }
code {
  font-size: 0.88em;
  padding: 1px 5px;
  color: var(--text);
  background: var(--n-50);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
}
kbd {
  font-size: 0.85em;
  padding: 1px 5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  box-shadow: none;
}
pre {
  font-size: 12.5px;
  line-height: 1.55;
  padding: 12px 14px;
  color: var(--text);
  background: var(--n-25);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
pre code { padding: 0; background: none; border: 0; font-size: inherit; }
mark, .mark { padding: 0 2px; background: color-mix(in oklab, var(--warning-solid) 32%, #FFF); border-radius: 2px; color: inherit; }
blockquote { padding: 4px 16px; margin: 0 0 16px; font-size: inherit; border-left: 3px solid var(--border); color: var(--text-2); }
blockquote footer { background: none; position: static; padding: 0; border: 0; }
dt { font-weight: 600; }

.text-muted { color: var(--text-muted); }
.text-primary { color: var(--accent-text); }
.text-success { color: var(--success); }
.text-info { color: var(--info); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.bg-primary { background-color: var(--accent); color: var(--accent-ink); }
.bg-success { background-color: var(--success-soft); }
.bg-info { background-color: var(--info-soft); }
.bg-warning { background-color: var(--warning-soft); }
.bg-danger { background-color: var(--danger-soft); }

/* Grid: one consistent gutter (Bootstrap's 30px is too loose for back-office screens) */
.row { margin-left: calc(var(--gutter) / -2); margin-right: calc(var(--gutter) / -2); }
[class^="col-"], [class*=" col-"] { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); }
.container, .container-fluid { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); }


/* ==========================================================================
   3. Shell
   Markup (unchanged):
     body[.mini-navbar][.right-sidebar]
       #page-wrapper
         nav#side-menu.navbar-static-side > #sidebar-collapse > #logo-element + ul.nav
         nav.navbar.navbar-static-top
         #page-content > .title-header + rows ... + footer
         .sidebar-right > #right-sidebar-id
   ========================================================================== */
body { --sidebar-now: var(--sidebar-w); --rightbar-now: 0px; }
body.mini-navbar { --sidebar-now: var(--sidebar-mini-w); }
body.right-sidebar { --rightbar-now: var(--rightbar-w); }

#page-wrapper {
  display: grid;
  grid-template-columns: var(--sidebar-now) minmax(0, 1fr) var(--rightbar-now);
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "side top   top"
    "side main  right";
  min-height: 100vh;
  width: 100%;
  overflow-x: clip;            /* not "hidden": keeps position:sticky working */
}

/* ---- Sidebar ------------------------------------------------------------ */
#side-menu.navbar-static-side {
  grid-area: side;
  position: relative;
  z-index: 30;
  width: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--chrome-border);
  border-radius: 0;
  background: var(--chrome-bg);
  color: var(--chrome-fg);
}
#sidebar-collapse {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--chrome-line) transparent;
}

#logo-element {
  display: flex;
  align-items: center;
  width: auto;
  height: var(--topbar-h);
  margin: 0;
  padding: 0 14px;
  background: none;
  border-bottom: 1px solid var(--chrome-line);
}
#logo-element .logo { display: flex; align-items: center; padding: 0; line-height: 1; }
#logo-element img { display: block; max-height: 30px; width: auto; }

#side-menu .nav { margin: 0; padding: 8px; }
#side-menu .sidebar-header {
  padding: 14px 10px 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--chrome-muted);
}

#sidebar-collapse > .nav > li { position: relative; margin: 1px 0; border-radius: var(--radius); }
#sidebar-collapse > .nav > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--chrome-fg);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  background: transparent;
  transition: background-color .12s ease, color .12s ease;
}
#sidebar-collapse > .nav > li > a > :is(i, .icon, .fa, .fas, .far) {
  flex: none;
  width: 18px;
  margin: 0;
  font-size: 16px;
  text-align: center;
  opacity: 0.92;
}
#sidebar-collapse > .nav > li > a > .icon { height: 18px; }
#sidebar-collapse > .nav > li > a:hover,
#sidebar-collapse > .nav > li > a:focus-visible {
  background: var(--chrome-hover);
  color: var(--chrome-fg-strong);
}
#sidebar-collapse > .nav > li > a:focus-visible { outline: 2px solid var(--chrome-indicator); outline-offset: -2px; }
#sidebar-collapse > .nav > li.selected > a {
  background: var(--chrome-active-bg);
  color: var(--chrome-active-fg);
  font-weight: 600;
}
/* active marker: a short bar at the sidebar's left edge */
#sidebar-collapse > .nav > li.selected > a::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  border-radius: 0 2px 2px 0;
  background: var(--chrome-indicator);
}
/* submenu chevron (drawn in CSS; the old fa-angle-double-right span is hidden) */
#sidebar-collapse > .nav > li > a > .fa-angle-double-right { display: none; }
#sidebar-collapse > .nav > li > a:has(+ .nav-second-level)::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 2px 2px auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.7;
  transition: transform .15s ease;
}
#sidebar-collapse > .nav > li.active > a:has(+ .nav-second-level)::after { transform: rotate(45deg); margin-bottom: 4px; }

#sidebar-collapse .nav-second-level { padding: 2px 0 6px; margin: 0; background: none; }
#sidebar-collapse .nav-second-level > li > a {
  position: relative;
  display: block;
  padding: 6px 10px 6px 38px;
  margin: 0;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.35;
  color: var(--chrome-muted);
  background: none;
  box-shadow: none;
}
#sidebar-collapse .nav-second-level > li > a:hover,
#sidebar-collapse .nav-second-level > li > a:focus-visible { color: var(--chrome-fg-strong); background: var(--chrome-hover); margin: 0; }
#sidebar-collapse .nav-second-level > li.active > a { color: var(--chrome-active-fg); font-weight: 600; margin: 0; box-shadow: none; }
#sidebar-collapse .nav-second-level > li.active > a::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--chrome-indicator);
}

/* ---- Mini sidebar (body.mini-navbar) ------------------------------------
   Icons only; hovering an item shows its label and submenu as a flyout. */
body.mini-navbar #sidebar-collapse { position: static; max-height: none; overflow: visible; }
body.mini-navbar #logo-element { justify-content: center; padding: 0; }
body.mini-navbar #logo-element img { max-height: 28px; max-width: 36px; }
body.mini-navbar #side-menu .nav { padding: 8px 8px; }
body.mini-navbar #side-menu .sidebar-header { display: none; }
body.mini-navbar #sidebar-collapse > .nav > li > a {
  justify-content: center;
  width: 44px;
  height: 40px;
  min-height: 0;
  padding: 0;
  margin: 0 auto;
}
body.mini-navbar #sidebar-collapse > .nav > li > a > :is(i, .icon, .fa, .fas, .far) { width: 18px; font-size: 17px; }
body.mini-navbar #sidebar-collapse > .nav > li > a::after { display: none; }
body.mini-navbar #sidebar-collapse > .nav > li > a > .nav-label { display: none; }
body.mini-navbar #sidebar-collapse .nav-second-level { display: none; }

/* flyout: label */
body.mini-navbar #sidebar-collapse > .nav > li:hover > a > .nav-label,
body.mini-navbar #sidebar-collapse > .nav > li > a:focus-visible > .nav-label {
  display: flex;
  align-items: center;
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  z-index: 41;
  height: 40px;
  min-width: 200px;
  padding: 0 14px;
  white-space: nowrap;
  background: var(--flyout-bg);
  color: var(--chrome-fg-strong);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--chrome-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body.mini-navbar #sidebar-collapse > .nav > li:has(> .nav-second-level):hover > a > .nav-label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: var(--chrome-line);
}
/* flyout: submenu, right under the label */
body.mini-navbar #sidebar-collapse > .nav > li:hover > .nav-second-level {
  display: block;
  position: absolute;
  left: calc(100% + 10px);
  top: 40px;
  z-index: 40;
  min-width: 200px;
  height: auto !important;     /* the collapse plugin may leave an inline height */
  padding: 4px;
  background: var(--flyout-bg);
  border: 1px solid var(--chrome-line);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body.mini-navbar #sidebar-collapse > .nav > li:hover > .nav-second-level > li > a { padding: 7px 12px 7px 22px; color: var(--chrome-fg); }
body.mini-navbar #sidebar-collapse > .nav > li:hover > .nav-second-level > li.active > a::before { left: 9px; }
/* invisible bridge so the pointer can travel from the icon to the flyout */
body.mini-navbar #sidebar-collapse > .nav > li:hover::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 12px;
  height: 40px;
}

/* ---- Top bar --------------------------------------------------------------
   Items keep their old float order: the first item in the markup is rightmost. */
.navbar-static-top {
  grid-area: top;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 4px;
  height: var(--topbar-h);
  min-height: 0;
  margin: 0;
  padding: 0 16px 0 20px;
  background: var(--topbar-bg);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--topbar-fg);
}
.navbar-static-top::before, .navbar-static-top::after { display: none; }
.navbar-static-top > .logotypefull {
  order: 99;
  margin: 0 auto 0 0;
  float: none;
  display: flex;
  align-items: center;
  min-width: 0;
}
.navbar-static-top > .logotypefull img { display: block; height: 24px; width: auto; }
.navbar-static-top > .btn-group,
.navbar-static-top > #toggle { float: none; display: flex; }
.navbar-static-top .btn.btn-main,
.navbar-static-top .navbar-top-icons,
.navbar-static-top .reveal-rightsidebar {
  float: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: var(--topbar-fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: none;
}
.navbar-static-top .btn.btn-main:hover,
.navbar-static-top .btn.btn-main:focus-visible,
.navbar-static-top .open > .btn.btn-main {
  color: var(--text);
  background: var(--n-50);
  border-color: var(--border);
}
.navbar-static-top .btn .icon { width: 18px; height: 18px; }
.navbar-static-top .dropdown-menu { left: auto; right: 0; margin-top: 6px; }
body.right-sidebar .reveal-rightsidebar :is(.icon, i) { transform: scaleX(-1); }
body.right-sidebar .reveal-rightsidebar {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 25%, #FFF);
}
.navbar-static-top .separator { width: 1px; height: 24px; margin: 0 6px; background: var(--border); }

/* ---- Right sidebar --------------------------------------------------------- */
.sidebar-right {
  grid-area: right;
  display: none;
  position: relative;
  width: auto;
  margin: 0;
  color: var(--text);
  background: var(--surface);
  border-left: 1px solid var(--border);
}
body.right-sidebar .sidebar-right { display: block; position: relative; width: auto; margin: 0; }
#right-sidebar-id {
  position: sticky;
  top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 8px 0 16px;
  scrollbar-width: thin;
}
.right-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  max-height: none;
  padding: 14px 18px 6px;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.right-sidebar-header :is(i, .icon) { padding: 0; font-size: 14px; color: var(--text-faint); }
.right-sidebar-header .sidebar-header-text { padding: 0; font-size: inherit; }
.right-sidebar-section,
body.right-sidebar .right-sidebar-section {
  margin: 0;
  padding: 4px 18px 12px;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-subtle);
}
.right-sidebar-section p { display: flex; gap: 8px; margin: 0 0 6px; }
.right-sidebar-section p > :is(i, .icon) { flex: none; margin: 3px 0 0; color: var(--success); }

/* ---- Content area ------------------------------------------------------- */
#page-content {
  grid-area: main;
  position: relative !important;   /* legacy pages set it inline-ish via old CSS */
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - var(--topbar-h));
  height: auto;
  margin: 0;
  padding: 20px var(--content-pad) 0;
  background: var(--bg);
}
.gray-bg { background-color: var(--bg); }
.white-bg { background-color: var(--surface); }
#page-content > .row { flex: none; }

/* Page header — compact: icon tile, breadcrumb above the title.
   Same markup as before: .title-header > i + h2 + ol.breadcrumb */
.title-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon crumb   actions"
    "icon title   actions";
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  min-height: 0;
  margin: -20px calc(var(--content-pad) * -1) 20px;
  padding: 16px var(--content-pad);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.title-header > :is(i, .icon, .fa, .fas, .far) {
  grid-area: icon;
  float: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  font-size: 19px;
  line-height: 42px;
  text-align: center;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  transform: none;
}
.title-header > .icon { padding: 10px; box-sizing: border-box; }
.title-header h2, .title-header h1 {
  grid-area: title;
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.title-header .breadcrumb { grid-area: crumb; padding: 0; }
.title-header .page-actions { grid-area: actions; display: flex; gap: 8px; align-items: center; }

/* Footer: in the flow, at the bottom of short pages */
#page-content > footer {
  position: static;
  z-index: auto;
  margin-top: auto;
  padding: 16px 0 18px;
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border-top: 1px solid var(--border-subtle);
}
#page-content > footer a { color: var(--text-2); }
#page-content > .row:last-of-type { margin-bottom: 8px; }

/* Scroll-to-top */
#to-top {
  position: fixed;
  right: calc(16px + var(--rightbar-now));
  bottom: 16px;
  left: auto;
  z-index: 102;
  display: none;              /* randstad.js fades it in after 150px of scroll */
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 16px;
  line-height: 36px;
  text-align: center;
  color: var(--surface);
  background: color-mix(in oklab, var(--n-900) 82%, transparent);
  border-radius: var(--radius);
  opacity: 1;
  box-shadow: var(--shadow-md);
}
#to-top:hover, #to-top:focus-visible { color: #FFF; background: var(--n-900); }


/* ==========================================================================
   4. Panels & KPI cards
   Markup: .panel > .panel-heading > (.panel-options.pull-right) + i + .panel-title
   ========================================================================== */
.panel {
  position: relative;
  margin: 0 0 var(--gutter);
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px 0 16px;
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.panel-heading:empty { display: none; }
.panel-heading > :is(i, .icon, .fa, .fas, .far) { flex: none; margin: 0; font-size: 14px; color: var(--text-faint); }
.panel-heading .panel-title,
.panel-heading > :is(h1, h2, h3, h4, h5, h6) {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  margin: 0;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.panel-heading .panel-title > a { color: inherit; }
.panel-heading .panel-title :is(small, .small) { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.panel-options {
  order: 9;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 auto;
  line-height: 1;
}
.panel-options .btn,
.panel-options button.btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  font-size: 13px;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
}
.panel-options .btn:hover, .panel-options .btn:focus-visible { color: var(--text); background: var(--n-50); }
.panel-options .btn .icon { width: 16px; height: 16px; }
.panel-options .form-control, .panel-options .btn-group { width: auto; }
.panel.minimized > .panel-heading { border-bottom-color: transparent; border-radius: var(--radius-lg); }
/* with SVG icons, use one chevron-up icon; it flips when the panel is minimised */
.panel .minimise-panel .icon { transition: transform .15s ease; }
.panel.minimized .minimise-panel .icon { transform: rotate(180deg); }
/* Font Awesome fallback (until the icon migration) */
.panel .minimise-panel .fa-minus::before { content: "\f068"; }
.panel.minimized .minimise-panel .fa-minus::before { content: "\f067"; }

.panel-body { padding: 16px; }
.panel-body::before, .panel-body::after { content: " "; display: table; }
.panel-body > .table:last-child,
.panel-body > .table-responsive:last-child > .table { margin-bottom: 0; }
.panel > .table, .panel > .table-responsive > .table { margin-bottom: 0; }
.panel > .table:last-child, .panel > .table-responsive:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.panel-body.p-0, .panel-body.no-padding { padding: 0; }
.panel-footer {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--n-25);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.panel-group .panel { border-radius: var(--radius-lg); }
.panel-group .panel + .panel { margin-top: 6px; }
.panel-fullsize {
  position: fixed;
  inset: 0;
  z-index: 1040;
  width: auto;
  height: auto;
  margin: 0;
  overflow: auto;
  border-radius: 0;
}
.panel-noborder, .panel.panel-noborder { border: 0; box-shadow: none; }

/* contextual panels: tinted heading, coloured hairline */
.panel-primary { border-color: var(--accent-line); }
.panel-primary > .panel-heading { background: var(--accent-soft); color: var(--accent-text); border-bottom-color: var(--accent-line); }
.panel-success { border-color: var(--success-line); }
.panel-success > .panel-heading { background: var(--success-soft); color: var(--success); border-bottom-color: var(--success-line); }
.panel-info { border-color: var(--info-line); }
.panel-info > .panel-heading { background: var(--info-soft); color: var(--info); border-bottom-color: var(--info-line); }
.panel-warning { border-color: var(--warning-line); }
.panel-warning > .panel-heading { background: var(--warning-soft); color: var(--warning); border-bottom-color: var(--warning-line); }
.panel-danger { border-color: var(--danger-line); }
.panel-danger > .panel-heading { background: var(--danger-soft); color: var(--danger); border-bottom-color: var(--danger-line); }
:is(.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger) > .panel-heading :is(.panel-title, i, .icon) { color: inherit; }

/* ---- KPI cards ----------------------------------------------------------------
   Current dashboard markup, no change needed:
     .panel.warm-blue-bg > .panel-body > .icon-bg > i  +  .text-center > h4
                         > .panel-footer.panel-footer-link > a
   The colour class only picks the tone of the icon tile and the link. */
.warm-blue-bg { --tone: var(--cat-1); }
.purple-bg    { --tone: #2E8FA3; }
.red-bg       { --tone: var(--danger); }
.orange-bg    { --tone: var(--cat-2); }
.yellow-bg    { --tone: var(--warning-solid); }
.green-bg     { --tone: var(--success); }
.violet-bg    { --tone: var(--cat-7); }
.gray-tone    { --tone: var(--n-500); }

/* outside panels these classes stay solid fills (legacy behaviour) */
:is(.warm-blue-bg, .purple-bg, .red-bg, .orange-bg, .yellow-bg, .green-bg, .violet-bg):not(.panel) {
  background-color: var(--tone);
  color: #FFF;
}

.panel:is(.warm-blue-bg, .purple-bg, .red-bg, .orange-bg, .yellow-bg, .green-bg, .violet-bg, .gray-tone, .kpi) {
  --tone-text: color-mix(in oklab, var(--tone), #000 24%);
  color: var(--text);
  background: var(--surface);
}
.panel:is(.warm-blue-bg, .purple-bg, .red-bg, .orange-bg, .yellow-bg, .green-bg, .violet-bg, .gray-tone, .kpi) > .panel-body {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 16px 16px 16px 72px;
}
.panel .icon-bg {
  position: absolute;
  left: 16px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  font-size: 18px;
  color: var(--tone-text, var(--accent-text));
  background: color-mix(in oklab, var(--tone, var(--accent)) 12%, #FFF);
  border-radius: var(--radius-lg);
  opacity: 1;
}
.panel .icon-bg .icon { width: 20px; height: 20px; }
.panel:is(.warm-blue-bg, .purple-bg, .red-bg, .orange-bg, .yellow-bg, .green-bg, .violet-bg, .gray-tone, .kpi) .text-center { text-align: left; }
.panel:is(.warm-blue-bg, .purple-bg, .red-bg, .orange-bg, .yellow-bg, .green-bg, .violet-bg, .gray-tone, .kpi) :is(h3, h4) {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* optional richer markup (for later): .kpi-value + .kpi-label + .kpi-delta */
.kpi-value { display: block; font-size: 24px; font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi-label { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.kpi-delta { font-size: 12px; font-weight: 600; }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }

.panel-footer-link {
  padding: 8px 16px;
  text-align: left;
  background: var(--n-25);
}
.panel-footer-link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tone-text, var(--accent-text));
}
.panel-footer-link a::after { content: "\2192"; transition: transform .12s ease; }
.panel-footer-link a:hover::after { transform: translateX(2px); }
.panel-footer-link a:hover, .panel-footer-link a:focus { color: var(--text); }


/* ==========================================================================
   5. Buttons
   Every variant is two variables: --btn-bg and --btn-fg.
   ========================================================================== */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--n-50);
  --btn-hover-border: var(--n-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 18px;
  color: var(--btn-fg);
  background: var(--btn-bg);
  background-image: none;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  box-shadow: none;
  text-shadow: none;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn:hover, .btn:focus, .btn.focus {
  color: var(--btn-fg);
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  outline: 0;
  text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:active, .btn.active, .open > .dropdown-toggle.btn {
  color: var(--btn-fg);
  background: var(--btn-active-bg, var(--btn-hover-bg));
  border-color: var(--btn-hover-border);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
  background-image: none;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
.btn .icon { width: 1.15em; height: 1.15em; margin: 0 -1px; }
.btn .caret { margin-left: 2px; }
.btn-block { display: flex; width: 100%; }

.btn-default { --btn-bg: var(--surface); }

.btn-primary, .btn-main {
  --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-border: var(--accent);
  --btn-hover-bg: var(--accent-hover); --btn-hover-border: var(--accent-hover); --btn-active-bg: var(--accent-active);
}
.btn-success {
  --btn-bg: var(--success-solid); --btn-fg: var(--success-ink); --btn-border: var(--success-solid);
  --btn-hover-bg: color-mix(in oklab, var(--success-solid), #000 14%); --btn-hover-border: var(--btn-hover-bg);
}
.btn-info {
  --btn-bg: var(--info-solid); --btn-fg: var(--info-ink); --btn-border: var(--info-solid);
  --btn-hover-bg: color-mix(in oklab, var(--info-solid), #000 14%); --btn-hover-border: var(--btn-hover-bg);
}
.btn-warning {
  --btn-bg: var(--warning-solid); --btn-fg: var(--warning-ink); --btn-border: color-mix(in oklab, var(--warning-solid), #000 8%);
  --btn-hover-bg: color-mix(in oklab, var(--warning-solid), #000 9%); --btn-hover-border: var(--btn-hover-bg);
}
.btn-danger {
  --btn-bg: var(--danger-solid); --btn-fg: var(--danger-ink); --btn-border: var(--danger-solid);
  --btn-hover-bg: color-mix(in oklab, var(--danger-solid), #000 14%); --btn-hover-border: var(--btn-hover-bg);
}
.btn-link {
  --btn-bg: transparent; --btn-fg: var(--accent-text); --btn-border: transparent;
  --btn-hover-bg: transparent; --btn-hover-border: transparent;
  font-weight: 500;
}
.btn-link:hover, .btn-link:focus { text-decoration: underline; text-underline-offset: 2px; }
/* quiet button: no border until hover (toolbars, table actions) */
.btn-ghost {
  --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--text-2);
  --btn-hover-bg: var(--n-50); --btn-hover-border: var(--border);
}
/* outline variants (existing class: .btn-alt) */
.btn-alt { --btn-hover-bg: var(--btn-bg); }
.btn-alt:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger) {
  --btn-fg: var(--alt-fg); --btn-bg: var(--surface); --btn-border: var(--alt-line);
  --btn-hover-bg: var(--alt-soft); --btn-hover-border: var(--alt-fg);
}
.btn-alt.btn-primary { --alt-fg: var(--accent-text); --alt-line: var(--accent-line); --alt-soft: var(--accent-soft); }
.btn-alt.btn-success { --alt-fg: var(--success); --alt-line: var(--success-line); --alt-soft: var(--success-soft); }
.btn-alt.btn-info    { --alt-fg: var(--info); --alt-line: var(--info-line); --alt-soft: var(--info-soft); }
.btn-alt.btn-warning { --alt-fg: var(--warning); --alt-line: var(--warning-line); --alt-soft: var(--warning-soft); }
.btn-alt.btn-danger  { --alt-fg: var(--danger); --alt-line: var(--danger-line); --alt-soft: var(--danger-soft); }
.btn-primary.btn-alt:hover, .btn-success.btn-alt:hover, .btn-info.btn-alt:hover,
.btn-warning.btn-alt:hover, .btn-danger.btn-alt:hover { color: var(--btn-fg); }

/* legacy colour buttons kept working, mapped to the palette */
.btn-blue   { --btn-bg: var(--cat-1); }
.btn-purple { --btn-bg: var(--cat-7); }
.btn-red    { --btn-bg: var(--danger-solid); }
.btn-green  { --btn-bg: var(--success-solid); }
.btn-orange { --btn-bg: var(--cat-2); }
.btn-pink   { --btn-bg: #C2477A; }
:is(.btn-blue, .btn-purple, .btn-red, .btn-green, .btn-orange, .btn-pink) {
  --btn-fg: #FFF; --btn-border: var(--btn-bg);
  --btn-hover-bg: color-mix(in oklab, var(--btn-bg), #000 14%); --btn-hover-border: var(--btn-hover-bg);
}
.btn-white { --btn-bg: var(--surface); }
.btn-rounded { border-radius: 999px; }
.btn-squared { border-radius: 0; }

.btn-lg, .btn-group-lg > .btn { padding: 9px 16px; font-size: 15px; line-height: 20px; border-radius: var(--radius); }
.btn-xl { padding: 11px 20px; font-size: 16px; line-height: 22px; }
.btn-sm, .btn-group-sm > .btn { padding: 4px 10px; font-size: 12.5px; line-height: 18px; border-radius: var(--radius); }
.btn-xs, .btn-group-xs > .btn { padding: 1px 7px; font-size: 12px; line-height: 18px; border-radius: calc(var(--radius) - 1px); }
.btn-icon { padding-left: 8px; padding-right: 8px; }
.btn-sm.btn-icon { padding-left: 6px; padding-right: 6px; }

/* groups: radius rules re-applied (our .btn radius overrides Bootstrap's group rules) */
.btn-group, .btn-group-vertical { line-height: inherit; }
.btn-group > .btn { float: left; }
.btn-group > .btn + .btn, .btn-group > .btn + .btn-group, .btn-group > .btn-group + .btn { margin-left: -1px; }
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active { z-index: 2; }
.btn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group { margin: 0; float: none; }
.btn-toolbar::before, .btn-toolbar::after { display: none; }
.btn-display .btn { margin: 0 4px 8px 0; }


/* ==========================================================================
   6. Forms
   ========================================================================== */
label, .control-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.form-group { margin-bottom: 14px; }
.form-horizontal .control-label { padding-top: 7px; line-height: 18px; }
.form-horizontal .form-group { margin-left: calc(var(--gutter) / -2); margin-right: calc(var(--gutter) / -2); }

.form-control {
  height: var(--control-h);
  padding: 5px 10px;
  font-size: var(--font-size-sm);
  line-height: 20px;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:hover { border-color: var(--n-400); }
.form-control:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: 0;
}
.form-control::placeholder { color: var(--text-faint); opacity: 1; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  color: var(--text-muted);
  background-color: var(--n-50);
  border-color: var(--border);
  opacity: 1;
}
.form-control[disabled] { cursor: not-allowed; }
textarea.form-control { height: auto; min-height: 76px; line-height: 1.5; padding-top: 7px; padding-bottom: 7px; resize: vertical; }
select.form-control:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px;
}
select.form-control[multiple] { height: auto; padding: 4px; }
select.form-control[multiple] option { padding: 3px 6px; border-radius: 3px; }
/* native date/time pickers (no plugin needed) */
input[type="date"].form-control, input[type="time"].form-control,
input[type="datetime-local"].form-control, input[type="month"].form-control { line-height: 20px; }
.form-control::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.form-control:hover::-webkit-calendar-picker-indicator { opacity: 0.9; }
input[type="search"].form-control { -webkit-appearance: none; }
input[type="file"] { font-size: var(--font-size-sm); }
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 5px 12px;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.input-sm, .form-group-sm .form-control { height: 28px; padding: 3px 8px; font-size: 12.5px; line-height: 20px; border-radius: var(--radius); }
.input-lg, .form-group-lg .form-control { height: 40px; padding: 8px 12px; font-size: 15px; line-height: 22px; border-radius: var(--radius); }
select.input-sm:not([multiple]) { padding-right: 26px; background-position: right 7px center; }

.help-block { margin: 5px 0 0; font-size: var(--font-size-xs); color: var(--text-muted); }
.form-control-static { min-height: 0; padding-top: 6px; padding-bottom: 6px; font-size: var(--font-size-sm); }
fieldset { min-width: 0; }
legend {
  margin-bottom: 14px;
  padding-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border-subtle);
}

/* validation states */
.has-error   { --state: var(--danger);  --state-soft: var(--danger-soft); }
.has-warning { --state: var(--warning); --state-soft: var(--warning-soft); }
.has-success { --state: var(--success); --state-soft: var(--success-soft); }
:is(.has-error, .has-warning, .has-success) .form-control { border-color: var(--state); box-shadow: none; }
:is(.has-error, .has-warning, .has-success) .form-control:focus { border-color: var(--state); box-shadow: 0 0 0 3px color-mix(in oklab, var(--state) 22%, transparent); }
:is(.has-error, .has-warning, .has-success) :is(.help-block, .control-label, .radio, .checkbox, .radio-inline, .checkbox-inline, .form-control-feedback) { color: var(--state); }
:is(.has-error, .has-warning, .has-success) .input-group-addon { color: var(--state); background: var(--state-soft); border-color: var(--state); }
label.error, .error-message { display: block; margin-top: 5px; font-size: var(--font-size-xs); font-weight: 500; color: var(--danger); }
.form-control.error { border-color: var(--danger); }

/* input groups (radius rules re-applied) */
.input-group-addon {
  padding: 5px 10px;
  font-size: var(--font-size-sm);
  line-height: 20px;
  color: var(--text-muted);
  background: var(--n-50);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.input-group .form-control:first-child, .input-group-addon:first-child,
.input-group-btn:first-child > .btn, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.input-group .form-control:last-child, .input-group-addon:last-child,
.input-group-btn:last-child > .btn, .input-group-btn:first-child > .btn:not(:first-child) {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; }
.input-group-btn > .btn { height: var(--control-h); }
.input-group .form-control:focus { z-index: 3; }

/* checkboxes & radios: native controls tinted with the accent (no plugin) */
input[type="checkbox"], input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  vertical-align: -2px;
  cursor: pointer;
}
.checkbox label, .radio label, .checkbox-inline, .radio-inline {
  min-height: 20px;
  padding-left: 22px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}
.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"],
.radio input[type="radio"], .radio-inline input[type="radio"] { margin-left: -22px; margin-top: 3px; }
.checkbox, .radio { margin-top: 6px; margin-bottom: 6px; }

/* awesome-bootstrap-checkbox markup (div.radio.radio-success > input + label):
   restyled here, works with or without the plugin's own CSS file */
:root :is(.checkbox, .radio):has(> input + label) { position: relative; padding-left: 24px; }
:root :is(.checkbox, .radio):has(> input + label) > input {
  position: absolute; left: 0; top: 2px; z-index: 1;
  width: 16px; height: 16px; margin: 0; opacity: 0; cursor: pointer;
}
:root :is(.checkbox, .radio):has(> input + label) > label {
  position: relative; display: inline-block; min-height: 20px; padding-left: 0;
  font-weight: 400; color: var(--text); cursor: pointer;
}
:root :is(.checkbox, .radio):has(> input + label) > label::before {
  content: ""; position: absolute; left: -24px; top: 2px; width: 16px; height: 16px; margin: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
:root .radio:has(> input + label) > label::before { border-radius: 50%; }
:root :is(.checkbox, .radio):has(> input + label) > label::after {
  content: ""; position: absolute; margin: 0; padding: 0; font-family: inherit;
}
:root .radio:has(> input + label) > label::after {
  left: -20px; top: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--box-tone, var(--accent)); transform: scale(0); transition: transform .12s ease;
}
:root .radio:has(> input + label) > input:checked + label::before { border-color: var(--box-tone, var(--accent)); }
:root .radio:has(> input + label) > input:checked + label::after { transform: scale(1); }
:root .checkbox:has(> input + label) > label::after {
  left: -24px; top: 2px; width: 16px; height: 16px; background: transparent;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 11px no-repeat;
}
:root .checkbox:has(> input + label) > input:checked + label::before { background: var(--box-tone, var(--accent)); border-color: var(--box-tone, var(--accent)); }
:root .checkbox:has(> input + label) > input:checked + label::after { background: var(--box-ink, var(--accent-ink)); }
:root .checkbox.checkbox-circle:has(> input + label) > label::before { border-radius: 50%; }
:root :is(.checkbox, .radio):has(> input + label) > input:focus + label::before { outline: none; }
:root :is(.checkbox, .radio):has(> input + label) > input:focus-visible + label::before { box-shadow: var(--focus-ring); border-color: var(--box-tone, var(--accent)); }
:root :is(.checkbox, .radio):has(> input + label) > input:disabled + label { opacity: 0.55; cursor: not-allowed; }
:root :is(.checkbox, .radio):has(> input + label) > input:disabled + label::before { background: var(--n-50); }
:root :is(.checkbox, .radio):has(> input + label):hover > input:not(:checked):not(:disabled) + label::before { border-color: var(--n-400); }
:is(.checkbox-success, .radio-success) { --box-tone: var(--success); --box-ink: #FFF; }
:is(.checkbox-info, .radio-info)       { --box-tone: var(--info); --box-ink: #FFF; }
:is(.checkbox-warning, .radio-warning) { --box-tone: var(--warning-solid); --box-ink: var(--warning-ink); }
:is(.checkbox-danger, .radio-danger)   { --box-tone: var(--danger); --box-ink: #FFF; }
:is(.checkbox-primary, .radio-primary) { --box-tone: var(--accent); --box-ink: var(--accent-ink); }
:root .radio.radio-inline:has(> input + label), :root .checkbox.checkbox-inline:has(> input + label) { display: inline-block; margin: 0 16px 6px 0; }

/* switch (existing markup: label.switch > input + span.slider[.round]) */
.switch { position: relative; display: inline-block; flex: none; width: 36px; height: 20px; margin: 0; vertical-align: middle; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; z-index: 1; cursor: pointer; }
.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: var(--n-300);
  border-radius: 999px;
  transition: background-color .15s ease;
}
.slider::before {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  background: #FFF;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform .15s ease;
}
.switch input:checked + .slider { background-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:focus-visible + .slider { box-shadow: var(--focus-ring); }
.switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }
.switch.levelzero { width: 30px; height: 16px; }
.switch.levelzero .slider::before, .slider.levelzero::before { left: 2px; bottom: 2px; width: 12px; height: 12px; }
.switch.levelzero input:checked + .slider::before { transform: translateX(14px); }
.switch-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--text); cursor: pointer; }

.form-inline .form-control { margin-right: 6px; }
.form-inline .form-group { margin-right: 8px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 6px; }


/* ==========================================================================
   7. Tables
   Tuned for wide, dense data. Options (add to <table class="table ...">):
     .table-compact   tighter rows for very large tables
     .table-nowrap    no wrapping; pair with a scroll container
     .table-sticky    sticky header inside .table-scroll (or the page)
   Wrapper: .table-scroll = scroll container with a max height (--table-max-h)
   Cell helpers: .num (right-aligned figures), .col-actions, .cell-muted
   Row/cell states: Bootstrap's .danger .warning .success .info .active
   ========================================================================== */
.table {
  width: 100%;
  margin-bottom: 16px;
  font-size: var(--font-size-sm);
  color: var(--text);
  background: var(--surface);
  border-collapse: separate;        /* needed for sticky headers with borders */
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.table > thead > tr > th,
.table > thead > tr > td {
  padding: 8px var(--cell-x);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-2);
  text-align: left;
  vertical-align: bottom;
  background: var(--n-50);
  border-top: 0;
  border-bottom: 1px solid var(--border);
}
.table > tbody > tr > td, .table > tbody > tr > th,
.table > tfoot > tr > td, .table > tfoot > tr > th {
  padding: var(--cell-y) var(--cell-x);
  line-height: 1.45;
  vertical-align: top;
  border-top: 1px solid var(--border-subtle);
}
.table > tbody > tr:first-child > td, .table > tbody > tr:first-child > th { border-top: 0; }
.table > tbody > tr > th { font-weight: 600; }
.table > tfoot > tr > td, .table > tfoot > tr > th { font-weight: 600; background: var(--n-25); border-top: 1px solid var(--border); }
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th { border-top: 0; }
.table .table { background: transparent; }
.table :is(td, th).text-right, .table .num { text-align: right; }
.table .num { white-space: nowrap; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.table .cell-muted { color: var(--text-muted); }
.table td > .btn-group-xs, .table td > .btn-xs { vertical-align: top; }

.table-striped > tbody > tr:nth-of-type(odd) { background-color: color-mix(in oklab, var(--n-50) 55%, var(--surface)); }
.table-hover > tbody > tr:hover { background-color: color-mix(in oklab, var(--accent) 5%, var(--surface)); }

.table-bordered { border: 1px solid var(--border); border-radius: var(--radius); }
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td {
  border: 0;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.table-bordered > thead > tr > :is(th, td) { border-bottom-color: var(--border); }
.table-bordered > * > tr > :is(th, td):last-child { border-right: 0; }
.table-bordered > tbody > tr:last-child > :is(td, th) { border-bottom: 0; }
.table-bordered > thead > tr:first-child > :is(th, td):first-child { border-top-left-radius: var(--radius); }
.table-bordered > thead > tr:first-child > :is(th, td):last-child { border-top-right-radius: var(--radius); }

.table-condensed > * > tr > :is(th, td), .table-compact > * > tr > :is(th, td) { padding: 5px 8px; }
.table-compact { font-size: 12.5px; }
.table-compact > thead > tr > th { font-size: 11.5px; }
.table-nowrap > * > tr > :is(th, td) { white-space: nowrap; }
.borderless > * > tr > :is(td, th) { border: none; }

/* sticky header: inside .table-scroll, or against the top bar when the page scrolls */
.table-sticky > thead > tr > th { position: sticky; top: 0; z-index: 2; }
#page-content .table-sticky:not(.table-scroll .table-sticky) > thead > tr > th { top: var(--topbar-h); }
.table-scroll {
  max-height: var(--table-max-h, 70vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scrollbar-width: thin;
}
.table-scroll > .table { margin: 0; border: 0; }
.table-responsive { margin-bottom: 0; border: 0; }

/* row / cell states: tinted fill, dark text, a 3px marker on the left edge */
.table > * > tr > :is(td, th).active,   .table > * > tr.active > :is(td, th)   { --cell-tone: var(--n-500); --cell-fill: var(--n-50); }
.table > * > tr > :is(td, th).success,  .table > * > tr.success > :is(td, th)  { --cell-tone: var(--success); --cell-fill: var(--success-soft); }
.table > * > tr > :is(td, th).info,     .table > * > tr.info > :is(td, th)     { --cell-tone: var(--info); --cell-fill: var(--info-soft); }
.table > * > tr > :is(td, th).warning,  .table > * > tr.warning > :is(td, th)  { --cell-tone: var(--warning-solid); --cell-fill: var(--warning-soft); }
.table > * > tr > :is(td, th).danger,   .table > * > tr.danger > :is(td, th)   { --cell-tone: var(--danger); --cell-fill: var(--danger-soft); }
.table > * > tr > :is(td, th):is(.active, .success, .info, .warning, .danger),
.table > * > tr:is(.active, .success, .info, .warning, .danger) > :is(td, th) {
  background-color: var(--cell-fill);
}
.table > * > tr > :is(td, th):is(.success, .info, .warning, .danger) {
  color: color-mix(in oklab, var(--cell-tone), #000 38%);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cell-tone);
}
.table > * > tr:is(.active, .success, .info, .warning, .danger) > :is(td, th):first-child { box-shadow: inset 3px 0 0 var(--cell-tone); }
.table-hover > tbody > tr:is(.active, .success, .info, .warning, .danger):hover > :is(td, th) {
  background-color: color-mix(in oklab, var(--cell-fill), #000 4%);
}


/* ==========================================================================
   8. Navigation components
   ========================================================================== */
/* Breadcrumb */
.breadcrumb { padding: 0; margin: 0; font-size: var(--font-size-xs); background: none; border-radius: 0; color: var(--text-muted); }
.breadcrumb > li + li::before { content: "/"; padding: 0 7px; color: var(--n-400); }
.breadcrumb > li > a { color: var(--text-muted); }
.breadcrumb > li > a:hover { color: var(--accent-text); }
.breadcrumb > .active { color: var(--text-2); }

/* Tabs: underline style */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}
.nav-tabs::before, .nav-tabs::after { display: none; }
.nav-tabs > li { float: none; margin-bottom: -1px; }
.nav-tabs > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 9px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 18px;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus { color: var(--text); background: none; border-bottom-color: var(--border-strong); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: var(--text);
  font-weight: 600;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--accent);
}
.nav-tabs > li.disabled > a { color: var(--text-faint); }
.nav-tabs .badge { margin-left: 2px; }
.panel-heading .nav-tabs { align-self: flex-end; padding: 0; margin: 0 0 -1px; border-bottom: 0; }
.panel-heading .nav-tabs > li > a { padding: 12px 10px 11px; }
.panel-heading .nav-tabs > li.active > a,
.panel-heading .nav-tabs > li.active > a:hover,
.panel-heading .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--accent); background: none; }
.tab-content > .tab-pane { padding-top: 14px; }
.panel-body > .tab-content > .tab-pane { padding-top: 0; }
.modal-body .nav-tabs { margin: 0 0 16px; padding: 0 !important; }

/* Pills */
.nav-pills > li > a { padding: 6px 12px; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-2); border-radius: var(--radius); }
.nav-pills > li > a:hover { background: var(--n-50); color: var(--text); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: var(--accent-ink); background: var(--accent); }
.nav-pills > li + li { margin-left: 4px; }
.nav-stacked > li + li { margin: 2px 0 0; }
.nav > li > a:hover, .nav > li > a:focus { background-color: var(--n-50); }

/* Pagination */
.pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; border-radius: 0; }
.pagination > li { display: block; }
.pagination > li > a, .pagination > li > span {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding: 0 9px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pagination > li:first-child > :is(a, span), .pagination > li:last-child > :is(a, span) { border-radius: var(--radius); }
.pagination > li > :is(a, span):hover, .pagination > li > :is(a, span):focus { z-index: 2; color: var(--text); background: var(--n-50); border-color: var(--border-strong); }
.pagination > .active > :is(a, span), .pagination > .active > :is(a, span):hover, .pagination > .active > :is(a, span):focus {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent); cursor: default;
}
.pagination > .disabled > :is(a, span), .pagination > .disabled > :is(a, span):hover {
  color: var(--text-faint); background: var(--surface); border-color: var(--border-subtle); cursor: not-allowed;
}
.pagination-sm > li > :is(a, span) { min-width: 26px; height: 26px; padding: 0 7px; font-size: 12px; }
.pagination-lg > li > :is(a, span) { min-width: 36px; height: 36px; font-size: 14px; }
.pager li > :is(a, span) { padding: 5px 14px; color: var(--text-2); border-color: var(--border); border-radius: var(--radius); }

/* Dropdowns */
.dropdown-menu {
  min-width: 200px;
  margin-top: 4px;
  padding: 4px;
  font-size: var(--font-size-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.dropdown-menu > li { border: 0; }
.dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  color: var(--text);
  line-height: 18px;
  border-radius: var(--radius);
}
.dropdown-menu > li > a > :is(i, .icon) { flex: none; width: 16px; margin: 0; color: var(--text-faint); text-align: center; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: var(--text); background: var(--n-50); }
.dropdown-menu > li > a:hover > :is(i, .icon) { color: var(--text-2); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  color: var(--accent-text); background: var(--accent-soft); font-weight: 600;
}
.dropdown-menu > .active > a > :is(i, .icon) { color: var(--accent-text); }
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover { color: var(--text-faint); background: none; }
.dropdown-menu .divider { height: 1px; margin: 4px -4px; background: var(--border-subtle); }
.dropdown-header {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: 0;
}
.profile-dropdown .dropdown-header { padding: 8px 10px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); }
.dropdown-menu::before, .dropdown-menu::after { display: none; }
.dropdown-menu-right, .pull-right > .dropdown-menu { right: 0; left: auto; }
.caret { border-top-width: 4px; border-left-width: 4px; border-right-width: 4px; opacity: 0.7; }

/* List group */
.list-group { margin-bottom: 16px; border-radius: var(--radius-lg); }
.list-group-item {
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
}
.list-group-item:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
a.list-group-item, button.list-group-item { color: var(--text); }
a.list-group-item:hover, button.list-group-item:hover { background: var(--n-25); color: var(--text); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  z-index: 2; color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line);
}
.list-group-item-heading { font-size: 14px; font-weight: 600; }
.list-group-item-text { color: var(--text-muted); }
.panel > .list-group .list-group-item { border-left: 0; border-right: 0; border-radius: 0; }


/* ==========================================================================
   9. Feedback & overlays
   ========================================================================== */
/* Alerts */
.alert {
  --a-tone: var(--info); --a-fill: var(--info-soft); --a-line: var(--info-line);
  display: block;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: color-mix(in oklab, var(--a-tone), #000 35%);
  background: var(--a-fill);
  border: 1px solid var(--a-line);
  border-left: 3px solid var(--a-tone);
  border-radius: var(--radius);
}
.alert-success { --a-tone: var(--success); --a-fill: var(--success-soft); --a-line: var(--success-line); }
.alert-warning { --a-tone: var(--warning-solid); --a-fill: var(--warning-soft); --a-line: var(--warning-line); color: color-mix(in oklab, var(--warning), #000 30%); }
.alert-danger  { --a-tone: var(--danger); --a-fill: var(--danger-soft); --a-line: var(--danger-line); }
.alert .alert-link { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.alert h4 { margin-bottom: 4px; font-size: 14px; color: inherit; }
.alert > p + p { margin-top: 4px; }
.alert-dismissable, .alert-dismissible { padding-right: 36px; }
.alert-dismissable .close, .alert-dismissible .close { top: -1px; right: -22px; color: inherit; }
.alert > :is(.icon, i, .fa, .fas) { margin-right: 7px; }

/* close "×" */
.close {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted);
  text-shadow: none;
  opacity: 0.8;
}
.close:hover, .close:focus { color: var(--text); opacity: 1; }

/* Labels (status tags) — soft tint, readable text */
.label {
  --l-fg: var(--text-2); --l-bg: var(--n-100);
  display: inline-block;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--l-fg);
  background: var(--l-bg);
  border-radius: 3px;
  vertical-align: 1px;
  white-space: nowrap;
  text-shadow: none;
}
.label-default { --l-fg: var(--text-2); --l-bg: var(--n-100); }
.label-primary { --l-fg: var(--accent-text); --l-bg: var(--accent-soft-2); }
.label-success { --l-fg: color-mix(in oklab, var(--success), #000 15%); --l-bg: color-mix(in oklab, var(--success) 15%, #FFF); }
.label-info    { --l-fg: color-mix(in oklab, var(--info), #000 15%); --l-bg: color-mix(in oklab, var(--info) 14%, #FFF); }
.label-warning { --l-fg: color-mix(in oklab, var(--warning), #000 20%); --l-bg: color-mix(in oklab, var(--warning-solid) 26%, #FFF); }
.label-danger  { --l-fg: color-mix(in oklab, var(--danger), #000 15%); --l-bg: color-mix(in oklab, var(--danger) 14%, #FFF); }
.label-solid.label-primary { --l-fg: var(--accent-ink); --l-bg: var(--accent); }
.label-solid.label-success { --l-fg: #FFF; --l-bg: var(--success-solid); }
.label-solid.label-danger  { --l-fg: #FFF; --l-bg: var(--danger-solid); }
.label-solid.label-warning { --l-fg: var(--warning-ink); --l-bg: var(--warning-solid); }
.label-solid.label-info    { --l-fg: #FFF; --l-bg: var(--info-solid); }
.label-nav { --l-fg: var(--accent-ink); --l-bg: var(--accent); margin-top: 0; }
a.label:hover, a.label:focus { color: var(--l-fg); filter: brightness(0.96); }
/* a dot in front of a label: <span class="label label-success label-dot">Active</span> */
.label-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* Badges (counts) */
.badge {
  min-width: 18px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  color: var(--text-2);
  background: var(--n-200);
  border-radius: 9px;
}
.btn .badge { position: static; top: 0; color: inherit; background: color-mix(in oklab, currentColor 18%, transparent); }
.btn-default .badge { color: var(--text-2); background: var(--n-100); }
.nav-pills > .active > a > .badge, .list-group-item.active > .badge { color: var(--accent-text); background: var(--surface); }
.navbar-top-icons .label, .navbar-top-icons .badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  color: #FFF;
  background: var(--danger-solid);
  border: 2px solid var(--topbar-bg);
  border-radius: 9px;
}

/* Progress */
.progress { height: 8px; margin-bottom: 12px; background: var(--n-100); border-radius: 4px; box-shadow: none; }
.progress-bar { font-size: 10px; line-height: 8px; background-color: var(--accent); box-shadow: none; }
.progress-bar-success { background-color: var(--success-solid); }
.progress-bar-info { background-color: var(--info-solid); }
.progress-bar-warning { background-color: var(--warning-solid); }
.progress-bar-danger { background-color: var(--danger-solid); }
.progress-lg { height: 16px; }
.progress-lg .progress-bar { line-height: 16px; font-size: 11px; }
.right-sidebar-section .progress { width: auto; height: 6px; margin: 4px 0 10px; }

/* Tooltip */
.tooltip { font-family: var(--font-sans); font-size: var(--font-size-xs); }
.tooltip.in, .tooltip.show { opacity: 1; }
.tooltip-inner {
  max-width: 260px;
  padding: 5px 9px;
  color: #FFF;
  background-color: var(--n-900);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 1;
  text-align: left;
  line-height: 1.4;
}
.tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow { border-top-color: var(--n-900); }
.tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--n-900); }
.tooltip.left .tooltip-arrow { border-left-color: var(--n-900); }
.tooltip.right .tooltip-arrow { border-right-color: var(--n-900); }

/* Popover */
.popover {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.popover-title { padding: 9px 12px; font-size: 13px; font-weight: 600; background: var(--n-25); border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.popover-content { padding: 10px 12px; }
.popover.top > .arrow { border-top-color: var(--border); }
.popover.bottom > .arrow { border-bottom-color: var(--border); }
.popover.left > .arrow { border-left-color: var(--border); }
.popover.right > .arrow { border-right-color: var(--border); }
.popover.bottom > .arrow::after { border-bottom-color: var(--n-25); }

/* Modal */
.modal-backdrop { background-color: var(--n-900); }
.modal-backdrop.in { opacity: 0.45; }
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.modal-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); }
.modal-header::before, .modal-header::after { display: none; }
.modal-header .close { order: 9; margin: 0 -6px 0 auto; padding: 2px 6px; }
.modal-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); }
.modal-body { padding: 20px; }
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  text-align: right;
  background: var(--n-25);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 8px 8px;
}
.modal-footer::before, .modal-footer::after { display: none; }
.modal-footer .btn + .btn { margin: 0; }
.modal-footer .btn { margin-bottom: 0 !important; }
.modal-footer .footer-start { margin-right: auto; }
.modal-sm { width: 360px; }

/* Wells */
.well { padding: 14px 16px; margin-bottom: 16px; background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: none; }
.well-sm { padding: 8px 10px; }

/* Empty state */
.empty-state { padding: 36px 16px; text-align: center; color: var(--text-muted); }
.empty-state .icon { width: 32px; height: 32px; margin-bottom: 8px; color: var(--text-faint); --icon-stroke: 1.5; }
.empty-state h4 { margin-bottom: 4px; color: var(--text); }


/* ==========================================================================
   10. Icons  —  <svg class="icon"><use href="img/icons.svg#name"/></svg>
   They take the colour and size of the surrounding text.
   ========================================================================== */
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  stroke-width: var(--icon-stroke);
  overflow: visible;
}
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; --icon-stroke: 1.75; }
.icon-2x { width: 2em; height: 2em; --icon-stroke: 1.5; }
.icon-thin { --icon-stroke: 1.5; }
.icon-spin { animation: icon-spin 1s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }
/* Font Awesome stays usable during the migration */
.fa, .fas, .far, .fab { line-height: 1; }


/* ==========================================================================
   11. Login page (login.php, register.php, pwreset.php)
   ========================================================================== */
.pen-title { padding: 72px 16px 28px; text-align: center; color: var(--text); letter-spacing: 0; }
.pen-title img { max-height: 44px; width: auto; }
.pen-title h1 { margin: 0 0 8px; font-size: 24px; font-weight: 600; color: var(--text); }
.pen-title span, .pen-title span a { font-size: 12px; color: var(--text-muted); }
.form-module {
  position: relative;
  max-width: 360px;
  width: calc(100% - 32px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}
.form-module .form { padding: 28px 28px 22px; }
.form-module h2 { margin: 0 0 18px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); }
.form-module h1 { font-size: 18px; }
.form-module p { font-size: 13px; color: var(--text-2); }
.form-module input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  display: block;
  width: 100%;
  height: 38px;
  margin: 0 0 14px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-module input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-module button {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .12s ease;
}
.form-module button:hover { background: var(--accent-hover); }
.form-module button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-module button + br, .form-module button + br + br { display: none; }
.form-module .toggle {
  position: absolute;
  top: 26px;
  right: 24px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 2px 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-text);
  background: none;
  cursor: pointer;
}
.form-module .toggle .tooltip { display: none; }
.form-module .toggle i, .form-module .toggle .icon { margin-right: 4px; }
.form-module .cta {
  padding: 14px 28px;
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
  background: var(--n-25);
  border-top: 1px solid var(--border-subtle);
}
.form-module .cta a { color: var(--accent-text); font-weight: 600; }
.form-module .help-block { margin: -8px 0 12px; font-size: 12px; color: var(--danger); }
#login-footer { margin-top: 18px; font-size: 12px; color: var(--text-muted); }


/* ==========================================================================
   12. Plugin: DataTables 1.13 with the Bootstrap 3 integration
   Complete: do NOT also load dataTables.bootstrap(.min).css.
   Load only the JS: jquery.dataTables.min.js + dataTables.bootstrap.min.js
   For very large tables: deferRender: true, or serverSide: true;
   scrollX + scrollY for a fixed viewport; FixedHeader / FixedColumns styles below.
   ========================================================================== */
table.dataTable {
  clear: both;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  border-collapse: separate !important;
}
table.dataTable td, table.dataTable th { box-sizing: content-box; }   /* DataTables measures widths this way */
table.dataTable > tbody > tr { background-color: transparent; }
table.dataTable.table-striped > tbody > tr.odd { background-color: color-mix(in oklab, var(--n-50) 55%, var(--surface)); }
table.dataTable.table-striped > tbody > tr.even { background-color: var(--surface); }
table.dataTable.table-hover > tbody > tr:hover { background-color: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
table.dataTable > tbody > tr.selected > * { background-color: var(--accent-soft-2); box-shadow: inset 0 0 0 0 transparent; color: var(--text); }
table.dataTable > tbody > tr.selected > *:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.dataTable td.dataTables_empty { padding: 28px 12px; text-align: center; color: var(--text-muted); background: var(--surface); }
table.dataTable.nowrap th, table.dataTable.nowrap td { white-space: nowrap; }
table.dataTable :is(th, td).dt-left, table.dataTable thead :is(th, td).dt-head-left, table.dataTable tbody :is(th, td).dt-body-left { text-align: left; }
table.dataTable :is(th, td).dt-center, table.dataTable thead :is(th, td).dt-head-center, table.dataTable tbody :is(th, td).dt-body-center { text-align: center; }
table.dataTable :is(th, td).dt-right, table.dataTable thead :is(th, td).dt-head-right, table.dataTable tbody :is(th, td).dt-body-right { text-align: right; }
table.dataTable :is(th, td).dt-nowrap, table.dataTable tbody :is(th, td).dt-body-nowrap { white-space: nowrap; }

/* sort indicators: one chevron pair, the active direction in the accent colour */
table.dataTable thead > tr > :is(th, td):is(.sorting, .sorting_asc, .sorting_desc, .sorting_asc_disabled, .sorting_desc_disabled) {
  position: relative;
  padding-right: 24px;
  cursor: pointer;
  user-select: none;
}
table.dataTable thead > tr > :is(th, td):is(.sorting, .sorting_asc, .sorting_desc)::before { display: none; content: none; }
table.dataTable thead > tr > :is(th, td):is(.sorting, .sorting_asc, .sorting_desc)::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 9px;
  top: auto;
  display: block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  opacity: 0.3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4 -4l4 4'/%3E%3Cpath d='M16 15l-4 4l-4 -4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4 -4l4 4'/%3E%3Cpath d='M16 15l-4 4l-4 -4'/%3E%3C/svg%3E") center / contain no-repeat;
}
table.dataTable thead > tr > :is(th, td).sorting_asc::after {
  opacity: 1;
  background-color: var(--accent-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5 -5l5 5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5 -5l5 5'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > :is(th, td).sorting_desc::after {
  opacity: 1;
  background-color: var(--accent-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5l5 -5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5l5 -5'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > :is(th, td):is(.sorting_asc, .sorting_desc) { color: var(--text); }
table.dataTable thead > tr > :is(th, td):is(.sorting, .sorting_asc, .sorting_desc):hover { background-color: var(--n-100); }
table.dataTable thead > tr > :is(th, td):active { outline: none; }
table.dataTable thead > tr > :is(th, td).sorting_disabled { cursor: default; padding-right: var(--cell-x); }

/* toolbar rows around the table (default dom: l f / t r / i p) */
div.dataTables_wrapper { position: relative; }
div.dataTables_wrapper > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
}
div.dataTables_wrapper > .row::before, div.dataTables_wrapper > .row::after { display: none; }
div.dataTables_wrapper > .row > [class*="col-"] { float: none; width: auto; flex: 1 1 auto; min-width: 0; padding: 0; }
div.dataTables_wrapper > .row > .col-sm-12 { flex-basis: 100%; }
div.dataTables_wrapper > .row:first-child { padding-bottom: 12px; }
div.dataTables_wrapper > .row:last-child { padding-top: 12px; }
div.dataTables_wrapper > .row > [class*="col-"]:last-child:not(.col-sm-12) { display: flex; justify-content: flex-end; }
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_length select { width: auto; min-width: 68px; height: 30px; margin: 0; padding-top: 4px; padding-bottom: 4px; }
div.dataTables_wrapper div.dataTables_filter { text-align: right; }
div.dataTables_wrapper div.dataTables_filter input {
  width: 240px;
  height: 30px;
  margin: 0;
  padding-left: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 14px;
}
div.dataTables_wrapper div.dataTables_info { padding: 0; font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }
div.dataTables_wrapper div.dataTables_paginate { margin: 0; text-align: right; white-space: nowrap; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 0; justify-content: flex-end; }
div.dataTables_wrapper div.dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: auto;
  margin: 0;
  padding: 10px 18px;
  font-size: var(--font-size-sm);
  color: var(--text-2);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
}
div.dataTables_wrapper div.dataTables_processing > div:last-child { display: none; }
/* the table itself sits in a hairline frame */
div.dataTables_wrapper > .row > .col-sm-12 > table.dataTable:not(.table-bordered),
div.dataTables_wrapper div.dataTables_scroll {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
div.dataTables_wrapper > .row > .col-sm-12 { overflow-x: auto; }

/* scrolling tables (scrollX / scrollY) */
div.dataTables_scrollHead table.dataTable, div.dataTables_scrollFoot table.dataTable { margin: 0 !important; border: 0; }
div.dataTables_scrollHead { background: var(--n-50); border-bottom: 1px solid var(--border); }
div.dataTables_scrollHead table.dataTable > thead > tr > th { border-bottom: 0; }
div.dataTables_scrollBody { scrollbar-width: thin; }
div.dataTables_scrollBody > table.dataTable { margin: 0 !important; border: 0; }
div.dataTables_scrollBody > table.dataTable > thead > tr > :is(th, td) { padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; }
div.dataTables_scrollBody > table.dataTable > thead > tr > :is(th, td)::after { display: none; }
div.dataTables_scrollBody > table.dataTable > tbody > tr:first-child > :is(th, td) { border-top: 0; }
div.dataTables_scrollFoot { border-top: 1px solid var(--border); }

/* extensions: FixedHeader, FixedColumns, Responsive, Select checkbox */
table.dataTable.fixedHeader-floating, table.dataTable.fixedHeader-locked { background: var(--surface); }
table.dataTable.fixedHeader-floating { box-shadow: 0 2px 6px rgb(16 24 40 / 0.08); }
table.dataTable :is(th, td).dtfc-fixed-left, table.dataTable :is(th, td).dtfc-fixed-right { background-color: var(--surface); }
table.dataTable thead :is(th, td).dtfc-fixed-left, table.dataTable thead :is(th, td).dtfc-fixed-right { background-color: var(--n-50); }
table.dataTable :is(th, td).dtfc-fixed-left:last-of-type { box-shadow: 1px 0 0 var(--border); }
table.dataTable.dtr-inline.collapsed > tbody > tr > :is(td, th).dtr-control::before {
  background: var(--accent); border: 0; box-shadow: none; border-radius: 3px;
}


/* ==========================================================================
   13. Plugin: Tom Select 2
   Complete: do NOT also load tom-select*.css. Load tom-select.complete.min.js.
     new TomSelect('#employee', { plugins: ['remove_button', 'clear_button'] });
   Copies the <select>'s classes, so class="form-control" works as before.
   ========================================================================== */
.ts-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}
.ts-wrapper { position: relative; }
.ts-wrapper.form-control, .ts-wrapper.form-select, .ts-wrapper.input-sm {
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.ts-control {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: var(--control-h);
  padding: 4px 10px;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: 20px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-sizing: border-box;
  cursor: text;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ts-control:hover { border-color: var(--n-400); }
.ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: var(--focus-ring); }
.ts-wrapper.single .ts-control {
  padding-right: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px;
}
.ts-wrapper.single.dropdown-active .ts-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6 -6l6 6'/%3E%3C/svg%3E"); }
.ts-wrapper.multi.has-items .ts-control { padding: 3px 6px 3px 3px; }
.ts-control > input {
  flex: 1 1 auto;
  display: inline-block !important;
  min-width: 4rem;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit;
  line-height: inherit !important;
  color: inherit;
  text-indent: 0 !important;
  background: none !important;
  border: 0 none !important;
  box-shadow: none !important;
  user-select: auto !important;
}
.ts-control > input:focus { outline: none !important; }
.ts-control > input::placeholder { color: var(--text-faint); }
.ts-wrapper.has-items .ts-control > input { margin: 0 2px !important; }
.input-hidden .ts-control > input { position: absolute; left: -10000px; opacity: 0; }
.ts-wrapper.single .ts-control > .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper.multi .ts-control > .item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 1px 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 18px;
  color: var(--text);
  background: var(--n-100);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.ts-wrapper.multi .ts-control > .item.active { color: var(--accent-text); background: var(--accent-soft-2); border-color: var(--accent-line); }
.ts-wrapper.plugin-remove_button .item .remove {
  display: inline-block;
  margin: 0 -4px 0 2px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-faint);
  text-decoration: none;
  border: 0;
  border-radius: 2px;
}
.ts-wrapper.plugin-remove_button .item .remove:hover { color: var(--danger); background: var(--danger-soft); }
.ts-wrapper.plugin-clear_button .clear-button {
  position: absolute;
  top: 50%;
  right: 26px;
  z-index: 2;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-faint);
  background: transparent !important;
  opacity: 0;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity .12s ease;
}
.ts-wrapper.plugin-clear_button.multi .clear-button { right: 8px; }
.ts-wrapper.plugin-clear_button.focus.has-items .clear-button,
.ts-wrapper.plugin-clear_button:not(.disabled):hover.has-items .clear-button { opacity: 1; }
.ts-wrapper.disabled .ts-control { color: var(--text-muted); background-color: var(--n-50); cursor: not-allowed; opacity: 1; }
.ts-wrapper.disabled .ts-control * { cursor: not-allowed; }
.has-error .ts-control { border-color: var(--danger); }

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1060;
  width: 100%;
  margin: 4px 0 0;
  padding: 4px;
  font-size: var(--font-size-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
}
.ts-dropdown-content { max-height: 240px; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; }
.ts-dropdown [data-selectable] { overflow: hidden; cursor: pointer; }
.ts-dropdown .option, .ts-dropdown .optgroup-header, .ts-dropdown .no-results, .ts-dropdown .create {
  padding: 6px 10px;
  line-height: 18px;
  border-radius: var(--radius);
}
.ts-dropdown .option.active { color: var(--text); background: var(--n-50); }
.ts-dropdown .option.selected { color: var(--accent-text); font-weight: 600; }
.ts-dropdown .option.selected.active { background: var(--accent-soft); }
.ts-dropdown .option[data-disabled], .ts-dropdown [data-disabled] { cursor: default; opacity: 0.5; }
.ts-dropdown .optgroup-header { padding-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); cursor: default; }
.ts-dropdown .optgroup:not(:first-child) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.ts-dropdown .no-results { color: var(--text-muted); }
.ts-dropdown .create { color: var(--accent-text); }
.ts-dropdown .highlight { background: color-mix(in oklab, var(--warning-solid) 35%, transparent); border-radius: 2px; color: inherit; }
.ts-dropdown .spinner { display: inline-block; width: 18px; height: 18px; margin: 6px 10px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: icon-spin 0.8s linear infinite; }
.plugin-dropdown_input .dropdown-input-wrap { padding: 0 0 4px; }
.plugin-dropdown_input .dropdown-input { display: block; width: 100%; height: 30px; padding: 4px 8px; font: inherit; color: var(--text); background: var(--n-25); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; }
.plugin-dropdown_input .dropdown-input:focus { outline: none; border-color: var(--accent); }
.plugin-checkbox_options .option input { margin-right: 6px; }


/* ==========================================================================
   14. Plugin: Highcharts 12 in styled mode
   Page: <link href="css/vendor/highcharts.css"> (structural file shipped with
   Highcharts) and chart: { styledMode: true }. Colours, fonts and the tooltip
   come from here, so charts follow the palette and need no inline styles
   (which the style-src CSP would block anyway).
   ========================================================================== */
.highcharts-container,
.highcharts-light .highcharts-container {
  --highcharts-color-0: var(--cat-1);
  --highcharts-color-1: var(--cat-2);
  --highcharts-color-2: var(--cat-3);
  --highcharts-color-3: var(--cat-4);
  --highcharts-color-4: var(--cat-5);
  --highcharts-color-5: var(--cat-6);
  --highcharts-color-6: var(--cat-7);
  --highcharts-color-7: var(--cat-8);
  --highcharts-color-8: var(--n-400);
  --highcharts-color-9: var(--n-600);
  --highcharts-background-color: var(--surface);
  --highcharts-neutral-color-100: var(--n-900);
  --highcharts-neutral-color-80: var(--n-700);
  --highcharts-neutral-color-60: var(--n-600);
  --highcharts-neutral-color-40: var(--n-500);
  --highcharts-neutral-color-20: var(--n-300);
  --highcharts-neutral-color-10: var(--n-100);
  --highcharts-neutral-color-5: var(--n-50);
  --highcharts-neutral-color-3: var(--n-25);
  --highcharts-highlight-color-100: var(--accent);
  --highcharts-highlight-color-80: var(--accent);
  --highcharts-highlight-color-60: color-mix(in oklab, var(--accent) 60%, #FFF);
  --highcharts-highlight-color-20: color-mix(in oklab, var(--accent) 20%, #FFF);
  --highcharts-highlight-color-10: color-mix(in oklab, var(--accent) 10%, #FFF);
  --highcharts-positive-color: var(--success);
  --highcharts-negative-color: var(--danger);
  font-family: var(--font-sans) !important;
}
.highcharts-root, .highcharts-root text { font-family: var(--font-sans); }
.highcharts-title { font-size: 14px !important; font-weight: 600 !important; fill: var(--text) !important; }
.highcharts-subtitle { font-size: 12px !important; fill: var(--text-muted) !important; }
.highcharts-axis-labels text { font-size: 11.5px !important; fill: var(--text-muted) !important; }
.highcharts-axis-title { font-size: 12px; fill: var(--text-muted) !important; }
.highcharts-legend-item > text { font-size: 12px !important; font-weight: 500 !important; fill: var(--text-2) !important; }
.highcharts-legend-item:hover > text { fill: var(--text) !important; }
.highcharts-grid-line { stroke: var(--n-100); }
.highcharts-axis-line, .highcharts-tick { stroke: var(--n-200); }
.highcharts-crosshair-category { fill: color-mix(in oklab, var(--accent) 8%, transparent); stroke: none; }
.highcharts-point { stroke-width: 1px; }
.highcharts-column-series .highcharts-point, .highcharts-bar-series .highcharts-point { stroke: var(--surface); }
.highcharts-xrange-series .highcharts-point { stroke: var(--surface); stroke-width: 1px; }
.highcharts-graph { stroke-width: 2px; }
.highcharts-tooltip-box { fill: var(--surface); stroke: var(--border); stroke-width: 1px; fill-opacity: 1; }
.highcharts-tooltip-box .highcharts-label-box { fill: var(--surface); }
.highcharts-tooltip text, .highcharts-tooltip { fill: var(--text); color: var(--text); font-size: 12px; }
.highcharts-tooltip-header { font-size: 11.5px; fill: var(--text-muted); }
div.highcharts-tooltip table { border-collapse: collapse; }
div.highcharts-tooltip td { padding: 1px 4px; }
.hc-tt-key { font-size: 11.5px; color: var(--text-muted); }
.hc-tt-value { font-weight: 600; color: var(--text); text-align: right; }
.highcharts-credits { font-size: 10px !important; fill: var(--text-faint) !important; }
.highcharts-container .highcharts-data-label text, .highcharts-container text.highcharts-data-label { font-size: 11px; font-weight: 600; fill: var(--text-2); stroke: none; }
.highcharts-data-label-box { fill: none; }
.highcharts-button-box { fill: var(--surface); stroke: var(--border); }
.highcharts-menu { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg) !important; padding: 4px !important; }
.highcharts-menu-item { padding: 6px 10px !important; font-size: 13px !important; color: var(--text) !important; border-radius: var(--radius); }
.highcharts-menu-item:hover { background: var(--n-50) !important; }
.chart-box { min-height: 320px; }


/* ==========================================================================
   15. Plugin: FullCalendar 2.4 (jQuery version)
   Page: keep linking fullcalendar(.min).css; this restyles it.
   Event colours: the CSP blocks FullCalendar's inline styles, so give events
   a class instead of a colour:  { title: '...', className: 'ev-cat-3' }
   (.ev-cat-1 ... .ev-cat-8, .ev-accent, .ev-muted, .ev-success, .ev-danger)
   ========================================================================== */
:root .fc { font-size: var(--font-size-sm); color: var(--text); }
:root .fc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
:root .fc-toolbar::after { display: none; }
:root .fc-toolbar > div { float: none; }
:root .fc-toolbar .fc-left { order: 1; }
:root .fc-toolbar .fc-center { order: 2; margin: 0 auto; display: block; }
:root .fc-toolbar .fc-right { order: 3; }
:root .fc-toolbar h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 30px; color: var(--text); }
:root .fc-toolbar .fc-button-group { display: inline-flex; }
:root .fc button, :root .fc .fc-button {
  height: 30px;
  margin: 0;
  padding: 0 11px;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 28px;
  text-transform: capitalize;
  color: var(--text-2);
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
:root .fc .fc-button-group > .fc-button + .fc-button { margin-left: -1px; }
:root .fc .fc-corner-left { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
:root .fc .fc-corner-right { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
:root .fc .fc-state-hover { color: var(--text); background: var(--n-50); }
:root .fc .fc-state-down, :root .fc .fc-state-active {
  position: relative; z-index: 1;
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: none;
}
:root .fc .fc-state-disabled { opacity: 0.45; cursor: default; }
:root .fc .fc-today-button { margin-left: 8px; }
:root .fc button .fc-icon { top: -1px; margin: 0; font-size: 1.1em; }
:root .fc-unthemed th, :root .fc-unthemed td, :root .fc-unthemed thead, :root .fc-unthemed tbody,
:root .fc-unthemed .fc-divider, :root .fc-unthemed .fc-row, :root .fc-unthemed .fc-popover { border-color: var(--border-subtle); }
:root .fc-view-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
:root .fc-view > table { border: 0; }
:root .fc-unthemed .fc-view > table > :is(thead, tbody) > tr > td { border-left: 0; border-right: 0; }
:root .fc-unthemed .fc-view > table > thead > tr > td { border-top: 0; }
:root .fc-unthemed .fc-view > table > tbody > tr > td { border-bottom: 0; }
:root .fc th.fc-day-header, :root .fc-unthemed .fc-day-header {
  padding: 7px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--n-25);
}
:root .fc-basic-view td.fc-day-number, :root .fc-basic-view .fc-day-number { padding: 5px 8px 2px; font-size: 12.5px; color: var(--text-2); }
:root .fc-basic-view .fc-day-number.fc-other-month { color: var(--text-faint); opacity: 1; }
:root .fc-unthemed .fc-other-month { background: none; }
:root .fc-unthemed .fc-bg .fc-sat, :root .fc-unthemed .fc-bg .fc-sun { background: var(--n-25); }
:root .fc-unthemed .fc-today { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
:root .fc-basic-view .fc-day-number.fc-today { color: var(--accent-text); font-weight: 700; }
/* FullCalendar 3.x day numbers */
:root .fc-basic-view .fc-day-top .fc-day-number { float: right; padding: 5px 8px 2px; }
:root .fc-basic-view .fc-day-top.fc-other-month { opacity: 1; }
:root .fc-basic-view .fc-day-top.fc-other-month .fc-day-number { color: var(--text-faint); }
:root .fc-basic-view .fc-day-top.fc-today .fc-day-number {
  margin: 3px 4px 0 0; padding: 0 6px; min-width: 22px; line-height: 20px; text-align: center;
  color: var(--accent-ink); background: var(--accent); border-radius: 10px; font-weight: 700;
}
:root .fc-highlight { background: color-mix(in oklab, var(--accent) 22%, transparent); opacity: 1; }
:root .fc-event {
  margin: 1px 3px 2px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--accent-ink);
  background-color: var(--accent);
  border: 0;
  border-radius: 3px;
}
:root .fc-event, :root .fc-event:hover, :root .fc-event-dot { color: var(--ev-fg, var(--accent-ink)); background-color: var(--ev-bg, var(--accent)); }
:root .fc-event:hover { filter: brightness(0.94); }
:root .fc-event .fc-time { font-weight: 600; }
:root .fc-event .fc-content { white-space: normal; }
:root .fc-day-grid-event .fc-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .fc-more { margin: 1px 6px; font-size: 11.5px; font-weight: 600; color: var(--accent-text); }
:root .fc-popover { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
:root .fc-popover .fc-header { padding: 6px 10px; background: var(--n-25); }
:root .fc-time-grid .fc-slats td { height: 26px; }
:root .fc-axis { font-size: 11.5px; color: var(--text-muted); }
:root .fc-time-grid .fc-now-indicator-line { border-color: var(--danger); }
.ev-cat-1 { --ev-bg: var(--cat-1); --ev-fg: #FFF; }
.ev-cat-2 { --ev-bg: var(--cat-2); --ev-fg: #FFF; }
.ev-cat-3 { --ev-bg: color-mix(in oklab, var(--cat-3), #000 18%); --ev-fg: #FFF; }
.ev-cat-4 { --ev-bg: var(--cat-4); --ev-fg: #2B1D00; }
.ev-cat-5 { --ev-bg: color-mix(in oklab, var(--cat-5), #000 22%); --ev-fg: #FFF; }
.ev-cat-6 { --ev-bg: var(--cat-6); --ev-fg: #FFF; }
.ev-cat-7 { --ev-bg: var(--cat-7); --ev-fg: #FFF; }
.ev-cat-8 { --ev-bg: var(--cat-8); --ev-fg: #FFF; }
.ev-accent { --ev-bg: var(--accent); --ev-fg: var(--accent-ink); }
.ev-muted { --ev-bg: var(--n-100); --ev-fg: var(--text-2); }
.ev-success { --ev-bg: var(--success-solid); --ev-fg: #FFF; }
.ev-danger { --ev-bg: var(--danger-solid); --ev-fg: #FFF; }
.ev-soft { --ev-fg: color-mix(in oklab, var(--ev-bg), #000 45%); background-color: color-mix(in oklab, var(--ev-bg) 16%, #FFF) !important; box-shadow: inset 3px 0 0 var(--ev-bg); }
/* legend chips (calendar or chart legends built in HTML) */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--ev-bg, var(--accent)); }


/* ==========================================================================
   16. Utilities (small, predictable)
   ========================================================================== */
.text-num, .tabular { font-variant-numeric: tabular-nums; }
.text-nowrap, .nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.fw-600 { font-weight: 600; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stack > * + * { margin-top: 10px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.toolbar .spacer { flex: 1 1 auto; }
.toolbar .form-control { width: auto; }
.mar-top-10 { margin-top: 10px; }
.mar-btm-10 { margin-bottom: 10px; }
.padding-10 { padding: 10px; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }


/* ==========================================================================
   17. Responsive, motion, print
   ========================================================================== */
@media (max-width: 1199px) {
  :root { --content-pad: 20px; --rightbar-w: 260px; }
}
@media (max-width: 767px) {
  :root { --content-pad: 14px; --topbar-h: 52px; --sidebar-mini-w: 52px; }
  /* phones: the sidebar shows only in its mini form (same rule as before) */
  body:not(.mini-navbar) { --sidebar-now: 0px; }
  body:not(.mini-navbar) #side-menu { display: none; }
  body.mini-navbar #sidebar-collapse > .nav > li > a { width: 40px; height: 38px; }
  body.mini-navbar #side-menu .nav { padding: 6px; }
  .navbar-static-top { padding: 0 8px 0 12px; gap: 2px; }
  .navbar-static-top .btn.btn-main, .navbar-static-top .navbar-top-icons, .navbar-static-top .reveal-rightsidebar { width: 34px; height: 34px; }
  .title-header { padding: 12px var(--content-pad); column-gap: 10px; }
  .title-header > :is(i, .icon, .fa, .fas, .far) { width: 36px; height: 36px; line-height: 36px; font-size: 16px; }
  .title-header > .icon { padding: 8px; }
  .title-header h2 { font-size: 17px; }
  /* right sidebar becomes a drawer over the content */
  body.right-sidebar { --rightbar-now: 0px; }
  body.right-sidebar .sidebar-right {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    z-index: 35;
    width: min(300px, 86vw);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }
  #right-sidebar-id { position: static; max-height: none; }
  div.dataTables_wrapper div.dataTables_filter input { width: 100%; min-width: 0; }
  div.dataTables_wrapper > .row > [class*="col-"] { flex-basis: 100%; }
  div.dataTables_wrapper > .row > [class*="col-"]:last-child:not(.col-sm-12) { justify-content: flex-start; }
  div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_filter label { width: 100%; }
  .modal-dialog { margin: 12px; }
  .modal-sm { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media print {
  #side-menu, .navbar-static-top, .sidebar-right, #to-top, .panel-options, .dataTables_length, .dataTables_filter, .dataTables_paginate { display: none !important; }
  #page-wrapper { display: block; }
  #page-content { padding: 0; min-height: 0; background: #FFF; }
  .title-header { margin: 0 0 12px; padding: 0 0 8px; border: 0; }
  .panel { box-shadow: none; break-inside: avoid; }
  body { background: #FFF; }
}