/* =============================================================
   ProxyBox Dual-Mode Theme System
   Dark mode is default. Applies html[data-theme="light"] overrides.
   ============================================================= */

/* Semantic CSS variables */
:root {
  --pb-bg: #0A0E17;
  --pb-bg-elev: #111827;
  --pb-surface: #1A2035;
  --pb-surface-elev: #232D45;
  --pb-border: rgba(255, 255, 255, 0.06);
  --pb-border-strong: rgba(255, 255, 255, 0.12);
  --pb-text: #F8FAFC;
  --pb-text-muted: #94A3B8;
  --pb-text-dim: #64748B;
  --pb-accent: #0EA5E9;
  --pb-accent-hover: #0284C7;
  --pb-success: #22C55E;
  --pb-warning: #F59E0B;
  --pb-danger: #EF4444;
  --pb-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] {
  --pb-bg: #F7F8FA;
  --pb-bg-elev: #FFFFFF;
  --pb-surface: #FFFFFF;
  --pb-surface-elev: #F8FAFC;
  --pb-border: rgba(15, 23, 42, 0.08);
  --pb-border-strong: rgba(15, 23, 42, 0.14);
  --pb-text: #0F172A;
  --pb-text-muted: #475569;
  --pb-text-dim: #64748B;
  --pb-accent: #0284C7;
  --pb-accent-hover: #0369A1;
  --pb-success: #059669;
  --pb-warning: #D97706;
  --pb-danger: #DC2626;
  --pb-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.12);
}

/* =============================================================
   Light-mode overrides for Tailwind classes used across
   dashboard.html and admin.html
   ============================================================= */

html[data-theme="light"] body {
  background-color: var(--pb-bg);
  color: var(--pb-text);
}

