/* ============================================================================
   Stratamize Vending Admin — Design System
   ----------------------------------------------------------------------------
   Single source of truth for the vending control plane visual language.
   Tech aesthetic: deep slate, calibrated cyan accent, monospace data.
   Layered on top of Bootstrap 5; preserves all .btn / .form-control / .card
   / .table / .modal / .alert / .nav semantics.
   ============================================================================ */

/* ---------- 1. Tokens -------------------------------------------------------- */

:root {
  /* Surfaces (deep, calibrated, single-hue family) */
  --av-bg:           #0a0e14;
  --av-bg-grid:      #0c1119;
  --av-bg-elev:      #0f141c;
  --av-surface:      #11161f;
  --av-surface-2:    #161c28;
  --av-surface-3:    #1c2330;
  --av-surface-hi:   #222a3a;

  /* Borders */
  --av-border:        #1f2937;
  --av-border-strong: #2a3447;
  --av-border-soft:   #161c26;

  /* Text */
  --av-text:        #e5e7eb;
  --av-text-strong: #f3f4f6;
  --av-text-muted:  #9ca3af;
  --av-text-subtle: #6b7280;
  --av-text-inverse:#0a0e14;

  /* Brand accent — single, restrained, cyan */
  --av-accent:       #22d3ee;
  --av-accent-hover: #06b6d4;
  --av-accent-press: #0891b2;
  --av-accent-soft:  rgba(34, 211, 238, 0.10);
  --av-accent-glow:  rgba(34, 211, 238, 0.35);
  --av-accent-ink:   #0a1014;

  /* Secondary accent for highlights only — violet */
  --av-accent-2:      #a78bfa;
  --av-accent-2-soft: rgba(167, 139, 250, 0.12);

  /* Status — semantic colors */
  --av-success:      #34d399;
  --av-success-hover:#10b981;
  --av-success-soft: rgba(52, 211, 153, 0.12);
  --av-warning:      #fbbf24;
  --av-warning-hover:#f59e0b;
  --av-warning-soft: rgba(251, 191, 36, 0.12);
  --av-danger:       #f87171;
  --av-danger-hover: #ef4444;
  --av-danger-soft:  rgba(248, 113, 113, 0.12);
  --av-info:         #60a5fa;
  --av-info-soft:    rgba(96, 165, 250, 0.12);
  --av-neutral:      #94a3b8;
  --av-neutral-soft: rgba(148, 163, 184, 0.12);

  /* Type */
  --av-font:        'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --av-font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                    Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --av-font-display: var(--av-font);

  /* Type scale */
  --av-fs-xs:   12px;
  --av-fs-sm:   13px;
  --av-fs-base: 14px;
  --av-fs-md:   15px;
  --av-fs-lg:   17px;
  --av-fs-xl:   20px;
  --av-fs-2xl:  24px;
  --av-fs-3xl:  30px;
  --av-fs-4xl:  36px;
  --av-fs-display: 44px;

  --av-lh-tight:  1.25;
  --av-lh-snug:   1.4;
  --av-lh-normal: 1.55;
  --av-lh-relaxed:1.7;

  --av-fw-regular:  400;
  --av-fw-medium:   500;
  --av-fw-semibold: 600;
  --av-fw-bold:     700;

  /* Spacing — 4px rhythm */
  --av-space-0:  0;
  --av-space-1:  4px;
  --av-space-2:  8px;
  --av-space-3:  12px;
  --av-space-4:  16px;
  --av-space-5:  20px;
  --av-space-6:  24px;
  --av-space-7:  28px;
  --av-space-8:  32px;
  --av-space-10: 40px;
  --av-space-12: 48px;
  --av-space-14: 56px;
  --av-space-16: 64px;
  --av-space-20: 80px;

  /* Radii */
  --av-radius-xs:   4px;
  --av-radius-sm:   6px;
  --av-radius:      8px;
  --av-radius-md:   10px;
  --av-radius-lg:   12px;
  --av-radius-xl:   16px;
  --av-radius-2xl:  20px;
  --av-radius-pill: 999px;

  /* Motion */
  --av-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --av-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --av-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --av-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --av-dur-instant:  80ms;
  --av-dur-fast:     140ms;
  --av-dur:          200ms;
  --av-dur-slow:     320ms;
  --av-dur-slower:   480ms;

  /* Elevation — purposeful, never gaudy */
  --av-shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
  --av-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --av-shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.40),
                  0 1px 2px -1px rgba(0, 0, 0, 0.40);
  --av-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45),
                  0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --av-shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.55),
                  0 4px 8px -4px rgba(0, 0, 0, 0.45);
  --av-shadow-xl: 0 20px 30px -8px rgba(0, 0, 0, 0.60),
                  0 8px 12px -8px rgba(0, 0, 0, 0.50);
  --av-shadow-glow: 0 0 0 1px var(--av-accent-glow), 0 4px 16px -2px var(--av-accent-glow);

  /* Focus ring */
  --av-ring:        0 0 0 3px var(--av-accent-glow);
  --av-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.30);

  /* Layout */
  --av-sidebar-w:           260px;
  --av-sidebar-w-collapsed: 76px;
  --av-navbar-h:            64px;
  --av-content-max:         1440px;

  /* Z-index */
  --av-z-base:    1;
  --av-z-sticky:  900;
  --av-z-navbar:  1030;
  --av-z-sidebar: 1040;
  --av-z-modal:   1080;
  --av-z-toast:   1100;

  /* Theme-aware aux: striped table tint, hover scrollbar (overridden in light). */
  --av-stripe-bg: rgba(255, 255, 255, 0.025);
  --av-navbar-bg: rgba(15, 20, 28, 0.85);
  --av-sidebar-bg: linear-gradient(180deg, var(--av-bg-elev) 0%, #0b1019 100%);
  --av-page-bg-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(34, 211, 238, 0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(167, 139, 250, 0.04), transparent 60%),
    linear-gradient(180deg, var(--av-bg) 0%, var(--av-bg-grid) 100%);
}

/* ---------- 1b. Light theme ------------------------------------------------- *
 * Activated by `<html data-theme="light">`. Inline script in each template
 * head sets this attribute synchronously based on localStorage, falling back
 * to `prefers-color-scheme`. Default is dark.
 *
 * The values below are a calibrated mirror of the dark palette: enterprise
 * neutrals (slate / off-white), a slightly darker cyan accent for AA contrast
 * on white, and lighter shadow + glow for the elevated surfaces.
 * --------------------------------------------------------------------------- */

:root[data-theme="light"] {
  /* Surfaces */
  --av-bg:           #f7f8fa;
  --av-bg-grid:      #eef0f4;
  --av-bg-elev:      #ffffff;
  --av-surface:      #ffffff;
  --av-surface-2:    #f7f8fa;
  --av-surface-3:    #eef0f4;
  --av-surface-hi:   #e5e7eb;

  /* Borders */
  --av-border:        #e5e7eb;
  --av-border-strong: #d1d5db;
  --av-border-soft:   #f1f3f6;

  /* Text */
  --av-text:        #1f2937;
  --av-text-strong: #030712;
  --av-text-muted:  #4b5563;
  --av-text-subtle: #6b7280;
  --av-text-inverse:#ffffff;

  /* Brand accent — darker cyan for AA contrast against white surfaces. */
  --av-accent:       #0891b2;
  --av-accent-hover: #0e7490;
  --av-accent-press: #155e75;
  --av-accent-soft:  rgba(8, 145, 178, 0.10);
  --av-accent-glow:  rgba(8, 145, 178, 0.22);
  --av-accent-ink:   #ffffff;

  /* Secondary accent — darker violet. */
  --av-accent-2:      #7c3aed;
  --av-accent-2-soft: rgba(124, 58, 237, 0.10);

  /* Status (semantic, calibrated for white surfaces). */
  --av-success:      #059669;
  --av-success-hover:#047857;
  --av-success-soft: rgba(5, 150, 105, 0.12);
  --av-warning:      #d97706;
  --av-warning-hover:#b45309;
  --av-warning-soft: rgba(217, 119, 6, 0.14);
  --av-danger:       #dc2626;
  --av-danger-hover: #b91c1c;
  --av-danger-soft:  rgba(220, 38, 38, 0.10);
  --av-info:         #2563eb;
  --av-info-soft:    rgba(37, 99, 235, 0.10);
  --av-neutral:      #64748b;
  --av-neutral-soft: rgba(100, 116, 139, 0.10);

  /* Shadow scale — lighter, more diffused. */
  --av-shadow-xs: 0 1px 1px 0 rgba(15, 23, 42, 0.04);
  --av-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --av-shadow:    0 1px 3px 0 rgba(15, 23, 42, 0.08),
                  0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --av-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.10),
                  0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --av-shadow-lg: 0 12px 20px -4px rgba(15, 23, 42, 0.12),
                  0 4px 8px -4px rgba(15, 23, 42, 0.08);
  --av-shadow-xl: 0 20px 30px -8px rgba(15, 23, 42, 0.16),
                  0 8px 12px -8px rgba(15, 23, 42, 0.08);
  --av-shadow-glow: 0 0 0 1px var(--av-accent-glow), 0 4px 16px -2px var(--av-accent-glow);

  /* Focus ring (accent + danger). */
  --av-ring:        0 0 0 3px var(--av-accent-glow);
  --av-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.18);

  /* Aux tokens used by sidebar, navbar, body, and striped tables. */
  --av-stripe-bg: rgba(15, 23, 42, 0.03);
  --av-navbar-bg: rgba(255, 255, 255, 0.85);
  --av-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  --av-page-bg-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(8, 145, 178, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(124, 58, 237, 0.05), transparent 60%),
    linear-gradient(180deg, var(--av-bg) 0%, var(--av-bg-grid) 100%);
}

/* If the user has expressed an OS preference but the dashboard preference
   is not set (no `data-theme` on <html>), fall through to light. The inline
   script in <head> normally sets data-theme before render, so this CSS-only
   path only kicks in when JS is disabled. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Surfaces */
    --av-bg:           #f7f8fa;
    --av-bg-grid:      #eef0f4;
    --av-bg-elev:      #ffffff;
    --av-surface:      #ffffff;
    --av-surface-2:    #f7f8fa;
    --av-surface-3:    #eef0f4;
    --av-surface-hi:   #e5e7eb;
    --av-border:        #e5e7eb;
    --av-border-strong: #d1d5db;
    --av-border-soft:   #f1f3f6;
    --av-text:        #1f2937;
    --av-text-strong: #030712;
    --av-text-muted:  #4b5563;
    --av-text-subtle: #6b7280;
    --av-text-inverse:#ffffff;
    --av-accent:       #0891b2;
    --av-accent-hover: #0e7490;
    --av-accent-press: #155e75;
    --av-accent-soft:  rgba(8, 145, 178, 0.10);
    --av-accent-glow:  rgba(8, 145, 178, 0.22);
    --av-accent-ink:   #ffffff;
    --av-stripe-bg: rgba(15, 23, 42, 0.03);
    --av-navbar-bg: rgba(255, 255, 255, 0.85);
    --av-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
    --av-page-bg-image:
      radial-gradient(1200px 600px at 100% -10%, rgba(8, 145, 178, 0.06), transparent 60%),
      radial-gradient(900px 500px at -10% 100%, rgba(124, 58, 237, 0.05), transparent 60%),
      linear-gradient(180deg, var(--av-bg) 0%, var(--av-bg-grid) 100%);
  }
}

/* ---------- 2. Reset & base ------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--av-font);
  font-size: var(--av-fs-base);
  font-weight: var(--av-fw-regular);
  line-height: var(--av-lh-normal);
  color: var(--av-text);
  background-color: var(--av-bg);
  background-image: var(--av-page-bg-image);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

a { color: var(--av-accent); text-decoration: none; transition: color var(--av-dur) var(--av-ease); }
a:hover { color: var(--av-accent-hover); }
a:focus-visible { outline: none; box-shadow: var(--av-ring); border-radius: var(--av-radius-xs); }

p { margin: 0 0 var(--av-space-4) 0; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--av-font-display);
  font-weight: var(--av-fw-semibold);
  line-height: var(--av-lh-tight);
  color: var(--av-text-strong);
  margin: 0 0 var(--av-space-3) 0;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--av-fs-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--av-fs-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--av-fs-xl); }
h4 { font-size: var(--av-fs-lg); }
h5 { font-size: var(--av-fs-md); font-weight: var(--av-fw-semibold); }
h6 { font-size: var(--av-fs-sm); font-weight: var(--av-fw-semibold);
     text-transform: uppercase; letter-spacing: 0.06em; color: var(--av-text-muted); }

small, .small { font-size: var(--av-fs-xs); }
strong, b { font-weight: var(--av-fw-semibold); color: var(--av-text-strong); }
code, kbd, pre, samp { font-family: var(--av-font-mono); }

code {
  font-size: 0.9em;
  padding: 0.1em 0.4em;
  background-color: var(--av-surface-2);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-xs);
  color: var(--av-accent);
}

kbd {
  display: inline-block;
  padding: 0.15em 0.45em;
  font-size: 0.85em;
  font-weight: var(--av-fw-medium);
  color: var(--av-text-strong);
  background: linear-gradient(180deg, var(--av-surface-2), var(--av-surface));
  border: 1px solid var(--av-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--av-radius-xs);
  box-shadow: var(--av-shadow-xs);
}

hr, .nav-divider {
  border: 0;
  height: 1px;
  margin: var(--av-space-3) 0;
  background-image: linear-gradient(90deg, transparent, var(--av-border-strong), transparent);
}

::selection { background: var(--av-accent-soft); color: var(--av-text-strong); }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--av-border-strong);
  border-radius: var(--av-radius-pill);
  border: 2px solid var(--av-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--av-surface-hi); }
::-webkit-scrollbar-corner { background: transparent; }

/* Tabular numerics where data lives */
.av-num, .metric-value, .table td, .table th { font-variant-numeric: tabular-nums; }

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

