/* ===========================================================================
   IT Asset MSP — modern theme layer
   ---------------------------------------------------------------------------
   Loaded AFTER styles.css so it wins on equal specificity. Do not wrap any of
   this in @layer: styles.css is unlayered, and unlayered rules beat layered
   ones no matter the order.

   styles.css carries ~530 hardcoded `html.theme-dark .x{}` overrides and ~580
   !important declarations, so several rules here need !important purely to
   reach past that. Each one is there to win a specificity fight, not because
   the value is special.

   Structure
     1. Tokens (light / auto / explicit dark / explicit light)
     2. Canvas and typography
     3. Sidebar — layout, motion, theme switcher
     4. Surfaces: cards, panels, hero sections
     5. Tables
     6. Forms
     7. Buttons
     8. Modals, dropdowns, toasts
     9. Chips, badges, status pills
    10. Scrollbars, selection, focus ring
    11. Reduced motion
   =========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

/* ── 0. Brand hue ────────────────────────────────────────────────────────────
   The whole accent identity lives in these six values. styles.css spelled the
   red out ~40 times across "Red / White global theme overlay", "Premium midnight
   theme" and friends; here it is stated once, and swapping the palette is a
   six-line edit rather than a find-and-replace through 8,600 lines.

   Current values are a refined version of the existing red identity: same hue
   family, cleaner steps, and a dark-mode ramp that actually passes contrast
   instead of the washed-out rose the old theme used.
   ------------------------------------------------------------------------- */
:root {
  --brand-400: #f87171;
  --brand-500: #ef4444;
  --brand-600: #dc2626;
  --brand-700: #b91c1c;
  --brand-800: #991b1b;
  /* Secondary hue used for gradients and the "hi-tech" sheen. */
  --brand-alt: #f97316;
}

:root {
  color-scheme: light;

  /* Canvas and surfaces, lightest to most raised */
  --t-canvas: #f4f6fa;
  --t-canvas-tint-a: rgba(220, 38, 38, .07);
  --t-canvas-tint-b: rgba(249, 115, 22, .05);
  --t-surface: #ffffff;
  --t-surface-2: #f7f9fd;
  --t-surface-3: #eaeff7;
  --t-surface-glass: rgba(255, 255, 255, .78);

  --t-border: rgba(15, 23, 42, .10);
  --t-border-strong: rgba(15, 23, 42, .17);

  --t-text: #0d1526;
  --t-text-2: #46536a;
  --t-text-3: #6d7889;

  /* One accent family shared by both modes. The old tokens drifted into navy for
     light and rose for dark, which read as two different products. */
  --t-primary: var(--brand-600);
  --t-primary-strong: var(--brand-700);
  --t-primary-contrast: #ffffff;
  --t-primary-soft: rgba(220, 38, 38, .09);
  --t-primary-ring: rgba(220, 38, 38, .28);
  --t-accent: var(--brand-alt);

  --t-success: #0e9f6e;
  --t-success-soft: rgba(14, 159, 110, .12);
  --t-warning: #b45309;
  --t-warning-soft: rgba(180, 83, 9, .12);
  --t-danger: #dc2626;
  --t-danger-soft: rgba(220, 38, 38, .10);

  --t-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --t-shadow-sm: 0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --t-shadow-md: 0 10px 24px -8px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .05);
  --t-shadow-lg: 0 26px 54px -16px rgba(15, 23, 42, .24), 0 6px 14px rgba(15, 23, 42, .07);
  --t-shadow-glow: 0 10px 28px -10px rgba(79, 70, 229, .55);
  /* A hairline of light along the top edge is what makes a surface read as a
     physical panel rather than a flat rectangle. */
  --t-sheen: inset 0 1px 0 rgba(255, 255, 255, .9);

  --t-r-xs: 8px;
  --t-r-sm: 11px;
  --t-r-md: 15px;
  --t-r-lg: 20px;
  --t-r-xl: 26px;
  --t-r-pill: 999px;

  --t-ease: cubic-bezier(.22, 1, .36, 1);
  --t-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-dur-fast: 130ms;
  --t-dur: 210ms;
  --t-dur-slow: 380ms;

  --t-sidebar-rail: 76px;
  --t-sidebar-open: 278px;
  /* Shorter than --t-dur-slow: the sidebar opens on hover, so it is waited on
     rather than watched, and 380ms plus the hover delay read as sluggish. */
  --t-dur-sidebar: 250ms;
}

/* Auto mode before JS has stamped a class, and for anyone who never picks a
   mode. Excluded when the user explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    color-scheme: dark;

    --t-canvas: #0a0d14;
    --t-canvas-tint-a: rgba(220, 38, 38, .16);
    --t-canvas-tint-b: rgba(249, 115, 22, .08);
    --t-surface: #121722;
    --t-surface-2: #182030;
    --t-surface-3: #212b3d;
    --t-surface-glass: rgba(18, 23, 34, .82);

    --t-border: rgba(148, 163, 184, .15);
    --t-border-strong: rgba(148, 163, 184, .28);

    --t-text: #e9eff8;
    --t-text-2: #a9b7cb;
    --t-text-3: #8192a8;

    /* Lightened on dark so accent text and active states stay legible; button
       surfaces keep the saturated brand steps below. */
    --t-primary: var(--brand-400);
    --t-primary-strong: #fca5a5;
    --t-primary-contrast: #ffffff;
    --t-primary-soft: rgba(248, 113, 113, .14);
    --t-primary-ring: rgba(248, 113, 113, .36);
    --t-accent: #fb923c;

    --t-success: #34d399;
    --t-success-soft: rgba(52, 211, 153, .14);
    --t-warning: #fbbf24;
    --t-warning-soft: rgba(251, 191, 36, .14);
    --t-danger: #fb7185;
    --t-danger-soft: rgba(251, 113, 133, .14);

    --t-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --t-shadow-sm: 0 2px 6px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .3);
    --t-shadow-md: 0 12px 28px -10px rgba(0, 0, 0, .62), 0 2px 6px rgba(0, 0, 0, .4);
    --t-shadow-lg: 0 30px 60px -18px rgba(0, 0, 0, .72), 0 8px 18px rgba(0, 0, 0, .45);
    --t-shadow-glow: 0 10px 30px -10px rgba(139, 140, 247, .5);
    --t-sheen: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}

/* Explicit dark. Declared after the media block so the toggle always wins. */
html.theme-dark {
  color-scheme: dark;

  --t-canvas: #0a0d14;
  --t-canvas-tint-a: rgba(220, 38, 38, .16);
  --t-canvas-tint-b: rgba(249, 115, 22, .08);
  --t-surface: #121722;
  --t-surface-2: #182030;
  --t-surface-3: #212b3d;
  --t-surface-glass: rgba(18, 23, 34, .82);

  --t-border: rgba(148, 163, 184, .15);
  --t-border-strong: rgba(148, 163, 184, .28);

  --t-text: #e9eff8;
  --t-text-2: #a9b7cb;
  --t-text-3: #8192a8;

  --t-primary: var(--brand-400);
  --t-primary-strong: #fca5a5;
  --t-primary-contrast: #ffffff;
  --t-primary-soft: rgba(248, 113, 113, .14);
  --t-primary-ring: rgba(248, 113, 113, .36);
  --t-accent: #fb923c;

  --t-success: #34d399;
  --t-success-soft: rgba(52, 211, 153, .14);
  --t-warning: #fbbf24;
  --t-warning-soft: rgba(251, 191, 36, .14);
  --t-danger: #fb7185;
  --t-danger-soft: rgba(251, 113, 133, .14);

  --t-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --t-shadow-sm: 0 2px 6px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .3);
  --t-shadow-md: 0 12px 28px -10px rgba(0, 0, 0, .62), 0 2px 6px rgba(0, 0, 0, .4);
  --t-shadow-lg: 0 30px 60px -18px rgba(0, 0, 0, .72), 0 8px 18px rgba(0, 0, 0, .45);
  --t-shadow-glow: 0 10px 30px -10px rgba(139, 140, 247, .5);
  --t-sheen: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html.theme-light { color-scheme: light; }

/* Retire the three competing palettes in styles.css by pointing their tokens at
   this one. ~160 existing var() calls keep working and start following the
   active mode, including --app-* which never had a dark definition at all. */
:root,
html.theme-dark,
html.theme-light {
  --app-bg: var(--t-canvas);
  --app-surface: var(--t-surface);
  --app-surface-2: var(--t-surface-2);
  --app-border: var(--t-border);
  --app-text: var(--t-text);
  --app-muted: var(--t-text-3);
  --app-primary: var(--t-primary);
  --app-primary-2: var(--t-accent);
  --app-primary-3: var(--t-accent);
  --app-success: var(--t-success);
  --app-danger: var(--t-danger);
  --app-warning: var(--t-warning);
  --app-radius-lg: var(--t-r-lg);
  --app-radius-md: var(--t-r-md);
  --app-radius-sm: var(--t-r-sm);
  --app-shadow: var(--t-shadow-lg);
  --app-shadow-sm: var(--t-shadow-md);

  --ui-bg: var(--t-canvas);
  --ui-surface: var(--t-surface-glass);
  --ui-surface-solid: var(--t-surface);
  --ui-surface-raised: var(--t-surface-2);
  --ui-border: var(--t-border);
  --ui-border-strong: var(--t-border-strong);
  --ui-text: var(--t-text);
  --ui-text-secondary: var(--t-text-2);
  --ui-text-muted: var(--t-text-3);
  --ui-primary: var(--t-primary);
  --ui-primary-hover: var(--t-primary-strong);
  --ui-accent: var(--t-accent);
  --ui-success: var(--t-success);
  --ui-warning: var(--t-warning);
  --ui-danger: var(--t-danger);
  --ui-shadow: var(--t-shadow-md);
  --ui-shadow-raised: var(--t-shadow-lg);
  --ui-radius: var(--t-r-md);
  --ui-transition: var(--t-dur) var(--t-ease);
}

