/*
 * UI v3 — Single Source of Truth (ehemals ui-v2 + ui-v3 overlay)
 *
 * Stand 2026-05-21: ui-v2/tokens.css, ui-v2/base.css, ui-v2/layout.css
 * in diese Datei migriert (B.3 + B.4). ui-v2/components.css folgt in B.5.
 *
 * BREAKPOINT-SYSTEM (Referenz für @media-Queries):
 *   bp-xs:  480px  – sehr kleine Smartphones (selten)
 *   bp-sm:  640px  – Smartphone landscape / kleines Tablet
 *   bp-md:  900px  – Tablet / kleines Desktop  (meistgenutzt)
 *   bp-lg: 1280px  – Standard-Desktop  (KPI-Grids brechen auf 3 Spalten)
 *   bp-xl: 1600px  – Großbildschirm / Wide  (reserviert)
 *
 * Alle @media (max-width: …)-Direktiven verwenden ausschließlich diese 5 Werte.
 * Vor jeder Änderung prüfen, ob ein bestehender Step ausreicht.
 */

/* =============================================================================
   TOKENS (migrated from ui-v2/tokens.css, B.3, 2026-05-21)
   ============================================================================= */
:root {
  /* ── Typography ── */
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14.5px;
  --fs-md:   16px;
  --fs-lg:   19px;
  --fs-xl:   26px;
  --fs-2xl:  32px;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* ── Surfaces ── */
  --bg:        #f4f6fa;
  --surface:   #ffffff;
  --surface-2: #f0f2f7;
  --surface-3: #e8ebf2;

  /* ── Text ── */
  --text:       #111827;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;

  /* ── Borders / Shadows ── */
  --border:      #e2e6ef;
  --border-light:#edf0f7;
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 50px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04);

  /* ── Brand ── */
  --primary:          #2563eb;
  --primary-hover:    #1d4ed8;
  --primary-light:    rgba(37, 99, 235, 0.08);
  --primary-contrast: #ffffff;
  --accent:           #0ea5e9;
  --accent-light:     rgba(14,165,233,0.10);

  /* ── Status ── */
  --success-bg:     #ecfdf5;
  --success-border: #a7f3d0;
  --success-text:   #065f46;
  --success-solid:  #059669;

  --warning-bg:     #fffbeb;
  --warning-border: #fde68a;
  --warning-text:   #92400e;
  --warning-solid:  #d97706;

  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;
  --danger-text:    #991b1b;
  --danger-solid:   #dc2626;

  --info-bg:        rgba(37,99,235,0.06);
  --info-border:    rgba(37,99,235,0.20);
  --info-text:      #1e40af;

  /* ── Status family (consolidates --danger/warning/success/info into one naming scheme).
       Used by .ui-tab--*, .ui-count--*, .v3-st-flow-step--*, .v3-st-kind--*. ── */
  --status-danger-bg:      var(--danger-bg);
  --status-danger-text:    var(--danger-text);
  --status-danger-border:  var(--danger-border);
  --status-danger-solid:   var(--danger-solid);
  --status-danger-ring:    rgba(220, 38, 38, 0.18);

  --status-warn-bg:        var(--warning-bg);
  --status-warn-text:      var(--warning-text);
  --status-warn-border:    var(--warning-border);
  --status-warn-solid:     var(--warning-solid);
  --status-warn-ring:      rgba(217, 119, 6, 0.18);

  --status-ok-bg:          var(--success-bg);
  --status-ok-text:        var(--success-text);
  --status-ok-border:      var(--success-border);
  --status-ok-solid:       var(--success-solid);
  --status-ok-ring:        rgba(5, 150, 105, 0.18);

  --status-info-bg:        var(--info-bg);
  --status-info-text:      var(--info-text);
  --status-info-border:    var(--info-border);
  --status-info-solid:     #2563eb;
  --status-info-ring:      rgba(37, 99, 235, 0.18);

  --status-neutral-bg:     #f1f5f9;
  --status-neutral-text:   #475569;
  --status-neutral-border: rgba(148, 163, 184, 0.35);

  --status-accent-bg:      rgba(168, 85, 247, 0.10);
  --status-accent-text:    #6b21a8;
  --status-accent-border:  rgba(168, 85, 247, 0.30);

  /* ── Spacing (4px grid) ── */
  --s-0:  2px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;

  /* ── Radius ── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 20px;
  --r-full:999px;

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-both: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;

  /* ── Sidebar ── */
  --sidebar-bg:     #0f172a;
  --sidebar-hover:  rgba(255,255,255,0.06);
  --sidebar-active: rgba(37,99,235,0.18);
  --sidebar-text:   rgba(255,255,255,0.80);
  --sidebar-text-bright: rgba(255,255,255,0.95);
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-width:  256px;
}

/* === UI-V3 TOKEN-ERWEITERUNGEN === */
:root {
  /* Extended status colors — aliased to the canonical --status-* family above.
     Kept as legacy names so existing route-scoped CSS continues to work. */
  --v3-success-dark:    var(--status-ok-text);
  --v3-success-medium:  var(--status-ok-solid);
  --v3-success-light:   var(--status-ok-bg);

  --v3-warning-dark:    var(--status-warn-text);
  --v3-warning-medium:  var(--warning-solid);
  --v3-warning-amber:   #f59e0b;
  --v3-warning-light:   var(--status-warn-bg);
  --v3-warning-yellow:  #fef9c3;

  --v3-danger-dark:     var(--status-danger-text);
  --v3-danger-medium:   var(--danger-solid);
  --v3-danger-red:      #ef4444;
  --v3-danger-light:    var(--status-danger-bg);
  --v3-danger-pale:     #fef8f8;

  --v3-blue-deep:       #1e3a8a;
  --v3-blue-dark:       #1d4ed8;
  --v3-blue-mid:        #3b82f6;
  --v3-blue-light:      #93c5fd;
  --v3-blue-pale:       #dbeafe;

  --v3-gray-border:     #e5e7eb;
  --v3-gray-light:      #f3f4f6;
  --v3-orange:          #f97316;
  --v3-brown:           #713f12;

  /* Row highlight backgrounds */
  --v3-danger-ghost:    #fef8f8;
  --v3-warning-ghost:   #fffef0;

  /* Migrated from main.css (B.2, 2026-05-21) — Tokens, die in ui-v3 und
     module/kss/* via var(--name) referenziert sind. Werte aus main.css. */
  --muted:  #64748b;   /* used by ui-v3 KSS-Bereich + module/kss/messung_* (13 Treffer) */
  --radius: 16px;      /* used by ui-v3.css .card-aehnliche Komponente (1 Treffer); identisch zu --r-xl */
}

/* === SHARED V3 COMPONENTS (global, nicht route-scoped) === */

/* Asset-Code Pill (BAZ-12, A-050, etc.) */
body.ui-v3 .v3-asset-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.3px;
  background: var(--surface-2);
  color: var(--text);
  border: 1.5px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Asset-Name (muted, unter dem Pill) */
body.ui-v3 .v3-asset-name {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.3;
}

/* Aktiv/Inaktiv Status-Badge */
body.ui-v3 .v3-status-active {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
  border: 1px solid var(--status-ok-border);
}

body.ui-v3 .v3-status-inactive {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
  border: 1px solid var(--status-neutral-border);
}

/* Modul-Badge (admin.routes) */
body.ui-v3 .v3-modul-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--status-info-bg);
  color: var(--status-info-text);
  border: 1px solid var(--status-info-border);
  white-space: nowrap;
}

/* Prioritäts-Badge */
body.ui-v3 .v3-prio-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

body.ui-v3 .v3-prio-badge--high {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

body.ui-v3 .v3-prio-badge--low {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

/* Stillstand-Flag */
body.ui-v3 .v3-stillstand-flag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: #dc2626;
  color: #fff;
  line-height: 1.4;
}

/* Status-colored tabs (replaces inline tab_style) */
body.ui-v3 .ui-tab--danger,
body.ui-v3 .ui-tab--danger.ui-tab--active {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
  color: var(--status-danger-text);
}
body.ui-v3 .ui-tab--danger.ui-tab--active {
  box-shadow: 0 0 0 3px var(--status-danger-ring);
  border-color: var(--status-danger-text);
}

body.ui-v3 .ui-tab--warn,
body.ui-v3 .ui-tab--warn.ui-tab--active {
  background: var(--status-warn-bg);
  border-color: var(--status-warn-border);
  color: var(--status-warn-text);
}
body.ui-v3 .ui-tab--warn.ui-tab--active {
  box-shadow: 0 0 0 3px var(--status-warn-ring);
  border-color: var(--status-warn-text);
}

body.ui-v3 .ui-tab--ok,
body.ui-v3 .ui-tab--ok.ui-tab--active {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-border);
  color: var(--status-ok-text);
}
body.ui-v3 .ui-tab--ok.ui-tab--active {
  box-shadow: 0 0 0 3px var(--status-ok-ring);
  border-color: var(--status-ok-text);
}

body.ui-v3 .ui-tab--info,
body.ui-v3 .ui-tab--info.ui-tab--active {
  background: var(--status-info-bg);
  border-color: var(--status-info-border);
  color: var(--status-info-text);
}
body.ui-v3 .ui-tab--info.ui-tab--active {
  box-shadow: 0 0 0 3px var(--status-info-ring);
  border-color: var(--status-info-text);
}

body.ui-v3 .content__body {
  max-width: none;
  width: 100%;
}

body.ui-v3 .ui-container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: clamp(var(--s-4), 2vw, var(--s-7));
  padding-right: clamp(var(--s-4), 2vw, var(--s-7));
}

/* Step 2 rollout: shared module layouts */
body.ui-v3[data-route="wartung.dashboard"] .v3-split-layout,
body.ui-v3[data-route="wartung.uebersicht"] .v3-split-layout,
body.ui-v3[data-route="kss.dashboard"] .v3-split-layout,
body.ui-v3[data-route="stoerung.ticket"] .v3-ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--s-6);
  align-items: start;
}

/* Shared page-header flex pattern for KSS routes hosting an inline filterbar */
body.ui-v3[data-route="kss.dashboard"] .v3-kss-page-header,
body.ui-v3[data-route="kss.verlauf"] .v3-kss-page-header,
body.ui-v3[data-route="kss.heatmap"] .v3-kss-page-header,
body.ui-v3[data-route="kss.messwerte_analyse"] .v3-kss-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-3);
}

