/* =========================================================================
   Derslik — classroom overlays (slice 8)

   Ders dosyaları (v5:924-947) · Ders programı (borrowed from
   Derslik.dc.html:320-337) · Sınavlar + düzenleyici (v5:949-969, v5:777-808) ·
   Sınav çözme (no v5 design) · Yoklama (v5:1027-1050 + the v3 filter toolbar,
   Derslik v3.dc.html:525-530).

   Loaded after tokens.css → styles.css → dk/base.css → dk/shell-extra.css, so
   everything here may override the legacy `.gs-*` / `.attendance-*` /
   `.material-*` rules that `styles.css` still carries for these pages.

   Class-naming rule for this slice: only `dk-*` names that already exist in
   tokens/base/shell-extra are emitted by the views — `test/dk-css-contract.js`
   resolves `dk-*` against those four files only. Anything new is prefixed
   `ov-` (overlay chrome), `mat-`, `rec-`, `sch-`, `qz-`, `att-`.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Overlay chrome — v5:726-734
   ------------------------------------------------------------------------- */

.ov {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* `.gs-topbar` still says space-between; the spacer does that job now. */
.ov-head.gs-topbar,
.ov-head {
  justify-content: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-10);
  border-bottom: var(--bw-thin, 1px) solid var(--line);
  background: transparent;
  flex-wrap: wrap;
}

/* The gradient "Sohbete dön" pill (v5:729-731). */
.ov-back.dk-btn {
  flex: none;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-9);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.ov-back.dk-btn:hover { text-decoration: none; }

.ov-title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  font-size: var(--fs-lg);
  color: var(--ink);
}
.ov-title strong {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-title .i { color: var(--acc); flex: none; }
.ov-sub { font: 700 var(--fs-sm) / 1.2 var(--font); }

/* Tool tabs: the channel-scoped tools, since the channel panel is not beside
   the overlay yet (see the view's comment). */
.ov-tabs { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ov-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-sm);
  border: var(--bw) solid transparent;
  background: var(--panel2);
  color: var(--mut);
  font: 800 var(--fs-xs) / 1 var(--font);
  text-decoration: none;
  white-space: nowrap;
}
.ov-tab:hover { border-color: var(--acc); color: var(--acc); text-decoration: none; }
.ov-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ov-tab.is-active { background: var(--accSoft); color: var(--accInkSoft); border-color: var(--acc); }

.ov-body { padding: var(--sp-9) var(--sp-11); }
.ov-wrap {
  max-width: 880px;
  padding: 0;
  overflow: visible;
}
.schedule-page.ov-wrap { max-width: 1040px; }

.ov-sec { margin-bottom: var(--sp-12); }
.ov-sec:last-child { margin-bottom: 0; }
.ov-sec__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-5);
  font: 800 var(--fs-xl) / 1.25 var(--font);
  color: var(--ink);
}
.ov-sec__hint { margin: 0 0 var(--sp-6); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* The exam variant: no channel panel, one narrow reading column (spec §2.2).
   The `:has()` rule is defensive — it hides the panel the moment the BFF
   starts sending one, without another CSS pass. */
.dk-workspace:has(> .ov--exam) > .dk-pane--sidebar,
.dk-workspace:has(> .ov--exam) > .channel-sidebar { display: none; }
.ov--exam .ov-wrap { max-width: 720px; margin-inline: auto; }

/* Shared form polish for the overlay bodies: the legacy `.form .btn` rule
   stretches every submit to 100%. */
.ov .form .btn,
.ov .form .dk-btn { width: auto; }
.ov .form { margin-top: var(--sp-8); }
.ov .form > .btn,
.ov .form > .dk-btn { margin-top: var(--sp-4); }
.ov .field { margin-bottom: var(--sp-6); }
.ov .field > span { font: 700 var(--fs-xs) / 1.2 var(--font); color: var(--mut); }
.ov .inline-fields { align-items: flex-end; gap: var(--sp-5); }
/* `.inline-fields input { flex:1; min-width:9rem }` (styles.css:593) also hits
   the checkboxes inside a label, stretching the box away from its text. */
.ov .inline-fields .nsfw-toggle input,
.ov .inline-fields .perm-check input,
.dk-settings .inline-fields .nsfw-toggle input,
.dk-settings .inline-fields .perm-check input { flex: none; min-width: 0; width: auto; }
/* The legacy sheet caps these four author forms at 560px; a touch wider reads
   better beside the 880px content column. */
.ov .materials-upload,
.ov .quiz-create,
.ov .quiz-add-question,
.ov .schedule-add { max-width: 620px; }
.ov .dk-card .dk-subhead { margin: 0 0 var(--sp-5); }
.ov .inline-form { margin-top: 0; }

/* `styles.css:692-707` hides `.channel-del` until its row is hovered — right
   for a dense channel list, wrong for an overlay where the control is one of
   three things in the row. Show it, muted, and let the hover state do the
   warning. Keyboard users never had it at all. */
.ov .channel-del {
  opacity: 1;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--mut);
}
.ov .channel-del:hover { color: var(--bad); border-color: var(--bad); background: var(--badSoft); }
.ov .channel-del:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   Ders dosyaları — v5:924-947
   ------------------------------------------------------------------------- */

