/* ==========================================================================
   erp.css — Murmelkiste ERP-Module: Zeiterfassung, Einsatzplan, Berichte,
   Einkauf. Ergänzt styles.css (gleiche CSS-Variablen / Themes).
   ========================================================================== */

/* ==========================================================================
   KPI-Kacheln — Zahlen als Held (Design-Pass 27.07.2026, gilt portalweit:
   Shop-Performance, Übersicht, ERP-Tabs). Lädt NACH styles.css und
   überschreibt dessen Kachel-Grundwerte bewusst.
   ========================================================================== */
.kachel {
  position: relative;
  padding: 1em 1.15em .9em 1.3em;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.kachel::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--tuerkis), var(--tuerkis-dunkel));
}
.kachel:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(28,43,45,.08), 0 8px 24px rgba(28,43,45,.10); }
.kachel-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  margin-bottom: .35em;
}
.kachel-wert {
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kachel-wert small { font-size: .95rem; font-weight: 600; color: var(--text-schwach); letter-spacing: 0; }
/* kleine Metrik-Kacheln je Shop: eine Stufe darunter, gleiche Sprache */
.perf-metrik-kachel .kachel-wert { font-size: 1.45rem; font-weight: 800; }
/* Statuskacheln: Akzentbalken übernimmt die Ampelfarbe */
.kachel.kachel-warnung::before { background: var(--warnung); }
.kachel.kachel-gefahr::before { background: var(--gefahr); }
.kachel.kachel-ok::before { background: var(--erfolg); }
.kachel.kachel-neutral::before { background: var(--rand); }

/* Vergleichs-Chips: Richtung auf einen Blick */
.vgl-badge { font-size: .75rem; padding: .22em .6em .22em .5em; }
.vgl-badge.vgl-gruen::before { content: "▲ "; font-size: .68em; vertical-align: .12em; }
.vgl-badge.vgl-rot::before { content: "▼ "; font-size: .68em; vertical-align: .12em; }

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

/* ---------- Stempeluhr ---------- */
.stempel-leiste { display: flex; gap: .8em; flex-wrap: wrap; align-items: stretch; margin-bottom: 1em; }
.stempel-btn {
  flex: 1 1 150px; min-height: 74px; border-radius: 14px; border: 1px solid var(--rand);
  background: var(--flaeche); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .2em; font-weight: 700; font-size: 1.02rem;
  transition: transform .1s, box-shadow .15s;
}
.stempel-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--schatten); }
.stempel-btn:disabled { opacity: .35; cursor: not-allowed; }
.stempel-btn small { font-weight: 500; font-size: .78rem; color: var(--text-schwach); }
.stempel-btn-kommen { border-color: var(--erfolg); color: var(--erfolg); }
.stempel-btn-pause { border-color: var(--warnung); color: var(--warnung); }
.stempel-btn-gehen { border-color: var(--gefahr); color: var(--gefahr); }
.stempel-zustand {
  display: inline-flex; align-items: center; gap: .5em; padding: .35em .9em; border-radius: 999px;
  font-weight: 700; font-size: .9rem; background: var(--flaeche-2);
}
.stempel-zustand .ampel-punkt { width: 10px; height: 10px; }
.zeit-gross { font-size: 2.1rem; font-weight: 800; color: var(--tinte); font-variant-numeric: tabular-nums; }

