/*
 * Hoved-CSS for Praksisportal (flyttet fra inline <style> i templates/base.html).
 * Cachebar på tvers av sidelastinger (asset_version + WhiteNoise Cache-Control).
 * Tenant-avhengige variabler (--tenant-topbar-*, --btn-primary-*) og
 * navbar-toggler-icon (SVG-stroke) renderes fortsatt inline i base.html.
 */

/* WCAG 2.4.7 Focus Visible – tydelig fokusindikator ved tastaturnavigasjon */
:focus-visible {
  outline: 2px solid #3d5a80;
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

:root {
  --topbar-height: 56px;
  --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;
  --role-praksisansvarlig: #8f7358;
  --teal: #3d5a80;
  --teal-dark: #2d4a66;
  --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);
  /* Kolonne-filter (tabell): aktiv pil – teal i tråd med merkevare */
  --pp-filter-chevron-active: var(--teal);
  --pp-filter-chevron-stroke: var(--teal-dark);
  /* Mobil: minimal luft mot kant — brukes symmetrisk i topbar, tilbake-linje og innhold */
  --up-mobile-pad-x: 0.625rem;
  --up-mobile-back-pad-y: 0.375rem;
}

.pp-col-filter-trigger-active {
  color: var(--pp-filter-chevron-active) !important;
}
.pp-col-filter-trigger-active .fa-chevron-down {
  color: var(--pp-filter-chevron-active);
  -webkit-text-stroke: 0.55px var(--pp-filter-chevron-stroke);
  paint-order: stroke fill;
}

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 items from wrapping on narrow but non-mobile widths */
.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;
}
.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.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);
}
.sidebar .sidebar-oppsett-toggle .sidebar-oppsett-trigger,
.offcanvas .sidebar-oppsett-toggle .sidebar-oppsett-trigger {
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.sidebar .sidebar-oppsett-toggle .sidebar-oppsett-trigger:hover,
.offcanvas .sidebar-oppsett-toggle .sidebar-oppsett-trigger:hover {
  color: inherit;
  opacity: 0.88;
}
.sidebar .sidebar-oppsett-toggle .sidebar-oppsett-trigger:focus-visible,
.offcanvas .sidebar-oppsett-toggle .sidebar-oppsett-trigger:focus-visible {
  outline: 2px solid var(--coral, #c95d4a);
  outline-offset: 2px;
}
.sidebar .sidebar-oppsett-toggle .sidebar-oppsett-chevron,
.offcanvas .sidebar-oppsett-toggle .sidebar-oppsett-chevron {
  font-size: 0.7em;
  transition: transform 0.2s ease;
}
.sidebar .sidebar-oppsett-toggle .sidebar-oppsett-trigger[aria-expanded="true"] .sidebar-oppsett-chevron,
.offcanvas .sidebar-oppsett-toggle .sidebar-oppsett-trigger[aria-expanded="true"] .sidebar-oppsett-chevron {
  transform: rotate(180deg);
}
.content-pane {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tabell-radhandlinger: Rediger/Slett alltid på én linje, samme bredde per rad */
.pp-list-row-actions-col {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
.pp-list-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: 100%;
}
.pp-list-row-actions__edit {
  flex-shrink: 0;
  min-width: 4.85rem;
}
.pp-list-row-actions__delete-form {
  display: inline-flex;
  margin: 0;
  flex-shrink: 0;
}
.pp-list-row-actions__delete {
  flex-shrink: 0;
  min-width: 5.5rem;
}
@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;
  }
}
.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 Undervisningsplan */
  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,
.topbar-custom .dropdown-toggle,
.topbar-custom .dropdown-toggle:hover,
.topbar-custom .dropdown-toggle:focus,
.topbar-custom .navbar-toggler,
.topbar-custom .navbar-toggler: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;
}
/* Standardmerke / tenant-logo i topbar – avrundet boks og større ikon */
.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 [data-bs-target="#offcanvasChat"]:hover i,
.topbar-custom [data-bs-target="#offcanvasNotifications"]:hover i {
  filter: invert(1);
  transition: filter 0.2s ease;
}
/* Chat/bjelle/offcanvas i topbar: fjern outline (:focus-visible teal), Bootstrap shadow og WebKit tap-ring */
nav.topbar-custom #chatDropdown:focus,
nav.topbar-custom #chatDropdown:focus-visible,
nav.topbar-custom #notificationDropdown:focus,
nav.topbar-custom #notificationDropdown:focus-visible,
nav.topbar-custom #chatIconMobile:focus,
nav.topbar-custom #chatIconMobile:focus-visible,
nav.topbar-custom #notificationIconMobile:focus,
nav.topbar-custom #notificationIconMobile:focus-visible,
nav.topbar-custom [data-bs-target="#offcanvasChat"]:focus,
nav.topbar-custom [data-bs-target="#offcanvasChat"]:focus-visible,
nav.topbar-custom [data-bs-target="#offcanvasNotifications"]:focus,
nav.topbar-custom [data-bs-target="#offcanvasNotifications"]:focus-visible,
nav.topbar-custom #chatDropdown.show,
nav.topbar-custom #notificationDropdown.show {
  outline: none !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
