:root {
  --bg:       #f4f5f7;
  --white:    #ffffff;
  --bg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  --border:   #e2e5eb;
  --border2:  #d0d5df;
  --text:     #1a1d24;
  --muted:    #7a8096;
  --light:    #f0f2f6;

  --base:     #2563eb;
  --base-bg:  #eff4ff;
  --base-bd:  #bfd0fa;

  --transit:  #d97706;
  --transit-bg: #fffbeb;
  --transit-bd: #fcd778;

  --ber:      #059669;
  --ber-bg:   #ecfdf5;
  --ber-bd:   #a7f0d0;

  --danger:   #dc2626;
  --danger-bg:#FCEBEB;
  --danger-bd:#FCA5A5;
  --warn:     #d97706;
  --warn-bg:  #FAEEDA;
  --warn-text:#854F0B;
  --ok:       #059669;
  --ok-bg:    #EAF3DE;
  --ok-text:  #3B6D11;
  --ok-dark:  #2e7d32;
  --ok-hover: #1b5e20;

  --badge-versand-bg:      #E6F1FB;
  --badge-versand-text:    #185FA5;
  --badge-einkauf-bg:      #D1FAE5;
  --badge-einkauf-text:    #065F46;
  --badge-zugang-bg:       #EAF3DE;
  --badge-zugang-text:     #3B6D11;
  --badge-auslieferung-bg: #FAECE7;
  --badge-auslieferung-text:#993C1D;
  --badge-storno-bg:       #FCEBEB;
  --badge-storno-text:     #A32D2D;
  --badge-korrektur-bg:    #F0E6FA;
  --badge-korrektur-text:  #6B21A8;
  --badge-bearbeitet-bg:   rgba(100,100,200,.12);
  --badge-bearbeitet-text: #6464c8;
  --badge-angekommen-bg:   rgba(22,163,74,.12);
  --badge-angekommen-text: #16a34a;

  --sum-positive: #3B6D11;
  --sum-negative: #E24B4A;
  --zero-color:   #c5cad8;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 99px;

  --banner-h: 0px;
  --font-h: 'Fraunces', serif;
  --font-b: 'Epilogue', sans-serif;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { background:var(--bg); color:var(--text); font-family:var(--font-b); font-size:13.5px; line-height:1.5; transition:background .3s ease, color .3s ease; }
body::before { content:''; position:fixed; inset:0; background:var(--bg-noise); pointer-events:none; z-index:0; }

/* ── GLOBAL INPUT COLORS (Dark Mode kompatibel) ─────────── */
input, select, textarea { color:var(--text); }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.6; }
option { background:var(--white); color:var(--text); }

/* ── LAYOUT ─────────────────────────────────────────────── */
.shell { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.shell.sidebar-collapsed { grid-template-columns:64px 1fr; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  background: var(--white);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  box-shadow: 2px 0 8px rgba(0,0,0,.04);
  overflow-x:hidden;
  overflow-y:auto;
  width:240px;
  transition:width .25s ease;
  align-self:start;
}
.sidebar.collapsed { width:64px; }
.sidebar.collapsed .logo-sub,
.sidebar.collapsed .logo-mark,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .sidebar-footer-name,
.sidebar.collapsed .sidebar-footer-role,
.sidebar.collapsed .nav-section-items.collapsed { display:none; }
.sidebar.collapsed .nav-section-items { max-height:400px !important; opacity:1 !important; }
.sidebar.collapsed .nav-item { padding:12px 0; justify-content:center; gap:0; border-left:none; border-radius:var(--radius-sm); position:relative; }
.sidebar.collapsed .nav-item.active { border-left:none; border-radius:8px; margin:0 8px; width:calc(100% - 16px); }
.sidebar.collapsed .nav-item svg { width:18px; height:18px; opacity:.8; }
.sidebar.collapsed #nav-transit-badge { position:absolute!important;top:6px!important;left:calc(50% + 6px)!important;right:auto!important;margin:0!important;padding:0!important;width:7px!important;height:7px!important;min-width:0!important;font-size:0!important;border-radius:50%!important;box-shadow:0 0 0 2px var(--bg); }
.sidebar.collapsed #nav-health-badge { position:absolute!important;top:6px!important;left:calc(50% + 6px)!important;right:auto!important;margin:0!important;padding:0!important;width:7px!important;height:7px!important;min-width:0!important;font-size:0!important;border-radius:50%!important;box-shadow:0 0 0 2px var(--bg); }
.sidebar.collapsed .nav-item.active svg { opacity:1; }
.sidebar.collapsed .logo { padding:16px 0; display:flex; justify-content:center; align-items:center; }
.sidebar.collapsed .logo-icon-wrap { margin:0 auto; }
.sidebar.collapsed .sidebar-footer { padding:10px 0; display:flex; justify-content:center; }
.sidebar.collapsed .user-avatar-btn { margin:0; }

/* Toggle button — at bottom of footer */
.sidebar-toggle-btn {
  background:none; border:1.5px solid var(--border); border-radius:8px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--sidebar-muted, var(--muted)); transition:all .2s;
}
.sidebar-toggle-btn:hover { color:var(--sidebar-text, var(--text)); background:var(--sidebar-hover, var(--light)); border-color:transparent; }
/* Expanded: full width strip */
.sidebar-toggle-expanded { width:100%; padding:6px 0; margin-top:8px; gap:6px; }
/* Collapsed: square icon button */
.sidebar.collapsed .sidebar-toggle-btn { width:32px; height:32px; padding:0; border-radius:8px; }
.sidebar.collapsed .sf-expanded { display:none !important; }
.sidebar.collapsed .sf-collapsed { display:flex !important; }
.sf-expanded { display:block; }
.sf-collapsed { display:none; }
.logo {
  padding:28px 24px 22px;
  border-bottom:1px solid var(--border);
}
.logo-mark {
  font-family:var(--font-h);
  font-size:22px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.5px;
}
.logo-mark span { color:var(--base); }
.logo-sub { font-size:11px; color:var(--muted); margin-top:2px; font-weight:500; letter-spacing:.3px; }

nav { flex:1; padding:16px 0; overflow-y:auto; }
.nav-section {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); padding:14px 24px 6px;
  cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  transition:color .15s;
}
.nav-section:hover { color:var(--text); }
.nav-section::after {
  content:'';
  display:inline-block;
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-right:4px;
  transition:transform .2s ease;
  flex-shrink:0;
}
.nav-section.collapsed::after { transform:rotate(-45deg); }
.nav-section-items {
  overflow:hidden;
  max-height:400px;
  transition:max-height .25s ease, opacity .2s ease;
  opacity:1;
}
.nav-section-items.collapsed {
  max-height:0;
  opacity:0;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 24px; cursor:pointer; font-size:13px;
  color:var(--muted); font-weight:500;
  border-left:3px solid transparent;
  transition:all .13s;
}
.nav-item { color: var(--sidebar-text, var(--text)); }
.nav-item:hover { color: var(--sidebar-text, var(--text)); background: var(--sidebar-hover, var(--light)); }
.nav-item.active { color: var(--base); background: var(--base-bg); }
.nav-section { color: var(--sidebar-muted, var(--muted)); }
.logo-sub { color: var(--sidebar-muted, var(--muted)); }
.nav-item.active { color:var(--base); border-left-color:var(--base); background:var(--base-bg); }
.nav-item svg { width:15px; height:15px; flex-shrink:0; opacity:.7; }
.nav-item.active svg { opacity:1; }

.sidebar-footer {
  padding:10px 14px 12px;
  border-top:1px solid var(--border);
  font-size:11px; color:var(--muted);
}

/* Sidebar Footer — User Card */
.sf-user-card {
  display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:var(--radius-md);
  cursor:pointer; transition:background .15s;
  min-width:0; flex:1;
}
.sf-user-card:hover { background:var(--sidebar-hover, var(--light)); }
.sf-user-card:hover .sf-logout { opacity:1; }
.sf-top-row { display:flex; align-items:center; gap:6px; margin-bottom:2px; }

/* Avatar */
.sf-avatar {
  width:30px; height:30px; border-radius:50%;
  background:var(--base);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:white;
  font-family:var(--font-b); flex-shrink:0;
}
.sf-user-info { min-width:0; flex:1; }
.sf-name {
  font-size:13px; font-weight:600; color:var(--sidebar-text, var(--text));
  font-family:var(--font-b);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;
}
.sf-role {
  font-size:10.5px; color:var(--sidebar-muted, var(--muted));
  font-family:var(--font-b); line-height:1.3;
}

/* Logout — erscheint beim Hover */
.sf-logout {
  flex-shrink:0; background:none; border:none;
  padding:5px; cursor:pointer; color:var(--muted);
  border-radius:var(--radius-sm);
  display:flex; align-items:center;
  opacity:0; transition:color .15s, background .15s, opacity .15s;
}
.sf-logout:hover { color:var(--danger); background:var(--danger-bg); }

