/* Datum+Grain — the trade/internal brand theme: the configurator workspace
   and every pricing-admin page. Scoped under [data-brand="datum-grain"] (set
   once, server-side, on <html> in webapp/templates/base.html — see
   webapp/app.py's brand_for_path()). NOT role-based; see that function.

   Re-based on the 9 Oct 2026 brand system handoff, D+G v2 (the calmer,
   light direction; webapp/static/brand-tokens.css is the source of truth for
   the palette): Paper ground, Graphite ink and 1px rules, Datum blue
   #2C4A9A, Instrument Sans at 87.5% width, square corners, no shadows. This
   replaces the earlier dark "Nocturne" theme (September handoff); the v2
   handoff defines no dark mode. The token NAMES are unchanged, so every
   shared component in default.css picks the new look up through var().

   Load order is load-bearing: this file's <link> must come after
   default.css's own (see base.html) — :root and [data-brand="..."] both
   target <html> with identical (0,1,0) specificity, so whichever loads
   last wins the tie for any token both declare. */

[data-brand="datum-grain"] {
  /* Ground / surface / text. bg = Paper; panels and fields are white. */
  --color-bg: #F5F6F4;
  --color-bg-panel: #FFFFFF;
  --color-bg-raised: #FFFFFF;
  --color-text: #18191B;          /* Graphite */
  --color-text-muted: #55585C;
  --color-text-faint: #767A7F;
  --color-border: #C9CCCF;        /* Rule: inner dividers */
  --color-border-strong: #18191B; /* Graphite: 1px structural rules */

  /* Accent: Datum blue. Hover (#3A5AAE) is set on .btn-primary below. */
  --color-accent: #2C4A9A;
  --color-accent-soft: #E1E6F2;
  --color-accent-ink: #1F3677;

  /* Status colours, tuned for a light ground */
  --color-positive: #3F7A3A;
  --color-negative: #B3470A;
  --color-negative-bg: #F8E8DC;

  /* Neutral ramp, light to dark: white, Paper, Tint, Rule, then down to
     Graphite. */
  --color-neutral-100: #FFFFFF;
  --color-neutral-200: #F5F6F4;
  --color-neutral-300: #E3E5E7;
  --color-neutral-400: #C9CCCF;
  --color-neutral-500: #A3A7AB;
  --color-neutral-600: #767A7F;
  --color-neutral-700: #55585C;
  --color-neutral-800: #2C2E31;
  --color-neutral-900: #18191B;
  /* Datum blue ramp, 500 = the accent */
  --color-accent-100: #E1E6F2;
  --color-accent-200: #C3CDE6;
  --color-accent-300: #9BAAD3;
  --color-accent-400: #6F84BE;
  --color-accent-500: #2C4A9A;
  --color-accent-600: #243D80;
  --color-accent-700: #1C3066;
  --color-accent-800: #14234A;
  --color-accent-900: #0D162E;

  /* Type: one family, 87.5% width (font-stretch is applied on body below);
     Instrument Sans is loaded in base.html. */
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-strapline: var(--font-sans);
  --font-display: var(--font-sans);
  --font-heading: var(--font-sans);

  /* Spacing scale: steps taken from the handoff's in-use list (4, 6, 10, 12,
     16, 20, 24, 32). Slightly denser than default.css's 4px-base scale, so the
     dense workspace keeps its layout, but no longer the old 0.7x scale. */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;

  /* Square corners, no shadows: structure comes from rules and flat fills. */
  --radius: 0;
  --radius-lg: 0;
  --radius-sm: 0;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* --- Structural overrides -------------------------------------------
   A handful of shared components differ from this theme's spec in box
   model, not just color, so a token override alone doesn't reproduce
   them: .field/.input are boxed here vs. underline-style in Kora's
   theme, and .btn is a rounded rect here vs. fully pill-shaped there.
   Everything else rides the token overrides above for free (or lives
   unscoped in default.css — see that file's own header comment for what
   moved there during this theme's split from the old, brand-agnostic
   "nocturne.css"). */

[data-brand="datum-grain"] .field input[type="text"],
[data-brand="datum-grain"] .field input[type="password"],
[data-brand="datum-grain"] .field input[type="number"],
[data-brand="datum-grain"] .field input[type="date"],
[data-brand="datum-grain"] .field input[type="email"],
[data-brand="datum-grain"] .field select {
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-bg-raised);
  padding: 6px 10px;
  min-height: 34px;
  transition: none;
}

