/* ═══════════════════════════════════════════════════════════
   TeckwikReels — Dual Theme Engine (Dark & Light Mode)
   ═══════════════════════════════════════════════════════════ */

:root {
  --theme-transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  --bg-hover: #1e202e;
  --bg-hover-subtle: rgba(255, 255, 255, 0.05);
  --primary: #7c3aed;
  --primary-lt: #a78bfa;
  --accent: #7c3aed;
  --accent-lt: #a78bfa;
  --fg-dim: #cbd5e1;
}

/* ─── Light Mode Definitions ─── */
[data-theme="light"] {
  --bg: #f8fafc;
  --bg-app: #f1f5f9;
  --bg-card: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-hover-subtle: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-solid: #ffffff;
  --bg-surface-elevated: #f8fafc;
  --bg-surface-hover: #e2e8f0;
  --border: #e2e8f0;
  --border-subtle: #e2e8f0;
  --border-focus: rgba(124, 58, 237, 0.5);
  --fg: #0f172a;
  --fg-dim: #334155;
  --dim: #475569;
  --accent: #7c3aed;
  --accent-lt: #8b5cf6;
  --primary: #7c3aed;
  --primary-lt: #8b5cf6;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

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

[data-theme="light"] .app-layout {
  background-color: var(--bg-app);
  background-image: 
    radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.04) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.04) 0px, transparent 50%);
}

[data-theme="light"] .sidebar {
  background: #ffffff !important;
  border-right-color: #e2e8f0 !important;
}