/* ── 2. Canvas and typography ────────────────────────────────────────────── */

html.theme-dark body,
html.theme-light body,
body.app-page,
body.app-auth-page,
html.theme-dark body.app-page {
  background: var(--t-canvas) !important;
  color: var(--t-text) !important;
  font-family: 'Bai Jamjuree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The ambient wash lives on its own fixed layer. Putting it on body with
   background-attachment:fixed repaints the whole gradient on every scroll
   frame, which is very visible on the long delivery and scanner tables. */
body.app-page::before,
body.app-auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 8% -12%, var(--t-canvas-tint-a), transparent 64%),
    radial-gradient(900px 520px at 100% 0%, var(--t-canvas-tint-b), transparent 60%);
}

body.app-auth-page::before {
  background:
    radial-gradient(1000px 560px at 50% -10%, var(--t-canvas-tint-a), transparent 62%),
    radial-gradient(760px 460px at 12% 100%, var(--t-canvas-tint-b), transparent 58%);
}

html.theme-dark h1, html.theme-dark h2, html.theme-dark h3,
html.theme-dark h4, html.theme-dark h5, html.theme-dark h6,
h1, h2, h3, h4, h5, h6 {
  color: var(--t-text);
  letter-spacing: -.015em;
}

html.theme-dark .text-muted,
html.theme-dark .app-muted,
.text-muted,
.app-muted { color: var(--t-text-3) !important; }

/* ── 3. Sidebar ──────────────────────────────────────────────────────────── */

.app-sidebar {
  background:
    linear-gradient(180deg, var(--t-surface-2) 0%, var(--t-surface) 62%, var(--t-surface-2) 100%) !important;
  border-right: 1px solid var(--t-border) !important;
  color: var(--t-text) !important;
  box-shadow: var(--t-shadow-sm) !important;
}

html.theme-dark body.app-page .app-sidebar,
html.theme-dark .app-sidebar {
  background:
    linear-gradient(180deg, #101a2b 0%, #0b1220 58%, #080e1a 100%) !important;
  border-right: 1px solid var(--t-border) !important;
  box-shadow: var(--t-shadow-md) !important;
}

.app-sidebar-brand { border-bottom: 1px solid var(--t-border) !important; }

.app-sidebar-title { color: var(--t-text); font-weight: 700; }

.app-sidebar-caption {
  color: var(--t-text-3) !important;
  letter-spacing: .16em;
  font-size: 10px;
  text-transform: uppercase;
}

.app-sidebar-link {
  color: var(--t-text-2) !important;
  border-radius: var(--t-r-sm) !important;
  font-weight: 500;
  position: relative;
}

.app-sidebar-link i { color: var(--t-text-3); }

.app-sidebar-link:hover {
  color: var(--t-text) !important;
  background: var(--t-surface-3) !important;
}

html.theme-dark .app-sidebar-link:hover,
html.theme-dark body.app-page .app-sidebar-link:hover {
  background: rgba(148, 163, 184, .10) !important;
  color: var(--t-text) !important;
}

.app-sidebar-link.is-active,
html.theme-dark .app-sidebar-link.is-active,
html.theme-dark body.app-page .app-sidebar-link.is-active {
  color: var(--t-primary-strong) !important;
  background: var(--t-primary-soft) !important;
  font-weight: 600;
}

.app-sidebar-link.is-active i,
.app-sidebar-link:hover i { color: inherit; }

/* Active marker rides the left edge instead of recolouring the whole row. */
.app-sidebar-link.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--t-primary);
  transform: translateY(-50%);
}

.app-sidebar-footer { border-top: 1px solid var(--t-border) !important; }

/* The original sidebar was a solid black panel with white text. Now that it is a
   light surface in light mode, every inherited white has to be reclaimed or the
   labels disappear against it. */
.app-sidebar-user,
body.app-page .app-sidebar-user {
  color: var(--t-text-2) !important;
  background: transparent !important;
  border-radius: var(--t-r-sm);
}

.app-sidebar-user small,
body.app-page .app-sidebar-user small { color: var(--t-text-3) !important; }

.app-sidebar-user span,
body.app-page .app-sidebar-user span,
.app-sidebar-user > i,
body.app-page .app-sidebar-user > i,
.app-sidebar-brand-text,
.app-sidebar-title { color: var(--t-text) !important; }

.app-sidebar-collapsed .app-sidebar-user,
body.app-page.app-sidebar-collapsed .app-sidebar-user {
  background: var(--t-primary-soft) !important;
  border-color: transparent !important;
}

.app-sidebar-action,
.app-sidebar-logout {
  color: var(--t-text-2) !important;
  border: 1px solid var(--t-border) !important;
  background: var(--t-surface-3) !important;
  border-radius: var(--t-r-sm) !important;
}

.app-sidebar-logout:hover {
  color: var(--t-danger) !important;
  border-color: var(--t-danger) !important;
  background: var(--t-danger-soft) !important;
}

/* Desktop rail. Below this width styles.css turns the sidebar into a top bar,
   and none of the rail geometry should apply. */
@media (min-width: 1181px) {
  /* The page reserves whatever the sidebar currently occupies, so opening it
     moves the content across instead of covering it. That costs a reflow per
     frame; the jank that used to come with it was actually the mismatched
     timings elsewhere in this block (links and labels snapping while the width
     animated), which are fixed below, so the push is affordable again. */
  .app-with-sidebar {
    padding-left: var(--t-sidebar-open) !important;
    transition: padding-left var(--t-dur-sidebar) var(--t-ease) !important;
  }

  .app-sidebar-collapsed.app-with-sidebar {
    padding-left: var(--t-sidebar-rail) !important;
  }

  .app-sidebar {
    width: var(--t-sidebar-open) !important;
    padding: 14px 12px !important;
    /* Stays hidden so labels are clipped by the rail rather than spilling over
       the page while the width animates. */
    overflow: hidden !important;
    transition:
      width var(--t-dur-sidebar) var(--t-ease),
      padding var(--t-dur-sidebar) var(--t-ease),
      box-shadow var(--t-dur-sidebar) var(--t-ease) !important;
  }

  .app-sidebar-collapsed .app-sidebar {
    width: var(--t-sidebar-rail) !important;
    padding: 14px 10px !important;
  }

  /* A light edge shadow while open reads as depth without implying it floats
     over anything, since it no longer does. */
  body:not(.app-sidebar-collapsed) .app-sidebar {
    box-shadow: var(--t-shadow-md) !important;
  }

  .app-sidebar-nav { overflow-x: hidden !important; }

  .app-sidebar-link {
    justify-content: flex-start !important;
    width: auto !important;
    padding: 9px 11px !important;
    min-height: 40px !important;
    gap: 12px !important;
    transition:
      background var(--t-dur) var(--t-ease),
      color var(--t-dur) var(--t-ease),
      padding var(--t-dur-sidebar) var(--t-ease) !important;
  }

  .app-sidebar-collapsed .app-sidebar-link {
    width: 52px !important;
    padding: 9px 0 !important;
    justify-content: center !important;
  }

  .app-sidebar-link i {
    flex: 0 0 20px;
    font-size: 1.05rem;
    text-align: center;
    transition: none;
  }

  /* Labels fade and slide rather than animating max-width. Width still has to
     collapse so the icons can centre, but opacity leads the motion so the text
     is gone well before the rail closes on it. */
  .app-sidebar-link span,
  .app-sidebar-user span,
  .app-sidebar-logout span,
  .app-sidebar-brand-text {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    max-width: 190px;
    transition:
      opacity var(--t-dur) var(--t-ease) 60ms,
      transform var(--t-dur-sidebar) var(--t-ease) 40ms,
      max-width var(--t-dur-sidebar) var(--t-ease) !important;
  }

  .app-sidebar-collapsed .app-sidebar-link span,
  .app-sidebar-collapsed .app-sidebar-user span,
  .app-sidebar-collapsed .app-sidebar-logout span,
  .app-sidebar-collapsed .app-sidebar-brand-text {
    opacity: 0;
    transform: translateX(-6px);
    max-width: 0;
    /* Collapsing: fade out first, no delay, so text never clips mid-word. */
    transition:
      opacity var(--t-dur-fast) var(--t-ease),
      transform var(--t-dur) var(--t-ease),
      max-width var(--t-dur-sidebar) var(--t-ease) !important;
  }

  /* styles.css hid the user block with display:none, which cannot transition and
     made the footer snap. It collapses like the nav labels instead, and its
     caption goes with it so nothing overflows the rail. */
  .app-sidebar-user > div {
    display: block !important;
    overflow: hidden;
    max-width: 160px;
    opacity: 1;
    transition:
      opacity var(--t-dur) var(--t-ease) 60ms,
      max-width var(--t-dur-sidebar) var(--t-ease) !important;
  }

  .app-sidebar-collapsed .app-sidebar-user > div {
    max-width: 0;
    opacity: 0;
    transition:
      opacity var(--t-dur-fast) var(--t-ease),
      max-width var(--t-dur-sidebar) var(--t-ease) !important;
  }

  .app-sidebar-user small { white-space: nowrap; }

  .app-sidebar-collapsed .app-sidebar-logout span { display: block !important; }

  .app-sidebar-user,
  .app-sidebar-logout,
  .app-sidebar-action {
    transition:
      width var(--t-dur-sidebar) var(--t-ease),
      background var(--t-dur) var(--t-ease),
      color var(--t-dur) var(--t-ease),
      border-color var(--t-dur) var(--t-ease) !important;
  }

  .app-sidebar-logo {
    transition: width var(--t-dur-sidebar) var(--t-ease), height var(--t-dur-sidebar) var(--t-ease) !important;
  }

}

