/* ═══════════════════════════════════════════════════════════════
   bibliotek-admin.css – Thevin
   Elevbibliotekets lärarvy: ämnen och kapitel, Dela ut, Elevöversikt,
   Utforskaren.

   Flyttad hit 2026-10-29 ur style-blocket på 415 rader i
   bibliotek-admin.html. Blocket låg EFTER <link>-taggarna till
   global.css och admin.css och vann därför på källordning — och
   halva blocket var en gammal kopia av regler som redan står
   konverterade i admin.css. Det var därför sidan såg ut som den
   gjorde: Tailwinds pastellpar på materialtyperna, blå filterknappar,
   #fff på bärnsten och text ner till 9px, allt sedan länge utrensat i
   admin.css men överskrivet härifrån.

   Det som var dubblerat är struket. Kvar står bara sidans egen
   layout, och den går nu genom samma variabler och samma typskala
   som resten av lärarvyn. Inga nya färgvärden, inga hörnradier,
   ingenting under 12px.

   Sidan laddar global.css, admin.css och sedan den här filen, i den
   ordningen.

   NÄSTA STEG: vyn ska in i admin.html som en egen sida. Då byter
   .main-regeln och de tre #page-*-reglerna nedan namn till
   #page-elevbibliotek, och resten följer med oförändrat.
   ═══════════════════════════════════════════════════════════════ */

/* ── SIDANS RAM ──────────────────────────────────────────────── */
/* Sidan fyller fönstret och skrollar i sina egna spalter. Höjden tas
   här och inte på .main: .main är gemensam för hela admin, och en
   låst höjd där hade stängt skrollningen på alla andra sidor. */
#page-elevbibliotek.active {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

/* Flikraden bär samma klasser som Skapa quiz (.sq-flik i admin.css),
   så den ser likadan ut och ändras på ett ställe. */
.eb-flikrad {
  display: flex; gap: 2px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}

.eb-ytan { flex: 1; min-height: 0; display: flex; }

/* De fyra vyerna. Tre av dem är panellayouter som ska fylla ytan. */
.eb-sida { display: none; width: 100%; min-height: 0; }
.eb-sida.aktiv { display: flex; overflow: hidden; }

.eb-rullyta { padding: 20px; overflow-y: auto; width: 100%; box-sizing: border-box; }
.eb-fyll { width: 100%; height: 100%; }
.tom-tat { padding: 20px 0; }

/* ── BIBLIOTEK: ÄMNES- OCH KAPITELPANEL ──────────────────────── */
.sidopanel {
  width: 260px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.sidopanel-header {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.sidopanel-header h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted); font-weight: 600; margin: 0;
}
.sidopanel-lista { flex: 1; overflow-y: auto; padding: 6px; }
.contentpanel { flex: 1; overflow-y: auto; padding: 20px; }

.amne-rad {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; cursor: pointer;
}
.amne-rad:hover { background: var(--surface2); }
/* min-width:0 krävs för att ett flexbarn ska få krympa under sitt
   innehåll. Utan den växer raden förbi panelen i stället för att korta
   av namnet, och knapparna hamnar utanför kanten. */
