/* ============================================================
   Domänpanelen — komponenter
   ------------------------------------------------------------
   Bygger enbart på tokens.css. Inga råa värden här heller.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0;
  font: var(--vikt-normal) var(--text-md)/var(--radhöjd) var(--font);
  background: var(--yta-botten);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- text --------------------------------------------------------- */
.rubrik   { font-size: var(--text-2xl); font-weight: var(--vikt-fet); letter-spacing: -.02em; margin: 0; }
.rubrik-2 { font-size: var(--text-xl);  font-weight: var(--vikt-fet); letter-spacing: -.01em; margin: 0; }
.rubrik-3 { font-size: var(--text-lg);  font-weight: var(--vikt-fet); margin: 0; }
.dämpad   { color: var(--text-dämpad); }
.svag     { color: var(--text-svag); }
.mono     { font-family: var(--font-mono); font-size: var(--text-xs); }

/* Versaletiketten är systemets återkommande avdelare. */
.etikett {
  font-size: var(--text-2xs);
  color: var(--text-svag);
  text-transform: uppercase;
  letter-spacing: var(--etikett-spacing);
  font-weight: var(--vikt-medium);
  margin: var(--steg-4) 0 var(--steg-2);
}
.etikett:first-child { margin-top: 0; }

/* --- knappar ------------------------------------------------------ */
.btn {
  font: var(--vikt-normal) var(--text-md)/1 var(--font);
  padding: var(--steg-2) var(--steg-3);
  border: 1px solid var(--kant);
  border-radius: var(--rund);
  background: var(--yta);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--snabbt), color var(--snabbt), background var(--snabbt);
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primär { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: var(--vikt-medium); }
.btn-primär:hover:not(:disabled) { background: var(--accent-mörk); border-color: var(--accent-mörk); color: #fff; }

.btn-fara { border-color: var(--fel-kant); color: var(--fel-text); }
.btn-fara:hover:not(:disabled) { background: var(--fel-yta); border-color: var(--fel-text); color: var(--fel-text); }

.btn-tyst { border-color: transparent; background: transparent; color: var(--text-dämpad); }
.btn-tyst:hover:not(:disabled) { background: var(--yta-hover); color: var(--text); border-color: transparent; }

.btn-sm { padding: var(--steg-1) var(--steg-2); font-size: var(--text-sm); }
.btn-bred { width: 100%; }

/* --- kort --------------------------------------------------------- */
.kort {
  background: var(--yta);
  border: 1px solid var(--kant);
  border-radius: var(--rund-lg);
  padding: var(--steg-4) var(--steg-4);
}
.kort-tät { padding: var(--steg-3); }
.kort + .kort { margin-top: var(--steg-3); }
.kort-lista { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); overflow: hidden; }

/* --- märken ------------------------------------------------------- */
.märke {
  display: inline-block;
  padding: 2px var(--steg-2);
  border-radius: var(--rund-sm);
  font-size: var(--text-xs);
  font-weight: var(--vikt-medium);
  background: var(--vilar-yta);
  color: var(--vilar-text);
  white-space: nowrap;
}
.märke-ok   { background: var(--ok-yta);   color: var(--ok-text); }
.märke-warn { background: var(--warn-yta); color: var(--warn-text); }
.märke-fel  { background: var(--fel-yta);  color: var(--fel-text); }
.märke-accent { background: var(--accent-yta); color: var(--accent); }
.märke-räknare { background: var(--accent); color: #fff; border-radius: var(--rund-rund); padding: 1px var(--steg-2); }

/* --- statusprick -------------------------------------------------- */
.prick { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--grå-400); }
.prick-ok   { background: var(--ok-text); }
.prick-warn { background: #e8890c; }
.prick-fel  { background: var(--fel-text); }
.prick-vilar{ background: var(--grå-400); }

/* --- meddelanderutor ---------------------------------------------- */
.ruta {
  border-radius: var(--rund);
  padding: var(--steg-3);
  font-size: var(--text-sm);
  line-height: var(--radhöjd-tät);
  border: 1px solid transparent;
  margin-bottom: var(--steg-4);
}
.ruta-ok   { background: var(--ok-yta);   border-color: var(--ok-kant);   color: var(--ok-text); }
.ruta-warn { background: var(--warn-yta); border-color: var(--warn-kant); color: var(--warn-text); }
.ruta-fel  { background: var(--fel-yta);  border-color: var(--fel-kant);  color: var(--fel-text); }
.ruta-info { background: var(--accent-yta); border-color: var(--accent-kant); color: var(--accent); }

/* --- formulär ----------------------------------------------------- */
.falt { display: block; }
.falt > label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--text-svag);
  text-transform: uppercase;
  letter-spacing: var(--etikett-spacing);
  margin-bottom: var(--steg-1);
  font-weight: var(--vikt-medium);
}
.inmatning, .falt input, .falt select, .falt textarea {
  width: 100%;
  border: 1px solid var(--kant);
  border-radius: var(--rund);
  padding: var(--steg-2) var(--steg-3);
  font: var(--vikt-normal) var(--text-md) var(--font);
  background: var(--yta);
  color: var(--text);
  transition: border-color var(--snabbt);
}
.inmatning:focus, .falt input:focus, .falt select:focus {
  outline: none;
  border-color: var(--accent);
}
.inmatning:disabled, .falt input:disabled { background: var(--yta-dämpad); color: var(--text-svag); }
.hjälptext { font-size: var(--text-xs); color: var(--text-svag); margin-top: var(--steg-1); line-height: var(--radhöjd); }