.mat-section { margin-bottom: var(--sp-9); }
.mat-section .dk-subhead { margin: 0 0 var(--sp-4); }
.mat-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: 0; }

.material-row.mat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-8);
  border-radius: var(--r-lg);
  border-bottom: 0;
  margin-bottom: 0;
}
.material-row.mat-row:hover { background: var(--panel2); }

/* v5:928 — a 40px tinted box carrying the file type. */
.mat-kind {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accSoft);
  color: var(--accInkSoft);
  font: 800 var(--fs-3xs) / 1 var(--font);
  letter-spacing: var(--ls-label);
}
.mat-kind--img { background: var(--okSoft); color: var(--ok); }
.mat-kind--vid,
.mat-kind--aud { background: var(--warnSoft); color: var(--warn); }
.mat-kind--zip { background: var(--badSoft); color: var(--bad); }

.mat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mat-name {
  font: 800 var(--fs-lg) / 1.25 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mat-meta.material-meta {
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.material-link.mat-dl {
  flex: none;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-9);
}
.material-link.mat-dl:hover { text-decoration: none; }
.mat-del { flex: none; margin: 0; }
.mat-upload { margin-top: var(--sp-9); max-width: 560px; }
.mat-file { padding: var(--sp-4) var(--sp-5); }

/* Recordings. `url` is null until the state is `ready` (mapping §1.9), so the
   two other states are flat rows with a badge instead of a <details>. */
.rec-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.recording-row.rec-row {
  padding: var(--sp-6) var(--sp-7);
  border-bottom: 0;
  border-radius: var(--r-md);
  background: var(--panel2);
}
.rec-summary,
.rec-row--flat {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  cursor: pointer;
}
.rec-row--flat { cursor: default; }
.rec-summary::-webkit-details-marker { display: none; }
.rec-summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rec-icon { display: flex; color: var(--acc); flex: none; }
.rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.rec-meta { font-size: var(--fs-2xs); }
.rec-state { flex: none; }
.recording-player {
  width: 100%;
  margin-top: var(--sp-5);
  border-radius: var(--r-md);
  background: #000;
}

/* -------------------------------------------------------------------------
   Ders programı — the weekly grid (Derslik.dc.html:322-333)
   ------------------------------------------------------------------------- */

.sch-grid {
  display: grid;
  grid-template-columns: 64px repeat(var(--sch-days, 5), minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
}
.sch-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-3) 0;
  font: 800 var(--fs-xs) / 1.2 var(--font);
  color: var(--mut);
  text-align: center;
}
.sch-day abbr { text-decoration: none; }
.sch-day__full { display: none; }
.sch-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--sp-3);
  font: 800 var(--fs-xs) / 1.2 var(--font);
  color: var(--mut);
}
.sch-cell {
  min-height: 56px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  background: transparent;
}
.sch-cell.is-filled {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-style: solid;
  border-color: transparent;
  background: var(--accSoft);
}
.sch-lesson {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.sch-subject {
  font: 800 var(--fs-sm) / 1.2 var(--font);
  color: var(--accInkSoft);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sch-channel {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 700 var(--fs-3xs) / 1.2 var(--font);
  max-width: 100%;
}
.sch-channel span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sch-dur { font: 700 var(--fs-3xs) / 1.2 var(--font); }
.sch-sync { margin-top: 2px; }
.sch-del { margin: 0; }
.sch-del .dk-ibtn { width: 20px; height: 20px; }
.sch-add { margin-top: var(--sp-10); }

/* Two columns of 40-minute lessons is unreadable under ~900px; stack the week
   into day blocks instead (D10: authored with min-width, not fixed px). */
@media (max-width: 900px) {
  .sch-grid { grid-template-columns: 56px repeat(var(--sch-days, 5), minmax(72px, 1fr)); font-size: 90%; }
}

/* -------------------------------------------------------------------------
   Sınavlar — list (v5:951-959)
   ------------------------------------------------------------------------- */

.quiz-row.qz-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-7) var(--sp-8);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
}
.qz-row__icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--accSoft);
  color: var(--accInkSoft);
}
.qz-main { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 3px; }
.qz-title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font: 800 var(--fs-lg) / 1.25 var(--font);
}
.qz-meta { font-size: var(--fs-xs); }
.qz-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.qz-actions .inline-form { margin: 0; }
.qz-create { margin-top: var(--sp-10); }
/* `.nsfw-toggle` is an inline-flex warning chip in styles.css; here it is an
   ordinary checkbox row, and it must not share a line with the submit button. */