body.ui-v3[data-route="wartung.punkt"] .v3-point-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-header {
  margin: 0 0 var(--s-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-ticket-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(14px, 1.6vw, 24px);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-quick-form {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(220px, 340px) minmax(180px, 260px) auto;
  gap: var(--s-4);
  align-items: end;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-quick-form .ui-filterbar__group {
  flex: 0 1 auto;
  min-width: 0;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-quick-form .ui-filterbar__actions {
  margin-left: 0;
  justify-self: start;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-main {
  min-width: 0;
  width: 100%;
  max-width: 1120px;
  justify-self: start;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-side {
  min-width: 0;
  width: 100%;
  max-width: 340px;
  justify-self: end;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-side .ui-card {
  position: sticky;
  top: 18px;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-badge-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-badge-gap {
  margin-left: 0;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-card-gap {
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="stoerung.ticket"] .ui-filterbar__group[data-st-filter="status"] {
  min-width: 220px;
}

body.ui-v3[data-route="stoerung.ticket"] .ui-filterbar__group[data-st-filter="assign"] {
  min-width: 260px;
}

body.ui-v3[data-route="stoerung.ticket"] .ui-filterbar__group[data-st-filter="typ"] {
  min-width: 180px;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-title-reset {
  margin: 0;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-subtitle-top {
  margin-top: 6px;
}

/* Sidebar quickinfo title: eyebrow style, consistent with wartung.dashboard/inbox */
body.ui-v3[data-route="stoerung.ticket"] .v3-st-side .v3-st-title-reset {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: -0.1px;
  color: var(--text-muted);
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-side .v3-st-subtitle-top {
  margin: 0 0 var(--s-3) 0;
  color: var(--text-faint);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-layout-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-layout-image {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
  max-height: min(68vh, 820px);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-layout-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  border: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  cursor: pointer;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-layout-marker:disabled,
body.ui-v3[data-route="stoerung.ticket"] .v3-st-layout-marker[aria-disabled="true"] {
  cursor: default;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-layout-marker--origin {
  width: 24px;
  height: 38px;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-layout-marker--occurrence {
  width: 18px;
  height: 30px;
  opacity: 0.88;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-marker-panel {
  display: none;
  margin-top: var(--s-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-marker-panel--open {
  display: block;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-marker-title {
  margin: 0 0 6px 0;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-marker-target {
  margin: 0 0 10px 0;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-marker-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-3);
  align-items: end;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-top-gap {
  margin-top: 10px;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-btn-top {
  margin-top: 12px;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-form-gap {
  margin-bottom: var(--s-4);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-occurrence-grid {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: var(--s-3);
  align-items: end;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-details-top-sm {
  margin-top: var(--s-2);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-details-top {
  margin-top: var(--s-6);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-summary-toggle {
  cursor: pointer;
  user-select: none;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-table-top {
  margin-top: var(--s-3);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-submit-top {
  margin-top: var(--s-4);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-empty-top {
  margin-top: var(--s-6);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-docs-card {
  margin-top: var(--s-5);
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-quick-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.ui-v3[data-route="stoerung.ticket"] .v3-st-quick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* -- Status-Verlauf Timeline -- */
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  padding: var(--s-3) 0;
  position: relative;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step + .v3-st-flow-step::before {
  content: "";
  position: absolute;
  left: 11px;
  top: -8px;
  height: 16px;
  width: 2px;
  background: #e5e7eb;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid #fff;
  justify-self: center;
  box-shadow: 0 0 0 1px #e5e7eb;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step:last-child .v3-st-flow-dot {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-label {
  font-weight: 600;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-meta {
  color: #6b7280;
  font-size: 0.875rem;
  white-space: nowrap;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--neu .v3-st-flow-dot { background: var(--status-danger-solid); }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--angenommen .v3-st-flow-dot,
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--in_arbeit .v3-st-flow-dot { background: var(--status-info-solid); }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--bestellt .v3-st-flow-dot,
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--warten_auf_einbau .v3-st-flow-dot { background: var(--status-warn-solid); }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--erledigt .v3-st-flow-dot,
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--geschlossen .v3-st-flow-dot { background: var(--status-ok-solid); }

/* Nicht-Status-Events: Dot in Kind-Farbe */
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--kind-occurrence_logged .v3-st-flow-dot { background: #ef4444; }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--kind-part_withdrawal   .v3-st-flow-dot { background: #f59e0b; }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--kind-assignment        .v3-st-flow-dot { background: #10b981; }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--kind-category_change   .v3-st-flow-dot { background: #a855f7; }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step--kind-system_message    .v3-st-flow-dot { background: #94a3b8; }

body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-detail {
  display: block;
  font-weight: 400;
  color: #475569;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-step {
    grid-template-columns: 24px 1fr;
  }
  body.ui-v3[data-route="stoerung.ticket"] .v3-st-flow-meta {
    grid-column: 2;
    white-space: normal;
  }
}

/* -- User-Notiz Cards -- */
body.ui-v3[data-route="stoerung.ticket"] .v3-st-notes {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: var(--s-3) var(--s-4);
  background: var(--info-bg);
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-author { font-weight: 600; }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-date { color: #6b7280; }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-time {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #1e40af;
  font-weight: 600;
  white-space: nowrap;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-body {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Notiz-Form: Arbeitszeit-Zeile zwischen Textarea und Button */
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-form-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-time-label {
  font-size: 0.875rem;
  color: #475569;
  margin: 0;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-note-time-input {
  width: 120px;
}

/* -- Typ-Pills (System-Log und Verlauf-Items) -- */
body.ui-v3[data-route="stoerung.ticket"] .v3-st-kind {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
body.ui-v3[data-route="stoerung.ticket"] .v3-st-kind--status_change     { background: var(--status-info-bg);    color: var(--status-info-text); }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-kind--occurrence_logged { background: var(--status-danger-bg);  color: var(--status-danger-text); }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-kind--part_withdrawal   { background: var(--status-warn-bg);    color: var(--status-warn-text); }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-kind--assignment        { background: var(--status-ok-bg);      color: var(--status-ok-text); }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-kind--category_change   { background: var(--status-accent-bg);  color: var(--status-accent-text); }
body.ui-v3[data-route="stoerung.ticket"] .v3-st-kind--system_message    { background: var(--status-neutral-bg); color: var(--status-neutral-text); }

body.ui-v3[data-route="wartung.punkt"] .v3-wp-header-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-alert-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-title-reset {
  margin: 0;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-meta-line {
  margin-top: 8px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-badge-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-hints-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-section-gap,
body.ui-v3[data-route="wartung.punkt"] .v3-wp-form,
body.ui-v3[data-route="wartung.punkt"] .v3-wp-table-wrap {
  margin-top: var(--s-4);
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-prewrap {
  white-space: pre-wrap;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-top-gap,
body.ui-v3[data-route="wartung.punkt"] .v3-wp-note-top {
  margin-top: 10px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-due-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: var(--s-4);
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-due-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--s-4);
  background: var(--surface-2);
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-due-box--nowrap {
  white-space: nowrap;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-due-value {
  font-weight: 700;
  margin-top: 6px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-due-week,
body.ui-v3[data-route="wartung.punkt"] .v3-wp-tip-top,
body.ui-v3[data-route="wartung.punkt"] .v3-wp-hint {
  margin-top: 6px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-status-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-status-col {
  min-width: 260px;
  flex: 1 1 260px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-ticket-col {
  flex: 0 0 auto;
  padding-bottom: 10px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-ticket-label {
  margin: 0;
  font-weight: 600;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-textarea {
  min-height: 110px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-hints-copy {
  margin-top: 10px;
  line-height: 1.55;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-subsection {
  margin-top: 12px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-hints-list {
  margin: 8px 0 0 18px;
  padding: 0;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-span-full {
  grid-column: 1 / -1;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-upload-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-col-date {
  width: 180px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-col-type {
  width: 140px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-nowrap {
  white-space: nowrap;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-table-wrap {
  overflow-x: auto;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-prot-table {
  width: 100%;
  min-width: 650px;
  table-layout: fixed;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-prot-col-date {
  width: 170px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-prot-col-status,
body.ui-v3[data-route="wartung.punkt"] .v3-wp-prot-col-mess {
  width: 110px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-prot-col-team {
  width: 180px;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ui-v3[data-route="wartung.punkt"] .v3-wp-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-points-layout {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-main,
body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-side {
  min-width: 0;
  width: 100%;
}

/* Route: admin.permissions */
body.ui-v3[data-route="admin.permissions"] .v3-admin-perm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-3);
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-editor-card {
  scroll-margin-top: 18px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-editor-card:target {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-filter-form {
  display: grid;
  grid-template-columns: minmax(320px, 2.1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

/* admin_punkte / kss.verlauf / kss.messwerte_analyse: keep labels visible despite ui-filterbar--compact's default sr-only labels */
body.ui-v3[data-route="wartung.admin_punkte"] .ui-filterbar--compact .ui-filterbar__group label,
body.ui-v3[data-route="kss.verlauf"] .ui-filterbar--compact .ui-filterbar__group label,
body.ui-v3[data-route="kss.messwerte_analyse"] .ui-filterbar--compact .ui-filterbar__group label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 0 var(--s-1);
  overflow: visible;
  clip: auto;
  white-space: normal;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
body.ui-v3[data-route="wartung.admin_punkte"] .ui-filterbar--compact .v3-admin-filter-group,
body.ui-v3[data-route="kss.verlauf"] .ui-filterbar--compact .ui-filterbar__group,
body.ui-v3[data-route="kss.messwerte_analyse"] .ui-filterbar--compact .ui-filterbar__group {
  flex-direction: column;
  align-items: stretch;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-filter-group {
  min-width: 0 !important;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-filter-actions {
  margin-left: 0;
  justify-self: end;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-section-gap {
  margin-top: var(--s-6);
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-noscript-btn {
  margin-top: 10px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-title-reset {
  margin: 0;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-top-gap {
  margin-top: var(--s-4);
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-note {
  margin-top: 10px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-subline {
  margin-top: 6px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-editor-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-editor-form {
  margin-top: var(--s-5);
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-textarea {
  min-height: 110px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-help-text {
  margin-top: 6px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-help-text-tight {
  margin-top: 4px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-btn-row {
  margin-top: 4px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-card-subtitle {
  margin-top: 8px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-subform {
  margin-top: var(--s-4);
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-csv-textarea {
  min-height: 140px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-row-top {
  margin-top: 10px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-actions-top {
  margin-top: 12px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-inline-form {
  display: inline;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-cell-nowrap,
body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-cell-action {
  white-space: nowrap;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-cell-text {
  min-width: 220px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-id {
  width: 70px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-aktiv {
  width: 90px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-code {
  width: 120px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-kategorie {
  width: 170px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-wtyp {
  width: 110px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-krit {
  width: 130px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-dauer {
  width: 90px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-intervall {
  width: 130px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-verantwortung {
  width: 160px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-soon {
  width: 140px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-col-action {
  width: 220px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-audit-col-time {
  width: 170px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-audit-col-action {
  width: 90px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-audit-col-actor {
  width: 160px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-main .ui-table-wrap {
  overflow-x: auto;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-points-table {
  min-width: 1320px;
  table-layout: auto;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-points-table th,
body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-points-table td {
  padding: 10px 10px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-points-table td:nth-child(9) {
  min-width: 240px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid-2--tight-top {
  margin-top: 4px;
}

body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-checkbox-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* Route: wartung.dashboard — Redesign 2026-03 */
body.ui-v3[data-route="wartung.dashboard"] .v3-wd-page-header {
  margin: 0 0 var(--s-6) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-3);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-header-links {
  margin-top: var(--s-2);
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-kpi-link {
  text-decoration: none;
}

/* Table */
body.ui-v3[data-route="wartung.dashboard"] .v3-wd-table {
  width: 100%;
  table-layout: auto;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-col-point    { width: 42%; }
body.ui-v3[data-route="wartung.dashboard"] .v3-wd-col-rest     { width: 10%; }
body.ui-v3[data-route="wartung.dashboard"] .v3-wd-col-interval { width: 10%; }
body.ui-v3[data-route="wartung.dashboard"] .v3-wd-col-last     { width: 16%; }
body.ui-v3[data-route="wartung.dashboard"] .v3-wd-col-status   { width: 22%; }

/* Asset group header rows */
body.ui-v3[data-route="wartung.dashboard"] .v3-wd-asset-row {
  background: var(--surface-2);
  border-top: 2px solid var(--border);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-asset-cell {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-asset-name {
  margin-left: 2px;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-asset-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-asset-link:hover .v3-asset-pill {
  border-color: var(--primary);
  background: var(--primary-light);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-asset-summary {
  margin-left: var(--s-1);
  font-size: var(--fs-xs);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-row-hidden {
  display: none;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-point-meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-status-row {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-expand-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-expand-link:hover {
  text-decoration: underline;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-hint {
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Sidebar quickinfo */
body.ui-v3[data-route="wartung.dashboard"] .v3-wd-side-card {
  margin-bottom: var(--s-6);
  position: sticky;
  top: var(--s-7);
  padding: var(--s-5);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-side-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-side-subtitle {
  margin: 0 0 var(--s-3) 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-empty {
  margin-top: var(--s-4);
  text-align: center;
  padding: var(--s-7) 0;
  color: var(--text-faint);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-quicklist {
  margin-top: var(--s-4);
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-quickitem-mid {
  white-space: normal;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-quickitem-links {
  margin-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-quickitem-link-row {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  justify-content: space-between;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-quickitem-link-main {
  min-width: 0;
  flex: 1;
}

body.ui-v3[data-route="wartung.dashboard"] .v3-wd-quickitem-link-id {
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Shared pattern: anchored quickitem (asset-pill + badge inline at the top, meta + links below). */
/* Opt-in via the `ui-quickitem--anchored` modifier — used by wartung.dashboard and stoerung.inbox. */
body.ui-v3 .ui-quickitem.ui-quickitem--anchored {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "asset badge ."
    "meta  meta  meta"
    "links links links";
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-light);
  background: var(--surface);
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__main { display: contents; }
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__mid {
  grid-area: asset;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__right {
  grid-area: badge;
  align-self: start;
  white-space: nowrap;
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__top {
  grid-area: meta;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__who {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__links {
  grid-area: links;
  margin-top: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__link-row {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  justify-content: space-between;
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__link-main {
  min-width: 0;
  flex: 1;
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .ui-quickitem__link-id {
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
/* Legacy aliases — wartung.dashboard still emits the older v3-wd-* class names */
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .v3-wd-quickitem-links {
  grid-area: links;
  margin-top: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--border-light);
}
body.ui-v3 .ui-quickitem.ui-quickitem--anchored .v3-wd-quickitem-link-row {
  gap: var(--s-3);
}

/* Time-scope tabs (the first ui-tabs in the card head) — subordinated to a chip strip */
body.ui-v3[data-route="wartung.dashboard"] .ui-card-head > .ui-tabs:first-child {
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}
body.ui-v3[data-route="wartung.dashboard"] .ui-card-head > .ui-tabs:first-child .ui-tab {
  padding: 3px 10px;
  font-size: var(--fs-xs);
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
body.ui-v3[data-route="wartung.dashboard"] .ui-card-head > .ui-tabs:first-child .ui-tab:hover {
  background: var(--surface-2);
  color: var(--text);
}
body.ui-v3[data-route="wartung.dashboard"] .ui-card-head > .ui-tabs:first-child .ui-tab--active {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
body.ui-v3[data-route="wartung.dashboard"] .ui-card-head > .ui-tabs:first-child .ui-count {
  min-width: 0;
  height: auto;
  padding: 0 0 0 4px;
  background: transparent;
  border: 0;
  color: inherit;
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
}

/* Route: wartung.uebersicht */
body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-page-header {
  margin: 0 0 var(--s-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-3);
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-header-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

body.ui-v3[data-route="wartung.uebersicht"] #uebersicht_form .ui-filterbar__group[data-wu-filter="asset"] {
  min-width: 360px;
  flex: 1 1 520px;
}

body.ui-v3[data-route="wartung.uebersicht"] #uebersicht_form .ui-filterbar__group[data-wu-filter="search"] {
  min-width: 300px;
  flex: 1 1 360px;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-tabs-wrap {
  margin-left: auto;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-table {
  min-width: 780px;
  table-layout: auto;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-meta-row {
  margin-top: 2px;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-rest-cell {
  white-space: nowrap;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-due-week {
  margin-top: 4px;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-badge-row {
  margin-top: 4px;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-hint {
  margin-top: var(--s-4);
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-side-card {
  margin-bottom: var(--s-6);
  position: sticky;
  top: 18px;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-side-title {
  margin: 0;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-side-subtitle {
  margin-top: 6px;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-stats {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.ui-v3[data-route^="admin."] .v3-form-card {
  max-width: none;
}

/* Route: stoerung.inbox */
body.ui-v3[data-route="stoerung.inbox"] .inbox-page-header {
  margin: 0 0 var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-page-cta {
  margin-top: 4px;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
  gap: var(--s-6);
  align-items: start;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-main .ui-card {
  margin-bottom: 0;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-side {
  width: 100%;
  max-width: 380px;
  justify-self: end;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-side .ui-card {
  margin-bottom: 0;
  position: sticky;
  top: 18px;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-header {
  align-items: flex-start;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-header-meta {
  min-width: 220px;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-section-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.1px;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-result-info {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-table.ui-table {
  width: 100%;
  table-layout: auto;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-table th,
body.ui-v3[data-route="stoerung.inbox"] .inbox-table td {
  padding: 11px 12px;
  vertical-align: top;
}

/* -- Typ-Badge Spalte -- */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-col-typ {
  width: 84px;
  text-align: center;
  white-space: nowrap;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-typ-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.3;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-typ--stoerung {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-typ--mangel {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-typ--log {
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
  border: 1px solid rgba(37, 99, 235, 0.25);
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-typ--meldung {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* -- Anlage Spalte -- */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-col-asset {
  width: 160px;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-asset-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: var(--surface-2);
  color: var(--text);
  border: 1.5px solid var(--border);
  font-variant-numeric: tabular-nums;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-asset-name {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-stillstand-flag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: #dc2626;
  color: #fff;
  line-height: 1.4;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--stillstand {
  background: rgba(239, 68, 68, 0.04);
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--stillstand:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* -- Status-Row-Tinting (Inbox-Liste) -- */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--status-neu {
  background: rgba(239, 68, 68, 0.06);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--status-neu:hover {
  background: rgba(239, 68, 68, 0.12);
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--status-bestellt {
  background: rgba(245, 158, 11, 0.08);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--status-bestellt:hover {
  background: rgba(245, 158, 11, 0.14);
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--status-erledigt {
  background: rgba(16, 185, 129, 0.06);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--status-erledigt:hover {
  background: rgba(16, 185, 129, 0.12);
}

/* Stillstand + Erledigt/Bestellt: Status gewinnt (hoehere Spezifitaet) */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--stillstand.v3-inbox-row--status-erledigt {
  background: rgba(16, 185, 129, 0.06);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--stillstand.v3-inbox-row--status-erledigt:hover {
  background: rgba(16, 185, 129, 0.12);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--stillstand.v3-inbox-row--status-bestellt {
  background: rgba(245, 158, 11, 0.08);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--stillstand.v3-inbox-row--status-bestellt:hover {
  background: rgba(245, 158, 11, 0.14);
}

/* warten_auf_einbau: gleiche Tönung wie bestellt (beides "wartend") */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--status-warten_auf_einbau {
  background: rgba(245, 158, 11, 0.08);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--status-warten_auf_einbau:hover {
  background: rgba(245, 158, 11, 0.14);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--stillstand.v3-inbox-row--status-warten_auf_einbau {
  background: rgba(245, 158, 11, 0.08);
}
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-row--stillstand.v3-inbox-row--status-warten_auf_einbau:hover {
  background: rgba(245, 158, 11, 0.14);
}

/* -- Quick-Close-Button (Admin, in Status-Cell unter Badge) -- */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-quickclose-form {
  margin: 6px 0 0;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-quickclose-btn {
  width: 100%;
  color: var(--success-text);
  border-color: var(--success-border);
  background: var(--success-bg);
  white-space: nowrap;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-quickclose-btn:hover {
  background: rgba(16, 185, 129, 0.18);
}

/* -- Ticket Spalte -- */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-col-ticket {
  min-width: 200px;
  overflow-wrap: break-word;
  word-break: normal;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-ticket-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-ticket-link {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-ticket-id {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-ticket-desc {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-ticket-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

/* -- Status Spalte -- */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-col-status {
  width: 130px;
}

/* -- Wiederholungen Spalte -- */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-col-occ {
  width: 70px;
  text-align: center;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-occ-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-occ-count--high {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-occ-count--recent {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
  animation: v3-inbox-pulse 2s ease-in-out infinite;
}

@keyframes v3-inbox-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }
}

/* -- Zeitinfo Spalte -- */
body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-col-time {
  width: 140px;
  white-space: nowrap;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-time-line {
  line-height: 1.3;
}

body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-time-sub {
  margin-top: 2px;
  font-size: 11px;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-quick-subtitle {
  margin-top: 6px;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-empty-state {
  margin-top: 10px;
}

body.ui-v3[data-route="stoerung.inbox"] .inbox-quicklist {
  margin-top: 12px;
}

/* Route-specific surface accent on top of the shared ui-quickitem--anchored pattern */
body.ui-v3[data-route="stoerung.inbox"] .inbox-quickitem {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.08) 0%, var(--surface) 100%);
}

/* Sidebar quickinfo title: smaller eyebrow style, consistent with wartung.dashboard */
body.ui-v3[data-route="stoerung.inbox"] .inbox-side .inbox-section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: -0.1px;
  color: var(--text-muted);
}
body.ui-v3[data-route="stoerung.inbox"] .inbox-side .inbox-quick-subtitle {
  margin: 0 0 var(--s-3) 0;
  color: var(--text-faint);
}

@media (max-width: 1280px) {
  body.ui-v3[data-route="wartung.dashboard"] .v3-split-layout,
  body.ui-v3[data-route="wartung.uebersicht"] .v3-split-layout,
  body.ui-v3[data-route="kss.dashboard"] .v3-split-layout,
  body.ui-v3[data-route="stoerung.ticket"] .v3-ticket-layout {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="wartung.dashboard"] .v3-wd-side-card,
  body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-side-card,
  body.ui-v3[data-route="kss.dashboard"] .v3-kss-side-card {
    position: static;
  }

  /* Side-Card als kompakte horizontale Leiste */
  body.ui-v3[data-route="wartung.uebersicht"] aside {
    order: -1;
  }
  body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-side-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
  }
  body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-side-title {
    font-size: var(--fs-md);
  }
  body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-side-subtitle {
    margin-top: 0;
    font-size: var(--fs-xs);
  }
  body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-top: 0;
    margin-left: auto;
  }
  body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-stat-row {
    flex-direction: column;
    gap: 1px;
    text-align: center;
    min-width: 60px;
  }

  /* Filter min-widths reduzieren */
  body.ui-v3[data-route="wartung.uebersicht"] #uebersicht_form .ui-filterbar__group[data-wu-filter="asset"] {
    min-width: 200px;
    flex: 1 1 300px;
  }
  body.ui-v3[data-route="wartung.uebersicht"] #uebersicht_form .ui-filterbar__group[data-wu-filter="search"] {
    min-width: 160px;
    flex: 1 1 240px;
  }

  body.ui-v3[data-route="stoerung.ticket"] .v3-st-main,
  body.ui-v3[data-route="stoerung.ticket"] .v3-st-side {
    max-width: none;
    justify-self: stretch;
  }

  body.ui-v3[data-route="stoerung.ticket"] .v3-st-side .ui-card {
    position: static;
  }

  body.ui-v3[data-route="stoerung.inbox"] .inbox-layout {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="stoerung.inbox"] .inbox-side {
    max-width: none;
    justify-self: stretch;
  }

  body.ui-v3[data-route="stoerung.inbox"] .inbox-side .ui-card {
    position: static;
  }
}

@media (max-width: 1280px) {
  body.ui-v3[data-route="wartung.punkt"] .v3-point-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-filter-group--asset,
  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-filter-actions {
    grid-column: 1 / -1;
  }

  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-filter-actions {
    justify-self: start;
  }

  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  body.ui-v3[data-route="wartung.punkt"] .v3-wp-due-grid,
  body.ui-v3[data-route="wartung.punkt"] .v3-wp-upload-grid {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="wartung.punkt"] .v3-wp-status-row {
    align-items: stretch;
  }

  body.ui-v3[data-route="wartung.punkt"] .v3-wp-status-col {
    min-width: 0;
    flex: 1 1 100%;
  }

  body.ui-v3[data-route="wartung.punkt"] .v3-wp-ticket-col {
    width: 100%;
    padding-bottom: 0;
  }

  body.ui-v3[data-route="wartung.punkt"] .v3-wp-due-box--nowrap {
    white-space: normal;
  }

  body.ui-v3[data-route="wartung.punkt"] .v3-wp-prot-table {
    min-width: 680px;
  }

  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-filter-form,
  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid-3,
  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid-2 {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-points-table {
    min-width: 1100px;
  }
}

@media (max-width: 900px) {
  body.ui-v3[data-route="wartung.dashboard"] #dashboard_filter_form .ui-filterbar__group[data-wd-filter="search"],
  body.ui-v3[data-route="wartung.uebersicht"] #uebersicht_form .ui-filterbar__group[data-wu-filter="asset"],
  body.ui-v3[data-route="wartung.uebersicht"] #uebersicht_form .ui-filterbar__group[data-wu-filter="search"] {
    min-width: 0;
    flex: 1 1 100%;
  }

  body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-tabs-wrap {
    margin-left: 0;
    width: 100%;
  }

  body.ui-v3[data-route="wartung.dashboard"] .v3-wd-table,
  body.ui-v3[data-route="wartung.uebersicht"] .v3-wu-table {
    min-width: 680px;
  }
}

@media (max-width: 900px) {
  body.ui-v3[data-route="stoerung.ticket"] .v3-st-quick-form {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="stoerung.ticket"] .ui-filterbar__group[data-st-filter="status"],
  body.ui-v3[data-route="stoerung.ticket"] .ui-filterbar__group[data-st-filter="assign"],
  body.ui-v3[data-route="stoerung.ticket"] .ui-filterbar__group[data-st-filter="typ"] {
    min-width: 0;
    flex: 1 1 100%;
  }

  body.ui-v3[data-route="stoerung.ticket"] .v3-st-marker-grid,
  body.ui-v3[data-route="stoerung.ticket"] .v3-st-occurrence-grid {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="stoerung.inbox"] #inbox_filter_form {
    gap: var(--s-3);
  }

  body.ui-v3[data-route="stoerung.inbox"] .ui-filterbar__group[data-inbox-filter="search"],
  body.ui-v3[data-route="stoerung.inbox"] .ui-filterbar__group[data-inbox-filter="asset"] {
    min-width: 0;
    max-width: none;
    flex: 1 1 100%;
  }

  body.ui-v3[data-route="stoerung.inbox"] .ui-filterbar__group[data-inbox-filter="asset"] .ui-input {
    min-width: 0;
  }

  body.ui-v3[data-route="stoerung.inbox"] .inbox-table.ui-table {
    min-width: 0;
  }
}

/* Admin: layout image preview */
.asset-layout-preview {
  max-width: 100%;
  max-height: 280px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: block;
}

/* ============================================================
 * Shared utility classes (alle Routen)
 * ============================================================ */

/* Status-/Error-Meldungszeile */
.v3-alert-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Alert-Card mit farbiger Bordüre links */
body.ui-v3 .v3-alert-card {
  border-left: 4px solid var(--border);
  margin-bottom: var(--s-4);
}
body.ui-v3 .v3-alert-card--ok    { border-left-color: var(--v3-success-medium); }
body.ui-v3 .v3-alert-card--danger { border-left-color: var(--v3-danger-medium); }
body.ui-v3 .v3-alert-card--warn   { border-left-color: var(--v3-warning-medium); }

/* Button-Aktionszeile */
.v3-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-4);
}

/* Checkbox + Label nebeneinander */
.v3-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* main.css setzt input { width:100% } — das trifft Checkboxes als Flex-Item und drückt
   das Label nach rechts. Hier explizit zurücksetzen. */
.v3-checkbox-row input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
}

.v3-checkbox-label {
  margin: 0;
  display: inline;
  font-weight: 600;
}

/* Pflichtfeld-Stern (inline) */
.v3-required {
  color: var(--danger-text);
}

/* Pflichtfeld-Label — automatisches * nach dem Text */
body.ui-v3 .ui-label--required::after {
  content: " *";
  color: var(--danger-text);
  font-weight: var(--fw-bold);
}

/* Trennlinie */
.v3-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}

/* Abschnittstitel unter Trennlinie */
.v3-section-title {
  margin: 0 0 var(--s-3) 0;
}

/* Listen-Header: Titel + Aktion nebeneinander */
.v3-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-4);
}

/* Card-Überschrift ohne Margin */
body.ui-v3 .v3-card-title { margin: 0; }

/* Formular-Wrapper mit Top-Abstand */
body.ui-v3 .v3-form { margin-top: var(--s-4); }

/* Inline-Formular (z.B. Deaktivieren-Button in Tabelle) */
body.ui-v3 .v3-form-inline { display: inline; }

/* Zweispaltige Form-Raster */
body.ui-v3 .v3-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: end;
}

/* Einspaltige Form-Raster */
body.ui-v3 .v3-grid-1col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

/* Kleine Top-Marge für Hinweistexte */
body.ui-v3 .v3-hint { margin-top: var(--s-3); }

/* Label ohne Margin (z.B. neben Checkbox) */
body.ui-v3 .v3-label-plain { margin: 0; }

/* Checkbox + Label als Flex-Zeile mit Unterpaddung */
body.ui-v3 .v3-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
}

/* Filter-Formular-Zeile */
body.ui-v3 .v3-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  align-items: flex-end;
}

/* Filter-Input-Breiten */
body.ui-v3 .v3-filter-w-xs { width: 110px; }
body.ui-v3 .v3-filter-w-sm { width: 140px; }
body.ui-v3 .v3-filter-w-md { width: 160px; }

/* Pagination-Zeile */
body.ui-v3 .v3-pagination-row {
  margin-top: var(--s-4);
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

/* Zentrierte Tabellenzelle */
body.ui-v3 .v3-td-center { text-align: center; }

/* Kleiner Linksabstand (z.B. Ghost-Button nach Text) */
body.ui-v3 .v3-ml-xs { margin-left: var(--s-2); }

/* Bottom-Margin für Abstände nach unten */
body.ui-v3 .v3-mb4 { margin-bottom: var(--s-4); }

/* Kleine Top-Marge 0.5rem */
body.ui-v3 .v3-mt-sm { margin-top: 0.5rem; }

/* Abschneidezelle kss.messwerte_uebersicht */
body.ui-v3[data-route="kss.messwerte_uebersicht"] .v3-mu-truncate { max-width: 180px; }

/* ============================================================
 * Tabellen-Aktions-Spalte — Breite von 140px auf auto korrigieren
 * (ui-v2 setzt width:140px, was "Deaktivieren" abschneidet)
 * ============================================================ */

body.ui-v3 .ui-table td.ui-td-actions,
body.ui-v3 .ui-table th.ui-th-actions {
  width: auto;
}

/* ============================================================
 * Route: admin.users — Zwei-Spalten-Layout (Form | Liste)
 * ============================================================ */

body.ui-v3[data-route="admin.users"] .v3-users-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

/* ============================================================
 * Route: admin.assets — Zwei-Spalten-Layout (Form | Liste)
 * ============================================================ */

body.ui-v3[data-route="admin.assets"] .v3-assets-layout {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

/* ============================================================
 * Route: stoerung.melden — Formular-Layout
 * ============================================================ */

/* 2-spaltiges Formular-Grid */
body.ui-v3[data-route="stoerung.melden"] .v3-melden-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

/* Layout-Karte (per JS ein-/ausgeblendet) */
body.ui-v3[data-route="stoerung.melden"] .v3-melden-layout-card {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: none;
}

/* Unterer Formular-Bereich (1 Spalte) */
body.ui-v3[data-route="stoerung.melden"] .v3-melden-bottom-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Textarea Mindesthöhe */
body.ui-v3[data-route="stoerung.melden"] .v3-melden-textarea {
  min-height: 120px;
}

/* Layout-Bühne (relativer Container für Marker) */
body.ui-v3[data-route="stoerung.melden"] .v3-melden-layout-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Layout-Bild (klickbar) */
body.ui-v3[data-route="stoerung.melden"] .v3-melden-layout-img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: crosshair;
}

/* Meldemaske: Formular nicht zu weit aufspannen */
body.ui-v3[data-route="stoerung.melden"] .ui-card {
  max-width: 960px;
}

/* ============================================================
 * Responsive Breakpoints
 * ============================================================ */

@media (max-width: 1280px) {
  body.ui-v3[data-route="admin.assets"] .v3-assets-layout,
  body.ui-v3[data-route="admin.users"] .v3-users-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body.ui-v3[data-route="stoerung.melden"] .v3-melden-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * KSS Verlauf – Soll/Ist Spalten
 * ============================================================ */
body.ui-v3[data-route="kss.verlauf"] .kss-soll,
body.ui-v3[data-route="kss.verlauf"] .kss-ist {
  display: block;
  font-size: 0.78rem;
  line-height: 1.5;
}
body.ui-v3[data-route="kss.verlauf"] .kss-soll {
  color: var(--text-muted);
}
body.ui-v3[data-route="kss.verlauf"] .kss-val--ok {
  color: var(--success-text);
  font-weight: 500;
}
body.ui-v3[data-route="kss.verlauf"] .kss-val--warn {
  color: var(--warning-text);
  font-weight: 500;
}

/* ============================================================
 * KSS Phase 2 – Dashboard (operatives zentrales Dashboard)
 * ============================================================ */

/* Bestehende Quality-Badge-Farben */
body.ui-v3[data-route="kss.dashboard"] .kss-quality--ok {
  color: var(--success-text);
}
body.ui-v3[data-route="kss.dashboard"] .kss-quality--warn {
  color: var(--warning-text);
}
body.ui-v3[data-route="kss.dashboard"] .kss-quality--danger {
  color: var(--danger-text);
}

/* KPI-Grid: 6 Karten in einer Reihe */
body.ui-v3[data-route="kss.dashboard"] .kss-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="kss.dashboard"] .kss-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  border-top: 3px solid transparent;
}

body.ui-v3[data-route="kss.dashboard"] .kss-kpi-card__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ui-v3[data-route="kss.dashboard"] .kss-kpi-card__value {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

body.ui-v3[data-route="kss.dashboard"] .kss-kpi-card__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

body.ui-v3[data-route="kss.dashboard"] .kss-kpi-card--warn {
  border-top-color: var(--warning-border);
}

body.ui-v3[data-route="kss.dashboard"] .kss-kpi-card--danger {
  border-top-color: var(--danger-border);
}

body.ui-v3[data-route="kss.dashboard"] .kss-kpi-card--ok {
  border-top-color: var(--success-border);
}

/* Status-Badge: operativer Sweetspot-Status */
body.ui-v3[data-route="kss.dashboard"] .kss-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

body.ui-v3[data-route="kss.dashboard"] .kss-status--gruen {
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
  border: 1px solid var(--status-ok-border);
}

body.ui-v3[data-route="kss.dashboard"] .kss-status--gelb {
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
  border: 1px solid var(--status-warn-border);
}

body.ui-v3[data-route="kss.dashboard"] .kss-status--rot {
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
  border: 1px solid var(--status-danger-border);
}

body.ui-v3[data-route="kss.dashboard"] .kss-status--grau {
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
  border: 1px solid var(--status-neutral-border);
}

/* Zeilenhervorhebung nach Status */
body.ui-v3[data-route="kss.dashboard"] .kss-row--rot td {
  background: var(--v3-danger-ghost);
}

body.ui-v3[data-route="kss.dashboard"] .kss-row--gelb td {
  background: var(--v3-warning-ghost);
}

/* Chart-Grid: 2 Charts nebeneinander */
body.ui-v3[data-route="kss.dashboard"] .kss-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="kss.dashboard"] .kss-chart-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}

/* Datenqualitäts-Box */
body.ui-v3[data-route="kss.dashboard"] .kss-quality-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

body.ui-v3[data-route="kss.dashboard"] .kss-quality-row {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

body.ui-v3[data-route="kss.dashboard"] .kss-trust--high {
  color: var(--success-text);
  font-weight: 600;
}

body.ui-v3[data-route="kss.dashboard"] .kss-trust--medium {
  color: var(--warning-text);
  font-weight: 600;
}

body.ui-v3[data-route="kss.dashboard"] .kss-trust--low {
  color: var(--danger-text);
  font-weight: 600;
}

/* Messwert-Zelle */
body.ui-v3[data-route="kss.dashboard"] .kss-mess-val {
  font-weight: 500;
}

body.ui-v3[data-route="kss.dashboard"] .kss-mess-meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Sub-Zeile in Dashboard-Tabelle (z.B. Datum unter Hauptwert) */
body.ui-v3[data-route="kss.dashboard"] .kss-cell-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Trend-Icons (ohne inline styles) */
body.ui-v3[data-route="kss.dashboard"] .kss-trend--sf { color: var(--v3-danger-red); }
body.ui-v3[data-route="kss.dashboard"] .kss-trend--f  { color: var(--v3-orange); }
body.ui-v3[data-route="kss.dashboard"] .kss-trend--s  { color: var(--text-muted); }
body.ui-v3[data-route="kss.dashboard"] .kss-trend--r  { color: var(--v3-success-medium); }
body.ui-v3[data-route="kss.dashboard"] .kss-trend--sr { color: var(--v3-success-dark); }

/* Empfehlung-Hervorhebung */
body.ui-v3[data-route="kss.dashboard"] .kss-rec-highlight {
  font-weight: 600;
  color: var(--v3-warning-medium);
}

/* Empfehlungs-Details: <details>-Element als Card */
body.ui-v3[data-route="kss.dashboard"] .kss-details-card {
  margin-top: var(--s-4);
}

body.ui-v3[data-route="kss.dashboard"] .kss-details-card summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  padding: var(--s-3) 0;
  list-style: disclosure-closed;
}

body.ui-v3[data-route="kss.dashboard"] .kss-details-card[open] summary {
  list-style: disclosure-open;
  margin-bottom: var(--s-4);
}

/* KSS Tabellen: min-width Override (ui-v2 forciert 980px) */
body.ui-v3[data-route="kss.dashboard"] .ui-table { min-width: 600px; table-layout: auto; }
body.ui-v3[data-route="kss.verlauf"] .ui-table { min-width: 680px; table-layout: auto; }
body.ui-v3[data-route="kss.messwerte_analyse"] .ui-table { min-width: 820px; table-layout: auto; }

/* Quickinfo Sidebar */
body.ui-v3[data-route="kss.dashboard"] .v3-kss-side-card {
  margin-bottom: var(--s-6);
  position: sticky;
  top: 18px;
}

body.ui-v3[data-route="kss.dashboard"] .v3-kss-side-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
}

body.ui-v3[data-route="kss.dashboard"] .v3-kss-side-subtitle {
  margin-top: 6px;
}

body.ui-v3[data-route="kss.dashboard"] .v3-kss-side-section {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

body.ui-v3[data-route="kss.dashboard"] .v3-kss-side-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

body.ui-v3[data-route="kss.dashboard"] .v3-kss-section-title {
  font-size: var(--fs-base);
  font-weight: 700;
  margin: 0 0 var(--s-2) 0;
}

body.ui-v3[data-route="kss.dashboard"] .v3-kss-quicklist { margin-top: 12px; }
body.ui-v3[data-route="kss.dashboard"] .v3-kss-quickitem-mid { white-space: normal; }
body.ui-v3[data-route="kss.dashboard"] .v3-kss-quickitem-links {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.ui-v3[data-route="kss.dashboard"] .v3-kss-quickitem-link-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}
body.ui-v3[data-route="kss.dashboard"] .v3-kss-quickitem-link-main { min-width: 0; flex: 1; }
body.ui-v3[data-route="kss.dashboard"] .v3-kss-side-empty { margin-top: 10px; }

/* Responsive: 3 Spalten unter 1280px (bp-lg) */
@media (max-width: 1280px) {
  body.ui-v3[data-route="kss.dashboard"] .kss-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Responsive: Charts übereinander unter 900px */
@media (max-width: 900px) {
  body.ui-v3[data-route="kss.dashboard"] .kss-chart-grid {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="kss.dashboard"] .kss-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
 * KSS Phase 2 – Analyse
 * ============================================================ */
body.ui-v3[data-route="kss.analyse"] .kss-chart-wrap,
body.ui-v3[data-route="kss.verlauf"] .kss-chart-wrap {
  position: relative;
  height: 260px;
  width: 100%;
}

body.ui-v3[data-route="kss.analyse"] .kss-kpi-row,
body.ui-v3[data-route="kss.verlauf"] .kss-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="kss.analyse"] .kss-kpi-card,
body.ui-v3[data-route="kss.verlauf"] .kss-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}

body.ui-v3[data-route="kss.analyse"] .kss-kpi-card__label,
body.ui-v3[data-route="kss.verlauf"] .kss-kpi-card__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

body.ui-v3[data-route="kss.analyse"] .kss-kpi-card__value,
body.ui-v3[data-route="kss.verlauf"] .kss-kpi-card__value {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 900px) {
  body.ui-v3[data-route="kss.analyse"] .kss-kpi-row,
  body.ui-v3[data-route="kss.verlauf"] .kss-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
 * KSS Phase 2 – Heatmap
 * ============================================================ */
body.ui-v3[data-route="kss.heatmap"] .kss-heatmap-wrap {
  overflow-x: auto;
}

body.ui-v3[data-route="kss.heatmap"] .kss-heatmap {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 660px;
}

body.ui-v3[data-route="kss.heatmap"] .kss-heatmap th {
  padding: 4px 6px;
  text-align: center;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

body.ui-v3[data-route="kss.heatmap"] .kss-heat-cell {
  width: 32px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: default;
}

body.ui-v3[data-route="kss.heatmap"] .kss-heat--0 { background: var(--surface-2); }
body.ui-v3[data-route="kss.heatmap"] .kss-heat--1 { background: var(--v3-blue-pale); }
body.ui-v3[data-route="kss.heatmap"] .kss-heat--2 { background: var(--v3-blue-light); }
body.ui-v3[data-route="kss.heatmap"] .kss-heat--3 { background: var(--v3-blue-mid);  color: var(--primary-contrast); }
body.ui-v3[data-route="kss.heatmap"] .kss-heat--4 { background: var(--v3-blue-dark); color: var(--primary-contrast); }
body.ui-v3[data-route="kss.heatmap"] .kss-heat--5 { background: var(--v3-blue-deep); color: var(--primary-contrast); }

body.ui-v3[data-route="kss.heatmap"] .kss-heatmap-legend {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

body.ui-v3[data-route="kss.heatmap"] .kss-heatmap-legend .kss-heat-cell {
  width: 20px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   KSS – Messwerte Analyse  (kss.messwerte_analyse)
   Additiver Scope, keine Änderung bestehender Klassen.
   ========================================================================== */

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid transparent;
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-card__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-card__value {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-card--ok {
  border-left-color: var(--success-border);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-card--warn {
  border-left-color: var(--warning-border);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-card--danger {
  border-left-color: var(--danger-border);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-chart-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-chart-sm {
  position: relative;
  height: 180px;
  width: 100%;
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-range-nav {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--s-4);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-range-btn {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--text-muted);
  background: var(--surface);
  transition: background 0.15s;
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-range-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-range-btn--active {
  background: var(--primary);
  color: var(--primary-contrast);
  border-color: var(--primary);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-quality-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-trust--high {
  color: var(--success-text);
  font-weight: 600;
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-trust--medium {
  color: var(--warning-text);
  font-weight: 600;
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-trust--low {
  color: var(--danger-text);
  font-weight: 600;
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-row--warn td {
  background: var(--warning-bg);
}

body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-row--danger td {
  background: var(--danger-bg);
}

/* Responsive: 2 Spalten unter 900px */
@media (max-width: 900px) {
  body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Responsive: 1 Spalte unter 640px (bp-sm) */
@media (max-width: 640px) {
  body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-row {
    grid-template-columns: 1fr;
  }
  body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-range-nav {
    gap: var(--s-1);
  }
}

/* Inline-Style-Migration: kss.messwerte_analyse */
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-subtitle  { margin-top: 4px; }
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-card-mb       { margin-bottom: var(--s-5); }
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-chart-caption { margin-bottom: var(--s-3); }
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-header-actions {
  margin-left: auto;
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-danger-text { color: var(--danger-text); }
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-warn-label  {
  margin-bottom: var(--s-3);
  color: var(--warning-text);
}
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-explain-list {
  margin: var(--s-1) 0 0 0;
  padding-left: 18px;
  line-height: 1.8;
}
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-truncate-cell { max-width: 200px; }
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-nachfuell-legend {
  color: #e11d48;
  font-size: 0.75rem;
}
/* Empfehlungs-KPI-Reihe */
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-rec-row {
  margin-bottom: var(--s-4, 1rem);
}
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-kpi-card--rec {
  border-left: 3px solid var(--primary, #2563eb);
}
/* Ausgeblendete Messwerte */
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-row--hidden td {
  opacity: 0.4;
  text-decoration: line-through;
}
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-row--hidden td:last-child {
  opacity: 1;
  text-decoration: none;
}
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-hide-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s;
}
body.ui-v3[data-route="kss.messwerte_analyse"] tr:hover .kssma-hide-btn,
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-row--hidden .kssma-hide-btn {
  opacity: 1;
}
body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-hide-form {
  margin: 0;
}
/* Prev/Next Navigation Separator (shared across KSS routes) */
body.ui-v3 .kssma-nav-sep {
  display: inline-block;
  width: 1px;
  height: 1.4em;
  background: var(--border, #e2e8f0);
  margin: 0 var(--s-2, 0.5rem);
  vertical-align: middle;
}

/* Overlay-Ebene für vorhandene Markierungen */
body.ui-v3[data-route="stoerung.melden"] .v3-melden-layout-existing {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Positionierungs-Marker (Nadel) */
body.ui-v3[data-route="stoerung.melden"] .v3-melden-layout-marker {
  position: absolute;
  width: 24px;
  height: 38px;
  transform: translate(-50%, -100%);
  display: none;
  pointer-events: none;
  background: var(--melden-marker-icon) center / contain no-repeat;
}

/* ============================================================
 * Störung KPIs – Dashboard
 * ============================================================ */

/* KPI-Grid: 5 Karten in einer Reihe */
body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  border-top: 3px solid transparent;
}

body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-card__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-card__value {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-card__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-card--warn {
  border-top-color: var(--warning-border);
}

body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-card--danger {
  border-top-color: var(--danger-border);
}

body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-card--ok {
  border-top-color: var(--success-border);
}

body.ui-v3[data-route="stoerung.kpis"] .kss-chart-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}

/* Responsive: 3 Spalten unter 1280px (bp-lg) */
@media (max-width: 1280px) {
  body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Responsive: 2 Spalten unter 900px */
@media (max-width: 900px) {
  body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================================
   TPM Maschinenübersicht  (route: tpm.uebersicht)
   ===================================================================== */

/* --- Summary-Leiste --- */
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-summary {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-summary__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 15px;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-summary__item--run {
  background: var(--success-bg);
  color: var(--v3-success-dark, #166534);
  border: 1px solid var(--success-border);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-summary__item--stop {
  background: var(--danger-bg);
  color: var(--v3-danger-dark, #991b1b);
  border: 1px solid var(--danger-border);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-summary__item--none {
  background: var(--surface-alt, #f3f4f6);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* --- Kategorie-Gruppenzeile --- */
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-group-header td {
  background: var(--surface-alt, #f8f9fa);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--s-2) var(--s-3);
  border-bottom: 2px solid var(--border);
}

/* --- Zustand-Badges --- */
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-zustand {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-zustand--run {
  background: var(--success-bg);
  color: var(--v3-success-dark, #166534);
  border: 1px solid var(--success-border);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-zustand--stop {
  background: var(--danger-bg);
  color: var(--v3-danger-dark, #991b1b);
  border: 1px solid var(--danger-border);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-zustand--none {
  background: var(--surface-alt, #f3f4f6);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* --- Timer (Seit: / Strsp.:) --- */
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-timer--green {
  color: var(--v3-success-dark, #166534);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-timer--amber {
  color: #b45309;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-timer--red {
  color: var(--v3-danger-medium, #dc2626);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-timer--darkred {
  color: var(--v3-danger-dark, #991b1b);
  background: var(--danger-bg);
  padding: 2px 8px;
  border-radius: 4px;
}

/* --- Steuerspannung Indicator (Dot + Text) --- */
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-strsp {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-strsp::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-strsp--on {
  color: var(--v3-success-dark, #166534);
}
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-strsp--on::before {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-strsp--off {
  color: var(--muted, #6b7280);
}
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-strsp--off::before {
  background: var(--muted, #9ca3af);
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
}
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-strsp__ts {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}

/* --- KPI Dashboard Cards --- */
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi-grid > :only-child {
  grid-column: 1 / -1;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi-card {
  padding: var(--s-4);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi-card__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 var(--s-3) 0;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi-card__row {
  display: flex;
  gap: var(--s-3);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi__value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 4px;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi__label {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--danger .v3-tpm-kpi__value {
  color: var(--v3-danger-dark, #991b1b);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--warn {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--warn .v3-tpm-kpi__value {
  color: #b45309;
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--ok {
  background: var(--success-bg);
  border-color: var(--success-border);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--ok .v3-tpm-kpi__value {
  color: var(--v3-success-dark, #166534);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--highlight {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.4);
}

body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--highlight .v3-tpm-kpi__value {
  color: #dc2626;
  font-size: 28px;
}

@media (max-width: 900px) {
  body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Befuellanlage (ba.*) – Route-scoped Styles
   ========================================================================= */

/* --- Dashboard KPI Grid ------------------------------------------------- */
body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4);
  text-align: center;
}

body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-card--ok {
  border-top-color: var(--success, #22c55e);
}

body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-card--warn {
  border-top-color: var(--warning, #f59e0b);
}

body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-card--danger {
  border-top-color: var(--danger, #ef4444);
}

body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-card__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--s-1);
}

body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-card__sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--s-1);
}

body.ui-v3[data-route="ba.dashboard"] .v3-ba-bottom-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

@media (max-width: 1280px) {
  body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  body.ui-v3[data-route="ba.dashboard"] .v3-ba-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Dashboard: Knoll-Werte --------------------------------------------- */
.v3-ba-knoll-values {
  display: flex;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin: var(--s-3) 0;
}

.v3-ba-knoll-values > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.v3-ba-knoll-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.v3-ba-knoll-value {
  font-size: 1.1rem;
  font-weight: 600;
}

.v3-ba-knoll-value--big {
  font-size: 1.6rem;
}

.v3-ba-knoll-ts {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--s-2);
}

.v3-ba-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--s-3) 0;
}

/* --- Störungslog: Alarm-/Warn-Zeilen ------------------------------------ */
.v3-ba-alarm-row {
  background: rgba(239, 68, 68, 0.08);
}

.v3-ba-warn-row {
  background: rgba(245, 158, 11, 0.08);
}

/* --- Filter-Row (Störungslog, Anlagenstatus, Knoll) --------------------- */
.v3-ba-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
}

.v3-ba-filter-row label {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: 0.85rem;
  font-weight: 500;
}

/* --- Pagination --------------------------------------------------------- */
.v3-ba-pagination {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  justify-content: center;
}

/* --- Count Badge (Störungslog Header) ----------------------------------- */
.v3-ba-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* --- Hint Text (Config View) -------------------------------------------- */
.v3-ba-hint {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #3b82f6;
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- Charts (Anlagenstatus, Knoll, Maschine Detail) --------------------- */
.v3-ba-chart-wrap {
  height: 280px;
  margin-bottom: var(--s-4);
}

.v3-ba-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

@media (max-width: 900px) {
  .v3-ba-chart-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Export-Formular (stoerung.export, wartung.export)
   ========================================================================= */

body.ui-v3[data-route="stoerung.export"] .v3-export-card,
body.ui-v3[data-route="wartung.export"]  .v3-export-card {
  padding: var(--s-5);
}

body.ui-v3[data-route="stoerung.export"] .v3-export-filter-grid,
body.ui-v3[data-route="wartung.export"]  .v3-export-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="stoerung.export"] .v3-export-field,
body.ui-v3[data-route="wartung.export"]  .v3-export-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

body.ui-v3[data-route="stoerung.export"] .v3-export-actions,
body.ui-v3[data-route="wartung.export"]  .v3-export-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  body.ui-v3[data-route="stoerung.export"] .v3-export-filter-grid,
  body.ui-v3[data-route="wartung.export"]  .v3-export-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   KPI-Dashboard  (dashboard.kpi)
   ========================================================================= */
body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-card--ok {
  border-left: 4px solid var(--v3-success-medium);
  background: var(--v3-success-light);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-card--warn {
  border-left: 4px solid var(--v3-warning-amber);
  background: var(--v3-warning-light);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-card--danger {
  border-left: 4px solid var(--v3-danger-red);
  background: var(--v3-danger-light);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text, #111);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

body.ui-v3[data-route="dashboard.kpi"] .v3-chart-container {
  height: 280px;
}

@media (max-width: 900px) {
  body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-chart-grid {
    grid-template-columns: 1fr;
  }
  body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   GLOBAL RESPONSIVE – Mobile Navigation
   ========================================================================= */

/* Hamburger toggle – hidden on desktop */
body.ui-v3 .v3-mobile-toggle {
  display: none;
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 1100;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

body.ui-v3 .v3-mobile-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}

/* Hamburger → X animation */
body.ui-v3 .v3-mobile-toggle[aria-expanded="true"] .v3-mobile-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.ui-v3 .v3-mobile-toggle[aria-expanded="true"] .v3-mobile-toggle__bar:nth-child(2) {
  opacity: 0;
}
body.ui-v3 .v3-mobile-toggle[aria-expanded="true"] .v3-mobile-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Backdrop overlay – hidden by default */
body.ui-v3 .v3-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity 250ms ease;
}

body.ui-v3 .v3-sidebar-backdrop--visible {
  display: block;
  opacity: 1;
}

/* Mobile breakpoint: ≤900px */
@media (max-width: 900px) {
  body.ui-v3 .v3-mobile-toggle {
    display: flex;
  }

  /* Sidebar: off-screen, slide in from left */
  body.ui-v3 .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 300ms ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Sidebar open */
  body.ui-v3.v3-sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Content: full width, room for hamburger */
  body.ui-v3 .content {
    padding-top: 60px;
  }

  /* Lock body scroll when sidebar open */
  body.ui-v3.v3-sidebar-open {
    overflow: hidden;
  }
}

/* =========================================================================
   GLOBAL RESPONSIVE – Component Overrides
   ========================================================================= */

/* KPI Grid: 4 → 2 columns */
@media (max-width: 900px) {
  body.ui-v3 .ui-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
}

/* KPI Grid: 2 → 1 column */
@media (max-width: 480px) {
  body.ui-v3 .ui-kpi-row {
    grid-template-columns: 1fr;
  }
}

/* Filterbar: stack vertically on small screens */
@media (max-width: 640px) {
  body.ui-v3 .ui-filterbar__form {
    flex-direction: column;
    gap: var(--s-3);
  }

  body.ui-v3 .ui-filterbar__group {
    min-width: 0;
    flex: 1 1 100%;
  }

  body.ui-v3 .ui-filterbar__actions {
    width: 100%;
  }

  body.ui-v3 .ui-filterbar__actions .ui-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Tabs: horizontal scroll instead of wrap */
@media (max-width: 640px) {
  body.ui-v3 .ui-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--s-2);
  }

  body.ui-v3 .ui-tabs::-webkit-scrollbar {
    display: none;
  }

  body.ui-v3 .ui-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Cards: reduce padding */
@media (max-width: 640px) {
  body.ui-v3 .ui-card {
    padding: var(--s-3);
  }
}

/* Content area: tighter spacing */
@media (max-width: 640px) {
  body.ui-v3 .content {
    padding: 52px var(--s-3) var(--s-3);
  }
}

/* Page header: smaller on mobile */
@media (max-width: 640px) {
  body.ui-v3 .ui-page-title {
    font-size: var(--fs-lg);
  }

  body.ui-v3 .ui-page-subtitle {
    font-size: var(--fs-sm);
  }
}

/* Tables: tighter cells on mobile */
@media (max-width: 640px) {
  body.ui-v3 .ui-table th,
  body.ui-v3 .ui-table td {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* =========================================================================
   GLOBAL RESPONSIVE – Touch-Friendly (44px tap targets)
   ========================================================================= */

@media (max-width: 900px) {
  body.ui-v3 .ui-btn,
  body.ui-v3 .ui-btn--sm {
    min-height: 44px;
    padding: 10px 16px;
  }

  body.ui-v3 .navitem {
    min-height: 44px;
    padding: 12px;
  }

  body.ui-v3 .ui-tab {
    min-height: 44px;
    padding: 10px 14px;
  }

  body.ui-v3 .ui-input,
  body.ui-v3 select {
    min-height: 44px;
  }
}

/* =========================================================================
   GLOBAL RESPONSIVE – Route-specific small-screen fixes
   ========================================================================= */

@media (max-width: 640px) {
  body.ui-v3[data-route="stoerung.ticket"] .v3-st-header {
    flex-direction: column;
    align-items: flex-start;
  }

  body.ui-v3[data-route="stoerung.ticket"] .v3-st-occurrence-grid {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="stoerung.ticket"] .v3-st-marker-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   GLOBAL RESPONSIVE – Module-Fixes (Phase 2)
   ========================================================================= */

/* Fix 1: Shared Components – v3-grid-2col, v3-filter-w-*, v3-filter-form */
@media (max-width: 640px) {
  body.ui-v3 .v3-grid-2col {
    grid-template-columns: 1fr;
  }

  body.ui-v3 .v3-filter-w-xs,
  body.ui-v3 .v3-filter-w-sm,
  body.ui-v3 .v3-filter-w-md {
    width: 100%;
  }

  body.ui-v3 .v3-filter-form {
    flex-direction: column;
  }
}

/* Fix 2: stoerung.inbox – Filter min-widths */
@media (max-width: 900px) {
  body.ui-v3[data-route="stoerung.inbox"] .ui-filterbar__group[data-inbox-filter="search"],
  body.ui-v3[data-route="stoerung.inbox"] .ui-filterbar__group[data-inbox-filter="asset"] {
    min-width: 0;
    flex: 1 1 100%;
  }

  body.ui-v3[data-route="stoerung.inbox"] .ui-filterbar__group[data-inbox-filter="asset"] .ui-input {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  body.ui-v3[data-route="stoerung.inbox"] .inbox-header-meta {
    min-width: 0;
  }

  body.ui-v3[data-route="stoerung.inbox"] .v3-inbox-col-ticket {
    min-width: 0;
  }
}

/* Fix 3: KPI-Grids ≤480px → 1 Spalte (kss, ba, stoerung.kpis) */
@media (max-width: 480px) {
  body.ui-v3[data-route="kss.dashboard"] .kss-kpi-grid,
  body.ui-v3[data-route="kss.verlauf"] .kss-kpi-row,
  body.ui-v3[data-route="kss.analyse"] .kss-kpi-row,
  body.ui-v3[data-route="stoerung.kpis"] .kss-kpi-grid,
  body.ui-v3[data-route="ba.dashboard"] .v3-ba-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Fix 4: kss.heatmap – kleinere Cells, Legend-Wrap */
@media (max-width: 640px) {
  body.ui-v3[data-route="kss.heatmap"] .kss-heatmap {
    font-size: 11px;
    min-width: 480px;
  }

  body.ui-v3[data-route="kss.heatmap"] .kss-heat-cell {
    width: 26px;
    height: 24px;
  }

  body.ui-v3[data-route="kss.heatmap"] .kss-heatmap-legend {
    flex-wrap: wrap;
  }
}

/* Fix 5: wartung.admin_punkte – Form-Grids 1-spaltig, cell-text min-width */
@media (max-width: 640px) {
  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid-3,
  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-point-form-grid-2 {
    grid-template-columns: 1fr;
  }

  body.ui-v3[data-route="wartung.admin_punkte"] .v3-admin-cell-text {
    min-width: 0;
  }
}

/* Fix 6: wartung.punkt – Status-Col min-width reset */
@media (max-width: 640px) {
  body.ui-v3[data-route="wartung.punkt"] .v3-wp-status-col {
    min-width: 0;
  }
}

/* =========================================================================
   GLOBAL RESPONSIVE – Designer-Feinschliff (Phase 3)
   ========================================================================= */

/* D1: Chart-Höhen reduzieren (280px → 200px) – spart Viewport-Platz */
@media (max-width: 640px) {
  body.ui-v3[data-route="kss.dashboard"] .kss-chart-wrap,
  body.ui-v3[data-route="kss.analyse"] .kss-chart-wrap,
  body.ui-v3[data-route="kss.verlauf"] .kss-chart-wrap,
  body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-chart-wrap,
  body.ui-v3[data-route="stoerung.kpis"] .kss-chart-wrap,
  body.ui-v3[data-route="dashboard.kpi"] .v3-chart-container,
  body.ui-v3 .v3-ba-chart-wrap {
    height: 200px;
  }

  body.ui-v3[data-route="kss.messwerte_analyse"] .kssma-chart-sm {
    height: 140px;
  }
}

/* D2: KPI-Wert Font-Sizes auf Phones */
@media (max-width: 480px) {
  body.ui-v3[data-route="dashboard.kpi"] .v3-kpi-value {
    font-size: 1.5rem;
  }

  body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi__value {
    font-size: 20px;
  }

  body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-kpi--highlight .v3-tpm-kpi__value {
    font-size: 22px;
  }
}

/* D4: Tabellen-Scroll-Hint – Gradient rechts zeigt weiteren Inhalt an */
@media (max-width: 900px) {
  body.ui-v3 .ui-table-wrap {
    position: relative;
  }

  body.ui-v3 .ui-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(247, 248, 251, 0.8));
    pointer-events: none;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
  }
}

/* D5: Spacing-Reduktion auf Mobile */
@media (max-width: 640px) {
  body.ui-v3 .v3-hr {
    margin: var(--s-3) 0;
  }

  body.ui-v3 .v3-ba-knoll-values {
    gap: var(--s-3);
  }
}

/* D6: kss.messung_eingabe – Datumleiste + Inputs */
@media (max-width: 640px) {
  body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-datumbar {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    align-items: stretch;
  }

  body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-datum {
    width: 100%;
  }

  body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-num {
    width: 54px;
    padding: 6px 4px;
    font-size: 13px;
    text-align: center;
  }
}

/* D7: Page-Header Actions wrappen auf Mobile */
@media (max-width: 640px) {
  body.ui-v3 .ui-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }

  body.ui-v3 .ui-page-header__actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
}

/* =========================================================================
   PHASE 5 — DESIGN POLISH & MICRO-INTERACTIONS
   =========================================================================
   Additive layer: no existing rules are modified.
   Focus: tactile feel, visual hierarchy, Login standalone, sidebar refinement.
   ========================================================================= */

/* ── 1. LOGIN PAGE — Standalone Fullscreen ─────────────────────────────── */

/* Hide sidebar + mobile toggle on login page */
body.ui-v3[data-route=""] .sidebar,
body.ui-v3[data-route=""] .v3-mobile-toggle,
body.ui-v3[data-route=""] .v3-sidebar-backdrop {
  display: none !important;
}

/* Content fills the viewport on login */
body.ui-v3[data-route=""] .app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

body.ui-v3[data-route=""] .content {
  width: 100%;
  max-width: 100%;
  padding: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.ui-v3[data-route=""] .content__body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradient background – override main.css body bg + content bg */
body.ui-v3[data-route=""] {
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #1e293b 35%,
    #0f172a 100%
  ) !important;
  min-height: 100vh;
}

body.ui-v3[data-route=""] .content {
  background: transparent !important;
}

/* Reset container margin for centering */
body.ui-v3[data-route=""] .ui-container {
  margin-top: 0 !important;
}

/* Login card styling */
body.ui-v3[data-route=""] .ui-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 20px 40px -8px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

/* Login title */
body.ui-v3[data-route=""] .ui-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #1e293b, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Login input refinement */
body.ui-v3[data-route=""] .ui-input {
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

body.ui-v3[data-route=""] .ui-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Login button */
body.ui-v3[data-route=""] .ui-btn--primary {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

body.ui-v3[data-route=""] .ui-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

body.ui-v3[data-route=""] .ui-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

/* ── 2. SIDEBAR POLISH ──────────────────────────────────────────────────── */

/* Brand area: subtle glow */
body.ui-v3 .sidebar__brand a {
  position: relative;
  transition: opacity 150ms ease;
}

body.ui-v3 .sidebar__brand a:hover {
  opacity: 0.85;
}

/* User area refinement */
body.ui-v3 .sidebar__user {
  transition: background 150ms ease;
}

/* Nav items: smooth transitions */
body.ui-v3 .navitem {
  transition: background 150ms ease, color 150ms ease, padding-left 150ms ease;
  border-radius: 6px;
}

@media (hover: hover) {
  body.ui-v3 .navitem:hover {
    padding-left: 14px;
  }
}

body.ui-v3 .navitem--active {
  position: relative;
}

/* Active indicator bar */
body.ui-v3 .navitem--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: rgba(96, 165, 250, 0.8);
  border-radius: 0 3px 3px 0;
}

/* Nav group headers: subtle uppercase */
body.ui-v3 .navgroup {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.5;
  transition: opacity 150ms ease;
}

body.ui-v3 .navgroup:hover {
  opacity: 0.7;
}

/* Custom scrollbar for sidebar */
body.ui-v3 .sidebar__nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

body.ui-v3 .sidebar__nav::-webkit-scrollbar {
  width: 4px;
}

body.ui-v3 .sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

body.ui-v3 .sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 4px;
}

body.ui-v3 .sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}

/* Logout button: subtle style */
body.ui-v3 .sidebar__logout {
  transition: background 150ms ease, color 150ms ease;
  border-radius: 6px;
}

/* ── 3. CARDS — Hover Lift & Polish ─────────────────────────────────────── */

body.ui-v3 .ui-card {
  transition: box-shadow 200ms ease, transform 200ms ease;
}

/* Interactive cards (clickable links inside) get subtle lift */
body.ui-v3 .v3-kpi-card,
body.ui-v3 .ui-kpi {
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: default;
}

body.ui-v3 a.ui-kpi:hover,
body.ui-v3 a.v3-wd-kpi-link:hover .v3-kpi-card {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.1);
}

/* Quickinfo items: hover */
body.ui-v3 .ui-quickitem {
  transition: background 150ms ease, box-shadow 150ms ease;
}

body.ui-v3 .ui-quickitem:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── 4. TABLES — Row Hover & Polish ─────────────────────────────────────── */

/* Smooth row hover */
body.ui-v3 .ui-table tbody tr {
  transition: background 120ms ease;
}

/* Asset group rows: no hover needed */
body.ui-v3 .v3-wd-asset-row {
  transition: none;
}

/* ── 5. BUTTONS — Transitions & Polish ──────────────────────────────────── */

body.ui-v3 .ui-btn {
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease,
              box-shadow 150ms ease, transform 80ms ease;
}

body.ui-v3 .ui-btn--primary:hover {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

body.ui-v3 .ui-btn--primary:active {
  transform: scale(0.98);
}

body.ui-v3 .ui-btn--ghost:hover {
  background: rgba(37, 99, 235, 0.06);
}

/* ── 6. INPUTS — Focus States ───────────────────────────────────────────── */

body.ui-v3 .ui-input,
body.ui-v3 select {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.ui-v3 .ui-input:focus,
body.ui-v3 select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

/* ── 7. BADGES — Subtle Polish ──────────────────────────────────────────── */

body.ui-v3 .ui-badge {
  transition: transform 120ms ease;
}

body.ui-v3 .ui-badge:hover {
  transform: scale(1.04);
}

/* ── 8. TABS — Active & Hover ───────────────────────────────────────────── */

body.ui-v3 .ui-tab {
  transition: background 150ms ease, border-color 150ms ease,
              color 150ms ease, box-shadow 150ms ease;
}

/* ── 9. LINKS — Underline animation ─────────────────────────────────────── */

body.ui-v3 .ui-link {
  transition: color 120ms ease;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}

body.ui-v3 .ui-link:hover {
  text-decoration-color: currentColor;
}

/* ── 10. PAGE CONTENT — Fade-in on load ─────────────────────────────────── */

@keyframes v3-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.ui-v3 .content__body {
  animation: v3-fade-in 250ms ease-out;
}

/* ── 11. SKIP LINK — Accessible focus style ─────────────────────────────── */

body.ui-v3 .skip-link:focus {
  position: fixed;
  top: var(--s-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: var(--s-2) var(--s-4);
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-md);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* ── 12. SCROLLBAR — Main content custom scrollbar ──────────────────────── */

body.ui-v3 .content {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

body.ui-v3 .content::-webkit-scrollbar {
  width: 6px;
}

body.ui-v3 .content::-webkit-scrollbar-track {
  background: transparent;
}

body.ui-v3 .content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 6px;
}

body.ui-v3 .content::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.35);
}

/* ── 13. TABLE SORT HEADERS — Cursor hint ───────────────────────────────── */

body.ui-v3 .ui-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

body.ui-v3 .ui-table th[data-sort]:hover {
  color: var(--primary);
}

/* ── 14. SELECTION COLOR ────────────────────────────────────────────────── */

body.ui-v3 ::selection {
  background: rgba(37, 99, 235, 0.15);
  color: inherit;
}

/* ── 15. STATUS BADGE PULSE — for critical items ────────────────────────── */

body.ui-v3 .ui-badge--danger[data-pulse] {
  animation: v3-badge-pulse 2.5s ease-in-out infinite;
}

@keyframes v3-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.2); }
  50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

/* ── 16. PRINT STYLES ───────────────────────────────────────────────────── */

@media print {
  body.ui-v3 .sidebar,
  body.ui-v3 .v3-mobile-toggle,
  body.ui-v3 .v3-sidebar-backdrop,
  body.ui-v3 .skip-link {
    display: none !important;
  }

  body.ui-v3 .app {
    display: block;
  }

  body.ui-v3 .content {
    padding: 0;
    margin: 0;
  }

  body.ui-v3 .ui-card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }

  body.ui-v3 .ui-btn {
    display: none;
  }
}

/* ── 17. REDUCED MOTION — Accessibility ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.ui-v3 .content__body {
    animation: none;
  }

  body.ui-v3 *,
  body.ui-v3 *::before,
  body.ui-v3 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── 18. LOGIN RESPONSIVE ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  body.ui-v3[data-route=""] .content {
    padding: var(--s-3);
    padding-top: var(--s-4);
  }

  body.ui-v3[data-route=""] .ui-container {
    margin-top: 0 !important;
  }

  body.ui-v3[data-route=""] .ui-card {
    padding: var(--s-5) !important;
  }

  body.ui-v3[data-route=""] .ui-page-title {
    font-size: 1.4rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ASSET RETROFIT – Anlagenbaum + Detail
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Globale Asset-Badges (nicht route-scoped) ────────────────────────── */

body.ui-v3 .v3-asset-status--neu            { background: var(--info-bg, #e0f0ff); color: var(--info-text, #1a6fbf); }
body.ui-v3 .v3-asset-status--in-betrieb     { background: var(--success-bg, #e6f9ed); color: var(--success-text, #1a7a3a); }
body.ui-v3 .v3-asset-status--angehalten     { background: var(--warning-bg, #fff5e0); color: var(--warning-text, #8a6200); }
body.ui-v3 .v3-asset-status--ausser-betrieb { background: var(--surface-2, #f0f0f0); color: var(--text-muted, #777); }

body.ui-v3 .v3-krit--1 { background: var(--success-bg, #e6f9ed); color: var(--success-text, #1a7a3a); }
body.ui-v3 .v3-krit--2 { background: var(--warning-bg, #fff5e0); color: var(--warning-text, #8a6200); }
body.ui-v3 .v3-krit--3 { background: var(--danger-bg, #fde8e8); color: var(--danger-text, #b91c1c); }

body.ui-v3 .v3-asset-status--in-betrieb-text { color: var(--success-text, #1a7a3a); }
body.ui-v3 .v3-asset-status--angehalten-text { color: var(--warning-text, #8a6200); }
body.ui-v3 .v3-asset-status--ausser-betrieb-text { color: var(--text-muted, #777); }

/* ── 19. ANLAGENBAUM (asset.tree) ─────────────────────────────────────── */

body.ui-v3[data-route="asset.tree"] .v3-tree-filter {
  margin-bottom: var(--s-4);
}
body.ui-v3[data-route="asset.tree"] .v3-tree-filter .ui-input {
  max-width: 400px;
}

body.ui-v3[data-route="asset.tree"] .v3-tree-table {
  min-width: 800px;
}
body.ui-v3[data-route="asset.tree"] .v3-tree-table th:first-child,
body.ui-v3[data-route="asset.tree"] .v3-tree-table td:first-child {
  width: 55%;
}

/* Tree row */
body.ui-v3 .v3-tree-row { transition: background 0.15s; }
body.ui-v3 .v3-tree-row:hover { background: var(--surface-2, #f5f5f5); }
body.ui-v3 .v3-tree-row.v3-tree-highlight { background: var(--info-bg, #e0f0ff); }

body.ui-v3 .v3-tree-cell-name {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  min-width: 0;
}
body.ui-v3 .v3-tree-indent {
  display: inline-block;
  flex-shrink: 0;
  width: calc(var(--v3-tree-indent, 0) * 28px);
}

/* Toggle button */
body.ui-v3 .v3-tree-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--r-sm, 4px);
  color: var(--text-muted, #777);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s, color 0.15s;
}
body.ui-v3 .v3-tree-toggle:hover { color: var(--text, #333); }
body.ui-v3 .v3-tree-toggle[aria-expanded="false"] .v3-tree-toggle__icon {
  transform: rotate(-90deg);
}
body.ui-v3 .v3-tree-toggle-spacer {
  display: inline-block;
  width: 20px;
  flex-shrink: 0;
}

/* Name link */
body.ui-v3 .v3-tree-name {
  color: var(--text, #333);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2, 8px);
  min-width: 0;
}
body.ui-v3 .v3-tree-name:hover { color: var(--primary, #2563eb); }
/* Code (z.B. WE1-HA1-LW) und Typ-Tag duerfen NIE umgebrochen werden */
body.ui-v3 .v3-tree-name strong {
  white-space: nowrap;
  flex-shrink: 0;
}
body.ui-v3 .v3-tree-typ {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted, #777);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Actions / Drei-Punkt-Menue */
body.ui-v3 .v3-tree-cell-actions {
  width: 40px;
  text-align: right;
}
body.ui-v3 .v3-ctx-wrap {
  position: relative;
  display: inline-block;
}
body.ui-v3 .v3-ctx-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm, 4px);
  color: var(--text-muted, #777);
  transition: background 0.15s;
}
body.ui-v3 .v3-ctx-btn:hover { background: var(--surface-2, #f0f0f0); color: var(--text, #333); }

body.ui-v3 .v3-ctx-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 100;
  min-width: 180px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--r-lg, 8px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
  padding: var(--s-1, 4px) 0;
}
body.ui-v3 .v3-ctx-item {
  display: block;
  padding: var(--s-2, 8px) var(--s-4, 16px);
  color: var(--text, #333);
  text-decoration: none;
  font-size: var(--fs-sm, 0.875rem);
  transition: background 0.1s;
}
body.ui-v3 .v3-ctx-item:hover {
  background: var(--surface-2, #f5f5f5);
}

/* ── 20. ANLAGENDETAIL (asset.detail) ─────────────────────────────────── */

body.ui-v3[data-route="asset.detail"] .v3-ad-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--s-6, 24px);
  align-items: start;
}

body.ui-v3[data-route="asset.detail"] .v3-ad-sidebar {
  position: sticky;
  top: var(--s-4, 16px);
}

body.ui-v3[data-route="asset.detail"] .v3-ad-sidebar .ui-card {
  padding: var(--s-5, 20px);
}

body.ui-v3[data-route="asset.detail"] .v3-ad-header {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  margin-bottom: var(--s-4, 16px);
}
body.ui-v3[data-route="asset.detail"] .v3-ad-header__typ {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted, #777);
}
body.ui-v3[data-route="asset.detail"] .v3-ad-header__name {
  font-size: var(--fs-lg, 1.125rem);
  font-weight: var(--fw-bold, 700);
}

/* Field list (Datenfelder) */
body.ui-v3 .v3-ad-fields {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.ui-v3 .v3-ad-fields li {
  padding: var(--s-2, 8px) 0;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.ui-v3 .v3-ad-fields li:last-child { border-bottom: none; }
body.ui-v3 .v3-ad-field-label {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted, #777);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
body.ui-v3 .v3-ad-field-value {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text, #333);
}

/* Section headings */
body.ui-v3 .v3-ad-section-header {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  cursor: pointer;
}

/* Accordion sections */
body.ui-v3 .v3-ad-section {
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--r-lg, 8px);
  margin-bottom: var(--s-3, 12px);
  overflow: visible;
  position: relative;
}
body.ui-v3 .v3-ad-section summary {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  background: var(--surface, #fff);
  cursor: pointer;
  user-select: none;
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-sm, 0.875rem);
  list-style: none;
  transition: background 0.1s;
}
body.ui-v3 .v3-ad-section summary:hover { background: var(--surface-2, #f5f5f5); }
body.ui-v3 .v3-ad-section summary::-webkit-details-marker { display: none; }
body.ui-v3 .v3-ad-section summary::before {
  content: '\25B6';
  font-size: 0.6em;
  transition: transform 0.2s;
  color: var(--text-muted, #777);
}
body.ui-v3 .v3-ad-section[open] summary::before { transform: rotate(90deg); }

body.ui-v3 .v3-ad-section__count {
  margin-left: auto;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted, #777);
  font-weight: var(--fw-normal, 400);
}
body.ui-v3 .v3-ad-section__body {
  padding: var(--s-4, 16px);
  border-top: 1px solid var(--border-light, #f0f0f0);
}

/* Notiz-Formular */
body.ui-v3 .v3-notiz-form {
  display: flex;
  gap: var(--s-2, 8px);
  margin-top: var(--s-3, 12px);
}
body.ui-v3 .v3-notiz-form textarea {
  flex: 1;
  min-height: 60px;
  resize: vertical;
}

/* Audit-Eintrag */
body.ui-v3 .v3-audit-entry {
  padding: var(--s-2, 8px) 0;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
  font-size: var(--fs-xs, 0.75rem);
}
body.ui-v3 .v3-audit-entry:last-child { border-bottom: none; }
body.ui-v3 .v3-audit-action {
  font-weight: var(--fw-semibold, 600);
}
body.ui-v3 .v3-audit-ts {
  color: var(--text-muted, #777);
}

/* Responsive */
@media (max-width: 900px) {
  body.ui-v3[data-route="asset.detail"] .v3-ad-layout {
    grid-template-columns: 1fr;
  }
  body.ui-v3[data-route="asset.detail"] .v3-ad-sidebar {
    position: static;
  }
}

/* ── 21. DATEI-MANAGEMENT ─────────────────────────────────────────────── */

body.ui-v3 .v3-file-row {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  padding: var(--s-2, 8px) 0;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
  font-size: var(--fs-sm, 0.875rem);
}
body.ui-v3 .v3-file-row:last-child { border-bottom: none; }
body.ui-v3 .v3-file-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  color: var(--text-muted, #777);
}
body.ui-v3 .v3-file-name { flex: 1; }
body.ui-v3 .v3-file-size { color: var(--text-muted, #777); min-width: 60px; text-align: right; }
body.ui-v3 .v3-file-date { color: var(--text-muted, #777); min-width: 120px; text-align: right; }

/* Edit-Formular in Sidebar */
body.ui-v3 .v3-ad-edit-form .v3-ad-field-group {
  margin-bottom: var(--s-3, 12px);
}
body.ui-v3 .v3-ad-edit-form label {
  display: block;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted, #777);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
body.ui-v3 .v3-ad-edit-form .ui-input,
body.ui-v3 .v3-ad-edit-form select,
body.ui-v3 .v3-ad-edit-form textarea {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   22. DESIGN-POLISH — Asset Retrofit Phase 2
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Asset-Typ-Icons im Baum ──────────────────────────────────────────── */

body.ui-v3 .v3-tree-name::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 6px;
  background: currentColor;
  opacity: 0.45;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Werk — Fabrik */
body.ui-v3 .v3-tree-name[data-typ="werk"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 17V9l4-3v3l4-3v3l4-3v3l4-3v11H2z' fill='%23000'/%3E%3Crect x='5' y='11' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='9' y='11' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='13' y='11' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='5' y='14' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='9' y='14' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='13' y='14' width='2' height='2' rx='.5' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 17V9l4-3v3l4-3v3l4-3v3l4-3v11H2z' fill='%23000'/%3E%3Crect x='5' y='11' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='9' y='11' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='13' y='11' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='5' y='14' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='9' y='14' width='2' height='2' rx='.5' fill='%23fff'/%3E%3Crect x='13' y='14' width='2' height='2' rx='.5' fill='%23fff'/%3E%3C/svg%3E");
  opacity: 0.6;
}
/* Halle — Gebaeude */
body.ui-v3 .v3-tree-name[data-typ="halle"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17V8l7-5 7 5v9H3z' fill='%23000'/%3E%3Crect x='5' y='10' width='3' height='3' rx='.5' fill='%23fff'/%3E%3Crect x='12' y='10' width='3' height='3' rx='.5' fill='%23fff'/%3E%3Crect x='8' y='13' width='4' height='4' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17V8l7-5 7 5v9H3z' fill='%23000'/%3E%3Crect x='5' y='10' width='3' height='3' rx='.5' fill='%23fff'/%3E%3Crect x='12' y='10' width='3' height='3' rx='.5' fill='%23fff'/%3E%3Crect x='8' y='13' width='4' height='4' fill='%23fff'/%3E%3C/svg%3E");
  opacity: 0.6;
}
/* Produktionslinie — Zahnrad */
body.ui-v3 .v3-tree-name[data-typ="produktionslinie"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 2h3l.4 2.2a6 6 0 011.5.9l2.1-.8 1.5 2.6-1.7 1.4a6 6 0 010 1.7l1.7 1.4-1.5 2.6-2.1-.8a6 6 0 01-1.5.9L11.5 17h-3l-.4-2.2a6 6 0 01-1.5-.9l-2.1.8-1.5-2.6 1.7-1.4a6 6 0 010-1.7L3 7.6l1.5-2.6 2.1.8a6 6 0 011.5-.9L8.5 2z' fill='%23000'/%3E%3Ccircle cx='10' cy='9.75' r='2.5' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 2h3l.4 2.2a6 6 0 011.5.9l2.1-.8 1.5 2.6-1.7 1.4a6 6 0 010 1.7l1.7 1.4-1.5 2.6-2.1-.8a6 6 0 01-1.5.9L11.5 17h-3l-.4-2.2a6 6 0 01-1.5-.9l-2.1.8-1.5-2.6 1.7-1.4a6 6 0 010-1.7L3 7.6l1.5-2.6 2.1.8a6 6 0 011.5-.9L8.5 2z' fill='%23000'/%3E%3Ccircle cx='10' cy='9.75' r='2.5' fill='%23fff'/%3E%3C/svg%3E");
  opacity: 0.6;
}
/* Infrastruktur — Schraubenschluessel */
body.ui-v3 .v3-tree-name[data-typ="infrastruktur"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6 6.1a4.5 4.5 0 01-.7 5.3l-6.5 6.5-2.8-2.8 6.5-6.5a4.5 4.5 0 015.3-.7l-2.1 2.1 1 1 2.1-2.1z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6 6.1a4.5 4.5 0 01-.7 5.3l-6.5 6.5-2.8-2.8 6.5-6.5a4.5 4.5 0 015.3-.7l-2.1 2.1 1 1 2.1-2.1z' fill='%23000'/%3E%3C/svg%3E");
  opacity: 0.6;
}
/* Maschine — Monitor/CNC */
body.ui-v3 .v3-tree-name[data-typ="maschine"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='3' width='16' height='11' rx='1.5' fill='%23000'/%3E%3Crect x='4' y='5' width='12' height='7' rx='.5' fill='%23fff'/%3E%3Cpath d='M7 16h6M10 14v2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='3' width='16' height='11' rx='1.5' fill='%23000'/%3E%3Crect x='4' y='5' width='12' height='7' rx='.5' fill='%23fff'/%3E%3Cpath d='M7 16h6M10 14v2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.55;
}
/* Anlage — Wuerfel */
body.ui-v3 .v3-tree-name[data-typ="anlage"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2l7 4v8l-7 4-7-4V6l7-4z' fill='%23000'/%3E%3Cpath d='M10 10L3 6M10 10l7-4M10 10v8' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2l7 4v8l-7 4-7-4V6l7-4z' fill='%23000'/%3E%3Cpath d='M10 10L3 6M10 10l7-4M10 10v8' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
  opacity: 0.55;
}

/* ── Baum-Polish ──────────────────────────────────────────────────────── */

/* Gruppen-Zeilen (Werk, Halle) visuell absetzen */
body.ui-v3 .v3-tree-row.v3-tree-depth-0 { background: var(--surface-2, #f0f2f7); font-weight: var(--fw-semibold, 600); }
body.ui-v3 .v3-tree-row.v3-tree-depth-0:hover { background: var(--surface-3, #e8ebf2); }
body.ui-v3 .v3-tree-row.v3-tree-depth-1 { background: rgba(0,0,0,.015); }

/* Subtile Baumlinie links */
body.ui-v3 .v3-tree-row.v3-tree-depth-2 .v3-tree-indent,
body.ui-v3 .v3-tree-row.v3-tree-depth-3 .v3-tree-indent,
body.ui-v3 .v3-tree-row.v3-tree-depth-4 .v3-tree-indent {
  border-left: 2px solid var(--border-light, #edf0f7);
  margin-left: 10px;
  padding-left: 0;
}

/* Toggle-Hover Kreis */
body.ui-v3 .v3-tree-toggle:hover {
  background: var(--surface-3, #e8ebf2);
  border-radius: 50%;
}

/* Kontextmenu Fade-In */
body.ui-v3 .v3-ctx-menu {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast, 120ms) var(--ease-out, ease-out),
              transform var(--duration-fast, 120ms) var(--ease-out, ease-out);
  pointer-events: none;
}
body.ui-v3 .v3-ctx-menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Detail-Sidebar-Polish ────────────────────────────────────────────── */

/* Status-farbiger Top-Border */
body.ui-v3 .v3-ad-card { border-top: 3px solid var(--border, #e0e0e0); }
body.ui-v3 .v3-ad-card[data-status="in_betrieb"]      { border-top-color: var(--success-solid, #22c55e); }
body.ui-v3 .v3-ad-card[data-status="neu"]              { border-top-color: var(--info-text, #1a6fbf); }
body.ui-v3 .v3-ad-card[data-status="angehalten"]       { border-top-color: var(--warning-solid, #f59e0b); }
body.ui-v3 .v3-ad-card[data-status="ausser_betrieb"]   { border-top-color: var(--text-muted, #6b7280); }

/* Mehr Breathing Room fuer Felder */
body.ui-v3 .v3-ad-fields li { padding: var(--s-3, 12px) 0; }

/* Bearbeiten-Button als Ghost */
body.ui-v3[data-route="asset.detail"] .ui-btn:not(.ui-btn--primary) {
  background: transparent;
  border: 1px solid var(--border, #e2e6ef);
  color: var(--text-muted, #6b7280);
  transition: all var(--duration-fast, 120ms);
}
body.ui-v3[data-route="asset.detail"] .ui-btn:not(.ui-btn--primary):hover {
  border-color: var(--primary, #2563eb);
  color: var(--primary, #2563eb);
  background: var(--primary-light, #eff6ff);
}

/* ── Accordion-Polish ─────────────────────────────────────────────────── */

/* Section-Icon Styling */
body.ui-v3 .v3-sec-icon {
  flex-shrink: 0;
  color: var(--text-muted, #6b7280);
  vertical-align: middle;
}
body.ui-v3 .v3-ad-section[open] .v3-sec-icon {
  color: var(--primary, #2563eb);
}

/* Chevron hover shift */
body.ui-v3 .v3-ad-section summary:hover::before {
  color: var(--primary, #2563eb);
}

/* Smooth body transition */
body.ui-v3 .v3-ad-section__body {
  animation: v3-section-open var(--duration-normal, 200ms) var(--ease-out, ease-out);
}
@keyframes v3-section-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dateien-Polish ───────────────────────────────────────────────────── */

body.ui-v3 .v3-file-row { transition: background var(--duration-fast, 120ms); border-radius: var(--r-sm, 4px); padding-left: var(--s-2, 8px); padding-right: var(--s-2, 8px); }
body.ui-v3 .v3-file-row:hover { background: var(--surface-2, #f0f2f7); }
body.ui-v3 .v3-file-icon svg { vertical-align: middle; }
body.ui-v3 .v3-file-actions { flex-shrink: 0; margin-left: auto; }

/* Ordner aufklappbar */
body.ui-v3 .v3-folder { margin-bottom: var(--s-1, 4px); }
body.ui-v3 .v3-file-row--folder {
  cursor: pointer;
  list-style: none;
  background: var(--surface-2, #f0f2f7);
  border-radius: var(--r-sm, 4px);
  font-weight: var(--fw-semibold, 600);
}
body.ui-v3 .v3-file-row--folder::-webkit-details-marker { display: none; }
body.ui-v3 .v3-file-row--folder:hover { background: var(--surface-3, #e8ebf2); }
body.ui-v3 .v3-folder__body {
  padding-left: var(--s-6, 24px);
  border-left: 2px solid var(--border-light, #edf0f7);
  margin-left: var(--s-3, 12px);
  margin-bottom: var(--s-2, 8px);
}
body.ui-v3 .v3-ctx-item--danger { color: var(--danger-text, #b91c1c); }
body.ui-v3 .v3-ctx-item--danger:hover { background: var(--danger-bg, #fde8e8); }

/* Badge-Row in Section Summary */
body.ui-v3 .v3-badge-row {
  display: inline-flex;
  gap: var(--s-2, 8px);
  align-items: center;
  font-weight: var(--fw-normal, 400);
}
body.ui-v3 .v3-badge-row a.ui-badge {
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms);
}
body.ui-v3 .v3-badge-row a.ui-badge:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,.1));
}

/* QR-Block in Sidebar */
body.ui-v3 .v3-qr-img svg { width: 100%; height: auto; }

/* Print QR */
@media print {
  body.ui-v3 .v3-qr-block { page-break-inside: avoid; }
}
body.ui-v3 .v3-file-source {
  display: inline-block;
  font-size: var(--fs-xs, 0.7rem);
  color: var(--text-faint, #9ca3af);
  background: var(--surface-2, #f0f2f7);
  padding: 1px 6px;
  border-radius: var(--r-full, 999px);
  margin-left: var(--s-2, 8px);
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════
   23. MOBILE STÖRUNG MELDEN
   ══════════════════════════════════════════════════════════════════════════ */

body.ui-v3 .v3-melden-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 12px);
}

body.ui-v3 .v3-mm-label {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--text, #111827);
  margin-bottom: var(--s-1, 4px);
  display: block;
}

/* Meldungstyp: 2 große Karten */
body.ui-v3 .v3-mm-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3, 12px);
  margin-bottom: var(--s-2, 8px);
}
body.ui-v3 .v3-mm-type input { display: none; }
body.ui-v3 .v3-mm-type__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2, 8px);
  padding: var(--s-4, 16px) var(--s-3, 12px);
  border: 2px solid var(--border, #e2e6ef);
  border-radius: var(--r-xl, 16px);
  cursor: pointer;
  transition: all var(--duration-fast, 120ms);
  background: var(--surface, #fff);
}
body.ui-v3 .v3-mm-type__card strong { font-size: var(--fs-base, 1rem); }
body.ui-v3 .v3-mm-type__card small { font-size: var(--fs-xs, 0.75rem); color: var(--text-muted, #6b7280); line-height: 1.3; }

/* Störmeldung ausgewählt */
body.ui-v3 .v3-mm-type--stoerung input:checked + .v3-mm-type__card {
  border-color: var(--danger-solid, #ef4444);
  background: var(--danger-bg, #fde8e8);
  color: var(--danger-text, #b91c1c);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}
body.ui-v3 .v3-mm-type--stoerung input:checked + .v3-mm-type__card svg { color: var(--danger-solid, #ef4444); }

/* Mängelkarte ausgewählt */
body.ui-v3 .v3-mm-type--maengel input:checked + .v3-mm-type__card {
  border-color: var(--warning-solid, #f59e0b);
  background: var(--warning-bg, #fff5e0);
  color: var(--warning-text, #8a6200);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
body.ui-v3 .v3-mm-type--maengel input:checked + .v3-mm-type__card svg { color: var(--warning-solid, #f59e0b); }

/* Fachkategorie: 4 Buttons */
body.ui-v3 .v3-mm-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2, 8px);
  margin-bottom: var(--s-2, 8px);
}
body.ui-v3 .v3-mm-cat input { display: none; }
body.ui-v3 .v3-mm-cat span {
  display: block;
  text-align: center;
  padding: var(--s-2, 8px) var(--s-3, 12px);
  border: 2px solid var(--border, #e2e6ef);
  border-radius: var(--r-lg, 8px);
  cursor: pointer;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  transition: all var(--duration-fast, 120ms);
  background: var(--surface, #fff);
}
body.ui-v3 .v3-mm-cat input:checked + span {
  border-color: var(--primary, #2563eb);
  background: var(--primary-light, #eff6ff);
  color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* Mobile-Melden: extrahierte Inline-Styles */
body.ui-v3 .v3-mm-alert       { margin-bottom: var(--s-4, 16px); }
body.ui-v3 .v3-mm-asset-card  { text-align: center; padding: var(--s-4, 16px); margin-bottom: var(--s-4, 16px); }
body.ui-v3 .v3-mm-asset-title { margin: var(--s-1, 4px) 0; }
body.ui-v3 .v3-mm-file-input  { display: none; }
body.ui-v3 .v3-mm-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  font-size: var(--fs-sm, 0.875rem);
}

/* Foto-Upload Bereich */
body.ui-v3 .v3-mm-file-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3, 12px);
  padding: var(--s-4, 16px);
  border: 2px dashed var(--border, #e2e6ef);
  border-radius: var(--r-lg, 8px);
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  font-size: var(--fs-sm, 0.875rem);
  transition: border-color var(--duration-fast, 120ms);
}
body.ui-v3 .v3-mm-file-area:hover { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); }

/* Submit-Button */
body.ui-v3 .v3-mm-submit {
  width: 100%;
  padding: var(--s-4, 16px);
  font-size: var(--fs-base, 1rem);
  font-weight: var(--fw-bold, 700);
  justify-content: center;
  margin-top: var(--s-3, 12px);
}

/* Mobile Melden Container */
body.ui-v3 .v3-melden-mobile-wrap { max-width: 540px; margin: 0 auto; }

/* QR-Code Image */
body.ui-v3 .v3-qr-img { max-width: 140px; width: 100%; height: auto; }

/* QR-Scan Visitenkarte Container */
body.ui-v3 .v3-qr-scan-wrap { max-width: 520px; margin: 0 auto; }

/* =====================================================================
   Phase 7: Ersatzteilverwaltung (et.liste, et.detail, et.etikett)
   ===================================================================== */

/* --- et.liste: KPI-Zeile --- */
body.ui-v3[data-route="et.liste"] .v3-et-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
body.ui-v3[data-route="et.liste"] .v3-et-kpi-card {
  text-align: center;
  padding: var(--s-4) var(--s-3);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
body.ui-v3[data-route="et.liste"] .v3-et-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
body.ui-v3[data-route="et.liste"] .v3-et-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
body.ui-v3[data-route="et.liste"] .v3-et-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
body.ui-v3[data-route="et.liste"] .v3-et-kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 6px;
}
body.ui-v3[data-route="et.liste"] .v3-et-kpi--rot::before { background: var(--v3-danger-red); }
body.ui-v3[data-route="et.liste"] .v3-et-kpi--rot .v3-et-kpi-value { color: var(--v3-danger-red, #d32f2f); }
body.ui-v3[data-route="et.liste"] .v3-et-kpi--gelb::before { background: var(--v3-warning-amber); }
body.ui-v3[data-route="et.liste"] .v3-et-kpi--gelb .v3-et-kpi-value { color: var(--v3-warning-amber, #f9a825); }
body.ui-v3[data-route="et.liste"] .v3-et-kpi--gruen::before { background: var(--v3-success-medium, #059669); }
body.ui-v3[data-route="et.liste"] .v3-et-kpi--gruen .v3-et-kpi-value { color: var(--v3-success-dark, #2e7d32); }

/* --- et.liste: Ampel-Dot --- */
body.ui-v3[data-route="et.liste"] .v3-et-ampel-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
body.ui-v3[data-route="et.liste"] .v3-et-ampel-dot--rot { background: var(--v3-danger-red); box-shadow: 0 0 6px rgba(220,38,38,0.4); }
body.ui-v3[data-route="et.liste"] .v3-et-ampel-dot--gelb { background: var(--v3-warning-amber); box-shadow: 0 0 6px rgba(249,168,37,0.4); }
body.ui-v3[data-route="et.liste"] .v3-et-ampel-dot--gruen { background: var(--v3-success-medium, #059669); box-shadow: 0 0 6px rgba(5,150,105,0.3); }

/* --- et.liste: Teilenummer mono --- */
body.ui-v3[data-route="et.liste"] .v3-et-teilenr {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- et.liste: Universal-Pill in Bezeichnung + "Alle" in MASCH.-Spalte --- */
body.ui-v3[data-route="et.liste"] .v3-et-universal-pill {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  color: #6b21a8;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
body.ui-v3[data-route="et.liste"] .v3-et-universal-all {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  color: #6b21a8;
  font-weight: 600;
  font-size: 0.85em;
}

/* --- et.detail: Empty-State im Buchungs-Tab wenn keine Lagerorte --- */
body.ui-v3[data-route="et.detail"] .v3-et-empty-lagerorte {
  padding: var(--s-4);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  color: var(--warning-text);
}
body.ui-v3[data-route="et.detail"] .v3-et-empty-lagerorte p {
  margin: 0 0 var(--s-2);
}
body.ui-v3[data-route="et.detail"] .v3-et-empty-lagerorte p:last-of-type {
  margin-bottom: var(--s-3);
}
body.ui-v3[data-route="et.detail"] .v3-et-empty-lagerorte .ui-muted {
  color: var(--warning-text);
  opacity: 0.85;
}

/* --- et.detail: Universal-Checkbox-Zeile im Stammdaten-Tab --- */
body.ui-v3[data-route="et.detail"] .v3-et-universal-row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 8px;
  cursor: pointer;
}
body.ui-v3[data-route="et.detail"] .v3-et-universal-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
body.ui-v3[data-route="et.detail"] .v3-et-universal-row span {
  font-size: 0.95em;
  line-height: 1.4;
  color: #475569;
}
body.ui-v3[data-route="et.detail"] .v3-et-universal-row strong {
  color: #6b21a8;
}

/* --- et.liste: Zeilen-Highlighting bei Risiko --- */
body.ui-v3[data-route="et.liste"] tr[data-ampel="rot"] {
  background: var(--v3-danger-ghost, #fef8f8);
}
body.ui-v3[data-route="et.liste"] tr[data-ampel="rot"]:hover {
  background: var(--v3-danger-light, #fee2e2);
}
body.ui-v3[data-route="et.liste"] tr[data-ampel="gelb"] {
  background: var(--v3-warning-ghost, #fffef0);
}
body.ui-v3[data-route="et.liste"] tr[data-ampel="gelb"]:hover {
  background: var(--v3-warning-light, #fffbeb);
}

/* --- et.liste: Filter (compact) --- */
body.ui-v3[data-route="et.liste"] .v3-et-filter-bar {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
}
body.ui-v3[data-route="et.liste"] .v3-et-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-2) var(--s-3);
  align-items: end;
}
body.ui-v3[data-route="et.liste"] .v3-et-filter-grid label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 2px;
}
body.ui-v3[data-route="et.liste"] .v3-et-filter-grid .ui-input {
  height: 36px;
}
body.ui-v3[data-route="et.liste"] .v3-et-filter-actions {
  display: flex;
  gap: var(--s-2);
  align-items: end;
  padding-bottom: 2px;
}

/* --- et.liste: Lagerorte Section --- */
body.ui-v3[data-route="et.liste"] .v3-et-lagerorte-section { margin-top: var(--s-4); }
body.ui-v3[data-route="et.liste"] .v3-et-lagerorte-toggle {
  cursor: pointer;
  font-weight: 600;
  padding: var(--s-2) 0;
}
body.ui-v3[data-route="et.liste"] .v3-et-lagerort-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}

/* =====================================================================
   Wartungs-Session (wartung.session) – Design-Polish
   ===================================================================== */
body.ui-v3[data-route="wartung.session"] .v3-ws-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-left: 4px solid var(--primary);
}
body.ui-v3[data-route="wartung.session"] .v3-ws-sub {
  font-size: 0.8em;
  margin-top: 2px;
  opacity: 0.7;
}

/* Tabelle */
body.ui-v3[data-route="wartung.session"] .v3-ws-table th,
body.ui-v3[data-route="wartung.session"] .v3-ws-table td {
  vertical-align: middle;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-table tbody tr {
  transition: background var(--duration-fast) ease;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-table tbody tr:nth-child(even) {
  background: var(--surface-2);
}
body.ui-v3[data-route="wartung.session"] .v3-ws-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.04);
}

/* Rest-Spalte */
body.ui-v3[data-route="wartung.session"] .v3-ws-rest-due {
  color: var(--v3-danger-medium);
  font-weight: 700;
  font-size: 1.05em;
  font-variant-numeric: tabular-nums;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-rest-soon {
  color: var(--v3-warning-medium);
  font-weight: 700;
  font-size: 1.05em;
  font-variant-numeric: tabular-nums;
}

/* Messwert + Bemerkung */
body.ui-v3[data-route="wartung.session"] .v3-ws-num {
  width: 90px;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-bem {
  width: 150px;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-mw-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-einheit {
  font-size: 0.85em;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-pflicht {
  color: var(--v3-danger-medium);
  font-weight: 700;
}

/* Radio-Toggle als Button-Gruppe */
body.ui-v3[data-route="wartung.session"] .v3-ws-toggle {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
body.ui-v3[data-route="wartung.session"] .v3-ws-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-toggle label {
  padding: 6px 14px;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  transition: all var(--duration-fast) var(--ease-out);
  border-right: 1px solid var(--border);
  margin: 0;
  letter-spacing: 0.02em;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-toggle label:last-of-type {
  border-right: none;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-toggle input[type="radio"]:checked + .v3-ws-toggle-ok {
  background: var(--v3-success-light, #dcfce7);
  color: var(--v3-success-dark, #166534);
  box-shadow: inset 0 2px 4px rgba(5, 150, 105, 0.1);
}
body.ui-v3[data-route="wartung.session"] .v3-ws-toggle input[type="radio"]:checked + .v3-ws-toggle-ab {
  background: var(--v3-danger-light, #fee2e2);
  color: var(--v3-danger-dark, #991b1b);
  box-shadow: inset 0 2px 4px rgba(220, 38, 38, 0.1);
}

/* Ersatzteil-Block in Session */
body.ui-v3[data-route="wartung.session"] .v3-ws-et-block {
  min-width: 170px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--v3-blue-mid, #3b82f6);
  background: rgba(37, 99, 235, 0.03);
}
body.ui-v3[data-route="wartung.session"] .v3-ws-et-label {
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-et-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(37, 99, 235, 0.1);
}
body.ui-v3[data-route="wartung.session"] .v3-ws-et-sel {
  font-size: 0.8em;
  padding: 4px 8px;
  min-width: 140px;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-et-bez {
  font-size: 0.78em;
  margin-top: 1px;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-et-bestand-warn {
  font-size: 0.75em;
  color: var(--v3-danger-medium);
  font-weight: 600;
}

/* Sticky Submit-Bar */
body.ui-v3[data-route="wartung.session"] .v3-ws-sticky-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 2px solid var(--border);
  padding: var(--s-3) var(--s-4);
  margin: 0 calc(-1 * var(--s-6));
  margin-bottom: calc(-1 * var(--s-6));
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  z-index: 5;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}

/* Pflichtfeld-Fehler */
body.ui-v3[data-route="wartung.session"] .v3-ws-input-err {
  border-color: var(--v3-danger-medium) !important;
}
body.ui-v3[data-route="wartung.session"] .v3-ws-err {
  color: var(--v3-danger-medium);
  font-size: 0.8em;
  margin-top: 2px;
}

/* --- Shared: numeric cells --- */
body.ui-v3 .v3-et-num { text-align: right; font-variant-numeric: tabular-nums; }
body.ui-v3 .v3-et-positive { color: var(--v3-success-dark, #2e7d32); }
body.ui-v3 .v3-et-negative { color: var(--v3-danger-red, #d32f2f); }

/* --- Shared: info badge (used for Reparaturteil) --- */
body.ui-v3 .ui-badge--info {
  background: var(--v3-blue-pale, #e3f2fd);
  color: var(--v3-blue-dark, #1565c0);
}

/* --- et.detail: Tabs --- */
body.ui-v3[data-route="et.detail"] .v3-et-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--v3-gray-border, #ddd);
  margin-bottom: var(--s-4);
}
body.ui-v3[data-route="et.detail"] .v3-et-tab {
  padding: var(--s-2) var(--s-4);
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: border-color 0.15s;
}
body.ui-v3[data-route="et.detail"] .v3-et-tab:hover { border-bottom-color: var(--v3-gray-border, #bbb); }
body.ui-v3[data-route="et.detail"] .v3-et-tab--active {
  border-bottom-color: var(--v3-blue-mid, #1976d2);
  color: var(--v3-blue-dark, #1565c0);
}

/* --- et.detail: Form Grid --- */
body.ui-v3[data-route="et.detail"] .v3-et-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
body.ui-v3[data-route="et.detail"] .v3-et-form-full { grid-column: 1 / -1; }

/* --- et.detail: Split Layout (Bestand + Buchung-Sidebar) --- */
body.ui-v3[data-route="et.detail"] .v3-et-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--s-4);
  align-items: start;
}

/* --- et.detail: Buchung-Form (Sidebar) --- */
body.ui-v3[data-route="et.detail"] .v3-et-buchung-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* --- et.detail: Inline Row (Maschinen/Exemplare hinzufügen) --- */
body.ui-v3[data-route="et.detail"] .v3-et-inline-row,
body.ui-v3[data-route="et.liste"] .v3-et-inline-row {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: end;
}
body.ui-v3 .v3-inline-form { display: inline; }

/* --- et.detail: Exemplar-Cards --- */
body.ui-v3[data-route="et.detail"] .v3-et-exemplar-card {
  border: 1px solid var(--v3-gray-border, #ddd);
  border-radius: 6px;
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
body.ui-v3[data-route="et.detail"] .v3-et-exemplar-header {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
body.ui-v3[data-route="et.detail"] .v3-et-exemplar-meta {
  font-size: 0.82rem;
  color: var(--v3-gray-border, #888);
  margin-bottom: var(--s-2);
}

/* --- et.detail: Lebenslauf Details --- */
body.ui-v3[data-route="et.detail"] .v3-et-lebenslauf-details,
body.ui-v3[data-route="et.detail"] .v3-et-lebenslauf-form-details {
  margin-top: var(--s-2);
}
body.ui-v3[data-route="et.detail"] .v3-et-lebenslauf-details summary,
body.ui-v3[data-route="et.detail"] .v3-et-lebenslauf-form-details summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--v3-blue-dark, #1565c0);
}

/* --- et.detail: QR Info --- */
body.ui-v3[data-route="et.detail"] .v3-et-qr-info {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

/* --- et.etikett: Druck-Layout 50x30mm --- */
body.ui-v3[data-route="et.etikett"] .v3-et-etikett-container {
  display: flex;
  justify-content: center;
  margin-top: var(--s-4);
}
body.ui-v3[data-route="et.etikett"] .v3-et-etikett {
  width: 50mm;
  height: 30mm;
  border: 1px dashed var(--v3-gray-border, #ccc);
  display: flex;
  align-items: center;
  padding: 2mm;
  gap: 2mm;
  overflow: hidden;
  box-sizing: border-box;
}
body.ui-v3[data-route="et.etikett"] .v3-et-etikett-qr {
  width: 22mm;
  height: 22mm;
  flex-shrink: 0;
}
body.ui-v3[data-route="et.etikett"] .v3-et-etikett-qr svg {
  width: 100%;
  height: 100%;
}
body.ui-v3[data-route="et.etikett"] .v3-et-etikett-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
body.ui-v3[data-route="et.etikett"] .v3-et-etikett-line1 {
  font-weight: 700;
  font-size: 9pt;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ui-v3[data-route="et.etikett"] .v3-et-etikett-line2 {
  font-size: 7pt;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ui-v3[data-route="et.etikett"] .v3-et-etikett-line3 {
  font-size: 6pt;
  line-height: 1.2;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Print: nur Etikett anzeigen --- */
@media print {
  body.ui-v3[data-route="et.etikett"] * {
    visibility: hidden;
  }
  body.ui-v3[data-route="et.etikett"] .v3-et-etikett-container,
  body.ui-v3[data-route="et.etikett"] .v3-et-etikett-container * {
    visibility: visible;
  }
  body.ui-v3[data-route="et.etikett"] .sidebar,
  body.ui-v3[data-route="et.etikett"] .ui-page-header,
  body.ui-v3[data-route="et.etikett"] .v3-btn-row {
    display: none !important;
  }
  body.ui-v3[data-route="et.etikett"] .v3-et-etikett-container {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.ui-v3[data-route="et.etikett"] .v3-et-etikett {
    border: none;
    margin: 0;
    padding: 1mm;
    width: 50mm;
    height: 30mm;
  }
  @page {
    size: 50mm 30mm;
    margin: 0;
  }
}

/* --- Responsive: Mobile Anpassungen --- */
@media (max-width: 900px) {
  body.ui-v3[data-route="et.detail"] .v3-et-split-layout {
    grid-template-columns: 1fr;
  }
  body.ui-v3[data-route="et.detail"] .v3-et-form-grid {
    grid-template-columns: 1fr;
  }
  body.ui-v3[data-route="et.detail"] .v3-et-inline-row {
    flex-direction: column;
  }
  body.ui-v3[data-route="et.detail"] .v3-et-tabs {
    overflow-x: auto;
  }
}

/* ============================================================
 * Utility-Klassen (Copilot-Review Findings F5/F10/F11)
 * ============================================================ */

/* Schmales Mengen-Input (ersetzt inline width:70px) */
body.ui-v3 .v3-input-narrow { width: 70px; }

/* Margin-Top Utilities */
body.ui-v3 .v3-mt-3 { margin-top: var(--s-3); }
body.ui-v3 .v3-mt-lg { margin-top: 1.6em; }


/* ── KSS DEVIATION DETECTION (V2-004) ──────────────────────────────── */

/* messung_eingabe: Badge neben Input */
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-dev-badge {
  font-size: 10px;
  margin-left: 2px;
  vertical-align: middle;
  cursor: help;
}

/* messung_pdf_import: Zeilenfarbe bei Abweichung */
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-row--dev-warn td {
  background: var(--v3-warning-light);
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-row--dev-danger td {
  background: var(--v3-danger-light);
}

/* messung_pdf_import: Input-Rahmen bei Abweichung */
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-input--dev-warn {
  border-color: var(--v3-warning-amber);
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-input--dev-danger {
  border-color: var(--v3-danger-red);
}

/* =============================================================================
   MIGRATED FROM main.css (B.2, 2026-05-21)
   main.css ist Legacy (DO NOT EXTEND). Nur die Klassen + Element-Defaults,
   die NICHT durch ui-v2 ueberschrieben werden, sind hier uebernommen.
   Layout-Klassen (.app, .sidebar*, .navitem*, .navgroup, .navsub, .content*)
   werden bewusst NICHT migriert — ui-v2/layout.css ist kanonisch.
   ============================================================================= */

/* ── Reset (global, unscoped — wirkt vor ui-v2/ui-v3 Klassen-Selektoren) ── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; }
:focus { outline: none; }
html { scroll-behavior: smooth; }

/* ── Link-Hover (ui-v2 setzt body.ui-v2 a { color: inherit }, deckt diese
       Regel nicht ab — daher hier behalten) ── */
a:hover { text-decoration: underline; }

/* ── .skip-link (a11y, src/layout.php:43) ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 9999;
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.skip-link:focus { left: 12px; }

/* ── .card (218 Treffer in module/, ohne ui-v2-Aequivalent) ── */
.card {
  background: var(--surface, #ffffff);
  border-radius: var(--r-xl, 16px);
  padding: 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.06));
  border: 1px solid var(--border-light, #edf0f7);
}
.card h2 {
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 10px 0;
}

/* ── .small (180 Treffer; identisch zu ui-v2/base.css body.ui-v2 .small) ── */
.small {
  font-size: var(--fs-sm, 12.5px);
  color: var(--text-muted, #6b7280);
}

/* ── Form-Element-Defaults (Element-Selektoren, wirken auf alle input/select/textarea
       OHNE .ui-input-Klasse — diese hat eigene Regeln in ui-v2/components.css) ── */
label {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e6ef);
  background: #fff;
  font-size: 14px;
  color: #0f172a;
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(59,130,246,0.7);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}
textarea { min-height: 110px; }
label > input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
  transform: translateY(1px);
}

/* ── <details> / Accordions (global, ohne Klassen) ── */
details { border-radius: 14px; }
details summary {
  list-style: none;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--border-light, #edf0f7);
  font-weight: 800;
  cursor: pointer;
}
details summary::-webkit-details-marker { display: none; }
details[open] summary {
  background: #eef2ff;
  border-color: rgba(99,102,241,0.18);
}
details > div { margin-top: 12px; }

/* =============================================================================
   MIGRATED FROM ui-v2/base.css (B.4, 2026-05-21)
   body.ui-v2 → body.ui-v3 (beide Klassen am body, wirkungsgleich).
   ============================================================================= */

body.ui-v3 {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.ui-v3 a { color: inherit; }

/* Focus fix */
body.ui-v3 *:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  body.ui-v3 *,
  body.ui-v3 *::before,
  body.ui-v3 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Utility classes */
body.ui-v3 .ui-muted {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

body.ui-v3 .ui-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}

body.ui-v3 .ui-page-header {
  margin-bottom: var(--s-6);
}

body.ui-v3 .ui-page-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.4px;
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-1);
  color: var(--text);
}

body.ui-v3 .ui-page-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

body.ui-v3 ::selection {
  background: rgba(37, 99, 235, 0.15);
  color: var(--text);
}

/* =============================================================================
   MIGRATED FROM ui-v2/layout.css (B.4, 2026-05-21)
   ============================================================================= */

/* ── APP SHELL ── */
body.ui-v3 .app {
  display: flex;
  min-height: 100vh;
}

/* ── SIDEBAR ── */
body.ui-v3 .sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  padding: var(--s-5) var(--s-4);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

body.ui-v3 .sidebar__brand a {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-lg);
  letter-spacing: -0.4px;
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-lg);
  transition: background var(--duration-fast) var(--ease-out);
}

body.ui-v3 .sidebar__brand a:hover {
  background: var(--sidebar-hover);
}

body.ui-v3 .sidebar__user {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sidebar-border);
}

body.ui-v3 .sidebar__user-name {
  color: var(--sidebar-text-bright);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-2);
}

body.ui-v3 .sidebar__logout.btn,
body.ui-v3 .sidebar__logout {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  border-radius: var(--r-md);
  padding: 7px var(--s-3);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  transition: background var(--duration-fast) var(--ease-out);
}

body.ui-v3 .sidebar__logout:hover {
  background: rgba(255,255,255,0.10);
}

/* ── NAV ── */
body.ui-v3 .sidebar__nav {
  margin-top: var(--s-5);
  flex: 1;
}

body.ui-v3 .navgroup {
  margin-top: var(--s-5);
  padding: var(--s-2) var(--s-3);
  color: rgba(255,255,255,0.40);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.ui-v3 .navsub {
  margin-top: var(--s-1);
  margin-bottom: var(--s-2);
}

body.ui-v3 .navitem {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  border-radius: var(--r-md);
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  border: 1px solid transparent;
}

@media (hover: hover) {
  body.ui-v3 .navitem:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-bright);
  }
}

body.ui-v3 .navitem:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 1px;
}

body.ui-v3 .navitem--sub {
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-xs);
}

body.ui-v3 .navitem--active {
  background: var(--sidebar-active);
  border-color: rgba(37, 99, 235, 0.25);
  color: var(--sidebar-text-bright);
  font-weight: var(--fw-semibold);
}

/* ── CONTENT AREA ── */
body.ui-v3 .content {
  flex: 1;
  min-width: 0;
  padding: var(--s-7) var(--s-7);
}

body.ui-v3 .content__top {
  margin-bottom: var(--s-5);
}

body.ui-v3 .content__body {
  padding: 0;
}

/* =============================================================================
   MIGRATED FROM ui-v2/components.css (B.5, 2026-05-21)
   ============================================================================= */

/* ── CARDS ── */
body.ui-v3 .ui-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

body.ui-v3 .ui-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

body.ui-v3 .ui-card-head h2,
body.ui-v3 .ui-card-head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0;
  letter-spacing: -0.2px;
}

/* ── BUTTONS ── */
body.ui-v3 .ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border-radius: var(--r-md);
  padding: 9px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
  user-select: none;
}

body.ui-v3 .ui-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

body.ui-v3 .ui-btn:active {
  transform: scale(0.98);
}

body.ui-v3 .ui-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body.ui-v3 .ui-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
  box-shadow: 0 1px 2px rgba(37,99,235,0.3);
}

body.ui-v3 .ui-btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 2px 6px rgba(37,99,235,0.35);
}

body.ui-v3 .ui-btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

body.ui-v3 .ui-btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

body.ui-v3 .ui-btn--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

body.ui-v3 .ui-btn--danger:hover {
  background: var(--danger-border);
}

body.ui-v3 .ui-btn--sm {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}

/* ── INPUTS ── */
body.ui-v3 .ui-input,
body.ui-v3 select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

body.ui-v3 .ui-input:focus,
body.ui-v3 select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

body.ui-v3 .ui-input::placeholder {
  color: var(--text-faint);
}

body.ui-v3 .ui-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

/* ── LINKS ── */
body.ui-v3 a.ui-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--duration-fast) var(--ease-out);
}

body.ui-v3 a.ui-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

body.ui-v3 a.ui-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── BADGES ── */
body.ui-v3 .ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  white-space: nowrap;
}

body.ui-v3 .ui-badge--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

body.ui-v3 .ui-badge--warn {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

body.ui-v3 .ui-badge--ok {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

body.ui-v3 .ui-badge--info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}

body.ui-v3 .ui-badge--muted {
  background: var(--surface-2);
  border-color: #d1d5db;
  color: var(--text-muted);
}

body.ui-v3 .ui-badge--primary {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* ── TABLES ── */
body.ui-v3 .ui-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-xl);
}

body.ui-v3 .ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  min-width: 0;
  table-layout: auto;
}

body.ui-v3 .ui-table th,
body.ui-v3 .ui-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  vertical-align: top;
  line-height: 1.35;
}

body.ui-v3 .ui-table th {
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 14px;
}

body.ui-v3 .ui-table tr:last-child td {
  border-bottom: 0;
}

body.ui-v3 .ui-table tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  body.ui-v3 .ui-table tbody tr:hover {
    background: var(--surface-2);
  }
}

body.ui-v3 .ui-table td.ui-td-actions,
body.ui-v3 .ui-table th.ui-th-actions {
  width: auto;
  text-align: right;
  white-space: nowrap;
}

body.ui-v3 .ui-num {
  font-variant-numeric: tabular-nums;
}

body.ui-v3 .ui-num--danger {
  color: var(--danger-text);
  font-weight: var(--fw-bold);
}

/* ── TABS ── */
body.ui-v3 .ui-tabs {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}

body.ui-v3 .ui-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

@media (hover: hover) {
  body.ui-v3 .ui-tab:hover {
    background: var(--surface-2);
    color: var(--text);
  }
}

body.ui-v3 .ui-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body.ui-v3 .ui-tab--active {
  background: var(--primary-light);
  border-color: rgba(37, 99, 235, 0.30);
  color: var(--primary);
}

/* Count bubbles next to tab labels */
body.ui-v3 .ui-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
body.ui-v3 .ui-count--danger { background: var(--status-danger-bg); border-color: var(--status-danger-border); color: var(--status-danger-text); }
body.ui-v3 .ui-count--warn   { background: var(--status-warn-bg);   border-color: var(--status-warn-border);   color: var(--status-warn-text); }
body.ui-v3 .ui-count--ok     { background: var(--status-ok-bg);     border-color: var(--status-ok-border);     color: var(--status-ok-text); }
body.ui-v3 .ui-count--info   { background: var(--status-info-bg);   border-color: var(--status-info-border);   color: var(--status-info-text); }

/* On active status tabs the bubble stays in its color family, with subtle inverse contrast */
body.ui-v3 .ui-tab--danger.ui-tab--active .ui-count,
body.ui-v3 .ui-tab--warn.ui-tab--active .ui-count,
body.ui-v3 .ui-tab--ok.ui-tab--active .ui-count,
body.ui-v3 .ui-tab--info.ui-tab--active .ui-count {
  background: rgba(255, 255, 255, 0.6);
  border-color: currentColor;
  color: inherit;
}

/* ── KPI ROW ── */
body.ui-v3 .ui-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

body.ui-v3 .ui-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

body.ui-v3 .ui-kpi__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-1);
}

body.ui-v3 .ui-kpi__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

body.ui-v3 .ui-kpi--danger {
  border-color: var(--danger-border);
  background: linear-gradient(180deg, var(--danger-bg) 0%, var(--surface) 100%);
}

body.ui-v3 .ui-kpi--warn {
  border-color: var(--warning-border);
  background: linear-gradient(180deg, var(--warning-bg) 0%, var(--surface) 100%);
}

body.ui-v3 .ui-kpi--ok {
  border-color: var(--success-border);
  background: linear-gradient(180deg, var(--success-bg) 0%, var(--surface) 100%);
}

body.ui-v3 .ui-kpi--active {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 4px var(--primary-light);
  position: relative;
}

body.ui-v3 .ui-kpi--active::after {
  content: "aktiv";
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--primary-light);
  border: 1px solid rgba(37,99,235,0.25);
  color: var(--primary);
}

/* ── FILTERBAR ── */
body.ui-v3 .ui-filterbar__form {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: flex-end;
}

body.ui-v3 .ui-filterbar__group {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  flex: 1;
}

body.ui-v3 .ui-filterbar__group label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-1);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.ui-v3 .ui-filterbar__actions {
  display: flex;
  align-items: flex-end;
}

/* Compact variant: a thin search/filter strip; labels are visually hidden, controls share one row. */
body.ui-v3 .ui-card.ui-filterbar--compact {
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}

body.ui-v3 .ui-filterbar--compact .ui-filterbar__form {
  gap: var(--s-3);
  align-items: center;
  flex-wrap: nowrap;
}

body.ui-v3 .ui-filterbar--compact .ui-filterbar__group {
  flex-direction: row;
  align-items: center;
  min-width: 0;
  flex: 1 1 220px;
}

/* Labels become screen-reader-only: placeholders communicate the field's purpose. */
body.ui-v3 .ui-filterbar--compact .ui-filterbar__group label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.ui-v3 .ui-filterbar--compact .ui-input {
  height: 36px;
  padding: 0 var(--s-3);
}

body.ui-v3 .ui-filterbar--compact .ui-filterbar__actions {
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-2);
}

@media (max-width: 640px) {
  body.ui-v3 .ui-filterbar--compact .ui-filterbar__form {
    flex-wrap: wrap;
  }
  body.ui-v3 .ui-filterbar--compact .ui-filterbar__group {
    flex-basis: 100%;
  }
}

/* Inline variant: sits inside a flex .ui-page-header — no card chrome, hugs the right edge */
body.ui-v3 .ui-card.ui-filterbar--inline {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  flex: 1 1 360px;
  max-width: 720px;
  align-self: flex-end;
}

@media (max-width: 900px) {
  body.ui-v3 .ui-card.ui-filterbar--inline {
    flex-basis: 100%;
    max-width: none;
    align-self: stretch;
  }
}

/* ── QUICKINFO LIST ── */
body.ui-v3 .ui-quicklist {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

body.ui-v3 .ui-quickitem {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: background var(--duration-fast) var(--ease-out);
}

body.ui-v3 .ui-quickitem:hover {
  background: var(--surface-2);
}

body.ui-v3 .ui-quickitem__main {
  min-width: 0;
  flex: 1;
}

body.ui-v3 .ui-quickitem__top {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  align-items: baseline;
}

body.ui-v3 .ui-quickitem__who {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

body.ui-v3 .ui-quickitem__meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}

body.ui-v3 .ui-quickitem__mid {
  margin-top: 2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

body.ui-v3 .ui-quickitem__right {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* ── Responsive: Tablet (≤900px) ── */
@media (max-width: 900px) {
  body.ui-v3 .ui-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
  body.ui-v3 .ui-btn,
  body.ui-v3 .ui-btn--sm {
    min-height: 44px;
    padding: 10px 16px;
  }
  body.ui-v3 .ui-tab {
    min-height: 44px;
    padding: 10px 14px;
  }
  body.ui-v3 .ui-input,
  body.ui-v3 select {
    min-height: 44px;
  }
}

/* ── Responsive: Phone (≤640px) ── */
@media (max-width: 640px) {
  body.ui-v3 .ui-kpi-row {
    grid-template-columns: 1fr;
  }
  body.ui-v3 .ui-filterbar__form {
    flex-direction: column;
    gap: var(--s-3);
  }
  body.ui-v3 .ui-filterbar__group {
    min-width: 0;
    flex: 1 1 100%;
  }
  body.ui-v3 .ui-filterbar__actions {
    width: 100%;
  }
  body.ui-v3 .ui-card {
    padding: var(--s-3);
  }
  body.ui-v3 .ui-table th,
  body.ui-v3 .ui-table td {
    padding: 8px 10px;
    font-size: 13px;
  }
  body.ui-v3 .ui-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--s-2);
  }
  body.ui-v3 .ui-tabs::-webkit-scrollbar {
    display: none;
  }
  body.ui-v3 .ui-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* =============================================================================
   NEW: MODAL PATTERN (B.5, 2026-05-21) — Vorbedingung fuer Phase C (KSS-Pilot)
   Verwendet das native <dialog>-Element. JS-Mechanik: showModal() / close().
   ============================================================================= */

body.ui-v3 .v3-modal {
  /* <dialog>-Element selbst — wird vom Browser zentriert */
  border: none;
  padding: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  background: var(--surface);
  max-width: 720px;
  width: calc(100vw - 2 * var(--s-6));
  max-height: calc(100vh - 2 * var(--s-6));
  overflow: hidden;
}

body.ui-v3 .v3-modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

body.ui-v3 .v3-modal__dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--s-6));
}

body.ui-v3 .v3-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border-light);
}

body.ui-v3 .v3-modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--text);
}

body.ui-v3 .v3-modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--s-2);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

body.ui-v3 .v3-modal__close:hover {
  background: var(--surface-2);
  color: var(--text);
}

body.ui-v3 .v3-modal__body {
  padding: var(--s-5) var(--s-6);
  overflow-y: auto;
  flex: 1;
}

body.ui-v3 .v3-modal__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--border-light);
  background: var(--surface-2);
}

@media (max-width: 640px) {
  body.ui-v3 .v3-modal {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   23. KSS — Messung-Eingabe (B.6, ex-Inline <style>-Block)
   ══════════════════════════════════════════════════════════════════════════ */

/* Tabelle nicht auf volle Breite strecken */
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-table {
    width: auto;
    max-width: 100%;
}

body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-flash {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-weight: 500;
}
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-flash--ok {
    background: var(--v3-success-light, #f0fdf4);
    border-left: 4px solid var(--v3-success-dark, #166534);
    color: var(--v3-success-dark, #166534);
}
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-flash--err {
    background: var(--v3-danger-light, #fee2e2);
    border-left: 4px solid var(--v3-danger-dark, #991b1b);
    color: var(--v3-danger-dark, #991b1b);
}

body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-datumbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
}
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-datum {
    width: 160px;
}

body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-table th,
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-table td {
    padding: 5px 3px;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 13px;
}
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted, #6b7280);
    font-weight: 600;
    padding-bottom: 8px;
}
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-th-maschine { min-width: 140px; }
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-th-num      { width: 58px; text-align: right; }
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-th-text     { width: 110px; }
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-th-bemerkung { width: 140px; }

body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-num {
    width: 58px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 4px 6px;
    font-size: 13px;
}
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-zugabe {
    width: 110px;
    padding: 4px 6px;
    font-size: 13px;
}
body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-bemerkung {
    width: 140px;
    padding: 4px 6px;
    font-size: 13px;
}

body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-td-maschine {
    font-size: 13px;
    padding-right: 12px;
    white-space: nowrap;
}

body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-legende {
    margin-top: 12px;
    font-size: 11px;
}

body.ui-v3[data-route="kss.messung_eingabe"] .v3-kme-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-bottom: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════
   24. KSS — PDF-Import (B.6, ex-Inline <style>-Block)
   ══════════════════════════════════════════════════════════════════════════ */

body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-flash {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-weight: 500;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-flash--ok {
    background: var(--v3-success-light, #f0fdf4);
    border-left: 4px solid var(--v3-success-dark, #166534);
    color: var(--v3-success-dark, #166534);
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-flash--err {
    background: var(--v3-danger-light, #fee2e2);
    border-left: 4px solid var(--v3-danger-dark, #991b1b);
    color: var(--v3-danger-dark, #991b1b);
}

body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-form-group {
    margin-bottom: 16px;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-form-group label {
    display: block;
    margin-bottom: 6px;
}

body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-textarea {
    width: 100%;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.4;
    resize: vertical;
}

body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-bottom: 24px;
}

/* Info-Leiste */
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-info-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-info-fields {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-info-fields label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-datum {
    width: 160px;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-info-stats {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

/* Review-Tabelle */
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-table {
    width: auto;
    max-width: 100%;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-table th,
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-table td {
    padding: 5px 3px;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 13px;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted, #6b7280);
    font-weight: 600;
    padding-bottom: 8px;
}

body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-th-check     { width: 30px; text-align: center; }
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-th-maschine  { min-width: 120px; }
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-th-asset     { min-width: 180px; }
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-th-num       { width: 58px; text-align: right; }
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-th-text      { width: 140px; }
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-th-bemerkung { min-width: 400px; }

body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-num {
    width: 58px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 4px 6px;
    font-size: 13px;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-select-asset {
    min-width: 180px;
    font-size: 13px;
    padding: 4px 6px;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-zugabe {
    width: 140px;
    padding: 4px 6px;
    font-size: 13px;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-bemerkung {
    min-width: 400px;
    padding: 4px 6px;
    font-size: 13px;
    white-space: normal;
}
body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-td-maschine {
    font-size: 13px;
    padding-right: 12px;
    white-space: nowrap;
}

body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-row--unmapped td {
    background: var(--v3-warning-yellow, #fef9c3);
}

body.ui-v3[data-route="kss.messung_pdf_import"] .v3-kpi-legende {
    margin-top: 12px;
    font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════════════════
   25. KSS — Messwerte-Analyse, TPM-Uebersicht, BA-Dashboard (B.6 Single-Hits)
   ══════════════════════════════════════════════════════════════════════════ */

/* Action-Spalte am Tabellen-Ende */
body.ui-v3[data-route="kss.messwerte_analyse"] .v3-kma-th-action {
    width: 40px;
}

/* TPM Summary: rechts ausgerichteter Spacer-Item (Strahlspritze-Anzeige) */
body.ui-v3[data-route="tpm.uebersicht"] .v3-tpm-summary__item--right {
    margin-left: auto;
}

/* Befuellanlage-Dashboard: Karten-Abstaende */
body.ui-v3[data-route="ba.dashboard"] .v3-ba-card-detail {
    margin-top: var(--s-6);
}
body.ui-v3[data-route="ba.dashboard"] .v3-ba-card-footer-link {
    margin-top: var(--s-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   26. Asset — file_row Partial (B.6)
   ══════════════════════════════════════════════════════════════════════════ */

/* Versteckte Forms innerhalb Context-Menu (Rename/Delete) */
body.ui-v3[data-route="asset.detail"] .v3-ad-form-hidden {
    display: none;
}
/* Move-Select in Context-Menu */
body.ui-v3[data-route="asset.detail"] .v3-ad-file-ctx-select {
    margin: 4px 8px;
    font-size: 0.8rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   27. Asset — qr_scan (B.6)
   ══════════════════════════════════════════════════════════════════════════ */

body.ui-v3[data-route="asset.qr_scan"] .v3-qr-card-head {
    text-align: center;
    padding: var(--s-6, 24px);
}
body.ui-v3[data-route="asset.qr_scan"] .v3-qr-info-block {
    margin-bottom: var(--s-4, 16px);
}
body.ui-v3[data-route="asset.qr_scan"] .v3-qr-heading {
    font-size: var(--fs-xl, 1.25rem);
    margin: var(--s-2, 8px) 0;
}
body.ui-v3[data-route="asset.qr_scan"] .v3-qr-badge-row {
    margin-top: var(--s-3, 12px);
    display: flex;
    gap: var(--s-2, 8px);
    justify-content: center;
    flex-wrap: wrap;
}
body.ui-v3[data-route="asset.qr_scan"] .v3-qr-button-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 12px);
    margin-top: var(--s-5, 20px);
}
body.ui-v3[data-route="asset.qr_scan"] .v3-qr-btn-block {
    width: 100%;
    justify-content: center;
    padding: var(--s-3, 12px);
}
body.ui-v3[data-route="asset.qr_scan"] .v3-qr-btn-icon {
    margin-right: 8px;
}
body.ui-v3[data-route="asset.qr_scan"] .v3-qr-footer {
    text-align: center;
    margin-top: var(--s-4, 16px);
    font-size: var(--fs-xs, 0.75rem);
}

/* ══════════════════════════════════════════════════════════════════════════
   28. Asset — detail Teil 1 (B.6, Header bis Datei-Bereich)
   ══════════════════════════════════════════════════════════════════════════ */

/* Status-Form Abstand */
body.ui-v3[data-route="asset.detail"] .v3-ad-form-spacer {
    margin-bottom: var(--s-4, 16px);
}

/* QR-Block */
body.ui-v3[data-route="asset.detail"] .v3-ad-qr-wrap {
    margin-top: var(--s-5, 20px);
    text-align: center;
}
body.ui-v3[data-route="asset.detail"] .v3-ad-qr-hint {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--text-muted, #6b7280);
    margin-top: var(--s-2, 8px);
}
body.ui-v3[data-route="asset.detail"] .v3-ad-qr-toggle {
    margin-top: var(--s-2, 8px);
    font-size: var(--fs-xs, 0.75rem);
}

/* Bearbeiten-Button-Container */
body.ui-v3[data-route="asset.detail"] .v3-ad-section-gap {
    margin-top: var(--s-4, 16px);
}

/* Edit-Form Footer (Speichern/Abbrechen) */
body.ui-v3[data-route="asset.detail"] .v3-ad-action-row {
    display: flex;
    gap: var(--s-2, 8px);
    margin-top: var(--s-4, 16px);
}

/* Inline-Tabellen ohne erzwungene Mindestbreite */
body.ui-v3[data-route="asset.detail"] .v3-ad-table-flex {
    min-width: auto;
}

/* Hervorgehobene Zeile (aktive Tickets / nicht-OK Wartungspunkte) */
body.ui-v3[data-route="asset.detail"] .v3-ad-row-active {
    font-weight: 600;
}

/* Mini-Badge in Tabellen-Zellen */
body.ui-v3[data-route="asset.detail"] .v3-ad-badge-mini {
    font-size: 0.65rem;
    vertical-align: middle;
}

/* Verschachteltes <details> Abstand */
body.ui-v3[data-route="asset.detail"] .v3-ad-details-gap {
    margin-top: var(--s-3, 12px);
}

/* Upload-Fehler-Hinweis */
body.ui-v3[data-route="asset.detail"] .v3-ad-alert-spacer {
    margin-bottom: var(--s-3, 12px);
}

/* Datei-Upload-Leiste */
body.ui-v3[data-route="asset.detail"] .v3-ad-upload-bar {
    display: flex;
    gap: var(--s-3, 12px);
    margin-bottom: var(--s-3, 12px);
    flex-wrap: wrap;
}
body.ui-v3[data-route="asset.detail"] .v3-ad-form-inline {
    display: flex;
    gap: var(--s-2, 8px);
    align-items: center;
}
body.ui-v3[data-route="asset.detail"] .v3-ad-folder-input {
    width: 180px;
}

/* "Ordner ist leer"-Hinweis */
body.ui-v3[data-route="asset.detail"] .v3-ad-empty-pad {
    padding: var(--s-2, 8px) var(--s-4, 16px);
}

/* ══════════════════════════════════════════════════════════════════════════
   29. Asset — detail Teil 2 (B.6, "+ Unteranlage" + Notiz-Footer)
   ══════════════════════════════════════════════════════════════════════════ */

/* "+ Unteranlage hinzufuegen" Summary-Button */
body.ui-v3[data-route="asset.detail"] .v3-ad-summary-inline {
    display: inline-flex;
    cursor: pointer;
}

/* Add-Child-Form Container */
body.ui-v3[data-route="asset.detail"] .v3-ad-child-form {
    margin-top: var(--s-3, 12px);
    display: flex;
    gap: var(--s-2, 8px);
    flex-wrap: wrap;
    align-items: end;
}

/* Field-Group-Modifier fuer Add-Child-Form */
body.ui-v3[data-route="asset.detail"] .v3-ad-field-group--grow {
    flex: 1;
    min-width: 180px;
}
body.ui-v3[data-route="asset.detail"] .v3-ad-field-group--w120 {
    width: 120px;
}
body.ui-v3[data-route="asset.detail"] .v3-ad-field-group--w140 {
    width: 140px;
}

/* Notiz-Text mit minimalem Abstand zum Author */
body.ui-v3[data-route="asset.detail"] .v3-ad-note-tight {
    margin: 4px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   30. Asset-Tree Polish 2 — Layout-Verbesserungen + Toolbar
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Spalten-Verteilung ──────────────────────────────────────────────────── */
/* Name-Spalte: nimmt allen verfuegbaren Platz. Andere Spalten: so eng wie noetig. */
body.ui-v3[data-route="asset.tree"] .v3-tree-table th:first-child,
body.ui-v3[data-route="asset.tree"] .v3-tree-table td:first-child {
  width: auto;
}
body.ui-v3[data-route="asset.tree"] .v3-tree-table th:not(:first-child),
body.ui-v3[data-route="asset.tree"] .v3-tree-table td:not(:first-child) {
  width: 1%;
  white-space: nowrap;
}

/* ── Indent kompakter (20px statt 28px) ──────────────────────────────────── */
body.ui-v3[data-route="asset.tree"] .v3-tree-indent {
  width: calc(var(--v3-tree-indent, 0) * 20px);
}

/* ── Code in Klammern (Naming "Name (Code)") ─────────────────────────────── */
body.ui-v3[data-route="asset.tree"] .v3-tree-code {
  color: var(--text-muted, #777);
  font-size: 0.85em;
  font-weight: 400;
  margin-left: var(--s-1, 4px);
}

/* ── Typ-Tag dezenter ────────────────────────────────────────────────────── */
body.ui-v3[data-route="asset.tree"] .v3-tree-typ {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-left: var(--s-2, 8px);
}

/* ── Status-Dots in Badges (route-scoped) ────────────────────────────────── */
body.ui-v3[data-route="asset.tree"] .ui-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar {
  display: flex;
  gap: var(--s-2, 8px);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-3, 12px);
}
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-spacer {
  flex: 1;
  min-width: var(--s-4, 16px);
}
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, 8px);
  padding: var(--s-2, 8px) var(--s-3, 12px);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--r-md, 6px);
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text, #333);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-btn:hover {
  background: var(--surface-2, #f5f5f5);
}
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-btn--active {
  background: var(--primary-soft, #e0e7ff);
  border-color: var(--primary, #2563eb);
  color: var(--primary, #2563eb);
}
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--primary, #2563eb);
  color: #fff;
  border-radius: 9px;
  font-size: 0.7rem;
  font-weight: 600;
}
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-btn svg {
  flex-shrink: 0;
}

/* ── Toolbar-Gruppe (Hierarchie + Flach segmented) ───────────────────────── */
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-group {
  display: inline-flex;
  border-radius: var(--r-md, 6px);
  border: 1px solid var(--border, #e0e0e0);
  overflow: hidden;
}
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-group .v3-tree-toolbar-btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border, #e0e0e0);
}
body.ui-v3[data-route="asset.tree"] .v3-tree-toolbar-group .v3-tree-toolbar-btn:last-child {
  border-right: none;
}

/* ── Filter-Panel ────────────────────────────────────────────────────────── */
body.ui-v3[data-route="asset.tree"] .v3-tree-filter-panel {
  display: flex;
  gap: var(--s-3, 12px);
  flex-wrap: wrap;
  padding: var(--s-3, 12px);
  background: var(--surface-2, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--r-md, 6px);
  margin-bottom: var(--s-3, 12px);
  align-items: flex-end;
}
body.ui-v3[data-route="asset.tree"] .v3-tree-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1, 4px);
  min-width: 160px;
}
body.ui-v3[data-route="asset.tree"] .v3-tree-filter-group label {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted, #777);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
body.ui-v3[data-route="asset.tree"] .v3-tree-filter-actions {
  display: flex;
  gap: var(--s-2, 8px);
  align-items: center;
}

/* ── Flat-View: kein Indent, kein Toggle, keine Gruppen-Highlights ───────── */
body.ui-v3[data-route="asset.tree"] .ui-container[data-tree-view="flat"] .v3-tree-indent {
  display: none;
}
body.ui-v3[data-route="asset.tree"] .ui-container[data-tree-view="flat"] .v3-tree-toggle,
body.ui-v3[data-route="asset.tree"] .ui-container[data-tree-view="flat"] .v3-tree-toggle-spacer {
  display: none;
}
body.ui-v3[data-route="asset.tree"] .ui-container[data-tree-view="flat"] .v3-tree-row.v3-tree-depth-0,
body.ui-v3[data-route="asset.tree"] .ui-container[data-tree-view="flat"] .v3-tree-row.v3-tree-depth-1 {
  background: transparent;
  font-weight: normal;
}
body.ui-v3[data-route="asset.tree"] .ui-container[data-tree-view="flat"] .v3-tree-row.v3-tree-depth-2 .v3-tree-indent,
body.ui-v3[data-route="asset.tree"] .ui-container[data-tree-view="flat"] .v3-tree-row.v3-tree-depth-3 .v3-tree-indent,
body.ui-v3[data-route="asset.tree"] .ui-container[data-tree-view="flat"] .v3-tree-row.v3-tree-depth-4 .v3-tree-indent {
  border-left: none;
  margin-left: 0;
}

/* ── Sortierbare Spalten-Header (Flat-View) ──────────────────────────────── */
body.ui-v3[data-route="asset.tree"] .v3-tree-sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1, 4px);
}
body.ui-v3[data-route="asset.tree"] .v3-tree-sort-link:hover {
  color: var(--primary, #2563eb);
}
body.ui-v3[data-route="asset.tree"] .v3-tree-sort-link--active {
  color: var(--primary, #2563eb);
  font-weight: 600;
}