.accordion {
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-active-bg: var(--bs-tertiary-bg);
}
.accordion-no-icon .accordion-button::after {
    display: none;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: -.2rem;
    display: none;
}

.dropdown-submenu.show > .dropdown-menu {
    display: block;
}
.dropdown-submenu > .dropdown-toggle {
    display: flex;
    align-items: center;
}

.dropdown-submenu > .dropdown-toggle::after {
    margin-left: auto;
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
}

/* Tabeller med mye data per rad (målinger og innsendinger): mindre skrift (som .small).
   Andre lister i admin har standard skriftstørrelse. */
.table-dense {
    font-size: .875em;
}
.table-dense .badge {
    font-size: .8em;
}
.table-dense .btn-sm {
    --bs-btn-font-size: .8rem;
    --bs-btn-padding-y: .15rem;
}

/* Klikkbare tabellrader (se admin.js): hele raden åpner, navnet er vanlig tekst */
tr[data-href] {
    cursor: pointer;
}
tr[data-href]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Menylinjen: ingen linjebrudd i menypunkter og knapper; lange fjordnavn kortes av. */
.navbar .nav-link,
.navbar .btn {
    white-space: nowrap;
}
.navbar .fjord-switch {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Valg av widget-type på modul */
.widget-type-card { transition: border-color .15s, box-shadow .15s; }
.widget-type-card:hover, .widget-type-card:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
/* Typevalget i widget-vinduet (knapper); typer som bare kan forekomme én gang og alt er med, grået ut */
button.widget-type-card { color: inherit; background: var(--bs-body-bg); padding: 0; }
button.widget-type-card { position: relative; overflow: hidden; }
button.widget-type-card:disabled { box-shadow: none; border-color: var(--bs-border-color); cursor: not-allowed; }
button.widget-type-card:disabled .card-body { opacity: .45; }
/* «Kun én»: diagonalt bånd i øvre høyre hjørne. Står klart også når kortet er grået ut (typen er alt med). */
.widget-type-ribbon {
    position: absolute; top: 14px; right: -34px; width: 120px;
    transform: rotate(45deg); text-align: center;
    padding: 2px 0; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    background: var(--bs-warning); color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    pointer-events: none;
}

/* Forhåndsvisning av skjermoppsettet på modulsiden */
/* Liggende (16:9) og høykant (9:16) side om side. Bredden deles i forholdet
   16/9 : 9/16, så begge får samme høyde. */
/* Forhåndsvisningen av visningen: eget felt (liggende og høykant med etikettene), skilt fra
   forklaringen under. Fargene følger lyst/mørkt tema (--lp-*). */
.layout-previews {
    --lp-screen: #dbe8ee;
    --lp-box: #a9c8d8;
    --lp-text: #0d3347;
    --lp-empty: #4f6d7d;
    display: flex;
    gap: 12px;
    max-width: 54rem;
    padding: 14px 14px 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .layout-previews {
    --lp-screen: #071824;
    --lp-box: #163a52;
    --lp-text: #cfe0ea;
    --lp-empty: #9fb7c6;
}
.layout-previews + .form-text { margin-top: .9rem; }
.layout-figure { margin: 0; min-width: 0; }
.layout-figure-landscape { flex: 1.7778 1 0; }
.layout-figure-portrait { flex: .5625 1 0; }
.layout-figure figcaption { margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Retningen under hver forhåndsvisning: tydelig merke, med antall kolonner under */
.layout-orientation {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .6rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); border: 1px solid var(--bs-border-color);
}
.layout-preview {
    display: flex;
    flex-direction: column;
    gap: 3px;
    aspect-ratio: 16 / 9;
    padding: 4px;
    border-radius: .5rem;
    background: var(--lp-screen);
    border: 1px solid var(--bs-border-color);
}
/* Som på skjermen: hver rad fyller bredden, boksene deler den etter størrelse. */
.layout-figure-portrait .layout-preview { aspect-ratio: 9 / 16; }
.layout-preview-row { flex: 1 1 0; min-height: 0; display: flex; gap: 3px; }
.layout-box {
    flex: var(--span, 2) 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 2px;
    border-radius: 4px;
    background: var(--lp-box);
    border: 2px solid transparent;
    color: var(--lp-text);
    font-size: .62rem;
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
    word-break: break-word;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.layout-box.missing { border: 2px dashed var(--bs-danger); }
.layout-box.active { background: var(--bs-primary); color: #fff; } /* bare fargen: samme kant og avstand som de andre */
.layout-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--lp-empty); }
.layout-row { transition: background-color .12s; }
.layout-row.layout-active { background-color: var(--bs-primary-bg-subtle); }
/* Her begynner en ny rad i den liggende forhåndsvisningen (admin.js): tykkere strek over raden. */
.layout-row.layout-break { box-shadow: inset 0 2px 0 var(--bs-border-color); }
.layout-row.layout-break > .drag-handle { top: 2px; } /* håndtaket dekker ikke den tykke streken */
/* Lukket meny (admin.js, applyFold): innholdet skjules i listen, pilen foran navnet åpner den igjen. */
.layout-row.layout-folded-away { display: none !important; }
.menu-fold-slot { flex: none; width: 1.5rem; display: flex; justify-content: center; align-items: center; }
.menu-fold { width: 1.1rem; height: 1.1rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; line-height: 1; border-radius: .2rem;
    /* Dempet, i samme farge som trestrekene (.layout-tree); tydeligere ved pekeren. */
    --fold: color-mix(in srgb, var(--bs-secondary-color) 75%, var(--bs-body-bg));
    --bs-btn-bg: var(--bs-body-bg); --bs-btn-color: var(--fold); --bs-btn-border-color: var(--fold);
    --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-border-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-border-color: var(--bs-emphasis-color); }

/* Innsendt JSON (popup på batch-siden) */
.payload-json { padding: 1rem 1.25rem; font-size: .8rem; line-height: 1.5; white-space: pre; tab-size: 2; background: var(--bs-tertiary-bg); }
.payload-json .json-key { color: var(--bs-info-text-emphasis); }
.payload-json .json-string { color: var(--bs-success-text-emphasis); }
.payload-json .json-number { color: var(--bs-warning-text-emphasis); }
.payload-json .json-literal { color: var(--bs-danger-text-emphasis); }

/* Widget-listen på modulsiden: faste bredder så navnene står på linje */
.flex-none { flex: none; }
.layout-move .btn { line-height: 1; }
/* Håndtaket for å dra en rad (admin/partials/drag_handle, admin.js dragSort): ligger i venstre kant av raden og
   vises (uten animasjon) når pekeren er over raden (eller håndtaket har fokus, eller raden er grepet). På berøringsskjerm (ingen
   peker over) står det alltid synlig. touch-action: none, så en finger på håndtaket drar raden i stedet for å
   rulle siden. Raden er .layout-row eller [data-drag-row] med håndtaket rett under seg; i en tabell ligger det i
   første celle (td.drag-cell). Raden som er grepet (fra museknappen trykkes), har .is-grabbed (admin.js). */
:is(.layout-row, [data-drag-row], .drag-cell) { position: relative; }
.drag-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: 0; padding: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; border: 0 solid var(--dh-border, var(--bs-border-color-translucent)); border-radius: 0;
    font-size: .9rem; line-height: 1; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); touch-action: none; }
