/* Hotbevakning – egen stil ovanpå Bootstrap. Inga inline-stilar någonstans (CSP).
   Mjuk och ljus: en kall, lätt grönton i allt grått, en enda accentfärg (dämpad turkos),
   mjuka hörn och skuggor tonade i samma färg som ytan. */

@font-face {
    font-family: "Figtree";
    src: url("fonts/figtree.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Outfit";
    src: url("fonts/outfit.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --yta: #f4f7f7;
    --yta-2: #eaf1f0;
    --kort: #ffffff;
    --kant: #dfe7e6;
    --kant-svag: #edf2f1;
    --text: #17282b;
    --text-2: #43585c;
    --dampad: #6a7e82;

    --accent: #12786f;
    --accent-hover: #0d625a;
    --accent-mjuk: #e2f2ef;
    --accent-ljus: #6cc7b9;
    --varm: #fbd38d;

    --rod: #b23a3d;
    --rod-mjuk: #fbeaea;
    --orange: #b05a20;
    --orange-mjuk: #fcefe4;
    --gul: #86680f;
    --gul-mjuk: #fbf4dc;
    --gron: #2d7a4e;
    --gron-mjuk: #e5f4ea;

    --skugga-liten: 0 1px 2px rgba(23, 60, 64, .05);
    --skugga: 0 1px 2px rgba(23, 60, 64, .04), 0 10px 30px -14px rgba(23, 60, 64, .18);
    --skugga-stor: 0 2px 4px rgba(23, 60, 64, .04), 0 24px 48px -20px rgba(23, 60, 64, .28);

    --radie-stor: 20px;
    --radie: 14px;
    --radie-liten: 10px;
    --rubrikfont: "Outfit", "Segoe UI", system-ui, sans-serif;

    --bs-body-font-family: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--yta);
    --bs-primary: #12786f;
    --bs-primary-rgb: 18, 120, 111;
    --bs-link-color: #12786f;
    --bs-link-color-rgb: 18, 120, 111;
    --bs-link-hover-color: #0d625a;
    --bs-link-hover-color-rgb: 13, 98, 90;
    --bs-border-color: #dfe7e6;
    --bs-secondary-color: #6a7e82;
    --bs-border-radius: 10px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
html, body { background: var(--yta); color: var(--text); }
body { min-height: 100dvh; display: flex; flex-direction: column; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.innehall { flex: 1; padding-top: 2.25rem; padding-bottom: 4rem; }
.innehall:focus { outline: none; }

h1, h2, h3, .marke, .tal, .pris { font-family: var(--rubrikfont); }
h1, h2, h3 { color: var(--text); text-wrap: balance; letter-spacing: -.015em; }
h1 { font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 600; margin-bottom: 1.1rem; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
p, li { text-wrap: pretty; }
h1:focus, h1:focus-visible { outline: none; } /* Blazor flyttar fokus till h1 efter navigering. */

a { text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.hoppa { position: absolute; left: 1rem; top: -3rem; z-index: 50; background: var(--accent); color: #fff; padding: .5rem .9rem; border-radius: var(--radie-liten); text-decoration: none; transition: top .2s; }
.hoppa:focus { top: .75rem; color: #fff; }

/* ---------------------------------------------------------------- knappar och formulär */
.btn { border-radius: var(--radie-liten); font-weight: 600; transition: background-color .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s; }
.btn:active { transform: scale(.98); }
.btn-lg { padding: .75rem 1.4rem; font-size: 1.05rem; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: #0a4f49; --bs-btn-active-border-color: #0a4f49; --bs-btn-disabled-bg: #8fb9b3; --bs-btn-disabled-border-color: #8fb9b3; box-shadow: 0 6px 16px -8px rgba(18, 120, 111, .7); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: #a9d5ce; --bs-btn-hover-bg: var(--accent-mjuk); --bs-btn-hover-color: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: #d2ebe6; --bs-btn-active-color: var(--accent-hover); --bs-btn-active-border-color: var(--accent); }
.btn-outline-secondary { --bs-btn-color: var(--text-2); --bs-btn-border-color: var(--kant); --bs-btn-hover-bg: var(--yta-2); --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: #c9d6d4; --bs-btn-active-bg: #dde8e6; --bs-btn-active-color: var(--text); --bs-btn-active-border-color: #c9d6d4; background: #fff; }
.btn-outline-danger { --bs-btn-color: var(--rod); --bs-btn-border-color: #e8c4c5; --bs-btn-hover-bg: var(--rod-mjuk); --bs-btn-hover-color: var(--rod); --bs-btn-hover-border-color: var(--rod);
    --bs-btn-active-bg: #f5d8d9; --bs-btn-active-color: var(--rod); background: #fff; }
.form-control, .form-select { background-color: #fff; border-radius: var(--radie-liten); border-color: var(--kant); transition: border-color .2s, box-shadow .2s; }
.form-control:focus, .form-select:focus { border-color: var(--accent-ljus); box-shadow: 0 0 0 .22rem rgba(108, 199, 185, .25); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent-ljus); box-shadow: 0 0 0 .22rem rgba(108, 199, 185, .25); }
.form-label { font-weight: 500; color: var(--text-2); }
.form-text { color: var(--dampad); }
.form-floating > .form-control { border-radius: var(--radie-liten); }
.textlank { color: var(--text); font-weight: 600; text-decoration: none; }
.textlank span { display: inline-block; transition: transform .2s; }
.textlank:hover span { transform: translateX(3px); }
.knapprad { display: flex; gap: .75rem 1.25rem; flex-wrap: wrap; align-items: center; }
.knapprad form { margin: 0; }
code { color: var(--accent-hover); background: var(--accent-mjuk); padding: .05rem .3rem; border-radius: 5px; }

/* ---------------------------------------------------------------- sidhuvud */
.topp { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--kant-svag); }
.topp-rad { display: flex; align-items: center; gap: 1.75rem; min-height: 66px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; }
.marke:hover { color: var(--text); }
.huvudmeny { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.huvudmeny a { color: var(--text-2); text-decoration: none; padding: .45rem .75rem; border-radius: var(--radie-liten); font-size: .95rem; font-weight: 500; transition: background-color .2s, color .2s; }
.huvudmeny a:hover { color: var(--text); background: var(--yta-2); }
.huvudmeny a.active { color: var(--accent-hover); background: var(--accent-mjuk); }
.huvudmeny a.admin-lank { color: var(--orange); }
.konto { display: flex; align-items: center; gap: .9rem; }
.konto form { margin: 0; }
.konto-lank { color: var(--text-2); text-decoration: none; font-size: .92rem; font-weight: 500; }
.konto-lank:hover { color: var(--text); }
.org-namn { font-size: .8rem; color: var(--text-2); background: var(--yta-2); border-radius: 999px; padding: .2rem .7rem; }

/* ---------------------------------------------------------------- sidfot */
.fot { border-top: 1px solid var(--kant-svag); padding: 2.5rem 0 1.5rem; font-size: .9rem; color: var(--dampad); background: #fff; }
.fot-rad { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.fot-marke { display: flex; flex-direction: column; gap: .2rem; max-width: 26rem; }
.fot-marke strong { font-family: var(--rubrikfont); color: var(--text); font-size: 1.05rem; font-weight: 600; }
.fot-lankar { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.fot a { color: var(--text-2); text-decoration: none; }
.fot a:hover { color: var(--accent); text-decoration: underline; }
.fot-liten { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--kant-svag); font-size: .8rem; }

/* ---------------------------------------------------------------- byggstenar */
.kort { background: var(--kort); border: 1px solid var(--kant-svag); border-radius: var(--radie); padding: 1.4rem 1.5rem 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--skugga); }
.kort > h2:first-child, .kort > h3:first-child { margin-top: 0; }
.kort.mjuk { background: var(--accent-mjuk); border-color: transparent; box-shadow: none; }
.kort.varning-kort { border-color: #f0dcaa; background: #fffbf1; }
.smal-kort { max-width: 34rem; margin: 2rem auto; }
.smal-formular { max-width: 40rem; }
.ingress { color: var(--text-2); max-width: 62ch; font-size: 1.05rem; }
.overrubrik { font-size: .82rem; font-weight: 600; color: var(--accent); margin-bottom: .5rem; letter-spacing: .02em; }
.tom { color: var(--dampad); padding: 1.5rem 0; text-align: center; margin: 0; }
.tillbaka { color: var(--dampad); text-decoration: none; font-size: .92rem; }
.tillbaka:hover { color: var(--accent); }
.sidhuvud-rad { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sidhuvud-rad h1 { margin-bottom: 0; }
.etiketter { display: flex; flex-wrap: wrap; gap: .3rem; }
.enkel-lista { list-style: none; padding: 0; margin: 0; }
.enkel-lista li { padding: .35rem 0; border-bottom: 1px solid var(--kant-svag); }
.enkel-lista li:last-child { border-bottom: 0; }
.bockar { list-style: none; padding: 0; margin: 0; }
.bockar li { position: relative; padding: .3rem 0 .3rem 1.7rem; }
.bockar li::before { content: ""; position: absolute; left: 0; top: .72rem; width: 1rem; height: .55rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.snabbval { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.snabbval form { margin: 0; }
.under { color: var(--dampad); font-size: .86rem; }

.siffror { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.siffra { background: var(--kort); border: 1px solid var(--kant-svag); border-radius: var(--radie); padding: 1.1rem 1.25rem; box-shadow: var(--skugga-liten); }
.siffra .tal { font-size: 1.9rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.siffra .etikett { color: var(--dampad); font-size: .86rem; margin-top: .2rem; }
.siffra.varning .tal { color: var(--rod); }
h2.avsnitt { margin: 2rem 0 1rem; }

.lista { width: 100%; border-collapse: collapse; }
.lista th { font-size: .78rem; color: var(--dampad); font-weight: 600; padding: .55rem .5rem; border-bottom: 1px solid var(--kant); text-align: left; }
.lista td { padding: .7rem .5rem; border-bottom: 1px solid var(--kant-svag); vertical-align: top; font-variant-numeric: tabular-nums; }
.lista tr:last-child td { border-bottom: 0; }
.lista tbody tr { transition: background-color .15s; }
.lista tbody tr:hover { background: #f8fbfa; }
.lista .titel { font-weight: 600; color: var(--text); text-decoration: none; }
.lista .titel:hover { color: var(--accent); text-decoration: underline; }
.lista .under { color: var(--dampad); font-size: .85rem; }
.lista form { display: inline; margin: 0; }
.tabellram { overflow-x: auto; }

/* Etiketter för händelser och status */
.et { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: .14rem .45rem; border-radius: 6px; margin: 0 .25rem .2rem 0; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
.et-kritisk, .et-kev, .et-lacka { background: var(--rod-mjuk); color: var(--rod); border-color: #f1d2d3; }
.et-hog { background: var(--orange-mjuk); color: var(--orange); border-color: #f3dcc8; }
.et-medel { background: var(--gul-mjuk); color: var(--gul); border-color: #efe1b1; }
.et-lag, .et-okand { background: var(--yta-2); color: var(--text-2); border-color: var(--kant); }
.et-poc { background: #efedf8; color: #5b4b9a; border-color: #e0dbf2; }
.et-ransomware { background: #2a2f33; color: #f4c7c8; }
.et-typ { background: var(--accent-mjuk); color: var(--accent-hover); border-color: #cde8e3; }
.et-ok { background: var(--gron-mjuk); color: var(--gron); border-color: #cbe7d5; }
.et-admin { background: var(--text); color: #fff; }
.et-direkt { background: var(--rod); color: #fff; }

.filter { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filter .form-control, .filter .form-select { width: auto; min-width: 10rem; }
.filter .sok { min-width: 18rem; flex: 1; }
.sidor { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }

.detalj-text { white-space: pre-line; line-height: 1.65; max-width: 75ch; }
.fakta { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
.fakta dt { color: var(--dampad); font-weight: 500; }
.fakta dd { margin: 0; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85rem; word-break: break-all; }
textarea.mono { word-break: normal; }
.hemlighet { background: #16292c; color: #b7f0e2; padding: .8rem 1rem; border-radius: var(--radie-liten); font-family: ui-monospace, Consolas, monospace; word-break: break-all; }

.status-ok { color: var(--gron); font-weight: 600; }
.status-fel { color: var(--rod); font-weight: 600; }
.status-av { color: var(--dampad); }

.alert-hb { border: 1px solid #cde8e3; background: var(--accent-mjuk); padding: .85rem 1.1rem; border-radius: var(--radie-liten); margin-bottom: 1.1rem; color: var(--text); }
.alert-hb.fel { border-color: #f1d2d3; background: var(--rod-mjuk); }

/* ---------------------------------------------------------------- admin */
.adminmeny { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; padding: .35rem; background: var(--kort); border: 1px solid var(--kant-svag); border-radius: var(--radie); box-shadow: var(--skugga-liten); }
.adminmeny a { color: var(--text-2); text-decoration: none; padding: .4rem .8rem; border-radius: var(--radie-liten); font-size: .92rem; font-weight: 500; transition: background-color .2s, color .2s; }
.adminmeny a:hover { background: var(--yta-2); color: var(--text); }
.adminmeny a.active { background: var(--accent-mjuk); color: var(--accent-hover); }
.adminmeny-avdelare { width: 1px; align-self: stretch; background: var(--kant); margin: .2rem .35rem; }

.diagram { margin: 0; }
.diagram svg { width: 100%; height: 140px; display: block; }
.diagram .stapel { fill: var(--accent-ljus); transition: fill .15s; }
.diagram .stapel:hover { fill: var(--accent); }
.diagram figcaption { display: flex; justify-content: space-between; font-size: .78rem; color: var(--dampad); margin-top: .35rem; }

.serp { border: 1px solid var(--kant-svag); border-radius: var(--radie-liten); padding: .8rem 1rem; margin: .5rem 0 1rem; background: #fff; max-width: 40rem; font-family: Arial, sans-serif; }
.serp-url { font-size: .8rem; color: #4d5156; }
.serp-titel { color: #1a0dab; font-size: 1.15rem; line-height: 1.3; margin: .15rem 0; }
.serp-text { color: #4d5156; font-size: .88rem; line-height: 1.45; }

/* ---------------------------------------------------------------- startsidan */
.hjalte { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center;
    padding: 3.5rem 3rem 4rem; margin-bottom: 2rem; border-radius: var(--radie-stor); overflow: hidden; isolation: isolate;
    background:
        radial-gradient(600px 340px at 92% 8%, rgba(251, 211, 141, .35), transparent 70%),
        radial-gradient(700px 420px at 8% 100%, rgba(108, 199, 185, .30), transparent 70%),
        linear-gradient(160deg, #ffffff 0%, #eef6f4 100%);
    border: 1px solid var(--kant-svag); box-shadow: var(--skugga); }
/* Svagt korn så att ytan inte känns platt. */
.hjalte::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hjalte h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin-bottom: 1.1rem; }
.hjalte .ingress { font-size: 1.12rem; margin-bottom: 1.6rem; }
.lugnande { margin: 1.1rem 0 0; font-size: .88rem; color: var(--dampad); }

.hjalte-bild { position: relative; min-height: 300px; }
.exempelkort { position: relative; z-index: 2; background: #fff; border-radius: var(--radie); padding: 1.25rem 1.35rem; box-shadow: var(--skugga-stor); border: 1px solid var(--kant-svag); max-width: 24rem; margin-left: auto; margin-top: 7.5rem; }
.exempelkort-bak { position: absolute; z-index: 1; top: 0; left: 0; margin: 0; max-width: 17rem; transform: rotate(-3deg); opacity: .92; box-shadow: var(--skugga); }
.exempel-etikett { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--rod); background: var(--rod-mjuk); padding: .15rem .5rem; border-radius: 6px; }
.exempel-titel { font-family: var(--rubrikfont); font-weight: 600; font-size: 1.08rem; line-height: 1.3; margin: .55rem 0 .4rem; }
.exempel-fakta { font-size: .84rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.exempel-bevakning { font-size: .84rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--kant); color: var(--text-2); }
.exempel-fot { font-size: .76rem; color: var(--dampad); margin-top: .3rem; }
.exempel-rubrik { font-family: var(--rubrikfont); font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.exempel-rad { font-size: .8rem; color: var(--text-2); padding: .2rem 0; display: flex; align-items: center; gap: .5rem; }
.prick { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; flex: none; }
.prick-gul { background: #e3b341; }
.prick-gra { background: #b8c6c4; }

.siffrorad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--kant-svag); border-radius: var(--radie); overflow: hidden; margin-bottom: 4.5rem; border: 1px solid var(--kant-svag); }
.siffrorad div { background: #fff; padding: 1.1rem 1.3rem; display: flex; flex-direction: column; }
.siffrorad strong { font-family: var(--rubrikfont); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.siffrorad span { font-size: .85rem; color: var(--dampad); }

h2.stor { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 1rem; }
.tva-spalter { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; margin-bottom: 4.5rem; align-items: start; }
.steg { list-style: none; counter-reset: steg; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steg li { counter-increment: steg; position: relative; background: #fff; border-radius: var(--radie); padding: 1.15rem 1.3rem 1.2rem 4.2rem; box-shadow: var(--skugga-liten); border: 1px solid var(--kant-svag); }
.steg li::before { content: counter(steg); position: absolute; left: 1.2rem; top: 1.1rem; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--accent-mjuk);
    color: var(--accent-hover); font-family: var(--rubrikfont); font-weight: 700; display: grid; place-items: center; }
.steg h3 { margin-bottom: .25rem; }
.steg p { margin: 0; color: var(--text-2); }

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 4.5rem; }
.ruta { background: #fff; border-radius: var(--radie); padding: 1.5rem; border: 1px solid var(--kant-svag); box-shadow: var(--skugga-liten); }
.ruta p { margin: 0; color: var(--text-2); }
.ruta-stor { grid-row: span 2; background: linear-gradient(170deg, #12786f, #0d5c55); color: #e6f5f2; border: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 18rem; }
.ruta-stor h3 { color: #fff; font-size: 1.45rem; }
.ruta-stor p { color: #cfe9e4; }
.ruta-bred { grid-column: span 2; background: var(--accent-mjuk); border-color: transparent; box-shadow: none; }

.avsnitt-luft { margin-bottom: 4.5rem; }
.kallmoln { display: flex; flex-wrap: wrap; gap: .5rem; }
.kallmoln span { background: #fff; border: 1px solid var(--kant-svag); border-radius: 999px; padding: .35rem .9rem; font-size: .92rem; color: var(--text-2); box-shadow: var(--skugga-liten); }

.planer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radie); padding: 1.6rem 1.5rem 1.5rem; border: 1px solid var(--kant-svag); box-shadow: var(--skugga-liten); }
.plan h3 { font-size: 1.15rem; margin-bottom: .1rem; }
.plan .pris { font-size: 1.7rem; font-weight: 600; margin: .3rem 0 1rem; letter-spacing: -.02em; }
.plan ul { padding-left: 1.1rem; color: var(--text-2); flex: 1; margin-bottom: 1.4rem; }
.plan .btn { align-self: flex-start; }
.plan-vald { border: 2px solid var(--accent); box-shadow: var(--skugga); }
.plan-flagga { position: absolute; top: -.75rem; left: 1.4rem; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 600; padding: .2rem .7rem; border-radius: 6px; }

.band { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: var(--accent-mjuk); border-radius: var(--radie-stor); padding: 2rem 2.25rem; margin-bottom: 4.5rem; }
.band h2 { font-size: 1.45rem; margin-bottom: .3rem; }
.band p { color: var(--text-2); max-width: 55ch; }
.sakerhetsrad { max-width: 62ch; }
.sakerhetsrad p { color: var(--text-2); }

.sida-hjalte { margin-bottom: 2rem; }
.sida-hjalte h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; }

/* Äldre sidor */
.tre { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; }
.tre .kort h3 { font-size: 1.05rem; }

/* ---------------------------------------------------------------- inloggningssidor */
.qr { background: #fff; padding: .5rem; border: 1px solid var(--kant); border-radius: var(--radie-liten); }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; padding: .6rem 1.25rem .7rem; background: #fdf3d8; box-shadow: 0 -1px 2px rgba(23, 60, 64, .2); z-index: 40; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.validation-message { color: var(--rod); font-size: .875rem; }
.invalid { outline: 1px solid var(--rod); }

/* ------------------------------------------------------------------ driftmeddelanden */
.driftband { border-bottom: 1px solid var(--kant); }
.drift { padding-top: .65rem; padding-bottom: .65rem; font-size: .95rem; display: flex; gap: .6rem; align-items: baseline; }
.drift::before { content: ""; flex: 0 0 .55rem; height: .55rem; border-radius: 50%; background: var(--accent); transform: translateY(-.05rem); }
.driftband.drift-info, .drift.drift-info { background: var(--accent-mjuk); }
.driftband.drift-varning, .drift.drift-varning { background: var(--gul-mjuk); }
.drift-varning::before { background: var(--gul); }
.driftband.drift-storning, .drift.drift-storning { background: var(--rod-mjuk); }
.drift-storning::before { background: var(--rod); }
.driftrad { padding: .75rem 0; border-bottom: 1px solid var(--kant-svag); }
.driftrad .drift { padding: .5rem .75rem; border-radius: var(--radie-liten); margin-bottom: .35rem; }
.driftrad form { margin-top: .4rem; }
.studsband { background: var(--orange-mjuk); border-bottom: 1px solid #f3dcc8; }
.studsband .drift::before { background: var(--orange); }

/* ------------------------------------------------------------------ text och ärenden */
.lasbar { max-width: 54rem; }
.lasbar p, .lasbar li { max-width: 68ch; }
.lasbar h2 { font-size: 1.15rem; margin-top: 1.6rem; }
.lasbar h2:first-of-type { margin-top: 1rem; }
.trad { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.trad-post { padding: .9rem 1.1rem; border-radius: var(--radie-liten); background: var(--yta); border: 1px solid var(--kant-svag); }
.trad-post.fran-oss { background: var(--accent-mjuk); border-color: #cde8e3; margin-left: 1.5rem; }
.trad-post.intern { background: var(--gul-mjuk); border-color: #efe1b1; border-style: dashed; }
.trad-huvud { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .35rem; font-size: .92rem; }
.trad-huvud time { color: var(--dampad); margin-left: auto; font-size: .85rem; }
.trad-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.honung { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ domäner */
.doman { padding: 1rem 0; border-bottom: 1px solid var(--kant-svag); }
.doman:last-child { border-bottom: 0; padding-bottom: 0; }
.doman-huvud { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.doman-knappar { margin-left: auto; display: flex; gap: .4rem; }
.dns-post { background: var(--yta); border-radius: var(--radie-liten); padding: .7rem 1rem; margin: 0; }

@media (max-width: 992px) {
    .hjalte { grid-template-columns: 1fr; padding: 2.5rem 1.75rem 3rem; }
    .hjalte-bild { min-height: 0; }
    .exempelkort-bak { display: none; }
    .exempelkort { margin: 0; max-width: none; }
    .tva-spalter { grid-template-columns: 1fr; gap: 1.5rem; }
    .bento { grid-template-columns: 1fr 1fr; }
    .ruta-stor { grid-row: auto; grid-column: span 2; min-height: 0; }
    .planer { grid-template-columns: 1fr; }
    .siffrorad { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .topp { position: static; }
    .topp-rad { padding-top: .6rem; padding-bottom: .6rem; gap: .6rem; }
    .huvudmeny { order: 3; flex: 1 0 100%; overflow-x: auto; flex-wrap: nowrap; }
    .konto { margin-left: auto; }
    .hjalte { padding: 2rem 1.25rem 2.25rem; }
    .bento { grid-template-columns: 1fr; }
    .ruta-stor, .ruta-bred { grid-column: auto; }
    .band { padding: 1.5rem; }
    .lista .dolj-smal { display: none; }
    .trad-post.fran-oss { margin-left: 0; }
    .doman-knappar { margin-left: 0; }
}