/* RotBot — Tactile Dark. App-wide design-token remap + control refresh.
   Loaded AFTER the inline <style> (and overrides body.in-telegram) so it wins
   everywhere, including inside the Telegram mini-app. Keeps the brand lime as
   the single "go/active" accent; warms surfaces + text; adds an ice "data"
   accent and proper type roles. Per-screen hardcoded colors may still need a
   later sweep — this layer covers everything driven by the variables. */

:root,
body.in-telegram {
  /* near-black graphite surfaces (cool, not brown) */
  --bg: #0A0B0D;
  --bg-elev: #121318;
  --bg-elev-2: #181A20;
  --border: rgba(255, 255, 255, 0.07);
  --border-2: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* cool-neutral text */
  --text: #F4F5F6;
  --text-dim: #9CA0A8;
  --text-faint: #565A63;

  /* secondary "data" accent — Tactile ice-blue (for metrics / links / counts) */
  --data: #9DB8FF;
  --data-soft: rgba(157, 184, 255, 0.14);

  /* type roles */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

body { font-family: var(--font-body); }
h1, h2, h3, h4, .card-title, .page-title { font-family: var(--font-display); letter-spacing: -0.01em; }
code, pre, kbd, samp { font-family: var(--font-mono); }

/* Dropdowns — drop the lime left stripe, muted chevron that turns lime on
   hover/focus, recessed warm well. !important to beat the inline select rules
   and Tailwind's preflight (matching the codebase's existing convention). */
select {
  padding: 13px 40px 13px 14px !important;
  letter-spacing: -0.005em;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA0A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
    linear-gradient(180deg, #0e0f12, #0a0b0d) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 13px center, left top !important;
  background-size: 15px 15px, 100% 100% !important;
  background-color: var(--bg-elev-2) !important;
}
select:hover, select:focus, select:active {
  border-color: var(--border-2);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bef264' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
    linear-gradient(180deg, #14161b, #0d0e11) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 13px center, left top !important;
  background-size: 15px 15px, 100% 100% !important;
}
select:focus { border-color: var(--accent-2) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }

/* ============================================================
   Component unification + the "data" accent for metrics
   ============================================================ */

/* Universal metric utility — mono, tabular, ice-blue. !important so it wins
   over the per-tab scoped CSS that scheduler.js / renders.js inject at runtime
   (those <style> blocks load after this file). Wrap any number a user reads as
   data in <span class="data-accent">. */
.data-accent {
  color: var(--data) !important;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Stat tiles (Music bank + Library) — unify the tile + give the big numbers the
   data treatment. Also fixes a latent bug: the tiles referenced an undefined
   --bg-elev-1, so they had no background. */
.lib-stat-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.lib-stat-card .lib-stat-num {
  color: var(--data);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-shadow: 0 0 14px rgba(157, 184, 255, 0.16);
}
.lib-stat-card .lib-stat-label { font-family: var(--font-mono); letter-spacing: 0.08em; }

/* Inline metadata chips (durations, sizes, offsets) → mono for the data feel. */
.chip { font-family: var(--font-mono); }

/* ============================================================
   Panel unification — Scheduler / Renders / Couples inject their own
   card styles at runtime. Promote their OUTER section cards to the shared
   .card treatment (fill over --bg-elev, hairline border, 20/24px padding,
   lime top-edge reflection, soft shadow, lime hover) so every panel in the
   app is the same material. ID-descendant selectors (1,1,0) outrank the
   injected `.X-card` rules (0,1,0) without needing !important. Inner rows
   (.sch-acct / .sch-task / .rnd-row) are NOT cards — they stay recessed
   insets and never get the top-edge, so nothing doubles up.
   ============================================================ */
#scheduler-root .sch-card,
#renders-root .rnd-card,
#cq-root .cq-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 40%), var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
@media (min-width: 768px) {
  #scheduler-root .sch-card,
  #renders-root .rnd-card,
  #cq-root .cq-card { padding: 24px; }
}
#scheduler-root .sch-card::before,
#renders-root .rnd-card::before,
#cq-root .cq-card::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
  opacity: 0.7; pointer-events: none;
}
#scheduler-root .sch-card:hover,
#renders-root .rnd-card:hover,
#cq-root .cq-card:hover {
  border-color: rgba(190,242,100,0.18);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(190,242,100,0.06);
}

/* ============================================================
   Button unification — Scheduler/Renders inject pill/mini buttons; align them
   to the shared .btn family: rounded-md shape, gradient primary (.on), bordered
   secondary, ghost mini. ID-descendant specificity beats the injected rules
   without !important; per-button inline red/danger styles still win (semantic).
   ============================================================ */
#scheduler-root .sch-pill,
#renders-root .sch-pill {
  border-radius: var(--r-md);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-weight: 600;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#scheduler-root .sch-pill:hover,
#renders-root .sch-pill:hover { background: var(--bg-elev); border-color: var(--border-strong); }
#scheduler-root .sch-pill.on,
#renders-root .sch-pill.on {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-3) 100%);
  color: #0a0a0a; border-color: transparent; font-weight: 700;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}
#scheduler-root .sch-mini,
#renders-root .rnd-mini {
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-dim);
}
#scheduler-root .sch-mini:hover,
#renders-root .rnd-mini:hover {
  color: var(--text); border-color: var(--border-strong); background: var(--border);
}

/* ============================================================
   Empty + loading states. .lib-empty referenced an undefined --bg-elev-1 (so it
   had no fill) — fixed. Plus a reusable skeleton shimmer for grid loads, so
   "Loading…" is a pulsing placeholder grid instead of bare text.
   ============================================================ */
.lib-empty { background: var(--bg-elev); }
@keyframes rb-shimmer { from { background-position: -600px 0; } to { background-position: 600px 0; } }
.rb-skel {
  background: linear-gradient(90deg, var(--bg-elev) 0, var(--bg-elev-2) 90px, var(--bg-elev) 180px);
  background-size: 600px 100%;
  animation: rb-shimmer 1.3s linear infinite;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
@media (prefers-reduced-motion: reduce) { .rb-skel { animation: none; } }
.rb-skel-card { aspect-ratio: 9 / 16; width: 100%; }
.rb-skel-row { height: 68px; margin-bottom: 8px; }

/* Sidebar nav: SVG icons (replaced emoji) inherit currentColor → lime when active. */
.app-sidebar-item .emoji { display: flex; align-items: center; justify-content: center; }
.app-sidebar-item .emoji svg { width: 18px; height: 18px; }