/* =========================================================
   Ambulix – designsystem
   Enkelt, tydligt, stora tryckytor. En accentfärg (blå), statusfärger
   reserverade för status. Grönt/gult bara i logotypen.
   ========================================================= */
:root {
  --bg: #f3f2f2;
  --yta: #ffffff;
  --yta-2: #f7f7f8;
  --text: #1c1c1e;
  --text-2: #4f4f56;   /* 7,6:1 mot vit */
  --text-3: #66666d;   /* 5,3:1 mot vit (ENK-11) */
  --linje: #e3e3e7;
  --linje-2: #eeeef1;
  --accent: #1a5fb4;
  --accent-hover: #164f96;
  --accent-tint: #e6eef9;
  --ok: #15803d; --ok-tint: #e3f5ea;        /* grön = klart/OK (4,5:1 som text) */
  --varning: #b45309; --varning-tint: #fdf1de; /* gul/orange = väntar/snart (4,6:1) */
  --fel: #c62828; --fel-tint: #fbe6e6;        /* röd = försenat/fel/ur drift */
  --info: #1a5fb4; --info-tint: #e6eef9;      /* blå = information */
  --neutral: #66666d; --neutral-tint: #ededf0; /* grå = inaktivt */
  --ok-knapp: var(--ok); --varning-knapp: var(--varning); --fel-knapp: var(--fel); /* fyllda knappar med vit text */
  --radie: 12px; --radie-s: 8px;
  --skugga: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.05);
  --skugga-2: 0 4px 16px rgba(0,0,0,.12);
  --topp-h: 56px;
  --toppmeny-h: 48px;
  --botten-h: 68px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214; --yta: #1c1c1f; --yta-2: #26262a; --text: #f2f2f4; --text-2: #b8b8be; --text-3: #9a9aa2;
    --linje: #34343a; --linje-2: #2a2a2f; --accent: #6ea3ea; --accent-hover: #86b4f0; --accent-tint: #1d2a3d;
    --ok: #4ade80; --varning: #fbbf24; --fel: #f87171; --info: #6ea3ea; --neutral: #9a9aa2; --neutral-tint: #2a2a2f;
    --ok-knapp: #15803d; --varning-knapp: #b45309; --fel-knapp: #c62828;
    --ok-tint: #173324; --varning-tint: #3a2a12; --fel-tint: #3b1c1c; --info-tint: #1d2a3d;
    --skugga: 0 1px 2px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.45; color: var(--text); background: var(--bg); }
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; color: var(--text-2); }
p { margin: 0 0 .8em; }
small, .liten { font-size: .85rem; color: var(--text-2); }
.dampad { color: var(--text-2); }
.svag { color: var(--text-3); }
.hoppa { position: absolute; left: -999px; }
.hoppa:focus { left: 8px; top: 8px; background: var(--yta); padding: 8px; z-index: 100; }
.ikon { width: 22px; height: 22px; flex: none; vertical-align: -5px; }
.ikon-s { width: 16px; height: 16px; vertical-align: -3px; }
.ikon-l { width: 32px; height: 32px; }
[hidden] { display: none !important; }

