/* ════════════════════════════════════════════════════
   ITDREAMTECH QCM — Light Theme
   Applied when <html data-theme="light">
   All neutral variables are overridden; accent colors
   stay page-specific (purple admin, cyan qcm).
════════════════════════════════════════════════════ */

/* ── Core palette ─────────────────────────────────── */
html[data-theme="light"] {
  --bg:      #eef1fb;
  --s:       #ffffff;
  --s2:      #f3f5ff;
  --b:       #dde2f5;
  --text:    #0e1120;
  --muted:   #586080;
  --danger:  #d92b3a;
  --success: #0a9060;
  --warning: #c97a06;
  --gold:    #a3600a;
}

/* ── Smooth transition when switching theme ───────── */
html.theme-tr,
html.theme-tr *,
html.theme-tr *::before,
html.theme-tr *::after {
  transition:
    background-color .22s ease,
    border-color     .22s ease,
    color            .22s ease,
    box-shadow       .22s ease,
    fill             .22s ease !important;
}

/* ── Shadows lightened ───────────────────────────── */
html[data-theme="light"] .modal-bg          { background: rgba(14,17,32,.52); }
html[data-theme="light"] .modal             { box-shadow: 0 20px 60px rgba(14,17,32,.13); }
html[data-theme="light"] .sidebar.open      { box-shadow: 4px 0 40px rgba(14,17,32,.11); }

/* ── Topbar (admin + qcm fixed) ──────────────────── */
html[data-theme="light"] .topbar {
  background: rgba(240,243,255,.96);
  backdrop-filter: blur(20px);
}

/* ── Admin cards / tables ────────────────────────── */
html[data-theme="light"] .card             { box-shadow: 0 4px 32px rgba(14,17,32,.07); }
html[data-theme="light"] .table-wrap       { box-shadow: 0 2px 12px rgba(14,17,32,.05); }

/* ── Public page card ────────────────────────────── */
html[data-theme="light"] .card.login-card,
html[data-theme="light"] .qcm-card {
  box-shadow: 0 8px 48px rgba(14,17,32,.09);
}
html[data-theme="light"] .card::before {
  background: linear-gradient(90deg, transparent, rgba(108,99,255,.45), transparent);
}

/* ── Background orbs (softer in light) ──────────── */
html[data-theme="light"] .o1 { background: rgba(108, 99, 255, .07); }
html[data-theme="light"] .o2 { background: rgba(255, 101, 132, .05); }
html[data-theme="light"] .o3 { background: rgba(144, 224, 239, .05); }

/* ── Alert text — needs darker color on white ───── */
html[data-theme="light"] .alert-e {
  color: #b91c2c;
  background: rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.3);
}
html[data-theme="light"] .alert-l {
  color: var(--danger);
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.38);
}
html[data-theme="light"] .alert-s {
  color: var(--success);
}
html[data-theme="light"] .alert-w {
  color: var(--warning);
}

/* ── Admin alerts ────────────────────────────────── */
html[data-theme="light"] .alert-box.alert-e { color: var(--danger); }
html[data-theme="light"] .alert-box.alert-w { color: var(--warning); }

/* ── Badge pills — more contrast on white ────────── */
html[data-theme="light"] .bb  { color: #3730a3; background: rgba(108,99,255,.1);  border-color: rgba(108,99,255,.3); }
html[data-theme="light"] .br  { color: #9d174d; background: rgba(255,101,132,.1); border-color: rgba(255,101,132,.28); }
html[data-theme="light"] .bg  { color: #065f46; background: rgba(46,213,115,.1);  border-color: rgba(46,213,115,.3); }
html[data-theme="light"] .bw  { color: #92400e; background: rgba(255,165,2,.1);   border-color: rgba(255,165,2,.3); }
html[data-theme="light"] .bgo { color: #92400e; background: rgba(247,201,72,.1);  border-color: rgba(247,201,72,.3); }

/* ── Admin colored badges ────────────────────────── */
html[data-theme="light"] .b-green { background: rgba(10,144,96,.1);  border-color: rgba(10,144,96,.3);  color: #065f46; }
html[data-theme="light"] .b-blue  { background: rgba(108,99,255,.1); border-color: rgba(108,99,255,.3); color: #3730a3; }
html[data-theme="light"] .b-red   { background: rgba(217,43,58,.1);  border-color: rgba(217,43,58,.3);  color: #be123c; }
html[data-theme="light"] .b-orange{ background: rgba(201,122,6,.1);  border-color: rgba(201,122,6,.3);  color: #92400e; }
html[data-theme="light"] .b-gray  { background: var(--s2); border-color: var(--b); color: var(--muted); }
html[data-theme="light"] .b-gold  { background: rgba(163,96,10,.1);  border-color: rgba(163,96,10,.3);  color: #92400e; }

/* ── QCM page — topbar frosted ───────────────────── */
html[data-theme="light"] #quizScreen .topbar,
html[data-theme="light"] .progress-bar-wrap { background: var(--s2); }

/* ── QCM code blocks ─────────────────────────────── */
html[data-theme="light"] .q-text code       { color: #0077a8; background: rgba(0,180,216,.08); }
html[data-theme="light"] .q-text pre        { color: var(--text); background: var(--s2); }
html[data-theme="light"] .option-text code  { color: #0077a8; background: rgba(0,180,216,.06); }
html[data-theme="light"] .email-sent-box    { color: var(--success); background: rgba(10,144,96,.06); border-color: rgba(10,144,96,.2); }

/* ── QCM nav button adjusted for light ──────────── */
html[data-theme="light"] .btn-nav:hover:not(:disabled) {
  color: #ffffff;
}

/* ── Anti-cheat overlay keeps dark always ────────── */
html[data-theme="light"] .ac-overlay {
  background: rgba(14,17,32,.97);
  color: #e8eaf0;
}

/* ── QCM result grade badges — light adjustments ─── */
html[data-theme="light"] .grade-A { color: var(--success); }
html[data-theme="light"] .grade-B { color: #0077a8; }
html[data-theme="light"] .grade-C { color: var(--warning); }
html[data-theme="light"] .grade-D { color: var(--danger); }

/* ── Divider text pill (index.php) ──────────────── */
html[data-theme="light"] .divider span { background: var(--bg); }

/* ── Portal brand pill ───────────────────────────── */
html[data-theme="light"] .brand {
  box-shadow: 0 2px 12px rgba(14,17,32,.07);
}

/* ══════════════════════════════════════════════════
   TOGGLE BUTTON STYLES
══════════════════════════════════════════════════ */

/* In admin topbar */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--b);
  background: var(--s2);
  color: var(--muted);
  cursor: pointer;
  font-size: .95rem;
  padding: 0;
  flex-shrink: 0;
  transition: border-color .2s, color .2s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle:hover {
  border-color: var(--acc);
  color: var(--acc);
  transform: rotate(25deg) scale(1.08);
}

/* Floating on public pages */
.theme-toggle-float {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--b);
  background: var(--s);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,.16);
  transition: border-color .2s, color .2s, box-shadow .2s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="light"] .theme-toggle-float {
  box-shadow: 0 4px 18px rgba(14,17,32,.10);
}
.theme-toggle-float:hover {
  border-color: var(--acc);
  color: var(--acc);
  transform: rotate(25deg) scale(1.1);
  box-shadow: 0 6px 24px rgba(108,99,255,.28);
}