/* =========================================================
   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;
  --sidomeny-b: 240px;
  --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; }
/* Sidomeny (desktop, NAV-22): kategorier som accordion, Hantera sist */
.sidomeny { display: none; position: fixed; top: var(--topp-h); bottom: 0; left: 0; width: var(--sidomeny-b); background: var(--yta); border-right: 1px solid var(--linje); z-index: 25; flex-direction: column; overflow-y: auto; padding: 8px; }
.sidomeny-kategori { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; min-height: 44px; border-radius: var(--radie-s); color: var(--text); font: inherit; font-weight: 600; background: none; border: 0; text-align: left; cursor: pointer; }
.sidomeny-kategori > span:first-of-type { flex: 1; }
.sidomeny-kategori:hover { background: var(--yta-2); text-decoration: none; }
.sidomeny-kategori.aktiv { color: var(--accent); }
a.sidomeny-kategori.aktiv { background: var(--accent-tint); }
.sidomeny-kategori .chevron { width: 18px; height: 18px; color: var(--text-3); transition: transform .15s; }
.sidomeny-grupp.oppen > .sidomeny-kategori .chevron { transform: rotate(180deg); }
.sidomeny-grupp ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 20px; }
.sidomeny-grupp:not(.oppen) > ul { display: none; }
.sidomeny-grupp li a { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 26px; min-height: 40px; border-radius: var(--radie-s); color: var(--text-2); font-weight: 500; font-size: .95rem; position: relative; }
.sidomeny-grupp li a::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--linje); transform: translateY(-50%); }
.sidomeny-grupp li a > span:first-child { flex: 1; }
.sidomeny-grupp li a:hover { background: var(--yta-2); text-decoration: none; color: var(--text); }
.sidomeny-grupp li a.aktiv { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.sidomeny-grupp li a.aktiv::before { background: var(--accent); }
.sidomeny-delare { border: 0; border-top: 1px solid var(--linje); margin: 8px 4px; }
.sidomeny-hantera > .sidomeny-kategori { color: var(--text-2); }
.sidomeny-hantera > .sidomeny-kategori.aktiv { color: var(--accent); }
.sidomeny-fot { margin-top: auto; padding: 8px 0 0; border-top: 1px solid var(--linje); display: flex; flex-direction: column; gap: 2px; }
.sidomeny-fot .btn { margin-bottom: 6px; }
.sidomeny-fot a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; border-radius: var(--radie-s); color: var(--text); font-weight: 500; }
.sidomeny-fot a:hover { background: var(--yta-2); text-decoration: none; }
.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; }
/* 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; }
  .sidomeny { display: flex; }
  .skal { padding-left: var(--sidomeny-b); }
  .topp-sok, .topp-anv-namn { display: flex; }
  .topp-anv-namn { display: block; }
  .innehall { padding: 24px 32px; }
  .topp { padding: 0 20px; }
}
@media print {
  .topp, .sidomeny, .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; }
@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; }

/* ---- 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; }