/*
 * Seelaz identity layer — loaded LAST so it wins the cascade.
 *
 * The dashboard grew five stylesheets on the OLD identity (copper #c95c2e, teal-green, a stray
 * blue that isn't in the brand at all, pure white, mint gradients). Rather than rewrite each file,
 * this single layer re-points every colour-token family to the APPROVED palette (board 2026-09-15:
 * terracotta / olive / burgundy / brass / sand, off-white surfaces, charcoal text) for both light
 * and dark, switches the font to Apple's SF stack, and removes the mint body wash. Keep the approved
 * hexes here and nowhere else.
 */

:root {
  /* --- Terracotta (brand / action / selection / info) --- */
  --copper: #b15a2f;
  --copper-dark: #8f4524;
  --dashboard-copper: #b15a2f;
  --ds-copper: #b15a2f;
  --ds-copper-soft: #f6e7dd;
  --v2-copper: #b15a2f;
  --v2-copper-soft: #f6e7dd;
  --v2-copper-panel: #fdfbf6;
  --rc-copper: #b15a2f;
  --studio-primary: #b15a2f;

  /* --- Olive (success / live / healthy) — never teal --- */
  --emerald: #657956;
  --emerald-bright: #7c9268;
  --dashboard-green: #657956;
  --ds-green: #657956;
  --ds-green-soft: #e9eee3;
  --v2-green: #657956;
  --v2-green-soft: #e9eee3;
  --studio-success: #657956;
  --sem-success: #657956;
  --mint: #e3e8dc;

  /* --- Brass (highlight / reward / accent) --- */
  --gold: #eaba5c;
  --studio-accent: #eaba5c;

  /* --- The brand has NO blue: every "info" token becomes terracotta --- */
  --ds-blue: #b15a2f;
  --ds-blue-soft: #f6e7dd;
  --v2-info: #b15a2f;
  --v2-info-soft: #f6e7dd;
  --rc-blue: #b15a2f;

  /* --- Warning (dark brass) + error (burgundy) washes --- */
  --sem-warning-bg: #fbf1d9;
  --sem-danger-bg: #f4e4e7;
  --ds-amber-soft: #fbf1d9;
  --ds-red-soft: #f4e4e7;
  --v2-amber-soft: #fbf1d9;
  --v2-red-soft: #f4e4e7;

  /* --- Surfaces: off-white page, warm elevated, cream sunken — no pure white --- */
  --cream: #faf6ee;
  --paper: #fdfbf6;
  --white: #fdfbf6;
  --soft: #f4ecdc;
  --dashboard-surface: #fdfbf6;
  --ds-surface: #fdfbf6;
  --v2-surface-solid: #fdfbf6;
  --studio-surface: #fdfbf6;
  --rc-surface-solid: #fdfbf6;
  --rc-bg-soft: #faf6ee;

  /* --- Muted secondary text --- this layer loads LAST so these win the cascade.
     Every earlier "muted" token resolved to a cool grey that fell under WCAG AA on the
     cream/off-white surfaces: release-candidate.css settled --v2-muted at #666f6a (4.42:1 on
     cream — FAIL) and polish.css set --overview-muted #748078 (3.82:1 — FAIL). #5F5850 is a
     warm taupe from the approved palette family and clears 4.5:1 on every light surface here
     (5.96:1 on cream #F4ECDC; higher on off-white #FAF6EE and card white). */
  --muted: #5F5850;
  --ds-muted: #5F5850;
  --dashboard-muted: #5F5850;
  --v2-muted: #5F5850;
  --rc-muted: #5F5850;

  /* --- Inline validation ring (the burgundy fill uses --sem-danger, already a palette token) --- */
  --sz-error-ring: rgba(107, 45, 58, 0.14);
}

