/* ============================================================
   elevresultat.css — stil för sidan Elevresultat

   Flyttad ur elevresultat.js 2026-09-23 och omgjord till Thevins tema:
   rakt hörn, .btn och .dd från global.css och admin.css, inga rundade
   piller. Klassnamnen (er-*) är oförändrade så att elevresultat.js inte
   behövde röras där den bygger rader och paneler.

   Färger kommer från variablerna i global.css, så ljust och mörkt tema
   följer med av sig självt.
   ============================================================ */

#er-root [hidden] { display:none !important; }

/* ── Väljarrad ── */
#er-root .er-val {
  display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end;
  background:var(--surface); border:1px solid var(--border);
  padding:10px 14px 0; margin-bottom:10px;
}
#er-root .er-f { display:flex; flex-direction:column; gap:4px; }
#er-root .er-f label.h {
  font-size:var(--t-meta); letter-spacing:1px; text-transform:uppercase; color:var(--muted2);
}
/* global.css sätter width:100% på select och input; det sväljer raden. */
#er-root .er-f select { width:auto; min-width:140px; max-width:100%; }
#er-root .er-f-moment { flex:1 1 260px; }
#er-root .er-f-moment select { width:100%; min-width:0; }
#er-root .er-f-elev select { min-width:170px; }
/* En väljare som inte gör något i den öppna fliken. Används av Kunskapsläge,
   som går över alla kapitel och därför inte bryr sig om Moment eller Elev.
   Nedtonad i stället för borttagen: försvinner väljaren hoppar hela raden
   varje gång man byter flik. */
#er-root .er-f-av label.h,
#er-root .er-f-av select { opacity:0.45; }
#er-root .er-f-av select { cursor:not-allowed; }
#er-root .er-f input[type=search] { width:170px; }
/* Ett menyval i Visa som inte gäller den öppna fliken (Bibliotek). Samma
   nedtoning som väljarna ovan och som .dd-val[disabled] i admin.css. */
#er-root .dd-rad.er-rad-av { opacity:0.38; cursor:not-allowed; }
#er-root .dd-rad.er-rad-av input { cursor:not-allowed; }
/* Vad sökrutan träffade, i Elevvy och Bibliotek. */
#er-root .er-sokinfo {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  margin:0 0 10px; font-size:var(--t-liten); color:var(--muted2);
}
#er-root .er-sokinfo-namn { color:var(--text); font-weight:600; }
/* Andra raden: flikarna till vänster, sök och menyer till höger. */
#er-root .er-rad2 { flex:1 1 100%; display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
#er-root .er-val-hoger {
  margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-bottom:6px;
}

/* Menyknapparna får en liten pil som ritas med kantlinjer, inte med tecken. */
#er-root .dd-knapp::after {
  content:""; display:inline-block; margin-left:8px; vertical-align:middle;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor;
}
#er-root .dd.oppen > .dd-knapp::after { border-top:0; border-bottom:5px solid currentColor; }
#er-root .dd-rad {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 14px; background:none; border:none; color:var(--text);
  font-family:'Sora', sans-serif; font-size:var(--t-liten); cursor:pointer; white-space:nowrap;
  transition:all .12s;
}
#er-root .dd-rad:hover { background:var(--surface2); color:var(--accent); }
#er-root .dd-rad input { flex:none; accent-color:var(--accent); }
#er-root .dd-val { display:flex; align-items:center; gap:10px; }
#er-root .dd-meny { min-width:230px; }
#er-root .er-n, #er-root .er-notis {
  display:inline-block; margin-left:8px; padding:0 6px; font-size:var(--t-meta); font-weight:700;
  line-height:16px; background:var(--accent); color:var(--on-accent);
}
#er-root .er-notis { background:var(--warn-dim); color:var(--warn); }
#er-root .dd-val .er-notis { margin-left:auto; }
#er-root .er-tab .er-notis { margin-left:8px; }

/* ── Flikar ── */
#er-root .er-tabs { display:flex; }
#er-root .er-tab {
  padding:8px 14px; font-size:var(--t-liten); font-weight:600; color:var(--muted2);
  background:none; border:none; border-bottom:2px solid transparent;
  cursor:pointer; font-family:inherit;
}
#er-root .er-tab:hover { color:var(--text); }
#er-root .er-tab.on { color:var(--accent); border-bottom-color:var(--accent); }

