/* ═══════════════════════════════════════════════════════════════════
   quickBee Admin — Design-System v2
   Stand: 2026-09-09
   Schnelltest im Browser (Konsole):
     getComputedStyle(document.documentElement).getPropertyValue('--qb-css-build')
   Kommt nichts zurück, ist auf dem Server noch eine ältere Datei aktiv.
   ═══════════════════════════════════════════════════════════════════ */
:root { --qb-css-build: "2026-09-09"; }

/*
 * quickBee – Admin / Verkäufer-App CSS
 * Mobile-first · Dunkel · App-Feeling
 * Font: Montserrat (gleichmässige Zeichenbreiten, top Lesbarkeit)
 *
 * Design-System v2 — Struktur analog chicBee, Palette quickBee-Gelb.
 *   – Surface-Ebenen  (--surface, --surface-2, --surface-3)   für Tiefe
 *   – Shadow-System   (--shadow-sm, --shadow, --shadow-lg)    inkl. Bee-Glow
 *   – Radius-System   (--radius-sm 8px, --radius 12px, --radius-lg 16px)
 *   – Border-Ebenen   (--border, --border-strong)
 *   – Buttons         .btn-qb (Basis) + Aliase auf .btn-bee etc.
 *   – Typografie      .qb-page-title / .qb-section-title / .qb-card-title
 *   – Sidebar-Gruppen .qb-nav-group + Mobile-Overlay-Sidebar mit Burger
 * Rückwärtskompatibilität: alle Alt-Klassen (.btn-bee, .card, .stat-card, …)
 * bleiben unverändert funktionsfähig — v2 ergänzt, ersetzt nicht.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --bg:         #0D0F18;
  --bg-card:    #161923;
  --bg-input:   #1A1D2A;   /* etwas heller, damit Felder vom Body abheben */
  --bg-hover:   rgba(255,255,255,.04);
  --border:     #2A2E40;   /* etwas heller für Cards/Trenner */
  --border-mid: #424766;   /* deutlich sichtbar – für Form-Felder & Outline-Buttons */
  --border-input-hover: #5A6080; /* nochmal heller beim Hover über Eingaben */
  --bee:        #F5C400;
  --bee-dark:   #C89E00;
  --bee-glow:   rgba(245,196,0,.14);
  --bee-fg:     #F5C400;  /* Gelb als TEXTfarbe — hier identisch, weil auf dunklem Grund lesbar */
  --green:      #2DD4A0;
  --green-dark: #0A9E73;
  --green-pale: rgba(45,212,160,.1);
  --red:        #FF6B6B;
  --orange:     #FF9F43;
  --blue:       #5BA4F5;
  --text:       #EEF0FA;
  --text-mid:   #B0B3CC;
  --text-light: #44475A;
  --text-placeholder: #6E7391;  /* eigener Wert: --text-light ergibt als Platzhalter nur 1.83:1 */

  /* ── Design-System v2 — Struktur-Tokens ─────────────────
     Neue Namen. Alte (--bg-card, --border, …) bleiben als Aliase
     der v1-Namen aktiv; neue Komponenten nutzen v2-Tokens. */
  --surface:        #161923;             /* alias von --bg-card */
  --surface-2:      #1E2231;             /* eine Stufe heller — Sub-Karten, Toolbars */
  --surface-3:      #262B3D;             /* noch heller — Hover, Menu, Chip-Active */
  --border-strong:  #424766;             /* alias von --border-mid — klare Outline */

  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.35);
  --shadow:     0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:  0 18px 50px rgba(0,0,0,.55);
  --shadow-bee: 0 8px 28px rgba(245,196,0,.22);   /* Gelb-Glow für Hover-Highlights */

  --transition: .18s cubic-bezier(.4,0,.2,1);
  --sidebar-w:  230px;
  --nav-h:      62px;
}

/* ── Hell-Modus ──────────────────────────────────────────── */
body.light-mode .sidebar {
  background: #FFFFFF;
  border-right-color: var(--border);
}
body.light-mode .site-header,
body.light-mode .top-bar {
  background: #FFFFFF;
  border-bottom-color: var(--border);
}
body.light-mode .qb-modal {
  background: #FFFFFF;
}
body.light-mode .qb-modal-backdrop {
  background: rgba(0,0,0,.35);
}
body.light-mode .form-control,
body.light-mode select,
body.light-mode textarea {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--border-mid);
}
body.light-mode .btn-ghost {
  background: rgba(0,0,0,.05);
  color: var(--text-mid);
  border-color: var(--border);
}
body.light-mode .btn-ghost:hover {
  background: rgba(0,0,0,.09);
  color: var(--text);
}
body.light-mode .nav-item { color: var(--text-mid); }
body.light-mode .nav-item:hover,
body.light-mode .nav-item.active { background: rgba(0,0,0,.05); color: var(--text); }


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* ── App Shell ───────────────────────────────────────────── */
/* Safe area for notch/Dynamic Island */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-logo { display:flex; align-items:center; gap:10px; padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.sidebar-logo .app-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--bee);
  line-height: 1.2;
}
.sidebar-logo .app-sub {
  font-size: .68rem;
  color: var(--text-light);
  font-weight: 400;
}

.sidebar-nav { padding: 10px 8px; flex: 1; }

.nav-section {
  font-size: .63rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-light);
  padding: 13px 8px 5px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-mid);
  font-size: .87rem;
  font-weight: 500;
  transition: all var(--transition);
  margin-bottom: 1px;
  cursor: pointer;
}
.nav-item svg { opacity: .65; transition: opacity var(--transition); flex-shrink: 0; }
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { background: var(--bee-glow); color: var(--bee-fg); }
.nav-item.active svg { opacity: 1; color: var(--bee); }

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: .63rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  line-height: 1.4;
}

