/* ==========================================================================
   SACC Modern UI — Complete Design System
   Inter font · Fluent-inspired tokens · SAP Fiori compact DataTables
   Built for CoreUI 5 + Bootstrap 5 + DataTables
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Typography */
  --sacc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sacc-font-size-body: 13px;
  --sacc-font-size-sm: 12px;
  --sacc-font-size-xs: 11px;

  /* Brand */
  --sacc-primary: #16537e;
  --sacc-primary-hover: #1a6499;
  --sacc-primary-rgb: 22, 83, 126;
  --sacc-accent: #20a8d8;

  /* Override CoreUI primary to match project brand */
  --cui-primary: var(--sacc-primary);
  --cui-primary-rgb: var(--sacc-primary-rgb);
  --cui-primary-text-emphasis: #0f3a5a;
  --cui-primary-bg-subtle: #e8f1f7;
  --cui-primary-border-subtle: #a3c4db;

  /* Semantic */
  --sacc-success: #2e7d32;
  --sacc-success-bg: #e8f5e9;
  --sacc-warning: #f57c00;
  --sacc-warning-bg: #fff3e0;
  --sacc-danger: #c62828;
  --sacc-danger-bg: #fce4ec;
  --sacc-info: #0277bd;
  --sacc-info-bg: #e1f5fe;

  /* Neutral scale (Fluent-inspired zinc) */
  --sacc-gray-50: #fafafa;
  --sacc-gray-100: #f5f5f5;
  --sacc-gray-200: #eeeeee;
  --sacc-gray-300: #e0e0e0;
  --sacc-gray-400: #bdbdbd;
  --sacc-gray-500: #9e9e9e;
  --sacc-gray-600: #757575;
  --sacc-gray-700: #616161;
  --sacc-gray-800: #424242;
  --sacc-gray-900: #212121;

  /* Surfaces */
  --sacc-bg: #f5f7fa;
  --sacc-surface: #ffffff;
  --sacc-surface-alt: #f8f9fb;
  --sacc-surface-hover: #f0f2f5;

  /* Text */
  --sacc-text: #1a1a1a;
  --sacc-text-secondary: #4a4a4a;
  --sacc-text-muted: #757575;

  /* Borders */
  --sacc-border: #e0e0e0;
  --sacc-border-strong: #bdbdbd;
  --sacc-border-focus: rgba(22, 83, 126, 0.5);

  /* Shadows */
  --sacc-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --sacc-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sacc-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --sacc-shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);

  /* Radius */
  --sacc-radius-sm: 4px;
  --sacc-radius: 6px;
  --sacc-radius-lg: 8px;
  --sacc-radius-xl: 12px;
  --sacc-radius-pill: 50rem;

  /* Layout */
  --sacc-header-height: 56px;
  --sacc-sidebar-width: 200px;
  --sacc-sidebar-narrow: 56px;
  --sacc-content-padding: 0.75rem;

  /* DataTable */
  --sacc-dt-row-height: 33px;
  --sacc-dt-header-font: 11px;
  --sacc-dt-cell-font: 13px;
  --sacc-dt-toolbar-height: 38px;
  --sacc-dt-footer-height: 32px;

  /* Fixed bottom chrome (SaaS console footer, mobile bottom bar).
     --sacc-footer-h is MEASURED at runtime by sacc-modern.js; the 0px here is
     only the pre-script fallback so nothing reserves space on layouts that
     have no fixed footer. Never hard-code a footer height again — the footer
     wraps to 2–3 lines on narrow screens and any fixed number goes wrong. */
  --sacc-footer-h: 0px;
  /* Breathing room above the footer. Measured: a 16px gap left only ~6px of
     visible clearance once the content wrapper's own trailing space is taken
     into account, which still reads as "touching". 24px lands ~14px clear. */
  --sacc-footer-gap: 24px;
  /* What the content actually reserves: 0 when nothing is pinned to the bottom
     (so shells without a fixed footer are visually unchanged), otherwise
     height + gap. Computed by sacc-modern.js — do not set it by hand. */
  --sacc-footer-reserve: 0px;
  /* Footprint of the floating quick-actions button, published by
     sacc-quick-actions.js the same way (measured, never hard-coded — the offset
     differs between the desktop and mobile rules). 0 on pages with no FAB, so
     nothing reserves space it doesn't need. */
  --sacc-fab-reserve: 0px;

  /* Filter */
  --sacc-filter-bg: var(--sacc-gray-50);
  --sacc-filter-label-font: 11px;
  --sacc-filter-input-height: 30px;

  /* Transition */
  --sacc-transition: 0.15s ease;

  /* ── Z-index scale ──────────────────────────────────────────────────────────
     ONE ordering for the whole app. Never write a raw z-index; reference a token.
     Overlay widgets that append to <body> (sacc-select, flatpickr) sit in the high
     band so they clear CoreUI/Bootstrap modals (~1055) regardless of ancestor
     stacking contexts — this is what prevents "dropdown hides behind element". */
  --sacc-z-base:            1;
  --sacc-z-sticky:          1020;   /* sticky table headers / toolbars            */
  --sacc-z-header:          1030;   /* fixed app header                           */
  --sacc-z-sidebar:         1035;   /* left nav                                   */
  --sacc-z-modal-backdrop:  1050;   /* CoreUI/BS modal backdrop                   */
  --sacc-z-modal:           1055;   /* CoreUI/BS modal                            */
  --sacc-z-offcanvas:       1060;   /* offcanvas / drawer                         */
  --sacc-z-dropdown:        9200;   /* body-appended selects + native menus       */
  --sacc-z-datepicker:      9200;   /* flatpickr calendars (same tier)            */
  --sacc-z-toast:           9400;   /* toastr notifications                       */
  --sacc-z-dialog:          9500;   /* SweetAlert2 blocking dialogs               */
  --sacc-z-dialog-control:  10000;  /* selects/pickers opened INSIDE a dialog     */
  --sacc-z-busy:            20000;  /* global rate-limit / busy overlay           */
  --sacc-z-loader:          99999;  /* page-transition loader, top of everything  */

  /* ── Data-visualisation palette ─────────────────────────────────────────────
     The ONLY categorical chart palette. Derived from the brand + semantic tokens
     so charts read as part of the product, not a generic admin template. Consume
     via sacc.chartColors() (JS) — never hand-copy a hex array into a dashboard. */
  --sacc-chart-1: #16537e;   /* brand primary   */
  --sacc-chart-2: #20a8d8;   /* accent cyan     */
  --sacc-chart-3: #2e7d32;   /* success green   */
  --sacc-chart-4: #f57c00;   /* warning amber   */
  --sacc-chart-5: #6a4c93;   /* violet          */
  --sacc-chart-6: #c62828;   /* danger red      */
  --sacc-chart-7: #00897b;   /* teal            */
  --sacc-chart-8: #8d6e63;   /* taupe           */
  --sacc-chart-grid: var(--sacc-border);
  --sacc-chart-label: var(--sacc-text-muted);

  /* ── Branded neutrals ───────────────────────────────────────────────────────
     A faintly brand-tinted gray for report/document surfaces, so backgrounds read
     as ours rather than the stock cold Tailwind slate (#f1f5f9/#64748b) that makes
     reports look AI-generated. Screen UI keeps the pure zinc ramp above. */
  --sacc-neutral-bg:      #f4f6f8;   /* page/report background (cool, brand-adjacent) */
  --sacc-neutral-surface: #fbfcfd;   /* subtle card fill                              */
  --sacc-neutral-line:    #dfe4e8;   /* hairline rules on documents                   */
  --sacc-neutral-text:    #33424c;   /* body text with a hint of the brand hue        */
  --sacc-neutral-muted:   #5c6b75;   /* secondary/label text (replaces slate-500)     */
}


/* ==========================================================================
   2. DARK MODE TOKEN OVERRIDES
   ========================================================================== */
[data-theme="dark"],
[data-coreui-theme="dark"] {
  --sacc-bg: #1a1d23;
  --sacc-surface: #22262e;
  --sacc-surface-alt: #2a2e37;
  --sacc-surface-hover: #32363f;

  --sacc-text: #e4e6eb;
  --sacc-text-secondary: #b0b3ba;
  --sacc-text-muted: #8b8f96;

  --sacc-border: #3a3e47;
  --sacc-border-strong: #4a4e57;
  --sacc-border-focus: rgba(32, 168, 216, 0.5);

  --sacc-shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --sacc-shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --sacc-shadow: 0 2px 6px rgba(0,0,0,0.3);
  --sacc-shadow-lg: 0 8px 24px rgba(0,0,0,0.4);

  --sacc-filter-bg: var(--sacc-surface-alt);

  --sacc-success-bg: #1b3a1e;
  --sacc-warning-bg: #3e2200;
  --sacc-danger-bg: #3e1520;
  --sacc-info-bg: #0d2744;

  /* Invert the light end of the neutral ramp so anything using a gray as a SURFACE/BORDER
     (chips, pills, subtle panels, skeletons, dividers) is dark in dark mode instead of a
     light patch with washed-out text. Keeps the same ordering (50 = subtlest → 300 = most
     prominent), just in dark space. Fixes the quick-action pills and every similar component. */
  --sacc-gray-50:  #1e222a;
  --sacc-gray-100: #252a33;
  --sacc-gray-200: #2d323c;
  --sacc-gray-300: #363c46;
}


/* ==========================================================================
   3. BASE TYPOGRAPHY & RESET
   ========================================================================== */
body {
  font-family: var(--sacc-font-family);
  font-size: var(--sacc-font-size-body);
  color: var(--sacc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

table, .dt-container {
  font-variant-numeric: tabular-nums;
}

table {
  font-feature-settings: 'tnum';
}


/* ==========================================================================
   4. PAGE LAYOUT & SHELL
   ========================================================================== */
/* ── Content body + fixed-footer clearance ──────────────────────────────────
   This was `padding: 0 .5rem !important`. Only the HORIZONTAL padding needs to
   beat Bootstrap's `px-3` (which is itself !important); using the shorthand
   also pinned padding-bottom to 0 — and, being !important, silently defeated
   every attempt elsewhere to reserve space under a fixed footer. That is why
   the last control on a page (e.g. "Analyse & Validate" on the SQL Runner)
   ended up underneath the SaaS console's fixed footer with no way to scroll
   it clear. Split the shorthand so vertical padding stays overridable. */
.body.flex-grow-1 {
  /*  THE MAIN CONTENT WRAPPER MUST BE ABLE TO SHRINK.
      It is a flex child (flex-grow-1) of the app shell, and min-width defaults to `auto`, which
      means it refuses to go below the width of its own content. Anything wide inside it - a
      nav bar, a table, a form row - therefore pushed the WHOLE PAGE sideways instead of being
      contained. Measured on the stay screen: 44px of horizontal page scroll at 820px, with this
      element named as the only remaining unshrinkable child, while 1440/1280/1100/992/600/414
      were all clean. One line, and it applies to every page in the app.
      Guarded by tests/responsive-layout.e2e.js. */
  min-width: 0;
  background: var(--sacc-bg);
  padding-left: 0.5rem !important;   /* beats px-3 */
  padding-right: 0.5rem !important;  /* beats px-3 */
  padding-top: 0;
  /* Reserve the real, measured height of whatever fixed chrome is pinned to
     the bottom, plus breathing room. Published by sacc-modern.js
     (initFixedFooterOffset) and re-measured on resize, so it stays correct
     when the footer wraps to two or three lines on narrow screens — and is
     exactly 0 on shells that have no fixed footer. */
  /* Clear BOTH pieces of fixed bottom chrome: the footer (full width) and the
     floating quick-actions button (bottom-right). Taking the larger of the two
     rather than the sum — they occupy the same band, so adding them would
     double-reserve and leave a visible dead strip under every page. */
  padding-bottom: max(var(--sacc-footer-reserve, 0px), var(--sacc-fab-reserve, 0px));
}

/* Anchor jumps and programmatic scroll-into-view must not park content under
   the footer either. */
html {
  scroll-padding-bottom: max(var(--sacc-footer-reserve, 0px), var(--sacc-fab-reserve, 0px));
}

.wrapper {
  min-height: 100vh;
}

/* Remove any spacing from the animated content wrapper */
.body.flex-grow-1 > .animated {
  margin: 0;
  padding: 0;
}

#module-toolbar-slot {
  margin: 0;
  padding: 0;
}

/* Collapse margin between module toolbar and page title bar */
#module-toolbar-slot + .page-title-bar,
#module-toolbar-slot + * + .page-title-bar {
  margin-top: 0;
}

/* Compact callout / alert between toolbar and title bar */
.animated > .callout {
  margin: 0 -0.5rem;
  border-radius: 0;
  padding: 0.4rem 0.75rem;
  font-size: 12px;
}

/* Page title bar — negative margins to cancel .body horizontal padding */
.page-title-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 38px;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-top: 0;
  /* Deeper, dimensional brand gradient with a gold accent rail (matches the logo) instead of
     a flat fill — gives the page-title strip a more premium, finished look. */
  background: linear-gradient(90deg, var(--sacc-primary, #16537e) 0%, #0e3a59 100%);
  color: #fff;
  border-bottom: 2px solid var(--sacc-accent, #E5A72C);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-title-bar i {
  font-size: 14px;
  opacity: 0.85;
}

.page-title-bar label {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.page-help-link {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.15s, color 0.15s;
}
.page-help-link:hover { background: rgba(255, 255, 255, 0.25); color: #fff; }
[data-theme="dark"] .page-help-link,
[data-coreui-theme="dark"] .page-help-link {
  color: var(--sacc-text);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .page-help-link:hover,
[data-coreui-theme="dark"] .page-help-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--sacc-text);
}

[data-theme="dark"] .page-title-bar,
[data-coreui-theme="dark"] .page-title-bar {
  background: var(--sacc-surface-alt);
  border-bottom: 2px solid var(--sacc-accent, #E5A72C);
  color: var(--sacc-text);
}

[data-theme="dark"] .page-title-bar label,
[data-coreui-theme="dark"] .page-title-bar label {
  color: var(--sacc-text-muted);
}

/* Page content area */
.page-content {
  padding: var(--sacc-content-padding);
}

/* Expand single-column forms to fill page width.
   When a .row has only ONE visible col-* child (no sidebar), expand it to 100%.
   Uses :only-child to detect single-column layouts. */
.page-content > .row > [class*="col-"]:only-child,
.page-content > .row > .col-md-8:only-child,
.page-content > .row > .col-lg-8:only-child,
.page-content > .row > .col-md-10:only-child,
.page-content > form > .row > [class*="col-"]:only-child,
.page-content > .sacc-form-card > .row > [class*="col-"]:only-child {
  max-width: 100%;
  flex: 0 0 100%;
}


/* ==========================================================================
   5. HEADER
   ========================================================================== */
.header:not(.receipt-printable .header) {
  display: flex !important;
  background: #2d323f !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.87);
  text-align: left;
  align-content: stretch;
  min-height: var(--sacc-header-height);
}
/* Reset for report/receipt headers inside printable content */
.receipt-printable .header,
.print-content .header {
  display: block !important;
  background: transparent !important;
  border-bottom: none !important;
  color: inherit;
  min-height: auto;
}

.header .header-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

.header .header-nav > .nav-item {
  display: flex;
  align-items: center;
}

.header .header-toggler {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin-right: 0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
}

.header .header-toggler:hover {
  color: #fff;
}

.header .header-toggler-icon {
  width: 1.5rem;
  height: 1.5625rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.75)' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.header .header-toggler-icon:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.header .header-nav .nav-link {
  color: rgba(255, 255, 255, 0.75);
}

.header .header-nav .nav-link:hover {
  color: #fff;
}

.header .header-nav .dropdown-menu {
  color: inherit;
}

/* Theme toggle in header — show only the relevant icon */
.sacc-theme-toggle {
  padding: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 0;
  font-size: 16px;
  line-height: 1;
  border-radius: var(--sacc-radius);
  transition: color var(--sacc-transition);
}

.sacc-theme-toggle:hover {
  color: #fff;
}

/* A dropdown INSIDE the header must not inherit the header's text colour.
   `.header` sets color: rgba(255,255,255,.87) for the dark bar, and a dropdown-menu nested in
   it inherits that — so on a light theme every plain-coloured child was white text on a white
   menu. The theme switch row was the visible casualty: full size, correct position, unreadable.
   Setting the colour on the MENU rather than on the one control fixes it for anything else that
   ends up in a header dropdown later, and `inherit` alone could not have worked here — what it
   inherits IS the header.

   --sacc-text and NOT --cui-dropdown-link-color: the CoreUI token is only declared for the light
   palette, so pinning it here made the dark menu inherit light text. Anything without a dark rule
   of its own — the Sync row, which is .dropdown-item-text — then rendered at 1.07:1 and vanished,
   the same defect one theme over. --sacc-text is redefined per theme, so it follows. */
.header .dropdown-menu {
  color: var(--sacc-text, #1a1a1a);
}

/* Inside a dropdown the toggle is a menu item, not a bar button: it takes the menu's colour and
   the sibling rows' metrics instead of the 16px white icon-button styling above. */
.dropdown-menu .sacc-theme-toggle {
  color: var(--cui-dropdown-link-color, var(--sacc-text, #1a1a1a));
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  text-align: start;
  border-radius: 0;
}

/* Icon column in dropdowns — GLOBAL.
   Font Awesome glyphs are not the same width: fa-bell measures 14px, fa-adjust 16px and
   fa-sync 13px, so three rows each started their label at a different x and the menu read as
   ragged. Nothing was wrong with any single row; they simply had no shared column. Reserving a
   fixed box makes the label origin identical for every item in every dropdown in the app,
   instead of requiring each author to remember fa-fw. */
.dropdown-menu .dropdown-item > i:first-child,
.dropdown-menu .dropdown-item-text > i:first-child,
.dropdown-menu .dropdown-header > i:first-child {
  display: inline-block;
  /* rem, not em: an `em` column is sized by ITS OWN row's font-size, so a row carrying a smaller
     font (the sync line is 13px) got a narrower column and its label landed 3.7px left of the
     others — the same ragged edge, one step further in. */
  width: 1.25rem;
  flex: 0 0 1.25rem;
  text-align: center;
}

/* And the rows themselves must share one horizontal padding. .sacc-theme-toggle is a <button>
   carrying the header bar's own padding, which put its icon a few pixels left of the anchors
   beside it — the misalignment survived even once the icons matched. */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item-text {
  padding-left: var(--cui-dropdown-item-padding-x, 1rem);
  padding-right: var(--cui-dropdown-item-padding-x, 1rem);
}

.dropdown-menu .sacc-theme-toggle:hover,
.dropdown-menu .sacc-theme-toggle:focus {
  color: var(--cui-dropdown-link-color, var(--sacc-text, #1a1a1a));
  background: var(--sacc-surface-alt, rgba(0, 0, 0, .05));
}

/* Light mode: show moon (click to go dark), hide sun */
.sacc-theme-toggle .fa-sun { display: none; }
.sacc-theme-toggle .fa-moon { display: inline; }

/* Dark mode: show sun (click to go light), hide moon */
[data-theme="dark"] .sacc-theme-toggle .fa-moon,
[data-coreui-theme="dark"] .sacc-theme-toggle .fa-moon { display: none; }
[data-theme="dark"] .sacc-theme-toggle .fa-sun,
[data-coreui-theme="dark"] .sacc-theme-toggle .fa-sun { display: inline; }

/* Notification badge */
.sacc-notif-badge {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--sacc-danger, #dc3545);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  animation: sacc-notif-pulse 2s ease-in-out 1;
}
@keyframes sacc-notif-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
.sacc-notif-item {
  display: flex; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--sacc-gray-100);
  cursor: pointer; transition: background 0.15s;
  font-size: 12px; line-height: 1.4;
}
.sacc-notif-item:hover { background: var(--sacc-surface-alt); }
.sacc-notif-item.unread { background: rgba(var(--sacc-primary-rgb, 13,110,253), 0.04); }
.sacc-notif-item__icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px;
}
.sacc-notif-item__text { flex: 1; }
.sacc-notif-item__time { font-size: 10px; color: var(--sacc-text-muted); white-space: nowrap; }
.sacc-notif-empty {
  padding: 30px 14px; text-align: center; color: var(--sacc-text-muted); font-size: 13px;
}

/* Search hint in header */
.sacc-search-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sacc-radius);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--sacc-transition);
}

.sacc-search-hint:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

.sacc-search-hint kbd {
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.6);
}

/* Branch selector in header */
.sacc-branch-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--sacc-transition);
  appearance: none;
  -webkit-appearance: none;
}
.sacc-branch-select:hover,
.sacc-branch-select:focus {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}
.sacc-branch-select option {
  background: var(--sacc-surface);
  color: var(--sacc-text);
}


/* ==========================================================================
   6. SIDEBAR
   ========================================================================== */

/* 6.1 Base sidebar overrides */
.sidebar {
  --cui-sidebar-width: 200px;
  --cui-sidebar-narrow-width: 56px;
  --sacc-sidebar-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sacc-sidebar-duration: 0.35s;
  background: #2d323f;
  transition: width var(--sacc-sidebar-duration) var(--sacc-sidebar-ease),
              box-shadow var(--sacc-sidebar-duration) var(--sacc-sidebar-ease);
}
/* Suppress transitions AND keyframe animations during initial page load
   so the sidebar doesn't replay any width / group-expand animation on
   every full-page navigation. The `.sacc-no-transition` class is added
   in _LeftNav.cshtml and removed after window.load, so user-initiated
   group toggles after page settle still animate normally. The staggered
   nav-item entrance animation was removed entirely in v13.5 (was the
   biggest offender — fired ~940ms of unfurling on every page nav). */
.sidebar.sacc-no-transition,
.sidebar.sacc-no-transition *,
.sidebar.sacc-no-transition ~ .wrapper,
.sidebar.sacc-no-transition ~ .wrapper .body {
  transition: none !important;
  animation: none !important;
}

.sidebar.sidebar-dark {
  background: #2d323f;
}

[data-coreui-theme="dark"] .sidebar,
[data-coreui-theme="dark"] .sidebar.sidebar-dark {
  background: #1a1d23;
}

/* 6.2 Nav layout fixes */
.sidebar .sidebar-nav .nav {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 100%;
}

.sidebar .sidebar-nav .nav .nav-item {
  width: 100%;
}

/* 6.3 Nav link styling */
.sidebar .sidebar-nav .nav .nav-link {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  padding: 0.5rem 1rem;
  border-left: 3px solid transparent;
  border-radius: 0 var(--sacc-radius-sm, 4px) var(--sacc-radius-sm, 4px) 0;
  transition: color var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1),
              background var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1),
              border-color var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.sidebar .nav-link:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar .nav-link.active,
.sidebar .nav-item.active > .nav-link {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--sacc-primary);
}

.sidebar .nav-link .nav-icon {
  color: rgba(255, 255, 255, 0.45);
  transition: color var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  width: 1rem;
  font-size: 0.875rem;
  text-align: center;
}
.sidebar-nav {
  --cui-sidebar-nav-link-icon-width: 1rem;
  --cui-sidebar-nav-link-icon-height: 1rem;
  --cui-sidebar-nav-link-icon-font-size: 0.875rem;
}

.sidebar .nav-link:hover .nav-icon {
  color: rgba(255, 255, 255, 0.85);
}

.sidebar .nav-link.active .nav-icon,
.sidebar .nav-item.active > .nav-link .nav-icon {
  color: var(--sacc-primary);
}

/* 6.3b Nav group toggle arrow — smooth rotation */
.sidebar .nav-group-toggle::after {
  transition: transform var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
}

/* 6.4 Sidebar nav overflow + custom scrollbar */
.sidebar .sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 40px;
}

.sidebar .sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar .sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 6.5 Sidebar header/brand */
.sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-height: var(--sacc-header-height);
  max-height: var(--sacc-header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.15);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.sidebar-brand:hover {
  color: #fff;
  text-decoration: none;
}

.sidebar-brand-full { display: inline-block; }
.sidebar-brand-narrow { display: none; }

.sidebar-narrow .sidebar-brand-full,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-full { display: none; }

.sidebar-narrow .sidebar-brand-narrow,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-narrow { display: inline-block; }

/* 6.6 Nav group items (dropdown animation) */
.sidebar .nav-group-items {
  display: none;
  flex-direction: column;
  padding-left: 0;
  list-style: none;
  overflow: hidden;
}

.sidebar .nav-group.show > .nav-group-items {
  display: flex;
  /* No animation: active groups must appear instantly expanded on first paint.
     A keyframe animation re-fires when .sacc-no-transition is removed at
     window.load (animation property flips from none !important back to defined),
     causing a visible expand flash on every navigation. Instant expand matches
     GitHub / Linear / Notion behavior on dense navs. */
  /* Thin accent line on the left of child items area */
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-left: 1.5rem;
  padding-left: 0;
}

/* Child items — visual hierarchy: smaller, faded, left accent line */
.sidebar .nav-group-items .nav-link {
  padding-left: 1.25rem;
  font-size: 0.7875rem;
  color: rgba(255, 255, 255, 0.55);
  border-left: none;
  position: relative;
  transition: color var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1),
              background var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dot indicator before each child item */
.sidebar .nav-group-items .nav-link::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: background var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1),
              transform var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar .nav-group-items .nav-link:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.04);
}

.sidebar .nav-group-items .nav-link:hover::before {
  background: var(--sacc-primary);
  transform: translateY(-50%) scale(1.3);
}

.sidebar .nav-group-items .nav-link.active::before {
  background: var(--sacc-primary);
}

.sidebar .nav-group-items .nav-link.active {
  color: rgba(255, 255, 255, 0.95);
}

.sidebar .nav-group-items .nav-link .nav-icon {
  font-size: 0.7rem;
  width: 1rem;
  min-width: 1rem;
  margin-right: 0.6rem;
  margin-left: 0;
  text-align: center;
  opacity: 0.45;
  transition: opacity var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar .nav-group-items .nav-link:hover .nav-icon {
  opacity: 0.85;
}

/* 6.7 Unfoldable hover shadow */
.sidebar.sidebar-narrow-unfoldable:hover {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  z-index: 1040;
}

/* 6.8 Content area margin for narrow-unfoldable */
@media (min-width: 992px) {
  /* Expanded (not narrow, not unfoldable) sidebar: full width margin */
  .sidebar.sidebar-fixed:not(.sidebar-end):not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable) ~ * {
    margin-left: var(--cui-sidebar-width, 200px);
    transition: margin-left var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Narrow or unfoldable sidebar: narrow margin (sidebar floats over on hover) */
  .sidebar.sidebar-fixed.sidebar-narrow:not(.sidebar-end):not(.hide) ~ *,
  .sidebar.sidebar-fixed.sidebar-narrow-unfoldable:not(.sidebar-end):not(.hide) ~ * {
    margin-left: var(--cui-sidebar-narrow-width, 56px);
    transition: margin-left var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Hidden sidebar: no margin */
  .sidebar.sidebar-fixed.hide ~ * {
    margin-left: 0;
  }
}

/* 6.9 Lock button */
.sacc-sidebar-lock {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  cursor: pointer;
  padding: 0;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.15);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  line-height: 1;
  transition: color var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1),
              background var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
  gap: 6px;
}

.sacc-sidebar-lock i {
  transition: transform var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
}

.sacc-sidebar-lock:hover {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.25);
}

.sacc-sidebar-lock.locked {
  color: var(--sacc-primary);
}

.sacc-sidebar-lock.locked i {
  transform: rotate(45deg);
}

/* Hide lock text + label when sidebar is collapsed */
.sidebar-narrow-unfoldable:not(:hover) .sacc-sidebar-lock .sacc-lock-label {
  display: none;
}

/* 6.10 Search filter input */
.sacc-sidebar-search {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sacc-sidebar-search-wrap {
  position: relative;
}

.sacc-sidebar-search-wrap .fa-search {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  pointer-events: none;
}

.sacc-sidebar-search input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--sacc-radius-sm);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  padding: 5px 28px 5px 26px;
  outline: none;
  transition: background var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1),
              border-color var(--sacc-sidebar-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
}

.sacc-sidebar-search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.sacc-sidebar-search input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.sacc-sidebar-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  display: none;
}

.sacc-sidebar-search-clear.visible {
  display: block;
}

/* Hide search in collapsed state */
.sidebar-narrow-unfoldable:not(:hover) .sacc-sidebar-search {
  display: none;
}

.sidebar-narrow:not(.sidebar-narrow-unfoldable) .sacc-sidebar-search {
  display: none;
}

/* 6.11 Search filter match/hidden classes */
.sidebar .nav-item.sacc-nav-hidden {
  display: none !important;
}

.sidebar .nav-item.sacc-nav-match > .nav-link {
  background: rgba(255, 255, 255, 0.05);
}

.sacc-nav-no-results {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  text-align: center;
  padding: 1rem 0.5rem;
  display: none;
}

.sacc-nav-no-results.visible {
  display: block;
}

/* 6.12 Nav-item entrance animation — REMOVED v13.5
   Previously a staggered fade+slide-in (`saccNavEntrance` 0.4s with
   30ms × index delay × up to 20 items = ~940ms total). Designed for
   single-page apps where the sidebar mounts once; in a multi-page app
   where every menu click is a full reload, this fires on every
   navigation, producing a visible "collapse then unfurl" effect users
   read as a glitch. Removed entirely — sidebar now appears in its
   final state immediately. Group-toggle animation (user-driven, not
   navigation-driven) is unaffected. */

/* 6.13 Badge styling */
.sidebar .sacc-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--sacc-radius-pill);
  background: var(--sacc-danger);
  color: #fff;
  margin-left: auto;
  line-height: 1.2;
}

.sidebar .sacc-badge:empty {
  display: none;
}

/* 6.14 Sidebar bottom section */
.sidebar-nav-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.5rem;
}

.sidebar-nav-footer .btn {
  width: 100%;
  font-size: 12px;
}

.sidebar-narrow-unfoldable:not(:hover) .sidebar-nav-footer .btn span {
  display: none;
}

/* 6.15 Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar .nav-link,
  .sidebar .nav-link .nav-icon,
  .sidebar .nav-group-items,
  .sidebar .nav-group-toggle::after,
  .sidebar .nav-group-items .nav-link::before,
  .sacc-sidebar-lock,
  .sacc-sidebar-lock i,
  .sacc-sidebar-search input,
  .sidebar.sidebar-fixed ~ * {
    transition: none !important;
    animation: none !important;
  }

  .sidebar .sidebar-nav > .nav > .nav-item {
    opacity: 1;
    animation: none !important;
  }

  .sidebar .nav-group.show > .nav-group-items {
    animation: none !important;
    opacity: 1;
    max-height: none;
  }
}




/* ==========================================================================
   7. MODULE TOOLBAR
   ========================================================================== */
.module-toolbar {
  position: sticky;
  top: var(--sacc-header-height);
  z-index: 1020;
  margin: 0 -0.5rem; /* cancel .body horizontal padding */
  padding-top: 0;
  padding-bottom: 0;
  background: #2d323f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Override CoreUI/Bootstrap navbar default padding on module toolbar */
.module-toolbar.navbar {
  --cui-navbar-padding-y: 0;
  --cui-navbar-padding-x: 0.5rem;
  --bs-navbar-padding-y: 0;
  --bs-navbar-padding-x: 0.5rem;
  margin-bottom: 0;
}

/* Compact brand inside module toolbar */
.module-toolbar .navbar-brand {
  font-size: 14px;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0.5rem;
}

.module-toolbar .nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.module-toolbar .nav-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--sacc-transition), border-color var(--sacc-transition);
}

.module-toolbar .nav-link:hover {
  color: #fff;
}

.module-toolbar .nav-link.active {
  color: #fff;
  border-bottom-color: var(--sacc-accent);
}

/* Compact card heading when module toolbar is present */
.has-module-toolbar .card-header.card-head {
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
}

/* Mobile collapse for module toolbar */
@media (max-width: 767.98px) {
  .module-toolbar .nav {
    flex-wrap: wrap;
    gap: 0;
  }
  .module-toolbar .nav-link {
    padding: 0.3rem 0.5rem;
    font-size: 11px;
  }
}


/* ==========================================================================
   8. DATATABLE STYLING (SAP Fiori Compact)
   Supports both DataTables 1.x (.dt-container) and 2.x (.dt-container)
   ========================================================================== */

/* 8a. Wrapper container */
.sacc-datatable-card {
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-lg);
  box-shadow: var(--sacc-shadow-xs);
  overflow: hidden;
  background: var(--sacc-surface);
}
/* .sacc-table-scroll — horizontal scroll for ANY table that is not a DataTable.
   Shares the .dt-container rule below rather than copying it, so the two cannot drift
   apart. Put it on the element that WRAPS the table (usually .card-body).

   Why it exists: a card table takes width:100% from Bootstrap, so it never overflows its
   container and never scrolls — it just crushes the columns. The dashboard worked around
   that by HIDING columns below a breakpoint (d-none d-md-table-cell), which made the data
   unreachable on a phone rather than merely cramped. Scrolling shows everything; hiding
   shows less and offers no route to the rest.

   Pair with the min-width rule below, or the scroller has nothing to scroll to. */
.sacc-table-scroll,
.page-content .dt-container {
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-lg);
  box-shadow: var(--sacc-shadow-xs);
  background: var(--sacc-surface);

  /* Was overflow:hidden, to clip the rounded corners. It also clipped the TABLE.
     DataTables inserts .dt-container INSIDE the page's .table-responsive wrapper, so
     the clip happened on the inner element and the outer scroller saw nothing to
     scroll: measured on a 390px phone, the table was 718px wide inside a 349px
     container whose scrollWidth still read 349. The amount column was simply cut off
     and unreachable — no scrollbar, no swipe, no way to it at all.

     overflow-x:auto restores the scroll; overflow-y stays hidden so the corner
     clipping (and the existing behaviour for anything overflowing vertically) is
     unchanged. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* Scroll shadows. A phone paints no scrollbar, so a table that scrolls looks
     identical to one that is merely cut off — which is exactly how this was reported.
     background-attachment local/scroll makes the shadow appear only while there is
     more content in that direction, with no JavaScript and no layout cost. */
  background-image:
    linear-gradient(to right, var(--sacc-surface) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--sacc-surface) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0)),
    linear-gradient(to left,  rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 11px 100%, 11px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Without a min-width the table shrinks to fit and the scroller has nothing to do.
   640px is the narrowest that keeps a six-column figures table legible; below that the
   wrapper scrolls rather than the columns crushing. */
.sacc-table-scroll > table,
.sacc-table-scroll > .table-responsive > table {
  min-width: 640px;
  margin-bottom: 0;
}

/* A card body that IS the scroller must not also clip horizontally. */
.card-body.sacc-table-scroll { overflow-x: auto; }

/* The card KEEPS overflow:hidden. Opening it up so the table could spill out was tried
   and measured: the spill propagated to the document and gave the whole page a 177px
   horizontal scroll — trading a clipped column for a page that slides sideways under
   the thumb. The scroll belongs INSIDE the card, on .dt-container above. */
/* No double-border when DataTable is inside a card wrapper */
.sacc-datatable-card .dt-container {
  border: none; box-shadow: none; border-radius: 0;
}

/* 8b-factory. sacc-dt.js dom layout — sacc-dt-top / sacc-dt-bottom
   Use with: dom: '<"sacc-dt-top"B>rt<"sacc-dt-bottom"<"sacc-dt-info"i><"d-flex...gap-2 ms-auto"lp>>'
   and add sacc-datatable-card to the wrapping .card to avoid double-border. */
.page-content .dt-container > .sacc-dt-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: var(--sacc-dt-toolbar-height);
  background: var(--sacc-surface-alt);
  border-bottom: 1px solid var(--sacc-border);
}