/* Bootstrap gir knapper gjennomsiktig bakgrunn ved pekeren; håndtaket blir i stedet litt mørkere/lysere. */
/* Rammen beholdes (Bootstrap gjør den ellers gjennomsiktig, så håndtaket ser ut til å krympe). */
.btn.drag-handle:hover, .btn.drag-handle:focus-visible, .btn.drag-handle:active { color: var(--bs-emphasis-color); background: var(--bs-secondary-bg); border-color: var(--dh-border, var(--bs-border-color-translucent)); }
/* Grip-markør over håndtaket (Bootstrap gir ellers alle knapper en peke-hånd). */
button.drag-handle:not(:disabled) { cursor: grab; }
/* .is-hover: raden pekeren er over (admin.js, dragSort; ikke :hover, som kan bli hengende når radene flytter seg). */
.is-hover > .drag-handle, .is-hover > .drag-cell > .drag-handle, .is-hover > [data-drag-row] > .drag-handle, .drag-handle:focus-visible { width: .9rem; }
/* Mens en rad er grepet: bare dens håndtak vises. */
body.drag-sorting .drag-handle { width: 0; }
body.drag-sorting .is-grabbed > .drag-handle, body.drag-sorting .is-grabbed > .drag-cell > .drag-handle,
body.drag-sorting .is-grabbed > [data-drag-row] > .drag-handle { width: .9rem; }
@media (hover: none) { .drag-handle { width: .9rem; } }
.is-main > .drag-handle { display: none; } /* hovedbildet i en artikkel står alltid først */
/* Plass til håndtaket der raden ellers ikke har luft i venstre kant. */
td.drag-cell { padding-left: 1.25rem; }
.def-items-sortable .def-item-head { padding-left: 1.25rem; }
/* Svaralternativene i en quiz står på linje med spørsmålet, og håndtaket vokser ut mot venstre fra feltets kant
   (stikker ut, som på tavlen). Med ramme som feltet, og rammen oppå feltets venstre ramme (feltet står 1 px
   utenfor, som i en input-group), så håndtaket ser ut som en del av feltet. */
[data-answer-row] { padding-left: 1px; } /* veier opp for at feltet står 1 px utenfor, så det står på linje med spørsmålet */
[data-answer-row] > .drag-handle { left: auto; right: calc(100% - 1px); --dh-border: var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm) 0 0 var(--bs-border-radius-sm); }
[data-answer-row].is-hover > .drag-handle, [data-answer-row] > .drag-handle:focus-visible, body.drag-sorting [data-answer-row].is-grabbed > .drag-handle { border-width: 1px; }
@media (hover: none) { [data-answer-row] > .drag-handle { border-width: 1px; } }
/* Lister i kort (tavle, spilleliste, artikkelbilder, visningsnavn): håndtaket vokser ut fra kortets venstre kant
   (utenfor listen), med ramme som kortet og rammen oppå kortets, så det ser ut som en forlengelse av raden. Litt
   bredere enn inne i en rad. På smal skjerm og berøringsskjerm (lite plass utenfor kortet) står det inne i raden. */
