/* ── tokens: generated by scripts/build_erp_themes.py — edit the palette there ── */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");
:root {
  --brand-t-deep: #030c1d;
  --brand-t-deep-rgb: 3, 12, 29;
  --brand-t-surface: #0f1535;
  --brand-t-surface-rgb: 15, 21, 53;
  --brand-t-card: #1a1f3d;
  --brand-t-card-rgb: 26, 31, 61;
  --brand-t-hover: #242a4a;
  --brand-t-hover-rgb: 36, 42, 74;
  --brand-t-text: #a0aec0;
  --brand-t-text-rgb: 160, 174, 192;
  --brand-t-bright: #e0e6ed;
  --brand-t-bright-rgb: 224, 230, 237;
  --brand-t-muted: #8a93ab;
  --brand-t-muted-rgb: 138, 147, 171;
  --brand-t-border: #1e2548;
  --brand-t-border-rgb: 30, 37, 72;
  --brand-t-accent: #7b2fbe;
  --brand-t-accent-rgb: 123, 47, 190;
  --brand-t-accent-alt: #01ff70;
  --brand-t-accent-alt-rgb: 1, 255, 112;
  --brand-t-success: #01b574;
  --brand-t-success-rgb: 1, 181, 116;
  --brand-t-warning: #ffb547;
  --brand-t-warning-rgb: 255, 181, 71;
  --brand-t-error: #ff5a5a;
  --brand-t-error-rgb: 255, 90, 90;
  --brand-t-info: #4d9bff;
  --brand-t-info-rgb: 77, 155, 255;
  --brand-t-on-accent: #ffffff;
  --brand-t-on-accent-alt: #000000;
  --brand-t-on-success: #000000;
  --brand-t-on-warning: #000000;
  --brand-t-on-error: #000000;
  --brand-t-on-info: #000000;
  --brand-t-accent-ink: #a983d4;
  --brand-t-accent-ink-rgb: 169, 131, 212;
  --brand-t-gray-50: #dae1e8;
  --brand-t-gray-100: #d5dbe3;
  --brand-t-gray-200: #c8ced6;
  --brand-t-gray-300: #b6bdc5;
  --brand-t-gray-400: #838a96;
  --brand-t-gray-500: #575f6c;
  --brand-t-gray-600: #38404f;
  --brand-t-gray-700: #262f3e;
  --brand-t-gray-800: #121b2c;
  --brand-t-gray-900: #0a1323;
  --brand-t-gray-950: #030c1d;
  --brand-t-accent-glow: rgba(123, 47, 190, 0.18);
  --brand-t-border-active: rgba(123, 47, 190, 0.45);
  --brand-t-radius: 6px;
  --font-primary: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'JetBrains Mono', ui-monospace, monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ── end generated tokens ── */

/* ═══════════════════════════════════════════════════════════════════════════
   EVA-01 / NERV Bridge — theme
   ═══════════════════════════════════════════════════════════════════════════
   Graduated from erp-dark.css (2026-03-02, d74b78f), renamed onto the showcase
   token vocabulary so this file is interchangeable with the 68 themes in
   golden-frontend-template/public/themes/.

   This is theme #69. Same schema as every other theme file:
   --brand-t-* for colour, --font-* for type. Nothing here knows about
   Bootstrap, Tabler, or Django — that's the binding layer's job
   (tabler-bindings.css for the ERP; the Qwik equivalent for the storefront).

   Two layers live here:

     1. TOKENS      — the palette. Rebind these and the whole ERP re-skins.
     2. AESTHETICS  — the rules no variable can express, and which ARE the
                      EVA-01 identity: the circuit-board field, glassmorphic
                      cards, the purple focus halo, gradient rules, the
                      mono-caps stencil. Migrated from erp-dark.css 2026-07-16.

   What the aesthetic layer targets: component class names (.card, .badge,
   .modal-backdrop). Those are Bootstrap's shared vocabulary, not Tabler's —
   any BS5 skin answers to them. What it must never touch is --tblr-*, which
   is the binding layer's private business. That line is the architecture.

   DARK ONLY, BY DESIGN. EVA-01 is a dark identity; it is scoped to
   [data-bs-theme="dark"] (the attribute Tabler keys colour mode off — the
   ATTRIBUTE keeps Bootstrap's name even though the VARIABLES are --tblr-*).
   In light mode the ERP falls through to stock Tabler, which is correct:
   there is no light EVA-01.

   ON !important: erp-dark.css needed it on ~200 declarations to out-shout
   Soft UI's baked-in specificity. Under Tabler this file needs it **ZERO**
   times — everything wins on plain specificity + load order. (The last one,
   on the body background-color, went away with the .bg-gray-100 teardown;
   see §2.) Do not add one without first checking, in the browser, what it is
   actually fighting — all three this file originally shipped with turned out
   to be cargo cult. A new !important here means something upstream regressed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Palette, fonts and radius now come from the generated block at the top of
   this file (scripts/build_erp_themes.py, palette "eva-01"). Only the token no
   palette field can express stays hand-written. */
:root {
  --brand-t-card-gradient: linear-gradient(
    135deg,
    rgba(15, 21, 53, 0.9) 0%,
    rgba(26, 31, 61, 0.7) 100%
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. AESTHETICS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The circuit-board field ──────────────────────────────────────────────
   The single most identity-defining rule in the theme. A 60×60 SVG tile:
   crossed traces with solder points at each node and edge midpoint.

   ⚠ TOKEN LEAK — the only one in this file. A data: URI is an opaque string,
   not a stylesheet, so the SVG cannot read var(--brand-t-border). #1e2548 is
   hardcoded twice inside it (%231e2548 = URL-escaped #1e2548). Re-brand the
   border token and the traces will NOT follow — hand-edit both occurrences
   below to match. The real fixes, when this matters: mask-image + a
   background-color, or ship the tile as a static .svg. Not worth it today.

   Historical note: this rule used to carry the file's only !important, to
   beat Tabler's .bg-gray-100 utility (Bootstrap marks every .bg-* !important,
   so specificity alone could never win) which base.html put on <body> as a
   Soft UI leftover. The class is gone from <body> and the !important with it
   — Tabler's own `body { background-color: var(--tblr-body-bg) }` is a plain
   element selector, which this beats on specificity. **This file now has zero
   !important declarations.** If one reappears, something upstream regressed. */
[data-bs-theme="dark"] body {
  background-color: var(--brand-t-deep);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%231e2548' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%231e2548'/%3E%3Ccircle cx='0' cy='30' r='1' fill='%231e2548'/%3E%3Ccircle cx='60' cy='30' r='1' fill='%231e2548'/%3E%3Ccircle cx='30' cy='0' r='1' fill='%231e2548'/%3E%3Ccircle cx='30' cy='60' r='1' fill='%231e2548'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Mono everything, except the icon fonts — glyph fonts must keep their own
   family or they render as tofu. The :not() chain lists Font Awesome (.fas
   /.far/.fab/[class*="fa-"]) and Nucleo (.ni/[class*="ni-"]), both still
   loaded by base.html.

   NOT extended to Tabler Icons (.ti / [class*="ti-"]) even though Tabler is
   now the framework: [class*="ti-"] is a substring match and would also
   exempt any class that merely CONTAINS "ti-" — "multi-select", say. The
   existing fa-/ni- entries carry the same hazard; adding a third is a
   regression waiting to happen. Revisit if/when the ERP actually adopts
   Tabler Icons, and use a real prefix match if so. */
[data-bs-theme="dark"],
[data-bs-theme="dark"] *:not(i):not(.fas):not(.far):not(.fab):not(.ni):not([class*="fa-"]):not([class*="ni-"]) {
  font-family: var(--font-mono);
}

/* ── The stencil: mono-caps labels ────────────────────────────────────────
   DEDUP: erp-dark.css carried this same recipe SIX times (L256 card headers,
   L345 form labels, L460 table heads, L493 tabs, L521 badges, L614 modal
   titles). Every copy repeated font-family + text-transform verbatim; only
   the tracking (0.04/0.06em) and size ever differed. Collapsed to one rule
   plus a --_stencil-track knob — the private-by-convention "_" marks it as
   internal to this layer, NOT part of the public token contract (the
   --brand-t- and --font- families) that other themes implement. Each element
   below now declares only what is genuinely its own. */
[data-bs-theme="dark"] .card .card-header h6,
[data-bs-theme="dark"] .card .card-header h5,
[data-bs-theme="dark"] .card .card-header .h6,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .nav-tabs .nav-link,
[data-bs-theme="dark"] .badge,
[data-bs-theme="dark"] .modal-header .modal-title {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--_stencil-track, 0.04em);
}

[data-bs-theme="dark"] .card .card-header h6,
[data-bs-theme="dark"] .card .card-header h5,
[data-bs-theme="dark"] .card .card-header .h6 {
  --_stencil-track: 0.06em;
  color: var(--brand-t-bright);
  font-size: 0.8rem;
}

[data-bs-theme="dark"] .form-label {
  color: var(--brand-t-muted);
  font-size: 0.75rem;
}

[data-bs-theme="dark"] .table > thead > tr > th {
  --_stencil-track: 0.06em;
  color: var(--brand-t-muted);
  font-size: 0.7rem;
}

[data-bs-theme="dark"] .badge {
  font-size: 0.65rem;
  font-weight: 500;
}

[data-bs-theme="dark"] .modal-header .modal-title {
  --_stencil-track: 0.06em;
  color: var(--brand-t-bright);
}

/* ── Cards — glassmorphism ────────────────────────────────────────────────
   The gradient + blur + hover glow. Tabler's .card paints a flat
   var(--tblr-card-bg); the shorthand `background` here replaces it wholesale.
   Specificity (0,2,0) vs Tabler's (0,1,0) — no !important needed.

   The blur only reads as glass because the circuit field is behind it: the
   card gradient tops out at 0.9 alpha, so the traces show through, softened.
   Kill the body background and the glassmorphism silently degrades to a flat
   panel. The two rules are one effect. */
[data-bs-theme="dark"] .card {
  background: var(--brand-t-card-gradient);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--brand-t-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: border-color 300ms, box-shadow 300ms;
}

[data-bs-theme="dark"] .card:hover {
  border-color: var(--brand-t-border-active);
  box-shadow: 0 0 20px var(--brand-t-accent-glow), 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ── The focus halo ───────────────────────────────────────────────────────
   The purple bloom on focus. Highest-traffic rule in the theme: 63 inputs on
   document_form.html alone. Tabler's own .form-control:focus is (0,2,0) and
   sets `box-shadow: none` — this (0,3,0) rule beats it on specificity, and
   would beat it on load order anyway. */
[data-bs-theme="dark"] .form-control:focus {
  background-color: var(--brand-t-hover);
  border-color: var(--brand-t-accent);
  box-shadow: 0 0 10px var(--brand-t-accent-glow),
              0 0 20px color-mix(in srgb, var(--brand-t-accent) 10%, transparent);
  color: var(--brand-t-bright);
}

/* ── Select chevron ───────────────────────────────────────────────────────
   Tabler ships a chevron on .form-select via --tblr-form-select-bg-img, but
   (a) recolouring it means touching a --tblr-* var, which is the binding
   layer's job, not this file's, and (b) it does nothing for bare <select> or
   .form-control selects, which the ERP uses in quantity. So: paint our own.
   The `background` shorthand overrides Tabler's background-image outright.

   ⚠ Same data-URI token leak as the circuit field: stroke='%23a0aec0' is
   --brand-t-text hardcoded. Re-brand the text token and the chevron won't
   follow. */
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] select.form-control,
[data-bs-theme="dark"] select.form-control-sm,
[data-bs-theme="dark"] .form-select {
  background: var(--brand-t-card) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 12px;
  border: 1px solid var(--brand-t-border);
  color: var(--brand-t-bright);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

[data-bs-theme="dark"] select:focus,
[data-bs-theme="dark"] select.form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--brand-t-hover);
  border-color: var(--brand-t-accent);
  box-shadow: 0 0 10px var(--brand-t-accent-glow);
}

/* ── Tabs — underline only ────────────────────────────────────────────────
   No pill, no box: a 2px accent rule under the active tab with a glow bleed
   beneath it. Tabler's own .active draws a card-coloured tab body and
   explicitly sets border-bottom-color:transparent, so every one of these
   declarations is doing real work. */
[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--brand-t-muted);
  border: none;
  position: relative;
  transition: color 150ms;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--brand-t-accent);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--brand-t-accent);
  box-shadow: 0 2px 8px var(--brand-t-accent-glow);
}