/* Teal badge – erstatter bg-info (lys blå) med prosjektets teal */
.badge.badge-teal {
  background-color: var(--teal);
  color: #fff;
}
/* Teal tekst (slate-blå) – f.eks. restbehov på praksisgrupper */
.text-teal {
  color: var(--teal) !important;
}
/* Rød badge på chat/bjelle – samme størrelse som Undervisningsplan */
.topbar-custom #chatDropdown .badge.bg-danger,
.topbar-custom #notificationDropdown .badge.bg-danger,
.topbar-custom [data-bs-target="#offcanvasChat"] .badge.bg-danger,
.topbar-custom [data-bs-target="#offcanvasNotifications"] .badge.bg-danger {
  font-size: 0.65em !important;
  min-width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  top: -2px !important;
  right: -2px !important;
  padding: 0 4px !important;
  box-shadow: 0 0 0 2px white;
}
.topbar-custom .dropdown-menu,
.topbar-custom .dropdown-menu .dropdown-item,
.topbar-custom .dropdown-menu .dropdown-item i,
.topbar-custom .dropdown-menu .dropdown-header,
.topbar-custom .dropdown-menu .dropdown-divider,
.topbar-custom .dropdown-menu .btn-link,
.topbar-custom .dropdown-menu .btn-link i,
.topbar-custom .dropdown-menu .form-control,
.topbar-custom .dropdown-menu .form-text,
.topbar-custom .dropdown-menu .text-muted {
  color: var(--slate) !important;
}
.topbar-custom .dropdown-menu .dropdown-header {
  color: var(--slate-muted) !important;
}
.topbar-custom .dropdown-menu .dropdown-item i {
  color: var(--teal) !important;
}
.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-item .badge {
  color: #fff !important;
}
.topbar-custom .dropdown-menu .btn-link.text-danger,
.topbar-custom .dropdown-menu .btn-link.text-danger i {
  color: #dc3545 !important;
}

/* Topbar låst på alle bredder; JS setter --up-topbar-offset = målt nav-høyde */
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 (admin/pko), ellers matcher ikke selektoren */
nav.topbar-custom ~ .container-fluid {
  padding-top: var(--up-topbar-offset, var(--topbar-offset-fallback));
}

/* Mobil: tilbake-linje rett under topbar */
.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;
}
.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,
  .sa-nav-bar ~ .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,
  body.push-prompt-visible .sa-nav-bar ~ .container-fluid {
    padding-top: calc(
      var(--up-topbar-offset, var(--topbar-offset-fallback))
      + var(--up-mobile-back-bar-height, 0px)
    );
  }
  body:has(.chat-fullscreen-mobile-wrapper.d-md-none) nav.topbar-custom ~ .container-fluid {
    padding-top: 0 !important;
  }
}