/* ---------- 3. Layout shell ------------------------------------------------- */

#sidebar, .sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--av-sidebar-w);
  background: var(--av-sidebar-bg);
  border-right: 1px solid var(--av-border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--av-z-sidebar);
  transition: transform var(--av-dur) var(--av-ease),
              width var(--av-dur) var(--av-ease);
  display: flex;
  flex-direction: column;
}

#sidebar::before, .sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--av-accent-soft), transparent);
}

#sidebar .nav, .sidebar .nav { padding: var(--av-space-3) var(--av-space-2); flex: 1 1 auto; }

#sidebar .nav-item, .sidebar .nav-item { margin-bottom: 2px; }

#sidebar .nav-link, .sidebar .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--av-space-3);
  padding: 10px var(--av-space-3);
  margin: 0 var(--av-space-1);
  border-radius: var(--av-radius);
  color: var(--av-text-muted);
  font-size: var(--av-fs-sm);
  font-weight: var(--av-fw-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color var(--av-dur-fast) var(--av-ease),
              color var(--av-dur-fast) var(--av-ease);
  white-space: nowrap;
  overflow: hidden;
}

#sidebar .nav-link i, .sidebar .nav-link i {
  width: 20px;
  font-size: 15px;
  text-align: center;
  flex-shrink: 0;
  color: var(--av-text-subtle);
  transition: color var(--av-dur-fast) var(--av-ease);
  margin: 0;
}

#sidebar .nav-link span, .sidebar .nav-link span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar .nav-link:hover, .sidebar .nav-link:hover {
  background-color: var(--av-surface);
  color: var(--av-text-strong);
}
#sidebar .nav-link:hover i, .sidebar .nav-link:hover i { color: var(--av-text); }

#sidebar .nav-link.active, .sidebar .nav-link.active {
  background-color: var(--av-accent-soft);
  color: var(--av-accent);
}
#sidebar .nav-link.active i, .sidebar .nav-link.active i { color: var(--av-accent); }

#sidebar .nav-link.active::before, .sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--av-accent);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--av-accent-glow);
}

#sidebar .nav-link:focus-visible, .sidebar .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--av-ring);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--av-space-3);
  padding: var(--av-space-5) var(--av-space-5) var(--av-space-3);
  border-bottom: 1px solid var(--av-border-soft);
  margin-bottom: var(--av-space-2);
}
.sidebar-brand img { height: 28px; width: auto; }
.sidebar-brand-name {
  font-family: var(--av-font-mono);
  font-size: var(--av-fs-sm);
  font-weight: var(--av-fw-semibold);
  letter-spacing: 0.04em;
  color: var(--av-text-strong);
  text-transform: uppercase;
}
.sidebar-brand-name em {
  color: var(--av-accent);
  font-style: normal;
  font-weight: var(--av-fw-bold);
}

.sidebar-section-label {
  display: block;
  padding: var(--av-space-3) var(--av-space-4) var(--av-space-2);
  font-family: var(--av-font-mono);
  font-size: 10.5px;
  font-weight: var(--av-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--av-text-subtle);
}

.sidebar-footer {
  padding: var(--av-space-3) var(--av-space-5);
  border-top: 1px solid var(--av-border-soft);
  font-size: var(--av-fs-xs);
  color: var(--av-text-subtle);
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
}
.sidebar-footer .av-status-dot { width: 6px; height: 6px; }

/* Mobile: slide-in sidebar */
@media (max-width: 991.98px) {
  #sidebar, .sidebar {
    transform: translateX(-100%);
    width: var(--av-sidebar-w);
    box-shadow: var(--av-shadow-xl);
  }
  #sidebar.active, .sidebar.active { transform: translateX(0); }
}

/* Desktop: collapsed sidebar */
@media (min-width: 992px) {
  #sidebar.collapsed, .sidebar.collapsed { width: var(--av-sidebar-w-collapsed); }
  #sidebar.collapsed .nav-link, .sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 10px;
  }
  #sidebar.collapsed .nav-link span,
  #sidebar.collapsed .sidebar-brand-name,
  #sidebar.collapsed .sidebar-section-label,
  #sidebar.collapsed .sidebar-footer span:not(.av-status-dot),
  .sidebar.collapsed .nav-link span,
  .sidebar.collapsed .sidebar-brand-name,
  .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .sidebar-footer span:not(.av-status-dot) { display: none; }
  #sidebar.collapsed .sidebar-brand,
  .sidebar.collapsed .sidebar-brand { justify-content: center; padding: var(--av-space-5) 0 var(--av-space-3); }
}

/* Top navbar */
#topNavbar, .top-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--av-sidebar-w);
  height: var(--av-navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-4);
  padding: 0 var(--av-space-6);
  background-color: var(--av-navbar-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--av-border);
  z-index: var(--av-z-navbar);
  transition: left var(--av-dur) var(--av-ease);
}
@media (max-width: 991.98px) {
  #topNavbar, .top-navbar { left: 0; padding: 0 var(--av-space-4); }
}
#topNavbar.collapsed, .top-navbar.collapsed { left: var(--av-sidebar-w-collapsed); }

.top-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--av-space-3);
  color: var(--av-text-strong);
  font-weight: var(--av-fw-semibold);
}
.top-navbar .navbar-brand img { height: 32px; width: auto; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--av-radius-sm);
  color: var(--av-text-muted);
  cursor: pointer;
  font-size: 18px;
  transition: background-color var(--av-dur-fast) var(--av-ease),
              color var(--av-dur-fast) var(--av-ease);
}
.menu-toggle:hover { background-color: var(--av-surface); color: var(--av-text-strong); }
.menu-toggle:focus-visible { outline: none; box-shadow: var(--av-ring); }

/* Main content */
#mainContent, .main-content {
  margin-left: var(--av-sidebar-w);
  padding: calc(var(--av-navbar-h) + var(--av-space-6)) var(--av-space-6) var(--av-space-10);
  min-height: 100vh;
  transition: margin-left var(--av-dur) var(--av-ease);
}
@media (max-width: 991.98px) {
  #mainContent, .main-content {
    margin-left: 0;
    padding: calc(var(--av-navbar-h) + var(--av-space-4)) var(--av-space-4) var(--av-space-8);
  }
}
#mainContent.collapsed, .main-content.collapsed { margin-left: var(--av-sidebar-w-collapsed); }

#mainContent > .container,
.main-content > .container,
#mainContent > .container-fluid,
.main-content > .container-fluid {
  max-width: var(--av-content-max);
  padding-left: 0;
  padding-right: 0;
}

/* Page header pattern */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--av-space-4);
  margin-bottom: var(--av-space-6);
  padding-bottom: var(--av-space-5);
  border-bottom: 1px solid var(--av-border);
}
.page-header .page-eyebrow {
  display: block;
  font-family: var(--av-font-mono);
  font-size: 11px;
  font-weight: var(--av-fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--av-accent);
  margin-bottom: var(--av-space-2);
}
.page-header h1 { margin-bottom: var(--av-space-1); font-size: var(--av-fs-3xl); }
.page-header .page-subtitle { color: var(--av-text-muted); font-size: var(--av-fs-md); margin: 0; }
.page-header .page-actions { display: flex; flex-wrap: wrap; gap: var(--av-space-2); }

.dashboard-header h1 { font-size: var(--av-fs-3xl); margin-bottom: var(--av-space-1); }
.dashboard-header p { color: var(--av-text-muted); font-size: var(--av-fs-md); margin: 0; }

footer {
  margin-top: var(--av-space-12);
  padding-top: var(--av-space-6);
  border-top: 1px solid var(--av-border);
  text-align: center;
  font-size: var(--av-fs-xs);
  color: var(--av-text-subtle);
}

/* ---------- 4. Bootstrap overrides — buttons -------------------------------- */

.btn {
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 14px;
  --bs-btn-font-size: var(--av-fs-sm);
  --bs-btn-font-weight: var(--av-fw-semibold);
  --bs-btn-border-radius: var(--av-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-space-2);
  border: 1px solid transparent;
  letter-spacing: 0.005em;
  line-height: 1.4;
  transition: background-color var(--av-dur-fast) var(--av-ease),
              border-color var(--av-dur-fast) var(--av-ease),
              color var(--av-dur-fast) var(--av-ease),
              box-shadow var(--av-dur-fast) var(--av-ease),
              transform var(--av-dur-fast) var(--av-ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--av-ring); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background-color: var(--av-accent);
  border-color: var(--av-accent);
  color: var(--av-accent-ink);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.08) inset, var(--av-shadow-sm);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--av-accent-hover);
  border-color: var(--av-accent-hover);
  color: var(--av-accent-ink);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.10) inset, var(--av-shadow-md), var(--av-shadow-glow);
}
.btn-primary:active { background-color: var(--av-accent-press); border-color: var(--av-accent-press); color: var(--av-accent-ink); }

.btn-secondary {
  background-color: var(--av-surface-2);
  border-color: var(--av-border-strong);
  color: var(--av-text);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--av-surface-hi);
  border-color: var(--av-border-strong);
  color: var(--av-text-strong);
}

.btn-outline-primary {
  color: var(--av-accent);
  border-color: var(--av-accent);
  background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--av-accent-soft);
  border-color: var(--av-accent);
  color: var(--av-accent);
}

.btn-outline-secondary {
  color: var(--av-text);
  border-color: var(--av-border-strong);
  background-color: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--av-surface);
  border-color: var(--av-border-strong);
  color: var(--av-text-strong);
}

.btn-success {
  background-color: var(--av-success);
  border-color: var(--av-success);
  color: #06231a;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--av-success-hover);
  border-color: var(--av-success-hover);
  color: #06231a;
}

.btn-warning {
  background-color: var(--av-warning);
  border-color: var(--av-warning);
  color: #2a1d04;
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--av-warning-hover);
  border-color: var(--av-warning-hover);
  color: #2a1d04;
}

.btn-danger {
  background-color: var(--av-danger);
  border-color: var(--av-danger);
  color: #2a0707;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: var(--av-danger-hover);
  border-color: var(--av-danger-hover);
  color: #2a0707;
}

.btn-outline-danger {
  color: var(--av-danger);
  border-color: var(--av-danger);
  background-color: transparent;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: var(--av-danger-soft);
  border-color: var(--av-danger);
  color: var(--av-danger);
  box-shadow: var(--av-ring-danger);
}

.btn-info {
  background-color: var(--av-info);
  border-color: var(--av-info);
  color: #04162e;
}
.btn-info:hover, .btn-info:focus {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #04162e;
}

.btn-light {
  background-color: var(--av-surface-hi);
  border-color: var(--av-border-strong);
  color: var(--av-text);
}
.btn-light:hover, .btn-light:focus {
  background-color: var(--av-surface-3);
  border-color: var(--av-border-strong);
  color: var(--av-text-strong);
}

.btn-dark {
  background-color: var(--av-bg-elev);
  border-color: var(--av-border);
  color: var(--av-text);
}

.btn-link {
  color: var(--av-accent);
  text-decoration: none;
  font-weight: var(--av-fw-medium);
  padding: 4px 6px;
  background: transparent;
  border-color: transparent;
}
.btn-link:hover { color: var(--av-accent-hover); background-color: var(--av-accent-soft); }

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--av-text-muted);
}
.btn-ghost:hover { background-color: var(--av-surface); color: var(--av-text-strong); }

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 5px;
  --bs-btn-padding-x: 10px;
  --bs-btn-font-size: var(--av-fs-xs);
  --bs-btn-border-radius: var(--av-radius-xs);
}

.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 12px;
  --bs-btn-padding-x: 18px;
  --bs-btn-font-size: var(--av-fs-md);
  --bs-btn-border-radius: var(--av-radius);
}

.btn-block { display: flex; width: 100%; }

/* Iconic button (square icon button) */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* ---------- 5. Bootstrap overrides — forms ---------------------------------- */

.form-label, label.form-label, label {
  font-size: var(--av-fs-sm);
  font-weight: var(--av-fw-medium);
  color: var(--av-text-strong);
  margin-bottom: var(--av-space-2);
  letter-spacing: 0.005em;
}
.form-text { color: var(--av-text-muted); font-size: var(--av-fs-xs); margin-top: var(--av-space-1); }

.form-control,
.form-select,
input[type="text"]:not(.form-control-plaintext),
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
textarea,
select {
  background-color: var(--av-surface);
  background-image: none;
  border: 1px solid var(--av-border-strong);
  border-radius: var(--av-radius-sm);
  color: var(--av-text);
  padding: 8px 12px;
  font-size: var(--av-fs-sm);
  line-height: 1.5;
  transition: border-color var(--av-dur-fast) var(--av-ease),
              box-shadow var(--av-dur-fast) var(--av-ease),
              background-color var(--av-dur-fast) var(--av-ease);
  font-family: var(--av-font);
  font-feature-settings: 'tnum';
}

.form-control::placeholder, textarea::placeholder { color: var(--av-text-subtle); opacity: 1; }

.form-control:hover,
.form-select:hover,
textarea:hover,
select:hover {
  border-color: var(--av-surface-hi);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: var(--av-surface);
  border-color: var(--av-accent);
  outline: none;
  box-shadow: var(--av-ring);
  color: var(--av-text-strong);
}

.form-control:disabled, .form-control[readonly], .form-select:disabled {
  background-color: var(--av-bg-elev);
  color: var(--av-text-muted);
  border-color: var(--av-border);
  cursor: not-allowed;
}

