/*
 * Hoved-CSS for Undervisningsplan (flyttet fra inline <style> i templates/base.html).
 * Cachebar på tvers av sidelastinger (asset_version + WhiteNoise Cache-Control).
 * Tenant-avhengige farger (--tenant-topbar-*) og navbar-toggler-icon (SVG-stroke)
 * renderes fortsatt inline i base.html fordi de er dynamiske per institusjon.
 */

/* Touch-respons: umiddelbar visuell feedback på mobil */
.btn, .nav-link, .list-group-item, .dropdown-item {
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.1s ease;
}
.btn:active, .nav-link:active, .list-group-item:active, .dropdown-item:active {
    opacity: 0.85;
}
.btn:active {
    transform: scale(0.98);
}

:focus-visible {
    outline: 2px solid #3d5a80;
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
/* Tastaturfokus på klikkbare rader/kort (role=link) */
[role="link"][tabindex="0"]:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}
.gruppe-list-row:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
}

:root {
    --topbar-height: 56px;
    /* Fallback før JS måler nav. Må være tilstrekkelig presis til at JS-målt
       verdi er ~identisk (ellers hopper sidemeny/content ved sidebytter).
       Matcher faktisk Bootstrap-navbar: --topbar-height + navbar padding
       (0.5rem) + safe-area-inset-top (0 på desktop). Samme formel som Praksisplan. */
    --topbar-offset-fallback: calc(var(--topbar-height) + max(0.5rem, env(safe-area-inset-top, 0px)) + 0.5rem);
    --cream: #faf9f6;
    --cream-warm: #f8f6f2;
    --sand: #ebe7e0;
    --border-visible: #a8a59c;
    --coral: #b85a4a;
    --role-faglaerer: #5f4f6e;
    --role-student: #4a7fa8;
    --role-praksislaerer: #f3e8a8;
    --teal: #3d5a80;
    --teal-light: #98c1d9;
    --slate: #293241;
    --slate-muted: #5c6b7a;
    --card-radius: 16px;
    --card-shadow: 0 2px 8px rgba(45, 55, 72, 0.06);
    --card-shadow-hover: 0 8px 30px rgba(45, 55, 72, 0.08);
    /* Mobil: minimal luft mot kant — brukes symmetrisk i topbar, tilbake-linje og innhold */
    --up-mobile-pad-x: 0.625rem;
    --up-mobile-gutter-x: 1.25rem; /* = 2 × --up-mobile-pad-x, matcher Bootstrap row-gutter */
    --up-mobile-back-pad-y: 0.375rem;
}

/*
 * Når mobil-chat setter overflow:hidden på body forsvinner ofte scrollbaren → viewport blir smalere/bredere
 * mellom sider, og fixed topbar (flex med logo + ikoner) ser ut til å «hoppe». Stable gutter holder bredden konstant.
 */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--cream);
    color: var(--slate);
}

/* Moderne kort-styling (universell utforming og ytelse: skygger/radius, ingen backdrop-filter) */
.card {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden; /* Klipp header/footer til avrundede hjørner */
}
.card > .card-header:first-child {
    border-top-left-radius: calc(var(--card-radius) - 1px);
    border-top-right-radius: calc(var(--card-radius) - 1px);
}
.card > .card-footer:last-child {
    border-bottom-left-radius: calc(var(--card-radius) - 1px);
    border-bottom-right-radius: calc(var(--card-radius) - 1px);
}
.card:hover {
    box-shadow: var(--card-shadow-hover);
}

.layout-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
.sidebar {
    position: sticky;
    top: var(--up-topbar-offset, var(--topbar-offset-fallback));
    height: auto;
    max-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)));
    overflow-y: auto;
    align-self: flex-start;
    background: var(--cream-warm);
    padding-top: 1rem;
    z-index: 100;
    flex: 0 0 auto;
    width: max-content;
    min-width: 240px;
    border-right: 1px solid var(--sand);
    border-radius: 0 8px 8px 0;
}
/* Prevent sidebar menu items from wrapping on narrow but non-mobile widths */
.sidebar .list-group-flush {
    border-radius: 0;
    padding-bottom: 0.75rem;
}
.sidebar .list-group-flush > .list-group-item,
.sidebar .list-group-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 12px;
    margin: 0 0.5rem 0.35rem 0.5rem;
    border: none;
    border-width: 0;
}
.sidebar .list-group-item:hover,
.sidebar .list-group-item-action:focus {
    background-color: rgba(61, 90, 128, 0.05);
}
.sidebar .list-group-item i,
.offcanvas .list-group-item i {
    color: var(--slate-muted);
}
.sidebar .list-group-item-action:focus-visible,
.offcanvas .list-group-item-action:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
}
.topbar-custom .navbar-brand:focus-visible,
.topbar-custom .navbar-toggler:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}
.sidebar .list-group-item.active,
.offcanvas .list-group-item.active {
    background-color: rgba(61, 90, 128, 0.08);
    color: var(--slate);
    font-weight: 500;
    border-color: transparent;
    border-left: 3px solid var(--coral);
}
.sidebar .list-group-item.active i,
.offcanvas .list-group-item.active i {
    color: var(--teal);
}
/* Bedre kontrast ved hover på list-group (f.eks. Nylige planer) */
.card .list-group-item-action:hover h6,
.card .list-group-item-action:focus h6 {
    color: var(--slate) !important;
}
.card .list-group-item-action:hover .text-muted,
.card .list-group-item-action:focus .text-muted,
.card .list-group-item-action:hover small,
.card .list-group-item-action:focus small {
    color: var(--teal) !important;
}
.dashboard-groups-list .list-group-item-action h6,
.dashboard-recent-plans-list .list-group-item-action h6 {
    color: var(--slate) !important;
}
.dashboard-recent-plans-list .plan-card-badges {
    margin-bottom: 0.25rem;
}