#er-root .er-knappar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto; }
#er-root .er-panelrad { display:flex; justify-content:flex-end; margin-bottom:8px; }
#er-root .er-segrad { display:inline-flex; align-items:center; }
#er-root .er-seglabel { font-size:var(--t-meta); color:var(--muted2); margin-right:8px; }
#er-root .er-seg { display:inline-flex; }
#er-root .er-seg button {
  padding:4px 12px; font-size:var(--t-meta); font-weight:600; border:1px solid var(--border);
  margin-left:-1px; background:var(--surface2); color:var(--muted2); cursor:pointer;
  font-family:inherit;
}
#er-root .er-seg button:first-child { margin-left:0; }
#er-root .er-seg button.on { background:var(--text); color:var(--surface); border-color:var(--text); }

/* ── Nyckeltal ── */
#er-root .er-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:14px; }
#er-root .er-tile { background:var(--surface2); border:1px solid var(--border); padding:12px 14px; }
#er-root .er-tile .n { font-size:var(--t-h2); font-weight:700; color:var(--accent); }
#er-root .er-tile .l { font-size:var(--t-meta); color:var(--muted2); margin-top:2px; }
#er-root .er-tile .s { font-size:var(--t-meta); color:var(--muted); margin-top:5px; }

/* ── Paneler och tabeller ── */
#er-root .er-panel { background:var(--surface); border:1px solid var(--border); overflow:hidden; margin-bottom:14px; }
#er-root .er-phead { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); }
#er-root .er-phead h3 { margin:0; font-size:var(--t-liten); font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
#er-root .er-wrap { overflow-x:auto; }
#er-root table.er { border-collapse:collapse; width:100%; font-size:var(--t-liten); }
#er-root table.er th, #er-root table.er td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
#er-root table.er th { font-size:var(--t-meta); letter-spacing:.5px; text-transform:uppercase; color:var(--muted2); cursor:pointer; background:var(--surface2); }
#er-root table.er td.num, #er-root table.er th.num { text-align:right; font-variant-numeric:tabular-nums; }
#er-root table.er tbody tr:hover { background:var(--surface2); }
#er-root table.er tbody tr.clk { cursor:pointer; }
#er-root table.er tr:last-child td { border-bottom:none; }
/* Accentkanten sitter på panelrubriker (quiznamn i elevvyn). Tabellcellerna
   fick den förut också, vilket ritade en blå linje för varje quizkolumn. */
#er-root .er-q { border-left:3px solid var(--accent); }
#er-root table.er .er-q { border-left:0; }
#er-root .btn[disabled] { opacity:.4; cursor:default; }
#er-root .er-pill { display:inline-block; padding:2px 8px; font-size:var(--t-meta); font-weight:600; }
#er-root .er-ok { background:var(--correct-dim,rgba(19,115,51,.14)); color:var(--correct); }
#er-root .er-amber { background:var(--surface2); color:var(--muted); }
#er-root .er-fel { background:var(--wrong-dim,rgba(179,38,30,.12)); color:var(--wrong,#b3261e); }
#er-root .er-kolhdr { cursor:pointer; user-select:none; }
#er-root .er-kolhdr:hover { text-decoration:underline; }
#er-root .er-iainfo { padding:10px 14px; border-top:1px solid var(--border); font-size:var(--t-liten); line-height:1.6; }
#er-root .er-sumrad td { border-top:2px solid var(--border); font-weight:600; color:var(--muted); }
#er-root .er-bar { height:6px; background:var(--surface2); min-width:52px; display:inline-block; vertical-align:middle; margin-left:6px; overflow:hidden; }
#er-root .er-bar > i { display:block; height:100%; background:var(--correct); }
#er-root .er-check { color:var(--correct); font-weight:700; margin-left:4px; }
#er-root .er-dash { color:var(--muted2); }
#er-root .er-empty { padding:30px; text-align:center; color:var(--muted2); }
#er-root .er-legend { padding:10px 14px; border-top:1px solid var(--border); font-size:var(--t-liten); color:var(--muted); background:var(--surface2); line-height:1.6; }
#er-root .er-legend b { color:var(--text); }
#er-root .er-legend .er-legtext { margin-top:8px; }
#er-root .er-fgrid { display:flex; flex-wrap:wrap; gap:6px; }
#er-root .er-cell { min-width:38px; text-align:center; border:1px solid var(--border); padding:5px 6px; }
#er-root .er-phead.klick { cursor:pointer; user-select:none; }
#er-root .er-phead .er-chev { color:var(--muted2); font-size:var(--t-meta); margin-left:8px; }
#er-root .er-phead .er-hnot { font-size:var(--t-liten); color:var(--muted); }
#er-root .er-phead-v { justify-content:flex-start; }
#er-root .er-phead-v .er-hnot { margin-left:auto; }
#er-root .er-phead-v .er-knappar { margin-left:0; flex-wrap:nowrap; }
#er-root .er-klick { cursor:pointer; }
#er-root .er-arkmark { opacity:.55; }

