/* ═══════════════════════════════════════════════════════════════
   traningspass.css – Thevin
   Lärarvyn för träningspass: urval av quiz ur ett kapitel, klassval
   och listan över utlagda pass.

   Tokens, inga egna färgvärden. Golvet är 12px (--t-meta).
   ═══════════════════════════════════════════════════════════════ */

.tp-sek        { margin-bottom: 20px; padding: 12px 14px;
                 background: var(--surface); border: 1px solid var(--border); }
.tp-rubrik     { font-size: var(--t-meta); letter-spacing: 1.5px;
                 text-transform: uppercase; color: var(--muted);
                 font-weight: 600; margin-bottom: 8px; }
.tp-hjalp      { font-size: var(--t-liten); color: var(--muted2);
                 line-height: 1.6; margin-bottom: 10px; }
.tp-info       { font-size: var(--t-liten); color: var(--muted2);
                 line-height: 1.6; padding: 10px 4px; }
.tp-fel        { color: var(--wrong); }

.tp-val        { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.tp-falt       { display: flex; flex-direction: column; gap: 4px; }
.tp-falt label { font-size: var(--t-meta); color: var(--muted2); }
.tp-falt select,
.tp-falt input { min-width: 200px; }
/* .tp-falt är flex, och display slår hidden. Utan den här raden syns
   namnfältet i det separata läget trots hidden-attributet. */
.tp-falt[hidden] { display: none; }
.tp-falt-bred  { flex: 1; }
.tp-val-kort   { margin-bottom: 12px; }

/* ── Quizlistan ───────────────────────────────────────────────
   En rad per quiz: kryss, namn, antal frågor, senast utdelad.
   Rader utanför tidsfönstret tonas ned men går att kryssa i –
   läraren vet ibland bättre än datumet. */
.tp-lista      { display: flex; flex-direction: column; gap: 2px;
                 max-height: 340px; overflow-y: auto;
                 border: 1px solid var(--border); padding: 6px; }

.tp-rad        { display: grid; grid-template-columns: 18px 1fr auto auto;
                 align-items: center; gap: 10px; padding: 7px 9px;
                 cursor: pointer; font-size: var(--t-liten); }
.tp-rad:hover  { background: var(--surface2); }
.tp-rad-av     { opacity: 0.55; }
.tp-kryss      { width: 16px; height: 16px; accent-color: var(--accent);
                 cursor: pointer; }
.tp-rad-namn   { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; color: var(--text); }
.tp-rad-antal  { font-family: 'JetBrains Mono', monospace;
                 font-size: var(--t-meta); color: var(--muted2);
                 white-space: nowrap; }
.tp-rad-datum  { font-family: 'JetBrains Mono', monospace;
                 font-size: var(--t-meta); color: var(--muted2);
                 white-space: nowrap; min-width: 92px; text-align: right; }

.tp-marke      { font-size: var(--t-meta); color: var(--muted2);
                 border: 1px solid var(--border); padding: 1px 6px;
                 margin-left: 6px; white-space: nowrap; }

/* Frågetypen är Sessioners märke (.quiz-typmarke i admin.css), inte ett
   tp-marke: samma quiz ska se likadant ut i båda flikarna. Här sitter det
   efter namnet, så marginalen vänds som på sessionsraden. */
.tp-rad-namn .quiz-typmarke { margin-left: 8px; margin-right: 0; }

.tp-summa      { font-family: 'JetBrains Mono', monospace;
                 font-size: var(--t-meta); color: var(--accent);
                 margin-top: 8px; display: block; }

/* ── Klassvalet ───────────────────────────────────────────────── */
.tp-klasser    { display: flex; flex-direction: column; gap: 2px;
                 max-height: 220px; overflow-y: auto;
                 border: 1px solid var(--border); padding: 6px; }
.tp-klass      { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
                 cursor: pointer; font-size: var(--t-liten); }
.tp-klass:hover { background: var(--surface2); }
.tp-klasskryss { width: 16px; height: 16px; accent-color: var(--accent);
                 cursor: pointer; flex-shrink: 0; }

/* ── Utlagda pass ─────────────────────────────────────────────── */
.tp-pass       { display: flex; align-items: center; justify-content: space-between;
                 gap: 12px; padding: 9px 14px; background: var(--surface);
                 border: 1px solid var(--border); margin-bottom: 2px; }
.tp-pass-av    { opacity: 0.55; }
.tp-pass-info  { min-width: 0; }
.tp-pass-namn  { font-size: var(--t-liten); font-weight: 600; color: var(--text); }
.tp-pass-meta  { font-size: var(--t-meta); color: var(--muted2); margin-top: 2px; }

.tp-status     { font-size: var(--t-meta); color: var(--muted2); margin-left: 8px; }