/* hidden skjuler alltid, også det som har en visningsklasse (d-flex o.l.; admin.css lastes etter Bootstrap). */
[hidden] { display: none !important; }

.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;
}

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

/* Menylinjen: ingen linjebrudd i menypunkter og knapper; lange kontonavn kortes av. */
.navbar .nav-link,
.navbar .btn {
    white-space: nowrap;
}
/* Brukermenyen (bred skjerm): initialene (.nav-avatar); «Bytt konto» står øverst i menyen. */
.nav-user { align-items: center; align-self: center; } /* ikke strukket til høyden av menypunktene */
.nav-user > .dropdown { display: flex; }

/* 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; }
/* Full høyde (som .tile-col på skjermen): kolonner side om side, med rader i. */
.layout-preview-cols { flex: 1 1 0; min-height: 0; display: flex; gap: 3px; }
/* Dra en boks over en annen for å bytte plass (admin.js, swapWidgets). */
.layout-preview .layout-box:not(.layout-ticker) { cursor: grab; touch-action: none; user-select: none; }
.is-box-dragging, .is-box-dragging .layout-box { cursor: grabbing !important; }
.layout-box.is-drag-source { opacity: .35; }
.layout-box.is-drop-target { outline: 2px dashed var(--bs-primary); outline-offset: -2px; }
.layout-box-ghost { position: fixed; z-index: 2000; pointer-events: none; opacity: .9; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .35); }
/* Størrelsen i menyen på tavlesiden (admin.js): tallet og en stolpe med 7 ruter, der så mange som størrelsen er fylt ut. */
.weight-item { display: flex; align-items: center; gap: .75rem; }
.weight-num { width: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.weight-bar { display: flex; gap: 2px; }
.weight-bar > span { width: .9rem; height: .7rem; border-radius: 2px; border: 1px solid var(--bs-border-color); }
.weight-bar > .is-on { background: var(--bs-primary); border-color: var(--bs-primary); }
.dropdown-item.active .weight-bar > span { border-color: rgba(255, 255, 255, .45); }
.dropdown-item.active .weight-bar > .is-on { background: #fff; border-color: #fff; }
/* «Full høyde» nederst i størrelsesmenyen på tavlesiden (admin.js). */
.layout-tall-switch { padding-left: 2.75rem; white-space: nowrap; }
.layout-tall-help { width: 15rem; white-space: normal; }
.layout-preview-col { flex: var(--col, 1) 1 0; min-width: 0; display: flex; flex-direction: column; 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; }
/* Widgetene på en tavle: raden åpner widgeten (som innholdsmalene), og markeres når musen er over den. */
#layout-rows > .layout-row:has([data-widget-edit]) { cursor: pointer; }
#layout-rows > .layout-row:has([data-widget-edit]):hover { background-color: var(--bs-tertiary-bg); }
.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); }

/* 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, på alle
   rader, men er usynlig til pekeren er over raden eller håndtaket (eller håndtaket har fokus, eller raden er grepet
   eller markert). Det tar plassen sin hele tiden, så pekeren kan føres langs kanten (utenfor kortet) og velge rad
   der. 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. */
:is(.layout-row, [data-drag-row], .drag-cell) { position: relative; }
.drag-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: .9rem; padding: 0; overflow: hidden; opacity: 0;
    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: transparent; touch-action: none; }
/* Inne i raden (tavler, spillelister, plantegninger og språk): uten egen bakgrunn, så raden ikke blir trangere; ved
   pekeren blir bare grep-symbolet tydeligere. Håndtakene som står ut fra kortet (svaralternativer, artikkelbilder og
   visningsnavn, under) har bakgrunn, så de ser ut som en forlengelse av raden, og blir litt mørkere/lysere ved pekeren.
   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: transparent; border-color: var(--dh-border, var(--bs-border-color-translucent)); }
/* Ingen overgang (Bootstrap toner kantfarge og skygge på knapper): markeringen skal komme og gå med en gang, ikke blinke
   blått i skillelinjen når den fjernes. */
.btn.drag-handle { transition: none; }
/* Grip-markør over håndtaket (Bootstrap gir ellers alle knapper en peke-hånd). */
button.drag-handle:not(:disabled) { cursor: grab; }
/* Synlig: .is-hover er raden pekeren er over (admin.js, dragSort; ikke :hover, som kan bli hengende når radene flytter
   seg), også når pekeren er over håndtaket utenfor kortet; og den markerte raden. */
:is(.is-hover, .is-selected) > .drag-handle, :is(.is-hover, .is-selected) > .drag-cell > .drag-handle,
:is(.is-hover, .is-selected) > [data-drag-row] > .drag-handle, .drag-handle:focus-visible { opacity: 1; }
/* Mens en rad er grepet: bare dens håndtak vises. */
body.drag-sorting .drag-handle { opacity: 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 { opacity: 1; }
@media (hover: none) { .drag-handle { opacity: 1; } }
.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 (og alternativene i en valgliste, innholdsmalene) står på linje med spørsmålet, og håndtaket står 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. */
:is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) { padding-left: 1px; }
/* Listen rykkes inn med håndtakets bredde, så håndtaket står på linje med overskriften og hjelpeteksten (og innenfor en
   popup, som klipper det som stikker ut). */
:is([data-answer-list], .cms-options, .cms-mx-rows:not(.is-fixed), .cms-files[data-multiple="1"], .ts-picked.cms-rows.is-sortable, .cms-gx-rows) { padding-left: calc(1.25rem - 1px); } /* håndtaket står 1 px inn over feltets kant */
:is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) > .drag-handle { width: 1.25rem; } /* veier opp for at feltet står 1 px utenfor, så det står på linje med spørsmålet */
:is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) > .drag-handle { left: auto; right: calc(100% - 1px); --dh-border: var(--bs-border-color); border-width: 1px;
    border-radius: var(--bs-border-radius-sm) 0 0 var(--bs-border-radius-sm); background: var(--bs-tertiary-bg); }
:is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) > .btn.drag-handle:is(:hover, :focus-visible, :active) { background: var(--bs-secondary-bg); }
/* Markert eller dratt svaralternativ: rammen er et lag oppå feltene (en outline ville ligget under dem og bare synes i
   fjern-knappen), åpen mot håndtaket, og håndtaket har rammen på de tre ytre sidene, som i listene. */
:is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row):is(.is-dragging, .is-selected) { outline: 0; box-shadow: none; }
:is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row):is(.is-dragging, .is-selected)::after { content: ""; position: absolute; inset: 0 0 0 1px; z-index: 6; pointer-events: none;
    border: 2px solid var(--sel-frame); border-left: 0; border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0; }
:is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row):is(.is-dragging, .is-selected) > .drag-handle { opacity: 1; border-width: 2px 0 2px 1px; padding-right: 1px; border-color: var(--sel-frame); box-shadow: -1px 0 0 var(--sel-frame); }
/* Tavler, spillelister, plantegninger og språk: håndtaket står inne i raden, i venstre kant (standarden over).
   Artikkelbilder: som tavlene (inne i raden, ved pekeren).
   Visningsnavn: håndtaket står 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 der også. */
@media (hover: hover) and (min-width: 576px) {
    .def-item > [data-drag-row] > .drag-handle {
        left: auto; right: 100%; top: -1px; bottom: -1px; z-index: 5; width: 1.25rem; border-width: 1px; border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
        background: var(--bs-tertiary-bg); }
    .def-item > [data-drag-row] > .btn.drag-handle:is(:hover, :focus-visible, :active) { background: var(--bs-secondary-bg); }
    /* Markert eller dratt rad: den blå rammen går rundt håndtaket også (rammen på raden er åpen mot håndtaket, og
       håndtaket har rammen på de tre ytre sidene), så de står som én, uten skillelinje.
       Innholdet i håndtaket står likevel på samme sted som før: 1 px kant til venstre (den andre blå pikselen er en skygge
       utenfor) og 1 px luft til høyre, som de to 1 px-kantene ellers. */
    .def-item > [data-drag-row]:is(.is-dragging, .is-selected) {
        outline: 0; box-shadow: inset 0 2px 0 var(--sel-frame), inset -2px 0 0 var(--sel-frame), inset 0 -2px 0 var(--sel-frame); }
    .def-item > [data-drag-row]:is(.is-dragging, .is-selected) > .drag-handle {
        top: 0; bottom: 0; border-width: 2px 0 2px 1px; padding-right: 1px; border-color: var(--sel-frame); box-shadow: -1px 0 0 var(--sel-frame); }
}
.is-dragging { --sel-frame: var(--bs-primary-border-subtle); }
.is-selected { --sel-frame: var(--bs-primary); }
/* Markert rad: håndtaket fylt med rammens farge og et hvitt grep-symbol (alle steder med håndtak, også ved pekeren over). */
.is-selected > .drag-handle, .is-selected > .drag-cell > .drag-handle, .is-selected > [data-drag-row] > .drag-handle,
:is(.is-selected > .drag-handle, .is-selected > .drag-cell > .drag-handle, .is-selected > [data-drag-row] > .drag-handle).btn:is(:hover, :focus-visible, :active) { background: var(--bs-primary); color: #fff; }
/* 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 eller trykk på håndtaket, admin.js dragSort): piltast opp og ned flytter
   den, og den kan dras også fra et tomt sted i raden (grip-markør der). */
.is-selected { outline: 2px solid var(--bs-primary); outline-offset: -2px; z-index: 3; }
:is(.layout-row, [data-drag-row], [data-sortable-row]).is-selected { cursor: grab; }
: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; }
/* Svaralternativ i en quiz: skyggen er bare feltet (med håndtaket utenfor), uten listens ramme, bakgrunn og luft under. */
.drag-ghost:has(> :is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row)) { border: 0; background: transparent; box-shadow: none; border-radius: 0; opacity: 1; } /* dekkende: et smalt felt over tekst blir ellers urolig */
.drag-ghost > :is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) { margin: 0 !important; border-radius: var(--bs-border-radius-sm); background: var(--bs-body-bg); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35); }
/* 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); }
/* Skyggen av en rad med håndtaket utenfor kortet (visningsnavn): harde hjørner inn mot håndtaket. */
@media (hover: hover) and (min-width: 576px) { .drag-ghost:has(> [data-drag-row]:not([data-image-row])) { 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; }
/* Tekststripen: en lav stripe nederst i forhåndsvisningen, ikon og navn på linje. */
.layout-box.layout-ticker { flex: none; flex-direction: row; gap: 4px; height: 1.5rem; }
.layout-box.layout-ticker .bi { font-size: .8rem; }

/* 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; }
/* Språk som ikke støttes i en konto (Kontoer → Språk): navnet dempet, bryteren og hovedspråk-valget urørt. */
li.layout-inactive[data-sortable-row] > .flex-grow-1 { opacity: .55; }
.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-preview:has(.media-preview-file, .media-preview-pdf) { background: var(--bs-tertiary-bg); }
.media-preview-pdf { display: block; width: 100%; height: 70vh; border: 0; background: #fff; }
.media-preview-file { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 32rem; padding: 3rem 1.5rem; text-align: center; }
.media-preview-file > .bi { font-size: 4rem; line-height: 1; color: var(--bs-secondary-color); }
.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; }
.media-toolbar.is-bulk .media-bulk { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25); }
/* 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; }
.picked-thumb > .bi { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.25rem; color: var(--bs-secondary-color); }
/* 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, .picked-thumb.picked-thumb-lg { 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): 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); } /* admin.js, unsavedMark: gul prikk og «Ikke lagret» */