/* Controls row: Datum | Flags + Dark */
.sf-controls {
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 8px 4px;
}
.sf-meta { display:flex; align-items:center; gap:5px; }
.sf-date { font-size:10.5px; color:var(--sidebar-muted, var(--muted)); font-family:var(--font-b); }
.sf-backup-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--muted); cursor:pointer; flex-shrink:0;
}
.sf-actions { display:flex; align-items:center; gap:2px; }
.sf-lang-btn {
  padding:3px 6px; font-size:12px;
  border-radius:var(--radius-sm);
  border:1.5px solid transparent;
  background:none; cursor:pointer; line-height:1;
}
.sf-lang-btn.active { border-color:var(--border); background:var(--light); }
.sf-icon-btn {
  background:none; border:none; padding:5px; cursor:pointer;
  color:var(--muted); border-radius:var(--radius-sm);
  display:flex; align-items:center;
  transition:color .15s, background .15s; line-height:1;
}
.sf-icon-btn:hover { color:var(--text); background:var(--light); }
.sf-icon-danger:hover { color:var(--danger) !important; background:var(--danger-bg); }

/* Collapse button */
.sf-collapse-btn {
  width:100%; margin-top:6px; padding:6px 0;
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  background:none; cursor:pointer;
  color:var(--muted); font-size:11px;
  font-family:var(--font-b); font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:background .15s, color .15s, border-color .15s;
}
.sf-collapse-btn:hover { background:var(--light); color:var(--text); border-color:#d1d5db; }

/* Collapsed state: avatar only */
.sf-avatar-sm {
  width:32px; height:32px; border-radius:50%;
  background:var(--base);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:white;
  cursor:pointer; transition:opacity .15s;
}
.sf-avatar-sm:hover { opacity:.8; }

/* ── MAIN ────────────────────────────────────────────────── */
.main { overflow-y:auto; min-height:100vh; min-width:0; }

.page { display:none; padding:40px 44px; max-width:1400px; overflow-x:hidden; }
.ph h1 { background:linear-gradient(135deg, var(--text) 0%, var(--base) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page.active { display:block; animation:fadeIn .16s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* ── PAGE HEADER ─────────────────────────────────────────── */
.ph { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; }
.ph h1 { font-family:var(--font-h); font-size:28px; font-weight:600; letter-spacing:-.5px; }
.ph p  { color:var(--muted); font-size:12px; margin-top:4px; }
.ph-actions { display:flex; gap:8px; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:8px; font-size:13px;
  font-family:var(--font-b); font-weight:600; cursor:pointer;
  border:1.5px solid transparent; transition:all .13s;
  white-space:nowrap;
}
.btn-primary { background:var(--base); color:#fff; border-color:var(--base); }
.btn-primary:hover { background:#1d4fd8; border-color:#1d4fd8; box-shadow:0 4px 12px rgba(37,99,235,.25); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); box-shadow:0 1px 3px rgba(37,99,235,.3); }
.btn-outline { background:var(--white); color:var(--text); border-color:var(--border2); }
.btn-outline:hover { background:var(--light); border-color:var(--muted); }
.btn-danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bd); }
.btn-danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); box-shadow:0 4px 12px rgba(220,38,38,.25); transform:translateY(-1px); }
.btn-danger:active { transform:translateY(0); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-ghost { background:transparent; color:var(--muted); border-color:transparent; }
.btn-ghost:hover { color:var(--danger); }
.btn-icon { width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.btn-icon.btn-ghost { border-color:var(--border); color:var(--muted); }
.btn-icon.btn-ghost:hover { border-color:var(--border2); }

/* ── LOCATION CARDS (Dashboard) ──────────────────────────── */
.location-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.loc-card {
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:20px 22px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s;
}
.loc-card:hover { box-shadow:var(--shadow); }
.loc-card.base-card { border-top:3px solid var(--base); }
.loc-card.transit-card { border-top:3px solid var(--transit); }
.loc-card.ber-card { border-top:3px solid var(--ber); }

.loc-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.loc-name { font-family:var(--font-h); font-weight:600; font-size:15px; }
.loc-desc { font-size:11px; color:var(--muted); margin-top:1px; }
.loc-badge { margin-left:auto; font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; }
.badge-base { background:var(--base-bg); color:var(--base); }
.badge-transit { background:var(--transit-bg); color:var(--transit); }
.badge-ber { background:var(--ber-bg); color:var(--ber); }

.prod-mini-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.prod-mini {
  background:var(--light);
  border-radius:8px; padding:10px 12px;
  border:1px solid var(--border);
  height:56px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.prod-mini-name { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.prod-mini-val { font-size:16px; font-weight:700; color:var(--text); font-family:var(--font-h); }
.prod-mini-val.val-low { color:var(--warn); }
.prod-mini-val.val-zero { color:#b0b8cc; font-weight:500; }
.prod-mini-val.val-zero-transit { color:var(--transit); font-weight:500; }

/* ── DASHBOARD CARD STYLES ────────────────────────────────── */
/* Bold Total */
.loc-card-bold .db-bold-total {
  font-size:40px; font-weight:800; line-height:1; font-family:var(--font-h);
  color:var(--text); margin-bottom:10px;
}
.loc-card-bold .db-bold-unit { font-size:16px; font-weight:500; color:var(--muted); }

/* Ber-First */
.db-berfirst-wrap { display:flex; gap:16px; }
.db-berfirst-main { flex:1.6; min-width:0; }
.db-berfirst-side { flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
@media (max-width:768px){
  .db-berfirst-wrap { flex-direction:column; }
  .db-berfirst-side { flex-direction:row; }
}

/* ── FLOW DIAGRAM ─────────────────────────────────────────── */
.flow-bar {
  display:flex; align-items:center; gap:0;
  background:var(--white); border:1px solid var(--border);
  border-radius:12px; padding:14px 20px; margin-bottom:28px;
  box-shadow:var(--shadow-sm);
  font-size:12px;
}
.flow-step { display:flex; align-items:center; gap:8px; padding:0 16px; }
.flow-step:first-child { padding-left:0; }
.flow-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.flow-icon.base { background:var(--base-bg); }
.flow-icon.transit { background:var(--transit-bg); }
.flow-icon.ber { background:var(--ber-bg); }
.flow-label { font-weight:600; color:var(--text); }
.flow-sub { color:var(--muted); font-size:11px; }
.flow-arrow { font-size:18px; color:var(--border2); padding:0 4px; }

/* ── TABLE ────────────────────────────────────────────────── */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.card-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--white); }
.card-title { font-family:var(--font-h); font-size:15px; font-weight:600; }

.tbl-outer { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead { position:sticky; top:0; z-index:1; }
th {
  padding:9px 14px; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted); background:var(--light);
  border-bottom:1px solid var(--border);
  white-space:nowrap; text-align:right;
}
th.left, th:first-child, th:nth-child(2) { text-align:left; }
td {
  padding:10px 14px; border-bottom:1px solid var(--border);
  white-space:nowrap; text-align:right; color:var(--text);
}
td.left, td:first-child { text-align:left; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--light); }
.td-zero { color:var(--muted); opacity:.5; }
.td-pos { color:var(--ok); font-weight:600; }
.td-neg { color:var(--danger); font-weight:600; }
.td-transit { color:var(--transit); font-weight:600; }

/* ── LOCATION HEADER IN TABLE ──────────────────────────────── */
.th-group-base { background:var(--base-bg) !important; color:var(--base) !important; border-bottom:2px solid var(--base-bd) !important; }
.th-group-transit { background:var(--transit-bg) !important; color:var(--transit) !important; border-bottom:2px solid var(--transit-bd) !important; }
.th-group-ber { background:var(--ber-bg) !important; color:var(--ber) !important; border-bottom:2px solid var(--ber-bd) !important; }

/* ── TAGS ─────────────────────────────────────────────────── */
.tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; }
.tag-abgang  { background:var(--danger-bg); color:var(--danger); }
.tag-zugang  { background:var(--ber-bg); color:var(--ber); }
.tag-versand { background:var(--transit-bg); color:var(--transit); }
.tag-bestand { background:var(--light); color:var(--muted); }

/* ── Badges (Verlauf) ─── */
.badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px; white-space:nowrap; }
.badge-versand      { background:var(--badge-versand-bg);      color:var(--badge-versand-text); }
.badge-einkauf      { background:var(--badge-einkauf-bg);      color:var(--badge-einkauf-text); }
.badge-zugang       { background:var(--badge-zugang-bg);       color:var(--badge-zugang-text); }
.badge-auslieferung { background:var(--badge-auslieferung-bg); color:var(--badge-auslieferung-text); }
.badge-storno       { background:var(--badge-storno-bg);       color:var(--badge-storno-text); }
.badge-korrektur    { background:var(--badge-korrektur-bg);    color:var(--badge-korrektur-text); }

/* ── Verlauf-Einträge ─── */
.verlauf-timeline { position:relative; padding:4px 0 4px 28px; }
.verlauf-timeline::before {
  content:''; position:absolute; left:9px; top:8px; bottom:0;
  width:3px; background:var(--border); border-radius:1.5px;
}
.verlauf-entry { cursor:pointer; user-select:none; position:relative; }
.verlauf-entry:hover .entry-note-icon.no-note { opacity:.35 !important; }
.verlauf-entry .entry-note-icon.has-note { opacity:.85; }

/* Notiz-Tooltip: via JS showNoteTooltip() / hideNoteTooltip() (position:fixed) */
.entry-note-icon.has-note { position:relative; }
.verlauf-entry::before {
  content:''; position:absolute; left:-25.5px; top:18px;
  width:10px; height:10px; border-radius:50%;
  background:var(--border);
  z-index:1; transition:background .15s;
}
.verlauf-entry:hover::before { background:var(--primary, #5b6abf); }
.verlauf-month-header { position:relative; user-select:none; line-height:1; }
.verlauf-month-header::before {
  content:''; position:absolute; left:-26px;
  top:50%; transform:translateY(calc(-50% - 1px));
  width:16px; height:16px; border-radius:50%;
  background:var(--border);
  z-index:2; transition:background .15s;
}
.verlauf-month-header:hover::before { background:var(--primary, #5b6abf); }
.verlauf-day-separator { position:relative; }
.aus-entry-row { user-select:none; }
.aus-entry-row:hover .entry-note-icon.no-note { opacity:.35 !important; }
.aus-entry-row .entry-note-icon.has-note { opacity:.85; }
.verlauf-detail { display:none; padding:0 14px; }
.verlauf-detail.open { display:block; padding:8px 14px 12px; }
.verlauf-chevron { display:inline-flex; align-items:center; transition:transform .25s ease; margin-left:4px; }
.verlauf-chevron.open { transform:rotate(180deg); }
.user-initialen {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; font-size:9px; font-weight:700;
  letter-spacing:-.3px; color:var(--white); flex-shrink:0;
}

/* ── FORM ─────────────────────────────────────────────────── */
.form-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); position:relative; }
.loc-section { margin-bottom:24px; }
.loc-section-header {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; margin-bottom:12px;
  padding:8px 12px; border-radius:8px;
}
.loc-section-header.base { background:var(--base-bg); color:var(--base); }
.loc-section-header.transit { background:var(--transit-bg); color:var(--transit); }
.loc-section-header.ber { background:var(--ber-bg); color:var(--ber); }

.field { margin-bottom:16px; }
.field label { display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:5px; }
.field input, .field select {
  width:100%; background:var(--white); border:1.5px solid var(--border);
  border-radius:8px; padding:9px 12px; font-size:13px;
  color:var(--text); font-family:var(--font-b);
  outline:none; transition:border-color .13s, box-shadow .13s;
}
.field input:focus, .field select:focus {
  border-color:var(--base);
  box-shadow:0 0 0 3px var(--base-bg);
}
.field input[type=number] { text-align:right; }
.field input::placeholder { color:var(--muted); opacity:.6; }

.form-actions { display:flex; gap:10px; justify-content:flex-end; padding-top:20px; border-top:1px solid var(--border); margin-top:8px; }

/* ── FILTER BAR ───────────────────────────────────────────── */
.filter-bar { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.filter-bar select, .filter-bar input[type=date] {
  background:var(--white); border:1.5px solid var(--border);
  color:var(--text); padding:8px 12px; border-radius:8px;
  font-family:var(--font-b); font-size:12.5px; font-weight:500;
  outline:none; box-shadow:var(--shadow-sm);
}
.filter-bar select:focus, .filter-bar input:focus { border-color:var(--base); }

/* ── EMPTY ────────────────────────────────────────────────── */
.empty { padding:48px; text-align:center; color:var(--muted); font-size:13px; }
.empty-icon { font-size:32px; margin-bottom:8px; opacity:.4; }

/* ── SUMMARY STRIP ────────────────────────────────────────── */
.summary-strip {
  display:flex; gap:0;
  background:var(--white); border:1px solid var(--border);
  border-radius:12px; overflow-x:auto; box-shadow:var(--shadow-sm);
  margin-bottom:28px;
}
.ss-item { flex:1; min-width:130px; padding:14px 16px; border-right:1px solid var(--border); }
.ss-item:last-child { border-right:none; }
.ss-label { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); }
.ss-val { font-family:var(--font-h); font-size:20px; font-weight:700; margin-top:3px; white-space:nowrap; }
.ss-val.blue { color:var(--base); }
.ss-val.orange { color:var(--transit); }
.ss-val.green { color:var(--ber); }
.ss-sub { font-size:10px; color:var(--muted); margin-top:3px; min-height:14px; }

/* ── PAGE TABS ───────────────────────────────────────────── */
.page-tabs {
  display:flex; gap:4px;
  background:var(--light);
  border-radius:100px;
  padding:3px;
  width:fit-content;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border:0.5px solid var(--border);
}
.page-tab {
  flex:0 0 auto; padding:6px 16px; border-radius:100px; font-size:12px;
  font-family:var(--font-b); font-weight:600; cursor:pointer;
  border:none; background:transparent; color:var(--muted);
  white-space:nowrap; transition:all .15s;
}
.page-tab:hover:not(.active) { color:var(--text); }
.page-tab.active { background:var(--base-bg); color:var(--base); border:0.5px solid var(--base-bd); font-weight:700; }

/* ── TRANSIT BANNER ──────────────────────────────────────── */
.transit-banner-card {
  background: var(--transit-bg);
  border: 2px solid var(--transit-bd);
  border-radius: 14px; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: background .3s ease, border-color .15s, box-shadow .15s;
  box-shadow: var(--shadow-sm);
}
.transit-banner-card:hover { box-shadow: var(--shadow); border-color: var(--transit); }
.tb-left { display: flex; align-items: center; gap: 14px; }
.tb-pulse {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--transit);
  box-shadow: 0 0 0 0 rgba(217,119,6,.4);
  animation: pulse-ring 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(217,119,6,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(217,119,6,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
}
.tb-title { font-family: var(--font-h); font-size: 16px; font-weight: 600; color: var(--transit); }
.tb-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tb-right { display: flex; align-items: center; gap: 12px; }
.tb-total { font-family: var(--font-h); font-size: 20px; font-weight: 700; color: var(--transit); }
.tb-chevron { font-size: 12px; color: var(--muted); transition: transform .2s; }
.tb-chevron.open { transform: rotate(180deg); }

.transit-detail-inner {
  background: var(--white); border: 1.5px solid var(--transit-bd);
  border-top: none; border-radius: 0 0 14px 14px;
  padding: 20px 24px;
}
.td-fahrer-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.td-fahrer-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--transit-bg); border: 1px solid var(--transit-bd);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  color: var(--transit);
}
.td-prod-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.td-prod-item {
  background: var(--light); border-radius: 8px; padding: 8px 10px;
  border: 1px solid var(--border); text-align: center;
}
.td-prod-name { font-size: 9px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.td-prod-val  { font-family: var(--font-h); font-size: 15px; font-weight: 700; color: var(--transit); margin-top: 2px; }

/* ── SETTINGS ────────────────────────────────────────────── */
.expiry-badge {
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px;
  background:var(--ber-bg); color:var(--ber); border:1px solid var(--ber-bd);
}
.expiry-badge.warn { background:var(--transit-bg); color:var(--transit); border-color:var(--transit-bd); }
.expiry-badge.mhd-badge-warn    { background:#fefce8; color:#854d0e; border-color:#eab308; }
.expiry-badge.mhd-badge-expired { background:#f0f0f0; color:#888; border-color:#bbb; }
.expiry-badge.danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bd); }

/* ── MHD-AMPEL DOTS ──────────────────────────────────────── */
.mhd-dots { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.mhd-dot  {
  display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(0,0,0,0.25);
  box-sizing:border-box;
}
.mhd-dot-green   { background:#16a34a; border-color:#15803d; }
.mhd-dot-yellow  { background:#eab308; border-color:#ca8a04; }
.mhd-dot-red     { background:#dc2626; border-color:#b91c1c; }
.mhd-dot-expired { background:#94a3b8; border-color:#64748b; }
.mhd-dot-grey    { background:#9ca3af; border-color:#6b7280; }

/* ── FILTER TOGGLE ───────────────────────────────────────── */
.filter-drop-item {
  display:block; width:100%; padding:9px 16px; text-align:left;
  background:none; border:none; font-size:13px; font-weight:500;
  color:var(--text); cursor:pointer; transition:background .15s;
}
.filter-drop-item:hover { background:var(--light); }
.filter-drop-item.active { color:var(--base); font-weight:700; background:var(--base-bg); }
.filter-drop-item + .filter-drop-item { border-top:1px solid var(--border); }
.filter-toggle {
  padding:5px 14px; border-radius:6px; font-size:12px;
  font-family:var(--font-b); font-weight:600; cursor:pointer;
  border:none; background:transparent; color:var(--muted);
  transition:all .13s;
}
.filter-toggle:hover { color:var(--text); }
.filter-toggle.active { background:var(--white); color:var(--text); box-shadow:var(--shadow-sm); }

/* ── CHARGE ROW ──────────────────────────────────────────── */
.charge-row { display:flex; align-items:flex-end; gap:8px; padding:10px 14px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md); margin-bottom:8px; flex-wrap:nowrap; transition:border-color .15s; }
.charge-row:hover { border-color:var(--border2); }
.charge-row.charge-row-draft { flex-wrap:wrap; }
.charge-row .field:nth-child(1) { flex:2; min-width:120px; }
.charge-row .field:nth-child(2) { flex:0 0 96px; }
.charge-row .field:nth-child(3) { flex:0 0 80px; }
/* Draft row: quick-select is first child, fields shift by 1 */
.charge-row-draft .field:nth-child(2) { flex:2; min-width:120px; }
.charge-row-draft .field:nth-child(3) { flex:0 0 96px; }
.charge-row-draft .field:nth-child(4) { flex:0 0 80px; }
/* Quick select pill color */
.charge-row-draft .cf-quick-pill {
  background: var(--base-bg);
  border-color: var(--base-bd);
  color: var(--base);
}
.charge-row-draft .cf-quick-pill:hover {
  background: var(--base) !important;
  color: white !important;
  border-color: var(--base) !important;
}
.charge-row-draft .cf-quick-pill.selected {
  background: var(--base) !important;
  color: white !important;
  border-color: var(--base) !important;
}
.charge-row label { font-size:10px !important; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; display:block; }
.charge-row input,
.charge-row select { font-size:13px; height:36px; box-sizing:border-box; }
.charge-row input:focus { outline:none; border-color:var(--base) !important; box-shadow:0 0 0 3px var(--base-bg); }

/* ── NAV SORT ────────────────────────────────────────────── */
.nav-sort-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; background:var(--white);
  border:1.5px solid var(--border); border-radius:10px;
  margin-bottom:6px; user-select:none;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, border-color .1s, background .1s;
  touch-action:none;
}
.nav-sort-item.dragging {
  opacity:.5; box-shadow:var(--shadow-lg);
  transform:scale(1.02); border-color:var(--base);
  background:var(--base-bg); z-index:10; position:relative;
}
.nav-sort-item.drag-over-top { border-top:3px solid var(--base); }
.nav-sort-item.drag-over-bottom { border-bottom:3px solid var(--base); }
.nav-sort-move-btn {
  background:none; border:none; cursor:pointer;
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:14px;
  transition:background .1s, color .1s;
}
.nav-sort-move-btn:hover:not(:disabled) { background:var(--light); color:var(--text); }
.nav-sort-move-btn:disabled { opacity:.25; cursor:default; }
.nav-sort-move-btn:active:not(:disabled) { background:var(--base-bg); color:var(--base); transform:scale(.9); }
.nav-sort-section { cursor:grab; }
.drag-handle {
  color:var(--border2); font-size:18px; flex-shrink:0; cursor:grab;
  padding:0 2px; line-height:1;
}

/* ── ACCENT DOTS ─────────────────────────────────────────── */
.accent-dot {
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:2.5px solid transparent; outline:none;
  transition:all .15s; padding:0;
}
.accent-dot.active { border-color:var(--border2); }
.accent-dot:hover:not(.active) { transform:scale(1.08); }

/* ── THEME BUTTONS ───────────────────────────────────────── */
.theme-btn {
  border:3px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.theme-btn:hover {
  transform:scale(1.15);
  border-color:var(--muted);
  box-shadow:var(--shadow);
}
.theme-btn.active {
  border-color:var(--base);
  box-shadow:0 0 0 3px var(--base-bg), var(--shadow);
  transform:scale(1.1);
}

/* ── STOCK DISPLAY GRID ──────────────────────────────────── */
.stock-display-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ── FAB PILL BUTTONS ────────────────────────────────────── */
.fab-pill-btn {
  height: 52px;
  min-width: 52px;
  max-width: 52px;
  border-radius: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: max-width 0.28s cubic-bezier(0.4,0,0.2,1), padding 0.28s ease;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  cursor: pointer;
  border: none;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  color: white;
}
.fab-pill-btn:hover {
  max-width: 220px;
  padding: 0 18px 0 14px;
}
.fab-pill-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  transition: max-width 0.25s ease, opacity 0.15s ease 0.1s, margin-left 0.25s ease;
  pointer-events: none;
}
.fab-pill-btn:hover .fab-pill-label {
  max-width: 160px;
  opacity: 1;
  margin-left: 8px;
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #testmode-banner { display: none !important; }
  input[type="text"], input[type="number"], input[type="date"], select, textarea {
    font-size: 16px !important;
  }
  /* Layout */
  .shell { grid-template-columns:1fr; }
  .main { min-height:100vh; min-height:100dvh; margin-left:0 !important; }
  .page { padding:16px 12px; max-width:100vw; overflow-x:hidden; }

  /* Sidebar as drawer – capped for small phones */
  .sidebar {
    position:fixed; top:0; left:0; height:100vh; height:100dvh;
    width:min(280px, 85vw); z-index:100;
    transform:translateX(-100%); transition:transform .38s cubic-bezier(.32,0.72,0,1);
    padding-top:env(safe-area-inset-top, 0); padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.15); }

  .mobile-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.4);
    z-index:99; backdrop-filter:blur(2px);
    opacity:0; pointer-events:none;
    transition:opacity .38s cubic-bezier(.32,0.72,0,1);
  }
  .mobile-overlay.open { opacity:1; pointer-events:auto; }

  /* Mobile header */
  .mobile-header {
    display:flex !important; align-items:center; justify-content:space-between;
    padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top, 0));
    padding-left:calc(16px + env(safe-area-inset-left, 0));
    padding-right:calc(16px + env(safe-area-inset-right, 0));
    background:var(--white);
    border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:50;
    box-shadow:var(--shadow-sm);
  }
  .mobile-logo { font-family:var(--font-h); font-size:18px; font-weight:700; color:var(--text); }
  .mobile-logo span { color:var(--base); }
  .hamburger {
    display:flex; flex-direction:column; gap:5px; cursor:pointer;
    padding:10px; border-radius:8px; border:none; background:transparent;
    min-width:44px; min-height:44px; align-items:center; justify-content:center;
  }
  .hamburger span {
    display:block; width:22px; height:2px;
    background:var(--text); border-radius:2px; transition:all .2s;
  }

  /* Page header */
  .ph { flex-direction:column; gap:10px; margin-bottom:16px; }
  .ph h1 { font-size:20px; }
  .ph-actions { flex-wrap:wrap; gap:6px; }
  .ph-actions .btn { font-size:11px; padding:8px 12px; min-height:44px; }

  /* Dashboard — hide desktop, show mobile */
  .flow-bar { display:none; }
  #page-dashboard > .ph { display:none !important; }
  #widget-wrap-flowbar { display:none !important; }
  #widget-wrap-summary { display:none !important; }
  #widget-wrap-banner { display:none !important; }
  #widget-wrap-locBase { display:none !important; }
  #widget-wrap-locTransit { display:none !important; }
  #widget-wrap-locBer { display:none !important; }
  #widget-wrap-chart { display:none !important; }
  #mob-dash { display:block !important; }

  /* Mobile Dashboard */
  .mob-dash-greeting {
    font-family:var(--font-h); font-size:22px; font-weight:700; color:var(--text);
    padding:4px 0 16px;
  }
  .mob-dash-greeting span { color:var(--base); }

  /* Hero KPIs */
  .mob-hero-row {
    display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
  }
  .mob-hero-card {
    background:var(--white); border:1.5px solid var(--border); border-radius:14px;
    padding:14px 16px; position:relative; overflow:hidden;
  }
  .mob-hero-card .mob-kpi-label {
    font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase;
    letter-spacing:.4px; margin-bottom:6px;
  }
  .mob-hero-card .mob-kpi-val {
    font-family:var(--font-h); font-size:24px; font-weight:700; line-height:1.1;
  }
  .mob-hero-card .mob-kpi-sub {
    font-size:11px; color:var(--muted); margin-top:4px;
  }
  .mob-hero-card.ber { border-color:#22c55e40; }
  .mob-hero-card.ber .mob-kpi-val { color:var(--success); }
  .mob-hero-card.transit { border-color:#f59e0b40; }
  .mob-hero-card.transit .mob-kpi-val { color:var(--transit); }

  /* Quick actions */
  .mob-actions {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px;
  }
  .mob-action-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:14px 8px; border-radius:14px; border:1.5px solid var(--border);
    background:var(--white); cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:transform .1s, box-shadow .1s;
  }
  .mob-action-btn:active { transform:scale(.96); box-shadow:0 1px 4px rgba(0,0,0,.08); }
  .mob-action-btn .mob-act-icon {
    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
  }
  .mob-action-btn .mob-act-label {
    font-size:11px; font-weight:600; color:var(--text); font-family:var(--font-b);
  }

  /* Mini KPI row */
  .mob-kpi-row {
    display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:16px;
  }
  .mob-kpi-mini {
    background:var(--white); border:1.5px solid var(--border); border-radius:12px;
    padding:12px 14px;
  }
  .mob-kpi-mini .mob-kpi-label { font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
  .mob-kpi-mini .mob-kpi-val { font-family:var(--font-h); font-size:17px; font-weight:700; color:var(--text); margin-top:2px; }
  .mob-kpi-mini .mob-kpi-sub { font-size:10px; color:var(--muted); margin-top:1px; }

  /* Location cards — tappable */
  .mob-loc-section { margin-bottom:16px; }
  .mob-loc-section-title {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
    color:var(--muted); margin-bottom:8px;
  }
  .mob-loc-cards { display:flex; flex-direction:column; gap:8px; }
  .mob-loc-card {
    display:flex; align-items:center; gap:12px;
    background:var(--white); border:1.5px solid var(--border); border-radius:14px;
    padding:12px 16px; cursor:pointer;
    -webkit-tap-highlight-color:transparent; transition:transform .1s;
  }
  .mob-loc-card:active { transform:scale(.98); }
  .mob-loc-card .mob-loc-icon {
    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
  }
  .mob-loc-card .mob-loc-info { flex:1; min-width:0; }
  .mob-loc-card .mob-loc-name {
    font-family:var(--font-h); font-size:14px; font-weight:700; color:var(--text);
  }
  .mob-loc-card .mob-loc-desc { font-size:11px; color:var(--muted); }
  .mob-loc-card .mob-loc-total {
    font-family:var(--font-h); font-size:18px; font-weight:700; flex-shrink:0;
  }
  .mob-loc-card .mob-loc-chevron {
    color:var(--muted); flex-shrink:0; opacity:.4;
  }
  .mob-loc-card.base .mob-loc-icon { background:#dbeafe; }
  .mob-loc-card.base .mob-loc-total { color:var(--base); }
  .mob-loc-card.transit .mob-loc-icon { background:#fef3c7; }
  .mob-loc-card.transit .mob-loc-total { color:var(--transit); }
  .mob-loc-card.ber .mob-loc-icon { background:#dcfce7; }
  .mob-loc-card.ber .mob-loc-total { color:var(--success); }

  /* Mobile chart */
  .mob-chart-section { margin-bottom:16px; }
  .mob-chart-section .card { padding:16px !important; }
  #widget-wrap-chart .card > div:nth-child(2) {
    grid-template-columns:1fr !important; gap:16px !important;
  }
  #widget-wrap-chart .card > div:nth-child(2) > div:last-child {
    justify-content:center;
  }

  .summary-strip { flex-direction:column; }
  .ss-item { border-right:none; border-bottom:1px solid var(--border); }
  .ss-item:last-child { border-bottom:none; }
  .location-tabs { grid-template-columns:1fr; gap:10px; }
  .loc-card { padding:14px 16px; }

  /* Transit banner */
  .transit-banner-card { flex-direction:column; align-items:flex-start; gap:8px; }
  .tb-right { align-self:flex-end; }

  /* Transit detail: 7-col → 2-col on mobile */
  .td-prod-grid { grid-template-columns:repeat(2,1fr) !important; }

  /* Versand cards */

  /* Active Versand cards — responsive layout */
  .vs-card-row {
    flex-direction:column !important; align-items:stretch !important;
    gap:10px !important; padding:12px 14px !important;
  }
  .vs-card-badges { flex-wrap:wrap; gap:6px !important; }
  .vs-card-actions {
    flex-wrap:wrap !important; gap:6px !important;
    border-top:1px solid var(--border); padding-top:10px; margin-top:2px;
  }
  .vs-card-actions .vs-act-primary {
    flex:1 1 100%; justify-content:center; min-height:44px; padding:10px 14px !important;
    font-size:13px !important;
  }
  .vs-card-actions .vs-act-btn:not(.vs-act-primary) {
    flex:1; text-align:center; min-height:44px; padding:10px 8px !important;
    font-size:12px !important;
  }
  .vs-card-actions .vs-act-sep { display:none; }
  .vs-card-chevron {
    position:absolute; top:12px; right:12px;
    width:44px !important; height:44px !important;
  }
  .vs-card-wrap { position:relative; }

  /* Versand Verlauf cards */
  .verlauf-entry {
    flex-wrap:wrap !important; gap:8px !important; padding:12px 14px !important;
  }
  .ve-left { flex:1 1 100%; }
  .ve-right { flex:1 1 100%; justify-content:flex-start !important; }

  /* Stock History headers */
  .hist-header { flex-wrap:wrap !important; gap:6px !important; padding:10px 12px !important; }
  .hist-meta { margin-left:0 !important; flex:1 1 100%; justify-content:flex-start; }

  /* Auslieferung month header */
  .aus-month-header { gap:6px !important; padding:10px 14px !important; }

  /* VS header icons: bigger touch target */
  .vs-header-icon { width:44px; height:44px; border-radius:10px; }

  /* Versand page header — compact on mobile */
  #page-versand > .ph { padding-bottom:8px !important; }
  #page-versand > .ph h1 { font-size:22px; }
  #page-versand > .ph p { display:none; }
  #page-versand > .ph .ph-actions { display:none; }

  /* Versand form: fullscreen overlay on mobile */
  #versand-new-form {
    position:fixed !important; inset:0 !important; z-index:300 !important;
    margin:0 !important; overflow-y:auto !important;
    background:var(--bg) !important;
    padding:0 !important;
    -webkit-overflow-scrolling:touch;
  }
  #versand-new-form .form-card {
    border-radius:0 !important; border:none !important;
    box-shadow:none !important; min-height:100vh;
    padding:16px !important; padding-top:calc(16px + env(safe-area-inset-top, 0)) !important;
    padding-bottom:calc(100px + env(safe-area-inset-bottom, 0)) !important;
  }
  #versand-new-form .form-card > div:first-child {
    flex-direction:column !important; align-items:stretch !important; gap:14px !important;
  }
  /* Versandnr prominent on mobile */
  #versand-new-form #vs-nr-preview { font-size:22px !important; }
  /* Close/note buttons top right */
  #versand-new-form .form-card > div:first-child > div:last-child {
    position:fixed; top:calc(12px + env(safe-area-inset-top, 0)); right:12px; z-index:310;
  }
  #vs-fahrer-pills { flex-wrap:wrap; }
  /* Form actions: sticky bottom */
  #versand-new-form .form-actions {
    position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important;
    flex-direction:row !important; z-index:310;
    background:var(--white) !important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0)) !important;
    border-top:1px solid var(--border) !important;
    box-shadow:0 -2px 8px rgba(0,0,0,.06) !important;
    margin:0 !important; gap:8px !important;
  }
  #versand-new-form .form-actions .btn { flex:1; justify-content:center; min-height:48px; }

  /* Auslieferung form: header stacks on mobile */
  #aus-panel-1 .card > div:first-child {
    flex-direction:column !important; align-items:stretch !important; gap:12px !important;
    padding:12px 16px !important;
  }
  #aus-panel-1 .card > div:first-child input[type="number"] { width:100% !important; box-sizing:border-box !important; }
  #aus-panel-1 .card > div:first-child input[type="date"] {
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
    -webkit-appearance:none !important; appearance:none !important;
  }
  #aus-panel-1 .card > div:first-child > div {
    width:100% !important; min-width:0 !important; max-width:100% !important; overflow:hidden !important;
  }
  /* Auslieferung product grid: single column on mobile */
  #aus-prod-grid {
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  /* Auslieferung total: sticky at bottom */
  #aus-panel-1 .card > div:last-child {
    position:sticky; bottom:calc(56px + env(safe-area-inset-bottom, 0));
    background:var(--white); z-index:30;
    flex-wrap:wrap !important; padding:12px 16px !important;
    border-top:1px solid var(--border);
    box-shadow:0 -2px 8px rgba(0,0,0,.04);
  }
  #aus-panel-1 .card > div:last-child .btn { flex:1; min-width:120px; justify-content:center; min-height:48px; }

  /* Einkauf form: fullscreen on mobile */
  #einkauf-form {
    position:fixed !important; inset:0 !important; z-index:300 !important;
    margin:0 !important; overflow-y:auto !important;
    background:var(--bg) !important;
    -webkit-overflow-scrolling:touch;
  }
  #einkauf-form .form-card {
    border-radius:0 !important; border:none !important;
    box-shadow:none !important; min-height:100vh;
    padding:16px !important;
    padding-top:calc(16px + env(safe-area-inset-top, 0)) !important;
    padding-bottom:calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Settings: Toggle-Buttons (Verlauf löschen, Echtbetrieb) — prevent squishing */
  #allow-delete-history-wrap { padding:16px !important; }
  #allow-delete-history-wrap > div:nth-child(2),
  #allow-delete-history-wrap > div:nth-child(2) > div:last-child {
    flex-wrap:wrap !important; gap:12px !important;
  }
  #allow-delete-history-wrap button[id$="-toggle"] {
    width:44px !important; min-width:44px !important; height:24px !important;
    border-radius:12px !important; flex-shrink:0 !important; margin-left:0 !important;
  }
  #allow-delete-history-wrap > div > div:first-child {
    flex:1 1 calc(100% - 60px) !important; min-width:0 !important;
  }

  /* Base / Ber page headers — compact */
  #page-stock-new > .ph h1 { font-size:20px; }
  #page-stock-new > .ph p { display:none; }
  #page-tv-new > .ph h1 { font-size:20px; }
  #page-tv-new > .ph p { display:none; }

  /* Hide filter on mobile — not needed with 14 products */
  #base-filter-wrap { display:none !important; }
  #ber-filter-wrap { display:none !important; }

  /* Tabs container: make full-width and sticky */
  #page-stock-new > div:nth-child(2),
  #page-tv-new > div:nth-child(2) {
    position:sticky; top:0; z-index:40;
    background:var(--bg);
    margin:0 -12px; padding:8px 12px;
    border-bottom:1px solid var(--border);
  }

  /* Page tabs: scrollable */
  .page-tabs {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap !important;
    white-space:nowrap;
    margin-bottom:0 !important;
  }
  .page-tabs::-webkit-scrollbar { display:none; }
  .page-tab {
    padding:8px 14px !important; font-size:13px !important;
    white-space:nowrap; flex-shrink:0;
  }

  /* Planung page header compact */
  #page-planung > .ph h1 { font-size:20px; }
  #page-planung > .ph p { display:none; }
  /* Planung table: first column sticky */
  #planung-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -12px; padding:0 12px; }
  #planung-table-wrap table { min-width:500px; }
  #planung-table-wrap table td:first-child,
  #planung-table-wrap table th:first-child {
    position:sticky; left:0; z-index:5; background:var(--white);
    box-shadow:2px 0 4px rgba(0,0,0,.04);
  }
  /* Chart/Pie side-by-side → stacked on mobile */
  #page-planung .card > div[style*="grid-template-columns"] {
    grid-template-columns:1fr !important;
  }

  /* Settings page header compact */
  #page-app-settings > .ph h1 { font-size:20px; }
  #page-app-settings > .ph p { display:none; }

  /* Tables */
  .tbl-outer { font-size:11px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:480px; }

  /* Versand + Auslieferung product grids: 7-col → 2-col on mobile */
  .vs-prod-grid-responsive { grid-template-columns:repeat(2,1fr) !important; }

  /* Forms */
  .form-card { padding:16px; }

  /* Tabs (complementary to sticky rules above) */
  .page-tab { min-height:44px; }

  /* Settings */

  /* Settings 3-column product panel → stacked on mobile */
  .ps-layout { flex-direction:column !important; min-height:auto !important; }
  .ps-sidebar { width:100% !important; min-width:0 !important; max-height:180px; border-right:none !important; border-bottom:1px solid var(--border); }
  .ps-detail { padding:16px !important; }
  .ps-icon-builder { width:100% !important; min-width:0 !important; border-left:none !important; border-top:1px solid var(--border); }

  /* Charge row – stack vertically on mobile */
  .charge-row {
    flex-wrap:wrap;
    gap:8px;
  }
  .charge-row .field:nth-child(1) { flex:1 1 100%; }
  .charge-row .field:nth-child(2) { flex:1 1 calc(50% - 4px); }
  .charge-row .field:nth-child(3) { flex:1 1 calc(50% - 4px); }

  /* Icon builder grid */
  .ib-panel-grid { grid-template-columns:1fr !important; }

  /* Dashboard product mini cards */
  .prod-mini-grid { grid-template-columns:repeat(2,1fr); }

  /* Filter bar */
  .filter-bar { flex-wrap:wrap; }

  /* Nav sort mobile */
  .nav-sort-item { padding:10px 12px; gap:8px; }
  .nav-sort-move-btn { width:44px; height:44px; }
  #nav-sort-list { touch-action:pan-y; }

  /* Stock display: single column on mobile */
  .stock-display-grid { grid-template-columns:1fr !important; }

  /* All buttons/interactive: minimum touch target (exclude toggle switches) */
  .btn, button:not(#delete-history-toggle):not(#echtbetrieb-toggle):not(#danger-zone-btn) { min-height:44px; }
  .btn-sm { min-height:36px; }
  /* Toggle switches: preserve pill shape on mobile */
  #delete-history-toggle,
  #echtbetrieb-toggle {
    width:44px !important; min-width:44px !important;
    height:24px !important; min-height:24px !important; max-height:24px !important;
    border-radius:12px !important;
  }

  /* Intel grid: single column on mobile */
  .intel-grid { grid-template-columns:1fr !important; }

  /* ── FAB BUTTONS — mobile compact ─────────────── */
  #fab-neue-sendung,
  #fab-neuer-einkauf,
  #fab-neue-auslieferung {
    right:16px !important;
  }
  #fab-neue-sendung button,
  #fab-neuer-einkauf button,
  #fab-neue-auslieferung button {
    padding:0 !important;
    width:56px !important; height:56px !important;
    border-radius:50% !important;
    justify-content:center !important;
    box-shadow:0 4px 20px rgba(0,0,0,.25) !important;
  }
  #fab-neue-sendung button span,
  #fab-neue-sendung button:not(svg),
  #fab-neuer-einkauf button span,
  #fab-neue-auslieferung button span {
    /* Hide text labels on mobile */
  }
  #fab-neue-sendung button > svg,
  #fab-neuer-einkauf button > svg,
  #fab-neue-auslieferung button > svg {
    margin:0 !important;
  }
  /* Hide text in FABs, show only icon */
  #fab-neue-sendung button { font-size:0 !important; gap:0 !important; }
  #fab-neuer-einkauf button { font-size:0 !important; gap:0 !important; }
  #fab-neue-auslieferung button { font-size:0 !important; gap:0 !important; }
  #fab-neue-sendung button svg,
  #fab-neuer-einkauf button svg,
  #fab-neue-auslieferung button svg {
    width:22px !important; height:22px !important;
  }

  /* ── PAGE TRANSITIONS ─────────────────────────── */
  .page {
    animation:none;
  }
  .page.active {
    animation:mobPageIn .22s ease-out both;
  }
  @keyframes mobPageIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:none; }
  }

  /* Touch feedback on cards and buttons */
  .mob-loc-card:active,
  .mob-action-btn:active,
  .mob-hero-card:active,
  .card:active {
    transform:scale(.98);
  }

  /* Booking toast safe area — lifted above bottom nav */
  #booking-toast { bottom:calc(72px + env(safe-area-inset-bottom, 0)); }

  /* ── BOTTOM NAV ─────────────────────────────────── */
  .mobile-header { display:none !important; }
  .sidebar { display:none !important; }
  .mobile-overlay { display:none !important; }

  .bottom-nav {
    display:flex !important;
    position:fixed; bottom:0; left:0; right:0;
    height:auto;
    padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0));
    background:var(--white);
    border-top:1px solid var(--border);
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
    z-index:200;
    align-items:stretch; justify-content:space-around;
  }
  .bnav-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    flex:1; gap:3px; cursor:pointer;
    color:var(--muted); transition:color .15s;
    -webkit-tap-highlight-color:transparent;
    position:relative;
    min-height:48px;
    padding:4px 0;
  }
  .bnav-item.active { color:var(--base); font-weight:700; }
  .bnav-item.active .bnav-icon {
    background:color-mix(in srgb, var(--base) 14%, transparent);
    border-radius:12px; padding:3px;
    width:32px; height:32px;
  }
  .bnav-item.active .bnav-icon svg { stroke-width:2.5; }
  .bnav-item.active .bnav-label { color:var(--base); }
  .bnav-icon { width:26px; height:26px; position:relative; display:flex; align-items:center; justify-content:center; border-radius:12px; transition:background .15s, width .15s, height .15s; }
  .bnav-icon svg { width:22px; height:22px; transition:stroke-width .15s; }
  .bnav-label { font-size:11px; font-weight:600; font-family:var(--font-b); line-height:1; transition:color .15s; color:var(--muted); }
  .bnav-badge {
    position:absolute; top:-6px; right:-9px;
    min-width:17px; height:17px; padding:0 5px;
    border-radius:99px; background:var(--danger); color:#fff;
    font-size:10px; font-weight:700; font-family:var(--font-b);
    display:flex; align-items:center; justify-content:center;
    line-height:1;
  }

  /* More-sheet */
  .bottom-nav-overlay {
    position:fixed; inset:0; z-index:210;
    background:rgba(0,0,0,.35); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .bottom-nav-overlay.open { opacity:1; pointer-events:auto; }
  .bottom-nav-more-sheet {
    position:fixed; bottom:0; left:0; right:0; z-index:220;
    background:var(--white); border-radius:20px 20px 0 0;
    padding:12px 20px calc(20px + env(safe-area-inset-bottom, 0));
    box-shadow:0 -8px 32px rgba(0,0,0,.12);
    transform:translateY(100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  .bottom-nav-more-sheet.open { transform:translateY(0); }

  /* Content clearance for bottom nav */
  .main { padding-bottom:calc(76px + env(safe-area-inset-bottom, 0)) !important; }

  /* FABs above bottom nav */
  #fab-neue-sendung, #fab-neuer-einkauf, #fab-neue-auslieferung {
    bottom:calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Booking toast above bottom nav */
  #booking-toast { bottom:calc(80px + env(safe-area-inset-bottom, 0)) !important; }
}

/* ── SMALL PHONES (<375px) ──────────────────────────────── */
@media (max-width: 375px) {
  .page { padding:12px 8px; }
  .ph h1 { font-size:18px; }
  .form-card { padding:12px; }
  .card { padding:12px; }
  .prod-mini-grid { grid-template-columns:1fr !important; }
  .charge-row .field:nth-child(2),
  .charge-row .field:nth-child(3) { flex:1 1 100%; }
  .loc-card { padding:12px; }
  .ss-val { font-size:18px; }
  .vs-prod-grid-responsive { grid-template-columns:1fr !important; }
}

@media (min-width: 769px) {
  .mobile-header { display:none !important; }
  .mobile-overlay { display:none !important; }
  .bottom-nav { display:none !important; }
  .bottom-nav-overlay { display:none !important; }
  .bottom-nav-more-sheet { display:none !important; }
  #mob-dash { display:none !important; }
}

/* ── TABLET / Mittlere Breiten ─────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Sidebar auto-collapse */
  .sidebar:not(.collapsed) .logo-sub,
  .sidebar:not(.collapsed) .logo-mark,
  .sidebar:not(.collapsed) .nav-label,
  .sidebar:not(.collapsed) .nav-section,
  .sidebar:not(.collapsed) .sidebar-footer-name,
  .sidebar:not(.collapsed) .sidebar-footer-role { display:none; }
  .sidebar:not(.collapsed) .nav-section-items { max-height:400px !important; opacity:1 !important; }
  .sidebar:not(.collapsed) .nav-item { padding:12px 0; justify-content:center; gap:0; border-left:none; border-radius:var(--radius-sm); position:relative; }
  .sidebar:not(.collapsed) .nav-item.active { border-left:none; border-radius:8px; margin:0 8px; width:calc(100% - 16px); }
  .sidebar:not(.collapsed) .nav-item svg { width:18px; height:18px; opacity:.8; }
  .sidebar:not(.collapsed) .nav-item.active svg { opacity:1; }
  .sidebar:not(.collapsed) .logo { padding:16px 0; display:flex; justify-content:center; align-items:center; }
  .sidebar:not(.collapsed) .logo-icon-wrap { margin:0 auto; }
  .sidebar:not(.collapsed) .sidebar-footer { padding:10px 0; display:flex; flex-direction:column; align-items:center; }
  .sidebar:not(.collapsed) .user-avatar-btn { margin:0; }
  .sidebar:not(.collapsed) #nav-transit-badge { position:absolute!important;top:6px!important;left:calc(50% + 6px)!important;right:auto!important;margin:0!important;padding:0!important;width:7px!important;height:7px!important;min-width:0!important;font-size:0!important;border-radius:50%!important;box-shadow:0 0 0 2px var(--bg); }
  /* Sidebar-Footer: Flaggen, Datum, Toggle-Text ausblenden */
  .sidebar:not(.collapsed) .sf-expanded { display:none !important; }
  .sidebar:not(.collapsed) .sf-collapsed { display:flex !important; }
  .sidebar:not(.collapsed) .sidebar-footer .sidebar-toggle-btn { width:32px; height:32px; padding:0; border-radius:8px; }
  .sidebar:not(.collapsed) .sidebar-footer > div:not(:last-child) { display:none; }
  .sidebar { width:64px; }
  .shell { grid-template-columns:64px 1fr; }

  /* Seiten-Padding reduzieren */
  .page { padding:28px 20px; }

  /* Summary-Strip: scrollbar bei Platzmangel */
  .summary-strip { flex-wrap:nowrap; overflow-x:auto; }
  .ss-item { min-width:110px; flex-shrink:0; padding:12px 14px; }
  .ss-val { font-size:17px; }
  .ss-label { font-size:9.5px; }

  /* Location cards: 2+1 Layout bei Tablet */
  .location-tabs { grid-template-columns:1fr 1fr; gap:10px; }
  .location-tabs > *:nth-child(3) { grid-column:1 / -1; }
  .prod-mini-grid { grid-template-columns:repeat(3,1fr); }

  /* Quick-Action Buttons kompakter */
  .ph-actions .btn { font-size:12px; padding:7px 12px; }
}

/* Dark mode: use Theme Picker in App-Einstellungen → 🌙 Midnight */

/* ── Widget wrap spacing ── */
[id^="widget-wrap-"] { margin-bottom: 14px; }
[id^="widget-wrap-"]:last-child { margin-bottom: 0; }
/* ── Intelligence widget ── */
.intel-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:14px; padding:18px 20px; margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}
.intel-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;
  margin-bottom:16px;
}
.intel-item {
  padding:14px 16px; border-radius:12px; background:var(--light);
  border:1.5px solid var(--border);
}
.intel-item-icon { font-size:20px; margin-bottom:6px; }
.intel-item-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:4px; }
.intel-item-val { font-family:var(--font-h); font-size:18px; font-weight:700; color:var(--text); }
.intel-item-sub { font-size:11px; color:var(--muted); margin-top:3px; }
.intel-item.warn  { background:var(--transit-bg); border-color:var(--transit-bd); }
.intel-item.alert { background:var(--danger-bg); border-color:var(--danger-bd); }
.intel-item.ok    { background:var(--ber-bg); border-color:var(--ber-bd); }
.intel-item.info  { background:var(--base-bg); border-color:var(--base-bd); }
.intel-prod-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-radius:8px; margin-bottom:4px;
  background:var(--light); font-size:12px;
}
.intel-prod-row.critical { background:var(--danger-bg); }
.intel-prod-row.warning  { background:var(--transit-bg); }
/* ── Label style builder ── */
.lbl-color-swatch {
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  flex-shrink:0;
}
.lbl-color-swatch:hover { transform:scale(1.15); }
.lbl-color-swatch.active { box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--text); }
/* ── App settings tabs ── */
.ast-tab {
  flex:0 0 auto; padding:6px 16px; border:none; border-radius:100px;
  font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
  background:transparent; color:var(--muted); transition:all .15s;
}
.ast-tab.active {
  background:var(--base-bg); color:var(--base);
  border:0.5px solid var(--base-bd); font-weight:700;
}
.ast-tab:hover:not(.active) { color:var(--text); }
/* ── Chart period selector ── */
.chart-period-btn {
  padding: 4px 10px; border:none; border-radius:6px; cursor:pointer;
  font-size:11px; font-weight:600; color:var(--muted);
  background:transparent; transition:all .15s;
}
.chart-period-btn:hover { color:var(--text); background:var(--white); }
.chart-period-btn.active {
  background:var(--white); color:var(--base);
  box-shadow:var(--shadow-sm);
}
/* ── Pie chart legend ── */
.pie-legend-item {
  display:flex; align-items:center; gap:7px;
  font-size:11px; color:var(--text); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.pie-legend-dot {
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
}
/* responsive: stack on small screens */
@media(max-width:900px){
  #widget-wrap-chart .card > div:last-child {
    grid-template-columns: 1fr !important;
  }
  #dash-pie-chart { display:none; }
  #dash-pie-legend { display:none; }
}
/* ── Login ── */

