/* === BUNDLED CSS - Generert 2026-04-19 22:40 === */

/* ===== cssindex.css ===== */
/* ==========================================================================
   AI MEDICAL NOTES - COMPLETE CSS v7
   Comprehensive styling for medical note-taking application
   CSP-compliant, responsive, modern design
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL RESET, VARIABLES & BASE
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
}

:root {
  /* Primary Colors */
  --primary: #1976d2;
  --primary-light: #e3f2fd;
  --primary-dark: #0d47a1;
  --secondary: #00897b;
  
  /* Text Colors */
  --text-primary: #212121;
  --text-secondary: #424242;
  --text-muted: #757575;
  --text-on-primary: #ffffff;
  
  /* Border Colors */
  --border-light: #e0e0e0;
  --border-medium: #bdbdbd;
  
  /* Background Colors */
  --bg-page: #f4f6f8;
  --bg-light: #fafafa;
  --bg-white: #ffffff;
  --bg-hover: #f0f0f0;
  --bg-overlay: rgba(33, 33, 33, 0.65);
  
  /* Accent Colors */
  --accent-error: #d32f2f;
  --accent-success: #2e7d32;
  --accent-warning: #ff8f00;
  
  /* Status Colors */
  --status-draft-bg: #fffde7;
  --status-draft-text: #5d4037;
  --status-recording-bg: #ffebee;
  --status-recording-text: #b71c1c;
  --status-processing-bg: #e0f7fa;
  --status-processing-text: #006064;
  --status-completed-bg: #e8f5e9;
  --status-completed-text: #1b5e20;
  
  /* Shadows */
  --shadow-soft: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-medium: 0 4px 10px rgba(0,0,0,0.12);
  --shadow-strong: 0 8px 20px rgba(0,0,0,0.15);
  
  /* Border Radius */
  --main-border-radius: 6px;
  --modal-border-radius: 12px;
  
  /* Layout */
  --header-height: 68px;
  --sidebar-width: 340px;

  color-scheme: light;
}

/* ==========================================================================
   DARK MODE — TEMA SYSTEM
   Aktiveres når html[data-theme="dark"] settes av js/theme-service.js.
   Default er light (ingen attributt). Backend-innstilling kontrollerer.
   Overstyrer alle token-namespaces (main, agent, fritekst, js, video, lm).
   ========================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  /* === Main namespace === */
  --primary: #4a9eff;
  --primary-light: #1e3a5f;
  --primary-dark: #82b8ff;
  --secondary: #4db6ac;

  --text-primary: #e8eaed;
  --text-secondary: #c4c7cb;
  --text-muted: #9aa0a6;
  --text-on-primary: #ffffff;

  --border-light: #2d333b;
  --border-medium: #424a52;

  --bg-page: #0d1117;
  --bg-light: #161b22;
  --bg-white: #1c2128;
  --bg-hover: #262c36;
  --bg-overlay: rgba(0, 0, 0, 0.75);

  --accent-error: #f85149;
  --accent-success: #56d364;
  --accent-warning: #d29922;

  --status-draft-bg: #2a2410;
  --status-draft-text: #fcd34d;
  --status-recording-bg: #2d1818;
  --status-recording-text: #fca5a5;
  --status-processing-bg: #0e2730;
  --status-processing-text: #67e8f9;
  --status-completed-bg: #0f2c1a;
  --status-completed-text: #86efac;

  --shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.6);

  /* === Agent namespace (clinical-assistant) === */
  --agent-primary: #4a9eff;
  --agent-primary-light: #82b8ff;
  --agent-primary-dark: #1e3a5f;
  --agent-surface: #1c2128;
  --agent-surface-variant: #21262d;
  --agent-surface-dim: #161b22;
  --agent-border: #30363d;
  --agent-border-light: #21262d;
  --agent-text-primary: #e8eaed;
  --agent-text-secondary: #c4c7cb;
  --agent-text-tertiary: #9aa0a6;
  --agent-accent: #4a9eff;
  --agent-accent-light: #1e3a5f;

  /* Fritekst-tokens er definert på .fritekst-modal-container (ikke :root) i
     fritekst.css. De overstyres derfor i en separat blokk lenger ned i
     denne filen for å treffe riktig CSS-scope. */

  /* === Journal Summary (js-) namespace === */
  --js-primary: #94a3b8;
  --js-primary-light: #cbd5e1;
  --js-primary-dark: #64748b;
  --js-primary-darker: #475569;
  --js-accent: #60a5fa;
  --js-accent-light: #93c5fd;
  --js-accent-dark: #3b82f6;
  --js-success: #34d399;
  --js-success-light: #1f3d2f;
  --js-warning: #fbbf24;
  --js-warning-light: #3d2f0f;
  --js-error: #f87171;
  --js-error-light: #3d1818;
  --js-bg-page: #0d1117;
  --js-bg-card: #1c2128;
  --js-bg-elevated: #21262d;
  --js-border: #2d333b;
  --js-border-light: #21262d;
  --js-text-primary: #e8eaed;
  --js-text-secondary: #c4c7cb;
  --js-text-muted: #9aa0a6;
  --js-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --js-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);

  /* === Video namespace === */
  --video-primary: #4a9eff;
  --video-primary-dark: #82b8ff;
  --video-primary-darker: #b3d4ff;
  --video-success: #56d364;
  --video-success-dark: #34d399;
  --video-success-light: #86efac;
  --video-warning: #fbbf24;
  --video-warning-dark: #f59e0b;
  --video-danger: #f87171;
  --video-danger-dark: #f85149;
  --video-bg-gradient: linear-gradient(135deg, #0d1117 0%, #1c2128 100%);
  --video-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --video-card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* === Legemiddel (lm-) namespace === */
  --lm-identical: #0f2c1a;
  --lm-identical-border: #1f4d2e;
  --lm-identical-text: #86efac;
  --lm-identical-icon: #56d364;
  --lm-added: #0e1f3a;
  --lm-added-border: #1e3a5f;
  --lm-added-text: #93c5fd;
  --lm-added-icon: #4a9eff;
  --lm-removed: #2d1818;
  --lm-removed-border: #4d2828;
  --lm-removed-text: #fca5a5;
  --lm-removed-icon: #f87171;
  --lm-changed: #2d2410;
  --lm-changed-border: #4d3e1c;
  --lm-changed-text: #fbbf24;
  --lm-changed-icon: #fcd34d;
}

/* === Fritekst-tokens: scopet til .fritekst-modal-container ===
   Fritekst.css definerer alle --fritekst-*-tokens på selve container-elementet
   istedenfor :root. CSS-variabler er scopet, så :root-overstyringer treffer
   ikke. Vi må overstyre på samme element-nivå. */
html[data-theme="dark"] .fritekst-modal-container {
  --fritekst-primary: #4a9eff;
  --fritekst-primary-light: #1e3a5f;
  --fritekst-primary-dark: #82b8ff;
  --fritekst-secondary: #4db6ac;
  --fritekst-accent-success: #56d364;
  --fritekst-accent-warning: #fbbf24;
  --fritekst-accent-error: #f85149;
  --fritekst-accent-info: #94a3b8;
  --fritekst-text-primary: #e8eaed;
  --fritekst-text-secondary: #c4c7cb;
  --fritekst-text-muted: #9aa0a6;
  --fritekst-text-on-primary: #ffffff;
  --fritekst-border-light: #2d333b;
  --fritekst-border-medium: #424a52;
  --fritekst-bg-page: #0d1117;
  --fritekst-bg-light: #161b22;
  --fritekst-bg-white: #1c2128;
  --fritekst-bg-overlay: rgba(0, 0, 0, 0.75);
  --fritekst-chat-area-bg: #0d1117;
  --fritekst-user-bubble-bg: linear-gradient(135deg, #4a9eff, #1e40af);
  --fritekst-user-bubble-text: #ffffff;
  --fritekst-assistant-bubble-bg: #1c2128;
  --fritekst-assistant-bubble-text: #e8eaed;
  --fritekst-system-message-text: #9aa0a6;
  --fritekst-shadow-soft: 0 2px 4px rgba(0,0,0,0.4);
  --fritekst-shadow-medium: 0 4px 10px rgba(0,0,0,0.5);
  --fritekst-shadow-strong: 0 8px 25px rgba(0,0,0,0.6);
}

/* Mykt bytte mellom temaene — kun farge-egenskaper, ingen layout-egenskaper. */
html.theme-transition,
html.theme-transition body,
html.theme-transition *:not(.material-icons):not(svg):not(svg *) {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease,
              fill 0.25s ease, stroke 0.25s ease !important;
}

/* ==========================================================================
   2. UTILITY & STATE CLASSES
   ========================================================================== */

.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.is-active { /* Base active state */ }

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-danger { color: var(--accent-error) !important; }
.text-success { color: var(--accent-success) !important; }
.text-warning { color: var(--accent-warning) !important; }
.text-small { font-size: 0.875rem !important; }
.text-center { text-align: center !important; }

.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mt-1 { margin-top: 0.5rem !important; }
.full-width { width: 100% !important; }

/* ==========================================================================
   3. LAYOUT & STRUCTURE
   ========================================================================== */

/* Header */
header {
  background-color: var(--primary);
  color: var(--text-on-primary);
  padding: 0.8rem 1.5rem;
  box-shadow: var(--shadow-medium);
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-height);
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

.header-left h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-button {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: inherit;
  border-radius: var(--main-border-radius);
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.header-button:hover {
  background-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.mobile-header-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: inherit;
  border-radius: var(--main-border-radius);
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-header-btn:hover {
  background-color: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}

.mobile-header-btn .material-icons {
  font-size: 1.1rem;
}

.icon-button {
  background: none;
  border: none;
  color: inherit;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  width: 40px;
  height: 40px;
}

.icon-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.15);
}

.icon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-button.status-active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* User Info */
.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1rem;
  flex-shrink: 0;
}

/* User menu dropdown */
.user-menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  transition: background 0.2s;
  font-size: 0.85rem;
}
.user-menu-trigger:hover {
  background: rgba(255,255,255,0.15);
}
.user-menu-arrow {
  font-size: 1.2rem !important;
  opacity: 0.7;
  transition: transform 0.2s;
}
.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-white);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 9999;
  overflow: hidden;
  animation: userMenuSlide 0.15s ease-out;
}
.user-menu-dropdown.is-open {
  display: block;
}
@keyframes userMenuSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-menu-email {
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  word-break: break-all;
}
.user-menu-divider {
  margin: 0;
  border: none;
  border-top: 1px solid #e2e8f0;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: #334155;
  transition: background 0.15s;
}
.user-menu-item:hover {
  background: var(--bg-hover);
}
.user-menu-item .material-icons {
  font-size: 1.15rem;
  color: var(--text-muted);
}
.user-menu-logout {
  color: #dc2626;
}
.user-menu-logout .material-icons {
  color: #dc2626;
}
.user-menu-logout:hover {
  background: #fef2f2;
}
.user-menu-facebook {
  text-decoration: none;
  color: #334155;
}
.user-menu-facebook .material-icons {
  color: #1877f2;
}

/* Main Container */
.container {
  display: flex;
  height: calc(100vh - var(--header-height));
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  /* Grå duk så de hvite konsultasjonskortene leses som kort (designløft 0408).
     Dark theme overstyrer .sidebar-bakgrunnen i dark-blokken lenger ned. */
  background: #f7f8fa;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-header {
  margin-bottom: 1rem;
}

.primary-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar-btn {
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: var(--shadow-soft);
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--main-border-radius);
  border: 1px solid transparent;
  background: var(--bg-white);
  color: var(--text-primary);
}

.sidebar-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.sidebar-btn.new-consult {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary-dark);
}

.sidebar-btn.new-consult:hover:not(:disabled) {
  background: var(--primary-dark);
}

.sidebar-btn.browse-instructions {
  background: var(--secondary);
  color: var(--text-on-primary);
  border-color: #00695c;
}

.sidebar-btn.browse-instructions:hover:not(:disabled) {
  background: #00695c;
}

.sidebar-divider {
  height: 1px;
  background-color: var(--border-light);
  margin: 1rem 0;
}

/* Main Content Area */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  /* Tydeligere duk enn --bg-light (#fafafa var usynlig mot den hvite boksen).
     Dark theme får egen overstyring ved verktøylinje-reglene. */
  background: #f2f4f7;
  overflow-y: auto;
}

/* ==========================================================================
   4. CONSULTATION LIST
   ========================================================================== */

.consultation-filter {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.filter-btn {
  flex: 1;
  padding: 0.5rem;
  border-radius: 20px;
  background: var(--bg-white);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  font-size: 0.85rem;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background-color: var(--primary-light);
}

.filter-btn.is-active {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
  font-weight: 700;
}

.consultation-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.consultation-item {
  padding: 0.8rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: var(--main-border-radius);
  background: var(--bg-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.2s;
  /* Kanten må stå FØR border-left slik at 5px-statusmarkøren beholder bredden */
  border: 1px solid var(--border-light);
  border-left: 5px solid transparent;
  position: relative;
}

.consultation-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-medium);
}

.consultation-item.is-active {
  background: var(--primary-light);
  border-left-color: var(--primary);
}

.consultation-item-content {
  padding-right: 2rem; /* Space for delete button */
}

.consultation-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.consultation-name {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.content-indicator {
  font-size: 1rem;
  color: var(--primary);
}

.consultation-status {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.status-draft {
  background: var(--status-draft-bg);
  color: var(--status-draft-text);
}

.status-recording {
  background: var(--status-recording-bg);
  color: var(--status-recording-text);
}

.status-processing {
  background: var(--status-processing-bg);
  color: var(--status-processing-text);
}

.status-completed {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

.patient-info {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.25rem 0;
  font-style: italic;
}

.consultation-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.consultation-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.consultation-instruction {
  font-size: 0.75rem;
  color: var(--secondary);
  background: rgba(0, 137, 123, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
}

.delete-consultation-icon-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  padding: 0.25rem;
  border-radius: 4px;
  z-index: 1;
}

.consultation-item:hover .delete-consultation-icon-btn {
  opacity: 1;
}

.delete-consultation-icon-btn:hover {
  color: var(--accent-error);
  background: rgba(211, 47, 47, 0.1);
}

/* Consultation List States */
.consultation-list-loading,
.consultation-list-empty-filter,
.consultation-list-locked,
.consultation-list-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  min-height: 200px;
}

.loading-state-container,
.empty-filter-container,
.locked-state-container,
.error-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.locked-icon,
.empty-icon,
.error-icon {
  font-size: 3rem;
  color: var(--text-muted);
}

.locked-icon {
  color: var(--accent-warning);
}

.error-icon {
  color: var(--accent-error);
}

/* ==========================================================================
   5. MAIN SETTINGS PANEL
   ========================================================================== */

.settings-main {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

.setting-group {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.setting-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  min-height: 24px;
}

.setting-header {
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;
}

.header-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  height: 24px;
}

.small-icon-btn {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  padding: 0.4rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  width: 32px;
  height: 24px;
  flex-shrink: 0;
}

.small-icon-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.small-icon-btn .material-icons {
  font-size: 1rem;
}

/* Instruction Selector */
.instruction-selector {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  height: 45px;
}

.instruction-selector .input-like {
  flex: 1;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.instruction-selector .input-like:hover {
  border-color: var(--primary);
  background-color: var(--bg-light);
}

.dropdown-icon-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 90px; /* OPPDATERT: Økt fra 45px til 90px for å gi plass til tekst */
  height: 45px;
  flex-shrink: 0;
}

.dropdown-icon-btn:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-1px);
}

.dropdown-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dropdown-icon-btn .material-icons {
  font-size: 1.1rem; /* OPPDATERT: Redusert fra 1.2rem for bedre balanse med tekst */
}

/* Input Fields */
.patient-info-input,
.additional-text-input {
  min-height: 80px;
  max-height: 120px;
  resize: vertical;
  flex: 1;
}

.input-like {
  min-height: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  flex: 1;
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  font-size: 0.95rem;
}

/* Styling når ingen notatmal er valgt */
#instructionNameDisplay.no-instruction-selected {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
  border: 2px dashed #f59e0b;
  color: #92400e;
  font-weight: 500;
  position: relative;
}

#instructionNameDisplay.no-instruction-selected::before {
  content: '⚠';
  margin-right: 8px;
  font-size: 1rem;
}

#instructionNameDisplay.no-instruction-selected:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fef08a 100%);
  border-color: #d97706;
  cursor: pointer;
}

/* Når mal ER valgt - grønn indikator */
#instructionNameDisplay.instruction-selected {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
  border: 1px solid #10b981;
  color: #065f46;
  font-weight: 500;
}

#instructionNameDisplay.instruction-selected::before {
  content: '✓';
  margin-right: 8px;
  color: #10b981;
}

/* ==========================================================================
   6. CONTROLS & BUTTONS
   ========================================================================== */

.controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.controls .button {
  flex-shrink: 0;
}

.controls-spacer {
  flex-grow: 1;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Button Styles */
.button {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid transparent;
  padding: 0.6rem 1rem;
  border-radius: var(--main-border-radius);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

.button:hover:not(:disabled) {
  filter: brightness(110%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.button:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
  transform: none !important;
}

.button.secondary {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.button.secondary:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.button.primary {
  background: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
}

.button.danger {
  background-color: var(--accent-error);
  color: var(--text-on-primary);
}

.button.danger:hover:not(:disabled) {
  background-color: #c62828;
}

.button.small {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.button.record {
  background: var(--accent-error);
}

.button.pause {
  background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
  color: var(--text-primary);
  border: 1px solid #ff8f00;
}
.button.record:disabled {
  background: var(--accent-error) !important; /* Behold original rød */
  opacity: 0.4 !important; /* Matt men fortsatt rød */
  cursor: not-allowed !important;
  pointer-events: none;
}
.button.pause:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff8f00 0%, #f57c00 100%);
}

.button.pause:disabled {
  background: #ffd54f;
  opacity: 0.6;
}

.button.dictate-button {
  background-color: var(--accent-error);
  color: var(--text-on-primary);
}

.button.dictate-button:hover:not(:disabled) {
  background-color: #b71c1c;
}

.button.is-active,
.dictate-button.is-active {
  background-color: var(--accent-error) !important;
  animation: pulse-red 1.5s infinite;
}

/* Action Buttons in Response Header */
.response-header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
  padding: 4px 0;
}

.response-header-actions .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  height: 34px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 8px;
  /* Hevet tilstand: hvit chip mot stripen. Disabled blir flat «ghost» under. */
  border: 1px solid #cfd9e4;
  background: var(--bg-white);
  color: #24384d;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  font-family: inherit;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.response-header-actions .action-btn:hover:not(:disabled) {
  background: #dfe8f3;
  border-color: #c5d1e0;
  color: #1d2d3f;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1);
  transform: translateY(-1px);
}

.response-header-actions .action-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  background: #d5dfed;
}

.response-header-actions .action-btn:disabled {
  /* Flat «ghost» i stedet for 40 % gjennomsiktig: sonen leses som «venter på
     notatet», ikke som halvdøde knapper. */
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
  color: #a7b4c2;
}

.response-header-actions .action-btn:disabled .material-icons {
  color: #a7b4c2;
  opacity: 0.6;
}

.response-header-actions .action-btn .material-icons {
  font-size: 1rem;
  margin-right: 0;
  opacity: 0.55;
  color: #5a7394;
  transition: opacity 0.15s ease;
}

.response-header-actions .action-btn:hover:not(:disabled) .material-icons {
  opacity: 1;
}

.response-header-actions .action-btn.primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  font-weight: 600;
}

.response-header-actions .action-btn.primary .material-icons {
  opacity: 0.9;
  color: var(--text-on-primary);
}

.response-header-actions .action-btn.primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-on-primary);
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
}

.response-header-actions .action-btn.primary:active:not(:disabled) {
  background: #1565c0;
}

/* «Utvid»-toggle: haken skjult i av-tilstand; på-tilstand får tint + hake + inntrykt look */
.response-header-actions .action-btn-toggle .utvid-check {
  display: none;
}
.response-header-actions .action-btn-toggle.is-on {
  background: rgba(74, 158, 255, 0.14);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 600;
  box-shadow: inset 0 1px 3px rgba(25, 118, 210, 0.18);
}
.response-header-actions .action-btn-toggle.is-on .material-icons {
  color: var(--primary);
  opacity: 1;
}
.response-header-actions .action-btn-toggle.is-on .utvid-check {
  display: inline-flex;
}

/* Blå Kopier KUN når den kan brukes — ghost ellers. Blåfargen blir dermed
   selve signalet «notatet er klart til å kopieres». */
.response-header-actions .action-btn.primary:disabled {
  background: transparent;
  border-color: transparent;
  color: #a7b4c2;
  font-weight: 500;
}

.response-header-actions .action-btn.primary:disabled .material-icons {
  color: #a7b4c2;
  opacity: 0.6;
}

/* Soneskille og høyre-dytt i verktøylinja (designløft 0408) */
.action-btn-divider {
  width: 1px;
  height: 24px;
  background: #dde4ec;
  margin: 0 8px;
  flex-shrink: 0;
  align-self: center;
}

.action-btn-spacer {
  /* Var flex:1 (skjøv Kopier helt til høyre) — men når raden brøt, laget den
     et stort hull midt på rad to. Nå et fast lite mellomrom, så knappene
     alltid kommer etter hverandre uansett vindusbredde (14.08.2026). */
  flex: 0 0 8px;
}

/* Dark theme-paralleller for designløftet: duk, stripe og chip-tilstander */
html[data-theme="dark"] .main {
  background: var(--bg-light);
}

html[data-theme="dark"] .response-header {
  background: var(--bg-hover);
  border-bottom-color: var(--border-light);
}

html[data-theme="dark"] .response-header-actions .action-btn {
  border-color: var(--border-light);
  color: var(--text-primary);
}

html[data-theme="dark"] .response-header-actions .action-btn:disabled,
html[data-theme="dark"] .response-header-actions .action-btn.primary:disabled {
  background: transparent;
  border-color: transparent;
  color: #767f89;
}

html[data-theme="dark"] .action-btn-divider {
  background: var(--border-light);
}

/* ==========================================================================
   7. STATUS DISPLAYS
   ========================================================================== */

.status-display {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  background-color: var(--bg-hover);
  border: 1px solid var(--border-light);
}

.status-display .status-icon {
  font-size: 1rem;
}

#dictateStatusInline {
  background-color: var(--status-recording-bg);
  color: var(--status-recording-text);
  border-color: #d32f2f;
}

.recording-indicator {
  width: 10px;
  height: 10px;
  background: var(--accent-error);
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

@keyframes pulse-red {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ==========================================================================
   8. LANGUAGE SELECTOR
   ========================================================================== */

.language-selector-container {
  display: flex;
  align-items: center;
}

.styled-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.8rem;
  background-color: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s;
  box-shadow: var(--shadow-soft);
}

.styled-select-wrapper:hover {
  border-color: var(--primary);
}

.styled-select-wrapper .select-prefix-icon {
  color: var(--text-secondary);
  margin-right: 0.5rem;
}

.styled-select-text-display {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.25rem;
}

select.styled-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ==========================================================================
   9. FORM ELEMENTS
   ========================================================================== */

.input, textarea, select {
  width: 100%;
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  padding: 0.75rem;
  font-size: 0.95rem;
  background-color: var(--bg-white);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.input:disabled, textarea:disabled, select:disabled {
  background-color: var(--bg-light);
  color: var(--text-muted);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-help {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.25rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* PIN Input */
.pin-input-wrapper {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}

.pin-input {
  width: 150px;
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.5em;
  font-family: monospace;
}

/* ==========================================================================
   10. DROPDOWNS
   ========================================================================== */

.instruction-dropdown-list,
.dictate-instructions-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  box-shadow: var(--shadow-medium);
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  list-style: none;
  padding: 0;
  margin: 0;
}

.instruction-dropdown-list.is-visible,
.dictate-instructions-dropdown-list.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.instruction-dropdown-header,
.dictate-instructions-dropdown-header {
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--bg-light);
}

.instruction-dropdown-item,
.dictate-instructions-dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.instruction-dropdown-item:hover,
.dictate-instructions-dropdown-item:hover {
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

/* Pinnet standardmal — alltid synlig øverst i dropdown */
.instruction-dropdown-pinned {
  background-color: rgba(11, 46, 94, 0.04);
  border-left: 3px solid #0b2e5e;
  font-weight: 500;
}

.instruction-dropdown-pinned:hover {
  background-color: rgba(11, 46, 94, 0.08);
}

.dictate-instructions-dropdown-item .material-icons {
  font-size: 1rem;
  color: var(--text-secondary);
}

.dictate-instructions-dropdown-item:hover .material-icons {
  color: var(--primary-dark);
}

.instruction-dropdown-empty,
.dictate-instructions-dropdown-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Knapp for å åpne bibliotek fra tom dropdown */
.dropdown-open-library-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-top: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-open-library-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Dictate Instructions Display */
.dictate-instructions-selector {
  position: relative;
  display: flex;
  align-items: center;
}

.dictate-instructions-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background-color: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-soft);
  min-width: 180px;
  height: 45px;
}

.dictate-instructions-display:hover {
  border-color: var(--primary);
  background-color: var(--bg-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.dictate-instructions-display .material-icons {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.dictate-instructions-display .dropdown-arrow {
  color: var(--text-muted);
  margin-left: auto;
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}

.dictate-instructions-display:hover .dropdown-arrow {
  color: var(--primary);
  transform: translateY(1px);
}

/* ==========================================================================
   11. RESPONSE SECTION
   ========================================================================== */

.response-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  padding: 1.25rem;
  min-height: 0;
  overflow: visible;
}

.response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Verktøylinje-stripe kant til kant i boksen (negativ margin = boksens
     1.25rem-padding). Forankrer chipsene i stedet for at de flyter på hvitt. */
  margin: -1.25rem -1.25rem 1rem;
  padding: 8px 14px;
  background: #f7f9fb;
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--main-border-radius) var(--main-border-radius) 0 0;
}

.response-title {
  font-weight: 500;
  font-size: 1.1rem;
}

#responseBox {
  flex: 1;
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  background: var(--bg-light);
  padding: 1rem;
  font-size: 0.95rem;
  resize: none;
  min-height: 200px;
}

/* ==========================================================================
   12. REFERRAL BUTTONS
   ========================================================================== */

.referral-actions-container {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
  border: 1px solid #d1e7f0;
  border-radius: var(--main-border-radius);
  box-shadow: var(--shadow-soft);
}

.referral-actions-container h4 {
  margin: 0 0 1rem 0;
  color: var(--primary-dark);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.referral-actions-container h4::before {
  content: "📋";
  font-size: 1.2rem;
}

.referral-buttons-wrapper {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.referral-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
  color: white !important;
  border: 1px solid #45a049 !important;
  padding: 0.7rem 1.2rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.referral-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4) !important;
}

.referral-btn:active {
  transform: translateY(0px) !important;
  box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3) !important;
}

.referral-btn .material-icons {
  font-size: 1.1rem !important;
  margin-right: 0.5rem !important;
}

/* Category-specific colors */
.referral-btn[data-category="radiologi"] {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
  border-color: #1976D2 !important;
  box-shadow: 0 3px 8px rgba(33, 150, 243, 0.3) !important;
}

.referral-btn[data-category="radiologi"]:hover {
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%) !important;
  box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4) !important;
}

.referral-btn[data-category="ortopedi"] {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
  border-color: #F57C00 !important;
  box-shadow: 0 3px 8px rgba(255, 152, 0, 0.3) !important;
}

.referral-btn[data-category="ortopedi"]:hover {
  background: linear-gradient(135deg, #F57C00 0%, #E65100 100%) !important;
  box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4) !important;
}

.referral-btn[data-category="kardiologi"] {
  background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%) !important;
  border-color: #C2185B !important;
  box-shadow: 0 3px 8px rgba(233, 30, 99, 0.3) !important;
}

.referral-btn[data-category="kardiologi"]:hover {
  background: linear-gradient(135deg, #C2185B 0%, #AD1457 100%) !important;
  box-shadow: 0 5px 15px rgba(233, 30, 99, 0.4) !important;
}

.referral-btn[data-category="psykiatri_dps"] {
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%) !important;
  border-color: #7B1FA2 !important;
  box-shadow: 0 3px 8px rgba(156, 39, 176, 0.3) !important;
}

.referral-btn[data-category="psykiatri_dps"]:hover {
  background: linear-gradient(135deg, #7B1FA2 0%, #6A1B9A 100%) !important;
  box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4) !important;
}

.referral-btn[data-category="nevrologi"] {
  background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%) !important;
  border-color: #512DA8 !important;
  box-shadow: 0 3px 8px rgba(103, 58, 183, 0.3) !important;
}

.referral-btn[data-category="nevrologi"]:hover {
  background: linear-gradient(135deg, #512DA8 0%, #4527A0 100%) !important;
  box-shadow: 0 5px 15px rgba(103, 58, 183, 0.4) !important;
}

.referral-btn[data-category="annet"] {
  background: linear-gradient(135deg, #607D8B 0%, #455A64 100%) !important;
  border-color: #455A64 !important;
  box-shadow: 0 3px 8px rgba(96, 125, 139, 0.3) !important;
}

.referral-btn[data-category="annet"]:hover {
  background: linear-gradient(135deg, #455A64 0%, #37474F 100%) !important;
  box-shadow: 0 5px 15px rgba(96, 125, 139, 0.4) !important;
}

@keyframes referralPulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.referral-btn {
  animation: referralPulse 0.6s ease-out;
}

/* ==========================================================================
   13. EMPTY STATE
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 2rem;
}

.empty-state .material-icons {
  font-size: 4rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.empty-state h3 {
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.empty-state p {
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  max-width: 400px;
}

/* ==========================================================================
   14. LOADING & SPINNER
   ========================================================================== */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
}

.spinner {
  border: 4px solid var(--bg-hover);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spin 1s linear infinite;
}

.spinner.small {
  width: 22px;
  height: 22px;
  border-width: 3px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
}

/* textReview-modal: spinner-overlegg under KI-generering */
#textReviewModal .modal-body { position: relative; }
#textReviewModalLoading { gap: 14px; }
#textReviewModalLoading p { margin: 0; color: #475569; font-weight: 600; font-size: 14px; }


/* ==========================================================================
   15. NOTIFICATIONS
   ========================================================================== */

.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #323232;
  color: white;
  padding: 12px 16px;
  border-radius: 4px;
  z-index: 1100;
  transform: translateY(120px);
  opacity: 0;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-strong);
  max-width: 400px;
}

.notification.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Notification over fullskjerms-modaler (f.eks. Fritekst KI) */
.notification.notification-top {
  bottom: auto;
  top: 20px;
  z-index: 100000;
  transform: translateY(-120px);
}

.notification.notification-top.is-visible {
  transform: translateY(0);
}

.notification.theme-info { background-color: #0288d1 !important; }
.notification.theme-success { background-color: #4caf50 !important; }
.notification.theme-error { background-color: #f44336 !important; }
.notification.theme-warning { background-color: #ff9800 !important; }

.notification .material-icons {
  font-size: 1.2rem;
}

.notification-message {
  flex: 1;
}

/* ==========================================================================
   16. MODALS
   ========================================================================== */

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-overlay);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.modal.is-open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s;
}

.modal-content {
  background-color: var(--bg-white);
  border-radius: var(--modal-border-radius);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-strong);
  transform: translateY(20px);
  transition: transform 0.25s ease-out;
}

.modal.is-open .modal-content {
  transform: translateY(0);
}

.modal-content.wide {
  max-width: 1100px;
}

.modal-content.narrow {
  max-width: 500px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.modal-title {
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0;
}

.modal-header .close {
  color: var(--text-muted);
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0.25rem;
  border-radius: 4px;
}

.modal-header .close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.modal-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  background-color: var(--bg-light);
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e8ecf1;
  background-color: #f8f9fb;
}

.modal-footer .button.secondary {
  background: var(--bg-hover);
  color: #3a4a5c;
  border: 1px solid #dce3ed;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
}

.modal-footer .button.secondary:hover:not(:disabled) {
  background: #dfe8f3;
  border-color: #c5d1e0;
  color: #1d2d3f;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1);
  transform: translateY(-1px);
}

.modal-footer .button.secondary .material-icons {
  color: #5a7394;
}

.modal-footer .button.primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.modal-footer .button.primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
  transform: translateY(-1px);
}

/* ==========================================================================
   17. SETTINGS MODAL
   ========================================================================== */

.settings-modal-body {
  display: flex;
  padding: 0;
  flex-direction: column;
}

.settings-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-page);
}

.settings-tab-btn {
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-tab-btn:hover {
  color: var(--primary);
  background: var(--primary-light);
}

.settings-tab-btn.is-active {
  background-color: var(--bg-white);
  color: var(--primary);
  border-color: var(--border-light);
  box-shadow: var(--shadow-soft);
}

.settings-content {
  padding: 2rem;
  overflow-y: auto;
  flex-grow: 1;
}

.settings-section {
  margin-bottom: 2.5rem;
}

.settings-section h3 {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.5rem;
}

.settings-section h4 {
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.settings-section .section-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: -0.25rem;
  margin-bottom: 1.5rem;
}

/* Data Status */
.unified-data-status {
  margin: 1rem 0;
}

.data-status-card {
  padding: 1.5rem;
  border-radius: var(--main-border-radius);
  border: 2px solid;
  transition: all 0.2s;
}

.data-status-card.status-locked {
  border-color: var(--accent-warning);
  background: linear-gradient(135deg, #fff9c4 0%, #ffecb3 100%);
}

.data-status-card.status-unlocked {
  border-color: var(--accent-success);
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.status-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.status-header .material-icons {
  font-size: 1.5rem;
}

.status-header h4 {
  margin: 0;
  font-size: 1.1rem;
}

.status-details p {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.data-summary {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.status-actions {
  margin-top: 1rem;
}

.data-locked-state {
  text-align: center;
  padding: 2rem;
  background: var(--primary-light);
  border-radius: var(--main-border-radius);
  margin-top: 1.5rem;
}

.locked-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.locked-message .material-icons {
  font-size: 3rem;
  color: var(--primary-dark);
}

.locked-message h4 {
  color: var(--primary-dark);
  margin: 0;
}

/* Azure Config Form */
.azure-config-form {
  background: var(--bg-white);
  padding: 1.5rem;
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
}

.connection-status {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: var(--main-border-radius);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.connection-status.success {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

.connection-status.error {
  background: var(--status-recording-bg);
  color: var(--status-recording-text);
}

/* Security Section */
.security-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-white);
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
}

.pin-change-form {
  max-width: 300px;
}

.pin-change-form .input {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.3em;
}

.security-actions,
.maintenance-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Danger Zone */
.danger-zone {
  border: 2px solid var(--accent-error);
  border-radius: var(--main-border-radius);
  padding: 1.5rem;
  background-color: #fff5f5;
}

.danger-zone h4 {
  color: var(--accent-error);
}

.danger-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Storage Stats */
.storage-info {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: var(--main-border-radius);
}

.storage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.storage-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--bg-white);
  border-radius: 4px;
}

.stat-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.stat-value {
  font-weight: 600;
  color: var(--primary);
}

/* ==========================================================================
   18. INSTRUCTION LIBRARY MODAL
   ========================================================================== */

#instructionsModal .modal-content {
  max-width: 1200px;
  height: 85vh;
  max-height: 85vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Profesjonell header for instruksjonsbibliotek */
#instructionsModal .modal-header {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  padding: 1rem 1.5rem;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#instructionsModal .modal-header .modal-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#instructionsModal .modal-header .close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #ffffff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

#instructionsModal .modal-header .close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

#instructionsModal .instruction-modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-light);
}

.main-tabs {
  display: flex;
  background: var(--bg-white);
  padding: 0 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  gap: 0;
  flex-shrink: 0;
}

.main-tab-btn {
  padding: 1rem 1.5rem;
  border: none;
  background: transparent;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.9375rem;
  transition: all 0.2s;
  position: relative;
}

.main-tab-btn:hover {
  color: #2563eb;
  background: var(--bg-light);
}

.main-tab-btn.is-active {
  color: #2563eb;
  font-weight: 600;
  border-bottom-color: #2563eb;
  background: var(--bg-white);
}

.sub-tabs {
  display: flex;
  background: var(--bg-white);
  padding: 0 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sub-tab-btn {
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: all 0.2s;
  margin: 0.5rem 0;
}

.sub-tab-btn:hover {
  color: #2563eb;
  background: #eff6ff;
}

.sub-tab-btn.is-active {
  color: #ffffff !important;
  background: #2563eb !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.instruction-view-container {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  min-height: 0;
}

.view-content {
  display: none;
}

.view-content.is-active {
  display: block !important;
}

/* Instruction List Grid */
#instructionListContent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}

.instruction-item-card {
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  position: relative;
}

.instruction-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

.instruction-card-header {
  margin-bottom: 0.75rem;
}

.instruction-card-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.instruction-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.instruction-badge {
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge-published {
  background: #dcfce7;
  color: #166534;
}

.badge-draft {
  background: #fef3c7;
  color: #92400e;
}

.badge-category {
  background: #dbeafe;
  color: #1e40af;
}

.instruction-card-body {
  flex-grow: 1;
}

.instruction-description {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.instruction-content-preview {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.875rem;
  padding: 0.75rem;
  background: var(--bg-light);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  white-space: pre-wrap;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  max-height: 80px;
  overflow: hidden;
  line-height: 1.5;
}

.instruction-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.instruction-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #f59e0b;
}

.instruction-rating .material-icons {
  font-size: 1rem;
}

/* Favoritt-stjerne - KUN inne i instruction cards */
.instruction-item-card .fav-toggle {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0;
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 2;
  line-height: 1;
  opacity: 1;
}
.instruction-item-card .fav-toggle .material-icons {
  font-size: 1.3rem;
}
.instruction-item-card .fav-toggle:hover {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  transform: scale(1.15);
}
.instruction-item-card .fav-toggle.is-fav {
  color: #fbbf24;
  filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.3));
}
.instruction-item-card .fav-toggle.is-fav:hover {
  color: #d97706;
}

/* Favoritt-toggle håndteres nå med .fav-toggle */

.instruction-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.instruction-list-empty .material-icons {
  font-size: 4rem;
  margin-bottom: 1rem;
}

/* AI Collaboration */
.ai-collaborate-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.5rem;
}

.ai-collaborate-header {
  flex-shrink: 0;
  padding: 1.5rem 0 0 0;
}

.ai-collaborate-header h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ai-collaborate-header h4::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  border-radius: 2px;
}

.ai-collaborate-header p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0;
}

.ai-collaborate-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  flex-grow: 1;
  min-height: 0;
}

.ai-chat-section,
.ai-preview-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ai-chat-header,
.ai-preview-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  flex-shrink: 0;
}

.ai-chat-header h5,
.ai-preview-header h5 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-chat-header h5::before {
  content: '💬';
  font-size: 1rem;
}

.ai-preview-header h5::before {
  content: '📄';
  font-size: 1rem;
}

.ai-chat-messages {
  flex-grow: 1;
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fafbfc;
}

.ai-message {
  display: flex;
  gap: 0.75rem;
  max-width: 85%;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  font-weight: 600;
}

.ai-message.ai-message-assistant .ai-message-avatar {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
}

.ai-message.ai-message-user .ai-message-avatar {
  background: #e2e8f0;
  color: var(--text-secondary);
}

.ai-message-content {
  padding: 0.875rem 1rem;
  border-radius: 12px;
  line-height: 1.5;
  word-break: break-word;
  font-size: 0.9375rem;
}

.ai-message.ai-message-assistant {
  align-self: flex-start;
}

.ai-message.ai-message-assistant .ai-message-content {
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-top-left-radius: 4px;
  color: #334155;
}

.ai-message.ai-message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message.ai-message-user .ai-message-content {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  border-top-right-radius: 4px;
}

.ai-chat-input {
  padding: 1rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: var(--bg-white);
  flex-shrink: 0;
}

.ai-input-group {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.ai-message-input {
  flex-grow: 1;
  resize: none;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  transition: all 0.2s;
  min-height: 44px;
  max-height: 120px;
}

.ai-message-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-message-input::placeholder {
  color: var(--text-muted);
}

.ai-send-btn {
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.ai-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ai-send-btn .material-icons {
  font-size: 1.25rem;
}

.ai-suggestions {
  margin-top: 0.875rem;
}

.suggestions-label {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.suggestions-label::before {
  content: '💡';
  font-size: 0.875rem;
}

.suggestion-buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.suggestion-btn {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  transition: all 0.2s;
  font-weight: 500;
}

.suggestion-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  transform: translateY(-1px);
}

/* Preview section */
.ai-preview-content {
  flex-grow: 1;
  padding: 1.25rem;
  overflow-y: auto;
  background: var(--bg-white);
}

.ai-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
}

.ai-preview-empty .material-icons {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.ai-preview-empty p {
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 280px;
}

/* Clear button */
.ai-clear-btn {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.2s;
}

.ai-clear-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.ai-clear-btn .material-icons {
  font-size: 1rem;
}

/* =============================================================================
   CUSTOMIZE INSTRUCTION MODAL - "Lag din versjon"
   ============================================================================= */

.customize-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: customizeFadeIn 0.2s ease-out;
}

.customize-modal-overlay.closing {
  animation: customizeFadeOut 0.2s ease-out forwards;
}

@keyframes customizeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes customizeFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.customize-modal {
  background: var(--bg-white);
  border-radius: 16px;
  width: 95vw;
  max-width: 1200px;
  height: 85vh;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: customizeSlideUp 0.3s ease-out;
}

@keyframes customizeSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.customize-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  border-radius: 16px 16px 0 0;
}

.customize-header-content h3 {
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 0.375rem 0;
}

.customize-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  margin: 0;
}

.customize-close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #ffffff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.customize-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.customize-modal-tabs {
  display: flex;
  background: var(--bg-light);
  border-bottom: 1px solid #e2e8f0;
  padding: 0 1.75rem;
}

.customize-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.customize-tab-btn:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.customize-tab-btn.is-active {
  color: #2563eb !important;
  border-bottom-color: #2563eb !important;
  background: var(--bg-white) !important;
}

.customize-tab-btn .material-icons {
  font-size: 1.25rem;
}

.customize-modal-body {
  flex: 1;
  overflow: hidden;
  padding: 1.5rem 1.75rem;
  background: var(--bg-light);
}

.customize-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.75rem;
  background: var(--bg-white);
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 16px 16px;
}

.customize-modal-footer .button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.customize-modal-footer .button.secondary {
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  color: var(--text-muted);
}

.customize-modal-footer .button.secondary:hover {
  background: var(--bg-hover);
  border-color: #cbd5e1;
}

.customize-modal-footer .button.primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  color: #ffffff;
}

.customize-modal-footer .button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Manual Edit Tab Layout */
.customize-manual-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  height: 100%;
}

.customize-form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--bg-white);
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.customize-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.customize-form-group-grow {
  flex: 1;
  min-height: 0;
}

.customize-form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

.customize-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.customize-content-header label {
  margin-bottom: 0;
}

.customize-ai-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.customize-ai-edit-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.customize-ai-edit-btn .material-icons {
  font-size: 1rem;
  color: #ffffff !important;
}

.customize-input {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9375rem;
  transition: all 0.2s;
}

.customize-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.customize-textarea-small {
  resize: none;
  min-height: 70px;
}

.customize-textarea-large {
  flex: 1;
  resize: none;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  min-height: 200px;
}

.customize-original-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.customize-original-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--bg-hover);
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.customize-original-header .material-icons {
  font-size: 1.125rem;
}

.customize-original-content {
  flex: 1;
  padding: 1.25rem;
  margin: 0;
  overflow-y: auto;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
  background: #fafbfc;
}

/* AI Edit Tab Layout */
.customize-ai-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  height: 100%;
}

.customize-ai-chat-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.customize-ai-messages {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fafbfc;
}

.customize-ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  height: 100%;
}

.customize-welcome-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.customize-welcome-icon .material-icons {
  font-size: 2rem;
  color: #2563eb;
}

.customize-ai-welcome h4 {
  color: var(--text-primary);
  font-size: 1.125rem;
  margin: 0 0 0.5rem 0;
}

.customize-ai-welcome p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0 0 1.25rem 0;
  max-width: 320px;
}

.customize-welcome-examples {
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 1rem;
  text-align: left;
}

.customize-welcome-examples span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.customize-welcome-examples ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.customize-welcome-examples li {
  margin-bottom: 0.375rem;
}

.customize-chat-message {
  display: flex;
  gap: 0.75rem;
  max-width: 90%;
  animation: customizeMsgSlide 0.3s ease-out;
}

@keyframes customizeMsgSlide {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.customize-chat-message.customize-chat-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.customize-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.customize-chat-assistant .customize-chat-avatar {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
}

.customize-chat-user .customize-chat-avatar {
  background: #e2e8f0;
  color: var(--text-secondary);
}

.customize-chat-bubble {
  padding: 0.875rem 1rem;
  border-radius: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.customize-chat-assistant .customize-chat-bubble {
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-top-left-radius: 4px;
  color: #334155;
}

.customize-chat-user .customize-chat-bubble {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  border-top-right-radius: 4px;
}

.customize-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: #dcfce7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.customize-update-badge .material-icons {
  font-size: 0.875rem;
}

.customize-ai-input-area {
  padding: 1rem 1.25rem;
  background: var(--bg-white);
  border-top: 1px solid #e2e8f0;
}

.customize-ai-input-group {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.customize-ai-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9375rem;
  resize: none;
  transition: all 0.2s;
  min-height: 44px;
}

.customize-ai-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.customize-ai-send-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.customize-ai-send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.customize-ai-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.customize-ai-suggestions {
  margin-top: 0.875rem;
}

.customize-suggestions-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  display: block;
}

.customize-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.customize-chip {
  background: var(--bg-hover);
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.customize-chip:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
}

/* AI Preview Section */
.customize-ai-preview-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.customize-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--bg-hover);
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

.customize-preview-header .material-icons {
  font-size: 1.125rem;
  color: #2563eb;
}

.customize-preview-name {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}

.customize-preview-name-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.2s;
}

.customize-preview-name-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.customize-preview-content {
  flex: 1;
  padding: 1.25rem;
  margin: 0;
  overflow-y: auto;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
  background: var(--bg-white);
}

.customize-preview-body {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-white);
}

/* =============================================================================
   DIFF VIEW STYLING
   ============================================================================= */

.diff-controls {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-light);
  border-bottom: 1px solid #e2e8f0;
}

.diff-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-white);
  color: var(--text-secondary);
}

.diff-control-btn:hover {
  border-color: #cbd5e1;
  background: var(--bg-hover);
}

.diff-control-btn.accept-all {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.diff-control-btn.accept-all:hover {
  background: #bbf7d0;
}

.diff-control-btn.reject-all {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.diff-control-btn.reject-all:hover {
  background: #fee2e2;
}

.diff-control-btn .material-icons {
  font-size: 1rem;
}

.diff-view {
  padding: 1rem;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.diff-same {
  color: var(--text-secondary);
  padding: 0.25rem 0;
  white-space: pre-wrap;
}

.diff-chunk {
  margin: 0.75rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  transition: all 0.2s;
}

.diff-chunk.accepted {
  border-color: #86efac;
  background: #f0fdf4;
}

.diff-chunk.rejected {
  border-color: #fecaca;
  background: #fef2f2;
}

.diff-chunk-controls {
  display: flex;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-light);
  border-bottom: 1px solid #e2e8f0;
}

.diff-chunk.accepted .diff-chunk-controls {
  background: #dcfce7;
  border-bottom-color: #86efac;
}

.diff-chunk.rejected .diff-chunk-controls {
  background: #fee2e2;
  border-bottom-color: #fecaca;
}

.diff-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: var(--bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  color: var(--text-muted);
}

.diff-btn .material-icons {
  font-size: 1rem;
}

.diff-btn.diff-accept:hover,
.diff-btn.diff-accept.active {
  background: #22c55e;
  border-color: #22c55e;
  color: #ffffff;
}

.diff-btn.diff-reject:hover,
.diff-btn.diff-reject.active {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.diff-content {
  padding: 0.75rem 1rem;
}

.diff-removed {
  background: #fee2e2;
  color: #991b1b;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  text-decoration: line-through;
  white-space: pre-wrap;
}

.diff-added {
  background: #dcfce7;
  color: #166534;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  white-space: pre-wrap;
}

.diff-chunk.rejected .diff-removed {
  text-decoration: none;
  background: #f0fdf4;
  color: #166534;
}

.diff-chunk.rejected .diff-added {
  text-decoration: line-through;
  background: #fee2e2;
  color: #991b1b;
}

/* Small spinner for button */
.spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Customize button in detail view */
.customize-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: none !important;
  color: #ffffff !important;
}

.customize-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.customize-btn .material-icons {
  color: #ffffff !important;
}

/* =====================================================================
   INSTRUKSJONSBIBLIOTEK — DETALJ-VISNING (knapper og action-rad)
   Outline-stil for sekundærknapper med fargede ikoner som signaliserer
   identitet. Primær-knappen ("Bruk denne") og customize-btn beholder
   solid fyll for tydelig hierarki.
   ===================================================================== */

/* Tilbake-knapp — egen rad over tittelen */
[data-action="back-to-list"].button.secondary.small {
  background: transparent !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1rem;
}

[data-action="back-to-list"].button.secondary.small:hover:not(:disabled) {
  background: var(--bg-hover) !important;
  border-color: #6b7280 !important;
}

/* Action-rad layout — luftig topp-skille */
.instruction-actions {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-medium);
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

/* Sekundærknapper i action-rad: ren outline med subtilt løft */
.instruction-actions .button.secondary:not(.customize-btn) {
  background: var(--bg-input, #ffffff) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}

.instruction-actions .button.secondary:not(.customize-btn):hover:not(:disabled) {
  background: var(--bg-hover) !important;
  border-color: #6b7280 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Subtile ikon-aksenter — gir hver knapp identitet */
.instruction-actions [data-action="toggle-favorite"] .material-icons {
  color: #ec4899; /* rosa hjerte */
}

.instruction-actions [data-action="set-as-default"] .material-icons {
  color: #ea580c; /* oransje pin */
}

.instruction-actions [data-action="edit-instruction"] .material-icons {
  color: #4f46e5; /* indigo blyant */
}

/* Aktiv standardmal-knapp i detalj-visning. Pinnet-stil signaliserer at
   denne malen brukes automatisk i nye konsultasjoner. */
.instruction-actions .instruction-default-active {
  background: #fff7ed !important;
  border-color: #fb923c !important;
  color: #9a3412 !important;
}

.instruction-actions .instruction-default-active:hover:not(:disabled) {
  background: #ffedd5 !important;
  border-color: #ea580c !important;
}

.instruction-actions .instruction-default-active .material-icons {
  color: #ea580c !important;
}

/* Dark theme — outline-fargene må justere seg */
html[data-theme="dark"] [data-action="back-to-list"].button.secondary.small,
html[data-theme="dark"] .instruction-actions .button.secondary:not(.customize-btn) {
  background: var(--bg-input, #1f2937) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] [data-action="back-to-list"].button.secondary.small:hover:not(:disabled),
html[data-theme="dark"] .instruction-actions .button.secondary:not(.customize-btn):hover:not(:disabled) {
  background: var(--bg-hover) !important;
  border-color: #9ca3af !important;
}

html[data-theme="dark"] .instruction-actions .instruction-default-active {
  background: #431407 !important;
  border-color: #ea580c !important;
  color: #fed7aa !important;
}

html[data-theme="dark"] .instruction-actions .instruction-default-active:hover:not(:disabled) {
  background: #7c2d12 !important;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .customize-modal {
    width: 98vw;
    height: 95vh;
    max-height: none;
    border-radius: 12px;
  }
  
  .customize-manual-layout,
  .customize-ai-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .customize-original-section {
    max-height: 200px;
  }
  
  .customize-ai-preview-section {
    max-height: 250px;
  }
}

.ai-preview-content {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
}

.ai-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-muted);
}

.ai-preview-placeholder .material-icons {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.instruction-content-box {
  white-space: pre-wrap;
  background-color: var(--bg-light);
  padding: 1rem;
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

/* Referral Dashboard */
.referral-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.referral-dashboard-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.referral-category-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.referral-category-info .category-name {
  font-weight: 500;
  color: var(--text-primary);
}

.referral-category-info .active-template-name {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Template Choice Modal */
#choiceModalBody {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 0;
}

.template-choice-list {
  display: flex;
  flex-direction: column;
}

.template-choice-item {
  display: block;
  width: 100%;
  padding: 12px 24px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  font-size: 1rem;
  transition: background-color 0.2s;
}

.template-choice-item:last-child {
  border-bottom: none;
}

.template-choice-item:hover {
  background-color: var(--bg-light);
}

.template-choice-item.is-active {
  background-color: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
}

.template-choice-item .material-icons {
  vertical-align: middle;
  margin-right: 8px;
  font-size: 1.25rem;
  color: var(--text-secondary);
}

.template-choice-item.is-active .material-icons {
  color: var(--primary);
}

/* ==========================================================================
   19. TESTING & DIAGNOSTICS
   ========================================================================== */

.test-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-white);
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
}

.permission-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 4px;
}

.permission-granted {
  background-color: var(--status-completed-bg);
  color: var(--status-completed-text);
}

.permission-denied {
  background-color: var(--status-recording-bg);
  color: var(--status-recording-text);
}

.audio-visualizer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.audio-level-bar {
  flex-grow: 1;
  height: 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  overflow: hidden;
}

.audio-level-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 0.1s linear;
}

.audio-test-controls,
.recording-test,
.service-tests {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.test-results {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: 4px;
  min-height: 50px;
}

.test-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.test-result.success {
  color: var(--accent-success);
}

.test-result.error {
  color: var(--accent-error);
}

.test-transcript,
.test-step {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-white);
  border-radius: 4px;
  font-size: 0.9rem;
}

.system-info {
  margin-top: 1rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--bg-light);
  border-radius: 4px;
}

.info-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.info-value {
  color: var(--text-primary);
}

/* ==========================================================================
   20. MOBILE QR MODAL
   ========================================================================== */

.mobile-qr-container {
  text-align: center;
}

.mobile-qr-header {
  margin-bottom: 1.5rem;
}

.mobile-qr-header h4 {
  margin-bottom: 0.5rem;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
  min-height: 220px;
  border: 2px dashed var(--border-light);
  border-radius: var(--main-border-radius);
  background: var(--bg-light);
}

.qr-code-container.qr-generated {
  border-style: solid;
  border-color: var(--primary);
  background: var(--bg-white);
}

.qr-loading,
.qr-error,
.qr-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}

.qr-loading .material-icons,
.qr-error .material-icons,
.qr-expired .material-icons {
  font-size: 3rem;
  color: var(--text-muted);
}

.qr-error .material-icons {
  color: var(--accent-error);
}

.mobile-url-section {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: var(--main-border-radius);
}

.mobile-url-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.mobile-instructions {
  text-align: left;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--primary-light);
  border-radius: var(--main-border-radius);
}

.mobile-instructions h5 {
  margin-bottom: 1rem;
}

.mobile-instructions ol {
  margin-left: 1.5rem;
}

.mobile-instructions li {
  margin-bottom: 0.5rem;
}

.mobile-security-note {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--status-completed-bg);
  border-radius: var(--main-border-radius);
  border-left: 4px solid var(--accent-success);
}

.security-info {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.security-info .material-icons {
  color: var(--accent-success);
  margin-top: 0.25rem;
}

.mobile-pin-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   21. MIGRATION DIALOG
   ========================================================================== */

.migration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-overlay);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.migration-dialog {
  background: var(--bg-white);
  border-radius: var(--modal-border-radius);
  padding: 2.5rem;
  max-width: 550px;
  width: 90%;
  box-shadow: var(--shadow-strong);
  text-align: center;
}

.migration-header {
  margin-bottom: 1.5rem;
}

.migration-icon {
  font-size: 3.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.migration-body {
  text-align: left;
}

.migration-benefits {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.migration-benefits li {
  margin-bottom: 0.5rem;
}

.migration-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--primary-light);
  border-radius: var(--main-border-radius);
}

.migration-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* ==========================================================================
   22. AUTH MODAL (håndteres nå av auth-service.js inline CSS)
   ========================================================================== */

/* ==========================================================================
   23. TOOLTIPS
   ========================================================================== */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  background: var(--bg-white);
  color: #334155;
  text-align: center;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  pointer-events: none;
  /* Boksen er position:absolute inne i knappen, som er position:relative og
     typisk 60–80 px bred. Uten width:max-content blir tilgjengelig bredde =
     knappens bredde, og teksten brekker i en smal søyle. Det var grunnen til at
     white-space:nowrap ble lagt på — men nowrap sammen med max-width gjør at
     tekst som er bredere enn taket renner UT AV den hvite boksen og legger seg
     på sidebakgrunnen. «Legemiddelgjennomgang og samstemming mot epikrise» er
     315 px naturlig i en boks klemt til 260.
     max-content gir boksen tekstens egen bredde uavhengig av knappen: korte
     tooltips står på én linje som før, og bare de som er bredere enn taket
     brekker — inne i boksen. */
  width: max-content;
  max-width: 260px;
  white-space: normal;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1.5px 6px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

/* Arrow pointing down (tooltip is above) */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.04));
}

/* Header tooltips: show BELOW (since header is at top of page) */
header .tooltip .tooltiptext {
  bottom: auto;
  top: calc(100% + 10px);
}

header .tooltip .tooltiptext::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #ffffff transparent;
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
}

/* Response toolbar: ensure overflow doesn't clip tooltips */
.response-header-actions {
  overflow: visible;
}

.response-header-actions .tooltip .tooltiptext {
  /* Sto som white-space:nowrap, og vant over grunnregelens normal fordi den er
     mer spesifikk (0,3,0 mot 0,2,0). Da kunne teksten ikke brekke, og alt over
     260 px rant ut av boksen — det var nettopp knappene i denne raden det slo
     ut på. width:max-content i grunnregelen løser det problemet nowrap ble lagt
     inn for å løse, så her skal den ikke lenger overstyres. */
  white-space: normal;
}

/* Edge-aware: first buttons align left */
.response-header-actions .tooltip:first-child .tooltiptext,
.response-header-actions .tooltip:nth-child(2) .tooltiptext {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.response-header-actions .tooltip:first-child:hover .tooltiptext,
.response-header-actions .tooltip:nth-child(2):hover .tooltiptext {
  transform: translateX(0) translateY(0);
}
.response-header-actions .tooltip:first-child .tooltiptext::after,
.response-header-actions .tooltip:nth-child(2) .tooltiptext::after {
  left: 18px;
}

/* Edge-aware: last buttons align right */
.response-header-actions .tooltip:last-child .tooltiptext,
.response-header-actions .tooltip:nth-last-child(2) .tooltiptext {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}
.response-header-actions .tooltip:last-child:hover .tooltiptext,
.response-header-actions .tooltip:nth-last-child(2):hover .tooltiptext {
  transform: translateX(0) translateY(0);
}
.response-header-actions .tooltip:last-child .tooltiptext::after,
.response-header-actions .tooltip:nth-last-child(2) .tooltiptext::after {
  left: auto;
  right: 18px;
}

/* ==========================================================================
   24. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1200px) {
  .ai-collaborate-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  #instructionListContent {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 1024px) {
  .settings-main {
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1rem;
  }
  
  .storage-stats {
    grid-template-columns: 1fr;
  }
  
  /* Begynn å komprimere action-buttons */
  .response-header-actions .action-btn {
    padding: 6px 11px;
    gap: 4px;
    font-size: 0.78rem;
    height: 32px;
  }
}

@media (max-width: 900px) {
  /* Forbered for kompakt modus */
  .response-header-actions {
    gap: 5px;
  }
  
  .response-header-actions .action-btn {
    padding: 6px 9px;
    font-size: 0.75rem;
    height: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
  }
  
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .header-left h1 {
    font-size: 1.25rem;
  }
  
  .container {
    flex-direction: column;
    height: auto;
  }
  
  .sidebar {
    width: 100%;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  
  .main {
    padding: 1rem;
  }
  
  .settings-main {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .controls-spacer {
    display: none;
  }
  
  .status-indicators {
    justify-content: center;
  }
  
  .modal-content.wide,
  .modal-content {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  
  .referral-buttons-wrapper {
    flex-direction: column;
  }
  
  .referral-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .dictate-instructions-display {
    min-width: 140px;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
  }
  
  #dictateInstructionsDisplayText {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .consultation-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .consultation-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  /* KRITISK: Skjul tekst i action-buttons, vis bare ikoner */
  .response-header-actions .action-btn .action-btn-label {
    display: none;
  }
  
  .response-header-actions .action-btn {
    padding: 7px;
    min-width: 34px;
    height: 34px;
    gap: 0;
    border-radius: 8px;
  }
  
  .response-header-actions .action-btn .material-icons {
    margin: 0;
    font-size: 1.1rem;
  }
  
  /* Kompakt modus med wrapping */
  .response-header-actions {
    overflow: visible;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 4px;
  }
}

@media (max-width: 480px) {
  .header-main {
    padding: 0.5rem 0;
  }
  
  .header-actions {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .user-info {
    order: -1;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  
  .sidebar {
    padding: 0.75rem;
  }
  
  .main {
    padding: 0.75rem;
  }
  
  .consultation-item {
    padding: 0.6rem;
  }
  
  .modal-content {
    margin: 0;
  }
  
  .modal-header,
  .modal-body,
  .modal-actions {
    padding: 1rem;
  }
  
  /* Kompakt action-buttons på svært små skjermer */
  .response-header-actions {
    gap: 3px;
  }
  
  .response-header-actions .action-btn {
    padding: 6px;
    min-width: 30px;
    height: 30px;
  }
  
  .response-header-actions .action-btn .material-icons {
    font-size: 1rem;
  }
}

/* ==========================================================================
   25. PRINT STYLES
   ========================================================================== */

@media print {
  header,
  .sidebar,
  .controls,
  .modal,
  .notification {
    display: none !important;
  }
  
  .main {
    padding: 0;
    background: white;
  }
  
  .response-section {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  #responseBox {
    border: none;
    background: white;
    color: black;
  }
}

/* ==========================================================================
   26. ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode tokens defineres øverst i filen under html[data-theme="dark"]. */

/* Focus styles for keyboard navigation */
.button:focus,
.input:focus,
.sidebar-btn:focus,
.filter-btn:focus,
.consultation-item:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border-light: #000000;
    --border-medium: #000000;
    --text-muted: #000000;
  }
}

/* ==========================================================================
   27. FINAL UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Smooth scrolling for containers */
.consultation-list,
.modal-body,
.settings-content,
.ai-chat-messages {
  scroll-behavior: smooth;
}

/* Prevent text selection on UI elements */
.button,
.sidebar-btn,
.filter-btn,
.consultation-status,
.status-display {
  user-select: none;
}

/* Ensure consistent box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* ==========================================================================
   LAYOUT-REPARASJON v8.3 - Målrettet Fiks
   - Legges til på slutten av eksisterende CSS-fil for å gjenopprette
     kritisk grid- og flexbox-layout.
   ========================================================================== */

/* FIKS 1: Gjenoppretter 3-kolonne grid for innstillinger øverst */
.settings-main {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.setting-group {
  display: flex !important;
  flex-direction: column;
}

/* FIKS 2: Gjenoppretter flexbox-raden for hovedkontrollene */
.controls {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.controls-spacer {
  flex-grow: 1;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* FIKS 3: Gjenoppretter flexbox for resultat-headeren */
.response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Duplikat fjernet - response-header-actions er allerede definert i seksjon 6 */
/* ==========================================================================
   FORBEDRING AV TAB-NAVIGASJON (Instruksjonsbibliotek)
   ========================================================================== */

/* Stil for containerne som holder på tab-radene */
.main-tabs,
.sub-tabs {
  padding-left: 0.5rem; /* Gir litt luft på venstre side */
  padding-right: 0.5rem;
  /* Fjerner den gamle border-bottom for å unngå doble linjer */
  border-bottom: none;
}

/* Felles stil for alle tab-knapper */
.main-tab-btn,
.sub-tab-btn {
  /* Gir mer pusterom inne i knappen */
  padding: 0.8rem 1rem;
  /* Setter en transparent border som standard for å unngå at layouten "hopper" */
  border-bottom: 3px solid transparent; 
  transition: all 0.2s ease-in-out;
  color: var(--text-muted); /* Gjør inaktive tabs tydelig grå */
  position: relative; /* Nødvendig for den animerte understreken */
  font-weight: 500;
}

/* Hover-effekt for å vise at de er klikkbare */
.main-tab-btn:hover:not(.is-active),
.sub-tab-btn:hover:not(.is-active) {
  color: var(--primary-dark);
  background-color: var(--bg-hover);
}

/* Forbedret stil for den aktive tab-en */
.main-tab-btn.is-active,
.sub-tab-btn.is-active {
  color: var(--primary);
  font-weight: 700; /* Tykkere tekst for aktiv fane */
  border-bottom-color: var(--primary); /* Viser den tykke understreken */
}

/* Separat styling for den øverste raden (Hoved-tabs) */
.main-tabs {
  gap: 1.5rem; /* Mer luft mellom hovedkategoriene */
  border-bottom: 1px solid var(--border-light); /* En tynn linje for å skille de to radene */
}

.main-tab-btn {
  font-size: 1.05rem; /* Litt større tekst for hoved-tabs */
}

/* Separat styling for den nederste raden (Sub-tabs) */
.sub-tabs {
  gap: 2rem; /* God avstand for under-navigasjon */
  background-color: var(--bg-white);
  box-shadow: var(--shadow-soft); /* Gir en liten 3D-effekt som løfter den fra innholdet */
  border-bottom: 1px solid var(--border-light);
}

.sub-tab-btn {
  font-size: 0.9rem; /* Litt mindre tekst for sub-tabs */
  padding: 0.7rem 0.25rem; /* Justert padding for mindre knapper */
}
/* ==========================================================================
   INSTRUCTION LIBRARY IMPROVEMENTS
   ========================================================================== */

/* Container for the entire instruction list - IKKE grid selv */
#instructionListContent {
    padding: 0;
    margin: 0;
    /* VIKTIG: Dette er IKKE en grid - det er en normal container */
}

/* Category headers - FULL BREDDE headers */
.instruction-category-header {
    /* VIKTIG: Tar full bredde som en vanlig block-element */
    width: 100%;
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--primary-light);
    background: linear-gradient(90deg, var(--primary-light), transparent);
    border-radius: 6px;
    position: relative;
    border-left: 4px solid var(--primary);
}

.instruction-category-header:first-of-type {
    margin-top: 0;
}

/* Grid container for instruction cards - MÅ være ETTER header */
.instruction-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    padding: 0 0.5rem;
    /* VIKTIG: Dette er en separat grid UNDER hver kategori-header */
}

/* Individual instruction cards - better styling */
.instruction-item-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-soft);
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.instruction-item-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-light);
}

.instruction-item-card.is-active {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* Card header */
.instruction-card-header {
    margin-bottom: 1rem;
}

.instruction-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.instruction-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.instruction-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 500;
}

.badge-published {
    background: var(--status-completed-bg);
    color: var(--status-completed-text);
}

.badge-draft {
    background: var(--status-draft-bg);
    color: var(--status-draft-text);
}

.badge-category {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* Card body */
.instruction-card-body {
    flex-grow: 1;
    margin-bottom: 1rem;
}

.instruction-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.instruction-content-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    line-height: 1.3;
    border-left: 3px solid var(--border-medium);
}

/* Card footer */
.instruction-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
    padding-top: 0.75rem;
    margin-top: auto;
}

.instruction-author {
    font-weight: 500;
}

.instruction-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rating-stars {
    color: #ffa726;
}

/* Favorite star indicator */
/* .favorite-star erstattet med .fav-toggle — se seksjon 22 */

/* Wrapper for hver kategori-seksjon */
.instruction-category-section {
    width: 100%;
    margin-bottom: 2rem;
}

/* ==========================================================================
   REFERRAL TEMPLATES SPECIFIC STYLING
   ========================================================================== */

/* For referral templates, we want cleaner category separation */
.instruction-modal-body[data-type="referral"] .instruction-category-header {
    background: linear-gradient(90deg, #e8f5e9, transparent);
    border-left: 4px solid var(--secondary);
    padding-left: 1rem;
}

.instruction-modal-body[data-type="referral"] .instruction-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.instruction-list-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.instruction-list-empty .material-icons {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.instruction-list-empty h3 {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   RESPONSIVE IMPROVEMENTS
   ========================================================================== */

@media (max-width: 1200px) {
    .instruction-list-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .instruction-list-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .instruction-category-header {
        font-size: 1.1rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .instruction-item-card {
        padding: 1rem;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .instruction-view-container {
        padding: 1rem;
    }
    
    .instruction-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    
    
    /* ==========================================================================
   INSTRUKSJONSBIBLIOTEK GRID-FIKS - KRITISK
   ========================================================================== */

/* FORCE grid layout for instruction cards */
#instructionListContent .instruction-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
}

/* Ensure category headers span full width */
#instructionListContent .instruction-category-header {
    grid-column: 1 / -1 !important; /* Span all columns */
    width: 100% !important;
    margin: 2rem 0 1rem 0 !important;
    padding: 1rem !important;
    background: linear-gradient(90deg, var(--primary-light), transparent) !important;
    border-left: 4px solid var(--primary) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

/* Fix card dimensions */
#instructionListContent .instruction-item-card {
    min-height: 200px !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Override any conflicting styles */
#instructionListContent {
    display: block !important;
    width: 100% !important;
}
/* ==========================================================================
   HENVISNINGSMALER - GRID LAYOUT FIKS
   ========================================================================== */

/* KRITISK: Force kategori-headers til å ta full bredde og bryte grid */
#instructionsModal .instruction-category-header {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important; /* Span alle kolonner */
    margin: 2rem 0 1.5rem 0 !important;
    padding: 1rem 1.5rem !important;
    
    /* Styling */
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: var(--primary-dark) !important;
    background: linear-gradient(90deg, var(--primary-light), transparent) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 6px !important;
    
    /* Force den til å være en egen "rad" */
    clear: both !important;
    float: none !important;
}

/* Første kategori-header trenger ikke top margin */
#instructionsModal .instruction-category-header:first-child {
    margin-top: 0 !important;
}

/* Force grid-containere til å være under headers */
#instructionsModal .instruction-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 2.5rem !important;
    width: 100% !important;
    clear: both !important;
}

/* Sørg for at referral-layouten ikke bruker den gamle strukturen */
#instructionsModal .instruction-view-container {
    display: block !important; /* Ikke flex eller grid */
}

/* Override eventuelle gamle referral-spesifikke stiler */
.instruction-modal-body[data-type="referral"] .instruction-category-header,
.referral-dashboard-item,
.referral-dashboard-container {
    display: block !important;
}

/* Spesifikk fix for henvisningsmaler når currentInstructionType === 'referral' */
#instructionsModal.referral-mode .instruction-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
}

/* ==========================================================================
   HENVISNINGSMALER GRID-FIKS - FORCE CORRECT LAYOUT
   ========================================================================== */

/* Force category headers to be full-width block elements */
#instructionsModal .instruction-category-header {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 2rem 0 1rem 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--primary-dark) !important;
    background: linear-gradient(90deg, var(--primary-light), transparent) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 6px !important;
    /* Kill any flexbox/grid inheritance */
    flex: none !important;
    grid-column: unset !important;
    position: relative !important;
}

/* Force grid containers to display as proper grids */
#instructionsModal .instruction-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    clear: both !important;
    /* Kill any old layout */
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

/* Ensure instruction cards behave properly in grid */
#instructionsModal .instruction-item-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px !important;
    /* Kill any old sizing */
    width: auto !important;
    max-width: none !important;
}

/* Kill any old vertical layout styles that might interfere */
#instructionsModal .instruction-view-container {
    display: block !important;
    /* Not flex or grid - just normal block flow */
}

/* Override any inherited grid/flex from parent containers */
#instructionListContent {
    display: block !important;
    /* Normal block container, not grid itself */
}

/* ==========================================================================
   HENVISNINGSMALER - AGGRESSIV LAYOUT-FIKS
   ========================================================================== */

/* NUKE any old referral layout styles completely */
#instructionsModal .referral-dashboard-container,
#instructionsModal .referral-dashboard-item,
#instructionsModal .referral-category-info {
    display: none !important;
}

/* Force the content container to be normal block flow */
#instructionsModal .instruction-view-container {
    display: block !important;
    flex-direction: unset !important;
    grid-template-columns: unset !important;
    align-items: unset !important;
}

/* Kill any grid/flex on the main content area */
#instructionListContent {
    display: block !important;
    grid-template-columns: unset !important;
    flex-direction: unset !important;
    gap: unset !important;
}

/* Force category headers to be BLOCK and full-width */
.instruction-category-header {
    display: block !important;
    width: 100% !important;
    margin: 2rem 0 1rem 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--primary-dark) !important;
    background: linear-gradient(90deg, var(--primary-light), transparent) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 6px !important;
    clear: both !important;
    float: none !important;
    position: static !important;
    /* Nuclear option - kill ALL layout properties */
    flex: none !important;
    grid-column: unset !important;
    grid-row: unset !important;
    align-self: unset !important;
    justify-self: unset !important;
}

/* Force grid containers to be proper CSS Grid */
.instruction-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    padding: 0 !important;
    clear: both !important;
    /* Nuclear option - kill inherited properties */
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
    position: static !important;
}

/* Ensure cards are flex columns */
.instruction-item-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px !important;
    width: auto !important;
    max-width: none !important;
    position: relative !important;
}

/* NUCLEAR: Override any parent container that might be causing side-by-side layout */
#instructionsModal .modal-body,
#instructionsModal .instruction-modal-body {
    display: flex !important;
    flex-direction: column !important;
}

/* Make sure the view container doesn't use any fancy layouts */
#instructionsModal .view-content.is-active {
    display: block !important;
    width: 100% !important;
}

/* Special override for when we're showing referral templates */
#instructionsModal[data-current-type="referral"] .instruction-view-container,
#instructionsModal[data-current-type="referral"] #instructionListContent {
    display: block !important;
    flex-direction: unset !important;
}
/* Add these classes to your cssindex.css file to replace inline styles */

/* QR Scanner Modal Styles */
.qr-modal-content {
    text-align: center;
}

.qr-modal-body {
    padding: 0;
}

.qr-video {
    width: 100%;
    border-radius: 0.75rem 0.75rem 0 0;
}

.qr-scan-status {
    padding: 1rem;
    color: var(--text-muted);
}

/* Emergency UI Styles (for the showEmergencyUI function in main.js) */
.emergency-container {
    padding: 2rem;
    text-align: center;
    background: var(--bg-white);
    border-radius: 8px;
    margin: 2rem;
    box-shadow: var(--shadow-medium);
}

.emergency-icon {
    font-size: 4rem;
    color: var(--accent-error);
    margin-bottom: 1rem;
}

.emergency-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.emergency-text {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.emergency-error-box {
    background: var(--bg-light);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 2rem;
    font-family: monospace;
    text-align: left;
}

.emergency-button-primary {
    margin-right: 1rem;
}
.qr-video {
    width: 100%;
    height: 400px; /* KRITISK: Html5Qrcode trenger høyde */
    border-radius: 0.75rem 0.75rem 0 0;
    background: #000; /* Viser at elementet eksisterer */
}

/* Add this CSS to make the scanner modal larger */
#scanQrModal {
    max-width: 90vw !important;
    max-height: 95vh !important;
    width: auto !important;
}

#scanQrModal .modal-content {
    width: 100% !important;
    max-width: none !important;
    padding: 20px !important;
}

/* Make sure the video container takes full space */
#qrVideo {
    width: 100% !important;
    height: 70vh !important;
    min-height: 500px !important;
    max-height: 800px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 3px solid #ccc !important;
}

/* Status text styling */
#qrScanStatus {
    text-align: center;
    font-size: 1.2rem;
    margin: 15px 0;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
.styled-select-wrapper {
  min-height: 40px;  /* Fixed height */
}

.button {
  padding: 0.6rem 1rem;  /* Variable height based on content */
}
/* Main QR container - UPDATE THIS */
#qrCodeContainer {
    width: auto !important;
    height: auto !important;
    min-height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* QR code elements - ADD THIS */
#qrCodeContainer svg,
#qrCodeContainer canvas,
#qrCodeContainer img {
    width: 300px !important;
    height: 300px !important;
    max-width: none !important;
    max-height: none !important;
}

/* Modal content sizing - UPDATE IF EXISTS */
.modal-content.qr-modal-content,
.mobile-qr-container {
    min-width: 400px;
    width: auto;
}

/* Override any existing QR specific rules */
.qr-code-container,
.qr-generated {
    width: auto !important;
    height: auto !important;
}
/* ============================================= */
/* ==       NEW POPOVER MENU STYLES           == */
/* ============================================= */
.popover-menu {
    position: fixed;
    z-index: 1050; /* Ensure it's on top of other content */
    
    /* Dynamic positioning via CSS Custom Properties (CSP-Compliant) */
    left: var(--popover-left, 0);
    top: var(--popover-top, 0);
    transform: translateX(-50%);
    
    background-color: var(--bg-white);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    padding: 8px 0;
    min-width: 250px;
    
    transform-origin: bottom center;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Visibility classes */
.popover-menu.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.95);
    pointer-events: none; /* Can't be clicked when hidden */
}

/* The little arrow pointing down */
.popover-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px; /* Position it just below the popover */
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: var(--bg-white) transparent transparent transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
}

.popover-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 280px; /* Allow for some scrolling */
    overflow-y: auto;
}

.popover-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: background-color 0.1s ease-in-out;
    white-space: nowrap;
}

.popover-menu-item:hover {
    background-color: var(--bg-light-hover);
}

.popover-menu-item .material-icons {
    font-size: 20px;
    color: var(--text-secondary);
}
/* ADD these styles to cssindex.css */

/* Welcome Modal Styles */
.welcome-modal .modal-content {
    max-width: 720px;
    width: 95%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    background: var(--bg-white);
}

.welcome-hero {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: white;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.welcome-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    pointer-events: none;
}

.welcome-logo {
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.welcome-logo-img {
    height: 80px;
    width: auto;
    filter: brightness(0) invert(1);
    drop-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.3;
}

.welcome-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
    position: relative;
    z-index: 2;
    font-weight: 400;
}

.welcome-content {
    padding: 2rem 2.5rem;
}

.welcome-intro {
    text-align: center;
    margin-bottom: 2rem;
}

.welcome-intro h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.welcome-intro p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

.welcome-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.welcome-step.welcome-mode-option {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.welcome-step.welcome-mode-option:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.15);
}

.welcome-step .step-number {
    position: static;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.welcome-step .step-number .material-icons {
    font-size: 1.5rem;
}

.welcome-step .step-content h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
}

.welcome-step .step-content p {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 500;
}

.welcome-step .step-content ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.welcome-step .step-content ul li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.welcome-step .step-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
}

.welcome-step .step-content ul li em {
    color: var(--text-muted);
}

.welcome-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #f0f9ff;
    color: #0369a1;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    border: 1px solid #bae6fd;
}

.welcome-note .material-icons {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.welcome-footer {
    background: var(--bg-light);
    border-top: 1px solid #e2e8f0;
    padding: 1.25rem 2rem;
}

.welcome-footer .modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.welcome-footer .button.secondary {
    background: var(--bg-white);
    border: 1px solid #d1d5db;
    color: var(--text-muted);
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.welcome-footer .button.secondary:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.welcome-start-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.welcome-start-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.welcome-start-btn .material-icons {
    font-size: 1.1rem;
}

/* Mobile responsiveness for welcome modal */
@media (max-width: 640px) {
    .welcome-modal .modal-content {
        max-width: 95%;
        margin: 1rem;
    }
    
    .welcome-steps {
        grid-template-columns: 1fr;
    }
    
    .welcome-hero {
        padding: 2rem 1.5rem;
    }
    
    .welcome-title {
        font-size: 1.5rem;
    }
    
    .welcome-content {
        padding: 1.5rem;
    }
    
    .welcome-footer .modal-actions {
        flex-direction: column;
    }
    
    .welcome-start-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Settings Guidance Styles */
.setup-guidance {
    margin-bottom: 2rem;
}

.guidance-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bg-info);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent-info);
}

.guidance-card .material-icons {
    color: var(--accent-info);
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.guidance-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.guidance-card p {
    margin: 0;
    color: var(--text-secondary);
}

.required-indicator {
    color: var(--accent-error);
    font-weight: bold;
    margin-left: 0.25rem;
}

/* Mobile responsiveness for welcome modal */
@media (max-width: 768px) {
    .welcome-steps {
        gap: 1rem;
    }
    
    .welcome-step {
        padding: 0.75rem;
    }
    
    .step-icon {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
}

/* cssindex.css */

/* === Auth Modal Improvements === */

/* Legacy auth-modal CSS fjernet — auth-service.js håndterer alt */

.version-badge {
    font-size: 0.6em;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    vertical-align: middle;
}
.secure-text {
    -webkit-text-security: disc;
}
/* Add these to your CSS file */
.warning-color { color: var(--accent-warning); }
.large-icon { font-size: 4rem; }
.small-text { font-size: 0.9rem; }

/* Popover positioning (adjust as needed) */
#referralTemplatePopover.popover-top { 
    /* Position above button using data attributes */ 
}
#referralTemplatePopover.popover-bottom { 
    /* Position below button using data attributes */ 
}
/* CSP-Compliant styles for migration dialog */
.migration-icon-large {
    font-size: 3.5rem !important;
    color: var(--primary) !important;
}

.migration-benefit-icon {
    color: var(--accent-success) !important;
    vertical-align: bottom !important;
}

.migration-actions-center {
    justify-content: center !important;
}

/* CSP-Compliant styles for form groups */
.form-group-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.form-group-disabled .input {
    background-color: var(--bg-light);
    color: var(--text-muted);
}

.form-group-disabled .form-help {
    color: var(--text-muted);
}
.sidebar-btn.danger-btn {
  background: var(--accent-error);
  color: var(--text-on-primary);
  border-color: #c62828;
}

.sidebar-btn.danger-btn:hover:not(:disabled) {
  background: #c62828;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
}


/* Add this to cssindex.css for better popover positioning */
.popover-menu.popover-above {
    transform: translateX(-50%) translateY(-100%);
}

.popover-menu.popover-above::after {
    top: 100%;
    bottom: auto;
    border-width: 0 8px 8px;
    border-color: transparent transparent var(--bg-white) transparent;
}
/* ===== HURTIGTASTER MODAL STYLING (CSP-KOMPATIBEL) ===== */

.shortcuts-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.shortcuts-section {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-light);
}

.shortcuts-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
}

.shortcuts-section-title .material-icons {
    font-size: 1.2rem;
    color: var(--accent-primary);
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
}

.shortcut-keys {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 140px;
}

.shortcut-keys kbd {
    background: var(--bg-white);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.shortcut-description {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    flex: 1;
}

.shortcut-description .material-icons {
    font-size: 1rem;
    color: var(--text-muted);
}

.shortcuts-footer {
    border-top: 1px solid var(--border-light);
    padding-top: 1rem;
    margin-top: 1rem;
}

.shortcuts-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.shortcuts-note .material-icons {
    font-size: 1rem;
    color: var(--accent-info);
    margin-top: 0.1rem;
}

/* Responsiv layout for mindre skjermer */
@media (max-width: 768px) {
    .shortcut-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .shortcut-keys {
        min-width: auto;
    }
}
/* Server Settings Specific Styles */
.server-config-form {
    background: var(--bg-white);
    padding: 1.5rem;
    border-radius: var(--main-border-radius);
    border: 1px solid var(--border-light);
    margin-bottom: 1rem;
}

.server-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.connection-status {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--main-border-radius);
    border-left: 4px solid var(--border-medium);
    background: var(--bg-light);
}

.connection-status.success {
    border-left-color: var(--accent-success);
    background: var(--status-completed-bg);
    color: var(--status-completed-text);
}

.connection-status.error {
    border-left-color: var(--accent-error);
    background: var(--status-recording-bg);
    color: var(--status-recording-text);
}

.server-status-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 1rem;
}

.server-status-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.server-status-item .material-icons {
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.server-status-item.success .material-icons {
    color: var(--accent-success);
}

.server-status-item.error .material-icons {
    color: var(--accent-error);
}

.microphone-test-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.audio-level-bar {
    width: 100%;
    height: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    overflow: hidden;
}

.audio-level-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-error));
    transition: width 0.1s linear;
}

.required-indicator {
    color: var(--accent-error);
    font-weight: bold;
}

.about-content {
    text-align: center;
}

.app-info {
    margin-bottom: 2rem;
}

.feature-list, .tech-info, .support-info {
    text-align: left;
    margin-bottom: 1.5rem;
}

.feature-list ul, .tech-info ul {
    margin-left: 1rem;
}

.maintenance-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Audio Settings Styles */
.audio-tips {
    background: var(--bg-light);
    padding: 1rem;
    border-radius: var(--main-border-radius);
    border-left: 4px solid var(--primary);
}

.audio-tips ul {
    margin: 0;
    padding-left: 1rem;
}

.audio-tips li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.audio-tips strong {
    color: var(--primary);
}








/* CONSULTATION CARD - NEW DESIGN (NO CONFLICTS) */
.consult-card-wrapper {
    padding-right: 2rem;
}

.consult-card-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.25rem;
    gap: 0.5rem;
}

.consult-card-title {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.consult-card-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    max-width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.consult-card-badge.status-status-draft {
    background: #fffde7;
    color: #5d4037;
}

.consult-card-badge.status-status-recording {
    background: #ffebee;
    color: #b71c1c;
}

.consult-card-badge.status-status-completed {
    background: #e8f5e9;
    color: #1b5e20;
}

.consult-icon {
    font-family: "Material Icons" !important;
    font-size: 0.8rem;
    line-height: 1;
    font-feature-settings: "liga" 1;
    -webkit-font-feature-settings: "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.consult-badge-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.consult-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.consult-card-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.consult-card-instruction {
    font-size: 0.75rem;
    color: #00897b;
    background: rgba(0, 137, 123, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
}

.consult-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    padding: 0.25rem;
    border-radius: 4px;
}

.consultation-item:hover .consult-delete-btn {
    opacity: 1;
}

.consult-delete-btn:hover {
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.1);
}




/* ============================================================================
   CHAT KONSULTASJON — Sentrert card-overlay
   Markup: index.html #consultationChatModal
   JS: js/consultation-chat.js
   ============================================================================ */

/* Overlay (full-viewport backdrop) */
.consultation-chat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
    animation: ccFadeIn 0.2s ease-out;
}

.consultation-chat-overlay.is-hidden {
    display: none;
}

@keyframes ccFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Card */
.consultation-chat-card {
    width: min(96vw, 1500px);
    height: min(94vh, 950px);
    background: var(--bg-white, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ccSlideIn 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes ccSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header med gradient + shimmer */
.consultation-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.consultation-chat-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: ccHeaderShimmer 5s infinite;
    pointer-events: none;
}

@keyframes ccHeaderShimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

.consultation-chat-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
    z-index: 1;
}

.consultation-chat-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
}

.consultation-chat-title-icon {
    background: rgba(255, 255, 255, 0.18);
    padding: 0.35rem;
    border-radius: 8px;
    font-size: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.consultation-chat-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
}

.consultation-chat-close-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 8px;
    padding: 0.45rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    position: relative;
    z-index: 1;
}

.consultation-chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.06);
}

.consultation-chat-close-btn .material-icons {
    font-size: 1.2rem;
}

/* Body (kontekst-info + meldinger) */
.consultation-chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-white, #fff);
    padding: 0;
    height: auto;
}

/* Kontekst-info-boks */
.consultation-chat-context-info {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, #eff6ff 0%, #e0f2fe 100%);
    border-bottom: 1px solid rgba(30, 64, 175, 0.12);
    flex-shrink: 0;
}

.consultation-chat-context-info-icon {
    flex-shrink: 0;
}

.consultation-chat-context-info-icon .material-icons {
    color: #1d4ed8;
    background: #fff;
    padding: 0.45rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.18);
    font-size: 1.1rem;
}

.consultation-chat-context-info-text {
    flex: 1;
    min-width: 0;
}

.consultation-chat-context-info-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.3rem;
}

.consultation-chat-context-bullets {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
}

.consultation-chat-context-bullets li {
    font-size: 0.8rem;
    color: #1e3a8a;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(30, 64, 175, 0.15);
}

.consultation-chat-context-info-help {
    margin: 0;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
}

/* Meldingsområde */
.consultation-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #1e40af transparent;
}

.consultation-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.consultation-chat-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1e40af, #1d4ed8);
    border-radius: 4px;
}

.consultation-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

/* Melding-wrapper */
.consultation-chat-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: ccMessageIn 0.3s ease-out;
}

@keyframes ccMessageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.consultation-chat-message-user {
    align-self: flex-end;
    align-items: flex-end;
}

.consultation-chat-message-ai,
.consultation-chat-message-error,
.consultation-chat-message-retry-error {
    align-self: stretch;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
}

/* Bubble */
.consultation-chat-bubble {
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    line-height: 1.55;
    font-size: 0.95rem;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.consultation-chat-bubble-user {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.consultation-chat-bubble-ai {
    background: #fff;
    color: var(--text-primary, #1e293b);
    border: 1px solid rgba(30, 64, 175, 0.14);
    border-bottom-left-radius: 4px;
    width: 100%;
    padding: 0.75rem 1rem;
}

.consultation-chat-bubble-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.consultation-chat-bubble-error .material-icons {
    font-size: 1.2rem;
}

/* Mal-tag i bruker-bubble (når shortcut er aktiv) */
.consultation-chat-message-shortcut-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    margin-bottom: 0.5rem;
    color: #fff;
    font-weight: 500;
}

.consultation-chat-message-shortcut-tag .material-icons {
    font-size: 0.95rem;
}

.consultation-chat-message-text {
    white-space: pre-wrap;
}

/* AI-header (label + "Kopier alt"-knapp) */
.consultation-chat-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(30, 64, 175, 0.12);
}

.consultation-chat-ai-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.consultation-chat-ai-label .material-icons {
    font-size: 1rem;
}

/* Section (når svaret er delt opp i flere rubrikker) */
.consultation-chat-section {
    margin-top: 0.5rem;
    border: 1px solid rgba(30, 64, 175, 0.12);
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
}

.consultation-chat-section + .consultation-chat-section {
    margin-top: 0.6rem;
}

.consultation-chat-section-single {
    border: none;
    background: transparent;
}

.consultation-chat-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(30, 64, 175, 0.06);
    border-bottom: 1px solid rgba(30, 64, 175, 0.1);
}

.consultation-chat-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e3a8a;
}

.consultation-chat-section-textarea {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.6rem 0.85rem;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-primary, #1e293b);
    resize: none;
    outline: none;
    overflow: hidden;
    box-sizing: border-box;
}

.consultation-chat-section-textarea:focus {
    background: #fff;
    box-shadow: inset 0 0 0 2px rgba(30, 64, 175, 0.15);
}

.consultation-chat-section-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.4rem 0.6rem 0;
}

/* Kopier-knapper */
.consultation-chat-copy-btn,
.consultation-chat-copy-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    background: #fff;
    border: 1px solid rgba(30, 64, 175, 0.2);
    border-radius: 6px;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.consultation-chat-copy-btn:hover,
.consultation-chat-copy-all-btn:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
}

.consultation-chat-copy-btn .material-icons,
.consultation-chat-copy-all-btn .material-icons {
    font-size: 0.95rem;
}

.consultation-chat-copy-btn.is-copied,
.consultation-chat-copy-all-btn.is-copied {
    background: #dcfce7;
    border-color: #16a34a;
    color: #15803d;
}

.consultation-chat-copy-btn-label {
    line-height: 1;
}

/* Footer (snarveier + input) */
.consultation-chat-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(30, 64, 175, 0.12);
    background: #f8fafc;
    padding: 0.75rem 1.25rem 1rem;
}

/* Snarvei-rad */
.consultation-chat-shortcuts-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}

.consultation-chat-shortcuts-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.consultation-chat-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.consultation-chat-shortcut-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.consultation-chat-shortcut-btn:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.consultation-chat-shortcut-btn:active {
    transform: scale(0.97);
}

.consultation-chat-shortcut-btn.is-active {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    border-color: #1e3a8a;
    color: #fff;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.3);
}

.consultation-chat-shortcut-btn .material-icons {
    font-size: 1rem;
}

.consultation-chat-shortcut-btn-label {
    line-height: 1;
}

/* «NAV-skjema ▾» — én knapp for rubrikkene 6.3–6.6 (nav-skjema.js) */
.consultation-chat-navmeny {
    position: relative;
    display: inline-flex;
}
.consultation-chat-navmeny-caret {
    margin-left: -0.15rem;
}
.consultation-chat-navmeny-list {
    /* Åpner OPPOVER: raden står nederst i et kort med overflow: hidden. */
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 19rem;
    max-width: min(26rem, 90vw);
    padding: 0.3rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.consultation-chat-navmeny-item {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #334155;
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
}
.consultation-chat-navmeny-item:hover,
.consultation-chat-navmeny-item:focus-visible {
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
}
.consultation-chat-navmeny-kode {
    flex: 0 0 auto;
    min-width: 2rem;
    font-weight: 700;
    color: #1e3a8a;
}
.consultation-chat-navvalg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.consultation-chat-navvalg-tekst {
    font-weight: 600;
}

/* Mal-badge (vises når shortcut er aktiv) */
.consultation-chat-badge-container {
    margin-bottom: 0.6rem;
}

.consultation-chat-badge-container.is-hidden {
    display: none;
}

.consultation-chat-shortcut-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem 0.35rem 0.7rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #93c5fd;
    border-radius: 999px;
    color: #1e3a8a;
    font-size: 0.82rem;
    font-weight: 500;
}

.consultation-chat-shortcut-badge .material-icons {
    font-size: 0.95rem;
}

.consultation-chat-shortcut-badge-label {
    line-height: 1;
}

.consultation-chat-shortcut-badge-close {
    background: rgba(30, 64, 175, 0.12);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1e3a8a;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.consultation-chat-shortcut-badge-close:hover {
    background: #1e40af;
    color: #fff;
}

.consultation-chat-shortcut-badge-close .material-icons {
    font-size: 0.85rem;
}

/* Input-rad */
.consultation-chat-input-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.consultation-chat-input-row:focus-within {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.consultation-chat-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary, #1e293b);
    padding: 0.35rem 0.25rem;
    min-height: 1.5em;
    max-height: 180px;
    overflow-y: auto;
}

.consultation-chat-input::placeholder {
    color: #94a3b8;
}

.consultation-chat-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    border: none;
    border-radius: 9px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    align-self: flex-end;
}

.consultation-chat-send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    box-shadow: 0 3px 10px rgba(30, 64, 175, 0.3);
    transform: translateY(-1px);
}

.consultation-chat-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.consultation-chat-send-btn.is-processing {
    opacity: 0.7;
    cursor: wait;
}

.consultation-chat-send-btn .material-icons {
    font-size: 1.1rem;
}

.consultation-chat-send-btn-label {
    line-height: 1;
}

/* Typing indicator (3 prikker) */
.consultation-chat-typing-wrapper {
    align-self: flex-start;
}

.consultation-chat-typing-indicator {
    background: #fff;
    border: 1px solid rgba(30, 64, 175, 0.14);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 0.85rem 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.consultation-chat-typing-indicator span {
    width: 7px;
    height: 7px;
    background: #1d4ed8;
    border-radius: 50%;
    animation: ccTypingDot 1.2s infinite ease-in-out;
}

.consultation-chat-typing-indicator span:nth-child(2) {
    animation-delay: 0.18s;
}

.consultation-chat-typing-indicator span:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes ccTypingDot {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-4px); }
}

.consultation-chat-typing-status {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: #475569;
    font-style: italic;
}

/* Retry-error (skytjeneste sviktet etter retries) */
.retry-error-box {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    color: #78350f;
    max-width: 100%;
}

.retry-error-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.retry-error-icon {
    color: #b45309;
    font-size: 1.3rem !important;
}

.retry-error-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #78350f;
}

.retry-error-desc {
    margin: 0 0 0.7rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #92400e;
}

.retry-error-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.retry-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, transform 0.1s;
}

.retry-error-btn:active {
    transform: scale(0.97);
}

.retry-error-btn-primary {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    color: #fff;
}

.retry-error-btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
}

.retry-error-btn-secondary {
    background: #fff;
    border-color: #d1d5db;
    color: #475569;
}

.retry-error-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.retry-error-btn .material-icons {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .consultation-chat-overlay {
        padding: 0;
    }
    .consultation-chat-card {
        width: 100%;
        height: 100vh;
        max-width: none;
        border-radius: 0;
    }
    .consultation-chat-message {
        max-width: 92%;
    }
    .consultation-chat-context-info {
        padding: 0.85rem 1rem;
    }
    .consultation-chat-messages {
        padding: 1rem;
    }
    .consultation-chat-footer {
        padding: 0.65rem 0.85rem 0.85rem;
    }
}




/* Fritekst KI - Cyan/teal (komplementær til grønn) */
.sidebar-btn.fritekst-ki {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.sidebar-btn.fritekst-ki:hover {
    background: linear-gradient(135deg, #0e7490, #155e75);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.sidebar-btn.fritekst-ki:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.2);
}

/* KI Journaloppsummering - Slate gray (nøytral, profesjonell) */
.sidebar-btn.journal-summary {
    background: linear-gradient(135deg, #475569, #334155);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.sidebar-btn.journal-summary:hover {
    background: linear-gradient(135deg, #334155, #1e293b);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

.sidebar-btn.journal-summary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(71, 85, 105, 0.2);
}



.factory-reset-btn {
  background: #d32f2f !important;
  color: white !important;
  border: 2px solid #b71c1c !important;
  font-weight: bold !important;
}

.factory-reset-btn:hover {
  background: #b71c1c !important;
  transform: scale(1.02);
}
/* Factory Reset Section Styling */
.new-settings-warning-box {
    background: linear-gradient(135deg, #ffebee, #fce4ec);
    border: 1px solid #f8bbd9;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.new-settings-warning-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.new-settings-warning-header .material-icons {
    color: #d32f2f;
    font-size: 1.5rem;
}

.new-settings-warning-header h4 {
    color: #d32f2f;
    margin: 0;
    font-weight: 600;
}

.new-settings-warning-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.new-settings-warning-list li {
    margin-bottom: 0.5rem;
}

.new-settings-button-danger {
    background: linear-gradient(135deg, #d32f2f, #c62828);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    justify-content: center;
}

.new-settings-button-danger:hover {
    background: linear-gradient(135deg, #c62828, #b71c1c);
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
    transform: translateY(-1px);
}

.new-settings-button-danger:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(211, 47, 47, 0.3);
}

.new-settings-button-danger:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}













/* CONNECTION TEST MODAL CSS - FULL UPDATED VERSION WITH SCROLLING FIX */

/* ============================================================================
   CONNECTION TEST MODAL STYLES - All prefixed with connection-test-
   ============================================================================ */

.connection-test-modal-content {
  max-width: 800px;
  max-height: 85vh; /* OPPDATERT: Redusert høyde for bedre tilpasning */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* NYTT: Forhindre overflow på modal-content */
}

.connection-test-modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px; /* OPPDATERT: Redusert gap */
  flex: 1;
  overflow-y: auto; /* NYTT: Gjør body scrollbar */
  min-height: 0; /* NYTT: Tillat flex shrinking */
  padding: 20px; /* NYTT: Legg til padding her i stedet */
}

/* ============================================================================
   CURRENT CONFIGURATION SECTION
   ============================================================================ */

.connection-test-current-config {
  background: var(--bg-light, #f8f9fa);
  border-radius: 8px;
  padding: 16px; /* OPPDATERT: Redusert padding */
  border-left: 4px solid var(--accent-primary, #007bff);
  flex-shrink: 0; /* NYTT: Ikke krymp denne seksjonen */
}

.connection-test-current-config h3 {
  margin: 0 0 12px 0; /* OPPDATERT: Redusert margin */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem; /* OPPDATERT: Litt mindre font */
  color: var(--text-primary, #333);
}

.connection-test-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px; /* OPPDATERT: Redusert gap */
}

.connection-test-config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0; /* OPPDATERT: Redusert padding */
  border-bottom: 1px solid var(--border-light, #e0e0e0);
}

.connection-test-config-item:last-child {
  border-bottom: none;
}

.connection-test-config-label {
  font-weight: 500;
  color: var(--text-secondary, #666);
  font-size: 0.9rem; /* NYTT: Litt mindre font */
}

.connection-test-config-value {
  font-family: 'Courier New', monospace;
  background: var(--bg-white, #fff);
  padding: 3px 6px; /* OPPDATERT: Redusert padding */
  border-radius: 4px;
  border: 1px solid var(--border-light, #e0e0e0);
  color: var(--text-primary, #333);
  font-size: 0.85rem; /* NYTT: Mindre font */
}

/* ============================================================================
   TEST RESULTS SECTION - SCROLLABLE
   ============================================================================ */

.connection-test-results-section {
  background: var(--bg-white, #fff);
  border-radius: 8px;
  border: 1px solid var(--border-light, #e0e0e0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 350px; /* NYTT: Begrens høyde på test-resultater */
  flex-shrink: 0; /* NYTT: Ikke krymp denne seksjonen */
}

.connection-test-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px; /* OPPDATERT: Redusert padding */
  background: var(--bg-light, #f8f9fa);
  border-bottom: 1px solid var(--border-light, #e0e0e0);
  flex-shrink: 0; /* NYTT: Ikke krymp header */
}

.connection-test-section-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem; /* OPPDATERT: Litt mindre font */
}

.connection-test-run-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px; /* OPPDATERT: Litt mindre padding */
  background: var(--accent-primary, #007bff);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem; /* OPPDATERT: Mindre font */
  transition: all 0.2s ease;
}

.connection-test-run-btn:hover {
  background: var(--accent-primary-dark, #0056b3);
  transform: translateY(-1px);
}

.connection-test-run-btn:disabled {
  background: var(--text-muted, #999);
  cursor: not-allowed;
  transform: none;
}

/* ============================================================================
   TEST ITEMS - SCROLLABLE CONTAINER
   ============================================================================ */

.connection-test-items-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* NYTT: Gjør test-items scrollbar */
  flex: 1; /* NYTT: Ta opp tilgjengelig plass */
  min-height: 0; /* NYTT: Tillat flex shrinking */
}

.connection-test-item {
  border-bottom: 1px solid var(--border-light, #e0e0e0);
  transition: background-color 0.2s ease;
  flex-shrink: 0; /* NYTT: Ikke krymp individuelle items */
}

.connection-test-item:last-child {
  border-bottom: none;
}

.connection-test-item:hover {
  background: var(--bg-light, #f8f9fa);
}

.connection-test-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px; /* OPPDATERT: Redusert padding */
}

.connection-test-item-title {
  display: flex;
  align-items: center;
  gap: 10px; /* OPPDATERT: Redusert gap */
  font-weight: 500;
  color: var(--text-primary, #333);
  font-size: 0.95rem; /* NYTT: Litt mindre font */
}

.connection-test-item-icon {
  color: var(--text-secondary, #666);
  font-size: 1.1rem; /* NYTT: Litt mindre ikon */
}

.connection-test-item-actions {
  display: flex;
  align-items: center;
  gap: 10px; /* OPPDATERT: Redusert gap */
}

.connection-test-single-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* OPPDATERT: Mindre knapp */
  height: 32px;
  background: var(--bg-light, #f8f9fa);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.connection-test-single-btn:hover:not(:disabled) {
  background: var(--accent-primary, #007bff);
  color: white;
  transform: scale(1.05);
}

.connection-test-single-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.connection-test-single-btn .material-icons {
  font-size: 1rem; /* NYTT: Mindre ikon i knapp */
}

.connection-test-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; /* OPPDATERT: Mindre status ikon */
  height: 28px;
  border-radius: 50%;
  font-size: 1.1rem; /* OPPDATERT: Mindre font */
}

/* Status icon states */
.connection-test-status-icon.connection-test-status-unknown {
  background: var(--bg-light, #f8f9fa);
  color: var(--text-muted, #999);
}

.connection-test-status-icon.connection-test-status-loading {
  background: var(--accent-warning, #ffc107);
  color: white;
  animation: connection-test-pulse 1.5s infinite;
}

.connection-test-status-icon.connection-test-status-success {
  background: var(--accent-success, #28a745);
  color: white;
}

.connection-test-status-icon.connection-test-status-error {
  background: var(--accent-error, #dc3545);
  color: white;
}

@keyframes connection-test-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.connection-test-item-details {
  padding: 0 16px 12px 16px; /* OPPDATERT: Redusert padding */
}

.connection-test-item-description {
  color: var(--text-secondary, #666);
  font-size: 0.85rem; /* OPPDATERT: Mindre font */
  margin-bottom: 8px; /* OPPDATERT: Redusert margin */
}

.connection-test-item-result {
  background: var(--bg-light, #f8f9fa);
  border-radius: 4px;
  padding: 8px 10px; /* OPPDATERT: Redusert padding */
  border-left: 4px solid var(--border-light, #e0e0e0);
  font-family: 'Courier New', monospace;
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
  line-height: 1.3; /* OPPDATERT: Redusert line-height */
}

.connection-test-result-placeholder {
  color: var(--text-muted, #999);
  font-style: italic;
}

.connection-test-result-success {
  border-left-color: var(--accent-success, #28a745);
  background: #f8fff9;
  color: var(--accent-success-dark, #155724);
}

.connection-test-result-error {
  border-left-color: var(--accent-error, #dc3545);
  background: #fff5f5;
  color: var(--accent-error-dark, #721c24);
}

.connection-test-result-info {
  border-left-color: var(--accent-primary, #007bff);
  background: #f8f9ff;
  color: var(--accent-primary-dark, #0056b3);
}

/* ============================================================================
   SUMMARY SECTION
   ============================================================================ */

.connection-test-summary-section {
  background: var(--bg-light, #f8f9fa);
  border-radius: 8px;
  padding: 16px; /* OPPDATERT: Redusert padding */
  border: 1px solid var(--border-light, #e0e0e0);
  flex-shrink: 0; /* NYTT: Ikke krymp summary */
}

.connection-test-summary-section h3 {
  margin: 0 0 12px 0; /* OPPDATERT: Redusert margin */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem; /* OPPDATERT: Mindre font */
}

.connection-test-summary-content {
  line-height: 1.5; /* OPPDATERT: Redusert line-height */
  font-size: 0.9rem; /* NYTT: Mindre font */
}

.connection-test-summary-placeholder {
  color: var(--text-muted, #999);
  font-style: italic;
}

.connection-test-summary-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px; /* OPPDATERT: Redusert margin */
  font-weight: 500;
}

.connection-test-summary-status.connection-test-status-all-good {
  color: var(--accent-success, #28a745);
}

.connection-test-summary-status.connection-test-status-partial {
  color: var(--accent-warning, #ffc107);
}

.connection-test-summary-status.connection-test-status-issues {
  color: var(--accent-error, #dc3545);
}

/* ============================================================================
   TECHNICAL DETAILS SECTION
   ============================================================================ */

.connection-test-technical-section {
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0; /* NYTT: Ikke krymp technical section */
}

.connection-test-technical-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px; /* OPPDATERT: Redusert padding */
  background: var(--bg-light, #f8f9fa);
  border: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-primary, #333);
  transition: background-color 0.2s ease;
  font-size: 0.9rem; /* NYTT: Mindre font */
}

.connection-test-technical-toggle:hover {
  background: var(--bg-secondary, #e9ecef);
}

.connection-test-technical-toggle .material-icons {
  transition: transform 0.2s ease;
}

.connection-test-technical-toggle.connection-test-expanded .material-icons {
  transform: rotate(180deg);
}

.connection-test-technical-content {
  padding: 16px; /* OPPDATERT: Redusert padding */
  background: var(--bg-white, #fff);
  border-top: 1px solid var(--border-light, #e0e0e0);
  display: none;
}

.connection-test-technical-content.connection-test-expanded {
  display: block;
}

.connection-test-technical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* OPPDATERT: Mindre min-width */
  gap: 12px; /* OPPDATERT: Redusert gap */
  margin-bottom: 16px; /* OPPDATERT: Redusert margin */
}

.connection-test-technical-item {
  display: flex;
  flex-direction: column;
  gap: 3px; /* OPPDATERT: Redusert gap */
}

.connection-test-technical-label {
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
  color: var(--text-secondary, #666);
  font-weight: 500;
}

.connection-test-technical-value {
  font-family: 'Courier New', monospace;
  background: var(--bg-light, #f8f9fa);
  padding: 4px 6px; /* OPPDATERT: Redusert padding */
  border-radius: 4px;
  border: 1px solid var(--border-light, #e0e0e0);
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
}

.connection-test-debug-section {
  margin-top: 16px; /* OPPDATERT: Redusert margin */
}

.connection-test-debug-label {
  display: block;
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
  color: var(--text-secondary, #666);
  font-weight: 500;
  margin-bottom: 6px; /* OPPDATERT: Redusert margin */
}

.connection-test-debug-output {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 12px; /* OPPDATERT: Redusert padding */
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem; /* OPPDATERT: Mindre font */
  line-height: 1.3; /* OPPDATERT: Redusert line-height */
  max-height: 150px; /* OPPDATERT: Redusert max-height */
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.connection-test-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px; /* OPPDATERT: Redusert padding */
  background: var(--bg-light, #f8f9fa);
  border-top: 1px solid var(--border-light, #e0e0e0);
  flex-shrink: 0; /* NYTT: Ikke krymp footer */
}

.connection-test-footer-info {
  display: flex;
  align-items: center;
  gap: 6px; /* OPPDATERT: Redusert gap */
  color: var(--text-secondary, #666);
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
}

.connection-test-footer-info .material-icons {
  font-size: 0.9rem; /* OPPDATERT: Mindre ikon */
}

/* ============================================================================
   RESPONSIVE DESIGN - FORBEDRET
   ============================================================================ */

@media (max-height: 700px) {
  .connection-test-modal-content {
    max-height: 90vh; /* Bruk mer plass på små skjermer */
  }
  
  .connection-test-results-section {
    max-height: 250px; /* Mindre plass til test-resultater */
  }
  
  .connection-test-current-config {
    padding: 12px; /* Mindre padding */
  }
  
  .connection-test-summary-section {
    padding: 12px; /* Mindre padding */
  }
}

@media (max-height: 600px) {
  .connection-test-modal-content {
    max-height: 95vh; /* Nesten full høyde på veldig små skjermer */
  }
  
  .connection-test-results-section {
    max-height: 200px; /* Enda mindre plass til test-resultater */
  }
  
  .connection-test-modal-body {
    gap: 12px; /* Mindre gap */
    padding: 15px; /* Mindre padding */
  }
}

@media (max-width: 768px) {
  .connection-test-modal-content {
    max-width: 95vw;
    margin: 10px auto; /* OPPDATERT: Mindre margin */
    max-height: 90vh; /* NYTT: Begrens høyde på mobil */
  }
  
  .connection-test-section-header {
    flex-direction: column;
    gap: 8px; /* OPPDATERT: Redusert gap */
    align-items: stretch;
    padding: 12px 16px; /* OPPDATERT: Redusert padding */
  }
  
  .connection-test-item-header {
    flex-direction: column;
    gap: 8px; /* OPPDATERT: Redusert gap */
    align-items: stretch;
    padding: 10px 12px; /* OPPDATERT: Redusert padding */
  }
  
  .connection-test-item-actions {
    justify-content: space-between;
  }
  
  .connection-test-config-item {
    flex-direction: column;
    align-items: stretch;
    gap: 3px; /* OPPDATERT: Redusert gap */
  }
  
  .connection-test-technical-grid {
    grid-template-columns: 1fr;
  }
  
  .connection-test-modal-footer {
    flex-direction: column;
    gap: 8px; /* OPPDATERT: Redusert gap */
    align-items: stretch;
    padding: 12px 16px; /* OPPDATERT: Redusert padding */
  }
  
  .connection-test-footer-info {
    text-align: center;
  }
  
  .connection-test-results-section {
    max-height: 300px; /* NYTT: Mer plass på mobil */
  }
}

/* ============================================================================
   ANIMATION CLASSES
   ============================================================================ */

.connection-test-loading {
  position: relative;
  overflow: hidden;
}

.connection-test-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: connection-test-shimmer 1.5s infinite;
}

@keyframes connection-test-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.connection-test-text-success {
  color: var(--accent-success, #28a745);
}

.connection-test-text-error {
  color: var(--accent-error, #dc3545);
}

.connection-test-text-warning {
  color: var(--accent-warning, #ffc107);
}

.connection-test-text-info {
  color: var(--accent-primary, #007bff);
}

.connection-test-hidden {
  display: none !important;
}

.connection-test-visible {
  display: block !important;
}

/* ============================================================================
   SCROLLBAR STYLING (WEBKIT BROWSERS)
   ============================================================================ */

.connection-test-modal-body::-webkit-scrollbar,
.connection-test-items-container::-webkit-scrollbar,
.connection-test-debug-output::-webkit-scrollbar {
  width: 6px;
}

.connection-test-modal-body::-webkit-scrollbar-track,
.connection-test-items-container::-webkit-scrollbar-track,
.connection-test-debug-output::-webkit-scrollbar-track {
  background: var(--bg-light, #f8f9fa);
  border-radius: 3px;
}

.connection-test-modal-body::-webkit-scrollbar-thumb,
.connection-test-items-container::-webkit-scrollbar-thumb,
.connection-test-debug-output::-webkit-scrollbar-thumb {
  background: var(--text-muted, #999);
  border-radius: 3px;
}

.connection-test-modal-body::-webkit-scrollbar-thumb:hover,
.connection-test-items-container::-webkit-scrollbar-thumb:hover,
.connection-test-debug-output::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, #666);
}







/* ============================================================================
   HENVISNINGSMODAL – REDESIGNET CSS
   Prefix: refm-
   Matcher dashboardets designsystem: variabler, border-radius, shadows, etc.
   
   Erstatter ALT med gammel refmodal- prefix i cssindex.css
   (ca. linje 7228–8120 + duplikat rundt 9358–9540)
   ============================================================================ */

/* ==========================================================================
   MODAL CONTAINER
   ========================================================================== */

.refmodal-fullscreen {
  max-width: 1200px;
  width: 95vw;
  height: 88vh;
  max-height: 820px;
  border-radius: var(--modal-border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  box-shadow: var(--shadow-strong);
}

/* Use standard .modal-header — no custom header needed */

/* ==========================================================================
   STEPPER (progress indicator)
   ========================================================================== */

.refm-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  flex-shrink: 0;
}

.refm-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.refm-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 2px solid var(--border-light);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.refm-step-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.25s ease;
}

.refm-step.is-active .refm-step-num {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.refm-step.is-active .refm-step-label {
  color: var(--primary);
  font-weight: 600;
}

.refm-step.is-completed .refm-step-num {
  background: var(--accent-success);
  color: var(--text-on-primary);
  border-color: var(--accent-success);
}

.refm-step.is-completed .refm-step-label {
  color: var(--accent-success);
}

.refm-step-line {
  width: 40px;
  height: 2px;
  background: var(--border-light);
  margin: 0 0.5rem;
  transition: background 0.25s ease;
}

.refm-step.is-completed + .refm-step-line,
.refm-step-line.is-completed {
  background: var(--accent-success);
}


/* ==========================================================================
   THREE-COLUMN BODY
   ========================================================================== */

.refm-body {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 1.4fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Venstre panel: scrollbart oppsett-innhold (type + maler + årsak + knapper) */
.refm-setup {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 1rem;
}


/* ==========================================================================
   PANELS (shared)
   ========================================================================== */

.refm-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.refm-panel-header {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.refm-panel-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}


/* ==========================================================================
   LEFT PANEL – SPESIALITETER
   ========================================================================== */

.refm-panel-left {
  background: var(--bg-white);
  border-right: 1px solid var(--border-light);
}

/* Search */
.refm-search {
  position: relative;
  padding: 0.75rem 1rem 0;
}

.refm-search-icon {
  position: absolute;
  left: 1.625rem;
  top: 50%;
  transform: translateY(-25%);
  font-size: 18px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s;
}

.refm-search-input {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
  font-size: 0.875rem !important;
  border-radius: var(--main-border-radius) !important;
}

.refm-search-input:focus + .refm-search-icon,
.refm-search:focus-within .refm-search-icon {
  color: var(--primary);
}

.refm-search-clear {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-25%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}

.refm-search-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.refm-search-clear.visible {
  display: flex;
}

.refm-search-clear .material-icons {
  font-size: 15px;
}

.refm-search-count {
  padding: 0.25rem 1rem 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  min-height: 1.25rem;
}

.refm-search-count.no-results {
  color: var(--accent-error);
}

/* Specialties list — 5 kuraterte henvisningstyper, ligger inni .refm-setup */
.refm-specialties-list {
  flex: none;
  overflow: visible;
  padding: 0.25rem 0 0;
}

/* Category */
.refm-category {
  margin-bottom: 0.25rem;
}

.refm-category-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.refm-category-header .material-icons {
  font-size: 14px;
  opacity: 0.6;
}

/* Specialty item — flat list style like consultation-item */
.refm-specialty-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 1.25rem;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.refm-specialty-btn:hover {
  background: var(--bg-hover);
}

.refm-specialty-btn.is-selected {
  background: var(--primary-light);
  border-left-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 500;
}

.refm-specialty-btn .material-icons {
  font-size: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  transition: color 0.15s;
}

.refm-specialty-btn.is-selected .material-icons {
  color: var(--primary);
}

.refm-specialty-name {
  flex: 1;
  line-height: 1.3;
}

/* Search highlighting */
.refm-specialty-btn .search-highlight {
  background: #fff3cd;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

.refm-specialty-btn.hidden-by-search {
  display: none !important;
}

.refm-category.hidden-by-search {
  display: none !important;
}


/* ==========================================================================
   MIDDLE PANEL – KONFIGURASJON
   ========================================================================== */

.refm-panel-mid {
  background: var(--bg-light);
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
}

.refm-section {
  padding: 1rem 1.5rem 0;
}

.refm-section:last-of-type {
  padding-bottom: 0;
}

.refm-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Templates — chip/pill style */
.refm-templates {
  min-height: 48px;
}

.refm-empty-state {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
  padding: 0.75rem 0;
  margin: 0;
}

.refm-template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.refm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.875rem;
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  line-height: 1.4;
}

.refm-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.refm-chip.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(25, 118, 210, 0.25);
}

.refm-chip .material-icons {
  font-size: 14px;
}

.refm-chip-auto {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 500;
  cursor: default;
}

.refm-chip-auto .material-icons {
  font-size: 13px;
  color: var(--primary);
}

/* No templates message */
.refm-no-templates {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  font-size: 0.825rem;
  color: var(--text-muted);
}

.refm-no-templates .material-icons {
  font-size: 16px;
  color: var(--accent-warning);
}

/* Reason textarea */
.refm-reason-input {
  font-size: 0.9rem !important;
  border-radius: var(--main-border-radius) !important;
  resize: vertical;
  min-height: 70px;
}

.refm-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Action buttons */
.refm-actions {
  padding: 1rem 1.5rem 1.25rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0; /* festet i bunnen av panelet, utenfor scroll-området */
}

.refm-generate-btn {
  flex: 1;
  min-width: 160px;
}

.refm-standard-btn {
  flex: 0 1 auto;
}


/* ==========================================================================
   RIGHT PANEL – RESULTAT
   ========================================================================== */

.refm-panel-right {
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
}

/* Empty state */
.refm-result-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
}

.refm-result-empty .material-icons {
  font-size: 2.5rem;
  opacity: 0.25;
  margin-bottom: 0.75rem;
}

.refm-result-empty p {
  font-size: 0.875rem;
  font-style: italic;
  margin: 0;
}

/* Result content */
.refm-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Toolbar — matches response-header-actions style */
.refm-result-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  flex-shrink: 0;
}

.refm-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  height: 32px;
  white-space: nowrap;
  border-radius: var(--main-border-radius);
  border: 1px solid #dce3ed;
  background: var(--bg-hover);
  color: #3a4a5c;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.refm-toolbar-btn:hover {
  background: #dfe8f3;
  border-color: #c5d1e0;
  color: #1d2d3f;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1);
  transform: translateY(-1px);
}

.refm-toolbar-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.refm-toolbar-btn .material-icons {
  font-size: 15px;
  opacity: 0.6;
}

.refm-toolbar-btn:hover .material-icons {
  opacity: 1;
}

.refm-toolbar-btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  font-weight: 600;
  margin-left: auto;
}

.refm-toolbar-btn-primary .material-icons {
  opacity: 0.9;
  color: var(--text-on-primary);
}

.refm-toolbar-btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-on-primary);
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
}

/* Result textarea */
.refm-result-textarea {
  flex: 1;
  resize: none;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  padding: 1.25rem;
  border: none;
  border-radius: 0;
  background: var(--bg-white);
  color: var(--text-primary);
  outline: none;
}

.refm-result-textarea:focus {
  box-shadow: inset 0 0 0 2px rgba(25, 118, 210, 0.1);
}


/* ==========================================================================
   TEMPLATE PREVIEW
   ========================================================================== */

.refm-template-preview {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
  font-family: 'Roboto Mono', 'SF Mono', 'Monaco', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  max-height: 500px;
  overflow-y: auto;
  white-space: pre-wrap;
}


/* ==========================================================================
   SCROLLBAR (subtle, matching dashboard)
   ========================================================================== */

.refm-specialties-list::-webkit-scrollbar,
.refm-panel-mid::-webkit-scrollbar,
.refm-result-textarea::-webkit-scrollbar,
.refm-template-preview::-webkit-scrollbar {
  width: 5px;
}

.refm-specialties-list::-webkit-scrollbar-track,
.refm-panel-mid::-webkit-scrollbar-track,
.refm-result-textarea::-webkit-scrollbar-track,
.refm-template-preview::-webkit-scrollbar-track {
  background: transparent;
}

.refm-specialties-list::-webkit-scrollbar-thumb,
.refm-panel-mid::-webkit-scrollbar-thumb,
.refm-result-textarea::-webkit-scrollbar-thumb,
.refm-template-preview::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

.refm-specialties-list::-webkit-scrollbar-thumb:hover,
.refm-panel-mid::-webkit-scrollbar-thumb:hover,
.refm-result-textarea::-webkit-scrollbar-thumb:hover,
.refm-template-preview::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .refm-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .refm-panel-left {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    max-height: 48vh;
  }

  .refm-panel-mid {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .refm-specialties-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
  }

  .refm-category {
    width: 100%;
  }

  .refm-specialty-btn {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
  }

  .refm-specialty-btn.is-selected {
    border-left: none;
    border-bottom-color: var(--primary);
  }
}

@media (max-width: 768px) {
  .refmodal-fullscreen {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
  }

  .refm-stepper {
    padding: 0.5rem 1rem;
  }

  .refm-step-label {
    display: none;
  }

  .refm-actions {
    flex-direction: column;
  }

  .refm-result-toolbar {
    flex-wrap: wrap;
  }
}

/* Sørger for at selve "kortet" ikke kan bli for bredt */
.consultation-item {
  width: 100%;
  box-sizing: border-box; /* Veldig viktig! */
}

/* Sikrer at lang tekst inni kortet brytes korrekt */
.consultation-item .consult-card-title,
.consultation-item .patient-info {
  word-break: break-word; /* Tvinger bryting av lange ord */
  overflow-wrap: break-word; /* Alternativ for bedre bryting */
  white-space: normal;
}




/* =================================================================== */
/* START: NY STYLING FOR CONNECTION TEST MODAL (PROFESJONELL DASHBOARD) */
/* Prefix: conntest-                                                   */
/* =================================================================== */

/* --- Hoved-layout for modalen --- */
.conntest-modal-content {
  max-width: 800px; /* Bredere modal for bedre oversikt */
}

.conntest-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Luft mellom seksjonene */
  background-color: var(--bg-light); /* En litt mørkere bakgrunn for kontrast */
  padding: 24px;
}

.conntest-section {
  background-color: var(--bg-white);
  border-radius: 8px;
  padding: 16px 20px;
  border: 1px solid var(--border-color-light);
}

.conntest-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 12px;
}

.conntest-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Konfigurasjons-seksjon (øverst) --- */
.conntest-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.conntest-config-item {
  font-size: 0.9rem;
}

.conntest-config-label {
  font-weight: 500;
  color: var(--text-secondary);
  margin-right: 8px;
}

.conntest-config-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* --- Testresultater-seksjon --- */
.conntest-items-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.conntest-item {
  border: 1px solid var(--border-color-light);
  border-radius: 6px;
  overflow: hidden; /* For å holde alt pent inne i kortet */
}

.conntest-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--bg-very-light);
}

.conntest-item-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--text-primary);
}

.conntest-item-icon {
  color: var(--text-muted);
}

.conntest-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.conntest-status-icon .material-icons {
  font-size: 20px;
}

/* Farger for status-ikoner */
.conntest-status-icon.conntest-status-unknown { color: var(--text-muted); }
.conntest-status-icon.conntest-status-loading { color: var(--accent-primary); animation: conntest-spin 1.5s linear infinite; }
.conntest-status-icon.conntest-status-success { background-color: #d4edda; color: #155724; }
.conntest-status-icon.conntest-status-error   { background-color: #f8d7da; color: #721c24; }
.conntest-status-icon.conntest-status-warning { background-color: #fff3cd; color: #856404; }

@keyframes conntest-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* --- Detaljert Server Test Kort --- */
.conntest-item-details {
  padding: 8px 16px 12px 16px;
}

.conntest-components-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.conntest-components-list li {
  display: grid;
  grid-template-columns: 24px 120px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border-color-light);
  font-size: 0.9rem;
}
.conntest-components-list li:first-child {
  border-top: none;
}

.conntest-component-icon {
  font-size: 20px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.conntest-component-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.conntest-component-message {
  color: var(--text-muted);
  font-family: var(--font-mono);
  word-break: break-word; /* Bryt lange feilmeldinger */
}

/* Status-farger for komponent-rader */
li.conntest-component-status-success .conntest-component-icon,
li.conntest-component-status-success .conntest-component-message {
  color: var(--accent-success);
}
li.conntest-component-status-error .conntest-component-icon,
li.conntest-component-status-error .conntest-component-message {
  color: var(--accent-error);
  font-weight: 500;
}
li.conntest-component-status-warning .conntest-component-icon,
li.conntest-component-status-warning .conntest-component-message {
  color: var(--accent-warning);
}
li.conntest-component-status-success .conntest-component-icon {
  font-weight: bold;
}

/* --- Enkle Test Kort (Claude Server/Bedrock) --- */
.conntest-item-result {
  padding: 12px 16px;
  font-size: 0.9rem;
}

.conntest-result-placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.conntest-result-message {
  padding: 10px;
  border-radius: 4px;
  border-left: 4px solid;
  word-break: break-word;
}

.conntest-result-message.conntest-success {
  background-color: #f4f9f4;
  border-color: var(--accent-success);
  color: var(--text-primary);
}

.conntest-result-message.conntest-error {
  background-color: #fef6f6;
  border-color: var(--accent-error);
  color: var(--text-primary);
}

/* --- Sammendrag-seksjon --- */
.conntest-summary-content {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}
.conntest-summary-placeholder {
  color: var(--text-muted);
}
/* Flere stiler for selve sammendraget kan legges til her */


/* --- Tekniske detaljer-seksjon --- */
.conntest-technical-section {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.conntest-technical-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  color: var(--text-secondary);
  padding: 4px;
}
.conntest-technical-toggle .material-icons {
  transition: transform 0.3s ease;
}
.conntest-technical-toggle.conntest-expanded .material-icons {
  transform: rotate(180deg);
}

.conntest-technical-content {
  display: none; /* Vises av JS */
  padding: 16px;
  margin-top: 8px;
  background-color: var(--bg-very-light);
  border-radius: 6px;
}
.conntest-technical-toggle.conntest-expanded + .conntest-technical-content {
  display: block;
}
.conntest-technical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.conntest-debug-label {
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}
.conntest-debug-output {
  background-color: #2d2d2d;
  color: #f0f0f0;
  padding: 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Footer --- */
.conntest-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conntest-footer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* =================================================================== */
/* SLUTT: NY STYLING FOR CONNECTION TEST MODAL                         */
/* =================================================================== */













/* Audio File Drop Zone */
.audio-file-drop-container {
    position: relative;
    margin: 0 0.5rem;
}

.audio-file-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-white);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.audio-file-drop-zone:hover {
    border-color: var(--accent-primary);
    background: var(--bg-light);
    transform: translateY(-2px);
}

.audio-file-drop-zone.drag-over {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
    transform: scale(1.05);
}

.audio-file-drop-zone .material-icons {
    font-size: 2rem;
    color: var(--accent-primary);
}

.audio-file-drop-zone .drop-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.audio-file-drop-zone .drop-subtext {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.audio-file-drop-zone.processing {
    border-color: var(--accent-warning);
    pointer-events: none;
}





/* ==============================================
   USER SWITCHER STYLES - Multi-user support
   ============================================== */

.user-switcher {
    position: relative;
    margin-left: 8px;
    display: inline-block;
}

.user-switcher-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 320px;
    z-index: 1000;
    overflow: hidden;
}

.user-switcher-header {
    padding: 12px 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.user-switcher-list {
    max-height: 300px;
    overflow-y: auto;
}

.user-switcher-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.user-switcher-item:hover:not(.current-user) {
    background-color: var(--bg-light);
}

.user-switcher-item.current-user {
    background-color: #e3f2fd;
    cursor: default;
}

.user-switcher-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
}

.user-switcher-info {
    flex: 1;
    min-width: 0;
}

.user-switcher-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-switcher-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-switcher-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.user-switcher-badge {
    background: #4caf50;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.user-switcher-arrow {
    color: var(--text-muted);
    font-size: 20px;
    margin-left: 8px;
}

.user-switcher-footer {
    padding: 8px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
}

.user-switcher-add-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.user-switcher-add-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.user-switcher-add-btn .material-icons {
    font-size: 18px;
}

.user-switcher-empty,
.user-switcher-error {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.user-switcher-error {
    color: #f44336;
}


















/* ============================================
   CONTEXT MODAL - BILDE-STØTTE
   Legg til denne CSS-en i styles.css
   ============================================ */

/* Context Modal Bilde-støtte */
.context-bilde-upload-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #f6f8fb;
    border-radius: 10px;
    border: 2px dashed #d0d8e4;
    position: relative;
    transition: all 0.3s ease;
}

.context-bilde-upload-section.drag-active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.context-bilde-upload-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3a4a5c;
}

.context-bilde-upload-header h3 .material-icons {
    font-size: 1.2rem;
    color: #5a7394;
}

.context-bilde-upload-header p {
    margin: 0 0 1rem 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.context-image-thumbnails {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    min-height: 0;
}

.context-bilde-thumbnail {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d0d8e4;
    background: var(--bg-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.context-bilde-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.context-bilde-thumbnail-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.context-bilde-thumbnail-remove:hover {
    background: rgba(220, 38, 38, 0.9);
}

.context-bilde-thumbnail-remove .material-icons {
    font-size: 16px;
}

.context-bilde-thumbnail-size {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
}

.context-bilde-upload-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.context-bilde-upload-button .button.secondary {
    background: var(--bg-hover);
    color: #3a4a5c;
    border: 1px solid #dce3ed;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
}

.context-bilde-upload-button .button.secondary:hover:not(:disabled) {
    background: #dfe8f3;
    border-color: #c5d1e0;
    color: #1d2d3f;
    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1);
    transform: translateY(-1px);
}

.context-bilde-upload-button .button.secondary .material-icons {
    font-size: 1rem;
    color: #5a7394;
}

.context-bilde-upload-button .text-muted {
    font-size: 0.8rem;
}

.context-image-drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(25, 118, 210, 0.06);
    border: 3px dashed var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.context-image-drop-content {
    text-align: center;
    color: var(--primary);
}

.context-image-drop-content .material-icons {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.context-image-drop-content p {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* CSS-TILLEGG FOR FLERE FILER - Legg til i journal-summary.css */

/* Container for filliste */
.journal-files-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
  max-height: 300px;
  overflow-y: auto;
}

/* Enkelt fil-item */
.journal-file-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg-light);
  border-radius: 6px;
  transition: background 0.2s;
}

.journal-file-item:hover {
  background: #e9ecef;
}

/* Ikon for fil */
.file-item-icon {
  color: #1976d2;
  margin-right: 12px;
  font-size: 24px;
}

/* Fil-detaljer */
.file-item-details {
  flex: 1;
  min-width: 0; /* For å få text-overflow til å fungere */
}

.file-item-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.file-item-stats {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Fjern-knapp for hver fil */
.file-item-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-muted);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-item-remove:hover {
  background: #dc3545;
  color: white;
}

.file-item-remove .material-icons {
  font-size: 20px;
}

/* Scrollbar styling for filliste */
.journal-files-list::-webkit-scrollbar {
  width: 8px;
}

.journal-files-list::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 4px;
}

.journal-files-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.journal-files-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Responsiv design for mindre skjermer */
@media (max-width: 768px) {
  .journal-file-item {
    padding: 6px 10px;
  }
  
  .file-item-icon {
    font-size: 20px;
    margin-right: 8px;
  }
  
  .file-item-name {
    font-size: 14px;
  }
  
  .file-item-stats {
    font-size: 11px;
  }
}









/* voice-insert.css */
/* Styling for Voice Insert-funksjonalitet */

/* Voice Insert-knapp i header */
#voiceInsertBtn {
    position: relative;
    transition: all 0.3s ease;
}

#voiceInsertBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#voiceInsertBtn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Recording state - rød pulserende */
#voiceInsertBtn.voiceinsert-recording {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: #dc2626;
    animation: voiceinsert-pulse 1.5s ease-in-out infinite;
}

#voiceInsertBtn.voiceinsert-recording .material-icons {
    animation: voiceinsert-icon-pulse 1.5s ease-in-out infinite;
}

/* Processing state */
#voiceInsertBtn.voiceinsert-processing {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-color: #f59e0b;
    pointer-events: none;
}

#voiceInsertBtn.voiceinsert-processing .material-icons {
    animation: voiceinsert-spin 1s linear infinite;
}

/* Pulse animation for recording button */
@keyframes voiceinsert-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
        transform: scale(1.05);
    }
}

/* Icon pulse animation */
@keyframes voiceinsert-icon-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Spin animation for processing */
@keyframes voiceinsert-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #voiceInsertBtn span:not(.material-icons) {
        display: none;
    }
    
    #voiceInsertBtn {
        min-width: 40px;
        padding: 8px;
    }
}

/* Tolkemodus - Indigo (kommunikasjon/språk) */
.sidebar-btn.interpreter-mode {
    background: linear-gradient(135deg, #3f51b5 0%, #303f9f 100%);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.sidebar-btn.interpreter-mode:hover {
    background: linear-gradient(135deg, #5c6bc0 0%, #283593 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3);
}

.sidebar-btn.interpreter-mode:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(63, 81, 181, 0.2);
}

/* Videokonsultasjon - Teal/Cyan (telemedisin/video) */
.sidebar-btn.video-consult {
    background: linear-gradient(135deg, #0097a7 0%, #00838f 100%);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.sidebar-btn.video-consult:hover {
    background: linear-gradient(135deg, #00acc1 0%, #006064 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 151, 167, 0.3);
}

.sidebar-btn.video-consult:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 151, 167, 0.2);
}

/* Badge for ventende pasienter */
.video-waiting-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #f44336;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.video-waiting-badge.hidden {
    display: none;
}


/* Submeny styling for fritekst-ki - matcher eksisterende fritekst.css */

/* Sørg for at parent-containere ikke klipper submeny */
.fritekst-instruction-dropdown-container,
#fritekstInstructionDropdown,
.fritekst-dropdown-content {
    overflow: visible !important;
}

/* Container for items som har submeny */
/* ==========================================================================
   SMART SUBMENU POSISJONERING
   Unngår overflow ved å vise subitems oppover, nedover eller begge veier
   ========================================================================== */

/* Hovedmeny-item med submenu */
.fritekst-dropdown-item.fritekst-has-submenu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Submenu container - standard posisjonering (nedover) */
.fritekst-dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    max-width: 280px;
    width: max-content;
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 4px;
}

/* Scrollbar styling for submenu */
.fritekst-dropdown-submenu::-webkit-scrollbar {
    width: 6px;
}

.fritekst-dropdown-submenu::-webkit-scrollbar-track {
    background: var(--bg-hover);
    border-radius: 3px;
}

.fritekst-dropdown-submenu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.fritekst-dropdown-submenu::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Åpne til venstre hvis ikke plass til høyre */
.fritekst-dropdown-submenu.position-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
}

/* Vis submeny ved hover */
.fritekst-dropdown-item.fritekst-has-submenu:hover > .fritekst-dropdown-submenu {
    display: block;
}

/* POSISJONERING OPPOVER - når ikke plass nedover */
.fritekst-dropdown-submenu.position-upward {
    top: auto;
    bottom: 0;
}

/* POSISJONERING BEGGE VEIER - når ikke nok plass hverken opp eller ned */
.fritekst-dropdown-submenu.position-split {
    top: 50%;
    transform: translateY(-50%);
}

/* Inner scroll container for lang submenu */
.fritekst-dropdown-submenu-scroll {
    max-height: inherit;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Subitem styling */
.fritekst-dropdown-subitem {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fritekst-dropdown-subitem:last-child {
    border-bottom: none;
}

.fritekst-dropdown-subitem:hover {
    background: var(--bg-light);
}

/* SUB-SUBMENU styling (nivå 3) */
.fritekst-dropdown-subitem.fritekst-has-subsubmenu {
    display: flex;
    align-items: center;
}

/* Sub-submenu container - standard posisjonering */
.fritekst-dropdown-subsubmenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    max-width: 280px;
    width: max-content;
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1001;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 4px;
}

/* Åpne til venstre hvis ikke plass */
.fritekst-dropdown-subsubmenu.position-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
}

/* Scrollbar for sub-submenu */
.fritekst-dropdown-subsubmenu::-webkit-scrollbar {
    width: 6px;
}

.fritekst-dropdown-subsubmenu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

/* Vis sub-submeny ved hover */
.fritekst-dropdown-subitem.fritekst-has-subsubmenu:hover > .fritekst-dropdown-subsubmenu {
    display: block;
}

/* POSISJONERING OPPOVER - når ikke plass nedover */
.fritekst-dropdown-subsubmenu.position-upward {
    top: auto;
    bottom: 0;
}

/* POSISJONERING BEGGE VEIER - når ikke nok plass hverken opp eller ned */
.fritekst-dropdown-subsubmenu.position-split {
    top: 50%;
    transform: translateY(-50%);
}

/* Sub-subitem styling */
.fritekst-dropdown-subsubitem {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f0;
}

.fritekst-dropdown-subsubitem:last-child {
    border-bottom: none;
}

.fritekst-dropdown-subsubitem:hover {
    background: var(--bg-light);
}

/* Responsive design */
@media (max-width: 768px) {
    .fritekst-dropdown-submenu,
    .fritekst-dropdown-subsubmenu {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 90vw;
        max-height: 70vh;
    }
    
    /* Reset position classes on mobile */
    .fritekst-dropdown-submenu.position-upward,
    .fritekst-dropdown-submenu.position-split,
    .fritekst-dropdown-subsubmenu.position-upward,
    .fritekst-dropdown-subsubmenu.position-split {
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}
/* ============================================
   SUBMENU SCROLLBAR STYLING
   For Fritekst KI dropdown submenu
   ============================================ */

/* VIKTIG: Ikke sett overflow på submenu direkte - det klipper sub-submenus!
   Bruk inner scroll container i stedet */

.fritekst-dropdown-submenu-scroll {
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}

/* Scrollbar styling for inner scroll container */
.fritekst-dropdown-submenu-scroll::-webkit-scrollbar {
  width: 8px;
}

.fritekst-dropdown-submenu-scroll::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 10px;
}

.fritekst-dropdown-submenu-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 10px;
}

.fritekst-dropdown-submenu-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
}

.fritekst-dropdown-submenu-scroll {
  scrollbar-width: thin;
  scrollbar-color: #2563eb #f1f1f1;
}

/* Sub-submenu scrollbar (hvis nødvendig) */
.fritekst-dropdown-subsubmenu::-webkit-scrollbar {
  width: 8px;
}

.fritekst-dropdown-subsubmenu::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 10px;
}

.fritekst-dropdown-subsubmenu::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 10px;
}

.fritekst-dropdown-subsubmenu {
  scrollbar-width: thin;
  scrollbar-color: #2563eb #f1f1f1;
}

/* Skjul subitems som ikke matcher søk */
.fritekst-dropdown-subitem.hidden-by-search,
.fritekst-dropdown-subsubitem.hidden-by-search {
  display: none !important;
}

/* ============================================
   FORBEDRET INSTRUKSJONSBIBLIOTEK-KNAPP
   Gjør knappen større og mer synlig (IKKE lilla)
   ============================================ */

#openLibraryBtn {
  min-width: 120px !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--bg-white) !important;
  color: var(--text-primary) !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#openLibraryBtn:hover {
  border-color: #4a90e2 !important;
  background: #f0f7ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.2) !important;
}

#openLibraryBtn .material-icons {
  font-size: 26px !important;
  margin: 0 !important;
  color: #4a90e2 !important;
}

#openLibraryBtn .library-btn-text {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 1.1 !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important; /* OPPDATERT: Forhindrer tekstoverlapping */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 80px !important; /* OPPDATERT: Maksimal bredde for å unngå overflow */
}
/* ==========================================================================
   FAVORITTER-KNAPP SPESIALSTYLING
   ========================================================================== */

/* Spesialstyling for favorittknappen */
#openLibraryBtn.favorites-btn .material-icons {
  color: #f5a623; /* Gul/gull farge for stjerneikon */
}

#openLibraryBtn.favorites-btn:hover:not(:disabled) {
  background: #fff9e6; /* Lys gul bakgrunn ved hover */
  border-color: #f5a623;
}

#openLibraryBtn.favorites-btn:hover:not(:disabled) .material-icons {
  color: #d68910; /* Mørkere gull ved hover */
}

/* ==========================================================================
   SUPPORT CHAT WIDGET
   Prefix: support-
   Matcher appens designspråk: blå/hvit, Roboto, myke skygger
   ========================================================================== */

/* --- Widget container --- */
.support-widget {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9500;
    font-family: 'Roboto', sans-serif;
}

/* ==========================================================================
   FAB — Flytende knapp
   ========================================================================== */

.support-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.4), 0 2px 6px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease,
                background 0.25s ease;
    z-index: 9501;
}

.support-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(25, 118, 210, 0.5), 0 3px 8px rgba(0, 0, 0, 0.15);
}

.support-fab:active {
    transform: scale(0.95);
}

.support-fab--open {
    background: linear-gradient(135deg, #455a64 0%, #37474f 100%);
    box-shadow: 0 4px 12px rgba(69, 90, 100, 0.35);
}

.support-fab-icon {
    font-size: 1.5rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.support-fab--open .support-fab-icon {
    transform: rotate(90deg);
}

/* --- Badge --- */
.support-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(211, 47, 47, 0.4);
    animation: support-badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.support-badge--visible {
    display: flex;
}

@keyframes support-badge-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   CHATVINDU
   ========================================================================== */

.support-window {
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: 370px;
    height: 520px;
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9500;

    /* Skjult som standard */
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s,
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.support-window--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.support-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    color: #fff;
    flex-shrink: 0;
}

.support-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.support-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-header-avatar .material-icons {
    font-size: 1.4rem;
}

.support-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.support-header-name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.support-header-status {
    font-size: 0.75rem;
    opacity: 0.85;
    font-weight: 400;
}

.support-header-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    opacity: 0.8;
}

.support-header-close:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.support-header-close .material-icons {
    font-size: 1.25rem;
}

/* ==========================================================================
   MELDINGSOMRÅDE
   ========================================================================== */

.support-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-page);
}

/* Scrollbar */
.support-messages::-webkit-scrollbar {
    width: 5px;
}

.support-messages::-webkit-scrollbar-track {
    background: transparent;
}

.support-messages::-webkit-scrollbar-thumb {
    background: #c5cad0;
    border-radius: 3px;
}

.support-messages::-webkit-scrollbar-thumb:hover {
    background: #a0a7af;
}

/* --- Velkomstmelding --- */
.support-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    gap: 12px;
}

.support-welcome-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-welcome-icon .material-icons {
    font-size: 1.6rem;
    color: #1976d2;
}

.support-welcome-text {
    font-size: 0.88rem;
    color: #546e7a;
    line-height: 1.55;
    max-width: 260px;
}

/* ==========================================================================
   MELDINGSBOBLER
   ========================================================================== */

.support-msg {
    display: flex;
    max-width: 82%;
    animation: support-msg-in 0.2s ease-out;
}

@keyframes support-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.support-msg--user {
    align-self: flex-end;
    justify-content: flex-end;
}

.support-msg--support {
    align-self: flex-start;
}

.support-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
}

.support-msg--user .support-msg-bubble {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.support-msg--support .support-msg-bubble {
    background: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.support-msg-text {
    white-space: pre-wrap;
}

.support-msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    white-space: nowrap;
    line-height: 1;
}

.support-msg-time {
    font-size: 0.68rem;
    opacity: 0.65;
}

.support-msg--user .support-msg-time {
    color: rgba(255, 255, 255, 0.75);
}

.support-msg--support .support-msg-time {
    color: #90a4ae;
}

.support-msg-receipt {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -1px;
}

/* ==========================================================================
   TYPING INDICATOR
   ========================================================================== */

.support-typing {
    align-self: flex-start;
    animation: support-msg-in 0.2s ease-out;
}

.support-typing-bubble {
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.support-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #90a4ae;
    animation: support-typing-bounce 1.4s ease-in-out infinite;
}

.support-typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.support-typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes support-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* ==========================================================================
   INPUT-OMRÅDE
   ========================================================================== */

.support-input-area {
    padding: 12px 14px;
    background: var(--bg-white);
    border-top: 1px solid #e8eaed;
    flex-shrink: 0;
}

.support-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--bg-page);
    border: 1px solid #e0e0e0;
    border-radius: 22px;
    padding: 6px 6px 6px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.support-input-wrap:focus-within {
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

.support-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-primary);
    resize: none;
    outline: none;
    padding: 6px 0;
    max-height: 120px;
    overflow-y: auto;
}

.support-input::placeholder {
    color: #90a4ae;
}

.support-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.support-send:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

.support-send:not(:disabled):hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.35);
}

.support-send:not(:disabled):active {
    transform: scale(0.93);
}

.support-send .material-icons {
    font-size: 1.15rem;
    margin-left: 1px;
}

/* ==========================================================================
   RESPONSIV
   ========================================================================== */

@media (max-width: 480px) {
    .support-window {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        transform-origin: bottom center;
    }

    .support-window--open {
        transform: translateY(0) scale(1);
    }

    .support-fab {
        bottom: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
    }

    .support-fab-icon {
        font-size: 1.35rem;
    }
}

@media (max-width: 420px) {
    .support-header {
        padding: 12px 14px;
    }

    .support-messages {
        padding: 12px;
    }

    .support-msg {
        max-width: 88%;
    }
}

/* ==========================================================================
   PRINT — Skjul chat-widget
   ========================================================================== */

@media print {
    .support-widget {
        display: none !important;
    }
}

/* ==========================================================================
   DARK MODE — OVERRIDES FOR HARDKODEDE FARGER
   --------------------------------------------------------------------------
   Token-overstyringene øverst i filen dekker alt som bruker var(--*).
   Denne seksjonen overstyrer hardkodede farger som ellers ville brutt
   mørk modus. Alle regler gjelder kun når html[data-theme="dark"] er satt.
   Print-stiler er ikke inkludert (alltid lys for utskrift).
   ========================================================================== */

@media not print {

/* Generelle flater som ofte hardkoder hvit bakgrunn.
   .modal-header og .modal-body har INGEN egen bakgrunn i base — de arver
   fra .modal-content. Vi unngår å overstyre dem her, fordi mange modaler
   (fritekst, video, consultation-chat) har branded headers vi ønsker å
   beholde. Disse skal selv bruke namespace-tokens som flippes med temaet. */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-content.wide,
html[data-theme="dark"] .modal-content.narrow,
html[data-theme="dark"] .modal-content.qr-modal-content,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-actions,
html[data-theme="dark"] .new-settings-modal-content,
html[data-theme="dark"] .new-settings-header,
html[data-theme="dark"] .new-settings-body,
html[data-theme="dark"] .new-settings-section,
html[data-theme="dark"] .new-settings-tabs,
html[data-theme="dark"] .new-settings-form-input,
html[data-theme="dark"] .new-settings-form-select,
html[data-theme="dark"] .new-settings-form-textarea,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-content,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .popup,
html[data-theme="dark"] .tooltip,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .container,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .surface {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Modal footer har hardkodet border-top: #e8ecf1 i base — overstyr i mørk modus. */
html[data-theme="dark"] .modal-footer {
    background-color: var(--bg-light);
    border-top-color: var(--border-light);
}

/* Side- og hovedflater */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header-main,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar-content,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-container,
html[data-theme="dark"] .page,
html[data-theme="dark"] .footer {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Skjema-elementer */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .input,
html[data-theme="dark"] .input-like {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-light);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] select:disabled {
    background-color: var(--bg-light);
    color: var(--text-muted);
    opacity: 0.7;
}

/* Knapper — sekundær/standard variant */
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .button:not(.primary):not(.danger):not(.record):not(.pause):not(.dictate-button):not(.is-active),
html[data-theme="dark"] .header-button,
html[data-theme="dark"] .sidebar-btn,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .new-settings-tab-btn,
html[data-theme="dark"] .stab,
html[data-theme="dark"] .dropdown-icon-btn {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-light);
}
html[data-theme="dark"] .button.secondary:hover:not(:disabled),
html[data-theme="dark"] .header-button:hover,
html[data-theme="dark"] .sidebar-btn:hover,
html[data-theme="dark"] .filter-btn:hover,
html[data-theme="dark"] .stab:hover,
html[data-theme="dark"] .dropdown-icon-btn:hover {
    background-color: var(--bg-hover);
}

/* Notifikasjon */
html[data-theme="dark"] #notification,
html[data-theme="dark"] .notification {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-light);
    box-shadow: var(--shadow-strong);
}

/* Lister og rader */
html[data-theme="dark"] .consultation-item,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .row,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-light);
}
html[data-theme="dark"] .consultation-item:hover,
html[data-theme="dark"] .list-item:hover {
    background-color: var(--bg-hover);
}

/* Settings spesifikt — settings.css bruker mange hardkodede farger */
html[data-theme="dark"] .new-settings-modal-content { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .new-settings-section:hover { background-color: var(--bg-hover); }
html[data-theme="dark"] .new-settings-section-title h3 { color: var(--text-primary); }
html[data-theme="dark"] .new-settings-section-title p,
html[data-theme="dark"] .new-settings-form-label,
html[data-theme="dark"] .new-settings-form-help { color: var(--text-muted); }
html[data-theme="dark"] .new-settings-tab-btn.new-settings-tab-active { background-color: var(--bg-hover); color: var(--primary); }

/* Modal overlay backdrops — Sørg for at backdrop er tilstrekkelig mørk. */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .lm-modal-overlay,
html[data-theme="dark"] .video-modal-backdrop {
    background-color: var(--bg-overlay);
}

/* Material Icons arver color, men sikre at de som hardkoder er synlige */
html[data-theme="dark"] .material-icons {
    color: inherit;
}

/* Splash-skjerm i mørk modus (hvis den fortsatt vises etter applyTheme) */
html[data-theme="dark"] .splash,
html[data-theme="dark"] #splashScreen {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

/* Settings checkbox/radio kort i privacy-tab */
html[data-theme="dark"] .privacy-option,
html[data-theme="dark"] .fk-takst-toggle-row {
    background-color: var(--bg-white);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Beta-merker, hint-bokser */
html[data-theme="dark"] .fk-takst-beta-notice {
    background-color: var(--bg-light);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

/* Scrollbar i mørk modus (Webkit) */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-page);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 6px;
    border: 3px solid var(--bg-page);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Scrollbar i mørk modus (Firefox) */
html[data-theme="dark"] {
    scrollbar-color: var(--border-medium) var(--bg-page);
}

/* Mode-badges (helsenettBadge etc.) */
html[data-theme="dark"] .mode-badge {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
    border-color: var(--border-light);
}

/* Onboarding/intro-skjermer */
html[data-theme="dark"] .onboarding,
html[data-theme="dark"] .intro-screen,
html[data-theme="dark"] .welcome-screen {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

/* SVG-ikoner som hardkoder fyll med mørke farger — la dem arve */
html[data-theme="dark"] svg:not([fill]) { fill: currentColor; }

/* Code/pre i mørk modus */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Selection */
html[data-theme="dark"] ::selection {
    background-color: var(--primary);
    color: var(--text-on-primary);
}

/* User menu / switcher / instruction dropdown — bruker tokens men har
   hardkodede border-shorthands i sub-elementer. */
html[data-theme="dark"] .user-menu-divider,
html[data-theme="dark"] .user-switcher-list-divider,
html[data-theme="dark"] .user-menu-item,
html[data-theme="dark"] .user-switcher-item,
html[data-theme="dark"] .instruction-dropdown-list,
html[data-theme="dark"] .instruction-dropdown-list li,
html[data-theme="dark"] .user-switcher-dropdown {
    border-color: var(--border-light);
}
html[data-theme="dark"] .user-menu-item,
html[data-theme="dark"] .user-switcher-item,
html[data-theme="dark"] .instruction-dropdown-list li {
    color: var(--text-primary);
    background-color: transparent;
}
html[data-theme="dark"] .user-menu-item:hover,
html[data-theme="dark"] .user-switcher-item:hover,
html[data-theme="dark"] .instruction-dropdown-list li:hover {
    background-color: var(--bg-hover);
}

/* Tooltip — sirklen som dukker opp på hover av icon-button */
html[data-theme="dark"] .tooltiptext {
    background-color: #2d333b;
    color: var(--text-primary);
}

/* Spinner / loading-tekst */
html[data-theme="dark"] .loading,
html[data-theme="dark"] .consultation-list-loading,
html[data-theme="dark"] .consultation-list-empty-filter,
html[data-theme="dark"] .consultation-list-locked,
html[data-theme="dark"] .consultation-list-error {
    color: var(--text-muted);
    background-color: transparent;
}

/* Setting-grupper på hovedskjermen */
html[data-theme="dark"] .setting-group,
html[data-theme="dark"] .settings-main {
    background-color: transparent;
}
html[data-theme="dark"] .setting-header {
    color: var(--text-secondary);
}

/* Notice banner (informasjonslapp) */
html[data-theme="dark"] .lappen-anchor,
html[data-theme="dark"] .lappen-banner {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Lukk-knapper i modal-headers — de fleste er små x-er som arver. */
html[data-theme="dark"] .modal-header .close,
html[data-theme="dark"] .new-settings-close {
    color: inherit;
    background-color: transparent;
}
html[data-theme="dark"] .modal-header .close:hover,
html[data-theme="dark"] .new-settings-close:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Header-tag (selve top-headeren) bruker --primary, så den følger temaet
   automatisk via token-flippen. Versjonsbadge inni har hardkodet farge. */
html[data-theme="dark"] header .version-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-on-primary);
}

/* Bilder/logoer som er PNG med farget bakgrunn beholdes som de er.
   Hvis de skal "inverteres" må SVG benyttes. */

/* Hardkodede lyse gradienter i fritekst som ellers ville sett rart ut i mørk modus. */
html[data-theme="dark"] .fritekst-modal-container .fritekst-dropdown-item:hover:not(.fritekst-disabled),
html[data-theme="dark"] .fritekst-modal-container .fritekst-accordion-leaf:hover,
html[data-theme="dark"] .fritekst-modal-container .fritekst-favorite-item:hover,
html[data-theme="dark"] .fritekst-modal-container .fritekst-popular-item:hover,
html[data-theme="dark"] .fritekst-modal-container .fritekst-recent-item:hover {
    background: var(--bg-hover);
    color: var(--fritekst-text-primary);
}
html[data-theme="dark"] .fritekst-modal-container .fritekst-dropdown-item.fritekst-error,
html[data-theme="dark"] .fritekst-modal-container [class*="fritekst-error-banner"] {
    background-color: rgba(248, 81, 73, 0.15);
    color: var(--fritekst-accent-error);
    border-color: rgba(248, 81, 73, 0.3);
}
html[data-theme="dark"] .fritekst-modal-container [class*="fritekst-success"],
html[data-theme="dark"] .fritekst-modal-container [class*="fritekst-warning"] {
    color: var(--fritekst-text-primary);
}

} /* slutt @media not print */
/* ===== clinical-assistant.css ===== */
/* clinical-assistant.css - VERSJON 3.8 */
/* Klinisk Innspill - MDR/EU AI Act-kompatibel */
/* Strukturert observasjonsstøtte - Ikke prioritert - Ikke anbefaling */
/* All classes prefixed with "agent" to avoid conflicts */

/* === DESIGN PHILOSOPHY ===
 * - Nøytral, profesjonell fargepalett (blå/grå toner)
 * - Ingen røde/gule/grønne signalfarger
 * - Ingen prioritering, rangering eller hastegrad
 * - Flat informasjonsstruktur
 * - Rolig, lavmælt autoritet
 */

/* === CSS CUSTOM PROPERTIES === */
:root {
    --agent-primary: #1976d2;
    --agent-primary-light: #42a5f5;
    --agent-primary-dark: #1565c0;
    --agent-surface: #ffffff;
    --agent-surface-variant: #f8f9fa;
    --agent-surface-dim: #f1f3f4;
    --agent-border: #e0e3e7;
    --agent-border-light: #eef0f2;
    --agent-text-primary: #202124;
    --agent-text-secondary: #5f6368;
    --agent-text-tertiary: #80868b;
    --agent-accent: #1a73e8;
    --agent-accent-light: #e8f0fe;
}

/* === MAIN PANEL === */
.agent-clinical-panel {
    position: fixed;
    top: 80px;
    right: 0;
    width: 400px;
    max-width: 95vw;
    height: calc(100vh - 100px);
    background: var(--agent-surface);
    border: 1px solid var(--agent-border);
    border-radius: 16px 0 0 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

.agent-clinical-panel.agent-panel-hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* === PANEL HEADER === */
.agent-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--agent-primary) 0%, var(--agent-primary-light) 100%);
    color: white;
    flex-shrink: 0;
}

.agent-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 15px;
}

.agent-title-icon {
    font-size: 22px;
    opacity: 0.9;
}

.agent-title-text {
    color: white;
    letter-spacing: 0.2px;
}

/* Notification badge - FJERNET RØD FARGE, nå nøytral */
.agent-notification-badge {
    display: none; /* Skjult - ingen telling av "viktige" ting */
}

.agent-panel-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === PANEL CONTROLS === */
.agent-icon-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0;
}

.agent-icon-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.agent-icon-btn:active {
    transform: scale(0.96);
}

.agent-icon-btn .material-icons {
    font-size: 18px;
    color: white;
}

.agent-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === INTENDED USE DISCLAIMER === */
.agent-intended-use {
    padding: 12px 20px;
    background: var(--agent-surface-variant);
    border-bottom: 1px solid var(--agent-border-light);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

.agent-intended-use .material-icons {
    font-size: 16px;
    color: var(--agent-text-tertiary);
    margin-top: 1px;
    flex-shrink: 0;
}

.agent-intended-use-text {
    font-size: 11px;
    color: var(--agent-text-tertiary);
    line-height: 1.5;
    letter-spacing: 0.1px;
}

.agent-intended-use-text strong {
    color: var(--agent-text-secondary);
    font-weight: 500;
}

/* === PANEL CONTENT === */
.agent-panel-content {
    flex: 1;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.agent-panel-content.agent-content-collapsed {
    max-height: 0;
    opacity: 0;
}

.agent-panel-content.agent-content-expanded {
    max-height: 100vh;
    opacity: 1;
}

/* === ANALYSIS STATUS === */
.agent-analysis-status {
    padding: 10px 20px;
    background: var(--agent-surface-dim);
    color: var(--agent-text-secondary);
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid var(--agent-border-light);
    flex-shrink: 0;
}

.agent-analysis-status.agent-status-analyzing {
    background: var(--agent-accent-light);
    color: var(--agent-accent);
}

.agent-analysis-status.agent-status-completed {
    background: var(--agent-surface-dim);
    color: var(--agent-text-secondary);
}

.agent-analysis-status.agent-status-error {
    background: #fce8e6;
    color: #c5221f;
}

/* === INSIGHTS CONTAINER === */
.agent-insights-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.agent-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--agent-text-secondary);
    height: 100%;
    min-height: 200px;
}

.agent-empty-state .material-icons {
    font-size: 48px;
    color: var(--agent-border);
    margin-bottom: 16px;
}

.agent-empty-state p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    max-width: 260px;
}

/* === INSIGHTS CONTENT === */
.agent-insights-content {
    padding: 20px;
}

/* FJERNET: Urgency header - ingen hastegrad */
.agent-insights-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--agent-border-light);
}

.agent-timestamp {
    font-size: 12px;
    color: var(--agent-text-tertiary);
    font-weight: 400;
}

/* === INSIGHT SECTIONS - UNIFIED NEUTRAL STYLING === */
.agent-insight-section {
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid var(--agent-border);
    overflow: hidden;
    background: var(--agent-surface);
}

.agent-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--agent-surface-variant);
    border-bottom: 1px solid var(--agent-border-light);
}

.agent-section-header .material-icons {
    font-size: 18px;
    color: var(--agent-primary);
}

.agent-section-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--agent-text-primary);
    letter-spacing: 0.1px;
}

/* === OPPMERKSOMHETSPUNKTER (tidligere "Røde flagg") === */
.agent-attention-points .agent-section-header {
    background: var(--agent-surface-variant);
}

.agent-attention-points .agent-section-header .material-icons {
    color: var(--agent-primary);
}

/* === MULIGE FORENLIGE TILSTANDER (tidligere "Differensialdiagnoser") === */
.agent-conditions .agent-section-header .material-icons {
    color: var(--agent-primary-dark);
}

/* === LEGEMIDDELFAKTA (tidligere "Behandlingsforslag") === */
.agent-medications .agent-section-header {
    background: var(--agent-surface-variant);
}

.agent-medications .agent-section-header .material-icons {
    color: var(--agent-primary);
}

.agent-medication-list {
    padding: 0;
}

.agent-medication-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--agent-border-light);
    background: var(--agent-surface);
    transition: background-color 0.15s ease;
}

.agent-medication-item:last-child {
    border-bottom: none;
}

.agent-medication-item:hover {
    background: var(--agent-surface-variant);
}

.agent-medication-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.agent-medication-header strong {
    color: var(--agent-text-primary);
    font-size: 14px;
    font-weight: 600;
}

/* === COPY DOSAGE BUTTON - NØYTRAL STYLING === */
.agent-copy-btn {
    background: var(--agent-surface-dim);
    color: var(--agent-text-secondary);
    border: 1px solid var(--agent-border);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.agent-copy-btn:hover {
    background: var(--agent-accent-light);
    color: var(--agent-accent);
    border-color: var(--agent-accent);
}

.agent-copy-btn .material-icons {
    font-size: 14px;
}

.agent-medication-details {
    font-size: 13px;
    line-height: 1.6;
    color: var(--agent-text-secondary);
}

.agent-medication-details > div {
    margin-bottom: 4px;
}

.agent-medication-details > div:last-child {
    margin-bottom: 0;
}

.agent-medication-details strong {
    color: var(--agent-text-primary);
    font-weight: 500;
}

/* === PÅGÅENDE MEDIKAMENTER === */
.agent-current-meds .agent-section-header .material-icons {
    color: var(--agent-primary);
}

.agent-current-med-item {
    background-color: var(--agent-surface-variant);
    padding: 10px 14px;
    border-radius: 8px;
    margin: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.15s ease;
}

.agent-current-med-item:hover {
    background-color: var(--agent-surface-dim);
}

.agent-current-med-item:last-child {
    margin-bottom: 12px;
}

.agent-current-med-item .material-icons {
    color: var(--agent-primary);
    font-size: 16px;
}

/* === INTERAKSJONER - UTEN ALVORLIGHETSGRAD === */
.agent-interactions .agent-section-header .material-icons {
    color: var(--agent-primary);
}

.agent-interaction-list {
    padding: 0;
}

.agent-interaction-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--agent-border-light);
    background: var(--agent-surface);
}

.agent-interaction-item:last-child {
    border-bottom: none;
}

/* FJERNET: Severity-farger og badges */
.agent-interaction-header {
    margin-bottom: 8px;
}

.agent-interaction-header strong {
    color: var(--agent-text-primary);
    font-weight: 600;
    font-size: 13px;
}

.agent-interaction-description {
    font-size: 13px;
    color: var(--agent-text-secondary);
    margin-bottom: 6px;
    line-height: 1.5;
}

.agent-interaction-note {
    font-size: 12px;
    color: var(--agent-text-tertiary);
    line-height: 1.5;
}

.agent-interaction-note strong {
    color: var(--agent-text-secondary);
    font-weight: 500;
}

/* === STANDARD LISTS === */
.agent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.agent-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--agent-border-light);
    transition: background-color 0.15s ease;
    font-size: 13px;
    line-height: 1.5;
    color: var(--agent-text-secondary);
}

.agent-list li:last-child {
    border-bottom: none;
}

.agent-list li:hover {
    background: var(--agent-surface-variant);
}

.agent-list .material-icons {
    font-size: 16px;
    color: var(--agent-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Alle liste-items har samme nøytrale styling */
.agent-attention-item .material-icons,
.agent-condition-item .material-icons,
.agent-finding-item .material-icons,
.agent-investigation-item .material-icons,
.agent-missing-item .material-icons {
    color: var(--agent-primary);
}

/* FJERNET: Blinkende animasjoner */

/* === DATA LIMITATIONS NOTICE === */
.agent-data-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--agent-surface-variant);
    border-radius: 8px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--agent-text-tertiary);
    line-height: 1.5;
}

.agent-data-notice .material-icons {
    font-size: 16px;
    color: var(--agent-text-tertiary);
    flex-shrink: 0;
    margin-top: 1px;
}

/* FJERNET: Confidence indicator */

/* === PANEL FOOTER === */
.agent-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    background: var(--agent-surface-variant);
    border-top: 1px solid var(--agent-border-light);
    flex-shrink: 0;
}

.agent-footer-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--agent-text-tertiary);
    font-size: 11px;
}

.agent-footer-info .material-icons {
    font-size: 14px;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .agent-clinical-panel {
        width: 100vw;
        top: 60px;
        height: calc(100vh - 60px);
        border-radius: 0;
    }
    
    .agent-panel-controls {
        gap: 4px;
    }
    
    .agent-icon-btn {
        width: 32px;
        height: 32px;
    }
    
    .agent-copy-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .agent-insights-content {
        padding: 16px;
    }
    
    .agent-medication-item {
        padding: 12px;
    }
    
    .agent-medication-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .agent-copy-btn {
        width: 100%;
        justify-content: center;
    }
    
    .agent-panel-header {
        padding: 12px 16px;
    }
    
    .agent-panel-title {
        font-size: 14px;
    }
    
    .agent-intended-use {
        padding: 10px 16px;
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .agent-clinical-panel,
    .agent-panel-content,
    .agent-icon-btn,
    .agent-copy-btn,
    .agent-medication-item,
    .agent-list li {
        transition: none;
    }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    .agent-clinical-panel {
        border: 2px solid var(--agent-text-primary);
    }
    
    .agent-icon-btn {
        border: 2px solid rgba(255, 255, 255, 0.8);
    }
    
    .agent-insight-section {
        border: 2px solid var(--agent-border);
    }
}

/* === PRINT STYLES === */
@media print {
    .agent-clinical-panel {
        display: none;
    }
}

/* Dark mode-tokens for agent-namespace flyttet til cssindex.css under
   html[data-theme="dark"] for sentralisert temahåndtering. */
/* ===== settings.css ===== */
/* Modern Professional Settings Interface - new-settings prefix */

/* ================================
   MODAL STRUCTURE
   ================================ */

.new-settings-modal-content {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 90vw;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ================================
   HEADER
   ================================ */

.new-settings-header {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.new-settings-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.4;
}

.new-settings-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    position: relative;
    z-index: 1;
}

.new-settings-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-settings-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.new-settings-icon .material-icons {
    font-size: 24px;
    color: white;
}

.new-settings-title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.new-settings-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.new-settings-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.new-settings-close .material-icons {
    color: white;
    font-size: 20px;
}

/* ================================
   BODY
   ================================ */

.new-settings-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ================================
   TABS
   ================================ */

.new-settings-tabs {
    background: var(--bg-light);
    border-right: 1px solid #e2e8f0;
    width: 240px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 4px;
    overflow-y: auto;
}

.new-settings-tab-btn {
    background: transparent;
    border: none;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    min-height: 56px;
}

.new-settings-tab-btn:hover {
    background: #e2e8f0;
    color: var(--text-secondary);
    transform: translateX(2px);
}

.new-settings-tab-btn.new-settings-tab-active {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-settings-tab-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-settings-tab-icon .material-icons {
    font-size: 20px;
}

.new-settings-tab-text {
    flex: 1;
}

/* ================================
   CONTENT AREA
   ================================ */

.new-settings-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    background: var(--bg-white);
}

/* ================================
   SECTIONS
   ================================ */

.new-settings-section {
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.new-settings-section:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.new-settings-section-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-settings-section-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.new-settings-section-icon .material-icons {
    font-size: 24px;
    color: white;
}

.new-settings-section-title h3 {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-section-title p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.new-settings-section-content {
    padding: 24px;
}

/* ================================
   FORMS
   ================================ */

.new-settings-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.new-settings-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.new-settings-form-group-full {
    grid-column: 1 / -1;
}

.new-settings-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.new-settings-label-text {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.new-settings-required {
    color: #ef4444;
    font-size: 12px;
}

.new-settings-optional {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.new-settings-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.new-settings-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--bg-white);
    color: var(--text-primary);
}

.new-settings-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.new-settings-input-icon {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 20px;
    z-index: 1;
}

.new-settings-input-action {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.new-settings-input-action:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* ================================
   SELECT INPUTS
   ================================ */

.new-settings-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.new-settings-select {
    width: 100%;
    padding: 12px 48px 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    background: var(--bg-white);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
}

.new-settings-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.new-settings-select-icon {
    position: absolute;
    right: 16px;
    color: var(--text-muted);
    font-size: 20px;
    pointer-events: none;
}

/* ================================
   CHECKBOXES
   ================================ */

.new-settings-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.new-settings-checkbox {
    display: none;
}

.new-settings-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.new-settings-checkbox-check {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: var(--bg-white);
}

.new-settings-checkbox:checked + .new-settings-checkbox-label .new-settings-checkbox-check {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-color: #2563eb;
}

.new-settings-checkbox-check .material-icons {
    font-size: 14px;
    color: transparent;
    transition: all 0.2s ease;
}

.new-settings-checkbox:checked + .new-settings-checkbox-label .new-settings-checkbox-check .material-icons {
    color: white;
}

/* ================================
   FORM HELP TEXT
   ================================ */

.new-settings-form-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.new-settings-form-help .material-icons {
    font-size: 16px;
    color: var(--text-muted);
    margin-top: 1px;
    flex-shrink: 0;
}

/* ================================
   BUTTONS
   ================================ */

.new-settings-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-height: 44px;
    position: relative;
    overflow: hidden;
}

.new-settings-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.new-settings-button:hover:before {
    left: 100%;
}

.new-settings-button-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-settings-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.new-settings-button-primary:active {
    transform: translateY(0);
}

.new-settings-button-secondary {
    background: var(--bg-white);
    color: var(--text-secondary);
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.new-settings-button-secondary:hover {
    background: var(--bg-light);
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.new-settings-button-large {
    padding: 16px 32px;
    font-size: 16px;
    min-height: 56px;
}

.new-settings-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.new-settings-button .material-icons {
    font-size: 18px;
}

/* ================================
   ACTIONS
   ================================ */

.new-settings-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

/* ================================
   TEST RESULTS
   ================================ */

.new-settings-test-result {
    margin-top: 16px;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.new-settings-test-success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #86efac;
}

.new-settings-test-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.new-settings-test-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
}

.new-settings-test-icon .material-icons {
    font-size: 20px;
}

/* ================================
   STATUS CARDS
   ================================ */

.new-settings-status-card {
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.new-settings-status-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
}

.new-settings-status-success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
}

.new-settings-status-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
}

.new-settings-status-warning {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border: 1px solid #fde047;
}

.new-settings-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-settings-status-success .new-settings-status-icon {
    background: #16a34a;
    color: white;
}

.new-settings-status-error .new-settings-status-icon {
    background: #dc2626;
    color: white;
}

.new-settings-status-warning .new-settings-status-icon {
    background: #ca8a04;
    color: white;
}

.new-settings-status-content h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.new-settings-status-content p {
    margin: 0 0 4px 0;
    font-size: 14px;
    opacity: 0.9;
}

.new-settings-status-content small {
    font-size: 12px;
    opacity: 0.7;
}

/* ================================
   LOADING STATES
   ================================ */

.new-settings-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
}

.new-settings-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #2563eb;
    border-radius: 50%;
    animation: new-settings-spin 1s linear infinite;
}

@keyframes new-settings-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================
   MICROPHONE TEST
   ================================ */

.new-settings-microphone-test {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.new-settings-mic-test-result {
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.new-settings-audio-level-bar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.new-settings-audio-level-fill {
    height: 100%;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transition: width 0.1s ease;
    border-radius: 4px;
}

/* ================================
   STORAGE INFO
   ================================ */

.new-settings-storage-info {
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
}

.new-settings-storage-info h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-storage-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.new-settings-storage-stat {
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-settings-stat-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-settings-stat-icon .material-icons {
    font-size: 18px;
    color: white;
}

.new-settings-stat-content {
    flex: 1;
}

.new-settings-stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.new-settings-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
}

/* ================================
   ONBOARDING
   ================================ */

.new-settings-onboarding {
    max-width: 600px;
    margin: 0 auto;
}

.new-settings-onboarding-header {
    text-align: center;
    margin-bottom: 32px;
    margin-top: 16px;
    padding: 24px 24px 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.new-settings-onboarding-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

/* Når logoen brukes som bilde */
.new-settings-onboarding-icon img {
    height: 80px;
    width: auto;
    background: var(--bg-white);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.new-settings-onboarding-icon .material-icons {
    font-size: 40px;
    color: white;
}

.new-settings-onboarding-header h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.new-settings-onboarding-header p {
    margin: 0;
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.5;
}

.new-settings-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.new-settings-step {
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.new-settings-step:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.new-settings-step-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-settings-step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-settings-step-title h4 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-step-title p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}

.new-settings-step-content {
    padding: 24px;
}

.new-settings-onboarding-footer {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

/* ================================
   ABOUT PAGE
   ================================ */

.new-settings-about-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding: 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.new-settings-about-logo {
    flex-shrink: 0;
}

.new-settings-logo-image {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.new-settings-about-info h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.new-settings-version-badge {
    display: inline-block;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.new-settings-about-info p {
    margin: 0;
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.5;
}

.new-settings-about-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.new-settings-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.new-settings-feature-card {
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.new-settings-feature-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.new-settings-feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.new-settings-feature-icon .material-icons {
    font-size: 24px;
    color: white;
}

.new-settings-feature-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-feature-card p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}

.new-settings-tech-info {
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
}

.new-settings-tech-info h4 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.new-settings-tech-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.new-settings-tech-item:last-child {
    border-bottom: none;
}

.new-settings-tech-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.new-settings-tech-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.new-settings-support-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-settings-support-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.new-settings-support-icon .material-icons {
    font-size: 24px;
    color: white;
}

.new-settings-support-content h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #0c4a6e;
}

.new-settings-support-content p {
    margin: 0;
    font-size: 14px;
    color: #075985;
    line-height: 1.5;
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 768px) {
    .new-settings-modal-content {
        width: 95vw;
        max-height: 90vh;
    }
    
    .new-settings-body {
        flex-direction: column;
    }
    
    .new-settings-tabs {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 16px;
    }
    
    .new-settings-tab-btn {
        flex-shrink: 0;
        min-width: 120px;
    }
    
    .new-settings-content {
        padding: 16px;
    }
    
    .new-settings-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .new-settings-header-content {
        padding: 16px 20px;
    }
    
    .new-settings-title {
        font-size: 20px;
    }
    
    .new-settings-storage-stats {
        grid-template-columns: 1fr;
    }
    
    .new-settings-feature-grid {
        grid-template-columns: 1fr;
    }
    
    .new-settings-tech-grid {
        grid-template-columns: 1fr;
    }
    
    .new-settings-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .new-settings-button {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .new-settings-about-header {
        flex-direction: column;
        text-align: center;
    }
    
    .new-settings-support-card {
        flex-direction: column;
        text-align: center;
    }
    
    .new-settings-step-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}
/* ================================
   MODE SELECTION CARDS
   ================================ */

.new-settings-mode-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.new-settings-mode-card {
    position: relative;
    cursor: pointer;
}

.new-settings-mode-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-mode-card-content {
    background: var(--bg-white);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.new-settings-mode-card:hover .new-settings-mode-card-content {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

.new-settings-mode-card input[type="radio"]:checked + .new-settings-mode-card-content {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

.new-settings-mode-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.new-settings-mode-icon .material-icons {
    font-size: 28px;
    color: white;
}

.new-settings-mode-info h4 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.new-settings-mode-info > p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.new-settings-mode-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.new-settings-mode-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 0;
}

.new-settings-mode-features li .material-icons {
    font-size: 16px;
    color: #22c55e;
}

.new-settings-mode-features li.disabled {
    color: var(--text-muted);
}

.new-settings-mode-features li.disabled .material-icons {
    color: #cbd5e1;
}

.new-settings-mode-requirement {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: auto;
}

.new-settings-mode-requirement .material-icons {
    font-size: 14px;
    color: var(--text-muted);
}

.new-settings-mode-check {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: 0;
    transition: all 0.3s ease;
}

.new-settings-mode-check .material-icons {
    font-size: 28px;
    color: #2563eb;
}

.new-settings-mode-card input[type="radio"]:checked + .new-settings-mode-card-content .new-settings-mode-check {
    opacity: 1;
}

.new-settings-mode-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fef3c7;
    color: #92400e;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid #fcd34d;
}

.new-settings-mode-warning .material-icons {
    font-size: 20px;
    color: #d97706;
}

/* ================================
   DATA / DANGER SECTION
   ================================ */

.new-settings-section-danger {
    border-color: #fecaca;
}

.new-settings-section-danger:hover {
    border-color: #fca5a5;
}

.new-settings-danger-box {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.new-settings-danger-box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #991b1b;
}

.new-settings-danger-box h4 .material-icons {
    font-size: 20px;
    color: #dc2626;
}

.new-settings-danger-box p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #7f1d1d;
}

.new-settings-danger-box ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.new-settings-danger-box ul li {
    font-size: 13px;
    color: #991b1b;
    padding: 4px 0;
}

.new-settings-danger-warning {
    color: #dc2626 !important;
    font-weight: 600;
}

/* ================================
   SUPPORT LINK
   ================================ */

.new-settings-support-link {
    display: inline-block;
    margin-top: 8px;
    color: #0284c7;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.new-settings-support-link:hover {
    color: #0369a1;
    text-decoration: underline;
}

/* ================================
   RESPONSIVE MODE CARDS
   ================================ */

@media (max-width: 640px) {
    .new-settings-mode-cards {
        grid-template-columns: 1fr;
    }
}

/* ================================
   FACTORY RESET MODAL
   ================================ */

.factory-reset-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.factory-reset-modal-overlay.factory-reset-modal-visible {
    opacity: 1;
}

.factory-reset-modal-overlay.factory-reset-modal-closing {
    opacity: 0;
}

.factory-reset-modal {
    background: var(--bg-white);
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.factory-reset-modal-visible .factory-reset-modal {
    transform: scale(1) translateY(0);
}

.factory-reset-modal-closing .factory-reset-modal {
    transform: scale(0.9) translateY(20px);
}

.factory-reset-modal-header {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    padding: 32px;
    text-align: center;
    position: relative;
}

.factory-reset-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.5;
}

.factory-reset-icon-container {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
    animation: factory-reset-pulse 2s infinite;
}

@keyframes factory-reset-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

.factory-reset-icon-container .material-icons {
    font-size: 36px;
    color: white;
}

.factory-reset-modal-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
    position: relative;
}

.factory-reset-modal-header p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
}

.factory-reset-modal-body {
    padding: 24px;
}

.factory-reset-warning-box {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.factory-reset-warning-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #991b1b;
    margin-bottom: 16px;
}

.factory-reset-warning-title .material-icons {
    font-size: 20px;
    color: #dc2626;
}

.factory-reset-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.factory-reset-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: #7f1d1d;
    border-bottom: 1px solid rgba(220, 38, 38, 0.1);
}

.factory-reset-list li:last-child {
    border-bottom: none;
}

.factory-reset-list li .material-icons {
    font-size: 18px;
    color: #dc2626;
    opacity: 0.7;
}

.factory-reset-confirm-section {
    margin-top: 20px;
}

.factory-reset-confirm-section label {
    display: block;
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
}

.factory-reset-confirm-section label strong {
    color: #dc2626;
    font-family: monospace;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 4px;
}

.factory-reset-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.factory-reset-input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.factory-reset-input::placeholder {
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
}

.factory-reset-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.factory-reset-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.factory-reset-btn-cancel {
    background: var(--bg-white);
    color: #374151;
    border: 2px solid #e5e7eb;
}

.factory-reset-btn-cancel:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.factory-reset-btn-danger {
    background: #e5e7eb;
    color: var(--text-muted);
    cursor: not-allowed;
}

.factory-reset-btn-danger:disabled {
    background: #e5e7eb;
    color: var(--text-muted);
}

.factory-reset-btn-danger.factory-reset-btn-ready {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.factory-reset-btn-danger.factory-reset-btn-ready:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}

/* Success state */
.factory-reset-success {
    padding: 48px 32px;
    text-align: center;
}

.factory-reset-success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: factory-reset-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes factory-reset-success-pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.factory-reset-success-icon .material-icons {
    font-size: 40px;
    color: white;
}

.factory-reset-success h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.factory-reset-success p {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.factory-reset-progress {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.factory-reset-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 3px;
    animation: factory-reset-progress 2s ease-out forwards;
}

@keyframes factory-reset-progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ================================
   AUTO-HENT TOKEN SECTION
   Prefix: auto-hent-
   ================================ */

.auto-hent-section {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    border: 1px solid #7dd3fc;
}

.auto-hent-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(125, 211, 252, 0.5);
}

.auto-hent-header .material-icons {
    font-size: 28px;
    color: #0284c7;
}

.auto-hent-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0c4a6e;
}

.auto-hent-subtitle {
    font-size: 0.8rem;
    color: #0369a1;
}

.auto-hent-token-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.auto-hent-token-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-white);
    border: 2px solid #e0f2fe;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auto-hent-token-item:hover {
    border-color: #38bdf8;
    background: #f0f9ff;
    transform: translateX(4px);
}

.auto-hent-token-item.auto-hent-token-selected {
    border-color: #0284c7;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

.auto-hent-token-radio {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.auto-hent-token-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.auto-hent-token-radio-check {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: var(--bg-white);
    transition: all 0.2s ease;
}

.auto-hent-token-item.auto-hent-token-selected .auto-hent-token-radio-check {
    border-color: #0284c7;
    background: #0284c7;
    box-shadow: inset 0 0 0 4px #ffffff;
}

.auto-hent-token-info {
    flex: 1;
    min-width: 0;
}

.auto-hent-token-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.auto-hent-token-scope {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.auto-hent-token-icon {
    font-size: 24px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.auto-hent-token-item.auto-hent-token-selected .auto-hent-token-icon {
    color: #0284c7;
}

.auto-hent-fingerprint {
    margin-top: 1rem;
    padding: 0.875rem;
    background: var(--bg-white);
    border-radius: 8px;
    border: 1px solid #e0f2fe;
}

.auto-hent-fingerprint-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #0369a1;
    margin-bottom: 0.5rem;
}

.auto-hent-fingerprint-label .material-icons {
    font-size: 16px;
}

.auto-hent-fingerprint-value {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    word-break: break-all;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    user-select: all;
}

.auto-hent-status {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auto-hent-status .material-icons {
    font-size: 18px;
}

.auto-hent-status-success {
    background: #dcfce7;
    color: #166534;
}

.auto-hent-status-warning {
    background: #fef3c7;
    color: #92400e;
}

.auto-hent-status-error {
    background: #fee2e2;
    color: #991b1b;
}

/* Loading state for token list */
.auto-hent-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #0369a1;
}

.auto-hent-loading .new-settings-spinner {
    width: 24px;
    height: 24px;
    border-width: 3px;
    border-color: #0284c7;
    border-top-color: transparent;
}

/* Empty state */
.auto-hent-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
}

.auto-hent-empty .material-icons {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}

.auto-hent-empty-text {
    font-size: 0.9rem;
}

/* Scrollbar styling for token list */
.auto-hent-token-list::-webkit-scrollbar {
    width: 6px;
}

.auto-hent-token-list::-webkit-scrollbar-track {
    background: var(--bg-hover);
    border-radius: 3px;
}

.auto-hent-token-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.auto-hent-token-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}





/* ===========================================
   ONBOARDING - TRANSKRIPSJONSVALG KORT
   =========================================== */

.new-settings-transcription-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.new-settings-transcription-card {
    position: relative;
    cursor: pointer;
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 20px;
    background: var(--card-bg, #ffffff);
    transition: all 0.2s ease;
}

.new-settings-transcription-card:hover {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.new-settings-transcription-card.selected {
    border-color: var(--primary-color, #2563eb);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

/* Checkmark for valgt transcription-card */
.new-settings-transcription-card::after {
    content: 'check_circle';
    font-family: 'Material Icons';
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 24px;
    color: #2563eb;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.new-settings-transcription-card.selected::after {
    opacity: 1;
    transform: scale(1);
}

.new-settings-transcription-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-transcription-card-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.new-settings-transcription-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-color, #2563eb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-settings-transcription-card-icon .material-icons {
    font-size: 24px;
}

.new-settings-transcription-card.selected .new-settings-transcription-card-icon {
    background: var(--primary-dark, #1d4ed8);
}

.new-settings-transcription-card-info h5 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.new-settings-transcription-card-info p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--text-secondary, #666);
    line-height: 1.4;
}

.new-settings-transcription-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.new-settings-transcription-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.new-settings-transcription-features li .material-icons {
    font-size: 14px;
    color: var(--success-color, #22c55e);
}


/* ===========================================
   ONBOARDING - PIN-STEG (FREMHEVET)
   =========================================== */

.new-settings-step-highlight {
    background: linear-gradient(135deg, var(--primary-light, #eff6ff) 0%, #f8fafc 100%);
    border: 2px solid var(--primary-color, #2563eb);
    border-radius: 16px;
    padding: 24px;
}

.new-settings-pin-explanation {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--bg-white);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color, #e0e0e0);
}

.new-settings-pin-explanation-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color, #2563eb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-settings-pin-explanation-icon .material-icons {
    font-size: 24px;
}

.new-settings-pin-explanation-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 4px;
}

.new-settings-pin-explanation-text p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

.new-settings-pin-form-large {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 400px;
    margin: 0 auto;
}

.new-settings-input-large {
    background: var(--bg-white);
}

.new-settings-input-large .new-settings-input {
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
    padding: 16px 20px 16px 48px;
    height: auto;
}

.new-settings-input-pin {
    font-family: monospace;
}

.new-settings-pin-tips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--warning-light, #fefce8);
    border: 1px solid var(--warning-color, #eab308);
    border-radius: 8px;
    font-size: 12px;
    color: var(--warning-dark, #a16207);
}

.new-settings-pin-tips .material-icons {
    font-size: 18px;
    color: var(--warning-color, #eab308);
}


/* ===========================================
   ONBOARDING - NAVIGASJONSKNAPPER
   =========================================== */

.new-settings-onboarding-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.new-settings-onboarding-footer .new-settings-button {
    min-width: 140px;
}


/* ===========================================
   RESPONSIV TILPASNING
   =========================================== */

@media (max-width: 600px) {
    .new-settings-transcription-choice {
        grid-template-columns: 1fr;
    }
    
    .new-settings-transcription-card-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .new-settings-transcription-features {
        align-items: center;
    }
    
    .new-settings-pin-form-large {
        grid-template-columns: 1fr;
        max-width: 200px;
    }
    
    .new-settings-pin-explanation {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .new-settings-onboarding-footer {
        flex-direction: column;
    }
    
    .new-settings-onboarding-footer .new-settings-button {
        width: 100%;
    }
}
/* =============================================================================
   AUTO-SAVE API KEY STATUS INDICATORS
   Legg til dette i settings.css eller cssindex.css
   ============================================================================= */

/* Wrapper for input med status */
.new-settings-input-with-status {
    position: relative;
    display: flex;
    align-items: center;
}

.new-settings-input-with-status .new-settings-input {
    flex: 1;
    padding-right: 120px; /* Plass til status-indikator */
}

/* Status-indikator ved API-nøkkel felt */
.api-key-status {
    position: absolute;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    pointer-events: none;
}

.api-key-status .material-icons {
    font-size: 18px;
}

/* Suksess - grønn */
.api-key-status.status-success {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.1);
}

.api-key-status.status-success .material-icons {
    color: #4caf50;
}

/* Feil - rød */
.api-key-status.status-error {
    color: #c62828;
    background: rgba(198, 40, 40, 0.1);
}

.api-key-status.status-error .material-icons {
    color: #f44336;
}

/* Lagrer - blå/grå */
.api-key-status.status-saving {
    color: #1565c0;
    background: rgba(21, 101, 192, 0.1);
}

.api-key-status.status-saving .material-icons {
    color: #2196f3;
    animation: spin 1s linear infinite;
}

/* Klar til lagring - oransje */
.api-key-status.status-ready {
    color: #e65100;
    background: rgba(230, 81, 0, 0.1);
}

.api-key-status.status-ready .material-icons {
    color: #ff9800;
}

/* Skjult */
.api-key-status.status-hidden {
    display: none;
}

/* Spinner animasjon */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Input-felt styling ved ulike statuser */
.new-settings-input-with-status:has(.status-success) .new-settings-input {
    border-color: #4caf50;
}

.new-settings-input-with-status:has(.status-error) .new-settings-input {
    border-color: #f44336;
}

.new-settings-input-with-status:has(.status-saving) .new-settings-input {
    border-color: #2196f3;
}

/* Fallback for browsers that don't support :has() */
.new-settings-input.input-success {
    border-color: #4caf50 !important;
}

.new-settings-input.input-error {
    border-color: #f44336 !important;
}

.new-settings-input.input-saving {
    border-color: #2196f3 !important;
}


/* ===========================================
   TOGGLE SWITCH - HELSENETT
   =========================================== */

.new-settings-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.new-settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 28px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.new-settings-toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-white);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Checked state */
.new-settings-toggle input:checked + .new-settings-toggle-slider {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(37, 99, 235, 0.3);
}

.new-settings-toggle input:checked + .new-settings-toggle-slider::before {
    transform: translateX(24px);
}

/* Focus state for accessibility */
.new-settings-toggle input:focus-visible + .new-settings-toggle-slider {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Hover state */
.new-settings-toggle:hover .new-settings-toggle-slider {
    background: #94a3b8;
}

.new-settings-toggle:hover input:checked + .new-settings-toggle-slider {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}

/* Toggle row container */
.new-settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.new-settings-toggle-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.new-settings-toggle-row:has(input:checked) {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.new-settings-toggle-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-settings-toggle-label .material-icons {
    font-size: 22px;
    color: #2563eb;
}

.new-settings-toggle-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    padding-left: 2px;
}

/* Active/enabled indicator dot */
.new-settings-toggle-row:has(input:checked)::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.new-settings-toggle-row {
    position: relative;
}

/* ===========================================
   TOGGLE SWITCH - HELSENETT
   =========================================== */

.new-settings-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.new-settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 28px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.new-settings-toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-white);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.new-settings-toggle input:checked + .new-settings-toggle-slider {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(37, 99, 235, 0.3);
}

.new-settings-toggle input:checked + .new-settings-toggle-slider::before {
    transform: translateX(24px);
}

.new-settings-toggle input:focus-visible + .new-settings-toggle-slider {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.new-settings-toggle:hover .new-settings-toggle-slider {
    background: #94a3b8;
}

.new-settings-toggle:hover input:checked + .new-settings-toggle-slider {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}

.new-settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.new-settings-toggle-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.new-settings-toggle-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-toggle-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    padding-left: 2px;
}

/* ===========================================
   ONBOARDING AI PROVIDER CHOICE CARDS
   Steg 4: Valg mellom server og egen Bedrock-nøkkel
   =========================================== */

.new-settings-onboarding-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.new-settings-onboarding-choice-card {
    position: relative;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 20px;
    background: var(--bg-white);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.new-settings-onboarding-choice-card:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.new-settings-onboarding-choice-card.selected {
    border-color: #2563eb;
    border-width: 3px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
    transform: translateY(-2px);
}

.new-settings-onboarding-choice-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-onboarding-choice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.new-settings-onboarding-choice-icon {
    font-size: 40px;
    color: #2563eb;
    margin-bottom: 8px;
}

.new-settings-onboarding-choice-card.selected .new-settings-onboarding-choice-icon {
    color: #1d4ed8;
}

.new-settings-onboarding-choice-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.new-settings-onboarding-choice-description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 200px;
}

.new-settings-onboarding-choice-card.selected .new-settings-onboarding-choice-description {
    color: var(--text-secondary);
}

/* Sjekkmerke i hjørnet */
.new-settings-onboarding-choice-check {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 24px;
    color: #2563eb;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.new-settings-onboarding-choice-card.selected .new-settings-onboarding-choice-check {
    opacity: 1;
    transform: scale(1);
}

/* Focus state for tastaturnavigasjon */
.new-settings-onboarding-choice-card:focus-within {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Responsiv - stack på mobil */
@media (max-width: 600px) {
    .new-settings-onboarding-choice-grid {
        grid-template-columns: 1fr;
    }
    
    .new-settings-onboarding-choice-card {
        padding: 20px 16px;
    }
    
    .new-settings-onboarding-choice-description {
        max-width: none;
    }
}
/* ===== fritekst.css ===== */
/* ==========================================================================
   FRITEKST KI MODAL CSS - Komplett isolert versjon 
   ALLE selektorer er prefikset med .fritekst- eller inne i .fritekst-modal-container
   ========================================================================== */

/* === FRITEKST ISOLERTE THEME VARIABLES === */
.fritekst-modal-container {
  --fritekst-primary: #1976d2; 
  --fritekst-primary-light: #e3f2fd; 
  --fritekst-primary-dark: #0d47a1; 
  --fritekst-secondary: #00897b;
  --fritekst-accent-success: #2e7d32; 
  --fritekst-accent-warning: #ffc107; 
  --fritekst-accent-error: #d32f2f; 
  --fritekst-accent-info: #546e7a;
  --fritekst-text-primary: #212121; 
  --fritekst-text-secondary: #424242; 
  --fritekst-text-muted: #757575; 
  --fritekst-text-on-primary: #ffffff;
  --fritekst-border-light: #e0e0e0; 
  --fritekst-border-medium: #bdbdbd;
  --fritekst-bg-page: #f4f6f8; 
  --fritekst-bg-light: #f8f9fa; 
  --fritekst-bg-white: #ffffff; 
  --fritekst-bg-overlay: rgba(33, 33, 33, 0.65);
  --fritekst-chat-area-bg: #f4f6f8; 
  --fritekst-user-bubble-bg: linear-gradient(135deg, #1976d2, #0d47a1); 
  --fritekst-user-bubble-text: #ffffff;
  --fritekst-assistant-bubble-bg: #ffffff; 
  --fritekst-assistant-bubble-text: #212121; 
  --fritekst-system-message-text: #757575;
  --fritekst-shadow-soft: 0 2px 4px rgba(0,0,0,0.06); 
  --fritekst-shadow-medium: 0 4px 10px rgba(0,0,0,0.1);
  --fritekst-shadow-strong: 0 8px 25px rgba(0,0,0,0.15);
  --fritekst-main-border-radius: 8px; 
  --fritekst-modal-border-radius: 12px; 
  --fritekst-bubble-border-radius: 20px;
}

/* === FULLSKJERM MODAL SETUP === */
.fritekst-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.fritekst-modal-body {
  padding: 0 !important;
  height: calc(100vh - 60px);
  overflow: hidden;
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* === FRITEKST LIBRARY OVERLAY (separat bibliotek-modal) === */
.fritekst-library-overlay {
  z-index: 10001 !important; /* Over hovedmodalen */
}

.fritekst-library-overlay .modal-content {
  width: 90vw;
  height: 85vh;
  max-width: 1200px;
  max-height: 800px;
}

/* === FRITEKST UTILITY CLASSES === */
.fritekst-modal-container .fritekst-hidden { display: none !important; }
.fritekst-modal-container .fritekst-flex-visible { display: flex !important; }
.fritekst-modal-container .fritekst-disabled-label { opacity: 0.5; cursor: not-allowed; }
.fritekst-modal-container .fritekst-mb-2 { margin-bottom: 1rem; }
.fritekst-modal-container .fritekst-mt-2 { margin-top: 1rem; }
.fritekst-modal-container .fritekst-text-muted { color: var(--fritekst-text-muted); }
.fritekst-modal-container .fritekst-text-danger { color: var(--fritekst-accent-error); }
.fritekst-modal-container .fritekst-is-hidden { display: none !important; }
.fritekst-modal-container .fritekst-is-active { display: block !important; }

/* === MODAL HEADER MED BIBLIOTEK-KNAPP === */
.fritekst-modal-container .fritekst-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.5rem;
  background: var(--fritekst-primary);
  border-bottom: none;
  box-shadow: var(--fritekst-shadow-medium);
}

.fritekst-modal-container .fritekst-header .modal-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.fritekst-modal-container .fritekst-header .modal-title .material-icons {
  font-size: 1.5rem;
  color: #ffffff;
  opacity: 0.9;
}

.fritekst-modal-container .fritekst-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.fritekst-modal-container .fritekst-header-btn {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  transition: all 0.2s ease;
}

.fritekst-modal-container .fritekst-header-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fritekst-modal-container .fritekst-header-btn .material-icons {
  font-size: 18px;
  color: #ffffff;
}

.fritekst-modal-container .fritekst-header-btn:hover .material-icons {
  color: #ffffff;
}

/* Vis tekst-label på knappen */
.fritekst-modal-container .fritekst-header-btn::after {
  content: 'Bibliotek';
  font-size: 0.8125rem;
}

/* Close-knapp i header */
.fritekst-modal-container .fritekst-header .close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #ffffff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.fritekst-modal-container .fritekst-header .close:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.fritekst-modal-container .fritekst-header-btn .fritekst-btn-text {
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  color: inherit;
}

/* === MAIN LAYOUT === */
.fritekst-modal-container .fritekst-main-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1.25rem;
  padding: 1.25rem;
  height: 100%;
  overflow: hidden;
  background: var(--fritekst-bg-page);
}

.fritekst-modal-container .fritekst-context-area,
.fritekst-modal-container .fritekst-chat-area-wrapper {
  display: flex;
  flex-direction: column;
  background-color: var(--fritekst-bg-white);
  padding: 1.25rem;
  border-radius: var(--fritekst-main-border-radius);
  box-shadow: var(--fritekst-shadow-soft);
  overflow: hidden;
}

/* Venstre kolonne: blå identitet som matcher chat-området */
.fritekst-modal-container .fritekst-context-area {
  background-color: var(--fritekst-bg-white);
  border: 1px solid var(--fritekst-border-light);
}

.fritekst-modal-container .fritekst-context-area h3 {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--fritekst-primary-light);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fritekst-primary-dark);
  letter-spacing: -0.01em;
}

.fritekst-context-title-icon {
  font-size: 20px;
  color: var(--fritekst-primary);
}

/* Samlet upload-toolbar: alle knapper på én rad */
.fritekst-modal-container .fritekst-upload-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* === CONTEXT & FILE UPLOAD === */
.fritekst-modal-container .fritekst-context-input {
  flex-grow: 1;
  resize: none;
  border: 1px solid var(--fritekst-border-light);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  background-color: var(--fritekst-chat-area-bg);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fritekst-modal-container .fritekst-context-input:focus {
  border-color: var(--fritekst-primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.fritekst-modal-container .fritekst-file-upload-area {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.fritekst-modal-container .fritekst-upload-button-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--fritekst-bg-white);
  border: 1.5px solid var(--fritekst-primary);
  border-radius: 20px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fritekst-primary);
}

.fritekst-modal-container .fritekst-upload-button-label .material-icons {
  font-size: 18px;
}

.fritekst-modal-container .fritekst-upload-button-label:hover:not(.fritekst-disabled-label) {
  background: var(--fritekst-primary-light);
  border-color: var(--fritekst-primary-dark);
  color: var(--fritekst-primary-dark);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
  transform: translateY(-1px);
}

.fritekst-modal-container .fritekst-file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  background-color: var(--fritekst-primary-light);
  padding: 0.3rem 0.6rem;
  border-radius: var(--fritekst-main-border-radius);
  border: 1px solid var(--fritekst-primary);
  color: var(--fritekst-primary-dark);
}

.fritekst-modal-container .fritekst-file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.fritekst-modal-container .fritekst-upload-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--fritekst-text-muted);
}

.fritekst-modal-container .fritekst-drop-zone {
  border: 2px dashed var(--fritekst-border-medium);
  border-radius: var(--fritekst-main-border-radius);
  padding: 2rem;
  text-align: center;
  background-color: var(--fritekst-bg-light);
  transition: all 0.3s;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fritekst-bg-overlay);
}

.fritekst-modal-container .fritekst-drop-zone.fritekst-active {
  border-color: var(--fritekst-primary);
}

.fritekst-modal-container .fritekst-drop-zone-text {
  color: var(--fritekst-text-on-primary);
  font-size: 1.5rem;
  font-weight: 500;
  pointer-events: none;
}

/* === CHAT AREA === */
.fritekst-modal-container .fritekst-chat-area-wrapper {
  position: relative;
}

/* Active Instruction Bar */
.fritekst-modal-container .fritekst-active-instruction-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--fritekst-primary-light);
  border-bottom: 1px solid var(--fritekst-border-light);
  color: var(--fritekst-primary-dark);
  font-size: 0.9rem;
  border-radius: var(--fritekst-main-border-radius) var(--fritekst-main-border-radius) 0 0;
}

.fritekst-modal-container .fritekst-instruction-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fritekst-modal-container .fritekst-clear-instruction-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fritekst-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.fritekst-modal-container .fritekst-clear-instruction-btn:hover {
  background-color: rgba(25, 118, 210, 0.1);
}

.fritekst-modal-container .fritekst-clear-instruction-btn .material-icons {
  font-size: 1.25rem;
}

.fritekst-modal-container .fritekst-chat-output-area {
  flex-grow: 1;
  overflow-y: auto;
  background-color: var(--fritekst-chat-area-bg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 300px;
}

.fritekst-modal-container .fritekst-chat-message {
  padding: 12px 18px;
  max-width: 85%;
  line-height: 1.6;
  word-wrap: break-word;
  box-shadow: var(--fritekst-shadow-soft);
  position: relative;
  animation: fritekst-bubbleFadeIn 0.4s ease-out forwards;
}

@keyframes fritekst-bubbleFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fritekst-modal-container .fritekst-user {
  background: var(--fritekst-user-bubble-bg);
  color: var(--fritekst-user-bubble-text);
  align-self: flex-end;
  border-radius: var(--fritekst-bubble-border-radius) var(--fritekst-bubble-border-radius) 0 var(--fritekst-bubble-border-radius);
}

.fritekst-modal-container .fritekst-assistant {
  background-color: var(--fritekst-assistant-bubble-bg);
  color: var(--fritekst-assistant-bubble-text);
  border: 1px solid var(--fritekst-border-light);
  align-self: flex-start;
  border-radius: var(--fritekst-bubble-border-radius) var(--fritekst-bubble-border-radius) var(--fritekst-bubble-border-radius) 0;
}

/* === AI-RESPONSE EDITABLE TEXTAREA === */
.fritekst-modal-container .fritekst-ai-response-editable {
  background-color: var(--fritekst-assistant-bubble-bg);
  color: var(--fritekst-assistant-bubble-text);
  border: 1px solid var(--fritekst-border-light);
  align-self: flex-start;
  border-radius: 0 16px 16px 4px;
  padding: 16px 18px;
  max-width: 85%;
  width: 85%;
  line-height: 1.65;
  word-wrap: break-word;
  font-family: inherit;
  font-size: inherit;
  resize: none;
  outline: none;
  overflow: hidden;
  box-shadow: var(--fritekst-shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fritekst-modal-container .fritekst-ai-response-editable:focus {
  border-color: #90caf9;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--fritekst-shadow-soft);
}

.fritekst-modal-container .fritekst-ai-response-editable:hover:not(:focus) {
  border-color: #cbd5e0;
}

.fritekst-modal-container .fritekst-system-info,
.fritekst-modal-container .fritekst-system-error {
  font-style: italic;
  color: var(--fritekst-system-message-text);
  font-size: 0.9rem;
  text-align: center;
  margin: 0.5rem auto;
  padding: 8px 12px;
  max-width: 90%;
  border-radius: var(--fritekst-main-border-radius);
}

.fritekst-modal-container .fritekst-system-error {
  color: var(--fritekst-accent-error);
  background-color: rgba(211, 47, 47, 0.07);
}

/* Chat Loading Overlay */
.fritekst-modal-container .fritekst-chat-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.fritekst-modal-container .fritekst-chat-loading-overlay.fritekst-hidden {
  display: none;
}

.fritekst-modal-container .fritekst-chat-loading-spinner {
  width: 80px;
  height: 80px;
  border: 8px solid var(--fritekst-primary-light);
  border-top: 8px solid var(--fritekst-primary);
  border-radius: 50%;
  animation: fritekst-chatLoadingSpin 1.2s linear infinite;
  margin-bottom: 1rem;
}

.fritekst-modal-container .fritekst-chat-loading-text {
  color: var(--fritekst-primary);
  font-size: 1.1rem;
  font-weight: 500;
}

@keyframes fritekst-chatLoadingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === BOTTOM CONTROLS === */
.fritekst-modal-container .fritekst-chat-bottom-controls {
  border-top: 1px solid var(--fritekst-border-light);
  background: var(--fritekst-bg-white);
  flex-shrink: 0;
}

.fritekst-modal-container .fritekst-control-bar {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--fritekst-border-light);
  background: var(--fritekst-bg-light);
}

.fritekst-modal-container .fritekst-mode-group {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.fritekst-modal-container .fritekst-mode-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fritekst-border-medium);
  background: var(--fritekst-bg-white);
  border-radius: var(--fritekst-main-border-radius);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fritekst-text-secondary);
  white-space: nowrap;
}

.fritekst-modal-container .fritekst-mode-btn:hover:not([disabled]) {
  background: var(--fritekst-primary-light);
  border-color: var(--fritekst-primary);
  color: var(--fritekst-primary);
}

.fritekst-modal-container .fritekst-mode-btn.fritekst-active {
  background: var(--fritekst-primary);
  color: var(--fritekst-text-on-primary);
  border-color: var(--fritekst-primary);
}

.fritekst-modal-container .fritekst-mode-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === DROPDOWN SYSTEM === */
.fritekst-modal-container .fritekst-instruction-dropdown-container {
  position: relative;
  z-index: 100;
}

.fritekst-modal-container .fritekst-dropdown-content {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: var(--fritekst-bg-white);
  border: 1px solid var(--fritekst-border-medium);
  border-radius: var(--fritekst-main-border-radius);
  box-shadow: var(--fritekst-shadow-medium);
  min-width: 320px;
  max-width: 450px;
  max-height: min(500px, 60vh);
  overflow-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

/* SØKEFELT for dropdown */
.fritekst-modal-container .fritekst-dropdown-search-container {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-white);
  padding: 12px;
  border-bottom: 2px solid var(--fritekst-border-light);
}

.fritekst-modal-container .fritekst-dropdown-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.fritekst-modal-container .fritekst-dropdown-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-secondary);
  font-size: 18px;
  pointer-events: none;
}

.fritekst-modal-container .fritekst-dropdown-search-input {
  width: 100%;
  padding: 8px 36px 8px 36px;
  border: 2px solid var(--fritekst-border-light);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
  background: var(--bg-light);
}

.fritekst-modal-container .fritekst-dropdown-search-input:focus {
  outline: none;
  border-color: #1976d2;
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.fritekst-modal-container .fritekst-dropdown-search-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.fritekst-modal-container .fritekst-dropdown-search-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc3545;
  color: white;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.fritekst-modal-container .fritekst-dropdown-search-clear:hover {
  background: #c82333;
  transform: scale(1.1);
}

.fritekst-modal-container .fritekst-dropdown-search-clear.visible {
  display: flex;
}

.fritekst-modal-container .fritekst-dropdown-search-clear .material-icons {
  font-size: 14px;
}

/* Scrollbar styling for dropdown */
.fritekst-modal-container .fritekst-dropdown-content::-webkit-scrollbar {
  width: 8px;
}

.fritekst-modal-container .fritekst-dropdown-content::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 10px;
}

.fritekst-modal-container .fritekst-dropdown-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
  border-radius: 10px;
}

.fritekst-modal-container .fritekst-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
}

/* For Firefox */
.fritekst-modal-container .fritekst-dropdown-content {
  scrollbar-width: thin;
  scrollbar-color: #1976d2 #f1f1f1;
}

.fritekst-modal-container .fritekst-favorites-header {
  padding: 0.75rem 1rem;
  background: var(--fritekst-primary-light);
  color: var(--fritekst-primary-dark);
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--fritekst-border-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fritekst-modal-container .fritekst-favorites-list {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Scrollbar for favorites-list */
.fritekst-modal-container .fritekst-favorites-list::-webkit-scrollbar {
  width: 8px;
}

.fritekst-modal-container .fritekst-favorites-list::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 10px;
}

.fritekst-modal-container .fritekst-favorites-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
  border-radius: 10px;
}

.fritekst-modal-container .fritekst-favorites-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
}

.fritekst-modal-container .fritekst-dropdown-item {
  padding: 0.85rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--fritekst-border-light);
  transition: all 0.2s ease;
  white-space: normal;
  line-height: 1.5;
  font-size: 15px;
  font-weight: 450;
  color: var(--text-primary);
}

.fritekst-modal-container .fritekst-dropdown-item:hover:not(.fritekst-disabled) {
  background: linear-gradient(to right, #f7fafc, #edf2f7);
  transform: translateX(4px);
  border-left: 3px solid #1976d2;
}

.fritekst-modal-container .fritekst-dropdown-item:last-child {
  border-bottom: none;
}

.fritekst-modal-container .fritekst-dropdown-item.fritekst-disabled {
  cursor: default;
  opacity: 0.6;
}

.fritekst-modal-container .fritekst-dropdown-item.fritekst-disabled:hover {
  background: transparent;
}

/* Skjul elementer som ikke matcher søk */
.fritekst-modal-container .fritekst-dropdown-item.hidden-by-search {
  display: none !important;
}

/* Søkeresultat teller */
.fritekst-modal-container .fritekst-dropdown-results-count {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  border-bottom: 1px solid var(--fritekst-border-light);
}

.fritekst-modal-container .fritekst-dropdown-results-count.no-results {
  color: #dc3545;
  font-weight: 500;
}

/* "Ingen resultater" melding */
.fritekst-modal-container .fritekst-dropdown-no-results {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
  display: none;
}

.fritekst-modal-container .fritekst-dropdown-no-results.visible {
  display: block;
}

.fritekst-modal-container .fritekst-dropdown-no-results .material-icons {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 12px;
}

.fritekst-modal-container .fritekst-dropdown-no-results h4 {
  color: var(--text-secondary);
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 500;
}

.fritekst-modal-container .fritekst-dropdown-no-results p {
  margin: 0;
  font-size: 13px;
}

.fritekst-modal-container .fritekst-dropdown-divider {
  height: 1px;
  background: var(--fritekst-border-medium);
  margin: 0.5rem 0;
}

.fritekst-modal-container .fritekst-dropdown-action {
  padding: 0.75rem 1rem;
  background: var(--fritekst-bg-light);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--fritekst-primary);
  font-weight: 500;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.fritekst-modal-container .fritekst-dropdown-action:hover {
  background: var(--fritekst-primary-light);
}

/* =========================================
   ACCORDION MENY (inline ekspandering)
   ========================================= */

/* Accordion container */
.fritekst-modal-container .fritekst-accordion-item {
  border-bottom: 1px solid var(--fritekst-border-light);
}

.fritekst-modal-container .fritekst-accordion-item:last-child {
  border-bottom: none;
}

/* Accordion header (klikkbar) */
.fritekst-modal-container .fritekst-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.fritekst-modal-container .fritekst-accordion-header:hover {
  background: #e3f2fd;
}

.fritekst-modal-container .fritekst-accordion-header:active {
  background: #e0eaff;
}

/* Ikon til venstre */
.fritekst-modal-container .fritekst-accordion-icon {
  font-size: 20px;
  color: #1976d2;
  flex-shrink: 0;
}

/* Chevron til høyre – roterer ved åpning */
.fritekst-modal-container .fritekst-accordion-chevron {
  margin-left: auto;
  font-size: 20px;
  color: #9e9e9e;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
  flex-shrink: 0;
}

.fritekst-modal-container .fritekst-accordion-open > .fritekst-accordion-header .fritekst-accordion-chevron {
  transform: rotate(180deg);
  color: #1976d2;
}

/* Accordion body – skjult, animert med max-height */
.fritekst-modal-container .fritekst-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fritekst-modal-container .fritekst-accordion-open > .fritekst-accordion-body {
  max-height: 2000px;
  overflow-y: auto;
}

/* Nested accordion header (spesialitet med 2+ maler) */
.fritekst-modal-container .fritekst-accordion-header--nested {
  padding: 9px 14px 9px 24px;
  font-size: 14px;
  font-weight: 450;
  color: var(--text-secondary);
}

.fritekst-modal-container .fritekst-accordion-header--nested:hover {
  background: var(--bg-light);
}

/* Teller-badge */
.fritekst-modal-container .fritekst-accordion-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Leaf-item (klikkbar spesialitet uten sub-items) */
.fritekst-modal-container .fritekst-accordion-leaf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 24px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.fritekst-modal-container .fritekst-accordion-leaf:hover {
  background: linear-gradient(to right, #e3f2fd, #fafafa);
  border-left-color: #1976d2;
  color: #0d47a1;
}

.fritekst-modal-container .fritekst-accordion-leaf:active {
  background: #dbeafe;
}

/* Dot indicator for leaf items */
.fritekst-modal-container .fritekst-accordion-leaf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.fritekst-modal-container .fritekst-accordion-leaf:hover .fritekst-accordion-leaf-dot {
  background: #1976d2;
  transform: scale(1.3);
}

/* Deep leaf (inne i nested accordion – Standardmal, favoritter) */
.fritekst-modal-container .fritekst-accordion-leaf--deep {
  padding-left: 42px;
  font-size: 13.5px;
  gap: 8px;
}

.fritekst-modal-container .fritekst-accordion-leaf--deep:hover {
  background: linear-gradient(to right, #e3f2fd, #fafafa);
  border-left-color: #64b5f6;
}

/* Nested accordion indent */
.fritekst-modal-container .fritekst-accordion-nested {
  border-bottom: none;
}

.fritekst-modal-container .fritekst-accordion-nested .fritekst-accordion-body {
  border-left: 2px solid #e0e0e0;
  margin-left: 30px;
  border-radius: 0 0 0 8px;
}

/* Scrollbar for accordion body */
.fritekst-modal-container .fritekst-accordion-body::-webkit-scrollbar {
  width: 6px;
}

.fritekst-modal-container .fritekst-accordion-body::-webkit-scrollbar-track {
  background: transparent;
}

.fritekst-modal-container .fritekst-accordion-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.fritekst-modal-container .fritekst-accordion-body::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}

.fritekst-modal-container .fritekst-action-group {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* --- Control-bar action buttons (Lim kontekst, Tøm alt) --- */
.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid #e0e0e0;
  background: var(--bg-light);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn .material-icons {
  font-size: 16px;
  transition: color 0.2s ease;
}

/* Lim kontekst - blåtone */
.fritekst-modal-container .fritekst-control-bar .fritekst-context-paste-btn {
  background: #e3f2fd;
  border-color: #bfdbfe;
  color: #0d47a1;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-context-paste-btn .material-icons {
  color: #1976d2;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-context-paste-btn:hover:not([disabled]) {
  background: #dbeafe;
  border-color: #90caf9;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  transform: translateY(-1px);
}

.fritekst-modal-container .fritekst-control-bar .fritekst-context-paste-btn:active:not([disabled]) {
  transform: scale(0.97);
  box-shadow: none;
}

/* Lim & Analyser (instruction mode) - grønntone */
.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-instruction-mode {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-instruction-mode .material-icons {
  color: #10b981;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-instruction-mode:hover:not(:disabled) {
  background: #d1fae5;
  border-color: #6ee7b7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  transform: translateY(-1px);
}

/* Tøm alt - rødtone */
.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-danger .material-icons {
  color: #ef4444;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-danger:hover:not([disabled]) {
  background: #fee2e2;
  border-color: #fca5a5;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
  transform: translateY(-1px);
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-danger:active:not([disabled]) {
  transform: scale(0.97);
  box-shadow: none;
}

/* Disabled state */
.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.fritekst-modal-container .fritekst-input-line {
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.fritekst-modal-container .fritekst-chat-input {
  flex: 1;
  min-height: 48px;
  max-height: 120px;
  padding: 12px 16px;
  border: 1px solid var(--fritekst-border-medium);
  border-radius: 24px;
  resize: none;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s;
  background: var(--fritekst-bg-white);
  outline: none;
}

.fritekst-modal-container .fritekst-chat-input:focus {
  border-color: var(--fritekst-primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

/* === BUTTONS === */
.fritekst-modal-container .fritekst-button,
.fritekst-modal-container button.fritekst-button {
  background: var(--fritekst-primary);
  color: var(--fritekst-text-on-primary);
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: var(--fritekst-main-border-radius);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.fritekst-modal-container .fritekst-button:hover:not(:disabled) {
  background: var(--fritekst-primary-dark);
  box-shadow: var(--fritekst-shadow-medium);
}

.fritekst-modal-container .fritekst-button:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
  opacity: 0.7;
}

.fritekst-modal-container .fritekst-button.fritekst-secondary {
  background-color: var(--fritekst-bg-light);
  color: var(--fritekst-text-secondary);
  border: 1px solid var(--fritekst-border-medium);
}

.fritekst-modal-container .fritekst-button.fritekst-secondary:hover:not([disabled]) {
  background-color: #e9ecef;
}

.fritekst-modal-container .fritekst-button.fritekst-danger {
  background-color: transparent;
  color: var(--fritekst-accent-error);
  border: 1px solid var(--fritekst-accent-error);
}

.fritekst-modal-container .fritekst-button.fritekst-danger:hover:not(:disabled) {
  background-color: var(--fritekst-accent-error);
  color: white;
}

.fritekst-modal-container .fritekst-button.fritekst-small {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* Send button som circle */
.fritekst-modal-container .fritekst-input-line .fritekst-button {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  padding: 0;
}

.fritekst-modal-container .fritekst-icon-button {
  background: none;
  border: none;
  color: inherit;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.fritekst-modal-container .fritekst-icon-button:hover:not([disabled]) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* === SPINNER === */
.fritekst-modal-container .fritekst-spinner {
  border: 4px solid rgba(0,0,0,0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: var(--fritekst-primary);
  animation: fritekst-spin 1s linear infinite;
  margin: 0 auto 12px;
}

.fritekst-modal-container .fritekst-spinner.fritekst-small {
  width: 20px;
  height: 20px;
  border-width: 3px;
}

@keyframes fritekst-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === TYPING INDICATOR === */
.fritekst-modal-container .fritekst-typing-indicator {
  display: flex;
  align-items: center;
  padding: 18px !important;
}

.fritekst-modal-container .fritekst-typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: var(--fritekst-text-muted);
  border-radius: 50%;
  margin: 0 3px;
  animation: fritekst-typing-dot-bounce 1.4s infinite ease-in-out both;
}

.fritekst-modal-container .fritekst-typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.fritekst-modal-container .fritekst-typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes fritekst-typing-dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

/* === WAIT-NOTIS (vises sammen med typing-indicator) === */
.fritekst-modal-container .fritekst-wait-notice {
  margin: 6px 18px 14px;
  padding: 12px 14px;
  background: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 8px;
  font-size: 13px;
  color: #6d3b00;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.fritekst-modal-container .fritekst-wait-notice .material-icons {
  color: #b88c00;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.fritekst-modal-container .fritekst-wait-notice strong {
  font-weight: 600;
}

.fritekst-modal-container .fritekst-wait-notice-text {
  flex: 1;
}

.fritekst-modal-container .fritekst-wait-notice-tip {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ffcc80;
  font-size: 12px;
  color: #5a4500;
}

/* === EMPTY STATE === */
.fritekst-modal-container .fritekst-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--fritekst-text-muted);
  text-align: center;
}

.fritekst-modal-container .fritekst-empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.fritekst-modal-container .fritekst-empty-state-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--fritekst-text-secondary);
}

.fritekst-modal-container .fritekst-empty-state-desc {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  line-height: 1.5;
}

/* === LOADING OVERLAY === */
.fritekst-modal-container .fritekst-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.fritekst-modal-container .fritekst-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--fritekst-border-light);
  border-top: 4px solid var(--fritekst-primary);
  border-radius: 50%;
  animation: fritekst-spin 1s linear infinite;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1200px) {
  .fritekst-modal-container .fritekst-prompt-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 900px) {
  .fritekst-modal-container .fritekst-main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    overflow-y: auto;
  }
  
  .fritekst-modal-container .fritekst-context-area {
    order: 1;
    min-height: 250px;
  }
  
  .fritekst-modal-container .fritekst-chat-area-wrapper {
    order: 2;
    min-height: 400px;
  }

  .fritekst-modal-container .fritekst-prompt-grid {
    grid-template-columns: 1fr;
  }

  .fritekst-modal-container .fritekst-action-group {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .fritekst-modal-container .fritekst-main-content {
    padding: 1rem;
    gap: 1rem;
  }
  
  .fritekst-modal-container .fritekst-context-area,
  .fritekst-modal-container .fritekst-chat-area-wrapper {
    padding: 1rem;
  }

  .fritekst-modal-container .fritekst-library-controls-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .fritekst-modal-container .fritekst-form-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .fritekst-modal-container .fritekst-form-actions-left,
  .fritekst-modal-container .fritekst-form-actions-right {
    width: 100%;
    justify-content: center;
  }

  .fritekst-library-overlay .modal-content {
    width: 95vw;
    height: 90vh;
  }

  /* Skjul tekst på mode- og action-knapper, vis kun ikoner */
  .fritekst-modal-container .fritekst-mode-btn > span:not(.material-icons) {
    display: none;
  }
  
  .fritekst-modal-container .fritekst-control-bar .fritekst-action-btn > span:not(.material-icons) {
    display: none;
  }

  .fritekst-modal-container .fritekst-mode-btn,
  .fritekst-modal-container .fritekst-control-bar .fritekst-action-btn {
    padding: 0.45rem;
    gap: 0;
  }
}

/* === TOOLTIP SUPPORT === */
.fritekst-modal-container .fritekst-tooltip {
  position: relative;
}

.fritekst-modal-container .fritekst-tooltiptext {
  visibility: hidden;
  width: max-content;
  max-width: 180px;
  background-color: #1f2937;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

/* Tooltip-pil */
.fritekst-modal-container .fritekst-tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

.fritekst-modal-container .fritekst-tooltip:hover .fritekst-tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* === HIGH CONTRAST & ACCESSIBILITY === */
@media (prefers-contrast: high) {
  .fritekst-modal-container {
    --fritekst-border-light: #999;
    --fritekst-border-medium: #666;
    --fritekst-shadow-soft: 0 2px 4px rgba(0,0,0,0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fritekst-modal-container *,
  .fritekst-modal-container *::before,
  .fritekst-modal-container *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* === MESSAGE WRAPPER & RESPONSE TOOLBAR === */
.fritekst-modal-container .fritekst-message-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Toolbar over AI-svar: sticky øverst i chat-scroll */
/* --- Message toolbar container --- */
.fritekst-modal-container .fritekst-message-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  align-self: flex-start;
  max-width: 85%;
  background: var(--bg-light);
  border: 1px solid #e0e0e0;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* --- Message toolbar buttons (Kopier, Dikter inn) --- */
.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-light);
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn .material-icons {
  font-size: 14px;
  color: #1976d2;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn:hover {
  background: #e0ecff;
  border-color: #90caf9;
  color: #0d47a1;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.12);
  transform: translateY(-0.5px);
}

.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn:active {
  transform: scale(0.97);
  box-shadow: none;
}

/* Kopiert-state */
.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn.fritekst-copied {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn.fritekst-copied .material-icons {
  color: #10b981;
}

/* Separator mellom knapper */
.fritekst-modal-container .fritekst-action-separator {
  width: 1px;
  height: 14px;
  background: #e0e0e0;
  margin: 0 2px;
}

/* NAV-skjema: «Kopier 6.4.1» osv. — verktøylinja kan bli lang, la den bryte */
.fritekst-modal-container .fritekst-message-actions {
  flex-wrap: wrap;
}

/* «39 uker» — to valg (6.5 / 6.6) i chatten */
.fritekst-modal-container .fritekst-navvalg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0;
  padding: 10px 12px;
  background: #f5f9ff;
  border: 1px solid #cfe0fb;
  border-radius: 10px;
}
.fritekst-modal-container .fritekst-navvalg-tittel {
  font-weight: 600;
  color: #0d47a1;
}
.fritekst-modal-container .fritekst-navvalg-btn {
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #90caf9;
  border-radius: 8px;
  color: #0d47a1;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.fritekst-modal-container .fritekst-navvalg-btn:hover {
  background: #e0ecff;
}

/* --- Dikter inn (voiceedit) i message-actions toolbar --- */
.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn {
  margin: 0;
  padding: 4px 10px;
  background: #f0fdf4;
  background-image: none;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  color: #166534;
  font-size: 12px;
  font-weight: 500;
  gap: 4px;
  transition: all 0.15s ease;
  box-shadow: none;
  transform: none;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn .material-icons {
  font-size: 14px;
  color: #22c55e;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn:hover:not(:disabled) {
  background: #dcfce7;
  background-image: none;
  border-color: #86efac;
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.12);
  transform: translateY(-0.5px);
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: none;
}

/* Dikter inn - recording state i toolbar */
.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn.fritekst-voiceedit-recording {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  border-color: #dc2626;
  animation: fritekst-voiceedit-pulse 1.5s ease-in-out infinite;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn.fritekst-voiceedit-recording .material-icons {
  color: white;
}

/* Dikter inn - processing state i toolbar */
.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn.fritekst-voiceedit-processing {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-color: #f59e0b;
  pointer-events: none;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn.fritekst-voiceedit-processing .material-icons {
  color: white;
  animation: fritekst-voiceedit-spin 1s linear infinite;
}

/* GAMMEL STIL - bakoverkompatibilitet (skjult) */
.fritekst-modal-container .fritekst-copy-message-btn {
  display: none;
}
/* ===========================================
   FRITEKST VOICE INPUT - CSS
   Mic-knapp inne i chat input (ChatGPT-stil)
   =========================================== */

/* Wrapper for textarea + mic-knapp */
.fritekst-chat-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

/* Juster textarea for å gi plass til mic-knapp */
.fritekst-chat-input-wrapper .fritekst-chat-input {
    width: 100%;
    padding-right: 48px; /* Plass til mic-knapp */
}

/* Mic-knapp inne i textarea */
.fritekst-voice-input-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--fritekst-text-secondary, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.fritekst-voice-input-btn:hover {
    background: var(--fritekst-bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--fritekst-primary, #1976d2);
}

.fritekst-voice-input-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.3);
}

.fritekst-voice-input-btn .material-icons {
    font-size: 20px;
}

/* Recording state - rød pulserende */
.fritekst-voice-input-btn.fritekst-voice-input-recording {
    background: #ef4444;
    color: white;
    animation: fritekst-voice-pulse 1.5s ease-in-out infinite;
}

.fritekst-voice-input-btn.fritekst-voice-input-recording:hover {
    background: #dc2626;
    color: white;
}

@keyframes fritekst-voice-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

/* Processing state - spinner */
.fritekst-voice-input-btn.fritekst-voice-input-processing {
    background: var(--fritekst-primary, #1976d2);
    color: white;
    cursor: wait;
}

.fritekst-voice-input-btn.fritekst-voice-input-processing:hover {
    background: var(--fritekst-primary, #1976d2);
}

/* Spin animation for processing icon */
.fritekst-spin {
    animation: fritekst-spin 1s linear infinite;
}

@keyframes fritekst-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Live preview overlay (vises under Soniox streaming) */
.fritekst-voice-input-preview {
    position: absolute;
    left: 12px;
    right: 48px;
    bottom: calc(100% + 4px);
    padding: 8px 12px;
    background: var(--fritekst-bg-dark, #1e293b);
    color: white;
    border-radius: 8px;
    font-size: 0.85rem;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    opacity: 0.95;
}

.fritekst-voice-input-preview::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--fritekst-bg-dark, #1e293b);
}

/* Textarea styling når recording er aktiv */
.fritekst-chat-input-wrapper:has(.fritekst-voice-input-recording) .fritekst-chat-input {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Dark mode — eksplisitt toggle via html[data-theme="dark"]. */
html[data-theme="dark"] .fritekst-voice-input-btn {
    color: var(--fritekst-text-secondary, #9ca3af);
}

html[data-theme="dark"] .fritekst-voice-input-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .fritekst-voice-input-preview {
    background: #374151;
}

html[data-theme="dark"] .fritekst-voice-input-preview::after {
    border-top-color: #374151;
}

/* Responsive - mindre skjermer */
@media (max-width: 640px) {
    .fritekst-voice-input-btn {
        width: 36px;
        height: 36px;
        right: 6px;
        bottom: 6px;
    }
    
    .fritekst-chat-input-wrapper .fritekst-chat-input {
        padding-right: 44px;
    }
    
    .fritekst-voice-input-preview {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

/* =====================================================
   MALER-VELGER MODAL (slide-up panel)
   Erstatter den gamle dropdown-en som ble klippet av
   tre nestede overflow:hidden containere.
   ===================================================== */

/* Fullskjerm-overlay */
.fritekst-maler-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10010;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fritekst-maler-modal.fritekst-maler-visible {
  pointer-events: auto;
  opacity: 1;
}

.fritekst-maler-modal.fritekst-hidden {
  display: none !important;
}

/* Backdrop */
.fritekst-maler-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
}

/* Panel (slide-up card) */
.fritekst-maler-panel {
  position: relative;
  width: 94%;
  max-width: 520px;
  max-height: 70vh;
  background: var(--bg-white);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.fritekst-maler-modal.fritekst-maler-visible .fritekst-maler-panel {
  transform: translateY(0);
}

/* Header */
.fritekst-maler-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.fritekst-maler-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fritekst-maler-title .material-icons {
  font-size: 22px;
  color: #1976d2;
}

.fritekst-maler-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fritekst-maler-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-light);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.fritekst-maler-close:hover {
  background: #e0e0e0;
  color: var(--text-secondary);
}

.fritekst-maler-close .material-icons {
  font-size: 20px;
}

/* Søkefelt */
.fritekst-maler-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: var(--bg-light);
  flex-shrink: 0;
}

.fritekst-maler-search .material-icons {
  font-size: 20px;
  color: #9e9e9e;
  flex-shrink: 0;
}

.fritekst-maler-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
}

.fritekst-maler-search input::placeholder {
  color: #9e9e9e;
}

/* Scrollbart innhold */
.fritekst-maler-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  min-height: 0;
}

/* Scrollbar */
.fritekst-maler-content::-webkit-scrollbar {
  width: 6px;
}

.fritekst-maler-content::-webkit-scrollbar-track {
  background: transparent;
}

.fritekst-maler-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.fritekst-maler-content::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}

/* Seksjon-header (Henvisning / Favoritter) */
.fritekst-maler-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fritekst-maler-section-header .material-icons {
  font-size: 16px;
}

/* Accordion: kategori-header (f.eks. "Henvisning") */
.fritekst-maler-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background 0.12s ease;
  user-select: none;
}

.fritekst-maler-accordion-header:hover {
  background: #e3f2fd;
}

.fritekst-maler-accordion-header:active {
  background: #e0eaff;
}

.fritekst-maler-accordion-header .material-icons.maler-icon {
  font-size: 20px;
  color: #1976d2;
  flex-shrink: 0;
}

.fritekst-maler-accordion-header .maler-chevron {
  margin-left: auto;
  font-size: 20px;
  color: #9e9e9e;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.fritekst-maler-accordion-open > .fritekst-maler-accordion-header .maler-chevron {
  transform: rotate(180deg);
  color: #1976d2;
}

/* Accordion: body */
.fritekst-maler-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fritekst-maler-accordion-open > .fritekst-maler-accordion-body {
  max-height: 2000px;
}

/* Spesialitet-item (leaf / klikkbar rad) */
.fritekst-maler-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 32px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.12s ease;
  border-left: 3px solid transparent;
}

.fritekst-maler-item:hover {
  background: linear-gradient(to right, #e3f2fd, #fafafa);
  border-left-color: #1976d2;
  color: #0d47a1;
}

.fritekst-maler-item:active {
  background: #dbeafe;
}

.fritekst-maler-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.fritekst-maler-item:hover .fritekst-maler-item-dot {
  background: #1976d2;
  transform: scale(1.3);
}

/* Deep leaf (inne i nested accordion) */
.fritekst-maler-item--deep {
  padding-left: 48px;
  font-size: 13.5px;
}

.fritekst-maler-item--deep:hover {
  border-left-color: #64b5f6;
}

/* Nested accordion (spesialitet med 2+ maler) */
.fritekst-maler-nested-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 32px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 450;
  color: var(--text-secondary);
  transition: background 0.12s ease;
  user-select: none;
}

.fritekst-maler-nested-header:hover {
  background: var(--bg-light);
}

.fritekst-maler-nested-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.fritekst-maler-nested-header .maler-chevron {
  margin-left: auto;
  font-size: 18px;
  color: #9e9e9e;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.fritekst-maler-accordion-open > .fritekst-maler-nested-header .maler-chevron {
  transform: rotate(180deg);
  color: #1976d2;
}

/* Nested accordion indentation */
.fritekst-maler-nested .fritekst-maler-accordion-body {
  border-left: 2px solid #e0e0e0;
  margin-left: 40px;
  border-radius: 0 0 0 8px;
}

/* Prompt-favoritt item */
.fritekst-maler-prompt-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 20px;
  cursor: pointer;
  transition: all 0.12s ease;
  border-left: 3px solid transparent;
}

.fritekst-maler-prompt-item:hover {
  background: linear-gradient(to right, #e3f2fd, #fafafa);
  border-left-color: #1976d2;
}

.fritekst-maler-prompt-item:active {
  background: #dbeafe;
}

.fritekst-maler-prompt-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.fritekst-maler-prompt-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

/* Divider */
.fritekst-maler-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 6px 0;
}

/* Tom-tilstand */
.fritekst-maler-empty {
  padding: 24px 20px;
  text-align: center;
  color: #9e9e9e;
  font-size: 13px;
}

.fritekst-maler-empty .material-icons {
  font-size: 32px;
  display: block;
  margin: 0 auto 8px;
  color: #cbd5e1;
}

/* Ingen søkeresultater */
.fritekst-maler-no-results {
  display: none;
  text-align: center;
  padding: 32px 20px;
  color: #9e9e9e;
}

.fritekst-maler-no-results.visible {
  display: block;
}

.fritekst-maler-no-results .material-icons {
  font-size: 40px;
  color: #e0e0e0;
  margin-bottom: 8px;
}

.fritekst-maler-no-results h4 {
  color: var(--text-muted);
  margin: 0 0 4px;
  font-size: 15px;
}

.fritekst-maler-no-results p {
  margin: 0;
  font-size: 13px;
}

/* Skjult av søk */
.fritekst-maler-hidden-by-search {
  display: none !important;
}

/* Footer */
.fritekst-maler-footer {
  padding: 12px 20px;
  border-top: 1px solid #e0e0e0;
  background: var(--bg-light);
  flex-shrink: 0;
}

.fritekst-maler-library-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1976d2;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.fritekst-maler-library-btn:hover {
  background: #e3f2fd;
  border-color: #bfdbfe;
}

.fritekst-maler-library-btn .material-icons {
  font-size: 18px;
}

/* =====================================================
   MALER-KNAPP: AKTIV TILSTAND
   Viser valgt malnavn direkte på knappen
   ===================================================== */

.fritekst-modal-container .fritekst-mode-btn.fritekst-active.fritekst-has-mal {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
  color: #ffffff;
  border-color: #0d47a1;
  gap: 6px;
  max-width: 280px;
}

.fritekst-mode-btn .fritekst-mal-name {
  display: none;
  font-weight: 400;
  font-size: 0.82rem;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.fritekst-mode-btn.fritekst-active.fritekst-has-mal .fritekst-mal-name {
  display: inline;
}

/* Liten pil-knapp for å åpne maler-modal */
.fritekst-mode-btn.fritekst-active.fritekst-has-mal .material-icons:last-child {
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
  .fritekst-maler-panel {
    width: 100%;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
  }

  .fritekst-mode-btn .fritekst-mal-name {
    max-width: 100px;
  }
}














/* ==========================================================================
   FRITEKST PROMPT-BIBLIOTEK — DESIGN POLISH
   ========================================================================== */

/* --- MODAL OVERLAY — bedre backdrop + avrunding --- */
.fritekst-library-overlay .modal-content {
  width: 92vw;
  height: 88vh;
  max-width: 780px;
  max-height: 860px;
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fritekst-library-overlay .modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #e0e0e0;
  background: var(--bg-white);
  flex-shrink: 0;
}

.fritekst-library-overlay .modal-header .modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.fritekst-library-overlay .modal-header .modal-title .material-icons {
  font-size: 22px;
  color: #1976d2;
}

.fritekst-library-overlay .modal-header .close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.fritekst-library-overlay .modal-header .close:hover {
  background: #e0e0e0;
  color: var(--text-primary);
}

/* --- TABS — renere, mer profesjonell look --- */
.fritekst-library-overlay .fritekst-modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
  background: #fafbfc;
  padding: 0 8px;
  flex-shrink: 0;
}

.fritekst-library-overlay .fritekst-tab-btn {
  flex: unset;
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 0;
}

.fritekst-library-overlay .fritekst-tab-btn .material-icons {
  font-size: 18px;
}

.fritekst-library-overlay .fritekst-tab-btn:hover {
  color: #1976d2;
  background: rgba(37, 99, 235, 0.04);
}

.fritekst-library-overlay .fritekst-tab-btn.fritekst-is-active {
  color: #1976d2;
  background: none;
  border-bottom-color: #1976d2;
  font-weight: 600;
}

/* "Lag ny" tab — subtilt uthevet */
.fritekst-library-overlay .fritekst-tab-btn[data-tab="create"] {
  margin-left: auto;
  color: #1976d2;
  font-weight: 600;
}

.fritekst-library-overlay .fritekst-tab-btn[data-tab="create"]:hover {
  background: rgba(37, 99, 235, 0.06);
}

.fritekst-library-overlay .fritekst-tab-btn[data-tab="create"].fritekst-is-active {
  color: #fff;
  background: #1976d2;
  border-radius: 8px;
  border-bottom-color: transparent;
  margin-bottom: 0;
  padding: 8px 18px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* --- MODAL BODY --- */
.fritekst-library-overlay .modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* --- SEARCH & CONTROLS --- */
.fritekst-library-overlay .fritekst-library-controls {
  padding: 14px 20px;
  border-bottom: 1px solid #fafafa;
  background: var(--bg-white);
  flex-shrink: 0;
}

.fritekst-library-overlay .fritekst-library-controls-inner {
  display: flex;
  gap: 10px;
  align-items: center;
}

.fritekst-library-overlay .fritekst-search-box-wrapper {
  position: relative;
  flex: 1;
}

.fritekst-library-overlay .fritekst-library-search {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.9rem;
  background: var(--bg-light);
  outline: none;
  transition: all 0.2s;
}

.fritekst-library-overlay .fritekst-library-search:focus {
  border-color: #90caf9;
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.fritekst-library-overlay .fritekst-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #9e9e9e;
  pointer-events: none;
}

/* Oppdater-knapp — fjernet fra HTML */
.fritekst-library-overlay #fritekstLibraryRefresh {
  display: none;
}

/* Search clear button */
.fritekst-library-overlay .fritekst-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
  padding: 0;
}

.fritekst-library-overlay .fritekst-search-clear:hover {
  background: #cbd5e1;
  color: var(--text-secondary);
}

.fritekst-library-overlay .fritekst-search-clear .material-icons {
  font-size: 16px;
}

/* Adjust search input padding for clear button */
.fritekst-library-overlay .fritekst-library-search {
  padding-right: 42px !important;
}

/* --- LIST VIEW --- */
.fritekst-library-overlay .fritekst-library-view {
  display: none;
  padding: 0;
  height: auto;
  flex: 1;
  overflow-y: auto;
}

.fritekst-library-overlay .fritekst-library-view.fritekst-active {
  display: flex;
  flex-direction: column;
}

.fritekst-library-overlay .fritekst-library-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- PROMPT CARDS — polished redesign --- */
.fritekst-library-overlay .fritekst-prompt-card {
  background: var(--bg-white);
  border: 1.5px solid #e8ecf1;
  border-radius: 12px;
  padding: 18px 20px;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.fritekst-library-overlay .fritekst-prompt-card:hover {
  border-color: #bfdbfe;
  box-shadow:
    0 4px 16px rgba(37, 99, 235, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
}

/* Card header */
.fritekst-library-overlay .fritekst-prompt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.fritekst-library-overlay .fritekst-prompt-card-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.35;
}

/* Card actions */
.fritekst-library-overlay .fritekst-prompt-card-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.fritekst-library-overlay .fritekst-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #9e9e9e;
  transition: all 0.15s ease;
  padding: 0;
}

.fritekst-library-overlay .fritekst-icon-btn:hover {
  background: var(--bg-light);
}

.fritekst-library-overlay .fritekst-icon-btn .material-icons {
  font-size: 20px;
}

/* ======== FAVORITT-STJERNE — GUL NÅR AKTIV ======== */
.fritekst-prompt-card .fritekst-icon-btn[data-action="toggle-favorite"] .material-icons {
  transition: color 0.2s, transform 0.2s;
}

/* Favoritt fyllt — gul (matcher via title-attributt og .is-favorite klasse) */
.fritekst-library-overlay .fritekst-icon-btn[data-action="toggle-favorite"][title*="Fjern"] .material-icons,
.fritekst-library-overlay .fritekst-icon-btn[data-action="toggle-favorite"].is-favorite .material-icons,
.fritekst-prompt-card .fritekst-icon-btn[data-action="toggle-favorite"][title*="Fjern"] .material-icons,
.fritekst-prompt-card .fritekst-icon-btn[data-action="toggle-favorite"].is-favorite .material-icons {
  color: #f59e0b !important;
}

/* Hover: alltid gul */
.fritekst-library-overlay .fritekst-icon-btn[data-action="toggle-favorite"]:hover .material-icons,
.fritekst-prompt-card .fritekst-icon-btn[data-action="toggle-favorite"]:hover .material-icons {
  color: #f59e0b;
  transform: scale(1.15);
}

/* Edit hover */
.fritekst-library-overlay .fritekst-icon-btn[data-action="edit-prompt"]:hover {
  color: #1976d2;
  background: #e3f2fd;
}

/* Delete hover */
.fritekst-library-overlay .fritekst-icon-btn[data-action="delete-prompt"]:hover {
  color: #ef4444;
  background: #fef2f2;
}

/* Card description */
.fritekst-library-overlay .fritekst-prompt-card-description {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.fritekst-library-overlay .fritekst-prompt-card-description:empty {
  display: none;
}

/* Card preview (italic content snippet) */
.fritekst-library-overlay .fritekst-prompt-card-preview {
  margin: 0;
  font-size: 0.8rem;
  color: #9e9e9e;
  line-height: 1.45;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background: var(--bg-light);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #e0e0e0;
}

/* Card meta */
.fritekst-library-overlay .fritekst-prompt-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: #9e9e9e;
}

.fritekst-library-overlay .fritekst-published-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #15803d;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Card footer */
.fritekst-library-overlay .fritekst-prompt-card-footer {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #fafafa;
}

/* --- BUTTONS i library --- */
.fritekst-library-overlay .fritekst-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #1976d2;
  color: #fff;
}

.fritekst-library-overlay .fritekst-button:hover {
  background: #0d47a1;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.2);
}

.fritekst-library-overlay .fritekst-button .material-icons {
  font-size: 16px;
}

.fritekst-library-overlay .fritekst-button.fritekst-small {
  padding: 6px 12px;
  font-size: 0.78rem;
}

.fritekst-library-overlay .fritekst-button.fritekst-secondary {
  background: var(--bg-light);
  color: var(--text-secondary);
  border: 1.5px solid #e0e0e0;
}

.fritekst-library-overlay .fritekst-button.fritekst-secondary:hover {
  background: #e0e0e0;
  border-color: #cbd5e1;
  box-shadow: none;
  transform: none;
}

.fritekst-library-overlay .fritekst-button.fritekst-danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1.5px solid #fecaca;
}

.fritekst-library-overlay .fritekst-button.fritekst-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  box-shadow: none;
}

/* ==========================================================================
   LAG NY / REDIGER — FORM REDESIGN
   ========================================================================== */

.fritekst-library-overlay .fritekst-prompt-form {
  padding: 28px 32px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.fritekst-library-overlay .fritekst-prompt-form h3 {
  margin: 0 0 24px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fritekst-library-overlay .fritekst-prompt-form h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: #1976d2;
  border-radius: 2px;
}

/* Form groups */
.fritekst-library-overlay .fritekst-form-group {
  margin-bottom: 20px;
}

.fritekst-library-overlay .fritekst-form-label {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.fritekst-library-overlay .fritekst-form-label .fritekst-required {
  color: #ef4444;
  margin-left: 2px;
  font-weight: 700;
}

/* Inputs */
.fritekst-library-overlay .fritekst-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--bg-white);
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.fritekst-library-overlay .fritekst-input::placeholder {
  color: var(--text-muted);
}

.fritekst-library-overlay .fritekst-input:focus {
  border-color: #64b5f6;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background: var(--bg-white);
}

/* Textarea */
.fritekst-library-overlay .fritekst-content-textarea {
  resize: vertical;
  min-height: 180px;
  max-height: 400px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  padding: 14px 16px;
}

/* Char counter */
.fritekst-library-overlay .fritekst-char-counter {
  text-align: right;
  font-size: 0.76rem;
  color: #9e9e9e;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* Checkbox group */
.fritekst-library-overlay .fritekst-checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-light);
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.fritekst-library-overlay .fritekst-checkbox-group:hover {
  border-color: #cbd5e1;
  background: var(--bg-light);
}

.fritekst-library-overlay .fritekst-checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #1976d2;
  cursor: pointer;
  flex-shrink: 0;
}

.fritekst-library-overlay .fritekst-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  margin: 0;
}

.fritekst-library-overlay .fritekst-checkbox-label .material-icons {
  font-size: 18px;
  color: var(--text-muted);
}

/* Form actions (Avbryt + Lagre) */
.fritekst-library-overlay .fritekst-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1.5px solid #fafafa;
  gap: 12px;
}

.fritekst-library-overlay .fritekst-form-actions-left,
.fritekst-library-overlay .fritekst-form-actions-right {
  display: flex;
  gap: 10px;
}

/* Lagre-knapp i form — litt større og grønnere */
.fritekst-library-overlay #fritekstPromptSave {
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  background: #1976d2;
  color: #fff;
}

.fritekst-library-overlay #fritekstPromptSave:hover {
  background: #0d47a1;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

/* Avbryt-knapp */
.fritekst-library-overlay #fritekstPromptCancel {
  padding: 10px 20px;
  font-size: 0.9rem;
  border-radius: 10px;
}

/* Slett-knapp (kun synlig ved redigering) */
.fritekst-library-overlay #fritekstPromptDelete {
  padding: 10px 18px;
  font-size: 0.9rem;
  border-radius: 10px;
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.fritekst-library-overlay .fritekst-maler-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: #9e9e9e;
  gap: 8px;
}

.fritekst-library-overlay .fritekst-maler-empty .material-icons {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

/* ==========================================================================
   VIEW DETAILS (Se detaljer)
   ========================================================================== */

.fritekst-library-overlay .fritekst-prompt-view-only {
  padding: 28px 32px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.fritekst-library-overlay .fritekst-view-header {
  margin-bottom: 20px;
}

.fritekst-library-overlay .fritekst-view-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.fritekst-library-overlay .fritekst-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-bottom: 16px;
  border-bottom: 1px solid #fafafa;
  margin-bottom: 20px;
}

.fritekst-library-overlay .fritekst-view-section {
  margin-bottom: 20px;
}

.fritekst-library-overlay .fritekst-view-section label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.fritekst-library-overlay .fritekst-view-content {
  background: var(--bg-light);
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
  color: var(--text-secondary);
}

.fritekst-library-overlay .fritekst-view-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1.5px solid #fafafa;
}

/* ==========================================================================
   LOADING SPINNER
   ========================================================================== */

.fritekst-library-overlay .fritekst-loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.fritekst-library-overlay .fritekst-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e0e0e0;
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: fritekst-lib-spin 0.7s linear infinite;
}

@keyframes fritekst-lib-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .fritekst-library-overlay .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  .fritekst-library-overlay .fritekst-modal-tabs {
    overflow-x: auto;
    padding: 0 4px;
    -webkit-overflow-scrolling: touch;
  }

  .fritekst-library-overlay .fritekst-tab-btn {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .fritekst-library-overlay .fritekst-prompt-form {
    padding: 20px 18px;
  }

  .fritekst-library-overlay .fritekst-library-list {
    padding: 12px 14px;
  }

  .fritekst-library-overlay .fritekst-form-actions {
    flex-wrap: wrap;
  }

  .fritekst-library-overlay .fritekst-prompt-view-only {
    padding: 20px 18px;
  }
}

@media (max-width: 480px) {
  .fritekst-library-overlay .fritekst-tab-btn .material-icons {
    display: none;
  }

  .fritekst-library-overlay .fritekst-library-controls-inner {
    flex-direction: column;
    gap: 8px;
  }

  .fritekst-library-overlay .fritekst-search-clear {
    width: 24px;
    height: 24px;
  }
}
/* =============================================================================
   SLASH COMMANDS — Snarvei-system for Fritekst KI
   Prefix: shortc-
   Lyst tema, blek gul popup
   ============================================================================= */

/* --- Popup Container --- */
.shortc-popup {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 6px;
    background: #fffef5;
    border: 1px solid #e8e3c8;
    border-radius: 10px;
    box-shadow:
        0 -4px 20px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(202, 191, 142, 0.12);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shortc-popup-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Popup Header --- */
.shortc-popup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #8a7e52;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #ede8d0;
    background: #fdfbf0;
    flex-shrink: 0;
}

.shortc-popup-header-icon {
    font-size: 14px;
    color: #c9a32a;
}

.shortc-popup-header .shortc-kbd {
    margin-left: auto;
}

/* --- Popup List --- */
.shortc-popup-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #ddd8be transparent;
}

.shortc-popup-list::-webkit-scrollbar {
    width: 4px;
}

.shortc-popup-list::-webkit-scrollbar-thumb {
    background: #ddd8be;
    border-radius: 4px;
}

/* --- Popup Item --- */
.shortc-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
    user-select: none;
}

.shortc-popup-item:hover,
.shortc-popup-item-selected {
    background: rgba(202, 163, 42, 0.08);
}

.shortc-popup-item-selected {
    background: rgba(202, 163, 42, 0.13);
}

.shortc-popup-item-code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #8a6d14;
    background: rgba(202, 163, 42, 0.1);
    border: 1px solid rgba(202, 163, 42, 0.2);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    min-width: 48px;
    text-align: center;
    flex-shrink: 0;
}

.shortc-popup-item-name {
    font-size: 13px;
    color: #3d3a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Empty / No Results State --- */
.shortc-popup-empty {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    color: #a39d80;
    font-size: 12px;
}

.shortc-popup-empty .material-icons {
    font-size: 18px;
    opacity: 0.5;
}

.shortc-popup-no-results .shortc-popup-empty {
    display: flex;
}

.shortc-popup-no-results .shortc-popup-list {
    display: none;
}

/* --- Popup Footer --- */
.shortc-popup-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    font-size: 10px;
    color: #a39d80;
    border-top: 1px solid #ede8d0;
    background: #fdfbf0;
    flex-shrink: 0;
}

.shortc-popup-footer span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Kbd Tag (reusable) --- */
.shortc-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 9px;
    font-weight: 500;
    color: #8a7e52;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.4;
    min-width: 18px;
}

/* --- Input Flash Animation (når snarvei aktiveres) --- */
.shortc-input-flash {
    animation: shortc-flash-anim 0.4s ease-out;
}

@keyframes shortc-flash-anim {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.35);
        border-color: var(--fritekst-primary, #1976d2);
    }
    50% {
        box-shadow: 0 0 10px 2px rgba(25, 118, 210, 0.15);
        border-color: var(--fritekst-primary, #1976d2);
    }
    100% {
        box-shadow: none;
        border-color: var(--fritekst-border-medium, #cbd5e0);
    }
}

/* --- Confetti Animation (når snarvei aktiveres) --- */
/* CSP-kompatibel: Ingen inline styles, kun forhåndsdefinerte klasser */

/* Usynlig speil-element for å måle caret-posisjon i textarea */
.shortc-caret-mirror {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    pointer-events: none;
    /* Matcher .fritekst-chat-input styling */
    font-family: inherit;
    font-size: 1rem;
    padding: 12px 16px;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 100%;
}

.shortc-confetti-container {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 99999;
    overflow: visible;
}

/* 20 horisontale posisjoner (0% til 95% i 5%-steg) */
.shortc-confetti-x-0  { left: 0%; }
.shortc-confetti-x-1  { left: 5%; }
.shortc-confetti-x-2  { left: 10%; }
.shortc-confetti-x-3  { left: 15%; }
.shortc-confetti-x-4  { left: 20%; }
.shortc-confetti-x-5  { left: 25%; }
.shortc-confetti-x-6  { left: 30%; }
.shortc-confetti-x-7  { left: 35%; }
.shortc-confetti-x-8  { left: 40%; }
.shortc-confetti-x-9  { left: 45%; }
.shortc-confetti-x-10 { left: 50%; }
.shortc-confetti-x-11 { left: 55%; }
.shortc-confetti-x-12 { left: 60%; }
.shortc-confetti-x-13 { left: 65%; }
.shortc-confetti-x-14 { left: 70%; }
.shortc-confetti-x-15 { left: 75%; }
.shortc-confetti-x-16 { left: 80%; }
.shortc-confetti-x-17 { left: 85%; }
.shortc-confetti-x-18 { left: 90%; }
.shortc-confetti-x-19 { left: 95%; }

.shortc-confetti-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    opacity: 0;
    will-change: transform, opacity;
}

/* --- Farger --- */
.shortc-confetti-c-blue    { background: #1976d2; }
.shortc-confetti-c-green   { background: #2e7d32; }
.shortc-confetti-c-amber   { background: #f59e0b; }
.shortc-confetti-c-red     { background: #ef4444; }
.shortc-confetti-c-purple  { background: #8b5cf6; }
.shortc-confetti-c-pink    { background: #ec4899; }
.shortc-confetti-c-cyan    { background: #06b6d4; }
.shortc-confetti-c-orange  { background: #f97316; }

/* --- Former --- */
.shortc-confetti-s-square  { width: 7px; height: 7px; border-radius: 2px; }
.shortc-confetti-s-circle  { width: 7px; height: 7px; border-radius: 50%; }
.shortc-confetti-s-rect    { width: 4px; height: 10px; border-radius: 1px; }

/* --- Delays --- */
.shortc-confetti-del-0 { animation-delay: 0s; }
.shortc-confetti-del-1 { animation-delay: 0.07s; }
.shortc-confetti-del-2 { animation-delay: 0.14s; }

/* --- 12 retninger i en vifte oppover (200°–340° med ~12° mellomrom) --- */
.shortc-confetti-d-0  { animation: shortc-cb-0  0.7s ease-out forwards; }
.shortc-confetti-d-1  { animation: shortc-cb-1  0.7s ease-out forwards; }
.shortc-confetti-d-2  { animation: shortc-cb-2  0.7s ease-out forwards; }
.shortc-confetti-d-3  { animation: shortc-cb-3  0.7s ease-out forwards; }
.shortc-confetti-d-4  { animation: shortc-cb-4  0.7s ease-out forwards; }
.shortc-confetti-d-5  { animation: shortc-cb-5  0.7s ease-out forwards; }
.shortc-confetti-d-6  { animation: shortc-cb-6  0.7s ease-out forwards; }
.shortc-confetti-d-7  { animation: shortc-cb-7  0.7s ease-out forwards; }
.shortc-confetti-d-8  { animation: shortc-cb-8  0.7s ease-out forwards; }
.shortc-confetti-d-9  { animation: shortc-cb-9  0.7s ease-out forwards; }
.shortc-confetti-d-10 { animation: shortc-cb-10 0.7s ease-out forwards; }
.shortc-confetti-d-11 { animation: shortc-cb-11 0.7s ease-out forwards; }

/* Pre-beregnet: angle = 200 + i*12.7 grader, velocity ~90px */
@keyframes shortc-cb-0 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-85px, -31px) rotate(320deg) scale(0.3); }
}
@keyframes shortc-cb-1 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-76px, -52px) rotate(-280deg) scale(0.3); }
}
@keyframes shortc-cb-2 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-62px, -68px) rotate(400deg) scale(0.3); }
}
@keyframes shortc-cb-3 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-44px, -80px) rotate(-350deg) scale(0.3); }
}
@keyframes shortc-cb-4 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-23px, -87px) rotate(290deg) scale(0.3); }
}
@keyframes shortc-cb-5 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(0px, -90px) rotate(-420deg) scale(0.3); }
}
@keyframes shortc-cb-6 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(23px, -87px) rotate(360deg) scale(0.3); }
}
@keyframes shortc-cb-7 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(44px, -80px) rotate(-300deg) scale(0.3); }
}
@keyframes shortc-cb-8 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(62px, -68px) rotate(440deg) scale(0.3); }
}
@keyframes shortc-cb-9 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(76px, -52px) rotate(-260deg) scale(0.3); }
}
@keyframes shortc-cb-10 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(85px, -31px) rotate(380deg) scale(0.3); }
}
@keyframes shortc-cb-11 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(90px, -8px) rotate(-340deg) scale(0.3); }
}

/* --- Snarvei-felt i Maler-modal prompt-items --- */
.shortc-prompt-item-body {
    flex: 1;
    min-width: 0;
}

.shortc-shortcut-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.shortc-shortcut-input-wrapper {
    display: flex;
    align-items: center;
    background: #fdfbf0;
    border: 1px solid #e0dbc4;
    border-radius: 5px;
    padding: 0 2px 0 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.shortc-shortcut-input-wrapper:focus-within {
    border-color: #c9a32a;
    box-shadow: 0 0 0 2px rgba(201, 163, 42, 0.1);
}

.shortc-shortcut-prefix {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #8a6d14;
    user-select: none;
    pointer-events: none;
}

.shortc-shortcut-input {
    width: 60px;
    background: transparent;
    border: none;
    outline: none;
    color: #3d3a2e;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    padding: 4px 4px;
}

.shortc-shortcut-input::placeholder {
    color: #c4bfa5;
}

.shortc-shortcut-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #b0a882;
    cursor: pointer;
    padding: 3px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.shortc-shortcut-save-btn:hover {
    color: #8a6d14;
    background: rgba(202, 163, 42, 0.1);
}

.shortc-shortcut-save-btn .material-icons {
    font-size: 16px;
}

.shortc-shortcut-save-btn.shortc-saved {
    color: #2e7d32;
}

/* --- Snarvei-badge i maler-modal prompt-items --- */
.shortc-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 10px;
    font-weight: 600;
    color: #8a6d14;
    background: rgba(202, 163, 42, 0.1);
    border: 1px solid rgba(202, 163, 42, 0.22);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .shortc-popup {
        max-height: 220px;
        left: -8px;
        right: -8px;
    }

    .shortc-popup-footer {
        display: none;
    }

    .shortc-popup-item {
        padding: 10px 10px;
    }

    .shortc-popup-item-name {
        font-size: 14px;
    }

    .shortc-shortcut-input {
        width: 50px;
    }
}

@media (max-width: 400px) {
    .shortc-popup {
        max-height: 200px;
    }

    .shortc-popup-header {
        padding: 6px 10px;
        font-size: 10px;
    }

    .shortc-popup-item {
        padding: 8px 8px;
        gap: 8px;
    }

    .shortc-popup-item-code {
        font-size: 11px;
        min-width: 40px;
        padding: 2px 5px;
    }
}
/* ============================================
   SHORT2- PREFIX: CSP-kompatible utility-klasser
   Erstatter inline style="" attributter
   ============================================ */

/* Ikon: 14px, halvt gjennomsiktig (article/star i maler) */
.short2-icon-sm-muted {
    font-size: 14px;
    opacity: 0.5;
}

/* Ikon: 18px, gul stjerne (favoritt-markør i maler) */
.short2-icon-star-fav {
    font-size: 18px;
    color: #f59e0b;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Ikon med margin-right 8px (description/error i dropdown) */
.short2-icon-mr {
    margin-right: 8px;
}

/* Small-tag: høyrestilt, litt mindre tekst (dropdown badge) */
.short2-small-badge {
    margin-left: auto;
    font-size: 0.85em;
}

/* Accordion body: åpen tilstand med max-height */
.short2-accordion-body-open {
    max-height: 2000px;
}

/* Empty state: stort ikon */
.short2-icon-empty {
    font-size: 32px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Empty state: tekstavsnitt */
.short2-empty-text {
    margin: 0 0 8px 0;
    color: var(--text-muted);
}

/* Lite ikon 16px (menu_book i knapp) */
.short2-icon-btn-sm {
    font-size: 16px;
}/* ===== Fritekst KI — auto-kontekst fra konsultasjon (banner/dropdown) ===== */
.fk-kons-host { margin: 0 0 10px; }
.fk-kons-banner { display: flex; align-items: center; gap: 10px; background: #eef6ff; border: 1px solid #bcdcff; border-radius: 10px; padding: 10px 12px; }
.fk-kons-banner.fk-kons-off { opacity: .55; }
.fk-kons-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; flex: 0 0 auto; animation: fkKonsPulse 1.8s infinite; }
@keyframes fkKonsPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5);} 70% { box-shadow: 0 0 0 7px rgba(229,72,77,0);} 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0);} }
.fk-kons-banner-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.fk-kons-banner-text strong { font-size: 13.5px; color: #0b4fc4; }
.fk-kons-sub { font-size: 12px; color: #5b6678; }
.fk-kons-toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.fk-kons-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.fk-kons-slider { position: absolute; inset: 0; background: #c3cad6; border-radius: 999px; transition: .15s; }
.fk-kons-slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.fk-kons-toggle input:checked + .fk-kons-slider { background: #1f6feb; }
.fk-kons-toggle input:checked + .fk-kons-slider::before { transform: translateX(16px); }
.fk-kons-picker { display: flex; align-items: center; gap: 8px; background: #f4f7fb; border: 1px solid #e3e9f2; border-radius: 10px; padding: 8px 10px; }
.fk-kons-picker-icon { color: #5b6678; font-size: 19px; flex: 0 0 auto; }
.fk-kons-select { flex: 1 1 auto; min-width: 0; border: 1px solid #cfd8e6; border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; background: #fff; color: #1a2233; cursor: pointer; }
.fk-kons-select:focus { outline: 2px solid #1f6feb; outline-offset: 1px; }
/* ===== Fritekst kons-velger: knapp + custom dropdown ===== */
.fk-kons-picker { position: relative; display: block; background: none; border: none; padding: 0; }
.fk-kons-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: #fff; border: 1px solid #cfd8e6; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px; color: #1a2233; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.fk-kons-btn:hover { border-color: #1f6feb; }
.fk-kons-btn.fk-kons-open { border-color: #1f6feb; box-shadow: 0 0 0 3px rgba(31,111,235,.12); }
.fk-kons-btn.fk-kons-btn-active { border-color: #bcdcff; background: #f3f8ff; }
.fk-kons-btn-icon { font-size: 18px; color: #5b6678; flex: 0 0 auto; }
.fk-kons-btn-label { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-kons-btn-caret { font-size: 20px; color: #8b97a8; flex: 0 0 auto; transition: transform .15s; }
.fk-kons-btn.fk-kons-open .fk-kons-btn-caret { transform: rotate(180deg); }
.fk-kons-menu { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e3e9f2; border-radius: 12px; box-shadow: 0 12px 32px rgba(18,38,73,.16); padding: 6px; max-height: 320px; overflow-y: auto; animation: fkKonsMenuIn .12s ease; }
@keyframes fkKonsMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fk-kons-item { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; font: inherit; color: #1a2233; }
.fk-kons-item:hover { background: #f4f7fb; }
.fk-kons-item.fk-kons-item-sel { background: #eef4ff; box-shadow: inset 0 0 0 1px #bcdcff; }
.fk-kons-item-none { color: #5b6678; font-size: 12.5px; }
.fk-kons-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fk-kons-item-time { font-weight: 600; font-size: 12.5px; color: #0b4fc4; }
.fk-kons-item-dur { font-size: 11.5px; color: #8b97a8; flex: 0 0 auto; }
.fk-kons-item-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fk-kons-chip { background: #e8f0fe; color: #0b4fc4; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 500; }
.fk-kons-chip.fk-kons-chip-muted { background: #eef1f5; color: #5b6678; }

/* Modus B (ingen aktiv kons): default = ingen kontekst valgt.
   Inaktiv banner-variant + tydelig CTA-knapp «Velg konsultasjon ▾».
   Speiler aktiv-banneren visuelt, bare med dempet bakgrunn. */
.fk-kons-banner.fk-kons-banner-inactive,
.fk-kons-banner.fk-kons-banner-selected { padding: 12px 14px; gap: 12px; }
.fk-kons-banner.fk-kons-banner-inactive { background: #f4f7fb; border-color: #cfd8e6; }
.fk-kons-banner-inactive .fk-kons-banner-text strong { color: #1a2233; }
.fk-kons-banner.fk-kons-banner-selected { background: #eef4ff; border-color: #bcdcff; }
.fk-kons-banner-selected .fk-kons-banner-text strong { color: #0b4fc4; }
/* Større tekst i banner-modus enn aktiv-banneren — kons-info skal være lett å lese */
.fk-kons-banner-inactive .fk-kons-banner-text,
.fk-kons-banner-selected .fk-kons-banner-text { gap: 3px; }
.fk-kons-banner-inactive .fk-kons-banner-text strong,
.fk-kons-banner-selected .fk-kons-banner-text strong { font-size: 15px; }
.fk-kons-banner-inactive .fk-kons-sub,
.fk-kons-banner-selected .fk-kons-sub { font-size: 13.5px; line-height: 1.35; }
.fk-kons-banner-picker { position: relative; flex: 0 0 auto; }
.fk-kons-banner-cta { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; background: #fff; border: 1px solid #1f6feb; border-radius: 8px; color: #0b4fc4; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .12s, box-shadow .12s; white-space: nowrap; }
.fk-kons-banner-cta:hover { background: #eef4ff; }
.fk-kons-banner-cta.fk-kons-open { background: #eef4ff; box-shadow: 0 0 0 3px rgba(31,111,235,.12); }
.fk-kons-banner-cta-caret { font-size: 18px; transition: transform .15s; }
.fk-kons-banner-cta.fk-kons-open .fk-kons-banner-cta-caret { transform: rotate(180deg); }
/* Menyen skal være bred nok til at tid + varighet + stikkord får plass på én linje;
   utvider leftward fra knappen så den ikke klippes mot høyre kant. */
.fk-kons-banner-picker .fk-kons-menu { left: auto; right: 0; min-width: 340px; max-width: min(90vw, 460px); }

/* ===== journal-summary.css ===== */
/* ==========================================================================
   JOURNAL SUMMARY CSS - HARMONISERT MED APP-DESIGNSYSTEM
   Matcher Fritekst KI og Dashboard-styling
   Versjon 2.0 - Fullstendig redesign
   ========================================================================== */

/* ==========================================================================
   CSS VARIABLER - Konsistent med app-tema
   ========================================================================== */
:root {
  /* Journal Summary spesifikke farger (slate/blå tema) */
  --js-primary: #475569;
  --js-primary-light: #64748b;
  --js-primary-dark: #334155;
  --js-primary-darker: #1e293b;
  
  /* Accent farger */
  --js-accent: #3b82f6;
  --js-accent-light: #60a5fa;
  --js-accent-dark: #2563eb;
  
  /* Status farger */
  --js-success: #10b981;
  --js-success-light: #d1fae5;
  --js-warning: #f59e0b;
  --js-warning-light: #fef3c7;
  --js-error: #ef4444;
  --js-error-light: #fee2e2;
  
  /* Nøytrale farger */
  --js-bg-page: #f8fafc;
  --js-bg-card: #ffffff;
  --js-bg-elevated: #f1f5f9;
  --js-border: #e2e8f0;
  --js-border-light: #f1f5f9;
  --js-text-primary: #1e293b;
  --js-text-secondary: #475569;
  --js-text-muted: #94a3b8;
  
  /* Shadows */
  --js-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --js-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --js-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --js-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Border radius */
  --js-radius-sm: 6px;
  --js-radius-md: 8px;
  --js-radius-lg: 12px;
  --js-radius-xl: 16px;
  
  /* Transitions */
  --js-transition-fast: 150ms ease;
  --js-transition-normal: 250ms ease;
  --js-transition-slow: 350ms ease;
}

/* ==========================================================================
   MODAL CONTAINER - Fullscreen layout
   ========================================================================== */
.journaloppsummering-summary-modal {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
}

/* ==========================================================================
   HEADER - Gradient stil som Fritekst KI
   ========================================================================== */
.journaloppsummering-header {
  background: linear-gradient(135deg, var(--js-primary) 0%, var(--js-primary-dark) 50%, var(--js-primary-darker) 100%) !important;
  color: white !important;
  padding: 1rem 1.5rem !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay */
.journaloppsummering-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.journaloppsummering-header .modal-title {
  color: white !important;
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.journaloppsummering-header .modal-title .material-icons {
  font-size: 1.5rem;
  opacity: 0.9;
}

.journaloppsummering-header .close {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 1.75rem !important;
  transition: var(--js-transition-fast);
  position: relative;
  z-index: 1;
}

.journaloppsummering-header .close:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--js-radius-sm);
}

/* ==========================================================================
   BODY - To-kolonne layout
   ========================================================================== */
.journaloppsummering-summary-body {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  flex: 1;
  overflow: hidden;
  background: var(--js-bg-page);
}

/* ==========================================================================
   VENSTRE PANEL - Opplasting og innstillinger
   ========================================================================== */
.journaloppsummering-left-panel {
  background: var(--js-bg-card);
  border-right: 1px solid var(--js-border);
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Scrollbar styling */
.journaloppsummering-left-panel::-webkit-scrollbar {
  width: 6px;
}

.journaloppsummering-left-panel::-webkit-scrollbar-track {
  background: transparent;
}

.journaloppsummering-left-panel::-webkit-scrollbar-thumb {
  background: var(--js-border);
  border-radius: 3px;
}

.journaloppsummering-left-panel::-webkit-scrollbar-thumb:hover {
  background: var(--js-text-muted);
}

/* ==========================================================================
   SEKSJONER - Kort-basert design
   ========================================================================== */
.journaloppsummering-section {
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--js-shadow-sm);
  transition: var(--js-transition-normal);
}

.journaloppsummering-section:hover {
  box-shadow: var(--js-shadow-md);
}

.journaloppsummering-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--js-text-primary);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--js-border-light);
}

.journaloppsummering-section h3 .material-icons {
  font-size: 1.25rem;
  color: var(--js-accent);
}

/* ==========================================================================
   UPLOAD SECTION
   ========================================================================== */
.journaloppsummering-upload-help {
  font-size: 0.8rem;
  color: var(--js-text-muted);
  margin: -0.5rem 0 1rem 0;
}

/* ==========================================================================
   DROP ZONE - Modernisert
   ========================================================================== */
.journaloppsummering-drop-zone {
  border: 2px dashed var(--js-border);
  border-radius: var(--js-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--js-bg-elevated);
  transition: var(--js-transition-normal);
  cursor: pointer;
}

.journaloppsummering-drop-zone:hover {
  border-color: var(--js-accent);
  background: rgba(59, 130, 246, 0.05);
}

.journaloppsummering-drop-zone.journaloppsummering-drag-over {
  border-color: var(--js-accent);
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.01);
}

.journaloppsummering-drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.journaloppsummering-drop-zone-icon {
  font-size: 3rem !important;
  color: var(--js-accent);
  opacity: 0.7;
}

.journaloppsummering-drop-zone h4 {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--js-text-secondary);
  margin: 0;
}

.journaloppsummering-drop-zone p {
  font-size: 0.8rem;
  color: var(--js-text-muted);
  margin: 0;
}

/* Upload Button */
.journaloppsummering-upload-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, var(--js-accent) 0%, var(--js-accent-dark) 100%);
  color: white;
  border: none;
  border-radius: var(--js-radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--js-transition-fast);
  box-shadow: var(--js-shadow-sm);
}

.journaloppsummering-upload-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--js-shadow-md);
  background: linear-gradient(135deg, var(--js-accent-light) 0%, var(--js-accent) 100%);
}

.journaloppsummering-upload-button .material-icons {
  font-size: 1.125rem;
}

/* ==========================================================================
   FILE INFO - Fil valgt visning
   ========================================================================== */
.journaloppsummering-file-info {
  background: var(--js-bg-elevated);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-md);
  padding: 1rem;
  margin-top: 1rem;
}

.journaloppsummering-file-info-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.journaloppsummering-file-icon {
  font-size: 2rem !important;
  color: var(--js-accent);
}

.journaloppsummering-file-details {
  flex: 1;
  min-width: 0;
}

.journaloppsummering-file-name {
  font-weight: 500;
  color: var(--js-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.journaloppsummering-file-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--js-text-muted);
}

.journaloppsummering-token-count {
  color: var(--js-accent);
  font-weight: 500;
}

/* Remove file button */
.journaloppsummering-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-sm);
  color: var(--js-text-muted);
  cursor: pointer;
  transition: var(--js-transition-fast);
}

.journaloppsummering-icon-button:hover {
  background: var(--js-error-light);
  border-color: var(--js-error);
  color: var(--js-error);
}

/* Token Progress */
.journaloppsummering-token-progress-container {
  margin-top: 0.75rem;
}

.journaloppsummering-token-progress-bar {
  height: 4px;
  background: var(--js-border);
  border-radius: 2px;
  overflow: hidden;
}

.journaloppsummering-token-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--js-accent) 0%, var(--js-accent-light) 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.journaloppsummering-token-progress-text {
  font-size: 0.75rem;
  color: var(--js-text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

/* Token Warning */
.journaloppsummering-token-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--js-error-light);
  border: 1px solid var(--js-error);
  border-radius: var(--js-radius-md);
  margin-top: 1rem;
}

.journaloppsummering-token-warning .material-icons {
  color: var(--js-error);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.journaloppsummering-token-warning strong {
  display: block;
  color: var(--js-error);
  margin-bottom: 0.25rem;
}

.journaloppsummering-token-warning p {
  font-size: 0.8rem;
  color: var(--js-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   INSTRUCTIONS SECTION
   ========================================================================== */
.journaloppsummering-instructions-examples {
  background: var(--js-bg-elevated);
  border-radius: var(--js-radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.journaloppsummering-instructions-examples h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--js-text-secondary);
  margin: 0 0 0.75rem 0;
}

.journaloppsummering-examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.journaloppsummering-examples-list li {
  font-size: 0.8rem;
  color: var(--js-text-muted);
  padding-left: 1rem;
  position: relative;
}

.journaloppsummering-examples-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--js-accent);
}

.journaloppsummering-examples-list li strong {
  color: var(--js-text-secondary);
  font-weight: 500;
}

/* Instructions Textarea */
.journaloppsummering-instructions-input {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--js-text-primary);
  background: var(--js-bg-card);
  resize: vertical;
  min-height: 100px;
  transition: var(--js-transition-fast);
}

.journaloppsummering-instructions-input:focus {
  outline: none;
  border-color: var(--js-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.journaloppsummering-instructions-input::placeholder {
  color: var(--js-text-muted);
}

/* ==========================================================================
   FORMAT INFO SECTION
   ========================================================================== */
.journaloppsummering-format-info {
  background: linear-gradient(135deg, var(--js-bg-elevated) 0%, var(--js-bg-card) 100%);
}

.journaloppsummering-format-description {
  font-size: 0.85rem;
  color: var(--js-text-secondary);
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.journaloppsummering-format-preview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.journaloppsummering-format-section {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  background: var(--js-bg-card);
  border-left: 3px solid var(--js-accent);
  border-radius: 0 var(--js-radius-sm) var(--js-radius-sm) 0;
}

.journaloppsummering-format-section strong {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--js-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.journaloppsummering-format-section small {
  font-size: 0.75rem;
  color: var(--js-text-muted);
}

/* ==========================================================================
   HØYRE PANEL - Editor og resultater
   ========================================================================== */
.journaloppsummering-right-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--js-bg-page);
  padding: 1.5rem;
}

/* ==========================================================================
   TEXT EDITOR SECTION
   ========================================================================== */
.journaloppsummering-text-editor-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-lg);
  overflow: hidden;
  box-shadow: var(--js-shadow-sm);
}

.journaloppsummering-text-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  background: var(--js-bg-elevated);
  border-bottom: 1px solid var(--js-border);
}

.journaloppsummering-text-editor-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--js-text-primary);
}

.journaloppsummering-text-editor-title .material-icons {
  font-size: 1.125rem;
  color: var(--js-accent);
}

.journaloppsummering-text-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Token Display Badge */
.journaloppsummering-token-display {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--js-text-muted);
  transition: var(--js-transition-fast);
}

.journaloppsummering-token-display.success {
  background: var(--js-success-light);
  border-color: var(--js-success);
  color: var(--js-success);
}

.journaloppsummering-token-display.warning {
  background: var(--js-warning-light);
  border-color: var(--js-warning);
  color: var(--js-warning);
}

.journaloppsummering-token-display.error {
  background: var(--js-error-light);
  border-color: var(--js-error);
  color: var(--js-error);
}

.journaloppsummering-token-icon {
  font-size: 1rem !important;
}

/* Action Buttons */
.journaloppsummering-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-md);
  background: var(--js-bg-card);
  color: var(--js-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--js-transition-fast);
}

.journaloppsummering-action-btn:hover {
  background: var(--js-bg-elevated);
  border-color: var(--js-text-muted);
}

.journaloppsummering-action-btn .material-icons {
  font-size: 1rem;
}

.journaloppsummering-action-btn.journaloppsummering-primary {
  background: linear-gradient(135deg, var(--js-accent) 0%, var(--js-accent-dark) 100%);
  border-color: var(--js-accent-dark);
  color: white;
}

.journaloppsummering-action-btn.journaloppsummering-primary:hover {
  background: linear-gradient(135deg, var(--js-accent-light) 0%, var(--js-accent) 100%);
}

.journaloppsummering-action-btn.journaloppsummering-secondary {
  background: var(--js-bg-card);
  border-color: var(--js-border);
  color: var(--js-text-secondary);
}

.journaloppsummering-action-btn.journaloppsummering-secondary:hover {
  background: var(--js-bg-elevated);
}

/* Text Editor Textarea */
.journaloppsummering-text-editor {
  flex: 1;
  width: 100%;
  padding: 1rem;
  border: none;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--js-text-primary);
  background: var(--js-bg-card);
  resize: none;
}

.journaloppsummering-text-editor:focus {
  outline: none;
}

.journaloppsummering-text-editor::placeholder {
  color: var(--js-text-muted);
  font-family: inherit;
}

/* ==========================================================================
   RESULTS SECTION
   ========================================================================== */
.journaloppsummering-results-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-lg);
  overflow: hidden;
  box-shadow: var(--js-shadow-sm);
}

.journaloppsummering-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, var(--js-success) 0%, #059669 100%);
  border-bottom: none;
}

.journaloppsummering-results-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  margin: 0;
  padding: 0;
  border: none;
}

.journaloppsummering-results-header h3 .material-icons {
  font-size: 1.25rem;
  color: white;
}

.journaloppsummering-results-actions {
  display: flex;
  gap: 0.5rem;
}

.journaloppsummering-results-actions .journaloppsummering-action-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.journaloppsummering-results-actions .journaloppsummering-action-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Result Textarea */
.journaloppsummering-result-textarea {
  flex: 1;
  width: 100%;
  padding: 1rem;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--js-text-primary);
  background: var(--js-bg-card);
  resize: none;
}

.journaloppsummering-result-textarea:focus {
  outline: none;
}

/* Processing Stats */
.journaloppsummering-processing-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: var(--js-bg-elevated);
  border-top: 1px solid var(--js-border);
}

.journaloppsummering-stat-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--js-text-secondary);
}

.journaloppsummering-stat-item .material-icons {
  font-size: 1rem;
  color: var(--js-text-muted);
}

.journaloppsummering-epj-ready-indicator {
  color: var(--js-success);
}

.journaloppsummering-epj-ready-indicator .material-icons {
  color: var(--js-success);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.journaloppsummering-summary-footer {
  background: var(--js-bg-card) !important;
  border-top: 1px solid var(--js-border) !important;
  padding: 1rem 1.5rem !important;
  position: relative;
}

.journaloppsummering-summary-footer .modal-actions {
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0;
  border: none;
  background: transparent;
}

/* Footer Buttons */
.journaloppsummering-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--js-radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--js-transition-fast);
}

.journaloppsummering-footer-btn.journaloppsummering-secondary {
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  color: var(--js-text-secondary);
}

.journaloppsummering-footer-btn.journaloppsummering-secondary:hover {
  background: var(--js-bg-elevated);
  border-color: var(--js-text-muted);
}

.journaloppsummering-generate-btn {
  background: linear-gradient(135deg, var(--js-primary) 0%, var(--js-primary-dark) 100%);
  border: none;
  color: white;
  box-shadow: var(--js-shadow-md);
}

.journaloppsummering-generate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--js-primary-light) 0%, var(--js-primary) 100%);
  transform: translateY(-1px);
  box-shadow: var(--js-shadow-lg);
}

.journaloppsummering-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.journaloppsummering-generate-btn .material-icons {
  font-size: 1.125rem;
}

/* ==========================================================================
   PROCESSING OVERLAY
   ========================================================================== */
.journaloppsummering-processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.journaloppsummering-processing-content {
  text-align: center;
  max-width: 320px;
}

/* Spinner - tre sirkler som Fritekst KI */
.journaloppsummering-processing-spinner {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.journaloppsummering-spinner-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--js-accent);
  animation: journaloppsummering-bounce 1.4s ease-in-out infinite;
}

.journaloppsummering-spinner-circle:nth-child(1) {
  animation-delay: -0.32s;
}

.journaloppsummering-spinner-circle:nth-child(2) {
  animation-delay: -0.16s;
}

.journaloppsummering-spinner-circle:nth-child(3) {
  animation-delay: 0s;
}

@keyframes journaloppsummering-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.journaloppsummering-processing-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--js-text-primary);
  margin: 0 0 0.5rem 0;
}

.journaloppsummering-processing-content p {
  font-size: 0.9rem;
  color: var(--js-text-muted);
  margin: 0 0 1.25rem 0;
}

/* Progress Bar */
.journaloppsummering-processing-progress {
  margin-bottom: 1rem;
}

.journaloppsummering-progress-bar {
  height: 6px;
  background: var(--js-border);
  border-radius: 3px;
  overflow: hidden;
}

.journaloppsummering-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--js-accent) 0%, var(--js-accent-light) 50%, var(--js-accent) 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  animation: journaloppsummering-shimmer 1.5s ease-in-out infinite;
}

@keyframes journaloppsummering-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.journaloppsummering-processing-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--js-text-muted);
}

.journaloppsummering-processing-note .material-icons {
  font-size: 1rem;
  color: var(--js-accent);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {

  .journaloppsummering-summary-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .journaloppsummering-left-panel {
    border-right: none;
    border-bottom: 1px solid var(--js-border);
    max-height: 40vh;
  }

  .journaloppsummering-right-panel {
    min-height: 50vh;
  }
}

@media (max-width: 640px) {
  .journaloppsummering-header {
    padding: 0.875rem 1rem !important;
  }

  .journaloppsummering-left-panel,
  .journaloppsummering-right-panel {
    padding: 1rem;
  }

  .journaloppsummering-section {
    padding: 1rem;
  }

  .journaloppsummering-drop-zone {
    padding: 1.5rem 1rem;
  }

  .journaloppsummering-footer-btn {
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
  }

  .journaloppsummering-processing-stats {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   FLERFILSTØTTE (fra eksisterende CSS)
   ========================================================================== */
.journal-files-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--js-border);
  max-height: 200px;
  overflow-y: auto;
}

.journal-file-item {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.5rem;
  background: var(--js-bg-elevated);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-md);
  transition: var(--js-transition-fast);
}

.journal-file-item:hover {
  background: var(--js-bg-page);
  border-color: var(--js-text-muted);
}

.file-item-icon {
  color: var(--js-accent);
  margin-right: 0.75rem;
  font-size: 1.5rem;
}

.file-item-details {
  flex: 1;
  min-width: 0;
}

.file-item-name {
  font-weight: 500;
  color: var(--js-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.125rem;
  font-size: 0.875rem;
}

.file-item-stats {
  font-size: 0.75rem;
  color: var(--js-text-muted);
}

.file-item-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--js-radius-sm);
  color: var(--js-text-muted);
  transition: var(--js-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-item-remove:hover {
  background: var(--js-error-light);
  color: var(--js-error);
}

.file-item-remove .material-icons {
  font-size: 1.25rem;
}

/* Scrollbar styling for filliste */
.journal-files-list::-webkit-scrollbar {
  width: 6px;
}

.journal-files-list::-webkit-scrollbar-track {
  background: transparent;
}

.journal-files-list::-webkit-scrollbar-thumb {
  background: var(--js-border);
  border-radius: 3px;
}

.journal-files-list::-webkit-scrollbar-thumb:hover {
  background: var(--js-text-muted);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.journaloppsummering-hidden {
  display: none !important;
}

/* Smooth transitions for show/hide */
.journaloppsummering-fade-enter {
  opacity: 0;
  transform: translateY(10px);
}

.journaloppsummering-fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.journaloppsummering-fade-exit {
  opacity: 1;
}

.journaloppsummering-fade-exit-active {
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* ===== fritekst-bilde.css ===== */
/* ============================================
   FRITEKST BILDE-UPLOAD STYLING
   Prefiks: fritekst-bilde-
   ============================================ */

/* Upload Section Container */
.fritekst-bilde-upload-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  border: none;
  position: relative;
}

/* Upload Header */
.fritekst-bilde-upload-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

/* Upload Button Label */
.fritekst-bilde-upload-button-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-white);
  color: #1976d2;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1.5px solid #1976d2;
}

.fritekst-bilde-upload-button-label:hover {
  background: #e3f2fd;
  border-color: #0d47a1;
  color: #0d47a1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
}

.fritekst-bilde-upload-button-label:active {
  transform: translateY(0);
}

.fritekst-bilde-upload-button-label .material-icons {
  font-size: 18px;
}

/* Info Notice */
.fritekst-bilde-info-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  font-size: 12px;
  color: #856404;
  flex: 1;
  min-width: 200px;
}

.fritekst-bilde-info-notice .material-icons {
  font-size: 16px;
  color: #ffc107;
}

/* Thumbnails Container */
.fritekst-bilde-thumbnails-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  min-height: 0;
}

.fritekst-bilde-thumbnails-container:empty {
  display: none;
}

/* Individual Thumbnail */
.fritekst-bilde-thumbnail {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e0e0e0;
  background: var(--bg-white);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fritekst-bilde-thumbnail:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
  transform: translateY(-2px);
}

.fritekst-bilde-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Thumbnail Remove Button */
.fritekst-bilde-thumbnail-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.95);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
  padding: 0;
}

.fritekst-bilde-thumbnail:hover .fritekst-bilde-thumbnail-remove {
  opacity: 1;
  transform: scale(1);
}

.fritekst-bilde-thumbnail-remove:hover {
  background: #dc3545;
  transform: scale(1.1);
}

.fritekst-bilde-thumbnail-remove .material-icons {
  font-size: 16px;
}

/* Image size indicator */
.fritekst-bilde-thumbnail-size {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  font-size: 10px;
  padding: 4px 6px;
  text-align: center;
}

/* Drop Overlay */
.fritekst-bilde-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(102, 126, 234, 0.95);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.fritekst-bilde-drop-overlay.fritekst-hidden {
  opacity: 0;
  pointer-events: none;
}

.fritekst-bilde-drop-content {
  text-align: center;
  color: white;
}

.fritekst-bilde-drop-content .material-icons {
  font-size: 48px;
  margin-bottom: 8px;
  animation: fritekst-bilde-bounce 1s ease-in-out infinite;
}

.fritekst-bilde-drop-content p {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.fritekst-bilde-drop-content small {
  font-size: 13px;
  opacity: 0.9;
}

/* Bounce animation */
@keyframes fritekst-bilde-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Loading State */
.fritekst-bilde-thumbnail.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
}

.fritekst-bilde-thumbnail.loading::after {
  content: '';
  width: 30px;
  height: 30px;
  border: 3px solid #e0e0e0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: fritekst-bilde-spin 0.8s linear infinite;
}

@keyframes fritekst-bilde-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Error State */
.fritekst-bilde-thumbnail.error {
  border-color: #dc3545;
  background: #f8d7da;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
}

.fritekst-bilde-thumbnail.error .material-icons {
  font-size: 32px;
  color: #dc3545;
  margin-bottom: 4px;
}

.fritekst-bilde-thumbnail.error .fritekst-bilde-error-text {
  font-size: 10px;
  color: #721c24;
  text-align: center;
  line-height: 1.2;
}

/* Responsive */
@media (max-width: 768px) {
  .fritekst-bilde-upload-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .fritekst-bilde-info-notice {
    min-width: auto;
  }
  
  .fritekst-bilde-thumbnail {
    width: 80px;
    height: 80px;
  }
}

/* Drag Active State */
.fritekst-bilde-upload-section.drag-active {
  border-color: #2563eb;
  background: rgba(102, 126, 234, 0.05);
}

.fritekst-bilde-upload-section.drag-active .fritekst-bilde-drop-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   FRITEKST KAMERA STYLING
   ============================================ */

/* Kamera-knapp i upload-header */
.fritekst-bilde-camera-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-white);
  color: #1976d2;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1.5px solid #1976d2;
}

.fritekst-bilde-camera-button:hover {
  background: #e3f2fd;
  border-color: #0d47a1;
  color: #0d47a1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
}

.fritekst-bilde-camera-button:active {
  transform: translateY(0);
}

.fritekst-bilde-camera-button .material-icons {
  font-size: 18px;
}

/* Kamera Modal */
.fritekst-camera-modal {
  z-index: 10001;
}

.fritekst-camera-modal-content {
  max-width: 600px;
  width: 95%;
  padding: 20px;
  background: #1a1a2e;
  border-radius: 16px;
  position: relative;
}

.fritekst-camera-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  margin: 0 0 16px 0;
  font-size: 1.3rem;
}

.fritekst-camera-title .material-icons {
  color: #10b981;
}

.fritekst-camera-preview-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.fritekst-camera-preview-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Countdown overlay */
.fritekst-camera-countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.fritekst-camera-countdown-number {
  font-size: 120px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  animation: fritekst-camera-pulse 1s ease-in-out infinite;
}

.fritekst-camera-countdown-number.fritekst-camera-countdown-warning {
  color: #ef4444;
  animation: fritekst-camera-pulse-warning 0.5s ease-in-out infinite;
}

@keyframes fritekst-camera-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes fritekst-camera-pulse-warning {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Flash effect */
.fritekst-camera-flash-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-white);
  z-index: 20;
  animation: fritekst-camera-flash 0.15s ease-out;
}

@keyframes fritekst-camera-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Kamera-knapper */
.fritekst-camera-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.fritekst-camera-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fritekst-camera-btn .material-icons {
  font-size: 20px;
}

.fritekst-camera-btn-now {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.fritekst-camera-btn-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.fritekst-camera-btn-timer {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.fritekst-camera-btn-timer:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.fritekst-camera-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fritekst-camera-cancel-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.fritekst-camera-modal .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.fritekst-camera-modal .close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* View-only styling for prompt library */
.fritekst-prompt-view-only {
  padding: 20px;
}

.fritekst-view-header {
  margin-bottom: 20px;
}

.fritekst-view-title {
  font-size: 1.4rem;
  margin: 0 0 12px 0;
  color: var(--text-primary);
}

.fritekst-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.fritekst-view-section {
  margin-bottom: 20px;
}

.fritekst-view-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #444;
}

.fritekst-view-content {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  font-family: monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.fritekst-view-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

@media (max-width: 480px) {
  .fritekst-camera-modal-content { padding: 16px; }
  .fritekst-camera-countdown-number { font-size: 80px; }
  .fritekst-camera-btn { padding: 10px 16px; font-size: 13px; }
  .fritekst-camera-buttons { gap: 8px; }
}
/* ===== aap-legeerklaring.css ===== */
/* ==========================================================================
   AAP LEGEERKLÆRING VED ARBEIDSUFØRHET — SKJEMA-VIEW
   Prefiks: aap-
   NAV-lignende design med mørkeblå seksjonsheadere
   CSP-kompatibel: ingen inline styles i JS
   
   VIKTIG: Alle selektorer har høy spesifisitet via
   .fritekst-modal-container for å unngå at fritekst.css overkjører.
   ========================================================================== */

/* ===================== CONTAINER ===================== */

.fritekst-modal-container .aap-form-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #e8eef5;
    border-radius: 8px;
}

/* ===================== HEADER MED TILBAKE-KNAPP ===================== */

.fritekst-modal-container .aap-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #0b2e5e;
    color: #ffffff;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
    min-height: 48px;
    box-sizing: border-box;
}

.fritekst-modal-container .aap-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1.4;
}

.fritekst-modal-container .aap-back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.fritekst-modal-container .aap-back-btn .material-icons {
    font-size: 18px;
}

.fritekst-modal-container .aap-form-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    background: none;
}

.fritekst-modal-container .aap-form-title .material-icons {
    font-size: 20px;
    opacity: 0.9;
}

/* ===================== SCROLLBART SKJEMA ===================== */

.fritekst-modal-container .aap-form-scroll {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

/* Scrollbar-styling */
.fritekst-modal-container .aap-form-scroll::-webkit-scrollbar {
    width: 6px;
}
.fritekst-modal-container .aap-form-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.fritekst-modal-container .aap-form-scroll::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 3px;
}
.fritekst-modal-container .aap-form-scroll::-webkit-scrollbar-thumb:hover {
    background: #90a4ae;
}

/* ===================== SEKSJONER ===================== */

.fritekst-modal-container .aap-section {
    background: var(--bg-white);
    border: 1px solid #c5d3e0;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* NAV-lignende mørkeblå seksjonheader */
.fritekst-modal-container .aap-section-header {
    background: #194d80;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 16px;
    text-transform: none;
    letter-spacing: 0.02em;
    border-radius: 7px 7px 0 0;
    line-height: 1.4;
}

.fritekst-modal-container .aap-section-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===================== FELT-WRAPPER ===================== */

.fritekst-modal-container .aap-field {
    position: relative;
}

.fritekst-modal-container .aap-field-insufficient .aap-textarea {
    border-color: #ffc107;
    background: #fffde7;
}

.fritekst-modal-container .aap-field-insufficient .aap-textarea-label::after {
    content: ' \26A0  Utilstrekkelig info';
    font-size: 0.7rem;
    color: #f57f17;
    font-weight: 500;
}

/* ===================== CHECKBOX-FELT ===================== */

.fritekst-modal-container .aap-field-checkbox {
    padding: 2px 0;
}

.fritekst-modal-container .aap-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.87rem;
    color: var(--text-primary);
    padding: 5px 0;
    user-select: none;
    line-height: 1.4;
}

.fritekst-modal-container .aap-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #1976d2;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.fritekst-modal-container .aap-checkbox:disabled {
    opacity: 0.6;
    cursor: default;
}

.fritekst-modal-container .aap-checkbox-text {
    line-height: 1.4;
}

/* ===================== JA/NEI-FELT ===================== */

.fritekst-modal-container .aap-yesno-label {
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.fritekst-modal-container .aap-yesno-group {
    display: flex;
    gap: 6px;
}

.fritekst-modal-container .aap-yesno-btn {
    padding: 5px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1.5px solid #c5d3e0;
    background: var(--bg-light);
    color: #546e7a;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    min-width: 52px;
    text-align: center;
    line-height: 1.4;
}

.fritekst-modal-container .aap-yesno-btn:hover {
    background: #e3f2fd;
    border-color: #90caf9;
}

.fritekst-modal-container .aap-yesno-btn.aap-yesno-active {
    background: #1976d2;
    color: #ffffff;
    border-color: #1565c0;
}

/* ===================== TEXTAREA-FELT ===================== */

.fritekst-modal-container .aap-textarea-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #37474f;
    margin-bottom: 6px;
    line-height: 1.4;
}

.fritekst-modal-container .aap-field-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.fritekst-modal-container .aap-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #f0f4f8;
    border: 1px solid #d0dae4;
    border-radius: 14px;
    color: #546e7a;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.fritekst-modal-container .aap-copy-btn .material-icons {
    font-size: 14px;
}

.fritekst-modal-container .aap-copy-btn:hover {
    background: #e3f2fd;
    border-color: #90caf9;
    color: #1976d2;
}

.fritekst-modal-container .aap-copy-btn.aap-copied {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #2e7d32;
}

/* Voice edit-knapp i aap-toolbar matcher pill-design */
.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn {
    margin: 0;
    padding: 4px 12px;
    background: #f0fdf4;
    background-image: none;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    color: #166534;
    font-size: 12px;
    font-weight: 500;
    gap: 4px;
    transition: all 0.15s ease;
    box-shadow: none;
    transform: none;
}

.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn .material-icons {
    font-size: 14px;
    color: #22c55e;
}

.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn:hover:not(:disabled) {
    background: #dcfce7;
    background-image: none;
    border-color: #86efac;
}

/* Recording state i aap-toolbar */
.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn.fritekst-voiceedit-recording {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: #dc2626;
    animation: fritekst-voiceedit-pulse 1.5s ease-in-out infinite;
}

/* Processing state i aap-toolbar */
.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn.fritekst-voiceedit-processing {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-color: #f59e0b;
    pointer-events: none;
}

/* TEXTAREA — eksplisitt reset av alle fritekst-stiler som kan overkjøre */
.fritekst-modal-container .aap-textarea {
    display: block;
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid #c5d3e0;
    border-radius: 6px;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: #fafcfe;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    overflow: hidden;
    /* Reset: nullstill fritekst-chat-message og ai-response-editable overrides */
    max-width: 100%;
    align-self: stretch;
    box-shadow: none;
    animation: none;
    margin: 0;
    float: none;
}

.fritekst-modal-container .aap-textarea:focus {
    outline: none;
    border-color: #1976d2;
    background: var(--bg-white);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

.fritekst-modal-container .aap-textarea::placeholder {
    color: #b0bec5;
}

/* ===================== LOADING ===================== */

.fritekst-modal-container .aap-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    padding: 40px;
}

.fritekst-modal-container .aap-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: aap-spin 0.8s linear infinite;
}

@keyframes aap-spin {
    to { transform: rotate(360deg); }
}

.fritekst-modal-container .aap-loading-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.fritekst-modal-container .aap-loading-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

/* ===================== SKJEMA-KNAPP I MODE-GROUP ===================== */

.fritekst-modal-container .aap-skjema-btn {
    position: relative;
}

.fritekst-modal-container .aap-skjema-btn .material-icons {
    font-size: 18px;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 768px) {
    .fritekst-modal-container .aap-form-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .fritekst-modal-container .aap-back-btn span:not(.material-icons) {
        display: none;
    }

    .fritekst-modal-container .aap-form-title {
        font-size: 0.9rem;
    }

    .fritekst-modal-container .aap-section-header {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    .fritekst-modal-container .aap-section-body {
        padding: 12px;
    }

    .fritekst-modal-container .aap-textarea {
        font-size: 0.84rem;
    }

    .fritekst-modal-container .aap-form-scroll {
        padding: 10px;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .fritekst-modal-container .aap-form-header {
        flex-wrap: wrap;
    }

    .fritekst-modal-container .aap-yesno-btn {
        padding: 4px 12px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   KI-HJELP PER FELT — mini-panel for re-generering av enkeltfelt
   ========================================================================== */

/* ── KI-hjelp knapp i toolbar ── */

.fritekst-modal-container .aap-ki-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #e0f2fe 0%, #e0f2fe 100%);
    border: 1px solid #7dd3fc;
    border-radius: 14px;
    color: #0369a1;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.fritekst-modal-container .aap-ki-help-btn .material-icons {
    font-size: 14px;
}

.fritekst-modal-container .aap-ki-help-btn:hover {
    background: linear-gradient(135deg, #bae6fd 0%, #bae6fd 100%);
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(3, 105, 161, 0.15);
}

.fritekst-modal-container .aap-ki-help-btn.aap-ki-help-active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border-color: #0369a1;
    box-shadow: 0 2px 8px rgba(3, 105, 161, 0.25);
}

.fritekst-modal-container .aap-ki-help-btn.aap-ki-help-active .material-icons {
    color: #ffffff;
}

/* ── KI-hjelp panel (kollapset default) ── */

.fritekst-modal-container .aap-ki-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                margin 0.35s ease;
    margin-top: 0;
}

.fritekst-modal-container .aap-ki-panel.aap-ki-panel-open {
    max-height: 600px;
    opacity: 1;
    margin-top: 10px;
}

.fritekst-modal-container .aap-ki-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-radius: 10px 10px 0 0;
    color: #ffffff;
}

.fritekst-modal-container .aap-ki-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

.fritekst-modal-container .aap-ki-panel-title .material-icons {
    font-size: 18px;
    opacity: 0.9;
}

.fritekst-modal-container .aap-ki-panel-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #ffffff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.fritekst-modal-container .aap-ki-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fritekst-modal-container .aap-ki-panel-close .material-icons {
    font-size: 16px;
}

/* ── Panel body ── */

.fritekst-modal-container .aap-ki-panel-body {
    padding: 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-top: none;
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Input-rad ── */

.fritekst-modal-container .aap-ki-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fritekst-modal-container .aap-ki-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #7dd3fc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.87rem;
    color: #0c4a6e;
    background: var(--bg-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
    line-height: 1.4;
}

.fritekst-modal-container .aap-ki-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.fritekst-modal-container .aap-ki-input::placeholder {
    color: #38bdf8;
    font-size: 0.82rem;
}

.fritekst-modal-container .aap-ki-input:disabled {
    opacity: 0.6;
    background: #f0f9ff;
}

.fritekst-modal-container .aap-ki-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.fritekst-modal-container .aap-ki-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.fritekst-modal-container .aap-ki-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fritekst-modal-container .aap-ki-send-btn .material-icons {
    font-size: 18px;
}

/* ── Loading ── */

.fritekst-modal-container .aap-ki-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #e0f2fe;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #0369a1;
    font-weight: 500;
}

.fritekst-modal-container .aap-ki-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid #bae6fd;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: aap-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ── Forslag ── */

.fritekst-modal-container .aap-ki-suggestion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: aap-ki-suggest-in 0.3s ease-out;
}

@keyframes aap-ki-suggest-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fritekst-modal-container .aap-ki-suggestion-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fritekst-modal-container .aap-ki-suggestion-label .material-icons {
    font-size: 16px;
}

.fritekst-modal-container .aap-ki-suggestion-text {
    padding: 14px 16px;
    background: var(--bg-white);
    border: 1.5px solid #7dd3fc;
    border-radius: 8px;
    font-size: 0.87rem;
    line-height: 1.65;
    color: #0c4a6e;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06);
}

.fritekst-modal-container .aap-ki-suggestion-actions {
    display: flex;
    gap: 8px;
}

.fritekst-modal-container .aap-ki-accept-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fritekst-modal-container .aap-ki-accept-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.fritekst-modal-container .aap-ki-accept-btn .material-icons {
    font-size: 18px;
}

.fritekst-modal-container .aap-ki-reject-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #f0f9ff;
    color: var(--text-muted);
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fritekst-modal-container .aap-ki-reject-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.fritekst-modal-container .aap-ki-reject-btn .material-icons {
    font-size: 18px;
}

/* ── Hidden utility ── */

.fritekst-modal-container .aap-ki-hidden {
    display: none !important;
}

/* ── Responsive KI-hjelp ── */

@media (max-width: 768px) {
    .fritekst-modal-container .aap-ki-panel-body {
        padding: 10px;
    }

    .fritekst-modal-container .aap-ki-input {
        font-size: 0.84rem;
        padding: 8px 12px;
    }

    .fritekst-modal-container .aap-ki-suggestion-text {
        font-size: 0.84rem;
        padding: 10px 12px;
    }

    .fritekst-modal-container .aap-ki-suggestion-actions {
        flex-direction: column;
    }
}
/* ===== aap-drafts.css ===== */
/* ============================================
   AAP UTKAST — Lagrede legeerklæringer
   Prefiks: aap-draft-
   Nestede under .fritekst-modal-container for scope
   CSP: Ingen inline styles — alt via klasser
   ============================================ */

/* Badge på AAP-knappen (antall utkast) */
.fritekst-modal-container .aap-draft-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    pointer-events: none;
}

/* Utkast-liste container */
.fritekst-modal-container .aap-draft-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header med tittel og "Generer ny"-knapp */
.fritekst-modal-container .aap-draft-list-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #0b2e5e;
    color: #fff;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
    min-height: 48px;
    box-sizing: border-box;
}

.fritekst-modal-container .aap-draft-list-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.fritekst-modal-container .aap-draft-list-title .material-icons {
    font-size: 20px;
    opacity: 0.85;
}

.fritekst-modal-container .aap-draft-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.fritekst-modal-container .aap-draft-new-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.fritekst-modal-container .aap-draft-new-btn .material-icons {
    font-size: 16px;
}

/* Scrollbar for utkast-listen */
.fritekst-modal-container .aap-draft-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f7f8fa;
}

.fritekst-modal-container .aap-draft-list-scroll::-webkit-scrollbar {
    width: 6px;
}

.fritekst-modal-container .aap-draft-list-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.fritekst-modal-container .aap-draft-list-scroll::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
}

/* Individuelt utkast-kort */
.fritekst-modal-container .aap-draft-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-white);
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fritekst-modal-container .aap-draft-card:hover {
    border-color: #1976d2;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}

/* Ikon til venstre */
.fritekst-modal-container .aap-draft-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e8eef6;
    color: #194d80;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fritekst-modal-container .aap-draft-card-icon .material-icons {
    font-size: 20px;
}

/* Tekstinnhold */
.fritekst-modal-container .aap-draft-card-body {
    flex: 1;
    min-width: 0;
}

.fritekst-modal-container .aap-draft-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fritekst-modal-container .aap-draft-card-meta {
    font-size: 0.76rem;
    color: #8893a4;
    margin-top: 2px;
    display: flex;
    gap: 10px;
}

/* Slett-knapp */
.fritekst-modal-container .aap-draft-card-delete {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #a0a8b4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.fritekst-modal-container .aap-draft-card-delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

.fritekst-modal-container .aap-draft-card-delete .material-icons {
    font-size: 16px;
}

/* Tom-tilstand */
.fritekst-modal-container .aap-draft-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: #8893a4;
    text-align: center;
}

.fritekst-modal-container .aap-draft-empty .material-icons {
    font-size: 36px;
    opacity: 0.5;
}

.fritekst-modal-container .aap-draft-empty-text {
    font-size: 0.88rem;
}

.fritekst-modal-container .aap-draft-empty-sub {
    font-size: 0.78rem;
    opacity: 0.7;
}

/* Autosave-indikator i skjema-header */
.fritekst-modal-container .aap-autosave {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin-left: auto;
    white-space: nowrap;
}

.fritekst-modal-container .aap-autosave .material-icons {
    font-size: 13px;
}

.fritekst-modal-container .aap-autosave-saved {
    color: rgba(255, 255, 255, 0.85);
}

/* Tilbake-til-utkast knapp (i skjema-header, ved siden av tilbake-til-chat) */
.fritekst-modal-container .aap-drafts-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.fritekst-modal-container .aap-drafts-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.fritekst-modal-container .aap-drafts-btn .material-icons {
    font-size: 14px;
}

/* Responsiv — tablet */
@media (max-width: 900px) {
    .fritekst-modal-container .aap-draft-list-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .fritekst-modal-container .aap-draft-new-btn span:not(.material-icons) {
        display: none;
    }

    .fritekst-modal-container .aap-draft-list-scroll {
        padding: 12px;
    }
}

/* Responsiv — mobil */
@media (max-width: 600px) {
    .fritekst-modal-container .aap-draft-card {
        padding: 10px;
        gap: 8px;
    }

    .fritekst-modal-container .aap-draft-card-icon {
        width: 30px;
        height: 30px;
    }

    .fritekst-modal-container .aap-draft-card-icon .material-icons {
        font-size: 16px;
    }

    .fritekst-modal-container .aap-draft-card-meta {
        flex-direction: column;
        gap: 2px;
    }
}

/* ===== confirm-dialog.css ===== */
/* ============================================
   CUSTOM CONFIRM DIALOG
   Erstatter native confirm/alert/prompt
   Prefiks: cd-
   ============================================ */

/* Overlay */
.cd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
}

.cd-overlay.cd-hidden {
    display: none;
}

.cd-overlay.cd-visible {
    opacity: 1;
}

.cd-overlay.cd-hiding {
    opacity: 0;
}

/* Dialog box */
.cd-dialog {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    max-width: 420px;
    width: 100%;
    padding: 28px;
    text-align: center;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cd-visible .cd-dialog {
    transform: scale(1) translateY(0);
}

.cd-hiding .cd-dialog {
    transform: scale(0.95) translateY(10px);
}

/* Icon area */
.cd-icon-area {
    margin-bottom: 16px;
}

.cd-icon {
    font-size: 44px;
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

/* Type-baserte farger */
.cd-type-info .cd-icon {
    background: #e0f2fe;
    color: #0284c7;
}

.cd-type-warning .cd-icon {
    background: #fef3c7;
    color: #d97706;
}

.cd-type-danger .cd-icon {
    background: #fee2e2;
    color: #dc2626;
}

/* Title */
.cd-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

/* Message */
.cd-message {
    font-size: 0.925rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 24px 0;
    text-align: left;
    word-break: break-word;
}

/* Sentrert melding når kort */
.cd-message br ~ br {
    display: block;
    margin-top: 4px;
    content: '';
}

.cd-bullet {
    color: var(--text-muted);
    margin-right: 4px;
}

/* Input area */
.cd-input-area {
    margin-bottom: 24px;
}

.cd-input-area.cd-hidden {
    display: none;
}

.cd-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-light);
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-align: center;
    font-weight: 600;
    letter-spacing: 2px;
}

.cd-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: var(--bg-white);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.cd-type-danger .cd-input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Buttons */
.cd-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cd-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    min-width: 100px;
    line-height: 1.4;
}

.cd-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Cancel button */
.cd-btn-cancel {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid #e2e8f0;
}

.cd-btn-cancel:hover {
    background: #e2e8f0;
    color: #334155;
}

/* Confirm button - info */
.cd-btn-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}

.cd-btn-info:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.cd-btn-info:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Confirm button - warning */
.cd-btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
}

.cd-btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
    transform: translateY(-1px);
}

.cd-btn-warning:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Confirm button - danger */
.cd-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
}

.cd-btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}

.cd-btn-danger:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Responsive */
@media (max-width: 480px) {
    .cd-dialog {
        padding: 24px 20px;
        border-radius: 14px;
    }
    
    .cd-icon {
        font-size: 36px;
        width: 56px;
        height: 56px;
    }
    
    .cd-title {
        font-size: 1.05rem;
    }
    
    .cd-buttons {
        flex-direction: column-reverse;
    }
    
    .cd-btn {
        width: 100%;
    }
}
/* ===== interpreter.css ===== */
/* ============================================================================
   INTERPRETER — FULLSCREEN DUAL-PANEL (v2)
   Speaker-markering, mobil-optimert, portrait + landscape
   ============================================================================ */

/* --- Language Selector --- */
.interpreter-lang-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.interpreter-lang-modal {
    background: #fff; border-radius: 16px;
    width: min(600px, 92vw); max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3); overflow: hidden;
}
.interpreter-lang-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 12px;
}
.interpreter-lang-header h2 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #1a1a2e; }
.interpreter-lang-close {
    background: none; border: none; cursor: pointer;
    padding: 6px; border-radius: 8px; color: #6b7280;
}
.interpreter-lang-close:hover { background: #f3f4f6; }
.interpreter-lang-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px; padding: 0 24px 24px; overflow-y: auto; max-height: 55vh;
}
.interpreter-lang-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px;
    background: #fff; cursor: pointer; transition: all 0.15s; text-align: left; font-family: inherit;
}
.interpreter-lang-btn:hover { background: #eff6ff; border-color: #3b82f6; transform: translateY(-1px); }
.interpreter-lang-flag { font-size: 1.5rem; }
.interpreter-lang-name { font-size: 0.95rem; font-weight: 500; color: #1a1a2e; }


/* ============================================================================
   FULLSCREEN OVERLAY
   ============================================================================ */
.interpreter-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: #0f1724; display: flex; flex-direction: column;
    color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ============================================================================
   TOOLBAR
   ============================================================================ */
.interpreter-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0; gap: 8px;
}
.interpreter-toolbar-left {
    display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1;
}
.interpreter-toolbar-right {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.interpreter-toolbar-center {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

.interpreter-status-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #6b7280; flex-shrink: 0;
}
.interpreter-status-recording { background: #ef4444; animation: i-pulse 1.2s ease-in-out infinite; }
.interpreter-status-processing { background: #f59e0b; animation: i-pulse 0.6s ease-in-out infinite; }
@keyframes i-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}
.interpreter-status-text { font-size: 0.85rem; color: #9ca3af; white-space: nowrap; }

/* Buttons */
.interpreter-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 20px; border: 2px solid rgba(255,255,255,0.2); border-radius: 50px;
    background: rgba(255,255,255,0.08); color: #fff;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s; white-space: nowrap; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.interpreter-btn:hover:not(:disabled) { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.interpreter-btn:active:not(:disabled) { transform: scale(0.96); }
.interpreter-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.interpreter-btn .material-icons { font-size: 20px; }

.interpreter-btn-start { border-color: #22c55e; background: rgba(34,197,94,0.15); }
.interpreter-btn-start:hover:not(:disabled) { background: rgba(34,197,94,0.3); border-color: #4ade80; }
.interpreter-btn-pause { border-color: #f59e0b; background: rgba(245,158,11,0.15); }
.interpreter-btn-pause:hover:not(:disabled) { background: rgba(245,158,11,0.3); border-color: #fbbf24; }
.interpreter-btn-stop { border-color: #ef4444; background: rgba(239,68,68,0.15); }
.interpreter-btn-stop:hover:not(:disabled) { background: rgba(239,68,68,0.3); border-color: #f87171; }

.interpreter-close-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    background: rgba(255,255,255,0.06); color: #9ca3af; font-size: 0.85rem;
    cursor: pointer; transition: all 0.15s; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.interpreter-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.interpreter-close-btn .material-icons { font-size: 18px; }


/* ============================================================================
   PANELS
   ============================================================================ */
.interpreter-panels { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.interpreter-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.interpreter-panel-left { background: #111b2e; }
.interpreter-panel-right { background: #0f1724; }
.interpreter-divider { width: 2px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

.interpreter-panel-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.interpreter-panel-flag { font-size: 1.4rem; }
.interpreter-panel-title {
    font-size: 1rem; font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 0.05em;
}

.interpreter-panel-content {
    flex: 1; overflow-y: auto;
    padding: 20px 24px;
    display: flex; flex-direction: column; gap: 4px;
    scroll-behavior: smooth;
}
.interpreter-panel-content::-webkit-scrollbar { width: 6px; }
.interpreter-panel-content::-webkit-scrollbar-track { background: transparent; }
.interpreter-panel-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.interpreter-placeholder {
    color: rgba(255,255,255,0.25); font-size: 1.3rem;
    text-align: center; margin: auto; font-weight: 300; line-height: 1.8;
}


/* ============================================================================
   LINES — med speaker-ikon + etikett
   ============================================================================ */
.interpreter-line {
    display: flex; gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: flex-start;
}

/* Speaker-ikon badge */
.interpreter-line-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 6px;
}
.interpreter-line-icon .material-icons { font-size: 16px; }

/* Lege: blå */
.interpreter-line-doctor .interpreter-line-icon {
    background: rgba(59, 130, 246, 0.2); color: #60a5fa;
}
/* Pasient: grønn */
.interpreter-line-patient .interpreter-line-icon {
    background: rgba(34, 197, 94, 0.2); color: #4ade80;
}

/* Tekst-wrapper */
.interpreter-line-body {
    flex: 1; min-width: 0;
}

/* Etikett over tekst */
.interpreter-line-label {
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 2px; display: block;
}
.interpreter-line-doctor .interpreter-line-label { color: #60a5fa; }
.interpreter-line-patient .interpreter-line-label { color: #4ade80; }

/* Tekst */
.interpreter-line-text {
    font-size: 1.8rem; line-height: 1.5;
    color: rgba(255,255,255,0.9);
}
.interpreter-line-doctor .interpreter-line-text { color: rgba(255,255,255,0.95); }
.interpreter-line-patient .interpreter-line-text { color: rgba(255,255,255,0.82); }

/* Nyeste */
.interpreter-line-new .interpreter-line-text {
    color: #fff; animation: i-fadein 0.5s ease-out;
}

/* Partial (live) */
.interpreter-line-partial .interpreter-line-text {
    color: rgba(255,255,255,0.35); font-style: italic;
}
.interpreter-line-partial { border-bottom: none; }

/* Venter */
.interpreter-line-translating .interpreter-line-text {
    color: rgba(255,255,255,0.3); animation: i-pulse-text 1.2s ease-in-out infinite;
}

@keyframes i-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes i-pulse-text {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.55; }
}

/* RTL */
.interpreter-rtl .interpreter-panel-content { direction: rtl; text-align: right; }
.interpreter-rtl .interpreter-line { flex-direction: row-reverse; }


/* ============================================================================
   FONT SIZE (CSP-safe klasser)
   ============================================================================ */
.interpreter-font-controls {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 2px;
}
.interpreter-font-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,0.7);
    cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.interpreter-font-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.interpreter-font-btn:active { transform: scale(0.92); }
.interpreter-font-btn .material-icons { font-size: 20px; }
.interpreter-font-size-label {
    font-size: 0.75rem; color: rgba(255,255,255,0.5);
    min-width: 36px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums;
}

.interpreter-font-70  .interpreter-line-text { font-size: 1.26rem; }
.interpreter-font-85  .interpreter-line-text { font-size: 1.53rem; }
.interpreter-font-100 .interpreter-line-text { font-size: 1.8rem; }
.interpreter-font-120 .interpreter-line-text { font-size: 2.16rem; }
.interpreter-font-150 .interpreter-line-text { font-size: 2.7rem; }
.interpreter-font-180 .interpreter-line-text { font-size: 3.24rem; }
.interpreter-font-220 .interpreter-line-text { font-size: 3.96rem; }
.interpreter-font-280 .interpreter-line-text { font-size: 5.04rem; }


/* ============================================================================
   RESPONSIVE — TABLET
   ============================================================================ */
@media (max-width: 900px) {
    .interpreter-panels { flex-direction: column; }
    .interpreter-divider { width: 100%; height: 2px; }
    .interpreter-line-text { font-size: 1.3rem; }
    .interpreter-panel-content { padding: 14px 16px; }
    .interpreter-toolbar { padding: 8px 12px; }
    .interpreter-btn { padding: 8px 16px; font-size: 0.85rem; }
    .interpreter-btn .material-icons { font-size: 18px; }
    .interpreter-line-icon { width: 26px; height: 26px; margin-top: 2px; }
    .interpreter-line-icon .material-icons { font-size: 14px; }
    .interpreter-line { gap: 10px; }
}


/* ============================================================================
   RESPONSIVE — MOBIL
   ============================================================================ */
@media (max-width: 600px) {
    .interpreter-toolbar { padding: 6px 10px; gap: 4px; flex-wrap: nowrap; }
    .interpreter-toolbar-left .interpreter-status-text { display: none; }

    /* Icon-only knapper */
    .interpreter-btn span:not(.material-icons) { display: none; }
    .interpreter-btn { padding: 10px 12px; min-width: 44px; min-height: 44px; justify-content: center; }
    .interpreter-close-btn span:not(.material-icons) { display: none; }
    .interpreter-close-btn { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; }

    .interpreter-font-size-label { display: none; }
    .interpreter-font-controls { gap: 2px; }
    .interpreter-font-btn { width: 40px; height: 40px; }

    .interpreter-panel-header { padding: 8px 14px; }
    .interpreter-panel-flag { font-size: 1.1rem; }
    .interpreter-panel-title { font-size: 0.8rem; }
    .interpreter-panel-content { padding: 10px 12px; gap: 2px; }

    .interpreter-line-text { font-size: 1.1rem; line-height: 1.4; }
    .interpreter-line { gap: 8px; padding: 6px 0; }
    .interpreter-line-icon { width: 24px; height: 24px; margin-top: 1px; }
    .interpreter-line-icon .material-icons { font-size: 13px; }
    .interpreter-line-label { font-size: 0.55rem; }
}

@media (max-width: 380px) {
    .interpreter-line-text { font-size: 1rem; }
    .interpreter-line-icon { width: 20px; height: 20px; }
    .interpreter-line-icon .material-icons { font-size: 12px; }
    .interpreter-line-label { display: none; }
}


/* ============================================================================
   LANDSCAPE MOBIL — side-by-side
   ============================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .interpreter-panels { flex-direction: row !important; }
    .interpreter-divider { width: 2px !important; height: auto !important; }

    .interpreter-toolbar { padding: 4px 10px; }
    .interpreter-btn { padding: 6px 10px; min-height: 36px; }
    .interpreter-btn .material-icons { font-size: 18px; }
    .interpreter-close-btn { padding: 6px 8px; }
    .interpreter-font-btn { width: 32px; height: 32px; }

    .interpreter-panel-header { padding: 4px 12px; }
    .interpreter-panel-flag { font-size: 1rem; }
    .interpreter-panel-title { font-size: 0.7rem; }
    .interpreter-panel-content { padding: 6px 10px; gap: 2px; }

    .interpreter-line-text { font-size: 1rem; line-height: 1.3; }
    .interpreter-line { gap: 6px; padding: 3px 0; }
    .interpreter-line-icon { width: 18px; height: 18px; margin-top: 1px; }
    .interpreter-line-icon .material-icons { font-size: 11px; }
    .interpreter-line-label { display: none; }
}


/* ============================================================================
   SAFE AREA (iPhone notch/dynamic island)
   ============================================================================ */
@supports (padding: env(safe-area-inset-top)) {
    .interpreter-overlay {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@media print {
    .interpreter-overlay, .interpreter-lang-overlay { display: none !important; }
}
/* ===== Tolk: minimer/dock-modus (flytende mini-panel, sesjon lever) ===== */
.interpreter-timer { font-variant-numeric: tabular-nums; font-size: 13px; color: #cbd5e1; margin-left: 6px; white-space: nowrap; }
.interpreter-btn-max { display: none; }
.interpreter-overlay.interpreter-docked {
    position: fixed; inset: auto; right: 20px; bottom: 20px;
    width: 380px; height: 440px; max-height: 72vh; max-width: calc(100vw - 40px);
    border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
    overflow: hidden; z-index: 99999; border: 1px solid rgba(255,255,255,.14);
    padding: 0; animation: interpDockIn .16s ease;
}
@keyframes interpDockIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.interpreter-docked .interpreter-btn-start,
.interpreter-docked .interpreter-btn-pause,
.interpreter-docked .interpreter-btn-stop,
.interpreter-docked .interpreter-btn-share,
.interpreter-docked .interpreter-font-controls,
.interpreter-docked .interpreter-btn-min { display: none; }
.interpreter-docked .interpreter-btn-max { display: inline-flex; }
.interpreter-docked .interpreter-toolbar { padding: 7px 10px; gap: 6px; }
.interpreter-docked .interpreter-btn,
.interpreter-docked .interpreter-close-btn { padding: 7px 9px; min-height: 0; }
.interpreter-docked .interpreter-btn-label,
.interpreter-docked .interpreter-close-btn .interpreter-btn-label { display: none; }
.interpreter-docked .interpreter-btn .material-icons,
.interpreter-docked .interpreter-close-btn .material-icons { font-size: 18px; }
.interpreter-docked .interpreter-panels { flex-direction: column; }
.interpreter-docked .interpreter-divider { width: 100%; height: 1px; }
.interpreter-docked .interpreter-panel-header { padding: 4px 12px; }
.interpreter-docked .interpreter-panel-title { font-size: 0.7rem; }
.interpreter-docked .interpreter-panel-flag { font-size: 1rem; }
.interpreter-docked .interpreter-panel-content { padding: 8px 12px; gap: 2px; }
.interpreter-docked .interpreter-line-text { font-size: 14px; line-height: 1.35; }
.interpreter-docked .interpreter-placeholder { font-size: 0.95rem; }
/* Tydelig «tolk aktiv» i docked: pulserende ring rundt statusprikken (kun ved opptak) */
.interpreter-docked .interpreter-status-recording { animation: interpDockPulse 1.6s infinite; }
@keyframes interpDockPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55);} 70% { box-shadow: 0 0 0 6px rgba(239,68,68,0);} 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0);} }
/* Drag-affordance: toolbaren får cursor:move så legen ser at mini-vinduet kan flyttes
   (forhindrer at det blokkerer viktige knapper i konsultasjons-UI). Knappene
   beholder sin egen cursor. Under selve dragget bytter vi til grabbing + skrur av
   transition så vinduet henger med musen uten å hoppe. */
.interpreter-docked .interpreter-toolbar { cursor: move; touch-action: none; user-select: none; }
.interpreter-docked .interpreter-toolbar button { cursor: pointer; }
.interpreter-overlay.interpreter-dragging { animation: none !important; transition: none !important; }
.interpreter-overlay.interpreter-dragging .interpreter-toolbar { cursor: grabbing; }

/* ===== camera-ocr.css ===== */
/* camera-ocr.css */
/* Styling for kamera og OCR-funksjonalitet */
/* Alle klasser har kamera- prefix */

/* =============================================================================
   OCR MODAL - FULLSKJERM LAYOUT
   ============================================================================= */

#ocrCameraModal .modal-content {
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    max-height: 900px;
    display: flex;
    flex-direction: column;
}

#ocrCameraModal .modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* =============================================================================
   CAMERA VIEW
   ============================================================================= */

.kamera-camera-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    padding: 20px;
    min-height: 400px;
}

.kamera-video-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: #000;
}

.kamera-video {
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 60vh;
    display: block;
    background: #000;
    object-fit: contain;
}

.kamera-capture-btn {
    margin-top: 20px;
    padding: 16px 48px;
    font-size: 18px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.kamera-capture-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}

.kamera-capture-btn .material-icons {
    font-size: 28px;
}

/* =============================================================================
   EDIT VIEW - BILDE MED REKTANGEL-VERKTØY
   ============================================================================= */

.kamera-edit-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    overflow: hidden;
}

.kamera-edit-main {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

.kamera-canvas-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kamera-canvas-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}

.kamera-canvas-wrapper {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

.kamera-image-canvas,
.kamera-overlay-canvas {
    max-width: 100%;
    max-height: 55vh;
    display: block;
}

.kamera-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

/* Preview section */
.kamera-preview-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 250px;
    max-width: 400px;
}

.kamera-preview-container {
    flex: 1;
    background: #222;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.kamera-preview-container.is-hidden {
    display: none;
}

.kamera-preview-title {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kamera-preview-title .material-icons {
    font-size: 18px;
    color: #4CAF50;
}

.kamera-preview-canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: 4px;
    overflow: hidden;
}

.kamera-preview-canvas {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.kamera-preview-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 40px;
}

.kamera-preview-placeholder .material-icons {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

/* Toolbar */
.kamera-edit-toolbar {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #222;
    border-top: 1px solid #333;
    flex-wrap: wrap;
    justify-content: center;
}

.kamera-toolbar-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kamera-toolbar-divider {
    width: 1px;
    height: 32px;
    background: #444;
    margin: 0 8px;
}

.kamera-tool-btn {
    padding: 10px 16px;
    background: #333;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.kamera-tool-btn:hover {
    background: #444;
    border-color: #555;
}

.kamera-tool-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kamera-tool-btn.primary {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border-color: #1976D2;
}

.kamera-tool-btn.primary:hover {
    background: linear-gradient(135deg, #1E88E5, #1565C0);
}

.kamera-tool-btn.success {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    border-color: #388E3C;
}

.kamera-tool-btn.success:hover {
    background: linear-gradient(135deg, #43A047, #2E7D32);
}

.kamera-tool-btn .material-icons {
    font-size: 20px;
}

/* =============================================================================
   RESULT VIEW
   ============================================================================= */

.kamera-result-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    overflow: hidden;
}

.kamera-result-main {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

.kamera-result-image-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kamera-result-image-container {
    flex: 1;
    background: #111;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kamera-result-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kamera-result-text-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kamera-result-text-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #fff;
}

.kamera-result-text-header .material-icons {
    color: #4CAF50;
}

.kamera-result-textarea {
    flex: 1;
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
}

.kamera-result-textarea:focus {
    outline: none;
    border-color: #4CAF50;
}

.kamera-result-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #222;
    border-top: 1px solid #333;
    justify-content: center;
    flex-wrap: wrap;
}

/* =============================================================================
   CONTEXT CAMERA MODAL - Med timer
   ============================================================================= */

#contextCameraModal .modal-content {
    width: 700px;
    max-width: 95vw;
}

.kamera-context-camera-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 8px;
}

.kamera-context-video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.kamera-context-video {
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 50vh;
    display: block;
    background: #000;
    object-fit: contain;
}

/* Countdown overlay */
.kamera-countdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.kamera-countdown-overlay.is-hidden {
    display: none;
}

.kamera-countdown-number {
    font-size: 120px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.kamera-countdown-number.kamera-countdown-warning {
    color: #ff5722;
    transform: scale(1.2);
    text-shadow: 0 0 40px rgba(255, 87, 34, 0.8);
}

/* Flash effect */
.kamera-flash-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-white);
    z-index: 20;
    animation: kamera-flash 0.15s ease-out;
}

.kamera-flash-effect.is-hidden {
    display: none;
}

@keyframes kamera-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Capture buttons */
.kamera-context-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.kamera-context-buttons.is-hidden {
    display: none;
}

.kamera-context-btn {
    padding: 14px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.kamera-context-btn .material-icons {
    font-size: 22px;
}

.kamera-capture-now {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.kamera-capture-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}

.kamera-capture-timer {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
}

.kamera-capture-timer:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.5);
}

/* Cancel timer button */
.kamera-cancel-timer-btn {
    margin-top: 16px;
    padding: 12px 24px;
    font-size: 15px;
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.kamera-cancel-timer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
}

.kamera-cancel-timer-btn.is-hidden {
    display: none;
}

/* =============================================================================
   TOOLBAR OCR BUTTON - bruker standard knapp-styling
   ============================================================================= */

/* OCR-knappen arver styling fra .button.secondary.small.action-btn */

/* =============================================================================
   SPINNER
   ============================================================================= */

.kamera-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kamera-spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes kamera-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================================================
   INSTRUCTIONS OVERLAY
   ============================================================================= */

.kamera-instructions {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
    z-index: 10;
}

.kamera-instructions-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.kamera-instruction-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kamera-instruction-item .material-icons {
    font-size: 18px;
    color: #4CAF50;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {
    .kamera-edit-main,
    .kamera-result-main {
        flex-direction: column;
    }
    
    .kamera-preview-section,
    .kamera-result-image-section {
        max-width: 100%;
        max-height: 40vh;
    }
    
    .kamera-canvas-container,
    .kamera-result-image-container {
        max-height: 35vh;
    }
}

@media (max-width: 600px) {
    #ocrCameraModal .modal-content {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .kamera-edit-toolbar,
    .kamera-result-actions {
        padding: 12px;
        gap: 8px;
    }
    
    .kamera-tool-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .kamera-tool-btn span:not(.material-icons) {
        display: none;
    }
}

/* =============================================================================
   DARK MODE ENHANCEMENTS
   ============================================================================= */

.kamera-edit-view,
.kamera-result-view,
.kamera-camera-view {
    color: #fff;
}

/* Handle visibility */
.kamera-edit-view.is-hidden,
.kamera-result-view.is-hidden,
.kamera-camera-view.is-hidden {
    display: none !important;
}
/* ===== video.css ===== */
/* =============================================================================
   VIDEO MODULE STYLES - Identisk design som VideoLege webapp
   ============================================================================= */

/* =============================================================================
   FONTS
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* =============================================================================
   VARIABLER
   ============================================================================= */
:root {
    --video-primary: #1976D2;
    --video-primary-dark: #1565C0;
    --video-primary-darker: #0D47A1;
    --video-success: #43A047;
    --video-success-dark: #2E7D32;
    --video-success-light: #66BB6A;
    --video-warning: #FFA726;
    --video-warning-dark: #FF9800;
    --video-danger: #f44336;
    --video-danger-dark: #d32f2f;
    --video-bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --video-card-shadow: 0 4px 16px rgba(0,0,0,0.08);
    --video-card-shadow-hover: 0 12px 32px rgba(0,0,0,0.15);
    --video-font: 'Roboto', sans-serif;
}

/* =============================================================================
   VIDEO MODAL - Fullskjerm app-lignende
   ============================================================================= */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    font-family: var(--video-font);
}

.video-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.video-modal.hidden {
    display: none;
}

.video-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.video-modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--video-bg-gradient);
    z-index: 1;
}

/* =============================================================================
   MODAL HEADER
   ============================================================================= */
.video-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--bg-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    flex-shrink: 0;
}

.video-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-modal-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.video-modal-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-modal-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.video-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-modal-close:hover {
    background: #e0e0e0;
    transform: scale(1.05);
}

.video-modal-close .material-icons {
    font-size: 20px;
    color: var(--text-secondary);
}

/* Header actions container */
.video-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Test utstyr knapp i header */
.video-header-settings-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--video-primary) 0%, var(--video-primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--video-font);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25);
}

.video-header-settings-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
}

.video-header-settings-btn:active {
    transform: translateY(0);
}

.video-header-settings-btn .material-icons {
    font-size: 20px;
}

/* Lukk VideoLege knapp i header */
.video-header-close-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #f5f5f5;
    color: var(--text-secondary);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--video-font);
    cursor: pointer;
    transition: all 0.2s;
}

.video-header-close-btn:hover {
    background: #e0e0e0;
    color: var(--text-primary);
}

.video-header-close-btn .material-icons {
    font-size: 20px;
}

/* =============================================================================
   MODAL CONTENT - Starter øverst!
   ============================================================================= */
.video-modal-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.video-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.video-view.hidden {
    display: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   LOGIN VIEW - Split screen design (identisk med webapp)
   ============================================================================= */
.video-login-wrapper {
    display: flex;
    flex: 1;
    min-height: 100%;
}

.video-login-left {
    flex: 1;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-white);
    max-width: 520px;
}

.video-login-right {
    flex: 1;
    background: linear-gradient(135deg, var(--video-primary-darker), var(--video-primary-dark), var(--video-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.video-login-right::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
}

.video-login-illustration {
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
}

.video-login-illustration-icon {
    font-size: 80px;
    margin-bottom: 24px;
}

.video-login-illustration h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 12px;
}

.video-login-illustration p {
    font-size: 15px;
    opacity: 0.9;
    max-width: 300px;
    line-height: 1.6;
    margin: 0 auto;
}

.video-login-features {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.video-login-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    opacity: 0.95;
}

.video-login-feature span:first-child {
    font-size: 20px;
}

/* Login form */
.video-login-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.video-login-logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.video-login-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-login-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.video-login-logo-text span {
    color: var(--video-primary);
}

.video-login-header {
    margin-bottom: 28px;
}

.video-login-header h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.video-login-header p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* =============================================================================
   FORM ELEMENTS
   ============================================================================= */
.video-form-group {
    margin-bottom: 20px;
}

.video-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.video-form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--video-font);
    transition: all 0.2s;
    background: var(--bg-white);
}

.video-form-group input:focus {
    outline: none;
    border-color: var(--video-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.video-form-group input::placeholder {
    color: #BDBDBD;
}

.video-form-hint {
    font-size: 12px;
    color: #9E9E9E;
    margin-top: 6px;
}

/* =============================================================================
   BUTTONS (identisk med webapp)
   ============================================================================= */
.video-btn {
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--video-font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.video-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.video-btn-primary {
    background: var(--video-primary);
    color: white;
    width: 100%;
}

.video-btn-primary:hover:not(:disabled) {
    background: var(--video-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.video-btn-success {
    background: linear-gradient(135deg, var(--video-success), var(--video-success-dark));
    color: white;
    box-shadow: 0 4px 14px rgba(67, 160, 71, 0.35);
}

.video-btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 160, 71, 0.45);
}

.video-btn-secondary {
    background: #f5f5f5;
    color: var(--text-secondary);
}

.video-btn-secondary:hover:not(:disabled) {
    background: #e0e0e0;
}

.video-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-btn-icon:hover {
    background: #e0e0e0;
    transform: scale(1.05);
}

.video-btn-small {
    padding: 10px 16px;
    font-size: 13px;
}

.video-btn-lg {
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 12px;
}

/* =============================================================================
   LOGIN FOOTER & ADMIN CTA
   ============================================================================= */
.video-login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #E0E0E0;
}

.video-login-footer a {
    color: var(--video-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.video-login-footer a:hover {
    text-decoration: underline;
}

/* Register CTA */
.video-register-cta {
    margin-top: 28px;
    padding: 20px;
    background: #F5F5F5;
    border-radius: 12px;
    text-align: center;
}

.video-register-cta-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.video-register-cta-link {
    color: var(--video-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.video-register-cta-link:hover {
    text-decoration: underline;
}

.video-register-cta-subtext {
    font-size: 12px;
    color: #9E9E9E;
    margin-top: 6px;
}

/* Admin CTA */
.video-admin-cta {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    border-radius: 12px;
    text-align: center;
    border: 1px solid #90CAF9;
}

.video-admin-cta-label {
    font-size: 14px;
    color: #1565C0;
    margin-bottom: 8px;
    font-weight: 500;
}

.video-admin-cta-link {
    color: var(--video-primary-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.video-admin-cta-link:hover {
    text-decoration: underline;
}

.video-admin-cta-subtext {
    font-size: 12px;
    color: #1976D2;
    margin-top: 6px;
}

/* =============================================================================
   DASHBOARD VIEW (identisk med webapp)
   ============================================================================= */
.video-dashboard {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

/* Stats Row */
.video-stats-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.video-stat-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--video-card-shadow);
    min-width: 160px;
}

.video-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.video-stat-icon.blue {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}

.video-stat-icon.orange {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
}

.video-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.video-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* =============================================================================
   GUL LAPP / STICKY NOTE (identisk med webapp!)
   ============================================================================= */
.video-sticky-note {
    position: relative;
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 50%, #ffee58 100%);
    border-radius: 2px 2px 12px 2px;
    padding: 16px 20px 20px 20px;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.08),
        inset 0 -2px 5px rgba(0, 0, 0, 0.05);
    transform: rotate(-0.5deg);
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    animation: stickyNoteAppear 0.4s ease-out;
    display: none;
}

.video-sticky-note.show {
    display: block;
}

.video-sticky-note::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, transparent 100%);
    border-radius: 2px 2px 0 0;
}

.video-sticky-note::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 2px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.06) 50%);
    border-radius: 0 0 8px 0;
}

@keyframes stickyNoteAppear {
    from {
        opacity: 0;
        transform: rotate(-0.5deg) translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotate(-0.5deg) translateY(0) scale(1);
    }
}

@keyframes stickyNoteDisappear {
    from {
        opacity: 1;
        transform: rotate(-0.5deg) translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: rotate(-0.5deg) translateY(-10px) scale(0.9);
    }
}

.video-sticky-note-pin {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
    z-index: 1;
}

.video-sticky-note-close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    font-size: 14px;
    color: #a68a00;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.2s;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
}

.video-sticky-note-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.video-sticky-note-title {
    font-size: 15px;
    font-weight: 600;
    color: #5d4e00;
    margin-bottom: 6px;
    padding-right: 20px;
    line-height: 1.3;
}

.video-sticky-note-message {
    font-size: 13px;
    color: #6b5c00;
    line-height: 1.5;
}

.video-sticky-note:hover {
    transform: rotate(-0.5deg) translateY(-2px);
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 15px 30px rgba(0, 0, 0, 0.1),
        inset 0 -2px 5px rgba(0, 0, 0, 0.05);
}

/* =============================================================================
   DASHBOARD HEADER
   ============================================================================= */
.video-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: var(--video-card-shadow);
}

.video-user-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.video-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--video-primary);
}

.video-user-avatar .material-icons {
    font-size: 28px;
}

.video-user-details {
    display: flex;
    flex-direction: column;
}

.video-user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.video-user-clinic {
    font-size: 13px;
    color: var(--text-muted);
}

.video-user-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.video-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* View Toggle */
.video-view-toggle {
    display: flex;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 4px;
}

.video-view-toggle-btn {
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s;
}

.video-view-toggle-btn.active {
    background: var(--bg-white);
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.video-view-toggle-btn:hover:not(.active) {
    color: var(--text-secondary);
}

/* Create Room Button */
.video-create-room-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--video-success), var(--video-success-dark));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(67, 160, 71, 0.35);
    font-family: var(--video-font);
}

.video-create-room-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 160, 71, 0.45);
}

/* =============================================================================
   ROOMS SECTION
   ============================================================================= */
.video-rooms-section {
    flex: 1;
}

.video-rooms-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* =============================================================================
   ROOM CARDS - Grid visning
   ============================================================================= */
.video-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.video-room-card {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: var(--video-card-shadow);
    overflow: hidden;
    transition: all 0.3s;
    border: 3px solid transparent;
}

.video-room-card:hover {
    box-shadow: var(--video-card-shadow-hover);
    transform: translateY(-4px);
}

.video-room-card.waiting {
    border-color: var(--video-warning);
    animation: cardPulseBorder 2s ease-in-out infinite;
}

@keyframes cardPulseBorder {
    0%, 100% {
        border-color: var(--video-warning);
        box-shadow: var(--video-card-shadow), 0 0 0 0 rgba(255, 167, 38, 0.7);
    }
    50% {
        border-color: var(--video-warning-dark);
        box-shadow: var(--video-card-shadow), 0 0 0 10px rgba(255, 167, 38, 0);
    }
}

.video-room-card-header {
    background: linear-gradient(135deg, var(--video-primary) 0%, var(--video-primary-dark) 100%);
    padding: 20px 24px;
    color: white;
    position: relative;
}

.video-room-card.waiting .video-room-card-header {
    background: linear-gradient(135deg, var(--video-warning) 0%, var(--video-warning-dark) 100%);
}

.video-room-card-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding-right: 80px;
}

.video-room-card-status {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-room-card-body {
    padding: 20px 24px;
}

.video-room-card-info {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.video-room-card-actions {
    display: flex;
    gap: 10px;
}

.video-room-card-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: var(--video-font);
}

.video-room-card-btn.start {
    background: linear-gradient(135deg, var(--video-primary), var(--video-primary-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.25);
}

.video-room-card-btn.start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.35);
}

.video-room-card.waiting .video-room-card-btn.start {
    background: linear-gradient(135deg, var(--video-warning), var(--video-warning-dark));
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
    animation: btnPulse 1.5s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.video-room-card-btn.copy {
    background: #f5f5f5;
    color: var(--text-secondary);
}

.video-room-card-btn.copy:hover {
    background: #e8e8e8;
    color: var(--video-primary);
}

.video-room-card-btn.delete {
    background: #FFF5F5;
    color: #E53935;
    flex: 0;
    padding: 12px;
}

.video-room-card-btn.delete:hover {
    background: #FFEBEE;
}

/* =============================================================================
   ROOM LIST - Liste visning
   ============================================================================= */
.video-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.video-room-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-white);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.25s;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.video-room-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #E0E0E0;
    transition: all 0.25s;
}

.video-room-row:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.video-room-row:hover::before {
    background: var(--video-primary);
}

.video-room-row.waiting {
    border-color: var(--video-warning);
    background: linear-gradient(90deg, #FFF8E1 0%, white 40%);
    animation: rowPulse 2s ease-in-out infinite;
}

.video-room-row.waiting::before {
    background: linear-gradient(180deg, var(--video-warning), var(--video-warning-dark));
    width: 5px;
}

@keyframes rowPulse {
    0%, 100% { border-color: var(--video-warning); }
    50% { border-color: var(--video-warning-dark); box-shadow: 0 6px 24px rgba(255, 152, 0, 0.2); }
}

.video-room-row-status {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #F5F5F5, #EEEEEE);
}

.video-room-row.waiting .video-room-row-status {
    background: linear-gradient(135deg, var(--video-warning), var(--video-warning-dark));
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.video-room-row.active .video-room-row-status {
    background: linear-gradient(135deg, var(--video-success-light), var(--video-success));
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.video-room-row-info {
    flex: 1;
    min-width: 0;
}

.video-room-row-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}

.video-room-row-meta {
    font-size: 13px;
    color: #9E9E9E;
    margin-top: 2px;
}

.video-room-row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.video-room-row-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-room-row-btn.start {
    background: linear-gradient(135deg, var(--video-primary), var(--video-primary-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.25);
}

.video-room-row-btn.start:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(21, 101, 192, 0.35);
}

.video-room-row.waiting .video-room-row-btn.start {
    background: linear-gradient(135deg, var(--video-warning), var(--video-warning-dark));
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
    animation: btnPulseSmall 1s ease-in-out infinite;
}

@keyframes btnPulseSmall {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35); }
    50% { transform: scale(1.15); box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5); }
}

.video-room-row-btn.copy {
    background: #F5F5F5;
    color: var(--text-secondary);
}

.video-room-row-btn.copy:hover {
    background: #E8E8E8;
    color: var(--video-primary);
    transform: scale(1.05);
}

.video-room-row-btn.delete {
    background: #FFF5F5;
    color: #E53935;
}

.video-room-row-btn.delete:hover {
    background: #FFEBEE;
    transform: scale(1.05);
}

/* Disabled state - når ingen pasient venter */
.video-room-row-btn.start:disabled,
.video-room-row-btn.start.disabled {
    background: #E0E0E0;
    color: #9E9E9E;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

.video-room-row-btn.start:disabled:hover,
.video-room-row-btn.start.disabled:hover {
    transform: none;
}

.video-room-card-btn.start:disabled,
.video-room-card-btn.start.disabled {
    background: #E0E0E0;
    color: #9E9E9E;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
    animation: none;
}

.video-room-card-btn.start:disabled:hover,
.video-room-card-btn.start.disabled:hover {
    transform: none;
}

/* =============================================================================
   EMPTY STATE
   ============================================================================= */
.video-rooms-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: var(--video-card-shadow);
}

.video-rooms-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.video-rooms-empty p {
    font-size: 16px;
    color: #9E9E9E;
    margin: 0;
}

.video-rooms-empty-hint {
    font-size: 14px !important;
    margin-top: 8px !important;
}

/* =============================================================================
   VIDEO CALL VIEW - Fullskjerm (beholdes fra forrige)
   ============================================================================= */
.video-call-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 10001;
}

.video-call-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-remote-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    position: relative;
}

/* "Kobler til video"-overlay (relay-wait / treg oppkobling). CSP-trygt: ekstern
   CSS + classList. z-index under en evt. feil-overlay. Vises kun ved reell ventetid. */
.video-connecting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.82);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    backdrop-filter: blur(8px);
}
.video-connecting-overlay.show {
    display: flex;
}
.video-connecting-content {
    text-align: center;
    color: #fff;
    padding: 40px;
    max-width: 420px;
}
.video-connecting-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #4CAF50;
    border-radius: 50%;
    animation: videoConnectingSpin 1s linear infinite;
    margin: 0 auto 26px;
}
@keyframes videoConnectingSpin {
    to { transform: rotate(360deg); }
}
.video-connecting-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}
.video-connecting-text {
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.85;
}

.video-remote-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
}

.video-placeholder.hidden {
    display: none;
}

.video-placeholder .material-icons {
    font-size: 80px;
    margin-bottom: 16px;
}

.video-placeholder p {
    font-size: 18px;
}

.video-local-container {
    position: absolute;
    bottom: 120px;
    right: 24px;
    width: 180px;
    aspect-ratio: 3/4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    border: 3px solid rgba(255,255,255,0.3);
    z-index: 100;
    transition: aspect-ratio 0.3s ease;
}

/* Webcam sender landscape → PiP i landscape-format */
.video-local-container.landscape {
    width: 240px;
    aspect-ratio: 16/9;
}

.video-local-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

/* Kamera av overlay */
.video-camera-off-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--video-primary) 0%, var(--video-primary-darker) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 10;
    padding: 16px;
    text-align: center;
}

.video-camera-off-overlay.hidden {
    display: none;
}

.video-camera-off-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.video-camera-off-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.video-camera-off-text {
    font-size: 10px;
    opacity: 0.9;
    line-height: 1.4;
}

/* Camera tooltip */
.video-camera-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-white);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    white-space: nowrap;
    z-index: 200;
    animation: tooltipBounce 1s ease-in-out infinite;
}

.video-camera-tooltip.hidden {
    display: none;
}

.video-camera-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: white;
}

@keyframes tooltipBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

/* Call info */
.video-call-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 50;
}

.video-call-room-name {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.video-call-duration {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    font-family: 'Roboto Mono', monospace;
}

.video-call-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.video-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9E9E9E;
}

.video-status-dot.connecting {
    background: var(--video-warning);
    animation: pulse 1s infinite;
}

.video-status-dot.connected {
    background: #4CAF50;
}

.video-status-dot.disconnected,
.video-status-dot.failed {
    background: var(--video-danger);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.video-call-status span:last-child {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

/* Call controls */
.video-call-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
    display: flex;
    justify-content: center;
    gap: 16px;
    z-index: 50;
}

.video-control-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(255,255,255,0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.video-control-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.video-control-btn.active {
    background: rgba(255,255,255,0.3);
}

.video-control-btn.muted,
.video-control-btn.off {
    background: rgba(244, 67, 54, 0.8);
}

.video-control-btn.video-end-call {
    background: var(--video-danger);
    width: 64px;
    height: 64px;
}

.video-control-btn.video-end-call:hover {
    background: var(--video-danger-dark);
}

/* =============================================================================
   RATING VIEW
   ============================================================================= */
.video-rating-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.video-rating-card {
    background: var(--bg-white);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.video-rating-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.video-rating-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.video-rating-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 32px 0;
}

.video-rating-section {
    margin-bottom: 32px;
}

.video-rating-label {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.video-rating-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.video-rating-star {
    font-size: 36px;
    color: #E0E0E0;
    cursor: pointer;
    transition: all 0.2s;
}

.video-rating-star:hover {
    transform: scale(1.2);
}

.video-rating-star.filled {
    color: #FFB400;
}

.video-rating-description {
    font-size: 14px;
    color: var(--text-muted);
    min-height: 20px;
}

/* =============================================================================
   TRANSCRIPTION PANEL
   ============================================================================= */
.video-transcription-panel {
    position: absolute;
    left: 24px;
    bottom: 120px;
    width: 360px;
    max-height: 300px;
    background: rgba(0,0,0,0.85);
    border-radius: 16px;
    overflow: hidden;
    z-index: 50;
    backdrop-filter: blur(10px);
}

.video-transcription-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.video-transcription-content {
    padding: 16px;
    max-height: 220px;
    overflow-y: auto;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    line-height: 1.5;
}

.video-transcription-placeholder {
    color: rgba(255,255,255,0.5);
    font-style: italic;
}

/* =============================================================================
   PATIENT TOAST
   ============================================================================= */
.video-patient-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-white);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 9999;
    max-width: 380px;
    animation: slideIn 0.3s ease;
    border-left: 5px solid var(--video-warning);
}

.video-patient-toast.hidden {
    display: none;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.video-toast-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.video-toast-icon {
    font-size: 32px;
    animation: bellRing 0.5s ease infinite;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

.video-toast-text strong {
    display: block;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.video-toast-text span {
    font-size: 14px;
    color: var(--text-muted);
}

.video-toast-actions {
    display: flex;
    gap: 10px;
}

/* =============================================================================
   ERROR MESSAGES
   ============================================================================= */
.video-error {
    background: #FFEBEE;
    border: 1px solid #FFCDD2;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    color: #C62828;
    font-size: 14px;
}

.video-error.hidden {
    display: none;
}

/* =============================================================================
   WAITING BADGE
   ============================================================================= */
.video-waiting-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--video-warning);
    color: white;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgePulse 1.5s ease-in-out infinite;
}

.video-waiting-badge.hidden {
    display: none;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 900px) {
    .video-login-wrapper {
        flex-direction: column;
    }
    
    .video-login-left {
        max-width: none;
        padding: 32px 24px;
    }
    
    .video-login-right {
        display: none;
    }
    
    .video-dashboard {
        padding: 16px;
    }
    
    .video-stats-row {
        flex-direction: column;
    }
    
    .video-stat-card {
        min-width: 100%;
    }
    
    .video-sticky-note {
        min-width: 100%;
        max-width: 100%;
        transform: none;
    }
    
    .video-dashboard-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .video-dashboard-actions {
        justify-content: space-between;
    }
    
    .video-rooms-grid {
        grid-template-columns: 1fr;
    }
    
    .video-local-container {
        width: 120px;
        bottom: 100px;
        right: 16px;
    }
    
    .video-local-container.landscape {
        width: 160px;
    }
}

/* =============================================================================
   SIDEBAR BUTTON
   ============================================================================= */
.sidebar-btn.video-consult {
    position: relative;
    background: linear-gradient(135deg, #0097a7 0%, #00838f 100%);
    color: white;
    border: none;
}

.sidebar-btn.video-consult .material-icons {
    color: white;
}

.sidebar-btn.video-consult:hover {
    background: linear-gradient(135deg, #00acc1 0%, #006064 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 151, 167, 0.3);
}

.sidebar-btn.video-consult:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 151, 167, 0.2);
}

/* =============================================================================
   CUSTOM DIALOG MODAL (erstatter alert, confirm, prompt)
   ============================================================================= */
.video-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: dialogFadeIn 0.2s ease;
}

.video-dialog-overlay.hidden {
    display: none;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.video-dialog-card {
    background: var(--bg-white);
    border-radius: 20px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: dialogSlideIn 0.3s ease;
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.video-dialog-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.video-dialog-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.video-dialog-message {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.video-dialog-input-wrapper {
    margin-bottom: 24px;
}

.video-dialog-input-wrapper.hidden {
    display: none;
}

.video-dialog-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--video-font);
    text-align: center;
    transition: all 0.2s;
}

.video-dialog-input:focus {
    outline: none;
    border-color: var(--video-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.video-dialog-input.error {
    border-color: var(--video-danger);
    animation: dialogShake 0.3s ease;
}

@keyframes dialogShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.video-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.video-dialog-buttons .video-btn {
    min-width: 120px;
    padding: 14px 24px;
}

.video-btn-danger {
    background: linear-gradient(135deg, var(--video-danger), var(--video-danger-dark));
    color: white;
    box-shadow: 0 4px 14px rgba(244, 67, 54, 0.35);
}

.video-btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 67, 54, 0.45);
}

/* =============================================================================
   GENERIC VIDEO TOAST
   ============================================================================= */

.video-generic-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-white);
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10002;
    max-width: 400px;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-generic-toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.video-generic-toast-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.video-generic-toast-content {
    flex: 1;
    min-width: 0;
}

.video-generic-toast-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.video-generic-toast-message {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.video-generic-toast-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.video-generic-toast-close:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.video-generic-toast-close .material-icons {
    font-size: 18px;
}

/* =============================================================================
   VIDEO SETTINGS VIEW - Kamera/Mikrofon innstillinger
   ============================================================================= */

/* Settings View Layout */
.video-settings-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 32px;
    gap: 24px;
}

.video-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.video-settings-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-settings-header h3 .material-icons {
    font-size: 28px;
    color: var(--video-primary);
}

/* Settings Grid - To kolonner */
.video-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    flex: 1;
}

@media (max-width: 900px) {
    .video-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Settings Card */
.video-settings-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--video-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-settings-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.video-settings-card-title .material-icons {
    font-size: 22px;
    color: var(--video-primary);
}

/* Camera Preview */
.video-settings-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
}

.video-settings-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.video-settings-preview-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    gap: 12px;
}

.video-settings-preview-placeholder .material-icons {
    font-size: 48px;
    color: #444;
}

.video-settings-preview-placeholder span {
    font-size: 14px;
}

/* Microphone Level Meter */
.video-settings-mic-meter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-settings-mic-meter-label {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-settings-mic-meter-label .material-icons {
    font-size: 16px;
}

.video-settings-mic-meter-bar-bg {
    width: 100%;
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.video-settings-mic-meter-bar {
    height: 100%;
    width: 0%;
    background: var(--video-primary);
    border-radius: 6px;
    transition: width 0.05s ease-out, background 0.2s;
}

/* Device Select */
.video-settings-select-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-settings-select-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.video-settings-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--video-font);
    background: var(--bg-white);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.video-settings-select:focus {
    outline: none;
    border-color: var(--video-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.video-settings-select:hover {
    border-color: var(--border-medium);
}

/* Speaker Test Button */
.video-settings-speaker-test {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-settings-speaker-test .video-btn {
    flex-shrink: 0;
}

.video-settings-speaker-test-hint {
    font-size: 13px;
    color: #9e9e9e;
}

/* Status & Error */
.video-settings-status {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-settings-status.loading {
    background: #E3F2FD;
    color: #1565C0;
}

.video-settings-status.success {
    background: #E8F5E9;
    color: #2E7D32;
}

.video-settings-status.error {
    background: #FFEBEE;
    color: #C62828;
}

.video-settings-error {
    background: #FFEBEE;
    border: 1px solid #FFCDD2;
    border-radius: 10px;
    padding: 14px 16px;
    color: #C62828;
    font-size: 14px;
    line-height: 1.5;
}

.video-settings-error.hidden {
    display: none;
}

.video-settings-error strong {
    display: block;
    margin-bottom: 4px;
}

.video-settings-error small {
    color: #E57373;
}

/* Settings Footer */
.video-settings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.video-settings-footer-hint {
    font-size: 13px;
    color: #9e9e9e;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-settings-footer-hint .material-icons {
    font-size: 16px;
}

/* Settings Section */
.video-settings-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .video-settings-view {
        padding: 16px;
    }
    
    .video-settings-card {
        padding: 16px;
    }
    
    .video-settings-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .video-settings-footer .video-btn {
        width: 100%;
    }
}

.video-login-info-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #3b82f6;
    text-decoration: none;
}

.video-login-info-link:hover {
    text-decoration: underline;
}
/* ===== usage-dashboard.css ===== */
/* ============================================================================
   USAGE DASHBOARD — Wallet header badge + Modal
   Matcher cssindex.css: Roboto, --primary: #1976d2, lyst tema, Material Design
   ============================================================================ */

/* --- Header Wallet Badge ---
   Sitter i header (blå bg, hvit tekst). Matcher .header-button mønsteret. */

.wallet-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 5px 10px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--main-border-radius, 6px);
    background: rgba(255,255,255,0.12);
    color: inherit;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
}
.wallet-header-btn .material-icons {
    font-size: 18px;
    opacity: 0.9;
}
.wallet-header-btn:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.wallet-header-amount {
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Lav saldo — gul puls */
.wallet-header-btn.wallet-low {
    border-color: rgba(255,193,7,0.6);
    background: rgba(255,193,7,0.2);
    animation: wallet-pulse 2s ease-in-out infinite;
}
@keyframes wallet-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(255,193,7,0); }
}

/* --- Modal Sizing --- */
.usage-modal-content {
    width: 95% !important;
    max-width: 1100px !important;
    max-height: 92vh;
}
.usage-modal-body {
    padding: 0 !important;
    overflow-y: auto;
    max-height: calc(92vh - 58px);
}

/* --- Loading --- */
.usage-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.usage-spinner {
    width: 22px; height: 22px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: usage-spin 0.7s linear infinite;
}
@keyframes usage-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   DASHBOARD LAYOUT (inne i modal-body)
   ============================================================================ */

.udb {
    padding: 24px;
    background: var(--bg-page, #f4f6f8);
    min-height: 400px;
    font-family: 'Roboto', sans-serif;
}

/* --- Period Selector --- */
.udb-periods {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.udb-period-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    background: var(--bg-white);
    color: var(--text-muted);
    font-family: 'Roboto', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.udb-period-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
    background: var(--bg-hover);
}
.udb-period-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(25,118,210,0.25);
}
.udb-date-range {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
}
.udb-date-range input[type="date"] {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 5px 8px;
    color: var(--text-primary);
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
}
.udb-date-range input[type="date"]:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(25,118,210,0.15);
}
.udb-date-range span { color: var(--text-muted); font-size: 0.82rem; }

/* --- Summary Cards --- */
.udb-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.udb-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.2s, transform 0.2s;
}
.udb-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
}
.udb-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
}
.udb-card-blue::before   { background: linear-gradient(90deg, #1976d2, #42a5f5); }
.udb-card-emerald::before { background: linear-gradient(90deg, #2e7d32, #66bb6a); }
.udb-card-amber::before  { background: linear-gradient(90deg, #ff8f00, #ffb300); }
.udb-card-violet::before { background: linear-gradient(90deg, #7b1fa2, #ba68c8); }
.udb-card-rose::before   { background: linear-gradient(90deg, #c62828, #ef5350); }

.udb-card-icon { font-size: 18px; margin-bottom: 8px; }
.udb-card-blue .udb-card-icon   { color: var(--primary); }
.udb-card-emerald .udb-card-icon { color: #2e7d32; }
.udb-card-amber .udb-card-icon  { color: #ff8f00; }
.udb-card-violet .udb-card-icon { color: #7b1fa2; }
.udb-card-rose .udb-card-icon   { color: #c62828; }

.udb-card-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 2px;
}
.udb-card-value {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}
.udb-card-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* --- Charts --- */
.udb-charts {
    display: grid;
    grid-template-columns: 5fr 2fr;
    gap: 12px;
    margin-bottom: 20px;
}
.udb-chart-box {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}
.udb-chart-box h4 {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.udb-chart-box h4 .material-icons { font-size: 18px; color: var(--primary); }
.udb-chart-wrap { position: relative; height: 220px; }

/* --- Log / Table --- */
.udb-log {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.udb-log-header {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-light);
}
.udb-log-header h4 {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.udb-log-header h4 .material-icons { font-size: 18px; color: #2e7d32; }

/* Tabs */
.udb-tabs { display: flex; gap: 4px; }
.udb-tab {
    padding: 5px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    background: var(--bg-white);
    color: var(--text-muted);
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.udb-tab:hover { color: var(--text-secondary); border-color: var(--border-medium); }
.udb-tab.active {
    background: var(--primary-light);
    color: var(--primary);
    border-color: rgba(25,118,210,0.3);
}

/* Table scroll */
.udb-log-scroll {
    max-height: 340px;
    overflow-y: auto;
}
.udb-log-scroll::-webkit-scrollbar { width: 5px; }
.udb-log-scroll::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }

/* Table */
.udb-table { width: 100%; border-collapse: collapse; }
.udb-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-light);
    position: sticky;
    top: 0;
    z-index: 1;
}
.udb-table thead th:last-child { text-align: right; }
.udb-table tbody td {
    padding: 9px 14px;
    font-size: 0.82rem;
    border-bottom: 1px solid #f0f0f0;
    color: var(--text-secondary);
}
.udb-table tbody td:first-child { font-weight: 500; color: var(--text-primary); }
.udb-table tbody td:last-child { text-align: right; }
.udb-table tbody tr:hover { background: var(--primary-light); }

/* Cell colors */
.udb-cost    { color: #e65100; font-weight: 500; }
.udb-bedrock { color: var(--primary); }
.udb-soniox  { color: #2e7d32; }

/* Empty */
.udb-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}
.udb-empty .material-icons { font-size: 40px; opacity: 0.25; margin-bottom: 10px; display: block; }
.udb-empty p { font-size: 0.92rem; }

/* PDF export button */
.udb-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    background: var(--bg-white);
    color: var(--accent-error, #c62828);
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.udb-pdf-btn:hover {
    background: #ffebee;
    border-color: #ef9a9a;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1000px) {
    .udb-cards { grid-template-columns: repeat(3, 1fr); }
    .udb-charts { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .udb-cards { grid-template-columns: repeat(2, 1fr); }
    .udb { padding: 16px; }
    .udb-periods { gap: 4px; }
    .udb-period-btn { padding: 5px 10px; font-size: 0.75rem; }
    .usage-modal-content { width: 100% !important; max-height: 100vh; border-radius: 0; }
}
@media (max-width: 500px) {
    .udb-cards { grid-template-columns: 1fr; }
}
/* ============================================================================
   TOPUP PANEL
   ============================================================================ */
.udb-card-wallet { position: relative; }
.udb-topup-trigger {
    display: flex; align-items: center; gap: 0.35rem;
    margin-top: 0.5rem; padding: 0.4rem 0.85rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; border: none; border-radius: 8px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}
.udb-topup-trigger:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.35); }
.udb-topup-trigger .material-icons { font-size: 1rem; }

.udb-topup-panel {
    grid-column: 1 / -1;
    animation: topupSlide 0.25s ease-out;
}
@keyframes topupSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.udb-topup-inner {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 1.5rem;
}
.udb-topup-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem;
}
.udb-topup-title {
    display: flex; align-items: center; gap: 0.5rem;
}
.udb-topup-title .material-icons { color: #2563eb; font-size: 1.3rem; }
.udb-topup-title h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e3a5f; }
.udb-topup-close {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; padding: 0.25rem; border-radius: 6px;
    transition: all 0.15s;
}
.udb-topup-close:hover { background: #e2e8f0; color: #475569; }
.udb-topup-desc {
    font-size: 0.85rem; color: #64748b; margin: 0 0 1rem;
}
.udb-topup-amounts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
    margin-bottom: 1rem;
}
.udb-topup-amount {
    padding: 0.7rem 0.5rem;
    background: #fff; border: 2px solid #e2e8f0;
    border-radius: 10px; font-size: 0.95rem; font-weight: 600;
    color: #334155; cursor: pointer; transition: all 0.15s;
}
.udb-topup-amount:hover { border-color: #93c5fd; background: #f0f7ff; }
.udb-topup-amount.selected {
    border-color: #2563eb; background: #eff6ff;
    color: #1d4ed8; box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.udb-topup-custom {
    margin-bottom: 1.25rem;
}
.udb-topup-custom label {
    display: block; font-size: 0.82rem; color: #64748b; margin-bottom: 0.35rem;
}
.udb-topup-input-row {
    display: flex; align-items: center; gap: 0.5rem;
}
.udb-topup-input {
    flex: 1; padding: 0.6rem 0.85rem;
    border: 2px solid #e2e8f0; border-radius: 8px;
    font-size: 0.95rem; font-weight: 500;
    transition: border-color 0.15s;
}
.udb-topup-input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.udb-topup-currency { font-size: 0.9rem; font-weight: 600; color: #64748b; }

.udb-topup-confirm {
    width: 100%; padding: 0.85rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; border: none; border-radius: 12px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}
.udb-topup-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.4); }
.udb-topup-confirm:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.udb-topup-confirm .material-icons { font-size: 1.2rem; }
.udb-topup-note {
    font-size: 0.78rem; color: #94a3b8; text-align: center;
    margin: 0.75rem 0 0; line-height: 1.4;
}

@media (max-width: 600px) {
    .udb-topup-amounts { grid-template-columns: repeat(2, 1fr); }
}
/* ===== main-csp.css ===== */
/* main-csp.css — Stiler eid av main.js, flyttet fra inline
   Prefix: main-
*/

.is-hidden { display: none !important; }

/* =============================================================================
   HELSENETT BADGES (header)
   ============================================================================= */
.main-badge-restart {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  color: #b45309;
}
.main-badge-restart-icon {
  font-size: 14px;
  vertical-align: middle;
  margin-right: 4px;
}

/* Logo i modal-headers */
.main-modal-logo {
  height: 24px;
  width: auto;
}

/* =============================================================================
   BALANCE MODAL (main-bm-)
   ============================================================================= */
@keyframes main-bm-fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes main-bm-slideUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }

.main-bm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  animation: main-bm-fadeIn 0.2s ease;
}
.main-bm-card {
  background: var(--bg-white);
  border-radius: 16px;
  padding: 0;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: main-bm-slideUp 0.25s ease;
}
.main-bm-header {
  background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
  padding: 28px 28px 22px;
  text-align: center;
  color: #fff;
}
.main-bm-header-icon {
  font-size: 48px;
  margin-bottom: 8px;
  opacity: 0.9;
}
.main-bm-header-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}
.main-bm-header-balance {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 6px;
}
.main-bm-body {
  padding: 24px 28px;
}
.main-bm-desc {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.main-bm-topup-section {
  margin-bottom: 16px;
}
.main-bm-topup-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #757575);
  margin-bottom: 8px;
}
.main-bm-topup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.main-bm-topup-btn {
  padding: 10px 0;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  background: var(--bg-white);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.main-bm-topup-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.main-bm-topup-btn-primary {
  border-color: var(--primary, #1976d2);
  background: rgba(25, 118, 210, 0.06);
  color: var(--primary, #1976d2);
}
.main-bm-info-box {
  background: #fff3e0;
  border: 1px solid #ffe0b2;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.main-bm-info-icon {
  color: #e65100;
  font-size: 18px;
  margin-top: 1px;
}
.main-bm-info-text {
  font-size: 0.78rem;
  color: #e65100;
  line-height: 1.4;
}
.main-bm-close-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.main-bm-close-btn:hover {
  background: #f5f5f5;
}

/* =============================================================================
   EMERGENCY UI (main-emergency-)
   ============================================================================= */
.main-emergency-box {
  padding: 2rem;
  text-align: center;
  background: var(--bg-white);
  border-radius: 8px;
  margin: 2rem;
  box-shadow: var(--shadow-medium);
}
.main-emergency-icon {
  font-size: 4rem;
  color: var(--accent-error);
  margin-bottom: 1rem;
}
.main-emergency-title {
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.main-emergency-desc {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}
.main-emergency-detail {
  background: var(--bg-light);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 2rem;
  font-family: monospace;
  text-align: left;
}
.main-emergency-btn-reload {
  margin-right: 1rem;
}

/* =============================================================================
   CHAT COPY FEEDBACK
   ============================================================================= */
.main-chat-copy-success {
  background: #4CAF50 !important;
}

/* =============================================================================
   LIVE TRANSCRIPTION (fra <style> blokk i HTML)
   ============================================================================= */
.live-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 12px; padding: 4px 10px;
  background: #fee2e2; border-radius: 12px;
  font-size: 12px; font-weight: 600; color: #dc2626;
  vertical-align: middle;
}
.live-indicator.is-hidden { display: none; }
.live-dot {
  width: 8px; height: 8px; background: #dc2626; border-radius: 50%;
  animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.live-text { letter-spacing: 0.5px; }
.transcript-partial {
  margin-top: 8px; padding: 8px 12px;
  background: #f3f4f6; border-radius: 6px;
  color: #6b7280; font-style: italic; font-size: 14px; min-height: 20px;
}
.transcript-partial.is-hidden { display: none; }
.transcript-partial::before { content: "▸ "; color: #9ca3af; }
#transcriptContent.live-mode {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

/* =============================================================================
   FACEBOOK WELCOME MODAL (fbw-)
   ============================================================================= */
.fbw-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  animation: fbw-fadeIn 0.25s ease;
}
.fbw-overlay.is-hidden { display: none !important; }

@keyframes fbw-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fbw-slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.fbw-card {
  background: var(--bg-white);
  border-radius: 20px;
  max-width: 460px;
  width: 92%;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: fbw-slideUp 0.3s ease;
}

.fbw-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.fbw-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.fbw-logo {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.fbw-title {
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.fbw-subtitle {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

.fbw-body {
  padding: 1.75rem 2rem 1rem;
  text-align: center;
}

.fbw-icon-row {
  margin-bottom: 0.75rem;
}

.fbw-community-icon {
  font-size: 2.5rem;
  color: #1877f2;
  background: #e7f0ff;
  border-radius: 16px;
  padding: 14px;
  display: inline-block;
}

.fbw-body-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.fbw-body-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1.25rem;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.fbw-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1877f2;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35);
  transition: all 0.2s ease;
}
.fbw-fb-btn:hover {
  background: #1565d8;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.4);
}
.fbw-fb-btn .material-icons {
  font-size: 1.2rem;
}

.fbw-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 1rem 0 0;
}

.fbw-footer {
  padding: 1rem 2rem 1.5rem;
  text-align: center;
}

.fbw-ok-btn {
  background: var(--bg-white);
  border: 1.5px solid #e2e8f0;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 40px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.fbw-ok-btn:hover {
  background: var(--bg-light);
  border-color: #cbd5e1;
}

@media (max-width: 480px) {
  .fbw-card { width: 96%; border-radius: 16px; }
  .fbw-header { padding: 1.5rem 1.25rem 1.25rem; }
  .fbw-title { font-size: 1.15rem; }
  .fbw-body { padding: 1.5rem 1.25rem 0.75rem; }
  .fbw-fb-btn { font-size: 0.85rem; padding: 11px 18px; }
  .fbw-footer { padding: 0.75rem 1.25rem 1.25rem; }
}

/* =============================================================================
   TIL PASIENT MODAL (tp-)
   ============================================================================= */
.tp-modal-content {
  max-width: 580px;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}

/* --- Header --- */
.tp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  color: #fff;
}

.tp-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tp-header-icon {
  font-size: 1.75rem;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 10px;
}

.tp-header-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.tp-header-sub {
  margin: 2px 0 0;
  font-size: 0.78rem;
  opacity: 0.75;
}

.tp-close-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 10px;
  padding: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-close-btn:hover {
  background: rgba(255,255,255,0.25);
}
.tp-close-btn .material-icons {
  font-size: 1.2rem;
}

/* --- Body --- */
.tp-body {
  padding: 20px 24px;
}

.tp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.tp-language-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 6px 10px 6px 12px;
  flex-shrink: 0;
}

.tp-language-icon {
  font-size: 1.1rem;
  color: #2563eb;
}

.tp-language-select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1e3a5f;
  cursor: pointer;
  padding: 2px 0;
  appearance: auto;
}
.tp-language-select:focus {
  outline: none;
}

.tp-lang-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* --- Text Area --- */
.tp-text-area {
  position: relative;
  min-height: 220px;
}

.tp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-light);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  color: var(--text-muted);
  font-size: 0.88rem;
  z-index: 2;
}
.tp-loading.is-hidden { display: none; }

.tp-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: tp-spin 0.8s linear infinite;
}
@keyframes tp-spin {
  to { transform: rotate(360deg); }
}

.tp-text-field {
  width: 100%;
  min-height: 220px;
  max-height: 50vh;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: #fafcff;
  resize: vertical;
  transition: border-color 0.15s;
}
.tp-text-field:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.tp-text-field::placeholder {
  color: var(--text-muted);
}

/* --- Footer --- */
.tp-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  background: var(--bg-light);
  border-top: 1px solid #e2e8f0;
}

.tp-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.tp-btn-secondary {
  background: var(--bg-white);
  border: 1px solid #d1d5db;
  color: var(--text-muted);
}
.tp-btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.tp-btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.tp-btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.tp-btn-primary:active {
  transform: translateY(0);
}
.tp-btn-primary .material-icons {
  font-size: 1rem;
}

/* Copied state */
.tp-btn-primary.tp-copied {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .tp-modal-content { width: 98%; border-radius: 12px; }
  .tp-header { padding: 16px 18px; }
  .tp-body { padding: 16px 18px; }
  .tp-footer { padding: 14px 18px; }
  .tp-header-title { font-size: 1rem; }
  .tp-text-field { min-height: 180px; }
}
/* ===== section-copy.css ===== */
/* section-copy.css — Seksjonskopier-panel for journalnotater
   Viser seksjoner (ANAMNESE:, FUNN:, etc.) med individuelle kopier-knapper
   og multi-select for å kopiere flere seksjoner samlet.
*/

/* =============================================================================
   CONTAINER: Overlay over responseBox
   ============================================================================= */
#sectionCopyPanel {
    display: none;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-light, #e0e0e0);
    border-radius: var(--main-border-radius, 8px);
    background: var(--bg-light, #fafafa);
    overflow-y: auto;
    min-height: 200px;
    flex: 1;
    font-size: 0.95rem;
    position: relative;
}

#sectionCopyPanel.is-active {
    display: flex;
}

/* Skjul textarea når panelet er aktivt */
.response-section.section-copy-active #responseBox {
    display: none;
}

/* =============================================================================
   TOOLBAR: Øverst i panelet
   ============================================================================= */
.sc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-white, #fff);
    border-bottom: 1px solid var(--border-light, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 36px;
}

.sc-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-toolbar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #757575);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    user-select: none;
}

.sc-toolbar-count {
    font-size: 0.72rem;
    color: var(--text-muted, #999);
    font-weight: 400;
}

.sc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Kopier valgte-knapp — vises kun når ≥1 er valgt */
.sc-copy-selected-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--primary, #1976d2);
    border-radius: 6px;
    background: rgba(25, 118, 210, 0.08);
    color: var(--primary, #1976d2);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sc-copy-selected-btn:hover {
    background: rgba(25, 118, 210, 0.15);
}

.sc-copy-selected-btn.is-visible {
    display: inline-flex;
}

.sc-copy-selected-btn .material-icons {
    font-size: 15px;
}

/* Feedback etter multi-kopiering */
.sc-copy-selected-btn.is-copied {
    background: rgba(76, 175, 80, 0.12);
    border-color: #4caf50;
    color: #4caf50;
}

/* Tilbake til redigering-knapp */
.sc-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border: 1px solid var(--border-light, #e0e0e0);
    border-radius: 6px;
    background: var(--bg-white, #fff);
    color: var(--text-muted, #757575);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sc-edit-btn:hover {
    background: var(--bg-light, #f5f5f5);
    color: var(--text-primary, #333);
}

.sc-edit-btn .material-icons {
    font-size: 15px;
}

/* =============================================================================
   SEKSJON-BLOKK
   ============================================================================= */
.sc-section {
    position: relative;
    padding: 10px 14px 10px 38px;
    border-bottom: 1px solid var(--border-light, #e0e0e0);
    background: var(--bg-white, #fff);
    transition: background 0.15s;
    cursor: default;
}

.sc-section:last-child {
    border-bottom: none;
}

.sc-section:hover {
    background: var(--bg-light);
}

.sc-section.is-selected {
    background: rgba(25, 118, 210, 0.04);
    border-left: 3px solid var(--primary, #1976d2);
    padding-left: 35px;
}

/* Checkbox */
.sc-checkbox {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 18px;
    height: 18px;
    border: 2px solid #c0c0c0;
    border-radius: 4px;
    background: var(--bg-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sc-checkbox:hover {
    border-color: var(--primary, #1976d2);
}

.sc-checkbox.is-checked {
    background: var(--primary, #1976d2);
    border-color: var(--primary, #1976d2);
}

.sc-checkbox.is-checked::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Seksjon-header (overskrift + kopier-ikon) */
.sc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.sc-section-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary, #212121);
    letter-spacing: 0.02em;
}

/* Kopier denne seksjonen-ikon */
.sc-copy-one-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #aaa);
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0;
    flex-shrink: 0;
}

.sc-section:hover .sc-copy-one-btn {
    opacity: 1;
}

.sc-copy-one-btn:hover {
    background: rgba(25, 118, 210, 0.1);
    color: var(--primary, #1976d2);
}

.sc-copy-one-btn .material-icons {
    font-size: 17px;
}

/* Feedback etter kopiering */
.sc-copy-one-btn.is-copied {
    opacity: 1;
    color: #4caf50;
}

/* Seksjon body-tekst */
.sc-section-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #555);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* =============================================================================
   TOGGLE-KNAPP (i action-bar, ved siden av Kopier)
   ============================================================================= */
#sectionViewBtn {
    display: none;
}

#sectionViewBtn.is-visible {
    display: inline-flex;
}

#sectionViewBtn.is-active {
    background: rgba(25, 118, 210, 0.1);
    border-color: var(--primary, #1976d2);
    color: var(--primary, #1976d2);
}

/* =============================================================================
   RESPONSIV (mobil)
   ============================================================================= */
@media (max-width: 768px) {
    .sc-section {
        padding: 8px 10px 8px 34px;
    }

    .sc-checkbox {
        left: 8px;
        width: 16px;
        height: 16px;
    }

    .sc-copy-one-btn {
        opacity: 1; /* Alltid synlig på mobil */
    }

    .sc-toolbar {
        padding: 5px 8px;
    }
}
/* ===== auth-csp.css ===== */
/* auth-csp.css — Stiler eid av auth-service.js, flyttet fra inline
   Prefix: auth-
   Inneholder:
     1. Profil-modal stiler (fra HTML inline styles)
     2. Login-overlay stiler (fra <style> blokk i getLoginHTML())
     3. Utility-klasser for auth-service
*/

/* =============================================================================
   UTILITY
   ============================================================================= */
.auth-fade-out {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

/* Skjuler login-overlay visuelt, men IKKE med display:none.
   Chrome password manager ignorerer display:none-elementer.
   visibility:hidden + height:0 skjuler for brukeren mens Chrome fortsatt ser <form>. */
.al-overlay-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
}
.auth-msg-error {
  display: block;
  background: #fef2f2;
  color: #dc2626;
}
.auth-msg-success {
  display: block;
  background: #f0fdf4;
  color: #166534;
}
.auth-qr-img {
  border-radius: 8px;
}

/* =============================================================================
   PROFIL-MODAL (auth-)
   Fra inline styles i index-beta44.html
   ============================================================================= */
.auth-modal-content {
  max-width: 480px;
  margin: 5vh auto;
  border-radius: 14px;
  overflow: hidden;
}
.auth-modal-header {
  background: linear-gradient(135deg, #1e3a5f, #2563eb);
  color: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.auth-modal-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  display: flex;
}
.auth-modal-body {
  padding: 1.5rem;
}
.auth-modal-msg {
  display: none;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.auth-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 0.85rem;
  color: #334155;
}
.auth-required {
  color: #dc2626;
}
.auth-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.auth-input-last {
  margin-bottom: 0;
}
.auth-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.auth-col-narrow {
  flex: 0 0 100px;
}
.auth-col-wide {
  flex: 1;
}
.auth-save-btn {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-save-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* =============================================================================
   LOGIN OVERLAY (al-)
   Fra <style> blokk i getLoginHTML()
   ============================================================================= */
    .al-overlay {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        z-index: 999999;
        display: flex; align-items: center; justify-content: center;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
        overflow-y: auto; padding: 1rem;
    }
    .al-overlay * { box-sizing: border-box; }

    .al-modal {
        width: 100%; max-width: 480px;
        background: var(--bg-white);
        border-radius: 16px;
        box-shadow: 0 25px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
        overflow: hidden;
        animation: alSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        transition: max-width 0.3s ease;
    }
    .al-modal.al-modal-wide { max-width: 560px; }
    @keyframes alSlideUp {
        from { opacity: 0; transform: translateY(24px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .al-modal-top {
        background: var(--bg-white);
        padding: 1.75rem 2rem 1.25rem; text-align: center;
        position: relative;
        border-bottom: 1px solid #e2e8f0;
    }
    .al-modal-top::after {
        content: ''; position: absolute;
        bottom: -1px; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, #2563eb, #60a5fa);
    }

    .al-brand-logo {
        width: 56px; height: 56px; border-radius: 14px;
        margin: 0 auto 0.75rem; display: block;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .al-brand-title { color: #1e3a5f; font-size: 1.25rem; font-weight: 600; margin: 0 0 0.2rem; }
    .al-brand-sub { color: #64748b; font-size: 0.85rem; margin: 0; }

    .al-stepper {
        display: flex; align-items: center; justify-content: center;
        gap: 0; margin-top: 1rem;
    }
    .al-dot {
        width: 10px; height: 10px; border-radius: 50%;
        background: #d1d5db; border: 2px solid #d1d5db;
        transition: all 0.3s ease;
    }
    .al-dot.on { background: #2563eb; border-color: #2563eb; box-shadow: 0 0 8px rgba(37,99,235,0.3); }
    .al-dot.done { background: #93c5fd; border-color: #93c5fd; }
    .al-dot-line { width: 24px; height: 2px; background: #d1d5db; }

    .al-tabs {
        display: flex; gap: 0; margin: 1.25rem 1.75rem 0;
        background: #f1f5f9; border-radius: 10px; padding: 3px;
    }
    .al-tab {
        flex: 1; padding: 0.6rem 1rem; background: transparent; border: none;
        color: #64748b; font-size: 0.88rem; font-weight: 500;
        cursor: pointer; border-radius: 8px; transition: all 0.2s ease; font-family: inherit;
    }
    .al-tab:hover { color: #334155; }
    .al-tab.active { background: #fff; color: #1e293b; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

    /* --- Mobil: Skjul registrering, vis info --- */
    .al-mobile-register-info { display: none; }

    @media (max-width: 768px) {
        #alTabRegister { display: none; }
        .al-tabs { border-radius: 8px; }
        #alTabLogin {
            border-radius: 8px;
            background: var(--bg-white);
            color: var(--text-primary);
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            cursor: default;
        }
        .al-mobile-register-info {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 1rem;
            padding: 12px 14px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 10px;
            font-size: 0.82rem;
            line-height: 1.45;
            color: #1e40af;
        }
        .al-mobile-register-info .material-icons {
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 1px;
            color: #3b82f6;
        }
    }

    .al-body { padding: 1.25rem 1.75rem 1.5rem; }
    .al-section { display: none; }
    .al-section.active { display: block; animation: alFadeIn 0.25s ease; }
    @keyframes alFadeIn { from { opacity: 0; } to { opacity: 1; } }

    .al-section-icon {
        width: 52px; height: 52px; border-radius: 14px; background: #eff6ff;
        display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
    }
    .al-section-icon .material-icons { font-size: 1.5rem; }
    .al-section-title { font-size: 1.2rem; font-weight: 600; color: #1e293b; text-align: center; margin: 0 0 0.4rem; }
    .al-section-desc {
        font-size: 0.9rem; color: #64748b; text-align: center; line-height: 1.5;
        margin: 0 auto 1.25rem; max-width: 360px;
    }

    .al-field { margin-bottom: 1rem; }
    .al-field label { display: block; color: #475569; font-size: 0.82rem; font-weight: 500; margin-bottom: 0.35rem; }
    .al-req { color: #ef4444; }
    .al-field input {
        width: 100%; padding: 0.7rem 0.9rem; background: #fff;
        border: 1px solid #d1d5db; border-radius: 8px; color: #1e293b;
        font-size: 0.92rem; font-family: inherit; transition: all 0.2s ease; outline: none;
    }
    .al-field input::placeholder { color: #9ca3af; }
    .al-field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
    .al-field small { display: block; color: #94a3b8; font-size: 0.78rem; margin-top: 0.3rem; }
    .al-field-row { display: flex; gap: 0.75rem; }

    .al-btn {
        width: 100%; padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        border: none; border-radius: 10px; color: #fff;
        font-size: 0.95rem; font-weight: 600; cursor: pointer;
        transition: all 0.2s ease; font-family: inherit; margin-top: 0.5rem;
        display: flex; align-items: center; justify-content: center;
    }
    .al-btn:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); box-shadow: 0 4px 16px rgba(37,99,235,0.3); transform: translateY(-1px); }
    .al-btn:active { transform: translateY(0); }
    .al-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

    .al-btn-secondary {
        width: 100%; padding: 0.65rem 1rem; background: #fff; border: 1px solid #d1d5db;
        border-radius: 10px; color: #475569; font-size: 0.88rem; font-weight: 500;
        cursor: pointer; transition: all 0.2s ease; font-family: inherit; margin-top: 0.5rem;
    }
    .al-btn-secondary:hover { background: #f8fafc; border-color: #9ca3af; }

    .al-link-btn { background: transparent; border: none; color: #6b7280; cursor: pointer; font-size: 0.85rem; font-family: inherit; padding: 0.5rem; }
    .al-link-btn:hover { color: #2563eb; }

    .al-error, .al-success { padding: 0.65rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1rem; display: none; }
    .al-error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
    .al-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
    .al-error.visible, .al-success.visible { display: block; }
    .al-error.visible { animation: alShake 0.4s ease; }
    @keyframes alShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

    .al-totp-input {
        width: 200px !important; text-align: center; font-size: 1.8rem !important; font-weight: 700;
        letter-spacing: 8px; padding: 0.75rem 1rem !important; margin: 0 auto 1rem; display: block !important;
    }
    .al-qr-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; display: inline-block; margin: 0.75rem 0; }
    .al-secret {
        font-family: 'Courier New', monospace; font-size: 0.95rem; color: #2563eb; letter-spacing: 2px;
        background: #eff6ff; padding: 0.5rem 1rem; border-radius: 8px; display: inline-block;
        margin: 0.5rem 0 1rem; cursor: pointer; border: 1px solid #bfdbfe;
    }
    .al-secret:hover { background: #dbeafe; }

    .al-center { text-align: center; }
    .al-center p { color: #64748b; font-size: 0.9rem; margin-bottom: 1rem; }
    .al-center h3 { color: #1e293b; font-size: 1.05rem; margin-bottom: 0.4rem; }
    .al-dl-link { color: #2563eb; text-decoration: none; font-size: 0.85rem; }
    .al-dl-link:hover { text-decoration: underline; }

    .al-footer { text-align: center; padding: 0.75rem 1.75rem 1.25rem; border-top: 1px solid #f1f5f9; }
    .al-footer p { color: #94a3b8; font-size: 0.75rem; margin: 0; }

    .al-spinner {
        display: inline-block; width: 18px; height: 18px;
        border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
        border-radius: 50%; animation: alSpin 0.6s linear infinite;
        vertical-align: middle; margin-right: 6px;
    }
    @keyframes alSpin { to { transform: rotate(360deg); } }

    .al-auth-info-box {
        background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
        padding: 1.25rem; text-align: center; margin-bottom: 1rem;
    }
    .al-auth-info-box .material-icons { font-size: 2.5rem; color: #2563eb; margin-bottom: 0.5rem; display: block; }
    .al-auth-info-box p { color: #334155; font-size: 0.88rem; line-height: 1.5; margin: 0; }
    .al-auth-qr-label { font-size: 0.82rem; color: #64748b; margin: 1rem 0 0.5rem; text-align: center; }
    .al-auth-qr-wrap { display: flex; justify-content: center; margin-bottom: 0.75rem; }

    .al-info-cards { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
    .al-info-card {
        display: flex; align-items: flex-start; gap: 0.875rem;
        background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.875rem 1rem; text-align: left;
    }
    .al-info-card .material-icons { font-size: 1.3rem; color: #2563eb; flex-shrink: 0; margin-top: 2px; }
    .al-info-card strong { display: block; color: #1e293b; font-size: 0.88rem; margin-bottom: 0.15rem; }
    .al-info-card p { margin: 0; font-size: 0.82rem; color: #64748b; line-height: 1.4; }

    .al-step-bar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; color: #64748b; font-size: 0.8rem; }
    .al-step-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; }
    .al-step-dot.on { background: #2563eb; box-shadow: 0 0 6px rgba(37,99,235,0.3); }

    @media (max-width: 500px) {
        .al-modal { max-width: 100%; border-radius: 12px; margin: 0.5rem; }
        .al-modal-top { padding: 1.5rem 1.25rem 1rem; }
        .al-body { padding: 1rem 1.25rem 1.25rem; }
        .al-tabs { margin: 1rem 1.25rem 0; }
        .al-brand-title { font-size: 1.1rem; }
        .al-field-row { flex-direction: column; gap: 0; }
        .al-field-half { flex: none; width: 100%; }
    }

/* auth-sms.css — Tilleggsstiler for SMS-verifisering ved registrering */

/* DPA checkbox */
.al-field-checkbox {
    margin: 16px 0 8px;
}
.al-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.al-checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    flex-shrink: 0;
}
.al-checkbox-label .al-link {
    color: #2563eb;
    text-decoration: underline;
}
.al-checkbox-label .al-link:hover {
    color: #1d4ed8;
}

/* SMS verifisering */
.al-sms-resend {
    margin-top: 16px;
    text-align: center;
}
.al-section-desc-small {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 4px;
}

/* 4-sifret SMS-kode input (litt bredere bokstaver) */
#alSmsCode {
    letter-spacing: 0.3em;
    font-size: 1.5rem;
    text-align: center;
    max-width: 160px;
    margin: 0 auto;
}

    /* auth1- prefix classes — erstatter inline styles i auth-service.js */

/* Modal */
.auth1-modal-narrow { max-width: 500px; }

/* Icon colors */
.auth1-icon-blue { color: #1976d2; }
.auth1-icon-blue2 { color: #2563eb; }
.auth1-icon-green { color: #2e7d32; }

/* Field layout */
.auth1-field-postcode { flex: 0 0 100px; }
.auth1-field-flex { flex: 1; }

/* Two-column field layout */
.al-field-half { flex: 1; min-width: 0; }

/* Button icons */
.auth1-btn-icon { font-size: 18px; vertical-align: middle; margin-right: 6px; }

/* Divider */
.auth1-divider { border: none; border-top: 1px solid #e2e8f0; margin: 0.75rem 0 1rem; }

/* Details/summary */
.auth1-details { margin: 0.75rem 0; }
.auth1-summary { color: #64748b; cursor: pointer; font-size: 0.85rem; }

/* Step bar */
.auth1-step-bar-mt { margin-top: 1.25rem; }

/* QR fallback */
.auth1-qr-fallback { font-size: 0.85rem; color: #475569; padding: 1rem; }
.auth1-link-blue { color: #2563eb; }

/* =============================================================================
   COUNTRY CODE DROPDOWN (al-country-)
   ============================================================================= */
.al-phone-row {
    display: flex;
    gap: 0;
    align-items: stretch;
    position: relative;
}
.al-country-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 0.7rem;
    background: var(--bg-light);
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    min-height: 42px;
}
.al-country-btn:hover {
    background: var(--bg-hover);
}
.al-country-btn:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.al-country-flag {
    font-size: 1.2rem;
    line-height: 1;
}
.al-country-code {
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.al-country-arrow {
    font-size: 18px !important;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.al-phone-input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    background: var(--bg-white);
    border: 1px solid #d1d5db;
    border-radius: 0 8px 8px 0;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.al-phone-input::placeholder { color: #9ca3af; }
.al-phone-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.al-country-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    margin-top: 4px;
    min-width: 200px;
    animation: alFadeIn 0.15s ease;
}
.al-country-dropdown.al-country-dropdown-open {
    display: block;
}
.al-country-option {
    padding: 0.65rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #334155;
    transition: background 0.12s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.al-country-option:hover {
    background: #eff6ff;
    color: #1e40af;
}
.al-country-option:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}

.al-country-select {
    position: relative;
    flex-shrink: 0;
}
.al-country-option .al-country-flag {
    font-size: 1.3rem;
}
.al-country-name {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}
.al-country-dial {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: auto;
}

/* TWO-COLUMN PASSWORD ROW — handled by .al-field-half + .al-field-row mobile override above */

/* =============================================================================
   FORGOT PASSWORD (al-forgot-)
   ============================================================================= */
.al-forgot-link-wrap {
    text-align: center;
    margin-top: 0.5rem;
}
.al-forgot-logo-wrap {
    text-align: center;
    margin-bottom: 0.75rem;
}
.al-forgot-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.al-forgot-2fa-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-top: 1.25rem;
}
.al-forgot-2fa-icon {
    color: #d97706;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.al-forgot-2fa-notice p {
    margin: 0;
    font-size: 0.82rem;
    color: #78350f;
    line-height: 1.5;
}
.al-forgot-2fa-notice strong {
    color: #451a03;
}
.al-forgot-mail-link {
    color: #2563eb;
    text-decoration: underline;
}
.al-forgot-mail-link:hover {
    color: #1d4ed8;
}
.al-forgot-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 1rem;
}
.al-forgot-back-icon {
    font-size: 18px !important;
    vertical-align: middle;
}
/* Twemoji flagg-ikoner i interpreter */
.interpreter-lang-flag img.emoji,
.interpreter-panel-flag img.emoji {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.2em;
}

/* ==========================================================================
   HJELP-MODAL — Authenticator wizard
   Alle klasser prefixet med hjelp-
   ========================================================================== */

/* --- Overlay --- */
.hjelp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.hjelp-overlay.hjelp-overlay--open {
    display: flex;
}

/* --- Modal --- */
.hjelp-modal {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem 2rem 1.25rem;
    position: relative;
    animation: hjelp-slide-up 0.25s ease-out;
}
@keyframes hjelp-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Lukkeknapp --- */
.hjelp-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.hjelp-close:hover {
    color: #334155;
    background: var(--bg-hover);
}

/* --- Steg-indikator --- */
.hjelp-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
}
.hjelp-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s;
    flex-shrink: 0;
}
.hjelp-step-dot--active {
    background: #2563eb;
    color: #fff;
}
.hjelp-step-dot--done {
    background: #16a34a;
    color: #fff;
}
.hjelp-step-line {
    height: 2px;
    width: 40px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* --- Sider --- */
.hjelp-page {
    display: none;
}
.hjelp-page--active {
    display: block;
}

/* --- Side-ikon --- */
.hjelp-page-icon {
    text-align: center;
    margin-bottom: 0.5rem;
}
.hjelp-page-icon .material-icons {
    font-size: 2.5rem;
    color: #2563eb;
}

/* --- Tittel og tekst --- */
.hjelp-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.hjelp-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 0.75rem;
    text-align: center;
}

/* --- QR-wrap --- */
.hjelp-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

/* --- App-lenker --- */
.hjelp-app-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
}
.hjelp-app-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #334155;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.hjelp-app-link:hover {
    background: var(--bg-hover);
    border-color: #cbd5e1;
}
.hjelp-app-link .material-icons {
    font-size: 1.25rem;
    color: #2563eb;
}

/* --- Screenshot --- */
.hjelp-screenshot-wrap {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
.hjelp-screenshot {
    max-width: 260px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* --- Kode-eksempel (steg 3) --- */
.hjelp-code-example {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 1rem 0;
}
.hjelp-code-digit {
    width: 40px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    border-radius: 8px;
    font-family: 'Roboto Mono', monospace;
}

/* --- Navigasjon --- */
.hjelp-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.75rem;
}
.hjelp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.hjelp-btn:active {
    transform: scale(0.97);
}
.hjelp-btn .material-icons {
    font-size: 1.1rem;
}
.hjelp-btn--next {
    background: #2563eb;
    color: #fff;
    margin-left: auto;
}
.hjelp-btn--next:hover {
    background: #1d4ed8;
}
.hjelp-btn--prev {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.hjelp-btn--prev:hover {
    background: #e2e8f0;
}
.hjelp-btn--finish {
    background: #16a34a;
}
.hjelp-btn--finish:hover {
    background: #15803d;
}

/* --- Support-stripe --- */
.hjelp-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.hjelp-support-icon {
    font-size: 1rem;
    color: var(--text-muted);
}
.hjelp-support-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.hjelp-support-link:hover {
    text-decoration: underline;
}

/* --- Trigger-knapp på TOTP-setup-siden --- */
.hjelp-trigger-wrap {
    text-align: center;
    margin-top: 1rem;
}
.hjelp-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s;
}
.hjelp-trigger-btn:hover {
    background: #eff6ff;
}
.hjelp-trigger-icon {
    font-size: 1.2rem;
}

/* --- Responsiv --- */
@media (max-width: 520px) {
    .hjelp-modal {
        padding: 1.5rem 1.25rem 1rem;
        border-radius: 12px;
    }
    .hjelp-screenshot {
        max-width: 200px;
    }
    .hjelp-code-digit {
        width: 34px;
        height: 42px;
        font-size: 1.2rem;
    }
    .hjelp-step-line {
        width: 24px;
    }
}
/* ===== ui-csp.css ===== */
/* ui-csp.css — Stiler eid av ui-handler.js
   Prefix: ui-
*/

.ui-hero-gradient {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #2196F3 100%) !important;
}
.ui-option-note { margin-top: 0.75rem; font-size: 0.8rem; }
.ui-pin-hint { margin-top: 12px; }

/* =============================================================================
   RECORD BUTTON STATE STYLES — Desktop primærknapp
   Klasser satt av updateRecordButtonAppearance()
   ============================================================================= */

/* idle: "Start ny konsultasjon" — teal primary, inviterende */
.button.record.rec-state-idle {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: #0d9488;
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,0.2);
}
.button.record.rec-state-idle:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f766e, #115e59);
  box-shadow: 0 4px 12px rgba(13,148,136,0.3);
}

/* finished: "Start neste" — teal primary med subtle avslutnings-indikator */
.button.record.rec-state-finished {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: #0d9488;
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,0.2);
}
.button.record.rec-state-finished:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f766e, #115e59);
  box-shadow: 0 4px 12px rgba(13,148,136,0.3);
}

/* recording: pulsing red */
.button.record.rec-state-recording {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: #dc2626;
  color: #fff;
  animation: rec-btn-pulse 2s ease-in-out infinite;
}
@keyframes rec-btn-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(220,38,38,0.2); }
  50% { box-shadow: 0 4px 20px rgba(220,38,38,0.4); }
}

/* paused: green resume */
.button.record.rec-state-paused {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #16a34a;
  color: #fff;
}
.button.record.rec-state-paused:hover:not(:disabled) {
  background: linear-gradient(135deg, #15803d, #166534);
}

/* processing: muted, disabled-feel */
.button.record.rec-state-processing {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-muted);
}
/* ===== interpreter-csp.css ===== */
/* interpreter-csp.css — Stiler eid av interpreter-manager.js, flyttet fra inline i HTML
   Prefix: interpreter-
*/

.interpreter-welcome-icon {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 16px;
}
.interpreter-welcome-title {
  font-size: 1.1em;
  font-weight: 500;
}
.interpreter-welcome-subtitle {
  font-size: 0.9em;
  opacity: 0.7;
  margin-top: 12px;
}
/* ===== ocr-csp.css ===== */
/* ocr-csp.css — Stiler eid av camera-ocr.js, flyttet fra inline i HTML
   Prefix: ocr-
*/

.ocr-preview-hint {
  font-size: 12px;
  margin-top: 8px;
  opacity: 0.7;
}
/* ===== ud-csp.css ===== */
/* ud-csp.css — Stiler eid av usage-dashboard.js
   Prefix: ud-
*/

.ud-wallet-icon { width: 28px !important; height: 28px !important; object-fit: contain; }
.ud-modal-icon { vertical-align: middle; margin-right: 6px; color: #3b82f6; }

.ud-wallet-badge {
  position: absolute; top: -4px; right: -6px;
  color: #fff; font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 8px; line-height: 1.3;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ud-wallet-badge-danger {
  background: #ef4444;
}
.ud-wallet-badge-warn {
  background: #f59e0b;
}
.ud-wallet-btn-relative { position: relative; }

.ud-period-footer { text-align: center; padding: 12px 0 4px; font-size: 0.75rem; color: var(--text-muted); }

.ud-cell-details { max-width: 180px; font-size: 0.72rem; color: var(--text-muted); }
.ud-cell-debit { color: var(--text-secondary); font-weight: 500; }
.ud-cell-credit { color: #2e7d32; font-weight: 500; }
.ud-cell-muted { color: var(--text-muted); }

.ud-payments-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg-light); border-bottom: 1px solid var(--border-light);
}
.ud-payments-total { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.ud-payments-period { font-size: 0.75rem; color: var(--text-muted); margin-left: 10px; }
.ud-icon-small { font-size: 16px; }

.ud-tfoot-row { background: var(--bg-light); font-weight: 500; }
.ud-tfoot-label { text-align: right; color: var(--text-primary); }
.ud-tfoot-total { color: #2e7d32; font-weight: 600; }
/* ===== settings-csp.css ===== */
/* settings-csp.css — Stiler eid av settings-service.js
   Prefix: settings- (+ eksisterende stab/sg/sfield/mic-*)
   Flyttet fra <style>-blokk og inline style= i settings-service.js
*/

/* --- Layout classes replacing inline styles --- */
.settings-modal-content { max-width: 680px; }
.settings-modal-title { display: flex; align-items: center; gap: 8px; }
.settings-icon-primary { color: var(--primary); }
.settings-tabs-container {
  display: flex; gap: 4px; padding: 8px 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.settings-content { padding: 20px 24px; min-height: 340px; }
.settings-shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- Tabs (stab) --- */
.stab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 18px; border: none; background: none;
  color: var(--text-muted); font-family: inherit; font-size: 0.85rem;
  font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.15s; border-radius: 0;
}
.stab:hover { color: var(--text-primary); }
.stab.active { color: var(--primary); border-bottom-color: var(--primary); }
.stab .material-icons { font-size: 18px; }

/* --- Setting groups --- */
.sg { margin-bottom: 20px; }
.sg-title {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.sg-title .material-icons { font-size: 15px; color: var(--primary); }

/* --- Setting fields --- */
.sfield { margin-bottom: 14px; }
.sfield label {
  display: block; font-size: 0.82rem; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 5px;
}
.sfield select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius); background: var(--bg-white);
  color: var(--text-primary); font-family: inherit; font-size: 0.88rem;
  transition: border-color 0.15s; appearance: auto;
}
.sfield select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}
/* Hengende innrykk i stedet for flex: som flex-container ble hver <b> og <a>
   inne i hinten et eget flex-item, og setningen brakk opp i kolonner. Nå flyter
   teksten som vanlig avsnitt, mens ikonet fortsatt står ute i margen. */
.sfield-hint {
  font-size: 0.72rem; color: var(--text-muted); margin-top: 4px;
  display: block; line-height: 1.5;
  padding-left: 17px; text-indent: -17px;
}
.sfield-hint .material-icons { font-size: 13px; vertical-align: -2px; margin-right: 4px; }

/* --- Microphone test --- */
.mic-test-area {
  background: var(--bg-light); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 16px; text-align: center;
}
.mic-test-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border: none; border-radius: 24px;
  font-family: inherit; font-size: 0.88rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.mic-test-btn.idle {
  background: var(--primary); color: #fff;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}
.mic-test-btn.idle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
}
.mic-test-btn.recording {
  background: var(--accent-error); color: #fff;
  animation: mic-pulse 1.5s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(211, 47, 47, 0); }
}
.mic-test-btn .material-icons { font-size: 20px; }

.mic-level-bar {
  height: 6px; background: var(--border-light); border-radius: 3px;
  margin-top: 14px; overflow: hidden;
}
.mic-level-fill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-error));
  transition: width 0.08s ease-out;
}
.mic-level-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }
.mic-level-label.is-err { color: #c62828; font-weight: 600; }
.mic-level-label.is-warn { color: #ef6c00; font-weight: 600; }
.mic-level-label.is-ok { color: #2e7d32; font-weight: 600; }
.mic-device-name { font-size: 0.75rem; color: var(--text-muted); margin-top: 10px; font-style: italic; }
/* «Ingen lagret valg — opptaket bruker systemstandard: X» (feilrapport #19) */
.mic-default-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }
.mic-default-hint b { color: var(--text-primary, inherit); }

/* --- Tema-tab (lys / mørk) --- */
.theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--border-light);
  border-radius: var(--main-border-radius);
  background: var(--bg-white);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.theme-option:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
}
.theme-option.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.18);
}
.theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-option-preview {
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}
.theme-option-preview-bar {
  height: 18px;
  flex-shrink: 0;
}
.theme-option-preview-body {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.theme-option-preview-line {
  height: 8px;
  border-radius: 4px;
  width: 80%;
}
.theme-option-preview-line.short { width: 50%; }

.theme-option-preview-light { background: #f4f6f8; }
.theme-option-preview-light .theme-option-preview-bar { background: #ffffff; border-bottom: 1px solid #e0e0e0; }
.theme-option-preview-light .theme-option-preview-line { background: #c4c8cc; }

.theme-option-preview-dark { background: #0d1117; }
.theme-option-preview-dark .theme-option-preview-bar { background: #1c2128; border-bottom: 1px solid #2d333b; }
.theme-option-preview-dark .theme-option-preview-line { background: #424a52; }

.theme-option-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-option-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.theme-option-title .material-icons { font-size: 18px; color: var(--primary); }
.theme-option-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

@media (max-width: 540px) {
  .theme-options { grid-template-columns: 1fr; }
}
/* ===== video-csp.css ===== */
/* video-csp.css — Stiler eid av video-ui.js
   Prefix: video-
   Flyttet fra <style>-blokk og inline style= i video-ui.js
*/

/* =============================================================================
   PROCESSING VIEW (fra <style> blokk)
   ============================================================================= */
.video-processing-view {
  display: flex; align-items: center; justify-content: center;
  min-height: 400px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.video-processing-card { text-align: center; padding: 48px; max-width: 400px; }
.video-processing-animation { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
.video-processing-circle {
  width: 16px; height: 16px; background: #4CAF50; border-radius: 50%;
  animation: video-pulse 1.4s ease-in-out infinite;
}
.video-processing-circle:nth-child(1) { animation-delay: 0s; }
.video-processing-circle:nth-child(2) { animation-delay: 0.2s; }
.video-processing-circle:nth-child(3) { animation-delay: 0.4s; }
@keyframes video-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}
.video-processing-icon { font-size: 64px; margin-bottom: 24px; animation: video-float 2s ease-in-out infinite; }
@keyframes video-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.video-processing-title { color: #ffffff; font-size: 28px; font-weight: 600; margin: 0 0 12px 0; }
.video-processing-subtitle { color: #a0a0a0; font-size: 16px; margin: 0 0 32px 0; line-height: 1.5; }
.video-processing-status {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(76, 175, 80, 0.15); border: 1px solid rgba(76, 175, 80, 0.3);
  padding: 12px 24px; border-radius: 30px; color: #4CAF50; font-size: 14px; font-weight: 500;
}
.video-processing-dot {
  width: 8px; height: 8px; background: #4CAF50; border-radius: 50%;
  animation: video-blink 1s ease-in-out infinite;
}
@keyframes video-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* =============================================================================
   TOAST TYPE COLORS
   ============================================================================= */
.video-toast-success { color: #10b981; }
.video-toast-error { color: #ef4444; }
.video-toast-warning { color: #f59e0b; }
.video-toast-info { color: #3b82f6; }

/* =============================================================================
   2FA SETUP VIEWS
   ============================================================================= */
.video-2fa-wrapper { max-width: 600px; margin: 0 auto; }
.video-2fa-wrapper-narrow { max-width: 500px; }
.video-2fa-full { max-width: none; }
.video-2fa-center { text-align: center; }
.video-2fa-emoji { font-size: 48px; display: block; margin-bottom: 16px; }
.video-2fa-infobox {
  background: #f0f7ff; border: 1px solid #c5dff8; border-radius: 12px;
  padding: 20px; margin-bottom: 24px;
}
.video-2fa-infobox-title { margin: 0 0 12px 0; color: #1565c0; font-size: 16px; }
.video-2fa-infobox-text { margin: 0 0 12px 0; color: #333; font-size: 14px; line-height: 1.6; }
.video-2fa-infobox-text-last { margin-bottom: 0; }
.video-2fa-qr-section { text-align: center; margin: 24px 0; }
.video-2fa-step-label { margin-bottom: 16px; font-weight: 600; color: #333; }
.video-2fa-qr-container {
  display: inline-block; padding: 16px; background: white;
  border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.video-2fa-qr-hint { margin-top: 16px; font-size: 14px; color: #555; }
.video-2fa-qr-subhint { margin-top: 8px; font-size: 13px; color: #888; }
.video-2fa-link { color: #1976d2; }
.video-2fa-btn-full { width: 100%; }
.video-2fa-warnbox {
  background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px;
  padding: 16px; margin-bottom: 24px;
}
.video-2fa-warnbox-text { margin: 0; font-size: 14px; color: #5d4037; }

/* =============================================================================
   TOTP CODE DISPLAY
   ============================================================================= */
.video-totp-hint { margin-top: 16px; font-size: 13px; color: #757575; }
.video-totp-code { background: #f5f5f5; padding: 4px 8px; border-radius: 4px; user-select: all; }

/* =============================================================================
   LICENSE ERROR
   ============================================================================= */
.video-license-error-title { margin-bottom: 16px; color: #c62828; }
.video-license-error-msg { color: #555; font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.video-license-help-box {
  background: #f5f5f5; border-radius: 12px; padding: 20px;
  text-align: left; margin-bottom: 24px;
}
.video-license-help-title { margin: 0 0 12px 0; color: #333; font-size: 15px; }
.video-license-help-list { margin: 0; padding-left: 20px; color: #555; font-size: 14px; line-height: 1.8; }

/* =============================================================================
   SUMMARY VIEW
   ============================================================================= */
.video-summary-wrapper { max-width: 700px; margin: 40px auto; }
.video-summary-textarea {
  width: 100%; height: 200px; padding: 16px;
  border: 2px solid #E0E0E0; border-radius: 10px;
  font-family: inherit; font-size: 14px; resize: vertical;
}
.video-summary-actions { display: flex; flex-direction: column; gap: 12px; }

/* =============================================================================
   MISC
   ============================================================================= */
.video-relative { position: relative; }
.video-settings-separator { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; }

/* =============================================================================
   VIDEO SUBSCRIPTION - Header Badge (vsub-)
   ============================================================================= */

.vsub-header-badge {
    position: relative;
    background: none;
    border: none;
    color: inherit;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    width: 40px;
    height: 40px;
}

.vsub-header-badge:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.vsub-header-badge.vsub-visible {
    display: flex;
}

.vsub-header-badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #4CAF50;
    border-radius: 50%;
    border: 2px solid var(--primary, #1976d2);
    display: none;
}

.vsub-header-badge-dot.vsub-active {
    display: block;
}

/* =============================================================================
   VIDEO SUBSCRIPTION - Upsell / Subscribe View
   ============================================================================= */

.vsub-upsell-content {
    flex: 1;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-white);
    max-width: 520px;
}

.vsub-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.vsub-logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.vsub-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vsub-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.vsub-logo-text-accent {
    color: var(--video-primary, #1976D2);
}

.vsub-heading {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.vsub-subheading {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    line-height: 1.6;
}

/* Features liste — kompakt */
.vsub-features {
    margin: 0;
}

.vsub-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-secondary);
}

.vsub-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vsub-feature-icon-blue { background: #E3F2FD; }
.vsub-feature-icon-green { background: #E8F5E9; }
.vsub-feature-icon-orange { background: #FFF3E0; }
.vsub-feature-icon-purple { background: #F3E5F5; }

/* =============================================================================
   CTA Panel — Høyre kolonne
   ============================================================================= */

.vsub-cta-panel {
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
    max-width: 360px;
    width: 100%;
}

.vsub-cta-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.vsub-cta-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 24px 0;
}

/* Priskort — i høyre kolonne */
.vsub-price-card {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.vsub-trial-badge {
    display: inline-block;
    background: rgba(255,255,255,0.95);
    color: #2E7D32;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.vsub-price-amount {
    font-size: 40px;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
}

.vsub-price-period {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
}

.vsub-price-detail {
    font-size: 14px;
    opacity: 0.8;
    margin-top: 4px;
}

/* CTA-knapp — stor og tydelig */
.vsub-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, #43A047, #2E7D32);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--video-font, 'Roboto', sans-serif);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.vsub-cta-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    background: linear-gradient(135deg, #4CAF50, #388E3C);
}

.vsub-cta-btn:active {
    transform: translateY(0);
}

.vsub-cta-btn .material-icons {
    font-size: 22px;
}

.vsub-cta-note {
    text-align: center;
    font-size: 13px;
    opacity: 0.8;
    margin-top: 12px;
    color: rgba(255,255,255,0.9);
}

/* =============================================================================
   VIDEO SUBSCRIPTION - Pending View
   ============================================================================= */

.vsub-pending-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    background: var(--video-bg-gradient, linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%));
}

.vsub-pending-card {
    text-align: center;
    padding: 48px;
    max-width: 400px;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.vsub-pending-icon {
    font-size: 56px;
    margin-bottom: 20px;
    animation: video-float 2s ease-in-out infinite;
}

.vsub-pending-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.vsub-pending-text {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.vsub-pending-spinner {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.vsub-pending-dot {
    width: 12px;
    height: 12px;
    background: var(--video-primary, #1976D2);
    border-radius: 50%;
    animation: video-pulse 1.4s ease-in-out infinite;
}

.vsub-pending-dot:nth-child(2) { animation-delay: 0.2s; }
.vsub-pending-dot:nth-child(3) { animation-delay: 0.4s; }

/* =============================================================================
   VIDEO SUBSCRIPTION - Manage Card (i rooms dashboard)
   ============================================================================= */

.vsub-manage-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.vsub-manage-card[hidden] {
    display: none !important;
}

.vsub-manage-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.vsub-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.vsub-status-pill-active {
    background: #E8F5E9;
    color: #2E7D32;
}

.vsub-status-pill-trial {
    background: #E3F2FD;
    color: #1565C0;
}

.vsub-status-pill-canceled {
    background: #FFF3E0;
    color: #E65100;
}

.vsub-status-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.vsub-status-pill-active .vsub-status-pill-dot { background: #4CAF50; }
.vsub-status-pill-trial .vsub-status-pill-dot { background: #2196F3; }
.vsub-status-pill-canceled .vsub-status-pill-dot { background: #FF9800; }

.vsub-period-info {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.vsub-cancel-btn {
    background: none;
    border: 1px solid #E0E0E0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: var(--video-font, 'Roboto', sans-serif);
}

.vsub-cancel-btn:hover {
    background: #FFEBEE;
    border-color: #FFCDD2;
    color: #C62828;
}

/* Loading state for upsell button */
.vsub-loading {
    opacity: 0.7;
    pointer-events: none;
}

.vsub-cta-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error message in subscription view */
.vsub-error {
    background: #FFEBEE;
    border: 1px solid #FFCDD2;
    border-radius: 10px;
    padding: 12px 16px;
    color: #C62828;
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
}

.vsub-error.vsub-visible {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .vsub-upsell-content {
        padding: 24px;
        max-width: none;
    }
    
    .vsub-cta-panel {
        max-width: none;
        padding: 0 16px;
    }

    .vsub-price-amount {
        font-size: 32px;
    }

    .vsub-manage-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .vsub-manage-info {
        flex-wrap: wrap;
    }
}
/* ===== shortcuts-csp.css ===== */
/* shortcuts-csp.css — Stiler eid av keyboard-shortcuts-service.js (innstillingsfanen
   «Hurtigtaster» + tillegg i F1-oversikten). Bruker temavariablene, så mørk modus
   følger med. Ligger også i bundle.css (det er den som lastes).
*/

.hk [hidden] { display: none !important; }

/* --- Topplinje: bryter, lagringsstatus, tilbakestill alle --- */
.hk-topp {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1rem; margin-bottom: 0.5rem;
  background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 12px;
}
.hk-bryter { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 500; color: var(--text-primary); user-select: none; }
.hk-bryter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hk-bryter-spor {
  position: relative; width: 38px; height: 22px; border-radius: 11px;
  background: var(--border-medium); transition: background-color 0.2s; flex-shrink: 0;
}
.hk-bryter-spor::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.2s;
}
.hk-bryter input:checked + .hk-bryter-spor { background: var(--primary); }
.hk-bryter input:checked + .hk-bryter-spor::after { transform: translateX(16px); }
.hk-bryter input:focus-visible + .hk-bryter-spor { outline: 2px solid var(--primary); outline-offset: 2px; }

.hk-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); margin-right: auto; }
.hk-status .material-icons { font-size: 18px; }
.hk-status-lagret .material-icons { color: var(--accent-success); }
.hk-status-lagrer .material-icons { color: var(--primary); animation: hk-snurr 1s linear infinite; }
.hk-status-feil, .hk-status-lokal { color: var(--accent-warning); }
@keyframes hk-snurr { to { transform: rotate(-360deg); } }

#resetAllShortcuts.hk-bekreft { background: var(--accent-error); border-color: var(--accent-error); color: #fff; }
#resetAllShortcuts:disabled { opacity: 0.45; cursor: default; }

.hk-hjelp { margin: 0.75rem 0 1rem; font-size: 0.9rem; color: var(--text-muted); }
.hk-hjelp kbd, .hk-fast kbd, .hk-tast kbd {
  display: inline-block; min-width: 1.6em; padding: 0.15rem 0.45rem; text-align: center;
  font-family: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.3;
  color: var(--text-primary); background: var(--bg-white);
  border: 1px solid var(--border-medium); border-bottom-width: 2px; border-radius: 5px;
}

/* --- Kategorier og rader --- */
.hk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .hk-grid { grid-template-columns: 1fr; } }

.hk-kategori { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
.hk-kategori-topp {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem;
  background: var(--bg-light); border-bottom: 1px solid var(--border-light);
  font-weight: 600; color: var(--text-primary);
}
.hk-kategori-topp .material-icons { font-size: 20px; color: var(--primary); }

.hk-rad {
  display: grid; grid-template-columns: 1fr auto; column-gap: 0.75rem; align-items: center;
  padding: 0.7rem 1rem; border-top: 1px solid var(--border-light); transition: background-color 0.2s;
}
.hk-kategori-topp + .hk-rad { border-top: none; }
.hk-rad:hover, .hk-rad.hk-aktiv { background: var(--bg-hover); }
.hk-rad.hk-merket { background: var(--primary-light); }
.hk-rad.hk-blink { animation: hk-blink 1.3s ease-out; }
@keyframes hk-blink { 0% { background: var(--primary-light); } 100% { background: transparent; } }

.hk-info { min-width: 0; }
.hk-navn { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--text-primary); }
.hk-endret {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.05rem 0.4rem; border-radius: 999px;
  color: var(--primary); background: var(--primary-light);
}
.hk-beskrivelse { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.1rem; }

.hk-taster { display: flex; align-items: center; gap: 0.25rem; }
.hk-tast {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem;
  min-width: 128px; min-height: 36px; padding: 0.35rem 0.6rem;
  background: var(--bg-light); border: 1px solid var(--border-medium); border-radius: 8px;
  cursor: pointer; font-family: inherit; color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s;
}
.hk-tast:hover { border-color: var(--primary); }
.hk-tast:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hk-tast.hk-tom { border-style: dashed; }
.hk-tast.hk-fanger {
  border-color: var(--primary); background: var(--primary-light);
  animation: hk-puls 1.2s ease-in-out infinite;
}
.hk-tast.hk-foreslått { border-color: var(--accent-warning); border-style: dashed; }
@keyframes hk-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(25, 118, 210, 0); }
}
.hk-pluss { color: var(--text-muted); font-size: 0.75rem; }
.hk-venter { font-size: 0.85rem; color: var(--primary); font-weight: 500; }
.hk-ingen { font-size: 0.85rem; color: var(--text-muted); font-style: italic; }

.hk-tilbake {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: none; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.hk-tilbake:hover { background: var(--bg-hover); color: var(--primary); }
.hk-tilbake .material-icons { font-size: 18px; }

/* --- Melding under raden (feil, konflikt, bekreftelse med Angre) --- */
.hk-melding { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; font-size: 0.85rem; }
.hk-melding:empty { display: none; }
.hk-rad .hk-melding:not(:empty) { margin-top: 0.5rem; }
.hk-melding .material-icons { font-size: 18px; }
.hk-melding-tekst { flex: 1 1 200px; }
.hk-melding-feil { color: var(--accent-error); }
.hk-melding-advarsel { color: var(--accent-warning); }
.hk-melding-ok { color: var(--text-secondary); }
.hk-melding-ok .material-icons { color: var(--accent-success); }
.hk-melding-konflikt {
  color: var(--text-primary); padding: 0.5rem 0.6rem; border-radius: 8px;
  background: var(--bg-light); border: 1px solid var(--accent-warning);
}
.hk-melding-konflikt .material-icons { color: var(--accent-warning); }
/* Teksten får hele linja, så de tre valgene står samlet under den. */
.hk-melding-konflikt .hk-melding-tekst { flex: 1 1 calc(100% - 2rem); }
.hk-melding-konflikt .hk-valg-hoved { margin-left: 1.6rem; }
.hk-alle-melding:not(:empty) { margin: 0 0 0.5rem; padding: 0 0.25rem; }
.hk-valg {
  padding: 0.25rem 0.65rem; border-radius: 6px; font: inherit; font-weight: 500; cursor: pointer;
  background: transparent; color: var(--primary); border: 1px solid var(--border-medium);
}
.hk-valg:hover { background: var(--bg-hover); }
.hk-valg-hoved { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); }
.hk-valg-hoved:hover { background: var(--primary-dark); }

/* --- Faste taster --- */
.hk-faste { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px dashed var(--border-medium); border-radius: 12px; }
.hk-faste-topp { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; }
.hk-faste-topp .material-icons { font-size: 18px; color: var(--text-muted); }
.hk-fast { display: grid; grid-template-columns: 140px 1fr auto; gap: 0.75rem; align-items: center; padding: 0.3rem 0; font-size: 0.9rem; color: var(--text-secondary); }
.hk-fast-taster { display: inline-flex; align-items: center; gap: 0.2rem; }
.hk-sted { font-size: 0.8rem; color: var(--text-muted); }
.shortcut-description .hk-sted { margin-left: auto; }

/* --- F1-oversikten --- */
.hk-av-banner {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 8px;
  background: var(--status-draft-bg, #fff8e1); color: var(--status-draft-text, #8a6d00); font-size: 0.9rem;
}
.hk-modal-bunn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hk-modal-bunn .material-icons { font-size: 18px; margin-right: 0.3rem; vertical-align: -4px; }
/* ===== mobile.css ===== */
/* =============================================================================
   MOBILE.CSS — Fastlegenes KI-verktøy
   100% CSP-safe

   Redesigned: State-based action bar with refined medical-grade palette
   Layout:  Header → Action Bar → Notatmal-stripe [Mer] → ResponseBox → Sticky Kopier
   Hamburger: Konsultasjonsliste
   ============================================================================= */

/* === UTILITY === */
.mobile-hidden { display: none !important; }
body.mobile-sidebar-open { overflow: hidden; }


/* =============================================================================
   1. SIDEBAR DRAWER
   ============================================================================= */

.mobile-sidebar-logout {
    display: none;
}

.mobile-hamburger {
    display: none;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: color 0.15s;
}
.mobile-hamburger:active { color: white; background: rgba(255,255,255,0.08); }
.mobile-hamburger .material-icons { font-size: 26px; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 949;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.is-visible { display: block; opacity: 1; }

@media (max-width: 768px) {

    .mobile-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    /* KRITISK: Forhindre at fullSyncUI skjuler main */
    #mainContent.is-hidden {
        display: flex !important;
    }

    .container {
        flex-direction: row !important;
        height: calc(100vh - 52px) !important;
        overflow: visible;
    }

    /* Sidebar off-canvas */
    .sidebar {
        position: fixed !important;
        top: 52px;
        left: 0;
        bottom: 0;
        width: 300px !important;
        max-width: 82vw !important;
        max-height: none !important;
        height: auto !important;
        z-index: 950;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid rgba(0,0,0,0.06) !important;
        border-bottom: none !important;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .sidebar.is-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0,0,0,0.12);
    }

    .sidebar-btn { min-height: 46px; font-size: 0.88rem; }
    .sidebar-btn.new-consult { font-weight: 600; }
    .consultation-item { padding: 11px 12px; min-height: 48px; border-radius: 10px; }
    .patient-info { font-size: 0.84rem; font-weight: 600; }
    .consultation-date { font-size: 0.7rem; }

    /* Logg ut i sidebar */
    .mobile-sidebar-logout {
        display: block;
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--border-light);
    }
    .mobile-logout-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        border: none;
        border-radius: 10px;
        background: none;
        color: var(--accent-error, #d32f2f);
        font-size: 0.88rem;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.15s;
    }
    .mobile-logout-btn:active { background: rgba(211,47,47,0.08); }
    .mobile-logout-btn .material-icons { font-size: 20px; }

    .main {
        width: 100% !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        height: 100%;
        padding: 10px 12px 80px !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}


/* =============================================================================
   2. HEADER
   ============================================================================= */

@media (max-width: 768px) {
    header {
        height: 52px; min-height: 52px; max-height: 52px;
        padding: 0 10px; overflow: hidden;
    }
    .header-main { gap: 0.4rem; }
    .header-left {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }
    .header-left h1, .header-left .version-badge,
    .header-left .mode-badge { display: none !important; }
    .header-logo { height: 26px; opacity: 0.9; }
    .header-actions { gap: 0.15rem; flex-wrap: nowrap !important; }
    .header-actions .icon-button { width: 38px; height: 38px; }
    #userDisplay, .user-menu-arrow { display: none !important; }
    .wallet-header-btn .wallet-header-amount { display: none; }
}

@media (max-width: 480px) {
    header { height: 48px; min-height: 48px; max-height: 48px; padding: 0 8px; }
    .container { height: calc(100vh - 48px) !important; }
    .sidebar { top: 48px !important; }
    .header-actions .icon-button { width: 36px; height: 36px; }
    #keyboardShortcutsBtn, .user-switcher { display: none !important; }
}


/* =============================================================================
   3. NOTATMAL-STRIPE + MER-PANEL
   ============================================================================= */

.mobile-top-stripe {
    display: none;
}
.mobile-more-panel {
    display: none;
}

@media (max-width: 768px) {
    .mobile-top-stripe {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .mobile-mal-wrap {
        flex: 1;
        min-width: 0;
    }
    /* Kompakt instruction-selector i stripe */
    .mobile-mal-wrap .instruction-selector {
        gap: 4px;
    }
    .mobile-mal-wrap .input-like {
        font-size: 0.84rem;
        padding: 7px 8px;
        border-radius: 8px;
    }
    .mobile-mal-wrap .favorite-toggle {
        padding: 6px 8px;
        border-radius: 8px;
    }
    .mobile-mal-wrap .setting-header {
        display: none;
    }

    /* Mer-knapp */
    .mobile-more-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 7px 10px;
        border: 1px solid var(--border-medium);
        border-radius: 8px;
        background: var(--bg-white);
        color: var(--text-secondary);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
        flex-shrink: 0;
        transition: all 0.15s;
    }
    .mobile-more-btn .material-icons { font-size: 18px; }
    .mobile-more-btn.is-active {
        background: var(--primary);
        color: var(--text-on-primary);
        border-color: var(--primary);
    }

    /* Ekspanderbart panel */
    .mobile-more-panel {
        display: none;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease;
    }
    .mobile-more-panel.is-expanded {
        display: flex;
        max-height: 300px;
        opacity: 1;
    }
    .mobile-more-panel .setting-group {
        margin: 0;
    }
    .mobile-more-panel .setting-header {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
    }
    .mobile-more-panel textarea,
    .mobile-more-panel input {
        font-size: 16px !important;
        padding: 8px 10px;
        border-radius: 8px;
    }
}


/* =============================================================================
   4. ACTION BAR — State-based single row (data-state attribute)
   ============================================================================= */

.mobile-action-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-action-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        min-height: 52px;
    }
}

/* ---- All buttons hidden by default — state shows them ---- */
.mobile-action-bar .mab-btn,
.mobile-action-bar .mab-timer {
    display: none;
}

/* ---- Shared button base ---- */
.mab-btn {
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.mab-btn:active:not(:disabled) { transform: scale(0.97); }
.mab-btn:disabled { cursor: default; opacity: 0.4; pointer-events: none; }
.mab-btn .material-icons { font-size: 22px; position: relative; z-index: 1; }
.mab-label {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

/* ---- Primary CTA (teal gradient) ---- */
.mab-primary {
    flex: 1;
    min-height: 52px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white;
    box-shadow:
        0 2px 8px rgba(13,148,136,0.18),
        0 1px 2px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.mab-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
}
.mab-primary:active:not(:disabled) {
    background: linear-gradient(135deg, #0f766e, #115e59);
}
.mab-primary .material-icons { font-size: 24px; }
.mab-primary .mab-label { font-size: 0.95rem; }

/* ---- Start opptak variant: red ---- */
.mab-start-rec {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow:
        0 2px 8px rgba(220,38,38,0.18),
        0 1px 2px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.mab-start-rec:active:not(:disabled) {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

/* ---- Pause: amber outlined ---- */
.mab-pause {
    flex: 1;
    min-height: 48px;
    padding: 10px 16px;
    background: var(--bg-white);
    color: #92400e;
    border: 1.5px solid #fbbf24;
    box-shadow: 0 1px 3px rgba(251,191,36,0.1);
}
.mab-pause .material-icons { font-size: 20px; color: #d97706; }
.mab-pause:active:not(:disabled) { background: #fffbeb; }

/* ---- Stopp: blue outlined ---- */
.mab-stop {
    min-height: 48px;
    padding: 10px 16px;
    background: var(--bg-white);
    color: #1e40af;
    border: 1.5px solid #60a5fa;
    box-shadow: 0 1px 3px rgba(96,165,250,0.1);
}
.mab-stop .material-icons { font-size: 20px; color: #2563eb; }
.mab-stop:active:not(:disabled) { background: #eff6ff; }

/* ---- Ny (small, paused state) ---- */
.mab-secondary {
    min-height: 48px;
    padding: 10px 12px;
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1.5px solid #cbd5e1;
}
.mab-secondary .material-icons { font-size: 20px; color: #64748b; }
.mab-secondary:active:not(:disabled) { background: #f1f5f9; }

/* ---- Resume: teal ---- */
.mab-resume {
    background: linear-gradient(135deg, #0d9488, #0f766e);
}

/* ---- Processing: disabled spinner ---- */
.mab-processing {
    flex: 1;
    min-height: 52px;
    padding: 12px 20px;
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid #e2e8f0;
}
@keyframes mab-spin-anim {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.mab-spin { animation: mab-spin-anim 1.5s linear infinite; }

/* ---- Icon-only buttons (Video, Tolk) ---- */
.mab-icon-btn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-white);
    border: 1.5px solid #e2e8f0;
}
.mab-icon-btn .material-icons { font-size: 22px; color: #475569; }
.mab-icon-btn:active:not(:disabled) { background: #f8fafc; }

/* Video icon color */
.mab-video .material-icons { color: #6366f1; }
.mab-video { border-color: #a5b4fc; }

/* Tolk icon color */
.mab-tolk .material-icons { color: #0891b2; }
.mab-tolk { border-color: #67e8f9; }

/* ---- Timer badge ---- */
.mab-timer {
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #dc2626;
    flex-shrink: 0;
}
.mab-timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
    animation: mab-dot-pulse 1.5s ease-in-out infinite;
}
.mab-timer-dot.mab-timer-paused {
    background: #94a3b8;
    animation: none;
}
@keyframes mab-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ==== STATE VISIBILITY ====
   data-state on .mobile-action-bar controls which buttons appear */

/* --- idle: Start konsultasjon + Video + Tolk --- */
.mobile-action-bar[data-state="idle"] .mab-start-consult,
.mobile-action-bar[data-state="idle"] .mab-video,
.mobile-action-bar[data-state="idle"] .mab-tolk {
    display: flex;
}

/* --- utkast: Start opptak + Video + Tolk --- */
.mobile-action-bar[data-state="utkast"] .mab-start-rec,
.mobile-action-bar[data-state="utkast"] .mab-video,
.mobile-action-bar[data-state="utkast"] .mab-tolk {
    display: flex;
}

/* --- recording: Pause + Stopp + Timer --- */
.mobile-action-bar[data-state="recording"] .mab-pause,
.mobile-action-bar[data-state="recording"] .mab-stop,
.mobile-action-bar[data-state="recording"] .mab-timer {
    display: flex;
}

/* --- paused: Resume + Stopp + Timer + Ny --- */
.mobile-action-bar[data-state="paused"] .mab-resume,
.mobile-action-bar[data-state="paused"] .mab-stop,
.mobile-action-bar[data-state="paused"] .mab-timer,
.mobile-action-bar[data-state="paused"] .mab-new-small {
    display: flex;
}

/* --- processing: Processing spinner --- */
.mobile-action-bar[data-state="processing"] .mab-processing {
    display: flex;
}

/* --- finished: Start neste + Video + Tolk --- */
.mobile-action-bar[data-state="finished"] .mab-start-next,
.mobile-action-bar[data-state="finished"] .mab-video,
.mobile-action-bar[data-state="finished"] .mab-tolk {
    display: flex;
}

/* ==== SMALL SCREEN ADJUSTMENTS ==== */
@media (max-width: 380px) {
    .mab-primary { min-height: 48px; padding: 10px 16px; }
    .mab-primary .mab-label { font-size: 0.88rem; }
    .mab-pause, .mab-stop, .mab-secondary { min-height: 42px; padding: 8px 12px; }
    .mab-label { font-size: 0.8rem; }
    .mab-icon-btn { width: 42px; min-width: 42px; height: 42px; }
    .mab-timer { font-size: 0.78rem; padding: 4px 8px; }
}


/* =============================================================================
   5. RESPONSE SECTION
   ============================================================================= */

@media (max-width: 768px) {
    .response-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #responseBox {
        min-height: 120px;
        font-size: 0.9rem;
        line-height: 1.6;
        flex: 1;
        border-radius: 12px;
        padding: 12px 14px;
    }

    /* Action bar: icon-only, kompakt */
    .response-header-actions {
        gap: 6px; flex-wrap: nowrap;
        overflow-x: auto; scrollbar-width: none;
        padding: 2px 0;
    }
    .response-header-actions::-webkit-scrollbar { display: none; }
    .response-header-actions .action-btn span:not(.material-icons):not(.tooltiptext) {
        display: none;
    }
    .response-header-actions .action-btn {
        padding: 8px; min-width: 42px; min-height: 42px;
        gap: 0; border-radius: 10px;
    }
}


/* =============================================================================
   6. STICKY KOPIER-KNAPP
   ============================================================================= */

.mobile-copy-bar {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-copy-bar {
        display: none !important;  /* skjult til det er innhold */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0,0,0,0.06);
        z-index: 100;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    }
    .mobile-copy-bar.is-visible {
        display: block !important;
    }
    .mobile-copy-btn {
        width: 100%;
        padding: 14px 20px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #0d9488, #0f766e);
        color: white;
        font-size: 1rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 2px 10px rgba(13,148,136,0.18);
        transition: transform 0.1s;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-copy-btn:active { transform: scale(0.98); }
    .mobile-copy-btn .material-icons { font-size: 22px; }
    .mobile-copy-btn.copied {
        background: linear-gradient(135deg, #059669, #047857);
        box-shadow: 0 2px 10px rgba(5,150,105,0.18);
    }
}


/* =============================================================================
   7. MODALER
   ============================================================================= */

@media (max-width: 768px) {
    .modal-content.wide, .modal-content {
        max-width: 100% !important; width: 100% !important;
        height: 100% !important; max-height: 100% !important;
        border-radius: 0 !important; margin: 0 !important;
    }
    .modal-content.narrow {
        width: 92vw !important; max-width: 400px !important;
        height: auto !important; max-height: 90vh !important;
        border-radius: 16px !important;
    }
    .modal-header { padding: 0.7rem 1rem; min-height: 48px; }
    .modal-title { font-size: 1rem; }
    .modal-body { padding: 0.75rem 1rem; }
    .modal-footer, .modal-actions { padding: 0.6rem 1rem; }
    .modal-header .close {
        min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
    }
    .journaloppsummering-summary-modal,
    .consultation-chat-modal,
    .refmodal-fullscreen {
        width: 100vw !important; height: 100vh !important;
        border-radius: 0 !important;
    }
    .fritekst-library-overlay .modal-content {
        width: 100vw !important; height: 100vh !important;
        max-width: none !important; border-radius: 0 !important;
    }
    #ocrCameraModal .modal-content,
    #contextCameraModal .modal-content {
        width: 100vw !important; height: 100vh !important;
        border-radius: 0 !important;
    }
    #profileModal .modal-content {
        width: 92vw !important; max-width: 450px !important;
        height: auto !important; max-height: 85vh !important;
        border-radius: 16px !important;
    }
    .welcome-footer { flex-direction: column; gap: 0.6rem; }
    .welcome-footer .button { width: 100%; }
}


/* =============================================================================
   8. TOUCH, INPUTS, NOTIFICATIONS
   ============================================================================= */

@media (max-width: 768px) {
    .tooltiptext { display: none !important; }
    .user-menu-item { min-height: 44px; padding: 0.7rem 1rem; }

    textarea, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"],
    input[type="search"], input[type="tel"], select {
        font-size: 16px !important;
    }

    .notification {
        left: 12px; right: 12px; bottom: 80px;
        max-width: none; border-radius: 12px; padding: 14px 16px;
    }
    .notification.notification-top {
        left: 12px; right: 12px; top: 60px;
        max-width: none; border-radius: 12px;
    }

    .user-menu-dropdown { right: 0; left: auto; max-width: 90vw; }
    .instruction-dropdown-list { max-width: 90vw; max-height: 50vh; }
    .empty-state { padding: 2rem 1rem; }
    .empty-state .material-icons { font-size: 3rem; }
    #emptyStateNewConsultBtn { width: 100%; max-width: 260px; min-height: 48px; }
}


/* =============================================================================
   9. MODUL-FIXES
   ============================================================================= */

@media (max-width: 768px) {
    .settings-shortcut-grid { grid-template-columns: 1fr !important; }
    .settings-tabs-container { overflow-x: auto; scrollbar-width: none; }
    .settings-tabs-container::-webkit-scrollbar { display: none; }
    .video-room-list { gap: 8px; }
    .video-room-card { padding: 12px; }
    .referral-buttons-wrapper { flex-direction: column; gap: 0.5rem; }
    .referral-btn { width: 100% !important; min-height: 44px; }
    .instruction-grid { grid-template-columns: 1fr !important; }
    .category-tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
    .category-tabs::-webkit-scrollbar { display: none; }
    .context-image-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .chat-message { max-width: 88%; }
}

@media (max-width: 600px) {
    .new-settings-mode-cards { grid-template-columns: 1fr !important; }
    .video-call-toolbar .video-btn span:not(.material-icons) { display: none; }
}

@media (max-width: 480px) {
    .main-bm-topup-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 700px) {
    .usage-modal-content { border-radius: 0 !important; max-height: 100vh !important; }
}


/* =============================================================================
   10. INTERPRETER FONT-SIZE (CSP-safe klasser)
   ============================================================================= */

.interpreter-font-controls {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 2px;
}
.interpreter-font-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,0.7);
    cursor: pointer; transition: all 0.15s;
}
.interpreter-font-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.interpreter-font-btn:active { transform: scale(0.92); }
.interpreter-font-btn .material-icons { font-size: 20px; }
.interpreter-font-size-label {
    font-size: 0.75rem; color: rgba(255,255,255,0.5);
    min-width: 36px; text-align: center;
    font-weight: 600; font-variant-numeric: tabular-nums;
}

.interpreter-font-70  .interpreter-line { font-size: 1.26rem; }
.interpreter-font-85  .interpreter-line { font-size: 1.53rem; }
.interpreter-font-100 .interpreter-line { font-size: 1.8rem; }
.interpreter-font-120 .interpreter-line { font-size: 2.16rem; }
.interpreter-font-150 .interpreter-line { font-size: 2.7rem; }
.interpreter-font-180 .interpreter-line { font-size: 3.24rem; }
.interpreter-font-220 .interpreter-line { font-size: 3.96rem; }
.interpreter-font-280 .interpreter-line { font-size: 5.04rem; }

@media (max-width: 500px) {
    .interpreter-font-size-label { display: none; }
    .interpreter-font-btn { width: 40px; height: 40px; }
}


/* =============================================================================
   11. SAFE AREA + PRINT
   ============================================================================= */

@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        header {
            padding-top: env(safe-area-inset-top);
            padding-left: max(0.75rem, env(safe-area-inset-left));
            padding-right: max(0.75rem, env(safe-area-inset-right));
        }
        .sidebar.is-open { padding-bottom: env(safe-area-inset-bottom); }
    }
}

@media print {
    .mobile-hamburger, .sidebar-overlay, .mobile-action-bar,
    .mobile-copy-bar, .mobile-top-stripe, .mobile-more-panel { display: none !important; }
}
/* ===== notice-banner.css ===== */
/* =============================================================================
   Informasjonslapp — post-it som henger fra headeren
   .lappen-anchor er 0-høyde mellom header og container
   .lappen flyter absolutt, sentrert, bredde etter innhold
   ============================================================================= */

.lappen-anchor {
    position: relative;
    height: 0;
    z-index: 899;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.lappen {
    position: absolute;
    top: 0;
    pointer-events: auto;

    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: min(540px, 75vw);
    padding: 8px 14px 9px 11px;

    background: linear-gradient(168deg, #fff9d6 0%, #fef0a0 50%, #fce975 100%);
    border-radius: 0 0 5px 5px;
    box-shadow:
        0 3px 10px rgba(100, 80, 0, 0.13),
        0 1px 3px rgba(100, 80, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #5c4a00;

    animation: lappen-drop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Liten "tape"-stripe */
.lappen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0 0 2px 2px;
}

@keyframes lappen-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lappen.is-hidden {
    display: none !important;
}

.lappen-icon {
    font-size: 14px;
    color: #b8960c;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.55;
}

.lappen-text {
    flex: 1;
    min-width: 0;
}

.lappen-date {
    display: inline;
    font-size: 10px;
    color: #8a7200;
    font-weight: 600;
    margin-right: 4px;
    opacity: 0.6;
}

.lappen-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #b8960c;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity 0.15s, background 0.15s;
    margin-left: 2px;
}

.lappen-close:hover {
    opacity: 1;
    background: rgba(160, 130, 10, 0.1);
}

.lappen-close .material-icons {
    font-size: 14px;
}

@media print {
    .lappen-anchor { display: none !important; }
}

@media (max-width: 768px) {
    .lappen {
        max-width: 88vw;
        font-size: 10.5px;
        padding: 6px 10px 7px 9px;
    }
}

@media (max-width: 480px) {
    .lappen {
        max-width: 94vw;
        font-size: 10px;
    }
}
/* ===== legemiddel-sammenligning.css ===== */
/* ============================================
   LEGEMIDDELSAMMENLIGNING MODAL
   Prefix: lm-
   Matcher app design system (--primary: #1976d2)
   ============================================ */

/* --- Legemiddel-specific CSS variables --- */
:root {
  --lm-identical: #e8f5e9;
  --lm-identical-border: #a5d6a7;
  --lm-identical-text: #2e7d32;
  --lm-identical-icon: #43a047;

  --lm-added: #e3f2fd;
  --lm-added-border: #90caf9;
  --lm-added-text: #1565c0;
  --lm-added-icon: #1976d2;

  --lm-removed: #ffebee;
  --lm-removed-border: #ef9a9a;
  --lm-removed-text: #c62828;
  --lm-removed-icon: #e53935;

  --lm-changed: #fff8e1;
  --lm-changed-border: #ffe082;
  --lm-changed-text: #e65100;
  --lm-changed-icon: #ff8f00;
}

/* ============================================
   MODAL OVERLAY & CONTENT
   ============================================ */
.lm-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lm-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.lm-modal {
  background: var(--bg-white);
  border-radius: var(--modal-border-radius);
  width: 95%;
  max-width: 1400px;
  max-height: 96vh;
  width: 98%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-strong);
  transform: translateY(20px);
  transition: transform 0.25s ease-out;
  overflow: hidden;
}

.lm-modal-overlay.is-open .lm-modal {
  transform: translateY(0);
}

/* ============================================
   HEADER
   ============================================ */
.lm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #2196F3 100%);
  color: white;
  flex-shrink: 0;
}

.lm-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lm-header-left .material-icons { font-size: 24px; opacity: 0.9; }

.lm-header-title {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
}

.lm-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lm-close-btn:hover { background: rgba(255,255,255,0.25); }

/* ============================================
   BODY
   ============================================ */
.lm-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ============================================
   INPUT PHASE
   ============================================ */
.lm-input-phase {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lm-input-phase.is-hidden {
  display: none;
}

.lm-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.lm-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lm-panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.lm-panel-label .material-icons { font-size: 20px; color: var(--primary); }

.lm-label-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.lm-label-tag.mine { background: #e8f5e9; color: #2e7d32; }
.lm-label-tag.epikrise { background: #fff3e0; color: #e65100; }

.lm-textarea {
  width: 100%;
  min-height: 200px;
  padding: 14px;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  font-family: 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: var(--text-primary);
  background: var(--bg-white);
}

.lm-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.lm-textarea::placeholder { color: #bdbdbd; font-style: italic; }
.lm-textarea.lm-epikrise-textarea { min-height: 280px; }

.lm-panel-hint {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.lm-panel-hint .material-icons { font-size: 14px; }

/* Compare button */
.lm-compare-row {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.lm-compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.lm-compare-btn:hover {
  background: linear-gradient(135deg, #1565C0 0%, #0d47a1 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.4);
}

.lm-compare-btn:active { transform: translateY(0); }
.lm-compare-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.lm-compare-btn .material-icons { font-size: 20px; }

/* ============================================
   LOADING STATE
   ============================================ */
.lm-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.lm-loading.visible { display: flex; }

.lm-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: lm-spin 0.8s linear infinite;
}

@keyframes lm-spin { to { transform: rotate(360deg); } }

.lm-loading-text { font-size: 15px; color: var(--text-muted); }

/* ============================================
   RESULTS PHASE
   ============================================ */
.lm-results-phase {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.lm-results-phase.visible { display: flex; }

/* Top bar */
.lm-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Stats */
.lm-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lm-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
  animation: lm-badge-pop 0.4s ease-out forwards;
  opacity: 0;
}

.lm-stat-identical { background: var(--lm-identical); color: var(--lm-identical-text); border-color: var(--lm-identical-border); }
.lm-stat-added { background: var(--lm-added); color: var(--lm-added-text); border-color: var(--lm-added-border); }
.lm-stat-removed { background: var(--lm-removed); color: var(--lm-removed-text); border-color: var(--lm-removed-border); }
.lm-stat-changed { background: var(--lm-changed); color: var(--lm-changed-text); border-color: var(--lm-changed-border); }
.lm-stat-badge .material-icons { font-size: 15px; }

.lm-stat-badge:nth-child(1) { animation-delay: 0.1s; }
.lm-stat-badge:nth-child(2) { animation-delay: 0.2s; }
.lm-stat-badge:nth-child(3) { animation-delay: 0.3s; }
.lm-stat-badge:nth-child(4) { animation-delay: 0.4s; }

@keyframes lm-badge-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   RESULTS TABLE
   ============================================ */
.lm-table-wrapper {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.lm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.lm-table thead { background: var(--bg-light); }

.lm-table th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-light);
}

.lm-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

.lm-table tbody tr {
  transition: background 0.15s ease;
  animation: lm-row-appear 0.3s ease-out forwards;
  opacity: 0;
  transform: translateY(8px);
}

.lm-table tbody tr:last-child td { border-bottom: none; }
.lm-table tbody tr:hover { filter: brightness(0.97); }

/* Staggered row animations */
.lm-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.lm-table tbody tr:nth-child(2) { animation-delay: 0.1s; }
.lm-table tbody tr:nth-child(3) { animation-delay: 0.15s; }
.lm-table tbody tr:nth-child(4) { animation-delay: 0.2s; }
.lm-table tbody tr:nth-child(5) { animation-delay: 0.25s; }
.lm-table tbody tr:nth-child(6) { animation-delay: 0.3s; }
.lm-table tbody tr:nth-child(7) { animation-delay: 0.35s; }
.lm-table tbody tr:nth-child(8) { animation-delay: 0.4s; }
.lm-table tbody tr:nth-child(9) { animation-delay: 0.45s; }
.lm-table tbody tr:nth-child(10) { animation-delay: 0.5s; }
.lm-table tbody tr:nth-child(11) { animation-delay: 0.55s; }
.lm-table tbody tr:nth-child(12) { animation-delay: 0.6s; }

@keyframes lm-row-appear {
  to { opacity: 1; transform: translateY(0); }
}

/* Row types */
.lm-row-identical { background: var(--lm-identical); }
.lm-row-added { background: var(--lm-added); }
.lm-row-removed { background: var(--lm-removed); }
.lm-row-changed { background: var(--lm-changed); }

/* Status cell */
.lm-status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}

.lm-status-cell .material-icons { font-size: 18px; }

.lm-status-identical .material-icons { color: var(--lm-identical-icon); }
.lm-status-added .material-icons { color: var(--lm-added-icon); }
.lm-status-removed .material-icons { color: var(--lm-removed-icon); }
.lm-status-changed .material-icons { color: var(--lm-changed-icon); }

.lm-status-identical { color: var(--lm-identical-text); }
.lm-status-added { color: var(--lm-added-text); }
.lm-status-removed { color: var(--lm-removed-text); }
.lm-status-changed { color: var(--lm-changed-text); }

/* Drug name */
.lm-drug-name { font-weight: 500; color: var(--text-primary); }

/* Table column widths (CSP: no inline styles) */
.lm-col-drug { width: 22%; }
.lm-col-dose { width: 14%; }
.lm-col-status { width: 12%; }
.lm-col-reason { width: 38%; }

/* Dose change */
.lm-dose-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 4px;
}

.lm-dose-old { text-decoration: line-through; color: var(--accent-error); opacity: 0.7; }
.lm-dose-arrow { color: var(--text-muted); font-size: 16px; }
.lm-dose-new { font-weight: 600; color: var(--primary-dark); }

/* Comment cell */
.lm-comment {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.lm-comment-source {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}

.lm-comment-no-reason {
  color: var(--accent-error);
  font-weight: 500;
}

/* ============================================
   KI SUMMARY SECTION
   ============================================ */
.lm-summary-section {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
  border: 1px solid #bbdefb;
  border-radius: 10px;
  padding: 16px 20px;
}

.lm-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
}

.lm-summary-header .material-icons { font-size: 20px; color: var(--primary); }

.lm-summary-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.lm-summary-text strong { color: var(--text-primary); }

/* Warning box */
.lm-warning-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 16px;
  background: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 8px;
}

.lm-warning-box .material-icons { font-size: 20px; color: #e65100; flex-shrink: 0; margin-top: 1px; }

.lm-warning-text {
  font-size: 13px;
  line-height: 1.5;
  color: #bf360c;
}

/* ============================================
   KI DISCLAIMER
   ============================================ */
.lm-disclaimer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.lm-disclaimer .material-icons {
  font-size: 18px;
  color: #90a4ae;
  flex-shrink: 0;
}

/* ============================================
   COPY PREVIEW MODAL
   ============================================ */
.lm-copy-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.lm-copy-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.lm-copy-modal {
  background: var(--bg-white);
  border-radius: var(--modal-border-radius);
  width: 90%;
  max-width: 750px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-strong);
  transform: translateY(20px);
  transition: transform 0.25s ease-out;
}

.lm-copy-overlay.is-open .lm-copy-modal { transform: translateY(0); }

.lm-copy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
}

.lm-copy-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.lm-copy-header-left .material-icons { color: var(--primary); font-size: 22px; }

.lm-copy-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.lm-copy-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.lm-copy-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.lm-copy-preview {
  width: 100%;
  min-height: 300px;
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  background: #fafbfc;
  resize: vertical;
}

.lm-copy-preview:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.lm-copy-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.lm-copy-hint .material-icons { font-size: 14px; }

.lm-copy-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-light);
}

/* ============================================
   FOOTER
   ============================================ */
.lm-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-light);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}

.lm-footer-left, .lm-footer-right {
  display: flex;
  gap: 8px;
}

.lm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-white);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.lm-btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  color: var(--primary);
}

.lm-btn-secondary .material-icons { font-size: 18px; }

.lm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.lm-btn-primary:hover {
  background: linear-gradient(135deg, #1565C0 0%, #0d47a1 100%);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.lm-btn-primary .material-icons { font-size: 18px; }

/* Copy success */
.lm-btn-copied {
  background: linear-gradient(135deg, #2e7d32, #1b5e20) !important;
  color: white !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* --- Section headers (fast / behov) --- */
.lm-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 16px 0 4px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: #e3f2fd;
  border-radius: 8px;
  border: 1px solid #bbdefb;
}

.lm-section-header .material-icons { font-size: 20px; color: #1565c0; }

.lm-section-behov {
  background: #fff8e1;
  border-color: #ffe082;
}

.lm-section-behov .material-icons { color: #e65100; }

.lm-table-wrapper .lm-section-header:first-child { margin-top: 0; }

/* --- Stat badges for type --- */
.lm-stat-type {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #bbdefb;
}

.lm-stat-type .material-icons { color: #1976d2; }

.lm-stat-type-behov {
  background: #fff8e1;
  color: #e65100;
  border-color: #ffe082;
}

.lm-stat-type-behov .material-icons { color: #ff8f00; }

/* --- Badge animation delays (6 badges nå) --- */
.lm-stat-badge:nth-child(5) { animation-delay: 0.5s; }
.lm-stat-badge:nth-child(6) { animation-delay: 0.6s; }

/* --- Sort buttons --- */
.lm-sort-group {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.lm-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-white);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.lm-sort-btn .material-icons { font-size: 16px; }

.lm-sort-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(25, 118, 210, 0.04);
}

.lm-sort-btn-active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.lm-sort-btn-active:hover {
  background: #1565c0;
  color: white;
}

/* --- Error state i loading-fasen --- */
.lm-error-state {
  text-align: center;
  padding: 24px;
}

.lm-error-icon {
  font-size: 48px;
  color: #ef4444;
}

.lm-error-title {
  margin: 12px 0 4px;
  font-weight: 600;
  color: var(--text-primary);
}

.lm-error-msg {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.lm-error-retry {
  margin-top: 16px;
}

@media (max-width: 768px) {
  .lm-panels { grid-template-columns: 1fr; }
  .lm-body { padding: 16px; }
  .lm-header { padding: 12px 16px; }
  .lm-footer { padding: 12px 16px; }
  .lm-results-bar { flex-direction: column; align-items: flex-start; }
  .lm-table { font-size: 13px; }
  .lm-table th, .lm-table td { padding: 8px 10px; }
  .lm-footer-left, .lm-footer-right { width: 100%; justify-content: center; }
}
/* ===== idle-lock.css ===== */
/* Visuell skjerming av pasientdata ved inaktivitet.
   Aktiveres av body.idlk-active satt av js/idle-lock.js.
   Alt prefikset idlk- for å unngå kollisjon med eksisterende stiler. */

:root {
  --idlk-blur-amount: 16px;
  --idlk-fade-in: 500ms;
  --idlk-overlay-z: 99999;
}

/* Blur-tilstand på alt app-innhold unntatt selve overlay */
body.idlk-active > *:not(#idlkOverlay) {
  filter: blur(var(--idlk-blur-amount));
  -webkit-filter: blur(var(--idlk-blur-amount));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: filter var(--idlk-fade-in) ease-out,
              -webkit-filter var(--idlk-fade-in) ease-out;
}

/* Overlay — skjult som default */
#idlkOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--idlk-overlay-z);
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  cursor: pointer;
  pointer-events: auto;
}

/* Synlig når lock er aktiv */
body.idlk-active #idlkOverlay {
  display: flex;
  animation: idlk-overlay-in var(--idlk-fade-in) ease-out;
}

/* Meldingsboks inni overlay */
.idlk-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 48px;
  background: var(--bg-white);
  color: var(--text-primary);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--shadow-strong);
  max-width: 400px;
  text-align: center;
  animation: idlk-message-in var(--idlk-fade-in) ease-out;
}

.idlk-icon {
  font-size: 48px !important;
  color: var(--primary);
  line-height: 1;
}

.idlk-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.idlk-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

@keyframes idlk-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes idlk-message-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Respekter redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
  body.idlk-active > *:not(#idlkOverlay) {
    transition: none;
  }
  body.idlk-active #idlkOverlay {
    animation: none;
  }
  .idlk-message {
    animation: none;
  }
}

/* Høykontrast-forsterkning */
@media (prefers-contrast: more) {
  .idlk-message {
    border: 2px solid var(--text-primary);
  }
  .idlk-icon {
    color: var(--text-primary);
  }
}

/* Ikke print blurret innhold */
@media print {
  body.idlk-active > *:not(#idlkOverlay) {
    display: none !important;
  }
  body.idlk-active #idlkOverlay {
    display: none !important;
  }
}

/* ===== privacy-tab.css ===== */
/* Stiler for Personvern-tab i settings-modalen.
   Prefiks sfield- matcher øvrige settings-stiler. */

.sfield-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 8px 0;
}

.sfield-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  cursor: pointer;
  background: var(--bg-white);
  transition: background 150ms ease, border-color 150ms ease;
}

.sfield-radio:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.sfield-radio input[type="radio"] {
  accent-color: var(--primary);
  cursor: pointer;
}

.sfield-radio input[type="radio"]:checked + span {
  font-weight: 600;
  color: var(--primary);
}

.sfield-radio span {
  font-size: 14px;
  color: var(--text-primary);
}

.sfield-hint-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 6px 0 10px 0;
  line-height: 1.5;
}

/* =============================================================================
   AI COLLABORATION — Forbedret UX
   Empty state, redigerbar preview, regulatorisk banner, picker-modal.
   Alle klasser prefixet med ai- for å unngå lekkasje.
   Gjenbruker eksisterende ai-message / ai-chat / ai-preview-section fra
   blokken ved linje 2822.
   ============================================================================= */

/* --- Empty-state med to startvalg ----------------------------------------- */
.ai-welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  height: 100%;
  min-height: 340px;
}

.ai-welcome-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.ai-welcome-icon .material-icons {
  font-size: 2rem;
  color: #2563eb;
}

.ai-welcome-card h4 {
  color: var(--text-primary);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.ai-welcome-card > p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0 0 1.5rem 0;
  max-width: 320px;
}

.ai-empty-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 340px;
}

.ai-empty-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 0.9375rem;
  color: #334155;
  font-weight: 500;
  transition: all 0.15s ease;
}

.ai-empty-option:hover {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
}

.ai-empty-option .material-icons {
  font-size: 1.375rem;
  color: #2563eb;
  flex-shrink: 0;
}

.ai-empty-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.ai-empty-option-title {
  font-weight: 600;
  color: var(--text-primary);
}

.ai-empty-option-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 400;
}

.ai-empty-examples {
  margin-top: 1.5rem;
  width: 100%;
  max-width: 340px;
}

.ai-empty-examples-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  display: block;
}

.ai-empty-examples-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}

/* --- Preview: redigerbare felt -------------------------------------------- */
.ai-preview-meta {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex-shrink: 0;
}

.ai-preview-name-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-white);
  transition: all 0.15s ease;
  font-family: inherit;
}

.ai-preview-name-input:hover {
  border-color: var(--border-light);
  background: var(--bg-light);
}

.ai-preview-name-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-preview-name-input::placeholder {
  color: #cbd5e1;
  font-weight: 500;
}

.ai-preview-description-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-white);
  transition: all 0.15s ease;
  font-family: inherit;
  resize: none;
  min-height: 38px;
  line-height: 1.4;
}

.ai-preview-description-input:hover {
  border-color: var(--border-light);
  background: var(--bg-light);
}

.ai-preview-description-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-preview-description-input::placeholder {
  color: #cbd5e1;
}

.ai-preview-category-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
}

.ai-preview-category-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
}

.ai-preview-category-select {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  background: var(--bg-white);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.ai-preview-category-select:hover {
  border-color: #cbd5e1;
}

.ai-preview-category-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-preview-content-editable {
  flex: 1;
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  background: var(--bg-white);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #334155;
  resize: none;
  white-space: pre-wrap;
  overflow-y: auto;
  transition: background 0.15s ease;
}

.ai-preview-content-editable:hover {
  background: #fafbfc;
}

.ai-preview-content-editable:focus {
  outline: none;
  background: var(--bg-white);
}

.ai-preview-content-editable::placeholder {
  color: #cbd5e1;
  font-style: italic;
}

.ai-preview-content-editable:disabled {
  background: var(--bg-light);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Vi må nullstille flex på .ai-preview-content slik at textarea får vokse —
   men kun i den nye strukturen. Bruker :has() som fallback til flex-column. */
.ai-preview-content:has(.ai-preview-content-editable) {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Regulatorisk banner -------------------------------------------------- */
.ai-regulatory-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  animation: aiBannerSlide 0.25s ease-out;
}

@keyframes aiBannerSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-regulatory-banner.is-checking {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.ai-regulatory-banner.is-approved {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  animation: aiBannerSlide 0.25s ease-out, aiBannerFade 0.4s ease-in 2.5s forwards;
}

@keyframes aiBannerFade {
  to { opacity: 0; transform: translateY(-4px); }
}

.ai-regulatory-banner.is-violation {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.ai-regulatory-banner .material-icons {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.ai-regulatory-banner.is-checking .material-icons {
  animation: aiBannerSpin 1.2s linear infinite;
}

@keyframes aiBannerSpin {
  to { transform: rotate(360deg); }
}

.ai-regulatory-banner-body {
  flex: 1;
  min-width: 0;
}

.ai-regulatory-banner-title {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.ai-regulatory-banner-detail {
  font-weight: 400;
  color: inherit;
  opacity: 0.9;
}

/* Strukturerte violation-kort embedded i banneret (v3-format) */
.ai-regulatory-banner.has-structured {
  display: block;
  padding: 0.75rem 1rem;
}
.ai-regulatory-banner.has-structured > .material-icons {
  float: left;
  margin: 2px 0.5rem 0 0;
}
.ai-regulatory-banner.has-structured .ai-regulatory-banner-title {
  margin-bottom: 0.5rem;
}
.ai-banner-violations {
  margin-top: 0.5rem;
}
.ai-banner-violations .fritekst-compliance-violation-item {
  background: rgba(220, 38, 38, 0.06);
}
.ai-regulatory-banner-suggestion {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(146, 64, 14, 0.3);
}

/* --- Error-bobler med retry ----------------------------------------------- */
.ai-error-bubble {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}

.ai-error-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.ai-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--bg-white);
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ai-retry-btn:hover {
  background: #991b1b;
  color: #ffffff;
  border-color: #991b1b;
}

.ai-retry-btn .material-icons {
  font-size: 0.9375rem;
}

/* --- Picker-modal for "Start fra eksisterende" ---------------------------- */
.ai-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  animation: aiPickerFadeIn 0.18s ease-out;
}

@keyframes aiPickerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ai-picker-modal {
  background: var(--bg-white);
  border-radius: 14px;
  width: 92vw;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.3);
  animation: aiPickerSlideUp 0.22s ease-out;
  overflow: hidden;
}

@keyframes aiPickerSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  color: #ffffff;
  flex-shrink: 0;
}

.ai-picker-header h4 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.ai-picker-close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #ffffff;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-picker-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.ai-picker-close .material-icons {
  font-size: 1.125rem;
}

.ai-picker-tabs {
  display: flex;
  background: var(--bg-light);
  border-bottom: 1px solid #e2e8f0;
  padding: 0 1.25rem;
  flex-shrink: 0;
}

.ai-picker-tab {
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.ai-picker-tab:hover {
  color: #3b82f6;
}

.ai-picker-tab.is-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.ai-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  background: #fafbfc;
}

.ai-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ai-picker-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
}

.ai-picker-item:hover {
  border-color: #2563eb;
  background: #eff6ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

.ai-picker-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ai-picker-item-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.ai-picker-item-meta {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.ai-picker-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.ai-picker-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* --- Liten "oppdatert"-puls på preview ved ny AI-generering --------------- */
@keyframes aiPreviewPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.ai-preview-section.is-updated {
  animation: aiPreviewPulse 1.2s ease-out;
}

/* --- Responsive: picker på mobil ------------------------------------------ */
@media (max-width: 640px) {
  .ai-picker-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .ai-empty-options {
    max-width: 100%;
  }
}

/* =============================================================================
   END AI COLLABORATION
   ============================================================================= */

/* ==========================================================================
   DARK MODE FIXES — 2026-04-20
   Rettelser basert på visuell gjennomgang. Alle regler additive; denne
   blokken kan slettes samlet for rollback uten å røre eksisterende dark-tokens.
   ========================================================================== */

/* 1. Header: <header>-element mangler dark override (eksisterende regel
   bruker .header-klasse som ikke finnes i DOM). Dette er kilden til den
   blå stripen — hele header hadde var(--primary). */
html[data-theme="dark"] header {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* 2. Notatmal-felt: demp grønt fyll.
   Eksisterende regel (linje ~977) bruker `background: linear-gradient(...)` og
   mørk-grønn tekst (#065f46) — derfor MÅ vi overstyre `background` (ikke bare
   background-color) og sette en lys-grønn tekst som er lesbar på mørk bg. */
html[data-theme="dark"] #instructionNameDisplay.instruction-selected {
    background: rgba(86, 211, 100, 0.12);
    border: 1px solid rgba(86, 211, 100, 0.45);
    color: #86efac;
    font-weight: 500;
}
html[data-theme="dark"] #instructionNameDisplay.instruction-selected::before {
    color: #86efac;
}

/* 3. Sidebar primær-knapper (tidligere lyseblå) — samme nivå som sekundære. */
html[data-theme="dark"] .sidebar-btn.fritekst-ki,
html[data-theme="dark"] .sidebar-btn.video-consult,
html[data-theme="dark"] .sidebar-btn.new-consult {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
html[data-theme="dark"] .sidebar-btn.fritekst-ki:hover,
html[data-theme="dark"] .sidebar-btn.video-consult:hover,
html[data-theme="dark"] .sidebar-btn.new-consult:hover {
    background-color: var(--bg-hover);
    border-color: rgba(74, 158, 255, 0.4);
}

/* 4. Kopier-knappen — demp fra mettet primær-blå. */
html[data-theme="dark"] #copyBtn.button.primary {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    box-shadow: none;
}
html[data-theme="dark"] #copyBtn.button.primary:hover {
    background-color: var(--bg-hover);
    border-color: rgba(74, 158, 255, 0.4);
}

/* 5. Placeholder — heve fra knapt-synlig til lesbar. */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* 6. Video post-it — dempet oker/varm mørk, beholder "notis"-personlighet. */
html[data-theme="dark"] .video-sticky-note {
    background: linear-gradient(135deg, #3a3020 0%, #433725 50%, #4a3d2a 100%);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.3),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .video-sticky-note::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
}
html[data-theme="dark"] .video-sticky-note-title { color: #d6b870; }
html[data-theme="dark"] .video-sticky-note-message { color: #b39a5a; }
html[data-theme="dark"] .video-sticky-note-close { color: #d6b870; }
html[data-theme="dark"] .video-sticky-note:hover {
    background: linear-gradient(135deg, #403426 0%, #493d29 50%, #514430 100%);
}

/* 7. Video stat-kort + pastell-ikoner — dempet. */
html[data-theme="dark"] .video-stat-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
}
html[data-theme="dark"] .video-stat-icon.blue {
    background: rgba(74, 158, 255, 0.15);
    color: #82b8ff;
}
html[data-theme="dark"] .video-stat-icon.orange {
    background: rgba(251, 146, 60, 0.15);
    color: #fdba74;
}

/* 8. Test utstyr-knappen (VideoLege header) — samme stil som Lukk VideoLege. */
html[data-theme="dark"] .video-header-settings-btn {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
html[data-theme="dark"] .video-header-settings-btn:hover {
    background-color: var(--bg-hover);
    border-color: rgba(74, 158, 255, 0.4);
}

/* 9. Video rom-rad — løfte kontrast på navn og meta. */
html[data-theme="dark"] .video-room-row {
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
}
html[data-theme="dark"] .video-room-row-name { color: var(--text-primary); }
html[data-theme="dark"] .video-room-row-meta { color: var(--text-muted); }

/* 11. Fritekst KI-modal header: eksisterende regel bruker
   var(--fritekst-primary) som bg (blå). Demp til dark-panel for å matche
   resten av dark-estetikken. */
html[data-theme="dark"] .fritekst-modal-container .fritekst-header {
    background: var(--bg-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .fritekst-modal-container .fritekst-header .modal-title,
html[data-theme="dark"] .fritekst-modal-container .fritekst-header .close {
    color: var(--text-primary);
}

/* 10. Print — tvinge lys bakgrunn uansett tema.
   Beskytter mot pasient-utskrift i dark mode (legeerklæring, notat). */
@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

/* ==========================================================================
   12. LEGEERKLÆRING MODAL — "Type dokument" seksjon
   Knappevalg for Enkel / Utvidet. Bruker tema-variabler fra :root slik at
   dark mode følger automatisk.
   ========================================================================== */
#legeerklaringModal .le-type-section {
    margin-top: 16px;
    margin-bottom: 8px;
}
#legeerklaringModal .le-type-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
#legeerklaringModal .le-type-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#legeerklaringModal .le-type-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--main-border-radius);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}
#legeerklaringModal .le-type-btn:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}
#legeerklaringModal .le-type-btn:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.25);
}
#legeerklaringModal .le-type-btn .material-icons {
    font-size: 22px;
    color: var(--primary);
    margin-bottom: 2px;
}
#legeerklaringModal .le-type-btn-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
#legeerklaringModal .le-type-btn-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}
#legeerklaringModal .le-type-btn.le-type-selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 1px var(--primary) inset;
}
#legeerklaringModal .le-type-btn.le-type-selected .le-type-btn-label {
    color: var(--primary-dark);
}
html[data-theme="dark"] #legeerklaringModal .le-type-btn.le-type-selected .le-type-btn-label {
    color: var(--text-primary);
}
html[data-theme="dark"] #legeerklaringModal .le-type-btn.le-type-selected .le-type-btn-desc {
    color: var(--text-secondary);
}

/* Signatur-hint i samme modal — kosmetisk polish så seksjonen under
   type-knappene ikke ser naken ut. */
#legeerklaringModal .le-signature-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    font-size: 0.8rem;
    color: var(--text-muted);
}
#legeerklaringModal .le-signature-hint .material-icons {
    font-size: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

/* ==========================================================================
   13. DIAGNOSTIKK-TAB I SETTINGS — "Send til utvikler"
   Klassene diag-* genereres i js/settings-service.js og hadde ingen CSS.
   ========================================================================== */
.diag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.diag-header-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.diag-header-title .material-icons {
    font-size: 15px;
    color: var(--primary);
}
.diag-btn-row {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.diag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.diag-btn .material-icons { font-size: 16px; }
.diag-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}
.diag-btn:disabled { opacity: 0.6; cursor: default; }
.diag-btn--send {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
}
.diag-btn--send:hover:not(:disabled) {
    filter: brightness(1.05);
    background: var(--primary);
    border-color: var(--primary);
}
.diag-btn--clear:hover:not(:disabled) {
    background: var(--status-recording-bg);
    border-color: var(--accent-error);
    color: var(--accent-error);
}

.diag-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}
.diag-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.diag-summary > span .material-icons { font-size: 16px; }
.diag-summary-errors--active {
    background: var(--status-recording-bg) !important;
    border-color: var(--accent-error) !important;
    color: var(--status-recording-text) !important;
}
.diag-summary-warns--active {
    background: var(--status-draft-bg) !important;
    border-color: var(--accent-warning) !important;
    color: var(--status-draft-text) !important;
}

.diag-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 14px 0 8px;
}

.diag-timeline-wrap { margin-bottom: 14px; }
.diag-timeline-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    max-height: 180px;
    overflow-y: auto;
}
.diag-tl-row {
    display: grid;
    grid-template-columns: 10px 70px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.diag-tl-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted);
}
.diag-tl-dot--ok   { background: var(--accent-success); }
.diag-tl-dot--warn { background: var(--accent-warning); }
.diag-tl-dot--err  { background: var(--accent-error); }
.diag-tl-time {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.diag-tl-label { color: var(--text-primary); }

.diag-log-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    max-height: 260px;
    overflow-y: auto;
}
.diag-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
}
.diag-log-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.8rem;
}
.diag-log-row .material-icons { font-size: 16px; color: var(--text-muted); margin-top: 1px; }
.diag-log-row--warn    { border-left: 3px solid var(--accent-warning); }
.diag-log-row--warning { border-left: 3px solid var(--accent-warning); }
.diag-log-row--error,
.diag-log-row--critical { border-left: 3px solid var(--accent-error); }
.diag-log-row--warn .material-icons,
.diag-log-row--warning .material-icons { color: var(--accent-warning); }
.diag-log-row--error .material-icons,
.diag-log-row--critical .material-icons { color: var(--accent-error); }

.diag-log-body { min-width: 0; }
.diag-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
}
.diag-log-time {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.diag-log-source {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    font-weight: 600;
    flex-shrink: 0;
}
.diag-log-message {
    color: var(--text-primary);
    word-break: break-word;
}
.diag-log-ctx {
    margin-top: 4px;
    padding: 4px 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
    word-break: break-all;
    white-space: pre-wrap;
}

.diag-footer {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}
/* =============================================================================
   QR-RECEIVE — mottak av rullerende QR-kode fra mobil via webkamera
   Alle klasser har qrrx- prefix for å unngå kollisjon.
   ============================================================================= */

/* BADGE i konsultasjonsliste — hentet-fra-mobil markør */
.consult-card-title .qrrx-source-icon {
    font-size: 16px;
    color: var(--primary);
    margin-right: 2px;
    vertical-align: text-bottom;
}

html[data-theme="dark"] .consult-card-title .qrrx-source-icon {
    color: var(--primary);
}

/* Modal-layout */
#mobileReceiveModal .modal-content {
    width: 92%;
    max-width: 760px;
    max-height: 92vh;
}

#mobileReceiveModal .modal-body {
    padding: 1.25rem 1.5rem;
}

.qrrx-stage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qrrx-stage.is-hidden {
    display: none;
}

/* Video + skanne-stadium */
.qrrx-video-wrap {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    aspect-ratio: 4 / 3;
    max-height: 52vh;
}

.qrrx-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qrrx-video-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrrx-reticle {
    width: 62%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    border: 2px dashed rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    transition: border-color 0.2s ease;
}

.qrrx-reticle.is-active {
    border-color: rgba(76, 175, 80, 0.9);
    border-style: solid;
}

.qrrx-status-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.qrrx-status-row .material-icons {
    font-size: 20px;
    color: var(--primary);
}

.qrrx-status-text {
    flex: 1;
    min-width: 0;
}

.qrrx-progress {
    height: 8px;
    width: 100%;
    background: var(--bg-hover);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.qrrx-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 999px;
    transition: width 0.15s ease-out;
}

.qrrx-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.qrrx-meta-hash {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.12em;
    color: var(--text-primary);
    background: var(--bg-hover);
    padding: 2px 8px;
    border-radius: 6px;
}

.qrrx-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 143, 0, 0.35);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.qrrx-hint.is-hidden {
    display: none;
}

.qrrx-hint .material-icons {
    font-size: 20px;
    color: #ff8f00;
    flex-shrink: 0;
}

.qrrx-error {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(211, 47, 47, 0.35);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--accent-error);
}

.qrrx-error.is-hidden {
    display: none;
}

.qrrx-error .material-icons {
    color: var(--accent-error);
    flex-shrink: 0;
}

/* Suksess-stadium — stor hash + liste over mottatte notater */
.qrrx-success-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem 1rem;
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.06), rgba(13, 71, 161, 0.04));
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.qrrx-success-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.qrrx-hash-display {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--primary);
    user-select: all;
}

html[data-theme="dark"] .qrrx-hash-display {
    color: var(--primary);
}

.qrrx-match-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.9rem;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.qrrx-match-row:hover {
    background: var(--bg-hover);
}

.qrrx-match-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
    margin: 0;
}

.qrrx-match-row label {
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    margin: 0;
}

/* Liste med mottatte notater */
.qrrx-notes-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.5rem 0 0.25rem;
}

.qrrx-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 32vh;
    overflow-y: auto;
    padding-right: 2px;
}

.qrrx-note-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: border-color 0.15s ease;
}

.qrrx-note-item:hover {
    border-color: var(--primary);
}

.qrrx-note-icon {
    font-size: 22px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.qrrx-note-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qrrx-note-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qrrx-note-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qrrx-note-preview {
    font-size: 0.85rem;
    color: var(--text-primary);
    opacity: 0.8;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* Footer / knapper */
#mobileReceiveModal .modal-footer {
    gap: 0.75rem;
}

#mobileReceiveModal .modal-footer .qrrx-footer-left {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Utility */
.qrrx-hidden {
    display: none !important;
}

/* =============================================================================
   FYLT INN — manglende klasser identifisert i CSS-audit 2026-05-03
   Legges til så lenge eldre dev-mappe ikke er blitt re-bundlet med kildefilene.
   Følger samme design-tokens som resten av bundle.css.
   ============================================================================= */


/* =============================================================================
   LEGEERKLÆRING-MODAL (le-*)
   Markup: index.html #legeerklaringModal
   JS: js/standalone-legeerklaring.js
   ============================================================================= */

#legeerklaringModal .modal-content {
    width: 92%;
    max-width: 760px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

#legeerklaringModal .modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}

.le-header-icon {
    font-size: 22px !important;
    margin-right: 0.5rem;
    color: var(--primary);
    vertical-align: text-bottom;
}

/* Steg-indikator */
.le-step-indicator {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 0 0.5rem;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
}

.le-step-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: background 0.2s ease, transform 0.2s ease;
}

.le-step-dot.le-step-active {
    background: var(--primary);
    transform: scale(1.3);
}

.le-step-dot.le-step-done {
    background: var(--accent-success);
}

/* Steg-containere */
.le-step-1,
.le-step-2,
.le-step-3,
.le-step-4 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.le-step-1.is-hidden,
.le-step-2.is-hidden,
.le-step-3.is-hidden,
.le-step-4.is-hidden {
    display: none;
}

/* Steg 1 — input */
.le-label-icon {
    font-size: 18px !important;
    vertical-align: text-bottom;
    margin-right: 0.25rem;
    color: var(--primary);
}

.le-instruction-textarea {
    width: 100%;
    min-height: 90px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: vertical;
    background: var(--bg-white);
    color: var(--text-primary);
}

.le-instruction-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}

/* «valgfritt»-merket paa grunnlagsfeltet: dempet, saa etiketten leses som ett
   uttrykk og feltet ikke ser ut som et krav legen maa oppfylle foer generering. */
.le-valgfri {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--bg-light, #f4f6f8);
    border-radius: 10px;
    padding: 1px 8px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* Kilde-linja: sier hva erklaeringen faktisk bygges paa. Naar det ikke finnes
   noe grunnlag i det hele tatt, farges den varsomt — ikke som en feil, for det
   er et lovlig valg, men tydelig nok til at legen ikke overser det. */
.le-kilde.le-kilde-tom {
    color: #92400e;
}
.le-kilde.le-kilde-tom .material-icons {
    color: #d97706;
}

/* Paste-area */
.le-paste-area {
    border: 2px dashed var(--border-medium);
    border-radius: var(--main-border-radius);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    background: var(--bg-light);
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.le-paste-area:hover,
.le-paste-area:focus {
    border-color: var(--primary);
    background: var(--primary-light);
    outline: none;
}

.le-paste-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
}

.le-paste-icon {
    font-size: 32px !important;
    color: var(--primary);
}

.le-paste-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.le-paste-subtext {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.le-paste-preview {
    position: relative;
    display: inline-block;
}

.le-paste-preview.is-hidden {
    display: none;
}

.le-paste-thumbnail {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--main-border-radius);
    box-shadow: var(--shadow-soft);
}

.le-paste-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--accent-error);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
}

.le-paste-remove:hover {
    transform: scale(1.08);
}

.le-paste-remove .material-icons {
    font-size: 18px !important;
}

/* Steg 2 — loading */
.le-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
}

.le-loading-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.le-loading-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Steg 3 — dokumentpreview (speiler PDF-layout) */
.le-doc {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-soft);
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    line-height: 1.5;
}

.le-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.le-doc-office {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.le-doc-office-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.le-doc-office-addr {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.le-doc-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.le-doc-hr {
    border: none;
    border-top: 1px solid var(--border-medium);
    margin: 0.5rem 0 1rem;
}

.le-doc-title {
    width: 100%;
    border: none;
    border-bottom: 1px dashed transparent;
    background: transparent;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin: 0.5rem 0 1rem;
    padding: 0.25rem;
}

.le-doc-title:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

.le-doc-patient {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.le-doc-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.le-doc-row.le-doc-gjelder {
    margin-bottom: 1rem;
}

.le-doc-label {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 90px;
    flex-shrink: 0;
}

.le-doc-value {
    flex: 1;
    border: none;
    border-bottom: 1px dashed transparent;
    background: transparent;
    font: inherit;
    color: var(--text-primary);
    padding: 0.15rem 0.25rem;
}

.le-doc-value:focus,
.le-doc-value:hover {
    outline: none;
    border-bottom-color: var(--border-medium);
    background: var(--bg-light);
}

.le-doc-value-short {
    flex: 0 0 130px;
    text-align: center;
}

.le-doc-til-sep {
    color: var(--text-muted);
    padding: 0 0.25rem;
}

.le-doc-body {
    width: 100%;
    min-height: 140px;
    border: 1px dashed var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 0.75rem;
    font: inherit;
    line-height: 1.55;
    resize: vertical;
    margin-bottom: 1.5rem;
    background: var(--bg-white);
    color: var(--text-primary);
}

.le-doc-body:focus {
    outline: none;
    border-color: var(--primary);
    border-style: solid;
}

.le-doc-signature {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 2rem;
    max-width: 280px;
}

.le-doc-sig-line {
    height: 0;
    border-top: 1px solid var(--text-secondary);
    margin-bottom: 0.4rem;
}

.le-doc-sig-name {
    font-weight: 700;
    color: var(--text-primary);
}

.le-doc-sig-title,
.le-doc-sig-office {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Steg 4 — resultat */
.le-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.le-result-icon {
    font-size: 56px !important;
    color: var(--accent-success);
}

.le-result-title {
    margin: 0.25rem 0;
    color: var(--text-primary);
}

.le-pdf-filename {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: var(--bg-light);
    padding: 0.4rem 0.75rem;
    border-radius: var(--main-border-radius);
    margin: 0.25rem 0;
}

.le-result-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Footer-rader (en per steg) */
.le-footer-step-1,
.le-footer-step-3,
.le-footer-step-4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
}

.le-footer-step-1.is-hidden,
.le-footer-step-3.is-hidden,
.le-footer-step-4.is-hidden {
    display: none;
}

.le-footer-step-3-right {
    display: flex;
    gap: 0.5rem;
}

/* Knapper — disse arver fra .button .primary/.secondary; trenger kun småjusteringer */
.le-generate-btn,
.le-back-btn,
.le-copy-btn,
.le-pdf-btn,
.le-new-btn,
.le-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.le-close-btn {
    cursor: pointer;
}

/* Mobil-tilpasning */
@media (max-width: 600px) {
    #legeerklaringModal .modal-content {
        width: 96%;
        max-height: 96vh;
    }
    .le-doc {
        padding: 1rem;
    }
    .le-doc-row {
        flex-wrap: wrap;
    }
    .le-doc-label {
        min-width: auto;
        flex-basis: 100%;
        font-size: 0.85rem;
    }
}


/* =============================================================================
   FORTSETT OPPTAK-LENKE (under responsbox)
   Markup: #continueRecordingBtn
   ============================================================================= */

.continue-recording-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0.4rem 0.65rem;
    background: transparent;
    border: 1px dashed var(--primary);
    border-radius: var(--main-border-radius);
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-style 0.15s ease;
    text-decoration: none;
    align-self: flex-start;
}

.continue-recording-link:hover {
    background: var(--primary-light);
    border-style: solid;
}

.continue-recording-link.is-hidden {
    display: none;
}

.continue-recording-link .material-icons {
    font-size: 18px !important;
}


/* =============================================================================
   OM-VERKTØYET-MODAL (about-*)
   Markup: index.html #aboutModal — MDR-konform produktidentifikasjon
   ============================================================================= */

.about-modal-content {
    width: 92%;
    max-width: 720px;
    max-height: 92vh;
}

.about-modal-body {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
}

.about-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
}

/* Produktheader med CE-merke */
.about-product-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-light), rgba(25, 118, 210, 0.04));
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    margin-bottom: 1.5rem;
}

.about-ce-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary-dark);
    flex-shrink: 0;
}

.about-ce-mark svg {
    width: 64px;
    height: 38px;
}

.about-ce-class {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-top: 2px;
}

.about-product-name h3 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.about-product-name p {
    margin: 0;
}

.about-version {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.about-classification {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem !important;
}

/* Section-overskrifter */
.about-section-heading {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.35rem;
}

/* Produktinfo-grid (definition list) */
.about-info-grid {
    display: grid;
    grid-template-columns: minmax(180px, max-content) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0;
}

.about-info-grid dt {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.about-info-grid dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.88rem;
    word-break: break-word;
}

.about-info-grid dd code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    background: var(--bg-light);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Vigilance- og sikkerhets-bokser */
.about-vigilance-box,
.about-security-box {
    margin: 1.25rem 0;
    padding: 0.85rem 1rem;
    border-radius: var(--main-border-radius);
    border: 1px solid var(--border-light);
}

.about-vigilance-box {
    background: rgba(255, 143, 0, 0.06);
    border-color: rgba(255, 143, 0, 0.3);
}

.about-security-box {
    background: rgba(211, 47, 47, 0.05);
    border-color: rgba(211, 47, 47, 0.3);
}

.about-vigilance-box h4,
.about-security-box h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.about-vigilance-box p,
.about-security-box p {
    margin: 0.4rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.about-vigilance-note {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    font-style: italic;
}

/* Dokumentlenker */
.about-doc-links {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.about-doc-links li a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.about-doc-links li a:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

.about-doc-links .material-icons {
    font-size: 18px !important;
}

.about-footer-note {
    margin-top: 1.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}


/* =============================================================================
   AGREEMENT-MODAL (agreement-*)
   Markup: index.html #agreementOverlay — vilkår/avtaler-godkjenning
   ============================================================================= */

/* Default: skjult. Vises kun når JS legger til .agreement-active.
   (agreement-service.js bruker classList.add/remove('agreement-active')) */
.agreement-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.agreement-overlay.agreement-active {
    display: flex;
}

.agreement-card {
    width: min(96vw, 600px);
    max-height: 92vh;
    background: var(--bg-white);
    border-radius: var(--modal-border-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.agreement-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    flex-shrink: 0;
}

.agreement-header-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px;
    flex-shrink: 0;
}

.agreement-header-text h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

.agreement-header-text p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.agreement-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
}

.agreement-body h3,
.agreement-body h4 {
    margin: 1rem 0 0.5rem;
    color: var(--text-primary);
}

.agreement-body p {
    margin: 0.5rem 0;
}

.agreement-body ul {
    padding-left: 1.25rem;
}

.agreement-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.agreement-footer-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.agreement-footer-info .material-icons {
    font-size: 16px !important;
}

.agreement-accept-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--main-border-radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.agreement-accept-btn:hover:not(:disabled) {
    background: var(--primary-dark);
}

.agreement-accept-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agreement-accept-btn .material-icons {
    font-size: 18px !important;
}


/* =============================================================================
   AUTH-LOGIN TOTP-OPPSETT (al-totp-intro-*, al-mobile-warning, al-spinner-large, al-auto-setup-spinner, al-setup-login-help)
   Markup: index.html — to-faktor-setup-flyt
   ============================================================================= */

.al-totp-intro-step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    margin: 0.75rem 0;
    text-align: left;
}

.al-totp-intro-step.al-totp-intro-step-muted {
    background: transparent;
    border-style: dashed;
    opacity: 0.85;
}

.al-totp-intro-step-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.al-totp-intro-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.al-totp-intro-step-desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.al-totp-intro-app-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.al-totp-intro-app-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    background: var(--bg-white);
    border: 1px solid var(--border-medium);
    border-radius: var(--main-border-radius);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.al-totp-intro-app-link:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.al-totp-intro-app-link .material-icons {
    font-size: 18px !important;
}

.al-mobile-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 143, 0, 0.08);
    border: 1px solid rgba(255, 143, 0, 0.4);
    border-radius: var(--main-border-radius);
    margin: 0.75rem 0;
    text-align: left;
}

.al-mobile-warning.is-hidden {
    display: none;
}

.al-mobile-warning .material-icons {
    color: #ff8f00;
    font-size: 22px !important;
    flex-shrink: 0;
}

.al-mobile-warning strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.al-mobile-warning p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.al-auto-setup-spinner {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.al-spinner-large {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: al-spin 0.8s linear infinite;
}

@keyframes al-spin {
    to { transform: rotate(360deg); }
}

.al-setup-login-help {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}


/* =============================================================================
   INTERPRETER-CONTAINER (interpreter-*) + tilhørende mini-klasser
   Markup: index.html #interpreterModal
   ============================================================================= */

.interpreter-container {
    width: 96vw;
    height: 90vh;
    max-width: 1400px;
    background: var(--bg-white);
    border-radius: var(--modal-border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-strong);
}

.interpreter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    flex-shrink: 0;
}

.interpreter-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
}

.interpreter-icon {
    font-size: 26px !important;
    color: #fff;
}

.interpreter-controls-left,
.interpreter-controls-center,
.interpreter-controls-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.interpreter-controls-center {
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.interpreter-lang-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--main-border-radius);
    color: #fff;
    font-size: 0.9rem;
}

.interpreter-mode-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
}

.interpreter-mode-wrapper label {
    color: inherit;
}

.interpreter-chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.interpreter-welcome-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: auto;
    color: var(--text-muted);
    text-align: center;
}

.interpreter-welcome-icon,
.interpreter-welcome-msg .material-icons {
    font-size: 56px !important;
    color: var(--primary);
}

.interpreter-welcome-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.5rem 0 0;
}

.interpreter-welcome-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.interpreter-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    align-items: center;
}

/* Tilhørende mikro-klasser brukt inni interpreter-footer */
.close-interpreter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: var(--main-border-radius);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.close-interpreter-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: var(--main-border-radius);
    cursor: pointer;
    transition: background 0.15s ease;
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.change-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: var(--main-border-radius);
    font-size: 0.82rem;
    cursor: pointer;
}

.change-lang-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.lang-flag {
    font-size: 1.1rem;
}

.lang-text {
    color: inherit;
}

.control-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-radius: var(--main-border-radius);
}

.control-zone.left {
    align-items: flex-start;
}

.control-zone.right {
    align-items: flex-end;
}

.indicator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.key-badge {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    padding: 2px 8px;
    border-radius: 4px;
}

.role-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.status-center {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.wave-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    margin-top: 0.25rem;
}

.wave-visualizer.hidden {
    visibility: hidden;
}

.wave-visualizer span {
    display: block;
    width: 4px;
    background: var(--primary);
    border-radius: 2px;
    animation: wave-bounce 0.9s ease-in-out infinite;
}

.wave-visualizer span:nth-child(1) { height: 30%; animation-delay: 0s; }
.wave-visualizer span:nth-child(2) { height: 60%; animation-delay: 0.1s; }
.wave-visualizer span:nth-child(3) { height: 90%; animation-delay: 0.2s; }
.wave-visualizer span:nth-child(4) { height: 60%; animation-delay: 0.3s; }
.wave-visualizer span:nth-child(5) { height: 30%; animation-delay: 0.4s; }

@keyframes wave-bounce {
    0%, 100% { transform: scaleY(0.5); }
    50%      { transform: scaleY(1); }
}


/* =============================================================================
   FRITEKST COMPLIANCE-RESULT (fritekst-compliance-*)
   Markup: index.html — vises etter prompt-validering
   ============================================================================= */

.fritekst-compliance-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--main-border-radius);
    background: rgba(46, 125, 50, 0.06);
    border: 1px solid rgba(46, 125, 50, 0.3);
    margin: 0.75rem 0;
}

.fritekst-compliance-result.fritekst-compliance-rejected {
    background: rgba(211, 47, 47, 0.06);
    border-color: rgba(211, 47, 47, 0.3);
}

.fritekst-compliance-hidden {
    display: none !important;
}

.fritekst-compliance-icon {
    flex-shrink: 0;
}

.fritekst-compliance-icon .material-icons {
    font-size: 24px !important;
    color: var(--accent-success);
}

.fritekst-compliance-result.fritekst-compliance-rejected .fritekst-compliance-icon .material-icons {
    color: var(--accent-error);
}

/* Spinner-animasjon for sync-ikonet i checking-state — uten dette står ikonet stille */
@keyframes fritekst-compliance-spin {
    to { transform: rotate(360deg); }
}
.fritekst-compliance-checking .fritekst-compliance-icon .material-icons {
    color: var(--text-secondary);
    animation: fritekst-compliance-spin 1s linear infinite;
}
.ai-regulatory-banner.is-checking .material-icons {
    animation: fritekst-compliance-spin 1s linear infinite;
}

.fritekst-compliance-body {
    flex: 1;
    min-width: 0;
}

.fritekst-compliance-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.fritekst-compliance-violations {
    font-size: 0.85rem;
    color: var(--accent-error);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.fritekst-compliance-violations ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

/* Strukturerte violation-kort (v3-format) — kategori-badge + sitat + forklaring + rewrite */
.fritekst-compliance-violation-item {
    margin: 0 0 0.75rem 0;
    padding: 0.7rem 0.85rem;
    background: rgba(211, 47, 47, 0.05);
    border-left: 3px solid var(--accent-error);
    border-radius: 4px;
    color: var(--text-primary);
}
.fritekst-compliance-violation-item:last-child {
    margin-bottom: 0;
}
.fritekst-compliance-violation-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.45rem;
    border-radius: 3px;
    background: var(--border-light, #d0d0d0);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.fritekst-compliance-violation-category.severity-high {
    background: var(--accent-error);
    color: #fff;
}
.fritekst-compliance-violation-category.severity-medium {
    background: #f59e0b;
    color: #fff;
}
.fritekst-compliance-violation-category strong {
    font-weight: 700;
    font-size: 0.8rem;
}
.fritekst-compliance-violation-severity {
    font-weight: 700;
    letter-spacing: 0.04em;
}
.fritekst-compliance-violation-quote {
    font-style: italic;
    background: rgba(0, 0, 0, 0.04);
    padding: 0.4rem 0.6rem;
    margin: 0.35rem 0;
    border-radius: 3px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-break: break-word;
}
.fritekst-compliance-violation-explanation {
    margin: 0.4rem 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.fritekst-compliance-violation-rewrite {
    background: rgba(76, 175, 80, 0.09);
    border-left: 2px solid #4caf50;
    padding: 0.45rem 0.6rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.5;
    border-radius: 0 3px 3px 0;
    color: var(--text-primary);
}
.fritekst-compliance-violation-rewrite strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #2e7d32;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Anvend-knapp per brudd og "Anvend alle"-batch-knapp på toppen */
.fritekst-compliance-apply-btn {
    margin-top: 0.55rem;
    padding: 0.35rem 0.85rem;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fritekst-compliance-apply-btn:hover:not(:disabled) {
    background: #1b5e20;
}
.fritekst-compliance-apply-btn:disabled {
    background: var(--border-light, #d0d0d0);
    color: var(--text-secondary);
    cursor: default;
}
.fritekst-compliance-apply-btn.is-applied {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

.fritekst-compliance-apply-warn {
    margin-top: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: rgba(245, 158, 11, 0.1);
    border-left: 2px solid #f59e0b;
    border-radius: 0 3px 3px 0;
    color: #b45309;
    font-size: 0.78rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}
.fritekst-compliance-apply-warn-reason {
    color: inherit;
}
.fritekst-compliance-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    background: #fff;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.fritekst-compliance-jump-btn:hover {
    background: #f59e0b;
    color: #fff;
}
.fritekst-compliance-jump-btn .material-icons {
    font-size: 1rem;
}

.fritekst-compliance-violation-applied {
    opacity: 0.55;
}
.fritekst-compliance-violation-applied .fritekst-compliance-violation-quote,
.fritekst-compliance-violation-applied .fritekst-compliance-violation-rewrite {
    background: rgba(0, 0, 0, 0.025);
}

.fritekst-compliance-apply-all-wrapper {
    margin: 0 0 0.85rem 0;
    padding: 0.55rem 0.7rem;
    background: rgba(76, 175, 80, 0.06);
    border: 1px dashed #4caf50;
    border-radius: 4px;
    display: flex;
    justify-content: flex-end;
}
.fritekst-compliance-apply-all-btn {
    padding: 0.4rem 1rem;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fritekst-compliance-apply-all-btn:hover:not(:disabled) {
    background: #1b5e20;
}
.fritekst-compliance-apply-all-btn:disabled {
    background: var(--border-light, #d0d0d0);
    color: var(--text-secondary);
    cursor: default;
}
.fritekst-compliance-apply-all-btn.is-applied {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

/* Actions-rad: «Anvend alle» til venstre, «Valider på nytt» til høyre */
.fritekst-compliance-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0 0 0.85rem 0;
    padding: 0.55rem 0.7rem;
    background: rgba(76, 175, 80, 0.06);
    border: 1px dashed #4caf50;
    border-radius: 4px;
    flex-wrap: wrap;
}
.fritekst-compliance-actions-spacer {
    flex: 1;
}

/* «Valider på nytt» — distinkt blå, ikke grønn som anvend-knappene, så legen ser
   at det er en separat, eksplisitt handling (ikke en «godkjenn»-knapp). */
.fritekst-compliance-revalidate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    background: #1565c0;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fritekst-compliance-revalidate-btn:hover:not(:disabled) {
    background: #0d47a1;
}
.fritekst-compliance-revalidate-btn:disabled {
    background: var(--border-light, #d0d0d0);
    color: var(--text-secondary);
    cursor: default;
}
.fritekst-compliance-revalidate-btn .material-icons {
    font-size: 1.05rem;
    line-height: 1;
}
/* Når panelet er stale, fremhev revalidate-knappen visuelt med subtil puls-effekt */
.fritekst-compliance-result.is-stale .fritekst-compliance-revalidate-btn {
    animation: fritekst-compliance-revalidate-pulse 2s ease-in-out infinite;
}
@keyframes fritekst-compliance-revalidate-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(21, 101, 192, 0); }
}

/* Stale-banner: vises kun når compliance-resultatet har is-stale-klassen */
.fritekst-compliance-stale-banner {
    display: none;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.7rem 0;
    padding: 0.55rem 0.7rem;
    background: rgba(245, 158, 11, 0.10);
    border-left: 3px solid #f59e0b;
    border-radius: 3px;
    font-size: 0.85rem;
    color: var(--text-primary, #222);
    line-height: 1.4;
}
.fritekst-compliance-stale-banner .material-icons {
    font-size: 1.1rem;
    color: #b45309;
    flex-shrink: 0;
    margin-top: 1px;
}
.fritekst-compliance-result.is-stale .fritekst-compliance-stale-banner {
    display: flex;
}
/* Demp bruddkortene litt når innholdet er endret — de er ikke nødvendigvis
   relevante lenger før neste validering. */
.fritekst-compliance-result.is-stale .fritekst-compliance-violation-item {
    opacity: 0.7;
}

.fritekst-compliance-suggestion {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border-light);
    line-height: 1.45;
}


/* =============================================================================
   TIL PASIENT-MODAL — wrapper-klasse (tp-modal)
   ============================================================================= */

.tp-modal .modal-content {
    width: 92%;
    max-width: 700px;
    max-height: 92vh;
}


/* =============================================================================
   SMÅ KOMPONENTER — wallet, welcome, journal-upload, header-logo
   ============================================================================= */

/* Wallet-status-ikon i header */
.wallet-status-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 6px;
}

.wallet-status-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Velkomstmodal (Facebook-velkomst etc.) */
.welcome-modal-content {
    width: 92%;
    max-width: 520px;
}

/* Journaloppsummering-upload-section */
.journaloppsummering-upload-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    border: 2px dashed var(--border-medium);
    border-radius: var(--main-border-radius);
    background: var(--bg-light);
}

/* Header-logo-link */
.header-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}


/* =============================================================================
   FORMGRUPPER (additional-text-group, patient-group, instruction-group, instruction-actions)
   Layout-containere — definert eksplisitt for å unngå browser-default
   ============================================================================= */

.additional-text-group,
.patient-group,
.instruction-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.instruction-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.icon-small {
    font-size: 16px !important;
}


/* =============================================================================
   TOGGLE-SWITCH (switch-label + slider round) — interpreter modus-bryter etc.
   Standard iOS-stil checkbox-bryter.
   ============================================================================= */

.switch-label {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch-label input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--border-medium);
    transition: background-color 0.25s ease;
}

.slider.round {
    border-radius: 24px;
}

.slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch-label input[type="checkbox"]:checked + .slider {
    background-color: var(--primary);
}

.switch-label input[type="checkbox"]:checked + .slider::before {
    transform: translateX(20px);
}

.switch-label input[type="checkbox"]:focus-visible + .slider {
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
}


/* =============================================================================
   KONSULTASJONSTIMER (fk-takst-timer) — pill i header som viser konsultasjonstid
   ============================================================================= */

.fk-takst-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: var(--status-recording-bg);
    color: var(--status-recording-text);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(183, 28, 28, 0.25);
    transition: opacity 0.2s ease;
}

.fk-takst-timer.is-hidden {
    display: none;
}

.fk-takst-timer .material-icons {
    font-size: 16px !important;
    color: inherit;
}

.fk-takst-timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-error);
    animation: fk-takst-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes fk-takst-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.15); }
}

.fk-takst-timer-value {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: inherit;
}


/* =============================================================================
   NOTIFICATION-IKON — ikon-container i toast-melding (bundle.css har .notification men ikke .notification-icon)
   ============================================================================= */

.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.notification-icon .material-icons {
    font-size: 20px !important;
}


/* =============================================================================
   FRITEKST PASTE-BTN TEKST — span inni "Lim kontekst"-knappen
   ============================================================================= */

.fritekst-paste-btn-text {
    display: inline-block;
}

/* =============================================================================
 * VIDEO INCIDENT FEIL-MODAL (kifm- = KI-verktøy Feil-Modal)
 * Lege-vennlig forklaring etter mislykket videosamtale.
 * Brukt av video-incident-modal.js og video-service.js (reopen-knapp).
 * Klasse-prefiks `kifm-` valgt fordi det ikke kolliderer med eksisterende
 * klasser i bundle.css (verifisert med grep ved oppretting).
 * ============================================================================= */

.kifm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Må ligge OVER .video-rating-view (z-index 10002) ellers er modal-en usynlig
       bak rating-skjermens fullskjerm-gradient. Bruker 100001 — én over
       confirm-dialog (100000) slik at incident-modal alltid kommer øverst. */
    z-index: 100001;
    padding: 20px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.kifm-overlay.kifm-hidden {
    display: none;
}

.kifm-modal-open {
    overflow: hidden;
}

.kifm-dialog {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 520px;
    width: 100%;
    padding: 28px 28px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;
    outline: none;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .kifm-dialog {
        padding: 20px 18px 18px;
        border-radius: 10px;
    }
}

.kifm-dialog.kifm-severity-warning {
    border-top: 4px solid #f59e0b;
}

.kifm-dialog.kifm-severity-error {
    border-top: 4px solid #dc2626;
}

.kifm-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #ffffff;
    line-height: 1;
}

.kifm-severity-warning .kifm-icon {
    background: #f59e0b;
}

.kifm-severity-error .kifm-icon {
    background: #dc2626;
}

.kifm-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
    color: #0f172a;
}

.kifm-body {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 18px;
    color: #334155;
}

.kifm-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.kifm-section.kifm-hidden {
    display: none;
}

.kifm-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 6px;
}

.kifm-section-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #1f2937;
}

.kifm-message-box {
    background: #eff6ff;
    border-color: #bfdbfe;
    position: relative;
}

.kifm-message-text {
    color: #1e3a8a;
    white-space: pre-wrap;
}

.kifm-copy-btn {
    margin-top: 10px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.kifm-copy-btn:hover {
    background: #1d4ed8;
}

.kifm-copy-btn.kifm-copy-btn-done {
    background: #16a34a;
}

.kifm-copy-confirm {
    margin-left: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #16a34a;
}

.kifm-copy-confirm.kifm-hidden {
    display: none;
}

.kifm-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.kifm-dismiss-btn {
    background: #1f2937;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.kifm-dismiss-btn:hover {
    background: #0f172a;
}

/* Send-rapport-knapp i incident-modal. Sender enriched diagnostic-report
 * via Firebase support-chat — wrapper rundt sendDiagnosticReport. */
.kifm-send-report-btn {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-right: auto;  /* dytter Send til venstre, "OK, lukk" til høyre */
}

.kifm-send-report-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.kifm-send-report-btn:disabled {
    cursor: default;
    opacity: 0.85;
}

.kifm-send-status {
    font-size: 13px;
    color: #475569;
    flex-basis: 100%;
    margin-top: 4px;
    line-height: 1.4;
}

.kifm-send-status.kifm-send-status-success {
    color: #15803d;
}

.kifm-send-status.kifm-send-status-error {
    color: #b91c1c;
}

/* "Hva gikk galt?"-knapp på rating-skjermen — kalles inn av video-service.js
 * når en samtale endte i feil, slik at legen kan re-åpne feil-modalen.
 */
.kifm-reopen-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.kifm-reopen-btn:hover {
    background: #fde68a;
    border-color: #f59e0b;
}

.kifm-reopen-btn.kifm-severity-error {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.kifm-reopen-btn.kifm-severity-error:hover {
    background: #fecaca;
    border-color: #dc2626;
}

@media (prefers-color-scheme: dark) {
    .kifm-dialog {
        background: #1e293b;
        color: #e2e8f0;
    }
    .kifm-title {
        color: #f1f5f9;
    }
    .kifm-body {
        color: #cbd5e1;
    }
    .kifm-section {
        background: #0f172a;
        border-color: #334155;
    }
    .kifm-section-label {
        color: #94a3b8;
    }
    .kifm-section-text {
        color: #e2e8f0;
    }
    .kifm-message-box {
        background: #1e3a5f;
        border-color: #1e40af;
    }
    .kifm-message-text {
        color: #bfdbfe;
    }
    .kifm-dismiss-btn {
        background: #475569;
    }
    .kifm-dismiss-btn:hover {
        background: #334155;
    }
    .kifm-reopen-btn {
        background: #422006;
        color: #fbbf24;
        border-color: #92400e;
    }
    .kifm-reopen-btn:hover {
        background: #5a2c08;
    }
}

/* ============================================================
   SEKRETÆRER TAB (settings)
   Lege administrerer egne sekretær-grants. CSP-safe — kun klasser.
   ============================================================ */
.sec-invite-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 6px;
}
.sec-invite-row input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-white);
  color: var(--text-primary);
  transition: border-color 0.15s;
}
.sec-invite-row input[type="email"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}
.sec-invite-row .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.sec-invite-row .btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
}
.sec-invite-row .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sec-invite-row .btn-primary .material-icons {
  font-size: 18px;
}

.sec-invite-error {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ffebee;
  color: #c62828;
  font-size: 13px;
  border-left: 3px solid #c62828;
}

.sec-list-status {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 4px;
}

.sec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

.sec-item-info {
  flex: 1;
  min-width: 0;
}

.sec-item-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.sec-item-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-item-email {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-item-granted {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  opacity: 0.85;
}

.sec-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.sec-status-pending {
  background: #fff8e1;
  color: #f57c00;
  border: 1px solid #ffe082;
}

.sec-status-active {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.sec-item-pending {
  opacity: 0.92;
  background: #fffaed;
}

.sec-item .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 7px 14px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.sec-item .btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover, var(--bg-light));
  border-color: var(--border-medium);
}
.sec-item .btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sec-item .btn-secondary .material-icons {
  font-size: 16px;
}

@media (max-width: 540px) {
  .sec-invite-row {
    flex-direction: column;
  }
  .sec-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .sec-item .btn-secondary {
    align-self: flex-end;
  }
}

/* Dark mode: dempe de hardkodede badge-fargene så de ikke skriker */
html[data-theme="dark"] .sec-invite-error {
  background: #3a1a1a;
  color: #ff8a80;
  border-left-color: #ff5252;
}
html[data-theme="dark"] .sec-status-pending {
  background: #3a2e15;
  color: #ffcc80;
  border-color: #5d4a1f;
}
html[data-theme="dark"] .sec-status-active {
  background: #1b3320;
  color: #a5d6a7;
  border-color: #2e5a36;
}
html[data-theme="dark"] .sec-item-pending {
  background: #261f10;
}

/* ============================================================
   SIGNATUR-FANE (settings → signature)
   Klassene er prefiksed .settingssign-* for å unngå kollisjoner.
   ============================================================ */
.settingssign-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
  margin: 12px 0 16px;
  padding: 16px;
  background: var(--bg-light);
  border: 1px dashed var(--border-medium);
  border-radius: 10px;
}
.settingssign-preview-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  max-width: 100%;
}
.settingssign-img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  height: auto;
  object-fit: contain;
}
.settingssign-empty {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}
.settingssign-empty .material-icons {
  font-size: 36px;
  opacity: 0.5;
}
.settingssign-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.settingssign-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.settingssign-upload:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25);
}
.settingssign-upload .material-icons {
  font-size: 18px;
}
.settingssign-fileinput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.settingssign-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: var(--accent-error, #c62828);
  border: 1px solid var(--accent-error, #c62828);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.settingssign-delete:hover {
  background: var(--accent-error, #c62828);
  color: #fff;
}
.settingssign-delete .material-icons {
  font-size: 18px;
}

/* ============================================================
   TAKST-FANE (settings → takst)
   Klassene er prefiksed .fk-takst-* for å unngå kollisjoner.
   Dark-mode overrides for -toggle-row og -beta-notice finnes
   allerede i bundle.css:10626 og :10633.
   ============================================================ */
.fk-takst-beta-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

.fk-takst-beta-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-left: 3px solid #f9a825;
  border-radius: 8px;
  color: #5d4037;
  font-size: 13px;
  line-height: 1.45;
}
.fk-takst-beta-notice .material-icons {
  font-size: 20px;
  color: #f9a825;
  flex-shrink: 0;
  margin-top: 1px;
}
.fk-takst-beta-notice strong {
  display: block;
  margin-bottom: 2px;
  color: #4e342e;
}
.fk-takst-beta-notice p {
  margin: 0;
}

.fk-takst-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}
.fk-takst-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.fk-takst-toggle-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
}
.fk-takst-toggle-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* iOS-stil toggle-switch */
.fk-takst-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.fk-takst-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fk-takst-slider {
  position: absolute;
  inset: 0;
  background: var(--border-medium, #bdbdbd);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.fk-takst-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.fk-takst-switch input:checked + .fk-takst-slider {
  background: var(--primary);
}
.fk-takst-switch input:checked + .fk-takst-slider::before {
  transform: translateX(20px);
}
.fk-takst-switch input:focus-visible + .fk-takst-slider {
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.35);
}
.fk-takst-switch input:disabled + .fk-takst-slider {
  opacity: 0.55;
  cursor: not-allowed;
}

.fk-takst-hint-spacing {
  margin-top: 14px;
}

/* Dark-mode tilpassinger for de hardkodede beta-/badge-fargene */
html[data-theme="dark"] .fk-takst-beta-badge {
  background: #3a2a10;
  color: #ffb74d;
  border-color: #5a3f17;
}
html[data-theme="dark"] .fk-takst-beta-notice {
  /* Bakgrunn/border styres av eksisterende dark-rule på linje 10633.
     Vi overstyrer kun tekstfargen for lesbarhet. */
  color: var(--text-secondary);
}
html[data-theme="dark"] .fk-takst-beta-notice strong {
  color: var(--text-primary);
}
html[data-theme="dark"] .fk-takst-beta-notice .material-icons {
  color: #ffb74d;
}
html[data-theme="dark"] .fk-takst-slider {
  background: var(--border-medium);
}

/* =============================================================================
   2CD-TELLER — konsultasjonsmåling, justeringspopover og settings-preview
   Ligger samlet nederst i bundle.css for CSP: ingen inline-stiler.
   ============================================================================= */

.fk-consultation-metrics {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  min-width: 0;
}

.fk-consultation-metrics .fk-takst-timer {
  min-height: 34px;
  padding: 0.35rem 0.7rem;
  box-shadow: 0 1px 2px rgba(183, 28, 28, 0.08);
}

.fk-takst-timer--paused {
  background: #fff8e1;
  color: #8a5a00;
  border-color: rgba(255, 143, 0, 0.28);
}

.fk-takst-timer--paused .fk-takst-timer-dot {
  background: var(--accent-warning);
  animation-play-state: paused;
}

.fk-takst-timer--stopped {
  background: var(--bg-light);
  color: var(--text-secondary);
  border-color: var(--border-light);
}

.fk-takst-timer--stopped .fk-takst-timer-dot {
  background: var(--text-muted);
  animation: none;
}

.fk-2cd-counter {
  appearance: none;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.34rem 0.62rem 0.34rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-white);
  color: var(--text-muted);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 160ms ease;
}

.fk-2cd-counter:hover {
  border-color: var(--border-medium);
  background: var(--bg-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09);
}

.fk-2cd-counter:active {
  transform: translateY(0);
}

.fk-2cd-counter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.22);
}

.fk-2cd-counter.is-active {
  color: var(--primary-dark);
  background: var(--primary-light);
  border-color: rgba(25, 118, 210, 0.38);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
}

.fk-2cd-counter.is-active:hover {
  border-color: var(--primary);
  box-shadow: 0 5px 16px rgba(25, 118, 210, 0.18);
}

.fk-2cd-counter-code {
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.025em;
}

.fk-2cd-counter-divider {
  align-self: stretch;
  width: 1px;
  min-height: 16px;
  background: currentColor;
  opacity: 0.2;
}

.fk-2cd-counter-count {
  min-width: 1.65rem;
  color: inherit;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.fk-2cd-counter-edit {
  display: none;
  margin-left: -0.12rem;
  font-size: 13px !important;
  opacity: 0.72;
}

.fk-2cd-counter.is-manual .fk-2cd-counter-edit {
  display: inline-block;
}

.fk-2cd-counter.is-manual {
  border-style: dashed;
}

.fk-2cd-counter.is-paused,
.fk-2cd-counter.is-stopped {
  box-shadow: none;
}

.fk-2cd-counter.is-bumping {
  animation: fk-2cd-count-bump 420ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes fk-2cd-count-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.09); box-shadow: 0 5px 18px rgba(25, 118, 210, 0.24); }
  100% { transform: scale(1); }
}

.fk-2cd-popover {
  position: absolute;
  z-index: 1500;
  top: calc(100% + 0.7rem);
  left: 0;
  width: 342px;
  max-width: calc(100vw - 2rem);
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: var(--bg-white);
  color: var(--text-primary);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.18),
    0 3px 10px rgba(15, 23, 42, 0.08);
  transform-origin: top left;
  animation: fk-2cd-popover-in 150ms ease-out;
}

.fk-2cd-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 82px;
  width: 12px;
  height: 12px;
  background: var(--bg-white);
  border-left: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  transform: rotate(45deg);
}

@keyframes fk-2cd-popover-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fk-2cd-popover-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.fk-2cd-popover-eyebrow {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fk-2cd-popover-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.fk-2cd-popover-close {
  appearance: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: -0.2rem -0.2rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.fk-2cd-popover-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.fk-2cd-popover-close:focus-visible,
.fk-2cd-stepper button:focus-visible,
.fk-2cd-reset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.22);
}

.fk-2cd-popover-close .material-icons {
  font-size: 19px !important;
}

.fk-2cd-popover-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}

.fk-2cd-popover-summary > div {
  min-width: 0;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 11px;
  background: var(--bg-light);
}

.fk-2cd-popover-summary span {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 550;
}

.fk-2cd-popover-summary strong {
  display: block;
  color: var(--text-primary);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.fk-2cd-stepper-label {
  margin: 0 0 0.42rem;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 650;
}

.fk-2cd-stepper {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  overflow: hidden;
  height: 46px;
  border: 1px solid rgba(25, 118, 210, 0.35);
  border-radius: 12px;
  background: var(--primary-light);
}

.fk-2cd-stepper button {
  appearance: none;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  cursor: pointer;
  transition: background-color 140ms ease;
}

.fk-2cd-stepper button:first-child {
  border-right: 1px solid rgba(25, 118, 210, 0.18);
}

.fk-2cd-stepper button:last-child {
  border-left: 1px solid rgba(25, 118, 210, 0.18);
}

.fk-2cd-stepper button:hover:not(:disabled) {
  background: rgba(25, 118, 210, 0.1);
}

.fk-2cd-stepper button:disabled {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.45;
}

.fk-2cd-stepper button .material-icons {
  font-size: 20px !important;
}

.fk-2cd-stepper output {
  color: var(--primary-dark);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.18rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.fk-2cd-reset {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.65rem auto 0;
  padding: 0.36rem 0.58rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.fk-2cd-reset:hover {
  background: var(--primary-light);
}

.fk-2cd-reset .material-icons {
  font-size: 16px !important;
}

.fk-2cd-popover-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding: 0.68rem 0.72rem;
  border-radius: 10px;
  background: var(--bg-light);
  color: var(--text-secondary);
}

.fk-2cd-popover-rule .material-icons {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--primary);
  font-size: 17px !important;
}

.fk-2cd-popover-rule p,
.fk-2cd-popover-footnote {
  margin: 0;
  font-size: 0.73rem;
  line-height: 1.45;
}

.fk-2cd-popover-footnote {
  margin-top: 0.62rem;
  color: var(--text-muted);
}

/* Settings-kort */
.fk-2cd-settings-card {
  overflow: hidden;
  margin-bottom: 1.4rem;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--bg-white);
  box-shadow: var(--shadow-soft);
}

.fk-2cd-settings-visual {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border-light);
  background:
    radial-gradient(circle at 28% 15%, rgba(25, 118, 210, 0.09), transparent 44%),
    var(--bg-light);
}

.fk-2cd-settings-visual > .material-icons {
  color: var(--status-recording-text);
  font-size: 18px !important;
}

.fk-2cd-settings-time,
.fk-2cd-settings-preview {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
}

.fk-2cd-settings-time {
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(183, 28, 28, 0.22);
  background: var(--status-recording-bg);
  color: var(--status-recording-text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.fk-2cd-settings-preview {
  gap: 0.48rem;
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(25, 118, 210, 0.34);
  background: var(--primary-light);
  color: var(--primary-dark);
}

.fk-2cd-settings-preview strong {
  padding-left: 0.48rem;
  border-left: 1px solid rgba(25, 118, 210, 0.2);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.fk-2cd-settings-toggle {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--bg-white);
}

.fk-2cd-settings-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.78rem 1rem 0.9rem;
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.fk-2cd-settings-rule > .material-icons {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--primary);
  font-size: 18px !important;
}

.fk-2cd-settings-rule strong {
  display: block;
  margin-bottom: 0.16rem;
  color: var(--text-primary);
  font-size: 0.78rem;
}

.fk-2cd-settings-rule p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.48;
}

.fk-takst-section-divider {
  height: 1px;
  margin: 0.35rem 0 1.25rem;
  background: var(--border-light);
}

html[data-theme="dark"] .fk-takst-timer--paused {
  background: #33270e;
  color: #f6c453;
  border-color: #5d471a;
}

html[data-theme="dark"] .fk-2cd-counter {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .fk-2cd-counter.is-active {
  border-color: rgba(74, 158, 255, 0.42);
  box-shadow: 0 2px 10px rgba(74, 158, 255, 0.12);
}

html[data-theme="dark"] .fk-2cd-popover {
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.48),
    0 3px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  .fk-consultation-metrics {
    align-self: flex-start;
    flex-wrap: nowrap;
  }

  .fk-2cd-popover {
    width: min(342px, calc(100vw - 2rem));
  }
}

@media (max-width: 420px) {
  .fk-2cd-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    transform: translate(-50%, -50%);
    transform-origin: center;
    animation: fk-2cd-popover-mobile-in 160ms ease-out;
  }

  .fk-2cd-popover::before {
    display: none;
  }

  @keyframes fk-2cd-popover-mobile-in {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fk-2cd-counter,
  .fk-2cd-stepper button {
    transition: none;
  }

  .fk-2cd-counter.is-bumping,
  .fk-2cd-popover {
    animation: none;
  }
}

/* ============================================================
   MÅLFORM-FANE (settings → language)
   .sfield-row / -label / -select er settingsspesifikke. Scopet
   til #settingsContent for å garantere null kollisjoner.
   ============================================================ */
#settingsContent .sfield-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#settingsContent .sfield-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 80px;
}
#settingsContent .sfield-select {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: auto;
}
#settingsContent .sfield-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

/* ============================================================
   DIAGNOSTIKK-FANE (settings → diagnostics)
   Bare .diag-tab-badge mangler base — alt annet er allerede i
   bundle.css fra og med linje 30460.
   ============================================================ */
.diag-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  background: var(--accent-error, #d32f2f);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* ==========================================================================
   FAVORITT-LASTER (pk-fav-*) — Spinner i notatmal-dropdown
   Vises mens getFavoriteInstructions() henter fra Hetzner (~1-2 s round-trip).
   Erstatter tidligere atferd der hele dropdown var usynlig under API-kallet.
   ========================================================================== */

.pk-fav-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
  user-select: none;
  cursor: default;
}

.pk-fav-loading-spinner {
  font-size: 18px;
  color: var(--primary);
  animation: pk-fav-spin 1s linear infinite;
}

.pk-fav-loading-failed {
  color: var(--danger, #c0392b);
  font-style: normal;
}

.pk-fav-loading-error {
  animation: none;
  color: var(--danger, #c0392b);
}

@keyframes pk-fav-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================ */
/* TIL MOTTAKER — hover-dropdown (action-bar split-button)      */
/* ============================================================ */
.action-btn-dropdown {
  position: relative;
  display: inline-block;
}
.action-btn-dropdown .action-btn-caret {
  font-size: 18px;
  margin-left: -2px;
  opacity: 0.7;
}
.action-btn-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px;
  background: var(--bg-white);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  padding: 6px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.18s, opacity 0.18s ease, transform 0.18s ease;
  z-index: 1000;
}
.action-btn-dropdown:hover .action-btn-menu,
.action-btn-dropdown:focus-within .action-btn-menu,
.action-btn-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.action-btn-menu::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 10px;
}
.action-btn-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font: inherit;
}
.action-btn-menu-item:hover,
.action-btn-menu-item:focus {
  background: rgba(0, 122, 255, 0.08);
  outline: none;
}
.action-btn-menu-item .material-icons {
  color: var(--accent-color, #007aff);
  font-size: 22px;
}
.action-btn-menu-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.3;
}
.action-btn-menu-text strong {
  font-size: 0.95em;
  font-weight: 600;
}
.action-btn-menu-text small {
  font-size: 0.8em;
  opacity: 0.65;
  margin-top: 2px;
}
.action-btn-dropdown .action-btn:disabled + .action-btn-menu,
.action-btn-dropdown:has(.action-btn:disabled) .action-btn-menu {
  display: none;
}

/* Skjul språkvalg når mottaker ikke er pasient */
#tpLanguageWrap.is-hidden {
  display: none;
}

/* ============================================================ */
/* HENVISNINGSMODAL — VISUELL POLERING (overrides nederst)      */
/* Alt strict prefiksert til .refm- eller #createReferralModal  */
/* for å unngå konflikter med øvrig CSS i bundle.css.           */
/* ============================================================ */

/* Modal-container — gi litt mer luft og premium-følelse */
#createReferralModal .modal-content.refmodal-fullscreen {
  max-width: 1280px;
  width: 95vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22), 0 4px 16px rgba(15, 23, 42, 0.08);
}

#createReferralModal .modal-header {
  background: linear-gradient(135deg, var(--primary, #1976d2) 0%, var(--primary-dark, #0d47a1) 100%);
  color: #fff;
  padding: 16px 22px;
  border-bottom: none;
  flex-shrink: 0;
}
#createReferralModal .modal-header .modal-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
#createReferralModal .modal-header .modal-title .material-icons {
  font-size: 24px;
  opacity: 0.95;
}
#createReferralModal .modal-header .close {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
#createReferralModal .modal-header .close:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Stepper — løft litt, krapere fokus */
.refm-stepper {
  background: #f8fafc;
  border-bottom: 1px solid #e6ecf3;
  padding: 14px 28px;
}
.refm-step-num {
  width: 28px;
  height: 28px;
  font-size: 0.82rem;
  border-width: 2px;
  background: #fff;
  border-color: #d6dee8;
  color: #6b7a8e;
}
.refm-step-label {
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.refm-step.is-active .refm-step-num {
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.14);
}
.refm-step-line {
  width: 56px;
  height: 2px;
  background: #e2e8f0;
  margin: 0 0.85rem;
}

/* Body-grid — to paneler: oppsett + resultat */
.refm-body {
  grid-template-columns: minmax(380px, 440px) 1fr;
  background: #f1f5f9;
  gap: 1px;
}

/* Panels — kort med myk skygge */
.refm-panel {
  background: #fff;
}
.refm-panel-header {
  padding: 14px 18px 10px;
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
  border-bottom: 1px solid #eaeff5;
}
.refm-panel-label {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: #6b7a8e;
}

/* LEFT — søkefelt løftet */
.refm-search {
  padding: 12px 14px 6px;
}
.refm-search-input {
  height: 40px;
  border: 1.5px solid #e2e8f0 !important;
  background: #fafbfd !important;
  font-size: 0.9rem !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}
.refm-search-input:focus {
  background: #fff !important;
  border-color: var(--primary, #1976d2) !important;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12) !important;
}
.refm-search-icon { top: 50%; transform: translateY(-50%); left: 1.55rem; }
.refm-search-clear { top: 50%; transform: translateY(-50%); right: 1.4rem; }

/* Kategori-headere — mer som section-titles enn småtekst */
.refm-category {
  margin-bottom: 4px;
}
.refm-category-header {
  padding: 12px 18px 6px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #5b6878;
  border-top: 1px solid transparent;
}
.refm-category:not(:first-child) .refm-category-header {
  border-top-color: #f0f4f8;
}
.refm-category-header .material-icons {
  font-size: 15px;
  color: var(--primary, #1976d2);
  opacity: 0.8;
}

/* Spesialitet-rader — mer touch, klarere hover */
.refm-specialty-btn {
  padding: 9px 18px;
  font-size: 0.92rem;
  border-radius: 0;
  border-left-width: 3px;
}
.refm-specialty-btn:hover {
  background: #f5f8fc;
}
.refm-specialty-btn.is-selected {
  background: linear-gradient(90deg, rgba(25,118,210,0.10) 0%, rgba(25,118,210,0.03) 100%);
  border-left-color: var(--primary, #1976d2);
  color: var(--primary-dark, #0d47a1);
  font-weight: 600;
}
.refm-specialty-btn .material-icons {
  font-size: 19px;
  color: #94a3b8;
}
.refm-specialty-btn.is-selected .material-icons {
  color: var(--primary, #1976d2);
}
.refm-specialty-btn .search-highlight {
  background: #fff3cd;
  color: #7a5d00;
  border-radius: 3px;
  padding: 1px 3px;
}

/* Henvisningstype-knapper som kort i oppsett-panelet (2-panels layout) */
.refm-specialties-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.refm-specialty-btn {
  border: 1px solid #e2e8f0;
  border-left-width: 3px;
  border-left-color: transparent;
  border-radius: 8px;
  background: #fff;
}
.refm-specialty-btn.is-selected {
  border-color: rgba(25, 118, 210, 0.35);
  border-left-color: var(--primary, #1976d2);
}
html[data-theme="dark"] .refm-specialty-btn {
  border-color: #2a3245;
  background: #1c2231;
}
html[data-theme="dark"] .refm-specialty-btn.is-selected {
  border-color: rgba(25, 118, 210, 0.5);
}

/* MIDTRE PANEL — gjør det mindre flatt */
.refm-panel-mid {
  background: #fafbfd;
}
.refm-section { padding: 18px 22px 6px; }
.refm-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #5b6878;
}

/* Maler-chips — løft med subtile skygger */
.refm-chip {
  padding: 8px 14px;
  font-size: 0.83rem;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.18s ease;
}
.refm-chip:hover {
  border-color: var(--primary, #1976d2);
  background: rgba(25, 118, 210, 0.06);
  color: var(--primary-dark, #0d47a1);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(25, 118, 210, 0.16);
}
.refm-chip.is-selected {
  background: var(--primary, #1976d2);
  border-color: var(--primary, #1976d2);
  color: #fff;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.28);
}
.refm-chip-auto {
  background: rgba(25, 118, 210, 0.10);
  border-color: rgba(25, 118, 210, 0.30);
  color: var(--primary-dark, #0d47a1);
  font-weight: 500;
}

/* Reason-textarea — gi den karakter */
.refm-reason-input {
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  font-size: 0.92rem !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.refm-reason-input:focus {
  border-color: var(--primary, #1976d2) !important;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12) !important;
}

/* Generer-knapp — mer ekspressiv */
.refm-actions {
  padding: 18px 22px 22px;
  border-top: 1px solid #eaeff5;
  margin-top: 0;
  background: #fff;
}
.refm-generate-btn {
  background: linear-gradient(135deg, var(--primary, #1976d2) 0%, var(--primary-dark, #0d47a1) 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(25, 118, 210, 0.30);
  transition: all 0.18s ease;
}
.refm-generate-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(25, 118, 210, 0.40);
}
.refm-generate-btn:disabled {
  background: #cbd5e1;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.85;
}
.refm-generate-btn .material-icons { font-size: 19px; }
.refm-standard-btn {
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  font-weight: 500;
}
.refm-standard-btn:not(:disabled):hover {
  border-color: var(--primary, #1976d2);
  color: var(--primary, #1976d2);
  background: rgba(25, 118, 210, 0.04);
}

/* HØYRE PANEL — resultat */
.refm-panel-right { background: #fff; }
.refm-result-empty {
  background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
}
.refm-result-empty .material-icons {
  font-size: 3rem;
  opacity: 0.15;
}
.refm-result-empty p { font-style: normal; color: #94a3b8; }

/* Toolbar — moderne ikonografi */
.refm-result-toolbar {
  padding: 12px 16px;
  background: #fafbfd;
  border-bottom: 1px solid #eaeff5;
  gap: 8px;
}
.refm-toolbar-btn {
  height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  font-weight: 500;
  font-size: 0.82rem;
  box-shadow: none;
  transition: all 0.15s ease;
}
.refm-toolbar-btn:hover {
  border-color: var(--primary, #1976d2);
  color: var(--primary, #1976d2);
  background: rgba(25, 118, 210, 0.04);
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.10);
  transform: translateY(-1px);
}
.refm-toolbar-btn .material-icons { font-size: 16px; opacity: 0.85; }
.refm-toolbar-btn-primary {
  background: linear-gradient(135deg, var(--primary, #1976d2) 0%, var(--primary-dark, #0d47a1) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.25);
  margin-left: auto;
}
.refm-toolbar-btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark, #0d47a1) 0%, var(--primary, #1976d2) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 5px 14px rgba(25, 118, 210, 0.36);
}

/* Result-textarea — mer leselig */
.refm-result-textarea {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.7;
  padding: 22px 26px;
  color: #1e293b;
  background: #fff;
}
.refm-result-textarea:focus {
  box-shadow: inset 4px 0 0 0 var(--primary, #1976d2);
}

/* Søketreff-antall — mer fremtredende */
.refm-search-count {
  padding: 4px 18px 0;
  font-size: 0.74rem;
  color: #64748b;
  font-weight: 500;
}
.refm-search-count.no-results { color: #dc2626; }

/* Dark mode — følger kiverktoys html[data-theme="dark"]-toggle (theme-service.js),
   IKKE prefers-color-scheme. Slår derfor kun inn når legen aktivt har valgt
   mørk modus i appen, ikke på grunnlag av OS-innstilling. */
html[data-theme="dark"] #createReferralModal .modal-content.refmodal-fullscreen {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .refm-stepper { background: #1a2030; border-bottom-color: #2a3245; }
html[data-theme="dark"] .refm-step-num { background: #1a2030; border-color: #3a4258; color: #9ba8bc; }
html[data-theme="dark"] .refm-body { background: #0f1421; }
html[data-theme="dark"] .refm-panel { background: #1c2231; }
html[data-theme="dark"] .refm-panel-header { background: #1a2030; border-bottom-color: #2a3245; }
html[data-theme="dark"] .refm-search-input { background: #131826 !important; border-color: #2a3245 !important; color: #e8edf5 !important; }
html[data-theme="dark"] .refm-search-input:focus { background: #1a2030 !important; }
html[data-theme="dark"] .refm-specialty-btn { color: #e8edf5; }
html[data-theme="dark"] .refm-specialty-btn:hover { background: #232a3d; }
html[data-theme="dark"] .refm-specialty-btn.is-selected { background: linear-gradient(90deg, rgba(25,118,210,0.25) 0%, rgba(25,118,210,0.08) 100%); }
html[data-theme="dark"] .refm-category-header { color: #9ba8bc; }
html[data-theme="dark"] .refm-category:not(:first-child) .refm-category-header { border-top-color: #2a3245; }
html[data-theme="dark"] .refm-panel-mid { background: #1a2030; }
html[data-theme="dark"] .refm-chip { background: #1c2231; border-color: #2a3245; color: #cbd5e1; }
html[data-theme="dark"] .refm-chip:hover { background: rgba(25, 118, 210, 0.15); }
html[data-theme="dark"] .refm-reason-input { background: #131826 !important; border-color: #2a3245 !important; color: #e8edf5 !important; }
html[data-theme="dark"] .refm-standard-btn { background: #1c2231; border-color: #2a3245; color: #cbd5e1; }
html[data-theme="dark"] .refm-actions { border-top-color: #2a3245; background: #1c2231; }
html[data-theme="dark"] .refm-panel-right { background: #1c2231; }
html[data-theme="dark"] .refm-result-empty { background: linear-gradient(180deg, #1a2030 0%, #1c2231 100%); }
html[data-theme="dark"] .refm-result-toolbar { background: #1a2030; border-bottom-color: #2a3245; }
html[data-theme="dark"] .refm-toolbar-btn { background: #1c2231; border-color: #2a3245; color: #cbd5e1; }
html[data-theme="dark"] .refm-toolbar-btn:hover { background: rgba(25, 118, 210, 0.15); }
html[data-theme="dark"] .refm-result-textarea { background: #1c2231; color: #e8edf5; }

/* Responsive — slik at modal funker på smalere skjermer */
@media (max-width: 1100px) {
  .refm-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 48vh) 1fr; }
  #createReferralModal .modal-content.refmodal-fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
}



/* ===== pdf-skjema.css ===== */
/* pdf-skjema.css — Utfylling av tredjeparts PDF-skjemaer
   Palette: navy/blå (matcher AAP-legeerklaring og resten av kiverktoy).
   Primary  = #0b2e5e (mørk navy)
   Hover    = #194d80 (litt lysere navy)
   Accent   = #1976d2 / #0284c7 (blå)
   Soft bg  = #e3f2fd / #e0f2fe (lys blå) */

.pdf-skjema-btn .material-icons {
    color: #b3261e;
}

.pdf-skjema-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

.pdf-skjema-overlay.is-hidden {
    display: none;
}

.pdf-skjema-card {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.pdf-skjema-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(135deg, #0b2e5e, #194d80);
    color: #fff;
    flex-shrink: 0;
}

.pdf-skjema-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdf-skjema-title .material-icons {
    font-size: 24px;
}

.pdf-skjema-close {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-skjema-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

.pdf-skjema-step {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.pdf-skjema-step.is-hidden {
    display: none;
}

/* === Steg: velg skjema === */

.pdf-skjema-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.pdf-skjema-template-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.pdf-skjema-template-item {
    text-align: left;
    background: #fafafa;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pdf-skjema-template-item:hover {
    border-color: #90caf9;
    background: #e3f2fd;
}

.pdf-skjema-template-item.is-selected {
    border-color: #0b2e5e;
    background: #e3f2fd;
}

.pdf-skjema-template-label {
    font-weight: 600;
    color: #1d1b20;
    margin-bottom: 2px;
}

.pdf-skjema-template-meta {
    font-size: 12px;
    color: #6f6f6f;
}

.pdf-skjema-context-info {
    margin-bottom: 20px;
    padding: 12px 14px;
    background: #f7f7f9;
    border-radius: 8px;
    font-size: 13px;
}

.pdf-skjema-warn,
.pdf-skjema-ok {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.pdf-skjema-warn {
    color: #b3261e;
}

.pdf-skjema-warn .material-icons {
    color: #b3261e;
    font-size: 18px;
}

.pdf-skjema-ok {
    color: #1f6b3a;
}

.pdf-skjema-ok .material-icons {
    color: #1f6b3a;
    font-size: 18px;
}

/* Kildeoversikt + prisanslag (designløft 0408): overskriften beholder
   ok-grønnfargen, kildelinjen dempes som sekundærinfo, og prisanslaget
   får en diskret pille — samme visuelle språk som chat-prisbrikken. */
.pdf-skjema-ok .pdf-skjema-kilder {
    display: block;
    margin-top: 2px;
    color: #5f6b76;
}

.pdf-skjema-pris {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f2f6fa;
    border: 1px solid #dbe5ee;
    color: #33566e;
    font-size: 12px;
}

html[data-theme="dark"] .pdf-skjema-ok .pdf-skjema-kilder {
    color: var(--text-secondary, #8b949e);
}

html[data-theme="dark"] .pdf-skjema-pris {
    background: var(--bg-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.pdf-skjema-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    margin-top: 16px;
}

.pdf-skjema-step-pick .pdf-skjema-actions,
.pdf-skjema-step-loading .pdf-skjema-actions {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.pdf-skjema-actions button {
    border: 1px solid #d4d4d4;
    background: #fff;
    color: #1d1b20;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}

.pdf-skjema-actions button:hover:not(:disabled) {
    background: #f3f3f3;
}

.pdf-skjema-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pdf-skjema-primary {
    background: #0b2e5e !important;
    border-color: #0b2e5e !important;
    color: #fff !important;
}

.pdf-skjema-primary:hover:not(:disabled) {
    background: #194d80 !important;
    border-color: #194d80 !important;
}

/* === Steg: laster === */

.pdf-skjema-step-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.pdf-skjema-step-loading.is-hidden {
    display: none;
}

.pdf-skjema-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e3f2fd;
    border-top-color: #0b2e5e;
    border-radius: 50%;
    animation: pdfSkjemaSpin 0.9s linear infinite;
    margin-bottom: 16px;
}

@keyframes pdfSkjemaSpin {
    to { transform: rotate(360deg); }
}

.pdf-skjema-loading-text {
    font-size: 16px;
    font-weight: 500;
    color: #1d1b20;
    margin-bottom: 4px;
}

.pdf-skjema-loading-sub {
    font-size: 13px;
    color: #6f6f6f;
}

.pdf-skjema-loading-warning {
    margin-top: 20px;
    padding: 12px 14px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 8px;
    font-size: 13px;
    color: #6d3b00;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
    max-width: 560px;
}

.pdf-skjema-loading-warning .material-icons {
    color: #b88c00;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.pdf-skjema-loading-warning strong {
    font-weight: 600;
}

/* === Vent-notis i Fritekst KI (følger typing-indicator) === */
.fritekst-modal-container .fritekst-wait-notice {
    margin: 6px 18px 14px;
    padding: 12px 14px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 8px;
    font-size: 13px;
    color: #6d3b00;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

.fritekst-modal-container .fritekst-wait-notice .material-icons {
    color: #b88c00;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.fritekst-modal-container .fritekst-wait-notice strong {
    font-weight: 600;
}

.fritekst-modal-container .fritekst-wait-notice-text {
    flex: 1;
}

.fritekst-modal-container .fritekst-wait-notice-tip {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ffcc80;
    font-size: 12px;
    color: #5a4500;
}

/* Når modalen er låst (under AI-/PDF-kall): blokker visuelt at brukeren tror
   hen kan lukke. Backdrop får wait-cursor, lukkeknappen ser disabled ut. */

.pdf-skjema-overlay.is-processing {
    cursor: wait;
}

.pdf-skjema-overlay.is-processing .pdf-skjema-close {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* === Steg: review (HTML-form) === */

.pdf-skjema-step-review {
    display: flex;
    flex-direction: column;
}

.pdf-skjema-step-review.is-hidden {
    display: none;
}

.pdf-skjema-review-hint {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #614700;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.pdf-skjema-review-hint .material-icons {
    color: #b88c00;
    font-size: 20px;
}

.pdf-skjema-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pdf-skjema-section {
    background: #fafafa;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #ececec;
}

.pdf-skjema-section-title {
    margin: 0 0 14px 0;
    font-size: 14px;
    font-weight: 700;
    color: #0b2e5e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e3f2fd;
    padding-bottom: 6px;
}

.pdf-skjema-row {
    margin-bottom: 14px;
}

.pdf-skjema-row:last-child {
    margin-bottom: 0;
}

.pdf-skjema-field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #2a2a2a;
    margin-bottom: 4px;
}

.pdf-skjema-field-hint {
    font-size: 11.5px;
    color: #6f6f6f;
    margin-bottom: 6px;
    font-style: italic;
    line-height: 1.4;
}

.pdf-skjema-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    resize: vertical;
    line-height: 1.5;
}

.pdf-skjema-input:focus {
    outline: none;
    border-color: #0b2e5e;
    box-shadow: 0 0 0 2px rgba(11, 46, 94, 0.15);
}

textarea.pdf-skjema-input {
    min-height: 60px;
    overflow: hidden;
}

/* Kritiske felt (forsikringsgyldighet etc) */

.pdf-skjema-row-critical {
    background: #fff5f5;
    border-left: 3px solid #d83a3a;
    padding: 10px 12px;
    border-radius: 0 6px 6px 0;
    margin-left: -12px;
}

.pdf-skjema-critical-badge {
    background: #d83a3a;
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Radio-grupper (Ja/Nei) */

.pdf-skjema-radio-options {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 6px 0;
}

.pdf-skjema-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.pdf-skjema-radio-option input {
    cursor: pointer;
}

.pdf-skjema-radio-clear {
    background: transparent;
    border: 1px solid #d4d4d4;
    color: #6f6f6f;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
}

.pdf-skjema-radio-clear:hover {
    background: #f3f3f3;
}

/* Sensitiv blokk (skjult-feltet) */

.pdf-skjema-sensitive-block {
    background: #fef3f4;
    border: 2px solid #f5b5b5;
    border-radius: 10px;
    padding: 16px;
    margin-top: 8px;
}

.pdf-skjema-sensitive-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #7a1d1d;
    margin-bottom: 12px;
    line-height: 1.4;
}

.pdf-skjema-sensitive-header .material-icons {
    color: #c83a3a;
    font-size: 22px;
    flex-shrink: 0;
}

/* Modul-header (logo + navn) klikkbar => tilbake til dashbord */
.modal-title:has(.main-modal-logo){cursor:pointer;}

/* ===== Default-notatmal: tydelig merking + aktiv-markør i dropdown (2026-06-03) ===== */
.instruction-dropdown-pinned {
  gap: 0.5rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border-light);
}
.instruction-dropdown-item-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.instruction-dropdown-pin-icon {
  flex: 0 0 auto;
  font-size: 1.05rem;
  color: var(--primary);
}
.instruction-dropdown-badge {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--primary-dark);
  background-color: var(--primary-light);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  line-height: 1.5;
}
.instruction-dropdown-tool-icon {
  flex: 0 0 auto;
  font-size: 1.15rem;
  color: var(--primary);
}
.instruction-dropdown-badge-tool {
  color: #fff;
  background-color: var(--primary);
}
.instruction-dropdown-pin-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
}
.instruction-dropdown-pin-btn:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}
.instruction-dropdown-pin-btn .material-icons {
  font-size: 1.05rem;
}
.instruction-dropdown-pin-btn.is-pinned {
  color: var(--primary);
}
.instruction-dropdown-check {
  flex: 0 0 auto;
  font-size: 1.05rem;
  color: var(--accent-success);
  opacity: 0;
}
.instruction-dropdown-item.is-active {
  background-color: var(--primary-light);
  box-shadow: inset 3px 0 0 var(--primary);
}
.instruction-dropdown-item.is-active .instruction-dropdown-item-label {
  color: var(--primary-dark);
  font-weight: 600;
}
.instruction-dropdown-item.is-active .instruction-dropdown-check {
  opacity: 1;
}


/* ===== telephony-csp.css ===== */
/* telephony-csp.css
   Stiler for Telnyx-telefoni (testfrontend kiverktoytlf).
   CSP: ingen inline styles tillatt — alt her som egne klasser.
   Gjenbruker app-ens .modal / .modal-content / .button der det går. */

/* ---- Modaler (ringemodal + sett-opp-modal) ---- */
.tlf-modal-content { max-width: 560px; }

.tlf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 20px;
}

.tlf-from {
    font-size: 14px;
    color: #475569;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}
.tlf-from strong { color: #0f172a; }

.tlf-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.tlf-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.tlf-input { flex: 1; font-size: 18px; letter-spacing: 0.5px; }

.tlf-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
    min-height: 16px;
}
.tlf-hint-ok  { color: #15803d; font-weight: 600; }
.tlf-hint-err { color: #b91c1c; font-weight: 600; }

.tlf-muted { color: #64748b; font-size: 13px; }

.tlf-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 12.5px;
    color: #1e40af;
}
.tlf-consent .material-icons { font-size: 18px; }

/* ---- In-call-panel (fast kort nederst til høyre) ---- */
.tlf-incall {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    width: 300px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    padding: 14px 16px;
    font-family: inherit;
}

.tlf-incall-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.tlf-incall-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tlf-incall-dot.ringing { background: #f59e0b; animation: tlf-pulse 1s infinite; }
.tlf-incall-dot.live    { background: #22c55e; }
@keyframes tlf-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.tlf-incall-status { font-weight: 600; font-size: 14px; color: #0f172a; }
.tlf-incall-timer {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: #475569;
}
.tlf-timer-warn { color: #b91c1c; font-weight: 700; }

.tlf-incall-dest {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
}

.tlf-incall-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tlf-incall-actions .button { flex: 1; justify-content: center; }

/* Lyd-element for pasientens stemme holdes usynlig (men ikke display:none —
   noen nettlesere pauser autoplay-audio i skjulte elementer). */
.tlf-remote-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---- Innstillinger -> Telefoni-fane ---- */
.tlf-set { padding: 4px 2px; max-width: 560px; }
.tlf-set-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 4px 0 12px;
}
.tlf-set-title-sub { font-size: 14px; margin-top: 20px; }
.tlf-set-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0;
}
.tlf-set-numrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tlf-set-num { font-size: 20px; font-weight: 700; color: #0f172a; letter-spacing: 0.5px; }
.tlf-set-row { display: flex; gap: 18px; margin: 12px 0; flex-wrap: wrap; }
.tlf-radio { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #334155; cursor: pointer; }

.tlf-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tlf-badge.ok   { background: #dcfce7; color: #15803d; }
.tlf-badge.warn { background: #fef3c7; color: #92400e; }

.tlf-members { margin: 8px 0 4px; }
.tlf-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}
.tlf-member .tlf-muted { font-weight: 400; margin-left: 6px; }

.tlf-actions-left { justify-content: flex-start; padding: 12px 0 0; }
.tlf-danger-zone { margin-top: 18px; border-top: 1px dashed #fecaca; padding-top: 14px; }
.tlf-mt { margin-top: 14px; }

/* App-ens .button.danger finnes ikke nødvendigvis — definer en trygg variant */
.button.danger {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}
.button.danger:hover:not(:disabled) { background: #dc2626; }

/* ---- Forbruksmodal: telefonsamtale-detaljer ---- */
.udb-tlf-status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.udb-tlf-status.ok    { background: #dcfce7; color: #15803d; }
.udb-tlf-status.warn  { background: #fef3c7; color: #92400e; }
.udb-tlf-status.muted { background: #f1f5f9; color: #64748b; }

/* =============================================================================
   AI-SAMARBEID: tenker-indikator + polering (2026-06-10)
   CSP: kun klasser — ingen inline styles. Matcher eksisterende tokens
   (blågradient #2563eb→#3b82f6, 12px radius, var(--text-primary)).
   ============================================================================= */

/* «KI-en skriver …»-boble (brukes i både Samarbeid-fanen og juster-modalen) */
.ai-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.ai-typing-label {
  font-size: 0.875rem;
  color: #64748b;
}

.ai-typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.ai-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  animation: aiTypingPulse 1.2s ease-in-out infinite;
}

.ai-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes aiTypingPulse {
  0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
  35%           { opacity: 1;    transform: translateY(-3px); }
}

/* Myk inntreden for nye chat-meldinger */
.ai-message,
.customize-chat-message {
  animation: aiMsgIn 0.22s ease;
}

@keyframes aiMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Tidsstempel i chatbobler (erstatter tidligere inline style — CSP) */
.ai-message-time {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 0.25rem;
}

/* Dempet variant av velkomstikonet i preview-panelet (erstatter inline style) */
.ai-welcome-icon.is-muted {
  background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
}

.ai-welcome-icon.is-muted .material-icons {
  color: #94a3b8;
}

.ai-welcome-title-muted {
  color: #475569;
}

/* Feilboble i juster-modalens chat (gjenbruker ai-error-bubble-uttrykket) */
.customize-chat-bubble.ai-error-bubble {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

@media (prefers-reduced-motion: reduce) {
  .ai-message,
  .customize-chat-message { animation: none; }
  .ai-typing-dots span { animation: none; opacity: 0.6; }
}

/* =============================================================================
   COMPLIANCE COACH — «Samsvar»-medspilleren (2026-06-10)
   Lokal lint-hint, spilleregler-boks, kvalitetsstempel og bibliotek-badge.
   CSP: kun klasser. Palett/radier matcher eksisterende compliance-UI.
   ============================================================================= */

/* ---- Spilleregler-boksen («Dette ligger alltid i bunn») ---- */
.cc-rules {
  margin: 0 0 1rem 0;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  overflow: hidden;
}

.cc-rules-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e40af;
  user-select: none;
}

.cc-rules-summary::-webkit-details-marker { display: none; }

.cc-rules-summary .material-icons {
  font-size: 1.1rem;
  color: #2563eb;
}

.cc-rules-chevron {
  margin-left: auto;
  transition: transform 0.18s ease;
}

.cc-rules[open] .cc-rules-chevron { transform: rotate(180deg); }

.cc-rules-list {
  margin: 0;
  padding: 0 1rem 0.5rem 2.4rem;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.55;
}

.cc-rules-list li { margin-bottom: 0.3rem; }

.cc-rules-foot {
  margin: 0;
  padding: 0.4rem 1rem 0.75rem 2.4rem;
  font-size: 0.78rem;
  color: #64748b;
}

/* ---- Lint-hint (gule veiledningskort under tekstfeltet) ---- */
.cc-lint-panel { margin-top: 0.5rem; }
.cc-lint-panel.cc-lint-empty { display: none; }

.cc-lint-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.4rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #78350f;
  line-height: 1.45;
  animation: ccHintIn 0.2s ease;
}

@keyframes ccHintIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.cc-lint-hint .material-icons {
  font-size: 1.05rem;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 1px;
}

.cc-lint-hint-body { flex: 1; }

.cc-lint-match { font-weight: 600; }

.cc-lint-fix-preview {
  display: block;
  margin-top: 0.2rem;
  color: #92400e;
  font-style: italic;
}

.cc-lint-fix-btn {
  flex-shrink: 0;
  align-self: center;
  border: 1px solid #d97706;
  background: #ffffff;
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cc-lint-fix-btn:hover {
  background: #d97706;
  color: #ffffff;
}

/* ---- Grønne kvalitetssignaler (grunnstammen) ---- */
.cc-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.cc-signal {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.cc-signal .material-icons { font-size: 0.9rem; }

/* ---- Kvalitetsstempelet (godkjent-tilstanden) ---- */
.cc-stamp-in {
  animation: ccStampIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes ccStampIn {
  0%   { opacity: 0; transform: scale(0.92); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Bibliotek-badge: ✓ Samsvarssjekket ---- */
.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  white-space: nowrap;
}

.cc-badge .material-icons { font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
  .cc-lint-hint { animation: none; }
  .cc-stamp-in { animation: none; }
  .cc-rules-chevron { transition: none; }
}
/* ===== Fritekst KI — auto-kontekst fra konsultasjon (banner/dropdown) ===== */
.fk-kons-host { margin: 0 0 10px; }
.fk-kons-banner { display: flex; align-items: center; gap: 10px; background: #eef6ff; border: 1px solid #bcdcff; border-radius: 10px; padding: 10px 12px; }
.fk-kons-banner.fk-kons-off { opacity: .55; }
.fk-kons-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; flex: 0 0 auto; animation: fkKonsPulse 1.8s infinite; }
@keyframes fkKonsPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5);} 70% { box-shadow: 0 0 0 7px rgba(229,72,77,0);} 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0);} }
.fk-kons-banner-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.fk-kons-banner-text strong { font-size: 13.5px; color: #0b4fc4; }
.fk-kons-sub { font-size: 12px; color: #5b6678; }
.fk-kons-toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.fk-kons-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.fk-kons-slider { position: absolute; inset: 0; background: #c3cad6; border-radius: 999px; transition: .15s; }
.fk-kons-slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.fk-kons-toggle input:checked + .fk-kons-slider { background: #1f6feb; }
.fk-kons-toggle input:checked + .fk-kons-slider::before { transform: translateX(16px); }
.fk-kons-picker { display: flex; align-items: center; gap: 8px; background: #f4f7fb; border: 1px solid #e3e9f2; border-radius: 10px; padding: 8px 10px; }
.fk-kons-picker-icon { color: #5b6678; font-size: 19px; flex: 0 0 auto; }
.fk-kons-select { flex: 1 1 auto; min-width: 0; border: 1px solid #cfd8e6; border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; background: #fff; color: #1a2233; cursor: pointer; }
.fk-kons-select:focus { outline: 2px solid #1f6feb; outline-offset: 1px; }
/* ===== Fritekst kons-velger: knapp + custom dropdown ===== */
.fk-kons-picker { position: relative; display: block; background: none; border: none; padding: 0; }
.fk-kons-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: #fff; border: 1px solid #cfd8e6; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px; color: #1a2233; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.fk-kons-btn:hover { border-color: #1f6feb; }
.fk-kons-btn.fk-kons-open { border-color: #1f6feb; box-shadow: 0 0 0 3px rgba(31,111,235,.12); }
.fk-kons-btn.fk-kons-btn-active { border-color: #bcdcff; background: #f3f8ff; }
.fk-kons-btn-icon { font-size: 18px; color: #5b6678; flex: 0 0 auto; }
.fk-kons-btn-label { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-kons-btn-caret { font-size: 20px; color: #8b97a8; flex: 0 0 auto; transition: transform .15s; }
.fk-kons-btn.fk-kons-open .fk-kons-btn-caret { transform: rotate(180deg); }
.fk-kons-menu { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e3e9f2; border-radius: 12px; box-shadow: 0 12px 32px rgba(18,38,73,.16); padding: 6px; max-height: 320px; overflow-y: auto; animation: fkKonsMenuIn .12s ease; }
@keyframes fkKonsMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fk-kons-item { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; font: inherit; color: #1a2233; }
.fk-kons-item:hover { background: #f4f7fb; }
.fk-kons-item.fk-kons-item-sel { background: #eef4ff; box-shadow: inset 0 0 0 1px #bcdcff; }
.fk-kons-item-none { color: #5b6678; font-size: 12.5px; }
.fk-kons-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fk-kons-item-time { font-weight: 600; font-size: 12.5px; color: #0b4fc4; }
.fk-kons-item-dur { font-size: 11.5px; color: #8b97a8; flex: 0 0 auto; }
.fk-kons-item-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fk-kons-chip { background: #e8f0fe; color: #0b4fc4; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 500; }
.fk-kons-chip.fk-kons-chip-muted { background: #eef1f5; color: #5b6678; }
/* ===== Tolk: minimer/dock-modus (flytende mini-panel, sesjon lever) ===== */
.interpreter-timer { font-variant-numeric: tabular-nums; font-size: 13px; color: #cbd5e1; margin-left: 6px; white-space: nowrap; }
.interpreter-btn-max { display: none; }
.interpreter-overlay.interpreter-docked {
    position: fixed; inset: auto; right: 20px; bottom: 20px;
    width: 380px; height: 440px; max-height: 72vh; max-width: calc(100vw - 40px);
    border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
    overflow: hidden; z-index: 99999; border: 1px solid rgba(255,255,255,.14);
    padding: 0; animation: interpDockIn .16s ease;
}
@keyframes interpDockIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.interpreter-docked .interpreter-btn-start,
.interpreter-docked .interpreter-btn-pause,
.interpreter-docked .interpreter-btn-stop,
.interpreter-docked .interpreter-btn-share,
.interpreter-docked .interpreter-font-controls,
.interpreter-docked .interpreter-btn-min { display: none; }
.interpreter-docked .interpreter-btn-max { display: inline-flex; }
.interpreter-docked .interpreter-toolbar { padding: 7px 10px; gap: 6px; }
.interpreter-docked .interpreter-btn,
.interpreter-docked .interpreter-close-btn { padding: 7px 9px; min-height: 0; }
.interpreter-docked .interpreter-btn-label,
.interpreter-docked .interpreter-close-btn .interpreter-btn-label { display: none; }
.interpreter-docked .interpreter-btn .material-icons,
.interpreter-docked .interpreter-close-btn .material-icons { font-size: 18px; }
.interpreter-docked .interpreter-panels { flex-direction: column; }
.interpreter-docked .interpreter-divider { width: 100%; height: 1px; }
.interpreter-docked .interpreter-panel-header { padding: 4px 12px; }
.interpreter-docked .interpreter-panel-title { font-size: 0.7rem; }
.interpreter-docked .interpreter-panel-flag { font-size: 1rem; }
.interpreter-docked .interpreter-panel-content { padding: 8px 12px; gap: 2px; }
.interpreter-docked .interpreter-line-text { font-size: 14px; line-height: 1.35; }
.interpreter-docked .interpreter-placeholder { font-size: 0.95rem; }
/* Tydelig «tolk aktiv» i docked: pulserende ring rundt statusprikken (kun ved opptak) */
.interpreter-docked .interpreter-status-recording { animation: interpDockPulse 1.6s infinite; }
@keyframes interpDockPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55);} 70% { box-shadow: 0 0 0 6px rgba(239,68,68,0);} 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0);} }

/* ===== Telefonbok (pb-*) — CSP-trygt, lagt direkte i bundle.css ===== */
.pb-modal-content { max-width: 540px; }
.pb-body { display: flex; flex-direction: column; gap: 12px; }
.pb-search { width: 100%; font-size: 15px; }
.pb-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }
.pb-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    color: #64748b; font-size: 14px; padding: 28px 16px; }
.pb-empty .material-icons { font-size: 40px; color: #cbd5e1; }
.pb-cat { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.pb-cat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #f8fafc;
    border-bottom: 1px solid #eef2f7; }
.pb-cat-ic { color: #2563eb; font-size: 20px; }
.pb-cat-name { font-weight: 700; color: #0f172a; font-size: 14.5px; }
.pb-cat-count { font-size: 12px; font-weight: 700; color: #64748b; background: #e2e8f0;
    border-radius: 999px; padding: 1px 9px; }
.pb-cat-head .pb-icon-btn { margin-left: 0; }
.pb-cat-head .pb-icon-btn:first-of-type { margin-left: auto; }
.pb-entries { display: flex; flex-direction: column; }
.pb-entry { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.pb-entry:last-child { border-bottom: none; }
.pb-entry-main { flex: 1; min-width: 0; }
.pb-entry-label { font-weight: 600; color: #0f172a; font-size: 14px; }
.pb-entry-num { font-size: 13px; color: #475569; font-variant-numeric: tabular-nums; }
.pb-entry-dtmf { color: #2563eb; font-weight: 600; }
.pb-entry-note { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.pb-entry-empty { font-size: 12.5px; color: #94a3b8; padding: 10px 12px; }
.pb-entry-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pb-ring .material-icons { font-size: 16px; }
.pb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; cursor: pointer; color: #475569; padding: 0; }
.pb-icon-btn:hover { background: #f1f5f9; color: #0f172a; }
.pb-icon-btn .material-icons { font-size: 18px; }
.pb-icon-btn.pb-danger:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.pb-actions { align-items: center; }
.pb-spacer { flex: 1; }
.pb-hidden { display: none !important; }
.pb-note { resize: vertical; min-height: 44px; font-family: inherit; }

.tlf-pb-row { margin-top: 14px; }

/* ===== «Ring ut»: type-valg (Pasient/Annet) + transkripsjon-switch ===== */
.tlf-type-row { display: flex; gap: 8px; margin-bottom: 12px; }
.tlf-type-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 10px; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; }
.tlf-type-btn .material-icons { font-size: 18px; }
.tlf-type-btn.is-active { border-color: #2563eb; background: #eff6ff; color: #1e40af; }
.tlf-trans-row { margin-bottom: 14px; }
.tlf-trans-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #475569;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.tlf-trans-note .material-icons { font-size: 17px; color: #64748b; flex-shrink: 0; }
.tlf-trans-on { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.tlf-trans-on .material-icons { color: #2563eb; }
.tlf-trans-kons { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.tlf-trans-kons .material-icons { color: #ef4444; font-size: 14px; }

/* Live-dialog i in-call-panelet (L5): mørk boks med siste ytringer, farget pr. taler. */
.tlf-dlg { margin-top: 8px; max-height: 132px; overflow-y: auto; background: #0f172a;
    border: 1px solid #1e293b; border-radius: 10px; padding: 8px 10px;
    font-size: 12px; line-height: 1.45; color: #e2e8f0; }
.tlf-dlg-line { margin: 0 0 4px; word-break: break-word; }
.tlf-dlg-line:last-child { margin-bottom: 0; }
.tlf-dlg-who { font-weight: 700; }
.tlf-dlg-who.tlf-dlg-lege { color: #4ade80; }
.tlf-dlg-who.tlf-dlg-motpart { color: #7dd3fc; }
.tlf-dlg-partial { opacity: 0.55; font-style: italic; }
.tlf-dlg-empty { color: #64748b; font-style: italic; }

/* L5-modal: gul varsel-variant av hintet (opptak IKKE gjenopptatt) + spinner-rad. */
.tlf-l5-hint-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.tlf-l5-hint-warn .material-icons { color: #d97706; }
.tlf-l5-loading { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px;
    padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
    font-size: 13px; color: #1e40af; }
.tlf-l5-loading .spinner-small { border-color: #bfdbfe; border-top-color: #2563eb; flex-shrink: 0; }
.tlf-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.tlf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tlf-switch-track { position: relative; width: 42px; height: 24px; background: #cbd5e1; border-radius: 999px;
    transition: background .15s; flex-shrink: 0; }
.tlf-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff;
    border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.tlf-switch input:checked + .tlf-switch-track { background: #2563eb; }
.tlf-switch input:checked + .tlf-switch-track .tlf-switch-thumb { left: 21px; }
.tlf-switch-label { font-size: 14px; font-weight: 600; color: #334155; }

/* ===== Telefonnotat (ekstern) — kopierings-modal ===== */
.tlf-tag-ekstern { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: #475569;
    border-radius: 6px; padding: 2px 8px; margin-right: 6px; vertical-align: middle; }
.tlf-ekstern-note { width: 100%; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 120px; }
.tlf-actions-inline { display: flex; gap: 8px; margin-top: 10px; }
.tlf-ekstern-trans { margin-top: 14px; }
.tlf-ekstern-trans summary { cursor: pointer; font-size: 13px; color: #2563eb; font-weight: 600; }
.tlf-ekstern-pre { margin-top: 8px; max-height: 180px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
    font-size: 12.5px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; }

/* ===== Telefoni-modaler: robust størrelse (ID-spesifikt) ===== */
#tlfPhonebookModal .modal-content { max-width: 620px; width: min(620px, calc(100vw - 32px)); }
#tlfPhonebookModal .pb-list { min-height: 240px; }
#tlfPbEntryModal .modal-content,
#tlfPbCatModal .modal-content { max-width: 520px; width: min(520px, calc(100vw - 32px)); }
#tlfEksternNoteModal .modal-content { max-width: 600px; width: min(600px, calc(100vw - 32px)); }
#tlfDialModal .modal-content { max-width: 600px; width: min(600px, calc(100vw - 32px)); }

/* ===== «Ring ut»-modal: luftigere og penere (scopet til #tlfDialModal) ===== */
#tlfDialModal .modal-body { padding: 22px 26px 24px; }
#tlfDialModal .tlf-from { margin-bottom: 10px; }
#tlfDialModal .tlf-price { margin-bottom: 18px; font-size: 12.5px; }
#tlfDialModal .tlf-type-row { gap: 10px; margin-bottom: 16px; }
#tlfDialModal .tlf-type-btn { padding: 12px 12px; border-radius: 12px;
    transition: border-color .15s ease, background .15s ease, color .15s ease; }
#tlfDialModal .tlf-type-btn:hover:not(.is-active) { border-color: #cbd5e1; background: #f8fafc; }
#tlfDialModal .tlf-input { padding: 11px 12px; }
#tlfDialModal .tlf-pb-row { margin-top: 16px; }
/* Lyd-enheter som egne, tydelige kort med mer pust */
#tlfDialModal .tlf-mic-row { margin-top: 10px; padding: 11px 13px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
#tlfDialModal #tlfMicRow { margin-top: 20px; }
#tlfDialModal .tlf-consent { margin-top: 20px; }
.tlf-pb-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Telefonbok: garantert romslig (ID slår klasse, også i media-query) */
#tlfPhonebookModal .modal-content { max-width: 640px; width: min(640px, calc(100vw - 24px)); }
#tlfPhonebookModal .pb-body { min-height: 340px; }
#tlfPhonebookModal .pb-list { min-height: 260px; max-height: 56vh; }

/* ===== «Ring ut»: typeahead-dropdown (søk i telefonbok fra nummerfeltet) ===== */
.tlf-search-drop { border: 1px solid #e2e8f0; border-radius: 10px; margin-top: 6px;
    max-height: 240px; overflow-y: auto; box-shadow: 0 6px 18px rgba(15,23,42,.10); }
.tlf-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
    border-bottom: 1px solid #f1f5f9; }
.tlf-search-item:last-child { border-bottom: none; }
.tlf-search-item:hover { background: #eff6ff; }
.tlf-search-main { flex: 1; min-width: 0; }
.tlf-search-label { font-weight: 600; color: #0f172a; font-size: 14px; }
.tlf-search-meta { font-size: 12.5px; color: #64748b; }
.tlf-search-dtmf { font-size: 12px; color: #2563eb; font-weight: 600; flex-shrink: 0; }

/* ===== Telefonbok: import-forhåndsvisning (remapping) ===== */
#tlfPbImportModal .modal-content { max-width: 560px; width: min(560px, calc(100vw - 24px)); }
.pb-actions { flex-wrap: wrap; }
.pb-import-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.pb-import-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; }
.pb-import-info { flex: 1; min-width: 0; }
.pb-import-name { font-weight: 600; color: #0f172a; font-size: 14px; }
.pb-import-count { font-size: 12px; color: #64748b; }
.pb-import-sel { flex-shrink: 0; max-width: 220px; }

/* ===== Mic-/headset-velger i «Ring ut» ===== */
.tlf-mic-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tlf-mic-row .material-icons { font-size: 19px; color: #64748b; flex-shrink: 0; }
.tlf-mic-label { font-size: 13px; font-weight: 600; color: #334155; flex-shrink: 0; }
.tlf-mic-select { flex: 1; font-size: 13px; min-width: 0; }

/* ===== DTMF-tastatur i in-call-panelet ===== */
.tlf-dialpad { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.tlf-dtmf-seq { width: 100%; justify-content: center; margin-bottom: 8px; }
.tlf-dialpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tlf-dtmf-key { font-size: 18px; font-weight: 700; color: #0f172a; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 0; cursor: pointer;
    transition: background .08s, transform .08s; }
.tlf-dtmf-key:hover { background: #eef2f7; }
.tlf-dtmf-key.is-pressed { background: #2563eb; color: #fff; transform: scale(0.94); }

.tlf-mic-reveal { flex-shrink: 0; }

/* ===== «Ring ut»: enhetstest — live mic-nivåstripe + høyttaler-pling ===== */
#tlfDialModal .tlf-mic-row { flex-wrap: wrap; }
.tlf-devtest { flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin-top: 9px; min-width: 0; }
.tlf-meter { flex: 0 0 150px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.tlf-meter-fill { height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, #6ee7b7, #10b981 55%, #059669); }
.tlf-devtest-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
    color: #94a3b8; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlf-devtest-hint .material-icons { font-size: 15px; flex-shrink: 0; }
.tlf-devtest-hint.is-ok { color: #059669; font-weight: 700; }
.tlf-devtest-hint.is-err { color: #b45309; font-weight: 600; }
.tlf-spk-test { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.tlf-spk-test .material-icons { font-size: 16px; }
.tlf-spk-test.is-playing { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }
.tlf-spk-test.is-playing .material-icons { animation: tlfPlingWiggle .45s ease-in-out 2; }
@keyframes tlfPlingWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-13deg); } 75% { transform: rotate(13deg); } }

/* ===== Telefonkonsultasjon-banner (pasient-samtale transkriberer til åpen konsultasjon) ===== */
.tlf-kons-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
    padding: 11px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; }
.tlf-kons-banner-ikon { color: #2563eb; font-size: 22px; flex-shrink: 0;
    animation: tlfKonsPulse 2.2s ease-in-out infinite; }
.tlf-kons-banner-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: #1e40af; }
.tlf-kons-banner-text strong { color: #1e3a8a; }
.tlf-kons-banner .button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
    background: #fff; border-color: #bfdbfe; color: #1d4ed8; }
.tlf-kons-banner .button:hover { background: #dbeafe; }
.tlf-kons-banner .button .material-icons { font-size: 16px; }
@keyframes tlfKonsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ============================================================
   Konsolidert inn i bundle.css (resiliens-arbeid 2026-06)
   Tidligere separate: min-stil.css, referral-tabs.css, fritekst-sessions.css
   ============================================================ */
/* min-stil.css — «Min stil»-fanen i innstillinger */

.ms-tab { display: flex; flex-direction: column; gap: 18px; }

.ms-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ms-undertekst { color: #64748b; font-size: 13px; line-height: 1.5; margin-top: 4px; max-width: 560px; }
.ms-skjult { display: none; }

/* toggle */
.ms-switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: none; }
.ms-switch input { display: none; }
.ms-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: .2s; cursor: pointer; }
.ms-slider:before { content: ""; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ms-switch input:checked + .ms-slider { background: linear-gradient(135deg, #2563eb, #1e40af); }
.ms-switch input:checked + .ms-slider:before { transform: translateX(19px); }

/* fritekst-input */
.ms-input-rad { display: flex; gap: 10px; align-items: stretch; }
.ms-input { flex: 1; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px;
    color: #1e293b; background: #f8fafc; resize: vertical; min-height: 64px; transition: border-color .15s, box-shadow .15s; }
.ms-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: #fff; }
.ms-send { align-self: flex-end; white-space: nowrap; }

/* resultat (per-punkt-svar) */
.ms-resultat { display: flex; flex-direction: column; gap: 10px; }
.ms-resultat:empty { display: none; }
.ms-samlet { font-size: 13px; color: #475569; margin: 4px 0 2px; }
.ms-verdict { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8; }
.ms-verdict.ms-akse, .ms-verdict.ms-bryter, .ms-verdict.ms-regel { border-left-color: #16a34a; background: #f0fdf4; }
.ms-verdict.ms-omskriv { border-left-color: #d97706; background: #fffbeb; }
.ms-verdict.ms-avvis { border-left-color: #dc2626; background: #fef2f2; }
.ms-verdict.ms-avklaring { border-left-color: #2563eb; background: #eff6ff; }
.ms-verdict-ikon { font-size: 18px; line-height: 1.4; }
.ms-verdict-onske { font-weight: 700; font-size: 13px; color: #1e293b; margin-bottom: 3px; }
.ms-verdict-melding { font-size: 13px; color: #475569; line-height: 1.5; white-space: pre-line; }
.ms-resultat-knapper { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* interaktiv konfliktløsning */
.ms-konflikt-valg { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ms-kvalg { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s, opacity .15s; }
.ms-kvalg:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.ms-kvalg.primary { background: linear-gradient(135deg, #2563eb, #1e40af); border-color: transparent; color: #fff; }
.ms-kvalg.primary:hover { color: #fff; background: linear-gradient(135deg, #2563eb, #1e40af); opacity: .92; }

/* klartekst-speil */
.ms-speil { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(15,23,42,.04); }
.ms-speil-tittel { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: #1e40af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ms-speil-tittel .material-icons { font-size: 18px; }
.ms-speil-oppsummering { font-size: 14px; color: #1e293b; line-height: 1.55; margin: 0; }

.ms-regler { margin-top: 14px; border-top: 1px solid #f1f5f9; padding-top: 12px; }
.ms-regler-tittel { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.ms-regel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: #f8fafc; border-radius: 9px; font-size: 13px; color: #334155; margin-bottom: 6px; }
.ms-regel-slett { border: 0; background: transparent; color: #cbd5e1; cursor: pointer; display: flex; padding: 2px; border-radius: 6px; transition: color .15s, background .15s; }
.ms-regel-slett:hover { color: #dc2626; background: #fef2f2; }
.ms-regel-slett .material-icons { font-size: 18px; }

/* Min stil: egne overskrifter (30.09.2026) */
.ms-ov { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(15,23,42,.04); display: flex; flex-direction: column; gap: 12px; }
.ms-ov.is-lopende { opacity: .6; }
.ms-ov-tittel { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: #1e40af; text-transform: uppercase; letter-spacing: .04em; }
.ms-ov-tittel .material-icons { font-size: 18px; }
.ms-ov .ms-undertekst { margin-top: -6px; }
.ms-ov-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ms-ov-preset { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; background: #f8fafc; transition: border-color .15s, background .15s; }
.ms-ov-preset:hover { border-color: #93c5fd; }
.ms-ov-preset.is-valgt { border-color: #2563eb; background: #eff6ff; }
.ms-ov-preset input { position: absolute; opacity: 0; pointer-events: none; }
.ms-ov-preset-navn { font-size: 13px; font-weight: 700; color: #1e293b; }
.ms-ov-preset-eks { font-size: 11.5px; color: #64748b; line-height: 1.35; }
.ms-ov-felter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.ms-ov-felt { display: flex; flex-direction: column; gap: 4px; }
.ms-ov-felt-navn { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.ms-ov-input { border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 14px; color: #1e293b; background: #fff; }
.ms-ov-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ms-ov-kolon { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.ms-ov-forhand { border-top: 1px solid #f1f5f9; padding-top: 10px; }
.ms-ov-forhand-tittel { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.ms-ov-forhand-tekst { margin: 0; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #334155; background: #f8fafc; border-radius: 9px; padding: 10px 12px; white-space: pre-wrap; }
.ms-ov-konflikt { display: flex; gap: 10px; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #78350f; }
.ms-ov-konflikt .material-icons { font-size: 18px; color: #d97706; flex: none; }
.ms-ov-konflikt .ms-regel { margin-top: 8px; margin-bottom: 0; background: #fff; }
.ms-ov-knapper { display: flex; align-items: center; gap: 12px; }
.ms-ov-status { font-size: 12px; color: #64748b; }

/* bunn */
.ms-bunn { margin-top: 4px; }
.ms-lenke { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #64748b; font: inherit; font-size: 13px; cursor: pointer; padding: 4px 0; }
.ms-lenke:hover { color: #2563eb; }
.ms-lenke .material-icons { font-size: 18px; }

/* knapp-spinner: bruker appens sirkel-ring (.spinner-small) — rotasjons-invariant,
   så den thrasher ikke scrollbaren slik den gamle roterende glyfen gjorde. */
.ms-btn-spinner { display: inline-block; vertical-align: middle; margin-right: 6px; }

/* modal (onboarding + lær av dette) */
.ms-modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; }
.ms-modal { background: #fff; border-radius: 18px; max-width: 520px; width: 100%; padding: 26px 28px; box-shadow: 0 20px 60px rgba(15,23,42,.3); max-height: 90vh; overflow-y: auto; scrollbar-gutter: stable; }
.ms-modal-tittel { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: #1e293b; margin-bottom: 10px; }
.ms-modal-tittel .material-icons { color: #2563eb; }
.ms-modal-ingress { font-size: 14px; color: #475569; line-height: 1.55; margin: 0 0 16px; }
.ms-modal-punkter { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.ms-mp { display: flex; gap: 11px; font-size: 13.5px; color: #334155; line-height: 1.5; }
.ms-mp .material-icons { color: #2563eb; font-size: 20px; flex: none; }
.ms-modal-knapper { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.ms-modal-laer #msLaerResultat:not(:empty) { margin: 14px 0; }

/* status: hvilken mal nye konsultasjoner starter med */
.ms-status { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; flex-wrap: wrap; }
.ms-status > .material-icons { font-size: 18px; flex: none; color: #64748b; }
.ms-status > span:not(.material-icons) { flex: 1; min-width: 200px; }
.ms-status-ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.ms-status-ok > .material-icons { color: #16a34a; }
.ms-status-varsel { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ms-status-varsel > .material-icons { color: #d97706; }
.ms-status-knapp { flex: none; white-space: nowrap; }
.ms-bunn { display: flex; gap: 18px; flex-wrap: wrap; }
.ms-lenke.ms-lenke-fare, .ms-lenke.ms-lenke-fare:hover { color: #dc2626; }

/* =========================================================================
   «Min stil» — dynamisk Lær-knapp (hjørne-✦) som fester seg rett etter siste
   punktum i notatet. Posisjon settes i JS via en skjult speil-div
   (min-stil-ui.js). Knappen er ren CSS-prakt: animert gradient, pustende glød,
   tindrende ✦ og fjær-spring inn.
   ========================================================================= */
.ms-note-wrap { position: relative; }

/* Skjult måler-div — etterligner textareaens tekstlayout for å finne
   pikselposisjonen til siste tegn. Aldri synlig, påvirker ikke layout. */
.ms-speil-maler {
    position: absolute;
    top: 0;
    left: -99999px;
    margin: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

/* Subtil, nøytral pille — INGEN lilla, ingen gradient, ingen animasjon.
   Dempet til den hoveres; app-blå kun som hover-aksent. */
.ms-corner-btn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted, #64748b);
    background: var(--bg-white, #fff);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    /* Skjult som standard — fader inn når JS har plassert den i synlig område. */
    opacity: 0;
    transform: translateY(-50%) scale(.97);
    transform-origin: left center;
    pointer-events: none;
    transition: top .16s ease, left .16s ease, opacity .18s ease,
        transform .18s ease, color .15s ease, border-color .15s ease, background .15s ease;
}

/* Vises kun når malen ER «Min stil» (--on) OG knappen er plassert i synlig område (--plassert). */
.ms-corner-btn--on.ms-corner-btn--plassert {
    opacity: .68;                       /* dempet i ro */
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

.ms-corner-btn:hover {
    opacity: 1;
    color: #2563eb;                     /* app-blå, kun på hover */
    border-color: #bfdbfe;
    background: #f8fafc;
}
.ms-corner-btn:active { transform: translateY(-50%) scale(.98); }
.ms-corner-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

.ms-corner-ikon { font-size: 15px !important; line-height: 1; opacity: .85; }
.ms-corner-tekst { line-height: 1; }

/* referral-tabs.css — henvisnings-faner i refmodalen (én fane per lagret henvisning) */

.refm-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0 0;
    margin: 0 0 8px;
    border-bottom: 1px solid #e2e8f0;
}
.refm-tabs.is-hidden { display: none; }

.refm-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    background: #f1f5f9;
    border-radius: 8px 8px 0 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.refm-tab .material-icons { font-size: 16px; }
.refm-tab:hover { background: #e0e7ff; color: #1e40af; }
.refm-tab.is-active {
    background: #fff;
    border-color: #2563eb;
    color: #1d4ed8;
    box-shadow: 0 -2px 0 #2563eb inset;
}
.refm-tab-new { color: #2563eb; border-style: dashed; background: #fff; }
.refm-tab-new:hover { background: #eff6ff; }
/* ✕ på en henvisningsfane — sletter den henvisningen (auto-lagring trenger en vei ut) */
.refm-tab-del { font-size: 15px !important; margin-left: 2px; border-radius: 50%; color: #94a3b8; line-height: 1; padding: 1px; transition: background .12s, color .12s; }
.refm-tab-del:hover { background: #fee2e2; color: #dc2626; }
.refm-tab-new .refm-tab-del { display: none; }
/* «Lagres automatisk»-hint der «Lagre»-knappen sto */
.refm-autosave-hint { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12.5px; font-weight: 600; color: #16a34a; white-space: nowrap; user-select: none; }
.refm-autosave-hint .material-icons { font-size: 16px; }
html[data-theme="dark"] .refm-autosave-hint { color: #4ade80; }

/* journaloppsummering-faner — samme mønster, egen kontekst (øverst i view) */
.js-summary-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 18px 0; margin: 0; border-bottom: 1px solid #e2e8f0; }
.js-summary-tabs.is-hidden { display: none; }
.js-summary-tab { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid #cbd5e1; border-bottom: none; background: #f1f5f9; border-radius: 8px 8px 0 0; font: inherit; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; max-width: 230px; }
.js-summary-tab .material-icons { font-size: 16px; flex: none; }
.js-summary-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-summary-tab:hover { background: #e0e7ff; color: #1e40af; }
.js-summary-tab.is-active { background: #fff; border-color: #2563eb; color: #1d4ed8; box-shadow: 0 -2px 0 #2563eb inset; }
.js-summary-tab-new { color: #2563eb; border-style: dashed; background: #fff; }
.js-summary-tab-new:hover { background: #eff6ff; }

/* fritekst-sessions.css — «Sesjon ▾»-dropdown i Fritekst KI-headeren.
   Sesjoner persisteres i artefakt-hjemmet og overlever reload/navigasjon. */

.fritekst-session-selector { position: relative; display: inline-flex; }

.fritekst-session-btn { display: inline-flex; align-items: center; gap: 4px; }
.fritekst-session-btn #fritekstSessionLabel {
    font-size: 13px; font-weight: 600;
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fritekst-session-dropdown {
    position: absolute;
    top: 112%;
    right: 0;
    min-width: 250px;
    max-height: 380px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
    z-index: 60;
}
.fritekst-session-dropdown.is-hidden { display: none; }

.fk-sess-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; border-radius: 8px;
    font-size: 13.5px; color: #1e293b; cursor: pointer;
}
.fk-sess-item:hover { background: #f1f5f9; }
.fk-sess-item.is-active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.fk-sess-item .material-icons { font-size: 18px; color: #64748b; }
.fk-sess-item.is-active .material-icons { color: #2563eb; }
.fk-sess-new { color: #2563eb; font-weight: 600; }
.fk-sess-new .material-icons { color: #2563eb; }
.fk-sess-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-sess-divider { height: 1px; background: #f1f5f9; margin: 4px 2px; }

/* ============================================================
   Fritekst sesjons-velger flyttet til upload-toolbar
   (under Kontekst, til venstre for «Last opp fil») + per-sesjon slett
   ============================================================ */
.fritekst-upload-toolbar .fritekst-session-selector { position: relative; display: inline-flex; }
.fritekst-session-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    background: #fff; color: #1e293b;
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.fritekst-session-btn:hover { background: #f1f5f9; border-color: #2563eb; color: #1d4ed8; }
.fritekst-session-btn .material-icons { font-size: 18px; }
.fritekst-session-btn .fritekst-session-caret { margin-left: -2px; opacity: .7; }
.fritekst-session-btn #fritekstSessionLabel { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* dropdown åpner nedover, venstrejustert (ikke lenger mot header-høyre) */
.fritekst-session-dropdown { left: 0; right: auto; top: calc(100% + 6px); }
/* per-sesjon slett (søppelbøtte) */
.fk-sess-del {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    padding: 3px; margin-left: 2px; border-radius: 6px; color: #94a3b8; flex: none;
}
.fk-sess-del .material-icons { font-size: 17px; }
.fk-sess-del:hover { background: #fee2e2; color: #dc2626; }

/* ============================================================
   Innstillinger — sidebar-redesign (faner i sidemeny, ingen overflow)
   ============================================================ */
.settings-modal-content.settings-redesign {
    max-width: 880px; width: 92%; height: 80vh; max-height: 680px;
    padding: 0; overflow: hidden;
}
.settings-redesign .settings-modal-header {
    padding: 16px 22px; border-bottom: 1px solid var(--border-light, #e2e8f0); flex: none;
}
.settings-redesign .settings-layout { display: flex; flex: 1; min-height: 0; }
.settings-redesign .settings-sidebar {
    width: 220px; flex: none; border-right: 1px solid var(--border-light, #e2e8f0);
    padding: 12px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
    /* --bg-subtle fantes aldri: sidemenyen ble liggende på reservefargen #f8fafc
       også i mørk modus, med lys grå tekst oppå — praktisk talt uleselig.
       --bg-light er tema-styrt (#fafafa / #161b22) og gir samme tilbaketrukne look. */
    background: var(--bg-light, #f8fafc);
}
.settings-redesign .settings-sidebar .stab,
.settings-redesign .settings-sidebar-action {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 12px; border: none; background: transparent; border-radius: 9px;
    font: inherit; font-size: 14px; font-weight: 500; color: var(--text-secondary, #475569);
    cursor: pointer; text-align: left; transition: background .12s, color .12s;
}
.settings-redesign .settings-sidebar .stab .material-icons,
.settings-redesign .settings-sidebar-action .material-icons {
    font-size: 20px; color: var(--text-muted, #94a3b8); flex: none;
}
.settings-redesign .settings-sidebar .stab:hover,
.settings-redesign .settings-sidebar-action:hover {
    background: var(--bg-hover, #eef2f7); color: var(--text-primary, #1e293b);
}
.settings-redesign .settings-sidebar .stab.active { background: var(--primary, #2563eb); color: #fff; }
.settings-redesign .settings-sidebar .stab.active .material-icons { color: #fff; }
.settings-redesign .settings-sidebar-spacer { flex: 1 1 auto; min-height: 8px; }
.settings-redesign .settings-sidebar-action {
    color: var(--primary, #2563eb); font-weight: 600;
    border: 1px dashed var(--border-light, #cbd5e1); margin-top: 4px;
}
.settings-redesign .settings-sidebar-action .material-icons { color: var(--primary, #2563eb); }
.settings-redesign .settings-content { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 26px; min-height: 0; }
@media (max-width: 680px) {
    .settings-modal-content.settings-redesign { height: 100%; max-height: 100%; width: 100%; }
    .settings-redesign .settings-layout { flex-direction: column; }
    .settings-redesign .settings-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border-light, #e2e8f0); }
    .settings-redesign .settings-sidebar .stab { width: auto; }
    .settings-redesign .settings-sidebar-spacer { display: none; }
}

/* ============================================================
   «Hva er nytt»-modal (whatsnew.js)
   ============================================================ */
.wn-overlay {
    position: fixed; inset: 0; z-index: 4000; background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; padding: 20px; animation: wn-fade .2s ease;
}
@keyframes wn-fade { from { opacity: 0; } to { opacity: 1; } }
.wn-modal {
    position: relative; width: 100%; max-width: 540px; max-height: 88vh;
    background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .35); animation: wn-pop .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes wn-pop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.wn-close {
    position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px;
    border: none; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.wn-close:hover { background: rgba(255,255,255,.32); }
.wn-hero { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%); color: #fff; padding: 30px 28px 26px; text-align: center; }
.wn-logo { display: block; height: 44px; width: auto; margin: 0 auto 14px; padding: 8px 14px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.wn-version {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(255,255,255,.2); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
.wn-tagline { font-size: 22px; font-weight: 700; margin: 0 0 8px; line-height: 1.25; }
.wn-intro { font-size: 14px; opacity: .92; margin: 0; line-height: 1.5; }
.wn-body { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.wn-card { display: flex; gap: 14px; align-items: flex-start; }
.wn-card-icon { flex: none; font-size: 22px; color: #2563eb; background: #eff6ff; border-radius: 11px; padding: 9px; }
.wn-card-body h4 { margin: 2px 0 3px; font-size: 15px; color: #0f172a; font-weight: 650; }
.wn-card-body p { margin: 0; font-size: 13.5px; color: #475569; line-height: 1.5; }
.wn-video { margin-top: 4px; }
.wn-video video { display: block; width: 100%; border-radius: 12px; background: #0f172a;
    aspect-ratio: 16 / 9; }
.wn-video-caption { margin: 6px 0 0; font-size: 12.5px; color: #64748b; text-align: center; }
.wn-video-fallback { display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 22px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px;
    color: #2563eb; font-weight: 600; text-decoration: none; }
.wn-video-fallback:hover { background: #eff6ff; }
.wn-footer { padding: 16px 24px 22px; border-top: 1px solid #f1f5f9; text-align: center; }
.wn-cta { border: none; background: #2563eb; color: #fff; font: inherit; font-size: 15px; font-weight: 600; padding: 11px 32px; border-radius: 11px; cursor: pointer; transition: background .15s; }
.wn-cta:hover { background: #1d4ed8; }

/* ============================================================
   Bakgrunnsjobb-pille — synlig «Genererer …»-tegn (SW running-jobber)
   ============================================================ */
.bgjob-pill {
    position: fixed; bottom: 18px; right: 18px; z-index: 5000;
    display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 11px 16px;
    background: #1e293b; color: #fff; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .3);
    font-size: 13.5px; font-weight: 500; line-height: 1.35; animation: bgjob-in .25s ease;
}
@keyframes bgjob-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.bgjob-pill .bgjob-text em { opacity: .7; font-style: normal; font-size: 12px; }
.bgjob-spinner {
    flex: none; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: bgjob-spin .8s linear infinite;
}
@keyframes bgjob-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Stor «genererer»-overlay direkte på resultatfeltet (ikke bare toast/pille)
   ============================================================ */
.js-generating-overlay {
    position: absolute; inset: 0; z-index: 6;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(248, 250, 252, .94); border-radius: 12px; text-align: center; padding: 24px;
}
.js-generating-overlay .js-gen-spinner {
    width: 52px; height: 52px; border-radius: 50%;
    border: 4px solid #e2e8f0; border-top-color: #2563eb; animation: bgjob-spin .8s linear infinite;
}
.js-generating-overlay .js-gen-text { font-size: 16px; font-weight: 700; color: #1e293b; }
.js-generating-overlay .js-gen-sub { font-size: 13px; color: #64748b; max-width: 360px; line-height: 1.4; }
.js-generating-overlay .js-gen-tid { font-size: 12.5px; color: #475569; max-width: 380px; line-height: 1.4; font-variant-numeric: tabular-nums; }

/* Journaloppsummering: CSP-sikker, nettlesertilpasset jobbstatus.
   Appendes i bundle.css med vilje — ingen inline style/style-attributter. */
#journalResultsSection {
    position: relative;
    min-height: 320px;
}
.js-generating-overlay .js-gen-safety {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 460px;
    padding: 10px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}
.js-generating-overlay .js-gen-safety::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.js-generating-overlay.is-direct-route .js-gen-safety {
    border-color: #fde68a;
    background: #fffbeb;
    color: #78350f;
}
.js-generating-overlay.is-direct-route .js-gen-safety::before {
    content: "!";
    background: #d97706;
}
html[data-theme="dark"] .js-generating-overlay .js-gen-safety {
    border-color: #1d4ed8;
    background: #172554;
    color: #dbeafe;
}
html[data-theme="dark"] .js-generating-overlay.is-direct-route .js-gen-safety {
    border-color: #92400e;
    background: #451a03;
    color: #fef3c7;
}

/* «Genererer svar»-boble i fritekst-chatten (gjenbruker .js-gen-*) */
.fk-generating {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 28px 20px; margin: 16px auto; max-width: 420px; text-align: center;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 14px;
}

/* Firefox-advarsel i lange-kall-views (oppsummering/fritekst) */
.ff-warn {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 16px; background: #fff7ed; border-bottom: 1px solid #fed7aa;
    color: #9a3412; font-size: 13px; line-height: 1.45;
}
.ff-warn .material-icons { font-size: 20px; color: #ea580c; flex: none; }
.ff-warn-text { flex: 1; }
.ff-warn-text b { color: #7c2d12; }
.ff-warn-close { border: none; background: transparent; color: #9a3412; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; flex: none; }
.ff-warn-close:hover { color: #7c2d12; }

/* ===== tilleggsnotater.css — L5/2sm-knapp under journalnotatet + samlemodal ===== */
.tilleggsnotater-btn {
    position: absolute; left: 0; top: 0; z-index: 6;
    display: inline-flex; align-items: center; gap: 7px; margin: 0;
    padding: 0.34rem 0.7rem;
    background: #fff; border: 1px solid var(--border-medium, #bdbdbd);
    border-radius: var(--main-border-radius, 6px);
    font-size: 0.82rem; font-weight: 600; color: #37474f; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.06); white-space: nowrap;
    /* Skjult til JS har plassert den i synlig område (unngår flash). */
    opacity: 0; pointer-events: none; transform: translateY(-50%);
    transition: top .14s ease, left .14s ease, opacity .16s ease, background .15s ease, border-color .15s ease;
}
.tilleggsnotater-btn.tn-plassert { opacity: 1; pointer-events: auto; }
.tilleggsnotater-btn:hover { background: #f5f7f9; border-color: #90a4ae; }
.tilleggsnotater-btn .tn-btn-ic { font-size: 18px; color: #607d8b; }
.tilleggsnotater-btn .tn-btn-ic + .tn-btn-ic { margin-left: -3px; }
.tilleggsnotater-btn .tn-count {
    background: #eceff1; color: #546e7a; border-radius: 10px;
    font-size: 11px; font-weight: 700; padding: 1px 7px;
}

/* Bruker appens .modal + .modal.is-open for backdrop/visning; her kun finjustering. */
.tn-modal { z-index: 100000; padding: 24px; }
.tn-modal-content { max-width: 560px; }
.tn-modal-body { display: flex; flex-direction: column; gap: 14px; }
.tn-kort { border: 1px solid var(--border-light, #e0e0e0); border-radius: var(--main-border-radius, 6px); overflow: hidden; }
.tn-kort-head {
    display: flex; align-items: center; gap: 8px; padding: 9px 13px;
    background: #eceff1; border-bottom: 1px solid var(--border-light, #e0e0e0);
    font-weight: 700; font-size: 13px; color: #37474f;
}
.tn-kort-head .material-icons { font-size: 18px; color: #607d8b; }
.tn-kort-head .tn-kort-tittel { flex: 1; }
.tn-kort-head .tn-kopier-en { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.tn-kort-head .tn-kopier-en .material-icons, .tn-kort-head .tn-lim-en .material-icons { font-size: 16px; color: inherit; }
.tn-kort-head .tn-kopier-en.tn-kopiert { background: #dcfce7; border-color: #86efac; color: #15803d; }
.tn-kort-head .tn-lim-en { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.tn-kort-body { padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: #263238; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.tn-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ===== Ring ut-redesign — seksjonslabels, konsekvens-bokser, tidslinje, lyd-modus ===== */
.tlf-section-lbl { font-size: 13px; font-weight: 600; color: #37474f; margin: 14px 0 8px; }
#tlfDialModal .tlf-section-lbl:first-of-type { margin-top: 6px; }

.tlf-conseq { border-radius: 14px; padding: 18px 18px 16px; margin-bottom: 14px; border: 1px solid; }
.tlf-conseq-l5 { background: #fffaf0; border-color: #ffe0a3; }
.tlf-conseq-annet { background: #f1faf3; border-color: #c2e7cc; }
.tlf-conseq-ttl { display: flex; align-items: flex-start; gap: 10px; font-weight: 800; font-size: 16px; line-height: 1.25; }
.tlf-conseq-ttl .material-icons { font-size: 26px; margin-top: 1px; }
.tlf-conseq-l5 .tlf-conseq-ttl { color: #b45309; }
.tlf-conseq-annet .tlf-conseq-ttl { color: #256e3a; }
.tlf-conseq-l5 .tlf-conseq-ttl .material-icons { color: #ef7d00; }
.tlf-conseq-annet .tlf-conseq-ttl .material-icons { color: #2e9e54; }
.tlf-conseq-why { font-size: 13.5px; line-height: 1.45; margin: 4px 0 12px; padding-left: 36px; }
.tlf-conseq-l5 .tlf-conseq-why { color: #7c5e3b; }
.tlf-conseq-annet .tlf-conseq-why { color: #3f6b4c; }
.tlf-tl { display: grid; grid-template-columns: 128px 1fr; gap: 8px 10px; align-items: center; }
.tlf-tl-lab { display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: 12.5px; font-weight: 700; color: #475569; }
.tlf-tl-lab .material-icons { font-size: 17px; color: #94a3b8; }
.tlf-tl-track { height: 30px; border-radius: 7px; display: flex; overflow: hidden; background: #eef2f6; }
.tlf-tl-track > div { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tlf-tl-track > div .material-icons { font-size: 14px; }
.tlf-tl-on { background: #22a06b; color: #fff; }
.tlf-tl-on .material-icons { font-size: 11px; }
.tlf-tl-pause { background: repeating-linear-gradient(45deg, #fde2a7, #fde2a7 6px, #fff5dd 6px, #fff5dd 12px); color: #9a6a00; }
.tlf-tl-off { background: #dbe2e8; color: #90a0ad; }
.tlf-tl-call { background: #1f6feb; color: #fff; }
.tlf-tl-phases { display: flex; justify-content: space-between; font-size: 11.5px; color: #94a3b8; padding: 0 4px; }
.tlf-fl1 { flex: 1; }
.tlf-fl2 { flex: 2; }
.tlf-fl3 { flex: 3; }
.tlf-out { margin-top: 15px; padding-top: 14px; border-top: 1px dashed; }
.tlf-conseq-l5 .tlf-out { border-top-color: #f0d9ad; }
.tlf-conseq-annet .tlf-out { border-top-color: #cfe9d6; }
.tlf-out-lab { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.tlf-out-lab .material-icons { font-size: 18px; }
.tlf-conseq-l5 .tlf-out-lab { color: #7c5e3b; }
.tlf-conseq-l5 .tlf-out-lab .material-icons { color: #ef7d00; }
.tlf-conseq-annet .tlf-out-lab { color: #3f6b4c; }
.tlf-conseq-annet .tlf-out-lab .material-icons { color: #2e9e54; }
.tlf-out-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tlf-doc { display: flex; gap: 9px; align-items: flex-start; background: #fff; border: 1px solid #e3e8ee; border-radius: 10px; padding: 11px 12px; }
.tlf-doc > div { min-width: 0; }
.tlf-doc .material-icons { font-size: 20px; margin-top: 1px; }
.tlf-doc b { display: block; font-size: 13px; color: #1f2937; }
.tlf-doc span { display: block; font-size: 11.5px; color: #64748b; line-height: 1.35; margin-top: 2px; }
.tlf-doc-journal { border-left: 4px solid #22a06b; }
.tlf-doc-journal .material-icons { color: #22a06b; }
.tlf-doc-l5 { border-left: 4px solid #1f6feb; }
.tlf-doc-l5 .material-icons { color: #1f6feb; }
.tlf-doc-none { border-left: 4px solid #b6c2cc; }
.tlf-doc-none .material-icons { color: #94a3b8; }
.tlf-doc-none b { color: #64748b; }
@media (max-width: 560px) {
  .tlf-tl { grid-template-columns: 96px 1fr; }
  .tlf-tl-lab { font-size: 11.5px; }
  .tlf-out-cards { grid-template-columns: 1fr; }
}

.tlf-lyd-modus { display: flex; gap: 10px; margin-bottom: 10px; }
.tlf-lyd-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 8px; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: #475569; cursor: pointer;
}
.tlf-lyd-btn .material-icons { font-size: 18px; }
.tlf-lyd-btn.is-active { border-color: #1976d2; background: #e3f2fd; color: #0d47a1; }
.tlf-lyd-btn.is-active .material-icons { color: #1976d2; }

/* ===== In-call lyd-bytte (headset/høyttaler under samtale) ===== */
.tlf-incall-lyd { display: flex; gap: 8px; margin: 8px 0 2px; }
.tlf-incall-lyd .tlf-incall-lydbtn { flex: 1; }

/* ===== mic-check.css — mikrofonveiviser (oppstart / innstillinger / banner / ny mic) =====
   Modalskall gjenbrukes fra .main-bm-*; alt under er veiviserens egne klasser.
   Ingen inline-stiler (CSP) — tilstand via klasser; nivåstriper settes via CSSOM. */
.mcx-card { max-width: 560px; }
.mcx-hidden { display: none !important; }
@keyframes mcxSpin { to { transform: rotate(360deg); } }
@keyframes mcxToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Hode: tone per visning + stegindikator --- */
.mcx-head { text-align: left; padding: 22px 24px 16px; transition: background .25s ease; }
.mcx-head.mcx-tone-blue { background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%); }
.mcx-head.mcx-tone-green { background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%); }
.mcx-head.mcx-tone-red { background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%); }
.mcx-head.mcx-tone-orange { background: linear-gradient(135deg, #fb8c00 0%, #e65100 100%); }
.mcx-head-row { display: flex; align-items: center; gap: 14px; }
.mcx-head-row > div { min-width: 0; }
.mcx-head-ico { font-size: 34px; opacity: .95; flex: none; }
.mcx-head .main-bm-header-title { font-size: 1.15rem; line-height: 1.3; text-wrap: balance; }
.mcx-head .main-bm-header-balance { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcx-steps { display: flex; gap: 6px; list-style: none; margin: 16px 0 0; padding: 0; }
.mcx-steps li { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); padding-top: 8px; border-top: 2px solid rgba(255,255,255,.28); }
.mcx-steps li span { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: rgba(255,255,255,.22); flex: none; }
.mcx-steps li.is-active { color: #fff; border-top-color: #fff; }
.mcx-steps li.is-active span { background: #fff; color: #0d47a1; }
.mcx-tone-green .mcx-steps li.is-active span { color: #2e7d32; }
.mcx-tone-red .mcx-steps li.is-active span { color: #b71c1c; }
.mcx-steps li.is-done { color: rgba(255,255,255,.9); border-top-color: rgba(255,255,255,.75); }
.mcx-steps li.is-done span { background: rgba(255,255,255,.9); color: #2e7d32; }

/* --- Kropp / fot --- */
.mcx-body { padding: 18px 24px 8px; max-height: min(62vh, 560px); overflow-y: auto; }
.mcx-desc { margin: 0 0 12px; font-size: .92rem; }
.mcx-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 20px; }
.mcx-foot .main-bm-close-btn { width: auto; flex: 1 1 auto; min-width: 120px; margin: 0; padding: 11px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-color: var(--border-light); }
.mcx-foot .main-bm-close-btn .material-icons { font-size: 17px; }
.mcx-foot .main-bm-close-btn:hover { background: var(--bg-light); }
.mcx-btn-primary { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; font-weight: 600 !important; }
.mcx-btn-primary:hover { filter: brightness(1.08); }
.mcx-btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.mcx-btn-green { background: #2e7d32 !important; border-color: #2e7d32 !important; }

/* --- Notiser --- */
.mcx-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin: 0 0 14px; }
.mcx-note .material-icons { font-size: 20px; flex: none; margin-top: 1px; }
.mcx-note-info { background: #e3f2fd; color: #0d47a1; }
.mcx-note-warn { background: #fff3e0; color: #7a4b12; }
.mcx-note-tip { background: var(--bg-light); color: var(--text-secondary); border: 1px solid var(--border-light); }
html[data-theme="dark"] .mcx-note-info { background: rgba(74,158,255,.16); color: #9cc7ff; }
html[data-theme="dark"] .mcx-note-warn { background: rgba(255,143,0,.16); color: #ffcc80; }

/* --- Visning 1: enhetskort som lytter --- */
.mcx-cards { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.mcx-devcard { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; border: 2px solid var(--border-light); border-radius: 12px; background: var(--bg-white); color: var(--text-primary); font-family: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.mcx-devcard:hover { border-color: var(--border-medium); }
.mcx-devcard:focus-visible { outline: 3px solid rgba(25,118,210,.35); outline-offset: 1px; }
.mcx-devcard.is-hearing { border-color: #66bb6a; background: rgba(102,187,106,.08); }
.mcx-devcard.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,118,210,.18); }
.mcx-devcard.is-muted { opacity: .8; }
.mcx-dev-ico { font-size: 26px; color: var(--text-muted); flex: none; margin-top: 2px; }
.mcx-devcard.is-hearing .mcx-dev-ico { color: #2e7d32; }
.mcx-devcard.is-selected .mcx-dev-ico { color: var(--primary); }
.mcx-dev-main { flex: 1; min-width: 0; }
.mcx-dev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; }
.mcx-dev-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mcx-dev-meter { height: 7px; background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 5px; overflow: hidden; }
.mcx-dev-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #43a047, #8bc34a); border-radius: 5px; transition: width 70ms linear; }
.mcx-devcard.is-muted .mcx-dev-fill { background: #bdbdbd; }
.mcx-dev-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.35; }
.mcx-dev-check { font-size: 22px; color: transparent; flex: none; margin-top: 2px; transition: color .15s; }
.mcx-devcard.is-selected .mcx-dev-check { color: var(--primary); }
.mcx-listen-status { font-size: 12.5px; color: var(--text-muted); min-height: 18px; margin: 0 0 6px; }
.mcx-empty { display: flex; align-items: center; gap: 8px; padding: 18px 12px; border: 1px dashed var(--border-medium); border-radius: 12px; color: var(--text-muted); font-size: 14px; justify-content: center; }
.mcx-empty .material-icons { font-size: 22px; }

/* Piller på kortene */
.mcx-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .01em; padding: 2px 8px; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
.mcx-pill-hear { background: #e8f5e9; color: #1b5e20; }
.mcx-pill-hear.is-strong { background: #2e7d32; color: #fff; }
.mcx-pill-mute { background: #fff3e0; color: #e65100; }
.mcx-pill-fail { background: #ffebee; color: #b71c1c; }
.mcx-pill-def { background: var(--bg-light); color: var(--text-secondary); border: 1px solid var(--border-light); }
.mcx-pill-saved { background: #e3f2fd; color: #0d47a1; }
.mcx-pill-known { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
html[data-theme="dark"] .mcx-pill-hear { background: rgba(102,187,106,.2); color: #a5d6a7; }
html[data-theme="dark"] .mcx-pill-mute { background: rgba(255,143,0,.2); color: #ffcc80; }
html[data-theme="dark"] .mcx-pill-fail { background: rgba(229,57,53,.2); color: #ef9a9a; }
html[data-theme="dark"] .mcx-pill-saved { background: rgba(74,158,255,.2); color: #9cc7ff; }
html[data-theme="dark"] .mcx-pill-known { background: rgba(102,187,106,.16); color: #a5d6a7; border-color: rgba(165,214,167,.4); }

/* Bekreft «hopp over» (ny lege) */
.mcx-confirm { width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--text-primary); }
.mcx-confirm span { color: var(--text-muted); font-size: 12.5px; }
.mcx-confirm-btns { display: flex; gap: 8px; margin-top: 10px; }
.mcx-confirm-btns .main-bm-close-btn { flex: 1; }

/* --- Visning 2: test --- */
.mcx-sentence { display: flex; flex-direction: column; gap: 4px; background: #e3f2fd; border-left: 4px solid var(--primary); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.mcx-sentence-lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0d47a1; }
.mcx-sentence q { font-size: 17px; font-weight: 600; color: var(--text-primary); quotes: "«" "»"; line-height: 1.35; }
html[data-theme="dark"] .mcx-sentence { background: rgba(74,158,255,.14); }
html[data-theme="dark"] .mcx-sentence-lab { color: #9cc7ff; }
.mcx-meter { height: 10px; background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; margin: 0 0 4px; }
.mcx-meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #43a047, #8bc34a); border-radius: 6px; transition: width 80ms linear; }
.mcx-meter-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; min-height: 16px; }
.mcx-transcript { background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 8px; min-height: 56px; max-height: 110px; overflow-y: auto; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--text-primary); margin: 0 0 14px; }
.mcx-transcript.is-empty { color: var(--text-muted); font-style: italic; }
.mcx-checks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.mcx-checks-compact { padding: 10px 12px; background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 10px; }
.mcx-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-secondary); }
.mcx-check .material-icons { font-size: 19px; color: var(--text-muted); flex: none; margin-top: 1px; }
.mcx-check.is-ok .material-icons { color: #2e7d32; }
.mcx-check.is-run .material-icons { color: var(--primary); animation: mcxSpin 1.1s linear infinite; }
.mcx-check.is-warn .material-icons { color: #ef6c00; }
.mcx-check.is-err .material-icons { color: #c62828; }
.mcx-check-text { flex: 1; min-width: 0; }
.mcx-check-text b { display: block; font-size: 13px; color: var(--text-primary); }
.mcx-check-text span { color: var(--text-muted); font-size: 12.5px; }
.mcx-check-ts { flex: none; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; padding-top: 2px; }
.mcx-check.is-ok .mcx-check-ts { color: #2e7d32; font-weight: 600; }
.mcx-help { background: #fff3e0; border: 1px solid #ffe0b2; border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: #7a4b12; margin: 0 0 14px; }
.mcx-help p { margin: 6px 0 0; }
.mcx-help ul { margin: 6px 0 0 18px; padding: 0; }
.mcx-help li { margin: 3px 0; }
.mcx-help-strong { display: flex; align-items: center; gap: 6px; background: #e8f5e9; color: #1b5e20; border-radius: 6px; padding: 6px 8px; }
.mcx-help-strong .material-icons { font-size: 18px; }
html[data-theme="dark"] .mcx-help { background: rgba(255,143,0,.14); border-color: rgba(255,143,0,.3); color: #ffcc80; }
html[data-theme="dark"] .mcx-help-strong { background: rgba(102,187,106,.18); color: #a5d6a7; }
@media (prefers-reduced-motion: reduce) { .mcx-check.is-run .material-icons { animation: none; } }

/* --- Visning 3: klart --- */
.mcx-sum { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.mcx-sum-item { display: flex; gap: 12px; align-items: flex-start; }
.mcx-sum-item .material-icons { font-size: 22px; color: #2e7d32; flex: none; margin-top: 1px; }
.mcx-sum-item > div { min-width: 0; }
.mcx-sum-item b { display: block; font-size: 14px; color: var(--text-primary); overflow-wrap: anywhere; }
.mcx-sum-item span { font-size: 12.5px; color: var(--text-muted); }

/* --- Visning 4: problem — fritekst + kvittering --- */
.mcx-freetext-lab { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: 0 0 5px; }
.mcx-freetext { width: 100%; box-sizing: border-box; resize: vertical; min-height: 54px; padding: 9px 11px; border: 1px solid var(--border-medium); border-radius: 8px; font-family: inherit; font-size: 13.5px; background: var(--bg-white); color: var(--text-primary); margin: 0 0 10px; }
.mcx-freetext:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,118,210,.18); }
.mcx-send-status { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 9px 12px; border-radius: 8px; margin: 0 0 6px; line-height: 1.4; }
.mcx-send-status.is-ok { background: #e8f5e9; color: #1b5e20; }
.mcx-send-status.is-err { background: #ffebee; color: #b71c1c; }
.mcx-send-status .material-icons { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
html[data-theme="dark"] .mcx-send-status.is-ok { background: rgba(102,187,106,.18); color: #a5d6a7; }
html[data-theme="dark"] .mcx-send-status.is-err { background: rgba(229,57,53,.18); color: #ef9a9a; }

/* --- Toast: ny mikrofon oppdaget --- */
.mcx-toast { position: fixed; right: 18px; bottom: 18px; z-index: 9990; display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 12px 14px; background: var(--bg-white); color: var(--text-primary); border: 1px solid var(--border-light); border-left: 4px solid var(--primary); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 13px; animation: mcxToastIn .25s ease; }
.mcx-toast > .material-icons { color: var(--primary); font-size: 24px; flex: none; }
.mcx-toast-body { flex: 1; min-width: 0; line-height: 1.4; }
.mcx-toast-body b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcx-toast-body span { color: var(--text-muted); font-size: 12.5px; }
.mcx-toast-btn { flex: none; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--bg-white); color: var(--text-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mcx-toast-btn:hover { background: var(--bg-light); }
.mcx-toast-yes { background: var(--primary); border-color: var(--primary); color: #fff; }
.mcx-toast-yes:hover { filter: brightness(1.08); background: var(--primary); }

/* --- Innstillinger → Mikrofon: veiviser-boks + historikk (.mcw-*) --- */
.mcw-box { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-light); margin: 0 0 10px; }
.mcw-box-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mcw-box-text b { font-size: 13.5px; color: var(--text-primary); }
.mcw-box-text span { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.mcw-box .mic-test-btn { flex: none; }
.mcw-active { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #e8f5e9; color: #1b5e20; font-size: 13px; margin: 0 0 10px; }
.mcw-active .material-icons { font-size: 20px; flex: none; }
.mcw-active > div { display: flex; flex-direction: column; min-width: 0; }
.mcw-active b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcw-active span { font-size: 12px; opacity: .85; }
.mcw-active.is-none { background: var(--bg-light); color: var(--text-secondary); border: 1px solid var(--border-light); }
html[data-theme="dark"] .mcw-active { background: rgba(102,187,106,.16); color: #a5d6a7; }
html[data-theme="dark"] .mcw-active.is-none { background: var(--bg-light); color: var(--text-secondary); }
.mcw-hist-title { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 6px; }
.mcw-hist-row { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: center; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--border-light); color: var(--text-secondary); }
.mcw-hist-row .material-icons { font-size: 17px; }
.mcw-hist-row.is-ok .material-icons { color: #2e7d32; }
.mcw-hist-row.is-err .material-icons { color: #c62828; }
.mcw-hist-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mcw-hist-dev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-primary); }
.mcw-hist-res { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
    .mcw-box { flex-direction: column; align-items: stretch; }
    .mcw-hist-row { grid-template-columns: 20px 80px minmax(0, 1fr); }
    .mcw-hist-res { grid-column: 2 / -1; }
    .mcx-foot .main-bm-close-btn { min-width: 0; flex-basis: calc(50% - 4px); }
}


/* =============================================================================
   VIDEO-TOLK — premium live-undertekster (.tolk-caption*) + toggle + språkvelger
   Samme design brukes av legen (denne fila) og pasienten (/pastolk/). Legen får
   captionen lokalt fra sin egen Soniox-strøm; pasienten via datakanalen.
   ============================================================================= */

/* --- Tolk-toggle i call-kontrollene --- */
.video-tolk-btn .material-icons { transition: color .2s ease; }
.video-tolk-btn.active {
    background: linear-gradient(135deg, #4da3ff, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 16px rgba(59,130,246,.45);
}
.video-tolk-btn.active .material-icons { color: #fff; }
.video-tolk-btn.video-tolk-starting { opacity: .6; cursor: progress; }

/* --- Premium caption-kort --- */
.tolk-caption {
    --tolk-accent: #4da3ff;
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translate(-50%, 14px);
    width: max-content;
    max-width: min(760px, 86%);
    padding: 14px 22px 16px;
    box-sizing: border-box;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(12,18,32,.82), rgba(18,28,48,.78));
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s ease, transform .28s ease;
    z-index: 120;
}
.tolk-caption.tolk-caption-show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.tolk-caption.tolk-caption-hidden { display: none !important; }

.tolk-caption-head {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.tolk-caption-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
}
.tolk-caption-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tolk-accent);
    box-shadow: 0 0 10px rgba(77,163,255,.9);
    transition: background .2s ease, box-shadow .2s ease;
}
.tolk-caption-mic { font-size: 12px; line-height: 1; filter: saturate(1.1); }
.tolk-caption-pair { white-space: nowrap; }

.tolk-caption-final {
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
    border-left: 3px solid transparent;
}
.tolk-caption-partial {
    margin-top: 4px;
    color: rgba(255,255,255,.62);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.4;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
}
.tolk-caption-partial:empty { display: none; }

/* Fade + glid opp 8px for ny final-linje */
@keyframes tolkCaptionRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tolk-caption-final.tolk-caption-anim { animation: tolkCaptionRise .18s ease; }

@media (max-width: 640px) {
    .tolk-caption { padding: 11px 16px 13px; border-radius: 16px; }
    .tolk-caption-final { font-size: 1.15rem; }
    .tolk-caption-partial { font-size: 1rem; }
}

/* --- Språkvelger-modal (over videoen) --- */
.tolk-lang-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,10,20,.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: tolkFadeIn .2s ease;
}
@keyframes tolkFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tolk-lang-modal {
    width: min(560px, 92%);
    max-height: 82%;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(18,26,44,.98), rgba(12,18,32,.98));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 70px rgba(0,0,0,.6);
    overflow: hidden;
}
.tolk-lang-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 12px;
}
.tolk-lang-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}
.tolk-lang-title .material-icons { color: #4da3ff; }
.tolk-lang-close {
    background: rgba(255,255,255,.08);
    border: none;
    color: rgba(255,255,255,.8);
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.tolk-lang-close:hover { background: rgba(255,255,255,.16); }
.tolk-lang-sub {
    padding: 0 22px 14px;
    color: rgba(255,255,255,.55);
    font-size: .85rem;
}
.tolk-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 4px 22px 22px;
    overflow-y: auto;
}
.tolk-lang-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.tolk-lang-btn:hover {
    background: rgba(77,163,255,.16);
    border-color: rgba(77,163,255,.5);
    transform: translateY(-1px);
}
.tolk-lang-flag { font-size: 1.5rem; line-height: 1; }
/* Twemoji swapper flagg-emoji -> <img class="emoji"> (Windows viser ikke flagg-
   emoji). Uten eksplisitt storrelse blir SVG-flagget usynlig. Samme regel som
   .interpreter-lang-flag img.emoji. */
.tolk-lang-flag img.emoji { width: 1.4em; height: 1.4em; vertical-align: -0.2em; }
.tolk-lang-names { display: flex; flex-direction: column; min-width: 0; }
.tolk-lang-name { font-size: .95rem; font-weight: 600; }
.tolk-lang-native { font-size: .8rem; color: rgba(255,255,255,.55); }

/* ===== refv: Lag henvisning — «Velger -> Dokument» (redesign 2026-07) ===== */
.refv{display:flex!important;flex-direction:row!important;padding:0!important;background:#F4F6F9;overflow:hidden}
.refv .refv-velger{width:372px;flex:none;background:#fff;border-right:1px solid #E2E8F0;
  padding:26px;display:flex;flex-direction:column;position:relative;overflow-y:auto}
.refv-tittel{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:#14243E;margin:0 0 20px}
.refv-tittel .material-icons{color:#1976d2;font-size:22px}
.refv-lukk{position:absolute;top:16px;right:16px;width:34px;height:34px;border:none;background:transparent;
  color:#64748B;font-size:22px;cursor:pointer;border-radius:8px;line-height:1}
.refv-lukk:hover{background:#EEF2F7}
.refv-label{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#64748B;margin:16px 0 9px}
.refv-label:first-of-type{margin-top:0}
.refv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.refv-chip{border:1.5px solid #D7DEE8;background:#fff;border-radius:10px;padding:9px 13px;
  font:inherit;font-size:13.5px;font-weight:600;color:#334155;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.refv-chip .material-icons{font-size:16px;color:#64748B}
.refv-chip.is-valgt{border-color:#1976d2;background:#EAF3FD;color:#0D47A1;box-shadow:0 0 0 3px rgba(25,118,210,.12)}
.refv-chip.is-valgt .material-icons{color:#1976d2}
.refv-sok{display:flex;align-items:center;gap:8px;border:1.5px solid #D7DEE8;border-radius:10px;
  padding:2px 10px;background:#FBFCFE;margin-bottom:6px}
.refv-sok .refm-search-input{border:none!important;background:transparent!important;box-shadow:none!important;padding:8px 2px}
.refv-liste{max-height:170px;overflow-y:auto;margin-bottom:4px;border-radius:10px}
.refv-liste .refm-category-header{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#94A3B8;padding:10px 4px 4px;display:flex;gap:6px;align-items:center}
.refv-liste .refm-category-header .material-icons{display:none}
.refv-liste .refm-specialty-btn{width:100%;display:flex;align-items:center;gap:9px;border:none;background:transparent;
  border-radius:8px;padding:8px 9px;font:inherit;font-size:14px;color:#334155;cursor:pointer;text-align:left}
.refv-liste .refm-specialty-btn:hover{background:#F1F5F9}
.refv-liste .refm-specialty-btn.is-selected,.refv-liste .refm-specialty-btn.is-active{background:#EAF3FD;color:#0D47A1;font-weight:600}
.refv-liste .refm-specialty-btn .material-icons{font-size:17px;color:#64748B}
.refv-aarsak{min-height:84px;border-radius:10px;font-size:14px;line-height:1.5}
.refv-maler{margin-top:8px;font-size:12.5px;color:#64748B}
.refv-maler .refm-chip,.refv-maler .refm-specialty-btn{font-size:12.5px}
.refv-generer{margin-top:18px;width:100%;border-radius:10px!important;padding:13px!important;font-size:15px!important;
  font-weight:700!important;display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 6px 18px rgba(25,118,210,.3)}
.refv-generer:disabled{box-shadow:none}
.refv-semal{margin-top:11px;text-align:center;font-size:12.5px;color:#64748B}
.refv-lenke{border:none;background:transparent;color:#1976d2;font:inherit;font-size:12.5px;cursor:pointer;padding:0;text-decoration:underline}
.refv-lenke:disabled{color:#B6C2D2;text-decoration:none}

.refv-dokflate{flex:1;padding:26px 32px;display:flex;flex-direction:column;overflow:hidden}
.refv-papir{flex:1;background:#fff;border-radius:6px;
  box-shadow:0 2px 6px rgba(15,23,42,.08),0 14px 36px rgba(15,23,42,.10);
  padding:34px 42px 30px;display:flex;flex-direction:column;overflow:hidden;position:relative}
.refv-mottaker{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:#64748B;border-bottom:1px solid #E8EDF3;padding-bottom:13px;margin-bottom:18px;flex:none}
.refv-badge{color:#0D47A1;background:#EAF3FD;border-radius:6px;padding:3px 10px;
  letter-spacing:.02em;text-transform:none;font-size:13px;font-weight:600}
.refv-badge--tom{color:#94A3B8;background:#F1F5F9;font-weight:400;font-style:italic}
.refv-skjelett{display:block!important;padding:6px 0!important;border:none!important;background:transparent!important}
.refv-skjelett.is-hidden{display:none!important}
.refv-skjelett .material-icons,.refv-skjelett p{display:none}
.refv-sk{height:12px;border-radius:6px;background:linear-gradient(90deg,#EDF1F6,#F6F8FB,#EDF1F6);margin:9px 0}
.refv-sk--h{height:16px;width:42%;background:#E6EBF2;margin-top:20px}
.refv-resultat{flex:1;display:flex;flex-direction:column;min-height:0}
.refv-resultat.is-hidden{display:none}
.refv-verktoy{display:flex;justify-content:flex-end;gap:8px;border:none!important;background:transparent!important;
  padding:0 0 12px!important;margin:0!important;flex:none}
.refv-vbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid #D7DEE8;background:#fff;
  border-radius:8px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;color:#334155;cursor:pointer}
.refv-vbtn .material-icons{font-size:16px;color:#64748B}
.refv-vbtn--primar{background:#14243E;color:#fff;border-color:#14243E}
.refv-vbtn--primar .material-icons{color:#fff}
.refv-doktekst{flex:1;border:none!important;background:transparent!important;box-shadow:none!important;resize:none;
  font-family:Georgia,'Source Serif 4',serif!important;font-size:14.5px!important;line-height:1.65!important;
  color:#1E293B!important;padding:0!important}
.refv-doktekst:focus{outline:none}

/* ==========================================================================
   refpdf — redigerbar PDF-forhåndsvisning for henvisning (manuelt appendet)
   A4-arket speiler jsPDF-outputen: 20mm marger, helvetica, pt-størrelser.
   ========================================================================== */
.refpdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: none;
  flex-direction: column;
  background: rgba(15, 20, 30, 0.82);
  backdrop-filter: blur(6px);
  outline: none;
}
.refpdf-overlay.is-open { display: flex; }

.refpdf-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: rgba(10, 14, 22, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.refpdf-bar-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}
.refpdf-bar-hint .material-icons { font-size: 17px; color: #7fb3ff; }
.refpdf-bar-actions { display: flex; align-items: center; gap: 10px; }
.refpdf-btn { white-space: nowrap; }
.refpdf-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 6px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.refpdf-close:hover { background: rgba(255, 255, 255, 0.22); }
.refpdf-close .material-icons { font-size: 20px; }

.refpdf-scroller {
  flex: 1 1 auto;
  overflow: auto;
  padding: 28px 16px 48px;
}

/* Selve A4-arket — alltid hvitt papir, også i mørkt tema */
.refpdf-ark {
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 20mm;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  border-radius: 2px;
}
@media (max-width: 860px) {
  .refpdf-ark { width: 100%; min-height: auto; }
}

/* Redigerbare felter: diskré affordance på hover/fokus */
.refpdf-ark [contenteditable] {
  border-radius: 3px;
  outline: 2px dashed transparent;
  outline-offset: 2px;
  transition: outline-color 0.12s ease, background 0.12s ease;
  cursor: text;
}
.refpdf-ark [contenteditable]:hover { outline-color: rgba(59, 130, 246, 0.45); }
.refpdf-ark [contenteditable]:focus {
  outline: 2px solid rgba(59, 130, 246, 0.75);
  background: rgba(59, 130, 246, 0.06);
}
.refpdf-ark [contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: #b6bcc6;
}

.refpdf-topp {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10mm;
}
.refpdf-avsender { min-width: 60mm; }
.refpdf-kontor { font-weight: 700; font-size: 11pt; line-height: 5mm; }
.refpdf-adresse, .refpdf-tlf { font-size: 10pt; line-height: 4.5mm; }
.refpdf-dato { font-size: 10pt; text-align: right; min-width: 30mm; }

.refpdf-tittelrad {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10mm;
  margin-top: 8mm;
  padding-bottom: 3mm;
  border-bottom: 0.3mm solid #b4b4b4;
}
.refpdf-tittel {
  margin: 0;
  font-size: 15pt;
  font-weight: 700;
  color: #111;
  min-width: 40mm;
}
.refpdf-til { font-size: 11pt; color: #505050; text-align: right; min-width: 30mm; }

.refpdf-kropp {
  margin-top: 8mm;
  font-size: 11pt;
  line-height: 5.5mm;
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 60mm;
}

.refpdf-signaturblokk { margin-top: 16mm; }
.refpdf-signatur {
  display: block;
  max-width: 55mm;
  max-height: 28mm;
  margin-bottom: 3mm;
}
.refpdf-signatur.is-hidden { display: none; }
.refpdf-signatur-mangler {
  max-width: 90mm;
  margin-bottom: 3mm;
  padding: 3mm;
  border: 1px dashed #c9ced6;
  border-radius: 3px;
  font-size: 9pt;
  font-style: italic;
  color: #8a919c;
}
.refpdf-signatur-mangler.is-hidden { display: none; }
.refpdf-signaturlinje {
  width: 60mm;
  border-top: 0.2mm solid #646464;
  margin-bottom: 4mm;
}
.refpdf-legenavn { font-weight: 700; font-size: 10pt; line-height: 5mm; }
.refpdf-legetittel, .refpdf-legehpr, .refpdf-legekontor2 { font-size: 10pt; line-height: 5mm; }

.refpdf-footer {
  margin-top: auto;
  padding-top: 10mm;
  font-size: 8pt;
  color: #787878;
}

/* ----- Utskrift: skriv kun arket, rent, uten app og overlay-pynt ----- */
@media print {
  @page { size: A4; margin: 20mm; }
  body.refpdf-open > *:not(#refpdfOverlay) { display: none !important; }
  body.refpdf-open #refpdfOverlay {
    position: static;
    display: block;
    background: none;
    backdrop-filter: none;
  }
  body.refpdf-open .refpdf-bar { display: none !important; }
  body.refpdf-open .refpdf-scroller { overflow: visible; padding: 0; }
  body.refpdf-open .refpdf-ark {
    width: auto;
    min-height: auto;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  body.refpdf-open .refpdf-ark [contenteditable] { outline: none !important; background: none !important; }
  body.refpdf-open .refpdf-ark [contenteditable]:empty::before { content: none; }
  body.refpdf-open .refpdf-signatur-mangler { display: none !important; }
  body.refpdf-open .refpdf-footer { padding-top: 8mm; }
}

/* refv-faner: fanerad over papiret i refv-layouten (gjeninnført 2026-07-13) */
.refv-faner { flex: none; margin: 0 0 12px; padding: 0; border-bottom: none; }

/* refv-mottaker-opprydding 2026-07-13: chips + søk fjernet, lista er eneste
   valgsted — alle 5 kategorier alltid synlige uten scroll */
.refv-liste { max-height: none; overflow: visible; }

/* ===== Fritekst KI — kontekst-deler (kontekst/notat/transkripsjon) ===== */
/* Radene under kons-banneret: avkrysning + tegn-antall + forhåndsvisning.
   CSP-rent (kun klasser). Standard: kontekst+notat på, transkripsjon på kun
   når den er eneste innhold. */
.fk-kons-parts-host { display: flex; flex-direction: column; gap: 2px; margin: 6px 2px 0; }
.fk-kons-parts-host:empty { margin: 0; }
.fk-kons-parts-disabled { opacity: .45; pointer-events: none; }
.fk-kons-part { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.fk-kons-part:hover { background: #f4f7fb; }
.fk-kons-part-off { opacity: .5; }
.fk-kons-part-cb { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #1f6feb; cursor: pointer; margin: 0; }
.fk-kons-part-label { flex: 1 1 auto; font-size: 13px; color: #1a2233; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-kons-part-count { flex: 0 0 auto; font-size: 11.5px; color: #8b97a8; font-variant-numeric: tabular-nums; }
.fk-kons-part-count-big { color: #c26a00; }
.fk-kons-part-eye { flex: 0 0 auto; font-size: 18px; color: #8b97a8; background: none; border: none; padding: 2px; border-radius: 6px; cursor: pointer; transition: color .12s, background .12s; }
.fk-kons-part-eye:hover { color: #1f6feb; background: #e8f0fe; }

/* Forhåndsvisning av én del */
.fk-kons-preview { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); padding: 24px; }
.fk-kons-preview.fk-kons-preview-open { display: flex; }
.fk-kons-preview-box { width: min(720px, 100%); max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(15,23,42,.35); overflow: hidden; animation: fkKonsMenuIn .14s ease; }
.fk-kons-preview-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef1f5; }
.fk-kons-preview-title { flex: 1 1 auto; font-weight: 600; font-size: 15px; color: #0b4fc4; }
.fk-kons-preview-close { flex: 0 0 auto; font-size: 22px; color: #8b97a8; background: none; border: none; cursor: pointer; padding: 2px; border-radius: 6px; }
.fk-kons-preview-close:hover { color: #1a2233; background: #f4f7fb; }
.fk-kons-preview-body { margin: 0; padding: 18px; overflow-y: auto; font: inherit; font-size: 13.5px; line-height: 1.55; color: #1a2233; white-space: pre-wrap; word-break: break-word; }

/* Fritekst: diskret prisindikator for stor kontekst.
   Vises KUN når estimert input-pris per melding >= terskel (5 kr).
   CSP-rent: kun klasser, ingen inline styles. */
.fk-kons-price { display: flex; justify-content: flex-end; margin-top: 6px; }
.fk-kons-price:empty { display: none; }
.fk-kons-price-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #8a6a12; background: #fdf7e7; border: 1px solid #f0e3ba; border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; line-height: 1.4; }
.fk-kons-price-pill .material-icons { font-size: 13px; color: #c29b2e; }
.fk-kons-price-pill strong { font-weight: 650; color: #7a5c0d; white-space: pre; }

/* ==== Hjemmeside-fanen i innstillingene ==================================
   Status for legesenterets hjemmeside. Badgen har to hovedtilstander:
   LIVE (dyp marine) og FORHÅNDSVISNING (rav) — bevisst ikke grønt. */
.hs-topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hs-hoved { min-width: 0; }
.hs-badge { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; line-height: 1.6; white-space: nowrap; }
.hs-b-live { background: #1e3a8a; color: #fff; }
.hs-b-utkast { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.hs-b-arbeid { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.hs-b-ingen { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.hs-adresse { font-size: 12.5px; color: #475569; margin-top: 2px; font-variant-numeric: tabular-nums; word-break: break-all; }
.hs-lenker { margin: 10px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.hs-knapp { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 7px; text-decoration: none; color: #1e40af; background: #fff; border: 1px solid #bfdbfe; }
.hs-knapp:hover { background: #eff6ff; }
.hs-knapp.hs-primar { background: #1e40af; color: #fff; border-color: #1e40af; }
.hs-knapp.hs-primar:hover { background: #1e3a8a; }
/* Gratis-blokka i foerstepaaloggings-modalen (Variant B): blaa aksentflate,
   groenn GRATIS-pille, kontakt-lenke — oeyet skal falle paa gratis-budskapet. */
.hsm-gratis { border: 1px solid #cddcf3; background: #f2f7fe; border-left: 4px solid #1d4fc7; border-radius: 0 10px 10px 0; padding: 13px 16px; margin: 0 0 12px; }
.hsm-gratis-pille { display: inline-block; background: #12855a; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.hsm-gratis p { margin: 0 0 6px; color: #1e293b; }
.hsm-gratis-andre { font-size: 12.5px; color: #475569; }
.hsm-gratis-andre a { color: #1d4fc7; font-weight: 600; }
html[data-theme="dark"] .hsm-gratis { background: #16233b; border-color: #2b3d5f; border-left-color: #5a86e0; }
html[data-theme="dark"] .hsm-gratis p { color: #dbe4f0; }
html[data-theme="dark"] .hsm-gratis-andre { color: #9fb0c8; }
html[data-theme="dark"] .hsm-gratis-andre a { color: #7cabf0; }
/* Vilkaarslista i Hjemmeside-fanen: fire fakta i noektern etikett-liste. */
.hs-vilkaar { border: 1px solid #dde4ec; background: #fafbfd; border-radius: 10px; padding: 3px 14px; margin-top: 10px; }
.hs-vk-rad { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef2f6; align-items: baseline; }
.hs-vk-rad:last-child { border-bottom: none; }
.hs-vk-etikett { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6b7d; }
.hs-vk-rad p { margin: 0; font-size: 13px; color: #333e4c; line-height: 1.55; }
.hs-vk-rad a { color: #0d5c86; font-weight: 600; }
html[data-theme="dark"] .hs-vilkaar { background: #1a2230; border-color: #2c3850; }
html[data-theme="dark"] .hs-vk-rad { border-bottom-color: #26304a; }
html[data-theme="dark"] .hs-vk-etikett { color: #8ea0b8; }
html[data-theme="dark"] .hs-vk-rad p { color: #c3cddb; }
html[data-theme="dark"] .hs-vk-rad a { color: #7cc4ea; }
@media (max-width: 560px){ .hs-vk-rad { grid-template-columns: 1fr; gap: 3px; } }
.hs-abo { border-top: 1px solid #e5e7eb; margin-top: 10px; padding-top: 10px; }
.hs-mini { display: block; width: 100%; max-width: 420px; border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 2px 10px rgba(15,23,42,.08); margin-bottom: 12px; }
a:has(> .hs-mini):hover .hs-mini { box-shadow: 0 4px 16px rgba(15,23,42,.16); }

/* ============================================================================
   CSP-fikser: inline styles / <style>-injeksjon flyttet hit (streng CSP beholdt).
   ============================================================================ */
/* mic-health-banner — flyttet fra injisert <style> i mic-health-monitor.js */
.mic-health-banner{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-130%);
  z-index:2000;max-width:min(560px,94vw);margin-top:10px;
  display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:12px;color:#fff;
  font-family:'Roboto',system-ui,sans-serif;
  box-shadow:0 8px 28px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.34,1.3,.64,1);}
.mic-health-banner.is-visible{transform:translateX(-50%) translateY(0);}
.mic-health-banner.mh-info{background:linear-gradient(135deg,#475569 0%,#334155 100%);}
.mic-health-banner.mh-alert{background:linear-gradient(135deg,#d32f2f 0%,#b71c1c 100%);
  box-shadow:0 8px 28px rgba(183,28,28,.38),0 2px 6px rgba(0,0,0,.18);}
.mic-health-banner .mh-ico{flex:none;font-size:24px;line-height:1.1;margin-top:1px;}
.mic-health-banner .mh-body{flex:1;min-width:0;}
.mic-health-banner .mh-title{font-weight:700;font-size:.98rem;margin:0 0 2px;}
.mic-health-banner .mh-detail{font-size:.86rem;line-height:1.45;opacity:.96;margin:0;}
.mic-health-banner .mh-close{flex:none;background:rgba(255,255,255,.18);border:none;color:#fff;
  width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s;}
.mic-health-banner .mh-close:hover{background:rgba(255,255,255,.34);}
/* Nivåbanner (gult) + «Test mikrofon»-knapp — feilrapport #19 */
.mic-health-banner.mh-level{background:linear-gradient(135deg,#f9a825 0%,#ef6c00 100%);color:#1a1a1a;
  box-shadow:0 8px 28px rgba(239,108,0,.34),0 2px 6px rgba(0,0,0,.18);}
.mic-health-banner.mh-level .mh-close{background:rgba(0,0,0,.14);color:#1a1a1a;}
.mic-health-banner.mh-level .mh-close:hover{background:rgba(0,0,0,.26);}
.mic-health-banner .mh-test{display:none;margin-top:8px;padding:6px 14px;border:none;border-radius:8px;
  background:#fff;color:#1a1a1a;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.2);}
.mic-health-banner .mh-test:hover{background:#f1f5f9;}
.mic-health-banner.mh-has-test .mh-test{display:inline-block;}
.mic-health-banner.mh-alert .mh-test{color:#b71c1c;}
@media (prefers-reduced-motion:reduce){.mic-health-banner{transition:none;}}
@media print{.mic-health-banner{display:none!important;}}
/* KI-resume-dialogens knapper — flyttet fra inline style i main.js */
.main-bm-close-btn.main-bm-primary{background:#1976d2;color:#fff}
.main-bm-close-btn.main-bm-mt8{margin-top:8px}
/* Abonnementsseksjon i bruksoversikten — flyttet fra inline style i usage-dashboard.js */
.udb-payments-header.udb-mt24{margin-top:24px}
.ud-payments-total .material-icons{font-size:16px;vertical-align:text-bottom;margin-right:4px}
.ud-invoice-link .material-icons{font-size:14px;vertical-align:text-bottom}

/* ============ kiverktoysok — kildesøk (alle klasser kvsok-*) ============ */
.kvsok-hs{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.16);border-radius:22px;padding:.28rem .75rem;width:250px;transition:background .15s}
.kvsok-hs:focus-within{background:rgba(255,255,255,.26)}
.kvsok-hs-ic{color:#fff;font-size:20px}
.kvsok-hs-input{background:transparent;border:0;outline:0;color:#fff;font-size:.92rem;width:100%;font-family:inherit}
.kvsok-hs-input::placeholder{color:rgba(255,255,255,.75)}
.kvsok-dd{display:none;position:absolute;top:56px;right:auto;background:#fff;border:1px solid var(--border-light,#e0e0e0);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.22);padding:.5rem;width:440px;max-width:92vw;max-height:70vh;overflow:auto;z-index:2000}
.kvsok-dd.kvsok-open{display:block}
.kvsok-g{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:#757575;font-weight:700;margin:.5rem .3rem .2rem;display:flex;align-items:center;gap:.4rem}
.kvsok-hit{display:flex;justify-content:space-between;gap:1rem;align-items:center;width:100%;text-align:left;padding:.5rem .6rem;border:0;background:transparent;border-radius:8px;text-decoration:none;color:#212121;font-size:.9rem;font-family:inherit;cursor:pointer}
.kvsok-hit:hover{background:#e3f2fd}
.kvsok-cat{color:#757575;font-size:.8rem;white-space:nowrap}
.kvsok-badge{font-size:.6rem;padding:.08rem .38rem;border-radius:5px;font-weight:700}
.kvsok-live{background:#e3f2fd;color:#1976d2}.kvsok-lokal{background:#eef3f8;color:#1668a8}.kvsok-pas{background:#fdf0e6;color:#c26a1b}.kvsok-hdir{background:#eef3f8;color:#1976d2}.kvsok-spc{background:#fce4ec;color:#c2185b}
.kvsok-frist{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.kvsok-rett{display:inline-block;font-weight:700;font-size:.72rem;padding:.05rem .45rem;border-radius:16px}
.kvsok-ja{background:#e3f5ec;color:#1a7a52}.kvsok-nei{background:#fde7e5;color:#c0392b}.kvsok-q{background:#eef1f4;color:#667}
.kvsok-klin{margin-top:.5rem}.kvsok-klin summary{cursor:pointer;color:#8a97a2;font-size:.82rem;padding:.35rem .3rem}
.kvsok-empty{color:#8a97a2;padding:.5rem;font-size:.9rem}
/* modal */
.kvsok-modal{display:none;position:fixed;inset:0;background:rgba(12,32,52,.5);z-index:3000;overflow:auto;padding:3vh 1rem}
.kvsok-modal.kvsok-open{display:block}
.kvsok-noscroll{overflow:hidden}
.kvsok-mbox{max-width:760px;margin:0 auto;background:#fff;border-radius:14px;padding:1.1rem 1.4rem 1.5rem;box-shadow:0 24px 70px rgba(0,0,0,.35);font-family:inherit;color:#233}
.kvsok-mhead{display:flex;align-items:baseline;gap:.6rem;border-bottom:2px solid #e0e0e0;padding-bottom:.5rem}
.kvsok-mhead h2{font-size:1.2rem;margin:0;flex:1;color:#0d47a1}
.kvsok-muted{color:#757575;font-size:.85rem}
.kvsok-x{margin-left:auto;background:#eef3f8;color:#456;border:0;border-radius:8px;padding:.3rem .6rem;cursor:pointer;font-size:1rem}
.kvsok-busy,.kvsok-err{padding:1.2rem;color:#555}.kvsok-err{color:#c0392b}
.kvsok-foot{display:block;margin-top:1.4rem;color:#7a8b98;font-size:.82rem}
.kvsok-forms{margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.kvsok-fbtn{font-size:.8rem;padding:.3rem .6rem;border:1px solid #e0e0e0;background:#fff;color:#1976d2;border-radius:8px;cursor:pointer;font-family:inherit}
.kvsok-fbtn.kvsok-on{background:#1976d2;color:#fff;border-color:#1976d2}
.kvsok-kd{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#eaf6ef;border:1px solid #bfe3ce;border-radius:12px;padding:.55rem .85rem;margin:.6rem 0}
.kvsok-kdlab{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#1f8a68;font-weight:700}
.kvsok-kd b{font-size:1.05rem;color:#12603f}
.kvsok-cpbtn{background:#1f8a68;color:#fff;border:0;border-radius:8px;padding:.35rem .7rem;cursor:pointer;font-family:inherit}
.kvsok-copied{background:#1f8a68!important;color:#fff!important}
.kvsok-sek{margin-top:.9rem}
.kvsok-st{font-weight:700;color:#0d47a1;font-size:.95rem;border-left:3px solid #1976d2;padding-left:.5rem;margin-bottom:.3rem}
.kvsok-tx{margin:.2rem 0;font-size:14.5px;line-height:1.5}
.kvsok-inter .kvsok-st{border-left-color:#d9822b}
.kvsok-warn{font-size:.68rem;font-weight:600;color:#b96b12;background:#fdf0e0;padding:.08rem .4rem;border-radius:6px;margin-left:.4rem}
/* ---- Refusjon (§2 blå resept + §3 individuell stønad) ---- */
.kvsok-ref .kvsok-st{border-left-color:#1976d2}
.kvsok-refc{border:1px solid #e3e8ee;border-left-width:4px;border-radius:10px;padding:.7rem .8rem;margin:.55rem 0}
.kvsok-refblaa{border-left-color:#1976d2;background:linear-gradient(180deg,#f7fbff,#fff)}
.kvsok-refind{border-left-color:#e0912f;background:linear-gradient(180deg,#fffdf5,#fff)}
.kvsok-refunntak{border-left-color:#e0912f}
.kvsok-refbadge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:.28rem .6rem;border-radius:20px;margin-bottom:.5rem}
.kvsok-rb1{background:#e6f0fb;color:#1257a3}
.kvsok-rb2{background:#fdeecb;color:#9a6a00}
.kvsok-rb3{background:#fbe1cf;color:#9a4a00}
.kvsok-rdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.kvsok-dg{background:#2e9e5b}.kvsok-da{background:#e0912f}.kvsok-dr{background:#d9663b}
.kvsok-reflbl{font-size:.72rem;font-weight:700;color:#5b6b7b;margin:.5rem 0 .15rem}
.kvsok-reftx{font-size:14px;line-height:1.45;color:#28323d}
.kvsok-rchips{display:flex;flex-wrap:wrap;gap:6px;margin:.3rem 0 .1rem}
.kvsok-rchip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;background:#fff;border:1px solid #e3e8ee;border-radius:7px;padding:.28rem .5rem}
.kvsok-rchip b{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:#1976d2}
.kvsok-rchip.kvsok-ri b{color:#b7791f}
.kvsok-rcp{border:0;background:none;color:#8a97a4;font-size:.72rem;font-family:inherit;cursor:pointer;border-left:1px solid #e3e8ee;padding:0 0 0 6px;margin-left:2px}
.kvsok-rcp:hover{color:#1976d2}
.kvsok-rcp.kvsok-copied{color:#1f8a68;font-weight:700}
.kvsok-vilkar{display:flex;gap:8px;font-size:.82rem;color:#44515f;background:#f4f7fb;border-radius:7px;padding:.45rem .6rem;margin-top:.45rem}
.kvsok-vn{font-family:ui-monospace,monospace;font-weight:700;font-size:.74rem;color:#5b6b7b;flex:0 0 auto}
.kvsok-refnote{font-size:.82rem;line-height:1.4;background:#fff4e0;border:1px solid #f6dca0;color:#8a5a00;border-radius:7px;padding:.45rem .6rem;margin-top:.5rem}
.kvsok-refnote b{color:#7a4e00}
.kvsok-rdet{margin-top:.5rem}
.kvsok-rdet>summary{cursor:pointer;font-size:.8rem;font-weight:600;color:#1976d2;list-style:none;user-select:none}
.kvsok-rdet>summary::-webkit-details-marker{display:none}
.kvsok-rdet>summary::before{content:"▸ ";color:#8a97a4}
.kvsok-rdet[open]>summary::before{content:"▾ "}
.kvsok-refsrc{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-top:.6rem;padding-top:.5rem;border-top:1px dashed #e3e8ee}
.kvsok-refsrc .kvsok-muted{font-size:.72rem}
.kvsok-rlink{font-size:.78rem;font-weight:600;text-decoration:none;white-space:nowrap}
.kvsok-rlink.kvsok-lb{color:#1976d2}
.kvsok-rlink.kvsok-li{color:#b7791f}
/* ---- Antibiotikaveileder ---- */
.kvsok-abxkap{color:#5b6b7b;font-size:.82rem;margin-top:2px}
.kvsok-abxsrc{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;background:#eef4fb;border:1px solid #d3e3f4;border-radius:8px;padding:.5rem .7rem;margin:.2rem 0 .7rem;font-size:.8rem;color:#3a5268}
.kvsok-abxsrc a{color:#1976d2;font-weight:600;text-decoration:none;white-space:nowrap}
.kvsok-abxind{margin:.4rem 0 .2rem}
.kvsok-abxregst{margin-top:1rem}
.kvsok-abxreg{border:1px solid #e3e8ee;border-radius:10px;padding:.6rem .7rem;margin:.55rem 0;background:#fbfdff}
.kvsok-abxreghd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.45rem}
.kvsok-abxregtit{font-weight:600;color:#0d47a1;font-size:.9rem}
.kvsok-abxvar{background:#e8f0e9;color:#1f6b45;border:1px solid #bfe0cc;border-radius:20px;padding:.2rem .6rem;font-size:.78rem;font-weight:600;white-space:nowrap}
.kvsok-dose{display:flex;align-items:center;justify-content:space-between;gap:.7rem;background:#f2f8ff;border:1px solid #cfe3f7;border-radius:9px;padding:.55rem .35rem .55rem .8rem;margin:.35rem 0}
/* To ulike ting delte klassen kvsok-dose: standarddose-stripa med «Kopier»-
   knappen (kvsok.js:377) og hele SPC-doseringsseksjonen (kvsok.js:237).
   Regelen over er skrevet for stripa — en flex-rad med knappen skjøvet til
   høyre — og seksjonen arvet den. Da ble hvert avsnitt i doseringen sin egen
   flex-kolonne: Ozempics doseopptrapping sto i fem loddrette striper på to-tre
   ord hver, og align-items:center midtstilte «Generelt» og «Voksne» mot dem.
   Kollisjonen oppsto 22.08 da seksjonen fikk klassen som scoping-klasse.
   Seksjonen bærer BEGGE klassene, stripa bare den ene, så denne regelen treffer
   presist seksjonen. Padding settes symmetrisk: stripas skjeve venstre-tunge
   padding var laget for knappen som ikke finnes her. */
.kvsok-sek.kvsok-dose{display:block;padding:.55rem .8rem}
.kvsok-dosetx{font-size:1.02rem;font-weight:600;color:#12365e;line-height:1.35}
.kvsok-dosecp{flex:0 0 auto;background:#1f8a68;color:#fff;border:0;border-radius:8px;padding:.42rem .9rem;font-size:.86rem;font-family:inherit;font-weight:600;cursor:pointer;transition:background .12s}
.kvsok-dosecp:hover{background:#19795b}
.kvsok-dosecp.kvsok-copied{background:#12684d}
/* ---- Legemiddelmangel (DMP) ---- */
.kvsok-mangel{border:1px solid #f3c9a3;background:#fff6ec;border-radius:10px;padding:.55rem .7rem;margin:.5rem 0}
.kvsok-mghd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-weight:700;color:#9a4a00;font-size:.9rem;margin-bottom:.35rem}
.kvsok-mgkilde{font-weight:600;font-size:.74rem;color:#b07a3c}
.kvsok-mgrow{display:flex;flex-direction:column;padding:.3rem 0;border-top:1px dashed #f0d6ba}
.kvsok-mgrow:first-of-type{border-top:0}
.kvsok-mgnavn{font-size:.86rem;color:#5a3a12;font-weight:600}
.kvsok-mgmeta{font-size:.78rem;color:#8a6a45}
.kvsok-mgdet{margin-top:.3rem}
.kvsok-mgdet>summary{cursor:pointer;font-size:.78rem;font-weight:600;color:#9a4a00;list-style:none}
.kvsok-mgdet>summary::-webkit-details-marker{display:none}
.kvsok-mgtag{font-size:.72rem;font-weight:700;color:#9a4a00;background:#fbe4ce;border-radius:5px;padding:.05rem .32rem;margin-left:.3rem;white-space:nowrap}
.kvsok-lab2{font-weight:700;color:#0d47a1;margin:.4rem 0 .1rem}
.kvsok-dl{padding:.35rem 0;border-top:1px solid #eef3f7;font:14.5px/1.45 inherit}
/* ── Doseringsvisning (kvsok-dose) ──────────────────────────────────────
   Seksjonstittel som kapitél, undergrupper med venstremarkør, luftige
   doselinjer. Scopet til .kvsok-dose saa refusjon/indikasjon (samme
   kvsok-sek/kvsok-st) ikke paavirkes. */
.kvsok-dose>.kvsok-st{display:flex;align-items:center;gap:.6rem;font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#0d47a1;margin:0 0 .85rem;padding:0;border:0;background:none}
.kvsok-dose>.kvsok-st::after{content:"";flex:1;height:1px;background:#e2e9ee}
.kvsok-dose .kvsok-lab2{margin:1.15rem 0 .1rem;padding:0 0 0 .7rem;border-left:3px solid #1976d2;font-size:.95rem;line-height:1.35}
.kvsok-dose .kvsok-lab2:first-of-type{margin-top:0}
.kvsok-dose .kvsok-lab2 b{font-weight:650}
.kvsok-dose .kvsok-dl{padding:.42rem 0 .42rem .7rem;border-bottom:1px solid #eef3f6;margin-left:3px}
.kvsok-dose .kvsok-dl:last-child{border-bottom:0}
.kvsok-dose .kvsok-dl span{display:block;max-width:76ch}
/* Dosetabeller (brukes ogsaa i v2-seksjonene): kort med topplist og indre
   rullefelt, saa brede SPC-tabeller ikke dytter modalen sidelengs. */
.kvsok-dtw{margin:.9rem 0 .3rem;border:1px solid #dfe7ed;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(21,32,41,.04);overflow:hidden}
.kvsok-dtc{display:flex;align-items:center;gap:.45rem;padding:.5rem .85rem;background:#f7fafc;border-bottom:1px solid #e3eaf0;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#7c8994;margin:0}
.kvsok-dtc::before{content:"";width:5px;height:5px;border-radius:50%;background:#1976d2;flex:none}
.kvsok-dtsc{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kvsok-dt{border-collapse:separate;border-spacing:0;width:100%;table-layout:auto;margin:0;font-size:13.5px}
.kvsok-dt th,.kvsok-dt td{padding:.5rem .8rem;text-align:left;vertical-align:top;border:0;border-bottom:1px solid #eef3f6;white-space:normal}
.kvsok-dt th{background:#eef5fa;color:#0d47a1;font-weight:650;font-size:12.5px;line-height:1.35;border-bottom:1px solid #d7e6f2}
.kvsok-dt th:empty{background:#eef5fa}
.kvsok-dt tr:last-child td{border-bottom:0}
.kvsok-dt tr:hover td{background:#fbfdfe}
.kvsok-dt td{font-variant-numeric:tabular-nums}
.kvsok-dt td:first-child,.kvsok-dt th:first-child{font-weight:550;max-width:26ch}
.kvsok-dt td:not(:first-child){min-width:7.5rem}

/* pakkeforløp */
.kvsok-pfhead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-top:.6rem}
.kvsok-ftbox{background:linear-gradient(135deg,#0d47a1,#1976d2);color:#fff;border-radius:13px;padding:.6rem .85rem;min-width:158px;flex:0 0 auto;box-shadow:0 4px 14px rgba(13,71,161,.25)}
.kvsok-ftlab{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;opacity:.9;font-weight:700;margin-bottom:.35rem}
.kvsok-ftrow{display:flex;justify-content:space-between;gap:.9rem;font-size:.86rem;padding:.12rem 0;align-items:baseline}
.kvsok-ftrow b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.kvsok-pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.9rem;align-items:start}
@media(max-width:640px){.kvsok-pfgrid{grid-template-columns:1fr}.kvsok-pfhead{flex-direction:column-reverse}}
.kvsok-pfcol,.kvsok-pfcard{border:1px solid #e0e0e0;border-radius:13px;padding:.75rem .9rem;background:#fff;margin:.55rem 0}
.kvsok-pfcol.kvsok-chenvis{border-top:3px solid #d64535}.kvsok-pfcol.kvsok-cinnhold{border-top:3px solid #1976d2}
.kvsok-pfh{font-weight:700;color:#0d47a1}
.kvsok-pfi{margin:.35rem 0;color:#33424d;font-size:.95rem}
.kvsok-chk{list-style:none;margin:.5rem 0 0;padding:0}
.kvsok-chk li{position:relative;padding-left:1.35rem;margin:.4rem 0;font-size:14px;line-height:1.42}
.kvsok-chk li:before{content:"✓";position:absolute;left:0;top:0;color:#1f8a68;font-weight:800}
.kvsok-more{margin-top:.9rem;border:1px solid #e0e0e0;border-radius:12px;padding:.2rem .8rem;background:#fafcfe}
.kvsok-more summary{cursor:pointer;color:#1976d2;font-weight:600;padding:.5rem 0}
/* prioritering */
.kvsok-pri{border-collapse:collapse;width:100%;margin:.4rem 0 1rem;font-size:14.5px}
.kvsok-pri th{background:#eef5fa;color:#0d47a1;text-align:left;padding:.45rem .6rem;border-bottom:2px solid #e0e0e0}
.kvsok-pri td{padding:.5rem .6rem;border-bottom:1px solid #e0e0e0;vertical-align:top}
.kvsok-trow{cursor:pointer}.kvsok-trow:hover td{background:#eef6fc}
.kvsok-pgrow td{background:#e7eef5;font-weight:700;color:#0d47a1;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;padding:.35rem .6rem}
.kvsok-det{display:none}.kvsok-det.kvsok-detopen{display:table-row}.kvsok-det td{background:#f7fbfe;padding:.4rem .8rem .7rem}
.kvsok-det b{color:#0d47a1}.kvsok-det ul{margin:.3rem 0 .3rem 1rem;padding:0}
.kvsok-relpf{display:inline-flex;align-items:center;gap:.4rem;margin:.1rem 0 .6rem;padding:.42rem .72rem;background:#eaf4ff;border:1px solid #bcdcfb;border-radius:8px;color:#0d47a1;text-decoration:none;font-size:.86rem;line-height:1.3;transition:background .12s,border-color .12s}
.kvsok-relpf:hover{background:#d8ebff;border-color:#8fc4f5}
.kvsok-relpf b{color:#0d47a1;font-weight:600}
.kvsok-relpf .kvsok-relpfi{font-weight:700}
.kvsok-relpf.kvsok-relpfv{margin:.7rem 0 .2rem}
.kvsok-viewtog{display:inline-flex;gap:.3rem;margin-left:auto}
.kvsok-vbtn{font-size:.75rem;padding:.25rem .55rem;border:1px solid #e0e0e0;background:#fff;color:#1976d2;border-radius:7px;cursor:pointer;font-family:inherit}
.kvsok-vbtn.kvsok-on{background:#1976d2;color:#fff}
.kvsok-cardlab{display:flex;justify-content:space-between;gap:1rem}
.kvsok-vtf{margin:.5rem 0;font-size:.9rem;color:#456}.kvsok-vtf select{padding:.3rem .5rem;border:1px solid #e0e0e0;border-radius:8px}
.kvsok-priv{font-size:.66rem;background:#f0e9fb;color:#6b3fa0;padding:.05rem .35rem;border-radius:6px;font-weight:700}

/* ---- kvsok tooltip (kilder) ---- */
.kvsok-hs{position:relative}
.kvsok-dd{top:calc(100% + 8px);right:0;left:auto}
.kvsok-tt{display:none;position:absolute;top:calc(100% + 11px);right:0;width:520px;max-width:92vw;background:#fff;border-radius:14px;box-shadow:0 16px 44px rgba(12,32,52,.3);padding:.85rem .95rem;z-index:2500;color:#233;cursor:default;font-family:Roboto,sans-serif;text-align:left}
.kvsok-hs:hover:not(:focus-within) .kvsok-tt{display:block;animation:kvsokttin .16s ease}
@keyframes kvsokttin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.kvsok-tt:before{content:"";position:absolute;top:-7px;right:20px;width:14px;height:14px;background:#fff;transform:rotate(45deg);box-shadow:-2px -2px 5px rgba(12,32,52,.05)}
.kvsok-tt-head{display:flex;align-items:center;gap:.4rem;font-weight:700;color:#0d47a1;font-size:.92rem;margin-bottom:.2rem}
.kvsok-tt-head .material-icons{font-size:20px;color:#1976d2}
.kvsok-tt-sec{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:#9fb0bd;font-weight:700;margin:.6rem 0 .3rem}
.kvsok-tt-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem .7rem}
.kvsok-tt-item{display:flex;gap:.45rem;align-items:flex-start}
.kvsok-tt-ic{font-size:1rem;line-height:1.25;flex:0 0 auto}
.kvsok-tt-item b{display:block;font-size:.79rem;color:#1c2b36;font-weight:600;line-height:1.2}
.kvsok-tt-item small{display:block;color:#7a8b98;font-size:.69rem;line-height:1.18;margin-top:1px}
.kvsok-tt-foot{margin-top:.7rem;padding-top:.5rem;border-top:1px solid #eef3f7;font-size:.68rem;color:#9fb0bd;text-align:center}


/* ===== kvsok v2: felleskatalog-først + aggregert/kollapset refusjon ===== */
.kvsok-bchip{display:inline-flex;align-items:center;gap:.25rem;background:#1e88e5;color:#fff;font-size:.72rem;font-weight:700;padding:.14rem .5rem;border-radius:999px;margin-left:.5rem;box-shadow:0 0 0 2px rgba(30,136,229,.18)}
.kvsok-det2{border:1px solid #e5e9f0;border-radius:10px;margin:.5rem 0;overflow:hidden;background:#fff}
.kvsok-det2>summary{cursor:pointer;list-style:none;padding:.6rem .8rem;font-weight:700;font-size:.9rem;color:#1e293b;background:#f8fafc;display:flex;align-items:center;justify-content:space-between}
.kvsok-det2>summary::-webkit-details-marker{display:none}
.kvsok-det2>summary::after{content:"▾";color:#94a3b8;font-size:.8rem}
.kvsok-det2[open]>summary::after{content:"▴"}
.kvsok-det2>.kvsok-tx{padding:.35rem .85rem .8rem;margin:0}
.kvsok-ref2{border:1px solid #dbe4f0;border-radius:12px;margin:.7rem 0 .3rem;overflow:hidden;background:#fff}
.kvsok-ref2>summary.kvsok-ref2sum{cursor:pointer;list-style:none;padding:.7rem .9rem;background:#f1f6fc;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.kvsok-ref2>summary::-webkit-details-marker{display:none}
.kvsok-ref2t{font-weight:800;color:#0e3a6b;font-size:.95rem;white-space:nowrap}
.kvsok-ref2meta{font-size:.8rem;color:#475569;text-align:right}
.kvsok-ref2exp{color:#1d4ed8;font-weight:700}
.kvsok-ref2[open] .kvsok-ref2exp{visibility:hidden}
.kvsok-ref2body{padding:.5rem .9rem .8rem}
.kvsok-r2card{border-top:1px dashed #e2e8f0;padding:.65rem 0}
.kvsok-r2card:first-child{border-top:0}
.kvsok-r2hd{font-weight:700;font-size:.86rem;color:#0f172a;display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}
.kvsok-r2bruk{font-size:.9rem;line-height:1.45;color:#1e293b;margin:.15rem 0 .4rem}
.kvsok-r2ind .kvsok-r2hd{color:#7c2d12}
.kvsok-r2unntak{background:#fff7ed;border-radius:8px;padding:.55rem .6rem}
.kvsok-rpills{display:flex;flex-wrap:wrap;gap:.3rem;margin:.15rem 0 .35rem}
.kvsok-rpill{border:0;background:#e0edff;color:#1e40af;font-weight:700;font-size:.78rem;padding:.2rem .5rem;border-radius:6px;cursor:pointer;font-family:inherit}
.kvsok-rpill:hover{background:#c7ddff}
.kvsok-rp-hide{display:none}
.kvsok-rpmore{border:1px dashed #94a3b8;background:#fff;color:#475569;font-weight:700;font-size:.76rem;padding:.2rem .5rem;border-radius:6px;cursor:pointer;font-family:inherit}
.kvsok-r2vilk{margin:.2rem 0}
.kvsok-r2vilk>summary{cursor:pointer;list-style:none;font-size:.8rem;font-weight:700;color:#1d4ed8}
.kvsok-r2vilk>summary::-webkit-details-marker{display:none}
/* kvsok v2: HELFO individuell-søknad direktelenker */
.kvsok-helfo{margin-top:.7rem;padding:.7rem .8rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px}
.kvsok-helfo-lbl{font-weight:800;font-size:.85rem;color:#0e3a6b;margin-bottom:.5rem}
.kvsok-helfo-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.kvsok-helfo-btn{flex:1 1 auto;text-align:center;text-decoration:none;font-weight:700;font-size:.86rem;padding:.5rem .7rem;border-radius:8px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.28)}
.kvsok-helfo-btn:hover{filter:brightness(1.06)}
.kvsok-helfo-hint{font-size:.76rem;color:#475569;margin-top:.45rem}
/* CSP-lovlige skjelett-bredder (erstatter inline style="width:%") */
.refv-skw-90{width:90%}.refv-skw-96{width:96%}.refv-skw-88{width:88%}.refv-skw-89{width:89%}.refv-skw-74{width:74%}.refv-skw-72{width:72%}.refv-skw-61{width:61%}

/* kvsok v2: to diskrete HELFO-knapper pr §3-kort */
.kvsok-r2hd{flex-wrap:wrap}
.kvsok-helfo2{display:inline-flex;gap:.35rem;margin-left:auto;flex-wrap:wrap}
.kvsok-helfo2btn{font-size:.72rem;font-weight:700;padding:.14rem .5rem;border-radius:6px;text-decoration:none;background:#e0edff;color:#1d4ed8;border:1px solid #bfdbfe;white-space:nowrap}
.kvsok-helfo2btn:hover{background:#d0e2ff}

/* ===== helsestatus.css ===== lokal helsestatus (smitte + pollen) */
.hs-btn-head{position:relative;display:inline-flex;align-items:center;justify-content:center}
.hs-btn-head .hs-tip{position:absolute;top:calc(100% + 8px);right:0;white-space:nowrap;background:#212121;color:#fff;
  font-size:.74rem;font-weight:500;padding:5px 9px;border-radius:6px;opacity:0;pointer-events:none;transform:translateY(-3px);
  transition:opacity .14s,transform .14s;z-index:10}
.hs-btn-head:hover .hs-tip,.hs-btn-head:focus-visible .hs-tip{opacity:1;transform:translateY(0)}

.hs-modal{position:fixed;inset:0;background:var(--bg-overlay,rgba(33,33,33,.65));display:none;align-items:flex-start;
  justify-content:center;z-index:2000;padding:5vh 16px;overflow:auto}
.hs-modal.hs-open{display:flex}
body.hs-noscroll{overflow:hidden}
.hs-card{width:100%;max-width:840px;background:var(--bg-white,#fff);border-radius:8px;
  box-shadow:0 18px 46px -12px rgba(13,40,71,.45),0 3px 10px -4px rgba(13,40,71,.25);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text-primary,#212121)}
.hs-head{display:flex;align-items:center;gap:13px;padding:15px 18px}
.hs-hic{width:38px;height:38px;border-radius:10px;background:var(--primary-light,#e3f2fd);color:var(--primary,#1976d2);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hs-mtitle{font-weight:700;font-size:1.06rem;line-height:1.15}
.hs-msub{font-size:.8rem;color:var(--text-muted,#5f6b74);margin-top:2px}
.hs-endre{color:var(--primary,#1976d2);font-weight:600;cursor:pointer;margin-left:6px;text-decoration:underline;text-underline-offset:2px}
.hs-x{margin-left:auto;color:#98a2ab;width:30px;height:30px;border:none;background:none;cursor:pointer;font-size:1.1rem;border-radius:8px}
.hs-x:hover{background:var(--bg-hover,#f0f0f0);color:var(--text-secondary,#424242)}

.hs-busy,.hs-empty,.hs-nodata{padding:28px 20px;text-align:center;color:var(--text-muted,#757575);font-size:.9rem}
.hs-empty{padding:14px 18px;text-align:left}

/* framhevet */
.hs-sum{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 18px;background:var(--bg-light,#fafafa);
  border-top:1px solid var(--border-light,#e0e0e0);border-bottom:1px solid var(--border-light,#e0e0e0)}
.hs-sumlab{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:#98a2ab;font-weight:700}
.hs-chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:4px 10px 4px 8px;
  border-radius:999px;background:var(--bg-white,#fff);border:1px solid var(--border-light,#e0e0e0)}
.hs-chip small{color:#98a2ab;font-weight:600}
.hs-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* grid */
.hs-grid{display:grid;grid-template-columns:1fr 1fr}
.hs-grid>.hs-pane:first-child{border-right:1px solid var(--border-light,#e0e0e0)}
.hs-pane{padding:4px 0 8px}
.hs-seclab{display:flex;align-items:center;gap:8px;padding:12px 16px 4px;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted,#5f6b74);font-weight:700}
.hs-src{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;color:#b3bcc4;font-size:.72rem}
.hs-sub{display:flex;align-items:center;padding:8px 16px 1px;font-size:.7rem;font-weight:700;color:#98a2ab;letter-spacing:.03em}
.hs-ssrc{margin-left:auto;font-weight:600;color:#c3ccd3;font-size:.7rem}
.hs-note{padding:6px 16px 2px;font-size:.72rem;color:#98a2ab;font-style:italic}

.hs-r{display:grid;grid-template-columns:1fr 52px auto 74px;align-items:center;gap:10px;padding:5px 16px}
.hs-r:hover{background:var(--bg-light,#fafafa)}
.hs-nm{font-size:.86rem;font-weight:500}
.hs-spk{width:52px;height:20px;display:block}
.hs-val{font-size:.76rem;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-primary,#212121)}
.hs-val b{font-weight:400;color:#9aa4ac;margin-left:5px}
.hs-nodata{padding:0;font-size:.72rem;color:#b3bcc4}

.hs-pill{display:inline-flex;align-items:center;justify-content:center;font-size:.71rem;font-weight:700;padding:3px 0;border-radius:999px;width:74px}
.hs-s-ingen{background:#eceff1;color:#607d8b} .hs-s-lav{background:#e8f5e9;color:#2e7d32}
.hs-s-mod{background:#fff8e1;color:#e08a00} .hs-s-hoy{background:#fff3e0;color:#e65100} .hs-s-svart{background:#ffebee;color:#c62828}
.hs-d-ingen{background:#90a0ac}.hs-d-lav{background:#2e7d32}.hs-d-mod{background:#f9a825}.hs-d-hoy{background:#ef6c00}.hs-d-svart{background:#c62828}

/* pollen */
.hs-pollen{border-top:1px solid var(--border-light,#e0e0e0);background:var(--bg-light,#fafafa);padding:2px 0 8px}
.hs-pgrid{display:grid;grid-template-columns:1fr 1fr}
.hs-pgrid>div:first-child{border-right:1px solid var(--border-light,#e0e0e0)}
.hs-meter{display:grid;grid-template-columns:56px 1fr 74px;align-items:center;gap:11px;padding:5px 16px}
.hs-mn{font-size:.84rem;font-weight:500}
.hs-mt{height:7px;border-radius:6px;background:#e4e8ec;overflow:hidden}
.hs-mf{height:100%;border-radius:6px}
.hs-fc{display:flex;gap:6px;padding:3px 16px}
.hs-fcd{flex:1;text-align:center;background:var(--bg-white,#fff);border:1px solid var(--border-light,#e0e0e0);border-radius:8px;padding:6px 2px}
.hs-day{font-size:.62rem;color:#98a2ab;text-transform:uppercase;letter-spacing:.05em}
.hs-lv{font-size:.72rem;font-weight:700;margin-top:3px}
.hs-t-ingen{color:#607d8b}.hs-t-lav{color:#2e7d32}.hs-t-mod{color:#e08a00}.hs-t-hoy{color:#e65100}.hs-t-svart{color:#c62828}

.hs-foot{display:flex;align-items:center;gap:9px;padding:11px 18px;border-top:1px solid var(--border-light,#e0e0e0);
  background:var(--bg-white,#fff);font-size:.71rem;color:#98a2ab;flex-wrap:wrap}
.hs-foot b{color:var(--text-muted,#5f6b74);font-weight:600}
.hs-geo{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.hs-geobadge{background:var(--primary-light,#e3f2fd);color:var(--primary-dark,#0d47a1);font-weight:700;padding:2px 8px;border-radius:6px;font-size:.7rem}

/* postnr-prompt */
.hs-ask{padding:30px 22px 28px;text-align:center}
.hs-askt{font-weight:700;font-size:1.02rem}
.hs-ask p{color:var(--text-muted,#757575);font-size:.88rem;margin:.4rem auto 16px;max-width:34ch;line-height:1.5}
.hs-askrow{display:flex;gap:8px;justify-content:center}
.hs-pin{width:120px;padding:10px 12px;border:1.5px solid var(--border-medium,#bdbdbd);border-radius:8px;font-size:1.1rem;
  text-align:center;letter-spacing:.22em;font-variant-numeric:tabular-nums}
.hs-pin:focus{outline:none;border-color:var(--primary,#1976d2)}
.hs-btn{background:var(--primary,#1976d2);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-weight:600;font-size:.92rem;cursor:pointer}
.hs-btn:hover{background:var(--primary-dark,#0d47a1)}
.hs-askerr{color:var(--accent-error,#d32f2f);font-size:.82rem;margin-top:12px}

@media(max-width:640px){.hs-grid,.hs-pgrid{grid-template-columns:1fr}.hs-grid>.hs-pane:first-child,.hs-pgrid>div:first-child{border-right:none;border-bottom:1px solid var(--border-light,#e0e0e0)}.hs-r{grid-template-columns:1fr 44px auto 70px;gap:8px}}

/* --- pågående arbeid: indikator i headeren (pagaende-arbeid.js) ------------
   Vises KUN for usynlig arbeid — aldri under diktat, der opptaks-UI-et
   allerede forteller det. Dempet varmt, ikke rødt: dette er «vent litt»,
   ikke «noe er galt». */
.pa-indikator{display:inline-flex;align-items:center;gap:7px;margin-right:10px;align-self:center;
  padding:5px 11px 5px 9px;border:1px solid #f0d3b6;border-radius:999px;background:#fdf4ea;
  color:#8a5620;font:600 .8rem/1 inherit;white-space:nowrap;cursor:pointer;
  font-family:inherit;letter-spacing:.01em}
.pa-indikator[hidden]{display:none}
.pa-indikator:hover{background:#fbecdb;border-color:#e8c19c}
.pa-indikator:focus-visible{outline:2px solid #e8833a;outline-offset:2px}
.pa-tid{opacity:.72;font-variant-numeric:tabular-nums}
.pa-prikk{width:7px;height:7px;border-radius:50%;background:#e8833a;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(232,131,58,.55);animation:pa-puls 2.2s infinite}
@keyframes pa-puls{
  0%{box-shadow:0 0 0 0 rgba(232,131,58,.5)}
  70%{box-shadow:0 0 0 8px rgba(232,131,58,0)}
  100%{box-shadow:0 0 0 0 rgba(232,131,58,0)}}
@media (prefers-reduced-motion:reduce){.pa-prikk{animation:none}}

/* helsestatus: CSP-trygge meter-klasser (style-attributter blokkeres av style-src) + kildetag */
.hs-kildetag{margin-left:6px;font-size:.68rem;color:#8a97a3;background:#eef1f4;border-radius:4px;padding:1px 5px;white-space:nowrap;vertical-align:1px}
.hs-w0{width:0}.hs-w1{width:25%}.hs-w2{width:50%}.hs-w3{width:75%}.hs-w4{width:100%}
.hs-f-ingen{background:#90a0ac}.hs-f-lav{background:#2e7d32}.hs-f-mod{background:#f9a825}.hs-f-hoy{background:#ef6c00}.hs-f-svart{background:#c62828}
.hs-geo .hs-geobtn{cursor:pointer;border:1px solid #d5dbe1;background:#fff;color:#5b6770;border-radius:5px;padding:2px 8px;font:inherit;font-size:.72rem;margin-left:6px}
.hs-geo .hs-geobtn.hs-aktiv{background:#2f6fb3;border-color:#2f6fb3;color:#fff}
/* KI-assistent-blokka (MCP) i innstillinger: kommandolinjer med kopier-knapp */
.hs-cmd{display:flex;align-items:center;gap:8px;margin:8px 0}
.hs-cmd code{flex:1;font:12px/1.5 ui-monospace,Consolas,Menlo,monospace;background:#f4f6f8;border:1px solid #dde3e8;border-radius:6px;padding:7px 10px;overflow-x:auto;white-space:nowrap;display:block;min-width:0;color:#123}
.hs-kopier{flex:0 0 auto}
.hs-alt{margin:8px 0}
.hs-alt summary{cursor:pointer;color:#2f6fb3;font-weight:600;font-size:.85rem;padding:2px 0}
.hs-mcphode{font-weight:700;font-size:.8rem;color:#5b6770;text-transform:uppercase;letter-spacing:.04em;margin:10px 0 2px}
/* Videoen og de fire stegbildene. Farger via temavariabler, ellers ville
   figurtekstene blitt uleselige i mørk modus og i høykontrast. Bildene beholder
   hvit bakgrunn uansett tema — de viser en lys ChatGPT-flate. */
.hs-video{display:block;width:100%;max-width:620px;border-radius:10px;
  border:1px solid var(--border-light);background:#0f172a;margin:12px 0 4px;
  box-shadow:0 2px 10px rgba(15,23,42,.08)}
.hs-videotxt{font-size:.78rem;color:var(--text-muted);margin-bottom:4px}
.hs-steg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:12px 0}
.hs-steg figure{margin:0}
.hs-steg img{display:block;width:100%;border-radius:9px;border:1px solid var(--border-light);
  box-shadow:0 2px 10px rgba(15,23,42,.08);background:#fff}
.hs-steg figcaption{font-size:.78rem;line-height:1.45;color:var(--text-muted);margin-top:6px}
@media (max-width:700px){.hs-steg{grid-template-columns:1fr}}

/* Anatomi (3D) i kvsok-søket: gruppebadge, modal med iframe, fullskjerm */
.kvsok-badge.kvsok-3d{background:#e6f0fb;color:#1668a8}
.kvsok-modal.kvsok-anatmodal .kvsok-mbox{max-width:min(1400px,96vw);width:96vw;height:92vh;max-height:92vh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.kvsok-anatmodal .kvsok-mhead{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-bottom:1px solid #e2e8f0;flex:0 0 auto}
.kvsok-anatmodal .kvsok-mhead h2{flex:1;font-size:1.05rem;margin:0}
.kvsok-anatfs,.kvsok-anatny{font:inherit;font-size:.82rem;font-weight:600;color:#123;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:8px;padding:.4rem .8rem;cursor:pointer;text-decoration:none;white-space:nowrap}
.kvsok-anatfs:hover,.kvsok-anatny:hover{border-color:#1668a8;color:#1668a8}
.kvsok-anatwrap{flex:1;min-height:0;background:#0a0f1a}
.kvsok-anatwrap:fullscreen{background:#0a0f1a}
.kvsok-anatif{width:100%;height:100%;border:0;display:block}
.kvsok-anatmodal .kvsok-foot{flex:0 0 auto;padding:.55rem 1rem;border-top:1px solid #e2e8f0;font-size:.78rem}

/* «Utvid»-knappen midlertidig skjult via hidden-attributtet i index.html.
   Nødvendig fordi .action-btn setter display:inline-flex som ellers vinner
   over UA-stilen for [hidden]. Fjernes sammen med hidden ved reaktivering. */
.response-header-actions .action-btn[hidden]{display:none !important}

/* ---------------------------------------------------------------------------
   Hjemmeside/infoskjerm/KI-assistent i mørk modus.
   hs-*-familien ble skrevet med faste lyse farger og hadde ingen mørk variant:
   knappene ble stående som hvite flekker på den mørke panelflaten. Kun farger
   og kanter overstyres her — layouten er felles for begge temaer.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .hs-knapp {
    background: var(--bg-white); color: #93c5fd; border-color: var(--border-medium);
}
html[data-theme="dark"] .hs-knapp:hover { background: var(--bg-hover); }
html[data-theme="dark"] .hs-knapp.hs-primar {
    background: #2563eb; color: #fff; border-color: #2563eb;
}
html[data-theme="dark"] .hs-knapp.hs-primar:hover { background: #1d4ed8; }
html[data-theme="dark"] .hs-abo { border-top-color: var(--border-light); }
html[data-theme="dark"] .hs-mini,
html[data-theme="dark"] .hs-steg img,
html[data-theme="dark"] .hs-video { border-color: var(--border-medium); }

/* ----- refpdf pasientblokk = lim-inn-området (14.08.2026, v2) -----
   Samme flyt som legeerklæringen: selve pasientblokken på arket tar imot
   limt skjermbilde fra journalen (Ctrl+V); KI leser navn/fødselsnr/adresse
   og fyller feltene. Manuell skriving i feltene er fortsatt mulig.
   Blokken nullstilles ved hver åpning. */
.refpdf-pasient {
  margin: 4mm 0 2mm;
  padding: 2.5mm 4mm 3mm;
  border: 2px dashed #9db4d0;
  border-radius: 2mm;
  background: #f5f8fc;
  font-size: 10.5pt;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.refpdf-pasient:hover, .refpdf-pasient:focus {
  border-color: #3b82f6;
  background: #eff5fd;
  outline: none;
}
.refpdf-pasient.is-ok { border-style: solid; border-color: #b7d9c4; background: #f7fbf8; }
.refpdf-pasient.is-busy { border-color: #eab308; }
.refpdf-pasient.is-feil { border-color: #ef4444; }
.refpdf-pas-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8.5pt;
  color: #7d92ad;
  margin-bottom: 1.5mm;
  user-select: none;
}
.refpdf-pas-hint .material-icons { font-size: 15px; color: #3b82f6; flex: 0 0 auto; }
.refpdf-pasient.is-busy .refpdf-pas-hint { color: #a16207; }
.refpdf-pasient.is-busy .refpdf-pas-hint .material-icons { color: #eab308; }
.refpdf-pasient.is-ok .refpdf-pas-hint { color: #15803d; }
.refpdf-pasient.is-ok .refpdf-pas-hint .material-icons { color: #16a34a; }
.refpdf-pasient.is-feil .refpdf-pas-hint { color: #b91c1c; }
.refpdf-pasient.is-feil .refpdf-pas-hint .material-icons { color: #ef4444; }
.refpdf-pas-navn { font-weight: 700; }
@media print {
  body.refpdf-open .refpdf-pas-hint { display: none !important; }
  body.refpdf-open .refpdf-pasient {
    background: none;
    border: 1px solid #c8c8c8;
    cursor: default;
  }
}

/* =============================================================================
   MOBILBILDE (mbb-) — «Hent bilde fra mobilen»-modalen. Appendet 18.08.2026.
   All DOM bygges programmatisk i mobilbilde-service.js (CSP blokkerer style=).
   ============================================================================= */
.mbb-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55);
  z-index: 10050; display: flex; align-items: center; justify-content: center; }
.mbb-modal { background: #fff; border-radius: 16px; width: 92%; max-width: 520px;
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(15,23,42,.3); overflow: hidden; }
.mbb-hode { padding: 16px 22px 13px; border-bottom: 1px solid #eef1f5;
  display: flex; align-items: center; gap: 10px; }
.mbb-hode-ikon { color: #1d4ed8; }
.mbb-tittel { font-size: 1.05rem; font-weight: 700; margin: 0; color: #1e293b; }
.mbb-teller { margin-left: auto; background: #eff6ff; color: #1d4ed8;
  font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.mbb-kropp { padding: 20px 22px; text-align: center; overflow-y: auto; }
.mbb-qr { display: inline-block; padding: 12px; border: 1px solid #e2e8f0;
  border-radius: 12px; background: #fff; }
.mbb-qr img, .mbb-qr canvas { display: block; }
.mbb-qr-liten { transform: scale(.55); transform-origin: top center;
  margin-bottom: -76px; }
.mbb-qr-fallback { font-family: monospace; font-size: .8rem; padding: 16px 6px;
  word-break: break-all; max-width: 260px; }
.mbb-status { color: #1d4ed8; font-size: .9rem; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.mbb-status-feil { color: #b91c1c; }
.mbb-status-feil .mbb-pulsdot { display: none; }
.mbb-pulsdot { width: 9px; height: 9px; border-radius: 50%; background: #1d4ed8;
  animation: mbb-puls 1.2s ease-in-out infinite; }
@keyframes mbb-puls { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.mbb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 18px; text-align: left; }
.mbb-kort { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
  background: #f8fafc; }
.mbb-kort-bilde { width: 100%; height: 170px; object-fit: contain; display: block;
  cursor: grab; background: #eef1f5; }
  /* contain, ikke cover (18.08): medisinske bilder skal vises HELE og med riktig
     orientering i kortet — portrett skal se ut som portrett. */
.mbb-kort-bilde:active { cursor: grabbing; }
.mbb-kort-rad { display: flex; gap: 6px; padding: 8px; }
.mbb-kort-knapp { flex: 1; border: 1px solid #d7dde5; background: #fff;
  border-radius: 8px; padding: 6px 4px; font-size: .78rem; font-weight: 600;
  color: #334155; cursor: pointer; }
.mbb-kort-knapp:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.mbb-drahint { color: #94a3b8; font-size: .78rem; text-align: center;
  padding-top: 10px; }
.mbb-fot { border-top: 1px solid #eef1f5; padding: 12px 22px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; }
.mbb-trygghet { color: #15803d; font-size: .76rem; display: flex;
  align-items: center; gap: 6px; text-align: left; }
.mbb-trygghet-ikon { font-size: 1rem; }
.mbb-ferdig { background: #1d4ed8; color: #fff; border: 0; border-radius: 9px;
  padding: 10px 26px; font-weight: 600; cursor: pointer; }
.mbb-ferdig:hover { background: #1e40af; }

/* «Bilde» (Mobilbilde + OCR, 23.09.2026) — lokal inngang, valg per kort */
.mbb-skjult { visibility: hidden; pointer-events: none; }   /* OCR-modalen ligger under */
.mbb-lokal { margin-top: 14px; padding: 10px 12px; border: 1px dashed #cbd5e1;
  border-radius: 10px; color: #475569; font-size: .84rem; display: flex;
  align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; }
.mbb-lokal-ikon { font-size: 1.1rem; color: #64748b; margin-right: 4px; }
.mbb-lokal-velg { border: 0; background: none; color: #1d4ed8; font: inherit;
  font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }
.mbb-modal.mbb-slipp { box-shadow: 0 0 0 3px #3b82f6, 0 12px 40px rgba(15,23,42,.3); }
.mbb-modal.mbb-slipp .mbb-lokal { border-color: #3b82f6; background: #eff6ff; }
.mbb-kort { position: relative; }
.mbb-kort-valg { display: flex; gap: 6px; padding: 8px 8px 0; }
.mbb-kort-valg .mbb-kort-knapp { display: inline-flex; align-items: center;
  justify-content: center; gap: 4px; padding: 7px 4px; }
.mbb-kort-valg .material-icons { font-size: 1rem; }
.mbb-kort-primaer { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.mbb-kort-primaer:hover { background: #1e40af; border-color: #1e40af; color: #fff; }
.mbb-kort-knapp.is-ferdig { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.mbb-kort-knapp:disabled { opacity: .7; cursor: default; }
.mbb-kort-fjern { position: absolute; top: 6px; right: 6px; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: rgba(15,23,42,.55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.mbb-kort-fjern .material-icons { font-size: 16px; }
.mbb-kort-fjern:hover { background: rgba(185,28,28,.85); }
.mbb-kort-merke { position: absolute; top: 6px; left: 6px; z-index: 1;
  background: #15803d; color: #fff; font-size: .7rem; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; }

/* «Les tekst»: valget hele bildet / markert område, og varsel om uleselig */
#ocrCameraModal.kamera-fra-bilde #kamera-newImageBtn,
#ocrCameraModal.kamera-fra-bilde #kamera-cameraView { display: none; }
.kamera-modus { gap: 0; }
.kamera-modus-btn { display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  background: #2a2a2a; color: #cbd5e1; border: 1px solid #444; cursor: pointer;
  font-size: 14px; }
.kamera-modus-btn:first-child { border-radius: 6px 0 0 6px; }
.kamera-modus-btn:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.kamera-modus-btn.is-aktiv { background: #1976d2; border-color: #1976d2; color: #fff; }
.kamera-modus-btn .material-icons { font-size: 18px; }
/* Instruksjonene står UNDER bildet — før lå de oppå nederste del av dokumentet. */
.kamera-canvas-container { flex-direction: column; gap: 10px; padding: 10px 0; }
.kamera-instructions { position: static; transform: none; background: none; padding: 0;
  color: #9aa4b2; font-size: 12.5px; z-index: auto; }
.kamera-instructions-list { gap: 18px; }
.kamera-instruction-item .material-icons { font-size: 16px; color: #81c784; }
/* Plassholderen til høyre: lesbar på mørk bakgrunn, og sier hva som gjelder nå */
.kamera-preview-placeholder { color: #cbd5e1; padding: 32px 20px; }
.kamera-preview-placeholder .material-icons { color: #64b5f6; }
.kamera-plass-tittel { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.kamera-plass-tekst { margin: 0; font-size: 14px; line-height: 1.5; }
.kamera-preview-placeholder .ocr-preview-hint { color: #94a3b8; opacity: 1; margin-top: 14px; }
/* «Område 2: legges under …» / «Juster: erstatter siste» */
.kamera-lesmodus { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px;
  padding: 10px 12px; border-radius: 8px; background: rgba(255,193,7,.12);
  border: 1px solid rgba(255,193,7,.45); color: #ffe082; font-size: 13px; line-height: 1.45; }
.kamera-lesmodus.is-hidden { display: none; }
.kamera-lesmodus .material-icons { font-size: 18px; flex-shrink: 0; }
/* Under lesing: rammen står stille */
.kamera-leser .kamera-overlay-canvas { pointer-events: none; cursor: progress; }
.kamera-modus-btn:disabled { opacity: .5; cursor: not-allowed; }
.kamera-leser .kamera-preview-container { opacity: .75; }
.kamera-uleselig { margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  font-size: .85rem; font-weight: 600; }

/* «Sykmelding ▾» — NAV 6.3–6.6 felt for felt (sykmelding-nav.js) */
.sym-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55);
  z-index: 10040; display: flex; align-items: center; justify-content: center; }
.sym-kort { background: var(--bg-white, #fff); border-radius: 16px; width: 94%;
  max-width: 760px; max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(15,23,42,.3); overflow: hidden; }
.sym-hode { display: flex; align-items: center; gap: 10px; padding: 16px 22px 10px; }
.sym-tittel { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.sym-x { margin-left: auto; border: 0; background: none; cursor: pointer;
  color: #64748b; border-radius: 8px; padding: 4px; display: flex; }
.sym-x:hover { background: #f1f5f9; color: #0f172a; }
.sym-kilde { padding: 0 22px 12px; color: #64748b; font-size: .8rem;
  border-bottom: 1px solid #eef1f5; }
.sym-kropp { padding: 14px 22px 18px; overflow-y: auto; }
.sym-seksjon { margin-bottom: 14px; }
.sym-seksjon + .sym-bryter { margin-top: 4px; }
.sym-seksjon-tittel { font-weight: 700; color: #1e3a8a; font-size: .92rem;
  margin: 4px 0 8px; }
.sym-status { font-size: .82rem; color: #64748b; min-height: 1.1em; margin-bottom: 6px; }
.sym-status.is-aktiv { color: #1d4ed8; }
.sym-status.is-aktiv::before { content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: #1d4ed8; margin-right: 6px;
  animation: sym-puls 1s ease-in-out infinite; }
@keyframes sym-puls { 50% { opacity: .25; } }
.sym-felt { margin-bottom: 12px; }
.sym-felt-topp { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.sym-felt-lbl { flex: 1; font-size: .86rem; color: #334155; line-height: 1.35; }
.sym-felt-lbl b { color: #1e3a8a; margin-right: 2px; }
.sym-kopier { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px;
  padding: 5px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.sym-kopier .material-icons { font-size: 15px; }
.sym-kopier:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.sym-kopier.is-kopiert { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.sym-ta { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical;
  border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 11px;
  font: inherit; font-size: .9rem; line-height: 1.45; color: #0f172a; background: #fff; }
.sym-ta:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.sym-seksjon.is-laster .sym-ta { background: #f8fafc; color: #94a3b8; }
.sym-merknad { margin-top: 4px; font-size: .8rem; color: #92400e; background: #fffbeb;
  border: 1px solid #fcd34d; border-radius: 8px; padding: 5px 9px; }
.sym-kilde-advarsel { margin-top: 6px; padding: 6px 9px; border-radius: 8px;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: .8rem; }
.sym-merknad-pasient { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #fcd34d;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: #78350f; }
.sym-merknad-pasient q { font-style: italic; }
.sym-merknad-sett { margin-left: auto; border: 1px solid #f59e0b; background: #fff; color: #92400e;
  border-radius: 7px; padding: 3px 9px; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.sym-merknad-sett:hover { background: #fef3c7; }
.sym-bryter { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
  font-size: .88rem; font-weight: 600; color: #1e293b; cursor: pointer; margin-bottom: 12px; }
.sym-bryter input { width: 16px; height: 16px; }
.sym-fot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px;
  border-top: 1px solid #eef1f5; }
.sym-knapp { border: 1px solid #cbd5e1; background: #fff; color: #334155;
  border-radius: 9px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.sym-knapp:hover { background: #f1f5f9; }
.sym-knapp-primaer { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.sym-knapp-primaer:hover { background: #1e40af; }
.sym-knapp.is-kopiert { background: #15803d; border-color: #15803d; color: #fff; }
/* «Sykmelding ▾» — samme meny på hovedsiden og i Fritekst (byggMenyValg) */
.sym-meny-hode { padding: 6px 12px 8px; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b; border-bottom: 1px solid #eef1f5; margin-bottom: 4px; }
.sym-valg { position: relative; }
.sym-uke { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sym-uke b { font-size: 1.12rem; line-height: 1; font-weight: 800; letter-spacing: -.01em; }
.sym-uke small { font-size: .6rem; line-height: 1; margin-top: 2px; font-weight: 600; opacity: .8; }
.sym-valg:hover .sym-uke, .sym-valg:focus-visible .sym-uke { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.sym-utkast { flex: 0 0 auto; align-self: center; background: #ecfdf5; color: #047857;
  border: 1px solid #a7f3d0; border-radius: 999px; padding: 2px 8px;
  font-size: .7rem; font-weight: 700; white-space: nowrap; }
.sym-dash-meny { min-width: 340px; padding: 6px; }

/* Fritekst: knappen står ytterst til høyre nederst — menyen åpner OPPOVER og mot VENSTRE */
.sym-fk { position: relative; display: inline-flex; }
.sym-fk-caret { margin-left: -4px; }
.sym-fk-meny { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 110; /* over Maler-dropdownens beholder (100) */
  min-width: 340px; padding: 6px; background: var(--bg-white, #fff);
  border: 1px solid #cbd5e1; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.2); display: flex; flex-direction: column; gap: 2px; }
.sym-fk-meny[hidden] { display: none; }
.sym-fk-meny .action-btn-menu-item:hover, .sym-fk-meny .action-btn-menu-item:focus-visible {
  background: #eff6ff; outline: none; }
@media (max-width: 600px) {
  .sym-hode, .sym-kilde, .sym-kropp, .sym-fot { padding-left: 14px; padding-right: 14px; }
  .sym-felt-topp { flex-direction: column; }
}

/* =============================================================================
   EØS-LEGEERKLÆRING (eos-erklaering.js) — appendert 2026-08-19
   Gjenbruker aap-* skjemaklasser; kun EØS-spesifikke tillegg her.
   ============================================================================= */

.eos-skjema-btn .material-icons { color: #2563eb; }

.eos-info-banner {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  border-radius: 8px; padding: 10px 14px; margin: 10px 0 14px;
  font-size: 0.85rem; line-height: 1.45; }

.eos-warn-banner {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 8px; padding: 10px 14px; margin: 0 0 14px;
  font-size: 0.8rem; line-height: 1.45; }

.eos-lege-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0;
  border-radius: 10px; font-size: 0.68rem; font-weight: 600;
  vertical-align: middle; }

.eos-input, .eos-select {
  width: 100%; box-sizing: border-box; padding: 7px 10px;
  border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.88rem;
  background: #fff; color: #111827; font-family: inherit; }
.eos-input:focus, .eos-select:focus, .eos-textarea:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.12); }

.eos-field { margin-bottom: 12px; }

.eos-download-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1d4ed8; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 16px; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.eos-download-btn:hover { background: #1e40af; }
.eos-download-btn:disabled { opacity: .55; cursor: wait; }
.eos-download-btn .material-icons { font-size: 1.05rem; }

.eos-table-wrapper { margin: 10px 0 16px; }
.eos-table { width: 100%; border-collapse: collapse; }
.eos-table th {
  text-align: left; font-size: 0.72rem; text-transform: none; color: #64748b;
  padding: 4px 6px; border-bottom: 1px solid #e2e8f0; font-weight: 600; }
.eos-table td { padding: 3px 4px; vertical-align: middle; }
.eos-cell { padding: 5px 8px; font-size: 0.84rem; }

.eos-row-del {
  background: none; border: 0; cursor: pointer; color: #94a3b8; padding: 2px; }
.eos-row-del:hover { color: #dc2626; }
.eos-row-del .material-icons { font-size: 1rem; }

.eos-row-add {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 6px;
  color: #475569; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; }
.eos-row-add:hover { background: #f1f5f9; border-color: #94a3b8; }
.eos-row-add .material-icons { font-size: 1rem; }

/* EØS: knappegrupper kan ha opptil 6 valg — la dem bryte pent */
.fritekst-modal-container .eos-opt-group { flex-wrap: wrap; }

/* Signatur-størrelse: slider + målestokk-riktig forhåndsvisning (settings) */
.sigscale { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.sigscale-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sigscale-head label { font-weight: 600; font-size: 0.9rem; color: #334155; }
.sigscale-val { font-variant-numeric: tabular-nums; color: #1d4ed8; font-weight: 600; font-size: 0.9rem; }
.sigscale-range { width: 100%; accent-color: #1d4ed8; }
.sigscale-preview-label { margin: 12px 0 6px; font-size: 0.8rem; color: #64748b; }
.sigscale-preview {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 16px; overflow-x: auto; }
.sigscale-preview img { max-width: none; }
/* Signaturen dras fritt og skal kunne legge seg over streken — den er absolutt
   plassert, og JS setter overflow: visible på boksen for at den ikke klippes. */
.sigscale-preview img[draggable="false"] { cursor: grab; }
.settingssign-reset {
  display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0;
  padding: 7px 12px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #f8fafc; color: #475569; font-size: 0.85rem; cursor: pointer; }
.settingssign-reset:hover { background: #f1f5f9; border-color: #94a3b8; }
.settingssign-reset .material-icons { font-size: 1rem; }

/* =============================================================================
   OCR: mobil-inngang — QR + ende-til-ende-kryptering (samme flyt som mobilbilde)
   ============================================================================= */
.kamera-mobil-btn {
    margin-top: 12px;
    padding: 12px 36px;
    font-size: 16px;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    box-shadow: none;
}

.kamera-mobil-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    transform: none;
    box-shadow: none;
}

.kamera-mobil-btn .material-icons {
    font-size: 22px;
}

/* OCR mobil-visning: venteflate når QR-vinduet er lukket */
.kamera-mobil-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px 8px;
    text-align: center;
    max-width: 440px;
}

.kamera-mobil-ikon {
    font-size: 64px;
    color: rgba(255, 255, 255, 0.85);
}

.kamera-mobil-tekst {
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.kamera-mobil-under {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 8px;
}

/* «Lim inn fra utklippstavlen»-knapper (legeerklæring steg 1 + henvisnings-PDF pasientblokk) */
.le-paste-lim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #1f6feb;
    border-radius: 8px;
    color: #0b4fc4;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}

.le-paste-lim:hover { background: #eef4ff; }

.le-paste-lim .material-icons { font-size: 18px; }

.refpdf-pas-lim {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px 9px;
    background: #fff;
    border: 1px solid #1f6feb;
    border-radius: 6px;
    color: #0b4fc4;
    font: inherit;
    font-size: 8.5pt;
    font-weight: 500;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
}

.refpdf-pas-lim:hover { background: #eef4ff; }

.refpdf-pas-lim .material-icons { font-size: 13px; }

/* QR-mottak v2: PC viser QR, mobilen sender kryptert via relay */
.qrrx-qr-wrap {
    display: flex;
    justify-content: center;
    padding: 18px 0 6px;
}

.qrrx-qr-host {
    display: inline-block;
    padding: 14px;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(18, 38, 73, 0.08);
}

.qrrx-qr-host img,
.qrrx-qr-host canvas {
    display: block;
}

.qrrx-trygghet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    color: #5b6678;
}

.qrrx-trygghet .material-icons {
    font-size: 15px;
    color: #15803d;
}

.qrrx-e2e-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    color: #15803d;
    font-size: 13px;
    font-weight: 500;
}

.qrrx-e2e-badge .material-icons {
    font-size: 16px;
}

/* ===== Fritekst kons-kontekst: tydelig «Ingen»-rad, fjern-knapp og frakoblet-pille ===== */
.fk-kons-item-none { flex-direction: row; align-items: center; gap: 9px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; margin-bottom: 8px; }
.fk-kons-item-none:hover { background: #ffedd5; }
.fk-kons-item-none.fk-kons-item-sel { background: #ffedd5; box-shadow: inset 0 0 0 1px #fdba74; }
.fk-kons-item-none .material-icons { font-size: 18px; color: #c2410c; flex: 0 0 auto; }
.fk-kons-none-txt { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.fk-kons-none-t { font-size: 13px; font-weight: 600; color: #9a3412; }
.fk-kons-none-s { font-size: 11.5px; color: #b45309; }
.fk-kons-sect { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: #8b97a8; text-transform: uppercase; padding: 2px 10px 4px; }

/* ── Legemiddelgjennomgang (2ld) — lmg-* ─────────────────────────────────── */
.lmg-overlay{position:fixed;inset:0;background:rgba(20,30,40,.55);display:none;z-index:9500;padding:26px;overflow:auto}
.lmg-overlay.is-open{display:block}
/* overflow:hidden klippet den klebrige radtoppen — hjoernene rundes paa
   hode/fot i stedet, saa sticky naar scrolleren (.lmg-overlay). */
.lmg-sheet{max-width:1280px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 24px 70px -24px rgba(0,0,0,.5);display:flex;flex-direction:column;min-height:calc(100vh - 52px)}
.lmg-hdr{display:flex;align-items:center;gap:14px;background:linear-gradient(100deg,#1565c0,#1e88e5);color:#fff;padding:14px 20px;border-radius:16px 16px 0 0}
.lmg-hdr-t{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:500}
.lmg-takst{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 12px;font-size:12.5px}
.lmg-x{margin-left:auto;background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:9px;padding:6px;cursor:pointer;display:flex}.lmg-x{gap:7px;padding:7px 13px;align-items:center;font:inherit;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;transition:background .12s}.lmg-x .material-icons{font-size:16px;line-height:1}.lmg-x:hover{background:rgba(255,255,255,.26)}
.lmg-body{display:grid;grid-template-columns:222px 1fr;flex:1;min-height:0}
.lmg-nav{background:#f4f7fa;border-right:1px solid #e3eaf0;padding:15px 11px;display:flex;flex-direction:column;gap:4px}
.lmg-steg{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;font:inherit;font-size:13.5px;color:#5b6b7a;background:none;border:none;cursor:pointer;text-align:left}
.lmg-steg .material-icons{font-size:17px}
.lmg-steg.gjort{color:#2e7d52}
.lmg-steg.aktiv{background:#1976d2;color:#fff;font-weight:500}
.lmg-navfot{margin-top:auto;font-size:11px;color:#8a97a3;padding:10px 11px;border-top:1px solid #e3eaf0}
.lmg-innh{padding:19px 24px 24px;min-width:0}
.lmg-innh h2{margin:0 0 4px;font-size:17.5px}
.lmg-sub{margin:0 0 15px;color:#5b6b7a;font-size:13px;max-width:92ch}
.lmg-fot{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #e9eef3;padding:12px 20px;background:#fafbfc;border-radius:0 0 16px 16px}
.lmg-disc{font-size:11.5px;color:#7c8994;max-width:74ch}
.lmg-laster{display:flex;align-items:center;gap:9px;color:#5b6b7a;font-size:13px;padding:9px 0 13px}
.lmg-spin{animation:lmgspin 1.1s linear infinite}
@keyframes lmgspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.lmg-spin{animation:none}}
.lmg-varsel{display:flex;gap:10px;background:#fdf3ec;border:1px solid #f3d9c4;border-radius:11px;padding:10px 14px;margin:0 0 13px;font-size:13px;color:#8a5320}
.lmg-varsel .material-icons{color:#c77b1e;font-size:19px}
.lmg-rad{display:flex;align-items:center;gap:12px;border:1px solid #e6ecf1;border-radius:11px;padding:10px 15px;margin-bottom:8px;flex-wrap:wrap}
.lmg-nm{font-weight:600;font-size:14px;min-width:145px}
.lmg-ds{font-size:13px;color:#42505d;min-width:88px;font-variant-numeric:tabular-nums}
.lmg-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.lmg-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid #e2e9ee;text-decoration:none}
.c-kd{background:#e2f2f4;color:#075863;border-color:#c6e2e6}
.c-bl{background:#e8f0fb;color:#1c4e9d;border-color:#cfdff5}
.c-mg{background:#fdecec;color:#b3402f;border-color:#f5cfc9;font-weight:600}
.c-spc{background:#f2f5f8;color:#5b6b7a}
.c-tom{background:#f2f5f8;color:#8a97a3;font-style:italic}
.lmg-ikort{border:1px solid #e6ecf1;border-radius:12px;margin-bottom:10px;overflow:hidden}
.lmg-ih{display:flex;align-items:center;gap:8px;padding:9px 15px;background:#f7fafc;border-bottom:1px solid #edf2f6;font-size:14px}
.lmg-mut{color:#8a97a3;font-size:13px}
.lmg-ib{padding:11px 15px}
.lmg-indtxt{font-size:13px;color:#42505d;margin:0 0 9px;max-width:88ch}
.lmg-kilde{display:inline-flex;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:2px 8px;margin-right:6px}
.k-spc{background:#e8edf9;color:#274b9f}
.lmg-koder{display:flex;flex-wrap:wrap;gap:7px}
.lmg-kode{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #d7dee5;border-radius:9px;padding:6px 11px;font:inherit;font-size:12.5px;background:#fff;cursor:pointer}
.lmg-kode b{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.lmg-kode.valgt{border-color:#1976d2;background:#e8f1fc;box-shadow:0 0 0 1px #1976d2 inset}
.lmg-kode.valgt::after{content:"\2713";color:#1976d2;font-weight:700}
/* Indikasjon og refusjon er to spørsmål, og skal se ut som to spørsmål. Skillet
   er en tynn linje og en egen overskrift — nok til at en §5-14-kode ikke leses
   som en godkjent indikasjon, uten å bli to konkurrerende bokser. */
.lmg-bolk + .lmg-bolk{border-top:1px solid #edf2f6;margin-top:12px;padding-top:11px}
.lmg-bolkh{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b7a;margin-bottom:7px}
.lmg-indvalg{margin:0 0 12px}
.lmg-indchip{text-align:left;line-height:1.4;max-width:100%;align-items:flex-start}
/* Kuratert eller rå SPC-fritekst skal kunne skilles på ett blikk. Uten merket
   ser de to like ut, og legen får inntrykk av at alt er like gjennomgått. */
.lmg-kildemerke{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.05em;border-radius:5px;padding:2px 6px;margin-left:7px;text-transform:none;cursor:help}
.k-kur{background:#e8f1fc;color:#1c4e9d}
.k-raa{background:#fdf1e3;color:#9a5b16}
.k-liste{background:#eaf6ec;color:#1e6b34}

.lmg-refvalg{margin:0}
.lmg-refchip{text-align:left;line-height:1.4;max-width:100%;align-items:flex-start}
.lmg-refchip b{color:#274b9f;flex:none}
/* Hjemlene laa foer som en knapp per kode. Fire koder paa et statin gjorde
   kortet dobbelt saa hoeyt som indikasjonen, og verre: fire synlige koder ble
   lest som om fire var satt. Menyen er derfor EN linje til legen velger, og
   bare legens egne valg faar plass som chip. */
.lmg-refrad{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lmg-refmeny{flex:none;max-width:100%;font:inherit;font-size:12px;color:#26323d;background:#fff;border:1px solid #c8d3de;border-radius:7px;padding:6px 9px;cursor:pointer}
.lmg-refmeny:hover{border-color:#8fa8c4}
.lmg-refmeny:focus-visible{outline:2px solid #2f6fd0;outline-offset:1px}
.lmg-refnull{color:#8a97a3;font-style:italic}
.lmg-refvalg{display:flex;flex-wrap:wrap;gap:6px}
.lmg-fjern{margin-left:7px;color:#7b8794;font-weight:700;flex:none}
.lmg-refchip:hover .lmg-fjern{color:#b3261e}
/* Kildefoten. SPC 4.2 laa foer MELLOM dosekolonnene og vurderingsknappene, og
   en aapnet preparatomtale er flere hundre piksler lang - legen matte scrolle
   forbi hele punkt 4.2 for aa naa knappene han kom for. Na ligger kilden nederst
   og kollapset, med hurtiglenker til kildens egne avsnitt. */
.lmg-kildefot{border-top:1px solid #e6ecf2;margin-top:10px;padding-top:9px}
.lmg-kilderad{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lmg-hopplab{font-size:11px;color:#8a97a3;letter-spacing:.02em}
.lmg-hopprad{display:flex;gap:5px;flex-wrap:wrap}
.lmg-hopp{font:inherit;font-size:11.5px;color:#274b9f;background:#f1f5fb;border:1px solid #dbe5f2;border-radius:20px;padding:3px 11px;cursor:pointer}
.lmg-hopp:hover{background:#e2ecfa;border-color:#b9cdea}
.lmg-hopp:focus-visible{outline:2px solid #2f6fd0;outline-offset:1px}
.lmg-antall{font-size:10px;color:#8a97a3;font-weight:600;margin-left:5px}
.lmg-spcbtn.pa{background:#e8f1fc;border-color:#b9cdea}
.lmg-spcavsnitt{scroll-margin-top:14px;border-radius:7px;padding:2px 6px;margin:0 -6px}
/* Lenke til nyre/eldre-steget for NETTOPP dette legemidlet. Vises bare naar
   kilden faktisk har avsnittet - ellers lover lenka noe kilden ikke har. */
.lmg-stegling{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font:inherit;font-size:12px;color:#274b9f;background:none;border:none;padding:2px 0;cursor:pointer;text-align:left}
.lmg-stegling:hover{text-decoration:underline}
.lmg-stegling .material-icons{font-size:16px}
.lmg-stegling:focus-visible{outline:2px solid #2f6fd0;outline-offset:2px;border-radius:3px}
/* Puls, ikke varig markering: den skal si «her landet du», og saa komme seg ut
   av veien. Uten prefers-reduced-motion-hensyn ville den blinke for folk som
   har bedt operativsystemet om aa la vaere. */
@keyframes lmgBlink{0%{background:#fff6d9;box-shadow:0 0 0 3px #ffe9a8}70%{background:#fff6d9;box-shadow:0 0 0 3px #ffe9a8}100%{background:transparent;box-shadow:0 0 0 3px transparent}}
.lmg-blink{animation:lmgBlink 2.1s ease-out 1}
@media (prefers-reduced-motion:reduce){.lmg-blink{animation:none;background:#fff6d9;box-shadow:0 0 0 3px #ffe9a8}}
/* Preparatomtalenes interaksjonsavsnitt er RAAMATERIALE, ikke funn. Seksten
   slike rader under tre-fire faktiske par ga motsatt vektlegging av
   virkeligheten. Samlet i en lukket bolk sammen med kildelenken. */
.lmg-kildebolk{margin-top:14px;border:1px solid #e2e9f0;border-radius:10px;background:#fbfcfe}
.lmg-kildebolk>summary{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;list-style:none;border-radius:10px}
.lmg-kildebolk>summary::-webkit-details-marker{display:none}
.lmg-kildebolk>summary::before{content:"chevron_right";font-family:"Material Icons";font-size:19px;color:#8a97a3;transition:transform .15s}
.lmg-kildebolk[open]>summary::before{transform:rotate(90deg)}
.lmg-kildebolk>summary:hover{background:#f2f6fb}
.lmg-kildebolk>summary .material-icons{font-size:18px;color:#5b6b7c}
.lmg-kbt{font-weight:650;font-size:13px;color:#26323d}
.lmg-kildebolk .lmg-antall{margin-left:auto;font-size:11px;color:#8a97a3;font-weight:600}
.lmg-kbinn{padding:0 14px 12px}
.lmg-kbinn .lmg-handoff{margin:8px 0 10px}
/* «Nevner» = navnet forekommer i teksten. Dempet med vilje: den skal gjoere et
   avsnitt verdt aa aapne, ikke se ut som et varsel. Et varsel ville vaert
   verktoeyet som vurderer. */
.lmg-nevner{margin-left:auto;font-size:10.5px;font-weight:600;color:#5b6b7c;background:#eef2f6;border-radius:20px;padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.lmg-ixd>summary{display:flex;align-items:center;gap:8px}
.lmg-fotn{font-size:11px;color:#8a97a3;margin:7px 0 0}
/* Bivirkningssoek (L10). Fargebruken er et regulatorisk valg, ikke et estetisk.
   Et treff er at et ORD forekommer i en tekst - ikke et funn om pasienten.
   Derfor faar treffraden en rolig blaa venstrekant i samme familie som
   kildemerkingen ellers, og aldri rodt/gult: en varselfarge ville lest som at
   verktoeyet vurderer risiko. Rader UTEN treff blir staaende, bare dempet - aa
   skjule dem ville gjort lista selektiv, og da ville fem treff av fem legemidler
   sett likt ut som fem av seksten. */
/* Dekningslinja i steg 1. Noeytral, ikke alarm: den rapporterer hva oppslaget
   fant og ikke fant. Aa gjoere den rod ville vaert verktoeyet som vurderer at
   noe er galt - det er legens avgjoerelse. Men den skal ses, derfor egen boks. */
.lmg-dekning{display:flex;gap:11px;align-items:flex-start;border:1px solid #dfe7ee;background:#f7f9fb;border-radius:11px;padding:11px 14px;margin-bottom:12px;font-size:12.5px;line-height:1.7;color:#42505d}
.lmg-dekning .material-icons{font-size:19px;color:#8a97a3;flex:none;margin-top:1px}
.lmg-dekk-mangler{color:#8a6d3b}
.lmg-dekk-tolket{color:#5b6b7c}
/* Konstateringer om selve LISTA - ikke om medisineringen. Derfor noeytral graa
   og ikke varselsfarge: at to rader deler ATC-kode kan vaere helt bevisst
   (depot + hurtigvirkende), og en gul boks ville sagt at noe er galt. */
.lmg-listefunn{display:flex;gap:11px;align-items:flex-start;border:1px solid #e6ecf1;background:#fbfcfd;border-radius:11px;padding:11px 14px;margin-bottom:12px;font-size:12.5px;line-height:1.7;color:#42505d}
.lmg-listefunn .material-icons{font-size:19px;color:#8a97a3;flex:none;margin-top:1px}
.lmg-listefunn b{color:#26323d;font-weight:600}
.lmg-atc{color:#7d8b99;font-size:11.5px}
/* Stripa i steg 1: alt som trenger et menneske, paa en linje, over en tabell som
   ligger bak ett klikk. Postene er knapper fordi de gjoer noe - de aapner
   forklaringen og filtrerer visningen til radene posten gjelder. */
.lmg-stripe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.lmg-stripepost{display:inline-flex;align-items:baseline;gap:7px;border:1px solid #dfe7ee;background:#fbfcfd;border-radius:9px;padding:7px 12px;font-size:12.5px;line-height:1.5;color:#42505d;font-family:inherit;cursor:pointer;text-align:left;transition:background .12s,border-color .12s}
.lmg-stripepost:hover{background:#f2f6fa;border-color:#c6d4e2}
.lmg-stripepost.pa{background:#eaf1fa;border-color:#a9c2de;box-shadow:inset 0 0 0 1px #a9c2de}
.lmg-stripepost.alv{border-color:#e9cdb4;background:#fdf8f3}
.lmg-stripepost.alv:hover{background:#fbf1e6;border-color:#dcb894}
.lmg-stripepost.alv.pa{background:#f9ecdd;border-color:#d2a678;box-shadow:inset 0 0 0 1px #d2a678}
.lmg-stripeikon{flex:none;font-size:13px}
.lmg-stripekort{font-weight:600;color:#26323d;white-space:nowrap}
.lmg-stripenavn{color:#7d8b99;font-size:11.5px}
.lmg-stripetom{font-size:12.5px;line-height:1.7;color:#5b6875;flex:1 1 320px}
.lmg2-rad{cursor:pointer;scroll-margin-top:10px}
.lmg2-popblokk{scroll-margin-top:14px}
/* «Venter på valg»-linja: funnene navngitt der legen lander */
.lmg-venter{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;background:#fff8ec;border:1px solid #f0e2c4;border-radius:9px;padding:7px 12px;font-size:13px;color:#7a5c1f}
.lmg-venter .material-icons{font-size:16px;color:#b45309}
.lmg-venterlab{font-weight:700}
.lmg-venterpkt{border:0;background:none;padding:1px 2px;font-family:inherit;font-size:13px;color:#1d4fc7;cursor:pointer;text-decoration:underline;text-decoration-color:#b9cbe4;text-underline-offset:2px}
.lmg-venterpkt:hover{text-decoration-color:#1d4fc7}
.lmg-venterskille{color:#d9c79a}
.lmg2-rad .lmg2-doss{cursor:auto}
.lmg-dekl{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:#fff;border:1px solid #dfe7ee;border-radius:10px;padding:9px 14px;margin:8px 0;font-size:13px}
.lmg-dekl-lab{font-weight:700;color:#26323d;margin-right:2px}
.lmg-deklgr{display:inline-flex;align-items:center;gap:4px}
.lmg-deklgr b{color:#5b6875;font-weight:600;margin-right:2px}
.lmg-deklknapp{border:1px solid #cfdce6;background:#f6f9fc;border-radius:999px;padding:3px 10px;font-size:12px;font-family:inherit;color:#20415f;cursor:pointer}
.lmg-deklknapp:hover{background:#eaf2f9}
.lmg-deklknapp.pa{background:#1e5b96;border-color:#1e5b96;color:#fff;font-weight:600}
.lmg2-status{cursor:default}
.lmg-deklferdig{margin-left:auto;font-weight:600}
.lmg-bulklinje{display:flex;align-items:center;gap:12px;background:#eef6ef;border:1px solid #cfe4d2;border-radius:10px;padding:8px 14px;margin:8px 0;font-size:13px;color:#2e6b3e}
.lmg-bivkompakt{padding:9px 14px;gap:6px}
.lmg-bivrad2{display:flex;align-items:center;gap:10px}
.lmg-bivrad2 .lmg-bivfelt{flex:1}
.lmg-bivlab{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13px;color:#26323d;white-space:nowrap}
.lmg-bivlab .material-icons{font-size:17px;color:#3d5a80}
.lmg-bivpanel{background:#fff;border:1px solid #cfdce6;border-left:3px solid #3d5a80;border-radius:10px;padding:12px 16px;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.lmg-bivlukk{margin-left:auto}
.lmg-bivoppsum{font-size:13px;color:#3c4a58;display:flex;flex-direction:column;gap:4px}
.lmg-chip.c-biv{background:#eef3f9;border-color:#c9d9ea;color:#2d5479}
.lmg-popfot{margin:2px 0 10px}
.lmg-popdet>summary{font-size:13px;color:#5b6875;cursor:pointer;margin:4px 0}
.lmg-chip.c-kvitt{background:#eef6ef;border-color:#cfe4d2;color:#2e6b3e}
.lmg2-knr{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#3d5a80;color:#fff;font-size:11px;font-weight:700;margin-right:6px;flex:none}
.lmg2-kknapp.gjort .lmg2-knr{background:#2e7d32}
.lmg2-kknapp.varsom .lmg2-knr{background:#b26a00}
.lmg2-steg{display:inline-flex;align-items:center;gap:8px}
.lmg2-kpil{color:#9fb2c2;font-size:17px;font-weight:700;align-self:center;margin:0 1px;user-select:none}
.lmg-chip.c-ixok{background:#eef6ef;border-color:#cfe4d2;color:#2e6b3e}
.lmg-ixok>summary{color:#5b6875;font-size:12.5px}
.lmg-nymed{background:#fff;border:1px solid #cfdce6;border-left:3px solid #2e7d32;border-radius:10px;padding:14px 16px;margin:10px 0 14px;display:flex;flex-direction:column;gap:8px}
.lmg-nymed-tit{font-weight:700;font-size:14px;color:#1b5e20;display:flex;align-items:center;gap:6px}
.lmg-nymed-rad{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lmg-nymed-rad .lmg-komm{flex:1 1 220px}
.lmg-nymed-hint{font-size:12.5px;color:#5b6875}
.lmg-bivvanlig{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin:10px 0 2px}
.lmg-bivvanlig-lab{flex-basis:100%;font-size:12px;color:#5b6875}
.lmg-bivvknapp{border:1px solid #cfdce6;background:#f6f9fc;border-radius:999px;padding:4px 12px;font-size:12.5px;font-family:inherit;color:#20415f;cursor:pointer;font-variant-numeric:tabular-nums}
.lmg-bivvknapp:hover{background:#eaf2f9;border-color:#a9c3d8}
.lmg-tellelinje{font-size:12px;color:#7d8b99;padding:2px 2px 8px;font-variant-numeric:tabular-nums}
.lmg-ixgruppe{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5b6875;margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid #dfe7ee}
.lmg-stripefeil{font-size:12.5px;line-height:1.7;color:#8a4b0f;flex:1 1 320px;font-weight:600;background:#fdf3e6;border:1px solid #f0d5ae;border-radius:9px;padding:8px 12px}
.lmg-stripeliste{margin-left:auto;border:1px solid #dfe7ee;background:#fff;border-radius:9px;padding:7px 14px;font-size:12.5px;font-weight:600;font-family:inherit;color:#3d5a80;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.lmg-stripeliste:hover{background:#f2f6fa;border-color:#c6d4e2}
.lmg-stripeliste.pa{background:#eaf1fa;border-color:#a9c2de}
.lmg-funndetalj{border:1px solid #dfe7ee;background:#f7f9fb;border-radius:11px;padding:11px 14px;margin-bottom:12px;font-size:12.5px;line-height:1.7;color:#42505d}
.lmg-funndetalj b{color:#26323d;font-weight:600}
/* De tapte linjene vises ordrett. Legen skal kunne kjenne igjen sin egen tekst,
   ikke lese vaar omskrivning av den. */
.lmg-taptliste{list-style:none;margin:9px 0 0;padding:0}
.lmg-taptliste li{border-left:3px solid #dcb894;padding:2px 0 2px 10px;margin-bottom:8px}
.lmg-taptlinje{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:#26323d;word-break:break-word}
.lmg-taptgrunn{display:block;font-size:11.5px;color:#7d8b99;margin-top:2px}
.lmg-filterfot{margin:0 0 8px}
/* Innledningsboksen i steg 1. Tre nivaaer, og fargen sier hvor sikre RADENE er
   som data - aldri noe om legemidlene. Den maskinlest-varianten er den eneste
   som har farge, fordi den er den eneste der steget er en reell port: ingen
   har sett de radene foer. Den godkjente varianten er gronn og lav, slik at
   steget kommer seg unna naar legen nettopp har gjort jobben i samstemmingen.
   Ingen av dem er rod: rodt ville lest som at noe er galt med medisineringen. */
.lmg-port{display:flex;gap:11px;align-items:flex-start;border:1px solid #dfe7ee;background:#f7f9fb;border-radius:11px;padding:12px 15px;margin:0 0 13px;font-size:13px;line-height:1.65;color:#42505d}
.lmg-port .material-icons{font-size:20px;color:#8a97a3;flex:none;margin-top:1px}
.lmg-port b{color:#26323d;font-weight:600}
.lmg-port-ki{border-color:#c9dcef;background:#f2f7fc}
.lmg-port-ki .material-icons{color:#1976d2}
.lmg-port-ok{border-color:#dbe8de;background:#f6faf7}
.lmg-port-ok .material-icons{color:#5b8a6a}
/* Legens egne tidligere soek. Snarveier, ikke forslag - derfor ingen telling,
   ingen sortering og ingen visuell rangering mellom dem. */
.lmg-bivlogg{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:-4px 0 13px;font-size:12.5px;color:#6b7a88}
.lmg-bivtidl{font:inherit;font-size:12.5px;padding:4px 11px;border:1px solid #d7dee5;background:#fff;color:#42505d;border-radius:999px;cursor:pointer}
.lmg-bivtidl:hover{border-color:#b9c6d2;background:#f4f7fa}
.lmg-bivtidl.pa{border-color:#1976d2;color:#1976d2;background:#f2f7fc}
/* Chip-feltet. Legen gaar som regel gjennom en liten symptomliste, ikke ett
   symptom, saa uttrykkene ligger som chips i selve feltet og soekes samtidig.
   Ingen av chipsene er visuelt sterkere enn de andre: en fremhevet chip ville
   vaert verktoeyet som mente noe om hvilket symptom som betyr mest. */
.lmg-bivfelt{position:relative;margin-bottom:12px}
.lmg-bivchips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border:1px solid #cfdae4;border-radius:10px;padding:7px 9px;background:#fff}
.lmg-bivchips:focus-within{border-color:#1976d2;box-shadow:0 0 0 3px #e3f2fd}
.lmg-bivchip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:4px 6px 4px 11px;border:1px solid #cfdff5;background:#f2f7fc;color:#1c4e9d;border-radius:999px}
.lmg-bivchipx{font:inherit;font-size:14px;line-height:1;padding:0 4px;border:0;background:none;color:#5b87c4;cursor:pointer;border-radius:50%}
.lmg-bivchipx:hover{background:#dceaf8;color:#123a76}
.lmg-bivinput{flex:1 1 240px;min-width:180px;font:inherit;font-size:13.5px;padding:5px 4px;border:0;color:#26323d;background:none}
.lmg-bivinput:focus{outline:none}
/* Egen forslagsliste, ikke <datalist>: den native filtrerer bare paa prefiks og
   finner derfor aldri «muskelsmerter» naar legen skriver «myalgi» - som er hele
   poenget med termtabellen. Rekkefoelgen er hvor godt ORDET matcher det legen
   skriver; ingen legemidler sorteres noe sted i denne lista. */
.lmg-bivforslag{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);max-height:264px;overflow:auto;border:1px solid #cfdae4;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(28,44,64,.13);padding:4px}
.lmg-bivfors{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;font:inherit;font-size:13px;padding:7px 11px;border:0;background:none;color:#26323d;border-radius:7px;cursor:pointer}
.lmg-bivfors:hover,.lmg-bivfors.pa{background:#f2f7fc;color:#1c4e9d}
.lmg-bivforsord{font-weight:600}
.lmg-bivforsvia{font-size:11.5px;color:#7d8b99}
/* Fritekstraden. Forslagslista skal aldri vaere en blindvei: staar uttrykket
   ikke i tabellen, skal legen se at han fortsatt kan soeke ordrett paa det. */
.lmg-bivfors-fri{border-top:1px solid #eef3f6;border-radius:0 0 7px 7px}
.lmg-bivfors-fri .lmg-bivforsord{font-weight:500;color:#42505d}
/* Pasientens egen dose + vei inn til kildekortet. Ren gjenfinning: ingen av
   delene er en vurdering av om treffet betyr noe. */
.lmg-bivfakta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 9px;font-size:12.5px;color:#42505d}
.lmg-bivfakta b{color:#26323d;font-weight:600}
.lmg-bivapne{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;color:#1976d2;background:none;border:1px solid #cfdff5;border-radius:8px;padding:4px 11px;cursor:pointer}
.lmg-bivapne:hover{background:#f2f7fc}
.lmg-bivapne .material-icons{font-size:15px}
.lmg-bivtoem{font:inherit;font-size:12.5px;margin-top:7px;padding:6px 13px;border:1px solid #d7dee5;background:#fff;color:#5b6b7a;border-radius:9px;cursor:pointer}
/* Ett oppslag per uttrykk, med uttrykkets EGEN teller. Tallene staar aldri
   summert: en sum over uttrykk ville vaert en skaar, og en skaar ville rangert
   legemidlene - altsaa beslutningsstoette, ikke gjenfinning. */
.lmg-bivhva{font-size:12px;color:#5b6b7c;background:#f4f7fa;border:1px solid #e6ecf1;border-radius:10px;padding:9px 13px;margin-bottom:9px;line-height:1.8}
.lmg-bivhva code{background:#fff;border:1px solid #dde5ec;border-radius:5px;padding:1px 6px;font-size:11.5px;color:#274b9f}
.lmg-bivhva p{margin:7px 0 0}
.lmg-bivhvarad{padding:5px 0;border-top:1px solid #e6ecf1}
.lmg-bivhvarad:first-child{border-top:0;padding-top:0}
.lmg-bivhvarad b{color:#26323d;font-size:13px}
.lmg-bivhvatall{margin-left:8px;font-weight:600;color:#42505d}
.lmg-bivhvaord{color:#7d8b99;font-size:11.5px;line-height:1.9}
.lmg-bivadv{color:#8a6d3b}
/* Ett avsnitt per uttrykk inne i raden. De slaas bevisst ikke sammen: da ville
   legen ikke kunne se hvilket uttrykk som traff hvor. */
.lmg-bivtreff{border-top:1px solid #eef3f6;padding-top:8px;margin-top:8px}
.lmg-bivtreff:first-of-type{border-top:0;padding-top:0}
.lmg-bivtreffhode{font-size:11.5px;font-weight:600;color:#274b9f;margin-bottom:5px}
/* Preparatomtalene UTEN treff slettes ikke - de kollapses. Navnene og nevneren
   blir staaende, slik at «nevner ikke uttrykket» aldri kan leses som «utelukket
   som aarsak» (R-42). Fjernet man dem helt, ville skjermen vaert en ren
   kandidatliste fra verktoeyet. */
.lmg-bivresthode{margin:16px 0 7px;font-size:12px;line-height:1.7;color:#7d8b99;max-width:90ch}
/* Graa, lav og sammentrykt - men fortsatt PAA skjermen, med navnet lesbart.
   Kontrasten mot treffradene er hele poenget: legen ser umiddelbart hvilke som
   traff, uten at de oevrige er borte og dermed usynlig «sjekket ut». */
.lmg-bivtom{border:1px solid #eef2f6;border-left:3px solid #eef2f6;border-radius:9px;margin-bottom:4px;padding:0 14px;background:#fcfdfe;opacity:.72}
.lmg-bivtom summary{display:flex;align-items:center;gap:9px;padding:7px 0;cursor:pointer}
.lmg-bivtom .lmg-kilde{font-size:10.5px}
.lmg-bivtom .lmg-bivingen{margin-left:auto;font-size:10.5px;font-weight:600;color:#9aa6b2}
.lmg-bivtomtekst{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:#42505d;white-space:pre-line;max-width:90ch}
/* Teller, ikke overskrift: bredden er selv informasjon. «Utslett» staar i ~85 %
   av alle preparatomtaler, og da skal 9 av 10 vaere synlig for legen - ikke
   pakket inn som om det var et selektivt funn. */
.lmg-bivteller{font-size:12.5px;color:#42505d;margin:0 0 11px;font-weight:600}
.lmg-bivnull{display:flex;gap:11px;border:1px solid #e6ecf1;background:#f8fafc;border-radius:11px;padding:13px 15px;margin-bottom:12px;font-size:13px;color:#42505d;line-height:1.65}
.lmg-bivnull .material-icons{font-size:19px;color:#8a97a3;flex:none}
.lmg-bivnull .lmg-handoff{margin:10px 0 0}
/* Oppslag som ikke ble fullført. Ravgul, ikke rød: dette er en feil i verktøyet,
   ikke et klinisk varsel — rødt her ville lest som noe om pasienten. Men den må
   ses, for alternativet (et tomt steg) leses som «ingen interaksjoner». */
.lmg-ixfeil{display:flex;gap:11px;border:1px solid #e8d5a8;background:#fdf9f0;border-radius:11px;padding:13px 15px;margin-bottom:12px;font-size:13px;color:#4a4133;line-height:1.65}
.lmg-ixfeil .material-icons{font-size:19px;color:#b08a3c;flex:none}
.lmg-ixfeil b{color:#3a3225}
.lmg-ixfeil .lmg-handoff{margin:10px 0 0}
.lmg-bivrad{border:1px solid #e6ecf1;border-left:3px solid #eef2f6;border-radius:11px;padding:9px 15px 11px;margin-bottom:8px;opacity:.62}
.lmg-bivrad.har{border-left-color:#7fa8dc;opacity:1;background:#fcfdff}
.lmg-bivrad .lmg-sl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#274b9f;margin:0 0 6px}
.lmg-bivingen{margin-left:auto;font-size:10.5px;font-weight:600;color:#9aa6b2;text-transform:none;letter-spacing:0}
.lmg-bivutdrag{margin:0 0 8px;font-size:12.5px;line-height:1.75;color:#42505d;white-space:pre-line;max-width:90ch}
/* Markeringen er hele paastanden. Umerket maa legen gjoere soeket om igjen med
   oeynene, og resten av avsnittet leses som om verktoeyet la det der med
   hensikt - maalt til 96 % umerket kontekst foer dette. Merket gjoer paastanden
   SMALERE, ikke bredere: dette ordet, her, ingenting annet. Gul bakgrunn er
   bevisst valgt bort; farge ville lest som alvorlighet. */
.lmg-bivmark{background:#dbe9fb;color:#12305e;font-weight:600;border-radius:3px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Frekvensen staar som eget merke FORAN utdraget, ikke inne i teksten - den er
   avlest fra kildens egen overskrift i punkt 4.8, ikke en vurdering verktoeyet
   har gjort. Naar ingen overskrift styrer treffet (sammendragsavsnittet oeverst
   i 4.8), vises ingenting. Tomt er et aerlig svar; gjettet frekvens er ikke. */
.lmg-bivfrek{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4a5a6b;background:#eef2f6;border:1px solid #dfe6ed;border-radius:5px;padding:1px 7px;margin-right:8px;vertical-align:1px;cursor:help;white-space:nowrap}
.lmg-bivrad .lmg-ixd{margin:8px 0 0}
.lmg-doserad{display:grid;grid-template-columns:160px 150px 150px auto;gap:10px;align-items:center;border:1px solid #e6ecf1;border-radius:11px;padding:9px 15px;margin-bottom:8px;font-size:13px}
.lmg-kol b{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8a97a3;margin-bottom:2px}
.lmg-spcbtn{justify-self:end;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;color:#1976d2;background:none;border:1px solid #cfdff5;border-radius:8px;padding:5px 11px;cursor:pointer}
.lmg-spcseg{display:none;grid-column:1/-1;border-top:1px solid #eef3f6;padding-top:9px}
.lmg-spcseg.is-open{display:block}
.lmg-spcseg .lmg-sl,.lmg-pivot .lmg-sl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#274b9f;margin:8px 0 4px}
.lmg-spcseg p,.lmg-pivot p{margin:0 0 6px;font-size:12.5px;line-height:1.6;max-width:90ch;white-space:pre-line;color:#42505d}
.lmg-handoff{display:flex;gap:10px;align-items:center;border:1px solid #cfdff5;background:#f3f8fe;border-radius:11px;padding:10px 14px;margin-bottom:12px;font-size:13px;color:#1c4e9d}
.lmg-handoff a{font-weight:600}
.lmg-ixd{border:1px solid #e6ecf1;border-radius:11px;margin-bottom:8px;padding:0 15px}
.lmg-ixd summary{padding:10px 0;cursor:pointer;font-size:13px}
.lmg-ixd p{margin:0 0 11px;font-size:12.5px;line-height:1.6;color:#42505d;white-space:pre-line}
.lmg-faner{display:flex;gap:6px;margin-bottom:13px}
.lmg-faneknapp{padding:6px 14px;border-radius:8px;font:inherit;font-size:12.5px;border:1px solid #d7dee5;color:#5b6b7a;background:#fff;cursor:pointer}
.lmg-faneknapp.pa{background:#1976d2;border-color:#1976d2;color:#fff;font-weight:500}
.lmg-pivot{border:1px solid #dfe7ed;border-left:3px solid #1976d2;border-radius:10px;padding:10px 15px;margin-bottom:9px;background:#fbfdfe}
.lmg-tokol{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
@media(max-width:980px){.lmg-tokol{grid-template-columns:1fr}.lmg-doserad{grid-template-columns:1fr 1fr}.lmg-body{grid-template-columns:1fr}.lmg-nav{flex-direction:row;flex-wrap:wrap}.lmg-navfot{display:none}}
.lmg-besl{display:grid;grid-template-columns:150px auto 1fr;gap:9px;align-items:center;border:1px solid #e6ecf1;border-radius:11px;padding:8px 13px;margin-bottom:7px;font-size:13px}
.lmg-vgr{display:inline-flex;gap:5px}
.lmg-vknapp{padding:5px 11px;border-radius:8px;font:inherit;font-size:12px;border:1px solid #d7dee5;color:#5b6b7a;background:#fff;cursor:pointer}
.lmg-vknapp.va{background:#e6f2ec;border-color:#2e7d52;color:#2e7d52;font-weight:600}
.lmg-vknapp.vs{background:#fdecec;border-color:#b3402f;color:#b3402f;font-weight:600}
.lmg-komm{font:inherit;font-size:12.5px;border:1px solid #e2e9ee;border-radius:8px;padding:6px 10px;min-width:0}
.lmg-notathode{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b7a;margin-bottom:8px}
.lmg-notat{width:100%;height:340px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.65;border:1px solid #e3eaf0;border-radius:12px;padding:13px 15px;background:#f7fafc;resize:vertical}
.lmg-notatknapper{margin-top:10px;display:flex;gap:8px}
/* Interaksjonspar (FEST/DMP) — kildens klassifisering vises ordrett */
.lmg-ixpar{border:1px solid #e6ecf1;border-radius:11px;padding:11px 15px;margin-bottom:9px}
.lmg-ixhode{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px;margin-bottom:4px}
.lmg-rel{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:6px;letter-spacing:.02em}
.r-avoid{background:#fdecec;color:#b3402f}
.r-care{background:#f9f0dd;color:#a86b12}
.r-none{background:#f2f5f8;color:#5b6b7a;border:1px solid #e2e9ee}
.lmg-ixp{margin:0 0 6px;font-size:12.5px;line-height:1.6;color:#42505d;max-width:88ch;white-space:pre-line}
.lmg-ixmer{margin:4px 0 2px}
.lmg-ixmer summary{font-size:12px;color:#1976d2;cursor:pointer;padding:2px 0}
.lmg-ixkilde{font-size:10.5px;color:#8a97a3;margin-top:5px}

/* Navneresolverens retting — alltid synlig for legen */
.c-tolk{background:#f9f0dd;color:#a86b12;border-color:#eddfbe;font-weight:600}

/* Mangel for annet preparat med samme virkestoff — dempet, ikke alarm */
.c-mgv{background:#fbf6ee;color:#8a6a2f;border-color:#eddfbe}
/* DMP-mangeldetaljer på raden — kildens tekst bak en summary */
.lmg-raddetalj{flex-basis:100%;margin-top:2px}
.lmg-raddetalj summary{font-size:11.5px;color:#a86b12;cursor:pointer;padding:2px 0}
.lmg-raddetalj .lmg-sl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a6a2f;margin:6px 0 3px}
.lmg-raddetalj p{margin:2px 0;font-size:12px;color:#5d5142;line-height:1.55;max-width:90ch}
/* Fremdriftsteller i beslutningssteget */
.lmg-telle{font-size:11.5px;font-weight:600;background:#eef2f6;color:#5b6b7a;border-radius:999px;padding:3px 10px;vertical-align:2px;margin-left:8px;white-space:nowrap}
.lmg-telle.ok{background:#e6f2ec;color:#2e7d52}
/* Dosen under navnet i beslutningsraden */
.lmg-nmdose{display:block;font-weight:400;font-size:11.5px;color:#8a97a3;line-height:1.35}
/* Gruppe: samme ATC-kode i oppslaget — dosene side om side ved beslutning */
.lmg-atcgruppe{border:1.5px solid #d8e3ee;border-radius:12px;padding:8px 8px 2px;margin-bottom:8px;background:#f8fbfe}
.lmg-atchode{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#3a6ea5;padding:2px 6px 8px}
.lmg-atchode .material-icons{font-size:15px}
.lmg-atcgruppe .lmg-besl{background:#fff}
/* Tom FEST-kortdose: hvorfor feltet er tomt, ikke bare en strek */
.lmg-tomkd{color:#8a97a3;font-style:italic}
/* Datagrunnlag som tabell: Legemiddel | Dosering | DSSN | Utløper | merker */
.lmg-tabell{border:1px solid #e6ecf1;border-radius:12px;overflow:hidden}
.lmg-trad{display:grid;grid-template-columns:180px 170px 1fr 86px auto;gap:10px;align-items:center;padding:9px 15px;border-top:1px solid #eef2f6;font-size:13px}
.lmg-trad:first-child{border-top:none}
.lmg-trad:nth-child(odd):not(.lmg-thode){background:#fbfcfe}
.lmg-thode{background:#f4f7fa;padding:7px 15px}
.lmg-thode span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b7a}
.lmg-td{color:#42505d;font-variant-numeric:tabular-nums}
.lmg-tdu{color:#8a97a3;font-size:12px;white-space:nowrap}
.lmg-trad .lmg-chips{justify-content:flex-end;flex:initial}
.lmg-trad .lmg-raddetalj{grid-column:1/-1}
@media(max-width:980px){.lmg-trad{grid-template-columns:1fr 1fr;row-gap:4px}.lmg-thode{display:none}}
/* Steg 1 — legens kontrollpunkt: kildevalg, avkrysning og doseretting.
   Raden får en avkryssingskolonne foran navnet; utelatte rader dempes i stedet
   for aa forsvinne, saa legen ser hva som er tatt ut. */
/* Siste sporet er bundet, ikke auto: hver rad er sin egen grid, saa et auto-spor
   blir like bredt som nettopp den radens chips — og da flyter kolonneoverskriftene
   fra hverandre nedover tabellen. Fast bredde holder hodet over sine egne tall. */
.lmg-trad-v{grid-template-columns:30px 170px 160px minmax(80px,1fr) 86px 300px}
@media(max-width:980px){.lmg-trad-v{grid-template-columns:30px 1fr}}
.lmg-medcell{display:flex;align-items:center}
.lmg-avkryss{background:none;border:none;padding:0;cursor:pointer;display:flex;color:#c3ccd5;line-height:0}
.lmg-avkryss .material-icons{font-size:20px}
.lmg-avkryss.pa{color:#1976d2}
.lmg-avkryss:focus-visible{outline:2px solid #1976d2;outline-offset:2px;border-radius:4px}
.lmg-ute{opacity:.5}
.lmg-ute .lmg-nm,.lmg-ute .lmg-td{text-decoration:line-through;text-decoration-color:#b6c0ca}
.lmg-rettet{font-size:11px;vertical-align:1px}
.lmg-doserett > summary{font-size:11.5px;color:#1976d2}
.lmg-doserett .lmg-dosefelt{width:100%;max-width:560px;margin:4px 0 0}
.lmg-velgoverlay.is-open{z-index:9600;display:flex;align-items:center;justify-content:center}
.lmg-velgboks{background:#fff;border-radius:16px;box-shadow:0 24px 70px -24px rgba(0,0,0,.5);padding:22px 24px 18px;max-width:720px;width:100%}
.lmg-velghode{font-size:17px;font-weight:600;color:#1d2731}
.lmg-velgsub{font-size:12.5px;color:#6b7883;line-height:1.5;margin:5px 0 14px}
.lmg-velgfot{display:flex;justify-content:flex-end;margin-top:16px}
.lmg-grunnlag{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#42525f;background:#f4f8fb;border:1px solid #e2eaf1;border-radius:9px;padding:8px 13px;margin:0 0 14px}
.lmg-grunnlagtxt{flex:1}
.lmg-grunnlagbytt{font:inherit;font-size:12px;background:none;border:none;color:#1976d2;cursor:pointer;padding:0;text-decoration:underline}
.lmg-kildekort{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.lmg-kildek{display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;background:#fff;border:1.5px solid #d7dee5;border-radius:10px;padding:10px 13px;cursor:pointer}
.lmg-kildek:hover{border-color:#b9c6d3}
.lmg-kildek.valgt{border-color:#1976d2;background:#e8f1fc;box-shadow:0 0 0 1px #1976d2 inset}
.lmg-kildenavn{font-size:13.5px;font-weight:600;color:#1d2731}
.lmg-kildeant{font-size:12px;color:#1976d2;font-weight:600}
.lmg-kildeunder{font-size:11.5px;color:#8a97a3;line-height:1.45}
.lmg-fot [data-act="neste"]:disabled{opacity:.45;cursor:not-allowed}
/* Fane-modal per legemiddel (felleskatalogtekst fra oppslaget) */
.lmg-medmodal{display:none;position:fixed;inset:0;z-index:9600;background:rgba(12,32,52,.45);padding:4vh 2vw;overflow:auto}
.lmg-medmodal.is-open{display:block}
.lmg-medbox{max-width:880px;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 24px 70px -24px rgba(0,0,0,.5);overflow:hidden}
.lmg-medhdr{display:flex;align-items:flex-start;gap:12px;padding:14px 18px 10px;background:#f4f7fa;border-bottom:1px solid #e3eaf0}
.lmg-medhdr h3{margin:0 0 2px;font-size:16px}
.lmg-medsub{font-size:11.5px;color:#7c8994}
.lmg-medx{margin-left:auto;background:#e9eef3;border:none;color:#5b6b7a;border-radius:9px;padding:6px;cursor:pointer;display:flex}
.lmg-medfaner{display:flex;gap:5px;padding:10px 18px;border-bottom:1px solid #e9eef3;flex-wrap:wrap;background:#fff}
.lmg-medkropp{padding:14px 18px 18px;max-height:60vh;overflow:auto;font-size:13px}
.lmg-medkropp p{white-space:pre-line;line-height:1.65;color:#42505d;max-width:88ch;margin:0 0 10px}
.lmg-medkropp .lmg-sl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#274b9f;margin:10px 0 4px}
.lmg-nmbtn{background:none;border:none;padding:0;font:inherit;font-weight:600;font-size:13.5px;color:#1565c0;cursor:pointer;text-align:left}
.lmg-nmbtn:hover{text-decoration:underline}
/* Merking (legens egne flagg) + skriv-der-du-leser */
.c-merk{background:#eef4fb;color:#2a5b96;border-color:#d5e4f4}
.lmg-merkerad{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.lmg-merk{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;color:#2a5b96;background:#fff;border:1px solid #cfdff5;border-radius:8px;padding:5px 11px;cursor:pointer;white-space:nowrap}
.lmg-merk.pa{background:#eef4fb;border-color:#2a5b96;font-weight:600}
.lmg-kortfot{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.lmg-kortfot .lmg-komm{flex:1;min-width:220px}
.lmg-filterrad{margin-bottom:9px}
/* Samleknappen i beslutningssteget. Den setter mange rader paa en gang, saa den
   skal se ut som en handling og ikke som et filter - men ikke som en primaer-
   knapp heller: det er «neste steg» som eier den vekten i flyten. */
.lmg-massrad{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.lmg-massknapp{display:inline-flex;align-items:center;gap:6px;border:1px solid #2a5b96;background:#eef4fb;color:#1f4472;border-radius:8px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.lmg-massknapp:hover{background:#e2edf9}
.lmg-massknapp .material-icons{font-size:18px}
.lmg-massrad .lmg-faneknapp{display:inline-flex;align-items:center;gap:6px}
.lmg-massrad .lmg-faneknapp .material-icons{font-size:17px}
.lmg-massfot{font-size:12px;color:#6b6b6b;line-height:1.5}
.lmg-nyremerk{margin:0 0 13px}
/* Indikasjonsfeltet per legemiddel */
.lmg-indrad{margin:0 0 9px}
.lmg-indrad label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b7a;margin-bottom:4px}
.lmg-indrad .lmg-komm{width:100%}
.lmg-indrad .lmg-fotn{margin-top:5px}
/* Styrke-underlinje i doseringskolonnen */
.lmg-kolsub{display:block;font-size:11px;color:#8a97a3;margin-top:2px}
/* Chips-kolonnen i datagrunnlagstabellen skal ikke skvise DSSN */
.lmg-trad .lmg-chips{max-width:330px}
/* Oppfølgingsfeltet under beslutningene */
.lmg-oppf{margin-top:14px}
.lmg-oppf label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b7a;margin-bottom:5px}
.lmg-oppf .lmg-komm{width:100%}
/* Doseringssteget: kildekolonnene og legens vurdering i samme kort */
.lmg-dosekort{border:1px solid #e6ecf1;border-radius:11px;margin-bottom:9px;background:#fff}
/* Kildekolonnene her bærer full ordlyd, ikke bare et tall — de trenger bredden
   de tomme 150px-kolonnene i den gamle raden ikke ga dem. */
.lmg-dosekort .lmg-doserad{border:none;border-radius:0;margin-bottom:0;padding:10px 15px 8px;grid-template-columns:170px minmax(190px,1fr) minmax(230px,1.3fr) auto;align-items:start}
.lmg-kolklikk{font:inherit;font-size:13px;text-align:left;background:none;border:1px dashed transparent;border-radius:8px;padding:4px 7px;margin:-4px -7px;cursor:pointer;color:#2c3a47;line-height:1.4}
.lmg-kolklikk:hover{border-color:#cfdff5;background:#f6faff}
.lmg-kolklikk:focus-visible{outline:2px solid #1976d2;outline-offset:1px}
.lmg-dosekort .lmg-nm{font-weight:600;padding-top:12px}
.lmg-dosekort .lmg-kolsub{line-height:1.45;margin-top:3px}
.lmg-dosevurdrad{display:flex;flex-wrap:wrap;gap:9px;align-items:center;border-top:1px solid #eef3f6;padding:9px 15px;background:#fbfdfe;border-radius:0 0 11px 11px}
.lmg-dosevurdrad .lmg-komm{flex:1;min-width:260px}

/* ── Inngangsflyt: stegstripe, faner, adaptiv knapp, handoff ─────────────── */
.lm-strip{display:flex;gap:8px;align-items:center;margin:0 0 18px;flex-wrap:wrap}
.lm-sdot{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#8a97a3}
.lm-sdot b{width:22px;height:22px;border-radius:50%;background:#eef2f6;display:flex;align-items:center;justify-content:center;font-size:12px;color:#5b6b7a;font-weight:600}
.lm-sdot.pa{color:#1d2731;font-weight:500}
.lm-sdot.pa b{background:#1976d2;color:#fff}
.lm-sdot.ok b{background:#e6f2ec;color:#2e7d52}
.lm-spil{color:#c6d0da;font-size:16px}
/* Steg som ikke inngaar i den valgte flyten: dempet og gjennomstreket, ikke
   skjult — legen skal se at det finnes en samstemming, og at den hoppes over. */
.lm-sdot.hoppet{opacity:.45;text-decoration:line-through;text-decoration-color:#c6d0da}
.lm-faner{display:flex;gap:4px;border-bottom:2px solid #e2e9ee}
.lm-fane{display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px 10px 0 0;font:inherit;font-size:14px;color:#5b6b7a;border:1.5px solid transparent;border-bottom:none;position:relative;top:2px;background:none;cursor:pointer}
.lm-fane .material-icons{font-size:17px}
.lm-fane.pa{background:#fff;border-color:#e2e9ee;color:#1d2731;font-weight:600;box-shadow:0 -2px 8px -4px rgba(20,32,43,.12)}
.lm-fane:focus-visible{outline:2px solid #1976d2;outline-offset:-2px}
.lm-fane-status{font-size:11.5px;font-weight:500;color:#2e7d52;background:#e6f2ec;border-radius:999px;padding:2px 9px}
.lm-fane-status.tom{color:#8a97a3;background:#f2f5f8}
.lm-fanekropp{border:1.5px solid #e2e9ee;border-top:none;border-radius:0 12px 12px 12px;padding:16px 18px;background:#fff}
.lm-ta-full{width:100%;min-height:270px;resize:vertical}
.lm-ta-epik{min-height:330px}
.lm-fanehint{display:flex;gap:8px;margin-top:10px;font-size:12px;color:#8a97a3;align-items:center}
.lm-fanehint .material-icons{font-size:15px}
/* Foten i sammenligningen: to likestilte utganger. Samstemming er ofte maalet
   i seg selv, saa hverken «kopier notat» eller «fortsett til 2LD» tegnes som
   hovedveien — samme vekt, samme ramme, samme farge. */
.lm-fotknapper{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.lmg-fotvalg{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:600;color:#1976d2;background:#fff;border:1.5px solid #1976d2;border-radius:9px;padding:9px 15px;cursor:pointer;white-space:nowrap}
.lmg-fotvalg:hover{background:#e8f1fc}
.lmg-fotvalg:focus-visible{outline:2px solid #1976d2;outline-offset:2px}
.lmg-fotvalg .material-icons{font-size:18px}
@media(max-width:760px){.lm-fotknapper{width:100%}.lmg-fotvalg{flex:1;justify-content:center}}

/* ── Fast / ved behov / kur ────────────────────────────────────────────────
   Skillet står skrevet i lista legen limer inn. Det ble lest og lagret på hver
   rad fra første versjon, og deretter aldri vist noe sted. */
.lmg-medgruppehode{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#3a6ea5;background:#eef4fb;border-top:1px solid #d8e3ee;border-bottom:1px solid #d8e3ee;padding:7px 15px}
.lmg-tabell .lmg-medgruppehode:first-child{border-top:none}
.lmg-medgruppeant{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:#fff;border:1px solid #d8e3ee;color:#2a5b96;font-size:11px}
.lmg-medgruppe{margin-bottom:14px}
.lmg-medgruppe .lmg-medgruppehode{border-radius:9px 9px 0 0;border:1px solid #d8e3ee;border-bottom:none;margin-bottom:0}
/* Form og pakning ved siden av styrken — samme rad, tydelig mindre vekt */
.lmg-form{color:#5b6b7a}
.lmg-mengde{color:#8a97a3;font-size:12px}
/* Refusjonshjemmelen slik den står i lista, og registerets svar på den */
.c-ref{background:#eef4fb;color:#2a5b96;border-color:#d5e4f4;font-weight:600}
.c-refavvik{background:#f9f0dd;color:#a86b12;border-color:#eddfbe;font-weight:600}
.c-kur{background:#f1eefb;color:#5b46a8;border-color:#ded6f2;font-weight:600}
.c-sep{background:#fdecec;color:#b3402f;border-color:#f5cfc9;font-weight:600}
.lmg-refepj{display:flex;flex-direction:column;gap:4px;background:#f8fbfe;border:1px solid #d8e3ee;border-radius:9px;padding:9px 11px;margin-bottom:9px}
.lmg-refepjlab{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b7a}
.lmg-refepjraa{font-size:13px;color:#2c3a47}
.lmg-refok{font-size:12px;color:#2f7d4f}
.lmg-refavvik{font-size:12px;color:#a86b12}
.lmg-refepjknapper{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.lmg-refleggtil{background:#fff;border:1px dashed #2a5b96;color:#2a5b96;font-weight:600}
.lmg-refleggtil:hover{background:#eef4fb}

/* ── LMG én arbeidsflate (lmg2) ────────────────────────────────────────────
   Sju steg ble én flate: lista selv er flyten. Radene er kompakte til de
   åpnes; alt tverrgående bor på kommandolinja; notatet er et panel. */
.lmg2-sheet{display:flex;flex-direction:column}
.lmg2-kropp{flex:1;min-height:0;display:flex}
.lmg2-innh{flex:1;padding:14px 22px 22px}
/* reisa i headeren */
.lmg2-reise{display:flex;align-items:center;gap:7px;font-size:12px;margin-left:22px;flex:1;min-width:0}
.lmg2-st{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);color:#fff;white-space:nowrap}
.lmg2-st.na{background:#fff;color:#1976d2;font-weight:700}
.lmg2-st.ok{opacity:.87}
.lmg2-pil{opacity:.6;color:#fff}
/* kommandolinja */
.lmg2-kmd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;background:#f4f8fc;border:1px solid #e2e9ee;border-radius:11px}
.lmg2-kknapp{display:inline-flex;align-items:center;gap:6px;border:1px solid #2a5b96;background:#eef4fb;color:#1f4472;border-radius:9px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.lmg2-kknapp:hover{background:#e2edf9}
.lmg2-kknapp.pa{background:#1976d2;border-color:#1976d2;color:#fff}
.lmg2-kknapp.gjort{border-color:#2e7d52;background:#e6f2ec;color:#2e7d52}
.lmg2-kknapp.varsom{border-color:#b3402f;background:#fdecec;color:#b3402f}
.lmg2-kknapp .material-icons{font-size:17px}
.lmg2-ksep{width:1px;height:24px;background:#dbe4ec;margin:0 2px}
.lmg2-port{margin-bottom:10px}
/* radene */
/* overflow:hidden klippet den klebrige radtoppen (sticky trenger fri vei til
   scrollcontaineren). Hjoernene rundes i stedet paa foerste/siste barn. */
.lmg2-gruppe{margin-bottom:14px;border:1px solid #e6ecf1;border-radius:11px}
.lmg2-gruppe > :first-child{border-radius:10px 10px 0 0}
.lmg2-gruppe > :last-child{border-radius:0 0 10px 10px}
.lmg2-ghode{border:none;border-bottom:1px solid #d8e3ee;border-radius:0;margin-top:0}
.lmg2-gknapp{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:#2a5b96;background:#fff;border:1px solid #d5e4f4;border-radius:7px;padding:3px 9px;cursor:pointer}
.lmg2-gknapp:hover{background:#eef4fb}
.lmg2-rad{border-top:1px solid #eef2f6;background:#fff}
.lmg2-radtopp{display:grid;grid-template-columns:30px minmax(200px,240px) 1fr auto auto minmax(240px,310px);gap:10px;align-items:center;padding:7px 13px}
/* Klebrig radtopp: navn + brikker + beslutningsknapper alltid i syne i det
   aapne kortet. Blaa understrek sier «dette er raden du staar i». */
.lmg2-rad.aapen > .lmg2-radtopp{position:sticky;top:0;z-index:6;background:#f8fbfe;border-bottom:2px solid #1976d2;box-shadow:0 4px 12px rgba(16,40,70,.10)}
.lmg2-rad > .lmg2-doss{margin:4px 13px 12px}
/* Landingene (Neste, medlenker, funnhopp) skal ikke legge maalet UNDER den
   klebrige linja. */
.lmg2-rad.aapen .lmg2-b{scroll-margin-top:86px}
/* Grunnen til en endring ELLER seponering faar hele linja under radtoppen.
   Ved Endre falt den ellers i 30px-kolonna som en avklemt boks; ved Seponer
   satt den viktigste setningen legen skriver i et 200px-felt. Plassholderen
   baerer valget, saa regelen treffer kun grunn-feltene. */
.lmg2-radtopp > .lmg-komm[placeholder^="Grunn"]{grid-column:2/6;width:100%}
.lmg2-rad:first-of-type{border-top:none}
.lmg2-rad:nth-child(odd){background:#fbfcfe}
.lmg2-rad.aapen{background:#f8fbfe;box-shadow:inset 5px 0 0 #1976d2}
.lmg2-rad.aapen > .lmg2-radtopp .lmg2-nmtxt{color:#0d47a1}
.lmg2-rad.aktiv{outline:2px solid #9ec4ea;outline-offset:-2px;border-radius:4px}
.lmg2-rad.lmg-ute{opacity:.5}
.lmg2-nm{display:block;background:none;border:none;font:inherit;text-align:left;cursor:pointer;padding:0;min-width:0}
.lmg2-nmtxt{font-weight:600;font-size:13.5px;color:#2c3a47}
.lmg2-nm small{display:block;font-weight:400;color:#8a97a3;font-size:11.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lmg2-nm:hover .lmg2-nmtxt{color:#1976d2}
.lmg2-var{color:#5b46a8;font-weight:600}
.lmg2-chips{justify-content:flex-start}
.lmg2-blaa{background:#eef4fb;color:#2a5b96;font-weight:600;cursor:pointer;font:inherit;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid #d5e4f4;display:inline-flex;align-items:center;gap:5px}
.lmg2-blaa:hover{background:#e2edf9}
.lmg2-bdot{width:7px;height:7px;border-radius:50%;background:#1976d2;display:inline-block}
.lmg2-komm{width:100%}
/* dossieret */
.lmg2-doss{grid-column:1/-1;background:#fff;border:1px solid #d8e3ee;border-radius:10px;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:4px}
.lmg2-b{min-width:0}
.lmg2-bh{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5b6b7a;margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lmg2-dosepar{display:flex;gap:12px}
.lmg2-dosepar .lmg-kol{flex:1}
.lmg2-poptxt{font-size:12.5px;line-height:1.5;color:#3c4a57;margin-bottom:6px}
.lmg2-ixpar{margin-bottom:8px}
.lmg2-dosslenker{display:flex;gap:8px;align-items:center;flex-wrap:wrap;grid-column:1/-1;border-top:1px dashed #e2e9ee;padding-top:9px}
/* skuffa */
.lmg2-skuff{position:fixed;inset:0;background:rgba(20,32,44,.45);display:none;align-items:flex-start;justify-content:center;z-index:1205;overflow:auto;padding:4vh 0}
.lmg2-skuff.is-open{display:flex}
.lmg2-skuffboks{width:min(880px,94vw);background:#fff;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.4);position:relative}
.lmg2-skuffhode{position:absolute;top:10px;right:10px;z-index:2}
.lmg2-skuffinnh{padding:18px 22px;max-height:88vh;overflow:auto}.lmg-skuffut{display:flex;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid #e6ecf2}
/* refusjonsmodalen */
.lmg2-refmodal{z-index:1210}
.lmg2-rmboks{width:min(700px,94vw);max-height:88vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.4)}
.lmg2-rmhdr{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #e2e9ee;position:sticky;top:0;background:#fff;z-index:2}
.lmg2-rmhdr b{font-size:15px}
.lmg2-rmsub{font-size:11.5px;color:#8a97a3}
.lmg2-rmhdr .lmg-medx{margin-left:auto}
.lmg2-rkort{margin:13px 18px;border:1px solid #d5e4f4;border-radius:11px;overflow:hidden}
.lmg2-rkort.ind{border-color:#ded6f2}
.lmg2-rkort.lmg2-repj{border-color:#e2e9ee;background:#fafcfe}
.lmg2-rkh{display:flex;align-items:center;gap:8px;padding:9px 13px;background:#eef4fb;font-weight:700;font-size:12.5px;color:#1f4472}
.lmg2-rkort.ind .lmg2-rkh{background:#f1eefb;color:#5b46a8}
.lmg2-rkort.lmg2-repj .lmg2-rkh{background:#f2f5f8;color:#5b6b7a}
.lmg2-rdot{width:8px;height:8px;border-radius:50%;background:#2e7d52;flex:none}
.lmg2-rdot.ind{background:#a86b12}
.lmg2-rdot.tom{background:#c3ccd4}
.lmg2-rkb{padding:11px 13px;font-size:12.5px;line-height:1.55;color:#3c4a57}
.lmg2-rl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a97a3;margin:8px 0 3px}
.lmg2-rkb .lmg2-rl:first-child{margin-top:0}
.lmg2-koder{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.lmg2-kd{border:1px solid #d5e4f4;background:#f8fbfe;border-radius:6px;padding:2px 8px;font-size:11.5px;color:#2a5b96}
.lmg2-rkurl{margin:-6px 18px 13px}
.lmg2-helfo{display:flex;gap:8px;padding:0 18px 13px;flex-wrap:wrap}
.lmg2-hknapp{font-size:12px;font-weight:600;color:#2a5b96;border:1px solid #d5e4f4;background:#f8fbfe;border-radius:8px;padding:6px 11px;text-decoration:none}
.lmg2-hknapp:hover{background:#eef4fb}
.lmg2-rmfot{padding:0 18px 14px;font-size:11px;color:#8a97a3}
/* notatpanelet */
.lmg2-notatpanel{position:fixed;top:0;right:0;bottom:0;width:min(560px,92vw);z-index:1206;display:none;transform:translateX(12px);opacity:0;transition:transform .18s,opacity .18s}
.lmg2-notatpanel.is-open{display:block;transform:none;opacity:1}
.lmg2-npboks{height:100%;background:#fff;box-shadow:-18px 0 50px rgba(0,0,0,.25);display:flex;flex-direction:column}
.lmg2-nphdr{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #e2e9ee;background:#f4f8fc}
.lmg2-nphdr b{font-size:14px}
.lmg2-npsub{font-size:11.5px;color:#5b6b7a}
.lmg2-nphdr .lmg-medx{margin-left:auto}
.lmg2-nptxt{flex:1;border:none;resize:none;margin:0;padding:16px 18px;font:12px/1.65 Consolas,Menlo,monospace;color:#2c3a47;background:#fbfcfe;outline:none}
.lmg2-npfot{display:flex;gap:9px;padding:13px 18px;border-top:1px solid #e2e9ee}
/* foten */
.lmg2-taster{font-size:11px;color:#8a97a3;margin-left:auto;margin-right:12px;white-space:nowrap}
.lmg2-taster kbd{background:#eef2f6;border:1px solid #d7dee5;border-radius:4px;padding:1px 5px;font-size:10px;font-family:inherit;margin:0 1px}
.lmg2-notatknapp.lmg2-klar{background:#2e7d52;border-color:#2e7d52}
@media(max-width:980px){.lmg2-radtopp{grid-template-columns:30px 1fr;row-gap:6px}.lmg2-doss{grid-template-columns:1fr}.lmg2-taster{display:none}.lmg2-reise{display:none}}
/* LMG 11.10.2026 (legeklage): status i stedet for avkrysning, oppgavelinje, «Fortsett resten», notatvarsel, smal skjerm */
.lmg2-status{display:flex;line-height:0}
.lmg2-status .material-icons{font-size:21px}
.lmg2-status.venter{color:#e0a100}
.lmg2-status.fortsett{color:#2e7d52}
.lmg2-status.endre{color:#b26a00}
.lmg2-status.seponer{color:#c62828}
.lmg2-status.ny{color:#1976d2}
.lmg2-tamed{color:#7b8a98}
.lmg2-tamed:hover{color:#1976d2}
.lmg2-doss > .lmg2-utelatlinje{grid-column:1 / -1}
.lmg2-utelatlinje{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 0;padding-top:8px;border-top:1px dashed #e2e8ee;font-size:12px;color:#7b8a98}
.lmg2-utelat{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:#5b6b7a;text-decoration:underline;cursor:pointer}
.lmg2-utelat:hover{color:#b3402f}
.lmg2-utelat .material-icons{font-size:16px}
.lmg2-oppgave{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 10px;padding:10px 14px;background:#fff8e1;border:1px solid #f3d27a;border-radius:11px;font-size:13.5px;color:#4a3b00}
.lmg2-oppgave > .material-icons{color:#c99400;font-size:20px}
.lmg2-oppgave > span:nth-child(2){flex:1;min-width:240px}
.lmg2-oppgaveant{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#ffe9a8;font-weight:700;font-size:12px;color:#5c4500}
.lmg2-oppgave.ferdig{background:#e8f5ee;border-color:#a8d5b9;color:#1d4d33}
.lmg2-oppgave.ferdig > .material-icons{color:#2e7d52}
.lmg2-masse{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #2e7d52;color:#2e7d52;background:#fff;font-weight:700;padding:7px 13px;border-radius:9px}
.lmg2-masse:hover{background:#e8f5ee}
.lmg2-masse .material-icons{font-size:17px}
.lmg-bunnlinje{gap:12px;flex-wrap:wrap}
.lmg2-npvarsel{display:flex;align-items:flex-start;gap:10px;margin:0 16px 10px;padding:10px 12px;background:#fff8e1;border:1px solid #f3d27a;border-radius:10px;font-size:13px;color:#4a3b00}
.lmg2-npvarsel > .material-icons{color:#c99400}
.lmg2-npvarsel > div{flex:1}
/* «Se notatet» skal alltid synes: foten klistres nederst i vinduet */
.lmg2-sheet > .lmg-fot{position:sticky;bottom:-26px;z-index:8;box-shadow:0 -6px 14px -10px rgba(16,40,70,.25)}
/* Toppen: fremdriften må aldri skjules av «Avslutt» */
@media(max-width:1250px){.lmg2-sheet .lmg-takst{display:none}}
@media(max-width:980px){
  .lmg2-reise{display:flex;margin-left:10px}
  .lmg2-reise > .lmg2-st:first-child,.lmg2-reise > .lmg2-pil{display:none}
  .lmg2-sheet .lmg-x > span:last-child{display:none}
  .lmg2-radtopp > :not(.lmg-medcell){grid-column:2 / -1}
  .lmg2-radtopp .lmg2-chips{display:flex;flex-wrap:wrap;gap:5px}
}

/* =========================================================================
   Hjemmeside: verifiseringslinje, omtaleblokk og «du har fått en hjemmeside»
   -------------------------------------------------------------------------
   Modalen vises én gang per bruker per side, ved oppstart, etter «Hva er
   nytt». Den skal føles som en beskjed — ikke som en reklame: ett bilde av
   legens EGEN side, tre korte punkter, og en vei ut i hvert hjørne.
   ========================================================================= */
.hs-verifisert { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
  padding: 7px 11px; margin: 0 0 10px; line-height: 1.5; }
.hs-verifisert .material-icons { font-size: 16px; line-height: 1.35; flex: 0 0 auto; }
.hs-omtale { border-top: 1px solid #e5e7eb; padding-top: 12px; margin-top: 4px; }

.hsm-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(3px); animation: hsmInn .18s ease-out; }
@keyframes hsmInn { from { opacity: 0 } to { opacity: 1 } }
.hsm-modal { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px);
  overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(15, 23, 42, .3);
  font-family: inherit; }
.hsm-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0;
  background: rgba(255, 255, 255, .82); border-radius: 50%; font-size: 22px; line-height: 1;
  color: #475569; cursor: pointer; z-index: 2; }
.hsm-x:hover { background: #fff; color: #0f172a; }
.hsm-hode { padding: 22px 24px 14px; }
.hsm-hode h2 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; font-weight: 750; color: #0f172a;
  padding-right: 26px; }
.hsm-verifisert { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12.5px;
  font-weight: 600; color: #065f46; line-height: 1.5; }
.hsm-verifisert .material-icons { font-size: 16px; line-height: 1.35; flex: 0 0 auto; }
.hsm-bilde { display: block; margin: 0 24px; border-radius: 10px; overflow: hidden;
  border: 1px solid #e2e8f0; }
.hsm-bilde img { display: block; width: 100%; height: auto; }
.hsm-kropp { padding: 16px 24px 4px; font-size: 13.5px; line-height: 1.62; color: #334155; }
.hsm-kropp p { margin: 0 0 12px; }
.hsm-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.hsm-liste li { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0; }
.hsm-liste .material-icons { font-size: 17px; color: #1e40af; line-height: 1.45; flex: 0 0 auto; }
.hsm-kontakt { color: #64748b; font-size: 12.5px; }
.hsm-fot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px 20px;
  border-top: 1px solid #f1f5f9; margin-top: 8px; }
.hsm-fot .hs-knapp { font-size: 13px; padding: 7px 15px; cursor: pointer; font-family: inherit; }
.hsm-senere { color: #64748b; border-color: #e2e8f0; }
@media (max-width: 560px) {
  .hsm-modal { width: 100%; }
  .hsm-hode { padding: 20px 18px 12px; }
  .hsm-bilde { margin: 0 18px; }
  .hsm-kropp { padding: 14px 18px 4px; }
  .hsm-fot { padding: 12px 18px 18px; }
}

/* Rad der språkmodellen rettet oppdelingen. Egen farge fra «c-tolk»: den
   sistnevnte betyr «modellen leste hele linja», denne betyr «reglene leste
   linja, men delte den feil, og modellen flyttet tekst mellom feltene».
   Legen skal kunne se forskjell på de to — det er ulike ting å kontrollere. */
.c-rettet{background:#eef2ff;color:#3730a3;border-color:#c7d2fe;font-weight:600}

/* «Til beslutning» — legens egne merker samlet, og der valgene tas.
   Rader uten valg står øverst og med farge; de med valg blir stående dempet,
   så legen ser hva han har gjort og ikke bare hva som gjenstår. */
.lmg2-beslrad{border-left:3px solid #b45309;background:#fffbf3}
.lmg2-beslrad.gjort{border-left-color:#2e7d52;background:#f6faf7;opacity:.82}
.lmg2-beslhode{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:.4rem}
.lmg2-beslsub{color:#5b6b7a;font-size:12.5px;font-weight:400}
.lmg2-beslgaa{margin-left:auto;background:none;border:0;color:#1e40af;font:600 12.5px inherit;
  cursor:pointer;padding:2px 4px;border-radius:5px}
.lmg2-beslgaa:hover{background:#eef2ff;text-decoration:underline}
.lmg2-beslmerker{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.55rem}.lmg-kildechip{font:inherit;font-size:11.5px;font-weight:500;cursor:pointer;transition:background .12s}.lmg-kildechip .material-icons{font-size:15px;margin-left:2px}.lmg-kildechip:hover{background:#dceafa}.lmg-kildechip.pa{background:#2a5b96;color:#fff;border-color:#2a5b96}.lmg-kildeboks{margin:0 0 9px;background:#fff}textarea.lmg-indfelt{font:inherit;line-height:1.5;resize:none;overflow:hidden;min-height:34px;display:block}.lmg-popvalg{margin-left:8px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;vertical-align:middle}.lmg-popvalg.v-fortsett{background:#e6f2ec;color:#2e7d52;border-color:#bcdccb}.lmg-popvalg.v-endre{background:#eef4fb;color:#2a5b96;border-color:#d5e4f4}.lmg-popvalg.v-seponer{background:#fdecec;color:#b3402f;border-color:#f3c9c3}.lmg-popvalg.v-delt{background:#f4f1e8;color:#7a6a3f;border-color:#e2d9c2}

/* Nyre / lever / eldre — dekningsteller, kort per preparat, og statusen på
   raden. Poenget med linja på raden er at «Tilpasset nyrefunksjon / alder»
   ikke lenger skal stå som en påstand uten kilde: den står ved siden av hva
   som er vurdert, og hver merkelapp er en vei tilbake til avsnittet. */
.lmg-dekning{margin:.6rem 0 .2rem;font-size:12.5px;font-weight:600;color:#3730a3}
.lmg-popkort.gjort{opacity:.72;border-left-color:#2e7d52}
.lmg-popradene{font-size:12px;color:#5b6b7a;margin:.15rem 0 .4rem}
.lmg-merk-valg{border-style:dashed;border-color:#9fb8dc;background:#fff;color:#2a5b96}
.lmg-merk-valg.pa{background:#eef4fb;border-color:#2a5b96;border-style:solid}
.lmg-merk-suffix{font-size:11px;color:#5a6b78;font-weight:400}
.lmg-popstatus{display:flex;flex-wrap:wrap;gap:.35rem;margin:7px 0 0}
.lmg-popmerke{font:600 11.5px inherit;padding:3px 9px;border-radius:999px;cursor:pointer;
  background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.lmg-popmerke:hover{background:#d7f7e8}
.lmg-popmerke.stille{background:#eef2ff;color:#3730a3;border-color:#c7d2fe;cursor:default}

/* Doseringsvurderingen og «endre dosering» hadde aldri fått en breddedeklarasjon.
   De tre .lmg-komm{width:100%}-reglene er bundet til .lmg-kortfot, .lmg-indrad
   og .lmg-oppf — ingen av dem er beholderen her. Feltene falt derfor til
   nettleserens standardbredde for <input>, rundt 20 tegn, og hjelpeteksten ble
   kuttet ved «Doseringsvurdering — le». Legen kunne ikke se hva feltet var til. */
.lmg-dosevurd,.lmg-dosefelt{display:block;width:100%;margin-top:7px;box-sizing:border-box}


/* Dossierets to kolonner er nå ekte beholdere, ikke fire frie grid-elementer.
   Før fylte nettleseren radvis: indikasjon og dosering delte rad 1, og ble
   doseringen 900 px høy fordi SPC-en var åpen, fikk indikasjonen et blankt
   felt på 650 px under seg — med nyre/lever/eldre liggende alene nederst.
   Nå stables venstre kolonne fra toppen uavhengig av høyre. */
.lmg2-kol1,.lmg2-kol2{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Fremdriftslinja og Neste-knappen — kommandolinja etter modal-tiden */
.lmg-fremdrift{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 9px;font-size:13px;color:#5b6b85}
.lmg-frem-del{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:2px 5px;font-family:inherit;font-size:13px;color:inherit;border-radius:6px}
button.lmg-frem-del{cursor:pointer}
button.lmg-frem-del:hover{background:#eef4fb}
.lmg-frem-del .material-icons{font-size:15px}
.lmg-frem-del.ok{color:#1e7d3f}
/* Flyttest 24.09: gul i stedet for grønn hake når kilden har interaksjoner eller noe ikke ble sjekket */
.lmg-frem-del.varsom{color:#9a5b00;font-weight:600}
.lmg-grunnlag .lmg-grunnlagbytt{margin-left:10px}
.lmg-grunnlagbytt.pa{font-weight:600;text-decoration:none;color:#1e7d3f}
.lmg-ixuten{color:#9a5b00}
.lmg-ngdose{margin-top:4px}
.lmg-frem-del.feil{color:#a33f2b;font-weight:600}
.lmg-frem-skille{color:#c3ccdb}
.lmg-neste{display:inline-flex;align-items:center;gap:7px;background:#2563eb;color:#fff;border:0;border-radius:9px;padding:9px 16px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 1px 3px rgba(15,42,90,.18)}
.lmg-neste:hover{background:#1d4fc7}
.lmg-neste.ferdig{background:#1e7d3f}
.lmg-neste.ferdig:hover{background:#186a34}
.lmg-neste .material-icons{font-size:17px}
.lmg-bunnlinje{display:flex;justify-content:center;margin:16px 0 4px}
.lmg-behovchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.lmg-behovchips .lmg-vknapp{font-size:12.5px}
.lmg-behovchips .lmg-vknapp.pa{background:#e7f0fd;border-color:#2563eb;color:#1d4fc7;font-weight:600}
/* NorGeP-kriteriene i dossieret — kildekort i samme spraak som interaksjonene */
.lmg-ngkort{border:1px solid #e2e9ee;border-radius:9px;padding:9px 12px;margin:7px 0;background:#fff}
.lmg-ngtekst{font-size:13.5px;color:#1d2b3f}
.lmg-nggruppe{color:#5b6b85}
.lmg-ngpartner{color:#5b6b85;font-size:12.5px}
.lmg-ngkomm{margin:5px 0 2px;font-size:13px;color:#3d4c63;line-height:1.45}
.lmg-chip.c-krit{border-color:#cfd9e6;color:#44546b;background:#f4f7fb}
/* Typografi paa 4.8-utdragene — kildens ord, vaar sats */
.lmg-bivfrekord{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#526079;background:#edf1f7;border-radius:4px;padding:1px 6px;margin:3px 6px 1px 0}
.lmg-bivorgan{color:#2b3a52}
.lmg-bivutdrag{line-height:1.55}
/* Dossierets bolker: soner (flate paneler) med tittelbaand — eierens valg
   av mockup A+C 29.08. Panelet baerer sonen, baandet baerer navnet; kortene
   inni forblir hvite saa nivaaene ikke flyter sammen. */
.lmg2-doss .lmg2-b{background:#f8fafd;border:1px solid #edf1f7;border-radius:10px;padding:11px 13px}
.lmg2-doss .lmg2-bh{background:#eef3f9;box-shadow:inset 3px 0 0 #b9cbe4;margin:-11px -13px 10px;padding:8px 13px;border-radius:9px 9px 0 0;border-bottom:1px solid #e4ebf4}
.lmg2-kol1,.lmg2-kol2{gap:14px}
.lmg2-doss .lmg-ixpar,.lmg2-doss .lmg-ixd,.lmg2-doss .lmg-ngkort{background:#fff}
.lmg2-doss .lmg-bivtreff{background:#fff;border:1px solid #e6ecf1;border-radius:9px;padding:9px 12px;margin:8px 0}
.lmg2-doss .lmg2-vurd{background:#f8fafd;border-color:#edf1f7}
.lmg-doserettrad{display:flex;gap:8px;align-items:center}
.lmg-doserettrad .lmg-komm{flex:1}
.lmg-doseok{white-space:nowrap}
/* Flytpila: stille gul veiviser for aapningsflyten */
.lmg-flytpil{display:inline-block;color:#d97706;font-size:16px;font-weight:700;margin-right:7px;animation:lmgflyt 1.8s ease-in-out infinite}
@keyframes lmgflyt{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(4px);opacity:1}}
@media (prefers-reduced-motion: reduce){.lmg-flytpil{animation:none}}
.lmg-merknotat{flex:1;min-width:220px}
.lmg2-sok3d{margin:10px 0 4px}
.lmg2-sok3d summary{cursor:pointer;font-size:13px;color:#44546b}
.lmg2-vurd{grid-column:1/-1;display:flex;align-items:center;gap:10px;background:#f6fafd;border:1px solid #d8e3ee;border-radius:8px;padding:8px 12px}
.lmg2-vurd .lmg2-bh{margin:0;white-space:nowrap}
.lmg2-vurd .lmg-komm{flex:1;margin:0}
.lmg2-vurdvalg{display:inline-flex;gap:6px;margin:0 4px 0 2px;flex:none}
/* Medlenke — klikkbart legemiddelnavn i interaksjons-/NorGeP-kort: tar deg til raden */
.lmg-medlenke{display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 9px;border:1px solid #c9dcf5;border-radius:7px;background:#eef4fd;color:#1d4fc7;font-weight:700;font-size:inherit;font-family:inherit;line-height:1.45;cursor:pointer;vertical-align:baseline}
.lmg-medlenke:hover{background:#dceafb;border-color:#a8c6ee}
.lmg-medpil{font-size:13px !important;line-height:1 !important;opacity:.75}
.lmg-medstatus{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;border-radius:5px;padding:1px 5px;margin-left:3px;line-height:1.4}
.lmg-medstatus.st-sep{background:#fdecea;color:#b42318;border:1px solid #f2c4bd}
.lmg-medstatus.st-end{background:#fdf3e0;color:#8a5b06;border:1px solid #eed9a9}

/* ── LMG: kildeseksjoner i populasjonskortet (01.09.2026) ──────────────────
   Ett kort per preparat, alle kilder stablet inni med hvert sitt kildemerke,
   OEN knapperad nederst. Regelen bak strukturen: ingen kildetekst under
   beslutningsknappene. En kontraindikasjon som staar under «Vurdert - ingen
   endring» ville gjort kvitteringen til en paastand om en lesning som ikke
   hadde skjedd. Derfor den tykkere streken over foten - den er et punktum. */
.lmg-popkorthode{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;padding-bottom:8px;border-bottom:1px solid #e8eef3}
.lmg-poppreparat{font-size:14px;font-weight:700;color:#1b2b36}
.lmg-popseksjon{padding:10px 0;border-bottom:1px dashed #e4ebf1}
.lmg-popseksjon:last-of-type{border-bottom:none}
.lmg-poptomseksjon{opacity:.85}
.lmg-poptom{font-size:12.5px;color:#8a97a3;font-style:italic}
.lmg-kilde.k-43{background:#fdeceb;color:#9e2a2a}
.lmg-kilde.k-nlh{background:#eaf3ee;color:#1f6b50}
.lmg-kilde.k-tom{background:#eef1f4;color:#8a97a3}
.lmg-poplenker{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lmg-poplenker .lmg-chip{cursor:pointer}
.lmg-formvarsel{color:#8a6414}
.lmg-fotn-prosa{color:#8a6414}
.lmg-popkort .lmg-kortfot{margin-top:12px;padding-top:11px;border-top:2px solid #dde6ee}
/* Kildens tabell. Doseringen staar i tabell naar den avhenger av en maalt
   verdi - eGFR, vekt, alder. Uten den er «Dosen justeres i henhold til
   tabellen» en setning som ender i loese luften. */
.lmg-tabvrapp{overflow-x:auto;margin-top:8px}
.lmg-spctab{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;border:1px solid #dfe7ed;border-radius:8px;overflow:hidden}
.lmg-spctab th{background:#f0f4f8;color:#5b6b7a;font-size:10px;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:7px 10px;border-bottom:1px solid #dfe7ed;font-weight:700}
.lmg-spctab td{padding:7px 10px;border-bottom:1px solid #eef2f6;vertical-align:top;color:#2b3a44}
.lmg-spctab tr:last-child td{border-bottom:none}
.lmg-spctab td:first-child{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){.lmg-spctab{font-size:11.5px}.lmg-spctab th,.lmg-spctab td{padding:5px 7px}}
.lmg-popbolk{margin-bottom:2px}
.lmg-popbolk .lmg-popseksjon:first-of-type{padding-top:2px}
.lmg-popdet .lmg-popseksjon{padding:8px 0}
.lmg2-kolbred{grid-column:1/-1;display:flex;flex-direction:column;gap:14px;min-width:0}
.lmg2-kolbred:empty{display:none}
/* Kildeseksjonene i full bredde: hold lesebredden nede paa lange linjer, men
   la tabellen bruke hele plassen. */
.lmg2-kolbred .lmg-popseksjon>p{max-width:88ch}
.lmg2-kolbred .lmg-tabvrapp{max-width:100%}
@media (min-width:1100px){.lmg2-kolbred .lmg-spctab{font-size:13px}}

/* ===================== EØS review v2 (seksjoner, betinget visning, masthead) ===================== */
.eos-review { display: flex; flex-direction: column; gap: 14px; }
.eos-masthead {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  background: linear-gradient(135deg, #0b2a5b 0%, #194d80 100%); color: #fff;
  border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.eos-masthead-flag { flex: 0 0 auto; width: 72px; height: 48px; border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.eos-masthead-flag svg { display: block; width: 100%; height: 100%; }
.eos-masthead-text { flex: 1 1 auto; min-width: 0; }
.eos-masthead-title { font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; line-height: 1.25; }
.eos-masthead-sub { font-size: .82rem; opacity: .92; margin-top: 2px; }
.eos-masthead-issuer { font-size: .72rem; opacity: .75; margin-top: 4px; }
.eos-masthead-en { flex: 0 0 auto; text-align: right; font-size: .7rem; opacity: .7; line-height: 1.4; }
.eos-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eos-section-title { flex: 1 1 auto; }
.eos-section-meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.eos-progress {
  font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  background: rgba(255,255,255,.16); color: #e2e8f0; font-variant-numeric: tabular-nums; }
.eos-progress-done { background: #16a34a; color: #fff; }
.eos-lege-badge-header { background: #fef3c7; color: #92400e; border-color: #fde68a; margin-left: 0; }
.eos-section-body { gap: 12px; }
.eos-heading { margin-top: 6px; }
.eos-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eos-h4 { margin: 8px 0 0; font-size: .92rem; font-weight: 700; color: #194d80;
  padding-bottom: 4px; border-bottom: 2px solid #dbe4ee; flex: 1 1 auto; }
.eos-h5 { margin: 4px 0 0; font-size: .82rem; font-weight: 700; color: #37474f; flex: 1 1 auto; }
.eos-hint { font-size: .75rem; color: #64748b; margin-top: 4px; line-height: 1.4; }
.eos-text { background: #f8fafc; border-left: 3px solid #cbd5e1; padding: 8px 12px; border-radius: 0 6px 6px 0; }
.eos-text p { margin: 0 0 4px; font-size: .78rem; color: #475569; line-height: 1.45; }
.eos-text p:last-child { margin-bottom: 0; }
.eos-noall {
  flex: 0 0 auto; background: #fff; border: 1px solid #c5d3e0; color: #546e7a; border-radius: 4px;
  padding: 3px 10px; font-size: .72rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.eos-noall:hover { background: #e3f2fd; border-color: #90caf9; }
.eos-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eos-row[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eos-row[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eos-row > .eos-field { margin-bottom: 0; }
.eos-block { padding: 10px 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #fbfdff;
  display: flex; flex-direction: column; gap: 12px; }
.eos-checks { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.eos-check { padding: 3px 0; }
.eos-kmi { font-size: 1rem; font-weight: 700; color: #194d80; padding: 6px 0 0; }
.eos-date { max-width: 220px; }
.eos-number { max-width: 160px; }
.eos-th-del, .eos-td-del { width: 32px; }
.eos-table td .eos-select.eos-cell { padding: 5px 6px; }
.eos-table th.eos-th-date { width: 170px; }
.eos-table th.eos-th-select { width: 150px; }
.eos-review [hidden] { display: none !important; }
@media (max-width: 900px) {
  .eos-row, .eos-row[data-cols="3"], .eos-row[data-cols="4"] { grid-template-columns: 1fr; }
  .eos-masthead-en { display: none; }
}

/* ===================== LMG: «OK, neste» i radtoppen (05.09.2026) ===================== */
.lmg2-kommgr{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.lmg2-kommgr .lmg-komm{flex:1 1 120px;min-width:0}
.lmg-oknext{white-space:nowrap;font-weight:600;border-color:#1976d2;color:#1976d2;background:#eef5fc}
.lmg-oknext:hover{background:#1976d2;color:#fff}
.lmg-oknext.va{background:#e6f2ec}
.lmg-oknext.va:hover{background:#2e7d52;color:#fff}
.lmg-oknext.vs:hover{background:#b3402f;color:#fff}

/* LMG fase A 05.09.2026: underpopulasjoner og punktlister i kildekortene */
.lmg-popunder{margin:6px 0 0 12px;padding-left:10px;border-left:2px solid #dbe4ee}
.lmg-popunder>.lmg-sl{margin-top:4px}
.lmg-popliste{margin:4px 0 6px 0;padding-left:22px;max-width:88ch}
.lmg-popliste li{margin:2px 0}
.lmg-popseksjon>p+p,.lmg-popunder>p+p{margin-top:6px}

/* LMG fase F 05.09.2026: populasjonsspørsmålet i radtoppen (nyre/lever/eldre) */
.lmg2-popgr{display:inline-flex;gap:5px;align-items:center;min-width:0}
.lmg2-popgr.tom{width:0;gap:0}
.lmg2-popwrap{position:relative;display:inline-block}
.lmg2-poplab{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:12px;padding:5px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;border:1px solid}
.lmg2-poplab.vent{background:#fff8e6;border-color:#e6b95c;color:#7a5410;font-weight:600}
.lmg2-poplab.ok{background:#e6f2ec;border-color:#2e7d52;color:#2e7d52}
.lmg2-poplab.aktivlab{box-shadow:0 0 0 3px rgba(25,118,210,.18)}
.lmg2-poplab small{font-size:10.5px;font-weight:400;opacity:.85}
.lmg2-popover{position:absolute;right:0;left:auto;top:calc(100% + 8px);z-index:20;width:min(720px,80vw);max-height:62vh;overflow:auto;background:#fff;border:1px solid #cfdff5;border-radius:12px;box-shadow:0 14px 40px rgba(16,40,70,.22);padding:10px 14px 12px;text-align:left;font-weight:400;color:#123}
.lmg2-popwrap.aapen .lmg2-popover::before{content:"";position:absolute;right:22px;top:-7px;width:12px;height:12px;background:#fff;border-left:1px solid #cfdff5;border-top:1px solid #cfdff5;transform:rotate(45deg)}
.lmg2-pophode{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.lmg2-pophode .lmg-sl{margin:0;flex:1}
.lmg2-pophint{font-size:11px;color:#5a6b78}
.lmg2-poplukk{margin-left:auto}
.lmg2-popkropp{max-width:none}
.lmg2-popkropp .lmg-popseksjon>p{max-width:none}
.lmg2-popfot{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #e4ebf1;position:sticky;bottom:-12px;background:#fff}
.lmg2-popfot kbd{font:inherit;font-size:10.5px;padding:0 5px;border:1px solid #c9d4e0;border-bottom-width:2px;border-radius:4px;background:#f6f8fb;color:#5a6b78}
.lmg2-popvis{margin-left:auto}
.lmg-oknext.vent{border-style:dashed;color:#7a5410;border-color:#e6b95c;background:#fffdf7}
.lmg2-popforst{margin-bottom:6px}
.lmg2-popforst>.lmg2-b{border-color:#9ec4ea}
@media (max-width:1100px){.lmg2-popover{width:min(720px,92vw)}}


/* ── Fritekst: modusknappene stakk utenfor ────────────────────────────────
   .fritekst-control-bar har flex-wrap:wrap, men .fritekst-mode-group inni har
   flex-shrink:0 og ingen flex-wrap. Gruppen var derfor ÉN ubrytelig linje som
   stakk ut av baren, og wrappingen på forelderen fikk aldri gjort noe: den kan
   bare bryte MELLOM gruppen og handlingsknappene, ikke inne i gruppen.
   Utslaget: ved vanlig vindusbredde sto «Fri chat · Maler · Henvisninger ·
   PDF erklæring» synlig, mens «AAP/ufør · EØS · PDF skjema» lå utenfor til
   høyre — uten scrollbar, uten fade, uten noe som antydet at det var mer.
   EØS-knappen var altså umulig å finne uten å vite at den fantes.
   min-width:0 må med: et flex-element har min-width:auto som standard og
   nekter å krympe under innholdsbredden, så flex-shrink alene holder ikke. */
.fritekst-modal-container .fritekst-mode-group{
  flex-wrap: wrap;
  flex-shrink: 1;
  min-width: 0;
  row-gap: 0.5rem;
}

/* ── refpdf: legeerklæringsmodus på A4-arket (09.09.2026) ──────────────────
   Samme ark (dokument-pdf.js) brukes nå av henvisning (dashboard + Fritekst KI)
   og av legeerklæringens steg 3. Klassen refpdf-ark--le speiler ekons-pdf.js:
   sentrert tittel, ingen mottaker/telefon, «Gjelder:»-linje, 10pt brødtekst.
   Alt under prefiks refpdf- så ingenting kolliderer med resten av bundelen. */
.refpdf-gjelder { display: none; margin-top: 4mm; font-size: 10pt; line-height: 6mm; }
.refpdf-ark--le .refpdf-gjelder { display: block; }
.refpdf-ark--le .refpdf-tittelrad { justify-content: center; }
.refpdf-ark--le .refpdf-tittel { font-size: 16pt; text-align: center; min-width: 0; }
.refpdf-ark--le .refpdf-til,
.refpdf-ark--le .refpdf-tlf { display: none; }
.refpdf-ark--le .refpdf-kropp { font-size: 10pt; line-height: 5mm; }
.refpdf-ark--le .refpdf-footer { padding-top: 10mm; border-top: 0.2mm solid #969696; }

/* Fritekst KI: PDF-knappen i svar-verktøylinja (mellom Kopier og Dikter inn) */
.fritekst-modal-container .fritekst-message-actions .fritekst-pdf-action .material-icons { color: #c0392b; }

/* Legeerklæring steg 3: lagret signatur over streken (09.09.2026) */
.le-doc-sig-img { display: block; max-width: 55mm; max-height: 28mm; margin-bottom: 0.4rem; object-fit: contain; object-position: left bottom; }
.le-doc-sig-img.is-hidden { display: none; }

/* Fritekst KI: «+ Ny sesjon»-knapp på kontekstraden (09.09.2026) */
.fritekst-modal-container .fritekst-nysesjon-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid #15803d; background: #16a34a; color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.fritekst-modal-container .fritekst-nysesjon-btn .material-icons { font-size: 18px; color: #fff; }
.fritekst-modal-container .fritekst-nysesjon-btn:hover { background: #15803d; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35); }
.fritekst-modal-container .fritekst-nysesjon-btn:active { background: #166534; }

/* =============================================================================
   LIVE-TRANSKRIPT: talerturer i to farger (09.09.2026, variant B)
   Lege = appens blå lysnet for svart flate, pasient = varm gul. Ulik lyshet
   skiller dem også for fargeblinde. Partial = setning under transkribering,
   grå kursiv til den er ferdig og taleren er avgjort.
   ============================================================================= */
.video-transcription-content {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.video-transcription-line {
    margin: 0;
    padding-left: 10px;
    border-left: 3px solid rgba(255,255,255,0.25);
}
.video-transcription-line .vt-who {
    display: block;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1px;
    color: rgba(255,255,255,0.6);
}
.video-transcription-line.speaker-doctor { border-color: #8cb8ff; }
.video-transcription-line.speaker-doctor .vt-who { color: #8cb8ff; }
.video-transcription-line.speaker-patient { border-color: #ffc07a; }
.video-transcription-line.speaker-patient .vt-who { color: #ffc07a; }
.video-transcription-partial {
    margin: 0;
    padding-left: 10px;
    border-left: 3px solid transparent;
    color: rgba(255,255,255,0.55);
    font-style: italic;
}

/* ==========================================================================
   FastlegeKI Kvalitet i innstillinger (kvh-)
   ========================================================================== */
.kvh { display: flex; flex-direction: column; gap: 14px; }
.kvh-hero { position: relative; overflow: hidden; border-radius: 14px; padding: 22px 22px 20px; color: #fff; background: linear-gradient(135deg, #0d47a1 0%, #1976d2 55%, #00897b 100%); box-shadow: 0 6px 18px rgba(13, 71, 161, 0.25); }
.kvh-hero::after { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none; }
.kvh-hero::before { content: ""; position: absolute; right: 60px; bottom: -80px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none; }
.kvh-hero__merke { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; opacity: 0.92; }
.kvh-hero__merke .material-icons { font-size: 16px; }
.kvh-hero__tittel { position: relative; z-index: 1; margin: 10px 0 6px; font-size: 21px; line-height: 1.25; font-weight: 600; color: #fff; }
.kvh-hero__tekst { position: relative; z-index: 1; margin: 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.kvh-hero__knapper { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.kvh-knapp { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #0d47a1; font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.kvh-knapp:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); }
.kvh-knapp:focus-visible, .kvh-tall__kort:focus-visible, .kvh-varsel:focus-visible { outline: 3px solid #ffd54f; outline-offset: 2px; }
.kvh-knapp .material-icons { font-size: 18px; }
.kvh-knapp--sek { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.45); }
.kvh-knapp--sek:hover { background: rgba(255, 255, 255, 0.24); box-shadow: none; }
.kvh-hint { font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
.kvh-tall { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 16px; }
.kvh-tall__kort { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); color: #fff; text-decoration: none; }
.kvh-tall__kort:hover { background: rgba(255, 255, 255, 0.24); }
.kvh-tall__kort .material-icons { font-size: 18px; opacity: 0.85; }
.kvh-tall__kort b { font-size: 22px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.kvh-tall__kort small { font-size: 12px; opacity: 0.9; }
.kvh-varsel { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 12px; border-radius: 10px; background: #fff8e1; color: #6d4c00; font-size: 13.5px; font-weight: 500; text-decoration: none; }
.kvh-varsel span:nth-child(2) { flex: 1; }
.kvh-funk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kvh-funk__kort { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-white); }
.kvh-funk__kort .material-icons { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 9px; font-size: 20px; color: var(--primary); background: var(--primary-light); }
.kvh-funk__kort b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.kvh-funk__kort small { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.kvh-fot { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-muted); }
.kvh-fot .material-icons { font-size: 15px; }
@media (max-width: 600px) { .kvh-funk { grid-template-columns: 1fr; } .kvh-hero { padding: 18px; } .kvh-hero__tittel { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .kvh-knapp { transition: none; } .kvh-knapp:hover { transform: none; } }
html[data-theme="dark"] .kvh-hero { background: linear-gradient(135deg, #0b2f66 0%, #13579e 55%, #00695c 100%); box-shadow: none; }
html[data-theme="dark"] .kvh-knapp { color: #0b2f66; }
html[data-theme="dark"] .kvh-varsel { background: #3e3100; color: #ffe08a; }


/* =============================================================================
   Fritekst KI: «Legg til utklipp» (15.09.2026)
   Knapp i kontekstraden, kvittering med første linje og Angre, kort blink i feltet.
   Bruker --fritekst-*-variablene, så mørk modus følger med av seg selv.
   ============================================================================= */
.fritekst-modal-container .fritekst-utklipp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--fritekst-primary);
  background: var(--fritekst-primary); color: var(--fritekst-bg-white);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.fritekst-modal-container .fritekst-utklipp-btn .material-icons { font-size: 18px; }
.fritekst-modal-container .fritekst-utklipp-btn:hover:not(:disabled) {
  background: var(--fritekst-primary-dark); border-color: var(--fritekst-primary-dark);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25); transform: translateY(-1px);
}
.fritekst-modal-container .fritekst-utklipp-btn:active:not(:disabled) { transform: none; box-shadow: none; }
.fritekst-modal-container .fritekst-utklipp-btn:focus-visible { outline: 3px solid var(--fritekst-primary-light); outline-offset: 2px; }
.fritekst-modal-container .fritekst-utklipp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.fritekst-modal-container .fritekst-utklipp-kvittering {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 0.75rem; padding: 8px 8px 8px 12px;
  border: 1px solid var(--fritekst-border-light); border-left: 4px solid var(--fritekst-primary);
  border-radius: 10px; background: var(--fritekst-bg-white); color: inherit;
  font-size: 13px; line-height: 1.45;
  animation: fritekst-utklipp-inn 0.18s ease-out;
}
/* Nødvendig: regelen over står sist i fila og ville ellers vunnet over .fritekst-hidden */
.fritekst-modal-container .fritekst-utklipp-kvittering.fritekst-hidden { display: none; }
.fritekst-modal-container .fritekst-utklipp-kvittering > .material-icons { font-size: 18px; margin-top: 1px; color: var(--fritekst-primary); }
.fritekst-modal-container .fritekst-utklipp-ok { border-left-color: #16a34a; }
.fritekst-modal-container .fritekst-utklipp-ok > .material-icons { color: #16a34a; }
.fritekst-modal-container .fritekst-utklipp-feil { border-left-color: #d97706; }
.fritekst-modal-container .fritekst-utklipp-feil > .material-icons { color: #d97706; }
.fritekst-modal-container .fritekst-utklipp-kropp { flex: 1 1 auto; min-width: 0; }
.fritekst-modal-container .fritekst-utklipp-hoved { overflow-wrap: anywhere; }
.fritekst-modal-container .fritekst-utklipp-sitat { font-weight: 600; }
.fritekst-modal-container .fritekst-utklipp-ekstra { margin-top: 2px; font-size: 12px; color: var(--fritekst-text-muted); }
.fritekst-modal-container .fritekst-utklipp-angre {
  flex: 0 0 auto; align-self: center;
  padding: 3px 12px; border-radius: 999px;
  border: 1.5px solid var(--fritekst-primary); background: transparent; color: var(--fritekst-primary);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.fritekst-modal-container .fritekst-utklipp-angre:hover { background: var(--fritekst-primary-light); color: var(--fritekst-primary-dark); }
.fritekst-modal-container .fritekst-utklipp-angre:focus-visible,
.fritekst-modal-container .fritekst-utklipp-lukk:focus-visible { outline: 2px solid var(--fritekst-primary); outline-offset: 2px; }
.fritekst-modal-container .fritekst-utklipp-lukk {
  flex: 0 0 auto; align-self: center; display: inline-flex;
  padding: 2px; border: 0; border-radius: 6px;
  background: transparent; color: var(--fritekst-text-muted); cursor: pointer;
}
.fritekst-modal-container .fritekst-utklipp-lukk .material-icons { font-size: 16px; }
.fritekst-modal-container .fritekst-utklipp-lukk:hover { color: inherit; background: var(--fritekst-primary-light); }

.fritekst-modal-container .fritekst-context-input.fritekst-utklipp-blink { animation: fritekst-utklipp-blink 1.2s ease-out; }
@keyframes fritekst-utklipp-blink {
  0%   { border-color: var(--fritekst-primary); box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.28); }
  100% { border-color: var(--fritekst-border-light); box-shadow: 0 0 0 0 rgba(25, 118, 210, 0); }
}
/* Blinkende ramme rundt det som nettopp ble limt inn (fritekst-ki.js rammeRundtNytt) */
.fritekst-utklipp-speil { position: absolute; top: 0; left: -10000px; visibility: hidden;
  white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; }
.fritekst-utklipp-ramme { position: fixed; z-index: 10035; pointer-events: none;
  border: 2px solid #2563eb; border-radius: 6px; background: rgba(37, 99, 235, 0.07);
  animation: fritekst-utklipp-ramme 3.6s ease-out forwards; }
.fritekst-utklipp-ramme.is-utenfor { display: none; }
.fritekst-utklipp-ramme.is-under { border-bottom-style: dashed; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fritekst-utklipp-ramme.is-over { border-top-style: dashed; border-top-left-radius: 0; border-top-right-radius: 0; }
.fritekst-utklipp-ramme-merke { position: absolute; top: -1px; right: 8px; transform: translateY(-50%);
  background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.fritekst-utklipp-ramme.is-over .fritekst-utklipp-ramme-merke { top: auto; bottom: -1px; transform: translateY(50%); }
@keyframes fritekst-utklipp-ramme {
  0%, 24%, 48% { opacity: 1; }
  12%, 36%     { opacity: .25; }
  75%          { opacity: 1; }
  100%         { opacity: 0; }
}
@keyframes fritekst-utklipp-ramme-rolig { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fritekst-utklipp-inn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fritekst-modal-container .fritekst-utklipp-kvittering,
  .fritekst-modal-container .fritekst-context-input.fritekst-utklipp-blink { animation: none; }
  .fritekst-utklipp-ramme { animation: fritekst-utklipp-ramme-rolig 3.6s ease-out forwards; }
  .fritekst-modal-container .fritekst-utklipp-btn:hover:not(:disabled) { transform: none; }
}

/* LMG-panelet: var inline style="margin:0 0 10px" — blokkert av CSP style-src (ingen unsafe-inline). */
.lm-panel-hint.lm-hint-tett { margin: 0 0 10px; }

/* Tenke-nivå-velgeren i notat-verktøylinja (Sonnet 5 effort — A/B-test av
   notatkvalitet: bytt nivå og trykk Regenerer). Deler nøkkel med
   Innstillinger → Tenking (localStorage bedrock_effort). */
#effortQuickWrap { display: inline-flex; align-items: center; gap: 4px; }
#effortQuickWrap > .material-icons { font-size: 18px; color: #64748b; }
#effortQuickSelect { font-size: 12.5px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #1e293b; cursor: pointer; }
html[data-theme="dark"] #effortQuickWrap > .material-icons { color: #9fb0c8; }
html[data-theme="dark"] #effortQuickSelect { background: #16233b; border-color: #2b3d5f; color: #dbe4f0; }

/* ===== Tenke-indikator (notat-live.js) =====================================
   Vises over notatfeltet fra generering starter til første tekst-delta.
   Frostet glass + pulserende aura i primærfargen + shimrende nivåtekst. */
.tenke-overlay {
  position: absolute;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
  backdrop-filter: blur(4px) saturate(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tenke-overlay.er-synlig { opacity: 1; }

.tenke-kort {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 42px 22px;
  border-radius: 18px;
  background: var(--bg-white, #ffffff);
  border: 1px solid rgba(25, 118, 210, 0.14);
  box-shadow: 0 14px 44px -14px rgba(13, 71, 161, 0.28), 0 2px 8px rgba(13, 71, 161, 0.06);
  transform: translateY(8px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.18, 0.9, 0.32, 1.15);
}
.tenke-overlay.er-synlig .tenke-kort { transform: translateY(0) scale(1); }

/* Aura: tre ringer som pulserer utover rundt en pustende kjerne */
.tenke-aura { position: relative; width: 64px; height: 64px; }
.tenke-aura > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--primary, #1976d2);
  opacity: 0;
  animation: tenke-puls 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.tenke-aura > span:nth-child(2) { animation-delay: 0.8s; }
.tenke-aura > span:nth-child(3) { animation-delay: 1.6s; }
@keyframes tenke-puls {
  0%   { transform: scale(0.35); opacity: 0; }
  25%  { opacity: 0.45; }
  100% { transform: scale(1.12); opacity: 0; }
}
.tenke-kjerne {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #64b5f6, var(--primary, #1976d2) 62%, var(--primary-dark, #0d47a1));
  animation: tenke-pust 2.4s ease-in-out infinite;
}
@keyframes tenke-pust {
  0%, 100% { transform: scale(0.9);  box-shadow: 0 0 12px rgba(25, 118, 210, 0.35); }
  50%      { transform: scale(1.08); box-shadow: 0 0 24px rgba(25, 118, 210, 0.6); }
}

/* Nivåtekst med rolig lys-skimmer, prikker i takt ved siden av */
.tenke-tekst { display: flex; align-items: baseline; gap: 2px; font-size: 17px; font-weight: 700; letter-spacing: 0.2px; }
.tenke-ord {
  background: linear-gradient(90deg,
    var(--primary-dark, #0d47a1), var(--primary, #1976d2) 35%,
    #64b5f6 50%, var(--primary, #1976d2) 65%, var(--primary-dark, #0d47a1));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tenke-skimmer 2.8s linear infinite;
}
@keyframes tenke-skimmer { from { background-position: 0% 0; } to { background-position: -220% 0; } }
.tenke-dots { color: var(--primary, #1976d2); }
.tenke-dots span { animation: tenke-blink 1.4s infinite both; }
.tenke-dots span:nth-child(2) { animation-delay: 0.2s; }
.tenke-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tenke-blink { 0%, 80%, 100% { opacity: 0.15; } 30%, 55% { opacity: 1; } }

.tenke-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
  max-width: 330px;
  text-align: center;
}
.tenke-tid {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--primary-dark, #0d47a1);
  background: var(--primary-light, #e3f2fd);
  border-radius: 999px;
  padding: 3px 12px;
  min-width: 44px;
  text-align: center;
}

html[data-theme="dark"] .tenke-overlay { background: rgba(13, 17, 23, 0.66); }
html[data-theme="dark"] .tenke-kort {
  background: var(--bg-light, #16233b);
  border-color: rgba(100, 181, 246, 0.22);
  box-shadow: 0 14px 44px -14px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .tenke-sub { color: var(--text-secondary, #9fb0c8); }
html[data-theme="dark"] .tenke-tid { color: #bbdefb; background: rgba(25, 118, 210, 0.28); }
@media (prefers-reduced-motion: reduce) {
  .tenke-aura > span, .tenke-kjerne, .tenke-ord, .tenke-dots span { animation: none; }
  .tenke-aura > span { opacity: 0.3; transform: scale(0.8); }
  .tenke-kort { transition: none; }
}

/* ==========================================================================
   LEGEMIDDELPANEL I NOTATET (lmp-)
   Knapp øverst til høyre i notatfeltet som åpner preparatene notatet
   inneholder. Pilla arver formspråket til .ms-corner-btn bevisst — det er
   samme slags hjørneknapp i samme felt, og de skal se like ut.
   Ingen knapp når notatet ikke inneholder legemidler.
   ========================================================================== */

/* ============================================================================
   Legemidler i notatet (legemiddel-panel.js), 03.10.2026.
   Tre deler: (1) markeringslaget bak notatfeltet som understreker navnene
   nøyaktig der de står, (2) knappen i raden under notatet som bare finnes når
   noe trenger legen, (3) kortet som folder seg ut over raden. Rolig uttrykk,
   samme ramme og radius som notatet; fargene betyr noe: rødt må avgjøres,
   rav er feilhørt, gult er «ikke funnet i samtalen», grått er ukjent, grønt
   er rettet. Ingen inline-stiler (CSP); laget får posisjon via JS-egenskaper
   på elementet, resten står her.
   ============================================================================ */
:root {
    --lmp-rod: #dc2626;      --lmp-rod-bg: rgba(220, 38, 38, .13);
    --lmp-rav: #d97706;      --lmp-rav-bg: rgba(245, 158, 11, .20);
    --lmp-gul: #ca8a04;      --lmp-gul-bg: rgba(250, 204, 21, .22);
    --lmp-graa: #64748b;     --lmp-graa-bg: rgba(100, 116, 139, .14);
    --lmp-gronn: #16a34a;    --lmp-gronn-bg: rgba(22, 163, 74, .14);
    --lmp-blaa: #1976d2;     --lmp-blaa-bg: #e3f2fd;
    --lmp-glass: rgba(255, 255, 255, .92);
    --lmp-kant: rgba(255, 255, 255, .8);
    --lmp-skygge: 0 18px 48px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
}
html[data-theme="dark"] {
    --lmp-rod-bg: rgba(248, 113, 113, .22);  --lmp-rod: #f87171;
    --lmp-rav-bg: rgba(251, 191, 36, .22);   --lmp-rav: #fbbf24;
    --lmp-gul-bg: rgba(250, 204, 21, .18);   --lmp-gul: #facc15;
    --lmp-graa-bg: rgba(148, 163, 184, .18); --lmp-graa: #94a3b8;
    --lmp-gronn-bg: rgba(74, 222, 128, .18); --lmp-gronn: #4ade80;
    --lmp-blaa: #82b8ff; --lmp-blaa-bg: #1e3a5f;
    --lmp-glass: rgba(28, 33, 40, .92);
    --lmp-kant: rgba(255, 255, 255, .08);
    --lmp-skygge: 0 18px 48px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
}

/* --- (1) markeringslaget ------------------------------------------------- */
.lmp-lag {
    position: absolute;
    z-index: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    color: transparent;
    background: var(--bg-light, #fafafa);
}
#responseBox.lmp-med-lag { position: relative; z-index: 1; background: transparent !important; }
.lmp-mark {
    color: transparent;
    border-radius: 3px;
    background: var(--lmp-rav-bg);
    box-shadow: inset 0 -2px 0 var(--lmp-rav);
    transition: background .18s, box-shadow .18s;
}
.lmp-mark--rod    { background: var(--lmp-rod-bg);   box-shadow: inset 0 -2px 0 var(--lmp-rod); }
.lmp-mark--gul    { background: var(--lmp-gul-bg);   box-shadow: inset 0 -2px 0 var(--lmp-gul); }
.lmp-mark--ukjent { background: var(--lmp-graa-bg);  box-shadow: inset 0 -2px 0 var(--lmp-graa); }
.lmp-mark--auto   { background: var(--lmp-gronn-bg); box-shadow: inset 0 -2px 0 var(--lmp-gronn); }
.lmp-mark--aktiv  { outline: 2px solid currentColor; outline-offset: 1px; }
.lmp-mark--forslag.lmp-mark--aktiv { color: var(--lmp-rav); }
.lmp-mark--rod.lmp-mark--aktiv     { color: var(--lmp-rod); }
.lmp-mark--gul.lmp-mark--aktiv     { color: var(--lmp-gul); }
.lmp-mark--ukjent.lmp-mark--aktiv  { color: var(--lmp-graa); }
.lmp-mark--auto.lmp-mark--aktiv    { color: var(--lmp-gronn); }
/* Speil-div for _yForTegn(): usynlig og ute av flyten. */
.lmp-speil { position: absolute; top: 0; left: -99999px; margin: 0; visibility: hidden; pointer-events: none; z-index: -1;
             white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }

/* --- (2) raden og knappen ------------------------------------------------- */
.lmp-rad-under {
    /* .response-section er en flex-kolonne med min-height:0; uten fast
       flex-basis klemmes raden til null høyde (funnet 02.10.2026). */
    flex: 0 0 auto;
    position: relative;              /* ankeret for kortet */
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.lmp-rad-under > .continue-recording-link { margin-top: 0; }
/* Knappen står rett etter «Fortsett opptak»-lenka, ikke lengst til høyre: der
   ligger support-boblen (fixed, 56 px) og dekket knappen ved 1204 px (målt 03.10.2026). */
.lmp-rad-under > .lmp-knapp { margin-left: 0; }
.lmp-knapp {
    display: none;                   /* ingenting å se på -> ingen knapp */
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 999px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary, #1e293b);
    background: var(--bg-white, #fff);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.lmp-knapp--synlig { display: inline-flex; animation: lmp-puls .9s cubic-bezier(.2, .8, .2, 1) 1; }
@keyframes lmp-puls { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: none; } }
.lmp-knapp:hover { transform: translateY(-1px); }
.lmp-knapp:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.lmp-knapp-ikon { font-size: 15px !important; line-height: 1; }
.lmp-knapp--forslag { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.lmp-knapp--rod     { color: #991b1b; border-color: #fca5a5; background: #fef2f2; }
.lmp-knapp--gul     { color: #854d0e; border-color: #fde68a; background: #fefce8; }
.lmp-knapp--ukjent  { color: #334155; border-color: #cbd5e1; background: #f8fafc; }
.lmp-knapp--auto    { color: #166534; border-color: #86efac; background: #f0fdf4; }
.lmp-knapp--paa, .lmp-knapp--paa:hover { color: #1565c0; background: #e3f2fd; border-color: #bbdefb; }
html[data-theme="dark"] .lmp-knapp--forslag { color: #fde68a; border-color: #78350f; background: #2a1f0a; }
html[data-theme="dark"] .lmp-knapp--rod     { color: #fecaca; border-color: #7f1d1d; background: #2a0f0f; }
html[data-theme="dark"] .lmp-knapp--gul     { color: #fef08a; border-color: #713f12; background: #262008; }
html[data-theme="dark"] .lmp-knapp--ukjent  { color: #cbd5e1; border-color: #475569; background: #1e293b; }
html[data-theme="dark"] .lmp-knapp--auto    { color: #bbf7d0; border-color: #14532d; background: #0b2514; }
html[data-theme="dark"] .lmp-knapp--paa, html[data-theme="dark"] .lmp-knapp--paa:hover { color: #82b8ff; background: #1e3a5f; border-color: #2d4a6f; }

/* --- (3) kortet ----------------------------------------------------------- */
.lmp-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    width: min(460px, 100%);
    display: flex;
    flex-direction: column;
    z-index: 1000;                   /* under popover/modaler, over vanlig innhold */
    border: 1px solid var(--lmp-kant);
    border-radius: 16px;
    background: var(--lmp-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: var(--lmp-skygge), inset 0 1px 0 rgba(255, 255, 255, .6);
    transform-origin: bottom left;
}
/* Flyttes til høyre når ordet raden gjelder ellers ligger bak kortet (plasserKort). */
.lmp-panel.lmp-panel--hoyre {
    left: auto;
    right: 0;
    transform-origin: bottom right;
    animation: lmp-inn .18s cubic-bezier(.2, .8, .2, 1);
    outline: none;
    color: var(--text-primary, #1e293b);
}
.lmp-panel[hidden] { display: none; }
@keyframes lmp-inn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@supports not (backdrop-filter: blur(1px)) { .lmp-panel { background: var(--bg-white, #fff); } }
@media (prefers-reduced-motion: reduce) { .lmp-panel, .lmp-knapp--synlig { animation: none; } .lmp-mark, .lmp-knapp { transition: none; } }

.lmp-topp { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 14px; }
.lmp-topp .lmp-ikon { font-size: 18px !important; color: var(--lmp-blaa); }
.lmp-tittel { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.lmp-merke { margin-left: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.lmp-merke--grå { color: var(--text-muted, #64748b); background: var(--lmp-graa-bg); }
.lmp-lukk {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--text-muted, #64748b);
}
.lmp-lukk:hover { background: rgba(15, 23, 42, .06); color: var(--text-primary, #1e293b); }
.lmp-lukk .material-icons { font-size: 18px !important; }
.lmp-lukk:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

.lmp-kropp { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lmp-seksjon { padding: 6px 14px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.lmp-rader { list-style: none; margin: 0; padding: 2px 6px 6px; }
.lmp-rad {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: start;
    padding: 6px 10px 7px 10px;
    border-radius: 10px;
    cursor: default;
}
.lmp-rad + .lmp-rad { margin-top: 1px; }
/* Autorettinger: én linje – strek, pil, nytt navn, Angre til høyre (04.10.2026). */
.lmp-rad--auto { grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; padding: 3px 6px 3px 10px; }
.lmp-rad--auto .lmp-prikk { margin-top: 0; }
.lmp-rad--auto .lmp-grunn { display: none; }
.lmp-seksjon--rad { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 10px; }
.lmp-lenke { border: 0; background: transparent; color: var(--lmp-blaa); font: inherit; font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.lmp-lenke:hover { text-decoration: underline; }
.lmp-lenke:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.lmp-rad[aria-selected="true"], .lmp-rad:hover { background: rgba(15, 23, 42, .05); }
html[data-theme="dark"] .lmp-rad[aria-selected="true"], html[data-theme="dark"] .lmp-rad:hover { background: rgba(255, 255, 255, .06); }
.lmp-prikk { width: 10px; height: 10px; margin-top: 5px; border-radius: 999px; background: var(--lmp-rav); }
.lmp-rad--rod    .lmp-prikk { background: var(--lmp-rod); box-shadow: 0 0 0 3px var(--lmp-rod-bg); }
.lmp-rad--gul    .lmp-prikk { background: var(--lmp-gul); }
.lmp-rad--ukjent .lmp-prikk { background: var(--lmp-graa); }
.lmp-rad--auto   .lmp-prikk { background: var(--lmp-gronn); }
.lmp-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lmp-navn { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lmp-navn s { text-decoration-color: var(--lmp-graa); color: var(--text-muted, #64748b); font-weight: 500; }
.lmp-etikett { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lmp-rav); }
.lmp-rad--rod    .lmp-etikett { color: var(--lmp-rod); }
.lmp-rad--gul    .lmp-etikett { color: var(--lmp-gul); }
.lmp-rad--ukjent .lmp-etikett { color: var(--lmp-graa); }
.lmp-grunn { font-size: 12px; line-height: 1.35; color: var(--text-muted, #64748b); }
.lmp-valg { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.lmp-rad--auto .lmp-valg { grid-column: 3; margin-top: 0; }
.lmp-chip {
    font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
    padding: 5px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-white, #fff);
    color: var(--text-primary, #1e293b);
    transition: background .12s, border-color .12s, transform .12s;
}
.lmp-chip:hover { border-color: #bfdbfe; background: #eff6ff; }
.lmp-chip:active { transform: scale(.97); }
.lmp-chip:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.lmp-chip--pri { background: var(--lmp-blaa); border-color: var(--lmp-blaa); color: #fff; }
.lmp-chip--pri:hover { background: #1565c0; border-color: #1565c0; }
.lmp-chip--sek { background: transparent; color: var(--text-muted, #64748b); }
.lmp-chip--sek:hover { color: var(--text-primary, #1e293b); }
.lmp-rad--rod .lmp-chip:not(.lmp-chip--sek) { border-color: #fca5a5; background: #fff1f2; color: #991b1b; }
.lmp-rad--rod .lmp-chip:not(.lmp-chip--sek):hover { background: #ffe4e6; }
html[data-theme="dark"] .lmp-chip:hover { background: #262c36; border-color: #424a52; }
html[data-theme="dark"] .lmp-rad--rod .lmp-chip:not(.lmp-chip--sek) { border-color: #7f1d1d; background: #2a0f0f; color: #fecaca; }
.lmp-sendt { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--lmp-gronn); }
/* Kvitteringen må vinne over .lmp-fot (som står senere i fila) og være lesbar
   på glasset: grønt bånd nederst, ikke grå småskrift (hjemme-PC-testen 03.10). */
.lmp-panel .lmp-fot--kvittering { display: flex; align-items: center; gap: 7px; padding: 9px 14px 11px; font-size: 12.5px; font-weight: 700; color: var(--lmp-gronn); background: var(--lmp-gronn-bg); border-top: 1px solid var(--lmp-gronn-bg); border-radius: 0 0 15px 15px; animation: lmp-kvittering-inn .28s ease-out; }
.lmp-panel .lmp-fot--kvittering .material-icons { font-size: 16px !important; }
.lmp-panel .lmp-fot--kvittering .lmp-sendt { font-weight: 600; opacity: .9; }
@keyframes lmp-kvittering-inn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lmp-tomt { display: flex; align-items: center; gap: 8px; padding: 10px 16px 16px; font-size: 13.5px; font-weight: 600; color: var(--lmp-gronn); }
.lmp-tomt .material-icons { font-size: 18px !important; }
.lmp-fot { padding: 4px 14px 10px; font-size: 11px; color: var(--text-muted, #64748b); }

/* innskriving med autocomplete */
.lmp-ed { grid-column: 1 / -1; position: relative; min-width: 0; }
.lmp-felt {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px;
    border: 1px solid #93c5fd; border-radius: 10px; background: var(--bg-white, #fff); color: var(--text-primary, #1e293b);
}
.lmp-felt:focus { outline: none; box-shadow: 0 0 0 3px rgba(25, 118, 210, .14); }
.lmp-hint { margin-top: 5px; font-size: 11.5px; color: var(--text-muted, #64748b); }
.lmp-ac {
    position: absolute; left: 0; right: 0; top: calc(100% - 20px); z-index: 2; margin: 0; padding: 4px 0; list-style: none;
    max-height: 220px; overflow-y: auto; border: 1px solid var(--border-light, #e2e8f0); border-radius: 10px;
    background: var(--bg-white, #fff); box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}
.lmp-ac[hidden] { display: none; }
.lmp-ac li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13.5px; cursor: pointer; }
.lmp-ac li[aria-selected="true"], .lmp-ac li:hover { background: var(--lmp-blaa-bg); }
.lmp-ac li mark { background: transparent; color: var(--lmp-blaa); font-weight: 700; }
.lmp-ac-navn { font-weight: 500; }
.lmp-ac-slag { margin-left: auto; flex: none; font-size: 10.5px; color: var(--text-muted, #80868b); }


/* ==========================================================================
   LEGEMIDDELNAVN I HENVISNINGEN (lmp-henv)
   Kvitteringslinje under henvisningsteksten i dialogen: hvilke navn klienten
   rettet (cherry prokt -> Scheriproct), med Angre per navn. Ingen kort her.
   ========================================================================== */

.lmp-henv {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 8px 0 2px;
    padding: 8px 12px;
    border: 1px solid #c7e3d4;
    border-radius: 10px;
    background: #f3faf6;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-muted, #475569);
}

.lmp-henv-tittel { font-weight: 600; color: #166534; }

.lmp-henv-par {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d1e7db;
}

.lmp-henv-fra { text-decoration: line-through; opacity: 0.7; }
.lmp-henv-pil { opacity: 0.6; }
.lmp-henv-til { font-weight: 600; color: #0f172a; }

.lmp-henv-angre {
    margin-left: 2px;
    padding: 1px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.lmp-henv-angre:hover { background: #f1f5f9; border-color: #94a3b8; }

/* ==========================================================================
   SEND TIL PRIDOK (pridok-send-)
   Raden under journalnotatet som lar legen lese og rette notatet foer det
   gaar over i journalen. Vises bare naar «Send notat til Pridok automatisk»
   er skrudd av i Innstillinger > Pridok, og bare for den konsultasjonen som
   faktisk har et notat klart.
   I motsetning til .lmp-knapp skal denne SEES — den er et steg legen maa ta,
   ikke en valgfri hjelp. Derfor fylt knapp, ikke dempet pille.
   ========================================================================== */

.pridok-send {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 2px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #f8fbff;
}

.pridok-send--synlig { display: flex; }

.pridok-send-hint {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}

.pridok-send-knapp {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #1d4ed8;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: #2563eb;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.pridok-send-knapp:hover { background: #1d4ed8; border-color: #1e40af; }
.pridok-send-knapp:active { transform: scale(.98); }
.pridok-send-knapp:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.pridok-send-knapp:disabled { opacity: .6; cursor: default; }

.pridok-send-ikon { font-size: 17px; line-height: 1; }
/* 7.4: kvittering fra utvidelsen i raden under notatet */
.pridok-send-knapp--skjult { display: none; }
.pridok-send-hint--venter { color: var(--text-muted, #64748b); font-style: italic; }
.pridok-send-hint--ok { color: #166534; background: #ecfdf3; border: 1px solid #bbf7d0; border-radius: 8px; padding: 6px 10px; font-weight: 500; }
.pridok-send-hint--feil { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 6px 10px; font-weight: 500; }

/* Merknaden nederst i Pridok-fanen i Innstillinger. */
.pridok-fane-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
    .pridok-send-knapp { transition: none; }
}

/* ============================================================================
   legemiddel-panel (4): hover-ruten i notatfeltet, «Merker i notatet» og
   legens egne bytter (04.10.2026). Samme glass, radius og farger som kortet.
   Ruten ligger i body med fast posisjon (feltet er ofte bare 200 px høyt), og
   får plass og pil via JS-egenskaper; resten står her. Ingen inline-stiler.
   ============================================================================ */
#responseBox.lmp-peker { cursor: pointer; }

/* Merkene: ok = tynn nøytral strek (inngangen til ruten), lege = blått. */
.lmp-mark--ok   { background: transparent; box-shadow: inset 0 -1px 0 rgba(100, 116, 139, .35); }
.lmp-mark--lege { background: var(--lmp-blaa-bg); box-shadow: inset 0 -2px 0 var(--lmp-blaa); }
.lmp-mark--lege.lmp-mark--aktiv, .lmp-mark--ok.lmp-mark--aktiv { color: var(--lmp-blaa); }
/* Nivåer: Understrek (standard) tar bort bakgrunnen på de grønne og blå; Av tar alt. */
.lmp-lag[data-nivaa="strek"] .lmp-mark--auto, .lmp-lag[data-nivaa="strek"] .lmp-mark--lege { background: transparent; }
.lmp-lag[data-nivaa="av"] .lmp-mark--auto, .lmp-lag[data-nivaa="av"] .lmp-mark--lege, .lmp-lag[data-nivaa="av"] .lmp-mark--ok { background: transparent; box-shadow: none; }
/* Hover og aktiv: full markering uansett nivå. */
.lmp-lag[data-nivaa] .lmp-mark--auto.lmp-mark--hover, .lmp-lag[data-nivaa] .lmp-mark--auto.lmp-mark--aktiv { background: var(--lmp-gronn-bg); box-shadow: inset 0 -2px 0 var(--lmp-gronn); }
.lmp-lag[data-nivaa] .lmp-mark--lege.lmp-mark--hover, .lmp-lag[data-nivaa] .lmp-mark--lege.lmp-mark--aktiv,
.lmp-lag[data-nivaa] .lmp-mark--ok.lmp-mark--hover,   .lmp-lag[data-nivaa] .lmp-mark--ok.lmp-mark--aktiv { background: var(--lmp-blaa-bg); box-shadow: inset 0 -2px 0 var(--lmp-blaa); }
.lmp-lag[data-nivaa] .lmp-mark--forslag.lmp-mark--hover { background: var(--lmp-rav-bg); box-shadow: inset 0 -2px 0 var(--lmp-rav), 0 0 0 2px var(--lmp-rav-bg); }
.lmp-lag[data-nivaa] .lmp-mark--rod.lmp-mark--hover    { box-shadow: inset 0 -2px 0 var(--lmp-rod), 0 0 0 2px var(--lmp-rod-bg); }
.lmp-lag[data-nivaa] .lmp-mark--gul.lmp-mark--hover    { box-shadow: inset 0 -2px 0 var(--lmp-gul), 0 0 0 2px var(--lmp-gul-bg); }
.lmp-lag[data-nivaa] .lmp-mark--ukjent.lmp-mark--hover { box-shadow: inset 0 -2px 0 var(--lmp-graa), 0 0 0 2px var(--lmp-graa-bg); }

/* Nivåvelgeren ved siden av knappen. */
.lmp-nivaa { display: inline-flex; align-items: center; gap: 8px; margin-left: 2px; }
.lmp-nivaa[hidden] { display: none; }
.lmp-nivaa-etikett { font-size: 11.5px; color: var(--text-muted, #64748b); white-space: nowrap; }
.lmp-nivaa-knapper { display: inline-flex; border: 1px solid var(--border-light, #e2e8f0); border-radius: 999px; overflow: hidden; background: var(--bg-white, #fff); }
.lmp-nivaa-knapper button { font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--text-muted, #64748b); background: none; border: 0; padding: 6px 10px; cursor: pointer; transition: background .15s, color .15s; }
.lmp-nivaa-knapper button + button { border-left: 1px solid var(--border-light, #e2e8f0); }
.lmp-nivaa-knapper button:hover { color: var(--text-primary, #1e293b); }
.lmp-nivaa-knapper button[aria-pressed="true"] { background: var(--lmp-gronn-bg); color: var(--lmp-gronn); }
.lmp-nivaa-knapper button:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; }

/* Lege-rader i kortet: som autorader, blå prikk. */
.lmp-rad--lege { grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; padding: 3px 6px 3px 10px; }
.lmp-rad--lege .lmp-valg { grid-column: 3; margin-top: 0; }
.lmp-rad--lege .lmp-prikk { margin-top: 0; background: var(--lmp-blaa); }
.lmp-rad--lege .lmp-grunn { display: none; }
.lmp-fot kbd, .lmp-pop kbd { font: 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid var(--border-light, #e2e8f0); border-radius: 4px; padding: 0 4px; color: var(--text-primary, #1e293b); background: var(--bg-white, #fff); }

/* Hover-ruten. */
.lmp-pop {
    position: fixed;
    z-index: 1100;                       /* over kortet (1000), under appens modaler */
    width: 320px;
    box-sizing: border-box;
    border: 1px solid var(--lmp-kant);
    border-radius: 12px;
    background: var(--lmp-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: var(--lmp-skygge), inset 0 1px 0 rgba(255, 255, 255, .6);
    color: var(--text-primary, #1e293b);
    font-size: 13.5px;
    line-height: 1.4;
    transform-origin: top left;
    animation: lmp-pop-inn .14s cubic-bezier(.2, .8, .2, 1);
}
.lmp-pop[hidden] { display: none; }
.lmp-pop--over { transform-origin: bottom left; }
.lmp-pop::before {
    content: ''; position: absolute; top: -6px; left: var(--lmp-pil-x, 24px); width: 10px; height: 10px; margin-left: -5px;
    background: var(--lmp-glass); border-left: 1px solid var(--lmp-kant); border-top: 1px solid var(--lmp-kant); transform: rotate(45deg);
}
.lmp-pop--over::before { top: auto; bottom: -6px; border-left: 0; border-top: 0; border-right: 1px solid var(--lmp-kant); border-bottom: 1px solid var(--lmp-kant); }
@keyframes lmp-pop-inn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@supports not (backdrop-filter: blur(1px)) { .lmp-pop, .lmp-pop::before { background: var(--bg-white, #fff); } }
.lmp-pop-topp { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px 7px; }
.lmp-pop-hort { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lmp-pop-etikett { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.lmp-pop-bytte { font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.lmp-pop-bytte s { color: var(--text-muted, #64748b); text-decoration-color: var(--lmp-graa); font-weight: 500; }
.lmp-pop-bytte b { font-weight: 700; }
.lmp-pop-pil { color: var(--text-muted, #64748b); }
.lmp-pop-angre { flex: none; margin: -2px -4px 0 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--lmp-blaa); background: none; border: 0; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.lmp-pop-angre:hover { background: var(--lmp-blaa-bg); }
.lmp-pop-angre:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.lmp-pop-grunn { padding: 0 12px 7px; font-size: 12px; line-height: 1.35; color: var(--text-muted, #64748b); }
.lmp-pop-valg { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 9px; }
.lmp-pop-skriv { position: relative; padding: 0 12px 10px; }
.lmp-pop-felt {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px;
    border: 1px solid var(--border-light, #e2e8f0); border-radius: 8px; background: var(--bg-white, #fff); color: var(--text-primary, #1e293b);
    transition: border-color .15s, box-shadow .15s;
}
.lmp-pop-felt::placeholder { color: var(--text-muted, #94a3b8); }
.lmp-pop-felt:focus { outline: none; border-color: var(--lmp-blaa); box-shadow: 0 0 0 3px rgba(25, 118, 210, .14); }
.lmp-pop-ac { position: static; margin: 6px 0 0; max-height: 176px; box-shadow: none; }
.lmp-pop-fot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--border-light, #e2e8f0); font-size: 11.5px; color: var(--text-muted, #64748b); border-radius: 0 0 12px 12px; }
.lmp-pop-fot > span:first-child { min-width: 0; }
.lmp-pop-taster { white-space: nowrap; flex: none; }
.lmp-pop-fot--kvitt { justify-content: flex-start; background: var(--lmp-gronn-bg); color: var(--lmp-gronn); font-weight: 600; font-size: 12px; }
.lmp-pop-fot--kvitt .material-icons { font-size: 16px !important; }
.lmp-pop-sendt { font-weight: 500; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .lmp-pop { animation: none; } .lmp-nivaa-knapper button, .lmp-pop-felt { transition: none; } }

/* ===== video-vurdering-lukk (05.10.2026) =====
   Lukkeknapp på vurderingskortet etter videosamtale. Vurderingsvinduet dekker
   «Lukk VideoLege» i toppen, så legen hadde ingen synlig vei ut uten stjerner.
   Knappen åpner spørsmålet «Lukke uten vurdering?» (js/video-ui.js). */
.video-rating-card { position: relative; }
.video-rating-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: var(--text-secondary, #64748b);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.video-rating-close-btn:hover { background: #f1f5f9; color: var(--text-primary, #1e293b); }
.video-rating-close-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.video-rating-close-btn .material-icons { font-size: 22px; }

/* ===== svar-live (05.10.2026) =====
   Løpende visning mens svaret strømmer inn i Fritekst og journaloppsummeringen
   (js/svar-live.js, js/fritekst-ki.js, js/journal-summary.js). Rolig tekst,
   ingen verktøylinje og ingen markering før svaret er ferdig. Ingen innebygde stiler. */
.fritekst-modal-container .fritekst-live-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fritekst-live-status,
.journaloppsummering-live-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--primary, #1976d2); }
.fritekst-live-hint,
.journaloppsummering-live-hint { font-weight: 400; color: var(--text-muted, #757575); }
.fritekst-live-prikk,
.journaloppsummering-live-prikk { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: svarLivePuls 1.2s ease-in-out infinite; }
@keyframes svarLivePuls { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.fritekst-modal-container .fritekst-live-tekst { white-space: pre-wrap; opacity: .82; user-select: none; -webkit-user-select: none; cursor: default; }
.journaloppsummering-live-status { padding: 8px 1rem 0; }
.journaloppsummering-results-area.js-live .journaloppsummering-result-textarea { opacity: .82; user-select: none; -webkit-user-select: none; cursor: default; }
.journaloppsummering-results-area.js-live .journaloppsummering-action-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .fritekst-live-prikk, .journaloppsummering-live-prikk { animation: none; opacity: 1; }
}

/* ===== provesvar-velger (06.10.2026) =====
   Prøvesvaret som klikkbar liste i Fritekst (js/provesvar-velger.js) og vinduet med valg som
   åpner seg mot venstre. Bare klasser; posisjonen til vinduet settes som CSS-variabler. */
.fritekst-chat-area-wrapper.psv-paa .fritekst-chat-output-area { min-height: 72px; }
/* Tom chat (bare «Lim inn bakgrunnsinformasjon …»): listen får plassen. */
.fritekst-chat-area-wrapper.psv-paa .fritekst-chat-output-area:has(> .fritekst-system-info:only-child) { display: none; }
@media (max-height: 760px) { .psv-hint { display: none; } }
/* Panelet krymper (listen ruller) før chatfeltet skyves ut av synet på lave skjermer. */
.psv-panel { flex: 0 1 auto; min-height: 150px; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; max-height: 46vh; outline: none; font-family: Roboto, 'Helvetica Neue', sans-serif; color: #1f2933; }
.psv-panel.is-hidden { display: none; }
.psv-panel.psv-sammen { min-height: 0; flex: none; }
.psv-sammen .psv-tabell, .psv-sammen .psv-kontroll, .psv-sammen .psv-hint { display: none; }
.psv-fold { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 2px; border: none; border-radius: 8px; background: transparent; color: #1f2933; cursor: pointer; font-family: inherit; }
.psv-fold:hover { background: #f5f9fe; }
.psv-fold > .psv-ikon:first-child { color: #1976d2; }
.psv-fold-ikon { color: #7b8794; }
.psv-panel:focus-visible .psv-tabell { box-shadow: 0 0 0 2px #90caf9; }
.psv-ikon { font-size: 18px; line-height: 1; vertical-align: middle; }
.psv-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.psv-topp > .psv-ikon { color: #1976d2; }
.psv-tittel { font-size: 13px; font-weight: 700; }
.psv-fremdrift { font-size: 12px; color: #607080; }
.psv-fyll { flex: 1 1 0; }
.psv-kbd { min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 5px; border: 1px solid #cfd8dc; border-bottom-width: 2px; background: #f5f7f9; color: #37474f; font: 600 11px 'Roboto Mono', monospace; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.psv-kbd-paa { border-color: #1565c0; background: #1976d2; color: #ffffff; }
.psv-knapp { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 6px; border-radius: 8px; border: 1px solid #c9d6e2; background: #ffffff; color: #1f2933; font: 500 12.5px Roboto, sans-serif; cursor: pointer; transition: background .12s, border-color .12s; }
.psv-knapp:hover { background: #f5f9fe; }
.psv-knapp:disabled { opacity: .5; cursor: not-allowed; }
.psv-knapp-paa { border-color: #1976d2; background: #e3f2fd; color: #0d47a1; }
.psv-knapp-primar { border: none; background: #1976d2; color: #ffffff; font-weight: 600; padding: 0 12px 0 6px; }
.psv-knapp-primar:hover { background: #1565c0; }
.psv-knapp-primar .psv-kbd { background: rgba(255,255,255,.22); border-color: transparent; color: #ffffff; }
.psv-tabell { min-height: 0; overflow: auto; border: 1px solid #e3e8ee; border-radius: 12px; background: #ffffff; }
.psv-rad { display: grid; grid-template-columns: 24px minmax(0, 1.8fr) minmax(0, .55fr) 30px minmax(0, .8fr) minmax(0, .85fr) minmax(0, 2fr); column-gap: 8px; align-items: center; padding: 0 12px; }
.psv-hode { position: sticky; top: 0; z-index: 1; background: #f7f9fb; padding-top: 6px; padding-bottom: 6px; font-size: 11px; font-weight: 700; color: #7b8794; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid #edf0f3; }
.psv-linje { width: 100%; min-height: 34px; border: none; border-top: 1px solid #f1f3f5; background: #ffffff; text-align: left; font-family: inherit; color: inherit; cursor: pointer; transition: background .12s; }
.psv-linje:hover { background: #f5f9fe; }
.psv-linje.psv-fokus { box-shadow: inset 3px 0 0 #1976d2; }
.psv-linje.psv-aktiv { background: #e3f2fd; }
.psv-linje.psv-ferdig { background: #fbfdfb; }
.psv-linje.psv-uten { cursor: default; color: #52606d; }
.psv-status { color: #b0bac5; }
.psv-ferdig .psv-status { color: #2e7d32; }
.psv-aktiv .psv-status { color: #1976d2; }
.psv-navn { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psv-verdi { font: 600 13px 'Roboto Mono', monospace; }
.psv-merke { justify-self: start; min-width: 22px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 5px; background: #eef2f6; color: #263238; font: 700 11.5px Roboto, sans-serif; display: inline-flex; align-items: center; justify-content: center; }
.psv-enhet, .psv-ref { font-size: 12px; color: #607080; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psv-vurd { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: #b0bac5; }
.psv-ferdig .psv-vurd { color: #1b5e20; font-weight: 500; }
.psv-uten .psv-vurd { font-size: 11.5px; }
.psv-kontroll { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #e3e8ee; border-radius: 12px; background: #ffffff; transition: border-color .12s, background .12s; }
.psv-kontroll-aktiv { border-color: #90caf9; background: #f3f8fe; }
.psv-kontroll-tittel { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 2px; border: none; background: transparent; cursor: pointer; font: 700 12.5px Roboto, sans-serif; color: #1f2933; }
.psv-kontroll-tittel .psv-ikon { color: #52606d; }
.psv-gruppe { display: inline-flex; gap: 4px; }
.psv-tall { display: inline-flex; align-items: center; gap: 6px; min-width: 38px; height: 30px; padding: 0 10px; justify-content: center; border-radius: 8px; border: 1px solid #d6e2ee; background: #ffffff; color: #1f2933; font: 600 13px Roboto, sans-serif; cursor: pointer; }
.psv-tall.psv-valgt { background: #1976d2; border-color: #1976d2; color: #ffffff; }
.psv-segment { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: #eef2f6; }
.psv-seg { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: none; border-radius: 7px; background: transparent; color: #52606d; font: 600 12.5px Roboto, sans-serif; cursor: pointer; }
.psv-seg.psv-valgt { background: #ffffff; color: #0d47a1; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.psv-hint { font-size: 11.5px; color: #7b8794; }
/* vinduet */
.psv-pop { position: fixed; top: var(--psv-top, 80px); right: var(--psv-right, 24px); z-index: 1100; display: flex; flex-direction: column; max-height: calc(100vh - 24px); background: #ffffff; border: 1px solid #dbe3ea; border-radius: 16px; box-shadow: 0 2px 4px rgba(16,24,40,.08), 0 22px 48px rgba(16,24,40,.22); overflow: hidden; outline: none; font-family: Roboto, 'Helvetica Neue', sans-serif; color: #1f2933; animation: psvPopInn .16s ease-out; }
@keyframes psvPopInn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes psvKolInn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.psv-kolonner { display: flex; flex-direction: row-reverse; align-items: stretch; min-height: 0; overflow: auto; }
.psv-kol { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.psv-kol-a { width: 282px; border-left: 1px solid #edf0f3; }
.psv-kol-ny { width: 250px; background: #fbfcfd; border-left: 1px solid #edf0f3; animation: psvKolInn .16s ease-out; }
.psv-kol-dose { width: 190px; background: #f7fafd; }
.psv-pop-hode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 2px 4px; }
.psv-pop-tittel { font-size: 14px; font-weight: 700; }
.psv-koe { height: 20px; padding: 0 8px; border-radius: 999px; background: #1976d2; color: #ffffff; font: 700 11px Roboto, sans-serif; display: inline-flex; align-items: center; }
.psv-pop-verdier { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0 4px 6px; font: 500 12px 'Roboto Mono', monospace; color: #52606d; }
.psv-skille { height: 1px; background: #edf0f3; margin: 3px 4px; }
.psv-valg { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 8px; box-sizing: border-box; border-radius: 9px; border: 1px solid #d6e2ee; background: #ffffff; color: #1f2933; font: 500 13px Roboto, sans-serif; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.psv-valg:hover { background: #f5f9fe; }
.psv-valg.psv-valgt { background: #e3f2fd; border-color: #1976d2; color: #0d47a1; }
.psv-valg.psv-dempet { border-color: #e6ebf0; color: #52606d; }
.psv-valg.psv-markert { box-shadow: inset 0 0 0 1px #90caf9; }
.psv-valg-tekst { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psv-valg-ikon { font-size: 17px; color: #9aa5b1; }
.psv-valgt .psv-valg-ikon { color: #1976d2; }
.psv-alias { font-size: 11.5px; color: #7b8794; white-space: nowrap; }
.psv-sub { font-size: 11.5px; line-height: 1.4; color: #7b8794; padding: 0 6px 4px 34px; }
.psv-kol-tittel { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 11.5px; font-weight: 700; color: #7b8794; text-transform: uppercase; letter-spacing: .4px; }
.psv-kol-hint { margin-left: auto; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.psv-sok { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid #90caf9; background: #ffffff; }
.psv-sok .psv-ikon { color: #1976d2; }
.psv-sok input { flex: 1 1 0; min-width: 0; border: none; outline: none; background: transparent; font: 500 13.5px Roboto, sans-serif; color: #1f2933; }
.psv-treff { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.psv-chip { display: flex; align-items: center; gap: 6px; margin: -2px 0 2px 30px; padding: 3px 4px 3px 10px; border-radius: 8px; background: #e3f2fd; color: #0d47a1; font-size: 12.5px; font-weight: 500; }
.psv-chip-tekst { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psv-chip-fjern { width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: transparent; color: #0d47a1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.psv-bunn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 0; min-width: 100%; box-sizing: border-box; padding: 10px 12px; border-top: 1px solid #edf0f3; background: #fafbfc; }
.psv-bunn > .psv-ikon { color: #90a4ae; }
.psv-forhand { flex: 1 1 200px; min-width: 0; max-height: 132px; overflow: auto; font-size: 13px; line-height: 1.45; white-space: pre-line; color: #1f2933; }
.psv-forhand.psv-tom { color: #7b8794; }
.psv-bunn-knapper { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .psv-pop, .psv-kol-ny { animation: none; } }

/* ==========================================================================
   VEKSTKURVER (vekst-graf.js / vekst-panel.js)
   Limes inn i bundle.css ved bygg (bundle.css redigeres for hånd).
   ========================================================================== */
.vk-graf { position: relative; width: 100%; user-select: none; }
.vk-graf svg.vk-svg { display: block; width: 100%; height: auto; }
.vk-graf .vk-pkt { cursor: pointer; transition: r 120ms ease; }
.vk-graf .vk-pkt.vk-pkt--aktiv { r: 7.5px; stroke-width: 2.5px; }
.vk-graf .vk-pkt.vk-pkt--par { r: 6.5px; stroke-width: 2.5px; }
.vk-tips {
  position: absolute; z-index: 5; pointer-events: none; min-width: 190px; max-width: 300px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.94); color: #1f2933;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .vk-tips { background: rgba(28, 33, 40, 0.95); color: #e6e9ed; border-color: rgba(255,255,255,0.10); box-shadow: 0 10px 28px rgba(0,0,0,0.5); }
.vk-tips-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.vk-tips-verdi { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.vk-tips-enhet { font-size: 12px; font-weight: 500; opacity: 0.7; margin-left: 2px; }
.vk-tips-dato { font-size: 11.5px; opacity: 0.7; white-space: nowrap; }
.vk-tips-alder { font-weight: 600; margin-bottom: 6px; }
.vk-tips-plass { display: inline-block; margin: 2px 0 6px; padding: 2px 8px; border-radius: 999px; background: rgba(31, 111, 235, 0.10); color: #1557c0; font-weight: 600; font-size: 11.5px; }
html[data-theme="dark"] .vk-tips-plass { background: rgba(88, 166, 255, 0.16); color: #8cc0ff; }
.vk-tips-rad { display: flex; justify-content: space-between; gap: 14px; }
.vk-tips-rad span:first-child { opacity: 0.72; }
.vk-tips-sitat { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(127,127,127,0.18); font-size: 11.5px; opacity: 0.85; font-style: italic; }
.vk-tips-kilde { font-size: 10.5px; opacity: 0.6; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 1px; }
.vk-tips-merk { margin-top: 4px; font-size: 11px; color: #b45309; }
html[data-theme="dark"] .vk-tips-merk { color: #fbbf24; }
.vk-tips-linjer { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 1px; margin-top: 4px; }
.vk-tips-linjer .vk-l-navn { opacity: 0.7; }
.vk-tips-linjer .vk-l-navn--median, .vk-tips-linjer .vk-l-verdi--median { font-weight: 700; opacity: 1; }
.vk-tips-linjer .vk-l-verdi { text-align: right; }

/* ---------- Vekstkurve-panelet (vekst-panel.js) ---------- */
.vkp-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 10040;
  display: flex; align-items: center; justify-content: center; }
.vkp-kort { background: var(--bg-white, #fff); color: var(--text-primary, #1f2933); border-radius: 16px;
  width: 96vw; max-width: 1560px; height: 96vh; max-height: 96vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(15,23,42,.32); overflow: hidden; }
.vkp-hode { display: flex; align-items: center; gap: 10px; padding: 14px 20px 8px; }
.vkp-tittel { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.12rem; font-weight: 700; }
.vkp-tittel .material-icons { color: var(--primary, #1976d2); font-size: 22px; }
.vkp-mellom { flex: 1; }
.vkp-x { border: 0; background: none; cursor: pointer; color: var(--text-muted, #64748b); border-radius: 8px; padding: 4px; display: flex; }
.vkp-x:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #0f172a); }
.vkp-kropp { padding: 4px 20px 12px; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.vkp-kropp > * { flex: none; }

.vkp-felter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 6px 0 10px; border-bottom: 1px solid var(--border-light, #eef1f5); }
.vkp-felt { display: flex; align-items: center; gap: 8px; }
.vkp-felt--lite { flex-direction: column; align-items: flex-start; gap: 3px; }
.vkp-etikett { font-size: .78rem; font-weight: 600; color: var(--text-muted, #64748b); letter-spacing: .02em; }
.vkp-seg { display: inline-flex; border: 1px solid var(--border-medium, #cbd5e1); border-radius: 9px; overflow: hidden; }
.vkp-seg-valg { border: 0; background: transparent; color: var(--text-secondary, #334155); padding: 6px 13px; font-weight: 600; font-size: .86rem; cursor: pointer; }
.vkp-seg-valg + .vkp-seg-valg { border-left: 1px solid var(--border-medium, #cbd5e1); }
.vkp-seg-valg:hover { background: var(--bg-hover, #f1f5f9); }
.vkp-seg-valg.is-on { background: var(--primary, #1976d2); color: #fff; }
.vkp-seg--kjonn .vkp-seg-valg.is-on:first-child { background: #c2185b; }
.vkp-seg--kjonn .vkp-seg-valg.is-on:last-child { background: #1565c0; }
.vkp-inp { border: 1px solid var(--border-medium, #cbd5e1); border-radius: 8px; padding: 6px 9px; font-size: .9rem;
  background: var(--bg-white, #fff); color: var(--text-primary, #1f2933); font-variant-numeric: tabular-nums; }
.vkp-inp--dato { width: 112px; }
.vkp-inp--tall { width: 92px; }
.vkp-inp:focus, .vkp-celle-inp:focus { outline: 2px solid rgba(25,118,210,.35); outline-offset: 0; border-color: var(--primary, #1976d2); }
.vkp-inp.is-feil, .vkp-celle-inp.is-feil { border-color: var(--accent-error, #d32f2f); background: rgba(211,47,47,.06); }
.vkp-hint { font-size: .75rem; color: var(--text-muted, #64748b); font-style: italic; cursor: default; }
.vkp-hint--varsel { color: #b45309; font-style: normal; }
.vkp-alder { font-size: .82rem; color: var(--text-secondary, #334155); font-weight: 500; }
.vkp-mer { font-size: .84rem; }
.vkp-mer summary { cursor: pointer; color: var(--primary, #1976d2); font-weight: 500; }
.vkp-mer-rad { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; padding: 8px 0 2px; }

.vkp-merknader:empty { display: none; }
.vkp-merknad { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 11px; border-radius: 9px;
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-size: .84rem; }
.vkp-merknad .material-icons { font-size: 18px; }

.vkp-faner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 2px; }
.vkp-fanerad { display: flex; gap: 2px; background: var(--bg-light, #f4f6f8); padding: 3px; border-radius: 10px; }
.vkp-fane { border: 0; background: transparent; color: var(--text-secondary, #475569); padding: 7px 14px; border-radius: 8px;
  font-weight: 600; font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vkp-fane:hover { color: var(--text-primary, #0f172a); }
.vkp-fane.is-on { background: var(--bg-white, #fff); color: var(--text-primary, #0f172a); box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.vkp-fane-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(31,111,235,.12); color: #1557c0;
  font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.vkp-vinduer { display: flex; gap: 6px; }
.vkp-vindu { border: 1px solid var(--border-medium, #cbd5e1); background: var(--bg-white, #fff); color: var(--text-secondary, #334155);
  border-radius: 999px; padding: 4px 11px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.vkp-vindu.is-on { border-color: var(--primary, #1976d2); background: rgba(25,118,210,.10); color: var(--primary-dark, #0d47a1); }

/* Kurvene til venstre, kolonnen (innliming + målinger) til høyre; bare kolonnen ruller */
.vkp-kropp > .vkp-hoved { display: grid; grid-template-columns: minmax(0, 1fr) 372px; grid-template-rows: minmax(0, 1fr); gap: 18px;
  flex: 1 1 auto; min-height: 0; margin-top: 6px; }
.vkp-graf { min-height: 0; }
.vkp-kolonne { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; border-left: 1px solid var(--border-light, #e5e7eb);
  padding: 2px 4px 8px 16px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1099px) {
  .vkp-kropp > .vkp-hoved { display: block; flex: none; }
  .vkp-graf { min-height: 380px; }
  .vkp-kolonne { overflow: visible; border-left: 0; padding: 0; margin-top: 14px; }
}
.vkp-innlim { display: flex; flex-direction: column; gap: 6px; }
.vkp-innlim-tekst { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: .84rem; background: var(--bg-white, #fff); color: var(--text-primary, #1f2933); }
.vkp-innlim-tekst:focus { outline: 2px solid rgba(25,118,210,.35); border-color: var(--primary, #1976d2); }
.vkp-innlim-rad { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vkp-tom { display: flex; align-items: center; justify-content: center; min-height: 380px; color: var(--text-muted, #64748b);
  font-size: .95rem; border: 1px dashed var(--border-medium, #cbd5e1); border-radius: 12px; }
.vkp-tom--feil { color: var(--accent-error, #d32f2f); border-color: var(--accent-error, #d32f2f); }

.vkp-tabell-holder { display: flex; flex-direction: column; gap: 6px; }
.vkp-tabell-topp { display: flex; align-items: center; justify-content: space-between; }
.vkp-tabell-antall:not(:empty) { font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: rgba(31,111,235,.12); color: #1557c0; }
.vkp-tabell-tittel { margin: 0; font-size: .95rem; font-weight: 700; }
.vkp-tabell-tom { color: var(--text-muted, #64748b); font-size: .88rem; padding: 10px 0; }
.vkp-tabell-rull { overflow-x: auto; border: 1px solid var(--border-light, #e5e7eb); border-radius: 10px; }
/* Kompakt målingsliste: én rad per dato, tre mål ved siden av hverandre, persentil under */
.vkp-tabell { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.vkp-kolhode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 9px; font-size: .7rem; font-weight: 600; color: var(--text-muted, #64748b); }
.vkp-rad { border: 1px solid var(--border-light, #e5e7eb); border-radius: 10px; padding: 6px 8px 4px; background: var(--bg-white, #fff); }
.vkp-rad:hover { border-color: var(--border-medium, #cbd5e1); }
.vkp-rad-topp { display: flex; align-items: center; gap: 8px; }
.vkp-rad-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; font-size: .76rem; color: var(--text-muted, #64748b); }
.vkp-alder-kort { color: var(--text-secondary, #334155); font-weight: 500; white-space: nowrap; }
.vkp-kmi-kort { white-space: nowrap; }
.vkp-kilde-kort { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.vkp-rad-maal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 5px; }
.vkp-c .vkp-celle { gap: 3px; }
.vkp-c .vkp-celle-inp { width: 100%; min-width: 0; flex: 1 1 auto; padding: 4px 6px; }
.vkp-pz-kort { min-height: 1.2em; padding: 1px 2px 0; font-size: .68rem; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkp-tabell th { text-align: left; font-weight: 600; font-size: .76rem; color: var(--text-muted, #64748b); padding: 7px 8px;
  background: var(--bg-light, #f8fafc); border-bottom: 1px solid var(--border-light, #e5e7eb); white-space: nowrap; }
.vkp-tabell td { padding: 4px 8px; border-bottom: 1px solid var(--border-light, #f1f5f9); vertical-align: middle; }
.vkp-tabell tr:last-child td { border-bottom: 0; }
.vkp-rad:hover td { background: var(--bg-hover, #f8fafc); }
.vkp-k-alder, .vkp-k-kmi, .vkp-k-pz { white-space: nowrap; color: var(--text-secondary, #334155); }
.vkp-k-kilde { font-size: .78rem; color: var(--text-muted, #64748b); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vkp-celle { display: flex; align-items: center; gap: 4px; }
.vkp-celle-inp { width: 78px; border: 1px solid var(--border-medium, #cbd5e1); border-radius: 7px; padding: 5px 8px; font-size: .88rem;
  background: var(--bg-white, #fff); color: var(--text-primary, #1f2933); font-variant-numeric: tabular-nums; text-align: right;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.06); cursor: text; }
.vkp-celle-inp::placeholder { color: var(--text-muted, #94a3b8); opacity: .7; }
.vkp-celle-inp:hover { border-color: var(--text-muted, #94a3b8); }
.vkp-celle-inp--dato { width: 108px; text-align: left; }
.vkp-rad.vkp-rad--ny { background: rgba(25,118,210,.07); border-color: var(--primary, #1976d2); }
.vkp-tabell-tittelv { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vkp-tabell-hjelp { font-size: .74rem; color: var(--text-muted, #64748b); }
.vkp-pz-linje { display: flex; align-items: baseline; gap: 5px; line-height: 1.35; }
.vkp-pz-bokstav { font-size: .7rem; font-weight: 700; color: var(--text-muted, #64748b); width: 10px; }
.vkp-celle-inp.is-mangler { border-color: #f59e0b; background: rgba(245,158,11,.08); }
.vkp-celle.is-av .vkp-celle-inp { color: var(--text-muted, #94a3b8); text-decoration: line-through; }
.vkp-celle.is-ubekreftet .vkp-celle-inp { background: rgba(245,158,11,.10); }
.vkp-ls { border: 1px solid var(--border-medium, #cbd5e1); background: transparent; color: var(--text-secondary, #475569);
  border-radius: 5px; width: 22px; height: 22px; font-size: .72rem; font-weight: 700; cursor: pointer; padding: 0; }
.vkp-status { border: 0; background: none; padding: 0; cursor: pointer; display: flex; color: #16a34a; }
.vkp-status .material-icons { font-size: 17px; }
.vkp-celle.is-av .vkp-status { color: var(--text-muted, #94a3b8); }
.vkp-celle.is-ubekreftet .vkp-status { color: #d97706; }
.vkp-ikonknapp { border: 0; background: none; color: var(--text-muted, #94a3b8); cursor: pointer; padding: 3px; border-radius: 6px; display: flex; }
.vkp-ikonknapp:hover { color: var(--accent-error, #d32f2f); background: rgba(211,47,47,.08); }

.vkp-fot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 20px;
  border-top: 1px solid var(--border-light, #eef1f5); flex-wrap: wrap; }
.vkp-fot-venstre, .vkp-fot-hoyre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vkp-status-tekst { font-size: .82rem; color: var(--text-muted, #64748b); }
.vkp-knapp { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-medium, #cbd5e1); background: var(--bg-white, #fff);
  color: var(--text-secondary, #334155); border-radius: 9px; padding: 8px 14px; font-weight: 600; font-size: .86rem; cursor: pointer; }
.vkp-knapp .material-icons { font-size: 18px; }
.vkp-knapp:hover:not(:disabled) { background: var(--bg-hover, #f1f5f9); }
.vkp-knapp:disabled { opacity: .5; cursor: default; }
.vkp-knapp--lite { padding: 5px 10px; font-size: .8rem; }
.vkp-knapp.is-laster .material-icons { animation: vkp-snurr 1s linear infinite; }
@keyframes vkp-snurr { to { transform: rotate(360deg); } }

html[data-theme="dark"] .vkp-merknad { background: rgba(251,146,60,.12); color: #fdba74; border-color: rgba(251,146,60,.35); }
html[data-theme="dark"] .vkp-fane-n { background: rgba(88,166,255,.18); color: #8cc0ff; }
html[data-theme="dark"] .vkp-fane.is-on { background: var(--bg-hover, #262c36); }
html[data-theme="dark"] .vkp-vindu.is-on { color: #8cc0ff; }
@media (max-width: 760px) {
  .vkp-kort { width: 100vw; max-width: none; height: 100vh; max-height: 100vh; border-radius: 0; }
  .vkp-graf, .vkp-tom { min-height: 300px; }
}
.vkp-status-tekst.is-laster::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary, #1976d2); margin-right: 6px; animation: sym-puls 1s ease-in-out infinite; }

/* ==========================================================================
   «+ FUNN» I JOURNALNOTATET (fn-) — funn-notat.js, 07.10.2026
   Bruker appens tokener, så lyst og mørkt tema følger med.
   ========================================================================== */
.fn-wrap { position: relative; }
.fn-speil { position: absolute; left: -10000px; top: 0; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; box-sizing: border-box; }
.fn-lag { position: absolute; pointer-events: none; overflow: hidden; z-index: 3; }
.fn-lag.fn-skjult { display: none; }
.fn-lag-innhold { position: absolute; inset: 0 auto auto 0; width: 100%; }
.fn-pluss { position: absolute; pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 6px;
  border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--primary, #1976d2) 45%, transparent); background: var(--bg-white, #fff);
  color: var(--primary, #1976d2); font: 600 12px/1 var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; opacity: .82;
  transition: opacity .15s, background-color .15s, transform .15s; }
.fn-pluss .material-icons { font-size: 15px; }
.fn-pluss:hover, .fn-pluss:focus-visible, .fn-pluss-aapen { opacity: 1; border-style: solid; background: var(--primary-light, #e3f2fd); }
.fn-pluss:focus-visible { outline: 2px solid #90caf9; outline-offset: 2px; }

.fn-pop { position: fixed; z-index: 10050; background: var(--bg-white, #fff); color: var(--text-primary, #212121); border: 1px solid var(--border-light, #e0e0e0);
  border-radius: 12px; box-shadow: 0 18px 48px rgba(13, 71, 161, .16), 0 3px 10px rgba(0, 0, 0, .08); font: 14px/1.5 var(--font-family, Roboto, system-ui, sans-serif);
  display: flex; flex-direction: column; max-height: calc(100vh - 24px); animation: fn-inn .16s cubic-bezier(.2, .8, .2, 1); }
.fn-pop:focus { outline: none; }
.fn-pop[hidden] { display: none; }
@keyframes fn-inn { from { opacity: 0; transform: translateY(-4px); } }
.fn-setning { padding: 12px 14px 8px; border-bottom: 1px solid var(--border-light, #eceff1); display: grid; gap: 4px; }
.fn-setning-rad { display: flex; gap: 10px; align-items: flex-start; }
.fn-setning-ikon { color: var(--primary, #1976d2); margin-top: 3px; font-size: 18px; }
.fn-setning-tekst { flex: 1; font-size: 15px; line-height: 1.6; min-height: 24px; }
.fn-prefiks { font-weight: 600; color: var(--primary-dark, #0d47a1); }
.fn-klausul-x { display: inline-flex; vertical-align: 1px; border: 0; background: none; padding: 0 2px; margin-left: 1px; color: var(--text-muted, #9e9e9e); cursor: pointer; border-radius: 4px; }
.fn-klausul-x .material-icons { font-size: 14px; }
.fn-klausul-x:hover { color: var(--accent-error, #c62828); }
.fn-naa { background: var(--primary-light, #e3f2fd); box-shadow: 0 0 0 3px var(--primary-light, #e3f2fd); border-radius: 3px; color: var(--primary-dark, #0d47a1); }
.fn-vent { color: var(--text-muted, #9e9e9e); font-style: italic; }
.fn-markor { display: inline-block; width: 2px; height: 1.1em; margin: 0 2px -2px 1px; background: var(--primary, #1976d2); animation: fn-blink 1.05s steps(1) infinite; }
@keyframes fn-blink { 50% { opacity: 0; } }
.fn-sti { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding-left: 28px; font-size: 12.5px; color: var(--text-muted, #757575); }
.fn-sti button { border: 0; background: none; padding: 1px 5px; border-radius: 5px; cursor: pointer; color: inherit; font: inherit; }
.fn-sti button:hover:not(:disabled) { background: var(--primary-light, #e3f2fd); color: var(--primary-dark, #0d47a1); }
.fn-sep { opacity: .5; }

.fn-midt { display: flex; min-height: 0; flex: 1 1 auto; }
.fn-midt > .fn-kolonner { flex: 1 1 auto; min-width: 0; }
.fn-saar { width: 340px; flex: none; padding: 10px 12px; display: grid; gap: 8px; align-content: start; border-left: 1px solid var(--border-light, #eceff1); overflow-y: auto; max-height: 440px; --sv-tekst: #37474f; }
@media (max-width: 999px) { .fn-midt { flex-direction: column; } .fn-saar { width: auto; border-left: 0; border-top: 1px solid var(--border-light, #eceff1); max-height: 260px; } }
.fn-saar[hidden] { display: none; }
.fn-saar .sv-hode { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fn-saar .sv-tittel { font-weight: 700; font-size: 13px; color: var(--primary-dark, #0d47a1); }
.fn-saar .sv-merk { font-size: 11px; color: var(--text-muted, #757575); }
.fn-saar .sv-rad { display: grid; grid-template-columns: 1fr 86px; gap: 8px; }
.fn-saar .sv-svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.fn-saar .sv-side { background: #f7f9fb; border-radius: 8px; padding: 4px; }
.fn-saar .sv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fn-saar .sv-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #fdecea; color: #b71c1c; }

.fn-kolonner { display: flex; align-items: stretch; min-height: 280px; max-height: 440px; overflow: hidden; flex: 1 1 auto; }
.fn-kol { padding: 8px 6px 10px; border-right: 1px solid var(--border-light, #eceff1); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.fn-kol:last-child { border-right: 0; }
.fn-kol-tittel { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #757575); padding: 2px 8px 6px; }
.fn-valgfri { font-size: 10.5px; letter-spacing: .02em; text-transform: none; font-weight: 500; color: var(--primary, #1976d2); background: var(--primary-light, #e3f2fd); padding: 1px 7px; border-radius: 999px; }
.fn-kol-aktiv { flex: 1; min-width: 240px; animation: fn-skyv .18s cubic-bezier(.2, .8, .2, 1); }
@keyframes fn-skyv { from { opacity: 0; transform: translateX(-10px); } }
.fn-kol-forrige { width: 220px; flex: none; background: var(--bg-light, #fbfcfd); }
.fn-valg { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; min-height: 34px; color: inherit; font: inherit; }
.fn-valg:hover { background: var(--bg-hover, #f3f7fb); }
.fn-valg.fn-valgt { background: var(--primary-light, #e3f2fd); color: var(--primary-dark, #0d47a1); font-weight: 500; }
.fn-valg.fn-forrige-valg { box-shadow: inset 0 0 0 1px #90caf9; }
.fn-valg.fn-brukt .fn-valg-tekst::after { content: 'check'; font-family: 'Material Icons'; font-size: 15px; color: var(--accent-success, #2e7d32); margin-left: 6px; vertical-align: -2px; }
.fn-valg-tekst { flex: 1; min-width: 0; }
.fn-valg-sub { display: block; font-size: 12px; color: var(--text-muted, #757575); font-weight: 400; line-height: 1.35; margin-top: 1px; }
.fn-valg-hint { font-size: 11.5px; color: var(--text-muted, #9e9e9e); margin-left: 6px; font-weight: 400; }
.fn-chev { color: var(--text-muted, #b0bec5); font-size: 18px !important; }
.fn-pop kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border-light, #e0e0e0); border-bottom-width: 2px; background: var(--bg-white, #fff); color: var(--text-muted, #757575); font: 500 11px/1 ui-monospace, 'Roboto Mono', monospace; }
.fn-kbd-tom { visibility: hidden; }
.fn-valg.fn-normal { background: color-mix(in srgb, var(--accent-success, #2e7d32) 9%, transparent); }
.fn-valg.fn-normal:hover { background: color-mix(in srgb, var(--accent-success, #2e7d32) 15%, transparent); }
.fn-prikk { color: var(--accent-success, #2e7d32); font-size: 18px !important; }
.fn-valg.fn-normal .fn-valg-tekst { color: var(--accent-success, #2e7d32); font-weight: 500; }
.fn-normaler { display: grid; gap: 4px; margin-bottom: 6px; }
.fn-boks { color: var(--text-muted, #757575); font-size: 20px !important; }
.fn-valg.fn-krysset .fn-boks { color: var(--primary, #1976d2); }
.fn-videre { margin: 8px 8px 0; }
.fn-rail { width: 50px; flex: none; align-items: center; padding: 8px 5px; gap: 4px; background: var(--bg-light, #fbfcfd); }
.fn-rail-knapp { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0; background: none; color: var(--text-muted, #757575); cursor: pointer; }
.fn-rail-knapp:hover { background: var(--bg-hover, #eef4fb); color: var(--primary, #1976d2); }
.fn-rail-knapp.fn-valgt { background: var(--primary, #1976d2); color: #fff; }
.fn-organvisning { flex: 1; padding: 10px 12px 12px; display: grid; gap: 10px; align-content: start; overflow-y: auto; }
.fn-sok { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 38px; border: 1px solid var(--border-light, #e0e0e0); border-radius: 8px; background: var(--bg-white, #fff); }
.fn-sok:focus-within { border-color: var(--primary, #1976d2); box-shadow: 0 0 0 3px var(--primary-light, #e3f2fd); }
.fn-sok input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; color: inherit; font: inherit; }
.fn-fav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fn-fav-knapp { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border-light, #e0e0e0); border-radius: 10px; background: var(--bg-white, #fff); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.fn-fav-knapp:hover { border-color: #90caf9; background: var(--primary-light, #e3f2fd); }
.fn-fav-knapp .material-icons, .fn-organ-ikon { color: var(--primary, #1976d2); font-size: 20px; }
.fn-navn { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-grupper { display: grid; gap: 8px; margin-top: 8px; }
.fn-gruppe { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: start; }
.fn-gruppe-navn { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #757575); padding-top: 6px; }
.fn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fn-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 8px; border-radius: 999px; border: 1px solid var(--border-light, #e0e0e0); background: var(--bg-white, #fff); color: inherit; cursor: pointer; font: 13px var(--font-family, Roboto, system-ui, sans-serif); }
.fn-chip .material-icons { font-size: 16px; color: var(--primary, #1976d2); }
.fn-chip:hover { border-color: #90caf9; background: var(--primary-light, #e3f2fd); }
.fn-treff { display: grid; gap: 2px; }
.fn-treff-rad { display: flex; align-items: center; gap: 6px; }
.fn-treff-rad > .fn-valg { flex: 1; min-width: 0; }
.fn-normal-knapp { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-success, #2e7d32) 35%, transparent); background: color-mix(in srgb, var(--accent-success, #2e7d32) 9%, transparent); color: var(--accent-success, #2e7d32); cursor: pointer; font: 500 12.5px var(--font-family, Roboto, system-ui, sans-serif); }
.fn-normal-knapp:hover { background: color-mix(in srgb, var(--accent-success, #2e7d32) 16%, transparent); }
.fn-normal-knapp kbd { font: 600 11px ui-monospace, monospace; min-width: 16px; padding: 0 3px; border-radius: 4px; border: 1px solid currentColor; text-align: center; }
.fn-ingen { color: var(--text-muted, #757575); padding: 8px; font-size: 13px; }
.fn-fritekst { display: inline-flex; align-items: center; height: 28px; margin-left: 4px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary, #1976d2) 35%, transparent); background: color-mix(in srgb, var(--primary, #1976d2) 8%, transparent); color: var(--primary, #1976d2); cursor: pointer; font: 500 12.5px var(--font-family, Roboto, system-ui, sans-serif); }
.fn-fritekst:hover { background: color-mix(in srgb, var(--primary, #1976d2) 15%, transparent); }
.fn-neste { font-style: normal; font-size: 12.5px; margin-right: 4px; }
.fn-tall-felt { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; flex-wrap: wrap; font-size: 15px; }
.fn-tall-felt input { width: 76px; height: 38px; padding: 0 10px; border: 1px solid var(--border-light, #e0e0e0); border-radius: 8px; font: 500 16px var(--font-family, Roboto, system-ui, sans-serif); font-variant-numeric: tabular-nums; text-align: center; background: var(--bg-white, #fff); color: inherit; }
.fn-tall-felt input:focus { outline: 0; border-color: var(--primary, #1976d2); box-shadow: 0 0 0 3px var(--primary-light, #e3f2fd); }
.fn-tall-hint { color: var(--text-muted, #757575); font-size: 12.5px; padding: 0 8px; }
.fn-bunn { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border-light, #eceff1); background: var(--bg-light, #fbfcfd); border-radius: 0 0 12px 12px; flex-wrap: wrap; }
.fn-taster { color: var(--text-muted, #757575); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.fn-taster kbd { margin-right: 3px; }
.fn-fyll { flex: 1; }
.fn-knapp { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-light, #e0e0e0); background: var(--bg-white, #fff); color: inherit; cursor: pointer; font: 500 13px var(--font-family, Roboto, system-ui, sans-serif); }
.fn-knapp:hover { background: var(--bg-hover, #f5f5f5); }
.fn-knapp .material-icons { font-size: 17px; color: var(--text-muted, #757575); }
.fn-knapp.fn-prim { background: var(--primary, #1976d2); border-color: var(--primary, #1976d2); color: #fff; }
.fn-knapp.fn-prim kbd { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.fn-knapp:disabled { opacity: .45; cursor: default; }
@media (max-width: 700px) {
  .fn-kol-forrige, .fn-rail { display: none; }
  .fn-kol-aktiv { min-width: 0; }
  .fn-taster { display: none; }
  .fn-fav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fn-gruppe { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .fn-pop, .fn-kol-aktiv, .fn-markor { animation: none; } }
/* Velger i Min profil (Undersøkelsesmal) */
.fk-takst-select { flex: none; width: auto; max-width: 260px; min-width: 160px; height: 34px; padding: 0 10px; border: 1px solid var(--border-light, #e0e0e0); border-radius: 8px;
  background: var(--bg-white, #fff); color: var(--text-primary, #212121); font: 14px var(--font-family, Roboto, system-ui, sans-serif); }
.fk-takst-select:focus-visible { outline: 2px solid #90caf9; outline-offset: 2px; }

/* ── Funnlinjen og undersøkelsesmaler (07.10.2026, /kiverktoy0710s55/) ───────────────────────── */
.fn-pop.fn-linje { border-radius: 10px; box-shadow: 0 10px 30px rgba(13, 71, 161, .14), 0 2px 6px rgba(0, 0, 0, .07); }
.fn-linje .fn-setning { padding: 8px 12px 6px; }
.fn-linje .fn-kolonner { min-height: 0; max-height: 360px; flex-direction: column; overflow-y: auto; }
.fn-linje .fn-kol { border-right: 0; flex: 1 1 auto; min-width: 0; }
.fn-linje .fn-organvisning { max-height: 360px; }
.fn-linje .fn-bunn { padding: 6px 10px; }
.fn-filter { margin: 8px 10px 2px; height: 34px; flex: none; }
.fn-pluss[hidden] { display: none; }
.fn-mal-knapp { background: var(--bg-white, #fff); }
.fn-malmeny { position: fixed; z-index: 10060; display: grid; gap: 2px; min-width: 200px; padding: 4px; background: var(--bg-white, #fff);
  border: 1px solid var(--border-light, #e0e0e0); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.fn-malmeny-valg { text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.fn-malmeny-valg:hover, .fn-malmeny-valg:focus-visible { background: var(--primary-light, #e3f2fd); outline: none; }
.fk-takst-toggle-row.usm-blokk { flex-direction: column; align-items: stretch; gap: 10px; }
.usm, .usm-liste { display: grid; gap: 10px; }
.usm-mal { border: 1px solid var(--border-light, #e0e0e0); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; background: var(--bg-white, #fff); }
.usm-topp { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.usm-navn { flex: 1 1 160px; padding: 6px 9px; border: 1px solid var(--border-medium, #cbd5e1); border-radius: 8px; font: inherit; background: var(--bg-white, #fff); color: inherit; }
.usm-std { font-size: .82rem; color: var(--text-secondary, #475569); display: flex; align-items: center; gap: 4px; }
.usm-slett { border: 0; background: none; color: var(--accent-error, #d32f2f); cursor: pointer; font: inherit; font-size: .82rem; }
.usm-tekst { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, 'Roboto Mono', monospace; padding: 8px 10px; border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px; resize: vertical; background: var(--bg-white, #fff); color: inherit; }
.usm-vis { display: grid; gap: 2px; font-size: .8rem; color: var(--text-secondary, #475569); }
.usm-organ { color: var(--primary, #1976d2); }
.usm-fri .usm-organ { color: #b45309; }
.usm-fot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.usm-knapp { border: 1px solid var(--border-medium, #cbd5e1); background: var(--bg-white, #fff); color: inherit; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.usm-prim { background: var(--primary, #1976d2); border-color: var(--primary, #1976d2); color: #fff; margin-left: auto; }
.usm-knapp:disabled { opacity: .5; cursor: default; }
.usm-storrelse, .usm-status, .usm-tom { font-size: .8rem; color: var(--text-muted, #64748b); }
.usm-for-stor { color: var(--accent-error, #d32f2f); font-weight: 600; }
/* Sjekklisten (malen) ved UNDERSØKELSE */
.fn-sjekk { position: absolute; pointer-events: auto; display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; align-items: center; height: 22px; }
.fn-sjekk[hidden] { display: none; }
.fn-sjekk-brikke { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--border-light, #e0e0e0);
  background: var(--bg-white, #fff); color: var(--text-secondary, #475569); font: 500 12px/1 var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; white-space: nowrap; }
.fn-sjekk-tegn { font-weight: 700; }
.fn-sjekk-funn { border-color: #a5d6a7; background: #e8f5e9; color: #1b5e20; }
.fn-sjekk-markor { border-color: #ffcc80; background: #fff3e0; color: #8d4c00; border-style: dashed; }
.fn-sjekk-mangler { color: var(--text-muted, #64748b); border-style: dashed; }
.fn-sjekk-brikke:hover, .fn-sjekk-brikke:focus-visible { border-color: var(--primary, #1976d2); outline: none; }
.fn-sjekk-sum { color: var(--text-secondary, #475569); }
.fn-malmeny .fn-sjekk-brikke { justify-self: start; margin: 2px 6px; }
.fn-malmeny-tittel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #757575); padding: 6px 12px 2px; }
.fn-malmeny-skille { height: 1px; background: var(--border-light, #eceff1); margin: 4px 0; }
.fn-malmeny-valg.fn-valgt { font-weight: 600; color: var(--primary, #1976d2); }
html[data-theme="dark"] .fn-sjekk-funn { background: rgba(76, 175, 80, .15); color: #a5d6a7; border-color: rgba(165, 214, 167, .5); }
html[data-theme="dark"] .fn-sjekk-markor { background: rgba(255, 152, 0, .14); color: #ffcc80; }

/* «+ Funn» sjekkliste med unntak (organ.sjekk, 08.10.2026): Hjernenerver */
.fn-sjekkrad { display: flex; align-items: stretch; gap: 4px; }
.fn-sjekkrad > .fn-valg { flex: 1; min-width: 0; }
.fn-nerver { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--text-muted, #757575); letter-spacing: .02em; }
.fn-sjekk-ok { color: var(--accent-success, #2e7d32); }
.fn-sjekk-avvik { color: var(--accent-danger, #c62828); }
.fn-sjekk-ikke { color: var(--text-muted, #9e9e9e); }
.fn-valg-sub.fn-sjekk-avvik, .fn-valg-sub.fn-sjekk-ok { font-weight: 500; }
.fn-sjekk-veksle { flex: none; width: 34px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--text-muted, #9e9e9e); display: inline-flex; align-items: center; justify-content: center; }
.fn-sjekk-veksle.fn-sjekk-ok { color: var(--accent-success, #2e7d32); }
.fn-sjekk-veksle.fn-sjekk-avvik { color: var(--accent-danger, #c62828); }
.fn-sjekk-veksle:hover { background: var(--bg-hover, rgba(0, 0, 0, .05)); }
.fn-sjekkliste .fn-sjekkrad .fn-valg { padding-top: 5px; padding-bottom: 5px; min-height: 0; }
.fn-sjekkliste .fn-tall-hint { margin-top: 6px; }
.fn-sjekk-veksle .material-icons { font-size: 20px; }
.fn-alle-normale { margin-bottom: 4px; }
.fn-sammendrag { color: var(--accent-success, #2e7d32); }

/* Organvalget ryddet (08.10.2026): ni organer i to kolonner, tasten foran navnet, «Alle organer» bak én knapp */
.fn-fav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
.fn-fav-knapp { border: 0; border-radius: 8px; padding: 7px 8px; gap: 10px; }
.fn-fav-knapp:hover, .fn-fav-knapp:focus-visible { background: var(--primary-light, #e3f2fd); }
.fn-fav-knapp kbd { order: -1; }
.fn-fav-knapp .fn-navn { font-weight: 500; }
/* ✓ = normalt med ett klikk (10.10.2026) */
.fn-fav-celle { position: relative; display: flex; min-width: 0; }
.fn-fav-celle > .fn-fav-knapp { flex: 1; min-width: 0; padding-right: 34px; }
.fn-fav-ok { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border-light, #dfe3e6); border-radius: 7px; background: var(--bg-white, #fff); color: #2e7d32; cursor: pointer; opacity: .55; }
.fn-fav-ok .material-icons { font-size: 17px; color: inherit; }
.fn-fav-celle:hover .fn-fav-ok, .fn-fav-ok:focus-visible { opacity: 1; }
.fn-fav-ok:hover { background: #e8f5e9; border-color: #a5d6a7; }
.fn-alle-organer { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 7px 8px; border: 0; border-top: 1px solid var(--border-light, #eceff1); border-radius: 0; background: transparent; color: var(--text-muted, #616161); font: inherit; cursor: pointer; text-align: left; }
.fn-alle-organer:hover { background: var(--bg-hover, rgba(0, 0, 0, .04)); color: inherit; }
.fn-alle-organer .material-icons { font-size: 20px; }
.fn-alle-organer .fn-chev { margin-left: auto; }
.fn-gruppe { grid-template-columns: 96px 1fr; }

/* To kolonner (08.10.2026): sjekklister med toKol og valglister med mer enn fire valg, så legen slipper å rulle */
.fn-valg-liste { display: flex; flex-direction: column; gap: 2px; }
.fn-valg-liste.fn-to-kol, .fn-sjekkliste.fn-to-kol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; align-content: start; }
.fn-sjekkliste.fn-to-kol > .fn-kol-tittel, .fn-sjekkliste.fn-to-kol > .fn-alle-normale, .fn-sjekkliste.fn-to-kol > .fn-tall-hint, .fn-sjekkliste.fn-to-kol > .fn-ingen { grid-column: 1 / -1; }
@media (max-width: 640px) { .fn-valg-liste.fn-to-kol, .fn-sjekkliste.fn-to-kol { grid-template-columns: 1fr; } }
.fn-forslag { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 2px; }
.fn-forslag .fn-chip { height: 28px; padding: 0 12px; font-variant-numeric: tabular-nums; }
.fn-forslag .fn-chip.fn-valgt { background: var(--primary-light, #e3f2fd); border-color: #90caf9; font-weight: 600; }

/* Nevrologi bena: rottabell + sensibilitetsfigur (rot-panel.js, 08.10.2026) */
.rp-ramme.rp-uten-figur { grid-template-columns: minmax(0, 1fr); }
.rp-ramme.rp-med-bilde { grid-template-columns: minmax(0, 1fr) 420px; }
.rp-ramme { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: start; padding: 2px 4px 6px; }
@media (max-width: 860px) { .rp-ramme { grid-template-columns: 1fr; } .rp-fig { max-width: 320px; } }
.rp-tabell.rp-fem { grid-template-columns: 96px repeat(5, minmax(0, 1fr)); }
.rp-tabell { display: grid; grid-template-columns: 96px repeat(3, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.rp-hjorne { }
.rp-rot { text-align: center; font-weight: 700; font-size: 13px; color: var(--text-secondary, #455a64); padding: 2px 0; }
.rp-mod { border: 1px solid var(--border-light, #e0e0e0); background: var(--bg-white, #fff); border-radius: 8px; font: 500 13px var(--font-family, Roboto, system-ui, sans-serif); text-align: left; padding: 4px 8px; cursor: pointer; color: inherit; }
.rp-mod.rp-ok { background: color-mix(in srgb, var(--accent-success, #2e7d32) 10%, transparent); border-color: color-mix(in srgb, var(--accent-success, #2e7d32) 40%, transparent); color: var(--accent-success, #2e7d32); }
.rp-mod.rp-ok::after { content: ' ✓'; }
.rp-mod.rp-avvik { border-color: color-mix(in srgb, var(--accent-danger, #c62828) 45%, transparent); color: var(--accent-danger, #c62828); }
.rp-celle { border: 1px solid var(--border-light, #eceff1); border-radius: 8px; padding: 3px 4px 3px 7px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.rp-celle-navn { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-muted, #757575); line-height: 1.2; }
.rp-tom { text-align: center; color: var(--text-muted, #bdbdbd); align-self: center; }
.rp-sider { display: flex; gap: 3px; flex: none; }
.rp-side, .rp-chip { border: 1px solid var(--border-light, #e0e0e0); background: var(--bg-white, #fff); border-radius: 999px; padding: 1px 8px; font: 500 12.5px var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; color: inherit; min-height: 24px; }
.rp-side:hover, .rp-chip:hover { background: var(--bg-hover, rgba(0, 0, 0, .05)); }
.rp-side.rp-paa { background: color-mix(in srgb, var(--accent-danger, #c62828) 12%, transparent); border-color: color-mix(in srgb, var(--accent-danger, #c62828) 50%, transparent); color: var(--accent-danger, #c62828); font-weight: 600; }
.rp-chip.rp-paa { background: var(--primary-light, #e3f2fd); border-color: #90caf9; font-weight: 600; }
.rp-tillegg { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.rp-linje { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rp-linje .rp-mod { min-width: 96px; }
.rp-linje-navn { font-size: 12.5px; color: var(--text-secondary, #546e7a); margin-left: 4px; }
.rp-rotnavn { margin-left: auto; font-size: 12.5px; color: var(--text-secondary, #546e7a); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.rp-fig { display: flex; flex-direction: column; gap: 4px; }
.rp-fig-etiketter { display: grid; grid-template-columns: 40% 20% 40%; text-align: center; width: 100%; max-width: 700px; align-self: center; font: 600 11.5px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-secondary, #546e7a); }
.rp-figur { width: 100%; max-width: 700px; height: auto; align-self: center; }
.rp-felt { fill: var(--bg-white, #fff); stroke: #b0bec5; stroke-width: 1; cursor: pointer; }
.rp-felt:hover { fill: #eceff1; }
.rp-felt.rp-rot-L4 { fill: #f3f8fd; } .rp-felt.rp-rot-L5 { fill: #f1f8f2; } .rp-felt.rp-rot-S1 { fill: #fdf6ee; }
.rp-felt.rp-paa { fill: color-mix(in srgb, var(--accent-danger, #c62828) 35%, #fff); stroke: var(--accent-danger, #c62828); }
.rp-felt.rp-ok { fill: color-mix(in srgb, var(--accent-success, #2e7d32) 30%, #fff); stroke: var(--accent-success, #2e7d32); }
.rp-fig-tekst { font: 11px var(--font-family, Roboto, system-ui, sans-serif); fill: var(--text-muted, #757575); }
.rp-fig-tittel { font: 600 11px var(--font-family, Roboto, system-ui, sans-serif); fill: var(--text-secondary, #546e7a); }
.rp-hint { font-size: 11.5px; color: var(--text-muted, #757575); }
html[data-theme="dark"] .rp-felt { fill: #263238; stroke: #546e7a; }
html[data-theme="dark"] .rp-felt.rp-rot-L4, html[data-theme="dark"] .rp-felt.rp-rot-L5, html[data-theme="dark"] .rp-felt.rp-rot-S1 { fill: #2b3a42; }
/* Vitalia-panelet i «+ Funn» (vital-panel.js, 09.10.2026): én linje per måling, tall med klikk (tier så ener) */
.fn-vitalpanel .vp { display: flex; flex-direction: column; padding: 0 4px 4px; }
.vp-rad { display: grid; grid-template-columns: 112px 158px 1fr; align-items: center; gap: 8px; min-height: 42px; padding: 4px 6px; border-radius: 8px; }
.vp-rad + .vp-rad { border-top: 1px solid var(--border-light, #eceff1); }
.vp-rad.vp-fokus { background: color-mix(in srgb, var(--primary, #1976d2) 6%, transparent); }
.vp-navn { font: 600 13px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-primary, #263238); }
.vp-felt { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vp-inp { width: 48px; height: 30px; padding: 0 4px; border: 1px solid var(--border-light, #dfe3e6); border-radius: 7px; font: 600 15px var(--font-family, Roboto, system-ui, sans-serif); font-variant-numeric: tabular-nums; text-align: center; background: var(--bg-white, #fff); color: inherit; }
.vp-inp::placeholder { font: 400 11px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-muted, #a0a7ab); }
.vp-inp:focus, .vp-inp.vp-venter { outline: 0; border-color: var(--primary, #1976d2); box-shadow: 0 0 0 3px var(--primary-light, #e3f2fd); }
.vp-skille, .vp-enhet { color: var(--text-muted, #757575); font-size: 12.5px; }
.vp-bmi { margin-left: 4px; font: 600 12px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-secondary, #546e7a); }
.vp-x { border: 0; background: transparent; color: var(--text-muted, #9e9e9e); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.vp-x:hover { background: var(--bg-light, #f1f3f4); color: var(--text-primary, #263238); }
.vp-tall { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.vp-delnavn { margin-right: 4px; font-size: 11.5px; color: var(--text-muted, #757575); }
.vp-tier, .vp-ener { min-width: 34px; height: 30px; padding: 0 4px; border-radius: 7px; border: 1px solid var(--border-light, #dfe3e6); background: var(--bg-light, #f7f9fa); color: var(--text-primary, #263238); font: 500 13px var(--font-family, Roboto, system-ui, sans-serif); font-variant-numeric: tabular-nums; cursor: pointer; }
.vp-tier:hover, .vp-ener:hover { border-color: var(--primary, #1976d2); background: var(--primary-light, #e3f2fd); }
.vp-tier.vp-valgt { background: var(--primary, #1976d2); border-color: var(--primary, #1976d2); color: #fff; }
.vp-ener { min-width: 40px; background: var(--bg-white, #fff); border-color: color-mix(in srgb, var(--primary, #1976d2) 45%, transparent); }
.vp-valgknapp { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-light, #dfe3e6); background: var(--bg-white, #fff); color: var(--text-secondary, #546e7a); font: 500 12px var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; }
.vp-valgknapp.vp-paa { border-color: var(--primary, #1976d2); background: var(--primary-light, #e3f2fd); color: var(--primary, #1976d2); }
.vp-advarsel { margin: 4px 6px 0 146px; font-size: 12.5px; color: var(--accent-warning, #b26a00); }
.fn-vital-mer { margin: 4px 6px 2px; }
@media (max-width: 760px) { .vp-rad { grid-template-columns: 1fr; } .vp-advarsel { margin-left: 6px; } }
/* «+ Funn · 4 tomme» og «Alle normale» (09.10.2026) */
.fn-antall { font-weight: 500; opacity: .85; }
.fn-alle-normale-rad { display: flex; align-items: center; gap: 10px; margin: 6px 0 0 26px; }
.fn-alle-tekst { font-size: 12.5px; color: var(--text-muted, #757575); }
.fn-alle-knapp kbd { margin-left: 2px; }
/* Raske verktøytips i «+ Funn» (09.10.2026) */
.fn-tips { position: fixed; z-index: 100000; max-width: 320px; padding: 6px 9px; border-radius: 7px; background: #263238; color: #fff; font: 500 12.5px/1.35 var(--font-family, Roboto, system-ui, sans-serif); box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; }
/* Dermatomfiguren: navnet ved pekeren (09.10.2026) */
.rp-fig { position: relative; }
.rp-fig-pek { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: #263238; color: #fff; font: 500 12px var(--font-family, Roboto, system-ui, sans-serif); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
/* EKG-panelet i «+ Funn» (ekg-panel.js, 09.10.2026) */
.fn-pop-hoy .fn-kolonner { max-height: calc(100vh - 190px); }
.fn-ekgpanel { padding: 4px 6px 6px; }
.ekg { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 10px 16px; }
.ekg-valg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ekg-topp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 4px 6px; }
.ekg-normal { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-success, #2e7d32) 40%, transparent); background: color-mix(in srgb, var(--accent-success, #2e7d32) 9%, transparent); color: var(--accent-success, #2e7d32); font: 600 13px var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; }
.ekg-normal .material-icons { font-size: 18px; }
.ekg-normal kbd { font: 600 11px ui-monospace, monospace; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; }
.ekg-normal.ekg-paa { background: var(--accent-success, #2e7d32); color: #fff; }
.ekg-hint { font-size: 12px; color: var(--text-muted, #757575); }
.ekg-rad { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 4px; border-top: 1px solid var(--border-light, #f0f2f3); }
.ekg-navn { font: 600 12.5px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-primary, #263238); }
.ekg-innhold { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.ekg-gruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-right: 10px; }
.ekg-under { font-size: 11.5px; color: var(--text-muted, #757575); margin: 0 2px 0 6px; }
.ekg-chip { height: 27px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--border-light, #dfe3e6); background: var(--bg-light, #f7f9fa); color: var(--text-primary, #263238); font: 500 12.5px var(--font-family, Roboto, system-ui, sans-serif); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.ekg-chip:hover { border-color: var(--primary, #1976d2); background: var(--primary-light, #e3f2fd); }
.ekg-chip.ekg-paa { background: var(--primary, #1976d2); border-color: var(--primary, #1976d2); color: #fff; }
.ekg-chip.ekg-tier { min-width: 34px; padding: 0 4px; }
.ekg-chip.ekg-ener { min-width: 38px; background: var(--bg-white, #fff); border-color: color-mix(in srgb, var(--primary, #1976d2) 45%, transparent); }
.ekg-inp { width: 52px; height: 27px; padding: 0 4px; border: 1px solid var(--border-light, #dfe3e6); border-radius: 7px; font: 600 13.5px var(--font-family, Roboto, system-ui, sans-serif); font-variant-numeric: tabular-nums; text-align: center; background: var(--bg-white, #fff); color: inherit; }
.ekg-inp:focus { outline: 0; border-color: var(--primary, #1976d2); box-shadow: 0 0 0 3px var(--primary-light, #e3f2fd); }
.ekg-inp.ekg-fri { width: 200px; text-align: left; font-weight: 500; }
.ekg-enhet { font-size: 12px; color: var(--text-muted, #757575); margin-right: 6px; }
.ekg-bazett { font: 600 12px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-secondary, #546e7a); }
.ekg-x { border: 0; background: transparent; color: var(--text-muted, #9e9e9e); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ekg-illu { display: flex; flex-direction: column; gap: 6px; }
.ekg-illu-tittel { font: 600 11px var(--font-family, Roboto, system-ui, sans-serif); letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted, #8a9499); }
.ekg-kart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ekg-celle { position: relative; padding: 0; border: 1px solid #f1c9c9; border-radius: 6px; background: #fff7f7; cursor: pointer; overflow: hidden; }
.ekg-celle:hover { border-color: var(--primary, #1976d2); }
.ekg-celle.ekg-celle-funn { border-color: #c62828; box-shadow: 0 0 0 2px rgba(198, 40, 40, .18); }
.ekg-celle-topp { position: absolute; inset: 2px 4px auto 4px; display: flex; justify-content: space-between; pointer-events: none; }
.ekg-celle-navn { font: 700 11px var(--font-family, Roboto, system-ui, sans-serif); color: #37474f; }
.ekg-celle-merk { font: 700 11px var(--font-family, Roboto, system-ui, sans-serif); color: #c62828; }
.ekg-papir { display: block; width: 100%; height: auto; }
.ekg-rute-liten { stroke: #f6caca; stroke-width: .5; fill: none; }
.ekg-rute-stor { stroke: #ec9a9a; stroke-width: .9; fill: none; }
.ekg-kurve { stroke: #1d2327; stroke-width: 1.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ekg-spike { stroke: #1565c0; stroke-width: 1.2; }
.ekg-stripe { border: 1px solid #f1c9c9; border-radius: 8px; background: #fff7f7; padding: 4px 6px 6px; }
.ekg-stripe-navn { font: 600 11px var(--font-family, Roboto, system-ui, sans-serif); color: #8d6e6e; margin-bottom: 2px; }
.fn-fav-ekg { grid-column: span 1; }
@media (max-width: 980px) { .ekg { grid-template-columns: 1fr; } }
.ekg-kurve-merk { stroke: #d32f2f; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ekg-nullinje { stroke: #1565c0; stroke-width: .8; stroke-dasharray: 3 3; opacity: .7; }
/* Ører-panelet (ore-panel.js, 09.10.2026): trommehinner tegnet i SVG */
.fn-orepanel { padding: 4px 8px 6px; }
.oe-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 2px 8px; }
.oe-normal { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-success, #2e7d32) 40%, transparent); background: color-mix(in srgb, var(--accent-success, #2e7d32) 9%, transparent); color: var(--accent-success, #2e7d32); font: 600 13px var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; }
.oe-normal .material-icons { font-size: 18px; }
.oe-normal kbd { font: 600 11px ui-monospace, monospace; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; }
.oe-normal.oe-paa { background: var(--accent-success, #2e7d32); color: #fff; }
.oe-skille { width: 1px; height: 22px; background: var(--border-light, #e0e0e0); margin: 0 4px; }
.oe-under { font-size: 12px; color: var(--text-muted, #757575); }
.oe-chip { height: 27px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--border-light, #dfe3e6); background: var(--bg-light, #f7f9fa); color: var(--text-primary, #263238); font: 500 12.5px var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; white-space: nowrap; }
.oe-chip:hover { border-color: var(--primary, #1976d2); background: var(--primary-light, #e3f2fd); }
.oe-chip.oe-paa { background: var(--primary, #1976d2); border-color: var(--primary, #1976d2); color: #fff; }
.oe-chip.oe-liten { height: 24px; padding: 0 7px; font-size: 11.5px; }
.oe-x { border: 0; background: transparent; color: var(--text-muted, #9e9e9e); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; margin-left: auto; }
.oe-sider { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.oe-side { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 8px; border-radius: 10px; border: 1px solid var(--border-light, #eceff1); }
.oe-side.oe-fokus { border-color: var(--primary, #1976d2); box-shadow: 0 0 0 2px var(--primary-light, #e3f2fd); }
.oe-sidehode { display: flex; align-items: center; gap: 6px; }
.oe-sidenavn { font: 700 13.5px var(--font-family, Roboto, system-ui, sans-serif); margin-right: 4px; }
.oe-tegning { width: 100%; max-width: 196px; align-self: center; height: auto; }
.oe-pek { min-height: 16px; text-align: center; font-size: 11.5px; color: var(--text-secondary, #546e7a); }
.oe-rad { display: grid; grid-template-columns: 94px 1fr; gap: 6px; align-items: start; }
.oe-radnavn { font: 600 12px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-secondary, #546e7a); padding-top: 5px; }
.oe-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.oe-gang { fill: #e9c3a8; stroke: #c99878; stroke-width: 1.5; }
.oe-gang-indre { fill: #f3d8c4; }
.oe-gang-rod { fill: #ea9b8a; stroke: #c45a48; }
.oe-gang-rod-indre { fill: #f0b3a2; }
.oe-hinne { stroke: #9aa6ad; stroke-width: 1.2; }
.oe-kar { stroke: #c0392b; stroke-width: 1.2; fill: none; opacity: .75; }
.oe-skaft { stroke: #f4f1e8; stroke-width: 5; stroke-linecap: round; }
.oe-skaft-tydelig { stroke: #fffaf0; stroke-width: 6.5; }
.oe-skaft-svak { opacity: .25; }
.oe-utloper, .oe-umbo { fill: #fbf8f0; }
.oe-refleks { fill: #fff; opacity: .9; }
.oe-vaske { fill: #e8b04f; opacity: .38; }
.oe-vaskespeil { stroke: #b07a1d; stroke-width: 1.6; stroke-dasharray: 4 3; }
.oe-boble { fill: rgba(255,255,255,.55); stroke: #b98a2f; stroke-width: 1.1; }
.oe-perf { fill: #2b1612; stroke: #7a3b2e; stroke-width: 1.5; }
.oe-skler { fill: #fffdf6; stroke: #d8d2c0; stroke-width: 1; }
.oe-lomme { fill: #8d6e63; opacity: .65; stroke: #5d4037; stroke-width: 1; }
.oe-dren { fill: #1e88e5; stroke: #0d47a1; stroke-width: 1.2; }
.oe-dren-hull { fill: #0b2545; }
.oe-sekret { fill: #e2d36b; stroke: #b5a43a; stroke-width: 1; opacity: .9; }
.oe-voks { fill: #8a5a2b; stroke: #5b3a1a; stroke-width: 1.2; }
.oe-voks-full { opacity: .95; }
.oe-fremmed { fill: #78909c; stroke: #455a64; stroke-width: 1.2; }
.oe-kv { fill: transparent; stroke: transparent; cursor: pointer; }
.oe-kv:hover { fill: rgba(25, 118, 210, .13); stroke: #1976d2; stroke-width: 1.2; stroke-dasharray: 3 2; }
.oe-orient { font: 600 10px var(--font-family, Roboto, system-ui, sans-serif); fill: var(--text-muted, #90a4ae); }
@media (max-width: 760px) { .oe-sider { grid-template-columns: 1fr; } }
/* Klikktall i alle tallfelt (09.10.2026): tier → ener, eller ett klikk for små tall */
.fn-klikktall { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 8px 8px; }
.fn-klikktall-navn { font: 600 11.5px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-muted, #757575); margin-right: 4px; }
.fn-chip.fn-klikk { min-width: 36px; font-variant-numeric: tabular-nums; }
.fn-chip.fn-klikk-valgt { background: var(--primary, #1976d2); border-color: var(--primary, #1976d2); color: #fff; }
.fn-chip.fn-klikk-ener { min-width: 40px; border-color: color-mix(in srgb, var(--primary, #1976d2) 45%, transparent); background: var(--bg-white, #fff); }
/* Abdomen-panelet (abd-panel.js, 09.10.2026): ni regioner tegnet i SVG */
.fn-abdpanel { padding: 4px 8px 6px; }
.ab { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.ab-kart { display: flex; flex-direction: column; gap: 6px; }
.ab-topp, .ab-verktoy { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ab-normal { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-success, #2e7d32) 40%, transparent); background: color-mix(in srgb, var(--accent-success, #2e7d32) 9%, transparent); color: var(--accent-success, #2e7d32); font: 600 13px var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; }
.ab-normal .material-icons { font-size: 18px; }
.ab-normal kbd { font: 600 11px ui-monospace, monospace; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; }
.ab-normal.ab-paa { background: var(--accent-success, #2e7d32); color: #fff; }
.ab-chip { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border-light, #dfe3e6); background: var(--bg-light, #f7f9fa); color: var(--text-primary, #263238); font: 500 12.5px var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; white-space: nowrap; }
.ab-chip:hover { border-color: var(--primary, #1976d2); background: var(--primary-light, #e3f2fd); }
.ab-chip.ab-paa { background: var(--primary, #1976d2); border-color: var(--primary, #1976d2); color: #fff; }
.ab-chip.ab-liten { height: 25px; padding: 0 8px; font-size: 11.5px; }
.ab-tegning { width: 100%; max-width: 320px; height: auto; align-self: center; }
.ab-pek { min-height: 16px; text-align: center; font-size: 11.5px; color: var(--text-secondary, #546e7a); }
.ab-valg { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.ab-rad { display: grid; grid-template-columns: 86px 1fr; gap: 6px; align-items: start; }
.ab-radnavn { font: 600 12px var(--font-family, Roboto, system-ui, sans-serif); color: var(--text-secondary, #546e7a); padding-top: 6px; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ab-torso { fill: #f6e3d6; stroke: #c9a48c; stroke-width: 1.6; }
.ab-kostal { fill: none; stroke: #b98d73; stroke-width: 2; }
.ab-lyske { fill: none; stroke: #c9a48c; stroke-width: 1.6; stroke-dasharray: 5 3; }
.ab-navle { fill: #d7b29b; stroke: #a9806a; stroke-width: 1; }
.ab-nett { stroke: #b0bec5; stroke-width: 1; stroke-dasharray: 4 4; opacity: .9; }
.ab-om-prikk { fill: #ef6c00; }
.ab-om { opacity: .55; }
.ab-def-strek { fill: #c62828; }
.ab-def { opacity: .5; }
.ab-slipp { fill: none; stroke: #c62828; stroke-width: 3; }
.ab-oppf { fill: rgba(106, 27, 154, .35); stroke: #6a1b9a; stroke-width: 2; }
.ab-flate { fill: transparent; cursor: pointer; }
.ab-flate:hover { fill: rgba(25, 118, 210, .12); stroke: #1976d2; stroke-width: 1.4; }
.ab-orient { font: 600 10px var(--font-family, Roboto, system-ui, sans-serif); fill: var(--text-muted, #90a4ae); }
@media (max-width: 760px) { .ab { grid-template-columns: 1fr; } }

/* ===== Hurtigvalget i notatfeltet (09.10.2026): «abd» + Tab under UNDERSØKELSE ===== */
.hq-spor { position: fixed; z-index: 10040; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color, #1565c0) 10%, var(--bg-white, #fff)); color: var(--primary-color, #1565c0);
  border: 1px solid color-mix(in srgb, var(--primary-color, #1565c0) 35%, transparent); font: 500 12.5px var(--font-family, Roboto, system-ui, sans-serif); cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.hq-spor[hidden], .hq-meny[hidden] { display: none; }
.hq-spor kbd, .hq-meny kbd { display: inline-grid; place-items: center; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border-light, #dfe3e6); border-bottom-width: 2px;
  background: var(--bg-white, #fff); color: var(--text-primary, #263238); font: 500 11px/1 ui-monospace, 'Roboto Mono', monospace; white-space: nowrap; }
.hq-meny { position: fixed; z-index: 10060; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-x: hidden; overflow-y: auto; padding: 4px 0 6px;
  background: var(--bg-white, #fff); color: var(--text-primary, #212121); border: 1px solid var(--border-light, #e0e0e0); border-radius: 11px;
  box-shadow: 0 16px 40px rgba(13, 71, 161, .16), 0 3px 10px rgba(0, 0, 0, .08); font: 13.5px/1.4 var(--font-family, Roboto, system-ui, sans-serif); user-select: none; animation: fn-inn .12s ease-out; }
.hq-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 12px 6px; border-bottom: 1px solid var(--border-light, #eceff1); font-size: 12px; color: var(--text-muted, #607d8b); }
.hq-sti { flex: 1; min-width: 0; font-weight: 600; color: var(--text-primary, #263238); }
.hq-topp > span:last-child { white-space: nowrap; }
.hq-sti i { font-style: normal; font-weight: 400; color: var(--text-muted, #90a4ae); margin: 0 5px; }
.hq-sok { font-family: ui-monospace, 'Roboto Mono', monospace; color: var(--primary-color, #1565c0); }
.hq-rader { padding: 4px 0; }
.hq-rad { display: flex; align-items: center; gap: 10px; min-height: 27px; padding: 2px 12px; cursor: pointer; }
.hq-rad:hover, .hq-rad.hq-hi { background: color-mix(in srgb, var(--primary-color, #1565c0) 8%, transparent); }
.hq-rad.hq-paa .hq-lbl { font-weight: 600; }
.hq-lbl { flex: 1; min-width: 0; }
.hq-sti-liten { color: var(--text-muted, #90a4ae); font-size: 11.5px; }
.hq-meny.hq-bred { width: 390px; }
.hq-kn { flex: none; padding: 1px 8px; border: 1px solid #81c784; border-radius: 10px; background: var(--bg-white, #fff); color: #2e7d32; font-size: 11.5px; font-weight: 600; line-height: 18px; cursor: pointer; white-space: nowrap; }
.hq-kn:hover { background: #e8f5e9; border-color: #43a047; }
.hq-kn.hq-kn-paa { background: #43a047; border-color: #43a047; color: #fff; }
.hq-kn.hq-kn-paa:hover { background: #388e3c; }
.hq-sum { color: var(--primary-color, #1565c0); font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-hint { color: var(--text-muted, #90a4ae); font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-chev { color: var(--text-muted, #90a4ae); width: 10px; text-align: right; }
.hq-hake { color: var(--primary-color, #1565c0); font-weight: 700; width: 10px; }
.hq-ingen-tast { width: 20px; }
.hq-skille { height: 1px; background: var(--border-light, #eceff1); margin: 4px 0; }
.hq-tom { padding: 8px 12px; color: var(--text-muted, #607d8b); }
.hq-forhand { padding: 5px 12px; border-top: 1px solid var(--border-light, #eceff1); font-size: 12.5px; color: var(--text-secondary, #455a64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-forhand .hq-pil { color: var(--primary-color, #1565c0); font-weight: 600; }
.hq-rute { display: grid; gap: 4px; margin: 8px 12px 4px; padding: 6px; border: 1px solid var(--border-light, #e0e0e0); border-radius: 16px 16px 30px 30px; }
.hq-kol3 { grid-template-columns: repeat(3, 1fr); }
.hq-kol2 { grid-template-columns: repeat(2, 1fr); border-radius: 30px 30px 14px 14px; }
.hq-celle { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-height: 46px; padding: 5px 6px; border: 1px solid var(--border-light, #e0e0e0);
  border-radius: 7px; background: var(--bg-white, #fff); font-size: 11.5px; line-height: 1.25; cursor: pointer; }
.hq-celle kbd { align-self: flex-start; height: 18px; min-width: 18px; }
.hq-celle:hover, .hq-celle.hq-hi { border-color: var(--primary-color, #1565c0); }
.hq-celle.hq-paa { background: var(--primary-color, #1565c0); border-color: var(--primary-color, #1565c0); color: #fff; }
.hq-celle.hq-paa kbd { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.hq-merke { font-size: 10.5px; font-weight: 600; }
.hq-orient { display: flex; justify-content: space-between; padding: 0 14px; font-size: 11px; color: var(--text-muted, #90a4ae); }
.hq-fot { display: flex; flex-wrap: wrap; gap: 10px; padding: 7px 12px 2px; border-top: 1px solid var(--border-light, #eceff1); font-size: 11.5px; color: var(--text-muted, #607d8b); }
.hq-fot span { display: inline-flex; align-items: center; gap: 5px; }
.hq-fot kbd { height: 17px; min-width: 17px; font-size: 10.5px; }
/* Munn og svelg: tegningen i menyen */
.sv-figboks { padding: 8px 12px 0; }
.sv-figboks .orient { display: flex; justify-content: space-between; padding: 0 2px; font-size: 11px; color: var(--text-muted, #90a4ae); }
.sv-fig { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; }
.sv-hule { fill: #4b1d26; } .sv-vegg { fill: #c97c84; } .sv-gane { fill: #eaa9af; stroke: #b8737b; stroke-width: 1; }
.sv-bue { fill: none; stroke: #b8737b; stroke-width: 3; stroke-linecap: round; }
.sv-ton { fill: #d98e95; stroke: #a8606a; stroke-width: 1.2; } .sv-rod { fill: #d8403f; } .sv-ton.sv-rod { stroke: #9e2423; }
.sv-belegg { fill: #fbf6ea; stroke: #d9cfb6; stroke-width: .6; } .sv-tungebelegg { opacity: .75; }
.sv-peri { fill: #e0868d; stroke: #9e2423; stroke-width: 1.2; stroke-dasharray: 3 2; }
.sv-sekret { fill: none; stroke: #f4ead2; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.sv-petekkie { fill: #8f1717; } .sv-tunge { fill: #d88b91; } .sv-papill { fill: #f7dede; }
/* Hurtigvalgets organer som klikkpanel i «+ Funn» (09.10.2026) */
.hp { display: flex; flex-direction: column; gap: 10px; }
.hp-topp { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-normal { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent-success, #2e7d32) 40%, transparent); background: color-mix(in srgb, var(--accent-success, #2e7d32) 8%, transparent);
  color: var(--accent-success, #2e7d32); font: 600 13px var(--font-family, Roboto, system-ui, sans-serif); }
.hp-normal .material-icons { font-size: 17px; }
.hp-normal.hp-paa { background: var(--accent-success, #2e7d32); color: #fff; }
.hp-normal kbd { margin-left: 2px; }
.hp-kat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 10px; align-items: start; }
.hp-boks { border: 1px solid var(--border-light, #e3e7ea); border-radius: 10px; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 3px; margin: 0; }
.hp-tittel { margin: 0 0 2px; font: 600 12px var(--font-family, Roboto, system-ui, sans-serif); letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted, #607d8b); }
.hp-rad { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; min-height: 26px; }
.hp-navn { font-size: 13px; flex: 1 1 auto; min-width: 90px; }
.hp-rad.hp-paa > .hp-navn { font-weight: 600; color: var(--primary-color, #1565c0); }
.hp-chip, .hp-mini { font: 500 12.5px var(--font-family, Roboto, system-ui, sans-serif); border: 1px solid var(--border-light, #dfe3e6); background: var(--bg-light, #f7f9fa);
  color: var(--text-primary, #263238); border-radius: 7px; cursor: pointer; }
.hp-chip { height: 26px; padding: 0 9px; text-align: left; }
.hp-mini { height: 22px; min-width: 24px; padding: 0 6px; font-size: 11.5px; }
.hp-chip:hover, .hp-mini:hover { border-color: var(--primary-color, #1565c0); }
.hp-chip.hp-paa, .hp-mini.hp-paa { background: var(--primary-color, #1565c0); border-color: var(--primary-color, #1565c0); color: #fff; }
.hp-sider { display: inline-flex; gap: 3px; }
.hp-lunge { display: flex; flex-wrap: wrap; gap: 3px 12px; flex-basis: 100%; padding-left: 2px; }
.hp-lunge-rad { display: inline-flex; align-items: center; gap: 3px; }
.hp-lunge-side { width: 14px; font-size: 11.5px; font-weight: 600; color: var(--text-muted, #78909c); }
.hp-alle { margin-left: 2px; }
.hp-trinn { display: flex; flex-direction: column; gap: 3px; flex-basis: 100%; }
.hp-trinn:empty { display: none; }
.hp-steg { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding-left: 10px; }
.hp-steg-navn { font-size: 11.5px; color: var(--text-muted, #78909c); margin-right: 2px; }
/* Svelg-panelet */
.sp { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 16px; align-items: start; }
.sp-kart { display: flex; flex-direction: column; gap: 8px; }
.sp-kart .sv-fig { max-width: 280px; }
.sp-valg { display: flex; flex-direction: column; gap: 8px; }
.sp-flate { fill: transparent; cursor: pointer; }
.sp-flate:hover { fill: rgba(21, 101, 192, .14); stroke: #1565c0; stroke-width: 1.2; stroke-dasharray: 3 2; }
.fn-panel-egen { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--primary-color, #1565c0);
  background: color-mix(in srgb, var(--primary-color, #1565c0) 6%, transparent); font-size: 13.5px; }
.fn-panel-egen .material-icons { font-size: 18px; color: var(--primary-color, #1565c0); }
.fn-panel-egen-tekst { flex: 1; min-width: 0; white-space: pre-wrap; }
.fn-panel-egen-hint { color: var(--text-muted, #78909c); font-size: 12px; white-space: nowrap; }
/* Skulder-panelet (09.10.2026) */
.skp { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.skp-kart { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.skp-fig { width: 100%; height: auto; display: block; }
.skp-hud { fill: #f3dfd2; stroke: #c9a48e; stroke-width: 1.5; }
.skp-linje { fill: none; stroke: #c9a48e; stroke-width: 1.4; }
.skp-sene { stroke-dasharray: 4 3; }
.skp-hode { fill: none; stroke: #b78f78; stroke-width: 1.2; stroke-dasharray: 3 3; }
.skp-ben { fill: none; stroke: #cdbb9c; stroke-width: 7; stroke-linecap: round; }
.skp-akromion { stroke-width: 9; }
.skp-punkt { fill: rgba(21, 101, 192, .18); stroke: #1565c0; stroke-width: 3.5; cursor: pointer; }
.skp-punkt:hover { fill: rgba(21, 101, 192, .3); }
.skp-punkt.skp-paa { fill: #d8403f; stroke: #9e2423; }
.skp-under { font-size: 11px; color: var(--text-muted, #90a4ae); text-align: center; }
/* Bilder i «+ Funn» (09.10.2026): kreditering under hvert bilde (CC BY) */
.bilde-kilde { font-size: 10.5px; color: var(--text-muted, #90a4ae); text-align: center; line-height: 1.3; }
.ab-tegning image, .sv-fig image, .oe-tegning image, .skp-fig image { image-rendering: auto; }
.ab-tegning .ab-orient { font-size: 20px; }
.ab-tegning .ab-slipp { stroke-width: 6; } .ab-tegning .ab-oppf { stroke-width: 3.5; } .ab-tegning .ab-flate:hover { stroke-width: 3; }
.sv-lag-rod { fill: rgba(214, 40, 40, .38); mix-blend-mode: multiply; }
.sv-lag-stor { fill: rgba(232, 150, 160, .55); stroke: #b0505a; stroke-width: 2; }
.sv-fig .sv-belegg { fill: #fbf6ea; stroke: #d9cfb6; stroke-width: 1.2; }
.sv-fig .sv-peri { fill: rgba(224, 134, 141, .55); stroke: #9e2423; stroke-width: 2.5; stroke-dasharray: 6 4; }
.sv-fig .sv-sekret { stroke-width: 6; }
.sv-pil { stroke: #1565c0; stroke-width: 4; fill: none; stroke-linecap: round; }
.sv-fig .sv-petekkie { fill: #8f1717; } .sv-fig .sv-papill { fill: #f7dede; }
.oe-ramme { fill: none; stroke: #1b1b1b; stroke-width: 3; }
.oe-lag-gang { fill: none; stroke: rgba(214, 70, 50, .65); stroke-width: 16; }
.oe-lag-rod { fill: rgba(220, 50, 40, .42); mix-blend-mode: multiply; }
.oe-lag-bukt { fill: rgba(240, 190, 120, .4); stroke: rgba(200, 120, 60, .9); stroke-width: 2.5; stroke-dasharray: 5 3; }
.oe-lag-matt { fill: rgba(235, 232, 225, .55); }
.oe-lag-refleks { fill: rgba(150, 110, 100, .85); filter: blur(1.5px); }

.hq-normalrad { display: grid; grid-template-columns: 1fr 1fr; }
.hq-rad.hq-halv { gap: 8px; }
.hq-rad.hq-halv .hq-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nakke › nevrologi armene: C6-cellen delt i albuefleksjon og håndleddsekstensjon (09.10.2026) */
.rp-celle-delt { flex-direction: column; align-items: stretch; gap: 2px; }
.rp-delrad { display: flex; align-items: center; gap: 4px; }
/* «ⓘ» ved kliniske tester i «+ Funn»: tegning og kort beskrivelse (test-info.js, 10.10.2026) */
.hp-info { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-light, #cfd8dc); background: var(--bg-white, #fff); color: var(--primary-color, #1565c0);
  font: italic 700 12px Georgia, serif; line-height: 18px; padding: 0; cursor: pointer; flex: none; }
.hp-info:hover, .hp-info.hp-paa { background: var(--primary-color, #1565c0); color: #fff; border-color: var(--primary-color, #1565c0); }
.ti-kort { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; padding: 8px;
  border: 1px solid var(--border-light, #e0e0e0); border-radius: 8px; background: var(--bg-light, #f7f9fa); font-size: 12.5px; line-height: 1.4; }
.ti-bilde { display: block; width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; margin: 0 auto; }
.ti-tekst p { margin: 0 0 4px; }
.ti-navn { font-weight: 600; margin-bottom: 2px; }
.ti-lenker { color: var(--text-muted, #607d8b); }
.ti-lenker a { color: var(--primary-color, #1565c0); }
.ti-kreditt { text-align: left; margin: 0; }
/* LMG-veiviseren (11.10.2026): gule bobler mot de ekte elementene */
.lmg2-hjelp{display:inline-flex;align-items:center;gap:6px;margin-left:auto;background:#ffe9a8;color:#5c4500;border:none;border-radius:9px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.lmg2-hjelp .material-icons{font-size:17px}
.lmg2-hjelp:hover{background:#ffdf80}
.lmg2-hjelp + .lmg-x{margin-left:8px}
@media(max-width:980px){.lmg2-hjelp > span:last-child{display:none}}
.lmgv-lys{position:fixed;z-index:9620;border-radius:12px;box-shadow:0 0 0 3px #f2c230,0 0 0 9999px rgba(15,25,40,.38);pointer-events:none}
.lmgv-lys.lmgv-gjennom{box-shadow:0 0 0 3px #f2c230,0 0 0 9999px rgba(15,25,40,.22)}
.lmgv-boble,.lmgv-hint{position:fixed;z-index:9630;background:#fff6c7;color:#3d3200;border:1.5px solid #e9b800;border-radius:12px;box-shadow:0 10px 28px -10px rgba(60,45,0,.45);font-size:13.5px;line-height:1.45}
.lmgv-boble{width:min(360px,calc(100vw - 16px));padding:11px 13px 10px}
.lmgv-topp{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.lmgv-topp b{flex:1;font-size:14px}
.lmgv-nr{font-size:11px;font-weight:700;background:#ffe27a;border-radius:999px;padding:1px 8px;color:#5c4500}
.lmgv-x{background:none;border:none;font-size:20px;line-height:1;color:#7a6400;cursor:pointer;padding:0 2px}
.lmgv-fot{display:flex;justify-content:space-between;margin-top:9px}
.lmgv-knapp{border:1px solid #d9b100;background:#fff;color:#5c4500;border-radius:8px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.lmgv-primar{background:#e9b800;border-color:#e9b800;color:#2b2300}
.lmgv-pil{position:absolute;width:14px;height:14px;background:#fff6c7;border:1.5px solid #e9b800;transform:rotate(45deg)}
.lmgv-boble.under .lmgv-pil,.lmgv-hint.under .lmgv-pil{top:-8px;border-right:none;border-bottom:none}
.lmgv-boble.over .lmgv-pil,.lmgv-hint.over .lmgv-pil{bottom:-8px;border-left:none;border-top:none}
.lmgv-hint{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 12px;max-width:min(520px,calc(100vw - 16px));font-size:13px}
.lmgv-hint.dokk .lmgv-pil{display:none}
.lmgv-hint[hidden],.lmgv-boble[hidden],.lmgv-lys[hidden]{display:none}
.lmgv-lenke{background:none;border:none;color:#7a5a00;text-decoration:underline;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
/* Oppgavelinja med de tre stegene i legens rekkefølge (11.10.2026) */
.lmg2-ostegene{display:flex;flex-wrap:wrap;gap:6px 14px;flex:1;min-width:260px;align-items:center}
.lmg2-ostg{display:inline-flex;align-items:center;gap:6px}
.lmg2-ostnr{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e9b800;color:#2b2300;font-size:11.5px;font-weight:800;flex:none}
.lmg2-ostg.ok .lmg2-ostnr{background:#2e7d52;color:#fff}
.lmg2-ostg.ok{color:#2b5b40}
.lmg2-olenke{background:none;border:none;padding:0;font:inherit;font-weight:700;color:#6b4e00;text-decoration:underline;cursor:pointer}
.lmg2-ostinfo{font-size:12px;color:#8a7430}
.lmg2-ohjelp{flex-basis:100%;font-size:12.5px;color:#6b5a1f;margin-left:30px}
.lmgv-mangler{margin-top:6px;font-style:italic;color:#7a6400}
/* «Gjelder pasienten?» er første steg mens den er ubesvart (11.10.2026) */
.lmg-dekl.lmg-dekl-venter{background:#fff8e1;border:1.5px solid #e9b800;box-shadow:0 0 0 3px rgba(233,184,0,.15)}
.lmg-dekl-nr{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e9b800;color:#2b2300;font-size:11.5px;font-weight:800}
/* Bivirkningssøket som steg 2 (11.10.2026) */
.lmg-bivpanel.lmg-bivpanel-venter{background:#fff8e1;border:1.5px solid #e9b800;box-shadow:0 0 0 3px rgba(233,184,0,.15)}
.lmg-bivsteg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#4a3b00;margin:0 0 8px}
.lmg-bivhopp{margin-left:auto;font-weight:600}
/* Flytblokkene i kortet (fordeles i kortest kolonne, 11.10.2026) */
.lmg2-flyt{display:flex;flex-direction:column;gap:14px;min-width:0}
.lmg2-pophvorfor{display:flex;align-items:flex-start;gap:6px;margin:2px 0 8px;padding:7px 10px;background:#fff8e1;border:1px solid #f3d27a;border-radius:8px;font-size:12.5px;color:#4a3b00}
.lmg2-pophvorfor .material-icons{font-size:16px;color:#c99400}

/* «Juster notatet» (13.10.2026): smal linje over notatfeltet */
.juster-strip { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--border-color, #d0d7de); border-radius: 8px; background: var(--surface-color, #f6f8fa); }
.juster-strip.is-hidden { display: none; }
.juster-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.juster-etikett { font-size: 13px; font-weight: 600; margin-right: 4px; }
.juster-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-color, #d0d7de); background: var(--bg-color, #fff); color: inherit; cursor: pointer; }
.juster-chip:hover { border-color: var(--primary-color, #2563eb); }
.juster-input { flex: 1 1 260px; min-width: 0; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border-color, #d0d7de); border-radius: 6px; background: var(--bg-color, #fff); color: inherit; }
.juster-angre { font-size: 12px; background: none; border: none; color: var(--primary-color, #2563eb); cursor: pointer; text-decoration: underline; padding: 0 4px; }
.juster-angre.is-hidden { display: none; }

/* ===== skjema.js — «Skjema»: PHQ-9, GAD-7, MADRS, MIDAS (14.10.2026) =====
   Webcard-designet fra fastlegen.com/tester/skoringer, nøytrale svarknapper.
   Ingen inline styles (CSP). Mørk modus via html[data-theme="dark"]. */
.skj-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1050;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.skj-modal { background: var(--bg-white, #fff); color: var(--text-primary, #212121); border-radius: 16px;
  width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.skj-modal.skj-fullskjerm { max-width: 96vw; max-height: 96vh; width: 96vw; height: 96vh; }
.skj-hode { display: flex; align-items: center; gap: 10px; padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,.08)); }
.skj-hode-ikon { color: var(--primary, #1976d2); }
.skj-tittel { font-size: 1.05rem; font-weight: 700; margin: 0; flex: 1; }
.skj-lukk { border: 0; background: none; color: var(--text-muted, #757575); cursor: pointer; padding: 4px; border-radius: 50%; display: inline-flex; }
.skj-lukk:hover { background: var(--bg-page, #f4f6f8); }
.skj-kropp { padding: 16px 20px 20px; overflow-y: auto; }
.skj-seksjon + .skj-seksjon { margin-top: 18px; }
.skj-seksjon-tittel { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #757575); font-weight: 600; }
.skj-valgliste { display: flex; flex-direction: column; gap: 6px; }
.skj-valg { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-soft, rgba(0,0,0,.08));
  border-radius: 10px; cursor: pointer; background: var(--bg-page, #f4f6f8); }
.skj-valg:hover { border-color: var(--primary, #1976d2); }
.skj-valg input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--primary, #1976d2); flex-shrink: 0; }
.skj-valg-info { flex: 1; min-width: 0; }
.skj-valg-tittel { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.skj-valg-under { font-size: .82rem; color: var(--text-muted, #757575); margin-top: 2px; }
.skj-tag { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
  background: var(--primary-light, #e3f2fd); color: var(--primary, #1976d2); }
.skj-handlinger { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.skj-knapp { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--border-soft, rgba(0,0,0,.12));
  background: var(--bg-white, #fff); color: var(--text-primary, #212121); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; }
.skj-knapp .material-icons { font-size: 1.15rem; }
.skj-knapp:hover:not(:disabled) { border-color: var(--primary, #1976d2); color: var(--primary, #1976d2); }
.skj-knapp:disabled { opacity: .45; cursor: not-allowed; }
.skj-knapp.skj-primaer { background: var(--primary, #1976d2); border-color: var(--primary, #1976d2); color: #fff; }
.skj-knapp.skj-primaer:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
.skj-knapp.skj-sekundaer { background: transparent; }
.skj-knapp.skj-liten { padding: 6px 10px; font-size: .8rem; }
.skj-knapp.skj-flash { background: var(--success, #2e7d32); border-color: var(--success, #2e7d32); color: #fff; }
.skj-hint { font-size: .78rem; color: var(--text-muted, #757575); margin: 10px 0 0; }
.skj-svarrad { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-page, #f4f6f8); margin-bottom: 6px; }
.skj-svarrad-info { flex: 1; min-width: 0; }
.skj-svarrad-tittel { font-weight: 600; font-size: .92rem; }
.skj-svarrad-under { font-size: .78rem; color: var(--text-muted, #757575); }

/* Merke på Skjema-knappen og i konsultasjonslista */
.response-header-actions .action-btn { position: relative; }
.skj-merke { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ef6c00; color: #fff; font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.skj-merke.skj-merke-nytt { background: var(--success, #2e7d32); }
.skj-merke .material-icons { font-size: .8rem; }
.consult-card-title .skjema-nytt-ikon { font-size: 16px; color: #ef6c00; margin-left: 4px; vertical-align: text-bottom; }

/* Webcard: utfylling og resultat */
.skj-kort { background: #e3f2fd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.18); overflow: hidden; max-width: 520px; margin: 0 auto; }
.skj-kort + .skj-kort { margin-top: 14px; }
.skj-kort-hode { background: #42a5f5; padding: 10px 14px 8px; }
.skj-kort-hode-ferdig { background: #4caf50; }
.skj-kort-tittel { font-size: 1.5rem; color: #fff; margin: 0; font-weight: 500; }
.skj-kort-under { font-size: .95rem; color: #fff; opacity: .95; font-weight: 300; margin-top: 2px; }
.skj-fremdrift { height: 4px; background: rgba(255,255,255,.3); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.skj-fremdrift-fyll { height: 100%; background: #fff; transition: width .3s ease; }
.skj-kort-innhold { padding: 14px 16px 16px; color: #1a1a1a; }
.skj-intro { font-size: .92rem; margin: 0 0 14px; color: #455a64; line-height: 1.5; background: rgba(66,165,245,.08); border-left: 3px solid #42a5f5; padding: 10px 12px; border-radius: 3px; }
.skj-sporsmaal { font-size: 1.12rem; margin: 4px 0 12px; line-height: 1.4; color: #1a1a1a; }
.skj-svarliste { display: flex; flex-direction: column; gap: 6px; }
.skj-svar { width: 100%; padding: 12px 14px; border: 0; border-radius: 6px; background: #2196f3; color: #fff; font: inherit; font-size: .95rem;
  text-align: left; line-height: 1.35; cursor: pointer; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .06s ease, filter .15s ease; }
.skj-svar:hover { filter: brightness(1.07); }
.skj-svar:active { transform: translateY(1px); }
.skj-hurtig { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 4px;
  background: rgba(255,255,255,.25); font-size: .8rem; font-weight: 600; flex-shrink: 0; }
.skj-svar-tekst { flex: 1; }
.skj-tallfelt { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.skj-tall { width: 120px; font: inherit; font-size: 1.3rem; padding: 8px 10px; border: 2px solid #90caf9; border-radius: 6px; background: #fff; color: #1a1a1a; }
.skj-tall:focus { outline: none; border-color: #1976d2; }
.skj-tall-enhet { color: #455a64; font-size: .95rem; }
.skj-svar.skj-svar-ok { width: auto; padding: 10px 18px; }
.skj-tall-feil { color: #c62828; font-size: .85rem; min-height: 1.2em; margin: 2px 0 6px; }
.skj-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.skj-nav .skj-knapp { background: #fff; }
.skj-teller { font-size: .85rem; color: #546e7a; }
.skj-sum { text-align: center; margin: 4px 0 10px; }
.skj-sum-tall { font-size: 3rem; font-weight: 700; color: #1a1a1a; line-height: 1; }
.skj-sum-maks { font-size: 1rem; color: #546e7a; margin-left: 6px; }
.skj-enkeltsvar { background: #fff; border: 1px solid #cfd8dc; border-radius: 6px; padding: 6px 10px; }
.skj-enkeltsvar-rad { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; padding: 4px 0; border-bottom: 1px solid #eceff1; color: #263238; }
.skj-enkeltsvar-rad:last-child { border-bottom: 0; }
.skj-enkeltsvar-navn { color: #455a64; }
.skj-enkeltsvar-verdi { font-weight: 500; text-align: right; }
.skj-forhaandsvisning { margin: 14px auto 0; max-width: 520px; background: var(--bg-page, #f4f6f8); border: 1px solid var(--border-soft, rgba(0,0,0,.08));
  border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--text-primary, #212121); }

/* QR-visning: stor nok til å skannes på 1–2 m */
.skj-qr-ramme { display: flex; justify-content: center; }
.skj-qr { background: #fff; padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0; display: inline-block; line-height: 0; }
.skj-qr img, .skj-qr canvas { width: min(60vh, 86vw, 560px); height: auto; display: block; }
.skj-fullskjerm .skj-qr img, .skj-fullskjerm .skj-qr canvas { width: min(80vh, 90vw, 1000px); }
.skj-qr-fallback { font-family: monospace; font-size: .75rem; word-break: break-all; line-height: 1.3; max-width: 400px; }
.skj-qr-tekst { text-align: center; font-size: 1rem; margin: 14px 0 8px; }
.skj-qr-status { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 6px 0; }
.skj-qr-rad { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--text-muted, #757575); }
.skj-qr-rad .material-icons { font-size: 1.2rem; }
.skj-qr-rad-ok { color: var(--success, #2e7d32); font-weight: 600; }
.skj-qr-tid { font-size: .8rem; color: var(--text-muted, #757575); }
.skj-qr-feil { font-size: .9rem; color: #c62828; font-weight: 600; }
.skj-qr-fot { justify-content: center; }
.skj-trygghet { font-size: .76rem; color: #15803d; text-align: center; margin: 12px 0 0; }

/* Dialoger (valg etter notat, foreldreløst svar) og stående melding */
.skj-dialog-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.skj-dialog { background: var(--bg-white, #fff); color: var(--text-primary, #212121); border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.skj-dialog-hode { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; }
.skj-dialog-hode .material-icons { color: #ef6c00; }
.skj-dialog-tittel { margin: 0; font-size: 1rem; font-weight: 700; }
.skj-dialog-kropp { padding: 0 18px 8px; overflow-y: auto; }
.skj-dialog-tekst { margin: 0 0 10px; font-size: .9rem; color: var(--text-muted, #757575); }
.skj-svarkort { background: var(--bg-page, #f4f6f8); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.skj-svarkort-hode { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.skj-svarkort-tekst { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; white-space: pre-wrap; word-break: break-word; color: var(--text-primary, #212121); }
.skj-dialog-fot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px 16px; border-top: 1px solid var(--border-soft, rgba(0,0,0,.08)); }
.skj-banner { position: fixed; top: 72px; right: 20px; z-index: 1150; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px;
  background: var(--bg-white, #fff); color: var(--text-primary, #212121); border-left: 4px solid #ef6c00; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22); max-width: 420px; font-size: .88rem; }
.skj-banner > .material-icons { color: #ef6c00; }
.skj-banner-tekst { flex: 1; min-width: 0; }
.skj-banner-knapp { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--primary, #1976d2); color: var(--primary, #1976d2); background: transparent;
  border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .82rem; cursor: pointer; }
.skj-banner-knapp .material-icons { font-size: 1rem; }
.skj-banner-lukk { border: 0; background: none; color: var(--text-muted, #757575); cursor: pointer; display: inline-flex; padding: 2px; }

html[data-theme="dark"] .skj-kort { background: #1c2a3a; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
html[data-theme="dark"] .skj-kort-hode { background: #1e5aa8; }
html[data-theme="dark"] .skj-kort-hode-ferdig { background: #2e7d32; }
html[data-theme="dark"] .skj-kort-innhold, html[data-theme="dark"] .skj-sporsmaal, html[data-theme="dark"] .skj-sum-tall { color: #e8eaed; }
html[data-theme="dark"] .skj-intro { color: #b0bec5; background: rgba(74,158,255,.1); border-left-color: #4a9eff; }
html[data-theme="dark"] .skj-svar { background: #2b6cb0; }
html[data-theme="dark"] .skj-tall { background: #0d1117; color: #e8eaed; border-color: #2b6cb0; }
html[data-theme="dark"] .skj-tall-enhet, html[data-theme="dark"] .skj-teller, html[data-theme="dark"] .skj-sum-maks { color: #90a4ae; }
html[data-theme="dark"] .skj-nav .skj-knapp { background: #1c2128; }
html[data-theme="dark"] .skj-enkeltsvar { background: #0d1117; border-color: #30363d; }
html[data-theme="dark"] .skj-enkeltsvar-rad { color: #e8eaed; border-bottom-color: #30363d; }
html[data-theme="dark"] .skj-enkeltsvar-navn { color: #90a4ae; }
html[data-theme="dark"] .skj-qr { border-color: #30363d; }
html[data-theme="dark"] .skj-trygghet { color: #81c784; }
@media (max-width: 600px) {
  .skj-overlay { padding: 0; }
  .skj-modal { max-height: 100vh; border-radius: 0; }
  .skj-handlinger .skj-knapp { flex: 1 1 auto; justify-content: center; }
}

/* ===== kvsok: legemiddeloppslaget som oppslagsverk (kvm-, 15.10.2026, kiverktoy1210) =====
   Festet topp + metalinje, faktastripe, innholdsfortegnelse, SPC-seksjoner som ett dokument.
   Appens tokens gir mørk modus. Ingen inline styles (CSP). */
.kvsok-modal.kvsok-medmodal{display:none;padding:28px 16px;overflow:hidden}
.kvsok-modal.kvsok-medmodal.kvsok-open{display:flex;align-items:flex-start;justify-content:center}
.kvsok-modal.kvsok-medmodal .kvsok-mbox{max-width:980px;width:100%;max-height:calc(100vh - 56px);padding:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-white,#fff);color:var(--text-primary,#1f2933);border-radius:14px}
.kvm-top{display:flex;gap:16px;align-items:flex-start;padding:16px 22px 12px;border-bottom:1px solid var(--border-soft,#e3e8ee)}
.kvm-top-tekst{flex:1;min-width:0}
.kvm-tittel{margin:0;font-size:20px;font-weight:600;color:var(--text-primary,#1f2933);line-height:1.3}
.kvm-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:13px;color:var(--text-muted,#5f6b76);align-items:center}
.kvm-meta b{color:var(--text-primary,#1f2933);font-weight:500}
.kvm-meta a{color:var(--primary,#1976d2);text-decoration:none}
.kvm-meta a:hover{text-decoration:underline}
.kvm-former{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.kvm-form{border:1px solid var(--border-soft,#e3e8ee);background:transparent;color:var(--text-primary,#1f2933);border-radius:999px;padding:1px 10px;font:inherit;font-size:12px;cursor:pointer}
.kvm-form.kvm-on{background:var(--primary-light,#e3f2fd);border-color:var(--primary,#1976d2);color:var(--primary-dark,#0d47a1)}
.kvm-x{margin-left:auto;flex:none;border:0;background:var(--bg-page,#f4f6f8);color:var(--text-muted,#5f6b76);width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;font-family:inherit}
.kvm-x:hover{color:var(--text-primary,#1f2933)}
.kvm-fakta{display:grid;grid-template-columns:1.5fr 1fr 1fr;border-bottom:1px solid var(--border-soft,#e3e8ee);background:var(--bg-page,#f4f6f8)}
.kvm-fakta>div{padding:11px 22px;border-right:1px solid var(--border-soft,#e3e8ee);min-width:0}
.kvm-fakta>div:last-child{border-right:0}
.kvm-l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#5f6b76);font-weight:600;margin-bottom:4px}
.kvm-v{font-size:14.5px;font-weight:500;line-height:1.35;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kvm-ok{color:var(--success,#2e7d32)}
.kvm-ingen{color:var(--text-muted,#5f6b76);font-weight:400}
.kvm-dato{font-size:12px;color:var(--text-muted,#5f6b76);font-weight:400}
.kvm-kop{border:1px solid var(--border-soft,#e3e8ee);background:var(--bg-white,#fff);color:var(--primary,#1976d2);border-radius:8px;padding:4px 9px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.kvm-kop.kvsok-copied{background:var(--success,#2e7d32);border-color:var(--success,#2e7d32);color:#fff}
.kvm-lenkeknapp{border:0;background:none;padding:0;font:inherit;font-weight:500;color:var(--primary,#1976d2);cursor:pointer;text-decoration:none}
.kvm-lenkeknapp:hover{text-decoration:underline}
.kvm-lenkeknapp.kvm-varsel{color:#c05621}
.kvm-kropp{display:grid;grid-template-columns:230px 1fr;flex:1;min-height:0}
.kvm-toc{border-right:1px solid var(--border-soft,#e3e8ee);padding:12px 10px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.kvm-toc-a{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:7px 12px;border:0;border-radius:8px;background:none;color:var(--text-primary,#1f2933);font:inherit;font-size:13.5px;line-height:1.3;cursor:pointer}
.kvm-toc-a:hover{background:var(--bg-page,#f4f6f8)}
.kvm-toc-a.kvm-on{background:var(--primary-light,#e3f2fd);color:var(--primary-dark,#0d47a1);font-weight:500}
.kvm-nr{color:var(--text-muted,#5f6b76);font-variant-numeric:tabular-nums;min-width:28px;font-weight:500;flex:none}
.kvm-toc-a.kvm-on .kvm-nr{color:var(--primary,#1976d2)}
.kvm-dok{overflow:auto;padding:4px 26px 26px;scroll-behavior:smooth}
.kvm-sek{border-bottom:1px solid var(--border-soft,#e3e8ee);transition:background .4s}
.kvm-sek.kvm-hl{background:var(--primary-light,#e3f2fd)}
.kvm-sek>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 0;cursor:pointer;font-size:15px;font-weight:600;color:var(--text-primary,#1f2933)}
.kvm-sek>summary::-webkit-details-marker{display:none}
.kvm-sek>summary .kvm-nr{min-width:30px}
.kvm-smeta{margin-left:auto;font-weight:400;font-size:13px;color:var(--text-muted,#5f6b76)}
.kvm-chev{margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--text-muted,#5f6b76);border-bottom:2px solid var(--text-muted,#5f6b76);transform:rotate(-45deg);transition:transform .15s;margin-right:4px}
.kvm-smeta+.kvm-chev{margin-left:12px}
.kvm-sek[open]>summary .kvm-chev{transform:rotate(45deg)}
.kvm-inn{padding:0 0 16px 42px;font-size:15px;line-height:1.6;color:var(--text-primary,#1f2933)}
.kvm-inn p{margin:0 0 10px}
.kvm-h4{margin:14px 0 6px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted,#5f6b76);font-weight:600}
.kvm-inn>.kvm-h4:first-child{margin-top:0}
.kvm-note{font-size:13px;color:var(--text-muted,#5f6b76);font-style:italic}
.kvm-pkt{color:var(--primary,#1976d2);text-decoration:none;border-bottom:1px dotted var(--primary,#1976d2)}
.kvm-pkt-pdf{border-bottom-style:dashed;color:var(--text-muted,#5f6b76)}
.kvm-inn .kvsok-dtw{margin:10px 0 14px}
.kvm-inn .kvsok-ref2body{padding:0}
.kvm-inn .kvsok-mangel{margin:0}
.kvm-fot{border-top:1px solid var(--border-soft,#e3e8ee);padding:9px 22px;font-size:12px;color:var(--text-muted,#5f6b76);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){
  .kvsok-modal.kvsok-medmodal{padding:0}
  .kvsok-modal.kvsok-medmodal .kvsok-mbox{max-height:100vh;border-radius:0}
  .kvm-fakta{grid-template-columns:1fr}
  .kvm-fakta>div{border-right:0;border-bottom:1px solid var(--border-soft,#e3e8ee);padding:8px 16px}
  .kvm-kropp{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .kvm-toc{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-soft,#e3e8ee);padding:8px 10px;gap:4px}
  .kvm-toc-a{white-space:nowrap;padding:5px 10px;border:1px solid var(--border-soft,#e3e8ee);border-radius:999px;font-size:12.5px}
  .kvm-toc-a span:last-child{display:none}
  .kvm-toc-a .kvm-nr{min-width:0;color:inherit}
  .kvm-dok{padding:4px 16px 20px}
  .kvm-inn{padding-left:0}
}
/* Mørk modus: tabellene (kvsok-dt) har harde lyse farger fra før */
html[data-theme="dark"] .kvm-inn .kvsok-dtw{background:var(--bg-page,#0d1117);border-color:var(--border-soft,#30363d)}
html[data-theme="dark"] .kvm-inn .kvsok-dtc{background:var(--bg-white,#1c2128);border-color:var(--border-soft,#30363d);color:var(--text-muted,#9aa6b2)}
html[data-theme="dark"] .kvm-inn .kvsok-dt th{background:#1e3a5f;color:#e8eaed;border-color:#30363d}
html[data-theme="dark"] .kvm-inn .kvsok-dt td{border-color:#30363d;color:#e8eaed}
html[data-theme="dark"] .kvm-inn .kvsok-dt tr:hover td{background:#161b22}
html[data-theme="dark"] .kvm-inn .kvsok-r2card{background:var(--bg-page,#0d1117);border-color:var(--border-soft,#30363d);color:var(--text-primary,#e8eaed)}
html[data-theme="dark"] .kvm-inn .kvsok-mangel{background:#2a1f12;border-color:#5a3d1e;color:var(--text-primary,#e8eaed)}

/* Innstillinger → Knapper over notatet (15.10.2026) */
/* Nedtrekkene i innstillingsradene arvet «select { width: 100% }» og skjøv teksten til 0 bredde (Min profil → Undersøkelsesmal, 15.10.2026): width: auto på .fk-takst-select over. */
.fk-takst-hint { margin: 0 0 8px; font-size: .85rem; color: var(--text-muted, #757575); line-height: 1.45; }
.fk-knapp-row { padding-top: 8px; padding-bottom: 8px; }