[data-brand="datum-grain"] .field input:hover,
[data-brand="datum-grain"] .field select:hover {
  background: var(--color-neutral-200);
}

[data-brand="datum-grain"] .field input:focus,
[data-brand="datum-grain"] .field select:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}

/* Labels: 12px-class uppercase at 75% width, as in the D+G component sheet. */
[data-brand="datum-grain"] .field label,
[data-brand="datum-grain"] .section-label,
[data-brand="datum-grain"] .wizard-eyebrow {
  font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Buttons: flat, 1px Graphite outline; primary is a solid Datum blue fill
   (hover set below); hover on outline buttons is the Tint fill. */
[data-brand="datum-grain"] .btn {
  border-radius: 0;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-raised);
  color: var(--color-text);
  font-weight: 600;
  transition: none;
}
[data-brand="datum-grain"] .btn:hover { background: var(--color-neutral-300); border-color: var(--color-border-strong); }
[data-brand="datum-grain"] .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #F5F6F4; }
[data-brand="datum-grain"] .btn-quiet, [data-brand="datum-grain"] .btn-ghost, [data-brand="datum-grain"] .btn-icon {
  border-color: transparent; background: transparent;
}
[data-brand="datum-grain"] .btn-quiet:hover, [data-brand="datum-grain"] .btn-ghost:hover, [data-brand="datum-grain"] .btn-icon:hover {
  background: var(--color-neutral-300); border-color: transparent;
}

/* Icon rail (64px) + canvas (flexible) + pricing column — no more
   --panel-left-width track now the old always-open rail is gone; flyout
   panels are position:absolute (see default.css), so they never occupy a
   grid track of their own. The pricing column collapses to a slim strip
   (holding just its own toggle button) rather than vanishing entirely,
   so it's always one click to bring back. */
[data-brand="datum-grain"] .app-shell {
  grid-template-columns: 64px 1fr var(--panel-right-width);
  /* One row that is exactly the shell's height — the default auto row grew
     to fit the (now taller) icon rail, pushing it past the dark page area
     on a short window. */
  grid-template-rows: minmax(0, 1fr);
  position: relative;
  transition: grid-template-columns 0.15s ease;
}

[data-brand="datum-grain"] .app-shell:has(.panel-right-collapsed) {
  grid-template-columns: 64px 1fr 36px;
}

/* Function view still collapses the CENTRE panel's own inner padding
   (panel-center-fullscreen), but the icon rail and pricing column both
   stay visible/reachable (confirmed with the user), so default.css's own
   .app-shell:has(.panel-center-fullscreen) 1-column collapse must NOT
   apply here; these two rules (higher specificity via the extra
   [data-brand] ancestor, so they always win over that base rule
   regardless of source order) restore the normal rail+canvas+pricing
   grid, including its own collapsed-pricing-column variant. */
[data-brand="datum-grain"] .app-shell:has(.panel-center-fullscreen) {
  grid-template-columns: 64px 1fr var(--panel-right-width);
}

[data-brand="datum-grain"] .app-shell:has(.panel-center-fullscreen):has(.panel-right-collapsed) {
  grid-template-columns: 64px 1fr 36px;
}

/* Denser field/group sizing throughout every flyout, layered on top of
   whichever box-model override (above) is active — same density
   complaint the rest of this theme's flyout tweaks address (see
   default.css's own .flyout-panel rules for the brand-agnostic ones). */
[data-brand="datum-grain"] .flyout-panel .field input[type="text"],
[data-brand="datum-grain"] .flyout-panel .field input[type="password"],
[data-brand="datum-grain"] .flyout-panel .field input[type="number"],
[data-brand="datum-grain"] .flyout-panel .field select {
  min-height: 30px;
  padding: 4px 8px;
}

/* --- Special-selections rows: toggle-switch pill, not a checkbox --------
   Reuses fm.option_row()'s existing markup/logic entirely unchanged (see
   webapp/templates/partials/_macros.html) — only .wizard-option-
   checkbox's visual is restyled here, from a small checkbox square into
   a 34x20px pill with a sliding thumb (::after), matching the origin
   design handoff's own toggle-switch spec, without touching the macro
   itself. The macro's own checkmark SVG is hidden (opacity:0) since a
   toggle switch has no checkmark, just thumb position. */
[data-brand="datum-grain"] .wizard-option-row {
  background: var(--color-bg-panel);
  border-radius: var(--radius);
}

