/* ═══════════════════════════════════════════════════
   global.css – Thevin v5.16
   Delad bas för admin.html, bibliotek-admin.html,
   elev-bibliotek.html och övriga sidor.
   Design: flat/kantigt (admin-stil).
   ═══════════════════════════════════════════════════ */

/* ── VARIABLER ────────────────────────────────────────────────────────
   Värdena följer "Thevin — designsystem.md" i mappen ovanför. Ändrar du
   ett värde här ändrar du hela Thevin: 1 399 anrop pekar hit.

   TVÅ SAKER ATT VETA INNAN DU RÖR NÅGOT:

   1. Varje roll måste fungera BÅDE som fyllnad och som textfärg, för
      befintlig kod använder var(--accent) på båda sätten. Därför är varje
      värde valt så att det klarar 4,5:1 mot bakgrunden OCH har ett
      --on-*-par för text ovanpå sig själv. Den gamla paletten gjorde det
      inte: vit text på den gröna knappen låg på 2,10 mot kravet 4,5.

   2. --accent är handling, ingenting annat. Grönt och rött betyder rätt
      och fel. Det är därför det inte längre finns någon blå eller grön
      knapp, och varför --warn är samma bärnsten som --accent — en
      varning bär alltid ord, aldrig bara färg.

   Samtliga par är uträknade, inte bedömda med ögat. Lägsta värdet i
   uppsättningen är 4,68. Byter du ett värde: räkna om paret. */

/* ── MÖRKT TEMA (default) ── */
:root {
  --bg:          #121316;
  --surface:     #191a1d;
  --surface2:    #1f2124;
  --surface3:    #26282c;
  --border:      #34373b;
  --text:        #f2f3f4;
  --muted:       #878c92;
  --muted2:      #a4a9af;

  --accent:      #efa02c;
  --accent-dim:  rgba(239,160,44,0.12);
  --accent-hover:#f7b14a;
  --on-accent:   #241603;

  --correct:     #43c07e;
  --correct-dim: rgba(67,192,126,0.12);
  --correct-hover:#58cd90;
  --on-correct:  #06240f;
  /* Grön TEXT på sidans egen bakgrund: "Rätt", ett sparat-kvitto, ett
     klarbesked. Inget nytt färgvärde — den följer --correct och därmed
     temat. Den finns därför att fyra filer skrev var(--correct-text)
     utan att någon definierat den; ett odefinierat var() ger ärvd färg,
     alltså svart, och "Rätt" stod svart i dokumentvyn. 2026-10-24. */
  --correct-text: var(--correct);

  --wrong:       #e8615a;
  --wrong-dim:   rgba(232,97,90,0.12);
  --wrong-hover: #f07a72;
  --on-wrong:    #2b0705;
  /* Röd TEXT på sidans egen bakgrund. Samma historia som
     --correct-text ovan: sex regler i tre filer läste den utan att
     någon definierat den, så felmeddelandena i dokumentvyn och
     importen stod i ärvd färg. 2026-10-24. */
  --wrong-text:  var(--wrong);

  --warn:        #efa02c;
  --warn-dim:    rgba(239,160,44,0.12);
}

/* ── LJUST TEMA ── */
body.light {
  --bg:          #f4f4f2;
  --surface:     #ffffff;
  --surface2:    #ecece9;
  --surface3:    #e1e1dd;
  --border:      #cfcfca;
  --text:        #17181a;
  --muted:       #64686d;
  --muted2:      #4d5156;

  --accent:      #9e5d08;
  --accent-dim:  rgba(158,93,8,0.10);
  --accent-hover:#8a5206;
  --on-accent:   #ffffff;

  --correct:     #157a4c;
  --correct-dim: rgba(21,122,76,0.10);
  --correct-hover:#11643e;
  --on-correct:  #ffffff;

  --wrong:       #bf342d;
  --wrong-dim:   rgba(191,52,45,0.10);
  --wrong-hover: #a32a24;
  --on-wrong:    #ffffff;

  --warn:        #9e5d08;
  --warn-dim:    rgba(158,93,8,0.10);
}

