/* ═══════════════════════════════════════════════════════════════════
   VP Marketing — Design System v2 (professional)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 2px 4px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.08);
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* ── Typography ───────────────────────────────────────────────── */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
body {
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(99,102,241,0.06), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(16,185,129,0.05), transparent 60%),
    #f6f7fb;
  min-height: 100vh;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; }
h2 { font-weight: 700; }

/* ── Scrollbar (modern) ───────────────────────────────────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Sidebar ──────────────────────────────────────────────────── */
aside {
  background: linear-gradient(180deg, #0b1223 0%, #0f172a 60%, #111d36 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.04);
  box-shadow: 2px 0 24px rgba(2,6,23,0.25);
  position: relative;
}
aside h1 {
  background: linear-gradient(135deg, #a5b4fc 0%, #fff 60%, #c7d2fe 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; letter-spacing: -0.03em;
  padding: 8px 8px 4px 8px;
}
aside h1::after {
  content: 'Growth Platform';
  display: block;
  font-size: 10px; font-weight: 500;
  color: #64748b; letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 2px;
  -webkit-text-fill-color: #64748b;
}

/* Nav buttons: refined */
.nav-btn {
  position: relative;
  color: #cbd5e1;
  transition: color .15s ease, background-color .15s ease, transform .05s ease;
}
.nav-btn:hover {
  background-color: rgba(255,255,255,0.04) !important;
  color: #fff;
}
.nav-btn.active {
  background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(99,102,241,0.02)) !important;
  color: #fff !important;
  font-weight: 600;
}
.nav-btn.active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #818cf8, #6366f1);
  box-shadow: 0 0 12px rgba(129,140,248,0.6);
}
.nav-btn:active { transform: scale(0.99); }

/* Section labels in sidebar */
aside nav > div {
  color: #475569 !important;
  font-weight: 700 !important;
}

/* Logout button */
#logout-btn {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 12px !important; padding-top: 12px !important;
  color: #64748b;
}
#logout-btn:hover { color: #f87171; }

/* ── Main content ─────────────────────────────────────────────── */
main { background: transparent !important; }

/* Page section headers (h2 at top of each panel) */
.panel > h2:first-child {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--ink-100);
  font-size: 1.5rem;
  color: var(--ink-900);
}

/* ── Cards (bg-white rounded shadow) ──────────────────────────── */
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-lg {
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,23,42,0.04);
  transition: box-shadow .2s ease, transform .15s ease;
}
.bg-white.rounded-xl:hover,
.bg-white.rounded-2xl:hover { box-shadow: var(--shadow-md); }

/* Gradient panels stay vivid */
.bg-gradient-to-br { border: 1px solid rgba(99,102,241,0.18); box-shadow: var(--shadow-sm); }

/* ── Buttons (enhance default Tailwind) ───────────────────────── */
button {
  transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
  font-family: inherit;
  letter-spacing: -0.005em;
}
button:active:not(:disabled) { transform: translateY(1px); }
button[class*="bg-blue-600"], button[class*="bg-indigo-600"] {
  box-shadow: 0 1px 2px rgba(79,70,229,0.12), 0 4px 12px rgba(79,70,229,0.18);
}
button[class*="bg-blue-600"]:hover:not(:disabled),
button[class*="bg-indigo-600"]:hover:not(:disabled) {
  box-shadow: 0 2px 4px rgba(79,70,229,0.18), 0 8px 20px rgba(79,70,229,0.28);
  filter: brightness(1.05);
}
button[class*="bg-green-600"]:hover:not(:disabled) { filter: brightness(1.05); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* ── Inputs / textareas / selects ─────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="search"], input[type="tel"], input[type="date"],
textarea, select {
  font-family: inherit;
  background: #fff;
  border-color: #e2e8f0 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important;
}
textarea { min-height: 96px; }

/* ── Tables ───────────────────────────────────────────────────── */
table { border-collapse: separate; border-spacing: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
table thead th {
  background: var(--ink-50) !important;
  color: var(--ink-700);
  font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--ink-100);
}
table tbody tr { transition: background-color .12s ease; }
table tbody tr:hover { background-color: rgba(99,102,241,0.035); }
table tbody tr + tr td { border-top: 1px solid var(--ink-100); }

