/* =========================================================================
   chefssida.css — chefens sida för kartläggningen. Bygger på diploma.css
   (färger, Mollen, knappar). Trafikljusets färger är Stefans, som på den
   sparade länk-chefssidan i mall-kartlaggning. Bara ljust tema, som
   resten av kursen. (Anton 2026-10-16)

   Färgerna: ett mjukt trafikljus nära Diplomas grafiska profil (v3,
   2026-01). Gult finns inte i profilen och får aldrig användas, så mitten
   är orange. Röd = hallonröd (öva först), orange (behöver öva), grön =
   turkosgrön (klarar). Rutor och celler har ljusa fält med mörk text i
   samma färg och en kant i den starka färgen; staplar, prickar och
   markeringar har den starka färgen. Texten har kontrast runt 7:1.
   (Anton 2026-10-16: först profilens accentfärger, sedan "kör mer
   trafikljus men mer likt vårt tema", variant C "Mjuk")
   ========================================================================= */

:root {
  --niva-forst: #df516e;        /* hallonröd */
  --niva-forst-ljus: #fbdde3;
  --niva-forst-text: #8c1d36;
  --niva-ova: #f39c5a;          /* orange, i stället för gult */
  --niva-ova-ljus: #fde3cf;
  --niva-ova-text: #7a3a0c;
  --niva-klarar: #63c9a8;       /* turkosgrön */
  --niva-klarar-ljus: #d6f2e8;
  --niva-klarar-text: #145c46;
  --linje: var(--dip-lavendel);
  --linje-stark: #c9c5e6;     /* profilens dämpade lavendel */
  color-scheme: light;
}

html, body { height: auto; }
body.cs { background: var(--dip-offwhite); color: var(--text); }

.cs__sida {
  max-width: 64rem;
  margin: 0 auto;
  padding-block: 1.5rem 3rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.cs__topp {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--linje);
}
.cs__logo { height: 26px; width: auto; }
.cs__kurs { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); text-align: right; }
.cs__kicker { margin: 0; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dip-blue); }
.cs__rubrik { margin: 0.2rem 0 0.4rem; font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--text-strong); text-wrap: balance; }
.cs__ingress { margin: 0 0 1.4rem; max-width: 42rem; color: var(--text-muted); line-height: 1.5; }
.cs__del { margin: 0 0 2rem; }
.cs__delrubrik { margin: 0 0 0.3rem; font-size: 1.2rem; color: var(--text-strong); }
.cs__underrubrik { margin: 1.2rem 0 0.5rem; font-size: 1rem; color: var(--text-strong); }
.cs__deltext { margin: 0 0 0.8rem; max-width: 42rem; color: var(--text-muted); }
.cs__deltext--liten { margin-top: 0.6rem; font-size: 0.88rem; }
.cs__not { margin-top: 2rem; padding-top: 0.8rem; border-top: 2px solid var(--linje); color: var(--text-muted); font-size: 0.85rem; max-width: 46rem; }
.cs__tillbaka { display: inline-block; margin: 0 0 1rem; font-weight: 700; color: var(--dip-blue); }
.cs__tillbaka::before { content: "‹ "; }
.cs__hanvisning {
  margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: 12px;
  background: var(--dip-lavendel); color: var(--text-strong); font-weight: 600;
}
.cs-dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, .dip-btn:focus-visible, summary:focus-visible, select:focus-visible, label.dip-btn:focus-visible {
  outline: 3px solid var(--dip-blue); outline-offset: 2px;
}