/* ── MATERIALTYPER ──────────────────────────────────────────────────────
   Sex kategorier av material. Färgerna låg tidigare som pastellpar direkt
   i admin.css — Tailwinds standardstopp, ärvda och inte valda, och de var
   dessutom fasta ljusa värden som lyste som fläckar i mörkt tema.

   Nu är badgen neutral och kategorin bärs av ORDET i den. Färgen är en
   tre pixlar bred vänsterkant, ett stöd för ögat när man skummar en lista,
   aldrig den enda bäraren av betydelse. Värdena är samma familj som
   alternativfärgerna i kahoot-läget. Bärnsten används inte här — den är
   handlingsfärg och ska inte betyda "podd". 2026-10-15. */
:root {
  --kat-quiz:   #2f7fe8;
  --kat-text:   #17c3a2;
  --kat-slide:  #9b5de5;
  --kat-ai:     #22b0d8;
  --kat-prompt: #ff7a45;
  --kat-podd:   #c45cae;
}

/* ── TYPSKALA ───────────────────────────────────────────────────────────
   Sju steg, inga mellanlägen. Samma namn överallt, olika värden beroende
   på vem som läser: läraren har tätt och mycket på skärmen, eleven läser
   färre saker på längre håll. elev.css skriver över värdena nedan för
   elevsidorna, och laddas efter den här filen.

   Värdena här är LÄRARVYNS. De är ännu inte tillämpade i admin.css — den
   har 112 storleksdeklarationer i täta tabeller där text som växer kan
   spräcka kolumner, och den omgången görs när någon kan titta på den.
   Tokens finns alltså före sin användning, med flit.

   Golvet är 12px. Mätningen 2026-10-15 visade att 76 procent av alla
   textstorlekar i Thevin låg under 14px och att 11px var den vanligaste
   storleken i hela systemet. Det är därför skalan finns. */
:root {
  --t-meta:    12px;
  --t-liten:   13px;
  --t-brod:    15px;
  --t-h3:      17px;
  --t-h2:      20px;
  --t-h1:      26px;
  --t-display: 34px;
}

/* ── RESET ── */
* { margin:0; padding:0; box-sizing:border-box; }

/* ── BODY BAS ── */
body {
  font-family:'Sora', sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

/* ── ANIMATIONER ── */
@keyframes fadeIn    { from{opacity:0;transform:translateY(6px)}  to{opacity:1;transform:translateY(0)} }
@keyframes slideUp   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── TEMAKNAPP ── */
.theme-btn {
  background:none;
  border:1px solid var(--border);
  border-radius:0;
  color:var(--muted2);
  font-family:'Sora', sans-serif;
  font-size:var(--t-liten);
  cursor:pointer;
  padding:5px 10px;
  transition:all 0.15s;
  display:flex;
  align-items:center;
  gap:6px;
}
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── LOGIN ── */
/* Rutan MASTE kunna skrolla. Utan overflow-y hamnade "Glomt losenord?"
   under fonsterkanten sa fort ett felmeddelande lade till en rad - och den
   som just skrivit fel losenord var alltsa den enda som inte kunde na
   lanken. Pa en laptop med lite hojd racker det med logotypen och ett fel
   for att sista raden ska forsvinna. 2026-09-20. */
#login-overlay {
  position:fixed; inset:0; background:var(--bg); z-index:10000;
  display:flex; align-items:center; justify-content:center;
  overflow-y:auto; padding:24px 0;
}
.login-box {
  background:var(--surface); border:1px solid var(--border);
  padding:44px 40px; width:100%; max-width:400px;
  margin:auto;   /* centrerar, men later rutan vaxa forbi skarmen */
}
.login-logo {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta); font-weight:600;
  letter-spacing:4px; color:var(--accent); margin-bottom:6px; text-transform:uppercase;
}
.login-title { font-size:var(--t-h2); font-weight:700; margin-bottom:4px; }
.login-sub   { font-size:var(--t-liten); color:var(--muted2); margin-bottom:36px; }
.login-version {
  font-family:'JetBrains Mono', monospace; font-size:var(--t-meta);
  color:var(--muted); letter-spacing:0.5px; margin-bottom:24px;
}
.login-error {
  background:var(--wrong-dim); border:1px solid var(--wrong);
  color:var(--wrong); padding:10px 14px;
  font-size:var(--t-liten); margin-bottom:16px; display:none;
}
.error-msg { color:var(--wrong); font-size:var(--t-liten); margin-top:8px; display:none; }

