:root {
  --bg: #0f1419;
  --surface: #1a222c;
  --card: #222b36;
  --border: #2f3b4a;
  --text: #e8eef5;
  --muted: #9aa7b5;
  --accent: #3d8bfd;
  --mala-sidebar-active-accent: #c63838;
  --danger: #e35d6a;
  --ok: #3ecf8e;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  --app-sidebar-width: 15.5rem;
}

/* Nur Dashboard: fixe Sidebar, Scroll nur im Hauptbereich */
html.app-layout-root {
  height: 100%;
}

html.app-layout-root body.app-dashboard {
  height: 100%;
  overflow: hidden;
}

html[data-theme="light"] {
  --bg: #f0f2f5;
  --surface: #ffffff;
  --card: #fafbfc;
  --border: #cfd6df;
  --text: #141a22;
  --muted: #5a6572;
  --accent: #1a6ee6;
  --mala-sidebar-active-accent: #c42d3a;
  --danger: #c42d3a;
  --ok: #0d8f54;
}

html[data-theme="light"] .app-topbar {
  background: #ffffff;
  border-bottom-color: var(--border);
}

html[data-theme="light"] .app-sidebar {
  background: #e8eef3;
  border-right-color: #d0d8e3;
}

html[data-theme="light"] .btn.secondary {
  background: #e8ecf1;
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="light"] .btn.danger {
  background: #fdecef;
  border-color: #e8a8b3;
  color: #8b1d2e;
}

html[data-theme="light"] .tkp-status-strip--header .tkp-pill--fill-crit {
  animation: tkp-pill-fill-crit-blink-light var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

@keyframes tkp-pill-fill-crit-blink-light {
  0%,
  100% {
    background: rgba(200, 60, 60, 0.15);
    border-color: rgba(200, 80, 80, 0.45);
    color: #7a1515;
  }

  50% {
    background: rgba(220, 40, 40, 0.55);
    border-color: rgba(180, 40, 40, 0.75);
    color: #0a0a0a;
    box-shadow: 0 0 10px rgba(200, 40, 40, 0.35);
  }
}

html[data-theme="light"] .tkp-status-strip--header .tkp-pill--offline {
  animation: tkp-pill-offline-blink-light var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

@keyframes tkp-pill-offline-blink-light {
  0%,
  100% {
    background: rgba(180, 100, 160, 0.12);
    border-color: rgba(160, 100, 140, 0.45);
    color: #5a2048;
  }

  50% {
    background: rgba(200, 80, 160, 0.45);
    border-color: rgba(140, 60, 120, 0.65);
    color: #0a0a0a;
    box-shadow: 0 0 10px rgba(180, 80, 150, 0.35);
  }
}

/* Hellmodus: Comboboxen, Header, Tabs, Tankbestände-Karten, Popover, Notizen */
html[data-theme="light"] select,
html[data-theme="light"] .tankstock-toolbar-select,
html[data-theme="light"] .tkp-toolbar-select,
html[data-theme="light"] .filter-toolbar select,
html[data-theme="light"] .filter-sort-select,
html[data-theme="light"] .trigger-toolbar-filters select,
html[data-theme="light"] .mengenkontrolle-select {
  background: #ffffff;
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="light"] select option {
  background: #ffffff;
  color: #141a22;
}

html[data-theme="light"] .app-topbar .btn,
html[data-theme="light"] .app-topbar a.btn {
  color: var(--text);
}

html[data-theme="light"] .app-topbar a.btn:hover {
  color: var(--text);
}

html[data-theme="light"] .sidebar-nav-item.tab {
  color: var(--text);
}

html[data-theme="light"] .sidebar-nav-item.tab[aria-selected="true"] {
  background: #ffffff;
  color: #0d1f3a;
  box-shadow: inset 3px 0 0 var(--accent);
}

html[data-theme="light"] .date-toolbar .tab[aria-selected="true"] {
  background: #d4e4fc;
  color: #0d1f3a;
  border-color: var(--accent);
}

html[data-theme="light"] .filter-toolbar label,
html[data-theme="light"] .filter-inline-check {
  color: var(--text);
}

html[data-theme="light"] .tkp-header-popover {
  background: #fafbfc;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .tkp-pop-tank-li {
  background: #eef1f5;
  border-color: #c5cdd8;
}

html[data-theme="light"] .tkp-pop-tank-li--warn {
  background: rgba(245, 200, 80, 0.35);
  border-color: rgba(200, 150, 40, 0.55);
}

html[data-theme="light"] .tkp-pop-tank-li--crit {
  background: rgba(240, 160, 150, 0.4);
  border-color: rgba(200, 90, 80, 0.55);
}

html[data-theme="light"] .tkp-pop-p--alert {
  color: #9a1e3c;
}

html[data-theme="light"] .tkp-pop-p--warnmsg {
  color: #7a5200;
}

html[data-theme="light"] .tkp-pop-p--prf-eich {
  color: #9a4500;
}

html[data-theme="light"] .tkp-pop-p--prf-tuv {
  color: #006b6f;
}

html[data-theme="light"] .product-popover-title {
  color: var(--text);
}

html[data-theme="light"] .product-popover-table tbody th {
  color: var(--text);
}

html[data-theme="light"] .product-popover-table td.ph-rank-cheapest {
  background: rgba(62, 207, 142, 0.2);
  color: #0d5c36;
}

html[data-theme="light"] .product-popover-table td.ph-rank-worst {
  background: rgba(227, 93, 106, 0.18);
  color: #8b1a24;
}

html[data-theme="light"] .tankstock-card {
  background: #f4f6f9;
  border-color: #c5cdd8;
}

html[data-theme="light"] .tankstock-tank {
  background: #e8ecf0;
  border-color: #b8c2cf;
}

html[data-theme="light"] .tankstock-tank-title {
  color: var(--text);
}

html[data-theme="light"] .tankstock-bar {
  background: #d4dae3;
  border-color: #aeb8c6;
}

html[data-theme="light"] .tankstock-error {
  color: #b4232f;
}

html[data-theme="light"] .tankstock-summary-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .tankstock-fs-card-hd {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Hellmodus: Header-TK-Pills (schwarze Schrift), Tagespreise-Karten, Trigger-Bemerkung */
html[data-theme="light"] .tkp-status-strip--header .tkp-pill,
html[data-theme="light"] .tkp-status-strip--header .tkp-pill-label {
  color: #0a0a0a;
}

html[data-theme="light"] .mini-table thead th,
html[data-theme="light"] .mini-table tbody th {
  color: var(--text);
}

html[data-theme="light"] .mini-table tbody th .product-history-btn {
  background: #e4eefb;
  border-color: rgba(26, 110, 230, 0.42);
  color: #0a3d82;
}

html[data-theme="light"] .mini-table tbody th .product-history-btn:hover {
  background: #d0e3f8;
  border-color: rgba(26, 110, 230, 0.65);
  color: #062a5c;
}

html[data-theme="light"] .slot label {
  color: var(--text);
}

html[data-theme="light"] .slot input.cell-input-time {
  background: #eef1f5;
  color: #2a3545;
  border-color: #aeb8c6;
}

html[data-theme="light"] .slot input.cell-input--price:read-only {
  background: #eef1f5;
  color: #3a4555;
  border-color: #aeb8c6;
}

html[data-theme="light"] .trigger-inp,
html[data-theme="light"] .trigger-ta,
html[data-theme="light"] .trigger-sel {
  background: #ffffff;
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="light"] .trigger-inp-red {
  color: #9a1e28;
}

html[data-theme="light"] .trigger-inp[readonly] {
  background: #eef1f5;
  color: #4a5568;
  border-color: #c5cdd8;
}

html[data-theme="light"] .trigger-sum-row td {
  background: #e8ecf0;
  color: var(--text);
}

html[data-theme="light"] .product-popover-table td.ph-rank-second {
  color: #5c4a00;
}

.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-card {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}

.auth-brand {
  text-align: center;
  margin-bottom: 0.25rem;
}

.auth-brand-logo {
  display: block;
  margin: 0 auto 0.65rem;
  height: 3rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
}

.auth-brand-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.auth-card--wide {
  width: min(480px, 100%);
  max-width: 100%;
}

.auth-h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.muted.small {
  font-size: 0.82rem;
  line-height: 1.4;
}

.checkbox-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--muted);
}

.checkbox-row input[type='checkbox'] {
  width: auto;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.totp-qr-wrap {
  margin: 0.5rem 0;
  text-align: center;
  min-height: 4rem;
}

.totp-qr-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

code.totp-secret {
  display: block;
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  border-radius: 6px;
  font-size: 0.72rem;
  word-break: break-all;
  color: var(--text);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.stack label span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input:not([type]) {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
}

.btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.btn.secondary {
  background: #2a3441;
}

.btn.ghost {
  background: transparent;
}

.btn-sm {
  padding: 0.28rem 0.5rem;
  font-size: 0.8rem;
}

.btn.danger {
  background: #3a2228;
  border-color: #6b2f3a;
  color: #ffb4bc;
}

.muted {
  color: var(--muted);
}

/* App-Shell: Seitenleiste + Hauptbereich (--app-sidebar-width auf body, nicht .app-shell) */
body.app-sidebar-collapsed {
  --app-sidebar-width: 4.25rem;
}

/* Compact icon navigation retains room for menu and footer controls. */
body.app-mala-oil.app-sidebar-collapsed {
  --app-sidebar-width: 4.5rem;
}

.app-shell {
  display: flex;
  align-items: stretch;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app-sidebar {
  flex: 0 0 var(--app-sidebar-width);
  width: var(--app-sidebar-width);
  min-width: var(--app-sidebar-width);
  max-width: var(--app-sidebar-width);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #121820;
  border-right: 1px solid var(--border);
  position: relative;
  transform-origin: left center;
  overflow: hidden;
  transition:
    flex-basis 0.32s cubic-bezier(0.25, 0.82, 0.25, 1),
    width 0.32s cubic-bezier(0.25, 0.82, 0.25, 1),
    min-width 0.32s cubic-bezier(0.25, 0.82, 0.25, 1),
    max-width 0.32s cubic-bezier(0.25, 0.82, 0.25, 1),
    box-shadow 0.28s ease;
  z-index: 6;
}

/* Eingeklappt: schmale Leiste am linken Rand, Hauptbereich wächst nach rechts */
body.app-sidebar-collapsed .app-sidebar {
  box-shadow: 4px 0 14px rgba(0, 0, 0, 0.22);
}

body:not(.app-sidebar-collapsed) .app-sidebar {
  box-shadow: none;
}

.sidebar-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.55rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme='light'] .sidebar-topbar {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.sidebar-topbar .sidebar-brand {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
}

.sidebar-brand .header-logo {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 2.75rem;
  transition: max-width 0.22s ease, max-height 0.22s ease;
}

/* Eingeklappt: die lange Wortmarke macht Platz für die kompakte Icon-Leiste. */
body.app-mala-oil.app-sidebar-collapsed .sidebar-brand {
  display: none;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.55rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.sidebar-nav-item,
a.sidebar-footer-link,
button.sidebar-footer-link {
  color: inherit;
}

button.sidebar-footer-link {
  width: 100%;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: none;
  background: transparent;
  appearance: none;
}

.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-nav-item.tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(61, 139, 253, 0.45);
  box-shadow: inset 3px 0 0 var(--accent);
}

.app-mala-oil .sidebar-nav-item[aria-current='page'] {
  background: rgba(255, 255, 255, 0.1);
  border-color: color-mix(in srgb, var(--mala-sidebar-active-accent) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--mala-sidebar-active-accent);
}

html[data-theme='light'] .app-mala-oil .sidebar-nav-item[aria-current='page'] {
  background: rgba(0, 0, 0, 0.05);
  border-color: color-mix(in srgb, var(--mala-sidebar-active-accent) 45%, transparent);
}

/* mala Oil: Obermenü-Blöcke leicht hinterlegt; aktiver Unterpunkt farblich hervorgehoben */
.app-mala-oil .sidebar-nav-section {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

html[data-theme='light'] .app-mala-oil .sidebar-nav-section {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.app-mala-oil .sidebar-nav-section--current {
  border-color: color-mix(in srgb, var(--mala-sidebar-active-accent) 65%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mala-sidebar-active-accent) 25%, transparent);
}

html[data-theme='light'] .app-mala-oil .sidebar-nav-section--current {
  border-color: color-mix(in srgb, var(--mala-sidebar-active-accent) 52%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mala-sidebar-active-accent) 16%, transparent);
}

.app-mala-oil .sidebar-nav-item.sidebar-nav-item--sub[aria-current='page'] {
  background: color-mix(in srgb, var(--mala-sidebar-active-accent) 24%, transparent) !important;
  border-color: color-mix(in srgb, var(--mala-sidebar-active-accent) 75%, transparent) !important;
  color: #f0f6ff;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mala-sidebar-active-accent) 96%, transparent);
}

html[data-theme='light'] .app-mala-oil .sidebar-nav-item.sidebar-nav-item--sub[aria-current='page'] {
  background: color-mix(in srgb, var(--mala-sidebar-active-accent) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--mala-sidebar-active-accent) 55%, transparent) !important;
  color: inherit;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mala-sidebar-active-accent) 88%, transparent);
}

.sidebar-nav-icon--flip-rtl {
  transform: scaleX(-1);
}

.sidebar-nav-group-title {
  margin: 0.85rem 0.45rem 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.2;
}

html[data-theme='light'] .sidebar-nav-group-title {
  color: rgba(55, 65, 81, 0.85);
}

.sidebar-nav-item--sub {
  padding-left: 1.15rem;
  font-size: 0.84rem;
  font-weight: 550;
}

body.app-sidebar-collapsed .sidebar-nav-group-title {
  display: none;
}

/* mala Oil: einklappbare Menübereiche (<details>) */
.sidebar-nav-section {
  margin: 0;
  border-radius: 8px;
}

.sidebar-nav-section-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.45rem 0.4rem;
  margin: 0;
  list-style: none;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar-nav-section-summary::-webkit-details-marker {
  display: none;
}

.sidebar-nav-section > summary {
  list-style: none;
}

.sidebar-nav-section > summary::marker {
  content: '';
}

.sidebar-nav-section-chevron {
  display: inline-flex;
  width: 1rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  color: var(--muted);
}

.sidebar-nav-section:not([open]) .sidebar-nav-section-chevron {
  transform: rotate(180deg);
}

.sidebar-nav-section[open] .sidebar-nav-section-chevron {
  transform: rotate(90deg);
}

.sidebar-nav-section-summary:hover {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme='light'] .sidebar-nav-section-summary:hover {
  background: rgba(0, 0, 0, 0.08);
}

html[data-theme='light'] .sidebar-nav-section-summary {
  background: #dbe1e8;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-nav-section-inner {
  padding: 0.15rem 0 0.45rem 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

body.app-sidebar-collapsed .sidebar-nav-section-summary .sidebar-nav-text,
body.app-sidebar-collapsed .sidebar-nav-section-chevron {
  display: none;
}

/* Eingeklappt: keine Interaktion auf Summary-Zeilen (vermeidet „leere“ Klicks) */
body.app-mala-oil.app-sidebar-collapsed .sidebar-nav-section > .sidebar-nav-section-summary {
  pointer-events: none;
}

body.app-sidebar-collapsed .sidebar-nav-section-inner {
  display: none !important;
}

.main-panel--mala-oil {
  padding: 1rem 1.25rem 1.5rem;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* mala Oil Startseite: Begrüßung + Logo, mittig, responsiv */
.main-panel--mala-start {
  display: flex;
  flex-direction: column;
}

.main-panel--mala-start .mala-start-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1rem, 5vw, 2.75rem) clamp(0.75rem, 4vw, 1.5rem);
  box-sizing: border-box;
  min-height: min(72vh, 36rem);
}

.mala-start-welcome {
  margin: 0 0 clamp(0.85rem, 3.5vw, 1.5rem);
  font-size: clamp(1.45rem, 2.5vw + 0.85rem, 2.15rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text);
}

.mala-start-logo {
  max-width: min(92vw, 28rem);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 480px) {
  .main-panel--mala-start .mala-start-hero {
    min-height: min(65vh, 28rem);
    padding-top: clamp(0.5rem, 4vw, 1.25rem);
  }

  .mala-start-welcome {
    font-size: clamp(1.25rem, 5.5vw + 0.5rem, 1.75rem);
  }
}

.app-mala-oil .app-main-column > .main-panel--tankstock,
.app-mala-oil .app-main-column > .main-panel--mengenkontrolle {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.app-mala-oil.mala-stc-dashboard #main-panel-tagespreise {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: block;
}

.sidebar-nav-item--ghost {
  font-weight: 500;
  opacity: 0.95;
  margin-top: 0.45rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-nav-icon {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.sidebar-nav-icon svg {
  display: block;
}

.sidebar-nav-item[aria-selected="true"] .sidebar-nav-icon,
.sidebar-footer-btn:hover .sidebar-nav-icon,
.sidebar-footer-link:hover .sidebar-nav-icon {
  color: var(--accent);
}

.sidebar-nav-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s ease, max-width 0.22s ease;
}

body.app-sidebar-collapsed .sidebar-nav-text {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}

body.app-sidebar-collapsed .sidebar-nav-icon {
  display: inline-flex;
}

/* Keep SVG navigation visible in the compact rail. */
body.app-mala-oil.app-sidebar-collapsed .sidebar-nav svg,
body.app-mala-oil.app-sidebar-collapsed .sidebar-footer svg {
  display: block;
}

body.app-mala-oil.app-sidebar-collapsed .sidebar-nav .sidebar-nav-icon {
  display: inline-flex;
}

/* User controls remain reachable in the compact rail. */
body.app-mala-oil.app-sidebar-collapsed .sidebar-footer {
  display: flex;
}

body.app-mala-oil.app-sidebar-collapsed .sidebar-topbar {
  justify-content: center;
  gap: 0;
  padding: 0.45rem 0.25rem;
}

body.app-mala-oil.app-sidebar-collapsed .sidebar-nav {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.sidebar-nav-item--sub .sidebar-nav-icon {
  display: none;
}

.sidebar-fav-toggle {
  margin-left: auto;
  width: 1.2rem;
  min-width: 1.2rem;
  height: 1.2rem;
  border: none;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.95rem;
}

.sidebar-fav-toggle:hover,
.sidebar-fav-toggle.is-active {
  color: var(--mala-sidebar-active-accent);
}

body.app-sidebar-collapsed .sidebar-fav-toggle {
  display: none;
}

.sidebar-nav-favorites .sidebar-nav-section-summary {
  font-weight: 700;
}

.sidebar-nav-empty-favorites {
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 0.55rem 0.4rem 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sidebar-footer-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.42rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sidebar-footer-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.15s ease;
}

.sidebar-footer-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.app-sidebar-collapsed .sidebar-footer-btn,
body.app-sidebar-collapsed .sidebar-footer-link {
  justify-content: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.sidebar-collapse {
  position: static;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.22s ease;
}

.sidebar-collapse:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

body.app-sidebar-collapsed .sidebar-collapse-icon {
  transform: rotate(180deg);
}

.app-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 95;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

body.app-mobile-drawer-open .app-sidebar-overlay {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.btn-nav-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-nav-mobile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-nav-mobile-icon svg {
  display: block;
}

html[data-theme='light'] .btn-nav-mobile {
  border-color: var(--border);
  background: var(--surface);
}

@media (max-width: 768px) {
  .app-shell {
    display: block;
  }

  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    flex: none !important;
    width: var(--app-sidebar-width);
    min-width: var(--app-sidebar-width);
    max-width: none;
    transform: translateX(-100%);
    z-index: 100;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
  }

  body.app-mobile-drawer-open .app-sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.42);
  }

  .app-main-column {
    width: 100%;
  }

  .btn-nav-mobile {
    display: inline-flex;
  }

  .app-topbar {
    z-index: 110;
    align-items: center;
  }

  /* Tankstellen-Pillen (TKST) im Header — auf schmalen Viewports ausblenden (außer dauerhaft sichtbar) */
  #tkp-header-status-wrap:not(.tkp-header-always-visible) {
    display: none !important;
  }
}

body.app-mala-oil #tkp-header-status-wrap.tkp-header-always-visible,
#tkp-header-status-wrap.tkp-header-always-visible {
  display: block;
  width: 100%;
  min-width: 0;
}

