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

: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;
    --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);
}

/*
 * 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);
}
.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.06);
    color: var(--teal);
}
.sidebar .list-group-item.active,
.offcanvas .list-group-item.active {
    background-color: rgba(61, 90, 128, 0.12);
    color: inherit;
    border-color: transparent;
    border-left: 3px solid var(--coral);
}
/* 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;
}
/* 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);
}
/* Hjem: grupper/planer — rene avrundede hjørner (header/footer følger kort-radius) */
.dashboard-home-card {
    overflow: hidden;
}
.dashboard-home-card > .card-header:first-child {
    border-top-left-radius: calc(var(--card-radius) - 1px);
    border-top-right-radius: calc(var(--card-radius) - 1px);
}
.dashboard-home-card > .card-footer:last-child {
    border-bottom-left-radius: calc(var(--card-radius) - 1px);
    border-bottom-right-radius: calc(var(--card-radius) - 1px);
}
/* 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:hover {
    transform: translateY(-2px);
}
/* 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; }
}
@media (max-width: 1099.98px) {
    .responsive-list-table-wrap { display: none !important; }
    .responsive-list-cards-wrap { display: block !important; }
}
/* Vurderingsskjema: sticky handlingsrad på smal skjerm */
@media (max-width: 767.98px) {
    .evaluation-form-page {
        padding-bottom: 4.5rem;
    }
    .evaluation-form-page .eval-form-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        display: flex;
        flex-wrap: wrap;
        gap: 0.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);
        box-shadow: 0 -4px 16px rgba(45, 55, 72, 0.08);
    }
    .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 – 2 kolonner, 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-title {
        font-size: 1rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .planer-page .planer-grid .plan-card .d-flex.align-items-start .badge {
        flex-shrink: 0;
    }
    .planer-page .planer-grid .plan-card .card-text {
        font-size: 0.875rem;
    }
    .planer-page .planer-grid .plan-card .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .planer-page .planer-grid .plan-card .btn-sm {
        flex-shrink: 0;
    }
}
/* 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);
    /* 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 valgt (f.eks. studieår 2025-2026): teal i stedet for Bootstrap lyseblå */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-info {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #fff !important;
}
/* 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 = coral (skill seg fra student som er teal) */
.badge.bg-coral, .bg-coral { background-color: var(--coral) !important; color: white !important; }
.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 {
  overflow: hidden;
  min-width: 0;
}
/* 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;
}
/* .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%, 58rem);
}
.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 {
        overflow: visible;
    }
}
.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;
}
/* 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-switcher: bue på venstre og høyre som i Praksisportal */
.study-year-btn-group-wrap { border-radius: 50rem; }
.study-year-btn-group > .btn-group:first-child .btn { border-radius: 50rem 0 0 50rem; }
/* Kun mellomliggende år-knapper (ikke siste) flates ut mot «Historiske» */
.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; }
/* Når kun år-knapper (ingen Historiske): første knapp får venstre bue */
.study-year-btn-group > input.btn-check:first-of-type + label.btn { border-radius: 50rem 0 0 50rem; }
/* Etter «Historiske»: kun mellomliggende år-knapper flates ut – ikke siste (høyre bue) */
.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; }

/* 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 samtaler-liste: aktiv = hvit på teal, andre = sort på hvit */
.chat-fullscreen-mobile-wrapper .list-group-item {
    color: #212529 !important;
}
.chat-fullscreen-mobile-wrapper .list-group-item:hover {
    color: #212529 !important;
}
.chat-fullscreen-mobile-wrapper .list-group-item.active {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #fff !important;
}
.chat-fullscreen-mobile-wrapper .list-group-item.active .badge,
.chat-fullscreen-mobile-wrapper .list-group-item.active .text-muted {
    color: rgba(255,255,255,0.9) !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 list-siden (ingen tråd valgt): sort tekst på hvit */
.chat-list-wrapper .list-group-item {
    color: #212529 !important;
}
.chat-list-wrapper .list-group-item:hover {
    color: #212529 !important;
}

/* Mobil: Bruk full skjermhøyde og skjul nettleserkontroller */
@media (max-width: 768px) {
    html {
        height: 100%;
        height: 100dvh; /* Dynamisk viewport height - tar hensyn til nettleserkontroller */
        overflow-x: hidden;
    }
    
    body {
        min-height: 100%;
        min-height: 100dvh;
        overflow-x: hidden;
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Forhindre zoom ved dobbelt-tap - men ikke på interaktive elementer */
    * {
        touch-action: manipulation;
    }
    /* Tillat normale klikk-events på knapper og input-felter */
    button, input, textarea, select, a, label {
        touch-action: auto;
    }
    
    /* Optimaliser hovedinnhold for fullskjerm */
    .content-pane {
        min-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)) - 4px);
    }
    
    /* Mobil: maksimal bredde – minimal sidepadding slik at grå rammer vises */
    .content-pane > .container-fluid {
        padding-left: max(0.25rem, env(safe-area-inset-left));
        padding-right: max(0.25rem, env(safe-area-inset-right));
        --bs-gutter-x: 0.5rem; /* Reduser gutter så row ikke overløper */
    }
    /* 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));
}
.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 .modal-dialog { max-width: 95vw; }
#imageZoomModal img { max-width: 100%; max-height: 90vh; object-fit: contain; }
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;
    height: 2.5rem;
    box-sizing: border-box;
    background: var(--cream, #faf9f6);
    border-bottom: 1px solid var(--sand, #e8e4dc);
    padding: 0.1875rem max(0.5rem, env(safe-area-inset-left, 0px)) 0.1875rem max(0.5rem, env(safe-area-inset-right, 0px));
}
.up-mobile-back-bar[hidden] {
    display: none !important;
}
.up-mobile-back-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
    /* btn-sm + outline – samme uttrykk som Avbryt/Nullstill, uten ekstra bar-høyde */
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.up-mobile-back-bar__btn:hover,
.up-mobile-back-bar__btn:focus-visible {
    transform: none;
    background-color: var(--cream-warm, #f8f6f2);
}
.up-mobile-back-bar__btn .fa-chevron-left {
    font-size: 0.75rem;
    opacity: 0.85;
}
body.up-mobile-back-visible {
    --up-mobile-back-bar-height: 2.5rem;
}
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;
    }
}