/* Faner i hovedinnhold: slate/teal-palett (ikke Bootstrap standard blå lenke) */
.content-pane .nav-tabs {
    border-bottom-color: var(--sand);
    flex-wrap: wrap;
    row-gap: 0.25rem;
}
.content-pane .nav-tabs .nav-link {
    color: var(--slate-muted);
    border-color: transparent transparent var(--sand);
    text-decoration: none;
}
.content-pane .nav-tabs .nav-link:hover,
.content-pane .nav-tabs .nav-link:focus-visible {
    color: var(--teal) !important;
    background-color: rgba(61, 90, 128, 0.06);
    border-color: var(--sand) var(--sand) var(--sand);
    isolation: isolate;
}
.content-pane .nav-tabs .nav-link.active,
.content-pane .nav-tabs .nav-link.active:hover,
.content-pane .nav-tabs .nav-link.active:focus-visible {
    color: var(--teal) !important;
    font-weight: 600;
    background-color: var(--cream, #faf9f6);
    border-color: var(--sand) var(--sand) var(--cream, #faf9f6);
}

/* Hjem: «Mine grupper» — begrens høyde og scroll slik at lang liste ikke ser «avrundet av» uten hint */
.dashboard-groups-scroll {
    max-height: min(70vh, 26rem);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(61, 90, 128, 0.45) transparent;
    margin-right: -0.125rem;
    padding-right: 0.125rem;
}
.dashboard-groups-scroll::-webkit-scrollbar {
    width: 8px;
}
.dashboard-groups-scroll::-webkit-scrollbar-thumb {
    background: rgba(61, 90, 128, 0.35);
    border-radius: 4px;
}
.dashboard-groups-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(61, 90, 128, 0.5);
}
/* Språk: ikon til venstre for «Språk» — kompakt */
.locale-switcher-toggle {
    text-decoration: none !important;
}
.locale-switcher-trigger-inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1.2;
}
.locale-switcher-label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/* Språkikon øverst til høyre på dashbord (utenfor topbar) */
.dashboard-home-locale .locale-switcher-toggle {
    color: var(--bs-secondary-color);
    min-width: auto;
    min-height: 44px;
    padding: 0.35rem 0.45rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.dashboard-home-locale .locale-switcher-toggle:hover,
.dashboard-home-locale .locale-switcher-toggle:focus {
    color: var(--bs-body-color);
}
.dashboard-home-locale .locale-switcher-toggle.show {
    color: var(--bs-primary);
}
.locale-switcher-icon {
    display: block;
    flex-shrink: 0;
    width: 1.5625rem;
    height: 1.5625rem;
    object-fit: contain;
}
/* Lys PNG på transparent → svart glyf med god kontrast (uu). */
.locale-switcher-icon--png {
    filter: brightness(0);
    opacity: 1;
    transition: transform 0.15s ease;
}
.dashboard-home-locale .locale-switcher-toggle:hover .locale-switcher-icon--png,
.dashboard-home-locale .locale-switcher-toggle:focus-visible .locale-switcher-icon--png {
    transform: scale(1.06);
}
/* Valgt språk i språk-dropdown: teal (same som --teal i temaet) */
.dropdown-menu.locale-switcher-menu .dropdown-item.active,
.dropdown-menu.locale-switcher-menu .dropdown-item.active:focus {
    background-color: rgba(61, 90, 128, 0.14);
    color: var(--teal);
    font-weight: 600;
}
.dropdown-menu.locale-switcher-menu .dropdown-item.active:hover {
    background-color: rgba(61, 90, 128, 0.2);
    color: var(--teal);
}
.dropdown-menu.locale-switcher-menu .locale-switcher-check {
    color: var(--teal);
}
.content-pane {
    flex: 1 1 auto;
    min-width: 0;
}
.workspace-post {
    border: 1px solid var(--sand);
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.plan-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan-card-link {
    cursor: pointer;
}
.plan-card:hover {
    transform: translateY(-2px);
}
/* Planer: kolonneantall etter faktisk innholdsbredde (med sidebar), ikke viewport */
.planer-page {
    container-type: inline-size;
    container-name: planer-page;
}
.planer-page .planer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.planer-page .plan-card-col {
    min-width: 0;
}
.plan-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.plan-card-head .card-title {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.plan-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.plan-card-badges .badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}
.plan-card-footer {
    margin-top: 0.25rem;
}
.plan-card-footer .btn-sm {
    flex-shrink: 0;
}
@container planer-page (min-width: 520px) {
    .planer-page .planer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@container planer-page (min-width: 960px) {
    .planer-page .planer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Responsive lister: tabell → kort før horisontal scroll (container = faktisk innholdsbredde) */
.responsive-list-root {
    container-type: inline-size;
    container-name: responsive-list;
}
.responsive-list-table-wrap { display: block; }
.responsive-list-cards-wrap { display: none; }
.responsive-card-list-page .planer-grid .plan-card .card-body {
    padding: 0.65rem 0.75rem;
}
.responsive-card-list-page .planer-grid .plan-card .card-title {
    font-size: 0.875rem;
    line-height: 1.25;
}
.responsive-card-list-page .planer-grid .doc-card-status .badge,
.responsive-card-list-page .planer-grid .eval-card-status .badge {
    font-size: 0.7rem;
    white-space: normal;
    text-align: left;
}
.responsive-card-list-page .planer-grid .eval-card-person {
    font-size: 0.8rem;
    line-height: 1.3;
}
.responsive-card-list-page .planer-grid .doc-actions {
    flex-direction: column;
    align-items: stretch;
}
.responsive-card-list-page .planer-grid .doc-actions .btn,
.responsive-card-list-page .planer-grid .doc-actions form {
    width: 100%;
}
.responsive-card-list-page .planer-grid .doc-actions form .btn {
    width: 100%;
}
.fravar-card-note {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.fravaer-list-table td.fravaer-note-cell {
    max-width: 18rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
@container responsive-list (max-width: 1099px) {
    .responsive-list-root .responsive-list-table-wrap { display: none !important; }
    .responsive-list-root .responsive-list-cards-wrap { display: block !important; }
}
/* Studenter: tabell/liste fra tablet og opp; kort kun på mobil */
@container responsive-list (min-width: 768px) {
    .studenter-page.responsive-list-root .responsive-list-table-wrap { display: block !important; }
    .studenter-page.responsive-list-root .responsive-list-cards-wrap { display: none !important; }
}
/* Studenter tabell: knapperad under navn når kolonnen fortsatt er for smal (container-bredde, ikke skjermstørrelse) */
@container responsive-list (min-width: 768px) {
    .studenter-page .responsive-list-table-wrap thead { display: none; }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td {
        display: block;
        border: 0;
        width: auto;
    }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td:first-child {
        flex: 1 1 auto;
        order: 1;
        min-width: 0;
    }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td:nth-child(2) {
        flex: 0 0 auto;
        order: 2;
    }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td:nth-child(3) {
        flex: 0 0 100%;
        order: 3;
        width: 100%;
        padding-top: 0.35rem;
        padding-bottom: 0.65rem;
    }
    .studenter-page .responsive-list-table-wrap .student-actions-btn-group {
        width: 100%;
        max-width: 100%;
    }
    .studenter-page .responsive-list-table-wrap .student-actions-btn-group > .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}
@media (max-width: 1099.98px) {
    .responsive-list-table-wrap { display: none !important; }
    .responsive-list-cards-wrap { display: block !important; }
}
@media (min-width: 768px) {
    .studenter-page.responsive-list-root .responsive-list-table-wrap { display: block !important; }
    .studenter-page.responsive-list-root .responsive-list-cards-wrap { display: none !important; }
    .studenter-page .responsive-list-table-wrap thead { display: none; }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td {
        display: block;
        border: 0;
        width: auto;
    }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td:first-child {
        flex: 1 1 auto;
        order: 1;
        min-width: 0;
    }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td:nth-child(2) {
        flex: 0 0 auto;
        order: 2;
    }
    .studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td:nth-child(3) {
        flex: 0 0 100%;
        order: 3;
        width: 100%;
        padding-top: 0.35rem;
        padding-bottom: 0.65rem;
    }
    .studenter-page .responsive-list-table-wrap .student-actions-btn-group {
        width: 100%;
        max-width: 100%;
    }
    .studenter-page .responsive-list-table-wrap .student-actions-btn-group > .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* Vurderingsskjema: sticky handlingsrad på smal skjerm (ikke fixed — iOS/WebApp
   plasserer fixed bottom:0 over tastatur og dekker felt lenger oppe i skjemaet). */
@media (max-width: 767.98px) {
    .evaluation-form-page {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
    .evaluation-form-page .eval-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 1020;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1.5rem;
        padding: 0.65rem 0.75rem;
        padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
        background: rgba(250, 249, 246, 0.96);
        border-top: 1px solid var(--sand, #e8e4df);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -4px 16px rgba(45, 55, 72, 0.08);
    }
    /* Skjul handlingsrad mens bruker skriver — unngår at knapper dekker skjema over tastatur */
    body.eval-form-input-focused .evaluation-form-page .eval-form-actions {
        visibility: hidden;
        pointer-events: none;
    }
    .evaluation-form-page .eval-form-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }
    .evaluation-view-page .eval-view-actions .btn {
        width: 100%;
        min-height: 44px;
    }
    .evaluation-view-page form .btn-primary,
    .evaluation-view-page form .btn-success {
        width: 100%;
        min-height: 44px;
    }
    .vis-plan-page #plan-side-comments {
        margin-top: 0.5rem;
    }
    .vis-plan-page .comments-list-scope {
        max-height: min(50vh, 320px) !important;
    }
    .vis-plan-page .section-comments .comments-list-scope {
        max-height: min(40vh, 240px) !important;
    }
}
/* Kvadratisk skjerm (1:1): Planer-siden – kompakt layout */
@media (min-aspect-ratio: 0.85) and (max-aspect-ratio: 1.15) and (min-width: 600px) {
    .planer-page .planer-grid .plan-card .card-body {
        padding: 0.75rem 1rem;
    }
    .planer-page .planer-grid .plan-card .card-text {
        font-size: 0.875rem;
    }
}
/* Kvadratisk skjerm: smal sidebar for mer plass til innhold */
@media (min-aspect-ratio: 0.85) and (max-aspect-ratio: 1.15) and (min-width: 600px) and (max-width: 992px) {
    .layout-row .sidebar {
        min-width: 200px;
    }
}
.topbar-custom {
    background-color: var(--tenant-topbar-color);
    color: var(--tenant-topbar-text-color);
    border-bottom: var(--tenant-topbar-border-width, 0) solid var(--tenant-topbar-border-color, transparent);
    /* Respekter iOS safe area slik at knapper ikke overlapper statusbar i webapp-modus */
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: 0.5rem;
    /* Samme høyde på desktop og mobil – konsistent med Praksisplan */
    min-height: var(--topbar-height);
}
.topbar-custom .container-fluid {
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
}
.topbar-custom .navbar-brand,
.topbar-custom .navbar-brand:hover,
.topbar-custom .navbar-brand:focus,
.topbar-custom .navbar-text,
.topbar-custom .nav-link,
.topbar-custom .nav-link:hover,
.topbar-custom .nav-link:focus {
    color: var(--tenant-topbar-text-color) !important;
}
.topbar-custom .nav-link i,
.topbar-custom .navbar-brand i,
.topbar-custom .navbar-text i,
.topbar-custom .dropdown-toggle i,
.topbar-custom .nav-item i {
    color: var(--tenant-topbar-icon-color) !important;
}
.topbar-custom .navbar-toggler {
    border: none;
}
/* Reserver plass for ikon – reduserer synlig blink ved sidelast */
.topbar-custom .navbar-brand {
    min-width: 44px;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
}
.topbar-custom .navbar-brand > img.navbar-brand-logo {
    width: auto;
    height: 50px;
    max-height: 50px;
    max-width: 160px;
    margin-right: 8px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}
.topbar-custom .navbar-brand .navbar-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-right: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    flex-shrink: 0;
}
.topbar-custom .navbar-brand .navbar-brand-icon i {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--tenant-topbar-color) !important;
}
/* Hover på chat- og bjelleikon: kun ikonet får motsatt farge */
.topbar-custom #chatDropdown:hover i,
.topbar-custom #notificationDropdown:hover i,
.topbar-custom #chatIconMobile:hover i,
.topbar-custom #notificationIconMobile:hover i {
    filter: invert(1);
    transition: filter 0.2s ease;
}
/* Chat/bjelle i topbar: ingen Bootstrap-shadow/tap-ring; diskret fokusring kun ved tastatur */
nav.topbar-custom #chatDropdown:focus:not(:focus-visible),
nav.topbar-custom #notificationDropdown:focus:not(:focus-visible),
nav.topbar-custom #chatIconMobile:focus:not(:focus-visible),
nav.topbar-custom #notificationIconMobile:focus:not(:focus-visible),
nav.topbar-custom #chatDropdown.show,
nav.topbar-custom #notificationDropdown.show {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}
nav.topbar-custom #chatDropdown:focus-visible,
nav.topbar-custom #notificationDropdown:focus-visible,
nav.topbar-custom #chatIconMobile:focus-visible,
nav.topbar-custom #notificationIconMobile:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}
/* Hvit ramme rundt rød badge på chat/bjelle – skiller seg fra topbar (f.eks. UiB) */
.topbar-custom #chatDropdown .badge.bg-danger,
.topbar-custom #notificationDropdown .badge.bg-danger,
.topbar-custom #chatIconMobile .badge.bg-danger,
.topbar-custom #notificationIconMobile .badge.bg-danger {
    box-shadow: 0 0 0 2px white;
}
/* Ensure dropdown content uses original colors for contrast */
.topbar-custom .dropdown-menu {
    background-color: #fff;
    color: var(--slate);
}
.topbar-custom .dropdown-menu .dropdown-item {
    color: var(--slate);
}
.topbar-custom .dropdown-menu .dropdown-item:hover,
.topbar-custom .dropdown-menu .dropdown-item:focus,
.topbar-custom .dropdown-menu .dropdown-item.active {
    background-color: rgba(61, 90, 128, 0.06) !important;
    color: var(--teal) !important;
}
.topbar-custom .dropdown-menu .dropdown-header {
    color: var(--slate-muted);
}
.topbar-custom .dropdown-menu .dropdown-item i {
    color: var(--teal) !important;
}

/* Skip link - WCAG 2.4.1 Bypass Blocks. Skjult til fokus (viser seg når bruker tabber til den). */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 0.5rem 0.75rem;
    background: var(--teal);
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    font-size: 0.875rem;
    font-weight: 500;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}
.skip-link:focus {
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
    white-space: normal;
    color: #fff;
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Bootstrap-overstyringer: main buttons bruker temafarge (topbar), sekundære bruker teal */
.btn { border-radius: 9999px; }
/* Konsistent luft mellom ikon og tekst i knapper (globale mål – ikke flex/justify som påvirker alt) */
.btn i.fa,
.btn i.fas,
.btn i.far,
.btn i.fab,
.btn i.fa-solid,
.btn i.fa-regular,
.btn i.fa-brands {
    margin-right: 0.35rem;
}
/* Kun ikon i knapp: ingen høyremargin på ikon, midtstilt (brukes med klassen btn-icon-only på knappen).
   Fast kvadrat + border-radius 50 % — ellers blir globale .btn (9999px) til horisontale «egg» i flex-rader. */
.btn.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.125rem;
    height: 2.125rem;
    min-width: 2.125rem;
    padding: 0;
    border-radius: 50% !important;
    flex-shrink: 0;
}
.btn.btn-icon-only > i.fa,
.btn.btn-icon-only > i.fas,
.btn.btn-icon-only > i.far,
.btn.btn-icon-only > i.fab,
.btn.btn-icon-only > i.fa-solid,
.btn.btn-icon-only > i.fa-regular,
.btn.btn-icon-only > i.fa-brands {
    margin-right: 0;
}
/* Rekkefølge-knapper (pil opp/ned) i btn-group-sm: sentrer ikoner — opphev globale `.btn > i`-marg og line-height */
.btn-group > .btn.fu-move-field-up,
.btn-group > .btn.fu-move-field-down,
.btn-group > .btn.plan-section-move-up,
.btn-group > .btn.plan-section-move-down,
.btn-group > .btn.ev-move-field-up,
.btn-group > .btn.ev-move-field-down {
    /* Én synlig barn-node (ikon); grid unngår subpixel-skew fra FA line-height vs flex */
    display: inline-grid;
    place-items: center;
    line-height: 0;
}
.btn-group > .btn.fu-move-field-up > i.fa,
.btn-group > .btn.fu-move-field-up > i.fas,
.btn-group > .btn.fu-move-field-down > i.fa,
.btn-group > .btn.fu-move-field-down > i.fas,
.btn-group > .btn.plan-section-move-up > i.fa,
.btn-group > .btn.plan-section-move-up > i.fas,
.btn-group > .btn.plan-section-move-down > i.fa,
.btn-group > .btn.plan-section-move-down > i.fas,
.btn-group > .btn.ev-move-field-up > i.fa,
.btn-group > .btn.ev-move-field-up > i.fas,
.btn-group > .btn.ev-move-field-down > i.fa,
.btn-group > .btn.ev-move-field-down > i.fas,
.btn-group > .btn.fu-move-field-up > i.fa-solid,
.btn-group > .btn.fu-move-field-down > i.fa-solid,
.btn-group > .btn.plan-section-move-up > i.fa-solid,
.btn-group > .btn.plan-section-move-down > i.fa-solid,
.btn-group > .btn.ev-move-field-up > i.fa-solid,
.btn-group > .btn.ev-move-field-down > i.fa-solid {
    margin: 0 !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Plan: utvid/skjul bolker – sirkulær knapp (må komme etter .btn-icon-only i kaskaden) */
.btn.plan-section-toggle.btn-icon-only {
    width: 2.125rem;
    height: 2.125rem;
    min-width: 2.125rem;
    min-height: 2.125rem;
    padding: 0;
    border-radius: 50% !important;
    flex-shrink: 0;
}
@media (max-width: 767.98px) {
    /* 44px treffflate, ~34px synlig sirkel – margin kompenserer layout */
    .btn.btn-icon-only:not(.plan-section-toggle) {
        --icon-btn-visual: 2.125rem;
        --icon-btn-hit: 2.75rem;
        width: var(--icon-btn-hit);
        height: var(--icon-btn-hit);
        min-width: var(--icon-btn-hit);
        min-height: var(--icon-btn-hit);
        padding: calc((var(--icon-btn-hit) - var(--icon-btn-visual)) / 2);
        margin: calc((var(--icon-btn-visual) - var(--icon-btn-hit)) / 2);
    }
    .btn-group.student-actions-btn-group > .btn.btn-icon-only,
    .gruppe-snarvei-btn-group > .btn.btn-icon-only {
        width: auto;
        height: auto;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.25rem 0.65rem;
        margin: 0;
    }
    .gruppe-snarvei-btn-group > .btn.btn-icon-only {
        min-width: 2.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
.btn-primary {
    color: var(--tenant-topbar-text-color);
    background: var(--tenant-topbar-color);
    border: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--tenant-topbar-color) 35%, transparent);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--tenant-topbar-color) 85%, black);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--tenant-topbar-color) 40%, transparent);
    transform: translateY(-2px);
}
.btn-outline-primary {
    border-color: var(--border-visible);
    color: var(--teal);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn-outline-primary:hover {
    border-color: var(--teal-light);
    background: rgba(61, 90, 128, 0.04);
    color: var(--teal);
    transform: translateY(-1px);
}
.btn-outline-secondary {
    border-color: var(--border-visible);
    color: var(--slate-muted);
}
.btn-outline-secondary:hover {
    border-color: var(--teal-light);
    background: rgba(61, 90, 128, 0.04);
    color: var(--teal);
}
.btn-secondary {
    background: var(--cream-warm);
    border-color: var(--border-visible);
    color: var(--slate);
}
.btn-secondary:hover {
    background: var(--sand);
    border-color: var(--sand);
    color: var(--slate);
}
.btn-success { background: var(--teal); border: none; }
.btn-success:hover { background: #2d4562; }
.btn-outline-success { border-color: var(--teal); color: var(--teal); }
.btn-outline-success:hover { background: rgba(61, 90, 128, 0.08); border-color: var(--teal); color: var(--teal); }
.btn-danger { background: #dc3545; border-color: #dc3545; color: #fff; }
.btn-danger:hover { background: #bb2d3b; border-color: #b02a37; color: #fff; }
.btn-outline-danger { border-color: var(--border-visible); color: #dc3545; }
.btn-outline-danger:hover { border-color: #dc3545; background: rgba(220, 53, 69, 0.08); color: #bb2d3b; }
.btn-outline-warning { border-color: var(--border-visible); color: #b8860b; }
.btn-outline-warning:hover { border-color: #b8860b; background: rgba(184, 134, 11, 0.08); color: #9a7209; }
.btn-outline-info { border-color: var(--border-visible); color: var(--teal); }
.btn-outline-info:hover { border-color: var(--teal-light); background: rgba(61, 90, 128, 0.04); color: var(--teal); }
/* btn-check / studieår-radio valgt: teal i stedet for Bootstrap lyseblå */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-info,
.study-year-switcher-group input.study-year-radio:checked + .btn-outline-primary {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #fff !important;
}
/* Studieår-filter: synlig fokus på valgt år-knapp (visually-hidden radio, ikke btn-check) */
.study-year-switcher-group input.study-year-radio:focus-visible + label.btn {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(61, 90, 128, 0.22);
}
.study-year-historical-toggle:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}
/* badge/bg-primary og bg-info: teal i stedet for Bootstrap lyseblå */
.badge.bg-primary, .bg-primary { background-color: var(--teal) !important; }
.badge.bg-info, .bg-info { background-color: var(--teal) !important; }
/* Rolle-badges: faglærer = dempet plomme (tydelig, men ikke varselaktig som coral) */
.badge.bg-role-faglaerer, .bg-role-faglaerer {
    background-color: var(--role-faglaerer) !important;
    color: #fff !important;
}
.badge.bg-role-student, .bg-role-student {
    /* Blågrå elev-blå – grønn reserveres til status (bestått, signert osv.) */
    background-color: var(--role-student) !important;
    color: #fff !important;
}
.badge.bg-role-praksislaerer, .bg-role-praksislaerer {
    background-color: var(--role-praksislaerer) !important;
    color: var(--slate) !important;
    border: 1px solid rgba(41, 50, 65, 0.12);
}
.btn-light { background: var(--cream-warm); border-color: var(--border-visible); color: var(--slate); }
.btn-light:hover { background: var(--sand); border-color: var(--sand); color: var(--slate); }
/* btn-group: kun ytterste hjørner avrundet, slik at knappene går i ett */
.btn-group .btn { border-radius: 0; }
/* Studenter-/gruppe-rad: lik knappehøyde — Bruk stretch (Bootstrap-standard), ikke center */
.btn-group.student-actions-btn-group {
    align-items: stretch;
}
.student-actions-btn-group .btn {
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.student-actions-btn-group .btn span.d-md-inline,
.student-actions-btn-group .btn .eval-action-label-short,
.student-actions-btn-group .btn .eval-action-label-full {
  overflow: hidden;
  min-width: 0;
}
.student-actions-btn-group .btn .eval-action-label-short {
  font-size: 0.8125rem;
}
/* Studenter-tabell + gruppevisning: ikon/tekst med gap (unngår dobbel avstand); kun .btn-icon-only midtstiller ikon */
.student-actions-btn-group .btn,
.vis-gruppe-header-actions .btn,
.vis-gruppe-member-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.student-actions-btn-group .btn > i,
.vis-gruppe-header-actions .btn > i,
.vis-gruppe-member-actions .btn > i {
    margin-right: 0;
}
.vis-gruppe-action-btn {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0.5rem 0.85rem;
    gap: 0.1rem;
    line-height: 1.25;
}
.vis-gruppe-action-btn__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}
.vis-gruppe-action-btn__hint {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.88;
}
.btn-outline-primary.vis-gruppe-action-btn .vis-gruppe-action-btn__hint,
.btn-outline-secondary.vis-gruppe-action-btn .vis-gruppe-action-btn__hint {
    color: inherit;
    opacity: 0.72;
}
.vis-gruppe-action-btn--dropdown {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.vis-gruppe-action-btn--dropdown::after {
    margin-left: 0;
    flex-shrink: 0;
}
.vis-gruppe-action-btn__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.1rem;
    min-width: 0;
}
.vis-gruppe-chat-option {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}
.vis-gruppe-chat-option__icon {
    margin-top: 0.15rem;
    color: var(--slate-muted, #5c6b7a);
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
.vis-gruppe-chat-option__title {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}
.vis-gruppe-chat-option__hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--slate-muted, #5c6b7a);
    line-height: 1.3;
    margin-top: 0.1rem;
}
/* .btn-icon-only: justify-content sentrert globalt (se over) */
/* Student-rader: native lenke gir stabilt touch (iOS); unngår kun syntetisk klikk på <tr> */
.student-row-main-link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(61, 90, 128, 0.14);
}
.student-row-main-link:hover { color: inherit; }
.btn-group > .btn:first-of-type,
.btn-group > label.btn:first-of-type { border-radius: 9999px 0 0 9999px; }
/* Kun når siste barn er .btn (ikke form) */
.btn-group > .btn:last-of-type:last-child,
.btn-group > label.btn:last-of-type:last-child { border-radius: 0 9999px 9999px 0; }
/* Studenter-rad: blanding av <a> og <button> — nullstill først, ellers gir :first-of-type ekstra venstre-bue på første <button> */
.btn-group.student-actions-btn-group {
    flex-wrap: nowrap;
    max-width: min(100%, 72rem);
}
.btn-group.student-actions-btn-group > .btn {
    border-radius: 0;
    align-self: stretch;
    box-sizing: border-box;
    flex-shrink: 0;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .btn-group.student-actions-btn-group > .btn {
        flex: 1 1 0;
        min-width: 0;
    }
    .btn-group.student-actions-btn-group > .btn:not(.btn-icon-only) {
        overflow: visible;
    }
    .student-actions-btn-group .btn span.d-md-inline,
    .student-actions-btn-group .btn .eval-action-label-full {
        overflow: visible;
    }
}
@media (min-width: 768px) {
    .studenter-page .student-actions-btn-group {
        display: flex;
        flex-wrap: nowrap;
        max-width: 100%;
        width: 100%;
    }
    .studenter-page .student-actions-btn-group > .btn {
        flex: 1 1 0;
        min-width: 0;
        flex-shrink: 1;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
@media (min-width: 1400px) {
    .studenter-page .student-actions-btn-group > .btn {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        font-size: 0.875rem;
    }
}
.btn-group.student-actions-btn-group > .btn:first-child { border-radius: 9999px 0 0 9999px; }
.btn-group.student-actions-btn-group > .btn:last-child { border-radius: 0 9999px 9999px 0; }
.btn-group.student-actions-btn-group > .btn:first-child:last-child { border-radius: 9999px; }
/* Studenter-siden: chat i knapperad skal være ett segment med naboene, ikke sirkel (.btn-icon-only).
   Opphev fast høyde fra global .btn-icon-only slik at flex stretch gir samme radhøyde som btn-sm. */
.btn-group.student-actions-btn-group > .btn.btn-icon-only {
    width: auto;
    min-width: 0;
    height: auto !important;
    padding: 0.25rem 0.65rem;
    border-radius: 0 !important;
}
.btn-group.student-actions-btn-group > .btn.btn-icon-only:first-child {
    border-radius: 9999px 0 0 9999px !important;
}
.btn-group.student-actions-btn-group > .btn.btn-icon-only:last-child {
    border-radius: 0 9999px 9999px 0 !important;
}
.btn-group.student-actions-btn-group > .btn.btn-icon-only:first-child:last-child {
    border-radius: 9999px !important;
}
/* Studenter-kort (responsive-list): full bredde handlingsknapper — samme mønster som gruppesiden */
.studenter-page .studenter-card-actions {
    width: 100%;
    max-width: none;
    position: relative;
    z-index: 2;
}
.studenter-page .studenter-card-actions .student-actions-btn-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
}
.studenter-page .studenter-card-actions .student-actions-btn-group > .btn {
    flex: 1 1 0;
    min-width: 0;
    flex-shrink: 1;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
.studenter-page .studenter-card-actions .student-actions-btn-group > .btn.btn-icon-only {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}
/* Utkast-knapp på studentlisten og gruppesiden */
.eval-draft-btn {
    border-style: dashed !important;
}
.eval-draft-btn:hover,
.eval-draft-btn:focus-visible {
    border-style: dashed !important;
    background-color: rgba(var(--bs-warning-rgb), 0.12);
}
.eval-draft-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--bs-warning);
    border-radius: 50%;
    animation: eval-draft-pulse 2.5s ease-in-out infinite;
}
@keyframes eval-draft-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}
/* Ventende dokumenter på studentlisten — teller flyter på hjørnet, uten hvit ring */
.doc-pending-btn {
    overflow: visible !important;
    z-index: 1;
}
.student-actions-btn-group .doc-pending-btn,
.studenter-page .studenter-card-actions .student-actions-btn-group > .btn.doc-pending-btn {
    overflow: visible !important;
}
.doc-pending-btn .doc-pending-badge {
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
    padding: 0 0.25rem;
    top: 0;
    right: 0;
    transform: translate(0, -45%);
    box-shadow: none !important;
    border: 0;
    z-index: 2;
    pointer-events: none;
}
.doc-pending-btn:hover,
.doc-pending-btn:focus-visible {
    z-index: 2;
}
.studenter-page .responsive-list-table-wrap tbody tr.studenter-student-item > td:nth-child(3),
.studenter-page .studenter-card-actions {
    overflow: visible;
}
/* Signerings-/godkjenningsgjøremål på vurderingsknapper (!) */
.eval-action-btn {
    overflow: visible !important;
    z-index: 1;
}
.student-actions-btn-group .eval-action-btn,
.studenter-page .studenter-card-actions .student-actions-btn-group > .btn.eval-action-btn {
    overflow: visible !important;
}
.eval-action-btn .eval-action-badge {
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
    padding: 0;
    top: 0;
    right: 0;
    transform: translate(0, -45%);
    box-shadow: none !important;
    border: 0;
    z-index: 2;
    pointer-events: none;
}
.eval-action-btn:hover,
.eval-action-btn:focus-visible {
    z-index: 2;
}
/* Leverte vurderingsknapper (btn-primary) smelter sammen uten synlig skille — hvit linje */
.student-actions-btn-group > .btn.btn-primary + .btn.btn-primary {
    border-left: 1px solid rgba(255, 255, 255, 0.75) !important;
}
/* Når Slett-knapp er inne i form som siste barn */
.btn-group > form:last-child .btn { border-radius: 0 9999px 9999px 0; }
.btn-group .btn:only-of-type,
.btn-group label.btn:only-of-type { border-radius: 9999px; }
/* Studieår-filter: Historiske + år-knapper som én sammenhengende pill (som Praksisportal) */
.study-year-switcher-group > .btn-group:first-child > .btn.study-year-historical-toggle,
.study-year-btn-group > .btn-group:first-child > .btn.study-year-historical-toggle {
  border-radius: 9999px 0 0 9999px !important;
}
.study-year-switcher-group:has(> .btn-group:first-child) > label.btn,
.study-year-btn-group:has(> .btn-group:first-child) > label.btn {
  border-radius: 0 !important;
}
.study-year-switcher-group:has(> .btn-group:first-child) > label.btn:last-of-type,
.study-year-btn-group:has(> .btn-group:first-child) > label.btn:last-of-type {
  border-radius: 0 9999px 9999px 0 !important;
}
/* Legacy alias study-year-btn-group (beholdes for eldre markup) */
.study-year-btn-group-wrap { border-radius: 50rem; }
.study-year-btn-group > .btn-group:first-child .btn:not(.study-year-historical-toggle) { border-radius: 50rem 0 0 50rem; }
.study-year-btn-group > .btn-group:first-child ~ label.btn:not(:last-of-type) { border-radius: 0; }
.study-year-btn-group > label.btn:last-of-type { border-radius: 0 50rem 50rem 0; }
.study-year-btn-group > input.btn-check:first-of-type + label.btn { border-radius: 50rem 0 0 50rem; }
.study-year-btn-group > .btn-group:first-child ~ input.btn-check + label.btn:not(:last-of-type) { border-radius: 0; }
.study-year-btn-group > .btn-group:first-child ~ input.btn-check + label.btn:last-of-type { border-radius: 0 50rem 50rem 0; }

/* Historiske-dropdown: høyrekant = knapp, avrundet, visuelt koblet (samme som Praksisportal) */
.study-year-switcher-group > .btn-group:first-child,
.study-year-btn-group > .btn-group:first-child {
  position: relative;
}
.study-year-historical-menu.dropdown-menu {
  --bs-dropdown-min-width: 0;
  --bs-dropdown-border-radius: 0.5rem;
  --bs-dropdown-padding-x: 0.25rem;
  --bs-dropdown-padding-y: 0.25rem;
  min-width: 100%;
  width: max-content;
  max-width: min(100vw - 1.5rem, 16rem);
  margin-top: 0.125rem;
  border: 1px solid var(--border-visible);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.35rem 0.85rem rgba(61, 90, 128, 0.12);
}
@media (min-width: 992px) {
  .study-year-historical-menu.dropdown-menu[data-bs-popper] {
    inset: auto 0 auto auto !important;
    transform: none !important;
  }
  .study-year-switcher-group > .btn-group:first-child.show > .study-year-historical-toggle,
  .study-year-btn-group > .btn-group:first-child.show > .study-year-historical-toggle,
  .study-year-btn-group > .btn-group:first-child.show > .dropdown-toggle {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: transparent;
    position: relative;
    z-index: 1001;
  }
  .study-year-switcher-group > .btn-group:first-child.show > .study-year-historical-menu,
  .study-year-btn-group > .btn-group:first-child.show > .study-year-historical-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    box-shadow: 0 0.35rem 0.85rem rgba(61, 90, 128, 0.12);
  }
}
@media (max-width: 991.98px) {
  .study-year-switcher-card .study-year-historical-toggle {
    touch-action: manipulation !important;
  }
  .study-year-switcher-card.study-year-historical-open .study-year-btn-group-scroll {
    overflow: visible !important;
  }
  .study-year-historical-menu.dropdown-menu {
    z-index: 1050;
    width: max-content;
    min-width: 9rem;
    max-width: min(100vw - 1.5rem, 16rem);
  }
  .study-year-historical-menu .dropdown-item {
    white-space: nowrap;
  }
}
.study-year-historical-menu .dropdown-item {
  border-radius: 0.375rem;
}
.study-year-historical-menu .dropdown-item:hover,
.study-year-historical-menu .dropdown-item:focus {
  background-color: rgba(61, 90, 128, 0.08);
  color: var(--teal);
}
.study-year-historical-menu .dropdown-item.active,
.study-year-historical-menu .dropdown-item:active {
  background-color: var(--teal) !important;
  color: #fff !important;
}

/* Studieår-kort: .card har overflow:hidden — pill-knapper må ikke klippes */
.study-year-switcher-card {
  overflow: visible;
}
.study-year-switcher-card > .card-body {
  overflow: visible;
}

/* Mellomstor skjerm (lg): historikk-segment kun ikon — unngå bred «Historiske»-knapp */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .study-year-switcher-card.study-year-switcher-has-historical .study-year-switcher-group > .btn-group:first-child {
    flex: 0 0 auto !important;
  }
  .study-year-switcher-card.study-year-switcher-has-historical .study-year-switcher-group > .btn-group:first-child .study-year-historical-toggle {
    width: auto;
  }
  .study-year-switcher-card .btn-group > .btn-group .btn:not(.study-year-historical-selected) .hist-text {
    display: none;
  }
  .study-year-switcher-card .btn-group > .btn-group .btn:not(.study-year-historical-selected) .fa-history {
    margin-right: 0;
  }
  .study-year-switcher-card .btn-group > .btn-group .dropdown-toggle::after {
    margin-left: 0.15rem;
  }
}

@media (min-width: 992px) {
  /* Desktop: normal knappstørrelse (som PP), ikke kompakt mobilprofil */
  .study-year-switcher-card .study-year-label h6 {
    font-size: 1rem;
  }
  .study-year-switcher-card .study-year-label small {
    font-size: 0.875rem;
  }
  .study-year-switcher-card .study-year-switcher-group > label.btn,
  .study-year-switcher-card .study-year-switcher-group > .btn-group:first-child > .study-year-historical-toggle,
  .study-year-switcher-card .study-year-btns .btn-group > .btn-group .btn {
    font-size: 1rem;
    line-height: 1.5;
    min-height: auto;
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.375rem 0.75rem;
  }
  .study-year-switcher-card .study-year-switcher-group > label.btn:hover,
  .study-year-switcher-card .study-year-switcher-group > label.btn:active,
  .study-year-switcher-card .study-year-switcher-group > .btn-group:first-child > .study-year-historical-toggle:hover,
  .study-year-switcher-card .study-year-switcher-group > .btn-group:first-child > .study-year-historical-toggle:active,
  .study-year-switcher-card .study-year-btns .btn-group > .btn-group .btn:hover,
  .study-year-switcher-card .study-year-btns .btn-group > .btn-group .btn:active {
    transform: none;
  }
  .study-year-switcher-card .study-year-switcher-group input.study-year-radio:checked + label.btn:hover {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #fff !important;
  }
}

@media (max-width: 991.98px) {
  /*
   * Mobil: slank pill (~1.625rem) uten negativ margin.
   * Horisontal scroll på btn-group — ikke på ytre wrapper (overflow-x:auto klipper
   * vertikalt i Safari når kombinert med synlig pill/border).
   */
  .study-year-switcher-card .study-year-btns,
  .study-year-switcher-card .study-year-btns .study-year-btn-group-scroll {
    overflow: visible;
  }
  .study-year-switcher-card .study-year-btns .study-year-btn-group-scroll > .study-year-switcher-group {
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .study-year-switcher-card .study-year-btns .study-year-btn-group-scroll > .study-year-switcher-group::-webkit-scrollbar {
    display: none;
  }
  .study-year-switcher-card.study-year-switcher-has-historical .study-year-btns .study-year-btn-group-scroll > .study-year-switcher-group {
    overflow-x: visible;
  }
  .study-year-switcher-card > .card-body {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
  .study-year-switcher-card .study-year-switcher-group > label.btn,
  .study-year-switcher-card .study-year-switcher-group > .btn-group:first-child > .study-year-historical-toggle,
  .study-year-switcher-card .study-year-btns .btn-group > .btn-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 1.875rem;
    min-height: 1.875rem;
    max-height: 1.875rem;
    padding: 0 0.65rem;
    margin: 0;
    line-height: 1;
    font-size: 0.8125rem;
    flex-shrink: 0;
    align-self: center;
    position: relative;
    z-index: 0;
  }
  .study-year-switcher-card .study-year-switcher-group > label.btn:hover,
  .study-year-switcher-card .study-year-switcher-group > label.btn:active,
  .study-year-switcher-card .study-year-switcher-group > label.btn:focus,
  .study-year-switcher-card .study-year-switcher-group > .btn-group:first-child > .study-year-historical-toggle:hover,
  .study-year-switcher-card .study-year-switcher-group > .btn-group:first-child > .study-year-historical-toggle:active,
  .study-year-switcher-card .study-year-switcher-group > .btn-group:first-child > .study-year-historical-toggle:focus,
  .study-year-switcher-card .study-year-btns .btn-group > .btn-group .btn:hover,
  .study-year-switcher-card .study-year-btns .btn-group > .btn-group .btn:active,
  .study-year-switcher-card .study-year-btns .btn-group > .btn-group .btn:focus {
    transform: none;
    z-index: 1;
  }
  .study-year-switcher-card .study-year-switcher-group input.study-year-radio:checked + label.btn:hover,
  .study-year-switcher-card .study-year-switcher-group input.study-year-radio:checked + label.btn:focus {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #fff !important;
    transform: none;
  }
  .study-year-switcher-card .study-year-switcher-group.study-year-single > label.btn {
    border-radius: 9999px !important;
  }
}

/* Vurderingsskjema (fill + oppfølgingskjema): radioknapper «ett alternativ» — full bredde i innholdet før tekst brytes */
.eval-single-choice-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-left: -2px;
    margin-right: -2px;
    padding-left: 2px;
    padding-right: 2px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: eval-single-choice;
}
.eval-single-choice-group.btn-group {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    min-width: 0;
    box-sizing: border-box;
}
.eval-single-choice-group label.btn {
    white-space: nowrap;
    flex: 0 0 auto;
}
@media (max-width: 575.98px) {
    .eval-single-choice-wrap {
        overflow-x: visible;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .eval-single-choice-group.btn-group {
        display: flex;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .eval-single-choice-group label.btn {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        text-align: center;
        line-height: 1.28;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
        word-break: normal;
        padding: 0.5rem 0.35rem;
        /* Lett redusert fra standard knappetekst på mobil – fortsatt lesbar (ca. 14px) */
        font-size: 0.875rem;
    }
    /* Mange valg: ytterligare litt mindre skrift og tettare linjehøgd */
    .eval-single-choice-group:has(> label:nth-of-type(5)) label.btn {
        font-size: 0.8125rem;
        line-height: 1.22;
        padding: 0.42rem 0.26rem;
    }
}
@media (min-width: 576px) {
    .eval-single-choice-wrap {
        overflow-x: visible;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 6px;
    }
    .eval-single-choice-group.btn-group {
        display: flex;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        align-items: stretch;
        min-width: 0;
    }
    .eval-single-choice-group label.btn {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
        word-break: normal;
        padding: 0.65rem 1.15rem;
    }
}

/* Svært smalt innhold (smal skjerm / sidestripe): ekstra kompakt utan å gå under ~13px */
@container eval-single-choice (max-width: 340px) {
    .eval-single-choice-group label.btn {
        font-size: 0.8125rem;
        line-height: 1.22;
        padding: 0.4rem 0.24rem;
    }
}

/* Skala 0–6: linje med 7 prikker (0/3/6 større), uten synlige tall */
.eval-scale-wrap { margin-top: 0.35rem; }
.eval-scale-dots {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.35rem 0 0.15rem;
    padding: 0.25rem 0;
}
.eval-scale-line {
    position: absolute;
    left: calc(100% / 14);
    right: calc(100% / 14);
    top: 50%;
    height: 2px;
    background: rgba(61, 90, 128, 0.22);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}
.eval-scale-dot-item {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    min-width: 0;
}
.eval-scale-dot-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 50%;
    touch-action: manipulation;
}
.eval-scale-dot {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--cream, #faf9f6);
    border: 2px solid rgba(61, 90, 128, 0.38);
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.eval-scale-dot-item--mid .eval-scale-dot {
    width: 0.6875rem;
    height: 0.6875rem;
}
.eval-scale-dot-item--anchor .eval-scale-dot {
    width: 0.875rem;
    height: 0.875rem;
}
.eval-scale-dot-input:checked + .eval-scale-dot-label .eval-scale-dot {
    background: var(--teal);
    border-color: var(--teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
    transform: scale(1.08);
}
.eval-scale-dot-input:focus-visible + .eval-scale-dot-label .eval-scale-dot {
    outline: 2px solid var(--teal-light);
    outline-offset: 3px;
}
.eval-scale-endpoints {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem 1rem;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    line-height: 1.35;
    align-items: start;
}
.eval-scale-end { min-width: 0; }
.eval-scale-end-center { text-align: center; }
.eval-scale-end-right { text-align: right; }
@media (max-width: 575.98px) {
    .eval-scale-endpoints { font-size: 0.75rem; }
    .eval-scale-dot-label {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
}

.form-control, .form-select {
    border-radius: 12px;
    border-color: var(--border-visible);
}
.form-control:focus, .form-select:focus {
    border-color: var(--teal-light);
    box-shadow: 0 0 0 3px rgba(61, 90, 128, 0.08);
}
.text-muted { color: var(--slate-muted) !important; }
.border-top { border-color: var(--sand) !important; }

/* Klikkbar tekst (lenker, ikke knapper): teal. Knapper behold sine farger. */
.content-pane a:not(.btn) {
    color: var(--teal);
}
.content-pane a:not(.btn):hover {
    color: var(--teal-light);
}
/* Chat trådliste (sidebar + /chat + offcanvas): moderne, flat panel */
.chat-sidebar-panel,
.chat-list-wrapper {
    box-shadow: none !important;
    border: none;
    border-radius: 0;
    background: #fff;
}
.chat-fullscreen-mobile-wrapper .chat-sidebar-panel {
    border-right: 1px solid var(--sand);
}
/* Desktop splitt: ett panel – avrunding kun på ytterkantene, ikke mellom liste og chat */
@media (min-width: 768px) {
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) {
        border: 1px solid rgba(0, 0, 0, 0.04);
        border-radius: var(--card-radius);
        overflow: hidden;
        box-shadow: var(--card-shadow);
        background: #fff;
        height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)) - 48px);
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-fullscreen-mobile-row {
        height: 100%;
        align-items: stretch;
        flex-wrap: nowrap;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-split-list-column {
        flex: 0 0 22rem;
        width: 22rem;
        min-width: 22rem;
        max-width: 22rem;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-fullscreen-mobile-row > [class*="col-"] {
        height: 100%;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-split-thread-column {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-sidebar-panel,
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-fullscreen-card {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        height: 100%;
        max-height: none !important;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-sidebar-panel:hover,
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-fullscreen-card:hover {
        box-shadow: none !important;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-fullscreen-mobile-row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-fullscreen-mobile-row > [class*="col-"] > * {
        flex: 1 1 auto;
        min-height: 0;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-sidebar-panel {
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--sand) !important;
    }
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-sidebar-list-wrap {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overflow-y: auto;
    }
}
.chat-list-wrapper {
    border: 1px solid var(--sand);
    border-radius: var(--card-radius);
    overflow: hidden;
}
.chat-sidebar-sticky-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    border-bottom: 1px solid var(--sand);
}
.chat-sidebar-panel .card-header,
.chat-list-wrapper > .card-header,
.chat-list-wrapper__head .card-header {
    padding: 0.75rem 1rem;
}
.chat-sidebar-panel .card-header .chat-sidebar-heading,
.chat-list-wrapper .chat-sidebar-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    letter-spacing: normal;
}
.chat-sidebar-list-wrap {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.chat-thread-search {
    background: #fff;
}
.chat-thread-search-wrap {
    position: relative;
}
.chat-thread-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-muted);
    font-size: 0.8125rem;
    pointer-events: none;
    z-index: 1;
}
.chat-thread-search-wrap .chat-thread-search-input {
    padding-left: 2.25rem;
}
.chat-fullscreen-mobile-wrapper .list-group-item.chat-thread-item,
.chat-list-wrapper .list-group-item.chat-thread-item,
#offcanvasChat .chat-thread-item,
#offcanvasChat .list-group-item.chat-offcanvas-thread-item {
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--slate) !important;
    padding: 0.75rem 1rem;
    border-color: var(--sand);
    text-decoration: none;
}
.chat-fullscreen-mobile-wrapper .list-group-item.chat-thread-item:hover,
.chat-list-wrapper .list-group-item.chat-thread-item:hover,
#offcanvasChat .chat-thread-item:hover {
    color: var(--slate) !important;
    background-color: var(--cream-warm);
}
.chat-fullscreen-mobile-wrapper .list-group-item.chat-thread-item.active,
.chat-list-wrapper .list-group-item.chat-thread-item.active {
    background-color: var(--cream-warm) !important;
    border-color: var(--sand) !important;
    color: var(--slate) !important;
    box-shadow: inset 3px 0 0 var(--teal);
}
.chat-thread-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}
.chat-thread-avatar--group {
    font-size: 0.875rem;
}
.chat-thread-type-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}
.chat-thread-type-badge--all {
    background: rgba(61, 90, 128, 0.12);
    color: var(--teal, #3d5a80);
}
.chat-thread-type-badge--subset {
    background: rgba(108, 117, 125, 0.14);
    color: var(--slate-muted, #5c6b7a);
}
.chat-thread-item.active .chat-thread-type-badge--all {
    background: rgba(61, 90, 128, 0.2);
    color: var(--teal, #3d5a80);
}
.chat-thread-item.active .chat-thread-type-badge--subset {
    background: rgba(108, 117, 125, 0.22);
    color: var(--slate-muted, #5c6b7a);
}
.chat-thread-item .chat-thread-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    min-width: 0;
    overflow: hidden;
}
.chat-thread-title__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-thread-unread-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
}
.chat-thread-item.active .chat-thread-unread-dot {
    background: var(--coral);
}
.chat-thread-item .chat-thread-meta {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    margin-top: 0.125rem;
}
.chat-thread-item {
    align-items: flex-start;
    gap: 0.625rem;
}
.chat-thread-item__main {
    flex: 1 1 auto;
    min-width: 0;
}
.chat-thread-item__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
}
.chat-thread-item__top .chat-thread-title {
    flex: 1 1 auto;
}
.chat-thread-item__time {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}
.chat-thread-preview {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-thread-item--unread .chat-thread-title {
    font-weight: 700;
}
.chat-thread-item--unread .chat-thread-preview {
    font-weight: 500;
    color: var(--slate) !important;
}
.chat-thread-empty-state__icon {
    color: var(--slate-muted);
    opacity: 0.45;
}
#offcanvasChat .list-group-item.p-0 {
    padding: 0 !important;
    border: none;
}
#offcanvasChat .chat-offcanvas-thread-item > .chat-thread-item {
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 1px solid var(--sand);
}
#offcanvasChat .chat-offcanvas-thread-item:hover .chat-thread-item {
    background-color: var(--cream-warm);
}
.chat-dropdown-thread-item .chat-thread-item {
    border: none;
    background: transparent;
}
/* Chat samtaler-liste: base list colors */
.chat-fullscreen-mobile-wrapper .list-group-item {
    color: var(--slate) !important;
}
.chat-fullscreen-mobile-wrapper .list-group-item:hover {
    color: var(--slate) !important;
}
.chat-fullscreen-mobile-wrapper .list-group-item.active .text-muted,
.chat-list-wrapper .list-group-item.active .text-muted {
    color: var(--slate-muted) !important;
}
/* Splitt-visning «Samtaler»: rund knapp med comment-ikon – midstill ikon */
a.btn.chat-new-conversation-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    min-width: 2.125rem;
    min-height: 2.125rem;
    padding: 0 !important;
    line-height: 1;
    flex-shrink: 0;
    box-sizing: border-box;
}
a.btn.chat-new-conversation-btn i {
    line-height: 1;
    margin: 0;
    pointer-events: none;
}
.chat-thread-search-input {
    border-radius: 20px;
    border: 1px solid var(--sand);
    font-size: 0.9375rem;
}
.chat-thread-search-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.15);
}
/* Chat list-siden (ingen tråd valgt): sort tekst på hvit */
.chat-list-wrapper .list-group-item {
    color: var(--slate) !important;
}
.chat-list-wrapper .list-group-item:hover {
    color: var(--slate) !important;
}

