:root {
  --page: #eaf2fb;
  --panel: #ffffff;
  --border: #dce6f2;
  --text: #1c1e21;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-light: #eff4ff;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08);

  /* Status-Farben (Kunde/Lead/Inaktiv/Wichtig) - pastellig, mit ausreichend Kontrast im Text */
  --status-kunde-bg: #e3f6e6;
  --status-kunde-text: #157a3d;
  --status-lead-bg: #fdf1d9;
  --status-lead-text: #92600a;
  --status-inaktiv-bg: #eef0f2;
  --status-inaktiv-text: #5b6472;
  --status-wichtig-bg: #fbe4e2;
  --status-wichtig-text: #b1332b;

  /* Wird per JS (updateStickyOffsets in app.js) mit den tatsächlichen Höhen von
     Header und Filterleiste befüllt, damit Header, Filter und Tabellenkopf beim
     Scrollen sauber übereinander stapeln, egal wie hoch sie gerade sind. */
  --header-h: 72px;
  --sticky-offset: 140px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--page);
  color: var(--text);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand .logo {
  height: 34px;
  width: auto;
  display: block;
}

header h1 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

header .sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

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

.logout-link {
  font-size: 13px;
  color: var(--muted);
}

main {
  padding: 24px 28px 48px;
  max-width: 1680px;
  margin: 0 auto;
}

.controls-sticky {
  position: sticky;
  top: var(--header-h);
  z-index: 15;
  background: var(--page);
  padding-top: 4px;
  padding-bottom: 4px;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar select {
  min-width: 150px;
}

#resultCount {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

/* Multiauswahl-Filter (Status/Land/Tags) - eigener Button + Checkbox-Panel statt
   natives <select multiple>, da das mit Strg/Cmd-Klick bedient werden müsste und
   für die meisten Nutzer nicht offensichtlich ist. */
.multiselect {
  position: relative;
}

.multiselect-btn {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  min-width: 150px;
  text-align: left;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.multiselect-btn:hover { border-color: var(--accent); }

.multiselect-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.multiselect-btn::after {
  content: "▾";
  float: right;
  color: var(--muted);
  margin-left: 8px;
}

.multiselect-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 25;
}

.multiselect-panel.open { display: block; }

.ms-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 8px;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.ms-option:hover { background: var(--accent-light); }

.ms-option input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.ms-option .ms-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ms-reset {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding-top: 7px;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  text-align: center;
}

.ms-reset:hover { text-decoration: underline; }

/* Von-Bis-Datumsfilter für Letzte Bestellung / Registriert seit / Letzter Login */
.date-filters {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.date-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date-filter-group label {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-range input[type="date"] {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--panel);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.date-range input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.date-range span { color: var(--muted); font-size: 13px; }

.date-range .clear-btn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 6px;
}

.date-range .clear-btn:hover { color: var(--accent); background: var(--accent-light); }

input[type="text"], input[type="password"] {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  flex: 1;
  min-width: 180px;
  background: var(--panel);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

button {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

button:hover { filter: brightness(0.97); box-shadow: var(--shadow-sm); }
button:active { transform: translateY(1px); }
button:disabled { cursor: default; opacity: 0.7; }

.table-wrap {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: visible;
}

table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  overflow-wrap: break-word;
}

/* Datumswerte sollen nie mitten in der Zahl umbrechen (z.B. "202" / "6") -
   diese Werte sind immer kurz und fest formatiert, daher hier kein Wortumbruch.
   Gilt nur für die Datenzellen, nicht die Spaltenüberschrift - die darf bei
   Bedarf weiterhin normal in zwei Zeilen umbrechen. */
td.nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
}

th {
  position: sticky;
  top: var(--sticky-offset);
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}

th:hover {
  color: var(--accent);
}

.sort-arrow {
  font-size: 10px;
  color: var(--accent);
}

tbody tr { cursor: pointer; transition: background 0.1s ease; }
tbody tr:hover { background: var(--accent-light); }
tbody tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-light);
  color: var(--accent);
  margin: 1px 0;
  white-space: nowrap;
}

/* Status-Badges - jeder Status bekommt eine eigene, dezente Farbe */
.badge.status-kunde   { background: var(--status-kunde-bg);   color: var(--status-kunde-text); }
.badge.status-lead     { background: var(--status-lead-bg);     color: var(--status-lead-text); }
.badge.status-inaktiv  { background: var(--status-inaktiv-bg);  color: var(--status-inaktiv-text); }
.badge.status-wichtig  { background: var(--status-wichtig-bg);  color: var(--status-wichtig-text); }

/* Tag-Badges - Farbe wird pro Tag dynamisch über --tag-color gesetzt (siehe app.js).
   Ohne zugewiesene Farbe (mehr als 8 verschiedene Tags) greift ein neutraler grauer Fallback. */