/* Hintergrund-Variable für Dark Mode */
:root { --login-screen-bg: #eeede8; }
.dark { --login-screen-bg: #1a1a1a; }

/* Haupt-Karte */
.login-card {
  position:relative;
  width:100%; max-width:400px;
  background:var(--white);
  border-radius:20px;
  padding:28px 28px 32px;
  box-shadow:0 8px 40px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  border:1.5px solid var(--border);
  border-top:4px solid var(--base);
}

/* Sprach-Toggle */
.login-lang-row {
  display:flex; justify-content:flex-end; gap:4px;
  margin-bottom:24px;
}
.login-lang-btn {
  padding:4px 10px; border-radius:6px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  border:1.5px solid var(--border); background:transparent;
  color:var(--muted); cursor:pointer; transition:all .12s;
  font-family:var(--font-b);
}
.login-lang-btn:hover { background:var(--light); color:var(--text); }
.login-lang-btn.active {
  background:var(--base-bg); color:var(--base);
  border-color:var(--base-bd);
}

/* Logo-Bereich */
.login-logo-area {
  text-align:center;
  margin-bottom:28px;
}
.login-logo-text {
  font-family:var(--font-h);
  font-size:32px; font-weight:700; color:var(--text);
  line-height:1;
}
.login-logo-text span { color:var(--base); }
.login-subtitle {
  font-size:12px; color:var(--muted);
  margin-top:6px; letter-spacing:.02em;
}

/* Version-Zeile unter der Karte */
.login-version {
  margin-top:20px;
  font-size:11px; color:var(--muted);
  opacity:.6; letter-spacing:.03em;
  font-family:var(--font-b);
}

/* Cancel-Button im PIN-Screen */
.login-cancel-btn {
  font-size:11px !important;
  color:var(--muted) !important;
}

.pin-dot {
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--border); background:transparent;
  transition:all .15s;
}
.pin-dot.filled { background:var(--base); border-color:var(--base); }
.pin-dot.error  { background:var(--danger); border-color:var(--danger); }
.pin-btn {
  aspect-ratio:1; border-radius:50%; border:1.5px solid var(--border);
  background:var(--white); font-size:20px; font-weight:600; color:var(--text);
  cursor:pointer; transition:all .12s; font-family:var(--font-h);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
.pin-btn:hover  { background:var(--light); border-color:var(--base); color:var(--base); transform:scale(1.05); }
.pin-btn:active { transform:scale(.95); }
.login-user-btn {
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; border-radius:16px; width:100%;
  border:1.5px solid var(--border); background:var(--white);
  cursor:pointer; transition:all .18s; box-shadow:0 1px 4px rgba(0,0,0,.06);
  text-align:left;
}
.login-user-btn:hover { border-color:var(--base); background:var(--base-bg); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.1); }
.login-avatar {
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:white;
  flex-shrink:0; line-height:1;
}
/* ── Users page ── */
.uep-tab {
  flex:1; padding:7px 12px; border:none; border-radius:8px;
  font-size:12px; font-weight:600; cursor:pointer;
  background:transparent; color:var(--muted); transition:all .15s;
}
.uep-tab.active { background:var(--white); color:var(--text); box-shadow:var(--shadow-sm); }
/* ── Gradient Swatches (Avatar-Farbe) ── */
.gradient-swatch {
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:3px solid transparent; transition:all .15s; flex-shrink:0;
  position:relative;
}
.gradient-swatch:hover { transform:scale(1.12); }
.gradient-swatch.selected {
  border-color:var(--text);
  box-shadow:0 0 0 2.5px var(--white) inset;
}
/* ── Emoji Tiles (Avatar-Emoji) ── */
.emoji-tile {
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  font-size:24px; cursor:pointer; border-radius:50%; border:2.5px solid transparent;
  transition:all .13s; background:transparent; flex-shrink:0;
}
.emoji-tile:hover { background:var(--light); }
.emoji-tile.selected {
  border-color:var(--base);
  background:var(--base-bg);
}
/* Legacy fallback */
.color-swatch {
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:3px solid transparent; transition:all .15s; flex-shrink:0;
}
.color-swatch:hover { transform:scale(1.15); }
.color-swatch.selected { border-color:var(--text); box-shadow:0 0 0 2px var(--white) inset; }
/* ── User permission toggles ── */
.perm-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.perm-row:last-child { border-bottom:none; }
.perm-toggle {
  position:relative; width:36px; height:20px; flex-shrink:0;
}
.perm-toggle input { opacity:0; width:0; height:0; }
.perm-slider {
  position:absolute; inset:0; border-radius:20px;
  background:var(--border); cursor:pointer; transition:all .2s;
}
.perm-slider:before {
  content:''; position:absolute; width:14px; height:14px; border-radius:50%;
  background:white; left:3px; top:3px; transition:all .2s;
}
.perm-toggle input:checked + .perm-slider { background:var(--base); }
.perm-toggle input:checked + .perm-slider:before { transform:translateX(16px); }
/* ── Users list ── */
.user-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:10px;
  display:flex; align-items:center; gap:16px;
  box-shadow:var(--shadow-sm);
}
.user-card.admin-card {
  border-left:3px solid var(--base);
}
/* ── Widget sort items ── */
.widget-sort-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:8px; cursor:grab;
  font-size:13px; color:var(--text);
  border:1.5px solid transparent;
  transition:background .12s, border-color .12s;
  user-select:none; -webkit-user-select:none;
}
.widget-sort-item:hover { background:var(--light); }
.widget-sort-item.dragging { opacity:.4; }
.widget-sort-item.drag-over { border-color:var(--base); background:var(--base-bg); }
.widget-sort-item .drag-handle {
  color:var(--muted); font-size:12px; flex-shrink:0; cursor:grab;
}
.widget-sort-item input[type="checkbox"] { flex-shrink:0; accent-color:var(--base); }
/* ── View toggle buttons ── */