@media (hover: hover) and (min-width: 576px) {
    .list-group-flush > :is(.layout-row, [data-image-row]) > .drag-handle, .def-item > [data-drag-row] > .drag-handle {
        left: auto; right: 100%; top: -1px; bottom: -1px; z-index: 5; border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius); }
    .list-group-flush > :is(.layout-row, [data-image-row]).is-hover > .drag-handle, .def-item.is-hover > [data-drag-row] > .drag-handle,
    :is(.list-group-flush, .def-item) .drag-handle:focus-visible,
    body.drag-sorting .list-group-flush > .is-grabbed > .drag-handle, body.drag-sorting .def-item.is-grabbed > [data-drag-row] > .drag-handle { width: 1.25rem; border-width: 1px; }
    body.drag-sorting .list-group-flush > :not(.is-grabbed) > .drag-handle, body.drag-sorting .def-item:not(.is-grabbed) > [data-drag-row] > .drag-handle { width: 0; border-width: 0; }
    /* Svaralternativene i en quiz: like bredt som de andre. */
    [data-answer-row].is-hover > .drag-handle, [data-answer-row] > .drag-handle:focus-visible, body.drag-sorting [data-answer-row].is-grabbed > .drag-handle { width: 1.25rem; }
    body.drag-sorting [data-answer-row]:not(.is-grabbed) > .drag-handle { width: 0; border-width: 0; }
}
/* Språktabellen: det samme når tabellen får plass uten å rulle sidelengs (rullefeltet ville ellers klippe håndtaket). */
@media (hover: hover) and (min-width: 1200px) {
    .card > .table-responsive:has(.drag-cell) { overflow: visible; }
    .drag-cell > .drag-handle { left: auto; right: 100%; top: -1px; bottom: -1px; z-index: 5; border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius); }
    tr.is-hover > .drag-cell > .drag-handle, .drag-cell > .drag-handle:focus-visible, body.drag-sorting .is-grabbed > .drag-cell > .drag-handle { width: 1.25rem; border-width: 1px; }
    body.drag-sorting tr:not(.is-grabbed) > .drag-cell > .drag-handle { width: 0; border-width: 0; }
}
/* Varigheten i en spilleliste: smalt, høyrejustert felt uten pilknapper (opptil fire sifre, PlaylistModel::MAX_DURATION_S). */
.playlist-duration { padding-inline: .4rem; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.playlist-duration::-webkit-inner-spin-button, .playlist-duration::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Markert rad (klikk på et tomt sted i raden, admin.js dragSort): piltast opp og ned flytter den. */
.is-selected { outline: 2px solid var(--bs-primary); outline-offset: -2px; z-index: 3; }
:is(.layout-row, [data-drag-row], [data-sortable-row]):not(.is-selected):focus { outline: 0; }
/* Mens en rad dras: raden står dempet der den havner, og en skygge av den henger i pekeren (admin.js, dragSort). */
.is-dragging { box-shadow: inset 0 0 0 2px var(--bs-primary-border-subtle); }
.is-dragging > * { opacity: .45; }
.is-dragging > .layout-tree { opacity: 1; }
/* Rader på et annet nivå enn den som dras (tavle med menyer): dit kan den ikke flyttes. */
.drag-off > * { opacity: .25; }
.drag-ghost { position: fixed; top: 0; left: 0; z-index: 2000; margin: 0; padding: 0; overflow: visible; pointer-events: none; opacity: .92; list-style: none;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35); will-change: transform; }
.drag-ghost > td { border-bottom-width: 0; }
/* Skyggen: håndtaket har samme ramme som skyggen, og hjørnene inn mot det er harde når det stikker ut. */
.drag-ghost .drag-handle { --dh-border: var(--bs-border-color); }
@media (hover: hover) and (min-width: 576px) { .drag-ghost { border-top-left-radius: 0; border-bottom-left-radius: 0; } }
body.drag-sorting, body.drag-sorting * { cursor: grabbing !important; user-select: none; }
.layout-box { flex-direction: column; gap: 2px; }
.layout-box .bi { font-size: 1rem; opacity: .8; }

/* Midlertidig deaktivert widget på modulsiden: dempet, med merke. Vises ikke i forhåndsvisningen. */
.layout-off-badge { display: none; }
.layout-inactive .layout-off-badge { display: inline-block; }
tr.lang-row.layout-inactive > td:not(:nth-last-child(-n+2)) { opacity: .6; }
.layout-inactive .layout-pick,
.layout-inactive .layout-row-main a,
.layout-inactive .layout-row-main .widget-title,
.layout-inactive .layout-row-main .small { opacity: .5; }
/* Widget i en deaktivert meny: dempet likt, men egen bryter står urørt. */
.layout-parent-off-badge { display: none; }
.layout-parent-off:not(.layout-inactive) .layout-parent-off-badge { display: inline-block; }
.layout-parent-off .layout-pick,
.layout-parent-off .layout-row-main a,
.layout-parent-off .layout-row-main .widget-title,
.layout-parent-off .layout-row-main .small { opacity: .5; }

/* Mediebiblioteket */
.media-card { overflow: hidden; color: inherit; transition: border-color .12s, box-shadow .12s; }
.media-card:hover, .media-card:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.media-thumb { background: var(--bs-tertiary-bg); }
.media-thumb img { object-fit: cover; }
.media-badge { position: absolute; inset: auto .4rem .4rem auto; width: auto; height: auto; padding: .1rem .4rem; border-radius: .25rem; background: rgba(0, 0, 0, .65); color: #fff; font-size: .75rem; }
.media-preview { background: #000; display: flex; justify-content: center; border-radius: var(--bs-card-inner-border-radius); overflow: hidden; }
.media-preview img, .media-preview video { display: block; max-width: 100%; max-height: 70vh; }
.media-revision-thumb { width: 64px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius-sm); overflow: hidden; color: var(--bs-secondary-color); font-size: 1.25rem; }
.media-revision-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* «Velg filer» i mediebiblioteket: avkrysning på kortene, og valgte kort markert. */
.media-select { position: absolute; top: .5rem; left: .5rem; z-index: 2; pointer-events: none; /* trykk går til kortet (admin.js) */ width: 1.4rem; height: 1.4rem; margin: 0; display: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.is-selecting .media-select { display: block; }
.is-selecting .media-card { cursor: pointer; }
.is-selecting .media-card.is-selected { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35); }
/* Verktøylinjen over filene; mens filer velges, blir den stående øverst (under menylinjen) når man blar. */
.media-toolbar.is-bulk { position: sticky; top: calc(var(--navbar-h, 56px) + .5rem); z-index: 5; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25); }
.media-drop { outline: 2px dashed var(--bs-primary); outline-offset: -6px; }
/* Velgeren: kortet er en etikett rundt avkrysningen; valgt kort markeres. */
.media-pick { position: relative; cursor: pointer; overflow: hidden; }
.media-pick-input { position: absolute; top: .4rem; left: .4rem; z-index: 2; width: 1.1rem; height: 1.1rem; }
.media-pick:has(.media-pick-input:checked) { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35); }

