/* ═══════════════════════════════════════════════════════════════════════════
   EXPOSCALE COMMAND DECK — THE SKIN
   ═══════════════════════════════════════════════════════════════════════════

   Loads LAST, after every other sheet:

       exposcale.css → deck.css → portal.css | admin.css → deck-skin.css

   ⛔⛔ WHY THIS FILE EXISTS, AND WHY THE FIRST ATTEMPT WAS INVISIBLE.
   `deck.css` loads BEFORE the two surface skins so it could never regress
   them. That was safe and it was the whole problem: `portal.css` and
   `admin.css` already style every panel, table, tile and rail, they load
   after, and so they won every single one. The only things that changed
   appearance were the elements the rework ADDED. A new page band on an
   otherwise identical dashboard.

   This file is the other half. It comes last on purpose and its job is to
   restyle what is ALREADY THERE.

   ⭐⭐ THE TOKENS ARE THE LEVER. Roughly a hundred panels in this app carry
   an INLINE `style="background: var(--card); border: 1px solid var(--border)"`
   — Blade written before there was a design system. An inline style beats
   every stylesheet, so no selector can reach them. Redefining the token
   does, and reaches all of them at once. That is why the block below is
   short and does most of the work.

   ⛔ NO `!important`, anywhere. It is banned house-wide and three tests scan
   for it. Everything here wins on cascade order or on honest specificity.
   ⛔ Structure is never touched — no width, no display, no position, no
   grid-template, no overflow. Colour, material, depth and type only. The
   phone layer, the one-screen locks and every layout fix stay exactly as
   they are.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE PALETTE, RE-CUT ────────────────────────────────────────────────
   Same hues, more separation. The old ramp put #13131a panels on a #0d0d12
   ground behind #1e1e2e hairlines — about 4% of luminance across the whole
   interface, which is why every screen read as one flat sheet no matter how
   much structure was on it. */

