/* ============================================================================
   Wheelder UI — design tokens + Bootstrap 5.3 theming + safe global baseline.
   Phase 1 of the progressive UI system. ADDITIVE & NON-BREAKING:
   - Tokens are CSS variables; they only affect elements that read them and
     Bootstrap 5.3 (which consumes --bs-* vars). Bootstrap 4 / Tailwind pages are
     untouched except for the safe baseline (responsive media, focus states).
   - Loaded LAST via pwa_inject.php so it can gently theme, never fight, pages.
   Kill switch: create /.wheelder_ui_off on the docroot, or append ?ui=off to a URL.
   Change the brand: edit --wl-primary (+ --wl-primary-rgb) below — one place.
   ============================================================================ */
:root {
  /* Brand + neutrals (derived from the existing #0d6efd theme-color + slate palette) */
  --wl-primary: #0d6efd;
  --wl-primary-rgb: 13, 110, 253;
  --wl-primary-hover: #0b5ed7;
  --wl-ink: #0f172a;
  --wl-muted: #64748b;
  --wl-bg: #f6f8fb;
  --wl-surface: #ffffff;
  --wl-border: #e5e9f0;

  /* Shape + depth + type */
  --wl-radius: 10px;
  --wl-radius-lg: 14px;
  --wl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --wl-shadow: 0 6px 24px rgba(15, 23, 42, .08);
  --wl-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Map tokens onto Bootstrap 5.3 (consumed only where BS5.3 is present; harmless otherwise) */
  --bs-primary: var(--wl-primary);
  --bs-primary-rgb: var(--wl-primary-rgb);
  --bs-link-color: var(--wl-primary);
  --bs-link-color-rgb: var(--wl-primary-rgb);
  --bs-link-hover-color: var(--wl-primary-hover);
  --bs-border-radius: var(--wl-radius);
  --bs-border-radius-lg: var(--wl-radius-lg);
  --bs-border-color: var(--wl-border);
  --bs-body-font-family: var(--wl-font);
}

/* ---- Safe global baseline (additive; every framework already sets box-sizing) ---- */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
:where(pre, code) { max-width: 100%; overflow: auto; }
:focus-visible { outline: 2px solid var(--wl-primary); outline-offset: 2px; }

/* ---- Brand the shared Bootstrap 5.3 primary button (no effect on BS4/Tailwind) ---- */
.btn-primary {
  --bs-btn-bg: var(--wl-primary);
  --bs-btn-border-color: var(--wl-primary);
  --bs-btn-hover-bg: var(--wl-primary-hover);
  --bs-btn-hover-border-color: var(--wl-primary-hover);
  --bs-btn-active-bg: var(--wl-primary-hover);
  --bs-btn-active-border-color: var(--wl-primary-hover);
}

/* ---- Consistent focus ring on Bootstrap form controls (BS5.3) ---- */
.form-control:focus, .form-select:focus {
  border-color: var(--wl-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--wl-primary-rgb), .18);
}

/* ============================================================================
   Visible component polish — applies to Bootstrap 4 & 5 (.btn/.card/.form-*/…).
   Tailwind/utility pages don't use these class names, so they're untouched.
   This is the deliberately-visible pass so the design system is obvious.
   ============================================================================ */
.btn, .btn-lg, .btn-sm { border-radius: 999px !important; font-weight: 600; letter-spacing: .1px; }
.btn-primary { background-color: var(--wl-primary); border-color: var(--wl-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--wl-primary-hover); border-color: var(--wl-primary-hover); }

.card { border-radius: var(--wl-radius-lg) !important; border: 1px solid var(--wl-border);
  box-shadow: var(--wl-shadow-sm); transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: var(--wl-shadow); }

.form-control, .form-select, .input-group-text { border-radius: var(--wl-radius); }
.modal-content, .dropdown-menu, .list-group, .alert, .toast { border-radius: var(--wl-radius-lg); }
.badge { border-radius: 999px; font-weight: 600; }
.nav-pills .nav-link { border-radius: 999px; }
a { color: var(--wl-primary); }
a:hover { color: var(--wl-primary-hover); }

/* ============================================================================
   Phase 2 — comprehensive, safe component pass (Bootstrap 4 & 5).
   All rules are additive/scoped; bg-utility headers and custom nav bars are
   deliberately excluded so nothing bespoke is overridden.
   ============================================================================ */
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; }
.form-label { font-weight: 600; color: var(--wl-ink); }
.input-group > .btn { border-radius: 0 var(--wl-radius) var(--wl-radius) 0; }

/* Cards: clean headers/footers, but never touch coloured (bg-*) headers */
.card-header:not([class*="bg-"]) { background: #fff; border-bottom: 1px solid var(--wl-border); font-weight: 600; }
.card-footer:not([class*="bg-"]) { background: #fff; border-top: 1px solid var(--wl-border); }

/* Lists / tabs / pagination */
.list-group { overflow: hidden; }
.list-group-item { border-color: var(--wl-border); }
.nav-tabs { border-bottom: 1px solid var(--wl-border); }
.nav-tabs .nav-link { border: none; color: var(--wl-muted); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--wl-ink); background: transparent; border-bottom: 2px solid var(--wl-primary); }
.page-link { color: var(--wl-primary); }
.page-item.active .page-link { background: var(--wl-primary); border-color: var(--wl-primary); }

/* Feedback + overlays */
.alert { border: 1px solid var(--wl-border); border-left-width: 4px; }
.dropdown-menu { border-color: var(--wl-border); box-shadow: var(--wl-shadow); }
.modal-content { border: 1px solid var(--wl-border); box-shadow: var(--wl-shadow); }
.offcanvas { box-shadow: var(--wl-shadow); }
.progress { border-radius: 999px; }
.table { --bs-table-border-color: var(--wl-border); }
.btn-close:focus { box-shadow: 0 0 0 .2rem rgba(var(--wl-primary-rgb), .18); }

/* ============================================================================
   Phase 5 — responsive fixes. Additive, scoped to small screens.
   Wide comparison matrices (e.g. the Enterprise tier table) must scroll inside
   their own box on mobile instead of forcing the whole page to overflow.
   ============================================================================ */
@media (max-width: 767.98px) {
  /* Kill residual horizontal PAGE scroll without creating a scroll container or breaking
     position:sticky (overflow-x:clip, not hidden). Well-built pages don't overflow, so this
     is a no-op safety net for them; on the Enterprise page it removes the stray page scroll. */
  html { overflow-x: clip; }
  /* Keep intentionally-wide tables (which carry their own min-width) scrollable IN PLACE,
     so their columns stay fully accessible instead of being clipped. */
  .matrix-wrap, .table-responsive, .wl-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ============================================================================
   Phase 6 — app-shell polish. All additive, framework-agnostic, low-risk.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
::selection { background: rgba(var(--wl-primary-rgb), .18); }
.navbar { box-shadow: var(--wl-shadow-sm); }
.navbar-brand { font-weight: 700; letter-spacing: -.01em; }
.navbar .nav-link { font-weight: 600; }
.dropdown-item:active { background-color: var(--wl-primary); }
/* Comfortable tap targets on phones (buttons & standalone nav links). */
@media (max-width: 575.98px) {
  .btn { min-height: 40px; }
  .navbar-nav .nav-link { padding-top: .55rem; padding-bottom: .55rem; }
}