/* ---- Layout ---- */
.topp { position: fixed; top: 0; left: 0; right: 0; height: var(--topp-h); background: var(--yta); border-bottom: 1px solid var(--linje); display: flex; align-items: center; gap: 6px; padding: 0 8px; z-index: 30; padding-top: env(safe-area-inset-top); }
.topp .logo { display: none; }
.topp .logo img { height: 28px; display: block; }
.topp-titel { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 40px; }
.topp-sok { display: none; align-items: center; gap: 8px; background: var(--yta-2); border: 1px solid var(--linje); border-radius: 999px; padding: 0 12px; height: 40px; width: 280px; color: var(--text-3); }
.topp-sok input { border: 0; background: transparent; flex: 1; font: inherit; color: var(--text); outline: none; min-width: 0; min-height: 0; padding: 0; }
.topp-bell { position: relative; }
.bell-antal { position: absolute; top: 4px; right: 4px; background: var(--fel-knapp); color: #fff; font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; }
.topp-anv { display: none; align-items: center; gap: 8px; color: inherit; }
.topp-anv:hover { text-decoration: none; }
.topp-anv-namn { display: none; line-height: 1.1; font-weight: 600; font-size: .9rem; }
.topp-anv-namn small { display: block; font-weight: 400; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex: none; }
.avatar-s { width: 28px; height: 28px; font-size: .7rem; }
.avatar-l { width: 64px; height: 64px; font-size: 1.3rem; }
/* Rapportera-knappen (NAV-06): ikon-knapp på telefon, textknapp på bredare skärm */
.btn-rapportera { min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 999px; gap: 6px; }
.btn-rapportera span { display: none; }
/* Ring-knapp (FÄLT-01): 48 px grön, tel:-länkar */
.btn-ring { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 48px; height: 48px; min-height: 48px; border-radius: 50%; border: 0; background: var(--ok-knapp); color: #fff; font: inherit; font-weight: 700; cursor: pointer; padding: 0; flex: none; }
.btn-ring:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.btn-ring.btn-block { width: 100%; border-radius: 999px; padding: 0 20px; }
.topp-ring { margin-left: 2px; }
.skal { display: flex; padding-top: var(--topp-h); min-height: 100vh; }
.innehall { flex: 1; padding: 16px; padding-bottom: calc(var(--botten-h) + 24px + env(safe-area-inset-bottom)); max-width: 1200px; width: 100%; margin: 0 auto; min-width: 0; }
/* Toppmenyn (dator, som i Adminix): Hem och programmen som poster, rullgardinerna Register och Inställningar */
.toppmeny { display: none; position: fixed; top: var(--topp-h); left: 0; right: 0; height: var(--toppmeny-h); background: var(--yta); border-bottom: 1px solid var(--linje); z-index: 29; align-items: stretch; justify-content: space-between; padding: 0 12px; }
.toppmeny-lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; min-width: 0; }
.toppmeny-lista > li { position: relative; display: flex; }
.toppmeny-lank { display: flex; align-items: center; gap: 4px; padding: 0 14px; color: var(--text-2); font: inherit; font-weight: 600; font-size: .95rem; background: none; border: 0; border-bottom: 3px solid transparent; border-top: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.toppmeny-lank:hover { color: var(--text); text-decoration: none; background: var(--yta-2); }
.toppmeny-lank.aktiv, .toppmeny-rull.aktiv > .toppmeny-lank { color: var(--accent); border-bottom-color: var(--accent); }
.toppmeny-pil { width: 16px; height: 16px; transition: transform .15s; }
.toppmeny-lank[aria-expanded="true"] { color: var(--text); background: var(--yta-2); }
.toppmeny-lank[aria-expanded="true"] .toppmeny-pil { transform: rotate(180deg); }
.rullgardin { position: absolute; top: 100%; left: 0; min-width: 240px; list-style: none; margin: 0; padding: 6px; background: var(--yta); border: 1px solid var(--linje); border-radius: 0 0 var(--radie-s) var(--radie-s); box-shadow: var(--skugga-2); z-index: 40; }
.rullgardin a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-height: 40px; border-radius: var(--radie-s); color: var(--text); font-weight: 500; }
.rullgardin a .ikon { width: 18px; height: 18px; color: var(--text-3); }
.rullgardin a:hover, .rullgardin a:focus-visible { background: var(--yta-2); text-decoration: none; }
.rullgardin a.aktiv { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.rullgardin a.aktiv .ikon { color: var(--accent); }
.toppmeny-hoger { display: flex; align-items: center; gap: 2px; flex: none; }
.toppmeny-hoger a { display: flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 36px; border-radius: var(--radie-s); color: var(--text-2); font-size: .88rem; font-weight: 500; }
.toppmeny-hoger a:hover { background: var(--yta-2); color: var(--text); text-decoration: none; }
.toppmeny-hoger .ikon { width: 18px; height: 18px; }
@media (max-width: 1099px) { .toppmeny-hoger span { display: none; } }
.kategoriruta { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0; }
.kategoriruta label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; min-height: 32px; }
fieldset.falt { border: 0; padding: 0; margin: 0; min-width: 0; } fieldset.falt legend { font-weight: 600; font-size: .9rem; margin-bottom: 4px; padding: 0; }
/* Undermeny i rullgardinen (Register → Övriga): fälls ut åt höger */
.rull-under { position: relative; }
.rull-under-knapp { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; min-height: 40px; border-radius: var(--radie-s); color: var(--text); font-weight: 500; cursor: pointer; }
.rull-under-knapp .ikon { width: 18px; height: 18px; color: var(--text-3); }
.rull-under-knapp span { flex: 1; }
.rull-under-knapp:hover, .rull-under-knapp:focus-visible, .rull-under-knapp[aria-expanded="true"] { background: var(--yta-2); }
.rull-under-knapp:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rull-under-knapp.aktiv { color: var(--accent); font-weight: 600; }
.rull-under-knapp.aktiv .ikon { color: var(--accent); }
.rullgardin.undermeny { top: -7px; left: calc(100% + 6px); border-radius: var(--radie-s); }
.rullgardin.undermeny::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px; } /* bro så att hovringen inte släpper i glipan */
/* Telefonens Mer-ark: undergruppen som en rad som fälls ut */
.lista > li.mer-under { display: block; padding: 0; }
.mer-under > button.lista-rad { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; min-height: 56px; cursor: pointer; }
.mer-under > button.lista-rad.aktiv .lista-titel { color: var(--accent); }
.mer-under > button.lista-rad[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.mer-underlista { margin: 0; padding: 0 0 0 16px; border-top: 1px solid var(--linje-2); }
.brickor { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.brickor .badge { padding: 1px 8px; font-size: .74rem; }
/* Sorterbara kolumner (ambulix.js): rubriken är en knapp, pilen visar riktningen */
.tabell th .sortera { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.tabell th .sortera:hover { color: var(--text); }
.tabell th .sortera:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tabell th .sortera::after { content: "↕"; opacity: .35; font-size: .85em; }
.tabell th[aria-sort="ascending"] .sortera::after { content: "↑"; opacity: 1; }
.tabell th[aria-sort="descending"] .sortera::after { content: "↓"; opacity: 1; }
.tabell th[aria-sort] { color: var(--text); }
.tabell th.num .sortera { flex-direction: row-reverse; }
.tabell th.mitt, .tabell td.mitt { text-align: center; width: 84px; }
.behorighetstabell input[type=checkbox] { width: 20px; height: 20px; }
/* Samma kolumnbredder i alla behörighetstabeller (Program och Register) så att Visa och Ändra står under varandra */
table.behorighetstabell { table-layout: fixed; }
.behorighetstabell col.bh-namn { width: 38%; } .behorighetstabell col.bh-ruta { width: 84px; } .behorighetstabell col.bh-not { width: auto; }
.behorighetstabell td:first-child { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) { .behorighetstabell col.bh-namn { width: auto; } .behorighetstabell col.bh-not { width: 0; } }
.behorighet-ja { color: var(--ok); display: inline-flex; }
.behorighet-ja .ikon { width: 18px; height: 18px; }
.mer-rubrik { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 6px 4px -6px; }
/* Utfällbar listrad (data-utfall): knappen är en lista-rad, panelen under visar t.ex. personer i kolumner */
.lista > li.utfall { display: block; padding: 0; }
.utfall-knapp { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.utfall-knapp:hover { background: var(--yta-2); }
.utfall-knapp:focus-visible { outline-offset: -3px; }
.utfall-pil { transition: transform .15s; flex: none; }
.utfall-knapp[aria-expanded="true"] { background: var(--yta-2); }
.utfall-knapp[aria-expanded="true"] .utfall-pil { transform: rotate(180deg); }
.utfall-panel { padding: 4px 16px 14px 68px; background: var(--yta-2); border-top: 1px solid var(--linje-2); }
.utfall-rubrik { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 12px 0 6px; }
.utfall-lank { margin-top: 12px; }
.kolumner { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.kolumner a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 48px; background: var(--yta); border: 1px solid var(--linje-2); border-radius: var(--radie-s); color: var(--text); font-size: .9rem; }
.kolumner a:hover { border-color: var(--accent); text-decoration: none; }
.kol-ikon { flex: none; color: var(--accent); display: inline-flex; }
.kol-ikon .ikon { width: 18px; height: 18px; }
.kol-namn { flex: 1; min-width: 0; font-weight: 600; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kol-namn small { display: block; font-weight: 400; font-size: .78rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.kol-status { flex: none; font-size: .78rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--neutral-tint); color: var(--text-2); }
.kol-status.ok { background: var(--ok-tint); color: var(--ok); } .kol-status.varning { background: var(--varning-tint); color: var(--varning); } .kol-status.fel { background: var(--fel-tint); color: var(--fel); }
@media (max-width: 699px) { .utfall-panel { padding-left: 16px; } }
/* Bottenrad (NAV-05/ENK-10): 68 px, text 0,8 rem, hela ytan tryckbar */
.bottennav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--botten-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--yta); border-top: 1px solid var(--linje); display: flex; z-index: 30; }
.bottennav a, .bottennav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .8rem; font-weight: 500; color: var(--text-2); background: none; border: 0; font-family: inherit; padding: 6px 0; min-height: 44px; min-width: 44px; position: relative; cursor: pointer; }
.bottennav .aktiv { color: var(--accent); font-weight: 700; }
.bottennav .aktiv .ikon { background: var(--accent-tint); border-radius: 12px; }
.bottennav .ikon { width: 26px; height: 26px; padding: 2px; box-sizing: content-box; }
.bottennav .bell-antal { top: 6px; right: calc(50% - 22px); }
/* Mer-arket (mobil, NAV-02) */
.mer-ark { position: fixed; inset: 0; z-index: 50; }
.mer-bakgrund { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.mer-panel { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: env(safe-area-inset-top); }
.mer-huvud { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; background: var(--yta); border-bottom: 1px solid var(--linje); position: sticky; top: 0; z-index: 1; }
.mer-huvud img { height: 30px; }
.mer-kropp { padding: 16px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.mer-sok input { min-height: 52px; font-size: 1.05rem; }
.mer-rutor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mer-ruta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 8px; background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie); box-shadow: var(--skugga); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: center; position: relative; }
.mer-ruta .ikon { width: 30px; height: 30px; color: var(--accent); }
.mer-ruta.aktiv { border-color: var(--accent); color: var(--accent); }
.mer-ruta[aria-expanded="true"] { background: var(--accent-tint); border-color: var(--accent); }
.mer-ruta:hover { text-decoration: none; }
.mer-ruta .bell-antal { top: 8px; right: 8px; }
.mer-lista { background: var(--yta); border-radius: var(--radie); box-shadow: var(--skugga); overflow: hidden; }
.mer-lista .lista-rad.aktiv .lista-titel { color: var(--accent); }
.mer-fot { background: var(--yta); border-radius: var(--radie); box-shadow: var(--skugga); overflow: hidden; margin-top: 6px; }
body.mer-oppen { overflow: hidden; }
@media (min-width: 700px) {
  .topp { gap: 10px; padding: 0 12px; }
  .topp .logo { display: block; }
  .topp-anv { display: flex; }
  .btn-rapportera { padding: 0 16px; }
  .btn-rapportera span { display: inline; }
}
@media (min-width: 900px) {
  .meny-knapp, .bottennav, .topp-sok-knapp, .topp-ring, .mer-ark { display: none !important; }
  .toppmeny { display: flex; }
  .skal { padding-top: calc(var(--topp-h) + var(--toppmeny-h)); }
  .topp-sok, .topp-anv-namn { display: flex; }
  .topp-anv-namn { display: block; }
  .innehall { padding: 24px 32px; }
  .topp { padding: 0 20px; }
}
@media print {
  .topp, .toppmeny, .bottennav, .btn, .flash, .topp-sok, .mer-ark, dialog, .ej-print { display: none !important; }
  .skal { padding: 0; } .innehall { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
  .kort { box-shadow: none; border: 1px solid #ccc; }
}

/* ---- Sidhuvud ---- */
.sidhuvud { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.sidhuvud h1 { margin: 0; flex: 1; min-width: 200px; }
.sidhuvud .verktyg { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.brodsmulor { font-size: .85rem; color: var(--text-2); margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.brodsmulor a { color: var(--text-2); }

/* ---- Kort & rutnät ---- */
.kort { background: var(--yta); border-radius: var(--radie); box-shadow: var(--skugga); padding: 16px; margin-bottom: 16px; }
.kort-huvud { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kort-huvud h2, .kort-huvud h3 { margin: 0; }
.kort-tat { padding: 0; overflow: hidden; }
.rutnat { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rutnat-s { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.rutnat-2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .rutnat-2 { grid-template-columns: 1fr 1fr; } .rutnat-3 { grid-template-columns: 1fr 1fr 1fr; } }
.kpi { background: var(--yta); border-radius: var(--radie); box-shadow: var(--skugga); padding: 14px 16px; display: block; color: inherit; }
.kpi:hover { text-decoration: none; box-shadow: var(--skugga-2); }
.kpi-varde { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.kpi-etikett { color: var(--text-2); font-size: .85rem; }
.kpi-ok .kpi-varde { color: var(--ok); } .kpi-varning .kpi-varde { color: var(--varning); } .kpi-fel .kpi-varde { color: var(--fel); }

/* ---- Listor ---- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li, .lista-rad { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linje-2); color: inherit; min-height: 56px; }
.lista > li:last-child, .lista-rad:last-child { border-bottom: 0; }
a.lista-rad:hover, .lista > li.klickbar:hover { background: var(--yta-2); text-decoration: none; }
.lista-text { flex: 1; min-width: 0; }
.lista-titel { font-weight: 600; display: block; }
.lista-under { font-size: .85rem; color: var(--text-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-hoger { margin-left: auto; text-align: right; font-size: .85rem; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.lista .chevron { color: var(--text-3); }
.lista-ikon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lista-ikon.ok { background: var(--ok-tint); color: var(--ok); } .lista-ikon.varning { background: var(--varning-tint); color: var(--varning); } .lista-ikon.fel { background: var(--fel-tint); color: var(--fel); } .lista-ikon.info { background: var(--info-tint); color: var(--info); } .lista-ikon.neutral { background: var(--neutral-tint); color: var(--neutral); }
.tom { text-align: center; color: var(--text-2); padding: 32px 16px; }
.tom .ikon { width: 40px; height: 40px; color: var(--text-3); margin-bottom: 8px; }

/* ---- Tabeller ---- */
.tabell-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabell { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabell th, .tabell td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linje-2); vertical-align: middle; }
.tabell th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); font-weight: 600; background: var(--yta-2); }
.tabell tr.klickbar { cursor: pointer; } .tabell tr.klickbar:hover { background: var(--yta-2); }
.tabell td.num, .tabell th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabell .rad-verktyg { white-space: nowrap; text-align: right; }
/* Kompakta registertabeller: klickbara rader (tr[data-href]), namncell med liten avatar, .m-dold döljs på telefon */
table.tabell.kompakt { font-size: .92rem; }
.tabell.kompakt th, .tabell.kompakt td { padding: 7px 12px; }
.tabell.kompakt th { padding-top: 8px; padding-bottom: 8px; white-space: nowrap; }
.tabell tr[data-href] { cursor: pointer; }
.tabell tr[data-href]:hover { background: var(--yta-2); }
.tabell tbody tr:last-child td { border-bottom: 0; }
.tabell .namncell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tabell .namncell a { color: inherit; font-weight: 600; }
.tabell .namncell a:hover { color: var(--accent); }
.tabell .namncell small { display: block; color: var(--text-3); font-size: .8rem; font-weight: 400; }
.tabell .namncell .avatar { width: 28px; height: 28px; font-size: .7rem; }
.tabell .namncell .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tabell .namncell .lista-ikon { width: 28px; height: 28px; border-radius: 8px; }
.tabell .namncell .lista-ikon .ikon { width: 16px; height: 16px; }
.tabell td.liten, .tabell .liten { font-size: .85rem; color: var(--text-2); }
.tabell td.nowrap { white-space: nowrap; }
.tabell td.num .prick { vertical-align: middle; }
@media (max-width: 699px) { .tabell .m-dold { display: none; } }
@media (max-width: 700px) {
  table.tabell.stapla thead { display: none; }
  table.tabell.stapla tr { display: block; border-bottom: 1px solid var(--linje); padding: 8px 0; }
  table.tabell.stapla td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 12px; }
  table.tabell.stapla td::before { content: attr(data-etikett); color: var(--text-2); font-size: .8rem; }
  table.tabell.stapla td.rad-verktyg { justify-content: flex-end; }
}

/* ---- Knappar ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--linje); background: var(--yta); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--yta-2); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primar { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primar:hover { background: var(--accent-hover); }
.btn-ok { background: var(--ok-knapp); border-color: var(--ok-knapp); color: #fff; }
.btn-fel { background: var(--fel-knapp); border-color: var(--fel-knapp); color: #fff; }
.btn-varning { background: var(--varning-knapp); border-color: var(--varning-knapp); color: #fff; } /* bara för 'väntar/åtgärd' – rött är fel/farligt */
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-tint); }
.btn-s { min-height: 34px; padding: 4px 10px; font-size: .85rem; border-radius: 8px; }
@media (pointer: coarse) { .btn-s { min-height: 40px; padding: 6px 12px; } }
.btn-l { min-height: 56px; font-size: 1.1rem; padding: 12px 24px; }
.btn-block { width: 100%; }
.btn-ikon { width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.btn-ikon:hover { background: var(--yta-2); }
.knapprad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knapprad-hoger { justify-content: flex-end; }
.stora-knappar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stora-knappar a, .stora-knappar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie); padding: 20px 12px; color: var(--text); font-weight: 600; font: inherit; cursor: pointer; text-align: center; min-height: 110px; box-shadow: var(--skugga); }
.stora-knappar a:hover, .stora-knappar button:hover { box-shadow: var(--skugga-2); text-decoration: none; }
.stora-knappar .ikon { width: 32px; height: 32px; color: var(--accent); }
.stora-knappar .stora-text { display: block; }
.stora-knappar small { display: block; font-weight: 400; font-size: .82rem; color: var(--text-2); margin-top: 2px; }
.stora-knappar-rad { grid-template-columns: 1fr; }
.stora-knappar-rad a { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 72px; padding: 14px 16px; gap: 14px; }
@media (min-width: 700px) { .stora-knappar-rad { grid-template-columns: 1fr 1fr 1fr; } .stora-knappar-rad a { flex-direction: column; text-align: center; justify-content: center; min-height: 120px; } }
/* Små knappar (registren på startsidan och under Inställningar): täta, flera per rad, minst 48 px höga */
.stora-knappar.sma { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.stora-knappar.sma a, .stora-knappar.sma button { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 48px; padding: 8px 12px; gap: 10px; font-size: .92rem; font-weight: 500; box-shadow: none; }
.stora-knappar.sma .ikon { width: 20px; height: 20px; flex: none; }
@media (max-width: 480px) { .stora-knappar.sma { grid-template-columns: 1fr 1fr; } .stora-knappar.sma a { font-size: .85rem; padding: 8px 10px; } }

/* ---- Formulär ---- */
.falt { margin-bottom: 14px; }
.falt label, .falt .etikett { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.falt .hjalp { font-size: .82rem; color: var(--text-2); margin-top: 4px; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=tel], input[type=url], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linje); border-radius: 10px; background: var(--yta); color: var(--text); font: inherit; }
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--accent); vertical-align: middle; margin: 0 6px 0 0; }
.kryss { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-weight: 500; cursor: pointer; }
.kryss input { flex: none; }
.falt-rad { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .falt-rad { grid-template-columns: 1fr 1fr; } .falt-rad-3 { grid-template-columns: 1fr 1fr 1fr; } }
.piller { display: flex; flex-wrap: wrap; gap: 8px; }
.piller label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--linje); border-radius: 999px; cursor: pointer; font-weight: 500; font-size: .9rem; background: var(--yta); }
.piller input { display: none; }
.piller label:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); }
.form-fot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--linje-2); margin-top: 8px; }
.form-fot .vanster { margin-right: auto; }
.filter-rad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filter-rad input, .filter-rad select { width: auto; min-width: 140px; flex: 1; }
.sok-falt { position: relative; }
.sok-falt .ikon { position: absolute; left: 12px; top: 11px; color: var(--text-3); }
.sok-falt input { padding-left: 40px; }
.filter-rad .sok-falt { display: flex; min-width: 0; }
.filter-rad .sok-falt input { width: 100%; min-width: 0; }
@media (max-width: 699px) { .filter-rad .sok-falt { flex: 1 1 100% !important; } }