.badge.tag {
  background: color-mix(in srgb, var(--tag-color, #6b7280) 14%, white);
  color: color-mix(in srgb, var(--tag-color, #6b7280) 72%, black);
  border: 1px solid color-mix(in srgb, var(--tag-color, #6b7280) 26%, white);
  margin: 1px 4px 1px 0;
  white-space: normal;
}

.badge.tag.tag-neutral {
  background: #f1f2f4;
  color: var(--muted);
  border: 1px solid transparent;
}

/* Kontostatus / Außendienstmitarbeiter - bewusst als schlichter Text statt Pill-Badge,
   damit "Inaktiv" hier nicht mit dem CRM-eigenen Status "Inaktiv" (Badge-Spalte
   daneben) verwechselt wird. */
.flag-yes {
  color: var(--status-kunde-text);
  font-weight: 600;
  font-size: 13px;
}

.flag-no {
  color: var(--muted);
  font-size: 13px;
}

.right { text-align: right; }

#overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.35);
  display: none;
  z-index: 30;
}

#overlay.open { display: block; }

#panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--panel);
  box-shadow: -4px 0 24px rgba(16, 24, 40, 0.14);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
  padding: 22px;
  z-index: 31;
}

#panel.open { transform: translateX(0); }

#panel h2 {
  font-size: 18px;
  margin: 4px 0 18px;
}

.panel-close {
  float: right;
}

.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.field .value { font-size: 14px; }

h3 { margin-top: 26px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

.order-row, .note-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px;
  font-family: inherit;
  font-size: 13px;
  min-height: 60px;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 40px;
  white-space: normal;
}

/* Header-Navigation zwischen Dashboard und Kundenliste */
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

/* ---------- Dashboard ---------- */

.dashboard-main {
  padding: 24px 28px 48px;
  max-width: 1680px;
  margin: 0 auto;
}

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

.kpi-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

.kpi-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.kpi-delta {
  font-size: 12.5px;
  font-weight: 500;
}

.kpi-delta.positive { color: var(--status-kunde-text); }
.kpi-delta.negative { color: var(--status-wichtig-text); }
.kpi-delta.muted { color: var(--muted); font-weight: 400; }

.dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.dash-grid-tables {
  grid-template-columns: 1fr 1fr;
}

.dash-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 20px;
  min-width: 0;
}

.dash-card-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-card h2 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
  display: inline;
}

.dash-card-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}

/* Sortier-Umschalter (z.B. Top-Artikel: Umsatz/Menge) - schlichte Segmented-Control statt
   <select>, da nur zwei feste Optionen zur Auswahl stehen. */
.sort-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.sort-toggle-btn {
  padding: 5px 11px;
  border: none;
  border-radius: 0;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.sort-toggle-btn + .sort-toggle-btn {
  border-left: 1px solid var(--border);
}

.sort-toggle-btn:hover:not(.active) {
  background: var(--accent-light);
  color: var(--accent);
}

.sort-toggle-btn.active {
  background: var(--accent);
  color: #ffffff;
}

.chart-container {
  position: relative;
}

.chart-svg {
  width: 100%;
  height: 220px;
  display: block;
  overflow: visible;
}

.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-axis-label {
  font-size: 10.5px;
  fill: var(--muted);
}

.chart-end-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--text);
}

.chart-crosshair {
  stroke: var(--border);
  stroke-width: 1;
  pointer-events: none;
}

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--text);
  color: #ffffff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  z-index: 5;
}

.chart-tooltip-value {
  font-weight: 700;
  font-size: 13px;
}

.chart-tooltip-label {
  color: #d7dee8;
  font-size: 11px;
  margin-top: 1px;
}

.chart-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 30px 10px;
  text-align: center;
}

/* Top-Artikel-Balkendiagramm - schlichtes horizontales Balken-Ranking statt SVG,
   da variable Textlängen (Artikelnamen) mit HTML/Flexbox einfacher zu handhaben
   sind als mit SVG-Textmessung. */
.bar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 34% 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: default;
}

.bar-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bar-label-name {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-label-number {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  background: var(--accent-light);
  border-radius: 4px;
  height: 18px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: opacity 0.1s ease;
}

.bar-row:hover .bar-fill,
.bar-row:focus .bar-fill {
  filter: brightness(0.92);
}

.bar-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 60px;
}

.bar-value-main {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.bar-value-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* Kompakte Tabellen innerhalb der Dashboard-Karten - kein Sticky-Header (die
   Tabellen sind kurz, das Sticky-Verhalten ist für die lange Kundenliste gedacht). */
.dash-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

.dash-table th {
  position: static;
  font-size: 11px;
  padding: 6px 8px;
}

.dash-table td {
  font-size: 13px;
  padding: 8px 8px;
}

.dash-table tbody tr {
  cursor: default;
}

.dash-table tbody tr:hover {
  background: var(--accent-light);
}

@media (max-width: 1100px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-grid, .dash-grid-tables { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
}

/* ---------- Admin: Nutzerverwaltung ---------- */

.admin-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.admin-form .muted-hint {
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
}

.admin-form input,
.admin-form select {
  font-weight: 400;
}

.admin-form-msg {
  font-size: 13px;
  min-height: 18px;
}

.admin-form-msg.success { color: var(--status-kunde-text); }
.admin-form-msg.error { color: var(--status-wichtig-text); }

.btn-small {
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
}

.btn-danger {
  border-color: var(--status-wichtig-bg);
  color: var(--status-wichtig-text);
}

.btn-danger:hover {
  background: var(--status-wichtig-bg);
}

#login {
  max-width: 320px;
  margin: 80px auto;
  background: var(--panel);
  padding: 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}