/**
 * SYSTEM DOCUMENTATION
 * File: public/css/pages/login.css
 * Role: Defines responsive, theme-aware presentation for Administration & Authentication; it contains no application authority.
 * Connections: Administration & Authentication views and their matching browser controllers.
 * Stability: Documentation only; preserve existing public contracts and runtime behavior.
 * END SYSTEM DOCUMENTATION
 */
/* Extracted <style> block */
:root {
      --bg1: #eef6ff; --bg2: #fff7ed; --card: rgba(255, 255, 255, 0.82); --stroke: #dbe7ff;
      --text: #0f172a; --muted: #475569; --bad: #ef4444; --primary: #7c3aed; --primary2: #2563eb;
      --shadow: 0 18px 55px rgba(2, 6, 23, .12); --radius: 18px;
    }
    * { box-sizing: border-box; }
    body {
      font-family: ui-sans-serif, system-ui, sans-serif; margin: 0; padding: 24px; color: var(--text);
      background: radial-gradient(1200px 600px at 50% 20%, var(--bg1), transparent 60%), radial-gradient(900px 700px at 50% 80%, var(--bg2), transparent 55%);
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
    }
    .login-card { max-width: 400px; width: 100%; border-radius: var(--radius); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); padding: 32px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    label { font-weight: 700; font-size: 0.9rem; }
    input[type="text"], input[type="password"] { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--stroke); font-size: 1rem; outline: none; transition: all 0.2s; }
    input[type="text"]:focus, input[type="password"]:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124,58,237,.15); }
    .btn-block { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: white; padding: 14px; font-weight: 700; border-radius: 12px; cursor: pointer; border: none; width: 100%; font-size: 1rem; }
    .error-banner { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--bad); color: #b91c1c; padding: 12px; border-radius: 10px; margin-top: 14px; display: none; font-size: 0.9rem; font-weight: 500; text-align: center; }

.login-inline-1 { color: var(--muted); font-size:0.9rem; margin-bottom:20px; }

.login-inline-2 { margin-top:0; margin-bottom:8px; }


/* Kid-friendly light theme refresh: warmer, clearer, and easier to read. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg1: #dbeafe;
  --bg2: #ffedd5;
  --bg3: #ede9fe;
  --page-bg: #f7fbff;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.88);
  --surface-muted: #eef6ff;
  --card: var(--surface);
  --stroke: #b9d7ff;
  --stroke-strong: #7db5ff;
  --text: #102033;
  --muted: #334155;
  --primary: #1d4ed8;
  --primary2: #7e22ce;
  --primary-soft: #dbeafe;
  --good: #15803d;
  --good-soft: #dcfce7;
  --bad: #b91c1c;
  --bad-soft: #fee2e2;
  --amber: #92400e;
  --amber-soft: #ffedd5;
  --kid-yellow: #fde68a;
  --kid-cyan: #bae6fd;
  --kid-pink: #fbcfe8;
  --kid-green: #bbf7d0;
  --shadow: 0 16px 42px rgba(30, 64, 175, .10);
  --shadow2: 0 6px 16px rgba(30, 64, 175, .08);
  --overlay: rgba(15, 23, 42, 0.38);
}


/* Kid-friendly readability layer for light theme only. */
:root[data-theme-group="light"] body,
:root[data-theme="light"] body {
  color: var(--text) !important;
  line-height: 1.55;
  letter-spacing: .005em;
  background:
    radial-gradient(1100px 620px at 10% 8%, var(--bg1), transparent 58%),
    radial-gradient(850px 580px at 92% 18%, var(--bg3), transparent 56%),
    radial-gradient(900px 700px at 45% 95%, var(--bg2), transparent 58%),
    linear-gradient(180deg, var(--page-bg), #ffffff) !important;
}

:root[data-theme-group="light"] h1,
:root[data-theme-group="light"] h2,
:root[data-theme-group="light"] h3,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 {
  color: var(--text) !important;
  line-height: 1.2;
  letter-spacing: -.01em;
}

:root[data-theme-group="light"] .subtitle,
:root[data-theme-group="light"] .meta-line,
:root[data-theme-group="light"] .small,
:root[data-theme-group="light"] .muted,
:root[data-theme-group="light"] .gate-help,
:root[data-theme-group="light"] .override-note,
:root[data-theme="light"] .subtitle,
:root[data-theme="light"] .meta-line,
:root[data-theme="light"] .small,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .gate-help,
:root[data-theme="light"] .override-note {
  color: var(--muted) !important;
}

:root[data-theme-group="light"] .card,
:root[data-theme-group="light"] .login-card,
:root[data-theme-group="light"] .control-card,
:root[data-theme-group="light"] .panel,
:root[data-theme-group="light"] .main-panel,
:root[data-theme-group="light"] .side-form,
:root[data-theme-group="light"] .card-table,
:root[data-theme-group="light"] .quiz-card,
:root[data-theme-group="light"] .modal,
:root[data-theme-group="light"] .qr-output-zone,
:root[data-theme-group="light"] .dropzone-area,
:root[data-theme-group="light"] .preview-box,
:root[data-theme-group="light"] .manage-box,
:root[data-theme-group="light"] .menu-item,
:root[data-theme-group="light"] .review-item,
:root[data-theme="light"] .card,
:root[data-theme="light"] .login-card,
:root[data-theme="light"] .control-card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .main-panel,
:root[data-theme="light"] .side-form,
:root[data-theme="light"] .card-table,
:root[data-theme="light"] .quiz-card,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .qr-output-zone,
:root[data-theme="light"] .dropzone-area,
:root[data-theme="light"] .preview-box,
:root[data-theme="light"] .manage-box,
:root[data-theme="light"] .menu-item,
:root[data-theme="light"] .review-item {
  background: var(--surface) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

:root[data-theme-group="light"] .card,
:root[data-theme-group="light"] .control-card,
:root[data-theme-group="light"] .menu-item,
:root[data-theme-group="light"] .quiz-card,
:root[data-theme="light"] .card,
:root[data-theme="light"] .control-card,
:root[data-theme="light"] .menu-item,
:root[data-theme="light"] .quiz-card {
  border-width: 2px;
}

:root[data-theme-group="light"] .control-card:hover,
:root[data-theme-group="light"] .menu-item:hover,
:root[data-theme-group="light"] .quiz-card:hover,
:root[data-theme="light"] .control-card:hover,
:root[data-theme="light"] .menu-item:hover,
:root[data-theme="light"] .quiz-card:hover {
  background: #ffffff !important;
  border-color: var(--stroke-strong) !important;
  box-shadow: 0 18px 38px rgba(29, 78, 216, .14) !important;
}

:root[data-theme-group="light"] input,
:root[data-theme-group="light"] select,
:root[data-theme-group="light"] textarea,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  min-height: 44px;
  background: #ffffff !important;
  color: var(--text) !important;
  border: 2px solid var(--stroke) !important;
  font-size: 1rem;
}

:root[data-theme-group="light"] input:focus,
:root[data-theme-group="light"] select:focus,
:root[data-theme-group="light"] textarea:focus,
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, .18) !important;
  outline: none !important;
}