/* --- flikar ------------------------------------------------------- */
.flikar { display: flex; gap: var(--steg-1); border-bottom: 1px solid var(--kant); margin-bottom: var(--steg-4); flex-wrap: wrap; }
.flik {
  padding: var(--steg-2) var(--steg-3);
  font-size: var(--text-md);
  color: var(--text-dämpad);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--rund-sm) var(--rund-sm) 0 0;
  transition: color var(--snabbt), background var(--snabbt);
  user-select: none;
}
.flik:hover { color: var(--text); background: var(--yta-hover); }
.flik-vald { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--vikt-medium); }

/* --- nyckeltal ---------------------------------------------------- */
.tal-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--steg-3); }
.tal { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); padding: var(--steg-3) var(--steg-4); }
.tal b { display: block; font-size: var(--text-3xl); font-weight: var(--vikt-fet); letter-spacing: -.02em; line-height: 1.15; }
.tal span { color: var(--text-dämpad); font-size: var(--text-sm); }
.tal-varning b { color: var(--warn-text); }
.tal-fel b { color: var(--fel-text); }

/* --- tabell ------------------------------------------------------- */
.tabell { width: 100%; border-collapse: collapse; }
.tabell th {
  text-align: left;
  font-size: var(--text-2xs);
  color: var(--text-svag);
  text-transform: uppercase;
  letter-spacing: var(--etikett-spacing);
  font-weight: var(--vikt-medium);
  padding: var(--steg-3) var(--steg-4);
  background: var(--yta-dämpad);
  border-bottom: 1px solid var(--kant);
}
.tabell td { padding: var(--steg-2) var(--steg-4); border-bottom: 1px solid var(--kant); font-size: var(--text-md); }
.tabell tr:last-child td { border-bottom: none; }
.tabell tr.dämpad-rad td { color: var(--text-svag); background: var(--yta-dämpad); }
.tabell td.smal { width: 1%; white-space: nowrap; }

/* --- kodblock ----------------------------------------------------- */
.kod {
  background: var(--yta-dämpad);
  border: 1px solid var(--kant);
  border-radius: var(--rund);
  padding: var(--steg-2) var(--steg-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--radhöjd-luftig);
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--text);
}
.kod .bort { color: var(--fel-text); }
.kod .till { color: var(--ok-text); }

/* --- tomt läge ---------------------------------------------------- */
.tomt { padding: var(--steg-7) var(--steg-5); text-align: center; color: var(--text-svag); font-size: var(--text-md); line-height: var(--radhöjd-luftig); }

