/* ============================================================================
   VELORA THEME — the single design DNA file (v204 "VELORA OS")
   ----------------------------------------------------------------------------
   WANT A NEW DESIGN? CHANGE IT HERE. Every color, radius, shadow, font, spacing
   and motion value the entire app uses is defined below as a token. Components
   (velora.css, components.css, views) only ever reference these variables —
   they never hardcode design decisions. This file is loaded LAST, so whatever
   you write here wins everywhere, light and dark, app and login.
   ========================================================================== */

:root{
  /* ── Identity ──────────────────────────────────────────────────────────── */
  --accent:#059669;                 /* THE brand color (Emerald) */
  --accent-up:#34d399;              /* its lighter gradient partner */
  --accent-soft:#e9f9f1;            /* washed accent for fills/hover */
  --accent-2:#f59e0b;               /* secondary warm accent (warnings, highlights) */
  --accent-2-soft:#fffbeb;
  --v-grad:linear-gradient(115deg,#047857,#059669 55%,#34d399);

  /* ── The OS metaphor: desk (page background) vs window (app surface) ───── */
  --os-desk:#eef2f0;                                   /* the desk the window floats on */
  --os-desk-glow:radial-gradient(900px 520px at 8% -6%, rgba(5,150,105,.07), transparent 70%);
  --os-window-ring:rgba(15,42,32,.08);                 /* 1px window outline */
  --os-window-radius:18px;
  --os-rail-w:68px;                                    /* icon-rail width (desktop) */

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Manrope','Inter',system-ui,sans-serif;   /* headings, nav, KPIs, money */

  /* ── Shape & elevation ─────────────────────────────────────────────────── */
  --v-radius:14px;
  --v-radius-sm:10px;
  --v-shadow-sm:0 1px 2px rgba(16,44,34,.06), 0 1px 1px rgba(16,44,34,.04);
  --v-shadow-md:0 6px 18px -6px rgba(6,78,59,.14), 0 2px 6px rgba(16,44,34,.06);
  --v-shadow-window:0 24px 70px -28px rgba(15,42,32,.25), 0 4px 16px rgba(15,42,32,.06);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --v-ease:cubic-bezier(.2,.7,.3,1);
  --v-fast:120ms;

  /* ── Z-scale (v208): ONE ladder for every floating thing — no more overlap
        roulette. In-page sticky bars < popovers/dropdowns < the topbar <
        drawers/palette < modals < confirm < toasts. ─────────────────────── */
  --z-sticky:20;      /* in-page sticky bars (bulk bar, modal side tabs)   */
  --z-pop:35;         /* row popovers, More-tabs dropdown                  */
  --z-topbar:40;      /* the command strip                                 */
  --z-drawer:800;     /* bell drawer                                       */
  --z-palette:900;    /* Ctrl+K                                            */
  --z-modal:1000;     /* hold/bulk modals                                  */
  --z-confirm:1200;   /* OS confirm dialog                                 */
  --z-toast:1300;     /* toasts, always on top                             */
}

html[data-theme=dark]{
  --accent:#10b981;
  --accent-up:#34d399;
  --accent-soft:#0f2a20;
  --os-desk:#070b0a;
  --os-desk-glow:radial-gradient(900px 520px at 8% -6%, rgba(16,185,129,.08), transparent 70%);
  --os-window-ring:rgba(255,255,255,.07);
  --v-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --v-shadow-md:0 8px 22px -8px rgba(0,0,0,.55);
  --v-shadow-window:0 24px 80px -24px rgba(0,0,0,.7);
}

/* ============================================================================
   v218 "DESIGN 2026 + TURBO" — surgical platform-native layer.
   Everything below is progressive enhancement: each block is guarded by
   @supports / @media, so older browsers render the v204 OS design untouched.
   ========================================================================== */

/* ── TURBO: cross-document View Transitions — navigation melts, not blinks.
      Works hand-in-hand with the Speculation Rules prerender (header.php):
      prerendered activation + a 160ms root cross-fade reads as "instant". ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── Motion 2026: physical spring easing (CSS linear()) for the small moves.
      --v-ease keeps its cubic-bezier fallback; browsers that know linear()
      get a real damped spring. ── */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --v-ease: linear(0, 0.0087 1.04%, 0.0351 2.16%, 0.0817 3.42%, 0.1832 5.86%,
                     0.4257 10.99%, 0.5936 14.85%, 0.7213 18.28%, 0.8262 21.72%,
                     0.9095 25.44%, 0.9558 28.24%, 0.9909 31.55%, 1.0128 35.5%,
                     1.0212 40.35%, 1.0166 47.24%, 1.0028 63.75%, 1 100%);
  }
}