[data-theme="light"] .sidebar-header {
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .nav-logo-image {
  filter: invert(1);
}

[data-theme="light"] .sidebar-link {
  color: #475569 !important;
}

[data-theme="light"] .sidebar-link:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .sidebar-link.active {
  background: rgba(124, 58, 237, 0.1) !important;
  color: var(--accent) !important;
}

[data-theme="light"] .app-header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .app-header-title {
  color: #0f172a !important;
}

[data-theme="light"] .dropdown-menu {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .dropdown-menu a,
[data-theme="light"] .dropdown-menu div,
[data-theme="light"] .dropdown-menu span {
  color: #0f172a !important;
}

[data-theme="light"] .card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .mobile-nav-link {
  color: #64748b !important;
}

[data-theme="light"] .mobile-nav-link.active {
  color: var(--accent) !important;
}

/* ─── Light Mode Typography & Headings ─── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #0f172a !important;
}

[data-theme="light"] .kpi-value {
  color: #0f172a !important;
}

/* ─── Light Mode Reel Cards & Video Library ─── */
[data-theme="light"] .reel-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .reel-title {
  color: #0f172a !important;
}

[data-theme="light"] .reel-content {
  background: #ffffff !important;
}

[data-theme="light"] .reel-actions {
  border-top-color: #f1f5f9 !important;
}

/* ─── Light Mode Dashboard Hero & Meter ─── */
[data-theme="light"] .dashboard-hero {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .dashboard-hero h2,
[data-theme="light"] .dashboard-hero h3 {
  color: #0f172a !important;
}

[data-theme="light"] .dashboard-hero p {
  color: #475569 !important;
}

[data-theme="light"] .quota-meter-bar {
  background: #e2e8f0 !important;
}

/* ─── Light Mode Tables ─── */
[data-theme="light"] table thead tr,
[data-theme="light"] .table-header-row {
  background: #f1f5f9 !important;
}

[data-theme="light"] table th {
  color: #475569 !important;
}

[data-theme="light"] table td {
  color: #0f172a !important;
}

[data-theme="light"] table tr {
  border-bottom-color: #e2e8f0 !important;
}

/* ─── Light Mode Series Cards & Meta ─── */
[data-theme="light"] .series-stat-box {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .series-card-footer {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .series-icon-box {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .series-name-link {
  color: #0f172a !important;
}

[data-theme="light"] .series-meta-strong {
  color: #0f172a !important;
}

/* ─── Light Mode Interactive Segmented Controls & Chips ─── */
[data-theme="light"] .segmented-nav-tabs {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .segmented-nav-item {
  color: #475569 !important;
}

[data-theme="light"] .segmented-nav-item:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .segmented-nav-item.active {
  color: #ffffff !important;
  background: var(--accent-gradient) !important;
}

[data-theme="light"] .inspiration-chip {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .inspiration-chip:hover {
  background: rgba(124, 58, 237, 0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}

/* ─── Light Mode Caption Tiles & Dropzones ─── */
[data-theme="light"] .caption-style-option {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .caption-preview-box {
  background: #090d16 !important;
  border-radius: 8px !important;
}

[data-theme="light"] .caption-details-box div {
  color: #0f172a !important;
}

[data-theme="light"] .custom-file-dropzone {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

/* ─── Light Mode Outline Buttons ─── */
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-secondary {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .btn-secondary:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* ─── Light Mode Article, Guide & Dim Typography Overhaul ─── */
[data-theme="light"] .guide-content p,
[data-theme="light"] .guide-content li,
[data-theme="light"] .guide-content ol,
[data-theme="light"] .guide-content ul {
  color: #1e293b !important;
}

[data-theme="light"] .guide-content strong {
  color: #0f172a !important;
}

[data-theme="light"] .guide-content blockquote {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-left-color: var(--accent) !important;
}

[data-theme="light"] .text-dim,
[data-theme="light"] p.text-dim,
[data-theme="light"] span.text-dim,
[data-theme="light"] div.text-dim {
  color: #475569 !important;
}

/* ─── Light Mode Form Controls, Labels & Universal Protection ─── */
[data-theme="light"] label:not(.btn-primary):not(.pricing-badge):not(.pill-badge),
[data-theme="light"] .form-label,
[data-theme="light"] legend {
  color: #0f172a !important;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  background-color: #ffffff !important;
  border-color: var(--accent) !important;
}

[data-theme="light"] table td a:not(.btn) {
  color: #0f172a !important;
}

[data-theme="light"] table td a:not(.btn):hover {
  color: var(--accent) !important;
}

[data-theme="light"] .custom-file-dropzone,
[data-theme="light"] .custom-file-dropzone div,
[data-theme="light"] .custom-file-dropzone p,
[data-theme="light"] .custom-file-dropzone span {
  color: #0f172a !important;
}

/* ─── Universal Contrast Integrity: White Text on Dark Elements (Both Modes) ─── */
.btn-primary,
.btn-primary *,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary *,
.pricing-badge,
.pricing-badge *,
[data-theme="light"] .pricing-badge,
[data-theme="light"] .pricing-badge *,
.curr-pill.active,
.curr-pill.active *,
[data-theme="light"] .curr-pill.active,
[data-theme="light"] .curr-pill.active *,
.billing-switcher-opt.active,
[data-theme="light"] .billing-switcher-opt.active,
.phone-mockup-outer,
.phone-mockup-outer *,
[data-theme="light"] .phone-mockup-outer,
[data-theme="light"] .phone-mockup-outer *,
.phone-sim-reel-bg,
.phone-sim-reel-bg *,
[data-theme="light"] .phone-sim-reel-bg,
[data-theme="light"] .phone-sim-reel-bg *,
.caption-preview-box,
.caption-preview-box *,
[data-theme="light"] .caption-preview-box,
[data-theme="light"] .caption-preview-box * {
  color: #ffffff !important;
}

/* ─── Public Pages Light Mode (Navbar, Drawer, Pricing & Elements) ─── */
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .nav-links a {
  color: #334155 !important;
}

[data-theme="light"] .nav-links a:hover {
  color: #0f172a !important;
}

[data-theme="light"] .nav-login {
  color: #334155 !important;
}

[data-theme="light"] .nav-login:hover {
  color: #0f172a !important;
}

[data-theme="light"] .public-mobile-drawer {
  background: #ffffff !important;
  border-left-color: #e2e8f0 !important;
}

[data-theme="light"] .public-mobile-header {
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .public-mobile-header-title {
  color: #0f172a !important;
}

[data-theme="light"] .public-mobile-link {
  color: #0f172a !important;
  border-bottom-color: #f1f5f9 !important;
}

[data-theme="light"] .public-mobile-link:hover {
  background: #f1f5f9 !important;
}

[data-theme="light"] .pricing-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .pricing-card h3 {
  color: #0f172a !important;
}

[data-theme="light"] .currency-selector-container {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .curr-pill {
  color: #475569 !important;
}

[data-theme="light"] .curr-pill:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

[data-theme="light"] .curr-pill.active {
  background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
  color: #ffffff !important;
}

[data-theme="light"] .billing-switcher {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .billing-switcher-opt {
  color: #475569 !important;
}

[data-theme="light"] .billing-switcher-opt.active {
  color: #ffffff !important;
}

[data-theme="light"] .pricing-badge {
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4) !important;
}

[data-theme="light"] .pricing-price .pricing-amount,
[data-theme="light"] .pricing-price .pricing-currency,
[data-theme="light"] .pricing-price .pricing-period {
  color: #0f172a !important;
}

[data-theme="light"] .feature-list li {
  color: #334155 !important;
}

[data-theme="light"] .feature-list li strong {
  color: #0f172a !important;
}

[data-theme="light"] .pricing-hero h1 {
  color: #0f172a !important;
}

[data-theme="light"] .pricing-hero {
  background: radial-gradient(circle at top, rgba(124, 58, 237, 0.08) 0%, transparent 70%) !important;
}