/* ── Uppföljning ── */
#er-root .er-avv-body { padding:8px 14px; }
#er-root .er-avv { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--border); cursor:pointer; }
#er-root .er-avv:last-child { border-bottom:0; }
#er-root .er-avv:hover { background:var(--surface2); }
#er-root .er-avv-namn { flex:0 0 170px; font-size:var(--t-liten); font-weight:600; color:var(--text); }
#er-root .er-avv-chips { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
#er-root .er-dagval { font-size:var(--t-liten); padding:4px 8px; max-width:260px; width:auto; }

/* ── Elevvyn ── */
#er-root .er-elevrad { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
#er-root .er-elevrad .er-stor { font-size:var(--t-h3); font-weight:700; margin:0 6px; }
#er-root .er-elevrad .er-rakna { font-size:var(--t-liten); color:var(--muted2); }
#er-root .er-elevrad .er-hantera { margin-left:auto; }
#er-root .er-skrivknapp {
  font:inherit; font-size:var(--t-meta); font-weight:600; padding:4px 10px; border:1px solid var(--border);
  background:none; color:var(--text); cursor:pointer;
}
#er-root .er-skrivknapp:hover { border-color:var(--text); }

/* ── Moment till kurs ── */
#er-root .er-mk { padding:4px 14px 10px; }
#er-root .er-mk-grupp { font-size:var(--t-meta); letter-spacing:1px; text-transform:uppercase; color:var(--muted2); margin:10px 0 2px; }
#er-root .er-mk-rad { display:grid; grid-template-columns:auto minmax(0,1fr) 230px; align-items:center; gap:14px; padding:6px 0; border-bottom:1px solid var(--border); }
#er-root .er-mk-box { width:16px; height:16px; margin:0 2px; cursor:pointer; }
#er-root .er-mk-box:disabled { opacity:.35; cursor:default; }
#er-root .er-mk-verk { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 0 4px; font-size:var(--t-liten); }
#er-root .er-mk-alla { display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--muted); margin-right:4px; }
#er-root .er-mk-alla input { width:16px; height:16px; margin:0; }
#er-root .er-mk-kurs { font-size:var(--t-liten); color:var(--muted); }
#er-root .er-mk-antal { font-size:var(--t-liten); color:var(--muted2); white-space:nowrap; }
#er-root .er-pk-rad { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 14px; font-size:var(--t-liten); }
#er-root .er-mk-rad:last-child { border-bottom:0; }
#er-root .er-mk-namn { min-width:0; font-size:var(--t-liten); line-height:1.35; }
#er-root .er-mk-nyckel { display:block; font-size:var(--t-meta); color:var(--muted2); overflow-wrap:anywhere; }
#er-root .er-mk-rad select { width:100%; }

/* ── Kopplingsbygge och interaktiva ── */
#er-root .er-kb-hdr { padding:10px 14px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#er-root .er-felknapp { font:inherit; font-size:var(--t-meta); padding:1px 8px; border:1px solid var(--border); background:var(--surface2); color:var(--text); cursor:pointer; }
#er-root .er-fellista { margin-top:6px; font-size:var(--t-liten); color:var(--muted); line-height:1.5; }
#er-root .er-stamplar { display:flex; gap:4px; flex-wrap:wrap; }

/* ── Små knappar i rubriker och tabellrader (Arkivera, Radera, Återställ) ── */
#er-root .er-verk { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
#er-root .er-mini {
  font:inherit; font-size:var(--t-meta); font-weight:600; padding:3px 10px; border:1px solid var(--border);
  background:none; color:var(--muted2); cursor:pointer; white-space:nowrap;
}
#er-root .er-mini:hover { color:var(--text); border-color:var(--text); }
#er-root .er-mini:disabled { opacity:.4; cursor:default; }
#er-root .er-mini.fara:hover { color:var(--wrong,#c0392b); border-color:var(--wrong,#c0392b); }

@media (max-width:640px) {
  #er-root .er-mk-rad { grid-template-columns:auto 1fr; }
  #er-root .er-mk-rad select, #er-root .er-mk-rad .er-mk-kurs { grid-column:2; }
  #er-root .er-f-moment select { min-width:100%; }
  #er-root .er-val-hoger { margin-left:0; }
  #er-root .er-avv { flex-wrap:wrap; }
  #er-root .er-avv-namn { flex-basis:100%; }
}

/* Utskrift: bara resultatet, inga väljare. */
@media print {
  #er-root .er-val, #er-root .er-knappar, #er-root .er-panelrad { display:none !important; }
  /* Frågematrisen på papper: varken en fryst kolumn eller vågrät rullning
     finns där, så tabellen måste få sin fulla bredd och mindre text. Utan
     det här skrivs bara de kolumner ut som råkade synas på skärmen. */
  #er-root .er-wrap { overflow:visible !important; }
  #er-root table.er-fmatris .er-f-elev { position:static !important; }
  #er-root table.er-fmatris th,
  #er-root table.er-fmatris td { padding:3px 4px; font-size:9pt; }
  #er-root table.er-fmatris tr { break-inside:avoid; }
  #er-root .er-flegend { font-size:8pt; }
}