/* 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. */
/* Størrelsesknappen: tallet, plassen til ↕ (full høyde) og pilen, med lik luft til kantene i alle rader. */
.layout-size-pick > .btn { width: 3.5rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: .4rem; }
.layout-size-pick > .btn [data-tall-mark] { margin-left: .1rem !important; font-size: .8em; }
.layout-size-pick > .btn::after { margin-left: .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 installasjonene (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 (installasjonsskjemaet): de andre installasjonene 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; }

.overview-kpi-link { font-size: inherit; line-height: inherit; vertical-align: baseline; text-decoration: none; }
.overview-kpi-link:hover { text-decoration: underline; }

@media print {
    .navbar, .nav-tabs, .no-print, .back-link { display: none !important; }
    body { padding-top: 0 !important; margin-top: 0 !important; }

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

}

/* Rikere lister (artikler, installasjoner, 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 .table-sm > :not(caption) > * > * { padding: .4rem .85rem; } /* tette tabeller (f.eks. oppføringene i en liste) */
.rich-list thead th { font-size: .9rem; font-weight: 600; color: var(--bs-body-color); background: var(--bs-tertiary-bg); white-space: nowrap; } /* som .list-head */
.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; }
/* Kontoens logo i kontolisten: på mørk bunn som på skjermene, hele logoen synlig. */
.rich-thumb.account-thumb { background: #071824; padding: .35rem; }
.rich-thumb.account-thumb img { object-fit: contain; }
.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); }

/* 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. */
/* Miniatyren av rutenettet i tavlelisten (som på skjermen, WidgetType::gridFor): kolonner med rader, og rutene deler
   radens bredde etter størrelsen. Fargene skifter mellom rutene. */
.rich-grid { display: flex; align-items: stretch; justify-content: stretch; gap: 2px; padding: 3px; }
.rich-grid-col { flex: var(--col, 1) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rich-grid-row { flex: 1 1 0; min-height: 0; display: flex; gap: 2px; }
.rich-grid-cell { flex: var(--span, 2) 1 0; min-width: 0; 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); overflow: hidden; }
.rich-grid-row:nth-child(even) .rich-grid-cell:nth-child(odd), .rich-grid-row:nth-child(odd) .rich-grid-cell:nth-child(even) { background: rgba(var(--bs-primary-rgb), .35); color: var(--bs-primary-text-emphasis); }
.rich-grid-col:nth-child(even) .rich-grid-cell { 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 installasjon: é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); }

/* «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: fixed; top: 0; left: 0; right: 0; z-index: 1031; padding: .4rem 0; background: var(--bs-warning); color: #000; font-size: .9rem; }
/* Med stripen: menyen står under den (--imp-h, admin.js); uten undermeny skyves innholdet ned like mye. */
.has-impersonation nav.navbar.fixed-top { top: var(--imp-h, 0px); }
.has-impersonation:not(.has-subnav) { padding-top: var(--imp-h, 0px); }

/* 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; }
/* Tekststripen er ikke en rute: ingen størrelse, og den ligger ikke i en meny (plassen beholdes, så knappene står likt). */
.layout-row[data-type="ticker"] .layout-size-pick, .layout-row[data-type="ticker"] .layout-parent-pick { visibility: hidden; }
/* Kartet i Vær-widgeten (admin/layouts/fields/place_pick): lavt nok til at resten av skjemaet synes; søketreffene legger seg over kartet. */
.place-pick-map { height: 300px; border-radius: var(--bs-border-radius); overflow: hidden; }
.place-pick-results { top: 100%; z-index: 5; }
/* Veksleren står alltid på forsiden: ingen «Flytt til» (plassen beholdes). */
.layout-row[data-type="rotator"] .layout-parent-pick { visibility: hidden; }

/* Delt skjerm i spillelister (admin/playlists/template_pick, split): små tegninger av oppsettene (PlaylistModel::TEMPLATES).
   Valget er et kort per oppsett; i lista over delene er delen det gjelder, fremhevet (is-on). */
.split-tpl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.split-tpl-option { display: block; cursor: pointer; }
.split-tpl-card { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .6rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); height: 100%; text-align: center; font-size: .85rem; transition: border-color .12s, background-color .12s; }
.split-tpl-option:hover .split-tpl-card { border-color: var(--bs-secondary-color); }
.btn-check:checked + .split-tpl-card { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); box-shadow: 0 0 0 1px var(--bs-primary); }
.btn-check:focus-visible + .split-tpl-card { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.split-tpl { display: grid; gap: 3px; width: 6rem; aspect-ratio: 16 / 9; padding: 3px; border-radius: 4px; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); grid-template: 1fr / 1fr; }
.split-tpl > span { display: flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--bs-tertiary-color); opacity: .45; color: var(--bs-body-bg); font-size: .65rem; font-weight: 700; }
.split-tpl > span.is-on { opacity: 1; background: var(--bs-primary); }
.split-tpl-sm { width: 4.5rem; }
.split-tpl-half { grid-template-columns: 1fr 1fr; }
.split-tpl-twothirds { grid-template-columns: 2fr 1fr; }
.split-tpl-threequarters { grid-template-columns: 3fr 1fr; }
.split-tpl-quad { grid-template: 1fr 1fr / 1fr 1fr; }
.split-tpl-thirds { grid-template-columns: 1fr 1fr 1fr; }
.split-tpl-onetwo { grid-template: "a b" 1fr "a c" 1fr / 2fr 1fr; }
.split-tpl-onethree { grid-template: "a b" 1fr "a c" 1fr "a d" 1fr / 2fr 1fr; }
.split-tpl-bandtwo { grid-template: "a a" 1fr "b c" 2fr / 1fr 1fr; }
:is(.split-tpl-onetwo, .split-tpl-onethree, .split-tpl-bandtwo) > span:nth-child(1) { grid-area: a; }
:is(.split-tpl-onetwo, .split-tpl-onethree, .split-tpl-bandtwo) > span:nth-child(2) { grid-area: b; }
:is(.split-tpl-onetwo, .split-tpl-onethree, .split-tpl-bandtwo) > span:nth-child(3) { grid-area: c; }
:is(.split-tpl-onetwo, .split-tpl-onethree, .split-tpl-bandtwo) > span:nth-child(4) { grid-area: d; }
.split-tpl.is-mirrored { direction: rtl; } /* speilvendt: den smale delen til venstre (som .regions.is-mirrored på skjermen) */
.split-tpl.is-mirrored > span { direction: ltr; }
.split-choices { width: min(24rem, 90vw); max-height: 50vh; overflow-y: auto; }
.split-choices .split-choice-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.split-preview { aspect-ratio: 16 / 9; background: #000; }
.split-preview iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
/* Klebrig når man ruller: under menylinjen på den vanlige siden, helt øverst i vinduet (ingen menylinje der). */
/* Under menyen og undermenyen (--navbar-h, --subnav-h, admin.js), med luft; innholdet under i samme kolonne glir inn
   under (egen bakgrunn og lag), så det ikke legger seg over forhåndsvisningen. */
@media (min-width: 992px) {
    .split-preview-sticky { position: sticky; top: calc(var(--navbar-h, 56px) + var(--subnav-h, 0px) + 1rem); z-index: 3; background: var(--bs-body-bg); padding-bottom: .5rem; box-shadow: 0 -1rem 0 var(--bs-body-bg); }
    #split-modal .split-preview-sticky { top: 0; background: var(--bs-modal-bg, var(--bs-body-bg)); box-shadow: 0 -1rem 0 var(--bs-modal-bg, var(--bs-body-bg)); }
}
/* «Legg til» → Widget: ett kort per widget. Tekststripen nederst som tilvalg: en stripe under delene i tegningen. */
.split-widget-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.split-widget-card { justify-content: center; min-height: 5.5rem; }
.split-tpl { position: relative; }
.split-tpl.has-strip { padding-bottom: 14%; }
.split-tpl .split-tpl-strip { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 10%; border-radius: 2px; background: var(--bs-tertiary-color); opacity: .45; }
.split-tpl .split-tpl-strip.is-on { opacity: 1; background: var(--bs-primary); }
#split-modal.is-loading .modal-body { opacity: .55; pointer-events: none; transition: opacity .15s; }
/* Egne punkter i kart-widgeten (admin/layouts/fields/points_pick): nummererte markører, som i lista under kartet. */
.points-pick-marker { display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: .75rem; font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: grab; }
/* Delene i vinduet for delt skjerm: teksten (navn og oppsummering) krymper og kuttes med …, så knappene står fast til
   høyre. Raden bryter først når det er under 8rem igjen til teksten (smale skjermer). */
.split-slot-text { flex: 1 1 8rem; min-width: 0; }
/* Hjelpeklasse (finnes ikke i Bootstrap 5): et flex-element som kan krympe under innholdets bredde, så lang tekst
   kuttes med … (text-truncate) i stedet for å presse naboene ut eller ned. */
.min-w-0 { min-width: 0 !important; }
/* Fargevelgeren i bakgrunnsvalget (admin/layouts/fields/slide_background): flate for metning (→) og lysstyrke (↓) i
   fargetonen, regnbuestripe for tonen, hex-kode og ferdige farger. */
.color-pick { display: flex; flex-direction: column; gap: .6rem; }
.color-pick-sv { position: relative; height: 10rem; border-radius: .375rem; cursor: crosshair; touch-action: none;
    background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); }
.color-pick-knob { position: absolute; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }
.color-pick-hue { height: .9rem; padding: 0; border-radius: 999px; appearance: none; -webkit-appearance: none;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.color-pick-hue::-webkit-slider-runnable-track { background: transparent; }
.color-pick-hue::-moz-range-track { background: transparent; }
.color-pick-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; border: 2px solid rgba(0, 0, 0, .4); margin-top: 0; }
.color-pick-swatch { width: 2rem; height: 2rem; border-radius: .375rem; border: 1px solid var(--bs-border-color); flex: none; }
.color-pick-preset { width: 1.5rem; height: 1.5rem; padding: 0; border-radius: .25rem; border: 1px solid var(--bs-border-color); cursor: pointer; }
.color-pick-preset:hover { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
/* Forhåndsvisningen av et bilde eller en video i vinduet for elementet (admin/playlists/item_body): som utfyllingen. */
.item-preview-media img, .item-preview-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.item-preview-media .item-preview-contain { object-fit: contain; }
/* Opplasting (admin/media/upload_box, admin.js initMediaUpload): filområdet viser en ramme med hvor filene havner
   mens de dras inn; mappene til venstre markeres når filene er over dem. Panelet som spør om mappe står øverst i
   filområdet. Nye filer er ruter først i rutenettet, med en tynn fremdriftslinje under forhåndsvisningen. */
.media-zone { position: relative; }
.media-zone.media-drop::after, [data-replace-id].media-drop::after { content: attr(data-drop-label); position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--bs-primary); border-radius: var(--bs-border-radius-lg); background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    color: var(--bs-primary); font-weight: 600; font-size: 1.1rem; pointer-events: none; }
[data-replace-id] { position: relative; }
.media-drop-folder { outline: 2px dashed var(--bs-primary); outline-offset: -2px; background: var(--bs-primary-bg-subtle) !important; }
.media-upload-ask { background: var(--bs-primary-bg-subtle); scroll-margin: .5rem; }
.media-uploading .media-thumb img { object-fit: cover; opacity: .75; }
.media-upload-progress { height: 4px; border-radius: 0; }
.media-upload-failed { border-color: var(--bs-danger); }
/* Mediebiblioteket som liste (admin/media/index, .media-view-list): samme kort, én linje per fil med liten miniatyr,
   og navnet, størrelsen og bruken i kolonner (under hverandre på smal skjerm). */