/* ── Modal ────────────────────────────────────────────────────────────────
   Purple halo on the dialog, blurred field behind it.

   The opacity:1 below is load-bearing, not tidying. Tabler multiplies the
   backdrop by --tblr-backdrop-opacity: 0.24 — less than half of Bootstrap's
   stock 0.5, which is what erp-dark.css was tuned against. Left alone, our
   70% wash composites to ~17% and the blur has nothing to sit on. Forcing it
   to 1 hands the alpha back to the colour, where a theme can control it.
   No !important needed: .modal-backdrop.show is (0,2,0) with no !important
   of its own, so this (0,3,0) rule simply outranks it. */
[data-bs-theme="dark"] .modal-content {
  background: var(--brand-t-surface);
  border: 1px solid var(--brand-t-border);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--brand-t-accent-glow);
}

[data-bs-theme="dark"] .modal-backdrop {
  background: color-mix(in srgb, var(--brand-t-deep) 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

[data-bs-theme="dark"] .modal-backdrop.show {
  opacity: 1;
}

/* ── Dropdown glow ────────────────────────────────────────────────────────
   Menus don't just drop, they light up. */
[data-bs-theme="dark"] .dropdown-menu {
  background: var(--brand-t-surface);
  border: 1px solid var(--brand-t-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 15px var(--brand-t-accent-glow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Glass navbar ─────────────────────────────────────────────────────────
   .navbar-main is Soft UI's class, still on the <nav> in navigation.html. It
   survives here because the markup does — if the Tabler migration renames it
   to .navbar-expand-* or similar, retarget this rule or the glass is lost
   silently (no error, just a flat bar). */
[data-bs-theme="dark"] .navbar-main {
  background: color-mix(in srgb, var(--brand-t-surface) 50%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--brand-t-border);
}

/* ── Gradient rules ───────────────────────────────────────────────────────
   Rules that fade in from nothing and back out — no hard stops anywhere in
   the UI.

   Two Tabler defaults had to be undone here, and both would have failed
   SILENTLY (a rule that renders as nothing looks like a rule that isn't
   there):
     height: 1px  — Tabler draws hr with border-top and zero box height.
                    `border: none` therefore collapses it to nothing at all.
                    Soft UI gave hr an explicit height, so erp-dark.css never
                    needed this line. It does now.
     opacity: 1   — Tabler ships hr at opacity .16, which would wash the
                    gradient out to roughly invisible against the deep field. */
[data-bs-theme="dark"] hr {
  height: 1px;
  border: none;
  background-image: linear-gradient(90deg, transparent, var(--brand-t-border), transparent);
  opacity: 1;
}

/* ── Sticky action bar ────────────────────────────────────────────────────
   Sits under document_form / form / customer_address_form. erp-custom.css
   loads after this file and sets `background: #fff` on .erp-action-bar, but
   at (0,1,0) against this rule's (0,2,0) — specificity wins, order doesn't
   enter into it. No !important required. */
[data-bs-theme="dark"] .erp-action-bar {
  background: var(--brand-t-surface);
  border-top: 1px solid var(--brand-t-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

/* ── Scrollbar ────────────────────────────────────────────────────────────
   6px, trackless-looking, accent on grab. Tabler barely touches scrollbars
   (one rule in the whole build), so these land uncontested. */
[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--brand-t-deep);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--brand-t-border);
  border-radius: 3px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--brand-t-accent);
}

/* Firefox — no ::-webkit- equivalents, only these two properties. */
[data-bs-theme="dark"] {
  scrollbar-color: var(--brand-t-border) var(--brand-t-deep);
  scrollbar-width: thin;
}

/* ── AJAX search dropdowns ────────────────────────────────────────────────
   Same glow as .dropdown-menu, but these are hand-rolled .list-group results
   (document_form.html) that Bootstrap's dropdown CSS never sees. Three
   selectors, one look: .ajax-search-widget wraps most of them; the supplier
   and variant pickers predate the wrapper and are matched directly. */
[data-bs-theme="dark"] .ajax-search-widget .list-group,
[data-bs-theme="dark"] .sg-supplier-results.list-group,
[data-bs-theme="dark"] .variant-search-results.list-group {
  background: var(--brand-t-surface);
  border: 1px solid var(--brand-t-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 12px var(--brand-t-accent-glow);
}

[data-bs-theme="dark"] .ajax-search-widget .list-group-item,
[data-bs-theme="dark"] .sg-supplier-results .list-group-item,
[data-bs-theme="dark"] .variant-search-results .list-group-item {
  background: transparent;
  border-color: var(--brand-t-border);
}

[data-bs-theme="dark"] .ajax-search-widget .list-group-item:hover,
[data-bs-theme="dark"] .ajax-search-widget .list-group-item-action:hover,
[data-bs-theme="dark"] .sg-supplier-results .list-group-item:hover,
[data-bs-theme="dark"] .sg-supplier-results .list-group-item-action:hover,
[data-bs-theme="dark"] .variant-search-results .list-group-item:hover,
[data-bs-theme="dark"] .variant-search-results .list-group-item-action:hover {
  background: var(--brand-t-hover);
  color: var(--brand-t-bright);
}

/* ── Theme picker ─────────────────────────────────────────────────────────
   The binary moon/sun toggle (.theme-toggle-icon) was replaced by the
   N-theme navbar dropdown driven by settings.ERP_THEMES. Its chrome lives
   in erp-custom.css, NOT here: the picker is how you leave a theme, so it
   cannot ship inside one. Only the dark-mode accent for the trigger belongs
   in this file. */
[data-bs-theme="dark"] #navbarThemeDropdown:hover {
  color: var(--brand-t-warning);
}
</content>