.sidebar-user {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.user-avatar {
  width: 30px; height: 30px;
  background: var(--bee);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
  color: var(--bg);
  font-weight: 700;
  flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-info strong { display: block; font-size: .83rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info small  { color: var(--text-light); font-size: .7rem; }
.logout-btn { color: var(--text-light); padding: 4px; border-radius: 6px; transition: color var(--transition); flex-shrink: 0; }
.logout-btn:hover { color: var(--red); }

/* ── Main Content ─────────────────────────────────────────── */
.main-content { overflow: hidden; min-width: 0; }

.page-header {
  padding: 24px 26px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.page-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}
.page-subtitle { color: var(--text-mid); font-size: .85rem; margin-top: 3px; }
.content-area { padding: 0 26px 60px; }

/* ── Karten ──────────────────────────────────────────────── */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card-sm { padding: 14px 16px; }
.card h3 { font-size: .95rem; font-weight: 700; margin-bottom: 16px; }

/* ── Stats-Grid ───────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-icon-wrap {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-card.yellow .stat-icon-wrap { background: var(--bee-glow);            color: var(--bee-fg); }
.stat-card.green  .stat-icon-wrap { background: var(--green-pale);           color: var(--green);  }
.stat-card.blue   .stat-icon-wrap { background: rgba(91,164,245,.1);         color: var(--blue);   }
.stat-card.red    .stat-icon-wrap { background: rgba(255,107,107,.1);        color: var(--red);    }
.stat-card.orange .stat-icon-wrap { background: rgba(255,159,67,.1);         color: var(--orange); }

.stat-info { min-width: 0; }
.stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -.015em;
}
.stat-label { font-size: .78rem; color: var(--text-mid); }
.stat-sub   { font-size: .72rem; color: var(--text-light); margin-top: 3px; }

/* ── Dashboard Layout ─────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border-radius: 40px;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn-bee   { background: var(--bee); color: #0D0F18; }
.btn-bee:hover { background: var(--bee-dark); transform: translateY(-1px); }
.btn-green { background: var(--green-dark); color: #fff; }
.btn-green:hover { background: #078F66; transform: translateY(-1px); }
.btn-outline { background: transparent; border: 1.5px solid var(--border-mid); color: var(--text-mid); }
.btn-outline:hover { border-color: var(--bee); color: var(--bee); }
.btn-danger { background: transparent; border: 1.5px solid var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-ghost  { background: var(--bg-hover); color: var(--text-mid); border: 1px solid var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,.07); color: var(--text); }
.btn-lg  { padding: 11px 24px; font-size: .93rem; }
.btn-sm  { padding: 6px 13px; font-size: .78rem; }
.btn-xs  { padding: 4px 9px; font-size: .73rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ── Formulare ───────────────────────────────────────────── */
.form-group { margin-bottom: 15px; }
.form-group label {
  display: flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 600;
  color: var(--text-mid); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
/* ── Modal-Pattern (Footer immer sichtbar) ───────────────────
   Auf kleinen Bildschirmen oder Handys war der Senden-Button in
   manchen Modals nicht erreichbar. Diese Klasse stellt sicher,
   dass der Footer immer am unteren Rand klebt und der Body
   scrollt, falls der Inhalt zu lang ist. */
.qb-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75);
            z-index: 500; align-items: center; justify-content: center; padding: 16px; }
.qb-modal.is-open { display: flex; }
.qb-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qb-modal-box > header,
.qb-modal-box > footer { flex-shrink: 0; }
.qb-modal-box > main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.form-control {
  width: 100%; background: var(--bg-input);
  /* Deutlich sichtbare Umrandung – nutzt --border-mid statt --border,
     damit Eingabefelder im Dark-Mode klar vom Hintergrund abgegrenzt sind. */
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-family: 'Montserrat', sans-serif; font-size: .92rem;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition); outline: none; appearance: none;
}
.form-control:hover { border-color: var(--border-input-hover); }
.form-control:focus {
  border-color: var(--bee);
  box-shadow: 0 0 0 3px rgba(245,196,0,.15);  /* sanfter Fokus-Ring */
}
.form-control::placeholder { color: var(--text-placeholder); opacity: 1; transition: opacity .15s; }
.form-control:focus::placeholder { opacity: 0; }
textarea.form-control { resize: vertical; min-height: 88px; }
select.form-control { cursor: pointer; }
/* Helle-Mode Override (greift auf hellere Werte zu, falls Light-Mode-Theme aktiv) */
body.light-mode .form-control { border-color: var(--border-mid); }
body.light-mode .form-control:hover { border-color: var(--border-input-hover); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-row.thirds { grid-template-columns: 1fr 1fr 1fr; }
.input-with-prefix { position: relative; }
.input-prefix { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-mid); font-size: .9rem; pointer-events: none; }
.input-with-prefix .form-control { padding-left: 44px; }

/* ── Tabelle ─────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: 10px 14px;
  text-align: left; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-light); font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: .87rem; vertical-align: middle;
}
/* Klickbare Zeilen */
.data-table tr.row-link { cursor: pointer; }
.data-table tr.row-link td { cursor: pointer; }
.data-table tr.row-link:hover td { background: rgba(245,196,0,.03); }
.data-table tr.row-link:hover td:first-child { border-left: 2.5px solid var(--bee); padding-left: 11px; }
.data-table .product-thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--bg-input); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Status Badges ───────────────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.status.active   { background: rgba(45,212,160,.12); color: var(--green); }
.status.active::before { background: var(--green); }
.status.pending  { background: rgba(255,159,67,.12);  color: var(--orange); }
.status.pending::before { background: var(--orange); }
.status.inactive { background: rgba(255,255,255,.06); color: var(--text-light); }
.status.inactive::before { background: var(--text-light); }
.status.danger   { background: rgba(255,107,107,.12); color: var(--red); }
.status.danger::before { background: var(--red); }
.status.info     { background: rgba(91,164,245,.12); color: var(--blue); }
.status.info::before { background: var(--blue); }

/* Zahlung Badge */
.pay-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .73rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.pay-badge.paid   { background: rgba(45,212,160,.12); color: var(--green); }
.pay-badge.unpaid { background: rgba(255,107,107,.1); color: var(--red); }

/* ── Lagerbestand ─────────────────────────────────────────── */
.stock-bar { width: 70px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.stock-bar-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }

.stock-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.stock-row:last-child { border-bottom: none; }
.stock-row-info { flex: 1; min-width: 0; }
.stock-row-name { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-row-num  { font-weight: 700; font-size: .88rem; min-width: 24px; text-align: right; flex-shrink: 0; }

/* ── Schnellzugriff ───────────────────────────────────────── */
/* Schnellzugriff: feste Spaltenzahl statt auto-fill.
   auto-fill füllt nach Platz auf und ergibt bei 6 Kacheln schnell krumme
   Reihen (4+2). Mit festen Stufen bleibt jede Reihe gleich besetzt:
   6 → 3+3 → 2+2+2. Die Kacheln dehnen sich dabei auf die volle Breite
   des .qb-content-Containers. */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 22px;
}
@media (max-width: 1100px) { .quick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .quick-grid { gap: 8px; } }
.quick-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 12px; text-align: center; cursor: pointer; transition: all var(--transition);
}
.quick-card:hover { border-color: var(--bee); background: var(--bee-glow); transform: translateY(-2px); }
.quick-card svg { margin: 0 auto 8px; color: var(--text-mid); transition: color var(--transition); }
.quick-card:hover svg { color: var(--bee); }
.quick-card-label { font-size: .79rem; font-weight: 600; color: var(--text-mid); transition: color var(--transition); }
.quick-card:hover .quick-card-label { color: var(--text); }

/* ── Kamera / Upload ──────────────────────────────────────── */
.camera-area { border: 2px dashed var(--border); border-radius: var(--radius); background: var(--bg-input); transition: all var(--transition); position: relative; overflow: hidden; }
.camera-area:hover { border-color: var(--bee); }
.camera-area.dragover { border-color: var(--bee); background: rgba(245,196,0,.05); }
.camera-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; cursor: pointer; min-height: 200px; }
.camera-placeholder svg { color: var(--text-light); margin-bottom: 14px; opacity: .55; }
.camera-placeholder h3 { font-size: .93rem; color: var(--text-mid); margin-bottom: 6px; }
.camera-placeholder p  { font-size: .8rem; color: var(--text-light); }
.camera-btn-row { display: flex; gap: 10px; justify-content: center; padding: 14px; background: var(--bg-card); border-top: 1px solid var(--border); }
.image-preview-wrap { position: relative; }
.image-preview-wrap img { width: 100%; border-radius: var(--radius); display: block; max-height: 380px; object-fit: contain; background: var(--bg-input); }
.image-tools { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; background: var(--bg-card); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.tool-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-mid); font-size: .7rem; cursor: pointer; transition: all var(--transition); font-family: 'Montserrat', sans-serif; }
.tool-btn:hover { background: var(--bee-glow); border-color: var(--bee); color: var(--bee-fg); }
.tool-btn.active { background: var(--bee-glow); border-color: var(--bee); color: var(--bee-fg); }
.filter-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; border-top: 1px solid var(--border); }
.filter-chip { flex-shrink: 0; text-align: center; cursor: pointer; transition: all var(--transition); }
.filter-chip img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; transition: border-color var(--transition); }
.filter-chip.active img { border-color: var(--bee); }
.filter-chip span { display: block; font-size: .67rem; color: var(--text-mid); margin-top: 3px; }

