/* Light theme variables and subtle background overrides */
html[data-theme="light"]{
  --bg:#fbfdff;--bg2:#f8fbff;--surface:#ffffff;--surface2:#fbfdff;--surface3:#f1f6fb;
  --border:#e6eef9;--border2:#e0e9f6;--text:#0b1220;--muted:#556277;--muted2:#6b7788;
  --primary:#3b82f6;--primary2:#2563eb;--primary-soft:rgba(59,130,246,.08);
  --success:#10b981;--danger:#ef4444;--warning:#f59e0b;--shadow:0 14px 40px rgba(20,40,80,.06);
}

/* gentle light background overlay for the light theme */
html[data-theme="light"] body{
  background: linear-gradient(180deg, rgba(59,130,246,.03) 0%, rgba(236,246,255,.5) 8%), radial-gradient(600px 260px at 10% 10%, rgba(99,102,241,.03), transparent 30%), var(--bg);
  color:var(--text);
}

/* Typography & header refinements for lighter, airier look */
html[data-theme="light"]{
  --text: #243444; /* softer-than-black main text */
  --muted: #566676; /* muted secondary text */
  --muted2: #6b7b88;
}

html[data-theme="light"] .header{
  background: rgba(255,255,255,0.82);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 30px rgba(20,40,80,.04);
}

html[data-theme="light"] .user-pill{
  background: rgba(255,255,255,0.9);
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:0 6px 18px rgba(16,30,60,.04);
}

html[data-theme="light"] .user-pill:hover{
  background: rgba(255,255,255,0.95);
}

html[data-theme="light"] .btn-secondary{
  background: rgba(250,251,255,0.8);
  border:1px solid var(--border);
  color:var(--text);
}

html[data-theme="light"] .nav a{ color:var(--muted); }
html[data-theme="light"] .nav a{
  color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:16px;font-weight:800;background:transparent;border:1px solid transparent;transition:all .18s ease;
}
html[data-theme="light"] .nav a:hover{ color:var(--text); background:linear-gradient(90deg,rgba(59,130,246,.08),rgba(37,99,235,.05)); box-shadow:0 6px 18px rgba(37,99,235,.06); transform:translateY(-1px); border-color:rgba(59,130,246,.10)}
html[data-theme="light"] .nav a.active, html[data-theme="light"] .nav a[aria-current="page"]{
  color: #fff; background: linear-gradient(180deg,var(--primary2),var(--primary)); border:1px solid rgba(37,99,235,.18); box-shadow:0 10px 30px rgba(37,99,235,.12);
}

/* Generic tab-like styling for other controls */
.tab, .tabs .tab, .pill-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:14px;background:transparent;border:1px solid transparent;color:var(--muted);transition:.16s}
.tab:hover, .tabs .tab:hover, .pill-tab:hover{background:linear-gradient(90deg,rgba(59,130,246,.06),rgba(37,99,235,.03));color:var(--text);box-shadow:0 6px 18px rgba(37,99,235,.05)}
.tab.active, .tabs .tab.active, .pill-tab.active{background:linear-gradient(180deg,var(--primary2),var(--primary));color:#fff;border:1px solid rgba(37,99,235,.12);box-shadow:0 10px 28px rgba(37,99,235,.12)}

/* Theme toggle icon color */
.html-theme-light .theme-toggle, html[data-theme="light"] .theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(0,0,0,0.04);background:rgba(255,255,255,0.85)}
html[data-theme="light"] .theme-toggle .theme-icon svg{color:var(--text);filter:drop-shadow(0 2px 6px rgba(16,30,60,.04));}

/* Make small secondary buttons appear as pill-tabs in light theme */
html[data-theme="light"] .btn.btn-secondary.btn-small,
html[data-theme="light"] .btn.btn-small.pill-tab{
  background:linear-gradient(180deg,var(--primary2),var(--primary));
  color:#fff;border:1px solid rgba(37,99,235,.12);border-radius:12px;padding:6px 10px;font-weight:600;
}

/* Make cards lighter and softer */
html[data-theme="light"] .panel, html[data-theme="light"] .card{ background:var(--surface); border:1px solid var(--border); box-shadow:0 8px 22px rgba(18,32,52,.03); }

/* Hero adjustments */
html[data-theme="light"] .hero{
  background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(124,92,255,.03) 40%, var(--surface) 100%);
  border:1px solid var(--border);
  box-shadow:0 18px 50px rgba(30,60,90,.03);
  color:var(--text);
}
html[data-theme="light"] .hero h1{color:var(--text);}
html[data-theme="light"] .hero p{color:var(--muted);}

/* Stat / metric cards */
html[data-theme="light"] .metric-card{background:linear-gradient(180deg, #ffffff, rgba(245,249,255,.9));border:1px solid var(--border);box-shadow:0 8px 26px rgba(18,32,52,.03);} 
html[data-theme="light"] .metric-value{color:var(--text)}

/* Override the default dark .stat styles from base CSS so metrics appear light and airy */
html[data-theme="light"] .stats .stat{
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border:1px solid var(--border);
  box-shadow: 0 8px 20px rgba(18,32,52,.04);
  color: var(--text);
}
html[data-theme="light"] .stat-icon{
  background: linear-gradient(135deg,var(--primary-soft), rgba(124,92,255,.06));
  box-shadow: 0 8px 20px rgba(59,97,160,.04);
}
html[data-theme="light"] .stat-value{color:var(--text)}

/* Forum rows/cards softer in light */
html[data-theme="light"] .forum-row{background:linear-gradient(180deg,var(--surface),#fbfdff);border:1px solid var(--border);box-shadow:0 10px 28px rgba(18,32,52,.03)}
html[data-theme="light"] .forum-icon{background:linear-gradient(135deg,var(--primary-soft),rgba(124,92,255,.08));}

/* User dropdown adjusted for light */
html[data-theme="light"] .user-dropdown{background: #fff; border:1px solid var(--border); color:var(--text); box-shadow:0 14px 30px rgba(20,40,80,.05);}
html[data-theme="light"] .user-dropdown a{color:var(--text);}
html[data-theme="light"] .user-dropdown .logout-btn{display:block;width:100%;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(239,68,68,.15),rgba(239,68,68,.08));color:var(--danger);border:1px solid rgba(239,68,68,.08);font-weight:800}

/* Profile hero tweaks */
html[data-theme="light"] .profile-hero{background:linear-gradient(180deg,#fff, #fbfdff);border:1px solid var(--border);box-shadow:0 14px 40px rgba(18,32,52,.03)}
html[data-theme="light"] .profile-avatar{box-shadow:0 12px 30px rgba(59,97,160,.06)}

/* Admin cards and inputs */
html[data-theme="light"] .admin-item, html[data-theme="light"] .admin-sub{background:transparent}
html[data-theme="light"] .grid-form input, html[data-theme="light"] .grid-form select{background: #fff; border:1px solid var(--border); box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* Buttons subtle */
html[data-theme="light"] .btn{box-shadow:0 10px 22px rgba(37,99,235,.08);}
html[data-theme="light"] .btn:hover{transform:none}

/* Make notification badges softer */
html[data-theme="light"] .notify-count{background:linear-gradient(180deg,#ff8aa0,#ff6b81);box-shadow:0 6px 14px rgba(239,71,111,.08)}