/* ── Existing utility classes preserved ───────────────────────── */
.panel { animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.media-thumb { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: 8px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.media-thumb:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }

.tier-card { border-color: #e2e8f0; background: rgba(255,255,255,0.5); transition: all .2s ease; }
.tier-card:hover { border-color: #c7d2fe; }
.tier-card.selected { border-color: var(--brand-500); background: #fff; box-shadow: 0 4px 16px rgba(99,102,241,0.18); transform: translateY(-1px); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.provider-badge { font-weight: 600; padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.provider-badge.ok   { background: #dcfce7; color: #166534; }
.provider-badge.warn { background: #fef3c7; color: #92400e; }
.provider-badge.err  { background: #fee2e2; color: #991b1b; }
.provider-badge.muted{ background: #f1f5f9; color: #64748b; }

.key-input.visible { -webkit-text-security: none !important; text-security: none !important; }
.provider-msg.ok   { color: #15803d; }
.provider-msg.err  { color: #b91c1c; }
.provider-msg.info { color: #0369a1; }

/* ── Trust bar in login ───────────────────────────────────────── */
#login-view {
  background:
    radial-gradient(800px 400px at 20% 10%, rgba(99,102,241,0.12), transparent 60%),
    radial-gradient(600px 400px at 90% 80%, rgba(16,185,129,0.10), transparent 60%),
    linear-gradient(180deg, #eef2ff 0%, #f6f7fb 100%);
}
#login-view > div { backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.6); }

/* ── Status pills (generic) ───────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill-ok   { background: #dcfce7; color: #166534; }
.pill-warn { background: #fef3c7; color: #92400e; }
.pill-err  { background: #fee2e2; color: #991b1b; }
.pill-info { background: var(--brand-50); color: var(--brand-700); }

/* ── Topbar (optional slot) ───────────────────────────────────── */
.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ink-100);
  position: sticky; top: 0; z-index: 20;
}
.app-topbar .brand-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--ink-900);
}
.app-topbar .brand-mark .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #10b981);
  box-shadow: 0 0 10px rgba(99,102,241,0.6);
}
.trust-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: #065f46; background: #d1fae5; border: 1px solid #a7f3d0;
}
.trust-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: #10b981; box-shadow: 0 0 8px #10b981;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Mobile responsive (Sprint 6) ─────────────────────────── */
@media (max-width: 900px) {
  aside { width: 14rem !important; }
  main { padding: 20px !important; }
}

@media (max-width: 768px) {
  /* Hamburger toggle + drawer sidebar */
  aside {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 260px !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  body[data-sidebar="open"] aside { transform: translateX(0); }
  body[data-sidebar="open"]::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 30;
  }
  #app-view > div.flex { flex-direction: column; }
  main { margin-left: 0 !important; padding: 12px !important; }
  .app-topbar { padding: 10px 14px; }
  .app-topbar .trust-chip, #topbar-plan { display: none; }

  /* Hamburger button */
  #mobile-menu-btn { display: inline-flex !important; }

  /* Tables become card list */
  table { font-size: 12px; }
  table thead { display: none; }
  .stack-mobile tbody, .stack-mobile tr, .stack-mobile td { display: block; width: 100%; }
  .stack-mobile tr { border: 1px solid var(--ink-100); border-radius: 10px; padding: 8px; margin-bottom: 8px; background: #fff; }

  /* Grids collapse */
  .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4,
  .grid.md\:grid-cols-4 { grid-template-columns: 1fr !important; }
  .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; }

  /* Panel padding tighter */
  .panel > h2:first-child { font-size: 1.2rem; padding-bottom: 10px; margin-bottom: 14px !important; }
  .bg-white.rounded-xl, .bg-white.rounded-2xl { padding: 14px !important; }

  /* Input size up for easier tap */
  input, textarea, select, button { min-height: 42px; font-size: 14px; }
}
#mobile-menu-btn { display: none; }

/* Selection color */
::selection { background: rgba(99,102,241,0.25); color: var(--ink-900); }

/* ── Lucide icons ─────────────────────────────────────────────── */
.nav-btn { display: flex; align-items: center; gap: 10px; }
.nav-btn [data-lucide], .nav-btn svg {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke-width: 2; opacity: 0.85;
}
.nav-btn.active [data-lucide], .nav-btn.active svg { opacity: 1; color: #a5b4fc; }
.nav-btn:hover [data-lucide], .nav-btn:hover svg { opacity: 1; }

.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-logo svg { filter: drop-shadow(0 2px 6px rgba(99,102,241,0.35)); }
.brand-logo h1 {
  background: linear-gradient(135deg, #a5b4fc 0%, #fff 60%, #c7d2fe 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; letter-spacing: -0.03em;
  margin: 0 !important; padding: 0 !important;
}
.brand-logo h1::after {
  content: 'Growth Platform';
  display: block;
  font-size: 9px; font-weight: 600;
  color: #64748b; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 2px;
  -webkit-text-fill-color: #64748b;
}
/* Override the previous aside h1 styling since we now have .brand-logo wrapper */
aside > h1 { display: none; }

#theme-toggle [data-lucide], #logout-btn [data-lucide] { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(99,102,241,0.15), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(16,185,129,0.08), transparent 60%),
    #0b1020 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .bg-slate-50 { background-color: transparent !important; }
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-900 { color: #e2e8f0 !important; }
[data-theme="dark"] .text-slate-600 { color: #cbd5e1 !important; }
[data-theme="dark"] .text-slate-500 { color: #94a3b8 !important; }
[data-theme="dark"] .text-slate-400 { color: #94a3b8 !important; }

/* Cards */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-white\/90,
[data-theme="dark"] .bg-white\/80 {
  background-color: #0f172a !important;
  border-color: rgba(148,163,184,0.12) !important;
  color: #e2e8f0;
}
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-slate-50 { background-color: #1e293b !important; color: #cbd5e1; }
[data-theme="dark"] .bg-slate-200 { background-color: #334155 !important; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b { border-color: rgba(148,163,184,0.14) !important; }

/* Inputs in dark */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #0b1328 !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,0.18) !important;
}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b; }

/* Topbar in dark */
[data-theme="dark"] .app-topbar {
  background: rgba(15,23,42,0.7);
  border-bottom-color: rgba(148,163,184,0.12);
}
[data-theme="dark"] .app-topbar .brand-mark { color: #e2e8f0; }

/* Tables in dark */
[data-theme="dark"] table thead th { background: #1e293b !important; color: #cbd5e1; border-bottom-color: rgba(148,163,184,0.14); }
[data-theme="dark"] table tbody tr:hover { background-color: rgba(99,102,241,0.08); }
[data-theme="dark"] table tbody tr + tr td { border-top-color: rgba(148,163,184,0.1); }

/* Light pills tone adjust */
[data-theme="dark"] .bg-indigo-50 { background: rgba(99,102,241,0.15) !important; }
[data-theme="dark"] .bg-green-50  { background: rgba(16,185,129,0.12) !important; }
[data-theme="dark"] .bg-amber-50  { background: rgba(245,158,11,0.12) !important; }
[data-theme="dark"] .bg-red-50    { background: rgba(239,68,68,0.12) !important; }
[data-theme="dark"] .bg-blue-50   { background: rgba(59,130,246,0.12) !important; }
[data-theme="dark"] .bg-purple-50 { background: rgba(168,85,247,0.12) !important; }

/* Login view dark */
[data-theme="dark"] #login-view {
  background:
    radial-gradient(800px 400px at 20% 10%, rgba(99,102,241,0.18), transparent 60%),
    radial-gradient(600px 400px at 90% 80%, rgba(16,185,129,0.10), transparent 60%),
    #0b1020;
}
[data-theme="dark"] #login-view > div { background: #0f172a; border-color: rgba(148,163,184,0.12); }

/* Gradient panel tints in dark */
[data-theme="dark"] [class*="from-indigo-50"],
[data-theme="dark"] [class*="from-purple-50"] {
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(168,85,247,0.1)) !important;
}