/* ── Shelf view ── */
.shelf-container { display:flex; flex-direction:column; gap:0; }
.shelf-row {
  display:flex; align-items:stretch; background:var(--white);
  border:1.5px solid var(--border); border-radius:12px; overflow:hidden;
  margin-bottom:8px;
}
.shelf-row-label {
  width:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; background:var(--light); border-right:1px solid var(--border);
  writing-mode:vertical-rl; text-orientation:mixed; padding:8px 0;
}
.shelf-prod {
  flex:1; padding:10px 8px 8px; border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0;
}
.shelf-prod:last-child { border-right:none; }
.shelf-prod-name { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; }
.shelf-prod-val { font-family:var(--font-h); font-size:16px; font-weight:700; }
.shelf-bar-wrap { width:100%; background:var(--light); border-radius:99px; height:5px; overflow:hidden; margin-top:2px; }
.shelf-bar { height:100%; border-radius:99px; transition:width .4s ease; }
.shelf-prod.empty .shelf-prod-val { color:var(--muted); }
.shelf-prod.low .shelf-prod-val { color:var(--warn); }
.shelf-prod.ok .shelf-prod-val { color:inherit; }

/* ── Dark toggle ── */
#dark-toggle { transition:transform .2s, opacity .2s; opacity:.7; }
#dark-toggle:hover { transform:rotate(20deg) scale(1.15); opacity:1; }