/* Når push-prompt-baren vises (under navbar): gi plass til den */
body.push-prompt-visible .layout-row {
    margin-top: 48px;
}
/* Skjul tilgjengelighetserklæring-footer på chat-sider – forstyrrer på mobil */
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-card .card-header .up-mobile-back-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.chat-fullscreen-card .card-header .up-mobile-back-bar__btn:hover,
.chat-fullscreen-card .card-header .up-mobile-back-bar__btn:focus-visible {
    transform: none;
    background-color: var(--cream-warm, #f8f6f2);
}
.chat-fullscreen-card .card-header .up-mobile-back-bar__btn .fa-chevron-left {
    font-size: 0.75rem;
    opacity: 0.85;
}
.chat-thread-header-title {
    min-width: 0;
    line-height: 1.25;
}
.chat-fullscreen-card #chatMessages,
.chat-fullscreen-card #chatMessagesDesktop {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0; /* Viktig for flexbox scrolling */
}
.chat-fullscreen-card .card-footer {
    flex-shrink: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* 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;
    }
    /* Mobil: tråd sklir inn fra høyre ved sidelast (kun transform – GPU-vennlig) */
    .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-thread-enter {
        animation: up-chat-slide-in-mobile 0.2s cubic-bezier(0.25, 0.82, 0.2, 1) forwards;
    }
    @keyframes up-chat-slide-in-mobile {
        from { transform: translate3d(100%, 0, 0); }
        to { transform: translate3d(0, 0, 0); }
    }
    .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-card .card-footer {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        /* Ekstra luft mot home indicator når tastatur er lukket */
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
    /* Tastatur åpent: minimer avstand mellom meldingsliste og skrivefelt, og mellom felt og tastatur */
    .chat-fullscreen-card:has(#chatInput:focus) #chatMessages {
        padding-bottom: 0.25rem !important;
    }
    .chat-fullscreen-card:has(#chatInput:focus) #chatMessages > .d-flex.mb-2:last-child {
        margin-bottom: 0.25rem !important;
    }
    .chat-fullscreen-card .card-footer:has(#chatInput:focus) {
        padding-top: 0.125rem;
        /* Tastatur åpent: ikke legg på ekstra home-indicator-luft (viewport er allerede trang) */
        padding-bottom: 0.125rem;
    }
    .chat-fullscreen-card .card-footer:has(#chatInput:focus) #filePreview.mb-2 {
        margin-bottom: 0.25rem !important;
    }
    /* Ekstra trang footer når VisualViewport rapporterer tastatur (klasse settes av JS) */
    .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-keyboard-open .chat-fullscreen-card .card-footer {
        padding-top: 0.0625rem;
        padding-bottom: 0 !important;
    }
    .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-keyboard-open #chatMessages {
        padding-bottom: 0.125rem !important;
    }
    .chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-keyboard-open #chatMessages > .d-flex.mb-2:last-child {
        margin-bottom: 0.125rem !important;
    }
}
/* 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; }
body.up-chat-nav-pending #main-content::before {
    animation: none !important;
    background: rgba(250, 249, 246, 0.92) !important;
}
.pv-pwa-splash__loader-fill {
    animation: none;
    transform: scaleX(1);
}
.pv-pwa-splash {
    transition: none;
}
.chat-fullscreen-mobile-wrapper.d-md-none.chat-mobile-thread-enter {
    animation: none !important;
}
}

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

/* Chat-navigasjon: umiddelbar tilbakemelding mens ny side eller HTMX-swap laster */
#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;
}
@keyframes up-chat-overlay-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
body.up-chat-nav-pending #main-content::before {
content: "";
position: absolute;
inset: 0;
z-index: 100;
pointer-events: none;
background: linear-gradient(
    105deg,
    rgba(250, 249, 246, 0.94) 0%,
    rgba(235, 231, 224, 0.72) 42%,
    rgba(250, 249, 246, 0.94) 85%
);
background-size: 220% 100%;
animation: up-chat-overlay-shimmer 1.15s ease-in-out infinite;
}
body.up-chat-nav-pending #main-content::after {
content: "Laster chat…";
position: absolute;
left: 50%;
top: 38%;
transform: translate(-50%, -50%);
z-index: 101;
font-size: 0.95rem;
color: var(--slate-muted);
pointer-events: none;
white-space: nowrap;
}

/* PWA (Legg til Hjem-skjerm): splash mens dokumentet laster — unngår tom/sort skjerm */
.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); }
}