.form-control-sm { padding: 5px 10px; font-size: var(--av-fs-xs); border-radius: var(--av-radius-xs); }
.form-control-lg { padding: 11px 14px; font-size: var(--av-fs-md); border-radius: var(--av-radius); }

textarea.form-control { min-height: 90px; resize: vertical; }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ca3af'%3E%3Cpath d='M3.5 5.5a.75.75 0 011.06 0L8 8.94l3.44-3.44a.75.75 0 011.06 1.06l-4 4a.75.75 0 01-1.06 0l-4-4a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  padding-right: 36px;
  appearance: none;
}
.form-select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2322d3ee'%3E%3Cpath d='M3.5 5.5a.75.75 0 011.06 0L8 8.94l3.44-3.44a.75.75 0 011.06 1.06l-4 4a.75.75 0 01-1.06 0l-4-4a.75.75 0 010-1.06z'/%3E%3C/svg%3E"); }
.form-select option { background-color: var(--av-surface-2); color: var(--av-text); }

.form-check-input {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border-strong);
  cursor: pointer;
  transition: background-color var(--av-dur-fast) var(--av-ease),
              border-color var(--av-dur-fast) var(--av-ease);
}
.form-check-input:focus { box-shadow: var(--av-ring); border-color: var(--av-accent); }
.form-check-input:checked { background-color: var(--av-accent); border-color: var(--av-accent); }
.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230a0e14'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%230a0e14'/%3E%3C/svg%3E");
}
.form-check-label { color: var(--av-text); font-size: var(--av-fs-sm); cursor: pointer; }

.form-switch .form-check-input {
  background-color: var(--av-surface-hi);
  border-color: var(--av-border-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%239ca3af'/%3E%3C/svg%3E");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%230a0e14'/%3E%3C/svg%3E");
}

.input-group { border-radius: var(--av-radius-sm); }
.input-group-text {
  background-color: var(--av-surface-2);
  border: 1px solid var(--av-border-strong);
  color: var(--av-text-muted);
  font-size: var(--av-fs-sm);
  padding: 8px 12px;
}
.input-group .form-control:focus, .input-group .form-select:focus {
  z-index: 3;
  position: relative;
}

.was-validated .form-control:invalid, .form-control.is-invalid,
.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: var(--av-danger);
  background-image: none;
  padding-right: 12px;
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  box-shadow: var(--av-ring-danger);
}
.invalid-feedback { color: var(--av-danger); font-size: var(--av-fs-xs); margin-top: 4px; }

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--av-success);
  background-image: none;
  padding-right: 12px;
}
.valid-feedback { color: var(--av-success); font-size: var(--av-fs-xs); margin-top: 4px; }

/* ---------- 6. Bootstrap overrides — cards ---------------------------------- */

.card {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  color: var(--av-text);
  box-shadow: var(--av-shadow-sm);
  transition: border-color var(--av-dur) var(--av-ease),
              box-shadow var(--av-dur) var(--av-ease),
              transform var(--av-dur) var(--av-ease);
  margin-bottom: var(--av-space-5);
  overflow: hidden;
}
.card:hover {
  border-color: var(--av-border-strong);
  box-shadow: var(--av-shadow-md);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--av-border);
  padding: var(--av-space-4) var(--av-space-5);
  font-weight: var(--av-fw-semibold);
  color: var(--av-text-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-3);
  flex-wrap: wrap;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  margin: 0;
  font-size: var(--av-fs-md);
  font-weight: var(--av-fw-semibold);
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
}
.card-header h1 i, .card-header h2 i, .card-header h3 i,
.card-header h4 i, .card-header h5 i, .card-header h6 i {
  color: var(--av-accent);
  font-size: 0.95em;
}

.card-body { padding: var(--av-space-5); }
.card-body > :last-child { margin-bottom: 0; }
.card-footer {
  background-color: var(--av-bg-elev);
  border-top: 1px solid var(--av-border);
  padding: var(--av-space-3) var(--av-space-5);
  color: var(--av-text-muted);
  font-size: var(--av-fs-xs);
}

.card-title { font-size: var(--av-fs-md); font-weight: var(--av-fw-semibold); margin-bottom: var(--av-space-2); }
.card-subtitle { color: var(--av-text-muted); font-size: var(--av-fs-sm); }
.card-text { color: var(--av-text); }

/* Metric card — primary KPI surface */
.metric-card {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  padding: var(--av-space-5);
  position: relative;
  overflow: hidden;
  transition: border-color var(--av-dur) var(--av-ease),
              box-shadow var(--av-dur) var(--av-ease),
              transform var(--av-dur) var(--av-ease);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--av-space-3);
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 32px;
  height: 1px;
  background: var(--av-accent);
  box-shadow: 0 0 8px var(--av-accent-glow);
  transition: width var(--av-dur) var(--av-ease);
}
.metric-card:hover {
  border-color: var(--av-border-strong);
  box-shadow: var(--av-shadow-md);
}
.metric-card:hover::before { width: 64px; }

.metric-card .icon-wrapper {
  width: 38px;
  height: 38px;
  background-color: var(--av-accent-soft);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: var(--av-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--av-accent);
  margin-bottom: 0;
  flex-shrink: 0;
  box-shadow: none;
}

.metric-card .metric-value {
  font-family: var(--av-font);
  font-size: var(--av-fs-3xl);
  font-weight: var(--av-fw-semibold);
  color: var(--av-text-strong);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}
.metric-card .metric-label {
  font-size: var(--av-fs-xs);
  font-weight: var(--av-fw-medium);
  color: var(--av-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}
.metric-card .metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--av-fs-xs);
  font-weight: var(--av-fw-medium);
  font-family: var(--av-font-mono);
}
.metric-card .metric-delta.up { color: var(--av-success); }
.metric-card .metric-delta.down { color: var(--av-danger); }
.metric-card .metric-delta.flat { color: var(--av-text-subtle); }

/* Chart card body sizing kept consistent across templates */
.chart-card-body { height: 320px; position: relative; padding: var(--av-space-5); }
@media (min-width: 1280px) { .chart-card-body { height: 360px; } }

/* ---------- 7. Bootstrap overrides — tables -------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--av-text);
  --bs-table-border-color: var(--av-border);
  /* Striped rows: keep text in the theme's body color, use a subtle
     theme-aware tint for the alternating background. Bootstrap's defaults
     fall back to near-black text which is unreadable on the dark theme. */
  --bs-table-striped-color: var(--av-text);
  --bs-table-striped-bg: var(--av-stripe-bg, rgba(255, 255, 255, 0.025));
  /* Hover + active fall back to readable text too. */
  --bs-table-hover-color: var(--av-text-strong);
  --bs-table-hover-bg: var(--av-surface-2);
  --bs-table-active-color: var(--av-text-strong);
  --bs-table-active-bg: var(--av-accent-soft);
  width: 100%;
  margin-bottom: 0;
  color: var(--av-text);
  vertical-align: middle;
  border-color: var(--av-border);
  font-size: var(--av-fs-sm);
}
.table > thead {
  background-color: var(--av-bg-elev);
}
.table > thead > tr > th {
  background-color: transparent;
  color: var(--av-text-muted);
  font-weight: var(--av-fw-semibold);
  font-size: var(--av-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--av-space-3) var(--av-space-4);
  border-bottom: 1px solid var(--av-border);
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: var(--av-space-3) var(--av-space-4);
  border-color: var(--av-border-soft);
  vertical-align: middle;
}
.table > tbody > tr {
  transition: background-color var(--av-dur-fast) var(--av-ease);
}
.table-hover > tbody > tr:hover { background-color: var(--av-surface-2); }
.table > tbody > tr.table-active,
.table > tbody > tr:has(td.table-active) {
  background-color: var(--av-accent-soft);
}

.table-responsive {
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  overflow: auto;
  background-color: var(--av-surface);
}
.table-responsive .table { margin-bottom: 0; }
.table-responsive .table > thead > tr > th:first-child,
.table-responsive .table > tbody > tr > td:first-child { padding-left: var(--av-space-5); }
.table-responsive .table > thead > tr > th:last-child,
.table-responsive .table > tbody > tr > td:last-child { padding-right: var(--av-space-5); }

.table.av-table-flush { border: none; }
.table.av-table-flush > thead > tr > th { background-color: transparent; }

/* ----- Shopping-cart grouping in transactional tables --------------------- */
/* Used on the detailed sales report so multi-item carts read as one group.
   Rows that share a cart wear the same `.av-cart-row--group-N` (alt/none)
   tint, the first row of each cart wears a thicker top border, and rows for
   items that failed to dispense get a muted danger tint with $0 cells. */
.table.av-cart-table { --bs-table-striped-bg: transparent; }
.table.av-cart-table > tbody > tr.av-cart-row > td {
  background-color: transparent;
  transition: background-color var(--av-dur-fast) var(--av-ease);
}
.table.av-cart-table > tbody > tr.av-cart-row--alt > td {
  background-color: var(--av-accent-soft);
}
.table.av-cart-table > tbody > tr.av-cart-row--first > td {
  border-top: 1px solid var(--av-border);
}
.table.av-cart-table > tbody > tr.av-cart-row--first > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--av-accent);
}
.table.av-cart-table > tbody > tr.av-cart-row--failed > td {
  color: var(--av-text-muted);
  background-color: var(--av-danger-soft);
}
.table.av-cart-table > tbody > tr.av-cart-row--failed.av-cart-row--alt > td {
  background-color: rgba(248, 113, 113, 0.18);
}
.table.av-cart-table > tbody > tr.av-cart-row--first.av-cart-row--failed > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--av-danger);
}
.table.av-cart-table.table-hover > tbody > tr.av-cart-row:hover > td {
  background-color: var(--av-surface-2);
}
.table.av-cart-table .av-cart-zero {
  color: var(--av-text-subtle);
  font-variant-numeric: tabular-nums;
}
.table.av-cart-table .av-cart-cell--id,
.table.av-cart-table .av-cart-cell--total {
  font-family: var(--av-font-mono);
  font-weight: var(--av-fw-semibold);
}
.table.av-cart-table .av-cart-cell--num {
  font-family: var(--av-font-mono);
  font-variant-numeric: tabular-nums;
}
.table.av-cart-table .av-cart-cell--total {
  color: var(--av-text-strong);
}

.table tfoot { border-top: 1px solid var(--av-border-strong); background-color: var(--av-bg-elev); }
.table tfoot td { font-weight: var(--av-fw-semibold); padding: var(--av-space-3) var(--av-space-4); }

.av-cell-mono, .table .av-cell-mono { font-family: var(--av-font-mono); font-size: 0.92em; }
.av-cell-num, .table .av-cell-num { font-variant-numeric: tabular-nums; text-align: right; }
.av-cell-shrink { width: 1%; white-space: nowrap; }

/* ---------- 8. Bootstrap overrides — modals, alerts, badges ---------------- */

.modal-content {
  background-color: var(--av-surface-2);
  border: 1px solid var(--av-border-strong);
  border-radius: var(--av-radius-lg);
  color: var(--av-text);
  box-shadow: var(--av-shadow-xl);
}
.modal-header {
  border-bottom: 1px solid var(--av-border);
  padding: var(--av-space-4) var(--av-space-5);
  background-color: transparent;
}
.modal-title { font-weight: var(--av-fw-semibold); color: var(--av-text-strong); margin: 0; }
.modal-body { padding: var(--av-space-5); }
.modal-footer { border-top: 1px solid var(--av-border); padding: var(--av-space-4) var(--av-space-5); gap: var(--av-space-2); }
.btn-close {
  filter: invert(80%) sepia(8%) saturate(206%) hue-rotate(176deg) brightness(94%) contrast(86%);
  opacity: 0.7;
  transition: opacity var(--av-dur-fast) var(--av-ease);
}
.btn-close:hover { opacity: 1; }
.btn-close:focus-visible { box-shadow: var(--av-ring); }

.modal-backdrop.show { opacity: 0.65; background-color: #000; }

.alert {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-left: 3px solid var(--av-neutral);
  border-radius: var(--av-radius);
  padding: var(--av-space-3) var(--av-space-4);
  color: var(--av-text);
  font-size: var(--av-fs-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--av-space-3);
  margin-bottom: var(--av-space-4);
}
.alert::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.5;
}
.alert-primary, .alert-info {
  background-color: var(--av-info-soft);
  border-left-color: var(--av-info);
  color: var(--av-text);
}
.alert-success {
  background-color: var(--av-success-soft);
  border-left-color: var(--av-success);
}
.alert-warning {
  background-color: var(--av-warning-soft);
  border-left-color: var(--av-warning);
}
.alert-danger {
  background-color: var(--av-danger-soft);
  border-left-color: var(--av-danger);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: var(--av-fw-semibold);
  letter-spacing: 0.04em;
  border-radius: var(--av-radius-pill);
  border: 1px solid transparent;
  text-transform: uppercase;
  font-family: var(--av-font-mono);
  vertical-align: middle;
  line-height: 1.4;
}
.badge.bg-primary, .badge.bg-info {
  background-color: var(--av-info-soft) !important;
  color: var(--av-info);
  border-color: rgba(96, 165, 250, 0.3);
}
.badge.bg-success {
  background-color: var(--av-success-soft) !important;
  color: var(--av-success);
  border-color: rgba(52, 211, 153, 0.3);
}
.badge.bg-warning {
  background-color: var(--av-warning-soft) !important;
  color: var(--av-warning);
  border-color: rgba(251, 191, 36, 0.3);
}
.badge.bg-danger {
  background-color: var(--av-danger-soft) !important;
  color: var(--av-danger);
  border-color: rgba(248, 113, 113, 0.3);
}
.badge.bg-secondary {
  background-color: var(--av-neutral-soft) !important;
  color: var(--av-text-muted);
  border-color: var(--av-border-strong);
}
.badge.bg-dark {
  background-color: var(--av-bg-elev) !important;
  color: var(--av-text);
  border-color: var(--av-border-strong);
}

