/* =============================================================================
   ERP Holzbau – Layout (Spezifikation D.2)
   -----------------------------------------------------------------------------
   Nur Layout: App-Grid, Navbar-Aufteilung, Icon-Sidebar 60 → 220 px, Workspace,
   Drawer-/Dialog-Overlay-Steuerung (eigene 150-ms-Transition statt der React-
   Klassen), Bottom-Bar < 720 px, Dashboard-Grid 12/6/1, Dichte-Anwendung,
   Scan-Vollbild (body.scan-mode), Druck (inkl. Etikettenbogen A4 3×8).
   Alles Visuelle kommt aus Blueprint (bp6-…) und den Tokens in tokens.css.

   Breakpoints: Desktop ≥ 1200 px · Tablet 720–1199 px · Handy < 720 px.

   Klassen, die andere Module setzen (Vertrag dieser Datei):
     body.bp6-dark | body.density-compact|touch|halle | body.scan-mode |
     body.sidebar-expanded (Sidebar fest 220 px) | body.print-labels |
     .app.has-banner (Update-Banner sichtbar → Workspace rückt nach unten)
     .app.has-banner-2 / .has-banner-3 (Sitzungs-Banner mit einer / zwei Zeilen; --banner-rows = Summe)
     .widget mit --span-lg / --span-md (Zahl) oder Klassen .w-lg-N / .w-md-N,
     --order-sm für die Handy-Reihenfolge
     .drawer-open / .dialog-open werden nicht benötigt: Overlays steuern sich
     über bp6-overlay-open selbst.
   ============================================================================= */

/* ------------------------------------------------------------------ Basis */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: hidden; /* der Workspace scrollt, nicht die Seite */
  font-size: var(--fs-ui);
  background: var(--bp-palette-light-gray-5, #f6f7f9);
  color: var(--bp-palette-dark-gray-1, #1c2127);
  -webkit-font-smoothing: antialiased;
}
body.bp6-dark {
  background: var(--bp-palette-dark-gray-2, #252a31);
  color: var(--bp-palette-light-gray-5, #f6f7f9);
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

/* Zahlen in Tabellenspalten und Achsen */
.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Bildschirmleser-Text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- App-Grid */
.app {
  display: grid;
  grid-template-rows: var(--navbar-h) 1fr;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-areas:
    'nav  nav'
    'side main';
  /* Höhe aus html/body (100 %), nicht aus 100vh: auf iOS/iPadOS ist 100vh höher als der sichtbare Bereich,
     der untere Rand des Arbeitsbereichs lag deshalb außerhalb des Fensters (Meldung 26.09.). */
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body.sidebar-expanded .app {
  grid-template-columns: var(--sidebar-w-open) minmax(0, 1fr);
}
/* Banner-Zeilen (Ausbau 14): Update-Banner (has-banner) + Sitzungs-Banner mit einer (has-banner-2) oder zwei
   Zeilen (has-banner-3, Support + Testphase). --banner-rows = Anzahl reservierter Bannerhöhen; Grid, Sidebar
   und Sitzungs-Banner rechnen damit, sodass keine Zeile den Arbeitsbereich überdeckt. */
.app {
  --update-rows: 0;
  --banner-rows: 0;
}
.app.has-banner {
  --update-rows: 1;
  --banner-rows: 1;
}
/* Reihenfolge wichtig: has-banner-2/-3 stehen nach has-banner und rechnen das Update-Banner mit ein */
.app.has-banner-2 {
  --banner-rows: calc(var(--update-rows) + 1);
}
.app.has-banner-3 {
  --banner-rows: calc(var(--update-rows) + 2);
}
.app.has-banner,
.app.has-banner-2 {
  grid-template-rows: calc(var(--navbar-h) + var(--banner-rows) * var(--banner-h)) 1fr;
}

/* ----------------------------------------------------------------- Navbar */
#navbar {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--navbar-h);
  padding: 0 12px;
  z-index: 10;
}
#navbar .bp6-navbar-group {
  float: none;
  flex: 0 0 auto;
  gap: 4px;
  min-width: 0;
}
#navbar .bp6-navbar-group.bp6-align-left {
  margin-right: auto;
}
#navbar .bp6-navbar-group.bp6-align-right {
  margin-left: auto;
}
#navbar .bp6-navbar-heading {
  font-weight: 600;
  white-space: nowrap;
  margin-right: 8px;
}
#navbar .bp6-navbar-heading .bp6-tag {
  margin-left: 8px;
  vertical-align: middle;
}
/* Globale Suche in der Mitte (öffnet die Palette, nimmt Scanner-Wedge) */
#navbar .navbar-search {
  flex: 1 1 auto;
  max-width: 560px;
  min-width: 120px;
  margin: 0 8px;
}
#navbar .navbar-search .bp6-input-group {
  width: 100%;
}
#navbar .navbar-search .bp6-input {
  width: 100%;
}
#navbar .navbar-search .bp6-tag {
  pointer-events: none;
}
/* Glocke mit Zähler */
#navbar .navbar-bell {
  position: relative;
}
#navbar .navbar-bell .bp6-tag {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
}
#navbar .navbar-bell .bp6-tag:empty {
  display: none;
}
/* Statuspunkt letzter API-Aufruf */
#navbar .navbar-status {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}
#navbar .navbar-status .bp6-icon {
  font-size: 10px;
}
#navbar .navbar-user .bp6-button-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Update-Banner: fest unter der Navbar, über dem Workspace */
#update-banner {
  position: fixed;
  top: var(--navbar-h);
  left: var(--sidebar-w);
  right: 0;
  z-index: var(--z-banner);
  margin: 0;
  min-height: var(--banner-h);
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.sidebar-expanded #update-banner {
  left: var(--sidebar-w-open);
}
#update-banner a {
  font-weight: 600;
  text-decoration: underline;
}
#update-banner .bp6-button {
  margin-left: auto;
}