/* min-height, never height, and the bar is allowed to wrap.
   A fixed height on a bar whose contents can wrap is a guarantee of overflow: the info
   text, the length select and the pager need roughly 300px of width, and a phone gives
   the card about 324px. One pixel under and the inner flex wrapped to two lines inside a
   box locked at 32px, so the pager spilled out over the last rows of the grid. Measured
   at 390px: the pager rendered 70px tall in a 32px bar, with its buttons interleaved
   across two rows. Growing instead of overflowing costs nothing on a desktop, where the
   content fits on one line and min-height still holds the bar at 32px. */
.page-content .dt-container > .sacc-dt-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: var(--sacc-dt-footer-height);
  background: var(--sacc-surface-alt);
  border-top: 1px solid var(--sacc-border);
}

.page-content .dt-container > .sacc-dt-bottom .sacc-dt-info,
.page-content .dt-container > .sacc-dt-bottom .sacc-dt-info {
  font-size: var(--sacc-font-size-xs);
  color: var(--sacc-text-muted);
  white-space: nowrap;
}

/* Compact flat pagination — replaces Bootstrap's connected bordered strip.
   All elements sized to match the length select (26px) so they sit on one line. */
.sacc-dt-bottom .dt-paging {
  display: flex;
  align-items: center;
}

.sacc-dt-bottom .pagination {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sacc-dt-bottom .page-item .page-link {
  min-width: 26px;
  height: 26px !important;
  padding: 0 5px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: var(--sacc-font-size-xs) !important;
  border: none !important;
  border-radius: 4px;
  color: var(--sacc-text);
  background: transparent;
  line-height: 1 !important;
  margin-left: 0 !important;   /* cancel Bootstrap's -1px connected-border trick */
  box-shadow: none !important;
}

.sacc-dt-bottom .page-item.active .page-link,
.sacc-dt-bottom .page-item.current .page-link {
  background: var(--sacc-primary) !important;
  border-color: var(--sacc-primary) !important;
  color: #fff !important;
}

.sacc-dt-bottom .page-item:not(.active):not(.disabled):not(.current) .page-link:hover {
  background: var(--sacc-surface-hover) !important;
  border-color: transparent !important;
  color: var(--sacc-text) !important;
}

.sacc-dt-bottom .page-item.disabled .page-link {
  color: var(--sacc-text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: default;
  pointer-events: none;
}

/* Length selector — flex-align with pagination buttons */
.sacc-dt-bottom .dt-length {
  display: flex;
  align-items: center;
}
.sacc-dt-bottom .dt-length label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  white-space: nowrap;
}

/* 8c. Footer totals — sacc.dt.footerTotals(). Two stacked lines inside each
   summable footer cell (single DataTables-managed row — see helper comment for
   why a second injected <tr> is unsafe). Top = current-page subtotal (muted);
   bottom = all-filtered-records grand total (bold, primary). */
table.dataTable tfoot .dt-foot-page,
table.dataTable tfoot .dt-foot-all {
  display: block;
  line-height: 1.35;
}
table.dataTable tfoot .dt-foot-page {
  font-size: 11px;
  font-weight: 600;
  color: var(--sacc-text-muted);
}
table.dataTable tfoot .dt-foot-all {
  font-weight: 700;
  color: var(--sacc-text);
  border-top: 1px solid var(--sacc-border);
}
table.dataTable tfoot .dt-foot-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
table.dataTable tfoot .dt-foot-all.dt-foot-label {
  color: var(--sacc-primary);
}

/* 8d. Active-filter chips — sacc.dt.renderChips(). A compact row showing which
   filters are currently narrowing the grid, each removable, with "Clear all".
   Makes an over-filtered / empty grid self-explanatory. */
.sacc-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
}
.sacc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 10px;
  background: rgba(var(--sacc-primary-rgb), 0.08);
  border: 1px solid var(--sacc-border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sacc-text);
  white-space: nowrap;
}
.sacc-chip-x {
  border: none;
  background: transparent;
  color: var(--sacc-text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 50%;
}
.sacc-chip-x:hover { color: var(--sacc-danger); }
.sacc-chip-clear {
  border: none;
  background: transparent;
  color: var(--sacc-text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 8px;
}
.sacc-chip-clear:hover { color: var(--sacc-primary); text-decoration: underline; }

/* 8b. Top bar — SINGLE ROW FIX
   DT 1.x: .dt-container > .row:first-child
   DT 2.x: .dt-container > .row:first-child (BS5 layout: 'row mt-2 justify-content-between') */
.page-content .dt-container > .row:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: var(--sacc-dt-toolbar-height);
  background: var(--sacc-surface-alt);
  border-bottom: 1px solid var(--sacc-border);
  margin: 0 !important;
}

.page-content .dt-container > .row:first-child > div {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-content .dt-container > .row:first-child > div:last-child {
  margin-left: auto !important;
}

/* When the first row IS the table (dom has no toolbar controls), reset toolbar styles.
   This handles custom dom like "<'row'<'col-12'tr>>" where the table itself is in the first row. */
.page-content .dt-container > .row:first-child:has(table) {
  display: flex !important;
  flex-wrap: wrap !important;
  height: auto !important;
  min-height: 0 !important;
  background: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  gap: 0 !important;
}
.page-content .dt-container > .row:first-child:has(table) > div {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Hide "Show/entries" label text (select is INSIDE label in both DT 1.x and 2.x) */
.page-content .dt-container .dt-length label {
  font-size: 0;
  display: flex;
  align-items: center;
  margin: 0;
  gap: 0;
}

.page-content .dt-container .dt-length label select {
  font-size: var(--sacc-font-size-sm);
}

/* Hide "Search:" label text
   DT 1.x: input is INSIDE label → font-size:0 + restore on input
   DT 2.x: input is a SIBLING of label → hide label entirely */
.page-content .dt-container .dt-search label {
  font-size: 0;
  display: flex;
  align-items: center;
  margin: 0;
}

.page-content .dt-container .dt-search label input {
  font-size: var(--sacc-font-size-sm);
}

.page-content .dt-container .dt-search {
  display: flex;
  align-items: center;
  gap: 0;
}

.page-content .dt-container .dt-search label {
  /* SR-only: hide visually but keep accessible */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.page-content .dt-container .dt-search input {
  font-size: var(--sacc-font-size-sm);
}

/* Length select compact */
.page-content .dt-container .dt-length select {
  height: 26px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-sm);
  background-color: var(--sacc-surface);
  color: var(--sacc-text);
  cursor: pointer;
  min-width: 54px;
}

/* Search input — pill shape with icon */
.page-content .dt-container .dt-search input {
  height: 26px;
  padding: 0 10px 0 28px;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-pill);
  background-color: var(--sacc-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%239e9e9e' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 13px;
  color: var(--sacc-text);
  width: 180px;
  transition: border-color var(--sacc-transition), box-shadow var(--sacc-transition), width var(--sacc-transition);
}

.page-content .dt-container .dt-search input:focus {
  outline: none;
  border-color: var(--sacc-primary);
  box-shadow: 0 0 0 2px rgba(var(--sacc-primary-rgb), 0.15);
  width: 220px;
}

/* 8c. Bottom bar — DT's own BS5 row layout. Same rule as .sacc-dt-bottom above and for
   the same reason: wrap and grow rather than overflow. `nowrap` here did not prevent the
   wrap that mattered (the pager wraps INSIDE its own cell), it only stopped the bar from
   reflowing to accommodate it. */
.page-content .dt-container > .row:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: var(--sacc-dt-footer-height);
  background: var(--sacc-surface-alt);
  border-top: 1px solid var(--sacc-border);
  margin: 0 !important;
}

.page-content .dt-container > .row:last-child > div {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-content .dt-container > .row:last-child > div:last-child {
  margin-left: auto !important;
}

/* Info text */
.page-content .dt-container .dt-info {
  font-size: var(--sacc-font-size-xs);
  color: var(--sacc-text-muted);
  padding: 0;
  white-space: nowrap;
}

/* Nested flex needs min-width at EVERY level. The pager sits inside an intermediate
   `d-flex ... ms-auto` wrapper (see the dom string in sacc-dt.js), which is itself a flex
   item of the footer bar. Giving only the pager min-width: 0 changed nothing, because the
   wrapper's own automatic minimum size still held it at content width and the pair ran
   64-103px past the right edge of the bar. */
.page-content .dt-container > .sacc-dt-bottom > div,
.page-content .dt-container > .row:last-child > div,
.page-content .dt-container > .sacc-dt-top > div,
.page-content .dt-container > .row:first-child > div {
  min-width: 0;
}

/* Export / column-visibility button group — wraps instead of forcing a page-wide
   horizontal scrollbar on a narrow screen. */
.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}

/* Bare icons, no chrome.
   DataTables' Bootstrap 5 styling gives every export button `btn btn-secondary`, so Excel,
   PDF and the column picker rendered as three filled dark-grey blocks. They sit in a page
   toolbar next to the screen's actual primary action and were reading louder than it —
   these are utilities, not the point of the page. Icon-only, transparent, with the ink
   supplied on hover instead. Applied globally: every grid in the product uses this group. */
.dt-buttons > .btn,
.dt-buttons > .btn-group > .btn,
.dt-buttons > .dt-button,
.dt-buttons > .btn-group > .dt-button {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--sacc-text-muted) !important;
  padding: 5px 7px !important;
  border-radius: var(--sacc-radius-sm);
  line-height: 1;
  transition: background var(--sacc-transition), color var(--sacc-transition);
}

.dt-buttons > .btn:hover,
.dt-buttons > .btn-group > .btn:hover,
.dt-buttons > .btn:focus-visible,
.dt-buttons > .btn-group > .btn:focus-visible {
  background: var(--sacc-surface-hover) !important;
  color: var(--sacc-text) !important;
  border-color: var(--sacc-border) !important;
}

/* While a collection is open its button should read as pressed, since nothing else does. */
.dt-buttons > .btn-group > .btn.active,
.dt-buttons > .btn.active {
  background: var(--sacc-surface-hover) !important;
  color: var(--sacc-primary) !important;
  border-color: var(--sacc-border) !important;
}

.dt-buttons .btn i,
.dt-buttons .dt-button i {
  font-size: 15px;
}

/* The group is icon-only, so the dropdown caret is noise on top of a caret-shaped icon. */
.dt-buttons .buttons-collection.dropdown-toggle::after {
  display: none;
}

/* A button that keeps a text label (a page's own extraButtons) still needs its icon
   spaced off the words. */
.dt-buttons .btn i.me-1 {
  margin-right: 0.25rem !important;
}

/* Pagination — global (not scoped to .page-content).
   nowrap on the pager itself: when it was allowed to wrap, the five buttons broke across
   two rows and their x-positions interleaved (first/prev/1 on one line, next/last tucked
   underneath and to the LEFT of them), which is what "disfigured pagination" looked like
   on a phone. The pager is a single control and must stay a single line; the bar around
   it is what wraps and grows. */
.dt-container .dt-paging {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  line-height: 1;
  /* A pager with many pages cannot always fit, and wrapping it is the worst answer
     available — the buttons reorder visually. Scroll it instead: it stays one line, stays
     in reading order, and stays reachable.

     min-width: 0 is what makes that work. A flex item's automatic minimum size is its
     content, so max-width: 100% and overflow-x: auto are both ignored until the item is
     allowed to shrink below its content — without it the pager simply ran 64-103px past
     the right edge of the footer bar instead of scrolling inside it. */
  min-width: 0;
  flex-shrink: 1;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.dt-container .dt-paging::-webkit-scrollbar { height: 0; }

/* The Bootstrap-markup variant of the same control. DataTables' own stylesheet carries
   `div.dt-container div.dt-paging ul.pagination { margin: 2px 0; flex-wrap: wrap }` at
   specificity (0,3,3); a lower-specificity rule here silently lost to it, which is why the
   pager kept wrapping after the first attempt. The 2px margins were also the whole of the
   pager's excess height (32px control in a 36px box). */
.dt-container .dt-paging nav,
div.dt-container div.dt-paging ul.pagination {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  margin: 0 !important;
}

.dt-container .dt-paging .dt-paging-button {
  font-size: var(--sacc-font-size-xs);
  padding: 2px 8px;
  border-radius: var(--sacc-radius-sm);
  border: 1px solid var(--sacc-border, #dee2e6);
  color: var(--sacc-text-secondary) !important;
  margin: 0 1px;
  min-width: 24px;
  text-align: center;
  flex: 0 0 auto;
}

/* Phones. The three footer controls cannot share one line inside ~320px, so stop them
   fighting for it: the row count goes on its own line, and the length select and pager
   sit together underneath. Applies to both bottom-bar implementations. */
@media (max-width: 575.98px) {
  .page-content .dt-container > .sacc-dt-bottom,
  .page-content .dt-container > .row:last-child {
    justify-content: center;
    row-gap: 4px;
    padding: 6px 8px;
  }

  .page-content .dt-container > .sacc-dt-bottom .sacc-dt-info,
  .page-content .dt-container > .sacc-dt-bottom .dt-info,
  .page-content .dt-container > .row:last-child .dt-info {
    flex: 1 1 100%;
    text-align: center;
  }

  /* ms-auto in the DT dom string would otherwise shove this pair off to the right of a
     line it no longer shares with anything. */
  .page-content .dt-container > .sacc-dt-bottom > .ms-auto,
  .page-content .dt-container > .row:last-child > div:last-child {
    margin-left: 0 !important;
    justify-content: center;
  }

  /* Tighter pager so five buttons clear a 320px line. */
  .dt-container .dt-paging .dt-paging-button {
    padding: 2px 5px;
    min-width: 22px;
    margin: 0;
  }
  .sacc-dt-bottom .page-item .page-link {
    min-width: 22px;
    padding: 0 3px !important;
  }
}

.dt-container .dt-paging .dt-paging-button:hover {
  background: var(--sacc-surface-hover) !important;
  border-color: var(--sacc-border) !important;
  color: var(--sacc-text) !important;
}

.dt-container .dt-paging .dt-paging-button.current {
  background: var(--sacc-primary) !important;
  border-color: var(--sacc-primary) !important;
  color: #fff !important;
  font-weight: 600;
}

.dt-container .dt-paging .dt-paging-button.disabled {
  color: var(--sacc-text-muted) !important;
  opacity: 0.5;
  cursor: default;
}

/* Bootstrap-style pagination — global fix for invisible borders */
.page-link {
  border: 1px solid var(--sacc-border, #dee2e6) !important;
  color: var(--sacc-text-secondary, #6c757d);
}

.page-link:hover {
  background: var(--sacc-surface-hover, #f0f0f0) !important;
  border-color: var(--sacc-border, #dee2e6) !important;
  color: var(--sacc-text, #212529);
}

.dt-container .dt-paging nav .page-link {
  font-size: var(--sacc-font-size-xs);
  padding: 2px 8px;
  line-height: 1.4;
}

.dt-container .dt-paging nav .page-item.active .page-link,
#dtPagination .page-item.active .page-link,
.page-item.active > .page-link {
  background: var(--sacc-primary) !important;
  border-color: var(--sacc-primary) !important;
  color: #fff !important;
}

.dt-container .dt-paging nav .page-item.disabled .page-link {
  color: var(--sacc-text-muted);
  opacity: 0.5;
}

/* 8c-extra. Plain Bootstrap tables (not DataTables) — applies to SaaS Admin
   and any page that uses .table without DataTables.js.
   Ensures cell content never touches grid borders. DataTables cells have their
   own padding rules below (8d/8e) which take priority due to higher specificity. */
.page-content .table:not(.dataTable) > thead > tr > th,
.page-content .table:not(.dataTable) > thead > tr > td {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sacc-text-muted);
  background: var(--sacc-surface-alt, #f8fafc);
  border-bottom: 2px solid var(--sacc-border-strong, #dee2e6);
  white-space: nowrap;
}
/* Vertical padding reduced 9px -> 6px (and 6px -> 4px for .table-sm) on 28 Aug 2026.
   Horizontal is deliberately unchanged: it is what stops text touching the card
   border. These values only became visible when sacc.css's global
   `td { padding: 2px !important }` was removed - they had been specified all along
   and suppressed, so the first thing anyone saw of them was rows that felt tall. */
.page-content .table:not(.dataTable) > tbody > tr > td,
.page-content .table:not(.dataTable) > tbody > tr > th {
  padding: 6px 14px;
  font-size: 13px;
  vertical-align: middle;
  border-bottom: 1px solid var(--sacc-border, #e9ecef);
  color: var(--sacc-text);
}
.page-content .table-sm:not(.dataTable) > thead > tr > th,
.page-content .table-sm:not(.dataTable) > thead > tr > td {
  padding: 4px 12px;
}
.page-content .table-sm:not(.dataTable) > tbody > tr > td,
.page-content .table-sm:not(.dataTable) > tbody > tr > th {
  padding: 4px 12px;
  font-size: 12px;
}
[data-bs-theme="dark"] .page-content .table:not(.dataTable) > thead > tr > th,
[data-coreui-theme="dark"] .page-content .table:not(.dataTable) > thead > tr > th {
  background: var(--sacc-surface-alt);
}

/* 8d. Table headers */
.page-content .dt-container table.dataTable thead th,
.page-content .dt-container table.dataTable thead td {
  font-size: var(--sacc-dt-header-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sacc-text-muted);
  background: var(--sacc-surface-alt);
  border-bottom: 2px solid var(--sacc-border-strong) !important;
  padding: 6px 10px;
  white-space: nowrap;
}

/* 8e. Table cells */
.page-content .dt-container table.dataTable tbody td {
  font-size: var(--sacc-dt-cell-font);
  padding: 4px 10px;
  height: var(--sacc-dt-row-height);
  border-bottom: 1px solid var(--sacc-border);
  color: var(--sacc-text);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.page-content .dt-container table.dataTable tbody tr:hover td {
  background: var(--sacc-surface-hover);
}

.page-content .dt-container table.dataTable tbody tr:hover td:first-child {
  /* Hover row marker — 2px is enough to read at-a-glance without crowding
     the cell content; the extra padding-left clears the stripe from the
     first character so the name doesn't touch the bar. */
  box-shadow: inset 2px 0 0 var(--sacc-primary);
  padding-left: 14px;
}

/* Selected rows — override DataTables default solid blue with soft theme tint.
   site.css paints via `box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected))`,
   so we override at the same specificity and with box-shadow (not background-color). */
table.table.dataTable > tbody > tr.selected > *,
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > *,
table.table.dataTable.table-hover > tbody > tr.selected > *,
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
  box-shadow: inset 0 0 0 9999px rgba(var(--sacc-primary-rgb), 0.14) !important;
  background-color: transparent !important;
  color: var(--sacc-text) !important;
}
table.table.dataTable.table-hover > tbody > tr.selected:hover > *,
table.dataTable tbody tr.selected:hover td {
  box-shadow: inset 0 0 0 9999px rgba(var(--sacc-primary-rgb), 0.20) !important;
  color: var(--sacc-text) !important;
}
table.table.dataTable > tbody > tr.selected a,
table.dataTable tbody tr.selected a {
  color: var(--sacc-primary) !important;
}
[data-theme="dark"] table.table.dataTable > tbody > tr.selected > *,
[data-theme="dark"] table.dataTable tbody tr.selected,
[data-theme="dark"] table.dataTable tbody tr.selected td {
  box-shadow: inset 0 0 0 9999px rgba(var(--sacc-primary-rgb), 0.28) !important;
  color: var(--sacc-text) !important;
}

/* Striped rows */
.page-content .dt-container table.dataTable.table-striped tbody tr:nth-of-type(odd) td {
  background: var(--sacc-gray-50);
}

[data-theme="dark"] .page-content .dt-container table.dataTable.table-striped tbody tr:nth-of-type(odd) td,
[data-coreui-theme="dark"] .page-content .dt-container table.dataTable.table-striped tbody tr:nth-of-type(odd) td {
  background: rgba(255, 255, 255, 0.02);
}

.page-content .dt-container table.dataTable.table-striped tbody tr:hover td {
  background: var(--sacc-surface-hover);
}

/* 8f. Table footer (totals) */
.page-content .dt-container table.dataTable tfoot th,
.page-content .dt-container table.dataTable tfoot td {
  font-size: var(--sacc-dt-cell-font);
  font-weight: 700;
  padding: 6px 10px;
  border-top: 2px solid var(--sacc-border-strong);
  background: var(--sacc-surface-alt);
  color: var(--sacc-text);
}

/* 8g. Export buttons — inside DT wrapper, or moved to .inv-toolbar via buttonsTarget */
.page-content .dt-container .dt-buttons .btn,
.page-content .dt-container .dt-buttons button.dt-button,
.inv-toolbar .dt-buttons .btn,
.inv-toolbar .dt-buttons button.dt-button {
  font-size: var(--sacc-font-size-xs) !important;
  height: 26px !important;
  padding: 0 10px !important;
  line-height: 24px !important;
  border: 1px solid var(--sacc-border) !important;
  border-radius: var(--sacc-radius-sm) !important;
  background: var(--sacc-surface) !important;
  color: var(--sacc-text-secondary) !important;
  transition: all var(--sacc-transition);
}

.page-content .dt-container .dt-buttons .btn:hover,
.page-content .dt-container .dt-buttons button.dt-button:hover,
.inv-toolbar .dt-buttons .btn:hover,
.inv-toolbar .dt-buttons button.dt-button:hover {
  background: var(--sacc-primary) !important;
  border-color: var(--sacc-primary) !important;
  color: #fff !important;
}

/* 8g-colvis. Column visibility popup — override DataTables hardcoded teal.
   Uses CSS variables throughout so light/dark mode apply automatically. */
.dt-button-collection {
  background: var(--sacc-surface) !important;
  border: 1px solid var(--sacc-border) !important;
  border-radius: var(--sacc-radius) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
  padding: 4px 0 !important;
  min-width: 160px;
}

.dt-button-collection button.dt-button,
.dt-button-collection a.dt-button,
.dt-button-collection div.dt-button {
  display: block !important;
  width: 100% !important;
  padding: 6px 14px !important;
  font-size: var(--sacc-font-size-xs) !important;
  font-family: inherit !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--sacc-text) !important;
  box-shadow: none !important;
  transition: background var(--sacc-transition);
}

.dt-button-collection button.dt-button:hover,
.dt-button-collection a.dt-button:hover,
.dt-button-collection div.dt-button:hover {
  background: var(--sacc-surface-hover) !important;
  color: var(--sacc-text) !important;
}

.dt-button-collection button.dt-button.active,
.dt-button-collection a.dt-button.active,
.dt-button-collection div.dt-button.active {
  background: transparent !important;
  color: var(--sacc-primary) !important;
  font-weight: 600 !important;
}

.dt-button-collection button.dt-button.active::before,
.dt-button-collection a.dt-button.active::before,
.dt-button-collection div.dt-button.active::before {
  content: '✓\00a0';
  font-size: 10px;
}

/* 8h. Scroll wrappers */
.page-content .dt-container .dt-scroll-head {
  background: var(--sacc-surface-alt);
}

.page-content .dt-container .dt-scroll-foot {
  background: var(--sacc-surface-alt);
}

.page-content .dt-container .dt-scroll-body {
  border-bottom: 1px solid var(--sacc-border);
}

/* 8i. Processing / empty states */
.dt-container .dt-processing {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: var(--sacc-surface);
  color: var(--sacc-text-secondary);
  font-size: var(--sacc-font-size-sm);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  padding: 10px 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
}
.dt-container { position: relative; }

.page-content .dt-container table.dataTable tbody .dt-empty {
  color: var(--sacc-text-muted);
  font-size: var(--sacc-font-size-sm);
  padding: 24px;
  text-align: center;
}

/* 8i-sort. DT 2.1.8 JS emits th.dt-orderable-asc/desc and span.dt-column-order.
   datatables.css renders the arrows natively; we override active colour to project
   primary token and ensure the th has room + relative positioning. */
.page-content table.dataTable thead > tr > th.dt-orderable-asc,
.page-content table.dataTable thead > tr > th.dt-orderable-desc {
  cursor: pointer;
  padding-right: 22px !important;
  position: relative;
}
.page-content table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::after {
  opacity: 1 !important;
  color: var(--sacc-primary);
}
.page-content table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::before {
  opacity: 1 !important;
  color: var(--sacc-primary);
}

/* 8i-hover. Sortable header hover outline — use --sacc-border (works light + dark) */
.page-content table.dataTable thead > tr > th.dt-orderable-asc:hover,
.page-content table.dataTable thead > tr > th.dt-orderable-desc:hover,
.page-content table.dataTable thead > tr > th.dt-ordering-asc:hover,
.page-content table.dataTable thead > tr > th.dt-ordering-desc:hover {
  outline: 2px solid var(--sacc-border) !important;
  outline-offset: -2px;
}

/* 8j. Checkbox styling */
.page-content .dt-container table.dataTable input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--sacc-primary);
  cursor: pointer;
}

/* Row animation */
.page-content .dt-container table.dataTable tbody tr {
  transition: background var(--sacc-transition);
}

.sacc-row-animated {
  animation: saccFadeIn 0.15s ease-out both;
}

@keyframes saccFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   9. VIEW TOGGLE
   ========================================================================== */
.sacc-view-toggle {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-sm);
  overflow: hidden;
}

.sacc-view-toggle .btn {
  height: 26px;
  width: 30px;
  padding: 0;
  line-height: 26px;
  text-align: center;
  font-size: 12px;
  border: 0;
  border-radius: 0;
  color: var(--sacc-text-muted);
  background: var(--sacc-surface);
  transition: all var(--sacc-transition);
}

.sacc-view-toggle .btn:hover {
  color: var(--sacc-text);
  background: var(--sacc-surface-hover);
}

.sacc-view-toggle .btn.active {
  background: var(--sacc-primary);
  color: #fff;
}

/* View toolbar — the DT top-bar row lifted outside the wrapper in grid mode.
   .grid-active is added when the row is moved out. Must replicate section 8b
   layout since the row loses its .dt-container > .row:first-child scope. */
.sacc-view-toolbar.grid-active {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: var(--sacc-dt-toolbar-height);
  min-height: var(--sacc-dt-toolbar-height);
  background: var(--sacc-surface-alt);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-lg);
  margin-bottom: 0.5rem;
}

/* Children: replicate section 8b child sizing */
.sacc-view-toolbar.grid-active > div {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Push the last child (search) to the right */
.sacc-view-toolbar.grid-active > div:last-child {
  margin-left: auto !important;
}

/* Hide raw label text for length & search — same technique as section 8b */
.sacc-view-toolbar.grid-active .dt-length label {
  font-size: 0;
  display: flex;
  align-items: center;
  margin: 0;
}

.sacc-view-toolbar.grid-active .dt-length label select {
  font-size: var(--sacc-font-size-sm);
}

.sacc-view-toolbar.grid-active .dt-search label {
  font-size: 0;
  display: flex;
  align-items: center;
  margin: 0;
}

.sacc-view-toolbar.grid-active .dt-search input {
  font-size: var(--sacc-font-size-sm);
  height: 26px;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-sm);
  padding: 2px 8px;
  background: var(--sacc-surface);
  color: var(--sacc-text);
}

.sacc-view-toolbar.grid-active .dt-search input:focus {
  border-color: var(--sacc-border-focus);
  box-shadow: 0 0 0 2px rgba(32, 168, 216, 0.15);
  outline: none;
}

/* DT 2.x: hide the label element entirely, keep just the input */
.sacc-view-toolbar.grid-active .dt-search label {
  display: none;
}

.sacc-view-toolbar.grid-active .dt-search {
  display: flex;
  align-items: center;
}

/* Card grid layout */
.sacc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  padding: 0.5rem 0;
}

/* Card items */
.sacc-card-item {
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  padding: 0;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
}

.sacc-card-item:hover {
  border-color: var(--sacc-primary);
  box-shadow: var(--sacc-shadow);
  transform: translateY(-2px);
}

.sacc-card-item-photo {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--sacc-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--sacc-border);
}
.sacc-card-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s;
}
.sacc-card-item:hover .sacc-card-item-photo img {
  transform: scale(1.04);
}
.sacc-card-item-photo i {
  font-size: 36px;
  color: var(--sacc-text-muted);
  opacity: 0.3;
}

.sacc-card-item-header {
  padding: 8px 12px;
  font-weight: 600;
  font-size: var(--sacc-font-size-sm);
  color: var(--sacc-primary);
  border-bottom: 1px solid var(--sacc-border);
  background: var(--sacc-surface-alt);
}

.sacc-card-item-body {
  padding: 10px 12px;
  font-size: var(--sacc-font-size-sm);
  color: var(--sacc-text);
  line-height: 1.5;
}

.sacc-card-item-body strong {
  color: var(--sacc-text);
}

.sacc-card-item-body div + div {
  margin-top: 2px;
  color: var(--sacc-text-muted);
}

.sacc-card-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--sacc-border);
  font-size: 0.75rem;
  color: var(--sacc-text-muted);
  background: var(--sacc-surface-alt);
}

.sacc-card-item-footer strong {
  color: var(--sacc-text);
  font-size: var(--sacc-font-size-sm);
}

/* ── Overdue audit banner (hotel night audit + clinic day audit) ──────── */
.na-overdue-banner {
    background: rgba(229, 83, 83, 0.08);
    border: 1px solid rgba(229, 83, 83, 0.30);
    border-left: 4px solid var(--sacc-danger, #dc3545);
    color: #a52f2f;
    padding: 10px 14px; margin: 0 0 10px;
    border-radius: var(--sacc-radius);
}
.na-overdue-content { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.na-overdue-icon { font-size: 18px; flex-shrink: 0; }
.na-overdue-msg { flex: 1; font-size: 13px; min-width: 200px; }
.na-overdue-cta, .na-overdue-history {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 12px;
    border-radius: var(--sacc-radius-sm, 4px);
    text-decoration: none;
}
.na-overdue-cta {
    background: var(--sacc-danger, #dc3545); color: #fff !important;
}
.na-overdue-cta:hover { background: var(--sacc-danger-hover, #c52232); color: #fff !important; }
.na-overdue-history {
    color: var(--sacc-text); border: 1px solid var(--sacc-border-strong);
    background: var(--sacc-surface);
}
.na-overdue-history:hover { background: var(--sacc-surface-hover); }

/* Empty state */
.sacc-card-grid:empty::after {
  content: 'No records to display';
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--sacc-text-muted);
  font-size: var(--sacc-font-size-sm);
}


/* ==========================================================================
   10. FILTER SECTION
   ========================================================================== */
.sacc-filter-section {
  position: relative;
  background: var(--sacc-filter-bg);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  padding: 10px 12px;
  margin-bottom: 0.75rem;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  overflow: visible;
}

.sacc-filter-section .row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6px;
  align-items: end;
}

.sacc-filter-section .row.d-none-force {
  display: none !important;
}

.sacc-filter-section .row > [class*="col"] {
  display: block !important;
}

.sacc-filter-section .row:last-child {
  margin-bottom: 0;
}

.sacc-filter-section label {
  font-size: var(--sacc-filter-label-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sacc-text-muted);
  margin-bottom: 3px;
}

.sacc-filter-section .form-control,
.sacc-filter-section select {
  width: 100%;
  display: block;
  height: var(--sacc-filter-input-height);
  font-size: var(--sacc-font-size-sm);
  padding: 2px 8px;
  border-color: var(--sacc-border);
  border-radius: var(--sacc-radius-sm);
  background: var(--sacc-surface);
}

/* Shared dropdown alignment — ensures all selects fill their parent */
select.m_select,
select.form-select,
.row > [class*="col"] > select {
  width: 100%;
  display: block;
}

.sacc-filter-section .form-control:focus,
.sacc-filter-section select:focus {
  border-color: var(--sacc-primary);
  box-shadow: 0 0 0 2px rgba(var(--sacc-primary-rgb), 0.12);
}

/* SACC Select inside filter section */
.sacc-filter-section .sacc-sel-wrap {
  min-height: var(--sacc-filter-input-height);
  line-height: calc(var(--sacc-filter-input-height) - 2px);
  font-size: var(--sacc-font-size-sm);
  border-color: var(--sacc-border);
}

/* Action buttons column — invisible label spacer to align with filter inputs */
.sacc-filter-section .col-auto.d-flex {
  flex-direction: column;
}

.sacc-filter-section .col-auto.d-flex::before {
  content: '\00a0';
  font-size: var(--sacc-filter-label-font);
  font-weight: 600;
  line-height: normal;
  margin-bottom: 3px;
  visibility: hidden;
}

.sacc-filter-section hr {
  margin: 4px 0;
  border-color: var(--sacc-border);
}

.sacc-filter-section .hidden {
  display: none !important;
}

/* Collapsed state */
.sacc-filter-section.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border: 0;
  overflow: hidden;
}

/* Date preset segmented pills (Today/Week/Month/Qtr).
   Promoted to global from Views/Invoices/Index.cshtml's inline <style> so every
   filterable list page (Loans Index/Loandue/Loanrepaylist/Loansummary, etc.)
   gets the modern segmented look instead of plain browser buttons. */
.inv-date-presets {
  display: flex;
  gap: 2px;
  border: 1px solid var(--sacc-border);
  border-radius: 6px;
  overflow: hidden;
  height: 30px;
}
.inv-preset-btn {
  border: none;
  background: var(--sacc-surface);
  color: var(--sacc-text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.inv-preset-btn:hover { background: var(--sacc-primary-bg); color: var(--sacc-primary); }
.inv-preset-btn.active { background: var(--sacc-primary); color: #fff; }

/* Filter toggle button */
.sacc-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--sacc-font-size-xs);
  font-weight: 500;
  color: var(--sacc-text-secondary);
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-sm);
  cursor: pointer;
  margin-bottom: 8px;
  transition: all var(--sacc-transition);
}

.sacc-filter-toggle:hover {
  background: var(--sacc-surface-hover);
  border-color: var(--sacc-border-strong);
}

.sacc-filter-toggle i {
  transition: transform 0.2s ease;
  font-size: 10px;
}

.sacc-filter-toggle.collapsed i {
  transform: rotate(-90deg);
}

/* Filter count badge */
.sacc-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--sacc-primary);
  border-radius: var(--sacc-radius-pill);
}

.sacc-filter-count:empty,
.sacc-filter-count[data-count="0"] {
  display: none;
}