/* Mobil: Bruk full skjermhøyde og skjul nettleserkontroller */
@media (max-width: 768px) {
    /*
     * Dokumentscroll: én scroll-root (body). Html + body som begge scroller gir ofte «låst» scroll
     * i Android Chrome (gruppevegg, plan-skjema, m.m.). Fast html-høyde + touch-action: manipulation
     * på alle barn blokkerer også vertikal scroll.
     */
    html {
        min-height: 100%;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: visible;
        touch-action: pan-y pinch-zoom;
    }

    body {
        min-height: 100%;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom;
    }

    /* Chat-fullscreen er eneste unntak med låst body-scroll */
    body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) {
        overflow-y: hidden;
    }

    /* PWA (Android): sørg for at dokumentet kan scrolle utenfor chat-fullscreen */
    html.pv-standalone:not(:has(body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none)),
    html.pv-standalone:not(:has(body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none)) body {
        height: auto;
        overflow-y: auto;
    }

    /* Forhindre zoom ved dobbelt-tap på typiske klikkflater — pan-y på lenker i lister (scroll + tap) */
    button, .btn, .nav-link {
        touch-action: manipulation;
    }
    a.list-group-item-action {
        touch-action: pan-y;
    }
    /* Interaktive skjemafelter: auto (klikk + scroll) */
    button, input, textarea, select, a, label {
        touch-action: auto;
    }

    /* Kort i hovedinnhold: overflow:hidden klipper ofte touch-scroll på Android */
    .content-pane .card:not(.chat-fullscreen-card) {
        overflow: visible;
    }

    /* Scroll-kjede: vertikal pan på innhold utenfor chat-tråd */
    #main-content,
    .content-pane,
    .content-pane > .container-fluid,
    .content-pane .card,
    .content-pane .card-body,
    .content-pane form,
    .content-pane .alert,
    .content-pane .study-year-switcher-card,
    .workspace-feed,
    .workspace-post,
    .workspace-post-text,
    .responsive-list-root,
    .responsive-list-cards-wrap {
        touch-action: pan-y;
    }
    .ws-comments-section,
    .ws-comments-section textarea,
    .ws-comment-form,
    .ws-comment-form textarea,
    .ws-reply-form,
    .ws-reply-form textarea,
    .ws-comment-edit-form,
    .ws-comment-edit-form .btn {
        touch-action: manipulation !important;
        pointer-events: auto !important;
    }
    /*
     * Bootstrap .table-responsive: horisontal scroll (pan-x) + vertikal scroll videreføres
     * til dokumentet (pan-y). Kun pan-y (juni 2026 mobilfix) blokkerte sidelengs swipe.
     */
    .table-responsive,
    .content-pane .table-responsive,
    .content-pane [class*="table-responsive"] {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        max-width: 100%;
    }

    /*
     * Quill (notat, gruppevegg): snow-theme setter height:100% + overflow-y:auto på .ql-editor,
     * som på Android «stjeler» vertikal scroll — la siden scrolle, editoren vokser med innhold.
     */
    .note-quill-editor,
    .note-quill-editor .ql-container,
    .note-quill-editor .ql-editor,
    .ql-container,
    .ql-editor {
        touch-action: pan-y;
    }
    .note-quill-editor.overflow-hidden {
        overflow: visible !important;
    }
    .note-quill-editor .ql-container {
        height: auto !important;
    }
    .note-quill-editor .ql-editor,
    .ql-container .ql-editor {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        min-height: 12rem;
    }
    .note-quill-editor .ql-toolbar {
        touch-action: manipulation;
    }

    /* Studieår-bryter: horisontal scroll på btn-group (ikke ytre wrapper — unngår vertikal klipping) */
    .study-year-switcher-card .study-year-btns .study-year-btn-group-scroll > .study-year-switcher-group {
        touch-action: pan-x pan-y;
    }

    /*
     * Praksisoppfølging / FullCalendar: kalenderflaten er høy på mobil (kvadratiske dager).
     * FC-scroller og overflow:hidden på kort kan blokkere vertikal sidescroll i Android PWA.
     */
    .praksisbesok-kalender-bleed,
    .praksisbesok-calendar-card,
    .praksisbesok-calendar-card .card-body,
    .pb-cal-student-panel,
    .pb-cal-legend-bar,
    #praksisbesok-calendar,
    #praksisbesok-calendar .fc,
    #praksisbesok-calendar .fc-view-harness,
    #praksisbesok-calendar .fc-scrollgrid,
    #praksisbesok-calendar .fc-daygrid-body,
    #praksisbesok-calendar .fc-scroller-harness,
    #praksisbesok-calendar .fc-scroller,
    #praksisbesok-calendar .fc-scroller-liquid-absolute {
        touch-action: pan-y;
    }
    .praksisbesok-calendar-card {
        overflow: visible;
    }
    .praksisbesok-calendar-card .card-body {
        overflow: visible;
    }
    #praksisbesok-calendar .fc-scroller,
    #praksisbesok-calendar .fc-scroller-harness {
        overflow: visible !important;
    }
    #praksisbesok-calendar .fc-scroller-liquid-absolute {
        position: relative !important;
        inset: auto !important;
    }

    /* Bootstrap-modaler med egen scroll */
    .modal-dialog-scrollable .modal-body {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    /* iOS zoomer inn på skrivefelt < 16px (inkl. form-control-sm ≈ 14px) */
    input.form-control,
    textarea.form-control,
    select.form-select {
        font-size: 16px;
    }

    /* Chat-meldinger: egen scroll-container i mobil fullskjerm (ikke flex-end på root) */
    .chat-fullscreen-card .chat-messages-panel,
    .chat-fullscreen-card #chatMessages,
    .chat-fullscreen-card #chatMessagesDesktop {
        overflow-y: scroll;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .chat-fullscreen-card #chatMessages button,
    .chat-fullscreen-card #chatMessages a,
    .chat-fullscreen-card #chatMessagesDesktop button,
    .chat-fullscreen-card #chatMessagesDesktop a {
        touch-action: auto;
    }

    /* Samtaleliste i split-visning på mobil (før tråd åpnes) */
    .chat-split-list-column:not(.d-none) .chat-sidebar-panel {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)));
        max-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)));
    }
    .chat-split-list-column:not(.d-none) .chat-sidebar-list-wrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    /* Optimaliser hovedinnhold for fullskjerm */
    .content-pane {
        min-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)) - 4px);
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    /*
     * Mobil: én felles horisontal luft (symmetrisk + safe area) for topbar og innhold.
     * Ytre layout-container uten sidepadding — unngår dobbel margin og skjev klipping ved overflow-x.
     */
    nav.topbar-custom ~ .container-fluid {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
    nav.topbar-custom ~ .container-fluid > .layout-row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
    .topbar-custom {
        padding-left: 0;
        padding-right: 0;
    }
    .topbar-custom .container-fluid {
        padding-left: max(var(--up-mobile-pad-x), env(safe-area-inset-left, 0px));
        padding-right: max(var(--up-mobile-pad-x), env(safe-area-inset-right, 0px));
    }

    /* Lang skjema-side (plan m.m.): ekstra plass over home-indikator i PWA */
    .content-pane > .container-fluid {
        --bs-gutter-x: var(--up-mobile-gutter-x);
        padding-left: max(var(--up-mobile-pad-x), env(safe-area-inset-left, 0px));
        padding-right: max(var(--up-mobile-pad-x), env(safe-area-inset-right, 0px));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
        max-width: 100%;
        box-sizing: border-box;
    }
    footer .container-fluid {
        padding-left: max(var(--up-mobile-pad-x), env(safe-area-inset-left, 0px));
        padding-right: max(var(--up-mobile-pad-x), env(safe-area-inset-right, 0px));
    }
    /* Nested container/container-fluid – unngå dobbel padding */
    .content-pane .container-fluid .container,
    .content-pane .container-fluid .container-fluid {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
    
    /*
     * Chat / start samtale: full bredde i hovedinnhold — må IKKE matche nav.topbar-custom > .container-fluid
     * (da forsvant horisontal padding og logo/ikoner «hoppet» mot kantene).
     */
    body:has(.chat-fullscreen-mobile-wrapper) nav.topbar-custom ~ .container-fluid,
    body:has(.chat-fullscreen-mobile-wrapper) .content-pane > .container-fluid,
    body:has(.card.shadow-sm[style*="max-width: 600px"]) nav.topbar-custom ~ .container-fluid,
    body:has(.card.shadow-sm[style*="max-width: 600px"]) .content-pane > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Desktop: chat & varsler – posisjon/bredde settes dynamisk (topbar-dropdown.js + Popper) */
@media (min-width: 992px) {
    #chatDropdown + .dropdown-menu.dropdown-menu-end,
    [aria-labelledby="chatDropdown"].dropdown-menu.dropdown-menu-end,
    #notificationDropdown + .dropdown-menu.dropdown-menu-end,
    [aria-labelledby="notificationDropdown"].dropdown-menu.dropdown-menu-end {
        overflow-x: hidden;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
    #chatDropdown + .dropdown-menu.dropdown-menu-end,
    [aria-labelledby="chatDropdown"].dropdown-menu.dropdown-menu-end {
        min-width: 320px;
    }
    #notificationDropdown + .dropdown-menu.dropdown-menu-end,
    [aria-labelledby="notificationDropdown"].dropdown-menu.dropdown-menu-end {
        min-width: 250px;
    }

    /* Institusjon-dropdown: dobbelt så bred når det er plass, aldri utenfor skjermen */
    [aria-labelledby="tenantSwitchDropdown"].dropdown-menu {
        min-width: 320px;
        max-width: min(400px, calc(100vw - 40px));
        overflow-x: hidden;
        box-sizing: border-box;
    }
}

/* Safe area for overlays (offcanvas, modal) – unngå overlapping med statusbar/home indicator i webapp */
.offcanvas .offcanvas-header {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
}
.offcanvas-start .offcanvas-header {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
}
.offcanvas-end .offcanvas-header {
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
.offcanvas .offcanvas-body {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
#offcanvasChat .list-group-item[data-thread-id],
#offcanvasNotifications .list-group-item[data-notification-id] {
    cursor: pointer;
}

.up-notif-group-children {
    border-color: rgba(61, 90, 128, 0.25) !important;
}

.up-notif-group-child {
    cursor: pointer;
    border-radius: 6px;
}

.up-notif-group-child:hover,
.up-notif-group-child:focus-visible {
    background: rgba(61, 90, 128, 0.06);
}

.up-notif-group-header {
    cursor: pointer;
}

.dropdown-item.up-notif-group,
.list-group-item.up-notif-group {
    cursor: pointer;
}
.modal .modal-header {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
}
.modal .modal-footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

/* Bilde-zoom-modal (chat + gruppevegg) */
#imageZoomModal.up-image-zoom-modal .modal-dialog {
    max-width: min(95vw, 100%);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
#imageZoomModal .up-image-zoom-content {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    max-width: 100%;
}
#imageZoomModal .up-image-zoom-close {
    position: fixed;
    top: max(0.65rem, env(safe-area-inset-top, 0px));
    right: max(0.65rem, env(safe-area-inset-right, 0px));
    z-index: 1062;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #212529;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
#imageZoomModal .up-image-zoom-close:hover {
    background: #f8f9fa;
}
#imageZoomModal .up-image-zoom-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
#imageZoomModal .up-image-zoom-counter {
    position: fixed;
    top: max(0.85rem, env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1062;
    max-width: min(12rem, calc(100vw - 8rem));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #212529;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    user-select: none;
}
#imageZoomModal .up-image-zoom-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1062;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #212529;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
#imageZoomModal .up-image-zoom-nav--prev {
    left: max(0.65rem, env(safe-area-inset-left, 0px));
}
#imageZoomModal .up-image-zoom-nav--next {
    right: max(0.65rem, env(safe-area-inset-right, 0px));
}
#imageZoomModal .up-image-zoom-nav:hover {
    background: #fff;
}
#imageZoomModal .up-image-zoom-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
#imageZoomModal .up-image-zoom-nav[disabled] {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}
#imageZoomModal .up-image-zoom-body {
    padding-top: 3.25rem;
    overflow: hidden;
    max-width: 100%;
}
#imageZoomModal .up-image-zoom-img,
#imageZoomModal img.up-image-zoom-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(90vh, 90dvh);
    object-fit: contain;
}
body.up-image-zoom-open {
    overflow: hidden;
}
body.up-image-zoom-open .modal-backdrop.show {
    opacity: 0.88;
}
img[data-zoom-src] { cursor: pointer; }

