/*
 * 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;
  --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);
  /* Kolonne-filter (tabell): aktiv pil – sterk blå + tykkere strek */
  --pp-filter-chevron-active: #084298;
  --pp-filter-chevron-stroke: #052c65;
}

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

/* 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: full viewport, touch, content-pane min-height */
@media (max-width: 768px) {
  html {
    height: 100%;
    height: 100dvh;
    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; }
  button, input, textarea, select, a, label { touch-action: auto; }
  .content-pane {
    min-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)) - 4px);
  }
  /* Mobil: maksimal bredde – minimal sidepadding */
  .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;
  }
  .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 — ikke nav.topbar-custom > .container-fluid
   * (unngår at logo/ikoner mister horisontal padding og «hopper» 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;
  }
}
/* 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;
  }
}

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

/* 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 mobile */
@media (max-width: 576px) {
  /* 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;
  }
  .chat-fullscreen-mobile-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* Høyde = viewport minus navbar + safe-area for notch/Dynamic Island */
    height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)));
    max-height: calc(100dvh - var(--up-topbar-offset, var(--topbar-offset-fallback)));
    overflow: hidden;
  }
  .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;
    /* Ekstra padding på bunnen for iPhone med buede hjørner og home indicator */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* 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-knapper: fast kvadrat + sirkel (opphever global pill-radius og ikon-margin) */
.btn.btn-icon-only,
.btn.pp-btn-icon-round {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  line-height: 1;
}
.btn.btn-icon-only > i.fa,
.btn.btn-icon-only > i.fas,
.btn.btn-icon-only > i.far,
.btn.btn-icon-only > i.fal,
.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,
.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; }
/* 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-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: samme teal/hvit som valgte år-knapper */
.study-year-historical-menu .dropdown-item {
  color: var(--slate);
}
.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 (lenker, ikke knapper): coral. Knapper behold sine farger. */
.content-pane a:not(.btn) {
  color: var(--coral);
}
.content-pane a:not(.btn):hover {
  color: #a84a3a;
}
/* Kolonnefilter i tabellhode: filterhandlinger (ikke navigasjonslenker), samme størrelse som f.eks. praksislærere */
.content-pane table thead .dropdown-menu {
  font-size: 1rem;
}
.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,
.content-pane table thead .dropdown-menu .dropdown-item:hover,
.content-pane table thead .dropdown-menu .dropdown-item:focus {
  color: var(--slate) !important;
  font-size: 1rem !important;
  padding: 0.25rem 1rem !important;
}
/* 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 (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 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;
}

/* Chat-navigasjon: umiddelbar tilbakemelding før full sideinnlasting */
#main-content { position: relative; }
@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 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: flex;
}
.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;
  }
  body.up-chat-nav-pending #main-content::before {
    animation: none !important;
    background: rgba(250, 249, 246, 0.92) !important;
  }
}

/* Bilde-zoom-modal (chat) */
#imageZoomModal .modal-dialog { max-width: 95vw; }
#imageZoomModal img { max-width: 100%; max-height: 90vh; object-fit: contain; }
img[data-zoom-src] { cursor: pointer; }