/* ── Versand form top row ── */
.vs-header-icon {
  flex:0 0 auto; align-self:center;
  width:28px; height:28px; border-radius:8px;
  border:1px solid transparent; background:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); transition:all .15s;
  opacity:.7;
}
.vs-header-icon:hover { border-color:var(--base); color:var(--base); opacity:1; }
.vs-header-icon.active { border-color:var(--base); background:var(--base-bg); color:var(--base); opacity:1; }
.vs-header-icon.close:hover { border-color:var(--danger); color:var(--danger); opacity:1; }




/* ── Theme transition ── */
body, .sidebar, .card, .nav-item { transition: background .3s ease, color .3s ease, border-color .3s ease; }

/* ── Number animation ── */
@keyframes numUp   { from { opacity:0; transform:translateY(6px) scale(.92); } to { opacity:1; transform:none; } }
@keyframes numDown { from { opacity:0; transform:translateY(-6px) scale(.92); } to { opacity:1; transform:none; } }
.num-anim-up   { animation: numUp   .32s cubic-bezier(.22,1,.36,1) both; }
.num-anim-down { animation: numDown .32s cubic-bezier(.22,1,.36,1) both; }

/* ── Booking flash toast ── */
@keyframes toastIn  { from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.95)} to{opacity:1;transform:translateX(-50%)} }
@keyframes toastOut { from{opacity:1;transform:translateX(-50%)} to{opacity:0;transform:translateX(-50%) translateY(10px) scale(.97)} }
#booking-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:#1a1d24; color:#fff; border-radius:14px;
  padding:12px 22px; font-size:14px; font-weight:600;
  box-shadow:0 8px 32px rgba(0,0,0,.22); z-index:9999;
  pointer-events:auto; display:flex; align-items:center; gap:10px;
  white-space:nowrap; max-width:calc(100vw - 32px);
}
#booking-toast.in  { animation: toastIn  .28s cubic-bezier(.22,1,.36,1) both; }
#booking-toast.out { animation: toastOut .22s ease both; pointer-events:none; }
@media(max-width:600px){
  @keyframes toastInMobile  { from{opacity:0;transform:translateY(16px) scale(.95)} to{opacity:1;transform:none} }
  @keyframes toastOutMobile { from{opacity:1;transform:none} to{opacity:0;transform:translateY(10px) scale(.97)} }
  #booking-toast {
    bottom:16px; left:16px; right:16px; transform:none;
    white-space:normal; font-size:13px; padding:11px 16px;
    max-width:none;
  }
  #booking-toast.in  { animation: toastInMobile  .28s cubic-bezier(.22,1,.36,1) both; }
  #booking-toast.out { animation: toastOutMobile .22s ease both; pointer-events:none; }
}