/* Global filter row styling (before JS wraps into .sacc-filter-section) */
.page-content > .row:not(.sacc-filter-section .row) {
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   11. PAGE ACTION BUTTONS
   ========================================================================== */
.sacc-page-actions,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.sacc-page-actions .btn,
.page-actions .btn {
  font-size: var(--sacc-font-size-sm);
  padding: 4px 12px;
  height: 30px;
  border-radius: var(--sacc-radius-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Button variants
   background uses !important to beat Bootstrap's cascade:
   .btn { background-color: var(--bs-btn-bg) } loads after this file and
   wins on equal specificity, making filled buttons transparent until hover. */
.btn-action-primary {
  background: var(--sacc-primary) !important;
  color: #fff !important;
  border: 1px solid var(--sacc-primary) !important;
}
.btn-action-primary i,
.btn-action-primary .fa,
.btn-action-primary .fas,
.btn-action-primary .far {
  color: #fff !important;
}

.btn-action-primary:disabled, .btn-action-primary.disabled {
  background: var(--sacc-primary) !important;
  border-color: var(--sacc-primary) !important;
  color: #fff !important;
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-action-primary:hover:not(:disabled) {
  background: var(--sacc-primary-hover) !important;
  border-color: var(--sacc-primary-hover) !important;
  color: #fff !important;
}

.btn-action-ghost:not(.btn-action-primary):not(.btn-action-success):not(.btn-action-warning):not(.btn-action-danger):not(.btn-action-info) {
  background: transparent !important;
  border: 1px solid var(--sacc-border);
  color: var(--sacc-text-secondary);
}

.btn-action-ghost:not(.btn-action-primary):not(.btn-action-success):not(.btn-action-warning):not(.btn-action-danger):not(.btn-action-info):hover {
  background: var(--sacc-surface-hover) !important;
  border-color: var(--sacc-border-strong);
  color: var(--sacc-text);
}

.btn-action-success {
  background: var(--sacc-success) !important;
  color: #fff !important;
  border: 1px solid var(--sacc-success) !important;
}
.btn-action-success:hover:not(:disabled) {
  filter: brightness(0.9);
}

.btn-action-warning {
  background: var(--sacc-warning) !important;
  color: #fff !important;
  border: 1px solid var(--sacc-warning) !important;
}
.btn-action-warning:hover:not(:disabled) {
  filter: brightness(0.9);
}

.btn-action-danger {
  background: var(--sacc-danger) !important;
  color: #fff !important;
  border: 1px solid var(--sacc-danger) !important;
}
.btn-action-danger:hover:not(:disabled) {
  filter: brightness(0.9);
}

.btn-action-outline {
  background: transparent !important;
  border: 1px solid var(--sacc-primary) !important;
  color: var(--sacc-primary) !important;
}
.btn-action-outline:hover:not(:disabled) {
  background: var(--sacc-primary) !important;
  color: #fff !important;
}

.btn-action-dark {
  background: var(--sacc-gray-800) !important;
  color: #fff !important;
  border: 1px solid var(--sacc-gray-800) !important;
}
.btn-action-dark:hover:not(:disabled) {
  filter: brightness(0.85);
}

/* Global: all filled action buttons must have white icons */
.btn-action-primary i, .btn-action-primary .fa, .btn-action-primary .fas,
.btn-action-success i, .btn-action-success .fa, .btn-action-success .fas,
.btn-action-danger i, .btn-action-danger .fa, .btn-action-danger .fas,
.btn-action-warning i, .btn-action-warning .fa, .btn-action-warning .fas,
.btn-action-dark i, .btn-action-dark .fa, .btn-action-dark .fas,
.btn-primary i, .btn-primary .fa, .btn-primary .fas,
.btn-success i, .btn-success .fa, .btn-success .fas,
.btn-danger i, .btn-danger .fa, .btn-danger .fas,
.btn-dark i, .btn-dark .fa, .btn-dark .fas {
  color: inherit !important;
}

/* Button group/dropdown support */
.sacc-page-actions .dropdown-toggle::after,
.page-actions .dropdown-toggle::after {
  margin-left: 4px;
}

.sacc-page-actions .dropdown-menu,
.page-actions .dropdown-menu {
  font-size: var(--sacc-font-size-sm);
}

/* Split button: ensure the toggle caret is also compact */
.sacc-page-actions .btn-group .btn,
.page-actions .btn-group .btn {
  height: 30px;
  padding: 4px 10px;
}

/* Split button separator — visible border between main button and caret */
.sacc-page-actions .btn-group .dropdown-toggle-split,
.page-actions .btn-group .dropdown-toggle-split {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 8px;
  padding-right: 8px;
}

/* Ensure split-button dropdowns align to the full btn-group, not the caret */
.sacc-page-actions .btn-group > .dropdown-menu,
.page-actions .btn-group > .dropdown-menu {
  min-width: 100%;
  inset: auto !important;
  top: 100% !important;
  left: 0 !important;
  transform: none !important;
  margin-top: 2px;
}

/* Page action separator — vertical divider between button groups */
.page-actions-separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--sacc-border);
  margin: 0 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .sacc-page-actions,
  .page-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .sacc-page-actions .btn,
  .page-actions .btn {
    width: 100%;
  }
  .page-actions-separator {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   11b. ROW ACTION ICONS (DataTable cells)
   Styles bare link/span action buttons rendered by JS in table columns.
   Uses :not(.btn) to avoid conflicting with Pattern B (.btn.btn-sm) rows.
   -------------------------------------------------------------------------- */
td .btnview:not(.btn),
td .btnedit:not(.btn),
td .btndelete:not(.btn),
td .deletebtn:not(.btn),
td .btnprint:not(.btn),
td .btnprintinv:not(.btn),
td .btneditinv:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--sacc-radius-sm);
  color: var(--sacc-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  vertical-align: middle;
  margin-left: 2px;
}

/* Override inline text-primary / text-success / text-warning on child icons */
td .btnview:not(.btn) > *,
td .btnedit:not(.btn) > *,
td .btndelete:not(.btn) > *,
td .deletebtn:not(.btn) > *,
td .btnprint:not(.btn) > *,
td .btnprintinv:not(.btn) > *,
td .btneditinv:not(.btn) > * {
  color: inherit !important;
}

/* Remove left margin from the first icon */
td .btnview:not(.btn):first-child,
td .btnedit:not(.btn):first-child,
td .btndelete:not(.btn):first-child,
td .deletebtn:not(.btn):first-child,
td .btnprint:not(.btn):first-child {
  margin-left: 0;
}

/* Hover — view / print: blue tint */
td .btnview:not(.btn):hover,
td .btnprint:not(.btn):hover,
td .btnprintinv:not(.btn):hover {
  background: rgba(32, 168, 216, 0.10);
  color: #20a8d8;
}

/* Hover — edit: primary tint */
td .btnedit:not(.btn):hover,
td .btneditinv:not(.btn):hover {
  background: rgba(var(--sacc-primary-rgb, 32, 168, 216), 0.10);
  color: var(--sacc-primary);
}

/* Hover — delete: red tint */
td .btndelete:not(.btn):hover,
td .deletebtn:not(.btn):hover {
  background: rgba(229, 83, 83, 0.10);
  color: #e55353;
}

/* Pattern B: rows using .btn.btn-sm — make compact */
td .btn.btn-sm {
  height: 24px;
  padding: 2px 8px;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}


/* --------------------------------------------------------------------------
   11c. OVERFLOW MENU PATTERN (progressive adoption)
   CSS-only foundation for a ⋮ dropdown — views can adopt gradually.
   Uses Bootstrap data-bs-toggle="dropdown", no custom JS needed.
   -------------------------------------------------------------------------- */
.page-actions-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-sm);
  background: transparent;
  color: var(--sacc-text-secondary);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.15s, border-color 0.15s;
}

.page-actions-more:hover {
  background: var(--sacc-surface-hover);
  border-color: var(--sacc-border-strong);
  color: var(--sacc-text);
}

.page-actions-overflow .dropdown-menu {
  min-width: 160px;
  font-size: var(--sacc-font-size-sm);
  padding: 4px 0;
}

.page-actions-overflow .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: var(--sacc-font-size-sm);
}

.page-actions-overflow .dropdown-item i,
.page-actions-overflow .dropdown-item .fa {
  width: 16px;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.7;
}

.dropdown-item-danger {
  color: var(--sacc-danger) !important;
}

.dropdown-item-danger:hover {
  background: rgba(229, 83, 83, 0.10);
  color: var(--sacc-danger) !important;
}


/* --------------------------------------------------------------------------
   11d. DARK MODE — Row actions & overflow menu
   -------------------------------------------------------------------------- */
[data-theme="dark"] td .btnview:not(.btn),
[data-coreui-theme="dark"] td .btnview:not(.btn),
[data-theme="dark"] td .btnedit:not(.btn),
[data-coreui-theme="dark"] td .btnedit:not(.btn),
[data-theme="dark"] td .btndelete:not(.btn),
[data-coreui-theme="dark"] td .btndelete:not(.btn),
[data-theme="dark"] td .deletebtn:not(.btn),
[data-coreui-theme="dark"] td .deletebtn:not(.btn),
[data-theme="dark"] td .btnprint:not(.btn),
[data-coreui-theme="dark"] td .btnprint:not(.btn),
[data-theme="dark"] td .btnprintinv:not(.btn),
[data-coreui-theme="dark"] td .btnprintinv:not(.btn),
[data-theme="dark"] td .btneditinv:not(.btn),
[data-coreui-theme="dark"] td .btneditinv:not(.btn) {
  color: var(--sacc-text-muted);
}

[data-theme="dark"] td .btnview:not(.btn):hover,
[data-coreui-theme="dark"] td .btnview:not(.btn):hover,
[data-theme="dark"] td .btnprint:not(.btn):hover,
[data-coreui-theme="dark"] td .btnprint:not(.btn):hover,
[data-theme="dark"] td .btnprintinv:not(.btn):hover,
[data-coreui-theme="dark"] td .btnprintinv:not(.btn):hover {
  background: rgba(32, 168, 216, 0.15);
  color: #4fc3f7;
}

[data-theme="dark"] td .btnedit:not(.btn):hover,
[data-coreui-theme="dark"] td .btnedit:not(.btn):hover,
[data-theme="dark"] td .btneditinv:not(.btn):hover,
[data-coreui-theme="dark"] td .btneditinv:not(.btn):hover {
  background: rgba(32, 168, 216, 0.15);
  color: #4fc3f7;
}

[data-theme="dark"] td .btndelete:not(.btn):hover,
[data-coreui-theme="dark"] td .btndelete:not(.btn):hover,
[data-theme="dark"] td .deletebtn:not(.btn):hover,
[data-coreui-theme="dark"] td .deletebtn:not(.btn):hover {
  background: rgba(229, 83, 83, 0.15);
  color: #ef9a9a;
}

/* Dark overflow menu — stronger shadow, dark surface */
[data-theme="dark"] .page-actions-overflow .dropdown-menu,
[data-coreui-theme="dark"] .page-actions-overflow .dropdown-menu {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}


/* --------------------------------------------------------------------------
   11d. BOOTSTRAP BADGE OVERRIDES — softer, higher-contrast badges
   Override the solid Bootstrap bg-success/danger/warning/info with our
   soft-color palette for better readability.
   -------------------------------------------------------------------------- */
