/* ═══════════════════════════════════════════════════════════════
   amne-farg.css – Thevin
   Ljus bakgrundston på ämnesrubrikerna i quizlistan.

   ÅTTA NAMN, TVÅ UPPSÄTTNINGAR. En pastell som är precis lagom mot
   vitt blir bländande mot mörkt, så varje färg har en ljus och en
   mörk variant. :root är mörkt läge, .light är ljust – samma
   uppdelning som global.css.

   Tonerna är avsiktligt svaga: rubriken ska gå att känna igen på
   håll, inte ta över listan. Texten lämnas som den är, så att
   kontrasten mot bakgrunden aldrig blir sämre än den var.
   ═══════════════════════════════════════════════════════════════ */

/* ── Mörkt läge: svaga toner som inte lyser ────────────────── */
.subject-header.amne-farg-bla     { background:rgba(91,127,255,0.14); }
.subject-header.amne-farg-turkos  { background:rgba(26,188,196,0.14); }
.subject-header.amne-farg-gron    { background:rgba(46,204,113,0.13); }
.subject-header.amne-farg-gul     { background:rgba(241,196,15,0.14); }
.subject-header.amne-farg-orange  { background:rgba(230,126,34,0.14); }
.subject-header.amne-farg-rod     { background:rgba(231,76,60,0.13); }
.subject-header.amne-farg-lila    { background:rgba(155,89,182,0.16); }
.subject-header.amne-farg-grafit  { background:rgba(140,148,175,0.14); }

/* ── Ljust läge: pasteller ─────────────────────────────────── */
body.light .subject-header.amne-farg-bla     { background:#e8eeff; }
body.light .subject-header.amne-farg-turkos  { background:#e0f5f6; }
body.light .subject-header.amne-farg-gron    { background:#e4f7ec; }
body.light .subject-header.amne-farg-gul     { background:#fdf4d9; }
body.light .subject-header.amne-farg-orange  { background:#fdeede; }
body.light .subject-header.amne-farg-rod     { background:#fdeae8; }
body.light .subject-header.amne-farg-lila    { background:#f2e9f8; }
body.light .subject-header.amne-farg-grafit  { background:#eceef3; }

/* Hover ska fortfarande kännas, även på en färgad rubrik. */
.subject-header[class*="amne-farg-"]:hover { filter:brightness(1.06); }
body.light .subject-header[class*="amne-farg-"]:hover { filter:brightness(0.97); }

/* ── Knappen i rubriken ────────────────────────────────────── */
.subject-header-right { display:flex; align-items:center; gap:10px; }

.amne-fargknapp {
  width:14px; height:14px; flex-shrink:0; cursor:pointer;
  border:1px solid var(--border); border-radius:50%;
  background:var(--surface2); padding:0;
  opacity:0; transition:opacity 0.12s;
}
/* Syns vid hover, som draghandtaget på quizraderna. En satt färg
   syns alltid – annars går den inte att hitta igen för att ändra. */
.subject-header:hover .amne-fargknapp { opacity:1; }
.amne-fargknapp[class*="amne-farg-"]  { opacity:1; border-color:var(--muted2); }

.amne-fargknapp.amne-farg-bla     { background:#5b7fff; }
.amne-fargknapp.amne-farg-turkos  { background:#1abcc4; }
.amne-fargknapp.amne-farg-gron    { background:#2ecc71; }
.amne-fargknapp.amne-farg-gul     { background:#f1c40f; }
.amne-fargknapp.amne-farg-orange  { background:#e67e22; }
.amne-fargknapp.amne-farg-rod     { background:#e74c3c; }
.amne-fargknapp.amne-farg-lila    { background:#9b59b6; }
.amne-fargknapp.amne-farg-grafit  { background:#8c94af; }

/* ── Paletten ──────────────────────────────────────────────── */
.amne-palett {
  position:absolute; z-index:900;
  display:flex; gap:6px; padding:8px;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,0.28);
}
.amne-palettval {
  width:20px; height:20px; flex-shrink:0; cursor:pointer; padding:0;
  border:1px solid var(--border); border-radius:50%;
  transition:transform 0.1s;
}
.amne-palettval:hover { transform:scale(1.18); }

.amne-palettval.amne-farg-bla     { background:#5b7fff; }
.amne-palettval.amne-farg-turkos  { background:#1abcc4; }
.amne-palettval.amne-farg-gron    { background:#2ecc71; }
.amne-palettval.amne-farg-gul     { background:#f1c40f; }
.amne-palettval.amne-farg-orange  { background:#e67e22; }
.amne-palettval.amne-farg-rod     { background:#e74c3c; }
.amne-palettval.amne-farg-lila    { background:#9b59b6; }
.amne-palettval.amne-farg-grafit  { background:#8c94af; }

.amne-palett-ingen {
  background:none; color:var(--muted2); font-size:var(--t-meta); line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.amne-palett-ingen:hover { color:var(--text); }

/* ── Kursfärgen på sessioner och resultat ──────────────────────
   En vänsterkant, inte en bakgrund. Raderna i Sessioner och korten
   i Resultat bär redan märken, rumskod och datum — en färgad yta
   till hade gjort listan grötig. Kanten räcker för att handen ska
   hitta rätt kurs innan ögat har läst rubriken.

   Samma heltonade värden som färgknappen, inte pastellerna: en
   kant på två pixlar i en svag ton syns inte alls. Värdet är
   detsamma i båda teman — en mättad linje fungerar mot både mörkt
   och ljust, till skillnad från en fylld yta.

   Ett ämne utan satt färg får ingen klass och behåller därmed sin
   vanliga kant. Aldrig en slumpfärg. */
.session-active[class*="amne-farg-"],
.resultat-kort[class*="amne-farg-"] { border-left:2px solid var(--border); }

.session-active.amne-farg-bla,     .resultat-kort.amne-farg-bla     { border-left-color:#5b7fff; }
.session-active.amne-farg-turkos,  .resultat-kort.amne-farg-turkos  { border-left-color:#1abcc4; }
.session-active.amne-farg-gron,    .resultat-kort.amne-farg-gron    { border-left-color:#2ecc71; }
.session-active.amne-farg-gul,     .resultat-kort.amne-farg-gul     { border-left-color:#f1c40f; }
.session-active.amne-farg-orange,  .resultat-kort.amne-farg-orange  { border-left-color:#e67e22; }
.session-active.amne-farg-rod,     .resultat-kort.amne-farg-rod     { border-left-color:#e74c3c; }
.session-active.amne-farg-lila,    .resultat-kort.amne-farg-lila    { border-left-color:#9b59b6; }
.session-active.amne-farg-grafit,  .resultat-kort.amne-farg-grafit  { border-left-color:#8c94af; }