/* ── Fahrer Pills ─────────────────────────────────── */
.fahrer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  border: 2px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-b);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.fahrer-pill:hover:not(.active) {
  opacity: 0.8;
  background: var(--light);
}
.fahrer-pill.active {
  background: currentColor;
  color: #fff !important;
}
.fahrer-pill.active span, .fahrer-pill.active {
  color: #fff;
}


/* ── Versand Verlauf Cards ────────────────────────── */
#versand-verlauf-container {
  padding: 2px 0;
}
#versand-verlauf-container > div > div:hover:not(.verlauf-month-header) {
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* ── Page Tabs (Versand) ──────────────────────────── */


#page-app-settings .ast-tabs-wrap { border-radius:100px; }

/* ══════════════════════════════════════════════════════════
   DASHBOARD GRID SYSTEM
   ══════════════════════════════════════════════════════════ */

/* Grid Container */
#dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
}
#dashboard-grid > .dg-cell {
  min-width: 0;
  position: relative;
  border-radius: 14px;
  transition: box-shadow .2s, border-color .2s;
}
/* Innen-Margins der Widgets aufheben — Grid-Gap regelt den Abstand */
#dashboard-grid .flow-bar,
#dashboard-grid .summary-strip,
#dashboard-grid .location-tabs { margin-bottom: 0; }