/* ── WhatsApp ─────────────────────────────────────────────── */
.product-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 11px; }
.product-select-card { background: var(--bg-input); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; transition: all var(--transition); text-align: center; position: relative; }
.product-select-card:hover { border-color: rgba(37,211,102,.5); }
.product-select-card.selected { border-color: #25D366; background: rgba(37,211,102,.08); }
.product-select-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; margin-bottom: 8px; }
.product-select-card .check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: #25D366; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: .7rem; color: #fff; }
.product-select-card.selected .check { display: flex; }
.product-select-card .p-name  { font-size: .79rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.product-select-card .p-price { font-size: .76rem; color: var(--bee); }

/* ── Toast ───────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: calc(var(--nav-h) + 12px); right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 11px 15px; border-radius: var(--radius-sm); font-size: .84rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px; animation: toastSlide .25s ease; max-width: 270px; }
.toast.success { border-color: var(--green); }
.toast.error   { border-color: var(--red); }
.toast.warning { border-color: var(--orange); }
@keyframes toastSlide { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } }

/* ── Mobile Bottom Nav ───────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.mob-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; color: var(--text-mid, rgba(255,255,255,0.75)); font-size: .63rem; font-weight: 600; text-decoration: none; transition: color var(--transition); position: relative; }
.mob-nav-item svg { transition: color var(--transition); }
.mob-nav-item.active { color: var(--bee); }
.mob-nav-item.active svg { color: var(--bee); }
.mob-nav-item .mob-badge { position: absolute; top: 6px; right: 50%; transform: translateX(10px); background: var(--red); color: #fff; font-size: .53rem; font-weight: 700; padding: 1px 5px; border-radius: 10px; line-height: 1.5; }
.mob-nav-add { position: relative; top: -8px; }
.mob-nav-add-inner { width: 44px; height: 44px; background: var(--bee); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px var(--bee-glow); }

/* ── Filter Chips ─────────────────────────────────────────── */
.filter-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filter-chip-btn { padding: 6px 12px; border-radius: 40px; font-size: .78rem; font-weight: 600; text-decoration: none; border: 1.5px solid var(--border); color: var(--text-mid); background: transparent; transition: all var(--transition); cursor: pointer; white-space: nowrap; font-family: 'Montserrat', sans-serif; }
.filter-chip-btn:hover  { border-color: var(--border-mid); color: var(--text); }
.filter-chip-btn.active { border-color: var(--bee); color: var(--bee-fg); background: var(--bee-glow); }

/* ── Kategorie Sub-Einrückung ─────────────────────────────── */
.cat-row-sub td:first-child { padding-left: 32px !important; }
.cat-indent { display: inline-flex; align-items: center; gap: 5px; color: var(--text-light); }

/* ── Order Detail ─────────────────────────────────────────── */
.order-detail-grid { display: grid; grid-template-columns: 1fr 290px; gap: 16px; align-items: start; }

/* ── Inline Validierung ───────────────────────────────────── */
.qb-hint { font-size:.72rem; min-height:1.1em; transition:color .2s; color:var(--text-light); margin-top:3px; }
.qb-hint.ok  { color:var(--green); }
.qb-hint.err { color:var(--red);   }
.qb-status   { font-size:.78rem; color:var(--text-light); text-align:center; margin-top:8px; }
.qb-status.ok { color:var(--green); }
input.qb-ok  { border-color:var(--green) !important; }
input.qb-err { border-color:var(--red)   !important; }
.qb-spin { display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--bee); border-radius:50%; animation:qb-spin .7s linear infinite; vertical-align:middle; margin-right:5px; }
@keyframes qb-spin { to { transform:rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid  { grid-template-columns: 1fr; }
  .order-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .camera-placeholder { min-height: 160px; padding: 32px 20px; }
  html { font-size: 15px; }
  .data-table { font-size: .88rem; }
  .card { padding: 14px; }
  .form-control { font-size: .92rem; min-height: 42px; }
  .btn { min-height: 40px; font-size: .88rem; }
  .page-title { font-size: 1.2rem !important; }
  .app-shell { grid-template-columns: 1fr; }
  /* Sidebar: hidden by default on mobile, slides in when .open */
  .sidebar {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 200;
    display: flex !important;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.45);
  }
  .mobile-topbar { display: flex !important; }
  .mobile-nav { display: grid; }
  .main-content { padding-bottom: calc(var(--nav-h) + 6px); margin-left: 0 !important; }
  .page-header  { padding: 16px 14px 0; }
  .content-area { padding: 0 14px 24px; }
  .form-row, .form-row.thirds { grid-template-columns: 1fr; }
  .toast-container { bottom: calc(var(--nav-h) + 8px); right: 10px; }
}
/* Mobile topbar base (hidden on desktop) */
.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 12px;
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .product-select-grid { grid-template-columns: repeat(2, 1fr); }
  /* .quick-grid: Spaltenzahl kommt aus der 1100px-Stufe (3 Spalten) */
}

/* Product Edit responsive */
@media (max-width: 760px) { .pe-grid { grid-template-columns: 1fr !important; } }

/* product-add responsive: camera left, form right on desktop; stacked on mobile */
@media (max-width: 760px) {
  .pa-grid { grid-template-columns: 1fr !important; }
  .pa-grid > div:first-child { order: -1; } /* camera always first */
}

/* Orders: filter tabs wrapping */
.filter-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.filter-tabs a, .filter-tabs button {
  white-space: nowrap;
  font-size: .82rem;
}

/* Sidebar user as link */
a.sidebar-user { color: inherit; }
a.sidebar-user:hover { background: var(--bg-hover); }

/* Ehemals `.qb-badge` = 40×40-Logo-Quadrat mit `.qb-q`/`.qb-b`.
   Entfernt, weil der Name mit der v2-Status-Pille kollidierte (die 40×40-Regel
   hätte jede Status-Pille zu einem Kästchen mit Gelb-Glow gemacht).
   Die Logo-Variante war ungenutzt — `.qb-q`/`.qb-b` kommen in keiner PHP-Datei
   mehr vor. Falls das Logo-Quadrat je zurückkommt: als `.qb-logo-badge`. */

/* Product-add photo tap area */
#photo-tap-area { 
  transition: background .2s;
  border-bottom: 1px solid var(--border);
}
#photo-tap-area:hover, #photo-tap-area:active { 
  background: rgba(245,196,0,.06); 
}
#editor-wrap { position: relative; }
#editor-wrap canvas { 
  width: 100% !important; 
  max-width: 100%; 
  height: auto !important; 
}

/* ── qb-Modal ────────────────────────────────────────────── */
.qb-modal-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.45);
  align-items: center; justify-content: center; padding: 20px;
}
.qb-modal-backdrop.show { display: flex; }
/* WICHTIG: Specifity über .qb-modal-backdrop .qb-modal — sonst überschreibt
   die generische .qb-modal { display:none } aus Zeile ~332 diesen Block
   und der Inhalt des Bestätigungs-Modals bleibt unsichtbar (Backdrop ist
   sichtbar, Box nicht). */