/* Pagination */
.pagination { gap: 4px; }
.page-link {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border-strong);
  color: var(--av-text);
  padding: 6px 12px;
  font-size: var(--av-fs-sm);
  border-radius: var(--av-radius-sm);
  transition: all var(--av-dur-fast) var(--av-ease);
}
.page-link:hover { background-color: var(--av-surface-2); color: var(--av-accent); border-color: var(--av-accent); }
.page-link:focus-visible { box-shadow: var(--av-ring); z-index: 2; }
.page-item.active .page-link {
  background-color: var(--av-accent);
  border-color: var(--av-accent);
  color: var(--av-accent-ink);
}
.page-item.disabled .page-link {
  background-color: var(--av-bg-elev);
  color: var(--av-text-subtle);
  border-color: var(--av-border);
}

/* List group */
.list-group-item {
  background-color: var(--av-surface);
  border-color: var(--av-border);
  color: var(--av-text);
  padding: var(--av-space-3) var(--av-space-4);
}
.list-group-item.active {
  background-color: var(--av-accent-soft);
  border-color: var(--av-accent);
  color: var(--av-accent);
}

/* Tabs */
.nav-tabs {
  border-bottom: 1px solid var(--av-border);
  gap: 2px;
}
.nav-tabs .nav-link {
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--av-text-muted);
  padding: var(--av-space-2) var(--av-space-4);
  font-size: var(--av-fs-sm);
  font-weight: var(--av-fw-medium);
  border-radius: var(--av-radius-sm) var(--av-radius-sm) 0 0;
  margin-bottom: -1px;
  transition: all var(--av-dur-fast) var(--av-ease);
}
.nav-tabs .nav-link:hover {
  color: var(--av-text-strong);
  border-color: transparent transparent var(--av-border-strong);
  background-color: var(--av-surface);
}
.nav-tabs .nav-link.active {
  color: var(--av-accent);
  background-color: transparent;
  border-color: transparent transparent var(--av-accent);
}
.nav-tabs .nav-link:focus-visible { box-shadow: var(--av-ring); }

/* Tooltip / popover (Bootstrap 5) */
.tooltip-inner {
  background-color: var(--av-surface-hi);
  color: var(--av-text-strong);
  font-size: var(--av-fs-xs);
  font-weight: var(--av-fw-medium);
  padding: 6px 10px;
  border-radius: var(--av-radius-sm);
  box-shadow: var(--av-shadow-md);
  border: 1px solid var(--av-border-strong);
}
.tooltip .tooltip-arrow::before { color: var(--av-surface-hi); }
.popover {
  background-color: var(--av-surface-2);
  border: 1px solid var(--av-border-strong);
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow-lg);
}
.popover-header { background-color: var(--av-surface-3); color: var(--av-text-strong); border-bottom-color: var(--av-border); }
.popover-body { color: var(--av-text); }

/* Dropdown */
.dropdown-menu {
  background-color: var(--av-surface-2);
  border: 1px solid var(--av-border-strong);
  border-radius: var(--av-radius);
  padding: 6px;
  font-size: var(--av-fs-sm);
  box-shadow: var(--av-shadow-lg);
}
.dropdown-item {
  color: var(--av-text);
  padding: 7px 10px;
  border-radius: var(--av-radius-xs);
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--av-accent-soft);
  color: var(--av-accent);
}
.dropdown-item.active {
  background-color: var(--av-accent);
  color: var(--av-accent-ink);
}
.dropdown-divider { border-color: var(--av-border); margin: 4px 0; }
.dropdown-header { color: var(--av-text-subtle); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 10px; }

/* Progress */
.progress {
  background-color: var(--av-surface-2);
  border-radius: var(--av-radius-pill);
  height: 6px;
  overflow: hidden;
}
.progress-bar {
  background-color: var(--av-accent);
  background-image: linear-gradient(90deg, var(--av-accent), var(--av-accent-hover));
  border-radius: inherit;
}

/* Spinner */
.spinner-border, .spinner-grow { color: var(--av-accent); }

/* ---------- 9. Custom components ------------------------------------------- */

/* Status pill (data-driven status badge) */
.av-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--av-radius-pill);
  font-family: var(--av-font-mono);
  font-size: 11px;
  font-weight: var(--av-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--av-border-strong);
  background-color: var(--av-surface-2);
  color: var(--av-text-muted);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
}
.av-pill::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--av-text-subtle);
}
.av-pill.av-pill--ok       { color: var(--av-success); border-color: rgba(52, 211, 153, 0.3); background-color: var(--av-success-soft); }
.av-pill.av-pill--ok::before        { background-color: var(--av-success); box-shadow: 0 0 6px var(--av-success); }
.av-pill.av-pill--warn     { color: var(--av-warning); border-color: rgba(251, 191, 36, 0.3); background-color: var(--av-warning-soft); }
.av-pill.av-pill--warn::before      { background-color: var(--av-warning); box-shadow: 0 0 6px var(--av-warning); }
.av-pill.av-pill--danger   { color: var(--av-danger); border-color: rgba(248, 113, 113, 0.3); background-color: var(--av-danger-soft); }
.av-pill.av-pill--danger::before    { background-color: var(--av-danger); box-shadow: 0 0 6px var(--av-danger); }
.av-pill.av-pill--info     { color: var(--av-info); border-color: rgba(96, 165, 250, 0.3); background-color: var(--av-info-soft); }
.av-pill.av-pill--info::before      { background-color: var(--av-info); box-shadow: 0 0 6px var(--av-info); }
.av-pill.av-pill--accent   { color: var(--av-accent); border-color: rgba(34, 211, 238, 0.3); background-color: var(--av-accent-soft); }
.av-pill.av-pill--accent::before    { background-color: var(--av-accent); box-shadow: 0 0 6px var(--av-accent); }
.av-pill.av-pill--neutral  { color: var(--av-text-muted); }

.av-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--av-text-subtle);
  vertical-align: middle;
}
.av-status-dot.is-ok      { background-color: var(--av-success); box-shadow: 0 0 8px var(--av-success); }
.av-status-dot.is-warn    { background-color: var(--av-warning); box-shadow: 0 0 8px var(--av-warning); }
.av-status-dot.is-danger  { background-color: var(--av-danger);  box-shadow: 0 0 8px var(--av-danger); }
.av-status-dot.is-pulse   { animation: avPulse 1.6s var(--av-ease-out) infinite; }

@keyframes avPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

/* Filter / toolbar surface */
.filter-form, .av-toolbar {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  padding: var(--av-space-4) var(--av-space-5);
  margin-bottom: var(--av-space-5);
  box-shadow: var(--av-shadow-sm);
}
.filter-form .form-label, .av-toolbar .form-label {
  font-size: var(--av-fs-xs);
  font-weight: var(--av-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--av-text-muted);
}

/* Empty / error states */
.av-empty {
  text-align: center;
  padding: var(--av-space-12) var(--av-space-6);
  color: var(--av-text-muted);
}
.av-empty .av-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--av-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--av-surface-2);
  border: 1px solid var(--av-border);
  font-size: 22px;
  color: var(--av-text-subtle);
}
.av-empty h3 { font-size: var(--av-fs-md); color: var(--av-text); margin-bottom: var(--av-space-2); }
.av-empty p  { color: var(--av-text-muted); max-width: 420px; margin: 0 auto var(--av-space-4); }

/* Skeleton loader */
.av-skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--av-surface-2) 0%, var(--av-surface-3) 50%, var(--av-surface-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--av-radius-xs);
  animation: avShimmer 1.4s var(--av-ease) infinite;
  height: 1em;
  width: 100%;
}
.av-skel.av-skel--circle { border-radius: 50%; }
.av-skel.av-skel--text   { width: 60%; }
@keyframes avShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Section header (in-card) */
.av-section-title {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  font-size: var(--av-fs-md);
  font-weight: var(--av-fw-semibold);
  color: var(--av-text-strong);
  margin: 0 0 var(--av-space-3) 0;
}
.av-section-title i { color: var(--av-accent); }
.av-section-eyebrow {
  font-family: var(--av-font-mono);
  font-size: 10.5px;
  font-weight: var(--av-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--av-text-subtle);
  margin-bottom: var(--av-space-2);
  display: block;
}

/* Definition list pattern (key/value rows) */
.av-kv {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--av-space-2) var(--av-space-4);
  font-size: var(--av-fs-sm);
}
.av-kv dt {
  color: var(--av-text-muted);
  font-weight: var(--av-fw-medium);
}
.av-kv dd {
  color: var(--av-text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Stat grid (compact stat strip) */
.av-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--av-space-4);
  padding: var(--av-space-4) var(--av-space-5);
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
}
.av-stat-strip .av-stat { display: flex; flex-direction: column; gap: 2px; }
.av-stat-strip .av-stat-label {
  font-size: 11px; font-weight: var(--av-fw-semibold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--av-text-muted);
}
.av-stat-strip .av-stat-value {
  font-size: var(--av-fs-xl);
  font-weight: var(--av-fw-semibold);
  color: var(--av-text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.av-stat-strip .av-stat + .av-stat { border-left: 1px solid var(--av-border); padding-left: var(--av-space-4); }
@media (max-width: 575.98px) {
  .av-stat-strip .av-stat + .av-stat { border-left: 0; padding-left: 0; }
}

/* Auth shell — login / verify centered card */
.av-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--av-space-5);
  position: relative;
}
.av-auth-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(800px 500px at 30% 20%, rgba(34, 211, 238, 0.08), transparent 60%),
    radial-gradient(700px 600px at 70% 80%, rgba(167, 139, 250, 0.07), transparent 60%);
  pointer-events: none;
}
.av-auth-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
}
.av-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background-color: var(--av-surface-2);
  border: 1px solid var(--av-border-strong);
  border-radius: var(--av-radius-xl);
  padding: var(--av-space-8);
  box-shadow: var(--av-shadow-xl);
  animation: avFadeUp 480ms var(--av-ease-out) both;
}
.av-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--av-space-3);
  margin-bottom: var(--av-space-6);
  text-align: center;
}
.av-auth-brand img { height: 36px; width: auto; }
.av-auth-brand-name {
  font-family: var(--av-font-mono);
  font-weight: var(--av-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-text-strong);
  font-size: var(--av-fs-md);
}
.av-auth-brand-name em {
  color: var(--av-accent); font-style: normal;
}
.av-auth-card h1, .av-auth-card h2, .av-auth-card h3, .av-auth-card h4 {
  text-align: center; margin-bottom: var(--av-space-2);
}
.av-auth-card .av-auth-subtitle {
  text-align: center;
  color: var(--av-text-muted);
  margin-bottom: var(--av-space-6);
  font-size: var(--av-fs-sm);
}

/* OTP input (single field, big tracking) */
.otp-input {
  width: 100%;
  font-family: var(--av-font-mono);
  font-size: var(--av-fs-2xl);
  letter-spacing: 0.6em;
  text-align: center;
  padding: var(--av-space-4);
  background-color: var(--av-surface);
  border: 1px solid var(--av-border-strong);
  border-radius: var(--av-radius);
  color: var(--av-text-strong);
  transition: all var(--av-dur-fast) var(--av-ease);
}
.otp-input:focus {
  border-color: var(--av-accent);
  box-shadow: var(--av-ring);
  outline: none;
}

/* Btn-google compatibility (subdued in dark theme) */
.btn-google {
  background-color: var(--av-surface);
  color: var(--av-text);
  border: 1px solid var(--av-border-strong);
  padding: 10px 14px;
  border-radius: var(--av-radius-sm);
  font-weight: var(--av-fw-medium);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-space-2);
  transition: all var(--av-dur-fast) var(--av-ease);
}
.btn-google:hover {
  background-color: var(--av-surface-2);
  border-color: var(--av-border-strong);
  color: var(--av-text-strong);
}

/* Loading spinner inline */
.loading-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: avSpin 700ms linear infinite;
}
@keyframes avSpin { to { transform: rotate(360deg); } }

/* Form-busy state — applied by /js/av-form-busy.js to a submit button when
   its form is being submitted. The button is disabled, its text replaced
   with a spinner + "Saving…" so the operator gets immediate feedback that
   the click registered. */
.av-form-busy {
  cursor: wait;
  opacity: 0.85;
}
.av-form-busy__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: avSpin 700ms linear infinite;
  margin-right: 8px;
  vertical-align: -2px;
}
.av-form-busy__label { vertical-align: baseline; }
@media (prefers-reduced-motion: reduce) {
  .av-form-busy__spinner { animation: none; border-top-color: currentColor; opacity: 0.4; }
}

/* Payment status banner (refined) */
.payment-status {
  position: relative;
  width: 100%;
  text-align: center;
  padding: var(--av-space-3) var(--av-space-5);
  font-size: var(--av-fs-sm);
  font-weight: var(--av-fw-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-space-2);
  z-index: var(--av-z-sticky);
}
.payment-status::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 14px;
}
.payment-status.overdue {
  background-color: var(--av-warning-soft);
  color: var(--av-warning);
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
}
.payment-status.overdue::before { content: "\f071"; }
.payment-status.delinquent {
  background-color: var(--av-danger-soft);
  color: var(--av-danger);
  border-bottom: 1px solid rgba(248, 113, 113, 0.3);
}
.payment-status.delinquent::before { content: "\f06a"; }

