/* ─────────────────────────────────────────────────────────────
   Elysian Works Dashboard — Design Enhancements
   Drop-in stylesheet. Add this to <head> AFTER your inline <style>:

     <link rel="stylesheet" href="enhancements.css">

   Touches no JS, no IDs, no DOM — only restyles existing classes.
   Each section is independent; comment out any block you don't want.
   ───────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   0. NEW TOKENS
   Adds a third surface elevation + AA-safe soft text color +
   reusable shadow & focus-ring tokens.
   ═══════════════════════════════════════════════════════════ */
:root{
  --surface-elev: oklch(0.19 0.015 260);
  --text-soft:    oklch(0.62 0.018 260);
  --shadow-card:  0 1px 0 oklch(1 0 0/.04) inset, 0 8px 24px oklch(0 0 0/.35);
  --ring-accent:  0 0 0 3px oklch(0.40 0.15 50/.28);
  --ring-cyan:    0 0 0 3px oklch(0.40 0.13 205/.30);
}


/* ═══════════════════════════════════════════════════════════
   1. TYPE & RHYTHM
   - Larger, better-anchored page titles with a heat accent rule
   - Tabular numerals on every numeric surface (no jitter)
   - Slightly looser tracking on all-caps mono labels
   ═══════════════════════════════════════════════════════════ */
.page-title{
  font-size:22px;
  font-weight:600;
  letter-spacing:-.022em;
  margin-bottom:22px;
  position:relative;
  padding-left:14px;
}
.page-title::before{
  content:'';
  position:absolute; left:0; top:6px; bottom:6px;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--heat), transparent);
  box-shadow:0 0 8px oklch(0.40 0.15 50/.5);
}

.stat-val, .mn, .mnb, .bsum-val, td,
.pulse-num, .pulse-card-val, .node-kpi-val, .rate-val,
.wallet-bal-big, .hmap-pct, .hmap-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.stat-label, .bcard-title, th, .sn-section,
.pulse-card-label, .node-kpi-label, .pulse-label{
  letter-spacing:.16em;
}


/* ═══════════════════════════════════════════════════════════
   2. STAT CARDS
   - Subtle accent-tinted radial wash (top-left)
   - Soft glow blob in the bottom corner using the card color
   - Lift on hover with shadow
   ═══════════════════════════════════════════════════════════ */
.stat-card{
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in oklch, var(--accent-color, var(--accent)) 7%, transparent),
      transparent 55%),
    var(--surface);
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.stat-card::before{
  height:1px;
  opacity:.85;
  background:linear-gradient(90deg,
    transparent,
    var(--accent-color, var(--accent)) 30%,
    var(--accent-color, var(--accent)) 70%,
    transparent);
}
.stat-card::after{
  content:'';
  position:absolute;
  inset:auto auto -45% -40%;
  width:170px; height:170px;
  border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in oklch, var(--accent-color, var(--accent)) 11%, transparent),
    transparent 60%);
  pointer-events:none;
  filter:blur(20px);
  opacity:.7;
}
.stat-card:hover{
  transform:translateY(-2px);
  border-color:oklch(0.36 0.025 260);
  box-shadow:var(--shadow-card);
}
.stat-val{
  font-size:26px;
  letter-spacing:-.01em;
}


/* ═══════════════════════════════════════════════════════════
   3. TABLES
   - Sticky thead inside the rounded wrapper
   - Whisper-quiet zebra striping
   - 2px heat-bar slides in on row hover
   - More breathing room in cells
   ═══════════════════════════════════════════════════════════ */
.tbl-wrap{ position:relative; }

thead tr{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg, var(--surface), var(--surface2));
}

tbody tr{ position:relative; transition:background .12s ease; }
tbody tr:nth-child(even){ background:oklch(1 0 0/.012); }
tbody tr::before{
  content:'';
  position:absolute; left:0; top:6px; bottom:6px;
  width:0; border-radius:0 2px 2px 0;
  background:var(--heat);
  box-shadow:0 0 8px var(--heat);
  transition:width .15s ease;
}
tbody tr:hover::before{ width:2px; }
tbody tr:hover{ background:oklch(0.78 0.16 205/.05); }
tbody tr.archived::before{ display:none; }

td{ padding:12px 16px; }
th{ padding:11px 16px; }


/* ═══════════════════════════════════════════════════════════
   4. BADGES
   - Lighter weight + looser tracking so the dot reads first
   - Pulse ring on the actively rendering badge
   ═══════════════════════════════════════════════════════════ */