.qb-modal-backdrop .qb-modal {
  display: block;
  /* Die allgemeine .qb-modal-Regel macht die Box bildschirmhoch und fest (position:fixed; inset:0) — hier zurück */
  position: relative; inset: auto; height: auto; max-height: calc(100vh - 40px); overflow: auto;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  width: 100%; max-width: 420px;
  padding: 24px;
  animation: qbModalIn .18s ease;
}
@keyframes qbModalIn {
  from { opacity:0; transform: scale(.95) translateY(8px); }
  to   { opacity:1; transform: scale(1)   translateY(0); }
}
.qb-modal-icon { margin-bottom: 12px; color: var(--bee-dark, #B38F00); line-height: 0; }
.qb-modal-icon svg { width: 30px; height: 30px; }
.qb-modal-icon-gefahr { color: var(--red, #DC2626); }
.qb-modal-title { font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: var(--text); }
.qb-modal-body  { font-size: .88rem; color: var(--text-mid); margin-bottom: 20px; line-height: 1.5; }
.qb-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Rich Text Toolbar ───────────────────────────────────── */
.rte-wrap { position: relative; }
.rte-toolbar {
  display: flex;
  gap: 4px;
  padding: 5px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rte-toolbar + textarea,
.rte-wrap textarea {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  border-top: 1px solid var(--border) !important;
}
.rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  transition: background .12s, border-color .12s;
  user-select: none;
}
.rte-btn:hover { background: var(--bg-c2); border-color: var(--bee); }
.rte-btn-b { font-weight: 900; font-style: normal; }
.rte-btn-i { font-style: italic; font-weight: 500; }
.rte-btn-br { font-size: .65rem; letter-spacing: -.02em; }
.rte-btn-sep { width: 1px; background: var(--border); margin: 2px 2px; height: auto; border: none; cursor: default; }
.rte-btn-sep:hover { background: var(--border); border-color: var(--border); }

.rte-editor {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 10px 12px;
  min-height: 120px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--text);
  outline: none;
  overflow-y: auto;
  cursor: text;
}
.rte-editor:focus {
  border-color: var(--bee);
  box-shadow: 0 0 0 2px rgba(var(--bee-rgb,245,196,0),.15);
}
.rte-editor h2 { font-size: 1.3rem; font-weight: 700; margin: 12px 0 6px; }
.rte-editor h3 { font-size: 1.05rem; font-weight: 700; margin: 10px 0 4px; }
.rte-editor p  { margin: 0 0 8px; }
.rte-editor b, .rte-editor strong { font-weight: 700; }
.rte-editor i, .rte-editor em { font-style: italic; }

/* ── Hell-Modus ──────────────────────────────────────────── */
/* ── Hell-Modus ────────────────────────────────────────────────────
   EIN Block für beide Selektoren. Der Server setzt gleichzeitig
   `data-theme="light"` am <html> und `class="light-mode"` am <body>;
   vorher lagen dafür drei Blöcke im File — zwei davon mit abweichenden
   Farbwerten, was je nach Reihenfolge zu unterschiedlichen Ergebnissen
   führte. Werte hier: die zuvor tatsächlich gewinnende Variante.
   ────────────────────────────────────────────────────────────────── */
[data-theme="light"],
body.light-mode {
  --bg:         #F4F6FA;
  --bg-card:    #FFFFFF;
  --bg-input:   #ECEEF5;
  --bg-hover:   rgba(0,0,0,.04);
  --border:     #DDDFE8;
  --border-mid: #C8CAD8;
  --border-input-hover: #8A8FA8;
  --text:       #111827;
  --text-mid:   #4B5563;
  --text-light: #9CA3AF;
  --text-placeholder: #6E7391;
  --shadow-sm:  0 1px 2px rgba(15,23,42,.05);
  --shadow:     0 4px 20px rgba(0,0,0,.1);
  --shadow-lg:  0 20px 50px rgba(15,23,42,.14);
  --bee-glow:   rgba(245,196,0,.12);
  --bee-fg:     #8A6D00;  /* dunkleres Gold: #F5C400 als Text auf hellem Grund ergibt nur 1.54:1 */
  /* v2-Struktur-Tokens */
  --surface:       #FFFFFF;
  --surface-2:     #F4F6FA;
  --surface-3:     #E7EAF2;
  --border-strong: #C8CAD8;
  color-scheme: light;
}
[data-theme="light"] .sidebar {
  background: #1B2331;
  color: rgba(255,255,255,.85);
}
[data-theme="light"] .sidebar * {
  color: inherit;
}
[data-theme="light"] .sidebar .nav-item {
  color: rgba(255,255,255,.7);
}
[data-theme="light"] .sidebar .nav-item.active,
[data-theme="light"] .sidebar .nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}
[data-theme="light"] .sidebar .nav-section {
  color: rgba(255,255,255,.62);   /* .4 war auf dem dunklen Grund zu schwach (3.6 : 1) */
}
[data-theme="light"] .sidebar .app-name,
[data-theme="light"] .sidebar .user-info strong,
[data-theme="light"] .sidebar .user-info small {
  color: rgba(255,255,255,.9);
}
[data-theme="light"] #qb-theme-btn {
  color: rgba(255,255,255,.8);
}
[data-theme="light"] #qb-theme-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

body.light-mode .sidebar {
  background: #1B2331;
  color: rgba(255,255,255,.85);
}
body.light-mode .sidebar .nav-item { color: rgba(255,255,255,.7); }
body.light-mode .sidebar .nav-item.active,
body.light-mode .sidebar .nav-item:hover { color: #fff; background: rgba(255,255,255,.1); }
body.light-mode .sidebar .nav-section { color: rgba(255,255,255,.62); }
body.light-mode #qb-theme-btn { color: rgba(255,255,255,.8); }

/* ═══════════════════════════════════════════════════════════
   DESIGN-SYSTEM v2 — Karten · Buttons · Formulare · Typografie
   Sidebar-Gruppen · Mobile-Burger-Overlay
   Struktur analog chicBee, Palette quickBee-Gelb (--bee).
   Additiv — ändert keine bestehenden Klassen, ergänzt.
═══════════════════════════════════════════════════════════ */

/* ── v2 Karten ─────────────────────────────────────────── */
.qb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.qb-card.is-clickable { cursor: pointer; }
.qb-card.is-clickable:hover,
.qb-card.qb-card-hover:hover {
  border-color: var(--bee);
  box-shadow: var(--shadow-bee);
  transform: translateY(-1px);
}
.qb-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.qb-card-header.no-border { border-bottom: 0; padding-bottom: 0; }
.qb-card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--bee-glow);
  color: var(--bee);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qb-card-title {
  font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.005em;
  line-height: 1.25;
  margin: 0;
}
.qb-card-sub {
  font-size: .78rem;
  color: var(--text-mid);
  margin-top: 2px;
}
.qb-card-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.qb-card-body   { color: var(--text); }
.qb-card-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* Aliasse: bestehende .card / .stat-card / .quick-card bekommen die
   sanftere v2-Shadow-Ebene, ohne dass ihre Struktur/Padding sich ändert. */
.card       { box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition); }
.stat-card  { box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.stat-card:hover  { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.quick-card { box-shadow: var(--shadow-sm); }
.quick-card:hover { box-shadow: var(--shadow-bee); }

/* ── v2 Typografie ─────────────────────────────────────── */
.qb-page-title {
  font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 10px;
}
.qb-page-title .qb-page-icon { color: var(--bee); flex-shrink: 0; }
.qb-page-subtitle {
  font-size: .87rem;
  color: var(--text-mid);
  margin-top: 4px;
  line-height: 1.4;
}
.qb-section-title {
  font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.005em;
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qb-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 6px;
}

/* ── v2 Buttons (.btn-qb-*) ────────────────────────────
   Basis-Button; die alten Klassen bleiben unverändert erhalten.
   Kompat-Aliase weiter unten mappen .btn-bee → .btn-qb-primary, etc. */
.btn-qb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 40px;                 /* Pill — quickBee-Look bleibt */
  border: 1.5px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition);
  min-height: 38px;
}
.btn-qb:hover      { background: var(--surface-3); border-color: var(--border-strong); }
.btn-qb:disabled   { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn-qb-primary {
  background: var(--bee);
  color: #0D0F18;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(245,196,0,.28);
}
.btn-qb-primary:hover {
  background: var(--bee-dark);
  color: #0D0F18;
  box-shadow: 0 6px 22px rgba(245,196,0,.42);
  transform: translateY(-1px);
}

.btn-qb-secondary {
  background: transparent;
  color: var(--text-mid);
  border-color: var(--border-mid);
}
.btn-qb-secondary:hover { color: var(--bee); border-color: var(--bee); background: var(--bee-glow); }

.btn-qb-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn-qb-danger:hover { background: var(--red); color: #fff; }

.btn-qb-ghost {
  background: var(--bg-hover);
  color: var(--text-mid);
  border-color: var(--border);
}
.btn-qb-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-qb-lg { padding: 12px 22px; font-size: .95rem; min-height: 44px; }
.btn-qb-sm { padding: 6px 13px;  font-size: .78rem; min-height: 32px; }
.btn-qb-xs { padding: 4px 10px;  font-size: .72rem; min-height: 26px; }
.btn-qb-block { width: 100%; }

/* Kompat-Aliase: alte .btn-*-Klassen erhalten zusätzlich die neuen
   Selektoren. So verhalten sich Bestandsseiten identisch, aber ein
   Refactor kann Schritt für Schritt auf .btn-qb-* umziehen ohne
   Cascade-Konflikte. */
.btn-bee     { box-shadow: 0 4px 14px rgba(245,196,0,.28); }
.btn-bee:hover { box-shadow: 0 6px 22px rgba(245,196,0,.42); }

/* ── v2 Formulare ──────────────────────────────────────
   Vereinheitlichung: .qb-input / .qb-select / .qb-textarea nutzen die
   gleichen Tokens wie .form-control (Alias); der Focus-Ring ist der
   quickBee-Gelb-Ring. */
.qb-input,
.qb-select,
.qb-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-family: 'Montserrat', sans-serif;
  font-size: .92rem;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
  min-height: 40px;
}
.qb-textarea { resize: vertical; min-height: 88px; }
.qb-select   { cursor: pointer; padding-right: 34px; }
.qb-input:hover,
.qb-select:hover,
.qb-textarea:hover { border-color: var(--border-input-hover); }
.qb-input:focus,
.qb-select:focus,
.qb-textarea:focus,
.form-control:focus {
  border-color: var(--bee);
  box-shadow: 0 0 0 3px var(--bee-glow);
}
/* Platzhalter: eigener Farbwert statt --text-light + opacity.
   Die alte Kombination ergab im Dunkel-Modus 1.83:1 Kontrast — der Text
   „Suchen…" war praktisch unsichtbar. Jetzt 3.6:1 (dunkel) / 4.0:1 (hell),
   also über der 3:1-Schwelle für UI-Text, aber weiterhin dezent. */
.qb-input::placeholder,
.qb-search::placeholder,
.qb-textarea::placeholder { color: var(--text-placeholder); opacity: 1; }

.qb-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.qb-hint-text { font-size: .74rem; color: var(--text-light); margin-top: 4px; line-height: 1.4; }

/* Checkbox / Radio — konsistent, Bee-Akzent */
.qb-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: .88rem;
  color: var(--text);
}
.qb-check input[type="checkbox"],
.qb-check input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--bee);
  cursor: pointer;
}

/* Suchen-Input (Icon-Prefix) */
.qb-search {
  position: relative;
}
.qb-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-light); pointer-events: none;
}
.qb-search .qb-input { padding-left: 38px; }

/* ── Sidebar-Gruppen (klappbar) ────────────────────────
   Analog chicBee cb-nav-group — Struktur, Palette quickBee-Gelb.
   Verpackt bestehende .nav-item ohne diese anzufassen: eine Gruppe
   trägt die Section-Zeile als Trigger; darunter kommen die .nav-item
   als Sub-Links in .qb-nav-sub. */
.qb-nav-group { margin: 2px 0 4px; }
.qb-nav-group-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  color: var(--text-mid);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.qb-nav-group-trigger:hover { background: var(--bg-hover); color: var(--text); }
.qb-nav-group.has-active > .qb-nav-group-trigger { color: var(--bee); }
.qb-nav-group-trigger .qb-nav-group-ico {
  width: 18px; height: 18px;
  color: var(--text-light);
  flex-shrink: 0;
  transition: color var(--transition);
}
.qb-nav-group-trigger:hover .qb-nav-group-ico,
.qb-nav-group.has-active .qb-nav-group-ico { color: var(--bee); }
.qb-nav-group-trigger .qb-nav-label { flex: 1; min-width: 0; }
.qb-nav-group-trigger .qb-nav-arrow {
  width: 14px; height: 14px;
  margin-left: 4px;
  transition: transform .22s ease;
  opacity: .55;
  flex-shrink: 0;
}
.qb-nav-group.open .qb-nav-group-trigger .qb-nav-arrow { transform: rotate(180deg); }
.qb-nav-group-trigger .qb-nav-count {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 800;
  background: var(--red);
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.55;
}
.qb-nav-group-trigger .qb-nav-count.orange { background: var(--orange); }
.qb-nav-group-trigger .qb-nav-count + .qb-nav-arrow { margin-left: 6px; }

.qb-nav-sub {
  list-style: none;
  padding: 2px 0 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.qb-nav-group.open .qb-nav-sub { max-height: 800px; }
.qb-nav-sub li { margin: 0; }
.qb-nav-sub .nav-item {
  padding-left: 34px;                    /* Einrückung — Sub-Link */
  font-size: .84rem;
}
.qb-nav-sub .nav-item svg { width: 14px; height: 14px; }

/* Kompat: die alten .nav-section-Labels — falls einzelne Seiten sie
   noch aussenrum nutzen — bleiben lesbar. Der Rest wandert in Gruppen. */

/* ── Mobile-Sidebar-Overlay Refinements ────────────────
   Der Overlay-Backdrop war bereits im sidebar.php inline. Hier nur
   sanftere Animation + Focus-Trap-Look, damit das Auf-/Zuklappen
   nicht ruckelig wirkt. */
.qb-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6,8,15,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 180;
}
.qb-sidebar-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
body.qb-sidebar-open { overflow: hidden; }