/* ---- Statusar ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--yta-2); color: var(--text-2); }
.badge-ok { background: var(--ok-tint); color: var(--ok); }
.badge-varning { background: var(--varning-tint); color: var(--varning); }
.badge-fel { background: var(--fel-tint); color: var(--fel); }
.badge-info, .badge-accent { background: var(--info-tint); color: var(--info); }
.badge-neutral, .badge-inaktiv { background: var(--neutral-tint); color: var(--neutral); }
.prick { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.prick-ok { background: var(--ok); } .prick-varning { background: var(--varning); } .prick-fel { background: var(--fel); } .prick-info { background: var(--info); } .prick-neutral { background: var(--neutral); }
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 12px; font-weight: 500; background: var(--info-tint); color: var(--info); }
.flash-ok { background: var(--ok-tint); color: var(--ok); } .flash-fel { background: var(--fel-tint); color: var(--fel); } .flash-varning { background: var(--varning-tint); color: var(--varning); }
.notis { padding: 12px 16px; border-radius: 10px; border-left: 4px solid var(--accent); background: var(--accent-tint); margin-bottom: 12px; }
.notis-varning { border-color: var(--varning); background: var(--varning-tint); } .notis-fel { border-color: var(--fel); background: var(--fel-tint); } .notis-ok { border-color: var(--ok); background: var(--ok-tint); }
.toast { position: fixed; left: 50%; bottom: calc(var(--botten-h) + 20px); transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 12px; z-index: 60; opacity: 0; transition: .2s; box-shadow: var(--skugga-2); max-width: 90vw; }
.toast.visas { opacity: 1; transform: translateX(-50%); }
.toast-fel { background: var(--fel-knapp); color: #fff; }
@media (min-width: 900px) { .toast { bottom: 24px; } }
.framsteg { height: 10px; background: var(--linje-2); border-radius: 999px; overflow: hidden; }
.framsteg > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.framsteg-varning > span { background: var(--varning); } .framsteg-fel > span { background: var(--fel); } .framsteg-accent > span { background: var(--accent); }

/* ---- Flikar ---- */
.flikar { display: flex; gap: 4px; border-bottom: 1px solid var(--linje); margin-bottom: 16px; overflow-x: auto; }
.flikar button, .flikar a { border: 0; background: none; font: inherit; font-weight: 600; color: var(--text-2); padding: 10px 14px; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.flikar .aktiv { color: var(--accent); border-bottom-color: var(--accent); }
.flikar a:hover { text-decoration: none; color: var(--text); }
.segment { display: inline-flex; background: var(--yta-2); border-radius: 10px; padding: 3px; }
.segment a, .segment button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.segment .aktiv { background: var(--yta); color: var(--text); box-shadow: var(--skugga); }

/* ---- Dialog ---- */
dialog { border: 0; border-radius: var(--radie); padding: 0; box-shadow: var(--skugga-2); width: min(560px, 94vw); background: var(--yta); color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-huvud { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--linje); }
.dialog-huvud h2 { margin: 0; }
.dialog-kropp { padding: 20px; max-height: 70vh; overflow-y: auto; }
.dialog-fot { padding: 12px 20px; border-top: 1px solid var(--linje); display: flex; justify-content: flex-end; gap: 8px; }

/* ---- Checklistor / sysslor ---- */
.check-rad { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--linje-2); min-height: 64px; }
.check-rad:last-child { border-bottom: 0; }
.check-box { width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--linje); display: inline-flex; align-items: center; justify-content: center; flex: none; color: transparent; background: var(--yta); cursor: pointer; }
.check-rad.klar .check-box { background: var(--ok-knapp); border-color: var(--ok-knapp); color: #fff; }
.check-rad.avvikelse .check-box { background: var(--fel-knapp); border-color: var(--fel-knapp); color: #fff; }
.check-rad.klar .check-titel { text-decoration: line-through; color: var(--text-2); }
.check-text { flex: 1; min-width: 0; }
.check-titel { font-weight: 600; }
.check-info { font-size: .85rem; color: var(--text-2); }
.check-varde input { width: 110px; text-align: right; }
.check-fack { background: var(--yta-2); padding: 8px 16px; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }

/* ---- Chatt ---- */
.chatt { display: flex; flex-direction: column; height: calc(100vh - var(--topp-h) - var(--botten-h) - 40px); }
@media (min-width: 900px) { .chatt { height: calc(100vh - var(--topp-h) - 60px); } }
.chatt-medd { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.bubbla { max-width: 78%; padding: 10px 14px; border-radius: 16px; background: var(--yta); box-shadow: var(--skugga); align-self: flex-start; }
.bubbla.egen { align-self: flex-end; background: var(--accent); color: #fff; }
.bubbla .avsandare { font-size: .75rem; font-weight: 700; color: var(--accent); display: block; }
.bubbla.egen .avsandare { color: rgba(255,255,255,.85); }
.bubbla .tid { font-size: .7rem; opacity: .7; display: block; text-align: right; }
.chatt-skriv { display: flex; gap: 8px; padding: 10px; background: var(--yta); border-top: 1px solid var(--linje); }
.chatt-skriv input { flex: 1; }

/* ---- Inloggning ---- */
.login-sida { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login-kort { background: var(--yta); border-radius: 16px; box-shadow: var(--skugga-2); padding: 32px 28px; width: min(420px, 100%); }
.login-logo { display: block; height: 52px; margin: 0 auto 24px; }

/* ---- Stationsskärm ---- */
.skarm-sida { background: #0f1115; color: #f2f2f4; overflow: hidden; }
.skarm { display: grid; grid-template-rows: 72px 1fr; height: 100vh; }
.skarm-topp { display: flex; align-items: center; gap: 24px; padding: 0 32px; border-bottom: 1px solid #2a2d35; font-size: 1.4rem; }
.skarm-topp img { height: 36px; }
.skarm-topp .klocka { margin-left: auto; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.skarm-kropp { padding: 24px 32px; overflow: hidden; }
.skarm h1 { font-size: 2.2rem; } .skarm h2 { font-size: 1.6rem; color: #b8bcc6; }
.skarm .kort { background: #1a1d24; color: inherit; box-shadow: none; }
.skarm .lista > li { border-color: #2a2d35; font-size: 1.3rem; min-height: 64px; }
.skarm .lista-under { color: #9aa0ad; font-size: 1rem; }
.skarm .badge { font-size: 1rem; padding: 4px 14px; }
.skarm-bild { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; height: 100%; }
.skarm-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.skarm-bild .text { font-size: 1.5rem; line-height: 1.5; }
.skarm-fot { position: fixed; bottom: 0; left: 0; right: 0; height: 6px; background: #2a2d35; }
.skarm-fot span { display: block; height: 100%; background: var(--ok); transition: width 1s linear; }

/* ---- Diverse ---- */
.mini-kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: .85rem; }
.mini-kalender .dag { padding: 8px 2px; border-radius: 8px; background: var(--yta-2); min-height: 40px; }
.mini-kalender .dag.idag { outline: 2px solid var(--accent); }
.mini-kalender .dag.pass { background: var(--accent-tint); color: var(--accent); font-weight: 700; }
.kalender-rutnat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.kalender-rutnat .rubrik { font-size: .75rem; text-transform: uppercase; color: var(--text-2); text-align: center; padding: 4px; }
.kalender-rutnat .cell { background: var(--yta); border: 1px solid var(--linje-2); min-height: 80px; padding: 4px; font-size: .8rem; border-radius: 6px; overflow: hidden; }
.kalender-rutnat .cell.annan { opacity: .45; }
.kalender-rutnat .cell.idag { border-color: var(--accent); }
.kalender-rutnat .cell .datum { font-weight: 700; margin-bottom: 2px; }
.pass-chip { display: block; border-radius: 4px; padding: 1px 4px; font-size: .72rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.delare { border: 0; border-top: 1px solid var(--linje); margin: 16px 0; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.kod { font-family: ui-monospace, Menlo, monospace; font-size: 2rem; letter-spacing: .3em; text-align: center; font-weight: 700; }
.prosa { max-width: 72ch; line-height: 1.6; }
.prosa img { border-radius: 8px; }
.prosa table { border-collapse: collapse; width: 100%; margin: 12px 0; } .prosa td, .prosa th { border: 1px solid var(--linje); padding: 6px 8px; }
.prosa h2 { margin-top: 1.4em; } .prosa h3 { margin-top: 1.2em; }
.riktlinje pre { white-space: pre-wrap; font-family: inherit; }
.omslag { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radie-s); background: var(--yta-2); }
.hoger { text-align: right; } .center { text-align: center; }
.flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flex-mellan { justify-content: space-between; }
.vaxa { flex: 1; }
.mb0 { margin-bottom: 0; } .mt16 { margin-top: 16px; } .mb16 { margin-bottom: 16px; }
.sidor { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px; }
.tagg { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--yta-2); font-size: .78rem; color: var(--text-2); }
.blink { animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.stapel { display: flex; flex-direction: column; gap: 8px; }
.fack-titel { font-weight: 700; padding: 8px 0 4px; color: var(--text-2); font-size: .85rem; text-transform: uppercase; }
.bildrutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.bildrutnat img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.tidslinje { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--linje); }
.tidslinje li { position: relative; padding: 0 0 16px 16px; }
.tidslinje li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.tidslinje .tid { font-size: .8rem; color: var(--text-2); }
.dragbar { cursor: grab; }
.faktaruta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .95rem; }
.faktaruta dt { color: var(--text-2); font-weight: 500; } .faktaruta dd { margin: 0; }
/* Rad-länk inuti li: fyll hela raden */
.lista > li:has(> .lista-rad) { padding: 0; }
.lista > li > .lista-rad { flex: 1; min-width: 0; width: 100%; border-bottom: 0; }
@media (max-width: 600px) { .rutnat-s { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi { padding: 12px; } .kpi-varde { font-size: 1.5rem; } }

/* ---- Tillgänglighet (ENK-10/11) ---- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-primar:focus-visible, .btn-ok:focus-visible, .btn-fel:focus-visible, .btn-ring:focus-visible { outline-color: var(--text); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
a.lista-rad:focus-visible, .check-rad:focus-visible, .mer-ruta:focus-visible { outline-offset: -3px; }
.flikar button, .flikar a { min-height: 44px; }
.segment a, .segment button { min-height: 38px; }
.kryss { min-height: 44px; }
.piller label { min-height: 40px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ---- Rapportera / Ring (NAV-06, FÄLT-01) ---- */
.dialog-rapportera { width: min(720px, 94vw); }
.dialog-ring { width: min(420px, 94vw); }
.dialog-ring .lista-rad { min-height: 64px; }
.dialog-ring .lista-hoger { font-weight: 700; color: var(--text); font-size: 1rem; }
/* ---- Inloggning: extra (ENK-03) ---- */
.losen-falt { position: relative; }
.losen-falt input { padding-right: 52px; }
.losen-oga { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent; color: var(--text-2); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.login-lankar { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.login-lankar a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; }
.login-diskret { font-size: .8rem; color: var(--text-3); text-align: center; margin-top: 12px; }
.login-diskret a { color: var(--text-3); }
.fel-kort { text-align: center; }
.fel-kort .stapel { margin-top: 16px; }
.fel-kort h1 { margin-top: 4px; }

/* Handledning: tidsaxeln (passen som staplar på ett 24-timmarsspår per dag) */
.ta-verktyg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.ta-veckonav { display: flex; align-items: center; gap: 8px; }
.flikar a { text-decoration: none; }
.schema-tider { background: var(--yta); border-radius: var(--radie); box-shadow: var(--skugga); padding: 8px 14px 12px; margin-bottom: 16px; }
.st-vecka { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 4px; font-size: .9rem; font-weight: 600; }
.st-vecka:first-child { margin-top: 4px; }
.st-tabell { width: 100%; border-collapse: collapse; font-size: .92rem; table-layout: fixed; }
.st-tabell th, .st-tabell td { padding: 7px 8px; border-top: 1px solid var(--linje); text-align: left; vertical-align: top; }
.st-tabell th { width: 9.5em; font-weight: 600; white-space: nowrap; }
.st-tid { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; width: 13em; }
.st-timmar { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; width: 4.5em; }
.st-info { color: var(--text-2); }
.st-info-m { display: none; }
.st-k-dag { width: 9.5em; } .st-k-tid { width: 13em; } .st-k-timmar { width: 4.5em; }
.st-ledig th, .st-ledig td { padding-top: 4px; padding-bottom: 4px; font-size: .85rem; }
.st-gjort .st-tid { color: var(--text-2); }
.st-idag th { color: var(--accent); }
.st-helg th { color: var(--text-2); }
@media (max-width: 599px) { .st-tabell { table-layout: auto; } .st-k-dag, .st-k-tid, .st-k-timmar { width: auto; } .st-tabell th { width: auto; white-space: normal; } .st-tid { width: auto; } .st-tabell th, .st-tabell td { padding: 6px 5px; } .st-info { display: none; } .st-tid { white-space: normal; } .st-info-m { display: block; font-weight: 400; font-size: .82rem; color: var(--text-2); } }
/* Handledning: patientfall-varning och AssCE-tabellen */
.notis-integritet { border-left: 4px solid var(--varning); }
.assce-tabell select { min-width: 0; width: 100%; }
.assce-tabell textarea { width: 100%; min-height: 34px; resize: vertical; }
.faktorval { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px; }
.faktorval .kryss { margin: 0; font-size: .88rem; }
/* Studentens VFU-sammanfattning (vfu/{token}, mallen plain) */
.vfu-sida { max-width: 960px; margin: 0 auto; padding: 16px; }
.vfu-huvud { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linje); }
.vfu-sida h2 { margin-top: 24px; }
.vfu-sida .kort h2 { margin-top: 0; }
@media print { .vfu-sida .ta-verktyg, .vfu-huvud span { display: none; } }
.typrubrik { margin: 20px 0 8px; font-size: 1.1rem; }
.assce-underlag td { border-top: 0 !important; padding-top: 0 !important; background: var(--yta-2); }
.underlag-lista { list-style: none; margin: 6px 0; padding: 0; font-size: .84rem; display: grid; gap: 3px; }
.fk-knapp { background: none; border: 0; padding: 2px 0 0; font: inherit; font-size: .82rem; color: var(--accent); cursor: pointer; }
.fk-knapp::before { content: '▸ '; }
.fk-knapp[aria-expanded="true"]::before { content: '▾ '; }
.fk-underrad td { background: var(--yta-2); border-top: 0 !important; }
.fk-form { display: grid; gap: 6px; max-width: 560px; padding: 4px 0 6px; }
.fk-form .falt { margin: 0; }
/* AssCE-fliken: sammanfattning, karta, tillfälle, utfällbara faktorer */
.assce-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.assce-siffror { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .92rem; }
.assce-siffror b { font-size: 1.15rem; }
.assce-karta { display: grid; gap: 12px; margin-bottom: 18px; }
.assce-omrade h3 { font-size: .9rem; margin: 0 0 6px; color: var(--text-2); }
.assce-rutor { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.assce-ruta { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 78px; padding: 9px 11px; border-radius: var(--radie-s);
  background: var(--yta); box-shadow: var(--skugga); color: inherit; font-size: .84rem; line-height: 1.3; border: 1px solid transparent; }
.assce-ruta:hover { text-decoration: none; border-color: var(--accent); }
.assce-ruta.utan-underlag { background: var(--yta-2); box-shadow: none; border: 1px dashed var(--linje); }
.ar-namn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-fot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ar-underlag { font-size: .76rem; color: var(--text-2); margin-right: auto; }
.utan-underlag .ar-underlag { color: var(--varning); }
.niva-chip { font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; background: var(--neutral-tint); color: var(--neutral); }
.niva-chip.niva-god { background: var(--ok-tint); color: var(--ok); }
.niva-chip.niva-mycket_god { background: var(--ok); color: #fff; }
.niva-chip.niva-otillracklig { background: var(--fel-tint); color: var(--fel); }
.assce-form[data-tillfalle="halvtid"] .assce-ruta [data-chip="slut"],
.assce-form[data-tillfalle="slut"] .assce-ruta [data-chip="halvtid"],
.assce-form[data-tillfalle="halvtid"] .af-bedomning[data-t="slut"],
.assce-form[data-tillfalle="slut"] .af-bedomning[data-t="halvtid"] { display: none; }
.assce-faktorer { display: grid; gap: 6px; margin-bottom: 14px; }
.assce-faktor { background: var(--yta); border-radius: var(--radie-s); box-shadow: var(--skugga); scroll-margin-top: calc(var(--topp-h) + var(--toppmeny-h) + 12px); }
.assce-faktor > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; list-style: none; }
.assce-faktor > summary::-webkit-details-marker { display: none; }
.assce-faktor > summary::before { content: '▸'; color: var(--text-3); margin-right: -4px; }
.assce-faktor[open] > summary::before { content: '▾'; }
.af-namn { flex: 1; min-width: 200px; }
.af-meta { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.af-kropp { padding: 0 14px 14px; display: grid; gap: 12px; border-top: 1px solid var(--linje-2); padding-top: 10px; }
.af-ref { margin: 0 0 6px; padding: 6px 10px; background: var(--yta-2); border-radius: var(--radie-s); }
.niva-val { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.niva-val legend { font-size: .82rem; font-weight: 600; margin-bottom: 4px; padding: 0; }
.niva-knapp input { position: absolute; opacity: 0; pointer-events: none; }
.niva-knapp span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linje); font-size: .85rem; cursor: pointer; }
.niva-knapp input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.niva-knapp input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.niva-knapp.niva-otillracklig input:checked + span { background: var(--fel-knapp); border-color: var(--fel-knapp); }
.niva-knapp.niva-god input:checked + span, .niva-knapp.niva-mycket_god input:checked + span { background: var(--ok-knapp); border-color: var(--ok-knapp); }
.niva-knapp.niva-ingen input:checked + span { background: var(--neutral-tint); border-color: var(--linje); color: var(--text-2); }
.assce-spara { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px 14px; background: var(--yta); border-radius: var(--radie); box-shadow: var(--skugga); }
.assce-spara.flytande { position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--skugga-2); }
@media (max-width: 599px) { .assce-rutor { grid-template-columns: repeat(2, 1fr); } .assce-spara { bottom: calc(var(--botten-h) + 8px); } }
.af-bedomning textarea { width: 100%; min-height: 7.5em; resize: vertical; line-height: 1.45; }
.af-underlag .underlag-lista li { display: flex; gap: 6px; align-items: baseline; }
.af-underlag .underlag-lista input[type="checkbox"] { flex: none; margin: 0; transform: translateY(2px); }
/* Patientfallets formulär: flik per student, valda läraktiviteter som etiketter, AssCE-lista med kommentarer */
.elev-flikar { margin: 0 0 8px; }
.fall-del { border-top: 1px solid var(--linje-2); margin-top: 14px; padding-top: 12px; }
.fall-del h3 { font-size: .98rem; margin: 0 0 2px; }
.fall-del .hjalp { margin: 0 0 8px; }
.valda { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.etikett { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: .85rem; }
.etikett button { border: 0; background: none; color: inherit; font-size: 1.05rem; line-height: 1; padding: 0 6px; cursor: pointer; border-radius: 999px; }
.etikett button:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.valjare { margin-top: 4px; }
.valjare > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; display: inline-block; padding: 4px 0; }
.valjare[open] > summary { margin-bottom: 6px; }
.valjare-sok { width: 100%; max-width: 360px; margin-bottom: 8px; }
.valjare-grupp { margin-bottom: 8px; }
.valjare-rubrik { font-size: .8rem; color: var(--text-2); margin-bottom: 2px; }
.fk-lista { display: grid; gap: 10px; margin-bottom: 6px; }
.fk-post label { display: block; font-size: .88rem; margin-bottom: 3px; }
.fk-post-rad { display: flex; gap: 6px; align-items: center; }
.fk-post-rad input { flex: 1; }
.spara-rad { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px 14px; background: var(--yta); border-radius: var(--radie); box-shadow: var(--skugga); margin-top: 12px; }
.spara-rad.flytande { position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--skugga-2); }
@media (max-width: 599px) { .spara-rad.flytande { bottom: calc(var(--botten-h) + 8px); } }