/*
 * Light theme — comprehensive overrides.
 * Linked from all user-app + landing + admin pages AFTER their inline <style>
 * so these rules take precedence.
 *
 * Why this exists: Original CSS used rgba(255,255,255,X) and hardcoded
 * #16161f / #0f0f17 for cards/backgrounds. On light theme (white page bg),
 * these become invisible. This file remaps each dark token to a working
 * light equivalent.
 */

html[data-theme="light"] {
  color-scheme: light;
}

/* ── Base body + meshes ── */
html[data-theme="light"] body,
html[data-theme="light"] .bg-mesh,
html[data-theme="light"] .bg-base {
  background: #f8fafc !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 15% -5%, rgba(99,102,241,.08) 0%, transparent 60%),
    radial-gradient(ellipse 55% 35% at 85% 105%, rgba(139,92,246,.06) 0%, transparent 60%) !important;
  color: #0f172a !important;
}

/* ── Page-level dark backgrounds → white ── */
html[data-theme="light"] [style*="background:#0f0f17"],
html[data-theme="light"] [style*="background: #0f0f17"],
html[data-theme="light"] [style*="background:#16161f"],
html[data-theme="light"] [style*="background: #16161f"],
html[data-theme="light"] [style*="background:#1a1a28"],
html[data-theme="light"] [style*="background: #1a1a28"],
html[data-theme="light"] [style*="background:#0c0c14"],
html[data-theme="light"] [style*="background: #0c0c14"] {
  background: #ffffff !important;
}