/* ── Color 2026: the brand tokens re-expressed in OKLCH (wider P3 gamut,
      perceptually even hover ramps). Same visual identity, richer chroma on
      displays that can show it. sRGB values above remain the fallback. ── */
@supports (color: oklch(60% 0.15 160)) {
  :root {
    --accent: oklch(59.5% 0.132 163);
    --accent-up: oklch(78% 0.138 166);
    --accent-soft: oklch(96.5% 0.026 165);
    --accent-2: oklch(76.5% 0.16 70);
    --v-grad: linear-gradient(115deg, oklch(51% 0.115 165), oklch(59.5% 0.132 163) 55%, oklch(78% 0.138 166));
  }
  html[data-theme=dark] {
    --accent: oklch(69% 0.14 163);
    --accent-up: oklch(78% 0.138 166);
    --accent-soft: oklch(28% 0.045 168);
  }
}

/* ── Liquid Glass (surgical): the OS shell surfaces — topbar, sidebar drawer,
      dropdown/popover panes and the modal shell — get real translucency with
      saturation, a specular top edge, and a graceful opaque fallback. Content
      cards stay opaque: glass is for CHROME, never for reading surfaces. ── */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mc-topbar {
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(15, 42, 32, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  }
  html[data-theme=dark] .mc-topbar {
    background: rgba(10, 15, 13, .52);
    border-bottom-color: rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .vn-panel, .iv7-tabpop, .iv7-pop, .hunter-ai-panel {
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 50px -18px rgba(15,42,32,.35);
  }
  html[data-theme=dark] .vn-panel,
  html[data-theme=dark] .iv7-tabpop,
  html[data-theme=dark] .iv7-pop,
  html[data-theme=dark] .hunter-ai-panel {
    background: rgba(14, 19, 17, .68);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 50px -18px rgba(0,0,0,.7);
  }
  #holdViewModal [data-modal-overlay] {
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
  }
  .vk-box {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    backdrop-filter: blur(26px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 24px 64px rgba(0,0,0,.35);
  }
  html[data-theme=dark] .vk-box {
    background: rgba(14, 19, 17, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 64px rgba(0,0,0,.6);
  }
  @media (max-width: 1023.5px) {
    .mc-sidebar {
      background: rgba(255, 255, 255, .66);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      backdrop-filter: blur(24px) saturate(1.6);
    }
    html[data-theme=dark] .mc-sidebar { background: rgba(10, 15, 13, .62); }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .mc-topbar, .vn-panel, .iv7-tabpop, .iv7-pop, .hunter-ai-panel, .mc-sidebar, .vk-box {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--surface, #fff) !important;
  }
}

/* ── Scroll-driven micro-reveals: stat strips and cards ease in as they enter
      the viewport. Pure CSS (animation-timeline: view()); zero JS, zero effect
      on browsers without support, disabled for reduced motion. ── */
@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    .v-statstrip .v-stat, .aut-card, .ix-card {
      animation: v218-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}
@keyframes v218-rise {
  from { opacity: .35; transform: translateY(9px); }
  to   { opacity: 1;   transform: none; }
}

/* ── v219: base-select — native styled dropdown, fleet-wide (progressive; theme.css loads
      on every view so the Invoices toolbar + any future select share ONE definition). ── */
@supports (appearance: base-select){
  select.ix-baseselect,select.ix-baseselect::picker(select){appearance:base-select}
  select.ix-baseselect{border:1px solid var(--muted-2,#e2e8f0);border-radius:10px;padding:5px 10px;
    font-size:12px;background:var(--surface,#fff);color:inherit;cursor:pointer}
  select.ix-baseselect::picker(select){border:1px solid var(--muted-2,#e2e8f0);border-radius:12px;
    box-shadow:0 18px 50px -18px rgba(15,42,32,.35);background:var(--surface,#fff);padding:6px}
  select.ix-baseselect option{border-radius:8px;padding:7px 10px}
  select.ix-baseselect option:hover{background:var(--surface-2,#f1f5f9)}
}

/* ============================================================================
   v231 · VELORA PHANTOM EDITION
   Canonical presentation DNA. Lightweight by construction: gradients and
   borders only, no image backgrounds, no authenticated backdrop blur, no new
   script, and motion limited to compositor-friendly transform/opacity.
   ========================================================================== */
:root{
  --phantom-obsidian:#063b33;
  --phantom-forest:#075343;
  --phantom-mint:#7de9bc;
  --phantom-mint-pale:#d9f9e9;
  --phantom-violet:#7659dc;
  --phantom-violet-pale:#f0ecff;
  --phantom-ivory:#f6f4ec;

  --bg:#f3f2eb;
  --surface:#fffefa;
  --surface-2:#f8f8f2;
  --surface-3:#edf5ef;
  --line:#dde7df;
  --line-2:#e9eee9;
  --line-accent:#cdeade;
  --text:#102f29;
  --muted:#63736d;
  --muted-2:#86928d;
  --accent:#087b5e;
  --accent-up:#2fc397;
  --accent-2:#7659dc;
  --accent-soft:#eaf8f1;
  --accent-2-soft:#f2efff;
  --v-grad:linear-gradient(110deg,#075343,#0b9871 58%,#45c7a2);
  --os-desk:#eef1eb;
  --os-desk-glow:radial-gradient(820px 560px at 4% 0%,rgba(125,233,188,.17),transparent 66%),radial-gradient(720px 520px at 100% 90%,rgba(118,89,220,.055),transparent 68%);
  --os-window-ring:rgba(6,59,51,.10);
  --os-window-radius:26px;
  --os-rail-w:232px;
  --v-radius:18px;
  --v-radius-sm:12px;
  --v-shadow-sm:0 1px 2px rgba(6,59,51,.04),0 8px 24px -20px rgba(6,59,51,.25);
  --v-shadow-md:0 18px 42px -30px rgba(6,59,51,.36),0 2px 8px rgba(6,59,51,.04);
  --v-shadow-window:0 30px 90px -48px rgba(6,45,39,.38),0 5px 18px rgba(6,59,51,.05);
}

html[data-theme=dark]{
  --phantom-ivory:#0d1815;
  --bg:#07100e;
  --surface:#101b18;
  --surface-2:#13231e;
  --surface-3:#172d26;
  --line:#244038;
  --line-2:#1b332c;
  --line-accent:#285d4d;
  --text:#effbf5;
  --muted:#9aafa7;
  --muted-2:#718a81;
  --accent:#36d29f;
  --accent-up:#7de9bc;
  --accent-2:#9b84ee;
  --accent-soft:#102f26;
  --accent-2-soft:#241f3c;
  --os-desk:#060d0b;
  --os-desk-glow:radial-gradient(820px 560px at 4% 0%,rgba(54,210,159,.075),transparent 66%),radial-gradient(720px 520px at 100% 90%,rgba(118,89,220,.06),transparent 68%);
  --os-window-ring:rgba(156,240,204,.09);
}

body.velora-phantom-edition{
  background-color:var(--os-desk);
  background-image:var(--os-desk-glow),linear-gradient(135deg,var(--os-desk),color-mix(in srgb,var(--os-desk) 88%,#fff));
}
.velora-phantom-edition .velora-grain{opacity:.08;background-size:22px 22px}
.velora-phantom-edition .app-shell{position:relative;isolation:isolate}
.velora-phantom-edition .app-shell::before,
.velora-phantom-edition .app-shell::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%}
.velora-phantom-edition .app-shell::before{left:-270px;top:-330px;width:720px;height:720px;border:1px solid rgba(8,123,94,.09);box-shadow:0 0 0 54px rgba(255,255,255,.07),0 0 0 55px rgba(118,89,220,.035)}
.velora-phantom-edition .app-shell::after{right:-210px;bottom:-260px;width:520px;height:520px;border:1px dashed rgba(8,123,94,.075)}

/* Readable surfaces stay opaque. Glass is deliberately removed from the hot
   authenticated shell to keep scrolling and low-power GPUs fast. */
.velora-phantom-edition .app-frame,
.velora-phantom-edition .mc-topbar,
.velora-phantom-edition .mc-sidebar,
.velora-phantom-edition .vn-panel,
.velora-phantom-edition .vk-box,
.velora-phantom-edition .hunter-ai-panel{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.velora-phantom-edition .content-zone{background:var(--surface);border-color:var(--line);box-shadow:var(--v-shadow-window),0 0 0 1px var(--os-window-ring)}
.velora-phantom-edition .main-surface{background:linear-gradient(180deg,var(--surface) 0,var(--surface-2) 100%)}

.velora-phantom-edition :where(.mc-card,.v-kpi,.op-card,.us-card,.stx-card,.mo-card,.sup-card,.np-card,.aa-card,.ix-card,.watch-card,.rl-card,.aut-card,.shell-card){
  border-color:var(--line);
  background:var(--surface);
  box-shadow:var(--v-shadow-sm);
}
.velora-phantom-edition :where(.v-input,.op-input,.us-input,.stx-input,.sup-input,.np-input,.aa-input,.ix-input,input[type="text"],input[type="search"],input[type="email"],input[type="password"],select,textarea):focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent);
}
.velora-phantom-edition :where(.v-btn-primary,.quick-action,.sup-btn[type="submit"]){background:var(--v-grad);border-color:transparent;color:#fff}
.velora-phantom-edition :where(.v-btn,.op-btn,.us-btn,.stx-btn,.sup-btn,.np-btn,.aa-btn,.ix-btn,.ac-btn){transition:transform 140ms var(--v-ease),border-color 140ms ease,box-shadow 140ms ease}
.velora-phantom-edition :where(.v-btn,.op-btn,.us-btn,.stx-btn,.sup-btn,.np-btn,.aa-btn,.ix-btn,.ac-btn):active{transform:translateY(1px) scale(.99)}
.velora-phantom-edition :where(table) thead th{color:var(--muted-2);background:var(--surface-2);border-color:var(--line);letter-spacing:.075em}
.velora-phantom-edition :where(table) tbody td{border-color:var(--line-2)}
.velora-phantom-edition :where(table) tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 58%,var(--surface))}
.velora-phantom-edition ::selection{background:rgba(125,233,188,.36);color:var(--phantom-obsidian)}

/* ── Phantom application grammar -------------------------------------------------
   One lightweight visual language for every operational screen.  These selectors
   deliberately sit above the historical view skins without changing their layout
   contracts.  No blur, image, filter or paint-heavy fixed layer is introduced. */
.velora-phantom-edition .main-surface :where(
  .op-shell,.ac-shell,.acx-shell,.us-shell,.stx-shell,.mo-page,.sup-shell,
  .np-shell,.au-shell,.aut-shell,.bk-shell,.rl-shell,.iv-shell
){color:var(--text)}

.velora-phantom-edition .main-surface :where(
  .op-oshead,.op-pagehead,.ac-pagehead,.acx-dirhead,.us-pagehead,.us21-head,
  .stx-pagehead,.st21-head,.mo-oshead,.mo-pagehead,.sup-hero,.np-hero,.np21-head,
  .au-hero,.aut-hero,.bk-hero,.rl-head,.iv7-tabs,.bkx-head
){
  position:relative;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:
    linear-gradient(102deg,rgba(125,233,188,.12),transparent 34%,rgba(118,89,220,.055)),
    var(--surface)!important;
  box-shadow:inset 0 2px 0 rgba(125,233,188,.55),var(--v-shadow-sm)!important;
}

.velora-phantom-edition .main-surface :where(
  .op-pageheadText,.ac-pageheadText,.us-pageheadText,.stx-pageheadText,
  .mo-pageheadText,.sup-heroText,.np-heroText,.au-heroTop,.aut-heroText,
  .bk-heroTop,.rl-headText,.st21-headtxt,.us21-headtxt,.np21-headtxt,.bkx-head-txt
) :where(h1,h2){color:var(--phantom-obsidian);letter-spacing:-.035em}
html[data-theme=dark] .velora-phantom-edition .main-surface :where(
  .op-pageheadText,.ac-pageheadText,.us-pageheadText,.stx-pageheadText,
  .mo-pageheadText,.sup-heroText,.np-heroText,.au-heroTop,.aut-heroText,
  .bk-heroTop,.rl-headText,.st21-headtxt,.us21-headtxt,.np21-headtxt,.bkx-head-txt
) :where(h1,h2){color:var(--text)}

.velora-phantom-edition .main-surface :where(
  .op-card,.ac-card,.acx-feedcard,.us-card,.user-card,.stx-card,.st21-section,
  .mo-card,.sup-card,.sup-card2,.supd-card,.np-card,.au-card,.aut-card,.bk-card,
  .watch-card,.v-card,.iv-empty-card,.pdf-intel-card,.hvx-story
){
  border-color:var(--line)!important;
  background:var(--surface)!important;
  box-shadow:var(--v-shadow-sm)!important;
}
.velora-phantom-edition .main-surface :where(
  .op-card,.ac-card,.acx-feedcard,.us-card,.user-card,.stx-card,.st21-section,
  .mo-card,.sup-card,.sup-card2,.supd-card,.np-card,.au-card,.aut-card,.bk-card,
  .watch-card,.v-card,.iv-empty-card,.pdf-intel-card
):hover{border-color:color-mix(in srgb,var(--accent) 22%,var(--line))!important}

.velora-phantom-edition .main-surface :where(
  .op-cardHead,.ac-cardHead,.us-cardHead,.stx-cardHead,.mo-cardHead,.sup-cardHead,
  .supd-cardHead,.np-cardHead,.aut-cardHead
){border-bottom-color:var(--line-2)!important}
.velora-phantom-edition .main-surface :where(
  .op-cardIcon,.mo-cardIcon,.sup-cardIcon,.supd-cardIcon,.aut-cardIcon,
  .au-statIcon,.sup-heroIcon,.iv7-hero-ic
){
  color:var(--accent)!important;
  background:linear-gradient(145deg,var(--phantom-mint-pale),var(--surface))!important;
  border-color:var(--line-accent)!important;
}

.velora-phantom-edition .main-surface :where(
  .op-stat,.ac-summaryBar,.us-stat,.stx-stat,.st21-stat,.mo-stat,.sup-stat,
  .np-stat,.au-stat,.aut-stat,.aut-metric,.bkx-stat,.rl-stat,.v-stat
){
  border-color:var(--line)!important;
  background:linear-gradient(155deg,var(--surface),var(--surface-2))!important;
  box-shadow:none!important;
}
.velora-phantom-edition .main-surface :where(
  .op-stat,.us-stat,.stx-stat,.st21-stat,.mo-stat,.sup-stat,.np-stat,.au-stat,
  .aut-stat,.bkx-stat,.rl-stat,.v-stat
):first-child{box-shadow:inset 0 2px 0 rgba(125,233,188,.52)!important}

.velora-phantom-edition .main-surface :where(
  .ac-tabs,.iv-tabs,.iv7-moretabs,.sticky-filters,.us-toolbar,.us21-toolbar,
  .np-toolbar,.np21-toolbar,.acx-filterform
){
  border-color:var(--line)!important;
  background:var(--surface)!important;
  box-shadow:var(--v-shadow-sm)!important;
}
.velora-phantom-edition .main-surface :where(
  .ac-tabs [aria-current="page"],.ac-tabs .active,.iv-tabs .active,.iv7-moretabs .active,
  .is-active,[aria-selected="true"]
){color:var(--phantom-obsidian);border-color:var(--line-accent);background:var(--accent-soft)}
html[data-theme=dark] .velora-phantom-edition .main-surface :where(
  .ac-tabs [aria-current="page"],.ac-tabs .active,.iv-tabs .active,.iv7-moretabs .active,
  .is-active,[aria-selected="true"]
){color:var(--text)}

.velora-phantom-edition .main-surface :where(.op-sectionTitle,.au-sectionTitle,.np-cardTitle,.bk-cardTitle){color:var(--phantom-forest)}
html[data-theme=dark] .velora-phantom-edition .main-surface :where(.op-sectionTitle,.au-sectionTitle,.np-cardTitle,.bk-cardTitle){color:var(--accent-up)}
.velora-phantom-edition .main-surface :where(.v-badge,.op-badge,.ac-headChip,.sup-headChip,.sup-cardHeadChip){border-color:var(--line-accent);background:var(--accent-soft);color:var(--accent)}

/* Keep operational pages calm on small screens: decoration disappears before
   information, and existing horizontal data scrollers retain their behaviour. */
@media(max-width:720px){
  .velora-phantom-edition .main-surface :where(
    .op-oshead,.op-pagehead,.ac-pagehead,.acx-dirhead,.us-pagehead,.us21-head,
    .stx-pagehead,.st21-head,.mo-oshead,.mo-pagehead,.sup-hero,.np-hero,.np21-head,
    .au-hero,.aut-hero,.bk-hero,.rl-head,.iv7-tabs,.bkx-head
  ){border-radius:15px!important}
}

@media(max-width:1279px) and (min-width:881px){:root{--os-rail-w:78px}}
@media(max-width:880px){:root{--os-rail-w:0px}.velora-phantom-edition .content-zone{border-radius:0;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.velora-phantom-edition *, .velora-phantom-edition *::before,.velora-phantom-edition *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(forced-colors:active){.velora-phantom-edition .app-shell::before,.velora-phantom-edition .app-shell::after{display:none}}