.nsfw-toggle.qz-check {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  margin: 0 0 var(--sp-3);
  color: var(--mut);
  font-size: var(--fs-sm);
}
.inline-fields .nsfw-toggle.qz-check { width: auto; margin-bottom: var(--sp-6); }

/* -------------------------------------------------------------------------
   Sınav düzenleyici — v5:777-808
   ------------------------------------------------------------------------- */

.qz-editor-title { font-size: var(--fs-2xl); }
.qz-editor-meta { margin: 0 0 var(--sp-8); font-size: var(--fs-sm); }

.qz-q { margin-bottom: var(--sp-5); padding: var(--sp-7) var(--sp-8); }
.qz-q__head { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.qz-q__no {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  background: var(--accSoft);
  color: var(--accInkSoft);
  font: 800 var(--fs-xs) / 1 var(--font);
}
.qz-q__prompt { flex: 1; min-width: 0; font: 700 var(--fs-md) / 1.35 var(--font); }
.qz-q__meta { font-size: var(--fs-xs); white-space: nowrap; }
.qz-q__head .inline-form { margin: 0; }

.qz-opts { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.qz-opt {
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--line);
  background: var(--panel);
  font-size: var(--fs-sm);
}
.qz-opt.is-correct { background: var(--okSoft); border-color: var(--ok); color: var(--ok); font-weight: 800; }

/* The chip builder `public/quiz.js` grows on top of the textarea. */
.qz-add { margin-top: var(--sp-10); }
.qz-builder { display: flex; flex-direction: column; gap: var(--sp-4); }
.qz-chipbar { display: flex; gap: var(--sp-3); }
.qz-chip-input { flex: 1; min-width: 0; }
.qz-chip-add { flex: none; }
.qz-chips { display: flex; flex-direction: column; gap: var(--sp-3); }
.qz-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--line);
  background: var(--panel);
  overflow: hidden;
}
.qz-chip.is-correct { border-color: var(--ok); background: var(--okSoft); }
.qz-chip__toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 var(--fs-sm) / 1.3 var(--font);
  text-align: left;
  cursor: pointer;
}
.qz-chip__toggle:hover { color: var(--ok); }
.qz-chip__toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.qz-chip__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.qz-chip__mark { flex: none; font: 800 var(--fs-2xs) / 1 var(--font); color: var(--ok); }
.qz-chip.is-correct .qz-chip__mark::before { content: "✓ "; }
.qz-chip__x {
  flex: none;
  width: 30px;
  align-self: stretch;
  border: 0;
  background: transparent;
  color: var(--mut);
  font-size: var(--fs-lg);
  cursor: pointer;
}
.qz-chip__x:hover { background: var(--badSoft); color: var(--bad); }
.qz-chip__x:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.qz-chips-hint { margin: 0; font: 700 var(--fs-2xs) / 1.3 var(--font); }
.qz-raw-wrap > summary {
  font: 700 var(--fs-2xs) / 1.3 var(--font);
  color: var(--mut);
  cursor: pointer;
  padding: var(--sp-2) 0;
}
.qz-raw-wrap > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.qz-builder.is-enhanced .qz-raw { margin: var(--sp-4) 0 0; }
.qz-publish { margin-top: var(--sp-8); }