/* ── FORMULÄR ── */
.form-row   { display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.form-group { display:flex; flex-direction:column; gap:6px; flex:1; min-width:160px; }

label { font-size:var(--t-liten); color:var(--muted2); letter-spacing:0.3px; }

input, select, textarea {
  background:var(--surface); border:1px solid var(--border); border-radius:0;
  padding:8px 12px; color:var(--text); font-family:'Sora', sans-serif;
  font-size:var(--t-liten); transition:border-color 0.15s; width:100%;
}
input[type=checkbox],
input[type=radio]  { width:auto; padding:0; background:none; border:none; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
select option      { background:var(--surface); }
textarea           { resize:vertical; min-height:80px; }

body.light input,
body.light select,
body.light textarea { color:var(--text); }

/* ── KNAPPAR ── */
.btn {
  padding:7px 14px; border-radius:0; border:none;
  font-family:'Sora', sans-serif; font-size:var(--t-liten); font-weight:600;
  cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
/* Textfärgen på en fylld knapp är aldrig #fff rakt av — se kommentaren vid
   variablerna. Vit text på bärnsten och på grönt klarar inte kontrastkravet. */
.btn-primary  { background:var(--accent);  color:var(--on-accent); }
.btn-primary:hover  { background:var(--accent-hover); }
/* .btn-success var grön. Grönt betyder rätt svar i Thevin, inte "klicka här",
   och två fyllda knappar i olika färger bredvid varandra säger inget om vilken
   som är den viktiga. Klassen finns kvar och ser ut som en primärknapp, så att
   inget markup behövde ändras — namnet städas bort ur JS i en senare omgång.
   Står det två .btn-success i samma vy har den vyn nu två primärknappar, vilket
   är en för mycket. Det ska lösas i vyn, inte här. 2026-10-15. */
.btn-success  { background:var(--accent); color:var(--on-accent); }
.btn-success:hover  { background:var(--accent-hover); }
.btn-danger   { background:var(--wrong);   color:var(--on-wrong); }
.btn-danger:hover   { background:var(--wrong-hover); }
.btn-warn     { background:var(--warn);    color:var(--on-accent); }
.btn-ghost    { background:none; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover    { border-color:var(--text); }
/* Tyst: en bihandling som ska finnas men inte konkurrera. Ingen ram, ingen
   yta, bara understruken text. Används t.ex. för "Spara som mina
   standardinställningar" i startrutan. 2026-10-16. */
.btn-tyst {
  background:none; border:none; color:var(--muted2);
  font-size:var(--t-meta); padding:7px 0; text-decoration:underline;
  text-underline-offset:3px; cursor:pointer;
}
.btn-tyst:hover { color:var(--text); }
.btn-sm       { padding:4px 10px; font-size:var(--t-meta); }
.btn-icon {
  width:26px; height:26px; border-radius:0; border:1px solid var(--border);
  background:none; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.15s; flex-shrink:0;
}
.btn-icon:hover { border-color:var(--accent); color:var(--accent); }
.btn-icon svg { width:13px; height:13px; }
.btn-starta {
  padding:4px 12px; background:none; color:var(--text);
  border:1px solid var(--border); font-family:'Sora', sans-serif;
  font-size:var(--t-meta); font-weight:600; cursor:pointer; transition:all 0.15s;
  letter-spacing:0.2px; border-radius:0;
}
.btn-starta:hover { border-color:var(--text); background:var(--surface2); }

/* ── PAGE HEADER ── */
.page-header             { margin-bottom:28px; }
.page-header h1          { font-size:var(--t-h2); font-weight:700; }
.page-header p           { color:var(--muted2); font-size:var(--t-liten); margin-top:4px; }

/* ── CARDS ── */
.card        { background:var(--surface); border:1px solid var(--border); margin-bottom:16px; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); }
.card-title  { font-size:var(--t-liten); font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }

/* ── TABELLER ── */
.table-wrap  { overflow-x:auto; }
table        { width:100%; border-collapse:collapse; font-size:var(--t-liten); }
th           { text-align:left; padding:10px 14px; color:var(--muted); font-size:var(--t-meta); letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--border); }
td           { padding:11px 14px; border-bottom:1px solid var(--border); }
tr:last-child td  { border-bottom:none; }
tr:hover td       { background:var(--surface2); }

/* ── BADGES ── */
.badge       { display:inline-block; padding:3px 8px; border-radius:0; font-size:var(--t-meta); font-weight:600; }
.badge-green { background:var(--correct-dim); color:var(--correct); }
.badge-red   { background:var(--wrong-dim);   color:var(--wrong); }
.badge-blue  { background:var(--accent-dim);  color:var(--accent); }
.badge-gray  { background:var(--surface2);    color:var(--muted2); }
.badge-warn  { background:var(--warn-dim);    color:var(--warn); }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:24px; right:24px; background:var(--surface2);
  border:1px solid var(--border); padding:12px 20px;
  font-size:var(--t-liten); z-index:9999; animation:slideUp 0.3s ease; max-width:300px;
}
.toast.success { border-color:var(--correct); color:var(--correct); }
.toast.error   { border-color:var(--wrong);   color:var(--wrong); }

/* ── STATS ── */
.stat-grid  { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card  { background:var(--surface2); padding:16px; border:1px solid var(--border); }
.stat-value { font-size:var(--t-h1); font-weight:700; color:var(--accent); }
.stat-label { font-size:var(--t-meta); color:var(--muted2); margin-top:2px; }

/* ── DIVIDER ── */
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }

/* ── SÖKFÄLT ── */
.search-bar           { position:relative; margin-bottom:16px; }
.search-bar input     { padding-left:34px; background:var(--surface); border-color:var(--border); }
.search-bar svg       { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:13px; height:13px; color:var(--muted); pointer-events:none; }

/* ── TOMT TILLSTÅND ── */
.empty-state { text-align:center; padding:60px 20px; color:var(--muted2); font-size:var(--t-liten); }

/* ── MODAL ── */
.modal-overlay          { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9000; display:none; align-items:center; justify-content:center; }
.modal-overlay.open     { display:flex; }
.modal                  { background:var(--surface); border:1px solid var(--border); padding:36px; max-width:440px; width:90%; animation:fadeIn 0.2s ease; }
.modal-title            { font-size:var(--t-h3); font-weight:700; margin-bottom:4px; }
.modal-sub              { font-size:var(--t-liten); color:var(--muted2); margin-bottom:28px; }
.modal-actions          { display:flex; gap:10px; margin-top:20px; }
/* Rumskoden står utanför typskalan med flit. Den läses av tjugo elever på
   avstånd från lärarens skärm, inte av den som sitter vid den. 2026-10-15. */
.modal-rumskod          { font-family:'JetBrains Mono',monospace; font-size:48px; font-weight:600; color:var(--correct); letter-spacing:10px; text-align:center; margin:24px 0; }

/* ── SESSION BANNER ── */
.session-banner {
  border:1px solid var(--correct); background:var(--correct-dim);
  padding:16px 20px; margin-bottom:16px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.session-banner-left    { display:flex; align-items:center; gap:12px; }
.session-dot            { width:8px; height:8px; border-radius:50%; background:var(--correct); flex-shrink:0; animation:pulse 2s infinite; }
.session-banner-title   { font-size:var(--t-liten); font-weight:600; color:var(--correct); }
.session-banner-meta    { font-size:var(--t-liten); color:var(--correct); opacity:0.8; margin-top:2px; }
.session-banner-actions { display:flex; gap:8px; }
.session-rumskod        { font-family:'JetBrains Mono',monospace; font-size:var(--t-h2); font-weight:600; color:var(--correct); letter-spacing:4px; flex-shrink:0; }

/* ── RESPONSIV ── */
@media(max-width:700px) {
  .page { padding:20px; }
}