/*
  Design notes:
  Subject: a JEE coaching academy's lecture + PYQ tracker - a gradebook/ledger, not a generic dashboard.
  Palette: deep indigo-ink background (not flat black) with a chalkboard-green accent for theory
           and a highlighter-gold accent for PYQ practice - the two pens a student actually marks with.
  Type: Sora for headings (structural, exam-paper confident), Inter for body, JetBrains Mono for every
        number - chapter numbers, percentages, ranks, durations - so data reads like marks on a sheet.
  Signature: a faint ruled-paper texture behind the whole page, and chapter numbers rendered like
             roll numbers in mono type.
*/
:root{
  --bg: #0b0e1a; --panel: #12162a; --panel-2: #191f38; --border: #2a3155;
  --text: #eef0fa; --muted: #8b90ad; --accent: #4fd1ae; --accent-dim: #1f4a40;
  --pyq: #f2b84f; --pyq-dim: #4a3a1a; --danger: #ef6461; --radius: 10px;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html,body{
  margin:0; padding:0; background: var(--bg); color: var(--text); font-family: var(--font-body);
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, rgba(255,255,255,0.018) 28px);
}
.wrap{ max-width: 1320px; margin: 0 auto; padding: 24px 20px 80px; }

header{ display:flex; align-items:center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.brand{ display:flex; align-items:center; gap: 12px; }
.brand img{ height: 44px; width: auto; max-width: 60px; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
h1{ font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0; letter-spacing: 0.1px; }
h2{ font-family: var(--font-display); font-weight: 600; }
.sub{ color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

.mode-toggle{ display:flex; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.mode-toggle button{ background: transparent; border: none; color: var(--muted); padding: 7px 16px; border-radius: 999px; font-size: 0.82rem; cursor: pointer; font-weight: 600; font-family: var(--font-body); }
.mode-toggle button.active{ background: var(--accent-dim); color: var(--accent); }

.card{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }

/* ---- Auth ---- */
#authOverlay{ text-align:center; padding: 50px 20px; }
#authOverlay h2{ font-size: 1.15rem; margin-bottom: 6px; }
#authOverlay p{ color: var(--muted); font-size: 0.85rem; margin-bottom: 18px; }
.auth-tabs{ display:flex; justify-content:center; gap: 6px; margin-bottom: 18px; }
.auth-tabs button{ background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); padding: 7px 18px; border-radius: 999px; font-size: 0.82rem; cursor: pointer; font-weight: 600; }
.auth-tabs button.active{ background: var(--accent-dim); color: var(--accent); border-color: var(--accent-dim); }
.auth-form{ display:flex; flex-direction: column; align-items:center; gap: 10px; max-width: 280px; margin: 0 auto; }
.auth-form input{ background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; width: 100%; font-family: var(--font-body); }
.auth-form button{ background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-dim); padding: 10px 18px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; font-weight: 600; width: 100%; }
#authError{ color: var(--danger); font-size: 0.8rem; margin-top: 10px; min-height: 18px; }

.whoami{ display:flex; align-items:center; gap: 10px; font-size: 0.8rem; color: var(--muted); }
.whoami button{ background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.78rem; text-decoration: underline; padding: 0; }

/* ---- App shell: vertical nav rail + routed content sections ---- */
#appShell{ display:flex; gap: 22px; align-items:flex-start; }
.nav-rail{ width: 190px; flex-shrink:0; position: sticky; top: 20px; display:flex; flex-direction:column; gap: 4px; }
.nav-btn{ display:flex; align-items:center; gap: 10px; background: transparent; border: 1px solid transparent; color: var(--muted); padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align:left; font-family: var(--font-body); }
.nav-btn:hover{ background: var(--panel-2); }
.nav-btn.active{ background: var(--panel); border-color: var(--border); color: var(--accent); }
.nav-icon{ font-size: 1rem; }
.content{ flex:1; min-width:0; }
.content-section{ display:none; }
.content-section.active{ display:block; }
@media (max-width: 800px){
  #appShell{ flex-direction: column; }
  .nav-rail{ position: static; width: 100%; flex-direction: row; overflow-x:auto; }
}

/* ---- Stat strip ---- */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; margin-bottom: 16px; }
.stat-box{ background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.stat-box .num{ font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.stat-box .lbl{ font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.stat-box.pyq .num{ color: var(--pyq); }

.overall-bar-wrap{ display:flex; align-items:center; gap: 14px; }
.overall-bar-wrap .bar{ flex: 1; height: 8px; background: var(--panel-2); border-radius: 999px; overflow:hidden; }
.overall-bar-wrap .bar > div{ height: 100%; background: linear-gradient(90deg, var(--accent), var(--pyq)); width:0%; transition: width .3s ease; }
.overall-bar-wrap .count{ font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); white-space:nowrap; }

.controls{ display:flex; gap:8px; margin: 4px 0 14px; flex-wrap: wrap; align-items:center; }
.controls button{ background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 8px; font-size: 0.78rem; cursor: pointer; }
.controls button:hover{ border-color: var(--accent); }
.status-msg{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-left: auto; align-self: center; }
.search-input{ background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; min-width: 180px; font-family: var(--font-body); }

/* ---- Chapter grid ---- */
.chapter-grid { 
  column-count: 2; 
  column-gap: 12px; 
  display: block; 
}
@media (max-width: 900px) { 
  .chapter-grid { column-count: 1; } 
}

.chapter { 
  background: var(--panel); 
  border: 1px solid var(--border); 
  border-left: 3px solid var(--border); 
  border-radius: var(--radius); 
  overflow: hidden; 
  display: inline-block; 
  width: 100%; 
  break-inside: avoid; 
  margin-bottom: 12px; 
}
.chapter-head{ display:flex; align-items:center; justify-content: space-between; padding: 12px 14px; cursor: pointer; user-select: none; }
.chapter-head:hover{ background: var(--panel-2); }
.chapter-title{ display:flex; align-items:center; gap: 10px; min-width:0; }
.chapter-num{ font-family: var(--font-mono); color: var(--muted); font-size: 0.72rem; flex-shrink:0; }
.chapter-name{ font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chapter-meta{ display:flex; align-items:center; gap: 10px; flex-shrink:0; }
.mini-bar{ width: 50px; height: 6px; background: var(--panel-2); border-radius: 999px; overflow:hidden; }
.mini-bar > div{ height:100%; background: var(--accent); }
.chapter-count{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); min-width: 36px; text-align:right;}
.chevron{ color: var(--muted); transition: transform .2s ease; font-size: 0.75rem; }
.chapter.open .chevron{ transform: rotate(90deg); }
.chapter-body{ display:none; padding: 2px 14px 14px; border-top: 1px solid var(--border); }
.chapter.open .chapter-body{ display:block; }

.section-label{ font-family: var(--font-display); font-size: 0.68rem; font-weight:600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 12px 0 6px; }
.section-label.pyq{ color: var(--pyq); }
.section-label.fs{ color: var(--accent); }

.video-row{ display:flex; align-items: flex-start; gap: 10px; padding: 7px 6px; border-radius: 8px; }
.video-row:hover{ background: var(--panel-2); }
.status-btns{ display:flex; gap: 4px; margin-top: 2px; flex-shrink:0; }
.status-btn{ width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); font-size: 0.8rem; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.status-btn.progressing.active{ background: var(--pyq-dim); border-color: var(--pyq); color: var(--pyq); }
.status-btn.done.active{ background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.video-info{ flex: 1; min-width: 0; }
.video-info a{ color: var(--text); text-decoration: none; font-size: 0.83rem; line-height: 1.35; }
.video-info a:hover{ color: var(--accent); text-decoration: underline; }
.video-row.pyq .video-info a:hover{ color: var(--pyq); }
.video-row.done .video-info a{ color: var(--muted); text-decoration: line-through; }
.video-dur{ font-family: var(--font-mono); color: var(--muted); font-size: 0.7rem; margin-left: 6px; white-space: nowrap; }
.empty-note{ color: var(--muted); font-size: 0.78rem; font-style: italic; padding: 6px; }

.selfcheck{ margin-top: 10px; }
.sc-year{ display:flex; align-items:center; gap: 8px; padding: 4px 0; }
.sc-year-label{ font-family: var(--font-mono); width: 42px; font-size: 0.74rem; color: var(--muted); flex-shrink:0; }
.sc-sess{ display:flex; align-items:center; gap: 4px; font-size: 0.7rem; color: var(--muted); cursor:pointer; }
.sc-sess input{ width: 13px; height: 13px; accent-color: var(--pyq); cursor:pointer; }

footer{ text-align:center; color: var(--muted); font-size: 0.72rem; margin-top: 24px; }

/* ---- Leaderboard (shared: sidebar + teacher view) ---- */
.leaderboard-tabs{ display:flex; gap: 6px; margin-bottom: 12px; }
.leaderboard-tabs button{ background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); padding: 5px 14px; border-radius: 999px; font-size: 0.76rem; cursor: pointer; font-weight: 600; }
.leaderboard-tabs button.active{ background: var(--accent-dim); color: var(--accent); border-color: var(--accent-dim); }
.leaderboard-list{ display:flex; flex-direction:column; gap: 6px; }
.lb-row{ display:flex; align-items:center; gap: 10px; background: var(--panel-2); border-radius: 8px; padding: 7px 10px; }
.lb-rank{ font-family: var(--font-mono); width: 28px; text-align:center; font-weight:700; font-size: 0.85rem; flex-shrink:0; }
.lb-name{ flex-shrink:1; font-size: 0.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lb-bar{ flex:1; height: 6px; background: var(--panel); border-radius: 999px; overflow:hidden; min-width: 30px; }
.lb-bar > div{ height:100%; background: linear-gradient(90deg, var(--accent), var(--pyq)); }
.lb-count{ font-family: var(--font-mono); width: 50px; text-align:right; color: var(--muted); font-size: 0.72rem; flex-shrink:0; }

/* ---- Question of the Day widget ---- */
.qotd-chapter{ font-size: 0.72rem; color: var(--muted); margin-bottom: 6px; }
.qotd-link{ display:block; color: var(--text); text-decoration:none; font-size: 0.85rem; line-height:1.4; margin-bottom: 4px; }
.qotd-link:hover{ color: var(--pyq); text-decoration: underline; }

/* ---- Teacher / class view ---- */
.stat-box.pyq{ } /* reused above */
table.students{ width:100%; border-collapse: collapse; font-size: 0.82rem; }
table.students th{ font-family: var(--font-display); text-align:left; color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor:pointer; }
table.students th:hover{ color: var(--text); }
table.students td{ padding: 9px 10px; border-bottom: 1px solid var(--panel-2); }
table.students tr:hover td{ background: var(--panel-2); }
.pct-pill{ font-family: var(--font-mono); display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.pct-pill.low{ background: #4a2323; color: #f0a3a3; }
.pct-pill.mid{ background: var(--pyq-dim); color: var(--pyq); }
.pct-pill.high{ background: var(--accent-dim); color: var(--accent); }

.chapter-heat{ display:flex; flex-direction:column; gap: 6px; margin-top: 6px; }
.heat-row{ display:flex; align-items:center; gap: 10px; font-size: 0.78rem; }
.heat-name{ width: 220px; flex-shrink:0; color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.heat-bar{ flex:1; height: 8px; background: var(--panel-2); border-radius: 999px; overflow:hidden; }
.heat-bar > div{ height:100%; background: linear-gradient(90deg, var(--accent), var(--pyq)); }
.heat-pct{ font-family: var(--font-mono); width: 40px; text-align:right; color: var(--muted); }

:root[data-theme="light"]{
  --bg:#f4f5fb; --panel:#ffffff; --panel-2:#eef0f8; --border:#dadfee;
  --text:#1a1d2e; --muted:#5c6178; --accent-dim:#d3f3e8; --pyq-dim:#fbe9c9;
}
:root[data-theme="light"] html,html[data-theme="light"] body{ background-image:none; }

.theme-toggle{ background: var(--panel); border: 1px solid var(--border); border-radius: 999px; width: 38px; height: 38px; font-size: 1rem; cursor: pointer; margin-left: 10px; }

.banner{ background: var(--pyq-dim); border: 1px solid var(--pyq); color: var(--text); border-radius: 8px; padding: 10px 14px; font-size: 0.82rem; margin-bottom: 16px; }

.update-composer{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 14px; }
.update-composer textarea{ background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px; font-family: var(--font-body); font-size: 0.85rem; resize: vertical; }
.update-composer button{ align-self: flex-start; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-dim); padding: 7px 16px; border-radius: 8px; font-weight: 600; cursor:pointer; }
.update-post{ border-bottom: 1px solid var(--border); padding: 10px 0; }
.update-date{ font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-bottom: 3px; }
.update-text{ font-size: 0.88rem; white-space: pre-wrap; }

.add-lecture-form{ display:flex; flex-wrap:wrap; gap: 6px; margin-bottom: 4px; }
.add-lecture-form select, .add-lecture-form input{ background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 0.78rem; font-family: var(--font-body); }
.add-lecture-form input{ flex: 1; min-width: 140px; }
.add-lecture-form button{ background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-dim); padding: 6px 16px; border-radius: 8px; font-weight: 600; cursor:pointer; }

.qotd-footer{ display:flex; align-items:center; justify-content:space-between; margin-top: 4px; }
.qotd-another{ background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; cursor: pointer; }

.loading{ text-align:center; color: var(--muted); padding: 30px; font-size: 0.85rem; }