/**
 * RinascITALIA — Shared Light-Mode Theme Overrides
 * Include this in every page to support light/dark mode toggle.
 * Usage: <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/theme.css">
 */

/* ===== LIGHT MODE OVERRIDES ===== */
html:not(.dark) body {
  background: #f8fafc !important;
  color: #1e293b !important;
}

html:not(.dark) body > .pointer-events-none.fixed {
  opacity: 0.15;
}

html:not(.dark) header.fixed,
html:not(.dark) body > header {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) footer {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .bg-white\/5 {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html:not(.dark) .bg-white\/10 {
  background-color: #ffffff !important;
}

html:not(.dark) .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .ring-white\/10 {
  --tw-ring-color: rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .bg-slate-950 {
  background-color: #f8fafc !important;
}

html:not(.dark) .bg-slate-950\/40 {
  background-color: #f1f5f9 !important;
}

html:not(.dark) .bg-slate-950\/60 {
  background-color: rgba(248, 250, 252, 0.75) !important;
}

html:not(.dark) .bg-slate-900\/95 {
  background-color: rgba(255, 255, 255, 0.97) !important;
}

html:not(.dark) .bg-slate-950\/95 {
  background-color: rgba(255, 255, 255, 0.97) !important;
}

html:not(.dark) .bg-slate-950\/80 {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

html:not(.dark) .bg-slate-950\/50 {
  background-color: rgba(248, 250, 252, 0.9) !important;
}

html:not(.dark) .text-white {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-100 {
  color: #1e293b !important;
}

html:not(.dark) .text-white\/90 {
  color: #1e293b !important;
}

html:not(.dark) .text-white\/80 {
  color: #334155 !important;
}

html:not(.dark) .text-white\/70 {
  color: #475569 !important;
}

html:not(.dark) .text-white\/60 {
  color: #64748b !important;
}

html:not(.dark) .text-white\/50 {
  color: #94a3b8 !important;
}

html:not(.dark) .text-white\/45 {
  color: #94a3b8 !important;
}

html:not(.dark) .text-white\/40 {
  color: #94a3b8 !important;
}

html:not(.dark) .text-white\/30 {
  color: #cbd5e1 !important;
}

html:not(.dark) .text-white\/25 {
  color: #cbd5e1 !important;
}

html:not(.dark) .text-white\/20 {
  color: #e2e8f0 !important;
}

/* --- Extra text-white variants (header.php) --- */
html:not(.dark) .text-white\/85 {
  color: #1e293b !important;
}

html:not(.dark) .text-white\/75 {
  color: #475569 !important;
}

/* --- Shadows --- */
html:not(.dark) .shadow-glow {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) .shadow-xl {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

/* --- Nav / Input / Modal / Pre-loader light --- */

html:not(.dark) .nav-active {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

html:not(.dark) .tab-active {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
  border-color: rgba(161, 98, 7, 0.4);
}

html:not(.dark) .stat-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
}

html:not(.dark) .stat-card:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.15);
}

html:not(.dark) .hover\:bg-white\/5:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .hover\:bg-white\/10:hover {
  background-color: rgba(0, 0, 0, 0.07) !important;
}

html:not(.dark) .hover\:text-white:hover {
  color: #0f172a !important;
}

/* --- Input-field / Modal / Preloader / Tricolore light --- */
html:not(.dark) .input-field {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.15);
  color: #1e293b;
}

html:not(.dark) .input-field::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

html:not(.dark) .input-field:focus {
  border-color: rgba(202, 138, 4, 0.5);
  box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.1);
}

html:not(.dark) .input-field.input-error {
  border-color: rgba(220, 38, 38, 0.5);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

html:not(.dark) .modal-backdrop {
  background: rgba(0, 0, 0, 0.35);
}

html:not(.dark) #preloader {
  background: rgba(248, 250, 252, 0.97) !important;
}

html:not(.dark) #mobileMenu {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark)
  .bg-gradient-to-r.from-emerald-400\/70.via-white\/70.to-red-400\/70 {
  background: linear-gradient(to right, #009246, #f8fafc, #ce2b37) !important;
}

html:not(.dark) .text-yellow-300 {
  color: #a16207 !important;
}

html:not(.dark) .text-yellow-200 {
  color: #a16207 !important;
}

html:not(.dark) .text-emerald-300 {
  color: #047857 !important;
}

html:not(.dark) .text-emerald-200 {
  color: #047857 !important;
}

html:not(.dark) .text-red-200 {
  color: #b91c1c !important;
}

html:not(.dark) .text-red-400 {
  color: #dc2626 !important;
}

html:not(.dark) .text-red-300 {
  color: #b91c1c !important;
}

html:not(.dark) .border-yellow-300\/30 {
  border-color: rgba(161, 98, 7, 0.25) !important;
}

html:not(.dark) .bg-yellow-300\/10 {
  background-color: rgba(250, 204, 21, 0.1) !important;
}

html:not(.dark) .border-emerald-400\/30 {
  border-color: rgba(4, 120, 87, 0.2) !important;
}

html:not(.dark) .bg-emerald-400\/10 {
  background-color: rgba(52, 211, 153, 0.1) !important;
}

html:not(.dark) .border-red-400\/20 {
  border-color: rgba(185, 28, 28, 0.15) !important;
}

html:not(.dark) .bg-red-400\/10 {
  background-color: rgba(248, 113, 113, 0.08) !important;
}

html:not(.dark) .placeholder-white\/30::placeholder {
  color: #94a3b8 !important;
}

/* --- Emerald alpha variants (invita/, badges) --- */
html:not(.dark) .bg-emerald-400\/5 {
  background-color: rgba(52, 211, 153, 0.05) !important;
}

html:not(.dark) .bg-emerald-400\/15 {
  background-color: rgba(5, 150, 105, 0.08) !important;
}

html:not(.dark) .bg-emerald-400\/20 {
  background-color: rgba(52, 211, 153, 0.12) !important;
}

html:not(.dark) .bg-emerald-400\/25 {
  background-color: rgba(52, 211, 153, 0.15) !important;
}

html:not(.dark) .text-emerald-300\/70 {
  color: #065f46 !important;
}

/* --- Blue variants (profilo, footer) --- */
html:not(.dark) .text-blue-200 {
  color: #1d4ed8 !important;
}

html:not(.dark) .text-blue-300 {
  color: #2563eb !important;
}

html:not(.dark) .border-blue-400\/30 {
  border-color: rgba(29, 78, 216, 0.2) !important;
}

html:not(.dark) .bg-blue-400\/10 {
  background-color: rgba(59, 130, 246, 0.08) !important;
}

html:not(.dark) .hover\:bg-blue-400\/20:hover {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

/* --- Amber variants (profilo guest banner) --- */
html:not(.dark) .text-amber-200 {
  color: #92400e !important;
}

html:not(.dark) .text-amber-300 {
  color: #b45309 !important;
}

html:not(.dark) .text-amber-300\/60 {
  color: rgba(180, 83, 9, 0.75) !important;
}

html:not(.dark) .border-amber-400\/20 {
  border-color: rgba(217, 119, 6, 0.15) !important;
}

html:not(.dark) .border-amber-400\/30 {
  border-color: rgba(217, 119, 6, 0.2) !important;
}

html:not(.dark) .bg-amber-400\/5 {
  background-color: rgba(245, 158, 11, 0.05) !important;
}

html:not(.dark) .bg-amber-400\/10 {
  background-color: rgba(245, 158, 11, 0.08) !important;
}

html:not(.dark) .bg-amber-400\/15 {
  background-color: rgba(245, 158, 11, 0.1) !important;
}

html:not(.dark) .hover\:bg-amber-400\/20:hover,
html:not(.dark) .bg-amber-400\/20 {
  background-color: rgba(245, 158, 11, 0.12) !important;
}

/* --- Indigo + Cyan variants (profilo/home) --- */
html:not(.dark) .text-indigo-300 {
  color: #4338ca !important;
}

html:not(.dark) .text-indigo-400\/70 {
  color: rgba(79, 70, 229, 0.75) !important;
}

html:not(.dark) .bg-indigo-400\/15 {
  background-color: rgba(99, 102, 241, 0.1) !important;
}

html:not(.dark) .text-cyan-300 {
  color: #0891b2 !important;
}

/* --- Table & Selection --- */
html:not(.dark) .bg-white\/5 table th {
  color: #64748b !important;
}

html:not(.dark) .h-px.bg-white\/10,
html:not(.dark) .w-px.bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .selection\:bg-yellow-300\/20::selection {
  background-color: rgba(202, 138, 4, 0.15) !important;
  color: #92400e !important;
}

html:not(.dark) .selection\:text-yellow-200::selection {
  color: #92400e !important;
}

html:not(.dark) input,
html:not(.dark) textarea {
  color: #1e293b !important;
}