/* Slot grid pattern (machine config / slot management) */
.av-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--av-space-3);
}
.av-slot-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--av-space-3) var(--av-space-3);
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  font-size: var(--av-fs-xs);
  transition: border-color var(--av-dur-fast) var(--av-ease),
              background-color var(--av-dur-fast) var(--av-ease),
              transform var(--av-dur-fast) var(--av-ease);
  text-decoration: none;
  color: var(--av-text);
  min-height: 88px;
  text-align: left;
}
.av-slot-tile:hover {
  border-color: var(--av-accent);
  background-color: var(--av-surface-2);
  transform: translateY(-1px);
  color: var(--av-text);
}
.av-slot-tile:focus-visible { outline: none; box-shadow: var(--av-ring); border-color: var(--av-accent); }
.av-slot-tile .av-slot-id {
  font-family: var(--av-font-mono);
  font-weight: var(--av-fw-bold);
  font-size: var(--av-fs-md);
  color: var(--av-accent);
}
.av-slot-tile .av-slot-name {
  font-weight: var(--av-fw-medium);
  color: var(--av-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.av-slot-tile .av-slot-meta {
  color: var(--av-text-muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

/* Card with status accent strip */
.card.card--ok       { border-top: 2px solid var(--av-success); }
.card.card--warn     { border-top: 2px solid var(--av-warning); }
.card.card--danger   { border-top: 2px solid var(--av-danger); }
.card.card--accent   { border-top: 2px solid var(--av-accent); }

/* Inline data emphasis (e.g., $ amounts) */
.av-mono { font-family: var(--av-font-mono); }
.av-amount, .av-amount-pos { color: var(--av-success); font-variant-numeric: tabular-nums; }
.av-amount-neg { color: var(--av-danger); font-variant-numeric: tabular-nums; }
.av-amount-neutral { color: var(--av-text); font-variant-numeric: tabular-nums; }

/* ---------- 10. Animations -------------------------------------------------- */

@keyframes avFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes avFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes avShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}
.av-anim-fade-up { animation: avFadeUp 320ms var(--av-ease-out) both; }
.av-anim-fade-in { animation: avFadeIn 220ms var(--av-ease) both; }
.av-anim-shake   { animation: avShake 600ms cubic-bezier(.36,.07,.19,.97) both; }
/* Bootstrap shorthand kept — fade -> avFadeIn-like, no transform */

/* ---------- 11. Utilities --------------------------------------------------- */

.text-muted, .text-secondary { color: var(--av-text-muted) !important; }
.text-subtle { color: var(--av-text-subtle) !important; }
.text-accent { color: var(--av-accent) !important; }
.text-success { color: var(--av-success) !important; }
.text-warning { color: var(--av-warning) !important; }
.text-danger  { color: var(--av-danger) !important; }
.text-info    { color: var(--av-info) !important; }

.bg-surface     { background-color: var(--av-surface) !important; }
.bg-surface-2   { background-color: var(--av-surface-2) !important; }
.bg-elev        { background-color: var(--av-bg-elev) !important; }

.border-soft    { border-color: var(--av-border) !important; }
.border-strong  { border-color: var(--av-border-strong) !important; }

.rounded     { border-radius: var(--av-radius) !important; }
.rounded-sm  { border-radius: var(--av-radius-sm) !important; }
.rounded-lg  { border-radius: var(--av-radius-lg) !important; }
.rounded-xl  { border-radius: var(--av-radius-xl) !important; }

.shadow-sm  { box-shadow: var(--av-shadow-sm) !important; }
.shadow     { box-shadow: var(--av-shadow) !important; }
.shadow-md  { box-shadow: var(--av-shadow-md) !important; }
.shadow-lg  { box-shadow: var(--av-shadow-lg) !important; }
.shadow-none{ box-shadow: none !important; }

.av-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--av-border-strong), transparent);
  margin: var(--av-space-5) 0;
}

.av-vh-divider { width: 1px; align-self: stretch; background-color: var(--av-border); }

.av-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--av-space-4); }
.av-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--av-space-4); }
.av-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--av-space-4); }
@media (max-width: 767.98px) {
  .av-grid-2, .av-grid-3 { grid-template-columns: 1fr; }
}

.av-eyebrow {
  display: inline-block;
  font-family: var(--av-font-mono);
  font-size: 11px;
  font-weight: var(--av-fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--av-accent);
  margin-bottom: var(--av-space-2);
}

/* Visually-hidden (accessibility) */
.av-sr-only, .visually-hidden {
  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;
}

/* Skip link for keyboard users */
.av-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background-color: var(--av-accent);
  color: var(--av-accent-ink);
  padding: var(--av-space-2) var(--av-space-4);
  font-weight: var(--av-fw-semibold);
  z-index: 9999;
  transition: top var(--av-dur) var(--av-ease);
}
.av-skip-link:focus { top: 0; color: var(--av-accent-ink); outline: none; box-shadow: var(--av-ring); }

/* ---------- 11a. Theme toggle icons ---------------------------------------- *
 * The toggle button in the top navbar contains both a sun and a moon icon
 * stacked. CSS shows the icon corresponding to the theme the click would
 * switch TO, so the icon doubles as an affordance hint. Default (dark theme,
 * no `data-theme` attribute) shows the sun.
 * --------------------------------------------------------------------------- */

.av-theme-toggle .av-theme-icon-moon { display: none; }
.av-theme-toggle .av-theme-icon-sun  { display: inline-block; }

:root[data-theme="light"] .av-theme-toggle .av-theme-icon-sun  { display: none; }
:root[data-theme="light"] .av-theme-toggle .av-theme-icon-moon { display: inline-block; }

/* ---------- 11b. Light theme component patches ----------------------------- *
 * Components whose icon/glyph colors live inside `data:` URLs (form-select
 * chevron, checkbox tick, radio dot, switch knob) and ambient effects whose
 * rgba alphas are tuned for dark surfaces (auth shell glow, modal backdrop)
 * cannot follow the token cascade. Patch them explicitly for light theme.
 * --------------------------------------------------------------------------- */

:root[data-theme="light"] .form-select {
  /* Slate-500 chevron — readable on white. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M3.5 5.5a.75.75 0 011.06 0L8 8.94l3.44-3.44a.75.75 0 011.06 1.06l-4 4a.75.75 0 01-1.06 0l-4-4a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .form-select:focus {
  /* Accent-on-light cyan-700 chevron. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230891b2'%3E%3Cpath d='M3.5 5.5a.75.75 0 011.06 0L8 8.94l3.44-3.44a.75.75 0 011.06 1.06l-4 4a.75.75 0 01-1.06 0l-4-4a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .form-check-input[type="checkbox"]:checked {
  /* White tick on the darker accent fill. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23ffffff'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .form-switch .form-check-input {
  /* Slate-500 knob on slate-200 track when off. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%2364748b'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* btn-close (Bootstrap modal close X) — invert filter only on dark theme. */
:root[data-theme="light"] .btn-close {
  filter: none;
  opacity: 0.55;
}
:root[data-theme="light"] .btn-close:hover { opacity: 1; }

/* Modal backdrop — slate at lower alpha for light theme so cards show through. */
:root[data-theme="light"] .modal-backdrop.show {
  background-color: #1f2937;
  opacity: 0.4;
}

/* Auth shell glow + dot grid — recolored for light. */
:root[data-theme="light"] .av-auth-shell::before {
  background-image:
    radial-gradient(800px 500px at 30% 20%, rgba(8, 145, 178, 0.08), transparent 60%),
    radial-gradient(700px 600px at 70% 80%, rgba(124, 58, 237, 0.06), transparent 60%);
}
:root[data-theme="light"] .av-auth-shell::after {
  background-image:
    linear-gradient(rgba(8, 145, 178, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 145, 178, 0.05) 1px, transparent 1px);
}

/* The fault report's metric icons drew the icon-wrapper bg at the dark accent
   tint; on light, lighten the tint so the icon stays cyan but the surface
   reads clean. (Token-driven; no explicit override needed — left here for
   reference.) */

/* Login / verify card "Welcome back" headings used hardcoded white text on
   a dark backdrop. With the auth shell now token-driven, text uses --av-text
   automatically. No override needed. */

/* Header-banner ::before linear cyan strip on cards — uses --av-accent and
   --av-accent-glow tokens, themes automatically. */

/* Slot-card hover transform / shadow — already token-driven. */

/* Pulsing operational status dot (.av-status-dot.is-pulse) animates
   currentColor; theme-neutral. */

/* ---------- 12. Print ------------------------------------------------------- */

@media print {
  body {
    background: white !important;
    color: #111 !important;
  }
  #sidebar, .sidebar, #topNavbar, .top-navbar, .menu-toggle, .filter-form, .av-toolbar,
  .page-actions, .btn, footer, .payment-status { display: none !important; }
  #mainContent, .main-content { margin: 0 !important; padding: 0 !important; }
  .card, .metric-card {
    background: white !important;
    color: #111 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  .table { color: #111 !important; }
  .table > thead > tr > th { color: #444 !important; background: #f3f3f3 !important; }
  a { color: #111 !important; text-decoration: underline; }
}

/* ---------- 12b. Page-specific patterns ------------------------------------ */
/*
 * Classes used by individual templates that we honor without restructuring
 * their markup. These map page-local conventions to the design system.
 */

/* labs.ftl — public-facing lab results gallery */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--av-space-5);
  padding: var(--av-space-2) 0 var(--av-space-8);
}
.product-card {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color var(--av-dur) var(--av-ease),
              transform var(--av-dur) var(--av-ease),
              box-shadow var(--av-dur) var(--av-ease);
}
.product-card:hover {
  border-color: var(--av-accent);
  transform: translateY(-2px);
  box-shadow: var(--av-shadow-md);
}
.product-card:focus-visible { outline: none; box-shadow: var(--av-ring); }
.product-image-container {
  position: relative;
  aspect-ratio: 4/3;
  background-color: var(--av-bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--av-border);
  overflow: hidden;
}
.product-image {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--av-dur-slow) var(--av-ease);
}
.product-card:hover .product-image { transform: scale(1.04); }
.product-image-container .no-image,
.no-image {
  font-size: 38px; color: var(--av-text-subtle);
}
.lab-badge {
  position: absolute;
  top: var(--av-space-3); right: var(--av-space-3);
  background-color: var(--av-success-soft);
  color: var(--av-success);
  border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 4px 10px;
  border-radius: var(--av-radius-pill);
  font-family: var(--av-font-mono);
  font-size: 10.5px;
  font-weight: var(--av-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
  backdrop-filter: blur(6px);
}
.product-info {
  padding: var(--av-space-4) var(--av-space-4) var(--av-space-4);
  display: flex; flex-direction: column; gap: var(--av-space-2);
  flex: 1 1 auto;
}
.product-name {
  font-size: var(--av-fs-md);
  font-weight: var(--av-fw-semibold);
  color: var(--av-text-strong);
  line-height: var(--av-lh-snug);
}
.product-brand {
  font-size: var(--av-fs-xs);
  color: var(--av-text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.view-lab-btn {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px;
  background-color: var(--av-accent-soft);
  color: var(--av-accent);
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: var(--av-radius-sm);
  font-size: var(--av-fs-sm);
  font-weight: var(--av-fw-semibold);
  cursor: pointer;
  transition: all var(--av-dur-fast) var(--av-ease);
}
.view-lab-btn:hover {
  background-color: var(--av-accent);
  color: var(--av-accent-ink);
  border-color: var(--av-accent);
}

/* labs.ftl + admin.ftl + verify.ftl banner header pattern */
.header {
  text-align: center;
  padding: var(--av-space-12) var(--av-space-6) var(--av-space-8);
  margin-bottom: var(--av-space-6);
  position: relative;
  border-bottom: 1px solid var(--av-border);
  background-image:
    radial-gradient(800px 300px at 50% 0%, rgba(34, 211, 238, 0.06), transparent 70%);
}
.header h1 {
  font-size: var(--av-fs-3xl);
  margin-bottom: var(--av-space-2);
  display: inline-flex; align-items: center; gap: var(--av-space-3);
}
.header h1 i { color: var(--av-accent); }
.header p {
  color: var(--av-text-muted);
  font-size: var(--av-fs-md);
  margin: 0;
}

/* labs.ftl — empty + spinner */
.empty-state {
  text-align: center;
  padding: var(--av-space-16) var(--av-space-6);
  color: var(--av-text-muted);
}
.empty-state i {
  font-size: 48px;
  color: var(--av-text-subtle);
  margin-bottom: var(--av-space-4);
}
.empty-state h2 {
  font-size: var(--av-fs-xl); color: var(--av-text); margin-bottom: var(--av-space-2);
}
.empty-state p { color: var(--av-text-muted); }

/* slotmanagement.ftl + similar */
.slotmanagement-header,
.products-header,
.suppliers-header,
.inventory-header,
.tickets-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--av-space-4);
  margin-bottom: var(--av-space-6);
  padding-bottom: var(--av-space-5);
  border-bottom: 1px solid var(--av-border);
}
.slotmanagement-header h1, .products-header h1, .suppliers-header h1,
.inventory-header h1, .tickets-header h1 {
  font-size: var(--av-fs-3xl);
  margin-bottom: var(--av-space-1);
}

.filter-section {
  margin-bottom: var(--av-space-5);
}
.filter-section .form-label {
  font-size: var(--av-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--av-text-muted);
  font-weight: var(--av-fw-semibold);
}

.slot-grid { padding-top: var(--av-space-2); }
.slot-card {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  padding: var(--av-space-4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--av-space-2);
  transition: border-color var(--av-dur-fast) var(--av-ease),
              transform var(--av-dur-fast) var(--av-ease),
              box-shadow var(--av-dur-fast) var(--av-ease);
  height: 100%;
}
.slot-card:hover {
  border-color: var(--av-accent);
  transform: translateY(-1px);
  box-shadow: var(--av-shadow-md);
}
.slot-card:focus-visible { outline: none; box-shadow: var(--av-ring); }
.slot-image-container {
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--av-bg-elev);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.slot-image-container img {
  width: 100%; height: 100%; object-fit: cover;
}
.slot-card h6 {
  font-family: var(--av-font-mono);
  font-size: var(--av-fs-md);
  font-weight: var(--av-fw-bold);
  color: var(--av-accent);
  margin: 4px 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.slot-card p {
  font-size: var(--av-fs-xs);
  color: var(--av-text-muted);
  margin: 0;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.slot-card p strong {
  color: var(--av-text);
  font-weight: var(--av-fw-medium);
}
.edit-slot-btn { margin-top: auto; }

/* loading spinner used in lab modal */
.modal-body .loading-spinner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--av-space-3);
  padding: var(--av-space-12) 0;
  color: var(--av-text-muted);
  width: auto; height: auto; border: none; border-top-color: transparent;
  animation: none;
}
.modal-body .loading-spinner i {
  font-size: 28px;
  color: var(--av-accent);
  animation: avSpin 700ms linear infinite;
}
.modal-body .loading-spinner p { margin: 0; font-size: var(--av-fs-sm); }

/* lab modal image */
.lab-image-container { display: flex; justify-content: center; }
.lab-image {
  max-width: 100%;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  background-color: var(--av-bg-elev);
}

/* admin.ftl pulses + form helpers (additive) */
.role-card, .user-card, .permission-card, .ticket-card {
  background-color: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  padding: var(--av-space-4);
  margin-bottom: var(--av-space-3);
  transition: border-color var(--av-dur) var(--av-ease);
}
.role-card:hover, .user-card:hover, .permission-card:hover, .ticket-card:hover {
  border-color: var(--av-border-strong);
}

/* /products — image gallery thumbnails */
.product-thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--av-radius);
  border: 1px solid var(--av-border);
  background-color: var(--av-bg-elev);
}

