/* ===== Theme Variables ===== */
:root {
  --bg-page: #161618;
  --bg-nav: #1c1c1f;
  --bg-card: #1f1f22;
  --bg-input: #252528;
  --bg-hover: #26262a;
  --border-color: #2e2e32;
  --border-light: #252528;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #666666;
  --text-placeholder: #555555;
  --accent: #00ff88;
  --accent-hover: #00dd77;
  --accent-text: #0a0a0a;
  --accent-subtle: rgba(0, 255, 136, 0.12);
  --accent-border: rgba(0, 255, 136, 0.25);
  --badge-active-bg: rgba(0, 255, 136, 0.12);
  --badge-active-text: #00ff88;
  --badge-active-border: rgba(0, 255, 136, 0.25);
  --badge-amber-bg: rgba(255, 170, 0, 0.12);
  --badge-amber-text: #ffaa00;
  --badge-amber-border: rgba(255, 170, 0, 0.25);
  --badge-red-bg: rgba(255, 68, 68, 0.12);
  --badge-red-text: #ff4444;
  --badge-red-border: rgba(255, 68, 68, 0.25);
  --badge-blue-bg: rgba(100, 149, 237, 0.12);
  --badge-blue-text: #6495ed;
  --badge-blue-border: rgba(100, 149, 237, 0.25);
  --badge-grey-bg: rgba(102, 102, 102, 0.12);
  --badge-grey-text: #888888;
  --badge-grey-border: rgba(102, 102, 102, 0.25);
  --shadow-card: none;
  --shadow-nav: none;
}