/* Mobile: keep topbar height stable */
@media (max-width: 576px) {
    .topbar-custom .navbar-brand {
        padding-right: 0;
        min-width: 44px; /* Kun ikon – knappene får plass til høyre */
    }
    /* Hindre at topbar brytes til flere linjer */
    .topbar-custom .container-fluid {
        flex-wrap: nowrap;
    }
    /* Ensure icon buttons have good touch targets on mobile */
    .btn-group .btn-sm {
        min-width: 44px;
        padding: 0.5rem;
    }
    .btn-group .btn-sm i {
        font-size: 1rem;
    }
    /* Navbar icons (chat, varsler) – min 44px touch target */
    .topbar-custom .d-lg-none .nav-link {
        min-width: 44px;
        min-height: 44px;
        padding: 10px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/*
 * Topbar låst på alle bredder (fixed). JS setter --up-topbar-offset = målt nav-høyde.
 * Sidemeny (sticky) bruker samme offset for top/max-height så den ikke sklir under nav.
 */
nav.topbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* ~ ikke +: mellom nav og layout kan ligge #push-prompt-bar (som i Praksisportal) */
nav.topbar-custom ~ .container-fluid {
    padding-top: var(--up-topbar-offset, var(--topbar-offset-fallback));
}

/* Mobil: tilbake-linje rett under topbar (Fase 1 navigasjon) */
.up-mobile-back-bar {
    position: fixed;
    top: var(--up-topbar-offset, var(--topbar-offset-fallback));
    left: 0;
    right: 0;
    z-index: 1025;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: rgba(250, 249, 246, 0.52);
    backdrop-filter: saturate(200%) blur(28px);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    border-bottom: 0.5px solid rgba(30, 50, 72, 0.08);
    box-shadow: none;
    padding-top: var(--up-mobile-back-pad-y);
    padding-bottom: var(--up-mobile-back-pad-y);
    padding-left: max(calc(var(--up-mobile-pad-x) + 0.125rem), env(safe-area-inset-left, 0px));
    padding-right: max(var(--up-mobile-pad-x), env(safe-area-inset-right, 0px));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .up-mobile-back-bar {
        background: var(--cream, #faf9f6);
        border-bottom: none;
        box-shadow: inset 0 -1px 0 var(--sand, #e8e4dc);
    }
}
.up-mobile-back-bar .up-mobile-back-bar__btn {
    display: flex;
}
.up-mobile-back-bar[hidden] {
    display: none !important;
}
/* iOS-inspirert glassy tilbake: 36px synlig sirkel, 44px touchområde */
.up-mobile-back-bar__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.up-mobile-back-bar__btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}
.up-mobile-back-bar__btn:active {
    transform: none;
    opacity: 1;
}
.up-mobile-back-bar__glass {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 0;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.78) 0%, rgba(228, 235, 245, 0.52) 100%);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 0.5px solid rgba(30, 50, 72, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -0.5px 0 rgba(30, 50, 72, 0.07),
        0 2px 14px rgba(15, 23, 42, 0.13),
        0 0 0 0.5px rgba(15, 23, 42, 0.05);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .up-mobile-back-bar__glass {
        background: linear-gradient(145deg, #ffffff 0%, #eef2f7 100%);
        border-color: rgba(30, 50, 72, 0.18);
    }
}
.up-mobile-back-bar__btn:hover .up-mobile-back-bar__glass,
.up-mobile-back-bar__btn:focus-visible .up-mobile-back-bar__glass {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.86) 0%, rgba(220, 230, 242, 0.58) 100%);
    border-color: rgba(30, 50, 72, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -0.5px 0 rgba(30, 50, 72, 0.08),
        0 3px 16px rgba(15, 23, 42, 0.15),
        0 0 0 0.5px rgba(15, 23, 42, 0.06);
}
.up-mobile-back-bar__btn:active .up-mobile-back-bar__glass {
    background:
        linear-gradient(145deg, rgba(61, 90, 128, 0.28) 0%, rgba(61, 90, 128, 0.16) 100%);
    border-color: rgba(45, 69, 98, 0.38);
    transform: scale(0.91);
    box-shadow:
        inset 0 2px 5px rgba(20, 35, 55, 0.18),
        0 1px 4px rgba(15, 23, 42, 0.1);
}
.up-mobile-back-bar__btn:active .up-mobile-back-bar__glass svg {
    stroke: #142337;
}
.up-mobile-back-bar__btn:focus-visible {
    outline: none;
}
.up-mobile-back-bar__btn:focus-visible .up-mobile-back-bar__glass {
    outline: 2px solid var(--teal, #3d5a80);
    outline-offset: 2px;
}
.up-mobile-back-bar__glass svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    stroke: #1a3352;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.12s ease;
}
body.up-mobile-back-visible {
    --up-mobile-back-bar-height: calc(36px + (2 * var(--up-mobile-back-pad-y)));
}
@media (prefers-reduced-transparency: reduce) {
    .up-mobile-back-bar {
        background: var(--cream, #faf9f6);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        box-shadow: inset 0 -1px 0 var(--sand, #e8e4dc);
    }
    .up-mobile-back-bar__glass {
        background: linear-gradient(145deg, #ffffff 0%, #e8edf3 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: rgba(30, 50, 72, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 1),
            0 2px 8px rgba(15, 23, 42, 0.1);
    }
    .up-mobile-back-bar__btn:active .up-mobile-back-bar__glass {
        background: linear-gradient(145deg, #d8e2ec 0%, #c5d3e2 100%);
        border-color: rgba(45, 69, 98, 0.35);
    }
}
body:not(.up-mobile-back-visible) {
    --up-mobile-back-bar-height: 0px;
}
@media (max-width: 767.98px) {
    nav.topbar-custom ~ .container-fluid {
        padding-top: calc(
            var(--up-topbar-offset, var(--topbar-offset-fallback))
            + var(--up-mobile-back-bar-height, 0px)
        );
    }
    body.push-prompt-visible nav.topbar-custom ~ .container-fluid {
        padding-top: calc(
            var(--up-topbar-offset, var(--topbar-offset-fallback))
            + var(--up-mobile-back-bar-height, 0px)
        );
    }
    /* Tilbake via HTMX: ingen overgangseffekt som kan oppleves som «slide». */
    #main-content.htmx-swapping,
    #main-content.htmx-settling {
        transition: none !important;
    }
}

/* On tablet/desktop ensure layout stays side-by-side */
@media (min-width: 768px) {
    .layout-row {
        display: flex;
    }
    .layout-row .sidebar {
        display: block !important;
    }
}
@media (max-width: 767.98px) {
    .layout-row {
        display: block;
    }
    .layout-row .sidebar {
        height: auto;
        max-height: none;
    }
    /* Fullskjerm mobil-chat: ytre padding bort — panelet er position:fixed fra JS-målt top */
    body:has(.chat-fullscreen-mobile-wrapper.d-md-none) nav.topbar-custom ~ .container-fluid {
        padding-top: 0 !important;
    }
    /* Chat-liste (ikke tråd): forhåndsreserver plass til tilbake-linje — unngår hopp ved HTMX-tilbake */
    body.chat-page:not(:has(.chat-fullscreen-mobile-wrapper.d-md-none)) nav.topbar-custom ~ .container-fluid {
        padding-top: calc(
            var(--up-topbar-offset, var(--topbar-offset-fallback))
            + calc(36px + (2 * var(--up-mobile-back-pad-y)))
        ) !important;
    }
}

/* Når push-prompt-baren vises (under navbar): gi plass til den */
body.push-prompt-visible .layout-row {
    margin-top: 48px;
}
.up-tilgjengelighetserklaring-page .legal-content h2 {
    margin-top: 2rem;
}
.up-tilgjengelighetserklaring-page .legal-content h2:first-child {
    margin-top: 0;
}
.up-tilgjengelighetserklaring-page .up-accessibility-cta.btn {
    border: none;
}

body.chat-page footer {
    display: none;
}

/* Chat fullscreen layout - desktop */
.chat-fullscreen-card {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Klipp header/footer til kortets avrundede hjørner */
    /* Høyde = viewport - navbar - container padding (1.5rem top + 1.5rem bottom = 3rem = 48px) */
    height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)) - 48px);
    max-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)) - 48px);
}
.chat-fullscreen-card .card-header {
    flex-shrink: 0;
}
.chat-fullscreen-mobile-wrapper.d-md-none .chat-fullscreen-card .card-header {
    position: relative;
    align-items: center;
    gap: 0.5rem;
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--sand, #e8e4dc);
    padding-top: var(--up-mobile-back-pad-y);
    padding-bottom: var(--up-mobile-back-pad-y);
    padding-left: max(calc(var(--up-mobile-pad-x) + 0.125rem), env(safe-area-inset-left, 0px));
    padding-right: max(var(--up-mobile-pad-x), env(safe-area-inset-right, 0px));
}
.chat-fullscreen-mobile-wrapper.d-md-none .chat-fullscreen-card .card-header .up-mobile-back-bar__btn {
    display: flex;
    margin: 0;
}
.chat-fullscreen-mobile-wrapper.d-md-none .chat-thread-header-copy {
    min-width: 0;
}
.chat-thread-header-title {
    min-width: 0;
    line-height: 1.25;
}
.chat-thread-header-title-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}
.chat-thread-header-title-row .chat-thread-header-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-fullscreen-mobile-wrapper.d-md-none .chat-thread-header-title--participants {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.3;
}
button.chat-thread-header-title--interactive {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    font: inherit;
}
button.chat-thread-header-title--interactive:hover {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.22);
}
button.chat-thread-header-title--interactive:focus-visible {
    outline: 2px solid var(--teal, #3d5a80);
    outline-offset: 2px;
    border-radius: 0.2rem;
}
.chat-thread-roster-list {
    max-height: min(60vh, 20rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.chat-thread-roster-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
    line-height: 1.35;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.chat-thread-roster-item-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    min-width: 0;
    flex: 1;
}
.chat-thread-roster-role.badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.chat-thread-roster-item:last-child {
    border-bottom: 0;
}
.chat-thread-roster-item--me .chat-thread-roster-name {
    font-weight: 600;
}
.chat-fullscreen-mobile-wrapper.d-md-none .chat-thread-header-meta-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: 0.125rem;
}
.chat-fullscreen-mobile-wrapper.d-md-none .chat-thread-header-meta-row .chat-thread-type-badge {
    flex-shrink: 0;
}
.chat-fullscreen-card .chat-messages-panel,
.chat-fullscreen-card #chatMessages,
.chat-fullscreen-card #chatMessagesDesktop {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Viktig for flexbox scrolling */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.chat-messages-panel {
    background-color: #f5f6f8;
}
/*
 * Android Chrome: ikke bruk justify-content:flex-end på scroll-root (brøt vertikal scroll).
 * Indre stack med flex-spacer holder korte tråder nederst uten å låse touch-scroll.
 */