.amne-rad .amne-namn {
  flex: 1; min-width: 0; font-size: var(--t-liten); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.amne-rad .pilikon { color: var(--muted); font-size: var(--t-meta); transition: transform .2s; flex-shrink: 0; }
.amne-rad.open .pilikon { transform: rotate(90deg); }

/* Redigera och Radera på en ämnes- eller kapitelrad.
   De stod som ORDEN "Redigera" och "Radera" i en .btn-icon, och .btn-icon
   i global.css är en 26x26-ruta byggd för en svg: orden la sig ovanpå
   varandra och utanför panelen så fort sidans egen .btn-icon-regel
   försvann med style-blocket. Två ord på 128px får inte heller plats
   bredvid ett ämnesnamn i en panel på 260. De är nu ikoner med title,
   som i utforskaren, och ligger dämpade tills man är på raden. */
.amne-rad .btn-icon,
.kapitel-rad .btn-icon {
  border-color: transparent;
  color: var(--muted2);
  opacity: 0; transition: opacity .12s, color .12s, border-color .12s;
}
.amne-rad:hover .btn-icon,
.kapitel-rad:hover .btn-icon,
.amne-rad .btn-icon:focus-visible,
.kapitel-rad .btn-icon:focus-visible { opacity: 1; }
.amne-rad .btn-icon:hover,
.kapitel-rad .btn-icon:hover { border-color: var(--accent); color: var(--accent); }
/* Radering bär ordets färg, inte fyllningens. --wrong är en yta att skriva
   på; --wrong-text är den som är mätt mot bakgrunden. */
.amne-rad .rad-knapp-fara:hover,
.kapitel-rad .rad-knapp-fara:hover { border-color: var(--wrong); color: var(--wrong-text); }

.kapitel-lista { padding-left: 20px; }
.kapitel-rad {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; cursor: pointer;
  border-left: 3px solid transparent;
}
.kapitel-rad:hover { background: var(--surface2); }
/* Vald rad bär Thevins markör: tjock vänsterkant i accent. */
.kapitel-rad.aktiv { background: var(--surface2); color: var(--accent); border-left-color: var(--accent); }
.kapitel-rad .kapitel-namn {
  flex: 1; min-width: 0; font-size: var(--t-liten);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── INNEHÅLLSKORT I ETT KAPITEL ─────────────────────────────── */
.innehall-grid { display: flex; flex-direction: column; gap: 6px; }
.innehall-kort {
  background: var(--surface); border: 1px solid var(--border);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.innehall-kort:hover { border-color: var(--muted); }
.kort-titel { flex: 1; font-size: var(--t-liten); }
.kort-mottagare { font-size: var(--t-meta); color: var(--muted2); }
.advarkan { font-size: var(--t-meta); color: var(--warn); }

/* ── MARKERINGSRAD ───────────────────────────────────────────── */
/* Ligger kvar som fast ruta längst ned: den hör till markeringen och
   inte till någon enskild rad, och ska synas var i listan man än står. */
#bulk-bar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--accent);
  padding: 10px 16px;
  display: none; align-items: center; gap: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28); z-index: 100;
}
#bulk-bar.synlig { display: flex; }
.bulk-count { font-size: var(--t-liten); color: var(--muted2); }

/* ── DELA UT: STEGEN ─────────────────────────────────────────── */
.dela-wizard { max-width: 700px; }
.steg-header {
  display: flex; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.steg {
  padding: 10px 20px; font-size: var(--t-liten); color: var(--muted2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.steg.aktiv { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* Klart steg bär grönt, samma betydelse som i rättningen: det här är gjort. */
.steg.klar { color: var(--correct-text); }
.steg-content { display: none; }
.steg-content.aktiv { display: block; }

.sek-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 16px;
}
.sek-header h2 { font-size: var(--t-h3); font-weight: 600; }

/* ── DELA UT: MOTTAGARE ──────────────────────────────────────── */
.mottagare-klass {
  background: var(--surface); border: 1px solid var(--border);
  margin-bottom: 8px; overflow: hidden;
}
.klass-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  background: var(--surface2); user-select: none;
}
.klass-header:hover { background: var(--surface3); }
.klass-namn { flex: 1; font-weight: 600; font-size: var(--t-liten); }
.elev-rad {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px; font-size: var(--t-liten);
}
/* Tyst bihandling: understruken text, ingen ram, ingen yta. */
.markera-alla-btn {
  font-size: var(--t-meta); color: var(--muted2); cursor: pointer;
  background: none; border: none; padding: 0;
  font-family: 'Sora', sans-serif; text-decoration: underline;
}
.markera-alla-btn:hover { color: var(--text); }

/* ── DELA UT: VÄLJ INNEHÅLL ──────────────────────────────────── */
.innehall-val-lista {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 320px; overflow-y: auto;
}
.innehall-val-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
  font-size: var(--t-liten);
}
.innehall-val-rad:hover { background: var(--surface2); }
.innehall-val-rad.vald { border-color: var(--accent); background: var(--accent-dim); }

.typ-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
/* Samma form som utforskarens filterknappar i admin.css, så de två
   listorna inte ser ut att göra olika saker. */
.typ-btn {
  padding: 4px 12px; font-size: var(--t-meta); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--muted2); font-family: 'Sora', sans-serif; font-weight: 600;
  transition: all 0.12s;
}
.typ-btn:hover { border-color: var(--muted); color: var(--text); }
.typ-btn.aktiv { background: var(--text); color: var(--surface); border-color: var(--text); }

/* ── ELEVÖVERSIKT ────────────────────────────────────────────── */
.oversikt-layout { display: flex; width: 100%; height: 100%; }
.oversikt-klass-panel {
  width: 180px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 10px;
}
.oversikt-elev-panel {
  width: 210px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 10px;
}
.oversikt-detalj-panel { flex: 1; overflow-y: auto; padding: 20px; }
.panel-rubrik {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-meta); text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--muted);
  font-weight: 600; margin-bottom: 8px; padding: 0 4px;
}
.val-rad {
  padding: 8px 10px; cursor: pointer; font-size: var(--t-liten);
  border-left: 3px solid transparent;
}
.val-rad:hover { background: var(--surface2); }
.val-rad.aktiv { background: var(--surface2); color: var(--accent); border-left-color: var(--accent); }
.aktivitet-kort {
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 10px; margin-bottom: 3px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-liten);
}

/* ── ÄMNE OCH KAPITEL I ELEVÖVERSIKTEN ───────────────────────────
   Trädet i Elevöversikt och Klassbibliotek: ämne, sedan kapitel, sedan
   korten. Samma struktur som eleven ser och samma som Quiz-fliken.

   Rubrikerna låg som inline-styles i bibliotek-admin.js till 2026-10-29,
   och kapitelraden stod på 11px — under golvet i designsystemets avsnitt
   5. Båda går nu genom skalan. */
.struktur-amne { margin-bottom: 14px; }
.struktur-amne-rubrik {
  font-size: var(--t-liten); font-weight: 700; color: var(--text);
  padding: 4px 0; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* Kapitelraden i mono och versalt, enligt regeln om monoetiketter. Den
   ska läsas som en avdelare, inte konkurrera med ämnet ovanför. */
.struktur-kapitel { margin-bottom: 8px; }
.struktur-kapitel-rubrik {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--muted); margin-bottom: 4px;
}

/* Material vars ämne saknas. Ligger överst och är lärarens att rätta —
   efter beslut 11 går det inte att dela ut nytt utan ämne, så gruppen
   tömmer sig själv över tid. Accentkanten pekar ut att något behöver
   göras; ingen färgad ruta, det är inget larm. */
.struktur-utan-amne {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}
.struktur-amne-hjalp {
  font-size: var(--t-meta); color: var(--muted2);
  line-height: 1.5; margin-bottom: 6px;
}

/* ── UTDELAT-TRÄDETS RAM ──
   Rubrikraden, verktygsraden och radernas celler. Låg som inline-styles i
   bibliotek-admin.js till 2026-10-29, med 11px och 12px hårdkodade. Flyttade
   hit när vyn blev Bib.ritaUtdelat och fick ritas både i Elevbibliotekets
   gamla sidopanel och i Elevresultats flik Bibliotek — en vy som ritas på
   två ställen kan inte bära sin stil i JS. */