/* Burger-Button — visuelle Konsistenz mit Topbar-Buttons */
.qb-burger {
  width: 42px; height: 42px;
  display: none;                         /* nur Mobile — Media-Query unten */
  align-items: center; justify-content: center;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.qb-burger:hover  { background: var(--surface-3); border-color: var(--border-strong); }
.qb-burger:active { transform: scale(.96); }

@media (max-width: 991px) {
  .qb-burger { display: inline-flex; }
}

/* Sidebar Slide-Verhalten bereits definiert in @media(max-width:760px).
   Wir spiegeln es zusätzlich bei 992px, damit Tablets im Hochformat
   ebenfalls die Overlay-Sidebar bekommen. */
@media (max-width: 991px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    width: min(280px, 82vw);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 200;
    display: flex !important;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .mobile-topbar { display: flex !important; }
}

/* ── Content Area Feinschliff ──────────────────────────
   Sauberes Container-Padding + max-width auf breiten Screens,
   damit lange Text-Zeilen nicht bis zum Rand laufen. */
.qb-content {
  padding: 22px 26px 60px;
  max-width: 1440px;
}

/* ── Einheitlicher Seitenaufbau ───────────────────────────────────────────
   .qb-content wird zentral in partials/sidebar.php geöffnet und in
   partials/footer.php geschlossen — jede Admin-Seite bekommt ihn also
   automatisch. Innen liegende Container dürfen Innenabstand und Lesebreite
   deshalb NICHT ein zweites Mal setzen, sonst stehen 52px statt 26px an den
   Rändern. Die folgenden Regeln neutralisieren das.

   Die höhere Spezifität (0,2,0) schlägt auch die Mobile-Regeln weiter oben,
   unabhängig von der Reihenfolge im Stylesheet. */
.qb-content .qb-content   { padding: 0; max-width: none; }
.qb-content .page-header  { padding: 0; }
.qb-content .content-area { padding: 0; }
.qb-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.qb-page-header .qb-actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Kleiner Divider — visuelle Trennung ohne extra Karte */
.qb-divider { height: 1px; background: var(--border); margin: 22px 0; border: 0; }

/* Meta-Row (Label + Wert nebeneinander in Karten) */
.qb-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: .87rem; }
.qb-meta-row + .qb-meta-row { border-top: 1px solid var(--border); }
.qb-meta-row .qb-meta-key { color: var(--text-mid); font-weight: 500; }
.qb-meta-row .qb-meta-val { color: var(--text); font-weight: 600; text-align: right; }

/* Bounce-Prevention beim Overlay-Öffnen (iOS) */
@media (max-width: 991px) {
  body.qb-sidebar-open { position: fixed; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR v2 — Desktop + Mobile Header (analog chicBee/bookBee)
   Ersetzt die alte `.mobile-topbar` (nur Mobile) durch einen Header
   der auf allen Breiten sichtbar ist: Titel links, Aktionen rechts.
   ═══════════════════════════════════════════════════════════════════ */

.qb-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 26px;
  /* Ohne negative Ränder: Die Kopfzeile sitzt direkt in .main-content, das keinen
     Innenabstand hat. Mit -26px stand sie seitlich über, und der Hauptbereich liess
     sich auf dem Handy (z. B. beim Antippen eines Feldes) seitlich verschieben. */
  margin: 0 0 22px;
  background: var(--surface, var(--bg-card));
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(8px);
}

.qb-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.qb-topbar-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 7px;
  flex-shrink: 0;
}

.qb-topbar-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  padding-left: 1.5em;
}

.qb-topbar-title {
  font-family: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qb-topbar-shop {
  font-size: .74rem;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qb-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Topbar-Buttons (Hilfe, Theme) */
.qb-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text-mid);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.qb-topbar-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong, var(--border-mid));
}
.qb-topbar-btn-icon { padding: 8px 10px; }

/* User-Menü */
.qb-user-menu { position: relative; }

.qb-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: transparent;
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.qb-user-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong, var(--border-mid));
}

.qb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bee), var(--bee-dark));
  color: #0D0F18;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .74rem;
  font-weight: 800;
  flex-shrink: 0;
}

.qb-user-name {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qb-user-chevron {
  transition: transform .18s;
  flex-shrink: 0;
  opacity: .6;
}
.qb-user-menu.open .qb-user-chevron { transform: rotate(180deg); }

.qb-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 218px;
  background: var(--surface-2, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,.4));
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 200;
}
.qb-user-menu.open .qb-user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.qb-user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-mid);
  font-size: .86rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .13s, color .13s;
}
.qb-user-dropdown a:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.qb-user-dropdown a svg { opacity: .7; flex-shrink: 0; }

.qb-user-dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.qb-user-dropdown-danger:hover {
  background: rgba(255,107,107,.1) !important;
  color: var(--red) !important;
}

/* Burger: nur unterhalb 992px sichtbar */
.qb-topbar .qb-burger { display: none; }

/* ── Mobile-Anpassungen ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .qb-topbar {
    padding: 10px 16px;
    margin: 0 0 18px;
    gap: 10px;
  }
  .qb-topbar .qb-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text);
    padding: 6px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .qb-topbar-logo { display: none; }
  .qb-topbar-shop { display: none; }
  .qb-topbar-title { font-size: .98rem; }
  .qb-topbar-btn-label { display: none; }
  .qb-topbar-btn { padding: 8px 10px; }
  .qb-user-name { display: none; }
  .qb-user-btn { padding: 5px; border-radius: 50%; }
  .qb-user-chevron { display: none; }
}

@media (max-width: 480px) {
  .qb-topbar-right { gap: 4px; }
  .qb-topbar-title { font-size: .92rem; }
}

/* Alte mobile-topbar ausblenden — durch .qb-topbar ersetzt */
.mobile-topbar { display: none !important; }

/* ── Direkte Nav-Links (Dashboard, Statistik) ─────────────────────────
   Nicht in einer Gruppe versteckt — 1 Klick statt 2. Optisch auf einer
   Ebene mit den Gruppen-Triggern, damit die Sidebar ruhig bleibt.       */