/* ── Bekräftelserutan (läggs direkt på body, utanför #er-root) ── */
.er-bak { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px; }
.er-kort {
  background:var(--surface,#fff); color:var(--text,#111); border:1px solid var(--border,#ccc);
  max-width:540px; width:100%; max-height:86vh; overflow:auto; padding:22px 24px;
  font:inherit; box-shadow:0 18px 50px rgba(0,0,0,.3);
}
.er-kort h3 { margin:0 0 10px; font-size:var(--t-h3); }
.er-kort .lista { font-size:var(--t-liten); line-height:1.65; margin:0 0 14px; padding-left:18px; }
.er-kort .lista.utan { list-style:none; padding-left:0; }
.er-kort .varning { border-left:3px solid var(--wrong,#c0392b); padding:8px 12px; background:var(--wrong-dim,rgba(231,76,60,.10)); font-size:var(--t-liten); line-height:1.55; margin-bottom:14px; }
.er-kort .namnfalt { width:100%; padding:8px 10px; font:inherit; font-size:var(--t-liten); border:1px solid var(--border,#ccc); background:var(--surface2,#f6f6f6); color:var(--text,#111); margin-bottom:14px; }
.er-kort .rad { display:flex; gap:8px; justify-content:flex-end; }
.er-kort button { font:inherit; font-size:var(--t-liten); font-weight:600; padding:7px 15px; border:1px solid var(--border,#ccc); background:none; color:var(--text,#111); cursor:pointer; }
.er-kort button:hover { border-color:var(--text,#111); }
.er-kort button.fara { background:var(--wrong,#c0392b); border-color:var(--wrong,#c0392b); color:var(--on-wrong); }
.er-kort button[disabled] { opacity:.45; cursor:not-allowed; }

/* ── FRÅGA FÖR FRÅGA ─────────────────────────────────────
   Tjugo frågekolumner får inte plats i normal tabellbredd. Cellerna blir
   smala och sifferta, elevnamnet fryses i vilan till vänster så att man vet
   vems rad man läser när man scrollar i sidled.

   Samma fyra betydelser som på elevkortet: rätt, fel, delpoäng och en
   skrivfråga som väntar på rättning. Den sista är varken rätt eller fel och
   får därför varningsfärgen, inte rött — det är läraren som inte gjort
   något än, inte eleven. */
#er-root table.er-fmatris th,
#er-root table.er-fmatris td { padding:7px 6px; }
#er-root table.er-fmatris th.er-f-kol { min-width:34px; text-align:center; cursor:default; }
#er-root table.er-fmatris td.num { text-align:center; font-variant-numeric:tabular-nums; }
#er-root .er-f-max { display:block; font-size:var(--t-meta); color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; }

#er-root table.er-fmatris .er-f-elev {
  position:sticky; left:0; z-index:1; background:var(--surface);
  text-align:left; font-weight:500; min-width:120px;
}
#er-root table.er-fmatris th.er-f-elev { background:var(--surface2); }
#er-root table.er-fmatris tbody tr:hover .er-f-elev { background:var(--surface2); }
#er-root table.er-fmatris .er-f-tot { font-weight:700; white-space:nowrap; }

#er-root .er-f-ratt   { color:var(--correct); }
#er-root .er-f-fel    { color:var(--wrong); }
#er-root .er-f-del    { color:var(--warn); }
#er-root .er-f-vantar { color:var(--warn); font-weight:700; }
#er-root .er-f-ingen  { color:var(--muted); }

/* Vilken fråga är F7. Utan den raden är matrisen bara ett rutnät. */
#er-root .er-flegend {
  padding:10px 14px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:4px 18px;
}
#er-root .er-flegend-post { font-size:var(--t-meta); color:var(--muted2); }
#er-root .er-flegend-post b { color:var(--muted); font-family:'JetBrains Mono', monospace; font-weight:600; }
#er-root .er-flegend-post i { color:var(--muted); font-style:normal; }

/* Tomt tillstånd i fliken Bibliotek. Säger vad som behöver väljas, inte
   bara att det är tomt — designsystemets avsnitt 9. Vyn i övrigt ritas av
   bibliotek-admin.js och bär sin stil i bibliotek-admin.css. */
#er-root .er-tom {
  padding: 40px 20px; text-align: center;
  font-size: var(--t-liten); color: var(--muted2);
}