/* ── Cards ── */
html[data-theme="light"] .card,
html[data-theme="light"] .post-card,
html[data-theme="light"] .ex-card,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .user-card,
html[data-theme="light"] .reply-card {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
html[data-theme="light"] .card-done {
  background: linear-gradient(135deg, #ffffff, #f0fdf4) !important;
  border-color: rgba(52,211,153,.35) !important;
}
html[data-theme="light"] .card-error {
  background: linear-gradient(135deg, #ffffff, #fef2f2) !important;
  border-color: rgba(239,68,68,.35) !important;
}
html[data-theme="light"] .card-processing {
  background: #ffffff !important;
  border-color: rgba(99,102,241,.35) !important;
}

/* ── Sidebar ── */
html[data-theme="light"] .sidebar,
html[data-theme="light"] .admin-sidebar {
  background: #ffffff !important;
  border-right-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .sidebar-brand,
html[data-theme="light"] .sidebar-logo {
  border-bottom-color: rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .sidebar-brand-text { color: #0f172a !important; }
html[data-theme="light"] .sidebar-section-label { color: #94a3b8 !important; }
html[data-theme="light"] .sidebar-footer { border-top-color: rgba(15,23,42,.06) !important; }
html[data-theme="light"] .nav-item,
html[data-theme="light"] .sidebar-item {
  color: #475569 !important;
}
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .sidebar-item:hover {
  background: rgba(15,23,42,.04) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .sidebar-item.active {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08)) !important;
  color: #4f46e5 !important;
  border-color: rgba(99,102,241,.25) !important;
}
html[data-theme="light"] .sidebar-action-btn {
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.08) !important;
  color: #475569 !important;
}
html[data-theme="light"] .sidebar-action-btn:hover {
  background: rgba(15,23,42,.08) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .user-info-name { color: #0f172a !important; }
html[data-theme="light"] .user-info-meta { color: #64748b !important; }

/* ── Topbar mobile ── */
html[data-theme="light"] .topbar-mobile {
  background: rgba(255,255,255,.95) !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .topbar-mobile .text-white,
html[data-theme="light"] .topbar-mobile span { color: #0f172a !important; }
html[data-theme="light"] .hamburger-btn {
  background: rgba(15,23,42,.05) !important;
  border-color: rgba(15,23,42,.08) !important;
  color: #475569 !important;
}

/* ── Buttons ── */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-secondary {
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.1) !important;
  color: #475569 !important;
}
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .btn-secondary:hover {
  background: rgba(15,23,42,.08) !important;
  color: #0f172a !important;
}

/* ── Inputs ── */
html[data-theme="light"] .inp,
html[data-theme="light"] .field,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .inp:focus,
html[data-theme="light"] .field:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: rgba(99,102,241,.5) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
}
html[data-theme="light"] .inp::placeholder,
html[data-theme="light"] .field::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}

/* ── Tables — content borders MUST be visible ── */
html[data-theme="light"] table { background: #ffffff !important; }
html[data-theme="light"] table td,
html[data-theme="light"] table th {
  border-color: rgba(15,23,42,.1) !important;
  color: #0f172a !important;
}

/* ── Text color hierarchy ── */
html[data-theme="light"] .text-white { color: #0f172a !important; }
html[data-theme="light"] .text-slate-300 { color: #334155 !important; }
html[data-theme="light"] .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] .text-slate-500 { color: #64748b !important; }
html[data-theme="light"] .text-slate-600 { color: #94a3b8 !important; }
html[data-theme="light"] .text-slate-700 { color: #cbd5e1 !important; }

/* Inline-styled text colors */
html[data-theme="light"] [style*="color:#f1f5f9"],
html[data-theme="light"] [style*="color: #f1f5f9"],
html[data-theme="light"] [style*="color:#e2e8f0"],
html[data-theme="light"] [style*="color: #e2e8f0"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#ffffff"],
html[data-theme="light"] [style*="color: #ffffff"] {
  color: #0f172a !important;
}
html[data-theme="light"] [style*="color:#94a3b8"],
html[data-theme="light"] [style*="color: #94a3b8"] {
  color: #64748b !important;
}
html[data-theme="light"] [style*="color:#475569"],
html[data-theme="light"] [style*="color: #475569"] {
  color: #64748b !important;
}
html[data-theme="light"] [style*="color:#64748b"],
html[data-theme="light"] [style*="color: #64748b"] {
  color: #94a3b8 !important;
}

/* ── Inline rgba border overrides ── */
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,.06)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,.07)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,.08)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,.1)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.06)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.07)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.08)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.1)"] {
  border-color: rgba(15,23,42,.1) !important;
}

/* ── Modal overlay ── */
html[data-theme="light"] .modal-overlay {
  background: rgba(15,23,42,.45) !important;
}

/* ── Status / category / generic badges keep their accent colors; light tone tweak ── */
html[data-theme="light"] .badge,
html[data-theme="light"] .status-badge {
  background-clip: padding-box !important;
}
html[data-theme="light"] .status-badge-pending,
html[data-theme="light"] .status-open {
  background: rgba(100,116,139,.1) !important;
  color: #475569 !important;
  border-color: rgba(100,116,139,.25) !important;
}

/* ── Forum-specific ── */
html[data-theme="light"] .vote-btn {
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.08) !important;
  color: #64748b !important;
}
html[data-theme="light"] .vote-count { color: #0f172a !important; }
html[data-theme="light"] .reply-card.is-admin-reply {
  background: rgba(99,102,241,.05) !important;
}
html[data-theme="light"] .filter-tab { color: #64748b !important; }
html[data-theme="light"] .filter-tab:hover {
  color: #0f172a !important;
  background: rgba(15,23,42,.05) !important;
}
html[data-theme="light"] .cat-card { background: #ffffff !important; }
html[data-theme="light"] .modal-cat-opt {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.1) !important;
}
html[data-theme="light"] .modal-cat-opt:hover {
  background: rgba(15,23,42,.03) !important;
  border-color: rgba(15,23,42,.15) !important;
}
html[data-theme="light"] .modal-cat-title { color: #0f172a !important; }
html[data-theme="light"] .modal-cat-hint { color: #475569 !important; }
html[data-theme="light"] .post-content { color: #334155 !important; }

/* ── Admin sidebar bottom items (the only navigable thing in admin) ── */
html[data-theme="light"] .sidebar-divider { background: rgba(15,23,42,.08) !important; }

/* ── Skeletons — keep subtle but visible on light ── */
html[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(15,23,42,.04) 25%,
    rgba(15,23,42,.08) 50%,
    rgba(15,23,42,.04) 75%) !important;
  background-size: 600px 100% !important;
}

/* ── Notification dropdown ── */
html[data-theme="light"] [style*="background:#16161f"],
html[data-theme="light"] [style*="background: #16161f"] {
  background: #ffffff !important;
  box-shadow: 0 12px 40px rgba(15,23,42,.15) !important;
}

/* ── Sidebar overlay on mobile ── */
html[data-theme="light"] .sidebar-overlay { background: rgba(15,23,42,.45) !important; }

/* ── Topbar token chip (light mode tweak — keep purple accent) ── */
html[data-theme="light"] .topbar-token-chip {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08)) !important;
  border-color: rgba(99,102,241,.3) !important;
  color: #4f46e5 !important;
}

/* ── Token bar / progress (account.html) ── */
html[data-theme="light"] .token-bar {
  background: rgba(15,23,42,.06) !important;
}

/* ── Contact reasons / cards with rgba(255,255,255,.04-.08) bg ── */
html[data-theme="light"] [style*="background:rgba(255,255,255,.03)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,.03)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.04)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,.04)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.05)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,.05)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.06)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,.06)"] {
  background: rgba(15,23,42,.04) !important;
}

/* ── Scrollbar ── */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }