/* =========================================================================
   Dashboard v3 – "Warm-Paper Operational Clarity"
   v3-A: Grundgerüst-Styling
   v3-B: Tabularziffern/Strich-Null-Fix + KPI-Card, Table, Chip, Filter-Bar
   ========================================================================= */

:root {
  /* Flächen */
  --paper: #F6F3EC;
  --paper-deep: #EFEADF;
  --card: #FFFFFF;
  --ink: #17181C;
  --ink-soft: #5C5E68;
  --ink-faint: #8B8C95;
  --line: #E5DFD1;
  --line-strong: #D8D0BD;

  /* Brand-Akzent – EINZIGER zentraler Token. Spätere logo-treue
     Feinjustierung passiert ausschließlich hier. */
  --brand: #6D3A9C;
  --brand-ink: #FFFFFF;
  --brand-tint: rgba(109, 58, 156, 0.10);
  --brand-tint-strong: rgba(109, 58, 156, 0.16);

  /* Ampel / Status */
  --ok: #15803D;
  --warn: #B45309;
  --crit: #B91C1C;

  /* Typografie */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Maße */
  --radius: 16px;
  --radius-sm: 11px;
  --sidebar-w: 248px;
  --shadow-card: 0 1px 2px rgba(23, 24, 28, 0.04), 0 8px 24px -16px rgba(23, 24, 28, 0.18);
  --shadow-pop: 0 12px 40px -20px rgba(23, 24, 28, 0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.v3 {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(109, 58, 156, 0.05), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(180, 83, 9, 0.04), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  min-height: 100dvh;
}

a { color: inherit; }

.v3-skiplink {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.v3-skiplink:focus { top: 12px; }

/* ---- Shell-Layout ------------------------------------------------------- */

.v3-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topbar"
    "main"
    "bottom";
  min-height: 100dvh;
}

.v3-sidebar { display: none; grid-area: side; }
.v3-topbar  { grid-area: topbar; }
.v3-main    { grid-area: main; }
.v3-nav--bottom { grid-area: bottom; }

/* ---- Brand -------------------------------------------------------------- */

.v3-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.v3-brand__mark {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  overflow: hidden;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(23,24,28,0.12);
}
.v3-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.v3-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.v3-brand__sub  { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- Mobile Topbar ------------------------------------------------------ */

.v3-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.v3-topbar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---- Navigation (gemeinsame Items) -------------------------------------- */

.v3-navitem {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  transition: background 0.16s var(--ease), color 0.16s var(--ease), transform 0.16s var(--ease);
}
.v3-navitem__icon {
  display: grid;
  place-items: center;
  flex: none;
}
.v3-navitem__icon svg { width: 22px; height: 22px; stroke-width: 1.7; }
.v3-navitem__label { font-weight: 600; }

/* Sidebar-Variante */
.v3-nav--side { display: flex; flex-direction: column; gap: 3px; padding: 8px; }
.v3-nav--side .v3-navitem { gap: 13px; padding: 11px 13px; }
.v3-nav--side .v3-navitem__label { font-size: 14.5px; letter-spacing: -0.005em; }
.v3-nav--side .v3-navitem:hover { background: var(--paper-deep); color: var(--ink); }
.v3-nav--side .v3-navitem[aria-current="page"] {
  background: var(--brand-tint);
  color: var(--brand);
}
.v3-nav--side .v3-navitem[aria-current="page"] .v3-navitem__icon { color: var(--brand); }

/* Bottom-Variante (mobil, horizontal scrollbar, große Trefferflächen) */
.v3-nav--bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.v3-nav--bottom::-webkit-scrollbar { display: none; }
.v3-nav--bottom .v3-navitem {
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 66px;
  min-height: 54px;
  padding: 7px 10px;
  scroll-snap-align: center;
}
.v3-nav--bottom .v3-navitem__label { font-size: 11px; letter-spacing: 0.01em; }
.v3-nav--bottom .v3-navitem[aria-current="page"] { color: var(--brand); }
.v3-nav--bottom .v3-navitem[aria-current="page"] .v3-navitem__icon {
  background: var(--brand-tint);
  border-radius: 10px;
  color: var(--brand);
}
.v3-nav--bottom .v3-navitem__icon { width: 40px; height: 28px; }

/* ---- Inhaltsbereich ----------------------------------------------------- */

/* unten Platz für die fixierte Handy-Bottom-Nav (Desktop überschreibt das). */
/* min-width:0 ist entscheidend: .v3-main ist ein Grid-Item von .v3-shell und
   würde mit dem Default min-width:auto nicht unter die min-content-Breite seines
   Inhalts (breite Tabellen/Slot-Etagen) schrumpfen. Ohne diese Zeile wird das
   ganze Layout breiter als der Viewport → Handy zoomt raus und die fixierte
   Bottom-Nav rutscht weg. Breite Tabellen scrollen stattdessen in ihrem eigenen
   overflow-x:auto-Wrapper. */
.v3-main { min-width: 0; padding: 18px 16px calc(88px + env(safe-area-inset-bottom)); outline: none; }
.v3-view { max-width: 1040px; margin: 0 auto; animation: v3-fade 0.32s var(--ease) both; }

.v3-page__head { margin: 4px 2px 18px; }
.v3-page__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.v3-page__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 34px);
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.v3-page__lead { color: var(--ink-soft); margin: 6px 0 0; max-width: 56ch; }

.v3-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

/* ---- Einheitliche Zustände (Lade / Leer / Fehler) ----------------------- */

.v3-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  min-height: 210px;
  padding: 32px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.v3-state__badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
}
.v3-state__badge svg { width: 26px; height: 26px; stroke-width: 1.7; }
.v3-state__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0; }
.v3-state__msg { color: var(--ink-soft); margin: 0; max-width: 42ch; }

.v3-state--loading .v3-state__badge { background: var(--brand-tint); color: var(--brand); }
.v3-state--empty   .v3-state__badge { background: var(--paper-deep); color: var(--ink-faint); }
.v3-state--error   .v3-state__badge { background: rgba(185, 28, 28, 0.10); color: var(--crit); }

/* Lade-Spinner */
.v3-spinner {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid var(--brand-tint-strong);
  border-top-color: var(--brand);
  animation: v3-spin 0.8s linear infinite;
}

.v3-btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 10px;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.12s var(--ease);
}
.v3-btn:hover { background: var(--paper-deep); }
.v3-btn:active { transform: translateY(1px); }
.v3-btn--brand { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.v3-btn--brand:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }

/* Platzhalter-Skeletons fürs Grundgerüst */
.v3-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.v3-skel {
  height: 96px;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--paper-deep) 30%, #fff 50%, var(--paper-deep) 70%);
  background-size: 220% 100%;
  animation: v3-shimmer 1.3s var(--ease) infinite;
}

.v3-noscript { max-width: 640px; margin: 24px auto; padding: 16px; text-align: center; }

/* ---- Animationen -------------------------------------------------------- */

@keyframes v3-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes v3-spin { to { transform: rotate(360deg); } }
@keyframes v3-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, .v3-view, .v3-spinner, .v3-skel {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Desktop-Breakpoint: Sidebar statt Bottom-Nav ----------------------- */

@media (min-width: 880px) {
  .v3-shell {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "side main";
  }
  .v3-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: 18px 14px;
    background: color-mix(in srgb, var(--paper) 60%, var(--card));
    border-right: 1px solid var(--line);
  }
  .v3-sidebar .v3-brand { padding: 6px 8px 14px; }
  .v3-sidebar__foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--line); }
  .v3-legacy-link { font-size: 13px; font-weight: 600; color: var(--ink-faint); text-decoration: none; }
  .v3-legacy-link:hover { color: var(--brand); }

  .v3-topbar { display: none; }
  .v3-nav--bottom { display: none; }
  .v3-main { padding: 30px 34px 40px; }
}

/* =========================================================================
   v3-B: Tabularziffern + Strich-Null-Fix
   ========================================================================= */

body.v3 {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}

/* =========================================================================
   v3-B: KPI-Card
   Kennzahl-Kachel mit Titel, großem Display-Wert, optionalem Delta-Pill
   und statusbedingter Farbakzentuierung über den linken Signalbalken.
   ========================================================================= */

.v3-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 600px) {
  .v3-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

.v3-kpi-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 20px 24px;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

/* Linker Signalbalken – floatend durch border-radius */
.v3-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
  opacity: 0.55;
}

/* Subtile Radiance oben rechts */
.v3-kpi-card::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 68%);
  pointer-events: none;
}

.v3-kpi-card:hover {
  box-shadow: var(--shadow-pop);
  transform: translateY(-2px);
}

.v3-kpi-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
  line-height: 1;
}

.v3-kpi-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
  margin: 0 0 12px;
}

.v3-kpi-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.v3-kpi-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.v3-kpi-card__delta--up   { background: rgba(21,128,61,0.10);  color: var(--ok);   }
.v3-kpi-card__delta--down { background: rgba(180,83,9,0.11);   color: var(--warn); }
.v3-kpi-card__delta--crit { background: rgba(185,28,28,0.10);  color: var(--crit); }

.v3-kpi-card__sub {
  font-size: 12px;
  color: var(--ink-faint);
}

/* Status-Varianten: Balken + Rahmen-Akzent */
.v3-kpi-card--warn { border-color: rgba(180,83,9,0.20); }
.v3-kpi-card--warn::before { background: var(--warn); opacity: 0.7; }
.v3-kpi-card--warn::after  { background: radial-gradient(circle, rgba(180,83,9,0.08) 0%, transparent 68%); }

.v3-kpi-card--crit { border-color: rgba(185,28,28,0.22); }
.v3-kpi-card--crit::before { background: var(--crit); opacity: 0.8; }
.v3-kpi-card--crit::after  { background: radial-gradient(circle, rgba(185,28,28,0.08) 0%, transparent 68%); }

.v3-kpi-card--ok::before { background: var(--ok); opacity: 0.6; }
.v3-kpi-card--ok::after  { background: radial-gradient(circle, rgba(21,128,61,0.07) 0%, transparent 68%); }

/* =========================================================================
   v3-B: Table
   Operationale Datentabelle. Sticky frosted Header. Zebra-Striping über
   --paper. Scroll-Schatten via CSS background-attachment-Trick.
   ========================================================================= */