/* 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="tenantDropdown"].dropdown-menu {
    min-width: 320px;
    max-width: min(400px, calc(100vw - 40px));
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

/* Mobile: dokument-scroll (Android PWA) – speilet fra Undervisningsplan */
@media (max-width: 768px) {
  /*
   * Dokumentscroll: én scroll-root (body). Html + body som begge scroller gir ofte «låst» scroll
   * i Android Chrome. Fast html-høyde + touch-action: manipulation på alle barn blokkerer også 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;
  }
  body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) {
    overflow-y: hidden;
  }
  html.pp-standalone:not(:has(body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none)),
  html.pp-standalone:not(:has(body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none)) body {
    height: auto;
    overflow-y: auto;
  }
  button, .btn, .nav-link {
    touch-action: manipulation;
  }
  a.list-group-item-action {
    touch-action: pan-y;
  }
  button, input, textarea, select, a, label {
    touch-action: auto;
  }
  .content-pane .card:not(.chat-fullscreen-card) {
    overflow: visible;
  }
  #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,
  .content-pane .modal-body {
    touch-action: pan-y;
  }
  /*
   * 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%;
  }
  .study-year-switcher-card .study-year-btns .study-year-btn-group-scroll {
    touch-action: pan-x pan-y;
    overflow-y: visible;
  }
  .modal-dialog-scrollable .modal-body {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  input.form-control,
  textarea.form-control,
  select.form-select {
    font-size: 16px;
  }
  .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;
  }

  .content-pane {
    min-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)) - 4px);
  }
  .content-pane > .container-fluid {
    padding-left: max(0.25rem, env(safe-area-inset-left));
    padding-right: max(0.25rem, env(safe-area-inset-right));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    --bs-gutter-x: 0.5rem;
  }
  .content-pane .container-fluid .container,
  .content-pane .container-fluid .container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  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;
  }
}
/* 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;
  }
}

/* Mobil navigasjonsmeny: frost via ::before (Safari/iOS). Fallback = Bootstrap hvit uendret.
   data-bs-backdrop="false" slik at siden ligger bak panelet. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #offcanvasMenu.offcanvas {
    --bs-offcanvas-bg: transparent;
    background-color: transparent;
    border-right: none;
    box-shadow: none;
  }
  #offcanvasMenu.offcanvas::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(248, 246, 242, 0.62);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgba(168, 165, 156, 0.45);
    box-shadow: 4px 0 32px rgba(45, 55, 72, 0.12);
  }
  #offcanvasMenu .offcanvas-header,
  #offcanvasMenu .offcanvas-body {
    position: relative;
    z-index: 1;
    background: transparent;
  }
  #offcanvasMenu .list-group-item,
  #offcanvasMenu .list-group-item-action {
    background-color: transparent;
  }
  #offcanvasMenu .list-group-flush > .list-group-item {
    border-color: rgba(168, 165, 156, 0.22);
  }
  #offcanvasMenu .list-group-item.active {
    background-color: rgba(61, 90, 128, 0.12);
  }
  #offcanvasMenu .list-group-item-action:hover,
  #offcanvasMenu .list-group-item-action:focus {
    background-color: rgba(61, 90, 128, 0.07);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #offcanvasMenu.offcanvas::before {
    content: none;
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #offcanvasMenu.offcanvas {
    --bs-offcanvas-bg: var(--bs-body-bg);
    background-color: var(--bs-offcanvas-bg);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    box-shadow: var(--bs-offcanvas-box-shadow);
  }
  #offcanvasMenu.offcanvas::before {
    content: none;
    display: none;
  }
  #offcanvasMenu .offcanvas-header,
  #offcanvasMenu .offcanvas-body {
    background: transparent;
  }
  #offcanvasMenu .list-group-item,
  #offcanvasMenu .list-group-item-action {
    background-color: var(--bs-list-group-bg);
  }
}

/* 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));
}
/* Kolonnefilter-modal: samme radius og skygge som kort */
.pp-column-filter-modal-content {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-hover);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Push-prompt under topbar: skyv hovedinnhold litt ned */
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-mobile-wrapper.d-md-none .chat-fullscreen-card .card-header {
  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-thread-header-title {
  min-width: 0;
  line-height: 1.25;
}
.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-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-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 pp-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;
}
.chat-message-skeleton {
  height: 52px;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #e8ebef 0%, #f4f6f8 45%, #e8ebef 90%);
  background-size: 200% 100%;
  animation: pp-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 .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;
}
@media (max-width: 991.98px) {
  .chat-compose-bar .chat-compose-emoji.btn {
    display: none;
  }
}
@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;
  }
}

/* Egne chat-meldinger: ⋮-meny (desktop hover) / long-press (mobil) */
.chat-message-bubble--own .chat-message-actions {
  position: absolute;
  top: 2px;
  right: 2px;
  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-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-message-bubble--own .chat-message-actions {
    display: none !important;
  }
  .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--own.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-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;
}

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