/* --- layout ------------------------------------------------------- */
.sida { max-width: var(--max-bredd); margin: 0 auto; padding: var(--steg-6) var(--steg-5) var(--steg-7); }
.topp { display: flex; align-items: baseline; gap: var(--steg-3); margin-bottom: var(--steg-5); flex-wrap: wrap; }
.topp-höger { margin-left: auto; display: flex; gap: var(--steg-2); align-items: center; }
.delad { display: grid; grid-template-columns: 1fr var(--sidopanel); gap: var(--steg-4); align-items: start; }
@media (max-width: 900px) { .delad { grid-template-columns: 1fr; } }
.rad { display: flex; gap: var(--steg-2); align-items: center; flex-wrap: wrap; }
.spalt { display: flex; flex-direction: column; gap: var(--steg-2); }

/* ============================================================
   Överlägg: modal, drawer, dropdown, avisering
   ============================================================ */

.slöja {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity var(--lugnt); z-index: 50;
  backdrop-filter: blur(2px);
}
.slöja.synlig { opacity: 1; pointer-events: auto; }

/* --- modal --- */
.modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.97);
  width: min(460px, calc(100vw - var(--steg-5) * 2));
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-xl);
  box-shadow: var(--skugga-lg); padding: var(--steg-5); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity var(--lugnt), transform var(--lugnt);
}
.modal.synlig { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal h3 { font-size: var(--text-xl); font-weight: var(--vikt-fet); margin: 0 0 var(--steg-2); letter-spacing: -.01em; }
.modal .brödtext { font-size: var(--text-md); color: var(--text-dämpad); line-height: var(--radhöjd-luftig); margin-bottom: var(--steg-4); }
.modal .knapprad { display: flex; gap: var(--steg-2); justify-content: flex-end; flex-wrap: wrap; }
.modal-ikon {
  width: 38px; height: 38px; border-radius: var(--rund-rund); display: grid; place-items: center;
  font-size: var(--text-xl); margin-bottom: var(--steg-3);
}
.modal-ikon-fara { background: var(--fel-yta); color: var(--fel-text); }
.modal-ikon-varning { background: var(--warn-yta); color: var(--warn-text); }
.modal-ikon-fråga { background: var(--accent-yta); color: var(--accent); }

/* --- drawer (glider upp underifrån) --- */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-height: 88vh; display: flex; flex-direction: column;
  background: var(--yta); border-top: 1px solid var(--kant);
  border-radius: var(--rund-xl) var(--rund-xl) 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  transform: translateY(101%); transition: transform var(--lugnt);
}
.drawer.synlig { transform: translateY(0); }
.drawer-grepp {
  width: 38px; height: 4px; border-radius: var(--rund-rund); background: var(--kant-stark);
  margin: var(--steg-2) auto 0; flex: none;
}
.drawer-topp {
  display: flex; align-items: flex-start; gap: var(--steg-3);
  padding: var(--steg-3) var(--steg-5) var(--steg-3);
  border-bottom: 1px solid var(--kant); flex: none; flex-wrap: wrap;
}
.drawer-topp h2 { font-size: var(--text-2xl); font-weight: var(--vikt-fet); letter-spacing: -.02em; margin: 0; }
.drawer-kropp { overflow-y: auto; padding: var(--steg-4) var(--steg-5) var(--steg-6); }
.drawer-inre { max-width: var(--max-bredd); margin: 0 auto; }
@media (max-width: 700px) { .drawer { max-height: 94vh; } .drawer-kropp { padding: var(--steg-4) var(--steg-4) var(--steg-6); } }

/* --- dropdown --- */
.välj { position: relative; display: inline-block; width: 100%; }
.välj-knapp {
  width: 100%; display: flex; align-items: center; gap: var(--steg-2);
  border: 1px solid var(--kant); border-radius: var(--rund); background: var(--yta);
  padding: var(--steg-2) var(--steg-3); font: var(--vikt-normal) var(--text-md) var(--font);
  color: var(--text); cursor: pointer; text-align: left; transition: border-color var(--snabbt);
}
.välj-knapp:hover { border-color: var(--kant-stark); }
.välj-knapp[aria-expanded="true"] { border-color: var(--accent); }
.välj-knapp .etikettdel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.välj-knapp .pil { color: var(--text-svag); font-size: 10px; transition: transform var(--snabbt); }
.välj-knapp[aria-expanded="true"] .pil { transform: rotate(180deg); }