.v3-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
  /* Scroll-Schatten: sichtbar nur wenn Overflow existiert */
  background:
    linear-gradient(to right, var(--card) 1px, transparent 1px) left  / 28px 100% no-repeat,
    linear-gradient(to left,  var(--card) 1px, transparent 1px) right / 28px 100% no-repeat,
    linear-gradient(to right, rgba(23,24,28,0.07), transparent) left  / 28px 100% no-repeat,
    linear-gradient(to left,  rgba(23,24,28,0.07), transparent) right / 28px 100% no-repeat;
  background-color: var(--card);
  background-attachment: local, local, scroll, scroll;
}

.v3-table {
  width: 100%;
  min-width: 480px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  line-height: 1.4;
}

.v3-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.v3-table thead th {
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  background: color-mix(in srgb, var(--paper) 75%, var(--card));
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}
.v3-table thead th:first-child { padding-left: 20px; border-radius: calc(var(--radius) - 1px) 0 0 0; }
.v3-table thead th:last-child  { padding-right: 20px; border-radius: 0 calc(var(--radius) - 1px) 0 0; }

/* Sortier-Indikator */
.v3-table thead th[aria-sort="ascending"]::after  { content: " ↑"; opacity: 0.5; }
.v3-table thead th[aria-sort="descending"]::after { content: " ↓"; opacity: 0.5; }

.v3-table tbody tr { transition: background 0.1s var(--ease); }

.v3-table tbody tr td { background: var(--card); }
.v3-table tbody tr:nth-child(even) td { background: var(--paper); }
.v3-table tbody tr:hover td { background: var(--brand-tint) !important; }

.v3-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}
.v3-table td:first-child { padding-left: 20px; }
.v3-table td:last-child  { padding-right: 20px; }

.v3-table tbody tr:last-child td { border-bottom: none; }
.v3-table tbody tr:last-child td:first-child { border-radius: 0 0 0 calc(var(--radius) - 1px); }
.v3-table tbody tr:last-child td:last-child  { border-radius: 0 0 calc(var(--radius) - 1px) 0; }

/* Nummerische Spalten – rechts ausrichten */
.v3-num {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}
.v3-num--ok   { color: var(--ok);   }
.v3-num--warn { color: var(--warn); }
.v3-num--crit { color: var(--crit); font-weight: 700; }

/* =========================================================================
   v3-B: Chip
   Status- und Filter-Label. Pillenform. Semantische Varianten mit jeweils
   bespoke Opazitätsmischung aus der Ampelpalette. Active = gefüllt.
   ========================================================================= */

.v3-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  background: var(--paper-deep);
  color: var(--ink-soft);
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
              border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
  cursor: default;
  user-select: none;
}

.v3-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
  flex: none;
}

/* Semantische Varianten */
.v3-chip--ok    { background: rgba(21,128,61,0.09);  color: var(--ok);   border-color: rgba(21,128,61,0.22);  }
.v3-chip--warn  { background: rgba(180,83,9,0.09);   color: var(--warn); border-color: rgba(180,83,9,0.22);  }
.v3-chip--crit  { background: rgba(185,28,28,0.09);  color: var(--crit); border-color: rgba(185,28,28,0.22); }
.v3-chip--brand { background: var(--brand-tint);      color: var(--brand); border-color: rgba(109,58,156,0.22); }

/* Aktiver Zustand – ausgefüllt */
.v3-chip--active,
.v3-chip[aria-pressed="true"],
.v3-chip[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 2px 8px -3px rgba(23,24,28,0.35);
}
.v3-chip--ok.v3-chip--active    { background: var(--ok);    border-color: var(--ok);    color: #fff; }
.v3-chip--warn.v3-chip--active  { background: var(--warn);  border-color: var(--warn);  color: #fff; }
.v3-chip--crit.v3-chip--active  { background: var(--crit);  border-color: var(--crit);  color: #fff; }
.v3-chip--brand.v3-chip--active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* Interaktives Chip (button / a) */
button.v3-chip,
a.v3-chip {
  appearance: none;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
button.v3-chip:hover,
a.v3-chip:hover {
  background: var(--paper);
  border-color: var(--line-strong);
  color: var(--ink);
}
button.v3-chip--brand:hover,
a.v3-chip--brand:hover { background: var(--brand-tint-strong); }

button.v3-chip:focus-visible,
a.v3-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* =========================================================================
   v3-B: Filter-Bar
   Horizontale Chip-Leiste. Scroll-Snap auf Mobilgeräten. CSS-Mask-Fade
   an beiden Rändern – ohne JS, ohne Overflow-Pfeile.
   ========================================================================= */

.v3-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
  /* Sanfter Fade-out an beiden Kanten */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 14px,
    black calc(100% - 14px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 14px,
    black calc(100% - 14px),
    transparent 100%
  );
}

.v3-filter-bar::-webkit-scrollbar { display: none; }

.v3-filter-bar > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Optional: Label vor der Bar */
.v3-filter-bar__label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-right: 4px;
  scroll-snap-align: none;
  align-self: center;
}

/* Sticky-Variante: bleibt beim Scrollen oben */
.v3-filter-bar--sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  padding-top: 8px;
  padding-bottom: 10px;
  margin-inline: -16px;
  padding-inline: 16px;
  border-bottom: 1px solid var(--line);
}

/* ===== COCKPIT PAGE (v3-C) — Control Room Redesign ======================= */

@keyframes v3-cc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.v3-cockpit {
  display: grid;
  gap: 14px;
  padding-bottom: 48px;
}

.v3-cockpit > * {
  animation: v3-cc-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.v3-cockpit > *:nth-child(1) { animation-delay:  20ms; }
.v3-cockpit > *:nth-child(2) { animation-delay:  90ms; }
.v3-cockpit > *:nth-child(3) { animation-delay: 160ms; }

/* ---- KPI STRIP: one unified instrument panel ---------------------------- */
.v3-cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(124px, 1fr));
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  overflow: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: 0 1px 4px rgba(26,23,20,0.06);
}
.v3-cockpit-kpis::-webkit-scrollbar { display: none; }

.v3-cockpit-kpi {
  scroll-snap-align: start;
  padding: 20px 22px 24px;
  position: relative;
  min-width: 124px;
}

/* internal hairline dividers */
.v3-cockpit-kpi + .v3-cockpit-kpi::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--v3-line);
}

/* colored top indicator band */
.v3-cockpit-kpi--crit::before,
.v3-cockpit-kpi--warn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.v3-cockpit-kpi--crit { background: rgba(185,28,28,0.028); }
.v3-cockpit-kpi--crit::before { background: var(--v3-crit); }
.v3-cockpit-kpi--crit .v3-cockpit-kpi__value { color: var(--v3-crit); }

.v3-cockpit-kpi--warn { background: rgba(180,83,9,0.028); }
.v3-cockpit-kpi--warn::before { background: var(--v3-warn); }
.v3-cockpit-kpi--warn .v3-cockpit-kpi__value { color: var(--v3-warn); }

.v3-cockpit-kpi__label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--v3-muted);
  margin-bottom: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v3-cockpit-kpi__value {
  display: block;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--v3-ink);
  font-variant-numeric: tabular-nums;
}

.v3-cockpit-kpi__unit {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--v3-muted);
}

/* ---- AMPEL: commanding hero panel --------------------------------------- */
.v3-cockpit-ampel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1.5px solid var(--v3-line);
  padding: 26px 26px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  transition: background 500ms ease, border-color 500ms ease;
  box-shadow: 0 2px 8px rgba(26,23,20,0.05);
}

/* State-tinted background + border */
.v3-cockpit-ampel--green {
  background: linear-gradient(135deg, rgba(21,128,61,0.07) 0%, rgba(21,128,61,0.02) 100%);
  border-color: rgba(21,128,61,0.24);
}
.v3-cockpit-ampel--yellow {
  background: linear-gradient(135deg, rgba(180,83,9,0.09) 0%, rgba(180,83,9,0.02) 100%);
  border-color: rgba(180,83,9,0.28);
}
.v3-cockpit-ampel--red {
  background: linear-gradient(135deg, rgba(185,28,28,0.09) 0%, rgba(185,28,28,0.02) 100%);
  border-color: rgba(185,28,28,0.30);
}

/* Atmospheric corner glow */
.v3-cockpit-ampel::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  filter: blur(64px);
  opacity: 0.13;
  pointer-events: none;
  transition: background 500ms;
}
.v3-cockpit-ampel--green::after  { background: var(--v3-ok); }
.v3-cockpit-ampel--yellow::after { background: var(--v3-warn); }
.v3-cockpit-ampel--red::after    { background: var(--v3-crit); }

/* Orb */
.v3-cockpit-ampel__orb {
  flex-shrink: 0;
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* Expanding pulse ring */
.v3-cockpit-ampel__orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  animation: v3-orb-expand 2.6s ease-out infinite;
}

@keyframes v3-orb-expand {
  0%   { transform: scale(1);    opacity: 0.20; }
  65%  { transform: scale(1.55); opacity: 0;    }
  100% { transform: scale(1.55); opacity: 0;    }
}

.v3-cockpit-ampel--green  .v3-cockpit-ampel__orb::before { background: var(--v3-ok);   animation-play-state: paused; opacity: 0; }
.v3-cockpit-ampel--yellow .v3-cockpit-ampel__orb::before { background: var(--v3-warn); animation-duration: 2.0s; }
.v3-cockpit-ampel--red    .v3-cockpit-ampel__orb::before { background: var(--v3-crit); animation-duration: 1.25s; }

/* The dot itself */
.v3-cockpit-ampel__dot {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  transition: box-shadow 500ms;
}

.v3-cockpit-ampel--green  .v3-cockpit-ampel__dot {
  background: var(--v3-ok);
  box-shadow: 0 4px 16px rgba(21,128,61,0.50);
}
.v3-cockpit-ampel--yellow .v3-cockpit-ampel__dot {
  background: var(--v3-warn);
  box-shadow: 0 4px 16px rgba(180,83,9,0.50);
}
.v3-cockpit-ampel--red    .v3-cockpit-ampel__dot {
  background: var(--v3-crit);
  box-shadow: 0 4px 16px rgba(185,28,28,0.50);
  animation: v3-dot-alarm 1.25s ease-in-out infinite;
}

@keyframes v3-dot-alarm {
  0%, 100% { box-shadow: 0 4px 16px rgba(185,28,28,0.50); }
  50%       { box-shadow: 0 4px 26px rgba(185,28,28,0.80), 0 0 0 8px rgba(185,28,28,0.14); }
}

.v3-cockpit-ampel__body { min-width: 0; }