[data-theme="light"] {
  --bg-page: #f5f5f3;
  --bg-nav: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f0f0ec;
  --bg-hover: #e8e8e4;
  --border-color: #e0e0dc;
  --border-light: #ebebeb;
  --text-primary: #1a1a1a;
  --text-secondary: #444444;
  --text-muted: #888888;
  --text-placeholder: #aaaaaa;
  --accent: #00aa55;
  --accent-hover: #008844;
  --accent-text: #ffffff;
  --accent-subtle: rgba(0, 170, 85, 0.1);
  --accent-border: rgba(0, 170, 85, 0.25);
  --badge-active-bg: rgba(0, 170, 85, 0.1);
  --badge-active-text: #007a40;
  --badge-active-border: rgba(0, 170, 85, 0.25);
  --badge-amber-bg: rgba(180, 120, 0, 0.1);
  --badge-amber-text: #8a5c00;
  --badge-amber-border: rgba(180, 120, 0, 0.25);
  --badge-red-bg: rgba(200, 40, 40, 0.1);
  --badge-red-text: #a02020;
  --badge-red-border: rgba(200, 40, 40, 0.25);
  --badge-blue-bg: rgba(50, 100, 200, 0.1);
  --badge-blue-text: #2850a0;
  --badge-blue-border: rgba(50, 100, 200, 0.25);
  --badge-grey-bg: rgba(100, 100, 100, 0.1);
  --badge-grey-text: #555555;
  --badge-grey-border: rgba(100, 100, 100, 0.25);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-nav: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* ===== End Theme Variables ===== */


/* Autofill override for dark inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Nuclear html/body */
html, body { background-color: var(--bg-page) !important; min-height: 100vh; }

/* Kill ALL remaining white/light backgrounds */
html { background: var(--bg-page) !important; }
body, .min-h-screen, .bg-gray-50, .bg-gray-100, .bg-white {
  background: var(--bg-page) !important;
}

/* Only cards/surfaces should be var(--bg-card) — scope them precisely */
main .bg-white,
main .rounded-xl,
main .rounded-lg.shadow-sm,
main .rounded-xl.shadow-sm,
main [class*="rounded"][class*="shadow"],
main [class*="rounded"][class*="border"] {
  background: var(--bg-card) !important;
}

/* Table headers specifically */
main thead, main thead tr, main thead.bg-gray-50 { background: var(--bg-nav) !important; }

/* Filter/form bars */
main .bg-white.rounded-lg.shadow-sm.border.p-4,
main .bg-white.rounded-xl.shadow-sm.border.p-4,
main .bg-white.rounded-xl.shadow-sm.border.p-6 { background: var(--bg-card) !important; }

/* Login page full dark */
body.bg-gray-50.min-h-screen { background: var(--bg-page) !important; }
.min-h-screen.flex.items-center { background: var(--bg-page) !important; }
.min-h-\[80vh\] { background: transparent !important; }

/* Public standalone pages */
body.min-h-screen { background: var(--bg-page) !important; }

/* Portal sub-nav bar */
.border-b.shadow-sm { background: var(--bg-nav) !important; border-color: var(--bg-hover) !important; }

/* Notification dropdown */
.absolute.right-0.mt-2.w-72 { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
.absolute.right-0 .border-b { border-color: var(--bg-hover) !important; }
.absolute.right-0 .bg-indigo-50 { background: var(--bg-input) !important; }

/* Remaining bg-gray-50 inside cards */
main .bg-gray-50 { background: var(--bg-nav) !important; }
dl .bg-gray-50 { background: var(--bg-nav) !important; }

/* Pipeline stage buttons */
.bg-gray-100.text-gray-500 { background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; color: var(--text-muted) !important; }

/* Checkbox styling */
input[type="checkbox"] { accent-color: var(--accent); }

/* Ensure no white gaps anywhere */
div, section, article, aside, header, footer, main, form { background-color: inherit; }

/* Viralify Growth — Dark Theme */
:root {
  --vg-bg: var(--bg-page);
  --vg-surface: var(--bg-card);
  --vg-border: var(--border-color);
  --vg-accent: var(--accent);
  --vg-accent-hover: var(--accent-hover);
  --vg-nav-bg: var(--bg-nav);
  --vg-nav-border: var(--bg-hover);
  --vg-heading: var(--text-primary);
  --vg-body: var(--text-secondary);
  --vg-muted: var(--text-muted);
  --vg-input-bg: var(--bg-input);
  --vg-input-border: var(--border-color);
  --vg-row-hover: var(--bg-input);
}

/* Base */
body { background: var(--vg-bg) !important; color: var(--vg-body) !important; }

/* Headings */
h1, h2, h3, h4, h5, h6,
.text-gray-900, .text-2xl, .text-xl, .text-lg { color: var(--vg-heading) !important; }
.text-gray-700 { color: var(--vg-body) !important; }
.text-gray-500, .text-gray-600 { color: var(--vg-muted) !important; }
.text-gray-400 { color: var(--text-placeholder) !important; }
.text-gray-300 { color: var(--text-placeholder) !important; }

/* Nav */
nav.bg-indigo-900,
nav[class*="bg-indigo"] { background: var(--vg-nav-bg) !important; border-bottom: 1px solid var(--vg-nav-border) !important; box-shadow: none !important; }
nav a.text-indigo-300 { color: var(--text-muted) !important; }
nav a.text-indigo-300:hover, nav a:hover { color: var(--text-primary) !important; }
nav a.text-white.font-semibold,
nav .text-white.font-semibold { color: var(--vg-accent) !important; }
nav .text-indigo-200 { color: var(--text-muted) !important; }
nav .text-indigo-500, nav .text-indigo-600 { color: var(--text-placeholder) !important; }
nav span.text-indigo-200 { color: var(--text-muted) !important; }

/* Notification bell */
nav button svg { color: var(--text-muted) !important; }
nav button:hover svg { color: var(--text-primary) !important; }
nav .bg-red-500 { background: var(--vg-accent) !important; color: var(--vg-bg) !important; }
nav .bg-white { background: var(--vg-surface) !important; border-color: var(--vg-border) !important; }
nav .bg-indigo-50 { background: var(--bg-input) !important; }

/* Portal sub-nav */
.bg-white.border-b { background: var(--vg-nav-bg) !important; border-color: var(--vg-nav-border) !important; }
.bg-indigo-100.text-indigo-700 { background: rgba(0,255,136,0.12) !important; color: var(--vg-accent) !important; }

/* Cards and surfaces */
.bg-white, .bg-gray-50 { background: var(--vg-surface) !important; }
main.bg-gray-50, body > .bg-gray-50 { background: var(--vg-bg) !important; }
main { background: transparent !important; }

/* Borders */
.border, .border-gray-200, .border-gray-100, .shadow-sm,
.rounded-xl.shadow-sm, .rounded-lg.shadow-sm,
[class*="border"][class*="gray"] { border-color: var(--vg-border) !important; }
.border-b { border-color: var(--vg-nav-border) !important; }
.shadow-sm { box-shadow: none !important; }
.shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; }

/* Tables */
thead, thead.bg-gray-50, .bg-gray-50 th { background: var(--vg-nav-bg) !important; }
th { color: var(--text-muted) !important; }
td { color: var(--vg-body) !important; border-color: var(--vg-nav-border) !important; }
tbody tr:hover, tr.hover\:bg-gray-50:hover { background: var(--vg-row-hover) !important; }
.divide-y > * + *, .divide-gray-200 > * + * { border-color: var(--vg-nav-border) !important; }

/* Inputs */
input, select, textarea {
  background: var(--vg-input-bg) !important;
  border-color: var(--vg-input-border) !important;
  color: var(--text-primary) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-placeholder) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--vg-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,0.1) !important;
  outline: none !important;
}
label { color: var(--text-muted) !important; }

