/* Supply Breeze design system — shared tokens + primitives.
   Loaded on every page (including the standalone login template) via the
   versioned_static cache-busting tag. Values derived from the brand
   artwork (Logo 1/2/3): sampled navy ~rgb(5,37,76) and teal
   ~rgb(14,199,184), refined here into a light, accessible palette.
   Text/background pairings below are chosen to clear WCAG AA
   (4.5:1 normal text, 3:1 UI components) — see the contrast notes next
   to the handful of values that need it. */

:root {
  /* ---- Brand ---- */
  --navy-900: #05254c;
  --navy-800: #0b3a66;
  --navy-050: #eef3f7;

  --teal-500: #0ec7b8;   /* brand aqua — fills, focus glow, chart emphasis */
  --teal-600: #0aa79b;   /* hover state for solid teal fills */
  --teal-700: #077f76;   /* teal AS TEXT on white/tint — 4.88:1 */
  --teal-800: #056158;   /* teal text needing extra contrast — 7.35:1 */
  --teal-100: #dff7f4;   /* pale aqua tint background */
  --teal-050: #f0fbfa;   /* very pale aqua, informational background */

  /* ---- Neutrals ---- */
  --white: #ffffff;
  --slate-050: #f2f6f7;  /* app background */
  --slate-100: #eaf1f2;  /* tinted surface (header/footer, inputs) */
  --slate-200: #e1eaec;  /* subtle border / divider */
  --slate-300: #cbd9dd;  /* default border */
  --slate-400: #7e939c;  /* muted text — decorative/low-priority only */
  --slate-600: #3e5860;  /* secondary text — 7.58:1 */

  /* ---- Semantic status (kept distinct from navy/teal on purpose) ---- */
  --success-600: #1b8a62;
  --success-700: #14704e; /* text — 6.07:1 */
  --success-100: #e2f5ec;

  --danger-600: #c23b3b;
  --danger-700: #a32e2e;  /* text — 7.03:1 */
  --danger-100: #fbe9e9;

  --warning-700: #8a6d0e; /* text — 4.91:1 */
  --warning-800: #6e5608;
  --warning-100: #fbf3dc;

  --orange-700: #a15a12;  /* data-quality / "review now" accent — 5.27:1 */
  --orange-800: #7c430d;
  --orange-100: #fceedd;

  --plum-600: #6e5aa8;    /* dead stock / no-sales-data — distinct from teal */
  --plum-700: #5a4989;    /* text — 7.64:1 */
  --plum-100: #efeaf8;

  /* ---- Aliases used throughout templates/JS ---- */
  --bg-app: var(--slate-050);
  --surface-card: var(--white);
  --surface-header: var(--surface-card); /* header/footer chrome — same as card in Light, distinct in Dark */
  --surface-tint: var(--slate-100);
  --surface-inset: var(--slate-100);

  --text-primary: var(--navy-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-400);
  --text-on-accent: var(--navy-900); /* navy on solid teal clears 7.18:1 — see note in final report */

  --border-default: var(--slate-300);
  --border-subtle: var(--slate-200);
  --border-strong: var(--navy-900);
  --border-header: rgba(5, 37, 76, 0.12);

  --accent: var(--teal-500);
  --accent-hover: var(--teal-600);
  --accent-text: var(--teal-700);
  --accent-text-strong: var(--teal-800);
  --accent-tint: var(--teal-100);
  --accent-tint-weak: var(--teal-050);

  --focus-ring-color: var(--teal-800);
  --focus-ring: 0 0 0 3px rgba(14, 199, 184, 0.35);

  --shadow-sm: 0 1px 2px rgba(5, 37, 76, 0.06);
  --shadow-md: 0 8px 24px rgba(5, 37, 76, 0.12);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* Fixed, theme-independent — Shopify's own brand green button
     background (#95bf47, in _connect_form.html) never changes with
     Supply Breeze's theme, so its text color must not either. */
  --shopify-button-text: var(--navy-900);

  /* ---- Solid KPI/summary-card colors (Home, Inventory, Replenishment
     only — see the ".kpi-card" section far below) ----
     Deliberately FIXED, non-theme-varying background/foreground pairs,
     distinct from the app-wide --danger-600/--warning-700/--success-700/
     --plum-600 aliases used for badges, borders, and small text
     elsewhere (those intentionally DO flip per theme). Dark's own
     lighter, more pastel danger/warning/success accents (#fa6f6f/
     #eec14a/#5fcfa8) are tuned to pop as small text/borders against a
     near-black surface, not to carry AA-contrast text painted directly
     on top of them at full-card scale — measured directly, white text
     on each fails 4.5:1 (2.77:1 / 1.70:1 / 1.91:1) and so does navy text
     on two of the three, so reusing them as full-card fills would force
     a different foreground per theme for no visual benefit. The values
     below were chosen specifically so ONE foreground per variant clears
     AA in both themes at once — see the final report's contrast table.
     --kpi-accent-bg/-fg are the one pair that DOES track the theme, by
     design: "accent" here means whatever the app's current brand accent
     is (teal in Light, the restored purple in Dark), exactly like every
     other --accent-* alias already does. */
  --kpi-accent-bg: var(--accent);
  --kpi-accent-fg: var(--text-on-accent);

  --kpi-danger-bg: #c23b3b;   /* white text — 5.27:1 */
  --kpi-danger-fg: var(--white);

  --kpi-warning-bg: #d69600;  /* navy text — 5.98:1 */
  --kpi-warning-fg: var(--navy-900);

  --kpi-success-bg: #14704e;  /* white text — 6.07:1 */
  --kpi-success-fg: var(--white);

  --kpi-plum-bg: #704691;     /* white text — 7.06:1; a deeper, more
                                  saturated plum than --plum-600 (which
                                  is tuned for small badge/border use) —
                                  kept a distinct hue family from
                                  --accent in both themes. */
  --kpi-plum-fg: var(--white);

  --kpi-neutral-bg: var(--slate-600); /* white text — 7.58:1 */
  --kpi-neutral-fg: var(--white);

  color-scheme: light;
}

/* ---- Dark theme ----
   Restores the pre-visual-rebrand dark dashboard (see git history of
   dashboard/templates/base.html etc. before the rebrand) as overrides of
   the same semantic aliases above — never a second stylesheet, never a
   template fork. Only the *aliases* (and the couple of raw neutral
   tokens templates reference directly — see the comments below) are
   redefined; --navy-900/--teal-* stay the literal brand-mark colors in
   both themes, since those are the logo's own artwork colors, not a
   surface tone that should flip with theme. */
:root[data-theme="dark"] {
  --bg-app: #0b0c12;
  --surface-card: #14151f;
  --surface-header: #12131c;
  --surface-tint: #1c1e2a;
  --surface-inset: #0f1017;

  /* Referenced directly (not via an alias) by a couple of templates —
     see the design-system.css audit in the appearance-feature summary. */
  --slate-100: #1c1e2a; /* home.html's "data unavailable" notice, replenishment's Overstocked badge */
  --slate-300: #2a2d3d; /* store_not_connected.html's decorative skeleton bars */

  --text-primary: #e7e8ee;
  --text-secondary: #c3c5d3;
  --text-muted: #85889c;
  --text-on-accent: #0b0c12; /* dark text on the bright solid-purple accent fill */

  --border-default: #262838;
  --border-subtle: #1c1e2a;
  --border-strong: #4d5064;
  --border-header: #23253355;

  --accent: #9d8de0;
  --accent-hover: #ab9de6;
  --accent-text: #b8ace9;
  --accent-text-strong: #cbc0ef;
  --accent-tint: rgba(157, 141, 224, 0.14);
  --accent-tint-weak: rgba(157, 141, 224, 0.08);

  --focus-ring-color: #9d8de0;
  --focus-ring: 0 0 0 3px rgba(157, 141, 224, 0.35);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);

  --success-600: #5fcfa8;
  --success-700: #5fcfa8;
  --success-100: rgba(95, 207, 168, 0.12);

  --danger-600: #fa6f6f;
  --danger-700: #fa6f6f;
  --danger-100: rgba(250, 111, 111, 0.12);

  --warning-700: #eec14a;
  --warning-800: #eec14a;
  --warning-100: rgba(238, 193, 74, 0.12);

  --orange-700: #f0883e;
  --orange-800: #f0883e;
  --orange-100: rgba(240, 136, 62, 0.12);

  /* Kept a distinct hue from --accent above (unlike the pre-rebrand
     dashboard, which coincidentally reused the same purple for both) —
     the current app deliberately keeps "dead stock / no sales data" a
     separate semantic color from the brand accent in both themes. */
  --plum-600: #9873b3;
  --plum-700: #cbb3dd;
  --plum-100: rgba(152, 115, 179, 0.16);

  color-scheme: dark;
}

*:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* ---- Logo backing ----
   The logo's navy strokes have insufficient contrast directly against
   the Dark surfaces above, and the artwork itself must never be
   recolored/filtered — so Dark gives it a compact, intentional light
   backing instead. A no-op in Light (transparent, no padding). Applied
   to the <img> itself (never a wrapping element) so the logo's own
   width/height attributes are untouched. */
.sb-logo-backing {
  border-radius: var(--radius-sm);
}
:root[data-theme="dark"] .sb-logo-backing {
  background: var(--white);
  padding: 4px 10px;
  box-shadow: var(--shadow-sm);
  /* Keeps the img's own declared height/width as the *content* size —
     the global `* { box-sizing: border-box; }` in base.html/login.html
     would otherwise let this padding shrink the visible artwork instead
     of growing the box around it. */
  box-sizing: content-box;
}

/* ---- Shared chrome (header / footer / nav) ---- */

.sb-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  height: 56px;
  background: var(--surface-header);
  border-bottom: 1px solid var(--border-header);
}
.sb-brand-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.sb-brand-wordmark { display: block; height: 28px; width: auto; }
.sb-brand-symbol { display: none; height: 28px; width: 28px; }

@media (max-width: 720px) {
  .sb-header {
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 12px;
    padding: 10px 16px;
    height: auto;
  }
  .sb-brand-wordmark { display: none; }
  .sb-brand-symbol { display: block; }
}

