:root {
  --bla: #0f2942;
  --bla-ljus: #1c4670;
  --accent: #f5a623;
  --bg: #f4f6f8;
  --kort: #fff;
  --text: #16202b;
  --svag: #64748b;
  --linje: #e2e8f0;
  --rod: #c62828;
  --gron: #2e7d32;
  --gul: #ef6c00;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
.dold { display: none !important; }

/* ---------- inloggning ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; background: var(--bla); padding: 24px; }
.login-kort { background: #fff; border-radius: 14px; padding: 28px 24px; width: 100%; max-width: 380px; }
.login-kort h1 { margin: 0; font-size: 30px; letter-spacing: 2px; color: var(--bla); }
.underrubrik { margin: 4px 0 22px; color: var(--svag); font-size: 14px; }
.hjalp { margin: 16px 0 0; font-size: 13px; color: var(--svag); text-align: center; }

label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--svag); }
input, select, textarea {
  width: 100%; margin-top: 5px; padding: 12px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--linje); border-radius: 9px; background: #fff; color: var(--text);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bla-ljus); outline-offset: -1px; }

.knapp {
  display: inline-block; padding: 13px 18px; border: 0; border-radius: 9px; font-size: 16px;
  font-weight: 600; font-family: inherit; cursor: pointer; background: var(--linje); color: var(--text);
}
.knapp.primar { background: var(--bla); color: #fff; width: 100%; }
.knapp.liten { padding: 8px 13px; font-size: 14px; }
.knapp:active { transform: translateY(1px); }
.lank-knapp { background: none; border: 0; color: #cbd5e1; font-size: 14px; cursor: pointer; font-family: inherit; }
.fel { color: var(--rod); font-size: 14px; margin: 10px 0 0; }

/* ---------- ram ---------- */
.topp {
  position: sticky; top: 0; z-index: 20; background: var(--bla); color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topp strong { font-size: 18px; }
.org { display: block; font-size: 12px; color: #a7c0d8; }
main { padding: 14px 14px 96px; max-width: 780px; margin: 0 auto; }

.botten {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: #fff;
  border-top: 1px solid var(--linje); display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.botten a { font-size: 11px; }

/* kontrollpunkter */
.punkt { padding: 12px 0; border-bottom: 1px solid var(--linje); }
.punkt:last-child { border-bottom: 0; }
.punkt .fraga { font-weight: 600; font-size: 15px; }
.punkt .krav { font-size: 12px; color: var(--svag); margin-top: 2px; }
.punkt .val { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.punkt .val button {
  flex: 1 1 auto; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--linje);
  background: #fff; font-family: inherit; font-size: 14px; cursor: pointer; color: var(--svag);
}
.punkt .val button.vald { color: #fff; font-weight: 700; border-color: transparent; }
.punkt .val button.vald[data-v="godkand"], .punkt .val button.vald[data-v="ja"] { background: var(--gron); }
.punkt .val button.vald[data-v="ej_godkand"], .punkt .val button.vald[data-v="nej"] { background: var(--rod); }
.punkt .val button.vald[data-v="ej_aktuell"] { background: var(--svag); }
.avsnitt-rubrik {
  background: var(--bla); color: #fff; padding: 9px 13px; border-radius: 9px;
  font-weight: 700; font-size: 14px; margin: 18px 0 8px;
}
.versionsrad {
  font-size: 12px; color: var(--svag); background: #eef2f6;
  padding: 7px 11px; border-radius: 8px; margin-bottom: 12px;
}
.botten a {
  padding: 12px 4px; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--svag); text-decoration: none;
}
.botten a.aktiv { color: var(--bla); box-shadow: inset 0 3px 0 var(--bla); }
.botten a.rapportera { color: var(--bla-ljus); }

/* ---------- kort & listor ---------- */
.kort {
  background: var(--kort); border-radius: 12px; padding: 14px; margin-bottom: 10px;
  border: 1px solid var(--linje);
}
a.kort { display: block; color: inherit; text-decoration: none; }
.kort-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kort h3 { margin: 4px 0 6px; font-size: 16px; }
.meta { font-size: 13px; color: var(--svag); }
.nummer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--svag); font-size: 13px; }

.bricka {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 700; white-space: nowrap;
}
.b-ny { background: #fdecea; color: var(--rod); }
.b-under_utredning { background: #fff3e0; color: var(--gul); }
.b-atgardad { background: #e8f5e9; color: var(--gron); }
.b-stangd { background: #eceff1; color: var(--svag); }
.b-typ { background: #e7eef6; color: var(--bla-ljus); }
.b-allvar { background: var(--bla); color: #fff; }

.filter { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 4px; }
.filter button {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linje);
  background: #fff; font-size: 14px; font-family: inherit; cursor: pointer; color: var(--svag);
}
.filter button.aktiv { background: var(--bla); border-color: var(--bla); color: #fff; font-weight: 600; }

.tom { text-align: center; color: var(--svag); padding: 44px 20px; }
.laddar { text-align: center; color: var(--svag); padding: 30px; }

/* ---------- detalj ---------- */
.rubrikrad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
h2 { font-size: 20px; margin: 8px 0 12px; }
h4 { margin: 20px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--svag); }
.faktarad { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linje); font-size: 14px; }
.faktarad:last-child { border-bottom: 0; }
.faktarad span:first-child { color: var(--svag); }
.brodtext { white-space: pre-wrap; }

.bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.bilder figure { margin: 0; }
.bilder img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; background: var(--linje); }
.bilder figcaption { font-size: 11px; color: var(--svag); margin-top: 3px; }

.logg { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.logg li { padding: 7px 0; border-bottom: 1px solid var(--linje); color: var(--svag); }
.logg li:last-child { border-bottom: 0; }
.logg b { color: var(--text); }

.dialog { display: flex; flex-direction: column; gap: 8px; }
.bubbla { background: #eef2f6; padding: 9px 12px; border-radius: 11px; font-size: 14px; }
.bubbla.egen { background: #dce9f5; align-self: flex-end; }
.bubbla .avsandare { display: block; font-size: 11px; color: var(--svag); font-weight: 700; }

.knapprad { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tva-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 430px) { .tva-kol { grid-template-columns: 1fr; gap: 0; } }

.miniatyrer { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.miniatyrer img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; }
.posrad { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--svag); margin-bottom: 14px; }

.stat-rutor { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.stat-ruta { background: var(--kort); border: 1px solid var(--linje); border-radius: 12px; padding: 14px; text-align: center; }
.stat-ruta .tal { font-size: 28px; font-weight: 700; display: block; }
.stat-ruta .etikett { font-size: 12px; color: var(--svag); }
.stapel { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; font-size: 14px; }
.stapel .namn { width: 130px; flex: 0 0 auto; color: var(--svag); }
.stapel .bar { height: 20px; background: var(--bla-ljus); border-radius: 4px; min-width: 3px; }