/* status row tinting (purchase orders legacy classes) — neutralized in favor of pills */
.status-pending, .status-ordered, .status-shipped,
.status-receiving, .status-complete { background-color: transparent !important; }

/* ---------- 13. High-contrast / forced colors ------------------------------ */

@media (forced-colors: active) {
  .btn { border: 1px solid CanvasText; }
  .av-pill, .badge { border: 1px solid CanvasText; }
  .card, .metric-card { border: 1px solid CanvasText; }
  .av-status-dot { outline: 1px solid CanvasText; }
}

/* Customer cell primitive (§3b) — name + small grey ID below */
.av-customer-cell {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 1px;
}
.av-customer-cell .av-customer-name {
    font-weight: 500;
    color: var(--av-text);
}
.av-customer-cell .av-customer-id {
    font-family: var(--av-font-mono);
    font-size: 11px;
    color: var(--av-text-muted);
    letter-spacing: 0.02em;
}

/* Server-side pagination control (§3c) */
.av-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--av-border);
    background: var(--av-surface);
    flex-wrap: wrap;
}
.av-pagination-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--av-border);
    border-radius: 6px;
    background: var(--av-surface);
    color: var(--av-text);
    font-size: 13px;
    text-decoration: none;
    transition: background 120ms ease;
}
.av-pagination-btn:hover {
    background: var(--av-surface-2);
    color: var(--av-text);
    text-decoration: none;
}
.av-pagination-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.av-pagination-info {
    color: var(--av-text-muted);
    font-size: 13px;
}
.av-pagination-info strong {
    color: var(--av-text);
    font-weight: 600;
    font-family: var(--av-font-mono);
}
.av-pagination-total {
    color: var(--av-text-muted);
    margin-left: 4px;
}
.av-pagination-size {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--av-text-muted);
    font-size: 13px;
}
.av-pagination-size-select {
    padding: 4px 8px;
    border: 1px solid var(--av-border);
    border-radius: 6px;
    background: var(--av-surface);
    color: var(--av-text);
    font-size: 13px;
}

/* §3e Tippy theme — matches dashboard tech aesthetic */
.tippy-box[data-theme~='av'] {
    background-color: var(--av-surface-2);
    color: var(--av-text);
    border: 1px solid var(--av-border);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.tippy-box[data-theme~='av'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--av-surface-2);
}
.tippy-box[data-theme~='av'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--av-surface-2);
}
.tippy-box[data-theme~='av'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--av-surface-2);
}
.tippy-box[data-theme~='av'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--av-surface-2);
}

/* §3f Empty-state primitives */
.av-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--av-text-muted);
    gap: 12px;
}
.av-empty-state__icon {
    font-size: 36px;
    color: var(--av-text-subtle);
    margin-bottom: 4px;
}
.av-empty-state__headline {
    font-size: 17px;
    font-weight: 600;
    color: var(--av-text);
}
.av-empty-state__explanation {
    font-size: 13px;
    color: var(--av-text-muted);
    max-width: 420px;
    line-height: 1.5;
}
.av-empty-state__cta {
    margin-top: 8px;
}
.av-empty-state--denied .av-empty-state__icon {
    color: var(--av-warning);
}
.av-empty-state--filter .av-empty-state__icon {
    color: var(--av-info);
}

/* §3g Loading skeletons */
@keyframes av-skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.av-skeleton {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--av-surface) 0%,
        var(--av-surface-2) 50%,
        var(--av-surface) 100%
    );
    background-size: 800px 100%;
    animation: av-skeleton-shimmer 1.4s infinite linear;
    border-radius: 4px;
    color: transparent;
    user-select: none;
}
.av-skeleton--text {
    height: 1em;
    width: 12ch;
}
.av-skeleton--text-lg {
    height: 1.4em;
    width: 18ch;
}
.av-skeleton--row {
    display: block;
    height: 36px;
    width: 100%;
    margin: 6px 0;
}
.av-skeleton--card {
    display: block;
    height: 120px;
    width: 100%;
    border-radius: var(--av-radius-md);
}
@media (prefers-reduced-motion: reduce) {
    .av-skeleton { animation: none; }
}

/* §3h Bulk-edit primitive — sticky bottom bar */
.av-bulk-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 100px);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--av-surface-2);
    border: 1px solid var(--av-border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.32);
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 150ms ease;
    opacity: 0;
    pointer-events: none;
}
.av-bulk-bar.av-bulk-bar--active {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
.av-bulk-bar__count {
    font-size: 13px;
    color: var(--av-text);
    font-weight: 500;
}
.av-bulk-bar__count [data-av-bulk-count] {
    font-family: var(--av-font-mono);
    color: var(--av-accent);
    font-weight: 700;
}
.av-bulk-bar__actions {
    display: flex;
    gap: 8px;
}

/* §3h Toast (undo / status) */
.av-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--av-surface-2);
    border: 1px solid var(--av-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    color: var(--av-text);
    font-size: 13px;
    animation: av-toast-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.av-toast--leaving {
    opacity: 0;
    transition: opacity 200ms ease;
}

/* ============================================================================
   jQuery UI autocomplete — themed to match the design system, on every page.
   Was previously overridden inline in slotedit.ftl/purchaseorders.ftl and was
   incomplete (only .ui-menu-item-wrapper was themed; the surrounding li / a
   elements still inherited jQuery UI's default #333 text on a dark surface,
   making items unreadable). Centralizing here so any page that uses jQuery UI
   autocomplete gets a consistent, readable dropdown.
   ========================================================================= */
.ui-autocomplete.ui-menu {
    z-index: 1090 !important;
    /* Use surface-2 for dark, plain white for light — page bg in light is
       also surface-2 (#f7f8fa) so the dropdown would blend in otherwise. */
    background: var(--av-surface-2) !important;
    color: var(--av-text) !important;
    border: 1px solid var(--av-border-strong) !important;
    border-radius: var(--av-radius) !important;
    box-shadow: var(--av-shadow-lg, 0 8px 32px rgba(0,0,0,0.4)) !important;
    padding: 4px !important;
    font-family: var(--av-font, inherit) !important;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}
[data-theme="light"] .ui-autocomplete.ui-menu {
    background: #ffffff !important;
    border-color: var(--av-border-strong) !important;
}
.ui-autocomplete.ui-menu .ui-menu-item {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}
.ui-autocomplete.ui-menu .ui-menu-item-wrapper,
.ui-autocomplete.ui-menu .ui-menu-item > a,
.ui-autocomplete.ui-menu .ui-menu-item > div {
    display: block !important;
    color: var(--av-text) !important;
    padding: 8px 12px !important;
    border-radius: var(--av-radius-xs, 4px) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1.4 !important;
}
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-hover,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-state-focus,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-state-hover,
.ui-autocomplete.ui-menu .ui-state-active,
.ui-autocomplete.ui-menu .ui-state-focus,
.ui-autocomplete.ui-menu .ui-state-hover {
    background: var(--av-accent-soft) !important;
    color: var(--av-accent) !important;
    border: none !important;
    margin: 0 !important;
    outline: none !important;
}
.ui-autocomplete.ui-menu .ui-menu-divider {
    border-top: 1px solid var(--av-border-soft, var(--av-border)) !important;
    margin: 4px 0 !important;
}
/* The screen-reader live region jQuery UI injects — keep it visually hidden
   even without the base jquery-ui.css. */
.ui-helper-hidden-accessible {
    border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
    overflow: hidden; padding: 0; position: absolute; width: 1px;
}
/* Kind variants — used by /js/av-toast.js. The default toast (no variant
   class) is the AvBulk Undo toast and stays neutral surface-2. */
.av-toast--success {
    border-left: 4px solid var(--av-success, #4ade80);
    padding-left: 12px;
}
.av-toast--success .av-toast__msg::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--av-success, #4ade80);
    margin-right: 8px;
}
.av-toast--error {
    border-left: 4px solid var(--av-danger, #f87171);
    padding-left: 12px;
}
.av-toast--error .av-toast__msg::before {
    content: "\f071"; /* fa-triangle-exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--av-danger, #f87171);
    margin-right: 8px;
}
.av-toast--info {
    border-left: 4px solid var(--av-accent);
    padding-left: 12px;
}
.av-toast--info .av-toast__msg::before {
    content: "\f05a"; /* fa-circle-info */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--av-accent);
    margin-right: 8px;
}
.av-toast__undo {
    background: var(--av-accent);
    color: var(--av-accent-ink);
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
}
.av-toast__undo:hover { background: var(--av-accent-hover); }
.av-toast__close {
    background: transparent;
    color: var(--av-text-muted);
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}
.av-toast__close:hover { color: var(--av-text); }
@keyframes av-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* §av-shortcuts — keyboard-shortcut help modal (open with ?) */
.av-shortcuts-modal .modal-content {
    background: var(--av-surface-2);
    border: 1px solid var(--av-border-strong);
    color: var(--av-text);
}
.av-shortcuts-section {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--av-text-muted);
    margin: 16px 0 8px;
}
.av-shortcuts-section:first-child { margin-top: 0; }
.av-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.av-shortcuts-table td {
    padding: 6px 0;
    border-bottom: 1px solid var(--av-border-soft, var(--av-border));
    vertical-align: middle;
}
.av-shortcuts-table tr:last-child td { border-bottom: none; }
.av-shortcuts-keys {
    width: 130px;
    white-space: nowrap;
    text-align: left;
}
.av-shortcuts-desc {
    color: var(--av-text);
    font-size: 13px;
}
.av-shortcuts-keys kbd {
    font-family: var(--av-font-mono, monospace);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--av-surface-3, var(--av-bg-elev));
    color: var(--av-text);
    border: 1px solid var(--av-border-strong);
    box-shadow: inset 0 -1px 0 var(--av-border);
    margin: 0 1px;
}
.av-shortcuts-plus {
    color: var(--av-text-muted);
    margin: 0 2px;
}

