/**
 * Design tokens — the single source of truth for the Stateline Brands OS
 * visual identity ("data-dense dashboard": slate surfaces, indigo-blue primary,
 * amber accent, Fira Sans text, Fira Code for data).
 *
 * Layering: this file loads AFTER the Bootstrap CDN stylesheet and BEFORE
 * app.css. It (1) defines the --sb-* semantic tokens, (2) bridges them onto
 * Bootstrap 5.3's CSS variables, and (3) re-maps the small fixed list of
 * components where Bootstrap bakes color literals into component-scoped vars
 * (no Sass build, so utilities pick up --bs-*-rgb automatically but compiled
 * components do not). That re-map list is the COMPLETE blast radius of a CDN
 * re-theme — if a Bootstrap component still shows stock blue, add it here,
 * never in app.css.
 */

/* --- 1. Semantic tokens ---------------------------------------------------- */

:root {
  --sb-primary: #1e40af;
  --sb-primary-rgb: 30, 64, 175;
  --sb-primary-hover: #1e3a8a;
  --sb-primary-active: #172554;
  --sb-accent: #d97706;
  --sb-accent-rgb: 217, 119, 6;
  --sb-danger: #dc2626;
  --sb-danger-rgb: 220, 38, 38;
  --sb-danger-hover: #b91c1c;
  --sb-navbar-bg: #0f172a;
  /* Elevated surfaces (cards, dropdowns, board cells) — one step above the
     page tint in light, one step above slate-900 in dark. */
  --sb-surface-raised: #ffffff;

  --sb-font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --sb-font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

[data-bs-theme="dark"] {
  --sb-primary: #3b82f6;
  --sb-primary-rgb: 59, 130, 246;
  /* Buttons darken on hover in light mode but brighten in dark. */
  --sb-primary-hover: #2563eb;
  --sb-primary-active: #1d4ed8;
  --sb-accent: #f59e0b;
  --sb-accent-rgb: 245, 158, 11;
  --sb-danger: #ef4444;
  --sb-danger-rgb: 239, 68, 68;
  --sb-danger-hover: #dc2626;
  --sb-surface-raised: #1e293b;
}

/* --- 2. Bootstrap bridge — global vars ------------------------------------- */
/* Slate surface ramp (light: slate-50 page / white cards; dark: slate-900
   page / slate-800 cards) + brand color quintets per theme. */

:root {
  --bs-body-font-family: var(--sb-font-sans);
  --bs-body-bg: #f8fafc;
  --bs-body-bg-rgb: 248, 250, 252;
  --bs-secondary-bg: #e2e8f0;
  --bs-secondary-bg-rgb: 226, 232, 240;
  --bs-tertiary-bg: #f1f5f9;
  --bs-tertiary-bg-rgb: 241, 245, 249;
  --bs-border-color: #e2e8f0;

  --bs-primary: var(--sb-primary);
  --bs-primary-rgb: var(--sb-primary-rgb);
  --bs-primary-bg-subtle: #dbeafe;
  --bs-primary-border-subtle: #bfdbfe;
  --bs-primary-text-emphasis: #1e3a8a;

  --bs-danger: var(--sb-danger);
  --bs-danger-rgb: var(--sb-danger-rgb);
  --bs-danger-bg-subtle: #fee2e2;
  --bs-danger-border-subtle: #fecaca;
  --bs-danger-text-emphasis: #991b1b;

  /* Warning = the amber accent. */
  --bs-warning: var(--sb-accent);
  --bs-warning-rgb: var(--sb-accent-rgb);
  --bs-warning-bg-subtle: #fef3c7;
  --bs-warning-border-subtle: #fde68a;
  --bs-warning-text-emphasis: #92400e;

  --bs-link-color: var(--sb-primary);
  --bs-link-color-rgb: var(--sb-primary-rgb);
  --bs-link-hover-color: var(--sb-primary-hover);
  --bs-link-hover-color-rgb: 30, 58, 138;

  --bs-focus-ring-color: rgba(var(--sb-primary-rgb), 0.25);
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0f172a;
  --bs-body-bg-rgb: 15, 23, 42;
  --bs-body-color: #e2e8f0;
  --bs-body-color-rgb: 226, 232, 240;
  --bs-secondary-bg: #1e293b;
  --bs-secondary-bg-rgb: 30, 41, 59;
  --bs-tertiary-bg: #293548;
  --bs-tertiary-bg-rgb: 41, 53, 72;
  --bs-border-color: #334155;

  --bs-primary: var(--sb-primary);
  --bs-primary-rgb: var(--sb-primary-rgb);
  --bs-primary-bg-subtle: #172554;
  --bs-primary-border-subtle: #1e3a8a;
  --bs-primary-text-emphasis: #93c5fd;

  --bs-danger: var(--sb-danger);
  --bs-danger-rgb: var(--sb-danger-rgb);
  --bs-danger-bg-subtle: #450a0a;
  --bs-danger-border-subtle: #7f1d1d;
  --bs-danger-text-emphasis: #fca5a5;

  --bs-warning: var(--sb-accent);
  --bs-warning-rgb: var(--sb-accent-rgb);
  --bs-warning-bg-subtle: #451a03;
  --bs-warning-border-subtle: #92400e;
  --bs-warning-text-emphasis: #fcd34d;

  /* Links a step lighter than the primary for 7:1-ish contrast on slate-900. */
  --bs-link-color: #60a5fa;
  --bs-link-color-rgb: 96, 165, 250;
  --bs-link-hover-color: #93c5fd;
  --bs-link-hover-color-rgb: 147, 197, 253;

  --bs-focus-ring-color: rgba(var(--sb-primary-rgb), 0.35);
}

/* Cards/dropdowns/modals inherit --bs-body-bg, which is now the page tint —
   give elevated surfaces their own step so they read as raised. */
.card,
.dropdown-menu,
.modal-content,
.offcanvas,
.toast {
  --bs-card-bg: var(--sb-surface-raised);
  --bs-dropdown-bg: var(--sb-surface-raised);
  --bs-modal-bg: var(--sb-surface-raised);
  --bs-offcanvas-bg: var(--sb-surface-raised);
  --bs-toast-bg: var(--sb-surface-raised);
}

/* --- 3. Bootstrap bridge — compiled-literal component re-maps -------------- */

.btn-primary {
  --bs-btn-bg: var(--sb-primary);
  --bs-btn-border-color: var(--sb-primary);
  --bs-btn-hover-bg: var(--sb-primary-hover);
  --bs-btn-hover-border-color: var(--sb-primary-hover);
  --bs-btn-active-bg: var(--sb-primary-active);
  --bs-btn-active-border-color: var(--sb-primary-active);
  --bs-btn-disabled-bg: var(--sb-primary);
  --bs-btn-disabled-border-color: var(--sb-primary);
  --bs-btn-focus-shadow-rgb: var(--sb-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary {
  /* Brighter blue needs dark-legible white; hover darkens toward blue-600
     where white text holds 4.5:1. */
  --bs-btn-bg: #2563eb;
  --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1e40af;
  --bs-btn-active-border-color: #1e40af;
  --bs-btn-disabled-bg: #2563eb;
  --bs-btn-disabled-border-color: #2563eb;
}

.btn-outline-primary {
  --bs-btn-color: var(--sb-primary);
  --bs-btn-border-color: var(--sb-primary);
  --bs-btn-hover-bg: var(--sb-primary);
  --bs-btn-hover-border-color: var(--sb-primary);
  --bs-btn-active-bg: var(--sb-primary-active);
  --bs-btn-active-border-color: var(--sb-primary-active);
  --bs-btn-disabled-color: var(--sb-primary);
  --bs-btn-disabled-border-color: var(--sb-primary);
  --bs-btn-focus-shadow-rgb: var(--sb-primary-rgb);
}

.btn-danger {
  --bs-btn-bg: var(--sb-danger);
  --bs-btn-border-color: var(--sb-danger);
  --bs-btn-hover-bg: var(--sb-danger-hover);
  --bs-btn-hover-border-color: var(--sb-danger-hover);
  --bs-btn-active-bg: var(--sb-danger-hover);
  --bs-btn-active-border-color: var(--sb-danger-hover);
  --bs-btn-disabled-bg: var(--sb-danger);
  --bs-btn-disabled-border-color: var(--sb-danger);
  --bs-btn-focus-shadow-rgb: var(--sb-danger-rgb);
}
.btn-outline-danger {
  --bs-btn-color: var(--sb-danger);
  --bs-btn-border-color: var(--sb-danger);
  --bs-btn-hover-bg: var(--sb-danger);
  --bs-btn-hover-border-color: var(--sb-danger);
  --bs-btn-active-bg: var(--sb-danger-hover);
  --bs-btn-active-border-color: var(--sb-danger-hover);
  --bs-btn-disabled-color: var(--sb-danger);
  --bs-btn-disabled-border-color: var(--sb-danger);
  --bs-btn-focus-shadow-rgb: var(--sb-danger-rgb);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--sb-primary-rgb), 0.5);
}
.form-check-input:checked {
  background-color: var(--sb-primary);
  border-color: var(--sb-primary);
}
.form-check-input:focus {
  border-color: rgba(var(--sb-primary-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--sb-primary);
}
.pagination {
  --bs-pagination-active-bg: var(--sb-primary);
  --bs-pagination-active-border-color: var(--sb-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}
.progress {
  --bs-progress-bar-bg: var(--sb-primary);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--sb-primary);
}
.list-group {
  --bs-list-group-active-bg: var(--sb-primary);
  --bs-list-group-active-border-color: var(--sb-primary);
}

/* --- 4. Typography ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
}

/* Fira Code is reserved for DATA — SKUs, prices, counts, batch ids, pipeline
   counters — never headings or prose. Tabular numerals keep columns and
   polling counters from jittering as digits change. */
.font-data {
  font-family: var(--sb-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "calt" 0;
  font-size: 0.9375em;
}
table {
  font-variant-numeric: tabular-nums;
}

/* --- 5. Focus + shell ------------------------------------------------------- */

/* One app-wide keyboard focus treatment. :focus-visible only — pointer clicks
   keep Bootstrap's subtler box-shadow states. */
:focus-visible {
  outline: 2px solid var(--sb-primary);
  outline-offset: 2px;
}

/* Navbar surface: deep slate in both themes (markup keeps navbar-dark). */
.app-navbar {
  background-color: var(--sb-navbar-bg) !important;
}

/* Filter/action toolbar convention: a slim card-like bar at the top of index
   pages. Markup: <form class="app-toolbar"> selects with .auto-submit, a
   search input, .ms-auto action cluster. */
.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: var(--sb-surface-raised);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-sm);
  margin-bottom: 1rem;
}

/* Compact stat chip for pipeline counters inside toolbars. */
.aa-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  white-space: nowrap;
}