/* ---------- Zielerreichung (Ist vs. Soll, Ampel + Fortschrittsbalken) ---------- */
.ziel-panel {
  border: 1px solid var(--rand); border-radius: 14px; padding: 1em 1.2em .85em;
  margin-bottom: 1em; background: var(--flaeche);
  border-left: 5px solid var(--tuerkis);
}
.ziel-panel.ziel-erreicht { border-left-color: var(--erfolg); }
.ziel-panel.ziel-ok { border-left-color: var(--erfolg); }
.ziel-panel.ziel-rueckstand { border-left-color: var(--gefahr); }
.ziel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap; }
.ziel-status { font-weight: 800; font-size: 1.05rem; }
.ziel-erreicht .ziel-status, .ziel-ok .ziel-status { color: var(--erfolg); }
.ziel-rueckstand .ziel-status { color: var(--gefahr); }
.ziel-zahlen { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-schwach); }
.ziel-balken {
  position: relative; height: 12px; border-radius: 999px; background: var(--flaeche-2);
  margin: .7em 0 .55em; overflow: visible;
}
.ziel-fuellung {
  height: 100%; border-radius: 999px; min-width: 4px;
  background: linear-gradient(90deg, var(--tuerkis), var(--tuerkis-dunkel));
  transition: width .3s ease-out;
}
.ziel-erreicht .ziel-fuellung, .ziel-ok .ziel-fuellung { background: linear-gradient(90deg, var(--erfolg), var(--tuerkis-dunkel)); }
.ziel-rueckstand .ziel-fuellung { background: linear-gradient(90deg, var(--gefahr), var(--warnung)); }
.ziel-marke {
  position: absolute; top: -3px; bottom: -3px; width: 2.5px; border-radius: 2px;
  background: var(--tinte); opacity: .55; cursor: help;
}
.ziel-fuss { display: flex; gap: 1.4em; flex-wrap: wrap; font-size: .82rem; color: var(--text-schwach); }
.ziel-fuss strong { color: var(--tinte); font-variant-numeric: tabular-nums; }
.ziel-warnhinweis { color: var(--warnung); font-weight: 700; }
.ziel-badge { display: inline-block; border-radius: 999px; padding: .18em .6em; font-size: .78rem;
  font-weight: 800; font-variant-numeric: tabular-nums; }
.ziel-badge-gruen { background: var(--erfolg-hell); color: var(--erfolg); }
.ziel-badge-rot { background: var(--gefahr-hell); color: var(--gefahr); }

/* ---------- Zeit-Tabelle ---------- */
.zeit-unvollstaendig td { color: var(--warnung); }
.zeit-heute td { background: var(--tuerkis-hell); }
.zeit-wochenende td { background: var(--flaeche-2); color: var(--text-schwach); }
.zeit-heute.zeit-wochenende td { background: var(--tuerkis-hell); }
.diff-plus { color: var(--erfolg); font-variant-numeric: tabular-nums; }
.diff-minus { color: var(--gefahr); font-variant-numeric: tabular-nums; }
.zeit-arbzg { cursor: help; color: var(--warnung); font-weight: 800; }

/* ---------- Einsatzplan ---------- */
.plan-navigation { display: flex; align-items: center; gap: .6em; }
.plan-grid-wrap { overflow-x: auto; }
table.plan-grid td { text-align: center; padding: .35em .3em; min-width: 84px; }
table.plan-grid td:first-child { text-align: left; font-weight: 600; min-width: 120px; }
.plan-zelle { display: block; border-radius: 7px; padding: .3em .35em; font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; cursor: default; }
.plan-arbeit { background: var(--erfolg-hell); color: var(--erfolg); }
.plan-homeoffice { background: var(--tuerkis-hell); color: var(--tuerkis-dunkel); }
.plan-urlaub { background: var(--warnung-hell); color: var(--warnung); }
.plan-krank { background: var(--gefahr-hell); color: var(--gefahr); }
.plan-feiertag { background: var(--flaeche-2); color: var(--text-schwach); }
.plan-vertretung { background: var(--tuerkis-hell); color: var(--tuerkis-dunkel); outline: 1px dashed var(--tuerkis-dunkel); }
.plan-frei { background: var(--flaeche-2); color: var(--text-schwach); }
.plan-leer { color: var(--rand); }

/* EINSATZPLAN-STEUERT-ZEITERFASSUNG-FRONTEND (28.07.2026) */
.plan-badge-ues {
  display: inline-block; margin-left: .3em; padding: 0 .35em; border-radius: 6px;
  font-size: .62rem; font-weight: 800; background: var(--tuerkis-dunkel); color: #fff;
  vertical-align: middle;
}
.nm-muster-tabelle { width: 100%; max-width: 480px; margin: .6em 0; border-collapse: collapse; }
.nm-muster-tabelle th, .nm-muster-tabelle td { padding: .25em .5em; text-align: left; font-size: .82rem; }
.nm-muster-tabelle input[type="number"] { width: 4.5em; }
.nm-muster-tabelle input[type="text"] { width: 100%; }
th.plan-wochenende, td.plan-wochenende { background: var(--flaeche-2); }
th.plan-feiertag, td.plan-feiertag { background: var(--warnung-hell); }
.plan-feiertag-frei { display: inline-block; border-radius: 6px; padding: .15em .3em; font-size: .72rem;
  color: var(--warnung); font-weight: 700; }
