/* ============================================
   COLOR VARIABLES - Theme System
   ============================================ */

/* Dark Theme (Default) — maps shared --sky-* (polarnatt.css) → app --color-* */
:root {
  color-scheme: dark;
  /* Theme identifier */
  --theme-mode: dark;

  /* Dark Theme - Base Colors (from @skyplanner/theme) */
  --color-bg-primary: var(--sky-bg-primary);
  --color-bg-secondary: var(--sky-bg-secondary);
  --color-bg-tertiary: var(--sky-bg-tertiary);
  --color-bg-elevated: var(--sky-bg-elevated);
  --color-bg-hover: var(--sky-bg-hover);
  --color-bg-card: var(--sky-bg-secondary);
  --color-bg-input: var(--sky-bg-tertiary);

  /* Accent Colors (from @skyplanner/theme) */
  --color-accent: var(--sky-accent);
  --color-accent-hover: var(--sky-accent-hover);
  --color-accent-muted: rgba(94, 129, 172, 0.15);
  --color-accent-glow: rgba(94, 129, 172, 0.3);

  /* Border Colors (from @skyplanner/theme) */
  --color-border: var(--sky-border);
  --color-border-light: var(--sky-border-light);
  --color-border-focus: var(--sky-accent);

  /* Text Colors (from @skyplanner/theme) */
  --color-text-primary: var(--sky-text-primary);
  --color-text-secondary: var(--sky-text-secondary);
  --color-text-muted: #8c9bb0; /* WCAG AA: --sky-text-muted (#5E7088) ga ~3.3-3.6:1 på mørke flater (sidebar/nav) */
  --color-text-accent: var(--sky-accent);
  --color-text-inverse: var(--sky-bg-primary);

  /* Status Colors - distinct from category colors (El=orange, Brann=red) */
  --color-status-overdue: #DC2626;      /* Rød - forfalt */
  --color-status-soon: #FFC107;         /* Amber/gold - innen 30 dager (bedre synlighet) */
  --color-status-ok: #42A5F5;           /* Lyseblå - 31-90 dager (skiller seg fra grønn) */
  --color-status-good: #4CAF50;         /* Grønn - over 90 dager */
  --color-status-unknown: #78909C;      /* Blågrå - ukjent (litt varmere enn ren grå) */

  /* Lifecycle Status Colors */
  --color-status-visited: #9E9E9E;      /* Grå - nylig besøkt (dimmet) */
  --color-status-inquiry: #AB47BC;      /* Lilla - forespørsel sendt */
  --color-status-confirmed-a: #EF5350;  /* Rød - oppdrag type A bekreftet */
  --color-status-confirmed-b: #66BB6A;  /* Grønn - oppdrag type B bekreftet */
  --color-status-this-week: #FF9800;    /* Oransje - denne uken */
  --color-status-next-month: #7E57C2;   /* Lilla - neste måned */

  /* Legacy aliases */
  --color-overdue: var(--color-status-overdue);
  --color-warning: var(--color-status-soon);
  --color-ok: var(--color-status-ok);
  --color-good: var(--color-status-good);
  --color-unknown: var(--color-status-unknown);

  /* Shadows for dark theme */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(94, 129, 172, 0.2);

  /* Scrollbar (from @skyplanner/theme) */
  --scrollbar-bg: var(--sky-bg-secondary);
  --scrollbar-thumb: var(--sky-border);
  --scrollbar-thumb-hover: var(--sky-border-light);

  /* Font Sizes (rem for WCAG 1.4.4 - respects browser font size setting) */
  --font-size-xs: 0.6875rem;  /* 11px */
  --font-size-sm: 0.8125rem;  /* 13px */
  --font-size-base: 0.875rem; /* 14px */
  --font-size-lg: 1rem;       /* 16px */
  --font-size-xl: 1.125rem;   /* 18px */
  --font-size-2xl: 1.375rem;  /* 22px */

  /* Aliases for --color-primary (referenced 128+ times in CSS) */
  --color-primary: var(--sky-accent);
  --color-primary-hover: var(--sky-accent-hover);
  --primary-color: var(--sky-accent);

  /* Deprecated - keeping for backwards compatibility */
  --color-dark-gray: var(--sky-bg-secondary);
  --color-charcoal: var(--sky-bg-primary);
  --color-orange: var(--sky-accent);
  --color-orange-hover: var(--sky-accent-hover);
  --color-light-gray: var(--sky-bg-tertiary);
  --color-medium-gray: var(--sky-text-secondary);
  --color-border-gray: var(--sky-border);
  --color-bg-gray: var(--sky-bg-secondary);
  --color-light-orange: rgba(94, 129, 172, 0.1);
  --color-text-light: var(--sky-text-primary);

  /* Legacy short aliases (used 80+ times in calendar, weekplan, etc.) */
  --text-primary: var(--sky-text-primary);
  --text-secondary: var(--sky-text-secondary);
  --text-tertiary: #8c9bb0;
  --bg-primary: var(--sky-bg-primary);
  --bg-secondary: var(--sky-bg-secondary);
  --bg-tertiary: var(--sky-bg-tertiary);
  --border-color: var(--sky-border);
  --color-surface: var(--sky-bg-secondary);
  --color-bg: var(--sky-bg-primary);
  --card-bg: var(--sky-bg-secondary);
  --color-text: var(--sky-text-primary);
  --color-background: var(--sky-bg-primary);
}

/* ============================================
   LIGHT THEME
   ============================================ */

[data-theme="light"] {
  --theme-mode: light;

  /* Light Theme - Base Colors */
  --color-bg-primary: #f8fafc;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #e2e8f0;
  --color-bg-card: #ffffff;
  --color-bg-input: #ffffff;

  /* Border Colors */
  --color-border: #e2e8f0;
  --color-border-light: #cbd5e1;

  /* Text Colors (WCAG AA: muted darkened — #64748b failed ~4.3:1 on tinted/hover surfaces) */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #566072;
  --color-text-inverse: #ffffff;

  /* Accent — darkened for LIGHT mode so accent TEXT (links, labels) and accent FILLS
     (white-on-accent buttons) both reach WCAG AA. #5E81AC gives only 4.0:1; the palette's
     own #3D5A7E (--sky-accent-deep) gives 7.1:1. Fixes ~191 var(--color-accent)/
     var(--color-primary) text usages + all accent buttons at the root. */
  --color-accent: #3D5A7E;
  --color-accent-hover: #2f4d70;
  --color-text-accent: #3D5A7E;
  --color-border-focus: #3D5A7E;
  --color-primary: #3D5A7E;
  --color-primary-hover: #2f4d70;
  --primary-color: #3D5A7E;

  /* Shadows (softer for light theme) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 20px rgba(94, 129, 172, 0.15);

  /* Scrollbar */
  --scrollbar-bg: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  /* Deprecated overrides for backwards compatibility */
  --color-dark-gray: #f1f5f9;
  --color-charcoal: #f8fafc;
  --color-light-gray: #f1f5f9;
  --color-medium-gray: #566072;
  --color-border-gray: #e2e8f0;
  --color-bg-gray: #ffffff;
  --color-text-light: #0f172a;

  /* Legacy short aliases */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #566072;
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --border-color: #e2e8f0;
  --color-surface: #ffffff;
  --color-bg: #f8fafc;
  --card-bg: #ffffff;
  --color-text: #0f172a;
  --color-background: #f8fafc;
}

/* ============================================
   GLOBAL STATUS COLOR UTILITIES
   Use these classes for consistent status colors
   ============================================ */

/* Text colors */
.text-status-overdue { color: var(--color-status-overdue) !important; }
.text-status-soon { color: var(--color-status-soon) !important; }
.text-status-ok { color: var(--color-status-ok) !important; }
.text-status-good { color: var(--color-status-good) !important; }
.text-status-unknown { color: var(--color-status-unknown) !important; }

/* Background colors with appropriate text */
.bg-status-overdue { background: var(--color-status-overdue) !important; color: #fff !important; }
.bg-status-soon { background: var(--color-status-soon) !important; color: #000 !important; }
.bg-status-ok { background: var(--color-status-ok) !important; color: #fff !important; }
.bg-status-good { background: var(--color-status-good) !important; color: #fff !important; }
.bg-status-unknown { background: var(--color-status-unknown) !important; color: #fff !important; }

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  background: var(--color-bg-primary);
  min-height: 100vh;
  color: var(--color-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force font inheritance on form elements (browsers don't inherit by default) */
input, select, textarea, button {
  font-family: inherit;
}

a {
  color: var(--color-orange);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-orange-hover);
  text-decoration: underline;
}

/* ============================================
   LAYOUT - MAIN CONTAINER
   ============================================ */

.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  background: transparent; /* Allow map to show through */
  pointer-events: none; /* Let clicks pass through to map */
}

.container > *:not(.map-container) {
  pointer-events: auto; /* But UI elements are clickable (except map-container which needs pass-through) */
}

.content-panel-overlay {
  pointer-events: auto;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
  width: 280px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(94, 129, 172, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(136, 100, 200, 0.10) 0%, transparent 60%),
    var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
  border-right: 1px solid var(--color-border);
  border-left: none;
  overflow-y: auto;
  order: -1;
  flex-shrink: 0;
}

/* Quick Stats i bunnen av sidebar */
.sidebar-quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 20px;
  background: var(--color-bg-tertiary);
  border-top: 1px solid var(--color-border);
}

.quick-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.quick-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.quick-stat-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

.quick-stat-warning .quick-stat-value {
  color: #ef4444;
}

.quick-stat-upcoming .quick-stat-value {
  color: #f59e0b;
}

.quick-stat-ok .quick-stat-value {
  color: #22c55e;
}

.sidebar-footer {
  padding: 12px 16px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
}

.sidebar-footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar-footer a:hover {
  color: var(--color-orange);
}

/* Patch Notes link in sidebar footer */
.patch-notes-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  position: relative;
  margin-bottom: 4px;
}

.patch-notes-link:hover {
  color: var(--color-orange);
  background: rgba(255, 152, 0, 0.08);
}

.patch-notes-badge {
  width: 8px;
  height: 8px;
  background: var(--color-orange);
  border-radius: 50%;
  display: inline-block;
  animation: patchNotesPulse 2s ease-in-out infinite;
}

@keyframes patchNotesPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Patch Notes Modal */
.patch-notes-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100001;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.patch-notes-modal {
  background: var(--color-bg-secondary);
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border);
}

.patch-notes-modal-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.patch-notes-modal-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.patch-notes-modal-header h2 i {
  color: var(--color-orange);
  margin-right: 8px;
}

.patch-notes-close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s;
}

.patch-notes-close:hover {
  color: var(--color-text-primary);
}

.patch-notes-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.patch-notes-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  text-align: center;
}

.patch-notes-close-btn {
  min-height: 44px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: var(--color-orange);
  color: #fff;
  transition: background 0.2s;
}

.patch-notes-close-btn:hover {
  background: var(--color-orange-hover, #e68900);
}

/* Release entry */
.patch-note-release {
  margin-bottom: 24px;
}

.patch-note-release:last-child {
  margin-bottom: 0;
}

.patch-note-release-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.patch-note-version {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-primary);
}

.patch-note-date {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.patch-note-title {
  font-size: 16px;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
  font-weight: 600;
}

.patch-note-summary {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

/* Items list */
.patch-note-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.patch-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.patch-note-item:last-child {
  border-bottom: none;
}

.patch-note-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  margin-top: 2px;
  flex-shrink: 0;
}

.patch-note-text {
  color: var(--color-text-primary);
  line-height: 1.5;
}

.patch-note-pro-badge {
  font-size: 10px;
  background: var(--color-orange);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: 600;
  vertical-align: middle;
}

.patch-note-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.patch-note-description {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.patch-note-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--color-orange);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  transition: opacity 0.2s;
}

.patch-note-tab-link:hover {
  opacity: 0.7;
}

.patch-note-tab-link i {
  font-size: 10px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .patch-notes-overlay {
    padding: 10px;
  }

  .patch-notes-modal {
    max-height: 90vh;
    border-radius: 12px;
  }

  .patch-notes-modal-header {
    padding: 16px;
  }

  .patch-notes-modal-header h2 {
    font-size: 18px;
  }

  .patch-notes-modal-body {
    padding: 16px;
  }
}

/* ============================================
   SYSTEM MESSAGE POPUP - Large modal for broadcast
   ============================================ */

.system-message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100001;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.system-message-modal {
  background: var(--color-bg-secondary);
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  padding: 40px 32px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border);
  text-align: center;
  animation: systemMessageIn 0.3s ease-out;
}

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

.system-message-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 22px;
  color: #6366f1;
}

.system-message-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 16px;
}

.system-message-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  white-space: pre-wrap;
  word-break: break-word;
}

.system-message-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.system-message-btn:hover {
  background: #4f46e5;
}

@media (max-width: 768px) {
  .system-message-overlay {
    padding: 16px;
  }
  .system-message-modal {
    padding: 32px 20px 24px;
    border-radius: 12px;
  }
  .system-message-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
  .system-message-title {
    font-size: 18px;
  }
}

/* ============================================
   CONTENT PANEL - Side panel for tab content
   ============================================ */

.content-panel {
  width: 320px;
  height: 100vh;
  max-height: 100vh;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(94, 129, 172, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(136, 100, 200, 0.10) 0%, transparent 60%),
    var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  z-index: 999;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* Resize handle — draggable edge on right side of content panel */
.content-panel-resize {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 1001;
  background: transparent;
  transition: background 0.2s;
}

.content-panel-resize:hover,
.content-panel-resize.dragging {
  background: var(--color-primary);
}


/* Prevent width transition during drag (avoid lag) */
.content-panel.resizing {
  transition: none;
  user-select: none;
}

.content-panel.closed {
  display: none !important;
}

/* Animation states for login/logout */
.content-panel.slide-out {
  transform: translateX(-100%);
  opacity: 0;
}

.content-panel.slide-in {
  transform: translateX(0);
  opacity: 1;
}

.content-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

.content-panel-header .panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.content-panel-close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.content-panel .tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.sidebar-header {
  padding: 16px 16px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border-bottom: 3px solid var(--color-orange);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.header-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.header-text {
  flex: 1;
  text-align: left;
}

.sidebar-header h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 0 0 6px 0;
  color: var(--color-text-primary);
}
.beta-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: #4A6D8C; /* fast accent-mørk: hvit tekst >=4.5:1 i begge moduser (var(--color-primary) #5E81AC ga 4.02) */
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1.3;
}

.company-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
}

.year {
  font-size: var(--font-size-sm);
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* User bar - logged in user info */
.user-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 16px;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  gap: 16px;
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

/* WebSocket connection indicator */
.ws-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}
.ws-connected {
  background-color: #22c55e;
}
.ws-disconnected {
  background-color: #ef4444;
}

/* Presence badge on map markers — shows initials of user working on customer */
.presence-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  /* background-color settes dynamisk via JS (getPresenceColor) per bruker */
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  padding: 0 3px;
  pointer-events: none;
  z-index: 10;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  letter-spacing: 0.5px;
}

/* Week plan badge on individual markers - large and prominent */
.wp-plan-badge {
  position: absolute;
  top: -10px;
  left: -12px;
  min-width: 28px;
  height: 28px;
  border-radius: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  padding: 0 5px;
  pointer-events: none;
  z-index: 11;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  letter-spacing: -0.3px;
}

/* Plan badge on cluster icons (zoomed out) */
.cluster-plan-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 5;
}

/* Employee filter chips in weekly plan */
.wp-team-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.wp-team-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  color: #fff;
}
.wp-team-chip:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}
.wp-team-chip.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--color-primary), 0 2px 8px rgba(0,0,0,0.3);
}
.wp-team-chip .chip-count {
  background: rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
}
.wp-team-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-right: 4px;
}

/* Team Zones toggle button */
.wp-team-zone-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--bg-tertiary, #555);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 11px;
  margin-left: 6px;
  transition: all 0.15s;
  border: 2px solid transparent;
  vertical-align: middle;
}
.wp-team-zone-toggle:hover { color: #fff; filter: brightness(1.2); }
.wp-team-zone-toggle.active {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}

/* Team Zones legend overlay */
.team-zones-legend {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: rgba(20, 20, 40, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  min-width: 160px;
  pointer-events: auto;
}
.team-zones-legend-handle {
  text-align: center;
  cursor: grab;
  color: rgba(255,255,255,0.3);
  font-size: 10px;
  margin: -4px 0 6px;
  user-select: none;
}
.team-zones-legend-handle:active {
  cursor: grabbing;
  color: rgba(255,255,255,0.5);
}
.team-zones-legend-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
}
.team-zones-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.team-zones-legend-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 6px var(--swatch-glow, rgba(255,255,255,0.1));
}
.team-zones-legend-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.team-zones-legend-count {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}

/* ================================================================
   Tekniker-soner (CoverageAreaManager) — premium visualisering
   ================================================================ */

/* Tekniker-puck-wrapper: sentrum av sone, inkluderer puck + label under */
.tz-puck-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  outline: none;
  transform-origin: center top;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tz-puck-wrap:hover,
.tz-puck-wrap:focus-visible {
  transform: scale(1.06);
}
.tz-puck-wrap:focus-visible {
  outline: 2px solid var(--tz-puck-color, #2563eb);
  outline-offset: 6px;
  border-radius: 12px;
}
.tz-puck-wrap.tz-puck-dimmed {
  opacity: 0.22;
  transform: scale(0.85);
}

/* Selve puck-sirkel — med radial gradient + pulse-ring */
.tz-puck {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 32%,
      color-mix(in srgb, var(--tz-puck-color, #2563eb) 70%, #fff) 0%,
      var(--tz-puck-color, #2563eb) 55%,
      color-mix(in srgb, var(--tz-puck-color, #2563eb) 80%, #000) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tz-puck-color, #2563eb) 30%, transparent),
    0 0 32px color-mix(in srgb, var(--tz-puck-color, #2563eb) 70%, transparent),
    0 8px 22px rgba(0,0,0,0.6),
    inset 0 -3px 8px rgba(0,0,0,0.18),
    inset 0 2px 4px rgba(255,255,255,0.25);
  position: relative;
}
/* Dobbel pulse-ring rundt puck — kontinuerlig "lever"-følelse */
.tz-puck::before,
.tz-puck::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tz-puck-color, #2563eb) 60%, transparent);
  pointer-events: none;
  animation: tz-pulse-ring 3.2s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
.tz-puck::after {
  animation-delay: 1.6s;
}
@keyframes tz-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.85; border-width: 2px; }
  70%  { transform: scale(1.7);  opacity: 0;    border-width: 1px; }
  100% { transform: scale(1.7);  opacity: 0;    border-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-puck::before, .tz-puck::after { animation: none; opacity: 0; }
}
.tz-puck-wrap:hover .tz-puck,
.tz-puck-wrap:focus-visible .tz-puck {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--tz-puck-color, #2563eb) 40%, transparent),
    0 0 36px color-mix(in srgb, var(--tz-puck-color, #2563eb) 80%, transparent),
    0 8px 22px rgba(0,0,0,0.6);
}
.tz-puck-initials {
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Navn-label under puck — synlig på alle zoom-nivåer */
.tz-puck-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(15, 18, 28, 0.88);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--tz-puck-color, #2563eb) 35%, rgba(255,255,255,0.08));
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.2;
  max-width: 200px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  pointer-events: none;
}
.tz-puck-label-name {
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.tz-puck-label-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--tz-puck-color, #2563eb);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Bunn-dock med alle tekniker-pucks (desktop) */
.tz-dock {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 880;
  pointer-events: none; /* La klikk gå gjennom mellomrom */
}
.tz-dock-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(15, 18, 28, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  box-shadow:
    0 12px 38px rgba(0,0,0,0.45),
    0 2px 8px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: auto;
}

/* Dock-puck — kompakt versjon av sone-puck */
.tz-dock-puck {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tz-puck-color, #2563eb);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.18);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  outline: none;
  padding: 0;
  box-shadow:
    0 0 0 0 transparent,
    0 4px 12px rgba(0,0,0,0.4);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tz-dock-puck:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tz-puck-color, #2563eb) 35%, transparent),
    0 8px 22px rgba(0,0,0,0.5);
}
.tz-dock-puck:focus-visible {
  outline: 2px solid var(--tz-puck-color, #2563eb);
  outline-offset: 3px;
}
.tz-dock-puck.active {
  transform: translateY(-4px) scale(1.1);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tz-puck-color, #2563eb) 50%, transparent),
    0 0 22px color-mix(in srgb, var(--tz-puck-color, #2563eb) 70%, transparent),
    0 10px 24px rgba(0,0,0,0.55);
}
.tz-dock-puck.inactive {
  opacity: 0.4;
  transform: scale(0.92);
}
.tz-dock-initials {
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.tz-dock-count {
  position: absolute;
  bottom: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(15, 18, 28, 0.92);
  color: rgba(255,255,255,0.92);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  pointer-events: none;
}

/* Mobile field zone-chip + bottom-sheet hooks */
.mf-zone-chip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 64px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(15, 18, 28, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  z-index: 850;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  max-width: calc(100vw - 32px);
}
.mf-zone-chip .tz-dock-puck {
  width: 32px;
  height: 32px;
  font-size: 11px;
  border-width: 1.5px;
  box-shadow: none;
}
.mf-zone-chip .tz-dock-puck:hover {
  transform: none;
  box-shadow: none;
}
.mf-zone-chip-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}
.mf-zone-chip-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.mf-zone-chip-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}

/* Subtil pulse-animasjon på felt-tekniker sin egen sone */
@keyframes tz-zone-pulse {
  0%, 100% { fill-opacity: 0.20; }
  50%      { fill-opacity: 0.30; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-puck, .tz-dock-puck, .mf-zone-chip { transition: none; }
}

/* Mobile dock posisjonering — løft over bottom-tab-bar */
@media (max-width: 768px) {
  .tz-dock { display: none; } /* Bottom dock skjules på mobil; chip-header brukes i stedet */
}

/* ==================== Sone-popover (glassmorfisk) ==================== */
.tz-popover {
  position: fixed;
  z-index: 1100;
  background: linear-gradient(180deg,
    rgba(20, 24, 36, 0.94) 0%,
    rgba(14, 17, 27, 0.92) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--tz-puck-color, #2563eb) 30%, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 16px;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.55),
    0 8px 22px rgba(0,0,0,0.35),
    0 0 0 1px color-mix(in srgb, var(--tz-puck-color, #2563eb) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 220ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  color: #fff;
  pointer-events: auto;
}
.tz-popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tz-popover-below { transform-origin: top center; }
.tz-popover:not(.tz-popover-below) { transform-origin: bottom center; }

.tz-popover-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tz-popover-puck {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%,
    color-mix(in srgb, var(--tz-puck-color, #2563eb) 75%, #fff),
    var(--tz-puck-color, #2563eb) 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--tz-puck-color, #2563eb) 30%, transparent),
    0 4px 14px rgba(0,0,0,0.4);
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tz-popover-title {
  flex: 1;
  min-width: 0;
}
.tz-popover-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tz-popover-zone {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}
.tz-popover-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tz-popover-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.tz-popover-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.tz-stat {
  text-align: center;
  padding: 10px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  transition: background 200ms ease, transform 200ms ease;
}
.tz-stat:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}
.tz-stat-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}
.tz-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  font-weight: 600;
}
.tz-stat-overdue .tz-stat-value { color: #f87171; }
.tz-stat-soon .tz-stat-value    { color: #fbbf24; }
.tz-stat-ok .tz-stat-value      { color: #4ade80; }

.tz-popover-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tz-popover-meta i {
  margin-right: 6px;
  color: color-mix(in srgb, var(--tz-puck-color, #2563eb) 80%, #fff);
}

.tz-popover-actions {
  display: flex;
  gap: 6px;
}
.tz-popover-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tz-popover-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.tz-popover-btn-primary {
  background: linear-gradient(135deg,
    var(--tz-puck-color, #2563eb),
    color-mix(in srgb, var(--tz-puck-color, #2563eb) 75%, #000));
  border-color: color-mix(in srgb, var(--tz-puck-color, #2563eb) 60%, transparent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tz-puck-color, #2563eb) 40%, transparent);
}
.tz-popover-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tz-puck-color, #2563eb) 55%, transparent);
}

/* ==================== Admin: tekniker-soner ==================== */

.technician-zones-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.zone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: background 180ms ease, border-color 180ms ease;
}
.zone-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.zone-row-puck {
  flex-shrink: 0;
}
.zone-row-text {
  flex: 1;
  min-width: 0;
}
.zone-row-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary, #fff);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zone-row-meta {
  font-size: 12px;
  color: var(--color-text-secondary, rgba(255,255,255,0.65));
}
.zone-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.empty-state {
  text-align: center;
  padding: 32px 12px;
  color: var(--color-text-secondary, rgba(255,255,255,0.6));
}
.empty-state i {
  font-size: 32px;
  opacity: 0.4;
  margin-bottom: 8px;
}
.muted-text {
  color: var(--color-text-muted, rgba(255,255,255,0.5));
}

/* Admin zone modal */
.admin-zone-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tz-fade-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tz-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.admin-zone-modal {
  background: var(--color-bg-primary, #1a1d28);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  width: 92%;
  max-width: 540px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  animation: tz-modal-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes tz-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.admin-zone-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-zone-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary, #fff);
}
.admin-zone-modal-body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-zone-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary, rgba(255,255,255,0.7));
  font-weight: 500;
}

/* Postnummer-input + chips */
.azm-pn-input-wrap {
  position: relative;
}
.azm-pn-suggest {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  background: var(--color-bg-tertiary, #232634);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  display: none;
}
.azm-pn-suggest li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-primary, #fff);
  transition: background 120ms ease;
}
.azm-pn-suggest li:hover,
.azm-pn-suggest li:focus-visible {
  background: rgba(255,255,255,0.08);
}
.azm-pn-suggest-empty {
  color: var(--color-text-muted, rgba(255,255,255,0.5));
  cursor: default !important;
}
.azm-pn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 36px;
  padding: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 8px;
}
.azm-pn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(37, 99, 235, 0.18);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(37, 99, 235, 0.4);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.azm-pn-chip:hover {
  background: rgba(220, 38, 38, 0.22);
  border-color: rgba(220, 38, 38, 0.55);
  color: #fff;
}
.azm-pn-chip i {
  font-size: 10px;
  opacity: 0.7;
}

.user-bar .user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.user-bar .user-bar-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-bar .user-bar-top .user-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-bar .user-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Subscription Timer */
.subscription-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(94, 129, 172, 0.15), rgba(74, 109, 140, 0.1));
  border: 1px solid rgba(94, 129, 172, 0.3);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #5E81AC;
  white-space: nowrap;
  animation: timerPulse 2s ease-in-out infinite;
}

.subscription-timer i {
  font-size: var(--font-size-xs);
}

.subscription-timer.warning {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.subscription-timer.warning i {
  animation: shake 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* Subscription Timer Banner - Prominent sidebar placement */
.subscription-timer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 12px 12px 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(94, 129, 172, 0.2), rgba(74, 109, 140, 0.15));
  border: 1px solid rgba(94, 129, 172, 0.4);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #5E81AC;
}

.subscription-timer-banner .subscription-timer-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.subscription-timer-banner i {
  font-size: var(--font-size-base);
  animation: timerPulse 2s ease-in-out infinite;
}

.subscription-timer-banner .subscription-timer-cta {
  padding: 4px 10px;
  background: #5E81AC;
  color: white;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.subscription-timer-banner .subscription-timer-cta:hover {
  background: var(--color-accent-hover);
}

.subscription-timer-banner.warning {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15));
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.subscription-timer-banner.warning i {
  animation: shake 0.5s ease-in-out infinite;
}

.subscription-timer-banner.warning .subscription-timer-cta {
  background: #ef4444;
}

.subscription-timer-banner.warning .subscription-timer-cta:hover {
  background: #dc2626;
}

.user-bar .dashboard-link-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
  justify-content: center;
}

.user-bar .dashboard-link-btn:hover {
  background: var(--color-accent-subtle, rgba(59, 130, 246, 0.1));
  border-color: var(--color-accent, #3B82F6);
  color: var(--color-accent, #3B82F6);
}

/* Sperret dashboard-knapp: tidlig-tilgang-kunder uten web-tilgang ennå (feature
   'web_dashboard_sperret'). Lenken nøytraliseres i JS (href fjernes) — her er kun
   den visuelle «gråe ut»-tilstanden, med nøytralisert hover. */
.user-bar .dashboard-link-btn.locked,
.user-bar .dashboard-link-btn.locked:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.user-bar .nightmode-btn,
.user-bar .logout-btn,
.user-bar .web-link-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.user-bar .nightmode-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(94, 129, 172, 0.1);
}

/* Web link button - more prominent styling */
.user-bar .web-link-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, #4A6D8C 100%);
  border: none;
  color: white;
}

.user-bar .web-link-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(94, 129, 172, 0.4);
  background: linear-gradient(135deg, #7A9BBF 0%, var(--color-primary) 100%);
  color: white;
}

.user-bar .nightmode-btn.satellite-active {
  border-color: var(--color-success);
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.1);
}

.user-bar .logout-btn {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171; /* WCAG AA på mørk reddish bg — #ef4444 ga 4.07:1 */
  flex: 1;
  justify-content: center;
}

.user-bar .logout-btn:hover {
  border-color: #ef4444;
  color: #fff;
  background: #ef4444;
}

/* Theme Toggle Button */
.user-bar .theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.user-bar .theme-toggle-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-muted);
}

.user-bar .theme-toggle-btn i {
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
  font-size: 14px;
}

/* Dark mode (default): show moon, hide sun */
.user-bar .theme-toggle-btn .theme-icon-light {
  transform: translateY(24px);
  opacity: 0;
}

.user-bar .theme-toggle-btn .theme-icon-dark {
  transform: translateY(0);
  opacity: 1;
}

/* Light mode: show sun, hide moon */
[data-theme="light"] .user-bar .theme-toggle-btn .theme-icon-light {
  transform: translateY(0);
  opacity: 1;
}

[data-theme="light"] .user-bar .theme-toggle-btn .theme-icon-dark {
  transform: translateY(-24px);
  opacity: 0;
}

.sidebar.collapsed .user-bar {
  justify-content: center;
  padding: 10px;
}

.sidebar.collapsed .user-bar .user-bar-top .user-name {
  display: none;
}

.sidebar.collapsed .user-bar .logout-btn span,
.sidebar.collapsed .user-bar .dashboard-link-btn span {
  display: none;
}

.sidebar.collapsed .user-bar .user-bar-actions {
  flex-direction: column;
}

.sidebar.collapsed .user-bar .dashboard-link-btn,
.sidebar.collapsed .user-bar .logout-btn {
  padding: 8px;
}

.sidebar-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.sidebar-toggle i {
  transition: transform 0.3s ease;
}

/* Collapsed Sidebar State */
.sidebar.collapsed {
  width: 70px;
}

.sidebar.collapsed .tab-item span,
.sidebar.collapsed .header-content {
  display: none;
}

.sidebar.collapsed .tab-item {
  padding: 14px 16px;
  justify-content: center;
}

.sidebar.collapsed .tab-item i {
  font-size: 20px;
}

.sidebar.collapsed .sidebar-toggle i {
  transform: rotate(180deg);
}

.sidebar.collapsed .tab-navigation {
  flex-direction: column;
}

.sidebar.collapsed .search-box,
.sidebar.collapsed .omrade-filter,
.sidebar.collapsed .selected-info,
.sidebar.collapsed .actions,
.sidebar.collapsed .warning-actions,
.sidebar.collapsed .tab-header,
.sidebar.collapsed .customer-list,
.sidebar.collapsed .calendar-container,
.sidebar.collapsed .planner-container,
.sidebar.collapsed .warnings-container {
  display: none;
}

.sidebar.collapsed .tab-content {
  display: none;
}

/* Adjust map to fill space when sidebar is collapsed */
.container.sidebar-collapsed .map-container {
  flex: 1;
}

/* ============================================
   TAB NAVIGATION - VERTICAL TABS
   ============================================ */

.tab-navigation {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  flex: 1;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.tab-item i {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.tab-item > span:first-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tab-item:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.tab-item.active {
  background: var(--color-accent-muted);
  border-left-color: var(--color-accent);
  color: #88a9d0; /* WCAG AA: lysere accent-tekst — #5E81AC ga 3.79:1 på mørk elevated bg */
}

.tab-item.active i {
  color: #88a9d0;
}

/* ============================================
   TAB CONTENT
   ============================================ */

.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: transparent;
  min-height: 0; /* Viktig for flexbox scroll */
}

.tab-pane {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Viktig for flexbox scroll */
}

.tab-pane.active {
  display: flex;
}

/* Dynamisk høyde for kompakte faner */
.content-panel.compact-mode {
  height: fit-content !important;
  max-height: fit-content !important;
  align-self: flex-start !important;
}

.content-panel.compact-mode .tab-content {
  flex: 0 0 auto !important;
  height: auto !important;
  overflow-y: visible !important;
}

/* Faner - lar innholdet utvide seg så .tab-content kan scrolle */
#tab-avhuking,
#tab-statistikk,
#tab-routes,
#tab-calendar,
#tab-customers,
#tab-planner {
  display: block;
}

#tab-avhuking:not(.active),
#tab-statistikk:not(.active),
#tab-routes:not(.active),
#tab-calendar:not(.active),
#tab-customers:not(.active),
#tab-planner:not(.active) {
  display: none !important;
}

/* Disse fanene trenger fast høyde for å kunne scrolle */
#tab-overdue,
#tab-warnings,
#tab-missingdata,
#tab-dashboard {
  height: 100% !important;
  min-height: 0;
  overflow-y: auto;
  display: flex !important;
  flex-direction: column !important;
}

#tab-overdue:not(.active),
#tab-warnings:not(.active),
#tab-missingdata:not(.active),
#tab-dashboard:not(.active) {
  display: none !important;
}

#tab-avhuking.active,
#tab-statistikk.active,
#tab-routes.active,
#tab-calendar.active,
#tab-customers.active,
#tab-planner.active {
  display: block !important;
}

#tab-missingdata.active,
#tab-overdue.active,
#tab-warnings.active,
#tab-dashboard.active,
#tab-arbeid.active {
  display: flex !important;
}

#tab-arbeid {
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#tab-arbeid:not(.active) {
  display: none !important;
}

.tab-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.tab-header .tab-description {
  flex-basis: 100%;
}

.tab-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.tab-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Export dropdown */
.export-dropdown-wrapper {
  position: relative;
}

.export-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px;
  z-index: 100;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.export-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}

.export-option:hover {
  background: var(--color-bg-hover);
}

.export-option i {
  width: 16px;
  text-align: center;
  color: var(--color-text-secondary);
}

/* ============================================
   CUSTOMER ADMIN TAB
   ============================================ */

.customer-admin {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  overflow: hidden;
}

.customer-search {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.search-input-wrapper {
  flex: 1;
  position: relative;
}

.search-input-wrapper i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}

.search-input-wrapper input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.search-input-wrapper input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.search-input-wrapper input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Kategori checkbox multi-select in customer form */
.kategori-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kategori-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: var(--color-bg-tertiary);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.kategori-checkbox-label:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-text-muted, #666);
}

.kategori-checkbox-label input[type="checkbox"] {
  display: none;
}

.kategori-checkbox-label i {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.kategori-checkbox-label:has(input:checked) {
  background: var(--color-accent-subtle, rgba(59, 130, 246, 0.12));
  border-color: var(--color-accent, #3B82F6);
  color: var(--color-accent, #3B82F6);
}

.kategori-checkbox-label:has(input:checked) i {
  transform: scale(1.15);
}

/* Email toggle row */
.email-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Estimert tid presets */
.estimert-tid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.estimert-tid-presets {
  display: flex;
  gap: 4px;
}

.tid-preset {
  flex: 1;
  padding: 5px 2px;
  font-size: 11px;
  font-weight: 500;
  background: var(--color-bg-tertiary);
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tid-preset:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-text-muted, #666);
}

.tid-preset.active {
  background: var(--color-accent-subtle, rgba(59, 130, 246, 0.12));
  border-color: var(--color-accent, #3B82F6);
  color: var(--color-accent, #3B82F6);
}

.estimert-tid-inputs {
  display: flex;
  gap: 8px;
}

.tid-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.tid-input-group input {
  width: 100%;
  min-width: 0;
}

.tid-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.kategori-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.kategori-tab {
  flex: 1;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.kategori-tab:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.kategori-tab.active {
  background: var(--color-accent);
  color: white;
}

/* Dynamic service type colors - set via inline style or data attribute */
.kategori-tab.active[style*="--service-color"] {
  background: var(--service-color);
}

/* Legacy selectors for backward compatibility */
.kategori-tab[data-kategori="El-Kontroll"].active,
.kategori-tab[data-kategori="el-kontroll"].active {
  background: #F59E0B;
}

.kategori-tab[data-kategori="Brannvarsling"].active,
.kategori-tab[data-kategori="brannvarsling"].active {
  background: #EF4444;
}

.kategori-tab[data-kategori="El-Kontroll + Brannvarsling"].active,
.kategori-tab[data-kategori="el-kontroll-brannvarsling"].active {
  background: #8B5CF6;
}

.customer-stats {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
}

.toggle-list-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.toggle-list-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.toggle-list-btn.collapsed i {
  transform: rotate(180deg);
}

.customer-admin-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.customer-admin-list.collapsed {
  max-height: 0 !important;
  overflow: hidden;
  padding: 0 8px;
  opacity: 0;
}

.customer-admin-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--color-bg-tertiary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.customer-admin-item:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-light);
}

.customer-admin-item.no-coords {
  border-left: 2px solid var(--color-warning);
}

.customer-admin-item .customer-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-admin-item .customer-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.customer-admin-item .customer-location {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.customer-admin-item .control-badge {
  font-size: var(--font-size-xs);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.customer-admin-item .control-badge.ok {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.customer-admin-item .control-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.customer-admin-item .control-badge.overdue {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

/* Service info badges (brannsystem, driftstype) */
.customer-admin-item .service-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 4px;
}

.customer-admin-item .type-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.customer-admin-item .system-badge {
  background: rgba(99, 102, 241, 0.15);
  color: #6366F1;
}

.customer-admin-item .drift-badge {
  background: rgba(236, 72, 153, 0.15);
  color: #EC4899;
}

/* Map focus button in customer list */
.customer-admin-item .btn-map-focus {
  flex-shrink: 0;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
}

.customer-admin-item .btn-map-focus:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

/* ============================================
   SEARCH & FILTERS
   ============================================ */

.search-box {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-box input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 15px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  transition: all 0.2s ease;
}

.search-box input::placeholder {
  color: var(--color-text-muted);
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-orange);
  background: var(--color-bg-elevated);
  box-shadow: 0 0 0 3px rgba(94, 129, 172, 0.1);
}

.search-toggle {
  background: var(--color-light-gray);
  border: 1px solid var(--color-border-gray);
  color: var(--color-text-secondary);
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-toggle:hover {
  background: var(--color-bg-gray);
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.search-toggle i {
  transition: transform 0.3s ease;
}

.search-toggle.collapsed i {
  transform: rotate(180deg);
}

.customer-list-container {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg-secondary);
}

.customer-list-container.hidden {
  display: none;
}

/* ============================================
   AREA FILTER
   ============================================ */

.omrade-filter {
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border-gray);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.omrade-filter select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border-gray);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  background: var(--color-bg-gray);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.omrade-filter select:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(94, 129, 172, 0.1);
}

/* ============================================
   SELECTED INFO BANNER
   ============================================ */

.selected-info {
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(94, 129, 172, 0.05) 0%, rgba(94, 129, 172, 0.02) 100%);
  border-bottom: 1px solid var(--color-border-gray);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

#selectedCount {
  color: var(--color-orange);
  font-weight: 700;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border-gray);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.actions .btn i {
  font-size: 14px;
}

.warning-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border-gray);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.warning-actions .filter-group {
  flex: 1;
  min-width: 0;
}

.warning-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Primary Button - Orange */
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Secondary Button - Dark */
.btn-secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-border-light);
  color: var(--color-text-primary);
}

/* Danger Button - Red */
.btn-danger {
  background: var(--color-overdue);
  color: #fff;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.btn-danger:hover:not(:disabled) {
  background: #B91C1C;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

/* Small Button */
.btn-small {
  padding: 10px 16px;
  font-size: var(--font-size-sm);
}

/* ============================================
   CUSTOMER LIST
   ============================================ */

.customer-list {
  padding: 12px 20px;
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.customer-list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 6px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.customer-sort-label {
  font-size: 11px;
  color: var(--color-text-secondary); /* WCAG AA — #9ca3af ga 2.53:1 på hvit i lys modus */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.customer-sort-select {
  flex: 1;
  background: var(--color-bg-tertiary, rgba(255,255,255,0.04));
  color: var(--color-text-primary, #fff);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), background 150ms;
}
.customer-sort-select:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.customer-sort-select:focus {
  outline: none;
  border-color: var(--primary, #10b981);
}

.customer-list-container {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg-secondary);
}

.customer-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-header {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

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

.section-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.section-toggle-icon i {
  font-size: var(--font-size-xs);
  transition: transform 0.2s ease;
  color: var(--color-text-muted);
}

.section-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.section-postnr {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(94, 129, 172, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.section-name {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.area-badge {
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.area-badge.urgent {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.area-badge.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.section-count {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
  max-height: 9999px;
  opacity: 1;
  transition: all 0.3s ease;
  overflow: hidden;
  padding-left: 8px;
}

.section-content.collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.customer-item {
  padding: 8px 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
  margin-bottom: 4px;
}

.customer-item:last-of-type {
  margin-bottom: 0;
}

.customer-item:hover {
  border-color: var(--color-border-light);
  background: var(--color-bg-hover);
}

.customer-item.selected {
  background: var(--color-accent-muted);
  border: 1px solid var(--color-accent);
}

/* Status indicator bar on left */
.customer-status-indicator {
  width: 4px;
  height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--color-text-muted);
}

/* Status classes matching getControlStatus() return values */
.customer-status-indicator.status-overdue {
  background: var(--color-status-overdue);
}

.customer-status-indicator.status-soon {
  background: var(--color-status-soon);
}

.customer-status-indicator.status-ok {
  background: var(--color-status-ok);
}

.customer-status-indicator.status-good {
  background: var(--color-status-good);
}

.customer-status-indicator.status-unknown {
  background: var(--color-status-unknown);
}

.customer-checkbox {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--color-orange);
  flex-shrink: 0;
}

.customer-info {
  flex: 1;
  min-width: 0;
}

.customer-info h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Liten initial-badge ved siden av kundenavnet = ansvarlig tekniker.
   Premium-prinsipp: ikke tekst-blokk, men kompakt fargekodet identitet. */
.customer-ansvarlig-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--color-accent, #3b82f6);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.customer-info p {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Control info on right side */
.customer-control-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  min-width: 70px;
}

.control-date {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Status-based control-date colors */
.control-date.status-overdue {
  color: var(--color-status-overdue);
  font-weight: 600;
}

.control-date.status-soon {
  color: var(--color-status-soon);
  font-weight: 600;
}

.control-date.status-ok {
  color: var(--color-status-ok);
}

.control-date.status-good {
  color: var(--color-status-good);
}

.control-date.status-unknown {
  color: var(--color-status-unknown);
}

.control-days {
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
}

/* Status-based control-days colors */
.control-days.status-overdue {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-status-overdue);
}

.control-days.status-soon {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-status-soon);
}

.control-days.status-ok {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-status-ok);
}

.control-days.status-good {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-status-good);
}

.control-days.status-unknown {
  background: rgba(139, 92, 246, 0.15);
  color: var(--color-status-unknown);
}

.customer-category {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 4px;
  background: linear-gradient(135deg, rgba(94, 129, 172, 0.15) 0%, rgba(94, 129, 172, 0.08) 100%);
  color: var(--color-orange);
  border-left: 2px solid var(--color-orange);
}

.control-status {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.control-status.overdue {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-overdue);
}

.control-status.warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.control-status.ok {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-ok);
}

/* Upcoming controls columns */
.customer-upcoming {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 90px;
  flex-shrink: 0;
  align-items: flex-end;
}

.upcoming-control {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
}

.upcoming-label {
  font-weight: 700;
  color: var(--color-text-secondary);
  min-width: 35px;
  text-align: right;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.upcoming-date {
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 45px;
  text-align: right;
  font-size: var(--font-size-xs);
}

.control-status.good {
  background: rgba(5, 150, 105, 0.1);
  color: var(--color-good);
}

.edit-btn {
  opacity: 0;
  background: var(--color-orange);
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: opacity 0.2s;
  margin-left: auto;
  flex-shrink: 0;
}

.customer-item:hover .edit-btn {
  opacity: 1;
}

/* ============================================
   WARNINGS CONTAINER
   ============================================ */

.warnings-container {
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 180px);
  overflow-y: scroll;
  padding: 12px 20px;
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.warning-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.warning-header {
  padding: 12px 14px;
  background: var(--color-warning);
  color: #fff;
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-radius: 6px 6px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.warning-header.proximity-header {
  background: var(--color-accent);
  text-transform: none;
  letter-spacing: normal;
}

.warning-header .cluster-actions {
  margin-left: auto;
}

.warning-header .btn-group-route,
.warning-header .btn-group-map,
.warning-header .btn-group-weekplan {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.9);
}

.warning-header .btn-group-route:hover,
.warning-header .btn-group-map:hover,
.warning-header .btn-group-weekplan:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}

.warning-item {
  padding: 12px 14px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-top: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}

.warning-item:last-child {
  border-radius: 0 0 6px 6px;
}

.warning-item:hover {
  background: var(--color-bg-hover);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  border-color: var(--color-warning);
}

.warning-customer {
  flex: 1;
}

.warning-customer h4 {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 600;
  margin: 0 0 4px 0;
}

.warning-customer p {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

.warning-date {
  text-align: right;
  margin-left: 12px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.warning-date p {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   OVERDUE (FORFALTE) TAB
   ============================================ */

.tab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-overdue);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.tab-item {
  position: relative;
}

.overdue-count-header {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: 8px;
}

.overdue-filters {
  padding: 12px 20px;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.overdue-filters .filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.overdue-filters label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.overdue-filters select,
.warning-actions select {
  padding: 6px 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.overdue-container {
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 180px);
  overflow-y: scroll;
  padding: 16px 20px;
  background: var(--color-bg-secondary);
}

.overdue-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.overdue-empty i {
  font-size: 48px;
  color: var(--color-success);
  margin-bottom: 16px;
}

.overdue-empty p {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
}

.overdue-empty span {
  font-size: 14px;
  color: var(--color-text-muted);
}

.overdue-section {
  margin-bottom: 20px;
}

.overdue-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px 8px 0 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.overdue-section-header i {
  color: var(--color-accent);
}

.overdue-severity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.overdue-severity-dot.critical {
  background: #DC2626;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
}

.overdue-severity-dot.warning {
  background: #F59E0B;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.overdue-severity-dot.mild {
  background: #FBBF24;
}

.overdue-item {
  padding: 14px 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-top: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.overdue-item:last-child {
  border-radius: 0 0 8px 8px;
}

.overdue-item:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-overdue);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.overdue-customer-info {
  flex: 1;
  min-width: 0;
}

.overdue-customer-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.overdue-customer-main h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.overdue-category {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  background: rgba(94, 129, 172, 0.15);
  color: var(--color-accent);
  border-radius: 10px;
  font-weight: 500;
}

.overdue-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overdue-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-success);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.overdue-phone:hover {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
}

.overdue-phone i {
  font-size: var(--font-size-xs);
}

.overdue-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.overdue-days {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-overdue);
  background: rgba(239, 68, 68, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}

.overdue-days-inline {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.overdue-days-inline.critical {
  background: rgba(220, 38, 38, 0.15);
  color: #DC2626;
}

.overdue-days-inline.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.overdue-days-inline.mild {
  background: rgba(251, 191, 36, 0.15);
  color: #D97706;
}

/* Kategori badges (control type) */
.overdue-kat-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.4;
}
.kat-el {
  background: rgba(59, 130, 246, 0.15);
  color: #3B82F6;
}
.kat-brann {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}
.kat-other {
  background: rgba(139, 92, 246, 0.15);
  color: #8B5CF6;
}
.overdue-type-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.overdue-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.btn-remind {
  padding: 6px 10px;
  background: rgba(94, 129, 172, 0.1);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  color: var(--color-accent);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
}

.btn-remind:hover {
  background: var(--color-accent);
  color: white;
}

.overdue-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.overdue-actions {
  display: flex;
  gap: 8px;
}

/* Cluster action button group wrapper */
.cluster-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.btn-group-route,
.btn-group-map,
.btn-group-weekplan {
  padding: 4px 7px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.btn-group-route:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.btn-group-map:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.btn-group-weekplan:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

.overdue-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Proximity settings panel */
.proximity-settings {
  padding: 10px 20px;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
}

.proximity-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.proximity-settings-row label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.proximity-settings-row label i {
  color: var(--color-accent);
}

.proximity-settings-row input[type="range"] {
  flex: 1;
  height: 6px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.proximity-radius-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent);
  min-width: 42px;
  text-align: right;
}

/* Proximity summary line */
.proximity-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.proximity-summary i {
  color: var(--color-accent);
}

/* Proximity cluster number badge */
.proximity-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Proximity metadata (count + radius) */
.proximity-meta {
  font-weight: 400;
  opacity: 0.85;
  font-size: var(--font-size-xs);
}

/* Proximity severity badges */
.proximity-severity {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
}

.proximity-severity.critical {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

.proximity-severity.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.proximity-severity.mild {
  background: rgba(251, 191, 36, 0.2);
  color: #fef3c7;
}

/* Proximity cluster sections */
.overdue-proximity-section .overdue-section-header,
.overdue-proximity-section .warning-header.proximity-header {
  background: var(--color-accent);
  color: white;
  padding: 10px 14px;
  border-radius: 6px 6px 0 0;
}

/* Severity left border on proximity sections */
.overdue-proximity-section.severity-critical {
  border-left: 4px solid #DC2626;
}

.overdue-proximity-section.severity-warning {
  border-left: 4px solid #F59E0B;
}

.overdue-proximity-section.severity-mild {
  border-left: 4px solid #FBBF24;
}

/* Buttons on colored proximity/warning backgrounds — explicit white with semi-transparent bg */
.overdue-proximity-section .btn-group-route,
.overdue-proximity-section .btn-group-map,
.overdue-proximity-section .btn-group-weekplan {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.9);
}

/* Override .overdue-section-header i accent color for button icons on colored backgrounds */
.overdue-proximity-section .btn-group-route i,
.overdue-proximity-section .btn-group-map i,
.overdue-proximity-section .btn-group-weekplan i {
  color: inherit;
}

.overdue-proximity-section .btn-group-route:hover,
.overdue-proximity-section .btn-group-map:hover,
.overdue-proximity-section .btn-group-weekplan:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}

.overdue-noise-section .overdue-section-header,
.overdue-noise-section .warning-header {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  padding: 10px 14px;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--color-border);
  border-bottom: none;
}

/* Action buttons row within overdue/warning items */
.overdue-actions-row {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* Individual customer weekplan button */
.btn-wp-single {
  padding: 5px 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  line-height: 1;
}

.btn-wp-single:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

/* Match remind button sizing when next to wp button */
.overdue-actions-row .btn-remind {
  padding: 5px 8px;
  font-size: 12px;
}

/* Week plan day-picker popup */
.wp-day-picker-popup {
  position: fixed;
  z-index: 10001;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  overflow: hidden;
  animation: wpDpSlideIn 0.15s ease-out;
}

@keyframes wpDpSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.wp-day-picker-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
}

.wp-day-picker-days {
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.wp-dp-day-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s;
  font-size: 13px;
  font-family: inherit;
}

.wp-dp-day-btn:hover {
  background: #2563eb;
  color: #fff;
}

.wp-dp-day-name {
  font-weight: 600;
}

.wp-dp-day-date {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.wp-dp-day-btn:hover .wp-dp-day-date {
  color: rgba(255, 255, 255, 0.8);
}

.wp-dp-badge {
  display: inline-block;
  background: #2563eb;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 4px;
}

.wp-dp-day-btn:hover .wp-dp-badge {
  background: rgba(255, 255, 255, 0.3);
}

.map-notification {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(94, 129, 172, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideDown 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

/* ============================================
   CALENDAR
   ============================================ */

.calendar-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--color-bg-secondary);
}

.calendar-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  min-width: 150px;
  text-align: center;
}

.calendar-nav {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.calendar-nav:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.calendar-add-btn {
  margin-left: auto;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 20px;
}

.calendar-day-header {
  padding: 10px 0;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.calendar-day {
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  min-height: 70px;
  background: var(--color-bg-tertiary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.calendar-day:hover:not(.empty) {
  border-color: var(--color-accent);
  background: var(--color-bg-hover);
}

.calendar-day.empty {
  background: var(--color-light-gray);
  border-color: transparent;
  cursor: default;
}

.calendar-day.past {
  opacity: 0.6;
}

.calendar-day.today {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--color-ok);
}

.calendar-day.today .day-number {
  background: var(--color-ok);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

.calendar-day.has-content {
  background: rgba(94, 129, 172, 0.08);
}

.day-top-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.day-number {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.day-gmaps {
  color: var(--text-secondary);
  text-decoration: none;
  opacity: 0.4;
  font-size: 11px;
  padding: 1px 3px;
  border-radius: 3px;
  transition: opacity 0.15s, color 0.15s;
  margin-left: auto;
}
.day-gmaps:hover {
  opacity: 1;
  color: #4285f4;
}

/* Calendar map focus button */
.cal-map-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.cal-map-btn:hover, .cal-map-btn.active {
  opacity: 1;
  color: var(--color-primary);
}
.cal-map-btn.active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Calendar day focused state */
.calendar-day.calendar-day-focused {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Calendar focus: hidden markers */
.custom-marker-with-label.cal-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.calendar-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.calendar-avtale {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-primary));
  color: var(--text-primary);
  padding: 2px 4px;
  border-radius: 3px;
  border-left: 3px solid var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.calendar-avtale:hover {
  background: color-mix(in srgb, var(--color-accent) 20%, var(--bg-primary));
}

.calendar-avtale.completed {
  background: color-mix(in srgb, var(--color-good) 12%, var(--bg-primary));
  border-left-color: var(--color-good);
  opacity: 0.7;
}

.avtale-service-icon { font-size: 0.7em; flex-shrink: 0; }
.avtale-poststed { font-size: 0.75em; opacity: 0.6; margin-left: auto; flex-shrink: 0; }
.avtale-duration { font-size: 0.7em; opacity: 0.6; margin-left: auto; flex-shrink: 0; }

.avtale-time {
  font-weight: 700;
  font-size: 8px;
}

/* Upcoming avtaler section */
/* === UKEVISNING (Outlook-stil) === */
.week-view {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-top: 8px;
  background: var(--border-color, #e5e7eb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  min-height: 400px;
}
.week-day {
  background: var(--bg-primary);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.week-day.today {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--bg-primary));
}
.week-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  text-align: center;
}
.week-day.today .week-day-header {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary));
}
.week-day-name {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  min-width: 0;
}
.week-day.today .week-day-name {
  color: var(--color-primary);
}
.week-day-date {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.week-day.today .week-day-date {
  color: var(--color-primary);
}
.week-day-time {
  font-size: 10px;
  background: var(--color-primary);
  color: white;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}
.week-day-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  flex: 1;
  overflow-y: auto;
}

/* Outlook-stil kundekort */
.week-avtale-card {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-primary));
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.15s, box-shadow 0.15s;
  position: relative;
}
.week-avtale-card:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--bg-primary));
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.week-avtale-card.completed {
  opacity: 0.5;
  border-left-color: var(--text-tertiary);
  background: var(--bg-secondary);
}
.week-avtale-card.completed .week-card-name {
  text-decoration: line-through;
}
.week-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.week-card-initials {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: 3px;
  padding: 1px 4px;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.week-card-name {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.week-card-delete {
  background: none;
  border: none;
  color: var(--color-danger, #dc2626);
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s;
}
.week-avtale-card:hover .week-card-delete { opacity: 0.6; }
.week-card-delete:hover { opacity: 1 !important; }
.week-card-addr {
  font-size: 10px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-card-phone {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.week-card-phone i,
.week-card-time i {
  font-size: 8px;
  margin-right: 3px;
}
.week-card-time {
  font-size: 10px;
  color: var(--color-primary);
  font-weight: 500;
}

.week-empty {
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 8px 4px;
  text-align: center;
}
.week-day-add {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.6;
  text-align: center;
  border-top: 1px solid var(--border-color, #e5e7eb);
  margin-top: auto;
}
.week-day-add:hover {
  opacity: 1;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-primary));
}
.week-day-gmaps,
.split-day-gmaps {
  color: var(--text-secondary);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  font-size: 12px;
  margin-left: auto;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}
.week-day-gmaps:hover,
.split-day-gmaps:hover {
  opacity: 1;
  color: #4285f4;
}
.week-summary {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

.upcoming-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.upcoming-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.upcoming-section h4 i {
  color: var(--color-accent);
}

.upcoming-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.upcoming-group-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dim, #9ca3af);
  padding: 8px 0 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}
.upcoming-group-label:first-child { margin-top: 0; padding-top: 0; }

.upcoming-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.upcoming-item:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-hover);
}

.upcoming-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-accent);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  min-width: 45px;
}

.upcoming-day {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.upcoming-month {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  opacity: 0.9;
}

.upcoming-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.upcoming-info strong {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-info span {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* === Quick delete button on calendar items === */
.calendar-avtale {
  position: relative;
  padding-right: 20px;
}
.avtale-content {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.avtale-quick-delete {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: none;
  background: rgba(220, 38, 38, 0.85);
  color: white;
  font-size: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.calendar-avtale:hover .avtale-quick-delete {
  opacity: 1;
}
.avtale-quick-delete:hover {
  background: rgba(185, 28, 28, 1);
}
/* week-avtale-card delete handled via .week-card-delete above */

/* === Creator badges === */
.avtale-creator {
  font-size: 8px;
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  padding: 0 3px;
  border-radius: 2px;
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1.4;
}
.avtale-creator-badge {
  font-size: 10px;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.upcoming-creator {
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* === Geographic area badges === */
.week-day-areas {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 4px 4px 2px;
}
.area-badge {
  font-size: 10px;
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
  cursor: help;
}
.area-badge i {
  font-size: 8px;
  margin-right: 1px;
}
.day-area-hint {
  display: block;
  font-size: 8px;
  color: var(--text-tertiary);
  font-weight: 500;
  line-height: 1.2;
  cursor: help;
}

/* === Weekly Plan (Ukeplan) === */
.wp-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wp-header {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.wp-week-title {
  font-weight: 700;
  font-size: 15px;
  min-width: 60px;
  text-align: center;
}
.wp-status {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 500;
  text-align: center;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-secondary));
  border-radius: 6px;
}
.wp-status.muted {
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  font-weight: 400;
}
.wp-status i { margin-right: 4px; }

/* Customer search in weekly plan */
.wp-search-container {
  position: relative;
  margin: 0 0 6px;
  padding: 8px;
  background: var(--card-bg, var(--bg-secondary));
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 50;
}
.wp-search-wrapper {
  position: relative;
}
.wp-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.wp-search-input {
  width: 100%;
  padding: 10px 12px 10px 32px;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-primary);
  color: var(--text-primary);
  box-sizing: border-box;
  font-weight: 500;
}
.wp-search-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}
.wp-search-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.wp-search-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wp-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--color-border);
  border-radius: 0 0 8px 8px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.wp-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.wp-search-item:last-child { border-bottom: none; }
.wp-search-item:hover { background: var(--bg-hover); }
.wp-search-item.disabled { opacity: 0.5; cursor: default; }
.wp-search-item.disabled:hover { background: none; }
.wp-search-item.wp-search-no-results { cursor: default; color: var(--text-tertiary); }
.wp-search-name { flex: 1; font-weight: 500; }
.wp-search-addr { font-size: 10px; color: var(--text-tertiary); max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Day list */
.wp-days {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wp-day {
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  overflow: hidden;
}
.wp-day:hover { background: var(--bg-secondary); }
.wp-day.active {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-secondary));
}

/* Day bar */
.wp-day-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.wp-day-label {
  font-weight: 600;
  font-size: 13px;
  min-width: 32px;
  color: var(--text-primary);
}
.wp-day.today .wp-day-label { color: var(--color-primary); }
.wp-day-date {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
}
.wp-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.4;
}
.wp-badge.new {
  background: var(--color-primary);
  color: #fff;
}
.wp-badge.existing {
  background: var(--bg-tertiary, var(--color-border));
  color: var(--text-secondary);
}
.wp-active-icon {
  color: var(--color-primary);
  font-size: 11px;
  animation: wp-pulse 1.5s ease-in-out infinite;
}
@keyframes wp-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Day content */
.wp-day-content {
  padding: 0 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Dispatch bar - technician assignment (admin only) */
.wp-dispatch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 4px;
  background: var(--primary-light, #e8f0fe);
  border: 1px solid var(--primary, #2563eb);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary, #2563eb);
}
.wp-dispatch-bar i {
  font-size: 14px;
}
.wp-dispatch-bar span {
  white-space: nowrap;
}
.wp-dispatch-select {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--primary, #2563eb);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wp-dispatch-select:focus {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 1px;
}

/* Customer items */
.wp-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  transition: background 0.15s;
}
.wp-item.new {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-primary));
}
.wp-item.existing {
  opacity: 1;
  background: color-mix(in srgb, var(--bg-tertiary) 30%, var(--bg-primary));
}
.wp-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.wp-item-area {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.wp-item-creator {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.wp-remove {
  background: none;
  border: none;
  color: var(--color-danger, #dc2626);
  cursor: pointer;
  font-size: 15px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s;
}
.wp-item:hover .wp-remove { opacity: 0.6; }
.wp-remove:hover { opacity: 1 !important; }

/* Drag-and-drop */
.wp-item.new[draggable] { cursor: grab; }
.wp-item.new[draggable]:active { cursor: grabbing; }
.wp-item.wp-dragging { opacity: 0.3; }
.wp-day-content.wp-drag-over,
.wp-day.wp-drag-over {
  background: color-mix(in srgb, var(--color-primary) 15%, var(--bg-primary));
  border-radius: 6px;
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
}

/* ─── Område-blokker dratt inn fra kartet ─── */
/* Draggbar coverage-puck — signaliser at den kan dras inn i planen. */
.tz-puck-draggable { cursor: grab; }
.tz-puck-draggable:active { cursor: grabbing; }

/* Drop-sone-fremheving når et område dras over ukeplan-dag / årsplan-måned. */
body.area-dragging .wp-day { transition: outline-color 120ms ease, background 120ms ease; }
.wp-day.area-drop-over,
.yp-month-card.area-drop-over {
  outline: 2px dashed var(--color-accent, #60a5fa);
  outline-offset: -2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent, #60a5fa) 16%, transparent);
}

/* Sorter-verktøylinje for blokkene. */
.wp-area-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 8px;
  font-size: 11px;
}
.wp-area-sort-label {
  color: var(--color-text-muted);
  margin-right: 2px;
  white-space: nowrap;
}
.wp-area-sort-btn {
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  color: var(--color-text-secondary, #cbd5e1);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1), color 140ms ease, border-color 140ms ease;
}
.wp-area-sort-btn:hover {
  background: color-mix(in srgb, var(--color-accent, #60a5fa) 22%, transparent);
  color: var(--color-text-primary, #f1f5f9);
}
.wp-area-sort-btn.active {
  background: var(--color-accent, #60a5fa);
  color: #0b1220;
  border-color: var(--color-accent, #60a5fa);
}

/* Selve blokken. */
.wp-area-block {
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg-secondary, #1e293b) 60%, transparent);
}
.wp-area-block.wp-block-dragging { opacity: 0.4; }
.wp-area-block.wp-block-drag-over {
  outline: 2px dashed var(--color-accent, #60a5fa);
  outline-offset: -2px;
}

.wp-area-block-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  cursor: grab;
  background: color-mix(in srgb, var(--color-bg-tertiary, #334155) 50%, transparent);
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  user-select: none;
}
.wp-area-block-head:active { cursor: grabbing; }
.wp-area-block-head-loose { cursor: default; }
.wp-area-grip {
  color: var(--color-text-muted);
  font-size: 11px;
  opacity: 0.6;
  cursor: grab;
}
.wp-area-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 0%, transparent);
}
.wp-area-dot-loose {
  background: var(--color-text-muted, #64748b);
  opacity: 0.6;
}
.wp-area-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary, #f1f5f9);
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-area-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary, #cbd5e1);
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  padding: 1px 7px;
  flex: 0 0 auto;
}
.wp-area-remove {
  background: none;
  border: none;
  color: var(--color-text-muted, #64748b);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex: 0 0 auto;
  transition: color 140ms ease;
}
.wp-area-remove:hover { color: var(--color-danger, #ef4444); }

@media (prefers-reduced-motion: reduce) {
  .wp-area-sort-btn,
  .wp-area-remove,
  body.area-dragging .wp-day { transition: none; }
}

/* ─── Foto-lightbox (fullskjerm-bildevisning med zoom) ─── */
.foto-lightbox {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(2, 6, 16, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.foto-lightbox.open { opacity: 1; }
.foto-lightbox .fl-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}
.foto-lightbox .fl-img {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 120px);
  object-fit: contain;
  transform-origin: center center;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: zoom-in;
  -webkit-user-drag: none;
}
.foto-lightbox.is-zoomed .fl-img { cursor: grab; transition: none; }
.foto-lightbox.is-zoomed .fl-img:active { cursor: grabbing; }
.foto-lightbox .fl-btn {
  position: absolute;
  background: rgba(15, 23, 42, 0.72);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  /* Nullstill den globale `.btn, button`-regelen (min-height:48px; padding:12px 20px)
     som ellers gjør <button>-variantene (Lukk, Slett, prev/next) til ovaler i stedet
     for runde sirkler som <a>-nedlastknappen. */
  min-width: 0; min-height: 0; padding: 0; box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
  backdrop-filter: blur(6px);
}
.foto-lightbox .fl-btn:hover { background: rgba(30, 41, 59, 0.92); transform: scale(1.05); }
.foto-lightbox .fl-close { top: calc(16px + env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.foto-lightbox .fl-download { top: calc(16px + env(safe-area-inset-top)); right: calc(72px + env(safe-area-inset-right)); }
.foto-lightbox .fl-delete { top: calc(16px + env(safe-area-inset-top)); right: calc(128px + env(safe-area-inset-right)); }
.foto-lightbox .fl-delete:hover { background: rgba(220, 38, 38, 0.92); border-color: rgba(248, 113, 113, 0.55); }
.foto-lightbox .fl-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.foto-lightbox .fl-next { right: 16px; top: 50%; transform: translateY(-50%); }
.foto-lightbox .fl-prev:hover { transform: translateY(-50%) scale(1.05); }
.foto-lightbox .fl-next:hover { transform: translateY(-50%) scale(1.05); }
.foto-lightbox .fl-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 20px max(18px, calc(env(safe-area-inset-bottom) + 8px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  color: #e2e8f0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  pointer-events: none;
}
.foto-lightbox .fl-counter {
  font-weight: 600;
  font-size: 12px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 999px;
  padding: 2px 10px;
}
.foto-lightbox .fl-caption {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foto-lightbox .fl-date { opacity: 0.7; margin-left: 8px; font-size: 11.5px; }
.foto-lightbox .fl-hint { font-size: 11px; color: #94a3b8; opacity: 0.65; }
.foto-lightbox.is-zoomed .fl-hint { display: none; }
[data-action="openFotoLightbox"] { cursor: zoom-in; }
[data-action="openFotoLightbox"]:focus-visible {
  outline: 2px solid var(--color-accent, #60a5fa);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .foto-lightbox .fl-btn { width: 40px; height: 40px; font-size: 16px; }
  /* På mobil: Lukk (X) + Last ned stables vertikalt på HØYRE side, godt ned i bildet —
     unna statuslinje/notch (som lå "for høyt oppe"). Last ned rett under X. */
  .foto-lightbox .fl-close {
    top: calc(env(safe-area-inset-top) + 72px);
    right: max(12px, env(safe-area-inset-right));
  }
  .foto-lightbox .fl-download {
    top: calc(env(safe-area-inset-top) + 124px);
    right: max(12px, env(safe-area-inset-right));
    left: auto;
  }
  .foto-lightbox .fl-delete {
    top: calc(env(safe-area-inset-top) + 176px);
    right: max(12px, env(safe-area-inset-right));
    left: auto;
  }
  .foto-lightbox .fl-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .foto-lightbox, .foto-lightbox .fl-img, .foto-lightbox .fl-btn { transition: none; }
}

/* ─── Mine kunder (sidebar-fane) ─── */
.mine-kunder-container { padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.mine-kunder-container .tab-header { padding: 0; border: none; margin-bottom: 4px; }
.mine-kunder-container .tab-header h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; }
.mine-kunder-container .mk-subtitle { font-size: 12px; color: var(--color-text-secondary, #94a3b8); display: block; margin-top: 4px; }

.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-stat {
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: 10px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
}
.mk-stat-n { font-size: 17px; font-weight: 700; color: var(--color-text-primary, #f1f5f9); line-height: 1; }
.mk-stat-l { font-size: 10px; color: var(--color-text-secondary, #94a3b8); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.mk-stat-forfalt { border-color: rgba(220, 38, 38, 0.35); }
.mk-stat-forfalt .mk-stat-n { color: #fca5a5; }
.mk-stat-snart { border-color: rgba(202, 138, 4, 0.35); }
.mk-stat-snart .mk-stat-n { color: #fcd34d; }
.mk-stat-ok .mk-stat-n { color: #86efac; }
.mk-stat-empty { opacity: 0.45; border-color: transparent; }
.mk-stat-empty .mk-stat-n { color: var(--color-text-muted, #64748b) !important; font-weight: 500; }

/* «Mangler»-bøtten = kunder uten kontroll-dato (krever oppfølging i kundeskjema).
   Lilla — distinkt fra forfalt (rød) og snart (gul), men signaliserer attention. */
.mk-stat-mangler { border-color: rgba(168, 85, 247, 0.35); }
.mk-stat-mangler .mk-stat-n { color: #d8b4fe; }
.mk-row-indicator.mk-row-mangler { background: #a855f7; }
.mk-row-status.mk-row-mangler { background: rgba(168, 85, 247, 0.20); color: #d8b4fe; }

/* Andre-rad for stats når både OK og Mangler skal vises samtidig.
   Kompakt horisontal layout — separasjon visuelt fra hovedraden. */
.mk-stats-row2 { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.mk-stats-row2 .mk-stat { padding: 6px 10px; flex-direction: row; gap: 10px; align-items: center; justify-content: flex-start; }
.mk-stats-row2 .mk-stat-l { margin-top: 0; }

.mk-filter { display: flex; gap: 5px; flex-wrap: wrap; }
.mk-chip {
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  color: var(--color-text-secondary, #cbd5e1);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.mk-chip:hover { background: color-mix(in srgb, var(--color-accent, #60a5fa) 22%, transparent); color: var(--color-text-primary, #f1f5f9); }
.mk-chip.active { background: var(--color-accent, #60a5fa); color: #0b1220; font-weight: 600; }
.mk-chip-count { font-size: 10px; opacity: 0.85; margin-left: 4px; }

.mk-list { display: flex; flex-direction: column; gap: 5px; }
.mk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.05));
  cursor: pointer;
  transition: background 120ms ease, transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mk-row:hover { background: color-mix(in srgb, var(--color-accent, #60a5fa) 14%, transparent); transform: translateX(2px); }
.mk-row:focus-visible { outline: 2px solid var(--color-accent, #60a5fa); outline-offset: 2px; }

.mk-row-indicator {
  width: 4px;
  align-self: stretch;
  border-radius: 999px;
  background: var(--color-text-muted, #64748b);
  flex: 0 0 auto;
}
.mk-row-indicator.mk-row-forfalt { background: #dc2626; }
.mk-row-indicator.mk-row-snart   { background: #ca8a04; }
.mk-row-indicator.mk-row-ok      { background: #16a34a; opacity: 0.6; }

.mk-row-main { flex: 1 1 auto; min-width: 0; }
.mk-row-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-addr { font-size: 11px; color: var(--color-text-secondary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.mk-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.mk-row-status {
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mk-row-status.mk-row-forfalt { background: rgba(220, 38, 38, 0.22); color: #fca5a5; }
.mk-row-status.mk-row-snart   { background: rgba(202, 138, 4, 0.22); color: #fcd34d; }
.mk-row-status.mk-row-ok      { background: rgba(22, 163, 74, 0.18); color: #86efac; }
.mk-row-days { font-size: 10px; color: var(--color-text-muted, #64748b); }

/* Service-chips per kunde — viser HVILKEN kategori som er forfalt/snart.
   Service-fargen (--mk-svc-color) er en venstre-kant; status-fargen er bakgrunn. */
.mk-svc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.mk-svc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  padding: 2px 7px 2px 5px;
  border-radius: 6px;
  border-left: 3px solid var(--mk-svc-color, #64748b);
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.04));
  color: var(--color-text-secondary, #cbd5e1);
  white-space: nowrap;
  line-height: 1.35;
}
.mk-svc i { font-size: 9px; opacity: 0.7; }
.mk-svc-name { font-weight: 600; color: var(--color-text-primary, #f1f5f9); }
.mk-svc-when { font-size: 10px; opacity: 0.85; margin-left: 4px; }
.mk-svc-forfalt {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}
.mk-svc-forfalt .mk-svc-name { color: #fecaca; }
.mk-svc-snart {
  background: rgba(202, 138, 4, 0.16);
  color: #fcd34d;
}
.mk-svc-snart .mk-svc-name { color: #fde68a; }
.mk-svc-ok {
  background: rgba(22, 163, 74, 0.10);
  color: #86efac;
  opacity: 0.85;
}
.mk-svc-ok .mk-svc-name { color: #bbf7d0; }

.mk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-secondary, #94a3b8);
}
.mk-empty i { font-size: 28px; opacity: 0.45; margin-bottom: 10px; }
.mk-empty h3 { font-size: 15px; color: var(--color-text-primary, #f1f5f9); margin: 0 0 6px; }
.mk-empty p { font-size: 13px; margin: 0; line-height: 1.45; }
.mk-empty .mk-empty-hint { margin-top: 10px; font-size: 11.5px; opacity: 0.7; }
.mk-empty-small { padding: 18px 12px; }

@media (prefers-reduced-motion: reduce) {
  .mk-row, .mk-chip { transition: none; }
}

/* ─── Cluster planner (høyreklikk på klynge → plasser i årsplan) ─── */
.cluster-planner-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 11, 20, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cluster-planner-overlay.open { opacity: 1; }

.cluster-planner {
  width: min(460px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary, #141b29);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(8px) scale(0.985);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cluster-planner-overlay.open .cluster-planner { transform: translateY(0) scale(1); }

.cp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.cp-title { display: flex; flex-direction: column; gap: 6px; }
.cp-title strong { font-size: 15px; color: var(--color-text-primary, #f1f5f9); }
.cp-forfall-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-pill {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
}
.cp-pill-forfalt { background: rgba(220, 38, 38, 0.18); color: #fca5a5; }
.cp-pill-snart { background: rgba(202, 138, 4, 0.18); color: #fcd34d; }
.cp-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #64748b);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 140ms ease;
}
.cp-close:hover { color: var(--color-text-primary, #f1f5f9); }

.cp-body {
  padding: 12px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.cp-bulk { display: flex; gap: 4px; }
.cp-bulk-btn {
  background: none;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  color: var(--color-text-secondary, #cbd5e1);
  border-radius: 6px;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.cp-bulk-btn:hover { background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.06)); }

.cp-cust-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  border-radius: 10px;
}
.cp-cust {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.05));
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
}
.cp-cust:last-child { border-bottom: none; }
.cp-cust:hover { background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.04)); }
.cp-cust-off { opacity: 0.45; }
.cp-cust-cb { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--color-accent, #60a5fa); }
.cp-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto;
  background: var(--color-text-muted, #64748b);
}
.cp-status-dot.forfalt { background: #dc2626; }
.cp-status-dot.denne-uke, .cp-status-dot.snart { background: #ca8a04; }
.cp-cust-main { display: flex; flex-direction: column; min-width: 0; }
.cp-cust-name {
  font-size: 13px;
  color: var(--color-text-primary, #f1f5f9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-cust-sub { font-size: 11px; color: var(--color-text-muted, #64748b); }

.cp-year-nav { display: flex; align-items: center; gap: 8px; text-transform: none; }
.cp-year-btn {
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.06));
  border: none; color: var(--color-text-primary, #f1f5f9);
  border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1;
}
.cp-year-btn:hover { background: var(--color-accent, #60a5fa); color: #0b1220; }
.cp-year-label { font-size: 13px; font-weight: 700; color: var(--color-text-primary, #f1f5f9); }

.cp-month-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.cp-month-chip, .cp-week-chip {
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  color: var(--color-text-secondary, #cbd5e1);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1), color 140ms ease;
}
.cp-month-chip:hover, .cp-week-chip:hover {
  background: color-mix(in srgb, var(--color-accent, #60a5fa) 22%, transparent);
  color: var(--color-text-primary, #f1f5f9);
}
.cp-month-chip.active, .cp-week-chip.active {
  background: var(--color-accent, #60a5fa);
  color: #0b1220;
  font-weight: 600;
}
.cp-week-row { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-week-chip { padding: 5px 11px; }

.cp-day-row { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-day-chip {
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  color: var(--color-text-secondary, #cbd5e1);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1), color 140ms ease;
}
.cp-day-chip:hover {
  background: color-mix(in srgb, var(--color-accent, #60a5fa) 22%, transparent);
  color: var(--color-text-primary, #f1f5f9);
}
.cp-day-chip.active {
  background: #16a34a;
  color: #f0fdf4;
  font-weight: 600;
}

.cp-tech-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: var(--color-bg-input, rgba(255, 255, 255, 0.04));
  color: var(--color-text-primary, #f1f5f9);
  font-size: 13px;
}

/* Kategori × tekniker-matrise */
.cp-cat-list { display: flex; flex-direction: column; gap: 6px; }
.cp-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 120ms ease;
}
.cp-cat-row.cp-cat-off { opacity: 0.5; }
.cp-cat-check {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.cp-cat-check input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--color-accent, #60a5fa); }
.cp-cat-name {
  font-size: 13px;
  color: var(--color-text-primary, #f1f5f9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-cat-tech {
  flex: 0 0 46%;
  max-width: 46%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: var(--color-bg-input, rgba(255, 255, 255, 0.04));
  color: var(--color-text-primary, #f1f5f9);
  font-size: 12px;
}
.cp-cat-tech:disabled { opacity: 0.5; }

.cp-cat-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary, #cbd5e1);
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.06));
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
.cp-cat-empty { opacity: 0.4; }
.cp-cat-empty .cp-cat-count {
  color: var(--color-text-muted, #64748b);
  background: transparent;
  border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.12));
}
.cp-cat-empty .cp-cat-check { cursor: not-allowed; }
.cp-cat-empty input { cursor: not-allowed; }

.cp-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.cp-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
  .cluster-planner { width: calc(100vw - 20px); max-height: 90vh; }
  .cp-month-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cluster-planner-overlay, .cluster-planner,
  .cp-month-chip, .cp-week-chip { transition: none; }
}

/* Inline customer context */
.wp-item-context {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}
.wp-ctx-note {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wp-ctx-lastvisit {
  font-size: 10px;
  color: var(--text-tertiary);
}
.wp-ctx-icons {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.wp-ctx-icon {
  font-size: 10px;
  line-height: 1;
}
.wp-overdue-badge {
  color: var(--color-danger, #dc2626);
}

.wp-empty-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 8px 0;
  text-align: center;
}
.wp-empty-hint i { margin-right: 4px; }

/* Detailed item layout */
.wp-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wp-item-addr {
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wp-item-phone {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Estimated time input */
.wp-item-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-secondary);
}
.wp-time-input {
  width: 40px;
  padding: 2px 3px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 11px;
  text-align: center;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
.wp-time-input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.wp-time-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Time badge in day bar */
.wp-time-badge {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
  white-space: nowrap;
}

/* Progress bar per day */
.wp-progress-container {
  position: relative;
  height: 6px;
  background: var(--bg-tertiary, #e5e7eb);
  border-radius: 3px;
  margin: 4px 10px 6px;
  overflow: hidden;
}
.wp-progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.wp-progress-bar.overloaded {
  background: var(--color-danger, #dc2626);
}
.wp-progress-label {
  position: absolute;
  right: 0;
  top: -14px;
  font-size: 9px;
  color: var(--text-tertiary);
}

/* Per-member capacity bars */
.wp-capacity-section { padding: 4px 10px 2px; display: flex; flex-direction: column; gap: 3px; }
.wp-capacity-member { display: flex; align-items: center; gap: 6px; }
.wp-capacity-avatar { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.wp-capacity-time { font-size: 9px; color: var(--text-tertiary); min-width: 62px; white-space: nowrap; }
.wp-capacity-bar-bg { flex: 1; height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
.wp-capacity-bar { height: 100%; border-radius: 2px; transition: width 0.3s; }
.wp-cap-green { background: #16a34a; }
.wp-cap-yellow { background: #ca8a04; }
.wp-cap-red { background: #dc2626; }

/* Stop number + initials badge */
.wp-stop-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.wp-stop-num {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  line-height: 1;
}
.wp-stop-initials {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 1;
  letter-spacing: 0.5px;
}

/* Time range display */
.wp-item-timerange {
  font-size: 10px;
  color: var(--color-primary);
  font-weight: 500;
}

/* Historikk-basert estimat-hint: vises kun når faktisk besøkstid avviker fra estimatet */
.wp-est-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-warning, #d99a2b);
  background: color-mix(in srgb, var(--color-warning, #d99a2b) 12%, transparent);
  border-radius: 5px;
  padding: 1px 6px;
  width: fit-content;
}

.wp-est-apply {
  border: none;
  background: var(--color-warning, #d99a2b);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 140ms ease;
}

.wp-est-apply:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.wp-est-apply:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .wp-est-apply { transition: none; }
  .wp-est-apply:hover { transform: none; }
}

/* Timeline connector */
.wp-timeline-item {
  position: relative;
}

/* Day footer */
.wp-day-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.wp-day-stats { font-weight: 500; }
.wp-day-summary { font-weight: 500; }
.wp-day-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.wp-nav-btn {
  font-size: 11px !important;
  padding: 3px 8px !important;
}
.wp-opt-btn {
  font-size: 11px !important;
  padding: 3px 6px !important;
}

/* Action row (suggest + auto-fill) */
.wp-action-row {
  display: flex;
  gap: 6px;
  margin: 4px 0;
}
.wp-action-row .btn { flex: 1; }

/* Suggest stops button */
.wp-suggest-btn {
  width: 100%;
  font-size: 12px !important;
  padding: 6px 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  transition: all 0.15s;
}
.wp-suggest-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(99, 102, 241, 0.08);
}
.wp-suggest-btn i { color: #f59e0b; }

/* Area suggestions — geographic clusters of customers due soon/overdue */
.wp-area-suggestions:empty { display: none; }
.wp-area-panel {
  background: var(--color-bg-secondary, #1a1d23);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
}
.wp-area-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--color-text, #e6e8eb);
}
.wp-area-panel-head i { color: var(--color-accent, #6366f1); }
.wp-area-panel-hint { color: var(--color-text-muted, #8b92a0); font-weight: normal; margin-left: auto; font-size: 11px; }
.wp-area-cards { display: flex; flex-direction: column; gap: 6px; }
.wp-area-card {
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--color-bg-tertiary, #22262e);
  position: relative;
}
.wp-area-card.wp-area-urgency-high { border-left: 3px solid #ef4444; }
.wp-area-card.wp-area-urgency-medium { border-left: 3px solid #f59e0b; }
.wp-area-card.wp-area-urgency-low { border-left: 3px solid #10b981; }
.wp-area-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.wp-area-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wp-area-dot-high { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.wp-area-dot-med { background: #f59e0b; }
.wp-area-dot-low { background: #10b981; }
.wp-area-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 13px;
  color: var(--color-text, #e6e8eb);
  flex-wrap: wrap;
}
.wp-area-title i { color: var(--color-text-muted, #8b92a0); font-size: 11px; }
.wp-area-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.wp-area-badge-overdue { background: rgba(239,68,68,0.15); color: #fca5a5; }
.wp-area-badge-soon { background: rgba(245,158,11,0.15); color: #fcd34d; }
.wp-area-badge-combi { background: rgba(99,102,241,0.15); color: #a5b4fc; }
.wp-area-badge-cont { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.wp-area-badge-hitch { background: rgba(20,184,166,0.15); color: #5eead4; }
.wp-area-badge i { margin-right: 3px; font-size: 9px; }
.wp-area-panel-loading { color: var(--color-text-muted, #8b92a0); font-size: 12px; padding: 12px; text-align: center; }
.wp-area-tech-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.wp-area-tech-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  cursor: pointer;
  font-size: 13px;
}
.wp-area-tech-opt:hover { border-color: var(--color-accent, #6366f1); }
.wp-area-tech-opt input { cursor: pointer; }
.wp-area-picker-hint {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.3);
  font-size: 12px;
  margin-bottom: 10px;
  color: var(--color-text, #e6e8eb);
}
.wp-area-picker-hint i { color: #fbbf24; margin-right: 6px; }

/* =========================================================
   WPAP — Weekly Planner Area Planner (modal)
   Dedikert namespace for å unngå kollisjon med global .modal
   ========================================================= */

.wpap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  padding: 24px;
  animation: wpapFadeIn 120ms ease-out;
}
@keyframes wpapFadeIn { from { opacity: 0; } to { opacity: 1; } }

.wpap-dialog {
  background: var(--color-bg-secondary, #151821);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 520px;
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wpapSlideIn 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes wpapSlideIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.wpap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border, #2c3038);
  flex-shrink: 0;
}
.wpap-head-main { flex: 1; min-width: 0; }
.wpap-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary, #e6e8eb);
  line-height: 1.3;
  overflow-wrap: break-word;
}
.wpap-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-muted, #8b92a0);
}
.wpap-close {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--color-text-muted, #8b92a0);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
  flex-shrink: 0;
  margin-left: 12px;
}
.wpap-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary, #e6e8eb);
}

.wpap-body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wpap-hint {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fcd34d;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wpap-hint i { color: #fbbf24; }

.wpap-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wpap-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #8b92a0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.wpap-label-hint {
  font-size: 11px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted, #8b92a0);
  opacity: 0.75;
}

.wpap-field-hint {
  font-size: 11px;
  color: var(--color-text-muted, #8b92a0);
  margin-top: 2px;
  line-height: 1.4;
}

/* Segmented control */
.wpap-seg {
  display: flex;
  gap: 2px;
  background: var(--color-bg-tertiary, #22262e);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #2c3038);
}
.wpap-seg-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--color-text-muted, #8b92a0);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.wpap-seg-btn:hover { color: var(--color-text-primary, #e6e8eb); }
.wpap-seg-on {
  background: var(--color-bg-secondary, #151821);
  color: var(--color-text-primary, #e6e8eb);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.wpap-day-wrap { margin-top: 8px; }
.wpap-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 8px;
  color: var(--color-text-primary, #e6e8eb);
  font-size: 13px;
  cursor: pointer;
}

/* Time input row */
.wpap-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wpap-time-input {
  width: 90px;
  padding: 8px 10px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 6px;
  color: var(--color-text-primary, #e6e8eb);
  font-size: 13px;
}
.wpap-suffix { color: var(--color-text-muted, #8b92a0); font-size: 13px; }

/* Customer collapsible */
.wpap-cust-toggle {
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  color: var(--color-text-primary, #e6e8eb);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  transition: border-color 120ms;
}
.wpap-cust-toggle:hover { border-color: var(--color-accent, #6366f1); }
.wpap-caret {
  font-size: 10px;
  color: var(--color-text-muted, #8b92a0);
  transition: transform 160ms;
}
.wpap-caret-open { transform: rotate(90deg); }
.wpap-count-pill {
  margin-left: auto;
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.wpap-cust-panel {
  margin-top: 8px;
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 8px;
  padding: 8px;
  background: var(--color-bg-tertiary, #22262e);
}
.wpap-cust-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 4px 6px;
}
.wpap-linkbtn {
  background: none;
  border: none;
  color: var(--color-accent, #6366f1);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.wpap-linkbtn:hover { text-decoration: underline; }
.wpap-cust-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 240px;
  overflow-y: auto;
}
.wpap-cust-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.3;
}
.wpap-cust-row:hover { background: rgba(255, 255, 255, 0.04); }
.wpap-cust-check { cursor: pointer; }
.wpap-cust-name {
  color: var(--color-text-primary, #e6e8eb);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wpap-cust-place {
  color: var(--color-text-muted, #8b92a0);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpap-cust-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.wpap-cust-tag-over { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.wpap-cust-tag-today { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.wpap-cust-tag-soon { background: rgba(245, 158, 11, 0.12); color: #fcd34d; }
.wpap-cust-tag-later { background: rgba(100, 116, 139, 0.15); color: #94a3b8; }

/* Kunde-rad: navn + sted + dato øverst, kategori-chips under */
.wpap-cust-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wpap-cust-line1 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.wpap-cust-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.wpap-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 500;
  line-height: 1.4;
}
.wpap-cat-chip i { font-size: 9px; }

/* Oppdater kunde-rad layout for å passe med ny wpap-cust-main */
.wpap-cust-row {
  grid-template-columns: auto 1fr !important;
  align-items: flex-start !important;
}

/* Kategori-fordelingsseksjon */
.wpap-cat-section[hidden] { display: none; }
.wpap-cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wpap-cat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 8px;
}
.wpap-cat-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-primary, #e6e8eb);
  min-width: 0;
}
.wpap-cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wpap-cat-count {
  font-size: 11px;
  color: var(--color-text-muted, #8b92a0);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 7px;
  border-radius: 999px;
}
.wpap-cat-tech-select {
  width: auto;
  min-width: 160px;
  padding: 8px 10px;
  font-size: 13px;
}

/* <details> avansert-seksjon */
.wpap-advanced {
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 8px;
  background: var(--color-bg-tertiary, #22262e);
  overflow: hidden;
}
.wpap-advanced > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #8b92a0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.wpap-advanced > summary::-webkit-details-marker { display: none; }
.wpap-advanced > summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform 160ms;
  color: var(--color-text-muted, #8b92a0);
  font-weight: normal;
}
.wpap-advanced[open] > summary::before { transform: rotate(90deg); }
.wpap-advanced > summary:hover { color: var(--color-text-primary, #e6e8eb); }
.wpap-adv-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--color-border, #2c3038);
}

/* Footer */
.wpap-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border, #2c3038);
  background: var(--color-bg-tertiary, #22262e);
  flex-shrink: 0;
}
.wpap-btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 120ms;
}
.wpap-btn-secondary {
  background: transparent;
  color: var(--color-text-primary, #e6e8eb);
  border-color: var(--color-border, #2c3038);
}
.wpap-btn-secondary:hover { background: rgba(255, 255, 255, 0.04); }
.wpap-btn-primary {
  background: var(--color-accent, #6366f1);
  color: #fff;
}
.wpap-btn-primary:hover { background: #5458d9; }

@media (max-width: 540px) {
  .wpap-overlay { padding: 0; }
  .wpap-dialog {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}
.wp-area-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--color-text-muted, #8b92a0);
  margin-bottom: 6px;
}
.wp-area-meta i { margin-right: 4px; }
.wp-area-actions { display: flex; gap: 8px; align-items: center; }
.wp-area-actions .btn { font-size: 11px; padding: 4px 8px; }
.wp-area-customer-list {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border, #2c3038);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.wp-area-customer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 3px 4px;
}
.wp-area-customer-name { font-weight: 500; color: var(--color-text, #e6e8eb); }
.wp-area-customer-addr { color: var(--color-text-muted, #8b92a0); flex: 1; }
.wp-area-overdue-text { color: #fca5a5; font-weight: 600; }
.wp-area-soon-text { color: #fcd34d; font-weight: 600; }
.wp-area-picker-label {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted, #8b92a0);
  margin: 12px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wp-area-picker-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  color: var(--color-text, #e6e8eb);
  font-size: 13px;
}

/* Suggestions panel */
.wp-suggestions { }

/* Årsplan → Ukeplan myk handoff: områder Årsplan har lagt i denne uka */
.wp-arsplan-handoff:empty { display: none; }
.wp-arsplan-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(52, 211, 153, 0.07) 100%);
}
.wp-arsplan-banner-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.wp-arsplan-banner-label i { margin-right: 5px; color: rgba(96, 165, 250, 0.95); }
.wp-arsplan-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wp-arsplan-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}
.wp-arsplan-chip:hover { background: rgba(96, 165, 250, 0.26); transform: translateY(-1px); }
.wp-arsplan-chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.32);
  font-size: 0.7rem;
}

.wp-suggest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.wp-suggest-header i { color: #f59e0b; margin-right: 4px; }
.wp-suggest-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.wp-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px;
  max-height: 280px;
  overflow-y: auto;
}
.wp-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  gap: 8px;
}
.wp-suggest-item:hover {
  background: rgba(99, 102, 241, 0.1);
}
.wp-suggest-item.overdue {
  border-left: 3px solid var(--color-danger, #ef4444);
  padding-left: 5px;
}
.wp-suggest-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.wp-suggest-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-suggest-meta {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-suggest-add {
  color: var(--color-primary);
  font-size: 12px;
  flex-shrink: 0;
}
.wp-suggest-all-btn {
  width: calc(100% - 8px);
  margin: 6px 4px;
  font-size: 11px !important;
}
.wp-suggest-empty {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
}
.wp-suggest-empty i {
  color: var(--color-success, #10b981);
  margin-right: 4px;
}

/* Action bar */
.wp-actions {
  display: flex;
  gap: 6px;
  padding: 10px 0 0;
  border-top: 1px solid var(--color-border);
}
.wp-save-btn { flex: 1; }
.wp-clear-btn { flex-shrink: 0; }

/* === Huskeliste (Weekly Notes) === */
.wp-notes-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--color-border);
}
.wp-notes-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wp-notes-header i {
  color: var(--color-primary, #3b82f6);
  font-size: 14px;
}
.wp-notes-count {
  background: var(--color-primary, #3b82f6);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.wp-notes-count:empty { display: none; }
.wp-notes-add {
  position: relative;
  margin-bottom: 8px;
}
.wp-note-compose {
  margin-top: 8px;
  background: var(--bg-tertiary, var(--bg-secondary));
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--color-border);
}
.wp-note-compose-customer {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wp-note-compose-customer i {
  color: var(--color-primary, #3b82f6);
  font-size: 11px;
}
.wp-note-input {
  width: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  min-height: 36px;
  box-sizing: border-box;
}
.wp-note-input:focus {
  outline: none;
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.wp-note-compose-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
}
.wp-notes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wp-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-tertiary, var(--bg-secondary));
  border: 1px solid var(--color-border);
  transition: background 0.15s;
}
.wp-note-item:hover {
  background: var(--bg-hover, var(--bg-tertiary));
}
.wp-note-item.completed {
  opacity: 0.55;
}
.wp-note-item.completed .wp-note-customer,
.wp-note-item.completed .wp-note-text {
  text-decoration: line-through;
}
.wp-note-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 1px;
}
.wp-note-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary, #3b82f6);
  cursor: pointer;
}
.wp-note-checkmark { display: none; }
.wp-note-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wp-note-customer {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.wp-note-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}
.wp-note-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted, #999);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.wp-note-item:hover .wp-note-delete {
  opacity: 1;
}
.wp-note-delete:hover {
  color: var(--color-danger, #ef4444);
}
.wp-notes-completed {
  margin-top: 8px;
}
.wp-notes-completed-header {
  font-size: 11px;
  color: var(--text-muted, #999);
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}
.wp-notes-completed-header:hover {
  color: var(--text-secondary);
}
.wp-notes-completed-header i {
  color: var(--color-success, #10b981);
  font-size: 11px;
}
.wp-notes-completed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.wp-notes-empty {
  font-size: 11px;
  color: var(--text-muted, #999);
  text-align: center;
  padding: 12px 0;
}
.wp-notes-empty i {
  margin-right: 4px;
  opacity: 0.5;
}

/* Note type pills (compose form) */
.wp-note-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.wp-note-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.wp-note-type-pill:hover { opacity: 0.85; }
.wp-note-type-pill.active {
  opacity: 1;
  background: color-mix(in srgb, var(--pill-color) 12%, transparent);
  border-color: var(--pill-color);
  color: var(--pill-color);
}
.wp-note-type-pill i { font-size: 10px; }

/* Note compose extras row */
.wp-note-compose-extras {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}
.wp-note-assign-select {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--bg-primary);
  color: var(--text-primary);
  max-width: 160px;
}
.wp-note-maldag-pills {
  display: flex;
  gap: 2px;
}
.wp-note-maldag-pill {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--text-muted, #999);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.wp-note-maldag-pill:hover { background: var(--bg-hover, var(--bg-tertiary)); color: var(--text-secondary); }
.wp-note-maldag-pill.active {
  background: var(--color-primary, #3b82f6);
  color: #fff;
  border-color: var(--color-primary, #3b82f6);
}

/* Notes filter */
.wp-notes-filter {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.wp-notes-filter-btn {
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--text-muted, #999);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.wp-notes-filter-btn:hover { color: var(--text-secondary); }
.wp-notes-filter-btn.active {
  background: var(--color-primary, #3b82f6);
  color: #fff;
  border-color: var(--color-primary, #3b82f6);
}

/* Note type icon in list */
.wp-note-type-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 11px;
  margin-top: 2px;
}

/* Note content top row */
.wp-note-content-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* Assignee badge */
.wp-note-assignee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--color-primary, #3b82f6);
  color: #fff;
  letter-spacing: 0.5px;
}

/* Target day badge */
.wp-note-maldag {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-hover, var(--bg-tertiary));
  color: var(--text-secondary);
  border: 1px solid var(--color-border);
}

/* Week badge (overforte) */
.wp-note-week {
  font-size: 9px;
  color: var(--text-muted, #999);
  font-weight: 500;
}

/* Overforte section */
.wp-notes-overforte {
  margin-top: 8px;
}
.wp-notes-overforte-header {
  font-size: 11px;
  color: #f59e0b;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  font-weight: 500;
}
.wp-notes-overforte-header:hover {
  color: #d97706;
}
.wp-notes-overforte-header i {
  font-size: 11px;
}
.wp-notes-overforte-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.wp-note-item.overfort {
  border-left: 3px solid #f59e0b;
}
.wp-note-transfer-btn {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-primary, #3b82f6);
  background: transparent;
  color: var(--color-primary, #3b82f6);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.wp-note-transfer-btn:hover {
  background: var(--color-primary, #3b82f6);
  color: #fff;
}
.wp-note-complete-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-success, #10b981);
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.wp-note-complete-btn:hover { opacity: 1; }

/* Add-to-day button */
.wp-note-add-day {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted, #999);
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.wp-note-item:hover .wp-note-add-day { opacity: 1; }
.wp-note-add-day:hover { color: var(--color-primary, #3b82f6); }

/* Day picker popup */
.wp-note-day-picker {
  position: fixed;
  z-index: 10000;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  display: flex;
  gap: 2px;
  padding: 4px;
}
.wp-note-day-option {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}
.wp-note-day-option:hover {
  background: var(--color-primary, #3b82f6);
  color: #fff;
}

/* Day group headers in notes list */
.wp-notes-day-group {
  padding: 4px 0 2px;
}
.wp-notes-day-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #999);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Inline edit */
.wp-note-text.editing {
  background: var(--bg-primary);
  border: 1px solid var(--color-primary, #3b82f6);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  min-width: 60px;
}

/* === Quick Calendar Menu (from map popups) === */
.quick-calendar-menu {
  position: fixed;
  z-index: 10000;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  min-width: 180px;
  overflow: hidden;
}
.quick-menu-header {
  padding: 8px 12px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-menu-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
}
.quick-menu-item:hover {
  background: var(--bg-hover);
}
.quick-menu-item i {
  width: 16px;
  text-align: center;
  color: var(--color-primary);
  font-size: 12px;
}
.popup-btn-group {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
}
.popup-btn-group .btn {
  border-radius: 0 !important;
}
.popup-btn-group .btn:first-child {
  border-radius: 8px 0 0 8px !important;
}
.popup-btn-group .btn:last-child {
  border-radius: 0 8px 8px 0 !important;
  padding: 4px 8px;
  min-width: 0;
  border-left: 1px solid rgba(255,255,255,0.1) !important;
}

/* Legacy upcoming routes */
.upcoming-routes {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-gray);
}

.upcoming-routes h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}

.upcoming-route {
  padding: 10px;
  margin-bottom: 8px;
  background: var(--color-light-gray);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all 0.2s;
}

.upcoming-route:hover {
  background: var(--color-bg-gray);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ============================================
   PLANNER
   ============================================ */

.planner-container {
  padding: 16px 20px;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.planner-container > * + * {
  margin-top: 20px;
}

/* Planner Settings Panel */
.planner-settings-panel {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.planner-settings-panel h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.planner-settings-panel h3 i {
  color: var(--color-accent);
}

.planner-settings-panel .setting-row {
  margin-bottom: 14px;
  max-width: 100%;
  box-sizing: border-box;
}

.planner-settings-panel .setting-row:last-of-type {
  margin-bottom: 0;
}

.planner-settings-panel .btn {
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Planner Recommendations Section */
.planner-recommendations {
  flex: 0 0 auto;
  padding-bottom: 100px;
}

.planner-recommendations h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.planner-recommendations h3 i {
  color: var(--color-accent);
}

/* Tab Header Description */
.tab-description {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
  line-height: 1.4;
}

/* Tab Header with icon and description */
#tab-planner .tab-header {
  padding-bottom: 16px;
  margin-bottom: 0;
}

#tab-planner .tab-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

#tab-planner .tab-header h2 i {
  color: var(--color-accent);
}

.planner-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.planner-year {
  background: var(--color-light-gray);
  border-radius: 8px;
  overflow: hidden;
}

.planner-year-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--color-dark-gray) 0%, var(--color-charcoal) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px 8px 0 0;
}

/* Planner Area Section */
.planner-area {
  padding: 0;
  border-bottom: 1px solid var(--color-border-gray);
}

.planner-area:last-child {
  border-bottom: none;
}

.planner-area-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(94, 129, 172, 0.1) 0%, rgba(94, 129, 172, 0.05) 100%);
  border-bottom: 1px solid var(--color-border-gray);
}

.planner-area-name {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.planner-area-btn {
  background: var(--color-orange);
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.planner-area-btn:hover {
  background: var(--color-orange-hover);
  box-shadow: 0 2px 6px rgba(94, 129, 172, 0.3);
  transform: translateY(-1px);
}

.planner-area-btn i {
  font-size: var(--font-size-xs);
}

.planner-category {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-gray);
}

.planner-category:last-child {
  border-bottom: none;
}

.planner-category-title {
  font-weight: 700;
  color: var(--color-orange);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.planner-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.planner-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
}

.planner-item:hover {
  background: var(--color-bg-gray);
  border-color: var(--color-orange);
  box-shadow: 0 2px 6px rgba(94, 129, 172, 0.15);
  transform: translateX(2px);
}

.planner-item-date {
  font-weight: 700;
  color: var(--color-orange);
  min-width: 70px;
  font-size: var(--font-size-xs);
}

.planner-item-info {
  flex: 1;
  min-width: 0;
}

.planner-item-name {
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
}

.planner-item-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.planner-item-interval {
  font-weight: 700;
  background: rgba(94, 129, 172, 0.1);
  color: var(--color-orange);
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 35px;
  text-align: center;
  font-size: var(--font-size-xs);
}

.upcoming-route strong {
  color: var(--color-orange);
}

/* ============================================
   MAP CONTAINER & MARKERS
   ============================================ */

.map-container {
  flex: 1;
  position: relative;
  background: transparent; /* Map is in #sharedMapContainer, not here */
  pointer-events: none !important; /* CRITICAL: Let clicks pass through to shared map below */
}

.map-container > * {
  pointer-events: auto; /* But child elements (filter panel, widgets) are clickable */
}

#map {
  width: 100%;
  height: 100%;
}

/* Ensure Mapbox GL JS controls don't block our panels */
.mapboxgl-ctrl-top-left,
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
  z-index: 999 !important;
}

/* ========================================
   CLUSTER MARKERS (Supercluster)
   ======================================== */

.cluster-marker {
  cursor: pointer !important;
  color: #fff;
  /* No transition on transform — Mapbox GL JS uses transform to position this element */
}

.cluster-marker:hover .cluster-icon {
  transform: scale(1.1);
}

.cluster-marker:hover .cluster-icon {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(94, 129, 172, 0.5);
}

/* Custom Marker Styling - Basic dot */
.custom-marker {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.custom-marker:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: scale(1.2);
}

.custom-marker.selected {
  width: 26px !important;
  height: 26px !important;
  border: 3px solid var(--color-accent);
  box-shadow: 0 0 0 4px rgba(94, 129, 172, 0.3);
}

/* ========================================
   MAPBOX GL MARKER - Let Mapbox handle positioning
   DO NOT override position or transform properties!
   ======================================== */

/* Custom cluster marker container */
.custom-cluster {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Custom Marker with Label - Shows name and location */
.custom-marker-with-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
  pointer-events: auto !important;
  overflow: visible !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Route focus: completely hidden (non-route markers) */
.custom-marker-with-label.route-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Route focus: dimmed mode (toggle "Vis alle") */
.custom-marker-with-label.route-dimmed {
  opacity: 0.15 !important;
  filter: grayscale(1);
  pointer-events: none !important;
}

/* Category icon marker */
.custom-marker-with-label .marker-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========================================
   PREMIUM SVG ICON STYLES
   Stiliserte SVG-ikoner for premium markører
   ======================================== */

/* SVG icon wrapper */
.custom-marker-with-label .marker-icon .marker-svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* SVG icon styling */
.custom-marker-with-label .marker-icon .marker-svg-icon svg {
  width: 22px;
  height: 22px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Combined markers with multiple SVG icons */
.custom-marker-with-label .marker-icon.combined .marker-svg-icon {
  width: auto;
  height: auto;
}

.custom-marker-with-label .marker-icon.combined .marker-svg-icon svg {
  width: 16px;
  height: 16px;
}

/* Larger icons for overdue markers */
.custom-marker-with-label .marker-icon[data-status="forfalt"] .marker-svg-icon svg {
  width: 26px;
  height: 26px;
}

/* Dynamic service type markers - color set via CSS variable */
.custom-marker-with-label .marker-icon[style*="--service-color"] {
  background: linear-gradient(135deg, var(--service-color), var(--service-color-dark, var(--service-color)));
}

/* ========================================
   LEGACY MARKER CATEGORY STYLES
   Disse stilene støtter eksisterende El-Kontroll + Brannvarsling kunder.
   Dynamiske stiler injiseres via JavaScript (injectDynamicMarkerStyles)
   for nye bransjer. IKKE FJERN - nødvendig for bakoverkompatibilitet.
   ======================================== */

/* El-kontroll - yellow/gold (legacy) */
.custom-marker-with-label .marker-icon.el-kontroll {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}

/* Brannvarsling - bright red (legacy) */
.custom-marker-with-label .marker-icon.brannvarsling {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Combined - split with bolt and flame */
.custom-marker-with-label .marker-icon.combined {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background: linear-gradient(135deg, #F59E0B 0%, #F59E0B 50%, #DC2626 50%, #DC2626 100%);
  font-size: 15px;
}

/* Generisk service - blå (MVP-modus standard) */
.custom-marker-with-label .marker-icon.service {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
}

/* Unknown category - gray styling for categories from other industries */
.custom-marker-with-label .marker-icon.unknown-category {
  background: linear-gradient(135deg, #6B7280, #4B5563);
  border: 2px dashed #9CA3AF;
  opacity: 0.85;
}

.custom-marker-with-label .marker-icon.unknown-category::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #9CA3AF;
  border-radius: 50%;
  border: 1px solid white;
}

/* Status-based border colors using data-status attribute */
/* forfalt = overdue (red) - kontroll forfalt - utropstegn-badge */
/* VIKTIG: Bruker !important for å overskrive category-spesifikke bakgrunner */
.custom-marker-with-label .marker-icon[data-status="forfalt"] {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-width: 3px;
  border-color: #ef4444;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(239, 68, 68, 0.4);
  z-index: 100 !important;
  position: relative;
}
/* Utropstegn-badge for forfalte markører */
.custom-marker-with-label .marker-icon[data-status="forfalt"]::after {
  content: '!';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 101;
}
/* Behold kategori-bakgrunn for forfalt status */
.custom-marker-with-label .marker-icon.el-kontroll[data-status="forfalt"] {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
}
.custom-marker-with-label .marker-icon.brannvarsling[data-status="forfalt"] {
  background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
}
.custom-marker-with-label .marker-icon.combined[data-status="forfalt"] {
  background: linear-gradient(135deg, #F59E0B 0%, #F59E0B 50%, #DC2626 50%, #DC2626 100%) !important;
}

@keyframes glow-critical {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(239, 68, 68, 0.8),
      0 0 40px rgba(239, 68, 68, 0.5),
      0 0 60px rgba(239, 68, 68, 0.3),
      inset 0 0 15px rgba(239, 68, 68, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 30px rgba(239, 68, 68, 1),
      0 0 60px rgba(239, 68, 68, 0.7),
      0 0 90px rgba(239, 68, 68, 0.4),
      inset 0 0 20px rgba(239, 68, 68, 0.5);
    transform: scale(1.08);
  }
}

/* snart = soon (amber/orange) - kontroll innen 30 dager - rolig statisk glød */
.custom-marker-with-label .marker-icon[data-status="snart"] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-width: 3px;
  border-color: #f59e0b;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(245, 158, 11, 0.4);
  z-index: 75 !important;
}
/* Behold kategori-bakgrunn for snart status */
.custom-marker-with-label .marker-icon.el-kontroll[data-status="snart"] {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
}
.custom-marker-with-label .marker-icon.brannvarsling[data-status="snart"] {
  background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
}
.custom-marker-with-label .marker-icon.combined[data-status="snart"] {
  background: linear-gradient(135deg, #F59E0B 0%, #F59E0B 50%, #DC2626 50%, #DC2626 100%) !important;
}

@keyframes glow-warning {
  0%, 100% {
    box-shadow:
      0 0 15px rgba(245, 158, 11, 0.7),
      0 0 30px rgba(245, 158, 11, 0.4),
      0 0 45px rgba(245, 158, 11, 0.2),
      inset 0 0 10px rgba(245, 158, 11, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 25px rgba(245, 158, 11, 0.9),
      0 0 50px rgba(245, 158, 11, 0.5),
      0 0 70px rgba(245, 158, 11, 0.3),
      inset 0 0 15px rgba(245, 158, 11, 0.3);
    transform: scale(1.04);
  }
}

/* ok = 31-90 dager til kontroll (lyseblå border) - subtil glow */
.custom-marker-with-label .marker-icon[data-status="ok"] {
  border-color: #3b82f6;
  box-shadow:
    0 0 10px rgba(59, 130, 246, 0.5),
    0 0 20px rgba(59, 130, 246, 0.25),
    inset 0 0 8px rgba(59, 130, 246, 0.15);
}

/* god = over 90 dager til kontroll (green border) - subtil glow */
.custom-marker-with-label .marker-icon[data-status="god"] {
  border-color: #22c55e;
  box-shadow:
    0 0 10px rgba(34, 197, 94, 0.5),
    0 0 20px rgba(34, 197, 94, 0.25),
    inset 0 0 8px rgba(34, 197, 94, 0.15);
}

/* ukjent = ingen dato registrert (grå border) - dempet */
.custom-marker-with-label .marker-icon[data-status="ukjent"] {
  border-color: #6b7280;
  box-shadow: 0 0 8px rgba(107, 114, 128, 0.3);
  opacity: 0.8;
}

/* Warning badge for overdue/soon */
.custom-marker-with-label .marker-warning-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: #FF3B30;
  color: #fff;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Legacy marker-dot support */
.custom-marker-with-label .marker-dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  transition: all 0.25s ease;
  background: #FF9500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Warning icon inside marker dot (legacy) */
.custom-marker-with-label .marker-warning {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 14px;
  height: 14px;
  background: #FF3B30;
  color: #fff;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@keyframes pulse-warning {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.6);
  }
}

.custom-marker-with-label:hover .marker-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(94, 129, 172, 0.4);
}

.custom-marker-with-label:hover .marker-dot {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  box-shadow: 0 0 0 4px rgba(94, 129, 172, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
  border-color: var(--color-accent);
}

.custom-marker-with-label:hover .marker-label {
  background: #1a1a1a;
  border-bottom-color: #FF9500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.custom-marker-with-label .marker-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  order: -1;
  background: rgba(0, 0, 0, 0.9) !important;
  padding: 4px 8px !important;
  border-radius: 4px;
  border-left: none !important;
  border-bottom: 2px solid #FF9500 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap;
  max-width: 200px;
  transition: all 0.25s ease;
  pointer-events: none;
}

.custom-marker-with-label .marker-name {
  display: block !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.4 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.3px;
}

.custom-marker-with-label .marker-address {
  display: block !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 500 !important;
  color: #e0e0e0 !important;
  line-height: 1.2 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.custom-marker-with-label .marker-location {
  display: block !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  color: #FFD699 !important;
  line-height: 1.2 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Selected marker with label */
.custom-marker-with-label.selected .marker-dot {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(94, 129, 172, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.custom-marker-with-label.selected .marker-label {
  background: rgba(0, 0, 0, 0.95) !important;
  border-bottom-color: #FF9500 !important;
  border-bottom-width: 3px;
  box-shadow: 0 2px 12px rgba(94, 129, 172, 0.5), 0 0 0 2px rgba(94, 129, 172, 0.3) !important;
}

.custom-marker-with-label.selected .marker-name {
  color: #FFFFFF !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  font-weight: 800 !important;
}

.custom-marker-with-label.selected .marker-address {
  color: #e0e0e0 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.custom-marker-with-label.selected .marker-location {
  color: #FFD699 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Pulserende ring rundt markør når en kunde fokuseres fra listen.
   Gjør koblingen mellom listen og kartet eksplisitt visuelt. */
@keyframes marker-focus-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 18px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.custom-marker-with-label.marker-focus-pulse .marker-icon {
  animation: marker-focus-pulse 1s cubic-bezier(0.4, 0, 0.2, 1) 3;
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  .custom-marker-with-label.marker-focus-pulse .marker-icon { animation: none; }
}

/* Kart-tilt (3D-perspektiv): labels fader for å unngå overlapping. */
#map.map-tilted .marker-label {
  opacity: 0.4;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
#map.map-tilted .custom-marker-with-label:hover .marker-label,
#map.map-tilted .custom-marker-with-label.selected .marker-label {
  opacity: 1;
}
/* Enkeltmarkører (isolerte kunder) beholder navne-labelen også i utzoomet klynge-visning.
   Tidligere skjulte .map-far (zoom < 11) disse helt — men det skjulte også de isolerte
   kundene som IKKE inngår i en klynge, så man måtte trykke for å se hvem de var. Tette
   områder samles uansett i donut-/sammenfall-merker, så de gjenværende enkeltmarkørene er
   spredt nok til at navnene ikke kolliderer. */
@media (prefers-reduced-motion: reduce) {
  #map.map-tilted .marker-label { transition: none; }
}

/* Når popup er åpen: andre labels fader ned slik at kartet rundt popupen blir mer ryddig.
   Den åpne kundens egen label beholder full opacity. */
#map.popup-open .marker-label {
  opacity: 0.18;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
#map.popup-open .custom-marker-with-label[data-customer-id]:hover .marker-label,
#map.popup-open .custom-marker-with-label.popup-customer .marker-label {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #map.popup-open .marker-label { transition: none; }
}

/* Premium-CTA: knappestater for "Varsle kunde" og lignende handlinger. */
.btn.btn-success-state,
button.btn-success-state {
  background: var(--color-good, #4caf50) !important;
  color: #fff !important;
  cursor: default !important;
  pointer-events: none;
  opacity: 1 !important;
}
.btn.btn-success-state:hover,
button.btn-success-state:hover {
  background: var(--color-good, #4caf50) !important;
}
@keyframes btn-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.btn-shake { animation: btn-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn-shake { animation: none; }
}

/* System-auto creator chip (auto-planlagte avtaler) */
.avtale-creator.system-auto {
  background: rgba(120, 120, 140, 0.15);
  color: var(--color-text-dim, #9ca3af);
  font-style: italic;
}

/* Compact markers when spiderfied - hide labels, smaller icons */
.spiderfied-marker .marker-label {
  display: none !important;
}

.spiderfied-marker .marker-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

.spiderfied-marker .marker-icon .marker-svg-icon {
  width: 20px !important;
  height: 20px !important;
}

.spiderfied-marker .marker-icon .marker-svg-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* Show label on hover for spiderfied markers */
.spiderfied-marker:hover .marker-label {
  display: flex !important;
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(30, 30, 30, 0.95);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
}

/* Status colors for marker dot - high contrast for satellite imagery */
.custom-marker-with-label.status-overdue .marker-dot {
  background: var(--color-status-overdue) !important;  /* Magenta/pink - forfalt */
}

@keyframes pulse-overdue-dot {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(220, 38, 38, 0.8);
    transform: scale(1.15);
  }
}

.custom-marker-with-label.status-soon .marker-dot {
  background: var(--color-status-soon) !important;  /* Amber/gold */
}

.custom-marker-with-label.status-ok .marker-dot {
  background: var(--color-status-ok) !important;  /* Lyseblå */
}

.custom-marker-with-label.status-good .marker-dot {
  background: var(--color-status-good) !important;  /* Grønn */
}

.custom-marker-with-label.status-unknown .marker-dot {
  background: var(--color-status-unknown) !important;  /* Blågrå */
}

/* CRITICAL: Ensure marker-label ALWAYS has dark background regardless of parent status class */
.custom-marker-with-label.status-overdue .marker-label,
.custom-marker-with-label.status-soon .marker-label,
.custom-marker-with-label.status-ok .marker-label,
.custom-marker-with-label.status-good .marker-label,
.custom-marker-with-label.status-unknown .marker-label {
  background: rgba(0, 0, 0, 0.95) !important;
}

/* Status-based colors ONLY for popup-status elements */
.popup-status.status-overdue {
  background: var(--color-status-overdue) !important;
}

.popup-status.status-soon {
  background: var(--color-status-soon) !important;
}

.popup-status.status-ok {
  background: var(--color-status-ok) !important;
}

.popup-status.status-good {
  background: var(--color-status-good) !important;
}

.popup-status.status-unknown {
  background: var(--color-status-unknown) !important;
}

/* Prevent customer-item from getting status background */
.customer-item.status-overdue,
.customer-item.status-soon,
.customer-item.status-ok,
.customer-item.status-good,
.customer-item.status-unknown {
  background: var(--color-bg-tertiary);
}

.customer-item.status-overdue:hover,
.customer-item.status-soon:hover,
.customer-item.status-ok:hover,
.customer-item.status-good:hover,
.customer-item.status-unknown:hover {
  background: var(--color-bg-hover);
}

/* Marker animations removed - was causing visibility issues */

/* Mapbox GL JS Popup Styling - Dark Theme */
.mapboxgl-popup-content {
  background: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid var(--color-border) !important;
  padding: 12px 14px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.5 !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
}

.mapboxgl-popup-content h3 {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

.mapboxgl-popup-content p {
  margin: 4px 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.mapboxgl-popup-content .popup-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.mapboxgl-popup-content .popup-status.status-overdue {
  background: var(--color-status-overdue);
  color: #fff !important;
}

.mapboxgl-popup-content .popup-status.status-soon {
  background: var(--color-status-soon);
  color: #000 !important;
}

.mapboxgl-popup-content .popup-status.status-ok {
  background: var(--color-status-ok);
  color: #fff !important;
}

.mapboxgl-popup-content .popup-status.status-good {
  background: var(--color-status-good);
  color: #fff !important;
}

.mapboxgl-popup-content .popup-status.status-unknown {
  background: var(--color-status-unknown);
  color: #fff !important;
}

/* Fix: Forhindre at service-type ikoner forsvinner mot status-bakgrunn */
.popup-status.status-overdue i,
.popup-status.status-soon i,
.popup-status.status-ok i,
.popup-status.status-good i,
.mapboxgl-popup-content .popup-status.status-overdue i,
.mapboxgl-popup-content .popup-status.status-soon i,
.mapboxgl-popup-content .popup-status.status-ok i,
.mapboxgl-popup-content .popup-status.status-good i {
  color: inherit !important;
}

.mapboxgl-popup-content .popup-control-info {
  margin-top: 8px;
}

.mapboxgl-popup-content .popup-status .control-days {
  font-weight: 700;
  margin-left: 4px;
}

.mapboxgl-popup-content .popup-status .control-date {
  font-weight: 400;
  margin-left: 6px;
  opacity: 0.9;
}

.mapboxgl-popup-content .popup-controls {
  margin-top: 8px;
  padding: 10px;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.mapboxgl-popup-content .popup-controls p {
  margin: 4px 0;
  font-size: var(--font-size-sm);
}

/* Tag badges in popup */
.popup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 8px;
}

.tag-badge-small {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tag-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.tag-filter-buttons {
  flex-wrap: wrap;
}

.tag-btn {
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-icon-tiny {
  background: none;
  border: 1px solid var(--color-border, #333);
  color: var(--color-text-secondary, #999);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  transition: all 0.15s;
  padding: 0;
}

.btn-icon-tiny:hover {
  background: var(--color-primary, #5E81AC);
  border-color: var(--color-primary, #5E81AC);
  color: white;
}

.btn-icon-danger:hover {
  background: var(--color-danger, #BF616A);
  border-color: var(--color-danger, #BF616A);
  color: white;
}

/* Tag Filter Groups */
.tag-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin-bottom: 4px;
}

.tag-filter-group-label {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  margin-top: 4px;
}

.tag-btn-grouped {
  margin-left: 8px;
}

/* Tag Manager Groups */
.tag-group-section {
  margin-bottom: 8px;
  border: 1px solid var(--color-border, #333);
  border-radius: 8px;
  overflow: hidden;
}

.tag-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface-2, #1a1a2e);
}

.tag-group-name {
  font-weight: 600;
  font-size: 14px;
}

.tag-group-count {
  color: var(--color-text-muted, #666);
  font-size: 12px;
}

.tag-group-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.tag-group-items {
  padding: 4px 12px 8px;
}

.tag-group-add-item {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.tag-inline-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--color-border, #333);
  border-radius: 6px;
  background: var(--color-surface, #0f0f23);
  color: var(--color-text, #e0e0e0);
}

/* ============ DOKUMENTASJON-fane (org-vidt foto-galleri) ============ */
.dok-container {
  padding: 20px;
  max-width: 100%;
}
.tab-subtitle {
  color: var(--color-text-secondary, #9ca3af);
  font-size: 13px;
  margin-top: -4px;
  margin-bottom: 16px;
}
/* ============ FULLSKJERM-PREVIEW (felles for visit-history + dokumentasjon) ============ */
.vh-preview {
  position: fixed; inset: 0;
  z-index: 100060;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vh-preview.vh-preview-open { opacity: 1; }
.vh-preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 22px 14px;
  color: #fff;
  flex-shrink: 0;
}
.vh-preview-info {
  flex: 1;
  font-size: 13.5px;
  opacity: 0.85;
  text-align: center;
}
.vh-preview-action {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 160ms;
}
.vh-preview-action:hover { background: rgba(255, 255, 255, 0.2); }
.vh-preview-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
  min-height: 0;
}
.vh-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* ============ NYTT KUNDELISTE-FØRST DESIGN ============ */
.dok-container {
  padding: 12px 16px;
  max-width: 100%;
}
.dok-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  height: calc(100vh - 170px);
  min-height: 500px;
}
@media (max-width: 1100px) {
  .dok-layout { grid-template-columns: 200px 1fr; gap: 10px; }
}
@media (max-width: 800px) {
  .dok-layout { grid-template-columns: 1fr; height: auto; }
}

/* Sidebar — kundeliste */
.dok-sidebar {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dok-sidebar-header {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dok-sidebar-header .dok-search {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #fff;
  font-size: 13px;
}
.dok-sidebar-header .dok-search:focus {
  outline: none;
  border-color: var(--primary, #10b981);
}
.dok-sidebar-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  font-size: 11.5px;
  color: var(--color-text-secondary, #9ca3af);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.015);
}
.dok-sidebar-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dok-sidebar-stats i { font-size: 10px; opacity: 0.7; }
.dok-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.dok-kunde-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-primary, #f4f6fb);
  transition: background 160ms;
}
.dok-kunde-item:hover { background: rgba(255, 255, 255, 0.04); }
.dok-kunde-item.active {
  background: rgba(16, 185, 129, 0.14);
  box-shadow: inset 3px 0 0 var(--primary, #10b981);
}
.dok-kunde-name {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 4px;
}
.dok-kunde-sted {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--color-text-muted, #8c9bb0);
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dok-kunde-sted i { font-size: 9px; opacity: 0.8; }
.dok-kunde-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
}
.dok-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 10.5px;
}
.dok-stat-pill.foto {
  background: rgba(16, 185, 129, 0.14);
  color: var(--primary, #10b981);
}
.dok-stat-pill.draft {
  background: rgba(255, 152, 0, 0.16);
  color: #ffb74d;
}
.dok-stat-pill.notat {
  background: rgba(96, 165, 250, 0.16);
  color: #60a5fa;
}
.dok-stat-time {
  margin-left: auto;
  color: var(--color-text-secondary, #9ca3af);
  font-size: 10.5px;
}

/* Hoved-detail */
.dok-main {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.dok-empty-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--color-text-secondary, #9ca3af);
}
.dok-empty-main i { font-size: 56px; opacity: 0.4; margin-bottom: 16px; }
.dok-empty-main h3 { color: var(--color-text-primary, #f4f6fb); font-size: 20px; margin: 0 0 8px; }
.dok-empty-main p { font-size: 14px; max-width: 380px; line-height: 1.5; margin: 0; }

.dok-detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.dok-detail-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.dok-detail-meta {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--color-text-secondary, #9ca3af);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dok-pill-draft {
  background: rgba(255, 152, 0, 0.18);
  color: #ffb74d;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.dok-detail-actions {
  display: flex;
  gap: 6px;
}
.dok-detail-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dok-detail-title h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.dok-detail-back {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--color-text-secondary, #9ca3af);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  transition: background 160ms, color 160ms;
}
.dok-detail-back:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.dok-detail-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--color-text-secondary, #9ca3af);
}
.dok-detail-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dok-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.dok-section { display: flex; flex-direction: column; gap: 14px; }
.dok-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary, #f4f6fb);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dok-section-title i { color: var(--primary, #10b981); font-size: 13px; }
.dok-section:last-child .dok-section-title i { color: #60a5fa; }
.dok-empty-small {
  padding: 24px 12px;
  text-align: center;
  color: var(--color-text-secondary, #9ca3af);
  font-size: 13px;
  font-style: italic;
}

.dok-foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.dok-foto-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms;
}
.dok-foto-tile:hover { transform: scale(1.02); border-color: var(--primary, #10b981); }
.dok-foto-tile.is-draft { border-color: rgba(255, 152, 0, 0.4); }
.dok-foto-tile.has-caption { border-color: rgba(96, 165, 250, 0.4); }
.dok-foto-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dok-foto-download {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: none;
  width: 30px; height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0.85;
  transition: background 160ms, transform 160ms;
  z-index: 3;
}
.dok-foto-tile:hover .dok-foto-download { opacity: 1; transform: scale(1.05); }
.dok-foto-download:hover { background: var(--primary, #10b981); }
.dok-foto-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
  padding: 16px 8px 5px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
.dok-foto-tile:hover .dok-foto-meta { opacity: 1; }
.dok-foto-draft-tag {
  background: rgba(255, 152, 0, 0.85);
  color: #1a1a1a;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
}
.dok-foto-caption {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 10px;
  color: #fff;
  background: rgba(96, 165, 250, 0.92);
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 600;
  pointer-events: none;
  max-width: calc(100% - 50px);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dok-notat-compose {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  background: rgba(96, 165, 250, 0.04);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 14px;
}
.dok-notat-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--color-text-primary, #fff);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 42px;
}
.dok-notat-input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.dok-notat-save {
  background: #60a5fa;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 160ms;
}
.dok-notat-save:hover { background: #3b82f6; }
.dok-notat-save:active { transform: translateY(1px); }
.dok-notat-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 160ms, color 160ms, background 160ms;
}
.dok-notat-card:hover .dok-notat-delete { opacity: 1; }
.dok-notat-delete:hover { color: #e57373; background: rgba(229, 115, 115, 0.12); }

.dok-notat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dok-notat-card {
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-left: 3px solid rgba(96, 165, 250, 0.6);
  border-radius: 10px;
  padding: 12px 14px;
}
.dok-notat-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.dok-notat-header strong { color: var(--color-text-primary, #f4f6fb); }
.dok-notat-time { color: var(--color-text-secondary, #9ca3af); font-size: 11.5px; }
.dok-notat-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-primary, #f4f6fb);
  white-space: pre-wrap;
}

/* Two-column split: bilder venstre, notater høyre */
.dok-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .dok-split { grid-template-columns: 1fr; }
}
.dok-column {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  overflow: hidden;
}
.dok-column-foto {
  background: rgba(16, 185, 129, 0.03);
  border-color: rgba(16, 185, 129, 0.14);
}
.dok-column-notater {
  background: rgba(96, 165, 250, 0.04);
  border-color: rgba(96, 165, 250, 0.18);
}
.dok-column-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dok-column-foto .dok-column-header { color: var(--primary, #10b981); }
.dok-column-foto .dok-column-header i { color: var(--primary, #10b981); }
.dok-column-notater .dok-column-header { color: #60a5fa; }
.dok-column-notater .dok-column-header i { color: #60a5fa; }
.dok-column-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-primary, #f4f6fb);
}
.dok-column-body {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 280px);
}

.dok-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dok-tab {
  background: none;
  border: none;
  color: var(--color-text-secondary, #9ca3af);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 160ms, border-color 160ms;
}
.dok-tab:hover { color: var(--color-text-primary, #f4f6fb); }
.dok-tab.active {
  color: var(--primary, #10b981);
  border-bottom-color: var(--primary, #10b981);
}
.dok-notat-card {
  background: rgba(96, 165, 250, 0.05);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
}
.dok-notat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.dok-notat-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-primary, #f4f6fb);
  white-space: pre-wrap;
}

.dok-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.dok-search {
  flex: 1;
  min-width: 200px;
  background: var(--color-bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--color-text-primary, #fff);
  font-size: 13px;
}
.dok-search:focus { outline: none; border-color: var(--primary, #10b981); }
.dok-date {
  background: var(--color-bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--color-text-primary, #fff);
  font-size: 12px;
  cursor: pointer;
}
.dok-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--color-text-secondary, #9ca3af);
  align-items: center;
}
.dok-stats .dok-draft-pill {
  background: rgba(255,152,0,0.18);
  color: #ffb74d;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.dok-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dok-loading, .dok-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-secondary, #9ca3af);
}
.dok-loading i, .dok-empty i { font-size: 24px; margin-bottom: 10px; display: block; }
.dok-empty i { font-size: 36px; opacity: 0.5; }
.dok-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
}
.dok-group.is-draft {
  background: rgba(255,152,0,0.05);
  border-color: rgba(255,152,0,0.22);
}
.dok-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dok-group-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  min-width: 0;
}
.dok-group-customer {
  background: none;
  border: none;
  color: var(--primary, #10b981);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.dok-group-customer:hover { text-decoration: underline; }
.dok-group-date {
  color: var(--color-text-secondary, #9ca3af);
  font-size: 12.5px;
}
.dok-group-by {
  color: var(--color-text-secondary, #9ca3af);
  font-size: 12.5px;
  font-style: italic;
}
.dok-draft-badge {
  background: rgba(255,152,0,0.2);
  color: #ffb74d;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dok-group-history-btn {
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--color-text-secondary, #9ca3af);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms, color 160ms;
}
.dok-group-history-btn:hover {
  background: var(--primary, #10b981);
  color: #fff;
}
.dok-group-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.dok-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dok-tile:hover { transform: scale(1.04); }
.dok-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dok-tile-download {
  position: absolute;
  bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border: none;
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 160ms, background 160ms;
}
.dok-tile:hover .dok-tile-download { opacity: 1; }
.dok-tile-download:hover { background: var(--primary, #10b981); }
.dok-load-more-wrap {
  text-align: center;
  padding: 16px 0;
}

/* Felt-notat-strip i kundekort-popup */
.mapboxgl-popup-content .popup-notat-strip:empty { display: none; }
.mapboxgl-popup-content .popup-notat-strip {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.popup-notat-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.popup-notat-strip-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-secondary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.popup-notat-strip-label i { color: #60a5fa; }
.popup-notat-strip-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.popup-notat-item {
  background: rgba(96, 165, 250, 0.06);
  border-left: 2px solid rgba(96, 165, 250, 0.5);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 12px;
}
.popup-notat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--color-text-secondary, #9ca3af);
  margin-bottom: 3px;
}
.popup-notat-meta strong {
  color: var(--color-text-primary, #f4f6fb);
  font-weight: 600;
}
.popup-notat-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-primary, #f4f6fb);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}
.popup-notat-more {
  background: none;
  border: none;
  color: var(--primary, #10b981);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  padding: 4px 0 0;
  transition: opacity 160ms;
}
.popup-notat-more:hover { opacity: 0.75; }

/* Foto-strip i kundekort-popup */
.mapboxgl-popup-content .popup-foto-strip:empty { display: none; }
.mapboxgl-popup-content .popup-foto-strip {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.popup-foto-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.popup-foto-strip-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-secondary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.popup-foto-strip-label i { color: #ffb74d; }
.popup-foto-draft-badge {
  background: rgba(255,152,0,0.18);
  color: #ffb74d;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  letter-spacing: 0.06em;
}
.popup-foto-see-all {
  background: none;
  border: none;
  color: var(--primary, #10b981);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  transition: opacity 160ms;
}
.popup-foto-see-all:hover { opacity: 0.75; }
.popup-foto-strip-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.popup-foto-strip-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.popup-foto-strip-tile:hover { transform: scale(1.04); }
.popup-foto-strip-tile.is-draft {
  border-color: rgba(255,152,0,0.4);
  box-shadow: 0 0 0 1px rgba(255,152,0,0.2);
}
.popup-foto-strip-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.popup-foto-strip-more {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 6px;
  color: var(--color-text-secondary, #9ca3af);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms;
}
.popup-foto-strip-more:hover {
  background: rgba(16,185,129,0.1);
  color: var(--primary, #10b981);
}

.mapboxgl-popup-content .popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.mapboxgl-popup-content .popup-actions .btn {
  flex: 1 1 auto;
  min-width: 80px;
  padding: 6px 8px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.mapboxgl-popup-tip {
  display: none;
}

.mapboxgl-popup-close-button {
  color: var(--color-text-muted) !important;
  font-size: 20px !important;
  padding: 4px 8px !important;
}

.mapboxgl-popup-close-button:hover {
  color: var(--color-accent) !important;
}

/* Cluster Styling - Modern Professional */
/* ============================================================
   PREMIUM KLYNGE-DONUTS (Mapbox GL HTML-markører)
   Rolig mørk sirkel + totalantall i midten. Rød ring fylles
   proporsjonalt med andelen forfalt. Aldri en «rød klump».
   ============================================================ */
/* YTRE element: posisjoneres av Mapbox via .mapboxgl-marker { position:absolute } +
   transform hver frame. IKKE sett `position` her — det overstyrer Mapbox sin absolute
   (style.css lastes etter mapbox-gl.css, lik spesifisitet → vår vinner) og markøren
   faller ut av transform-posisjonering og «flyter» rundt. Heller ingen transition/
   transform på dette elementet (det lager streker). Alt visuelt ligger i .cd-inner. */
.cluster-donut {
  cursor: pointer;
}
.cluster-donut:focus-visible { outline: none; }
/* INDRE element: all visuell stil + hover-skalering (transition trygt her). */
.cluster-donut .cd-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cluster-donut:hover .cd-inner,
.cluster-donut:focus-visible .cd-inner {
  transform: scale(1.08);
}
.cluster-donut:hover,
.cluster-donut:focus-visible {
  z-index: 5;
}
.cluster-donut:focus-visible .cd-track {
  stroke: rgba(96, 165, 250, 0.9);
  stroke-width: 3;
}
.cluster-donut .cd-svg {
  display: block;
  /* Start ring-buen kl. 12 (SVG-sirkler starter kl. 3) */
  transform: rotate(-90deg);
}
.cluster-donut .cd-track {
  fill: #1b2530;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 2.6;
}
.cluster-donut .cd-arc {
  fill: none;
  stroke-width: 3.6;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Rødt segment = andel forfalt (alltid, uansett horisont) */
.cluster-donut .cd-arc-over { stroke: #ef4444; }
/* Amber segment = andel kommende innenfor valgt horisont */
.cluster-donut .cd-arc-soon { stroke: #f59e0b; }
.cluster-donut .cd-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cluster-donut .cd-count {
  color: #fff;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cluster-donut .cd-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  background: #ef4444;
  color: #fff;
  border: 2px solid #0f141a;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.cluster-donut .cd-name {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 3px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cluster-donut .cd-inner,
  .cluster-donut .cd-arc { transition: none; }
}

/* ============================================================
   TIDSHORISONT-FILTER — bor i Kunder-fanen, over kategoriene.
   En enkel linse (som kategori-filteret); kartets donut-buer +
   dimming reflekterer valget. Ingen flytende kart-element.
   ============================================================ */
.horizon-filter {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.horizon-filter-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.horizon-filter .horizon-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.horizon-filter .horizon-chip {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}
.horizon-filter .horizon-chip:hover {
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.22);
}
.horizon-filter .horizon-chip:active { transform: scale(0.97); }
.horizon-filter .horizon-chip.is-active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}
.horizon-filter .horizon-chip:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 1px;
}
.horizon-filter .horizon-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}
.horizon-filter .hz-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.horizon-filter .hz-stat::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.horizon-filter .hz-forfalt::before { background: #ef4444; }
.horizon-filter .hz-kommende::before { background: #f59e0b; }

/* Tittel-rad med hjelp-ikon */
.horizon-filter .horizon-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.horizon-filter .horizon-filter-head .horizon-filter-title { margin-bottom: 0; }
.horizon-filter .horizon-info {
  appearance: none;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: help;
  padding: 0;
  font-size: 12.5px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.18s ease, color 0.18s ease;
}
.horizon-filter .horizon-info:hover,
.horizon-filter .horizon-info:focus-visible { opacity: 1; color: var(--color-text-primary); }

/* «Fokusér listen»-bryter */
.horizon-filter .horizon-focus {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
}
.horizon-filter .horizon-focus input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.horizon-filter .horizon-focus-track {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.horizon-filter .horizon-focus-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s ease;
}
.horizon-filter .horizon-focus input:checked + .horizon-focus-track {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: transparent;
}
.horizon-filter .horizon-focus input:checked + .horizon-focus-track .horizon-focus-thumb {
  transform: translateX(16px);
  background: #fff;
}
.horizon-filter .horizon-focus input:focus-visible + .horizon-focus-track {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 2px;
}
.horizon-filter .horizon-focus-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color 0.18s ease;
}
.horizon-filter.is-focused .horizon-focus-label { color: var(--color-text-primary); }
@media (prefers-reduced-motion: reduce) {
  .horizon-filter .horizon-focus-thumb { transition: none; }
}

/* Kundeliste: venstre-aksent på kunder med arbeid i valgt horisont (synk med kartet).
   Amber = kommende i vinduet, rødt = forfalt. Ikke-destruktivt (kun box-shadow). */
.customer-item.in-horizon { box-shadow: inset 3px 0 0 0 #f59e0b; }
.customer-item.in-horizon.hz-forfalt { box-shadow: inset 3px 0 0 0 #ef4444; }

/* ============================================================
   FORESLÅTTE OMRÅDER — liste i Kunder-fanen (geografiske klynger
   av arbeid i valgt horisont). Reflekterer tidshorisont-filteret.
   ============================================================ */
.suggested-areas {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.suggested-areas-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.suggested-areas-title i { color: #3b82f6; }
.suggested-areas-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.suggested-area-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color 0.18s ease, transform 0.1s ease;
}
.suggested-area-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.suggested-area-card .sa-rank {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suggested-area-card .sa-body { flex: 1; min-width: 0; }
.suggested-area-card .sa-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggested-area-card .sa-meta {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.suggested-area-card .sa-meta .sa-forfalt {
  color: #f87171;
  font-weight: 600;
}
.suggested-area-card .sa-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.suggested-area-card .sa-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.suggested-area-card .sa-btn:hover {
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}
.suggested-area-card .sa-btn:active { transform: scale(0.92); }
.suggested-area-card .sa-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: transparent;
  color: #fff;
}
.suggested-areas-empty {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 4px 2px;
  line-height: 1.4;
}
.suggested-areas-more {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  text-align: center;
  padding-top: 4px;
}

/* ============================================================
   KART-VERKTØY-PILLE — 3D + markering, øverst i midten av kartet
   (opprettes i #sharedMapContainer av map-core.js / area-select.js).
   ============================================================ */
.map-toolbar-center {
  padding: 5px;
  border-radius: 12px;
  background: rgba(18, 24, 31, 0.78);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Kunder utenfor valgt horisont dempes til rolig kontekst (aldri rødt). Selve ikonet
   gråes/fades, men NAVNET holdes leselig — man skal fortsatt se HVEM uten å trykke, også
   når kunden er utenfor det valgte tidsvinduet. (Dimmer ikonet separat i stedet for hele
   markøren, fordi parent-opacity ville kappet label-opaciteten.) */
.custom-marker-with-label.horizon-dimmed .marker-icon {
  opacity: 0.85;
  filter: grayscale(0.6) saturate(0.7);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}
.custom-marker-with-label.horizon-dimmed .marker-label {
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .custom-marker-with-label.horizon-dimmed .marker-icon,
  .custom-marker-with-label.horizon-dimmed .marker-label { transition: none; }
}

@keyframes cluster-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(94, 129, 172, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(94, 129, 172, 0);
  }
}

.custom-cluster {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50%;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  font-size: var(--font-size-xs) !important;
  cursor: pointer !important;
}

.custom-cluster:hover .cluster-icon {
  transform: scale(1.08);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(94, 129, 172, 0.5);
}

.cluster-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  border-radius: 50%;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: cluster-pulse 3s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Unified dark professional style with sizes */
.cluster-icon.cluster-small {
  width: 50px;
  height: 50px;
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 2px solid rgba(94, 129, 172, 0.5);
}
.cluster-icon.cluster-medium {
  width: 58px;
  height: 58px;
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 2px solid rgba(94, 129, 172, 0.6);
}
.cluster-icon.cluster-large {
  width: 66px;
  height: 66px;
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 2px solid rgba(94, 129, 172, 0.7);
}
.cluster-icon.cluster-xlarge {
  width: 74px;
  height: 74px;
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 3px solid rgba(94, 129, 172, 0.8);
}

.cluster-count {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cluster-area {
  font-size: 8px;
  text-align: center;
  padding: 0 2px;
  word-break: break-word;
  max-width: 46px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.9;
  line-height: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cluster warning badge */
.cluster-warning {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  background: linear-gradient(145deg, #FF3B30, #D32F2F);
  color: #fff;
  border-radius: 10px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Cluster size text variations */
.cluster-icon.cluster-medium .cluster-count {
  font-size: 15px;
}

.cluster-icon.cluster-large .cluster-count {
  font-size: 14px;
}

.cluster-icon.cluster-xlarge .cluster-count {
  font-size: 13px;
}

.cluster-icon.cluster-large .cluster-area,
.cluster-icon.cluster-xlarge .cluster-area {
  font-size: 7px;
  max-width: 54px;
}

/* Cluster Popup */
.cluster-popup {
  min-width: 180px;
}

.cluster-popup h3 {
  margin: 0 0 6px 0;
  font-size: 12px;
  color: var(--color-text-primary);
}

.cluster-popup p {
  margin: 0 0 8px 0;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.cluster-popup-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.cluster-popup-actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  padding: 6px 8px;
}

.cluster-customer-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  max-height: 100px;
  overflow-y: auto;
}

.cluster-customer-name {
  font-size: 10px;
  color: var(--color-text-secondary);
  padding: 1px 0;
}

.cluster-more {
  font-size: 10px;
  color: var(--color-text-muted);
  font-style: italic;
  padding-top: 2px;
}

/* Cluster category tags */
.cluster-categories {
  margin: 8px 0;
  padding: 6px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.cluster-category-group {
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--color-text-secondary);
}

.cluster-category-group:last-child {
  margin-bottom: 0;
}

.cluster-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  margin-right: 3px;
  margin-top: 2px;
}

.cluster-tag.type-tag {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
}

.cluster-tag.system-tag {
  background: rgba(99, 102, 241, 0.2);
  color: #818CF8;
}

.cluster-tag.drift-tag {
  background: rgba(236, 72, 153, 0.2);
  color: #F472B6;
}

.cluster-tag.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.cluster-tag.clickable:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Spiderfy removed — Supercluster doesn't include spiderfy */

/* Country labels for map */
.country-label {
  background: transparent;
  border: none;
}

.country-label span {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Scale control styling */
.mapboxgl-ctrl-scale {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-top: none !important;
  color: #fff !important;
  font-size: var(--font-size-xs) !important;
  padding: 2px 5px !important;
}

/* Notification Toast */
.notification-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 20, 30, 0.75);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  color: var(--color-text-primary);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(94, 129, 172, 0.2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10000;
  animation: slideUp 0.3s ease;
}

.notification-toast i {
  color: #10B981;
  font-size: 16px;
}

.notification-toast.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: all 0.3s ease;
}

/* Unknown Category Notification Banner */
.unknown-category-notification {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  z-index: 10001;
  animation: slideDown 0.3s ease;
  max-width: 90%;
}

.unknown-category-notification .notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.unknown-category-notification i.fa-exclamation-triangle {
  font-size: 18px;
}

.unknown-category-notification .btn-close-notification {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 8px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.unknown-category-notification .btn-close-notification:hover {
  opacity: 1;
}

.unknown-category-notification.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Missing Data Tab Styles */
.missing-data-container {
  padding: 12px;
  flex: 1;
  max-height: calc(100vh - 120px);
  overflow-y: scroll;
}

.missing-data-intro {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: 16px;
}

.missing-section {
  background: var(--color-bg-card);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.missing-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.missing-header:hover {
  background: var(--color-bg-elevated);
}

.missing-header i:first-child {
  color: var(--color-orange);
  font-size: 14px;
  width: 18px;
}

.missing-header span:first-of-type {
  flex: 1;
  font-weight: 500;
  font-size: var(--font-size-sm);
}

.missing-count {
  background: var(--color-orange);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.missing-header .toggle-icon {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  transition: transform 0.2s;
}

.missing-header .toggle-icon.rotated {
  transform: rotate(180deg);
}

.missing-list {
  border-top: 1px solid var(--color-border);
  max-height: 300px;
  overflow-y: auto;
}

.missing-list.collapsed {
  display: none;
}

.missing-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s;
}

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

.missing-item:hover {
  background: var(--color-bg-elevated);
}

.missing-item-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.missing-item-address {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.missing-empty {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.missing-badge {
  background: var(--color-orange) !important;
}

/* Route Marker (numbered stops) */
.route-marker {
  background: var(--color-orange) !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(94, 129, 172, 0.4) !important;
  color: #fff !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

/* Start/Home marker for routes */
.route-marker.route-start {
  background: #10B981 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
  font-size: var(--font-size-sm) !important;
}

.route-marker.route-start i {
  color: #fff;
}

/* Route marker with ETA label */
.route-marker.has-eta {
  flex-direction: column !important;
  padding: 2px 0 !important;
  border-radius: 12px !important;
  min-height: 42px !important;
  gap: 0 !important;
}
.route-num { line-height: 1.2; }
.route-eta {
  font-size: 9px !important;
  font-weight: 600 !important;
  opacity: 0.9;
  white-space: nowrap;
  line-height: 1;
}

/* ============================================
   FILTER PANEL (Right Side) - Dark Theme
   ============================================ */

.filter-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: var(--color-bg-secondary);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
  border-left: 1px solid var(--color-border);
  z-index: 1800 !important;
  display: flex;
  flex-direction: row;
  pointer-events: auto !important;
  transition: transform 0.3s ease, width 0.3s ease;
}

.filter-panel.collapsed {
  transform: translateX(280px);
}

.filter-panel.collapsed .filter-panel-toggle {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: -4px 0 15px rgba(94, 129, 172, 0.3);
}

.filter-panel *,
.filter-panel button,
.filter-panel .btn-icon,
.filter-panel .customer-item,
.filter-panel .section-header {
  pointer-events: auto !important;
}

/* Toggle Button */
.filter-panel-toggle {
  position: absolute;
  left: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 100px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  z-index: 10001;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

.filter-panel-toggle:hover {
  background: var(--color-bg-hover);
  color: var(--color-accent);
}

.filter-panel-toggle i {
  transition: transform 0.3s ease;
}

.filter-panel.collapsed .filter-panel-toggle i {
  transform: rotate(180deg);
}

.filter-panel-toggle::after {
  content: 'KUNDER';
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.filter-panel.collapsed .filter-panel-toggle::after {
  opacity: 1;
}

/* Inner Container */
.filter-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.filter-panel-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-panel-header h3 i {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

.customer-count {
  background: var(--color-accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

/* Content */
.filter-panel-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

/* Search Field */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.filter-result-count {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-secondary, #a0a0a0);
  padding: 2px 8px;
  margin-top: 2px;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  transition: all 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.search-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.btn-icon {
  flex: 1;
  padding: 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

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

.btn-icon#addCustomerBtn {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.btn-icon#addCustomerBtn:hover {
  background: var(--color-accent-hover);
}

/* Selection Info */
.selected-info {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding: 4px 0;
}

.selected-info span {
  color: var(--color-accent);
  font-weight: 700;
}

/* Category Filter */
.category-filter {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.category-filter-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-filter-title.clickable-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  margin-bottom: 0;
  transition: color 0.2s;
}

.category-filter-title.clickable-header:hover {
  color: var(--color-accent);
}

.category-filter-title .toggle-icon {
  font-size: var(--font-size-xs);
  transition: transform 0.2s;
}

#driftFilterButtons {
  margin-top: 8px;
}

.category-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.category-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

.category-btn.active {
  background: rgba(94, 129, 172, 0.15);
  border-color: var(--color-accent);
  color: #88a9d0; /* WCAG AA: lysere accent-tekst på mørk tint (#5E81AC ga 3.37:1) */
}

.category-btn i {
  width: 16px;
  text-align: center;
}

/* Kompakte kategori-chips (bryter → skalerer til mange kategorier). Hver chip bærer sin egen
   --cat-color (satt inline) som farger aktiv-tilstanden, så det ikke er hardkodet per kategori. */
.category-chip {
  flex: 0 0 auto;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.category-chip i { width: auto; }
.category-chip.active {
  background: color-mix(in srgb, var(--cat-color, var(--color-accent, #5E81AC)) 16%, transparent);
  border-color: var(--cat-color, var(--color-accent, #5E81AC));
  color: var(--cat-color, #88a9d0);
}
.category-chip.active i { color: var(--cat-color, inherit); }
/* «Flere kategorier»-chip: frost-aksent + stiplet kant + lag-ikon. */
.category-chip--multi { --cat-color: var(--sky-frost, #88C0D0); border-style: dashed; }
.category-chip--multi i { color: var(--sky-frost, #88C0D0); }

/* ── Felles fargede kategori-merker (ikon + navn) — kart-popup m.m. --cat-color settes inline. ── */
.cat-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  color: var(--cat-color, var(--color-text-secondary, #9ca3af));
  background: color-mix(in srgb, var(--cat-color, #888888) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color, #888888) 38%, transparent);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-badge i { font-size: 10px; flex: none; }
.cat-badge--more { --cat-color: var(--color-text-muted, #8c9bb0); font-weight: 700; }

/* Category manage button (gear icon in filter panel) */
.category-manage-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
  transition: color 0.2s;
  margin-left: auto;
}

.category-manage-btn:hover {
  color: var(--color-accent);
}

/* ========================================
   SUBCATEGORY FILTER + MANAGEMENT
   ======================================== */

.subcat-st-block {
  margin-bottom: 14px;
}

.subcat-st-block:last-child {
  margin-bottom: 0;
}

.subcat-st-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.subcat-st-header i {
  font-size: 14px;
}

.subcat-group {
  margin-left: 8px;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--color-border);
}

.subcat-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.subcat-group-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  user-select: none;
}

.subcat-group-name:hover {
  color: var(--color-text-primary);
}

.subcat-chevron {
  font-size: 9px;
  color: var(--color-text-muted);
  transition: transform 0.15s;
  width: 10px;
}

.subcat-active-indicator {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 4px;
}

/* Collapsible groups */
.subcat-group-collapsed .subcat-group-body {
  display: none;
}

/* Admin toggle button */
.subcat-admin-toggle {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  margin-left: auto;
}

.subcat-admin-toggle:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-hover);
}

.subcat-admin-toggle.active {
  color: var(--color-accent);
}

/* Admin-only elements — hidden by default */
.subcat-admin-only {
  display: none !important;
}

.subcat-admin-active .subcat-admin-only {
  display: flex !important;
}

/* Inline edit/delete for filter buttons in admin mode */
.subcat-btn-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.subcat-item-actions {
  gap: 0px !important;
  align-items: center !important;
}

.subcat-item-actions .category-manage-btn {
  padding: 2px 4px;
  font-size: 10px;
}

.subcat-filter-buttons {
  gap: 8px !important;
  margin-bottom: 8px;
}

.subcat-filter-buttons .category-btn {
  padding: 8px 14px;
  font-size: var(--font-size-sm);
}

.subcat-count {
  opacity: 0.5;
  margin-left: 2px;
}

.subcat-delete-btn:hover {
  color: var(--color-error, #ef4444) !important;
}

.subcat-add-row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.subcat-add-input {
  flex: 1;
  font-size: var(--font-size-sm);
  padding: 6px 10px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.2s;
}

.subcat-add-input::placeholder {
  color: var(--color-text-muted);
}

.subcat-add-input:focus {
  border-color: var(--color-accent);
}

.subcat-add-btn {
  background: var(--color-accent);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.subcat-add-btn:hover {
  opacity: 0.85;
}

.subcat-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.subcat-add-group-row {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
}

.subcat-add-group-btn {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}

.subcat-add-group-btn:hover {
  color: var(--color-text-primary);
  opacity: 1;
}

.subcat-empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
  margin: 4px 0 4px 6px;
}

/* Category list modal items */
.category-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--color-bg-tertiary);
}

.category-list-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.category-list-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-left: 8px;
}

.category-list-actions {
  display: flex;
  gap: 4px;
}

/* Drag-to-category visual feedback */
.category-btn.drop-hover {
  background: rgba(94, 129, 172, 0.25);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
  transform: scale(1.03);
  transition: all 0.15s ease;
}

body.marker-dragging .category-btn:not([data-category="all"]) {
  border-style: dashed;
  animation: pulse-border 1s infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: var(--color-border); }
  50% { border-color: var(--color-accent); }
}

/* Drag ghost element */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transform: translate(-50%, -120%);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drag-ghost i {
  color: var(--color-accent);
  margin-right: 6px;
}

/* Icon picker grid */
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.icon-picker-grid .icon-btn {
  padding: 8px;
  border-radius: 6px;
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
}

.icon-picker-grid .icon-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--color-text-muted);
}

.icon-picker-grid .icon-btn.selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
  color: var(--color-accent);
  background: rgba(94, 129, 172, 0.1);
}

/* Color preview circle */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-preview {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

/* Source badge */
.source-badge {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.source-badge.tripletex {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.source-badge.template {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

@media (max-width: 480px) {
  .icon-picker-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Dynamic Field Filters */
#dynamicFieldFilters {
  margin-top: 8px;
}

#dynamicFieldFilters:empty {
  display: none;
}

.dynamic-field-filter {
  margin-top: 8px;
}

.dynamic-filter-content {
  padding: 8px 0;
}

.filter-input-wrapper {
  padding: 4px 0;
}

.dynamic-filter-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.dynamic-filter-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.dynamic-filter-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.dynamic-filter-input::placeholder {
  color: var(--color-text-muted);
}

.filter-range-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.dynamic-filter-range {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  min-width: 0;
}

.dynamic-filter-range:focus {
  outline: none;
  border-color: var(--color-accent);
}

.dynamic-filter-range:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.range-separator {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

/* Color Legend */
.color-legend {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.legend-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.legend-dot.overdue {
  background: #FF3B30;
}

.legend-dot.soon {
  background: #FF9500;
}

.legend-dot.ok {
  background: #007AFF;
}

.legend-dot.good {
  background: #00D4FF;
}

.legend-dot.unknown {
  background: #AF52DE;
}

.legend-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Customer List Wrapper */
.customer-list-wrapper {
  flex: 1;
  overflow-y: auto;
  margin: 0 -12px;
  padding: 0 12px;
}

/* Customer List Section (kept for compatibility) */
.filter-customer-list-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--color-border-gray);
  padding-top: 12px;
}

.filter-section-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0 0 4px 0;
}

.filter-panel-content .customer-list-container {
  max-height: 400px;
  overflow-y: auto;
  flex: 1;
}

.filter-panel-content .customer-list {
  padding: 0;
  gap: 6px;
}

.filter-panel-content .customer-item {
  padding: 8px 10px;
  font-size: var(--font-size-sm);
  gap: 8px;
}

.filter-panel-content .customer-info h3 {
  font-size: var(--font-size-sm);
  margin: 0 0 1px 0;
}

.filter-panel-content .customer-info p {
  font-size: var(--font-size-xs);
  margin: 0 0 2px 0;
}

.filter-panel-content .customer-upcoming {
  min-width: 75px;
  gap: 2px;
}

.filter-panel-content .upcoming-control {
  font-size: var(--font-size-xs);
  gap: 3px;
}

.filter-panel-content .upcoming-label {
  min-width: 30px;
  font-size: 8px;
}

.filter-panel-content .upcoming-date {
  min-width: 40px;
  font-size: var(--font-size-xs);
}

/* ============================================
   ROUTE INFO PANEL
   ============================================ */

.route-info {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-bg-secondary);
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  border: 1px solid var(--color-border);
  z-index: 999;
}

.route-info h3 {
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid var(--color-orange);
  padding-bottom: 12px;
}

.route-info.hidden {
  display: none;
}

#routeDetails {
  margin-bottom: 16px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ============================================
   MODALS
   ============================================ */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--color-bg-secondary);
  border-radius: 12px;
  padding: 0;
  max-width: 520px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  pointer-events: auto;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--color-accent);
}

/* Large modal for import wizard */
.modal-content.modal-large {
  max-width: 800px;
  width: 95%;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 80px);
}

/* Modal Form */
.modal-content form,
.modal-content > div:not(.modal-header) {
  padding: 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-family: inherit;
  transition: all 0.2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-bg-elevated);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.form-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted, #999);
  margin-top: 4px;
}

/* Tags */
.tags-section {
  margin-top: 12px;
  padding: 12px;
  background: var(--color-bg-card, #1e1e1e);
  border-radius: 8px;
}

.kunde-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 24px;
}

.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.6;
  padding: 0 2px;
  color: inherit;
}

.tag-remove:hover {
  opacity: 1;
}

.tags-empty {
  color: var(--color-text-muted, #999);
  font-size: 0.8rem;
  font-style: italic;
}

.tags-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tags-add-row select {
  flex: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #333);
  background: var(--color-bg-elevated, #2a2a2a);
  color: var(--color-text, #e0e0e0);
  font-size: 0.8rem;
}

/* Tag manager modal */
.tag-manager-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.tag-manager-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border, #333);
}

.tag-manager-add {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tag-manager-add input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #333);
  background: var(--color-bg-elevated, #2a2a2a);
  color: var(--color-text, #e0e0e0);
}

.tag-manager-add select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #333);
  background: var(--color-bg-elevated, #2a2a2a);
  color: var(--color-text, #e0e0e0);
}

/* Missing field highlight - orange/warning style */
.form-group input.missing-field,
.form-group select.missing-field {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.form-group input.missing-field::placeholder {
  color: #f59e0b;
}

.form-group input.missing-field:focus,
.form-group select.missing-field:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

/* Address autocomplete dropdown */
.address-autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.address-suggestions {
  position: fixed;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100000;
  display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.address-suggestions.visible {
  display: block;
}

.address-suggestion-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s ease;
}

.address-suggestion-item:last-child {
  border-bottom: none;
}

.address-suggestion-item:hover,
.address-suggestion-item.selected {
  background: var(--color-accent);
  color: white;
}

.address-suggestion-item i {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.address-suggestion-item:hover i,
.address-suggestion-item.selected i {
  color: white;
}

.address-suggestion-text {
  flex: 1;
}

.address-suggestion-main {
  font-weight: 500;
}

.address-suggestion-detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.address-suggestion-item:hover .address-suggestion-detail,
.address-suggestion-item.selected .address-suggestion-detail {
  color: rgba(255, 255, 255, 0.8);
}

/* Postnummer validation */
.postnummer-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.postnummer-wrapper input {
  padding-right: 32px;
}

.postnummer-status {
  position: absolute;
  right: 10px;
  font-size: 14px;
  pointer-events: none;
}

.postnummer-status.valid {
  color: #22c55e;
}

.postnummer-status.invalid {
  color: #ef4444;
}

.postnummer-status.loading {
  color: var(--color-text-secondary);
}

/* Auto-filled poststed indication */
#poststed.auto-filled {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row.three-cols {
  grid-template-columns: 1fr 1fr 100px;
}

/* Koordinat-seksjon med kart-plukking */
.coordinates-section {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}

.coord-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.coord-header .label-text {
  font-weight: 500;
  color: var(--color-text-primary);
}

.geocode-quality-badge {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.geocode-quality-badge.quality-exact {
  background: #10B981;
  color: #fff;
}

.geocode-quality-badge.quality-street {
  background: #3B82F6;
  color: #fff;
}

.geocode-quality-badge.quality-area {
  background: #EAB308;
  color: #000;
}

.geocode-quality-badge.quality-manual {
  background: #8B5CF6;
  color: #fff;
}

.coord-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.coord-field label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.coord-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: 'Monaco', 'Menlo', monospace;
}

.coord-field input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.coord-field input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.coord-actions {
  display: flex;
  gap: 8px;
}

.coord-actions .btn {
  flex: 1;
  font-size: var(--font-size-sm);
  padding: 6px 10px;
}

.geocode-warning {
  margin-top: 10px;
  padding: 10px;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 6px;
  color: #CA8A04;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Map picking mode cursor */
.map-picking-mode {
  cursor: crosshair !important;
}

.map-picking-mode .mapboxgl-canvas {
  cursor: crosshair !important;
}

/* Picking mode indicator */
.picking-mode-indicator {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  z-index: 2000;
  box-shadow: var(--shadow-lg);
  animation: pulse 1.5s infinite;
}

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

/* Kunde search wrapper for avtale modal */
.kunde-search-wrapper {
  position: relative;
}

.kunde-search-wrapper input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-family: inherit;
  transition: all 0.2s ease;
}

.kunde-search-wrapper input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-bg-elevated);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.kunde-search-wrapper input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.kunde-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-top: 4px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kunde-search-results.active {
  display: block;
}

.kunde-search-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}

.kunde-search-item:last-child {
  border-bottom: none;
}

.kunde-search-item:hover,
.kunde-search-item.active {
  background: var(--color-bg-tertiary);
}

.kunde-search-item.no-results {
  color: var(--color-text-muted);
  cursor: default;
  font-style: italic;
}

.kunde-search-item.no-results:hover {
  background: transparent;
}

.kunde-search-item .kunde-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.kunde-search-item .kunde-location {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Control section styling */
.control-section {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.control-section.hidden {
  display: none;
}

.control-section-header {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-section-header i.fa-bolt {
  color: #F59E0B;
}

.control-section-header i.fa-fire {
  color: #EF4444;
}

.control-section-header i.fa-phone {
  color: #10B981;
}

.control-section-header i.fa-calendar-check {
  color: #3B82F6;
}

/* Custom Fields Section */
.custom-fields-section {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
  border-left: 3px solid var(--color-primary);
}

.custom-fields-section.hidden {
  display: none;
}

.custom-fields-header {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#customFieldsContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#customFieldsContainer .form-group {
  margin-bottom: 0;
}

#customFieldsContainer .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* Kontaktlogg section */
.kontaktlogg-section {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
  border-left: 3px solid #10B981;
}

.kontaktlogg-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.kontaktlogg-add select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  min-width: 130px;
}

.kontaktlogg-add input {
  flex: 1;
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.kontaktlogg-add input:focus,
.kontaktlogg-add select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.kontaktlogg-add input:focus-visible,
.kontaktlogg-add select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.kontaktlogg-list {
  margin-top: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.kontaktlogg-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
  background: var(--color-bg-elevated);
  border-radius: 6px;
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
}

.kontaktlogg-item:last-child {
  margin-bottom: 0;
}

.kontaktlogg-info {
  flex: 1;
}

.kontaktlogg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.kontaktlogg-type {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.kontaktlogg-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.kontaktlogg-notat {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.kontaktlogg-delete {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: var(--font-size-sm);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.kontaktlogg-delete:hover {
  color: #EF4444;
  opacity: 1;
}

.kontaktlogg-empty {
  text-align: center;
  padding: 16px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* Kontaktpersoner Section */
.kontaktpersoner-section {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
  border-left: 3px solid #8B5CF6;
}

.kontaktpersoner-list {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.kontaktperson-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
  background: var(--color-bg-elevated);
  border-radius: 6px;
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
}

.kontaktperson-item:last-child {
  margin-bottom: 0;
}

.kontaktperson-info {
  flex: 1;
}

.kontaktperson-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.kontaktperson-navn {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.kontaktperson-rolle {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(139, 92, 246, 0.15);
  color: #A78BFA;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.kontaktperson-primaer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.kontaktperson-primaer-badge i {
  font-size: 0.65rem;
}

.kontaktperson-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kontaktperson-detail {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.kontaktperson-detail i {
  width: 12px;
  text-align: center;
  opacity: 0.6;
}

.kontaktperson-delete {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: var(--font-size-sm);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.kontaktperson-delete:hover {
  color: #EF4444;
  opacity: 1;
}

.kontaktpersoner-empty {
  text-align: center;
  padding: 16px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.kontaktpersoner-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.kontaktpersoner-add input,
.kontaktpersoner-add select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.kontaktpersoner-add input:focus,
.kontaktpersoner-add select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.kontaktpersoner-add input:focus-visible,
.kontaktpersoner-add select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.kontaktperson-add-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kontaktperson-primaer-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

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

#elKontrollSection {
  border-left: 3px solid #F59E0B;
}

#brannvarslingSection {
  border-left: 3px solid #EF4444;
}

.control-section .form-row {
  grid-template-columns: 1fr 1fr 80px;
}

.control-section .form-group label {
  font-size: var(--font-size-xs);
}

.control-section .form-group input,
.control-section .form-group select {
  padding: 6px 8px;
  font-size: var(--font-size-sm);
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.form-actions .btn {
  flex: 0 1 auto;
}

.coordinates {
  background: var(--color-bg-tertiary);
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-gray);
}

.coord-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 8px;
}

/* Modal lists */
.modal-content ol,
.modal-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.modal-content li {
  margin-bottom: 8px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hidden {
  display: none !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-light);
}

/* ============================================
   SMS CONTAINER & CARDS
   ============================================ */

.sms-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-width: 0;
}

/* Statistics Dashboard */
.sms-stats-dashboard {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px;
  flex-shrink: 0;
}

.stats-row {
  display: flex;
  gap: 12px;
}

.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 8px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  min-width: 0;
}

.stat-card .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.stat-card.stat-pending .stat-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.stat-card.stat-sent .stat-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.stat-card.stat-failed .stat-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Card Headers */
.sms-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}

.sms-card-header .header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  min-width: 0;
  overflow: hidden;
}

.sms-card-header .header-left span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sms-card-header .header-left i {
  color: var(--color-accent);
  flex-shrink: 0;
}

.sms-card-header .badge {
  background: var(--color-accent);
  color: #000;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.sms-card-header.clickable {
  cursor: pointer;
  transition: background 0.2s ease;
}

.sms-card-header.clickable:hover {
  background: var(--color-bg-tertiary);
}

.sms-card-header .toggle-icon {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  transition: transform 0.2s ease;
}

.sms-config-card.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.sms-config-card.collapsed .sms-config-content {
  display: none;
}

/* Upcoming Notifications Card */
.sms-upcoming-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.sms-upcoming-content {
  max-height: 150px;
  overflow-y: auto;
}

.upcoming-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  gap: 8px;
}

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

.upcoming-item .upcoming-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.upcoming-item .upcoming-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming-item .upcoming-phone {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.upcoming-item .upcoming-days {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  flex-shrink: 0;
}

.upcoming-item .upcoming-days.urgent {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

.upcoming-item .upcoming-days.soon {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.upcoming-item .upcoming-days.normal {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.upcoming-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.upcoming-email-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: var(--color-accent);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upcoming-email-btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.05);
}

.upcoming-email-btn.disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.upcoming-email-btn.disabled:hover {
  transform: none;
}

/* Customer list email button */
.customer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-right: 8px;
}

.customer-email-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: var(--color-accent);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
}

.customer-item:hover .customer-email-btn {
  opacity: 1;
}

.customer-email-btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.05);
}

.customer-email-btn.disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.customer-email-btn.disabled:hover {
  transform: none;
}

/* Popup email button */
.btn-email {
  background: var(--color-accent) !important;
  color: white !important;
}

.btn-email:hover {
  background: var(--color-accent-hover) !important;
}

.btn-notify-customer {
  background: #667eea !important;
  color: white !important;
}

.btn-notify-customer:hover {
  background: #5a67d8 !important;
}

.wp-notify-btn {
  background: none;
  border: 1px solid #667eea;
  color: #667eea;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.15s, color 0.15s;
}

.wp-notify-btn:hover {
  background: #667eea;
  color: #fff;
}

.wp-notify-btn.wp-notified {
  background: #059669;
  border-color: #059669;
  color: #fff;
  opacity: 0.7;
  pointer-events: none;
}

.wp-complete-btn {
  background: linear-gradient(135deg, #4caf50 0%, #43a047 100%);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(76,175,80,0.28);
  transition: transform 160ms cubic-bezier(0.16,1,0.3,1), filter 160ms;
}
.wp-complete-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.wp-complete-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wp-reopen-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #66bb6a;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background 160ms;
}
.wp-reopen-btn:hover { background: rgba(76,175,80,0.15); }

.wp-item.wp-item-done {
  opacity: 0.55;
}
.wp-item.wp-item-done:hover { opacity: 0.85; }
.wp-item.wp-item-done .wp-item-name {
  text-decoration: line-through;
  text-decoration-color: rgba(76,175,80,0.6);
}
.wp-item-done-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #66bb6a;
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}
.wp-badge.wp-badge-all-done {
  background: rgba(76,175,80,0.18);
  color: #66bb6a;
  border-color: rgba(76,175,80,0.4);
}
.wp-badge-done {
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 99px;
  background: rgba(76,175,80,0.25);
  color: #66bb6a;
  font-size: 9px;
}

.btn-disabled {
  background: var(--color-bg-tertiary) !important;
  color: var(--color-text-muted) !important;
  cursor: not-allowed !important;
}

.upcoming-empty {
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Quick Actions Row */
.sms-actions-row {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  min-width: 0;
}

.btn-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-action i {
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

/* Config Card */
.sms-config-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.sms-config-content {
  padding: 10px;
}

.config-grid {
  display: grid;
  gap: 4px;
}

.config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--font-size-xs);
  gap: 8px;
}

.config-item .config-label {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-item .config-value {
  font-weight: 600;
  color: var(--color-text-primary);
  flex-shrink: 0;
  text-align: right;
}

.config-item .config-value.enabled {
  color: #10B981;
}

.config-item .config-value.disabled {
  color: #EF4444;
}

/* Test SMS Panel */
.sms-test-panel {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.sms-test-panel .sms-card-header {
  background: rgba(94, 129, 172, 0.1);
  border-bottom-color: var(--color-accent);
}

.btn-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.btn-close:hover {
  color: var(--color-text-primary);
}

.sms-test-content {
  padding: 10px;
}

.sms-test-content .form-group {
  margin-bottom: 10px;
}

.sms-test-content .form-group label {
  font-size: var(--font-size-xs);
}

.sms-test-content .form-group input,
.sms-test-content .form-group textarea {
  font-size: var(--font-size-sm);
  padding: 8px 10px;
}

.sms-test-content .form-group:last-of-type {
  margin-bottom: 12px;
}

.sms-test-content .btn {
  width: 100%;
  font-size: var(--font-size-xs);
  padding: 10px;
}

/* History Card */
.sms-history-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.history-filters {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.filter-select {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  cursor: pointer;
}

.sms-action-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 6px;
}

.sms-history-content {
  flex: 1;
  overflow-y: auto;
  min-height: 100px;
}

.sms-history-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
}

.sms-history-item:last-child {
  border-bottom: none;
}

.sms-history-item .history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  gap: 6px;
}

.sms-history-item .history-customer {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sms-history-item .history-status {
  font-size: var(--font-size-xs);
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.sms-history-item .history-status.sent {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
}

.sms-history-item .history-status.failed {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

.sms-history-item .history-status.pending {
  background: rgba(245, 158, 11, 0.2);
  color: #F59E0B;
}

.sms-history-item .history-message {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  margin-top: 3px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sms-history-item .history-date {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-top: 3px;
}

.sms-history-empty {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* SMS Settings in Customer Modal */
.sms-settings {
  background: var(--color-bg-tertiary);
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.sms-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sms-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.sms-toggle label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.sms-options {
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.sms-options.hidden {
  display: none;
}

/* ============================================
   RESPONSIVE - MOBILE FIRST
   ============================================ */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 16px;
  width: 56px;
  height: 56px;
  background: var(--color-accent);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 2000;
  box-shadow: 0 4px 20px rgba(94, 129, 172, 0.4);
  transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
  background: var(--color-accent-hover);
  transform: scale(1.05);
}

.mobile-menu-toggle.active {
  background: var(--color-bg-tertiary);
  color: var(--color-accent);
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .filter-panel {
    width: 280px;
  }

  .filter-panel.collapsed {
    transform: translateX(240px);
  }

  .route-info {
    max-width: 300px;
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Main container - stack vertically */
  .container {
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }

  /* Sidebar becomes bottom sheet on mobile - override collapsed state */
  .sidebar,
  .sidebar.collapsed {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-right: none !important;
    border-top: 1px solid var(--color-border) !important;
    transform: translateY(calc(100% - 80px)) !important;
    transition: transform 0.3s ease !important;
    z-index: 1500 !important;
    order: 1 !important;
    flex-direction: column !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
  }

  .sidebar.mobile-open,
  .sidebar.collapsed.mobile-open {
    transform: translateY(0) !important;
  }

  /* Content panel - slides in from right on mobile */
  .content-panel-resize {
    display: none !important;
  }

  .content-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 85vw !important;
    max-width: 380px !important;
    transform: translateX(100%) !important;
    z-index: 2000 !important;
    border-radius: 20px 0 0 20px !important;
    border-right: none !important;
    border-left: 1px solid var(--color-border) !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4) !important;
  }

  .content-panel.open {
    transform: translateX(0) !important;
  }

  .content-panel.closed {
    transform: translateX(100%) !important;
    width: 85vw !important;
  }

  /* Overlay behind content panel on mobile */
  .content-panel-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
  }

  .content-panel-overlay.visible {
    display: block;
  }

  /* Show header content on mobile even when collapsed */
  .sidebar.collapsed .header-content {
    display: flex !important;
  }

  .sidebar.collapsed .tab-item span {
    display: inline !important;
  }

  .sidebar.collapsed .tab-content {
    display: flex !important;
  }

  .sidebar.collapsed .tab-header,
  .sidebar.collapsed .search-box,
  .sidebar.collapsed .omrade-filter,
  .sidebar.collapsed .actions,
  .sidebar.collapsed .warning-actions,
  .sidebar.collapsed .customer-list,
  .sidebar.collapsed .calendar-container,
  .sidebar.collapsed .planner-container,
  .sidebar.collapsed .warnings-container {
    display: block !important;
  }

  /* Sidebar header - acts as drag handle on mobile */
  .sidebar-header,
  .sidebar.collapsed .sidebar-header {
    padding: 16px 16px 12px !important;
    cursor: grab !important;
    position: relative !important;
    display: flex !important;
    background: var(--color-bg-tertiary) !important;
  }

  .sidebar-header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--color-border-light);
    border-radius: 2px;
  }

  .sidebar-toggle {
    display: none !important;
  }

  /* Map takes full height on mobile */
  .map-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    pointer-events: none !important; /* Let clicks pass through to shared map below */
  }

  /* Tab navigation - horizontal scrollable pills on mobile */
  .tab-navigation,
  .sidebar.collapsed .tab-navigation {
    flex-direction: row !important;
    overflow-x: auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--color-bg-tertiary) !important;
    border-bottom: 1px solid var(--color-border) !important;
    flex-shrink: 0 !important;
  }

  .tab-navigation::-webkit-scrollbar {
    display: none;
  }

  .tab-item,
  .sidebar.collapsed .tab-item {
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto !important;
    padding: 8px 14px !important;
    border-left: none !important;
    border-bottom: none !important;
    border-radius: 20px !important;
    justify-content: center !important;
    white-space: nowrap;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
  }

  .tab-item:hover {
    background: var(--color-bg-hover);
  }

  .tab-item.active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(94, 129, 172, 0.3);
  }

  .tab-item.active i {
    color: #fff;
  }

  .tab-item i {
    font-size: 16px;
    width: auto;
  }

  .tab-item span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline !important;
  }

  /* Filter panel - show as part of Kunder tab on mobile */
  .filter-panel {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
    order: 10 !important;
  }

  .filter-panel-toggle {
    display: none !important;
  }

  .filter-panel-inner {
    padding: 0 !important;
    background: transparent !important;
  }

  .filter-panel-header {
    display: none !important;
  }

  .filter-panel-content {
    padding: 8px 12px !important;
  }

  .search-container {
    margin-bottom: 10px !important;
  }

  .quick-actions {
    margin-bottom: 10px !important;
  }

  .color-legend {
    display: none !important;
  }

  .selected-info {
    display: none !important;
  }

  .customer-list-wrapper {
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  .customer-list {
    padding: 0 !important;
  }

  .customer-item {
    padding: 10px !important;
    margin-bottom: 6px !important;
  }

  /* Route info - top positioned, full width on mobile */
  .route-info {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
    max-height: 40vh;
    overflow-y: auto;
  }

  /* Modal adjustments */
  .modal-content {
    width: 95%;
    max-height: 85vh;
    margin: auto 10px;
  }

  .modal-header {
    padding: 16px;
  }

  .modal-header h2 {
    font-size: 15px;
  }

  .modal-content form,
  .modal-content > div:not(.modal-header) {
    padding: 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Customer items - more touch friendly */
  .customer-item {
    padding: 12px;
    gap: 12px;
  }

  .customer-checkbox {
    width: 24px;
    height: 24px;
  }

  .customer-info h3 {
    font-size: 14px;
  }

  /* Buttons - larger touch targets */
  .btn {
    padding: 12px 18px;
    font-size: 14px;
    min-height: 44px; /* iOS minimum touch target */
  }

  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  /* Search input */
  .search-input {
    padding: 12px 12px 12px 36px;
    font-size: 16px;
  }

  /* Mapbox GL JS controls positioning */
  .mapboxgl-ctrl-top-left {
    top: 10px;
    left: 10px;
  }

  .mapboxgl-ctrl-top-right {
    top: 10px;
    right: 10px;
  }

  /* Popup adjustments - ensure popups appear above sidebar on mobile */
  .mapboxgl-popup {
    z-index: 1600 !important;
  }

  .mapboxgl-popup-content {
    max-width: min(calc(100vw - 32px), 260px) !important;
    padding: 12px 14px 10px !important;
    font-size: 13px !important;
  }

  .mapboxgl-popup-content h3 {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }

  .mapboxgl-popup-content .popup-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding-top: 8px !important;
    margin-top: 6px !important;
  }

  .mapboxgl-popup-content .popup-actions .btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-height: 32px;
  }

  .mapboxgl-popup-content .popup-controls,
  .mapboxgl-popup-content .popup-control-info {
    padding: 6px 8px !important;
    margin-top: 6px !important;
  }

  .mapboxgl-popup-content .popup-controls p,
  .mapboxgl-popup-content .popup-control-info p {
    font-size: 12px !important;
    margin: 2px 0 !important;
  }

  .mapboxgl-popup-content .popup-status {
    padding: 6px 8px !important;
    font-size: 12px !important;
    margin-top: 6px !important;
  }

  /* Marker labels - hide by default on mobile for cleaner view */
  .custom-marker-with-label .marker-label {
    display: none;
  }

  .custom-marker-with-label:active .marker-label,
  .custom-marker-with-label.selected .marker-label {
    display: flex;
  }

  /* Actions row */
  .actions {
    padding: 12px 16px;
  }

  /* Quick actions */
  .quick-actions {
    flex-wrap: wrap;
  }

  .quick-actions .btn-icon {
    flex: 1 1 calc(50% - 4px);
  }

  /* User bar on mobile */
  .user-bar {
    padding: 8px 12px !important;
    gap: 8px !important;
    background: var(--color-bg-secondary) !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  .user-bar .user-name {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
  }

  .user-bar .nightmode-btn,
  .user-bar .logout-btn,
  .user-bar .dashboard-link-btn {
    padding: 8px 10px !important;
    min-width: 40px;
    min-height: 40px;
  }

  /* Ensure sidebar collapsed doesn't hide user bar elements on mobile */
  .sidebar.collapsed .user-bar {
    justify-content: space-between !important;
    padding: 8px 12px !important;
  }

  .sidebar.collapsed .user-bar .user-bar-top .user-name {
    display: block !important;
  }

  .sidebar.collapsed .user-bar .logout-btn span,
  .sidebar.collapsed .user-bar .dashboard-link-btn span {
    display: inline !important;
  }

  .sidebar.collapsed .user-bar .user-bar-actions {
    flex-direction: row !important;
  }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
  .sidebar {
    height: 70vh;
    max-height: 80vh;
    transform: translateY(calc(100% - 140px));
  }

  .sidebar-header h1 {
    font-size: 14px;
  }

  .company-name {
    font-size: var(--font-size-xs);
  }

  .header-logo {
    width: 40px;
    height: 40px;
  }

  /* Tabs as icon-only pills on very small screens */
  .tab-navigation {
    padding: 10px;
    gap: 6px;
  }

  .tab-item {
    padding: 10px 14px;
    border-radius: 20px;
  }

  .tab-item span {
    display: none !important;
  }

  .tab-item i {
    font-size: 18px;
    width: auto;
    margin: 0;
  }

  /* Customer list compact */
  .customer-item {
    padding: 10px;
  }

  .customer-info h3 {
    font-size: var(--font-size-sm);
  }

  .customer-info p {
    font-size: var(--font-size-xs);
  }

  .customer-control-info {
    min-width: 60px;
  }

  .control-date {
    font-size: var(--font-size-xs);
  }

  /* Section headers */
  .section-header {
    padding: 6px 10px;
  }

  .section-name {
    font-size: var(--font-size-xs);
  }

  /* Modal even more compact */
  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    margin: 0;
    border-radius: 20px 20px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }

  /* Legend compact */
  .legend-items {
    gap: 4px 8px;
  }

  .legend-text {
    font-size: var(--font-size-xs);
  }

  /* SMS/Email stats */
  .stat-card {
    padding: 6px 2px;
  }

  .stat-value {
    font-size: 14px;
  }

  .stat-label {
    font-size: 8px;
  }
}

/* Mobile floating action button for route planning */
.mobile-route-fab {
  display: none;
}

@media (max-width: 768px) {
  .mobile-route-fab {
    display: block;
    position: fixed;
    bottom: 150px;
    right: 16px;
    z-index: 1400;
  }

  .mobile-route-fab.hidden {
    display: none;
  }

  .fab-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 56px;
    height: 56px;
    padding: 0 20px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 28px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
  }

  .fab-button:hover,
  .fab-button:active {
    background: var(--color-accent-hover);
    transform: scale(1.05);
  }

  .fab-button i {
    font-size: 20px;
  }

  #mobileRouteCount {
    font-size: 16px;
    font-weight: 700;
  }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    height: 80vh;
    max-height: 85vh;
  }

  .filter-panel {
    height: 80vh;
    max-height: 90vh;
  }

  .modal-content {
    max-height: 90vh;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn {
    min-height: 48px;
  }

  .btn-small {
    min-height: 40px;
    padding: 8px 14px;
  }

  .customer-item {
    min-height: 60px;
  }

  .tab-item {
    min-height: 48px;
  }

  /* Calendar cells - larger on touch */
  .calendar-day {
    min-height: 44px;
  }

  /* Better contrast for outdoor readability */
  .tab-header h2 {
    font-weight: 700;
  }

  .customer-info h3 {
    font-weight: 600;
  }

  /* Remove hover effects that don't work on touch */
  .customer-item:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
  }

  .btn:hover {
    transform: none;
  }

  /* Active states instead */
  .customer-item:active {
    background: var(--color-bg-hover);
    border-color: var(--color-border-light);
  }

  .btn:active {
    transform: scale(0.98);
  }

  /* Export dropdown touch-friendly */
  .export-option {
    min-height: 44px;
    padding: 12px 14px;
  }
}

/* ============================================
   TODAY'S WORK (Dagens arbeid)
   ============================================ */

/* Date navigation */
.todays-work-date-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.todays-work-date-nav .btn-icon {
  min-width: 32px;
  min-height: 32px;
  padding: 4px;
}

#twDateLabel {
  font-size: var(--font-size-sm);
  font-weight: 600;
  min-width: 80px;
  text-align: center;
  color: var(--color-text-primary);
}

/* Route summary card */
.tw-route-card {
  margin: 12px 16px;
  padding: 16px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.tw-route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tw-route-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.tw-route-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tw-status-planned {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.tw-status-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.tw-status-completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.tw-route-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.tw-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.tw-stat i {
  font-size: 14px;
  color: var(--color-accent);
}

/* Progress bar */
.tw-progress-bar {
  height: 6px;
  background: var(--color-bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.tw-progress-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.btn-block {
  width: 100%;
}

/* Customer stops list */
.tw-stops-list {
  padding: 0 16px 16px;
}

.tw-stop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.tw-stop-card.tw-stop-completed {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.05);
}

.tw-stop-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.tw-stop-completed .tw-stop-number {
  background: #22c55e;
}

.tw-stop-info {
  flex: 1;
  min-width: 0;
}

.tw-stop-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-stop-info p {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-stop-phone {
  color: var(--color-accent) !important;
}

.tw-stop-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.tw-action-call {
  color: #22c55e !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.tw-action-nav {
  color: var(--color-accent) !important;
  border-color: var(--color-accent-muted) !important;
}

.tw-action-visit {
  color: var(--color-text-primary) !important;
  background: var(--color-accent) !important;
  color: #fff !important;
}

.tw-visited-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #22c55e;
  font-size: 20px;
}

.tw-no-stops {
  text-align: center;
  color: var(--color-text-secondary);
  padding: 20px;
}

/* Empty state */
.tw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-secondary);
}

.tw-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.tw-empty h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--color-text-primary);
}

.tw-empty p {
  font-size: 13px;
  margin: 0;
}

/* Next stop card - prominent card for active route */
.tw-next-stop-card {
  margin: 12px 16px 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 16px;
  position: relative;
}

.tw-next-stop-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #22c55e;
  margin-bottom: 8px;
}

.tw-next-stop-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}

.tw-next-stop-address {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
}

.tw-next-stop-phone {
  font-size: 13px;
  color: var(--color-accent);
  margin: 0 0 12px;
}

.tw-next-stop-phone i {
  font-size: 12px;
  margin-right: 4px;
}

.tw-next-stop-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tw-next-nav-btn {
  flex: 1;
  min-width: 120px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
}

.tw-next-call-btn {
  min-height: 48px;
  font-size: 15px;
}

.tw-next-done-btn {
  min-height: 48px;
  font-size: 15px;
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}

.tw-next-done-btn:hover,
.tw-next-done-btn:active {
  background: #16a34a !important;
}

/* Next stop highlight in list */
.tw-stop-card.tw-stop-next {
  border-color: var(--color-accent);
  border-width: 2px;
  background: rgba(94, 129, 172, 0.05);
}

/* Visited section toggle */
.tw-visited-section {
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
}

.tw-visited-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tw-visited-toggle i:first-child {
  color: #22c55e;
}

.tw-visited-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.tw-visited-section.expanded .tw-visited-chevron {
  transform: rotate(180deg);
}

.tw-visited-list {
  display: none;
  padding-top: 4px;
}

.tw-visited-section.expanded .tw-visited-list {
  display: block;
}

/* Visited stops are compact */
.tw-visited-list .tw-stop-card {
  padding: 8px 12px;
  margin-bottom: 4px;
}

.tw-visited-list .tw-stop-info h4 {
  font-size: 13px;
}

/* Mobile optimizations for Today's Work */
@media (max-width: 768px) {
  .tw-stop-card {
    padding: 14px;
    gap: 10px;
  }

  .tw-stop-actions .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .tw-visited-check {
    width: 44px;
    height: 44px;
  }

  .tw-route-card .btn-block {
    min-height: 48px;
    font-size: 15px;
  }

  .tw-next-stop-card {
    margin: 8px 12px 12px;
    padding: 16px;
  }

  .tw-next-stop-name {
    font-size: 17px;
  }

  .tw-next-stop-actions {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .tw-stop-info h4 {
    font-size: 13px;
  }

  .tw-stop-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .tw-next-stop-actions {
    flex-direction: column;
  }

  .tw-next-nav-btn {
    min-width: unset;
  }
}

/* ============================================
   BULK SELECTION - "Marker som ferdig"
   ============================================ */

/* Checkbox in customer list */
.bulk-checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-right: 12px;
  cursor: pointer;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.customer-admin-item {
  display: flex;
  align-items: center;
}

.customer-admin-item.bulk-selected {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}

.customer-admin-item .customer-info {
  flex: 1;
  min-width: 0;
}

/* Success button */
.btn-success {
  background: var(--color-status-good);
  color: #fff;
  border: none;
}

.btn-success:hover {
  background: #6BBF7E;
}

/* Calendar button - teal */
.btn-calendar {
  background: #0d9488;
  color: #fff;
  border: none;
}
.btn-calendar:hover {
  background: #14b8a6;
}

/* === MAP TOOLBAR CENTER (shared container for map action buttons) === */
.map-toolbar-center {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* === KART-VERKTØY-KNAPPER (3D + markering) — mørkt glass, matcher pillen === */
.area-select-toggle-btn,
.terrain-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.12s ease;
}
.area-select-toggle-btn:hover,
.terrain-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.area-select-toggle-btn:active,
.terrain-toggle-btn:active { transform: scale(0.94); }
.area-select-toggle-btn:focus-visible,
.terrain-toggle-btn:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 2px;
}
/* Markering aktiv = blå */
.area-select-toggle-btn.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.5);
}
/* 3D aktiv = grønn (pulserende, beholdt semantikk) */
.terrain-toggle-btn.active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.5);
  animation: terrain-pulse 2s ease-in-out infinite;
}
@keyframes terrain-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(16, 185, 129, 0.5); }
  50% { box-shadow: 0 2px 20px rgba(16, 185, 129, 0.8); }
}

/* 3D mode persistent indicator */
.terrain-3d-indicator {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
  z-index: 1000;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}
.terrain-3d-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}
.terrain-3d-indicator i {
  font-size: 11px;
}

/* === 3D TERRAIN CONTROLS PANEL === */
.terrain-exag-slider {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 8px;
  background: rgba(18, 24, 31, 0.92);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  z-index: 1001;
}
.terrain-exag-slider.visible {
  display: flex;
}
.terrain-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.terrain-exag-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  min-width: 52px;
  cursor: default;
}
.terrain-exag-slider input[type="range"] {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.terrain-exag-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: pointer;
}
.terrain-exag-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: pointer;
}
.terrain-exag-label {
  font-size: 12px;
  font-weight: 600;
  color: #34d399;
  min-width: 30px;
  text-align: right;
}

/* === WEEKPLAN DRIVE TIME SEPARATORS === */
.wp-drive-separator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 40px;
  font-size: 10px;
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.7;
}

.area-select-menu {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.1);
  z-index: 10000;
  min-width: 300px;
  max-width: 360px;
  overflow: hidden;
  animation: asmSlideUp 0.25s ease-out;
}
@keyframes asmSlideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.area-select-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
}
.asm-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asm-title strong {
  font-size: 14px;
  color: var(--color-text-primary);
}
.asm-area {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.area-select-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.area-select-close:hover {
  background: var(--color-bg-tertiary);
}
.area-select-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
}
/* Buttons */
.asm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.asm-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.asm-btn:active { transform: translateY(0); }
.asm-btn i { font-size: 14px; }
.asm-btn-weekplan {
  background: #2563eb;
  color: #fff;
  grid-column: 1 / -1;
}
.asm-btn-route {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.asm-btn-calendar {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.asm-btn-check {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  grid-column: 1 / -1;
}
/* Day picker for weekplan */
.asm-day-picker {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4px 0 2px;
}
.asm-day-option {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.asm-day-option:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* Navigate button - blue with directions icon */
.btn-navigate {
  background: #2196F3;
  color: #fff;
  border: none;
}

.btn-navigate:hover {
  background: #1976D2;
}

/* ===== WEEKLY PLAN ROUTE SUMMARY ===== */

/* Team member picker for route optimization */
.wp-team-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: asmFadeIn 0.15s ease-out;
}
.wp-team-picker {
  background: var(--color-bg-secondary);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  min-width: 280px;
  max-width: 360px;
  overflow: hidden;
  animation: asmSlideUp 0.2s ease-out;
}
.wp-team-picker-title {
  padding: 14px 16px 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}
.wp-team-picker-options {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wp-team-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
  text-align: left;
  width: 100%;
}
.wp-team-picker-option:hover {
  background: var(--color-bg-hover);
}
.wp-team-picker-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.wp-team-picker-name {
  flex: 1;
  font-weight: 500;
}
.wp-team-picker-count {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.wp-team-picker-all {
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 12px;
  border-radius: 0 0 10px 10px;
}
.wp-team-picker-cancel {
  margin: 8px 8px 12px;
  width: calc(100% - 16px);
}

.wp-route-summary {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.1);
  z-index: 10001;
  min-width: 320px;
  max-width: 400px;
  overflow: hidden;
  animation: asmSlideUp 0.25s ease-out;
}
.wp-route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
}
.wp-route-header strong {
  font-size: 14px;
}
.wp-route-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.wp-route-close:hover {
  background: var(--color-bg-hover);
}
.wp-route-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
}
.wp-route-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.wp-route-stat i {
  color: var(--color-text-secondary);
  width: 16px;
  text-align: center;
  font-size: 12px;
}
.wp-route-stat.total {
  font-weight: 700;
  color: var(--color-primary);
}
.wp-route-stat.total i {
  color: var(--color-primary);
}
.wp-route-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
}
.wp-route-actions .btn {
  flex: 1;
}

/* ============================================
   STATISTIKK TAB STYLING
   ============================================ */

.statistikk-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Overview Cards */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.overview-card {
  background: var(--color-bg-tertiary);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.overview-card:hover {
  border-color: var(--color-border-light);
  transform: translateY(-2px);
}

.overview-card.status-overdue {
  background: var(--color-status-overdue);
  border: none;
}

.overview-card.status-soon {
  background: var(--color-status-soon);
  border: none;
}

.overview-card.status-good {
  background: var(--color-status-good);
  border: none;
}

/* Hvit tekst på fargede kort */
.overview-card.status-overdue .overview-value,
.overview-card.status-overdue .overview-label,
.overview-card.status-good .overview-value,
.overview-card.status-good .overview-label {
  color: #fff;
}

/* Mørk tekst på gul/amber bakgrunn for bedre lesbarhet */
.overview-card.status-soon .overview-value,
.overview-card.status-soon .overview-label {
  color: #1a1a1a;
}

.overview-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-accent);
}

.overview-card.status-overdue .overview-icon,
.overview-card.status-good .overview-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.overview-card.status-soon .overview-icon {
  color: #1a1a1a;
  background: rgba(0, 0, 0, 0.1);
}

.overview-content {
  display: flex;
  flex-direction: column;
}

.overview-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

.overview-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stats Sections */
.stats-section {
  background: var(--color-bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.stats-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-section h3 i {
  color: var(--color-accent);
}

.stats-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

/* Tidsestimat-innsikt */
.tid-estimat-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.tid-estimat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tid-estimat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-surface, #1c1f26) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}

.tid-estimat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.tid-estimat-navn {
  font-weight: 600;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tid-estimat-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}

.tid-estimat-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.tid-estimat-change .tid-estimat-old {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.tid-estimat-change.tid-estimat-up .tid-estimat-new,
.tid-estimat-change.tid-estimat-up i {
  color: var(--color-warning, #d99a2b);
}

.tid-estimat-change.tid-estimat-down .tid-estimat-new,
.tid-estimat-change.tid-estimat-down i {
  color: var(--color-success, #3fb950);
}

.stats-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: 12px 0;
}

/* Season Chart - Bar Chart */
.season-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding-top: 10px;
}

.season-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

/* Plot-område: tar all ledig høyde, søyla vokser fra felles baseline */
.season-bar-track {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.season-bar-fill {
  width: 100%;
  max-width: 20px;
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  position: relative;
  min-height: 2px;
}

.season-bar-fill.el {
  background: linear-gradient(180deg, #F59E0B, #D97706);
}

.season-bar-fill.brann {
  background: linear-gradient(180deg, #DC2626, #B91C1C);
}

.season-bar-fill.combined {
  background: linear-gradient(180deg, var(--color-accent), #4A6D8C);
}

.season-bar-value {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.season-bar-label {
  flex: 0 0 auto;
  font-size: 8px;
  color: var(--color-text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Category Stats - Horizontal Bars */
.category-stats,
.area-stats,
.eltype-stats,
.brannsystem-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-bar-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.stat-bar-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.stat-bar-track {
  height: 8px;
  background: var(--color-bg-elevated);
  border-radius: 4px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.stat-bar-fill.el-kontroll {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.stat-bar-fill.brannvarsling {
  background: linear-gradient(90deg, #DC2626, #EF4444);
}

.stat-bar-fill.combined {
  background: linear-gradient(90deg, var(--color-accent), #7A9BBF);
}

.stat-bar-fill.area {
  background: linear-gradient(90deg, #6366F1, #818CF8);
}

.stat-bar-fill.eltype {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.stat-bar-fill.brannsystem {
  background: linear-gradient(90deg, #DC2626, #EF4444);
}

/* Mobile adjustments for statistikk */
@media (max-width: 768px) {
  /* Fix tab-pane scrolling on mobile */
  .tab-pane.active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(85vh - 180px);
  }

  .statistikk-container {
    padding: 12px;
    gap: 16px;
    padding-bottom: 100px; /* Extra space for scrolling */
  }

  .stats-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .overview-card {
    padding: 10px 8px;
  }

  .overview-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .overview-value {
    font-size: 18px;
  }

  .overview-label {
    font-size: var(--font-size-xs);
  }

  .stats-section {
    padding: 12px;
  }

  .stats-section h3 {
    font-size: var(--font-size-sm);
  }

  .season-chart {
    height: 80px;
  }

  .season-bar-value {
    font-size: var(--font-size-xs);
  }

  .season-bar-label {
    font-size: 8px;
  }

  .stat-bar-label,
  .stat-bar-value {
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   OFFICE MARKER - Glowing House Icon
   ============================================ */

.office-marker-glow {
  background: transparent !important;
  border: none !important;
}

.office-marker-container {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.office-glow-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.4);
  background: transparent;
  animation: office-ring-pulse 4s ease-out infinite;
}


@keyframes office-ring-pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
    border-color: rgba(34, 197, 94, 0.8);
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
    border-color: rgba(34, 197, 94, 0);
  }
}

.office-icon {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 20px rgba(34, 197, 94, 0.6),
    0 0 40px rgba(34, 197, 94, 0.4),
    0 0 60px rgba(34, 197, 94, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: office-glow 2s ease-in-out infinite;
}

.office-icon svg {
  width: 18px;
  height: 18px;
  color: white;
  stroke-width: 2.5;
}

@keyframes office-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
}

@keyframes office-glow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(34, 197, 94, 0.6),
      0 0 40px rgba(34, 197, 94, 0.4),
      0 0 60px rgba(34, 197, 94, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 30px rgba(34, 197, 94, 0.8),
      0 0 50px rgba(34, 197, 94, 0.5),
      0 0 80px rgba(34, 197, 94, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
  }
}

/* Office Popup Styling */
.office-popup-container .mapboxgl-popup-content {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.2);
}

.office-popup-container .mapboxgl-popup-tip {
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-top: none;
  border-right: none;
}

.office-popup-container .mapboxgl-popup-close-button {
  color: #a0a0a0 !important;
}

.office-popup-container .mapboxgl-popup-close-button:hover {
  color: #22c55e !important;
}

.office-popup {
  padding: 8px;
  color: #ffffff;
  text-align: center;
}

.office-popup h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #22c55e;
}

.office-popup p {
  margin: 0 0 10px 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #d0d0d0;
}

.office-popup .office-address {
  background: rgba(34, 197, 94, 0.1);
  padding: 10px;
  border-radius: 8px;
  border-left: 3px solid #22c55e;
  text-align: left;
}

.office-popup .office-contact a {
  color: #22c55e;
  text-decoration: none;
  transition: color 0.2s;
}

.office-popup .office-contact a:hover {
  color: #4ade80;
  text-decoration: underline;
}

.office-popup .office-services {
  font-size: var(--font-size-xs);
  color: #8a8a8a;
  margin-bottom: 0;
}

/* ============================================
   MAPBOX GL JS STYLING
   ============================================ */

/* Mapbox container */
#map {
  width: 100%;
  height: 100%;
  background: #0f0f0f;
}

/* Mapbox controls styling */
.mapboxgl-ctrl-group {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-md) !important;
}

.mapboxgl-ctrl-group button {
  background-color: transparent !important;
  border: none !important;
}

.mapboxgl-ctrl-group button:hover {
  background-color: #333 !important;
}

.mapboxgl-ctrl-group button + button {
  border-top: 1px solid #333 !important;
}

.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
  filter: invert(1);
}

.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  filter: invert(1);
}

.mapboxgl-ctrl-scale {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-size: var(--font-size-xs) !important;
  padding: 2px 6px !important;
}

/* ============================================
   GLOBE BEACON - 3D Globe Login Animation
   ============================================ */

.globe-beacon {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.globe-beacon-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 129, 172, 0.4) 0%, rgba(94, 129, 172, 0) 70%);
  animation: globeBeaconPulse 3s ease-out infinite;
}

.globe-beacon-pulse-2 {
  animation-delay: 1s;
}

.globe-beacon-pulse-3 {
  animation-delay: 2s;
}

@keyframes globeBeaconPulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.globe-beacon-dot {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #5E81AC 0%, #4A6D8C 50%, #3D5A7E 100%);
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(94, 129, 172, 0.8),
    0 0 40px rgba(94, 129, 172, 0.6),
    0 0 60px rgba(94, 129, 172, 0.4),
    0 0 80px rgba(94, 129, 172, 0.2),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  animation: globeBeaconGlow 2s ease-in-out infinite;
}

@keyframes globeBeaconGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(94, 129, 172, 0.8),
      0 0 40px rgba(94, 129, 172, 0.6),
      0 0 60px rgba(94, 129, 172, 0.4),
      0 0 80px rgba(94, 129, 172, 0.2),
      inset 0 -2px 6px rgba(0, 0, 0, 0.3),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 30px rgba(94, 129, 172, 1),
      0 0 60px rgba(94, 129, 172, 0.8),
      0 0 90px rgba(94, 129, 172, 0.5),
      0 0 120px rgba(94, 129, 172, 0.3),
      inset 0 -2px 6px rgba(0, 0, 0, 0.3),
      inset 0 2px 4px rgba(255, 255, 255, 0.5);
    transform: scale(1.15);
  }
}

/* Mapbox office marker - pulsing glow */
.mapbox-office-marker {
  width: 60px;
  height: 60px;
  position: relative;
  cursor: pointer;
}

.mapbox-office-marker .office-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.3);
  animation: officePulse 2s ease-out infinite;
}

.mapbox-office-marker .office-pulse.delay {
  animation-delay: 1s;
}

@keyframes officePulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.mapbox-office-marker .office-dot {
  position: absolute;
  inset: 15px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.mapbox-office-marker .office-dot svg {
  width: 16px;
  height: 16px;
  color: white;
}

/* Mapbox customer markers */
.mapbox-customer-marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.mapbox-customer-marker:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.mapbox-customer-marker i {
  color: white;
  font-size: 14px;
}

/* Mapbox popup styling - HIGH CONTRAST for readability */
@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.mapboxgl-popup {
  max-width: 340px !important;
  z-index: 1000 !important;
}

.mapboxgl-popup-content {
  background: rgba(18, 18, 24, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: #ffffff;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  overflow: hidden;
  animation: popupFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Status accent bar at top of popup */
.popup-accent {
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: var(--color-border);
}
.popup-accent.accent-overdue { background: linear-gradient(90deg, #ef4444, #f97316); }
.popup-accent.accent-soon { background: linear-gradient(90deg, #f59e0b, #eab308); }
.popup-accent.accent-ok { background: linear-gradient(90deg, #22c55e, #10b981); }
.popup-accent.accent-good { background: linear-gradient(90deg, #3b82f6, #6366f1); }

.popup-inner {
  padding: 16px 18px 14px;
}

.mapboxgl-popup-content h3 {
  margin: 0 0 2px 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff !important;
  padding-right: 20px;
  letter-spacing: -0.01em;
}

.popup-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
  font-weight: 400;
}

.popup-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin-bottom: 12px;
}

.popup-info-grid .popup-label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.popup-info-grid .popup-value {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 400;
}

/* Legacy p tags still used for some fields */
.mapboxgl-popup-content p {
  margin: 4px 0;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: var(--font-size-sm);
}

.mapboxgl-popup-content strong {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 500;
  font-size: 12px;
}

.mapboxgl-popup-content a {
  color: #60a5fa !important;
  text-decoration: none;
  font-weight: 500;
}

.mapboxgl-popup-content a:hover {
  color: #93c5fd !important;
  text-decoration: underline;
}

.mapboxgl-popup-content .popup-controls,
.mapboxgl-popup-content .popup-control-info {
  background: rgba(255, 255, 255, 0.04) !important;
  padding: 10px 12px;
  border-radius: 10px;
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.mapboxgl-popup-content .popup-controls p,
.mapboxgl-popup-content .popup-control-info p {
  color: rgba(255, 255, 255, 0.8) !important;
}

.mapboxgl-popup-content .popup-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mapboxgl-popup-content .control-days {
  font-weight: 700;
  color: #ffffff !important;
}

.popup-notater {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-style: italic;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  margin-top: 8px !important;
}

/* Popup weekday picker */
.popup-weekday-picker {
  display: flex;
  gap: 4px;
  padding: 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.1);
}

.popup-weekday-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  font-family: inherit;
}

.popup-weekday-btn:hover:not(:disabled) {
  background: rgba(94, 129, 172, 0.25);
  border-color: rgba(94, 129, 172, 0.4);
  color: #fff;
}

.popup-weekday-btn.is-today {
  border-color: rgba(94, 129, 172, 0.5);
  background: rgba(94, 129, 172, 0.12);
  color: #93c5fd;
}

.popup-weekday-btn.is-planned {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: rgba(34, 197, 94, 0.7);
  cursor: default;
}

.popup-weekday-btn .pwd-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.popup-weekday-btn .pwd-date {
  font-size: 9px;
  opacity: 0.6;
}

.popup-weekday-btn .pwd-check {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 7px;
  color: #22c55e;
}

/* Popup team assign */
.popup-team-assign {
  display: flex;
  gap: 4px;
  padding: 6px 18px 8px;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.popup-team-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-team-btn:hover {
  border-color: var(--team-color, var(--color-accent));
  background: color-mix(in srgb, var(--team-color, var(--color-accent)) 20%, transparent);
  color: #fff;
}

.popup-team-btn.active {
  border-color: var(--team-color, var(--color-accent));
  background: color-mix(in srgb, var(--team-color, var(--color-accent)) 30%, transparent);
  color: #fff;
  box-shadow: 0 0 8px color-mix(in srgb, var(--team-color, var(--color-accent)) 40%, transparent);
}

.mapboxgl-popup-content .popup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}

.mapboxgl-popup-content .popup-actions .btn {
  min-width: 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
  text-shadow: none;
  letter-spacing: 0.01em;
}

.mapboxgl-popup-content .btn-navigate {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.2);
}

.mapboxgl-popup-content .btn-primary {
  background: rgba(94, 129, 172, 0.15);
  color: #93b4d4 !important;
  border-color: rgba(94, 129, 172, 0.2);
}

.mapboxgl-popup-content .btn-complete {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.2);
}

.mapboxgl-popup-content .btn-success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.2);
}

.mapboxgl-popup-content .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.08);
}

.mapboxgl-popup-content .btn-email {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd !important;
  border-color: rgba(139, 92, 246, 0.2);
}

.mapboxgl-popup-content .btn-calendar {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4 !important;
  border-color: rgba(13, 148, 136, 0.2);
}

.mapboxgl-popup-content .btn-disabled {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.45) !important;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.06);
}

.mapboxgl-popup-content .btn:hover:not(.btn-disabled) {
  transform: translateY(-1px);
  filter: brightness(1.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mapboxgl-popup-close-button {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 20px !important;
  padding: 6px 10px !important;
  right: 2px !important;
  top: 6px !important;
  line-height: 1 !important;
  transition: color 0.15s ease;
  z-index: 1;
}

.mapboxgl-popup-close-button:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  background: transparent !important;
}

.mapboxgl-popup-tip {
  border-top-color: rgba(18, 18, 24, 0.92) !important;
  animation: popupFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Cluster popup styling */
.mapboxgl-popup-content .cluster-popup {
  padding: 16px 18px;
}

.mapboxgl-popup-content .cluster-popup h3 {
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.mapboxgl-popup-content .cluster-popup p {
  color: #e5e5e5 !important;
  font-size: var(--font-size-sm);
  margin: 0 0 12px 0;
}

.mapboxgl-popup-content .cluster-popup p strong {
  color: #ffffff !important;
  font-weight: 700;
}

.mapboxgl-popup-content .cluster-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.mapboxgl-popup-content .cluster-popup-actions .btn {
  flex: 1;
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.mapboxgl-popup-content .cluster-customer-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #444;
}

.mapboxgl-popup-content .cluster-customer-name {
  display: block;
  font-size: var(--font-size-sm);
  color: #d0d0d0 !important;
  padding: 3px 0;
}

.mapboxgl-popup-content .cluster-more {
  font-size: var(--font-size-xs);
  color: #888 !important;
  font-style: italic;
  margin-top: 6px;
}

.mapbox-popup-content h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.mapbox-popup-content .popup-address {
  margin: 0 0 4px 0;
  font-size: var(--font-size-sm);
  color: #a0a0a0;
}

.mapbox-popup-content .popup-location {
  margin: 0 0 12px 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.mapbox-popup-content .popup-status {
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: var(--font-size-sm);
  color: #d0d0d0;
}

.mapbox-popup-content .popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #333;
}

.mapbox-popup-content .popup-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.mapbox-popup-content .popup-btn.edit {
  background: var(--color-accent);
  color: white;
}

.mapbox-popup-content .popup-btn.edit:hover {
  background: var(--color-accent-hover);
}

.mapbox-popup-content .popup-btn.focus {
  background: #333;
  color: #fff;
}

.mapbox-popup-content .popup-btn.focus:hover {
  background: #444;
}

/* Mapbox attribution */
.mapboxgl-ctrl-attrib {
  background: rgba(26, 26, 26, 0.7) !important;
  color: var(--color-text-muted) !important;
  font-size: var(--font-size-xs) !important;
}

.mapboxgl-ctrl-attrib a {
  color: #888 !important;
}

/* Globe animation glow */
.mapboxgl-canvas {
  outline: none;
}

/* ========================================
   ADMIN TAB STYLES
   ======================================== */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.admin-stat-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-stat-card .stat-icon {
  width: 40px;
  height: 40px;
  background: rgba(94, 129, 172, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 16px;
}

.admin-stat-card.success .stat-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.admin-stat-card.danger .stat-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

.admin-stat-card.info .stat-icon {
  background: rgba(59, 130, 246, 0.15);
  color: #3B82F6;
}

.admin-stat-card .stat-content {
  display: flex;
  flex-direction: column;
}

.admin-stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.admin-stat-card .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
}

.admin-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-section h3 i {
  color: var(--color-accent);
}

.login-log-container {
  max-height: 400px;
  overflow-y: auto;
}

.login-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.login-log-table th,
.login-log-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.login-log-table th {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
}

.login-log-table td {
  color: var(--color-text-primary);
}

.login-log-table tr:hover {
  background: var(--color-bg-hover);
}

.login-log-table .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.login-log-table .status-badge.success {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.login-log-table .status-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

.login-log-table .user-agent {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.login-log-table .ip-address {
  font-family: monospace;
  color: var(--color-text-secondary);
}

/* Admin tab visibility */
.tab-item.admin-only {
  border-top: 1px solid var(--color-border);
  margin-top: 10px;
  padding-top: 10px;
}

/* Team Members Grid */
.team-members-container {
  margin-bottom: 20px;
}

.team-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.team-member-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.team-member-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.team-member-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.team-member-info {
  flex: 1;
  min-width: 0;
}

.team-member-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-member-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-member-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.team-member-role {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(94, 129, 172, 0.15);
  color: var(--color-accent);
  font-weight: 500;
  text-transform: uppercase;
}

.team-member-last-login {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.team-members-empty {
  text-align: center;
  padding: 30px;
  color: var(--color-text-tertiary);
}

.team-members-empty i {
  font-size: 32px;
  margin-bottom: 10px;
  opacity: 0.5;
}

.team-members-empty p {
  font-size: 14px;
}

/* Section header with actions */
.section-header-with-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-header-with-actions h3 {
  margin-bottom: 0;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Quota badge */
.quota-badge {
  font-size: var(--font-size-sm);
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-weight: 500;
  border: 1px solid var(--color-border);
}

.quota-badge.near-limit {
  background: rgba(251, 191, 36, 0.15);
  color: #FFC107;
  border-color: rgba(251, 191, 36, 0.3);
}

.quota-badge.at-limit {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Team members list view */
.team-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-member-item {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.team-member-item:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-secondary);
}

.team-member-item .team-member-avatar {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.team-member-item .team-member-info {
  flex: 1;
  min-width: 0;
}

.team-member-item .team-member-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.team-member-item:hover .team-member-actions {
  opacity: 1;
}

.team-member-actions .btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  border-radius: 6px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.team-member-actions .btn-icon:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.team-member-actions .btn-icon.delete:hover {
  border-color: #EF4444;
  color: #EF4444;
}

.team-member-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  flex-shrink: 0;
}

.team-member-status.inactive {
  background: #9CA3AF;
}

/* ========================================
   ADMIN FIELD/CATEGORY MANAGEMENT
   ======================================== */

.admin-section-description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: 16px;
  margin-top: -8px;
}

/* ========================================
   ADMIN COMPANY ADDRESS
   ======================================== */

.company-address-form .form-group {
  margin-bottom: 16px;
}

.company-address-form .form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
}

.company-address-form .form-group label i {
  margin-right: 6px;
  color: var(--color-primary);
}

.company-address-form .form-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

.company-address-form input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  box-sizing: border-box;
}

.company-address-form input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.admin-address-wrapper {
  position: relative;
}

.admin-address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.admin-address-suggestions.visible {
  display: block;
}

.admin-address-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
  font-size: var(--font-size-sm);
}

.admin-address-suggestion:last-child {
  border-bottom: none;
}

.admin-address-suggestion:hover,
.admin-address-suggestion.selected {
  background: var(--color-bg-hover);
}

.admin-address-suggestion i {
  color: var(--color-primary);
  margin-top: 3px;
  flex-shrink: 0;
}

.admin-postnummer-wrapper {
  position: relative;
}

.admin-postnummer-wrapper input {
  padding-right: 36px;
}

.admin-postnummer-status {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

.admin-postnummer-status.valid {
  color: #22c55e;
}

.admin-postnummer-status.invalid {
  color: #ef4444;
}

.admin-postnummer-status.loading {
  color: var(--color-text-secondary);
}

.admin-coordinates {
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  font-family: monospace;
}

.admin-coordinates .not-set {
  color: var(--color-text-muted);
  font-style: italic;
  font-family: inherit;
}

.company-address-form .form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ========================================
   ADDRESS SETUP PROMPT (centered on map)
   ======================================== */

.address-setup-prompt {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.address-setup-prompt.visible {
  opacity: 1;
  pointer-events: auto;
}

.address-prompt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.address-prompt-card {
  position: relative;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 40px 36px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.address-setup-prompt.visible .address-prompt-card {
  transform: scale(1) translateY(0);
}

.address-prompt-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-prompt-icon i {
  font-size: 28px;
  color: var(--color-primary);
}

.address-prompt-card h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.address-prompt-card p {
  margin: 0 0 28px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.address-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.address-prompt-btn-primary {
  padding: 12px 24px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s, transform 0.1s;
}

.address-prompt-btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.address-prompt-btn-primary i {
  margin-right: 8px;
}

.address-prompt-btn-secondary {
  padding: 8px 16px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: color 0.15s;
}

.address-prompt-btn-secondary:hover {
  color: var(--color-text-primary);
}

/* "Kom i gang" step indicator pill */
.address-prompt-step-indicator {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-primary);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

/* Bouncing icon animation */
.address-prompt-icon-animated i {
  animation: address-icon-bounce 2s ease-in-out infinite;
}

@keyframes address-icon-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-3px); }
}

/* Persistent address nudge pill (floating on map after banner dismissal) */
.address-nudge-pill {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-primary);
  border-radius: 24px;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s, color 0.15s;
  pointer-events: none;
}

.address-nudge-pill.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.address-nudge-pill:hover {
  background: var(--color-primary);
  color: #fff;
}

.address-nudge-pill i {
  font-size: 14px;
  animation: address-nudge-pulse 3s ease-in-out infinite;
}

@keyframes address-nudge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========================================
   ONBOARDING ATTENTION SYSTEM
   Highlights fields/sections that need user attention
   ======================================== */

/* Glowing attention highlight on sections */
.onboard-attention {
  position: relative;
  border-radius: 8px;
  animation: onboard-glow 1.5s ease-in-out infinite;
}

@keyframes onboard-glow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1), 0 0 8px 0 rgba(16, 185, 129, 0);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.6), 0 0 24px 4px rgba(16, 185, 129, 0.25);
  }
}

/* Persistent small dot badge for fields needing attention */
.onboard-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #10b981);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  pointer-events: none;
  z-index: 5;
  animation: onboard-badge-pulse 2.5s ease-in-out infinite;
}

@keyframes onboard-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

/* ========================================
   ADD CUSTOMER POPOVER (checklist action)
   ======================================== */
.add-customer-popover {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.add-customer-popover.visible {
  opacity: 1;
}
.add-customer-popover-backdrop {
  position: absolute;
  inset: 0;
}
.add-customer-popover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 12px;
  padding: 8px;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.popover-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text-primary, #e2e8f0);
}
.popover-option:hover {
  background: var(--hover-bg, #334155);
}
.popover-option i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: var(--color-primary, #10b981);
}
.popover-option strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.popover-option span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
}

/* Admin tab – address action needed badge (green instead of red) */
.address-action-badge {
  background: var(--color-primary) !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
  font-size: 10px !important;
  min-width: 16px !important;
  height: 16px !important;
}

.sortable-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sortable-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: grab;
  transition: all 0.15s ease;
}

.sortable-item:hover {
  border-color: var(--color-accent);
}

.sortable-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
  border-color: var(--color-accent);
  background: var(--color-bg-secondary);
}

.drag-handle {
  color: var(--color-text-muted);
  cursor: grab;
  padding: 4px;
}

.drag-handle:active {
  cursor: grabbing;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  display: block;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.item-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.item-meta .badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-left: 6px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--color-accent);
}

.item-meta .badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.item-meta .badge.muted {
  background: rgba(107, 114, 128, 0.15);
  color: #6B7280;
}

.item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sortable-item:hover .item-actions {
  opacity: 1;
}

.item-actions .btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  border-radius: 6px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.item-actions .btn-icon:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.item-actions .btn-icon.danger:hover {
  border-color: #EF4444;
  color: #EF4444;
}

/* Toggle switches */
.toggle-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 0;
}

.toggle-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  transition: 0.2s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-text-muted);
  border-radius: 50%;
  transition: 0.2s;
}

.toggle input:checked + .toggle-slider {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.toggle input:checked + .toggle-slider:before {
  transform: translateX(18px);
  background-color: white;
}

.toggle-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Options list for select fields */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.option-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.option-item input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.option-item input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.option-item input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.option-item .btn-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Empty states */
.fields-empty,
.categories-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
}

.fields-empty i,
.categories-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.fields-empty p,
.categories-empty p {
  margin-bottom: 16px;
}

/* Form row for side-by-side inputs */
.form-row {
  display: flex;
  gap: 16px;
}

.form-row .form-group {
  flex: 1;
}

/* Category color preview */
#categoryColor {
  width: 100%;
  height: 38px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

/* ========================================
   SUPER ADMIN
   ======================================== */

.super-admin-section {
  margin-top: 32px;
  border-top: 2px solid var(--color-accent);
  padding-top: 24px;
}

.super-admin-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(234, 179, 8, 0.05) 100%);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 12px;
  margin-bottom: 24px;
  color: #EAB308;
  font-weight: 600;
  font-size: var(--font-size-base);
}

.super-admin-banner i {
  font-size: 24px;
}

.admin-subsection {
  margin-top: 24px;
  padding: 20px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.admin-subsection h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-primary);
}

.admin-subsection h3 i {
  color: var(--color-accent);
  font-size: 16px;
}

.org-search-container {
  margin-bottom: 16px;
}

.org-search-container input {
  width: 100%;
  max-width: 400px;
}

.org-list-container {
  overflow-x: auto;
}

.org-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.org-table th,
.org-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.org-table th {
  background: var(--color-bg-tertiary);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.org-table tbody tr:hover {
  background: var(--color-bg-tertiary);
}

.org-table td strong {
  color: var(--color-text-primary);
}

.org-table td small {
  display: block;
  margin-top: 2px;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-primary {
  background: rgba(59, 130, 246, 0.2);
  color: #3B82F6;
}

.badge-secondary {
  background: rgba(107, 114, 128, 0.2);
  color: #9CA3AF;
}

.badge-success {
  background: rgba(34, 197, 94, 0.2);
  color: #22C55E;
}

.badge-warning {
  background: rgba(234, 179, 8, 0.2);
  color: #EAB308;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

.badge-info {
  background: rgba(6, 182, 212, 0.2);
  color: #06B6D4;
}

/* Organization info grid */
.org-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--color-bg-tertiary);
  border-radius: 8px;
}

.org-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.org-info-item label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.org-info-item span {
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Organization detail tabs */
.org-detail-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
}

.org-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.org-tab-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.org-tab-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.org-tab-content {
  margin-top: 16px;
}

.org-tab-actions {
  margin-bottom: 16px;
}

/* Super admin customer modal */
#superAdminCustomerModal {
  position: fixed;
  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: 3000;
  padding: 20px;
}

#superAdminCustomerModal .modal-content {
  background: var(--color-bg-primary);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

#superAdminCustomerModal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

#superAdminCustomerModal .modal-header h2 {
  margin: 0;
  font-size: 20px;
}

#superAdminCustomerModal .modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
}

#superAdminCustomerModal .modal-close:hover {
  color: var(--color-text-primary);
}

#superAdminCustomerModal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#superAdminCustomerModal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* ========================================
   INDUSTRY ONBOARDING
   ======================================== */

.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(8px);
  overflow-y: auto;
  padding: 20px;
}

.onboarding-overlay.visible {
  opacity: 1;
}

.onboarding-container {
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: onboardingSlideUp 0.5s ease;
}

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

.onboarding-header {
  text-align: center;
  margin-bottom: 40px;
}

.onboarding-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.onboarding-header h1 i {
  color: var(--color-primary);
}

.onboarding-header p {
  font-size: 16px;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 10px;
}

.industry-card {
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.industry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  transition: background 0.3s ease;
}

.industry-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.industry-card:hover::before {
  background: var(--color-primary);
}

.industry-card.selected {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.1);
}

.industry-card.selected::before {
  background: var(--color-primary);
}

.industry-card.selecting {
  pointer-events: none;
}

.industry-card.selecting::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.industry-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.industry-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.industry-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.onboarding-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.onboarding-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.onboarding-hint i {
  color: var(--color-text-secondary);
}

/* Responsive onboarding */
@media (max-width: 768px) {
  .onboarding-overlay {
    padding: 16px;
  }

  .onboarding-header h1 {
    font-size: 24px;
  }

  .onboarding-header p {
    font-size: 14px;
  }

  .industry-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .industry-card {
    padding: 20px;
  }

  .industry-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .industry-card h3 {
    font-size: 16px;
  }

  .industry-card p {
    font-size: var(--font-size-sm);
  }
}

/* ========================================
   ONBOARDING WIZARD - Multi-step
   ======================================== */

.wizard-container {
  max-width: 800px;
}

/* Progress indicator */
.wizard-progress {
  margin-bottom: 40px;
}

.wizard-progress-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #60a5fa);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.wizard-steps {
  display: flex;
  justify-content: space-between;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.wizard-step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  color: var(--color-text-tertiary);
}

.wizard-step.completed .wizard-step-icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.wizard-step.active .wizard-step-icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.wizard-step.upcoming .wizard-step-icon {
  opacity: 0.5;
}

.wizard-step-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}

.wizard-step.active .wizard-step-label {
  color: var(--color-primary);
  font-weight: 600;
}

.wizard-step.completed .wizard-step-label {
  color: var(--color-text-primary);
}

/* Wizard content */
.wizard-content {
  animation: wizardFadeIn 0.4s ease;
}

@keyframes wizardFadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.wizard-step-header {
  text-align: center;
  margin-bottom: 32px;
}

.wizard-step-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.wizard-step-header h1 i {
  color: var(--color-primary);
}

.wizard-step-header p {
  font-size: 15px;
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

/* Wizard forms */
.wizard-form {
  max-width: 500px;
  margin: 0 auto;
}

.wizard-form-group {
  margin-bottom: 24px;
}

.wizard-form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.wizard-form-group label i {
  color: var(--color-primary);
}

.wizard-form-group input[type="text"],
.wizard-form-group input[type="number"] {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 14px;
  transition: all 0.2s ease;
}

.wizard-form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.wizard-form-group input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wizard-form-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}

.wizard-form-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}

/* Wizard Address Autocomplete */
.wizard-address-wrapper {
  position: relative;
}

.wizard-address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.wizard-address-suggestions.visible {
  display: block;
}

.wizard-address-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.wizard-address-suggestion:last-child {
  border-bottom: none;
}

.wizard-address-suggestion:hover,
.wizard-address-suggestion.selected {
  background: var(--color-bg-hover);
}

.wizard-address-suggestion i {
  color: var(--color-primary);
  margin-top: 3px;
  flex-shrink: 0;
}

.wizard-address-text {
  flex: 1;
  min-width: 0;
}

.wizard-address-main {
  color: var(--color-text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-address-detail {
  color: var(--color-text-secondary);
  font-size: 0.85em;
  margin-top: 2px;
}

/* Wizard Postnummer Status */
.wizard-postnummer-wrapper {
  position: relative;
}

.wizard-postnummer-wrapper input {
  padding-right: 36px;
}

.wizard-postnummer-status {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

.wizard-postnummer-status.valid {
  color: #22c55e;
}

.wizard-postnummer-status.invalid {
  color: #ef4444;
}

.wizard-postnummer-status.loading {
  color: var(--color-text-secondary);
}

/* Auto-filled poststed in wizard */
#companyPoststed.auto-filled {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

/* Wizard maps */
.wizard-mini-map {
  height: 200px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.wizard-map {
  height: 300px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.wizard-coordinates {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.wizard-coordinates .not-set {
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* Wizard slider */
.wizard-slider-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wizard-slider-container input[type="range"] {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
}

.wizard-slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.wizard-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.wizard-slider-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  min-width: 24px;
  text-align: center;
}

/* Wizard buttons - sticky footer to always be visible */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
  position: sticky;
  bottom: 0;
  background: var(--color-bg-secondary);
  z-index: 10;
}

.wizard-footer-center {
  justify-content: center;
}

.wizard-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.wizard-btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.wizard-btn-primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.wizard-btn-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.wizard-btn-secondary:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-text-secondary);
}

.wizard-btn-skip {
  background: transparent;
  color: var(--color-text-tertiary);
  padding: 12px 16px;
}

.wizard-btn-skip:hover {
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.05);
}

.wizard-btn-large {
  padding: 16px 32px;
  font-size: 16px;
}

/* Completion step */
.wizard-complete {
  padding: 20px 0;
}

.wizard-complete-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  animation: wizardBounce 0.6s ease;
}

@keyframes wizardBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.wizard-complete-summary {
  max-width: 400px;
  margin: 0 auto;
  padding: 24px;
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.wizard-complete-summary h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.wizard-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wizard-tips-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 14px;
}

.wizard-tips-list li:last-child {
  border-bottom: none;
}

.wizard-tips-list li i {
  color: var(--color-primary);
  width: 20px;
}

/* Responsive wizard */
@media (max-width: 768px) {
  .wizard-container {
    max-width: 100%;
    padding: 16px;
  }

  .wizard-step-label {
    display: none;
  }

  .wizard-step-header h1 {
    font-size: 22px;
  }

  .wizard-form-row {
    grid-template-columns: 1fr;
  }

  .wizard-footer {
    flex-direction: column;
    gap: 12px;
  }

  .wizard-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   WIZARD IMPORT METHOD CHOICE
   ======================================== */

.wizard-import-method-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0;
  padding: 0 8px;
}

.wizard-method-card {
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  border-radius: 16px;
  padding: 32px 24px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wizard-method-card:hover {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.wizard-method-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 4px;
}

.wizard-method-card:first-child .wizard-method-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.wizard-method-card:last-child .wizard-method-icon {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-primary);
}

.wizard-method-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.wizard-method-card p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.wizard-method-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  margin-top: 8px;
}

.wizard-method-card:first-child .wizard-method-action {
  color: #10b981;
}

@media (max-width: 600px) {
  .wizard-import-method-choice {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   GETTING STARTED BANNER
   ======================================== */

.getting-started-banner {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px 36px;
  max-width: 720px;
  width: calc(100% - 340px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.getting-started-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.getting-started-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 6px 0;
}

.getting-started-header p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

.getting-started-close {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.getting-started-close:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.getting-started-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.getting-started-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.getting-started-card:hover {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.08);
  transform: translateY(-1px);
}

.getting-started-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 10px;
}

.getting-started-card:nth-child(1) .getting-started-card-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.getting-started-card:nth-child(2) .getting-started-card-icon {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-primary);
}

.getting-started-card:nth-child(3) .getting-started-card-icon {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.getting-started-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}

.getting-started-card p {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 768px) {
  .getting-started-banner {
    width: calc(100% - 32px);
    top: 16px;
    padding: 16px 20px;
  }

  .getting-started-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .getting-started-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 16px;
  }

  .getting-started-card-icon {
    margin: 0;
    flex-shrink: 0;
  }
}

/* ========================================
   WIZARD IMPORT STEP
   ======================================== */

/* Import sub-steps indicator */
.wizard-import-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  padding: 0 20px;
}

.import-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--color-bg-tertiary);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.import-step-indicator.active {
  opacity: 1;
  background: var(--color-primary);
  color: white;
}

.import-step-indicator .step-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 600;
}

.import-step-indicator .step-label {
  font-size: 13px;
  font-weight: 500;
}

.import-step-connector {
  width: 30px;
  height: 2px;
  background: var(--color-border);
  transition: background 0.3s ease;
}

.import-step-connector.active {
  background: var(--color-primary);
}

/* Import content area */
.wizard-import-content {
  min-height: 300px;
  margin-bottom: 20px;
}

/* Upload step */
.wizard-import-upload {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wizard-import-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-bg-secondary);
}

.wizard-import-dropzone:hover,
.wizard-import-dropzone.dragover {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.05);
}

.wizard-import-dropzone i {
  font-size: 48px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.wizard-import-dropzone p {
  margin: 4px 0;
  color: var(--color-text-secondary);
}

.wizard-import-dropzone p strong {
  color: var(--color-text-primary);
}

.wizard-import-dropzone .import-formats {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.wizard-import-tips {
  background: var(--color-bg-secondary);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.wizard-import-tips h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-primary);
}

.wizard-import-tips h4 i {
  color: #f59e0b;
}

.wizard-import-tips ul {
  margin: 0;
  padding-left: 20px;
}

.wizard-import-tips li {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

/* Loading state */
.wizard-import-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 16px;
  padding: 32px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.wizard-import-loading.ai-active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.wizard-loading-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--color-primary);
  border-radius: 50%;
  background: var(--color-bg-secondary);
}

.wizard-loading-icon.spinning i {
  animation: wizardSpin 1s linear infinite;
}

.wizard-loading-icon.ai-pulse {
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  color: white;
  animation: aiPulse 2s ease-in-out infinite;
}

@keyframes aiPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px 10px rgba(139, 92, 246, 0); }
}

.wizard-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: wizardSpin 1s linear infinite;
}

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

.wizard-loading-message {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.wizard-import-loading p {
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* AI thinking dots animation */
.wizard-ai-thinking {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.ai-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  animation: aiThinking 1.4s ease-in-out infinite;
}

.ai-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiThinking {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.wizard-ai-hint {
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-top: 8px;
}

/* Progress bar */
.wizard-progress-container {
  width: 100%;
  max-width: 300px;
  margin-top: 8px;
}

.wizard-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #10b981);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.wizard-progress-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 8px;
}

/* AI Questions Section */
.wizard-ai-questions {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.wizard-ai-questions-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--color-text-primary);
}

.wizard-ai-questions-header i {
  color: #f59e0b;
  font-size: 18px;
}

.wizard-ai-questions-header .wizard-btn-link {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}

.wizard-ai-questions-header .wizard-btn-link:hover {
  color: var(--color-primary-hover);
}

.wizard-ai-questions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-ai-question-card {
  background: var(--color-bg-primary);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
}

.wizard-ai-question-card .question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wizard-ai-question-card .question-column {
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: monospace;
  background: var(--color-bg-secondary);
  padding: 2px 8px;
  border-radius: 4px;
}

.wizard-ai-question-card .question-confidence {
  font-size: 12px;
  color: var(--color-text-tertiary);
  background: rgba(251, 191, 36, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
}

.wizard-ai-question-card .question-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
}

.wizard-ai-question-card .question-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wizard-ai-question-card .question-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  font-size: 13px;
}

.wizard-ai-question-card .question-option:hover {
  background: var(--color-bg-tertiary);
}

.wizard-ai-question-card .question-option.selected,
.wizard-ai-question-card .question-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.1);
}

.wizard-ai-question-card .question-option input {
  margin: 0;
}

.wizard-ai-question-card .question-option .recommended {
  font-size: 11px;
  color: #10b981;
  margin-left: 4px;
}

/* Required Field Selectors - Critical for import */
.wizard-required-fields {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(94, 129, 172, 0.08) 100%);
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.wizard-required-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.wizard-required-header i {
  color: #ef4444;
  font-size: 18px;
}

.wizard-required-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 16px 0;
}

.wizard-required-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-required-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-bg-primary);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.wizard-required-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  min-width: 120px;
}

.wizard-required-row label i {
  color: var(--color-primary);
  width: 16px;
}

.wizard-required-select {
  flex: 1;
  padding: 10px 12px;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.wizard-required-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.wizard-required-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wizard-required-select:has(option:checked:not([value=""])) {
  border-color: #10b981;
}

.confidence-warning {
  color: #f59e0b;
  font-size: 16px;
}

.wizard-required-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  font-size: 13px;
  color: #ef4444;
}

.wizard-required-warning i {
  font-size: 14px;
}

.wizard-required-warning.wizard-required-error {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #dc2626;
}

/* Disabled import button */
.wizard-btn-import:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-text-tertiary);
}

/* Error state */
.wizard-import-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 16px;
  text-align: center;
}

.wizard-import-error i {
  font-size: 48px;
  color: #ef4444;
}

.wizard-import-error p {
  color: var(--color-text-secondary);
  max-width: 400px;
}

/* Cleaning step */
.wizard-cleaning-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wizard-cleaning-summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 10px;
  color: var(--color-text-primary);
}

.wizard-cleaning-summary > i {
  font-size: 22px;
  color: #3b82f6;
  margin-top: 2px;
}

.wizard-cleaning-summary strong {
  display: block;
  margin-bottom: 4px;
}

.wizard-cleaning-summary p {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin: 0;
}

.wizard-cleaning-clean {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
}

.wizard-cleaning-clean > i {
  color: #22c55e;
}

.wizard-cleaning-rules h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.wizard-cleaning-rules-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wizard-cleaning-rule-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.wizard-cleaning-rule-toggle:hover {
  background: var(--color-bg-tertiary);
}

.wizard-cleaning-rule-toggle input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
}

.wizard-cleaning-rule-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wizard-cleaning-rule-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.wizard-cleaning-rule-desc {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.wizard-cleaning-rule-count {
  font-size: 12px;
  font-weight: 600;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.wizard-cleaning-diff-section h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.wizard-cleaning-diff-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.wizard-cleaning-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wizard-cleaning-diff-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
}

.wizard-cleaning-diff-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.wizard-cleaning-diff-table tr:last-child td {
  border-bottom: none;
}

.wizard-cleaning-diff-table .cell-original {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  text-decoration: line-through;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
}

.wizard-cleaning-diff-table .cell-cleaned {
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
}

.cleaning-null {
  color: var(--color-text-tertiary);
  font-style: italic;
}

.wizard-cleaning-more {
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 13px;
  padding: 10px 0 0;
}

.wizard-cleaning-removed {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.wizard-cleaning-removed summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.wizard-cleaning-removed summary:hover {
  background: var(--color-bg-tertiary);
}

.wizard-cleaning-removed-list {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wizard-cleaning-removed-item {
  display: flex;
  gap: 10px;
  font-size: 13px;
  padding: 6px 0;
  border-top: 1px solid var(--color-border);
}

.wizard-cleaning-removed-item .removal-row {
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.wizard-cleaning-removed-item .removal-reason {
  color: var(--color-text-secondary);
}

.wizard-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.wizard-btn-ghost {
  background: transparent;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
}

.wizard-btn-ghost:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-text-tertiary);
  background: rgba(255, 255, 255, 0.03);
}

/* Cleaning full data table */
.wizard-cleaning-fulltable-section {
  margin-top: 16px;
}

.wizard-cleaning-fulltable-section h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-primary);
}

.wizard-cleaning-fulltable-section .wizard-section-desc {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-bottom: 10px;
}

.wizard-cleaning-fulltable-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.wizard-cleaning-fulltable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wizard-cleaning-fulltable th {
  text-align: left;
  padding: 8px 10px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.wizard-cleaning-fulltable td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-cleaning-fulltable .cell-was-cleaned {
  background: rgba(34, 197, 94, 0.12);
  font-weight: 500;
}

.wizard-cleaning-fulltable .row-removed {
  background: rgba(239, 68, 68, 0.08);
}

.wizard-cleaning-fulltable .row-removed td {
  text-decoration: line-through;
  color: var(--color-text-tertiary);
}

.wizard-cleaning-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Mapping step */
.wizard-import-mapping {
  max-height: 400px;
  overflow-y: auto;
}

.wizard-mapping-intro {
  margin-bottom: 20px;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.required-badge {
  color: #ef4444;
  font-weight: 600;
}

.wizard-mapping-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-mapping-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.wizard-mapping-row.required {
  border-left: 3px solid var(--color-primary);
}

.wizard-mapping-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-primary);
}

.wizard-mapping-label i {
  color: var(--color-text-tertiary);
  width: 16px;
}

.wizard-mapping-select select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: 13px;
}

.wizard-mapping-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.wizard-mapping-preview .preview-label {
  color: var(--color-text-tertiary);
}

.wizard-mapping-preview .preview-value {
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unmapped columns section */
.wizard-unmapped-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.wizard-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
}

.wizard-section-title i {
  color: var(--color-primary);
}

.wizard-section-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 16px 0;
}

.wizard-unmapped-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wizard-unmapped-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.wizard-unmapped-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.wizard-unmapped-header {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-primary);
}

.wizard-unmapped-sample {
  font-size: 11px;
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-unmapped-action select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  font-size: 12px;
  min-width: 180px;
}

/* ===========================================
   FULLAUTOMATISK IMPORT - Auto Preview UI
   =========================================== */

.wizard-auto-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wizard-auto-summary {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 12px;
  color: white;
}

.wizard-auto-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  margin-bottom: 16px;
}

.wizard-auto-success i {
  font-size: 24px;
}

.wizard-auto-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.wizard-auto-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  font-size: 13px;
}

.wizard-auto-stat i {
  font-size: 14px;
}

/* AI Feature Banner in Upload Step */
.wizard-ai-feature-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  margin-bottom: 20px;
}

.wizard-ai-feature-banner .ai-feature-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wizard-ai-feature-banner .ai-feature-icon i {
  font-size: 24px;
  color: white;
}

.wizard-ai-feature-banner .ai-feature-content h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #8b5cf6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wizard-ai-feature-banner .ai-feature-content h4 i {
  font-size: 14px;
}

.wizard-ai-feature-banner .ai-feature-content p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.wizard-ai-feature-banner .ai-feature-content p strong {
  color: var(--color-text-primary);
}

/* AI Status Indicator */
.wizard-ai-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.wizard-ai-status i {
  font-size: 18px;
}

.wizard-ai-status.wizard-ai-enabled {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}

.wizard-ai-status.wizard-ai-enabled i {
  color: #8b5cf6;
}

.wizard-ai-status.wizard-ai-disabled {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.wizard-ai-status .ai-model {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-left: 4px;
}

/* AI-mapped column indicator */
.wizard-auto-column.ai-mapped {
  border-left: 3px solid #8b5cf6;
}

.wizard-auto-column .mapping-source {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.wizard-auto-column .mapping-source.ai {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.wizard-auto-column .mapping-source.ai i {
  font-size: 10px;
  color: #8b5cf6;
}

.wizard-auto-section {
  background: var(--color-bg-secondary);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.wizard-auto-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.wizard-auto-section h4 i {
  color: var(--color-primary);
}

.wizard-auto-columns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wizard-auto-column {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-bg-primary);
  border-radius: 6px;
  font-size: 13px;
}

.wizard-auto-column i {
  color: var(--color-text-tertiary);
  font-size: 12px;
}

.wizard-auto-column.recognized .column-to {
  color: #10b981;
  font-weight: 500;
}

.wizard-auto-column.new-field {
  border-left: 3px solid #3b82f6;
}

.wizard-auto-column.new-field .column-to {
  color: #3b82f6;
  font-weight: 500;
}

.wizard-auto-column .column-from {
  color: var(--color-text-secondary);
}

.wizard-auto-column .field-type {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.wizard-auto-table-wrapper {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.wizard-auto-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.wizard-auto-table th,
.wizard-auto-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-auto-table th {
  background: var(--color-bg-tertiary);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.wizard-auto-table tr:last-child td {
  border-bottom: none;
}

.wizard-auto-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
}

.wizard-auto-warning i {
  color: #f59e0b;
}

.wizard-btn-import {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  font-size: 15px;
  padding: 12px 24px;
}

.wizard-btn-import:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* Preview step */
.wizard-import-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wizard-preview-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wizard-preview-stats .stat-item {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.stat-item i {
  font-size: 20px;
  color: var(--color-text-tertiary);
}

.stat-item.success i { color: #10b981; }
.stat-item.warning i { color: #f59e0b; }
.stat-item.error i { color: #ef4444; }
.stat-item.info i { color: #3b82f6; }

.result-stat.info { border-color: #3b82f6; }
.result-stat.info i { color: #3b82f6; }

.stat-item .stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.stat-item .stat-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* Re-import Summary */
.wizard-reimport-summary {
  background: var(--color-bg-secondary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
}

.wizard-reimport-summary h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-primary);
}

.wizard-reimport-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.reimport-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color-bg-tertiary);
}

.reimport-stat-item.new {
  color: var(--color-success);
}

.reimport-stat-item.update {
  color: var(--color-warning);
}

.reimport-stat-item.unchanged {
  color: var(--color-text-secondary);
}

.reimport-stat-item .stat-value {
  font-weight: 600;
  font-size: 16px;
}

.reimport-stat-item .stat-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.wizard-not-in-import-info {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  background: var(--color-bg-info, rgba(59, 130, 246, 0.1));
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: 13px;
}

.wizard-not-in-import-info i {
  color: var(--color-info, #3b82f6);
  flex-shrink: 0;
  margin-top: 2px;
}

.wizard-not-in-import-info strong {
  display: block;
  margin-bottom: 4px;
}

.wizard-not-in-import-info p {
  margin: 0 0 8px;
  color: var(--color-text-secondary);
}

.wizard-not-in-import-info details {
  margin-top: 8px;
}

.wizard-not-in-import-info summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 500;
}

.not-in-import-list {
  margin: 8px 0 0 16px;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.not-in-import-list li {
  margin-bottom: 4px;
}

/* Category mapping */
.wizard-category-mapping {
  background: var(--color-bg-secondary);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.wizard-category-mapping h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-primary);
}

.wizard-category-mapping > p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.wizard-category-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wizard-category-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.wizard-category-original {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wizard-category-original .category-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.wizard-category-original .category-value {
  font-weight: 500;
  color: var(--color-text-primary);
}

.wizard-category-original .category-count {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.wizard-category-arrow {
  color: var(--color-text-tertiary);
}

.wizard-category-select {
  flex: 1;
}

.wizard-category-select select {
  width: 100%;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: 13px;
}

/* Preview table */
.wizard-preview-table-wrapper {
  overflow-x: auto;
}

.wizard-preview-table-wrapper h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-primary);
}

.wizard-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.wizard-preview-table th,
.wizard-preview-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.wizard-preview-table th {
  background: var(--color-bg-secondary);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: 11px;
}

.wizard-preview-table td {
  color: var(--color-text-primary);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-preview-table tr.row-error {
  background: rgba(239, 68, 68, 0.1);
}

.wizard-preview-table tr.row-warning {
  background: rgba(245, 158, 11, 0.1);
}

.wizard-preview-table tr.row-valid {
  background: rgba(16, 185, 129, 0.05);
}

.wizard-preview-table tr.row-excluded {
  background: rgba(107, 114, 128, 0.1);
  opacity: 0.6;
}

.wizard-preview-table tr.row-excluded td {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.wizard-preview-table tr.row-excluded .col-checkbox,
.wizard-preview-table tr.row-excluded .col-status {
  text-decoration: none;
}

/* Checkbox and status columns */
.wizard-preview-table .col-checkbox {
  width: 40px;
  text-align: center;
}

.wizard-preview-table .col-rownum {
  width: 40px;
  text-align: center;
  color: var(--color-text-muted);
}

.wizard-preview-table .col-status {
  width: 50px;
  text-align: center;
}

/* Editable cells */
.wizard-preview-table-editable td.import-cell-editable {
  cursor: text;
  transition: background 0.15s ease;
}

.wizard-preview-table-editable td.import-cell-editable:hover {
  background: rgba(94, 129, 172, 0.1);
}

.wizard-preview-table-editable td.cell-editing {
  padding: 0;
  background: white;
}

.wizard-preview-table-editable td.cell-edited {
  background: rgba(59, 130, 246, 0.15);
  font-weight: 500;
}

.wizard-preview-table-editable td.cell-edited::after {
  content: ' *';
  color: var(--color-primary);
}

.wizard-preview-table-editable td.cell-error {
  background: rgba(239, 68, 68, 0.15);
  border-bottom: 2px solid #ef4444;
}

/* Cell edit input */
.cell-edit-input {
  width: 100%;
  height: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background: white;
  outline: none;
}

/* Preview header with selection actions */
.wizard-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.wizard-preview-header h4 {
  margin: 0;
}

.wizard-selection-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wizard-selection-count {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 4px 12px;
  background: var(--color-bg-secondary);
  border-radius: 12px;
}

.wizard-btn-small {
  padding: 4px 10px;
  font-size: 12px;
}

/* Preview controls (toggle + selection) */
.wizard-preview-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wizard-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.wizard-toggle-label input[type="checkbox"] {
  accent-color: #3b82f6;
}

/* Transformation before/after display */
.cell-transformed {
  background: rgba(59, 130, 246, 0.08) !important;
}

.cell-before {
  color: var(--color-text-tertiary);
  text-decoration: line-through;
  font-size: 11px;
}

.cell-arrow {
  color: var(--color-text-tertiary);
  font-size: 9px;
  margin: 0 2px;
}

.cell-after {
  color: #86efac;
  font-weight: 500;
}

/* Preview pagination */
.wizard-preview-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.wizard-edit-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}

.wizard-edit-hint i {
  margin-right: 4px;
}

/* Status icons */
.status-ok { color: #10b981; }
.status-warning { color: #f59e0b; }
.status-error { color: #ef4444; }
.status-excluded { color: #9ca3af; }

.wizard-preview-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.wizard-preview-warning i {
  color: var(--color-primary);
  margin-top: 2px;
}

.wizard-preview-warning p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Results step */
.wizard-import-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
}

.wizard-results-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-bottom: 20px;
}

.wizard-results-icon.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.wizard-results-icon.partial {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.wizard-import-results h2 {
  margin: 0 0 24px;
  font-size: 24px;
  color: var(--color-text-primary);
}

.wizard-results-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.result-stat i {
  font-size: 20px;
}

.result-stat.success i { color: #10b981; }
.result-stat.auto-fixed i { color: #8b5cf6; }
.result-stat.warning i { color: #f59e0b; }
.result-stat.error i { color: #ef4444; }

.result-stat .stat-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.result-stat .stat-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.wizard-results-message {
  max-width: 400px;
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.wizard-results-errors {
  width: 100%;
  max-width: 500px;
  text-align: left;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.wizard-results-errors h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  color: #ef4444;
}

.wizard-results-errors ul {
  margin: 0;
  padding-left: 20px;
}

.wizard-results-errors li {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

/* Error grouping */
.wizard-error-groups {
  margin: 16px 0;
  padding: 16px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.wizard-error-groups h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--color-text-primary);
}

.error-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.error-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--color-bg-primary);
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.error-group-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.error-group-field {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.error-group-message {
  font-size: 13px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.error-group-count {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  background: var(--color-bg-secondary);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Quality report */
.wizard-quality-report {
  margin: 16px 0;
  padding: 16px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.wizard-quality-report h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--color-text-primary);
}

.quality-score-bar {
  position: relative;
  height: 24px;
  background: var(--color-bg-tertiary, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.quality-score-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s ease;
}

.quality-score-fill.success { background: var(--color-success, #22c55e); }
.quality-score-fill.warning { background: var(--color-warning, #f59e0b); }
.quality-score-fill.error { background: var(--color-error, #ef4444); }

.quality-score-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.quality-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quality-suggestions li {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 4px 0;
}

.quality-suggestions li i {
  color: var(--color-warning, #f59e0b);
  margin-right: 6px;
}

/* Footer with right-aligned group */
.wizard-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Responsive import step */
@media (max-width: 768px) {
  .wizard-import-steps {
    flex-wrap: wrap;
    gap: 8px;
  }

  .import-step-connector {
    display: none;
  }

  .import-step-indicator {
    padding: 6px 12px;
  }

  .import-step-indicator .step-label {
    display: none;
  }

  .wizard-mapping-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .wizard-mapping-preview {
    display: none;
  }

  .wizard-preview-stats {
    flex-direction: column;
  }

  .wizard-results-stats {
    flex-direction: column;
    width: 100%;
  }

  .result-stat {
    width: 100%;
  }
}

/* ========================================
   CONTEXT TIPS - First-time guidance
   ======================================== */

.context-tip-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.context-tip-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.context-tip-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.context-tip {
  position: fixed;
  z-index: 4002;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  max-width: 320px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  animation: contextTipIn 0.3s ease;
}

@keyframes contextTipIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.context-tip-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #1e293b;
  border: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.context-tip.position-top .context-tip-arrow {
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  border-top: none;
  border-left: none;
}

.context-tip.position-bottom .context-tip-arrow {
  top: -7px;
  left: 50%;
  margin-left: -6px;
  border-bottom: none;
  border-right: none;
}

.context-tip.position-left .context-tip-arrow {
  right: -7px;
  top: 50%;
  margin-top: -6px;
  border-bottom: none;
  border-left: none;
}

.context-tip.position-right .context-tip-arrow {
  left: -7px;
  top: 50%;
  margin-top: -6px;
  border-top: none;
  border-right: none;
}

.context-tip-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.context-tip-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.context-tip-content p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.context-tip-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.context-tip-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.context-tip-btn-skip {
  background: transparent;
  color: var(--color-text-tertiary);
}

.context-tip-btn-skip:hover {
  color: var(--color-text-secondary);
}

.context-tip-btn-next {
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.context-tip-btn-next:hover {
  background: #2563eb;
}

.context-tip-progress {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: 12px;
}

/* Highlight target element */
.context-tip-highlight {
  position: relative;
  z-index: 4001;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3) !important;
  border-radius: 8px;
}

/* Responsive context tips */
@media (max-width: 768px) {
  .context-tip {
    max-width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px;
  }
}

/* Import Dropzone */
.import-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-bg-tertiary);
}

.import-dropzone:hover,
.import-dropzone.dragover {
  border-color: var(--primary-color);
  background: rgba(94, 129, 172, 0.05);
}

.import-dropzone i {
  font-size: 48px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  display: block;
}

.import-dropzone p {
  color: var(--color-text-secondary);
  margin: 0 0 8px 0;
  font-size: 14px;
}

.import-dropzone .import-formats {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.import-dropzone.hidden {
  display: none;
}

/* Import Preview */
.import-preview {
  padding: 20px;
  background: var(--color-bg-tertiary);
  border-radius: 8px;
}

.import-preview.hidden {
  display: none;
}

.import-preview h4 {
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 14px;
}

.import-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.import-stats i {
  margin-right: 6px;
  color: var(--primary-color);
}

.import-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: flex-end;
}

/* Import Result */
.import-result {
  text-align: center;
  padding: 30px 20px;
}

.import-result.hidden {
  display: none;
}

.import-result-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.import-result-icon.success {
  color: var(--color-status-good);
}

.import-result-icon.error {
  color: var(--color-status-overdue);
}

.import-result h4 {
  margin: 0 0 12px 0;
  color: var(--color-text-primary);
}

.import-result p {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin: 0 0 20px 0;
}

.text-warning {
  color: var(--color-status-soon);
}

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

/* ============================================
   Import Wizard Styles
   ============================================ */

/* Step Indicator */
.import-steps-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 0 10px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: var(--color-border);
}

.step-item.completed:not(:last-child)::after {
  background: var(--primary-color);
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.step-item.active .step-number {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.step-item.completed .step-number {
  background: var(--color-status-good);
  border-color: var(--color-status-good);
  color: white;
}

.step-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.step-item.active .step-label {
  color: var(--primary-color);
  font-weight: 500;
}

.step-item.completed .step-label {
  color: var(--color-status-good);
}

/* Import Steps */
.import-step {
  animation: fadeIn 0.3s ease;
}

.import-step.hidden {
  display: none;
}

/* Summary Cards */
.import-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.summary-card {
  background: var(--color-bg-tertiary);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--color-border);
}

.summary-card i {
  font-size: 20px;
  margin-bottom: 8px;
  display: block;
}

.summary-card .count {
  font-size: 24px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.summary-card .label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-card.new i,
.summary-card.new .count {
  color: var(--color-status-good);
}

.summary-card.update i,
.summary-card.update .count {
  color: var(--primary-color);
}

.summary-card.warning i,
.summary-card.warning .count {
  color: var(--color-status-soon);
}

.summary-card.error i,
.summary-card.error .count {
  color: var(--color-status-overdue);
}

/* Column Mapping */
.column-mapping-container {
  max-height: 350px;
  overflow-y: auto;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.mapping-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  gap: 16px;
}

.mapping-row:last-child {
  border-bottom: none;
}

.mapping-row:hover {
  background: var(--color-bg-tertiary);
}

.mapping-excel {
  flex: 1;
  min-width: 0;
}

.mapping-excel strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.mapping-excel .sample-values {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapping-arrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.mapping-db {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mapping-db select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.confidence-badge {
  font-size: var(--font-size-xs);
  background: var(--primary-color);
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
}

/* Category Mapping */
.category-mapping {
  background: var(--color-bg-tertiary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--color-status-soon);
}

.category-mapping.hidden {
  display: none;
}

.category-mapping h5 {
  margin: 0 0 8px 0;
  color: var(--color-status-soon);
  font-size: 14px;
}

.category-mapping-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-mapping-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.original-value {
  font-weight: 500;
  color: var(--color-text-primary);
}

.occurrence-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.category-select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  min-width: 180px;
}

/* Dynamic Schema Section */
.dynamic-schema-section {
  background: var(--color-bg-tertiary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--color-primary);
}

.dynamic-schema-section.hidden {
  display: none;
}

.dynamic-schema-section h5 {
  margin: 0 0 8px 0;
  color: var(--color-primary);
  font-size: 14px;
}

.dynamic-schema-section h5 i {
  margin-right: 6px;
}

.schema-subsection {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.schema-subsection.hidden {
  display: none;
}

.schema-subsection h6 {
  margin: 0 0 10px 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.schema-subsection h6 i {
  margin-right: 6px;
  width: 16px;
  text-align: center;
}

.schema-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schema-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-bg-primary);
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.schema-item-checkbox {
  flex-shrink: 0;
}

.schema-item-info {
  flex: 1;
  min-width: 0;
}

.schema-item-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.schema-item-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.schema-item-preview {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.schema-item-preview-tag {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  color: var(--color-text-secondary);
}

.schema-item-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.schema-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.schema-field-type {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  background: var(--color-primary);
  color: white;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Preview Table */
.preview-table-wrapper {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 12px;
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.preview-table th {
  background: var(--color-bg-tertiary);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--color-border);
}

.preview-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.preview-table tr:last-child td {
  border-bottom: none;
}

.preview-table tr.status-new {
  background: rgba(34, 197, 94, 0.05);
}

.preview-table tr.status-update {
  background: rgba(94, 129, 172, 0.05);
}

.preview-table tr.status-warning {
  background: rgba(251, 191, 36, 0.05);
}

.preview-table tr.status-error {
  background: rgba(239, 68, 68, 0.05);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.status-badge.status-new {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-status-good);
}

.status-badge.status-update {
  background: rgba(94, 129, 172, 0.15);
  color: var(--primary-color);
}

.status-badge.status-warning {
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-status-soon);
}

.status-badge.status-error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-status-overdue);
}

.info-cell {
  color: var(--color-text-muted);
}

.issues-tooltip {
  cursor: help;
}

/* Pagination */
.preview-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.preview-pagination span {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Import Option */
.import-option {
  margin-bottom: 16px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
}

/* Progress Bar */
.import-progress {
  text-align: center;
  padding: 40px 20px;
}

.import-progress h4 {
  margin: 0 0 20px 0;
  color: var(--color-text-primary);
}

.progress-bar {
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), #7A9BBF);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0;
}

.progress-text {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Result */
.result-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.result-icon.success {
  color: var(--color-status-good);
}

.result-icon.error {
  color: var(--color-status-overdue);
}

.result-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 24px 0;
}

.result-stat {
  text-align: center;
}

.result-stat .stat-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.result-stat .stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.result-errors {
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}

.result-errors.hidden {
  display: none;
}

.result-errors h5 {
  color: var(--color-status-overdue);
  margin: 0 0 12px 0;
  font-size: 14px;
}

.result-errors ul {
  margin: 0;
  padding-left: 20px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.result-errors li {
  margin-bottom: 4px;
}

.result-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 20px;
  font-style: italic;
}

.result-note.hidden {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .import-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .mapping-row {
    flex-wrap: wrap;
  }

  .mapping-excel,
  .mapping-db {
    flex: 0 0 100%;
  }

  .mapping-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }
}

/* Range Slider */
.range-with-value {
  display: flex;
  align-items: center;
  gap: 16px;
}

.range-with-value input[type="range"] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-bg-tertiary);
  border-radius: 3px;
  outline: none;
}

.range-with-value input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  transition: transform 0.2s;
}

.range-with-value input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.range-with-value span {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
}

/* ========================================
   MAP LEGEND
   ======================================== */

.map-legend {
  position: fixed;
  bottom: 100px;
  left: 20px;
  z-index: 400;
  pointer-events: auto;
}

.legend-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.legend-toggle:hover {
  background: var(--color-bg-secondary);
  transform: scale(1.05);
}

.map-legend.expanded .legend-toggle {
  background: var(--primary-color);
  color: white;
}

.legend-content {
  position: absolute;
  bottom: 54px;
  left: 0;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  min-width: 180px;
  display: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.2s ease;
}

.map-legend.expanded .legend-content {
  display: block;
}

.legend-content h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.legend-content h5 {
  margin: 16px 0 8px 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-sm);
  color: var(--text-color);
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

/* Status Colors for Legend */
.legend-color.status-forfalt { background: #ef4444; }
.legend-color.status-snart { background: #f59e0b; }
.legend-color.status-ok { background: #3b82f6; }
.legend-color.status-god { background: #22c55e; }

.legend-status {
  border-top: 1px solid var(--color-border);
  margin-top: 12px;
  padding-top: 4px;
}

@media (max-width: 768px) {
  .map-legend {
    bottom: 80px;
    left: 10px;
  }

  .legend-toggle {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .legend-content {
    min-width: 160px;
    padding: 12px;
  }
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

.toast-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 14px;
  color: var(--text-color);
}

.toast-notification.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-notification i {
  font-size: 18px;
}

.toast-success {
  border-color: #10B981;
}

.toast-success i {
  color: #10B981;
}

.toast-error {
  border-color: #ef4444;
}

.toast-error i {
  color: #ef4444;
}

.toast-info {
  border-color: var(--primary-color);
}

.toast-info i {
  color: var(--primary-color);
}

/* Marker scale variable for user preference */
.custom-marker-with-label .marker-icon {
  transform: scale(var(--marker-scale, 1));
  transition: transform 0.2s ease;
}

@media (max-width: 768px) {
  .toast-notification {
    bottom: 100px;
    left: 20px;
    right: 20px;
    transform: translateX(0) translateY(100px);
  }

  .toast-notification.visible {
    transform: translateX(0) translateY(0);
  }
}

/* ============================================
   DASHBOARD STYLING
   ============================================ */

.dashboard-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Fyll hele fanen og scroll internt. Tidligere låste en max-height:calc(100vh - 120px)
     containeren ~66px kortere enn selve fanen (#tab-dashboard er allerede full høyde med
     egen scroll), så det ble en permanent død stripe under siste seksjon — uavhengig av
     scroll, og kun på dashboardet. flex:1 lar containeren fylle fanen; overflow-y:auto gir
     scrollbar kun ved behov (ingen permanent scrollbar-renne som «scroll» ga). */
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

/* Stats Cards Row */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--color-bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
  position: relative;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-light);
}

.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.stat-card.stat-overdue .stat-icon {
  background: rgba(220, 38, 38, 0.15);
  color: var(--color-status-overdue);
}

.stat-card.stat-upcoming .stat-icon {
  background: rgba(255, 193, 7, 0.15);
  color: var(--color-status-soon);
}

.stat-card.stat-completed .stat-icon {
  background: rgba(76, 175, 80, 0.15);
  color: var(--color-status-good);
}

.stat-card .stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.stat-card .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Action Cards */
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dashboard-actions .action-card {
  flex: 1 1 calc(50% - 6px);
  min-width: 120px;
}

.action-card {
  background: var(--color-bg-tertiary);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-card:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.action-card .action-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.action-icon.overdue {
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: white;
}

.action-icon.route {
  background: linear-gradient(135deg, #5E81AC, #7A9BBF);
  color: white;
}

.action-icon.calendar {
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
  color: white;
}

.action-card .action-content {
  flex: 1;
  min-width: 0;
}

.action-card .action-content h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-card .action-content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-card > i:last-child {
  display: none;
}

/* Category Overview */
.dashboard-categories {
  background: var(--color-bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.dashboard-categories h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-categories h3 i {
  color: var(--color-accent);
}

.category-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-secondary);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.category-stat i {
  font-size: 14px;
}

.category-stat .cat-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.category-stat .cat-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Area Quick Links */
.dashboard-areas {
  background: var(--color-bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.dashboard-areas h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-areas h3 i {
  color: var(--color-accent);
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-secondary);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.area-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

.area-chip .area-count {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* Smart Recommendations */
.dashboard-recommendations {
  margin-top: 16px;
  background: var(--color-bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.dashboard-recommendations h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-recommendations h4 i {
  color: var(--color-warning);
}

.recommendations-intro {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-bottom: 12px;
}

.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recommendation-card {
  background: var(--color-bg-secondary);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
}

.rec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rec-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.rec-header h4 i {
  color: var(--color-accent);
  font-size: 12px;
}

.rec-count {
  background: var(--color-accent);
  color: white;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.rec-details {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
}

.rec-overdue {
  color: var(--color-status-overdue);
  display: flex;
  align-items: center;
  gap: 4px;
}

.rec-upcoming {
  color: var(--color-status-warning);
  display: flex;
  align-items: center;
  gap: 4px;
}

.rec-categories {
  color: var(--color-text-muted);
  font-size: 11px;
  margin-bottom: 10px;
}

.rec-actions {
  display: flex;
  gap: 8px;
}

.rec-actions .btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 11px;
}

.rec-empty {
  text-align: center;
  padding: 20px;
  color: var(--color-text-muted);
}

.rec-empty i {
  font-size: 24px;
  color: var(--color-accent);
  margin-bottom: 8px;
  display: block;
}

.rec-empty p {
  font-size: var(--font-size-sm);
  margin: 0 0 6px 0;
}

.rec-empty-hint {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ============================================
   DASHBOARD SECTIONS
   ============================================ */

.dashboard-section {
  background: var(--color-bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  padding: 16px;
}

.dashboard-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.dashboard-section h3 i {
  color: var(--color-accent);
  width: 16px;
  text-align: center;
}

.dashboard-section h3 .section-badge {
  background: var(--color-status-overdue);
  color: white;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.dashboard-section .dashboard-section-content {
  padding: 0;
}

/* ============================================
   ARBEID TAB - Sub-navigation
   ============================================ */

.arbeid-sub-nav {
  display: flex;
  gap: 4px;
  padding: 12px 16px 8px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.arbeid-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.arbeid-pill i {
  font-size: 13px;
}

@media (max-width: 480px) {
  .arbeid-pill span {
    display: none;
  }
  .arbeid-pill {
    padding: 10px 8px;
  }
  .arbeid-pill i {
    font-size: 16px;
  }
}

.arbeid-pill:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.arbeid-pill.active {
  background: #4A6D8C; /* WCAG AA: mørkere accent-fyll så hvit tekst når 4.5:1 (#5E81AC ga 4.02) */
  color: white;
  border-color: var(--color-accent);
  font-weight: 600;
}

.arbeid-view {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.arbeid-view:not(.active) {
  display: none;
}

.rec-empty-stats {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ========================================
   SMART ROUTE ENGINE - Enhanced UI
   ======================================== */

/* Settings Panel */
.smart-route-settings {
  margin-bottom: 16px;
}

.smart-route-settings .settings-toggle {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.smart-route-settings .settings-toggle:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.settings-panel {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin-top: 10px;
  overflow: hidden;
}

.setting-row {
  display: grid;
  grid-template-columns: 100px minmax(60px, 1fr) 65px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
}

.setting-row:last-child {
  margin-bottom: 0;
}

.setting-row label {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setting-row input[type="range"] {
  width: 100%;
  min-width: 60px;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  -webkit-appearance: none;
  cursor: pointer;
}

.setting-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}

.setting-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.setting-row input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
}

/* Slider Tooltip - vises mens du justerer */
.slider-tooltip {
  position: absolute;
  top: -32px;
  background: var(--color-accent);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
}

.slider-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: var(--color-accent) transparent transparent transparent;
}

.slider-tooltip.visible {
  opacity: 1;
}

.setting-row select {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.setting-value {
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 600;
  width: 70px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

.settings-panel .btn {
  margin-top: 8px;
  width: 100%;
}

/* Recommendations Grid */
.recommendations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Enhanced Recommendation Card */
.recommendation-card.enhanced {
  background: var(--color-bg-secondary);
  border-radius: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  transition: all 0.2s;
}

.recommendation-card.enhanced:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.recommendation-card.enhanced.selected {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.05);
}

.recommendation-card.enhanced .rec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.recommendation-card.enhanced .rec-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-cluster-id {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.recommendation-card.enhanced .rec-title h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.recommendation-card.enhanced .rec-title h4 i {
  color: var(--color-accent);
  font-size: 11px;
}

/* Efficiency Score Badge */
.rec-efficiency {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  min-width: 60px;
}

.rec-efficiency.high {
  background: rgba(46, 204, 113, 0.15);
}

.rec-efficiency.medium {
  background: rgba(241, 196, 15, 0.15);
}

.rec-efficiency.low {
  background: rgba(231, 76, 60, 0.15);
}

.rec-efficiency .efficiency-score {
  font-size: 16px;
  font-weight: 700;
}

.rec-efficiency.high .efficiency-score {
  color: #2ecc71;
}

.rec-efficiency.medium .efficiency-score {
  color: #f1c40f;
}

.rec-efficiency.low .efficiency-score {
  color: #e74c3c;
}

.rec-efficiency .efficiency-label {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Metrics Row */
.rec-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.rec-metrics .metric {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.rec-metrics .metric i {
  font-size: 10px;
  color: var(--color-text-muted);
}

.rec-metrics .metric.urgency {
  color: var(--color-status-overdue);
}

.rec-metrics .metric.urgency i {
  color: var(--color-status-overdue);
}

/* Category Tags */
.recommendation-card.enhanced .rec-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.category-tag {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
}

/* Actions */
.recommendation-card.enhanced .rec-actions {
  display: flex;
  gap: 8px;
}

.recommendation-card.enhanced .rec-actions .btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 11px;
}

/* More indicator */
.rec-more {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

/* Toggle all button */
.rec-toggle-all {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--color-accent);
  font-size: 12px;
  margin-top: 12px;
  padding: 8px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.rec-toggle-all:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent);
}

.rec-toggle-all i {
  margin-right: 6px;
}

/* Cluster Centroid Marker */
.cluster-centroid-marker {
  background: transparent;
}

.centroid-icon {
  width: 30px;
  height: 30px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 2px solid white;
}

/* Highlight area on map — now handled by GeoJSON layers in smart-route-engine.js */

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

/* Dashboard Mobile Responsive */
@media (max-width: 768px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-card .stat-value {
    font-size: 22px;
  }

  .stat-card .stat-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .dashboard-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .action-card {
    padding: 12px;
  }

  .action-card .action-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}

/* ============================================
   PREMIUM VISUAL POLISH
   ============================================ */

/* Smooth transitions for interactive elements */
button, .btn, a, input, select, textarea {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced button hover effects */
.btn:hover:not(:disabled),
button:hover:not(:disabled):not(.tab-item):not(.kategori-tab):not(.category-btn):not(.area-select-toggle-btn):not(.terrain-toggle-btn):not(.filter-panel-toggle) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled),
button:active:not(:disabled):not(.area-select-toggle-btn):not(.terrain-toggle-btn):not(.filter-panel-toggle) {
  transform: translateY(0);
}

/* Headings typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Tabular numbers for statistics */
.stat-value, .overview-value, .tab-badge, .area-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Glass effect for modals */
.modal-content {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .modal-content {
  background: rgba(255, 255, 255, 0.95);
}

/* ============================================
   LIGHT THEME — Team Overview overrides
   ============================================ */
[data-theme="light"] .to-summary-card {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}
[data-theme="light"] .to-tech-card {
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .to-tech-card:hover {
  background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .to-tech-card:active {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .to-progress-bar {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .to-stops-list {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}
[data-theme="light"] .to-stop-item {
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .to-modal {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
}
[data-theme="light"] .to-modal-header {
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .to-modal-footer {
  border-top-color: var(--color-border);
}
[data-theme="light"] .to-select,
[data-theme="light"] .to-input {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="light"] .to-date-input {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="light"] .to-chip {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
[data-theme="light"] .to-search-row:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   LIGHT THEME — Mobile calendar overrides
   ============================================ */
[data-theme="light"] .mf-cal-header {
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .mf-cal-date-header {
  background: var(--color-bg-secondary);
  color: var(--color-accent, #3b82f6);
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .mf-cal-card {
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .mf-cal-time {
  color: var(--color-text-primary);
}
[data-theme="light"] .mf-cal-status.done {
  /* Bakgrunn (#a3be8c lysegrønn) flipper ikke — behold mørk tekst for lesbarhet */
  color: #2e3440;
}
[data-theme="light"] .mf-cal-desc,
[data-theme="light"] .mf-cal-address,
[data-theme="light"] .mf-cal-assigned {
  color: var(--color-text-muted);
}
[data-theme="light"] .mf-sheet-textarea {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
[data-theme="light"] .mf-est-input,
[data-theme="light"] .mf-wp-est-input {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
[data-theme="light"] .mf-stop-est,
[data-theme="light"] .mf-next-est,
[data-theme="light"] .mf-wp-stop-meta {
  color: var(--color-text-muted);
}

/* ── Light: mobil felt-ark select/dato (speiler .mf-sheet-textarea-override) ── */
[data-theme="light"] .mf-sheet-select {
  border-color: var(--color-border);
  /* background-color (ikke shorthand) for å bevare dropdown-pil-SVG */
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
[data-theme="light"] .mf-sheet-date {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
/* ── Light: team-avatar (faint blå tint + hvit tekst blir blek på hvitt) ── */
[data-theme="light"] .mf-team-avatar {
  background: var(--color-accent);
  color: #fff;
  text-shadow: none;
}

/* ── Light: Mine Kunder service-status-badges (lys tekst → mørk variant) ── */
[data-theme="light"] .mk-svc-forfalt,
[data-theme="light"] .mk-svc-forfalt .mk-svc-name { color: #b91c1c; }
[data-theme="light"] .mk-svc-snart,
[data-theme="light"] .mk-svc-snart .mk-svc-name { color: #92400e; }
[data-theme="light"] .mk-svc-ok,
[data-theme="light"] .mk-svc-ok .mk-svc-name { color: #166534; }

/* ── Light: Live Overview (sanntid) — bygd for mørk flate (rgba(255,255,255,..)) ── */
[data-theme="light"] .lov-header {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border);
}
[data-theme="light"] .lov-eyebrow,
[data-theme="light"] .lov-side-meta { color: var(--color-text-secondary); }
[data-theme="light"] .lov-tip {
  background: rgba(91, 141, 239, 0.10);
  border-color: rgba(91, 141, 239, 0.30);
  color: var(--color-text-secondary);
}
[data-theme="light"] .lov-tip i,
[data-theme="light"] .lov-card-pos i { color: var(--color-accent); }
[data-theme="light"] .lov-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}
[data-theme="light"] .lov-card:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-light);
}
[data-theme="light"] .lov-card-live {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.45);
}
[data-theme="light"] .lov-card-avatar-mute {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}
[data-theme="light"] .lov-card-status,
[data-theme="light"] .lov-card-status-idle,
[data-theme="light"] .lov-card-pos { color: var(--color-text-secondary); }
[data-theme="light"] .lov-card-status-done,
[data-theme="light"] .lov-card-status-mute,
[data-theme="light"] .lov-card-acc,
[data-theme="light"] .lov-card-pos-empty i { color: var(--color-text-muted); }
[data-theme="light"] .lov-card-status-live { color: #15803d; }

/* ============================================
   LIGHT THEME — Mobile sheets & method picker
   ============================================ */
[data-theme="light"] .mf-sheet-content {
  background: var(--color-bg-secondary);
}
[data-theme="light"] .mf-method-option {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
}
[data-theme="light"] .mf-method-option:active {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .mf-method-text span {
  color: var(--color-text-muted);
}
[data-theme="light"] .mf-method-option > i.fa-chevron-right {
  color: var(--color-text-muted);
}

/* ============================================
   LIGHT THEME — Tags & form element overrides
   ============================================ */
[data-theme="light"] .tags-section {
  background: var(--color-bg-secondary);
}
[data-theme="light"] .tags-add-row select {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
[data-theme="light"] .tag-manager-item {
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .tag-manager-add input {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* Smooth scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Card focus states */
.stat-card:focus-within,
.action-card:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Subtle loading shimmer animation */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 25%,
    var(--color-bg-hover) 50%,
    var(--color-bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* Badge pulse animation for notifications */
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.tab-badge:not(:empty) {
  animation: pulse-badge 2s ease-in-out infinite;
}

/* Skip-to-content link for keyboard navigation */
.skip-to-content {
  position: absolute;
  left: -9999px;
  z-index: 999999;
  padding: 12px 24px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  font-size: var(--font-size-base);
}
.skip-to-content:focus {
  left: 0;
  top: 0;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden,
.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;
}

/* Improved focus states for accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   ACCESSIBILITY - Touch Targets for Elderly Users
   WCAG 2.1 recommends minimum 44x44px touch targets
   ============================================ */

/* Ensure all interactive elements have minimum touch target size */
@media (pointer: coarse) {
  button,
  .btn,
  .tab-item,
  .customer-item,
  .action-card,
  .category-tag,
  .filter-btn,
  .modal-close,
  select {
    min-height: 48px;
  }

  /* Increase checkbox/radio hit area */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  /* Larger close button on modals */
  .modal-close {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  /* More padding on list items */
  .customer-admin-item,
  .route-customer-item,
  .avtale-item {
    padding: 16px;
    min-height: 60px;
  }

  /* Larger tab items */
  .tab-item {
    padding: 14px 16px;
  }

  /* More spacing between clickable items */
  .customer-list .customer-admin-item + .customer-admin-item {
    margin-top: 8px;
  }
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
  /* Ensure buttons are easy to tap */
  .btn,
  button {
    min-height: 48px;
    padding: 12px 20px;
  }

  /* Larger form inputs on mobile */
  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: 48px;
    font-size: var(--font-size-base);
    padding: 14px 16px;
  }

  /* Better spacing for touch */
  .form-group {
    margin-bottom: 20px;
  }

  /* Larger modal close button */
  .modal-close {
    top: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    font-size: 28px;
  }
}

/* ============================================
   IMPERSONATION BANNER (Super Admin)
   ============================================ */

.impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
}

.impersonation-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.impersonation-content i {
  font-size: 18px;
  opacity: 0.9;
}

.impersonation-content strong {
  font-weight: 600;
}

.impersonation-exit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.impersonation-exit:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Adjust app content when impersonating */
body.is-impersonating #appView .sidebar {
  top: 48px;
  height: calc(100vh - 48px);
}

body.is-impersonating #appView .filter-panel {
  top: 48px;
  height: calc(100vh - 48px);
}

body.is-impersonating #sharedMapContainer {
  top: 48px;
  height: calc(100vh - 48px);
}

body.is-impersonating #loginOverlay {
  top: 48px;
  height: calc(100vh - 48px);
}

/* ========================================
   MARKER CONTEXT MENU
   Right-click (PC) / long-press (mobile)
   ======================================== */

.marker-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 200px;
  max-width: 280px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border, #333);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 4px 0;
  animation: contextMenuIn 0.15s ease-out;
  font-family: inherit;
  font-size: 13px;
}

@keyframes contextMenuIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.context-menu-header {
  padding: 8px 12px 6px;
  font-weight: 600;
  color: var(--color-text-primary, #fff);
  font-size: 13px;
  border-bottom: 1px solid var(--color-border, #333);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: var(--color-text-secondary, #ccc);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  position: relative;
  white-space: nowrap;
}

.context-menu-item:hover {
  background: var(--color-primary, #10b981);
  color: #fff;
}

.context-menu-item.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* Info-rad i kontekstmeny (f.eks. kategori-breakdown over klynge-handlinger) */
.context-menu-item.context-menu-info {
  opacity: 0.85;
  pointer-events: none;
  cursor: default;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-secondary, #cbd5e1);
  padding-top: 4px;
  padding-bottom: 4px;
}

.context-menu-item.danger:hover {
  background: #DC2626;
  color: #fff;
}

.context-menu-item i {
  width: 16px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
}

.context-menu-divider {
  height: 1px;
  background: var(--color-border, #333);
  margin: 4px 0;
}

/* Submenu parent */
.context-menu-parent {
  justify-content: space-between;
}

.context-menu-parent > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.context-menu-arrow {
  font-size: 10px;
  opacity: 0.5;
}

.context-menu-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -4px;
  min-width: 180px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border, #333);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 4px 0;
  z-index: 1;
}

.context-menu-parent:hover > .context-menu-submenu {
  display: block;
  animation: contextMenuIn 0.12s ease-out;
}

/* Mobile: submenu opens below instead of to the right */
@media (max-width: 768px) {
  .context-menu-submenu {
    position: static;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.15);
    margin: 2px 0;
  }

  .context-menu-submenu .context-menu-item {
    padding-left: 32px;
    font-size: 12px;
  }

  .marker-context-menu {
    min-width: 220px;
  }
}

/* ========================================
   MARKER HOVER TOOLTIP
   Shows on mouseover (PC) or tap (mobile)
   ======================================== */

.marker-hover-tooltip {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  max-width: 260px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border, #333);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  padding: 0;
  pointer-events: auto;
  animation: tooltipFadeIn 0.15s ease-out;
  font-family: inherit;
  font-size: 12px;
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

.marker-hover-tooltip .tooltip-header {
  padding: 8px 10px 4px;
  font-weight: 600;
  color: var(--color-text-primary, #fff);
  font-size: 13px;
  border-bottom: 1px solid var(--color-border, #333);
}

.marker-hover-tooltip .tooltip-body {
  padding: 6px 10px 8px;
}

.marker-hover-tooltip .tooltip-row {
  color: var(--color-text-secondary, #aaa);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.marker-hover-tooltip .tooltip-row i {
  width: 14px;
  text-align: center;
  font-size: 11px;
  opacity: 0.6;
}

.marker-hover-tooltip .tooltip-service {
  color: var(--color-text-muted, #888);
  padding: 3px 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.marker-hover-tooltip .tooltip-service i {
  width: 14px;
  text-align: center;
  font-size: 11px;
  opacity: 0.5;
}

.marker-hover-tooltip .tooltip-status {
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.marker-hover-tooltip .tooltip-status.status-overdue {
  background: rgba(220, 38, 38, 0.2);
  color: var(--color-status-overdue);
}
.marker-hover-tooltip .tooltip-status.status-this-week {
  background: rgba(255, 152, 0, 0.2);
  color: var(--color-status-this-week);
}
.marker-hover-tooltip .tooltip-status.status-soon {
  background: rgba(255, 193, 7, 0.2);
  color: var(--color-status-soon);
}
.marker-hover-tooltip .tooltip-status.status-next-month {
  background: rgba(126, 87, 194, 0.2);
  color: var(--color-status-next-month);
}
.marker-hover-tooltip .tooltip-status.status-ok {
  background: rgba(66, 165, 245, 0.15);
  color: var(--color-status-ok);
}
.marker-hover-tooltip .tooltip-status.status-good {
  background: rgba(76, 175, 80, 0.15);
  color: var(--color-status-good);
}
.marker-hover-tooltip .tooltip-status.status-unknown {
  background: rgba(120, 144, 156, 0.15);
  color: var(--color-status-unknown);
}
.marker-hover-tooltip .tooltip-status.status-visited {
  background: rgba(158, 158, 158, 0.15);
  color: var(--color-status-visited);
}
.marker-hover-tooltip .tooltip-status.status-inquiry {
  background: rgba(171, 71, 188, 0.2);
  color: var(--color-status-inquiry);
}
.marker-hover-tooltip .tooltip-status.status-confirmed-a {
  background: rgba(239, 83, 80, 0.15);
  color: var(--color-status-confirmed-a);
}
.marker-hover-tooltip .tooltip-status.status-confirmed-b {
  background: rgba(102, 187, 106, 0.15);
  color: var(--color-status-confirmed-b);
}
.marker-hover-tooltip .tooltip-status.status-confirmed-both {
  background: linear-gradient(90deg, rgba(239, 83, 80, 0.15), rgba(102, 187, 106, 0.15));
  color: #ddd;
}

.marker-hover-tooltip .tooltip-actions {
  display: flex;
  gap: 2px;
  padding: 4px 6px 6px;
  border-top: 1px solid var(--color-border, #333);
}

.tooltip-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #aaa);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}

.tooltip-action-btn:hover {
  background: var(--color-accent, #5e81ac);
  color: #fff;
}

/* Hide tooltip on mobile (touch devices use bottom sheet instead) */
@media (hover: none) {
  .marker-hover-tooltip {
    display: none;
  }
}

/* ========================================
   LIFECYCLE MARKER STYLES
   Status-based visual overrides for map markers
   ======================================== */

/* Visited (recently done) → faded / low-opacity */
.custom-marker-with-label .marker-icon[data-status="besøkt"] {
  opacity: 0.45;
  filter: grayscale(0.5);
  border-color: var(--color-status-visited);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Inquiry sent → purple glow + pulse */
.custom-marker-with-label .marker-icon[data-status="forespørsel"] {
  border-color: var(--color-status-inquiry);
  box-shadow:
    0 0 12px rgba(171, 71, 188, 0.6),
    0 0 24px rgba(171, 71, 188, 0.3);
  animation: glow-inquiry 1.8s ease-in-out infinite;
}

@keyframes glow-inquiry {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(171, 71, 188, 0.6),
      0 0 24px rgba(171, 71, 188, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 18px rgba(171, 71, 188, 0.8),
      0 0 36px rgba(171, 71, 188, 0.5);
    transform: scale(1.04);
  }
}

/* Confirmed type A → red border ring */
.custom-marker-with-label .marker-icon[data-status="bekreftet"].status-confirmed-a {
  border-color: var(--color-status-confirmed-a);
  border-width: 4px;
  box-shadow: 0 0 8px rgba(239, 83, 80, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Confirmed type B → green border ring */
.custom-marker-with-label .marker-icon[data-status="bekreftet"].status-confirmed-b {
  border-color: var(--color-status-confirmed-b);
  border-width: 4px;
  box-shadow: 0 0 8px rgba(102, 187, 106, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Confirmed both → split red/green border */
.custom-marker-with-label .marker-icon[data-status="bekreftet"].status-confirmed-both {
  border-width: 4px;
  border-color: var(--color-status-confirmed-a);
  border-right-color: var(--color-status-confirmed-b);
  border-bottom-color: var(--color-status-confirmed-b);
  box-shadow: 0 0 8px rgba(200, 150, 80, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* This week → orange glow + pulse */
.custom-marker-with-label .marker-icon[data-status="denne-uke"] {
  border-color: var(--color-status-this-week);
  box-shadow:
    0 0 14px rgba(255, 152, 0, 0.7),
    0 0 28px rgba(255, 152, 0, 0.4);
  animation: glow-this-week 1.5s ease-in-out infinite;
}

@keyframes glow-this-week {
  0%, 100% {
    box-shadow:
      0 0 14px rgba(255, 152, 0, 0.7),
      0 0 28px rgba(255, 152, 0, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 22px rgba(255, 152, 0, 0.9),
      0 0 44px rgba(255, 152, 0, 0.6);
    transform: scale(1.06);
  }
}

/* Next month → purple border */
.custom-marker-with-label .marker-icon[data-status="neste-mnd"] {
  border-color: var(--color-status-next-month);
  box-shadow: 0 0 8px rgba(126, 87, 194, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Lifecycle status colors for marker-dot (legacy dot markers) */
.custom-marker-with-label.status-visited .marker-dot {
  background: var(--color-status-visited) !important;
  opacity: 0.5;
}
.custom-marker-with-label.status-inquiry .marker-dot {
  background: var(--color-status-inquiry) !important;
}
.custom-marker-with-label.status-confirmed-a .marker-dot {
  background: var(--color-status-confirmed-a) !important;
}
.custom-marker-with-label.status-confirmed-b .marker-dot {
  background: var(--color-status-confirmed-b) !important;
}
.custom-marker-with-label.status-confirmed-both .marker-dot {
  background: linear-gradient(135deg, var(--color-status-confirmed-a) 50%, var(--color-status-confirmed-b) 50%) !important;
}
.custom-marker-with-label.status-this-week .marker-dot {
  background: var(--color-status-this-week) !important;
}
.custom-marker-with-label.status-next-month .marker-dot {
  background: var(--color-status-next-month) !important;
}

/* Lifecycle status colors for popup-status badges */
.popup-status.status-visited {
  background: var(--color-status-visited) !important;
}
.popup-status.status-inquiry {
  background: var(--color-status-inquiry) !important;
}
.popup-status.status-confirmed-a {
  background: var(--color-status-confirmed-a) !important;
}
.popup-status.status-confirmed-b {
  background: var(--color-status-confirmed-b) !important;
}
.popup-status.status-confirmed-both {
  background: linear-gradient(90deg, var(--color-status-confirmed-a), var(--color-status-confirmed-b)) !important;
}
.popup-status.status-this-week {
  background: var(--color-status-this-week) !important;
}
.popup-status.status-next-month {
  background: var(--color-status-next-month) !important;
}

/* Lifecycle dark labels keep dark bg */
.custom-marker-with-label.status-visited .marker-label,
.custom-marker-with-label.status-inquiry .marker-label,
.custom-marker-with-label.status-confirmed-a .marker-label,
.custom-marker-with-label.status-confirmed-b .marker-label,
.custom-marker-with-label.status-confirmed-both .marker-label,
.custom-marker-with-label.status-this-week .marker-label,
.custom-marker-with-label.status-next-month .marker-label {
  background: rgba(0, 0, 0, 0.95) !important;
}

/* Utility text colors for lifecycle statuses */
.text-status-visited { color: var(--color-status-visited) !important; }
.text-status-inquiry { color: var(--color-status-inquiry) !important; }
.text-status-confirmed-a { color: var(--color-status-confirmed-a) !important; }
.text-status-confirmed-b { color: var(--color-status-confirmed-b) !important; }
.text-status-this-week { color: var(--color-status-this-week) !important; }
.text-status-next-month { color: var(--color-status-next-month) !important; }


/* ========================================
   EMAIL DIALOG
   Modal for sending emails to customers
   ======================================== */

.email-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.email-dialog {
  background: var(--bg-primary, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.email-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.email-dialog-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-dialog-header h3 i {
  color: var(--color-primary, #4fc3f7);
}

.email-dialog-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.email-dialog-close:hover {
  background: rgba(239, 83, 80, 0.2);
  color: #ef5350;
}

.email-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.email-dialog-recipient {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary, #16213e);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text-primary);
}

.email-dialog-recipient label {
  font-weight: 600;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.email-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.email-dialog-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.email-dialog-select,
.email-dialog-input,
.email-dialog-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-secondary, #16213e);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.email-dialog-select:focus,
.email-dialog-input:focus,
.email-dialog-textarea:focus {
  outline: none;
  border-color: var(--color-primary, #4fc3f7);
}

.email-dialog-select:focus-visible,
.email-dialog-input:focus-visible,
.email-dialog-textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.email-dialog-textarea {
  resize: vertical;
  min-height: 80px;
}

.email-dialog-custom-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Preview section */
.email-dialog-preview-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.email-dialog-preview-btn {
  align-self: flex-start;
  padding: 8px 16px;
  background: rgba(79, 195, 247, 0.12);
  color: var(--color-primary, #4fc3f7);
  border: 1px solid rgba(79, 195, 247, 0.25);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}

.email-dialog-preview-btn:hover {
  background: rgba(79, 195, 247, 0.2);
}

.email-preview-container {
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 8px;
  overflow: hidden;
}

.email-preview-subject {
  padding: 10px 14px;
  background: var(--bg-secondary, #16213e);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.email-preview-frame {
  width: 100%;
  height: 300px;
  border: none;
  background: #fff;
}

/* Footer */
.email-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #2a2a4a);
}

.email-send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

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

/* Mobile responsive */
@media (max-width: 600px) {
  .email-dialog-overlay {
    padding: 10px;
  }

  .email-dialog {
    max-height: 95vh;
  }

  .email-dialog-body {
    padding: 16px;
  }

  .email-preview-frame {
    height: 200px;
  }
}

/* ============================================
   MOBILE BOTTOM TAB BAR
   ============================================ */

.bottom-tab-bar {
  display: none;
}

@media (max-width: 768px) {
  .bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2px;
    z-index: 2500;
    pointer-events: auto;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  }

  .bottom-tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
    min-width: 48px;
    transition: color 0.2s ease;
  }

  .bottom-tab-item.active {
    color: var(--color-accent);
  }

  .bottom-tab-item:active {
    transform: scale(0.95);
  }

  .bottom-tab-item i {
    font-size: 20px;
    line-height: 1;
  }

  .bottom-tab-item span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
  }

  .bottom-tab-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    min-width: 16px;
    height: 16px;
    background: var(--color-status-overdue, #ef4444);
    color: #fff;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* Hide old sidebar and mobile menu toggle when bottom tab bar is active */
  body.has-bottom-tab-bar .sidebar,
  body.has-bottom-tab-bar .sidebar.collapsed {
    display: none !important;
  }

  body.has-bottom-tab-bar .mobile-menu-toggle {
    display: none !important;
  }

  /* Hide original filter panel on mobile - clean bottom area */
  body.has-bottom-tab-bar .map-container .filter-panel {
    display: none !important;
  }

  /* Hide Mapbox GL JS attribution on mobile - clutters bottom area */
  body.has-bottom-tab-bar .mapboxgl-ctrl-attrib {
    display: none !important;
  }

  /* Reposition all floating elements above tab bar */
  body.has-bottom-tab-bar .mobile-route-fab {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.has-bottom-tab-bar .map-legend {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.has-bottom-tab-bar .toast-notification {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Reposition route info above tab bar */
  body.has-bottom-tab-bar .route-info {
    top: 10px;
  }

  /* Content panel - slide up from bottom instead of from right */
  body.has-bottom-tab-bar .content-panel {
    position: fixed !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: translateY(100%) !important;
    z-index: 2000 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--color-border) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  body.has-bottom-tab-bar .content-panel.open {
    transform: translateY(0) !important;
  }

  /* Half-height mode: content panel takes bottom 55%, map visible above */
  body.has-bottom-tab-bar .content-panel.open.half-height {
    top: 45% !important;
    transform: translateY(0) !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* Full-height mode: expanded from half */
  body.has-bottom-tab-bar .content-panel.open.full-height {
    top: 0 !important;
    border-radius: 0 !important;
    transform: translateY(0) !important;
  }

  /* Drag handle for half-height panel */
  body.has-bottom-tab-bar .content-panel.half-height .content-panel-header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--color-border-light, #555);
    border-radius: 2px;
  }

  body.has-bottom-tab-bar .content-panel.half-height .content-panel-header,
  body.has-bottom-tab-bar .content-panel.full-height .content-panel-header {
    cursor: grab;
    position: relative;
    padding-top: 16px;
  }

  /* No overlay in half-height mode - map stays interactive */
  body.has-bottom-tab-bar .content-panel.half-height ~ .content-panel-overlay {
    display: none !important;
  }

  body.has-bottom-tab-bar .content-panel.closed {
    transform: translateY(100%) !important;
    width: 100% !important;
  }

  /* Content panel overlay - sits between content and tab bar */
  body.has-bottom-tab-bar .content-panel-overlay {
    z-index: 1999;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Mapbox GL JS popups above tab bar */
  body.has-bottom-tab-bar .mapboxgl-popup {
    z-index: 2600 !important;
  }
}

/* ============================================
   MORE MENU OVERLAY
   ============================================ */

.more-menu-overlay {
  display: none;
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  top: 0;
  background: var(--color-bg-primary);
  z-index: 2400;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.more-menu-overlay.open {
  display: flex;
  flex-direction: column;
}

.more-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.more-menu-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.more-menu-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 16px;
}

.more-menu-close:active {
  background: var(--color-bg-hover);
}

.more-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 20px;
  flex: 1;
  align-content: start;
}

.more-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  color: var(--color-text-secondary);
  cursor: pointer;
  min-height: 90px;
  position: relative;
  transition: all 0.2s ease;
}

.more-menu-item:active {
  background: var(--color-bg-hover);
  border-color: var(--color-border-light);
  transform: scale(0.97);
}

.more-menu-item i {
  font-size: 24px;
}

.more-menu-item span {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.more-menu-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  background: var(--color-status-overdue, #ef4444);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ============================================
   MOBILE FILTER SHEET (Map tab)
   Visibility controlled entirely by inline styles
   (display:none/block via JS) to avoid CSS specificity issues.
   ============================================ */

.mobile-filter-sheet {
  display: none;
}

@media (max-width: 768px) {
  body.has-bottom-tab-bar .mobile-filter-sheet {
    position: fixed;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    background: var(--color-bg-secondary);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--color-border);
    z-index: 2000;
    max-height: 65vh;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Search FAB - floating button to open filter sheet */
  .mobile-search-fab {
    display: none;
  }

  body.has-bottom-tab-bar .mobile-search-fab {
    display: flex;
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-accent, #5E81AC);
    color: #fff;
    border: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 1998;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
  }

  body.has-bottom-tab-bar .mobile-search-fab:active {
    transform: scale(0.92);
  }

  body.has-bottom-tab-bar .mobile-search-fab.hidden {
    display: none;
  }

  /* Selection indicator FAB - shows when customers are selected */
  .mobile-selection-fab {
    display: none;
  }

  body.has-bottom-tab-bar .mobile-selection-fab {
    display: none;
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    height: 40px;
    padding: 0 14px;
    border-radius: 20px;
    background: var(--color-accent, #5E81AC);
    color: #fff;
    border: none;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    z-index: 1998;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
  }

  body.has-bottom-tab-bar .mobile-selection-fab.visible {
    display: flex;
  }

  .filter-sheet-handle {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
  }

  .filter-sheet-handle::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--color-border-light);
    border-radius: 2px;
  }

  .filter-sheet-search-peek {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 10px 14px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text-secondary);
    font-size: 14px;
    margin-top: 4px;
  }

  .filter-sheet-search-peek i {
    font-size: 14px;
    color: var(--color-text-muted);
  }

  .filter-sheet-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    background: var(--color-accent-muted, rgba(94, 129, 172, 0.15));
    padding: 2px 8px;
    border-radius: 10px;
  }

  .filter-sheet-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 16px;
    padding: 4px 8px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .filter-sheet-content {
    padding: 0;
  }

  /* Override filter panel styles when inside filter sheet */
  .mobile-filter-sheet .filter-panel {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
    order: unset !important;
  }

  .mobile-filter-sheet .filter-panel-toggle {
    display: none !important;
  }

  .mobile-filter-sheet .filter-panel-inner {
    padding: 0 !important;
    background: transparent !important;
  }

  .mobile-filter-sheet .filter-panel-header {
    display: none !important;
  }

  .mobile-filter-sheet .filter-panel-content {
    padding: 8px 16px !important;
  }

  .mobile-filter-sheet .customer-list-wrapper {
    max-height: 40vh !important;
  }
}

/* ============================================
   OFFLINE / SYNC UI
   ============================================ */

/* Connection status indicator in user bar */
.connection-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: #22c55e;
  transition: color 0.3s ease;
}

/* Sync banner - top notification */
.sync-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.sync-banner-success {
  background: rgba(34, 197, 94, 0.95);
  color: #fff;
}

.sync-banner-warning {
  background: rgba(234, 179, 8, 0.95);
  color: #1a1a1a;
}

.sync-banner-error {
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
}

/* Stale data banner - bottom of screen */
.stale-data-banner {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 4px);
  left: 8px;
  right: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  z-index: 2450;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stale-data-warning {
  background: rgba(234, 179, 8, 0.9);
  color: #1a1a1a;
}

.stale-data-error {
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
}

/* On desktop, stale banner at top */
@media (min-width: 769px) {
  .stale-data-banner {
    bottom: auto;
    top: 8px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 500px;
  }
}

/* =============================================
   CHAT / MESSAGING SYSTEM
   ============================================= */

/* Chat pane — JS sets explicit height via resizeChatContainer() */
#tab-chat {
  overflow: hidden;
  display: none;
  flex-direction: column;
}

#tab-chat.active {
  display: flex !important;
  flex-direction: column;
}

.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Chat header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.chat-header h2 {
  margin: 0;
  font-size: 16px;
}

/* Conversation list */
.chat-conversations {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.chat-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}

.chat-conv-item:hover {
  background: var(--color-bg-tertiary);
}

.chat-conv-item.unread {
  background: var(--color-accent-muted);
}

.chat-conv-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.chat-conv-item.unread .chat-conv-icon {
  background: var(--color-accent);
  color: white;
}

.chat-conv-info {
  flex: 1;
  min-width: 0;
}

.chat-conv-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.chat-conv-preview {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.chat-conv-time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.chat-conv-unread {
  background: var(--color-accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* Chat sub-views — each fills the container */
.chat-conversation-list,
.chat-message-view,
.chat-new-dm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chat-message-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.chat-message-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
}

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.chat-msg.other {
  align-self: flex-start;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-bottom-left-radius: 4px;
}

.chat-msg.self {
  align-self: flex-end;
  background: var(--color-accent);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-msg-sender {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 3px;
}

.chat-msg.self .chat-msg-sender {
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

.chat-msg-time {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
}

.chat-msg-date-separator {
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 8px 0;
  position: relative;
}

.chat-msg-date-separator::before,
.chat-msg-date-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--color-border);
}

.chat-msg-date-separator::before {
  left: 0;
}

.chat-msg-date-separator::after {
  right: 0;
}

/* Typing indicator */
.chat-typing-indicator {
  padding: 4px 16px 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Chat input area — always pinned at bottom */
.chat-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.chat-input-area input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.chat-input-area input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-bg-elevated);
}

.chat-input-area input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.chat-input-area input::placeholder {
  color: var(--color-text-muted);
}

.chat-input-area .btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Team member list for new DM */
.chat-team-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.chat-team-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chat-team-item:hover {
  background: var(--color-bg-tertiary);
}

.chat-team-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-muted);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.chat-team-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Chat badge on sidebar tab */
.tab-badge.chat-badge {
  background: var(--color-accent);
}

/* Chat empty state */
.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
  gap: 12px;
}

.chat-empty-state i {
  font-size: 32px;
  opacity: 0.4;
}

.chat-empty-state p {
  font-size: 14px;
  margin: 0;
}

/* Load more messages button */
.chat-load-more {
  text-align: center;
  padding: 8px;
}

.chat-load-more button {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 12px;
}

.chat-load-more button:hover {
  text-decoration: underline;
}

/* ========== CALENDAR SPLIT VIEW ========== */
.calendar-split-overlay {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.calendar-split-panel {
  pointer-events: auto;
  width: 55%;
  min-width: 400px;
  max-width: 75%;
  background: var(--bg-primary, #0f0f0f);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border-color, #2a2a2a);
}

.calendar-split-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-secondary, #1a1a1a);
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  flex-shrink: 0;
}
.calendar-split-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.calendar-split-nav {
  display: flex;
  gap: 2px;
}

.calendar-split-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Split view week grid - horizontal 7-column layout */
.split-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border-color, #2a2a2a);
  min-height: 100%;
}

.split-week-day {
  background: var(--bg-primary, #0f0f0f);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.split-week-day.today {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--bg-primary));
}

.split-week-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--bg-secondary, #1a1a1a);
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  text-align: center;
  flex-shrink: 0;
}
.split-week-day.today .split-week-day-header {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary));
}

.split-day-name {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}
.split-week-day.today .split-day-name {
  color: var(--color-primary);
}
.split-day-date {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.split-week-day.today .split-day-date {
  color: var(--color-primary);
}
.split-day-time {
  font-size: 10px;
  background: var(--color-primary);
  color: white;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}
.split-day-count {
  font-size: 10px;
  color: var(--text-tertiary);
}

.split-day-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  flex: 1;
  overflow-y: auto;
}

/* Outlook-style cards in split view */
.split-avtale-card {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-primary));
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, box-shadow 0.15s;
  position: relative;
}
.split-avtale-card:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--bg-primary));
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.split-avtale-card.completed {
  opacity: 0.5;
  border-left-color: var(--text-tertiary);
  background: var(--bg-secondary);
}
.split-avtale-card.completed .split-card-name {
  text-decoration: line-through;
}

.split-card-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.split-card-initials {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: 3px;
  padding: 2px 5px;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.split-card-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.split-card-delete {
  background: none;
  border: none;
  color: var(--color-danger, #dc2626);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s;
}
.split-avtale-card:hover .split-card-delete { opacity: 0.6; }
.split-card-delete:hover { opacity: 1 !important; }

.split-card-addr {
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 1px;
}
.split-card-phone {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-bottom: 1px;
}
.split-card-phone i,
.split-card-time i {
  font-size: 8px;
  margin-right: 3px;
}
.split-card-time {
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 500;
}

.split-day-empty {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 12px 6px;
  text-align: center;
}
.split-day-footer {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color, #2a2a2a);
  display: flex;
  gap: 0;
}
.split-day-add {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.5;
  text-align: center;
  flex: 1;
  transition: opacity 0.15s;
}
.split-day-add:hover {
  opacity: 1;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-primary));
}
.split-day-confirm {
  font-size: 10px;
  color: var(--text-secondary);
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.5;
  text-align: center;
  flex: 1;
  border-left: 1px solid var(--border-color, #2a2a2a);
  transition: opacity 0.15s, color 0.15s;
}
.split-day-confirm:hover {
  opacity: 1;
  color: var(--color-success, #22c55e);
  background: color-mix(in srgb, var(--color-success, #22c55e) 8%, var(--bg-primary));
}
/* Confirm Day Panel (floating) */
.confirm-day-panel {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.1);
  z-index: 10001;
  min-width: 340px;
  max-width: 420px;
  overflow: hidden;
  animation: asmSlideUp 0.25s ease-out;
}
.confirm-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
}
.confirm-day-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 12px;
}
.confirm-day-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}
.confirm-day-item:last-child { border-bottom: none; }
.confirm-day-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.confirm-day-item-name {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.confirm-day-item-area {
  font-size: 10px;
  color: var(--color-text-secondary);
}
.confirm-day-item-interval {
  font-size: 10px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.confirm-day-interval {
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
}
.confirm-day-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
}

/* Divider (drag handle between calendar and map) */
.calendar-split-divider {
  pointer-events: auto;
  width: 6px;
  background: var(--bg-secondary, #1a1a1a);
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 10;
  transition: background 0.15s;
}
.calendar-split-divider:hover,
.calendar-split-divider.dragging {
  background: var(--color-primary);
}
.split-divider-handle {
  width: 2px;
  height: 40px;
  background: var(--text-tertiary);
  border-radius: 2px;
  opacity: 0.5;
}
.calendar-split-divider:hover .split-divider-handle,
.calendar-split-divider.dragging .split-divider-handle {
  background: #fff;
  opacity: 0.9;
}

/* Map area in split view - transparent to show shared map */
.calendar-split-map {
  flex: 1;
  min-width: 200px;
  position: relative;
  pointer-events: none; /* Let clicks pass through to shared map below */
}

/* Active day in split view */
.split-week-day.active {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-primary));
}
.split-week-day.active .split-week-day-header {
  background: color-mix(in srgb, var(--color-primary) 15%, var(--bg-secondary));
  cursor: pointer;
}
.split-week-day-header {
  cursor: pointer;
  transition: background 0.15s;
}
.split-week-day-header:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-secondary));
}
.split-active-icon {
  color: var(--color-primary);
  font-size: 10px;
  animation: pulse-icon 1.5s ease-in-out infinite;
}
@keyframes pulse-icon {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Area badges compact in split view */
.split-week-day .week-day-areas {
  padding: 2px 4px;
  gap: 2px;
  flex-wrap: wrap;
}
.split-week-day .area-badge {
  font-size: 9px;
  padding: 1px 4px;
}

/* Upcoming areas overview */
.split-upcoming-areas {
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  background: var(--bg-secondary, #1a1a1a);
}
.split-upcoming-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.15s;
}
.split-upcoming-header:hover {
  color: var(--text-primary);
}
.split-upcoming-chevron {
  margin-left: auto;
  transition: transform 0.2s;
  font-size: 10px;
}
.split-upcoming-chevron.rotated {
  transform: rotate(180deg);
}
.split-upcoming-body {
  max-height: 200px;
  overflow-y: auto;
  transition: max-height 0.3s ease;
}
.split-upcoming-body.collapsed {
  max-height: 0;
  overflow: hidden;
}
.split-upcoming-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-secondary);
}
.split-upcoming-item:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-secondary));
}
.split-upcoming-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.split-upcoming-types {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-left: 14px;
}
.split-upcoming-area {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.split-upcoming-area i {
  font-size: 8px;
  margin-right: 4px;
  color: var(--color-primary);
}
.split-upcoming-count {
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}
.split-upcoming-days {
  color: var(--text-tertiary);
  white-space: nowrap;
  font-size: 10px;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .calendar-split-overlay {
    flex-direction: column;
  }
  .calendar-split-panel {
    width: 100% !important;
    max-width: 100%;
    min-width: unset;
    height: 55%;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
  }
  .calendar-split-divider {
    width: 100%;
    height: 6px;
    cursor: row-resize;
  }
  .split-divider-handle {
    width: 40px;
    height: 2px;
  }
  .split-week-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* ========================================
   ROLE-BASED UI: Hide write actions for leser
   ======================================== */

/* Hide add/create buttons */
body.role-leser #addCustomerBtn,
body.role-leser #addCustomerBtnTab,
body.role-leser #subcatAdminToggle,
body.role-leser .import-btn,
body.role-leser .export-btn {
  display: none !important;
}

/* Hide edit/delete actions in popups and customer details */
body.role-leser [data-action="editCustomer"],
body.role-leser [data-action="deleteCustomer"],
body.role-leser [data-action="toggleCustomerSelection"],
body.role-leser [data-action="quickMarkVisited"],
body.role-leser [data-action="quickAddToday"],
body.role-leser [data-action="showCalendarQuickMenu"],
body.role-leser [data-action="quickAddToSplitDay"],
body.role-leser [data-action="sendEmail"],
body.role-leser [data-action="addCustomerToCalendar"],
body.role-leser .kontaktlogg-delete,
body.role-leser .kontaktperson-delete,
body.role-leser .popup-btn-group {
  display: none !important;
}

/* Hide customer form save/delete buttons */
body.role-leser #customerForm .btn-primary,
body.role-leser #customerForm .btn-danger {
  display: none !important;
}

/* ========================================
   ROLE-BASED UI: Kontor — partial write access
   Can edit customers/calendar, but NOT routes/import/weekplan
   ======================================== */

body.role-kontor .import-btn,
body.role-kontor .export-btn {
  display: none !important;
}

/* ========================================
   ONBOARDING CHECKLIST
   ======================================== */

.onboarding-checklist {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 380px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  z-index: 1900;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-checklist.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.onboarding-checklist.dismissing {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

.checklist-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--color-border);
}

.checklist-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.checklist-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checklist-header h3 i {
  color: var(--color-primary);
}

.checklist-header-actions {
  display: flex;
  gap: 4px;
}

.checklist-header-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s ease;
}

.checklist-header-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.checklist-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checklist-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.checklist-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #60a5fa);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.checklist-progress-text {
  font-size: 12px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.checklist-tasks {
  padding: 8px 0;
  max-height: 280px;
  overflow-y: auto;
}

.checklist-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.checklist-task:hover:not(.completed) {
  background: var(--color-bg-secondary);
}

.checklist-task.completed {
  cursor: default;
}

.checklist-task-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.checklist-task:not(.completed) .checklist-task-check {
  color: var(--color-text-tertiary);
}

.checklist-task.completed .checklist-task-check {
  color: #4ade80;
}

.checklist-task-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checklist-task-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.checklist-task.completed .checklist-task-label {
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

.checklist-task-desc {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.checklist-task.completed .checklist-task-desc {
  display: none;
}

.checklist-task-arrow {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-text-tertiary);
  transition: transform 0.15s ease;
}

.checklist-task:hover:not(.completed) .checklist-task-arrow {
  transform: translateX(2px);
  color: var(--color-primary);
}

/* Just-completed animation */
.checklist-task.just-completed .checklist-task-check {
  animation: checklistCheckPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes checklistCheckPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Minimized FAB */
.checklist-fab {
  position: fixed;
  bottom: 24px;
  right: 350px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 1900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.checklist-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.checklist-fab-ring {
  position: absolute;
  width: 52px;
  height: 52px;
}

.checklist-fab-count {
  font-size: 13px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* Responsive checklist */
@media (max-width: 768px) {
  .onboarding-checklist {
    width: calc(100% - 32px);
    max-width: 380px;
  }

  .checklist-fab {
    bottom: 16px;
    right: 16px !important;
  }
}

/* ========================================
   WIZARD WELCOME STEP
   ======================================== */

.wizard-welcome {
  text-align: center;
  padding: 20px 0 0;
}

.wizard-welcome-icon {
  font-size: 48px;
  color: var(--color-primary);
  margin-bottom: 16px;
  animation: wizardWelcomeWave 1s ease;
}

@keyframes wizardWelcomeWave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.wizard-welcome-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0;
}

.wizard-feature-card {
  text-align: center;
  padding: 24px 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wizard-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wizard-feature-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--color-primary);
  margin: 0 auto 12px;
}

.wizard-feature-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.wizard-feature-card p {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 640px) {
  .wizard-welcome-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ========================================
   WIZARD COMPLETION CELEBRATION
   ======================================== */

.wizard-celebration {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.wizard-complete-animated {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-checkmark-svg {
  width: 80px;
  height: 80px;
}

.wizard-checkmark-circle {
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: wizardCircleDraw 0.6s ease forwards;
}

.wizard-checkmark-check {
  stroke: #4ade80;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: wizardCheckDraw 0.4s 0.5s ease forwards;
}

@keyframes wizardCircleDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes wizardCheckDraw {
  to { stroke-dashoffset: 0; }
}

.wizard-complete-title {
  animation: wizardTextFadeIn 0.5s 0.7s ease both;
}

.wizard-complete-subtitle {
  animation: wizardTextFadeIn 0.5s 0.9s ease both;
}

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

/* Confetti effect (CSS-only) */
.wizard-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.wizard-confetti::before,
.wizard-confetti::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.wizard-confetti::before {
  background: #4ade80;
  animation: confetti1 1s 0.5s ease-out both;
}

.wizard-confetti::after {
  background: #60a5fa;
  animation: confetti2 1s 0.6s ease-out both;
}

@keyframes confetti1 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-60px, -80px) rotate(360deg); opacity: 0; }
}

@keyframes confetti2 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(50px, -70px) rotate(-360deg); opacity: 0; }
}

/* ========================================
   ENHANCED CONTEXT TIPS
   ======================================== */

.context-tip {
  backdrop-filter: blur(8px);
}

.context-tip-highlight {
  animation: tipHighlightPulse 2s infinite;
}

@keyframes tipHighlightPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4), 0 0 20px rgba(59, 130, 246, 0.2) !important;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.3) !important;
  }
}

/* ========================================
   ADMIN ONBOARDING SETTINGS
   ======================================== */

.onboarding-settings-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding-setting-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  gap: 16px;
}

.setting-info {
  flex: 1;
  min-width: 0;
}

.setting-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-info h4 i {
  color: var(--color-primary);
  font-size: 14px;
}

.setting-info p {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Guidance toggle switch */
.guidance-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.guidance-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.guidance-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-border);
  border-radius: 24px;
  transition: background 0.3s ease;
}

.guidance-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.guidance-toggle-switch input:checked + .guidance-toggle-slider {
  background: var(--color-primary);
}

.guidance-toggle-switch input:checked + .guidance-toggle-slider::before {
  transform: translateX(20px);
}

@media (max-width: 640px) {
  .onboarding-setting-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .onboarding-setting-card .btn {
    width: 100%;
  }
}

/* ============================================
   MOBILE FIELD VIEW
   Dedicated mobile experience for field workers.
   ============================================ */

#mobileFieldView {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #0A0E16);
  color: var(--color-text, #e0e0e0);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  /* Safe area for notch devices.
     Kun toppen (notch) håndteres her. Bunn-insettet (home indicator) eies
     UTELUKKENDE av .mf-bottom-bar — ellers dobbeltelles det i standalone-PWA
     (container reserverer en svart stripe UNDER baren + baren padder selv),
     som ga det store tomrommet i footer. I nettleser er insettet 0 (Chrome
     sin egen verktøylinje dekker sonen), så baren legger seg flush uansett. */
  padding-top: env(safe-area-inset-top, 0);
}

/* Frostet fyll bak statuslinjen: lar app-chromen strekke seg helt opp bak
   klokke/batteri i standalone-PWA, så headeren ikke ser ut til å «flyte»
   under en separat svart stripe. Samme glass-tone som .mf-route-date-header
   (rgba(15,23,42,0.5) over #0A0E16). Høyden følger safe-area-insettet, så på
   telefoner uten støtte blir den 0px (fallback) → usynlig, og OS-statuslinjen
   styres i stedet av <meta name="theme-color"> som er satt til samme tone. */
#mobileFieldView::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  z-index: 6; /* over sticky tab-headere (z-5), under modaler i #modalPortal */
  pointer-events: none;
}

/* ---- Header ---- */

.mf-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-surface, #141820);
  border-bottom: 1px solid var(--color-border, #1e2738);
  flex-shrink: 0;
}

.mf-date-nav {
  background: none;
  border: none;
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 18px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mf-date-nav:active {
  background: rgba(255,255,255,0.08);
}

.mf-date-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text, #e0e0e0);
  min-width: 120px;
  text-align: center;
}

/* ---- Progress bar ---- */

.mf-progress-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--color-surface, #141820);
  border-bottom: 1px solid var(--color-border, #1e2738);
  flex-shrink: 0;
}

.mf-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.mf-progress-fill {
  height: 100%;
  background: #10b981;
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 0;
}

.mf-progress-label {
  font-size: 13px;
  color: var(--color-text-secondary, #a0a0a0);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

/* ---- Tab views ---- */

.mf-tab-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mf-weekplan-inline {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary, #0d1117);
}

.mf-route-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Fyll hele hoyden i tab-visningen: kort ligger overst, avslutnings-linja
     presses ned mot footeren -> ingen stygt svart tomrom paa tynne dager.
     Egen scroll-container holder dato-headeren fast naar ruten er lang. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Empty state ---- */

.mf-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  color: var(--color-text-muted, #666);
}

.mf-empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.mf-empty-state p {
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--color-text-secondary, #a0a0a0);
}

.mf-empty-hint {
  font-size: 13px;
  color: var(--color-text-muted, #666);
}

/* Tom-tilstand og laste-tilstand fyller og sentreres i innholdsomraadet
   (ikke klistret overst over et tomrom). */
.mf-route-content > .mf-empty-state,
.mf-route-content > .mf-loading {
  flex: 1;
}

/* Rolig avslutnings-linje under siste kort på tynne dager (fyller tomrommet bevisst). */
.mf-route-end-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: auto 0 6px;
  color: var(--color-text-muted, #5E7088);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.mf-route-end-hint i {
  font-size: 12px;
  opacity: 0.8;
}

/* ---- Loading ---- */

.mf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 12px;
  color: var(--color-text-muted, #666);
}

.mf-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: mf-spin 0.8s linear infinite;
}

.mf-spinner-small {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mf-spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

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

/* ---- Start route button ---- */

.mf-start-route-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 56px;
}

.mf-start-route-btn:active {
  background: #2563eb;
}

/* ---- Route summary ---- */

.mf-route-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: var(--color-surface, #141820);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-text-secondary, #a0a0a0);
}

.mf-route-summary span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mf-route-done {
  color: #10b981 !important;
  font-weight: 600;
}

/* ---- Next stop card ---- */

.mf-next-stop {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 20px;
}

.mf-next-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3b82f6;
  margin-bottom: 8px;
}

.mf-next-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
}

.mf-next-address {
  font-size: 14px;
  color: var(--color-text-secondary, #a0a0a0);
  margin: 0 0 4px;
}

.mf-next-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #3b82f6;
  text-decoration: none;
  margin-bottom: 12px;
}

.mf-next-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* ---- Buttons ---- */

.mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 56px;
  text-decoration: none;
  flex: 1;
  transition: background 0.15s;
}

.mf-btn-navigate {
  background: #1e40af;
  color: #fff;
}

.mf-btn-navigate:active {
  background: #1d4ed8;
}

.mf-btn-complete {
  background: #059669;
  color: #fff;
}

.mf-btn-complete:active {
  background: #047857;
}

.mf-btn-notify {
  background: #667eea;
  color: #fff;
}

.mf-btn-notify:active {
  background: #5a67d8;
}

.mf-btn-arrive {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, .28);
}

.mf-btn-arrive:active {
  background: #ea580c;
  transform: translateY(1px);
}

.mf-arrived-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 10px 0;
  border-radius: 99px;
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mf-next-stop-arrived {
  border-color: rgba(34, 197, 94, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* === Hansker-modus: større touch-mål, høyere kontrast === */
html[data-glove-mode="true"] .mf-btn,
html[data-glove-mode="true"] .mf-start-route-btn,
html[data-glove-mode="true"] .mf-complete-route-btn,
html[data-glove-mode="true"] .vcm-btn {
  min-height: 60px;
  font-size: 17px;
  padding: 16px 18px;
  font-weight: 700;
}

html[data-glove-mode="true"] .mf-action-btn {
  min-width: 52px;
  min-height: 52px;
  font-size: 18px;
}

html[data-glove-mode="true"] .mf-stop-card {
  padding: 16px 14px;
  gap: 12px;
}

html[data-glove-mode="true"] .mf-est-input,
html[data-glove-mode="true"] .vcm-input,
html[data-glove-mode="true"] .vcm-textarea,
html[data-glove-mode="true"] .vcm-select {
  font-size: 17px;
  padding: 14px 16px;
  min-height: 52px;
}

html[data-glove-mode="true"] .vcm-segment {
  padding: 14px 8px;
  font-size: 15px;
}

html[data-glove-mode="true"] .mf-bottom-tab-item {
  font-size: 13px;
}

html[data-glove-mode="true"] .vcm-foto-tile,
html[data-glove-mode="true"] .vcm-foto-add {
  min-width: 110px;
  min-height: 110px;
}

html[data-glove-mode="true"] .vcm-sjekk-status button {
  padding: 10px 14px;
  font-size: 14px;
  min-height: 44px;
}

html[data-glove-mode="true"] .vcm-section-header {
  padding: 10px 0;
}

html[data-glove-mode="true"] .vcm-section-title {
  font-size: 16px;
}

/* === Konto-meny: toggle-rader === */
.mf-account-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: var(--color-text-primary, #f4f6fb);
  text-align: left;
  cursor: pointer;
  margin-top: 10px;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-account-toggle-row:active {
  background: rgba(255, 255, 255, 0.06);
}

.mf-account-toggle-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.mf-account-toggle-row strong {
  font-size: 14.5px;
  font-weight: 600;
}

.mf-account-toggle-row span {
  font-size: 12.5px;
  color: var(--color-text-secondary, #94a0b8);
}

.mf-toggle-pill {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary, #94a0b8);
}

.mf-toggle-pill.on {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: #fff;
}

/* === Mobile Mer-meny overlay === */
.mf-more-overlay {
  position: fixed;
  inset: 0;
  z-index: 99000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 12, 22, 0.55);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-more-overlay.open {
  opacity: 1;
}

.mf-more-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 12px 20px max(28px, calc(env(safe-area-inset-bottom) + 16px));
  background: var(--color-bg-secondary, #181c2a);
  color: var(--color-text-primary, #f4f6fb);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(24px);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-more-overlay.open .mf-more-sheet {
  transform: translateY(0);
}

.mf-more-handle {
  width: 44px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 auto 12px;
}

.mf-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mf-more-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mf-more-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b7ed8 0%, #6e90e6 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
}

.mf-more-user strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
}

.mf-more-user span {
  display: block;
  font-size: 12.5px;
  color: var(--color-text-secondary, #94a0b8);
}

.mf-more-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background 160ms;
}

.mf-more-close i {
  display: block;
  line-height: 1;
  font-size: 16px;
}

.mf-more-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mf-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mf-more-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: var(--color-text-primary, #f4f6fb);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-more-item:active {
  transform: scale(0.97);
  background: rgba(135, 170, 255, 0.08);
}

.mf-more-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(135, 170, 255, 0.14);
  color: #a8b8e6;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.mf-more-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #e53e3e;
  color: #fff;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.mf-more-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 16px 0;
}

.mf-more-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 160ms;
}

.mf-more-toggle-row:active {
  background: rgba(255, 255, 255, 0.06);
}

.mf-more-toggle-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mf-more-toggle-row strong {
  font-size: 14px;
  font-weight: 600;
}

.mf-more-toggle-row span {
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

.mf-more-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: rgba(229, 62, 62, 0.08);
  border: 1px solid rgba(229, 62, 62, 0.18);
  border-radius: 12px;
  color: #fc8181;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  transition: background 160ms;
}

.mf-more-logout:active {
  background: rgba(229, 62, 62, 0.16);
}

/* Hansker-modus overrides for Mer-meny */
html[data-glove-mode="true"] .mf-more-item {
  padding: 22px 10px;
  font-size: 14px;
  min-height: 100px;
}
html[data-glove-mode="true"] .mf-more-icon {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

/* ============================================ */
/* PERSISTENT RUTE-STATUS-STRIPE (toppen av Rute/Kart/Kalender) */
/* ============================================ */

.mf-route-stripe {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(135, 170, 255, 0.16);
  cursor: pointer;
  z-index: 10;
  transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: mf-stripe-in 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-route-stripe:active {
  background: rgba(91, 126, 216, 0.18);
}

@keyframes mf-stripe-in {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

.mf-stripe-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.mf-stripe-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #5b7ed8 0%, #6e90e6 50%, #81c784 100%);
  width: 0%;
  transition: width 480ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(110, 144, 230, 0.55);
}

.mf-stripe-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, #f4f6fb);
  letter-spacing: 0.01em;
}

.mf-stripe-count { font-weight: 700; }
.mf-stripe-sep { opacity: 0.4; }
.mf-stripe-distance { color: var(--color-text-secondary, #94a0b8); font-weight: 500; }

.mf-stripe-pace { font-weight: 700; margin-left: auto; }
.mf-stripe-pace.mf-pace-on { color: #81c784; }
.mf-stripe-pace.mf-pace-ahead { color: #4ade80; }
.mf-stripe-pace.mf-pace-behind { color: #fbbf24; }

.mf-stripe-chev {
  opacity: 0.4;
  font-size: 11px;
  margin-left: 4px;
}

/* ============================================ */
/* SMART FULLFØR-KNAPP (3 varianter) */
/* ============================================ */

.mf-complete-route-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px 20px;
  margin: 20px 0 12px;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.mf-complete-route-btn:active {
  transform: translateY(1px);
  filter: brightness(1.08);
}

.mf-complete-route-btn.mf-complete-full {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mf-complete-route-btn.mf-complete-near {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.mf-complete-route-btn.mf-complete-abort {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.4) 0%, rgba(71, 85, 105, 0.5) 100%);
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: #cbd5e1;
}

.mf-complete-meta {
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.78;
  margin-left: 4px;
}

/* ============================================ */
/* ABORT-MODAL (avbryt rute med begrunnelse) */
/* ============================================ */

.mf-abort-overlay {
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 12, 22, 0.6);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-abort-overlay.open { opacity: 1; }

.mf-abort-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 12px 22px max(26px, calc(env(safe-area-inset-bottom) + 14px));
  background: var(--color-bg-secondary, #181c2a);
  color: var(--color-text-primary, #f4f6fb);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(40px);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-abort-overlay.open .mf-abort-sheet {
  transform: translateY(0);
}

.mf-abort-handle {
  width: 44px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 auto 16px;
}

.mf-abort-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.mf-abort-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary, #94a0b8);
  margin: 0 0 18px;
  line-height: 1.45;
}

.mf-abort-reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.mf-abort-reason {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-abort-reason i {
  font-size: 18px;
  color: var(--color-text-secondary, #94a0b8);
}

.mf-abort-reason[aria-checked="true"] {
  background: rgba(91, 126, 216, 0.14);
  border-color: rgba(135, 170, 255, 0.55);
}

.mf-abort-reason[aria-checked="true"] i {
  color: #a8b8e6;
}

.mf-abort-kommentar {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--color-text-primary);
  font-size: 14.5px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  margin-bottom: 16px;
  transition: border-color 160ms;
}

.mf-abort-kommentar:focus {
  outline: none;
  border-color: rgba(135, 170, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.mf-abort-actions {
  display: flex;
  gap: 10px;
}

.mf-abort-cancel,
.mf-abort-confirm {
  flex: 1;
  padding: 15px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-abort-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
}

.mf-abort-confirm {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.32);
}

.mf-abort-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
  box-shadow: none;
}

.mf-abort-confirm:not(:disabled):active {
  transform: translateY(1px);
  filter: brightness(1.1);
}

/* ============================================ */
/* PREMIUM FULLFØRT-SAMMENDRAG (cinematic) */
/* ============================================ */

.mf-summary-overlay {
  position: fixed;
  inset: 0;
  z-index: 100030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 22, 0.78);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-summary-overlay.open { opacity: 1; }

.mf-summary-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--color-bg-secondary, #181c2a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(135, 170, 255, 0.1);
  transform: scale(0.92) translateY(20px);
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-summary-overlay.open .mf-summary-sheet {
  transform: scale(1) translateY(0);
}

.mf-summary-hero {
  padding: 36px 24px 28px;
  background: radial-gradient(circle at top, rgba(34, 197, 94, 0.22) 0%, transparent 70%),
              linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mf-summary-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(34, 197, 94, 0.08) 0%, transparent 50%);
  pointer-events: none;
  animation: mf-summary-glow 4s ease-in-out infinite;
}

@keyframes mf-summary-glow {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(15deg); }
}

.mf-summary-hero-aborted {
  background: radial-gradient(circle at top, rgba(251, 191, 36, 0.18) 0%, transparent 70%),
              linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.mf-summary-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 30px;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  z-index: 1;
}

.mf-summary-hero-aborted .mf-summary-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 10px 30px rgba(251, 191, 36, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mf-summary-title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.mf-summary-date {
  font-size: 13.5px;
  color: var(--color-text-secondary, #94a0b8);
  margin: 0;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
}

.mf-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 22px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mf-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.mf-summary-stat-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #f4f6fb);
}

.mf-summary-stat-value small {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a0b8);
  margin-left: 2px;
}

.mf-summary-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary, #94a0b8);
}

.mf-summary-delta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14.5px;
  font-weight: 600;
}

.mf-summary-delta i {
  font-size: 18px;
  flex: 0 0 auto;
}

.mf-summary-delta small {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-secondary, #94a0b8);
}

.mf-summary-delta-good { color: #4ade80; }
.mf-summary-delta-good i { color: #4ade80; }
.mf-summary-delta-ok { color: var(--color-text-primary); }
.mf-summary-delta-slow { color: #fbbf24; }
.mf-summary-delta-slow i { color: #fbbf24; }

.mf-summary-reason {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: rgba(251, 191, 36, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mf-summary-reason > i {
  font-size: 18px;
  color: #fbbf24;
}

.mf-summary-reason > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mf-summary-reason strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.mf-summary-reason span {
  font-size: 12.5px;
  color: var(--color-text-secondary, #94a0b8);
}

.mf-summary-close {
  display: block;
  width: 100%;
  padding: 18px;
  background: transparent;
  border: none;
  color: #a8b8e6;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms;
}

.mf-summary-close:hover {
  background: rgba(135, 170, 255, 0.06);
}

/* ============================================ */
/* "MINE RUTER"-HISTORIKK */
/* ============================================ */

.mf-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 99500;
  background: var(--color-bg-primary, #0f172a);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-history-overlay.open {
  opacity: 1;
  transform: translateY(0);
}

.mf-history-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mf-history-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  background: var(--color-bg-secondary, #181c2a);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mf-history-header h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.mf-history-filters {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  overflow-x: auto;
  background: var(--color-bg-secondary, #181c2a);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mf-history-filter {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 99px;
  color: var(--color-text-secondary, #94a0b8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-history-filter.active {
  background: linear-gradient(135deg, #5b7ed8 0%, #6e90e6 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(91, 126, 216, 0.32);
}

.mf-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
}

.mf-history-loading {
  display: flex;
  justify-content: center;
  padding: 40px;
}

.mf-history-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-secondary, #94a0b8);
  font-size: 14px;
}

.mf-history-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: background 160ms;
}

.mf-history-card:active {
  background: rgba(255, 255, 255, 0.06);
}

.mf-history-card-date {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary, #94a0b8);
  width: 64px;
}

.mf-history-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mf-history-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-history-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary, #94a0b8);
}

.mf-history-card-meta i {
  margin-right: 3px;
  opacity: 0.7;
}

.mf-history-status {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mf-history-status-fullfort {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
}

.mf-history-status-pagar {
  background: rgba(91, 126, 216, 0.18);
  color: #a8b8e6;
}

.mf-history-status-avbrutt {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
}

.mf-history-status-planlagt {
  background: rgba(148, 163, 184, 0.16);
  color: #94a0b8;
}

/* Hansker-modus for nye komponenter */
html[data-glove-mode="true"] .mf-abort-reason {
  padding: 22px 10px;
  min-height: 90px;
  font-size: 14px;
}

html[data-glove-mode="true"] .mf-history-card {
  padding: 18px 16px;
}

html[data-glove-mode="true"] .mf-complete-route-btn {
  padding: 22px 20px;
  font-size: 17px;
}

html[data-glove-mode="true"] .mf-stripe-content {
  font-size: 14.5px;
  padding: 13px 16px;
}

/* ============================================ */
/* RUTE-TAB DATO-HEADER (forrige/i dag/neste dag) */
/* ============================================ */

.mf-route-date-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 5;
}

.mf-route-date-nav {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary, #f4f6fb);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-route-date-nav:active {
  background: rgba(135, 170, 255, 0.16);
}

.mf-route-date-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary, #f4f6fb);
  text-transform: capitalize;
  min-width: 180px;
  text-align: center;
}

.mf-progress-wrap {
  padding: 0 16px;
}

.mf-route-content {
  padding: 14px 16px 24px; /* komfort-margin ved scroll; footer er flex-sosken, ikke overlappende */
}

html[data-glove-mode="true"] .mf-route-date-nav {
  width: 48px;
  height: 48px;
}

html[data-glove-mode="true"] .mf-route-date-label {
  font-size: 17px;
}

/* ============================================ */
/* "NAVIGER HELE RUTEN" CTA (stor primær knapp for stemmestyring) */
/* ============================================ */

.mf-nav-all-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 18px;
  margin: 14px 0 16px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  border: none;
  border-radius: 18px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(37, 99, 235, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.mf-nav-all-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: mf-nav-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mf-nav-shine {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

.mf-nav-all-btn:active {
  transform: translateY(2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
}

.mf-nav-all-btn > i:first-child {
  font-size: 22px;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mf-nav-all-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mf-nav-all-text strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mf-nav-all-text span {
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.85;
}

.mf-nav-all-chev {
  font-size: 14px;
  opacity: 0.6;
  flex: 0 0 auto;
}

html[data-glove-mode="true"] .mf-nav-all-btn {
  padding: 22px 20px;
}
html[data-glove-mode="true"] .mf-nav-all-text strong {
  font-size: 18px;
}

/* ============================================ */
/* IN-APP NAVIGASJON: rute-info-kort på Kart-tab */
/* ============================================ */

.mf-route-info-card {
  position: fixed;
  bottom: 76px; /* over bottom-bar (~60px) + margin */
  left: 12px;
  right: 12px;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 197, 94, 0.16);
  color: var(--color-text-primary, #f4f6fb);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 560px;
  margin: 0 auto;
}

.mf-route-info-card.open {
  opacity: 1;
  transform: translateY(0);
}

.mf-route-info-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a0b8);
}

.mf-route-info-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mf-route-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--color-text-primary);
}

.mf-route-info-title i {
  color: #4ade80;
  font-size: 14px;
}

.mf-route-info-title strong {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-route-info-stats {
  display: flex;
  gap: 12px;
  font-size: 12.5px;
  color: var(--color-text-secondary, #94a0b8);
  font-weight: 600;
}

.mf-route-info-stats i {
  margin-right: 4px;
  opacity: 0.7;
}

.mf-route-info-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.mf-route-info-voice {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.32);
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mf-route-info-voice:active {
  transform: translateY(1px);
  filter: brightness(1.08);
}

.mf-route-info-voice i {
  font-size: 13px;
}

.mf-route-info-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms;
}

.mf-route-info-close:active {
  background: rgba(255, 255, 255, 0.16);
}

html[data-glove-mode="true"] .mf-route-info-voice {
  padding: 14px 18px;
  font-size: 15px;
}

html[data-glove-mode="true"] .mf-route-info-close {
  width: 48px;
  height: 48px;
}

/* Skjul info-card når Kart-tab ikke er aktiv */
#mfMapView[style*="display: none"] ~ .mf-route-info-card,
#mfMapView[style*="display:none"] ~ .mf-route-info-card {
  display: none;
}

.mf-btn-notify.mf-notified,
.mf-action-notify.mf-notified {
  background: #059669;
  opacity: 0.7;
  pointer-events: none;
}

.mf-action-notify {
  color: #667eea;
}

.mf-btn-call {
  background: #4338ca;
  color: #fff;
}

.mf-btn-call:active {
  background: #3730a3;
}

.mf-btn-logout {
  width: 100%;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  margin-top: 12px;
}

.mf-btn-logout:active {
  background: rgba(239, 68, 68, 0.25);
}

/* ---- Stop cards ---- */

.mf-avtaler-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 8px;
  font-size: 13px;
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mf-avtaler-header i {
  color: #3b82f6;
}

.mf-stop-desc {
  font-size: 12px;
  color: var(--color-text-muted, #888);
  margin: 4px 0 0;
}

.mf-stop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 12px;
  transition: opacity 0.2s;
}

.mf-stop-visited {
  opacity: 0.5;
}

.mf-stop-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mf-stop-visited .mf-stop-num {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.mf-stop-time {
  width: auto;
  min-width: 56px;
  border-radius: 14px;
  padding: 0 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Redigerbar klokkeslett-badge: trykk for å åpne OS-tidsvelgeren. */
.mf-stop-num[data-action] {
  position: relative;
  cursor: pointer;
  flex-direction: column;
  gap: 0;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease;
}
.mf-stop-num[data-action]:active { transform: scale(0.94); }
.mf-stop-num .mf-stop-num-val { line-height: 1; }
/* Liten klokke-affordans nederst i hjørnet — signaliserer at tiden kan endres. */
.mf-stop-num .mf-stop-num-edit {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  display: grid;
  place-items: center;
  font-size: 7.5px;
  color: #93a3bd;
}
/* Stopp uten satt tid: stiplet ring inviterer til å sette klokkeslett. */
.mf-stop-num-untimed {
  background: rgba(59, 130, 246, 0.08);
  border: 1.5px dashed rgba(96, 165, 250, 0.45);
}

/* «Kontroll»-merke ved kundenavnet. */
/* Tittel-rad: navn (klampet til 2 linjer) + Kontroll-merke som SØSKEN, slik at
   merket aldri klippes vekk av -webkit-line-clamp på lange kundenavn. */
.mf-stop-title {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
.mf-stop-title > h4 {
  flex: 1 1 auto;
  min-width: 0;
}
.mf-stop-title > .mf-stop-tag {
  flex-shrink: 0;
  margin-top: 1px;
}
.mf-stop-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.mf-stop-tag-kontroll {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(59, 130, 246, 0.16));
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.38);
}
.mf-stop-tag-kontroll i { font-size: 9px; }

/* «Kontroll i dag»-rad i kunde-info-overlay. */
.mf-info-row.mf-info-kontroll-today {
  color: #93c5fd;
  font-weight: 600;
}
.mf-info-row.mf-info-kontroll-today i { color: #60a5fa; }

.mf-stop-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.mf-stop-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text, #e0e0e0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-stop-info p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-stop-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mf-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.mf-action-btn:active {
  background: rgba(255,255,255,0.12);
}

.mf-action-complete {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.mf-action-complete:active {
  background: rgba(16, 185, 129, 0.25);
}

.mf-action-navigate {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.mf-action-navigate:active {
  background: rgba(59, 130, 246, 0.28);
}

.mf-visited-icon {
  color: #10b981;
  font-size: 20px;
}

/* In-progress visit foto i kunde-info-overlay (mobile) */
.mf-info-foto-section {
  padding: 16px 0 4px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mf-info-foto-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, #f4f6fb);
}
.mf-info-foto-header i { color: #ffb74d; }
.mf-info-foto-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.mf-info-foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.mf-info-foto-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.mf-info-foto-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mf-info-foto-uploading::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.mf-info-foto-uploading::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mf-foto-spin 700ms linear infinite;
  z-index: 1;
}
@keyframes mf-foto-spin { to { transform: rotate(360deg); } }
.mf-info-foto-failed { border-color: #e57373; }
.mf-info-foto-failed::before {
  content: '\f071';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #e57373;
  font-size: 18px;
}
/* Premium fjern-knapp (X) — diskret glass-pille som lar selve bildet stå rent.
   Notat redigeres i fullskjerm (lightbox), ikke som overlay her. */
.mf-info-foto-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  /* Nullstill den globale `.btn, button`-regelen (min-height:48px; padding:12px 20px)
     som ellers blåser denne ikon-knappen opp til en 42x48 ellipse oppå bildet. */
  min-width: 0; min-height: 0; padding: 0;
  box-sizing: border-box; line-height: 1;
  border-radius: 50%;
  background: rgba(16, 18, 24, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              background 160ms ease, border-color 160ms ease, opacity 180ms ease;
  z-index: 3;
}
.mf-info-foto-remove:active {
  background: rgba(229, 115, 115, 0.95);
  border-color: rgba(229, 115, 115, 0.6);
  transform: scale(0.9);
}
/* På peker-enheter (desktop): avsløres mykt ved hover slik at bildet er helt rent ellers.
   På touch finnes ingen hover — der er knappen alltid synlig (men diskret). */
@media (hover: hover) and (pointer: fine) {
  .mf-info-foto-remove { opacity: 0; transform: scale(0.85); }
  .mf-info-foto-tile:hover .mf-info-foto-remove,
  .mf-info-foto-tile:focus-within .mf-info-foto-remove { opacity: 1; transform: scale(1); }
}

/* Felt-notater seksjon i kunde-info-overlay */
.mf-info-feltnotat-section {
  padding: 16px 0 4px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mf-info-feltnotat-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
}
.mf-info-feltnotat-header i { color: #60a5fa; }
.mf-info-feltnotat-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px;
  max-height: 240px;
  overflow-y: auto;
}
.mf-info-feltnotat-loading, .mf-info-feltnotat-empty {
  text-align: center;
  padding: 14px 8px;
  color: var(--color-text-secondary, #9ca3af);
  font-size: 12.5px;
}
.mf-feltnotat-item {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 9px 11px;
}
.mf-feltnotat-meta {
  display: flex; align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--color-text-secondary, #9ca3af);
  margin-bottom: 4px;
}
.mf-feltnotat-by { font-weight: 600; color: var(--color-text-primary, #f4f6fb); }
.mf-feltnotat-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 10px;
}
.mf-feltnotat-delete:active { color: #e57373; background: rgba(229, 115, 115, 0.12); }
.mf-feltnotat-text {
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  color: var(--color-text-primary, #f4f6fb);
}
.mf-info-feltnotat-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.mf-info-feltnotat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--color-text-primary, #fff);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 44px;
}
.mf-info-feltnotat-input:focus {
  outline: none;
  border-color: #60a5fa;
}
.mf-info-feltnotat-save {
  background: #60a5fa;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 160ms;
}
.mf-info-feltnotat-save:hover { background: #3b82f6; }
.mf-info-feltnotat-save:active { transform: translateY(1px); }
.mf-info-foto-add {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms, border-color 160ms;
}
.mf-info-foto-add:active {
  background: rgba(255, 152, 0, 0.12);
  color: #ffb74d;
  border-color: rgba(255, 152, 0, 0.4);
}
.mf-hidden-input { display: none; }

/* Kamera-knapp i rute-stoppene + counter-badge */
.mf-action-camera {
  position: relative;
}
.mf-action-camera .mf-action-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ffb74d;
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* Reopen-knapp på mobile-field fullført-stopp */
.mf-action-reopen {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.mf-action-reopen:active {
  background: rgba(255, 152, 0, 0.18);
  color: #ffb74d;
  border-color: rgba(255, 152, 0, 0.32);
}

/* Reopen-knapp på mobile-admin team-stop */
.mf-team-stop-reopen {
  margin-left: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10px;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms;
}
.mf-team-stop-reopen:hover,
.mf-team-stop-reopen:active {
  background: rgba(255, 152, 0, 0.16);
  color: #ffb74d;
  border-color: rgba(255, 152, 0, 0.28);
}

/* ---- Visited section (collapsed) ---- */

.mf-visited-section {
  margin-top: 4px;
}

.mf-visited-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 10px;
  color: #10b981;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.mf-chevron {
  margin-left: auto;
  transition: transform 0.2s;
}

.mf-visited-section.expanded .mf-chevron {
  transform: rotate(180deg);
}

.mf-visited-list {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.mf-visited-section.expanded .mf-visited-list {
  display: flex;
}

/* ---- Complete route button ---- */

.mf-complete-route-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: #059669;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 56px;
  margin-top: 8px;
}

.mf-complete-route-btn:active {
  background: #047857;
}

/* ---- Bottom navigation bar ---- */

.mf-bottom-bar {
  display: flex;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mf-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 0;
  background: none;
  border: none;
  color: var(--color-text-muted, #666);
  font-size: 10px;
  cursor: pointer;
  min-height: 52px;
  transition: color 0.15s;
}

.mf-tab-btn i {
  font-size: 20px;
}

.mf-tab-btn.active {
  color: #3b82f6;
}

/* ---- Customer info overlay ---- */

.mf-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 950;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mf-info-card {
  width: 100%;
  max-width: 500px;
  background: var(--color-surface, #141820);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px max(20px, calc(env(safe-area-inset-bottom) + 8px));
  max-height: 85vh;
  overflow-y: auto;
  animation: mf-slide-up 0.3s ease-out;
}

.mf-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.mf-info-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

.mf-info-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.18);
  color: #94a0b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mf-info-badge-done {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

.mf-info-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #666);
  font-size: 18px;
  padding: 8px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mf-info-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}

.mf-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
}

.mf-info-row i {
  width: 20px;
  text-align: center;
  color: var(--color-text-muted, #666);
  margin-top: 2px;
  flex-shrink: 0;
}

.mf-info-row a {
  color: #3b82f6;
  text-decoration: none;
}

.mf-info-note span {
  color: var(--color-text-secondary, #a0a0a0);
  font-style: italic;
}

.mf-info-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* Mobil: liste over flere kunder på samme sted (fra sammenfall-merke/klynge på kartet) */
.mf-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.mf-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: var(--color-text-primary, #f4f6fb);
  text-align: left;
  cursor: pointer;
  min-height: 56px;
}
.mf-picker-row:active { background: rgba(255, 255, 255, 0.08); }
.mf-picker-row .popup-status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.mf-picker-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mf-picker-text strong {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mf-picker-text span {
  font-size: 12.5px;
  color: var(--color-text-secondary, #94a0b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mf-picker-row .fa-chevron-right {
  color: var(--color-text-muted, #5E7088);
  font-size: 13px;
  flex: 0 0 auto;
}

/* Auto-oppdaterings-stripe (vises når ny service-worker-versjon er klar) */
.sw-update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 220%);
  z-index: 100100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px 11px 16px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(135, 170, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--color-text-primary, #f4f6fb);
  font-size: 14px;
  font-weight: 600;
  max-width: calc(100vw - 24px);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sw-update-banner.show { transform: translate(-50%, 0); }
.sw-update-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-update-text i { color: #87aaff; }
.sw-update-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #5b7ed8 0%, #6e90e6 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(91, 126, 216, 0.32);
}
.sw-update-btn:active { transform: translateY(1px); filter: brightness(1.08); }
.sw-update-btn:disabled { opacity: 0.7; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .sw-update-banner { transition: none; }
}

/* ---- Visit form (bottom sheet) ---- */

.mf-visit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 960;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.3s;
}

.mf-visit-overlay.open {
  background: rgba(0,0,0,0.6);
}

.mf-visit-sheet {
  width: 100%;
  max-width: 500px;
  background: var(--color-surface, #141820);
  border-radius: 20px 20px 0 0;
  padding: 0 20px 20px;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mf-visit-overlay.open .mf-visit-sheet {
  transform: translateY(0);
}

.mf-visit-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 12px auto 16px;
}

.mf-visit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mf-visit-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.mf-visit-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-text-muted, #666);
}

.mf-visit-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #666);
  font-size: 18px;
  padding: 8px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mf-visit-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.mf-visit-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #a0a0a0);
  margin-bottom: 6px;
}

.mf-visit-field textarea {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 10px;
  color: var(--color-text, #e0e0e0);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.mf-visit-field textarea:focus {
  outline: none;
  border-color: #3b82f6;
}

.mf-visit-field textarea::placeholder {
  color: var(--color-text-muted, #555);
}

.mf-visit-nav-btn {
  min-height: 48px;
  font-size: 14px;
}

.mf-visit-footer {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mf-visit-submit {
  width: 100%;
  min-height: 56px;
  font-size: 16px;
}

/* ---- Map container ---- */

#mfMapView {
  position: relative;
}

.mf-map-container {
  flex: 1;
  width: 100%;
  position: relative;
}

/* ---- Map-fane: kunde-søk (alle roller) ---- */

.mf-map-search-wrap {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 46px;
  border-radius: 14px;
  background: rgba(20, 24, 32, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mf-map-search-wrap:focus-within {
  border-color: rgba(94, 129, 172, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.34);
}

.mf-map-search-icon {
  color: var(--color-text-muted, #8b95a7);
  font-size: 14px;
  flex-shrink: 0;
}

.mf-map-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--color-text, #e8edf3);
  font-size: 15px;
  font-weight: 500;
  padding: 0;
  min-width: 0;
}

.mf-map-search-input::placeholder {
  color: var(--color-text-muted, #8b95a7);
  font-weight: 400;
}

.mf-map-search-clear {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted, #aab3c2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mf-map-search-clear i {
  display: block;
  line-height: 1;
  font-size: 12px;
}

.mf-map-search-clear:active {
  background: rgba(255, 255, 255, 0.12);
}

.mf-map-search-results {
  position: absolute;
  top: 66px;
  left: 12px;
  right: 12px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 19;
  border-radius: 14px;
  background: rgba(20, 24, 32, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  padding: 6px;
  animation: mf-map-search-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes mf-map-search-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mf-map-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--color-text, #e8edf3);
  transition: background 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mf-map-search-item:active {
  background: rgba(94, 129, 172, 0.18);
}

.mf-map-search-item + .mf-map-search-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.mf-map-search-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(94, 129, 172, 0.35), rgba(94, 129, 172, 0.18));
  border: 1px solid rgba(94, 129, 172, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #d6e2f2;
  flex-shrink: 0;
}

.mf-map-search-text {
  flex: 1;
  min-width: 0;
}

.mf-map-search-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-map-search-meta {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--color-text-muted, #8b95a7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-map-search-chevron {
  color: var(--color-text-muted, #6b7385);
  font-size: 12px;
  flex-shrink: 0;
}

.mf-map-search-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--color-text-muted, #8b95a7);
  font-size: 14px;
}

.mf-map-search-empty i {
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .mf-map-search-results { animation: none; }
  .mf-map-search-wrap,
  .mf-map-search-item,
  .mf-map-search-clear { transition: none; }
}

.mf-map-marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.mf-map-marker span {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.mf-map-marker.visited {
  background: #10b981;
  opacity: 0.6;
}

/* ---- Account tab ---- */

.mf-account-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mf-account-card {
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 14px;
  padding: 16px;
}

.mf-account-card h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #666);
}

.mf-account-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mf-account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.mf-account-user h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.mf-account-user p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-text-muted, #666);
}

.mf-account-org {
  color: var(--color-text-secondary, #a0a0a0) !important;
  font-size: 12px !important;
}

.mf-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}

.mf-account-row + .mf-account-row {
  border-top: 1px solid var(--color-border, #1e2738);
}

.mf-status-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.mf-status-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mf-status-dot.online::before {
  background: #10b981;
}

.mf-status-dot.offline::before {
  background: #ef4444;
}

.mf-sync-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.mf-sync-badge.synced {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.mf-sync-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

/* ---- Banner notifications ---- */

.mf-banner {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  flex-shrink: 0;
  animation: mf-slide-down 0.3s ease-out;
}

.mf-banner-success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.mf-banner-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.mf-banner-error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.mf-banner-info {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

/* ---- Animations ---- */

@keyframes mf-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes mf-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================================
   MOBILE ADMIN — Admin/planner tab styles
   ============================================ */

/* ---- 5-tab bottom bar layout ---- */

.mf-bottom-bar.admin-mode .mf-tab-btn {
  font-size: 9px;
  gap: 2px;
  padding: 8px 0;
}

.mf-bottom-bar.admin-mode .mf-tab-btn i {
  font-size: 18px;
}

/* ---- Daily summary card ---- */

.mf-summary-card {
  display: flex;
  justify-content: space-around;
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 14px;
  padding: 16px 8px;
  margin-bottom: 12px;
}

.mf-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mf-summary-num {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.mf-summary-stat span:last-child {
  font-size: 11px;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Team date navigation (reusing mf-header) ---- */

.mf-team-date-nav {
  margin-bottom: 12px;
}

/* ---- Team action buttons ---- */

.mf-team-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.mf-team-actions .mf-btn {
  flex: 1;
}

.mf-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.mf-btn-secondary:active {
  background: rgba(59, 130, 246, 0.2);
}

/* ---- Technician route cards ---- */

.mf-team-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.mf-team-card:active {
  background: rgba(255, 255, 255, 0.04);
}

.mf-team-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.mf-team-info {
  flex: 1;
  min-width: 0;
}

.mf-team-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-team-info p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-team-progress {
  flex-shrink: 0;
}

/* ---- Progress badge (pill) ---- */

.mf-progress-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mf-status-idle {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

.mf-status-active {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.mf-status-done {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.mf-team-section-label {
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px 4px;
}
.mf-team-idle {
  opacity: 0.6;
}
.mf-avatar-idle {
  background: rgba(156, 163, 175, 0.2) !important;
  color: #9ca3af !important;
}

/* ---- Expanded stops list ---- */

.mf-team-stops {
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 10px;
  padding: 6px 0;
  margin-bottom: 8px;
  margin-top: -4px;
}

.mf-team-stop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 14px;
}

.mf-team-stop + .mf-team-stop {
  border-top: 1px solid var(--color-border, #1e2738);
}

.mf-team-stop.visited {
  opacity: 0.5;
}

.mf-team-stop-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.mf-team-stop-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-team-stop-done {
  color: #10b981;
  font-size: 14px;
  flex-shrink: 0;
}

/* ---- Team week grid (mobile) ---- */

.mf-team-week-grid {
  padding: 0 12px 8px;
}

.mf-team-day {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.15s;
}

.mf-team-day:active {
  background: rgba(255, 255, 255, 0.08);
}

.mf-team-day.mf-today {
  border-left: 3px solid var(--color-accent, #5E81AC);
  background: rgba(94, 129, 172, 0.08);
}

.mf-team-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mf-team-day-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #fff);
}

.mf-team-day-count {
  font-size: 13px;
  color: var(--color-text-secondary, #a0a0a0);
}

.mf-team-week-grid .mf-team-stops {
  padding: 4px 0 8px 16px;
}

.mf-team-stop.mf-stop-done .mf-team-stop-name {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ---- Bottom sheet (reusable for push-route, quick-assign) ---- */

.mf-bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mf-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s;
}

.mf-bottom-sheet.open .mf-sheet-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.mf-sheet-content {
  position: relative;
  width: 100%;
  max-width: 500px;
  background: var(--color-surface, #141820);
  border-radius: 20px 20px 0 0;
  padding: 0 20px 20px;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.mf-bottom-sheet.open .mf-sheet-content {
  transform: translateY(0);
}

.mf-sheet-content h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

.mf-sheet-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
}

.mf-sheet-select {
  width: 100%;
  padding: 12px;
  background: var(--color-bg, #0c0f16);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.mf-sheet-date {
  flex: 1;
  padding: 8px 10px;
  background: var(--color-bg, #0c0f16);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  min-width: 0;
}

.mf-push-date-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mf-btn-chip {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted, #666);
  border: 1px solid var(--color-border, #1e2738);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.mf-btn-chip.active,
.mf-push-date-chip.active {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.3);
}

.mf-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 50px;
  margin-top: 18px;
}

.mf-btn-primary:active {
  background: #2563eb;
}

.mf-sheet-submit {
  margin-top: 20px;
}

/* ---- Search input ---- */

.mf-search-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-bg, #0c0f16);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.mf-search-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
}

.mf-search-input::placeholder {
  color: var(--color-text-muted, #555);
}

/* ---- Quick-assign results & form ---- */

.mf-assign-results {
  max-height: 250px;
  overflow-y: auto;
  margin-top: 8px;
}

.mf-assign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border, #1e2738);
  cursor: pointer;
  transition: background 0.1s;
}

.mf-assign-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.mf-assign-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mf-assign-row-info strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-assign-row-info span {
  font-size: 12px;
  color: var(--color-text-muted, #666);
}

.mf-assign-row i {
  color: var(--color-text-muted, #555);
  font-size: 12px;
  flex-shrink: 0;
}

.mf-assign-empty {
  text-align: center;
  color: var(--color-text-muted, #666);
  font-size: 13px;
  padding: 16px;
}

.mf-assign-form {
  margin-top: 10px;
}

.mf-assign-selected-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
}

.mf-assign-selected-card strong {
  font-size: 14px;
}

/* ---- Kunder tab ---- */

.mf-kunder-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.mf-kunder-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
  position: sticky;
  top: 0;
  background: var(--color-bg, #0c0f16);
  z-index: 1;
}

.mf-kunder-search-bar i {
  color: var(--color-text-muted, #555);
  font-size: 14px;
  flex-shrink: 0;
}

.mf-kunder-search-bar .mf-search-input {
  flex: 1;
}

.mf-kunder-results {
  flex: 1;
  overflow-y: auto;
}

.mf-kunder-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border, #1e2738);
  cursor: pointer;
  transition: background 0.1s;
}

.mf-kunder-card:active {
  background: rgba(255, 255, 255, 0.04);
}

.mf-kunder-card-info {
  flex: 1;
  min-width: 0;
}

.mf-kunder-card-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-kunder-card-info p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-kunder-chevron {
  color: var(--color-text-muted, #555);
  font-size: 12px;
  flex-shrink: 0;
}

/* ---- Customer history overlay ---- */

.mf-history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 950;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mf-history-card {
  width: 100%;
  max-width: 500px;
  background: var(--color-surface, #141820);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  max-height: 85vh;
  overflow-y: auto;
  animation: mf-slide-up 0.3s ease-out;
}

.mf-history-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mf-history-section {
  margin-bottom: 16px;
}

.mf-history-section h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #666);
}

.mf-history-empty {
  font-size: 13px;
  color: var(--color-text-muted, #555);
  font-style: italic;
}

/* ---- History entries ---- */

.mf-history-entry {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border, #1e2738);
}

.mf-history-entry:last-child {
  border-bottom: none;
}

.mf-history-entry-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted, #666);
  font-size: 13px;
}

.mf-history-entry-content {
  flex: 1;
  min-width: 0;
}

.mf-history-entry-date {
  font-size: 11px;
  color: var(--color-text-muted, #666);
  margin-bottom: 2px;
}

.mf-history-entry-text {
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.mf-history-entry-by {
  font-size: 11px;
  color: var(--color-text-muted, #555);
  margin-top: 3px;
}

/* ============================================
   MOBILE WEEKPLAN EDITOR
   ============================================ */

/* ---- Full-screen overlay ---- */

.mf-weekplan-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--color-bg-primary, #0d1117);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mf-weekplan-overlay.open {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Header ---- */

.mf-weekplan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-bg-secondary, #161b22);
  border-bottom: 1px solid var(--color-border, #1e2738);
  flex-shrink: 0;
  gap: 12px;
  -webkit-safe-area-inset-top: env(safe-area-inset-top);
  padding-top: max(12px, env(safe-area-inset-top));
}

.mf-weekplan-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary, #e6edf3);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.mf-weekplan-close:active {
  background: rgba(255, 255, 255, 0.15);
}

.mf-weekplan-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.mf-weekplan-title-group h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary, #e6edf3);
  white-space: nowrap;
}

.mf-weekplan-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #8b949e);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mf-weekplan-nav:active {
  background: rgba(255, 255, 255, 0.08);
}

.mf-weekplan-save {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--color-accent, #5e81ac);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.mf-weekplan-save:active {
  opacity: 0.8;
}

.mf-weekplan-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Day dots / indicators ---- */

.mf-weekplan-day-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px 6px;
  background: var(--color-bg-primary, #0d1117);
  flex-shrink: 0;
}

.mf-wp-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #484f58);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  position: relative;
  min-width: 48px;
}

.mf-wp-dot.active {
  background: rgba(94, 129, 172, 0.15);
  color: var(--color-accent, #5e81ac);
}

.mf-wp-dot-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mf-wp-dot-date {
  font-size: 15px;
  font-weight: 700;
}

.mf-wp-dot-count {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent, #5e81ac);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Days horizontal scroll container ---- */

.mf-weekplan-days {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 8px 8px 16px;
  scrollbar-width: none;
}

.mf-weekplan-days::-webkit-scrollbar {
  display: none;
}

/* ---- Day column ---- */

.mf-weekplan-day {
  min-width: 85vw;
  max-width: 85vw;
  scroll-snap-align: start;
  background: var(--color-bg-secondary, #161b22);
  border-radius: 14px;
  border: 1px solid var(--color-border, #1e2738);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.mf-weekplan-day.mf-wp-today {
  border-color: var(--color-accent, #5e81ac);
  box-shadow: 0 0 0 1px rgba(94, 129, 172, 0.2);
}

.mf-weekplan-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border, #1e2738);
  flex-shrink: 0;
}

.mf-wp-day-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mf-wp-day-title h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary, #e6edf3);
}

.mf-wp-today-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(94, 129, 172, 0.2);
  color: var(--color-accent, #5e81ac);
}

.mf-wp-day-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mf-day-count {
  font-size: 12px;
  color: var(--color-text-muted, #484f58);
  font-weight: 500;
}

.mf-day-add {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #1e2738);
  background: transparent;
  color: var(--color-accent, #5e81ac);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mf-day-add:active {
  background: rgba(94, 129, 172, 0.1);
}

.mf-day-assign-all {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #1e2738);
  background: transparent;
  color: var(--text-secondary, #8899aa);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mf-day-assign-all:active {
  background: rgba(94, 129, 172, 0.1);
}

/* ---- Stops list ---- */

.mf-wp-stops-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
}

.mf-wp-stops-list.mf-wp-drop-active {
  background: rgba(94, 129, 172, 0.03);
}

.mf-wp-stops-list.mf-wp-drop-zone-highlight {
  background: rgba(94, 129, 172, 0.08);
  border-radius: 8px;
}

/* ---- Technician groups ---- */

.mf-wp-tech-group {
  margin-bottom: 6px;
}

.mf-wp-tech-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  margin-bottom: 4px;
}

.mf-wp-tech-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent, #5e81ac);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mf-wp-tech-avatar.mf-wp-tech-unassigned {
  background: var(--color-text-muted, #484f58);
}

.mf-wp-tech-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #8b949e);
  flex: 1;
}

.mf-wp-tech-count {
  font-size: 11px;
  color: var(--color-text-muted, #484f58);
}

/* ---- Stop card ---- */

.mf-wp-stop {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.mf-wp-stop-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  border-radius: 10px;
}

.mf-wp-stop-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  background: var(--color-bg-tertiary, #0d1117);
  border-radius: 10px;
  border: 1px solid var(--color-border, #1e2738);
  position: relative;
  z-index: 1;
  transition: transform 0.15s ease;
  will-change: transform;
}

.mf-wp-stop-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(94, 129, 172, 0.15);
  color: var(--color-accent, #5e81ac);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mf-wp-stop-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mf-wp-stop-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #e6edf3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-wp-stop-addr {
  font-size: 12px;
  color: var(--color-text-muted, #484f58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-wp-stop-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mf-wp-reassign {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary, #8b949e);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mf-wp-reassign:active {
  background: rgba(255, 255, 255, 0.12);
}

.mf-wp-delete-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-danger, #f85149);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mf-wp-delete-btn:active {
  background: rgba(248, 81, 73, 0.15);
}

/* ---- Drag states ---- */

.mf-wp-drag-placeholder {
  opacity: 0.3;
}

.mf-wp-drag-ghost {
  opacity: 0.9;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  pointer-events: none;
  transform: scale(1.03);
}

.mf-wp-drag-ghost .mf-wp-stop-content {
  border-color: var(--color-accent, #5e81ac);
}

.mf-wp-drop-above::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 8px;
  right: 8px;
  height: 3px;
  background: var(--color-accent, #5e81ac);
  border-radius: 2px;
  z-index: 5;
}

.mf-wp-drop-below::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 8px;
  right: 8px;
  height: 3px;
  background: var(--color-accent, #5e81ac);
  border-radius: 2px;
  z-index: 5;
}

/* ---- Empty state ---- */

.mf-wp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--color-text-muted, #484f58);
  gap: 8px;
}

.mf-wp-empty i {
  font-size: 28px;
  opacity: 0.5;
}

.mf-wp-empty p {
  margin: 0;
  font-size: 13px;
}

/* ---- Loading state ---- */

.mf-weekplan-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  color: var(--color-text-muted, #484f58);
}

.mf-weekplan-loading p {
  margin: 0;
  font-size: 14px;
}

/* ---- Reassign bottom sheet extras ---- */

.mf-wp-reassign-customer {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--color-text-secondary, #8b949e);
}

/* ---- Add customer sheet extras ---- */

.mf-wp-add-content {
  max-height: 70vh;
}

.mf-wp-already-badge {
  font-size: 11px;
  color: var(--color-text-muted, #484f58);
  font-style: italic;
}

.mf-assign-row.mf-assign-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ---- Method picker (add customer method choice) ---- */

.mf-method-content {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.mf-method-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.mf-method-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  background: var(--color-bg, #0c0f16);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  color: inherit;
  width: 100%;
}

.mf-method-option:active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(59, 130, 246, 0.3);
}

.mf-method-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.mf-method-icon.area {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.mf-method-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mf-method-text strong {
  font-size: 15px;
  font-weight: 600;
}

.mf-method-text span {
  font-size: 12px;
  color: var(--color-text-muted, #666);
}

.mf-method-option > i.fa-chevron-right {
  color: var(--color-text-muted, #555);
  font-size: 12px;
  flex-shrink: 0;
}

/* ---- Desktop/tablet adaptation for weekplan editor ---- */

@media (min-width: 769px) {
  .mf-weekplan-day {
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    scroll-snap-align: none;
  }
  .mf-weekplan-days {
    scroll-snap-type: none;
    overflow-x: hidden;
    padding: 12px 16px 16px;
    gap: 10px;
  }
  .mf-weekplan-day-dots {
    display: none;
  }
  .mf-weekplan-header {
    padding: 14px 24px;
  }
  .mf-wp-stops-list {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  .mf-weekplan-day-header {
    padding: 10px 12px;
  }
  /* Bottom sheets act as centered modals on wider screens */
  .mf-weekplan-overlay .mf-sheet-content,
  .mf-weekplan-inline .mf-sheet-content {
    max-width: 520px;
    margin: 0 auto;
    border-radius: 16px 16px 0 0;
  }
  .mf-weekplan-overlay .mf-area-sheet-content,
  .mf-weekplan-inline .mf-area-sheet-content {
    max-width: 600px;
  }
}

/* ============================================
   TABLET ADAPTATION (769px - 1024px)
   Optimized for iPad and tablets in portrait
   ============================================ */

@media (min-width: 769px) and (max-width: 1199px) {

  /* ---- Bottom bar: horizontal labels, larger touch targets ---- */
  .mf-bottom-bar {
    justify-content: center;
    gap: 4px;
    padding: 8px 24px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0));
  }

  .mf-tab-btn {
    flex: 0 1 auto;
    flex-direction: row;
    gap: 10px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    min-height: 52px;
    border-radius: 12px;
    transition: background 0.15s, color 0.15s;
  }

  .mf-tab-btn i {
    font-size: 20px;
  }

  .mf-tab-btn.active {
    background: rgba(59, 130, 246, 0.12);
  }

  .mf-bottom-bar.admin-mode .mf-tab-btn {
    font-size: 13px;
    gap: 8px;
    padding: 10px 16px;
  }

  .mf-bottom-bar.admin-mode .mf-tab-btn i {
    font-size: 18px;
  }

  /* ---- Header: more breathing room ---- */
  .mf-header {
    padding: 16px 28px;
  }

  .mf-date-nav {
    font-size: 22px;
    padding: 12px 16px;
    min-width: 52px;
    min-height: 52px;
  }

  .mf-date-label {
    font-size: 20px;
    min-width: 160px;
  }

  /* ---- Progress bar ---- */
  .mf-progress-bar {
    padding: 10px 28px;
  }

  .mf-progress-label {
    font-size: 15px;
  }

  .mf-progress-track {
    height: 8px;
  }

  /* ============================================
     BOTTOM SHEETS & MODALS: centered, larger
     ============================================ */

  .mf-bottom-sheet {
    align-items: center;
    padding: 24px;
  }

  .mf-sheet-content {
    max-width: 560px;
    border-radius: 16px;
    max-height: 80vh;
    padding: 0 24px 24px;
  }

  .mf-bottom-sheet.open .mf-sheet-content {
    transform: translateY(0);
  }

  .mf-sheet-content h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .mf-sheet-label {
    font-size: 13px;
    margin: 16px 0 8px;
  }

  .mf-sheet-select {
    padding: 14px;
    font-size: 16px;
    border-radius: 12px;
  }

  .mf-sheet-date {
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 10px;
  }

  .mf-sheet-textarea {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 10px;
  }

  .mf-search-input {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 12px;
  }

  .mf-info-card {
    max-width: 560px;
    border-radius: 16px;
    padding: 24px;
  }

  .mf-info-header h3 {
    font-size: 22px;
  }

  /* ---- Buttons: larger touch targets ---- */
  .mf-btn,
  .mf-btn-primary,
  .mf-btn-secondary {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 48px;
    border-radius: 12px;
    gap: 10px;
  }

  .mf-btn-chip {
    padding: 10px 18px;
    font-size: 14px;
  }

  .mf-action-btn {
    width: 48px;
    height: 48px;
    font-size: 18px;
    border-radius: 12px;
  }

  /* ---- Method picker ---- */
  .mf-method-option {
    padding: 18px 16px;
    border-radius: 14px;
  }

  .mf-method-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .mf-method-text strong {
    font-size: 16px;
  }

  .mf-method-text span {
    font-size: 14px;
  }

  /* ---- Assign results ---- */
  .mf-assign-results {
    margin-top: 12px;
  }

  .mf-assign-row {
    padding: 14px 8px;
  }

  .mf-assign-item,
  .mf-assign-row h4 {
    font-size: 15px;
  }

  .mf-assign-row p {
    font-size: 14px;
  }

  /* ============================================
     FIELD VIEW: stop cards, next card
     ============================================ */

  .mf-route-content {
    padding: 16px 28px;
    max-width: 700px;
    margin: 0 auto;
  }

  .mf-stop-card {
    padding: 18px;
    gap: 14px;
    border-radius: 14px;
  }

  .mf-stop-num {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-radius: 12px;
  }

  .mf-stop-info h4 {
    font-size: 17px;
  }

  .mf-stop-info p {
    font-size: 15px;
  }

  .mf-stop-actions {
    gap: 8px;
  }

  .mf-stop-est,
  .mf-next-est {
    font-size: 14px;
  }

  .mf-est-input {
    font-size: 15px;
    border-radius: 8px;
    padding: 6px 8px;
  }

  .mf-next-card {
    padding: 20px;
    border-radius: 16px;
  }

  .mf-next-info h4 {
    font-size: 18px;
  }

  .mf-next-info p {
    font-size: 15px;
  }

  .mf-next-actions {
    gap: 10px;
  }

  .mf-next-actions .mf-btn {
    padding: 14px 20px;
    font-size: 15px;
  }

  /* ---- Visited section ---- */
  .mf-visited-toggle {
    padding: 14px 16px;
    font-size: 15px;
    gap: 10px;
  }

  .mf-visited-list {
    gap: 8px;
  }

  /* ---- Empty state ---- */
  .mf-empty-state i {
    font-size: 48px;
  }

  .mf-empty-state p {
    font-size: 16px;
  }

  .mf-empty-hint {
    font-size: 14px;
  }

  /* ============================================
     WEEKPLAN: days, stops, dots
     ============================================ */

  .mf-weekplan-inline {
    padding: 0;
  }

  .mf-weekplan-day {
    min-width: 0;
    flex: 1 1 calc(33.333% - 8px);
    border-radius: 14px;
  }

  .mf-weekplan-days {
    flex-wrap: wrap;
    padding: 12px 24px 16px;
    gap: 12px;
  }

  .mf-weekplan-day-header h4 {
    font-size: 16px;
  }

  .mf-wp-today-badge {
    font-size: 12px;
  }

  .mf-day-count {
    font-size: 14px;
  }

  .mf-day-add,
  .mf-day-assign-all {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-radius: 10px;
  }

  .mf-wp-stops-list {
    padding: 10px;
    gap: 8px;
  }

  .mf-wp-stop-content {
    padding: 12px;
    gap: 12px;
  }

  .mf-wp-stop-num {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .mf-wp-stop-name {
    font-size: 15px;
  }

  .mf-wp-stop-addr {
    font-size: 13px;
  }

  .mf-wp-stop-meta {
    font-size: 13px;
  }

  .mf-wp-stop-tech i,
  .mf-wp-stop-time i {
    font-size: 12px;
  }

  .mf-wp-stop-actions {
    gap: 6px;
  }

  .mf-wp-reassign,
  .mf-wp-delete-btn {
    width: 38px;
    height: 38px;
    font-size: 14px;
    border-radius: 10px;
  }

  .mf-wp-tech-avatar {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .mf-wp-tech-name {
    font-size: 14px;
  }

  .mf-wp-tech-count {
    font-size: 13px;
  }

  .mf-wp-tech-header {
    padding: 8px 6px;
    gap: 10px;
  }

  .mf-wp-est-input {
    font-size: 13px;
    border-radius: 6px;
    padding: 4px 6px;
  }

  .mf-weekplan-save {
    padding: 10px 18px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* ============================================
     ADMIN TAB: team cards, summary
     ============================================ */

  .mf-admin-content,
  #mfAdminContent {
    padding: 20px 28px;
  }

  .mf-summary-card {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 16px;
    border-radius: 16px;
  }

  .mf-summary-num {
    font-size: 32px;
  }

  .mf-summary-stat span:last-child {
    font-size: 13px;
  }

  .mf-team-actions {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
  }

  .mf-team-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mf-team-card {
    margin-bottom: 0;
    padding: 16px;
    border-radius: 14px;
    gap: 14px;
  }

  .mf-team-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  .mf-team-info h4 {
    font-size: 16px;
  }

  .mf-team-info p {
    font-size: 14px;
  }

  .mf-team-section-label {
    font-size: 14px;
    padding: 12px 0 8px;
  }

  /* Expanded card and its details span full width */
  .mf-team-card.expanded,
  .mf-team-week-grid,
  .mf-team-stops,
  .mf-team-section-label {
    grid-column: 1 / -1;
  }

  .mf-team-day-header {
    font-size: 14px;
    padding: 10px 12px;
  }

  .mf-team-day-label {
    font-size: 14px;
  }

  .mf-team-day-count {
    font-size: 13px;
  }

  .mf-team-stop {
    padding: 8px 12px;
    font-size: 14px;
  }

  .mf-team-stop-num {
    font-size: 13px;
    width: 24px;
  }

  .mf-team-stop-name {
    font-size: 14px;
  }

  /* ============================================
     CALENDAR TAB
     ============================================ */

  .mf-cal-header {
    padding: 16px 28px;
  }

  .mf-cal-header h3 {
    font-size: 18px;
  }

  .mf-cal-date-header {
    font-size: 15px;
    padding: 12px 16px;
  }

  .mf-cal-date-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 8px;
  }

  .mf-cal-card {
    border-bottom: none;
    border: 1px solid var(--color-border, #2e3440);
    border-radius: 12px;
    padding: 16px;
    gap: 14px;
  }

  .mf-cal-date-header {
    grid-column: 1 / -1;
  }

  .mf-cal-time {
    font-size: 16px;
  }

  .mf-cal-status {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
  }

  .mf-cal-card-info h4 {
    font-size: 16px;
  }

  .mf-cal-desc {
    font-size: 14px;
  }

  .mf-cal-address {
    font-size: 13px;
  }

  .mf-cal-address i,
  .mf-cal-assigned i {
    font-size: 12px;
  }

  .mf-cal-assigned {
    font-size: 13px;
  }

  /* ============================================
     CHAT TAB
     ============================================ */

  .mf-chat-list-view,
  .mf-chat-message-view,
  .mf-chat-newdm-view {
    max-width: 650px;
    margin: 0 auto;
  }

  .mf-chat-header h3 {
    font-size: 18px;
  }

  .mf-chat-conv-item {
    padding: 16px 20px;
    gap: 14px;
  }

  .mf-chat-conv-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .mf-chat-conv-info h4 {
    font-size: 16px;
  }

  .mf-chat-conv-preview {
    font-size: 14px;
  }

  .mf-chat-conv-time {
    font-size: 13px;
  }

  .mf-chat-conv-unread {
    font-size: 12px;
    min-width: 22px;
    height: 22px;
  }

  .mf-chat-message {
    max-width: 65%;
    font-size: 15px;
    padding: 12px 16px;
    border-radius: 14px;
  }

  .mf-chat-msg-sender {
    font-size: 13px;
  }

  .mf-chat-date-sep {
    font-size: 13px;
  }

  .mf-chat-input {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 12px;
  }

  .mf-chat-send-btn {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .mf-chat-team-avatar {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  /* ============================================
     SUPPORT TAB
     ============================================ */

  .mf-support-topic-grid {
    gap: 12px;
  }

  .mf-support-topic-btn {
    padding: 18px 12px;
    font-size: 15px;
    gap: 10px;
    border-radius: 12px;
  }

  .mf-support-topic-btn i {
    font-size: 22px;
  }

  .mf-support-section-title {
    font-size: 14px;
  }

  .mf-support-closed-badge {
    font-size: 12px;
  }

  /* ============================================
     AREA BROWSER
     ============================================ */

  .mf-area-tab {
    padding: 12px 12px;
    font-size: 15px;
    border-radius: 12px;
  }

  .mf-area-tab i {
    font-size: 14px;
  }

  .mf-area-hint {
    font-size: 14px;
  }

  /* ============================================
     ACCOUNT / SETTINGS VIEW
     ============================================ */

  .mf-account-content {
    max-width: 650px;
    margin: 0 auto;
    padding: 20px 28px;
  }

  .mf-account-avatar {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }

  /* ============================================
     INFO OVERLAY (customer details)
     ============================================ */

  .mf-info-row {
    padding: 12px 0;
    font-size: 15px;
  }

  .mf-info-row i {
    font-size: 18px;
    width: 24px;
  }

  .mf-info-header h3 {
    font-size: 22px;
  }

  .mf-info-close {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

/* ---- Area browser sheet ---- */

.mf-area-sheet-content {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.mf-area-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.mf-area-tab {
  flex: 1;
  padding: 10px 8px;
  background: var(--color-bg, #0c0f16);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 10px;
  color: var(--color-text-muted, #999);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mf-area-tab.active {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.mf-area-tab i {
  font-size: 11px;
}

.mf-area-search-wrap {
  margin-bottom: 12px;
}

.mf-area-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 60px;
}

.mf-area-hint {
  text-align: center;
  color: var(--color-text-muted, #666);
  font-size: 13px;
  padding: 24px 16px;
}

.mf-area-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted, #666);
}

.mf-area-empty i {
  font-size: 28px;
  margin-bottom: 8px;
  color: #10b981;
}

.mf-area-empty p {
  margin: 0;
  font-size: 14px;
}

.mf-area-loading {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted, #666);
  font-size: 14px;
}

.mf-area-loading i {
  margin-right: 6px;
}

/* Area cards */

.mf-area-card {
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.mf-area-card.expanded {
  border-color: rgba(59, 130, 246, 0.3);
}

.mf-area-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  cursor: pointer;
  transition: background 0.1s;
  gap: 8px;
}

.mf-area-card-header:active {
  background: rgba(255, 255, 255, 0.03);
}

.mf-area-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.mf-area-card-left > i {
  color: #10b981;
  font-size: 14px;
  flex-shrink: 0;
}

.mf-area-card-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mf-area-card-info strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-area-card-info span {
  font-size: 12px;
  color: var(--color-text-muted, #666);
}

.mf-area-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mf-area-chevron {
  color: var(--color-text-muted, #555);
  font-size: 12px;
  transition: transform 0.2s;
}

.mf-area-sev-wrap {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mf-area-sev {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 500;
}

.mf-area-sev.critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.mf-area-sev.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.mf-area-sev.mild {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* Customer list within expanded area */

.mf-area-customers {
  border-top: 1px solid var(--color-border, #1e2738);
  padding: 6px 0;
}

.mf-area-select-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #3b82f6;
  transition: background 0.1s;
}

.mf-area-select-all:active {
  background: rgba(59, 130, 246, 0.06);
}

.mf-area-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--color-border, #2a3548);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  font-size: 11px;
  color: transparent;
}

.mf-area-checkbox.checked {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.mf-area-checkbox.disabled {
  opacity: 0.3;
}

.mf-area-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.mf-area-customer:active {
  background: rgba(255, 255, 255, 0.03);
}

.mf-area-customer.selected {
  background: rgba(59, 130, 246, 0.06);
}

.mf-area-customer.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.mf-area-customer-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mf-area-customer-info strong {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-area-customer-info span {
  font-size: 11px;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-area-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
  flex-shrink: 0;
}

.mf-area-badge.critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.mf-area-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.mf-area-badge.mild {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.mf-area-already {
  font-size: 11px;
  color: var(--color-text-muted, #484f58);
  font-style: italic;
  flex-shrink: 0;
}

.mf-area-other-day {
  font-size: 10px;
  color: var(--color-text-muted, #484f58);
  flex-shrink: 0;
}

/* Sticky action bar */

.mf-area-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--color-surface, #141820);
  border-top: 1px solid var(--color-border, #1e2738);
  display: flex;
  justify-content: center;
  z-index: 5;
}

.mf-area-add-btn {
  width: 100%;
  padding: 14px 20px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
}

.mf-area-add-btn:active {
  background: #2563eb;
}

/* ============================================================
   TEAM OVERVIEW — Desktop sidebar tab
   ============================================================ */

.team-overview-content {
  padding: 8px 0;
}

.to-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px 12px;
}
.to-date-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
  min-width: 140px;
  text-align: center;
}
.to-today-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-accent, #3b82f6);
  text-transform: uppercase;
}

.to-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 16px 12px;
}
.to-summary-card {
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}
.to-summary-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary, #e2e8f0);
}
.to-summary-label {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  margin-top: 2px;
}
.to-card-active .to-summary-num { color: #f59e0b; }
.to-card-done .to-summary-num { color: #10b981; }
.to-card-idle .to-summary-num { color: #9ca3af; }

.to-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted, #64748b);
  padding: 8px 16px 4px;
}

.to-tech-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--color-border, #1e2738);
}
.to-tech-card:hover {
  background: rgba(255, 255, 255, 0.03);
}
.to-tech-card:active {
  background: rgba(255, 255, 255, 0.06);
}
.to-tech-idle {
  opacity: 0.55;
}

.to-tech-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.to-avatar-idle {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
}

.to-tech-info {
  flex: 1;
  min-width: 0;
}
.to-tech-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.to-tech-route {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.to-tech-status {
  flex-shrink: 0;
}
.to-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.to-status-idle {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}
.to-status-active {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.to-status-done {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.to-progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 16px 4px;
  border-radius: 2px;
  overflow: hidden;
}
.to-progress-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.to-stops-actions {
  padding: 4px 16px 0;
}
.to-stops-list {
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 6px;
  margin: 4px 16px 8px;
  overflow: hidden;
}
.to-stop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border, #1e2738);
}
.to-stop-item:last-child {
  border-bottom: none;
}
.to-stop-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent, #3b82f6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.to-stop-name {
  font-weight: 500;
  color: var(--color-text-primary, #e2e8f0);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.to-stop-addr {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.to-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted, #64748b);
}
.to-empty i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.to-empty p {
  font-size: 14px;
}

/* ---- Team Overview: Action buttons ---- */
.to-actions {
  display: flex;
  gap: 8px;
  padding: 4px 16px 12px;
  flex-wrap: wrap;
}
.to-actions .btn {
  font-size: 12px;
  padding: 6px 12px;
}

/* ---- Team Overview: Modal ---- */
.to-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.to-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.to-modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.to-modal {
  position: relative;
  background: var(--color-bg-primary, #0f1219);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 12px;
  width: 420px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.to-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #1e2738);
}
.to-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
}
.to-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.to-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border, #1e2738);
}

.to-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
  margin: 12px 0 4px;
}
.to-label:first-child {
  margin-top: 0;
}
.to-select,
.to-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 6px;
  color: var(--color-text-primary, #e2e8f0);
  outline: none;
}
.to-select:focus,
.to-input:focus {
  border-color: var(--color-accent, #3b82f6);
}
.to-date-input {
  padding: 6px 10px;
  font-size: 13px;
  background: var(--color-surface, #141820);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 6px;
  color: var(--color-text-primary, #e2e8f0);
  outline: none;
}

.to-date-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.to-chip {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 16px;
  border: 1px solid var(--color-border, #1e2738);
  background: var(--color-surface, #141820);
  color: var(--color-text-secondary, #94a3b8);
  cursor: pointer;
  transition: all 0.15s;
}
.to-chip.active {
  background: var(--color-accent, #3b82f6);
  color: #fff;
  border-color: var(--color-accent, #3b82f6);
}

/* ---- Team Overview: Search results ---- */
.to-search-results {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 8px;
}
.to-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
  font-size: 13px;
  color: var(--color-text-primary, #e2e8f0);
}
.to-search-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.to-search-addr {
  font-size: 12px;
  color: var(--color-text-muted, #64748b);
}
.to-search-empty {
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: var(--color-text-muted, #64748b);
}

.to-selected-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  margin: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary, #e2e8f0);
}

/* ---- Team Overview: Notice toast ---- */
.to-notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.to-notice.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.to-notice-success { background: #059669; }
.to-notice-error { background: #dc2626; }
.to-notice-warning { background: #d97706; }

/* ---- Team Overview: Wide modal for customer lookup ---- */
.to-modal-wide {
  width: 520px;
  max-height: 80vh;
}
.to-customer-row {
  padding: 10px 12px;
}
.to-customer-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.to-action-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-accent, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.to-action-icon:hover {
  background: rgba(59, 130, 246, 0.3);
}

/* ---- Customer detail view ---- */
.to-back-btn {
  background: none;
  border: none;
  color: var(--color-accent, #3b82f6);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.to-back-btn:hover {
  text-decoration: underline;
}
.to-customer-header h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
}
.to-detail-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border, #1e2738);
}
.to-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.to-detail-section h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.to-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--color-text-primary, #e2e8f0);
}
.to-info-row i {
  width: 16px;
  text-align: center;
  color: var(--color-text-muted, #64748b);
  margin-top: 2px;
  flex-shrink: 0;
}
.to-info-row a {
  color: var(--color-accent, #3b82f6);
  text-decoration: none;
}
.to-info-row a:hover {
  text-decoration: underline;
}
.to-detail-muted {
  font-size: 13px;
  color: var(--color-text-muted, #64748b);
  margin: 4px 0;
}

/* ---- Route Assignment Overview (RAO): Week matrix ---- */
.rao-toggle {
  display: flex;
  gap: 0;
  padding: 8px 16px 4px;
}
.rao-toggle-btn {
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--color-border, #1e2738);
  background: var(--color-bg-secondary, #0f172a);
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  transition: all 0.15s;
}
.rao-toggle-btn:first-child {
  border-radius: 6px 0 0 6px;
}
.rao-toggle-btn:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}
.rao-toggle-btn.active {
  background: var(--color-accent, #5e81ac);
  color: #fff;
  border-color: var(--color-accent, #5e81ac);
}
.rao-toggle-btn:hover:not(.active) {
  background: var(--color-bg-hover, #1e293b);
  color: var(--color-text-primary, #e2e8f0);
}

/* =========================================================
   WPO: Oversikt layout — main (tech cards) + sidebar (forslag)
   Desktop: side-by-side. Mobile: stacked, sidebar blir horisontal strip.
   ========================================================= */

.wpo-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  /* Container queries — layouten reagerer på panel-bredde, ikke viewport */
  container-type: inline-size;
  container-name: wpo;
  transition: gap 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Widen-hint: dukker opp når panelet er smalt — én gang per bruker */
.wpo-widen-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 12px 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-text-primary, #e6e8eb);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  animation: wpoHintIn 280ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.wpo-widen-hint[hidden] { display: none; }
.wpo-widen-hint i {
  color: var(--color-accent, #6366f1);
  font-size: 13px;
}
.wpo-widen-hint span { flex: 1; line-height: 1.4; }
.wpo-widen-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted, #8b92a0);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
  border-radius: 4px;
  transition: background 120ms, color 120ms;
}
.wpo-widen-dismiss:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary, #e6e8eb);
}
@keyframes wpoHintIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.wpo-main {
  flex: 1 1 auto;
  min-width: 0;
}
.wpo-sidebar {
  background: var(--color-bg-secondary, #151821);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 10px;
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  flex: 0 0 280px;
  /* Smooth bredde- og fade-animasjon når sidebar collapser */
  transition:
    flex-basis 320ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 220ms ease-out,
    border-width 0s 320ms;
}
.wpo-sidebar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border, #2c3038);
  font-size: 13px;
  color: var(--color-text-primary, #e6e8eb);
  flex-shrink: 0;
}
.wpo-sidebar-head i { color: var(--color-accent, #6366f1); }

/* Topbar-toggle (skjul/vis forslag) — alltid synlig i topbar-actions */
.wpo-topbar-toggle { transition: color 120ms, background 120ms; }
.wpo-topbar-toggle.wpo-topbar-toggle-on { color: var(--color-accent, #6366f1); }
.wpo-topbar-toggle.wpo-topbar-toggle-off { color: var(--color-text-muted, #8b92a0); }
.wpo-topbar-toggle.wpo-topbar-toggle-off:hover { color: var(--color-text-primary, #e6e8eb); }
.wpo-sidebar-body {
  overflow-y: auto;
  padding: 8px 10px 12px;
  flex: 1;
  min-height: 0;
}
.wpo-sidebar-body .wp-area-panel {
  background: transparent;
  border: none;
  padding: 4px;
  margin: 0;
}

/* Kollapset state — desktop */
/* Kollapset (eksplisitt toggle ELLER ingen forslag): sidebar krymper til 0
   bredde via flex-basis, fader ut — alt animatert. */
.wpo-layout-collapsed,
.wpo-no-suggestions {
  gap: 0;
}
.wpo-layout-collapsed .wpo-sidebar,
.wpo-no-suggestions .wpo-sidebar {
  flex: 0 0 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  border-width: 0;
  margin: 0;
  padding: 0;
}

/* Sidebar-fade: jevn overgang når container krymper inn under terskel */
.wpo-sidebar {
  transition: opacity 220ms ease-out, visibility 0s 0s;
}

/* Mellom-bredde: sidebar krymper til 240px */
@container wpo (min-width: 481px) and (max-width: 640px) {
  .wpo-sidebar { flex: 0 0 240px; }
}

/* Smal container (under 480px): sidebar krymper til 0 + fader ut animatert */
@container wpo (max-width: 480px) {
  .wpo-layout { gap: 0; }
  .wpo-sidebar {
    flex: 0 0 0 !important;
    opacity: 0 !important;
    pointer-events: none;
    border-width: 0;
    margin: 0;
    padding: 0;
  }

  /* Skjul toggle-knappen (sidebar finnes ikke å toggle) */
  button.wpo-topbar-toggle,
  .wpo-topbar-toggle { display: none !important; }

  /* Topbar kompakt: skjul månedsrange, mindre padding */
  .rao-topbar { padding: 8px 10px; gap: 8px; }
  .rao-topbar-range { display: none; }
  .rao-topbar-title { font-size: 12px; }
  .rao-topbar-stats { font-size: 11px; }
  .rao-topbar-stats span { white-space: nowrap; }

  /* Tech-kort i én kolonne, mindre padding */
  .rao-cards { grid-template-columns: 1fr; gap: 8px; padding: 0 8px 12px; }

  /* Card head: drop ukens kategori-chips (de er duplisert i dag-prikker uansett) */
  .rao-card-head { padding: 10px; gap: 8px; grid-template-columns: auto 1fr; }
  .rao-card-cats { display: none; }
  .rao-card-name { font-size: 13px; }

  /* Dagsrad: bytt fra grid til flex så elementene følger innholdet
     (1fr-kolonner gir dødt felt når det er få dots eller tom dag) */
  .rao-day {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .rao-day-name {
    font-size: 11px;
    min-width: 38px;
    flex-shrink: 0;
  }
  .rao-day-count { margin-left: auto; }
  .rao-day-dots {
    flex: 0 1 auto;
    justify-content: flex-start;
    overflow: hidden;
  }
  .rao-day-time { display: none; }
  .rao-day-mute {
    flex: 1;
    text-align: left;
    margin: 0;
    grid-column: unset;
  }
  .rao-day-caret { flex-shrink: 0; }
  .rao-day-stop {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px;
    font-size: 12px;
    grid-template-columns: unset;
  }
  .rao-day-stop-name { flex: 1; min-width: 0; }

  /* Skjul tomme dager helt på smal bredde — gir "tom plass uten tekst" ellers.
     Kort med null arbeid viser kun header (avatar + navn + 0 stopp). */
  .rao-day-empty { display: none !important; }
}

/* Fallback for nettlesere uten container query-støtte */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .wpo-layout { gap: 0; }
    .wpo-sidebar {
      flex: 0 0 0 !important;
      opacity: 0 !important;
      pointer-events: none;
      border-width: 0;
      margin: 0;
      padding: 0;
    }
    button.wpo-topbar-toggle,
    .wpo-topbar-toggle { display: none !important; }
  }
}

/* =========================================================
   RAO: Technician card layout (Oversikt — ny design)
   ========================================================= */

.rao-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  margin: 8px 0;
  background: var(--color-bg-secondary, #151821);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 10px;
  flex-wrap: wrap;
}
.rao-topbar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rao-topbar-titlewrap {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms;
}
.rao-topbar-titlewrap:hover { background: rgba(255,255,255,0.04); }
.rao-topbar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, #e6e8eb);
}
.rao-topbar-range {
  font-size: 11px;
  color: var(--color-text-muted, #8b92a0);
}
.rao-topbar-now {
  display: inline-block;
  margin-left: 6px;
  background: var(--color-accent, #6366f1);
  color: #fff;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.rao-topbar-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted, #8b92a0);
  flex: 1;
}
.rao-topbar-stats strong { color: var(--color-text-primary, #e6e8eb); font-weight: 600; margin-right: 4px; }
.rao-topbar-dot { color: var(--color-text-muted, #8b92a0); opacity: 0.5; }
.rao-topbar-warn strong { color: #fca5a5; }
.rao-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   RAO: Heatmap + filter-chips + compact-modus (skala til 20+ teknikere)
   ========================================================= */

.rao-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 12px;
}

/* Heatmap-stripe: ett segment per tekniker, fargekodet etter belegg */
.rao-heatmap {
  display: flex;
  gap: 3px;
  padding: 6px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 8px;
  overflow-x: auto;
}
.rao-hm-cell {
  flex: 1 1 32px;
  min-width: 28px;
  max-width: 60px;
  height: 36px;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  cursor: pointer;
  background: color-mix(in oklab, var(--c, #6366f1) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--c, #6366f1) 50%, transparent);
  transition: transform 120ms, border-color 120ms;
  position: relative;
  overflow: hidden;
}
.rao-hm-cell:hover { transform: translateY(-1px); border-color: var(--c, #6366f1); }
.rao-hm-cell::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--c, #6366f1);
  opacity: 0;
  transition: opacity 120ms;
}
.rao-hm-empty { opacity: 0.35; }
.rao-hm-low::after { opacity: 0.25; }
.rao-hm-normal::after { opacity: 0.55; }
.rao-hm-high {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.4) inset;
}
.rao-hm-high::after { opacity: 0.75; background: #ef4444; }
.rao-hm-cell > span { position: relative; z-index: 1; }

/* Filter-rad: chips + søk + densitet-toggle */
.rao-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rao-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.rao-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  color: var(--color-text-muted, #8b92a0);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
}
.rao-filter-chip:hover { color: var(--color-text-primary, #e6e8eb); border-color: rgba(99,102,241,0.35); }
.rao-filter-on {
  background: rgba(99,102,241,0.18);
  border-color: var(--color-accent, #6366f1);
  color: #c7d2fe;
}
.rao-filter-num {
  background: rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  color: inherit;
}
.rao-filter-on .rao-filter-num { background: rgba(99,102,241,0.3); }
.rao-filter-warn { border-color: rgba(239,68,68,0.35); color: #fca5a5; }
.rao-filter-warn.rao-filter-on {
  background: rgba(239,68,68,0.18);
  border-color: #ef4444;
  color: #fca5a5;
}
.rao-filter-warn .rao-filter-num { background: rgba(239,68,68,0.2); }

.rao-filter-tools {
  display: flex;
  gap: 6px;
  align-items: center;
}
.rao-filter-search {
  width: 160px;
  padding: 6px 10px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  color: var(--color-text-primary, #e6e8eb);
  border-radius: 6px;
  font-size: 12px;
  transition: border-color 120ms, width 200ms;
}
.rao-filter-search:focus { width: 220px; border-color: var(--color-accent, #6366f1); outline: none; }
.rao-density-toggle {
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 6px;
  color: var(--color-text-muted, #8b92a0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms, border-color 120ms;
}
.rao-density-toggle:hover { color: var(--color-text-primary, #e6e8eb); border-color: var(--color-accent, #6366f1); }
.rao-density-on {
  color: var(--color-accent, #6366f1);
  border-color: var(--color-accent, #6366f1);
  background: rgba(99,102,241,0.1);
}

/* Compact-modus: én rad per tekniker */
.rao-compact-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px 16px;
}
.rao-cmp {
  display: grid;
  grid-template-columns: 32px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-bg-secondary, #151821);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.rao-cmp:hover { border-color: rgba(99,102,241,0.35); background: var(--color-bg-tertiary, #22262e); }
.rao-cmp-focused { border-color: var(--color-accent, #6366f1); }
.rao-cmp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.rao-cmp-name {
  font-size: 13px;
  color: var(--color-text-primary, #e6e8eb);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rao-cmp-week {
  display: inline-flex;
  gap: 3px;
}
.rao-cmp-day {
  width: 10px;
  height: 18px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  display: inline-block;
}
.rao-cmp-day-empty { background: rgba(255,255,255,0.06); }
.rao-cmp-day-low { background: rgba(16,185,129,0.4); }
.rao-cmp-day-normal { background: rgba(245,158,11,0.5); }
.rao-cmp-day-high { background: rgba(239,68,68,0.6); }
.rao-cmp-day-today { box-shadow: 0 0 0 1px var(--color-accent, #6366f1); }
.rao-cmp-total {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.rao-cmp-total-empty { background: rgba(255,255,255,0.06); color: var(--color-text-muted, #8b92a0); }
.rao-cmp-total-low { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.rao-cmp-total-normal { background: rgba(245,158,11,0.15); color: #fcd34d; }
.rao-cmp-total-high { background: rgba(239,68,68,0.18); color: #fca5a5; }
.rao-cmp-caret {
  font-size: 10px;
  color: var(--color-text-muted, #8b92a0);
  transition: transform 160ms;
}
.rao-cmp-expanded .rao-cmp-caret { transform: rotate(90deg); }
.rao-cmp-detail {
  background: var(--color-bg-tertiary, #22262e);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 8px;
  padding: 10px 12px;
  margin: -2px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rao-cmp-detail-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Smal container: filter-row blir vertikal */
@container wpo (max-width: 480px) {
  .rao-filter-row { flex-direction: column; align-items: stretch; }
  .rao-filter-tools { width: 100%; }
  .rao-filter-search { flex: 1; width: auto; }
  .rao-filter-search:focus { width: auto; }
  .rao-cmp { grid-template-columns: 28px 1fr auto; gap: 8px; padding: 8px 10px; }
  .rao-cmp-week { display: none; } /* spar plass på smal */
  .rao-cmp-caret { display: none; }
  .rao-heatmap { padding: 4px; gap: 2px; }
  .rao-hm-cell { height: 28px; font-size: 9px; }
}

/* Cards grid — auto-fit kollapser tomme tracks så kort fyller full bredde
   (auto-fill ville reservert plass for "manglende" kort = dødfelt) */
.rao-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
  padding: 0 12px 16px;
}

.rao-card {
  background: var(--color-bg-secondary, #151821);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 120ms, box-shadow 120ms;
}
.rao-card:hover { border-color: rgba(99,102,241,0.3); }
.rao-card-focused {
  border-color: var(--color-accent, #6366f1);
  box-shadow: 0 0 0 1px var(--color-accent, #6366f1);
}
.rao-card-unassigned { border-color: rgba(245,158,11,0.35); }
.rao-card-unassigned:hover { border-color: rgba(245,158,11,0.6); }

.rao-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  background: linear-gradient(to right, color-mix(in oklab, var(--member-color, #64748b) 10%, transparent), transparent);
  border-bottom: 1px solid var(--color-border, #2c3038);
}
.rao-card-head:hover { background: linear-gradient(to right, color-mix(in oklab, var(--member-color, #64748b) 18%, transparent), transparent); }
.rao-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.rao-card-avatar-warn { background: rgba(245,158,11,0.2); color: #fcd34d; }
.rao-card-meta { min-width: 0; }
.rao-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #e6e8eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rao-card-sub {
  font-size: 11px;
  color: var(--color-text-muted, #8b92a0);
  margin-top: 1px;
}
.rao-card-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  max-width: 40%;
}
.rao-catchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c, #64748b) 18%, transparent);
  color: var(--c, #64748b);
  border: 1px solid color-mix(in oklab, var(--c, #64748b) 35%, transparent);
  white-space: nowrap;
}
.rao-catdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.rao-card-days {
  display: flex;
  flex-direction: column;
}
.rao-day {
  display: grid;
  grid-template-columns: 50px 30px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--color-text-primary, #e6e8eb);
  border-top: 1px solid var(--color-border, #2c3038);
  cursor: pointer;
  transition: background 120ms;
}
.rao-day:first-child { border-top: none; }
.rao-day:hover { background: rgba(255,255,255,0.03); }
.rao-day-today { background: rgba(99,102,241,0.06); }
.rao-day-today .rao-day-name { color: var(--color-accent, #6366f1); font-weight: 700; }
.rao-day-empty { cursor: default; opacity: 0.6; }
.rao-day-empty:hover { background: transparent; }
.rao-day-expanded { background: rgba(99,102,241,0.04); }
.rao-day-name {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted, #8b92a0);
}
.rao-day-today .rao-day-name { color: var(--color-accent, #6366f1); }
.rao-day-count {
  font-weight: 700;
  color: var(--color-text-primary, #e6e8eb);
  text-align: right;
}
.rao-day-mute { color: var(--color-text-muted, #8b92a0); grid-column: 2 / -1; text-align: left; }
.rao-day-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}
.rao-stopdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.rao-stopdot-more {
  font-size: 10px;
  color: var(--color-text-muted, #8b92a0);
  font-weight: 600;
  margin-left: 2px;
}
.rao-day-time {
  font-size: 11px;
  color: var(--color-text-muted, #8b92a0);
  white-space: nowrap;
}
.rao-day-load-yellow .rao-day-time { color: #fcd34d; }
.rao-day-load-red .rao-day-time { color: #fca5a5; }
.rao-day-caret {
  font-size: 10px;
  color: var(--color-text-muted, #8b92a0);
  transition: transform 120ms;
}
.rao-day-unassigned .rao-day-time { color: #fcd34d; }

.rao-day-details {
  background: var(--color-bg-tertiary, #22262e);
  border-top: 1px solid var(--color-border, #2c3038);
  padding: 10px 14px;
}
.rao-day-route {
  margin-bottom: 10px;
}
.rao-day-route:last-child { margin-bottom: 0; }
.rao-day-route-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-text-muted, #8b92a0);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rao-day-route-head strong { color: var(--color-text-primary, #e6e8eb); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12px; }
.rao-day-route-status {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.rao-day-route-active { background: rgba(99,102,241,0.18); color: #c7d2fe; }
.rao-day-route-done { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.rao-day-stop {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 12px;
  color: var(--color-text-primary, #e6e8eb);
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms;
}
.rao-day-stop:hover { background: rgba(255,255,255,0.04); }
.rao-day-stop-num {
  background: var(--color-bg-secondary, #151821);
  border: 1px solid var(--color-border, #2c3038);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted, #8b92a0);
}
.rao-day-stop-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rao-day-stop-cats {
  display: flex;
  gap: 3px;
  align-items: center;
}
.rao-stop-complete {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #4caf50 0%, #43a047 100%);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(76,175,80,0.28);
  transition: transform 160ms cubic-bezier(0.16,1,0.3,1), filter 160ms;
  flex: 0 0 auto;
}
.rao-stop-complete:hover { transform: translateY(-1px); filter: brightness(1.08); }
.rao-stop-complete:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.rao-day-stop-done { opacity: 0.45; }
.rao-day-stop-done:hover { opacity: 0.75; }
.rao-day-stop-done .rao-day-stop-name {
  text-decoration: line-through;
  text-decoration-color: rgba(76,175,80,0.55);
}
.rao-day-stop-done .rao-day-stop-num {
  background: rgba(76,175,80,0.2);
  border-color: rgba(76,175,80,0.5);
  color: #66bb6a;
}
.rao-stop-done-badge {
  margin-left: auto;
  color: #4caf50;
  font-size: 14px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: background 160ms;
  background: none;
  border: none;
}
.rao-stop-done-badge:hover {
  background: rgba(76,175,80,0.15);
}
.rao-day-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 4px 6px;
  font-size: 11px;
}
.rao-day-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.rao-day-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
  border-radius: 99px;
  transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rao-day-progress-text {
  color: #66bb6a;
  font-weight: 600;
  white-space: nowrap;
}

/* Legacy grid — kept but unused in new card layout */
.rao-grid {
  display: grid;
  grid-template-columns: 110px repeat(5, 1fr);
  gap: 1px;
  padding: 8px 12px 16px;
  background: transparent;
}
.rao-header-cell {
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rao-header-cell.rao-today {
  color: var(--color-accent, #5e81ac);
}
.rao-member-col { }

.rao-member-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  min-height: 44px;
  border-bottom: 1px solid var(--color-border, #1e2738);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.rao-member-cell:hover {
  background: var(--bg-secondary);
}
.rao-member-cell.rao-member-focused {
  background: color-mix(in srgb, var(--member-color) 15%, transparent);
}
.rao-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.rao-avatar-warn {
  background: var(--color-status-overdue, #dc2626) !important;
  font-size: 12px;
}
.rao-member-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rao-day-cell {
  padding: 4px;
  min-height: 44px;
  border-bottom: 1px solid var(--color-border, #1e2738);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.rao-day-cell.rao-today {
  background: rgba(94, 129, 172, 0.06);
}
.rao-empty-cell {
  justify-content: center;
  align-items: center;
}
.rao-no-route {
  color: var(--color-text-muted, #64748b);
  font-size: 11px;
  opacity: 0.4;
}

/* RAO: Route cells */
.rao-route-cell {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-bg-card, #1e293b);
  border-left: 3px solid var(--color-accent, #5e81ac);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.rao-route-cell:hover {
  background: var(--color-bg-hover, #334155);
  transform: translateY(-1px);
}
.rao-route-cell--idle {
  border-left-color: var(--color-accent, #5e81ac);
}
.rao-route-cell--active {
  border-left-color: var(--color-status-soon, #ffc107);
}
.rao-route-cell--done {
  border-left-color: var(--color-status-good, #4caf50);
}
.rao-route-cell--unassigned {
  border-left-color: var(--color-status-overdue, #dc2626);
  background: rgba(220, 38, 38, 0.08);
}
.rao-route-cell--unassigned:hover {
  background: rgba(220, 38, 38, 0.15);
}

.rao-route-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rao-route-meta {
  font-size: 10px;
  color: var(--color-text-muted, #64748b);
}

/* RAO: Progress bar */
.rao-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.rao-progress-fill {
  height: 100%;
  background: var(--color-status-soon, #ffc107);
  border-radius: 2px;
  transition: width 0.3s;
}

/* Active route pulse */
.rao-pulse {
  animation: raoPulse 2s ease-in-out infinite;
}
@keyframes raoPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent); }
}

/* RAO: Expanded stop list */
.rao-stop-list {
  margin-top: 6px;
  border-top: 1px solid var(--color-border, #1e2738);
  padding-top: 4px;
}
.rao-stop-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 10px;
  color: var(--color-text-secondary, #94a3b8);
}
.rao-stop-num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg-tertiary, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-muted, #64748b);
  flex-shrink: 0;
}
.rao-stop-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RAO: Unassigned row */
.rao-unassigned-row .rao-member-name {
  color: var(--color-status-overdue, #dc2626);
}

/* Workload heatmap */
.rao-load-green { background: color-mix(in srgb, #16a34a 12%, var(--bg-primary)); }
.rao-load-yellow { background: color-mix(in srgb, #ca8a04 15%, var(--bg-primary)); }
.rao-load-red { background: color-mix(in srgb, #dc2626 15%, var(--bg-primary)); }

/* Summary row */
.rao-summary-row {
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.1));
}
.rao-summary-row .rao-member-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.rao-summary-stops {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.rao-summary-time {
  font-size: 10px;
  color: var(--text-tertiary);
  display: block;
}

/* Solo admin CTA */
.rao-solo-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 12px 0 0;
  background: var(--bg-secondary, #1e293b);
  border: 1px dashed var(--color-border, rgba(255,255,255,0.12));
  border-radius: 10px;
}
.rao-solo-cta-icon {
  font-size: 22px;
  color: var(--color-primary, #3b82f6);
  flex-shrink: 0;
}
.rao-solo-cta-text {
  flex: 1;
  min-width: 0;
}
.rao-solo-cta-text strong {
  font-size: 13px;
  color: var(--text-primary);
}
.rao-solo-cta-text p {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 2px 0 0;
  line-height: 1.4;
}

/* Team map legend overlay */
#raoTeamLegend {
  position: absolute;
  bottom: 30px;
  left: 10px;
  background: var(--bg-primary, #0f172a);
  border: 1px solid var(--color-border, #1e2738);
  border-radius: 8px;
  padding: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: 140px;
}
.rao-legend-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px 4px;
  border-bottom: 1px solid var(--color-border, #1e2738);
  margin-bottom: 2px;
}
.rao-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-primary);
  transition: background 0.15s;
}
.rao-legend-item:hover { background: var(--bg-secondary); }
.rao-legend-item.rao-legend-focused { background: var(--bg-tertiary); font-weight: 600; }
.rao-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rao-legend-count { margin-left: auto; font-size: 10px; color: var(--text-tertiary); }

/* ========================================
   CUSTOMER NOTE POPOVER (cnp)
   ======================================== */
.cnp-popover {
  position: fixed;
  width: 300px;
  max-height: 420px;
  background: var(--color-bg-elevated, #1e293b);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 10000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cnpFadeIn 0.15s ease;
}
@keyframes cnpFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cnp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.cnp-title {
  font-size: 13px;
  color: var(--color-text-primary, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnp-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #64748b);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.cnp-close:hover { color: var(--color-text-primary); }
.cnp-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cnp-section {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
}
.cnp-section:last-child { border-bottom: none; }
.cnp-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cnp-section-label i { font-size: 9px; }
.cnp-note-text {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.cnp-task {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  color: var(--color-text-primary, #f1f5f9);
}
.cnp-task i { margin-top: 2px; flex-shrink: 0; }
.cnp-task-text { flex: 1; min-width: 0; line-height: 1.4; }
.cnp-assignee {
  font-size: 9px;
  font-weight: 600;
  background: var(--color-bg-tertiary, #0f172a);
  color: var(--color-text-muted, #64748b);
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cnp-log-entry {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  font-size: 11px;
}
.cnp-log-date {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-text-muted, #64748b);
  min-width: 40px;
}
.cnp-log-type {
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
  flex-shrink: 0;
}
.cnp-log-note {
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.cnp-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted, #64748b);
}
.cnp-empty i { margin-right: 4px; }
.cnp-loading {
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted, #64748b);
}

/* Quick-add section */
.cnp-add-section {
  padding: 8px 12px;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.cnp-add-btn {
  background: none;
  border: 1px dashed var(--color-border, rgba(255,255,255,0.15));
  color: var(--color-text-muted, #64748b);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.cnp-add-btn:hover {
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
}
.cnp-add-btn i { margin-right: 4px; }
.cnp-add-form { margin-top: 6px; }
.cnp-type-pills {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.cnp-type-pill {
  background: var(--color-bg-tertiary, #0f172a);
  border: 1px solid transparent;
  color: var(--color-text-muted, #64748b);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.cnp-type-pill:hover { border-color: var(--pill-color, #64748b); color: var(--pill-color); }
.cnp-type-pill.active {
  background: color-mix(in srgb, var(--pill-color, #3b82f6) 18%, var(--color-bg-tertiary, #0f172a));
  border-color: var(--pill-color, #3b82f6);
  color: var(--pill-color, #3b82f6);
}
.cnp-input-row {
  display: flex;
  gap: 4px;
}
.cnp-input {
  flex: 1;
  background: var(--color-bg-tertiary, #0f172a);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  color: var(--color-text-primary, #f1f5f9);
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 5px;
  outline: none;
  min-width: 0;
}
.cnp-input:focus { border-color: var(--color-primary, #3b82f6); }
.cnp-save-btn {
  background: var(--color-primary, #3b82f6);
  border: none;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.cnp-save-btn:hover { opacity: 0.85; }

/* Clickable stops */
.cnp-clickable { cursor: pointer; }
.rao-stop-item.cnp-clickable { border-radius: 4px; padding: 2px 4px; margin: 0 -4px; }
.rao-stop-item.cnp-clickable:hover { background: var(--color-bg-hover, rgba(255,255,255,0.05)); }
.cnp-note-indicator {
  font-size: 9px;
  opacity: 0.45;
  margin-left: auto;
  color: var(--color-warning, #f59e0b);
  flex-shrink: 0;
}

/* Weekplan clickable names */
.wp-item-name .cnp-clickable:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Mobile bottom sheet */
.cnp-popover.cnp-mobile {
  position: fixed;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100%;
  max-height: 60vh;
  border-radius: 16px 16px 0 0;
  animation: cnpSlideUp 0.2s ease;
}
@keyframes cnpSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ---- Contact log entries ---- */
.to-log-entry {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.to-log-entry:last-child {
  border-bottom: none;
}
.to-log-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-accent, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.to-log-content {
  flex: 1;
  min-width: 0;
}
.to-log-date {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 2px;
}
.to-log-text {
  font-size: 13px;
  color: var(--color-text-primary, #e2e8f0);
  line-height: 1.4;
}
.to-log-by {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  margin-top: 2px;
}

/* ============================================
   WOW-FACTOR: Skeleton Shimmer Loaders
   ============================================ */
.skeleton {
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 25%, var(--color-bg-hover) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  width: 80%;
}
.skeleton-line.short { width: 50%; }
.skeleton-line.xs { width: 30%; }
.skeleton-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-card {
  height: 72px;
  border-radius: 8px;
}
.skeleton-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.skeleton-stat-card .skeleton-circle {
  width: 40px;
  height: 40px;
}
.skeleton-stat-card .skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}
.skeleton-list-item .skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================
   WOW-FACTOR: Staggered List Animations
   ============================================ */
@keyframes listItemEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger-item {
  animation: listItemEnter 0.3s ease-out forwards;
  opacity: 0;
  animation-delay: calc(var(--stagger-index, 0) * 40ms);
}
@media (prefers-reduced-motion: reduce) {
  .stagger-item { animation: none; opacity: 1; }
}

/* ============================================
   WOW-FACTOR: Tab Transition Choreography
   ============================================ */
@keyframes tabExit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes tabEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-pane.tab-exit {
  animation: tabExit 100ms ease-in forwards;
  will-change: transform, opacity;
}
.tab-pane.tab-enter {
  animation: tabEnter 200ms ease-out forwards;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .tab-pane.tab-exit,
  .tab-pane.tab-enter {
    animation: none;
  }
}

/* ============================================
   WOW-FACTOR: Glassmorphism
   ============================================ */
.glass {
  background: rgba(15, 20, 30, 0.7);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(94, 129, 172, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(15, 20, 30, 0.95); }
}
.notification-toast.glass {
  background: rgba(15, 20, 30, 0.7);
  border: 1px solid rgba(94, 129, 172, 0.2);
}

/* ============================================
   WOW-FACTOR: Morning Briefing Widget
   ============================================ */
.morning-brief {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  margin-bottom: 12px;
  overflow: hidden;
  animation: listItemEnter 0.4s ease-out forwards;
}
.morning-brief::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  padding: 1px;
  background: conic-gradient(from var(--brief-angle, 0deg), var(--color-accent), var(--color-status-good), var(--color-accent-muted), var(--color-accent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: briefBorderRotate 4s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}
@keyframes briefBorderRotate {
  to { --brief-angle: 360deg; }
}
@property --brief-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.morning-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.morning-brief-greeting {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}
.morning-brief-greeting i {
  margin-right: 6px;
  color: var(--color-accent);
}
.morning-brief-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  transition: color 0.2s;
}
.morning-brief-close:hover {
  color: var(--color-text-primary);
}
.morning-brief-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.morning-brief-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  padding: 6px 10px;
  border-radius: 6px;
}
.morning-brief-stat .stat-num {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}
.morning-brief-stat .trend-up {
  color: var(--color-status-good);
}
.morning-brief-stat .trend-down {
  color: var(--color-status-overdue);
}
.morning-brief-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}
.morning-brief-actions {
  display: flex;
  gap: 8px;
}
.morning-brief-actions .btn {
  font-size: var(--font-size-xs);
  padding: 5px 10px;
}
.morning-brief.collapsed {
  display: none;
}

/* ============================================
   WOW-FACTOR: Mobile Pull-to-Refresh
   ============================================ */
.pull-refresh-indicator {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.pull-refresh-indicator.visible {
  opacity: 1;
}
.pull-refresh-indicator svg {
  width: 36px;
  height: 36px;
}
.pull-refresh-indicator .pr-circle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
  transform-origin: center;
}
.pull-refresh-indicator.spinning .pr-circle {
  stroke-dashoffset: 25;
  animation: prSpin 0.8s linear infinite;
}
@keyframes prSpin {
  to { transform: rotate(360deg); }
}
.pull-refresh-indicator .pr-check {
  fill: none;
  stroke: var(--color-status-good);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
}
.pull-refresh-indicator.done .pr-circle {
  animation: none;
  stroke: var(--color-status-good);
  stroke-dashoffset: 0;
}
.pull-refresh-indicator.done .pr-check {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease 0.1s;
}
.pull-refreshing {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================
   WOW-FACTOR: Marker Ripple on Hover
   ============================================ */
.custom-marker-with-label:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: var(--marker-status-color, rgba(94, 129, 172, 0.2));
  opacity: 0.4;
  animation: markerRipple 600ms ease-out forwards;
  pointer-events: none;
  z-index: -1;
}
@keyframes markerRipple {
  to { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .custom-marker-with-label:hover::before { animation: none; display: none; }
}

/* ================================================
   MOBILE CHAT STYLES
   ================================================ */

.mf-chat-list-view,
.mf-chat-message-view,
.mf-chat-newdm-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mf-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #2e3440);
}

.mf-chat-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.mf-chat-header h3 i {
  margin-right: 8px;
  opacity: 0.7;
}

.mf-chat-conversations {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mf-chat-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #2e3440);
  cursor: pointer;
  transition: background 0.15s;
}

.mf-chat-conv-item:active {
  background: var(--color-surface-hover, #3b4252);
}

.mf-chat-conv-item.unread {
  background: var(--color-surface-hover, #3b4252);
}

.mf-chat-conv-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary, #5e81ac);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 14px;
}

.mf-chat-conv-info {
  flex: 1;
  min-width: 0;
}

.mf-chat-conv-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-chat-conv-preview {
  font-size: 12px;
  color: var(--color-text-muted, #8892a6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.mf-chat-conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.mf-chat-conv-time {
  font-size: 11px;
  color: var(--color-text-muted, #8892a6);
}

.mf-chat-conv-unread {
  background: var(--color-primary, #5e81ac);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* Message view header */
.mf-chat-msg-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border, #2e3440);
  font-weight: 600;
  font-size: 15px;
}

/* Messages container */
.mf-chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mf-chat-date-sep {
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted, #8892a6);
  padding: 8px 0;
  font-weight: 600;
}

.mf-chat-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.mf-chat-msg.self {
  align-self: flex-end;
  background: var(--color-primary, #5e81ac);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.mf-chat-msg.other {
  align-self: flex-start;
  background: var(--color-surface-hover, #3b4252);
  border-bottom-left-radius: 4px;
}

.mf-chat-msg-sender {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary, #5e81ac);
  margin-bottom: 2px;
}

.mf-chat-msg-content {
  white-space: pre-wrap;
}

.mf-chat-msg-time {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 2px;
  text-align: right;
}

.mf-chat-msg.other .mf-chat-msg-time {
  text-align: left;
}

/* Typing indicator */
.mf-chat-typing {
  padding: 4px 16px 8px;
  font-size: 12px;
  color: var(--color-text-muted, #8892a6);
  font-style: italic;
}

/* Input area */
.mf-chat-input-area {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border, #2e3440);
  background: var(--color-surface, #2e3440);
}

.mf-chat-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border, #434c5e);
  background: var(--color-background, #242933);
  color: var(--color-text, #d8dee9);
  font-size: 16px; /* Prevents iOS auto-zoom */
  outline: none;
}

.mf-chat-input:focus {
  border-color: var(--color-primary, #5e81ac);
}

.mf-chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary, #5e81ac);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mf-chat-send-btn:active {
  transform: scale(0.95);
}

/* Load more */
.mf-chat-load-more {
  text-align: center;
  padding: 8px;
}

.mf-chat-load-more button {
  background: none;
  border: 1px solid var(--color-border, #434c5e);
  color: var(--color-primary, #5e81ac);
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
}

/* Team list (new DM) */
.mf-chat-team-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mf-chat-team-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #2e3440);
  cursor: pointer;
}

.mf-chat-team-item:active {
  background: var(--color-surface-hover, #3b4252);
}

.mf-chat-team-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary, #5e81ac);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.mf-chat-team-name {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

/* Tab badge */
.mf-tab-badge {
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translateX(12px);
  background: var(--color-error, #bf616a);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.mf-tab-btn {
  position: relative;
}

/* ================================================
   MOBILE CALENDAR STYLES
   ================================================ */

.mf-calendar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mf-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #2e3440);
}

.mf-cal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.mf-cal-header h3 i {
  margin-right: 8px;
  opacity: 0.7;
}

.mf-cal-date-header {
  position: sticky;
  top: 0;
  background: var(--color-background, #242933);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary, #5e81ac);
  border-bottom: 1px solid var(--color-border, #2e3440);
  text-transform: capitalize;
  z-index: 1;
}

.mf-cal-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #2e3440);
}

.mf-cal-card.completed {
  opacity: 0.6;
}

.mf-cal-card-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 50px;
  flex-shrink: 0;
}

.mf-cal-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #d8dee9);
}

.mf-cal-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mf-cal-status.planned {
  background: var(--color-primary, #5e81ac);
  color: #fff;
}

.mf-cal-status.done {
  background: var(--color-success, #a3be8c);
  color: #2e3440;
}

.mf-cal-card-info {
  flex: 1;
  min-width: 0;
}

.mf-cal-card-info h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-cal-desc {
  font-size: 12px;
  color: var(--color-text-muted, #8892a6);
  margin: 2px 0 0;
}

.mf-cal-address {
  font-size: 11px;
  color: var(--color-text-muted, #8892a6);
  margin: 2px 0 0;
}

.mf-cal-address i {
  margin-right: 4px;
  font-size: 10px;
}

.mf-cal-assigned {
  font-size: 11px;
  color: var(--color-text-muted, #8892a6);
  margin: 2px 0 0;
}

.mf-cal-assigned i {
  margin-right: 4px;
  font-size: 10px;
}

.mf-cal-card-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Textarea for new appointment sheet */
.mf-sheet-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #434c5e);
  background: var(--color-background, #242933);
  color: var(--color-text, #d8dee9);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 12px;
}

.mf-sheet-textarea:focus {
  outline: none;
  border-color: var(--color-primary, #5e81ac);
}

/* Mobile estimated time input */
.mf-stop-est,
.mf-next-est {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted, #8892a6);
  margin-top: 4px;
}

.mf-next-est {
  margin-bottom: 8px;
}

.mf-next-est i {
  font-size: 11px;
}

.mf-est-input {
  width: 52px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #434c5e);
  background: var(--color-background, #242933);
  color: var(--color-text, #d8dee9);
  font-size: 13px;
  text-align: center;
  -moz-appearance: textfield;
}

.mf-est-input::-webkit-inner-spin-button,
.mf-est-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mf-est-input:focus {
  outline: none;
  border-color: var(--color-primary, #5e81ac);
}

/* Mobile weekplan stop meta (technician + time) */
.mf-wp-stop-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--color-text-muted, #8892a6);
}

.mf-wp-stop-tech {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mf-wp-stop-tech i {
  font-size: 9px;
}

.mf-wp-stop-time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mf-wp-stop-time i {
  font-size: 9px;
}

.mf-wp-est-input {
  width: 42px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid var(--color-border, #434c5e);
  background: var(--color-background, #242933);
  color: var(--color-text, #d8dee9);
  font-size: 11px;
  text-align: center;
  -moz-appearance: textfield;
}

.mf-wp-est-input::-webkit-inner-spin-button,
.mf-wp-est-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mf-wp-est-input:focus {
  outline: none;
  border-color: var(--color-primary, #5e81ac);
}

/* Mobile presence badge on stop cards */
.mf-presence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ================================================
   MOBILE SUPPORT CHAT STYLES
   ================================================ */

.mf-support-list-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mf-support-message-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mf-support-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.mf-support-topics {
  padding: 16px;
  border-bottom: 1px solid var(--color-border, #2e3440);
}

.mf-support-topics-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin: 0 0 12px 0;
}

.mf-support-topic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mf-support-topic-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--color-surface, #2e3440);
  border: 1px solid var(--color-border, #3b4252);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.mf-support-topic-btn i {
  font-size: 20px;
  color: #6366f1;
}

.mf-support-topic-btn:active {
  background: var(--color-border, #3b4252);
  border-color: #6366f1;
}

.mf-support-section {
  padding: 0 12px;
}

.mf-support-section-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 4px 6px;
}

.mf-support-closed {
  opacity: 0.6;
}

.mf-support-closed-badge {
  font-size: 11px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.mf-support-closed-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-surface, #2e3440);
  border-top: 1px solid var(--color-border, #3b4252);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

.mf-support-closed-notice .mf-btn-small {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #6366f1;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* Light theme */
[data-theme="light"] .mf-support-topics-title { color: rgba(0,0,0,0.6); }
[data-theme="light"] .mf-support-topic-btn { background: #f8f9fa; border-color: #e9ecef; color: #333; }
[data-theme="light"] .mf-support-topic-btn:active { background: #e9ecef; }
[data-theme="light"] .mf-support-section-title { color: rgba(0,0,0,0.4); }
[data-theme="light"] .mf-support-closed-badge { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.4); }
[data-theme="light"] .mf-support-closed-notice { background: #f8f9fa; border-color: #e9ecef; color: rgba(0,0,0,0.5); }

/* ========================================
   SUPPORT CHAT WIDGET
   ======================================== */

.support-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Inter', -apple-system, sans-serif;
}

.support-widget-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #6366f1;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s, background 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-widget-btn:hover { transform: scale(1.08); background: #4f46e5; }
.support-widget-btn.active { background: #4f46e5; transform: scale(1); }

.support-widget-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-primary, #0f0f0f);
}

.support-widget-panel {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 380px;
  height: 500px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: swPanelIn 0.2s ease-out;
}

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

.support-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #6366f1;
  color: #fff;
}

.support-widget-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.support-widget-header-info i { font-size: 18px; }

.support-widget-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  transition: color 0.15s;
}

.support-widget-close:hover { color: #fff; }

.support-widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-widget-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: rgba(255,255,255,0.5);
  gap: 8px;
  padding: 32px 16px;
}

.support-widget-welcome p { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0; }
.support-widget-welcome span { font-size: 13px; color: rgba(255,255,255,0.4); }

.sw-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 8px 0;
}

.sw-topic-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}

.sw-topic-btn:hover {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.3);
}

.sw-topic-btn i {
  color: #818cf8;
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.sw-back-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  margin-right: 4px;
}

.sw-back-btn:hover { color: #fff; }

.sw-ticket-section { padding: 0 16px 12px; }

.sw-ticket-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.sw-ticket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}

.sw-ticket-item:hover { background: rgba(255,255,255,0.06); }
.sw-ticket-item.closed { opacity: 0.5; }

.sw-ticket-info { display: flex; align-items: center; gap: 8px; min-width: 0; }

.sw-ticket-id {
  font-size: 12px;
  font-weight: 600;
  color: #818cf8;
  flex-shrink: 0;
}

.sw-ticket-subject {
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-ticket-item i.fa-chevron-right { color: rgba(255,255,255,0.2); font-size: 12px; }

.sw-ticket-closed-badge {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.support-widget-messages-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sw-msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sw-empty-msgs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

.sw-closed-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.sw-reopen-btn {
  background: rgba(99,102,241,0.15);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.sw-reopen-btn:hover { background: rgba(99,102,241,0.25); }

.sw-date-sep {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin: 8px 0 4px;
}

.sw-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

.sw-msg.self {
  align-self: flex-end;
  background: #6366f1;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.sw-msg.support {
  align-self: flex-start;
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #e2e8f0);
  border-bottom-left-radius: 4px;
}

.sw-msg-sender {
  font-size: 11px;
  font-weight: 600;
  color: #818cf8;
  margin-bottom: 2px;
}

.sw-msg-content { white-space: pre-wrap; }

.sw-msg-time {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-top: 3px;
}

.sw-msg.self .sw-msg-time { color: rgba(255,255,255,0.55); text-align: right; }

.support-widget-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
}

.support-widget-input input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-primary, #e2e8f0);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.support-widget-input input:focus { border-color: #6366f1; }
.support-widget-input input::placeholder { color: rgba(255,255,255,0.3); }

.support-widget-send {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
}

.support-widget-send:hover { background: #4f46e5; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .support-widget { bottom: 80px; right: 16px; }
  .support-widget-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 85vh;
    border-radius: 16px 16px 0 0;
  }
  .support-widget-btn { width: 50px; height: 50px; font-size: 20px; }
}

/* Support tab styles */
.support-ticket-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.support-ticket-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-welcome-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: rgba(255,255,255,0.5);
  gap: 8px;
  padding: 24px 8px;
}

.support-welcome-inline p {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

.support-message-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.support-message-view .sw-msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.support-inline-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.support-inline-input input {
  flex: 1;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--color-text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.support-inline-input input:focus {
  border-color: var(--color-accent);
}

.support-inline-input input::placeholder {
  color: var(--color-text-tertiary);
}

/* ============================================
   NPS Feedback Modal — premium glassmorphism
   ============================================ */
.nps-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 22, 0.55);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nps-modal-overlay.nps-visible {
  opacity: 1;
}

.nps-modal-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
              var(--color-bg-elevated, var(--bg-secondary));
  border: 1px solid var(--color-border, var(--border-color));
  border-radius: 18px;
  padding: 32px 32px 28px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nps-modal-overlay.nps-visible .nps-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.nps-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 160ms ease;
}
.nps-modal-close:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.04));
  border-color: var(--color-border, var(--border-color));
  color: var(--text-primary);
}
.nps-modal-close:focus-visible {
  outline: 2px solid var(--sky-accent, #5e81ac);
  outline-offset: 2px;
}

.nps-modal-body {
  color: var(--text-primary);
}

.nps-modal-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky-accent, #5e81ac);
  font-weight: 600;
  margin-bottom: 10px;
}

.nps-modal-title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
  padding-right: 32px;
}

.nps-modal-subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 22px;
}

.nps-score-scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}

.nps-score-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border, var(--border-color));
  background: var(--color-bg-input, var(--bg-tertiary));
  color: var(--text-primary);
  transition:
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.nps-score-btn:hover {
  transform: translateY(-2px);
  border-color: var(--sky-accent, #5e81ac);
}

.nps-score-btn:focus-visible {
  outline: 2px solid var(--sky-accent, #5e81ac);
  outline-offset: 2px;
}

/* Fargegradering: 0-6 rød/oransje, 7-8 gul, 9-10 grønn */
.nps-score-btn[data-score="0"].nps-selected,
.nps-score-btn[data-score="1"].nps-selected,
.nps-score-btn[data-score="2"].nps-selected,
.nps-score-btn[data-score="3"].nps-selected,
.nps-score-btn[data-score="4"].nps-selected,
.nps-score-btn[data-score="5"].nps-selected,
.nps-score-btn[data-score="6"].nps-selected {
  background: linear-gradient(135deg, #bf616a, #d08770);
  border-color: #bf616a;
  color: #fff;
  box-shadow: 0 6px 18px rgba(191, 97, 106, 0.35);
}

.nps-score-btn[data-score="7"].nps-selected,
.nps-score-btn[data-score="8"].nps-selected {
  background: linear-gradient(135deg, #ebcb8b, #d08770);
  border-color: #ebcb8b;
  color: #1f2230;
  box-shadow: 0 6px 18px rgba(235, 203, 139, 0.35);
}

.nps-score-btn[data-score="9"].nps-selected,
.nps-score-btn[data-score="10"].nps-selected {
  background: linear-gradient(135deg, #a3be8c, #81a1c1);
  border-color: #a3be8c;
  color: #1f2230;
  box-shadow: 0 6px 18px rgba(163, 190, 140, 0.35);
}

.nps-score-legend {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary, var(--text-secondary));
  margin: 0 4px 20px;
  letter-spacing: 0.02em;
}

.nps-followup {
  margin-top: 22px;
  animation: nps-fade-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes nps-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nps-followup-headline {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.nps-kommentar {
  width: 100%;
  min-height: 90px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border, var(--border-color));
  background: var(--color-bg-input, var(--bg-tertiary));
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.nps-kommentar:focus {
  outline: none;
  border-color: var(--sky-accent, #5e81ac);
  box-shadow: 0 0 0 3px rgba(94, 129, 172, 0.18);
}

.nps-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.nps-btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border, var(--border-color));
}

.nps-btn-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.nps-thanks {
  text-align: center;
  padding: 12px 8px;
}
.nps-thanks-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(163, 190, 140, 0.18), rgba(129, 161, 193, 0.18));
  color: #a3be8c;
}

@media (prefers-reduced-motion: reduce) {
  .nps-modal-overlay,
  .nps-modal-card,
  .nps-score-btn,
  .nps-followup {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 600px) {
  .nps-modal-card {
    padding: 28px 22px 22px;
    border-radius: 16px;
  }
  .nps-modal-title {
    font-size: 19px;
  }
  .nps-score-scale {
    gap: 5px;
  }
  .nps-score-btn {
    height: 40px;
    font-size: 13px;
  }
}

/* ============================================
   NPS Super-Admin Tab
   ============================================ */
.nps-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.nps-summary-card {
  background: var(--color-bg-elevated, var(--bg-secondary));
  border: 1px solid var(--color-border, var(--border-color));
  border-radius: 12px;
  padding: 16px 18px;
}

.nps-summary-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, var(--text-secondary));
  margin-bottom: 4px;
}

.nps-summary-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}

.nps-summary-value.nps-positive { color: #a3be8c; }
.nps-summary-value.nps-negative { color: #bf616a; }
.nps-summary-value.nps-neutral { color: #ebcb8b; }

.nps-summary-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.nps-distribution-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 14px;
  background: var(--color-bg-input, var(--bg-tertiary));
}
.nps-distribution-bar > div {
  height: 100%;
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nps-dist-detractor { background: #bf616a; }
.nps-dist-passive { background: #ebcb8b; }
.nps-dist-promoter { background: #a3be8c; }

.nps-distribution-legend {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.nps-distribution-legend > span > b {
  color: var(--text-primary);
  margin-left: 4px;
}

.nps-response-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.nps-response-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  background: var(--color-bg-elevated, var(--bg-secondary));
  border: 1px solid var(--color-border, var(--border-color));
  border-radius: 12px;
  padding: 14px 16px;
}

.nps-response-score {
  font-size: 18px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  min-width: 48px;
  text-align: center;
}
.nps-response-score.kategori-detractor {
  background: rgba(191, 97, 106, 0.15);
  color: #bf616a;
  border: 1px solid rgba(191, 97, 106, 0.3);
}
.nps-response-score.kategori-passive {
  background: rgba(235, 203, 139, 0.15);
  color: #d8a548;
  border: 1px solid rgba(235, 203, 139, 0.3);
}
.nps-response-score.kategori-promoter {
  background: rgba(163, 190, 140, 0.15);
  color: #a3be8c;
  border: 1px solid rgba(163, 190, 140, 0.3);
}

.nps-response-body {
  min-width: 0;
}

.nps-response-meta {
  font-size: 12px;
  color: var(--text-tertiary, var(--text-secondary));
  margin-bottom: 4px;
}

.nps-response-meta strong {
  color: var(--text-primary);
}

.nps-response-comment {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.nps-response-no-comment {
  color: var(--text-tertiary, var(--text-secondary));
  font-size: 13px;
  font-style: italic;
}

.nps-response-date {
  font-size: 12px;
  color: var(--text-tertiary, var(--text-secondary));
  white-space: nowrap;
}

.nps-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.nps-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.nps-filter-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border, var(--border-color));
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 160ms ease;
}
.nps-filter-pill:hover { color: var(--text-primary); }
.nps-filter-pill.active {
  background: var(--sky-accent, #5e81ac);
  border-color: var(--sky-accent, #5e81ac);
  color: #fff;
}

/* =============================================================================
   CONCIERGE IMPORT — Last opp og forsvinn
   ============================================================================= */

.concierge-import {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 8px;
}

.concierge-header {
  text-align: center;
  margin-bottom: 32px;
}

.concierge-import h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text-primary, #18181b);
  letter-spacing: -0.5px;
}

.concierge-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #71717a);
  margin: 0 auto;
  max-width: 480px;
}

.concierge-dropzone {
  position: relative;
  border: 2px dashed var(--color-border, #d4d4d8);
  border-radius: 14px;
  padding: 56px 32px;
  text-align: center;
  cursor: pointer;
  background: var(--color-bg-secondary, rgba(244, 244, 245, 0.5));
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 0 24px 0;
}

.concierge-dropzone:hover,
.concierge-dropzone:focus,
.concierge-dropzone.dragover {
  border-color: var(--sky-accent, #5e81ac);
  background: rgba(94, 129, 172, 0.06);
  outline: none;
  transform: translateY(-1px);
}

.concierge-dropzone.dragover {
  border-style: solid;
  transform: scale(1.01);
}

.concierge-dropzone-icon {
  font-size: 48px;
  color: var(--sky-accent, #5e81ac);
  margin-bottom: 20px;
  opacity: 0.9;
}

.concierge-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.concierge-dropzone-text strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #18181b);
}

.concierge-dropzone-text span {
  font-size: 14px;
  color: var(--text-secondary, #71717a);
}

.concierge-dropzone-meta {
  font-size: 12px;
  color: var(--text-tertiary, #a1a1aa);
}

.concierge-info-box {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(94, 129, 172, 0.06);
  border-left: 3px solid var(--sky-accent, #5e81ac);
  border-radius: 10px;
  margin: 0 0 24px 0;
}

.concierge-info-box-success {
  background: rgba(34, 197, 94, 0.06);
  border-left-color: #22c55e;
}

.concierge-info-box-warning {
  background: rgba(245, 158, 11, 0.08);
  border-left-color: #f59e0b;
}

.concierge-info-icon {
  font-size: 20px;
  color: var(--sky-accent, #5e81ac);
  flex-shrink: 0;
  margin-top: 2px;
}

.concierge-info-box-success .concierge-info-icon { color: #22c55e; }
.concierge-info-box-warning .concierge-info-icon { color: #f59e0b; }

.concierge-info-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #18181b);
  margin-bottom: 4px;
}

.concierge-info-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #71717a);
}

/* State screens (uploading, queued, completed, rejected, error) */
.concierge-state {
  text-align: center;
  padding: 32px 16px;
}

.concierge-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: rgba(94, 129, 172, 0.1);
  color: var(--sky-accent, #5e81ac);
}

.concierge-state-icon-success {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.concierge-state-icon-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.concierge-state-icon-error {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.concierge-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(94, 129, 172, 0.2);
  border-top-color: var(--sky-accent, #5e81ac);
  border-radius: 50%;
  animation: concierge-spin 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .concierge-spinner { animation-duration: 2s; }
  .concierge-dropzone { transition: none; }
}

.concierge-status-card {
  background: var(--color-bg-secondary, rgba(244, 244, 245, 0.5));
  border: 1px solid var(--color-border, #e4e4e7);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px auto;
  max-width: 420px;
}

.concierge-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}

.concierge-status-row + .concierge-status-row {
  border-top: 1px solid var(--color-border, #e4e4e7);
}

.concierge-status-label {
  color: var(--text-secondary, #71717a);
}

.concierge-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.concierge-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.concierge-btn-primary {
  background: var(--sky-accent, #5e81ac);
  color: #fff;
}

.concierge-btn-primary:hover {
  background: #4c6f9a;
  transform: translateY(-1px);
}

.concierge-btn-secondary {
  background: transparent;
  color: var(--text-secondary, #71717a);
  border-color: var(--color-border, #d4d4d8);
}

.concierge-btn-secondary:hover {
  color: var(--text-primary, #18181b);
  background: var(--color-bg-secondary, rgba(244, 244, 245, 0.5));
}


/* ============================================================================
   YEARPLAN — Premium årsoversikt
   Design-språk: glassmorphism, cubic-bezier spring, service-type fargekoding
   ============================================================================ */

:root {
  --yp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --yp-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --yp-ease-emphasis: cubic-bezier(0.2, 0.9, 0.3, 1);
  --yp-glass-bg: rgba(15, 23, 42, 0.55);
  --yp-glass-border: rgba(255, 255, 255, 0.08);
  --yp-glass-highlight: rgba(255, 255, 255, 0.04);
  --yp-text-dim: rgba(226, 232, 240, 0.55);
  --yp-text-muted: rgba(226, 232, 240, 0.72);
  --yp-accent: #60a5fa;
  --yp-danger: #f87171;
}

.yearplan-container {
  display: block;
  padding: 0;
  background: transparent;
}

.yp-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  min-height: 100%;
}

/* ---- Hero/Toolbar ---- */
.yp-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.06) 0%, transparent 100%);
  border-radius: 18px;
  border: 1px solid var(--yp-glass-border);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.yp-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Hindrer at meta krymper til ~0 (subtittel ble brutt ord-for-ord i smalt
     content-panel). Tvinger heller handlingsknappene til å bryte til ny linje. */
  min-width: min(100%, 240px);
  flex: 1 1 240px;
}
.yp-subtitle { text-wrap: balance; }

.yp-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yp-text-dim);
  display: inline-block;
}

.yp-year-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.yp-year {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.96);
}

.yp-year-nav {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms var(--yp-ease-spring);
}

.yp-year-nav:hover {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.4);
  color: rgba(255, 255, 255, 0.96);
  transform: translateY(-1px);
}

.yp-year-nav:active {
  transform: translateY(0) scale(0.96);
}

.yp-today-pill {
  margin-left: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-smooth);
}

.yp-today-pill:hover {
  border-color: rgba(96, 165, 250, 0.5);
  color: rgba(255, 255, 255, 0.95);
  background: rgba(96, 165, 250, 0.1);
}

.yp-subtitle {
  font-size: 0.92rem;
  color: var(--yp-text-muted);
  margin: 6px 0 0 0;
}

/* Primær handlings-knapp i hero */
.yp-action-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18) 0%, rgba(139, 92, 246, 0.16) 100%);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 260ms var(--yp-ease-spring);
  box-shadow: 0 4px 16px rgba(96, 165, 250, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.yp-action-primary:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.yp-action-primary:active {
  transform: translateY(0) scale(0.98);
}

.yp-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.yp-action-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 220ms var(--yp-ease-spring);
  white-space: nowrap;
}

.yp-action-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}

/* To-linjers handlingsknapper: tittel + forklarende undertekst (knapp-nivå-veiledning) */
.yp-action-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding-top: 9px;
  padding-bottom: 9px;
  line-height: 1.25;
}
.yp-action-title {
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.yp-action-hint {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.6;
  white-space: nowrap;
}
.yp-action-primary.yp-action-stack .yp-action-hint { opacity: 0.7; }

@media (max-width: 720px) {
  .yp-action-stack { align-items: center; }
}

/* ---- Auto-fordel-modal (Foreslå plan) ---- */
.ypf-modal { max-width: 640px; width: min(640px, 94vw); }

.ypf-kap-details {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.ypf-kap-details > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  user-select: none;
}
.ypf-kap-panel { padding: 4px 14px 14px; }
.ypf-kap-loading { color: rgba(255, 255, 255, 0.5); font-size: 0.84rem; }
.ypf-kap-head,
.ypf-kap-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1.2fr;
  gap: 8px;
  align-items: center;
}
.ypf-kap-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  padding: 6px 0;
}
.ypf-kap-row { padding: 5px 0; }
.ypf-kap-navn { font-size: 0.86rem; color: rgba(255, 255, 255, 0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ypf-kap-row .yp-input { padding: 7px 9px; font-size: 0.84rem; }
.ypf-eff-badge {
  font-size: 0.74rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.ypf-eff-badge.is-laert {
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
}

.ypf-sammendrag {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 0 14px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
.ypf-sammendrag strong { color: rgba(255, 255, 255, 0.96); font-size: 1.05rem; }
.ypf-sammendrag .is-warn strong { color: #fbbf24; }

.ypf-warn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.1);
}
.ypf-warn strong { color: #fdba74; font-size: 0.86rem; }
.ypf-warn span { color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; }
.ypf-warn.is-info {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.1);
}
.ypf-warn.is-info strong { color: #93c5fd; }

.ypf-uker-scroll {
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
}
.ypf-uke {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}
.ypf-uke-head {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 8px;
}
.ypf-uke-dato { font-weight: 400; color: rgba(255, 255, 255, 0.4); margin-left: 6px; font-size: 0.78rem; }
.ypf-uke-ant { float: right; font-weight: 400; color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; }
.ypf-belegg-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 3px 0 8px;
}
.ypf-klynger { display: flex; flex-wrap: wrap; gap: 6px; }
.ypf-klynge {
  font-size: 0.76rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.2);
  color: rgba(255, 255, 255, 0.82);
}
.ypf-klynge strong { color: #fff; }
.ypf-klynge.is-over {
  background: rgba(251, 113, 133, 0.14);
  border-color: rgba(251, 113, 133, 0.3);
  color: #fca5a5;
}
.ypf-belegg-navn {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ypf-belegg-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.ypf-belegg-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 320ms var(--yp-ease-spring);
}
.ypf-belegg-fill.is-ok { background: linear-gradient(90deg, #34d399, #10b981); }
.ypf-belegg-fill.is-hoy { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.ypf-belegg-fill.is-over { background: linear-gradient(90deg, #fb7185, #ef4444); }
.ypf-belegg-val { font-size: 0.74rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.ypf-belegg-val.is-hoy { color: #fcd34d; }
.ypf-belegg-val.is-over { color: #fca5a5; }

.ypf-empty {
  padding: 28px 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .ypf-belegg-fill { transition: none; }
}

/* ---- Måneds-kort grid ---- */
/* «Klar til booking»-banner (proaktivt heads-up i årsoversikten) */
.yp-klar-banner-slot:empty { display: none; }
.yp-klar-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(96, 165, 250, 0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: ypKlarIn 320ms var(--yp-ease-spring);
}
.yp-klar-banner-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.16);
  color: rgba(52, 211, 153, 0.95);
}
.yp-klar-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yp-klar-banner-text strong { font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); }
.yp-klar-banner-text span { font-size: 0.78rem; color: var(--yp-text-muted); }
.yp-klar-banner-weeks { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.yp-klar-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 200ms var(--yp-ease-spring);
}
.yp-klar-chip:hover { background: rgba(52, 211, 153, 0.22); transform: translateY(-1px); }
.yp-klar-chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.3);
  font-size: 0.72rem;
}
@keyframes ypKlarIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .yp-klar-banner { animation: none; } }
@media (max-width: 720px) {
  .yp-klar-banner { flex-wrap: wrap; }
  .yp-klar-banner-weeks { margin-left: 0; width: 100%; }
}

/* År-nivå Smart forslag-panel (planlegg måneder etter område) */
.yp-aar-forslag {
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.26);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.09) 0%, rgba(96, 165, 250, 0.06) 100%);
  animation: ypKlarIn 280ms var(--yp-ease-spring);
}
.yp-aar-forslag.is-collapsed { display: none; }
.yp-aar-forslag-loading,
.yp-aar-forslag-empty { font-size: 0.85rem; color: var(--yp-text-muted); padding: 4px 2px; }
.yp-aar-forslag-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.yp-aar-forslag-head strong { display: block; font-size: 0.98rem; color: rgba(255, 255, 255, 0.95); margin-top: 2px; }
.yp-aar-forslag-hint { margin: 6px 0 14px; font-size: 0.8rem; color: var(--yp-text-muted); }
.yp-aar-forslag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.yp-aar-omr-kort {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.yp-aar-omr-info { display: flex; flex-direction: column; gap: 2px; }
.yp-aar-omr-info strong { font-size: 0.92rem; color: rgba(255, 255, 255, 0.95); }
.yp-aar-omr-antall { font-size: 0.76rem; color: var(--yp-text-muted); }
.yp-aar-omr-mnder { display: flex; flex-wrap: wrap; gap: 5px; }
.yp-aar-omr-mnd {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.yp-aar-omr-btn {
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.16);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
}
.yp-aar-omr-btn:hover { background: rgba(167, 139, 250, 0.28); transform: translateY(-1px); }
/* Måned-velger-sheet (samle område i måned) */
.yp-aar-mnd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.yp-aar-mnd-pick {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
  transition: all 160ms var(--yp-ease-spring);
}
.yp-aar-mnd-pick:hover { background: rgba(167, 139, 250, 0.2); border-color: rgba(167, 139, 250, 0.4); }
@media (prefers-reduced-motion: reduce) { .yp-aar-forslag { animation: none; } }

.yp-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.yp-month-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--yp-glass-border);
  background:
    var(--yp-card-tint, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  cursor: pointer;
  transition: all 280ms var(--yp-ease-spring);
  overflow: hidden;
  isolation: isolate;
}

.yp-month-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 280ms var(--yp-ease-smooth);
  pointer-events: none;
  z-index: -1;
}

.yp-month-card:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(96, 165, 250, 0.1);
}

.yp-month-card:hover::before {
  opacity: 1;
}

.yp-month-card:active {
  transform: translateY(-1px) scale(0.99);
}

.yp-month-card:focus-visible {
  outline: 2px solid var(--yp-accent);
  outline-offset: 2px;
}

.yp-month-card.is-empty {
  opacity: 0.55;
}

.yp-month-card.is-empty:hover {
  opacity: 0.85;
}

.yp-month-card.is-current {
  border-color: rgba(96, 165, 250, 0.45);
  background:
    var(--yp-card-tint, rgba(96, 165, 250, 0.06)),
    linear-gradient(180deg, rgba(96, 165, 250, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.yp-month-card.is-selected {
  border-color: rgba(96, 165, 250, 0.7);
  box-shadow: 0 12px 36px rgba(96, 165, 250, 0.22), 0 0 0 1px rgba(96, 165, 250, 0.4);
}

.yp-month-card.is-selected::before {
  opacity: 1;
}

.yp-month-card.yp-skeleton .yp-skeleton-line {
  display: inline-block;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: yp-skeleton-shimmer 1.4s linear infinite;
}

@keyframes yp-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.yp-month-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yp-month-name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  color: var(--yp-text-muted);
}

.yp-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yp-accent);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
  animation: yp-now-pulse 2.4s ease-in-out infinite;
}

@keyframes yp-now-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.28); }
}

.yp-month-count-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.yp-month-count {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
}

.yp-month-count-label {
  font-size: 0.82rem;
  color: var(--yp-text-dim);
}

.yp-month-done {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.12);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.22);
}

/* Service-type stacked bar */
.yp-month-bar {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  gap: 2px;
}

.yp-bar-seg {
  display: block;
  height: 100%;
  transition: filter 200ms var(--yp-ease-smooth);
}

.yp-month-card:hover .yp-bar-seg {
  filter: brightness(1.15);
}

.yp-bar-empty {
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
}

/* Kapasitet-indikator: timer planlagt vs teamets månedskapasitet (overbooking) */
.yp-month-cap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.yp-month-cap-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.yp-month-cap-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 360ms var(--yp-ease-smooth);
}
.yp-month-cap-label {
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.yp-month-cap.is-ok .yp-month-cap-fill { background: rgba(52, 211, 153, 0.85); }
.yp-month-cap.is-ok .yp-month-cap-label { color: rgba(52, 211, 153, 0.9); }
.yp-month-cap.is-near .yp-month-cap-fill { background: rgba(250, 204, 21, 0.9); }
.yp-month-cap.is-near .yp-month-cap-label { color: rgba(250, 204, 21, 0.95); }
.yp-month-cap.is-over .yp-month-cap-fill { background: rgba(248, 113, 113, 0.95); }
.yp-month-cap.is-over .yp-month-cap-label { color: rgba(248, 113, 113, 0.98); }

/* Tekniker-chips footer */
.yp-month-teks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.yp-tek-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.74rem;
}

.yp-tek-init {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tek-color, #64748b);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.yp-tek-count {
  color: var(--yp-text-muted);
  font-variant-numeric: tabular-nums;
}

.yp-tek-more {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  color: var(--yp-text-dim);
}

/* Område-chips på månedskort (poststed-grupper) — område-sentrisk årsoversikt */
.yp-month-areas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.yp-area-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 4px 3px 9px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  font-size: 0.74rem;
}
.yp-area-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  color: rgba(255, 255, 255, 0.86);
}
.yp-area-chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.66rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.yp-area-more {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  color: var(--yp-text-dim);
}

/* ---- Drawer (måneds-detalj) ---- */
.yp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  z-index: 1400;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 360ms var(--yp-ease-emphasis);
}

.yp-drawer.is-open {
  pointer-events: auto;
  transform: translateX(0);
}

.yp-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(8, 13, 25, 0.96) 100%);
  border-left: 1px solid var(--yp-glass-border);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}

.yp-drawer-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.yp-drawer-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
}

.yp-drawer-close:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
  transform: rotate(90deg);
}

.yp-drawer-title h2 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 4px 0 0 0;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.96);
}

.yp-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.yp-drawer-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 40px 0;
  justify-content: center;
  color: var(--yp-text-dim);
  font-size: 0.92rem;
}

.yp-spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--yp-accent);
  border-radius: 50%;
  animation: yp-spin 0.8s linear infinite;
  display: inline-block;
}

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

/* Filter-pills */
.yp-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.yp-filter-status {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.yp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: var(--yp-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-smooth);
}

.yp-pill:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
}

.yp-pill.is-active {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.45);
  color: rgba(255, 255, 255, 0.98);
}

.yp-pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pill-color, var(--yp-accent));
}

.yp-drawer-count {
  font-size: 0.78rem;
  color: var(--yp-text-dim);
  letter-spacing: 0.02em;
}

/* Row-list */
.yp-row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yp-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  transition: all 200ms var(--yp-ease-spring);
}

.yp-row:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(2px);
}

.yp-row-stripe {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--yp-accent);
}

.yp-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.yp-row-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yp-row-line1 strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.yp-row-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.yp-row-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--yp-text-dim);
}

.yp-row-st {
  color: var(--yp-text-muted);
}

.yp-row-sep {
  opacity: 0.4;
}

.yp-row-tek {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.yp-tek-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tek-color, #64748b);
}

.yp-row-addr {
  color: var(--yp-text-dim);
}

.yp-row-tools {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

.yp-tool {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
}

.yp-tool:hover {
  border-color: rgba(96, 165, 250, 0.45);
  color: rgba(255, 255, 255, 0.95);
  background: rgba(96, 165, 250, 0.1);
  transform: translateY(-1px);
}

.yp-tool-danger:hover {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
}

/* Status-farger */
.yp-status-planlagt {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.25);
}

.yp-status-konkretisert {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.yp-status-utfort {
  background: rgba(74, 222, 128, 0.15);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.yp-status-hoppet {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Empty/error states */
.yp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--yp-text-dim);
  font-size: 0.92rem;
}

.yp-error {
  padding: 24px;
  text-align: center;
  color: var(--yp-danger);
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.18);
  border-radius: 12px;
}

/* ============================================
   SHEETS, MODALS, CONFIRM-DIALOGS
   ============================================ */
.yp-sheet-overlay,
.yp-modal-overlay,
.yp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 240ms var(--yp-ease-smooth);
}

.yp-sheet-overlay.is-open,
.yp-modal-overlay.is-open,
.yp-confirm-overlay.is-open {
  opacity: 1;
}

/* Bottom sheet (flytt-velger) */
.yp-sheet-overlay {
  align-items: flex-end;
  justify-content: center;
}

.yp-sheet {
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(8, 13, 25, 0.98) 100%);
  border: 1px solid var(--yp-glass-border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform 360ms var(--yp-ease-spring);
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.55);
}

.yp-sheet-overlay.is-open .yp-sheet {
  transform: translateY(0);
}

.yp-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  margin: 12px auto 4px;
}

.yp-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 24px 16px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.yp-sheet-head h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 4px 0 0 0;
  color: rgba(255, 255, 255, 0.96);
}

.yp-sheet-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
}

.yp-sheet-close:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.yp-sheet-body {
  padding: 18px 24px 24px;
  overflow-y: auto;
}

/* Måneds-grid i flytt-sheet */
.yp-month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 480px) {
  .yp-month-picker-grid { grid-template-columns: repeat(2, 1fr); }
}

.yp-month-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: all 220ms var(--yp-ease-spring);
  position: relative;
  overflow: hidden;
}

.yp-month-pick:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.1);
  transform: translateY(-2px);
}

.yp-month-pick:active {
  transform: translateY(0) scale(0.97);
}

.yp-month-pick.is-current {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.55);
}

.yp-month-pick.is-loading {
  pointer-events: none;
  opacity: 0.5;
}

.yp-month-pick-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.2;
}

.yp-month-pick-year {
  font-size: 0.7rem;
  color: var(--yp-text-dim);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Premium modal (auto-generer) */
.yp-modal {
  width: min(480px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(8, 13, 25, 0.98) 100%);
  border: 1px solid var(--yp-glass-border);
  border-radius: 20px;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  display: flex;
  flex-direction: column;
  transform: translateY(10px) scale(0.96);
  opacity: 0;
  transition: transform 280ms var(--yp-ease-spring), opacity 240ms var(--yp-ease-smooth);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55);
}

.yp-modal-overlay.is-open .yp-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.yp-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.yp-modal-head > div:first-child {
  flex: 1;
  min-width: 0;
}

.yp-modal-head h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 4px 0 0 0;
  color: rgba(255, 255, 255, 0.96);
}

.yp-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
}

.yp-modal-close:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.yp-modal-body {
  padding: 22px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.yp-modal-intro {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--yp-text-muted);
}

.yp-modal-intro strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

/* Forklarende tom-tilstand i auto-generer-modalen (hvorfor 0 rader) */
.yp-modal-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(250, 204, 21, 0.28);
  background: rgba(250, 204, 21, 0.08);
  animation: ypNoteIn 280ms var(--yp-ease-spring);
}
.yp-modal-note p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}
.yp-modal-note-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: rgba(250, 204, 21, 0.9);
}
@keyframes ypNoteIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .yp-modal-note { animation: none; }
}

.yp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .yp-field-row { grid-template-columns: 1fr; }
}

.yp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yp-field-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yp-text-dim);
}

.yp-input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.92rem;
  font-family: inherit;
  transition: all 180ms var(--yp-ease-smooth);
}

.yp-input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.06);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
}

/* Custom toggle */
.yp-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  cursor: pointer;
  transition: all 180ms var(--yp-ease-smooth);
}

.yp-toggle-row:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.yp-toggle-row > div {
  flex: 1;
  min-width: 0;
}

.yp-toggle-row strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

.yp-toggle-row span {
  display: block;
  font-size: 0.78rem;
  color: var(--yp-text-dim);
  margin-top: 2px;
}

.yp-toggle-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.yp-toggle-track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--yp-glass-border);
  position: relative;
  flex-shrink: 0;
  transition: all 220ms var(--yp-ease-spring);
}

.yp-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 240ms var(--yp-ease-spring);
}

.yp-toggle-check:checked ~ .yp-toggle-track {
  background: rgba(96, 165, 250, 0.55);
  border-color: rgba(96, 165, 250, 0.7);
}

.yp-toggle-check:checked ~ .yp-toggle-track .yp-toggle-thumb {
  transform: translateX(18px);
}

.yp-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 22px;
}

/* Buttons */
.yp-btn-ghost,
.yp-btn-primary,
.yp-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms var(--yp-ease-spring);
  border: 1px solid transparent;
}

.yp-btn-ghost {
  background: var(--yp-glass-highlight);
  border-color: var(--yp-glass-border);
  color: var(--yp-text-muted);
}

.yp-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
}

.yp-btn-primary {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.7) 0%, rgba(139, 92, 246, 0.7) 100%);
  color: white;
  border-color: rgba(96, 165, 250, 0.7);
  box-shadow: 0 4px 14px rgba(96, 165, 250, 0.28);
}

.yp-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.4);
}

.yp-btn-primary:disabled,
.yp-btn-primary.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.yp-btn-danger {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.4);
}

.yp-btn-danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.28);
  border-color: rgba(248, 113, 113, 0.6);
  color: #fef2f2;
  transform: translateY(-2px);
}

/* Confirm-dialog (slett-bekreftelse) */
.yp-confirm {
  width: min(380px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(8, 13, 25, 0.98) 100%);
  border: 1px solid var(--yp-glass-border);
  border-radius: 20px;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  padding: 28px 24px 22px;
  text-align: center;
  transform: translateY(10px) scale(0.96);
  opacity: 0;
  transition: transform 280ms var(--yp-ease-spring), opacity 240ms var(--yp-ease-smooth);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55);
}

.yp-confirm-overlay.is-open .yp-confirm {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.yp-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.yp-confirm h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.96);
}

.yp-confirm p {
  font-size: 0.9rem;
  margin: 0 0 4px 0;
  color: var(--yp-text-muted);
  line-height: 1.5;
}

.yp-confirm p strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.yp-confirm-hint {
  font-size: 0.78rem !important;
  color: var(--yp-text-dim) !important;
  margin-top: 6px !important;
}

.yp-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

.yp-confirm-actions .yp-btn-ghost,
.yp-confirm-actions .yp-btn-danger {
  flex: 1;
}

/* Reduser motion */
@media (prefers-reduced-motion: reduce) {
  .yp-month-card,
  .yp-drawer,
  .yp-sheet,
  .yp-modal,
  .yp-confirm,
  .yp-row,
  .yp-tool,
  .yp-pill,
  .yp-year-nav,
  .yp-today-pill,
  .yp-month-pick,
  .yp-drawer-close,
  .yp-sheet-close,
  .yp-modal-close,
  .yp-action-primary,
  .yp-btn-ghost,
  .yp-btn-primary,
  .yp-btn-danger {
    transition: none !important;
    animation: none !important;
  }

  .yp-now-dot {
    animation: none !important;
  }
}

/* Responsiv: smal viewport */
@media (max-width: 600px) {
  .yp-shell { padding: 16px; gap: 16px; }
  .yp-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  .yp-action-primary { justify-content: center; }
  .yp-year { font-size: 2rem; }
  .yp-month-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .yp-month-card { padding: 14px; gap: 10px; }
  .yp-month-count { font-size: 1.8rem; }
  .yp-drawer { width: 100vw; }
}

/* ============================================================================
   MOBILE YEARPLAN — Premium sheet-design
   ============================================================================ */

.mfyp-sheet {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  /* Solid base-farge under gradienten — uten denne er toppen (0.06 opacity)
     nesten gjennomsiktig og innholdet bak arket (rute-tab) lekker gjennom. */
  background-color: #080d19;
  background-image: radial-gradient(ellipse at top, rgba(96, 165, 250, 0.06) 0%, rgba(8, 13, 25, 1) 60%);
  transform: translateX(100%);
  transition: transform 360ms var(--yp-ease-emphasis);
}

.mfyp-sheet.is-open {
  transform: translateX(0);
}

.mfyp-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: max(env(safe-area-inset-top, 0px), 12px) 16px 14px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, transparent 100%);
  border-bottom: 1px solid var(--yp-glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mfyp-back-btn,
.mfyp-head-spacer {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.mfyp-back-btn {
  border-radius: 12px;
  /* Tydelig synlig lukke-/tilbake-knapp — de svake glass-variablene (4-8% hvit)
     gjorde knappen nesten usynlig på den mørke bakgrunnen. */
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 200ms var(--yp-ease-spring);
}

.mfyp-back-btn:active {
  transform: scale(0.92);
  background: rgba(96, 165, 250, 0.25);
  border-color: rgba(96, 165, 250, 0.5);
}

/* SVG-en ble klemt til 2px bredde av flexbox — tving full størrelse så X-en vises. */
.mfyp-back-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.mfyp-head-title {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.mfyp-eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yp-text-dim);
  display: block;
  margin-bottom: 2px;
}

.mfyp-head-title h1 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.96);
}

.mfyp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.mfyp-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
}

/* Topp-stripe med totaltall */
.mfyp-stat-strip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--yp-glass-border);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(139, 92, 246, 0.06) 100%);
  margin-bottom: 16px;
}

.mfyp-stat-num {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.96);
}

.mfyp-stat-label {
  font-size: 0.88rem;
  color: var(--yp-text-muted);
}

/* Måneds-kort liste (mobil) */
.mfyp-month-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mfyp-month-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  /* Sterkere definisjon enn de svake glass-variablene (4-8%) — ellers smelter
     kortene inn i bakgrunnen og lista ser flat/uferdig ut. */
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  position: relative;
  transition: all 240ms var(--yp-ease-spring);
  font-family: inherit;
  text-align: left;
}

/* Tomme måneder nedtones tydelig og krymper, så de fyller med data skiller seg ut. */
.mfyp-month-card.is-empty {
  padding: 10px 14px;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.05);
}

.mfyp-month-card:not(.is-empty):active {
  transform: scale(0.98);
  background: rgba(96, 165, 250, 0.1);
}

.mfyp-month-card.is-empty {
  opacity: 0.4;
  cursor: default;
}

.mfyp-month-card.is-current {
  border-color: rgba(96, 165, 250, 0.4);
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.mfyp-month-card-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  padding: 8px 0;
  border-right: 1px solid var(--yp-glass-border);
  flex-shrink: 0;
}

.mfyp-month-short {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.02em;
}

.mfyp-month-year {
  font-size: 0.7rem;
  color: var(--yp-text-dim);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.mfyp-month-card-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mfyp-month-card-count {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.95);
}

.mfyp-month-bar {
  display: flex;
  height: 4px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  gap: 1px;
}

.mfyp-bar-seg {
  display: block;
  height: 100%;
}

.mfyp-now-dot {
  position: absolute;
  top: 14px;
  right: 38px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yp-accent);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
  animation: yp-now-pulse 2.4s ease-in-out infinite;
}

.mfyp-chevron {
  color: var(--yp-text-dim);
  flex-shrink: 0;
}

/* Header for stops-view */
.mfyp-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mfyp-back-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: var(--yp-text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
}

.mfyp-back-row:active {
  transform: scale(0.96);
}

.mfyp-month-count {
  font-size: 0.82rem;
  color: var(--yp-text-dim);
}

/* Stopp-liste */
.mfyp-stop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mfyp-stop {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  transition: background 180ms var(--yp-ease-smooth);
}

.mfyp-stop-stripe {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--yp-accent);
}

.mfyp-stop-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mfyp-stop-line1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mfyp-stop-line1 strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mfyp-stop-line2 {
  font-size: 0.8rem;
  color: var(--yp-text-dim);
  line-height: 1.4;
}

.mfyp-stop-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.mfyp-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
}

.mfyp-action-btn:active {
  transform: scale(0.96);
  background: rgba(96, 165, 250, 0.1);
}

.mfyp-action-danger:active {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

/* Floating action button */
.mfyp-fab {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.95) 0%, rgba(139, 92, 246, 0.92) 100%);
  color: white;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 36px rgba(96, 165, 250, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: all 220ms var(--yp-ease-spring);
  z-index: 50;
}

.mfyp-fab:active {
  transform: translateX(-50%) scale(0.96);
}

/* Empty state */
.mfyp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 24px;
  text-align: center;
  color: var(--yp-text-dim);
}

.mfyp-empty h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.mfyp-empty p {
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}

/* Søkefelt */
.mfyp-search-wrap {
  position: relative;
}

.mfyp-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--yp-text-dim);
  pointer-events: none;
}

.mfyp-search-input {
  width: 100%;
  padding-left: 40px;
  font-size: 16px; /* unngå iOS zoom */
}

/* Add-list */
.mfyp-add-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mfyp-add-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
}

.mfyp-add-item:active {
  transform: scale(0.98);
  background: rgba(96, 165, 250, 0.1);
}

.mfyp-add-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mfyp-add-info strong {
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mfyp-add-info span {
  font-size: 0.78rem;
  color: var(--yp-text-dim);
}

.mfyp-add-item svg {
  color: var(--yp-text-dim);
  flex-shrink: 0;
}

/* ============================================================
   POSISJON-FORESPØRSEL — Request-approve location flow
   Mobile prompt (tekniker) + Desktop ask modal + Live marker
   ============================================================ */

/* ---- Mobile prompt (tekniker) ---- */
.pp-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.4,0,.2,1);
}
.pp-overlay.pp-open {
  opacity: 1;
  pointer-events: auto;
}
.pp-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(20,20,40,.72), rgba(0,0,0,.92));
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.pp-sheet {
  position: relative;
  width: min(100%, 480px);
  margin: 12px;
  margin-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1c 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 20px 18px 16px;
  color: #f4f4f8;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 8px 16px rgba(0,0,0,.4);
  transform: translateY(40px) scale(.96);
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1);
}
.pp-overlay.pp-open .pp-sheet {
  transform: translateY(0) scale(1);
}
.pp-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.04);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  overflow: hidden;
}
.pp-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #5b8def 0%, #8b5cf6 100%);
  transition: width 200ms linear;
}
.pp-header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.pp-avatar {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #5b8def, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(91,141,239,.4);
}
.pp-headtext { min-width: 0; }
.pp-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  margin-bottom: 2px;
}
.pp-sheet h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.pp-reason {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.pp-reason-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}
.pp-reason-body {
  font-size: 15px;
  line-height: 1.4;
}
.pp-reason-extra {
  color: rgba(255,255,255,.7);
  font-style: italic;
}
.pp-hint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(91,141,239,.08);
  border: 1px solid rgba(91,141,239,.18);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  margin-bottom: 16px;
}
.pp-hint i {
  color: #8aa9ef;
  margin-top: 2px;
  flex-shrink: 0;
}
.pp-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}
.pp-btn {
  appearance: none;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 120ms ease, box-shadow 180ms ease, background 180ms ease;
}
.pp-btn:active {
  transform: scale(.97);
}
.pp-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.pp-btn-deny {
  background: rgba(255,255,255,.06);
  color: #f4f4f8;
}
.pp-btn-deny:hover {
  background: rgba(255,255,255,.1);
}
.pp-btn-approve {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: #0a1f0a;
  box-shadow: 0 6px 18px rgba(34,197,94,.35);
}
.pp-btn-approve:hover:not(:disabled) {
  box-shadow: 0 10px 26px rgba(34,197,94,.45);
}
.pp-btn-secondary {
  background: rgba(255,255,255,.06);
  color: #f4f4f8;
}
.pp-btn-deny-confirm {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: #fff;
}
.pp-deny-panel {
  margin-top: 4px;
}
.pp-deny-title {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-bottom: 10px;
}
.pp-deny-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pp-deny-chip {
  appearance: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: #f4f4f8;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms;
}
.pp-deny-chip:hover { background: rgba(255,255,255,.09); }
.pp-deny-chip:active { transform: scale(.96); }
.pp-deny-chip-on {
  background: rgba(248,113,113,.18);
  border-color: rgba(248,113,113,.55);
}
.pp-deny-text {
  display: block;
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 10px 12px;
  color: #f4f4f8;
  font: inherit;
  margin-bottom: 12px;
}
.pp-deny-text:focus {
  outline: none;
  border-color: rgba(91,141,239,.6);
  background: rgba(255,255,255,.06);
}
.pp-deny-foot {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10px;
}
.pp-status {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  text-align: center;
}
.pp-status-info { background: rgba(91,141,239,.15); color: #c5d8ff; }
.pp-status-success { background: rgba(34,197,94,.18); color: #c5f0d4; }
.pp-status-error { background: rgba(239,68,68,.18); color: #ffd2d2; }
.pp-countdown {
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
  text-align: center;
}

/* Respekter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pp-overlay, .pp-sheet, .pp-btn, .pp-deny-chip { transition: none !important; }
  .pp-sheet { transform: none; }
}

/* ---- Desktop admin: ask-modal ---- */
.pa-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.pa-modal-overlay.pa-open {
  opacity: 1;
  pointer-events: auto;
}
.pa-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8,10,22,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pa-modal {
  position: relative;
  width: min(96vw, 480px);
  background: var(--panel-bg, #1a1d2e);
  color: var(--text, #f0f0f8);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  transform: translateY(8px) scale(.98);
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1);
}
.pa-modal-overlay.pa-open .pa-modal { transform: translateY(0) scale(1); }
.pa-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pa-modal-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  margin-bottom: 2px;
}
.pa-modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.pa-modal-body { display: flex; flex-direction: column; gap: 8px; }
.pa-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  margin-top: 6px;
}
.pa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pa-chip {
  appearance: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text, #f0f0f8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms;
}
.pa-chip:hover { background: rgba(255,255,255,.08); }
.pa-chip:active { transform: scale(.97); }
.pa-chip-on {
  background: rgba(91,141,239,.18);
  border-color: rgba(91,141,239,.55);
}
.pa-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  color: var(--text, #f0f0f8);
}
.pa-input:focus { outline: none; border-color: rgba(91,141,239,.55); background: rgba(255,255,255,.07); }
.pa-modal-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 12px;
  background: rgba(91,141,239,.08);
  border: 1px solid rgba(91,141,239,.18);
  border-radius: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  margin-top: 8px;
}
.pa-modal-note i {
  color: #8aa9ef;
  margin-top: 2px;
  flex-shrink: 0;
}
.pa-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ---- Pending toast (admin waits) ---- */
.pa-pending-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel-bg, #1a1d2e);
  border: 1px solid rgba(91,141,239,.35);
  border-radius: 14px;
  color: var(--text, #f0f0f8);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1);
  min-width: 280px;
}
.pa-pending-show { opacity: 1; transform: translateY(0); }
.pa-pending-timeout {
  border-color: rgba(245,158,11,.55);
}
.pa-pending-icon { color: #8aa9ef; font-size: 18px; }
.pa-pending-timeout .pa-pending-icon { color: #fbbf24; }
.pa-pending-text { display: flex; flex-direction: column; line-height: 1.25; }
.pa-pending-sub { font-size: 12px; color: rgba(255,255,255,.6); }
.pa-pending-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #8aa9ef;
}
.pa-pending-timeout .pa-pending-count { color: #fbbf24; }

/* ---- Live marker on Mapbox: tjenestebil med pulserende ring ---- */
.pa-live-marker {
  position: relative;
  width: 52px; height: 52px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 9999 !important;
}
.pa-live-vehicle {
  position: absolute;
  inset: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    0 0 0 1px rgba(34,197,94,.45);
  z-index: 2;
  font-size: 17px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.pa-live-vehicle i { transform: translateY(-1px); }
.pa-live-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,.55) 0%, rgba(34,197,94,0) 70%);
  animation: pa-live-pulse 1.8s ease-out infinite;
  z-index: 1;
}
@keyframes pa-live-pulse {
  0% { transform: scale(.55); opacity: .85; }
  100% { transform: scale(1.7); opacity: 0; }
}
.pa-live-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.pa-live-marker:hover .pa-live-vehicle {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.5),
    0 0 0 1px rgba(34,197,94,.6);
}
.pa-live-fading { opacity: .55; transition: opacity 1200ms ease; }
/* Tving Mapbox-marker-containeren over alle andre markører (cluster/kunde) */
.mapboxgl-marker:has(.pa-live-marker) { z-index: 9999 !important; }

/* Admin-modal misbruks-advarsel */
.pa-modal-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 12px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.32);
  border-radius: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  margin-top: 8px;
}
.pa-modal-warn i { color: #fbbf24; margin-top: 2px; flex-shrink: 0; }

/* ============================================================
   POSISJON-SELF (tekniker mobil)
   ============================================================ */
.ps-banner {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  max-width: 92vw;
  padding: 10px 14px 10px 16px;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(22,163,74,.4), 0 4px 12px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.34,1.56,.64,1);
}
.ps-banner-show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ps-banner-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.45);
  animation: ps-banner-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes ps-banner-pulse {
  0% { transform: scale(.96); opacity: .7; }
  100% { transform: scale(1.08); opacity: 0; }
}
.ps-banner-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.ps-banner-text { flex: 1; min-width: 0; line-height: 1.25; }
.ps-banner-text strong { display: block; font-size: 13px; font-weight: 600; }
.ps-banner-sub { font-size: 11.5px; color: rgba(255,255,255,.85); }
.ps-banner-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.ps-banner-revoke {
  appearance: none;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 160ms ease, transform 120ms;
}
.ps-banner-revoke:hover { background: rgba(255,255,255,.28); }
.ps-banner-revoke:active { transform: scale(.96); }
.ps-banner-revoke:disabled { opacity: .55; cursor: not-allowed; }

.ps-panikk-wrap {
  margin: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ps-panikk-btn {
  position: relative;
  appearance: none;
  border: none;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f59e0b 0%, #d97706 70%, #92400e 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 18px 38px rgba(146,64,14,.45), 0 4px 14px rgba(0,0,0,.35);
  transition: transform 120ms ease, box-shadow 200ms ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.ps-panikk-btn:active, .ps-panikk-active {
  transform: scale(.97);
  box-shadow: 0 8px 22px rgba(127,29,29,.45), 0 2px 8px rgba(0,0,0,.35);
}
.ps-panikk-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  pointer-events: none;
}
.ps-panikk-progress {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path 2000ms linear;
}
.ps-panikk-active .ps-panikk-progress { clip-path: inset(0 0 0 0); }
.ps-panikk-icon { font-size: 42px; }
.ps-panikk-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 0 20px;
  text-align: center;
  line-height: 1.3;
}
.ps-panikk-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}
.ps-panikk-hint strong { color: #fca5a5; }

/* 113 nødanrop — info-kort i Konto-fanen */
.ps-emergency-card-wrap { margin: 18px 12px 12px; }
.ps-emergency-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(220,38,38,.08), rgba(220,38,38,.04));
  border: 1px solid rgba(220,38,38,.32);
  border-radius: 16px;
  color: var(--text, #f0f0f8);
}
.ps-emergency-card-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 6px 14px rgba(220,38,38,.4);
}
.ps-emergency-card-text { flex: 1; min-width: 0; }
.ps-emergency-card-text strong { display: block; font-size: 14px; font-weight: 700; }
.ps-emergency-card-text p { margin: 2px 0 0; font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.4; }
.ps-emergency-card-btn {
  appearance: none;
  border: none;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(220,38,38,.35);
  flex-shrink: 0;
}
.ps-emergency-card-btn:active { transform: scale(.97); }

/* Flytende 113-knapp (alltid synlig) */
.ps-emergency-fab {
  position: fixed;
  bottom: max(90px, calc(env(safe-area-inset-bottom, 0px) + 90px));
  right: 16px;
  z-index: 9997;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(127,29,29,.5), 0 4px 10px rgba(0,0,0,.4);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .02em;
  transition: transform 120ms ease;
}
.ps-emergency-fab:active { transform: scale(.94); }
.ps-emergency-fab-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,.4);
  animation: ps-emergency-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes ps-emergency-pulse {
  0% { transform: scale(.95); opacity: .55; }
  100% { transform: scale(1.45); opacity: 0; }
}
.ps-emergency-fab-label { position: relative; z-index: 1; }

/* 2-trinns bekreftelse-overlay */
.ps-emergency-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.ps-emergency-overlay-show { opacity: 1; pointer-events: auto; }
.ps-emergency-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 10, 22, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ps-emergency-sheet {
  position: relative;
  width: min(94vw, 440px);
  background: linear-gradient(180deg, #1f2937, #111827);
  border: 1px solid rgba(220,38,38,.35);
  border-radius: 20px;
  padding: 24px 22px;
  color: #fff;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transform: scale(.96);
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
}
.ps-emergency-overlay-show .ps-emergency-sheet { transform: scale(1); }
.ps-emergency-sheet-icon {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: 0 8px 22px rgba(239,68,68,.45);
}
.ps-emergency-sheet h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.ps-emergency-sheet p { margin: 0 0 10px; font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.5; }
.ps-emergency-sheet-info {
  margin-top: 14px !important;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.6) !important;
}
.ps-emergency-sheet-info i { color: #8aa9ef; margin-right: 4px; }
.ps-emergency-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  margin-top: 18px;
}
.ps-emergency-cancel {
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ps-emergency-cancel:hover { background: rgba(255,255,255,.12); }
.ps-emergency-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(220,38,38,.4);
  color: rgba(255,255,255,.7);
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: not-allowed;
  pointer-events: none;
  transition: background 180ms ease, box-shadow 200ms ease;
}
.ps-emergency-call-ready {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 22px rgba(220,38,38,.5);
}
.ps-emergency-call-ready:active { transform: scale(.97); }

/* Skjul gamle panikk-elementer (i tilfelle de er på DOM ennå) */
.ps-panikk-wrap, .ps-panikk-btn, .ps-sos-btn, .ps-panikk-overlay { display: none !important; }

/* Flytende "be om hjelp"-knapp (alltid synlig på mobile-field) */
.ps-sos-btn {
  position: fixed;
  bottom: max(80px, calc(env(safe-area-inset-bottom, 0px) + 80px));
  right: 16px;
  z-index: 9997;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 30%, #f59e0b 0%, #d97706 70%, #92400e 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(146,64,14,.45), 0 4px 10px rgba(0,0,0,.4);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.ps-sos-btn:active, .ps-sos-btn.ps-panikk-active {
  transform: scale(.94);
}
.ps-sos-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  pointer-events: none;
  animation: ps-sos-pulse 2s ease-out infinite;
}
@keyframes ps-sos-pulse {
  0% { transform: scale(.95); opacity: .65; }
  100% { transform: scale(1.25); opacity: 0; }
}
.ps-sos-progress {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid #fff;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path 2000ms linear;
}
.ps-sos-btn.ps-panikk-active .ps-sos-progress { clip-path: inset(0 0 0 0); }
.ps-sos-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  z-index: 1;
}

.ps-panikk-toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 99999;
  padding: 12px 16px;
  background: #7f1d1d;
  color: #fff;
  border-radius: 12px;
  font-size: 13.5px;
  box-shadow: 0 16px 38px rgba(0,0,0,.5);
  max-width: 92vw;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1);
}
.ps-panikk-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.ps-panikk-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.ps-panikk-overlay-show { opacity: 1; pointer-events: auto; }
.ps-panikk-sheet {
  width: min(94vw, 440px);
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  border: 1px solid rgba(248,113,113,.35);
  border-radius: 20px;
  padding: 24px 22px;
  color: #fff;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.ps-panikk-sheet-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 20px rgba(239,68,68,.4);
}
.ps-panikk-sheet h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.ps-panikk-sheet p { margin: 0 0 14px; font-size: 14px; color: rgba(255,255,255,.75); }
.ps-panikk-countdown {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #fca5a5;
  margin-bottom: 14px;
}
.ps-panikk-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-panikk-cancel, .ps-panikk-close {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ps-panikk-cancel {
  background: rgba(255,255,255,.06);
  color: #fca5a5;
  border: 1px solid rgba(248,113,113,.4);
}
.ps-panikk-cancel:hover:not(:disabled) { background: rgba(248,113,113,.15); }
.ps-panikk-cancel:disabled { opacity: .55; cursor: not-allowed; }
.ps-panikk-close { background: #fff; color: #0f172a; }
.ps-panikk-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 18px;
  background: #ef4444;
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(239,68,68,.4);
}

.pp-misuse {
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,.5);
  text-align: center;
  line-height: 1.45;
}

/* ============================================================
   PANIKK-ADMIN — full-screen RØD alarm-modal
   ============================================================ */
.pk-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.pk-overlay.pk-open { opacity: 1; pointer-events: auto; }
.pk-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(127,29,29,.8), rgba(8,10,22,.95));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: pk-bg-flash 1.4s ease-in-out infinite alternate;
}
@keyframes pk-bg-flash {
  from { background: radial-gradient(ellipse at 50% 40%, rgba(127,29,29,.8), rgba(8,10,22,.95)); }
  to { background: radial-gradient(ellipse at 50% 40%, rgba(220,38,38,.7), rgba(20,15,30,.95)); }
}
.pk-sheet {
  position: relative;
  width: min(96vw, 520px);
  background: linear-gradient(180deg, #1f1010 0%, #14080a 100%);
  border: 2px solid rgba(248,113,113,.55);
  border-radius: 20px;
  padding: 24px;
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(248,113,113,.25);
  transform: scale(.96);
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
}
.pk-overlay.pk-open .pk-sheet { transform: scale(1); }
.pk-pulse {
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,68,68,.45), transparent 70%);
  animation: pk-pulse 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pk-pulse {
  0% { transform: translateX(-50%) scale(.6); opacity: .9; }
  100% { transform: translateX(-50%) scale(1.6); opacity: 0; }
}
.pk-head { padding-top: 30px; margin-bottom: 14px; position: relative; z-index: 2; }
.pk-eyebrow {
  font-size: 13px;
  letter-spacing: .18em;
  font-weight: 800;
  color: #fca5a5;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pk-eyebrow i { animation: pk-eyebrow-flash 0.8s ease-in-out infinite alternate; }
@keyframes pk-eyebrow-flash {
  from { color: #fca5a5; }
  to { color: #fff; }
}
.pk-name {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 4px;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(248,113,113,.5);
}
.pk-subtitle {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
}
.pk-sheet h2 { margin: 0 0 4px; font-size: 18px; font-weight: 500; }
.pk-time { font-size: 12.5px; color: rgba(255,255,255,.55); }
.pk-pos {
  margin: 14px 0;
  padding: 10px 14px;
  background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.3);
  border-radius: 12px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.pk-pos i { color: #fca5a5; margin-right: 6px; }
.pk-pos-missing { color: rgba(255,255,255,.65); font-family: inherit; }
.pk-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.pk-btn {
  flex: 1;
  min-width: 140px;
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 120ms ease, background 180ms ease;
}
.pk-btn:active { transform: scale(.96); }
.pk-btn-secondary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.pk-btn-secondary:hover { background: rgba(255,255,255,.14); }
.pk-btn-handled {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #0a1f0a;
  box-shadow: 0 8px 22px rgba(34,197,94,.4);
}
.pk-foot { margin-top: 14px; }
.pk-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 22px rgba(239,68,68,.4);
}
.pk-minimize {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  transition: background 160ms ease;
  z-index: 3;
}
.pk-minimize:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Minimert tilstand: skjul full-modal, vis liten pille i hjørnet */
.pk-overlay.pk-minimized .pk-backdrop,
.pk-overlay.pk-minimized .pk-sheet {
  display: none;
}
.pk-overlay.pk-minimized {
  position: fixed;
  inset: auto;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  right: 20px;
  width: auto;
  height: auto;
  pointer-events: none;
  background: transparent;
}
.pk-overlay.pk-minimized .pk-mini { pointer-events: auto; }
.pk-mini {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  color: #fff;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 18px 38px rgba(127,29,29,.5), 0 4px 14px rgba(0,0,0,.35);
  border: 1px solid rgba(248,113,113,.5);
  min-width: 280px;
  max-width: 92vw;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.pk-overlay.pk-minimized .pk-mini { display: flex; }
.pk-mini:hover { transform: translateY(-1px); transition: transform 180ms ease; }
.pk-mini-pulse {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,113,113,.55), transparent 70%);
  animation: pk-pulse 1.4s ease-out infinite;
  pointer-events: none;
}
.pk-mini-icon {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  z-index: 1;
}
.pk-mini-text { flex: 1; min-width: 0; line-height: 1.25; }
.pk-mini-text strong { display: block; font-size: 14px; font-weight: 700; }
.pk-mini-text span { font-size: 11.5px; color: rgba(255,255,255,.8); }
.pk-mini-handled {
  appearance: none;
  border: none;
  background: rgba(34,197,94,.85);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 160ms ease;
}
.pk-mini-handled:hover { background: #16a34a; }

/* Panikk-markør på Mapbox: stor rød pulserende SOS-markør med navn */
.pk-marker {
  position: relative;
  width: 64px; height: 64px;
  pointer-events: auto;
  cursor: pointer;
}
.pk-marker-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,68,68,.55) 0%, rgba(239,68,68,0) 70%);
  pointer-events: none;
}
.pk-marker-pulse-1 { animation: pk-marker-pulse 1.6s ease-out infinite; }
.pk-marker-pulse-2 { animation: pk-marker-pulse 1.6s ease-out infinite; animation-delay: .8s; }
@keyframes pk-marker-pulse {
  0% { transform: scale(.5); opacity: .9; }
  100% { transform: scale(2); opacity: 0; }
}
.pk-marker-icon {
  position: absolute;
  inset: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  font-size: 18px;
  box-shadow:
    0 6px 22px rgba(0,0,0,.55),
    0 0 0 1px rgba(239,68,68,.6);
  z-index: 2;
  animation: pk-marker-flash 0.7s ease-in-out infinite alternate;
}
@keyframes pk-marker-flash {
  from { background: linear-gradient(135deg, #ef4444, #b91c1c); }
  to { background: linear-gradient(135deg, #fca5a5, #ef4444); }
}
.pk-marker-name {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  background: #0f172a;
  color: #fff;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid rgba(248,113,113,.45);
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.mapboxgl-marker:has(.pk-marker) { z-index: 99999 !important; }

@media (prefers-reduced-motion: reduce) {
  .pk-backdrop, .pk-pulse, .ps-banner-pulse, .pk-mini-pulse,
  .pk-marker-pulse-1, .pk-marker-pulse-2, .pk-marker-icon { animation: none !important; }
}

/* ---- Team-overview kort: ask-knapp ---- */
.rao-card-ask-pos {
  appearance: none;
  background: rgba(91,141,239,.12);
  border: 1px solid rgba(91,141,239,.28);
  border-radius: 10px;
  padding: 7px 10px;
  color: #8aa9ef;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-left: auto;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms;
}
.rao-card-ask-pos:hover {
  background: rgba(91,141,239,.22);
  border-color: rgba(91,141,239,.55);
}
.rao-card-ask-pos:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .pa-pending-toast, .pa-modal, .rao-card-ask-pos { transition: none !important; }
  .pa-live-pulse { animation: none; }
}

/* ============================================================
   LIVE OVERVIEW — Premium tekniker-live-fane
   ============================================================ */
.lov-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
}
.lov-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}
.lov-header-left { min-width: 0; }
.lov-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  margin-bottom: 2px;
}
.lov-title { margin: 0; font-size: 20px; font-weight: 600; color: var(--text, #f0f0f8); }
.lov-header-right { display: flex; align-items: center; gap: 10px; }
.lov-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(91,141,239,.12);
  border: 1px solid rgba(91,141,239,.28);
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(255,255,255,.85);
}
.lov-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74,222,128,.7);
  animation: lov-blink 1.6s ease-in-out infinite;
}
@keyframes lov-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.lov-tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  background: rgba(91,141,239,.08);
  border: 1px solid rgba(91,141,239,.22);
  border-radius: 12px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  line-height: 1.4;
}
.lov-tip i { color: #8aa9ef; margin-top: 2px; flex-shrink: 0; }
.lov-side-head {
  padding: 6px 4px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.lov-side-title { font-weight: 600; font-size: 14px; }
.lov-side-meta { font-size: 12px; color: rgba(255,255,255,.55); }
.lov-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 2px;
}
.lov-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 200ms ease, background 200ms ease, transform 120ms;
}
.lov-card:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.lov-card-live {
  border-color: rgba(74,222,128,.35);
  background: rgba(74,222,128,.06);
}
.lov-card-done { opacity: .8; }
.lov-card-mute { opacity: .65; }
.lov-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lov-card-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.lov-card-avatar-mute { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.lov-card-meta { flex: 1; min-width: 0; }
.lov-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #f0f0f8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lov-card-status {
  font-size: 12px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.65);
}
.lov-card-status-live { color: #86efac; }
.lov-card-status-done { color: rgba(255,255,255,.55); }
.lov-card-status-idle { color: rgba(255,255,255,.65); }
.lov-card-status-mute { color: rgba(255,255,255,.4); }
.lov-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74,222,128,.6);
  animation: lov-blink 1.6s ease-in-out infinite;
}
.lov-card-pos {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
}
.lov-card-pos i { color: #8aa9ef; }
.lov-card-pos-empty i { color: rgba(255,255,255,.3); }
.lov-card-acc {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255,255,255,.45);
}
.lov-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lov-ask-btn {
  flex: 1;
  appearance: none;
  border: 1px solid rgba(91,141,239,.45);
  background: linear-gradient(135deg, rgba(91,141,239,.18), rgba(139,92,246,.18));
  color: #c5d8ff;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 180ms ease, transform 120ms;
}
.lov-ask-btn:hover {
  background: linear-gradient(135deg, rgba(91,141,239,.32), rgba(139,92,246,.32));
}
.lov-ask-btn:active { transform: scale(.97); }
.lov-focus-btn {
  appearance: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #8aa9ef;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 160ms ease;
}
.lov-focus-btn:hover { background: rgba(255,255,255,.12); }
.lov-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  padding: 8px 4px;
  margin-top: 6px;
}
.lov-empty {
  padding: 24px 16px;
  text-align: center;
  color: rgba(255,255,255,.5);
  font-size: 13px;
}

@media (max-width: 900px) {
  .lov-cards { padding: 4px 0; }
}

/* ============================================================================
   YEARPLAN — Måneds-detalj (kanban med uker × teknikere)
   ============================================================================ */

.yp-detail-shell {
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px;
  gap: 14px;
  overflow: hidden;
}

.yp-detail-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.05) 0%, transparent 100%);
  border-radius: 16px;
  border: 1px solid var(--yp-glass-border);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  flex-shrink: 0;
}

.yp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
  font-family: inherit;
}

.yp-back-btn:hover {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.1);
  color: white;
  transform: translateX(-2px);
}

.yp-back-btn:active {
  transform: translateX(-1px) scale(0.97);
}

.yp-detail-title {
  flex: 1;
  min-width: 0;
}

.yp-detail-title h1 {
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2px 0 0 0;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.96);
}

.yp-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yp-detail-filter {
  margin: 0;
}

.yp-detail-body {
  flex: 1;
  overflow: auto;
  padding: 4px 0 8px;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

.yp-detail-body::-webkit-scrollbar { height: 10px; width: 10px; }
.yp-detail-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 999px; }
.yp-detail-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }

.yp-detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 80px 0;
  color: var(--yp-text-dim);
}

/* ---- Kanban-grid ---- */
.yp-kanban {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: max-content;
}

.yp-kanban-row {
  display: grid;
  grid-template-columns: 180px repeat(var(--uke-count, 5), minmax(220px, 1fr)) 220px;
  gap: 8px;
  align-items: stretch;
}

.yp-kanban-header-row {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px 4px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.yp-kanban-corner {
  /* Hjørne over rad-headere */
}

.yp-kanban-col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--yp-glass-highlight);
  border: 1px solid var(--yp-glass-border);
}

.yp-kanban-col-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.02em;
}

.yp-kanban-col-range {
  font-size: 0.7rem;
  color: var(--yp-text-dim);
  letter-spacing: 0.02em;
}

.yp-kanban-col-unplaced {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.015);
}

.yp-kanban-col-unplaced .yp-kanban-col-num {
  color: var(--yp-text-muted);
}

/* Tekniker-rad */
.yp-kanban-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--yp-glass-highlight);
  border: 1px solid var(--yp-glass-border);
  position: sticky;
  left: 0;
  z-index: 5;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.yp-kanban-row-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tek-color, var(--yp-accent));
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tek-color, var(--yp-accent)) 15%, transparent);
}

.yp-kanban-row-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.yp-kanban-row-name strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yp-kanban-row-name span {
  font-size: 0.72rem;
  color: var(--yp-text-dim);
  margin-top: 1px;
}

/* Kanban-celler */
.yp-kanban-cell {
  min-height: 76px;
  padding: 8px;
  border-radius: 12px;
  border: 1px dashed transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.015);
  transition: all 160ms var(--yp-ease-smooth);
}

.yp-kanban-cell.is-over {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2);
}

.yp-kanban-cell-unplaced {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.yp-kanban-cell-empty {
  color: var(--yp-text-dim);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 16px 0;
  opacity: 0.5;
}

/* Kort */
.yp-kanban-card {
  display: flex;
  gap: 8px;
  padding: 8px 10px 8px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--yp-glass-border);
  transition: all 200ms var(--yp-ease-spring);
  cursor: grab;
  position: relative;
  user-select: none;
}

.yp-kanban-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--card-color, var(--yp-accent)) 40%, var(--yp-glass-border));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.yp-kanban-card:active {
  cursor: grabbing;
}

.yp-kanban-card.is-dragging {
  opacity: 0.4;
  transform: scale(0.96);
  cursor: grabbing;
}

.yp-kanban-card[draggable="false"],
.yp-kanban-card.is-konkretisert,
.yp-kanban-card.is-utfort,
.yp-kanban-card.is-hoppet {
  cursor: default;
  opacity: 0.85;
}

.yp-kanban-card-stripe {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--card-color, var(--yp-accent));
}

.yp-kanban-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yp-kanban-card-body strong {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

.yp-kanban-card-meta {
  font-size: 0.72rem;
  color: var(--yp-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yp-kanban-card .yp-row-status {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 0.66rem;
  padding: 1px 6px;
}

.yp-kanban-hint {
  margin: 12px 4px 0;
  font-size: 0.78rem;
  color: var(--yp-text-dim);
  text-align: center;
  font-style: italic;
}

/* Dynamiske uke-kolonner — JavaScript setter --uke-count via JS hvis ønskelig.
   For nå bruker vi auto-fit fallback. */
.yp-kanban-row[data-tek-key] {
  /* Beholdes som-er; bruker .yp-kanban-row grid-template-columns */
}

@media (max-width: 900px) {
  .yp-detail-shell { padding: 12px; }
  .yp-kanban-row {
    grid-template-columns: 140px repeat(var(--uke-count, 5), minmax(180px, 1fr)) 180px;
  }
}

/* Reduser motion */
@media (prefers-reduced-motion: reduce) {
  .yp-kanban-card,
  .yp-kanban-cell,
  .yp-back-btn {
    transition: none !important;
  }
}

/* ============================================
   MOBILE YEARPLAN — Uke-grupperte seksjoner
   ============================================ */

.mfyp-week-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mfyp-week-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mfyp-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08) 0%, rgba(96, 165, 250, 0.02) 100%);
  border: 1px solid rgba(96, 165, 250, 0.18);
}

.mfyp-week-section-unplaced .mfyp-week-head {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--yp-glass-border);
  border-style: dashed;
}

.mfyp-week-num {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  display: block;
  letter-spacing: -0.005em;
}

.mfyp-week-range {
  font-size: 0.75rem;
  color: var(--yp-text-dim);
  display: block;
  margin-top: 1px;
}

.mfyp-week-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}

.mfyp-week-empty {
  padding: 14px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--yp-text-dim);
  font-style: italic;
  border-radius: 12px;
  border: 1px dashed var(--yp-glass-border);
  background: rgba(255, 255, 255, 0.01);
}

/* Uke-velger i flytt-sheet */
.mfyp-week-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mfyp-week-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 200ms var(--yp-ease-spring);
}

.mfyp-week-pick:active {
  transform: scale(0.98);
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.45);
}

.mfyp-week-pick.is-current {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.12);
}

.mfyp-week-pick.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.mfyp-week-pick-num {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.mfyp-week-pick-range {
  font-size: 0.78rem;
  color: var(--yp-text-dim);
}

.mfyp-week-pick-unplaced {
  border-style: dashed;
  margin-top: 4px;
}

.mfyp-week-pick-month-toggle {
  margin-top: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: transparent;
  color: var(--yp-text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-smooth);
}

.mfyp-week-pick-month-toggle:active {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
}

.yp-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 24px;
  text-align: center;
  color: var(--yp-text-dim);
}

.yp-detail-empty h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.yp-detail-empty p {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  max-width: 420px;
}

/* ============================================================================
   YEARPLAN — Kort-meny, tildel-uke-knapp, velgere
   ============================================================================ */

/* Uke-header med "Tildel uka"-knapp */
.yp-kanban-col-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.yp-kanban-col-head {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.yp-uke-tildel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 180ms var(--yp-ease-spring);
  flex-shrink: 0;
}

.yp-uke-tildel-btn:hover {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(96, 165, 250, 0.6);
  transform: translateY(-1px);
}

.yp-uke-tildel-btn:active {
  transform: translateY(0) scale(0.96);
}

.yp-uke-tildel-btn svg {
  flex-shrink: 0;
}

/* Klikkbare kort */
.yp-kanban-card[role="button"] {
  cursor: pointer;
}

.yp-kanban-card[role="button"]:focus-visible {
  outline: 2px solid var(--yp-accent);
  outline-offset: 2px;
}

/* Action-sheet (kort-meny) */
.yp-action-sheet {
  max-width: 460px;
}

.yp-action-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yp-action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: all 200ms var(--yp-ease-spring);
}

.yp-action-item:hover {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.08);
  transform: translateX(2px);
}

.yp-action-item:active {
  transform: translateX(1px) scale(0.99);
}

.yp-action-item.yp-action-danger:hover {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  color: rgba(255, 200, 200, 0.95);
}

.yp-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--yp-glass-border);
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.yp-action-danger .yp-action-icon {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.2);
}

.yp-action-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yp-action-info strong {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.yp-action-info span {
  font-size: 0.78rem;
  color: var(--yp-text-dim);
}

.yp-action-chev {
  color: var(--yp-text-dim);
  flex-shrink: 0;
}

/* Uke-picker (i kort-meny → flytt) */
.yp-uke-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yp-uke-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 200ms var(--yp-ease-spring);
}

.yp-uke-pick:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.1);
}

.yp-uke-pick:active {
  transform: scale(0.98);
}

.yp-uke-pick.is-current {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.12);
}

.yp-uke-pick.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.yp-uke-pick-num {
  font-size: 0.92rem;
  font-weight: 600;
}

.yp-uke-pick-range {
  font-size: 0.76rem;
  color: var(--yp-text-dim);
  text-transform: capitalize;
}

.yp-uke-pick-unplaced {
  border-style: dashed;
  margin-top: 4px;
}

/* Tekniker-picker */
.yp-tek-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.yp-tek-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 200ms var(--yp-ease-spring);
}

.yp-tek-pick:hover {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.08);
}

.yp-tek-pick:active {
  transform: scale(0.98);
}

.yp-tek-pick.is-current {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.12);
}

.yp-tek-pick.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.yp-tek-pick-bullet {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.yp-tek-pick-navn {
  font-size: 0.94rem;
  font-weight: 500;
}

.yp-tek-pick-clear {
  margin-top: 6px;
  border-style: dashed;
}

.yp-sheet-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--yp-text-dim);
  margin-top: 4px;
}

/* ============================================================================
   YEARPLAN — Uke-stack (forenklet vertikal layout)
   Erstatter den gamle kanban-griden med uker stablet ovenfor hverandre
   ============================================================================ */

.yp-week-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: 24px;
}

.yp-week-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-radius: 16px;
  border: 1px solid var(--yp-glass-border);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  overflow: hidden;
  transition: border-color 200ms var(--yp-ease-smooth);
}

.yp-week-block:hover {
  border-color: rgba(96, 165, 250, 0.18);
}

.yp-week-block-unplaced {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.015);
}

.yp-week-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.06) 0%, transparent 100%);
  border-bottom: 1px solid var(--yp-glass-border);
}

.yp-week-block-unplaced .yp-week-block-head {
  background: rgba(255, 255, 255, 0.02);
}

.yp-week-block-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yp-week-block-num {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.96);
}

.yp-week-block-range {
  font-size: 0.78rem;
  color: var(--yp-text-dim);
  text-transform: capitalize;
}

.yp-week-block-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.yp-week-block-count {
  font-size: 0.82rem;
  color: var(--yp-text-muted);
  font-variant-numeric: tabular-nums;
}

.yp-week-block-done {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.12);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.22);
}

.yp-week-block-body {
  display: flex;
  flex-direction: column;
}

.yp-week-block-empty {
  padding: 18px 20px;
  font-size: 0.86rem;
  color: var(--yp-text-dim);
  font-style: italic;
  text-align: center;
}

/* Kontroll-rad (kort) */
.yp-stop-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms var(--yp-ease-smooth);
  width: 100%;
}

.yp-stop-row:first-of-type {
  border-top: none;
}

.yp-stop-row[role="button"]:hover {
  background: rgba(255, 255, 255, 0.025);
}

.yp-stop-row[role="button"]:active {
  background: rgba(96, 165, 250, 0.06);
}

.yp-stop-row[role="button"]:focus-visible {
  outline: 2px solid var(--yp-accent);
  outline-offset: -2px;
}

.yp-stop-row.is-konkretisert,
.yp-stop-row.is-utfort,
.yp-stop-row.is-hoppet {
  opacity: 0.75;
}

.yp-stop-stripe {
  width: 3px;
  height: 36px;
  border-radius: 2px;
  background: var(--card-color, var(--yp-accent));
  flex-shrink: 0;
}

.yp-stop-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yp-stop-info strong {
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yp-stop-meta {
  font-size: 0.78rem;
  color: var(--yp-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tekniker-badge til høyre på raden */
.yp-stop-tek {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--yp-glass-border);
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
  max-width: 200px;
}

.yp-stop-tek-init {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tek-color, #64748b);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.yp-stop-tek-navn {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tildel uka-knapp i header */
.yp-week-block-head .yp-uke-tildel-btn {
  padding: 6px 12px;
}

/* Responsiv: smal viewport */
@media (max-width: 640px) {
  .yp-week-stack {
    max-width: 100%;
    padding: 0 8px 24px;
  }

  .yp-week-block-head {
    padding: 12px 14px;
    flex-wrap: wrap;
  }

  .yp-stop-row {
    padding: 10px 14px;
    flex-wrap: wrap;
  }

  .yp-stop-tek-navn {
    display: none; /* bare init på smal viewport */
  }

  .yp-stop-tek {
    padding: 4px;
  }
}

/* ============================================
   YEARPLAN — Drag-and-drop styling
   ============================================ */

.yp-stop-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.25);
  cursor: grab;
  flex-shrink: 0;
  margin-right: -4px;
  transition: color 160ms var(--yp-ease-smooth);
}

.yp-stop-row:hover .yp-stop-grip {
  color: rgba(255, 255, 255, 0.55);
}

.yp-stop-row[draggable="true"] {
  cursor: grab;
}

.yp-stop-row[draggable="true"]:active {
  cursor: grabbing;
}

.yp-stop-row.is-dragging {
  opacity: 0.35;
  transform: scale(0.98);
}

.yp-stop-row.is-dragging .yp-stop-grip {
  cursor: grabbing;
}

/* Drop-zone highlight */
.yp-week-block-body[data-drop-uke] {
  transition: background 140ms var(--yp-ease-smooth), box-shadow 140ms var(--yp-ease-smooth);
  position: relative;
}

.yp-week-block-body.is-drop-over {
  background: rgba(96, 165, 250, 0.1);
  box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.55);
}

.yp-week-block-body.is-drop-over .yp-week-block-empty {
  color: var(--yp-accent);
  font-weight: 500;
  font-style: normal;
}

/* Dim alle uke-blokker som ikke er aktiv drop-target under dragging */
body.yp-is-dragging .yp-week-block-body:not(.is-drop-over) {
  opacity: 0.65;
}

body.yp-is-dragging .yp-week-block {
  border-color: rgba(255, 255, 255, 0.04);
}

body.yp-is-dragging .yp-week-block-body.is-drop-over {
  opacity: 1;
}

/* Cursor på body under drag */
body.yp-is-dragging {
  cursor: grabbing;
}

body.yp-is-dragging .yp-week-block-body[data-drop-uke] {
  cursor: copy;
}

/* Mobile: skjul grip-handle for å unngå konflikter (touch-drag finnes ikke i HTML5 DnD) */
@media (hover: none) {
  .yp-stop-grip {
    display: none;
  }
  .yp-stop-row[draggable="true"] {
    cursor: pointer;
  }
}

/* ============================================
   YEARPLAN — Inneværende uke-markering
   ============================================ */

.yp-week-block.is-current {
  border-color: rgba(96, 165, 250, 0.55);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.08) 0%, rgba(96, 165, 250, 0.02) 100%);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.25),
    0 8px 32px rgba(96, 165, 250, 0.12);
}

.yp-week-block.is-current .yp-week-block-head {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0.04) 100%);
  border-bottom-color: rgba(96, 165, 250, 0.25);
}

.yp-week-block.is-current .yp-week-block-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 1);
}

.yp-week-now-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yp-accent);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.22);
  animation: yp-now-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

.yp-week-now-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.32) 0%, rgba(139, 92, 246, 0.28) 100%);
  border: 1px solid rgba(96, 165, 250, 0.55);
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* Mobile yearplan — inneværende uke */
.mfyp-week-section.is-current .mfyp-week-head {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.22) 0%, rgba(96, 165, 250, 0.06) 100%);
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18);
}

.mfyp-now-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yp-accent);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
  animation: yp-now-pulse 2.4s ease-in-out infinite;
  margin-right: 6px;
  vertical-align: middle;
}

.mfyp-now-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.3) 0%, rgba(139, 92, 246, 0.26) 100%);
  border: 1px solid rgba(96, 165, 250, 0.5);
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

/* Åpne uka-knapp (mellom count og Tildel uka) */
.yp-uke-apne-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.32);
  background: rgba(74, 222, 128, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 180ms var(--yp-ease-spring);
  flex-shrink: 0;
}

.yp-uke-apne-btn:hover {
  background: rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.6);
  transform: translateY(-1px);
}

.yp-uke-apne-btn:active {
  transform: translateY(0) scale(0.96);
}

/* Angre konkretisering — varsel-aksent på knapp */
.yp-action-item.yp-action-warn {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.06);
}

.yp-action-item.yp-action-warn:hover {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.12);
}

.yp-action-item.yp-action-warn .yp-action-icon {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.22);
}

/* Konkretiserte kort viser ikke lenger dimmet — de er klikkbare */
.yp-stop-row.is-konkretisert {
  opacity: 0.92;
}

.yp-stop-row.is-konkretisert[role="button"]:hover {
  opacity: 1;
}

/* ============================================================================
   UKEPLAN-DETALJ (uke-detalj med dag-kolonner — bygger på Årsplan-data)
   ============================================================================ */

.ud-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.ud-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--yp-glass-border);
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.05) 0%, transparent 100%);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.ud-hero-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.ud-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ud-hero-meta h1 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.96);
}

.ud-hero-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ud-status {
  font-size: 0.85rem;
  color: var(--yp-text-muted);
}

/* Dag-stack: dagene stables vertikalt slik at alle er synlige under drag */
.ud-day-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ud-unplaced {
  margin-top: 14px;
  border-top: 1px dashed var(--yp-glass-border);
  padding-top: 14px;
}

.ud-day-col,
.ud-unplaced {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-radius: 14px;
  border: 1px solid var(--yp-glass-border);
  padding: 14px 18px;
  min-height: 90px;
}

.ud-day-col.is-today {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08) 0%, rgba(96, 165, 250, 0.02) 100%);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2);
}

.ud-day-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.ud-day-name {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
}

.ud-day-dato {
  font-size: 0.72rem;
  color: var(--yp-text-dim);
}

.ud-day-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ud-day-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 100px;
  padding: 4px 0;
  border-radius: 8px;
  transition: background 140ms var(--yp-ease-smooth), box-shadow 140ms var(--yp-ease-smooth);
}

.ud-day-body.is-drop-over {
  background: rgba(96, 165, 250, 0.1);
  box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.5);
}

.ud-day-empty {
  font-size: 0.78rem;
  color: var(--yp-text-dim);
  text-align: center;
  padding: 20px 4px;
  font-style: italic;
}

body.ud-is-dragging .ud-day-body:not(.is-drop-over) {
  opacity: 0.6;
}

/* Kort */
.ud-card {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--yp-glass-border);
  cursor: grab;
  text-align: left;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.92);
  transition: all 180ms var(--yp-ease-spring);
}

.ud-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--card-color, var(--yp-accent)) 45%, var(--yp-glass-border));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.ud-card:active {
  cursor: grabbing;
}

.ud-card.is-dragging {
  opacity: 0.35;
  transform: scale(0.97);
}

.ud-card.is-utfort {
  opacity: 0.6;
}

.ud-card-stripe {
  width: 3px;
  border-radius: 2px;
  background: var(--card-color, var(--yp-accent));
  flex-shrink: 0;
}

.ud-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ud-card-line1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ud-card-line1 strong {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.96);
}

.ud-card-time {
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #93c5fd;
  flex-shrink: 0;
}

.ud-card-time-empty {
  color: var(--yp-text-dim);
}

.ud-card-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--yp-text-dim);
}

.ud-card-tek {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ud-card-tek-init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tek-color, #64748b);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ud-card-st {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsiv: smal viewport */
@media (max-width: 900px) {
  .ud-shell {
    padding: 14px;
  }
  .ud-day-col,
  .ud-unplaced {
    padding: 10px 12px;
  }
}

/* Inline dag-velger i klikk-meny (Touch-friendly tap-to-move) */
.yp-dag-velger {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.yp-dag-velger-label {
  display: block;
  margin-bottom: 8px;
}

.yp-dag-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.yp-dag-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 4px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
  min-height: 56px;
}

.yp-dag-pick:hover,
.yp-dag-pick:active {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.1);
  transform: translateY(-1px);
}

.yp-dag-pick.is-current {
  border-color: rgba(96, 165, 250, 0.7);
  background: rgba(96, 165, 250, 0.18);
}

.yp-dag-pick-name {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.yp-dag-pick-dato {
  font-size: 0.7rem;
  color: var(--yp-text-dim);
  font-variant-numeric: tabular-nums;
}

.yp-dag-pick-fjern {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 8px;
  border-style: dashed;
  margin-top: 6px;
  min-height: 44px;
}

.yp-dag-pick-fjern .yp-dag-pick-name {
  font-size: 0.82rem;
}

.yp-dag-pick-fjern .yp-dag-pick-dato {
  font-size: 0.74rem;
}

@media (max-width: 480px) {
  .yp-dag-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .yp-dag-pick-fjern {
    grid-column: 1 / -1;
  }
}

/* ============================================================================
   UKEPLAN-DETALJ — Layout med sidebar for Smart forslag
   ============================================================================ */
.ud-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

.ud-main {
  min-width: 0;
}

.ud-sidebar {
  position: sticky;
  top: 16px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-radius: 16px;
  border: 1px solid var(--yp-glass-border);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  padding: 14px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  transition: all 280ms var(--yp-ease-spring);
}

.ud-sidebar.is-collapsed {
  width: 48px;
  padding: 14px 8px;
}

.ud-sidebar.is-collapsed #udForslagList,
.ud-sidebar.is-collapsed .yp-eyebrow {
  display: none;
}

.ud-sidebar.is-collapsed .ud-sidebar-toggle svg {
  transform: rotate(180deg);
}

.ud-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.ud-sidebar-toggle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: var(--yp-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms var(--yp-ease-spring);
}

.ud-sidebar-toggle:hover {
  background: rgba(96, 165, 250, 0.12);
  color: white;
}

#udForslagList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ud-forslag-empty {
  padding: 20px 8px;
  color: var(--yp-text-dim);
  font-size: 0.85rem;
}

.ud-forslag-empty-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.5;
}

.ud-forslag-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: rgba(147, 197, 253, 0.95);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-forslag-empty-action:hover {
  background: rgba(96, 165, 250, 0.2);
  transform: translateY(-1px);
}

.ud-forslag-empty-action:active {
  transform: translateY(0);
}

/* === Ukeplan sidebar — Områder med forfall === */
.ud-omraader-frist {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--yp-glass-highlight);
  border: 1px solid var(--yp-glass-border);
}

.ud-omraader-frist-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yp-text-dim);
  flex-shrink: 0;
}

.ud-omraader-frist-select {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.96);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.ud-omraader-frist-select option {
  background: #1f2937;
  color: rgba(255, 255, 255, 0.96);
}

.ud-omraader-empty {
  padding: 24px 12px;
  color: var(--yp-text-dim);
  font-size: 0.85rem;
  text-align: center;
}

.ud-omraader-empty-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  font-style: italic;
}

.ud-omr-kort {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--yp-glass-border);
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-omr-kort:hover {
  border-color: rgba(96, 165, 250, 0.35);
  transform: translateY(-1px);
}

.ud-omr-kort.is-utenfor {
  border-style: dashed;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.04);
}

.ud-omr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ud-omr-navn {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
}

.ud-omr-antall {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--yp-text-dim);
  font-variant-numeric: tabular-nums;
}

.ud-omr-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ud-omr-dager {
  font-size: 0.74rem;
  color: var(--yp-text-dim);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  letter-spacing: 0.02em;
}

.ud-omr-st-rad {
  display: flex;
  gap: 4px;
}

.ud-omr-st {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
}

.ud-omr-tek {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.18);
}

.ud-omr-tek-navn {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.ud-omr-tek-kilde {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

.ud-omr-tek-mangler {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  color: #fcd34d;
  font-size: 0.8rem;
  font-style: italic;
}

.ud-omr-tildel {
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: rgba(96, 165, 250, 0.18);
  color: rgba(255, 255, 255, 0.96);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-omr-tildel:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.3);
  transform: translateY(-1px);
}

.ud-omr-tildel:active:not(:disabled) {
  transform: translateY(0);
}

.ud-omr-tildel:disabled,
.ud-omr-tildel.is-loading {
  opacity: 0.6;
  cursor: progress;
}

/* === UKEPLAN MATRISE: tekniker × dag-grid === */
.ud-matrise {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--yp-glass-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--yp-glass-border);
}

.ud-matrise-rad {
  display: grid;
  grid-template-columns: 120px repeat(auto-fit, minmax(180px, 1fr));
  border-bottom: 1px solid var(--yp-glass-border);
}

.ud-matrise-rad:last-child {
  border-bottom: none;
}

.ud-matrise-rad.is-today {
  background: rgba(96, 165, 250, 0.04);
}

.ud-matrise-celle {
  padding: 10px;
  border-right: 1px solid var(--yp-glass-border);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ud-matrise-celle:last-child {
  border-right: none;
}

/* Hjørne-celle (topp venstre) */
.ud-matrise-hjorne {
  background: rgba(255,255,255,0.02);
  min-height: auto;
}

/* Tekniker-headere (topp-rad) */
.ud-matrise-head {
  background: rgba(255,255,255,0.04);
}

.ud-matrise-tek-head {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: auto;
  padding: 12px 10px;
  border-bottom: 2px solid transparent;
  border-bottom-color: var(--tek-color, transparent);
}

.ud-mat-tek-init {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tek-color, #64748b);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ud-mat-tek-navn {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.96);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dag-headere (venstre kolonne) */
.ud-matrise-dag-head {
  background: rgba(255,255,255,0.04);
  justify-content: center;
  min-height: auto;
  padding: 14px 10px;
}

.ud-mat-dag-navn {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ud-mat-dag-dato {
  font-size: 0.74rem;
  color: var(--yp-text-dim);
  font-variant-numeric: tabular-nums;
}

.ud-matrise-rad.is-today .ud-matrise-dag-head {
  background: rgba(96, 165, 250, 0.08);
}

/* Drop-celle (tekniker × dag) */
.ud-matrise-drop {
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-matrise-drop.is-drop-over {
  background: rgba(96, 165, 250, 0.14);
  outline: 2px dashed rgba(96, 165, 250, 0.55);
  outline-offset: -4px;
}

.ud-mat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 1.4rem;
  color: rgba(255,255,255,0.18);
  font-weight: 300;
  user-select: none;
  pointer-events: none;
}

.ud-matrise-drop:hover .ud-mat-empty {
  color: rgba(96, 165, 250, 0.5);
}

/* Sidebar — kundekort gruppert per poststed */
.ud-omr-gruppe {
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--yp-glass-border);
  overflow: hidden;
}

.ud-omr-gruppe > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.ud-omr-gruppe > summary::-webkit-details-marker {
  display: none;
}

.ud-omr-toggle {
  font-size: 0.8rem;
  color: var(--yp-text-dim);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-omr-gruppe[open] .ud-omr-toggle {
  transform: rotate(90deg);
}

.ud-omr-gruppe .ud-omr-navn {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.96);
}

.ud-omr-gruppe .ud-omr-antall {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--yp-text-dim);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-variant-numeric: tabular-nums;
}

.ud-omr-meta-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ud-omr-tek-pill {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6ee7b7;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
}

.ud-sidebar-kundeliste {
  padding: 4px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ud-sidebar-kunde {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  cursor: grab;
  transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1), border-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-sidebar-kunde:hover {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.25);
}

.ud-sidebar-kunde:active {
  cursor: grabbing;
}

.ud-sidebar-kunde.is-dragging {
  opacity: 0.4;
}

.ud-sidebar-kunde-drag {
  color: var(--yp-text-dim);
  font-size: 0.7rem;
  letter-spacing: -1px;
  flex-shrink: 0;
}

.ud-sidebar-kunde-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ud-sidebar-kunde-info strong {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255,255,255,0.96);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ud-sidebar-kunde-adresse {
  font-size: 0.74rem;
  color: var(--yp-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uplassert-rad (kompakt nederst) */
.ud-unplaced {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.05);
  border: 1px dashed rgba(245, 158, 11, 0.3);
}

.ud-unplaced-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ud-unplaced-head strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fcd34d;
}

/* Tidsestimater-fold (collapsed by default) */
.ud-instillinger-fold {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--yp-glass-border);
}

.ud-instillinger-fold > summary {
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yp-text-dim);
  padding: 4px 0;
  user-select: none;
  list-style: none;
}

.ud-instillinger-fold > summary::-webkit-details-marker {
  display: none;
}

.ud-instillinger-fold > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-instillinger-fold[open] > summary::before {
  transform: rotate(90deg);
}

.ud-instillinger-fold .ud-instillinger {
  margin-top: 12px;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ud-forslag-kort {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: rgba(255, 255, 255, 0.025);
  transition: all 200ms var(--yp-ease-spring);
}

.ud-forslag-kort:hover {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.05);
}

.ud-forslag-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ud-forslag-tittel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ud-forslag-tittel strong {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.96);
}

.ud-forslag-antall {
  font-size: 0.74rem;
  color: var(--yp-text-dim);
}

.ud-forslag-st-rad {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ud-forslag-st {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ud-forslag-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.ud-forslag-tid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ud-forslag-tid-label {
  font-size: 0.7rem;
  color: var(--yp-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ud-forslag-tid strong {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  font-variant-numeric: tabular-nums;
}

.ud-forslag-tid-detalj {
  font-size: 0.72rem;
  color: var(--yp-text-dim);
}

.ud-forslag-tek {
  font-size: 0.78rem;
  color: var(--yp-text-muted);
}

.ud-forslag-tek strong {
  color: rgba(255, 255, 255, 0.95);
}

.ud-forslag-tek-tom {
  color: var(--yp-text-dim);
  font-style: italic;
}

.ud-forslag-tildel {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.22) 0%, rgba(139, 92, 246, 0.18) 100%);
  color: rgba(255, 255, 255, 0.95);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms var(--yp-ease-spring);
}

.ud-forslag-tildel:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.65);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.32) 0%, rgba(139, 92, 246, 0.26) 100%);
}

.ud-forslag-tildel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsiv: stack sidebar under på smal viewport */
@media (max-width: 1100px) {
  .ud-layout {
    grid-template-columns: 1fr;
  }
  .ud-sidebar {
    position: static;
    max-height: none;
  }
}

/* Årsplan detail-layout (med sidebar) */
.yp-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.yp-detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.yp-detail-sidebar {
  position: relative;
  top: 0;
  overflow-y: auto;
}

@media (max-width: 1100px) {
  .yp-detail-layout {
    grid-template-columns: 1fr;
  }
}

/* Anbefaling-tekst i forslag-kort */
.ud-forslag-anbefaling {
  font-size: 0.78rem;
  color: var(--yp-text-muted);
}

.ud-forslag-anbefaling strong {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 600;
}

/* Fordel-sheet seksjoner */
.yp-fordel-seksjon {
  margin-bottom: 18px;
}

.yp-fordel-label {
  display: block;
  margin-bottom: 8px;
}

.yp-uker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

@media (max-width: 480px) {
  .yp-uker-grid { grid-template-columns: repeat(2, 1fr); }
}

.yp-uke-checkbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all 180ms var(--yp-ease-spring);
  position: relative;
}

.yp-uke-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.yp-uke-checkbox:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.08);
}

.yp-uke-checkbox.is-checked {
  border-color: rgba(96, 165, 250, 0.65);
  background: rgba(96, 165, 250, 0.18);
}

.yp-uke-checkbox.is-checked::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #93c5fd;
}

.yp-uke-checkbox-num {
  font-size: 0.85rem;
  font-weight: 600;
}

.yp-uke-checkbox-dato {
  font-size: 0.7rem;
  color: var(--yp-text-dim);
}

.yp-fordel-submit {
  width: 100%;
  padding: 12px;
  font-size: 0.92rem;
}

.yp-fordel-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--yp-glass-highlight);
  border-color: var(--yp-glass-border);
  color: var(--yp-text-dim);
}

/* Innstillinger-seksjon i forslag-sidebar */
.ud-instillinger {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--yp-glass-border);
}

.ud-inst-rad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ud-inst-felt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ud-inst-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yp-text-dim);
}

.ud-inst-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
  transition: border-color 160ms var(--yp-ease-smooth);
}

.ud-inst-input-wrap:focus-within {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.06);
}

.ud-inst-input-wrap input {
  width: 100%;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.96);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.ud-inst-input-wrap input::-webkit-inner-spin-button,
.ud-inst-input-wrap input::-webkit-outer-spin-button {
  opacity: 0.5;
}

.ud-inst-suffix {
  font-size: 0.75rem;
  color: var(--yp-text-dim);
  flex-shrink: 0;
}

/* Look-ahead-slider (fullbredde under tid/timer-rad) */
.ud-inst-felt-fullwidth {
  margin-top: 10px;
}

.ud-inst-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--yp-glass-border);
  background: var(--yp-glass-highlight);
}

.ud-inst-slider-wrap input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.ud-inst-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.9);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ud-inst-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.ud-inst-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.9);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
}

/* Belegg-bar (per dag-kolonne) */
.ud-dag-kapasitet {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--yp-glass-border);
  background: rgba(0, 0, 0, 0.15);
}

.ud-kap-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ud-kap-fyll {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--yp-success, #10b981);
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1), background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-kap-tekst {
  font-size: 0.72rem;
  color: var(--yp-text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ud-dag-kapasitet.is-grunn .ud-kap-fyll { background: #10b981; }
.ud-dag-kapasitet.is-naer  .ud-kap-fyll { background: #f59e0b; }
.ud-dag-kapasitet.is-full  .ud-kap-fyll { background: #f97316; }
.ud-dag-kapasitet.is-overbooket .ud-kap-fyll {
  background: #ef4444;
  animation: ud-overbooket-pulse 1800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ud-dag-kapasitet.is-overbooket .ud-kap-tekst {
  color: #fca5a5;
  font-weight: 600;
}

/* Uke-kapasitet: tynn full-width strip mellom hero og dag-grid */
.ud-uke-kapasitet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 4px 12px;
  margin-bottom: 6px;
  position: relative;
}

.ud-uke-bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.ud-uke-fyll {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #10b981;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1), background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ud-uke-tekst {
  font-size: 0.74rem;
  color: var(--yp-text-dim);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ud-uke-kapasitet.is-grunn .ud-uke-fyll { background: #10b981; }
.ud-uke-kapasitet.is-naer  .ud-uke-fyll { background: #f59e0b; }
.ud-uke-kapasitet.is-full  .ud-uke-fyll { background: #f97316; }
.ud-uke-kapasitet.is-overbooket .ud-uke-fyll {
  background: #ef4444;
  animation: ud-overbooket-pulse 1800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ud-uke-kapasitet.is-overbooket .ud-uke-tekst {
  color: #fca5a5;
  font-weight: 600;
}

@keyframes ud-overbooket-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .ud-kap-fyll,
  .ud-uke-fyll {
    transition: none;
  }
  .ud-dag-kapasitet.is-overbooket .ud-kap-fyll,
  .ud-uke-kapasitet.is-overbooket .ud-uke-fyll {
    animation: none;
  }
}

/* Forslag-kort: tekniker-kilde-badge */
.ud-forslag-tek {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--yp-glass-border);
}

.ud-forslag-tek-navn {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.ud-forslag-tek-kilde {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
}

.ud-forslag-tek-kilde.is-coverage {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

.ud-forslag-tek-kilde.is-kapasitet {
  background: rgba(96, 165, 250, 0.14);
  color: #93c5fd;
}

.ud-forslag-dager {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--yp-text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--yp-glass-border);
}

/* Form-hint i admin (label-suffiks for service-type-modal) */
.form-hint {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--yp-text-dim, #94a3b8);
  margin-left: 6px;
}

.input-with-suffix {
  display: flex;
  align-items: center;
  gap: 6px;
}

.input-with-suffix .input-suffix {
  font-size: 0.85rem;
  color: var(--yp-text-dim, #94a3b8);
  padding-right: 4px;
}

/* Mobil-belegg-linje i mobile-yearplan */
.mfyp-belegg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  margin: 0 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mfyp-belegg-bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mfyp-belegg-fyll {
  height: 100%;
  background: #10b981;
  border-radius: 999px;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mfyp-belegg-tekst {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.mfyp-belegg.is-grunn .mfyp-belegg-fyll { background: #10b981; }
.mfyp-belegg.is-naer  .mfyp-belegg-fyll { background: #f59e0b; }
.mfyp-belegg.is-full  .mfyp-belegg-fyll { background: #f97316; }
.mfyp-belegg.is-overbooket {
  border-color: rgba(239, 68, 68, 0.4);
}
.mfyp-belegg.is-overbooket .mfyp-belegg-fyll { background: #ef4444; }
.mfyp-belegg.is-overbooket .mfyp-belegg-tekst {
  color: #fca5a5;
  font-weight: 600;
}

/* ========================================
   PROSJEKT-SJEKKLISTE (per-kunde oppretting/avslutning)
   ======================================== */
.prosjekt-sjekkliste-section { margin-top: 14px; }

.psl-loading,
.psl-empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: 12px;
  text-align: center;
}
.psl-empty-sm { padding: 8px 10px; text-align: left; }

.psl-fase { margin-bottom: 14px; }
.psl-fase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 4px 2px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.psl-fase-head i { margin-right: 6px; color: var(--color-accent); }
.psl-progress {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  border-radius: 10px;
  padding: 1px 8px;
}

.psl-items { display: flex; flex-direction: column; gap: 4px; }
.psl-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-bg-secondary);
  transition: background .18s cubic-bezier(.4,0,.2,1);
}
.psl-item:hover { background: var(--color-bg-hover); }
.psl-item.psl-done { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }

.psl-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.psl-checkbox { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--color-accent); cursor: pointer; }
.psl-check-static {
  width: 17px; height: 17px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--color-accent); color: #fff; font-size: 10px;
}
.psl-label { flex: 1; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.psl-done .psl-label { color: var(--color-text-secondary); }
.psl-pakrevd { color: var(--color-orange, #f59e0b); font-weight: 700; margin-left: 3px; }
.psl-orphan-tag {
  margin-left: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); border: 1px solid var(--color-border); border-radius: 8px; padding: 0 6px;
}

.psl-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.psl-who {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700;
}
.psl-when { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }

.psl-comment,
.psl-admin-input {
  width: 100%;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 9px;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  transition: border-color .15s ease;
}
.psl-comment:focus,
.psl-admin-input:focus { outline: none; border-color: var(--color-accent); }
.psl-comment-static {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  padding-left: 27px;
  font-style: italic;
}

/* Admin malstyring */
.psl-admin-fase-toggle { display: inline-flex; gap: 4px; background: var(--color-bg-tertiary); border-radius: 9px; padding: 3px; margin-bottom: 12px; }
.psl-fase-btn {
  border: none; background: transparent; color: var(--color-text-secondary);
  font-size: var(--font-size-sm); font-weight: 600; padding: 6px 14px; border-radius: 7px;
  cursor: pointer; transition: background .18s cubic-bezier(.4,0,.2,1), color .18s ease;
}
.psl-fase-btn:hover { color: var(--color-text-primary); }
.psl-fase-btn.active { background: var(--color-accent); color: #fff; }

.psl-admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.psl-admin-row .psl-admin-input { flex: 1; }
.psl-admin-reorder { display: flex; flex-direction: column; gap: 2px; }
.psl-admin-pakrevd {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: var(--font-size-xs); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
}
.psl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg-secondary); color: var(--color-text-secondary);
  cursor: pointer; font-size: 11px; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.psl-icon-btn:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-text-primary); }
.psl-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.psl-icon-danger:hover:not(:disabled) { color: #fff; background: #ef4444; border-color: #ef4444; }
.psl-admin-add { display: flex; gap: 8px; margin-top: 12px; }
.psl-admin-add .psl-admin-input { flex: 1; }

/* Avslutning: ventebanner (før besøk) + periode-header + disabled-rad */
.psl-await {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--color-orange, #f59e0b) 12%, transparent);
  color: var(--color-text-secondary); font-size: var(--font-size-xs);
}
.psl-await i { color: var(--color-orange, #f59e0b); }
.psl-periode {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 2px 8px; font-size: var(--font-size-xs); color: var(--color-text-tertiary);
}
.psl-item-disabled { opacity: .55; }
.psl-item-disabled .psl-checkbox { cursor: not-allowed; }

/* «Mangler verifisering»-tag på kunde-rader (Mine kunder) */
.mk-row-verif { font-size: var(--font-size-xs); color: var(--color-orange, #f59e0b); font-weight: 600; margin-top: 2px; }
.mk-row-verif i { margin-right: 4px; }

/* «Mangler verifisering»-seksjon i Mine kunder */
.mk-verif-section { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--color-orange, #f59e0b) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-orange, #f59e0b) 35%, var(--color-border)); }
.mk-verif-head { display: flex; align-items: center; gap: 7px; font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; }
.mk-verif-head i { color: var(--color-orange, #f59e0b); }

/* ========================================
   DOKUMENTASJON OG VERIFIKASJON — filter-chips, sted-grupper, verifiserings-merker
   ======================================== */
.dok-filter-chips { display: flex; justify-content: center; gap: 6px; padding: 8px 0; flex-wrap: wrap; }
.dok-chip {
  border: 1px solid var(--color-border); background: var(--color-bg-tertiary);
  color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 600;
  padding: 5px 10px; border-radius: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s ease, color .15s ease;
}
.dok-chip:hover { color: var(--color-text-primary); }
.dok-chip.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.dok-chip-n { font-variant-numeric: tabular-nums; opacity: .8; }
/* «Kombinert»-chip (kunder med flere kategorier): skiller seg ut med stiplet kant + egen aksent. */
.dok-chip--combined { border-style: dashed; border-color: color-mix(in srgb, var(--sky-frost, #88C0D0) 55%, var(--color-border)); }
.dok-chip--combined i { color: var(--sky-frost, #88C0D0); }
.dok-chip--combined.active { background: var(--sky-frost, #88C0D0); color: #0b1622; border-style: solid; border-color: var(--sky-frost, #88C0D0); }
.dok-chip--combined.active i { color: #0b1622; }

.dok-sted-group { margin-bottom: 4px; }
.dok-sted-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px; cursor: pointer; list-style: none;
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-secondary); font-weight: 700;
}
.dok-sted-head::-webkit-details-marker { display: none; }
.dok-sted-name i { margin-right: 5px; color: var(--color-text-tertiary); }
.dok-sted-count { color: var(--color-text-tertiary); font-weight: 600; text-transform: none; letter-spacing: 0; }
.dok-sted-mangler { color: var(--color-orange, #f59e0b); }

.dok-verif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 10px; font-weight: 700; color: #fff; vertical-align: middle;
}
.dok-verif-badge.mangler { background: var(--color-orange, #f59e0b); }
.dok-verif-badge.ok { background: #10b981; }

/* ========================================
   DOKUMENTASJON — PREMIUM STATUS-OVERSIKT
   Arbeidsflyt: Til gjennomgang → Pågår → Ferdigstilt → Annen dokumentasjon.
   Hver status har en temakohesiv aksent (polarnatt): varm amber = prioritet,
   frost = i arbeid, grønn = ferdig. --dok-accent settes per seksjon og arves
   ned i chip, rail, teller, chevron, progresjonsbar og sammendrags-flis.
   ======================================== */
.dok-status-group[data-status="tilGjennomgang"],
.dok-sum-tile[data-status="tilGjennomgang"],
.dok-prog[data-status="tilGjennomgang"] { --dok-accent: #E0A458; --dok-accent-soft: rgba(224, 164, 88, 0.14); }
.dok-status-group[data-status="pagaar"],
.dok-sum-tile[data-status="pagaar"],
.dok-prog[data-status="pagaar"] { --dok-accent: var(--sky-frost, #88C0D0); --dok-accent-soft: rgba(136, 192, 208, 0.14); }
.dok-status-group[data-status="ferdigstilt"],
.dok-sum-tile[data-status="ferdigstilt"],
.dok-prog[data-status="ferdigstilt"] { --dok-accent: var(--sky-green, #5EB48C); --dok-accent-soft: rgba(94, 180, 140, 0.14); }
.dok-status-group[data-status="planlagt"],
.dok-sum-tile[data-status="planlagt"],
.dok-prog[data-status="planlagt"] { --dok-accent: #B48EAD; --dok-accent-soft: rgba(180, 142, 173, 0.16); }
.dok-status-group[data-status="annet"],
.dok-sum-tile[data-status="annet"] { --dok-accent: var(--color-text-muted, #8c9bb0); --dok-accent-soft: rgba(140, 155, 176, 0.12); }

/* --- Sammendrags-stripe: arbeidsflyt på ett blikk, klikkbar --- */
.dok-sidebar-stats--summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
  padding: 10px 12px;
}
.dok-sum-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 9px;
  min-height: 52px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-left: 2px solid var(--dok-accent);
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--dok-accent-soft), transparent 75%),
    rgba(255, 255, 255, 0.015);
  cursor: pointer;
  text-align: left;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, border-color 200ms ease;
}
.dok-sum-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); border-color: var(--dok-accent); }
.dok-sum-tile:active { transform: translateY(0); }
.dok-sum-tile:focus-visible { outline: 2px solid var(--dok-accent); outline-offset: 2px; }
.dok-sum-tile .dok-sum-n {
  font-size: 18px; font-weight: 800; line-height: 1;
  color: var(--dok-accent); font-variant-numeric: tabular-nums;
}
.dok-sum-tile .dok-sum-l {
  font-size: 9.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.15;
  color: var(--color-text-secondary, #9ca3af);
}
.dok-sum-tile.is-zero { opacity: 0.5; }
.dok-sum-tile.is-zero .dok-sum-n { color: var(--color-text-muted, #8c9bb0); }

/* --- Seksjonshode med ikon-chip, chevron og aksent-rail --- */
.dok-status-group { margin-bottom: 8px; border-radius: 10px; overflow: hidden; }
/* Skill det aktive arbeidet (topp) visuelt fra ferdig/annet-klyngen som er skjøvet ned. */
.dok-status-group[data-status="ferdigstilt"] { margin-top: 12px; }
.dok-status-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; cursor: pointer; list-style: none;
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-secondary); font-weight: 700;
  border-left: 2px solid var(--dok-accent);
  background: linear-gradient(90deg, var(--dok-accent-soft), transparent 60%);
  transition: background 200ms ease;
}
.dok-status-head:hover { background: linear-gradient(90deg, var(--dok-accent-soft), rgba(255, 255, 255, 0.02) 70%); }
.dok-status-head::-webkit-details-marker { display: none; }
.dok-status-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.dok-status-chev {
  font-size: 9px; color: var(--color-text-muted, #8c9bb0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dok-status-group[open] .dok-status-chev { transform: rotate(90deg); }
.dok-status-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--dok-accent-soft); color: var(--dok-accent); flex: none;
}
.dok-status-chip i { font-size: 10px; }
.dok-status-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--dok-accent-soft); color: var(--dok-accent);
  font-weight: 700; font-size: 11px; text-transform: none; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Innhold-entré: rolig stagger når en seksjon åpnes / lista rendres */
.dok-status-group[open] > .dok-kunde-item { animation: dokRowIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dokRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* En kunde som nettopp ble ferdig-verifisert: kort grønn «landings»-puls i Ferdigstilt. */
.dok-kunde-item.dok-row-justdone { animation: dokJustDone 1500ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dokJustDone {
  0% { background: rgba(94, 180, 140, 0.32); box-shadow: inset 3px 0 0 var(--sky-green, #5EB48C); }
  60% { background: rgba(94, 180, 140, 0.16); }
  100% { background: transparent; box-shadow: none; }
}

/* Puls når man hopper til en seksjon fra sammendrags-stripa */
.dok-status-pulse { animation: dokPulse 850ms ease; }
@keyframes dokPulse {
  0% { box-shadow: 0 0 0 0 var(--dok-accent-soft); }
  30% { box-shadow: 0 0 0 3px var(--dok-accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Progresjonsbar på rader under verifisering --- */
.dok-prog {
  height: 4px; border-radius: 3px; margin: 0 0 7px;
  background: rgba(255, 255, 255, 0.07); overflow: hidden;
}
.dok-prog-fill {
  height: 100%; border-radius: 3px;
  background: var(--dok-accent, var(--color-accent)); min-width: 0;
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pågående besøk som ren metadata (ikke en konkurrerende «pågår»-status): dempet, ingen spinner. */
.dok-stat-pill.draft-meta {
  background: rgba(148, 163, 184, 0.14);
  color: var(--color-text-muted, #8c9bb0);
}

/* Folk-linje: ansvarlig tekniker (for kunden) + hvem som fullførte besøket (huket av fra ukeplan). */
.dok-kunde-folk { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; }
.dok-folk {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--color-text-muted, #8c9bb0);
  min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dok-folk i { font-size: 10px; flex: none; }
.dok-folk.ansvarlig i { color: var(--sky-frost, #88C0D0); }
.dok-folk.fullfort i { color: var(--sky-green, #5EB48C); }
.dok-detail-folk { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.dok-detail-folk .dok-folk { font-size: 12.5px; color: var(--color-text-secondary, #9ca3af); }

/* Status-merke per kunde i område-gruppert visning: Pågår (amber) / Ferdig (grønn). */
.dok-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 9px;
  font-size: 10px; font-weight: 700; vertical-align: middle;
  white-space: nowrap;
}
.dok-status-badge i { font-size: 9px; }
.dok-status-badge.pagaar { background: rgba(224, 164, 88, 0.16); color: #E0A458; }
.dok-status-badge.ferdig { background: rgba(94, 180, 140, 0.16); color: var(--sky-green, #5EB48C); }
.dok-status-badge.planlagt { background: rgba(136, 192, 208, 0.16); color: var(--sky-frost, #88C0D0); }

/* Inline-tellere i sammendraget */
.dok-sum-inline { display: inline-flex; align-items: center; gap: 4px; }
.dok-sum-inline.pagaar { color: #E0A458; }
.dok-sum-inline.ferdig { color: var(--sky-green, #5EB48C); }
.dok-sum-inline i { font-size: 10px; }

/* Område-hode: chevron roterer når åpen (gjenbruker .dok-status-chev), subtil hover. */
.dok-sted-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dok-sted-group[open] .dok-status-chev { transform: rotate(90deg); }
.dok-sted-head { border-radius: 8px; transition: background 160ms ease; }
.dok-sted-head:hover { background: rgba(255, 255, 255, 0.03); }
/* Område-undergrupper er NESTET i status-seksjonen (status = primær akse). Tynn venstrekant +
   innrykk kommuniserer hierarkiet uten å konkurrere med det fargede status-hodet. */
.dok-sted-group { margin-left: 4px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.06); }

/* --- Rad-mikrointeraksjoner (premium hover/active) --- */
.dok-kunde-item {
  transition: background 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}
.dok-kunde-item:hover { transform: translateX(2px); }
.dok-kunde-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Valgt kunde markeres nøytralt med accent (ikke grønt — grønt betyr «ferdig»). */
.dok-kunde-item.active {
  background: var(--color-accent-muted, rgba(94, 129, 172, 0.15));
  box-shadow: inset 3px 0 0 var(--color-accent, #5E81AC);
}

/* --- Utvid til full skjerm (større bilde av hele dokumentasjons-siden) --- */
.dok-tab-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dok-tab-headtext { min-width: 0; }
.dok-expand-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-secondary, #9ca3af);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dok-expand-btn:hover { color: var(--color-text-primary); border-color: var(--color-accent); background: var(--color-accent-muted, rgba(94, 129, 172, 0.15)); transform: translateY(-1px); }
.dok-expand-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dok-expand-btn i { font-size: 12px; }

body.dok-expanded-lock { overflow: hidden; }
.dok-container.dok-expanded {
  position: fixed; inset: 0; z-index: 1200;
  margin: 0; padding: 16px 22px 20px;
  background: var(--color-bg-primary);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: dokExpandIn 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Full skjerm for dokumentasjon krever to ting på content-panelet:
   1) transform:none — content-panelet får en INLINE transform (translateX(0), satt i spa-auth.js
      etter innlogging) som binder position:fixed til panelet; uten dette dekker overlegget bare
      panelbredden og kartet blir synlig til høyre.
   2) z-index over filter-panelet (1800) — content-panelet (position:relative, z-index:999) er en
      stacking context, så overlegget er låst under z-999 og høyre filter-/kundepanel (z 1800)
      ville ellers stikke gjennom. 9000 ligger over panelet, men under modaler/lightbox (10000+). */
.content-panel.content-panel--dok-expanded {
  transform: none !important;
  z-index: 9000 !important;
}
/* Sikring: skjul høyre filter-/kundepanel mens dokumentasjon er i full skjerm. */
body.dok-expanded-lock #filterPanel,
body.dok-expanded-lock .filter-panel { display: none !important; }
.dok-container.dok-expanded .dok-layout {
  grid-template-columns: 340px 1fr;
  gap: 16px;
  height: auto; flex: 1; min-height: 0;
}
@keyframes dokExpandIn { from { opacity: 0; transform: scale(0.992); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .dok-container.dok-expanded .dok-layout { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dok-sum-tile, .dok-kunde-item, .dok-status-chev, .dok-prog-fill, .dok-expand-btn { transition: none; }
  .dok-status-group[open] > .dok-kunde-item { animation: none; }
  .dok-status-pulse { animation: none; }
  .dok-kunde-item.dok-row-justdone { animation: none; }
  .dok-container.dok-expanded { animation: none; }
  .dok-sum-tile:hover, .dok-kunde-item:hover, .dok-expand-btn:hover { transform: none; }
}

/* ========================================
   TEAM-ANSVAR (admin-oversikt: ansvarlig tekniker per teammedlem)
   ======================================== */
/* Admin-only sidebar-fane: skjult som standard, vises kun for admin-rolle. */
.tab-item.tab-admin-only { display: none; }
body.role-admin .tab-item.tab-admin-only { display: flex; }

.ta-tech {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--color-bg-secondary);
  overflow: hidden;
}
.ta-tech.ta-gap { border-color: color-mix(in srgb, var(--color-orange, #f59e0b) 45%, var(--color-border)); }

.ta-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s ease;
}
.ta-summary::-webkit-details-marker { display: none; }
.ta-summary:hover { background: var(--color-bg-hover); }

.ta-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; flex-shrink: 0;
  background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700;
}
.ta-badge-gap { background: var(--color-orange, #f59e0b); }
.ta-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }

.ta-counts { display: inline-flex; align-items: center; gap: 5px; }
.ta-c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
.ta-c-forfalt { background: #ef4444; }
.ta-c-snart { background: var(--color-orange, #f59e0b); }
.ta-total {
  min-width: 24px; padding: 0 7px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--color-bg-tertiary); color: var(--color-text-secondary);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ta-chev { color: var(--color-text-tertiary); font-size: 12px; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.ta-tech[open] .ta-chev { transform: rotate(180deg); }
.ta-tech .mk-list { padding: 4px 8px 10px; }
.ta-hint { margin: 14px 4px 4px; font-size: 12px; color: var(--color-text-tertiary); }

/* ============================================================================
   LIGHT MODE — WCAG AA-fikser (audit 2026-05-29)
   Hardkodede semantiske farger (status/kategori) flipper ikke med temaet og
   feilet AA i lys modus (lys tekst på lys tint, hvit på lys fyll, dark-islands).
   Alle verdier kontrast-verifisert >= 4.5:1 (normal) / >= 3:1 (stor/UI) mot
   den faktiske komposisjonerte lys-bakgrunnen. !important pga. base-regler med
   høy spesifisitet / !important.
   ============================================================================ */

/* --- Status-fyll-badges (hvit tekst → mørkere fyll) --- */
[data-theme="light"] .bg-status-ok       { background: #2563eb !important; color: #fff !important; }
[data-theme="light"] .bg-status-good     { background: #15803d !important; color: #fff !important; }
[data-theme="light"] .bg-status-unknown  { background: #64748b !important; color: #fff !important; }

/* --- Sidebar hurtigstatistikk (store tall) --- */
[data-theme="light"] .quick-stat-upcoming .quick-stat-value { color: #b45309 !important; }
[data-theme="light"] .quick-stat-ok .quick-stat-value       { color: #15803d !important; }

/* --- Kategori-faner (aktiv, hvit tekst på fyll) --- */
[data-theme="light"] .kategori-tab[data-kategori="El-Kontroll"].active  { background: #b45309 !important; color: #fff !important; }
[data-theme="light"] .kategori-tab[data-kategori="Brannvarsling"].active { background: #dc2626 !important; color: #fff !important; }

/* --- Kunde-admin badges (tekst på tint) --- */
[data-theme="light"] .control-badge.warning { color: #92400e !important; background: rgba(217,119,6,0.15) !important; }
[data-theme="light"] .type-badge   { color: #065f46 !important; background: rgba(16,185,129,0.25) !important; }
[data-theme="light"] .system-badge { color: #4f46e5 !important; background: rgba(79,70,229,0.15) !important; }
[data-theme="light"] .drift-badge  { color: #be185d !important; background: rgba(190,28,157,0.15) !important; }

/* --- Forfalt inline-badges --- */
[data-theme="light"] .overdue-days-inline.critical { color: #991b1b !important; background: rgba(169,15,12,0.2) !important; }
[data-theme="light"] .overdue-days-inline.warning  { color: #92400e !important; background: rgba(217,119,6,0.2) !important; }
[data-theme="light"] .overdue-days-inline.mild     { color: #92400e !important; background: rgba(217,119,6,0.2) !important; }

/* --- Kategori inline-badges --- */
[data-theme="light"] .kat-el    { color: #1e40af !important; background: rgba(37,99,235,0.2) !important; }
[data-theme="light"] .kat-brann { color: #991b1b !important; background: rgba(152,1,1,0.2) !important; }
[data-theme="light"] .kat-other { color: #5b21b6 !important; background: rgba(88,28,135,0.2) !important; }

/* --- Proximity-/område-badges --- */
[data-theme="light"] .area-badge.urgent  { color: #7f1d1d !important; background: rgba(152,1,1,0.3) !important; }
[data-theme="light"] .area-badge.warning { color: #7c2d12 !important; background: rgba(146,64,14,0.3) !important; }
[data-theme="light"] .proximity-severity.critical { color: #7f1d1d !important; background: rgba(127,29,29,0.25) !important; }
[data-theme="light"] .proximity-severity.warning  { color: #92400e !important; background: rgba(146,64,14,0.25) !important; }
[data-theme="light"] .proximity-severity.mild     { color: #14532d !important; background: rgba(21,128,61,0.25) !important; }

/* --- Ukeplan område-sorteringsknapp (aktiv) --- */
[data-theme="light"] .wp-area-sort-btn.active { color: #fff !important; background: var(--color-accent) !important; }

/* --- Mine Kunder rad-statusbadges (lys tekst på lys tint over #f1f5f9) --- */
[data-theme="light"] .mk-row-status.mk-row-mangler { background: rgba(109,40,217,0.3) !important; color: #5b21b6 !important; }
[data-theme="light"] .mk-row-status.mk-row-forfalt { background: rgba(127,29,29,0.3) !important; color: #7f1d1d !important; }
[data-theme="light"] .mk-row-status.mk-row-snart   { background: rgba(124,45,18,0.3) !important; color: #7c2d12 !important; }
[data-theme="light"] .mk-row-status.mk-row-ok      { background: rgba(20,83,11,0.3) !important; color: #14530b !important; }

/* --- Dokumentasjon (lyse accent-ikoner/overskrifter) --- */
[data-theme="light"] .dok-section:last-child .dok-section-title i { color: var(--color-accent) !important; }
[data-theme="light"] .dok-column-notater .dok-column-header,
[data-theme="light"] .dok-column-notater .dok-column-header i { color: var(--color-accent) !important; }

/* --- Notification toast (dark-island → lys) --- */
[data-theme="light"] .notification-toast {
  background: rgba(255,255,255,0.96) !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* --- Context-tip hjelpepanel (dark-island → lys) --- */
[data-theme="light"] .context-tip {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .context-tip-arrow { background: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; }
[data-theme="light"] .context-tip-content h4 { color: var(--color-text-primary) !important; }

/* --- Diverse badges/banner --- */
[data-theme="light"] .item-meta .badge.warning { color: #92400e !important; }
[data-theme="light"] .super-admin-banner { color: #7f5c00 !important; }
[data-theme="light"] .badge-primary   { color: #1e40af !important; }
[data-theme="light"] .badge-secondary { color: #334155 !important; }
[data-theme="light"] .badge-success   { color: #166534 !important; }
[data-theme="light"] .badge-warning   { color: #92400e !important; }
[data-theme="light"] .badge-danger    { color: #991b1b !important; }
[data-theme="light"] .badge-info      { color: #155e75 !important; }

/* --- Mobil-felt statuser/bannere --- */
[data-theme="light"] .checklist-task.completed .checklist-task-check { color: #15803d !important; }
[data-theme="light"] .mf-arrived-banner { color: #166534 !important; }
[data-theme="light"] .mf-summary-delta-good,
[data-theme="light"] .mf-summary-delta-good i { color: #15803d !important; }
[data-theme="light"] .mf-summary-delta-slow,
[data-theme="light"] .mf-summary-delta-slow i { color: #92400e !important; }
[data-theme="light"] .mf-history-status-fullfort { color: #166534 !important; }
[data-theme="light"] .mf-history-status-avbrutt  { color: #92400e !important; }
[data-theme="light"] .mf-more-logout { color: #b91c1c !important; }
[data-theme="light"] .mf-stripe-pace.mf-pace-ahead  { color: #15803d !important; }
[data-theme="light"] .mf-stripe-pace.mf-pace-behind { color: #92400e !important; }

/* --- Kart-popups (Mapbox) — dark-island → lys tema --- */
[data-theme="light"] .mapboxgl-popup-content {
  background: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  backdrop-filter: none !important;
}
[data-theme="light"] .office-popup-container .mapboxgl-popup-content { border-color: rgba(34,197,94,0.4) !important; }
[data-theme="light"] .mapboxgl-popup-content a { color: var(--color-text-accent) !important; }
[data-theme="light"] .mapboxgl-popup-content a:hover { color: #1e40af !important; }
[data-theme="light"] .popup-subtitle { color: var(--color-text-secondary) !important; }
[data-theme="light"] .popup-notat-strip-label i { color: var(--color-text-accent) !important; }
[data-theme="light"] .popup-foto-strip-label i  { color: #a16207 !important; }
[data-theme="light"] .mapboxgl-popup-content .btn-navigate { color: var(--color-text-accent) !important; }
[data-theme="light"] .mapboxgl-popup-content .btn-primary  { color: #3D5A7E !important; }
[data-theme="light"] .mapboxgl-popup-content .btn-complete { color: #15803d !important; }
[data-theme="light"] .mapboxgl-popup-content .btn-success  { color: #0f766e !important; }
[data-theme="light"] .mapboxgl-popup-content .btn-email    { color: #7c3aed !important; }
[data-theme="light"] .mapboxgl-popup-content .btn-calendar { color: #0f766e !important; }
[data-theme="light"] .popup-weekday-picker,
[data-theme="light"] .popup-team-assign,
[data-theme="light"] .mapboxgl-popup-content .popup-actions { background: var(--color-bg-tertiary) !important; }
[data-theme="light"] .popup-weekday-btn.is-today { color: var(--color-text-accent) !important; }
[data-theme="light"] .popup-weekday-btn .pwd-check { color: #15803d !important; }
[data-theme="light"] .mapboxgl-popup-content .cluster-popup h3,
[data-theme="light"] .mapboxgl-popup-content .cluster-popup p,
[data-theme="light"] .mapboxgl-popup-content .cluster-customer-name { color: var(--color-text-primary) !important; }
[data-theme="light"] .mapboxgl-popup-content .cluster-more { color: var(--color-text-secondary) !important; }
[data-theme="light"] .mapboxgl-popup-content .cluster-customer-list,
[data-theme="light"] .mapbox-popup-content .popup-actions { border-top-color: var(--color-border) !important; }

/* --- Årsplan (desktop) — flater, tekst-variabler og statusfarger --- */
[data-theme="light"] { --yp-text-dim: #475569; --yp-text-muted: #475569; }
[data-theme="light"] .yp-drawer-inner,
[data-theme="light"] .yp-sheet,
[data-theme="light"] .yp-modal { background: var(--color-bg-secondary) !important; color: var(--color-text-primary) !important; }
[data-theme="light"] .yp-sheet-overlay,
[data-theme="light"] .yp-modal-overlay,
[data-theme="light"] .yp-confirm-overlay { background: rgba(15,23,42,0.35) !important; }
[data-theme="light"] .yp-status-planlagt     { color: #1e40af !important; }
[data-theme="light"] .yp-status-utfort       { color: #15803d !important; }
[data-theme="light"] .yp-status-konkretisert { color: #6d28d9 !important; }
[data-theme="light"] .yp-status-hoppet       { color: #334155 !important; }

/* --- Uke-detalj-matrise (ultralav-alpha hvite flater → lys) --- */
[data-theme="light"] .ud-matrise { background: var(--color-bg-tertiary) !important; border-color: var(--color-border) !important; }
[data-theme="light"] .ud-matrise-hjorne { background: var(--color-bg-tertiary) !important; }
[data-theme="light"] .ud-matrise-head,
[data-theme="light"] .ud-matrise-dag-head,
[data-theme="light"] .ud-omr-dager { background: var(--color-bg-hover) !important; }
[data-theme="light"] .ud-mat-tek-navn,
[data-theme="light"] .ud-mat-dag-navn { color: var(--color-text-primary) !important; }
[data-theme="light"] .ud-omr-antall,
[data-theme="light"] .ud-omr-dager { color: var(--color-text-secondary) !important; }

/* --- Kvote-badges --- */
[data-theme="light"] .quota-badge.near-limit { color: #92400e !important; }
[data-theme="light"] .quota-badge.at-limit   { color: #b91c1c !important; }

/* --- Lys-modus: aktiv nav-fane bruker mørk accent (#3D5A7E), logg ut mørk rød --- */
[data-theme="light"] .tab-item.active,
[data-theme="light"] .tab-item.active i { color: var(--color-accent) !important; }
[data-theme="light"] .user-bar .logout-btn { color: #b91c1c !important; }
[data-theme="light"] .category-btn.active { color: var(--color-accent) !important; }
[data-theme="light"] .arbeid-pill.active { background: var(--color-accent) !important; }

/* ========================================
   WELCOME TOUR («bli kjent med SkyPlan»)
   Lastes via <link>, ikke runtime-injisert (CSP styleSrcElem krever nonce).
   ======================================== */
.sp-tour-overlay {
  position: fixed; inset: 0; z-index: 2147482000;
  opacity: 0; transition: opacity .38s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.sp-tour-overlay.sp-tour-visible { opacity: 1; pointer-events: auto; }
/* Klikk-blokker: fanger klikk så brukeren styrer via kortet. */
.sp-tour-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: auto;
}
.sp-tour-overlay.sp-tour-dim::before { background: rgba(8, 12, 20, 0.66); }
/* Spotlight-hull: invers box-shadow dimmer alt utenfor målet. */
.sp-tour-hole {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--color-accent, #6aa3ff),
              0 0 0 9999px rgba(8, 12, 20, 0.62),
              0 0 22px 2px color-mix(in srgb, var(--color-accent, #6aa3ff) 45%, transparent);
  transition: top .3s cubic-bezier(.16,1,.3,1), left .3s cubic-bezier(.16,1,.3,1),
              width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1);
}
.sp-tour-card {
  position: fixed; z-index: 1; width: min(360px, calc(100vw - 32px));
  background: var(--color-bg-elevated, var(--color-bg-secondary, #161b24));
  border: 1px solid var(--color-border, rgba(255,255,255,.08));
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset;
  padding: 24px 24px 18px;
  opacity: 0; transition: opacity .28s cubic-bezier(.16,1,.3,1);
}
.sp-tour-overlay.sp-tour-visible .sp-tour-card { opacity: 1; }
.sp-tour-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-muted, rgba(99,160,255,.14));
  color: var(--color-accent, #6aa3ff); font-size: 19px;
  margin-bottom: 16px;
}
.sp-tour-title {
  font-size: 19px; font-weight: 650; line-height: 1.3; margin: 0 0 9px;
  color: var(--color-text-primary, #f3f5f8);
}
.sp-tour-text {
  font-size: 14.5px; line-height: 1.6; margin: 0 0 16px;
  color: var(--color-text-secondary, #aab3c0);
}
.sp-tour-progress {
  font-size: 12.5px; letter-spacing: .02em;
  color: var(--color-text-tertiary, #7a8595); margin-bottom: 14px;
}
.sp-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-tour-nav { display: flex; align-items: center; gap: 8px; }
.sp-tour-btn {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 11px;
  transition: filter .18s ease, background .18s ease, color .18s ease, transform .12s ease;
}
.sp-tour-btn:active { transform: translateY(1px); }
.sp-tour-btn-next {
  background: var(--color-accent, #6aa3ff); color: var(--color-text-inverse, #0c1018);
}
.sp-tour-btn-next:hover { filter: brightness(1.06); }
.sp-tour-btn-ghost {
  background: var(--color-bg-input, rgba(255,255,255,.04));
  color: var(--color-text-primary, #f3f5f8);
  border: 1px solid var(--color-border, rgba(255,255,255,.08));
}
.sp-tour-btn-ghost:hover { background: var(--color-bg-hover, rgba(255,255,255,.08)); }
.sp-tour-btn-skip {
  background: transparent; color: var(--color-text-tertiary, #7a8595); padding-left: 4px; padding-right: 4px;
}
.sp-tour-btn-skip:hover { color: var(--color-text-secondary, #aab3c0); }
@media (prefers-reduced-motion: reduce) {
  .sp-tour-overlay, .sp-tour-card, .sp-tour-hole { transition: none; }
}

/* ============================================================
   Papirkurv (slettede kunder med gjenoppretting)
   ============================================================ */
.papirkurv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: pk-fade-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pk-fade-in { from { opacity: 0; } to { opacity: 1; } }

.papirkurv-modal {
  background: var(--color-bg-primary, #1a1d28);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  animation: pk-modal-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes pk-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.papirkurv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
}
.papirkurv-modal-header h3 {
  margin: 0;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.papirkurv-modal-header h3 i { color: var(--color-accent, #5b8def); }

.papirkurv-modal-desc {
  margin: 0;
  padding: 0 18px 12px;
  font-size: 12.5px;
  color: var(--color-text-tertiary, #7a8595);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.papirkurv-modal-body {
  padding: 12px 14px 16px;
  overflow-y: auto;
}

.papirkurv-loading {
  text-align: center;
  padding: 36px 12px;
  color: var(--color-text-tertiary, #7a8595);
  font-size: 13px;
}

.papirkurv-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--color-text-tertiary, #7a8595);
}
.papirkurv-empty i { font-size: 32px; opacity: 0.4; display: block; margin-bottom: 12px; }
.papirkurv-empty p { margin: 0 0 4px; font-size: 15px; color: var(--color-text-secondary, #aab3c0); }
.papirkurv-empty span { font-size: 12.5px; }

.papirkurv-list { display: flex; flex-direction: column; gap: 8px; }

.papirkurv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-bg-secondary, rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1), background 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.papirkurv-item:hover {
  border-color: rgba(255,255,255,0.16);
  background: var(--color-bg-hover, rgba(255,255,255,0.05));
}
.papirkurv-item-info { min-width: 0; flex: 1; }
.papirkurv-item-navn {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #e6eaf0);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.papirkurv-item-meta {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--color-text-tertiary, #7a8595);
}
.papirkurv-item-meta i { margin-right: 3px; opacity: 0.7; }

.papirkurv-badge {
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(91,141,239,0.15);
  color: var(--color-accent, #7ba3f0);
}
.papirkurv-utlop.snart { color: #e0a84e; font-weight: 600; }

.papirkurv-item-actions { flex-shrink: 0; }
.papirkurv-noaccess {
  font-size: 11.5px;
  color: var(--color-text-tertiary, #7a8595);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .papirkurv-modal-overlay, .papirkurv-modal { animation: none; }
  .papirkurv-item { transition: none; }
}