/* ═══════════════════════════════════════════════════════════════════════════
   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
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds — was --bridge-{deep,surface,card,hover} */
  --brand-t-deep:    #030c1d;
  --brand-t-surface: #0f1535;
  --brand-t-card:    #1a1f3d;
  --brand-t-hover:   #242a4a;

  /* Text — was --bridge-{bright,text,muted} */
  --brand-t-bright:  #e0e6ed;
  --brand-t-text:    #a0aec0;
  --brand-t-muted:   #5a6178;

  /* Accents — was --eva-purple / --eva-green (+ glows).
     Generalised to accent/accent-alt so the slot is re-brandable, which is
     exactly the move showcase already made when it derived its vocabulary
     from this file. */
  --brand-t-accent:           #7B2FBE;
  --brand-t-accent-alt:       #01FF70;
  --brand-t-accent-glow:      rgba(123, 47, 190, 0.20);
  --brand-t-accent-alt-glow:  rgba(1, 255, 112, 0.13);

  /* Semantic — was --bridge-{info,success,warning,error} */
  --brand-t-info:    #0075ff;
  --brand-t-success: #01b574;
  --brand-t-warning: #ffb547;
  --brand-t-error:   #E31A1A;

  /* Borders — was --bridge-border{,-active} */
  --brand-t-border:        #1e2548;
  --brand-t-border-active: rgba(123, 47, 190, 0.33);

  /* Type */
  --font-primary:  'JetBrains Mono', 'Open Sans', system-ui, sans-serif;
  --font-display:  'JetBrains Mono', monospace;
  --font-mono:     'JetBrains Mono', monospace;
  --font-terminal: 'JetBrains Mono', monospace;

  /* Signature surface — was --card-bg */
  --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>