/* SmartPosts brand layer: loaded after every other stylesheet. It re-themes
   through tokens and a few component rules; the layout and the information on
   each page stay as they are. Remove the one <link> to roll it back. */

:root {
  /* Surfaces: one neutral near-black family, three steps */
  --bg: #06070a;
  --bg-alt: #0a0c11;
  --bg-card: #0e1016;
  --bg-card-hover: #141720;
  --bg-glass: rgba(14, 16, 22, 0.72);
  --bg-input: #0b0d12;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);

  /* Text: three levels, all AA on the card surface */
  --text: #f4f4f5;
  --text-dim: #9ca0ab;
  --text-faint: #6b7080;

  /* Brand: orange primary, Base blue secondary */
  --accent: #f97316;
  --accent-2: #fb923c;
  --accent-3: #fdba74;
  --accent-soft: rgba(249, 115, 22, 0.12);
  --accent-glow: rgba(249, 115, 22, 0.42);
  --base-blue: #0052ff;
  --blue: #5b8cff;
  --blue-soft: rgba(0, 82, 255, 0.14);

  /* Meaning: green only for success and money, red only for errors and misses */
  --green: #22c55e;
  --green-soft: rgba(34, 197, 94, 0.12);
  --red: #f43f5e;
  --red-soft: rgba(244, 63, 94, 0.12);
  --yellow: #fbbf24;
  --purple: #5b8cff;
  --purple-soft: rgba(0, 82, 255, 0.12);
  --pink: #fb923c;

  --gradient-primary: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  --gradient-rainbow: linear-gradient(135deg, #f97316 0%, #fb923c 45%, #0052ff 100%);
  --gradient-card: linear-gradient(135deg, rgba(249, 115, 22, 0.05) 0%, rgba(0, 82, 255, 0.04) 100%);
  --shadow-glow: 0 0 48px rgba(249, 115, 22, 0.18);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(249, 115, 22, 0.22);

  /* Scales */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

html, body { font-family: var(--font); font-feature-settings: "cv11", "ss01"; }

/* One number font for every figure */
.stat-value, .ins-stat-num, .rv-stat-val, .rv-td-amt, .rv-detail-amount, .xapi-stat,
.slot-clock, .delta, .stat-change, .badge, td { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* Ambient background kept, in brand colours */
.orb-1 { background: var(--accent); opacity: 0.22; }
.orb-2 { background: var(--base-blue); opacity: 0.22; }
.orb-3 { background: var(--accent-2); opacity: 0.12; }
.animated-bg::before {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(249, 115, 22, 0.12) 0%, transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(0, 82, 255, 0.10) 0%, transparent 26%);
}

/* Sidebar */
.sidebar { background: rgba(8, 9, 13, 0.86); border-right: 1px solid var(--border); }
.nav-section-title { color: var(--text-faint); letter-spacing: 0.12em; font-size: 11px; }
.nav-item { border-radius: var(--r-md); color: var(--text-dim); font-weight: 500; }
.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.nav-item.active { background: rgba(249, 115, 22, 0.1); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav-item.active::before { background: linear-gradient(90deg, rgba(249, 115, 22, 0.14) 0%, transparent 100%); }

/* Top bar */
.topbar { background: rgba(6, 7, 10, 0.72); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.topbar-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.topbar-subtitle { color: var(--text-faint); }
.topbar-actions { gap: 8px; }
.topbar-actions .btn { height: 40px; border-radius: var(--r-md); }
.icon-btn { width: 40px; padding: 0; justify-content: center; }
/* The next-slot pill is information, not an alarm: Base blue, red only in its last minutes */
.slot-clock { background: var(--blue-soft); border: 1px solid rgba(0, 82, 255, 0.35); color: #dbe6ff; height: 40px; padding: 0 14px; font-weight: 600; }
.slot-clock.warning { background: rgba(249, 115, 22, 0.14); border-color: rgba(249, 115, 22, 0.45); color: #ffd9bf; }
.streak-badge { height: 40px; display: inline-flex; align-items: center; border-radius: var(--r-pill); }

/* Buttons: one shape, two weights */
.btn { border-radius: var(--r-md); font-weight: 600; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); }
.btn:hover { border-color: var(--border-hover); background: rgba(255, 255, 255, 0.06); transform: none; }
.btn-primary { background: var(--gradient-primary); color: #140a02; border-color: transparent; box-shadow: 0 6px 18px rgba(249, 115, 22, 0.25); }
.btn-primary:hover { filter: brightness(1.06); }

/* Cards */
.card, .ins-card, .rv-card { background: var(--bg-glass); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* Stat tiles: compact, the figure leads, the icon sits small at the top right */
.stats-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.stat-card { border-radius: var(--r-lg); padding: 18px 18px 16px; border: 1px solid var(--border); background: var(--bg-glass); box-shadow: var(--shadow-card); }
.stat-card:hover { transform: translateY(-2px); border-color: rgba(249, 115, 22, 0.3); }
.stat-card-icon { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: var(--r-md); font-size: 16px; margin: 0; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); box-shadow: none; }
.stat-label { font-size: 11px; letter-spacing: 0.1em; font-weight: 600; color: var(--text-faint); margin-bottom: 10px; }
.stat-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat-change, .stat-sub { color: var(--text-dim); font-size: 12.5px; margin-top: 6px; }

/* Revenue and Insights speak the same language as the rest */
.rv-stat, .ins-stat { text-align: left; background: var(--bg-glass); border: 1px solid var(--border); border-radius: var(--r-lg); }
.rv-stat-val, .ins-stat-num { font-weight: 800; letter-spacing: -0.02em; }
.rv-stat-lbl, .ins-stat-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--text-faint); }
.rv-btn-gold { background: var(--gradient-primary); color: #140a02; border: 0; }
.rv-btn, .rv-btn-outline { border-radius: var(--r-md); }

/* Compose toolbar on the same neutral surface as the editor */
.compose-toolbar { background: rgba(255, 255, 255, 0.03); border-color: var(--border); }

/* Inputs */
input, select, textarea { border-radius: var(--r-md); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(249, 115, 22, 0.55); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }

/* Light theme: readable titles and figures */
[data-theme="light"] { --text: #111318; --text-dim: #4b5060; --text-faint: #6b7080; --bg-glass: rgba(255, 255, 255, 0.86); --border: rgba(17, 19, 24, 0.1); }
[data-theme="light"] .topbar-title, [data-theme="light"] .stat-value { color: #111318; -webkit-text-fill-color: #111318; }
[data-theme="light"] .slot-clock { color: #0b2a80; }

/* Phone */
@media (max-width: 760px) {
  .topbar { padding: 14px 16px; }
  .topbar-title { font-size: 22px; }
  .topbar-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions > * { flex: none; }
  .topbar-actions .btn, .slot-clock, .streak-badge { height: 44px; }
  .icon-btn { width: 44px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 14px 14px 12px; }
  .stat-card-icon { width: 26px; height: 26px; font-size: 13px; top: 12px; right: 12px; }
  .stat-label { font-size: 10px; margin-bottom: 6px; padding-right: 28px; }
  .stat-value { font-size: 24px; }
  .stat-change, .stat-sub { font-size: 12px; }
  .btn, input, select { min-height: 44px; }
}