/* ---- Släppytan ------------------------------------------------------ */
.cs-zon {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.2rem;
  margin: 0 0 1rem; padding: 1.6rem 1.4rem;
  background: #fff;
  border: 2px dashed var(--linje-stark); border-radius: 18px;
}
.cs-zon--kompakt { padding: 0.9rem 1.1rem; }
.cs--drar .cs-zon { border-color: var(--dip-blue); background: var(--dip-lavendel); }
.cs-zon__ikon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dip-lavendel); color: var(--dip-blue);
}
.cs-zon--kompakt .cs-zon__ikon { width: 40px; height: 40px; }
.cs-zon__ikon svg { width: 26px; height: 26px; }
.cs-zon--kompakt .cs-zon__ikon svg { width: 20px; height: 20px; }
.cs-zon__text { flex: 1 1 14rem; min-width: 0; }
.cs-zon__rubrik { margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--text-strong); }
.cs-zon--kompakt .cs-zon__rubrik { font-size: 1rem; }
.cs-zon__hjalp { margin: 0.15rem 0 0; color: var(--text-muted); }
.cs-zon__knappar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-zon--kompakt .dip-btn { padding: 0.55em 1.3em; font-size: 0.95rem; }
.cs-zon__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- Filerna -------------------------------------------------------- */
.cs-filstatus { margin: 0 0 1.4rem; }
.cs-filstatus__rad { margin: 0 0 0.3rem; min-height: 1.2em; color: var(--text-muted); }
.cs-filer__knapp { cursor: pointer; font-weight: 700; color: var(--dip-blue); width: fit-content; }
.cs-filer__lista { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0; background: #fff; border: 2px solid var(--linje); border-radius: 14px; overflow: hidden; }
.cs-fil { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.6rem 0.5rem 0.9rem; }
.cs-fil + .cs-fil { border-top: 1px solid var(--linje); }
.cs-fil__text { flex: 1; min-width: 0; display: grid; }
.cs-fil__namn { font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; font-size: 0.92rem; }
.cs-fil__vad { color: var(--text-muted); font-size: 0.88rem; }
.cs-fil--fel .cs-fil__vad { color: var(--text-strong); font-weight: 700; }
.cs-fil--fel { box-shadow: inset 4px 0 0 var(--niva-forst); }
.cs-fil--dubblett .cs-fil__vad, .cs-fil--ersatt .cs-fil__vad { color: var(--text-muted); font-style: italic; }
.cs-fil__bort, .cs-filer__tom { padding: 0.4em 1em; font-size: 0.88rem; flex: none; }
.cs-filer__tom { margin-top: 0.6rem; }

/* ---- Filtret och siffrorna ------------------------------------------ */
.cs-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.7rem; margin: 0 0 1rem; }
.cs-filter__etikett { font-weight: 700; color: var(--text-strong); }
.cs-filter__val {
  font: inherit; color: var(--text-strong);
  padding: 0.45rem 0.8rem; border: 2px solid var(--linje-stark); border-radius: 12px; background: #fff;
  max-width: 100%;
}
.cs-siffror { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.8rem; }
.cs-siffra { background: #fff; border: 2px solid var(--linje); border-radius: 14px; padding: 0.6rem 1rem; min-width: 6.5rem; }
.cs-siffra b { display: block; font-size: 1.4rem; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cs-siffra span { color: var(--text-muted); font-size: 0.9rem; }

/* ---- Tabellen över medarbetarna ------------------------------------- */
.cs-tabell { overflow-x: auto; border: 2px solid var(--linje); border-radius: 14px; background: #fff; }
.cs-tabell table { border-collapse: separate; border-spacing: 3px; font-size: 0.85rem; }
.cs-tabell th { font-weight: 700; color: var(--text-strong); padding: 0.2rem; text-align: center; }
.cs-tabell__nr, .cs-tabell__vikt { display: block; font-variant-numeric: tabular-nums; }
.cs-tabell__vikt { font-weight: 600; color: var(--text-muted); font-size: 0.75rem; }
.cs-tabell .cs-tabell__namn { text-align: left; white-space: nowrap; padding: 0.2rem 0.6rem 0.2rem 0.4rem; position: sticky; left: 0; background: #fff; z-index: 1; }
.cs-tabell__namn a { color: var(--dip-blue); }
.cs-tabell .cs-tabell__plats th {
  text-align: left; padding: 0.7rem 0.4rem 0.2rem;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  position: sticky; left: 0;
}
.cs-tabell__flagga {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--dip-lavendel); color: var(--text-strong); font-size: 0.72rem; font-weight: 800;
}
.cs-cell {
  min-width: 2rem; height: 2rem; text-align: center; font-weight: 800; border-radius: 6px; color: #fff;
  font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cs-cell--green { background: var(--niva-klarar-ljus); color: var(--niva-klarar-text); box-shadow: inset 0 0 0 1.5px var(--niva-klarar); }
.cs-cell--yellow { background: var(--niva-ova-ljus); color: var(--niva-ova-text); box-shadow: inset 0 0 0 1.5px var(--niva-ova); }
.cs-cell--red { background: var(--niva-forst-ljus); color: var(--niva-forst-text); box-shadow: inset 0 0 0 1.5px var(--niva-forst); }
.cs-cell--saknas { background: var(--linje); color: var(--text-muted); }

.cs-forklaring { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; color: var(--text-muted); font-size: 0.9rem; }
.cs-forklaring li { display: flex; align-items: center; gap: 0.4rem; }
.cs-prick { width: 0.85rem; height: 0.85rem; border-radius: 4px; flex: none; }
.cs-prick--green { background: var(--niva-klarar); }
.cs-prick--yellow { background: var(--niva-ova); }
.cs-prick--red { background: var(--niva-forst); }

/* ---- En medarbetare ------------------------------------------------- */
.cs-rutor { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.cs-ruta {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 5rem; padding: 0.6rem 0.7rem; border-radius: 12px; color: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cs-ruta--green { background: var(--niva-klarar-ljus); color: var(--niva-klarar-text); box-shadow: inset 0 0 0 2px var(--niva-klarar); }
.cs-ruta--yellow { background: var(--niva-ova-ljus); color: var(--niva-ova-text); box-shadow: inset 0 0 0 2px var(--niva-ova); }
.cs-ruta--red { background: var(--niva-forst-ljus); color: var(--niva-forst-text); box-shadow: inset 0 0 0 2px var(--niva-forst); }
.cs-ruta__namn { font-weight: 800; font-size: 0.9rem; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.cs-ruta__antal { font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .cs-rutor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .dip-btn { transition: none; }
}
.cs__rubrik--person { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.cs__hem { display: inline-flex; border-radius: 6px; }
.cs__hem:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 3px; }
.cs-meddelande { margin: 0 0 0.8rem; min-height: 0; font-weight: 700; color: var(--dip-blue); }
.cs-meddelande:empty { display: none; }
button.cs-siffra { font: inherit; text-align: left; cursor: pointer; }
button.cs-siffra:hover { border-color: var(--linje-stark); }
.cs-flagga {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--dip-lavendel); color: var(--text-strong); font-size: 0.72rem; font-weight: 800; white-space: nowrap;
}
.cs__not p { margin: 0 0 0.5rem; }

/* ---- Medarbetarlistan ----------------------------------------------- */
.cs-verktyg { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.6rem; }
.cs-verktyg__sok {
  flex: 1 1 14rem; min-width: 0;
  font: inherit; color: var(--text-strong);
  padding: 0.5rem 0.8rem; border: 2px solid var(--linje-stark); border-radius: 12px; background: #fff;
}
.cs-verktyg__sok:focus-visible, .cs-filter__val:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 1px; }
.cs-traffar { margin: 0 0 0.4rem; color: var(--text-muted); font-size: 0.9rem; }
.cs-fler { margin-top: 0.8rem; }
.cs-valbara { list-style: none; margin: 0; padding: 0; background: #fff; border: 2px solid var(--linje); border-radius: 14px; overflow: hidden; }
.cs-valbar { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.8rem; }
.cs-valbar + .cs-valbar { border-top: 1px solid var(--linje); }
.cs-valbar__ruta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.cs-valbar--fick .cs-valbar__ruta { cursor: default; }
.cs-valbar__cell { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; }
.cs-valbar__text { min-width: 0; display: grid; }
.cs-valbar__namn { font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; }
.cs-valbar__plats { font-size: 0.85rem; color: var(--text-muted); }
.cs-valbar--fick .cs-valbar__plats { color: var(--dip-blue); font-weight: 700; }
.cs-valbar__visa { font-weight: 700; color: var(--dip-blue); font-size: 0.9rem; }
.cs-valbar__angra { padding: 0.35em 0.9em; font-size: 0.85rem; }
.cs-kopiera { width: 100%; min-height: 5rem; margin-top: 0.4rem; font: inherit; font-size: 0.85rem; padding: 0.6rem; border: 2px solid var(--linje-stark); border-radius: 12px; }

/* ---- Ladda ner som Excel (2026-10-16) ------------------------------- */
.cs-export { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin: -0.8rem 0 2rem; }
.cs-export__knapp { padding: 0.6em 1.4em; }
.cs-export__hjalp { margin: 0; color: var(--text-muted); font-size: 0.9rem; flex: 1 1 16rem; }
.cs-export__status { margin: 0; flex-basis: 100%; color: var(--dip-blue); font-weight: 700; min-height: 0; }
.cs-export__status:empty { display: none; }

/* ---- Så gör du, personallistan och vanliga frågor (2026-10-16) ------ */

.cs-personalrad { margin: -0.6rem 0 1.4rem; }
.cs-personalrad__lank { font-weight: 700; color: var(--dip-blue); }
.cs-personalrad--saknas .cs-personalrad__lank::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 3px; margin-right: 0.45rem; background: var(--niva-forst); }
.cs-personalrad--klar .cs-personalrad__lank::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 3px; margin-right: 0.45rem; background: var(--niva-klarar); }

.cs-personal { margin: 0 0 1.4rem; }
.cs-personal .cs-filter__etikett { display: block; margin-bottom: 0.3rem; }
.cs-personal__falt {
  width: 100%; font: inherit; font-size: 0.92rem; color: var(--text-strong);
  padding: 0.6rem 0.8rem; border: 2px solid var(--linje-stark); border-radius: 12px; background: #fff; resize: vertical;
}
.cs-personal__falt:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 1px; }
.cs-personal__knappar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.cs-filer + .cs-filer { margin-top: 0.8rem; }

.cs-fragor { max-width: 46rem; }
.cs-fraga-svar { border-top: 1px solid var(--linje); }
.cs-fraga-svar:last-child { border-bottom: 1px solid var(--linje); }
.cs-fraga-svar summary { cursor: pointer; padding: 0.7rem 0; font-weight: 700; color: var(--text-strong); }
.cs-fraga-svar summary:hover { color: var(--dip-blue); }
.cs-fraga-svar p { margin: 0 0 0.9rem; color: var(--text); line-height: 1.5; }

/* ---- Säkerhetsfrågor och hur resultatet ska läsas (Stefans granskning, 2026-10-19) */
.cs-flagga--sakerhet { background: var(--niva-forst-ljus); color: var(--niva-forst-text); box-shadow: inset 0 0 0 1.5px var(--niva-forst); }
.cs-ruta__sakerhet { display: inline-block; align-self: flex-start; margin-top: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: #fff; color: var(--niva-forst-text); font-size: 0.7rem; font-weight: 800; }
.cs__hanvisning--sakerhet { background: var(--niva-forst-ljus); color: var(--niva-forst-text); box-shadow: inset 4px 0 0 var(--niva-forst); margin-bottom: 1rem; }
.cs-lankknapp { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--dip-blue); text-decoration: underline; cursor: pointer; }
.cs-lankknapp:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 2px; }

/* Mobilen: stegnamnen blir för trånga, så bara siffrorna syns; det valda
   stegets namn står i rutan under. */

/* ---- Stefans granskning av chefssidan (2026-10-20) ------------------ */
.cs-flagga--andrad { background: var(--dip-lavendel); color: var(--dip-morklila); box-shadow: inset 0 0 0 1.5px var(--dip-blue); }
.cs-fil--andrad { box-shadow: inset 4px 0 0 var(--niva-ova); }
.cs-fil--andrad .cs-fil__vad { color: var(--niva-ova-text); font-weight: 600; }

/* ---- Läget i korthet och rundturen (2026-10-20) --------------------- */
.cs__rubrikrad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin: 0.2rem 0 0.8rem; }
.cs__rubrikrad .cs__rubrik { margin: 0; }
.cs-tur-start {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5em 1.1em 0.5em 0.6em; border: 2px solid var(--linje-stark); border-radius: 999px;
  background: #fff; color: var(--dip-blue); font: inherit; font-weight: 800; font-size: 0.92rem; cursor: pointer;
}
.cs-tur-start svg { width: 1.5rem; height: 1.5rem; color: var(--dip-blue); }
.cs-tur-start:hover { border-color: var(--dip-blue); }
.cs-tur-start:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 2px; }