/* Theme switcher — segmented Light / Auto / Dark control in the sidebar footer */
.app-theme-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--t-r-pill);
  background: var(--t-surface-3);
  border: 1px solid var(--t-border);
  overflow: hidden;
  transition: width var(--t-dur-sidebar) var(--t-ease);
}

.app-theme-switch-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--t-r-pill);
  background: transparent;
  color: var(--t-text-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-dur) var(--t-ease),
    color var(--t-dur) var(--t-ease),
    box-shadow var(--t-dur) var(--t-ease);
}

.app-theme-switch-btn i { font-size: 14px; }

.app-theme-switch-btn:hover { color: var(--t-text); }

.app-theme-switch-btn[aria-pressed="true"] {
  background: var(--t-surface);
  color: var(--t-primary-strong);
  box-shadow: var(--t-shadow-xs);
}

html.theme-dark .app-theme-switch-btn[aria-pressed="true"] {
  background: var(--t-surface-2);
  color: var(--t-primary-strong);
}

/* Three stacked buttons would eat most of the 76px rail, and the sidebar opens on
   hover anyway, so the switch simply folds away with the labels. */
@media (min-width: 1181px) {
  .app-theme-switch {
    max-height: 40px;
    opacity: 1;
    transition:
      max-height var(--t-dur-sidebar) var(--t-ease),
      opacity var(--t-dur) var(--t-ease) 60ms,
      margin var(--t-dur-sidebar) var(--t-ease),
      padding var(--t-dur-sidebar) var(--t-ease);
  }

  .app-sidebar-collapsed .app-theme-switch {
    max-height: 0;
    opacity: 0;
    margin-block: 0;
    padding-block: 0;
    border-width: 0;
    overflow: hidden;
    transition:
      max-height var(--t-dur-sidebar) var(--t-ease),
      opacity var(--t-dur-fast) var(--t-ease),
      margin var(--t-dur-sidebar) var(--t-ease),
      padding var(--t-dur-sidebar) var(--t-ease);
  }
}

/* Below 1181px styles.css turns the sidebar into a horizontal top bar, but it left
   the footer in its vertical column shape — on tablets that overflowed the 64px
   bar and clipped the logout button, and on phones it hid the footer outright so
   there was no way to sign out at all. Both widths get the same compact icon
   group pinned to the end of the bar. */
@media (max-width: 1180px) {
  body.app-page .app-sidebar {
    gap: 8px;
    padding-inline: .75rem !important;
  }

  body.app-page .app-sidebar-footer {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 0 0 8px !important;
    border-top: 0 !important;
    border-left: 1px solid var(--t-border) !important;
  }

  body.app-page .app-sidebar-user { display: none !important; }

  body.app-page .app-theme-switch {
    flex-direction: row !important;
    padding: 2px;
    gap: 0;
    max-height: none;
    opacity: 1;
  }

  body.app-page .app-theme-switch-btn {
    min-height: 34px;
    min-width: 34px;
    padding: 0 6px;
    flex: 0 0 auto;
  }

  body.app-page .app-theme-switch-btn span { display: none !important; }

  body.app-page .app-sidebar-actions { margin: 0 !important; }

  body.app-page .app-sidebar-logout {
    width: 36px !important;
    min-width: 36px !important;
    min-height: 36px;
    padding: 0 !important;
    justify-content: center;
  }

  body.app-page .app-sidebar-logout span { display: none !important; }

  /* The brand block is redundant next to the nav icons at this width. */
  body.app-page .app-sidebar-brand { display: none !important; }

  /* Hero art must not dominate the fold on a tablet. */
  .dashboard-asset { max-height: 140px; width: auto; margin-inline-start: auto; }
}

/* ── 4. Surfaces ─────────────────────────────────────────────────────────── */

.app-card,
.card.app-card,
html.theme-dark .app-card,
.dashboard-summary-panel,
.dashboard-range-panel,
.dashboard-ranking-card,
.dashboard-flow-card,
.branches-hero,
.app-panel {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-lg) !important;
  box-shadow: var(--t-shadow-sm), var(--t-sheen) !important;
  color: var(--t-text) !important;
  transition: box-shadow var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease);
}

.app-card:hover,
.dashboard-ranking-card:hover {
  box-shadow: var(--t-shadow-md), var(--t-sheen) !important;
  border-color: var(--t-border-strong) !important;
}

.app-card .card-header,
html.theme-dark .app-card .card-header,
html.theme-dark .app-card .card-header.bg-white {
  background: transparent !important;
  border-bottom: 1px solid var(--t-border) !important;
  color: var(--t-text) !important;
  padding-block: 1rem;
}

.app-card .card-header h1, .app-card .card-header h2,
.app-card .card-header h3, .app-card .card-header h4,
.app-card .card-header h5, .app-card .card-header h6,
html.theme-dark .app-card .card-header h4 { color: var(--t-text) !important; }

.app-card .card-header i { color: var(--t-primary) !important; }

/* Hero — the one place a saturated gradient earns its keep */
.dashboard-hero,
.branches-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--t-r-xl) !important;
  border: 1px solid var(--t-border) !important;
  background:
    linear-gradient(135deg, var(--t-primary) 0%, var(--t-accent) 100%) !important;
  color: #fff !important;
  box-shadow: var(--t-shadow-lg) !important;
}

.dashboard-hero::after,
.branches-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 320px at 88% -30%, rgba(255, 255, 255, .30), transparent 62%),
    radial-gradient(420px 260px at 4% 130%, rgba(0, 0, 0, .18), transparent 60%);
}

.dashboard-hero > *,
.branches-hero > * { position: relative; z-index: 1; }

.dashboard-title,
.branches-hero h2,
html.theme-dark .dashboard-title { color: #fff !important; letter-spacing: -.02em; }

.dashboard-lead,
.branches-hero p,
html.theme-dark .dashboard-lead { color: rgba(255, 255, 255, .88) !important; }

.dashboard-eyebrow {
  color: rgba(255, 255, 255, .78) !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.soft-badge {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  border-radius: var(--t-r-pill) !important;
  backdrop-filter: blur(6px);
}

.dashboard-section-title { color: var(--t-text) !important; font-weight: 700; }

/* Buttons sitting on the hero gradient. The default primary is itself a gradient
   and turns muddy against it, so they become glass instead. */
.dashboard-hero .btn-primary,
.dashboard-hero .app-btn-primary {
  background: #fff !important;
  color: var(--t-primary-strong) !important;
  box-shadow: var(--t-shadow-md) !important;
}

.dashboard-hero .btn-light,
.dashboard-hero .app-btn:not(.app-btn-primary) {
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
}

.dashboard-hero .btn-light:hover,
.dashboard-hero .app-btn:not(.app-btn-primary):hover {
  background: rgba(255, 255, 255, .26) !important;
  color: #fff !important;
}

/* Stat tiles */
.dashboard-branch-summary-item,
.dashboard-range-summary,
.dashboard-summary-total-wrap {
  background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-md) !important;
  color: var(--t-text) !important;
  transition: border-color var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease),
              box-shadow var(--t-dur) var(--t-ease);
}

.dashboard-branch-summary-item:hover,
.dashboard-range-summary:hover {
  border-color: var(--t-primary) !important;
  box-shadow: var(--t-shadow-sm) !important;
  transform: translateY(-1px);
}

.dashboard-branch-summary-label,
.dashboard-summary-total-label,
.dashboard-range-summary-label { color: var(--t-text-3) !important; }

.dashboard-summary-total,
.dashboard-branch-summary-item strong {
  color: var(--t-primary-strong) !important;
  font-variant-numeric: tabular-nums;
}

/* ── 5. Tables ───────────────────────────────────────────────────────────── */

.app-table,
.remote-table,
.computer-table,
.branch-table,
.delivery-table { color: var(--t-text) !important; border-color: var(--t-border) !important; }

.app-table thead th,
.remote-table thead th,
.computer-table thead th,
.branch-table thead th,
.app-sticky-head thead th,
html.theme-dark .app-table thead th,
html.theme-dark .app-sticky-head thead th {
  background: var(--t-surface-2) !important;
  color: var(--t-text-2) !important;
  border-bottom: 1px solid var(--t-border-strong) !important;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.app-table td,
.app-table th,
html.theme-dark .app-table td,
html.theme-dark .app-table th {
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
  vertical-align: middle;
}

.app-table tbody tr,
.remote-table tbody tr,
.computer-table tbody tr,
.branch-table tbody tr { transition: background var(--t-dur-fast) var(--t-ease); }

.app-table.table-hover tbody tr:hover > *,
.table-hover tbody tr:hover > * {
  background: var(--t-primary-soft) !important;
  color: var(--t-text) !important;
  --bs-table-accent-bg: transparent;
}

/* Zebra striping is easier to scan than hover alone on long lists. Bootstrap's
   own striping works through --bs-table-accent-bg, so it is neutralised here to
   stop the two systems stacking into a muddy double tint. */
.app-table tbody tr > * { --bs-table-accent-bg: transparent; }
.app-table tbody tr:nth-of-type(even) > * { background-color: var(--t-surface-2); }
.app-table tbody tr:nth-of-type(odd) > * { background-color: transparent; }

.table-responsive {
  border-radius: var(--t-r-md);
  border: 1px solid var(--t-border);
  background: var(--t-surface);
}

.card .table-responsive { border: 0; border-radius: 0; background: transparent; }

/* ── 6. Forms ────────────────────────────────────────────────────────────── */

.app-input, .app-select, .app-textarea,
.form-control, .form-select,
html.theme-dark .app-input, html.theme-dark .app-select, html.theme-dark .app-textarea,
html.theme-dark .form-control, html.theme-dark .form-select,
html.theme-dark .modal-content .app-input, html.theme-dark .modal-content .app-select {
  background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border-strong) !important;
  border-radius: var(--t-r-sm) !important;
  color: var(--t-text) !important;
  box-shadow: none !important;
  transition:
    border-color var(--t-dur) var(--t-ease),
    box-shadow var(--t-dur) var(--t-ease),
    background var(--t-dur) var(--t-ease) !important;
}