.v3-cockpit-ampel__state {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.v3-cockpit-ampel--green  .v3-cockpit-ampel__state { color: var(--v3-ok); }
.v3-cockpit-ampel--yellow .v3-cockpit-ampel__state { color: var(--v3-warn); }
.v3-cockpit-ampel--red    .v3-cockpit-ampel__state { color: var(--v3-crit); }

.v3-cockpit-ampel__title {
  font-size: 21px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
  margin: 0 0 5px;
}

.v3-cockpit-ampel__msg {
  margin: 0;
  font-size: 13px;
  color: var(--v3-muted);
  line-height: 1.5;
}

/* ---- ACTION TICKETS ------------------------------------------------------ */
.v3-cockpit-actions__head {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.v3-cockpit-actions__title {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v3-muted);
}

.v3-cockpit-action-list {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Base ticket */
.v3-cockpit-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px 15px 22px;
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  min-height: 72px;
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Thick inset left stripe — no extra HTML needed */
.v3-cockpit-action--critical {
  box-shadow: inset 8px 0 0 var(--v3-crit), 0 1px 3px rgba(26,23,20,0.05);
}
.v3-cockpit-action--warning {
  box-shadow: inset 8px 0 0 var(--v3-warn), 0 1px 3px rgba(26,23,20,0.05);
}
.v3-cockpit-action--info {
  box-shadow: inset 8px 0 0 var(--v3-accent), 0 1px 3px rgba(26,23,20,0.05);
}

/* Hover: lift + colored shadow matching the stripe */
.v3-cockpit-action:hover,
.v3-cockpit-action:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.v3-cockpit-action--critical:hover,
.v3-cockpit-action--critical:focus-visible {
  box-shadow: inset 8px 0 0 var(--v3-crit), 0 8px 22px rgba(185,28,28,0.12);
}
.v3-cockpit-action--warning:hover,
.v3-cockpit-action--warning:focus-visible {
  box-shadow: inset 8px 0 0 var(--v3-warn), 0 8px 22px rgba(180,83,9,0.12);
}
.v3-cockpit-action--info:hover,
.v3-cockpit-action--info:focus-visible {
  box-shadow: inset 8px 0 0 var(--v3-accent), 0 8px 22px rgba(124,63,46,0.12);
}

.v3-cockpit-action:active { transform: translateY(0); }

.v3-cockpit-action__body  { flex: 1; min-width: 0; }
.v3-cockpit-action__top   {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}

.v3-cockpit-action__badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.v3-cockpit-action--critical .v3-cockpit-action__badge {
  background: rgba(185,28,28,0.10);
  color: var(--v3-crit);
}
.v3-cockpit-action--warning .v3-cockpit-action__badge {
  background: rgba(180,83,9,0.10);
  color: var(--v3-warn);
}
.v3-cockpit-action--info .v3-cockpit-action__badge {
  background: rgba(124,63,46,0.10);
  color: var(--v3-accent);
}

.v3-cockpit-action__title {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v3-cockpit-action__msg {
  font-size: 12px;
  color: var(--v3-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Arrow circle — fills with severity color on hover */
.v3-cockpit-action__arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--v3-bg);
  border: 1px solid var(--v3-line);
  display: grid;
  place-items: center;
  color: var(--v3-muted);
  font-size: 14px;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.v3-cockpit-action--critical:hover .v3-cockpit-action__arrow,
.v3-cockpit-action--critical:focus-visible .v3-cockpit-action__arrow {
  background: var(--v3-crit); color: #fff; border-color: transparent;
}
.v3-cockpit-action--warning:hover .v3-cockpit-action__arrow,
.v3-cockpit-action--warning:focus-visible .v3-cockpit-action__arrow {
  background: var(--v3-warn); color: #fff; border-color: transparent;
}
.v3-cockpit-action--info:hover .v3-cockpit-action__arrow,
.v3-cockpit-action--info:focus-visible .v3-cockpit-action__arrow {
  background: var(--v3-accent); color: #fff; border-color: transparent;
}

/* ---- Ausklappbare "Offene Warnungen"-Karte ------------------------------- */
.v3-cockpit-action--details { flex-direction: column; align-items: stretch; padding: 0; cursor: pointer; }
.v3-cockpit-action__sum {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px 15px 22px; min-height: 72px; list-style: none;
}
.v3-cockpit-action__sum::-webkit-details-marker { display: none; }
.v3-cockpit-action--details .v3-cockpit-action__body { flex: 1; }
.v3-cockpit-action__chev {
  flex-shrink: 0; color: var(--v3-muted); font-size: 13px;
  transition: transform 160ms ease;
}
.v3-cockpit-action--details[open] .v3-cockpit-action__chev { transform: rotate(180deg); }
.v3-warnlist {
  list-style: none; margin: 0; padding: 0 16px 14px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.v3-warnrow {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 10px; background: var(--v3-bg);
  border: 1px solid var(--v3-line);
}
.v3-warnrow__badge {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px;
}
.v3-warnrow--crit .v3-warnrow__badge { background: rgba(185,28,28,.12); color: var(--v3-crit); }
.v3-warnrow--warn .v3-warnrow__badge { background: rgba(180,83,9,.12);  color: var(--v3-warn); }
.v3-warnrow--info .v3-warnrow__badge { background: var(--v3-surface);    color: var(--v3-muted); }
.v3-warnrow__msg { font-size: 13.5px; color: var(--v3-ink, var(--ink)); line-height: 1.45; }

/* ---- Empty state --------------------------------------------------------- */
.v3-cockpit-empty {
  text-align: center;
  padding: 36px 20px;
  background: var(--v3-surface);
  border: 1px dashed var(--v3-line);
  border-radius: 14px;
  color: var(--v3-muted);
  font-size: 13px;
}
.v3-cockpit-empty__icon { font-size: 28px; line-height: 1; margin-bottom: 10px; }

/* ---- Skeleton ------------------------------------------------------------ */
.v3-cockpit-skel-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(124px, 1fr));
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  overflow: hidden;
}
.v3-cockpit-skel-kpi {
  height: 92px;
  border-radius: 0;
}
.v3-cockpit-skel-kpi + .v3-cockpit-skel-kpi {
  border-left: 1px solid var(--v3-line);
}

/* ---- Desktop two-column lower ------------------------------------------- */
@media (min-width: 860px) {
  .v3-cockpit__lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 14px;
    align-items: start;
  }
}

/* =========================================================================
   v3-D: Seite Bestand & MHD
   Karten-orientiertes Lager-Inventory mit Filter-Bar, SVG-Chart und
   Slow-Mover-Badge. Warm-Paper-Ästhetik passend zum restlichen v3-Design.
   ========================================================================= */

/* --- Filter-Bar ---------------------------------------------------------- */
.v3-lager-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 0 12px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.v3-lager-bar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.v3-lager-bar__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.v3-lager-bar select {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 6px 26px 6px 10px;
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 13px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  min-width: 120px;
}
.v3-lager-bar select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint-strong);
}

/* --- Layout: Cards links + Chart rechts (Desktop) ----------------------- */
.v3-lager-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 920px) {
  .v3-lager-layout {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }
}

/* --- Karten-Grid -------------------------------------------------------- */
.v3-lager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.v3-lager-grid--fresh .v3-lager-card { animation: v3-fade 0.28s var(--ease) both; }
.v3-lager-grid--fresh .v3-lager-card:nth-child(1) { animation-delay: .00s; }
.v3-lager-grid--fresh .v3-lager-card:nth-child(2) { animation-delay: .04s; }
.v3-lager-grid--fresh .v3-lager-card:nth-child(3) { animation-delay: .08s; }
.v3-lager-grid--fresh .v3-lager-card:nth-child(4) { animation-delay: .12s; }
.v3-lager-grid--fresh .v3-lager-card:nth-child(5) { animation-delay: .16s; }
.v3-lager-grid--fresh .v3-lager-card:nth-child(6) { animation-delay: .20s; }
.v3-lager-grid--fresh .v3-lager-card:nth-child(7) { animation-delay: .24s; }
.v3-lager-grid--fresh .v3-lager-card:nth-child(8) { animation-delay: .28s; }