/* Sitzungs-Banner (Ausbau 14): Support-Sitzung (orange) und/oder Testphase abgelaufen (gelb) – ein Element, je Zeile */
#session-banner {
  position: fixed;
  top: var(--navbar-h);
  left: var(--sidebar-w);
  right: 0;
  z-index: var(--z-banner);
  margin: 0;
  min-height: var(--banner-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.sidebar-expanded #session-banner {
  left: var(--sidebar-w-open);
}
.app.has-banner #session-banner {
  top: calc(var(--navbar-h) + var(--banner-h));
}
#session-banner .session-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: var(--banner-h);
  padding: 4px 14px;
  font-size: 13px;
  line-height: 1.3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
#session-banner .session-line:last-child {
  border-bottom: 0;
}
#session-banner .session-support {
  background: var(--bp-palette-orange-3, #c87619);
  color: #fff;
}
#session-banner .session-trial {
  background: var(--bp-palette-gold-5, #fbd065);
  color: #1c2127;
}
#session-banner .session-line b {
  font-weight: 600;
}
#session-banner .session-line .spacer {
  flex: 1;
}
#session-banner .session-support .bp6-button {
  color: inherit;
}
#session-banner .session-support .bp6-button.bp6-minimal:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ---------------------------------------------------------------- Sidebar */
.sidebar {
  grid-area: side;
  position: fixed; /* Overlay über dem Workspace beim Aufklappen – kein Reflow */
  top: var(--navbar-h);
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  background: var(--bp-palette-white, #ffffff);
  border-right: 1px solid var(--bp-surface-border-color-default);
  transition: width 150ms var(--bp-emphasis-ease-default, ease);
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar {
  display: none;
}
body.bp6-dark .sidebar {
  background: var(--bp-palette-dark-gray-2, #252a31);
}
.app.has-banner .sidebar,
.app.has-banner-2 .sidebar {
  top: calc(var(--navbar-h) + var(--banner-rows) * var(--banner-h));
}

/* aufgeklappt: fest per Klick auf ≡ (body.sidebar-expanded) oder Hover am Desktop */
body.sidebar-expanded .sidebar {
  width: var(--sidebar-w-open);
}
@media (hover: hover) and (min-width: 1200px) {
  .sidebar:hover {
    width: var(--sidebar-w-open);
  }
}
.sidebar:focus-within {
  width: var(--sidebar-w-open);
}

.sidebar .bp6-menu {
  background: transparent;
  min-width: 0;
  padding: 6px 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}
.sidebar .sidebar-nav {
  flex: 1 1 auto;
}
.sidebar .sidebar-foot {
  flex: 0 0 auto;
  margin-top: auto;
}
.sidebar .bp6-menu-divider {
  margin: 4px 10px;
}

.sidebar .bp6-menu-item {
  display: flex;
  align-items: center;
  gap: 0;
  height: 40px;
  padding: 0 0 0 20px; /* Icon sitzt mittig in 60 px: 20 + 20 + 20 */
  margin: 2px 0;
  border-radius: 0;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  user-select: none;
}
.sidebar .bp6-menu-item > .bp6-icon {
  flex: 0 0 20px;
  width: 20px;
  margin: 0 12px 0 0;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  color: var(--bp-typography-color-muted, #5f6b7c);
}
.sidebar .bp6-menu-item > .bp6-icon::before {
  font-size: 20px;
}
body.bp6-dark .sidebar .bp6-menu-item > .bp6-icon {
  color: var(--bp-palette-gray-4, #abb3bf);
}
.sidebar .bp6-menu-item > .bp6-fill {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 120ms linear;
}
body.sidebar-expanded .sidebar .bp6-menu-item > .bp6-fill,
.sidebar:focus-within .bp6-menu-item > .bp6-fill {
  opacity: 1;
}
@media (hover: hover) and (min-width: 1200px) {
  .sidebar:hover .bp6-menu-item > .bp6-fill {
    opacity: 1;
  }
}
.sidebar .bp6-menu-item:hover {
  background: var(--bp-surface-background-color-default-hover);
}
.sidebar .bp6-menu-item.bp6-active,
.sidebar .bp6-menu-item[aria-current='page'] {
  background: var(--bp-surface-layer-primary, rgba(45, 114, 210, 0.1));
  box-shadow: inset 3px 0 0 var(--bp-intent-primary-rest, #2d72d2);
  color: var(--bp-typography-color-primary-rest, #215db0);
  font-weight: 600;
}
.sidebar .bp6-menu-item.bp6-active > .bp6-icon {
  color: var(--bp-intent-primary-rest, #2d72d2);
}
body.bp6-dark .sidebar .bp6-menu-item.bp6-active {
  color: var(--bp-palette-blue-5, #8abbff);
}
body.bp6-dark .sidebar .bp6-menu-item.bp6-active > .bp6-icon {
  color: var(--bp-palette-blue-5, #8abbff);
}
.sidebar .bp6-menu-item:focus-visible {
  outline: var(--bp-emphasis-focus-width, 2px) solid var(--bp-emphasis-focus-color, #2d72d2);
  outline-offset: -2px;
}
/* Tablet: 60 px fest, kein Aufklappen per Hover */
@media (max-width: 1199.98px) {
  .sidebar:focus-within {
    width: var(--sidebar-w);
  }
  .sidebar:focus-within .bp6-menu-item > .bp6-fill {
    opacity: 0;
  }
  body.sidebar-expanded .sidebar {
    width: var(--sidebar-w-open);
  }
  body.sidebar-expanded .sidebar .bp6-menu-item > .bp6-fill {
    opacity: 1;
  }
}

/* -------------------------------------------------------------- Workspace */
.workspace {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--ws-pad-sm) var(--ws-pad)
    calc(var(--ws-pad) + 8px + env(safe-area-inset-bottom, 0px));
  scroll-padding-top: 12px;
  outline: none;
  -webkit-overflow-scrolling: touch;
}
.app.has-banner .workspace {
  padding-top: var(--ws-pad-sm);
}

.workspace-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 30px;
  margin-bottom: 12px;
}
.workspace-head .bp6-breadcrumbs {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 16px;
  margin: 0;
}
.workspace-head .workspace-actions,
.workspace-head .bp6-button-group {
  flex: 0 0 auto;
  margin-left: auto;
}

.workspace > .bp6-tabs {
  margin-bottom: 12px;
}
.workspace .bp6-tab-list {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 1px solid var(--bp-surface-border-color-default);
}
.workspace .bp6-tab-list::-webkit-scrollbar {
  display: none;
}
.workspace .bp6-tab {
  white-space: nowrap;
}

/* Filterzeile über Tabellen/Dashboard */
.filterbar,
.dash-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.filterbar .spacer,
.dash-filters .spacer {
  flex: 1 1 auto;
}
.filterbar .filterbar-stand,
.dash-filters .dash-stand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Seitenkopf: Stat-Tiles nebeneinander, Chart daneben (Desktop) */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  margin-bottom: 12px;
}
.page-head .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--grid-gap);
  align-content: start;
}
@media (min-width: 1200px) {
  .page-head.with-chart {
    grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  }
}

/* Zwei-Spalten-Layout (z. B. Zuteilung: Wizard links, Sitzungsliste rechts) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
@media (min-width: 1200px) {
  .split {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }
}

/* Sticky-Footer für Buchen-Taste (Handy/Tablet unten fixiert) */
.sticky-footer {
  position: sticky;
  bottom: calc(-1 * var(--ws-pad) - 8px);
  margin: 12px calc(-1 * var(--ws-pad)) calc(-1 * var(--ws-pad) - 8px);
  padding: 8px var(--ws-pad);
  background: var(--bp-palette-light-gray-5, #f6f7f9);
  border-top: 1px solid var(--bp-surface-border-color-default);
  z-index: 2;
}
body.bp6-dark .sticky-footer {
  background: var(--bp-palette-dark-gray-2, #252a31);
}

/* Anzeigefehler-/Leerzustand füllt die Bühne */
.workspace > .bp6-non-ideal-state {
  min-height: 50vh;
}

/* ----------------------------------------------------- Drawer / Dialog / Palette
   Blueprint rendert Overlays über React-Portale; hier steuern wir sie über die
   Klasse bp6-overlay-open selbst: Deckkraft/Transform in 150 ms, danach unsichtbar. */
#drawer-root > .bp6-overlay,
#dialog-root > .bp6-overlay,
#palette-root > .bp6-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  transition: visibility 0s linear 150ms;
}
#dialog-root > .bp6-overlay {
  z-index: var(--z-dialog);
}
#palette-root > .bp6-overlay {
  z-index: var(--z-palette);
}
#drawer-root > .bp6-overlay.bp6-overlay-open,
#dialog-root > .bp6-overlay.bp6-overlay-open,
#palette-root > .bp6-overlay.bp6-overlay-open {
  visibility: visible;
  transition-delay: 0s;
}

#drawer-root .bp6-overlay-backdrop,
#dialog-root .bp6-overlay-backdrop,
#palette-root .bp6-overlay-backdrop {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity 150ms var(--bp-emphasis-ease-default, ease);
}
.bp6-overlay.bp6-overlay-open > .bp6-overlay-backdrop {
  opacity: 1;
}

/* Drawer rechts, 480 px; < 720 px Vollbild */
#drawer-root .bp6-drawer,
#drawer-root .bp6-drawer.bp6-position-right {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: var(--drawer-w);
  max-width: 100%;
  height: auto; /* top/bottom bestimmen die Höhe (kein 100vh/100dvh, siehe .app) */
  z-index: 1;
  transform: translateX(100%);
  transition: transform 150ms var(--bp-emphasis-ease-default, ease);
  will-change: transform;
}
#drawer-root .bp6-overlay-open .bp6-drawer {
  transform: translateX(0);
}
#drawer-root .bp6-drawer-body {
  padding: 12px 16px;
}
#drawer-root .bp6-drawer-body .bp6-tabs {
  margin-top: 12px;
}
#drawer-root .bp6-drawer-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bp-surface-border-color-default);
}
#drawer-root .bp6-drawer-footer .bp6-button-group {
  flex-wrap: wrap;
}
#drawer-root .bp6-drawer-header .bp6-button:last-child {
  margin-left: auto;
}

