/* ==========================================================================
   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 {
  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);
}
.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;
}

/* 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;
  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-bottom: 1px solid var(--sacc-border);
}

.page-content .dt-container > .sacc-dt-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: var(--sacc-dt-footer-height);
  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: 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-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 */
.page-content .dt-container > .row:last-child {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: var(--sacc-dt-footer-height);
  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;
}

/* Pagination — global (not scoped to .page-content) */
.dt-container .dt-paging {
  padding: 0;
}

.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;
}

.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: 9px 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;
}
.page-content .table:not(.dataTable) > tbody > tr > td,
.page-content .table:not(.dataTable) > tbody > tr > th {
  padding: 9px 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: 6px 12px;
}
.page-content .table-sm:not(.dataTable) > tbody > tr > td,
.page-content .table-sm:not(.dataTable) > tbody > tr > th {
  padding: 6px 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;
}
.ra-action-tile:hover .ra-action-icon { color: #fff !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; }

/* --- 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;
}

.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);
  overflow-y: auto;
}

.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;
}

/* Ensure receipt content doesn't inherit stray body styles */
.doc-preview-page > * {
  max-width: 100%;
}

/* 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 */
.doc-preview-page iframe {
  transition: transform 0.15s ease;
  transform-origin: top center;
}

/* 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));
}
.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 */
.sacc-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.sacc-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  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.78rem;
  font-weight: 600;
  text-align: center;
  transition: background 0.15s, box-shadow 0.15s;
}
.sacc-quick-action:hover {
  background: var(--sacc-hover-bg, rgba(0,0,0,0.03));
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--sacc-text);
}
.sacc-quick-action i {
  font-size: 1.3rem;
  color: var(--sacc-primary);
}

/* 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);
}

/* Responsive */
@media (max-width: 767.98px) {
  .sacc-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sacc-kpi-card .kpi-value { font-size: 1.2rem; }
  .sacc-quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479.98px) {
  .sacc-kpi-grid {
    grid-template-columns: 1fr;
  }
  .sacc-quick-actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   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;
  opacity: 0;
  transform: translateY(12px);
  animation: saccSettingsFadeIn 0.35s ease forwards;
}

.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;
}

.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 {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.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 {
  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-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;
}
.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;
}

[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 forwards; opacity: 0; }
.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: 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); }

/* ============================================================================
   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);
}