/* ==========================================================
   Vibe Easy — App theme
   Extends the teleprompter's own design tokens (dark, teal accent)
   over Bootstrap 5 so the dashboard and the player feel like one product.
========================================================== */
:root{
  --ink:#EDE6D6;
  --bg:#0C0F16;
  --panel:#141821;
  --panel-2:#1C2230;
  --line:#2A3342;
  --accent:#5BE3C9;
  --accent-dim:#2f7d70;
  --amber:#F2B34B;
  --muted:#7C88A0;
  --danger:#E86A6A;
  --radius:14px;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;

  /* Bootstrap variable overrides */
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-body-font-family:var(--sans);
  --bs-link-color:var(--accent);
  --bs-link-hover-color:var(--accent);
  /* Bootstrap's own "muted"/secondary text color defaults to a dark gray
     tuned for LIGHT backgrounds (.text-muted, .text-body-secondary, disabled
     text) — on our dark background that reads as near-invisible. Re-point it
     at our own --muted so any Bootstrap component/utility that reads it
     inherits sane contrast automatically. */
  --bs-secondary-color:var(--muted);
  --bs-tertiary-color:var(--muted);
  --bs-secondary-bg:var(--panel-2);
  --bs-tertiary-bg:var(--panel-2);
}

body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(91,227,201,.08), transparent 60%),
    var(--bg);
  min-height:100vh;
}

::selection{background:var(--accent-dim);color:#eafff9}

/* ---------- Navbar ---------- */
.navbar-prompter{
  background:rgba(20,24,33,.85)!important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar-prompter .navbar-brand{
  font-weight:700;letter-spacing:-.02em;color:var(--ink)!important;
  display:flex;align-items:center;gap:8px;
}
.navbar-prompter .navbar-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.navbar-prompter .nav-link{color:var(--muted)!important;font-weight:500;transition:color .15s}
.navbar-prompter .nav-link.active,.navbar-prompter .nav-link:hover{color:var(--ink)!important}
.navbar-prompter .nav-link.active{color:var(--accent)!important}

.plan-badge{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;border:1px solid var(--accent-dim);color:var(--accent);
}
.plan-badge.pro{border-color:var(--amber);color:var(--amber)}

/* ---------- Cards / surfaces ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);
}
.card-hover{transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.card-hover:hover{transform:translateY(-3px);border-color:var(--accent-dim);box-shadow:0 16px 40px rgba(0,0,0,.35)}

.surface-2{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius)}

/* ---------- Buttons ---------- */
.btn-accent{background:var(--accent);border-color:var(--accent);color:#03150f;font-weight:600}
.btn-accent:hover{background:#4bd0b6;border-color:#4bd0b6;color:#03150f}
.btn-outline-accent{border-color:var(--accent-dim);color:var(--accent)}
.btn-outline-accent:hover{background:var(--accent-dim);color:#eafff9;border-color:var(--accent)}

/* ---------- Forms ---------- */
.form-control,.form-select{
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
}
.form-control:focus,.form-select:focus{
  background:var(--panel-2);color:var(--ink);border-color:var(--accent-dim);
  box-shadow:0 0 0 .2rem rgba(91,227,201,.15);
}
.form-control::placeholder{color:var(--muted)}
label.form-label{color:var(--muted);font-size:13px;letter-spacing:.02em}

/* ---------- Quota meter ---------- */
.quota-meter{height:8px;border-radius:5px;background:var(--panel-2);overflow:hidden}
.quota-meter i{
  display:block;height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  border-radius:5px;transition:width .6s cubic-bezier(.4,0,.2,1);
}
.quota-meter.warn i{background:linear-gradient(90deg,#8a5a1f,var(--amber))}
.quota-meter.full i{background:linear-gradient(90deg,#6e2323,var(--danger))}

/* ---------- Folders (drag-and-drop category management) ---------- */
.folder-card{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
  font-size:13.5px;font-weight:500;text-decoration:none;transition:border-color .15s,background .15s,transform .1s;
}
.folder-card:hover{color:var(--ink);border-color:var(--accent-dim)}
.folder-card.active{border-color:var(--accent);background:rgba(91,227,201,.1);color:var(--accent)}
.folder-card .swatch{width:8px;height:8px;border-radius:50%;display:inline-block}
.folder-card .folder-count{
  font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--bg);
  border-radius:10px;padding:1px 7px;margin-left:2px;
}
.folder-card.active .folder-count{color:var(--accent)}
.folder-card.drop-hover{
  border-color:var(--accent);background:rgba(91,227,201,.18);
  transform:scale(1.05);box-shadow:0 0 0 3px rgba(91,227,201,.15);
}

.script-card{cursor:grab}
.script-card.dragging{opacity:.35;cursor:grabbing}

/* ---------- Secondary text ----------
   Use this instead of Bootstrap's .text-muted — that class reads its color
   from --bs-secondary-color, which several Bootstrap components pin to a
   light-theme default regardless of the :root override above. This class is
   never ambiguous. */
.text-dim{color:var(--muted)!important}

/* ---------- Dropdowns (Bootstrap defaults to a light menu regardless of
   body theme, so the admin nav dropdown needs explicit dark styling) ---------- */
.dropdown-menu{
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.dropdown-item{color:var(--ink)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--accent-dim);color:#eafff9}
.dropdown-item.active,.dropdown-item:active{background:var(--accent);color:#03150f}
.dropdown-divider{border-top:1px solid var(--line)}

/* ---------- Modals (same light-default issue as dropdowns) ---------- */
.modal-content{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.modal-header,.modal-footer{border-color:var(--line)}

/* ---------- Tables (Bootstrap's border color also defaults light-theme) ---------- */
.table{--bs-table-color:var(--ink);--bs-table-bg:transparent;--bs-table-border-color:var(--line)}

/* ---------- Category chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;
  font-size:12.5px;font-weight:500;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
}
.chip .swatch{width:8px;height:8px;border-radius:50%}

/* ---------- Micro-interactions ---------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp .5s ease both}

@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(91,227,201,.45)}
  100%{box-shadow:0 0 0 14px rgba(91,227,201,0)}
}
.pulse-ring{animation:pulseRing 1.6s ease-out infinite}

.toast-anim{animation:fadeInUp .35s ease both}

/* ---------- Alerts (flash) ---------- */
.alert{border:1px solid var(--line);border-radius:12px}
.alert-success{background:rgba(91,227,201,.08);color:var(--accent);border-color:var(--accent-dim)}
.alert-danger{background:rgba(232,106,106,.08);color:var(--danger);border-color:#5a2a2a}
.alert-warning{background:rgba(242,179,75,.08);color:var(--amber);border-color:#5a441f}
.alert-info{background:rgba(158,193,255,.08);color:#9EC1FF;border-color:#2a3a5a}

/* ---------- Auth screen ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;
}
.auth-card{
  width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:36px 32px;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.auth-brand{text-align:center;margin-bottom:28px}
.auth-brand .mark{font-family:var(--mono);font-size:12px;letter-spacing:.4em;color:var(--accent);text-transform:uppercase}
.auth-brand h1{font-size:28px;font-weight:700;margin-top:10px;letter-spacing:-.02em}
.install-card{max-width:560px}

/* Scrollbar (dashboard chrome only — teleprompter engine keeps overflow:hidden) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}