.media-grid.media-view-list { --bs-gutter-y: .4rem; }
.media-grid.media-view-list > * { flex: 0 0 100%; width: 100%; }
.media-view-list .media-card { flex-direction: row; align-items: center; }
.media-view-list .media-thumb { flex: 0 0 4.5rem; width: 4.5rem; }
.media-view-list .media-thumb .fs-1, .media-view-list .media-thumb .fs-2 { font-size: 1.4rem !important; }
.media-view-list .media-thumb .media-badge { font-size: .65rem; inset: auto .2rem .2rem auto; padding: 0 .25rem; }
.media-view-list .media-select { top: 50%; transform: translateY(-50%); left: .5rem; }
.media-view-list .media-upload-progress { position: absolute; left: 0; right: 0; bottom: 0; }
.media-view-list .media-card > .card-body { flex: 1 1 auto; min-width: 0; padding: .4rem .75rem !important; }
@media (min-width: 768px) {
    .media-view-list .media-card > .card-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 1rem; align-items: center; }
    .media-view-list .media-card > .card-body > .mt-1 { margin-top: 0 !important; }
}
/* Tavle: tekststripens rad er skjult; den vises som et tilvalg under listen ([data-ticker-option], admin.js). */
.layout-row.layout-row-ticker { display: none !important; }
/* Design (admin/designs): forhåndsvisningen er en liten skjerm (16:9) med samme avledning fra de tre fargene som
   Libraries\DesignTheme (merker: aksenten 70 % mot svart, flater: bakgrunnen med 10 % aksent, dempet tekst:
   forgrunnen 70 % mot bakgrunnen). Målene er i containerens bredde, som skjermens enhet (1920 punkter bred). */
.design-preview {
    --d-bg: #000; --d-fg: #fff; --d-accent: #17c9db; --d-on-badge: #fff; --d-r: 16; --d-font: Inter, system-ui, sans-serif; --d-heading: var(--d-font);
    --d-badge: color-mix(in srgb, var(--d-accent) 70%, #000);
    --d-surface: color-mix(in srgb, color-mix(in srgb, var(--d-bg) 90%, var(--d-frame)) 58%, transparent); /* tonet i rammefargen */
    --d-frame: var(--d-badge);
    --d-border: color-mix(in srgb, var(--d-frame) 80%, transparent);
    --d-muted: color-mix(in srgb, var(--d-fg) 70%, var(--d-bg));
    --d-dim: color-mix(in srgb, var(--d-accent) 80%, var(--d-fg));
    container-type: inline-size;
    aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--d-bg) center / cover no-repeat; color: var(--d-fg); font-family: var(--d-font);
}
/* Fargefeltene i designet: smalere fargeprøve, så hex-koden får plass ved siden av knappene. */
.design-color { flex-wrap: nowrap; }
.design-color .form-control-color { width: 2.25rem; padding-inline: .3rem; }
.design-color .form-control.font-monospace { min-width: 0; padding-inline: .4rem; font-size: .85rem; }
/* Det valgte bakgrunnsbildet i designet: liten linje under bakgrunnsfargen. */
.design-bg-picked:empty { display: none; }
.design-bg-picked .picked-item { max-width: 100%; }
.design-bg-picked .picked-thumb { width: 36px; height: 24px; }
.design-preview { display: flex; flex-direction: column; gap: calc(28 * 100cqw / 1920); padding: calc(34 * 100cqw / 1920) calc(40 * 100cqw / 1920) calc(40 * 100cqw / 1920); }
.design-preview :is(.dp-head, .dp-title, .dp-news, .dp-label) { font-family: var(--d-heading); } /* overskriftene */
.design-preview .dp-head { display: flex; justify-content: flex-end; align-items: center; height: calc(54 * 100cqw / 1920); font-size: calc(30 * 100cqw / 1920); font-weight: 600; line-height: 1; }
.design-preview .dp-head img { height: 100%; max-width: 40%; object-fit: contain; }
/* Logoens plass, som body.logo-* på skjermen. */
.design-preview:is(.logo-top-left, .logo-bottom-left) .dp-head { justify-content: flex-start; }
.design-preview:is(.logo-bottom-left, .logo-bottom-right) .dp-head { order: 10; }
.design-preview.logo-hidden .dp-head { display: none; }
.design-preview .dp-tiles { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * 100cqw / 1920); }
.design-preview .dp-tile {
    position: relative; padding: calc(32 * 100cqw / 1920);
    background: var(--d-surface); color: var(--d-fg); /* fylt rute: egne farger (skjemaet) */
    border: max(1px, calc(var(--d-fw, 1.3) * 100cqw / 1920)) solid var(--d-border); /* rammetykkelsen, skalert som skjermen */
    border-radius: calc(var(--d-r) * 100cqw / 1920);
    box-shadow: var(--d-tile-shadow, 0 0 calc(8 * 100cqw / 1920) color-mix(in srgb, var(--d-frame) 45%, transparent), 0 0 calc(28 * 100cqw / 1920) color-mix(in srgb, var(--d-frame) 18%, transparent)); /* glød og skygge: designets valg (skjemaet) */
    display: flex; flex-direction: column; gap: calc(14 * 100cqw / 1920); font-size: calc(28 * 100cqw / 1920); min-width: 0;
}
.design-preview .dp-title { color: var(--d-dim); font-size: calc(26 * 100cqw / 1920); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.design-preview .dp-big { font-size: calc(140 * 100cqw / 1920); font-weight: 300; line-height: 1; }
.design-preview .dp-news { font-size: calc(46 * 100cqw / 1920); font-weight: 600; line-height: 1.15; }
.design-preview .dp-muted { color: var(--d-muted); }
.design-preview .dp-bar { margin-top: auto; height: calc(6 * 100cqw / 1920); border-radius: 999px; background: color-mix(in srgb, var(--d-accent) 20%, transparent); overflow: hidden; }
.design-preview .dp-bar span { display: block; width: 62%; height: 100%; background: var(--d-frame-active, var(--d-accent)); }
.design-preview .dp-plus {
    position: absolute; top: calc(-10 * 100cqw / 1920); right: calc(20 * 100cqw / 1920);
    width: calc(26 * 100cqw / 1920); height: calc(26 * 100cqw / 1920); border-radius: 999px;
    background: var(--d-frame); color: var(--d-on-frame, #fff); /* knappene på rammekanten har rammens farge */
    box-shadow: var(--d-badge-glow, 0 0 0 calc(5 * 100cqw / 1920) color-mix(in srgb, var(--d-frame) 30%, transparent));
    display: flex; align-items: center; justify-content: center; font-size: calc(22 * 100cqw / 1920); line-height: 1;
}
.design-preview .dp-plus::before { content: "+"; font-weight: 700; }
.design-preview .dp-ticker {
    display: flex; align-items: center; gap: calc(40 * 100cqw / 1920); height: calc(64 * 100cqw / 1920); overflow: hidden; white-space: nowrap;
    background: var(--d-surface); border: max(1px, calc(var(--d-fw, 1.3) * 100cqw / 1920)) solid var(--d-border); border-radius: calc(var(--d-r) * 0.625 * 100cqw / 1920);
    font-size: calc(28 * 100cqw / 1920);
}
.design-preview .dp-label { align-self: stretch; display: flex; align-items: center; padding: 0 calc(22 * 100cqw / 1920); font-weight: 600; background: color-mix(in srgb, var(--d-fg) 8%, transparent); }
.design-preview .dp-dot { color: var(--d-dim); }
.design-color .form-control-color { width: 3rem; }
/* Listen: en liten skjerm i designets farger, med et kort i aksentfargen. */
.design-chip { display: block; width: 72px; aspect-ratio: 16 / 9; padding: 6px; border-radius: 4px; background: var(--d-bg); border: 1px solid var(--bs-border-color); }
.design-chip > span { display: block; position: relative; height: 100%; border: 1.5px solid var(--d-frame); border-radius: calc(var(--d-r) * 0.18px); background: color-mix(in srgb, var(--d-bg) 90%, var(--d-frame)); }
.design-chip > span::before { content: ""; position: absolute; top: 5px; left: 5px; width: 50%; height: 3px; border-radius: 1px; background: var(--d-accent); } /* tittelen */
.design-chip > span::after { content: ""; position: absolute; top: 11px; left: 5px; width: 70%; height: 6px; /* brødteksten: to tynne linjer i forgrunnsfargen, den nederste kortere */
    background: linear-gradient(var(--d-fg), var(--d-fg)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--d-fg), var(--d-fg)) 0 4px / 65% 1.5px no-repeat; }

/* Widget-vinduet (admin/layouts/widget_fields): små overskrifter over grupper av valg («I ruten», «I fullskjerm»,
   og kolonnene Ruten og Fullskjerm under Egenskaper). */
.widget-field-section { margin: .25rem 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.widget-field-section:not(:first-child) { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--bs-border-color-translucent); }
/* Designskjemaet (admin/designs/form): deler med en liten overskrift og en strek over. */
.form-section { margin: 1.5rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color-translucent); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }

/* Øverst til venstre i admin: kontoens ikon og navn (page_navbar), kortet ned med … når navnet er langt. */
.navbar-account { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; max-width: 22rem; font-weight: 600; }
.navbar-account > .bi { flex: none; font-size: 1.15em; }
.navbar-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ikonvelgeren på kontoene (admin/accounts): rutenett med ikon og navn, valgt ikon uthevet. */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .4rem; }
.icon-grid-option { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .3rem .45rem; min-width: 0; }
.icon-grid-option .bi { font-size: 1.5rem; line-height: 1; }
.icon-grid-option span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
/* Verktøylinjen i mediebiblioteket: overskriften uten egen bunnstrek (delene under, filtre og massevalg, har strek
   over seg), så det ikke blir dobbel strek mot kortets kant når de er skjult. */
.media-toolbar > .card-header { border-bottom: 0; }
/* Kort med tabell (listene): innholdet klippes langs kortets avrunding, så tabellhodet og radene ikke stikker ut i
   hjørnene. Ikke der dra-håndtakene står utenfor kortet (språktabellen, td.drag-cell). */
.card:has(> .table-responsive, > .table):not(:has(.drag-cell)) { overflow: hidden; }