.badge{
  letter-spacing:.08em;
  font-weight:500;
  padding:3px 10px;
}
.badge-rendering::before{
  position:relative;
  box-shadow:0 0 6px var(--green), 0 0 0 0 oklch(0.82 0.16 145/.55);
  animation:fx-ring 1.6s ease-out infinite;
}
@keyframes fx-ring{
  0%   { box-shadow:0 0 6px var(--green), 0 0 0 0 oklch(0.82 0.16 145/.55); }
  80%  { box-shadow:0 0 6px var(--green), 0 0 0 6px oklch(0.82 0.16 145/0); }
  100% { box-shadow:0 0 6px var(--green), 0 0 0 0 oklch(0.82 0.16 145/0); }
}


/* ═══════════════════════════════════════════════════════════
   5. SIDE NAV
   - Active item gets an integrated horizontal gradient
     instead of a hard left bar (you keep the heat marker too)
   - Hovered icons brighten before the label
   - Hairline divider above section headers
   ═══════════════════════════════════════════════════════════ */
.sn-item{ transition:background .18s ease, color .18s ease; }
.sn-item:hover svg{ color:var(--text-bright); }

.sn-item.active{
  background:linear-gradient(90deg,
    oklch(0.30 0.12 50/.32) 0%,
    oklch(0.30 0.12 50/.10) 60%,
    transparent 100%);
}
.sn-item.active::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, oklch(1 0 0/.04), transparent 40%);
  pointer-events:none;
}

.sn-section{
  position:relative;
  margin-top:14px;
  padding-top:14px;
}
.sn-section::before{
  content:'';
  position:absolute; left:20px; right:20px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
}


/* ═══════════════════════════════════════════════════════════
   6. TOOLBAR — pills + search
   - Active pill gets an inner highlight + soft glow
   - Search input picks up a leading magnifier icon
   ═══════════════════════════════════════════════════════════ */
.fp.active{
  box-shadow:inset 0 0 0 1px oklch(1 0 0/.06), 0 0 12px var(--accent-glow);
}

.search-inp{
  padding-left:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat:no-repeat;
  background-position:11px center;
}


/* ═══════════════════════════════════════════════════════════
   7. BUTTONS
   - Replace the off-palette #00c4ee hover with an oklch sibling
   - btn-green hover becomes a real lighter green, not opacity .85
   - Keyboard focus ring on every button
   ═══════════════════════════════════════════════════════════ */
.btn-primary:hover{
  background:oklch(0.78 0.155 205);
  box-shadow:0 0 22px var(--accent-glow);
}
.btn-green:hover{
  background:oklch(0.86 0.16 145);
  opacity:1;
}
.btn:focus-visible,
.btn-login:focus-visible,
.fp:focus-visible,
.pf-preset:focus-visible{
  outline:none;
  box-shadow:var(--ring-accent);
}


/* ═══════════════════════════════════════════════════════════
   8. CARDS (.bcard)
   - Lit-from-above 1px inner highlight
   - Slim heat-rule on every section title for left-edge anchor
   ═══════════════════════════════════════════════════════════ */
.bcard{
  background:linear-gradient(180deg, var(--surface), var(--surface2) 80%);
  box-shadow:inset 0 1px 0 oklch(1 0 0/.04), 0 1px 0 oklch(0 0 0/.4);
}
.bcard-title{
  position:relative;
  padding-left:11px;
}
.bcard-title::before{
  content:'';
  position:absolute; left:0; top:2px; bottom:2px;
  width:2px; border-radius:2px;
  background:var(--heat);
  opacity:.7;
}


/* ═══════════════════════════════════════════════════════════
   9. CHROME — topbar & status bar
   - Glassy blur + slight saturation when content scrolls under
   ═══════════════════════════════════════════════════════════ */
.shell-topbar,
.shell-statusbar{
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  background:linear-gradient(180deg,
    oklch(0.17 0.014 260/.85),
    oklch(0.13 0.012 260/.75));
}


/* ═══════════════════════════════════════════════════════════
   10. SKELETON SHIMMER
   Empty tbody gets an animated shimmer band so first-paint
   doesn't feel broken before data arrives.
   ═══════════════════════════════════════════════════════════ */
tbody:empty::after{
  content:'';
  display:block;
  height:120px;
  background:linear-gradient(90deg,
    var(--surface) 0%,
    var(--panel-hi) 50%,
    var(--surface) 100%);
  background-size:200% 100%;
  animation:fx-shimmer 1.4s linear infinite;
}
@keyframes fx-shimmer{
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}


/* ═══════════════════════════════════════════════════════════
   11. ACCESSIBILITY
   - Honor prefers-reduced-motion (kills blink/pulse/shimmer)
   - Bump informational dim copy to a WCAG-AA friendly L
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

.stat-sub,
.rate-hint,
.login-footer .left,
.shell-statusbar,
.task-worker,
.fb-selected-path{
  color:var(--text-soft);
}
