/* Copyright (C) 2026 Greger Gustafsson
   Alla rättigheter förbehållna. Se LICENSE. */

/* SYS – systemförteckning. Ljust tema som standard, mörkt efter systeminställning. */
:root {
  color-scheme: light;
  --sida: #f2f4f8;
  --yta: #ffffff;
  --yta-2: #f6f8fb;
  --yta-3: #eceff5;
  --kant: #dfe4ec;
  --kant-2: #c9d1de;
  --text: #1c2230;
  --text-2: #4d576b;
  --dampad: #6b7488;
  --accent: #1f6bd6;
  --accent-svag: #e6effc;
  --meny: #24262e;
  --meny-text: #e7e9ef;
  --inloggning-sloja: rgba(244, 246, 250, .45);
  --ok: #137a3f;
  --ok-svag: #e3f4ea;
  --varning: #9a6400;
  --varning-svag: #fdf1d8;
  --allvarlig: #c2410c;
  --allvarlig-svag: #fde9df;
  --kritisk: #c62828;
  --kritisk-svag: #fbe4e4;
  --neutral: #9aa3b2;
  --nod-system: #2a78d6;
  --nod-server: #eb6834;
  --nod-extern: #1baf7a;
  --skugga: 0 1px 2px rgba(20, 30, 50, .06), 0 2px 8px rgba(20, 30, 50, .05);
  --rund: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sida: #12151b;
    --yta: #1b1f27;
    --yta-2: #20252e;
    --yta-3: #282e39;
    --kant: #2d3440;
    --kant-2: #3b4452;
    --text: #e8ebf1;
    --text-2: #b7bfcc;
    --dampad: #8f99aa;
    --accent: #5b9cf0;
    --accent-svag: #1d2b42;
    --meny: #0c0e12;
    --meny-text: #e7e9ef;
  --inloggning-sloja: rgba(10, 12, 16, .78);
    --ok: #3fbf74;
    --ok-svag: #15301f;
    --varning: #f0b43c;
    --varning-svag: #352a12;
    --allvarlig: #f08a5a;
    --allvarlig-svag: #3a2318;
    --kritisk: #f06a6a;
    --kritisk-svag: #3b1c1c;
    --neutral: #6c7586;
    --nod-system: #3987e5;
    --nod-server: #d95926;
    --nod-extern: #199e70;
    --skugga: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
/* Mörkt läge valt under Mitt konto (samma färger som systemets mörka läge). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sida: #12151b;
  --yta: #1b1f27;
  --yta-2: #20252e;
  --yta-3: #282e39;
  --kant: #2d3440;
  --kant-2: #3b4452;
  --text: #e8ebf1;
  --text-2: #b7bfcc;
  --dampad: #8f99aa;
  --accent: #5b9cf0;
  --accent-svag: #1d2b42;
  --meny: #0c0e12;
  --meny-text: #e7e9ef;
  --inloggning-sloja: rgba(10, 12, 16, .78);
  --ok: #3fbf74;
  --ok-svag: #15301f;
  --varning: #f0b43c;
  --varning-svag: #352a12;
  --allvarlig: #f08a5a;
  --allvarlig-svag: #3a2318;
  --kritisk: #f06a6a;
  --kritisk-svag: #3b1c1c;
  --neutral: #6c7586;
  --nod-system: #3987e5;
  --nod-server: #d95926;
  --nod-extern: #199e70;
  --skugga: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
/* hidden ska alltid dölja, även element som har display i CSS (t.ex. adminraden och menyn). */
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--sida); color: var(--text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex: none; }
.dold { display: none !important; }
.laddar { padding: 40px; text-align: center; color: var(--dampad); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; }

/* Toppmeny */
.toppmeny { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 12px; background: var(--meny); color: var(--meny-text); padding: 0 12px; min-height: 52px; }
.toppmeny a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 12px; color: var(--meny-text); text-decoration: none;
  font-size: 11.5px; border-radius: 6px; opacity: .85; }