/* Spillelister: miniatyr av elementet (bilde, stillbilde fra video eller ikon for visning). */
.playlist-thumb { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 40px; border-radius: .25rem; overflow: hidden; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-size: 1.25rem; }
.playlist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.playlist-thumb-play { position: absolute; font-size: 1rem; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .8); }

/* Driftsstatus for skjermene: grønn = online, gul = noen online, rød = offline, grå = aldri sett. */
.screen-status .bi-circle-fill { font-size: .6em; vertical-align: .15em; }
.status-online .bi-circle-fill { color: var(--bs-success); }
.status-partial .bi-circle-fill { color: var(--bs-warning); }
.status-offline .bi-circle-fill { color: var(--bs-danger); }
.status-never .bi-circle-fill { color: var(--bs-secondary-color); }

/* Filer valgt i mediebiblioteket for et skjema som ikke er lagret ennå. */
.picked-list { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Quiz-skjemaet: felt som bare gjelder quiz (fasit, forklaring, poengtekster) eller spørreundersøkelse. */
#quiz-form[data-type="survey"] .quiz-only, #quiz-form:not([data-type="survey"]) .survey-only { display: none !important; }
/* «Inntil … valg» bare når «Flere valg tillatt» er på (i samme spørsmål). */
[data-quiz-row]:not(:has(input[name$="[multi_select]"][type="checkbox"]:checked)) .quiz-max-choices { display: none !important; }
.picked-list:not(:empty) { margin-bottom: .5rem; }
.picked-item { display: flex; align-items: center; gap: .5rem; max-width: 16rem; padding: .25rem .5rem .25rem .25rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.picked-thumb { flex: none; width: 48px; height: 36px; border-radius: .25rem; overflow: hidden; background: var(--bs-tertiary-bg); }
.picked-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mediebiblioteket inne i et skjema (Medieelement i widget-vinduet): lista ruller for seg. */
.inline-media-picker { max-height: 26rem; overflow-y: auto; }
[data-pick-current] .picked-thumb { width: 72px; height: 54px; }

/* Luft nederst på alle admin-sidene, så innholdet ikke slutter helt i kanten. */
body { padding-bottom: 4rem; }
/* Hopp til en overskrift (#anker, f.eks. i API-spesifikasjonen): stopp under den faste menylinjen, ikke bak den. */
html { scroll-padding-top: calc(var(--navbar-h, 56px) + 1rem); }

/* Redigeringssidene: én lagreknapp, fast nederst i vinduet (admin/partials/save_bar) */
.save-bar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    margin-top: 1.5rem; padding: .75rem 0;
    background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color);
}
.save-bar-state { color: var(--bs-body-secondary-color); }
.is-dirty .save-bar-state { color: var(--bs-warning-text-emphasis); }
.is-dirty .save-bar-state::before { content: "●"; margin-right: .35rem; }

/* Rader som fjernes når siden lagres ([data-removable]); kan angres til da */
.remove-badge { display: none; }
.is-removed .remove-badge { display: inline-block; }
.is-removed { background-color: var(--bs-danger-bg-subtle); }
.is-removed :is(input:not([type=hidden]), select, textarea, img, .playlist-thumb, .layout-move, .layout-pick, .form-switch, .input-group-text) { opacity: .4; }
.layout-row-main .widget-title { text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; }
.layout-row-main .widget-title:hover { text-decoration: underline; }
.is-removed .layout-row-main a, .is-removed .layout-row-main .widget-title, .is-removed .remove-strike { text-decoration: line-through; }

/* Menyer på tavlesiden: widgets i en meny står med innrykk under den, og har ingen egen størrelse (de
   vises ikke som ruter). Trestreker som i et mappetre (admin.js, .layout-tree): en strek ned fra menyen,
   en vinkel inn til hvert element, og en avrundet └ ved det siste. Ved to nivåer går foreldermenyens
   strek forbi undermenyen. */
.layout-row { position: relative; }
/* Widget-listen står rett under forhåndsvisningen; Bootstrap tar bort toppkanten på første rad i en flush-liste. */
#layout-rows { border-top: var(--bs-list-group-border-width, 1px) solid var(--bs-list-group-border-color, var(--bs-border-color)); }
#layout-rows:empty { border-top: 0; }
/* Først i raden en kolonne (1.5rem) med +/− for menyer med innhold. Hvert nivå rykkes inn 1.5rem: streken
   fra menyen over (midt under +/−) og en kort vinkel (.75rem) inn til kolonnen. */
.layout-row.layout-child { padding-left: 2.5rem; }
.layout-row.layout-child.layout-grandchild { padding-left: 4rem; }
/* Navnet står rett etter trestreken (innrykket tas fra navnets plass). Størrelse og plassering kommer etter
   navnet og står på linje i alle rader; størrelsen er usynlig i innrykkede rader (de vises ikke som ruter). */
.layout-row.layout-child .layout-size-pick { visibility: hidden; }
/* Størrelse og plassering som små knapper (widget_row): like brede i alle rader. */
.layout-size-pick > .btn { width: 3rem; }
.layout-parent-pick > .btn, .layout-pick-space { display: inline-block; width: 2.25rem; }
.layout-pick .dropdown-menu { --bs-dropdown-font-size: .875rem; }
/* Strekene står midt under håndtaket til menyen over. Hver strek tegnes bare én gang (ingen overlapp
   mellom radene, som ellers gir lysere og mørkere partier), 2px på hele piksler. Det første elementet i
   en meny forlenger streken opp til menyens håndtak (.tree-up, raden har .5rem luft over). Ikke dempet
   i avslåtte menyer: radene viser det. */