:root[data-theme-group="light"] label,
:root[data-theme="light"] label {
  color: var(--text) !important;
  font-weight: 850;
}

:root[data-theme-group="light"] .btn-primary,
:root[data-theme-group="light"] .btn-action-start,
:root[data-theme-group="light"] .btn-action,
:root[data-theme-group="light"] .btn-generate,
:root[data-theme-group="light"] .btn-upload,
:root[data-theme-group="light"] .btn-print,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-action-start,
:root[data-theme="light"] .btn-action,
:root[data-theme="light"] .btn-generate,
:root[data-theme="light"] .btn-upload,
:root[data-theme="light"] .btn-print {
  min-height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  font-weight: 900 !important;
}

:root[data-theme-group="light"] .btn-secondary,
:root[data-theme-group="light"] .back-btn,
:root[data-theme-group="light"] .btn-block,
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .back-btn,
:root[data-theme="light"] .btn-block {
  min-height: 42px;
  background: #eaf3ff !important;
  color: var(--text) !important;
  border: 1px solid var(--stroke) !important;
  font-weight: 850 !important;
}

:root[data-theme-group="light"] .btn-secondary:hover,
:root[data-theme-group="light"] .back-btn:hover,
:root[data-theme-group="light"] .btn-block:hover,
:root[data-theme="light"] .btn-secondary:hover,
:root[data-theme="light"] .back-btn:hover,
:root[data-theme="light"] .btn-block:hover {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

:root[data-theme-group="light"] .option-lbl,
:root[data-theme="light"] .option-lbl {
  background: #ffffff !important;
  border: 2px solid var(--stroke) !important;
  color: var(--text) !important;
  font-size: 1.03rem;
  line-height: 1.5;
}

:root[data-theme-group="light"] .option-lbl:hover,
:root[data-theme="light"] .option-lbl:hover {
  background: #f8fbff !important;
  border-color: var(--stroke-strong) !important;
}

:root[data-theme-group="light"] .option-lbl.selected,
:root[data-theme="light"] .option-lbl.selected {
  background: var(--primary-soft) !important;
  border-color: var(--primary) !important;
  box-shadow: inset 5px 0 0 var(--primary), 0 0 0 3px rgba(29,78,216,.16) !important;
}

:root[data-theme-group="light"] .menu-badge,
:root[data-theme-group="light"] .badge,
:root[data-theme-group="light"] .badge-id,
:root[data-theme-group="light"] .menu-id,
:root[data-theme-group="light"] .query-string,
:root[data-theme="light"] .menu-badge,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .badge-id,
:root[data-theme="light"] .menu-id,
:root[data-theme="light"] .query-string {
  background: #eaf3ff !important;
  color: var(--primary) !important;
  border-color: var(--stroke-strong) !important;
  font-weight: 850 !important;
}

:root[data-theme-group="light"] th,
:root[data-theme="light"] th {
  background: #eaf3ff !important;
  color: var(--text) !important;
  font-weight: 900 !important;
}

:root[data-theme-group="light"] td,
:root[data-theme="light"] td {
  color: var(--text) !important;
}

:root[data-theme-group="light"] tr:hover td,
:root[data-theme="light"] tr:hover td {
  background: #f8fbff !important;
}

:root[data-theme-group="light"] .status-box.good,
:root[data-theme="light"] .status-box.good,
:root[data-theme-group="light"] .success,
:root[data-theme="light"] .success {
  color: var(--good) !important;
  background: var(--good-soft) !important;
  border-color: rgba(21, 128, 61, .35) !important;
}

:root[data-theme-group="light"] .status-box.bad,
:root[data-theme="light"] .status-box.bad,
:root[data-theme-group="light"] .error,
:root[data-theme="light"] .error {
  color: var(--bad) !important;
  background: var(--bad-soft) !important;
  border-color: rgba(185, 28, 28, .32) !important;
}

:root[data-theme-group="light"] .theme-toggle,
:root[data-theme="light"] .theme-toggle {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 2px solid var(--stroke) !important;
  box-shadow: 0 10px 24px rgba(29,78,216,.12) !important;
}

/* Stage 2 dark data-table polish for admin, roster, and results pages. */
:root[data-theme="dark"] body:has(.dashboard-grid),
:root[data-theme="dark"] body:has(.deployment-matrix-table),
:root[data-theme="dark"] body:has(#rosterTable),
:root[data-theme="dark"] body:has(#studentLedgerBody),
:root[data-theme="dark"] body:has(.quiz-edit-wrap) {
  background:
    radial-gradient(900px 520px at 14% 8%, rgba(37, 99, 235, 0.12), transparent 58%),
    radial-gradient(820px 520px at 92% 18%, rgba(124, 58, 237, 0.12), transparent 58%),
    linear-gradient(180deg, #0f172a, #020617) !important;
}

:root[data-theme="dark"] .deployment-table-scroll,
:root[data-theme="dark"] .table-container,
:root[data-theme="dark"] .card-table {
  background: rgba(15, 23, 42, 0.36) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: var(--shadow2) !important;
}

:root[data-theme="dark"] .deployment-table-scroll table,
:root[data-theme="dark"] .table-container table,
:root[data-theme="dark"] .card-table table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

:root[data-theme="dark"] .deployment-table-scroll th,
:root[data-theme="dark"] .table-container th,
:root[data-theme="dark"] .card-table th,
:root[data-theme="dark"] #rosterTable th {
  background: #334155 !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.50) !important;
}

:root[data-theme="dark"] .deployment-table-scroll td,
:root[data-theme="dark"] .table-container td,
:root[data-theme="dark"] .card-table td,
:root[data-theme="dark"] #rosterTable td {
  background: rgba(30, 41, 59, 0.54) !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.28) !important;
}

:root[data-theme="dark"] .deployment-table-scroll tr:hover td,
:root[data-theme="dark"] .table-container tr:hover td,
:root[data-theme="dark"] .card-table tr:hover td,
:root[data-theme="dark"] #rosterTable tr:hover td {
  background: rgba(51, 65, 85, 0.78) !important;
}