/* Chat fullscreen layout on mobil / smal tablet (matcher 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 bakgrunnen vises som en 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));
  }
  .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.pp-standalone:has(body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none) {
    overflow: hidden;
    scrollbar-gutter: auto;
    overscroll-behavior: none;
    background: #fff;
  }
  html.pp-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.pp-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.pp-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .layout-row,
  html.pp-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .content-pane,
  html.pp-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .content-pane > .container-fluid,
  html.pp-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .chat-fullscreen-mobile-wrapper:not(.d-md-none),
  html.pp-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .chat-fullscreen-mobile-row,
  html.pp-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.pp-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none) .chat-fullscreen-mobile-row {
    --bs-gutter-x: 0;
  }
  html.pp-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.pp-standalone body.chat-page .chat-fullscreen-mobile-wrapper.d-md-none .chat-fullscreen-card {
    height: 100% !important;
    max-height: 100% !important;
  }
  html.pp-standalone body.chat-page:has(.chat-fullscreen-mobile-wrapper.d-md-none)::after {
    display: none;
  }
}

/* Bootstrap-overstyringer for å matche landingssiden – alle knapper avrundet */
.btn {
  border-radius: 9999px;
}
/* Konsistent luft mellom ikon og tekst i knapper */
.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;
}
@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.pp-btn-icon-round {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.125rem;
  height: 2.125rem;
  min-width: 2.125rem;
  min-height: 2.125rem;
  padding: 0 !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  line-height: 1;
}
.btn.pp-btn-icon-round > i.fa,
.btn.pp-btn-icon-round > i.fas,
.btn.pp-btn-icon-round > i.far,
.btn.pp-btn-icon-round > i.fal,
.btn.pp-btn-icon-round > i.fab,
.btn.pp-btn-icon-round > i.fa-solid,
.btn.pp-btn-icon-round > i.fa-regular,
.btn.pp-btn-icon-round > i.fa-brands {
  margin: 0 !important;
  line-height: 1;
  pointer-events: none;
}
/* Kolonnevelger: sirkel med ikon på mobil, pill med tekst fra sm */
.pp-col-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-col-picker-btn > i.fa,
.pp-col-picker-btn > i.fas {
  margin-right: 0 !important;
}
@media (max-width: 575.98px) {
  .pp-col-picker-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 !important;
    border-radius: 50% !important;
  }
}
/* Rekkefølge (pil opp/ned) i btn-group: sentrer FA — opphev global ikonmarg i smale halvdeler */
.btn-group > .btn.pe-field-move-up,
.btn-group > .btn.pe-field-move-down {
  display: inline-grid;
  place-items: center;
  line-height: 0;
}
.btn-group > .btn.pe-field-move-up > i.fa,
.btn-group > .btn.pe-field-move-up > i.fas,
.btn-group > .btn.pe-field-move-down > i.fa,
.btn-group > .btn.pe-field-move-down > i.fas,
.btn-group > .btn.pe-field-move-up > i.fa-solid,
.btn-group > .btn.pe-field-move-down > i.fa-solid {
  margin: 0 !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary {
  color: var(--btn-primary-text-color);
  background: var(--btn-primary-color);
  border: 1px solid color-mix(in srgb, var(--btn-primary-color) 70%, black);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-primary-color) 35%, transparent);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--btn-primary-color) 85%, black);
  border-color: color-mix(in srgb, var(--btn-primary-color) 80%, black);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--btn-primary-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å.
   Tvinger hvit tekst på badges så kontrasten blir god selv om templates
   arver Bootstraps default `text-dark` sammen med bg-info. */