.layout-tree { position: absolute; z-index: 2; inset: 0 auto -1px 0; /* -1px: over skillelinjen nederst i raden */ width: 10rem; pointer-events: none; --tree: color-mix(in srgb, var(--bs-secondary-color) 75%, var(--bs-body-bg)); }
.layout-tree > span { position: absolute; width: 0; border: 0 solid var(--tree); }
/* Streker fra en avslått meny: svakere, men fortsatt heldekkende (ikke opacity, som gir lyse partier). */
.layout-tree > span.is-off { border-color: color-mix(in srgb, var(--bs-secondary-color) 35%, var(--bs-body-bg)); }
.layout-tree .tree-pass { top: 0; bottom: 0; border-left-width: 1px; }
.layout-tree .tree-up { top: -.5rem; height: .5rem; border-left-width: 1px; }
/* Element i en meny som ikke er en meny: en liten prikk der streken slutter, midt på streken (samme mål). */
.layout-tree .tree-dot { top: calc(50% - 2.5px); width: 5px; height: 5px; margin-left: -2.5px; border: 0; border-radius: 50%; background: var(--tree); }
.layout-tree .tree-dot.is-off { background: color-mix(in srgb, var(--bs-secondary-color) 35%, var(--bs-body-bg)); }
.layout-tree .tree-stub { top: calc(50% - .5px); width: 1.35rem; height: 0; border-top-width: 1px; }
.layout-tree .tree-end { top: 0; height: calc(50% + .5px); width: 1.35rem; border-left-width: 1px; border-bottom-width: 1px; border-bottom-left-radius: .4rem; }

/* Tilbake-lenken øverst på sidene (admin/partials/back_link): diskret, som en lav knapp uten understrek. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: -.5rem;
    padding: .2rem .55rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
    font-size: .875rem;
    text-decoration: none;
    transition: background-color .12s, color .12s;
}
.back-link:hover, .back-link:focus-visible { color: var(--bs-emphasis-color); background: var(--bs-secondary-bg); }
.back-link .bi { font-size: .8em; }

/* Opplastingsfeltet (admin/media/upload_box): listen over opplastinger tar ingen plass før noe lastes opp,
   så luften over og under knappen blir lik. */
[data-upload-list]:empty { display: none; }

/* Kart over lokasjonene (oversikten, admin/partials/location_map) */
.location-map { position: relative; height: min(70vh, 640px); background: var(--bs-secondary-bg); }
.location-map-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; color: var(--bs-secondary-color); pointer-events: none; }
@media (prefers-color-scheme: dark) {
    .location-map .maplibregl-canvas { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
}
.location-marker {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .35);
    cursor: pointer;
}
.location-marker.state-online { background: var(--bs-success); }
.location-marker.state-partial { background: var(--bs-warning); }
.location-marker.state-offline { background: var(--bs-danger); }
.location-marker.state-never, .location-marker.state-none { background: var(--bs-secondary); }
/* Sist observert GPS-posisjon (tavle med live-posisjon): ekstra ring rundt prikken. */
.location-marker.is-live { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 6px rgba(13, 202, 240, .35), 0 2px 6px rgba(0, 0, 0, .35); }
.location-popup { display: grid; gap: .2rem; font-size: .875rem; color: #212529; }
.location-popup .text-body-secondary { color: #6c757d !important; }

/* Skillelinjen i menylinjen: fast lys farge, siden menylinjen alltid er mørk (ellers forsvinner den i lyst tema). */
.location-legend-live { display: inline-block; width: 12px; height: 12px; margin-right: .2rem; vertical-align: -1px; border-radius: 50%; border: 2px solid #fff; background: var(--bs-secondary); box-shadow: 0 0 0 4px rgba(13, 202, 240, .35); }

/* Statistikk (admin/statistics) */
.stats-about summary { cursor: pointer; }
.stats-bars { display: flex; align-items: flex-end; gap: 2px; height: 180px; }
.stats-bar { flex: 1 1 0; min-width: 2px; height: max(var(--h), 2px); background: var(--bs-primary); border-radius: 2px 2px 0 0; opacity: .85; }
.stats-bar:hover { opacity: 1; }
.stats-heat { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; font-size: .7rem; }
.stats-heat th { font-weight: 400; color: var(--bs-secondary-color); text-align: left; white-space: nowrap; }
.stats-heat thead th { text-align: left; }
.stats-heat tbody th { width: 2.4rem; }
.stats-heat td { height: 18px; border-radius: 3px; background: rgba(var(--bs-primary-rgb), calc(.08 + var(--a) * .92)); }
.stats-top .list-group-item { background-image: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .12) var(--share), transparent var(--share)); }
.stats-top .list-group-item::before { color: var(--bs-secondary-color); }

/* Paringskode (admin/pairing) */
.pair-code-input { letter-spacing: .15em; max-width: 14rem; }

/* Endringsloggen (admin/change_log og oversikten) */
.change-row .min-w-0 { min-width: 0; }
.change-list { list-style: disc; }
.change-list li { overflow-wrap: anywhere; }

/* Velg posisjon i kart (lokasjonsskjemaet): de andre lokasjonene som små grå prikker. */
.position-picker-other { width: 12px; height: 12px; border-width: 2px; cursor: default; opacity: .8; }
.position-picker-map .maplibregl-marker { cursor: grab; }

/* Tavlelisten (to tabeller: flere widgets / én widget): like kolonner, så de står over hverandre. */
.layout-table { table-layout: fixed; min-width: 760px; }
.layout-table .col-name { width: 28%; }
.layout-table .col-widgets { width: 26%; }
.layout-table .col-screens { width: 10%; }
.layout-table .col-date { width: 15%; }
.layout-table .col-preview { width: 6%; }
.layout-table td { overflow: hidden; text-overflow: ellipsis; }
.layout-table :is(th, td):nth-child(3) { padding-right: 1.5rem; } /* «Skjermer» (høyrestilt) får luft mot «Opprettet» */

/* Nøkkeltallene øverst på oversikten (admin/partials/overview_status): fargekant etter status (--kpi). */
.overview-kpi { border-left: 4px solid var(--kpi, var(--bs-border-color)); }
.overview-kpi-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: .15rem 0; font-variant-numeric: tabular-nums; }
.overview-kpi-of { font-size: 1rem; font-weight: 400; color: var(--bs-secondary-color); }
.overview-kpi:has(.stretched-link:hover) { background: var(--bs-tertiary-bg); }

