/*
  Quiver OS — Global Light Theme
  Reference: /prod-roadmap (Linear-inspired, pure white, soft indigo accent)
  Include this file on every page after tailwind CDN.
*/

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --q-bg:          #ffffff;
  --q-surface:     #ffffff;
  --q-surface-2:   #f8fafc;
  --q-border:      #e5e7eb;
  --q-border-soft: #f0f0f0;
  --q-border-card: #f3f4f6;

  --q-text:        #111827;
  --q-text-2:      #374151;
  --q-text-3:      #6b7280;
  --q-text-4:      #9ca3af;
  --q-text-5:      #d1d5db;

  /* Accent — Quiver brand purple */
  --q-accent:      #1D074B;
  --q-accent-2:    #4a16a0;
  --q-accent-bg:   rgba(29,7,75,0.06);
  --q-accent-b:    rgba(29,7,75,0.25);
  --q-accent-ring: #ddd6fe;
  --q-accent-soft: #f8f5ff;
  --q-accent-dark: #e8e0ff;

  /* Status — light backgrounds */
  --q-green:       #15803d;
  --q-green-2:     #34d399;
  --q-green-bg:    #dcfce7;
  --q-green-b:     #bbf7d0;

  --q-amber:       #a16207;
  --q-amber-2:     #fbbf24;
  --q-amber-bg:    #fef9c3;
  --q-amber-b:     #fde047;

  --q-red:         #dc2626;
  --q-red-bg:      #fee2e2;
  --q-red-b:       #fecaca;

  --q-blue:        #1d4ed8;
  --q-blue-bg:     #dbeafe;
  --q-blue-b:      #bfdbfe;

  --q-purple:      #7c3aed;
  --q-purple-bg:   #ede9fe;
  --q-purple-b:    #ddd6fe;

  --q-slate-text:  #475569;
  --q-slate-bg:    #f1f5f9;
  --q-slate-b:     #e2e8f0;
}

/* ── Page foundation ───────────────────────────────────────────── */
html { color-scheme: light; }