/* --- Lager-Card --------------------------------------------------------- */
.v3-lager-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px 16px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.v3-lager-card:hover {
  box-shadow: var(--shadow-pop);
  transform: translateY(-2px);
}
.v3-lager-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
  opacity: .35;
}
.v3-lager-card--crit {
  border-color: rgba(185,28,28,.18);
  background: color-mix(in srgb, var(--card) 97%, #B91C1C);
}
.v3-lager-card--crit::before { background: var(--crit); opacity: 1; }
.v3-lager-card--warn {
  border-color: rgba(180,83,9,.16);
  background: color-mix(in srgb, var(--card) 98%, #B45309);
}
.v3-lager-card--warn::before { background: var(--warn); opacity: .9; }
.v3-lager-card--info::before { background: var(--brand); opacity: .35; }

.v3-lager-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.v3-lager-card__product {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.3;
  flex: 1;
}
.v3-lager-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Severity + Slow-Mover Badges */
.v3-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}
.v3-badge--crit { background: rgba(185,28,28,.1); color: var(--crit); border-color: rgba(185,28,28,.22); }
.v3-badge--warn { background: rgba(180,83,9,.1);  color: var(--warn); border-color: rgba(180,83,9,.22); }
.v3-badge--info { background: var(--paper-deep); color: var(--ink-faint); border-color: var(--line-strong); }
.v3-badge--slow-mover {
  background: rgba(234,88,12,.1);
  color: #C04A06;
  border-color: rgba(234,88,12,.28);
}

/* Drehzahl-Klassen-Badges (Slow-Mover-Klassifikation, Issue #8) */
.v3-badge--turnover-renner         { background: rgba(21,128,61,.1);  color: var(--ok);   border-color: rgba(21,128,61,.24); }
.v3-badge--turnover-normal         { background: var(--paper-deep);   color: var(--ink-faint); border-color: var(--line-strong); }
.v3-badge--turnover-langsam_dreher { background: rgba(180,83,9,.1);   color: var(--warn); border-color: rgba(180,83,9,.22); }
.v3-badge--turnover-ladenhueter    { background: rgba(185,28,28,.1);  color: var(--crit); border-color: rgba(185,28,28,.22); }
/* EK fehlt = neutral/grau (keine Bewertung, Lücke sichtbar). Neu = ruhig/blau (Schonfrist). */
.v3-badge--turnover-ek_fehlt       { background: var(--paper-deep);   color: var(--ink-faint); border-color: var(--line-strong); border-style: dashed; }
.v3-badge--turnover-neu            { background: rgba(37,99,235,.08);  color: #1d4ed8;     border-color: rgba(37,99,235,.22); }

/* Kompaktes Drehzahl-Badge in der engen Slot-Zelle (/slots) */
.v3-badge.v3-slot__turnover {
  align-self: flex-start;
  font-size: 8.5px;
  padding: 1px 5px;
  letter-spacing: .04em;
}

/* Drehzahl-Filterleiste über der Etagen-Bühne (/slots, User Story 37) */
.v3-slots-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.v3-slots-filter__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  margin-right: 2px;
}

/* Farbiger Klassen-Punkt auf den Drehzahl-Chips (Lager + Slots) */
.v3-chip--turnover-renner::before,
.v3-chip--turnover-normal::before,
.v3-chip--turnover-langsam_dreher::before,
.v3-chip--turnover-ladenhueter::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.v3-chip--turnover-renner::before         { background: var(--ok); }
.v3-chip--turnover-normal::before         { background: var(--ink-faint); }
.v3-chip--turnover-langsam_dreher::before { background: var(--warn); }
.v3-chip--turnover-ladenhueter::before    { background: var(--crit); }

/* Drehzahl-Filter im Slot-Editor: Nicht-Treffer dimmen, Treffer hervorheben.
   Wirkt auf den beim Automatenwechsel bestehenbleibenden Stage-Wrapper. */
[data-slots-stagewrap][data-turnover-filter] .v3-slot {
  opacity: .26;
  transition: opacity .15s var(--ease);
}
[data-slots-stagewrap][data-turnover-filter="renner"]         .v3-slot[data-slot-turnover="renner"],
[data-slots-stagewrap][data-turnover-filter="normal"]         .v3-slot[data-slot-turnover="normal"],
[data-slots-stagewrap][data-turnover-filter="langsam_dreher"] .v3-slot[data-slot-turnover="langsam_dreher"],
[data-slots-stagewrap][data-turnover-filter="ladenhueter"]    .v3-slot[data-slot-turnover="ladenhueter"] {
  opacity: 1;
}

/* Einstellungen-Seite */
.v3-set-title    { font-size: 16px; font-weight: 800; margin: 0 0 4px; color: var(--ink); }
.v3-set-subtitle { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin: 22px 0 10px; }
.v3-set-defs     { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v3-set-def      { display: grid; grid-template-columns: minmax(118px, max-content) 1fr; gap: 12px; align-items: start; }
.v3-set-def__text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.v3-set-list     { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }

/* Editierbare Schwellwerte/Margen (#66) */
.v3-set-grid     { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.v3-set-field    { display: grid; gap: 4px; }
.v3-set-field__label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.v3-set-field__hint  { font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; }
.v3-set-input    { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 13px; font: inherit; }
.v3-set-input:disabled { background: var(--paper-deep); color: var(--ink-faint); }
.v3-set-input--num { max-width: 120px; }
.v3-set-cattable { width: 100%; border-collapse: collapse; font-size: 13px; }
.v3-set-cattable th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
.v3-set-cattable td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.v3-set-input--cat { width: 100%; }
.v3-set-latte    { color: var(--ink-soft); white-space: nowrap; }
.v3-set-addcat   { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.v3-set-savebar  { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.v3-set-status   { font-size: 13px; color: var(--ink-soft); }
/* #31 — settings_thresholds */
.v3-set-thr-row  { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.v3-set-thr-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v3-set-thr-src  { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 4px; white-space: nowrap; }
.v3-set-thr-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v3-set-thr-input { max-width: 100px; }
.v3-set-thr-reset { padding: 4px 10px; font-size: 14px; }
.v3-set-thr-status { font-size: 13px; color: var(--ink-soft); align-self: center; }
@media (max-width: 560px) {
  .v3-set-def { grid-template-columns: 1fr; gap: 4px; }
  .v3-set-latte { white-space: normal; }
}

/* Stats grid inside card */
.v3-lager-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.v3-lager-card__stat-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  line-height: 1;
  margin-bottom: 2px;
}
.v3-lager-card__stat-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
  line-height: 1.3;
}
.v3-lager-card__stat-value--crit { color: var(--crit); font-weight: 700; }
.v3-lager-card__stat-value--warn { color: var(--warn); }

/* MHD expiry progress track */
.v3-lager-card__expiry { display: flex; flex-direction: column; gap: 4px; }
.v3-lager-card__expiry-track {
  height: 4px;
  border-radius: 2px;
  background: var(--paper-deep);
  overflow: hidden;
}
.v3-lager-card__expiry-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .5s var(--ease);
  background: var(--brand);
  opacity: .45;
}
.v3-lager-card--crit .v3-lager-card__expiry-fill { background: var(--crit); opacity: .8; }
.v3-lager-card--warn .v3-lager-card__expiry-fill { background: var(--warn); opacity: .8; }
.v3-lager-card__expiry-label {
  font-size: 10.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}
.v3-lager-card--crit .v3-lager-card__expiry-label { color: var(--crit); font-weight: 600; }
.v3-lager-card--warn .v3-lager-card__expiry-label { color: var(--warn); }

/* Aussortieren-Knopf auf den Lager-Karten (admin-only, Issue #21) */
.v3-lager-card__actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.v3-lager-card__writeoff {
  appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.v3-lager-card__writeoff:hover {
  background: rgba(185,28,28,0.08); border-color: var(--crit); color: var(--crit);
}
/* Felder im Aussortieren-Dialog (reuse v3-slots-dialog Hülle) */
.v3-writeoff__fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.v3-writeoff__label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.v3-writeoff__select, .v3-writeoff__note {
  font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink);
}
.v3-writeoff__select:focus, .v3-writeoff__note:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Empty state within the cards grid */
.v3-lager-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink-faint);
}
.v3-lager-empty svg { width: 36px; height: 36px; stroke-width: 1.5; opacity: .45; }

/* --- Chart Panel (sticky on desktop) ----------------------------------- */
.v3-lager-chart-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
@media (min-width: 920px) {
  .v3-lager-chart-panel { position: sticky; top: 1rem; }
}
.v3-lager-chart-panel__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.v3-lager-chart-empty {
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  padding: 24px 0;
}
/* SVG chart element classes */
.v3-chart-label { font-family: var(--font-body); fill: var(--ink-soft); }
.v3-chart-value { font-family: var(--font-body); fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.v3-chart-bar { transition: opacity .15s; }
.v3-chart-bar:hover { opacity: 1 !important; }
.v3-chart-bar--crit { fill: var(--crit); opacity: .72; }
.v3-chart-bar--warn { fill: var(--warn); opacity: .72; }
.v3-chart-bar--info { fill: var(--brand); opacity: .40; }

/* =========================================================================
   GuV & KPI (v3-E) – Zeitraum-Wähler, Zeitreihen-Charts, Top-N-Tabelle
   ========================================================================= */

.v3-guv { display: flex; flex-direction: column; gap: 16px; }

/* GuV-KPIs tragen große Euro-Beträge – kleinere Wertgröße als im Cockpit,
   damit nichts überläuft; auf schmalen Screens 2x2 statt 4 in einer Reihe. */
.v3-guv-kpis { margin: 0; }
.v3-guv-kpis .v3-cockpit-kpi { padding: 16px 18px 18px; min-width: 0; }
.v3-guv-kpis .v3-cockpit-kpi__value {
  font-size: clamp(19px, 3.4vw, 27px);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.v3-guv-kpis .v3-cockpit-kpi__unit { font-size: 12px; }
.v3-guv-kpis .v3-cockpit-kpi__label { margin-bottom: 8px; }
/* #40: dezenter Hinweis auf den vorläufigen laufenden Tag (Umsatz/Stück) */
.v3-guv-kpi__prov {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}
.v3-guv-kpi__warn { color: var(--warn); font-weight: 600; }
@media (max-width: 620px) {
  .v3-guv-kpis { grid-template-columns: repeat(2, 1fr); overflow-x: hidden; }
}

/* Warnbanner: fehlende Einkaufspreise (EK) in Lagerchargen */
.v3-guv-missing {
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, var(--card));
  border-radius: 14px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v3-guv-missing__head { margin: 0; font-weight: 700; color: var(--ink); font-size: 14px; }
.v3-guv-missing__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.v3-guv-missing__list li {
  font-size: 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 9px;
}
.v3-guv-missing__batch { color: var(--ink-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.v3-guv-missing__hint { margin: 0; font-size: 12px; color: var(--ink-soft); }

/* ---- Zeitraum-Wähler ---------------------------------------------------- */
.v3-guv-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 14px 16px;
}
.v3-guv-period__seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.v3-guv-period__btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: 9px;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.v3-guv-period__btn:hover { color: var(--ink); }
.v3-guv-period__btn.is-active {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 4px 12px -6px var(--brand);
}
.v3-guv-period__fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
/* Label inline neben dem Control -> Control liegt auf einer Linie mit den Tabs. */
.v3-guv-field { display: inline-flex; flex-direction: row; align-items: center; gap: 9px; }
.v3-guv-field.is-hidden { display: none; }
.v3-guv-field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
/* KW-Auswahl: Jahr + scrollbares Wochen-Dropdown nebeneinander */
.v3-guv-weekpick { display: inline-flex; align-items: center; gap: 6px; }
.v3-guv-weeksel { min-width: 156px; }
.v3-guv-weekyear { min-width: 74px; }
.v3-guv-field input,
.v3-guv-field select,
.v3-filter-select {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 11px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.v3-guv-field input:focus,
.v3-guv-field select:focus,
.v3-filter-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

/* ---- Zeitreihen-Diagramme ---------------------------------------------- */
.v3-guv-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.v3-guv-chart { padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
.v3-guv-chart__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.v3-guv-chart__empty { font-size: 13px; color: var(--ink-faint); text-align: center; padding: 38px 0; margin: 0; }

.v3-guv-line {
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 8px rgba(23, 24, 28, 0.10));
}
.v3-guv-area { transition: opacity 0.2s var(--ease); }

/* Hoverbare Datenpunkte mit Wert-Tooltip */
.v3-guv-pt__hit { fill: transparent; cursor: pointer; }
.v3-guv-pt__dot {
  fill: var(--card);
  stroke-width: 2;
  transition: r 0.12s var(--ease);
}
.v3-guv-pt:hover .v3-guv-pt__dot { r: 5.5; }
.v3-guv-pt__tip { opacity: 0; pointer-events: none; transition: opacity 0.13s var(--ease); }
.v3-guv-pt:hover .v3-guv-pt__tip { opacity: 1; }
.v3-guv-pt__tip rect { fill: var(--ink); filter: drop-shadow(0 6px 14px rgba(23, 24, 28, 0.28)); }
.v3-guv-pt__tip text {
  fill: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.v3-guv-axis { font-family: var(--font-body); font-size: 9.5px; fill: var(--ink-faint); }
.v3-guv-axisy { font-family: var(--font-body); font-size: 9px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.v3-guv-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
/* Balkendiagramm (Tagesansicht) */
.v3-guv-baseline { stroke: var(--line-strong); stroke-width: 1; }
.v3-guv-bar { transition: opacity 0.15s var(--ease); }
.v3-guv-barg:hover .v3-guv-bar { opacity: 0.8; }
.v3-guv-chartsvg { margin-top: 2px; }

/* #57 Kombi-Chart: gestapelte Balken (Wareneinsatz unten / Gewinn oben),
   Marge-Overlay-Linie auf der rechten Achse, kumulierte Gewinnlinie (Tag). */
.v3-guv-bar--cost { fill: var(--brand); opacity: 0.22; }
.v3-guv-bar--profit { fill: var(--ok); }
.v3-guv-line--margin { stroke: var(--warn); stroke-width: 2; filter: none; }
.v3-guv-line--cum { stroke: var(--ok); stroke-width: 2; stroke-dasharray: 4 3; filter: none; }
.v3-guv-dot--margin { fill: var(--card); stroke: var(--warn); }
.v3-guv-dot--cum { fill: var(--card); stroke: var(--ok); }
.v3-guv-axisy--right { fill: var(--ink-faint); }

/* Kompakte Chart-Legende */
.v3-guv-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--ink-soft); }
.v3-guv-leg { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.v3-guv-leg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--ink-faint); }
.v3-guv-leg--rev::before { background: var(--brand); }
.v3-guv-leg--cost::before { background: var(--brand); opacity: 0.35; }
.v3-guv-leg--profit::before { background: var(--ok); }
.v3-guv-leg--margin::before { background: var(--warn); border-radius: 50%; }
.v3-guv-leg--cum::before { background: var(--ok); border-radius: 50%; }

/* #57 Segment-Interaktion: pro Segment Treffer + Highlight + Einzelwert-Tooltip.
   Sichtbar bei Hover (Desktop), Fokus (Tastatur) oder Tipp (Touch, .is-tapped). */
.v3-guv-seg { cursor: pointer; outline: none; }
.v3-guv-seg__hit { fill: transparent; }
.v3-guv-seg__hl {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s var(--ease);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.v3-guv-seg__hl--margin { fill: var(--card); stroke: var(--warn); stroke-width: 2; }
.v3-guv-seg:hover .v3-guv-seg__hl,
.v3-guv-seg:focus-within .v3-guv-seg__hl,
.v3-guv-seg.is-tapped .v3-guv-seg__hl { opacity: 1; }
.v3-guv-seg:hover .v3-guv-pt__tip,
.v3-guv-seg:focus-within .v3-guv-pt__tip,
.v3-guv-seg.is-tapped .v3-guv-pt__tip { opacity: 1; }
.v3-guv-chart__hint { font-size: 11px; color: var(--ink-faint); margin: 2px 0 0; text-align: center; }

/* ---- Diagramm-Karussell (Handy) --------------------------------------- */
.v3-guv-chartsblock { display: flex; flex-direction: column; gap: 8px; }
.v3-guv-cardots { display: none; }
.v3-guv-cardot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line-strong); cursor: pointer;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
.v3-guv-cardot.is-active { background: var(--brand); transform: scale(1.25); }

/* Zeitraum-Label – sichtbares Feedback nach Wechsel */
.v3-guv-range {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.v3-guv-range strong { color: var(--ink); font-weight: 700; }

/* ---- Top-N-Tabelle ------------------------------------------------------ */
.v3-guv-tablecard { padding: 16px; }
.v3-guv-tablebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.v3-guv-tablecard__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}
.v3-guv-tablebar__controls { display: flex; gap: 8px; flex-wrap: wrap; }
.v3-guv-search {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 170px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.v3-guv-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

.v3-guv-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v3-guv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v3-guv-table th, .v3-guv-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.v3-guv-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  border-bottom: 1.5px solid var(--line-strong);
}
.v3-guv-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.v3-guv-table__na { color: var(--ink-faint); cursor: help; }
/* Zahlen-Kopfzellen ebenfalls rechtsbündig (sonst Versatz zu den Datenzellen) –
   überschreibt die linksbündige Default-Regel für thead th per höherer Spezifität */
.v3-guv-table thead th.v3-guv-table__num { text-align: right; }
.v3-guv-table thead th.v3-guv-table__num .v3-guv-sort { justify-content: flex-end; }
.v3-guv-table__name { font-weight: 600; }
.v3-guv-table tbody tr { transition: background 0.12s var(--ease); }
.v3-guv-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--paper) 40%, transparent); }
.v3-guv-table tbody tr:hover td { background: var(--paper-deep); }
.v3-guv-table__empty { text-align: center; color: var(--ink-faint); padding: 26px 0; }

.v3-guv-sort {
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.14s var(--ease);
}
.v3-guv-sort:hover { color: var(--ink); }
.v3-guv-sort.is-active { color: var(--brand); }
.v3-guv-sort__arr { font-size: 9px; }

/* ---- Standort-/Automaten-Filter --------------------------------------- */
/* Automaten-Filter steht konsistent in einer eigenen Zeile unter Tabs+Feldern
   (dezente Trennlinie oben) – in allen Modi (Monat/Woche/Eigener …) gleich,
   damit nichts je nach Feldbreite unruhig umbricht. Die obere Zeile (Tabs +
   aktives Feld) bleibt sauber auf einer Linie ausgerichtet. */
.v3-guv-period__filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* Handy: Tabs füllen die Karte gleichmäßig, Felder spannen über die volle
   Breite (Label links, Control bündig bis zum rechten Rand) – kein rechtslastiges
   Überstehen mehr. */
@media (max-width: 759px) {
  .v3-guv-period { gap: 12px; padding: 12px 14px; }
  .v3-guv-period__seg { width: 100%; }
  .v3-guv-period__btn { flex: 1 1 0; padding: 8px 2px; font-size: 13px; text-align: center; }
  .v3-guv-period__fields { width: 100%; }
  .v3-guv-field { width: 100%; }
  .v3-guv-field > span { min-width: 62px; }
  .v3-guv-field > input,
  .v3-guv-field > select,
  .v3-guv-weekpick { flex: 1 1 auto; }
  .v3-guv-weeksel { flex: 1 1 auto; min-width: 0; }
  .v3-guv-filter,
  .v3-guv-filter__summary { flex: 1 1 auto; }
}
.v3-guv-filter__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.v3-guv-filter { position: relative; }
.v3-guv-filter__summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.v3-guv-filter__summary::-webkit-details-marker { display: none; }
.v3-guv-filter__summary::after {
  content: "▾";
  font-size: 11px;
  color: var(--ink-faint);
}
.v3-guv-filter[open] .v3-guv-filter__summary { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.v3-guv-filter__clear {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 16px; line-height: 1; padding: 0 0 0 2px;
}
.v3-guv-filter__clear:hover { color: var(--ink); }
.v3-guv-filter__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(23, 24, 28, 0.16);
  padding: 8px;
}
.v3-guv-filter__group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 8px 8px 4px;
}
.v3-guv-filter__group:first-child { margin-top: 4px; }
.v3-guv-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.v3-guv-opt:hover { background: var(--paper-deep); }
.v3-guv-opt.is-on { background: var(--brand-tint); }
.v3-guv-opt input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.v3-guv-opt__txt { display: flex; flex-direction: column; line-height: 1.25; font-size: 14px; }
.v3-guv-opt__sub { font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.v3-guv-opt--loc .v3-guv-opt__txt { font-weight: 600; }

/* ---- Export-Buttons ---------------------------------------------------- */
.v3-guv-export { display: inline-flex; gap: 6px; }
.v3-guv-export__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 11px;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease);
}
.v3-guv-export__btn:hover { border-color: var(--brand); color: var(--brand); }
.v3-guv-export__btn svg { width: 16px; height: 16px; }