/* Dialog zentriert, Palette oben (640 px) */
#dialog-root .bp6-dialog-container,
#palette-root .bp6-dialog-container {
  position: fixed;
  inset: 0;
  overflow: auto;
  padding: 16px;
  pointer-events: none;
}
#dialog-root .bp6-dialog,
#palette-root .bp6-dialog {
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 32px);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 150ms var(--bp-emphasis-ease-default, ease),
    transform 150ms var(--bp-emphasis-ease-default, ease);
}
.bp6-overlay.bp6-overlay-open .bp6-dialog {
  opacity: 1;
  transform: none;
}
#dialog-root .bp6-dialog-body {
  overflow: auto;
}
#palette-root .bp6-dialog-container {
  align-items: flex-start;
  padding-top: 10vh;
}
#palette-root .bp6-dialog {
  max-width: 640px;
  margin: 0;
}
#palette-root .bp6-dialog .bp6-menu {
  max-height: 60vh;
  overflow: auto;
}

/* Blueprint sperrt body-Scroll bei offenem Overlay; unser body scrollt ohnehin nicht */
body.bp6-overlay-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------- Toasts */
#toast-root {
  position: fixed;
  z-index: var(--z-toast);
  padding: 0 16px 16px;
}
#toast-root .bp6-toast {
  pointer-events: auto;
}

