:root{
  color-scheme: light;
  --page-bg:      #f9f9f7;
  --surface:      #fcfcfb;
  --surface-2:    #f2f1ec;
  --surface-3:    #eae9e2;
  --text-primary: #0b0b0b;
  --text-secondary:#52514e;
  --text-muted:   #898781;
  --border:       rgba(11,11,11,0.10);
  --grid:         #e1e0d9;
  --baseline:     #c3c2b7;

  --cat-wasch:    #ffdc7a;
  --cat-wasch-ink:#4a3b12;
  --cat-park:     #9cc9ff;
  --cat-park-ink: #1f3a5c;
  --cat-sonst:    #ffa8c0;
  --cat-sonst-ink:#6b1f2b;
  --cat-umsatz:   #82e097;
  --cat-umsatz-ink:#1c3d24;
  --cat-kontrolle:#d5c6ff;
  --cat-kontrolle-ink:#372c52;

  --accent:       #2a78d6;
  --fehler:       #c0392b;
  --warnung:      #b3690a;
  --warnung-bg:   #ffe9c7;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --page-bg:      #0d0d0d;
    --surface:      #1a1a19;
    --surface-2:    #202020;
    --surface-3:    #2a2a28;
    --text-primary: #ffffff;
    --text-secondary:#c3c2b7;
    --text-muted:   #898781;
    --border:       rgba(255,255,255,0.10);
    --grid:         #2c2c2a;
    --baseline:     #383835;

    --cat-wasch:    #6b4e0a;
    --cat-wasch-ink:#ffffff;
    --cat-park:     #204d85;
    --cat-park-ink: #ffffff;
    --cat-sonst:    #6f2c40;
    --cat-sonst-ink:#ffffff;
    --cat-umsatz:   #1f5c30;
    --cat-umsatz-ink:#ffffff;
    --cat-kontrolle:#4a3a78;
    --cat-kontrolle-ink:#ffffff;

    --fehler:       #ff6b6b;
    --warnung:      #f5a623;
    --warnung-bg:   #4a3512;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page-bg:      #0d0d0d;
  --surface:      #1a1a19;
  --surface-2:    #202020;
  --surface-3:    #2a2a28;
  --text-primary: #ffffff;
  --text-secondary:#c3c2b7;
  --text-muted:   #898781;
  --border:       rgba(255,255,255,0.10);
  --grid:         #2c2c2a;
  --baseline:     #383835;

  --cat-wasch:    #6b4e0a;
  --cat-wasch-ink:#ffffff;
  --cat-park:     #204d85;
  --cat-park-ink: #ffffff;
  --cat-sonst:    #6f2c40;
  --cat-sonst-ink:#ffffff;
  --cat-umsatz:   #1f5c30;
  --cat-umsatz-ink:#ffffff;
  --cat-kontrolle:#4a3a78;
  --cat-kontrolle-ink:#ffffff;

  --fehler:       #ff6b6b;
  --warnung:      #f5a623;
  --warnung-bg:   #4a3512;
}
:root[data-theme="light"]{
  color-scheme: light;
  --page-bg:      #f9f9f7;
  --surface:      #fcfcfb;
  --surface-2:    #f2f1ec;
  --surface-3:    #eae9e2;
  --text-primary: #0b0b0b;
  --text-secondary:#52514e;
  --text-muted:   #898781;
  --border:       rgba(11,11,11,0.10);
  --grid:         #e1e0d9;
  --baseline:     #c3c2b7;

  --cat-wasch:    #ffdc7a;
  --cat-wasch-ink:#4a3b12;
  --cat-park:     #9cc9ff;
  --cat-park-ink: #1f3a5c;
  --cat-sonst:    #ffa8c0;
  --cat-sonst-ink:#6b1f2b;
  --cat-umsatz:   #82e097;
  --cat-umsatz-ink:#1c3d24;
  --cat-kontrolle:#d5c6ff;
  --cat-kontrolle-ink:#372c52;

  --fehler:       #c0392b;
  --warnung:      #b3690a;
  --warnung-bg:   #ffe9c7;
}