/* Tavle i «Én widget i fullskjerm» (admin.js, applySingle): widgeten som vises først, de andre bak et felt
   som kan åpnes. Forhåndsvisningen og «Legg til widget» trengs ikke. */
.layout-is-single .layout-preview-wrap,
.layout-is-single [data-widget-add] { display: none !important; }
.layout-is-single #layout-rows .layout-single-shown { order: 0; }
.layout-is-single #layout-rows .layout-single-others { order: 1; }
.layout-is-single #layout-rows .layout-single-other { order: 2; display: none !important; }
.layout-is-single #layout-rows.layout-others-open .layout-single-other { display: flex !important; }

/* Forhåndsvisning av en innbygging (admin/embeds/form): iframen i valgt bredde (--w) og format
   (--ratio), skalert ned (--scale, admin.js) når den er bredere enn kortet. */
.embed-preview { overflow: hidden; }
.embed-preview-frame { width: calc(var(--w) * var(--scale, 1)); aspect-ratio: var(--ratio); position: relative; overflow: hidden; border-radius: .375rem; outline: 1px dashed var(--bs-border-color); }
.embed-preview-frame iframe { position: absolute; top: 0; left: 0; width: var(--w); aspect-ratio: var(--ratio); border: 0; transform: scale(var(--scale, 1)); transform-origin: 0 0; }

/* Fjorder: slik den vanlige logoen vises i lyst tema (silhuett i mørk farge, som .screen-logo-mask i screen.css). */
.logo-mask { display: inline-block; height: 100%; max-width: 100%; background: #10292d; -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
.logo-mask img { display: block; height: 100%; max-width: 100%; object-fit: contain; visibility: hidden; }
.overview-kpi-link { font-size: inherit; line-height: inherit; vertical-align: baseline; text-decoration: none; }
.overview-kpi-link:hover { text-decoration: underline; }

/* API-spesifikasjonen (admin/api-docs): kodeblokker, tabeller og ren utskrift/PDF. */
.api-code { padding: .75rem 1rem; border-radius: .375rem; background: var(--bs-tertiary-bg); font-size: .85em; white-space: pre; overflow-x: auto; }
.api-table th:first-child, .api-table td:first-child { white-space: nowrap; }
.api-table th { font-weight: 600; }
.api-req { color: var(--bs-danger-text-emphasis); white-space: nowrap; }
@media print {
    .navbar, .nav-tabs, .no-print, .back-link { display: none !important; }
    body { padding-top: 0 !important; margin-top: 0 !important; }
    .api-code { white-space: pre-wrap; border: 1px solid #ccc; }
    /* Mindre skrift på papir/PDF, så tabellene oftere får plass på én linje per rad. */
    .api-docs { font-size: 9pt; }
    .api-docs .table { font-size: 8.5pt; }
    .api-docs .table > :not(caption) > * > * { padding: .2rem .35rem; }
    .api-docs .api-code { font-size: 7.5pt; padding: .4rem .6rem; }
    .api-docs h2 { font-size: 14pt; }
    .api-docs h3 { font-size: 11pt; }
    .api-docs h4 { font-size: 9.5pt; }
    /* Hele arkets bredde (Bootstrap låser ellers beholderen til en smal bredde), og feltnavn kan brytes
       mellom flere navn i samme celle («depth_min_m, depth_max_m»), så de andre kolonnene får plass. */
    .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: none !important; width: 100% !important; padding: 0 !important; }
    .api-table th:first-child, .api-table td:first-child { white-space: normal; }
    .api-table td:first-child code { white-space: nowrap; }
    .api-docs h2 { break-after: avoid; }
    .api-docs .api-chapter { break-before: page; } /* hvert endepunkt på ny side */
    .api-docs table, .api-code { break-inside: avoid; }
}

/* Rikere lister (artikler, alger, lokasjoner, tavler, spillelister, innbygginger): tabellen i et kort,
   miniatyr til venstre, navn med dempet undertekst og små merker, og dato/redaktør dempet til høyre. */
.rich-list { margin-bottom: 1rem; }
.rich-list .table { margin-bottom: 0; }
.rich-list .table > :not(caption) > * > * { padding: .7rem .85rem; }
.rich-list thead th { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); white-space: nowrap; }
.rich-list tbody tr:last-child > * { border-bottom: 0; }
.rich-thumb { width: 72px; height: 48px; flex: none; border-radius: .375rem; overflow: hidden; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 1.25rem; }
.rich-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rich-sub { color: var(--bs-secondary-color); font-size: .85rem; max-width: 46rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rich-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.rich-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; line-height: 1.4; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); white-space: nowrap; }
.rich-chip.is-warn { color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.rich-chip.is-off { color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle); }
.rich-chip.is-ok { color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
.rich-list .table td.rich-meta { color: var(--bs-secondary-color); font-size: .8rem; text-align: right; white-space: nowrap; }
.rich-list .table td.rich-meta div + div { color: var(--bs-tertiary-color); }
/* Grafen på «Målinger» (admin/partials/measurement_chart). */
.measure-chart .mc-grid { stroke: var(--bs-border-color); stroke-width: 1; vector-effect: non-scaling-stroke; }
.measure-chart .mc-band { fill: rgba(var(--bs-info-rgb), .15); }
.measure-chart .mc-line { fill: none; stroke: var(--bs-info); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.measure-chart .mc-hit { fill: transparent; }
.measure-chart .mc-hit:hover { fill: var(--bs-info); }
.measure-chart .mc-label { fill: var(--bs-secondary-color); font-size: 11px; }

/* Initialer i brukerlisten. */
.user-avatar { border-radius: 50%; font-size: .8rem; font-weight: 600; color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); }
/* Brukermenyen i navbaren (bred skjerm): rund grå knapp med initialene, uten ramme. Ring rundt når man står på en side i menyen. */
.nav-avatar { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: #fff; background: var(--bs-gray-600); }
/* Bootstrap gir .btn.active egne farger; her beholdes de grå, og ringen viser at man står på en side i menyen. */
.btn.nav-avatar.active { color: #fff; background: var(--bs-gray-600); box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-gray-400); }
.btn.nav-avatar:hover, .btn.nav-avatar:focus-visible, .btn.nav-avatar.show { color: var(--bs-gray-900); background: var(--bs-gray-400); }
/* Smal skjerm: punktene står nederst i den sammenklappede menyen, skilt fra resten med en strek. */
.nav-user-menu { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color-translucent); }
/* Miniatyr av en tavle: rutenett med 7 kolonner, widgetene i riktig bredde. */
.rich-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 2px; padding: 3px; align-content: start; }
.rich-grid span { border-radius: 2px; background: rgba(var(--bs-info-rgb), .35); display: flex; align-items: center; justify-content: center; font-size: .6rem; color: var(--bs-info-text-emphasis); min-height: 0; }
.rich-grid span:nth-child(3n+2) { background: rgba(var(--bs-primary-rgb), .35); color: var(--bs-primary-text-emphasis); }
.rich-grid span:nth-child(3n) { background: rgba(var(--bs-success-rgb), .3); color: var(--bs-success-text-emphasis); }
/* Spilleliste: stripe med de første elementene. */
.rich-strip { display: flex; gap: 2px; flex: none; width: 72px; height: 48px; }
.rich-strip > * { flex: 1; border-radius: .25rem; overflow: hidden; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: .8rem; }
.rich-strip img { width: 100%; height: 100%; object-fit: cover; }
/* Skjermer på en lokasjon: én prikk per skjerm. */
.rich-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-secondary-color); }
.rich-dot.state-online { background: var(--bs-success); }
.rich-dot.state-offline { background: var(--bs-danger); }
.rich-dot.state-never { background: var(--bs-secondary-bg); border: 1px solid var(--bs-secondary-color); }