table.plan-monat td, table.plan-monat th { min-width: 30px; padding: .25em .2em; font-size: .74rem; }
table.plan-monat td:first-child, table.plan-monat th:first-child { min-width: 110px; padding-left: .5em; }
table.plan-monat .plan-zelle { padding: .12em .25em; font-size: .7rem; }
.plan-loeschbar { cursor: pointer; }
.plan-loeschbar:hover { outline: 2px solid var(--gefahr); }

/* ---------- Berichte ---------- */
.bericht-knopfreihe { display: flex; gap: .6em; flex-wrap: wrap; margin-bottom: 1em; }
.bericht-zeitraum { align-items: center; background: var(--flaeche-2); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .6em .9em; }
.bericht-zeitraum label { display: inline-flex; align-items: center; gap: .45em; font-size: .85rem;
  color: var(--text-schwach); font-weight: 500; }

/* Datums-/Zeitfelder: styles.css deckt nur text/number/… ab — ohne diese Regel
   rendern date-Inputs als nackte Browser-Standardfelder. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  padding: .45em .6em; border: 1px solid var(--rand); border-radius: 7px;
  background: var(--flaeche); color: var(--text);
  font-family: inherit; font-size: .88rem; color-scheme: light;
}
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus {
  outline: 2px solid var(--tuerkis); outline-offset: 1px; border-color: var(--tuerkis);
}
/* Natives Kalender-Icon dem Theme anpassen (dunkel = helles Icon + dunkler Picker) */
:root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="date"],
  :root:not([data-theme="light"]) input[type="time"],
  :root:not([data-theme="light"]) input[type="datetime-local"] { color-scheme: dark; }
}

/* ---------- Einkauf ---------- */
.einkauf-kritisch td:first-child { border-left: 3px solid var(--gefahr); }
th.zahl, td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tab-hinweisbox { background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: 9px;
  padding: .7em 1em; font-size: .85rem; color: var(--text-schwach); margin: .6em 0; }

/* Bestellvorschlag kompakt (Goran-Auftrag 28.07.2026): Artikel+SKU+Lieferant in
   Spalte 1, Zahlenspalten schmal + table-layout:fixed, damit die Tabelle bei
   ~1400-1900px Fensterbreite ohne horizontales Scrollen passt. */
.einkauf-tabelle-kompakt { table-layout: fixed; white-space: normal; font-size: .82rem; }
.einkauf-tabelle-kompakt th, .einkauf-tabelle-kompakt td { padding: .5em .5em; word-break: break-word; }
.einkauf-tabelle-kompakt th:first-child, .einkauf-tabelle-kompakt td:first-child { width: 30%; }
.einkauf-lieferant-zeile { display: block; }
.einkauf-reichweite-warn { color: var(--gefahr); font-weight: 700; }