.chat-messages-stack {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}
.chat-messages-stack::before {
    content: '';
    flex: 1 1 auto;
    min-height: 0;
    pointer-events: none;
}
.chat-messages-stack > .chat-empty-state {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
}
@keyframes up-chat-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.chat-messages-loading-shell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0 0.75rem;
    width: 100%;
}
.chat-message-skeleton {
    height: 52px;
    border-radius: 0.75rem;
    background: linear-gradient(90deg, #e8ebef 0%, #f4f6f8 45%, #e8ebef 90%);
    background-size: 200% 100%;
    animation: up-chat-shimmer 1.2s ease-in-out infinite;
}
.chat-message-skeleton--incoming {
    width: 72%;
    margin-right: auto;
}
.chat-message-skeleton--outgoing {
    width: 58%;
    margin-left: auto;
}
.chat-load-older-wrap .chat-load-older-btn:disabled {
    opacity: 0.65;
}
.chat-compose-bar.chat-compose-bar--loading {
    opacity: 0.72;
    pointer-events: none;
}
.chat-compose-bar.chat-compose-bar--loading .chat-compose-textarea {
    background-color: #f3f4f6;
}
.chat-fullscreen-card img.chat-attachment-img {
    display: block;
    max-height: 240px;
    min-height: 72px;
    width: auto;
    max-width: 100%;
    touch-action: pan-y;
    object-fit: contain;
}
.chat-list-wrapper .list-group-flush {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.chat-fullscreen-card .card-footer {
    flex-shrink: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Chat skrivefelt – tekst i egen ramme; vedlegg/emoji/send som runde knapper utenfor */
.chat-compose-bar {
    --chat-compose-btn-size: 2.5rem;
    --chat-compose-text-line: 1.25rem;
    width: 100%;
    min-width: 0;
    align-items: flex-end;
}
.chat-compose-shell {
    min-width: 0;
    min-height: var(--chat-compose-btn-size);
    padding: 0 0.875rem;
    background: #fff;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 1.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.chat-compose-shell:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.chat-compose-shell .chat-compose-textarea.form-control {
    width: 100%;
    min-width: 0;
    min-height: var(--chat-compose-text-line);
    max-height: 7.5rem;
    margin: 0;
    padding: calc((var(--chat-compose-btn-size) - 2px - var(--chat-compose-text-line)) / 2) 0;
    line-height: var(--chat-compose-text-line);
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    vertical-align: middle;
}
.chat-compose-shell .chat-compose-textarea.form-control:focus {
    border: none;
    background: transparent;
    box-shadow: none;
}
.chat-compose-bar .chat-compose-icon-btn {
    flex: 0 0 auto;
    width: var(--chat-compose-btn-size);
    height: var(--chat-compose-btn-size);
    min-width: var(--chat-compose-btn-size);
    max-width: var(--chat-compose-btn-size);
    min-height: var(--chat-compose-btn-size);
    max-height: var(--chat-compose-btn-size);
    padding: 0 !important;
    margin: 0;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    line-height: 0 !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.chat-compose-bar .chat-compose-icon-btn > i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.0625rem;
    line-height: 1.125rem;
    text-align: center;
    pointer-events: none;
}
.chat-compose-bar .chat-compose-icon-btn > i::before {
    display: block;
    line-height: 1.125rem;
}
.chat-compose-bar .chat-compose-send.chat-compose-icon-btn {
    border: 1px solid transparent !important;
}
.chat-compose-bar .chat-compose-send.chat-compose-icon-btn > i {
    font-size: 1.125rem;
    font-weight: 700;
}
.chat-compose-bar .chat-compose-icon-btn.btn-primary:hover {
    transform: none;
}
/* Smal skjerm / delt chat: skjul emoji (tastatur har emoji), gi mer plass til tekst */
@media (max-width: 991.98px) {
    .chat-compose-bar .chat-compose-emoji.btn {
        display: none;
    }
}
/* Ekstra trang tråd-kolonne i split-layout */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .chat-split-thread-column .chat-compose-shell .chat-compose-textarea.form-control {
        font-size: 0.9375rem;
    }
}

/* Chat fullscreen layout on mobil / smal tablet (matcher Bootstrap md, samme som d-md-none på tråd) */
@media (max-width: 767.98px) {
    /* Unngå at bakgrunnen scroller bak fast chat (iOS «glipp» under skrivefelt) */
    body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) {
        overflow: hidden;
    }
    /* Fjern padding fra container når chat er synlig */
    body:has(.chat-fullscreen-mobile-wrapper) .content-pane > .container-fluid,
    body:has(.chat-fullscreen-mobile-wrapper) .content-pane > .container-fluid.py-4 {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Fjern margin på content-pane også */
    body:has(.chat-fullscreen-mobile-wrapper) .content-pane {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Ytre split-wrapper: ikke tving full høyde (unngå dobbel 100dvh med nested mobil-kort) */
    .chat-fullscreen-mobile-wrapper:not(.d-md-none) {
        width: 100%;
        position: static;
        left: auto;
        transform: none;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    /* Mobil chat-tråd: --up-chat-mobile-* settes av JS (måler nav.topbar-custom); fallback under */
    .chat-fullscreen-mobile-wrapper.d-md-none {
        position: fixed;
        z-index: 1020;
        left: 0;
        right: 0;
        width: 100%;
        top: var(--up-chat-mobile-top, var(--topbar-offset-fallback));
        height: var(--up-chat-mobile-height, calc(100dvh - var(--topbar-offset-fallback)));
        max-height: var(--up-chat-mobile-height, calc(100dvh - var(--topbar-offset-fallback)));
        transform: none;
        overflow: hidden;
    }
    /*
     * Hvit fyll-flate i bunnen, bak chat-panelet (z under 1020). iOS Safari rapporterer
     * av og til en for liten viewport-høyde etter at tastaturet lukkes, slik at det faste
     * panelet ikke når helt ned og cream-bakgrunnen (body) vises som en grå stripe under
     * den hvite footeren. Denne flaten er forankret til layout-viewport-bunnen (full høyde)
     * og maler området hvitt, så en evt. stripe blir usynlig mot footeren. Påvirker ikke
     * panelhøyde eller skrivefeltets posisjon.
     */
    body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none)::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 160px;
        background: #fff;
        z-index: 1019;
        pointer-events: none;
    }
    .chat-fullscreen-mobile-row {
        height: 100%;
        margin: 0 !important;
    }
    .chat-fullscreen-mobile-row > [class^="col-"] {
        height: 100%;
        padding: 0 !important;
    }
    .chat-fullscreen-card {
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0;
        margin: 0;
        overflow: hidden;
        border-left: none;
        border-right: none;
    }
    .chat-fullscreen-card .card-body,
    .chat-fullscreen-card .card-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .chat-fullscreen-mobile-wrapper.d-md-none .chat-fullscreen-card .card-header {
        padding-top: var(--up-mobile-back-pad-y);
        padding-bottom: var(--up-mobile-back-pad-y);
        padding-left: max(calc(var(--up-mobile-pad-x) + 0.125rem), env(safe-area-inset-left, 0px));
        padding-right: max(var(--up-mobile-pad-x), env(safe-area-inset-right, 0px));
    }
    /* Under HTMX-tilbake fra tråd: ikke la tastatur/fokus-CSS endre padding mens panelet fader ut */
    html[data-up-chat-exit="1"] .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-exiting .chat-fullscreen-card .card-footer,
    html[data-up-chat-exit="1"] .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-exiting #chatMessages {
        padding-bottom: 0.5rem !important;
    }
    html[data-up-chat-exit="1"] .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-exiting .chat-fullscreen-card .card-footer {
        padding-top: 0.5rem !important;
    }
    html[data-up-chat-exit="1"] .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-exiting #chatMessages > .d-flex.mb-2:last-child {
        margin-bottom: 0.5rem !important;
    }
    .chat-fullscreen-card .card-footer {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
        padding-top: 0.375rem;
        /* Fast safe-area — ingen JS-veksling (reflow under fokus ga dobbelttrykk på iOS) */
        padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
    }
    .chat-fullscreen-mobile-wrapper.d-md-none #chatMessages {
        padding-bottom: 0.125rem;
    }
    .chat-fullscreen-mobile-wrapper.d-md-none .chat-messages-stack {
        padding-bottom: 0;
    }
    .chat-fullscreen-mobile-wrapper.d-md-none .chat-messages-stack > .d-flex.mb-2:last-child {
        margin-bottom: 0.25rem !important;
    }
    .chat-fullscreen-mobile-wrapper.d-md-none .chat-compose-shell {
        transition: none;
    }
    nav.topbar-custom {
        will-change: transform;
    }
    .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-keyboard-open {
        transition: none;
    }
    #chatInput.form-control,
    #chatInputDesktop.form-control {
        line-height: var(--chat-compose-text-line, 1.25rem);
    }
}