/* ------------------------------------------------------------- Bottom-Bar */
.bottombar {
  grid-area: bottom;
  display: none;
}

/* --------------------------------------------------------- Dashboard-Grid */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  grid-auto-flow: dense;
  align-items: stretch;
}
.dash-grid .widget,
.dash-grid > .bp6-card {
  grid-column: span var(--span-lg, 12);
  min-width: 0;
  min-height: 0;
}
/* Gruppenüberschrift („Aktionen“, „Arbeit“, „Leitung“) über volle Breite */
.dash-grid .dash-group-title,
.dash-grid .bp6-section {
  grid-column: 1 / -1;
}
.dash-grid .dash-group-title {
  margin: 4px 0 -4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* explizite Spannen als Klassen (Alternative zu --span-lg / --span-md) */
.w-lg-1 {
  --span-lg: 1;
}
.w-lg-2 {
  --span-lg: 2;
}
.w-lg-3 {
  --span-lg: 3;
}
.w-lg-4 {
  --span-lg: 4;
}
.w-lg-5 {
  --span-lg: 5;
}
.w-lg-6 {
  --span-lg: 6;
}
.w-lg-7 {
  --span-lg: 7;
}
.w-lg-8 {
  --span-lg: 8;
}
.w-lg-9 {
  --span-lg: 9;
}
.w-lg-10 {
  --span-lg: 10;
}
.w-lg-11 {
  --span-lg: 11;
}
.w-lg-12 {
  --span-lg: 12;
}
.w-md-1 {
  --span-md: 1;
}
.w-md-2 {
  --span-md: 2;
}
.w-md-3 {
  --span-md: 3;
}
.w-md-4 {
  --span-md: 4;
}
.w-md-5 {
  --span-md: 5;
}
.w-md-6 {
  --span-md: 6;
}

/* Widget = bp6-card bp6-elevation-0 .widget: Kopf · Körper · optionale Fußzeile */
.widget {
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-height: 0;
  transition: opacity 150ms linear;
}
.widget[aria-busy='true'] {
  opacity: 0.6;
}
.widget > .widget-head,
.widget > .panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 8px;
}
.widget > .widget-head .bp6-heading,
.widget > .panel-head .bp6-heading {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget > .widget-head .bp6-text-muted,
.widget > .panel-head .bp6-text-muted {
  white-space: nowrap;
  font-size: 12px;
}
.widget > .widget-body,
.widget > .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.widget > .widget-foot,
.widget > .panel-foot {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--bp-surface-border-color-default);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.widget > .widget-foot .bp6-text-muted {
  flex: 1 1 auto;
}
.widget .widget-scroll {
  overflow: auto;
  max-height: 420px;
}
.widget .widget-scroll table {
  min-width: 100%;
}
/* Linien-Charts nie schmaler als 320 px: bei knappen Spalten scrollt die <figure> horizontal – nicht der
   .viz-plot selbst, sonst ragt er aus der Karte (Balken liefen rechts aus „Leads nach Status“ heraus).
   Balken- und Ring-Diagramme passen sich der Breite an und brauchen keine Mindestbreite. */
.widget figure.viz {
  min-width: 0;
}
.widget figure.viz:has(.viz-lines) {
  overflow-x: auto;
}
.widget .viz-plot:has(> .viz-lines) {
  min-width: 320px;
}

/* Aktionsleiste W0 */
.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dash-actions .bp6-button {
  flex: 1 1 160px;
  min-height: var(--hit);
}

/* KPI-Zeile W1 / L1–L4: eigene Kacheln je Tile (Spanne kommt vom Widget) */
.stat-value {
  font-size: var(--fs-tile);
  line-height: 1.15;
  font-weight: 600;
}
.stat-value.hero {
  font-size: var(--fs-hero);
}

/* ------------------------------------------------ Dichte-Anwendung (Tokens) */
/* Formulare des Workspace: Mindesthöhe --hit für Buttons, Inputs, Selects */
.workspace .bp6-form .bp6-input,
.workspace .bp6-form .bp6-html-select > select,
.workspace .bp6-form .bp6-button:not(.bp6-small):not(.bp6-minimal),
.workspace .bp6-form .bp6-numeric-input .bp6-input,
.workspace .dash-actions .bp6-button,
.workspace .scan-field .bp6-input {
  min-height: var(--hit);
}
body.density-touch .workspace .bp6-form .bp6-input,
body.density-halle .workspace .bp6-form .bp6-input {
  font-size: var(--fs-ui);
}
body.density-halle .workspace .bp6-form .bp6-input.bp6-large,
body.density-halle .workspace .scan-field .bp6-input,
body.density-touch .workspace .scan-field .bp6-input {
  font-size: var(--fs-scan);
  height: var(--hit);
}
body.density-halle .workspace .bp6-form .bp6-input-group.bp6-large .bp6-icon,
body.density-halle .workspace .scan-field .bp6-input-group .bp6-icon {
  top: 50%;
  transform: translateY(-50%);
  margin: 0 6px;
}
/* Tabellenzeilen in Touch/Halle: --row-h (Standard/Kompakt lässt bp6-compact 24 px) */
body.density-touch .workspace .bp6-html-table td,
body.density-touch .workspace .bp6-html-table th,
body.density-halle .workspace .bp6-html-table td,
body.density-halle .workspace .bp6-html-table th {
  height: var(--row-h);
  vertical-align: middle;
}
body.density-halle .workspace .bp6-html-table .bp6-button.bp6-small {
  min-height: 40px;
}
/* Größere Ziele in Menüs/Bottom-Bar */
body.density-halle .bottombar .bp6-button {
  min-height: var(--bottombar-h);
}
body.density-halle .workspace .bp6-tab {
  line-height: 40px;
}
body.density-compact .workspace {
  padding-top: 8px;
}
body.density-compact .workspace-head {
  margin-bottom: 8px;
}

/* ------------------------------------------------- Scan-Vollbild (#/scan) */
body.scan-mode {
  background: var(--bp-palette-dark-gray-1, #1c2127);
}
body.scan-mode .app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'main';
}
body.scan-mode #navbar,
body.scan-mode .sidebar,
body.scan-mode .bottombar,
body.scan-mode #update-banner,
body.scan-mode #session-banner {
  display: none !important;
}
body.scan-mode .workspace {
  padding: 0;
  background: var(--bp-palette-dark-gray-1, #1c2127);
  color: var(--bp-palette-light-gray-5, #f6f7f9);
}
.scan-panel {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
}
.scan-panel .scan-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.scan-panel .scan-head .bp6-heading {
  flex: 1 1 auto;
  margin: 0;
  font-size: 16px;
}
.scan-panel .scan-field .bp6-input-group,
.scan-panel .scan-field .bp6-input {
  width: 100%;
}
.scan-panel .scan-field .bp6-input {
  height: 72px;
  min-height: 72px;
  font-size: 28px;
  font-family: var(--bp-typography-family-mono);
  letter-spacing: 0.02em;
  padding-left: 48px;
}
.scan-panel .scan-field .bp6-input-group .bp6-icon {
  top: 50%;
  transform: translateY(-50%);
  margin: 0 14px;
  font-size: 20px;
}
.scan-panel .scan-camera {
  position: relative;
}
.scan-panel .scan-camera video {
  display: block;
  width: 100%;
  max-height: 40dvh;
  object-fit: cover;
  border-radius: var(--bp-surface-border-radius, 4px);
  background: #000;
}
.scan-panel .scan-result .bp6-button {
  min-height: 56px;
}
.scan-panel .scan-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.scan-panel .scan-recent {
  margin-top: auto;
}

/* ----------------------------------------------------- Login-Overlay (D.5) */
.login {
  position: fixed;
  inset: 0;
  z-index: var(--z-login);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  background: var(--bp-palette-light-gray-5, #f6f7f9);
}
body.bp6-dark .login {
  background: var(--bp-palette-dark-gray-2, #252a31);
}
.login-card {
  width: 360px;
  max-width: 100%;
  padding: 24px;
  margin: auto;
}
.login-card .login-title {
  margin: 0 0 2px;
  font-size: 24px;
  line-height: 1.2;
}
.login-card .login-sub {
  margin: 0 0 16px;
}
.login-card .bp6-callout {
  margin-bottom: 12px;
}
.login-card .bp6-form-group {
  margin-bottom: 12px;
}
.login-card .bp6-input-group,
.login-card .bp6-input {
  width: 100%;
}
.login-card .bp6-button.bp6-fill {
  margin-top: 4px;
}
.login-card .login-foot {
  margin: 12px 0 0;
  text-align: center;
}
body.density-halle .login-card .bp6-input,
body.density-halle .login-card .bp6-button {
  min-height: var(--hit);
  font-size: var(--fs-ui);
}
/* Login: Plattform-Hinweise über der Karte, Einladungskarte statt Formular (Ausbau 14) */
.login {
  flex-direction: column;
  gap: 12px;
}
.login-notices {
  width: 360px;
  max-width: 100%;
  margin: auto auto 0;
}
.login-notices:empty,
.login-notices[hidden] {
  display: none;
}
.login-notices .bp6-callout {
  margin: 0;
}
.login-notices + .login-card,
.login-notices + #login-alt + .login-card,
.login-notices + #login-alt {
  margin-top: 0;
}
#login-alt .login-title {
  margin-bottom: 2px;
}
#login-alt .invite-meta {
  margin: 0 0 12px;
}
#login-alt .form-grid {
  gap: 0;
}
@media (max-width: 719.98px) {
  .login {
    align-items: center;
    justify-content: flex-start;
    padding-top: 32px;
  }
  .login-card {
    padding: 20px 16px;
  }
}