/* ── Edit Mode ── */
#dashboard-grid.dg-editing > .dg-cell {
  border: 2px dashed var(--border);
  padding: 4px;
  cursor: grab;
}
#dashboard-grid.dg-editing > .dg-cell:hover {
  border-color: var(--base);
  box-shadow: 0 0 0 3px var(--base-bg);
}
#dashboard-grid.dg-editing > .dg-cell.dg-dragging {
  opacity: .4;
  border-color: var(--base);
}
#dashboard-grid.dg-editing > .dg-cell.dg-drop-target {
  border-color: var(--base);
  background: var(--base-bg);
  box-shadow: 0 0 0 4px var(--base-bg);
}

/* Drag handle (top bar) */
.dg-handle {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--light);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.dg-handle .dg-handle-icon {
  font-size: 14px;
  color: var(--border2);
  cursor: grab;
}
#dashboard-grid.dg-editing .dg-handle {
  display: flex;
}

/* Resize handle (right edge) */
.dg-resize {
  display: none;
  position: absolute;
  top: 20%;
  right: -4px;
  bottom: 20%;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  border-radius: 4px;
  background: transparent;
  transition: background .15s;
}
.dg-resize:hover,
.dg-resize.dg-resizing {
  background: var(--base);
}
.dg-resize::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--border2);
  transition: background .15s;
}
.dg-resize:hover::after,
.dg-resize.dg-resizing::after {
  background: white;
}
#dashboard-grid.dg-editing .dg-resize {
  display: block;
}

/* Edit toggle button */
.dg-edit-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  transition: all .15s;
}
.dg-edit-btn:hover {
  border-color: var(--base);
  color: var(--base);
}
.dg-edit-btn.dg-active {
  background: var(--base);
  border-color: var(--base);
  color: white;
}

/* Grid overlay in edit mode */
#dashboard-grid.dg-editing::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px dashed var(--border);
  border-radius: 18px;
  pointer-events: none;
  z-index: -1;
  opacity: .5;
}

/* Size badges */
.dg-size-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--border);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Grid placeholder for drop zones */
.dg-placeholder {
  border: 2px dashed var(--base);
  border-radius: 14px;
  background: var(--base-bg);
  opacity: .5;
  min-height: 60px;
}

/* ── Mobile: single column, no edit ── */
@media (max-width: 768px) {
  #dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  #dashboard-grid > .dg-cell {
    grid-column: 1 / -1 !important;
  }
  .dg-edit-btn { display: none !important; }
  .dg-handle { display: none !important; }
  .dg-resize { display: none !important; }
}