/* Taggene (admin/tags): «Slå sammen» i linja for valgte tagger (flex i CSS, så [hidden] virker). */
.tags-merge { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tags-merge[hidden] { display: none; }

/* Undermenyen (admin/layout/section_tabs): egen linje i full bredde under hovedmenyen, som står fast når siden rulles.
   Body har margin-top 50px under den faste menyen, og linjen skyves ned til menyens faktiske høyde av sticky-plasseringen
   (--navbar-h, admin.js); det den skyves, legges til luften under.
   Lenker med understrek på den aktive, og en skillelinje mellom gruppene. På smal skjerm rulles lenkene sidelengs. */
.subnav {
    /* 1px inn under menyen (som ligger over), så det ikke blir en glipe ved brøkdels-høyder. */
    position: sticky; top: calc(var(--navbar-h, 56px) - 1px); z-index: 1020;
    margin: 0 0 calc(1.25rem + var(--navbar-h, 56px) - 50px);
    border-bottom: 1px solid var(--bs-border-color);
}
.subnav-links { display: flex; align-items: stretch; gap: .25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-link {
    display: flex; align-items: center; padding: .6rem .75rem calc(.6rem - 2px); white-space: nowrap;
    color: var(--bs-secondary-color); text-decoration: none; font-size: .925rem;
    border-bottom: 2px solid transparent;
}
.subnav-link:hover { color: var(--bs-emphasis-color); }
.subnav-link.active { color: var(--subnav-fg); font-weight: 600; border-bottom-color: var(--bs-primary); }
/* Dempet fane (AdminSections::DIM_TABS): finnes, men er ikke det foretrukne valget. */
.subnav-link.is-dim:not(.active) { opacity: .55; font-style: italic; }
.subnav-sep { flex: none; width: 1px; margin: .65rem .5rem; background: var(--bs-border-color); }
.subnav-end { display: flex; align-items: center; padding-left: 1rem; white-space: nowrap; }
@media print { .subnav { display: none !important; } }

/* Aktivt hovedpunkt i menyen: på bred skjerm en fane i undermenyens farge som går helt ned og henger sammen med
   undermenyen (samme bakgrunn, ingen kant imellom); på smal skjerm (menyen klappet ut) en markert rad. */
/* Fargene settes på roten (lyst eller mørkt tema), ikke inne i menyen, som alltid er mørk: fanen får sidens farger. */
:root { --subnav-bg: var(--bs-secondary-bg); --subnav-fg: var(--bs-emphasis-color); }
.subnav { background: var(--subnav-bg); }
.navbar .navbar-nav .nav-link.active { font-weight: 600; }
@media (min-width: 1200px) {
    .navbar.fixed-top { padding-bottom: 0; }
    .navbar .navbar-collapse { align-self: stretch; }
    .navbar .navbar-nav.nav-main { align-self: stretch; align-items: stretch; margin-bottom: 0 !important; }
    .navbar .nav-main .nav-item { display: flex; }
    .navbar .nav-main .nav-link { display: flex; align-items: center; padding: 0 1rem .5rem; margin-top: 0; border-radius: .5rem .5rem 0 0; }
    .navbar .nav-main .nav-link.active { background: var(--subnav-bg); color: var(--subnav-fg); position: relative; z-index: 1; }
    .navbar .navbar-brand, .navbar .dropdown, .navbar .nav-user { margin-bottom: .5rem; }
    .navbar .nav-user > .dropdown { margin-bottom: 0; } /* pillen løftes, ikke knappene i den */
    .navbar .nav-main > .dropdown { margin-bottom: 0; } /* «Innhold» (menyen med malene) står som de andre hovedpunktene */
    /* Åpen «Innhold»: punktet blir en fane i undermenyens farge, og menyen henger sammen med den (sidens tema, admin.js). */
    /* Sidens bakgrunn (ikke undermenyens grå), med kant og skygge: et kort som henger ned fra fanen, tydelig over stripen. */
    :root { --content-menu-bg: var(--bs-body-bg); }
    .navbar .nav-main .content-menu-item .nav-link.show { background: var(--content-menu-bg); color: var(--subnav-fg); position: relative; z-index: 1001; }
    .navbar .content-menu { --bs-dropdown-bg: var(--content-menu-bg); background: var(--content-menu-bg); border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: 0 .5rem .5rem .5rem; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3); }
}
@media (max-width: 1199.98px) {
    .navbar .nav-main .nav-link.active { background: var(--subnav-bg); color: var(--subnav-fg); border-radius: .375rem; padding-left: .75rem; padding-right: .75rem; }
}


/* Kode i API-dokumentasjonen (admin/api_docs) og den nye nøkkelen (vises én gang). */
.api-doc { max-width: 52rem; }
.api-doc-code { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .6rem .8rem; font-size: .8rem; white-space: pre-wrap; word-break: break-word; }
.api-new-key { font-size: .95rem; padding: .3rem .5rem; background: var(--bs-body-bg); border-radius: .25rem; word-break: break-all; }

/* Tekstbiblioteket (admin/texts): utdrag av teksten i lista, høyst to linjer. */
.text-library-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Tidligere versjoner av en tekst (admin/texts/form): lange vises forkortet til de åpnes. */
.text-revision { white-space: normal; word-break: break-word; margin-top: .25rem; }
.text-revision.is-long:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Support (admin/support): merket ved «Support» i hovedmenyen. */
.nav-badge { font-size: .68rem; vertical-align: .12em; margin-left: .15rem; }
/* Enhetene i «Meld inn feil»: knapper som krysses av. */
.support-devices { display: flex; flex-wrap: wrap; gap: .4rem; }
.support-devices[hidden] { display: none; }
/* Detaljene i en sak: navn til venstre, verdi til høyre. */
.support-facts { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .9rem; }
.support-facts dt { font-weight: 500; color: var(--bs-secondary-color); }
.support-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Statusvalget: fire knapper som brytes på smal skjerm, i statusens farge når valgt. */
.support-status { display: flex; flex-wrap: wrap; gap: .35rem; }
.support-status .btn-check:checked + .status-open { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.support-status .btn-check:checked + .status-resolved { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
.support-status .btn-check:checked + .status-no_fix { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle); }
.support-status .btn-check:checked + .status-request { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border-color: var(--bs-info-border-subtle); }

/* Chatten i en sak, som Meldinger på iPhone: egne bobler til høyre (blå), andre fra en leverandør også til høyre (lys
   blå), og kundens til venstre (grå), med en liten hale nederst mot avsenderens side. Over hver boble: brukernavn og klokkeslett. Hendelser og dagskiller står midt i. */
.chat {
    --chat-bg: var(--bs-body-bg);
    --chat-me: #0a84ff;
    --chat-them: #e9e9eb;
    --chat-them-fg: #000;
    --chat-provider: #d6e8fb;
    --chat-provider-fg: #0c447c;
    background: var(--chat-bg);
    display: flex; flex-direction: column; gap: .1rem;
    padding: 1rem 1.25rem 1.25rem;
    min-height: 14rem; max-height: min(62vh, 40rem); overflow-y: auto; overscroll-behavior: contain;
}
[data-bs-theme="dark"] .chat { --chat-them: #3a3a3c; --chat-them-fg: #fff; --chat-provider: #1d3d61; --chat-provider-fg: #d6e8fb; }
.chat-empty { margin: auto; color: var(--bs-secondary-color); font-size: .9rem; }
.chat-day { align-self: center; margin: .9rem 0 .2rem; font-size: .72rem; font-weight: 600; color: var(--bs-secondary-color); }
.chat-event { align-self: center; max-width: 85%; text-align: center; margin: .45rem 0; font-size: .75rem; color: var(--bs-secondary-color); }
.chat-msg { display: flex; align-self: flex-start; max-width: min(75%, 34rem); margin-top: .55rem; }
.chat-msg.is-me, .chat-msg.is-provider { align-self: flex-end; }
.chat-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.is-me .chat-body, .is-provider .chat-body { align-items: flex-end; }
.chat-meta { font-size: .7rem; color: var(--bs-secondary-color); margin: 0 .8rem .15rem; }
.chat-bubble {
    position: relative; padding: .45rem .85rem; border-radius: 1.15rem; line-height: 1.35;
    background: var(--chat-them); color: var(--chat-them-fg);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.is-me .chat-bubble { background: var(--chat-me); color: #fff; }
.is-provider .chat-bubble { background: var(--chat-provider); color: var(--chat-provider-fg); }
/* Halen: en flate i boblens farge, avrundet bort av en flate i chattens bakgrunnsfarge utenfor. */
.chat-bubble::before, .chat-bubble::after { content: ""; position: absolute; bottom: 0; height: 1.1rem; }
.chat-bubble::before { left: -.45rem; width: 1.1rem; background: var(--chat-them); border-bottom-right-radius: .9rem .7rem; }
.chat-bubble::after { left: -.65rem; width: .65rem; background: var(--chat-bg); border-bottom-right-radius: .55rem; }
.is-me .chat-bubble::before, .is-provider .chat-bubble::before { left: auto; right: -.45rem; border-bottom-right-radius: 0; border-bottom-left-radius: .9rem .7rem; }
.is-me .chat-bubble::before { background: var(--chat-me); }
.is-provider .chat-bubble::before { background: var(--chat-provider); }
.is-me .chat-bubble::after, .is-provider .chat-bubble::after { left: auto; right: -.65rem; border-bottom-right-radius: 0; border-bottom-left-radius: .55rem; }
.chat-bubble { isolation: isolate; }
.chat-bubble::before { z-index: -1; }
/* Skrivefeltet: rundt felt som vokser, med en rund sendeknapp. */
.chat-compose-wrap { background: var(--bs-body-bg); }
.chat-compose { display: flex; align-items: flex-end; gap: .5rem; }
.chat-compose textarea { border-radius: 1.1rem; resize: none; overflow-y: hidden; padding: .45rem .9rem; line-height: 1.35; min-height: 2.3rem; }
.chat-send { flex: none; width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.chat-attach { flex: none; width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
/* Bildene i en sak (ved innmeldingen og i chatten), admin/support/_photos */
.chat-photos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.chat-photos img { width: 7.5rem; height: 5.6rem; object-fit: cover; border-radius: .7rem; display: block; }
/* Chatten i popupen for en sak (admin/support/index): lavere, så detaljene og behandlingen får plass ved siden av. */
.modal .chat { min-height: 12rem; max-height: min(48vh, 30rem); }
/* Detaljene i en sak, øverst i hovedkolonnen: to par per rad på bred skjerm; kommentaren over hele bredden. */
@media (min-width: 768px) {
    .support-facts-wide { grid-template-columns: auto 1fr auto 1fr; }
    .support-facts-wide .is-wide-label { grid-column: 1; }
    .support-facts-wide .is-wide { grid-column: 2 / -1; }
}
/* Supportstatistikk (admin/support/stats): sju brede stolper for ukedagene, med dag og antall under hver. */
.support-weekdays { gap: .6rem; height: 150px; }
.support-weekday-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; text-align: center; line-height: 1.3; }

/* Plantegninger (Kontoer → Plantegninger, admin/modules/placement): bildet med markører plassert i prosent av bredden og
   høyden (--x, --y). Markøren er en nål med spissen i punktet; navnet vises ved nålen. */
.floor-plan { position: relative; display: block; line-height: 0; border-radius: .375rem; overflow: hidden; background: var(--bs-tertiary-bg); -webkit-user-select: none; user-select: none; }
.floor-plan[hidden] { display: none; }
/* Ikke markerbar eller drabar (Safari markerer bildet ved dobbeltklikk, og blueprint-filteret gjør markeringen helt hvit). */
.floor-plan img { width: 100%; height: auto; display: block; -webkit-user-drag: none; }
.floor-plan img::selection, .floor-plan::selection { background: transparent; }
[data-placement][data-editable] .floor-plan-large { cursor: crosshair; }
/* I popupen: hele tegningen synlig i vinduet (boksen er like stor som bildet, så markørene treffer). */
.floor-plan-large { width: fit-content; max-width: 100%; margin: 0 auto; }
.floor-plan-large img { width: auto; max-width: 100%; max-height: calc(100vh - 12rem); }
.floor-plan-marker { position: absolute; left: var(--x); top: var(--y); width: 1.6rem; height: 1.6rem; transform: translate(-50%, -100%); line-height: 1.2; z-index: 2; }
.floor-plan-marker[hidden] { display: none; }
.floor-plan-marker::before {
    content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.82); transform-origin: 50% 50%;
    background: var(--bs-primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.floor-plan-marker.is-current { cursor: grab; touch-action: none; z-index: 3; }
.floor-plan-marker.is-current.is-dragging { cursor: grabbing; }
.floor-plan-marker.is-other::before { background: #6c757d; opacity: .85; }
.floor-plan-marker.is-small { width: .9rem; height: .9rem; }
.floor-plan-marker.is-small::before { border-width: 1.5px; }
.floor-plan-label {
    position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: .1rem; white-space: nowrap;
    font-size: .72rem; font-weight: 600; padding: .05rem .4rem; border-radius: .25rem; background: rgba(0, 0, 0, .72); color: #fff; pointer-events: none;
}
.floor-plan-marker.is-other .floor-plan-label { font-weight: 400; opacity: 0; transition: opacity .15s; }
.floor-plan-marker.is-other:hover .floor-plan-label { opacity: 1; }
/* Plantegningene i listen på kontosiden: liten miniatyr med markørene, i tegningens sideforhold (så markørene treffer). */
.floor-plan-frame { width: 96px; height: 60px; display: flex; align-items: center; justify-content: center; }
.floor-plan-mini { border: 1px solid var(--bs-border-color); border-radius: .25rem; }
.floor-plan-mini img { width: 100%; height: 100%; }
/* Plantegningen stor fra kontosiden (#plan-view): navnene alltid synlige; som lenke når installasjonen kan åpnes. */
.floor-plan-mini { cursor: zoom-in; background: var(--bs-tertiary-bg); }
a.floor-plan-marker.is-labelled .floor-plan-label { text-decoration: none; }
a.floor-plan-marker.is-labelled:hover::before { filter: brightness(1.2); }
a.floor-plan-marker.is-labelled:hover .floor-plan-label { background: var(--bs-primary); }
/* Plantegningsvinduet på kontosiden: tegningen, og i redigeringsmodus sidelisten med installasjonene som ikke er på
   den. Markørene kan dras, og ✕ i navnet tar installasjonen av tegningen. */
.plan-view-layout { display: flex; gap: 1rem; align-items: flex-start; }
.plan-view-layout .floor-plan-large { flex: 0 1 auto; }
.plan-view-side { flex: 0 0 15rem; max-height: calc(100vh - 12rem); overflow-y: auto; }
.plan-view-side[hidden] { display: none; }
@media (max-width: 767.98px) { .plan-view-layout { flex-direction: column; } .plan-view-side { flex-basis: auto; width: 100%; } }
.floor-plan.is-editing .floor-plan-label { pointer-events: auto; }
.floor-plan-remove { border: 0; background: none; color: #fff; padding: 0 0 0 .35rem; font-size: .7rem; line-height: 1; opacity: .8; cursor: pointer; }
.floor-plan-remove:hover { opacity: 1; color: #ff8a8a; }
/* Blueprint-visning av plantegninger (floor_plans.style, filteret i admin/partials/blueprint_filter): hvite linjer på
   blått med rutenett, og oransje markører som synes på blått. Filen endres ikke. */
.floor-plan.is-blueprint {
    /* Rutenettet som repeterende gradienter over hele tegningen (ikke fliser, som rundes av hver for seg og glir fra
       hverandre): store og små ruter. Med målestokk (FloorPlanModel::grid) i prosent, så rutene har riktige mål. */
    background-color: #0d3a66;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px var(--fp-mx, 80px)),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px var(--fp-my, 80px)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px var(--fp-nx, 16px)),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px var(--fp-ny, 16px));
}
/* Miniatyrene: tettere faste ruter, og med målestokk bare de store rutene (de små blir for tette). */
.floor-plan-mini.is-blueprint, .floor-plan.is-blueprint[data-summary-plan] {
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px var(--fp-mx, 24px)),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px var(--fp-my, 24px)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px var(--fp-mx, 6px)),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px var(--fp-my, 6px));
}
.floor-plan.is-blueprint img { filter: url(#fp-blueprint); }
.floor-plan.is-blueprint .floor-plan-marker::before { background: #ffb020; }
.floor-plan.is-blueprint .floor-plan-marker.is-other::before { background: #c9d6e3; }

/* API-dokumentasjonen (admin/api_docs): ett endepunkt per rad som kan åpnes, med fargen til metoden (som Swagger). */
.api-op { border: 1px solid var(--bs-border-color); border-left: 4px solid var(--api-color); border-radius: .375rem; background: var(--bs-body-bg); }
.api-op-get { --api-color: #2f9e6e; }
.api-op-post { --api-color: #2b7de9; }
.api-op-put { --api-color: #d08a12; }
.api-op-patch { --api-color: #8a5cd0; }
.api-op-delete { --api-color: #d9534f; }
.api-op-head { display: flex; align-items: center; gap: .75rem; padding: .55rem .85rem; cursor: pointer; list-style: none; }
.api-op-head::-webkit-details-marker { display: none; }
.api-op-head::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; color: var(--bs-secondary-color); transition: transform .15s; }
.api-op[open] > .api-op-head::after { transform: rotate(180deg); }
.api-op[open] > .api-op-head { border-bottom: 1px solid var(--bs-border-color); }
.api-method { flex: none; min-width: 3.6rem; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .45rem; border-radius: .25rem; color: #fff; background: var(--api-color); }
.api-path { font-size: .9rem; color: var(--bs-body-color); }
.api-summary { color: var(--bs-secondary-color); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-op-body { padding: .85rem; }
.api-params td, .api-params th { vertical-align: middle; }
.api-resp > summary { cursor: pointer; }
.api-status { display: inline-block; min-width: 2.6rem; text-align: center; font-weight: 600; font-size: .75rem; padding: .05rem .4rem; border-radius: .25rem; border: 1px solid var(--bs-border-color); }
.api-status-ok { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.api-status-warn { color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.api-status-err { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.api-result-body { max-height: 26rem; overflow: auto; white-space: pre; word-break: normal; }
.api-try-key { position: sticky; top: calc(var(--navbar-h, 56px) + .5rem); z-index: 5; }

/* Installasjonslisten (admin/modules/index): installasjoner som er offline eller delvis online får en kant i venstre
   kant av raden i statusens farge, som kortene på oversikten (.overview-kpi). */
/* Bootstrap tegner bakgrunnen i cellene (også ved pekeren, table-hover) som en skygge; kanten legges oppå den, så
   hover-bakgrunnen ikke forsvinner i første celle. */
.rich-list tr:is(.row-state-offline, .row-state-partial) > td:first-child {
    box-shadow: inset 4px 0 0 var(--row-state), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
.rich-list tr.row-state-offline { --row-state: var(--bs-danger); }
.rich-list tr.row-state-partial { --row-state: var(--bs-warning); }

/* Tall som skal stå på linje i en kolonne (f.eks. plass og poeng i highscore-listene). */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Innholdsmaler (Innhold → Apper, admin/cms): typevelgeren for et nytt felt (kort med ikon, navn og forklaring), og
   ikonet for typen foran hvert felt i listen. */
.cms-type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
.cms-type-option { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: .5rem; row-gap: .15rem; height: 100%; text-align: left; padding: .6rem .75rem; white-space: normal; }
.cms-type-option .bi { font-size: 1.25rem; line-height: 1; } /* ikonet og navnet på én linje, beskrivelsen under */
.cms-type-option .small { flex-basis: 100%; }
.cms-type-option .small { line-height: 1.3; }
.btn-check:checked + .cms-type-option .small { color: inherit !important; opacity: .85; }
.cms-field-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .375rem; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
/* Elementene i en innholdsmal: miniatyr av det første bildet (eller et ikon), og gruppene i skjemaet. */
.cms-item-thumb { width: 3rem; height: 2.25rem; border-radius: .25rem; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.cms-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cms-item-num { width: 1.75rem; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
/* Celler (malen sin «Listen»: celler): hvert felt i listen i sin kolonne, med overskrifter over (cms-cells-head). */
.cms-cells { display: grid; column-gap: 1rem; align-items: center; min-width: 0; }
.cms-cells-when { width: 7rem; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-cells-head .cms-item-thumb { height: 0; }
.cms-group-entry > .card-header { background: var(--bs-tertiary-bg); }
/* Feltene på malsiden: underfeltene i en gruppe og kolonnene i en matrise med strek som i et tre (is-last: siste gren). */
.list-group-item.field-tree { position: relative; padding-left: 2.25rem; }
.list-group-item.field-tree::before { content: ""; position: absolute; left: 1.15rem; top: -1px; bottom: -1px; border-left: 1px solid var(--bs-secondary-color); opacity: .45; }
.list-group-item.field-tree.is-last::before { bottom: 50%; }
.list-group-item.field-tree::after { content: ""; position: absolute; left: 1.15rem; top: 50%; width: .65rem; border-top: 1px solid var(--bs-secondary-color); opacity: .45; }
/* Tabellene i elementskjemaet (matrise, og gruppe som tabell): kompakte celler; etiketten står i tabellhodet. */
.cms-table > :not(caption) > * > * { padding: .25rem .3rem; vertical-align: top; }
.cms-table thead th { font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; }
.cms-table .cms-cell { min-width: 9rem; }
.cms-table .cms-cell .mb-3 { margin-bottom: 0 !important; }
.cms-table .cms-cell .form-label:not(.d-block), .cms-table .cms-cell > .mb-3 > .form-text { display: none; }
.cms-table td > [data-repeat-number] { display: inline-block; padding-top: .35rem; }
/* Velgervinduet for filer over popupen for et element (innholdsmalene): over popupen og dens bakgrunn. */
[id^="cms-picker-"] { z-index: 1065; }
.modal-backdrop + .modal-backdrop { z-index: 1060; }

/* Alternativene i en valgliste (innholdsmalene, admin/cms/_field_form): som svaralternativene i en quiz (over), med
   navn og verdi i samme felt. */
.cms-options { display: flex; flex-direction: column; gap: .25rem; }
/* Håndtaket vises hele tiden (ikke bare ved pekeren, og også mens en rad dras), så venstre marg ser ryddig ut; det
   samme for svaralternativene i en quiz. */
:is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) > .drag-handle, body.drag-sorting :is([data-answer-row], [data-option-row], [data-mc-row], [data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) > .drag-handle { opacity: 1; }
.cms-option-value { flex: 0 0 40% !important; }
.cms-option-head { width: calc(40% + 1.4rem); } /* verdifeltet (40 % av raden, som er 1,25rem smalere) og fjern-knappen */

/* Toast (admin.js, adminToast): over popupene, med en farget kant og ikon etter typen. */
#admin-toasts { z-index: 1090; }
.admin-toast { --toast-accent: var(--bs-success); border-left: 4px solid var(--toast-accent); }
.admin-toast .toast-body > .bi { color: var(--toast-accent); line-height: 1.5; }
.admin-toast-warning { --toast-accent: var(--bs-warning); }
.admin-toast-danger { --toast-accent: var(--bs-danger); }
.admin-toast-info { --toast-accent: var(--bs-info); }

/* Tom-select som liste (admin.js, initListSelect): feltet er bare søket; det som er valgt, står i lista over. */
.ts-wrapper.ts-list .ts-control > .item { display: none; }
.ts-wrapper.ts-list .ts-control { cursor: text; }
.ts-picked .list-group-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem; }
/* Sorterbar liste (data-sortable): håndtaket i venstre kant av raden, som på tavlene (vises ved pekeren). */
.ts-picked.is-sortable .list-group-item { padding-left: 1.25rem; }

/* Nedtrekkslisten til et felt i en popup ligger i popup-elementet, utenfor rullingen (admin.js, floatInModal). */
.ts-dropdown.ts-dropdown-float { z-index: 1060; margin: 0; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }

/* Hjelpetekster av (brukermenyen, Libraries\UserPrefs): tekstene under feltene, introtekstene øverst på sidene
   (.help-text, og det uthevede kortet .page-help fra admin/partials/page_header) og forklaringene ellers (.help-text).
   .form-status er statusmeldinger i samme stil, som alltid vises. */
.hide-help .form-text:not(.form-status),
.hide-help .help-text,
.hide-help .page-help,
.hide-help .cms-type-option .small { display: none !important; } /* beskrivelsene i typevelgerne (felt, QR-kode, variabel): tooltip i stedet */
/* Valgene i brukermenyen (admin/layout/prefs_menu): to like bryterlinjer, med lyst/mørkt som ikoner i tekststil til
   høyre for «Auto-tema». Det valgte har en myk aksentflate bak seg; mens Auto er på, er ikonene nedtonet, og temaet
   maskinen gir, har en nøytral flate. Fargene fra menyens (mørke) tema, også når siden er lys. */
.nav-prefs { color: var(--bs-body-color); display: flex; flex-direction: column; gap: .35rem; }
.nav-prefs-row { display: flex; align-items: center; gap: .5rem; min-height: 1.75rem; }
.nav-prefs .form-check-label { white-space: nowrap; }
.nav-prefs-themes { display: flex; gap: .15rem; }
.nav-prefs-theme { background: none; border: 0; border-radius: .375rem; padding: .3rem .4rem; line-height: 1; font-size: 1.05rem; color: var(--bs-secondary-color); }
.nav-prefs-theme:not(:disabled):not(.is-chosen):hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.nav-prefs-theme.is-chosen { color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); }
.nav-prefs-theme:disabled { color: var(--bs-tertiary-color); opacity: .6; cursor: default; }
.nav-prefs-theme:disabled.is-chosen { color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); opacity: .8; }
.nav-prefs-theme:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
/* Språket (Libraries\Ui): NO / EN ved «Auto-språk», som temaknappene. */
.nav-prefs-lang { font-size: .78rem; font-weight: 600; min-width: 2rem; padding: .35rem .4rem; letter-spacing: .02em; }

/* Feltetikettene i halvfet, som i Bootstrap 3 (Bootstrap 5 har vanlig vekt). Tillegg i etiketten som «(valgfri)»
   (dempet eller liten tekst) står i vanlig vekt. */
.form-label { font-weight: 600; }
.form-label .small, .form-label small, .form-label .text-body-secondary { font-weight: 400; }

/* Hendelser (admin/events/index): antall treff med en svak stolpe bak for andelen av den største. */
.events-share { padding: .1rem .4rem; border-radius: .25rem; background-image: linear-gradient(270deg, rgba(var(--bs-primary-rgb), .14) var(--share), transparent var(--share)); }

/* QR-koder (admin/qr): bildet i listen og forhåndsvisningen, alltid svart på hvitt (også i mørkt tema), så det kan skannes. */
.qr-thumb { width: 48px; height: 48px; padding: 3px; background: #fff; border-radius: .25rem; }
.qr-preview { width: min(100%, 240px); aspect-ratio: 1; background: #fff; border-radius: .5rem; padding: .25rem; }
.qr-thumb svg, .qr-preview svg { display: block; width: 100%; height: 100%; }

/* Tidsplanens uke (admin/schedules/form): strek bare under overskriftene, ikke mellom dagene. */
.schedule-week > tbody > tr > * { border-bottom-width: 0; }
.schedule-week > thead > tr > th { border-bottom: 1px solid var(--bs-border-color); }

/* Innholdsmaler: trevisningen av elementene (admin/cms/edit), som menyene på tavlene (.layout-tree): +/− for
   elementer med underelementer, heltrukne streker i samme farge, en vinkel inn til hvert (avrundet └ ved det siste),
   strek forbi for nivåene som fortsetter, og en prikk der streken slutter ved elementer uten underelementer.
   Cellene er 1.5rem brede og dekker hele raden (raden har .5rem luft over og under). */
.cms-tree { --tree: color-mix(in srgb, var(--bs-secondary-color) 75%, var(--bs-body-bg)); }
.cms-tree-indent { display: none; }
.cms-tree .cms-tree-indent { display: flex; align-self: stretch; margin: -.5rem -.25rem -.5rem 0; }
.cms-tree-cell, .cms-tree-fold { position: relative; width: 1.5rem; flex: none; display: flex; align-items: center; justify-content: center; }
.cms-tree-cell.is-line::before, .cms-tree-cell.is-elbow::before { content: ""; position: absolute; left: calc(.75rem - .5px); top: -1px; bottom: -1px; border-left: 1px solid var(--tree); }
.cms-tree-cell.is-elbow::after { content: ""; position: absolute; left: calc(.75rem - .5px); right: 0; top: calc(50% - .5px); border-top: 1px solid var(--tree); }
.cms-tree-cell.is-elbow.is-last::before { bottom: auto; height: calc(50% + 1.5px); width: calc(.75rem + .5px); border-bottom: 1px solid var(--tree); border-bottom-left-radius: .4rem; }
.cms-tree-cell.is-elbow.is-last::after { display: none; }
.cms-tree-fold.is-open::after { content: ""; position: absolute; left: calc(.75rem - .5px); top: calc(50% + .55rem + 4px); bottom: -1px; border-left: 1px solid var(--tree); }
.cms-tree-fold.is-leaf.is-child::before { content: ""; position: absolute; left: 0; width: .75rem; top: calc(50% - .5px); border-top: 1px solid var(--tree); }
.cms-tree-fold.is-leaf.is-child::after { content: ""; position: absolute; left: calc(.75rem - 2.5px); top: calc(50% - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--tree); }
.cms-tree-filtered .cms-tree-cell::before, .cms-tree-filtered .cms-tree-cell::after, .cms-tree-filtered .cms-tree-fold::before, .cms-tree-filtered .cms-tree-fold::after { display: none; }
.cms-tree-filtered [data-drag-handle] { visibility: hidden; }

/* Matrisekolonnene (admin.js, [data-matrix-columns]): tabellhodet som forhåndsvisning. */
.cms-matrix-preview th { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.cms-matrix-preview td { height: 1.75rem; }
/* Indeksen ([0], [1] …) og håndtaket er én grå blokk foran navnet: rette hjørner og ingen strek mellom dem. */
.cms-mc-index { min-width: 2.4rem; justify-content: center; padding-left: .2rem; font-family: var(--bs-font-monospace); color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg); border-left: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
[data-mc-row] > .drag-handle { border-right-width: 0; }

/* Matrisen i elementskjemaet (admin/cms/_input): kolonnenavnene over cellene i samme bredder, hver rad som ett
   sammenhengende felt med håndtaket i margen til venstre (på linje med overskriften) og fjern til høyre; ingen
   tabellstreker. */
.cms-mx-rows { display: flex; flex-direction: column; gap: .25rem; }
/* Overskriftsraden er en del av tabellen: samme ramme og bredde som radene, med bakgrunn; navnene står over cellene. */
.cms-mx-head { display: flex; padding: .3rem 0 .3rem calc(1.25rem + 2rem); margin-bottom: .25rem; font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); }
/* Overskriftsraden sitter rett på første rad (felles kant, rette hjørner mellom dem). */
.cms-mx-head { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cms-mx-head + .cms-mx-rows > :first-child, .cms-mx-head + .cms-mx-rows > :first-child > .input-group > :last-child { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.cms-mx-head + .cms-mx-rows > :first-child > .drag-handle { border-top-left-radius: 0 !important; }
.cms-mx-head > span { min-width: 0; padding: 0 .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-mx-head:not(.is-fixed)::after { content: ""; flex: none; width: 2rem; }
.cms-mx-remove { flex: none; width: 2rem; }
.cms-mx-row .form-control { min-width: 0; }

/* Matriseradene og filene (flere) i elementskjemaet ser like ut: håndtaket festet på utsiden (i margen, på linje
   med feltnavnet), og nummeret i en dempet blokk inntil det, før innholdet. */
.cms-mx-index, .cms-files[data-multiple="1"] > .picked-item::before { flex: none; width: 2rem; display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--bs-tertiary-color); background: var(--bs-tertiary-bg); }
.cms-mx-index { padding: 0; border-left: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
:is([data-mx-row], .cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) > .drag-handle { border-right-width: 0; }
.cms-mx-rows.is-fixed .cms-mx-index { border-left: var(--bs-border-width) solid var(--bs-border-color); border-top-left-radius: var(--bs-border-radius-sm) !important; border-bottom-left-radius: var(--bs-border-radius-sm) !important; }
.cms-mx-head.is-fixed { padding-left: 2rem; }
/* Filene: en rad per fil i full bredde (som referansene); flere står som egne rader med nummer og håndtak. */
.cms-files { flex-direction: column; flex-wrap: nowrap; gap: .25rem; min-width: 0; } /* uten wrap: radene er så brede som feltet (med wrap blir de så brede som innholdet) */
.cms-files .picked-item { position: relative; max-width: none; min-height: calc(1.5em + .5rem + 2px); padding: 0 .6rem 0 0; gap: .6rem;
    border-radius: var(--bs-border-radius-sm); }
.cms-files[data-multiple="0"] .picked-item { padding-left: .25rem; }
.cms-files .picked-thumb { margin: .25rem 0; }
.cms-files .picked-name { flex: 1 1 auto; min-width: 0; }
.cms-files[data-multiple="1"] { counter-reset: cms-file; }
.cms-files[data-multiple="1"] > .picked-item::before { counter-increment: cms-file; content: counter(cms-file); align-self: stretch; margin-right: -.1rem;
    border-right: 1px solid var(--bs-border-color); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cms-files[data-multiple="0"] .picked-item > .drag-handle { display: none; }
/* Håndtaket på en rad som selv har ramme (filene, referansene, gruppekortene): over hele rammen, og inntil den. */
/* Raden har ingen venstre kant: håndtaket er kanten, så det ikke blir en strek mellom håndtaket og nummeret. */
:is(.cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) { border-left-width: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
:is(.cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) > .drag-handle { top: -1px; bottom: -1px; right: calc(100% - 2px); width: calc(1.25rem + 2px) !important; }
/* (2 px inn over raden og 2 px bredere: ingen glipe mellom håndtaket og nummeret, heller ikke med Safaris avrunding.) */
/* Referansene (flere) som egne rader med nummer, som filene. */
.ts-picked.cms-rows { display: flex; flex-direction: column; gap: .25rem; counter-reset: cms-ref; }
.ts-picked.cms-rows > li.list-group-item { position: relative; min-height: calc(1.5em + .5rem + 2px); padding: 0 .6rem 0 0; gap: .6rem; border-width: var(--bs-border-width) var(--bs-border-width) var(--bs-border-width) 0 !important;
    border-radius: var(--bs-border-radius-sm) !important; }
.ts-picked.cms-rows > li::before { counter-increment: cms-ref; content: counter(cms-ref); align-self: stretch; flex: none; width: 2rem; display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--bs-tertiary-color); background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); margin-right: -.1rem; }
.ts-picked.cms-rows:not(.is-sortable) > li { padding-left: .6rem; border-left-width: var(--bs-border-width) !important; }
.ts-picked.cms-rows:not(.is-sortable) > li::before { display: none; }
/* Gruppekortene: nummeret i samme dempede blokk først i toppen. */
.cms-row-num { flex: none; width: 2rem; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 1.9rem;
    font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--bs-tertiary-color); background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); }
.cms-group-entry > .card-header { overflow: hidden; }
/* Rader med egen ramme og håndtaket på utsiden: ingen luft til venstre (den felles regelen gir 1 px), og markeringen
   tegnes over rammen (ikke innenfor den). */
:is(.cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row) { padding-left: 0 !important; }
:is(.cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row):is(.is-dragging, .is-selected)::after { inset: -1px -1px -1px 0; }
:is(.cms-files[data-multiple="1"] > .picked-item, .ts-picked.cms-rows.is-sortable > li, [data-gx-row].card, .cms-gt-row):is(.is-dragging, .is-selected) { border-color: transparent !important; }
/* Gruppe som tabell (admin/cms/_group_row): som matrisen, én rad med ramme per oppføring; underfeltene side om side. */
.cms-gt-row { position: relative; display: flex; align-items: stretch; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); background: var(--bs-body-bg); }
.cms-gt-row > .cms-row-num { min-height: 0; }
.cms-gt-row > .cms-cell { flex: 1 1 0; min-width: 0; padding: .25rem; }
.cms-gt-row > .cms-cell .mb-3 { margin-bottom: 0 !important; }
.cms-gt-row > .cms-cell .form-label, .cms-gt-row > .cms-cell > .mb-3 > .form-text { display: none !important; }
.cms-gt-remove { flex: none; width: 2rem; align-self: center; }
.cms-gt-head > span { flex: 1 1 0; padding: 0 1rem; }
/* Gruppe som tabell: «Velg fil» like høy som feltene ved siden av (på linje med dem i en tom rad). */
.cms-gt-row > .cms-cell [data-cms-pick] { min-height: calc(1.5rem + .75rem + 2px); display: inline-flex; align-items: center; gap: .3rem; }
.cms-gt-row > .cms-cell .picked-item { min-width: 0; }
/* En tom filliste (bare mellomrom i HTML-en) har ingen luft under seg, så «Velg fil» står på linje med feltene. */
.picked-list:not(:has(.picked-item)) { margin-bottom: 0 !important; }
/* Listene med rader som har egen ramme: innrykket er hele håndtaket, så håndtaket står på feltets venstre kant (ikke 1 px utenfor). */
:is(.cms-files[data-multiple="1"], .ts-picked.cms-rows.is-sortable, .cms-gx-rows, .cms-gt-rows) { padding-left: 1.25rem !important; }
/* Nummeret i matriseradene har samme størrelse som de andre (input-group-sm gir ellers større skrift). */
.input-group > .cms-mx-index { font-size: .75rem; }

/* Menyen «Innhold» i hovedmenyen (admin/layout/content_menu): malene gruppert på gruppe → installasjon → mal med søk
   (venstre), og sidene i punktet (høyre). På smal skjerm under hverandre i den sammenklappede menyen. */
.content-menu { width: min(48rem, calc(100vw - 2rem)); overflow: hidden; }
.content-menu-grid { display: grid; grid-template-columns: 1fr 13rem; }
.content-menu.is-narrow { width: auto; min-width: 13rem; } /* uten treet med innholdsmalene: bare sidene, som de andre menyene */
.content-menu.is-narrow .content-menu-grid { grid-template-columns: 1fr; }
.content-menu-main { display: flex; flex-direction: column; min-width: 0; border-right: var(--bs-border-width) solid var(--bs-border-color); }
.content-menu-search { position: relative; padding: .6rem .75rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.content-menu-search > .bi { position: absolute; left: 1.35rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); font-size: .8rem; }
.content-menu-search .form-control { padding-left: 1.9rem; }
.content-menu-scroll { max-height: min(65vh, 34rem); overflow-y: auto; padding: .4rem 0 .6rem; }
.content-menu-side { padding: .5rem 0; }
.content-menu-side .dropdown-item { font-size: .9rem; }
.cm-sep { margin: .35rem 1rem; border-top: var(--bs-border-width) solid var(--bs-border-color); }
.cm-section { padding: .4rem 1rem .2rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }
.cm-group { margin-top: .35rem; }
.cm-group-head { display: flex; align-items: center; gap: .5rem; padding: .35rem 1rem; font-weight: 600; font-size: .85rem; color: var(--bs-emphasis-color); }
.cm-group-head > .bi { color: var(--bs-primary); }
.cm-group > .cm-module { margin-left: 1.15rem; border-left: var(--bs-border-width) solid var(--bs-border-color); }
.cm-module { padding: .1rem 0 .25rem; }
.cm-module-head { display: flex; align-items: center; gap: .5rem; padding: .3rem 1rem .1rem; font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); }
.cm-tpl { display: flex; align-items: center; gap: .5rem; padding: .25rem 1rem .25rem 2.1rem; font-size: .9rem; color: var(--bs-body-color); text-decoration: none; min-width: 0; }
.cm-tpl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-tpl > .bi { color: var(--bs-secondary-color); font-size: .8rem; }
.cm-tpl:hover, .cm-tpl:focus-visible { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.cm-recent { padding-bottom: .35rem; margin-bottom: .25rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.cm-recent .cm-tpl { padding-left: 1rem; }
.cm-empty { padding: .75rem 1rem; font-size: .9rem; color: var(--bs-secondary-color); }
/* Bred skjerm: panelet henger under menypunktet (venstre kant under fanen; admin.js flytter det inn når det ellers går
   ut over kanten av vinduet). Uten skript: sentrert under menylinjen. */
@media (min-width: 1200px) {
    .navbar .content-menu-item { position: static; }
    .navbar .content-menu-item > .content-menu { left: 50%; transform: translateX(-50%); top: 100%; margin-top: -1px; }
    .navbar .content-menu-item > .content-menu.is-placed { transform: none; }
}
@media (max-width: 1199.98px) {
    .content-menu { width: auto; }
    .content-menu-grid { grid-template-columns: 1fr; }
    .content-menu-main { border-right: 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
    .content-menu-scroll { max-height: 50vh; }
}

/* Hurtigsøket (Cmd/Ctrl+K; admin/layout/page_navbar, admin.js): knappen i menyen og vinduet med treffene. */
/* Som pillen med bytt konto og brukermenyen (.nav-user): 36 px med 2 px kant, luppen som kontoknappen og snarveien i
   en brikke formet som initialene (.nav-avatar), men dempet. */
.nav-search { align-items: center; gap: .4rem; height: 36px; padding: 2px 2px 2px .8rem; margin: 0 .5rem .5rem 0; align-self: center; border: 0; border-radius: 999px;
    font-size: 1rem; color: var(--bs-gray-300); background: rgba(255, 255, 255, .08); }
.nav-search:hover, .nav-search:focus-visible { color: #fff; background: rgba(255, 255, 255, .14); }
.nav-search kbd { display: inline-flex; align-items: center; height: 2rem; padding: 0 .65rem; font-size: .8rem; font-weight: 600; font-family: inherit; letter-spacing: .02em;
    color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .1); border-radius: 999px; box-shadow: none; }
.nav-search:hover kbd, .nav-search:focus-visible kbd { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .16); }
.quick-search-dialog { max-width: 40rem; margin-top: 10vh; }
.quick-search-head { position: relative; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.quick-search-head > .bi { color: var(--bs-secondary-color); }
.quick-search-head .form-control { border: 0; box-shadow: none; padding-left: .25rem; font-size: 1.05rem; background: transparent; }
.quick-search-head kbd, .quick-search-foot kbd { font-size: .7rem; padding: .05rem .35rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border: var(--bs-border-width) solid var(--bs-border-color); }
.quick-search-dialog .modal-body { max-height: 60vh; }
.qs-group { padding: .35rem 0; }
.qs-group + .qs-group { border-top: var(--bs-border-width) solid var(--bs-border-color); }
.qs-group-head { display: flex; align-items: center; gap: .45rem; padding: .3rem 1rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }
.qs-item { display: flex; align-items: baseline; gap: .75rem; padding: .4rem 1rem .4rem 2.15rem; color: var(--bs-body-color); text-decoration: none; }
.qs-item.is-active { background: var(--bs-primary-bg-subtle); color: var(--bs-emphasis-color); }
.qs-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-sub { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--bs-secondary-color); }
.qs-empty { padding: 1.25rem 1rem; color: var(--bs-secondary-color); font-size: .9rem; }
.quick-search-foot { display: flex; gap: 1rem; padding: .5rem 1rem; font-size: .75rem; color: var(--bs-secondary-color); border-top: var(--bs-border-width) solid var(--bs-border-color); }


/* Mediebiblioteket: installasjonene på rotnivå (låst) med malenes mapper under, som foldes ut med pila. */
.media-root-toggle { width: 1.9rem; padding: .5rem 0 .5rem .35rem; flex: none; text-decoration: none; }
.media-root-toggle .bi { display: inline-block; font-size: .75rem; transition: transform .15s; }
.media-root.is-open .media-root-toggle .bi { transform: rotate(90deg); }
.media-root-children { display: none; }
.media-root.is-open .media-root-children { display: block; }
.list-group-item.media-folder-child { padding-left: 2.4rem; font-size: .925rem; }
.media-root > .list-group-item.active a, .media-root > .list-group-item.active .media-root-toggle { color: var(--bs-list-group-active-color) !important; }
/* Rekkefølge-vinduet (admin/cms/edit): øyet (i listen) og «Tittel» på feltene på øverste nivå. */
#field-order .cms-fl-btn { width: 2.1rem; flex: none; }
#field-order li.is-unlisted .cms-fl-title { visibility: hidden; }
#field-order .cms-fl-spacer { width: calc(2 * 2.1rem + .5rem); flex: none; }

/* Oppetid på Drift (admin/monitor/_uptime): tidslinje per enhet, grønne felt når den var på, strek for nå. */
.input-group > .uptime-date { width: 7.25rem; flex: none; padding-inline: .4rem; text-align: center; border-color: var(--bs-secondary); cursor: pointer; }
/* Datofeltet mellom pilene (Bootstrap gir 1 % i en input-gruppe): så bredt som datoen, og rammen som knappene ved siden av.
   Nettleserens eget ikon er skjult (Safari har ingen); klikk i feltet åpner velgeren. */
.uptime-date::-webkit-calendar-picker-indicator { display: none; }
.uptime-table .uptime-axis-cell { width: 100%; min-width: 18rem; }
.uptime-axis { position: relative; height: 1rem; font-size: .7rem; font-weight: 400; color: var(--bs-secondary-color); }
.uptime-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.uptime-axis span:first-child { transform: none; }
.uptime-axis span:last-child { transform: translateX(-100%); }
.uptime-axis [hidden], .uptime-grid[hidden] { display: none; }
.uptime-track { position: relative; height: 1.1rem; border-radius: .3rem; background: var(--bs-tertiary-bg); overflow: hidden; }
.uptime-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bs-border-color-translucent); }
.uptime-seg { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; background: var(--bs-success); opacity: .85; }
.uptime-now { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--bs-primary); }
.uptime-card { position: relative; }
/* Streken ved musa gjennom hele tabellen (fra like under klokkeslettene på aksen og ned), med klokkeslettet i en pille rett over musa. */
.uptime-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--bs-body-color) 55%, transparent); pointer-events: none; z-index: 2; }
.uptime-cursor span { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0 .35rem; font-size: .72rem; line-height: 1.35; font-weight: 600; white-space: nowrap;
    color: var(--bs-body-bg); background: var(--bs-body-color); border-radius: 999px; }
/* Kommandoene på tidslinjen (device_commands): små markører over linjen; farge etter hvordan det gikk. */
.uptime-ev { position: absolute; top: -1px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--bs-warning); box-shadow: 0 0 0 2px var(--bs-body-bg); z-index: 1; }
.uptime-ev.is-ok { background: var(--bs-info); }
.uptime-ev.is-failed, .uptime-ev.is-expired { background: var(--bs-danger); }
.uptime-cursor span.is-event { background: var(--bs-warning); color: #000; }

/* En tabell rett i et kort (uten card-body): innrykk i første og siste kolonne som kortets innhold. */
.table-card-edge > :not(caption) > * > :first-child { padding-left: var(--bs-card-spacer-x, 1rem); }
.table-card-edge > :not(caption) > * > :last-child { padding-right: var(--bs-card-spacer-x, 1rem); }

/* Rolig knapp i verktøylinjer (btn-tool): samme ramme og bakgrunn som feltene ved siden av, dempet tekst. */
.btn-tool { --bs-btn-color: var(--bs-secondary-color); --bs-btn-bg: var(--bs-body-bg); --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--bs-tertiary-color); --bs-btn-disabled-bg: var(--bs-body-bg); --bs-btn-disabled-border-color: var(--bs-border-color); }

/* Innholdsmalene (admin/cms/index) som ett tre: rader med innrykk per nivå (--depth), grener som kan foldes sammen. */
.ct-tree { overflow: hidden; }
.ct-row { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .35rem 1rem .35rem calc(1rem + var(--depth, 0) * 1.5rem);
    border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); color: var(--bs-body-color); text-decoration: none; }
.ct-tree > :first-child > .ct-row:first-child, .ct-tree > .ct-row:first-child { border-top: 0; }
a.ct-row:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.ct-branch { font-weight: 600; }
/* Grenene er knapper som folder sammen og ut (ikke lenker); malene er lenker, med en pil til høyre og markert ved hover. */
button.ct-branch { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; text-align: left; font: inherit; font-weight: 600; cursor: pointer; }
button.ct-branch:hover .ct-chevron { color: var(--bs-body-color); }
.ct-go { flex: none; font-size: .75rem; color: var(--bs-tertiary-color); }
a.ct-row:hover .ct-go { color: var(--bs-primary); }
a.ct-row:hover .ct-name { color: var(--bs-primary); }
.ct-branch[style*="--depth: 0"] { background: var(--bs-tertiary-bg); }
button.ct-branch[style*="--depth: 0"]:hover { background: var(--bs-secondary-bg); }
button.ct-branch:not([style*="--depth: 0"]):hover { background: var(--bs-tertiary-bg); }
.ct-toggle { flex: none; width: 1.25rem; padding: 0; border: 0; background: none; color: var(--bs-secondary-color); line-height: 1; }
.ct-chevron { display: inline-block; transition: transform .15s; font-size: .8rem; }
.ct-node.is-folded > .ct-row .ct-chevron { transform: rotate(-90deg); }
.ct-node.is-folded > .ct-children { display: none; }
.ct-icon { flex: none; width: 1.1rem; text-align: center; color: var(--bs-secondary-color); }
.ct-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-sub { margin-left: .35rem; font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); }
.ct-meta { margin-left: auto; font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); white-space: nowrap; }
.ct-chip { flex: none; font-size: .75rem; padding: .05rem .5rem; border-radius: 1rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); white-space: nowrap; }
.ct-count { flex: none; width: 7rem; text-align: end; font-size: .875rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.ct-when { flex: none; width: 6.5rem; text-align: end; font-size: .8rem; color: var(--bs-tertiary-color); white-space: nowrap; }
.ct-tpl .ct-icon + .ct-name { font-weight: 400; }
/* Under en installasjon: malene får ekstra innrykk og en loddrett linje fra installasjonens ikon (trestrukturen). */
/* Som feltene i en gruppe (.field-tree): loddrett strek gjennom radene (til midten av den siste) og en kort vannrett
   strek inn mot hver mal. */
.ct-guide > .ct-children > .ct-tpl { position: relative; padding-left: calc(1rem + var(--depth) * 1.5rem + 1.5rem);
    --guide: calc(1rem + var(--pdepth) * 1.5rem + 1.25rem + .5rem + .55rem); }
.ct-guide > .ct-children > .ct-tpl::before { content: ""; position: absolute; left: var(--guide); top: -1px; bottom: -1px; border-left: 1px solid var(--bs-secondary-color); opacity: .45; }
.ct-guide > .ct-children > .ct-tpl:last-child::before { bottom: 50%; }
.ct-guide > .ct-children > .ct-tpl::after { content: ""; position: absolute; left: var(--guide); top: 50%; width: .65rem; border-top: 1px solid var(--bs-secondary-color); opacity: .45; }
@media (max-width: 575.98px) { .ct-when { display: none; } .ct-count { width: auto; } }

/* Et felt åpnet i oppsettet av malen (admin/cms/edit): skjemaet fyller popupen under fanene, med sin kropp og sine knapper. */
.setup-field { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.setup-field > .modal-body { overflow-y: auto; }
.btn-close-sm { width: .55rem; height: .55rem; padding: .2rem; background-size: .55rem; }
.nav-tabs.has-field .nav-link.active:not(.field-tab) { color: var(--bs-nav-link-color); background: transparent; border-color: transparent; }
.setup-field-type { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; padding-bottom: .75rem; font-size: .875rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color-translucent); }
.setup-field-type .badge { font-size: .875rem; }
/* Ulagrede endringer i oppsettet: prikk på fanen og i bunnlinjen. */
.nav-link.is-dirty::after, .setup-dot { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .35rem; border-radius: 50%; background: var(--bs-warning); vertical-align: middle; }
.setup-dot { margin-left: 0; }
/* Spørsmålet i oppsettet (ulagrede endringer): popupen dempes, og kortet står rett under fanene. */
.setup-leave { position: absolute; inset: 0; z-index: 5; background: rgba(var(--bs-body-bg-rgb), .65); border-radius: inherit; }
.setup-leave[hidden] { display: none; }
.setup-leave-card { position: absolute; left: 1rem; right: 1rem; animation: setup-leave-in .15s ease-out; }
@keyframes setup-leave-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
/* Nytt felt i oppsettet: steg 1 (type og navn) skjuler resten; steg 2 skjuler typevelgeren (typen står i fanen). */
.setup-field[data-step="1"] .wizard-later, .setup-field[data-step="2"] .wizard-first { display: none !important; }

/* Toppen av en side (admin/partials/page_header, som innholdsmalene): pila tilbake til listen foran navnet (dempet,
   som en knapp ved hover), den dempede linjen under navnet (rett under navnet når pila står foran). */
.page-back { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--bs-border-radius); color: var(--bs-secondary-color); text-decoration: none; font-size: 1.1rem; flex: none; }
.page-back:hover, .page-back:focus-visible { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
/* Toppen av en side (admin/partials/page_header): fast høyde på tittelraden (en vanlig knapp, 38 px), og knappene til
   høyre på linje med den (ikke midt på når det er en linje under), så tittelen står på samme sted med og uten knapper. */
.page-header > div:first-child > h1,
.page-header-actions { min-height: calc(1.5rem + .75rem + 2px); } /* små knapper (btn-sm) sentreres i samme høyde */
.page-header-meta { margin-left: 2.5rem; }
.page-header-meta:has(> [hidden]:only-child) { display: none; } /* tom (f.eks. stedet på en installasjon): ingen plass */
/* Verktøylinjen over en liste: søkefeltet er kort (det søkes sjelden på lange ord). */
.search-sm { max-width: 14rem; }
/* Tittelraden over en liste (list-group) og tabellene: som øverste nivå på oversikten over innholdsmalene. */
.list-head { min-height: 2.5rem; padding-top: .35rem; padding-bottom: .35rem; background: var(--bs-tertiary-bg); font-weight: 600; color: var(--bs-body-color); }
/* Rader som åpnes med et klikk (list-group): markeres når musen er over dem. */
.list-hover > .list-group-item:hover { background: var(--bs-tertiary-bg); cursor: pointer; }

/* Elementet i popupen: tidligere versjoner i en nedtrekksliste under tittelen. */
.cms-revisions { width: min(34rem, calc(100vw - 2rem)); max-height: 60vh; overflow-y: auto; }
.cms-item-meta .btn-link:hover { color: var(--bs-body-color) !important; }
/* Filnavnene i listen over elementer: åpner filen i en ny fane. */
.cms-file-link { color: var(--bs-link-color); cursor: pointer; }
.cms-file-link:hover, .cms-file-link:focus-visible { text-decoration: underline; }

/* Bla mellom elementene i popupen (‹ 3 av 29 ›): runde knapper til venstre for krysset, med en strek imellom. */
.cms-item-nav { margin-right: 1rem; padding-right: 1rem; border-right: 1px solid var(--bs-border-color); }
.cms-nav-btn { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* Taggene: klikk på raden gir nytt navn. */
tr[data-tag-row] { cursor: pointer; }

/* Spørsmål i et <dialog> (over alt, også popupene; f.eks. store bilder ved opplasting): ser ut som en Bootstrap-popup. */
.k2-dialog { padding: 0; border: 0; border-radius: var(--bs-border-radius-lg); width: min(32rem, calc(100vw - 2rem)); background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
.k2-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.k2-dialog .modal-content { border: 0; }
.k2-dialog { --bs-modal-padding: 1rem; --bs-modal-header-padding: 1rem 1rem; --bs-modal-header-border-width: 1px; --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-footer-gap: .5rem; --bs-modal-footer-border-width: 1px; --bs-modal-footer-border-color: var(--bs-border-color); --bs-modal-inner-border-radius: var(--bs-border-radius-lg); }

/* Toastene (adminToast, også meldingene etter en handling): over lagrelinja når siden har en. */
body:has(.save-bar) #admin-toasts { bottom: 4rem !important; }

/* «Velg filer» i mediebiblioteket: «Ferdig» er et kryss i hjørnet av linja (som i popupene, litt mindre). */
.media-bulk { position: relative; padding-right: 2.5rem; }
.media-bulk-close { position: absolute; top: .65rem; right: .75rem; width: .7rem; height: .7rem; padding: .25rem; background-size: .7rem; }

/* Utstyret på installasjonen: delene som er koblet til en klient, står under den med trestreker (som innholdsmalene). */
.rich-list tr.hw-child > td:first-child { position: relative; padding-left: 2.6rem; }
.rich-list tr.hw-child > td:first-child::before { content: ""; position: absolute; left: 1.35rem; top: 0; bottom: 0; border-left: 1px solid var(--bs-secondary-color); opacity: .45; }
.rich-list tr.hw-child.is-last > td:first-child::before { bottom: 50%; }
.rich-list tr.hw-child > td:first-child::after { content: ""; position: absolute; left: 1.35rem; top: 50%; width: .8rem; border-top: 1px solid var(--bs-secondary-color); opacity: .45; }

/* Etiketten over grafene (admin.js, [data-tip]): hva man peker på, og verdien under; den valgte søylen/ruten/raden uthevet. */
.stats-tip { position: fixed; top: 0; left: 0; z-index: 1090; pointer-events: none; max-width: 20rem; padding: .3rem .55rem; border-radius: .375rem;
    font-size: .75rem; line-height: 1.3; color: var(--bs-body-bg); background: var(--bs-body-color); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); }
.stats-tip span { display: block; opacity: .75; }
.stats-tip strong { display: block; font-size: .85rem; }
.stats-bars { cursor: crosshair; }
.stats-bar.is-tip { opacity: 1; filter: brightness(1.3); }
.stats-heat td.is-tip { outline: 2px solid var(--bs-body-color); outline-offset: -1px; }
.stats-row { border-radius: .25rem; }
.stats-row.is-tip { background: var(--bs-tertiary-bg); }

/* Skillet mellom to ledd i en sidetittel (page_header, titleHtml), f.eks. installasjon › liste: mindre og dempet. */
.page-title-sep { font-size: .6em; vertical-align: .2em; color: var(--bs-secondary-color); margin: 0 .15em; }

/* Malene til en forfatter (Brukere, admin/users): installasjonene som sammenfoldbare grupper med «2 av 5» og Alle/Ingen. */
.tpl-tree-account { padding: .35rem .75rem; font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.tpl-tree-module { border-bottom: 1px solid var(--bs-border-color); }
.tpl-tree-module:last-child { border-bottom: 0; }
.tpl-tree-module > summary { display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem; cursor: pointer; list-style: none; user-select: none; }
.tpl-tree-module > summary::-webkit-details-marker { display: none; }
.tpl-tree-module > summary:hover { background: var(--bs-tertiary-bg); }
.tpl-tree-caret { font-size: .75rem; color: var(--bs-secondary-color); transition: transform .15s; }
.tpl-tree-module[open] .tpl-tree-caret { transform: rotate(90deg); }
.tpl-tree-count { flex: none; font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.tpl-tree-count[data-state="some"] { color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); }
.tpl-tree-count[data-state="all"] { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); }
.tpl-tree-items { padding: .1rem .75rem .5rem 2.4rem; }
/* Felles mal (på flere installasjoner): valget gjelder alle stedene den står. */
.tpl-shared { margin-left: .35rem; font-size: .7rem; padding: .05rem .4rem; border-radius: 999px; color: var(--bs-info-text-emphasis); background: var(--bs-info-bg-subtle); white-space: nowrap; }