html[data-theme="dark"] {
  --copper: #e08a5a;
  --copper-dark: #c57042;
  --dashboard-copper: #e08a5a;
  --ds-copper: #e08a5a;
  --ds-copper-soft: #3a2820;
  --v2-copper: #e08a5a;
  --v2-copper-soft: #3a2820;
  --v2-copper-panel: #26241f;
  --rc-copper: #e08a5a;
  --studio-primary: #e08a5a;

  --emerald: #a6bb90;
  --emerald-bright: #a6bb90;
  --dashboard-green: #a6bb90;
  --ds-green: #a6bb90;
  --ds-green-soft: #26301f;
  --v2-green: #a6bb90;
  --v2-green-soft: #26301f;
  --studio-success: #a6bb90;
  --sem-success: #a6bb90;
  --mint: #1e2a1c;

  --gold: #eaba5c;
  --studio-accent: #eaba5c;

  --ds-blue: #e08a5a;
  --ds-blue-soft: #3a2820;
  --v2-info: #e08a5a;
  --v2-info-soft: #3a2820;
  --rc-blue: #e08a5a;

  --sem-warning-bg: #342b16;
  --sem-danger-bg: #331a20;
  --ds-amber-soft: #342b16;
  --ds-red-soft: #331a20;
  --v2-amber-soft: #342b16;
  --v2-red-soft: #331a20;

  /* Warm, not cool, darks for every surface family. */
  --cream: #1c1b18;
  --paper: #26241f;
  --white: #26241f;
  --soft: #2f2c25;
  --dashboard-surface: #26241f;
  --ds-canvas: #1c1b18;
  --ds-surface: #26241f;
  --ds-surface-soft: #2f2c25;
  --ds-surface-muted: #2f2c25;
  --v2-canvas: #1c1b18;
  --v2-surface-solid: #26241f;
  --v2-copper-panel: #26241f;
  --studio-surface: #26241f;
  --rc-surface-solid: #26241f;
  --rc-bg-soft: #1c1b18;

  /* Keep muted text legible on the warm dark surfaces — a light warm taupe (>5:1 on #26241f). */
  --muted: #A69E92;
  --ds-muted: #A69E92;
  --dashboard-muted: #A69E92;
  --v2-muted: #A69E92;
  --rc-muted: #A69E92;
  --sz-error-ring: rgba(208, 138, 148, 0.20);
}

/* --overview-muted is scoped to body[data-page="overview"] (specificity 0,1,1), so a :root
   override cannot reach it. Match the selector here — loaded last, so it wins on tie. */