:root[data-theme="dark"] .filter-bar,
:root[data-theme="dark"] .dashboard-toolbar,
:root[data-theme="dark"] .quiz-edit-savebar,
:root[data-theme="dark"] .quiz-row,
:root[data-theme="dark"] .question-id-row,
:root[data-theme="dark"] .edit-mode-note {
  background: rgba(30, 41, 59, 0.82) !important;
  border-color: var(--stroke) !important;
  color: var(--text-body) !important;
}

:root[data-theme="dark"] .stat-box,
:root[data-theme="dark"] .score-pop-card {
  background: linear-gradient(180deg, rgba(39, 52, 73, 0.94), rgba(30, 41, 59, 0.92)) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme="dark"] .stat-val,
:root[data-theme="dark"] .score-cell,
:root[data-theme="dark"] .score-tag {
  color: var(--text) !important;
}

:root[data-theme="dark"] .badge-neutral,
:root[data-theme="dark"] .player-id {
  background: rgba(100, 116, 139, 0.20) !important;
  color: #cbd5e1 !important;
  border-color: rgba(100, 116, 139, 0.36) !important;
}

@media (max-width: 720px) {
  :root[data-theme="dark"] #rosterTable tbody tr {
    background: var(--surface) !important;
    border-color: var(--stroke) !important;
    box-shadow: var(--shadow2) !important;
  }
  :root[data-theme="dark"] #rosterTable td {
    background: rgba(30, 41, 59, 0.72) !important;
  }
}