/* -------------------------------------------------------------------------
   Sınav çözme — no v5 design; built from the spec (§4.8 "Sınav çözme")
   ------------------------------------------------------------------------- */

.qz-take__head { margin-bottom: var(--sp-9); }
.qz-take__meta { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }

.quiz-countdown.qz-countdown {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) var(--sp-8);
  border-radius: var(--r-md);
  border: var(--bw) solid var(--line);
  background: var(--panel2);
  font: 800 var(--fs-lg) / 1 var(--font);
}
.qz-countdown .i { color: var(--acc); }
.qz-countdown__note { font: 400 var(--fs-2xs) / 1.3 var(--font); }
/* `quiz.js` toggles this at T-60s — do not rename. */
.quiz-countdown.quiz-countdown-low {
  border-color: var(--bad);
  background: var(--badSoft);
  color: var(--bad);
}
.quiz-countdown.quiz-countdown-low .i { color: var(--bad); }

.qz-take-q {
  display: block;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-8);
  border: var(--bw) solid var(--line);
}
.qz-take-q__legend {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: 0;
  font: 700 var(--fs-md) / 1.35 var(--font);
}
.qz-take-opts { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.quiz-option.qz-take-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-7);
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--line);
  background: var(--panel);
  font-size: var(--fs-md);
  cursor: pointer;
}
.quiz-option.qz-take-opt:hover { border-color: var(--acc); }
.quiz-option.qz-take-opt:focus-within { outline: 2px solid var(--acc); outline-offset: 2px; }
.quiz-option.qz-take-opt:has(input:checked) { border-color: var(--acc); background: var(--accSoft); }
.qz-take-hint { margin: var(--sp-4) 0 0; font-size: var(--fs-2xs); }
/* Pinned to the bottom of the scrolling overlay body: in a timed exam the
   submit must never be a scroll away. The fade keeps the last question legible
   as it passes underneath. */
.qz-take__foot {
  position: sticky;
  bottom: 0;
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0;
  background: linear-gradient(to top, var(--panel) 72%, transparent);
}
.qz-take__foot .dk-btn { width: 100%; justify-content: center; }

/* -------------------------------------------------------------------------
   Sonuçlar + yoklama tables — v5:1038-1043
   ------------------------------------------------------------------------- */

.qz-results-title { justify-content: space-between; }

.attendance-table.att-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel2);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-8);
}
.att-table th,
.att-table td {
  text-align: left;
  padding: var(--sp-5) var(--sp-8);
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
.att-table thead th {
  border-top: 0;
  font: 800 var(--fs-2xs) / 1.2 var(--font);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--mut);
}
.att-table tbody tr:first-child td { border-top: 1px solid var(--line); }
/* An absent student is marked by the "Yok" badge and a bar on the row's edge - NOT by fading the row: opacity .68 took the
   badge, the handle and the dashes below 4.5:1 in every theme (phase-5 ux-yoklama-contrast-clip), and the register is
   exactly the information the page exists for. */
.attendance-absent td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

/* Wide tables scroll INSIDE their own region (keyboard-focusable, visible scrollbar) instead of being cut off by the
   overlay; below 1100 px the cells are tighter so "Son görülme" is reachable without scrolling in most widths. */
.att-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--sp-8);
  border-radius: var(--r-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--mut) transparent;
}
.att-scroll:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.att-scroll > .att-table { margin-bottom: 0; min-width: 32rem; }
@media (max-width: 1100px) {
  .att-table th,
  .att-table td { padding: var(--sp-4) var(--sp-5); }
  .att-table td:first-child { min-width: 8rem; }
}

.att-filter { gap: var(--sp-5); margin-bottom: var(--sp-8); }
.att-filter__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font: 700 var(--fs-xs) / 1.2 var(--font);
  color: var(--mut);
}
.att-summary { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); }
.att-csv { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }

/* Per-question correct rate: a bar behind the number, not a bare percentage.
   The bar sits at z-index:-1 so it paints over the pill's own background but
   under the text, which is the parent's content. */
.qz-pct {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-width: 58px;
  padding: 2px var(--sp-4);
  border-radius: var(--r-2xs);
  font-weight: 800;
}
.qz-pct__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  border-radius: var(--r-2xs);
  background: var(--okSoft);
  z-index: -1;
}