[data-brand="datum-grain"] .wizard-option-checkbox {
  width: 34px;
  height: 18px;
  border-radius: 0;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-raised);
  position: relative;
}

[data-brand="datum-grain"] .wizard-option-checkbox svg {
  opacity: 0;
}

[data-brand="datum-grain"] .wizard-option-checkbox::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--color-border-strong);
}

[data-brand="datum-grain"] .wizard-option-row input[type="checkbox"]:checked + .wizard-option-checkbox {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: transparent;
}

[data-brand="datum-grain"] .wizard-option-row input[type="checkbox"]:checked + .wizard-option-checkbox::after {
  left: 18px;
  background: #F5F6F4;
}

/* --- 3D preview dialog ---------------------------------------------------
   .preview3d-panel already rides existing tokens (--color-bg-raised,
   --color-border-strong, --radius-lg) for free; only the backdrop tint
   (hardcoded for the light theme) needs a scoped override to match this
   theme's own .dialog-backdrop spec. */
[data-brand="datum-grain"] .preview3d-overlay {
  background: color-mix(in srgb, var(--color-neutral-900) 35%, transparent);
}

[data-brand="datum-grain"] .preview3d-panel {
  border: 1px solid var(--color-border-strong);
}

/* --- Elevation / plan SVG colours ------------------------------------------
   webapp/svg_render.py writes literal colours as attributes (Graphite
   outlines, Datum blue anchors, burnt-orange failures); CSS rules beat SVG
   presentation attributes, so the theme drives them from its own tokens
   here and the two can never drift. */
[data-brand="datum-grain"] .elevation-svg [stroke="#18191B"],
[data-brand="datum-grain"] .plan-svg [stroke="#18191B"] { stroke: var(--color-text); }
[data-brand="datum-grain"] .elevation-svg [fill="#18191B"],
[data-brand="datum-grain"] .plan-svg [fill="#18191B"] { fill: var(--color-text); }
[data-brand="datum-grain"] .plan-anchor-marker { fill: var(--color-accent); }
[data-brand="datum-grain"] .plan-measure-line-fail { stroke: var(--color-negative); }
[data-brand="datum-grain"] .plan-measure-line-warn { stroke: var(--color-accent); }
[data-brand="datum-grain"] .plan-measure-line-fail + .plan-measure-label { fill: var(--color-negative); }
[data-brand="datum-grain"] .plan-measure-line-warn + .plan-measure-label { fill: var(--color-accent); }

/* --- D+G v2 type, header and primary-button hover -------------------------
   Body copy runs at 87.5% width; the brand bar carries the 1d mark. */