.badge.bg-primary, .bg-primary { background-color: var(--teal) !important; }
.badge.bg-info, .bg-info { background-color: var(--teal) !important; }
.badge.bg-primary, .badge.bg-info { color: #fff !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;
}
/* Student: blågrå elev-blå – grønn reserveres til status (bestått, signert osv.) */
.badge.bg-role-student, .bg-role-student {
  background-color: var(--role-student) !important;
  color: #fff !important;
}
/* Praksislærer: lys gul – mørk tekst for lesbarhet */
.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);
}
/* Praksisansvarlig (PP): varm brun – skilt fra coral (innsikt/varsler) og status-rød */
.badge.bg-role-praksisansvarlig, .bg-role-praksisansvarlig {
  background-color: var(--role-praksisansvarlig) !important;
  color: #fff !important;
}
.badge.insight-bg-teal.text-white,
.badge.insight-bg-role-faglaerer.text-white,
.badge.insight-bg-role-student.text-white {
  color: #fff !important;
}
.badge.insight-bg-role-praksislaerer.text-dark {
  color: var(--slate) !important;
}
.badge.insight-bg-teal-light.text-dark {
  color: var(--slate) !important;
}
/* badge.bg-warning: mørk tekst på gul bakgrunn for bedre kontrast (Restbehov, Ikke tildelt, osv.) */
.badge.bg-warning { color: #212529 !important; }
/* btn-group: behold avrundede hjørner på yttersidene, slik at knappene går i ett */
.btn-group .btn {
  border-radius: 0;
}
.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) – ellers får form .btn høyre avrunding */
.btn-group > .btn:last-of-type:last-child,
.btn-group > label.btn:last-of-type:last-child {
  border-radius: 0 9999px 9999px 0;
}
/* Når Slett-knapp er inne i form som siste barn: knappen skal ha høyre avrunding */
.btn-group > form:last-child .btn {
  border-radius: 0 9999px 9999px 0;
}
/* Enkelt knapp/valg: rund på begge sider (f.eks. studieårvelger med bare ett studieår) */
.btn-group .btn:only-of-type,
.btn-group label.btn:only-of-type,
.btn-group > label.btn:first-of-type:last-of-type {
  border-radius: 9999px !important;
}
/* Studieår-filter: Historiske + år-knapper som én sammenhengende pill */
.study-year-switcher-card {
  overflow: visible;
}
.study-year-switcher-card > .card-body {
  overflow: visible;
}
/* Med historikk: like brede segmenter (Historiske + hvert studieår) – desktop og mobil */
.study-year-switcher-card.study-year-switcher-has-historical .study-year-btns .study-year-btn-group-scroll {
  width: 100%;
}
.study-year-switcher-card.study-year-switcher-has-historical .study-year-btns .study-year-btn-group-scroll > .study-year-switcher-group {
  display: flex !important;
  width: 100% !important;
  min-width: 100% !important;
  flex-wrap: nowrap !important;
}
.study-year-switcher-card.study-year-switcher-has-historical .study-year-switcher-group > .btn-group:first-child,
.study-year-switcher-card.study-year-switcher-has-historical .study-year-switcher-group > label.btn {
  flex: 1 1 0 !important;
  min-width: 0;
  display: flex !important;
  align-items: stretch;
}
.study-year-switcher-card.study-year-switcher-has-historical .study-year-switcher-group > label.btn {
  justify-content: center;
  align-items: center;
}
.study-year-switcher-card.study-year-switcher-has-historical .study-year-switcher-group > .btn-group:first-child .study-year-historical-toggle {
  flex: 1 1 auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Mellomstor skjerm (lg): historikk-segment kun ikon — unngå like brede segmenter med «Historiske»-tekst */
@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;
  }
}
.study-year-switcher-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 {
  border-radius: 0 !important;
}
.study-year-switcher-group:has(> .btn-group:first-child) > label.btn:last-of-type {
  border-radius: 0 9999px 9999px 0 !important;
}
/* Nedtrekk historiske studieår: høyrekant flusher med knappen, henger visuelt sammen */
.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) {
  /* Desktop: visuelt koblet nedtrekk under historikk-knappen (ikke flytende popper) */
  .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 > .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) {
  /* Mobil: horisontal scroll klipper statisk dropdown – la Popper (fixed) plassere menyen */
  .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;
  }
}
/* Nedtrekk historiske studieår: samme teal/hvit som valgte år-knapper */
.study-year-historical-menu .dropdown-item {
  color: var(--slate);
  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;
}
.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);
}
.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 i tabell-lister (arena, lærer, osv.) – ikke chat, sidebar eller brødtekst */
.content-pane table tbody a:not(.btn) {
  color: var(--teal);
  text-decoration: none;
}
.content-pane table tbody a:not(.btn):hover,
.content-pane table tbody a:not(.btn):focus-visible {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* Kolonnefilter i tabellhode: nøktern hover/klikk – ikke Bootstrap-blå */
.content-pane table thead .dropdown-menu {
  font-size: 1rem;
  border-color: var(--sand);
  box-shadow: var(--card-shadow);
}
.content-pane table thead .dropdown-menu .dropdown-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-muted);
}
.content-pane table thead .dropdown-menu .dropdown-item {
  color: var(--slate) !important;
  font-size: 1rem !important;
  padding: 0.25rem 1rem !important;
}
.content-pane table thead .dropdown-menu .dropdown-item:hover,
.content-pane table thead .dropdown-menu .dropdown-item:focus,
.content-pane table thead .dropdown-menu .dropdown-item:focus-visible {
  background-color: var(--cream-warm) !important;
  color: var(--slate) !important;
}
.content-pane table thead .dropdown-menu .dropdown-item:active,
.content-pane table thead .dropdown-menu .dropdown-item.active {
  background-color: rgba(61, 90, 128, 0.1) !important;
  color: var(--teal-dark) !important;
}
/* 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-fullscreen-mobile-row > [class*="col-"] {
    height: 100%;
  }
  .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-split-list-column {
    flex: 0 0 20rem;
    width: 20rem;
    max-width: 20rem;
    min-width: 20rem;
  }
  .chat-fullscreen-mobile-wrapper:not(.d-md-none) .chat-split-thread-column {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .chat-split-thread-column.pp-chat-thread-swapping {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  #main-content.pp-main-swapping > .container-fluid {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  /* Partial nav: tynn progress under topbar (sidebar/filter-swap) */
  .pp-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;
    background: var(--cream-warm, #f8f6f2);
    box-shadow: inset 0 -1px 0 var(--sand, #ebe7e0);
  }
  body:not(:has(nav.topbar-custom)):not(:has(.sa-nav-bar)) .pp-nav-progress {
    top: 0;
  }
  .pp-nav-progress.pp-nav-progress--active {
    opacity: 1;
  }
  .pp-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: pp-nav-progress-indeterminate 1s ease-in-out infinite;
  }
  @keyframes pp-nav-progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
  }
  html.pp-full-nav-pending .pp-nav-progress {
    transition: none;
  }

  .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-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-thread-item .chat-thread-title {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
  min-width: 0;
}
.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: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
}
.chat-thread-item__top .chat-thread-title {
  min-width: 0;
}
.chat-thread-title-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
}
.chat-thread-item__time {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  text-align: right;
}
.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 (Font Awesome + btn-padding) */
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;
}

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