.qb-nav-direct {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-mid);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .14s, color .14s;
}
.qb-nav-direct:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.qb-nav-direct.active {
  background: var(--bee-glow);
  color: var(--bee-fg);
}
.qb-nav-direct .qb-nav-group-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .85;
}
.qb-nav-direct.active .qb-nav-group-ico { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   KOMPONENTEN v2 — Tabelle, KPI, Empty-State, Toolbar, Tabs
   Basis für die Seiten-Migration. Alte Klassen (.data-table, .card)
   bleiben unangetastet, damit nicht-migrierte Seiten weiterlaufen.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tabelle ──────────────────────────────────────────────────────── */
.qb-table-wrap {
  background: var(--surface, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  overflow: hidden;
}
.qb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.qb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.qb-table thead th {
  background: var(--surface-2, var(--bg-input));
  color: var(--text-mid);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.qb-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.qb-table tbody tr:last-child td { border-bottom: 0; }
.qb-table tbody tr { transition: background .12s; }
.qb-table tbody tr:hover { background: var(--bg-hover); }
.qb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.qb-table .muted { color: var(--text-mid); font-size: .82rem; }
.qb-table .actions { text-align: right; white-space: nowrap; }

/* ── KPI-Kacheln ──────────────────────────────────────────────────── */
/* Feste Spaltenzahl statt auto-fit — gleiches Prinzip wie beim Schnellzugriff:
   auto-fit füllt nach Platz auf und erzeugt krumme Reihen (bei 4 Kacheln
   schnell 3+1). Mit Stufen bleibt jede Reihe gleich besetzt.
   Anzahl per Modifier, Standard ist 4:
     .qb-kpi-grid          → 4 Kacheln  (4 → 2+2 → 1)
     .qb-kpi-grid.kpi-2    → 2 Kacheln  (2 → 2 → 1)
     .qb-kpi-grid.kpi-3    → 3 Kacheln  (3 → 3 → 1)
     .qb-kpi-grid.kpi-5    → 5 Kacheln  (5 bleibt 5, siehe unten)          */
.qb-kpi-grid {
  --kpi-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols), 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.qb-kpi-grid.kpi-2 { --kpi-cols: 2; }
.qb-kpi-grid.kpi-3 { --kpi-cols: 3; }
.qb-kpi-grid.kpi-5 { --kpi-cols: 5; }

@media (max-width: 1100px) {
  .qb-kpi-grid       { --kpi-cols: 2; }
  .qb-kpi-grid.kpi-2 { --kpi-cols: 2; }
  .qb-kpi-grid.kpi-3 { --kpi-cols: 3; }
  /* 5 ist eine Primzahl — jede Aufteilung ausser 5 oder 1 wird krumm.
     Deshalb bleiben es 5 schmalere Kacheln statt einer 2+2+1-Reihe. */
  .qb-kpi-grid.kpi-5 { --kpi-cols: 5; }
}
.qb-kpi {
  background: var(--surface, var(--bg-card));
  border: 1px solid var(--border);
  border-left: 3px solid var(--bee);
  border-radius: var(--radius, 12px);
  padding: 16px 18px;
  transition: box-shadow .18s, transform .18s;
}
.qb-kpi:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.qb-kpi-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-mid);
  font-weight: 700;
  margin-bottom: 5px;
}
.qb-kpi-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.qb-kpi-sub {
  font-size: .78rem;
  color: var(--text-mid);
  margin-top: 5px;
}
.qb-kpi-trend { font-weight: 700; }
.qb-kpi-trend.up   { color: var(--green); }
.qb-kpi-trend.down { color: var(--red); }

/* ── Empty-State ──────────────────────────────────────────────────── */
.qb-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-mid);
}
.qb-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--surface-2, var(--bg-input));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
}
.qb-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}
.qb-empty-text {
  font-size: .87rem;
  line-height: 1.55;
  max-width: 380px;
  margin: 0 auto 16px;
}

/* ── Toolbar (Filter-/Aktionsleiste über Listen) ──────────────────── */
.qb-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.qb-toolbar-spacer { flex: 1; }

/* ── Tabs ─────────────────────────────────────────────────────────── */
/* Filter-/Bereichswahl als umbrechende Kacheln.
   Vorher: eine horizontal scrollende Leiste — bei 11 Einträgen (Einstellungen)
   oder 7 (Bestellungen) musste man seitwärts wischen und sah nie alle
   Optionen auf einmal. Jetzt brechen sie um und bleiben vollständig sichtbar. */
.qb-tabs {
  --tab-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--tab-cols), 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.qb-tabs.tabs-3 { --tab-cols: 3; }
.qb-tabs.tabs-5 { --tab-cols: 5; }
.qb-tabs.tabs-6 { --tab-cols: 6; }

/* 4 Spalten so lange wie möglich halten: bei 7 Reitern ergibt das 4+3,
   bei 3 Spalten dagegen 3+3+1 — ein einzelner Reiter in der letzten Reihe
   wirkt verloren. Erst unter 780px auf 3 Spalten. */
@media (max-width: 780px) {
  .qb-tabs,
  .qb-tabs.tabs-5,
  .qb-tabs.tabs-6 { --tab-cols: 3; }
}
@media (max-width: 620px) {
  .qb-tabs,
  .qb-tabs.tabs-3,
  .qb-tabs.tabs-5,
  .qb-tabs.tabs-6 { --tab-cols: 2; }
}
.qb-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface, var(--bg-card));
  color: var(--text-mid);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .14s, border-color .14s, color .14s;
}
.qb-tab:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong, var(--border-mid));
  color: var(--text);
}
.qb-tab.active {
  background: var(--bee-glow);
  border-color: var(--bee);
  color: var(--bee-fg);
}
/* Zähler im Reiter (z.B. „Offen 12") — dezent, aber lesbar */
.qb-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--bg-hover);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
.qb-tab.active .qb-tab-count {
  background: var(--bee);
  color: #0D0F18;
}

/* ── Status-Badges ────────────────────────────────────────────────── */
.qb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.qb-badge-green  { background: rgba(45,212,160,.14);  color: var(--green); }
.qb-badge-orange { background: rgba(255,159,67,.14);  color: var(--orange); }
.qb-badge-red    { background: rgba(255,107,107,.14); color: var(--red); }
.qb-badge-blue   { background: rgba(91,164,245,.14);  color: var(--blue); }
.qb-badge-bee    { background: var(--bee-glow);       color: var(--bee-fg); }
.qb-badge-muted  { background: var(--bg-hover);       color: var(--text-mid); }

/* ── Mobile: Tabellen als Karten ──────────────────────────────────── */
@media (max-width: 767px) {
  .qb-table-card thead { display: none; }
  .qb-table-card tbody tr {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .qb-table-card tbody tr:hover { background: transparent; }
  .qb-table-card tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border: 0;
  }
  .qb-table-card tbody td::before {
    content: attr(data-label);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-mid);
    font-weight: 700;
    flex-shrink: 0;
  }
  .qb-table-card tbody td.actions { justify-content: flex-end; padding-top: 10px; }
  .qb-table-card tbody td.actions::before { display: none; }

  .qb-kpi-grid,
  .qb-kpi-grid.kpi-2,
  .qb-kpi-grid.kpi-3,
  .qb-kpi-grid.kpi-5 { --kpi-cols: 1; gap: 10px; }
  .qb-kpi { padding: 13px 14px; }
  .qb-kpi-value { font-size: 1.4rem; }
}

/* ── Meldungs-Boxen ───────────────────────────────────────────────────
   `.alert` wurde auf login.php, password-reset.php, password-forgot.php
   und updates.php verwendet, war aber nie definiert — die Meldungen
   erschienen als nackter Text. Hier nachgezogen, inkl. der von webBee
   mitportierten `.wb-alert`-Schreibweise als Alias.
   ──────────────────────────────────────────────────────────────────── */
.alert,
.wb-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface-2, var(--bg-input));
  color: var(--text);
  font-size: .88rem;
  line-height: 1.55;
  margin-bottom: 16px;
}
.alert a, .wb-alert a { color: inherit; font-weight: 700; }

.alert-success, .wb-alert.ok {
  border-left-color: var(--green);
  background: rgba(45,212,160,.08);
}
.alert-danger, .alert-error, .wb-alert.err {
  border-left-color: var(--red);
  background: rgba(255,107,107,.08);
}
.alert-warning, .wb-alert.warn {
  border-left-color: var(--orange);
  background: rgba(255,159,67,.08);
}
.alert-info, .wb-alert.info {
  border-left-color: var(--blue);
  background: rgba(91,164,245,.08);
}

/* webBee-Formularfeld-Klasse (aus der Update-Center-Portierung) */
.wb-form-control {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border-mid, var(--border));
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-input);
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
}
.wb-form-control:focus {
  outline: none;
  border-color: var(--bee);
  box-shadow: 0 0 0 3px var(--bee-glow);
}

