/* ============================================ */
/* e-conomic visual theme overrides             */
/* Light-mode conversion of dark-background UI  */
/* Applied globally to all pages                */
/* ============================================ */

/* ─── Root variable overrides ─── */
:root {
  --bg-1: #ffffff !important;
  --bg-2: #f8f9fb !important;
  --ink: #1f272c !important;
  --muted: #50606a !important;
  --surface: #ffffff !important;
  --stroke: #e2e4ea !important;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html {
  min-height: 100vh;
}
body {
  background: #fff !important;
  padding: 0 !important;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
  color: #1f272c !important;
}

.background-glow {
  display: none !important;
}

/* ─── Top bar ─── */
.ec-topbar {
  background: linear-gradient(135deg, #0f1c3f 0%, #1a2d5a 100%);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 40px;
  display: flex;
  align-items: center;
  height: 72px;
}
.ec-topbar .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  flex: 1;
  margin: 0;
  padding: 0;
  line-height: 72px;
}
.ec-topbar .breadcrumb a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.ec-topbar .breadcrumb a:hover {
  color: #fff;
}
.ec-topbar .breadcrumb .sep {
  color: rgba(255,255,255,0.35);
  margin: 0 2px;
}

/* ─── Search button ─── */
.ec-search-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.2s;
  position: relative;
}
.ec-search-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.ec-search-tooltip {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.1);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline;
}

/* ─── Settings button ─── */
.ec-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  margin-right: 8px;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
.ec-settings-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* ─── Customize button ─── */
.ec-customize-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 10px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.ec-customize-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* ─── User Avatar & Dropdown ─── */
.ec-user-block {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .15s;
}
.ec-user-block:hover { background: rgba(255,255,255,0.10); }
.ec-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.85rem;
  flex-shrink: 0;
}
.ec-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.ec-user-name { color: #fff; font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.ec-user-role { color: rgba(255,255,255,0.55); font-size: 0.7rem; white-space: nowrap; }
.ec-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  min-width: 220px; z-index: 9200;
  overflow: hidden;
}
.ec-user-dropdown-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.ec-user-dropdown-divider { height: 1px; background: #e5e7eb; }
.ec-user-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; color: #334155;
  text-decoration: none; font-size: 0.85rem;
  transition: background .12s;
}
.ec-user-dropdown-item:hover { background: #f1f5f9; }

/* ─── Customize – Edit Bar ─── */
.cust-editbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9100;
  height: 48px;
  background: #dc2626;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(220,38,38,0.35);
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.cust-editbar--active {
  transform: translateY(0);
}
.cust-editbar-label {
  font-weight: 800;
  letter-spacing: 0.02em;
}
.cust-editbar-hint {
  font-weight: 400;
  opacity: 0.85;
  font-size: 0.82rem;
}
.cust-editbar-exit {
  background: #fff;
  color: #dc2626;
  border: none;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
  transition: background .2s, transform .1s;
}
.cust-editbar-exit:hover {
  background: #fee2e2;
}
.cust-editbar-exit:active {
  transform: scale(0.97);
}

/* Section controls in edit mode */
.cust-sec-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 6px 8px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
}
.cust-sec-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e2e4ea;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  padding: 5px;
  transition: background .15s, color .15s, border-color .15s;
}
.cust-sec-arrow:hover {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.cust-sec-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e2e4ea;
  border-radius: 6px;
  color: #22c55e;
  cursor: pointer;
  padding: 5px;
  transition: background .15s, color .15s, border-color .15s;
}
.cust-sec-eye:hover {
  background: #f1f5f9;
}
.cust-sec-eye--off {
  color: #dc2626;
}
.cust-sec-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Dimmed = hidden section shown during editing */
.cust-sec-dimmed {
  opacity: 0.35;
  outline: 2px dashed #dc2626;
  outline-offset: -2px;
}

/* Edit mode body */
.cust-editing .gc-section,
.cust-editing .role-card {
  transition: opacity .2s;
}
/* Cards need position:relative so toolbar renders inside */
.cust-editing .role-card {
  position: relative;
}
.cust-editing .role-card .cust-sec-toolbar {
  margin-bottom: 8px;
}