.app-input:hover, .app-select:hover, .form-control:hover, .form-select:hover {
  border-color: var(--t-border-strong) !important;
  background: var(--t-surface) !important;
}

.app-input:focus, .app-select:focus, .app-textarea:focus,
.form-control:focus, .form-select:focus,
html.theme-dark .form-control:focus, html.theme-dark .form-select:focus {
  background: var(--t-surface) !important;
  border-color: var(--t-primary) !important;
  box-shadow: 0 0 0 3px var(--t-primary-ring) !important;
  outline: none !important;
}

.app-input::placeholder, .app-textarea::placeholder,
.form-control::placeholder,
html.theme-dark .app-input::placeholder,
html.theme-dark .form-control::placeholder { color: var(--t-text-3) !important; opacity: 1; }

.form-label, .form-check-label,
html.theme-dark .form-label, html.theme-dark .form-check-label,
html.theme-dark .modal-content .form-label {
  color: var(--t-text-2) !important;
  font-weight: 600;
  font-size: .86rem;
}

.form-text, html.theme-dark .form-text { color: var(--t-text-3) !important; }

.input-group-text, html.theme-dark .input-group-text {
  background: var(--t-surface-3) !important;
  border-color: var(--t-border-strong) !important;
  color: var(--t-text-2) !important;
}

.form-check-input {
  background-color: var(--t-surface-2);
  border-color: var(--t-border-strong);
}

.form-check-input:checked {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
}

.form-check-input:focus {
  border-color: var(--t-primary);
  box-shadow: 0 0 0 3px var(--t-primary-ring);
}

/* ── 7. Buttons ──────────────────────────────────────────────────────────── */

.app-btn, .btn {
  border-radius: var(--t-r-sm) !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition:
    transform var(--t-dur-fast) var(--t-ease),
    box-shadow var(--t-dur) var(--t-ease),
    background var(--t-dur) var(--t-ease),
    border-color var(--t-dur) var(--t-ease),
    color var(--t-dur) var(--t-ease) !important;
}

.app-btn:active, .btn:active { transform: translateY(1px); }

.btn-primary, .app-btn-primary,
html.theme-dark .btn-primary, html.theme-dark .app-btn-primary {
  background: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-strong) 100%) !important;
  border: 1px solid transparent !important;
  color: var(--t-primary-contrast) !important;
  box-shadow: var(--t-shadow-glow) !important;
}

.btn-primary:hover, .app-btn-primary:hover {
  filter: brightness(1.07);
  box-shadow: var(--t-shadow-glow), var(--t-shadow-sm) !important;
}

.btn-light, .btn-secondary, .app-btn-outline, .btn-outline-primary {
  background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border-strong) !important;
  color: var(--t-text) !important;
  box-shadow: none !important;
}

.btn-light:hover, .btn-secondary:hover, .app-btn-outline:hover, .btn-outline-primary:hover {
  background: var(--t-surface-3) !important;
  border-color: var(--t-primary) !important;
  color: var(--t-primary-strong) !important;
}

.btn-danger { background: var(--t-danger) !important; border-color: transparent !important; color: #fff !important; }
.btn-warning { background: var(--t-warning) !important; border-color: transparent !important; color: #fff !important; }
.btn-success { background: var(--t-success) !important; border-color: transparent !important; color: #fff !important; }

.btn-danger:hover, .btn-warning:hover, .btn-success:hover { filter: brightness(1.08); }

.btn-outline-danger {
  border-color: var(--t-danger) !important;
  color: var(--t-danger) !important;
  background: transparent !important;
}
.btn-outline-danger:hover { background: var(--t-danger-soft) !important; }

.app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: var(--t-r-xs) !important;
}

.app-action-buttons { display: inline-flex; gap: 6px; }

/* Floating action button */
.app-fab-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--t-r-pill) !important;
  box-shadow: var(--t-shadow-lg), var(--t-shadow-glow) !important;
}

/* ── 8. Modals, dropdowns, toasts ────────────────────────────────────────── */

.modal-content, html.theme-dark .modal-content {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-lg) !important;
  box-shadow: var(--t-shadow-lg) !important;
  color: var(--t-text) !important;
}

.modal-header, .modal-footer,
html.theme-dark .modal-header, html.theme-dark .modal-footer {
  background: transparent !important;
  border-color: var(--t-border) !important;
}

.modal-title, html.theme-dark .modal-title { color: var(--t-text) !important; font-weight: 700; }
.modal-body, html.theme-dark .modal-body { color: var(--t-text) !important; }

.modal-backdrop.show { backdrop-filter: blur(3px); opacity: .55; }

html.theme-dark .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

.dropdown-menu, html.theme-dark .dropdown-menu {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-md) !important;
  box-shadow: var(--t-shadow-lg) !important;
  color: var(--t-text) !important;
}

.dropdown-item, html.theme-dark .dropdown-item { color: var(--t-text-2) !important; border-radius: var(--t-r-xs); }

.dropdown-item:hover, .dropdown-item:focus,
html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus {
  background: var(--t-primary-soft) !important;
  color: var(--t-primary-strong) !important;
}

.toast {
  border-radius: var(--t-r-md) !important;
  box-shadow: var(--t-shadow-lg) !important;
  border: 1px solid var(--t-border) !important;
  overflow: hidden;
}

.app-ellipsis-popover {
  position: absolute;
  z-index: 2000;
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-md) !important;
  box-shadow: var(--t-shadow-lg) !important;
  padding: 10px;
  color: var(--t-text);
}

/* Loading bar: styles.css already animates this with transform: scaleX, which is
   the cheap way to do it. Only the paint is restyled here. */
#globalLoadingBar {
  height: 2px;
  background: linear-gradient(90deg, var(--t-primary), var(--t-accent)) !important;
  box-shadow: 0 0 12px var(--t-primary-ring);
}

/* ── 9. Chips, badges, status pills ──────────────────────────────────────── */

.app-chip, html.theme-dark .app-chip {
  background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-text-2) !important;
  border-radius: var(--t-r-pill) !important;
}

.app-chip-btn:hover, html.theme-dark .app-chip-btn:hover {
  background: var(--t-primary-soft) !important;
  border-color: var(--t-primary) !important;
  color: var(--t-primary-strong) !important;
}

.badge { border-radius: var(--t-r-pill) !important; font-weight: 600; letter-spacing: .01em; }

.text-bg-primary { background: var(--t-primary) !important; color: var(--t-primary-contrast) !important; }
.text-bg-success { background: var(--t-success) !important; color: #06281c !important; }
.text-bg-danger  { background: var(--t-danger) !important; color: #2b0708 !important; }
.text-bg-warning { background: var(--t-warning) !important; color: #2b1a02 !important; }

.ready-detail-status.is-ready,
body.app-page .ready-detail-status.is-ready {
  color: var(--t-success) !important;
  background: var(--t-success-soft) !important;
  border: 1px solid var(--t-success) !important;
  border-radius: var(--t-r-pill) !important;
}

.ready-detail-status.is-exported,
body.app-page .ready-detail-status.is-exported {
  color: var(--t-warning) !important;
  background: var(--t-warning-soft) !important;
  border: 1px solid var(--t-warning) !important;
  border-radius: var(--t-r-pill) !important;
}

.delivery-status-select.is-sent {
  color: var(--t-primary-strong) !important;
  border-color: var(--t-primary) !important;
  background: var(--t-primary-soft) !important;
}

.delivery-status-select.is-returned {
  color: var(--t-success) !important;
  border-color: var(--t-success) !important;
  background: var(--t-success-soft) !important;
}

/* Login card */
.app-auth-card {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-xl) !important;
  box-shadow: var(--t-shadow-lg), var(--t-sheen) !important;
  color: var(--t-text) !important;
}

.auth-brand-title {
  background: linear-gradient(120deg, var(--t-primary), var(--t-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 800;
  letter-spacing: -.02em;
}

.auth-subtitle { color: var(--t-text-3) !important; }

.auth-badge {
  background: var(--t-primary-soft) !important;
  border: 1px solid var(--t-primary) !important;
  color: var(--t-primary-strong) !important;
  border-radius: var(--t-r-pill) !important;
}

/* ── 10. Scrollbars, selection, focus ────────────────────────────────────── */

html { scrollbar-color: var(--t-border-strong) transparent; scrollbar-width: thin; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--t-border-strong);
  border-radius: var(--t-r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--t-text-3); background-clip: content-box; }

::selection { background: var(--t-primary-ring); color: var(--t-text); }

/* One visible, consistent keyboard focus ring. styles.css removed outlines in
   several places, which left keyboard users with no indication at all. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.app-sidebar-link:focus-visible {
  outline: 2px solid var(--t-primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--t-r-xs);
}

/* ── 11. Specificity bridge over the legacy overlays ─────────────────────────
   styles.css applies its red identity through `body.app-page .x { … !important }`
   (sections "Red / White global theme overlay", "Auth page red/white polish",
   "Premium midnight theme"). Those selectors outrank a plain `.x` no matter how
   many !important flags it carries, so the rules below restate the token-driven
   values at matching weight. `html.theme-light` / `html.theme-dark` are always
   present because applyTheme() stamps one of them before first paint.
   ------------------------------------------------------------------------- */

html.theme-light body.app-page .dashboard-hero,
html.theme-dark body.app-page .dashboard-hero,
html.theme-light body.app-page .page-hero,
html.theme-dark body.app-page .page-hero,
html.theme-light body.app-page .branches-hero,
html.theme-dark body.app-page .branches-hero,
html.theme-light body.app-page .remote-hero,
html.theme-dark body.app-page .remote-hero,
html.theme-light body.app-page .tool-hero,
html.theme-dark body.app-page .tool-hero,
html.theme-light body.app-page .computer-hero,
html.theme-dark body.app-page .computer-hero,
html.theme-light body.app-page .hero,
html.theme-dark body.app-page .hero,
html.theme-light body.app-page .branch-detail-hero,
html.theme-dark body.app-page .branch-detail-hero {
  /* Stops at --brand-600. Running the ramp into --brand-alt looked livelier but
     dropped white text to 2.9:1 at the warm end; every stop here keeps white at
     5.9:1 or better. The orange survives as a low-alpha highlight in ::after. */
  background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-700) 48%, var(--brand-600) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: var(--t-r-xl) !important;
  box-shadow: var(--t-shadow-lg) !important;
  color: #fff !important;
  /* Stated here because the variants carry four different paddings in styles.css,
     which left trailing badges sitting flush against the rounded edge. */
  padding: 1.35rem 1.6rem !important;
  position: relative;
  overflow: hidden;
}

html.theme-light body.app-page .dashboard-hero::after,
html.theme-dark body.app-page .dashboard-hero::after,
html.theme-light body.app-page .page-hero::after,
html.theme-dark body.app-page .page-hero::after,
html.theme-light body.app-page .branches-hero::after,
html.theme-dark body.app-page .branches-hero::after,
html.theme-light body.app-page .tool-hero::after,
html.theme-dark body.app-page .tool-hero::after,
html.theme-light body.app-page .computer-hero::after,
html.theme-dark body.app-page .computer-hero::after,
html.theme-light body.app-page .hero::after,
html.theme-dark body.app-page .hero::after {
  background:
    radial-gradient(620px 320px at 88% -30%, rgba(255, 255, 255, .22), transparent 62%),
    radial-gradient(520px 300px at 96% 120%, rgba(249, 115, 22, .30), transparent 64%),
    radial-gradient(420px 260px at 4% 130%, rgba(0, 0, 0, .22), transparent 60%) !important;
}

html.theme-light body.app-page .btn-primary,
html.theme-dark body.app-page .btn-primary,
html.theme-light body.app-page .app-btn-primary,
html.theme-dark body.app-page .app-btn-primary,
html.theme-light body.app-auth-page .btn-primary,
html.theme-dark body.app-auth-page .btn-primary,
html.theme-light body.app-auth-page .app-btn-primary,
html.theme-dark body.app-auth-page .app-btn-primary {
  /* Saturated brand steps in both modes so white button text keeps its contrast
     rather than riding the lighter accent used for text elsewhere in dark. */
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -8px rgba(220, 38, 38, .55) !important;
}

html.theme-light body.app-page .btn-primary:hover,
html.theme-dark body.app-page .btn-primary:hover,
html.theme-light body.app-page .app-btn-primary:hover,
html.theme-dark body.app-page .app-btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%) !important;
}