.utdelat-rubrik {
  font-size: var(--t-liten); font-weight: 700; color: var(--text);
  margin: 0 0 6px;
}
.utdelat-underrad {
  font-size: var(--t-meta); color: var(--muted2);
  line-height: 1.5; margin: 0 0 10px;
}
.utdelat-verktygsrad {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.utdelat-avdelare { color: var(--muted2); margin: 0 2px; }
.utdelat-radera   { margin-left: auto; }
.utdelat-kryss {
  width: 14px; height: 14px;
  accent-color: var(--accent); flex-shrink: 0;
}
.utdelat-titel { flex: 1; font-size: var(--t-liten); }
.utdelat-meta {
  font-size: var(--t-meta); color: var(--muted2);
  white-space: nowrap;
}
/* En avstängd utdelning göms inte, den dämpas. Eleven ser den inte, men
   läraren ska kunna se att den funnits. */
.utdelat-avstangd { opacity: 0.6; }

/* ── MAPPGRUPPER I LISTORNA ──────────────────────────────────── */
.mapp-grupp { margin-bottom: 4px; }
.mapp-rubrik {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: var(--t-meta); font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer; user-select: none;
}
.mapp-rubrik:hover { background: var(--surface2); }
.mapp-rubrik .pilikon { font-size: var(--t-meta); transition: transform .15s; }
.mapp-rubrik.open .pilikon { transform: rotate(90deg); }
.mapp-innehall { display: none; padding-left: 14px; }
.mapp-innehall.open { display: block; }

.undermapp-rubrik {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: var(--t-meta); font-weight: 600;
  color: var(--muted2); cursor: pointer; user-select: none;
}
.undermapp-rubrik:hover { background: var(--surface2); }
.undermapp-rubrik .pilikon { font-size: var(--t-meta); transition: transform .15s; }
.undermapp-rubrik.open .pilikon { transform: rotate(90deg); }
.undermapp-innehall { display: none; padding-left: 12px; }
.undermapp-innehall.open { display: block; }

.ingen-mapp-rubrik {
  padding: 6px 10px; font-size: var(--t-meta); font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── UTFORSKAREN: det som inte redan står i admin.css ─────────── */
.utfork-wrap { display: flex; width: 100%; height: 100%; overflow: hidden; }
.utfork-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.utfork-filter-rad {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.utfork-pil {
  font-size: var(--t-meta); color: var(--muted); cursor: pointer;
  width: 14px; flex-shrink: 0; text-align: center;
  transition: transform .15s;
}
.utfork-pil-under { color: var(--muted); font-size: var(--t-meta); flex-shrink: 0; }
.utfork-undermapp-lista { overflow: hidden; }
.utfork-undermapp-lista.dold { display: none; }
/* Radera-knappen på en mapprad dyker upp vid hovring. Den ska inte
   stå framme på varje rad i ett träd man mest läser. */
.utfork-mapp-knappar { visibility: hidden; flex-shrink: 0; margin-left: auto; display: flex; }
.utfork-mapp:hover .utfork-mapp-knappar,
.utfork-undermapp:hover .utfork-mapp-knappar,
.utfork-mapp-knappar:hover { visibility: visible; }
.utfork-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font-size: var(--t-liten); margin-bottom: 12px;
  border: 1px solid var(--border); background: var(--surface2);
  font-family: 'Sora', sans-serif; color: var(--text);
}
.utfork-input:focus { outline: none; border-color: var(--accent); }

/* ── KNAPPAR SOM UTFORSKAREN BYGGER ──────────────────────────── */
/* utforskare.js skriver de här klassnamnen. De är samma fyra lägen
   som .btn i global.css, med samma färger - inte en egen palett. */
.knapp-rad {
  padding: 7px 14px; font-size: var(--t-meta); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); font-family: 'Sora', sans-serif; font-weight: 600;
  transition: all 0.12s;
}
.knapp-rad:hover { border-color: var(--accent); color: var(--accent); }
.knapp-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.knapp-accent:hover { background: var(--accent-hover); color: var(--on-accent); border-color: var(--accent-hover); }
.knapp-fara { background: none; color: var(--wrong-text); border-color: var(--wrong); }
.knapp-fara:hover { background: var(--wrong); color: var(--on-wrong); border-color: var(--wrong); }

/* ── SMÅTT ───────────────────────────────────────────────────── */
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

.tom { text-align: center; padding: 40px 20px; color: var(--muted2); }
.tom p { font-size: var(--t-liten); margin-top: 8px; }

/* Sidans toast ligger på id och inte på .toast i global.css, eftersom
   JS:en här sätter klasserna ok och fel. Byts när vyn flyttar in i
   admin.html och får använda den gemensamma. */
#toast {
  position: fixed; bottom: 80px; right: 20px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 10px 16px; font-size: var(--t-liten);
  opacity: 0; transition: opacity .3s; z-index: 300; pointer-events: none;
  font-family: 'Sora', sans-serif; color: var(--text);
}
#toast.synlig { opacity: 1; }
#toast.ok  { border-color: var(--correct); color: var(--correct-text); }
#toast.fel { border-color: var(--wrong);   color: var(--wrong-text); }