/* ────────────────────────────────────────────────────────────────────────
   Showrunner — GLASS skin (opt-in theme overlay)
   ────────────────────────────────────────────────────────────────────────
   Glossy / frosted-glass look in the existing brand palette. NO layout changes —
   it only restyles surfaces. Everything is scoped under [data-skin="glass"], so
   the file is completely inert until the skin is enabled, and removing the skin
   restores the current look exactly.

   Enable:  document.documentElement.setAttribute('data-skin','glass')
            (persisted via localStorage 'showrunner.skin' — see index.html)
   ──────────────────────────────────────────────────────────────────────── */

[data-skin="glass"] {
  --glass-bg:        rgba(255, 255, 255, 0.52);
  --glass-bg-strong: rgba(255, 255, 255, 0.68);
  --glass-line:      rgba(255, 255, 255, 0.62);
  --glass-blur:      18px;
  --glass-shadow:    0 18px 50px -18px rgba(234, 88, 12, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Warm gradient-mesh behind everything — gives the glass something to refract. */
[data-skin="glass"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 36% at 12% 8%,  rgba(251, 146, 60, 0.28), transparent 60%),
    radial-gradient(32% 30% at 92% 6%,  rgba(234, 88, 12, 0.20), transparent 60%),
    radial-gradient(46% 44% at 80% 90%, rgba(255, 214, 170, 0.40), transparent 62%),
    radial-gradient(40% 40% at 8% 94%,  rgba(234, 88, 12, 0.10), transparent 60%);
  filter: blur(24px);
  animation: sr-mesh-drift 28s ease-in-out infinite;
  will-change: transform;
}
@keyframes sr-mesh-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  50%      { transform: translate3d(-1.5%, 1.2%, 0) scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  [data-skin="glass"] body::before { animation: none; }
}
/* Structural layers go transparent so the mesh shows through (no layout change). */
[data-skin="glass"] .app-shell,
[data-skin="glass"] .app-main,
[data-skin="glass"] .app-page,
[data-skin="glass"] .auth-shell { background: transparent; position: relative; z-index: 1; }

/* Frosted topbar + sidebar */
[data-skin="glass"] .app-topbar {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border-bottom: 1px solid var(--glass-line);
}
[data-skin="glass"] .app-sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(244, 234, 212, 0.46));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border-right: 1px solid var(--glass-line);
}
[data-skin="glass"] .sidebar-item:hover { background: rgba(255, 255, 255, 0.55); }
[data-skin="glass"] .sidebar-item[aria-current="page"] {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(234, 88, 12, 0.10));
}

/* Cards / auth card / modals / stat tiles / toasts -> glass */
[data-skin="glass"] .card,
[data-skin="glass"] .auth-card,
[data-skin="glass"] .modal,
[data-skin="glass"] .stat,
[data-skin="glass"] .toast {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
[data-skin="glass"] .card {
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
[data-skin="glass"] .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -20px rgba(234, 88, 12, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Inputs get a subtle frost */
[data-skin="glass"] .input,
[data-skin="glass"] .lf-ns-tag-input {
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
[data-skin="glass"][data-theme="dark"] .input,
[data-skin="glass"][data-theme="dark"] .lf-ns-tag-input {
  background: rgba(20, 12, 8, 0.55);   /* dark glass — white frost made inputs unreadable in dark */
}

/* Primary CTA -> glossy gradient (highlight sheen via inset) */
[data-skin="glass"] .btn[data-variant="primary"] {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-500));
  box-shadow: 0 10px 26px -8px rgba(234, 88, 12, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
[data-skin="glass"] .btn[data-variant="primary"]:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  transform: translateY(-1px);
}
[data-skin="glass"] .btn[data-variant="secondary"],
[data-skin="glass"] .btn[data-variant="ghost"] {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Frost badges / status pills */
[data-skin="glass"] .badge,
[data-skin="glass"] .status-pill {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* DARK + glass -> translucent DARK glass so it never breaks in dark mode */
[data-skin="glass"][data-theme="dark"] {
  --glass-bg:        rgba(42, 31, 24, 0.50);
  --glass-bg-strong: rgba(33, 24, 20, 0.66);
  --glass-line:      rgba(255, 255, 255, 0.10);
  --glass-shadow:    0 18px 50px -18px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-skin="glass"][data-theme="dark"] body::before {
  background:
    radial-gradient(40% 38% at 14% 8%,  rgba(234, 88, 12, 0.22), transparent 60%),
    radial-gradient(40% 40% at 86% 92%, rgba(124, 45, 18, 0.30), transparent 62%);
}
[data-skin="glass"][data-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, rgba(42, 31, 24, 0.55), rgba(33, 24, 20, 0.45));
}

/* ── Motion: subtle entrance on cards/stats/sections. CSS-only (content is never
   hidden by JS) and it replays on SPA route changes since CSS animations run on
   element render. Pairs with the ambient mesh drift already on body::before. ── */
@keyframes sr-glass-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
[data-skin="glass"] .card,
[data-skin="glass"] .stat,
[data-skin="glass"] .page-section,
[data-skin="glass"] .auth-card,
[data-skin="glass"] .modal {
  animation: sr-glass-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* staggered ripple across a stat row */
[data-skin="glass"] .grid-stats > *:nth-child(2) { animation-delay: 0.06s; }
[data-skin="glass"] .grid-stats > *:nth-child(3) { animation-delay: 0.12s; }
[data-skin="glass"] .grid-stats > *:nth-child(4) { animation-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  [data-skin="glass"] .card { transition: none; }
  [data-skin="glass"] body::before { animation: none; }
  [data-skin="glass"] .card,
  [data-skin="glass"] .stat,
  [data-skin="glass"] .page-section,
  [data-skin="glass"] .auth-card,
  [data-skin="glass"] .modal { animation: none; }
}