.välj-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70;
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg);
  box-shadow: var(--skugga-lg); padding: var(--steg-1); max-height: 280px; overflow-y: auto;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--snabbt), transform var(--snabbt);
}
.välj-lista.öppen { opacity: 1; pointer-events: auto; transform: translateY(0); }
.välj-val {
  padding: var(--steg-2) var(--steg-3); border-radius: var(--rund-sm); cursor: pointer;
  font-size: var(--text-md); display: flex; align-items: center; gap: var(--steg-2);
}
.välj-val:hover, .välj-val.markerad { background: var(--yta-hover); }
.välj-val[aria-selected="true"] { color: var(--accent); font-weight: var(--vikt-medium); }
.välj-val .under { display: block; font-size: var(--text-xs); color: var(--text-svag); font-weight: var(--vikt-normal); }
.välj-grupp { font-size: var(--text-2xs); color: var(--text-svag); text-transform: uppercase;
              letter-spacing: var(--etikett-spacing); padding: var(--steg-2) var(--steg-3) var(--steg-1); font-weight: var(--vikt-medium); }

/* --- aviseringar --- */
.avisering-lager { position: fixed; right: var(--steg-4); bottom: var(--steg-4); z-index: 80;
                   display: flex; flex-direction: column; gap: var(--steg-2); max-width: 360px; }
.avisering {
  background: var(--yta); border: 1px solid var(--kant); border-left-width: 3px;
  border-radius: var(--rund); box-shadow: var(--skugga-lg); padding: var(--steg-3) var(--steg-4);
  font-size: var(--text-md); display: flex; gap: var(--steg-2); align-items: flex-start;
  animation: glid-in var(--lugnt); 
}
.avisering.ut { animation: glid-ut var(--snabbt) forwards; }
.avisering-ok   { border-left-color: var(--ok-text); }
.avisering-warn { border-left-color: var(--warn-text); }
.avisering-fel  { border-left-color: var(--fel-text); }
.avisering-info { border-left-color: var(--accent); }
.avisering .text { flex: 1; line-height: var(--radhöjd-tät); }
.avisering .stäng { background: none; border: none; color: var(--text-svag); cursor: pointer; padding: 0 2px; font-size: var(--text-lg); }
@keyframes glid-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glid-ut { to { opacity: 0; transform: translateX(12px); } }

/* --- kryssrutor i listform --- */
.kryss-rad { display: flex; align-items: flex-start; gap: var(--steg-3); padding: var(--steg-2) 0; }
.kryss-rad input[type="checkbox"] { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.kryss-rad .text { flex: 1; }
.kryss-rad .namn { font-size: var(--text-md); font-weight: var(--vikt-medium); }
.kryss-rad .beskrivning { font-size: var(--text-sm); color: var(--text-svag); line-height: var(--radhöjd); }

/* ============================================================
   Responsivt
   ------------------------------------------------------------
   Tre brytpunkter: 1000px (sidopanel blir egen rad),
   760px (formulärrutnät staplas), 560px (listor blir kort).
   ============================================================ */

/* Tvåkolumnsinnehåll med en smalare spalt vid sidan. */
.med-sidospalt { display: grid; grid-template-columns: 1fr 300px; gap: var(--steg-5); align-items: start; }
@media (max-width: 1000px) {
  .med-sidospalt { grid-template-columns: 1fr; gap: var(--steg-4); }
}

/* Formulärrutnät som staplar i stället för att klämmas ihop. */
.fält-rad { display: grid; gap: var(--steg-2); align-items: end; }
.fält-rad-2 { grid-template-columns: 1fr 1fr; }
.fält-rad-3 { grid-template-columns: 2fr 1fr auto; }
.fält-rad-4 { grid-template-columns: 1.8fr 1fr 1fr auto; }
@media (max-width: 760px) {
  .fält-rad-2, .fält-rad-3, .fält-rad-4 { grid-template-columns: 1fr; }
  .fält-rad > .btn, .fält-rad > button { width: 100%; }
}

/* Tabeller som inte får plats får rulla i sidled i stället för att krympa
   texten till oläslighet. */
.tabell-svep { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabell-svep > .tabell { min-width: 520px; }

@media (max-width: 760px) {
  .sida, .wrap { padding: var(--steg-4) var(--steg-3) var(--steg-6); }
  .topp { gap: var(--steg-2); }
  .topp-höger { width: 100%; margin-left: 0; }
  .rubrik { font-size: var(--text-xl); }
  .tal b { font-size: var(--text-2xl); }
  .tal-rad { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--steg-2); }
  .flikar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .flik { white-space: nowrap; }
  .modal { padding: var(--steg-4); }
  .avisering-lager { left: var(--steg-3); right: var(--steg-3); bottom: var(--steg-3); max-width: none; }
}

/* Drawern på liten skärm: nästan helskärm, och plats för tumgrepp. */
@media (max-width: 760px) {
  .drawer { max-height: 92vh; border-radius: var(--rund-lg) var(--rund-lg) 0 0; }
  .drawer-topp { padding: var(--steg-3) var(--steg-4); }
  .drawer-topp h2 { font-size: var(--text-xl); }
  .drawer-topp .rad { width: 100%; }
  .drawer-kropp { padding: var(--steg-3) var(--steg-4) var(--steg-6); }
}

/* Tvåspaltiga kort i admin. */
.kort-rutnät { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--steg-3); }