/* PWA (Legg til Hjem-skjerm): splash inspirert av merkevare – fullskjerm, ikke telefon-mockup */
.pp-pwa-splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #faf9f6;
  overflow: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
html.pp-standalone .pp-pwa-splash {
  display: none;
}
html.pp-standalone .pp-pwa-splash.pp-pwa-splash--show {
  display: flex;
}
/* Senere full lasting i samme økt: kun ikon + progress (samme cream som body under) */
html.pp-standalone.pp-pwa-splash-followup .pp-pwa-splash {
  background: transparent;
}
html.pp-standalone.pp-pwa-splash-followup .pp-pwa-splash::before,
html.pp-standalone.pp-pwa-splash-followup .pp-pwa-splash::after {
  display: none;
}
.pp-pwa-splash::before,
.pp-pwa-splash::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.pp-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%;
}
.pp-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%;
}
.pp-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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pp-pwa-splash__icon {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 4px 24px rgba(45, 55, 72, 0.08);
}
.pp-pwa-splash__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #2c2c2a;
}
.pp-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;
}
.pp-pwa-splash__loader-fill {
  display: block;
  height: 100%;
  width: 70%;
  background: var(--coral);
  border-radius: 2px;
  transform-origin: left center;
  animation: pp-pwa-splash-load 1.05s ease-out forwards;
}
@keyframes pp-pwa-splash-load {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.pp-pwa-splash.pp-pwa-splash--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Universell utforming: Deaktiver animasjoner for brukere som foretrekker redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
  .pp-pwa-splash__loader-fill {
    animation: none;
    transform: scaleX(1);
  }
  .pp-pwa-splash {
    transition: none;
  }
  .card {
    transition: none !important;
  }
  .btn-primary:hover,
  .btn:hover {
    transform: none !important;
  }
}

/* Bilde-zoom-modal (chat) */
#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; }