.tkp-header-loading {
  font-size: 0.72rem;
  padding: 0.35rem 0.5rem;
}

@media (min-width: 769px) {
  .app-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
  }
}

.app-main-column {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* mala Oil SPA: nur Inhaltsbereich scrollt (Topbar + Sidebar fix) */
.app-mala-oil .mala-spa-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-mala-oil .mala-spa-content > main.main-panel,
.app-mala-oil .mala-spa-content > .main-panel {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-mala-oil .mala-spa-content > .main-panel--mala-oil,
.app-mala-oil .mala-spa-content > .main-panel--mala-start {
  overflow-x: hidden;
  overflow-y: auto;
}

.app-mala-oil .mala-spa-content > #main-panel-tagespreise,
.app-mala-oil .mala-spa-content > .main-panel--kontrakte,
.app-mala-oil .mala-spa-content > .main-panel--tankstock,
.app-mala-oil .mala-spa-content > .main-panel--mengenkontrolle {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #141b24;
  position: sticky;
  top: 0;
  z-index: 5;
}

.app-topbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  min-width: 0;
  flex: 1;
}

.topbar-title-block {
  min-width: 0;
}

.topbar-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.topbar-page-title {
  margin: 0.1rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.topbar-tkp-strip {
  flex: 1;
  min-width: 12rem;
  margin-top: 0;
}

.app-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  align-self: center;
}

.app-topbar-theme {
  flex-shrink: 0;
}

.app-topbar-print {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.55rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
}

.app-topbar-print-icon {
  display: inline-flex;
  color: var(--muted);
}

.app-topbar-print:hover .app-topbar-print-icon {
  color: var(--text);
}

.app-topbar-print-icon svg {
  display: block;
}

.app-panels-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: min(100%, 16rem);
}

.header-logo {
  flex-shrink: 0;
  height: 2.75rem;
  width: auto;
  max-width: 9.5rem;
  object-fit: contain;
  display: block;
}

.header-brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.header-brand-heading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

.header-brand-dashboard {
  font-weight: 600;
  color: var(--muted);
}

.header-brand-name {
  font-weight: 700;
  color: var(--text);
}

.header-brand-date {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.3;
}

.header-tkp-status {
  width: 100%;
  min-width: 0;
  margin-top: 0.4rem;
}

.header-mala-omr-wrap {
  width: 100%;
  min-width: 0;
  margin-top: 0.35rem;
}

.topbar-status-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.5rem;
  width: 100%;
  min-width: 0;
  margin-top: 0.35rem;
}

.topbar-status-panel .topbar-status-toggle {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  line-height: 1.3;
}

.topbar-status-panel-body {
  flex: 1;
  min-width: 12rem;
}

.topbar-status-panel--collapsed .topbar-status-panel-body {
  display: none;
}

.topbar-status-panel--collapsed .topbar-status-toggle::after {
  content: ' ▸';
  opacity: 0.75;
}

.topbar-status-panel:not(.topbar-status-panel--collapsed) .topbar-status-toggle::after {
  content: ' ▾';
  opacity: 0.75;
}

.mala-omr-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.45rem;
  padding: 0.38rem 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.72rem;
  line-height: 1.35;
  max-width: 100%;
  box-sizing: border-box;
}

.mala-omr-slot {
  display: inline-flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.mala-omr-slot-hd {
  font-weight: 600;
  font-size: 0.68rem;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15rem;
}

.mala-omr-slot-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.mala-omr-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  padding: 0.1rem 0.26rem;
  border-radius: 6px;
  border: 1px solid rgba(100, 150, 220, 0.42);
  background: rgba(50, 100, 180, 0.14);
  white-space: nowrap;
}

.mala-omr-pill-ab {
  font-size: 0.62rem;
  opacity: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mala-omr-pill-val {
  font-weight: 700;
  font-size: 0.73rem;
}

.mala-omr-slot-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 0.1rem;
  min-height: 1.6rem;
}

.mala-omr-ref {
  align-self: center;
  font-size: 0.66rem;
  margin-right: 0.2rem;
}

.mala-omr-strip-empty {
  font-size: 0.74rem;
}

.mala-omr-prefs-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-top: 0.35rem;
}

.mala-omr-prefs-table select {
  min-width: 7.5rem;
  max-width: 16rem;
}

.mala-omr-prefs-cb {
  text-align: center;
  vertical-align: middle;
}

.mala-omr-prefs-inline-cb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.modal-panel--mala-omr-prefs {
  max-width: min(52rem, 96vw);
}

.modal-panel--mala-omr-f9 {
  max-width: min(38rem, 94vw);
  max-height: 86vh;
  overflow-y: auto;
}

.mala-omr-modal-slot {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

.mala-omr-modal-slot-hd {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
}

.mala-omr-modal-lines {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.mala-omr-modal-lab {
  display: inline-block;
  min-width: 2.1rem;
  font-weight: 600;
  opacity: 0.85;
}

.mala-omr-modal-det {
  font-size: 0.78rem;
}

.mala-omr-pill--mtd {
  cursor: help;
}

.mala-omr-pill--tp {
  cursor: help;
}

.mala-omr-pill--tp-old {
  border-color: rgba(220, 180, 60, 0.75) !important;
  background: rgba(220, 180, 60, 0.2) !important;
}

.mala-omr-pill--alert {
  border-color: rgba(205, 75, 75, 0.85) !important;
  background: rgba(205, 75, 75, 0.24) !important;
}

.mala-omr-modal-lab.mala-omr-pill--mtd {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.mala-omr-modal-lab.mala-omr-pill--tp {
  cursor: help;
}

.mala-omr-modal-line--alert {
  background: rgba(205, 75, 75, 0.14);
  border-radius: 4px;
  padding: 0.08rem 0.24rem;
}

.mala-omr-modal-alert-note {
  color: #ffb7b7;
  font-size: 0.76rem;
}

.mala-omr-ref-alert-note {
  margin: 0.35rem 0 0.55rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(205, 75, 75, 0.58);
  background: rgba(205, 75, 75, 0.18);
  color: #ffd3d3;
  font-size: 0.8rem;
}

.mala-omr-ref-alert-cell {
  background: rgba(205, 75, 75, 0.16);
}

.mala-omr-ref-alert-mark {
  background: rgba(205, 75, 75, 0.2);
  border-radius: 4px;
  padding: 0.08rem 0.26rem;
}

html[data-theme="light"] .mala-omr-pill--alert {
  border-color: rgba(196, 45, 58, 0.72) !important;
  background: rgba(196, 45, 58, 0.16) !important;
}

html[data-theme="light"] .mala-omr-modal-line--alert {
  background: rgba(196, 45, 58, 0.11);
}

html[data-theme="light"] .mala-omr-modal-alert-note {
  color: #9a2431;
}

html[data-theme="light"] .mala-omr-ref-alert-note {
  border-color: rgba(196, 45, 58, 0.45);
  background: rgba(196, 45, 58, 0.12);
  color: #8f1d2c;
}

html[data-theme="light"] .mala-omr-ref-alert-cell {
  background: rgba(196, 45, 58, 0.11);
}

html[data-theme="light"] .mala-omr-ref-alert-mark {
  background: rgba(196, 45, 58, 0.14);
}

#mala-omr-mtd-popover.mala-omr-mtd-popover {
  position: fixed;
  z-index: 10050;
  box-sizing: border-box;
  max-width: min(36rem, 96vw);
  max-height: min(72vh, 34rem);
  overflow: auto;
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.38;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
}

.mala-omr-mtd-pop-hd {
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 0.15rem;
}

.mala-omr-mtd-pop-region {
  font-weight: 500;
}

.mala-omr-mtd-pop-src {
  font-size: 0.74rem;
  margin-bottom: 0.35rem;
}

.mala-omr-mtd-pop-basis {
  font-size: 0.76rem;
  margin: 0.25rem 0 0.35rem;
}

.mala-omr-mtd-pop-prodname {
  font-size: 0.74rem;
  margin-bottom: 0.35rem;
}

.mala-omr-mtd-pop-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.2rem 0 0.45rem;
  font-size: 0.74rem;
}

.mala-omr-mtd-pop-table th,
.mala-omr-mtd-pop-table td {
  border: 1px solid var(--border);
  padding: 0.18rem 0.32rem;
  text-align: right;
  vertical-align: top;
}

.mala-omr-mtd-pop-table th:first-child,
.mala-omr-mtd-pop-table td:first-child {
  text-align: left;
}

.mala-omr-mtd-th-basis,
.mala-omr-mtd-basiscell {
  background: rgba(120, 160, 220, 0.12);
}

.mala-omr-mtd-prodcell {
  text-align: left;
  max-width: 9rem;
  word-break: break-word;
}

.mala-omr-mtd-pop-foot {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
}

.mala-omr-mtd-formula {
  margin-top: 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  word-break: break-word;
}

html[data-theme="light"] .mala-omr-pill {
  color: #0a0a0a;
  border-color: rgba(40, 90, 160, 0.38);
  background: rgba(180, 210, 250, 0.35);
}

.tkp-status-strip--header {
  margin-bottom: 0;
  padding: 0.45rem 0.55rem;
  /* Langsame, lineare Wechsel: auf Terminalserver/RDP besser erkennbar als schnelles ease-in-out */
  --tkp-header-pill-blink-period: 4s;
  --tkp-header-pill-blink-period-3: 6s;
}

@keyframes tkp-pill-offline-blink {
  0%,
  100% {
    background: rgba(200, 90, 160, 0.22);
    border-color: rgba(240, 130, 200, 0.55);
    color: #ffd0f0;
    box-shadow: none;
  }

  50% {
    background: rgba(255, 60, 160, 0.78);
    border-color: rgba(255, 180, 230, 0.95);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 100, 200, 0.55);
  }
}

@keyframes tkp-pill-fill-crit-blink {
  0%,
  100% {
    background: rgba(200, 60, 60, 0.25);
    border-color: rgba(230, 100, 100, 0.6);
    color: #ffc8c8;
    box-shadow: none;
  }

  50% {
    background: rgba(220, 30, 30, 0.88);
    border-color: rgba(255, 140, 140, 0.95);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 60, 60, 0.5);
  }
}