/* §av-filter-chips — active-filter display + clear-all affordance */
.av-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: var(--av-space-3, 12px);
    padding: 10px 12px;
    background: var(--av-accent-soft);
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: var(--av-radius);
}
.av-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: var(--av-surface-2);
    border: 1px solid var(--av-border-strong);
    border-radius: var(--av-radius-pill, 999px);
    font-size: 12px;
    color: var(--av-text);
    font-family: var(--av-font, inherit);
}
.av-filter-chip__label {
    color: var(--av-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    font-weight: var(--av-fw-semibold, 600);
}
.av-filter-chip__value {
    color: var(--av-text-strong);
    font-weight: var(--av-fw-medium, 500);
}
.av-filter-chip__remove {
    background: transparent;
    color: var(--av-text-muted);
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 4px;
}
.av-filter-chip__remove:hover {
    color: var(--av-danger);
    background: var(--av-danger-soft, rgba(248, 113, 113, 0.10));
}
.av-filter-chips__clear {
    background: transparent;
    color: var(--av-accent);
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: var(--av-fw-medium, 500);
    padding: 4px 8px;
    border-radius: var(--av-radius-xs, 4px);
    margin-left: auto;
}
.av-filter-chips__clear:hover {
    background: var(--av-accent-soft);
}

/* §av-density — compact table density (operators with lots of data).
   Activated via [data-density="compact"] on <html>; default is "cozy"
   (existing padding). Toggle in the top navbar. */
[data-density="compact"] .table > :not(caption) > * > *,
[data-density="compact"] .av-table-flush > :not(caption) > * > * {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
[data-density="compact"] .table th,
[data-density="compact"] .av-table-flush th {
    font-size: 10px !important;
}
[data-density="compact"] .card-body { padding: var(--av-space-3, 12px); }
[data-density="compact"] .metric-card { padding: var(--av-space-3, 12px); }
[data-density="compact"] .metric-value { font-size: var(--av-fs-3xl, 28px) !important; }

/* §4a Sale Detail page primitives */
.av-saledetail-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 16px 0 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.av-saledetail-hero h1 {
    margin: 4px 16px 4px 0;
    display: inline-block;
    font-family: var(--av-font-mono);
    font-weight: 700;
}
.av-saledetail-tabs { margin-bottom: 16px; }
.av-saledetail-content { padding-bottom: 32px; }

.av-defs {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    margin: 0;
}
.av-defs dt { color: var(--av-text-muted); font-weight: 500; font-size: 13px; }
.av-defs dd { margin: 0; text-align: right; font-family: var(--av-font-mono); }

.av-breadcrumb { margin: 16px 0 8px; font-size: 13px; }
.av-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; }

/* Vertical timeline (used by audit tab) */
.av-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--av-border);
    padding-left: 18px;
}
.av-timeline__item { position: relative; margin-bottom: 16px; padding-bottom: 8px; }
.av-timeline__dot {
    position: absolute;
    left: -23px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--av-accent);
    box-shadow: 0 0 0 2px var(--av-bg);
}
.av-timeline__meta { font-size: 12px; color: var(--av-text); margin-bottom: 4px; }
.av-timeline__body { color: var(--av-text); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* §4a Sale ID link styling within cart-row tables */
.av-saleid-link {
    color: var(--av-accent);
    text-decoration: none;
    font-family: var(--av-font-mono);
    font-weight: 600;
}
.av-saleid-link:hover { color: var(--av-accent-hover); text-decoration: underline; }

/* §4b Customer Detail polish — reuses §4a's .av-saledetail-hero, .av-defs, .av-timeline */
/* No new primitives needed; the page composes existing ones. */

.av-customer-cell--link {
    text-decoration: none;
    color: inherit;
}
.av-customer-cell--link:hover .av-customer-name {
    color: var(--av-accent);
    text-decoration: underline;
}

/* §4c Machine ID link styling */
.av-machineid-link {
    color: var(--av-accent);
    text-decoration: none;
    font-family: var(--av-font-mono);
    font-weight: 600;
}
.av-machineid-link:hover { color: var(--av-accent-hover); text-decoration: underline; }

/* §4g Attention panel */
.av-attention .card-header { background: var(--av-surface); border-bottom: 1px solid var(--av-border); }
.av-attention-list { display: flex; flex-direction: column; }
.av-attention-item { border-bottom: 1px solid var(--av-border-soft); }
.av-attention-item:last-child { border-bottom: none; }
.av-attention-item--high   { border-left: 3px solid var(--av-danger); }
.av-attention-item--medium { border-left: 3px solid var(--av-warning); }
.av-attention-item--low    { border-left: 3px solid var(--av-info); }
.av-attention-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--av-text);
    text-decoration: none;
    transition: background 120ms ease;
}
.av-attention-row:hover { background: var(--av-surface-2); color: var(--av-text); text-decoration: none; }
.av-attention-row > i { color: var(--av-text-muted); font-size: 14px; }
.av-attention-title { font-weight: 500; font-size: 14px; }
.av-attention-detail { color: var(--av-text-muted); font-size: 12px; font-family: var(--av-font-mono); }
.av-attention-clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--av-success-soft);
    color: var(--av-success);
    font-size: 13px;
    font-weight: 500;
}

/* Ticket #2 — dismissable warning banners (offline / low-stock).
   Compact one-row collapsed state; chevron rotates on expand. */
.av-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-left-width: 3px;
    border-radius: 8px;
    margin-bottom: var(--av-space-3);
    overflow: hidden;
    transition: box-shadow 120ms ease;
}
.av-banner:hover { box-shadow: var(--av-shadow-sm); }
.av-banner--danger { border-left-color: var(--av-danger); }
.av-banner--warn   { border-left-color: var(--av-warning); }
.av-banner-toggle {
    display: grid;
    grid-template-columns: 28px 1fr 16px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    color: var(--av-text);
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.av-banner-toggle:hover { background: var(--av-surface-2); }
.av-banner-toggle:focus-visible { outline: 2px solid var(--av-accent); outline-offset: -2px; }
.av-banner-icon { font-size: 16px; color: var(--av-text-muted); display: inline-flex; justify-content: center; }
.av-banner--danger .av-banner-icon { color: var(--av-danger); }
.av-banner--warn   .av-banner-icon { color: var(--av-warning); }
.av-banner-summary { font-size: 14px; }
.av-banner-summary strong { font-weight: 600; }
.av-banner-chevron { transition: transform 160ms ease; color: var(--av-text-muted); font-size: 12px; }
.av-banner.is-expanded .av-banner-chevron { transform: rotate(180deg); }
.av-banner-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--av-border-soft);
    color: var(--av-text-muted);
    cursor: pointer;
}
.av-banner-dismiss:hover { color: var(--av-text); background: var(--av-surface-2); }
.av-banner-body {
    grid-column: 1 / -1;
    border-top: 1px solid var(--av-border-soft);
    background: var(--av-surface);
    max-height: 320px;
    overflow-y: auto;
}
.av-banner-list { list-style: none; padding: 0; margin: 0; }
.av-banner-list > li { border-bottom: 1px solid var(--av-border-soft); }
.av-banner-list > li:last-child { border-bottom: none; }
.av-banner-list a {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 42px;
    color: var(--av-text);
    text-decoration: none;
    font-size: 13px;
}
.av-banner-list a:hover { background: var(--av-surface-2); color: var(--av-text); }
.av-banner-list-id { font-family: var(--av-font-mono); font-size: 12px; color: var(--av-text-strong); }
.av-banner-list-detail { color: var(--av-text-muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ticket #2 — persistent stock-health bar.
   Always visible when there are active slots; color shifts with health. */
.av-stockbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: 8px;
    margin-bottom: var(--av-space-5);
    font-size: 12px;
}
.av-stockbar-label { color: var(--av-text-muted); font-weight: 500; }
.av-stockbar-label > i { margin-right: 6px; }
.av-stockbar-track {
    height: 6px;
    background: var(--av-surface-2);
    border-radius: 999px;
    overflow: hidden;
    min-width: 80px;
}
.av-stockbar-fill {
    height: 100%;
    transition: width 240ms var(--av-ease);
}
.av-stockbar-fill--healthy  { background: var(--av-success); }
.av-stockbar-fill--warn     { background: var(--av-warning); }
.av-stockbar-fill--critical { background: var(--av-danger); }
.av-stockbar-value { color: var(--av-text-muted); font-family: var(--av-font-mono); }
.av-stockbar-value a { color: var(--av-warning); text-decoration: none; }
.av-stockbar-value a:hover { text-decoration: underline; }

/* Inline save-state indicator (subscription line items, etc.).
   Empty state collapses to no-op so the layout doesn't jump. */
.av-save-indicator {
    font-size: 12px;
    font-family: var(--av-font-mono);
    color: var(--av-text-muted);
    transition: color 120ms ease;
    min-width: 0;
}
.av-save-indicator[data-state="saving"] { color: var(--av-text-muted); }
.av-save-indicator[data-state="saving"]::before {
    content: ""; display: inline-block; width: 8px; height: 8px;
    margin-right: 6px; border-radius: 50%;
    background: var(--av-text-muted); animation: avPulse 0.9s ease-in-out infinite;
    vertical-align: middle;
}
.av-save-indicator[data-state="ok"] { color: var(--av-success); }
.av-save-indicator[data-state="ok"]::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-right: 4px;
}
.av-save-indicator[data-state="err"] { color: var(--av-danger); font-weight: 600; }
.av-save-indicator[data-state="err"]::before {
    content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-right: 4px;
}
@keyframes avPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1.0; transform: scale(1.0); }
}

/* Ticket #3 — shared tab strip across all logs sub-pages. */
.av-logs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--av-border);
    margin-bottom: var(--av-space-5);
    padding: 0 0 0 0;
}
.av-logs-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--av-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.av-logs-tab:hover { color: var(--av-text); background: var(--av-surface); text-decoration: none; }
.av-logs-tab.is-active {
    color: var(--av-accent);
    border-bottom-color: var(--av-accent);
}
.av-logs-tab > i { font-size: 12px; }

/* §4g KPI delta + sparkline */
.metric-delta {
    font-size: 11px;
    font-family: var(--av-font-mono);
    color: var(--av-text-muted);
    margin-top: 4px;
}
.metric-delta--up   { color: var(--av-success); }
.metric-delta--down { color: var(--av-danger); }
.metric-sparkline {
    margin-top: 6px;
    width: 100%;
    height: 28px;
}

/* ============================================================================
   §4o Login page polish (LOG1) + Error / Bad-requests polish (LOG2)
   ============================================================================ */

/* ---------- Login card extras ----------------------------------------------- */

/* Glowing beacon — purely decorative background orb */
.av-login-beacon {
    position: fixed;
    top: -15vh;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center,
        rgba(34, 211, 238, 0.12) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}
:root[data-theme="light"] .av-login-beacon {
    background: radial-gradient(ellipse at center,
        rgba(8, 145, 178, 0.08) 0%,
        transparent 70%);
}

/* Wider card for the redesigned login */
.av-login-card {
    max-width: 440px;
}

/* Logo container with a subtle glow ring */
.av-login-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--av-radius-xl);
    background-color: var(--av-surface-3);
    border: 1px solid var(--av-border-strong);
    box-shadow: 0 0 0 4px var(--av-accent-soft), var(--av-shadow-md);
    margin-bottom: var(--av-space-1);
}
.av-login-logo-wrap img {
    height: 36px;
    width: auto;
}

/* Tagline below brand name */
.av-login-tagline {
    font-size: var(--av-fs-xs);
    font-family: var(--av-font-mono);
    color: var(--av-text-subtle);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

/* Thin rule separating brand from form */
.av-login-rule {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--av-border-strong) 30%,
        var(--av-border-strong) 70%,
        transparent 100%);
    margin: var(--av-space-5) 0 var(--av-space-6);
}

/* Section heading inside the login card */
.av-login-heading {
    font-size: var(--av-fs-xl);
    font-weight: var(--av-fw-semibold);
    color: var(--av-text-strong);
    text-align: center;
    margin-bottom: var(--av-space-2);
}

/* Alert inside login */
.av-login-alert {
    display: flex;
    align-items: center;
    gap: var(--av-space-2);
    font-size: var(--av-fs-sm);
    border-radius: var(--av-radius);
    margin-bottom: var(--av-space-5);
}

/* Label */
.av-login-label {
    font-size: var(--av-fs-sm);
    font-weight: var(--av-fw-medium);
    color: var(--av-text);
    margin-bottom: var(--av-space-2);
    display: block;
}

/* Input wrapper with prefix icon */
.av-login-field {
    margin-bottom: var(--av-space-5);
}
.av-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.av-login-input-prefix {
    position: absolute;
    left: 14px;
    color: var(--av-text-muted);
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}
.av-login-input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    background-color: var(--av-surface);
    border: 1px solid var(--av-border-strong);
    border-radius: var(--av-radius);
    color: var(--av-text-strong);
    font-size: var(--av-fs-base);
    font-family: var(--av-font);
    transition: border-color var(--av-dur-fast) var(--av-ease),
                box-shadow var(--av-dur-fast) var(--av-ease);
}
.av-login-input::placeholder { color: var(--av-text-subtle); }
.av-login-input:focus {
    outline: none;
    border-color: var(--av-accent);
    box-shadow: var(--av-ring);
}
:root[data-theme="light"] .av-login-input {
    background-color: #ffffff;
}

/* Hint text */
.av-login-hint {
    font-size: var(--av-fs-xs);
    color: var(--av-text-subtle);
    margin-top: var(--av-space-2);
    margin-bottom: 0;
}

/* Full-width primary submit button */
.av-login-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--av-space-2);
    padding: 12px 20px;
    font-size: var(--av-fs-base);
    font-weight: var(--av-fw-semibold);
    letter-spacing: 0.01em;
    border-radius: var(--av-radius);
    transition: background-color var(--av-dur-fast) var(--av-ease),
                box-shadow var(--av-dur-fast) var(--av-ease),
                transform var(--av-dur-instant) var(--av-ease);
}
.av-login-submit:active { transform: translateY(1px); }
.av-login-submit-arrow { font-size: 12px; opacity: 0.7; }

/* "or" separator */
.av-login-sep {
    display: flex;
    align-items: center;
    gap: var(--av-space-3);
    margin: var(--av-space-5) 0;
    color: var(--av-text-subtle);
    font-size: var(--av-fs-xs);
    font-family: var(--av-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.av-login-sep::before,
.av-login-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--av-border);
}

/* Security note footer */
.av-login-footer-note {
    text-align: center;
    font-size: var(--av-fs-xs);
    color: var(--av-text-subtle);
    font-family: var(--av-font-mono);
    margin: var(--av-space-5) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--av-space-2);
}
.av-login-footer-note i { font-size: 11px; color: var(--av-accent); }

/* ---------- Standalone error page (error.ftl) -------------------------------- */

/* Wider max-width for the error card */
.av-errpage-card {
    max-width: 480px;
    text-align: center;
}

/* Icon circle */
.av-errpage-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 24px;
    margin: 0 auto var(--av-space-4);
}
.av-errpage-icon-wrap--error {
    background-color: var(--av-danger-soft);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: var(--av-danger);
}
.av-errpage-icon-wrap--warning {
    background-color: var(--av-warning-soft);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: var(--av-warning);
}
.av-errpage-icon-wrap--info {
    background-color: var(--av-info-soft);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: var(--av-info);
}

/* HTTP code badge */
.av-errpage-code {
    display: inline-block;
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-xs);
    font-weight: var(--av-fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--av-text-subtle);
    background-color: var(--av-surface-3);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-pill);
    padding: 3px 10px;
    margin-bottom: var(--av-space-3);
}