/* ─── Bottom bar ─── */
.ec-bottombar {
  background: linear-gradient(135deg, #0f1c3f 0%, #1a2d5a 100%);
  width: 100%;
  padding: 0 40px;
  margin-top: auto;
  flex-shrink: 0;
}
.ec-bottombar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.ec-bottombar-brand {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}
.ec-bottombar-sep {
  margin: 0 8px;
}

/* ─── Shell layout ─── */
.shell,
.shell.shell--wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px 48px;
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ─── Hero header ─── */
.hero {
  animation: none !important;
}

.eyebrow,
.eyebrow.eyebrow--admin {
  color: #6366f1 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}

h1 {
  font-family: 'Archivo Black', sans-serif !important;
  color: #1f272c !important;
  font-size: 2.4rem !important;
  margin: 8px 0 6px !important;
}

.subtitle {
  color: #50606a !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* ─── Role cards (index) ─── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card-grid--5 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card-grid--2-col { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.role-card {
  background: #ffffff;
  border: 1.5px solid #e2e4ea;
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: #1f272c;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  display: block;
}
.role-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-color: #6366f1;
}
.role-card h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 12px 0 6px;
  color: #1f272c;
}
.role-card p {
  font-size: 0.88rem;
  color: #50606a;
  line-height: 1.5;
  margin: 0;
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* ─── Chip badges ─── */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.chip--passager { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.chip--gods { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.chip--disponent { background: linear-gradient(135deg, #10b981, #059669); }
.chip--admin { background: linear-gradient(135deg, #64748b, #475569); }
.chip--alert { background: linear-gradient(135deg, #ef4444, #dc2626); }
.chip--flaade { background: linear-gradient(135deg, #10b981, #059669); }
.chip--chauffor { background: linear-gradient(135deg, #f59e0b, #d97706); }
.chip--korsel { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.chip--finans { background: linear-gradient(135deg, #eab308, #f59e0b); }
.chip--invoice { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.chip--portal { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.chip--docs { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.chip--lon { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.chip--kpi { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.chip--msg { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.chip--kunde { background: linear-gradient(135deg, #f59e0b, #eab308); }
.chip--daily { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.chip--gods-korsel { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.chip--ai { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.chip--diwass { background: linear-gradient(135deg, #10b981, #34d399); }
.chip--adr { background: linear-gradient(135deg, #ef4444, #f59e0b); }
.chip--returfragt { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.chip--handicap { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.chip--skole { background: linear-gradient(135deg, #f59e0b, #eab308); }
.chip--tank { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.chip--risiko { background: linear-gradient(135deg, #ef4444, #f59e0b); }
.chip--pris { background: linear-gradient(135deg, #6366f1, #0ea5e9); }

/* ─── Hint text ─── */
.hint {
  text-align: center;
  color: #94a3b8;
  font-size: 0.82rem;
  margin: 20px 0 0;
}

/* ─── Shortcut section (index) ─── */
.tp-shortcut-section {
  margin-top: 40px;
}
.tp-shortcut-title {
  font-size: 1rem;
  font-weight: 800;
  color: #1f272c;
  margin-bottom: 14px;
}
.tp-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.tp-shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px;
  background: #f8f9fb;
  border: 1.5px solid #e2e4ea;
  border-radius: 14px;
  text-decoration: none;
  color: #1f272c;
  transition: transform 0.15s, border-color 0.15s;
}
.tp-shortcut-card:hover {
  transform: translateY(-2px);
  border-color: #6366f1;
}
.tp-shortcut-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.tp-shortcut-label {
  font-weight: 700;
  font-size: 0.9rem;
}
.tp-shortcut-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 2px;
}

/* ─── Back button ─── */
.tp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 4px 10px 4px 6px;
  margin-right: 12px;
  transition: background 0.2s;
}
.tp-back-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.tp-back-btn svg {
  width: 14px;
  height: 14px;
}

/* ─── Tilbage button ─── */
.tp-tilbage-btn {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  margin-right: 8px;
  transition: color 0.2s;
}
.tp-tilbage-btn:hover {
  color: #fff;
}

/* ─── GC Sections ─── */
.gc-section {
  background: #ffffff;
  border: 1.5px solid #e2e4ea;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.gc-section > h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1f272c;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gc-section > h2::after,
.gc-section > .ai-section-header::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform .25s ease;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: -2px;
}
.gc-section.collapsed > h2::after,
.gc-section.collapsed > .ai-section-header::after {
  transform: rotate(-45deg);
}
.gc-section-body {
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease;
  opacity: 1;
}
.gc-section.collapsed .gc-section-body {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.gc-section > h2:hover,
.gc-section > .ai-section-header:hover {
  color: #6366f1;
}
.gc-section > h2:hover::after,
.gc-section > .ai-section-header:hover::after {
  border-color: #6366f1;
}
.gc-section > .ai-section-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* ─── Section title + desc ─── */
.section-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1f272c;
  margin: 0;
}
.section-desc {
  font-size: 0.88rem;
  color: #50606a;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ─── AI Section Header ─── */
.ai-section-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ai-section-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── GC Cards ─── */
.gc-card {
  background: #f8f9fb;
  border: 1.5px solid #e2e4ea;
  border-radius: 14px;
  padding: 20px;
  transition: transform 0.15s, border-color 0.15s;
}
.gc-card:hover {
  transform: translateY(-2px);
  border-color: #6366f1;
}
.gc-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 8px 0 6px;
  color: #1f272c;
}
.gc-card p {
  font-size: 0.85rem;
  color: #50606a;
  line-height: 1.5;
  margin: 0;
}
.gc-icon {
  font-size: 1.3rem;
}
.gc-link {
  color: #6366f1;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.gc-link:hover { text-decoration: underline; }

/* ─── Stat bar / stat cards ─── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: #f8f9fb;
  border: 1.5px solid #e2e4ea;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #1f272c;
}
.stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* ─── Data tables ─── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table,
.lb-table,
.erp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.data-table th,
.lb-table th,
.erp-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid #e2e4ea;
  white-space: nowrap;
}
.data-table td,
.lb-table td,
.erp-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f1f4;
  color: #1f272c;
  vertical-align: top;
}
.data-table tbody tr:hover,
.lb-table tbody tr:hover,
.erp-table tbody tr:hover {
  background: rgba(99,102,241,0.03);
}
.lb-table-wrap { overflow-x: auto; }

/* ─── ERP Status Bar ─── */
.erp-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fb;
  border: 1.5px solid #e2e4ea;
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 20px;
  font-size: 0.85rem;
}
.erp-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
}
.erp-status-indicator--online { background: #22c55e; }
.erp-status-text { font-weight: 700; }
.erp-status-meta { color: #94a3b8; font-size: 0.8rem; }
.erp-status-badge {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}
.erp-status-sep { color: #e2e4ea; margin: 0 4px; }
.erp-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.erp-status-dot--ok { background: #22c55e; }

/* ─── ETA badges ─── */
.eta-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}
.eta-badge--ok {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
}
.eta-badge--delay {
  background: rgba(234,179,8,0.1);
  color: #ca8a04;
}
.eta-badge--critical {
  background: rgba(239,68,68,0.1);
  color: #dc2626;
}

/* ─── ERP badges ─── */
.erp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
}
.erp-badge--planned { background: rgba(99,102,241,0.1); color: #6366f1; }
.erp-badge--transit { background: rgba(14,165,233,0.1); color: #0ea5e9; }
.erp-badge--pickup { background: rgba(234,179,8,0.1); color: #eab308; }
.erp-badge--delivered { background: rgba(34,197,94,0.1); color: #22c55e; }
.erp-badge--late { background: rgba(239,68,68,0.1); color: #ef4444; }

/* ─── ERP Stat cards ─── */
.erp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.erp-stat-card {
  background: #f8f9fb;
  border: 1.5px solid #e2e4ea;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.erp-stat-value { font-size: 1.5rem; font-weight: 800; color: #1f272c; display: block; }
.erp-stat-value--green { color: #22c55e; }
.erp-stat-value--orange { color: #f59e0b; }
.erp-stat-value--red { color: #ef4444; }
.erp-stat-label { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; display: block; }

/* ─── ERP Log entries ─── */
.erp-log { list-style: none; padding: 0; margin: 0; }
.erp-log-entry { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f1f4; font-size: 0.85rem; }
.erp-log-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: #94a3b8; }
.erp-log-dot--ok { background: #22c55e; }
.erp-log-dot--warn { background: #f59e0b; }
.erp-log-dot--info { background: #0ea5e9; }
.erp-log-entry--ok { }
.erp-log-entry--warn { }
.erp-log-entry--error { color: #ef4444; }
.erp-log-time { color: #94a3b8; font-size: 0.78rem; white-space: nowrap; }
.erp-log-msg { color: #50606a; }
.erp-order-id { font-weight: 700; }
.erp-plate { font-family: monospace; font-weight: 600; background: rgba(99,102,241,.06); padding: 1px 6px; border-radius: 4px; }
.erp-info-card { background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 12px; padding: 16px 20px; }
.erp-link { color: #6366f1; text-decoration: none; font-weight: 600; }
.erp-link:hover { text-decoration: underline; }
.erp-row--warn { background: rgba(239,68,68,0.04); }

/* ─── LB Trend / Leaderboard ─── */
.lb-positive { color: #22c55e; }
.lb-negative { color: #ef4444; }
.lb-neutral { color: #94a3b8; }
.lb-rank { font-weight: 800; color: #6366f1; }
.lb-trend { font-weight: 700; font-size: 0.8rem; }
.lb-trend--up { color: #22c55e; }
.lb-trend--down { color: #ef4444; }
.lb-trend--flat { color: #94a3b8; }

/* ─── Filter chips ─── */
.filter-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #f0f1f4;
  color: #50606a;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.filter-chip:hover { background: #e2e4ea; }
.filter-chip--active {
  background: #6366f1;
  color: #fff;
}

/* ─── Map placeholder ─── */
.map-placeholder {
  border-radius: 14px;
  background: #f0f1f4;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-placeholder-inner { text-align: center; }
.map-placeholder-icon { font-size: 3rem; }
.map-placeholder-text { font-weight: 700; color: #50606a; margin-top: 8px; }
.map-placeholder-sub { font-size: 0.8rem; color: #94a3b8; margin-top: 4px; }
.map-bus-dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.map-dot { width: 10px; height: 10px; border-radius: 50%; }
.map-dot--moving { background: #22c55e; }
.map-dot--stopped { background: #f59e0b; }
.map-dot--delayed { background: #ef4444; }

/* ─── Shift badges ─── */
.shift { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
.shift--morning { background: rgba(234,179,8,0.1); color: #ca8a04; }
.shift--day { background: rgba(14,165,233,0.1); color: #0ea5e9; }
.shift--evening { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.shift--off { background: #f0f1f4; color: #94a3b8; }
.shift--sick { background: rgba(239,68,68,0.1); color: #ef4444; }

/* ─── Tachograph status ─── */
.tacho-status { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
.tacho-status--driving { background: rgba(34,197,94,0.1); color: #22c55e; }
.tacho-status--rest { background: rgba(14,165,233,0.1); color: #0ea5e9; }
.tacho-status--available { background: rgba(234,179,8,0.1); color: #eab308; }
.tacho-status--off { background: #f0f1f4; color: #94a3b8; }

/* ─── Cert badges ─── */
.cert { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
.cert--ok { background: rgba(34,197,94,0.1); color: #22c55e; }
.cert--warn { background: rgba(234,179,8,0.1); color: #eab308; }
.cert--na { background: #f0f1f4; color: #94a3b8; }

/* ─── Audit action badges ─── */
.audit-action { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.audit-action--create { background: rgba(34,197,94,0.1); color: #22c55e; }
.audit-action--edit { background: rgba(14,165,233,0.1); color: #0ea5e9; }
.audit-action--delete { background: rgba(239,68,68,0.1); color: #ef4444; }
.audit-action--status { background: rgba(234,179,8,0.1); color: #eab308; }
.audit-action--sync { background: rgba(99,102,241,0.1); color: #6366f1; }

/* ─── Doc type badges ─── */
.doc-type { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.doc-type--waybill { background: rgba(99,102,241,.1); color: #6366f1; }
.doc-type--pod { background: rgba(34,197,94,.1); color: #22c55e; }
.doc-type--receipt { background: rgba(234,179,8,.1); color: #eab308; }
.doc-type--photo { background: rgba(14,165,233,.1); color: #0ea5e9; }
.doc-type--signature { background: rgba(139,92,246,.1); color: #8b5cf6; }
.doc-type--checklist { background: rgba(236,72,153,.1); color: #ec4899; }
.doc-stat { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }

/* ─── GC Alert types ─── */
.gc-alert-type { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.gc-alert-type--fuel { background: rgba(239,68,68,.1); color: #ef4444; }
.gc-alert-type--parts { background: rgba(234,179,8,.1); color: #eab308; }

/* ─── GC Workflow ─── */
.gc-workflow { display: flex; gap: 16px; flex-wrap: wrap; }
.gc-workflow--vert { flex-direction: column; }
.gc-step { flex: 1; min-width: 200px; background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 12px; padding: 16px; }
.gc-step--wide { min-width: 100%; }
.gc-step-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 0.75rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.gc-step-no--prevent { background: #6366f1; }
.gc-step-no--detect { background: #f59e0b; }
.gc-step-no--respond { background: #ef4444; }
.gc-arrow { color: #94a3b8; font-size: 1.1rem; align-self: center; }
.gc-arrow--down { transform: rotate(90deg); }
.gc-formula { font-family: monospace; background: #f0f1f4; padding: 3px 8px; border-radius: 4px; font-size: 0.82rem; }
.gc-grid { display: grid; gap: 12px; }
.gc-rule-no { font-weight: 800; color: #6366f1; }
.gc-feature-list { list-style: none; padding: 0; }
.gc-feature-list li { padding: 6px 0; border-bottom: 1px solid #f0f1f4; font-size: 0.88rem; }

/* ─── Parts alerts ─── */
.parts-alerts { display: flex; flex-direction: column; gap: 10px; }
.parts-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #e2e4ea; }
.parts-alert--critical { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.03); }
.parts-alert--warning { border-color: rgba(234,179,8,.3); background: rgba(234,179,8,.03); }
.parts-alert--info { border-color: rgba(99,102,241,.2); background: rgba(99,102,241,.03); }
.parts-alert-icon { font-size: 1.2rem; flex-shrink: 0; }
.parts-alert-body { flex: 1; }
.parts-alert-meta { font-size: 0.78rem; color: #94a3b8; margin-top: 4px; }

/* ─── AI Cards ─── */
.ai-suggestions { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.ai-card { background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 14px; padding: 20px; transition: border-color 0.2s; }
.ai-card:hover { border-color: #6366f1; }
.ai-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ai-badge { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; }
.ai-badge--high { background: rgba(34,197,94,0.1); color: #22c55e; }
.ai-badge--medium { background: rgba(234,179,8,0.1); color: #eab308; }
.ai-badge--low { background: rgba(14,165,233,0.1); color: #0ea5e9; }
.ai-confidence { font-size: 0.8rem; color: #94a3b8; }
.ai-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: #1f272c; }
.ai-card-desc { font-size: 0.85rem; color: #50606a; line-height: 1.5; margin: 0; }
.ai-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.ai-metrics { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.ai-metric { text-align: center; }
.ai-metric-val { font-size: 1.1rem; font-weight: 800; display: block; color: #1f272c; }
.ai-metric-val--green { color: #22c55e; }
.ai-metric-val--blue { color: #0ea5e9; }
.ai-metric-lbl { font-size: 0.7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .2px; }
.ai-btn { border: none; padding: 8px 18px; border-radius: 8px; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: transform 0.15s; font-family: inherit; }
.ai-btn:hover { transform: translateY(-1px); }
.ai-btn--accept { background: #22c55e; color: #fff; }
.ai-btn--reject { background: #f0f1f4; color: #50606a; }
.ai-btn--tweak { background: rgba(99,102,241,.1); color: #6366f1; }

/* ─── AI Forecast ─── */
.ai-forecast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.ai-forecast-card { background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 12px; padding: 14px; text-align: center; }
.ai-forecast-date { font-size: 0.78rem; color: #94a3b8; font-weight: 600; }
.ai-forecast-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.ai-legend { font-size: 0.75rem; font-weight: 600; }
.ai-legend--low { color: #22c55e; }
.ai-legend--medium { color: #eab308; }
.ai-legend--high { color: #f59e0b; }
.ai-legend--critical { color: #ef4444; }

/* ─── AI Bar chart ─── */
.ai-bar-group { margin-top: 12px; }
.ai-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ai-bar-label { font-size: 0.8rem; font-weight: 600; color: #50606a; min-width: 100px; }
.ai-bar-track { flex: 1; height: 22px; background: #f0f1f4; border-radius: 6px; overflow: hidden; }
.ai-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s; }
.ai-bar-fill--low { background: #22c55e; }
.ai-bar-fill--medium { background: #eab308; }
.ai-bar-fill--high { background: #f59e0b; }
.ai-bar-fill--critical { background: #ef4444; }
.ai-heat { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.ai-heat--low { background: rgba(34,197,94,.1); color: #22c55e; }
.ai-heat--med { background: rgba(234,179,8,.1); color: #eab308; }
.ai-heat--high { background: rgba(245,158,11,.1); color: #f59e0b; }
.ai-heat--crit { background: rgba(239,68,68,.1); color: #ef4444; }

/* ─── AI Route viz ─── */
.ai-route-viz { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ai-node { padding: 4px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; }
.ai-node--pickup { background: rgba(99,102,241,.1); color: #6366f1; }
.ai-node--dest { background: rgba(34,197,94,.1); color: #22c55e; }
.ai-arrow { color: #94a3b8; }

/* ─── AI Pricing ─── */
.ai-pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.ai-price-card { background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 14px; padding: 18px; transition: border-color 0.2s; }
.ai-price-card--active { border-color: #6366f1; }
.ai-price-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ai-price-icon { font-size: 1.2rem; }
.ai-price-live { font-size: 1.4rem; font-weight: 800; color: #1f272c; }
.ai-price-range { font-size: 0.78rem; color: #94a3b8; }
.ai-price-multi { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.ai-price-multi--surge { background: rgba(239,68,68,.1); color: #ef4444; }
.ai-price-multi--peak { background: rgba(234,179,8,.1); color: #eab308; }
.ai-price-multi--warn { background: rgba(245,158,11,.1); color: #f59e0b; }

/* ─── AI Simulator ─── */
.ai-simulator { background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 14px; padding: 20px; margin-top: 16px; }
.ai-sim-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ai-sim-label { font-size: 0.82rem; font-weight: 600; color: #50606a; }
.ai-sim-value { font-weight: 700; color: #1f272c; }
.ai-sim-results { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.ai-sim-result { text-align: center; }
.ai-sim-result-val { font-size: 1.2rem; font-weight: 800; display: block; }
.ai-sim-result-label { font-size: 0.7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; }

/* ─── Message system ─── */
.msg-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.msg-role-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.msg-role-badge--vognmand { background: rgba(99,102,241,.1); color: #6366f1; }
.msg-role-badge--disponent { background: rgba(34,197,94,.1); color: #22c55e; }
.msg-role-badge--chauffor { background: rgba(234,179,8,.1); color: #eab308; }
.msg-role-badge--passager { background: rgba(14,165,233,.1); color: #0ea5e9; }
.msg-check { display: inline-block; width: 20px; text-align: center; }
.msg-check--limited { opacity: 0.4; }
.msg-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.msg-filter-chip { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; background: #f0f1f4; color: #50606a; border: none; cursor: pointer; }
.msg-filter-chip--active { background: #6366f1; color: #fff; }
.msg-filter-chip--alert { background: rgba(239,68,68,.1); color: #ef4444; }
.msg-list { display: flex; flex-direction: column; gap: 6px; }
.msg-item { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #e2e4ea; transition: border-color 0.15s; cursor: pointer; }
.msg-item:hover { border-color: #6366f1; }
.msg-item--unread { background: rgba(99,102,241,0.03); border-color: rgba(99,102,241,0.2); }
.msg-item--alarm { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.02); }
.msg-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; background: #f0f1f4; }
.msg-avatar--system { background: rgba(99,102,241,.1); }
.msg-body { flex: 1; min-width: 0; }
.msg-header { display: flex; align-items: center; gap: 8px; }
.msg-sender { font-weight: 700; font-size: 0.88rem; color: #1f272c; }
.msg-time { font-size: 0.75rem; color: #94a3b8; margin-left: auto; }
.msg-text { font-size: 0.85rem; color: #50606a; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-meta { display: flex; gap: 6px; margin-top: 4px; }
.msg-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.68rem; font-weight: 700; background: #f0f1f4; color: #50606a; }
.msg-tag--alarm { background: rgba(239,68,68,.1); color: #ef4444; }
.msg-tag--broadcast { background: rgba(99,102,241,.1); color: #6366f1; }
.msg-tag--feedback { background: rgba(34,197,94,.1); color: #22c55e; }

/* ─── Compose ─── */
.msg-compose { background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 14px; padding: 20px; }
.msg-compose-row { margin-bottom: 12px; }
.msg-compose-label { font-size: 0.78rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; display: block; }
.msg-compose-recipients { display: flex; gap: 6px; flex-wrap: wrap; }
.msg-recipient-chip { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; background: #6366f1; color: #fff; }
.msg-recipient-placeholder { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 0.8rem; color: #94a3b8; border: 1.5px dashed #e2e4ea; }
.msg-compose-types { display: flex; gap: 6px; flex-wrap: wrap; }
.msg-type-option { padding: 5px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; background: #f0f1f4; color: #50606a; border: none; cursor: pointer; }
.msg-type-option--active { background: #6366f1; color: #fff; }
.msg-compose-body { margin-top: 12px; }
.msg-compose-textarea { width: 100%; min-height: 80px; border: 1.5px solid #e2e4ea; border-radius: 10px; padding: 12px; font-family: inherit; font-size: 0.88rem; resize: vertical; box-sizing: border-box; }
.msg-compose-footer { display: flex; gap: 8px; margin-top: 10px; }
.msg-compose-actions { display: flex; gap: 8px; }
.msg-compose-action { padding: 8px 18px; border-radius: 8px; font-weight: 700; font-size: 0.82rem; cursor: pointer; border: none; font-family: inherit; }
.msg-send-btn { background: #6366f1; color: #fff; }

/* ─── Route timeline ─── */
.route-timeline { position: relative; padding-left: 24px; }
.route-stop { position: relative; padding: 10px 0 10px 20px; border-left: 2px solid #e2e4ea; }
.route-stop:last-child { border-left-color: transparent; }
.route-stop--done { opacity: 0.6; }
.route-stop--active { }
.route-stop-dot { position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #e2e4ea; border: 2px solid #fff; }
.route-stop-dot--done { background: #22c55e; }
.route-stop-dot--active { background: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.2); }
.route-stop-name { font-weight: 700; font-size: 0.88rem; color: #1f272c; }
.route-stop-time { font-size: 0.78rem; color: #94a3b8; }
.route-stop-detail { font-size: 0.82rem; color: #50606a; }
.route-stop-info { font-size: 0.82rem; color: #50606a; }

/* ─── Geofence badges ─── */
.geofence-type { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.geofence-type--depot { background: rgba(99,102,241,.1); color: #6366f1; }
.geofence-type--terminal { background: rgba(14,165,233,.1); color: #0ea5e9; }
.geofence-type--kunde { background: rgba(34,197,94,.1); color: #22c55e; }
.geofence-type--station { background: rgba(234,179,8,.1); color: #eab308; }
.geofence-type--tankning { background: rgba(245,158,11,.1); color: #f59e0b; }
.geofence-type--skole { background: rgba(236,72,153,.1); color: #ec4899; }

/* ─── Transport-specific badges ─── */
.hk-type { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.hk-type--flex { background: rgba(99,102,241,.1); color: #6366f1; }
.hk-type--return { background: rgba(234,179,8,.1); color: #eab308; }
.hk-type--visit { background: rgba(34,197,94,.1); color: #22c55e; }
.hk-aid { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.hk-aid--wheelchair { background: rgba(99,102,241,.1); color: #6366f1; }
.hk-aid--wheelchair-el { background: rgba(139,92,246,.1); color: #8b5cf6; }
.hk-aid--walker { background: rgba(234,179,8,.1); color: #eab308; }
.hk-aid--stretcher { background: rgba(239,68,68,.1); color: #ef4444; }
.hk-aid--none { background: #f0f1f4; color: #94a3b8; }

.sk-type { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.sk-type--morning { background: rgba(234,179,8,.1); color: #ca8a04; }
.sk-type--afternoon { background: rgba(14,165,233,.1); color: #0ea5e9; }
.sk-type--sfo { background: rgba(139,92,246,.1); color: #8b5cf6; }
.sk-type--special { background: rgba(236,72,153,.1); color: #ec4899; }

.diwass-role { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.diwass-role--notifier { background: rgba(99,102,241,.1); color: #6366f1; }
.diwass-role--carrier { background: rgba(234,179,8,.1); color: #eab308; }
.diwass-role--facility { background: rgba(34,197,94,.1); color: #22c55e; }

.adr-class { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; background: #f0f1f4; color: #50606a; }
.adr-class--active { background: rgba(239,68,68,.1); color: #ef4444; }

/* ─── Omraadet article cards ─── */
.article-card { background: #fff; border: 1.5px solid #e2e4ea; border-radius: 14px; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.article-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.article-card__header { padding: 16px 20px 0; }
.article-card__title { font-size: 1rem; font-weight: 700; color: #1f272c; margin: 0; }
.article-card__body { padding: 8px 20px 16px; font-size: 0.85rem; color: #50606a; line-height: 1.5; }
.article-card__footer { padding: 0 20px 16px; display: flex; gap: 6px; }
.article-meta { font-size: 0.75rem; color: #94a3b8; }
.omraade-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.68rem; font-weight: 700; }
.omraade-tag--historie { background: rgba(234,179,8,.1); color: #ca8a04; }
.omraade-tag--kultur { background: rgba(139,92,246,.1); color: #8b5cf6; }
.omraade-tag--geografi { background: rgba(34,197,94,.1); color: #22c55e; }
.omraade-tag--viden { background: rgba(14,165,233,.1); color: #0ea5e9; }

/* ─── Quiz ─── */
.quiz-questions { display: flex; flex-direction: column; gap: 20px; }
.quiz-q { background: #fff; border: 1.5px solid #e2e4ea; border-radius: 14px; padding: 20px; }
.quiz-q__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.quiz-q__number { font-weight: 800; color: #6366f1; }
.quiz-q__text { font-size: 1rem; font-weight: 700; color: #1f272c; }
.quiz-q__source { font-size: 0.75rem; color: #94a3b8; margin-left: auto; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-opt { padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 0.88rem; cursor: pointer; border: 1.5px solid #e2e4ea; text-align: center; transition: transform 0.15s; }
.quiz-opt:hover { transform: translateY(-1px); }
.quiz-opt--red { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.2); color: #ef4444; }
.quiz-opt--blue { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.2); color: #6366f1; }
.quiz-opt--yellow { background: rgba(234,179,8,.06); border-color: rgba(234,179,8,.2); color: #ca8a04; }
.quiz-opt--green { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.2); color: #22c55e; }
.quiz-opt--correct { background: rgba(34,197,94,.15); border-color: #22c55e; }
.quiz-player { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; }
.quiz-player--passager { background: rgba(14,165,233,.06); }
.quiz-player--chauffør { background: rgba(234,179,8,.06); }
.quiz-next-blink { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.5; } }

/* ─── Points system ─── */
.pt-card { background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 14px; padding: 20px; }
.pt-card--reward { border-color: rgba(234,179,8,.3); background: rgba(234,179,8,.03); }
.pt-icon { font-size: 1.3rem; }
.pt-pts { font-size: 1.3rem; font-weight: 800; color: #6366f1; }
.pt-max { font-size: 0.78rem; color: #94a3b8; }
.pt-source { font-size: 0.75rem; font-weight: 600; color: #94a3b8; }
.pt-rule { font-size: 0.85rem; color: #50606a; }
.pt-rule-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f1f4; }
.pt-weight { font-weight: 700; color: #1f272c; }
.pt-total { font-size: 1.1rem; font-weight: 800; }
.pt-total-col { text-align: right; }
.pt-cat-header { font-weight: 700; color: #6366f1; border-bottom: 2px solid #6366f1; padding-bottom: 4px; margin-top: 8px; }
.pt-reward-list { display: flex; flex-direction: column; gap: 8px; }
.pt-reward-tier { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #e2e4ea; }
.pt-reward-threshold { font-weight: 800; color: #6366f1; }
.wt-panel { background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 12px; padding: 16px; }
.wt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wt-label { font-size: 0.85rem; font-weight: 600; color: #50606a; min-width: 120px; }
.wt-slider { flex: 1; }
.wt-value { font-weight: 700; min-width: 40px; text-align: right; }
.wt-sum { margin-top: 12px; }
.wt-total-row { font-weight: 800; font-size: 1rem; }
.th-weight { font-weight: 700; }

/* ─── KPI Hero cards ─── */
.kpi-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi-hero-card { background: #fff; border: 1.5px solid #e2e4ea; border-radius: 14px; padding: 18px 20px; }
.kpi-hero-card--green { border-left: 4px solid #22c55e; }
.kpi-hero-card--orange { border-left: 4px solid #f59e0b; }
.kpi-hero-body { }
.kpi-hero-icon { font-size: 1.3rem; margin-bottom: 4px; }
.kpi-hero-label { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; }
.kpi-hero-value { font-size: 1.6rem; font-weight: 800; color: #1f272c; display: block; }
.kpi-hero-sub { font-size: 0.78rem; color: #50606a; margin-top: 2px; }
.kpi-hero-spark { }
.kpi-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.kpi-spark-bar { height: 6px; border-radius: 3px; background: #e2e4ea; }
.kpi-spark-bar--current { background: #6366f1; }

/* ─── Clean/Rengøring ─── */
.clean-booking-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f8f9fb; border: 1.5px solid #e2e4ea; border-radius: 12px; }
.clean-booking-bar__label { font-weight: 700; }
.clean-booking-bar__info { font-size: 0.85rem; color: #50606a; }
.clean-booking-btn { background: #6366f1; color: #fff; border: none; padding: 8px 18px; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit; }
.clean-select { border: 1.5px solid #e2e4ea; border-radius: 8px; padding: 6px 12px; font-family: inherit; }
.clean-type { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.clean-type--indvendig { background: rgba(99,102,241,.1); color: #6366f1; }
.clean-type--udvendig { background: rgba(14,165,233,.1); color: #0ea5e9; }
.clean-type--kombi { background: rgba(34,197,94,.1); color: #22c55e; }
.clean-type--dybde { background: rgba(139,92,246,.1); color: #8b5cf6; }
.clean-type--desinf { background: rgba(239,68,68,.1); color: #ef4444; }
.clean-price { font-weight: 700; }
.clean-quality { font-weight: 700; }
.fleet-row--service { background: rgba(234,179,8,.04); }

/* ─── Setup fields ─── */
.setup-field { display: flex; flex-direction: column; gap: 4px; }
.setup-field label { font-size: 0.78rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; }
.setup-field input,
.setup-field select {
  border: 1.5px solid #e2e4ea;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  color: #1f272c;
  background: #fff;
}
.setup-field input:focus,
.setup-field select:focus {
  outline: none;
  border-color: #6366f1;
}
.setup-toggle { cursor: pointer; }

/* ─── Period tabs/panels ─── */
.period-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.period-tab { padding: 6px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer; background: #f0f1f4; color: #50606a; border: none; font-family: inherit; }
.period-tab:hover { background: #e2e4ea; }
.period-panel { }
.period-panel--hidden { display: none; }

/* ─── Kladde (journal) fields ─── */
.jl-dato, .jl-bilag, .jl-konto, .jl-mod, .jl-tekst, .jl-debet, .jl-kredit, .jl-dim, .jl-beloeb, .jl-del {
  border: 1.5px solid #e2e4ea; border-radius: 6px; padding: 6px 10px; font-family: inherit; font-size: 0.85rem;
}
.jl-del { cursor: pointer; background: rgba(239,68,68,.06); color: #ef4444; border-color: rgba(239,68,68,.2); }

/* ─── Misc buttons ─── */
.btn-sm { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.18); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 0.85rem; transition: background 0.2s; }
.btn-sm:hover { background: rgba(99,102,241,.16); }
.action-btn { padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 0.82rem; cursor: pointer; border: none; font-family: inherit; }
.del-btn, .del-trip { color: #ef4444; background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 0.82rem; }
.approve-btn, .app-approve-btn { background: #22c55e; color: #fff; border: none; padding: 6px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.reject-btn, .app-reject-btn { background: #f0f1f4; color: #50606a; border: none; padding: 6px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.forward-btn { background: rgba(99,102,241,.1); color: #6366f1; border: none; padding: 6px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.view-file, .gp-view-file { color: #6366f1; text-decoration: none; font-weight: 600; cursor: pointer; background: none; border: none; font-family: inherit; font-size: 0.85rem; }
.view-file:hover, .gp-view-file:hover { text-decoration: underline; }
.gp-approve { background: #22c55e; color: #fff; border: none; padding: 6px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.gp-reject { background: rgba(239,68,68,.1); color: #ef4444; border: none; padding: 6px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.tpl-btn { background: #6366f1; color: #fff; border: none; padding: 8px 18px; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit; }
.dim-del, .val-del, .pg-del, .pd-del { color: #ef4444; cursor: pointer; background: none; border: none; font-size: 0.9rem; }
.den { font-weight: 700; }
.num { font-family: monospace; }
.frac { font-size: 0.8em; color: #94a3b8; }
.kp-field { border: 1.5px solid #e2e4ea; border-radius: 8px; padding: 8px 12px; font-family: inherit; }

/* ─── Eyebrow variants ─── */
.eyebrow--fleet { color: #10b981 !important; }
.eyebrow--driver { color: #f59e0b !important; }
.eyebrow--dispatch { color: #0ea5e9 !important; }
.eyebrow--tracking { color: #6366f1 !important; }
.eyebrow--korsel { color: #0ea5e9 !important; }
.eyebrow--erp { color: #2563eb !important; }
.eyebrow--invoice { color: #6366f1 !important; }
.eyebrow--portal { color: #ec4899 !important; }
.eyebrow--docs { color: #8b5cf6 !important; }
.eyebrow--finans { color: #eab308 !important; }
.eyebrow--alert { color: #ef4444 !important; }
.eyebrow--kpi { color: #8b5cf6 !important; }
.eyebrow--ai { color: #6366f1 !important; }
.eyebrow--gods { color: #f59e0b !important; }
.eyebrow--diwass { color: #10b981 !important; }
.eyebrow--msg { color: #ec4899 !important; }
.eyebrow--kunde { color: #f59e0b !important; }
.eyebrow--handicap { color: #6366f1 !important; }
.eyebrow--skole { color: #f59e0b !important; }
.eyebrow--quiz { color: #6366f1 !important; }
.eyebrow--omraade { color: #10b981 !important; }
.eyebrow--passager { color: #0ea5e9 !important; }
.eyebrow--chaufforapp { color: #f59e0b !important; }
.eyebrow--disponent { color: #10b981 !important; }
.eyebrow--reward { color: #eab308 !important; }
.eyebrow--returfragt { color: #0ea5e9 !important; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .ec-topbar { padding: 0 16px; }
  .shell, .shell.shell--wide { padding: 20px 16px 40px; }
  h1 { font-size: 1.8rem !important; }
  .card-grid, .card-grid--3, .card-grid--5 { grid-template-columns: 1fr; }
  .erp-stats { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .quiz-options { grid-template-columns: 1fr; }
  .ai-metrics { gap: 10px; }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─── Selection ─── */
::selection { background: rgba(99,102,241,0.15); }

/* ─── Print ─── */
@media print {
  .ec-topbar, .ec-bottombar, .ec-search-btn, .tp-back-btn, .ec-settings-btn, .ec-customize-btn { display: none !important; }
  body { background: #fff !important; }
  .gc-section { break-inside: avoid; }
}

/* --- Company Selector --- */
.ec-company-selector{position:relative;margin-left:auto;margin-right:8px;flex-shrink:0;}
.ec-company-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 12px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;font-family:inherit;}
.ec-company-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);}
.ec-company-chevron{transition:transform .2s;flex-shrink:0;}
.ec-company-selector--open .ec-company-chevron{transform:rotate(180deg);}
.ec-company-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:320px;background:#fff;border:1.5px solid #e2e4ea;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.12);z-index:9200;overflow:hidden;}
.ec-company-selector--open .ec-company-dropdown{display:block;}
.ec-company-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;background:#fff;border:none;cursor:pointer;text-align:left;transition:background .12s;font-family:inherit;}
.ec-company-option:hover{background:#f8f9fb;}
.ec-company-option+.ec-company-option{border-top:1px solid #f0f1f3;}
.ec-company-option--active{background:rgba(34,197,94,.04);}
.ec-company-option--active:hover{background:rgba(34,197,94,.08);}
.ec-company-option-info{display:flex;flex-direction:column;gap:2px;}
.ec-company-option-info strong{font-size:.9rem;font-weight:700;color:#1f272c;}
.ec-company-option-info span{font-size:.78rem;color:#50606a;}
@media(max-width:600px){.ec-company-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;}.ec-company-dropdown{min-width:260px;right:-20px;}}

/* --- Chat Button --- */
.ec-chat-btn{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;}
.ec-chat-btn:hover{color:#fff;background:rgba(255,255,255,.1);}

/* --- AI & Mail Buttons --- */
.ec-ai-btn,.ec-mail-btn{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;}
.ec-ai-btn:hover,.ec-mail-btn:hover{color:#fff;background:rgba(255,255,255,.1);}

/* --- AI Agent Panel --- */
.ai-panel{position:fixed;top:0;right:-420px;width:400px;height:100vh;background:#fff;box-shadow:-4px 0 30px rgba(0,0,0,.12);z-index:9500;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);font-family:'Manrope',sans-serif;}
.ai-panel--open{right:0;}
.ai-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#0f1c3f,#1a2d5a);color:#fff;flex-shrink:0;}
.ai-panel-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;}
.ai-panel-title svg{color:rgba(255,255,255,.85);}
.ai-panel-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:1.5rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .15s,background .15s;line-height:1;}
.ai-panel-close:hover{color:#fff;background:rgba(255,255,255,.1);}
.ai-panel-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;background:#f8f9fb;}
.ai-msg{display:flex;max-width:88%;}
.ai-msg--user{align-self:flex-end;}
.ai-msg--bot{align-self:flex-start;}
.ai-msg-content{padding:12px 16px;border-radius:16px;font-size:.88rem;line-height:1.6;word-break:break-word;}
.ai-msg--user .ai-msg-content{background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;border-bottom-right-radius:4px;}
.ai-msg--bot .ai-msg-content{background:#fff;color:#1f272c;border:1px solid #e8e9ed;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.ai-msg--bot .ai-msg-content strong{color:#0f1c3f;font-weight:700;}
.ai-link{color:#6366f1;text-decoration:none;font-weight:600;}
.ai-link:hover{text-decoration:underline;}
.ai-panel-input-wrap{display:flex;align-items:center;gap:8px;padding:14px 16px;border-top:1px solid #e8e9ed;background:#fff;flex-shrink:0;}
.ai-panel-input{flex:1;border:1.5px solid #e2e4ea;border-radius:10px;padding:10px 14px;font-size:.9rem;font-family:inherit;outline:none;transition:border-color .15s;}
.ai-panel-input:focus{border-color:#6366f1;}
.ai-panel-send{background:#6366f1;border:none;color:#fff;width:38px;height:38px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0;}
.ai-panel-send:hover{background:#4f46e5;}
.ai-dots span{animation:aiBlink 1.4s infinite both;font-size:1.4rem;font-weight:700;color:#6366f1;}
.ai-dots span:nth-child(2){animation-delay:.2s;}
.ai-dots span:nth-child(3){animation-delay:.4s;}
@keyframes aiBlink{0%,80%,100%{opacity:.2;}40%{opacity:1;}}
@media(max-width:480px){.ai-panel{width:100%;right:-100%;}}

/* --- Kundeportal Form --- */
.kp-form{display:flex;flex-direction:column;gap:16px;}
.kp-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.kp-form-group{display:flex;flex-direction:column;gap:4px;}
.kp-label{font-size:.82rem;font-weight:700;color:#50606a;text-transform:uppercase;letter-spacing:.04em;}
.kp-input{border:1.5px solid #e2e4ea;border-radius:10px;padding:10px 14px;font-size:.9rem;font-family:inherit;outline:none;transition:border-color .15s;background:#fff;color:#1f272c;}
.kp-input:focus{border-color:#6366f1;}
.kp-textarea{resize:vertical;min-height:60px;}
.kp-submit{background:#6366f1;color:#fff;border:none;border-radius:10px;padding:12px 28px;font-size:.95rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s;}
.kp-submit:hover{background:#4f46e5;}


/* ============================================ */
/* VMS Sidebar                                 */
/* ============================================ */

.vms-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: #0f1c3f;
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width 0.2s ease;
  overflow: hidden;
}
.vms-sidebar.collapsed { width: 60px; }

.vms-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vms-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.vms-sidebar-logo svg { flex-shrink: 0; }
.vms-sidebar-title {
  font-family: 'Archivo Black', 'Manrope', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.vms-sidebar-title-light {
  font-weight: 400;
  opacity: 0.7;
  font-family: 'Manrope', sans-serif;
}
.vms-sidebar.collapsed .vms-sidebar-title { display: none; }

.vms-sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

/* ═══════════════════════════════════════════ */
/*  Column Config – shared styles             */
/* ═══════════════════════════════════════════ */
.cc-col-btn {
  display: none; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 0.82rem; font-weight: 700;
  background: #f1f5f9; color: #475569; border: 1.5px solid #e2e4ea;
  border-radius: 8px; cursor: pointer; font-family: 'Manrope',sans-serif;
  transition: all 0.15s; flex-shrink: 0;
}
.cust-editing .cc-col-btn { display: flex; }
.cc-col-btn:hover { border-color: #0ea5e9; color: #0ea5e9; }

.cc-panel-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.cc-panel-overlay.active { opacity: 1; pointer-events: all; }

.cc-panel {
  background: #fff; border-radius: 16px; width: 90%; max-width: 420px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  display: flex; flex-direction: column; max-height: 85vh; overflow: hidden;
  transform: scale(0.95); opacity: 0;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.cc-panel.open { transform: scale(1); opacity: 1; }

.cc-panel-header {
  padding: 20px 24px; border-bottom: 1.5px solid #e2e4ea;
  display: flex; align-items: center; justify-content: space-between;
}
.cc-panel-header h3 { font-size: 1rem; font-weight: 800; color: #1f272c; margin: 0; }

.cc-panel-close {
  background: none; border: none; font-size: 1.8rem; color: #94a3b8;
  cursor: pointer; padding: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; transition: color 0.15s;
}
.cc-panel-close:hover { color: #1f272c; }

.cc-panel-body { flex: 1; overflow-y: auto; padding: 20px 24px; background: #f8fafc; }

.cc-section-title {
  font-size: 0.7rem; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 12px 0 8px 0;
}
.cc-section-title:first-child { margin-top: 0; }

.cc-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #fff; border: 1.5px solid #e2e4ea;
  border-radius: 8px; margin-bottom: 8px; cursor: grab;
  font-size: 0.85rem; color: #1f272c; user-select: none; transition: all 0.15s;
}
.cc-chip:hover { border-color: #0ea5e9; background: #f0f9ff; }
.cc-chip.dragging { opacity: 0.6; cursor: grabbing; }
.cc-chip-icon { color: #94a3b8; font-size: 0.9rem; flex-shrink: 0; }

.cc-chip-remove, .cc-chip-add {
  margin-left: auto; background: none; border: none; color: #94a3b8;
  cursor: pointer; font-size: 0.9rem; padding: 0; transition: color 0.15s;
}
.cc-chip-remove:hover { color: #ef4444; }
.cc-chip-add:hover { color: #22c55e; }

.cc-panel-footer {
  padding: 16px 24px; border-top: 1.5px solid #e2e4ea;
  display: flex; gap: 8px; justify-content: flex-end; background: #fff;
}
.cc-btn {
  padding: 9px 18px; font-size: 0.82rem; font-weight: 700;
  border: 1.5px solid #e2e4ea; border-radius: 8px;
  background: #fff; color: #475569; cursor: pointer;
  font-family: 'Manrope',sans-serif; transition: all 0.15s;
}
.cc-btn:hover { border-color: #0ea5e9; color: #0ea5e9; }
.cc-btn.primary { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.cc-btn.primary:hover { background: #0284c7; border-color: #0284c7;
}
.vms-sidebar-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.vms-sidebar.collapsed .vms-sidebar-toggle svg { transform: rotate(180deg); }

.vms-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.vms-nav-group-title {
  display: none;
}
.vms-sidebar.collapsed .vms-nav-group-title span { display: none; }

.vms-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.vms-nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}
.vms-nav-item.active {
  background: rgba(99,102,241,0.18);
  color: #fff;
  font-weight: 600;
}
.vms-nav-item svg { flex-shrink: 0; opacity: 0.7; }
.vms-nav-item.active svg { opacity: 1; }
.vms-sidebar.collapsed .nav-label { display: none; }
.vms-sidebar.collapsed .vms-nav-item { justify-content: center; padding: 9px 0; }

.vms-sidebar-footer {
  padding: 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.vms-tier-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.vms-sidebar.collapsed .vms-tier-badge span { display: none; }

.vms-main {
  margin-left: 240px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
}
.vms-sidebar.collapsed ~ .vms-main { margin-left: 60px; }