/* --- filterpanel --- */
.filter-topp { display: flex; gap: var(--steg-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--steg-3); }
.filter-knapp { position: relative; }
.filter-knapp .antal-badge {
  background: var(--accent); color: #fff; border-radius: var(--rund-rund);
  padding: 0 5px; font-size: var(--text-2xs); margin-left: 5px; font-weight: var(--vikt-medium);
}
.filter-panel {
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg);
  padding: var(--steg-4); margin-bottom: var(--steg-3);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--steg-4);
}
.filter-panel.dold { display: none; }
.filter-grupp .etikett { margin-top: 0; }
.filter-val { display: flex; flex-direction: column; gap: 3px; }
.filter-val label {
  display: flex; align-items: center; gap: var(--steg-2);
  font-size: var(--text-sm); cursor: pointer; padding: 3px 0; color: var(--text-dämpad);
}
.filter-val label:hover { color: var(--text); }
.filter-val input { accent-color: var(--accent); width: 14px; height: 14px; }
.filter-val .räknare { margin-left: auto; color: var(--text-svag); font-size: var(--text-xs); }
.filter-fot { grid-column: 1 / -1; display: flex; gap: var(--steg-2); align-items: center;
              border-top: 1px solid var(--kant); padding-top: var(--steg-3); flex-wrap: wrap; }
.filter-fot .summering { flex: 1; font-size: var(--text-sm); color: var(--text-dämpad); }
.aktiva-filter { display: flex; gap: var(--steg-1); flex-wrap: wrap; }
.aktivt-filter {
  background: var(--accent-yta); border: 1px solid var(--accent-kant); color: var(--accent);
  border-radius: var(--rund-rund); padding: 3px var(--steg-2); font-size: var(--text-xs);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.aktivt-filter:hover { border-color: var(--accent); }
.aktivt-filter .kryss { opacity: .7; font-size: var(--text-sm); line-height: 1; }

/* --- måletikett med förklaring vid hover --- */
.mal-info { position: relative; cursor: help; border-bottom: 1px dotted var(--kant-stark); }
.mal-info.okand { border-bottom-style: dashed; border-bottom-color: var(--warn-text); }
.mal-info .bubbla {
  position: absolute; left: 0; bottom: calc(100% + 7px); z-index: 40;
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund);
  box-shadow: var(--skugga-lg); padding: var(--steg-3); width: 265px;
  font-family: var(--font); font-size: var(--text-sm); line-height: var(--radhöjd);
  color: var(--text); opacity: 0; pointer-events: none; transition: opacity var(--snabbt);
  white-space: normal; font-weight: var(--vikt-normal);
}
.mal-info:hover .bubbla { opacity: 1; }
.mal-info .bubbla .rubrik { font-weight: var(--vikt-fet); margin-bottom: 3px; display: flex; align-items: center; gap: var(--steg-2); }
.mal-info .bubbla .forklaring { color: var(--text-dämpad); }
.mal-info .bubbla .siffra { color: var(--text-svag); font-size: var(--text-xs); margin-top: var(--steg-2); }