.av-errpage-heading {
    font-size: var(--av-fs-2xl);
    font-weight: var(--av-fw-semibold);
    color: var(--av-text-strong);
    margin-bottom: var(--av-space-3);
}

.av-errpage-explanation {
    font-size: var(--av-fs-sm);
    color: var(--av-text-muted);
    line-height: var(--av-lh-relaxed);
    margin-bottom: var(--av-space-6);
}

/* Collapsible error detail */
.av-errpage-detail {
    text-align: left;
    margin-bottom: var(--av-space-6);
}
.av-errpage-detail summary {
    font-size: var(--av-fs-sm);
    color: var(--av-text-muted);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--av-space-2);
    padding: var(--av-space-2) 0;
    user-select: none;
}
.av-errpage-detail summary::-webkit-details-marker { display: none; }
.av-errpage-detail summary:hover { color: var(--av-text); }
.av-errpage-pre {
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-xs);
    background-color: var(--av-bg-elev);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 12px 14px;
    color: var(--av-text-muted);
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: var(--av-space-2);
    margin-bottom: 0;
}

/* CTA row */
.av-errpage-actions {
    display: flex;
    gap: var(--av-space-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Bad-requests log (bad_requests.ftl) ------------------------------ */

/* av-badge used for counts */
.av-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-xs);
    font-weight: var(--av-fw-bold);
    line-height: 1;
    padding: 3px 7px;
    border-radius: var(--av-radius-pill);
    min-width: 22px;
}
.av-badge--danger {
    background-color: var(--av-danger-soft);
    color: var(--av-danger);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Top-endpoints list */
.av-brl-top-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--av-space-2);
}
.av-brl-top-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space-3);
    font-size: var(--av-fs-xs);
    padding: var(--av-space-2) var(--av-space-3);
    border-radius: var(--av-radius);
    background-color: var(--av-surface-3);
    border: 1px solid var(--av-border-soft);
}
.av-brl-top-ep {
    font-family: var(--av-font-mono);
    color: var(--av-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Request list */
.av-brl-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.av-brl-item {
    padding: var(--av-space-5) var(--av-space-5);
    border-bottom: 1px solid var(--av-border-soft);
    transition: background-color var(--av-dur-instant) var(--av-ease);
}
.av-brl-item:last-child { border-bottom: none; }
.av-brl-item:hover { background-color: var(--av-surface-2); }

.av-brl-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--av-space-3);
    margin-bottom: var(--av-space-3);
}
.av-brl-item-left {
    display: flex;
    align-items: center;
    gap: var(--av-space-2);
    min-width: 0;
}

/* HTTP method badge */
.av-brl-method {
    display: inline-block;
    font-family: var(--av-font-mono);
    font-size: 10px;
    font-weight: var(--av-fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--av-radius-xs);
    flex-shrink: 0;
}
.av-brl-method--get    { background: var(--av-info-soft);    color: var(--av-info);    border: 1px solid rgba(96,165,250,0.2); }
.av-brl-method--post   { background: var(--av-success-soft); color: var(--av-success); border: 1px solid rgba(52,211,153,0.2); }
.av-brl-method--put    { background: var(--av-warning-soft); color: var(--av-warning); border: 1px solid rgba(251,191,36,0.2); }
.av-brl-method--patch  { background: var(--av-warning-soft); color: var(--av-warning); border: 1px solid rgba(251,191,36,0.2); }
.av-brl-method--delete { background: var(--av-danger-soft);  color: var(--av-danger);  border: 1px solid rgba(248,113,113,0.2); }
.av-brl-method--head   { background: var(--av-neutral-soft); color: var(--av-neutral); border: 1px solid rgba(148,163,184,0.2); }

.av-brl-endpoint {
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-sm);
    color: var(--av-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.av-brl-ts {
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-xs);
    color: var(--av-text-subtle);
    display: flex;
    align-items: center;
    gap: var(--av-space-1);
    white-space: nowrap;
    flex-shrink: 0;
}

.av-brl-errmsg {
    font-size: var(--av-fs-sm);
    color: var(--av-danger);
    display: flex;
    align-items: flex-start;
    gap: var(--av-space-2);
    margin-bottom: var(--av-space-2);
}
.av-brl-errmsg i { flex-shrink: 0; margin-top: 2px; }

.av-brl-meta {
    font-size: var(--av-fs-xs);
    color: var(--av-text-muted);
    font-family: var(--av-font-mono);
    display: flex;
    align-items: center;
    gap: var(--av-space-2);
    margin-bottom: var(--av-space-2);
}

.av-brl-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--av-space-2);
    margin-top: var(--av-space-2);
}
.av-brl-expand {
    font-size: var(--av-fs-xs);
}
.av-brl-expand summary {
    cursor: pointer;
    color: var(--av-text-muted);
    font-weight: var(--av-fw-medium);
    list-style: none;
    padding: 3px 8px;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--av-space-1);
    user-select: none;
    transition: color var(--av-dur-instant) var(--av-ease),
                border-color var(--av-dur-instant) var(--av-ease);
}
.av-brl-expand summary::-webkit-details-marker { display: none; }
.av-brl-expand summary:hover {
    color: var(--av-text);
    border-color: var(--av-border-strong);
}
.av-brl-pre {
    font-family: var(--av-font-mono);
    font-size: 11px;
    background-color: var(--av-bg-elev);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 10px 12px;
    color: var(--av-text-muted);
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: var(--av-space-2);
    width: 100%;
}

/* Card section heading (shared) */
.av-card-section-heading {
    font-size: var(--av-fs-sm);
    font-weight: var(--av-fw-semibold);
    color: var(--av-text-muted);
    display: flex;
    align-items: center;
    gap: var(--av-space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.av-card-header {
    background-color: var(--av-surface);
    border-bottom: 1px solid var(--av-border);
    padding: var(--av-space-4) var(--av-space-5);
}

/* §4j Fault clustering — cascaded same-slot failures */
.av-fault-cluster-row > td {
    padding: 0.5rem 0.75rem !important;
    background-color: var(--av-surface-2);
}
.av-fault-cluster > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0;
    user-select: none;
}
.av-fault-cluster > summary::-webkit-details-marker { display: none; }
.av-fault-cluster > summary::before {
    content: "\25B6"; /* ▶ */
    font-size: 0.65em;
    color: var(--av-text-muted);
    margin-right: 0.35rem;
    transition: transform var(--av-dur-fast) var(--av-ease);
}
.av-fault-cluster[open] > summary::before {
    transform: rotate(90deg);
}
.av-fault-cluster__label {
    font-family: var(--av-font-mono);
    font-weight: var(--av-fw-semibold);
    color: var(--av-text);
}
.av-fault-cluster__inner {
    font-size: 0.85em;
    margin-left: 1.5rem;
    border-left: 2px solid var(--av-border);
    padding-left: 0.5rem;
}

/* §4e Sales report v2 — filter chips, group headers, cart-collapsed mode */
.av-sales-filters {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
}
.av-sales-filters-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.av-sales-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.av-sales-filter-label {
    color: var(--av-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.av-sales-chip {
    cursor: pointer;
    background: transparent;
    color: var(--av-text-muted);
    border: 1px solid var(--av-border);
    text-decoration: none;
}
.av-sales-chip:hover {
    background: var(--av-surface-2);
    color: var(--av-text);
    text-decoration: none;
}
.av-sales-chip--active {
    background: var(--av-accent);
    color: var(--av-accent-ink);
    border-color: var(--av-accent);
}
.av-sales-search {
    min-width: 220px;
}
.av-sales-quick {
    padding: 2px 10px;
    font-size: 12px;
}
.av-sales-group-header > td {
    background: var(--av-surface-2) !important;
    color: var(--av-text);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 6px 16px !important;
}
/* §4e v2 — cart-collapsed mode now renders server-side summary rows;
   the CSS-hide hack below is no longer reached. Kept as dead code in
   case a fallback path needs it.
.av-cart-table--collapsed > tbody > tr.av-cart-row:not(.av-cart-row--first) {
    display: none;
}
*/

/* §4f C3 customer typeahead */
.av-typeahead-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}
.av-typeahead-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--av-border-soft);
}
.av-typeahead-item:hover { background: var(--av-surface-2); }
.av-typeahead-item:last-child { border-bottom: none; }
.av-typeahead-name { font-weight: 500; }
.av-typeahead-phone { font-family: var(--av-font-mono); font-size: 11px; color: var(--av-text-muted); }

/* §4f C4 repeat-customer visit badge */
.av-customer-visits {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--av-accent-soft);
    color: var(--av-accent);
    border-radius: 999px;
    font-size: 10px;
    font-family: var(--av-font-mono);
    font-weight: 600;
    vertical-align: 1px;
}

/* §4f C5 PII mask */
.av-pii-toggle--active {
    color: var(--av-warning) !important;
    background: var(--av-warning-soft) !important;
}
body.av-pii-masked .av-customer-id {
    /* keep the ID visible — only the name is masked */
}

/* §4l Receipt template + print stylesheet */
.av-receipt-body {
    background: var(--av-bg);
    color: var(--av-text);
    padding: 32px;
    font-family: var(--av-font);
}
.av-receipt {
    max-width: 720px;
    margin: 0 auto;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: 12px;
    padding: 32px;
}
.av-receipt-header {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--av-border);
    padding-bottom: 16px;
    margin-bottom: 24px;
}
.av-receipt-logo {
    max-height: 48px;
    width: auto;
}
.av-receipt-business {
    font-size: 18px;
    font-weight: 700;
    color: var(--av-text);
}
.av-receipt-address {
    font-size: 12px;
    color: var(--av-text-muted);
}
.av-receipt-title {
    font-family: var(--av-font-mono);
    font-size: 22px;
    margin: 0 0 16px 0;
}
.av-receipt-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--av-text-muted);
}
.av-receipt-meta strong { color: var(--av-text); font-weight: 500; }
.av-receipt-items { width: 100%; border-collapse: collapse; }
.av-receipt-items th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--av-border);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--av-text-muted);
    letter-spacing: 0.04em;
}
.av-receipt-items td {
    padding: 8px;
    border-bottom: 1px solid var(--av-border-soft);
    font-family: var(--av-font-mono);
    font-size: 13px;
}
.av-receipt-items tfoot td { border-bottom: none; padding: 4px 8px; }
.av-receipt-total td {
    border-top: 2px solid var(--av-text) !important;
    font-weight: 700;
    font-size: 15px;
}
.av-receipt-item-failed { color: var(--av-text-muted); }
.av-receipt-item-failed em { color: var(--av-danger); font-style: normal; font-size: 11px; }
.av-receipt-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--av-border);
}
.av-receipt-actions {
    text-align: center;
    margin-top: 16px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

@media print {
    .no-print, .sidebar, .top-navbar, footer.app-footer { display: none !important; }
    body { background: white !important; color: black !important; padding: 0 !important; margin: 0 !important; }
    .av-receipt {
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        max-width: none;
        padding: 0 !important;
    }
    .av-receipt-business, .av-receipt-title, .av-receipt-meta strong { color: black !important; }
    .av-receipt-meta, .av-receipt-address { color: #555 !important; }
    .av-receipt-items td, .av-receipt-items th { color: black !important; border-color: #ccc !important; }
}

/* §4n Mobile sweep */
@media (max-width: 768px) {
    .av-saledetail-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .av-saledetail-hero h1 {
        font-size: 22px;
    }
    .av-saledetail-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .av-saledetail-tabs .nav-item {
        flex: 1 1 50%;
    }
    .av-saledetail-tabs .nav-link {
        text-align: center;
        font-size: 12px;
        padding: 6px 8px;
    }
    .av-defs {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
    .av-defs dd {
        text-align: left;
        margin-bottom: 8px;
    }
    .av-receipt {
        padding: 16px;
    }
    .av-attention-row {
        grid-template-columns: 24px 1fr auto;
        gap: 8px;
    }
    .av-sales-filters-form {
        flex-direction: column;
        align-items: stretch;
    }
    .av-sales-filter-group {
        flex-wrap: wrap;
    }
    .av-bulk-bar {
        bottom: 8px;
        left: 8px;
        right: 8px;
        transform: none;
        border-radius: var(--av-radius);
    }
    .av-bulk-bar.av-bulk-bar--active {
        transform: none;
    }
}

/* §4p Command palette */
.av-cmdk-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.av-cmdk {
    width: 600px;
    max-width: 92vw;
    background: var(--av-surface-2);
    border: 1px solid var(--av-border);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.av-cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--av-border);
}
.av-cmdk-input-wrap i { color: var(--av-text-muted); }
.av-cmdk-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--av-text);
    font-size: 16px;
    font-family: var(--av-font);
}
.av-cmdk-kbd, .av-cmdk-footer kbd {
    display: inline-block;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--av-font-mono);
    font-size: 11px;
    color: var(--av-text-muted);
}
.av-cmdk-results {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.av-cmdk-empty {
    padding: 24px;
    text-align: center;
    color: var(--av-text-muted);
    font-size: 13px;
}
.av-cmdk-group-name {
    padding: 8px 16px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--av-text-muted);
    font-weight: 600;
}
.av-cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--av-text);
}
.av-cmdk-item--active { background: var(--av-accent-soft); }
.av-cmdk-item > i {
    width: 16px;
    text-align: center;
    color: var(--av-text-muted);
}
.av-cmdk-item-label { font-size: 14px; font-weight: 500; }
.av-cmdk-item-sub { font-size: 11px; color: var(--av-text-muted); font-family: var(--av-font-mono); }
.av-cmdk-footer {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--av-border);
    color: var(--av-text-muted);
    font-size: 11px;
}