/* ------------------------------------------------------- Tablet < 1200 px */
@media (max-width: 1199.98px) {
  .dash-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .dash-grid .widget,
  .dash-grid > .bp6-card {
    grid-column: span var(--span-md, 6);
  }
  #navbar .navbar-search {
    max-width: 360px;
  }
  #navbar .navbar-user .bp6-button-text {
    display: none;
  }
  .page-head.with-chart {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------- Handy < 720 px */
@media (max-width: 719.98px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--navbar-h) minmax(0, 1fr) calc(
        var(--bottombar-h) + env(safe-area-inset-bottom, 0px)
      );
    grid-template-areas:
      'nav'
      'main'
      'bottom';
  }
  body.sidebar-expanded .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .app.has-banner,
  .app.has-banner-2 {
    grid-template-rows:
      calc(var(--navbar-h) + var(--banner-rows) * var(--banner-h)) minmax(0, 1fr)
      calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
  }
  .sidebar {
    display: none;
  }
  #update-banner,
  #session-banner {
    left: 0;
  }
  #navbar {
    padding: 0 8px;
    gap: 4px;
  }
  #navbar .bp6-navbar-heading {
    font-size: 14px;
    margin-right: 4px;
  }
  #navbar .bp6-navbar-heading .bp6-tag {
    display: none;
  }
  #navbar .navbar-search {
    min-width: 0;
    margin: 0 4px;
  }
  #navbar .navbar-search .bp6-tag {
    display: none;
  }
  #navbar .navbar-density,
  #navbar .navbar-status {
    display: none;
  }

  .workspace {
    padding: var(--ws-pad-sm) var(--ws-pad-sm) calc(var(--ws-pad-sm) + 8px);
  }
  .workspace-head .bp6-breadcrumbs {
    font-size: 14px;
  }
  .sticky-footer {
    bottom: calc(-1 * var(--ws-pad-sm) - 8px);
    margin: 12px calc(-1 * var(--ws-pad-sm)) calc(-1 * var(--ws-pad-sm) - 8px);
    padding: 8px var(--ws-pad-sm);
  }

  /* Bottom-Bar: Dashboard · Scan · Buchen · Lager · Mehr */
  .bottombar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bp-palette-white, #ffffff);
    border-top: 1px solid var(--bp-surface-border-color-default);
    z-index: 10;
  }
  body.bp6-dark .bottombar {
    background: var(--bp-palette-dark-gray-2, #252a31);
  }
  .bottombar .bp6-button {
    flex: 1 1 0;
    min-width: 0;
    height: var(--bottombar-h);
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 0;
    font-size: 11px;
    line-height: 1.1;
    text-decoration: none;
  }
  .bottombar .bp6-button .bp6-icon {
    margin: 0;
    font-size: 20px;
  }
  .bottombar .bp6-button .bp6-icon::before {
    font-size: 20px;
  }
  .bottombar .bp6-button .bp6-button-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottombar .bp6-button.bp6-active,
  .bottombar .bp6-button[aria-current='page'] {
    color: var(--bp-intent-primary-rest, #2d72d2);
    box-shadow: inset 0 3px 0 var(--bp-intent-primary-rest, #2d72d2);
  }
  body.bp6-dark .bottombar .bp6-button.bp6-active {
    color: var(--bp-palette-blue-5, #8abbff);
  }
  .bottombar .bp6-button .bp6-tag {
    position: absolute;
    top: 4px;
    right: calc(50% - 20px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
  }
  .bottombar .bp6-button {
    position: relative;
  }

  /* Drawer als Vollbild */
  #drawer-root .bp6-drawer,
  #drawer-root .bp6-drawer.bp6-position-right {
    width: 100%;
  }
  #dialog-root .bp6-dialog-container,
  #palette-root .bp6-dialog-container {
    padding: 8px;
  }
  #palette-root .bp6-dialog-container {
    padding-top: 8px;
  }
  #dialog-root .bp6-dialog,
  #palette-root .bp6-dialog {
    max-height: calc(100dvh - 16px);
  }

  /* Toasts oberhalb der Bottom-Bar, mittig */
  #toast-root {
    align-items: center;
    padding: 0 8px calc(var(--bottombar-h) + 8px + env(safe-area-inset-bottom, 0px));
  }

  /* Dashboard: eine Spalte, Reihenfolge = --order-sm (H-Rang) */
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dash-grid .widget,
  .dash-grid > .bp6-card {
    grid-column: 1 / -1;
    order: var(--order-sm, 0);
  }
  .dash-grid .dash-group-title {
    order: var(--order-sm, 0);
  }
  .dash-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dash-actions .bp6-button {
    flex: initial;
    padding-left: 4px;
    padding-right: 4px;
  }
  /* KPI-Chips horizontal wischbar, 2 sichtbar */
  .kpi-strip {
    display: flex;
    gap: var(--grid-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .kpi-strip::-webkit-scrollbar {
    display: none;
  }
  .kpi-strip > * {
    flex: 0 0 calc(50% - var(--grid-gap) / 2);
    scroll-snap-align: start;
  }
  .widget .viz-plot {
    min-width: 0;
  }
  .widget .widget-scroll {
    max-height: none;
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .scan-panel .scan-field .bp6-input {
    height: 64px;
    min-height: 64px;
    font-size: 24px;
  }
}

/* ------------------------------------------------------ Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar .bp6-menu-item > .bp6-fill,
  .widget,
  #drawer-root .bp6-drawer,
  #dialog-root .bp6-dialog,
  #palette-root .bp6-dialog,
  .bp6-overlay-backdrop {
    transition-duration: 0ms !important;
  }
}

/* ------------------------------------------------------------------ Druck */
@media print {
  html,
  body {
    height: auto;
    overflow: visible;
    background: #fff;
    color: #000;
  }
  #navbar,
  .sidebar,
  .bottombar,
  #update-banner,
  #session-banner,
  #login,
  #drawer-root,
  #dialog-root,
  #palette-root,
  #toast-root,
  .workspace-head .bp6-button-group,
  .workspace-actions,
  .filterbar,
  .dash-filters,
  .sticky-footer,
  .dt-toolbar {
    display: none !important;
  }
  .app {
    display: block;
    height: auto;
    overflow: visible;
  }
  .workspace {
    overflow: visible;
    padding: 0;
    height: auto;
  }
  .widget,
  .bp6-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  .dash-grid {
    display: block;
  }
  .dash-grid .widget {
    margin-bottom: 8mm;
  }
  a {
    text-decoration: none;
  }

  /* Etikettenbogen A4, 3 × 8 à 70 × 37 mm (body.print-labels) */
  body.print-labels .workspace > :not(.label-sheets):not(.label-sheet) {
    display: none !important;
  }
}

/* Etikettenbogen: auf dem Bildschirm als Vorschau, im Druck maßhaltig */
.label-sheets {
  display: block;
}
.label-sheet {
  display: grid;
  grid-template-columns: repeat(3, 70mm);
  grid-auto-rows: 37mm;
  width: 210mm;
  min-height: 296mm;
  margin: 0 auto 8mm;
  padding: 0.5mm 0 0;
  background: #fff;
  color: #000;
  box-shadow: var(--bp-surface-shadow-1);
  break-after: page;
  page-break-after: always;
}
.label-sheet:last-child {
  break-after: auto;
  page-break-after: auto;
}
.label {
  width: 70mm;
  height: 37mm;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2mm;
  break-inside: avoid;
  page-break-inside: avoid;
  outline: 1px dashed rgba(95, 107, 124, 0.35);
  outline-offset: -1px;
}
.label > img,
.label > svg,
.label > iframe {
  display: block;
  max-width: 66mm;
  max-height: 33mm;
  width: auto;
  height: auto;
  border: 0;
}
.label > iframe {
  width: 66mm;
  height: 33mm;
}
@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }
  body.print-labels {
    margin: 0;
  }
  body.print-labels .app {
    display: block;
  }
  .label-sheet {
    margin: 0;
    box-shadow: none;
    min-height: 0;
    height: 296mm;
  }
  .label {
    outline: none;
  }
}