.sb-nav-link {
  text-decoration: none;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.sb-nav-link.active { color: var(--text-primary); font-weight: 600; }
.sb-nav-link:hover { color: var(--accent-text); }

.sb-beta-badge {
  padding: 1px 5px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-text-strong);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sb-logout-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.sb-logout-btn:hover { border-color: var(--accent); }

.sb-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 32px;
  margin-top: auto;
  background: var(--surface-header);
  border-top: 1px solid var(--border-header);
}
.sb-footer-brand { display: flex; align-items: center; gap: 10px; }
.sb-footer-wordmark { display: block; height: 18px; width: auto; }

.nav-submenu-wrap { position: relative; }
.nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 10px;
  z-index: 30;
}
.nav-submenu-wrap:hover .nav-submenu,
.nav-submenu-wrap:focus-within .nav-submenu { display: block; }
.nav-submenu-panel {
  padding: 6px;
  min-width: 170px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.nav-submenu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-secondary);
}
.nav-submenu a.active { color: var(--text-primary); font-weight: 600; }
.nav-submenu a:hover { background: var(--accent-tint-weak); color: var(--accent-text); }

/* ---- Shared primitives reused across pages ---- */

.sb-btn {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
}
.sb-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sb-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sb-btn-secondary {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
}
.sb-btn-secondary:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---- Compact selectable option (Settings > Appearance) ---- */
.sb-option-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
}
/* Progressive enhancement only — the native radio's own checked dot
   already communicates selection without relying on color at all
   (required regardless of :has() support); this just adds a border/tint
   affordance on top for browsers that support it. */
.sb-option-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint-weak);
}
.sb-option-card input[type="radio"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
}

/* ---- Solid semantic KPI/summary cards ----
   Home's 4 primary KPI cards, Inventory's 4 "Key indicators" cards, and
   Replenishment's 4 summary cards ONLY — never alerts/messages/badges/
   filters/table cells/charts/Settings cards/ordinary content panels
   (those keep their own existing treatment). Semantic importance is
   communicated by painting the ENTIRE card with a strong, solid
   semantic color (see the --kpi-*-bg/-fg tokens above) rather than a
   thin top border plus a colored number — every descendant (label,
   number, description, link, "Unavailable" message, percentage-change
   text) inherits the ONE accessible foreground color the card sets, via
   plain CSS `color` inheritance; hierarchy comes from font-size/weight
   alone, never a second, weaker text color. This is also why no child
   element below (or in any page's own <style> block) may set an inline
   `color:` inside a `.kpi-card` — see InventoryKpiCardTests/
   HomeKpiCardTests/ReplenishmentKpiCardTests in dashboard/tests.py. */
.kpi-card {
  display: block;
  flex: 1 1 220px;
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--kpi-fg);
}
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}
.kpi-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-sub {
  font-size: 12px;
  margin-top: 8px;
}
.kpi-unavailable {
  font-size: 13px;
  font-style: italic;
}
.kpi-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.kpi-link:hover, .kpi-link:focus-visible { text-decoration: underline; }

.kpi-card--accent  { background: var(--kpi-accent-bg);  --kpi-fg: var(--kpi-accent-fg); }
.kpi-card--danger  { background: var(--kpi-danger-bg);  --kpi-fg: var(--kpi-danger-fg); }
.kpi-card--warning { background: var(--kpi-warning-bg); --kpi-fg: var(--kpi-warning-fg); }
.kpi-card--success { background: var(--kpi-success-bg); --kpi-fg: var(--kpi-success-fg); }
.kpi-card--plum    { background: var(--kpi-plum-bg);    --kpi-fg: var(--kpi-plum-fg); }
.kpi-card--neutral { background: var(--kpi-neutral-bg); --kpi-fg: var(--kpi-neutral-fg); }

/* Home's cards are real <a> links — hover/focus affordances that never
   touch opacity (which would fade the text along with everything else)
   or the text color (already the card's own accessible foreground).
   The focus outline uses `currentColor` (i.e. --kpi-fg) rather than the
   shared global --focus-ring-color, since that color is tuned to show
   up against a plain card/app background and can't be relied on to
   contrast against every one of the six solid KPI backgrounds above —
   currentColor always meets at least the 3:1 non-text-contrast bar here
   because it's the same color already verified at 4.5:1+ against this
   exact background for the card's own text. */
a.kpi-card:hover,
a.kpi-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
a.kpi-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  a.kpi-card:hover, a.kpi-card:focus-visible { transform: none; }
}

::selection { background: rgba(14, 199, 184, 0.25); }