/* Rundturen: markerad del med resten nedtonad, och en förklaringsruta. */
.cs-tur__ram {
  position: fixed; z-index: 900; pointer-events: none;
  border-radius: 16px; outline: 3px solid #fff;
  box-shadow: 0 0 0 9999px rgba(43, 37, 81, 0.55);
  transition: all 0.2s ease;
}
.cs-tur__ram--hel { inset: 0; outline: 0; border-radius: 0; box-shadow: none; background: rgba(43, 37, 81, 0.55); }
.cs-tur__kort {
  position: fixed; z-index: 901; width: min(24rem, calc(100vw - 32px));
  padding: 1rem 1.1rem 0.9rem; background: #fff; border-radius: 16px;
  box-shadow: 0 16px 40px rgba(43, 37, 81, 0.3);
}
.cs-tur__kort--botten { left: 50% !important; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
.cs-tur__ram--hel + .cs-tur__kort--botten { bottom: auto; top: 50% !important; transform: translate(-50%, -50%); }
.cs-tur__nr { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dip-blue); }
.cs-tur__rubrik { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--text-strong); }
.cs-tur__text { margin: 0; color: var(--text); line-height: 1.5; font-size: 0.95rem; }
.cs-tur__rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.9rem; }
.cs-tur__hoger { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.cs-tur__knapp { padding: 0.5em 1.2em; font-size: 0.92rem; }
.cs-tur__avsluta { font-size: 0.9rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .cs-tur__ram { transition: none; } }

/* Sök och ordning med synliga etiketter */
.cs-verktyg { align-items: flex-end; gap: 0.6rem; }
.cs-verktyg__falt { display: grid; gap: 0.2rem; }
.cs-verktyg__falt--sok { flex: 1 1 16rem; }
.cs-verktyg__etikett { font-weight: 700; font-size: 0.85rem; color: var(--text-strong); }
.cs-verktyg__falt .cs-verktyg__sok { width: 100%; }
.cs-traffar { margin: 0.2rem 0 0.5rem; }
.cs-tomt { margin: 0.4rem 0 0; padding: 1rem; border-radius: 12px; background: #fff; border: 2px dashed var(--linje-stark); color: var(--text-strong); }
.cs-etikett { padding: 0.12rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.cs-etikett--red { background: var(--niva-forst-ljus); color: var(--niva-forst-text); box-shadow: inset 0 0 0 1.5px var(--niva-forst); }
.cs-etikett--yellow { background: var(--niva-ova-ljus); color: var(--niva-ova-text); box-shadow: inset 0 0 0 1.5px var(--niva-ova); }
.cs-etikett--green { background: var(--niva-klarar-ljus); color: var(--niva-klarar-text); }

.cs-fragor__fler { margin-top: 0.8rem; }

/* ---- Flikarna och korten på översikten (Anton 2026-10-20) ------------ */
.cs-flikar {
  display: flex; gap: 0.25rem; margin: 0 0 1.4rem;
  border-bottom: 2px solid var(--linje-stark);
  overflow-x: auto; scrollbar-width: none;
}
.cs-flikar::-webkit-scrollbar { display: none; }
.cs-flikar__flik {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto;
  padding: 0.7rem 1rem 0.65rem; margin-bottom: -2px;
  border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0;
  color: var(--dip-morklila); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.cs-flikar__flik:hover { background: var(--dip-lavendel); }
.cs-flikar__flik:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: -3px; }
.cs-flikar__flik--vald { color: var(--dip-blue); border-bottom-color: var(--dip-blue); font-weight: 800; }
.cs-flikar__antal {
  min-width: 1.6em; padding: 0.05em 0.45em; border-radius: 999px;
  background: var(--dip-lavendel); color: var(--dip-blue); font-size: 0.8rem; font-weight: 800; text-align: center;
}
.cs-flikar__flik--vald .cs-flikar__antal { background: var(--dip-blue); color: #fff; }

@media (max-width: 640px) {
  .cs-flikar { gap: 0; }
  .cs-flikar__flik { flex: 1 1 auto; justify-content: center; gap: 0.3rem; padding: 0.65rem 0.45rem 0.6rem; font-size: 0.92rem; }
  .cs-flikar__antal { min-width: 0; padding: 0.05em 0.4em; font-size: 0.72rem; }
}

/* Bara uppföljningen inläst (Anton 2026-10-21) */
.cs__hanvisning--bara { background: var(--dip-lavendel); color: var(--dip-morklila); box-shadow: inset 4px 0 0 var(--dip-blue); margin-bottom: 1rem; }
.cs__hanvisning--bara a { color: var(--dip-blue); font-weight: 800; }

/* Kan det vara samma person? (Anton 2026-10-21) */
.cs-ihop {
  margin: 0 0 1.6rem; padding: 1rem 1.2rem 1.1rem;
  background: var(--dip-lavendel); border-radius: 16px; box-shadow: inset 4px 0 0 var(--dip-blue);
}
.cs-ihop__rubrik { margin: 0 0 0.3rem; font-size: 1.15rem; color: var(--dip-morklila); }
.cs-ihop__text { margin: 0 0 0.8rem; line-height: 1.45; }
.cs-ihop__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.cs-ihop__rad {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  padding: 0.75rem 0.9rem; background: #fff; border-radius: 12px;
}
.cs-ihop__par { display: grid; gap: 0.2rem; min-width: 0; }
.cs-ihop__person { color: var(--dip-morklila); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.cs-ihop__person:hover { color: var(--dip-blue); text-decoration: underline; }
.cs-ihop__knappar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-ihop__knapp { min-height: 40px; }
.cs-ihop__stycke { margin: 0 0 0.4rem; }
.cs-ihop__stycke a { color: var(--dip-blue); font-weight: 800; }
.cs-ihop__valj { margin-top: 0.7rem; }
.cs-ihop__etikett { display: block; margin-bottom: 0.35rem; font-weight: 700; }
.cs-ihop__valrad { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cs-ihop__valrad .cs-filter__val { flex: 1 1 14rem; min-width: 0; }

/* =========================================================================
   Den nya chefssidan (Anton 2026-10-27, skissen U65gdm541sVf4PEFDBqrkS):
   startsidan, Skicka ut, översikten i grupper, listorna, personens plan,
   Hjälp och sammanställningen. Gruppernas färger: 12–20 moduler hallonröd,
   5–11 orange, 1–4 ljus orange, inga turkosgrön.
   ========================================================================= */
:root {
  --grupp-mycket: var(--niva-forst);
  --grupp-nagra: var(--niva-ova);
  --grupp-lite: #f8c9a2;
  --grupp-klar: var(--niva-klarar);
}
.cs__sida { max-width: 54rem; }
.cs__topp { margin-bottom: 1rem; }
.cs__topphoger { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.cs__topphoger .cs__kurs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .cs__topphoger .cs__kurs { display: none; } }
.cs-filknapp {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  padding: 0.45rem 0.9rem; border: 2px solid var(--linje-stark); border-radius: 999px;
  background: #fff; color: var(--text-strong); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
.cs-filknapp svg { width: 18px; height: 18px; }
.cs-filknapp:hover, .cs-filknapp[aria-expanded="true"] { border-color: var(--dip-blue); color: var(--dip-blue); }
.cs-filknapp:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 2px; }
.cs-filknapp__antal { padding: 0 0.45em; border-radius: 999px; background: var(--dip-lavendel); color: var(--dip-blue); font-size: 0.8rem; font-weight: 800; }
.cs-filpanel { display: grid; gap: 0.7rem; margin: 0 0 1.4rem; padding: 1.1rem 1.2rem; border: 2px solid var(--dip-blue); border-radius: 18px; background: #fff; }
.cs-filpanel .cs__delrubrik, .cs-filpanel .cs__deltext { margin: 0; }
.cs-filpanel .cs-zon, .cs-filpanel .cs-filstatus, .cs-filpanel .cs-export { margin: 0; }

.cs-smula { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--text-muted); }
.cs-smula a { color: var(--dip-blue); font-weight: 700; text-decoration: none; }
.cs-smula a:hover { text-decoration: underline; }
.cs-rubrikrad { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.4rem 1.2rem; margin: 0 0 1.2rem; }
.cs-rubrikrad__text { min-width: 0; flex: 1 1 22rem; }
.cs-rubrikrad .cs__ingress { margin: 0; }
.cs-rubrikrad .cs-filter { margin: 0; }
.cs-knapprad { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.2rem; }
.cs-lank { color: var(--dip-blue); font-weight: 800; }
.cs-liten { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Startsidan */
.cs-start { display: grid; gap: 1.1rem; padding-top: 0.6rem; }
.cs-start .cs__ingress, .cs-start .cs__delrubrik, .cs-start .cs-knapprad, .cs-start .cs__deltext, .cs-start .cs-zon { margin: 0; }
.cs-start__rubrik { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.06; max-width: 18ch; }
.cs-start__ingress { font-size: 1.1rem; }
.cs-fakta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cs-fakta li { padding: 0.4rem 0.9rem; border-radius: 999px; background: #fff; border: 2px solid var(--linje); font-weight: 700; font-size: 0.92rem; }
.cs-tresteg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; counter-reset: steg; }
@media (max-width: 640px) { .cs-tresteg { grid-template-columns: 1fr; } }
.cs-tresteg li { counter-increment: steg; display: grid; gap: 0.3rem; align-content: start; background: #fff; border: 2px solid var(--linje); border-radius: 16px; padding: 1rem 1.1rem; }
.cs-tresteg b::before { content: counter(steg) ". "; color: var(--dip-blue); }
.cs-tresteg p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.cs-tresteg a { color: var(--dip-blue); font-weight: 800; }

/* Skicka ut */
.cs-utskick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.9rem; margin: 0 0 1.4rem; }
@media (max-width: 640px) { .cs-utskick { grid-template-columns: 1fr; } }
.cs-utskick__falt { display: grid; gap: 0.3rem; font-weight: 700; font-size: 0.92rem; color: var(--text-strong); }
.cs-utskick__falt input { min-width: 0; padding: 0.55rem 0.8rem; border: 2px solid var(--linje-stark); border-radius: 12px; background: #fff; font: inherit; }
.cs-utskick__falt input:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 1px; }
.cs-utskickdel { display: grid; gap: 0.6rem; margin: 0 0 1rem; padding: 1.1rem 1.2rem; background: #fff; border: 2px solid var(--linje); border-radius: 18px; }
.cs-utskickdel .cs__delrubrik, .cs-utskickdel .cs__deltext, .cs-utskickdel .cs-knapprad, .cs-utskickdel .cs-export__status { margin: 0; }
.cs-utskicktext { width: 100%; min-height: 16rem; padding: 0.9rem 1rem; border: 2px solid var(--linje); border-radius: 12px; background: var(--dip-offwhite); color: var(--text); font-family: inherit; font-size: 0.95rem; line-height: 1.5; resize: vertical; }
.cs-utskicktext--kort { min-height: 8.5rem; }
.cs-affisch {
  width: 100%; max-width: 22rem; aspect-ratio: 1 / 1.414; margin: 0.4rem auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center;
  padding: 8% 8% 6%; background: #fff; border-radius: 6px; box-shadow: 0 10px 30px rgba(43, 37, 81, 0.16);
}
.cs-affisch__kicker { margin: 1rem 0 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dip-blue); }
.cs-affisch__rubrik { margin: 0; font-size: 1.9rem; line-height: 1.05; font-weight: 800; color: var(--text-strong); }
.cs-affisch__text { margin: 0; font-size: 0.85rem; color: var(--text-muted); max-width: 16rem; }
.cs-affisch__qr { width: 9.5rem; margin: 0.5rem 0 0.1rem; line-height: 0; }
.cs-affisch__qr svg { width: 100%; height: auto; }
.cs-affisch__skanna { margin: 0; font-weight: 800; font-size: 0.9rem; }
.cs-affisch__fot { margin: auto 0 0; font-size: 0.78rem; color: var(--text-muted); }
.cs-affisch__fot b { color: var(--text-strong); }

/* Översikten */
.cs-gruppdel { margin: 0 0 1.1rem; padding: 1.3rem 1.3rem 1.1rem; background: #fff; border: 2px solid var(--linje); border-radius: 20px; }
.cs-gruppdel .cs__delrubrik { margin-bottom: 0.7rem; }
.cs-gstapel { display: flex; height: 34px; margin: 0 0 1rem; border-radius: 10px; overflow: hidden; background: var(--linje); }
.cs-gstapel--tunn { height: 18px; margin: 0; border-radius: 6px; }
.cs-gstapel__del { display: block; height: 100%; }
.cs-gstapel__del + .cs-gstapel__del { border-left: 2px solid #fff; }
.cs-gstapel__del--mycket, .cs-grupp__farg--mycket { background: var(--grupp-mycket); }
.cs-gstapel__del--nagra, .cs-grupp__farg--nagra { background: var(--grupp-nagra); }
.cs-gstapel__del--lite, .cs-grupp__farg--lite { background: var(--grupp-lite); }
.cs-gstapel__del--klar, .cs-grupp__farg--klar { background: var(--grupp-klar); }
.cs-grupper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 640px) { .cs-grupper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-grupp { display: grid; gap: 0.15rem; align-content: start; padding: 0.8rem 0.9rem; text-align: left; border: 2px solid var(--linje); border-radius: 14px; background: #fff; color: var(--text); font: inherit; cursor: pointer; }
.cs-grupp:hover { border-color: var(--dip-blue); }
.cs-grupp:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 2px; }
.cs-grupp__tal { display: flex; align-items: center; gap: 0.45rem; font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cs-grupp__tal small { align-self: flex-end; padding-bottom: 0.15rem; margin-left: -0.1rem; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.cs-grupp__farg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; }
.cs-grupp__namn { font-weight: 800; color: var(--text-strong); }
.cs-grupp__ord { font-size: 0.85rem; color: var(--text-muted); }
.cs-gruppdel__not { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--text-muted); }
.cs-grunder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 1rem; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--niva-forst-ljus); color: var(--niva-forst-text); }
.cs-grunder p { margin: 0; font-weight: 700; }
.cs-grunder .cs-lankknapp { color: var(--niva-forst-text); font-weight: 800; }
.cs-grunder--text { display: block; font-weight: 700; }
.cs-styrka { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--niva-klarar-ljus); color: var(--niva-klarar-text); }
.cs-styrka p { margin: 0; font-weight: 700; }
.cs-personalpuff { margin: 0 0 1rem; font-weight: 700; color: var(--text-strong); }
.cs-personalpuff a { color: var(--dip-blue); }
.cs-vidare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0.4rem 0 0; }
@media (max-width: 560px) { .cs-vidare { grid-template-columns: 1fr; } }
.cs-vidare__lank { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 1.1rem 1.2rem; border: 2px solid var(--dip-blue); border-radius: 16px; background: var(--dip-blue); color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem; }
.cs-vidare__lank:hover { background: #3f4499; border-color: #3f4499; color: #fff; }
.cs-vidare__lank--ljus { background: #fff; color: var(--dip-blue); }
.cs-vidare__lank--ljus:hover { background: var(--dip-lavendel); border-color: var(--dip-blue); color: var(--dip-blue); }
.cs-vidare__lank small { display: block; margin-top: 0.1rem; font-weight: 400; font-size: 0.85rem; opacity: 0.85; }
.cs-vidare__lank:focus-visible { outline: 3px solid var(--text-strong); outline-offset: 2px; }
.cs-kop { display: grid; gap: 0.7rem; margin: 1.6rem 0 0; padding: 1.4rem; border-radius: 20px; background: var(--dip-morklila); color: #fff; }
.cs-kop p { margin: 0; max-width: 40rem; color: #dcd8f2; }
.cs-kop p b { color: #fff; font-variant-numeric: tabular-nums; }
.cs-kop__rubrik { margin: 0; font-size: 1.25rem; color: #fff; }
.cs-kop .cs-knapprad { margin: 0.3rem 0 0; }
.cs-kop__knapp { background: #fff; border-color: #fff; color: var(--dip-morklila); }
.cs-kop__knapp:hover { background: var(--dip-lavendel); border-color: var(--dip-lavendel); color: var(--dip-morklila); }
.cs-kop__knapp--ghost { background: transparent; border-color: #8f8ab8; color: #fff; }
.cs-kop__knapp--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.cs-kop__knapp:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Listorna: moduler, en modul och medarbetare */
.cs-nivaer { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 0.8rem; font-size: 0.85rem; color: var(--text-muted); }
.cs-nivaer span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cs-nivaer__farg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; }
.cs-nivaer__farg--forst { background: var(--niva-forst); }
.cs-nivaer__farg--ova { background: var(--niva-ova); }
.cs-lista { list-style: none; margin: 0 0 1.2rem; padding: 0; background: #fff; border: 2px solid var(--linje); border-radius: 18px; overflow: hidden; }
.cs-lista > li + li { border-top: 1px solid var(--linje); }
.cs-rad { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) auto; align-items: center; gap: 0.4rem 1rem; padding: 0.85rem 1.1rem; color: var(--text); text-decoration: none; }
.cs-rad--enkel { grid-template-columns: minmax(0, 1fr) auto auto; }
.cs-rad:hover { background: var(--dip-offwhite); }
.cs-rad:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: -3px; }
.cs-rad__namn { min-width: 0; font-weight: 700; color: var(--text-strong); }
.cs-rad__namn small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--text-muted); }
.cs-rad__mitt { display: grid; gap: 0.3rem; min-width: 0; }
.cs-rad__tal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.cs-rad__tal b { font-weight: 800; color: var(--text-strong); }
.cs-rad__tal .cs-flagga { margin-left: 0.3rem; }
.cs-rad__pil { color: var(--dip-blue); font-size: 1.4rem; line-height: 1; }
.cs-rad__ratt { white-space: nowrap; }
@media (max-width: 560px) {
  .cs-rad { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-rad__mitt { grid-column: 1 / -1; grid-row: 2; }
  .cs-rad--enkel { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-rad--enkel .cs-rad__ratt { grid-column: 1; grid-row: 2; }
}
.cs-minibar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--linje); }
.cs-minibar__del { display: block; height: 100%; }
.cs-minibar__del--forst { background: var(--niva-forst); }
.cs-minibar__del--ova { background: var(--niva-ova); }
.cs-grupprubrik { display: flex; align-items: center; gap: 0.5rem; margin: 1.4rem 0 0.6rem; font-size: 1rem; color: var(--text-strong); }
.cs-val { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.cs-val__knapp { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border: 2px solid var(--linje-stark); border-radius: 999px; background: #fff; color: var(--text-strong); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.cs-val__knapp b { font-variant-numeric: tabular-nums; }
.cs-val__knapp:hover { border-color: var(--dip-blue); }
.cs-val__knapp:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: 2px; }
.cs-val__knapp[aria-pressed="true"] { background: var(--dip-blue); border-color: var(--dip-blue); color: #fff; }
.cs-medarbetare .cs-verktyg { gap: 0.6rem 1rem; align-items: flex-end; }
.cs-verktyg__falt { display: grid; gap: 0.25rem; }

/* Personen */
.cs-person__ingress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.cs-gpill { display: inline-block; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.cs-gpill--mycket { background: var(--niva-forst-ljus); color: var(--niva-forst-text); }
.cs-gpill--nagra { background: var(--niva-ova-ljus); color: var(--niva-ova-text); }
.cs-gpill--lite { background: #fdeee2; color: var(--niva-ova-text); }
.cs-gpill--klar { background: var(--niva-klarar-ljus); color: var(--niva-klarar-text); }
.cs-plan { list-style: none; margin: 0 0 1rem; padding: 0; background: #fff; border: 2px solid var(--linje); border-radius: 18px; overflow: hidden; }
.cs-plan li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 0.9rem; padding: 0.85rem 1.1rem; }
.cs-plan li + li { border-top: 1px solid var(--linje); }
.cs-plan__nr { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--dip-lavendel); color: var(--dip-blue); font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-plan__namn { min-width: 0; font-weight: 700; color: var(--text-strong); }
.cs-plan__namn small { display: block; margin-top: 0.15rem; font-weight: 400; font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 520px) { .cs-plan li { grid-template-columns: auto minmax(0, 1fr); } .cs-plan__ratt { grid-column: 2; } }
.cs-mer { margin: 0 0 0.8rem; background: #fff; border: 2px solid var(--linje); border-radius: 16px; }
.cs-mer summary { padding: 0.9rem 1.1rem; font-weight: 800; color: var(--text-strong); cursor: pointer; }
.cs-mer summary:focus-visible { outline: 3px solid var(--dip-blue); outline-offset: -3px; border-radius: 14px; }
.cs-mer > p, .cs-mer > div { margin: 0; padding: 0 1.1rem 1.1rem; }

/* Hjälp */
.cs-steg { list-style: none; display: grid; gap: 0.6rem; margin: 0 0 1.8rem; padding: 0; }
.cs-steg li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.9rem; padding: 0.9rem 1.1rem; background: #fff; border: 2px solid var(--linje); border-radius: 16px; }
.cs-steg b { display: block; color: var(--text-strong); }
.cs-steg p { margin: 0.15rem 0 0; color: var(--text-muted); font-size: 0.95rem; }
.cs-steg a { color: var(--dip-blue); font-weight: 800; }

/* Sammanställningen */
.cs-a4 { display: grid; gap: 0.9rem; width: 100%; max-width: 40rem; margin: 0 auto 1.4rem; padding: clamp(1.2rem, 5vw, 2.6rem); background: #fff; border-radius: 6px; box-shadow: 0 10px 30px rgba(43, 37, 81, 0.16); }
.cs-a4__topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cs-a4__topp .cs__logo { height: 22px; }
.cs-a4__topp span { font-size: 0.8rem; color: var(--text-muted); }
.cs-a4 h2 { margin: 0; font-size: 1.45rem; color: var(--text-strong); }
.cs-a4 h3 { margin: 0.4rem 0 0; font-size: 1rem; color: var(--text-strong); }
.cs-a4 p { margin: 0; }
.cs-a4 ol { display: grid; gap: 0.2rem; margin: 0; padding-left: 1.3rem; }
.cs-a4 ol span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cs-a4__stor { font-size: 1.1rem; font-weight: 700; color: var(--text-strong); }
.cs-a4__grupper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
@media (max-width: 480px) { .cs-a4__grupper { grid-template-columns: 1fr; } }
.cs-a4__grupper li { display: flex; align-items: center; gap: 0.45rem; }
.cs-a4__grupper b { font-variant-numeric: tabular-nums; }
.cs-a4__fot { padding-top: 0.9rem; border-top: 2px solid var(--linje); font-size: 0.9rem; color: var(--text-muted); }
.cs-a4__fot b { color: var(--text-strong); }