.badge.bg-success {
  background: var(--sacc-success-bg, #e8f5e9) !important;
  color: var(--sacc-success, #2e7d32) !important;
  font-weight: 600;
}
.badge.bg-danger {
  background: var(--sacc-danger-bg, #fce4ec) !important;
  color: var(--sacc-danger, #c62828) !important;
  font-weight: 600;
}
.badge.bg-warning {
  background: var(--sacc-warning-bg, #fff3e0) !important;
  color: var(--sacc-warning, #f57c00) !important;
  font-weight: 600;
}
.badge.bg-info {
  background: var(--sacc-info-bg, #e1f5fe) !important;
  color: var(--sacc-info, #0277bd) !important;
  font-weight: 600;
}
.badge.bg-secondary {
  background: var(--sacc-gray-100, #f5f5f5) !important;
  color: var(--sacc-text-muted, #757575) !important;
  font-weight: 600;
}
.badge.bg-dark {
  background: var(--sacc-gray-800, #424242) !important;
  color: #fff !important;
  font-weight: 600;
}
.badge.bg-primary {
  background: rgba(var(--sacc-primary-rgb, 22, 83, 126), 0.1) !important;
  color: var(--sacc-primary, #16537e) !important;
  font-weight: 600;
}

/* ==========================================================================
   12. CARDS
   ========================================================================== */
.card {
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-lg);
  box-shadow: var(--sacc-shadow-xs);
  background: var(--sacc-surface);
}

/* Fix double .card.card selector */
.card.card {
  border: var(--cui-card-border-width, 1px) solid var(--cui-card-border-color, var(--sacc-border));
}


/* ==========================================================================
   13. SACC SELECT (styles in sacc-select.css)
   ========================================================================== */


/* ==========================================================================
   14. FORM COMPONENTS
   ========================================================================== */

/* --- 14a. Global form-control overrides --- */
.form-control {
  height: 32px;
  padding: 4px 10px;
  font-size: var(--sacc-font-size-body);
  color: var(--sacc-text);
  background-color: var(--sacc-surface);
  border: 1px solid var(--sacc-border-strong);
  border-radius: var(--sacc-radius-sm);
  transition: border-color var(--sacc-transition), box-shadow var(--sacc-transition);
}

.form-control:focus {
  border-color: var(--sacc-primary);
  box-shadow: 0 0 0 3px rgba(var(--sacc-primary-rgb), 0.1);
  outline: none;
}

.form-control::placeholder {
  color: var(--sacc-text-muted);
  opacity: 0.7;
}

.form-control[readonly] {
  background-color: var(--sacc-surface-alt);
  opacity: 0.8;
}

/* Date clear button — compact X button next to date pickers */
.date-clear-btn {
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
  color: var(--sacc-text-muted);
  border-color: var(--sacc-border-strong);
  background: var(--sacc-surface);
}
.date-clear-btn:hover {
  color: var(--sacc-danger, #dc3545);
  border-color: var(--sacc-danger, #dc3545);
  background: var(--sacc-surface);
}

textarea.form-control {
  height: auto;
  min-height: 64px;
}

.form-control-sm {
  height: 28px;
  padding: 2px 8px;
  font-size: var(--sacc-font-size-sm);
}

.form-control-lg {
  height: 38px;
  padding: 6px 14px;
  font-size: 14px;
}

/* Native select (non-enhanced) */
select.form-control,
.form-select {
  height: 32px;
  padding: 4px 30px 4px 10px;
  font-size: var(--sacc-font-size-body);
  border: 1px solid var(--sacc-border-strong);
  border-radius: var(--sacc-radius-sm);
  background-color: var(--sacc-surface);
  color: var(--sacc-text);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23636363' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}

select.form-control:focus,
.form-select:focus {
  border-color: var(--sacc-primary);
  box-shadow: 0 0 0 3px rgba(var(--sacc-primary-rgb), 0.1);
}

/* Input group sizing */
.input-group .form-control {
  height: 32px;
}

.input-group-text {
  height: 32px;
  padding: 4px 10px;
  font-size: var(--sacc-font-size-body);
  border: 1px solid var(--sacc-border-strong);
  border-radius: var(--sacc-radius-sm);
  background: var(--sacc-surface-alt);
  color: var(--sacc-text-secondary);
}

/* --- 14b. Form labels --- */
.control-label,
.form-label,
.col-form-label {
  font-size: var(--sacc-font-size-sm);
  font-weight: 500;
  color: var(--sacc-text-secondary);
  padding-top: 6px;
}

/* --- 14c. Form row spacing --- */
.mb-3.row {
  margin-bottom: 0.6rem !important;
}

form .row > [class*="col-"] > .form-control,
form .row > [class*="col-"] > .sacc-sel-wrap {
  margin-bottom: 0;
}

/* Validation text */
.text-danger[data-valmsg-for],
span.field-validation-error {
  font-size: var(--sacc-font-size-xs);
  margin-top: 2px;
  display: block;
}

/* Hide empty validation summary (ASP.NET adds this class when no errors) */
.validation-summary-valid {
  display: none;
}

/* --- 14d. Section headers (h5 + hr pattern used in forms) --- */
form h5,
.page-content h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--sacc-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
  padding-bottom: 0;
}

form hr,
form h5 + hr {
  margin-top: 0.15rem;
  margin-bottom: 0.6rem;
  border-top: 2px solid var(--sacc-primary);
  opacity: 0.3;
}

/* --- 14e. Custom form sections with left border accent --- */
.sacc-form-section {
  margin-bottom: 1.25rem;
}

.sacc-form-card > form > .sacc-form-section > .sacc-form-section-header {
  margin: 0 -1.5rem 0.75rem;
  padding: 8px 1.5rem;
}

.sacc-form-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--sacc-surface-alt);
  border-left: 3px solid var(--sacc-primary);
  border-radius: 0 var(--sacc-radius-sm) var(--sacc-radius-sm) 0;
  margin-bottom: 10px;
}

.sacc-form-section-header i {
  color: var(--sacc-primary);
  font-size: 14px;
}

.sacc-form-section-header span {
  font-size: 13px;
  font-weight: 600;
  color: var(--sacc-text);
}

[data-theme="dark"] .sacc-form-section-header,
[data-coreui-theme="dark"] .sacc-form-section-header {
  background: var(--sacc-surface-alt);
}

[data-theme="dark"] .sacc-form-section-header i,
[data-coreui-theme="dark"] .sacc-form-section-header i {
  color: var(--sacc-accent);
}

/* --- 14f. Custom form group --- */
.sacc-form-group {
  margin-bottom: 0.75rem;
}

.sacc-form-group label {
  font-size: var(--sacc-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sacc-text-muted);
  margin-bottom: 3px;
}

/* --- 14g. Validation — shake animation --- */
.sacc-form-group.has-error .form-control,
.sacc-form-group.has-error select,
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--sacc-danger) !important;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.08);
}

.sacc-form-group.has-error .form-control {
  animation: saccShake 0.3s ease;
}

@keyframes saccShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--sacc-success);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.08);
}

/* --- 14h. Input icons --- */
.sacc-input-icon {
  position: relative;
}

.sacc-input-icon i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sacc-text-muted);
  font-size: 13px;
  pointer-events: none;
}

.sacc-input-icon input {
  padding-left: 32px;
}

/* --- 14i. Live summary strip --- */
.sacc-form-summary {
  display: flex;
  gap: 1rem;
  padding: 8px 12px;
  background: var(--sacc-surface-alt);
  border-radius: var(--sacc-radius);
  border: 1px solid var(--sacc-border);
  margin-bottom: 0.75rem;
}

.sacc-form-summary dt {
  font-size: var(--sacc-font-size-xs);
  text-transform: uppercase;
  color: var(--sacc-text-muted);
}

.sacc-form-summary dd {
  font-size: var(--sacc-font-size-body);
  font-weight: 600;
  color: var(--sacc-text);
  margin: 0;
}

/* --- 14j. Context badges --- */
.sacc-context-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--sacc-font-size-xs);
  font-weight: 600;
  border-radius: var(--sacc-radius-sm);
}

.sacc-context-badge.badge-supplier   { background: var(--sacc-success-bg); color: #2e7d32; }
.sacc-context-badge.badge-customer   { background: var(--sacc-info-bg); color: #1565c0; }
.sacc-context-badge.badge-refund     { background: var(--sacc-danger-bg); color: #c62828; }
.sacc-context-badge.badge-member     { background: #f3e5f5; color: #7b1fa2; }
.sacc-context-badge.badge-contract   { background: var(--sacc-warning-bg); color: #e65100; }
.sacc-context-badge.badge-rental     { background: #e0f7fa; color: #00695c; }
.sacc-context-badge.badge-client     { background: #fff8e1; color: #f57f17; }
.sacc-context-badge.badge-bill       { background: #efebe9; color: #4e342e; }
.sacc-context-badge.badge-journal    { background: #f3e5f5; color: #6a1b9a; }

[data-theme="dark"] .sacc-context-badge.badge-supplier,
[data-coreui-theme="dark"] .sacc-context-badge.badge-supplier   { background: #1b3a1e; color: #81c784; }
[data-theme="dark"] .sacc-context-badge.badge-customer,
[data-coreui-theme="dark"] .sacc-context-badge.badge-customer   { background: #0d2744; color: #64b5f6; }
[data-theme="dark"] .sacc-context-badge.badge-refund,
[data-coreui-theme="dark"] .sacc-context-badge.badge-refund     { background: #3e1520; color: #ef9a9a; }
[data-theme="dark"] .sacc-context-badge.badge-member,
[data-coreui-theme="dark"] .sacc-context-badge.badge-member     { background: #2a1533; color: #ce93d8; }
[data-theme="dark"] .sacc-context-badge.badge-contract,
[data-coreui-theme="dark"] .sacc-context-badge.badge-contract   { background: #3e2200; color: #ffb74d; }
[data-theme="dark"] .sacc-context-badge.badge-rental,
[data-coreui-theme="dark"] .sacc-context-badge.badge-rental     { background: #0a2e2a; color: #80cbc4; }
[data-theme="dark"] .sacc-context-badge.badge-client,
[data-coreui-theme="dark"] .sacc-context-badge.badge-client     { background: #3e3000; color: #ffd54f; }
[data-theme="dark"] .sacc-context-badge.badge-bill,
[data-coreui-theme="dark"] .sacc-context-badge.badge-bill       { background: #2e221a; color: #bcaaa4; }
[data-theme="dark"] .sacc-context-badge.badge-journal,
[data-coreui-theme="dark"] .sacc-context-badge.badge-journal    { background: #2a1533; color: #ce93d8; }

/* --- 14k. Expandable / collapsible section --- */
.sacc-form-expandable-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  background: var(--sacc-surface-alt);
  color: var(--sacc-text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 0.5rem;
}
.sacc-form-expandable-toggle:hover {
  border-color: var(--sacc-primary);
  color: var(--sacc-primary);
  background: rgba(var(--sacc-primary-rgb, 59,130,246), 0.04);
}
.sacc-form-expandable-toggle.active {
  border-color: var(--sacc-primary);
  color: var(--sacc-primary);
  background: rgba(var(--sacc-primary-rgb, 59,130,246), 0.06);
}
.sacc-form-expandable-toggle i.fa-globe,
.sacc-form-expandable-toggle i.fas.fa-globe {
  color: var(--sacc-primary);
  font-size: 0.85rem;
}
.sacc-form-expandable-toggle .fa-chevron-down {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
  margin-left: 2px;
}
.sacc-form-expandable-toggle.active .fa-chevron-down {
  transform: rotate(180deg);
}

.sacc-form-expandable {
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  margin-bottom: 0.75rem;
  padding: 12px 14px;
  background: var(--sacc-surface-alt);
}

.sacc-form-expandable .sacc-form-expandable-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  background: var(--sacc-surface-alt);
  border-radius: var(--sacc-radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--sacc-text-secondary);
}

.sacc-form-expandable .sacc-form-expandable-header i {
  transition: transform 0.2s ease;
}

.sacc-form-expandable.expanded .sacc-form-expandable-header i {
  transform: rotate(90deg);
}

.sacc-form-expandable .sacc-form-expandable-body {
  display: none;
  padding: 10px 12px;
}

.sacc-form-expandable.expanded .sacc-form-expandable-body {
  display: block;
}

/* --- 14l. Form card --- */
.sacc-form-card {
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-lg);
  box-shadow: var(--sacc-shadow-xs);
  padding: 1.25rem 1.5rem;
  transition: border-color 0.25s, background 0.25s;
}

/* ── Quick-actions card (patient edit, etc.) ── */
.ra-actions-card { padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.ra-actions-list { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ra-action-tile {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-md, 6px);
  background: var(--sacc-surface);
  color: var(--sacc-text);
  font-size: 0.82rem; font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ra-action-tile:hover {
  background: var(--sacc-primary);
  border-color: var(--sacc-primary);
  color: #fff;
  box-shadow: var(--sacc-shadow-xs);
  text-decoration: none;
}
/*  THE ICON FOLLOWS THE TILE, IT DOES NOT NAME ITS OWN COLOUR.
    This pinned #fff, which is right on the dark fill above and wrong anywhere the fill is
    light — Views/RoomAllocations/Create.cshtml overrides the hover to a near-white
    --sacc-primary-subtle, and the icon went white on white while the label stayed dark,
    because that override could beat the background but not an !important colour.
    `inherit` makes the icon take whichever foreground the tile has: white on the teal
    fill, primary-dark on the subtle one, correct in both themes and on any future
    variant. The !important stays because the markup sets a per-icon inline colour, and
    an inline style outranks any stylesheet rule without it. */
.ra-action-tile:hover .ra-action-icon { color: inherit !important; }
.ra-action-icon { font-size: 0.9rem; color: var(--sacc-primary); transition: color 0.15s; }
.ra-action-tile:nth-child(2) .ra-action-icon { color: var(--sacc-warning); }
.ra-action-tile:nth-child(3) .ra-action-icon { color: var(--sacc-text-muted); }

/* Movement direction color accents */
.sacc-form-card.mvt-in  { border-left: 4px solid #198754; background: linear-gradient(90deg, rgba(25,135,84,0.04) 0%, var(--sacc-surface) 30%); }
.sacc-form-card.mvt-out { border-left: 4px solid #dc3545; background: linear-gradient(90deg, rgba(220,53,69,0.04) 0%, var(--sacc-surface) 30%); }
.sacc-form-card.mvt-transfer { border-left: 4px solid #0d6efd; background: linear-gradient(90deg, rgba(13,110,253,0.04) 0%, var(--sacc-surface) 30%); }
.sacc-form-card.mvt-mixed { border-left: 4px solid #0d9488; background: linear-gradient(90deg, rgba(111,66,193,0.04) 0%, var(--sacc-surface) 30%); }

.sacc-form-card.mvt-in  .sacc-form-section-header:first-child { color: #198754; }
.sacc-form-card.mvt-out .sacc-form-section-header:first-child { color: #dc3545; }
.sacc-form-card.mvt-transfer .sacc-form-section-header:first-child { color: #0d6efd; }
.sacc-form-card.mvt-mixed .sacc-form-section-header:first-child { color: #0d9488; }

/* Schedule panel header stripe */
.mvt-schedule-in  { border-top: 3px solid #198754 !important; }
.mvt-schedule-out { border-top: 3px solid #dc3545 !important; }
.mvt-schedule-transfer { border-top: 3px solid #0d6efd !important; }
.mvt-schedule-mixed { border-top: 3px solid #0d9488 !important; }

[data-theme="dark"] .sacc-form-card.mvt-in  { background: linear-gradient(90deg, rgba(25,135,84,0.08) 0%, var(--sacc-surface) 30%); }
[data-theme="dark"] .sacc-form-card.mvt-out { background: linear-gradient(90deg, rgba(220,53,69,0.08) 0%, var(--sacc-surface) 30%); }
[data-theme="dark"] .sacc-form-card.mvt-transfer { background: linear-gradient(90deg, rgba(13,110,253,0.08) 0%, var(--sacc-surface) 30%); }
[data-theme="dark"] .sacc-form-card.mvt-mixed { background: linear-gradient(90deg, rgba(111,66,193,0.08) 0%, var(--sacc-surface) 30%); }

/* Batch & Traceability section — required-field visual prominence */
.sacc-form-expandable-header.batch-required-header {
  background: rgba(220,53,69,0.06);
  border-left: 3px solid #dc3545;
  color: #dc3545;
}
[data-theme="dark"] .sacc-form-expandable-header.batch-required-header {
  background: rgba(220,53,69,0.12);
}
.batch-required-field {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220,53,69,0.15) !important;
}
.sacc-onhand-pill-pop { cursor: help; }

.sacc-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;          /* drop to a 2nd row when the form column is narrow */
  gap: 8px;
  row-gap: 6px;
  padding: 10px 1.5rem;
  margin: 0 -1.5rem -1.25rem;
  border-top: 1px solid var(--sacc-border);
  background: var(--sacc-surface-alt);
  border-radius: 0 0 var(--sacc-radius-lg) var(--sacc-radius-lg);
}
/* ── Global compact buttons ──
   All buttons in the app are compact by default (12px, 32px height).
   Use .btn-lg explicitly where a larger button is needed. */
.btn:not(.btn-lg):not(.swal2-styled) {
  font-size: var(--sacc-font-size-sm, 12px);
  padding: 5px 14px;
  height: 32px;
  border-radius: var(--sacc-radius-sm, 4px);
}
.btn-sm {
  font-size: 11px !important;
  padding: 3px 10px !important;
  height: 28px !important;
}

/* Buttons must never wrap their own content. Bootstrap 5 dropped the default
   `white-space: nowrap` on `.btn`, and the fixed-height `.btn-sm` rule above
   (28 px) clips any second line — a flex parent that squeezes the button (e.g.
   the sticky form footer with a wide donut + missing-fields hint) produces an
   icon-on-top + half-text-below render that looks broken across the project.
   Restoring the Bootstrap-4 invariant globally is the safe baseline. */
.btn {
  white-space: nowrap;
}
.sacc-form-footer .btn-action-ghost {
  /* Grouped with submit button on the right */
}

/* Button loading state styling now lives with sacc.busyButton (sacc-locale.js).
   Bootstrap's .spinner-border.spinner-border-sm is injected directly into the
   button; the helper sets el.disabled = true so no extra CSS is needed. */

/* --- 14l-ii. Stock info card (inline below product select) --- */
.sacc-stock-info {
  display: flex; gap: 12px; padding: 6px 10px;
  background: var(--sacc-surface-alt); border-radius: var(--sacc-radius);
  border: 1px solid var(--sacc-border); margin: 6px 0;
  font-size: var(--sacc-font-size-sm);
}
.sacc-stock-info .info-row {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sacc-stock-info .info-label { color: var(--sacc-text-muted); font-size: var(--sacc-font-size-xs); }
.sacc-stock-info .info-value { font-weight: 600; }
/* The pack reading sits UNDER the base figure, quieter and lighter — it is a second reading
   of the same number, not a second number. Putting it on the same line at the same weight
   makes an operator read "29" and "5 Ctn + 4 Pcs" as two separate stock figures. */
.sacc-stock-info .info-subvalue {
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--sacc-text-muted);
  line-height: 1.25;
  margin-top: 1px;
  white-space: nowrap;
}

/* --- 14l-2. Stock adjustment type switcher --- */
.adj-type-btn {
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  color: var(--sacc-text);
  font-size: var(--sacc-font-size-sm);
  flex: 1;
}
.adj-type-btn:hover {
  background: var(--sacc-surface-alt);
  color: var(--sacc-text);
}
.adj-type-btn.active {
  background: var(--sacc-primary);
  border-color: var(--sacc-primary);
  color: #fff;
}
.adj-type-btn + .adj-type-btn { margin-left: -1px; }

/* --- 14m. Modal form adjustments --- */
.modal-body .form-control {
  height: 32px;
}

.modal-body .mb-3.row {
  margin-bottom: 0.5rem !important;
}

.modal-body .sacc-sel-wrap {
  min-height: 32px;
  line-height: 30px;
}

/* Modal header compact */
.modal-header {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--sacc-border);
}

.modal-header .modal-title,
.modal-header h5 {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--sacc-text);
  margin: 0;
  padding: 0;
}

.modal-header h5 + hr {
  display: none;
}

/* ==========================================================================
   SHARED: modal action bar (.sacc-modal-actions)
   A horizontal scroller for a cluster of buttons in a modal header or footer.
   On a phone a 5-button cluster is wider than the dialog; because the header is
   a nowrap flex row with the cluster at flex-shrink:0, the buttons simply ran
   off the right edge with nothing to scroll — Edit, Print and Reverse were
   unreachable, and so was the ✕ (measured on the invoice detail modal at 390px:
   the cluster needed 404px inside a 358px dialog).
   ========================================================================== */
.sacc-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.sacc-modal-actions > * { flex: 0 0 auto; }

/* CoreUI gives `.modal-header .btn-close` a `margin-left:auto`. Where a header also carries
   a controls cluster, that auto margin swallows all the free space BETWEEN the two, leaving
   the controls marooned in the middle of the header while the ✕ sits alone in the corner.
   The cluster already carries `ms-auto`, so the ✕ only needs to stop pushing itself away. */
.modal-header .sacc-modal-actions + .btn-close { margin-left: 0; }

@media (max-width: 767.98px) {
  /* 1. The close button is pinned, so it is never the thing that scrolls away.
        Everything else gets the room to its left. */
  .modal-header {
    position: relative;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding-right: 2.6rem;
  }
  .modal-header > .btn-close,
  .modal-header .btn-close {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    margin: 0;
    z-index: 3;
    /* A 44px target — the WCAG/iOS minimum. The default ✕ is ~16px, which on a
       phone is a coin-toss between closing the dialog and pressing what is under it. */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background-position: center;
    background-size: 0.85rem;
  }

  /* 2. A button cluster takes its own full-width row and scrolls sideways rather
        than wrapping into three stacked rows that push the content off-screen. */
  .sacc-modal-actions {
    flex: 1 1 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
    /* A fade on the trailing edge is the only affordance that says "there is more
       this way" once the native scrollbar is hidden, as it is on iOS. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  }
  .sacc-modal-actions.is-scrolled-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sacc-modal-actions::-webkit-scrollbar { height: 3px; }
  .sacc-modal-actions::-webkit-scrollbar-thumb {
    background: var(--sacc-border); border-radius: 3px;
  }
  .sacc-modal-actions .btn { white-space: nowrap; }

  /* 3. Identity row (title + status badges) keeps the first line to itself and
        never squeezes the badges to nothing. */
  .modal-header .sacc-modal-identity {
    flex: 1 1 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .modal-header .sacc-modal-identity::-webkit-scrollbar { display: none; }

  /* 4. A modal footer full of export buttons has the same problem. */
  .modal-footer > .d-flex.flex-wrap { width: 100%; }
}

.modal-body {
  padding: 0.75rem 1rem;
}

.modal-footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--sacc-border);
  gap: 6px;
}

.modal-footer .btn {
  font-size: var(--sacc-font-size-sm);
  padding: 4px 14px;
  height: 30px;
}


/* ==========================================================================
   15. COMMAND PALETTE (Ctrl+K)
   ========================================================================== */
.sacc-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.sacc-palette-overlay.active {
  display: flex;
}

.sacc-palette {
  width: 560px;
  max-width: 90vw;
  background: var(--sacc-surface);
  border-radius: var(--sacc-radius-xl);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border: 1px solid var(--sacc-border);
}

.sacc-palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sacc-border);
}

.sacc-palette-input-wrap > i {
  color: var(--sacc-text-muted);
  font-size: 15px;
  flex-shrink: 0;
}

.sacc-palette-input {
  flex: 1;
  padding: 14px 0;
  font-size: 15px;
  border: 0;
  background: transparent;
  color: var(--sacc-text);
  outline: none;
}

.sacc-palette-input::placeholder {
  color: var(--sacc-text-muted);
}

.sacc-palette-kbd {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-sm);
  color: var(--sacc-text-muted);
  background: var(--sacc-surface-alt);
  flex-shrink: 0;
}

.sacc-palette-footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--sacc-border);
  background: var(--sacc-surface-alt);
  font-size: var(--sacc-font-size-xs);
  color: var(--sacc-text-muted);
}

.sacc-palette-footer kbd {
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--sacc-border);
  border-radius: 3px;
  background: var(--sacc-surface);
  color: var(--sacc-text-secondary);
  font-family: inherit;
}

.sacc-palette-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}

.sacc-palette-category {
  padding: 8px 12px 4px;
  font-size: var(--sacc-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sacc-text-muted);
}

.sacc-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--sacc-radius);
  cursor: pointer;
  transition: background var(--sacc-transition);
}

.sacc-palette-item:hover,
.sacc-palette-item.active {
  background: var(--sacc-surface-hover);
}

.sacc-palette-item i {
  font-size: 14px;
  color: var(--sacc-text-muted);
  width: 20px;
  text-align: center;
}

.sacc-palette-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--sacc-text);
}

.sacc-palette-item-sub {
  font-size: var(--sacc-font-size-xs);
  color: var(--sacc-text-muted);
}

.sacc-palette-empty {
  padding: 24px;
  text-align: center;
  color: var(--sacc-text-muted);
  font-size: var(--sacc-font-size-sm);
}


/* ==========================================================================
   16. MODULE HUB — Dashboard Navigation
   Viewport-constrained, multi-column, animated tile system
   ========================================================================== */

/* --- Hub container: 2-column grid, fits viewport --- */
.sacc-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0.65rem;
  padding: 0.5rem 0;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sacc-gray-300) transparent;
}

.sacc-hub::-webkit-scrollbar { width: 5px; }
.sacc-hub::-webkit-scrollbar-track { background: transparent; }
.sacc-hub::-webkit-scrollbar-thumb { background: var(--sacc-gray-300); border-radius: 3px; }
.sacc-hub::-webkit-scrollbar-thumb:hover { background: var(--sacc-gray-400); }

/* Remove viewport constraint when hub is followed by data content (hybrid pages) */
.sacc-hub:not(:last-child) {
  max-height: none;
  overflow: visible;
}

/* Standalone grid (main module selector — no sections) spans full width */
.sacc-hub > .sacc-hub-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0;
}

.sacc-hub > .sacc-hub-grid > .sacc-hub-tile { padding: 24px 16px; }
.sacc-hub > .sacc-hub-grid > .sacc-hub-tile .sacc-hub-tile-icon { width: 52px; height: 52px; }
.sacc-hub > .sacc-hub-grid > .sacc-hub-tile .sacc-hub-tile-icon i { font-size: 24px; }
.sacc-hub > .sacc-hub-grid > .sacc-hub-tile .sacc-hub-tile-title { font-size: 13px; }
.sacc-hub > .sacc-hub-grid > .sacc-hub-tile .sacc-hub-tile-subtitle { font-size: 11px; }

/* --- Section cards --- */
.sacc-hub-section {
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-lg);
  overflow: hidden;
  animation: hubSectionIn 0.35s ease-out both;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.sacc-hub-section:hover {
  box-shadow: var(--sacc-shadow-sm);
  border-color: var(--sacc-border-strong);
}

/* Stagger section entry */
.sacc-hub-section:nth-child(1) { animation-delay: 0ms; }
.sacc-hub-section:nth-child(2) { animation-delay: 60ms; }
.sacc-hub-section:nth-child(3) { animation-delay: 120ms; }
.sacc-hub-section:nth-child(4) { animation-delay: 180ms; }
.sacc-hub-section:nth-child(5) { animation-delay: 240ms; }
.sacc-hub-section:nth-child(6) { animation-delay: 300ms; }

/* --- Section header --- */
.sacc-hub-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--sacc-surface-alt);
  border-bottom: 1px solid var(--sacc-border);
  border-left: 3px solid var(--sacc-primary);
}

.sacc-hub-section-header i {
  font-size: 13px;
  color: var(--sacc-primary);
}

.sacc-hub-section-header span {
  font-size: 12px;
  font-weight: 700;
  color: var(--sacc-text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Section header inherits accent from child tiles via :has() */
.sacc-hub-section:has(.accent-teal) .sacc-hub-section-header    { border-left-color: #00897b; }
.sacc-hub-section:has(.accent-teal) .sacc-hub-section-header i  { color: #00897b; }
.sacc-hub-section:has(.accent-info) .sacc-hub-section-header     { border-left-color: #0277bd; }
.sacc-hub-section:has(.accent-info) .sacc-hub-section-header i   { color: #0277bd; }
.sacc-hub-section:has(.accent-success) .sacc-hub-section-header  { border-left-color: #2e7d32; }
.sacc-hub-section:has(.accent-success) .sacc-hub-section-header i{ color: #2e7d32; }
.sacc-hub-section:has(.accent-primary) .sacc-hub-section-header  { border-left-color: #16537e; }
.sacc-hub-section:has(.accent-primary) .sacc-hub-section-header i{ color: #16537e; }
.sacc-hub-section:has(.accent-warning) .sacc-hub-section-header  { border-left-color: #f57c00; }
.sacc-hub-section:has(.accent-warning) .sacc-hub-section-header i{ color: #f57c00; }
.sacc-hub-section:has(.accent-danger) .sacc-hub-section-header   { border-left-color: #c62828; }
.sacc-hub-section:has(.accent-danger) .sacc-hub-section-header i { color: #c62828; }
.sacc-hub-section:has(.accent-orange) .sacc-hub-section-header   { border-left-color: #e65100; }
.sacc-hub-section:has(.accent-orange) .sacc-hub-section-header i { color: #e65100; }

/* Section accent via data attribute (more reliable than :has()) */
.sacc-hub-section[data-accent="primary"] .sacc-hub-section-header  { border-left-color: #16537e; }
.sacc-hub-section[data-accent="primary"] .sacc-hub-section-header i{ color: #16537e; }
.sacc-hub-section[data-accent="info"] .sacc-hub-section-header     { border-left-color: #0277bd; }
.sacc-hub-section[data-accent="info"] .sacc-hub-section-header i   { color: #0277bd; }
.sacc-hub-section[data-accent="success"] .sacc-hub-section-header  { border-left-color: #2e7d32; }
.sacc-hub-section[data-accent="success"] .sacc-hub-section-header i{ color: #2e7d32; }
.sacc-hub-section[data-accent="warning"] .sacc-hub-section-header  { border-left-color: #f57c00; }
.sacc-hub-section[data-accent="warning"] .sacc-hub-section-header i{ color: #f57c00; }
.sacc-hub-section[data-accent="danger"] .sacc-hub-section-header   { border-left-color: #c62828; }
.sacc-hub-section[data-accent="danger"] .sacc-hub-section-header i { color: #c62828; }
.sacc-hub-section[data-accent="teal"] .sacc-hub-section-header     { border-left-color: #00897b; }
.sacc-hub-section[data-accent="teal"] .sacc-hub-section-header i   { color: #00897b; }
.sacc-hub-section[data-accent="orange"] .sacc-hub-section-header   { border-left-color: #e65100; }
.sacc-hub-section[data-accent="orange"] .sacc-hub-section-header i { color: #e65100; }

/* --- Notification badge on tiles --- */
.sacc-hub-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: #c62828;
  border-radius: 9px;
  animation: hubBadgePulse 2s ease-in-out infinite;
}

@keyframes hubBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* --- Tile grid inside sections --- */
.sacc-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 4px;
  padding: 8px;
}

/* --- Tile base --- */
.sacc-hub-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 12px 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sacc-radius);
  text-decoration: none;
  color: var(--sacc-text);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: hubTileIn 0.3s ease-out both;
  animation-delay: calc(var(--tile-index, 0) * 40ms);
}

.sacc-hub-tile:hover {
  background: var(--tile-accent-bg, var(--sacc-surface-hover));
  border-color: var(--tile-accent-border, var(--sacc-border));
  box-shadow: var(--sacc-shadow-xs);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--sacc-text);
}

.sacc-hub-tile:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
  transition-duration: 0.08s;
}

.sacc-hub-tile:focus-visible {
  outline: 2px solid var(--tile-accent, var(--sacc-primary));
  outline-offset: 2px;
  border-radius: var(--sacc-radius);
}

/* --- Tile icon badge --- */
.sacc-hub-tile-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sacc-radius-lg);
  background: var(--tile-accent-bg, var(--sacc-gray-100));
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
  flex-shrink: 0;
}

.sacc-hub-tile-icon i {
  font-size: 17px;
  color: var(--tile-accent, var(--sacc-primary));
  transition: transform 0.2s ease;
}

.sacc-hub-tile:hover .sacc-hub-tile-icon {
  transform: scale(1.1);
  background: var(--tile-accent-bg-strong, var(--sacc-gray-200));
}

.sacc-hub-tile:hover .sacc-hub-tile-icon i {
  transform: scale(1.05);
}

/* --- Tile text --- */
.sacc-hub-tile-title {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sacc-text);
}

.sacc-hub-tile-subtitle {
  font-size: 9.5px;
  line-height: 1.2;
  color: var(--sacc-text-muted);
  max-width: 130px;
}

/* Legacy fallback selectors (tiles using bare <i> + <span>) */
.sacc-hub-tile > i { font-size: 17px; color: var(--tile-accent, var(--sacc-primary)); }
.sacc-hub-tile > span { font-size: 11px; font-weight: 600; text-align: center; }

/* ==========================================================================
   16a. ACCENT COLOR SYSTEM
   Each accent sets CSS custom properties consumed by tiles & section headers
   ========================================================================== */
.accent-primary {
  --tile-accent: #16537e;
  --tile-accent-bg: rgba(22, 83, 126, 0.06);
  --tile-accent-bg-strong: rgba(22, 83, 126, 0.13);
  --tile-accent-border: rgba(22, 83, 126, 0.16);
}
.accent-info {
  --tile-accent: #0277bd;
  --tile-accent-bg: rgba(2, 119, 189, 0.06);
  --tile-accent-bg-strong: rgba(2, 119, 189, 0.13);
  --tile-accent-border: rgba(2, 119, 189, 0.16);
}
.accent-success {
  --tile-accent: #2e7d32;
  --tile-accent-bg: rgba(46, 125, 50, 0.06);
  --tile-accent-bg-strong: rgba(46, 125, 50, 0.13);
  --tile-accent-border: rgba(46, 125, 50, 0.16);
}
.accent-warning {
  --tile-accent: #f57c00;
  --tile-accent-bg: rgba(245, 124, 0, 0.06);
  --tile-accent-bg-strong: rgba(245, 124, 0, 0.13);
  --tile-accent-border: rgba(245, 124, 0, 0.16);
}
.accent-danger {
  --tile-accent: #c62828;
  --tile-accent-bg: rgba(198, 40, 40, 0.06);
  --tile-accent-bg-strong: rgba(198, 40, 40, 0.13);
  --tile-accent-border: rgba(198, 40, 40, 0.16);
}
.accent-teal {
  --tile-accent: #00897b;
  --tile-accent-bg: rgba(0, 137, 123, 0.06);
  --tile-accent-bg-strong: rgba(0, 137, 123, 0.13);
  --tile-accent-border: rgba(0, 137, 123, 0.16);
}
.accent-orange {
  --tile-accent: #e65100;
  --tile-accent-bg: rgba(230, 81, 0, 0.06);
  --tile-accent-bg-strong: rgba(230, 81, 0, 0.13);
  --tile-accent-border: rgba(230, 81, 0, 0.16);
}

/* ==========================================================================
   16b. HUB ANIMATIONS
   ========================================================================== */
@keyframes hubSectionIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hubTileIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sacc-hub-section,
  .sacc-hub-tile {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   16c. HUB RESPONSIVE
   ========================================================================== */
@media (max-width: 575.98px) {
  .sacc-hub {
    grid-template-columns: 1fr;
    max-height: none;
    overflow-y: visible;
  }
  .sacc-hub-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 4px;
    padding: 6px;
  }
  .sacc-hub-tile { padding: 10px 4px 8px; }
  .sacc-hub-tile-icon { width: 36px; height: 36px; }
  .sacc-hub-tile-icon i { font-size: 15px; }
  .sacc-hub-tile-title { font-size: 10px; }
  .sacc-hub-tile-subtitle { display: none; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .sacc-hub {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .sacc-hub {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}

/* ==========================================================================
   16d. HUB DARK MODE
   ========================================================================== */
[data-theme="dark"] .sacc-hub-section,
[data-coreui-theme="dark"] .sacc-hub-section {
  background: var(--sacc-surface);
  border-color: var(--sacc-border);
}

[data-theme="dark"] .sacc-hub-section:hover,
[data-coreui-theme="dark"] .sacc-hub-section:hover {
  border-color: var(--sacc-border-strong);
}

[data-theme="dark"] .sacc-hub-section-header,
[data-coreui-theme="dark"] .sacc-hub-section-header {
  background: var(--sacc-surface-alt);
  border-bottom-color: var(--sacc-border);
}

[data-theme="dark"] .sacc-hub-tile-icon,
[data-coreui-theme="dark"] .sacc-hub-tile-icon {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sacc-hub-tile:hover .sacc-hub-tile-icon,
[data-coreui-theme="dark"] .sacc-hub-tile:hover .sacc-hub-tile-icon {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .sacc-hub::-webkit-scrollbar-thumb,
[data-coreui-theme="dark"] .sacc-hub::-webkit-scrollbar-thumb {
  background: var(--sacc-gray-600);
}

/* ==========================================================================
   16e. LEGACY DASHBOARD COMPAT — ibox, callout, small-box standardization
   Shared styles for hybrid hub pages with stats + charts below tiles
   ========================================================================== */
.ibox { margin-bottom: 0; }
.ibox-title {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
  color: var(--sacc-text-muted);
}
.ibox-content { padding: 0; }

/* Standardize callout spacing in dashboard cards */
.card-body .callout {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  border-radius: var(--sacc-radius-sm);
}

.card-body .callout small { font-size: 10.5px; }
.card-body .callout .h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sacc-text);
}


/* ==========================================================================
   17. SKELETON LOADERS
   ========================================================================== */
.skeleton-container {
  padding: 12px;
}

.skeleton-row {
  height: var(--sacc-dt-row-height);
  background: linear-gradient(90deg, var(--sacc-gray-200) 25%, var(--sacc-gray-100) 50%, var(--sacc-gray-200) 75%);
  background-size: 200% 100%;
  animation: saccShimmer 1.5s ease-in-out infinite;
  border-radius: var(--sacc-radius-sm);
  margin-bottom: 4px;
}

[data-theme="dark"] .skeleton-row,
[data-coreui-theme="dark"] .skeleton-row {
  background: linear-gradient(90deg, var(--sacc-surface-alt) 25%, var(--sacc-surface) 50%, var(--sacc-surface-alt) 75%);
  background-size: 200% 100%;
}

@keyframes saccShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ==========================================================================
   18. CONTEXTUAL ACTION BAR
   ========================================================================== */
.sacc-action-bar {
  position: fixed;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--sacc-gray-900);
  color: #fff;
  border-radius: var(--sacc-radius-lg);
  box-shadow: var(--sacc-shadow-lg);
  transition: bottom 0.25s ease;
}

.sacc-action-bar.visible {
  bottom: 24px;
}

.sacc-action-bar-count {
  font-size: var(--sacc-font-size-sm);
  font-weight: 600;
  margin-right: 8px;
}

.sacc-action-bar .btn {
  font-size: var(--sacc-font-size-xs);
  padding: 4px 10px;
}

.sacc-action-bar .btn-deselect {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

.sacc-action-bar .btn-deselect:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}


/* ==========================================================================
   19. JOURNAL ENTRY
   ========================================================================== */
.sacc-journal-summary {
  display: flex;
  gap: 1.5rem;
  padding: 10px 16px;
  background: var(--sacc-surface-alt);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  margin-bottom: 0.75rem;
}

.sacc-journal-summary .summary-item {
  display: flex;
  flex-direction: column;
}

.sacc-journal-summary .summary-label {
  font-size: var(--sacc-font-size-xs);
  text-transform: uppercase;
  color: var(--sacc-text-muted);
}

.sacc-journal-summary .summary-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--sacc-text);
  font-variant-numeric: tabular-nums;
}

.sacc-journal-summary .summary-value.balanced {
  color: var(--sacc-success);
}

.sacc-journal-summary .summary-value.unbalanced {
  color: var(--sacc-danger);
}

/* Journal stat items (generated by JS updateSummaryBar) */
.sacc-journal-summary .journal-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sacc-journal-summary .journal-stat-label {
  font-size: var(--sacc-font-size-xs);
  text-transform: uppercase;
  color: var(--sacc-text-muted);
  letter-spacing: 0.04em;
}
.sacc-journal-summary .journal-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--sacc-text);
  font-variant-numeric: tabular-nums;
}
.sacc-journal-summary .journal-stat-value.balanced { color: var(--sacc-success); }
.sacc-journal-summary .journal-stat-value.unbalanced { color: var(--sacc-danger); }
.sacc-journal-summary .journal-stat-value.over { color: var(--sacc-danger); }
.sacc-journal-summary .journal-stat-divider {
  width: 1px;
  background: var(--sacc-border);
  align-self: stretch;
}

/* Allocation table inside journal */
.sacc-allocation-table {
  width: 100%;
  border-collapse: collapse;
}

.sacc-allocation-table th {
  font-size: var(--sacc-dt-header-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sacc-text-muted);
  padding: 6px 10px;
  border-bottom: 2px solid var(--sacc-border-strong);
  background: var(--sacc-surface-alt);
}

.sacc-allocation-table td {
  font-size: var(--sacc-dt-cell-font);
  padding: 4px 10px;
  border-bottom: 1px solid var(--sacc-border);
  font-variant-numeric: tabular-nums;
}

/* Progress bar inside summary */
.sacc-journal-progress { height: 4px; background: var(--sacc-border); border-radius: 2px; margin-top: 8px; }
.sacc-journal-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; }
.sacc-journal-progress-fill.complete { background: var(--sacc-success); }
.sacc-journal-progress-fill.partial { background: var(--sacc-warning); }
.sacc-journal-progress-fill.over { background: var(--sacc-danger); }

/* Post-save confirmation bar */
.sacc-post-confirm { padding: 10px 16px; background: var(--sacc-surface-alt); border: 1px solid var(--sacc-success); border-radius: var(--sacc-radius); margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sacc-post-confirm .confirm-msg { font-weight: 600; color: var(--sacc-success); }
.sacc-post-confirm .confirm-actions a { margin-left: 8px; font-size: var(--sacc-font-size-sm); }

/* Empty state */
.sacc-table-empty { text-align: center; padding: 2rem; color: var(--sacc-text-muted); }
.sacc-table-empty i { font-size: 2rem; margin-bottom: 0.5rem; display: block; }

/* Inline edit cell */
.sacc-inline-edit { cursor: pointer; }
.sacc-inline-edit:hover { background: var(--sacc-highlight-bg); }
.sacc-inline-edit input { width: 100%; border: 1px solid var(--sacc-primary); border-radius: 3px; padding: 2px 6px; font-size: inherit; }

/* Draft badge */
.sacc-draft-badge { background: var(--sacc-warning); color: white; padding: 2px 8px; border-radius: var(--sacc-radius); font-size: var(--sacc-font-size-xs); font-weight: 600; }

/* Tax column styling */
.sacc-tax-col { color: var(--sacc-text-muted); font-size: var(--sacc-font-size-sm); }

/* Template/Draft toolbar */
.sacc-journal-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.sacc-journal-toolbar .btn { font-size: var(--sacc-font-size-sm); }
.sacc-journal-toolbar select { max-width: 240px; font-size: var(--sacc-font-size-sm); }

/* Journal form footer override — inside expense card, footer should not eat into elements below it */
.sacc-form-card .sacc-form-footer + .sacc-journal-summary,
.sacc-form-card .sacc-form-footer + .sacc-post-confirm { margin-top: 1rem; }
.sacc-form-card .sacc-form-footer:not(:last-child) { margin-bottom: 0; border-radius: 0; }


/* ==========================================================================
   20. BS4 → BS5 CSS COMPATIBILITY ALIASES
   These aliases let BS4 class names work with BS5 until bulk replacements
   are complete.
   ========================================================================== */

/* Float utilities */
.float-left   { float: left !important; }
.float-right  { float: right !important; }

/* Text alignment */
.text-left    { text-align: left !important; }
.text-right   { text-align: right !important; }

/* Margin left/right → start/end */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

/* Padding left/right → start/end */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* Close button compat */
button.close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  opacity: .5;
  padding: 0;
}
button.close:hover { opacity: .75; }

/* Badge color aliases (BS4 badge-* → BS5 bg-*) */
.badge-primary   { background-color: var(--sacc-primary) !important; color: #fff !important; }
.badge-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge-success   { background-color: var(--sacc-success) !important; color: #fff !important; }
.badge-danger    { background-color: var(--sacc-danger) !important; color: #fff !important; }
.badge-warning   { background-color: var(--sacc-warning) !important; color: #212529 !important; }
.badge-info      { background-color: var(--sacc-info) !important; color: #fff !important; }
.badge-light     { background-color: #f8f9fa !important; color: #212529 !important; }
.badge-dark      { background-color: #343a40 !important; color: #fff !important; }

/* Panel compat (BS3 holdover) */
.panel            { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--sacc-surface); background-clip: border-box; border: 1px solid var(--sacc-border); border-radius: var(--sacc-radius); }
.panel-primary    { border-color: var(--sacc-primary); }
.panel-heading    { padding: 0.5rem 0.75rem; margin-bottom: 0; border-bottom: 1px solid var(--sacc-border); border-radius: calc(var(--sacc-radius) - 1px) calc(var(--sacc-radius) - 1px) 0 0; }
.panel-body       { flex: 1 1 auto; padding: 0.75rem; }
.panel-footer     { padding: 0.5rem 0.75rem; border-top: 1px solid var(--sacc-border); border-radius: 0 0 calc(var(--sacc-radius) - 1px) calc(var(--sacc-radius) - 1px); }

/* Input group append/prepend compat */
.input-group-append,
.input-group-prepend {
  display: flex;
}

/* form-group compat (removed in BS5) */
.form-group {
  margin-bottom: 0.6rem;
}

/* font-weight compat */
.font-weight-bold   { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light  { font-weight: 300 !important; }

/* no-gutters compat (BS5 uses g-0) */
.no-gutters {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* media object compat */
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }

/* badge-pill compat */
.badge-pill { border-radius: 50rem !important; }

/* sr-only compat (BS5 uses visually-hidden) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* d-md-down-none compat */
@media (max-width: 767.98px) {
  .d-md-down-none { display: none !important; }
}

/* .pull-right / .pull-left (BS3 → BS5) */
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }

/* .btn-default → btn-secondary */
.btn-default {
  color: var(--sacc-text);
  background-color: var(--sacc-surface-alt);
  border-color: var(--sacc-border);
}
.btn-default:hover {
  background-color: var(--sacc-surface-hover);
  border-color: var(--sacc-border-strong);
}

/* .btn-block (removed in BS5) */
.btn-block {
  display: block;
  width: 100%;
}

/* .form-horizontal (no-op in BS5) */
.form-horizontal { /* no-op */ }

/* .box → card compat (AdminLTE) */
.box {
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  margin-bottom: 1rem;
  box-shadow: var(--sacc-shadow-xs);
}
.box-primary { border-top: 3px solid var(--sacc-primary); }
.box-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sacc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-header .box-title { font-weight: 600; margin: 0; }
.box-body { padding: 1rem; }
.box-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--sacc-border);
  background: var(--sacc-surface-alt);
}
.box-tools { display: flex; align-items: center; gap: 0.5rem; }

/* mailbox compat */
.mailbox-messages { padding: 0; }
.mailbox-controls { padding: 0.5rem 1rem; }

/* Stock entry panel */
.stock-entry-panel {
  background-color: antiquewhite;
  padding: 0.5rem;
  border-radius: var(--sacc-radius);
}

[data-theme="dark"] .stock-entry-panel,
[data-coreui-theme="dark"] .stock-entry-panel {
  background-color: #2d2a24;
}

/* Dark compat aliases */
[data-theme="dark"] .btn-default,
[data-coreui-theme="dark"] .btn-default {
  color: var(--sacc-text);
  background-color: var(--sacc-surface-alt);
  border-color: var(--sacc-border);
}
[data-theme="dark"] .btn-default:hover,
[data-coreui-theme="dark"] .btn-default:hover {
  background-color: var(--sacc-surface-hover);
  border-color: var(--sacc-border-strong);
}

[data-theme="dark"] .box,
[data-coreui-theme="dark"] .box {
  background: var(--sacc-surface);
  border-color: var(--sacc-border);
}
[data-theme="dark"] .box-footer,
[data-coreui-theme="dark"] .box-footer {
  background: var(--sacc-surface-alt);
  border-color: var(--sacc-border);
}


/* ==========================================================================
   21. COREUI COMPAT FIXES
   ========================================================================== */

/* body.app (old CoreUI 2 body class) */
body.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* .app-body (old wrapper around sidebar + main) */
.app-body {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  min-height: 0;
}

.app-body > main.main {
  flex-grow: 1;
  min-width: 0;
  padding: 0;
}

/* Footer positioning with sidebar offset */
.web-footer {
  margin-top: auto;
}

.web-footer .app-footer.main-footer {
  background: #2d323f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  font-size: 0.8rem;
}

/* Mobile/web footer toggle */
@media (max-width: 767.98px) {
  .web-footer { display: none; }
  .mobile-footer { display: block; }
}

@media (min-width: 768px) {
  .mobile-footer { display: none; }
  .sacc-mobile-footer { display: none; }
  .web-footer { display: block; }
}

/* Dark mode — mobile footer & panel */
[data-theme="dark"] .sacc-mobile-footer {
  background: var(--sacc-surface, #22262e);
  border-top-color: var(--sacc-border, #3a3f47);
  box-shadow: 0 -2px 8px rgba(0,0,0,.25);
}
[data-theme="dark"] .sacc-mobile-panel {
  background: var(--sacc-surface, #22262e);
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
[data-theme="dark"] .sacc-mobile-panel-header {
  border-bottom-color: var(--sacc-border, #3a3f47);
}
[data-theme="dark"] .sacc-mobile-panel-header span,
[data-theme="dark"] .sacc-mob-group-toggle > span,
[data-theme="dark"] .sacc-mob-sub {
  color: var(--sacc-text, #e0e0e0);
}

/* Dark mode sidebar */
[data-theme="dark"] .header,
[data-coreui-theme="dark"] .header,
[data-theme="dark"] .app-header.navbar {
  background-color: #1a1d23;
  border-bottom-color: var(--sacc-border);
}

[data-theme="dark"] .sidebar,
[data-coreui-theme="dark"] .sidebar {
  background: #1a1d23;
}

/* Dark mode tables */
[data-theme="dark"] .table,
[data-coreui-theme="dark"] .table {
  color: var(--sacc-text);
}

[data-theme="dark"] .table thead th,
[data-coreui-theme="dark"] .table thead th {
  border-color: var(--sacc-border);
  background-color: var(--sacc-surface-alt);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-coreui-theme="dark"] .table td,
[data-coreui-theme="dark"] .table th {
  border-color: var(--sacc-border);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-coreui-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02);
}

/* Dark mode cards */
[data-theme="dark"] .card,
[data-coreui-theme="dark"] .card {
  background-color: var(--sacc-surface);
  border-color: var(--sacc-border);
}

[data-theme="dark"] .card-header.card-head,
[data-coreui-theme="dark"] .card-header.card-head {
  background-color: var(--sacc-surface-alt) !important;
}

/* Dark mode body/main */
[data-theme="dark"] .main,
[data-theme="dark"] .body,
[data-coreui-theme="dark"] .main,
[data-coreui-theme="dark"] .body {
  background-color: var(--sacc-bg);
}

/* Dark mode form controls */
[data-theme="dark"] .form-control,
[data-coreui-theme="dark"] .form-control,
[data-theme="dark"] select.form-control,
[data-coreui-theme="dark"] select.form-control,
[data-theme="dark"] .form-select,
[data-coreui-theme="dark"] .form-select {
  background-color: var(--sacc-surface-alt);
  border-color: var(--sacc-border-strong);
  color: var(--sacc-text);
}

[data-theme="dark"] .form-control:focus,
[data-coreui-theme="dark"] .form-control:focus,
[data-theme="dark"] select.form-control:focus,
[data-coreui-theme="dark"] select.form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-coreui-theme="dark"] .form-select:focus {
  background-color: var(--sacc-surface-alt);
  border-color: var(--sacc-primary);
  box-shadow: 0 0 0 3px rgba(var(--sacc-primary-rgb), 0.15);
  color: var(--sacc-text);
}

[data-theme="dark"] .input-group-text,
[data-coreui-theme="dark"] .input-group-text {
  background: var(--sacc-surface-alt);
  border-color: var(--sacc-border);
  color: var(--sacc-text-secondary);
}

[data-theme="dark"] .control-label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .col-form-label,
[data-coreui-theme="dark"] .control-label,
[data-coreui-theme="dark"] .form-label,
[data-coreui-theme="dark"] .col-form-label {
  color: var(--sacc-text-secondary);
}

[data-theme="dark"] form h5,
[data-coreui-theme="dark"] form h5 {
  color: var(--sacc-accent);
}

[data-theme="dark"] form hr,
[data-coreui-theme="dark"] form hr {
  border-top-color: var(--sacc-accent);
}

[data-theme="dark"] .form-check-input:not(:checked),
[data-coreui-theme="dark"] .form-check-input:not(:checked) {
  background-color: var(--sacc-surface-alt);
  border-color: var(--sacc-border-strong);
}

[data-theme="dark"] .form-check-label,
[data-coreui-theme="dark"] .form-check-label {
  color: var(--sacc-text);
}

/* Dark mode modals — override CoreUI's empty --cui-modal-color */
[data-theme="dark"] .modal,
[data-coreui-theme="dark"] .modal {
  --cui-modal-color: var(--sacc-text);
  --cui-modal-bg: var(--sacc-surface);
}

[data-theme="dark"] .modal-content,
[data-coreui-theme="dark"] .modal-content {
  background-color: var(--sacc-surface);
  border-color: var(--sacc-border);
  color: var(--sacc-text);
}

[data-theme="dark"] .modal-header,
[data-coreui-theme="dark"] .modal-header {
  border-color: var(--sacc-border);
}

[data-theme="dark"] .modal-body,
[data-coreui-theme="dark"] .modal-body {
  color: var(--sacc-text);
}

[data-theme="dark"] .modal-footer,
[data-coreui-theme="dark"] .modal-footer {
  border-color: var(--sacc-border);
}

/* Dark mode dropdowns */
[data-theme="dark"] .dropdown-menu,
[data-coreui-theme="dark"] .dropdown-menu {
  background-color: var(--sacc-surface);
  border-color: var(--sacc-border);
  color: var(--sacc-text);
}

/* .dropdown-item-text and .dropdown-header need naming here alongside .dropdown-item.
   Bootstrap colours all three DIRECTLY from --cui-dropdown-link-color, which is only declared
   for the light palette — and a direct rule beats anything inherited from .dropdown-menu, so
   setting a colour on the menu above cannot reach them. Only .dropdown-item had a dark
   counterpart, which left non-interactive rows (the topbar Sync line) at 1.07:1 on the dark
   surface: present, full size, invisible. */
[data-theme="dark"] .dropdown-item,
[data-coreui-theme="dark"] .dropdown-item,
[data-theme="dark"] .dropdown-item-text,
[data-coreui-theme="dark"] .dropdown-item-text,
[data-theme="dark"] .dropdown-header,
[data-coreui-theme="dark"] .dropdown-header {
  color: var(--sacc-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-coreui-theme="dark"] .dropdown-item:hover {
  background-color: var(--sacc-surface-hover);
  color: var(--sacc-text);
}

/* Dark mode module toolbar */
[data-theme="dark"] .module-toolbar,
[data-coreui-theme="dark"] .module-toolbar {
  background: #1a1d23;
  border-bottom-color: var(--sacc-border);
}

/* Dark mode footer */
[data-theme="dark"] .web-footer .app-footer.main-footer,
[data-coreui-theme="dark"] .web-footer .app-footer.main-footer {
  background: #1a1d23;
  border-top-color: var(--sacc-border);
}


/* ==========================================================================
   22. PRINT STYLES
   ========================================================================== */
@media print {
  /* `.header` is repeated below with the :not() qualifier. The screen rule
     `.header:not(.receipt-printable .header) { display: flex !important }` scores
     (0,3,0) because :not() inherits its ARGUMENT's specificity, so the plain
     `.header` (0,1,0) in this list could never beat it — measured: the top bar
     printed on every report in the app. Kept in the list for readability; the
     qualified selector after this block is the one that actually wins. */
  .sidebar,
  .header,
  .module-toolbar,
  .web-footer,
  .mobile-footer,
  .sacc-page-actions,
  .page-actions,
  .sacc-filter-section,
  .sacc-filter-toggle,
  .sacc-view-toggle,
  .sacc-view-toolbar,
  .sacc-action-bar,
  .sacc-palette-overlay,
  .dt-buttons,
  /* App chrome that was never listed here and printed on every page. */
  .sacc-module-nav,
  #saccChatPanel,
  #saccQaFab {
    display: none !important;
  }

  /* Out-specifies the screen rule described above (0,3,1 > 0,3,0). */
  .header:not(.receipt-printable .header) {
    display: none !important;
  }

  /* The sidebar is position:fixed and the wrapper reserves a left margin for it;
     reclaim the full sheet width once it is hidden. */
  .wrapper {
    margin-left: 0 !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11px;
  }

  .page-content {
    padding: 0 !important;
  }

  .page-content .dt-container {
    border: 0 !important;
    box-shadow: none !important;
  }

  .page-title-bar {
    background: transparent !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
    padding: 4px 0;
  }

  .card {
    border: 0 !important;
    box-shadow: none !important;
  }

  table.dataTable thead th {
    background: transparent !important;
    color: #000 !important;
    border-bottom: 2px solid #000 !important;
  }

  table.dataTable tbody td {
    border-bottom: 1px solid #ccc !important;
  }
}

/* ==========================================================================
   PAYMENT FORM ENHANCEMENTS
   ========================================================================== */

/* Balance banner */
.pyt-balance-banner {
  background: var(--sacc-warning-bg);
  border: 1px solid var(--sacc-warning);
  border-radius: var(--sacc-radius);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  animation: pyt-slideDown 0.2s ease-out;
}

.pyt-balance-label {
  font-size: var(--sacc-font-size-sm);
  color: var(--sacc-warning);
  font-weight: 600;
}

.pyt-balance-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sacc-danger);
}

/* Last payment indicator */
.pyt-last-payment {
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}

/* Confirm button enhancements */
.pyt-confirm-btn {
  position: relative;
  min-width: 180px;
  transition: all 0.3s ease;
}

.pyt-confirm-btn.btn-action-success {
  background: var(--sacc-success) !important;
  border-color: var(--sacc-success) !important;
}

.pyt-kbd, .sacc-kbd {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  opacity: 0.8;
  margin-left: 4px;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.15);
}
/* Ghost/outline buttons need dark text kbd */
.btn-action-ghost .sacc-kbd,
.btn-action-outline .sacc-kbd {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.1);
  color: inherit;
}

@keyframes pyt-slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dark mode */
[data-theme="dark"] .pyt-balance-banner,
[data-coreui-theme="dark"] .pyt-balance-banner {
  background: rgba(245, 124, 0, 0.1);
  border-color: rgba(245, 124, 0, 0.3);
}

/* ==========================================================================
   DOCUMENT PREVIEW MODAL
   ========================================================================== */
.doc-preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sacc-surface-alt);
  border-top: 1px solid var(--sacc-border);
  padding: 0.75rem 1rem;
}

#receiptContent .receipt-printable {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background: #fff;
  font-family: var(--sacc-font-family);
  font-size: 13px;
  line-height: 1.5;
  color: #222;
}

#receiptContent .receipt-printable header {
  text-align: center;
  margin-bottom: 0.5rem;
}

#receiptContent .receipt-printable .fromto {
  margin-bottom: 0.5rem;
}

#receiptContent .receipt-printable .table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#receiptContent .receipt-printable .table th,
#receiptContent .receipt-printable .table td {
  padding: 6px 8px;
  border: 1px solid #ddd;
}

#receiptContent .receipt-printable .row-totals td,
#receiptContent .receipt-printable .row-totals th {
  font-weight: 700;
  border-top: 2px solid #333;
}

/* Print preview — gray background with centered white "page" */
.doc-preview-body {
  background: #e8e8e8;
  padding: 1rem;
  min-height: 60vh;
  max-height: calc(100vh - 160px);
  /* BOTH axes. It was overflow-y only, so a document wider than the dialog had
     nowhere to go — on a phone there was no way to reach the right-hand columns
     of a receipt at all. */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.doc-preview-page {
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  border-radius: 2px;
  min-height: 50vh;
  padding: 20px;
  /* The page is as wide as the document needs; the BODY scrolls, the page does
     not shrink. Squeezing an A4 layout into 340px is what reflowed every table
     cell into one-word-per-line towers. */
  width: max-content;
  max-width: 100%;
}

/* An empty page shell is not a page.
   While the document loads, this container has no children, and `width: max-content`
   collapses it to nothing but its own 40px of padding — leaving a narrow white strip
   the height of half the viewport standing next to the spinner. Hiding it while empty
   means the loading state is the spinner and nothing else. */
.doc-preview-page:empty {
  display: none;
}

/* Centre the loading state in the body rather than pinning it to the top, so the
   spinner sits where the document is about to appear. */
.doc-preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  min-height: 50vh;
}
.doc-preview-loading p {
  margin: 0;
}

/* Ensure receipt content doesn't inherit stray body styles.
   NOT applied to the iframe: the iframe carries the document's own natural width
   and is scaled to fit by document-preview.js. Clamping it to 100% here is what
   forced the reflow in the first place. */
.doc-preview-page > *:not(iframe) {
  max-width: 100%;
}

/* The scaled iframe is positioned from the top-left so the fit calculation and
   the scroll offsets agree; a centred origin makes a zoomed page drift out of
   the scroll area on one side. */
.doc-preview-page iframe {
  transform-origin: top left;
  display: block;
}

@media (max-width: 767.98px) {
  .doc-preview-body {
    /* Full-bleed on a phone: 1rem of grey either side is 12% of the viewport
       spent on decoration when the document itself is the thing that is short
       of room. */
    padding: 0.35rem;
    max-height: calc(100vh - 190px);
  }
  .doc-preview-page {
    padding: 0;
    min-height: 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  }
  /* The zoom stepper is the one header control that must stay reachable, so it
     never joins the scrolling cluster. */
  .doc-viewer-zoom { margin-right: 0; }
  .doc-viewer-zoom-level { min-width: 30px; font-size: 10px; }
}

/* Zoom controls */
.doc-viewer-zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
}
.doc-viewer-zoom-level {
  font-size: 11px;
  font-weight: 500;
  min-width: 36px;
  text-align: center;
  color: var(--sacc-text-muted);
  user-select: none;
}

/* Iframe zoom transform. Origin is top LEFT (set above) — with top center, a
   page zoomed past the container width grows off both edges and the left half
   becomes unreachable however far you scroll. */
.doc-preview-page iframe {
  transition: transform 0.15s ease;
}

/* Fullscreen overrides */
.modal-fullscreen .doc-preview-body {
  max-height: calc(100vh - 120px);
  flex: 1;
}
.modal-fullscreen .doc-preview-page {
  max-width: 100%;
  box-shadow: none;
  border-radius: 0;
}
.modal-fullscreen .doc-preview-page iframe {
  min-height: calc(100vh - 160px);
}

/* Dark mode overrides */
[data-theme="dark"] .doc-preview-toolbar,
[data-coreui-theme="dark"] .doc-preview-toolbar {
  background: var(--sacc-surface);
  border-top-color: var(--sacc-border);
}

[data-theme="dark"] .doc-preview-body,
[data-coreui-theme="dark"] .doc-preview-body {
  background: #2c2c2c;
}

[data-theme="dark"] .doc-preview-page,
[data-coreui-theme="dark"] .doc-preview-page {
  background: #fff;
  color: #222;
}

[data-theme="dark"] #receiptContent .receipt-printable,
[data-coreui-theme="dark"] #receiptContent .receipt-printable {
  background: #fff;
  color: #222;
}

/* ==========================================================================
   Quick Add Entity (inline create for customers/suppliers)
   ========================================================================== */
.quick-add-wrapper { margin-top: 0.25rem; }
.quick-add-trigger {
  font-size: 12px;
  font-weight: 600;
  color: var(--sacc-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.quick-add-trigger:hover { text-decoration: underline; color: var(--sacc-primary-hover); }
.quick-add-form {
  background: var(--sacc-surface-alt);
  border: 1px dashed var(--sacc-primary);
  border-radius: var(--sacc-radius);
  padding: 0.75rem;
  margin-top: 0.5rem;
}
.quick-add-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 13px;
  color: var(--sacc-primary);
}
.quick-add-form .btn-close-sm { transform: scale(0.75); }

[data-theme="dark"] .quick-add-form,
[data-coreui-theme="dark"] .quick-add-form {
  border-color: var(--sacc-accent);
  background: var(--sacc-surface);
}

/* ==========================================================================
   Multiple Customer Credit — Side Panel
   ========================================================================== */
.pyt-multicredit-panel {
  position: sticky;
  top: 1rem;
}
.pyt-multicredit-panel #schedule {
  max-height: 280px;
  overflow-y: auto;
}

/* Accordion toggle (mobile only) */
.pyt-multicredit-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.625rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--sacc-border);
  font-weight: 600;
  font-size: 13px;
  color: var(--sacc-primary);
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.pyt-multicredit-toggle .pyt-multicredit-chevron {
  transition: transform 0.2s;
  font-size: 11px;
}
.pyt-multicredit-toggle[aria-expanded="true"] .pyt-multicredit-chevron {
  transform: rotate(180deg);
}

/* On desktop, always show the collapsible body */
@media (min-width: 768px) {
  .collapse.show-md { display: block !important; }
  .pyt-multicredit-panel { position: sticky; top: 1rem; }
}

/* Mobile footer */
.pyt-mobile-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
}

/* ============================
   17a. Dashboard — KPI Cards, Alerts, Quick Actions
   ============================ */

/* Dashboard container — viewport-fitted */
.sacc-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

/* ── Stat Card Strip (compact KPI row) ─────────────────────────────────── */
.sc-stat-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  margin-bottom: 0.75rem;
}
.sc-stat-strip > * {
  flex: 1;
  min-width: 0;
}
.sc-card {
  background: var(--sacc-card-bg, var(--cui-card-bg, #fff));
  border: 1px solid var(--sacc-border, var(--cui-border-color, #d8dbe0));
  border-radius: var(--sacc-radius-lg, 0.5rem);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sc-card-stat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
}
.sc-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.sc-stat-body {
  min-width: 0;
}
.sc-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  transition: transform 0.3s ease;
}
.sc-stat-label {
  font-size: 0.7rem;
  color: var(--sacc-muted, var(--text-muted));
}
/* A KPI that cannot be computed ("n/a") must not read with the weight of a real figure —
   it is a gap in the data, not a result. Token-based so it follows both themes. */
.sc-stat-value.sc-stat-muted {
  color: var(--sacc-muted, var(--text-muted));
  font-weight: 600;
}

/* ── Admin Hub overview strip ──────────────────────────────────────────────
   The Clients / Products / Users counts that used to sit in a narrow column on the
   business dashboard. Here they are a header for the tiles that manage them, so they
   read across rather than stack: one line, wrapping on a phone, each count a link to
   what it counts. Sized down deliberately — this is context, not a KPI. */

/* Chart.js needs a sized, positioned parent to fill: with responsive:true and
   maintainAspectRatio:false it takes this box exactly, instead of falling back to the
   canvas's intrinsic 300px and leaving the rest of the column blank. */
/* The chart row must span the card, not shrink-wrap to the canvases. .sc-card-body lays its
   children out such that a plain .row sizes to content — which pinned both graphs to their
   300px fallback in the left half of the panel and left the right half blank. Scoped to
   #chartPanel so no other card's layout changes. */
/* The #chartPanel override that used to sit here is gone: saccreport.css no longer turns
   .row into a table-row on screen, so the chart row is an ordinary flex row again and needs
   no special case. min-width:0 is kept — a flex item defaults to min-width:auto, which lets
   a wide canvas push the column past its share. */
#chartPanel .row > [class^="col-"] { min-width: 0; }

.chart-box {
  position: relative;
  width: 100%;
  height: 320px;
}
@media (max-width: 767.98px) {
  .chart-box { height: 260px; }
}
.sc-stat-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.sc-stat-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.sc-stat-hover:hover .sc-stat-value {
  transform: scale(1.05);
}
@media (max-width: 767.98px) {
  .sc-stat-strip {
    flex-wrap: wrap;
  }
  .sc-stat-strip > * {
    flex: 1 1 45%;
  }
  .sc-stat-value { font-size: 1rem; }
}

/* ── sacc-stat-card: compact inline stat card (value + label) ── */
.sacc-stat-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  padding: 0.4rem 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sacc-stat-card[style*="cursor:pointer"]:hover,
.sacc-stat-card.sacc-stat-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--sacc-shadow-sm);
  border-color: var(--sacc-primary);
}
.sacc-stat-card.active {
  border-color: var(--sacc-primary);
  background: rgba(var(--sacc-primary-rgb), 0.04);
}
.sacc-stat-card .sacc-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sacc-stat-card .sacc-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sacc-stat-card .sacc-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}
.sacc-stat-card .sacc-stat-label {
  font-size: 0.7rem;
  color: var(--sacc-text-muted);
  white-space: nowrap;
}

/* Teal accent utilities (replaces Bootstrap bg-primary which is purple) */
.bg-accent { background: rgba(var(--sacc-primary-rgb, 22,83,126), 0.1) !important; }
.text-accent { color: var(--sacc-primary) !important; }

/* KPI Card Grid */
.sacc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

/* KPI Card — global density tuned for list / dashboard pages.
   These defaults are intentionally compact: the strip lives at the top of
   most pages and the data grid below it is the user's actual workspace.
   A bigger card just steals vertical real estate.
   If a specific page genuinely needs a larger / more prominent KPI block
   (e.g. a single hero metric on a landing page), wrap it in a local
   modifier rather than inflating these globals. */
.sacc-kpi-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-left: 3px solid var(--kpi-accent, var(--sacc-primary));
  border-radius: var(--sacc-radius);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.sacc-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.sacc-kpi-card .kpi-icon {
  font-size: 1rem;
  opacity: 0.75;
  color: var(--kpi-accent, var(--sacc-primary));
  flex-shrink: 0;
}
.sacc-kpi-card .kpi-body {
  flex: 1;
  min-width: 0;
}
.sacc-kpi-card .kpi-value {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--sacc-text);
}
.sacc-kpi-card .kpi-label {
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sacc-muted);
  margin-top: 1px;
}
.sacc-kpi-card .kpi-subtitle {
  font-size: 0.68rem;
  color: var(--sacc-muted);
  margin-top: 3px;
}

/* v13.2 — sparkline strip inside KPI tile */
.sacc-kpi-card .kpi-sparkline {
  margin-top: 6px;
  height: 32px;
  width: 100%;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.sacc-kpi-card .kpi-sparkline.kpi-sparkline-ready {
  opacity: 1;
  transform: translateY(0);
}

/* v13.2 — anomaly badge below subtitle */
.sacc-kpi-card .kpi-anomaly {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 1px 6px;
  font-size: 0.62rem;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.sacc-kpi-card .kpi-anomaly i { font-size: 0.55rem; }
.kpi-anomaly-info    { background: rgba(32, 196, 244, 0.12); color: #0a7daa; }
.kpi-anomaly-warning { background: rgba(249, 177, 21, 0.15); color: #a36a00; }
.kpi-anomaly-danger  { background: rgba(248, 108, 107, 0.15); color: #b1322f; }

/* v13.2 — last refreshed pill */
.sacc-refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--sacc-muted);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
}
.sacc-refresh-pill .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2eb85c;
  box-shadow: 0 0 0 0 rgba(46, 184, 92, 0.55);
  animation: sacc-pulse 1.8s infinite;
}
@keyframes sacc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 184, 92, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(46, 184, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 184, 92, 0); }
}
/* Figures older than the staleness window. The green pulse says "fresh"; once the page has
   been sitting open it stops saying it, rather than pulsing reassuringly at an hour-old
   number. Colours come from tokens so both themes follow. */
.sacc-refresh-pill.is-stale { color: var(--sacc-warning); background: rgba(255, 152, 0, 0.12); }
.sacc-refresh-pill.is-stale .pulse-dot { background: var(--sacc-warning); animation: none; box-shadow: none; }

/* v13.2 — what-changed list */
.sacc-mover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background .2s ease;
}
.sacc-mover-row:hover { background: rgba(0, 0, 0, 0.03); }
.sacc-mover-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.sacc-mover-icon.up   { background: rgba(46, 184, 92, 0.14);  color: #2eb85c; }
.sacc-mover-icon.down { background: rgba(248, 108, 107, 0.14); color: #f86c6b; }
.sacc-mover-icon.new  { background: rgba(32, 196, 244, 0.14);  color: #20c4f4; }
.sacc-mover-name {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sacc-mover-name .mover-cat {
  display: block;
  font-size: 0.6rem;
  color: var(--sacc-muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sacc-mover-delta {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.sacc-mover-delta.up   { color: #2eb85c; }
.sacc-mover-delta.down { color: #f86c6b; }
.sacc-mover-delta.new  { color: #20c4f4; }

/* v13.2 — aging buckets */
.sacc-aging-bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sacc-border, #e0e0e0);
  margin: 10px 0 6px;
}
.sacc-aging-seg { transition: width 0.6s ease; min-width: 0; }
.sacc-aging-seg.b0 { background: #2eb85c; }
.sacc-aging-seg.b1 { background: #ffc107; }
.sacc-aging-seg.b2 { background: #f9b115; }
.sacc-aging-seg.b3 { background: #f86c6b; }
.sacc-aging-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.7rem;
  color: var(--sacc-muted);
}
.sacc-aging-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.sacc-aging-legend .b0 { background: #2eb85c; }
.sacc-aging-legend .b1 { background: #ffc107; }
.sacc-aging-legend .b2 { background: #f9b115; }
.sacc-aging-legend .b3 { background: #f86c6b; }

/* v13.2 — risk table */
.sacc-risk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}
.sacc-risk-row + .sacc-risk-row { border-top: 1px solid rgba(0,0,0,0.04); }
.sacc-risk-badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sacc-risk-badge.low    { background: rgba(46, 184, 92, 0.14);  color: #2eb85c; }
.sacc-risk-badge.medium { background: rgba(255, 193, 7, 0.18);  color: #a36a00; }
.sacc-risk-badge.high   { background: rgba(248, 108, 107, 0.18); color: #b1322f; }

/* v13.2 — margin leaderboard */
.sacc-margin-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
}
.sacc-margin-row + .sacc-margin-row { border-top: 1px solid rgba(0,0,0,0.04); }
.sacc-margin-pct {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}
.sacc-margin-pct.healthy { background: rgba(46, 184, 92, 0.14); color: #2eb85c; }
.sacc-margin-pct.thin    { background: rgba(248, 108, 107, 0.14); color: #f86c6b; }

/* Trend indicators */
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.kpi-trend.up { color: #2eb85c; }
.kpi-trend.up::before { content: "\25B2"; font-size: 0.6rem; }
.kpi-trend.down { color: #e55353; }
.kpi-trend.down::before { content: "\25BC"; font-size: 0.6rem; }
.kpi-trend.flat { color: var(--sacc-muted); }
.kpi-trend.flat::before { content: "\2014"; }

/* Alert List */
.sacc-alert-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sacc-alert-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  text-decoration: none;
  color: inherit;
  font-size: 0.82rem;
  transition: background 0.15s;
}
.sacc-alert-item:hover {
  background: var(--sacc-hover-bg, rgba(0,0,0,0.03));
  text-decoration: none;
  color: inherit;
}
.sacc-alert-item .alert-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.sacc-alert-item .alert-icon.warning { color: #f9b115; }
.sacc-alert-item .alert-icon.danger { color: #e55353; }
.sacc-alert-item .alert-icon.info { color: #3399ff; }
.sacc-alert-item .alert-label {
  flex: 1;
  font-weight: 500;
}
.sacc-alert-item .alert-badge {
  background: var(--sacc-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}
.sacc-alert-item .alert-badge.warning { background: #f9b115; color: #000; }
.sacc-alert-item .alert-badge.danger { background: #e55353; }
.sacc-alert-item .alert-badge.info { background: #3399ff; }

/* Quick Actions grid */
/* Quick Actions — same card structure as the module hub tiles (.sacc-hub-tile).
   The hub grid packs 3–4 tiles per row on a phone; Quick Actions used to drop to a SINGLE
   column under 480px, so four actions became four full-width rows and pushed everything
   below the fold. Matched to the hub here so both read as one design language.

   Styled entirely from the existing markup — <a class="sacc-quick-action"><i></i> Label</a>.
   The <i> is given the hub's rounded icon badge directly, so all ten views that use this
   class pick the new structure up with no markup change. */
.sacc-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}
.sacc-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  /* 44px is the minimum comfortable touch target; the tile is far larger, but the floor
     matters once the label wraps to one line on a narrow phone. */
  min-height: 88px;
  padding: 0.8rem 0.4rem 0.7rem;
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  text-decoration: none;
  color: var(--sacc-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  /* Long labels ("Provisional Birth Certificate") must wrap inside the tile rather than
     force the grid column wider and break the packing. */
  overflow-wrap: anywhere;
  transition: background 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sacc-quick-action:hover {
  background: var(--sacc-surface-hover, var(--sacc-hover-bg, rgba(0,0,0,0.03)));
  border-color: var(--sacc-border);
  box-shadow: var(--sacc-shadow-xs, 0 2px 8px rgba(0,0,0,0.06));
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--sacc-text);
}
.sacc-quick-action:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
  transition-duration: 0.08s;
}
.sacc-quick-action:focus-visible {
  outline: 2px solid var(--sacc-primary);
  outline-offset: 2px;
}
/* The icon badge — the <i> itself becomes the hub's rounded square. */
.sacc-quick-action > i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--sacc-radius-lg, 10px);
  background: var(--sacc-gray-100, rgba(0,0,0,0.04));
  font-size: 17px;
  color: var(--sacc-primary);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}
.sacc-quick-action:hover > i { transform: scale(1.08); }

/* Summary stat row (compact counts) */
.sacc-stat-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.sacc-stat-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
}
.sacc-stat-item i { color: var(--sacc-muted); font-size: 0.9rem; }
.sacc-stat-item .stat-value { font-weight: 700; }
.sacc-stat-item .stat-label { color: var(--sacc-muted); }

/* Dashboard section headers */
.sacc-dash-section {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sacc-muted);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Net income highlight card */
.sacc-net-income {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sacc-net-income .net-item {
  flex: 1;
  min-width: 180px;
  padding: 0.75rem 1rem;
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
}
.sacc-net-income .net-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sacc-muted);
  font-weight: 600;
}
.sacc-net-income .net-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sacc-text);
}

/* Dark mode */
[data-theme="dark"] .sacc-kpi-card,
[data-coreui-theme="dark"] .sacc-kpi-card {
  background: var(--sacc-surface);
  border-color: var(--sacc-border);
}
[data-theme="dark"] .sacc-kpi-card:hover,
[data-coreui-theme="dark"] .sacc-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
[data-theme="dark"] .sacc-alert-item:hover,
[data-coreui-theme="dark"] .sacc-alert-item:hover {
  background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .sacc-quick-action:hover,
[data-coreui-theme="dark"] .sacc-quick-action:hover {
  background: rgba(255,255,255,0.04);
}
/* The icon badge needs its own dark value: --sacc-gray-100 is a light-mode grey, so on dark
   the badge would otherwise sit as a pale block behind the glyph. */
[data-theme="dark"] .sacc-quick-action > i,
[data-coreui-theme="dark"] .sacc-quick-action > i {
  background: rgba(255,255,255,0.06);
}

/* Responsive */
@media (max-width: 767.98px) {
  .sacc-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sacc-kpi-card .kpi-value { font-size: 1.2rem; }
  /* Keep packing, like the hub grid — auto-fill rather than a fixed 2 columns, so a phone
     shows 3 across and a small tablet 4, instead of stretching two tiles across the width. */
  .sacc-quick-actions { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.4rem; }
  .sacc-quick-action { min-height: 80px; padding: 0.7rem 0.3rem 0.6rem; font-size: 0.72rem; }
  .sacc-quick-action > i { width: 36px; height: 36px; font-size: 16px; }
}
@media (max-width: 479.98px) {
  .sacc-kpi-grid {
    grid-template-columns: 1fr;
  }
  /* Was `1fr` — one action per row, so four actions filled the phone screen and pushed the
     rest of the dashboard below the fold. 88px keeps three across at 360px wide. */
  .sacc-quick-actions { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.35rem; }
  .sacc-quick-action { min-height: 74px; padding: 0.6rem 0.25rem 0.5rem; font-size: 0.68rem; }
  .sacc-quick-action > i { width: 32px; height: 32px; font-size: 15px; }
}

/* ==========================================================================
   TASK MANAGEMENT — Kanban, Badges, Calendar
   ========================================================================== */

/* View Toggle */
.sacc-view-toggle {
  display: inline-flex;
  border: 1px solid var(--sacc-border);
  border-radius: 6px;
  overflow: hidden;
}
.sacc-view-toggle .btn {
  border: none;
  border-radius: 0;
  padding: 4px 12px;
  font-size: var(--sacc-font-size-sm);
  background: var(--sacc-surface);
  color: var(--sacc-text-secondary);
  transition: all 0.15s ease;
}
.sacc-view-toggle .btn.active {
  background: var(--sacc-primary);
  color: #fff;
}
.sacc-view-toggle .btn:hover:not(.active) {
  background: var(--sacc-bg-hover);
}

/* Priority / Status Badges */
.sacc-task-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--sacc-font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.sacc-task-badge.priority-high {
  background: var(--sacc-danger-bg, #fce4ec);
  color: var(--sacc-danger, #c62828);
}
.sacc-task-badge.priority-medium {
  background: var(--sacc-warning-bg, #fff3e0);
  color: var(--sacc-warning, #f57c00);
}
.sacc-task-badge.priority-low {
  background: var(--sacc-success-bg, #e8f5e9);
  color: var(--sacc-success, #2e7d32);
}
.sacc-task-badge.status-pending {
  background: #e3f2fd;
  color: #1565c0;
}
.sacc-task-badge.status-inprogress {
  background: #fff8e1;
  color: #f57f17;
}
.sacc-task-badge.status-complete {
  background: var(--sacc-success-bg, #e8f5e9);
  color: var(--sacc-success, #2e7d32);
}
.sacc-task-badge.status-cancelled {
  background: #f5f5f5;
  color: #757575;
}
.sacc-task-overdue {
  color: var(--sacc-danger, #c62828) !important;
  font-weight: 600;
}

/* Kanban Board */
.sacc-kanban {
  display: flex;
  gap: 16px;
  min-height: 400px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.sacc-kanban-column {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  background: var(--sacc-surface, #f8f9fa);
  border: 1px solid var(--sacc-border, #dee2e6);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.sacc-kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sacc-border, #dee2e6);
  font-weight: 600;
}
.sacc-kanban-count {
  background: var(--sacc-bg-hover, #e9ecef);
  color: var(--sacc-text-secondary);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sacc-font-size-xs);
  font-weight: 700;
}
.sacc-kanban-cards {
  flex: 1;
  padding: 8px;
  min-height: 60px;
  overflow-y: auto;
}
.sacc-kanban-card {
  background: var(--sacc-card-bg, #fff);
  border: 1px solid var(--sacc-border, #dee2e6);
  border-left: 4px solid var(--sacc-primary);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.sacc-kanban-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.sacc-kanban-card.priority-high {
  border-left-color: var(--sacc-danger, #c62828);
}
.sacc-kanban-card.priority-medium {
  border-left-color: var(--sacc-warning, #f57c00);
}
.sacc-kanban-card.priority-low {
  border-left-color: var(--sacc-success, #2e7d32);
}
.sacc-kanban-card.ui-sortable-helper {
  opacity: 0.85;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transform: rotate(2deg);
}
.sacc-kanban-card-title {
  font-size: var(--sacc-font-size-body);
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
}
.sacc-kanban-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sacc-font-size-xs);
  color: var(--sacc-text-secondary);
}
.sacc-kanban-due {
  font-size: var(--sacc-font-size-xs);
}
.sacc-kanban-card-assignee {
  font-size: var(--sacc-font-size-xs);
  color: var(--sacc-text-secondary);
  margin-top: 4px;
}
.sacc-kanban-placeholder {
  border: 2px dashed var(--sacc-primary, #16537e);
  border-radius: 6px;
  min-height: 50px;
  margin-bottom: 8px;
  background: rgba(var(--sacc-primary-rgb, 22, 83, 126), 0.05);
}

/* Action buttons in table */
.btn-xs {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 3px;
}

/* Task link in table */
.task-link {
  color: var(--sacc-primary);
  text-decoration: none;
  font-weight: 500;
}
.task-link:hover {
  text-decoration: underline;
}

/* FullCalendar dark mode */
[data-theme="dark"] .fc,
[data-coreui-theme="dark"] .fc {
  --fc-border-color: var(--sacc-border);
  --fc-page-bg-color: var(--sacc-card-bg, #1e1e2d);
  --fc-neutral-bg-color: rgba(255,255,255,0.04);
  --fc-list-event-hover-bg-color: rgba(255,255,255,0.06);
  --fc-today-bg-color: rgba(var(--sacc-primary-rgb), 0.08);
  color: var(--sacc-text-primary, #e0e0e0);
}
[data-theme="dark"] .fc .fc-button-primary,
[data-coreui-theme="dark"] .fc .fc-button-primary {
  background: var(--sacc-primary);
  border-color: var(--sacc-primary);
}
[data-theme="dark"] .fc .fc-col-header-cell,
[data-coreui-theme="dark"] .fc .fc-col-header-cell {
  background: rgba(255,255,255,0.04);
}

/* Dark mode — Kanban */
[data-theme="dark"] .sacc-kanban-column,
[data-coreui-theme="dark"] .sacc-kanban-column {
  background: var(--sacc-card-bg, #1e1e2d);
  border-color: var(--sacc-border);
}
[data-theme="dark"] .sacc-kanban-card,
[data-coreui-theme="dark"] .sacc-kanban-card {
  background: var(--sacc-surface, #252536);
  border-color: var(--sacc-border);
}
[data-theme="dark"] .sacc-kanban-card:hover,
[data-coreui-theme="dark"] .sacc-kanban-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .sacc-task-badge.status-pending,
[data-coreui-theme="dark"] .sacc-task-badge.status-pending {
  background: rgba(21, 101, 192, 0.2);
}
[data-theme="dark"] .sacc-task-badge.status-inprogress,
[data-coreui-theme="dark"] .sacc-task-badge.status-inprogress {
  background: rgba(245, 127, 23, 0.2);
}
[data-theme="dark"] .sacc-task-badge.status-complete,
[data-coreui-theme="dark"] .sacc-task-badge.status-complete {
  background: rgba(46, 125, 50, 0.2);
}
[data-theme="dark"] .sacc-task-badge.status-cancelled,
[data-coreui-theme="dark"] .sacc-task-badge.status-cancelled {
  background: rgba(117, 117, 117, 0.2);
}

/* Responsive — Kanban stacks on mobile */
@media (max-width: 767.98px) {
  .sacc-kanban {
    flex-direction: column;
  }
  .sacc-kanban-column {
    max-width: 100%;
    min-width: 0;
  }
}

/* ===== Brand primary override (CoreUI --cui-primary → --sacc-primary) ===== */
:root {
  --cui-primary: var(--sacc-primary);
  --cui-primary-rgb: var(--sacc-primary-rgb);
}

.form-check-input:checked {
  background-color: var(--sacc-primary);
  border-color: var(--sacc-primary);
}
.form-check-input:focus {
  border-color: var(--sacc-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--sacc-primary-rgb), 0.25);
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--sacc-primary);
  border-color: var(--sacc-primary);
}
.btn-primary {
  background-color: var(--sacc-primary);
  border-color: var(--sacc-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--sacc-primary-hover);
  border-color: var(--sacc-primary-hover);
  box-shadow: 0 0 0 0.25rem rgba(var(--sacc-primary-rgb), 0.5);
}
.bg-primary {
  background-color: var(--sacc-primary) !important;
}
.text-primary {
  color: var(--sacc-primary) !important;
}
.border-primary {
  border-color: var(--sacc-primary) !important;
}

/* --- 20. Booking Calendar --- */

/* Booking calendar event colors */
.fc-event.booking-checkedin { background: var(--sacc-success); border-color: var(--sacc-success); }
.fc-event.booking-booked { background: var(--sacc-primary); border-color: var(--sacc-primary); }
.fc-event.booking-checkedout { background: var(--sacc-text-muted); border-color: var(--sacc-text-muted); }

/* Room availability sidebar */
.room-avail-list { list-style: none; padding: 0; margin: 0; }
.room-avail-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-bottom: 1px solid var(--sacc-border);
    cursor: pointer; font-size: var(--sacc-font-size-sm);
}
.room-avail-item:hover { background: var(--sacc-surface-alt); }
.room-avail-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.room-avail-dot.occupied { background: var(--sacc-success); }
.room-avail-dot.available { background: var(--sacc-text-muted); }
.room-avail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-avail-guest { font-size: var(--sacc-font-size-xs); color: var(--sacc-text-muted); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* FullCalendar dark mode overrides */
[data-theme="dark"] .fc,
[data-coreui-theme="dark"] .fc {
    --fc-border-color: var(--sacc-border);
    --fc-page-bg-color: var(--sacc-surface);
    --fc-neutral-bg-color: var(--sacc-surface-alt);
    --fc-today-bg-color: rgba(var(--sacc-primary-rgb), 0.08);
    --fc-event-text-color: #fff;
}
[data-theme="dark"] .fc .fc-col-header-cell,
[data-theme="dark"] .fc .fc-daygrid-day-number,
[data-theme="dark"] .fc .fc-list-day-text,
[data-theme="dark"] .fc .fc-list-day-side-text,
[data-coreui-theme="dark"] .fc .fc-col-header-cell,
[data-coreui-theme="dark"] .fc .fc-daygrid-day-number,
[data-coreui-theme="dark"] .fc .fc-list-day-text,
[data-coreui-theme="dark"] .fc .fc-list-day-side-text {
    color: var(--sacc-text);
}
[data-theme="dark"] .fc .fc-button-primary,
[data-coreui-theme="dark"] .fc .fc-button-primary {
    background: var(--sacc-surface-alt);
    border-color: var(--sacc-border);
    color: var(--sacc-text);
}
[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active,
[data-coreui-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--sacc-primary);
    border-color: var(--sacc-primary);
}
[data-theme="dark"] .fc .fc-list-event:hover td,
[data-coreui-theme="dark"] .fc .fc-list-event:hover td {
    background: var(--sacc-surface-alt);
}

/* Booking toggle switches */
.booking-toggle-bar {
    display: flex; gap: 12px; align-items: center;
    font-size: var(--sacc-font-size-sm);
}
.booking-toggle-bar .form-check-input:checked {
    background-color: var(--sacc-primary);
    border-color: var(--sacc-primary);
}

/* Booking detail info rows */
.booking-detail-row {
    display: flex; justify-content: space-between; padding: 4px 0;
    border-bottom: 1px solid var(--sacc-border);
    font-size: var(--sacc-font-size-sm);
}
.booking-detail-row:last-child { border-bottom: none; }
.booking-detail-label { color: var(--sacc-text-muted); }
.booking-detail-value { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   PAGE HELP — Reusable components for in-app help modals
   Usage: Views/Help/{Module}/{Page}.cshtml
   ══════════════════════════════════════════════════════════════ */

.help-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--sacc-text);
    text-align: left;
}
.help-content p { margin-bottom: 10px; }
.help-content hr { border-color: var(--sacc-border); margin: 20px 0; }
.help-content code {
    background: var(--sacc-surface-alt);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.help-content kbd {
    background: #374151; color: #fff;
    padding: 2px 6px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* ── Table of Contents ── */
.help-toc {
    background: var(--sacc-surface-alt);
    border: 1px solid var(--sacc-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.help-toc-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--sacc-text);
    text-align: left;
}
.help-toc ul {
    columns: 2;
    list-style: none;
    padding: 0;
    margin: 0;
}
.help-toc ul li { margin-bottom: 4px; }
.help-toc ul li a {
    color: var(--sacc-primary);
    text-decoration: none;
    font-size: 13px;
}
.help-toc ul li a:hover { text-decoration: underline; }
@media (max-width: 767.98px) {
    .help-toc ul { columns: 1; }
}

/* ── Section Headings ── */
.help-content h4 {
    border-bottom: 2px solid var(--sacc-primary);
    padding-bottom: 8px;
    margin-top: 24px;
    margin-bottom: 16px;
    color: var(--sacc-text);
    font-size: 17px;
    font-weight: 700;
}
.help-content h4:first-of-type { margin-top: 0; }
.help-content h4 i { margin-right: 6px; }
.help-content h5 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sacc-text);
}
.help-content h6 {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sacc-text);
}

/* ── Numbered Step Lists ── */
.help-step-list {
    counter-reset: help-step;
    list-style: none;
    padding-left: 0;
}
.help-step-list li {
    counter-increment: help-step;
    margin-bottom: 12px;
    padding-left: 36px;
    position: relative;
}
.help-step-list li::before {
    content: counter(help-step);
    position: absolute;
    left: 0; top: 1px;
    width: 24px; height: 24px;
    background: var(--sacc-primary);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    font-weight: 600;
}

/* ── Reference Tables ── */
.help-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}
.help-content table th {
    background: #374151;
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
}
.help-content table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sacc-border);
    vertical-align: top;
}
.help-content table tr:hover { background: var(--sacc-surface-alt); }
[data-theme="dark"] .help-content table th {
    background: #1e293b;
}

/* ── Info Cards (side-by-side comparison) ── */
.help-info-card {
    background: var(--sacc-surface-alt);
    border: 1px solid var(--sacc-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}
.help-info-card.inbound  { border-left: 4px solid #10b981; }
.help-info-card.outbound { border-left: 4px solid #ef4444; }
.help-info-card.transfer { border-left: 4px solid #3b82f6; }
.help-info-card.info     { border-left: 4px solid #3b82f6; }
.help-info-card.warn     { border-left: 4px solid #f59e0b; }
.help-info-card.danger   { border-left: 4px solid #ef4444; }

/* ── Alert Boxes ── */
.help-warning-box,
.help-success-box,
.help-tip-box,
.help-info-box {
    border-radius: 8px;
    padding: 12px 16px;
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.5;
}
.help-warning-box {
    background: #fef2f2; border: 1px solid #fca5a5;
}
.help-warning-box i { color: #ef4444; }
.help-success-box {
    background: #f0fdf4; border: 1px solid #86efac;
}
.help-success-box i { color: #10b981; }
.help-tip-box {
    background: #fffbeb; border: 1px solid #fcd34d;
}
.help-tip-box i { color: #f59e0b; }
.help-info-box {
    background: #eff6ff; border: 1px solid #93c5fd;
}
.help-info-box i { color: #3b82f6; }
[data-theme="dark"] .help-warning-box { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: var(--sacc-text); }
[data-theme="dark"] .help-success-box { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: var(--sacc-text); }
[data-theme="dark"] .help-tip-box     { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: var(--sacc-text); }
[data-theme="dark"] .help-info-box    { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: var(--sacc-text); }
[data-theme="dark"] .help-content table td { color: var(--sacc-text); }
[data-theme="dark"] .help-info-card { background: var(--sacc-surface-alt); color: var(--sacc-text); }
[data-theme="dark"] .help-toc { background: var(--sacc-surface-alt); color: var(--sacc-text); }
[data-theme="dark"] .help-badge.opening { background: #4b5563; }

/* ── Flow Diagrams (dark monospace block) ── */
.help-flow-diagram {
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 12px 0;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.8;
    overflow-x: auto;
}
.help-flow-diagram .hl  { color: #34d399; font-weight: 600; }
.help-flow-diagram .hlw { color: #fbbf24; font-weight: 600; }
.help-flow-diagram .hlr { color: #f87171; font-weight: 600; }
.help-flow-diagram .hlb { color: #60a5fa; font-weight: 600; }

/* ── Workflow Steps (horizontal pill chain) ── */
.help-workflow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.help-workflow .step {
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
}
.help-workflow .arrow { color: var(--sacc-text-muted); font-size: 14px; }
.help-workflow .optional { color: var(--sacc-text-muted); font-size: 12px; }

/* ── Badges (status & type) ── */
.help-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.help-badge.receipt   { background: #10b981; }
.help-badge.issue     { background: #f59e0b; }
.help-badge.transfer  { background: #3b82f6; }
.help-badge.adjust    { background: #14b8a6; }
.help-badge.damage    { background: #ef4444; }
.help-badge.underpack { background: #6b7280; }
.help-badge.opening   { background: #1f2937; }
.help-badge.in        { background: #10b981; }
.help-badge.out       { background: #f59e0b; }
.help-badge.posted    { background: #10b981; }
.help-badge.unposted  { background: #6b7280; }

/* ── Grid Layouts ── */
.help-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.help-three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
@media (max-width: 767.98px) {
    .help-two-col, .help-three-col { grid-template-columns: 1fr; }
}

/* ══ Help components that were authored in the help files but never styled ══
   ~20 help files (POS, Front Desk, Collections, StockCodes, the whole SaasAdmin
   set …) already mark up these components. Without the rules below they render
   as bare unstyled divs — numbered steps with no numbers, cards with no card.
   Defined here rather than rewritten out of the content, because the markup is
   the better shape and is used in too many places to unpick. */

/* .help-table — authored on <table> inside .help-content, which is already
   styled by the element rule above. Kept explicit so the intent is obvious and
   the class is not "dead". */
.help-content table.help-table { width: 100%; }

/* .help-matrix — a permission/capability grid: tighter, centred tick columns. */
.help-content table.help-matrix { font-size: 12px; }
.help-content table.help-matrix th:not(:first-child),
.help-content table.help-matrix td:not(:first-child) { text-align: center; }

/* .help-tip-warning — an amber variant of .help-tip-box, used where a "tip"
   is really a caution. Applied alongside .help-tip-box, so only the colours
   need overriding. */
.help-content .help-tip-box.help-tip-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}
.help-content .help-tip-box.help-tip-warning i { color: #f59e0b; }
[data-theme="dark"] .help-content .help-tip-box.help-tip-warning {
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.3);
    color: var(--sacc-text);
}

/* Tip / note callouts — same family as .help-tip-box, shorter aliases used by
   the SaasAdmin + FrontDesk sets. */
.help-content .help-tip,
.help-content .help-note {
    padding: 12px 14px;
    border-radius: 6px;
    margin: 12px 0;
    font-size: 13px;
    border: 1px solid;
}
.help-content .help-tip {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}
.help-content .help-tip i { color: #f59e0b; margin-right: 6px; }
.help-content .help-note {
    background: var(--sacc-surface-alt);
    border-color: var(--sacc-border);
    color: var(--sacc-text-muted);
}
[data-theme="dark"] .help-content .help-tip {
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.3);
    color: var(--sacc-text);
}

/* Callouts — same family again, used by the FrontDesk / Collections / Stores set. */
.help-content .help-callout {
    padding: 12px 14px;
    border-radius: 6px;
    margin: 12px 0;
    font-size: 13px;
    border: 1px solid var(--sacc-border);
    background: var(--sacc-surface-alt);
    border-left-width: 4px;
}
.help-content .help-callout-info    { background: #eff6ff; border-color: #bfdbfe; border-left-color: #3b82f6; color: #1e40af; }
.help-content .help-callout-warning { background: #fffbeb; border-color: #fde68a; border-left-color: #f59e0b; color: #78350f; }
.help-content .help-callout-danger  { background: #fef2f2; border-color: #fecaca; border-left-color: #ef4444; color: #991b1b; }
.help-content .help-callout-success { background: #ecfdf5; border-color: #a7f3d0; border-left-color: #10b981; color: #065f46; }
[data-theme="dark"] .help-content .help-callout-info    { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.3);  color: var(--sacc-text); }
[data-theme="dark"] .help-content .help-callout-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: var(--sacc-text); }
[data-theme="dark"] .help-content .help-callout-danger  { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3);  color: var(--sacc-text); }
[data-theme="dark"] .help-content .help-callout-success { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: var(--sacc-text); }

/* Titled card */
.help-card {
    border: 1px solid var(--sacc-border);
    border-radius: 8px;
    margin: 14px 0;
    overflow: hidden;
    background: var(--sacc-surface);
}
.help-card-header {
    background: var(--sacc-surface-alt);
    border-bottom: 1px solid var(--sacc-border);
    padding: 9px 14px;
    font-weight: 600;
    font-size: 13px;
    color: var(--sacc-text);
}
.help-card-header i { margin-right: 6px; color: var(--sacc-primary); }
.help-card-body { padding: 12px 14px; }
.help-card-body > :last-child { margin-bottom: 0; }

/* Worked-example block — same shell as the card, green-tinted header so an
   example is distinguishable from reference material at a glance. */
.help-example {
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    margin: 14px 0;
    overflow: hidden;
    background: var(--sacc-surface);
}
.help-example-header {
    background: #ecfdf5;
    border-bottom: 1px solid #a7f3d0;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 13px;
    color: #065f46;
}
.help-example-header i { margin-right: 6px; }
.help-example-body { padding: 12px 14px; }
.help-example-body > :last-child { margin-bottom: 0; }
[data-theme="dark"] .help-example { border-color: rgba(16,185,129,.35); }
[data-theme="dark"] .help-example-header {
    background: rgba(16,185,129,.12);
    border-bottom-color: rgba(16,185,129,.35);
    color: var(--sacc-text);
}

/* Icon flow (Setup → Book → Check in → …) */
.help-flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
}
.help-flow-step {
    flex: 1 1 120px;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 12px 8px;
    border: 1px solid var(--sacc-border);
    border-radius: 8px;
    background: var(--sacc-surface-alt);
    font-size: 12px;
}
.help-flow-step > span { color: var(--sacc-text-muted); font-size: 11px; }
.help-flow-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    margin-bottom: 2px;
}
.help-flow-arrow {
    display: flex; align-items: center;
    color: var(--sacc-text-muted);
    font-size: 13px;
}
@media (max-width: 575.98px) {
    .help-flow-arrow { display: none; }
}

/* Numbered chain inside .help-workflow */
.help-workflow-step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--sacc-border);
    border-radius: 20px;
    background: var(--sacc-surface-alt);
    font-size: 12px;
}
.help-workflow-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--sacc-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}
.help-workflow-arrow { color: var(--sacc-text-muted); font-size: 12px; display: flex; align-items: center; }

/* Numbered step with a body block (used where a step needs a paragraph) */
.help-step-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--sacc-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}
.help-step-body { flex: 1 1 auto; }

/* Tip cards + generic help grids */
.help-tips-grid,
.help-toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 12px 0;
}
.help-tip-card {
    display: flex;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--sacc-border);
    border-radius: 8px;
    background: var(--sacc-surface-alt);
    font-size: 12.5px;
}
.help-tip-card-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sacc-surface);
    color: var(--sacc-primary);
    flex: 0 0 auto;
}
.help-toc-item {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--sacc-border);
    border-radius: 6px;
    background: var(--sacc-surface);
    color: var(--sacc-primary);
    text-decoration: none;
    font-size: 12.5px;
}
.help-toc-item:hover { background: var(--sacc-surface-alt); text-decoration: none; }

/* Preformatted sample block */
.help-content pre.help-code {
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 12.5px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

/* Help content must never push the modal sideways — wide tables and diagrams
   scroll inside themselves instead. */
.help-content { overflow-x: hidden; }
.help-content table {
    display: block;          /* makes the table its own scroll container … */
    width: max-content;      /* … at its natural width … */
    max-width: 100%;         /* … but never wider than the modal. */
    overflow-x: auto;
}

/* ── Page help link (see main definition in heading bar section above) ── */


/* ==========================================================================
   30. SETTINGS PAGE — Sidebar + Card Layout
   ========================================================================== */

/* --- 30a. Layout container --- */
.sacc-settings-layout {
  display: flex;
  gap: 1.5rem;
  min-height: calc(100vh - var(--sacc-header-height) - 120px);
}

/* --- 30b. Sidebar navigation --- */
.sacc-settings-nav {
  position: sticky;
  top: calc(var(--sacc-header-height) + 12px);
  width: 220px;
  min-width: 220px;
  max-height: calc(100vh - var(--sacc-header-height) - 24px);
  overflow-y: auto;
  padding: 0.5rem 0;
  align-self: flex-start;
}

.sacc-settings-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 0 8px 8px;
  border: 1px solid var(--sacc-border, #e2e8f0);
  border-radius: var(--sacc-radius-sm, 4px);
  background: var(--sacc-surface, #fff);
  transition: border-color 0.15s;
}
.sacc-settings-search:focus-within {
  border-color: var(--sacc-primary, #0d9488);
}
.sacc-settings-search i {
  font-size: 11px;
  color: var(--sacc-text-muted, #94a3b8);
  flex-shrink: 0;
}
.sacc-settings-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  color: var(--sacc-text, #1e293b);
  width: 100%;
  padding: 0;
}
.sacc-settings-search input::placeholder {
  color: var(--sacc-text-muted, #94a3b8);
}

/* Settings row match highlight */
.sacc-settings-row.settings-match {
  background: rgba(13, 148, 136, 0.04);
  border-radius: var(--sacc-radius-sm, 4px);
}
.sacc-settings-row.settings-hidden {
  display: none;
}
.sacc-settings-card.settings-section-hidden {
  display: none;
}
.sacc-settings-card-header .settings-match-count {
  font-size: 10px;
  font-weight: 600;
  background: var(--sacc-primary, #0d9488);
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 8px;
}

.sacc-settings-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sacc-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--sacc-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--sacc-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.sacc-settings-nav-item:hover {
  background: var(--sacc-surface-hover);
  color: var(--sacc-text);
  text-decoration: none;
}

.sacc-settings-nav-item.active {
  background: rgba(var(--sacc-primary-rgb), 0.08);
  color: var(--sacc-primary);
  font-weight: 600;
  border-left-color: var(--sacc-primary);
}

.sacc-settings-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

.sacc-settings-nav-item.active i {
  opacity: 1;
}

/* --- 30c. Content area --- */
.sacc-settings-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 2rem;
}

/* --- 30d. Section card --- */
.sacc-settings-card {
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius-lg);
  box-shadow: var(--sacc-shadow-xs);
  padding: 0;
  overflow: visible;
  animation: saccSettingsFadeIn 0.35s ease backwards;
  /*  min-width defaults to AUTO on a flex or grid child, which means "never shrink below your
      content". The settings cards are grid children, so at 414px they held their content width
      and pushed the page 139px sideways - measured, not guessed. This is the same one-line
      cause found app-wide in #155 and fixed there on .body.flex-grow-1; the cards had it too. */
  min-width: 0;
}

.sacc-settings-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--sacc-surface-alt);
  border-bottom: 1px solid var(--sacc-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--sacc-text);
  border-radius: var(--sacc-radius-lg) var(--sacc-radius-lg) 0 0;
}

.sacc-settings-card-header i {
  color: var(--sacc-primary);
  font-size: 15px;
  width: 20px;
  text-align: center;
}

.sacc-settings-card-body {
  padding: 8px 20px 16px;
}

/* ── Flatpickr calendar ──────────────────────────────────────────────
   Calendar is appended to document.body (static: false) and positioned
   with position: fixed via JS — same strategy as CoreUI/Popper.js.
   ──────────────────────────────────────────────────────────────────── */

/* SACC Select full width inside settings cards — covered by global rule above */

/* --- 30e. Setting row --- */
.sacc-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--sacc-gray-100);
  gap: 16px;
  /*  A ROW THAT CANNOT WRAP SQUEEZES THE CONTROL INSTEAD. The control column is flex 0 0 40%,
      so as the row narrows the 40% share falls with it and a numeric input was measured at 28px
      wide - narrower than the value it holds, on a screen where the whole point is to read and
      change that value. Wrapping puts the control on its own line instead, which is what the
      label/value pattern wants at a narrow width anyway. The basis below keeps the two side by
      side while there is room for both. */
  flex-wrap: wrap;
}

.sacc-settings-row:last-child {
  border-bottom: none;
}

.sacc-settings-info {
  flex: 1;
  min-width: 0;
}

.sacc-settings-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sacc-text);
  line-height: 1.3;
}

.sacc-settings-desc {
  font-size: 11.5px;
  color: var(--sacc-text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

.sacc-settings-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sacc-text-muted);
  padding: 0.75rem 0 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--sacc-border);
}
.sacc-settings-group-label:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}
.sacc-settings-group-label i {
  font-size: 0.75rem;
  color: var(--sacc-primary);
}

.sacc-settings-control {
  /*  Was `flex: 0 0 40%` - a fixed share that shrinks with the row and takes the control down
      with it. Now it keeps 40% as its PREFERRED size but refuses to go under 220px, and wraps
      to its own line rather than collapsing. */
  flex: 1 1 40%;
  min-width: min(220px, 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/*  The label column needs the same floor, or the control's new minimum simply pushes the row
    wider instead of wrapping it. */
.sacc-settings-info {
  min-width: min(200px, 100%);
}

.sacc-settings-control .form-control,
.sacc-settings-control .form-select {
  width: 100%;
  min-width: 100px;
  max-width: 400px;
  font-size: 13px;
  height: 34px;
}

.sacc-settings-control .form-control.sacc-settings-input-sm {
  max-width: 100px;
}

/* --- 30f. CSS-only toggle switch --- */
.sacc-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
  user-select: none;
}

.sacc-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sacc-toggle-slider {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--sacc-gray-300);
  border-radius: 50rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.sacc-toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.sacc-toggle input[type="checkbox"]:checked + .sacc-toggle-slider {
  background: var(--sacc-primary);
}

.sacc-toggle input[type="checkbox"]:checked + .sacc-toggle-slider::after {
  transform: translateX(18px);
}

.sacc-toggle input[type="checkbox"]:focus-visible + .sacc-toggle-slider {
  box-shadow: 0 0 0 3px var(--sacc-border-focus);
}

/* --- 30g. Stagger-in animation --- */
@keyframes saccSettingsFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sacc-settings-card:nth-child(1)  { animation-delay: 0ms; }
.sacc-settings-card:nth-child(2)  { animation-delay: 50ms; }
.sacc-settings-card:nth-child(3)  { animation-delay: 100ms; }
.sacc-settings-card:nth-child(4)  { animation-delay: 150ms; }
.sacc-settings-card:nth-child(5)  { animation-delay: 200ms; }
.sacc-settings-card:nth-child(6)  { animation-delay: 250ms; }
.sacc-settings-card:nth-child(7)  { animation-delay: 300ms; }
.sacc-settings-card:nth-child(8)  { animation-delay: 350ms; }
.sacc-settings-card:nth-child(9)  { animation-delay: 400ms; }
.sacc-settings-card:nth-child(10) { animation-delay: 450ms; }
.sacc-settings-card:nth-child(11) { animation-delay: 500ms; }
.sacc-settings-card:nth-child(12) { animation-delay: 550ms; }

/* --- 30h. Footer bar --- */
.sacc-settings-footer {
  position: sticky;
  bottom: 0;
  background: var(--sacc-surface);
  border-top: 1px solid var(--sacc-border);
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  border-radius: 0 0 var(--sacc-radius-lg) var(--sacc-radius-lg);
}

/* --- 30i. Printer groups section --- */
/* --- 30i. Settings subsection header --- */
.sacc-settings-subsection-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sacc-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 0 6px;
  margin-top: 16px;
  border-top: 1px solid var(--sacc-gray-200);
}
.sacc-settings-subsection-header:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}
.sacc-settings-subsection-header i {
  font-size: 13px;
  color: var(--sacc-primary);
  opacity: 0.7;
}
[data-theme="dark"] .sacc-settings-subsection-header,
[data-coreui-theme="dark"] .sacc-settings-subsection-header {
  border-top-color: var(--sacc-gray-700);
}

.sacc-settings-printer-header {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr 2fr 2fr auto;
  gap: 8px;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sacc-text-muted);
  border-bottom: 1px solid var(--sacc-border);
  margin-bottom: 8px;
}

.printer-group-row-modern {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr 2fr 2fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--sacc-gray-100);
}

.printer-group-row-modern:last-child {
  border-bottom: none;
}

/* --- 30j. Dark mode --- */
[data-theme="dark"] .sacc-settings-nav-item:hover,
[data-coreui-theme="dark"] .sacc-settings-nav-item:hover {
  background: var(--sacc-surface-hover);
}

[data-theme="dark"] .sacc-settings-nav-item.active,
[data-coreui-theme="dark"] .sacc-settings-nav-item.active {
  background: rgba(32, 168, 216, 0.12);
  color: var(--sacc-accent);
  border-left-color: var(--sacc-accent);
}

[data-theme="dark"] .sacc-settings-card-header i,
[data-coreui-theme="dark"] .sacc-settings-card-header i {
  color: var(--sacc-accent);
}

[data-theme="dark"] .sacc-settings-row,
[data-coreui-theme="dark"] .sacc-settings-row {
  border-bottom-color: var(--sacc-border);
}

[data-theme="dark"] .sacc-toggle-slider,
[data-coreui-theme="dark"] .sacc-toggle-slider {
  background: var(--sacc-gray-600);
}

[data-theme="dark"] .sacc-toggle input[type="checkbox"]:checked + .sacc-toggle-slider,
[data-coreui-theme="dark"] .sacc-toggle input[type="checkbox"]:checked + .sacc-toggle-slider {
  background: var(--sacc-accent);
}

[data-theme="dark"] .sacc-settings-footer,
[data-coreui-theme="dark"] .sacc-settings-footer {
  background: var(--sacc-surface);
  border-top-color: var(--sacc-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}

/* --- 30k. Mobile responsive --- */
@media (max-width: 991.98px) {
  .sacc-settings-layout {
    flex-direction: column;
    gap: 0;
  }

  .sacc-settings-nav {
    position: relative;
    top: 0;
    width: 100%;
    min-width: unset;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sacc-border);
    margin-bottom: 1rem;
  }

  .sacc-settings-nav-list {
    flex-direction: row;
    gap: 4px;
    padding: 0 8px;
    white-space: nowrap;
  }

  .sacc-settings-nav-item {
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--sacc-radius-sm) var(--sacc-radius-sm) 0 0;
    padding: 8px 12px;
    font-size: 12px;
  }

  .sacc-settings-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--sacc-primary);
  }

  .sacc-settings-nav-item span.nav-label {
    display: none;
  }
}

/* --- 30l. Enhanced file upload zone --- */
.sacc-upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 2px dashed var(--sacc-border);
  border-radius: var(--sacc-radius-lg);
  background: var(--sacc-surface-alt);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  text-align: center;
  padding: 16px;
}

.sacc-upload-zone:hover,
.sacc-upload-zone.dragover {
  border-color: var(--sacc-primary);
  background: rgba(var(--sacc-primary-rgb), 0.04);
}

.sacc-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.sacc-upload-zone-icon {
  font-size: 28px;
  color: var(--sacc-gray-400);
  margin-bottom: 6px;
  transition: color 0.2s;
}

.sacc-upload-zone:hover .sacc-upload-zone-icon {
  color: var(--sacc-primary);
}

.sacc-upload-zone-text {
  font-size: 12px;
  color: var(--sacc-text-muted);
  line-height: 1.4;
}

.sacc-upload-zone-text strong {
  color: var(--sacc-primary);
}

.sacc-upload-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 140px;
}

.sacc-upload-preview img {
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
  border-radius: var(--sacc-radius-sm);
}

.sacc-upload-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sacc-danger);
  color: #fff;
  border: none;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--sacc-shadow-sm);
  transition: transform 0.15s;
}

.sacc-upload-remove:hover {
  transform: scale(1.1);
}

.sacc-upload-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sacc-text-muted);
  margin-bottom: 6px;
  text-align: center;
}

.sacc-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

/* --- 30m. Quick links grid --- */
.sacc-quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.sacc-quicklink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius);
  background: var(--sacc-surface);
  color: var(--sacc-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.sacc-quicklink:hover {
  border-color: var(--sacc-primary);
  background: rgba(var(--sacc-primary-rgb), 0.04);
  color: var(--sacc-primary);
  text-decoration: none;
  box-shadow: var(--sacc-shadow-sm);
}

.sacc-quicklink i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  opacity: 0.7;
}

.sacc-quicklink:hover i {
  opacity: 1;
}

/* Dark mode for upload/quicklinks */
[data-theme="dark"] .sacc-upload-zone,
[data-coreui-theme="dark"] .sacc-upload-zone {
  background: var(--sacc-surface-alt);
  border-color: var(--sacc-border);
}

[data-theme="dark"] .sacc-upload-zone:hover,
[data-coreui-theme="dark"] .sacc-upload-zone:hover,
[data-theme="dark"] .sacc-upload-zone.dragover,
[data-coreui-theme="dark"] .sacc-upload-zone.dragover {
  background: rgba(32, 168, 216, 0.06);
  border-color: var(--sacc-accent);
}

[data-theme="dark"] .sacc-quicklink,
[data-coreui-theme="dark"] .sacc-quicklink {
  background: var(--sacc-surface);
  border-color: var(--sacc-border);
}

[data-theme="dark"] .sacc-quicklink:hover,
[data-coreui-theme="dark"] .sacc-quicklink:hover {
  border-color: var(--sacc-accent);
  color: var(--sacc-accent);
  background: rgba(32, 168, 216, 0.08);
}

/* ==========================================================================
   GUEST REGISTRATION COMPONENTS
   ========================================================================== */

/* --- Guest search bar --- */
.sacc-guest-search-bar {
  position: relative;
  background: var(--sacc-info-bg, #e3f2fd);
  border: 1px solid #90caf9;
  border-radius: var(--sacc-radius-lg, 8px);
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sacc-guest-search-bar i {
  font-size: 18px;
  color: var(--sacc-primary);
  flex-shrink: 0;
}

.sacc-guest-list-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1565c0;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--sacc-radius, 6px);
  border: 1px solid #90caf9;
  background: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.sacc-guest-list-link:hover {
  background: #e3f2fd;
  border-color: #1565c0;
  color: #0d47a1;
}
.sacc-guest-list-link i { font-size: 12px !important; color: inherit !important; }

.sacc-guest-search-bar input {
  flex: 1;
  border: 1px solid #bbdefb;
  border-radius: var(--sacc-radius, 6px);
  padding: 8px 12px;
  font-size: 13px;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.sacc-guest-search-bar input:focus {
  border-color: var(--sacc-primary);
  box-shadow: 0 0 0 2px rgba(var(--sacc-primary-rgb), 0.12);
}

.sacc-guest-search-bar .search-hint {
  font-size: 11px;
  color: #1565c0;
  flex-shrink: 0;
}

/* --- Guest search dropdown --- */
.sacc-guest-search-dropdown {
  position: absolute;
  top: 100%;
  left: 20px;
  right: 20px;
  background: var(--sacc-surface, #fff);
  border: 1px solid var(--sacc-border, #dee2e6);
  border-radius: var(--sacc-radius, 6px);
  box-shadow: var(--sacc-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
  z-index: 1050;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 4px;
}

.sacc-guest-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--sacc-gray-100, #f5f5f5);
  transition: background 0.15s;
}

.sacc-guest-search-item:last-child { border-bottom: none; }

.sacc-guest-search-item:hover {
  background: rgba(var(--sacc-primary-rgb), 0.06);
}

.sacc-guest-search-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sacc-info-bg, #e3f2fd);
  color: var(--sacc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.sacc-guest-search-info { flex: 1; min-width: 0; }

.sacc-guest-search-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sacc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sacc-guest-search-meta {
  font-size: 11px;
  color: var(--sacc-text-muted);
}

/* --- Guest photo area --- */
.sacc-guest-photo-area {
  width: 120px;
  height: 140px;
  border: 2px dashed var(--sacc-border, #dee2e6);
  border-radius: var(--sacc-radius, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto 8px;
  background: var(--sacc-surface-alt, #fafafa);
}

.sacc-guest-photo-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sacc-guest-photo-area .placeholder-icon {
  font-size: 32px;
  color: var(--sacc-gray-300, #ccc);
}

/* --- VIP badge --- */
.sacc-context-badge.badge-vip {
  background: linear-gradient(135deg, #fff8e1, #ffe082);
  color: #e65100;
  font-weight: 600;
  border: 1px solid #ffd54f;
}

/* --- Guest timeline --- */
.sacc-guest-timeline {
  position: relative;
  padding-left: 24px;
}

.sacc-guest-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--sacc-gray-200, #e0e0e0);
}

.sacc-timeline-item {
  position: relative;
  padding-bottom: 16px;
}

.sacc-timeline-item:last-child { padding-bottom: 0; }

.sacc-timeline-marker {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sacc-gray-300, #bdbdbd);
  border: 2px solid var(--sacc-surface, #fff);
  z-index: 1;
}

.sacc-timeline-item.active .sacc-timeline-marker {
  background: var(--sacc-success, #2e7d32);
}

.sacc-timeline-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--sacc-text);
  line-height: 1.3;
}

.sacc-timeline-date {
  font-size: 11px;
  color: var(--sacc-text-muted);
}

.sacc-timeline-status {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 2px;
}

.sacc-timeline-status.status-in { background: var(--sacc-success-bg); color: var(--sacc-success); }
.sacc-timeline-status.status-out { background: var(--sacc-gray-100); color: var(--sacc-text-muted); }

/* --- Dark mode overrides --- */
[data-theme="dark"] .sacc-guest-search-bar,
[data-coreui-theme="dark"] .sacc-guest-search-bar {
  background: rgba(32, 168, 216, 0.06);
  border-color: rgba(32, 168, 216, 0.2);
}

[data-theme="dark"] .sacc-guest-search-bar input,
[data-coreui-theme="dark"] .sacc-guest-search-bar input {
  background: var(--sacc-surface);
  border-color: var(--sacc-border);
  color: var(--sacc-text);
}

[data-theme="dark"] .sacc-guest-list-link,
[data-coreui-theme="dark"] .sacc-guest-list-link {
  background: var(--sacc-surface);
  border-color: var(--sacc-border);
  color: var(--sacc-accent);
}
[data-theme="dark"] .sacc-guest-list-link:hover,
[data-coreui-theme="dark"] .sacc-guest-list-link:hover {
  background: rgba(32, 168, 216, 0.08);
  border-color: var(--sacc-accent);
}

[data-theme="dark"] .sacc-guest-search-bar .search-hint,
[data-coreui-theme="dark"] .sacc-guest-search-bar .search-hint {
  color: var(--sacc-accent);
}

[data-theme="dark"] .sacc-guest-search-dropdown,
[data-coreui-theme="dark"] .sacc-guest-search-dropdown {
  background: var(--sacc-surface);
  border-color: var(--sacc-border);
}

[data-theme="dark"] .sacc-guest-search-item:hover,
[data-coreui-theme="dark"] .sacc-guest-search-item:hover {
  background: rgba(32, 168, 216, 0.08);
}

[data-theme="dark"] .sacc-guest-photo-area,
[data-coreui-theme="dark"] .sacc-guest-photo-area {
  background: var(--sacc-surface);
  border-color: var(--sacc-border);
}

[data-theme="dark"] .sacc-context-badge.badge-vip,
[data-coreui-theme="dark"] .sacc-context-badge.badge-vip {
  background: linear-gradient(135deg, #3e3000, #5d4600);
  color: #ffd54f;
  border-color: #5d4600;
}

[data-theme="dark"] .sacc-guest-timeline::before,
[data-coreui-theme="dark"] .sacc-guest-timeline::before {
  background: var(--sacc-border);
}

[data-theme="dark"] .sacc-timeline-marker,
[data-coreui-theme="dark"] .sacc-timeline-marker {
  border-color: var(--sacc-surface);
}

/* ═══════════════════════════════════════════════════
   Module Navigation Bar
   ═══════════════════════════════════════════════════ */
.sacc-module-nav {
  /*  Its children must be allowed to shrink, or the bar refuses to go below its content width
      and pushes the whole PAGE sideways. Measured on the stay screen: 44px of horizontal page
      scroll at 820px, with the bar itself clipped by 64px, while every other width was clean.
      flex-wrap already lets it take a second line; min-width:0 is what lets it get there. */
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: var(--sacc-surface);
  border-bottom: 1px solid var(--sacc-border);
  padding: 0 0.5rem;
  min-height: 38px;
  gap: 0;
  margin-bottom: 0.75rem;
}

.sacc-module-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem 0.45rem 0.5rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--sacc-text);
  text-decoration: none;
  border-right: 1px solid var(--sacc-border);
  margin-right: 0.25rem;
  flex-shrink: 0;
}
.sacc-module-nav-brand:hover { color: var(--sacc-primary); text-decoration: none; }
.sacc-module-nav-brand i { font-size: 0.9rem; }

.sacc-module-nav > *,
.sacc-module-nav-link { min-width: 0; }
.sacc-module-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  color: var(--sacc-text-secondary);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.sacc-module-nav-link:hover {
  color: var(--sacc-text);
  background: rgba(0,0,0,0.04);
  text-decoration: none;
}
.sacc-module-nav-link i { font-size: 0.78rem; }

.sacc-module-nav-divider {
  width: 1px;
  height: 20px;
  background: var(--sacc-border);
  margin: 0 0.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .sacc-module-nav-link:hover,
[data-coreui-theme="dark"] .sacc-module-nav-link:hover {
  background: rgba(255,255,255,0.06);
}

/* ── Module Nav Dropdown ── */
.sacc-nav-dropdown {
  position: relative;
  flex-shrink: 0;

  /*  A CLOSED MENU MUST NOT WIDEN THE PAGE.
      The menu is hidden with opacity:0 + visibility:hidden, NOT display:none, so it is still
      laid out: min-width 190px inside an 88px trigger, overflowing 102px to the right. Being
      absolutely positioned does not spare its ancestors — a positioned descendant still counts
      toward scrollable overflow — so that 102px propagated up the module nav (780 -> 844) to
      .page-content (804 -> 856) and to the document (820 -> 864). That was the whole of the
      44px of horizontal page scroll on the stay screen at 820px, and it is present on EVERY
      page that renders this nav; wider screens simply had slack to absorb it.
      No element ever showed as overflowing because the menu is not in the DOM query - it took
      switching ::before/::after off wholesale to see the number move.

      `clip`, not `hidden`: hidden would make this a scroll container. The open state restores
      visible so the menu still escapes when it is actually shown.

      TRADE-OFF, deliberate: the 0.18s fade-OUT is lost, because the class is removed and the
      clip applies at once. The fade-IN is unaffected. A quarter-second of polish on close is
      worth less than 44px of horizontal scroll on every page. */
  overflow: clip;
}
.sacc-nav-dropdown.open { overflow: visible; }
.sacc-nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  color: var(--sacc-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.sacc-nav-dropdown-trigger:hover,
.sacc-nav-dropdown.open .sacc-nav-dropdown-trigger {
  color: var(--sacc-primary);
  background: rgba(0,0,0,0.04);
}
.sacc-nav-dropdown-trigger .sacc-caret {
  font-size: 0.65rem;
  margin-left: 0.1rem;
  transition: transform 0.25s ease;
}
.sacc-nav-dropdown.open .sacc-caret {
  transform: rotate(180deg);
}
.sacc-nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  min-width: 190px;
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 0.3rem 0;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.sacc-nav-dropdown.open > .sacc-nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sacc-nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  color: var(--sacc-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.sacc-nav-dropdown-menu a:hover {
  color: var(--sacc-primary);
  background: rgba(0,0,0,0.04);
}
.sacc-nav-dropdown-menu a:active {
  background: rgba(0,0,0,0.07);
}
.sacc-nav-dropdown-menu a i {
  font-size: 0.78rem;
  width: 16px;
  text-align: center;
}

/* Mobile: the nav wraps, so a trigger can end up hard against the right edge. Its
   absolutely-positioned 190px menu is anchored left:0 to the trigger, so it then hangs
   past the viewport — and because nothing clips it, the DOCUMENT grows and the whole
   page slides sideways under the thumb (measured: 48px of horizontal scroll at 390px on
   /Admindb and /Approvals, both of which carry the Admin toolbar; the Financials toolbar
   escaped only because its last dropdown sits further left).
   Below 720px the menu anchors to the NAV BAR instead of the trigger and spans it, so it
   is always inside the viewport whichever trigger opened it. Desktop is untouched. */
@media (max-width: 720px) {
  .sacc-module-nav { position: relative; }
  .sacc-nav-dropdown { position: static; }
  .sacc-nav-dropdown-menu {
    left: 0.5rem;
    right: 0.5rem;
    min-width: 0;
  }
}

[data-theme="dark"] .sacc-nav-dropdown-trigger:hover,
[data-coreui-theme="dark"] .sacc-nav-dropdown-trigger:hover,
[data-theme="dark"] .sacc-nav-dropdown.open .sacc-nav-dropdown-trigger,
[data-coreui-theme="dark"] .sacc-nav-dropdown.open .sacc-nav-dropdown-trigger {
  background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .sacc-nav-dropdown-menu,
[data-coreui-theme="dark"] .sacc-nav-dropdown-menu {
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
}
[data-theme="dark"] .sacc-nav-dropdown-menu a:hover,
[data-coreui-theme="dark"] .sacc-nav-dropdown-menu a:hover {
  background: rgba(255,255,255,0.06);
}

/* ==========================================================================
   INLINE EDIT (replaces x-editable)
   ========================================================================== */
.sacc-inline-input,
.sacc-inline-select {
  border: 1px solid var(--sacc-primary, #3b82f6);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: inherit;
  background: var(--cui-body-bg);
  color: var(--cui-body-color);
  outline: none;
  min-width: 60px;
  max-width: 200px;
}

/* Click-anywhere affordance for inline-editable cells */
.sacc-inline-editable {
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 4px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.sacc-inline-editable:hover {
  background-color: var(--cui-tertiary-bg, rgba(0, 0, 0, 0.04));
  box-shadow: inset 0 -1px 0 var(--sacc-primary, #0d9488);
}
[data-theme="dark"] .sacc-inline-editable:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Fade the legacy pencil icons next to editable cells — click-anywhere
   is the primary affordance; icons reveal on row hover for discoverability.
   Scoped to .clinic-table so other tables are unaffected. */
.clinic-table .note.fa-edit,
.clinic-table .amt.fa-edit,
.clinic-table .comm.fa-edit,
.clinic-table .qty.fa-edit,
.clinic-table .price.fa-edit,
.clinic-table .result.fa-edit {
  opacity: 0;
  margin-left: 4px;
  font-size: 11px;
  color: var(--cui-secondary-color, #768192);
  transition: opacity 0.15s ease;
}
.clinic-table tr:hover .note.fa-edit,
.clinic-table tr:hover .amt.fa-edit,
.clinic-table tr:hover .comm.fa-edit,
.clinic-table tr:hover .qty.fa-edit,
.clinic-table tr:hover .price.fa-edit,
.clinic-table tr:hover .result.fa-edit {
  opacity: 0.45;
}
.clinic-table .note.fa-edit:hover,
.clinic-table .amt.fa-edit:hover,
.clinic-table .comm.fa-edit:hover,
.clinic-table .qty.fa-edit:hover,
.clinic-table .price.fa-edit:hover,
.clinic-table .result.fa-edit:hover {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   STEPPER — shared horizontal workflow step indicator.
   Used by: InventoryRequest (inventory-req-stepper), PurchaseOrder (dept-req-stepper).
   Both class names are valid aliases for the same layout.
   ══════════════════════════════════════════════════════════════ */

.dept-req-stepper,
.inventory-req-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.stepper-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 3px solid var(--sacc-border, #dee2e6);
  background: var(--sacc-card-bg, #fff);
  color: var(--sacc-text-muted, #8a93a2);
  z-index: 1;
  transition: all 0.3s ease;
}

.stepper-label {
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sacc-text-muted, #8a93a2);
  text-align: center;
}

.stepper-connector {
  position: absolute;
  top: 18px;
  height: 3px;
  width: 50%;
  z-index: 0;
  background: var(--sacc-border, #dee2e6);
}
.stepper-connector.left { left: 0; }
.stepper-connector.right { right: 0; left: 50%; }

.stepper-step.completed .stepper-connector { background: var(--sacc-success, #2eb85c); }
.stepper-step.active .stepper-connector.left { background: var(--sacc-success, #2eb85c); }
.stepper-step.active .stepper-connector.right { background: var(--sacc-border, #dee2e6); }

.stepper-step.completed .stepper-circle {
  background: var(--sacc-success, #2eb85c);
  border-color: var(--sacc-success, #2eb85c);
  color: #fff;
}

.stepper-step.active .stepper-circle {
  background: var(--sacc-primary, #16537e);
  border-color: var(--sacc-primary, #16537e);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(22, 83, 126, 0.2);
  animation: stepper-pulse 2s ease-in-out infinite;
}

.stepper-step.rejected .stepper-circle { background: var(--sacc-danger, #e55353); border-color: var(--sacc-danger); color: #fff; }
.stepper-step.returned .stepper-circle { background: var(--sacc-warning, #f9b115); border-color: var(--sacc-warning); color: #fff; }

@keyframes stepper-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(22, 83, 126, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(22, 83, 126, 0.1); }
}

.stepper-step.completed .stepper-label { color: var(--sacc-success, #2eb85c); }
.stepper-step.active .stepper-label { color: var(--sacc-primary, #16537e); }
.stepper-step.rejected .stepper-label { color: var(--sacc-danger, #e55353); }
.stepper-step.returned .stepper-label { color: var(--sacc-warning, #f9b115); }

/* ── Vertical Audit Timeline ── */
.dept-req-timeline { position: relative; padding: 10px 0; }
.dept-req-timeline::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: var(--sacc-border, #dee2e6); }
.dept-req-timeline .timeline-item { position: relative; padding-left: 50px; margin-bottom: 16px; animation: timeline-fade-in 0.4s ease backwards; }
.dept-req-timeline .timeline-item:nth-child(1) { animation-delay: 0.1s; }
.dept-req-timeline .timeline-item:nth-child(2) { animation-delay: 0.2s; }
.dept-req-timeline .timeline-item:nth-child(3) { animation-delay: 0.3s; }
.dept-req-timeline .timeline-item:nth-child(4) { animation-delay: 0.4s; }
.dept-req-timeline .timeline-item:nth-child(5) { animation-delay: 0.5s; }
@keyframes timeline-fade-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.dept-req-timeline .timeline-dot { position: absolute; left: 16px; top: 4px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sacc-card-bg, #fff); z-index: 1; }
.dept-req-timeline .timeline-content { background: var(--sacc-card-bg, #fff); border: 1px solid var(--sacc-border, #dee2e6); border-radius: var(--sacc-radius, 6px); padding: 8px 12px; }
.timeline-dot.created { background: #636f83; }
.timeline-dot.submitted { background: #16537e; }
.timeline-dot.approved { background: #2eb85c; }
.timeline-dot.rejected { background: #e55353; }
.timeline-dot.returned { background: #f9b115; }

/* ══════════════════════════════════════════════════════════════
   PURCHASE ORDER MODULE (po- prefix)
   ══════════════════════════════════════════════════════════════ */

.po-totals-card { position: sticky; top: 70px; }
.po-total-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.85rem; }
.po-total-row.po-grand-total { border-top: 2px solid var(--sacc-border-strong, #adb5bd); margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: 1rem; }
.po-receive-panel { border-left: 4px solid var(--sacc-success, #2eb85c); }
.po-add-item-row .form-control { font-size: 0.85rem; }
.po-qty-outstanding { color: var(--sacc-danger, #e55353); font-weight: 600; }
.po-qty-complete { color: var(--sacc-success, #2eb85c); font-weight: 600; }
.po-item-row { animation: timeline-fade-in 0.3s ease both; }
#poTable tbody tr { cursor: pointer; }
#poTable tbody tr:hover { background: var(--sacc-surface-hover, rgba(0,0,0,.03)); }

/* ══════════════════════════════════════════════════════════════
   HOTEL DASHBOARD (htl- prefix)
   ══════════════════════════════════════════════════════════════ */

.htl-dash-section { opacity: 0; transform: translateY(15px); }
.htl-occupancy-ring { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.8s ease; }
.htl-occupancy-ring-inner { width: 52px; height: 52px; border-radius: 50%; background: var(--sacc-card-bg, #fff); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; }
.htl-status-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--sacc-border, #dee2e6); margin-bottom: 6px; }
.htl-status-seg { transition: width 0.8s ease; }
.htl-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.75rem; }
.htl-legend-item { display: flex; align-items: center; gap: 4px; color: var(--sacc-text-secondary, #636f83); }
.htl-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.htl-room-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.htl-room-block { width: 44px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 600; color: #fff; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; animation: htl-block-pop 0.3s ease both; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.htl-room-block:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 1; }
@keyframes htl-block-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
.htl-room-pulse { animation: htl-pulse 0.6s ease; }
@keyframes htl-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); box-shadow: 0 0 12px rgba(0,0,0,0.3); } 100% { transform: scale(1); } }
.htl-guest-table { font-size: 0.8rem; }
.htl-guest-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sacc-text-muted); font-weight: 600; }
.htl-hk-stat { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.82rem; }
.htl-hk-stat .htl-hk-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #fff; }
.htl-hk-stat .htl-hk-count { font-size: 1.1rem; font-weight: 700; }
@media (max-width: 767.98px) { .htl-room-block { width: 36px; height: 26px; font-size: 0.6rem; } }

/* ── Empty State (shared component) ── */
.sacc-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.sacc-empty-state-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--sacc-surface-alt); color: var(--sacc-text-muted); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
.sacc-empty-state-title { font-size: 15px; font-weight: 600; color: var(--sacc-text); margin-bottom: 4px; }
.sacc-empty-state-subtitle { font-size: 13px; color: var(--sacc-text-muted); margin-bottom: 16px; max-width: 320px; }
.sacc-empty-state-action { margin-top: 4px; }

/* ==========================================================================
   SUMMARY CARD — reusable key-value row layout for sidebar summaries
   Used by: Guest Summary, Booking Summary, Patient Summary, etc.
   ========================================================================== */
.gs-summary-body { padding: 12px 16px; }
.gs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--sacc-gray-100);
}
.gs-row:last-of-type { border-bottom: none; }
.gs-label {
  color: var(--sacc-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.gs-label i {
  width: 16px;
  text-align: center;
  margin-right: 4px;
  font-size: 11px;
  color: var(--sacc-primary);
}
.gs-value {
  font-weight: 600;
  color: var(--sacc-text);
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-divider { border: none; border-top: 1px solid var(--sacc-border); margin: 8px 0; }

/* Summary progress bar */
.gs-progress { padding: 4px 0; }
.gs-progress-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.gs-progress-bar { height: 6px; background: var(--sacc-gray-200); border-radius: 3px; overflow: hidden; }
.gs-progress-fill { height: 100%; background: var(--sacc-primary); border-radius: 3px; transition: width 0.4s ease; }
.gs-progress-pct { font-size: 10px; color: var(--sacc-text-muted); margin-top: 3px; text-align: center; }

/* Dark mode */
[data-theme="dark"] .gs-row,
[data-coreui-theme="dark"] .gs-row { border-bottom-color: var(--sacc-border); }

/* ==========================================================================
   ACTION CARD BUTTON — rich interactive card-style action link
   Used by: Check In Guest, Start Visit, etc.
   ========================================================================== */
.sacc-action-card-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(var(--sacc-primary-rgb), 0.06), rgba(var(--sacc-primary-rgb), 0.02));
  border: 1px solid rgba(var(--sacc-primary-rgb), 0.15);
  border-radius: var(--sacc-radius-lg);
  text-decoration: none;
  color: var(--sacc-text);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.sacc-action-card-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--sacc-primary), rgba(var(--sacc-primary-rgb), 0.8));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sacc-action-card-btn:hover {
  border-color: var(--sacc-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--sacc-primary-rgb), 0.2);
  color: #fff;
  text-decoration: none;
}
.sacc-action-card-btn:hover::before { opacity: 1; }
.sacc-action-card-btn:hover * { position: relative; z-index: 1; }
.sacc-action-card-btn:active { transform: translateY(0); }
.sacc-action-card-btn .sacc-action-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--sacc-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.sacc-action-card-btn:hover .sacc-action-icon {
  transform: scale(1.1);
  background: #fff;
  color: var(--sacc-primary);
}
.sacc-action-card-btn .sacc-action-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sacc-action-card-btn .sacc-action-text strong { font-size: 14px; font-weight: 700; }
.sacc-action-card-btn .sacc-action-text small { font-size: 11px; opacity: 0.7; }
.sacc-action-card-btn .sacc-action-arrow {
  font-size: 14px;
  opacity: 0.4;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.sacc-action-card-btn:hover .sacc-action-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* ── SweetAlert2 z-index: must sit above sacc-select dropdowns (z-index 9200) ── */
/* Primary fix: html.swal2-shown hides all sacc-select elements (in sacc-select.css).
   This z-index override is a secondary defence in case the visibility rule is bypassed. */
.swal2-container { z-index: var(--sacc-z-dialog, 9500) !important; }

/* ==========================================================================
   SHARED: Workflow Stepper (.sacc-stepper)
   ========================================================================== */
.sacc-stepper {
  display: flex; align-items: center;
  background: var(--sacc-surface); border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius); padding: 6px 12px;
}
.sacc-stepper .step {
  display: flex; align-items: center; gap: 6px; flex: 1; position: relative; padding: 2px 0;
}
.sacc-stepper .step:not(:last-child)::after {
  content: ''; flex: 1; height: 2px; background: var(--sacc-border); margin: 0 8px; transition: background 0.4s;
}
.sacc-stepper .step.done:not(:last-child)::after { background: var(--sacc-success); }
.sacc-stepper .step-icon {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0; transition: all 0.3s;
}
.sacc-stepper .step.pending .step-icon { background: var(--sacc-gray-100); color: var(--sacc-text-muted); }
.sacc-stepper .step.active .step-icon {
  background: var(--sacc-primary); color: #fff; box-shadow: 0 0 0 3px rgba(var(--sacc-primary-rgb),0.2);
  animation: sacc-pulse 2s ease infinite;
}
.sacc-stepper .step.done .step-icon { background: var(--sacc-success); color: #fff; }
.sacc-stepper .step.cancelled .step-icon { background: var(--sacc-danger); color: #fff; }
.sacc-stepper .step-label { font-size: 11px; font-weight: 600; color: var(--sacc-text-muted); white-space: nowrap; }
.sacc-stepper .step.active .step-label { color: var(--sacc-primary); }
.sacc-stepper .step.done .step-label { color: var(--sacc-success); }
@keyframes sacc-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(var(--sacc-primary-rgb),0.2); } 50% { box-shadow: 0 0 0 6px rgba(var(--sacc-primary-rgb),0.08); } }

/* ==========================================================================
   SHARED: List-page Toolbar (.inv-toolbar) — KPI strip + action buttons in
   ONE row, per the list-page-layout standard. Used by every Index page.
   ========================================================================== */
.inv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
/* Shared IVF section sub-heading — was duplicated inline in every IVF partial.
   Centralised here so it's available regardless of partial render order. */
.ivf-section-sub {
  display: block; font-weight: 400; color: var(--sacc-text-muted);
  font-size: 11px; margin-top: 2px; text-transform: none; letter-spacing: 0;
}
.inv-kpi-strip {
  display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0;
}
.inv-kpi {
  display: flex; align-items: center; gap: 8px;
  background: var(--sacc-surface); border: 1px solid var(--sacc-border);
  border-radius: var(--sacc-radius); padding: 6px 12px;
  cursor: pointer; user-select: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.inv-kpi:hover {
  border-color: var(--sacc-primary);
  box-shadow: 0 1px 6px rgba(var(--sacc-primary-rgb, 14, 99, 156), 0.08);
}
.inv-kpi.active {
  border-color: var(--sacc-primary);
  background: rgba(var(--sacc-primary-rgb, 14, 99, 156), 0.06);
}
.inv-kpi i { font-size: 14px; }
.inv-kpi-val {
  font-size: 16px; font-weight: 700; line-height: 1; color: var(--sacc-text);
  font-variant-numeric: tabular-nums;
}
.inv-kpi-lbl {
  font-size: 10px; color: var(--sacc-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.inv-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
@media (max-width: 720px) {
  .inv-toolbar { flex-direction: column; align-items: stretch; }
  .inv-kpi { flex: 1 1 calc(50% - 4px); justify-content: center; }

  /* Stop the toolbar widening the PAGE.
     .inv-actions is flex-wrap:nowrap with flex:0 0 auto, so it refuses to shrink: on a
     390px phone it measured 607px. The toolbar is a column flex with align-items:stretch,
     so that 607px set the line's cross size and stretched the KPI strip to 607px as well
     — and with nothing clipping them, the document itself grew to 627px and the whole
     page slid sideways under the thumb.
     Measured on /Payments; the classes are shared by 61 list pages, so this is the one
     place to fix it. Only applies below 720px, so the desktop row is untouched. */
  .inv-toolbar > * { min-width: 0; max-width: 100%; }
  .inv-actions { flex-wrap: wrap; }
}

/* ==========================================================================
   SHARED: List-page primitives — search box, batch bar, status tabs, row action
   button. These were copy-pasted into the inline <style> of Invoices,
   Requisitions, SalesOrder and Customers; they are the same rules in each copy,
   so they belong here where a new list page can just use them. The existing
   inline copies are byte-identical and simply override themselves — they can be
   deleted per page as each is next touched.
   ========================================================================== */
.sacc-filter-search { position: relative; }
.sacc-filter-search > i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--sacc-text-muted); font-size: 12px; z-index: 1;
}
.sacc-filter-search input { padding-left: 30px !important; }

.inv-batch-bar {
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: 8px;
  padding: 8px 16px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.inv-batch-count {
  font-weight: 600; font-size: 13px;
  color: var(--sacc-primary);
  background: rgba(var(--sacc-primary-rgb, 14, 99, 156), 0.08);
  padding: 4px 12px; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}

.inv-status-tabs {
  display: flex; border: 1px solid var(--sacc-border); border-radius: 6px;
  overflow: hidden; height: 30px; flex-shrink: 0;
}
.inv-status-tab {
  padding: 0 14px; font-size: 12px; font-weight: 600; border: none;
  background: var(--sacc-surface); color: var(--sacc-text-muted);
  cursor: pointer; transition: all 120ms; white-space: nowrap;
}
.inv-status-tab:not(:last-child) { border-right: 1px solid var(--sacc-border); }
.inv-status-tab.active { background: var(--sacc-primary); color: #fff; }
.inv-status-tab:not(.active):hover { background: rgba(0, 0, 0, 0.04); color: var(--sacc-text); }

.inv-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--sacc-border);
  background: var(--sacc-surface); color: var(--sacc-text-muted);
  transition: all 0.15s; cursor: pointer; text-decoration: none;
}
.inv-action-btn:hover { border-color: var(--sacc-primary); color: var(--sacc-primary); background: var(--sacc-primary-bg); }
.inv-action-btn.danger:hover { border-color: var(--sacc-danger); color: var(--sacc-danger); background: rgba(239, 68, 68, 0.08); }
.inv-action-btn.success:hover { border-color: var(--sacc-success); color: var(--sacc-success); background: rgba(16, 185, 129, 0.08); }
.inv-action-btn[disabled],
.inv-action-btn.disabled { opacity: 0.4; pointer-events: none; }

/* Document-kind pill + waiting-time pill for any queue list (approvals, tasks).
   Colours come from tokens so both themes are covered by one definition. */
.sacc-kind-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--sacc-surface-alt); color: var(--sacc-text-muted);
  border: 1px solid var(--sacc-border); white-space: nowrap;
}
.sacc-kind-req   { background: rgba(59, 130, 246, 0.15); color: #2563eb; border-color: rgba(59, 130, 246, 0.35); }
.sacc-kind-inv   { background: rgba(20, 184, 166, 0.15); color: #0d9488; border-color: rgba(20, 184, 166, 0.35); }
.sacc-kind-draft { background: rgba(148, 163, 184, 0.18); color: #64748b; border-color: rgba(148, 163, 184, 0.4); }
.sacc-kind-loan  { background: rgba(245, 158, 11, 0.15); color: #d97706; border-color: rgba(245, 158, 11, 0.35); }
.sacc-kind-mvt   { background: rgba(139, 92, 246, 0.15); color: #7c3aed; border-color: rgba(139, 92, 246, 0.35); }

.sacc-age-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sacc-age-fresh { background: rgba(16, 185, 129, 0.14); color: #059669; }
.sacc-age-warm  { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.sacc-age-late  { background: rgba(239, 68, 68, 0.16);  color: #dc2626; }

/* Dark mode: the tints above are mixed for a light surface — the same mid-tone blue or
   amber over a dark panel is unreadable. Lift the foreground and drop the fill instead of
   hard-coding a single colour that only suits one theme. Both attribute spellings are
   covered because the toggle writes data-theme AND data-coreui-theme. */
[data-theme="dark"] .sacc-kind-badge,
[data-coreui-theme="dark"] .sacc-kind-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .sacc-kind-req,   [data-coreui-theme="dark"] .sacc-kind-req   { color: #93c5fd; background: rgba(59, 130, 246, 0.22);  border-color: rgba(147, 197, 253, 0.35); }
[data-theme="dark"] .sacc-kind-inv,   [data-coreui-theme="dark"] .sacc-kind-inv   { color: #5eead4; background: rgba(20, 184, 166, 0.22);  border-color: rgba(94, 234, 212, 0.35); }
[data-theme="dark"] .sacc-kind-draft, [data-coreui-theme="dark"] .sacc-kind-draft { color: #cbd5e1; background: rgba(148, 163, 184, 0.22); border-color: rgba(203, 213, 225, 0.35); }
[data-theme="dark"] .sacc-kind-loan,  [data-coreui-theme="dark"] .sacc-kind-loan  { color: #fcd34d; background: rgba(245, 158, 11, 0.22);  border-color: rgba(252, 211, 77, 0.35); }
[data-theme="dark"] .sacc-kind-mvt,   [data-coreui-theme="dark"] .sacc-kind-mvt   { color: #c4b5fd; background: rgba(139, 92, 246, 0.22);  border-color: rgba(196, 181, 253, 0.35); }

[data-theme="dark"] .sacc-age-fresh, [data-coreui-theme="dark"] .sacc-age-fresh { color: #6ee7b7; background: rgba(16, 185, 129, 0.22); }
[data-theme="dark"] .sacc-age-warm,  [data-coreui-theme="dark"] .sacc-age-warm  { color: #fcd34d; background: rgba(245, 158, 11, 0.24); }
[data-theme="dark"] .sacc-age-late,  [data-coreui-theme="dark"] .sacc-age-late  { color: #fca5a5; background: rgba(239, 68, 68, 0.24); }

/* A row the owning service will refuse today: still readable, visibly not actionable. */
tr.sacc-row-blocked > td { opacity: 0.62; }
tr.sacc-row-blocked > td:first-child { opacity: 1; }

/* ==========================================================================
   SHARED: Inline KPI Strip (.sacc-kpi-strip)
   ========================================================================== */
.sacc-kpi-strip {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.sacc-kpi-strip .kpi {
  display: flex; align-items: center; gap: 8px;
  background: var(--sacc-surface); border: 1px solid var(--sacc-border); border-radius: var(--sacc-radius);
  padding: 8px 12px; flex: 1; min-width: 120px;
}
.sacc-kpi-strip .kpi-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.sacc-kpi-strip .kpi-val { font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--sacc-text); font-variant-numeric: tabular-nums; }
.sacc-kpi-strip .kpi-label { font-size: 10px; color: var(--sacc-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* ==========================================================================
   SHARED: Page Header Bar (.sacc-page-header)
   ========================================================================== */
.sacc-page-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  background: var(--sacc-surface); border: 1px solid var(--sacc-border); border-left: 3px solid var(--sacc-primary);
  border-radius: var(--sacc-radius); padding: 8px 12px; margin-bottom: 10px;
}
.sacc-page-header h5, .sacc-page-header h6 { margin: 0; font-size: 14px; }
.sacc-page-header .meta { font-size: 12px; color: var(--sacc-text-muted); }
.sacc-page-header .meta .badge { font-size: 10px; vertical-align: middle; }

/* ==========================================================================
   SHARED: Item Intelligence overlay (used by DeptRequisition, Procurement Z)
   ========================================================================== */
.intel-badge { font-size: 0.65rem; margin-left: 4px; }
.intel-stock-value { cursor: help; }
.intel-warn { font-size: 0.7rem; }
.intel-trend-up { font-size: 0.65rem; color: var(--sacc-danger); }
.intel-trend-down { font-size: 0.65rem; color: var(--sacc-success); }
.intel-days-ago { font-size: 0.72rem; }
.intel-stat-number { font-size: 1.1rem; font-weight: 700; }
.intel-stat-number.intel-fast { color: var(--sacc-danger); }
.intel-stat-number.intel-regular { color: var(--sacc-warning); }
.intel-stat-number.intel-occasional { color: var(--sacc-text-muted); }
.intel-stat-label { font-size: 0.75rem; }
.intel-alert { font-size: 0.78rem; }
.intel-alert-list { font-size: 0.75rem; }

/* ==========================================================================
   SHARED: Membership status badge (rendered by sacc-membership.js)
   Auto-mounts on <div class="membership-status" data-client-id="..."></div>
   ========================================================================== */
.membership-status { margin: 4px 0; font-size: 0.82rem; }
.membership-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent;
}
.membership-badge i { font-size: 0.82rem; }
.membership-badge.ms-active {
  background: color-mix(in srgb, var(--sacc-success) 12%, transparent);
  color: var(--sacc-success);
  border-color: color-mix(in srgb, var(--sacc-success) 30%, transparent);
}
.membership-badge.ms-none {
  background: color-mix(in srgb, var(--sacc-text-muted) 10%, transparent);
  color: var(--sacc-text-muted);
  border-color: var(--sacc-border);
}
.ms-facilities {
  margin-top: 3px; font-size: 0.72rem; color: var(--sacc-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Z-Report toolbar — shared pattern for Shift Report, Procurement
   Z-Report, and any future report views that switch between
   multiple formats (Summary / Detail / A4 / Items / Transactions).
   ═══════════════════════════════════════════════════════════════ */
.z-report-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--sacc-border, #e0e0e0);
  background: var(--sacc-surface, #fff);
}
.z-report-title {
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  color: var(--sacc-text, #333);
}
.z-report-title i { color: var(--sacc-primary, #16537e); }
.z-report-actions {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* Format toggle pills (btn-group style, grouped edges) */
.z-format-toggle .btn {
  font-size: 12px; font-weight: 600; padding: 5px 14px;
  border-radius: 6px;
  border-color: var(--sacc-border, #d0d0d0);
  color: var(--sacc-text-muted, #888);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-format-toggle .btn:first-child { border-radius: 6px 0 0 6px; }
.z-format-toggle .btn:last-child { border-radius: 0 6px 6px 0; }
.z-format-toggle .btn i { margin-right: 4px; }
.z-format-toggle .btn:hover:not(.active) {
  background: var(--sacc-surface-alt, #f0f2f5);
  color: var(--sacc-text, #333);
}
.z-format-toggle .btn.active {
  background: var(--sacc-primary, #16537e); color: #fff;
  border-color: var(--sacc-primary, #16537e);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sacc-primary, #16537e) 30%, transparent);
}

/* Action icon button (print, close, etc.) */
.z-action-btn {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 14px;
  border: 1px solid var(--sacc-border, #d0d0d0);
  background: transparent;
  color: var(--sacc-text-muted, #888);
  transition: all 0.2s ease;
}
.z-action-btn:hover {
  background: var(--sacc-surface-alt, #f0f2f5);
  color: var(--sacc-text, #333);
  transform: scale(1.05);
}
.z-action-btn.z-action-close { border-color: transparent; color: var(--sacc-text-muted, #999); }
.z-action-btn.z-action-close:hover {
  color: var(--sacc-danger, #dc3545);
  background: color-mix(in srgb, var(--sacc-danger, #dc3545) 8%, transparent);
}
.z-action-divider {
  width: 1px; height: 20px;
  background: var(--sacc-border, #d0d0d0); margin: 0 2px;
}

/* =========================================================================
   Invoice Detail Modal
   ========================================================================= */
.inv-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 14px 20px;
  background: var(--sacc-surface-alt, #f7f8fa);
  border-bottom: 1px solid var(--sacc-border, #e5e7eb);
}
.inv-detail-amount {
  flex: 1 1 auto;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 18px;
  border-right: 1px solid var(--sacc-border, #e5e7eb);
}
.inv-detail-amount:last-child { border-right: none; }
.inv-detail-amount-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sacc-text-muted, #6b7280);
}
.inv-detail-amount-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sacc-text, #111827);
}

.inv-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 0;
}
.inv-detail-left {
  border-right: 1px solid var(--sacc-border, #e5e7eb);
  padding: 14px 16px;
  background: var(--sacc-surface, #fff);
}
.inv-detail-right {
  padding: 14px 16px;
  background: var(--sacc-surface, #fff);
}
@media (max-width: 767.98px) {
  .inv-detail-grid { grid-template-columns: 1fr; }
  .inv-detail-left { border-right: none; border-bottom: 1px solid var(--sacc-border, #e5e7eb); }
}

.inv-detail-section { margin-bottom: 18px; }
.inv-detail-section:last-child { margin-bottom: 0; }
.inv-detail-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sacc-text-muted, #6b7280);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sacc-border, #e5e7eb);
}

.inv-detail-fields { display: flex; flex-direction: column; gap: 4px; }
.inv-detail-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.inv-detail-field-label {
  font-weight: 500;
  color: var(--sacc-text-muted, #6b7280);
  flex-shrink: 0;
}
.inv-detail-field-value {
  font-weight: 500;
  color: var(--sacc-text, #111827);
  text-align: right;
  word-break: break-word;
}

.inv-detail-party { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.inv-detail-party-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sacc-primary, #3b82f6) 12%, transparent);
  color: var(--sacc-primary, #3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.inv-detail-party-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sacc-text, #111827);
  line-height: 1.2;
}
.inv-detail-party-account {
  font-size: 0.75rem;
  color: var(--sacc-text-muted, #6b7280);
  line-height: 1.2;
}
.inv-detail-party-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--sacc-text-muted, #6b7280);
}
.inv-detail-party-meta span { display: inline-flex; align-items: center; gap: 4px; }
.inv-detail-party-meta i { opacity: 0.7; }

/* ─── Sponsored stay: chip + Billed-To card ───────────────────────────────
   Violet, matching --sacc-pay-room (the folio-charge pill), so "someone else
   settles this" reads as one colour across the invoice and the folio.
   Tokens only — the card must not hard-code a background, or it goes blind in
   the opposite theme. */
.inv-sponsor-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--sacc-pay-room, #7c3aed) 16%, transparent);
  color: var(--sacc-pay-room, #7c3aed);
}
.inv-sponsor-chip i { margin-right: 3px; }

.inv-sponsor-card {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--sacc-pay-room, #7c3aed);
  border-radius: 4px;
  background: color-mix(in srgb, var(--sacc-pay-room, #7c3aed) 7%, transparent);
}
.inv-sponsor-card-head {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sacc-pay-room, #7c3aed);
  margin-bottom: 2px;
}
.inv-sponsor-card-head i { margin-right: 4px; }
.inv-sponsor-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sacc-text, #111827);
  line-height: 1.25;
}
.inv-sponsor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--sacc-text-secondary, #4b5563);
}
.inv-sponsor-bit { display: inline-flex; align-items: center; gap: 4px; }
.inv-sponsor-bit i { opacity: 0.65; }
.inv-sponsor-bit-label { color: var(--sacc-text-muted, #6b7280); }
/* An expired card is a claim that will bounce — say so in the danger colour. */
.inv-sponsor-bit-stale { color: var(--sacc-danger, #dc2626); font-weight: 600; }
.inv-sponsor-bit-stale i, .inv-sponsor-bit-stale .inv-sponsor-bit-label { color: inherit; opacity: 1; }
.inv-sponsor-bit-muted { color: var(--sacc-text-muted, #6b7280); font-style: italic; }

/* Type badges */
.inv-type-badge { font-size: 0.7rem; font-weight: 600; padding: 3px 8px; }
.inv-type-invoice { background: color-mix(in srgb, var(--sacc-primary, #3b82f6) 18%, transparent); color: var(--sacc-primary, #3b82f6); }
.inv-type-cash-sale { background: color-mix(in srgb, var(--sacc-success, #16a34a) 18%, transparent); color: var(--sacc-success, #16a34a); }
.inv-type-default { background: var(--sacc-surface-alt, #eef0f4); color: var(--sacc-text-muted, #6b7280); }

/* Free-goods mark on printed/rendered invoice documents that use the app layout
   (Invoice_Sales, Invoice_memo, Invoice_memoold). Invoice_print and Invoice_pos
   define this locally instead — the POS receipt is printed through QZ Tray, which
   has no base URL, so its styles must travel inside the document. */
.nc-mark { font-size: .85em; font-weight: 600; white-space: nowrap; opacity: .75; }

/* ═══ NOTE BLOCKS — the house pattern for callouts ═══════════════════════════
   Use .sacc-note for every advisory, warning and status block. It exists to end
   the fat-coloured-bar-plus-tint-plus-pill idiom that had spread to ~160 places:
   that shape is the stock Bootstrap/Tailwind alert, and because it was applied
   uniformly a passing hint and a financial warning looked identical apart from
   hue. Uniform decoration is what makes an interface look generated rather than
   designed.

   Two rules, and they are the whole system:

   1. NO FILL. Colour lives in the rule, not in a slab behind the text. A tint is
      reserved for --interrupt, the one case where a block must stop the reader
      (a destructive confirmation). If everything is tinted, tint means nothing.

   2. THE RULE IS FLUSH AND SQUARE. border-radius is 0 on the left so the stroke
      reads as a print margin rule against the text column, and the block aligns
      to the same left edge as the content around it instead of floating on it.
      Only the outer corners soften, at 3px — not the 8-12px pill that made these
      look like floating cards.

   Emphasis comes from the rule, type weight and spacing. That survives greyscale
   and print, which matters in a system whose statements get printed.  */
.sacc-note {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: .75rem 0;
    padding: .6rem .85rem;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--sacc-border);
    border-radius: 0 3px 3px 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--sacc-text);
}
/* The icon carries the semantic colour; the prose stays ink, so the block reads
   as text with a marker rather than as a coloured object. */
.sacc-note > i:first-child { flex: none; padding-top: .12rem; color: var(--sacc-text-muted); }
.sacc-note__body  { flex: 1 1 auto; min-width: 0; }
.sacc-note__head  { font-weight: 700; }
.sacc-note__meta  { color: var(--sacc-text-muted); overflow-wrap: anywhere; }
.sacc-note__action { flex: none; align-self: center; white-space: nowrap; }

.sacc-note--info    { border-left-color: var(--sacc-primary, #16537e); }
.sacc-note--info    > i:first-child { color: var(--sacc-primary, #16537e); }
.sacc-note--ok      { border-left-color: var(--sacc-success, #2e7d32); }
.sacc-note--ok      > i:first-child { color: var(--sacc-success, #2e7d32); }
.sacc-note--warn    { border-left-color: var(--sacc-warn, #f57c00); }
.sacc-note--warn    > i:first-child { color: var(--sacc-warn, #f57c00); }
.sacc-note--danger  { border-left-color: var(--sacc-danger, #e53e3e); }
.sacc-note--danger  > i:first-child { color: var(--sacc-danger, #e53e3e); }

/* The ONE exception. A block that must interrupt — you are about to destroy
   something — earns a fill, precisely because nothing else has one. */
.sacc-note--interrupt {
    background: color-mix(in srgb, var(--sacc-danger, #e53e3e) 8%, transparent);
    border-left-width: 3px;
}

/* For notes that live inside tight chrome — a dropdown menu, a toolbar, a table
   cell — where the standard block's margins would break the container's rhythm.
   Same rule, same colours, less air: a variant of the shared component rather
   than a second callout idiom invented per page. */
.sacc-note--compact {
    margin: 0;
    padding: .4rem .75rem;
    gap: .45rem;
    font-size: .78rem;
    line-height: 1.4;
    white-space: normal;
}

@media (max-width: 640px) {
    .sacc-note { flex-wrap: wrap; }
    .sacc-note__action { width: 100%; margin-top: .5rem; }
}

@media print {
    /* Same ink discipline as the statements: strokes, never fills. */
    .sacc-note, .sacc-note--interrupt {
        background: transparent !important;
        color: #000 !important;
        border-left: 1.5pt solid #000 !important;
    }
    .sacc-note > i:first-child { color: #000 !important; }
}

/* ─── Free goods: the "not charged" chip ────────────────────────────────────
   Issued but not charged is NOT a discount, so it must not wear the discount
   styling — an operator scanning the line has to be able to tell "we gave 2
   away" from "we knocked money off". It rides the quantity cell rather than
   taking a column, because a column would be empty on almost every line and
   cost every invoice horizontal room to serve a handful. */
.item-nc {
    display: inline-block;
    margin-left: .25rem;
    padding: 0 .3rem;
    border-radius: .25rem;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    color: var(--sacc-info, #0288d1);
    background: color-mix(in srgb, var(--sacc-info, #0288d1) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--sacc-info, #0288d1) 30%, transparent);
}
/* The zero state. Present on every line so the affordance is discoverable, but
   invisible until the row is hovered — otherwise every invoice grows a column
   of "+N/C" noise for a feature most lines never use. */
.item-nc--add {
    opacity: 0;
    color: var(--sacc-text-muted);
    background: transparent;
    border-color: transparent;
    border-style: dashed;
    font-weight: 600;
    transition: opacity .12s ease-in;
}
tr:hover .item-nc--add,
.item-nc--add:focus-visible { opacity: .65; border-color: var(--sacc-border); }
tr:hover .item-nc--add:hover { opacity: 1; color: var(--sacc-info, #0288d1); }
/* Keyboard users never hover — the affordance must not be mouse-only. */
.item-nc:focus-visible { outline: 2px solid var(--sacc-info, #0288d1); outline-offset: 1px; }

/* ─── Cancelled-invoice panel + replacement chain ───────────────────────────
   A cancelled invoice used to look exactly like an unpaid one: same amber badge,
   no reason, no pointer to whatever replaced it. Printed or screenshotted it was
   indistinguishable from a live bill, which is how a dead document gets presented
   to a customer as a real one. The stamp makes that impossible; the chain links
   stop either document being read in isolation. */
/* Appearance comes from .sacc-note; this adds only the watermark's positioning
   context, which is specific to this one block. */
.inv-cxl { position: relative; overflow: hidden; }
.inv-cxl__stamp {
    position: absolute;
    top: 50%; right: 1rem;
    transform: translateY(-50%) rotate(-14deg);
    font-size: clamp(1.5rem, 6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--sacc-danger, #e53e3e);
    opacity: .12;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
/* The head/reason/note rules that used to live here are gone — that content now
   renders as .sacc-note__head / .sacc-note__meta, so it inherits the shared
   pattern instead of restating it. */
.inv-chain { font-size: .8rem; }
.inv-chain i { margin-right: .35rem; opacity: .7; }
.inv-chain__link { font-weight: 700; }

/* ─── Payment method pill — shared helper rendered by sacc.payPill() ─── */
:root {
    --sacc-pay-cash:   #16a34a;  /* green */
    --sacc-pay-card:   #3b82f6;  /* blue */
    --sacc-pay-mobile: #f59e0b;  /* amber */
    --sacc-pay-bank:   #14b8a6;  /* teal */
    --sacc-pay-credit: #f97316;  /* orange */
    --sacc-pay-room:   #7c3aed;  /* violet — hotel folio charge */
    --sacc-pay-other:  #94a3b8;  /* slate */
}
.sacc-pay-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    max-width: 220px;
}
.sacc-pay-pill + .sacc-pay-pill { margin-left: 4px; }
.sacc-pay-pill > i  { font-size: 9px; flex-shrink: 0; }
.sacc-pay-pill-label {
    overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
}
.sacc-pay-pill-cash   { background: color-mix(in srgb, var(--sacc-pay-cash)   18%, transparent); color: var(--sacc-pay-cash); }
.sacc-pay-pill-card   { background: color-mix(in srgb, var(--sacc-pay-card)   18%, transparent); color: var(--sacc-pay-card); }
.sacc-pay-pill-mobile { background: color-mix(in srgb, var(--sacc-pay-mobile) 18%, transparent); color: var(--sacc-pay-mobile); }
.sacc-pay-pill-bank   { background: color-mix(in srgb, var(--sacc-pay-bank)   18%, transparent); color: var(--sacc-pay-bank); }
.sacc-pay-pill-credit { background: color-mix(in srgb, var(--sacc-pay-credit) 18%, transparent); color: var(--sacc-pay-credit); }
.sacc-pay-pill-room   { background: color-mix(in srgb, var(--sacc-pay-room)   18%, transparent); color: var(--sacc-pay-room); }
.sacc-pay-pill-other  { background: color-mix(in srgb, var(--sacc-pay-other)  20%, transparent); color: var(--sacc-pay-other); }

/* ─────────────────────────────────────────────────────────────────────────────────
   GLOBAL TABLE PRIMITIVES — apply anywhere, no opt-in required.
   Safe to load globally because .num / .col-today / .col-folio / .col-group-start
   are not used outside table cells in this codebase (audited Apr 2026).
   ───────────────────────────────────────────────────────────────────────────────── */

/* .num — numeric table cell. Right-aligned, tabular figures (digits all the same width
   so columns line up across rows), minimum width so adjacent number columns can't crush
   into each other and read as one value (the "Nights 2 + Rate 200,000 → 2 200,000" bug). */
td.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    min-width: 84px;
    white-space: nowrap;
}

/* Column-group tints — drop on any TH/TD (matched pairs across header + body + tfoot)
   to visually cluster a group of columns. Two reusable buckets:
     .col-today → soft primary tint   (period activity / "today" data)
     .col-folio → soft warning tint   (cumulative folio / receivable data)
   .col-group-start adds a 2px primary border on the first cell of the group, drawing
   the eye to the cluster boundary. */
.col-today { background: color-mix(in srgb, var(--sacc-primary) 4%, transparent); }
.col-folio { background: color-mix(in srgb, var(--sacc-warning) 5%, transparent); }
.col-comp  { background: color-mix(in srgb, var(--sacc-success) 6%, transparent); }
tbody tr:nth-child(even) .col-today { background: color-mix(in srgb, var(--sacc-primary) 7%, transparent); }
tbody tr:nth-child(even) .col-folio { background: color-mix(in srgb, var(--sacc-warning) 8%, transparent); }
tbody tr:nth-child(even) .col-comp  { background: color-mix(in srgb, var(--sacc-success) 9%, transparent); }
tbody tr:hover .col-today { background: color-mix(in srgb, var(--sacc-primary) 12%, transparent); }
tbody tr:hover .col-folio { background: color-mix(in srgb, var(--sacc-warning) 12%, transparent); }
tbody tr:hover .col-comp  { background: color-mix(in srgb, var(--sacc-success) 14%, transparent); }
th.col-group-start, td.col-group-start { border-left: 2px solid var(--sacc-primary); }
/* Comp group gets its own border colour so the eye picks the cluster boundary
   even when the column is in the middle of a wide table. */
th.col-comp.col-group-start, td.col-comp.col-group-start { border-left: 2px solid var(--sacc-success); }

/* Compact comp pill — used in the breakdown row to list per-facility usage
   ("Breakfast ×2", "Gym ×1") inside the Comps Used cell. */
.comp-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    margin: 1px 2px 1px 0;
    background: color-mix(in srgb, var(--sacc-success) 14%, transparent);
    color: var(--sacc-success);
    border: 1px solid color-mix(in srgb, var(--sacc-success) 30%, transparent);
    border-radius: 50rem;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.comp-pill__count { font-weight: 700; opacity: 0.85; }

/* ─────────────────────────────────────────────────────────────────────────────────
   .rpt-table  / .table-readable — opt-in shared grid style.
   Both class names trigger the full treatment (clear vertical dividers, sticky header,
   zebra rows, row hover, tabular numerics in tfoot). Use either name; .rpt-table is
   the historical name from Hotel/Clinic reports, .table-readable is the new generic
   alias for any data-grid that wants the readability defaults.
   ───────────────────────────────────────────────────────────────────────────────── */
.rpt-table, .table-readable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--sacc-surface, #fff);
}
.rpt-table thead th, .table-readable thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sacc-surface-alt);
    color: var(--sacc-text);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 2px solid var(--sacc-border);
    border-right: 1px solid var(--sacc-border-light, var(--sacc-border));
    text-align: left;
    white-space: nowrap;
}
.rpt-table thead th:last-child, .table-readable thead th:last-child { border-right: none; }
.rpt-table tbody td, .table-readable tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--sacc-border-light, #f1f3f5);
    border-right: 1px solid var(--sacc-border-light, #f1f3f5);
    vertical-align: middle;
}
.rpt-table tbody td:last-child, .table-readable tbody td:last-child { border-right: none; }
.rpt-table tbody tr:nth-child(even), .table-readable tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--sacc-surface-alt) 50%, transparent);
}
.rpt-table tbody tr:hover, .table-readable tbody tr:hover {
    background: var(--sacc-primary-bg, #e8f0fe);
}
.rpt-table tfoot td, .table-readable tfoot td {
    padding: 9px 10px;
    background: var(--sacc-surface-alt);
    font-weight: 700;
    border-top: 2px solid var(--sacc-border);
    border-right: 1px solid var(--sacc-border-light, var(--sacc-border));
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.rpt-table tfoot td:first-child, .table-readable tfoot td:first-child { text-align: left; }
.rpt-table tfoot td:last-child, .table-readable tfoot td:last-child { border-right: none; }

.rpt-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sacc-primary); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--sacc-border-light, var(--sacc-border)); }
.rpt-title i { color: var(--sacc-primary); }

/* ── Bill-To panel (screen) — paying-party block on Guest Folio + future surfaces.
   Mirrors the print version (.billto in sacc-report.css) but uses screen tokens so
   light/dark themes and existing UI palette govern the rendering. Same class names
   as the print version so future code can share renderers safely.            */
.billto {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--sacc-primary) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--sacc-primary) 20%, transparent);
    border-left: 4px solid var(--sacc-primary);
    border-radius: 6px;
}
.billto__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; margin-bottom: 4px;
}
.billto__label {
    font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--sacc-primary);
}
.billto__name {
    font-size: 15px; font-weight: 700; color: var(--sacc-text);
    line-height: 1.2; margin-bottom: 4px;
}
.billto__meta { font-size: 12px; color: var(--sacc-text-muted); line-height: 1.5; }
.billto__meta span + span { margin-left: 14px; }
.billto__meta b { color: var(--sacc-text); font-weight: 600; }
.billto__addr { font-size: 12px; color: var(--sacc-text-muted); margin-top: 3px; }

/* Cardholder line — sits directly under the paying party, because on a sponsored
   bill the reader's next question is "whose card, and how does the patient relate
   to them". Card NUMBER is never rendered here; it is confidential on documents the
   patient carries away and belongs only on the insurer's claim schedule. */
.billto__card {
    font-size: 12px; color: var(--sacc-text-muted);
    line-height: 1.5; margin-bottom: 2px;
}
.billto__card b { color: var(--sacc-text); font-weight: 600; }
.billto__rel {
    margin-left: 10px; padding: 0 6px; border-radius: 99px;
    background: var(--sacc-surface-hover, rgba(0,0,0,.05));
    font-size: 11px;
}

/* Not-charged quantities on the on-screen patient statement. Deliberately quiet:
   the fact belongs next to the line it qualifies, not as a coloured alert — nothing
   has gone wrong, part of the line simply is not billed. */
.ps-free {
    font-size: .72rem;
    font-style: italic;
    color: var(--sacc-text-muted);
    margin-top: .1rem;
}
.ps-free__of { color: var(--sacc-text-muted); font-weight: 400; }
.ps-free__foot td {
    font-size: .72rem;
    font-style: italic;
    color: var(--sacc-text-muted);
    border-top: 1px solid var(--sacc-border);
}

/* Paying-party block on the on-screen patient statement and guest folio. Same
   shape as the invoice's .billto panel; separate class because those two surfaces
   are app chrome (theme-aware tokens) rather than printed-document CSS. */
.ps-billto {
    border: 1px solid var(--sacc-border); border-left: 3px solid var(--sacc-primary);
    border-radius: 6px; padding: 8px 12px; margin-bottom: 12px;
    background: var(--sacc-surface-hover, rgba(0,0,0,.02));
}
.ps-billto__label {
    font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--sacc-primary); margin-bottom: 2px;
}
.ps-billto__name { font-size: 14px; font-weight: 700; color: var(--sacc-text); }
.ps-billto__pill {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px;
    background: var(--sacc-primary); color: #fff; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; vertical-align: 2px;
}
.ps-billto__meta { font-size: 12px; color: var(--sacc-text-muted); margin-top: 2px; }
.ps-billto__meta b { color: var(--sacc-text); font-weight: 600; }
.ps-billto__rel {
    margin-left: 8px; padding: 0 6px; border-radius: 99px;
    background: var(--sacc-surface-hover, rgba(0,0,0,.06));
    font-size: 11px;
}

.billto-pill {
    display: inline-block;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 50rem;
    color: #fff; background: var(--sacc-text-muted);
    white-space: nowrap;
}
.billto-pill--company    { background: var(--sacc-primary); }
.billto-pill--ota        { background: #6a1b9a; }
.billto-pill--ta         { background: var(--sacc-success); }
.billto-pill--group      { background: var(--sacc-warning); }
.billto-pill--insurance  { background: #6a1b9a; }
.billto-pill--nhif       { background: var(--sacc-danger); }
.billto-pill--scheme     { background: var(--sacc-info, #1976d2); }
.billto-pill--capitation { background: var(--sacc-success); }
.billto-pill--other      { background: var(--sacc-text-muted); }

/* ─────────────────────────────────────────────────────────────────────
   SweetAlert2 — bind to the project palette
   SweetAlert ships with a purple default (#7066e0) which doesn't appear
   anywhere in this design. Map the styled buttons onto our tokens once
   here so every Swal.fire / sacc.confirm picks them up automatically;
   per-call confirmButtonColor / cancelButtonColor overrides still win
   when a dialog deliberately wants red (destructive) or amber (warning).
   ───────────────────────────────────────────────────────────────────── */
.swal2-styled.swal2-confirm {
    background-color: var(--sacc-primary) !important;
    color: #fff !important;
}
.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm:focus {
    background-color: var(--sacc-primary-hover) !important;
    box-shadow: 0 0 0 3px rgba(var(--sacc-primary-rgb), 0.25) !important;
}
.swal2-styled.swal2-cancel {
    background-color: var(--sacc-surface-alt, #f1f5f9) !important;
    color: var(--sacc-text, #1f2937) !important;
    border: 1px solid var(--sacc-border, #e2e8f0) !important;
}
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-cancel:focus {
    background-color: var(--sacc-border, #e2e8f0) !important;
    box-shadow: none !important;
}
.swal2-styled.swal2-deny {
    background-color: var(--sacc-danger, #c62828) !important;
    color: #fff !important;
}

/* Confirm button in destructive mode — opt-in via
   { customClass: { confirmButton: 'swal2-confirm-danger' } }. Use this for
   void / delete / discard prompts so the action button reads as risky. */
.swal2-styled.swal2-confirm.swal2-confirm-danger {
    background-color: var(--sacc-danger, #c62828) !important;
}
.swal2-styled.swal2-confirm.swal2-confirm-danger:hover,
.swal2-styled.swal2-confirm.swal2-confirm-danger:focus {
    background-color: #a41f1f !important;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25) !important;
}

/* ─── Compact HelpInfo pill ──────────────────────────────────────────────────
   Replaces the legacy `.callout.callout-info.helpinfo` full-width red banner
   that ate ~150px on every page (Layout.cshtml).  Collapsed to a single
   truncated line; click toggles full expansion, hover shows the full text
   via the `title` attribute. The expand affordance hints there's more.       */
.sacc-help-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin: 0 0 8px;
    border-radius: 6px;
    background: var(--sacc-info-bg, #eef5ff);
    border-left: 3px solid var(--sacc-info, #2196f3);
    color: var(--sacc-text, #333);
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}
.sacc-help-pill:hover { background: var(--sacc-info-bg-strong, #e2efff); }
.sacc-help-pill > i.fa-info-circle {
    color: var(--sacc-info, #2196f3);
    flex: 0 0 auto;
    font-size: 13px;
}
.sacc-help-pill > span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sacc-help-pill > i.sacc-help-pill-caret {
    flex: 0 0 auto;
    font-size: 10px;
    opacity: 0.55;
    transition: transform 0.15s ease;
}
.sacc-help-pill.sacc-help-pill-open > span { white-space: normal; }
.sacc-help-pill.sacc-help-pill-open > i.sacc-help-pill-caret { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   .sacc-infotip — the SECTION-level member of the same family as .sacc-help-pill.

   The pill explains a page and costs a row. This explains one feature and costs
   an icon: the detail is in the markup but renders only when asked for, so a
   card can carry a full paragraph of rules without becoming a wall of text.

   Colours come from the same info tokens as the pill, and every one is defined
   here on :root-level fallbacks first - a token whose ONLY definition sits in a
   dark-mode block resolves to `initial` (transparent) where the block does not
   apply, which is how a panel ends up unreadable rather than merely mis-themed.
   --------------------------------------------------------------------------- */
.sacc-infotip { display: inline-flex; align-items: center; vertical-align: middle; }
.sacc-infotip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sacc-info, #2196f3);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: background 0.12s ease, opacity 0.12s ease;
}
.sacc-infotip-btn:hover,
.sacc-infotip-btn[aria-expanded="true"] {
    background: var(--sacc-info-bg, #eef5ff);
    opacity: 1;
}
.sacc-infotip-btn:focus-visible {
    outline: 2px solid var(--sacc-info, #2196f3);
    outline-offset: 1px;
}

/* Fixed, because these icons sit inside cards with overflow and inside table
   cells - either would clip an absolutely positioned child. */
.sacc-infotip-panel {
    position: fixed;
    z-index: 2000;
    max-width: 340px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--sacc-border, #e3e8ee);
    border-left: 3px solid var(--sacc-info, #2196f3);
    background: var(--sacc-card-bg, #fff);
    color: var(--sacc-text, #333);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    font-size: 12px;
    line-height: 1.5;
}
.sacc-infotip-panel[hidden] { display: none !important; }
.sacc-infotip-title {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--sacc-text, #333);
}
.sacc-infotip-text p        { margin: 0 0 6px; }
.sacc-infotip-text p:last-child { margin-bottom: 0; }
.sacc-infotip-text ul       { margin: 4px 0 6px; padding-left: 18px; }
.sacc-infotip-text strong   { font-weight: 600; }

/* The panel is a floating surface: it must not inherit the page ground, or it
   reads as transparent over whatever it covers. */
:root[data-theme="dark"] .sacc-infotip-panel,
[data-coreui-theme="dark"] .sacc-infotip-panel {
    background: var(--sacc-card-bg, #2a2b36);
    border-color: var(--sacc-border, #3a3b47);
    color: var(--sacc-text, #e6e6e6);
}
:root[data-theme="dark"] .sacc-infotip-title,
[data-coreui-theme="dark"] .sacc-infotip-title { color: var(--sacc-text, #e6e6e6); }

/* Printing a document must not print the help. */
@media print {
    .sacc-infotip, .sacc-infotip-panel { display: none !important; }
}

/* ============================================================================
   v13.6 — Favorites strip + pin buttons (shared by tenant + SaaS sidebars)
   ============================================================================
   The favourites strip is rendered client-side from localStorage; pin buttons
   sit inside every leaf nav-link and fade in on hover (gold-filled when
   pinned). These rules are intentionally generic so the same DOM works in:
     - tenant /Views/Shared/_LeftNav.cshtml (dense, many groups)
     - SaaS  /Views/Shared/_LayoutSaasAdmin.cshtml (flat, ~10 items)
   The SaaS slash-filter overlay (.sacc-nav-filter) is *not* here — it's
   inline in the SaaS layout because it only renders on /admin pages.
   ============================================================================ */
.sacc-nav-favs[hidden] { display: none; }
.sacc-nav-favs {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
}
.sacc-nav-title-fav {
    font-size: 10px !important;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.55) !important;
}
.sacc-nav-fav-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    padding: 4px 16px 8px 16px;
    line-height: 1.3;
}
.sacc-nav-fav-hint i { color: #f59f00; margin-right: 4px; }

/* Pin star — invisible at rest, fades in on .nav-item hover.
   When pinned, the icon swaps to a filled gold star and stays
   visible. Anchored at the right of the nav-link via margin-left:auto. */
.sacc-nav-pin {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
    cursor: pointer;
}
.sidebar .nav-item:hover > .nav-link > .sacc-nav-pin { opacity: 1; }
.sacc-nav-pin:hover { color: #f59f00; }
.sacc-nav-pin.is-pinned { opacity: 1; color: #f59f00; }
.sacc-nav-pin.is-pinned i.far { display: none; }
.sacc-nav-pin i.fas { display: none; }
.sacc-nav-pin.is-pinned i.fas { display: inline; }

/* No-match empty state for the search/filter (re-used by SaaS too). */
.sacc-nav-empty {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    padding: 12px 16px;
    font-style: italic;
}

/* Narrow sidebar: favorites title + hint hide; pin stars hide. Favorites
   nav-links collapse to icon-only via existing CoreUI rules. */
.sidebar.sidebar-narrow-unfoldable:not(:hover) .sacc-nav-title-fav,
.sidebar.sidebar-narrow-unfoldable:not(:hover) .sacc-nav-fav-hint,
.sidebar.sidebar-narrow-unfoldable:not(:hover) .sacc-nav-pin {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   RBAC PERMISSION MATRIX — section verticals (accent + progress)
   Each .perm-section carries --sec-accent / --sec-tint set inline
   (one hue per vertical). Purely presentational.
   ══════════════════════════════════════════════════════════════ */
.perm-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.perm-section {
    margin-bottom: 16px;
    border-left: 3px solid var(--sec-accent, var(--sacc-border, rgba(0,0,0,0.1)));
    border-radius: 8px;
}
.perm-section-header {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 9px 14px; border-radius: 8px; margin-bottom: 6px;
    background: var(--sec-tint, rgba(0,0,0,0.04));
    border: 1px solid var(--sacc-border, rgba(0,0,0,0.08));
    transition: background .15s ease, box-shadow .15s ease;
}
.perm-section-header:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.perm-sec-icon { color: var(--sec-accent); }
.perm-sec-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; }
.perm-caret { transition: transform .2s ease; opacity: .5; font-size: .7rem; margin-left: 2px; }
.perm-section-header.collapsed .perm-caret,
.sacc-form-section-header.collapsed .perm-caret { transform: rotate(-90deg); }
.sec-progress {
    height: 4px; background: rgba(128,128,128,0.18); border-radius: 2px;
    overflow: hidden; margin: 0 14px 10px;
}
.sec-progress-fill {
    height: 100%; width: 0; background: var(--sec-accent); border-radius: 2px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.sec-progress-fill.full { background: var(--sacc-success, #1aa251); }
.perm-section-body { padding-left: 8px; }
.perm-mod-card { transition: transform .15s ease, box-shadow .15s ease; }
.perm-mod-card:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.perm-item { padding: 5px 4px; cursor: pointer; border-radius: 4px; transition: background .15s; }
.perm-item:hover { background: var(--sacc-surface-hover, rgba(0,0,0,0.03)); }

/* --- Clinic patient-flow elapsed-time badges ---------------------------------
   Shared by the queue board (Creviews/Index) and the service-point worklists
   (Pharmacy / Procedure / Pending Accounts). Traffic-light dwell-time language:
   green = within target, amber = approaching, red = breached. Colour is never
   the only signal — each state pairs with a clock / warning glyph. */
.time-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:10px;
              font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.time-badge i { font-size:9px; }
.time-ok   { background:#d1fae5; color:#065f46; }   /* within target */
.time-warn { background:#fef9c3; color:#854d0e; }   /* approaching   */
.time-over { background:#fee2e2; color:#991b1b; }   /* breached      */
.time-none { color:var(--sacc-text-muted); }
.stage-cell { display:inline-flex; flex-direction:column; gap:2px; line-height:1.1; }
.stage-cell .stage-name { font-size:11px; color:var(--sacc-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
@keyframes time-pulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.time-over { animation:time-pulse 1.6s ease-in-out infinite; }

/* ── Proactive routing nudge ──────────────────────────────────────────────
   A breached dwell badge used to be a purely passive red blink — staff had to
   notice it themselves. This surfaces an actual call-to-action: a banner with
   a "Route Now" button on the single-patient Task Routing card, an inline
   quick-action on queue-board rows, and a glow on worklist one-click buttons —
   everywhere a stage/point time-badge exists. Respects prefers-reduced-motion. */
@keyframes routing-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); }
  50%      { box-shadow: 0 0 0 7px rgba(220,38,38,0); }
}
.needs-routing-glow { animation: routing-glow 1.8s ease-in-out infinite; position:relative; }
@media (prefers-reduced-motion: reduce) {
  .needs-routing-glow, .time-over { animation: none; }
}

.route-nudge {
  display:flex; align-items:center; gap:8px; margin-top:8px; padding:7px 10px;
  background:rgba(220,38,38,0.07); border:1px solid rgba(220,38,38,0.25); border-radius:8px;
  font-size:12px; color:#991b1b; animation: route-nudge-in .25s ease-out;
}
.route-nudge i.fa-triangle-exclamation { color:#dc2626; flex-shrink:0; }
.route-nudge .route-nudge-text { flex:1; line-height:1.3; }
.route-nudge button { white-space:nowrap; }
/* Solid orange (not Bootstrap's danger red) so the call-to-action stands out from the
   red "overdue" framing around it rather than blending into it. */
.route-nudge .route-nudge-go { background:#f97316; border-color:#c2410c; color:#fff; }
.route-nudge .route-nudge-go:hover { background:#ea580c; border-color:#c2410c; color:#fff; }
.route-nudge .route-nudge-dismiss {
  background:none; border:none; color:#991b1b; opacity:.6; cursor:pointer; padding:2px 4px; font-size:12px;
}
.route-nudge .route-nudge-dismiss:hover { opacity:1; }
@keyframes route-nudge-in { from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }

/* Queue-board inline quick-route affordance — one click opens a small routing
   menu directly from the list, no need to open the full record. Solid orange
   (not red/green) so it reads as "action available" without colliding with the
   time-badge palette right next to it (green=ok, amber=warn, red=breached). */
.route-quick-btn {
  display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:3px 9px;
  border-radius:10px; border:1px solid #c2410c; background:#f97316; color:#fff;
  font-size:10px; font-weight:700; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
  /* .stage-cell is a column flexbox; its default align-items:stretch was forcing this
     pill to match the width of whichever sibling is widest in that row (the service-point
     label — "LAB + ACCOUNTS" vs "LAB" vs "DOCTOR" all differ), so the pill's size varied
     row-to-row instead of hugging its own text. align-self here opts this one item out. */
  align-self: flex-start;
  width: fit-content;
}
.route-quick-btn:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(249,115,22,.45); background:#ea580c; }
.route-quick-btn:active { transform:translateY(0) scale(.96); }
.route-quick-menu {
  position:fixed; z-index:1060; background:var(--sacc-surface); border:1px solid var(--sacc-border);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:4px;
  min-width:170px; max-width:260px; visibility:hidden; /* JS reveals after positioning */
  animation: route-nudge-in .15s ease-out;
}
.route-quick-menu button {
  display:flex; align-items:center; gap:7px; width:100%; padding:7px 10px; border:none; background:none;
  text-align:left; font-size:12px; border-radius:6px; cursor:pointer; color:var(--sacc-text);
}
.route-quick-menu button:hover { background:var(--sacc-surface-hover, rgba(0,0,0,.05)); }
.route-quick-menu .route-quick-menu-header {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--sacc-text-muted); padding:6px 10px 4px;
}

/* Manual "Send To" / "Complete" routing buttons — tactile hover/press affordance
   so the primary routing actions feel responsive, not just static links. */
.speciallink { transition: transform .12s ease, box-shadow .12s ease; }
.speciallink:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.14); }
.speciallink:active:not(:disabled) { transform: translateY(0) scale(.97); }
@keyframes route-success-flash { 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.55);} 100%{ box-shadow:0 0 0 14px rgba(16,185,129,0);} }
.route-success-flash { animation: route-success-flash .5s ease-out; }
.crv-task-card { transition: box-shadow .2s ease, border-color .2s ease; }
.crv-task-card.needs-routing { border-color: rgba(220,38,38,.35); box-shadow: 0 0 0 1px rgba(220,38,38,.12); }

/* ── Staff performance leaderboard (dashboard panel + report) ───────────── */
.sp-rank { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:700; background:var(--sacc-surface); color:var(--sacc-text-muted); border:1px solid var(--sacc-border); }
.sp-rank.r1 { background:#fde68a; color:#92400e; border-color:#fcd34d; }
.sp-rank.r2 { background:#e5e7eb; color:#374151; border-color:#d1d5db; }
.sp-rank.r3 { background:#fed7aa; color:#9a3412; border-color:#fdba74; }
.sp-onshift { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:1px 7px; border-radius:10px; color:#10b981; background:rgba(16,185,129,0.10); }
.sp-risk { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }
.sp-risk.warning { color:#b45309; background:rgba(245,158,11,0.12); }
.sp-risk.danger { color:#b91c1c; background:rgba(239,68,68,0.12); }
.sp-bar { height:4px; border-radius:3px; background:rgba(var(--sacc-primary-rgb,14,99,156),0.15); position:relative; overflow:hidden; margin-top:3px; }
.sp-bar > span { position:absolute; left:0; top:0; bottom:0; background:var(--sacc-primary); border-radius:3px; }

/* ── Inline field validation ───────────────────────────────────────────────────
   A refusal has to name the field and say what is wrong. The previous pattern —
   disable Save and say nothing — tells the user they are blocked but not why, and
   leaves them clicking a dead button. Empty until a rule fails, so a pristine form
   stays quiet. */
.sacc-field-error {
    display: none;
    margin-top: .2rem;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--sacc-danger, #e53e3e);
}
.sacc-field-error.is-shown { display: block; }

/* The field itself carries the state too — colour alone is not a signal, so the
   message above is the primary cue and this is the locator. */
.form-control.is-invalid,
.m_select.is-invalid + .sacc-select,
select.is-invalid {
    border-color: var(--sacc-danger, #e53e3e);
}

/* Toast link — the "open receipt / open document" affordance on save toasts.
   Was an inline style until 2026-08-26; sacc.toast now sanitises its message and
   `style` is not an allow-listed attribute, so the rule lives here instead. */
.toast a.sacc-toast-link,
.sacc-toast-link {
    text-decoration: underline;
    color: inherit;
    font-weight: 600;
}
.sacc-toast-link:hover { color: inherit; opacity: .85; }

/* ---------------------------------------------------------------------------
   .sacc-pack-inline — the pack reading under a quantity (sacc.dt.packQty).

   A second reading of the number above it, so it is deliberately quieter: it
   must never be mistaken for the figure that totals. Sits inside the same cell,
   so no column is spent on it — which is what makes it usable on a movement
   grid with four quantities where three extra columns each would not fit.
   --------------------------------------------------------------------------- */
.sacc-pack-inline {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--sacc-text-muted, #73818f);
    white-space: nowrap;
    margin-top: 1px;
}
@media print {
    /* Keep it on paper: a printed count sheet is the main place the split is used. */
    .sacc-pack-inline { color: #666; font-size: 0.68rem; }
}

/* ==========================================================================
   ERROR / REFUSAL STATE  (Views/Errors/_ErrorState.cshtml)

   Replaces five hand-built screens, four of which still used a <table> layout, a
   180px black circle-X and a hard-coded #FFDFDF panel. The operator's words for
   it were "looks so oldschool".

   Written to the project's own vocabulary rather than a new one: --sacc-* tokens
   so it follows the tenant palette and BOTH themes, .sacc-note for the detail
   block, .btn-action-* for the controls, and the hub's entrance-animation
   convention (translateY + opacity, `backwards`, disabled under
   prefers-reduced-motion).

   `backwards`, NEVER `forwards`: a forwards fill leaves transform: translateY(0)
   applied for ever, and a transform makes the element a containing block for its
   positioned descendants. This project has already had to sweep that pattern out
   twice — it displaced and trapped the DataTables column menu. backwards applies
   the FROM state before the animation starts and leaves nothing behind after it.
   ========================================================================== */
.sacc-errstate {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 6vh, 4rem) 1rem;
  min-width: 0;                 /* flex child that must be allowed to shrink */
}

.sacc-errstate__card {
  width: 100%;
  max-width: 33rem;
  padding: 2rem 1.75rem 1.25rem;
  text-align: center;
  background: var(--sacc-surface);
  border: 1px solid var(--sacc-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  animation: saccErrStateIn .32s cubic-bezier(.22, .61, .36, 1) backwards;
}

/*  The icon is the only coloured object, and it is 56px, not 180px. The old
    screen gave a decorative glyph more visual weight than the sentence
    explaining what had gone wrong. */
.sacc-errstate__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  animation: saccErrStateIcon .42s cubic-bezier(.34, 1.56, .64, 1) backwards;
  animation-delay: .06s;
}

.sacc-errstate__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sacc-text);
  margin: 0 0 .35rem;
}

.sacc-errstate__message {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--sacc-text-muted);
  margin: 0 0 .75rem;
  overflow-wrap: anywhere;      /* ids and paths must not widen the card */
}

.sacc-errstate__detail { text-align: left; margin: .75rem 0; }

.sacc-errstate__hint {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--sacc-text-muted);
  margin: 0 0 1rem;
}

.sacc-errstate__actions {
  display: flex;
  flex-wrap: wrap;              /* three controls must never overflow at 414px */
  gap: .5rem;
  justify-content: center;
  margin-top: 1.1rem;
}

.sacc-errstate__stamp {
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--sacc-border);
  font-size: .72rem;
  color: var(--sacc-text-muted);
  overflow-wrap: anywhere;
}

/*  Semantic colour on the icon only, in token form so both themes work and no
    tenant palette is overridden. The old screen hard-coded #FFDFDF and red. */
.sacc-errstate--warn   .sacc-errstate__icon { color: var(--sacc-warn, #f57c00);   background: rgba(245, 124, 0, .12); }
.sacc-errstate--danger .sacc-errstate__icon { color: var(--sacc-danger, #dc3545); background: rgba(220, 53, 69, .12); }
.sacc-errstate--info   .sacc-errstate__icon { color: var(--sacc-primary, #16537e); background: rgba(22, 83, 126, .12); }

@keyframes saccErrStateIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes saccErrStateIcon {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sacc-errstate__card,
  .sacc-errstate__icon {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   HELP AS A STANDALONE PAGE  (Views/Help/_Standalone.cshtml)

   Help bodies already carry .help-content and are styled by the block
   above — but ONLY once a layout has loaded this stylesheet. Reached by
   a typed URL the fragment had no layout at all, so it rendered in the
   browser's default serif with its tables running off the right edge.
   This is the frame that makes the same body a page.
   ══════════════════════════════════════════════════════════════ */
.sacc-help-standalone {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem 0 3rem;
  min-width: 0;                  /* flex child; see .body.flex-grow-1 */
}

.sacc-help-standalone__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;               /* the actions must never be pushed off at 414px */
  gap: .75rem;
  padding-bottom: .85rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--sacc-border);
}

.sacc-help-standalone__eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sacc-primary, #16537e);
}

.sacc-help-standalone__title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sacc-text);
  margin: .2rem 0 .1rem;
}

.sacc-help-standalone__sub {
  font-size: .82rem;
  color: var(--sacc-text-muted);
}

.sacc-help-standalone__actions { display: flex; gap: .5rem; flex: none; }

.sacc-help-standalone__body { min-width: 0; }

/*  WIDE CONTENT SCROLLS INSIDE ITSELF, it does not widen the document.
    The screenshot showed the "Which Document Is Which" table running past the
    right edge with nothing to scroll it. Help is written by hand, so a table
    wider than the reader's screen is a matter of when, not if. */
.sacc-help-standalone__body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.sacc-help-standalone__body pre,
.sacc-help-standalone__body code { overflow-x: auto; max-width: 100%; }
.sacc-help-standalone__body img  { max-width: 100%; height: auto; }

/*  A NUMERIC CELL MUST FIT ITS OWN NUMBER. The rate-plan grid's inputs were laid out at 45px
    against a three-digit value needing 51 - so "120" was clipped to "12" on the screen whose
    only job is to show and change it. Measured at every width from 1440 down, which is what
    made it worth fixing rather than filing: it was never a narrow-window problem. */
.sacc-table-scroll input.form-control,
.sacc-table-scroll input.form-control-sm {
    min-width: 4.5rem;
}

/*  ── THE INVOICE EDITOR'S HEADER ROW ──────────────────────────────────────────────────────
    MEASURED, at every width from 1440 down: the "Ref" field (col-md-1) held a box between 51
    and 88px against a bank reference needing 130. It was not a narrow-window problem - the
    field was unusable on a full desktop - and the cause is the one this project has now met
    three times: a flex/grid child whose min-width defaults to AUTO refuses to shrink, so its
    siblings absorb every pixel it will not give up, and the smallest column loses.

    col-md-1 is 8.33% of the row. At 1100px that is 91px before padding, which cannot show a
    reference of any useful length whatever the rest of the row does. So the columns in this
    header lay out by CONTENT with a floor, and wrap when there is no room - the same treatment
    the stay screen's top row was given in #155, and for the same reason.

    Scoped to .sacc-invoice-page so no other screen inherits it: col-md-* is used 1,620 times
    across the app and a global change to it is a different, much larger decision.            */
/*  The header row is NOT a direct child of .sacc-invoice-page - the first attempt scoped it
    that way, the rule matched nothing, and the Ref box stayed at 88px. Any .row inside the
    page, which is what the markup actually has. */
.sacc-invoice-page .row {
    flex-wrap: wrap;
}

.sacc-invoice-page .row > [class*="col-"] {
    min-width: 0;                 /* stop it refusing to shrink and squeezing its neighbours */
}

/*  A field must fit the value it exists to show. 9rem is the shortest box in which a bank
    reference or a note reads as itself rather than as a fragment.

    NAMED FIELDS, NOT EVERY CONTROL IN A COLUMN. A blanket floor would also hit the quantity
    and price cells in the items grid, where a narrow box is correct and a 9rem one would push
    that table sideways - trading this defect for a worse one. These three are the fields the
    audit measured as unusable. */
#BankReference,
#Note,
#Notes {
    min-width: 9rem;
}