/* ---------- Überlager (Goran-Auftrag 28.07.2026) ---------- */
.ueberlager-erklaerbox {
  border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche);
  margin: .8em 0 1.2em; overflow: hidden;
}
.ueberlager-erklaerbox summary {
  cursor: pointer; padding: .7em 1em; font-weight: 700; font-size: .9rem;
  list-style: none; display: flex; align-items: center; gap: .5em;
}
.ueberlager-erklaerbox summary::-webkit-details-marker { display: none; }
.ueberlager-erklaerbox summary::before { content: "▸"; transition: transform .12s; }
.ueberlager-erklaerbox[open] summary::before { transform: rotate(90deg); }
.ueberlager-erklaerbox-text {
  padding: 0 1.2em 1em; font-size: .88rem; line-height: 1.55; color: var(--text-schwach);
}
.ueberlager-erklaerbox-text p { margin: 0 0 .6em; }
.ueberlager-erklaerbox-text p:last-child { margin-bottom: 0; }
.ueberlager-filter { display: flex; gap: .5em; flex-wrap: wrap; margin: .8em 0; }
.ueberlager-filter button.zr-aktiv { background: var(--tuerkis); color: #fff; border-color: var(--tuerkis); }
.ueberlager-status-badge { display: inline-block; border-radius: 999px; padding: .2em .65em; font-size: .74rem;
  font-weight: 700; text-transform: none; letter-spacing: 0; }
.ueberlager-status-ladenhueter, .ueberlager-status-ueberlager { background: var(--gefahr-hell); color: var(--gefahr); }
.ueberlager-status-langsamdreher { background: var(--warnung-hell); color: var(--warnung); }
.ueberlager-status-gesund { background: var(--erfolg-hell); color: var(--erfolg); }
/* Chancen-Badges "Top-Produkte mit Potenzial" (28.07.) — gleiche Optik wie Status-Badges */
.ueberlager-chance-abriss { background: var(--gefahr-hell); color: var(--gefahr); }
.ueberlager-chance-knapp { background: var(--warnung-hell); color: var(--warnung); }
.ueberlager-chance-momentum { background: var(--erfolg-hell); color: var(--erfolg); }
/* Luft im Ueberlager-Kopfbereich (Goran 28.07.): Kacheln, Erklaertext und naechster
   Abschnitt brauchen sichtbaren Abstand zueinander */
#ueberlager-chancen-hinweis, #ueberlager-sortiment-hinweis {
  margin: 1.1em 0 2.4em; line-height: 1.6; max-width: 1150px;
}
#tab-ueberlager .abschnitt-titel { margin-top: 2.2em; margin-bottom: 1em; }
#ueberlager-chancen-kacheln, #ueberlager-sortiment-kacheln { margin-top: .4em; }
.ueberlager-ohne-ek-hinweis { color: var(--warnung); }

/* Ueberlager/Chancen/Sortiment-Kacheln (Goran-Vorgabe 28.07.): Betrag in eigener
   zweiter Zeile; Label und Wert mit fester Hoehe, damit Zahlen und Hinweistexte
   in allen Kacheln einer Reihe auf gleicher Hoehe beginnen. */
.uf-kachel .kachel-label { min-height: 2.4em; }
.uf-kachel .uf-wert { line-height: 1.25; min-height: 2.5em; }
.uf-kachel .uf-betrag { display: block; white-space: nowrap; }

/* PLAN-FARBEN (28.07.2026): eigene Mitarbeiterfarbe im Einsatzplan */
.plan-mf {
  background: color-mix(in srgb, var(--mf) 20%, transparent);
  border-left: 4px solid var(--mf);
  color: var(--text);
  text-transform: none;
}
.mf-punkt {
  display: inline-block; width: .7em; height: .7em; border-radius: 50%;
  background: var(--mf); margin-right: .35em; vertical-align: middle;
}
.plan-legende { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: .8em; }
.plan-legende-chip {
  display: inline-flex; align-items: center; border-radius: 999px; padding: .28em .8em;
  font-size: .8rem; font-weight: 600;
  background: color-mix(in srgb, var(--mf) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--mf) 45%, transparent);
}
.plan-legende-chip.editierbar { cursor: pointer; }
.plan-legende-chip.editierbar:hover {
  background: color-mix(in srgb, var(--mf) 26%, transparent);
  border-color: var(--mf);
}
.plan-hero {
  grid-column: 1 / -1;
}
.plan-hero .kachel-label { margin-bottom: .5em; }
.plan-hero-chips { display: flex; flex-wrap: wrap; gap: .6em; }
.plan-hero-chip {
  display: inline-flex; align-items: center; gap: .3em; border-radius: 999px;
  padding: .45em .9em; font-size: 1rem; font-weight: 700;
  background: color-mix(in srgb, var(--mf) 22%, transparent);
  border-left: 4px solid var(--mf);
}
.plan-mini-chip {
  display: inline-flex; align-items: center; border-radius: 999px; padding: .18em .6em .18em .5em;
  font-size: .8rem; font-weight: 600; background: var(--flaeche-2);
  margin: .1em .2em .1em 0;
}
th.plan-spalte-heute, td.plan-spalte-heute {
  background: color-mix(in srgb, var(--erfolg) 8%, transparent);
}
th.plan-spalte-heute { border-bottom: 2px solid var(--erfolg); }