.tkp-status-strip--header .tkp-pill--offline {
  background: rgba(200, 90, 160, 0.22);
  border-color: rgba(240, 130, 200, 0.55);
  color: #ffd0f0;
  animation: tkp-pill-offline-blink var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-pill--fill-warn {
  background: rgba(220, 170, 40, 0.28);
  border-color: rgba(240, 200, 90, 0.65);
  color: #ffe8a8;
}

.tkp-pill--fill-crit {
  background: rgba(200, 60, 60, 0.25);
  border-color: rgba(230, 100, 100, 0.6);
  color: #ffc8c8;
}

.tkp-status-strip--header .tkp-pill--fill-crit {
  animation: tkp-pill-fill-crit-blink var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

@keyframes tkp-combo-warn-eich {
  0%,
  100% {
    background: rgba(220, 170, 40, 0.35);
    border-color: rgba(255, 160, 60, 0.85);
    color: #fff3d0;
  }
  50% {
    background: rgba(255, 140, 40, 0.82);
    border-color: rgba(255, 200, 120, 0.95);
    color: #1a1208;
  }
}

@keyframes tkp-combo-crit-eich {
  0%,
  100% {
    background: rgba(200, 60, 60, 0.35);
    border-color: rgba(255, 140, 60, 0.75);
    color: #ffe0d0;
  }
  50% {
    background: rgba(255, 120, 40, 0.88);
    border-color: rgba(255, 200, 140, 0.95);
    color: #1a0e06;
  }
}

@keyframes tkp-combo-offline-tuv {
  0%,
  100% {
    background: rgba(200, 90, 160, 0.28);
    border-color: rgba(240, 130, 200, 0.6);
    color: #ffd0f0;
  }
  50% {
    background: rgba(30, 180, 190, 0.55);
    border-color: rgba(120, 240, 245, 0.9);
    color: #062428;
  }
}

@keyframes tkp-combo-offline-eich {
  0%,
  100% {
    background: rgba(200, 90, 160, 0.28);
    border-color: rgba(240, 130, 200, 0.6);
    color: #ffd0f0;
  }
  50% {
    background: rgba(255, 140, 40, 0.75);
    border-color: rgba(255, 200, 120, 0.95);
    color: #1a1004;
  }
}

@keyframes tkp-combo-offline-eich-tuv {
  0%,
  100% {
    background: rgba(200, 90, 160, 0.26);
    border-color: rgba(230, 150, 210, 0.55);
    color: #ffe8f8;
  }
  33% {
    background: rgba(40, 170, 185, 0.5);
    border-color: rgba(140, 235, 240, 0.85);
    color: #042428;
  }
  66% {
    background: rgba(255, 130, 45, 0.72);
    border-color: rgba(255, 210, 130, 0.92);
    color: #1a0c02;
  }
}

@keyframes tkp-combo-online-eich {
  0%,
  100% {
    background: rgba(55, 130, 75, 0.35);
    border-color: rgba(255, 150, 50, 0.55);
    color: #e8ffe8;
  }
  50% {
    background: rgba(255, 130, 40, 0.78);
    border-color: rgba(255, 210, 120, 0.95);
    color: #1a0e04;
  }
}

@keyframes tkp-combo-online-tuv {
  0%,
  100% {
    background: rgba(55, 130, 75, 0.38);
    border-color: rgba(80, 200, 210, 0.55);
    color: #e0fffa;
  }
  50% {
    background: rgba(25, 165, 175, 0.72);
    border-color: rgba(150, 245, 250, 0.92);
    color: #031a1c;
  }
}

@keyframes tkp-combo-online-eich-tuv {
  0%,
  100% {
    background: rgba(55, 130, 75, 0.36);
    border-color: rgba(120, 200, 120, 0.5);
    color: #e8fff0;
  }
  50% {
    background: rgba(230, 120, 40, 0.45);
    border-color: rgba(40, 185, 195, 0.75);
    color: #0a1a12;
  }
}

@keyframes tkp-combo-warn-tuv {
  0%,
  100% {
    background: rgba(220, 170, 40, 0.32);
    border-color: rgba(80, 200, 210, 0.55);
    color: #fff8e0;
  }
  50% {
    background: rgba(35, 175, 185, 0.62);
    border-color: rgba(160, 245, 250, 0.9);
    color: #031a1c;
  }
}

@keyframes tkp-combo-crit-tuv {
  0%,
  100% {
    background: rgba(200, 60, 60, 0.32);
    border-color: rgba(70, 195, 205, 0.55);
    color: #ffe8e8;
  }
  50% {
    background: rgba(30, 170, 180, 0.65);
    border-color: rgba(150, 240, 245, 0.92);
    color: #031c1e;
  }
}

.tkp-status-strip--header .tkp-pill--combo-warn-eich {
  animation: tkp-combo-warn-eich var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-warn-tuv {
  animation: tkp-combo-warn-tuv var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-crit-tuv {
  animation: tkp-combo-crit-tuv var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-crit-eich {
  animation: tkp-combo-crit-eich var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-offline-tuv {
  animation: tkp-combo-offline-tuv var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-offline-eich {
  animation: tkp-combo-offline-eich var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-offline-eich-tuv {
  animation: tkp-combo-offline-eich-tuv var(--tkp-header-pill-blink-period-3, 6s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-online-eich {
  animation: tkp-combo-online-eich var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-online-tuv {
  animation: tkp-combo-online-tuv var(--tkp-header-pill-blink-period, 4s) linear infinite;
}

.tkp-status-strip--header .tkp-pill--combo-online-eich-tuv {
  animation: tkp-combo-online-eich-tuv var(--tkp-header-pill-blink-period-3, 6s) linear infinite;
}

.tkp-pop-tank-li--nopeil {
  border-left: 3px solid rgba(160, 170, 190, 0.55);
}

.tkp-header-popover {
  position: fixed;
  z-index: 90;
  max-width: 22.5rem;
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  padding: 0.65rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text);
  pointer-events: auto;
}

.tkp-header-popover[hidden] {
  display: none !important;
}

.tkp-pop-hd {
  font-weight: 700;
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

.tkp-pop-section {
  margin: 0.45rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

.tkp-pop-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.tkp-pop-sub {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.35rem;
}

.tkp-pop-p {
  margin: 0 0 0.35rem;
}

.tkp-pop-p--alert {
  color: #ffb8d8;
}

.tkp-pop-p--warnmsg {
  color: #ffe8a8;
}

.tkp-pop-p--prf-eich {
  font-weight: 600;
  color: #ffc978;
}

.tkp-pop-p--prf-tuv {
  font-weight: 600;
  color: #7ee8ea;
}

.tkp-pop-code {
  font-size: 0.72rem;
  word-break: break-all;
}

.tkp-pop-tanks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tkp-pop-tank-li {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.tkp-pop-tank-li:last-child {
  margin-bottom: 0;
}

.tkp-pop-tank-li--warn {
  background: rgba(220, 170, 40, 0.14);
  border-color: rgba(240, 200, 90, 0.38);
}

.tkp-pop-tank-li--crit {
  background: rgba(200, 60, 60, 0.2);
  border-color: rgba(230, 100, 100, 0.45);
}

.tkp-pop-tank-h {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.tkp-pop-tank-body {
  display: flex;
  gap: 0.65rem;
  align-items: stretch;
}

.tkp-pop-bar-col.tankstock-bar-col {
  flex-shrink: 0;
}

.tkp-pop-bar-col .tkp-pop-tank-bar.tankstock-bar {
  height: 72px;
  width: 26px;
}

.tkp-pop-fill-caption {
  text-align: center;
  line-height: 1.25;
  max-width: 4.2rem;
}

.tkp-pop-tank-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(5.5rem, 7.5rem) 1fr;
  gap: 0.15rem 0.5rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.tkp-pop-tank-grid span:nth-child(even) {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Kein prefers-reduced-motion für Header-TKST-Pillen: Terminalserver/RDP meldet oft
   „reduzierte Bewegung“, wodurch operative Status-Blinker unsichtbar wären. */

.title {
  margin: 0;
  font-size: 1.15rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.user-pill {
  font-size: 0.85rem;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.main-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.main-view-tab {
  font-weight: 600;
}

.main-view-tab-extra {
  align-self: center;
  margin-left: 0.15rem;
  font-weight: 600;
}

.main-panel--kontrakte {
  padding: 0.75rem 1rem 1.25rem;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.lieferanten-kontrakte-root {
  width: 100%;
}

.lk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

.lk-stack-inline {
  min-width: 10rem;
  margin: 0;
}

.lk-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(22rem, 100%);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 960px) {
  .lk-main {
    grid-template-columns: 1fr;
  }
}

.lk-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.lk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.lk-table th,
.lk-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
  text-align: left;
  vertical-align: middle;
}

.lk-table th {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
}

.lk-neg {
  color: #ff8a8a;
  font-weight: 600;
}

.lk-pos {
  color: #6ecf6e;
  font-weight: 600;
}

.lk-inp {
  width: 100%;
  max-width: 7rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.82rem;
}

.lk-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lk-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: var(--surface);
}

.lk-card-title {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
}

.lk-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.lk-card-table th {
  text-align: left;
  font-weight: 600;
  padding: 0.2rem 0.35rem 0.2rem 0;
  vertical-align: top;
}

.lk-card-table td {
  padding: 0.2rem 0.35rem;
}

.admin-acl-matrix-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.admin-acl-matrix {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.admin-acl-matrix th,
.admin-acl-matrix td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.45rem;
  vertical-align: middle;
}

.admin-acl-matrix thead th {
  background: rgba(255, 255, 255, 0.05);
}

.admin-acl-th-export,
.admin-acl-td-export {
  min-width: 6.5rem;
  background: rgba(120, 160, 220, 0.08);
}

.admin-acl-matrix-all th {
  font-weight: 600;
}

.lk-month-vol-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.lk-month-vol-table th,
.lk-month-vol-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.4rem;
  text-align: left;
  vertical-align: middle;
}

.lk-month-vol-table thead th {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
}

.lk-mv-num {
  text-align: right;
  white-space: nowrap;
}

.lk-mv-min {
  color: #f43f5e;
  font-weight: 600;
}

.lk-mv-plus {
  color: #2dd4bf;
  font-weight: 600;
}

.lk-dtp-pos {
  color: #22c55e;
  font-weight: 600;
}

.lk-dtp-neg {
  color: #ef4444;
  font-weight: 600;
}

.lk-row-actions {
  white-space: nowrap;
}

.lk-row-actions .btn-sm {
  margin-right: 0.25rem;
}

.modal-panel--lk-compact {
  width: min(22rem, calc(100% - 1.25rem));
  max-width: calc(100vw - 1.25rem);
}

.modal-panel--lk-new-day {
  width: min(380px, calc(100% - 2rem));
  max-width: min(380px, calc(100% - 2rem));
}

.lk-card-sub {
  padding-left: 0.75rem !important;
}

.lk-form .stack {
  margin-bottom: 0.5rem;
}

.lk-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.lk-pick-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 40vh;
  overflow: auto;
}

.lk-pick-li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.modal-panel--audit {
  width: min(1100px, calc(100% - 1.25rem));
  max-width: calc(100vw - 1.25rem);
  max-height: min(92vh, 900px);
}

/* Wie Tankbestände / Mengenkontrolle: zentriert, Rand über max-width + Padding */
.main-panel--tkst {
  padding: 0.75rem 1rem 1.25rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.tankstellenpreise-root {
  min-height: 4rem;
}

.tankstellenpreise-inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tankstellenpreise-error {
  color: #ffb4bc;
  margin: 0;
}

.tkp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0 0 0.65rem;
}

.tkp-toolbar-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--muted, #a8b0bc);
}

.tkp-toolbar-select {
  min-width: 14rem;
  max-width: 100%;
}

.tkp-hint {
  font-size: 0.78rem;
  margin: 0 0 0.75rem;
  line-height: 1.35;
}

.tkp-view-wrap {
  width: 100%;
  min-width: 0;
}

.tkp-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.35rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.tkp-data-table {
  table-layout: fixed;
  width: 100%;
  min-width: 58rem;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.tkp-data-table th,
.tkp-data-table td {
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.tkp-data-table thead th {
  font-weight: 600;
  color: #e8eef5;
  background: rgba(0, 0, 0, 0.2);
}

.tkp-th-prod {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tkp-th-st {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tkp-th-name {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tkp-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #a8b0bc);
}

.tkp-td-name {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
}

.tkp-td-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tkp-price--min {
  color: #ff8a8a;
}

.tkp-price--max {
  color: #7ee787;
}

.tkp-table-empty {
  margin: 0.5rem 0 0;
}

.tkp-meta {
  font-size: 0.78rem;
  margin: 0 0 0.65rem;
}

.tkp-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.tkp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.tkp-pill-tk {
  font-variant-numeric: tabular-nums;
}

.tkp-pill-label {
  font-variant-numeric: tabular-nums;
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kein animation:inherit auf dem Label: sonst zeigen manche Browser/RDP-Sessions den Wechsel nicht; Farbe kommt vom Parent. */
.tkp-status-strip--header .tkp-pill .tkp-pill-label {
  animation: none;
}

.tkp-pill--placeholder {
  background: rgba(140, 150, 170, 0.15);
  border-color: rgba(170, 180, 200, 0.35);
  color: var(--muted);
  cursor: default;
}

.tkp-pill--nopeil {
  background: rgba(140, 150, 170, 0.22);
  border-color: rgba(170, 180, 200, 0.45);
  color: #d8dce6;
}

.tkp-pill--online {
  background: rgba(100, 180, 90, 0.22);
  border-color: rgba(120, 200, 110, 0.55);
  color: #c8f0c0;
}

.tkp-pill--offline {
  background: rgba(200, 80, 80, 0.2);
  border-color: rgba(230, 120, 120, 0.55);
  color: #ffc8c8;
}

/* Bis zu 3 Karten pro Zeile; kleinere Preis-Schrift passt in schmalere Spalten */
.tkp-cards {
  display: grid;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

@media (max-width: 1180px) {
  .tkp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .tkp-cards {
    grid-template-columns: 1fr;
  }
}

.tkp-card {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.tkp-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.tkp-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
}

.tkp-card-tk {
  font-size: 0.8rem;
}

.tkp-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.tkp-card-empty {
  margin: 0;
  font-size: 0.85rem;
}

/* Produkte gleich breit über Kartenbreite — keine 14rem-Kappung der Preise */
.tkp-matrix {
  --tkp-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--tkp-cols), minmax(0, 1fr));
  gap: 0.5rem 1rem;
  align-items: end;
  justify-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.tkp-matrix-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
  max-width: none;
  text-align: center;
}

.tkp-name {
  display: block;
  color: #f5f5f5;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.tkp-price-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.tkp-flip-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  max-width: 100%;
}

.tkp-flip-row--price .tkp-flip-seg {
  font-size: 1.18rem;
  padding: 0.18rem 0.22rem;
  min-width: 0.85em;
}

.tkp-flip-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", "Courier New", monospace;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid #3a3a3a;
  background: linear-gradient(180deg, #2d2d2d 0%, #141414 55%, #0c0c0c 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5);
}

.tkp-flip-sp {
  display: inline-block;
  width: 0.35rem;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .tkp-flip-row--price .tkp-flip-seg {
    font-size: 1rem;
    padding: 0.14rem 0.18rem;
  }

  .tkp-name {
    font-size: 0.92rem;
  }
}

.date-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.date-controls--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.date-picker-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.date-picker-weekday {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 2rem;
  text-transform: capitalize;
}

.date-controls--inline .btn-date-step {
  min-width: 2.1rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-size: 1.1rem;
  line-height: 1;
}

.tagespreise-toolbar-merge {
  align-items: center;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
}

.tab[aria-selected="true"] {
  border-color: var(--accent);
  background: #1e2a3d;
}

.date-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.date-label span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

#tagespreise-header-tools {
  --tp-toolbar-left-pad: clamp(0.65rem, 2.2vw, 1.5rem);
}

.live-bar {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Statuszeile bündig unter „Heute“ (gleicher Einzug wie Datumszeile) */
#tagespreise-header-tools > .live-bar {
  margin-inline-start: var(--tp-toolbar-left-pad);
}

.live-bar.ok {
  color: var(--ok);
}

.filter-toolbar {
  margin-top: 0.65rem;
}

.filter-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.filter-quick-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.filter-quick-btn {
  padding: 0.32rem 0.55rem;
  font-size: 0.82rem;
  min-height: 0;
}

.filter-quick-btn.is-active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

/* Hellmodus: .btn.secondary überschreibt sonst die aktive Schnellwahl */
html[data-theme='light'] .filter-toolbar .btn.secondary.filter-quick-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

html[data-theme='light'] .filter-toolbar .btn.secondary.filter-quick-btn.is-active:hover {
  filter: brightness(0.95);
}

.tagespreise-toolbar-merge .date-controls--tagespreise-toolbar {
  margin-inline-start: var(--tp-toolbar-left-pad, clamp(0.65rem, 2.2vw, 1.5rem));
}

.filter-quick-group--fuel .filter-quick-btn {
  min-width: 2.35rem;
  padding-left: 0.38rem;
  padding-right: 0.38rem;
}

.filter-toolbar label {
  font-size: 0.88rem;
  color: #fff;
  font-weight: 500;
}

.filter-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.filter-inline-check input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.filter-toolbar select {
  min-width: 14rem;
  max-width: 100%;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
}

.filter-toolbar .filter-sort-select {
  min-width: 12.5rem;
}

.filter-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.app-main {
  padding: 0.75rem;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .app-main {
    padding: 0.5rem;
  }
}

/* Tagespreise: Karten max. 390px, nebeneinander bis zur Viewport-Breite */
.grid-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 390px), 390px));
  gap: 0.75rem;
  justify-content: center;
  align-items: start;
}

/* Horizontale Ansicht: Kartenbreite ~ Anzahl Produktblöcke; mehrere Karten nebeneinander (wrap) */
.app-main[data-tp-layout='horizontal'] .grid-blocks {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
}

.app-main[data-tp-layout='horizontal'] .block-card {
  width: max-content;
  max-width: 100%;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.app-main[data-tp-layout='horizontal'] .block-head-row--horizontal {
  width: fit-content;
  max-width: 100%;
  /* stretch: Notiz-Spalte wird so hoch wie der Lieferantenblock → kein Leerraum unter der Notiz */
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.65rem 1rem;
}

.app-main[data-tp-layout='horizontal'] .block-head-titles--horiz {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 11rem;
  align-self: flex-start;
}

.app-main[data-tp-layout='horizontal'] .block-note-wrap {
  flex: 0 1 11rem;
  min-width: min(7rem, 100%);
  max-width: min(13rem, 38vw);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 50px;
}

.app-main[data-tp-layout='horizontal'] .block-note-wrap textarea.block-note-input {
  flex: 1 1 auto;
  min-height: 2.4rem;
}

.app-main[data-tp-layout='horizontal'] .block-note-wrap .block-note-meta {
  flex-shrink: 0;
}

/* Weniger Freiraum zwischen Notiz und Bereich „Eingaben · Uhrzeit / Preis …“ */
.app-main[data-tp-layout='horizontal'] .block-card > .block-head {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding-bottom: 0.1rem;
  padding-top: 0.45rem;
  gap: 0;
  border-bottom: none;
	max-height: 60px;
}

.app-main[data-tp-layout='horizontal'] .mini-table--horiz {
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  box-sizing: border-box;
}

.tp-layout-toggle {
  font-size: 0.82rem;
  padding: 0.28rem 0.5rem;
}

.block-lieferant-text {
  flex: 1 1 9rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.block-head-history-btn {
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  min-height: 1.55rem;
  line-height: 1.2;
  white-space: nowrap;
}

.mini-table--horiz .mini-table-th-horiz {
  text-align: left;
  font-weight: 600;
  font-size: 0.82rem;
  padding-top: 0.15rem;
  padding-bottom: 0.3rem;
  line-height: 1.25;
}

.mini-table--horiz td.slot-cell--horiz-products-wrap {
  padding: 0.4rem 0.4rem 0.5rem;
  vertical-align: top;
}

.block-horiz-products-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 0.85rem;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.block-horiz-product-bundle {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  /* Dunkelmodus: etwas heller als die Karte, Blöcke besser erkennbar */
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

html[data-theme='light'] .block-horiz-product-bundle {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}

.block-horiz-product-bundle-head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.45rem;
  width: 100%;
  padding-bottom: 0.35rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

html[data-theme='light'] .block-horiz-product-bundle-head {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.block-horiz-product-bundle-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

/* Pro Produkt: Zeit/Preis-Spalten nebeneinander (nicht untereinander) */
.mini-table--horiz .slot-grid--horiz-inline {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.45rem;
  width: auto;
  min-width: 0;
}

.mini-table--horiz .slot-grid--horiz-inline .slot {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .mini-table--horiz .slot-grid--horiz-inline {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .app-main[data-tp-layout='horizontal'] .block-head-row--horizontal {
    flex-direction: column;
    align-items: stretch;
  }

  .app-main[data-tp-layout='horizontal'] .block-head-titles--horiz,
  .app-main[data-tp-layout='horizontal'] .block-note-wrap {
    flex: 1 1 auto;
    max-width: none;
    justify-content: flex-start;
  }
}

.block-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  justify-self: center;
}

.block-head {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.block-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.block-head-titles {
  flex: 1 1 auto;
  min-width: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.block-note-wrap {
  flex: 1 1 12rem;
  max-width: 22rem;
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

textarea.block-note-input {
  box-sizing: border-box;
  width: 100%;
  
  min-height: 3.2rem;
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: #d97a5c;
  resize: vertical;
  touch-action: manipulation;
}

textarea.block-note-input::placeholder {
  color: rgba(217, 122, 92, 0.5);
}

textarea.block-note-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea.block-note-input:read-only {
  cursor: not-allowed;
  background: #1e2630;
  color: rgba(217, 122, 92, 0.65);
  border-color: #3a4656;
}

html[data-theme="light"] textarea.block-note-input {
  color: #9a3412;
  background: #fffdfb;
  border-color: #e0c8bc;
}

html[data-theme="light"] textarea.block-note-input::placeholder {
  color: rgba(154, 52, 18, 0.45);
}

html[data-theme="light"] textarea.block-note-input:read-only {
  background: #f2ebe8;
  color: #7c2d12;
  border-color: #d4c4bd;
}

.block-note-meta {
  font-size: 0.65rem;
  color: var(--muted);
}

.block-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.block-sub {
  font-size: 0.8rem;
  color: var(--muted);
}

.c-green {
  border-left: 4px solid #3ecf8e;
}
.c-pink {
  border-left: 4px solid #ff7eb3;
}
.c-yellow {
  border-left: 4px solid #ffd56a;
}
.c-blue {
  border-left: 4px solid #6ab0ff;
}
.c-orange {
  border-left: 4px solid #ffb86b;
}
.c-teal {
  border-left: 4px solid #5ee0d0;
}
.c-purple {
  border-left: 4px solid #c79bff;
}
.c-gray {
  border-left: 4px solid #9aa7b5;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.mini-table th,
.mini-table td {
  border-top: 1px solid var(--border);
  padding: 0.35rem 0.4rem;
  vertical-align: top;
}

.mini-table td.slot-cell {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mini-table thead th {
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
}

.mini-table tbody th {
  text-align: left;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  width: auto;
  min-width: 4.5rem;
}

.mini-table tbody th.product-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  vertical-align: top;
}

.mini-table tbody th .product-name {
  line-height: 1.3;
}

.mini-table tbody th .product-history-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 0.12rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--accent);
  background: rgba(30, 42, 61, 0.85);
  border: 1px solid rgba(106, 176, 255, 0.45);
  border-radius: 6px;
  cursor: help;
  font-family: inherit;
}

.mini-table tbody th .product-history-btn:hover {
  background: rgba(40, 56, 82, 0.95);
  border-color: rgba(106, 176, 255, 0.75);
  color: #8ec8ff;
}

/* Produkt-Hover: Preisvergleich letzte Werktage */
.product-popover {
  z-index: 200;
  max-width: min(96vw, 52rem);
  padding: 0.55rem 0.65rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  font-size: 0.78rem;
  color: var(--text);
  pointer-events: auto;
}

.product-popover[hidden] {
  display: none !important;
}

.product-popover-title {
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 0.45rem;
  color: #fff;
}

.product-popover-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.product-popover-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 280px;
}

.product-popover-table th,
.product-popover-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.45rem;
  text-align: right;
  white-space: nowrap;
}

.product-popover-table thead th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-align: center;
}

.product-popover-table tbody th {
  text-align: left;
  color: #fff;
  font-weight: 500;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-popover-loading,
.product-popover-empty,
.product-popover-error {
  margin: 0;
  padding: 0.35rem 0.15rem;
  font-size: 0.82rem;
}

.product-popover-error {
  color: #e35d6a;
}

.product-popover-table td.ph-rank-cheapest {
  background: rgba(62, 207, 142, 0.22);
  color: #b8f0d0;
  font-weight: 600;
}

.product-popover-table td.ph-rank-second {
  background: rgba(255, 213, 106, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 213, 106, 0.35);
}

.product-popover-table td.ph-rank-worst {
  background: rgba(227, 93, 106, 0.2);
  color: #ffb3bc;
  font-weight: 600;
}

@media (min-width: 700px) {
  .mini-table tbody th {
    width: 22%;
  }
}

.slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  width: 100%;
}

@media (min-width: 480px) {
  .slot-grid {
    grid-template-columns: repeat(2, minmax(6.25rem, auto));
    width: 100%;
    min-width: min(100%, 14rem);
  }
}

@media (min-width: 900px) {
  .slot-grid {
    grid-template-columns: repeat(4, minmax(5.75rem, auto));
    width: max-content;
    max-width: 100%;
    min-width: min(100%, 26rem);
  }
}

@media (min-width: 1200px) {
  .slot-grid {
    grid-template-columns: repeat(4, minmax(3.75rem, auto));
    min-width: min(100%, 26rem);
  }
}

.slot {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
}

.slot label {
  font-size: 0.72rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.slot input.cell-input-time,
.slot input.cell-input--price {
  box-sizing: border-box;
  width: 5.5rem;
  min-width: 4rem;
  max-width: 4rem;
  min-height: 2.5rem;
  font-size: 0.95rem;
  line-height: 1.3;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  touch-action: manipulation;
}

.slot input.cell-input-time {
  cursor: default;
  background: #1e2630;
  color: var(--muted);
  border-color: #3a4656;
  pointer-events: none;
  user-select: none;
}

.slot input.cell-input--price:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.slot input.cell-input--price:read-only {
  cursor: not-allowed;
  background: #1e2630;
  color: var(--muted);
  border-color: #3a4656;
}

.modal-msg-pre {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
  max-height: 14rem;
  overflow: auto;
}

.meta {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.meta-user {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 500;
}

.slot.slot--rank-cheapest {
  padding: 3px;
  margin: -3px;
  border-radius: 10px;
  animation: slot-rank-green-pulse 1.4s ease-in-out infinite;
}

.slot.slot--rank-second {
  padding: 3px;
  margin: -3px;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255, 213, 106, 0.65);
}

.slot.slot--rank-worst {
  padding: 3px;
  margin: -3px;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(227, 93, 106, 0.75);
}

@keyframes slot-rank-green-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(140, 220, 170, 0.45);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.75), 0 0 14px rgba(62, 207, 142, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slot.slot--rank-cheapest {
    animation: none;
    box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.55);
  }
}

/* Modal */
.modal-root[hidden] {
  display: none !important;
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, calc(100% - 2rem));
  max-height: min(80vh, 640px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.modal-panel--wide {
  width: min(560px, calc(100% - 2rem));
}

.mala-evatr-modal.modal-panel--wide {
  width: min(640px, calc(100% - 2rem));
  max-height: min(90vh, 720px);
  overflow: auto;
}

.mala-evatr-modal__pre {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-muted, rgba(0, 0, 0, 0.06));
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 240px;
  overflow: auto;
}

.mala-evatr-modal--ok .mala-evatr-modal__ok {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(34, 160, 80, 0.18);
  border: 1px solid rgba(34, 160, 80, 0.45);
  color: var(--text, inherit);
  font-weight: 600;
}

.mala-evatr-modal.mala-evatr-modal--form {
  width: min(720px, calc(100% - 2rem));
  max-height: min(92vh, 860px);
}

.mala-evatr-modal__field {
  margin-bottom: 0.65rem;
}

.mala-evatr-modal__field label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted, #888);
  margin-bottom: 0.2rem;
}

.mala-evatr-modal__field input,
.mala-evatr-modal__field select {
  width: 100%;
  box-sizing: border-box;
}

.mala-evatr-modal__field input[readonly] {
  opacity: 0.85;
}

.mala-evatr-modal__inline-msg {
  margin: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--danger, #c44);
}

.mala-evatr-modal__statusline {
  margin: 0.25rem 0 0.5rem;
}

.mala-evatr-modal__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid var(--border);
}

.mala-evatr-modal__badge--ok {
  background: rgba(34, 160, 80, 0.24);
  border-color: rgba(34, 160, 80, 0.5);
}

.mala-evatr-modal__badge--fail {
  background: rgba(200, 60, 60, 0.24);
  border-color: rgba(200, 60, 60, 0.5);
}

.mala-evatr-modal__debug {
  margin: 0.45rem 0;
}

.mala-evatr-modal__debug summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--muted, #888);
}

.mala-kunden-field.mala-ust-field--ok input,
.mala-kunden-field.mala-ust-field--ok select {
  border-color: rgba(34, 160, 80, 0.7);
  background: rgba(34, 160, 80, 0.1);
}

.mala-kunden-field.mala-kunden-field--err input,
.mala-kunden-field.mala-kunden-field--err select,
.mala-kunden-field.mala-kunden-field--err textarea {
  border-color: rgba(200, 60, 60, 0.74);
  background: rgba(200, 60, 60, 0.12);
}

.mala-kunden-field.mala-ust-field--err input,
.mala-kunden-field.mala-ust-field--err select {
  border-color: rgba(200, 60, 60, 0.74);
  background: rgba(200, 60, 60, 0.12);
}

.stack.mala-iban-field--ok input,
.mala-kunden-field.mala-iban-field--ok input {
  border-color: rgba(34, 160, 80, 0.7);
  background: rgba(34, 160, 80, 0.1);
}

.stack.mala-iban-field--err input,
.mala-kunden-field.mala-iban-field--err input {
  border-color: rgba(200, 60, 60, 0.74);
  background: rgba(200, 60, 60, 0.12);
}

.mala-iban-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.3;
}

.mala-iban-hint--ok {
  color: rgba(34, 160, 80, 0.95);
}

.mala-iban-hint--err {
  color: rgba(200, 60, 60, 0.95);
}

.mala-evatr-erg-wrap {
  margin: 0.75rem 0;
}

.mala-evatr-erg {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.mala-evatr-erg td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.12));
}

.mala-evatr-erg__code {
  font-weight: 700;
  text-align: right;
  width: 3rem;
}

.mala-evatr-erg--a td {
  background: rgba(34, 160, 80, 0.2);
}

.mala-evatr-erg--b td {
  background: rgba(200, 60, 60, 0.22);
}

.mala-evatr-erg--c td {
  background: rgba(200, 160, 40, 0.18);
}

.mala-evatr-erg--d td {
  background: rgba(120, 120, 130, 0.2);
}

.mala-evatr-erg__legend {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

.modal-panel--admin-wide {
  width: min(1040px, calc(100% - 1.25rem));
  max-height: min(92vh, 900px);
}

.modal-panel--settings {
  width: min(440px, calc(100% - 2rem));
}

.modal-panel--admin-user-password {
  width: min(380px, calc(100% - 2rem));
  max-height: min(70vh, 520px);
}

.login-hours-block {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

.login-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.login-hours-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 1fr;
  gap: 0.45rem;
  align-items: center;
}

.login-hours-day {
  margin: 0;
  white-space: nowrap;
}

.input-time {
  width: 100%;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

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

.modal-msg {
  margin: 0 0 1rem;
  line-height: 1.45;
}

.modal-msg-html {
  margin: 0 0 1rem;
  line-height: 1.45;
}

.modal-panel--price-warn {
  width: min(520px, calc(100% - 2rem));
  max-width: min(520px, calc(100% - 2rem));
  scrollbar-gutter: stable;
}

.price-ref-samples {
  padding-right: 0.35rem;
  box-sizing: border-box;
}

.price-ref-samples-tbl {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.86rem;
  box-sizing: border-box;
}

.price-ref-samples-tbl td {
  padding: 0.28rem 0;
  vertical-align: baseline;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.price-ref-samples-lab {
  width: 62%;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.65rem;
}

.price-ref-samples-price {
  width: 38%;
  min-width: 6.75rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 0.65rem;
  padding-right: 0.15rem;
}

.price-ref-samples-slot {
  opacity: 0.82;
  font-size: 0.9em;
}

.price-ref-samples-dot {
  margin-right: 0.15rem;
  opacity: 0.65;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal-actions--dialog {
  flex-wrap: wrap;
  justify-content: stretch;
}

.modal-actions--dialog .btn {
  flex: 1 1 auto;
  min-width: 9rem;
}

.modal-panel--argus-omr-import {
  width: min(480px, calc(100% - 2rem));
  max-width: min(480px, calc(100% - 2rem));
}

.admin-user-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.admin-user-main {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}

.admin-user-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.admin-form {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Triggerliste Monat */
.main-panel--trigger {
  padding: 0.75rem 1rem 1.5rem;
  max-width: 100%;
}

.trigger-list-root {
  max-width: 100%;
}

.trigger-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.65rem;
}

.trigger-toolbar-filters {
  margin-top: -0.35rem;
  margin-bottom: 0.5rem;
}

.trigger-toolbar-filters label {
  font-size: 0.85rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.trigger-toolbar-filters select {
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  max-width: 18rem;
}

.trigger-month-label {
  font-size: 0.88rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.trigger-month-input {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}

.trigger-list-title {
  margin: 0 0 0.65rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.trigger-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.trigger-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 1500px;
  width: 100%;
}

.trigger-table th,
.trigger-table td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.35rem;
  vertical-align: top;
}

.trigger-table thead th {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.trigger-th-red,
.trigger-col-red {
  color: #ff8a8a;
}

.trigger-th-num {
  text-align: right;
}

.trigger-td-num {
  text-align: right;
}

.trigger-sum-row .trigger-td-num {
  font-variant-numeric: tabular-nums;
}

.trigger-inp {
  box-sizing: border-box;
  width: 100%;
  min-width: 4rem;
  max-width: 9rem;
  padding: 0.25rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #141a22;
  color: var(--text);
  font-size: 0.78rem;
}

.trigger-inp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.trigger-inp-red {
  color: #ffb3b3;
}

.trigger-ta {
  box-sizing: border-box;
  width: 100%;
  min-width: 10rem;
  max-width: 20rem;
  padding: 0.3rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #141a22;
  color: var(--text);
  font-size: 0.78rem;
  resize: vertical;
}

.trigger-sel {
  max-width: 18rem;
  min-width: 12rem;
  padding: 0.3rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #141a22;
  color: var(--text);
  font-size: 0.75rem;
}

.trigger-td-liefer {
  min-width: 34rem;
}

.trigger-liefer-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.trigger-rowline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.trigger-rowline-second {
  margin-top: 0.1rem;
}

.trigger-mini-label {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trigger-liefer-hint {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 0.1rem;
  white-space: nowrap;
}

.trigger-meta-combo {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}

.trigger-kundenname-col {
  min-width: 16rem;
}

.trigger-kundenname-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.trigger-kundenname-inp {
  max-width: 22rem;
  min-width: 12rem;
}

.trigger-kunden-search-btn {
  min-width: 2.1rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.trigger-customer-modal {
  max-width: min(95vw, 76rem);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.trigger-customer-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trigger-customer-search-row input {
  flex: 1;
}

.trigger-customer-results-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
}

.trigger-customer-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.trigger-customer-results-table th,
.trigger-customer-results-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0.45rem;
  vertical-align: top;
}

.trigger-customer-results-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #202a38;
}

.trigger-customer-sub {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.trigger-customer-act {
  white-space: nowrap;
}

.trigger-ta-inline {
  min-width: 14rem;
  max-width: 24rem;
}

.trigger-ta.trigger-bemerkung--filled {
  border-color: #d4a82a;
  box-shadow: 0 0 0 1px rgba(212, 168, 42, 0.65);
}

.trigger-date {
  min-width: 8.5rem;
  max-width: 9.5rem;
}

.trigger-td-actions {
  white-space: nowrap;
}

.trigger-btn-save.trigger-btn-save--pending {
  background: #6b5a1f;
  border-color: #d4a82a;
  color: #fff8e0;
}

.trigger-inp.trigger-field--error,
.trigger-ta.trigger-field--error,
.trigger-sel.trigger-field--error {
  border-color: #e35d6a !important;
  box-shadow: 0 0 0 1px rgba(227, 93, 106, 0.55);
}

.trigger-inp[readonly] {
  background: #1e2630;
  color: var(--muted);
}

.trigger-inp-neg {
  border-color: #e35d6a !important;
  box-shadow: 0 0 0 1px rgba(227, 93, 106, 0.4);
}

.trigger-sum-row td {
  background: #1a2230;
  font-size: 0.8rem;
  color: #dfe7f2;
}

.trigger-row--dirty .trigger-inp,
.trigger-row--dirty .trigger-ta,
.trigger-row--dirty .trigger-sel {
  outline: 1px dashed rgba(61, 139, 253, 0.45);
}

/* Tankkarten */
.main-panel--tankkarten {
  padding: 0.75rem 1rem 1.25rem;
}

.tankkarten-root {
  min-height: 12rem;
  max-width: 1280px;
  margin: 0 auto;
}

.tankkarten-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.35rem 0.45rem;
  margin-bottom: 0.55rem;
  padding-left: 0.35rem;
}

.tankkarten-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.79rem;
}

.tankkarten-search {
  min-width: 0;
  flex: 0 0 auto;
  margin-left: 0.25rem;
}

.tankkarten-customer-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tankkarten-customer-wrap input {
  flex: 1;
  max-width: 200px;
}

.tankkarten-search input,
.tankkarten-toolbar select {
  min-height: 2rem;
}

.tankkarten-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.tankkarten-summary {
  font-size: 0.79rem;
  margin: 0.15rem 0 0.45rem;
}

.tankkarten-selected-customer {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.79rem;
}

.tankkarten-local-filter {
  padding-left: 0.35rem;
  margin: 0.1rem 0 0.35rem;
}

.tankkarten-local-filter label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.79rem;
}

.tankkarten-local-filter-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tankkarten-local-filter-wrap input {
  max-width: 260px;
  min-height: 2rem;
}

.tankkarten-loading {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 0.2rem 0 0.55rem;
}

.tankkarten-loading-bar {
  width: 36%;
  height: 100%;
  background: linear-gradient(90deg, #2f74ff, #73a4ff);
  animation: tankkarten-loading 900ms linear infinite;
}

@keyframes tankkarten-loading {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.tankkarten-table-wrap {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  overflow: auto;
}

.tankkarten-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: fixed;
}

.tankkarten-table th,
.tankkarten-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0.45rem;
  vertical-align: top;
}

.tankkarten-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #202a38;
  text-align: left;
}

.tankkarten-table th:nth-child(1),
.tankkarten-table td:nth-child(1) {
  width: 6.5rem;
}

.tankkarten-table th:nth-child(3),
.tankkarten-table td:nth-child(3) {
  width: 9rem;
}

.tankkarten-table th:nth-child(4),
.tankkarten-table td:nth-child(4) {
  width: 8rem;
}

.tankkarten-table th:nth-child(6),
.tankkarten-table td:nth-child(6) {
  width: 6.5rem;
}

.tankkarten-table td:nth-child(2),
.tankkarten-table td:nth-child(5) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tankkarten-row--free {
  background: #183123;
}

.tankkarten-row--blocked {
  background: #3a1f24;
}

/* Tankbestände */
.main-panel--tankstock {
  padding: 0.75rem 1rem 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
}

.tankstock-root {
  min-height: 12rem;
}

.tankstock-inner {
  padding: 0.25rem 0;
}

.tankstock-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.65rem;
}

.tankstock-toolbar .date-controls--tankstock-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tankstock-toolbar .filter-quick-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.tankstock-toolbar .filter-quick-btn {
  padding: 0.32rem 0.55rem;
  font-size: 0.82rem;
  min-height: 0;
}

.tankstock-toolbar .filter-quick-group--fuel .filter-quick-btn {
  min-width: 2.35rem;
  padding-left: 0.38rem;
  padding-right: 0.38rem;
}

.tankstock-toolbar .filter-quick-btn.is-active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

html[data-theme='light'] .tankstock-toolbar .btn.secondary.filter-quick-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

html[data-theme='light'] .tankstock-toolbar .btn.secondary.filter-quick-btn.is-active:hover {
  filter: brightness(0.95);
}

.tankstock-toolbar .tankstock-fill-quick-btn.is-active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

html[data-theme='light'] .tankstock-toolbar .btn.secondary.tankstock-fill-quick-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

html[data-theme='light'] .tankstock-toolbar .btn.secondary.tankstock-fill-quick-btn.is-active:hover {
  filter: brightness(0.95);
}

.tankstock-toolbar-label {
  font-size: 0.85rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tankstock-toolbar-select {
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  max-width: 18rem;
}

.modal-panel--adblue-lieferplan {
  width: min(1180px, calc(100% - 1.5rem));
  max-height: min(92vh, 920px);
  display: flex;
  flex-direction: column;
}

/* AdBlue: Schließen-Warnung (Overlay im #modal-root, kein stcModal) */
.ts-adb-unsaved-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.48);
}

.ts-adb-unsaved-panel {
  max-width: 28rem;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.ts-adb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.35rem 0 0.5rem;
}

.ts-adb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  font-size: 0.82rem;
}

.ts-adb-tb-field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 6.5rem;
}

.ts-adb-tb-field > span {
  font-size: 0.78rem;
  color: var(--muted);
}

.ts-adb-tb-inp {
  min-width: 8rem;
  max-width: 14rem;
  padding: 0.28rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.ts-adb-toolbar select {
  min-width: 7.5rem;
  padding: 0.28rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.ts-adb-print-pop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ts-adb-print-pop[hidden] {
  display: none !important;
}

.ts-adb-print-pop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.ts-adb-print-pop__box {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(90vh, 520px);
  overflow: auto;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.ts-adb-print-fields select,
.ts-adb-print-fields input[type='text'] {
  width: 100%;
  box-sizing: border-box;
}

.ts-adb-show-inactive {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  cursor: pointer;
  user-select: none;
}

.ts-adb-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0.25rem 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}

.ts-adb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ts-adb-table th,
.ts-adb-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.3rem 0.45rem;
  vertical-align: middle;
  text-align: left;
}

.ts-adb-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-weight: 600;
  white-space: nowrap;
}

.ts-adb-inp,
.ts-adb-interval-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.28rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
}

.ts-adb-menge {
  background: rgba(255, 210, 80, 0.18);
  min-width: 4.2rem;
}

html[data-theme="light"] .ts-adb-menge {
  background: rgba(255, 230, 120, 0.55);
}

.ts-adb-name--hl .ts-adb-inp {
  background: rgba(255, 210, 80, 0.2);
}

html[data-theme="light"] .ts-adb-name--hl .ts-adb-inp {
  background: rgba(255, 235, 140, 0.55);
}

.ts-adb-interval--blue .ts-adb-interval-select {
  color: #7ec4ff;
}

.ts-adb-interval--red .ts-adb-interval-select {
  color: #ff9a9a;
}

html[data-theme="light"] .ts-adb-interval--blue .ts-adb-interval-select {
  color: #1565c0;
}

html[data-theme="light"] .ts-adb-interval--red .ts-adb-interval-select {
  color: #c62828;
}

.ts-adb-row--inactive {
  opacity: 0.55;
}

.ts-adb-row--inactive .ts-adb-inp,
.ts-adb-row--inactive .ts-adb-interval-select {
  color: var(--muted);
}

.ts-adb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  white-space: nowrap;
}

.ts-adb-actions .btn-sm {
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
}

.tankstock-hint {
  font-size: 0.82rem;
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .tankstock-toolbar-mobile-hide {
    display: none !important;
  }
}

.tankstock-error {
  color: #ffb4bc;
  margin: 0;
}

.tankstock-empty {
  color: var(--muted);
  margin: 0;
}

.tankstock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.tankstock-card--summary {
  margin-bottom: 1rem;
  max-width: 100%;
}

.tankstock-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

.tankstock-summary-title {
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
}

.tankstock-summary-adblue-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

.tankstock-summary-empty {
  text-align: center;
  padding: 0.5rem 0.35rem;
}

.tankstock-summary-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tankstock-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.tankstock-summary-table th,
.tankstock-summary-table td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
  vertical-align: top;
}

.tankstock-summary-table thead th {
  background: var(--card);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.tankstock-summary-table thead th.tankstock-num {
  text-align: right;
}

.tankstock-summary-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.tankstock-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tankstock-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.75rem 0.85rem;
}

.tankstock-card-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.45rem;
}

.tankstock-card--summary .tankstock-summary-head .tankstock-summary-title {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.tankstock-tanks {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tankstock-tank {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: #141b24;
}

.tankstock-tank-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.45rem;
}

.tankstock-tank-title {
  font-weight: 600;
  font-size: 0.88rem;
}

.tankstock-tank-product {
  font-size: 0.78rem;
  color: var(--muted);
}

.tankstock-tank-body {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.tankstock-bars {
  display: flex;
  gap: 0.45rem;
  align-items: flex-end;
  flex-shrink: 0;
}

.tankstock-bar-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.tankstock-bar-col-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.58rem;
  line-height: 1.1;
  color: var(--muted);
  user-select: none;
}

.tankstock-bar {
  position: relative;
  height: 120px;
  width: 30px;
  background: #1e2630;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.tankstock-bar__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 2px;
  transition: height 0.35s ease;
  border-radius: 0 0 4px 4px;
}

.tankstock-bar__fill--high {
  background: linear-gradient(180deg, #6ecf8a 0%, #4a9d62 100%);
}

.tankstock-bar__fill--mid {
  background: linear-gradient(180deg, #e8d060 0%, #c9a227 100%);
}

.tankstock-bar__fill--low {
  background: linear-gradient(180deg, #f0a848 0%, #c45c3a 100%);
}

.tankstock-pct {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tankstock-dl {
  margin: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.65rem;
  font-size: 0.78rem;
}

.tankstock-dl div {
  min-width: 0;
}

.tankstock-dl dt {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tankstock-dl dd {
  margin: 0.1rem 0 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .tankstock-dl {
    grid-template-columns: 1fr;
  }
}

/* Hellmodus: offline / niedrig — langsam, dezent */
@keyframes tankstock-fs-offline-blink {
  0%,
  100% {
    background: rgba(185, 65, 125, 0.22);
    border-color: rgba(200, 90, 160, 0.55);
    box-shadow: inset 0 0 22px rgba(255, 110, 175, 0.14);
  }
  50% {
    background: rgba(255, 130, 200, 0.42);
    border-color: rgba(255, 170, 220, 0.82);
    box-shadow: inset 0 0 32px rgba(255, 160, 210, 0.32);
  }
}

/* Dunkel: offline (ohne Lowfill) — stärker leuchtend */
@keyframes tankstock-fs-offline-blink-dark {
  0%,
  100% {
    background: rgba(95, 28, 72, 0.55);
    border-color: rgba(255, 110, 185, 0.55);
    box-shadow:
      inset 0 0 26px rgba(255, 70, 150, 0.28),
      0 0 0 1px rgba(255, 100, 180, 0.35),
      0 0 20px rgba(255, 80, 160, 0.38);
  }
  50% {
    background: rgba(150, 45, 105, 0.72);
    border-color: rgba(255, 200, 240, 0.95);
    box-shadow:
      inset 0 0 42px rgba(255, 110, 200, 0.45),
      0 0 0 1px rgba(255, 180, 230, 0.85),
      0 0 32px rgba(255, 120, 200, 0.72),
      0 0 48px rgba(255, 70, 160, 0.45);
  }
}

@keyframes tankstock-fs-offline-lowfill-blink {
  0%,
  100% {
    background: rgba(145, 28, 40, 0.52);
    border-color: rgba(210, 75, 90, 0.75);
    box-shadow: inset 0 0 20px rgba(255, 100, 130, 0.18);
  }
  50% {
    background: rgba(200, 48, 72, 0.58);
    border-color: rgba(255, 150, 175, 0.88);
    box-shadow: inset 0 0 30px rgba(255, 130, 155, 0.32);
  }
}

@keyframes tankstock-fs-offline-lowfill-blink-dark {
  0%,
  100% {
    background: rgba(95, 18, 32, 0.78);
    border-color: rgba(255, 95, 115, 0.62);
    box-shadow:
      inset 0 0 28px rgba(255, 50, 75, 0.38),
      0 0 0 1px rgba(255, 90, 110, 0.5),
      0 0 22px rgba(255, 60, 85, 0.48);
  }
  50% {
    background: rgba(175, 32, 52, 0.92);
    border-color: rgba(255, 200, 210, 0.98);
    box-shadow:
      inset 0 0 40px rgba(255, 100, 125, 0.55),
      0 0 0 1px rgba(255, 170, 185, 0.95),
      0 0 38px rgba(255, 100, 120, 0.78),
      0 0 56px rgba(255, 60, 90, 0.48);
  }
}

@keyframes tankstock-fs-lowfill-only-pulse-light {
  0%,
  100% {
    background: rgba(175, 38, 48, 0.4);
    border-color: rgba(215, 85, 95, 0.72);
    box-shadow: inset 0 0 16px rgba(255, 100, 115, 0.14);
  }
  50% {
    background: rgba(200, 48, 55, 0.52);
    border-color: rgba(230, 100, 110, 0.88);
    box-shadow: inset 0 0 24px rgba(255, 120, 130, 0.26);
  }
}

@keyframes tankstock-fs-lowfill-only-pulse-dark {
  0%,
  100% {
    background: rgba(115, 22, 32, 0.72);
    border-color: rgba(255, 95, 108, 0.58);
    box-shadow:
      inset 0 0 24px rgba(255, 55, 75, 0.35),
      0 0 0 1px rgba(255, 85, 100, 0.45),
      0 0 20px rgba(255, 55, 80, 0.42);
  }
  50% {
    background: rgba(165, 32, 45, 0.9);
    border-color: rgba(255, 190, 198, 0.95);
    box-shadow:
      inset 0 0 36px rgba(255, 95, 115, 0.48),
      0 0 0 1px rgba(255, 160, 175, 0.9),
      0 0 34px rgba(255, 95, 115, 0.72),
      0 0 50px rgba(255, 50, 75, 0.42);
  }
}

body.tankstock-fs-open {
  overflow: hidden;
}

.tankstock-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--bg, #0c1016);
  color: var(--text);
  box-sizing: border-box;
}

.tankstock-fs-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.tankstock-fs-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1 1 12rem;
  min-width: 0;
}

.tankstock-fs-topactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.tankstock-fs-overlay .btn--fs-active {
  box-shadow: 0 0 0 2px rgba(120, 180, 255, 0.45);
}

.tankstock-fs-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.tankstock-fs-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.tankstock-fs-footer {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.55rem 0.5rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tankstock-fs-preise-inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.tankstock-fs-preise-h {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  flex-shrink: 0;
}

.tankstock-fs-preise-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* Ansicht „Tank 37–…“: mehr Höhe für Tankstellenpreise, letzte Tabellenzeile per Scroll erreichbar */
.tankstock-fs-overlay--with-preise .tankstock-fs-scroll {
  flex: 0 1 auto;
  max-height: min(38vh, 46dvh);
  min-height: 0;
  overflow: auto;
}

.tankstock-fs-overlay--with-preise .tankstock-fs-footer {
  flex: 1 1 auto;
  min-height: min(52vh, 58dvh);
  max-height: none;
  overflow: hidden;
}

.tankstock-fs-overlay--with-preise .tankstock-fs-preise-scroll {
  max-height: none;
  min-height: 12rem;
}

.tankstock-fs-preise-table {
  font-size: 0.78rem;
}

.tankstock-fs-preise-loading {
  margin: 0.25rem 0;
}

.tankstock-fs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 0.4rem 0.45rem;
  padding: 0.45rem 0.55rem 0.65rem;
  align-content: start;
  box-sizing: border-box;
}

.tankstock-fs-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.32rem 0.4rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  --tankstock-fs-warn-blink-period: 4s;
}

.tankstock-fs-card--offline:not(.tankstock-fs-card--lowfill) {
  animation: tankstock-fs-offline-blink var(--tankstock-fs-warn-blink-period, 4s) linear infinite;
}

html:not([data-theme="light"]) .tankstock-fs-card--offline:not(.tankstock-fs-card--lowfill) {
  animation-name: tankstock-fs-offline-blink-dark;
}

.tankstock-fs-card--offline.tankstock-fs-card--lowfill {
  animation: tankstock-fs-offline-lowfill-blink var(--tankstock-fs-warn-blink-period, 4s) linear infinite;
}

html:not([data-theme="light"]) .tankstock-fs-card--offline.tankstock-fs-card--lowfill {
  animation-name: tankstock-fs-offline-lowfill-blink-dark;
}

.tankstock-fs-card--lowfill:not(.tankstock-fs-card--offline) {
  animation: tankstock-fs-lowfill-only-pulse-light var(--tankstock-fs-warn-blink-period, 4s) linear infinite;
}

html:not([data-theme="light"]) .tankstock-fs-card--lowfill:not(.tankstock-fs-card--offline) {
  animation-name: tankstock-fs-lowfill-only-pulse-dark;
}

.tankstock-fs-card-hd {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.28rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tankstock-fs-card-st {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

.tankstock-fs-card-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.64rem;
  line-height: 1.25;
}

.tankstock-fs-card-stand-lbl {
  flex: 0 0 auto;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.58rem;
}

.tankstock-fs-card-stand-val {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.tankstock-fs-card-body {
  flex: 1;
  min-height: 0;
}

.tankstock-tank--fs {
  padding: 0.3rem 0.28rem;
  border-radius: 8px;
}

.tankstock-tank--fs .tankstock-tank-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  margin-bottom: 0.28rem;
}

.tankstock-tank--fs .tankstock-tank-title {
  font-size: 0.72rem;
}

.tankstock-tank--fs .tankstock-tank-product {
  font-size: 0.64rem;
  text-align: left;
}

.tankstock-tank--fs .tankstock-tank-body {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.tankstock-tank--fs .tankstock-bars {
  align-self: center;
  gap: 0.35rem;
}

.tankstock-tank--fs .tankstock-bar-col {
  flex-direction: row;
  flex-shrink: 0;
  gap: 0.14rem;
}

.tankstock-tank--fs .tankstock-bar-col-label {
  font-size: 0.5rem;
}

.tankstock-tank--fs .tankstock-bar {
  height: 92px;
  width: 24px;
}

.tankstock-tank--fs .tankstock-pct {
  font-size: 0.62rem;
}

.tankstock-tank--fs .tankstock-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.18rem 0;
  width: 100%;
  font-size: 0.62rem;
}

.tankstock-tank--fs .tankstock-dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.35rem;
  column-gap: 0.35rem;
  min-width: 0;
}

.tankstock-tank--fs .tankstock-dl dt {
  font-size: 0.54rem;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.tankstock-tank--fs .tankstock-dl dd {
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tankstock-fs-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.25rem 0.5rem;
  margin: 0;
}

/* Mengenkontrolle (gleicher Seitenrand wie Tankbestände) */
.main-panel--mengenkontrolle {
  padding: 0.75rem 1rem 1.25rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.mengenkontrolle-root {
  min-height: 8rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mengenkontrolle-inner {
  padding: 0.25rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mengenkontrolle-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.65rem;
}

.mengenkontrolle-toolbar--date {
  align-items: center;
  padding-left: 0.75rem;
}

.mengenkontrolle-toolbar--diff .mk-diff,
.mengenkontrolle-toolbar--diff .mk-minabs-preset {
  margin-right: 0.15rem;
}

.mengenkontrolle-toolbar-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-right: 0.15rem;
}

.mengenkontrolle-select {
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  max-width: 20rem;
}

.mengenkontrolle-numinput {
  width: 6.5rem;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
}

.mengenkontrolle-numinput--active {
  background: rgba(234, 179, 8, 0.28);
  border-color: #ca8a04;
}

html[data-theme='light'] .mengenkontrolle-numinput--active {
  background: rgba(253, 224, 71, 0.5);
  border-color: #a16207;
}

.mengenkontrolle-tag-weekday {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  min-width: 1.75rem;
}

.mengenkontrolle-toolbar-label--selectonly {
  margin: 0;
}

.mengenkontrolle-inner .filter-quick-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.mengenkontrolle-inner .filter-quick-btn {
  padding: 0.32rem 0.5rem;
  font-size: 0.8rem;
  min-height: 0;
}

.mengenkontrolle-inner .filter-quick-group--fuel .filter-quick-btn {
  min-width: 2.2rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.mengenkontrolle-inner .filter-quick-btn.is-active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

html[data-theme='light'] .mengenkontrolle-inner .btn.secondary.filter-quick-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.mengenkontrolle-tagline {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
}

.mengenkontrolle-card-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.mengenkontrolle-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mengenkontrolle-card-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  flex-shrink: 0;
}

.mengenkontrolle-card .mengenkontrolle-table-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* Spaltenbreiten: Überschriften und Zellen bündig */
.mengenkontrolle-table--card {
  font-size: 0.78rem;
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}

.mengenkontrolle-table--card col.mk-col-prod {
  width: 16%;
}

.mengenkontrolle-table--card col.mk-col-num {
  width: 9.5%;
}

.mengenkontrolle-table--card col.mk-col-act {
  width: 11%;
}

.mengenkontrolle-th-prod,
.mengenkontrolle-td-prod {
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.mengenkontrolle-korr-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mengenkontrolle-korr--abgang .mengenkontrolle-korr-input--filled {
  color: #f07078;
  border-color: rgba(240, 112, 120, 0.55);
  font-weight: 600;
}

.mengenkontrolle-korr--zugang .mengenkontrolle-korr-input--filled {
  color: #9ed88b;
  border-color: rgba(158, 216, 139, 0.45);
  font-weight: 600;
}

.mengenkontrolle-table td.mengenkontrolle-korr {
  text-align: right;
  vertical-align: middle;
}

.mengenkontrolle-korr-th {
  min-width: 0;
}

.mengenkontrolle-korr-act {
  vertical-align: middle;
  white-space: nowrap;
  text-align: right;
}

.mk-korr-meta {
  font-size: 0.65rem;
  margin-top: 0.35rem;
  line-height: 1.25;
  max-width: none;
  text-align: right;
}

.mengenkontrolle-num--calc {
  background: rgba(255, 255, 255, 0.02);
}

.mengenkontrolle-toolbar-label {
  font-size: 0.85rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.mengenkontrolle-date {
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
}

.mengenkontrolle-hint {
  font-size: 0.78rem;
  flex: 1 1 12rem;
  line-height: 1.35;
}

.mengenkontrolle-error {
  color: #ffb4bc;
  margin: 0;
}

.mengenkontrolle-days {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mengenkontrolle-day-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.mengenkontrolle-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.mengenkontrolle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.mengenkontrolle-table th,
.mengenkontrolle-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
  vertical-align: top;
}

.mengenkontrolle-table thead th {
  background: var(--card);
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
}

.mengenkontrolle-table .mengenkontrolle-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mengenkontrolle-table .mengenkontrolle-num br {
  line-height: 1.35;
}

.mengenkontrolle-diff--pos {
  color: #7dffb2;
}

.mengenkontrolle-diff--neg {
  color: #ffb4bc;
}

.mk-prod-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.mk-prod-cell--lager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
}

.mk-prod-cell--lager .mk-prod-name {
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
}

.mk-stock-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.mk-lager-btn {
  margin-right: 0.35rem;
  background: #21b5bc;
  border-color: #1aa0a8;
  color: #fff;
}

.mk-lager-btn:hover,
.mk-lager-btn:focus-visible {
  background: #1dbec6;
  border-color: #1899a1;
  color: #fff;
}

.mk-t24-btn {
  background: #c45c12;
  border-color: #a64d0f;
  color: #fff;
}

.mk-t24-btn:hover,
.mk-t24-btn:focus-visible {
  background: #d66818;
  border-color: #8f420c;
  color: #fff;
}

.mk-lager-modal-panel.modal-panel {
  width: min(640px, calc(100% - 2rem));
  max-height: min(90vh, 800px);
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* T24-Mengen-Dialog: gleiche Breite wie Lager-Modal, halbe Panelhöhe */
.mk-lager-modal-panel.modal-panel.mk-t24-modal-panel {
  max-height: min(45vh, 400px);
  height: 45vh;
}

.mk-t24-station-head {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.mk-menge-save-confirm-panel.modal-panel {
  width: min(320px, calc(100% - 2rem));
  max-height: 180px;
  min-height: 150px;
  padding: 0.75rem 0.85rem;
}

.mk-menge-save-confirm-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.mk-menge-save-confirm-msg {
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
}

.mk-lager-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mk-lager-modal-table,
.mk-lager-adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.mk-lager-modal-table th,
.mk-lager-modal-table td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
  text-align: left;
  color: #1e1e1e;
}

.mk-lager-adm-table th,
.mk-lager-adm-table td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
  text-align: left;
  color: var(--text);
}

/* Admin: Lager/T24-Modals im #modal-root – Lesetext und Eingaben folgen dem Theme */
#modal-root .mk-lager-admin-modal,
#modal-root .mk-lager-admin-modal h2 {
  color: var(--text);
}

#modal-root .mk-lager-admin-modal .muted {
  color: var(--muted);
}

#modal-root .mk-lager-admin-modal .inp,
#modal-root .mk-lager-admin-modal select.inp,
#modal-root .mk-lager-admin-modal input.inp {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.45rem;
  font: inherit;
}

#modal-root .mk-lager-admin-modal .mk-t24-station-block {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

#modal-root .mk-lager-admin-modal .mk-t24-station-block h3 {
  margin: 0 0 0.5rem;
  font-size: 0.98rem;
  color: var(--text);
}

.mk-lager-modal-table .mk-lager-section td {
  background: rgba(127, 127, 127, 0.08);
  font-size: 0.8rem;
}

.mk-lager-modal-table tbody.mk-lager-block--zugang {
  background: #dff6df;
  color: #1e1e1e;
}

.mk-lager-modal-table tbody.mk-lager-block--abgang {
  background: #fde8e8;
  color: #1e1e1e;
}

.mk-lager-modal-table tbody.mk-lager-block--zugang .mk-lager-section td {
  background: rgba(255, 255, 255, 0.35);
}

.mk-lager-modal-table tbody.mk-lager-block--abgang .mk-lager-section td {
  background: rgba(255, 255, 255, 0.35);
}

.mk-lager-sum-row td {
  font-weight: 700;
  border-top: 2px solid rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.55) !important;
}

.mk-lager-sum-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #1e1e1e;
}

.mk-lager-inp--zug {
  color: #0d4f1c;
  font-weight: 600;
  background: #c8edc8 !important;
  border-color: rgba(13, 79, 28, 0.45) !important;
}

.mk-lager-inp--abg {
  color: #7a0f14;
  font-weight: 600;
  background: #f5c4c6 !important;
  border-color: rgba(122, 15, 20, 0.45) !important;
}

.mk-lager-td-kind {
  white-space: nowrap;
  width: 5.5rem;
}

.mengenkontrolle-empty-day {
  margin: 0;
  font-size: 0.85rem;
}

/* Prüftermine TKST (Karten je Tankstelle) */
.main-panel--prueftermine {
  padding: 0.75rem 1rem 1.25rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.prueftermine-root {
  min-height: 8rem;
}

.prueftermine-inner {
  max-width: 100%;
}

.prueftermine-intro {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
}

.prueftermine-ro-hint {
  margin: 0 0 0.5rem;
}

.prueftermine-toolbar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.prueftermine-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.65rem;
}

.prueftermine-toolbar-row--filters {
  width: 100%;
}

.prueftermine-toolbar-sel--sort-field {
  max-width: 220px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.prueftermine-toolbar-sel--sort-dir {
  max-width: 90px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.prueftermine-toolbar-sel--station {
  max-width: min(22rem, 100%);
  min-width: 10rem;
  flex: 1 1 12rem;
  box-sizing: border-box;
}

.prueftermine-toolbar-sel--year-print {
  max-width: 12rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.prueftermine-year-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

.prueftermine-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: min(100%, 12rem);
  flex: 1 1 10rem;
}

.prueftermine-toolbar-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.prueftermine-toolbar-inp {
  max-width: none;
  min-width: 0;
}

.prueftermine-toolbar-sel {
  max-width: none;
  min-width: 0;
}

.prueftermine-cards {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.prueftermine-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  padding: 0.55rem 0.65rem 0.7rem;
  box-sizing: border-box;
  width: 100%;
}

/* Kartenton wie Header-Pille: Eichung orange, TÜV / Feuerlöscher / MM-JJ türkis */
.prueftermine-card--due-eich {
  background: rgba(255, 130, 40, 0.14);
  border-color: rgba(255, 170, 80, 0.48);
}

.prueftermine-card--due-tuv {
  background: rgba(25, 165, 175, 0.12);
  border-color: rgba(70, 195, 205, 0.45);
}

.prueftermine-card--due-eich-tuv {
  background: linear-gradient(
    125deg,
    rgba(255, 130, 40, 0.16) 0%,
    rgba(25, 165, 175, 0.12) 72%
  );
  border-color: rgba(120, 190, 200, 0.5);
}

.prueftermine-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.prueftermine-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.prueftermine-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.45rem 0.65rem;
  align-items: start;
}

@media (max-width: 520px) {
  .prueftermine-card-grid {
    grid-template-columns: 1fr;
  }
}

.prueftermine-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  min-width: 0;
}

.prueftermine-field--full {
  grid-column: 1 / -1;
}

.prueftermine-field--stoerung-sel select.prueftermine-inp {
  max-width: 300px;
  width: 100%;
}

/* Prüftermine: Dialog „Anzeige bis“ für Störungsmeldung (über der Karte) */
.prf-stoerung-bis-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
}

.prf-stoerung-bis-panel {
  max-width: 26rem;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.prueftermine-field--dtpair .prueftermine-dt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  width: 100%;
}

@media (max-width: 520px) {
  .prueftermine-field--dtpair .prueftermine-dt-row {
    grid-template-columns: 1fr;
  }
}

.admin-stoerung-list .admin-stoerung-row {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.admin-stoerung-list .admin-stoerung-ta {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.prf-term-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.prf-term-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.prf-term-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
}

@media (max-width: 520px) {
  .prf-term-modal-grid {
    grid-template-columns: 1fr;
  }
}

.prf-term-fs {
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.prf-term-fs legend {
  padding: 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.prf-term-hm {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.prf-term-hm .prf-term-lab {
  flex: 1;
  min-width: 0;
}

.prf-term-hm input[type='number'] {
  width: 100%;
}

.prf-term-err {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  color: #f87171;
}

.modal-panel--prf-term {
  width: min(480px, calc(100% - 2rem));
  max-width: min(480px, calc(100% - 2rem));
}

.prueftermine-field--check .prueftermine-check-wrap {
  min-height: 2rem;
  display: flex;
  align-items: center;
}

.prueftermine-field--hervorhebung-dis {
  display: none !important;
}

.prueftermine-field-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.prueftermine-inp {
  width: 100%;
  min-width: 0;
  max-width: 180px;
  box-sizing: border-box;
  padding: 0.28rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
}

.prueftermine-inp-date {
  max-width: 100%;
}

.prueftermine-ta {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  resize: vertical;
}

.prueftermine-check-label {
  margin: 0;
  font-size: 0.78rem;
}

.prueftermine-empty {
  margin: 0.5rem 0 0;
}

.prueftermine-field--due-yellow .prueftermine-inp,
.prueftermine-field--due-yellow .prueftermine-ta {
  border-color: rgba(220, 180, 50, 0.95);
  box-shadow: 0 0 0 1px rgba(220, 180, 50, 0.45);
}

/* Jahresfilter: Treffer wie „Fällig“-Gelb (ohne Puls) */
.prueftermine-field--year-filter-hit .prueftermine-inp,
.prueftermine-field--year-filter-hit .prueftermine-ta {
  border-color: rgba(220, 180, 50, 0.95);
  box-shadow: 0 0 0 1px rgba(220, 180, 50, 0.45);
}

.prueftermine-field.prf-term-wrap.prueftermine-field--year-filter-hit {
  border: 1px solid rgba(220, 180, 50, 0.82);
  border-radius: 8px;
  padding: 0.35rem 0.45rem 0.45rem;
  background: rgba(220, 180, 50, 0.1);
  box-sizing: border-box;
}

html[data-theme='light'] .prueftermine-field--year-filter-hit .prueftermine-inp,
html[data-theme='light'] .prueftermine-field--year-filter-hit .prueftermine-ta {
  border-color: #ca8a04;
  box-shadow: 0 0 0 1px rgba(202, 138, 4, 0.35);
}

html[data-theme='light'] .prueftermine-field.prf-term-wrap.prueftermine-field--year-filter-hit {
  border-color: rgba(202, 138, 4, 0.65);
  background: rgba(253, 224, 71, 0.22);
}

.prueftermine-field--due-red .prueftermine-inp,
.prueftermine-field--due-red .prueftermine-ta {
  animation: prueftermine-due-red-pulse 1.05s ease-in-out infinite;
}

@keyframes prueftermine-due-red-pulse {
  0%,
  100% {
    border-color: rgba(230, 70, 70, 0.85);
    box-shadow: 0 0 0 1px rgba(230, 70, 70, 0.35);
  }
  50% {
    border-color: rgba(255, 120, 120, 1);
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prueftermine-field--due-red .prueftermine-inp,
  .prueftermine-field--due-red .prueftermine-ta {
    animation: none;
    border-color: rgba(230, 90, 90, 0.9);
  }
}

html[data-theme="light"] .prueftermine-card--due-eich {
  background: rgba(255, 150, 60, 0.2);
  border-color: rgba(200, 100, 30, 0.45);
}

html[data-theme="light"] .prueftermine-card--due-tuv {
  background: rgba(40, 175, 185, 0.16);
  border-color: rgba(30, 130, 140, 0.42);
}

html[data-theme="light"] .prueftermine-card--due-eich-tuv {
  background: linear-gradient(
    125deg,
    rgba(255, 150, 60, 0.22) 0%,
    rgba(40, 175, 185, 0.14) 72%
  );
  border-color: rgba(90, 150, 160, 0.48);
}

/* Eigenes Fenster/Tab: tankstock-monitor.php */
.stc-tankstock-monitor-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg, #0c1016);
  color: var(--text);
}

.stc-tankstock-monitor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.stc-tankstock-monitor-head-spacer {
  flex: 1 1 4rem;
  min-width: 0;
}

/* Eigenes Tab: tankstock-board.php (kein Overlay) */
.tankstock-board-page-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg, #0c1016);
  color: var(--text);
}

/* Funktionswünsche (feature-wunschliste.js) */
.fw-votes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.fw-vote-scoreline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  white-space: nowrap;
}

.fw-vote-scoresep {
  opacity: 0.55;
  user-select: none;
}

.fw-vote-btns {
  display: flex;
  gap: 0.35rem;
}

.fw-vote-btn {
  min-width: 2.4rem;
  font-size: 1.08rem;
  line-height: 1.15;
  padding: 0.28rem 0.45rem;
}

.fw-vote-btn[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Tagespreise Favoriten */
.tagespreise-fav-btn {
  padding: 0.28rem 0.45rem;
  line-height: 1;
  min-width: 2.25rem;
}

.tagespreise-fav-btn .tagespreise-fav-icon {
  display: inline-flex;
  vertical-align: middle;
}

.tagespreise-fav-btn--has-favorites .tagespreise-fav-icon--outline {
  display: none;
}

.tagespreise-fav-btn--has-favorites .tagespreise-fav-icon--fill {
  display: inline-flex !important;
}

.modal-panel--tp-favorites {
  max-width: min(52rem, 96vw);
  max-height: min(85vh, 900px);
  display: flex;
  flex-direction: column;
}

.tp-fav-table-wrap {
  overflow: auto;
  flex: 1;
  min-height: 0;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

html[data-theme="light"] .tp-fav-table-wrap {
  border-color: rgba(0, 0, 0, 0.1);
}

.tp-fav-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tp-fav-table th,
.tp-fav-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .tp-fav-table th,
html[data-theme="light"] .tp-fav-table td {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.tp-fav-row-sup td {
  font-weight: 600;
}

.tp-fav-sup-td {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.tp-fav-sup-head {
  flex: 1;
  min-width: 0;
}

.tp-fav-sup-sub {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.82rem;
  font-weight: normal;
  line-height: 1.25;
}

.tp-fav-indent {
  width: 1.25rem;
}

.tp-fav-prod-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-weight: normal;
}

.tp-fav-actions {
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tp-fav-user-tools {
  margin-bottom: 0.65rem;
}

.tp-fav-sup-tbody {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

html[data-theme='light'] .tp-fav-sup-tbody {
  border-top-color: rgba(0, 0, 0, 0.09);
}

.tp-fav-sup-tbody:first-of-type {
  border-top: none;
}

.tp-fav-move-btns {
  display: inline-flex;
  flex-direction: column;
  gap: 0.18rem;
  margin-left: 0.35rem;
  flex-shrink: 0;
  align-self: center;
}

.tp-fav-move-btns .btn-sm {
  padding: 0.1rem 0.25rem;
  font-size: 0.72rem;
  line-height: 1;
  min-width: 1.65rem;
}

/* mala Oil – Kundenstammdaten */
.mala-kunden-root {
  min-height: 0;
  flex: 1;
  overflow: visible;
}

.app-mala-oil .main-panel--mala-kunden {
  overflow: visible;
  position: relative;
}

.app-mala-oil .mala-spa-content > main.main-panel--mala-kunden {
  overflow-x: hidden;
  overflow-y: auto;
}

.app-mala-oil .main-panel--mala-artikel {
  overflow: visible;
  position: relative;
}

.app-mala-oil .mala-spa-content > main.main-panel--mala-artikel {
  overflow-x: hidden;
  overflow-y: auto;
}

.mala-artikel-refbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.mala-artikel-refbar__sum {
  flex: 1 1 12rem;
  min-width: 0;
}

.mala-artikel-ref-out {
  flex: 1 1 100%;
}

.mala-artikel-date {
  max-width: 11rem;
}

.mala-artikel-subh {
  margin: 1rem 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.mala-artikel-lf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.mala-artikel-lf-table th,
.mala-artikel-lf-table td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
  vertical-align: middle;
}

.mala-artikel-lf-table th {
  text-align: left;
  background: var(--card);
}

.mala-artikel-lf-table select,
.mala-artikel-lf-table input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mala-artikel-pdf-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.mala-artikel-pdf-li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}

.mala-artikel-pdf-up {
  margin: 0.25rem 0 0.5rem;
}

.mala-artikel-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 0.5rem;
}

.mala-artikel-hist-table th,
.mala-artikel-hist-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.4rem;
  text-align: left;
}

.mala-artikel-cb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mala-artikel .mala-kunden-panel .mala-kunden-adresse-stack {
  gap: 0.85rem;
}

.modal-panel.mala-artikel-ref-modal-panel {
  width: min(880px, calc(100% - 2rem));
  min-height: 745px;
  max-height: min(92vh, 920px);
  display: flex;
  flex-direction: column;
}

.mala-artikel-ref-modal-panel .mala-kunden-adresse-stack {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.mala-kunden {
  padding: 0.35rem 0.5rem 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.mala-kunden-keybar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.65rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.mala-kunden-keybar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: flex-end;
}

.mala-kunden-keybar-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1.25rem;
  flex: 1 1 280px;
  min-width: 0;
}

.mala-kunden-keybar-fields .mala-kunden-field--sm {
  flex: 0 1 140px;
}

.mala-kunden-keybar-fields .mala-kunden-field--typ {
  flex: 1 1 200px;
  min-width: min(100%, 200px);
}

.mala-kunden-modus {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.mala-kunden-kopf {
  flex: 1 1 200px;
  font-size: 0.82rem;
}

.mala-kunden-keybar-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mala-kunden-typ {
  font-size: 0.85rem;
}

.mala-kunden-searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
  align-items: center;
}

.mala-kunden-search {
  flex: 1 1 200px;
  min-width: 180px;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
}

.mala-kunden-pick-modal__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.mala-kunden-pick-modal__lead {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
}

.mala-kunden-pick-modal__actions {
  margin-top: 0.75rem;
}

.mala-kunden-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding-right: 0.15rem;
}

.mala-kunden-pick-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.mala-kunden-pick-item:hover {
  border-color: rgba(100, 180, 255, 0.75);
  background: var(--card);
}

.mala-kunden-pick-item.is-key-active {
  border-color: rgba(100, 180, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(100, 180, 255, 0.35);
  background: var(--card);
}

.mala-kunden-pick-item__knr {
  font-weight: 700;
  font-size: 0.88rem;
}

.mala-kunden-pick-item__firma {
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.35;
}

.mala-kunden-pick-item__zusatz {
  font-size: 0.8rem;
  line-height: 1.35;
}

.mala-kunden-pick-item__title {
  font-weight: 600;
  font-size: 0.92rem;
}

.mala-kunden-pick-item__meta {
  font-size: 0.8rem;
}

.mala-kunden-pick-item__addr {
  font-size: 0.82rem;
  line-height: 1.35;
}

.mala-kunden-pick-item__hint {
  font-size: 0.76rem;
  font-style: italic;
}

.mala-kunden-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.65rem;
  position: sticky;
  top: 4.55rem;
  z-index: 19;
  background: var(--bg);
  padding: 0.15rem 0;
}

.mala-kunden-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-weight: 500;
}

.mala-kunden-tab:hover {
  border-color: rgba(100, 180, 255, 0.6);
}

.mala-kunden-tab--active {
  background: var(--card);
  border-color: rgba(100, 180, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(100, 180, 255, 0.25);
}

.mala-bestellung-tab--warn.mala-kunden-tab--active,
.mala-bestellung-tab--warn {
  border-color: rgba(220, 80, 80, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(220, 80, 80, 0.28);
  background: rgba(220, 80, 80, 0.12);
}

.mala-kunden-pick-item--gesperrt {
  border-color: rgba(220, 80, 80, 0.55);
  background: rgba(220, 80, 80, 0.08);
}

.mala-bestellung-gesperrt-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(220, 80, 80, 0.2);
  color: var(--text);
}

.mala-bestellung-banner-warn {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(220, 80, 80, 0.55);
  background: rgba(220, 80, 80, 0.1);
}

.mala-bestellung-footer-totals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
  gap: 0.55rem 1.2rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.88rem;
  align-items: center;
}

.mala-bestellung-footer-totals > div {
  white-space: nowrap;
}

.mala-bestellung-footer-totals__sum {
  font-weight: 600;
}

.mala-bestellung-footer-totals__grand {
  font-size: 0.96rem;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .mala-bestellung-footer-totals {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.mala-bestellung-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.mala-bestellung-list-table th,
.mala-bestellung-list-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
  text-align: left;
}

.mala-bestellung-subh {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.95rem;
}

.mala-bestellung-preis-ul {
  margin: 0.25rem 0 0.5rem 1.1rem;
  padding: 0;
}

.mb-ek-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.mb-ek-row input {
  flex: 1 1 auto;
}

.mala-bestellung-warn-box {
  margin-top: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(220, 160, 60, 0.65);
  background: rgba(220, 160, 60, 0.12);
}

.mala-bestellung-address-box {
  margin-top: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.86rem;
}

.mala-ls-board {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mala-ls-board__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.mala-ls-board__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mala-ls-filter-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.mala-ls-filter-btn:hover {
  border-color: var(--accent);
}

.mala-ls-filter-btn--active {
  background: rgba(61, 139, 253, 0.18);
  border-color: var(--accent);
  color: var(--text);
}

.mala-ls-filter-btn__count {
  opacity: 0.75;
  margin-left: 0.2rem;
}

.mala-ls-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}

.mala-ls-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.mala-ls-section__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.mala-ls-table-wrap {
  overflow-x: auto;
}

.mala-ls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.mala-ls-table th,
.mala-ls-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.mala-ls-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.12);
}

html[data-theme='light'] .mala-ls-table th {
  background: rgba(0, 0, 0, 0.04);
}

.mala-ls-table tbody tr:last-child td {
  border-bottom: none;
}

.mala-ls-table tbody tr:hover {
  background: rgba(61, 139, 253, 0.06);
}

.mala-ls-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mala-ls-badge--offen {
  background: rgba(227, 93, 106, 0.18);
  color: #f3a0a8;
}

html[data-theme='light'] .mala-ls-badge--offen {
  color: #8b1d2e;
}

.mala-ls-badge--erledigt {
  background: rgba(62, 207, 142, 0.18);
  color: #7ddeb0;
}

html[data-theme='light'] .mala-ls-badge--erledigt {
  color: #0d6b40;
}

.mala-ls-badge--teillieferung {
  background: rgba(220, 160, 60, 0.2);
  color: #e8c878;
}

html[data-theme='light'] .mala-ls-badge--teillieferung {
  color: #7a5200;
}

.mala-ls-badge--warte_lkw,
.mala-ls-badge--warte_auslieferung {
  background: rgba(255, 193, 7, 0.22);
  color: #ffc107;
}
.mala-ls-badge--menge_freigegeben,
.mala-ls-badge--rechnung_freigegeben {
  background: rgba(33, 150, 243, 0.2);
  color: #64b5f6;
}
.mala-ls-badge--rechnung_erstellt,
.mala-ls-badge--abgeschlossen {
  background: rgba(76, 175, 80, 0.22);
  color: #81c784;
}
.mala-ls-badge--ohne_lkw {
  background: rgba(154, 167, 181, 0.22);
  color: var(--muted);
}

.mala-ls-empty {
  padding: 0.85rem 0.75rem;
  margin: 0;
  font-size: 0.86rem;
}

.mala-ls-alert {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  background: rgba(227, 93, 106, 0.12);
  color: #f3a0a8;
  font-size: 0.86rem;
}

html[data-theme='light'] .mala-ls-alert {
  color: #8b1d2e;
}

.mala-ls-menge-input {
  width: 6.5rem;
  max-width: 100%;
  text-align: right;
}

.mala-ls-num {
  text-align: right;
  white-space: nowrap;
}

.mala-ls-num--lkw {
  font-weight: 600;
  color: var(--accent, #3d8bfd);
}

.mala-ls-mengen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.mala-bestellung-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.mala-bestellung-list-toolbar .mala-kunden-search {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.mala-bestellung-list-wrap {
  overflow: auto;
  max-height: min(70vh, 42rem);
}

.mala-bestellung-list-table--rich th,
.mala-bestellung-list-table--rich td {
  font-size: 0.82rem;
  padding: 0.4rem 0.55rem;
  white-space: nowrap;
}

.mala-bestellung-list-table--rich td:nth-child(3) {
  white-space: normal;
  min-width: 8rem;
}

.mala-bestellung-list-row--active {
  background: rgba(61, 139, 253, 0.12);
}

.mala-bestellung-list-row {
  cursor: pointer;
}

.mala-bestellung-list-row:hover {
  background: rgba(61, 139, 253, 0.06);
}

.mb-pos-lkw-block {
  margin-top: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
}

html[data-theme='light'] .mb-pos-lkw-block {
  background: rgba(0, 0, 0, 0.03);
}

.mb-pos-lkw-block--ok {
  border-color: rgba(62, 207, 142, 0.45);
}

.mb-pos-lkw-title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.mb-pos-lkw-docs {
  margin: 0 0 0.65rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.mb-pos-lkw-confirm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
}

.mb-pos-lkw-bestaetigt-von,
.mb-ls-menge-bestaetigt-von {
  font-size: 0.82rem;
  line-height: 1.35;
  white-space: nowrap;
}

.mb-ls-menge-bestaetigt-von {
  margin-top: 0.25rem;
  white-space: normal;
}

.modal-panel--rechnung-pdf {
  width: 80vw;
  max-width: 80vw;
  height: 95vh;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.mr-pdf-modal__head {
  padding: 1rem 1.25rem 0.5rem;
  flex-shrink: 0;
}

.mr-pdf-modal__title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}

.mr-pdf-modal__hint {
  margin: 0;
  font-size: 0.85rem;
}

.mr-pdf-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 1.25rem;
}

.mr-pdf-modal__iframe {
  width: 100%;
  height: calc(95vh - 10.5rem);
  min-height: 320px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.mr-pdf-modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem 1rem;
  flex-shrink: 0;
}

.mr-pdf-modal__footer--sticky {
  position: sticky;
  bottom: 0;
  background: var(--modal-panel-bg, #1a1a1a);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 2;
}

html[data-theme='light'] .mr-pdf-modal__footer--sticky {
  background: #fff;
  border-top-color: #ddd;
}

.mr-email-modal .mala-kunden-field {
  margin-top: 0.5rem;
}

.mala-ls-modal-warn {
  color: #f3a0a8;
  border-left: 3px solid #e35d6a;
  padding-left: 0.65rem;
}

html[data-theme='light'] .mala-ls-modal-warn {
  color: #8b1d2e;
}

.mala-ls-section--warn .mala-ls-section__title {
  color: #f3a0a8;
}

.mala-ls-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mala-lieferfz-cards-wrap {
  max-height: 55vh;
  overflow: auto;
  padding: 0.15rem 0.1rem 0.35rem;
}
.mala-lieferfz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 0.75rem;
}
.mala-lieferfz-card {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.mala-lieferfz-card input[type='radio'] {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  margin: 0;
}
.mala-lieferfz-card__inner {
  padding: 0.65rem 0.75rem 0.65rem 2rem;
  font-size: 0.82rem;
}
.mala-lieferfz-card--ein {
  background: rgba(40, 160, 90, 0.16);
  border-color: rgba(40, 160, 90, 0.42);
}
.mala-lieferfz-card--split {
  background: rgba(220, 175, 55, 0.2);
  border-color: rgba(190, 140, 45, 0.48);
}
.mala-lieferfz-card--bad {
  background: rgba(100, 100, 100, 0.08);
  border-color: var(--border);
}
.mala-lieferfz-card--tourenplanung {
  background: rgba(91, 127, 217, 0.12);
  border-color: rgba(91, 127, 217, 0.45);
}
.mala-lieferfz-card--disabled {
  cursor: not-allowed;
  opacity: 0.58;
  pointer-events: none;
}
.mala-lieferfz-card:has(input[type='radio']:checked) {
  box-shadow: 0 0 0 2px var(--mala-sidebar-active-accent, #c62828);
  border-color: rgba(198, 40, 40, 0.35);
}
.mala-lieferfz-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.mala-lieferfz-card__kz {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.mala-lieferfz-card__title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.12rem;
}
.mala-lieferfz-card__typ {
  font-size: 0.78rem;
  margin-bottom: 0.4rem;
}
.mala-lieferfz-card__detail {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.mala-lieferfz-card__detail .mono {
  font-family: ui-monospace, monospace;
  color: var(--text);
}
.mala-lieferfz-card__tours {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
  font-size: 0.84rem;
  color: var(--text);
}
.mala-lieferfz-legend {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 0.15rem;
  border: 1px solid var(--border);
}
.mala-lieferfz-legend--ein {
  background: rgba(40, 160, 90, 0.35);
  border-color: rgba(40, 160, 90, 0.5);
}
.mala-lieferfz-legend--split {
  background: rgba(220, 175, 55, 0.45);
  border-color: rgba(190, 140, 45, 0.55);
}
.mala-lieferfz-legend--tp {
  background: rgba(91, 127, 217, 0.4);
  border-color: rgba(91, 127, 217, 0.55);
}
.mala-lieferfz-table tbody tr.mala-lieferfz-row--ok {
  background: rgba(40, 160, 90, 0.08);
}
.mala-lieferfz-table tbody tr.mala-lieferfz-row--warn {
  background: rgba(200, 120, 40, 0.1);
}
.mala-lieferfz-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}
.mala-lieferfz-badge--ok {
  color: var(--text);
  background: rgba(40, 160, 90, 0.22);
  border: 1px solid rgba(40, 160, 90, 0.45);
}
.mala-lieferfz-badge--warn {
  color: var(--text);
  background: rgba(200, 120, 40, 0.2);
  border: 1px solid rgba(200, 120, 40, 0.45);
}
.mala-lieferfz-badge--info {
  color: var(--text);
  background: rgba(91, 127, 217, 0.22);
  border: 1px solid rgba(91, 127, 217, 0.45);
}

.mala-lieferfz-prod-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.mala-lieferfz-prod-table th,
.mala-lieferfz-prod-table td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
  text-align: left;
  vertical-align: middle;
}
.mala-lieferfz-prod-table th {
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  font-weight: 600;
}
.mala-lieferfz-prod-inp {
  width: 100%;
  min-width: 6rem;
  box-sizing: border-box;
  padding: 0.25rem 0.35rem;
  font-size: 0.84rem;
}

.mala-kunden-panel[hidden],
.mala-kunden-panel.hidden {
  display: none !important;
}

.mala-kunden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.45rem 0.75rem;
  align-items: end;
}

.mala-kunden-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.mala-kunden-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.mala-kunden-field > span {
  font-weight: 600;
  color: var(--text);
}

.mala-kunden-field > input,
.mala-kunden-field > select,
.mala-kunden-field > textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
}

.mala-kunden-field--sm {
  max-width: 120px;
}

.mala-kunden-kundenbereich-wrap {
  grid-column: 1 / -1;
}

.mala-kunden-kundenbereich-wrap .mala-kunden-checks {
  margin-top: 0.25rem;
}

.mala-kunden-er-post-row {
  margin: 0 0 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.mala-kunden-field--full {
  grid-column: 1 / -1;
}

.mala-kunden-field--full textarea {
  min-height: 10rem;
  resize: vertical;
}

.mala-kunden-subh {
  margin: 0.5rem 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.mala-kunden-faktura-stack,
.mala-kunden-adresse-stack,
.mala-kunden-fibu-stack,
.mala-kunden-diverses-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mala-kunden-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: var(--surface);
}

.mala-kunden-card--kredit {
  margin-bottom: 0.25rem;
}

.mala-kunden-kredit-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  justify-content: space-between;
  align-items: flex-start;
}

.mala-kunden-kredit-head-main {
  flex: 1 1 220px;
  min-width: 0;
}

.mala-kunden-kredit-sperre {
  flex: 0 1 280px;
  margin-left: auto;
  text-align: right;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
}

html[data-theme='light'] .mala-kunden-kredit-sperre {
  background: rgba(0, 0, 0, 0.04);
}

.mala-kunden-kredit-sperre__title {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: right;
}

.mala-kunden-kredit-sperre__chk {
  justify-content: flex-end;
  text-align: left;
}

.mala-kunden-kredit-sperre__grund {
  text-align: right;
}

.mala-kunden--gesperrt .mala-kunden-tab {
  background: rgba(185, 28, 28, 0.28) !important;
  border-color: rgba(127, 29, 29, 0.45);
}

.mala-kunden--gesperrt .mala-kunden-tab:hover {
  background: rgba(185, 28, 28, 0.38) !important;
}

.mala-kunden-readonly-banner {
  margin: 0;
  padding: 0.35rem 0 0;
  max-width: 42rem;
}

.mala-kunden--readonly .mala-kunden-panels input,
.mala-kunden--readonly .mala-kunden-panels textarea,
.mala-kunden--readonly .mala-kunden-panels select {
  cursor: default;
}

.mala-kunden--gesperrt .mala-kunden-tab--active {
  background: rgba(185, 28, 28, 0.48) !important;
  border-color: rgba(127, 29, 29, 0.65);
  font-weight: 600;
}

.mala-kunden-card__title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.mala-kunden-card__hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.mala-kunden-card__lead {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.mala-kunden-card__foot {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
}

.mala-kunden-card__intro {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.mala-kunden-card__actions {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.mala-kunden-fieldset--card {
  margin: 0.5rem 0 0.65rem;
}

.mala-kunden-er-bh-detail {
  margin-top: 0.35rem;
}

.mala-kunden-er-format-agb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
}

.mala-kunden-er-agb-sep {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  min-height: 1.15em;
  margin: 0 0.1rem;
  background: var(--border);
}

html[data-theme='light'] .mala-kunden-card {
  background: var(--card);
}

.mala-kunden-card__title--spaced {
  margin-top: 0.65rem;
}

.mala-kunden-adresse-footer {
  margin-bottom: 0.15rem;
}

.mala-kunden-checks--card {
  margin: 0.35rem 0 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}

.mala-kunden-card--fuel .mala-kunden-grid {
  margin-top: 0.25rem;
}

.mala-kunden-fuel {
  margin-top: 0.4rem;
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
}

html[data-theme='light'] .mala-kunden-fuel {
  background: rgba(0, 0, 0, 0.03);
}

.mala-kunden-geo {
  margin-top: 0.65rem;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.mala-kunden-geo-btns {
  display: inline-flex;
  gap: 0.35rem;
}

.mala-kunden-owner-row {
  flex: 1 1 100%;
}

.mala-kunden-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-top: 0.4rem;
}

.mala-kunden-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.mala-kunden-struktur {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mala-kunden-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.mala-kunden-save-hint {
  font-size: 0.85rem;
}

.modal-panel--map {
  width: min(96vw, 920px);
  max-width: 96vw;
}

.mala-kunden-map-frame {
  width: 100%;
  height: min(60vh, 420px);
  border: 0;
  border-radius: 8px;
  background: #111;
}

@media (max-width: 640px) {
  .mala-kunden-tab {
    font-size: 0.72rem;
    padding: 0.3rem 0.4rem;
  }
}

.mala-kunden-kredit-block {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
}

html[data-theme='light'] .mala-kunden-kredit-block {
  background: rgba(0, 0, 0, 0.03);
}

.mala-kunden-kredit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.mala-kunden-kredit-ampel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.mala-kunden-kredit-swatches {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.mala-kunden-kredit-swatch {
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid var(--border);
  padding: 0;
  margin: 0;
  display: inline-block;
  box-sizing: border-box;
}

.mala-kunden-kredit-swatch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

button.mala-kunden-kredit-swatch {
  cursor: pointer;
  flex-shrink: 0;
}

.mala-kunden-kredit-swatch--current {
  outline: 2px solid var(--accent, #1976d2);
  outline-offset: 2px;
}

.mala-kunden-kredit-swatch--weiss {
  background: #fff;
}

.mala-kunden-kredit-swatch--rot {
  background: #c62828;
  border-color: #8e0000;
}

.mala-kunden-kredit-swatch--gelb {
  background: #f9a825;
  border-color: #c17900;
}

.mala-kunden-kredit-swatch--gruen {
  background: #2e7d32;
  border-color: #1b5e20;
}

.mala-kunden-la-nb-table th[scope='row'] {
  text-align: left;
  font-weight: 600;
}

.mala-kunden-la-modal {
  max-height: min(90vh, 880px);
  overflow: auto;
}

/* Admin: mala-Stammdaten (Einstellungen-Modals) */
.sett-admin-mala-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.stc-admin-mala-modal.modal-panel--wide {
  width: min(720px, calc(100% - 2rem));
  max-height: min(90vh, 880px);
  overflow: auto;
}

.stc-admin-mala-table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0;
}

.stc-admin-mala-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.stc-admin-mala-table th,
.stc-admin-mala-table td {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  text-align: left;
}

.stc-admin-mala-table thead th {
  background: var(--surface-elevated, var(--surface));
}

.stc-admin-mala-table tfoot th {
  font-weight: 600;
}

.stc-admin-mala-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.stc-admin-mala-subh {
  margin: 0.85rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.stc-admin-mala-typ-inline {
  margin: 0.65rem 0;
  padding: 0.65rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 0.5rem;
  align-items: end;
}

@media (max-width: 640px) {
  .stc-admin-mala-typ-inline {
    grid-template-columns: 1fr;
  }
}

/* mala Oil · OMR einlesen (Argus PDF) */
.sidebar-nav-item--sub2 {
  padding-left: 2.15rem;
}

.mala-argus-omr-panel {
  max-width: 100%;
}

.mala-argus-omr-hint {
  margin: 0 0 1rem;
  max-width: 52rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.45;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.mala-argus-omr-hint kbd {
  display: inline-block;
  padding: 0.08em 0.35em;
  font-size: 0.9em;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme='light'] .mala-argus-omr-hint {
  background: rgba(0, 0, 0, 0.04);
}

.mala-argus-omr-hint-kbd {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.86em;
  opacity: 0.92;
}

.mala-argus-omr-toolbar {
  max-width: 100%;
  margin-bottom: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

html[data-theme='light'] .mala-argus-omr-toolbar {
  background: rgba(0, 0, 0, 0.02);
}

.mala-argus-omr-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.55rem;
}

.mala-argus-omr-toolbar-row:last-child {
  margin-bottom: 0;
}

.mala-argus-omr-toolbar-row--date {
  align-items: center;
}

.mala-argus-omr-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.mala-argus-omr-field-label,
.mala-argus-omr-omr-label {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.88;
}

.mala-argus-omr-omr-label {
  align-self: center;
  margin-right: 0.15rem;
}

.mala-argus-omr-input {
  min-width: 12rem;
  max-width: min(28rem, 100%);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: inherit;
}

.mala-argus-omr-toolbar input[type='date'].mala-argus-omr-input {
  min-width: 10.5rem;
}

.mala-argus-omr-toolbar select.mala-argus-omr-input {
  min-width: 14rem;
  max-width: min(22rem, 100%);
}

.mala-argus-omr-toolbar-row--region-product {
  align-items: flex-end;
}

.mala-argus-omr-region-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 14rem;
}

.mala-argus-omr-region-presets-label {
  width: 100%;
  margin-bottom: 0.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.88;
}

@media (min-width: 960px) {
  .mala-argus-omr-region-presets-label {
    width: auto;
    margin-bottom: 0;
    margin-right: 0.25rem;
  }
}

.mala-argus-omr-prod-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 12rem;
}

.mala-argus-omr-presets-label {
  width: 100%;
  margin-bottom: 0.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.88;
}

@media (min-width: 720px) {
  .mala-argus-omr-presets-label {
    width: auto;
    margin-bottom: 0;
    margin-right: 0.25rem;
  }
}

.mala-argus-omr-toolbar-omr {
  align-items: center;
  gap: 0.35rem;
}

/* OMR-Art: aktive Schnellwahl blau wie andere Filter-Schnellwahlen */
.mala-argus-omr-toolbar .mala-argus-omr-kind {
  border: 1px solid transparent;
}

.mala-argus-omr-toolbar .mala-argus-omr-kind.mala-argus-omr-kind--active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}

.mala-argus-omr-toolbar .mala-argus-omr-kind.mala-argus-omr-kind--active:hover {
  filter: brightness(0.95);
}

html[data-theme='light'] .mala-argus-omr-toolbar .mala-argus-omr-kind.mala-argus-omr-kind--active {
  border-color: var(--accent);
}

.mala-argus-omr-nav {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.mala-argus-omr-modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
}

.mala-argus-omr-modal-lead {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
}

.mala-argus-omr-modal-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.mala-argus-omr-modal-dl dt {
  margin: 0;
  opacity: 0.82;
  font-weight: 500;
}

.mala-argus-omr-modal-dl dd {
  margin: 0;
}

.mala-argus-omr-modal-note {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.mala-argus-omr-modal-warn {
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: rgba(255, 183, 77, 0.12);
  font-size: 0.88rem;
  line-height: 1.4;
}

.mala-argus-omr-pdf-offer {
  margin: 0 0 0.65rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.mala-argus-omr-modal-q {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
}

.mala-argus-omr-intro {
  margin: 0 0 1rem;
  max-width: 52rem;
}

.mala-argus-omr-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

.mala-argus-omr-form--paste {
  flex-direction: column;
  align-items: stretch;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.mala-argus-omr-paste-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  width: 100%;
}

.mala-argus-omr-textarea {
  width: 100%;
  max-width: 52rem;
  min-height: 9rem;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  resize: vertical;
}

.mala-argus-omr-file-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.mala-argus-omr-file-label input[type='file'] {
  max-width: 28rem;
}

.mala-argus-omr-h2 {
  font-size: 1rem;
  margin: 0 0 0.65rem;
  font-weight: 600;
}

.mala-argus-omr-h3 {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.5rem;
  font-weight: 600;
}

.mala-argus-omr-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.mala-argus-omr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.mala-argus-omr-table th,
.mala-argus-omr-table td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.mala-argus-omr-table th {
  background: rgba(0, 0, 0, 0.12);
  font-weight: 600;
}

/* ±-Spalten: Vorzeichen (Dark = Standard) */
.mala-argus-omr-table td.mala-argus-omr-delta--pos {
  background: rgba(63, 185, 80, 0.22);
}

.mala-argus-omr-table td.mala-argus-omr-delta--neg {
  background: rgba(248, 81, 73, 0.2);
}

html[data-theme='light'] .mala-argus-omr-table td.mala-argus-omr-delta--pos {
  background: rgba(34, 139, 34, 0.14);
}

html[data-theme='light'] .mala-argus-omr-table td.mala-argus-omr-delta--neg {
  background: rgba(220, 53, 69, 0.12);
}

.mala-argus-omr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
}

.mala-argus-omr-pdf-missing {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

html[data-theme='light'] .mala-argus-omr-table th {
  background: rgba(0, 0, 0, 0.05);
}

.mala-argus-omr-table--dense {
  font-size: 0.78rem;
}

.mala-argus-omr-warn {
  color: #ffb74d;
}

.mala-argus-omr-err {
  color: #ef9a9a;
  margin: 0.5rem 0;
}

tr.mala-argus-omr-import-row.mala-argus-omr-import-row--active td {
  background: rgba(90, 140, 255, 0.14);
  box-shadow: inset 3px 0 0 rgba(100, 160, 255, 0.75);
}

html[data-theme='light'] tr.mala-argus-omr-import-row.mala-argus-omr-import-row--active td {
  background: rgba(0, 70, 180, 0.09);
  box-shadow: inset 3px 0 0 rgba(0, 100, 200, 0.55);
}

tr.mala-argus-omr-detail-below td.mala-argus-omr-detail-below-cell {
  padding: 0.75rem 1rem 1rem;
  vertical-align: top;
  background: var(--surface);
  border-top: 1px dashed var(--border);
}

.mala-argus-omr-detail-inner {
  max-width: 100%;
}

tr.mala-argus-omr-import-row {
  cursor: pointer;
}

button.mala-argus-omr-pdf-open--missing {
  opacity: 0.78;
}

button.mala-argus-omr-pdf-open--missing:hover {
  opacity: 1;
}

.modal-panel--argus-pdf {
  width: min(1200px, calc(100% - 2rem));
  max-height: min(92vh, 960px);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem 1rem;
  overflow: hidden;
}

.mala-argus-omr-pdf-modal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}

.mala-argus-omr-pdf-modal-title {
  font-weight: 600;
}

.mala-argus-omr-pdf-iframe {
  flex: 1 1 auto;
  min-height: min(85vh, 780px);
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #1a1a1a;
}

html[data-theme='light'] .mala-argus-omr-pdf-iframe {
  background: #e8e8e8;
}

.modal-panel--argus-pdf .modal-actions {
  flex-shrink: 0;
  margin-top: 0.6rem;
  padding-top: 0;
}

.modal-panel--argus-omr-row {
  width: min(1240px, calc(100% - 2rem));
  max-height: min(94vh, 980px);
  overflow-y: auto;
}

/* Zeilen-/PDF-Modal: nicht durch .modal-panel--argus-omr-import (480px) begrenzen */
.modal-panel--argus-omr-import.modal-panel--argus-omr-row {
  max-width: min(1240px, calc(100% - 2rem));
}

@media (min-width: 768px) {
  .modal-panel--argus-omr-row {
    min-width: 680px;
  }
}

.mala-argus-omr-row-meta {
  font-size: 0.82rem;
  margin-bottom: 0.45rem;
}

.mala-argus-omr-pdf-ok {
  color: #9be7a3;
}

.mala-argus-omr-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}

.mala-argus-omr-row-pdf-wrap {
  margin-top: 0.55rem;
}

.mala-argus-omr-row-pdf-wrap.is-hidden {
  display: none;
}

.mala-argus-omr-row-pdf-tools {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}