html.theme-light body.app-page .btn-outline-primary,
html.theme-dark body.app-page .btn-outline-primary,
html.theme-light body.app-page .app-btn-outline,
html.theme-dark body.app-page .app-btn-outline {
  background: transparent !important;
  border: 1px solid var(--t-border-strong) !important;
  color: var(--t-primary) !important;
}

html.theme-light body.app-page .btn-outline-primary:hover,
html.theme-dark body.app-page .btn-outline-primary:hover,
html.theme-light body.app-page .app-btn-outline:hover,
html.theme-dark body.app-page .app-btn-outline:hover {
  background: var(--t-primary-soft) !important;
  border-color: var(--t-primary) !important;
  color: var(--t-primary-strong) !important;
}

html.theme-light body.app-page .app-card,
html.theme-dark body.app-page .app-card,
html.theme-light body.app-page .modal-content,
html.theme-dark body.app-page .modal-content,
html.theme-light body.app-page .panel,
html.theme-dark body.app-page .panel,
html.theme-light body.app-page .summary-card,
html.theme-dark body.app-page .summary-card,
html.theme-light body.app-page .branch-card,
html.theme-dark body.app-page .branch-card,
html.theme-light body.app-page .detail-card,
html.theme-dark body.app-page .detail-card,
html.theme-light body.app-page .tool-card,
html.theme-dark body.app-page .tool-card {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-lg) !important;
  box-shadow: var(--t-shadow-sm) !important;
  backdrop-filter: none !important;
}

/* Ready Equipment summary tiles had a page-specific white background with
   !important in styles.css, so they ignored the shared dark surface tokens. */
html.theme-dark body.app-page .ready-summary-grid .app-stat-card {
  background: linear-gradient(135deg, var(--t-surface) 0%, var(--t-surface-2) 100%) !important;
  border-color: var(--t-border) !important;
  box-shadow: var(--t-shadow-sm) !important;
  color: var(--t-text) !important;
}

html.theme-dark body.app-page .ready-summary-grid .app-stat-card small {
  color: var(--t-text-2) !important;
}

html.theme-dark body.app-page .ready-summary-grid .app-stat-card strong {
  color: var(--t-text) !important;
}

html.theme-dark body.app-page .ready-summary-grid .app-stat-card span {
  color: var(--t-text-3) !important;
}

html.theme-dark body.app-page .ready-summary-grid .app-stat-card::after {
  color: var(--t-border-strong) !important;
}

/* Keep dashboard chart points and ranking numbers readable on dark surfaces. */
html.theme-dark body.app-page .dashboard-line-chart line {
  stroke: var(--t-border-strong) !important;
}

html.theme-dark body.app-page .dashboard-line-chart polyline {
  stroke: var(--t-primary-strong) !important;
  fill: none !important;
}

html.theme-dark body.app-page .dashboard-line-chart circle {
  fill: var(--t-surface-2) !important;
  stroke: var(--t-primary-strong) !important;
}

html.theme-dark body.app-page .dashboard-line-chart text {
  fill: var(--t-text) !important;
}

html.theme-dark body.app-page .dashboard-line-chart .dashboard-line-label {
  fill: var(--t-text-3) !important;
}

html.theme-dark body.app-page .dashboard-flow-card {
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
  box-shadow: var(--t-shadow-sm) !important;
}

html.theme-dark body.app-page .dashboard-ranking-card .dashboard-rank-number {
  background: var(--t-surface-3) !important;
  border: 1px solid var(--t-border-strong) !important;
  color: var(--t-text) !important;
}

html.theme-dark body.app-page:has(#registerModal) .ready-table-wrap {
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
  box-shadow: var(--t-shadow-sm) !important;
}

html.theme-light body.app-page .app-card > .card-header,
html.theme-dark body.app-page .app-card > .card-header,
html.theme-light body.app-page .card.app-card > .card-header,
html.theme-dark body.app-page .card.app-card > .card-header,
html.theme-light body.app-page .app-card .card-header.bg-white,
html.theme-dark body.app-page .app-card .card-header.bg-white,
html.theme-light body.app-page .modal-header,
html.theme-dark body.app-page .modal-header,
html.theme-light body.app-page .modal-footer,
html.theme-dark body.app-page .modal-footer,
html.theme-light body.app-page .panel-head,
html.theme-dark body.app-page .panel-head,
html.theme-light body.app-page .detail-card-header,
html.theme-dark body.app-page .detail-card-header {
  background: transparent !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}

html.theme-light body.app-page .app-input,
html.theme-dark body.app-page .app-input,
html.theme-light body.app-page .app-select,
html.theme-dark body.app-page .app-select,
html.theme-light body.app-page .app-textarea,
html.theme-dark body.app-page .app-textarea,
html.theme-light body.app-page .form-control,
html.theme-dark body.app-page .form-control,
html.theme-light body.app-page .form-select,
html.theme-dark body.app-page .form-select {
  background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border-strong) !important;
  border-radius: var(--t-r-sm) !important;
  color: var(--t-text) !important;
  box-shadow: none !important;
}

html.theme-light body.app-page .app-input:focus,
html.theme-dark body.app-page .app-input:focus,
html.theme-light body.app-page .app-select:focus,
html.theme-dark body.app-page .app-select:focus,
html.theme-light body.app-page .app-textarea:focus,
html.theme-dark body.app-page .app-textarea:focus,
html.theme-light body.app-page .form-control:focus,
html.theme-dark body.app-page .form-control:focus,
html.theme-light body.app-page .form-select:focus,
html.theme-dark body.app-page .form-select:focus {
  background: var(--t-surface) !important;
  border-color: var(--t-primary) !important;
  box-shadow: 0 0 0 3px var(--t-primary-ring) !important;
}

html.theme-light body.app-page .app-table thead th,
html.theme-dark body.app-page .app-table thead th,
html.theme-light body.app-page .table thead th,
html.theme-dark body.app-page .table thead th {
  background: var(--t-surface-2) !important;
  color: var(--t-text-2) !important;
  border-bottom: 1px solid var(--t-border-strong) !important;
}

html.theme-light body.app-page .app-table tbody tr:hover,
html.theme-dark body.app-page .app-table tbody tr:hover,
html.theme-light body.app-page .table tbody tr:hover,
html.theme-dark body.app-page .table tbody tr:hover {
  background: var(--t-primary-soft) !important;
}

/* Bootstrap's .btn-light stays literally light in dark mode without this. */
html.theme-dark body.app-page .btn-light,
html.theme-dark body.app-page .btn-secondary,
html.theme-dark body.app-auth-page .btn-light,
html.theme-dark .btn-light,
html.theme-dark .btn-secondary {
  background: var(--t-surface-3) !important;
  border: 1px solid var(--t-border-strong) !important;
  color: var(--t-text) !important;
}

html.theme-dark body.app-page .btn-light:hover,
html.theme-dark body.app-page .btn-secondary:hover,
html.theme-dark .btn-light:hover,
html.theme-dark .btn-secondary:hover {
  background: var(--t-surface-2) !important;
  border-color: var(--t-primary) !important;
  color: var(--t-primary-strong) !important;
}