/* Primary buttons */
.bg-indigo-600, .bg-indigo-700,
a.bg-indigo-600, button.bg-indigo-600,
[class*="bg-indigo-6"] {
  background: var(--vg-accent) !important;
  color: var(--vg-bg) !important;
  border: none !important;
  font-weight: 600 !important;
}
.bg-indigo-600:hover, .hover\:bg-indigo-700:hover,
a.bg-indigo-600:hover, button.bg-indigo-600:hover,
[class*="bg-indigo-6"]:hover { background: var(--vg-accent-hover) !important; }

/* Green buttons */
.bg-green-600, .bg-green-500, [class*="bg-green-6"], [class*="bg-green-5"] {
  background: var(--vg-accent) !important; color: var(--vg-bg) !important;
}
.bg-green-600:hover, .bg-green-500:hover { background: var(--vg-accent-hover) !important; }

/* Ghost/secondary buttons */
.bg-gray-100, .bg-gray-50, a.bg-gray-100, button.bg-gray-100 {
  background: transparent !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-body) !important;
}
.bg-gray-100:hover, .hover\:bg-gray-200:hover, a.bg-gray-100:hover {
  border-color: var(--vg-accent) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}

/* Danger buttons */
.bg-red-500, .bg-red-600, [class*="bg-red-5"] {
  background: transparent !important;
  border: 1px solid #ff4444 !important;
  color: #ff4444 !important;
}
.bg-red-50 { background: transparent !important; border: 1px solid #ff444440 !important; color: #ff4444 !important; }

/* Orange buttons */
.bg-orange-500, [class*="bg-orange-5"] {
  background: transparent !important;
  border: 1px solid #ffaa00 !important;
  color: #ffaa00 !important;
}

/* Purple accent */
.bg-purple-50, a.bg-purple-50 {
  background: transparent !important;
  border: 1px solid #a855f7 !important;
  color: #a855f7 !important;
}

/* Status badges */
.bg-green-100.text-green-800, [class*="bg-green-100"][class*="text-green"] {
  background: rgba(0,255,136,0.12) !important; color: var(--vg-accent) !important;
}
.bg-yellow-100.text-yellow-800, [class*="bg-yellow-100"][class*="text-yellow"],
.bg-orange-100.text-orange-800, [class*="bg-orange-100"][class*="text-orange"] {
  background: rgba(255,170,0,0.12) !important; color: #ffaa00 !important;
}
.bg-red-100.text-red-800, [class*="bg-red-100"][class*="text-red"] {
  background: rgba(255,68,68,0.12) !important; color: #ff4444 !important;
}
.bg-gray-100.text-gray-800, .bg-gray-100.text-gray-600,
[class*="bg-gray-100"][class*="text-gray"] {
  background: rgba(51,51,51,0.5) !important; color: var(--text-muted) !important;
}
.bg-blue-100.text-blue-800, [class*="bg-blue-100"][class*="text-blue"] {
  background: rgba(96,165,250,0.12) !important; color: #60a5fa !important;
}
.bg-indigo-100.text-indigo-800, [class*="bg-indigo-100"][class*="text-indigo"] {
  background: rgba(0,255,136,0.12) !important; color: var(--vg-accent) !important;
}
.bg-purple-100.text-purple-800, [class*="bg-purple-100"][class*="text-purple"] {
  background: rgba(168,85,247,0.12) !important; color: #a855f7 !important;
}
.bg-amber-100.text-amber-800, [class*="bg-amber-100"][class*="text-amber"] {
  background: rgba(255,170,0,0.12) !important; color: #ffaa00 !important;
}
.bg-sky-100, .bg-pink-100 { background: rgba(96,165,250,0.12) !important; }

/* Alert banners */
.bg-green-50 { background: rgba(0,255,136,0.08) !important; border-color: rgba(0,255,136,0.2) !important; }
.bg-green-50 .text-green-700, .text-green-700 { color: var(--vg-accent) !important; }
.bg-red-50 { border-color: rgba(255,68,68,0.2) !important; }
.bg-amber-50 { background: rgba(255,170,0,0.08) !important; border-color: rgba(255,170,0,0.2) !important; }
.bg-amber-50 * { color: #ffaa00 !important; }
.bg-indigo-50 { background: rgba(0,255,136,0.06) !important; border-color: rgba(0,255,136,0.15) !important; }
.bg-indigo-50 .text-indigo-800, .bg-indigo-50 .text-indigo-600 { color: var(--vg-accent) !important; }
.bg-orange-50 { background: rgba(255,170,0,0.06) !important; border-color: rgba(255,170,0,0.15) !important; }

/* Links */
.text-indigo-600, a.text-indigo-600 { color: var(--vg-accent) !important; }
.text-indigo-600:hover, a.text-indigo-600:hover { color: var(--vg-accent-hover) !important; }

/* Code blocks */
code { background: var(--bg-input) !important; color: var(--vg-accent) !important; border-color: var(--vg-border) !important; }

/* Ticket bubbles */
.bg-indigo-50.text-indigo-900 { background: rgba(0,255,136,0.08) !important; color: var(--vg-body) !important; }
.bg-gray-100.text-gray-900 { background: var(--bg-input) !important; color: var(--vg-body) !important; }

/* Progress bar */
.bg-gray-200 { background: var(--bg-hover) !important; }
.bg-indigo-600.h-2\.5 { background: var(--vg-accent) !important; }

/* Channel dots */
.bg-green-500 { background: var(--vg-accent) !important; }
.bg-gray-300 { background: #333333 !important; }

/* Metric card numbers */
.text-2xl.font-bold { color: var(--vg-heading) !important; }

/* Prize card override */
.bg-amber-50.border-amber-200 { background: rgba(255,170,0,0.08) !important; border-color: rgba(255,170,0,0.2) !important; }
.text-amber-900 { color: #ffaa00 !important; }
.text-amber-700, .text-amber-600 { color: #cc8800 !important; }
.text-amber-800 { color: #ffaa00 !important; }

/* Red warning blocks */
.bg-red-50.border-red-200 { background: rgba(255,68,68,0.06) !important; border-color: rgba(255,68,68,0.2) !important; }
.text-red-700 { color: #ff4444 !important; }

/* Kanban board */
.bg-white.rounded-lg.shadow-sm.border.p-3 { background: var(--vg-surface) !important; }

/* Leaderboard gold/silver/bronze borders */
.border-l-4.border-yellow-400 { border-left-color: #ffd700 !important; }
.border-l-4.border-gray-400 { border-left-color: #c0c0c0 !important; }
.border-l-4.border-amber-600 { border-left-color: #cd7f32 !important; }

/* Widget shadow DOM won't be affected — it has its own styles */

/* Footer text */
.text-xs.text-gray-400 { color: var(--text-placeholder) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--vg-bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Pagination */
nav[role="navigation"] span, nav[role="navigation"] a {
  background: var(--vg-surface) !important;
  border-color: var(--vg-border) !important;
  color: var(--vg-body) !important;
}
nav[role="navigation"] span[aria-current] {
  background: var(--vg-accent) !important;
  color: var(--vg-bg) !important;
}


/* === 04b: animations, badges, spacing === */

/* -----------------------------------------------------------------------
   Micro-animations
----------------------------------------------------------------------- */

/* Card hover lift */
main .rounded-xl,
main .rounded-lg {
  transition: transform 0.15s ease, border-color 0.15s ease;
}
main .rounded-xl:hover,
main .rounded-lg:hover {
  transform: translateY(-2px);
  border-color: #3e3e42;
}

/* Button press */
button,
a.rounded-lg,
[type="submit"] {
  transition: transform 0.1s ease, background-color 0.15s ease;
}
button:active,
a.rounded-lg:active,
[type="submit"]:active {
  transform: scale(0.98);
}

/* Page fade in */
main {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* -----------------------------------------------------------------------
   Standardized status badges
----------------------------------------------------------------------- */

.badge-active,
.badge-connected,
.badge-paid,
.badge-resolved {
  background: rgba(0, 255, 136, 0.12);
  color: var(--accent);
  border: 1px solid rgba(0, 255, 136, 0.25);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.badge-draft,
.badge-pending,
.badge-configured {
  background: rgba(255, 170, 0, 0.12);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, 0.25);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.badge-overdue,
.badge-failed,
.badge-suspended {
  background: rgba(255, 68, 68, 0.12);
  color: #ff4444;
  border: 1px solid rgba(255, 68, 68, 0.25);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.badge-ended,
.badge-closed,
.badge-inactive {
  background: rgba(102, 102, 102, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(102, 102, 102, 0.25);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.badge-paused,
.badge-in-progress,
.badge-queued {
  background: rgba(100, 149, 237, 0.12);
  color: #6495ed;
  border: 1px solid rgba(100, 149, 237, 0.25);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

/* -----------------------------------------------------------------------
   Improved spacing
----------------------------------------------------------------------- */

main h2 {
  margin-bottom: 24px;
}

main table td,
main table th {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 48px;
}

/* === end 04b === */


/* Dropdown z-index stacking fix */
.vg-dd { position: relative; z-index: 40; }
.vg-dd:hover { z-index: 50; }
.vg-dd-panel { min-width: 200px; padding-top: 4px; }
.vg-dd-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 6px 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.vg-dd-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-secondary) !important;
    text-decoration: none;
    white-space: nowrap;
}
.vg-dd-menu a:hover { background: var(--bg-input) !important; color: var(--text-primary) !important; }
.vg-dd-menu a.vg-active { color: var(--accent) !important; }


/* ===== Nav always stays dark regardless of theme ===== */
nav,
#mobileMenu,
.vg-dd-menu {
  --bg-page: #161618;
  --bg-nav: #1c1c1f;
  --bg-card: #1f1f22;
  --bg-input: #252528;
  --bg-hover: #26262a;
  --border-color: #2e2e32;
  --border-light: #252528;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #666666;
  --text-placeholder: #555555;
  --accent: #00ff88;
  --accent-hover: #00dd77;
  --accent-text: #0a0a0a;
  --accent-subtle: rgba(0, 255, 136, 0.12);
  --accent-border: rgba(0, 255, 136, 0.25);
  --vg-bg: #161618;
  --vg-surface: #1f1f22;
  --vg-border: #2e2e32;
  --vg-accent: #00ff88;
  --vg-nav-bg: #1c1c1f;
  --vg-nav-border: #26262a;
  --vg-heading: #ffffff;
  --vg-body: #cccccc;
  --vg-muted: #666666;
  --vg-input-bg: #252528;
  --vg-input-border: #2e2e32;
}

/* Ensure nav background is always dark */
[data-theme="light"] nav {
  background: #1c1c1f !important;
  border-bottom-color: #26262a !important;
}

[data-theme="light"] #mobileMenu {
  background: #1c1c1f !important;
  border-bottom-color: #26262a !important;
}

/* Notification dropdown stays dark */
[data-theme="light"] nav .absolute.right-0 {
  background: #1f1f22 !important;
  border-color: #2e2e32 !important;
}

/* Impersonation banner keeps its amber regardless */
[data-theme="light"] div[style*="background:#ffaa00"],
[data-theme="light"] div[style*="background: #ffaa00"] {
  color: #0a0a0a !important;
}
/* ===== End Nav Dark Override ===== */