/* ── RESET & BASE ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── THEME VARIABLES ──────────────────────────── */
:root {
  --bg:        #0f1117;
  --surface:   #1a1d27;
  --surface2:  #22263a;
  --border:    #2e3250;
  --accent:    #f0a500;
  --accent2:   #e05c2a;
  --green:     #2ecc71;
  --blue:      #3b82f6;
  --red:       #e74c3c;
  --text:      #e8eaf6;
  --muted:     #7c84a8;
  --font-main: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius:    8px;
}

[data-theme="light"] {
  --bg:        #f0f2f8;
  --surface:   #ffffff;
  --surface2:  #e8eaf2;
  --border:    #c8cce0;
  --accent:    #d4900a;
  --accent2:   #c04a1a;
  --green:     #1a9e52;
  --blue:      #2563eb;
  --red:       #dc2626;
  --text:      #1a1d2e;
  --muted:     #6b7280;
}

body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.2s, color 0.2s;
}

/* ── LOGIN ────────────────────────────────────── */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 44px 48px;
  width: 380px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-logo { font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:var(--accent);letter-spacing:.05em;text-align:center;margin-bottom:2px; }
.login-sub  { font-size:.78rem;color:var(--muted);text-align:center;font-family:var(--font-mono);margin-bottom:10px; }
.login-field label { display:block;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px; }
.login-field input { width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:10px 14px;font-family:var(--font-main);font-size:.9rem;outline:none;transition:border-color .2s; }
.login-field input:focus { border-color:var(--accent); }
.btn-login { background:var(--accent);color:#111;border:none;padding:11px;border-radius:var(--radius);font-weight:600;font-family:var(--font-main);font-size:.95rem;cursor:pointer;transition:background .15s;margin-top:4px; }
.btn-login:hover { background:#ffc233; }
.login-error { color:var(--red);font-size:.8rem;text-align:center;min-height:18px;font-family:var(--font-mono); }
.login-hint  { color:var(--muted);font-size:.72rem;text-align:center;font-family:var(--font-mono); }

/* ── HEADER ───────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  background: var(--surface);
  border-bottom: 2px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}
.logo { font-family:var(--font-mono);font-size:.95rem;font-weight:600;color:var(--accent);letter-spacing:.06em;white-space:nowrap; }
.hamburger { display:none;background:transparent;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:var(--radius);cursor:pointer;font-size:1.1rem;line-height:1; }

/* Theme toggle */
.btn-theme {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 5px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-theme:hover { border-color: var(--accent); color: var(--accent); }

/* ── NAV ──────────────────────────────────────── */
.main-nav { display:flex;gap:2px; }
.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  min-width: 60px;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: var(--radius);
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.15s;
}
.nav-btn:hover { color:var(--text);border-color:var(--border); }
.nav-btn.active { background:var(--surface2);color:var(--accent);border-color:var(--border); }
.nav-icon { width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.nav-icon svg { width:18px;height:18px; }
.nav-label { font-size:.6rem;letter-spacing:.03em;white-space:nowrap; }

.header-meta { display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap; }
.header-date { font-family:var(--font-mono);font-size:.72rem;color:var(--accent);background:rgba(240,165,0,.08);border:1px solid rgba(240,165,0,.2);padding:4px 10px;border-radius:var(--radius);white-space:nowrap; }
.header-count { font-family:var(--font-mono);font-size:.72rem;color:var(--muted); }

a.btn-new-order, .btn-new-order {
  background:var(--accent);color:#111;border:none;padding:7px 16px;border-radius:var(--radius);font-weight:600;font-family:var(--font-main);font-size:.84rem;text-decoration:none;white-space:nowrap;transition:background .15s;cursor:pointer;
}
a.btn-new-order:hover, .btn-new-order:hover { background:#ffc233; }
.btn-logout { background:transparent;border:1px solid var(--border);color:var(--muted);padding:6px 12px;border-radius:var(--radius);font-family:var(--font-main);font-size:.8rem;cursor:pointer;transition:all .15s; }
.btn-logout:hover { border-color:var(--red);color:var(--red); }

/* ── PAGES ────────────────────────────────────── */
.page { display:none; }
.page.active { display:block; }

/* ── DASHBOARD ────────────────────────────────── */
.dashboard-grid { padding:20px 28px;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:16px; }
.dash-welcome { display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius);flex-wrap:wrap;gap:10px; }
.dash-welcome-text { font-family:var(--font-mono);font-size:.9rem;color:var(--text);display:flex;align-items:center;gap:14px; }
.dash-date { font-size:.72rem;color:var(--muted); }
.dash-widget-full { width:100%; }
.dash-widgets-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.dash-widget { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column; }
.dash-widget-header { display:flex;align-items:center;justify-content:space-between;padding:11px 14px 9px;border-bottom:1px solid var(--border);background:var(--surface2); }
.dash-widget-title { font-family:var(--font-mono);font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;font-weight:600; }
a.dash-widget-link, .dash-widget-link { background:transparent;border:1px solid var(--border);color:var(--muted);font-size:.68rem;font-family:var(--font-mono);padding:3px 8px;border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none; }
a.dash-widget-link:hover, .dash-widget-link:hover { border-color:var(--accent);color:var(--accent); }

/* Finanzen widget with period selector */
.dash-kpi-period { display:flex;align-items:center;gap:6px; }
.dash-period-btn { background:transparent;border:1px solid var(--border);color:var(--muted);font-size:.65rem;font-family:var(--font-mono);padding:2px 8px;border-radius:4px;cursor:pointer;transition:all .15s; }
.dash-period-btn.active { background:var(--accent);border-color:var(--accent);color:#111;font-weight:700; }

.dash-kpi-mini { display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0; }
.dash-kpi-item { padding:11px 14px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px; }
.dash-kpi-item:nth-child(even) { border-right:none; }
.dash-kpi-item:nth-last-child(-n+2) { border-bottom:none; }
.dash-kpi-label { font-size:.64rem;color:var(--muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em; }
.dash-kpi-val { font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:var(--text); }
.dash-kpi-val.green { color:var(--green); }
.dash-kpi-val.red   { color:var(--red); }

.dash-status-grid { display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border); }
a.dash-status-item { text-decoration:none;display:flex;flex-direction:column;align-items:center; }
.dash-status-item { padding:10px 8px;text-align:center;border-right:1px solid var(--border);cursor:pointer;transition:background .12s; }
.dash-status-item:last-child { border-right:none; }
.dash-status-item:hover { background:var(--surface2); }
.dash-status-count { font-family:var(--font-mono);font-size:1.2rem;font-weight:700;display:block; }
.dash-status-label { font-size:.6rem;color:var(--muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em; }
.dash-status-item.offen .dash-status-count { color:var(--muted); }
.dash-status-item.in_bearbeitung .dash-status-count { color:var(--accent); }
.dash-status-item.versendet .dash-status-count { color:var(--blue); }
.dash-status-item.retoure .dash-status-count { color:var(--red); }
.dash-status-item.abgeschlossen .dash-status-count { color:#9ca3af; }

.dash-recent-list { padding:8px 10px;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto; }
a.dash-recent-item { text-decoration:none;display:flex; }
.dash-recent-item { display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;font-size:.76rem;cursor:pointer;transition:background .1s; }
.dash-recent-item:hover { background:var(--surface2); }
.dash-recent-nr { font-family:var(--font-mono);font-size:.63rem;color:var(--muted);flex-shrink:0; }
.dash-recent-name { flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

.dash-inv-preview { padding:8px 10px;display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto; }
.dash-inv-item { display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;font-size:.78rem;border-left:3px solid transparent; }
.dash-inv-item.ok       { border-left-color:var(--green); }
.dash-inv-item.niedrig  { border-left-color:var(--accent);background:rgba(240,165,0,.05); }
.dash-inv-item.kritisch { border-left-color:var(--red);background:rgba(231,76,60,.07); }
.dash-inv-name  { flex:1;color:var(--text);font-size:.76rem; }
.dash-inv-stock { font-family:var(--font-mono);font-size:.73rem;font-weight:600;flex-shrink:0; }
.dash-inv-stock.ok       { color:var(--green); }
.dash-inv-stock.niedrig  { color:var(--accent); }
.dash-inv-stock.kritisch { color:var(--red); }

.dash-rank-preview { padding:8px 10px;display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto; }
.dash-rank-item { display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;font-size:.76rem; }
.dash-rank-pos-icon { font-size:.88rem;flex-shrink:0;width:20px;text-align:center; }
.dash-rank-name { flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.dash-rank-val  { font-family:var(--font-mono);font-size:.73rem;color:var(--green);font-weight:600;flex-shrink:0; }

.dash-kunden-preview { padding:8px 10px;display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto; }
a.dash-kunde-item { text-decoration:none;display:flex; }
.dash-kunde-item { display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;font-size:.76rem;cursor:pointer;transition:background .1s; }
.dash-kunde-item:hover { background:var(--surface2); }
.dash-kunde-nr   { font-family:var(--font-mono);font-size:.63rem;color:var(--muted);flex-shrink:0; }
.dash-kunde-name { flex:1;color:var(--text);font-weight:600; }
.dash-kunde-meta { font-family:var(--font-mono);font-size:.66rem;color:var(--muted); }

.dash-buch-preview { padding:8px 10px;display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto; }
.dash-buch-item { display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:5px;font-size:.76rem; }
.dash-buch-desc { flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.dash-buch-betrag { font-family:var(--font-mono);font-size:.73rem;font-weight:600;flex-shrink:0; }

.dash-widget .notif-list { max-height:140px;overflow-y:auto;padding:8px 10px; }
.dash-widget .notif-item { font-size:.76rem;padding:6px 10px; }

/* ── MAIN BESTELLUNGEN LAYOUT ─────────────────── */
main {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  padding: 22px 28px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── PANELS ───────────────────────────────────── */
.panel { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); }
.panel-header { display:flex;align-items:center;justify-content:space-between;padding:14px 18px 11px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px; }
.panel-header h2 { font-family:var(--font-mono);font-size:.88rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em; }
.filter-bar { display:flex;gap:7px;flex-wrap:wrap; }
.filter-bar input, .filter-bar select { background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:5px 9px;font-family:var(--font-main);font-size:.78rem;outline:none;transition:border-color .2s; }
.filter-bar input:focus, .filter-bar select:focus { border-color:var(--accent); }

.badge { background:var(--accent2);color:#fff;font-family:var(--font-mono);font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:99px;min-width:24px;text-align:center; }

.order-list { padding:10px;display:flex;flex-direction:column;gap:0; }
.order-list::-webkit-scrollbar { width:5px; }
.order-list::-webkit-scrollbar-track { background:transparent; }
.order-list::-webkit-scrollbar-thumb { background:var(--border);border-radius:4px; }

/* Date divider */
.date-divider { font-family:var(--font-mono);font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 4px;position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--border);margin-bottom:4px; }

/* ── ORDER CARD ───────────────────────────────── */
.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  margin-bottom: 6px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.order-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.25); }
.order-card.status-offen          { border-left-color:var(--muted); }
.order-card.status-in_bearbeitung { border-left-color:var(--accent); }
.order-card.status-versendet      { border-left-color:var(--blue); }
.order-card.status-abgeschlossen  { border-left-color:#6b7280;opacity:.75; }
.order-card.status-retoure        { border-left-color:var(--red); }

.card-main { display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;user-select:none; }
.card-info  { flex:1;min-width:0; }
.card-title-row { display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
.card-nummer { font-family:var(--font-mono);font-size:.65rem;color:var(--muted);background:var(--surface2);padding:1px 6px;border-radius:4px;border:1px solid var(--border);flex-shrink:0; }
.card-artikel { font-weight:600;font-size:.88rem;color:var(--text); }
.card-kunde { font-size:.75rem;color:var(--muted);margin-top:2px; }
.card-badges { display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap; }
.card-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }

.card-status { font-family:var(--font-mono);font-size:.62rem;padding:2px 7px;border-radius:99px;font-weight:600;white-space:nowrap; }
.card-status.offen          { background:#2e3250;color:var(--muted); }
.card-status.in_bearbeitung { background:rgba(240,165,0,.15);color:var(--accent); }
.card-status.versendet      { background:rgba(59,130,246,.15);color:var(--blue); }
.card-status.abgeschlossen  { background:rgba(107,114,128,.15);color:#9ca3af; }
.card-status.retoure        { background:rgba(231,76,60,.15);color:var(--red); }

.card-profit { font-family:var(--font-mono);font-size:.72rem;font-weight:600; }
.card-profit.pos { color:var(--green); }
.card-profit.neg { color:var(--red); }

.card-platform { border-radius:4px;padding:1px 6px;font-size:.63rem;font-weight:600;border:1px solid; }
.platform-vinted    { color:#00b09b;border-color:rgba(0,176,155,.35);background:rgba(0,176,155,.1); }
.platform-ebay      { color:#e53238;border-color:rgba(229,50,56,.35);background:rgba(229,50,56,.1); }
.platform-amazon    { color:#ff9900;border-color:rgba(255,153,0,.35);background:rgba(255,153,0,.1); }
.platform-temu      { color:#f05a28;border-color:rgba(240,90,40,.35);background:rgba(240,90,40,.1); }
.platform-sonstiges { color:var(--muted);border-color:var(--border);background:transparent; }

.vinted-timer { font-family:var(--font-mono);font-size:.63rem;padding:1px 6px;border-radius:4px;border:1px solid;white-space:nowrap; }
.vinted-timer.ok       { color:var(--green);border-color:rgba(46,204,113,.3);background:rgba(46,204,113,.08); }
.vinted-timer.warn     { color:var(--accent);border-color:rgba(240,165,0,.3);background:rgba(240,165,0,.08); }
.vinted-timer.kritisch { color:var(--red);border-color:rgba(231,76,60,.4);background:rgba(231,76,60,.12);animation:pulse 1.5s infinite; }

.btn-gear { background:var(--surface2);border:1px solid var(--border);color:var(--muted);width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;transition:all .15s;flex-shrink:0; }
.btn-gear:hover { border-color:var(--accent);color:var(--accent); }
.btn-expand { background:transparent;border:none;color:var(--muted);cursor:pointer;padding:2px 6px;font-size:.8rem;transition:color .15s;flex-shrink:0; }
.btn-expand:hover { color:var(--accent); }

/* ── CARD EXPANDED (schöner) ──────────────────── */
.card-expanded {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
.card-expanded.open { display: block; }

.card-expanded-inner {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 16px;
}

.exp-field { display:flex;flex-direction:column;gap:3px; }
.exp-field.full { grid-column:1/-1; }
.exp-field label { font-size:.63rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono); }
.exp-field span  { color:var(--text);font-size:.82rem; }
.exp-field a     { color:var(--blue);font-size:.78rem;text-decoration:none; }
.exp-field a:hover { text-decoration:underline; }

/* Dokumente-Bereich in Expand */
.card-docs-section { border-top:1px solid var(--border);padding:10px 14px; }
.card-docs-title { font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);margin-bottom:7px; }
.card-docs-list { display:flex;flex-wrap:wrap;gap:6px; }
.card-doc-item { display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:5px 10px;font-size:.76rem; }
.card-doc-link { color:var(--blue);text-decoration:none;font-family:var(--font-mono);font-size:.72rem; }
.card-doc-link:hover { text-decoration:underline; }
.btn-add-doc { background:transparent;border:1px dashed var(--border);color:var(--muted);padding:4px 10px;border-radius:5px;font-size:.72rem;cursor:pointer;transition:all .15s; }
.btn-add-doc:hover { border-color:var(--accent);color:var(--accent); }

/* Paketsummen */
.card-items-list { padding:8px 14px;border-top:1px solid var(--border); }
.card-item-row { display:flex;align-items:center;gap:8px;font-size:.78rem;padding:3px 0;color:var(--muted); }
.card-item-row strong { color:var(--text); }

.empty-state { text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:.76rem;padding:32px 20px; }

/* ── MODAL ────────────────────────────────────── */
.modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);z-index:999;justify-content:center;align-items:center; }
.modal-overlay.active { display:flex; }
.modal { background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--radius);padding:24px 28px;width:540px;max-width:95vw;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:0; }
.modal h3 { font-family:var(--font-mono);font-size:.92rem;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px; }
.modal-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px; }
.mfield { display:flex;flex-direction:column;gap:4px; }
.mfield.full { grid-column:1/-1; }
.mfield label { font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em; }
.mfield input,.mfield select,.mfield textarea { background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:7px 10px;font-family:var(--font-main);font-size:.84rem;outline:none;width:100%;transition:border-color .2s;resize:vertical; }
.mfield input:focus,.mfield select:focus,.mfield textarea:focus { border-color:var(--accent); }

/* Artikel-Suche Dropdown */
.artikel-search-wrap { position:relative; }
.artikel-dropdown { position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);max-height:200px;overflow-y:auto;z-index:50;display:none; }
.artikel-dropdown.open { display:block; }
.artikel-opt { padding:8px 12px;cursor:pointer;font-size:.84rem;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:background .1s; }
.artikel-opt:hover { background:var(--surface2); }
.artikel-opt-name { font-weight:600;color:var(--text); }
.artikel-opt-meta { font-family:var(--font-mono);font-size:.68rem;color:var(--muted); }

/* Paket-Artikel-Liste im Modal */
.paket-artikel-list { display:flex;flex-direction:column;gap:6px;margin-bottom:6px; }
.paket-artikel-row { display:grid;grid-template-columns:1fr 70px auto;gap:6px;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:7px 10px; }
.paket-artikel-name { font-size:.82rem;color:var(--text); }
.paket-artikel-menge { font-family:var(--font-mono);font-size:.78rem;color:var(--muted);text-align:center; }
.btn-remove-artikel { background:transparent;border:none;color:var(--red);cursor:pointer;font-size:.9rem;padding:0 4px; }

.modal-actions { display:flex;gap:9px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap; }
.btn-cancel { background:transparent;border:1px solid var(--border);color:var(--muted);padding:7px 16px;border-radius:var(--radius);cursor:pointer;font-family:var(--font-main);font-size:.84rem;transition:border-color .15s; }
.btn-cancel:hover { border-color:var(--muted);color:var(--text); }
.btn-save { background:var(--accent);border:none;color:#111;padding:7px 20px;border-radius:var(--radius);cursor:pointer;font-family:var(--font-main);font-weight:600;font-size:.84rem;transition:background .15s; }
.btn-save:hover { background:#ffc233; }
.btn-delete { background:transparent;border:1px solid var(--red);color:var(--red);padding:7px 14px;border-radius:var(--radius);cursor:pointer;font-family:var(--font-main);font-size:.84rem;transition:background .15s;margin-right:auto; }
.btn-delete:hover { background:rgba(231,76,60,.1); }
.btn-primary { background:var(--accent);color:#111;border:none;padding:7px 16px;border-radius:var(--radius);font-weight:600;font-family:var(--font-main);font-size:.84rem;cursor:pointer;transition:background .15s; }
.btn-primary:hover { background:#ffc233; }

/* ── DETAIL MODAL ─────────────────────────────── */
.modal-detail { width:560px; }
.detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:6px; }
.detail-grid .full { grid-column:1/-1; }
.detail-field { display:flex;flex-direction:column;gap:4px; }
.detail-field label { display:block;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em; }
.detail-field input,.detail-field select,.detail-field textarea { background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:7px 10px;font-family:var(--font-main);font-size:.84rem;width:100%;outline:none;transition:border-color .2s;resize:vertical; }
.detail-field input:focus,.detail-field select:focus,.detail-field textarea:focus { border-color:var(--accent); }

.profit-box { background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.25);border-radius:var(--radius);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.78rem;margin-bottom:10px; }
.profit-box .label { color:var(--muted); }
.profit-box .value { color:var(--green);font-weight:600;font-size:.95rem; }

/* ── INVENTAR ─────────────────────────────────── */
.inventar-page { padding:22px 28px;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:16px; }
.inventar-toolbar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; }
.inventar-toolbar h2 { font-family:var(--font-mono);font-size:.95rem;color:var(--accent);text-transform:uppercase;letter-spacing:.07em; }
.inventar-table { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; }
.inv-header { display:grid;grid-template-columns:90px 1fr 90px 100px 100px 130px 90px;padding:9px 14px;background:var(--surface2);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.67rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;gap:8px; }
.inv-row { display:grid;grid-template-columns:90px 1fr 90px 100px 100px 130px 90px;padding:10px 14px;border-bottom:1px solid var(--border);align-items:center;gap:8px;font-size:.83rem;transition:background .12s;cursor:pointer; }
.inv-row:last-child { border-bottom:none; }
.inv-row:hover { background:var(--surface2); }
.inv-row.kritisch { border-left:3px solid var(--red); }
.inv-row.niedrig  { border-left:3px solid var(--accent); }

/* Inventar Artikel Detail (ausgeklappt) */
.inv-detail-panel { display:none;border-top:1px solid var(--border);background:var(--surface2);padding:14px 18px; }
.inv-detail-panel.open { display:grid;grid-template-columns:1fr auto;gap:16px; }
.inv-detail-info { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; }
.inv-detail-img-wrap { width:120px;flex-shrink:0;display:flex;align-items:flex-start; }
.inv-detail-img { width:120px;height:90px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border); }
.inv-detail-img-placeholder { width:120px;height:90px;background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.7rem;text-align:center;cursor:pointer; }

.inv-artikelnr { font-family:var(--font-mono);font-size:.7rem;color:var(--muted); }
.inv-name { font-weight:600;color:var(--text); }
.inv-bestand { font-family:var(--font-mono);font-weight:600;font-size:.88rem; }
.inv-bestand.ok       { color:var(--green); }
.inv-bestand.niedrig  { color:var(--accent); }
.inv-bestand.kritisch { color:var(--red); }
.inv-controls { display:flex;align-items:center;gap:5px; }
.btn-inv { background:var(--surface2);border:1px solid var(--border);color:var(--text);width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.95rem;font-weight:700;transition:all .12s;line-height:1; }
.btn-inv:hover { border-color:var(--accent);color:var(--accent); }
.btn-inv.minus:hover { border-color:var(--red);color:var(--red); }
.inv-actions { display:flex;gap:5px; }
.inv-modal-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px; }

/* Nachlieferung */
.btn-nachlieferung { background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:var(--blue);padding:3px 9px;border-radius:5px;font-size:.7rem;cursor:pointer;transition:all .15s;white-space:nowrap; }
.btn-nachlieferung:hover { background:rgba(59,130,246,.2); }

/* ── KUNDENKARTEI ─────────────────────────────── */
.kunden-page { padding:22px 28px;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:16px; }
.kunden-header { display:flex;align-items:center;gap:16px; }
.kunden-header h2 { font-family:var(--font-mono);font-size:.95rem;color:var(--accent);text-transform:uppercase;letter-spacing:.07em; }
.muted-info { font-family:var(--font-mono);font-size:.76rem;color:var(--muted); }
.kunden-list { display:flex;flex-direction:column;gap:8px; }
.kunden-card { background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:var(--radius);padding:12px 16px;cursor:pointer;transition:box-shadow .15s;display:flex;align-items:center;gap:14px; }
.kunden-card:hover { box-shadow:0 3px 14px rgba(0,0,0,.25); }
.kunden-nr { font-family:var(--font-mono);font-size:.7rem;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:2px 8px;white-space:nowrap; }
.kunden-name { font-weight:600;font-size:.92rem;flex:1; }
.kunden-meta { font-family:var(--font-mono);font-size:.72rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap; }
.kunde-orders-list { display:flex;flex-direction:column;gap:5px;margin-top:6px;max-height:220px;overflow-y:auto; }
.kunde-order-item { background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:7px 11px;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;gap:10px; }

/* ── RANKING ──────────────────────────────────── */
.ranking-page { padding:22px 28px;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:16px; }
.ranking-toolbar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; }
.ranking-toolbar h2 { font-family:var(--font-mono);font-size:.95rem;color:var(--accent);text-transform:uppercase;letter-spacing:.07em; }
.ranking-filters { display:flex;gap:8px;flex-wrap:wrap; }
.ranking-filters select { background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:6px 10px;font-family:var(--font-main);font-size:.8rem;outline:none; }
.ranking-two-col { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.ranking-panel { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; }
.ranking-panel-header { display:flex;align-items:center;justify-content:space-between;padding:12px 16px 10px;border-bottom:1px solid var(--border); }
.ranking-panel-header h3 { font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em; }
.ranking-panel-header h3.best  { color:var(--green); }
.ranking-panel-header h3.worst { color:var(--red); }
.ranking-list { padding:9px 11px;display:flex;flex-direction:column;gap:6px; }
.ranking-item { display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);font-size:.8rem; }
.rank-pos { font-family:var(--font-mono);font-size:.73rem;font-weight:700;width:22px;text-align:center;flex-shrink:0; }
.rank-1 { color:#ffd700; } .rank-2 { color:#c0c0c0; } .rank-3 { color:#cd7f32; } .rank-bad { color:var(--red); }
.rank-name { flex:1;font-weight:600;color:var(--text); }
.rank-stats { display:flex;flex-direction:column;align-items:flex-end;gap:2px; }
.rank-value { font-family:var(--font-mono);font-size:.76rem;font-weight:600; }
.rank-value.green { color:var(--green); } .rank-value.red { color:var(--red); } .rank-value.muted { color:var(--muted); }
.rank-sub { font-family:var(--font-mono);font-size:.65rem;color:var(--muted); }
.btn-rank-inv { background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);color:var(--blue);padding:2px 8px;border-radius:4px;font-size:.67rem;cursor:pointer;white-space:nowrap;font-family:var(--font-mono);transition:all .15s; }
.btn-rank-inv:hover { background:rgba(59,130,246,.2); }

/* ── BUCHHALTUNG ──────────────────────────────── */
.buch-page { padding:22px 28px;max-width:1300px;margin:0 auto;display:flex;flex-direction:column;gap:16px; }
.buch-toolbar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; }
.buch-toolbar h2 { font-family:var(--font-mono);font-size:.95rem;color:var(--accent);text-transform:uppercase;letter-spacing:.07em; }
.buch-toolbar-right { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.buch-toolbar-right select { background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:6px 10px;font-family:var(--font-main);font-size:.8rem;outline:none; }
.buch-kpi-row { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.buch-two-col { display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start; }
.buch-panel { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; }
.buch-panel-header { padding:11px 16px 9px;border-bottom:1px solid var(--border); }
.buch-panel-header h3 { font-family:var(--font-mono);font-size:.8rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em; }
.buch-table { overflow-x:auto; }
.buch-table-header { display:grid;grid-template-columns:90px 130px 1fr 90px 60px;padding:7px 13px;background:var(--surface2);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;gap:8px; }
.buch-row { display:grid;grid-template-columns:90px 130px 1fr 90px 60px;padding:8px 13px;border-bottom:1px solid var(--border);align-items:center;gap:8px;font-size:.8rem;transition:background .1s; }
.buch-row:last-child { border-bottom:none; }
.buch-row:hover { background:var(--surface2); }
.buch-row.auto { border-left:3px solid var(--green); }
.buch-betrag-pos { font-family:var(--font-mono);font-weight:700;color:var(--green); }
.buch-betrag-neg { font-family:var(--font-mono);font-weight:700;color:var(--red); }
.buch-konto-tag { font-size:.65rem;padding:2px 6px;border-radius:4px;font-family:var(--font-mono);background:var(--surface2);border:1px solid var(--border);color:var(--muted);white-space:nowrap; }
.buch-konten-list { padding:10px;display:flex;flex-direction:column;gap:5px; }
.buch-konto-item { display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);font-size:.8rem;gap:8px;cursor:pointer;transition:background .1s; }
.buch-konto-item:hover { background:var(--border); }
.buch-konto-name { flex:1;color:var(--text); }
.buch-konto-val  { font-family:var(--font-mono);font-weight:600;font-size:.83rem; }
.btn-edit-sm { background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:2px 5px;border-radius:4px;transition:background .15s; }
.btn-edit-sm:hover { background:rgba(240,165,0,.1);color:var(--accent); }

/* ── EINSTELLUNGEN ────────────────────────────── */
.settings-page { padding:22px 28px;max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:22px; }
.settings-page h2 { font-family:var(--font-mono);font-size:.95rem;color:var(--accent);text-transform:uppercase;letter-spacing:.07em; }
.settings-section { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;display:flex;flex-direction:column;gap:10px; }
.settings-section h3 { font-family:var(--font-mono);font-size:.83rem;color:var(--text);letter-spacing:.04em; }
.settings-hint { font-size:.76rem;color:var(--muted); }
.settings-row { display:flex;gap:9px;flex-wrap:wrap;align-items:center; }
.settings-row input { background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:7px 10px;font-family:var(--font-main);font-size:.82rem;outline:none;flex:1;min-width:120px;transition:border-color .2s; }
.settings-row input:focus { border-color:var(--accent); }
.btn-save-sm { background:var(--accent);border:none;color:#111;padding:7px 14px;border-radius:var(--radius);font-weight:600;font-family:var(--font-main);font-size:.8rem;cursor:pointer;white-space:nowrap;transition:background .15s; }
.btn-save-sm:hover { background:#ffc233; }
.settings-msg { font-size:.76rem;font-family:var(--font-mono);min-height:16px; }
.settings-msg.ok  { color:var(--green); }
.settings-msg.err { color:var(--red); }
.paket-list { display:flex;flex-direction:column;gap:5px; }
.paket-item { display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:7px 11px;font-size:.82rem; }
.paket-item span { color:var(--text); }
.paket-preis { font-family:var(--font-mono);color:var(--muted); }
.btn-del-sm { background:transparent;border:none;color:var(--red);cursor:pointer;font-size:.8rem;padding:2px 5px;border-radius:4px;transition:background .15s; }
.btn-del-sm:hover { background:rgba(231,76,60,.1); }

/* ── KPI CARDS (shared) ───────────────────────── */
.kpi-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px; }
.kpi-label { font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono);margin-bottom:7px; }
.kpi-value { font-family:var(--font-mono);font-size:1.15rem;font-weight:600;color:var(--text); }
.kpi-value.green { color:var(--green); }
.kpi-value.red   { color:var(--red); }

/* ── NOTIFICATIONS ────────────────────────────── */
.notif-list { padding:10px 12px;display:flex;flex-direction:column;gap:7px; }
.notif-item { display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:var(--radius);font-size:.8rem;border:1px solid transparent; }
.notif-item.warn  { background:rgba(240,165,0,.08);border-color:rgba(240,165,0,.2);color:#f0c060; }
.notif-item.info  { background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.2);color:#93c5fd; }
.notif-item.ok    { background:rgba(46,204,113,.06);border-color:rgba(46,204,113,.15);color:var(--green); }
.notif-item.crit  { background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.3);color:#f87171; }

/* ── AUTOCOMPLETE ─────────────────────────────── */
.autocomplete-box { background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);max-height:160px;overflow-y:auto;display:none;flex-direction:column;position:relative;z-index:10; }
.autocomplete-box.open { display:flex; }
.autocomplete-item { padding:7px 11px;cursor:pointer;font-size:.82rem;transition:background .1s;display:flex;flex-direction:column;gap:2px; }
.autocomplete-item:hover { background:var(--border); }
.ac-name { color:var(--text);font-weight:600; }
.ac-meta { color:var(--muted);font-size:.7rem;font-family:var(--font-mono); }

/* ── VERSANDSCHEIN ────────────────────────────── */
.card-versandschein { font-size:.65rem;color:var(--blue);font-family:var(--font-mono);text-decoration:none;border:1px solid rgba(59,130,246,.25);background:rgba(59,130,246,.07);padding:1px 6px;border-radius:4px;white-space:nowrap; }
.card-versandschein:hover { border-color:var(--blue); }

/* ── DATE INPUT ───────────────────────────────── */
input[type="date"] { color-scheme:dark; }
[data-theme="light"] input[type="date"] { color-scheme:light; }

/* ── MOBILE FAB ───────────────────────────────── */
.mobile-fab { display:none;position:fixed;bottom:22px;right:20px;z-index:300;background:var(--accent);color:#111;border:none;width:52px;height:52px;border-radius:50%;font-size:1.5rem;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(240,165,0,.4);cursor:pointer;font-weight:700; }

/* ── ANIMATIONS ───────────────────────────────── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width:1100px) {
  .dash-widgets-grid { grid-template-columns:repeat(2,1fr); }
  .buch-kpi-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  main { grid-template-columns:1fr !important; }
  .ranking-two-col { grid-template-columns:1fr; }
  .buch-two-col { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  header { padding:9px 14px;gap:8px;position:relative; }
  .logo { font-size:.82rem; }
  .hamburger { display:block;margin-left:auto; }
  .main-nav { display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:2px solid var(--accent);flex-direction:column;padding:8px 14px 12px;z-index:200;gap:4px; }
  .main-nav.open { display:flex; }
  .nav-btn { flex-direction:row;min-width:unset;padding:10px 14px;gap:10px; }
  .nav-label { font-size:.82rem; }
  .header-meta { display:none; }
  .header-meta.open { display:flex;position:absolute;top:calc(100% + 48px);left:0;right:0;background:var(--surface2);padding:8px 14px;border-bottom:1px solid var(--border);z-index:199;flex-wrap:wrap;gap:8px; }
  .mobile-fab { display:flex; }
  .dashboard-grid { padding:12px;gap:12px; }
  .dash-widgets-grid { grid-template-columns:1fr; }
  .inventar-page,.ranking-page,.buch-page,.kunden-page,.settings-page { padding:12px; }
  .inv-header { display:none; }
  .inv-row { grid-template-columns:1fr !important;gap:6px !important;padding:12px !important; }
  .modal { width:100% !important;max-width:100vw !important;max-height:95vh !important;border-radius:var(--radius) var(--radius) 0 0 !important; }
  .modal-overlay { align-items:flex-end !important; }
  .modal-grid { grid-template-columns:1fr !important; }
  .mfield.full { grid-column:1 !important; }
  .header-date { display:none; }
  .card-expanded-inner { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:480px) {
  .detail-grid { grid-template-columns:1fr !important; }
  .detail-grid .full { grid-column:1 !important; }
  .buch-kpi-row { grid-template-columns:1fr 1fr !important; }
  .card-expanded-inner { grid-template-columns:1fr !important; }
}

/* ── ORDER LIST SCRUBBER ──────────────────────── */
.order-list::-webkit-scrollbar { width: 8px; }
.order-list::-webkit-scrollbar-track { background: var(--surface2); border-radius: 4px; }
.order-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.order-list::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Bestellungen wrapper with scrubber */
.bestellungen-wrap {
  display: flex;
  flex-direction: row;
}

.bestellungen-wrap .order-list {
  flex: 1;
  min-width: 0;
}

/* Quick-Jump Scrubber */
.list-scrubber {
  width: 28px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  background: var(--surface2);
  border-left: 1px solid var(--border);
  cursor: ns-resize;
  position: sticky;
  top: 64px;
  align-self: flex-start;
  height: calc(100vh - 90px);
  user-select: none;
  border-radius: 0 0 var(--radius) 0;
}

.scrubber-track {
  flex: 1;
  width: 10px;
  background: var(--border);
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.scrubber-thumb {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--accent);
  border-radius: 5px;
  min-height: 20px;
  cursor: grab;
  transition: background 0.1s;
}
.scrubber-thumb:hover,
.scrubber-thumb.dragging { background: #ffc233; cursor: grabbing; }

.scrubber-label {
  font-family: var(--font-mono);
  font-size: .55rem;
  color: var(--muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  pointer-events: none;
  max-height: 80px;
  overflow: hidden;
}

.scrubber-date-tooltip {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--accent);
  pointer-events: none;
  z-index: 500;
  white-space: nowrap;
  display: none;
}

/* Panel header stays fixed */
.panel-header {
  position: sticky;
  top: 64px;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 820px) {
  main { grid-template-columns: 1fr !important; }
  .list-scrubber { display: none; }
}
/* ── KUNDEN TOOLBAR ───────────────────────────── */
.kunden-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.kunden-toolbar input:focus { border-color: var(--accent) !important; }