/* Badges carry small bold text, so they use the saturated brand step in both
   modes rather than the lighter accent used for body-level highlights. */
html.theme-light .text-bg-primary,
html.theme-dark .text-bg-primary,
html.theme-light body.app-page .text-bg-primary,
html.theme-dark body.app-page .text-bg-primary {
  background: var(--brand-600) !important;
  color: #fff !important;
}

html.theme-light body.app-page .app-chip,
html.theme-dark body.app-page .app-chip {
  background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-text-2) !important;
}

html.theme-light body.app-page .app-navbar,
html.theme-dark body.app-page .app-navbar {
  background: var(--t-surface-glass) !important;
  border-bottom: 1px solid var(--t-border) !important;
  backdrop-filter: blur(10px);
}

html.theme-light body.app-page .app-brand,
html.theme-dark body.app-page .app-brand {
  background: linear-gradient(120deg, var(--brand-600), var(--brand-alt)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Auth page ("Auth page red/white polish") */
html.theme-light body.app-auth-page .app-auth-card,
html.theme-dark body.app-auth-page .app-auth-card {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-xl) !important;
  box-shadow: var(--t-shadow-lg) !important;
  color: var(--t-text) !important;
}

html.theme-light body.app-auth-page .app-input,
html.theme-dark body.app-auth-page .app-input,
html.theme-light body.app-auth-page .form-control,
html.theme-dark body.app-auth-page .form-control {
  background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border-strong) !important;
  color: var(--t-text) !important;
}

html.theme-light body.app-auth-page .auth-badge,
html.theme-dark body.app-auth-page .auth-badge {
  background: var(--t-primary-soft) !important;
  border: 1px solid var(--t-primary) !important;
  color: var(--t-primary-strong) !important;
  border-radius: var(--t-r-pill) !important;
}

html.theme-light body.app-auth-page .auth-badge i,
html.theme-dark body.app-auth-page .auth-badge i,
html.theme-light body.app-auth-page .auth-badge span,
html.theme-dark body.app-auth-page .auth-badge span { color: inherit !important; }

html.theme-light body.app-auth-page .auth-subtitle,
html.theme-dark body.app-auth-page .auth-subtitle { color: var(--t-text-3) !important; }

/* ── 12. Typography ──────────────────────────────────────────────────────────
   One scale for the whole app. Sizes are fluid between the 360px and 1280px
   viewports so nothing has to shrink below a comfortable reading size on a phone.
   ------------------------------------------------------------------------- */

:root {
  --t-fs-xs: 0.75rem;                                  /* 12px — never smaller */
  --t-fs-sm: 0.8125rem;                                /* 13px — meta, captions */
  --t-fs-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);   /* 15 → 16 */
  --t-fs-md: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --t-fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-fs-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --t-fs-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);

  --t-lh-tight: 1.25;
  --t-lh-snug: 1.4;
  --t-lh-base: 1.6;
}

body,
body.app-page,
body.app-auth-page {
  font-size: var(--t-fs-base);
  line-height: var(--t-lh-base);
  font-weight: 400;
}

h1, .dashboard-title { font-size: var(--t-fs-2xl); font-weight: 800; line-height: var(--t-lh-tight); }
h2 { font-size: var(--t-fs-xl); font-weight: 700; line-height: var(--t-lh-tight); }
h3 { font-size: var(--t-fs-lg); font-weight: 700; line-height: var(--t-lh-snug); }
h4, h5, h6 { font-size: var(--t-fs-md); font-weight: 700; line-height: var(--t-lh-snug); }

.dashboard-section-title { font-size: var(--t-fs-lg) !important; }
.dashboard-lead { font-size: var(--t-fs-md) !important; line-height: var(--t-lh-snug) !important; }

/* Secondary text stays at 13px minimum rather than drifting down to 10–11px. */
.app-muted,
.text-muted,
.form-text,
.app-sidebar-caption,
small,
.small { font-size: var(--t-fs-sm) !important; }

.form-label,
.form-check-label { font-size: var(--t-fs-sm) !important; font-weight: 600 !important; }

.app-table thead th,
.table thead th { font-size: var(--t-fs-sm) !important; font-weight: 700 !important; }

.app-table td,
.table td { font-size: var(--t-fs-base); line-height: var(--t-lh-snug); }

.badge { font-size: var(--t-fs-xs) !important; font-weight: 700 !important; letter-spacing: .02em; }

.btn, .app-btn { font-size: var(--t-fs-base); font-weight: 600; }
.btn-sm, .app-btn.btn-sm { font-size: var(--t-fs-sm); }

/* Numbers line up in columns when they share a width. */
.dashboard-summary-total,
.dashboard-branch-summary-item strong,
.app-table td { font-variant-numeric: tabular-nums; }

/* Contrast on brand surfaces --------------------------------------------------
   Anything sitting on a red background gets white text at a weight that holds up.
   White on --brand-600 is 5.9:1 and on --brand-700 is 7.0:1, both clearing AA.
   White on --brand-400 is only 2.9:1, so that step is never used behind text. */

/* Every hero is a red panel, so everything inside one is white.
   Two things were fighting this and both needed an explicit answer:
     - the global `h1…h6 { color: var(--t-text) }` rule above is a direct rule on
       the heading, and a direct rule always beats a colour inherited from the
       hero, however specific the hero's selector is;
     - styles.css sets `.page-hero p { color: var(--app-muted) }`, i.e. grey body
       text on a red background.
   Listing the descendants explicitly is what fixes both. */
.hero,
.dashboard-hero,
.page-hero,
.branches-hero,
.remote-hero,
.tool-hero,
.computer-hero,
.branch-detail-hero,
.hero *,
.dashboard-hero *,
.page-hero *,
.branches-hero *,
.remote-hero *,
.tool-hero *,
.computer-hero *,
.branch-detail-hero *,
body.app-page .hero *,
body.app-page .page-hero *,
body.app-page .dashboard-hero *,
html.theme-dark body.app-page .hero *,
html.theme-dark body.app-page .page-hero *,
html.theme-dark body.app-page .dashboard-hero * {
  color: #fff !important;
}

/* Supporting copy sits a step back from the headline without losing contrast:
   white at 92% on --brand-600 is still about 5.4:1. */
.hero p,
.dashboard-hero p,
.page-hero p,
.branches-hero p,
.remote-hero p,
.tool-hero p,
.computer-hero p,
.branch-detail-hero p,
.dashboard-lead,
body.app-page .page-hero p,
body.app-page .hero p { color: rgba(255, 255, 255, .92) !important; }

.hero-eyebrow,
.dashboard-eyebrow,
.eyebrow,
.hero .eyebrow,
.page-hero .eyebrow { color: rgba(255, 255, 255, .82) !important; }