.dashboard-page{
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.dashboard-page *{ box-sizing: border-box; }
.dashboard-wrap{
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 28px 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dashboard-flash{
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface-2);
  border-left: 3px solid var(--cat-umsatz-ink);
  color: var(--cat-umsatz-ink);
}
.dashboard-flash--fehler{ border-left-color: var(--fehler); color: var(--fehler); }

/* ---------- header ---------- */
.topbar{
  display:flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}
.dashboard-wrap h1{
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.subtitle{
  margin:0;
  font-size: 13px;
  color: var(--text-secondary);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  list-style: none;
  padding: 0;
}
.legend-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border: 0;
  background: none;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 6px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.legend-chip:hover{ background: var(--surface-2); }
.legend-chip .swatch{
  width:8px; height:8px; border-radius:2px; display:inline-block;
  border: 1px solid var(--border);
}
.legend-chip--inaktiv{
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}
.legend-chip--inaktiv .swatch{ opacity: .35; }

/* ---------- date range panel ---------- */
.range-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.range-field{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.range-field label{
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
}
.range-field input[type="date"]{
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.range-arrow{ color: var(--text-muted); font-size: 14px; padding-top: 14px; }
.range-submit{
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  margin-top: 14px;
  border-radius: 7px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.presets{ display:flex; gap:6px; flex-wrap:wrap; padding-top: 14px; }
.preset-btn{
  font: inherit;
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-block;
}
.preset-btn:hover{ background: var(--surface-3); }
.preset-btn.active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.range-days{
  margin-left: auto;
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- KPI tiles ---------- */
.kpis{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: 12px;
}
.kpi{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  position:relative;
  overflow:hidden;
}
.kpi::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--kpi-color, var(--accent));
}
.kpi .kpi-label{
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.kpi .kpi-value{
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kpi .kpi-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---------- table ---------- */
.table-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -16px rgba(0, 0, 0, 0.14);
}
.table-card-head{
  padding: 14px 16px 10px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.table-card-head h2{
  font-size: 14.5px;
  margin: 0;
  font-weight: 700;
}
.table-card-head .hint{
  font-size: 12px;
  color: var(--text-muted);
}
.table-card-head-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- Spalten-Picker ---------- */
.spalten-picker{ position: relative; }
.spalten-picker-btn{
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  user-select: none;
}
.spalten-picker-btn::-webkit-details-marker{ display: none; }
.spalten-picker-btn:hover{ background: var(--surface-3); }
.spalten-picker[open] .spalten-picker-btn{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.spalten-picker-panel{
  position: fixed;
  z-index: 20;
  width: 260px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  padding: 8px;
}
.spalten-picker-gruppe + .spalten-picker-gruppe{ margin-top: 8px; }
.spalten-picker-gruppe-label{
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.spalten-picker-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-primary);
  cursor: pointer;
}
.spalten-picker-item:hover{ background: var(--surface-2); }
.spalten-picker-item input{ cursor: pointer; }

.spalten-picker-anwenden{
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 7px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}
.table-scroll{
  overflow-x: auto;
  overflow-y: visible;
  border-top: 1px solid var(--border);
}
.dashboard-table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1100px;
  table-layout: fixed;
  font-size: 12px;
}
.dashboard-table thead tr.group-row th{
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-table thead tr.col-row th{
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 -1px 0 var(--grid);
}
.dashboard-table thead tr.col-row th.label-col{ text-align: left; }
.dashboard-table .group-border{ border-left: 3px solid var(--grp-color, transparent); }

.dashboard-table tbody td{
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--grid);
  color: var(--text-primary);
  transition: background-color .12s ease;
}
.dashboard-table tbody td.label-col{
  text-align: left;
  color: var(--text-primary);
  font-weight: 600;
}
.dashboard-table tbody td.label-col .schicht{
  display:block;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
}
.standort-link{
  margin-left: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
}
.standort-link:hover{ color: var(--accent); }
.dashboard-table tbody tr.standort-zeile td{ background: var(--surface); }
.dashboard-table tbody tr.standort-zeile:hover td{ background: var(--surface-2); }

.schicht-toggle{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
.schicht-toggle-icon{
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform .15s ease;
}
.schicht-toggle-icon.aufgeklappt{ transform: rotate(90deg); }

.dashboard-table tbody tr.schicht-zeile td{
  background: var(--surface-2);
  color: var(--text-secondary);
  font-weight: 400;
}
.dashboard-table tbody tr.schicht-zeile td.label-col{
  padding-left: 24px;
  font-weight: 400;
  color: var(--text-secondary);
}
.dashboard-table tbody tr.schicht-zeile:hover td{ background: var(--surface-3); }

/* "Schicht offen"-Text ist breiter als die Nummer-Spalte - Zelle
   zentrieren, aber einzeilig (nebeneinander) stehen lassen statt
   umzubrechen oder abzuschneiden. */
.dashboard-table tbody td.schicht-offen-zelle{
  padding-left: 6px;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

/* Schicht noch nicht abgeschlossen - bewusst keine Fehlerfarbe, da die
   Tageszahlen fuer eine offene Schicht noch nicht final sind. Nur die
   Schriftfarbe markiert das, keine Pill/Badge-Optik. */
.badge-offen{
  color: var(--warnung);
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-table tfoot td{
  padding: 11px 10px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-3);
  box-shadow: inset 0 1.5px 0 var(--baseline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-table tfoot td.label-col{ text-align:left; }

.table-card-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 14px;
}
.footnote{
  font-size: 11.5px;
  color: var(--text-muted);
}
.table-card-foot-right{
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-info{
  font-size: 12px;
  color: var(--text-muted);
}
.logout-link{
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
}
.logout-link:hover{ color: var(--accent); }

/* ---------- Light/Dark-Schalter ---------- */
.theme-toggle{
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  cursor: pointer;
}
.theme-toggle-thumb{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .18s ease;
}
.theme-toggle[aria-checked="true"] .theme-toggle-thumb{
  transform: translateX(24px);
}
.theme-toggle-icon{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted);
  pointer-events: none;
}
.theme-toggle-icon-sun{ left: 7px; }
.theme-toggle-icon-moon{ right: 7px; }

/* ---------- Detail-Popups (Leerung/Reklamation/Zählern) ---------- */
.wert-popup{
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-align: right;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 3px;
  cursor: pointer;
}
.wert-popup:hover{ color: var(--accent); }

/* Absatz/Zaehlerstand stimmen nicht ueberein. */
.wert-fehler{
  color: var(--fehler);
  font-weight: 700;
}
.wert-fehler.wert-popup{ text-decoration-color: var(--fehler); }
.wert-fehler.wert-popup:hover{ color: var(--fehler); opacity: .8; }

.popup-row--fehler td{
  color: var(--fehler);
  font-weight: 600;
}

.popup-dialog{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--text-primary);
  max-width: min(90vw, 560px);
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}
.popup-dialog::backdrop{
  background: rgba(0, 0, 0, 0.45);
}
.popup-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--cat-kontrolle);
  color: var(--text-primary);
  border-radius: 11px 11px 0 0;
}
.popup-head h3{
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
}
.popup-close{
  border: 0;
  background: none;
  padding: 4px;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.popup-close:hover{ color: var(--text-primary); }

.popup-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  max-height: 60vh;
}
.popup-table th{
  text-align: left;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface-2);
}
.popup-table td{
  padding: 8px 16px;
  border-top: 1px solid var(--grid);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.popup-table td.popup-leer{
  text-align: center;
  color: var(--text-muted);
  padding: 24px 16px;
}