/* Oversettelser: fremdrift per språk (stolpe delt etter status), prikker og statuspiller. */
.tr-bar { display: flex; height: .5rem; border-radius: 999px; overflow: hidden; background: var(--bs-tertiary-bg); }
.tr-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; }
.tr-success { background: var(--bs-success); }
.tr-warning { background: var(--bs-warning); }
.tr-orange { background: var(--bs-orange); }
.tr-danger { background: var(--bs-danger); }
.tr-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap; }
.tr-pill-success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.tr-pill-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.tr-pill-orange { background: rgba(var(--bs-orange-rgb, 253, 126, 20), .15); color: var(--bs-orange); }
.tr-pill-danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* Definisjoner (superadmin): tabellene i et kort, med luft mellom radene, overskrifter i dempet,
   liten skrift og målingene (antall, periode) dempet, så navnene og feltene er det man ser først. */
.def-table > :not(caption) > * > * { padding: .65rem .85rem; }
.def-table thead th { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-bottom-width: 1px; white-space: nowrap; }
.def-table tbody tr:last-child > * { border-bottom: 0; }
.def-table .def-name code { color: var(--bs-body-color); font-size: .9em; word-break: break-word; }
.def-table .def-meta { color: var(--bs-secondary-color); font-size: .85rem; }
.def-table-compact > :not(caption) > * > * { padding: .55rem .5rem; }
.def-table-compact thead th { white-space: normal; vertical-align: bottom; }
.def-table-compact input[inputmode="decimal"] { min-width: 4.5rem; }