[data-brand="datum-grain"] body { font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
[data-brand="datum-grain"] .app-header { background: var(--color-bg-panel); border-bottom: 1px solid var(--color-border-strong); }
[data-brand="datum-grain"] .header-identity { gap: 12px; }
[data-brand="datum-grain"] .header-mark { display: inline-flex; flex: none; }
[data-brand="datum-grain"] .header-brand { font-weight: 550; letter-spacing: -0.01em; }
[data-brand="datum-grain"] .header-brand-wordmark {
  font-size: 15px; font-weight: 700; font-stretch: 75%; letter-spacing: 0.03em; text-transform: none;
}
[data-brand="datum-grain"] .header-brand-wordmark .plus { color: var(--color-accent); }
[data-brand="datum-grain"] .header-brand-sub {
  font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase;
}
[data-brand="datum-grain"] .btn-primary:hover { background: #3A5AAE; border-color: #3A5AAE; }
[data-brand="datum-grain"] :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- Rail, popovers: the base layer assumed a dark ground ------------------
   default.css colours the rail icons with --color-neutral-300 (light on the
   old dark theme). On Paper they need the muted ink, with a flat blue
   selection instead of the tinted inset bar. Popovers lose their hard-coded
   shadows (no shadows in D+G v2; a Graphite 1px rule does the job). */
[data-brand="datum-grain"] .icon-rail-btn { color: var(--color-text-muted); }
[data-brand="datum-grain"] .icon-rail-btn:hover { color: var(--color-text); background: var(--color-neutral-300); }
[data-brand="datum-grain"] .icon-rail-btn.active {
  color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent);
}
[data-brand="datum-grain"] .icon-rail-group-label { color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.1em; }
[data-brand="datum-grain"] .icon-rail { border-right: 1px solid var(--color-border-strong); }
[data-brand="datum-grain"] .flyout-panel { border-right: 1px solid var(--color-border-strong); }
[data-brand="datum-grain"] .preview3d-panel,
[data-brand="datum-grain"] .checkpoint-dropdown { box-shadow: none; }

/* Standalone toggle switches (mm/cm, VAT): same square switch. */
[data-brand="datum-grain"] .toggle-switch-track { border-radius: 0; border: 1px solid var(--color-border-strong); background: var(--color-bg-raised); }
[data-brand="datum-grain"] .toggle-switch-thumb { border-radius: 0; background: var(--color-border-strong); top: 1px; left: 1px; }
[data-brand="datum-grain"] .toggle-switch input:checked + .toggle-switch-track { background: var(--color-accent); border-color: var(--color-accent); }
[data-brand="datum-grain"] .toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb { background: #F5F6F4; }
[data-brand="datum-grain"] .toggle-switch-label { font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.1em; text-transform: uppercase; }

/* Headings run at the display weight; hairlines are the Rule colour. */
[data-brand="datum-grain"] h1, [data-brand="datum-grain"] h2 { font-weight: 550; letter-spacing: -0.015em; word-spacing: 0.08em; }
[data-brand="datum-grain"] h3, [data-brand="datum-grain"] h4 { font-weight: 550; letter-spacing: 0; word-spacing: 0.08em; }
[data-brand="datum-grain"] .header-brand, [data-brand="datum-grain"] .header-brand-lg { letter-spacing: 0; word-spacing: 0.08em; }
[data-brand="datum-grain"] .wizard-options-group-label {
  font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted);
}
[data-brand="datum-grain"] .status-pill { border-radius: 0; }

/* Radius 0 everywhere: the pills/circles hard-coded in default.css. Tags and
   pills take the D+G tag treatment (small uppercase, 75% width). */
[data-brand="datum-grain"] .status-badge,
[data-brand="datum-grain"] .cabinet-row.selected::before,
[data-brand="datum-grain"] .wizard-tile-check,
[data-brand="datum-grain"] .function-view-anchor-badge,
[data-brand="datum-grain"] .toggle-switch-thumb { border-radius: 0; }
[data-brand="datum-grain"] .wizard-option-tag,
[data-brand="datum-grain"] .rag-pill,
[data-brand="datum-grain"] .pricing-pill {
  border-radius: 0; font-weight: 700; font-stretch: 75%; letter-spacing: 0.1em; text-transform: uppercase;
}

/* --- Pricing admin and admin data tables (D+G data-table pattern) ----------
   Tabular figures at 87.5% width; a 1px Graphite rule above and below the
   body, 1px Rule dividers between rows, and 12px small-caps column labels at
   75% width. Applies to every .pricing-table (products, suppliers, price
   versions and history, purchase list, admin logins) and the lifecycle
   admin's .admin-table. */
[data-brand="datum-grain"] .pricing-table,
[data-brand="datum-grain"] .admin-table { font-variant-numeric: tabular-nums; }

[data-brand="datum-grain"] .pricing-table th,
[data-brand="datum-grain"] .admin-table th {
  font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-3);
}
[data-brand="datum-grain"] .pricing-table td,
[data-brand="datum-grain"] .admin-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3);
}
[data-brand="datum-grain"] .pricing-table tbody tr:last-child td,
[data-brand="datum-grain"] .admin-table tbody tr:last-child td { border-bottom-color: var(--color-border-strong); }
[data-brand="datum-grain"] .pricing-table tbody tr:hover,
[data-brand="datum-grain"] .admin-table tbody tr:hover { background: var(--color-neutral-200); }
[data-brand="datum-grain"] .pricing-table-card { border: 1px solid var(--color-border); }
[data-brand="datum-grain"] .pricing-table-card .pricing-table th { border-top: 0; border-bottom: 1px solid var(--color-border-strong); }

/* Cards and tags */
[data-brand="datum-grain"] .pricing-card { border: 1px solid var(--color-border); background: var(--color-bg-raised); }
[data-brand="datum-grain"] .pricing-card-title { font-weight: 600; letter-spacing: 0; word-spacing: 0.08em; }
[data-brand="datum-grain"] .pricing-tag {
  border-radius: 0; font-size: 11px; font-weight: 700; font-stretch: 75%; letter-spacing: 0.1em; text-transform: uppercase;
}
[data-brand="datum-grain"] .supplier-table input:not([type="checkbox"]),
[data-brand="datum-grain"] .supplier-price-table input,
[data-brand="datum-grain"] .supplier-price-table select { border-radius: 0; background: var(--color-bg-raised); }