body[data-page="overview"] { --overview-muted: #5F5850; }
html[data-theme="dark"] body[data-page="overview"] { --overview-muted: #A69E92; }

/* Muted "not wired yet" hint next to Settings/App Studio controls that the server/app
   does not read yet (audit v21 §5). Warm, quiet, and clearly secondary. */
.wiring-hint {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--v2-muted) 40%, transparent);
  background: color-mix(in srgb, var(--v2-muted) 12%, transparent);
  color: var(--v2-muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

/* Apple's system font, matching the customer app — never Inter. Arabic falls back to SF Arabic. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Arabic",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Warm off-white ground — the mint/teal body gradients are gone. */
  background: #faf6ee;
}
html[data-theme="dark"] body {
  background: #1c1b18;
}

/* Eight tokens the families above didn't reach — semantic roles + glass surfaces that still
 * carried blue / mint / teal / pure white. Info collapses to terracotta (no blue in the brand),
 * success→olive, warning→brass, danger→burgundy, and every glass surface warms to off-white. */
:root {
  --sem-info: #b15a2f;
  --sem-success-bg: #e9eee3;
  --sem-warning: #8a6a20;
  --sem-danger: #6b2d3a;
  --rc-green: #657956;
  --glass-surface: rgba(250, 246, 238, 0.68);
  --v2-surface: rgba(253, 251, 246, 0.9);
  --rc-surface: rgba(253, 251, 246, 0.78);
}
html[data-theme="dark"] {
  --sem-info: #e08a5a;
  --sem-success-bg: #26301f;
  --sem-warning: #eaba5c;
  --sem-danger: #d08a94;
  --rc-green: #a6bb90;
  --glass-surface: rgba(38, 36, 31, 0.78);
  --v2-surface: rgba(38, 36, 31, 0.9);
  --rc-surface: rgba(38, 36, 31, 0.78);
}

/* Reduce-motion — the app-side honours the OS setting thoroughly; the dashboard's own blocks only
   covered a few components. Loaded last, this universal reset neutralises every remaining animation,
   transition and smooth-scroll for a viewer who asked the OS for less motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* In-brand modal dialog (replaces native alert/confirm/prompt). Palette-only: terracotta
   accent, off-white surface, charcoal ink, warm-taupe muted — never pure white/black or teal.
   Loaded last so it wins the cascade over the shared .button rules. */
.app-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(43, 43, 41, 0.46);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.app-dialog-overlay.show { opacity: 1; }
.app-dialog {
  width: min(440px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  position: relative;
  background: var(--paper, #fffcf7);
  color: var(--ink, #271a14);
  border: 1px solid var(--line, rgba(102, 77, 60, 0.13));
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow: 0 26px 60px rgba(43, 43, 41, 0.28);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.16s ease;
}
.app-dialog-overlay.show .app-dialog { transform: none; }
.app-dialog-title {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink, #271a14);
}
.app-dialog-message {
  margin: 0 0 16px;
  color: var(--muted, #806f62);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.app-dialog-field {
  display: block;
  margin: 0 0 14px;
}
.app-dialog-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted, #806f62);
}
.app-dialog-field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(102, 77, 60, 0.13));
  background: var(--cream, #fff8ef);
  color: var(--ink, #271a14);
  font: inherit;
}
.app-dialog-field input:focus-visible {
  outline: 2px solid var(--copper, #b15a2f);
  outline-offset: 1px;
  border-color: var(--copper, #b15a2f);
}
.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.app-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #806f62);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.app-dialog-close:hover { background: var(--soft, #f7efe7); color: var(--ink, #271a14); }
.app-dialog .button.app-dialog-danger {
  background: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
  color: var(--white, #faf6ee);
}
.app-dialog :focus-visible {
  outline: 2px solid var(--copper, #b15a2f);
  outline-offset: 2px;
}
html[dir="rtl"] .app-dialog-close { right: auto; left: 12px; }
html[dir="rtl"] .app-dialog-actions { justify-content: flex-start; }

/* First-load feedback (aria-busy is set on <main> by beginLoading). A thin terracotta progress
   bar signals work in flight; still-empty metric/list containers get skeleton shimmer so the
   screen reads as loading instead of blank-then-pop. */
body.is-loading::before {
  content: "";
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 1300;
  background: linear-gradient(90deg,
    transparent, var(--copper, #b15a2f), var(--gold, #eaba5c), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: sz-loading-bar 1.1s ease-in-out infinite;
}
@keyframes sz-loading-bar {
  0% { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}
/* Sortable order-table headers + pager. Caret reflects data-sort-active / data-sort-dir written by
   renderOrders. Palette-only, keyboard-focusable. */
.order-sort-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.order-sort-header:hover { color: var(--copper, #b15a2f); }
.order-sort-header:focus-visible {
  outline: 2px solid var(--copper, #b15a2f);
  outline-offset: 2px;
  border-radius: 4px;
}
.order-sort-caret {
  inline-size: 0.7em;
  font-size: 0.85em;
  opacity: 0.4;
}
.order-sort-header[data-sort-active="true"] { color: var(--copper, #b15a2f); font-weight: 600; }
.order-sort-header[data-sort-active="true"] .order-sort-caret { opacity: 1; }
.order-sort-header[data-sort-dir="asc"] .order-sort-caret::before { content: "\2191"; }
.order-sort-header[data-sort-dir="desc"] .order-sort-caret::before { content: "\2193"; }
.list-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 8px;
  flex-wrap: wrap;
}
.list-pager-info {
  font-size: 13px;
  color: var(--muted, #806f62);
  font-variant-numeric: tabular-nums;
}
.list-pager .button[disabled] { opacity: 0.45; cursor: not-allowed; }

body.is-loading .metrics-grid:empty {
  min-height: 108px;
  border-radius: 16px;
  background:
    linear-gradient(100deg,
      var(--soft, #f7efe7) 30%,
      color-mix(in srgb, var(--copper, #b15a2f) 8%, var(--soft, #f7efe7)) 50%,
      var(--soft, #f7efe7) 70%);
  background-size: 220% 100%;
  animation: sz-skeleton 1.3s ease-in-out infinite;
}
@keyframes sz-skeleton {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}