.soft-badge,
.soft-badge i,
.soft-badge span { color: #fff !important; }

/* Buttons inside a hero keep their own fills rather than turning white-on-white. */
.hero .btn-primary, .hero .app-btn-primary,
.page-hero .btn-primary, .page-hero .app-btn-primary,
.dashboard-hero .btn-primary, .dashboard-hero .app-btn-primary { color: var(--brand-700) !important; }

.hero .btn-primary i, .page-hero .btn-primary i, .dashboard-hero .btn-primary i,
.hero .app-btn-primary i, .page-hero .app-btn-primary i,
.dashboard-hero .app-btn-primary i { color: inherit !important; }

/* A hero that contains a form control must not whiten the text inside it. */
.hero .form-control, .hero .form-select, .hero input, .hero select, .hero textarea,
.page-hero .form-control, .page-hero .form-select, .page-hero input,
.page-hero select, .page-hero textarea,
.tool-hero .form-control, .tool-hero .form-select, .tool-hero input,
.tool-hero select, .tool-hero textarea { color: var(--t-text) !important; }

/* Button text is always the high-contrast pairing for its fill. */
.btn-primary, .app-btn-primary,
.btn-danger, .btn-success, .btn-warning,
html.theme-dark .btn-primary, html.theme-dark .app-btn-primary { color: #fff !important; }

/* Amber needs dark text to stay legible; white on it is only ~2.2:1. */
.btn-warning, html.theme-dark .btn-warning { background: #b45309 !important; color: #fff !important; }
.text-bg-warning { background: #fde68a !important; color: #713f12 !important; }
.text-bg-success { background: #bbf7d0 !important; color: #14532d !important; }
.text-bg-danger { background: var(--brand-600) !important; color: #fff !important; }

html.theme-dark .text-bg-warning { background: rgba(251, 191, 36, .18) !important; color: #fcd34d !important; }
html.theme-dark .text-bg-success { background: rgba(52, 211, 153, .18) !important; color: #6ee7b7 !important; }
html.theme-dark .text-bg-danger { background: var(--brand-600) !important; color: #fff !important; }

.alert-danger {
  background: var(--t-danger-soft) !important;
  border: 1px solid var(--t-danger) !important;
  color: var(--t-danger) !important;
  font-weight: 600;
}

html.theme-dark .alert-danger { color: #fecaca !important; }

/* Placeholders must read as hints, not as filled-in values. */
::placeholder { color: var(--t-text-3) !important; opacity: 1 !important; font-weight: 400 !important; }

/* ── 13. Responsive ──────────────────────────────────────────────────────────
   Breakpoints follow the ones already in styles.css so the two files agree:
     ≤ 1180px  sidebar becomes a horizontal top bar
     ≤ 767.98px phone layout, tables stack into cards
     ≤ 480px   tightest spacing
   ------------------------------------------------------------------------- */

/* Nothing may push the page sideways. overflow-x: clip is used rather than
   hidden because it does not create a scroll container, so position: sticky
   headers inside tables keep working. */
html { max-width: 100%; }

body.app-page,
body.app-auth-page { overflow-x: clip; }

img, svg, video, canvas { max-width: 100%; height: auto; }

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .container,
  .container-fluid,
  .dashboard-shell,
  .delivery-shell,
  .remote-shell { padding-inline: 1rem; }

  .dashboard-hero,
  .page-hero,
  .branches-hero { border-radius: var(--t-r-lg) !important; }

  .dashboard-branch-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Between phone and desktop a panel title plus four toolbar controls on one line
   squeezes every label into two-line wraps. Give the tools their own row. */
@media (min-width: 768px) and (max-width: 1024px) {
  .panel-head,
  .app-card .card-header {
    flex-wrap: wrap;
    row-gap: .6rem;
  }

  .panel-head > .panel-title,
  .panel-head > h3,
  .app-card .card-header > h4 { flex: 1 1 100%; }

  .delivery-list-tools,
  .panel-head > .d-flex,
  .app-card .card-header > .d-flex {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  .delivery-list-tools .btn,
  .panel-head .btn { white-space: nowrap; }
}

/* Phone ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .container,
  .container-fluid,
  .dashboard-shell,
  .delivery-shell,
  .remote-shell,
  .branches-page-wrap { padding-inline: .75rem !important; }

  /* Hero: art gets out of the way, text gets the full width. `.hero` is the
     generic one used on 19 pages; the named variants are the rest. */
  .hero,
  .dashboard-hero,
  .page-hero,
  .branches-hero,
  .remote-hero,
  .tool-hero,
  .computer-hero,
  .branch-detail-hero {
    padding: 1.25rem 1.1rem !important;
    border-radius: var(--t-r-md) !important;
    text-align: left;
  }

  .dashboard-asset { display: none !important; }

  .hero .d-flex,
  .dashboard-hero .d-flex,
  .page-hero .d-flex { flex-wrap: wrap; }

  .hero .btn,
  .dashboard-hero .btn,
  .page-hero .btn { flex: 1 1 100%; justify-content: center; }

  /* Card chrome shrinks but stays readable. Two container shapes are in use across
     the app — .app-card/.card-header on 11 pages and .panel/.panel-head on 6 —
     so both get the same treatment. */
  .app-card,
  .card.app-card,
  .panel { border-radius: var(--t-r-md) !important; }

  .app-card .card-header,
  .panel-head {
    flex-wrap: wrap !important;
    gap: .6rem !important;
    padding: .85rem .9rem !important;
  }

  .app-card .card-header .d-flex,
  .panel-head .d-flex,
  .delivery-list-tools { flex-wrap: wrap; width: 100%; }

  /* Several toolbars carry inline widths such as style="width: 220px". */
  .app-card .card-header input,
  .app-card .card-header .form-control,
  .app-card .card-header .form-select,
  .panel-head input,
  .panel-head .form-control,
  .panel-head .form-select { width: 100% !important; min-width: 0 !important; }

  /* Toolbar buttons pair up two per row instead of one long column. */
  .panel-head .btn,
  .delivery-list-tools .btn { flex: 1 1 calc(50% - .3rem); min-width: 0; }

  .app-card .card-body,
  .panel-body { padding: .9rem !important; }

  .table-wrap { overflow-x: auto; max-width: 100%; }

  .panel-title { font-size: var(--t-fs-md) !important; }

  /* Touch targets: 44px is the smallest comfortable tap area. */
  .btn,
  .app-btn,
  .form-control,
  .form-select,
  .app-input,
  .app-select { min-height: 44px !important; }

  .btn-sm,
  .app-btn.btn-sm { min-height: 40px !important; padding-inline: .85rem !important; }

  .app-icon-btn,
  .btn-sm.app-icon-btn { width: 40px !important; height: 40px !important; min-height: 40px !important; }

  .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; }

  /* Forms go single column and actions go full width. */
  .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

  .dashboard-range-controls { grid-template-columns: 1fr !important; }
  .dashboard-range-field { width: 100% !important; }
  .dashboard-range-actions { display: flex; gap: .5rem; width: 100%; }
  .dashboard-range-actions .btn { flex: 1 1 0; }

  .dashboard-branch-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Modals use the full screen with a safe gutter. */
  .modal-dialog {
    margin: .5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }

  .modal-content { border-radius: var(--t-r-md) !important; }
  .modal-body { padding: .9rem !important; max-height: 70vh; overflow-y: auto; }

  .modal-footer {
    flex-direction: column-reverse;
    gap: .5rem;
    padding: .9rem !important;
  }

  .modal-footer > .btn { width: 100%; margin: 0 !important; }

  /* Floating action button clears the thumb zone. */
  .app-fab { bottom: 1rem !important; right: 1rem !important; }
  .app-fab-btn { width: 52px; height: 52px; }

  .toast-container { width: calc(100vw - 1.5rem); }

  /* -- Tables become cards ------------------------------------------------
     app.js copies each <th> into the matching <td> as data-label and toggles
     .app-table-mobile-stack at this width. styles.css never shipped any rules
     for that class, so every wide table simply overflowed until now. */
  .app-table-mobile-stack,
  .app-table-mobile-stack tbody,
  .app-table-mobile-stack tr,
  .app-table-mobile-stack td {
    display: block !important;
    width: 100% !important;
  }

  .app-table-mobile-stack { min-width: 0 !important; }

  /* Headers are removed visually but stay for screen readers. */
  .app-table-mobile-stack thead {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-table-mobile-stack tbody tr {
    margin: 0 0 .7rem;
    padding: .75rem .85rem;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-r-md);
    background: var(--t-surface) !important;
    box-shadow: var(--t-shadow-sm);
  }

  .app-table-mobile-stack tbody tr:nth-of-type(even) > * { background: transparent !important; }

  .app-table-mobile-stack tbody td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 0 !important;
    border: 0 !important;
    text-align: right;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .app-table-mobile-stack tbody td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    max-width: 40%;
    text-align: left;
    font-size: var(--t-fs-xs);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--t-text-3);
    line-height: 1.5;
  }

  /* A cell with no label (spacer columns) keeps the full width. */
  .app-table-mobile-stack tbody td:not([data-label])::before { content: none; }

  .app-table-mobile-stack tbody td[colspan]::before { content: none; }
  .app-table-mobile-stack tbody td[colspan] { text-align: center; }

  .app-table-mobile-stack .app-action-buttons {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
  }

  /* The delivery table already had a bespoke stack, but it hid the labels and
     never received them. Bring it in line with every other table. */
  body.app-page .delivery-table tbody td::before {
    display: block !important;
    content: attr(data-label);
    flex: 0 0 40%;
    max-width: 40%;
    text-align: left;
    font-size: var(--t-fs-xs);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--t-text-3);
  }

  body.app-page .delivery-table tbody td {
    justify-content: space-between !important;
    padding: .35rem 0 !important;
  }

  body.app-page .delivery-table tbody tr {
    margin: 0 0 .7rem !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-r-md) !important;
    box-shadow: var(--t-shadow-sm) !important;
  }

  /* Any table that is still a real table scrolls inside its own box rather than
     dragging the page sideways. */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Long identifiers must wrap instead of forcing the card wider. */
  .app-ellipsis,
  [data-ellipsis] { overflow-wrap: anywhere; word-break: normal; }
}

/* Small phones ------------------------------------------------------------ */
@media (max-width: 480px) {
  .container,
  .container-fluid,
  .dashboard-shell,
  .delivery-shell,
  .remote-shell,
  .branches-page-wrap { padding-inline: .625rem !important; }

  .app-card .card-header h4,
  .app-card .card-header h5 { font-size: var(--t-fs-md) !important; }

  .app-auth-card { padding: 1.25rem !important; border-radius: var(--t-r-lg) !important; }
}

/* Very narrow phones only (≤360px: iPhone SE, Galaxy S8 and similar). From 375px
   up the label/value pair still fits side by side, which keeps a ten-column
   delivery row about half as tall as stacking every label onto its own line. */
@media (max-width: 360px) {
  .dashboard-branch-summary-grid { grid-template-columns: 1fr !important; }

  .app-table-mobile-stack tbody td,
  body.app-page .delivery-table tbody td { flex-wrap: wrap; text-align: left; }

  .app-table-mobile-stack tbody td::before,
  body.app-page .delivery-table tbody td::before {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: .1rem;
  }

  .app-table-mobile-stack .app-action-buttons { justify-content: flex-start; width: 100%; }
}

/* ── 14. Reduced motion ──────────────────────────────────────────────────── */

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

/* ── 15. Readability pass (12 ก.ย. 2569) ─────────────────────────────────────
   ทุกค่าที่แก้ในหมวดนี้มาจากการวัดจริง: เรนเดอร์ 6 หน้าด้วย Chromium แล้ววัด
   อัตราส่วนความต่างสี (WCAG contrast) ระหว่างสีตัวอักษรกับ "พิกเซลพื้นหลังที่
   เห็นจริง" ไม่ใช่การกะด้วยตา เกณฑ์ที่ใช้คือ 4.5:1 สำหรับข้อความปกติ และ 3:1
   สำหรับข้อความขนาดใหญ่ ตามมาตรฐาน WCAG 2.1 ระดับ AA

   หมวดนี้อยู่ท้ายไฟล์ theme.css ซึ่งถูกโหลดหลัง styles.css จึงเป็นตัวที่มีผลจริง
   และใช้ตัวเลือกระดับ html body.app-page เพื่อให้ชนะกฎเดิมที่ใช้ !important
   ------------------------------------------------------------------------- */

/* 15.1 โทเคนสีข้อความ
   โหมดสว่าง: --t-text-3 เดิม #6d7889 วัดได้แค่ 3.87:1 บนพื้นการ์ด #eaeff7
   ซึ่งต่ำกว่าเกณฑ์ ป้ายกำกับเล็ก ๆ ทั้งระบบจึงจางเกินไป เข้มขึ้นเป็น 5.09:1
   โหมดมืด: --t-text-3 เดิม #8192a8 ได้ 4.47:1 บนพื้น #212b3d เฉียดตก จึงสว่างขึ้น
   --t-success โหมดสว่างเดิม #0e9f6e ตัวหนังสือขาวบนปุ่มได้แค่ 3.39:1 → 5.02:1 */
html.theme-light,
:root:not(.theme-dark) {
  --t-text-3: #5b6577;
  --t-success: #0a7f57;
}

html.theme-dark {
  --t-text-3: #9fb0c6;
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) { --t-text-3: #9fb0c6; }
}

/* 15.2 ตัวเลขสถิติบนแดชบอร์ด
   เดิมตรึงไว้ที่ #b91c1c ทั้งสองโหมด พอเป็นโหมดมืดกลายเป็นแดงเข้มบนพื้นเกือบดำ
   วัดได้ 2.52–2.79:1 อ่านแทบไม่ออก ให้ตามโทเคนของโหมดแทน (โหมดมืดได้ 5.9–6.5:1) */
html.theme-dark body.app-page .dashboard-summary-total,
html.theme-dark body.app-page .dashboard-stat-number,
html.theme-dark body.app-page .dashboard-range-summary-value,
html.theme-dark body.app-page .dashboard-branch-summary-value {
  color: var(--t-primary) !important;
}

/* ป้ายกำกับใต้ตัวเลข เดิมตรึง #475569 ซึ่งในโหมดมืดวัดได้ 2.38:1 */
html.theme-dark body.app-page .dashboard-stat-label,
html.theme-dark body.app-page .dashboard-summary-total-label,
html.theme-dark body.app-page .dashboard-branch-summary-label,
html.theme-dark body.app-page .dashboard-range-summary-label,
html.theme-dark body.app-page .dashboard-today-card .dashboard-stat-label {
  color: var(--t-text-2) !important;
}

/* 15.3 ป้ายและชิปที่วางบนแถบหัวเรื่องสีแดง
   ตัวหนังสือขาวบนแดงอ่อนวัดได้ 4.05:1 เพิ่มฉากหลังโปร่งสีเข้มรองอีกชั้น
   ให้ขาวลอยขึ้นมาโดยไม่ต้องเปลี่ยนสีแบรนด์ */
body.app-page .dashboard-hero .soft-badge,
body.app-page .page-hero .soft-badge,
body.app-page .branches-hero .soft-badge,
body.app-page .hero .soft-badge,
body.app-page .dashboard-hero .app-chip,
body.app-page .page-hero .app-chip,
body.app-page .branches-hero .app-chip {
  background: rgba(0, 0, 0, .30) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  color: #ffffff !important;
}

/* ข้อความ eyebrow เหนือหัวเรื่อง เดิมจางจนวัดได้ 4.06:1 */
body.app-page .dashboard-hero .dashboard-eyebrow,
body.app-page .page-hero .dashboard-eyebrow,
body.app-page .branches-hero .dashboard-eyebrow,
body.app-page .hero .dashboard-eyebrow {
  color: rgba(255, 255, 255, .96) !important;
}

/* 15.4 ป้ายสถานะของ Bootstrap
   text-bg-success ในโหมดมืดวัดได้ 2.80:1 และ bg-warning ตัวหนังสือขาวบนเหลือง
   ได้ 1.63:1 ซึ่งอ่านไม่ออกทั้งสองโหมด */
body.app-page .badge.text-bg-success,
body.app-page .badge.bg-success {
  background-color: #0b7a57 !important;
  color: #ffffff !important;
}

body.app-page .badge.text-bg-warning,
body.app-page .badge.bg-warning {
  background-color: #a15c07 !important;
  color: #ffffff !important;
}

body.app-page .btn-success,
body.app-page .btn-success:focus {
  background-color: #0a7f57 !important;
  border-color: #0a7f57 !important;
  color: #ffffff !important;
}

body.app-page .btn-success:hover {
  background-color: #096b4a !important;
  border-color: #096b4a !important;
}

/* 15.5 ลดความจ้าของแถบหัวเรื่องในโหมดมืด
   แถบแดงเต็มความอิ่มสีบนหน้าจอเกือบดำคือจุดที่ "แสบตา" ที่สุด จึงหรี่ปลายไล่เฉด
   ลงหนึ่งขั้น ขาวบนปลายเข้มสุดยังได้ 6.7:1 จึงไม่กระทบการอ่าน */
html.theme-dark body.app-page .dashboard-hero,
html.theme-dark body.app-page .page-hero,
html.theme-dark body.app-page .branches-hero,
html.theme-dark body.app-page .remote-hero,
html.theme-dark body.app-page .tool-hero,
html.theme-dark body.app-page .computer-hero,
html.theme-dark body.app-page .hero,
html.theme-dark body.app-page .branch-detail-hero {
  background: linear-gradient(135deg, #6d1717 0%, #8f1d1d 52%, #a81d1d 100%) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* 15.6 สถานะในตารางรายการส่งของ
   ย้ายมาไว้ที่นี่เพราะ styles.css ประกาศสีชุดนี้ซ้ำถึง 4 ที่ และ theme.css
   ถูกโหลดทีหลัง กฎในไฟล์นั้นจึงถูกทับจนไม่เห็นผล
   "ส่งแล้ว" = ของยังไม่กลับมา ใช้ไล่เฉดแดงชุดเดียวกับปุ่มหลัก
   "ส่งกลับแล้ว" = จบงานแล้ว พื้นขาวเรียบ ๆ ให้สายตาข้ามได้
   หมายเหตุ: กฎฐานตั้ง background-image: none !important ไว้ จึงต้องประกาศ
   background-image เป็น !important ตรงนี้ ไม่งั้นไล่เฉดจะไม่ขึ้น */
/* Bootstrap ตั้ง background-size: 16px 12px / no-repeat / position ขวา ไว้สำหรับ
   ลูกศรของ select ถ้าเราประกาศแค่ background-image ไล่เฉดจะถูกย่อเหลือแค่แผ่นเล็ก
   16x12 px ริมขวา ไม่ได้เต็มกล่อง จึงต้องใช้ background แบบย่อ (shorthand) ซึ่ง
   รีเซ็ต size/position/repeat กลับเป็นค่าเริ่มต้นให้ในตัว แล้วย้ำอีกรอบให้ชัด
   และต้องครอบ :focus/:hover/:active ด้วย เพราะหลังเลือกจากเมนู ช่องจะยังโฟกัสค้างอยู่ */
html body.app-page select.delivery-status-select.is-sent,
html body.app-page select.delivery-status-select.is-sent:focus,
html body.app-page select.delivery-status-select.is-sent:focus-visible,
html body.app-page select.delivery-status-select.is-sent:hover,
html body.app-page select.delivery-status-select.is-sent:active {
  background: #dc2626 linear-gradient(135deg, #b91c1c, #ef4444) !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .30) !important;
}

html body.app-page select.delivery-status-select.is-returned,
html body.app-page select.delivery-status-select.is-returned:focus,
html body.app-page select.delivery-status-select.is-returned:focus-visible,
html body.app-page select.delivery-status-select.is-returned:hover,
html body.app-page select.delivery-status-select.is-returned:active {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  box-shadow: none !important;
}

html.theme-dark body.app-page select.delivery-status-select.is-sent,
html.theme-dark body.app-page select.delivery-status-select.is-sent:focus,
html.theme-dark body.app-page select.delivery-status-select.is-sent:focus-visible,
html.theme-dark body.app-page select.delivery-status-select.is-sent:hover,
html.theme-dark body.app-page select.delivery-status-select.is-sent:active {
  background: #e11d48 linear-gradient(135deg, #be123c, #e11d48) !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  border-color: #9f1239 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, .40) !important;
}

html.theme-dark body.app-page select.delivery-status-select.is-returned,
html.theme-dark body.app-page select.delivery-status-select.is-returned:focus,
html.theme-dark body.app-page select.delivery-status-select.is-returned:focus-visible,
html.theme-dark body.app-page select.delivery-status-select.is-returned:hover,
html.theme-dark body.app-page select.delivery-status-select.is-returned:active {
  background: #f8fafc !important;
  background-image: none !important;
  border-color: rgba(226, 232, 240, .55) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: none !important;
}

body.app-page .delivery-status-select option {
  color: #0f172a !important;
}

/* การสลับสถานะควรเปลี่ยนสีทันทีในเฟรมเดียว ไม่ต้องมีอนิเมชัน
   กฎฐานใส่ transition: background ไว้ ซึ่งคลุมถึง background-image ที่เป็นคุณสมบัติ
   แบบสลับทันที (discrete) เบราว์เซอร์จึงมีจังหวะที่ไล่เฉดยังไม่ขึ้นแต่ตัวอักษร
   เปลี่ยนเป็นขาวไปแล้ว กลายเป็นขาวบนขาว */
html body.app-page .delivery-status-select,
html body.app-page .delivery-status-select.is-sent,
html body.app-page .delivery-status-select.is-returned {
  transition: none !important;
}

/* 15.7 ป้ายในหน้าจัดการผู้ใช้
   styles.css มีกฎเฉพาะเจาะจงกว่า (html.theme-dark body.app-page .user-management-layout …)
   ที่ตั้งพื้นเขียวสว่าง #10b981 คู่กับตัวหนังสือเขียวอ่อน วัดได้ 2.80:1
   จึงต้องระบุเจาะจงระดับเดียวกันเพื่อทับให้ได้ */
html.theme-dark body.app-page .user-management-layout .badge.text-bg-success,
html.theme-light body.app-page .user-management-layout .badge.text-bg-success,
body.app-page .user-management-layout .badge.text-bg-success {
  background: #0b7a57 !important;
  color: #ffffff !important;
}

html.theme-dark body.app-page .user-management-layout .badge.text-bg-warning,
html.theme-light body.app-page .user-management-layout .badge.text-bg-warning,
body.app-page .user-management-layout .badge.text-bg-warning {
  background: #a15c07 !important;
  color: #ffffff !important;
}