body {
  background: var(--q-bg) !important;
  color: var(--q-text) !important;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Header / Nav ──────────────────────────────────────────────── */
header {
  background: #ffffff !important;
  border-bottom-color: var(--q-border-card) !important;
}

/* Header sticky + shadow pattern */
header.sticky { box-shadow: 0 1px 0 var(--q-border-card); }

/* ── Nav links (class-based — preferred over inline styles) ─────── */
.nav-link {
  color: var(--q-text-3);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-link:hover { color: var(--q-text); }
.nav-link.active {
  color: var(--q-text) !important;
  border-bottom-color: var(--q-accent) !important;
}

/* Override Tailwind border-slate-* on headers */
.border-slate-700 { border-color: var(--q-border-card) !important; }
.border-slate-600 { border-color: var(--q-border-card) !important; }
.border-slate-800 { border-color: var(--q-border-card) !important; }
.border-gray-200  { border-color: var(--q-border-card) !important; }

/* ── Text color overrides ──────────────────────────────────────── */
.text-slate-100 { color: var(--q-text)   !important; }
.text-slate-200 { color: var(--q-text-2) !important; }
.text-slate-300 { color: var(--q-text-2) !important; }
.text-slate-400 { color: var(--q-text-3) !important; }
.text-slate-500 { color: var(--q-text-3) !important; }
.text-slate-600 { color: var(--q-text-4) !important; }
/* Exclude <button> so primary-action buttons retain white text for visibility */
.text-white:not(button) { color: var(--q-text) !important; }
/* Explicitly preserve white text on primary buttons (bg-sky-600, bg-indigo, btn-primary) */
button.text-white, a.btn-primary.text-white { color: #fff !important; }

/* ── Background overrides ──────────────────────────────────────── */
.bg-slate-900 { background-color: var(--q-surface)   !important; }
.bg-slate-800 { background-color: var(--q-surface)   !important; }
.bg-slate-700 { background-color: var(--q-surface-2) !important; }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background:   var(--q-surface) !important;
  border-color: var(--q-border-card) !important;
}
.card-inner {
  background:   var(--q-surface-2) !important;
  border-color: var(--q-border-card) !important;
}

/* ── Loading spinner ───────────────────────────────────────────── */
.spinner {
  border-color:     var(--q-border) !important;
  border-top-color: var(--q-accent) !important;
}

/* ── Tables ────────────────────────────────────────────────────── */
.tbl-head { background: var(--q-surface-2) !important; }
.tbl-row:hover { background: #fafafa !important; }
.row-hover:hover { background: #fafafa !important; }
.log-row:hover  { background: #fafafa !important; }
.week-row:hover { background: #fafafa !important; }
.merchant-row:hover { background: #fafafa !important; }
.changelog-entry:hover { background: #fafafa !important; }

/* ── Inputs / Select ───────────────────────────────────────────── */
select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea {
  background:   var(--q-surface) !important;
  border-color: var(--q-border)  !important;
  color:        var(--q-text)    !important;
}
select:focus,
input:focus,
textarea:focus {
  border-color: var(--q-accent) !important;
  box-shadow: 0 0 0 3px var(--q-accent-dark) !important;
  outline: none;
}

/* ── Status badges ─────────────────────────────────────────────── */
.badge-green, .badge-ok, .covered {
  background: var(--q-green-bg) !important;
  color:      var(--q-green)    !important;
  border-color: var(--q-green-b) !important;
}
.badge-red, .badge-error, .short {
  background: var(--q-red-bg) !important;
  color:      var(--q-red)    !important;
  border-color: var(--q-red-b) !important;
}
.badge-amber, .badge-warn, .warn {
  background: var(--q-amber-bg) !important;
  color:      var(--q-amber)    !important;
  border-color: var(--q-amber-b) !important;
}
.badge-yellow {
  background: var(--q-amber-bg) !important;
  color:      var(--q-amber)    !important;
  border-color: var(--q-amber-b) !important;
}
.badge-blue, .badge-sky, .badge-manual {
  background: var(--q-blue-bg) !important;
  color:      var(--q-blue)    !important;
  border-color: var(--q-blue-b) !important;
}
.badge-purple, .badge-violet, .badge-recurring {
  background: var(--q-purple-bg) !important;
  color:      var(--q-purple)    !important;
  border-color: var(--q-purple-b) !important;
}
.badge-slate {
  background: var(--q-slate-bg)   !important;
  color:      var(--q-slate-text) !important;
  border-color: var(--q-slate-b)  !important;
}
.badge-completed {
  background: var(--q-green-bg) !important;
  color:      var(--q-green)    !important;
  border-color: var(--q-green-b) !important;
}
.badge-failed {
  background: var(--q-red-bg) !important;
  color:      var(--q-red)    !important;
  border-color: var(--q-red-b) !important;
}

/* ── Buttons ───────────────────────────────────────────────────── */
/* ── Buttons — Quiver brand purple ────────────────────────────────── */
.btn-primary {
  background: #5E17EB !important;
  color: #fff !important;
}
.btn-primary:hover { background: #420FA9 !important; }
.btn-primary:disabled {
  background: #E6DAFB !important;
  color: #5E17EB !important;
  cursor: not-allowed;
}

/* Secondary/outline button (ghost with purple border) */
.btn-secondary {
  background: #fff !important;
  color: #5E17EB !important;
  border: 1.5px solid #5E17EB !important;
}
.btn-secondary:hover { background: #E6DAFB !important; }

.btn-ghost {
  background:   var(--q-surface)   !important;
  border-color: var(--q-border)    !important;
  color:        var(--q-text-3)    !important;
}
.btn-ghost:hover {
  border-color: var(--q-accent)    !important;
  color:        var(--q-accent-2)  !important;
  background:   var(--q-accent-soft) !important;
}

.nav-btn {
  background: transparent !important;
  border: 1px solid var(--q-border) !important;
  color: var(--q-text-2) !important;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.nav-btn:hover {
  border-color: var(--q-accent) !important;
  color: var(--q-accent-2) !important;
  background: var(--q-accent-soft) !important;
}

.jump-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--q-text-4) !important;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.12s;
}
.jump-btn:hover {
  color: var(--q-accent-2) !important;
  background: var(--q-accent-soft) !important;
  border-color: var(--q-accent-dark) !important;
}

/* ── Filter / date pills ───────────────────────────────────────── */
.filter-pill, .date-range-pill {
  background:   var(--q-surface) !important;
  border-color: var(--q-border)  !important;
  color:        var(--q-text-3)  !important;
}
.filter-pill.active, .date-range-pill.active {
  background:   var(--q-accent-bg) !important;
  border-color: var(--q-accent)    !important;
  color:        var(--q-accent-2)  !important;
}
.filter-pill:hover, .date-range-pill:hover {
  border-color: var(--q-accent)   !important;
  color:        var(--q-accent-2) !important;
}

/* ── Tabs ──────────────────────────────────────────────────────── */
.tab-btn {
  color:               var(--q-text-3)      !important;
  border-bottom:       2px solid transparent !important;
  padding:             10px 0 !important;
  font-size:           0.875rem !important;
  font-weight:         500 !important;
  letter-spacing:      0.01em !important;
  border-radius:       0 !important;
}
.tab-btn:hover  { color: var(--q-text-2) !important; }
.tab-btn.active {
  color:             var(--q-accent-2) !important;
  border-bottom:    2px solid var(--q-accent) !important;
  font-weight:       600 !important;
}

/* ── Stat blocks ───────────────────────────────────────────────── */
.stat-block {
  background:   var(--q-surface-2) !important;
  border-color: var(--q-border-card) !important;
}
.stat-card {
  background:   var(--q-surface)   !important;
  border-color: var(--q-border-card) !important;
}

/* ── Section labels ────────────────────────────────────────────── */
.section-label, .section-title, .section-tag, .table-th {
  color: var(--q-text-4) !important;
}

/* ── Toggle / switch ───────────────────────────────────────────── */
.slider { background: var(--q-border) !important; }
.slider:before { background: var(--q-text-4) !important; }
.toggle input:checked + .slider { background: var(--q-accent) !important; }
.toggle input:checked + .slider:before { background: #fff !important; }

/* ── Upload zone ───────────────────────────────────────────────── */
.upload-zone {
  border-color: var(--q-border)    !important;
  background:   var(--q-surface-2) !important;
}
.upload-zone:hover, .upload-zone.dragging {
  border-color: var(--q-accent)    !important;
  background:   var(--q-accent-bg) !important;
}
.upload-zone.has-file {
  border-color: var(--q-green-b) !important;
  background:   var(--q-green-bg) !important;
}

/* ── Progress bars ─────────────────────────────────────────────── */
.progress-bg, .progress-bar-bg { background: var(--q-border) !important; }
.progress-fill {
  background: linear-gradient(90deg, var(--q-accent), var(--q-accent-2)) !important;
}

/* ── Template card (broadcasts) ────────────────────────────────── */
.template-card {
  background:   var(--q-surface) !important;
  border-color: var(--q-border)  !important;
}
.template-card:hover {
  border-color: var(--q-text-4)  !important;
  background:   var(--q-surface-2) !important;
}
.template-card.selected {
  border-color: var(--q-accent)    !important;
  background:   var(--q-accent-bg) !important;
}

/* ── Audience chip (broadcasts) ────────────────────────────────── */
.audience-chip {
  background:   var(--q-surface) !important;
  border-color: var(--q-border)  !important;
  color:        var(--q-text-3)  !important;
}
.audience-chip:hover {
  border-color: var(--q-text-4) !important;
  color:        var(--q-text-2) !important;
}
.audience-chip.selected {
  border-color: var(--q-accent)    !important;
  background:   var(--q-accent-bg) !important;
  color:        var(--q-accent-2)  !important;
}

/* ── Roadmap status badges ─────────────────────────────────────── */
.status-planned    {
  background: var(--q-slate-bg) !important;
  color: var(--q-slate-text)    !important;
  border-color: var(--q-slate-b) !important;
}
.status-in_progress {
  background: var(--q-blue-bg)  !important;
  color: var(--q-blue)          !important;
  border-color: var(--q-blue-b) !important;
}
.status-done {
  background: var(--q-green-bg) !important;
  color: var(--q-green)         !important;
  border-color: var(--q-green-b) !important;
}
.status-skipped {
  background: var(--q-amber-bg) !important;
  color: var(--q-amber)         !important;
  border-color: var(--q-amber-b) !important;
}

/* Roadmap week highlight */
.week-current, .week-row.current {
  background: #fbfbff !important;
  border-left-color: var(--q-accent) !important;
}

/* ── Inline edit inputs ────────────────────────────────────────── */
input.plain, textarea.plain {
  background:   transparent !important;
  border-color: transparent !important;
  color:        var(--q-text) !important;
}
input.plain:hover, textarea.plain:hover {
  background: #f3f4f6 !important;
}
input.plain:focus, textarea.plain:focus {
  background:   var(--q-surface) !important;
  border-color: var(--q-accent)  !important;
  box-shadow: 0 0 0 2px var(--q-accent-ring) !important;
}
select.plain {
  background:   var(--q-surface-2) !important;
  border-color: var(--q-border)    !important;
  color:        var(--q-text)      !important;
}

/* ── Vol inputs (capacity) ─────────────────────────────────────── */
.vol-input {
  background:   var(--q-accent-bg) !important;
  border-color: var(--q-accent-b)  !important;
  color:        var(--q-text)      !important;
}
.vol-input:focus {
  border-color: var(--q-accent) !important;
  background:   rgba(129,140,248,0.12) !important;
}
.vol-input.overridden {
  border-color: var(--q-amber-b)  !important;
  background:   var(--q-amber-bg) !important;
  color:        var(--q-amber)    !important;
}

/* ── Save indicator ────────────────────────────────────────────── */
.save-indicator { color: var(--q-text-5) !important; }
.save-saving    { color: var(--q-amber-2) !important; }
.save-ok        { color: var(--q-green-2) !important; }
.save-err       { color: var(--q-red) !important; }

/* ── Tag chips ─────────────────────────────────────────────────── */
.tag-5xx  { background: var(--q-red-bg);    color: var(--q-red);    border-radius:4px; padding:1px 6px; font-size:.75rem; }
.tag-4xx  { background: var(--q-amber-bg);  color: var(--q-amber);  border-radius:4px; padding:1px 6px; font-size:.75rem; }
.tag-0    { background: var(--q-purple-bg); color: var(--q-purple); border-radius:4px; padding:1px 6px; font-size:.75rem; }
.tag-eng      { background: var(--q-amber-bg);  color: var(--q-amber);  border: 1px solid var(--q-amber-b);  }
.tag-research { background: var(--q-blue-bg);   color: var(--q-blue);   border: 1px solid var(--q-blue-b);   }
.tag-growth   { background: var(--q-green-bg);  color: var(--q-green);  border: 1px solid var(--q-green-b);  }
.tag-data     { background: var(--q-red-bg);    color: var(--q-red);    border: 1px solid var(--q-red-b);    }
.tag-support  { background: var(--q-amber-bg);  color: var(--q-amber);  border: 1px solid var(--q-amber-b);  }
.tag-unknown  { background: var(--q-slate-bg);  color: var(--q-slate-text); border: 1px solid var(--q-slate-b); }

/* ── Amount pills (billing recon) ──────────────────────────────── */
.amt-pill  { background: var(--q-red-bg) !important; color: var(--q-red) !important; border-color: var(--q-red-b) !important; }
.amt-total { background: var(--q-red-bg) !important; color: var(--q-red) !important; border-color: var(--q-red-b) !important; }

/* ── Billing table sub-rows ────────────────────────────────────── */
.charge-row td { background: var(--q-surface-2) !important; color: var(--q-text-3) !important; }

/* ── Weather banner (capacity) ─────────────────────────────────── */
#weather-banner {
  background:   var(--q-surface) !important;
  border-color: var(--q-border)  !important;
}
.wx-badge {
  background:   var(--q-surface-2) !important;
  border-color: var(--q-border)    !important;
  color:        var(--q-text-3)    !important;
}
.wx-badge span { color: var(--q-text) !important; }

/* ── Preview frame (broadcasts) ────────────────────────────────── */
.preview-frame {
  background:   var(--q-surface-2) !important;
  border-color: var(--q-border)    !important;
}

/* ── MJML editor ───────────────────────────────────────────────── */
.mjml-editor {
  background:   var(--q-surface) !important;
  color:        var(--q-text)    !important;
  border-color: var(--q-border)  !important;
}

/* ── Stat number ───────────────────────────────────────────────── */
.stat-number { color: var(--q-text) !important; }

/* ── Dropdown / popover ────────────────────────────────────────── */
.tooltip-box {
  background:   var(--q-surface) !important;
  border-color: var(--q-border-card) !important;
  color:        var(--q-text) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ── Mobile responsiveness ─────────────────────────────────────── */
@media (max-width: 768px) {
  header nav { flex-wrap: wrap; gap: 6px 10px; }
  header nav a { font-size: 0.78rem; }
  .table-td { padding: 8px 8px !important; font-size: 0.78rem !important; }
  .nav-btn, .jump-btn { font-size: 0.78rem; padding: 4px 10px; }
}

/* ── Smooth transitions ────────────────────────────────────────── */
button, a, select, input, .tab-btn, .filter-pill, .badge,
.template-card, .audience-chip, .nav-btn, .jump-btn, .nav-link {
  transition: color .12s, background .12s, border-color .12s, box-shadow .12s !important;
}