/*
 * iOS standalone PWA: WebKit #254868 rapporterer for liten høyde for dvh når
 * viewport-fit=cover brukes. Bruk derfor klassisk vh kun her, og la chatten ligge
 * i normal dokumentflyt mens kun meldingslisten scroller.
 */
@media (max-width: 767.98px) {
    html.pv-standalone:has(body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none) {
        overflow: hidden;
        scrollbar-gutter: auto;
        overscroll-behavior: none;
        background: #fff;
    }
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) {
        overflow: hidden;
        width: 100vw;
        max-width: 100vw;
        overscroll-behavior: none;
        background: #fff;
    }
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) nav.topbar-custom ~ .container-fluid {
        padding-top: var(--up-topbar-offset, var(--topbar-offset-fallback)) !important;
        min-height: 100vh;
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
    }
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .layout-row,
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .content-pane,
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .content-pane > .container-fluid,
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .chat-fullscreen-mobile-wrapper:not(.d-md-none),
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .chat-fullscreen-mobile-row,
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .chat-fullscreen-mobile-row > [class^="col-"] {
        height: calc(100vh - var(--up-topbar-offset, var(--topbar-offset-fallback)));
        min-height: 0;
        max-height: calc(100vh - var(--up-topbar-offset, var(--topbar-offset-fallback)));
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
    }
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .chat-fullscreen-mobile-row {
        --bs-gutter-x: 0;
    }
    html.pv-standalone body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none {
        position: static;
        z-index: auto;
        top: auto;
        left: auto;
        right: auto;
        height: 100%;
        max-height: 100%;
        width: 100%;
        overflow: hidden;
    }
    html.pv-standalone body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none .chat-fullscreen-card {
        height: 100% !important;
        max-height: 100% !important;
    }
    html.pv-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none)::after {
        display: none;
    }
}
/* Chat-meldinger: ⋮-meny på egne meldinger og reaksjoner på mottatte meldinger */
.chat-reaction-badge {
    position: absolute;
    right: 0.35rem;
    bottom: -0.7rem;
    display: inline-flex;
    gap: 0.15rem;
    align-items: center;
    z-index: 3;
}
.chat-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 1.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.chat-reaction-pill--open {
    box-shadow: 0 0 0 2px rgba(61, 90, 128, 0.35);
}
.chat-reaction-pill--mine {
    border-color: rgba(61, 90, 128, 0.35);
    background: #eef5fa;
}
@media (max-width: 767.98px) {
    .chat-reaction-pill {
        min-height: 2rem;
        min-width: 2rem;
        padding: 0.2rem 0.45rem;
        justify-content: center;
    }
}
.chat-reaction-details-popover {
    position: fixed;
    z-index: 1070;
    max-width: min(14rem, calc(100vw - 1rem));
    padding: 0.5rem 0.65rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    pointer-events: auto;
}
.chat-reaction-details-popover[hidden] {
    display: none !important;
}
.chat-reaction-details-popover__emoji {
    font-size: 1.35rem;
    line-height: 1;
    margin-bottom: 0.35rem;
    text-align: center;
}
.chat-reaction-details-popover__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 10rem;
    overflow-y: auto;
}
.chat-reaction-details-popover__list li {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--slate, #293241);
    padding: 0.15rem 0;
    word-break: break-word;
}
.chat-reaction-count {
    font-size: 0.72rem;
    color: var(--slate, #293241);
    font-weight: 600;
}
.chat-in-row {
    max-width: 100%;
}
.chat-sender-avatar {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    user-select: none;
}
.chat-reaction-trigger-btn.btn {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 !important;
    margin: 0;
    line-height: 1;
    border-radius: 50% !important;
    color: var(--slate, #293241);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.chat-reaction-trigger-btn.btn i {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    display: block;
}
.chat-message-bubble--own .chat-message-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
}
.chat-message-bubble--incoming .chat-message-reactions {
    position: absolute;
    top: 50%;
    right: -2.35rem;
    transform: translateY(-50%);
    z-index: 2;
}
.chat-message-bubble--own .chat-message-menu-btn {
    color: rgba(255, 255, 255, 0.88);
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    text-decoration: none;
    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer;
    line-height: 1;
}
.chat-message-bubble--own .chat-message-menu-btn:hover,
.chat-message-bubble--own .chat-message-menu-btn:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}
.chat-message-bubble--own .chat-message-menu-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.chat-message-bubble--own .chat-message-menu-btn .fa-ellipsis-v {
    font-size: 0.85rem;
    line-height: 1;
    display: block;
    transform: translate(1px, 1px);
}
/* Sekundærtekst på teal-boble (navn/tid): text-white-50 (~3:1) feiler WCAG AA – bruk ~78 % hvit (~5:1). */
.chat-message-bubble--own {
    --chat-own-secondary-fg: rgba(255, 255, 255, 0.78);
}
.chat-message-bubble--own .chat-message-meta,
.chat-message-bubble--own .text-white-50 {
    color: var(--chat-own-secondary-fg) !important;
}
@media (min-width: 768px) {
    .chat-reaction-trigger-btn.btn {
        display: inline-flex !important;
    }
    .chat-message-bubble--incoming:hover .chat-reaction-trigger-btn,
    .chat-message-bubble--incoming.chat-reaction-trigger-open .chat-reaction-trigger-btn,
    .chat-in-row:hover .chat-reaction-trigger-btn,
    .chat-in-row.chat-reaction-trigger-open .chat-reaction-trigger-btn {
        opacity: 1;
    }
    .chat-reaction-trigger-btn:hover,
    .chat-reaction-trigger-btn:focus-visible {
        opacity: 1;
        color: var(--teal, #3d5a80);
        background: #fff;
    }
    .chat-message-bubble--own .chat-message-meta {
        padding-right: 1.35rem;
    }
    .chat-message-bubble--own .chat-message-actions {
        opacity: 0;
        transition: opacity 0.15s ease;
    }
    .chat-message-bubble--own:hover .chat-message-actions,
    .chat-message-bubble--own.chat-message-menu-open .chat-message-actions {
        opacity: 1;
    }
}
@media (max-width: 767.98px) {
    .chat-reaction-trigger-btn.btn {
        display: none !important;
    }
    .chat-message-bubble--incoming .chat-message-reactions {
        display: none !important;
    }
    .chat-message-bubble--own .chat-message-actions {
        display: none !important;
    }
    /* Undertrykk iOS «Kopier / Slå opp / Oversett» og Android tekstvalg ved long-press */
    .chat-message-bubble--own,
    .chat-message-bubble--own.chat-long-press-pending {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    .chat-message-bubble--incoming.chat-long-press-pending,
    .chat-message-bubble--incoming.chat-message-pressed {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    .chat-message-bubble--own.chat-message-pressed,
    .chat-message-bubble--incoming.chat-message-pressed {
        animation: chat-long-press-ack 0.28s ease-out forwards;
    }
    @keyframes chat-long-press-ack {
        0% { transform: scale(1); filter: brightness(1); }
        35% { transform: scale(0.95); filter: brightness(0.86); }
        100% { transform: scale(0.99); filter: brightness(0.94); }
    }
}
.chat-message-action-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(0, 0, 0, 0.08);
}
.chat-message-action-backdrop[hidden] {
    display: none !important;
}
.chat-long-press-touch-shield {
    position: fixed;
    inset: 0;
    z-index: 1046;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    background: transparent;
}
.chat-long-press-touch-shield[hidden] {
    display: none !important;
}
body.chat-long-press-menu-active {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.chat-message-action-menu {
    position: fixed;
    z-index: 1050;
    min-width: 11rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    padding: 0.35rem 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.chat-message-action-menu[hidden] {
    display: none !important;
}
.chat-reaction-picker {
    position: fixed;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}
.chat-reaction-picker[hidden] {
    display: none !important;
}
.chat-reaction-picker-btn {
    border: 0;
    background: transparent;
    border-radius: 999px;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.2rem;
    font-size: 1.35rem;
    line-height: 1;
}
.chat-reaction-picker-btn:hover,
.chat-reaction-picker-btn:focus-visible {
    background: var(--cream-warm, #f8f6f2);
}
.chat-message-action-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    color: var(--slate, #212529);
    font-size: 0.95rem;
    text-align: left;
    line-height: 1.3;
}
.chat-message-action-item:hover,
.chat-message-action-item:focus-visible {
    background: var(--cream-warm, #f8f6f2);
}
.chat-message-action-item--danger {
    color: var(--bs-danger, #dc3545);
}
.chat-message-action-item--danger:hover,
.chat-message-action-item--danger:focus-visible {
    background: rgba(220, 53, 69, 0.08);
}
.chat-message-action-item[hidden] {
    display: none !important;
}
.chat-message-action-item i {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

/* Universell utforming: Deaktiver animasjoner for brukere som foretrekker redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
.card, .plan-card, .workspace-post {
    transition: none !important;
}
.plan-card:hover,
.btn-primary:hover,
.btn:hover {
    transform: none !important;
}
.skeleton { animation: none !important; background: #e8e8e8 !important; }
.pv-pwa-splash__loader-fill {
    animation: none;
    transform: scaleX(1);
}
.pv-pwa-splash {
    transition: none;
}
.up-nav-progress__bar {
    animation: none;
    transform: translateX(0);
    width: 100%;
    max-width: none;
}
}

/* Skeleton screens – shimmer i stedet for spinner */
.skeleton {
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.2s infinite;
border-radius: 4px;
height: 1rem;
margin-bottom: 0.5rem;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-line { height: 0.875rem; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-image { width: 100%; min-height: 200px; border-radius: 8px; }
.skeleton-wrapper { padding: 0.5rem 0; }

/* HTMX kaller main.focus() etter sideskift – skjul synlig ramme (a11y beholdes uten outline) */
#main-content {
position: relative;
}
/* HTMX kaller main.focus() etter sideskift – skjul synlig ramme (a11y beholdes uten outline) */
#main-content:focus,
#main-content:focus-visible {
outline: none;
box-shadow: none;
}

/* HTMX-navigasjon: tynn progress (skallet blir stående) */
.up-nav-progress {
    position: fixed;
    top: var(--up-topbar-offset, var(--topbar-offset-fallback));
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1029;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    overflow: hidden;
}
/* Under topbar på lys bakgrunn — ikke oppå mørk navbar (embedded mobil-variant har egen stripe) */
.up-nav-progress:not(.up-nav-progress--embedded) {
    background: var(--cream-warm, #f8f6f2);
    box-shadow: inset 0 -1px 0 var(--sand, #ebe7e0);
}
/* Mobil: progress som 3px-overlay nederst i hvit tilbake-seksjon — ikke ekstra stripe som skyver innhold */
.up-nav-progress.up-nav-progress--embedded {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
body:not(:has(nav.topbar-custom)) .up-nav-progress:not(.up-nav-progress--embedded) {
    top: 0;
}
.up-nav-progress.up-nav-progress--active {
    opacity: 1;
}
.up-nav-progress__bar {
    display: block;
    height: 100%;
    width: 40%;
    max-width: 12rem;
    background: var(--coral);
    border-radius: 0 2px 2px 0;
    transform: translateX(-100%);
    animation: up-nav-progress-indeterminate 1s ease-in-out infinite;
}
@keyframes up-nav-progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* PWA (Legg til Hjem-skjerm): splash mens dokumentet laster — unngår tom/sort skjerm */
/* PWA «Installer appen»: kun mobil (< md), skjul på desktop og når allerede installert */
.pwa-install-menu-item {
  display: none !important;
}
@media (max-width: 767.98px) {
  html:not(.pv-standalone) .pwa-install-menu-item {
    display: block !important;
  }
}
.pv-pwa-splash {
display: none;
position: fixed;
inset: 0;
z-index: 2147483000;
align-items: center;
justify-content: center;
flex-direction: column;
background: #fdf1e7;
overflow: hidden;
opacity: 1;
transition: opacity 0.2s ease-out;
}
.pv-pwa-splash.pv-pwa-splash--hide {
opacity: 0;
pointer-events: none;
}
html.pv-standalone .pv-pwa-splash {
display: none;
}
html.pv-standalone .pv-pwa-splash.pv-pwa-splash--show {
display: flex;
}
/* Senere full lasting i samme økt: kun ikon + progress (samme cream som body under) */
html.pv-standalone.pv-pwa-splash-followup .pv-pwa-splash {
background: transparent;
}
html.pv-standalone.pv-pwa-splash-followup .pv-pwa-splash::before,
html.pv-standalone.pv-pwa-splash-followup .pv-pwa-splash::after {
display: none;
}
.pv-pwa-splash::before,
.pv-pwa-splash::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.pv-pwa-splash::before {
width: min(420px, 120vw);
height: min(420px, 120vw);
background: radial-gradient(circle, rgba(250, 234, 227, 0.95) 0%, transparent 70%);
top: -12%;
left: -15%;
}
.pv-pwa-splash::after {
width: min(300px, 90vw);
height: min(300px, 90vw);
background: radial-gradient(circle, rgba(245, 217, 206, 0.9) 0%, transparent 70%);
bottom: -10%;
right: -12%;
}
.pv-pwa-splash__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
padding: 1.5rem;
padding-bottom: 5rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pv-pwa-splash__icon {
width: 120px;
height: 120px;
border-radius: 28px;
object-fit: cover;
box-shadow: 0 4px 24px rgba(45, 55, 72, 0.08);
}
.pv-pwa-splash__title {
margin: 0;
font-size: 1.75rem;
font-weight: 400;
letter-spacing: 0.06em;
color: #2c2c2a;
}
.pv-pwa-splash__loader {
position: absolute;
bottom: max(2.5rem, env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 3px;
background: #f0d5cc;
border-radius: 2px;
overflow: hidden;
}
.pv-pwa-splash__loader-fill {
display: block;
height: 100%;
width: 70%;
background: var(--coral);
border-radius: 2px;
transform-origin: left center;
animation: pv-pwa-splash-load 1.05s ease-out forwards;
}
@keyframes pv-pwa-splash-load {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}