/* Background overrides */
html[data-theme="light"] .bg-gray-950 { background-color: var(--pb-bg); }
html[data-theme="light"] .bg-gray-900 { background-color: var(--pb-surface); }
html[data-theme="light"] .bg-gray-900\/50 { background-color: rgba(255, 255, 255, 0.7); }
html[data-theme="light"] .bg-gray-900\/60 { background-color: rgba(255, 255, 255, 0.8); }
html[data-theme="light"] .bg-gray-900\/80 { background-color: rgba(255, 255, 255, 0.9); }
html[data-theme="light"] .bg-gray-800 { background-color: #F1F5F9; }
html[data-theme="light"] .bg-gray-800\/50 { background-color: rgba(241, 245, 249, 0.7); }
html[data-theme="light"] .bg-gray-800\/80 { background-color: rgba(241, 245, 249, 0.9); }
html[data-theme="light"] .bg-gray-700 { background-color: #E2E8F0; }
html[data-theme="light"] .bg-gray-700\/50 { background-color: rgba(226, 232, 240, 0.7); }
html[data-theme="light"] .bg-black\/50 { background-color: rgba(15, 23, 42, 0.06); }
html[data-theme="light"] .bg-black\/40 { background-color: rgba(15, 23, 42, 0.04); }

/* Text overrides */
html[data-theme="light"] body.text-white,
html[data-theme="light"] .text-white { color: var(--pb-text); }

/* BUT: keep text-white truly white when it sits on a colored button/badge
   background. Otherwise "Go Premium" / "Buy Lifetime" buttons render dark
   text on blue/amber — unreadable and ugly. */
html[data-theme="light"] [class*="bg-sky-"]:not([class*="bg-sky-500\\/"]):not([class*="bg-sky-400\\/"]):not([class*="bg-sky-300\\/"]).text-white,
html[data-theme="light"] [class*="bg-emerald-"]:not([class*="\\/"]).text-white,
html[data-theme="light"] [class*="bg-amber-"]:not([class*="\\/"]).text-white,
html[data-theme="light"] [class*="bg-indigo-"]:not([class*="\\/"]).text-white,
html[data-theme="light"] [class*="bg-blue-"]:not([class*="\\/"]).text-white,
html[data-theme="light"] [class*="bg-green-"]:not([class*="\\/"]).text-white,
html[data-theme="light"] [class*="bg-red-"]:not([class*="\\/"]).text-white,
html[data-theme="light"] [class*="bg-purple-"]:not([class*="\\/"]).text-white,
html[data-theme="light"] [class*="bg-gradient-"].text-white,
html[data-theme="light"] button[class*="bg-sky-500"].text-white,
html[data-theme="light"] a[class*="bg-sky-500"].text-white,
html[data-theme="light"] button[class*="bg-sky-400"].text-white,
html[data-theme="light"] a[class*="bg-sky-400"].text-white {
  color: #FFFFFF !important;
}

html[data-theme="light"] .text-gray-100 { color: var(--pb-text); }
html[data-theme="light"] .text-gray-200 { color: #1E293B; }
html[data-theme="light"] .text-gray-300 { color: #334155; }
html[data-theme="light"] .text-gray-400 { color: var(--pb-text-muted); }
html[data-theme="light"] .text-gray-500 { color: var(--pb-text-dim); }
html[data-theme="light"] .text-gray-600 { color: #94A3B8; }

/* Border overrides */
html[data-theme="light"] .border-gray-800 { border-color: #E2E8F0; }
html[data-theme="light"] .border-gray-800\/50 { border-color: rgba(226, 232, 240, 0.7); }
html[data-theme="light"] .border-gray-700 { border-color: #CBD5E1; }
html[data-theme="light"] .border-gray-700\/50 { border-color: rgba(203, 213, 225, 0.7); }
html[data-theme="light"] .border-white\/5 { border-color: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .border-white\/10 { border-color: rgba(15, 23, 42, 0.12); }
html[data-theme="light"] .border-white\/20 { border-color: rgba(15, 23, 42, 0.18); }

/* Translucent white overlays sit on a white body in light mode — they
   disappear. Flip them to low-opacity dark so cards/buttons still read. */
html[data-theme="light"] .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06); }
html[data-theme="light"] .bg-white\/20 { background-color: rgba(15, 23, 42, 0.09); }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.09); }
html[data-theme="light"] .hover\:bg-white\/20:hover { background-color: rgba(15, 23, 42, 0.13); }

/* Divide overrides */
html[data-theme="light"] .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: #E2E8F0; }
html[data-theme="light"] .divide-gray-800\/50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(226, 232, 240, 0.7); }

/* Hover overrides */
html[data-theme="light"] .hover\:bg-gray-800:hover { background-color: #F1F5F9; }
html[data-theme="light"] .hover\:bg-gray-800\/50:hover { background-color: rgba(241, 245, 249, 0.8); }
html[data-theme="light"] .hover\:bg-gray-900:hover { background-color: #FFFFFF; }
html[data-theme="light"] .hover\:text-white:hover { color: var(--pb-text); }

/* Ring overrides */
html[data-theme="light"] .ring-gray-800 { --tw-ring-color: #E2E8F0; }
html[data-theme="light"] .ring-gray-700 { --tw-ring-color: #CBD5E1; }

/* Custom style.css element overrides */
html[data-theme="light"] .feature-card,
html[data-theme="light"] .gradient-border { background: var(--pb-surface); }
html[data-theme="light"] .dot-grid-bg {
  background-image: radial-gradient(circle, rgba(14, 165, 233, 0.18) 1px, transparent 1px);
}
html[data-theme="light"] body::before { opacity: 0.012; }

/* Inputs — light mode proper */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background-color: var(--pb-surface);
  color: var(--pb-text);
  border-color: #E2E8F0;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--pb-text-dim); }

/* =============================================================
   Theme toggle button
   ============================================================= */
.pb-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--pb-border);
  background: transparent;
  color: var(--pb-text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pb-theme-toggle:hover {
  background: var(--pb-surface);
  color: var(--pb-text);
  border-color: var(--pb-border-strong);
}
.pb-theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* Show the right icon per theme */
html[data-theme="light"] .pb-theme-toggle .pb-icon-sun,
html[data-theme="dark"] .pb-theme-toggle .pb-icon-moon { display: none; }

/* Smooth cross-fade on theme change */
html.pb-theme-animating,
html.pb-theme-animating * {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease !important;
}

/* =============================================================
   Light-mode fixes for homepage & marketing pages
   ============================================================= */

/* Nav bar: scrolled variant must flip in light mode */
html[data-theme="light"] .nav-scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] #navbar a,
html[data-theme="light"] #navbar button:not(.pb-theme-toggle):not([class*="bg-sky"]) {
  color: #475569;
}
html[data-theme="light"] #navbar .text-gray-400 {
  color: #64748B;
}
html[data-theme="light"] #navbar .hover\:text-white:hover {
  color: #0F172A !important;
}

/* Kill the jarring dark-gradient transition bands between sections */
html[data-theme="light"] .bg-gradient-to-t.from-gray-950 {
  background-image: linear-gradient(to top, var(--pb-bg), transparent) !important;
}
html[data-theme="light"] .bg-gradient-to-b.from-gray-950,
html[data-theme="light"] .bg-gradient-to-b.to-gray-950 {
  background-image: linear-gradient(to bottom, var(--pb-bg), transparent) !important;
}
html[data-theme="light"] [class*="from-gray-950"],
html[data-theme="light"] [class*="to-gray-950"],
html[data-theme="light"] [class*="from-gray-900"] {
  --tw-gradient-from: var(--pb-bg) !important;
  --tw-gradient-to: var(--pb-bg) !important;
  --tw-gradient-stops: var(--pb-bg), transparent !important;
}

/* Live network coverage SVG — bump opacity + darken strokes/fills so it reads */
html[data-theme="light"] section svg[viewBox="0 0 960 400"] {
  opacity: 1 !important;
}
html[data-theme="light"] section svg[viewBox="0 0 960 400"] path[stroke*="14,165,233"] {
  stroke: rgba(2, 132, 199, 0.45) !important;
}
html[data-theme="light"] section svg[viewBox="0 0 960 400"] line[stroke*="14,165,233"] {
  stroke: rgba(2, 132, 199, 0.30) !important;
}
html[data-theme="light"] section svg[viewBox="0 0 960 400"] text {
  fill: #475569 !important;
}
html[data-theme="light"] section svg[viewBox="0 0 960 400"] circle[fill*="14,165,233"],
html[data-theme="light"] section svg[viewBox="0 0 960 400"] circle[fill*="#0EA5E9"] {
  fill: #0284C7 !important;
}

/* "LIVE NETWORK COVERAGE" label contrast */
html[data-theme="light"] .text-gray-600 { color: #64748B; }

/* Product hero shots often sit on a glowy dark circle — drop it in light mode */
html[data-theme="light"] .hero-orb,
html[data-theme="light"] .hero-glow {
  opacity: 0.3;
  mix-blend-mode: multiply;
}

/* Pricing cards and feature cards on homepage need stronger borders in light mode */
html[data-theme="light"] .gradient-border {
  background: var(--pb-surface) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .feature-card {
  background: var(--pb-surface) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Testimonial cards / stat cards on dark bg tokens */
html[data-theme="light"] .bg-gradient-to-r.from-sky-500\/10,
html[data-theme="light"] .bg-gradient-to-br.from-sky-500\/10 {
  background-image: linear-gradient(to right, rgba(14, 165, 233, 0.08), rgba(14, 165, 233, 0.03)) !important;
}
html[data-theme="light"] .bg-sky-500\/10 { background-color: rgba(14, 165, 233, 0.08); }
html[data-theme="light"] .bg-sky-500\/5 { background-color: rgba(14, 165, 233, 0.05); }

/* Footer — usually dark. Flip to light-friendly neutral */
html[data-theme="light"] footer.bg-gray-950,
html[data-theme="light"] footer .bg-gray-950,
html[data-theme="light"] footer {
  background-color: #F1F5F9 !important;
  color: var(--pb-text-muted);
}
html[data-theme="light"] footer a { color: var(--pb-text-muted); }
html[data-theme="light"] footer a:hover { color: var(--pb-text); }