/* ── Spezifitäts-Korrektur: v2-Felder in alten .form-group-Wrappern ───
   `.form-group label` (0,1,1) schlägt `.qb-check` (0,1,0) und zwingt
   Checkbox-Zeilen in winzige Versalien — sichtbar überall dort, wo eine
   migrierte v2-Checkbox noch in einem alten .form-group-Wrapper steckt
   (settings.php, product-add.php, product-edit.php).
   Betrifft `.qb-check`, weil es bewusst normaler Fliesstext ist;
   `.qb-label` ist deckungsgleich mit der Altregel und unkritisch.
   ──────────────────────────────────────────────────────────────────── */
label.qb-check,
.form-group label.qb-check,
.form-group .qb-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}

/* ── Eingabefelder: zwei systemische Korrekturen ───────────────────────
   Beide betreffen ALLE Seiten mit v2-Feldern (aktuell 16), nicht nur
   den Login-Bereich, wo sie aufgefallen sind.
   ──────────────────────────────────────────────────────────────────── */

/* 1) Autofill-Darstellung.
   Chrome/Safari übermalen ausgefüllte Felder mit eigenem hellem Hintergrund
   und dunklem Text — im Dunkel-Modus wird daraus ein weisses Feld mitten im
   dunklen Formular. Der box-shadow-inset-Trick ist der einzige Weg, das zu
   überschreiben; die lange transition verhindert das kurze Aufblitzen. */
.qb-input:-webkit-autofill,
.qb-input:-webkit-autofill:hover,
.qb-input:-webkit-autofill:focus,
.qb-select:-webkit-autofill,
.qb-textarea:-webkit-autofill,
.wb-form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
  box-shadow: 0 0 0 1000px var(--bg-input) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* 2) iOS-Zoom beim Fokussieren.
   Safari auf dem iPhone zoomt automatisch hinein, sobald ein Feld eine
   Schriftgrösse unter 16px hat — `.qb-input` liegt mit .92rem bei ~14.7px.
   Der Nutzer muss danach jedes Mal von Hand herauszoomen. Auf schmalen
   Screens deshalb exakt 16px erzwingen; am Desktop bleibt die kompaktere
   Grösse erhalten. */
@media (max-width: 767px) {
  .qb-input,
  .qb-select,
  .qb-textarea,
  .qb-search,
  .wb-form-control,
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── Tabelle direkt in einer Karte ────────────────────────────────────
   `.qb-table-wrap` bringt eigenen Rahmen und Radius mit — steckt sie in
   einer `.qb-card`, ergibt das einen doppelten Rahmen. Bisher wurde das
   auf mehreren Seiten mit inline `style="border:0"` umgangen; hier zentral
   gelöst, damit neue Seiten das nicht wieder von Hand nachbauen müssen.
   ──────────────────────────────────────────────────────────────────── */
.qb-card > .qb-table-wrap,
.qb-card > .qb-table-scroll > .qb-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ── .qb-actions freistehend ──────────────────────────────────────────
   War nur als `.qb-page-header .qb-actions` definiert. Die Klasse wird
   aber auf 15 Seiten auch ausserhalb des Seitenkopfs benutzt (Karten-
   Footer, Formular-Aktionen) — dort hatte sie bisher gar kein Styling
   und die Buttons stapelten sich untereinander.
   ──────────────────────────────────────────────────────────────────── */
.qb-actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── .qb-content auf schmalen Screens ─────────────────────────────────
   Feste 26px Seitenpadding fressen auf einem 375px-Display über ein
   Siebtel der Breite. Auf Mobile deutlich schmaler.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .qb-content { padding: 16px 14px 48px; }
  .qb-tabs { gap: 6px; }
  .qb-tab { padding: 8px 12px; font-size: .82rem; }
}


/* ── Blättern und Sortieren ───────────────────────────────────────────────
   Gemeinsam für Bestellungen, Artikel, Kunden und Rechnungen. Vorher hatte
   jede Liste ihre eigenen Inline-Styles — mit unterschiedlichem Aussehen. */
.qb-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.qb-pagination-info { font-size: .82rem; color: var(--text-mid); }
.qb-pagination-nav  { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.qb-page-btn {
  min-width: 34px; height: 34px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-mid);
  font-size: .84rem; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.qb-page-btn:hover      { background: var(--bg-hover); color: var(--text); }
.qb-page-btn.is-current { background: var(--bee); border-color: var(--bee); color: #0D0F18; }
.qb-page-btn.is-disabled{ opacity: .35; pointer-events: none; }
.qb-page-gap            { padding: 0 2px; color: var(--text-light); font-size: .84rem; }

/* Sortierbare Spaltenköpfe */
.qb-table th.qb-sort           { padding: 0; }
.qb-table th.qb-sort > a {
  display: flex; align-items: center; gap: 5px;
  padding: 11px 14px; color: inherit; text-decoration: none;
  font: inherit; white-space: nowrap;
}
.qb-table th.qb-sort > a:hover { color: var(--text); background: var(--bg-hover); }
.qb-table th.qb-sort.is-active > a { color: var(--bee-fg); }
.qb-sort-arrow { font-size: .62rem; line-height: 1; opacity: .85; }
.qb-table th.qb-sort.num > a { justify-content: flex-end; }

/* Sortier-Auswahl fürs Handy: In der Kartenansicht sind die Spaltenköpfe
   ausgeblendet, damit wäre sonst gar kein Sortieren mehr möglich. */
.qb-sort-mobile { display: none; }
@media (max-width: 767px) {
  .qb-sort-mobile { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .qb-sort-mobile label  { font-size: .8rem; color: var(--text-mid); white-space: nowrap; }
  .qb-sort-mobile select { flex: 1; min-width: 0; }
}

@media (max-width: 640px) {
  .qb-pagination      { justify-content: center; }
  .qb-pagination-info { width: 100%; text-align: center; }
}

/* ── Ortsvorschlag zur PLZ (assets/js/plz.js) ───────────────────────────── */
.plz-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.plz-wahl-label { font-size: .74rem; color: var(--text-light); }
.plz-wahl-opt {
  font-size: .76rem; padding: 3px 9px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-mid);
  font-family: inherit;
}
.plz-wahl-opt:hover { border-color: var(--bee); color: var(--bee); }

/* ═══════════════════════════════════════════════════════════
   Demoversion — Hinweise auf gesperrte Funktionen
   ═══════════════════════════════════════════════════════════ */
.qb-demo-band {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 16px; font-size: .83rem; line-height: 1.45;
  background: #1D4ED8; color: #fff;
}
.qb-demo-band svg { flex-shrink: 0; margin-top: 2px; }
.qb-demo-meldung {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: .86rem; font-weight: 600;
  background: #FEF3C7; color: #78350F; border-bottom: 1px solid #F59E0B;
}
.qb-demo-hinweis {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 99px;
  font-size: .78rem; font-weight: 600; line-height: 1.3;
  background: #FEF3C7; color: #78350F; border: 1px solid #F59E0B;
}
.qb-demo-hinweis svg { flex-shrink: 0; }
/* Gesperrte Felder und Knöpfe: sichtbar, aber nicht bedienbar */
.qb-demo-aus { opacity: .55; pointer-events: none; }
/* Ganzer Einstellungs-Bereich gesperrt (Schnittstellen, chicBee): Karten sichtbar, nicht bedienbar */
.qb-demo-tab .qb-card { opacity: .55; pointer-events: none; }
/* Rechtstexte: lesen ja, ändern nein */
.qb-demo-legal .rte-wrap, .qb-demo-legal textarea, .qb-demo-legal .qb-card-actions button { opacity: .6; pointer-events: none; }