/* ============================================================
   CESIVI Modern UI — Design Tokens
   Scoped via body[data-modern-ui="true"] to avoid classic collisions.
   ============================================================ */

:root {
  /* Accent — tenant themeable. Default: forest green (#217346) h=150 c=0.08 l=0.48.
     The base vars (--accent-h/c/l) are set ONLY by the inline <style id="modern-theme-vars">
     emitted by _ModernLayout.cshtml (PLAN-1076). Do NOT redefine them here — they must be
     inherited from the inline style (which precedes all stylesheets) to prevent override. */
  --accent: oklch(var(--accent-l, 0.48) var(--accent-c, 0.08) var(--accent-h, 150));
  --accent-hover: oklch(calc(var(--accent-l, 0.48) - 0.06) var(--accent-c, 0.08) var(--accent-h, 150));
  --accent-soft: oklch(0.96 0.025 var(--accent-h, 150));
  --accent-soft-2: oklch(0.92 0.04 var(--accent-h, 150));
  --accent-fg: oklch(0.28 var(--accent-c, 0.08) var(--accent-h, 150));
  --accent-border: oklch(0.85 0.04 var(--accent-h, 150));

  /* Neutrals — cool slate */
  --bg: oklch(0.985 0.003 240);
  --bg-panel: oklch(1 0 0);
  --bg-sunken: oklch(0.97 0.004 240);
  --bg-hover: oklch(0.955 0.005 240);
  --bg-active: oklch(0.93 0.008 240);

  --border: oklch(0.91 0.005 240);
  --border-strong: oklch(0.85 0.006 240);
  --border-subtle: oklch(0.945 0.004 240);

  --fg: oklch(0.22 0.008 240);
  --fg-muted: oklch(0.48 0.008 240);
  --fg-subtle: oklch(0.55 0.006 240); /* Phase 6a: darkened from 0.62 — 3.50:1 failed WCAG AA; 0.55 ≈ 4.67:1 on --bg */
  --fg-faint: oklch(0.74 0.005 240);

  --danger: oklch(0.55 0.17 27);
  --warn: oklch(0.72 0.14 75);
  --info: oklch(0.58 0.1 235);
  --success: var(--accent);

  /* Focus ring — single source of truth for keyboard navigation indicators */
  --focus-ring-color: var(--accent);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

  /* Aliases used by component CSS (PLAN-1348 Phase 1 — make tokens self-resolving) */
  --bg-elevated: var(--bg-panel);   /* "elevated" surfaces are panels */
  --bg-subtle: var(--bg-sunken);    /* "subtle" surfaces are sunken */
  --accent-on: oklch(0.99 0.005 var(--accent-h, 150));   /* foreground on filled --accent backgrounds */

  /* Density defaults — comfortable */
  --row-h: 36px;
  --pad-y: 8px;
  --pad-x: 12px;
  --gap: 12px;
  --font-size: 13px;
  --font-size-sm: 12px;
  --font-size-lg: 15px;   /* PLAN-1738: density-scoped; was used-undefined → `medium` */
  --font-size-xs: 11px;   /* PLAN-1738: density-scoped; was used-undefined → `medium` */

  /* Fixed (non-density) t-shirt spacing scale — PLAN-1738.
     Distinct from the density-scoped gap/pad-x/pad-y/row-h above; used by components
     (filter panel) that want fixed steps regardless of density. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-md: 8px;        /* PLAN-1738: fills the 6→10 gap; was used-undefined → 0 (square) */
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 240 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 240 / 0.08),
               0 1px 2px oklch(0.2 0.02 240 / 0.06);
  --shadow-lg: 0 16px 40px oklch(0.2 0.02 240 / 0.12),
               0 2px 6px oklch(0.2 0.02 240 / 0.08);

  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --topbar-h: 44px;
  --ribbon-h: 92px;
  --commandbar-h: 40px;
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 52px;

  /* ── Breakpoint tokens (PLAN-1364 Phase 1) ──────────────────
     Usage policy: write the literal value followed by a trailing
     comment: /* token: --bp-tablet * /  if browser support requires
     raw literals in @media rules (CSS custom properties cannot be
     used directly inside @media queries).
     All viewport @media rules in wwwroot/css/modern/** MUST use
     one of these three values and annotate it with the token name.
     Intermediate breakpoints (640px, 900px) are allowed as literals
     without a token annotation when they fall between these anchors.
  ───────────────────────────────────────────────────────────── */
  --bp-phone:   480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;

  /* Touch-target minimum (PLAN-1364 Phase 3) */
  --touch-target-min: 44px;

  /* ── iOS safe-area env tokens (PLAN-1364 Phase 1) ──────────
     Backed by env(safe-area-inset-*) from viewport-fit=cover.
     Falls back to 0px on non-notch devices / Chromium desktop.
  ───────────────────────────────────────────────────────────── */
  --safe-area-top:    env(safe-area-inset-top,    0px);
  --safe-area-right:  env(safe-area-inset-right,  0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left:   env(safe-area-inset-left,   0px);
}

/* Density variants — scoped to modern body */
body[data-modern-ui="true"][data-density="compact"] {
  --row-h: 28px; --pad-y: 4px; --pad-x: 8px; --gap: 8px;
  --font-size: 12.5px; --font-size-sm: 11.5px; --font-size-lg: 14px; --font-size-xs: 10.5px;
}
body[data-modern-ui="true"][data-density="comfortable"] {
  --row-h: 36px; --pad-y: 8px; --pad-x: 12px; --gap: 12px;
  --font-size: 13px; --font-size-sm: 12px; --font-size-lg: 15px; --font-size-xs: 11px;
}
body[data-modern-ui="true"][data-density="spacious"] {
  --row-h: 44px; --pad-y: 12px; --pad-x: 14px; --gap: 16px;
  --font-size: 14px; --font-size-sm: 12.5px; --font-size-lg: 16px; --font-size-xs: 11.5px;
}

/* Modern body base reset — isolated from classic */
body[data-modern-ui="true"] {
  font-family: var(--font-ui);
  font-size: var(--font-size);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "ss03";
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  body[data-modern-ui="true"] { overflow-x: hidden; }
}

body[data-modern-ui="true"] *,
body[data-modern-ui="true"] *::before,
body[data-modern-ui="true"] *::after {
  box-sizing: border-box;
}

body[data-modern-ui="true"] button:not(.btn),
body[data-modern-ui="true"] input,
body[data-modern-ui="true"] select,
body[data-modern-ui="true"] textarea {
  font: inherit;
  color: inherit;
}

/* Plain/icon buttons reset to unstyled. EXCLUDE Bootstrap .btn buttons — the
   reset's specificity (0,1,1) otherwise beats .btn (0,1,0) and flattened every
   <button class="btn"> to borderless/padless text, while <a class="btn"> kept
   its styling (inconsistent button rows — DispForm action bar, browser-capture
   bundle l1uw 2026-06-06). :not(.btn) lets Bootstrap own .btn appearance for
   both <button> and <a>. */
/* ik 2ade C: also exempt .cb-btn — command-bar buttons style themselves (border/bg in
   ribbon.css + list-view.css). Without this the global reset stripped their borders so
   adjacent buttons (Share / Follow) merged into one. Same class as the .btn exemption. */
body[data-modern-ui="true"] button:not(.btn):not(.cb-btn) {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

body[data-modern-ui="true"] a {
  color: var(--accent-fg);
  text-decoration: none;
}

body[data-modern-ui="true"] a:hover {
  text-decoration: underline;
}