/* dezentes Dimmen beim Nachladen eines neuen Zeitraums */
.v3-guv-body.is-loading { opacity: 0.5; transition: opacity 0.2s var(--ease); }

/* Tablet/Desktop-Zwischenbreite: Diagramme einspaltig stapeln */
@media (max-width: 1040px) and (min-width: 681px) {
  .v3-guv-charts { grid-template-columns: 1fr; }
}

/* Handy: Diagramme als horizontales Snap-Karussell + Punkt-Indikatoren */
@media (max-width: 680px) {
  .v3-guv-charts {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .v3-guv-charts::-webkit-scrollbar { display: none; }
  .v3-guv-chart { scroll-snap-align: center; }
  .v3-guv-cardots { display: flex; justify-content: center; gap: 7px; }
  .v3-guv-export__btn span { display: none; }
  .v3-guv-export__btn { padding: 8px; }
}

/* ===== Sortiment & Slots: Etagen-Slot-Editor (/slots) ==================== */

/* Wiederverwendbare Formular-Primitive (erstmals hier definiert) */
.v3-input {
  appearance: none;
  font: inherit;
  width: 100%;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 9px 12px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.v3-input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.v3-field { display: flex; flex-direction: column; gap: 6px; }
.v3-field > span { font-size: 12px; font-weight: 600; color: var(--ink-soft); }

/* Automaten-Auswahl */
.v3-slots__machines { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Layout: Stage + Palette */
.v3-slots-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* Geräte-Rahmen (Etagen-Stapel) */
.v3-slots-stage {
  min-width: 0;
  background: linear-gradient(180deg, var(--card), var(--paper));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.6);
  padding: 16px 16px 12px;
}
.v3-slots-stage__top {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding: 0 2px 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.v3-slots-stage__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.v3-slots-stage__loc  { color: var(--ink-faint); font-size: 13px; }
.v3-slots-stage__body { display: flex; flex-direction: column; gap: 10px; }
.v3-slots-stage__tray {
  height: 12px; margin-top: 12px; border-radius: 8px;
  background: repeating-linear-gradient(90deg, var(--paper-deep) 0 14px, var(--line) 14px 16px);
  box-shadow: inset 0 2px 4px rgba(23,24,28,0.12);
}

/* Eine Etage – einklappbarer Block: Kopfzeile (Tap-Ziel) + Slot-Reihe darunter. */
.v3-slots-floor {
  min-width: 0;
  border-radius: var(--radius-sm);
}
/* Kopfzeile: volle Breite, gut tippbar, zeigt Belegung + Auf-/Zuklapp-Pfeil. */
.v3-slots-floor__toggle {
  appearance: none; font: inherit; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-align: left;
  transition: background 0.14s var(--ease);
}
.v3-slots-floor__toggle:hover { background: var(--paper-deep); }
.v3-slots-floor__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.v3-slots-floor__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint);
}
.v3-slots-floor__summary {
  font-size: 12px; font-weight: 600; color: var(--ink-faint);
}
.v3-slots-floor__chev {
  margin-left: auto; flex: none;
  width: 18px; height: 18px; color: var(--ink-faint);
  transition: transform 0.18s var(--ease);
}
.v3-slots-floor__chev svg { width: 18px; height: 18px; stroke-width: 2; display: block; }
.v3-slots-floor[data-floor-collapsed="true"] .v3-slots-floor__chev { transform: rotate(-90deg); }
.v3-slots-floor[data-floor-collapsed="true"] .v3-slots-floor__row { display: none; }

.v3-slots-floor__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 4px;
  padding: 8px;
  background: var(--paper-deep);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 3px rgba(23,24,28,0.06);
}