.toppmeny a:hover, .toppmeny a:focus-visible { background: rgba(255, 255, 255, .08); opacity: 1; outline: none; }
.toppmeny a.aktiv { opacity: 1; box-shadow: inset 0 -2px 0 #7fb2ff; }
.toppmeny svg { width: 24px; height: 24px; }
/* Menyns ikoner i en enhetlig ljusblå ton: konturer i färgen, ytor i en genomskinlig nyans av den. */
.toppmeny { --menyikon: #9ccfff; }
.toppmeny svg [fill]:not([fill="none"]) { fill: var(--menyikon); fill-opacity: .28; }
.toppmeny svg [stroke]:not([stroke="none"]) { stroke: var(--menyikon); }
.toppmeny a:hover svg, .toppmeny a:focus-visible svg, .toppmeny a.aktiv svg { --menyikon: #c4e3ff; }
.meny-vanster, .meny-hoger { display: flex; gap: 2px; }
.toppmeny a.varumarke { flex-direction: row; align-items: center; gap: 8px; align-self: center; font-size: 18px; font-weight: 600; letter-spacing: -.005em; color: #6cb4ff; opacity: 1; padding: 5px 14px 5px 8px; margin-right: 6px; white-space: nowrap; border-radius: 8px; transition: background .15s, box-shadow .15s; }
.toppmeny a.varumarke svg { width: 28px; height: 28px; }
/* Support efter Logga ut. Utan supportavtal lyser ikonen mjukt röd. */
.toppmeny a.supportlank.saknas, .toppmeny a.avtalsaknas { --menyikon: #ff7b7b; color: #ffb3b3; }
.toppmeny a.avtalsaknas svg { --menyikon: #ff7b7b; filter: drop-shadow(0 0 4px rgba(255, 90, 90, .75)); }
.toppmeny a.supportlank.saknas svg { --menyikon: #ff7b7b; filter: drop-shadow(0 0 4px rgba(255, 90, 90, .75)); animation: supportpuls 2.4s ease-in-out infinite; }
@keyframes supportpuls { 50% { filter: drop-shadow(0 0 1px rgba(255, 90, 90, .3)); } }
@media (prefers-reduced-motion: reduce) { .toppmeny a.supportlank.saknas svg { animation: none; } }
.avtalsruta h2 { display: flex; align-items: center; gap: 8px; }
.avtalsruta h2 svg { width: 26px; height: 26px; }
.toppmeny a.loggaut { margin-left: 6px; border-left: 1px solid rgba(255, 255, 255, .15); border-radius: 0 6px 6px 0; }
/* Ingen understrykning: knappen får en skuggning när man håller musen över den. */
.toppmeny a.varumarke:hover, .toppmeny a.varumarke:focus-visible { text-decoration: none; background: rgba(255, 255, 255, .07); box-shadow: 0 2px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.meny-hoger { justify-content: flex-start; flex-wrap: wrap; }
.kommunnamn { align-self: center; font-size: 12.5px; font-weight: 600; padding: 3px 10px; margin-right: 6px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .kommunnamn { display: none; } }
/* Behörigheten står under Systemkartan, i linje med texten (efter ikonen). */
.varumarke-block { display: flex; flex-direction: column; align-items: flex-start; }
.toppmeny .varumarke-block a.varumarke { padding-top: 3px; padding-bottom: 1px; }
.behorighet { font-size: 10.5px; font-weight: 600; line-height: 1.3; padding: 0 8px; margin: 0 0 4px 44px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; white-space: nowrap; color: var(--meny-text); opacity: .85; }
.behorighet:empty { display: none; }
.sok { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); border-radius: 18px; padding: 0 12px; align-self: center; width: 240px; margin-right: 14px; }
.meny-vanster { align-items: center; }
.sok svg { width: 16px; height: 16px; opacity: .7; }
.sok input { all: unset; flex: 1; padding: 7px 0; color: var(--meny-text); font-size: 13.5px; }
.sok input::placeholder { color: rgba(231, 233, 239, .6); }

.adminrad { position: sticky; top: 52px; z-index: 29; display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap;
  padding: 7px 16px; background: #ffd54a; color: #3a2a00; font-size: 13.5px; border-bottom: 1px solid #d4a800; }
.adminrad .knapp { background: #fff; color: #3a2a00; border-color: #d4a800; }
main { max-width: 1440px; margin: 0 auto; padding: 16px; outline: none; }

/* Kort */
.kort { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund); box-shadow: var(--skugga); padding: 16px 18px; min-width: 0; }
.kort > h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 12px; }
.kort > h2 small { margin-left: auto; font-size: 12.5px; color: var(--dampad); font-weight: 400; }
.rubrikikon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--yta-2); color: var(--text); }
.rubrikikon svg { width: 20px; height: 20px; }
.rutnat { display: grid; gap: 14px; }

/* Välkomstbanner */
.banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(100deg, var(--accent-svag), var(--yta) 70%); border: 1px solid var(--kant);
  border-radius: var(--rund); padding: 20px 22px; margin-bottom: 14px; }
.banner small { display: block; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--dampad); }
.banner h1 { font-size: 34px; font-weight: 400; line-height: 1.15; }
.banner h1 b { color: var(--accent); font-weight: 400; }
.banner p { margin: 4px 0 0; color: var(--text-2); }
.hemsok { display: flex; align-items: center; gap: 8px; margin-top: 12px; max-width: 560px; background: var(--yta); border: 1px solid var(--kant-2); border-radius: 22px; padding: 4px 4px 4px 12px; }
.hemsok:focus-within { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.hemsok svg { width: 20px; height: 20px; }
.hemsok input { all: unset; flex: 1; min-width: 0; padding: 6px 0; font-size: 14px; }
.hemsok .knapp { border-radius: 18px; }
.banner p.beskrivning { max-width: 72ch; color: var(--text); margin: 6px 0 8px; line-height: 1.5; }
.banner .verktyg { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Knappar */
.knapp { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--kant-2); background: var(--yta); color: var(--text); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; font-size: 13px; text-decoration: none; white-space: nowrap; }
.knapp:hover { border-color: var(--accent); color: var(--accent); }
.knapp:focus-visible, .ikonknapp:focus-visible, .flik:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.knapp.primar { background: var(--accent); border-color: var(--accent); color: #fff; }
.knapp.primar:hover { filter: brightness(1.08); color: #fff; }
.knapp.gron { background: var(--ok); border-color: var(--ok); color: #fff; }
.knapp.fara { color: var(--kritisk); border-color: var(--kritisk); }
.knapp.fara:hover { background: var(--kritisk-svag); }
.knapp.liten { padding: 3px 8px; font-size: 12px; }
.knapp.stor { padding: 9px 16px; font-size: 14.5px; font-weight: 600; }
.knapp.stor svg { width: 20px; height: 20px; }
.knapp svg, .ikonknapp svg { width: 17px; height: 17px; }
.knapp[disabled] { opacity: .5; cursor: not-allowed; }
.ikonknapp { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent-svag); color: var(--accent); }
.ikonknapp.fara { background: var(--kritisk-svag); color: var(--kritisk); }

/* Färgikoner (egna, Aero-stil): färgerna ligger i ikonerna, inte i CSS. */
svg.ikon { overflow: visible; filter: drop-shadow(0 .6px .6px rgba(0, 0, 0, .25)); }

/* Hem */
.hem { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.hem-hoger { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hem-hoger > .bred { grid-column: 1 / -1; }
.hem.hem-en { grid-template-columns: 1fr; }
.hem-en #revdiagram { max-width: 460px; }
.navigera { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.navigera a { display: block; padding: 14px; border-radius: 8px; color: var(--text); text-decoration: none; }
.navigera a:hover, .navigera a:focus-visible { background: var(--yta-2); outline: none; }
.navigera svg { width: 40px; height: 40px; color: var(--text); padding: 7px; box-sizing: content-box; border-radius: 12px; background: var(--yta-2); }
.navigera b { display: block; margin-top: 10px; font-size: 15px; }
.navigera span { display: block; color: var(--dampad); font-size: 12.5px; }
.navigera i { display: block; margin-top: 8px; font-style: normal; color: var(--dampad); }
.siffra { font-size: 34px; line-height: 1.1; font-weight: 400; }
.siffra.ok { color: var(--ok); }
.siffra.fara { color: var(--kritisk); }
.siffra.varn { color: var(--varning); }
.nyckel small { color: var(--text-2); display: block; }
.nyckel + .nyckel { border-top: 1px solid var(--kant); margin-top: 12px; padding-top: 12px; }
.inlogg-tal { display: flex; gap: 28px; margin-bottom: 6px; }
.inlogg-tal b { font-size: 24px; font-weight: 500; color: var(--accent); display: block; line-height: 1.1; }
.inlogg-tal span { font-size: 12.5px; color: var(--text-2); }
.diagram { position: relative; }
.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.forklaring { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.forklaring i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; background: var(--accent); }
.forklaring i.streckad { background: none; border-top: 2px dashed var(--kritisk); height: 0; }
.uppfyll { display: grid; gap: 2px; max-height: 360px; overflow: auto; }
.uppfyll a { display: grid; grid-template-columns: minmax(0, 1fr) 110px 40px; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 4px; color: var(--text); text-decoration: none; }
.uppfyll a:hover { background: var(--yta-2); }
.uppfyll a.mitt { box-shadow: inset 3px 0 0 var(--accent); }
.stapel { height: 8px; background: var(--yta-3); border-radius: 4px; overflow: hidden; }
.stapel > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.uppfyll em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 12.5px; }

/* Märken */
.marke { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.marke.ok { background: var(--ok-svag); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.marke.varn { background: var(--varning-svag); color: var(--varning); }
.marke.allv { background: var(--allvarlig-svag); color: var(--allvarlig); }
.marke.fara { background: var(--kritisk-svag); color: var(--kritisk); }
.marke.neutral { background: var(--yta-3); color: var(--text-2); }
.marke.blå { background: var(--accent-svag); color: var(--accent); }
.tagg { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; background: #2f7a4a; color: #fff; margin: 1px 2px 1px 0; white-space: nowrap; }
.avtal { display: inline-block; padding: 0 7px; border: 1px solid var(--kant-2); border-radius: 4px; font-size: 11.5px; color: var(--text-2); margin: 1px 3px 1px 0; white-space: nowrap; }

/* Listvy */
.listhuvud { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.listhuvud h1 { font-size: 22px; font-weight: 500; margin-right: auto; }
.listhuvud input[type=search], .listhuvud select { border: 1px solid var(--kant-2); border-radius: 6px; padding: 6px 10px; background: var(--yta); }
.listhuvud input[type=search] { width: 220px; }
.filterrad { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.filterrad select { border: 1px solid var(--kant-2); border-radius: 6px; padding: 5px 8px; background: var(--yta); font-size: 13px; }
.filterrad .antal { margin-left: auto; color: var(--dampad); font-size: 12.5px; }
.tabellram { overflow: auto; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--kant); vertical-align: top; }
th { font-size: 12.5px; color: var(--text-2); font-weight: 600; background: var(--yta-2); position: sticky; top: 0; white-space: nowrap; }
th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
th button:focus-visible { outline: 2px solid var(--accent); }
th button[aria-sort] span { color: var(--accent); }
tbody tr:hover { background: var(--yta-2); }
tbody tr.klickbar { cursor: pointer; }
td.revcell { white-space: nowrap; min-width: 118px; }
td.besk { max-width: 300px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.tal { text-align: right; font-variant-numeric: tabular-nums; }
tr.inaktiv td { color: var(--dampad); }
.tom { padding: 24px; text-align: center; color: var(--dampad); }

/* Systemkort */
.systemhuvud { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.systemhuvud h1 { font-size: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.systemhuvud .verktyg { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.underrad { color: var(--text-2); display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
.tillbaka { color: var(--text-2); text-decoration: none; font-size: 20px; line-height: 1.3; }
.flikar { display: flex; gap: 4px; border-bottom: 1px solid var(--kant); margin-bottom: 14px; overflow-x: auto; }
.flik { all: unset; cursor: pointer; padding: 8px 14px; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.flik[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.flik .marke { font-size: 10.5px; padding: 0 6px; }
.systemrutnat { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.systemrutnat .hogerspalt { display: grid; gap: 14px; }
.lagesrad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lage { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--rund); background: var(--yta-3); border: 1px solid var(--kant); }
.lage.ok { background: var(--ok-svag); }
.lage.gammal { background: var(--kritisk-svag); }
.lage.ej_ifylld { background: var(--varning-svag); }
.lage b { font-weight: 600; }
.lage small { color: var(--text-2); }
.lage .knapp { margin-left: auto; }
.falt { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.falt > div { min-width: 0; }
.falt label, .falt .etikett { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
.falt .varde { background: var(--yta-2); border-radius: 6px; padding: 7px 10px; min-height: 34px; overflow-wrap: anywhere; }
.falt .varde.tomt { color: var(--dampad); font-style: italic; }
.falt .bred { grid-column: 1 / -1; }
.roller { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.roller b { display: block; font-size: 13px; margin-bottom: 2px; }
.kontoroller { font-size: 12.5px; min-width: 220px; }
.kontoroller div + div { margin-top: 2px; }
.rollinfo { color: var(--dampad); font-weight: 400; cursor: help; }
.rollgrupp + .rollgrupp { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kant); }
.rollgrupp .liten { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dampad); margin-bottom: 6px; }
.rollrubrik { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 6px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.roller div div { font-size: 13px; color: var(--accent); }
.roller .saknas { color: var(--dampad); font-style: italic; }
.lista-liten { display: grid; gap: 6px; }
.lista-liten > div { background: var(--yta-2); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.lista-liten small { color: var(--dampad); display: block; }
.centrerat { text-align: center; }
.centrerat .etikett { font-weight: 600; font-size: 13px; margin: 6px 0 2px; }
.saknaslista { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13px; }
.brist { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.brist::before { content: "▲"; color: var(--kritisk); font-size: 11px; }

/* Säkerhet */
.klass { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .klass { grid-template-columns: repeat(2, 1fr); } }
.klass > div { border-radius: 8px; padding: 10px; background: var(--yta-2); text-align: center; }
.klass b { display: block; font-size: 26px; font-weight: 500; }
.klass small { color: var(--text-2); }
.kontroller { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.kontroll { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--yta-2); border-radius: 6px; font-size: 13px; }
.kontroll .ikon { font-weight: 700; width: 18px; text-align: center; }
.kontroll.ja .ikon { color: var(--ok); }
.kontroll.nej .ikon { color: var(--kritisk); }
.riskmatris { display: grid; grid-template-columns: 26px repeat(5, minmax(34px, 1fr)); gap: 2px; font-size: 12px; max-width: 360px; }
.riskmatris div { aspect-ratio: 1.6; display: grid; place-items: center; border-radius: 3px; font-variant-numeric: tabular-nums; }
.riskmatris .axel { color: var(--dampad); background: none; }
.riskmatris .cell { color: #1c2230; font-weight: 600; }
.riskmatris .cell.tom { color: transparent; }
.matrisrubrik { font-size: 12px; color: var(--dampad); margin: 4px 0 0 28px; }
.sakerhet-rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }

/* Nivåkort (KLASSA och riskanalys) */
.klassablock { border-top: 1px solid var(--kant); padding: 16px 0 6px; }
.klassablock:first-of-type { border-top: 0; }
.klassablock h3 { font-size: 21px; font-weight: 500; display: flex; align-items: center; gap: 8px; margin: 0; }
.aspektinfo { all: unset; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--yta); font: italic 700 13px/20px Georgia, serif; text-align: center; }
.aspektinfo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aspekt-under { margin: 2px 0 12px; color: var(--text-2); font-size: 13px; }
.aspekt-forklaring { margin: -6px 0 12px; padding: 8px 10px; background: var(--yta-2); border-radius: 6px; font-size: 13px; }
.klassablock .etikett { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.nivaval { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.nivakort { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 10px 6px; border: 1.5px solid var(--niva); border-radius: 4px; background: var(--yta); color: var(--text);
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; transition: background .12s; }
.nivakort b { font-weight: 500; font-size: 14.5px; }
.nivakort span, .nivakort small { font-size: 12px; color: var(--text-2); }
.nivakort small { display: none; }
.nivakort:hover { background: color-mix(in srgb, var(--niva) 8%, var(--yta)); }
.nivakort:focus-visible { outline: 2px solid var(--niva); outline-offset: 2px; }
.nivakort.vald { background: color-mix(in srgb, var(--niva) 22%, var(--yta)); border-width: 2.5px; box-shadow: 0 2px 8px color-mix(in srgb, var(--niva) 30%, transparent); }
.nivakort.vald b { font-weight: 700; }
.nivaval.liten { gap: 6px; }
.nivaval.liten .nivakort { min-height: 46px; padding: 6px 4px; }
.nivaval.liten .nivakort b { font-size: 13px; }
.nivaval.liten .nivakort span { font-size: 11px; }
.nivabesk { border: 2px solid var(--kant-2); border-radius: 4px; padding: 12px 16px; margin: 12px 0 8px; background: var(--yta); }
.nivabesk h4 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.nivabesk p { margin: 0 0 6px; }
.nivabesk ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.55; }
.klassa-rensa { text-align: right; margin: -4px 0 6px; }
.lanknapp { all: unset; cursor: pointer; color: var(--accent); font-size: 12.5px; }
.lanknapp:focus-visible { outline: 2px solid var(--accent); }
.klassablock textarea { width: 100%; }
.radlista .rad.riskblock { display: block; padding: 12px; }
.riskhuvud { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.risknivavisning { min-width: 130px; }
.risknivavisning .etikett { display: block; font-size: 11.5px; color: var(--text-2); }
.riskval { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.riskval .etikett { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.nivatext { margin: 6px 0 0; font-size: 12px; color: var(--text-2); min-height: 2.6em; }
.riskfalt { display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: 10px; margin-top: 10px; }
.riskfalt label { font-size: 11.5px; font-weight: 600; color: var(--text-2); display: block; }
@media (max-width: 900px) { .riskval, .riskfalt { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .nivaval { grid-template-columns: repeat(3, 1fr); } }

/* Formulär */
.formular { display: grid; gap: 14px; }
.formular fieldset { border: 1px solid var(--kant); border-radius: var(--rund); background: var(--yta); padding: 14px 16px 16px; margin: 0; min-width: 0; }
.formular legend { font-weight: 600; font-size: 15px; padding: 0 6px; }
.formular .hjalp { font-size: 12.5px; color: var(--dampad); margin: 0 0 10px; }
.formular input[type=text], .formular input[type=url], .formular input[type=email], .formular input[type=date], .formular input[type=password],
.formular select, .formular textarea, .formular input:not([type]) {
  width: 100%; border: 1px solid var(--kant-2); border-radius: 6px; padding: 7px 9px; background: var(--yta); }
.formular textarea { min-height: 70px; resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.kryss { display: flex; gap: 8px; align-items: center; font-weight: 400 !important; color: var(--text) !important; font-size: 13.5px !important; padding-top: 6px; }
.kryss input { width: 16px; height: 16px; accent-color: var(--accent); }
.radlista { display: grid; gap: 8px; }
.radlista .rad { display: grid; gap: 8px; align-items: end; background: var(--yta-2); padding: 8px; border-radius: 6px; }
.radlista .rad label { font-size: 11.5px; font-weight: 600; color: var(--text-2); display: block; }
.rad.avtal-rad { grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr 32px; }
.rad.dok-rad { grid-template-columns: 1.4fr 2fr 1fr 32px; }
.rad.version-rad { grid-template-columns: 1fr 1fr 3fr 32px; }
.rad.risk-rad { grid-template-columns: 2.2fr 70px 70px 1.6fr 1fr 1fr 32px; }
.formknappar { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 0; background: linear-gradient(transparent, var(--sida) 30%); }
.chipfalt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border: 1px solid var(--kant-2); border-radius: 6px; padding: 4px 6px; background: var(--yta); min-height: 36px; }
.chipfalt:focus-within { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-svag); color: var(--accent); border-radius: 12px; padding: 1px 4px 1px 9px; font-size: 12.5px; }
.chip button { all: unset; cursor: pointer; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; line-height: 1; }
.chip button:hover, .chip button:focus-visible { background: var(--accent); color: #fff; }
.chipfalt input { all: unset; flex: 1; min-width: 120px; padding: 3px 2px; font-size: 13.5px; }
.felruta { background: var(--kritisk-svag); color: var(--kritisk); border-radius: 6px; padding: 8px 12px; }

/* Relationer och karta */
.relationer { display: grid; grid-template-columns: minmax(0, 1fr) 260px; border: 1px solid var(--kant); border-radius: var(--rund); background: var(--yta); overflow: hidden; }
.relationer .duk { position: relative; min-height: 380px;
  background-color: var(--yta); }
.relationer .duk svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.relationer aside { border-left: 1px solid var(--kant); padding: 14px; font-size: 13px; overflow: auto; max-height: 640px; }
.relationer aside h3 { font-size: 16px; margin: 4px 0 10px; }
.relationer aside .liten { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dampad); margin: 10px 0 4px; }
.relationer aside a, .relationer aside button.lank { display: flex; gap: 6px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--kant); color: var(--text); text-decoration: none; width: 100%; text-align: left; }
.relationer aside button.lank { all: unset; display: flex; gap: 6px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--kant); cursor: pointer; width: 100%; box-sizing: border-box; }
.relhuvud { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--kant); flex-wrap: wrap; }
.relhuvud b { font-size: 15px; }
.relhuvud small { color: var(--dampad); }
.relhuvud .forklaring { margin: 0 0 0 auto; }
.nodmarke { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 4px; }
.nodsymbol { width: 17px; height: 17px; vertical-align: -4px; margin-right: 4px; overflow: visible; }
svg .nod { cursor: pointer; }
svg .nod text { font-size: 12px; font-weight: 600; fill: #fff; pointer-events: none; }
svg .nod .namn-under { fill: var(--text); font-weight: 600; paint-order: stroke; stroke: var(--yta-2); stroke-width: 4px; stroke-linejoin: round; }
svg .nod .ring { fill: none; stroke: none; }
svg .nod .traff { fill: transparent; }
svg .nod .symbol { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
svg .nod.vald .ring { stroke: var(--accent); stroke-width: 3; fill: rgba(42, 120, 214, .12); }
/* Arbete som återstår: en färgad skugga runt systemets ikon (grön klar, gul nästan klar, röd ej klar). */
:root { --arbete-klar: #2fb35a; --arbete-nastan: #f0b400; --arbete-ej: #e0443a; }
svg .nod.arbete-klar .symbol { filter: drop-shadow(0 0 2.5px var(--arbete-klar)) drop-shadow(0 0 5px var(--arbete-klar)); }
svg .nod.arbete-nastan .symbol { filter: drop-shadow(0 0 2.5px var(--arbete-nastan)) drop-shadow(0 0 5px var(--arbete-nastan)); }
svg .nod.arbete-ej .symbol { filter: drop-shadow(0 0 2.5px var(--arbete-ej)) drop-shadow(0 0 5px var(--arbete-ej)); }
.arbete-prick { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.arbete-prick.arbete-klar { background: var(--arbete-klar); box-shadow: 0 0 5px var(--arbete-klar); }
.arbete-prick.arbete-nastan { background: var(--arbete-nastan); box-shadow: 0 0 5px var(--arbete-nastan); }
.arbete-prick.arbete-ej { background: var(--arbete-ej); box-shadow: 0 0 5px var(--arbete-ej); }
svg .nod:focus-visible .ring { stroke: var(--text); stroke-width: 2.5; }
svg .nod.dimmad { opacity: .25; }
svg .kant { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 4; fill: none; }
svg .kant.dimmad { opacity: .15; }
svg .kant.markerad { stroke-width: 2.5; stroke-dasharray: none; }
.karta-duk { min-height: calc(100vh - 210px); }

/* Systemkartan på startsidan */
.hemkarta { margin-bottom: 14px; }
.hemkarta h2 { flex-wrap: wrap; }
.hemkarta h2 small { margin-left: 8px !important; margin-right: 0; }
.hemverktyg { margin-left: 12px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 400; }
.hemkarta-yta { margin-top: 8px; }
.visa-alla { margin-bottom: 10px; }
.hemkarta-duk { position: relative; height: calc(100vh - 210px); min-height: 460px; min-height: 0 !important; overflow: hidden; }
.hemkarta-yta aside { max-height: calc(100vh - 210px); }
.hemkarta-duk svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
@media (max-width: 760px) { .hemkarta-duk { height: 340px; } }

/* Nyckeltalen under Risker: små klickbara rutor */
.nyckelrutnat { grid-template-columns: repeat(auto-fill, 136px) !important; gap: 8px !important; }
.nyckelkort { padding: 8px 12px !important; }
.nyckelkort small { font-size: 13px; line-height: 1.3; }
.nyckelkort .siffra { font-size: 25px; line-height: 1.25; text-align: center; margin: 2px 0; }
a.nyckelkort:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(31, 107, 214, .15); }
a.nyckelkort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Att göra och riskanalys */
.valknappar { display: flex; gap: 6px; }
/* Valknappar i blå stil: den valda är fylld med en vit ring, de andra något ljusare. */
.valknappar .knapp.primar:not(.vald) { opacity: .7; }
.valknappar .knapp.primar.vald { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); font-weight: 600; }
.valknappar .knapp.primar .marke { background: rgba(255, 255, 255, .25); color: #fff; }
.uppgifter { display: grid; gap: 2px; }
.uppgift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--kant); }
.uppgift:hover, .uppgift:focus-visible { background: var(--yta-2); outline: none; }
.uppgift small { display: block; color: var(--dampad); font-size: 12.5px; margin-top: 1px; }
.uppgift-system { color: var(--accent); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riskanalys { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; }
.ramatris .cell { border: 0; cursor: pointer; font: inherit; font-weight: 600; color: #1c2230; border-radius: 3px; aspect-ratio: 1.6; }
.ramatris .cell:disabled { cursor: default; }
.ramatris .cell.vald { outline: 3px solid var(--accent); outline-offset: 1px; }
@media (max-width: 1000px) { .riskanalys { grid-template-columns: 1fr; } .uppgift { grid-template-columns: 1fr; gap: 4px; } }

/* Hjälp */
div.hjalp { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.hjalp-inneh { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; }
.hjalp-inneh h2 { font-size: 15px; margin-bottom: 8px; }
.hjalp-inneh .lank { all: unset; display: block; padding: 5px 6px; border-radius: 4px; cursor: pointer; color: var(--accent); font-size: 13.5px; }
.hjalp-inneh .lank:hover, .hjalp-inneh .lank:focus-visible { background: var(--yta-2); }
.hjalp-text { max-width: 900px; line-height: 1.6; }
.hjalp-text h1 { font-size: 26px; margin: 0 0 4px; }
.hjalp-text h2 { font-size: 20px; margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--kant); scroll-margin-top: 70px; }
.hjalp-text h3 { font-size: 16px; margin: 20px 0 6px; scroll-margin-top: 70px; }
.hjalp-text p, .hjalp-text ul, .hjalp-text ol { margin: 0 0 12px; }
.hjalp-text li { margin-bottom: 4px; }
.hjalp-text .tabellram { margin: 8px 0 16px; }
.hjalp-text td { font-size: 13.5px; }
@media (max-width: 900px) { div.hjalp { grid-template-columns: 1fr; } .hjalp-inneh { position: static; max-height: none; } }

/* Logg */
.logg td small { color: var(--dampad); }
.andring { font-size: 12.5px; color: var(--text-2); }
.andring b { color: var(--text); font-weight: 600; }
.andring del { color: var(--kritisk); text-decoration: line-through; }
.andring ins { color: var(--ok); text-decoration: none; }

/* Inloggning */
.inloggning { max-width: 380px; margin: 10vh auto 0; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); }
/* Inloggningssidan: ett exempel på en systemkarta som bakgrund, under en slöja så att rutan står ut. */
body:has(.inloggning) { background: linear-gradient(var(--inloggning-sloja), var(--inloggning-sloja)), url("/inloggning-karta.png?v=4") center / cover no-repeat fixed, var(--sida); }
.inloggning .logga { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.inloggning .logga img { width: 44px; height: 44px; }
.inloggning h1 { font-size: 24px; font-weight: 500; }
.inloggning p { color: var(--text-2); margin: 0; font-size: 13px; }
.blankare { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 10px 12px; border-radius: var(--rund); background: var(--accent-svag); }
.blankare svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.blankare p { font-size: 12.5px; line-height: 1.45; }
.blankare + .blankare { margin-top: 8px; }
.blankare.gron { background: var(--ok-svag); }
.blankare.gron svg, .blankare.gron a { color: var(--ok); }

.sso-rad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--dampad); font-size: 13px; }
.sso-rad .knapp { flex: 1; justify-content: center; }

/* Dialog */
dialog { border: 1px solid var(--kant); border-radius: 10px; background: var(--yta); color: var(--text); padding: 18px 20px; width: min(620px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
dialog::backdrop { background: rgba(10, 15, 25, .45); }
dialog h2 { font-size: 18px; margin-bottom: 12px; }

/* Toast och tooltip */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--meny); color: var(--meny-text); padding: 10px 18px; border-radius: 8px; z-index: 50; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.toast.fel { background: var(--kritisk); color: #fff; }
.tips { position: fixed; z-index: 60; pointer-events: none; background: var(--yta); color: var(--text); border: 1px solid var(--kant-2); border-radius: 6px; padding: 6px 9px; font-size: 12.5px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); max-width: 260px; }
.tips b { display: block; }

@media (max-width: 1100px) {
  .hem { grid-template-columns: 1fr; }
  .systemrutnat { grid-template-columns: 1fr; }
  .relationer { grid-template-columns: 1fr; }
  .relationer aside { border-left: 0; border-top: 1px solid var(--kant); }
}
@media (max-width: 760px) {
  main { padding: 12px 16px; }
  .toppmeny { grid-template-columns: 1fr; padding: 6px 8px; gap: 4px; }
  .toppmeny a span { display: none; }
  .toppmeny a.varumarke { font-size: 16px; padding-right: 8px; }
  .toppmeny a.varumarke span { display: inline; }
  .meny-vanster, .meny-hoger { justify-content: center; }
  .toppmeny { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .meny-vanster { flex-wrap: wrap; justify-content: flex-start; }
  .sok { order: 9; flex-basis: 100%; width: auto; margin: 4px 0 2px; }
  .navigera { grid-template-columns: 1fr 1fr; }
  .hem-hoger { grid-template-columns: 1fr; }
  .lagesrad { grid-template-columns: 1fr; }
  .banner { flex-wrap: wrap; }
  .banner h1 { font-size: 28px; }
  .rad.avtal-rad, .rad.dok-rad, .rad.version-rad, .rad.risk-rad { grid-template-columns: 1fr 1fr; }
  .listhuvud input[type=search] { width: 100%; }
}
/* Ledningsrapport */
.rapport-under { color: var(--text-2); margin: -6px 0 14px; }
.rapport-del { margin-bottom: 14px; }
.rapport-punkter { margin: 12px 0 0; padding-left: 20px; line-height: 1.6; }
.rapport-not { font-size: 12.5px; color: var(--dampad); margin: 8px 0 0; }
.rapport-signatur { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 20px; margin-top: 28px; }
.rapport-signatur div { border-bottom: 1px solid var(--kant-2); min-height: 44px; display: flex; align-items: flex-end; }
.rapport-signatur span { font-size: 12px; color: var(--dampad); transform: translateY(18px); }
@media (max-width: 760px) { .rapport-signatur { grid-template-columns: 1fr; } }

@media print {
  .rapport-del { break-inside: avoid; }
  .rapport .tabellram { max-height: none !important; overflow: visible !important; }
  .rapport-signatur { margin-bottom: 20px; }
  .toppmeny, .verktyg, .formknappar, .flikar, .filterrad, .knapp { display: none !important; }
  body { background: #fff; }
  .kort, .tabellram { box-shadow: none; border-color: #ccc; }
}

/* Inmatning: nytt system steg för steg */
.inm { max-width: 760px; margin: 0 auto; }
.inm-topp { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); font-size: 14px; margin-bottom: 8px; }
.inm-topp span:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.inm-topp svg { width: 26px; height: 26px; }
.inm-framsteg { height: 10px; border-radius: 5px; background: var(--yta-3); overflow: hidden; margin-bottom: 16px; }
.inm-framsteg i { display: block; height: 100%; background: var(--ok); border-radius: 5px; transition: width .3s; }
.inm-kort { padding: 28px 28px 22px; }
.inm-kort h1 { font-size: 26px; margin: 0 0 8px; }
.inm-tips { font-size: 16px; color: var(--text-2); margin: 0 0 20px; line-height: 1.5; }
.inm-stort { box-sizing: border-box; width: 100%; font: inherit; font-size: 19px; padding: 14px 16px; border: 2px solid var(--kant-2); border-radius: 10px; background: var(--yta); color: var(--text); }
.inm-stort:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-svag); }
textarea.inm-stort { resize: vertical; min-height: 90px; }
.inm-liten { display: block; font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
.inm-varning { color: var(--varning); background: var(--varning-svag); padding: 8px 12px; border-radius: 8px; margin: 10px 0 0; }
.inm-val { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.inm-ruta { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 12px;
  border: 2px solid var(--kant-2); border-radius: 12px; background: var(--yta); color: var(--text); transition: transform .1s, border-color .1s; }
.inm-ruta:hover { border-color: var(--accent); transform: translateY(-2px); }
.inm-ruta:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.inm-ruta.vald { border-color: var(--ok); border-width: 3px; background: var(--ok-svag); }
.inm-ruta b { font-size: 16px; }
.inm-ruta small { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.inm-emoji { font-size: 34px; line-height: 1; }
.inm-emoji .nodsymbol { width: 34px; height: 34px; margin: 0; vertical-align: 0; }
.inm-emoji.stor { font-size: 64px; text-align: center; }
.inm-knappar { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.inm-knappar.mitten { justify-content: center; }
.inm-knappar .knapp.stor { padding: 12px 22px; font-size: 17px; }
.inm-klart { text-align: center; }
.inm-summa { margin: 0; }
.inm-summa > div { display: grid; grid-template-columns: 190px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--kant); }
.inm-summa dt { color: var(--text-2); font-size: 14px; }
.inm-summa dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .inm-kort { padding: 20px 16px; }
  .inm-kort h1 { font-size: 22px; }
  .inm-summa > div { grid-template-columns: 1fr auto; }
  .inm-summa dt { grid-column: 1 / -1; }
}
.inm-nr { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--niva); color: #fff; font-size: 22px; font-weight: 700; }
.inm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.inm-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--kant-2); background: var(--yta-2); color: var(--text); font-size: 14px; }
.inm-chip:hover { border-color: var(--accent); color: var(--accent); }
.inm-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.inm-finns { margin-top: 18px; color: var(--text-2); }
.inm-finns summary { cursor: pointer; color: var(--accent); }
.inm-finns ul { margin: 8px 0 0; padding-left: 20px; }
.inm-riskniva { font-size: 17px; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; border-left: 6px solid; }
.inm-riskniva.ok { background: var(--ok-svag); border-color: var(--ok); }
.inm-riskniva.varn { background: var(--varning-svag); border-color: var(--varning); }
.inm-riskniva.allv { background: var(--allvarlig-svag); border-color: var(--allvarlig); }
.inm-riskniva.fara { background: var(--kritisk-svag); border-color: var(--kritisk); }
.inm-lagkrav { font-size: 15.5px; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; background: var(--accent-svag); border-left: 6px solid var(--accent); }
.inm-val.lagrum { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.inm-val.lagrum .inm-ruta { align-items: flex-start; text-align: left; padding: 12px 14px; }
.inm-val.lagrum .inm-emoji { font-size: 22px; }
.nivamin.min-2 .nivakort[data-v="1"], .nivamin.min-3 .nivakort:is([data-v="1"], [data-v="2"]),
.nivamin.min-4 .nivakort:is([data-v="1"], [data-v="2"], [data-v="3"]), .nivamin.min-5 .nivakort:not([data-v="5"]) { opacity: .4; }
.inm-valj { font-size: 14px; color: var(--text-2); margin: 4px 0 8px; }
.inm-valj span { color: var(--dampad); }
.inm-kort .nivakort { min-height: 64px; }
.inm-kort .nivakort b { font-size: 16px; }
.inm-kort .nivakort span { font-size: 13px; }
.inm-kort .nivabesk { margin-top: 14px; }
.inm-kort .nivabesk h4 { font-size: 19px; }
.inm-kort .nivabesk p, .inm-kort .nivabesk ul { font-size: 14.5px; }
.inm-kort h1 .aspektinfo { margin-left: 8px; vertical-align: middle; }
.inm-kort .aspekt-forklaring { margin: 0 0 14px; font-size: 14.5px; }
.niva-exempel { margin: 10px 0 0 !important; padding: 8px 10px; background: var(--yta-2); border-radius: 6px; }
.inm-risk-text { font-size: 16px; font-weight: 600; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--yta-2); }
@media (max-width: 560px) { .inm-kort .nivaval { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; } }
.h1-kommun { font-weight: 400; color: var(--text-2); }
.hjalp-steg { display: flex; align-items: center; gap: 10px; border-left: 4px solid var(--steg); padding-left: 10px; }
.hjalp-steg span { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--steg); color: #fff; font-size: 15px; font-weight: 700; }
.hjalp-ruta { margin: 12px 0; padding: 10px 14px; border-radius: 8px; border-left: 5px solid var(--accent); background: var(--accent-svag); }
.hjalp-ruta.tips { border-color: var(--ok); background: var(--ok-svag); }
.hjalp-ruta.tips a { color: var(--ok); font-weight: 600; }
.hjalp-ruta.viktigt { border-color: var(--varning); background: var(--varning-svag); }
/* Användare: e-post 20 % smalare (längsta adresserna kortas med … och visas hela vid hovring), mindre datumtext. */
td.kontonamn { max-width: 30ch; line-height: 1.35; }
td.kontonamn div { font-size: 12.5px; color: var(--text-2); }
td.kontonamn .kontoepost { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.kontodatum { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.hjalp-version { margin: -4px 0 12px; font-size: 15px; font-weight: 600; color: var(--text-2); }
/* Inställningar: Backup och Logg som knappar överst. Utan supportavtal blir de röda. */
.instknappar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.instknappar .knapp { padding: 9px 18px; font-size: 15px; }
.instknappar .knapp.avtalsaknas { background: #c62828; border-color: #c62828; }
.instknappar svg [fill]:not([fill="none"]) { fill: #fff; fill-opacity: .3; }
.instknappar svg [stroke]:not([stroke="none"]) { stroke: #fff; }
.instknappar svg.ikon { width: 18px; height: 18px; }
/* Versioner: en rad per version, den som körs markerad. */
table.versioner td:first-child { white-space: nowrap; vertical-align: top; }
table.versioner tr.aktuell td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Varning för administratörer när supportavtalet eller avtalsbeviset snart går ut. */
.avtalsvarning { margin: 0; padding: 9px 16px; background: var(--varning-svag); color: var(--text); border-bottom: 1px solid var(--varning); font-size: 14px; }
.avtalsruta ul { margin: 0 0 10px; padding-left: 20px; }
/* Risker: utskrift på en liggande A4. Klassen utskriftslage sätts medan utskriften pågår (skrivUtPaEnSida),
   och zoom förminskar resten om det ändå inte får plats. */
@page riskerA4 { size: A4 landscape; margin: 10mm; }
.utskriftsinfo { display: none; }
.risker-sida.utskriftslage { page: riskerA4; width: 1047px; font-size: 10px; }
.utskriftslage .listhuvud { margin-bottom: 4px; align-items: baseline; }
.utskriftslage .listhuvud h1 { font-size: 16px; margin: 0; }
.utskriftslage .utskriftsinfo { display: inline; font-size: 10px; color: #555; margin-left: 10px; }
.utskriftslage .listhuvud .knapp { display: none; }
.utskriftslage .nyckelrutnat { grid-template-columns: repeat(9, 1fr) !important; gap: 4px !important; margin-bottom: 5px; }
.utskriftslage .nyckelkort { padding: 3px 5px !important; }
.utskriftslage .nyckelkort small { font-size: 8px; line-height: 1.2; }
.utskriftslage .nyckelkort .siffra { font-size: 15px; margin: 0; }
.utskriftslage .sakerhet-rutnat { grid-template-columns: 1fr 260px; gap: 5px; margin-bottom: 5px; }
.utskriftslage .kort { padding: 5px 7px; margin: 0 0 5px !important; box-shadow: none; border-color: #ccc; break-inside: avoid; }
.utskriftslage h2 { font-size: 11px; margin: 0 0 3px; }
.utskriftslage h2 small, .utskriftslage .rubrikikon { font-size: 9px; }
.utskriftslage .rubrikikon { display: none; }
.utskriftslage .tabellram { max-height: none !important; overflow: visible !important; border: 0; }
.utskriftslage table { font-size: 8.5px; }
.utskriftslage th, .utskriftslage td { padding: 1px 4px !important; }
.utskriftslage .brist { font-size: 8.5px; padding: 0; }
.utskriftslage .marke { font-size: 7.5px; padding: 0 4px; }
.utskriftslage a { color: inherit; text-decoration: none; }
.utskriftslage .riskmatris { max-width: 230px; font-size: 9px; }
.utskriftslage .matrisrubrik, .utskriftslage .forklaring, .utskriftslage .kort > p { font-size: 8px; margin-top: 2px; }
@media print {
  .risker-sida.utskriftslage { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  main:has(.utskriftslage) { padding: 0; max-width: none; }
  body:has(.utskriftslage) .adminrad, body:has(.utskriftslage) .avtalsvarning { display: none !important; }
}
/* Ikonen efter Läge under Inställningar → Supportavtal när avtalsbeviset är inläst från fil. */
.avtalsfil { display: inline-flex; vertical-align: middle; margin-left: 8px; }
.avtalsfil svg { width: 20px; height: 20px; }
/* Installationens id under Inställningar → Supportavtal: dubbelt så stort och glest, så att de fyra tecknen går att läsa upp. */
.installationsid { font-size: 1.84em; font-weight: 600; letter-spacing: .12em; line-height: 1.2; }
/* Uppgradering under Inställningar → Versioner. */
.uppgradering { margin-bottom: 14px; border-left: 5px solid var(--accent); }
.uppgradering .knapp.avtalsaknas { background: #c62828; border-color: #c62828; }
.instknappar .marke.nyversion { background: #fff; color: var(--accent); }

/* Granska */
.granskning { display: grid; gap: 14px; max-width: 980px; }
.gr-punkt h2 { margin-bottom: 4px; }
.gr-text { margin: 0 0 10px; color: var(--text-2); }
.gr-detaljer { margin: 0 0 12px; border: 1px solid var(--kant); border-radius: 6px; padding: 6px 10px; background: var(--sida); }
.gr-detaljer summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-2); }
.gr-underlag { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.gr-underlag th { text-align: left; font-weight: 600; color: var(--text-2); padding: 4px 12px 4px 0; width: 34%; vertical-align: top; white-space: normal; }
.gr-underlag td { padding: 4px 0; vertical-align: top; }
.gr-lista { margin: 0; padding-left: 18px; }
.gr-val { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.gr-alt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--kant-2); border-radius: 999px; cursor: pointer; font-size: 13.5px; background: var(--yta); }
.gr-alt input { accent-color: var(--accent); margin: 0; }
.gr-alt.ok:has(input:checked) { background: var(--ok-svag); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.gr-alt.fara:has(input:checked) { background: var(--kritisk-svag); border-color: var(--kritisk); color: var(--kritisk); font-weight: 600; }
.gr-alt.varn:has(input:checked) { background: var(--varning-svag); border-color: var(--varning); color: var(--varning); font-weight: 600; }
.gr-alt.neutral:has(input:checked) { background: var(--sida); border-color: var(--neutral); font-weight: 600; }
.gr-punkt textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .gr-underlag th { width: 45%; } }

/* Tidslinje: avtalstid per system på en tidsaxel med versionsuppdateringar. */
.tl-ram { overflow-x: auto; }
.tl { min-width: 680px; padding: 4px 0; }
.tl-rad { display: grid; grid-template-columns: 200px 1fr; align-items: center; border-bottom: 1px solid var(--kant); min-height: 34px; }
.tl-rad:last-child { border-bottom: 0; }
.tl-namn { padding: 4px 10px; overflow: hidden; display: flex; flex-direction: column; line-height: 1.25; }
.tl-namn a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-namn small { color: var(--dampad); font-size: 11.5px; }
.tl-spar { position: relative; height: 100%; min-height: 34px; margin-right: 12px; }
.tl-axel { position: sticky; top: 0; background: var(--yta-2); min-height: 26px; z-index: 4; }
.tl-axel .tl-spar { min-height: 26px; }
.tl-arslinje { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--neutral); opacity: .7; pointer-events: none; }
.tl-axel span { position: absolute; top: 5px; padding-left: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.tl-stapel { position: absolute; top: 50%; transform: translateY(-50%); height: 16px; border-radius: 8px; overflow: hidden;
  display: block; font-size: 11px; line-height: 16px; padding: 0 6px; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;
  background: var(--ok-svag); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.tl-stapel b { font-weight: 600; }
.tl-stapel.varn { background: var(--varning-svag); color: var(--varning); border-color: color-mix(in srgb, var(--varning) 45%, transparent); }
.tl-stapel.fara { background: var(--kritisk-svag); color: var(--kritisk); border-color: color-mix(in srgb, var(--kritisk) 45%, transparent); }
.tl-stapel.lopande { background: linear-gradient(to right, var(--accent-svag) 70%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); border-right: 0; border-radius: 8px 0 0 8px; }
.tl-stapel.fortsatter-bakat { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-prick { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; cursor: help; border-radius: 50%; background: var(--nod-system); border: 1.5px solid var(--yta); box-shadow: 0 0 0 1px var(--nod-system); z-index: 2; }
.tl-prick.planerad { background: var(--yta); }
.tl-upps { position: absolute; top: calc(50% - 11px); height: 22px; width: 2px; margin-left: -1px; background: var(--allvarlig); border-radius: 1px; z-index: 1; }
.tl-idag { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--ok); z-index: 3; pointer-events: none; }
.tl-upps { cursor: help; }
.tl-forklaring { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 2px 0; font-size: 12.5px; color: var(--text-2); }
.tl-forklaring span { display: inline-flex; align-items: center; gap: 6px; }
.tl-forklaring .tl-stapel, .tl-forklaring .tl-prick, .tl-forklaring .tl-upps { position: static; transform: none; margin: 0; width: 22px; height: 10px; padding: 0; }
.tl-forklaring .tl-prick { width: 9px; height: 9px; }
.tl-forklaring .tl-upps { width: 2px; height: 14px; }
.tl-forklaring .tl-idag { position: static; display: inline-block; height: 14px; }
.tl-rubrik { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
@media (max-width: 700px) { .tl-rad { grid-template-columns: 130px 1fr; } }

/* Reservrutiner: det ifyllda formuläret skrivs ut som ett läsbart kort (rr-enskild), inte som formulär. */
.rr-summa { margin: 0 0 12px; }
.rr-utskrift { display: grid; gap: 14px; max-width: 980px; }
.rr-enskild { display: none; }
#rrform { max-width: none; }
#rrform textarea { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; border: 1px solid var(--kant-2); border-radius: 6px; padding: 8px 10px; background: var(--yta); line-height: 1.5; overflow: hidden; }
#rrform textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }.rr-kort h2 { display: flex; align-items: center; gap: 10px; }
.rr-kort .gr-underlag th { width: 220px; }
@media print {
  #rrform { display: none; }
  .rr-enskild { display: grid; }
  .rr-kort { break-inside: avoid; }
}