/* --- svävande bubblor (ligger i body, kan inte klippas) --- */
.bubbel-lager { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.svavande-bubbla {
  position: fixed; width: 270px;
  background: var(--yta); border: 1px solid var(--kant-stark); border-radius: var(--rund);
  box-shadow: var(--skugga-lg); padding: var(--steg-3);
  font: var(--vikt-normal) var(--text-sm)/var(--radhöjd) var(--font); color: var(--text);
  opacity: 0; transition: opacity var(--snabbt); pointer-events: none;
}
.svavande-bubbla.synlig { opacity: 1; }
.svavande-bubbla .rubrik { font-weight: var(--vikt-fet); margin-bottom: 3px; display: flex; align-items: center; gap: var(--steg-2); flex-wrap: wrap; }
.svavande-bubbla .forklaring { color: var(--text-dämpad); }
.svavande-bubbla .siffra { color: var(--text-svag); font-size: var(--text-xs); margin-top: var(--steg-2); display: block; }
.svavande-bubbla .rad-info { display: flex; justify-content: space-between; gap: var(--steg-3); padding: 2px 0; }
.svavande-bubbla .rad-info span:last-child { color: var(--text-dämpad); text-align: right; }

.mal-info { cursor: help; border-bottom: 1px dotted var(--kant-stark); }
.mal-info.okand { border-bottom-style: dashed; border-bottom-color: var(--warn-text); }

/* --- drawer: låst bakgrund, egen scroll, stängkryss --- */
body.drawer-oppen { overflow: hidden; }
.drawer-stang {
  width: 30px; height: 30px; border-radius: var(--rund-rund); border: 1px solid var(--kant);
  background: var(--yta); color: var(--text-dämpad); cursor: pointer; font-size: var(--text-lg);
  line-height: 1; display: grid; place-items: center; padding: 0; flex: none;
}
.drawer-stang:hover { background: var(--yta-hover); color: var(--text); border-color: var(--kant-stark); }

.drawer-kropp { scrollbar-width: thin; scrollbar-color: var(--kant-stark) transparent; }
.drawer-kropp::-webkit-scrollbar { width: 10px; }
.drawer-kropp::-webkit-scrollbar-track { background: transparent; }
.drawer-kropp::-webkit-scrollbar-thumb {
  background: var(--kant-stark); border-radius: var(--rund-rund);
  border: 3px solid var(--yta); background-clip: padding-box;
}
.drawer-kropp::-webkit-scrollbar-thumb:hover { background: var(--text-svag); background-clip: padding-box; }

/* --- flervalslista --- */
.flerval-sok { margin-bottom: var(--steg-2); font-size: var(--text-sm); padding: var(--steg-1) var(--steg-2); }
.flerval-lista { overflow-y: auto; border: 1px solid var(--kant); border-radius: var(--rund); padding: 3px;
                 scrollbar-width: thin; scrollbar-color: var(--kant-stark) transparent; }
.flerval-lista::-webkit-scrollbar { width: 8px; }
.flerval-lista::-webkit-scrollbar-thumb { background: var(--kant-stark); border-radius: var(--rund-rund);
                                          border: 2px solid var(--yta); background-clip: padding-box; }
.flerval-rad { display: flex; align-items: center; gap: var(--steg-2); padding: var(--steg-1) var(--steg-2);
               border-radius: var(--rund-sm); cursor: pointer; font-size: var(--text-sm); }
.flerval-rad:hover { background: var(--yta-hover); }
.flerval-rad.vald { background: var(--accent-yta); color: var(--accent); }
.flerval-rad input { accent-color: var(--accent); width: 14px; height: 14px; flex: none; }
.flerval-rad .etikettdel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* domänlista i en modal */
.domanlista { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 3px;
              max-height: 260px; overflow-y: auto; text-align: left; }
.domanlista a { display: block; padding: var(--steg-1) var(--steg-2); border-radius: var(--rund-sm);
                font-size: var(--text-sm); color: var(--text); text-decoration: none; }
.domanlista a:hover { background: var(--yta-hover); color: var(--accent); }