/* Slot-Zelle (Drop-/Tap-Ziel) */
.v3-slot {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 58px; padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease), transform 0.12s var(--ease), background 0.14s var(--ease);
}
.v3-slot:hover:not(:disabled) { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.v3-slot:disabled { cursor: default; }
.v3-slot__code { font-size: 11px; font-weight: 700; color: var(--brand); letter-spacing: 0.03em; }
.v3-slot__product {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.v3-slot--empty { background: repeating-linear-gradient(135deg, var(--card) 0 8px, var(--paper) 8px 9px); }
.v3-slot--empty .v3-slot__product { color: var(--ink-faint); font-weight: 500; }
.v3-slot__fill { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: auto; }
.v3-slot__fillbar { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* Drop-Hover + Tap-Ziel-Modus */
.v3-slot--drop {
  border-color: var(--brand); background: var(--brand-tint);
  box-shadow: 0 0 0 2px var(--brand-tint-strong); transform: translateY(-1px);
}
.v3-slots-layout.is-targeting .v3-slot:not(:disabled) {
  border-color: var(--brand); border-style: dashed;
}
.v3-slots-layout.is-targeting .v3-slot:not(:disabled):hover { background: var(--brand-tint); }
.v3-slot--justset { animation: v3-slot-pop 0.4s var(--ease) both; }
@keyframes v3-slot-pop {
  0% { box-shadow: 0 0 0 0 var(--brand-tint-strong); }
  40% { box-shadow: 0 0 0 4px var(--brand-tint-strong); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Produkt-Palette */
.v3-slots-palette {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.v3-slots-palette__title { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin: 0; }
.v3-slots-hint { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
/* "Im Lager, ohne Slot" — ausgetauschte Produkte direkt im Slot-Editor aussortieren */
.v3-slots-orphan {
  margin-top: 16px; padding: 16px; border-radius: var(--radius, 12px);
  background: var(--surface, #fff); border: 1px solid var(--line, #e7e2da);
  display: flex; flex-direction: column; gap: 8px;
}
.v3-slots-orphan__title { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin: 0; }
.v3-slots-orphan__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v3-slots-orphan__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; background: var(--surface-soft, #f6f3ee);
}
.v3-slots-orphan__name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.v3-slots-orphan__qty { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.v3-slots-palette__list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 360px; overflow-y: auto; padding-right: 2px;
}
.v3-slots-palette__empty { margin: 8px 0; font-size: 13px; color: var(--ink-faint); }
.v3-slots-palette--ro { background: var(--paper-deep); }

/* Produkt-Kachel (ziehbar + tap-bar) */
.v3-slot-tile {
  appearance: none; font: inherit; text-align: left; cursor: grab;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease), background 0.14s var(--ease), transform 0.12s var(--ease);
}
.v3-slot-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-card); background: var(--paper-deep); }
.v3-slot-tile:active { cursor: grabbing; }
/* Greif-Affordance: der weiße OS-Hand-Cursor ist auf hellem Grund kaum
   sichtbar — der Grip macht das „ziehbar" optisch deutlich (kräftiger als
   --ink-faint, auf Hover Markenfarbe + leicht größer). */
.v3-slot-tile__grip { color: var(--ink-soft); font-size: 16px; line-height: 1; letter-spacing: -2px; transition: color 0.14s var(--ease), transform 0.12s var(--ease); }
.v3-slot-tile:hover .v3-slot-tile__grip { color: var(--brand); transform: scale(1.18); }
.v3-slot-tile__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.v3-slot-tile.is-dragging { opacity: 0.5; }
.v3-slot-tile.is-selected {
  background: var(--brand); border-color: var(--brand);
  box-shadow: var(--shadow-pop); transform: translateY(-1px);
}
.v3-slot-tile.is-selected .v3-slot-tile__name,
.v3-slot-tile.is-selected .v3-slot-tile__grip { color: var(--brand-ink); }

/* Vorschau-Dialog */
.v3-slots-dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; }
.v3-slots-dialog[hidden] { display: none; }
.v3-slots-dialog__backdrop { position: absolute; inset: 0; background: rgba(23,24,28,0.34); backdrop-filter: blur(2px); }
.v3-slots-dialog__card {
  position: relative;
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 20px;
  animation: v3-dialog-in 0.22s var(--ease) both;
}
@keyframes v3-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.v3-slots-dialog__eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.v3-slots-dialog__flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px; margin-bottom: 16px;
  background: var(--brand-tint); border-radius: var(--radius-sm);
}
.v3-slots-dialog__product { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.v3-slots-dialog__arrow { color: var(--brand); font-weight: 700; }
.v3-slots-dialog__target { font-weight: 600; }
.v3-slots-dialog__target small { color: var(--ink-faint); font-weight: 500; }
.v3-slots-dialog__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.v3-slots-dialog__error {
  margin: 0 0 12px; padding: 9px 12px; font-size: 13px;
  color: var(--crit); background: rgba(185,28,28,0.08);
  border: 1px solid rgba(185,28,28,0.22); border-radius: 9px;
}
.v3-slots-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Toast */
.v3-toast {
  position: fixed; left: 50%; bottom: 86px; transform: translate(-50%, 12px);
  z-index: 70; max-width: 92vw;
  padding: 11px 18px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.v3-toast[hidden] { display: none; }
.v3-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .v3-slot--justset, .v3-slots-dialog__card { animation: none; }
}

/* Desktop: Palette als Seitenspalte, Drag&Drop primär */
@media (min-width: 880px) {
  .v3-slots-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .v3-slots-palette { position: sticky; top: 18px; }
  .v3-toast { bottom: 28px; }
}

/* ----- Pointer-Drag (Maus + Touch): Ziehbare Elemente, Ghost ----------- */
[data-draggable] { touch-action: none; }
.v3-slot[data-draggable] { cursor: grab; }
.v3-slot[data-draggable]:active { cursor: grabbing; }
.v3-slot.is-dragging, .v3-slot-tile.is-dragging { opacity: 0.45; }
.v3-slots-layout.is-dragging-active { cursor: grabbing; }
.v3-slots-layout.is-dragging-active .v3-slot:not(.is-dragging) { border-style: dashed; }

.v3-slots-ghost {
  position: fixed; z-index: 80; pointer-events: none;
  transform: translate(-50%, -120%);
  padding: 7px 13px; border-radius: 10px;
  background: var(--brand); color: var(--brand-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-pop);
}

/* Bestand-Zeile in der Slot-Zelle */
.v3-slot__meta { font-size: 11px; font-weight: 600; color: var(--ink-faint); }

/* Dialog: Notiz + Tausch-Darstellung */
.v3-slots-dialog__note { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); }
.v3-slots-dialog__swap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 14px; margin-bottom: 12px;
  background: var(--brand-tint); border-radius: var(--radius-sm);
}
.v3-slots-dialog__swapside { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.v3-slots-dialog__swapside b { font-family: var(--font-display); font-size: 14px; }
.v3-slots-dialog__swapside small { color: var(--ink-faint); font-size: 12px; }
.v3-slots-dialog__swapcode { font-size: 11px; font-weight: 700; color: var(--brand); letter-spacing: 0.03em; }
.v3-slots-dialog__swapicon { font-size: 22px; color: var(--brand); font-weight: 700; }

/* Nachfüll-Steuerung */
.v3-slots-refill { display: flex; gap: 10px; margin-bottom: 14px; }
.v3-slots-refill__stat {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; background: var(--paper-deep); border-radius: var(--radius-sm);
}
.v3-slots-refill__stat span { font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.v3-slots-refill__stat b { font-family: var(--font-display); font-size: 16px; }
.v3-slots-refill__stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.v3-slots-refill__step {
  width: 42px; height: 42px; padding: 0; font-size: 20px; line-height: 1;
  display: grid; place-items: center; border-radius: 11px;
}
.v3-slots-refill__qty {
  min-width: 54px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.v3-slots-refill__full { margin-left: auto; }
.v3-slots-refill__hint { margin: 0 0 12px; min-height: 16px; font-size: 12.5px; color: var(--ink-faint); }
.v3-slots-refill__hint.is-warn { color: var(--warn); font-weight: 600; }

/* =========================================================================
   v3-G: Monitoring-Statusboard + Korrekturfälle
   ========================================================================= */

.v3-mon-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (min-width: 720px) {
  .v3-mon-board { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
}

/* Gesamt-Ampel — der schlechteste Zustand bestimmt den Ton */
.v3-mon-overall {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.v3-mon-overall::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--ink-faint);
}
.v3-mon-overall--green::before { background: var(--ok); }
.v3-mon-overall--yellow::before { background: var(--warn); }
.v3-mon-overall--red::before { background: var(--crit); }
.v3-mon-overall__orb {
  flex: none;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
}
.v3-mon-overall--green .v3-mon-overall__orb { background: rgba(21, 128, 61, 0.12); }
.v3-mon-overall--yellow .v3-mon-overall__orb { background: rgba(180, 83, 9, 0.12); }
.v3-mon-overall--red .v3-mon-overall__orb { background: rgba(185, 28, 28, 0.12); }
.v3-mon-overall__dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-faint);
}
.v3-mon-overall--green .v3-mon-overall__dot { background: var(--ok); box-shadow: 0 0 0 6px rgba(21,128,61,0.14); }
.v3-mon-overall--yellow .v3-mon-overall__dot { background: var(--warn); box-shadow: 0 0 0 6px rgba(180,83,9,0.14); }
.v3-mon-overall--red .v3-mon-overall__dot { background: var(--crit); box-shadow: 0 0 0 6px rgba(185,28,28,0.16); animation: v3-mon-pulse 2.2s var(--ease) infinite; }
@keyframes v3-mon-pulse { 50% { box-shadow: 0 0 0 11px rgba(185,28,28,0); } }
.v3-mon-overall__state {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.v3-mon-overall--green .v3-mon-overall__state { color: var(--ok); }
.v3-mon-overall--yellow .v3-mon-overall__state { color: var(--warn); }
.v3-mon-overall--red .v3-mon-overall__state { color: var(--crit); }
.v3-mon-overall__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 2px 0 2px; }
.v3-mon-overall__msg { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

/* Verteilung: Zähler + kompakte SVG-Leiste */
.v3-mon-dist {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-card);
}
.v3-mon-counts { display: flex; gap: 10px; }
.v3-mon-count {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 12px; border-radius: var(--radius-sm); background: var(--paper-deep);
  border: 1px solid transparent;
}
.v3-mon-count--red { background: rgba(185,28,28,0.07); border-color: rgba(185,28,28,0.16); }
.v3-mon-count--yellow { background: rgba(180,83,9,0.07); border-color: rgba(180,83,9,0.16); }
.v3-mon-count--green { background: rgba(21,128,61,0.07); border-color: rgba(21,128,61,0.16); }
.v3-mon-count__num { font-family: var(--font-display); font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.v3-mon-count--red .v3-mon-count__num { color: var(--crit); }
.v3-mon-count--yellow .v3-mon-count__num { color: var(--warn); }
.v3-mon-count--green .v3-mon-count__num { color: var(--ok); }
.v3-mon-count__label { font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.v3-mon-distbar { width: 100%; height: 14px; display: block; }
.v3-mon-distbar rect { transition: width 0.4s var(--ease); }

/* Filter-Chips */
.v3-mon-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.v3-mon-chip {
  appearance: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.v3-mon-chip:hover { background: var(--paper-deep); }
.v3-mon-chip[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.v3-mon-chip__dot { width: 9px; height: 9px; border-radius: 50%; }
.v3-mon-chip__dot--red { background: var(--crit); }
.v3-mon-chip__dot--yellow { background: var(--warn); }
.v3-mon-chip__dot--green { background: var(--ok); }
.v3-mon-chip__count { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* Ampel-Liste */
.v3-mon-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .v3-mon-list { grid-template-columns: 1fr 1fr; } }
.v3-mon-ampel {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 16px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line);
  border-left-width: 4px; box-shadow: var(--shadow-card);
}
.v3-mon-ampel--green { border-left-color: var(--ok); }
.v3-mon-ampel--yellow { border-left-color: var(--warn); }
.v3-mon-ampel--red { border-left-color: var(--crit); }
.v3-mon-ampel__dot { flex: none; width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; }
.v3-mon-ampel--green .v3-mon-ampel__dot { background: var(--ok); }
.v3-mon-ampel--yellow .v3-mon-ampel__dot { background: var(--warn); }
.v3-mon-ampel--red .v3-mon-ampel__dot { background: var(--crit); }
.v3-mon-ampel__label { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 0; }
.v3-mon-ampel__msg { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }

/* Korrekturfälle */
.v3-mon-section { margin-top: 26px; }
.v3-mon-section__head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 14px; }
.v3-mon-section__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 0; letter-spacing: -0.01em; }
.v3-mon-section__count {
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand); font-variant-numeric: tabular-nums;
}
.v3-mon-cases { display: grid; grid-template-columns: 1fr; gap: 12px; }
.v3-mon-case {
  padding: 16px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.v3-mon-case__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.v3-mon-case__type {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 7px; background: var(--paper-deep); color: var(--ink-soft);
}
.v3-mon-case__type--warning { background: rgba(180,83,9,0.10); color: var(--warn); }
.v3-mon-case__type--unknown { background: rgba(185,28,28,0.09); color: var(--crit); }
.v3-mon-case__meta { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.v3-mon-case__msg { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
.v3-mon-case__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v3-mon-case__suggest {
  margin-top: 12px; padding: 14px; border-radius: var(--radius-sm);
  background: var(--paper-deep); border: 1px dashed var(--line-strong);
}
.v3-mon-case__suggest p { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.v3-mon-case__select {
  width: 100%; font: inherit; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); margin-bottom: 10px;
}
.v3-mon-case__suggested { font-weight: 600; color: var(--brand); }
.v3-mon-case__result { margin: 10px 0 0; font-size: 13px; font-weight: 600; }
.v3-mon-case__result.is-ok { color: var(--ok); }
.v3-mon-case__result.is-err { color: var(--crit); }
.v3-mon-cases-empty {
  display: flex; align-items: center; gap: 12px; padding: 18px;
  border-radius: var(--radius); background: rgba(21,128,61,0.06);
  border: 1px solid rgba(21,128,61,0.16); color: var(--ok); font-weight: 600;
}

/* =========================================================================
   v3-G: Automaten- & Standortprofile
   ========================================================================= */

.v3-auto-summary { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
/* Admin: Anlegen-Formulare (Standort/Automat) */
.v3-auto-admin { margin: 0 0 20px; }
.v3-auto-admin__bar { display: flex; gap: 10px; flex-wrap: wrap; }
.v3-auto-form {
  margin-top: 12px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .v3-auto-form { grid-template-columns: 1fr 1fr; } }
/* hidden-Attribut muss display:grid schlagen, sonst sind die Formulare immer offen */
.v3-auto-form[hidden] { display: none; }
.v3-auto-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.v3-auto-field span { font-weight: 600; }
.v3-auto-field input, .v3-auto-field select {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 14px;
}
.v3-auto-field input:focus, .v3-auto-field select:focus {
  outline: none; border-color: var(--brand);
}
.v3-auto-form__actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.v3-auto-form__msg { font-size: 13px; color: var(--ink-faint); }
.v3-auto-form__msg.is-ok { color: var(--ok); }
.v3-auto-form__msg.is-err { color: var(--crit, #b4232a); }
/* Karten-Aktionen: Aussondern / Reaktivieren / Standort löschen */
.v3-auto-card__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.v3-auto-card__retire, .v3-auto-loc-card__del {
  background: none; border: none; padding: 4px 2px; cursor: pointer;
  font-size: 12.5px; color: var(--crit, #b4232a); font-weight: 600;
}
.v3-auto-card__retire:hover, .v3-auto-loc-card__del:hover { text-decoration: underline; }
.v3-auto-card--retired { opacity: 0.72; }
.v3-auto-card__retiredtag {
  font-size: 11px; font-weight: 600; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap;
}
.v3-auto-card__reactivate { font-size: 12.5px; padding: 5px 12px; }
.v3-auto-loc-card__actions { margin-top: 8px; }
.v3-auto-retired-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit;
}
.v3-auto-retired-caret { color: var(--ink-faint); transition: transform 0.15s ease; }
.v3-auto-retired-toggle[aria-expanded="true"] .v3-auto-retired-caret { transform: rotate(180deg); }
.v3-auto-stat {
  flex: 1; min-width: 96px; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.v3-auto-stat__num { font-family: var(--font-display); font-weight: 800; font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1; }
.v3-auto-stat__label { font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }

.v3-auto-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.v3-auto-grid[hidden] { display: none; }
@media (min-width: 560px) { .v3-auto-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .v3-auto-grid { grid-template-columns: 1fr 1fr 1fr; } }

.v3-auto-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.v3-auto-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v3-auto-card__id {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 3px 9px; border-radius: 7px; background: var(--paper-deep); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.v3-auto-card__label { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; letter-spacing: -0.01em; }
.v3-auto-card__attrs { display: flex; flex-wrap: wrap; gap: 6px; }
.v3-auto-attr {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  padding: 3px 9px; border-radius: 999px; background: var(--paper-deep);
}
.v3-auto-card__jump { margin-top: 2px; align-self: flex-start; }

.v3-auto-loc-chip {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--paper-deep); color: var(--ink-soft); white-space: nowrap;
}
.v3-auto-loc-chip--aktiv { background: rgba(21,128,61,0.10); color: var(--ok); }
.v3-auto-loc-chip--geplant { background: var(--brand-tint); color: var(--brand); }
.v3-auto-loc-chip--inaktiv { background: rgba(92,94,104,0.12); color: var(--ink-soft); }
.v3-auto-loc-chip--none { background: rgba(180,83,9,0.10); color: var(--warn); }

.v3-auto-section { margin-top: 26px; }
.v3-auto-loc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .v3-auto-loc-grid { grid-template-columns: 1fr 1fr; } }
.v3-auto-loc-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border-radius: var(--radius-sm); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.v3-auto-loc-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v3-auto-loc-card__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.v3-auto-loc-card__meta { margin: 0; font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Sprung-Ziel-Hervorhebung auf der Slot-Seite */
.v3-slots-stage.is-jump-target { animation: v3-jump-flash 1.6s var(--ease); }
@keyframes v3-jump-flash {
  0%, 100% { box-shadow: var(--shadow-card); }
  20% { box-shadow: 0 0 0 3px var(--brand-tint-strong), var(--shadow-card); }
}
@media (prefers-reduced-motion: reduce) {
  .v3-slots-stage.is-jump-target { animation: none; outline: 2px solid var(--brand); outline-offset: 2px; }
}

/* =========================================================================
   v3-G: Produkt-Onboarding (geführter Stepper)
   ========================================================================= */

.v3-onb-card { margin-bottom: 16px; }
.v3-onb-card__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 4px; letter-spacing: -0.01em; }
.v3-onb-card__lead { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; }

.v3-onb-steps { display: flex; flex-direction: column; gap: 12px; }
.v3-onb-step {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.v3-onb-step--todo { opacity: 0.62; }
.v3-onb-step--current { border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px var(--brand-tint); }
.v3-onb-step--complete { border-color: rgba(21,128,61,0.3); background: var(--card); }
.v3-onb-step__head { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; }
.v3-onb-step__badge {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper-deep); color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
.v3-onb-step--current .v3-onb-step__badge { background: var(--brand); color: var(--brand-ink); }
.v3-onb-step--complete .v3-onb-step__badge { background: var(--ok); color: #fff; font-size: 0; }
.v3-onb-step--complete .v3-onb-step__badge::after { content: "\2713"; font-size: 15px; }
.v3-onb-step__label { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.v3-onb-step__body { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; padding-left: 39px; }

.v3-onb-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 160px; }
.v3-onb-field__label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.v3-onb-field__label em { color: var(--ink-faint); font-style: normal; font-weight: 500; }
.v3-onb-input {
  font: inherit; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.v3-onb-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.v3-onb-input.is-missing { border-color: var(--warn); }

.v3-onb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.v3-onb-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.v3-onb-result { margin: 14px 0 0; font-size: 13.5px; font-weight: 600; }
.v3-onb-result.is-ok { color: var(--ok); }
.v3-onb-result.is-err { color: var(--crit); }

/* Funnel */
.v3-onb-funnel { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .v3-onb-funnel { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.v3-onb-stage { display: flex; flex-direction: column; gap: 8px; }
.v3-onb-stage__top { display: flex; align-items: baseline; gap: 8px; }
.v3-onb-stage__count { font-family: var(--font-display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1; }
.v3-onb-stage__label { font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.v3-onb-stage__bar { height: 7px; border-radius: 4px; background: var(--paper-deep); overflow: hidden; }
.v3-onb-stage__bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width 0.4s var(--ease); }

.v3-onb-ready { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.v3-onb-ready__title { margin: 0 0 10px; font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.v3-onb-ready__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.v3-onb-ready__item + .v3-onb-ready__item { border-top: 1px solid var(--line); }

/* Unbekannte Nayax-Produkte */
.v3-onb-unknown { display: grid; grid-template-columns: 1fr; gap: 8px; }
.v3-onb-unknown__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line);
}
.v3-onb-unknown__key { font-weight: 600; font-size: 14px; }
.v3-onb-unknown__tx { margin-left: 10px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.v3-onb-unknown__done {
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  background: rgba(21,128,61,0.10); color: var(--ok);
}
.v3-onb-unknown__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* Rechnungsfreigabe (WF2-Routing) */
.v3-onb-approvals { display: grid; grid-template-columns: 1fr; gap: 10px; }
.v3-onb-approval {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line);
}
.v3-onb-approval__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.v3-onb-approval__nr { font-weight: 600; font-size: 14px; }
.v3-onb-approval__meta { font-size: 12px; color: var(--ink-faint); }
.v3-onb-approval__open {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Ready-Liste steht jetzt eigenständig in ihrer Karte */
.v3-onb-card .v3-onb-ready { margin-top: 4px; padding-top: 0; border-top: none; }

/* Schlanke Statuszeile */
.v3-onb-status { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.v3-onb-stat {
  flex: 1; min-width: 96px; display: flex; flex-direction: column; gap: 2px;
  padding: 13px 15px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.v3-onb-stat__num { font-family: var(--font-display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1; }
.v3-onb-stat__label { font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.v3-onb-stat--approvals .v3-onb-stat__num { color: var(--warn); }
.v3-onb-stat--verkaufsbereit .v3-onb-stat__num { color: var(--ok); }

/* Rechnungs-Upload */
.v3-onb-upload { display: flex; flex-direction: column; gap: 12px; }
.v3-onb-upload__drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 26px 18px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--paper); transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.v3-onb-upload__drop:hover { border-color: var(--brand); background: var(--brand-tint); }
.v3-onb-upload__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--brand-tint); color: var(--brand); }
.v3-onb-upload__icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.v3-onb-upload__cta { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.v3-onb-upload__cta b { color: var(--brand); }
.v3-onb-upload__file { font-size: 12.5px; color: var(--ink-faint); }
.v3-onb-upload__file.is-set { color: var(--ink); font-weight: 600; }
.v3-onb-upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v3-onb-upload__actions { display: flex; }
.v3-onb-upload__actions .v3-btn { width: 100%; }
.v3-onb-upload__result { margin: 0; font-size: 13.5px; font-weight: 600; min-height: 18px; }
.v3-onb-upload__result.is-ok { color: var(--ok); }
.v3-onb-upload__result.is-err { color: var(--crit); }
.v3-onb-upload__drive { margin: 0; font-size: 12px; color: var(--ink-faint); }
.v3-onb-unknown__cta { margin-top: 14px; }

/* =========================================================================
   v3-G: „Automat voll auffüllen" (Bulk-Refill, Lager-begrenzt)
   ========================================================================= */

.v3-slots-fillbtn { margin-left: auto; font-size: 13px; padding: 8px 14px; white-space: nowrap; }

.v3-slots-fillpanel {
  margin-top: 16px; padding: 18px;
  border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  animation: v3-fade 0.24s var(--ease) both;
}
.v3-slots-fillpanel[hidden] { display: none; }
/* Nayax-Abgleich-Panel: festes, zentriertes Floating-Panel (Bottom-Sheet) mit
   Scrim — auf dem Handy sofort sichtbar, unabhaengig von der Scrollposition der
   langen Slots-Seite (sonst rendert das Ergebnis weit unten ausserhalb des Sicht-
   bereichs und der Nutzer sieht nach dem Klick scheinbar "nichts"). */
.v3-slots-fillpanel[data-slots-abgleichpanel]:not([hidden]) {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  max-height: min(82vh, 720px);
  overflow-y: auto;
  margin-top: 0;
  z-index: 1200;
  box-shadow: var(--shadow-pop), 0 0 0 100vmax rgba(23, 24, 28, 0.38);
  animation: v3-abgleich-pop 0.2s var(--ease) both;
}
@keyframes v3-abgleich-pop {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.v3-slots-fill-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.v3-slots-fill-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.v3-slots-fill-close {
  margin-left: auto; appearance: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink-soft); font-size: 20px; line-height: 1;
}
.v3-slots-fill-close:hover { background: var(--paper-deep); }
.v3-slots-fill-lead { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); }
.v3-slots-fill-lead b { color: var(--ink); }
.v3-slots-fill-empty { margin: 6px 0 0; color: var(--ink-soft); }

.v3-slots-fill-rows { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.v3-slots-fill-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line);
}
.v3-slots-fill-row.is-capped { background: rgba(180,83,9,0.06); border-color: rgba(180,83,9,0.22); }
.v3-slots-fill-row__name { font-weight: 600; font-size: 14px; }
.v3-slots-fill-row__name em { color: var(--ink-faint); font-style: normal; font-weight: 500; font-size: 12px; }
.v3-slots-fill-row__qty { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.v3-slots-fill-row__add {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ok);
  font-variant-numeric: tabular-nums; min-width: 38px; text-align: right;
}
.v3-slots-fill-row__add.is-zero { color: var(--ink-faint); }
.v3-slots-fill-row__cap {
  grid-column: 1 / -1; justify-self: start;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(180,83,9,0.12); color: var(--warn);
}
.v3-slots-fill-note {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(180,83,9,0.08); border: 1px solid rgba(180,83,9,0.2);
  font-size: 12.5px; color: var(--warn); font-weight: 600;
}
.v3-slots-fill-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.v3-slots-fill-sum { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: auto; }

/* ---- Lager-Tabelle (Bestand & MHD) --------------------------------------- */
.v3-lager-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  background: var(--card);
}
.v3-lager-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.v3-lager-th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
  background: var(--paper);
}
.v3-lager-th--sortable { cursor: pointer; user-select: none; }
.v3-lager-th--sortable:hover { color: var(--ink); }
.v3-lager-th__arrow { margin-left: 4px; font-size: 10px; }
.v3-lager-th__arrow--idle { opacity: 0.4; }
.v3-lager-td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}
.v3-lager-td--name { font-weight: 600; max-width: 200px; }
.v3-lager-td--mhd  { color: var(--ink-soft); font-size: 13px; }
.v3-lager-td--days { white-space: nowrap; }
.v3-lager-td--qty     { font-weight: 600; text-align: right; }
.v3-lager-td--machine { font-weight: 600; text-align: right; color: var(--ok); }
.v3-lager-td--action  { width: 40px; text-align: center; }
.v3-lager-drift { font-size: 11px; color: var(--warn); cursor: help; margin-left: 4px; }
.v3-lager-row:last-child .v3-lager-td { border-bottom: none; }
.v3-lager-row--crit .v3-lager-td--name { color: var(--crit); }
.v3-lager-row--warn .v3-lager-td--name { color: var(--warn); }
.v3-lager-row:hover { background: var(--paper); }
.v3-lager-row__writeoff {
  border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 16px; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.v3-lager-row__writeoff:hover { color: var(--crit); background: rgba(185,28,28,.08); }
.v3-badge--ok { background: rgba(21,128,61,.08); color: var(--ok); border-color: rgba(21,128,61,.2); }

/* ---- Chargensuche-Sektion (/lager) ------------------------------------- */
.v3-lager-search-section {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.v3-lager-search-section__title {
  font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 4px;
}
.v3-lager-search-section__lead {
  font-size: 13px; color: var(--ink-soft); margin: 0 0 16px;
}

/* ---- Live-Umsatz-Kachel (quasi-live, GuV-Seite) ------------------------ */
.v3-live { padding: 18px 20px; }
.v3-live__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.v3-live__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink);
}
.v3-live__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 0 rgba(21,128,61,.45);
  animation: v3-live-pulse 2s ease-out infinite;
}
@keyframes v3-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21,128,61,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(21,128,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(21,128,61,0); }
}
@media (prefers-reduced-motion: reduce) { .v3-live__dot { animation: none; } }
.v3-live__meta { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }

.v3-live__kpis { margin: 0 0 4px; }
.v3-live__kpis .v3-cockpit-kpi { padding: 14px 16px 15px; min-width: 0; }
.v3-live__kpis .v3-cockpit-kpi__value { font-size: 22px; font-variant-numeric: tabular-nums; }
.v3-live__kpis .v3-cockpit-kpi__unit { font-size: 12px; }
.v3-live__kpis .v3-cockpit-kpi__label { margin-bottom: 6px; }

.v3-live__details { margin-top: 12px; border-top: 1px solid var(--line); }
.v3-live__summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 7px;
  padding: 12px 0 8px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-faint);
}
.v3-live__summary::-webkit-details-marker { display: none; }
.v3-live__summary::before {
  content: '▸'; font-size: 10px; color: var(--ink-faint);
  transition: transform .15s ease;
}
.v3-live__details[open] .v3-live__summary::before { transform: rotate(90deg); }
.v3-live__summary:hover { color: var(--ink); }
.v3-live__list { list-style: none; margin: 0 0 4px; padding: 0; }
.v3-live__row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.v3-live__row:last-child { border-bottom: none; }
.v3-live__time { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.v3-live__prod { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-live__qty { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.v3-live__amt { font-size: 14px; font-weight: 600; color: var(--ok); font-variant-numeric: tabular-nums; }
.v3-live__empty, .v3-live__loading, .v3-live__error {
  margin: 6px 0 2px; font-size: 13px; color: var(--ink-faint);
}
.v3-live__error { color: var(--warn); }