:root {
  /* The ground stays where the brand put it; everything above it lifts. */
  --bg: #090910;
  --sidebar: #0b0b13;

  /* Panels now sit a real step above the ground, and a second step above
     that for anything raised (modals, dropdowns, hovered rows). */
  --card: #16161f;
  --card2: #1e1e2a;

  /* ⭐ The single most visible line in this file. At #1e1e2e a hairline was
     invisible against a #13131a panel, so nothing on the page had an edge —
     tables, tiles and rails all bled into each other. */
  --border: #272738;

  /* The violet runs slightly hotter so the accent survives on the new,
     lighter panels instead of sinking into them. */
  --purple: #8b45f0;
  --pl: #b57cff;
  --pbg: rgba(139, 69, 240, 0.16);

  /* Text: the old --muted was #6b7280, a cool grey that fought the violet.
     These are the same lightness with the page's own hue in them. */
  --muted: #7b7b90;
  --muted2: #a5a5bb;

  --gbg: rgba(16, 185, 129, 0.13);
  --rbg: rgba(239, 68, 68, 0.13);
  --abg: rgba(245, 158, 11, 0.13);
  --bbg: rgba(59, 130, 246, 0.13);

  /* Depth that is actually visible on a dark ground: a lit top edge and a
     shadow with enough spread to separate the plane. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px -8px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px -16px rgba(0, 0, 0, 0.85);

  --deck-face: linear-gradient(176deg, #191922 0%, #14141c 62%, #12121a 100%);
  --deck-face-raised: linear-gradient(176deg, #21212d 0%, #1a1a24 100%);
  --deck-top: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

/* ── 2. THE CANVAS ─────────────────────────────────────────────────────────
   The app used to sit on one flat fill edge to edge. Two pseudo-elements on
   the scroller give it a light source and a horizon: a violet bloom from the
   top-left (where the rail is, so the page reads as lit BY the product) and a
   fine instrument grid that fades out before it reaches the content.

   ⛔ Both are `position: fixed`, not absolute. `.main` is the scroller — an
   absolutely-positioned child scrolls WITH the content, so the bloom would
   slide up the page and off the top. Fixed pins it to the viewport, which is
   what an ambient light actually does.
   ⛔ `pointer-events: none` on both, or the whole app stops taking clicks. */

.main { position: relative; }

.main::before,
.main::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.main::before {
  background:
    radial-gradient(900px 520px at 6% -6%, rgba(139, 69, 240, 0.14), transparent 62%),
    radial-gradient(700px 460px at 102% 104%, rgba(139, 69, 240, 0.075), transparent 60%);
}

.main::after {
  background-image:
    linear-gradient(rgba(181, 124, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 124, 255, 0.032) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 12% 0%, #000 0%, transparent 68%);
  mask-image: radial-gradient(120% 90% at 12% 0%, #000 0%, transparent 68%);
}

/* Everything the page renders sits above the ambience. `.topbar` and
   `.page-body`/`.pwrap` are the two direct children of `.main` on every
   surface; the modals and overlays carry their own z-index already. */
.main > * { position: relative; z-index: 1; }

/* ── 3. THE RAIL ───────────────────────────────────────────────────────────
   A fifth of every screenshot, and until now a flat fill with grey text. It
   is the one piece of chrome on screen at all times, so it earns material —
   but still no entrance motion, because you pass it a hundred times a day. */

.sidebar {
  background:
    linear-gradient(180deg, rgba(139, 69, 240, 0.075) 0%, transparent 34%),
    linear-gradient(180deg, #101018 0%, #0a0a11 100%);
  border-right-color: rgba(181, 124, 255, 0.12);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.02), 12px 0 40px -22px rgba(0, 0, 0, 0.95);
}

.logo-area {
  border-bottom-color: rgba(181, 124, 255, 0.13);
  background: linear-gradient(180deg, rgba(139, 69, 240, 0.07), transparent);
}

/* Nav items: brighter at rest, and the active one is genuinely lit rather
   than a slightly different grey. */
.ni { color: #8f8fa6; border-radius: 9px; margin: 0 7px; padding-left: 11px; padding-right: 11px; }
.ni:hover { background: rgba(255, 255, 255, 0.045); color: #e9e9f2; }

.ni.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(139, 69, 240, 0.3), rgba(139, 69, 240, 0.07));
  box-shadow: inset 0 0 0 1px rgba(181, 124, 255, 0.22), 0 6px 18px -10px rgba(139, 69, 240, 0.75);
}

/* The active marker was a flat 2px bar; it now reads as an edge-lit rail. */
.ni.active::before {
  background: linear-gradient(180deg, #d4b3ff, var(--purple));
  box-shadow: 0 0 10px rgba(181, 124, 255, 0.8);
  border-radius: 0 2px 2px 0;
}

/* Glyphs were half-faded at rest, which is what made the rail read as grey. */
.ni .nicon { opacity: 0.62; transition: opacity 140ms var(--ease-out-quart, ease); }
.ni:hover .nicon { opacity: 0.9; }
.ni.active .nicon { opacity: 1; color: var(--pl); }

/* ── 4. THE TOPBAR ─────────────────────────────────────────────────────────
   It was a bar with a border-bottom. Now it is a lit ledge: a faint face, a
   hairline that carries the accent where the rail meets it, and blur so
   content scrolling under it reads as passing BEHIND. */

.topbar {
  background: linear-gradient(180deg, rgba(22, 22, 31, 0.9), rgba(13, 13, 18, 0.78));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: transparent;
  box-shadow:
    inset 0 -1px 0 rgba(181, 124, 255, 0.14),
    0 10px 26px -20px rgba(0, 0, 0, 0.9);
}

.tbtitle { letter-spacing: -0.015em; }

/* ── 5. EVERY PANEL, EVERYWHERE ────────────────────────────────────────────
   The one rule that changes the most pixels. `.pcard` is the portal's,
   `.panel`/`.kpi`/`.card`/`.acct-section`/`.w-bal-card`/`.aff-card` are the
   console's, `.deck` is this rework's own. They all become the same machined
   face: a top-lit gradient rather than a flat fill.

   ⛔ Listed WITHOUT the `.admin-app` prefix on purpose — this sheet loads
   after admin.css, so a (0,1,0) selector here beats its (0,2,0) one on order
   for the properties it does not itself set, and matches the portal in the
   same rule. Where admin.css DOES set the property, the pairs below repeat
   the prefix to out-specify it. */

.pcard,
.panel,
.kpi,
.card,
.acct-section,
.w-bal-card,
.aff-card,
.deck {
  background: var(--deck-face);
  box-shadow: var(--deck-top), var(--shadow-1);
}

.admin-app .panel,
.admin-app .kpi,
.admin-app .card,
.admin-app .acct-section,
.admin-app .w-bal-card,
.admin-app .aff-card {
  background: var(--deck-face);
  box-shadow: var(--deck-top), var(--shadow-1);
}

/* Hover on a panel that is a link or a row target: lit edge, not a grey one. */
.admin-app .panel:hover,
.admin-app .kpi:hover,
.admin-app .acct-section:hover,
.admin-app .w-bal-card:hover,
.admin-app .card:hover,
.pcard:hover {
  border-color: rgba(181, 124, 255, 0.34);
  box-shadow: var(--deck-top), var(--shadow-2), 0 0 0 1px rgba(139, 69, 240, 0.1);
}

/* ── 6. FIGURES ────────────────────────────────────────────────────────────
   The numbers ARE the product. They were set at the same weight as the
   labels around them; now they carry the page. A faint bloom on the violet
   ones only — a glow on every figure is a toy, a glow on the one you came
   to read is an instrument. */

.kpi-v,
.stat-value,
.hero-balance-value,
.cmd-stat-value {
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.hero-balance-value,
.cmd-stat-value {
  text-shadow: 0 0 28px rgba(181, 124, 255, 0.3);
}

.kpi-l,
.stat-label,
.ml,
.deck-label,
.cmd-stat-label {
  color: var(--muted);
}

/* ── 7. TABLES — the surface you actually work in ──────────────────────────
   Calm, per the direction. What changes is legibility of STRUCTURE: the head
   reads as an instrument label, the rule under it carries the accent, and a
   hovered row is edge-lit from the left so your eye keeps its place across a
   wide table. No row animation — these are 800-row queues. */

.admin-app thead th,
.pt-head {
  color: var(--muted);
  letter-spacing: 0.14em;
  border-bottom-color: rgba(181, 124, 255, 0.2);
}

.admin-app tbody tr { transition: background 120ms linear, box-shadow 120ms linear; }

.admin-app tbody tr:hover,
.pt-row:hover {
  background: rgba(181, 124, 255, 0.045);
  box-shadow: inset 2px 0 0 var(--purple);
}

/* ── 8. CONTROLS ───────────────────────────────────────────────────────────
   The primary action reads as the lit thing on the page; everything else
   stays quiet, which is what makes it read that way. */

.btn-primary,
.bpurple {
  background: linear-gradient(180deg, #9d5bff 0%, #7c3aed 100%);
  border-color: rgba(214, 180, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 20px -6px rgba(124, 58, 237, 0.65);
}
.btn-primary:hover,
.bpurple:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 28px -6px rgba(139, 69, 240, 0.85);
}

.btn-ghost { border-color: rgba(181, 124, 255, 0.42); color: #dcc0ff; }
.btn-quiet, .tbtn { border-color: var(--border); }
.btn-quiet:hover, .tbtn:hover { border-color: rgba(181, 124, 255, 0.42); color: #fff; }

/* Inputs and selects: a field you can see the edge of, and a focus state
   that lights rather than merely recolours. */
.sinput, .acct-search, .cust-filter-input, .cust-filter-select,
.adpage-search, .inv-filter-input, .inv-filter-select, .dep-sel, .fi, .fs {
  background: rgba(9, 9, 16, 0.7);
  border-color: var(--border);
}
.sinput:focus, .acct-search:focus, .cust-filter-input:focus,
.cust-filter-select:focus, .adpage-search:focus, .inv-filter-input:focus,
.inv-filter-select:focus, .dep-sel:focus, .fi:focus, .fs:focus {
  border-color: rgba(181, 124, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(139, 69, 240, 0.16);
}

/* Status chips: defined, so state reads at a glance across a long queue. */
.badge, .pill {
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── 9. THE BANDS ──────────────────────────────────────────────────────────
   `.cmd-head` and the two heroes get the full treatment now that the palette
   underneath them has the range to carry it. */

.cmd-head {
  background:
    radial-gradient(680px 300px at 2% 0%, rgba(139, 69, 240, 0.22), transparent 60%),
    var(--deck-face);
  border-color: rgba(181, 124, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px -26px rgba(139, 69, 240, 0.55),
    var(--shadow-1);
}

.cmd-eyebrow { color: var(--pl); }
.cmd-eyebrow::before { box-shadow: 0 0 8px rgba(181, 124, 255, 0.9); }

.hero { border-color: rgba(181, 124, 255, 0.26); }

/* Brackets and the live dot, brighter against the lifted panels. */
.deck-brackets::before, .deck-brackets::after,
.deck-corners::before, .deck-corners::after {
  border-color: rgba(181, 124, 255, 0.5);
}

/* ── 9b. THE DASHBOARD'S OWN FURNITURE ─────────────────────────────────────
   These carry their own classes and their own inline styling, so the generic
   panel rule in §5 does not reach them — and they are the two biggest blocks
   on the screen an admin opens first. */

.admin-app .dash-kpi-strip,
.admin-app .dash-money-hdr,
.admin-app .dash-rail-hdr {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  border-bottom-color: rgba(181, 124, 255, 0.16);
}

/* KPI tiles are divided by a vertical rule; it now reads as a hairline
   rather than a grey bar, and each tile lights on hover. */
.admin-app .dash-kpi-tile { border-right-color: var(--border); transition: background 140ms linear; }
.admin-app .dash-kpi-tile:hover { background: rgba(181, 124, 255, 0.04); }

/* The notification rail: rows that separate, and a category dot that reads. */
.admin-app .np-item-title { color: #edecf5; }
.admin-app .np-divider { background: var(--border); }
.admin-app .np-content { transition: background 120ms linear; }
.admin-app .np-content:hover { background: rgba(181, 124, 255, 0.05); }
.admin-app .np-amount { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* The float table's figures are the most-read numbers in the building. */
.admin-app .dash-money-hdr + * td,
.admin-app .dash-now-row { font-variant-numeric: tabular-nums; }

/* Portal stat tiles: the same lift the console's KPI tiles get. */
.pcard.stat { transition: border-color 160ms var(--ease-out-quart, ease), box-shadow 200ms var(--ease-out-quart, ease); }
.pcard.stat:hover { border-color: rgba(181, 124, 255, 0.32); }

/* ── 10. THE PHONE ─────────────────────────────────────────────────────────
   ⛔ The canvas bloom and grid come OFF below 860px. They are `position:
   fixed`, and on iOS a fixed layer behind a document-scrolling body is
   repainted on every frame of a scroll — it is the cheapest way to make a
   phone feel slow, for an effect nobody sees on a 390px screen. The material
   on panels, rails and figures all stays. */

@media (max-width: 860px) {
  .main::before, .main::after { display: none; }
  .topbar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}