/* Definisjoner → Parametere: én linje per parameter (navn, enhet, status for beskrivelsen per språk), som foldes ut til redigering. */
.def-params .list-group-item { scroll-margin-top: 5.5rem; } /* under den faste menylinjen når den åpnes etter lagring */
.def-param-cols, .def-param-head { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem repeat(var(--def-langs, 1), 6.5rem) 1rem; gap: .75rem; align-items: center; width: 100%; padding: .7rem 1rem; border: 0; background: none; color: inherit; text-align: left; }
.def-param-head:hover { background: var(--bs-tertiary-bg); }
.def-param-name { display: flex; flex-direction: column; min-width: 0; }
.def-param-name code { color: var(--bs-secondary-color); font-size: .78rem; word-break: break-word; }
.def-param-unit { color: var(--bs-secondary-color); font-size: .85rem; }
.def-param-cols { gap: .75rem; padding: 0 1rem .35rem; font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); }
.def-st { font-size: .82rem; white-space: nowrap; }
.def-st-ok { color: var(--bs-success-text-emphasis); }
.def-st-machine { color: var(--bs-warning-text-emphasis); }
.def-st-outdated { color: var(--bs-secondary-color); }
.def-st-missing { color: var(--bs-danger-text-emphasis); }
.def-st-none { color: var(--bs-secondary-color); opacity: .7; }
.def-chevron { color: var(--bs-secondary-color); transition: transform .15s; }
.def-param-head:not(.collapsed) .def-chevron { transform: rotate(180deg); }
.def-param-head:not(.collapsed) { background: var(--bs-tertiary-bg); }
.def-param-form { padding: 1rem; border-top: 1px solid var(--bs-border-color); }
/* Områder og plattformer: som parameterne, med håndtak i venstre kant (områdene) og «Aktiv» til høyre utenfor knappen. */
.def-items .list-group-item { scroll-margin-top: 5.5rem; }
.def-item-row, .def-item-cols { display: grid; grid-template-columns: minmax(0, 1fr) 4rem; align-items: center; }
.def-item-head, .def-item-colgroup { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(var(--def-langs, 0), minmax(0, 1fr)) 5.5rem 1rem; gap: .75rem; align-items: center; min-width: 0; }
.def-item-head { width: 100%; padding: .7rem .75rem; border: 0; background: none; color: inherit; text-align: left; }
.def-item-head:hover, .def-item-head:not(.collapsed) { background: var(--bs-tertiary-bg); }
.def-item-head:not(.collapsed) .def-chevron { transform: rotate(180deg); }
.def-item-cols { padding: 0 0 .35rem; font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); }
.def-item-colgroup { padding: 0 .75rem; }
.def-item-tr { font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.def-item-tr.is-empty, .def-item-meta { color: var(--bs-secondary-color); font-size: .85rem; }
.def-item:has(.def-item-active input:not(:checked)) .def-item-head { opacity: .55; }
.def-lang { font-weight: 600; margin-bottom: .5rem; }
/* Parameter: ett språk per rad (språket, visningsnavn, beskrivelse), uansett hvor mange språk fjorden har. */
.def-lang-rows { display: grid; gap: 0; }
.def-lang-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 2fr); gap: .5rem 1.25rem; align-items: start; padding: .9rem 0; border-top: 1px solid var(--bs-border-color-translucent); }
.def-lang-row:first-child { border-top: 0; padding-top: 0; }
.def-lang-row .def-lang { margin: 0; line-height: 1.5; font-size: .875rem; } /* på linje med «Visningsnavn» og «Beskrivelse» */
@media (max-width: 767.98px) { .def-lang-row { grid-template-columns: minmax(0, 1fr); } .def-lang-row .def-lang { margin-top: 0; } }
.def-pill { font-weight: 500; border: 1px solid transparent; }
.def-pill-ok { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.def-pill-machine { color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.def-pill-outdated { color: var(--bs-secondary-color); background: var(--bs-secondary-bg-subtle); border-color: var(--bs-border-color); }
.def-pill-missing { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.def-pill-none { color: var(--bs-secondary-color); background: none; border-color: var(--bs-border-color); }

/* «Logg ut» i menylinjen: dempet, så den ikke trekker blikket; tydelig ved pekeren/tastatur. */
.btn-logout { --bs-btn-color: rgba(255, 255, 255, .6); --bs-btn-border-color: rgba(255, 255, 255, .22); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .1); --bs-btn-hover-border-color: rgba(255, 255, 255, .45); --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .15); }

/* «Se som» (superadmin ser admin som en annen bruker): stripe under menylinjen. */
.impersonation-bar { position: sticky; top: var(--navbar-h, 56px); z-index: 1020; margin: -1rem 0 1rem; padding: .5rem 0; background: var(--bs-warning); color: #000; font-size: .9rem; }

/* Tekstmerking i artikkeltekster (data-markup): verktøylinjen og forhåndsvisningen, i stil med skjermene. */
.markup-toolbar .btn { line-height: 1.2; }
.markup-preview { background: var(--bs-tertiary-bg); max-width: 760px; }
.markup-preview p { margin: 0 0 .8em; }
.markup-preview .article-subtitle { margin: 1em 0 .4em; font-size: 1.1rem; font-weight: 600; }
.markup-preview .article-subtitle:first-child { margin-top: 0; }
.markup-preview :is(ul, ol) { margin: 0 0 .8em; padding-left: 1.4em; }
.markup-preview .fact-box { margin: 0 0 .8em; padding: .6em .9em; border: 1px solid var(--bs-border-color); border-left: 4px solid #17C9DB; border-radius: .4rem; background: var(--bs-body-bg); }
.markup-preview .fact-box p { margin: 0; }
.markup-preview .term { color: #17C9DB; text-decoration: underline dotted #17C9DB; text-decoration-thickness: 2px; text-underline-offset: .2em; cursor: help; }
.markup-preview .qr-link { border: 0; padding: 0; background: none; color: var(--bs-link-color); text-decoration: underline; }
.markup-help summary { cursor: pointer; }

/* Ikon i en lenke (admin.js, tidyLinkIcons): marg i stedet for et understreket mellomrom. */
.link-icon-start { margin-right: .3em; }
.link-icon-end { margin-left: .3em; }

/* «Widget kan ikke åpnes» i widgetlisten: en hånd med en skrå strek over («ikke trykk»). */
.no-open-icon { position: relative; display: inline-block; margin-left: .35rem; color: var(--bs-secondary-color); font-size: .95rem; line-height: 1; vertical-align: -.1em; }
.no-open-icon[hidden] { display: none; }
.no-open-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.15em; height: 2px; border-radius: 1px; background: currentColor; box-shadow: 0 0 0 1.5px var(--bs-body-bg); transform: translate(-50%, -50%) rotate(-45deg); }

/* Innloggingslaget (admin.js, «Økta»): bakgrunnen blir uskarp og mørkere, så ingenting bak kan leses. */
/* Full dekning (ikke Bootstraps halvgjennomsiktige lag, som ville gjort også uskarpheten halvveis gjennomsiktig). */
body.session-locked .modal-backdrop { --bs-backdrop-opacity: 1; --bs-backdrop-bg: rgba(10, 14, 18, 0.5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* Vinduet for et element i en spilleliste (admin.js, peek): bildet/videoen så stort det får plass, rammer i 16:9. */
.peek-body { background: #000; }
.peek-media { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; }
.peek-frame { background: var(--bs-body-bg); }
.peek-frame iframe { border: 0; }
.playlist-thumb:has(img), .layout-row:has([data-peek]) .playlist-thumb { cursor: zoom-in; }