/* ===== Moderni Control Plane ===== */
:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --ink: #101828;
  --muted: #667085;
  --line: #e6e9f0;
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --brand-soft: #eef0ff;
  --ok: #067647; --ok-bg: #e7f6ef;
  --warn: #b54708; --warn-bg: #fef3e6;
  --err: #b42318; --err-bg: #fdecea;
  --sidebar: #0c1222;
  --sidebar-ink: #94a3b8;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px -6px rgba(16, 24, 40, .08);
}
/* Zurück zum bisherigen Aussehen (22.10.2026, Team mochte es lieber). Die Tokens unten
   halten Blöcke lauffähig, die schon mit var(--…) geschrieben sind — Werte = altes Aussehen. */
:root {
  --sunken: #f1f3f9; --hover: #f8f9fe; --ink-2: #344054; --faint: #98a2b3; --line-soft: #f0f2f7;
  --brand-line: #dcdffe; --on-brand: #ffffff; --ring: rgba(79, 70, 229, .13);
  --ok-line: #c6ebd8; --warn-line: #fcd9b0; --err-line: #f6c9c4;
  --note-bg: #fffbeb; --note-ink: #6b4e00; --note-line: #fde68a; --amber: #f59e0b; --dot: #ef4444;
  --sb-bg: #0c1222; --sb-ink: #94a3b8; --sb-strong: #e2e8f0; --sb-hover: rgba(255, 255, 255, .07);
  --sb-active: rgba(99, 102, 241, .22); --sb-line: rgba(255, 255, 255, .08); --sb-field: rgba(255, 255, 255, .07);
  --code-bg: #0c1222; --code-ink: #c9d4f0; --shadow-pop: 0 10px 28px -10px rgba(15, 23, 42, .3);
  --accent: var(--brand); --text: var(--ink);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }

/* ===== Shell / Sidebar ===== */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, #0c1222 0%, #111a33 100%);
  display: flex; flex-direction: column;
  padding: 20px 14px;
}
.brand { display: flex; gap: 11px; align-items: center; padding: 2px 8px 20px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 800; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px -2px rgba(99, 102, 241, .55);
}
.brand-mark.big { width: 52px; height: 52px; font-size: 28px; border-radius: 14px; margin: 0 auto; }
.brand-name { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.brand-sub { color: var(--sidebar-ink); font-size: 11.5px; margin-top: -2px; }
.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 11px;
  color: var(--sidebar-ink); padding: 9px 12px; border-radius: 9px;
  font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s;
}
.sidebar nav a svg { width: 17px; height: 17px; fill: currentColor; opacity: .85; flex-shrink: 0; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .06); color: #e2e8f0; }
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, .22), rgba(124, 58, 237, .12));
  color: #fff; box-shadow: inset 2px 0 0 var(--brand);
}
.nav-section {
  color: #475569; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; padding: 16px 12px 6px;
}
.sidebar-foot { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.user-chip { display: flex; align-items: center; gap: 10px; flex: 1; padding: 8px; border-radius: 10px; }
.user-chip:hover, .user-chip.active { background: rgba(255,255,255,.07); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #334155, #475569);
  color: #e2e8f0; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.user-name { color: #e2e8f0; font-size: 13px; font-weight: 600; line-height: 1.2; }
.user-role { color: var(--sidebar-ink); font-size: 11px; }
.logout { padding: 8px; border-radius: 8px; color: var(--sidebar-ink); }
.logout:hover { background: rgba(255,255,255,.07); color: #fca5a5; }
.logout svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* ===== Content ===== */
.content { flex: 1; padding: 28px 34px 60px; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 2px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.sub { color: var(--muted); margin: 3px 0 0; font-size: 13.5px; }
.head-badges { display: flex; gap: 8px; align-items: center; padding-top: 8px; }
.flash {
  background: var(--brand-soft); border: 1px solid #dcdffe; color: #3730a3;
  padding: 10px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500;
}
.notice { padding: 13px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 13.5px; }
.notice.warn { background: var(--warn-bg); border: 1px solid #fcd9b0; color: var(--warn); }

/* ===== KPI Cards ===== */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.kpi {
  background: var(--card); border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.kpi.accent {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border: none;
}
.kpi.accent .kpi-label { color: #ddd6fe; }
.kpi.accent .kpi-value { color: #fff; }
.kpi-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.kpi-value { font-size: 26px; font-weight: 750; letter-spacing: -.5px; margin-top: 4px; }

/* ===== Cards & Tables ===== */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line); padding: 18px 20px; margin-bottom: 18px;
  overflow-x: auto;
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-head h2 { margin: 0; font-size: 15.5px; font-weight: 700; }
.card-total { text-align: right; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 4px; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; color: var(--muted); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 10px; border-bottom: 1px solid #f0f2f7; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; }
.tbl th.num { text-align: right; }
.sort-h { color: inherit; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
.sort-h:hover { color: var(--brand); }
.sort-h .sort-arr { font-size: 9px; opacity: .35; }
.sort-h.active { color: var(--brand); }
.sort-h.active .sort-arr { opacity: 1; }
th.num .sort-h { flex-direction: row-reverse; }
.rowlink { cursor: pointer; transition: background .12s; }
.rowlink:hover { background: #f8f9fe; }
.row-active { background: var(--brand-soft); }
.row-inactive { opacity: .5; }
.subrow td { padding-top: 0; background: #fafbfe; }
.empty { color: var(--muted); text-align: center; padding: 26px !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.truncate { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-title { font-weight: 550; }
.link { font-weight: 600; font-size: 13px; }

/* ===== Badges & Chips ===== */
.badge {
  display: inline-block; padding: 2.5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; background: #f1f3f9; color: #475069;
  white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.qty { font-weight: 700; }
.wh-breakdown { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.wh-tag { font-size: 11px; font-weight: 600; color: #475069; background: #eef0ff;
  border: 1px solid #dcdffe; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.qty.zero { color: var(--err); }
.qty.low { color: var(--warn); }
.lock { background: #fbf9ff; }
.chip {
  display: inline-block; margin: 1.5px 3px 1.5px 0; padding: 2px 8px;
  border-radius: 7px; font-size: 11px; font-weight: 600;
  background: #f1f3f9; color: #475069; border: 1px solid var(--line);
}
.chip.st-active { background: var(--ok-bg); color: var(--ok); border-color: #c6ebd8; }
.chip.st-error { background: var(--err-bg); color: var(--err); border-color: #f6c9c4; }
.chip.st-pending { background: var(--warn-bg); color: var(--warn); border-color: #f8ddba; }
.chip.st-excluded, .chip.st-inactive { opacity: .55; }

/* Plattform-Farben */
.pf { font-weight: 650; white-space: nowrap; }
.pf::before { content: "●"; margin-right: 6px; font-size: 10px; vertical-align: 1px; }
.pf-ebay::before { color: #e53238; }
.pf-kaufland::before { color: #e10915; }
.pf-amazon_spapi::before { color: #ff9900; }
.pf-shopify::before { color: #96bf48; }
.pf-woocommerce::before { color: #7f54b3; }
.pf-mirakl::before { color: #6366f1; }
.pf-email::before { color: #0ea5e9; }
.pf-conrad::before { color: #005ca9; }
.pf-xxxlutz::before { color: #e2001a; }
.pf-manomano::before { color: #1a9e7f; }
.pf-netto_sftp::before { color: #ffcc00; }
.pf-idealo_feed::before { color: #0a71eb; }

/* ===== Filter / Forms ===== */
.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
input, select, button {
  font: inherit; border-radius: 10px; border: 1px solid var(--line);
  padding: 9px 13px; background: #fff; color: var(--ink); outline: none;
}
input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .13); }
input[type="search"] { min-width: 280px; }

/* Marken-Filter: Aufklapp-Menü mit Checkboxen (natives <details>) */
.brand-drop { position: relative; }
.brand-drop > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-weight: 600; white-space: nowrap;
}
.brand-drop > summary::-webkit-details-marker { display: none; }
.brand-drop[open] > summary { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.13); }
.brand-drop .caret { color: var(--muted); font-size: 11px; transition: transform .15s; }
.brand-drop[open] .caret { transform: rotate(180deg); }
.brand-badge {
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-panel {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px;
}
.brand-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 500;
}
.brand-opt:hover { background: var(--brand-soft); }
.brand-opt input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.brand-opt.sub { padding-left: 32px; }
.caret-cell { display: inline-block; color: var(--muted); font-size: 11px;
  transition: transform .15s; width: 12px; }
tr.grp-open .caret-cell { transform: rotate(90deg); }
tr.country-row td { background: #fafbfe; }
.brand-opt .opt-count { margin-left: auto; color: var(--muted); font-size: 12px;
  background: #f1f3f9; padding: 0 7px; border-radius: 999px; min-width: 20px; text-align: center; }
.brand-opt.is-empty { opacity: .5; }
.brand-opt.is-empty .opt-count { background: transparent; }
button {
  background: var(--brand); border-color: var(--brand); color: #fff;
  font-weight: 650; cursor: pointer; transition: filter .15s;
}
button:hover { filter: brightness(1.08); }
button.danger { background: #fff; border-color: #f2c1bd; color: var(--err); margin-top: 10px; }
button.danger:hover { background: var(--err-bg); }
.small-btn { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.mini { padding: 6px 9px; font-size: 13px; border-radius: 8px; width: 90px; }
.mini.num { text-align: right; }
.mini.wide { width: 230px; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.inline-form.wrap { flex-wrap: wrap; }
.inline-form input, .inline-form select { flex-shrink: 1; }
.stack-form { display: flex; flex-direction: column; gap: 13px; max-width: 340px; }
.stack-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; color: #344054; }
.form-actions { padding-top: 14px; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; color: var(--muted); padding: 6px; }
.grid-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.roles-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .grid-2, .roles-grid { grid-template-columns: 1fr; } }

/* ===== Rollen-Editor: Toggle-Switches ===== */
.perm-list { display: flex; flex-direction: column; }
.perm-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 4px; border-bottom: 1px solid #f0f2f7; cursor: pointer;
}
.perm-row:last-child { border-bottom: none; }
.perm-row.sensitive .perm-label::after {
  content: "sensibel"; margin-left: 8px; font-size: 10px; font-weight: 700;
  color: var(--warn); background: var(--warn-bg); padding: 1.5px 7px; border-radius: 999px;
  vertical-align: 1.5px; letter-spacing: .4px; text-transform: uppercase;
}
.perm-label { font-weight: 650; font-size: 13.5px; display: block; }
.perm-desc { color: var(--muted); font-size: 12px; display: block; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch.small { width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: #d6dae3; transition: background .18s;
}
.slider::before {
  content: ""; position: absolute; height: 18px; width: 18px;
  left: 3px; top: 3px; border-radius: 50%; background: #fff;
  transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch.small .slider::before { height: 14px; width: 14px; }
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch.small input:checked + .slider::before { transform: translateX(16px); }
.hint-card { text-align: center; padding: 40px 26px; }

/* ===== Lifecycle-KPIs + Segmente + Ship-Form ===== */
a.kpi-link { display: block; color: inherit; transition: transform .12s, box-shadow .12s; }
a.kpi-link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(16,24,40,.18); }
.kpi-warn .kpi-value { color: var(--warn); }
.kpi-err .kpi-value { color: var(--err); }
.kpi-secondary .kpi { padding: 12px 16px; }
.kpi-secondary .kpi-value { font-size: 20px; }
.seg-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.seg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; font-weight: 650; font-size: 13.5px;
  background: #fff; border: 1px solid var(--line); color: var(--muted);
}
.seg:hover { border-color: var(--brand); color: var(--ink); }
.seg.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg-count {
  background: rgba(0,0,0,.08); padding: 1px 8px; border-radius: 999px; font-size: 12px;
}
.seg.active .seg-count { background: rgba(255,255,255,.25); }
.seg-count.hot { background: var(--err-bg); color: var(--err); }
.seg.active .seg-count.hot { background: rgba(255,255,255,.25); color: #fff; }
.range-bar { align-items: center; }
.range-label-lead { font-weight: 700; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; margin-right: 2px; }
.range-bar input[type="date"] { padding: 7px 10px; }
.ship-form { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; }
.ship-form-head { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.push-check { display: flex; gap: 8px; align-items: center; margin-top: 10px;
  font-size: 13px; color: var(--muted); cursor: pointer; }

/* ===== Margen-Tabelle ===== */
.margin-tbl td { padding: 7px 6px; font-size: 13.5px; }
.margin-tbl .row-strong td { font-weight: 750; border-top: 2px solid var(--line); }

/* ===== Checkliste (Marge, Rechte) ===== */
.checklist { list-style: none; padding: 0; margin: 8px 0 0; }
.checklist li { padding: 6px 2px; color: var(--muted); border-bottom: 1px solid #f0f2f7; }
.checklist li:last-child { border-bottom: none; }
.checklist li.ok { color: var(--ok); font-weight: 550; }

/* ===== Rohdaten ===== */
details.raw summary { cursor: pointer; font-weight: 650; color: var(--muted); }
details.raw pre {
  background: #0c1222; color: #c9d4f0; padding: 16px; border-radius: 10px;
  overflow-x: auto; font-size: 12px; line-height: 1.55;
}

/* ===== Login ===== */
.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(99, 102, 241, .28), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(124, 58, 237, .22), transparent 55%),
    linear-gradient(160deg, #0c1222 0%, #131c3a 100%);
}
.login-wrap { width: 100%; max-width: 380px; padding: 24px; }
.login-card {
  background: rgba(255, 255, 255, .97); border-radius: 20px; padding: 34px 32px 30px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand h1 { margin: 14px 0 2px; font-size: 21px; letter-spacing: -.3px; }
.login-brand p { color: var(--muted); margin: 0; font-size: 13px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; color: #344054; }
.login-card button { padding: 11px; font-size: 15px; margin-top: 4px; }
.login-error {
  background: var(--err-bg); color: var(--err); border: 1px solid #f6c9c4;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13.5px;
}
.login-foot { text-align: center; color: #64748b; font-size: 12px; margin-top: 18px; }

/* ===== Sprachumschalter (Sidebar) ===== */
.lang-switch { display: flex; gap: 4px; padding: 8px 4px 10px;
  margin-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.lang-opt { flex: 1; text-align: center; padding: 5px 0; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  color: var(--sidebar-ink); background: rgba(255,255,255,.04); }
.lang-opt:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }
.lang-opt.active { background: var(--brand); color: #fff; }

/* ===== Mobile: Topbar + Burger + Off-Canvas-Sidebar ===== */
.nav-toggle-cb { position: absolute; opacity: 0; pointer-events: none; }
.topbar { display: none; }
.nav-overlay { display: none; }
.topbar-brand { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.burger { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.08); border: none; padding: 0; }
.burger svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 820px) {
  .topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 60; padding: 10px 14px;
    background: linear-gradient(180deg, #0c1222 0%, #111a33 100%); color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .topbar-brand .brand-mark { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 70; height: 100vh;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 6px 0 30px rgba(0,0,0,.4);
  }
  .nav-toggle-cb:checked ~ .shell .sidebar { transform: translateX(0); }
  .nav-toggle-cb:checked ~ .shell .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(4,8,20,.55); backdrop-filter: blur(1px);
  }
  .content { padding: 16px 14px 48px; }
  .page-head h1 { font-size: 19px; }
  input[type="search"] { min-width: 0; width: 100%; }
  .filter-bar { gap: 8px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .kpi-value { font-size: 22px; }
}

/* ===== Feedback-Runde 24.07.: Sidebar-Scroll, Touch, Mobile-Karten ===== */
/* Nav scrollt bei kleiner Höhe — Sprachwahl + Benutzer bleiben unten sichtbar */
.sidebar nav { overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.burger { width: 44px; height: 44px; }

/* Umsatz neutral (Violett = Auswahl/Primäraktion, nicht Umsatz) */
.kpi.accent { background: var(--card); border: 1px solid var(--line); }
.kpi.accent .kpi-label { color: var(--muted); }
.kpi.accent .kpi-value { color: var(--ink); }

/* Mobile: aktionsrelevante Tabellen als Karten statt Quer-Scroll */
@media (max-width: 640px) {
  .tbl.cards thead { display: none; }
  .tbl.cards, .tbl.cards tbody { display: block; }
  .tbl.cards tr { display: block; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .tbl.cards tr:last-child { border-bottom: none; }
  .tbl.cards td { display: inline-block; border: none; padding: 2px 10px 2px 0;
    vertical-align: middle; text-align: left; }
  .tbl.cards td.c-full { display: block; padding-right: 0; }
  .tbl.cards td.c-action { display: block; padding-top: 6px; }
  .tbl.cards td:empty { display: none; }
}

/* Einklappbare Nav-Gruppe (Verwaltung) — hält die Seitenleiste kurz */
.nav-group > summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; justify-content: space-between; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: #94a3b8; }
.nav-caret { font-size: 9px; transition: transform .15s; opacity: .7; }
.nav-group[open] .nav-caret { transform: rotate(180deg); }

/* ===== Arbeitsliste Versand (/ship) ===== */
.ship-item { padding: 12px 2px; border-bottom: 1px solid var(--line); }
.ship-item:last-child { border-bottom: none; }
.ship-item-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ship-item-title { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.ship-item-form select { max-width: 150px; }
@media (max-width: 640px) {
  .ship-item-form { flex-direction: column; align-items: stretch; }
  .ship-item-form select, .ship-item-form input[name="tracking"] { max-width: none; width: 100%; }
  .ship-item-form button { width: 100%; padding: 12px; }
}

/* ===== Eingangsrechnungen (/documents) ===== */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
a.chip { text-decoration: none; cursor: pointer; }
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* „Fehlt mir etwas?“ — Lückensammler in der Sidebar (07.09.2026) */
.fb-box { margin-top: 6px; padding: 6px 4px 8px; border-top: 1px solid rgba(255,255,255,.08); }
.fb-box summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600;
  color: var(--sidebar-ink); padding: 6px 8px; border-radius: 7px; }
.fb-box summary::-webkit-details-marker { display: none; }
.fb-box summary:hover, .fb-box[open] summary { background: rgba(255,255,255,.07); }
.fb-box textarea { width: 100%; margin-top: 6px; font-size: 12.5px; padding: 7px 8px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: #e2e8f0; resize: vertical; min-height: 64px; }
.fb-box textarea::placeholder { color: rgba(226,232,240,.5); }
.fb-box button { margin-top: 6px; width: 100%; font-size: 12px; padding: 7px 10px;
  border-radius: 8px; border: 0; background: var(--accent, #5348e8); color: #fff; font-weight: 600; cursor: pointer; }

/* Testphase-Banner (07.09.2026) */
.test-banner { background: #fff4d6; color: #6b4e00; border: 1px solid #f0d58c; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.test-banner a { color: #6b4e00; text-decoration: underline; }

/* =====================================================================
   Formular-System (15.09.2026) — EIN Muster für alle Seiten
   Anlass Bedo: „das ganze Tool sieht durcheinander aus“ + Knöpfe rutschen
   auf kleineren Bildschirmen unter die Felder. Regeln:
   1. Beschriftung steht ÜBER dem Feld, nie daneben.
   2. Zeilen-Formulare in Tabellen brechen NIE um — die Karte bekommt
      stattdessen eine Scroll-Leiste (min-width der Tabelle).
   3. Zahlen und Aktionen brechen nie um.
   ===================================================================== */
textarea {
  font: inherit; border-radius: 10px; border: 1px solid var(--line); padding: 9px 13px;
  background: #fff; color: var(--ink); outline: none; width: 100%; min-height: 72px;
  resize: vertical; line-height: 1.45;
}
textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .13); }
input[type="file"] { padding: 7px 10px; }
input::placeholder { color: #98a2b3; }

/* Ein Label mit Feld darin = Beschriftung über dem Feld */
label:has(> input:not([type="checkbox"]):not([type="radio"])),
label:has(> select), label:has(> textarea) {
  display: flex; flex-direction: column; gap: 5px;
  font-weight: 600; font-size: 13px; color: #344054; min-width: 0;
}
label:has(> input:not([type="checkbox"]):not([type="radio"])) > input,
label:has(> select) > select, label:has(> textarea) > textarea {
  width: 100%; font-weight: 400;
}
label.push-check, label.brand-opt, label.perm-row, label.switch { font-weight: 500; }

/* Raster: 12 Spalten, Felder per .c2 … .c12 */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }
.form-grid > * { grid-column: span 12; min-width: 0; }
.form-grid > .c2 { grid-column: span 2; }
.form-grid > .c3 { grid-column: span 3; }
.form-grid > .c4 { grid-column: span 4; }
.form-grid > .c5 { grid-column: span 5; }
.form-grid > .c6 { grid-column: span 6; }
.form-grid > .c7 { grid-column: span 7; }
.form-grid > .c8 { grid-column: span 8; }
.form-grid > .c9 { grid-column: span 9; }
.form-grid > label:not([class]) { grid-column: span 4; }
.form-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.form-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--muted); }
.form-hint { color: var(--muted); font-size: 12px; font-weight: 400; margin: 2px 0 0; line-height: 1.4; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 16px; }
.grid-2.even { grid-template-columns: 1fr 1fr; }
details.form-more > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--brand); list-style: none; }
details.form-more > summary::-webkit-details-marker { display: none; }
details.form-more > summary::before { content: "▸ "; }
details.form-more[open] > summary::before { content: "▾ "; }
details.form-more > .form-grid { margin-top: 10px; }
@media (max-width: 900px) {
  .form-grid > .c2, .form-grid > .c3, .form-grid > .c4, .form-grid > .c5, .form-grid > .c6,
  .form-grid > .c7, .form-grid > .c8, .form-grid > .c9, .form-grid > label:not([class]) { grid-column: span 12; }
  .grid-2.even { grid-template-columns: 1fr; }
}

/* Zeilen-Formulare in Tabellen: Knopf bleibt IMMER in der Zeile */
.row-form { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.row-form input, .row-form select { padding: 7px 10px; font-size: 13px; border-radius: 8px; min-width: 0; flex-shrink: 0; }
.row-form button, .row-form .btn { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.row-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.w-70 { width: 70px !important; } .w-90 { width: 90px !important; } .w-110 { width: 110px !important; }
.w-130 { width: 130px !important; } .w-150 { width: 150px !important; } .w-170 { width: 170px !important; }
.w-200 { width: 200px !important; }
.tbl th.actions, .tbl td.actions { white-space: nowrap; text-align: right; }
.tbl .num, .tbl .money, .tbl .nowrap { white-space: nowrap; }
.tbl th.col-title, .tbl td.col-title { min-width: 240px; }
.tbl th.col-title-sm, .tbl td.col-title-sm { min-width: 200px; }
.tbl.wide { min-width: 960px; }       /* Karte scrollt horizontal statt Felder zu quetschen */
.tbl.wide-xl { min-width: 1180px; }
.tbl.compact th { padding: 8px 7px; }
.tbl.compact td { padding: 8px 7px; }
.card::-webkit-scrollbar { height: 10px; }
.card::-webkit-scrollbar-thumb { background: #cdd3e1; border-radius: 999px; }
.card::-webkit-scrollbar-track { background: #f1f3f9; border-radius: 999px; }

/* Alias-Klassen der EK-Seiten (waren nie definiert) */
.tbl.data, table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; color: var(--muted); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 10px; border-bottom: 1px solid #f0f2f7; vertical-align: middle; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px;
  background: var(--brand); color: #fff; font-weight: 650; border: 1px solid var(--brand); cursor: pointer;
  font-size: 14px; line-height: 1.2; text-decoration: none; }
.btn.btn-ghost, button.btn-ghost { background: #fff; color: var(--brand); border-color: #dcdffe; }
.btn.btn-ghost:hover, button.btn-ghost:hover { background: var(--brand-soft); filter: none; }
.btn.btn-sm, button.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.notice.ok { background: var(--ok-bg); border: 1px solid #c6ebd8; color: var(--ok); }

/* Versandliste: Formularzeile als Raster — der Knopf bleibt rechts, der Meldetext kürzt sich */
.ship-item-form { display: grid; grid-template-columns: 150px minmax(170px, 230px) minmax(0, 1fr) auto;
  gap: 10px; align-items: center; }
.ship-item-form select { max-width: none; }
.ship-item-form > .push-check { margin: 0; min-width: 0; display: flex; gap: 8px; }
.ship-item-form > .push-check .push-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ship-item-form > button { justify-self: start; white-space: nowrap; }
.ship-item-form > .full { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .ship-item-form { grid-template-columns: 150px minmax(0, 1fr) auto; }
  .ship-item-form > .push-check { grid-column: 1 / -1; }
  .ship-item-form > .push-check .push-text { white-space: normal; }
}
@media (max-width: 640px) {
  .ship-item-form { grid-template-columns: 1fr; }
  .ship-item-form > button { justify-self: stretch; }
}

/* Wunschliste: Anhänge (17.09.2026) */
.fb-box .fb-file { display: block; margin-top: 6px; font-size: 12px; color: var(--sidebar-ink); cursor: pointer;
  padding: 5px 8px; border-radius: 7px; border: 1px dashed rgba(255,255,255,.18); }
.fb-box .fb-file:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.fb-box .fb-file input { display: none; }
.fb-box .fb-hint { font-size: 11px; color: rgba(226,232,240,.5); margin-top: 3px; }

/* ===== Team: @Erwähnungen + Benachrichtigungen (21.10.2026) ===== */
.mention { background: var(--brand-soft); color: var(--brand); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention-box { position: absolute; z-index: 1000; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 4px; max-width: 320px; }
.mention-opt { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.mention-opt.sel, .mention-opt:hover { background: var(--brand-soft); color: var(--brand); }
.note-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.note-list li { border-left: 2px solid var(--line); padding-left: 8px; }
.note-text { white-space: pre-wrap; }
.bell { position: relative; padding: 8px; border-radius: 8px; font-size: 16px; line-height: 1; color: var(--sidebar-ink); }
.bell:hover, .bell.active { background: rgba(255,255,255,.07); }
.bell-top { margin-left: auto; color: #fff; }
.bell-n { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.bell-n[hidden] { display: none; }
.notif-list { list-style: none; padding: 0; margin: 0; }
.notif-list li { border-bottom: 1px solid var(--line); }
.notif-list li:last-child { border-bottom: none; }
.notif-list a { display: block; padding: 12px 6px; color: var(--ink); border-radius: 8px; }
.notif-list a:hover { background: #f8f9fc; }
.notif-list li.unread a { background: var(--brand-soft); }
.notif-list li.unread strong { color: var(--brand); }
.notif-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.notif-snip { color: var(--muted); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.push-box { border-radius: 10px; padding: 10px 12px; background: #f8f9fc; border: 1px solid var(--line); }
.push-box.st-on { background: var(--ok-bg); border-color: transparent; }
.push-box.st-ios, .push-box.st-denied, .push-box.st-error { background: var(--warn-bg); border-color: transparent; }
.push-status { margin: 0 0 8px; }
.push-btns:empty { display: none; }
.small-btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.twofa-steps { padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.twofa-qr img { display: block; margin: 8px 0; background: #fff; width: 240px; max-width: 100%; height: auto; image-rendering: pixelated; }
.twofa-open { display: inline-block; margin-top: 2px; }

/* ===== Team-Seite (Etappe 2, 21.10.2026) ===== */
.team { display: grid; grid-template-columns: 260px 1fr; gap: 16px; height: calc(100vh - 80px); min-height: 420px; }
.team .card { margin-bottom: 0; }
.team-side { overflow-y: auto; padding: 14px; }
.team-side-head h2 { margin: 0 0 6px; font-size: 16px; }
.team-sec { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin: 12px 0 4px; }
.team-list { list-style: none; padding: 0; margin: 0; }
.team-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--ink); }
.team-list a:hover { background: #f4f6fb; }
.team-list a.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.team-list a span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-n, .nav-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.team-n[hidden], .nav-n[hidden] { display: none; }
.nav-n { margin-left: auto; }
.team-new { margin-top: 10px; }
.team-new form { margin: 2px 0; }
.team-new button.link, .msg-del button.link { background: none; border: none; padding: 2px 0; cursor: pointer; color: var(--brand); font: inherit; }
.team-main { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.team-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.team-head h2 { margin: 0; font-size: 16px; }
.team-topic { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.team-back { display: none; font-size: 26px; line-height: 1; padding-right: 4px; }
.team-settings { margin-left: auto; position: relative; }
.team-settings[open] > form { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: var(--shadow); margin-top: 6px; }
.team-settings[open] { position: absolute; right: 16px; z-index: 20; background: #fff; border-radius: 12px; }
.msgs { list-style: none; margin: 0; padding: 12px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; align-self: flex-start; background: #f4f6fb; border-radius: 12px; padding: 7px 11px; }
.msg.mine { align-self: flex-end; background: var(--brand-soft); }
.msg.hl { outline: 2px solid var(--brand); }
.msg-head { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.msg-del { margin-left: auto; opacity: .45; }
.msg:hover .msg-del { opacity: 1; }
.msg-text { white-space: pre-wrap; word-break: break-word; }
.msg-text a { word-break: break-all; }
.composer { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--line); align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; }
.composer button { height: 40px; min-width: 48px; font-size: 16px; }
.composer-hint { padding: 0 14px 10px; }
.bell-top-team { margin-left: auto; color: #fff; }
.bell-top-team + .bell-top { margin-left: 0; }
@media (max-width: 820px) {
  .team { grid-template-columns: 1fr; height: calc(100vh - 140px); }
  .team.has-ch .team-side { display: none; }
  .team:not(.has-ch) .team-main { display: none; }
  .team-back { display: inline-block; }
  .msg { max-width: 90%; }
  .composer-hint { display: none; }
}
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.msg-files img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; object-fit: cover; }
.composer-file { position: relative; font-size: 20px; cursor: pointer; padding: 6px 4px; align-self: center; }
.composer-fn { position: absolute; top: -2px; right: -6px; background: var(--brand); color: #fff; border-radius: 9px; font-size: 10.5px; min-width: 16px; text-align: center; padding: 0 4px; }
@media (max-width: 820px) { .msg-files img { max-width: 160px; max-height: 160px; } }
.arr-card { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.arr-card.st-open { border-left: 4px solid var(--brand); }
.arr-card.st-to_order, .arr-card.st-to_stock { border-left: 4px solid var(--ok); }
.arr-card.st-dismissed { opacity: .7; }
.arr-title { font-weight: 600; }
.arr-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.arr-btns form { margin: 0; }
.arr-warn { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.arr-done { font-size: 13.5px; }
.arr-done button.link { background: none; border: none; color: var(--brand); cursor: pointer; padding: 0 4px; }

/* Seiten-Tabs (Neuordnung 21.10.2026): verwandte Seiten eines Menüpunkts — bewusst anders
   als .seg (Filter innerhalb einer Seite), damit niemand Navigation und Filter verwechselt. */
.page-tabs { display: flex; gap: 4px; margin: -4px 0 18px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs a { padding: 8px 14px; color: var(--muted); font-weight: 600; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.page-tabs a:hover { color: var(--ink); }
.page-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }

/* „Heute“ (21.10.2026) */
.notice-link { text-decoration: none; display: block; }
.notice-link .notice { cursor: pointer; }
.kpi-calm .kpi-value { color: var(--ok); }
.kpi-extra { font-size: 12px; color: var(--muted); margin-top: 2px; }
.quick-check { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 18px;
  padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--card); }
.quick-check input { flex: 1; min-width: 180px; }
.revenue-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
  gap: 12px; flex-wrap: wrap; }
.revenue-fold > summary::-webkit-details-marker { display: none; }
.revenue-fold > summary h2 { margin: 0; }
.revenue-fold > summary h2::before { content: "▸ "; color: var(--muted); }
.revenue-fold[open] > summary h2::before { content: "▾ "; }
.revenue-fold[open] > summary { margin-bottom: 14px; }
.revenue-fold .card { box-shadow: none; border: 1px solid var(--line); }

/* Globale Suche (21.10.2026) */
.nav-search { padding: 0 4px 14px; }
.nav-search input { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #e2e8f0; border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.nav-search input::placeholder { color: #7c8aa5; }
.nav-search input:focus { outline: none; border-color: var(--brand); background: rgba(255,255,255,.1); }
.bell-top-search { margin-left: auto; color: #fff; text-decoration: none; }
.bell-top-search + .bell-top-team { margin-left: 0; }

/* Bestellansicht (Neuordnung 21.10.2026): Positionen/Sendungen links, Kunde/Kommunikation rechts */
.od-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 16px; }
.od-actions a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none; background: var(--card); color: var(--brand);
  border: 1px solid #dcdffe; }
.od-actions a:first-child { background: var(--brand); color: #fff; border-color: var(--brand); }
.od-actions a:hover { filter: brightness(.97); }
.od-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.od-main, .od-side { min-width: 0; }
@media (max-width: 1400px) { .od-cols { grid-template-columns: 1fr; } }
.od-task-list { display: flex; flex-direction: column; gap: 6px; }
.od-task { display: flex; gap: 8px; align-items: center; color: inherit; text-decoration: none;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px; }
.od-task:hover { border-color: var(--brand); }
.od-fold { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 20px; margin-bottom: 18px; }
.od-fold > summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.od-fold[open] > summary { margin-bottom: 12px; }
.od-fold .card { box-shadow: none; border: 0; padding: 0; margin: 0; }
.od-comm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.od-comm a { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 9px; color: inherit; text-decoration: none; }
.od-comm a:hover { border-color: var(--brand); }
.od-comm-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.od-comm-subj { font-size: 13.5px; overflow-wrap: anywhere; }
.od-main .tbl td:first-child { min-width: 220px; }

/* Handy: Raster-Spalten dürfen schmaler als ihr längstes Wort werden (Mein Konto auf DE lief
   auf 375 px um 64 px über — 21.10.2026) */
.grid-2 > * { min-width: 0; }
@media (max-width: 820px) {
  .card-head { flex-wrap: wrap; gap: 6px; }
  .card-head h2 { overflow-wrap: anywhere; }
  .inline-form input, .inline-form select { min-width: 0; max-width: 100%; }
}

/* ===== Team-Chat wie Messenger (21.10.2026): Tagestrenner, Name nur beim Senderwechsel,
   Uhrzeit im Balken, eigene Nachrichten farbig rechts, Handy bildschirmfüllend ===== */
.msgs .day-sep { align-self: center; list-style: none; margin: 6px 0 2px; }
.msgs .day-sep span { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: #e9ecf3; border-radius: 10px; padding: 2px 10px; }
.msg { padding: 6px 10px 4px; }
.msg.cont { margin-top: -6px; }
.msg-name { font-size: 12.5px; font-weight: 700; color: var(--brand-2); margin-bottom: 1px; }
.msg.bot { max-width: 92%; background: #fff; border: 1px solid var(--line); }
.msg.bot .msg-name { color: var(--muted); }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 1px;
  font-size: 11px; color: var(--muted); }
.msg-meta .msg-del { margin: 0; opacity: .5; }
.msg-meta .msg-del button.link { font-size: 11px; padding: 0; }
.msg.mine { background: var(--brand); color: #fff; }
.msg.mine .msg-meta, .msg.mine .msg-meta button.link { color: rgba(255,255,255,.78); }
.msg.mine .mention { background: rgba(255,255,255,.22); color: #fff; }
.msg.mine .msg-text a { color: #fff; text-decoration: underline; }
@media (max-width: 820px) {
  body.chat-open { overflow: hidden; }
  .team.has-ch .team-main { position: fixed; top: var(--tbh, 60px); left: 0; right: 0; bottom: 0;
    border-radius: 0; border: 0; box-shadow: none; z-index: 50; }
  .team.has-ch .team-head { padding: 8px 12px; gap: 6px; }
  .team.has-ch .team-head h2 { font-size: 15.5px; }
  .team.has-ch .team-topic { max-width: 72vw; font-size: 12px; }
  .team.has-ch .msgs { padding: 10px 10px 6px; gap: 8px; background: #eef1f6; }
  .team.has-ch .msg { max-width: 84%; }
  .team.has-ch .msg:not(.mine):not(.bot) { background: #fff; }
  .team.has-ch .composer { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 6px; background: #fff; }
  .team.has-ch .composer textarea { border-radius: 20px; padding: 9px 14px; min-height: 40px; font-size: 16px; }
  .team.has-ch .composer button { border-radius: 50%; width: 42px; height: 42px; min-width: 42px; padding: 0; }
}

/* Inbox: Sammel-Erledigen (21.10.2026) */
.bulk-bar { position: sticky; top: 8px; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--brand); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px;
  box-shadow: var(--shadow); }
.bulk-bar .small-btn { margin: 0; }
.task-tabs { margin-bottom: 10px; align-items: center; }
.ctx-card { border-left: 4px solid var(--brand); }
.ctx-items { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ctx-items li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px;
  border-top: 1px solid var(--line); padding-top: 6px; }

/* ===== Design-Pass 21.10.2026 ===== */
/* Ruhigere Karten: feinere Schatten, die Linie trägt die Trennung */
:root { --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px -4px rgba(16, 24, 40, .06); }
.card { box-shadow: var(--shadow); }
a.kpi-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(16,24,40,.18); }
/* Zeilen-Aktionen in Tabellen sind Nebenaktionen → ruhiger Stil, Hauptaktion bleibt farbig */
.tbl button.small-btn:not(.danger) { background: var(--card); color: var(--brand); border: 1px solid #d9dcfb; }
.tbl button.small-btn:not(.danger):hover { background: var(--brand-soft); filter: none; }
/* Zahlen in Tabellen bündig */
.tbl td.num, .tbl th.num, .kpi-value { font-variant-numeric: tabular-nums; }
/* Seitenkopf: Titel und Aktionen sauber umbrechen */
.page-head { gap: 12px; flex-wrap: wrap; }
.page-head h1 { text-wrap: balance; }
/* Sichtbarer Tastatur-Fokus */
a:focus-visible, button:focus-visible, summary:focus-visible, .bn-menu:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* Untere Navigation am Handy */
.bottom-nav { display: none; }
@media (max-width: 820px) {
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #0c1222; border-top: 1px solid rgba(255,255,255,.08);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav a, .bottom-nav .bn-menu { flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px 2px; color: #94a3b8; font-size: 11px; font-weight: 600; text-decoration: none;
    border-radius: 10px; cursor: pointer; min-width: 0; }
  .bottom-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bottom-nav svg { width: 22px; height: 22px; fill: currentColor; }
  .bottom-nav a.active { color: #fff; background: rgba(255,255,255,.08); }
  .content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.chat-open .bottom-nav { display: none; }
  .nav-toggle-cb:checked ~ .bottom-nav { display: none; }
}
.bulk-bar[hidden] { display: none; }
@media (max-width: 820px) {
  /* Filter-Segmente in einer wischbaren Zeile statt halber Bildschirmhöhe */
  .seg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .seg-tabs::-webkit-scrollbar { display: none; }
  .seg-tabs .seg { white-space: nowrap; flex-shrink: 0; }
  .bell-top-search { display: none; }
  .bell-top-team { margin-left: auto; }
}

/* ===== Team: Anhänge + Reaktionen (21.10.2026) ===== */
.team-main { position: relative; }
.composer-file { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 40px;
  padding: 0; color: var(--muted); border-radius: 50%; }
.composer-file:hover { color: var(--brand); background: var(--brand-soft, #eef0ff); }
.composer-file svg { width: 22px; height: 22px; fill: currentColor; }
.composer-cam { display: none; }
@media (pointer: coarse) { .composer-cam { display: inline-flex; } }
.composer-prev { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 0; border-top: 1px solid var(--line); }
.composer-prev[hidden] { display: none; }
.composer-prev + .composer { border-top: 0; }
.cp-item { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: #f1f3f8; border: 1px solid var(--line); }
.cp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
  font-size: 22px; padding: 2px; text-align: center; }
.cp-doc small { font-size: 9.5px; line-height: 1.15; max-width: 60px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--muted); }
.cp-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(15,23,42,.72); color: #fff; font-size: 11px; line-height: 20px; cursor: pointer; }
.drop-hint { position: absolute; inset: 8px; z-index: 6; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--brand); border-radius: 14px; background: rgba(238,240,255,.92); color: var(--brand);
  font-weight: 700; font-size: 16px; pointer-events: none; }
.drop-hint[hidden] { display: none; }
.msg-files video { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; background: #000; }
.msg-doc { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; text-decoration: none;
  background: rgba(15,23,42,.05); color: inherit; max-width: 260px; }
.msg.mine .msg-doc { background: rgba(255,255,255,.16); color: #fff; }
.msg-doc-ic { font-size: 24px; line-height: 1; }
.msg-doc-n { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.msg-doc-n small { font-weight: 400; opacity: .7; font-size: 11px; }
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.msg-reacts:empty { display: none; }
.msg-reacts .react { border: 1px solid var(--line); background: #fff; color: var(--text, #0f172a); border-radius: 12px;
  padding: 1px 7px; font-size: 13px; line-height: 20px; cursor: pointer; }
.msg-reacts .react b { font-size: 11.5px; font-weight: 700; }
.msg-reacts .react.on { border-color: var(--brand); background: #eef0ff; }
.react-add { font-size: 14px; opacity: 0; padding: 0 2px; transition: opacity .12s; }
.msg:hover .react-add, .react-add:focus-visible { opacity: .65; }
@media (pointer: coarse) { .react-add { display: none; } .msgs .msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.react-pick { position: absolute; z-index: 8; display: flex; gap: 2px; padding: 4px 6px; background: #fff;
  border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 8px 24px -8px rgba(15,23,42,.35); }
.react-pick[hidden] { display: none; }
.react-pick button { border: 0; background: none; font-size: 22px; width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; padding: 0; }
.react-pick button:hover { background: #f1f3f8; }
.rp-copy { border-left: 1px solid var(--line) !important; border-radius: 0 50% 50% 0 !important; font-size: 18px !important; }
.rp-copy[hidden] { display: none; }
@media (pointer: fine) { .rp-copy { display: none; } }
@media (max-width: 820px) {
  .team.has-ch .composer .composer-file { width: 36px; height: 42px; }
  .msg-files video { max-width: 200px; }
}

/* ===== Team: Antworten, Bearbeiten, Anheften, Sprachnachricht, Galerie (22.10.2026) ===== */
.msg-quote { display: block; border-left: 3px solid var(--brand); background: rgba(15,23,42,.05); border-radius: 6px;
  padding: 3px 8px; margin: 2px 0 4px; text-decoration: none; color: inherit; font-size: 12.5px; max-width: 100%; }
.msg-quote b { display: block; font-size: 12px; color: var(--brand-2, var(--brand)); }
.msg-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .85; }
.msg.mine .msg-quote { background: rgba(255,255,255,.16); border-left-color: rgba(255,255,255,.8); }
.msg.mine .msg-quote b { color: #fff; }
.msg-edited { font-style: italic; opacity: .8; }
.msg.hl { animation: msg-hl 1.6s ease-out; }
@keyframes msg-hl { 0% { box-shadow: 0 0 0 3px #fbbf24; } 100% { box-shadow: 0 0 0 3px transparent; } }
.order-link { font-weight: 600; white-space: nowrap; }
.msg.mine .order-link { color: #fff; text-decoration: underline; }
.seen-line { list-style: none; align-self: flex-end; font-size: 11.5px; color: var(--muted); margin: -4px 4px 0; }
.msg-voice { width: 240px; max-width: 100%; height: 40px; display: block; }
/* Angeheftet */
.pin-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line);
  background: #fffbeb; font-size: 13px; }
.pin-txt { flex: 1; min-width: 0; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-txt b { margin-right: 4px; }
.pin-x { font-size: 13px; padding: 2px 6px; }
/* Benachrichtigungs-Menü je Kanal */
.team-notify { position: relative; margin-left: auto; }
.team-notify > summary { list-style: none; cursor: pointer; font-size: 17px; padding: 4px 8px; border-radius: 8px; }
.team-notify > summary::-webkit-details-marker { display: none; }
.team-notify[open] > summary { background: #f1f3f8; }
.tn-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 28px -10px rgba(15,23,42,.3); padding: 8px; min-width: 250px; }
.tn-menu form { margin: 0; }
.tn-opt { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px;
  font-size: 14px; cursor: pointer; color: inherit; }
.tn-opt:hover { background: #f1f3f8; }
.tn-opt.on { background: #eef0ff; font-weight: 700; }
.team-notify + .team-settings { margin-left: 0; }
/* Auswahl: Reaktionen + Aktionen */
.react-pick { flex-wrap: wrap; max-width: 300px; border-radius: 16px; }
.rp-acts { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.react-pick .rp-act { width: 100%; height: auto; border-radius: 8px; font-size: 14px; text-align: left; padding: 7px 10px; }
.react-pick .rp-act[hidden] { display: none; }
.rp-act.is-pinned { color: #b45309; }
@media (pointer: fine) { .react-pick .rp-copy { display: block; } }
/* Leiste über dem Eingabefeld: Antwort / Bearbeiten / Status */
.composer-ctx { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line);
  background: #f8fafc; }
.composer-ctx[hidden] { display: none; }
.cc-body { flex: 1; min-width: 0; border-left: 3px solid var(--brand); padding-left: 8px; font-size: 13px; }
.composer-ctx.is-edit .cc-body { border-left-color: #f59e0b; }
.cc-who { display: block; font-size: 12px; color: var(--brand); }
.composer-ctx.is-edit .cc-who { color: #b45309; }
.cc-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.composer-ctx + .composer, .send-status + .composer-ctx { border-top: 0; }
.send-status { padding: 6px 12px; font-size: 12.5px; background: #fff7ed; color: #9a3412; border-top: 1px solid #fed7aa; }
.send-status[hidden] { display: none; }
/* Mikrofon statt Senden, solange nichts geschrieben ist (wie WhatsApp) */
.composer { position: relative; }
.composer-mic { display: none; }
.composer.can-mic .composer-mic { display: inline-flex; align-items: center; justify-content: center; }
.composer.can-mic button[type=submit] { display: none; }
.composer-mic { height: 40px; min-width: 44px; border-radius: 20px; border: 0; background: var(--brand); color: #fff; cursor: pointer; }
.composer-mic svg { width: 22px; height: 22px; fill: currentColor; }
.rec-bar { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: #fff; }
.rec-bar[hidden] { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.rec-hint { flex: 1; }
.rec-cancel { font-size: 20px; }
/* Galerie */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5,8,15,.94); }
.lightbox[hidden] { display: none; }
.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  touch-action: none; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; transition: transform .05s;
  user-select: none; -webkit-user-drag: none; }
.lb-btn { position: absolute; z-index: 2; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 44px; height: 44px;
  border-radius: 50%; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  text-decoration: none; }
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-x { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.lb-open { top: calc(12px + env(safe-area-inset-top)); right: 64px; font-size: 18px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }
.lb-count { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
  color: #cbd5e1; font-size: 13px; }
body.lb-open { overflow: hidden; }
@media (max-width: 820px) {
  .lb-prev, .lb-next { display: none; }
  .team.has-ch .composer .composer-mic { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; }
  .tn-menu { position: fixed; right: 8px; left: 8px; top: auto; min-width: 0; }
  .pin-bar { padding: 6px 10px; }
}
/* Teilen aus der Bestellung */
.od-share { display: inline-block; position: relative; }
.od-share > summary { list-style: none; cursor: pointer; }
.od-share > summary::-webkit-details-marker { display: none; }
.od-share-form { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(340px, 86vw); background: var(--card, #fff);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 10px 28px -10px rgba(15,23,42,.3); }
.order-link { display: inline-block; padding: 0 6px; border-radius: 6px; background: #eef0ff; text-decoration: none; }
.order-link::before { content: "📦 "; font-size: .9em; }
.msg.mine .order-link { background: rgba(255,255,255,.2); text-decoration: none; }
.pin-bar .pin-x { background: none; border: 0; color: var(--muted); width: auto; height: auto; min-width: 0;
  border-radius: 6px; box-shadow: none; }
.pin-bar .pin-x:hover { background: rgba(0,0,0,.06); }
.react-pick .rp-act, .tn-opt { color: #0f172a; background: none; border: 0; box-shadow: none; }
.react-pick .rp-act:hover { background: #f1f3f8; }
.react-pick .rp-copy { border-left: 0 !important; border-radius: 8px !important; font-size: 14px !important; }
.tn-opt.on { background: #eef0ff; color: #0f172a; }
.composer-ctx .cc-x { background: none; border: 0; color: var(--muted); width: auto; height: auto; min-width: 0;
  padding: 4px 8px; border-radius: 6px; box-shadow: none; font-size: 15px; }
.composer-ctx .cc-x:hover { background: rgba(0,0,0,.06); }
.lightbox { background: rgba(5,8,15,.97); }
/* QA 22.10.: Kamera nur am Handy (allgemeine label:has()-Regel ist stärker als .composer-cam) */
#composer .composer-cam { display: none; }
@media (pointer: coarse) { #composer .composer-cam { display: inline-flex; } }
/* gelöschte Nachricht neutral, auch die eigene */
.msg.deleted, .msg.mine.deleted { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.msg.mine.deleted .msg-meta { color: var(--muted); }
/* Glocke: Klartext am Desktop, nur Symbol am Handy */
.team-notify > summary { display: inline-flex; align-items: center; gap: 5px; }
.tn-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
@media (max-width: 820px) { .tn-lbl { display: none; } }

/* ===== Пратки / Sendungen (22.10.2026) ===== */
.sh-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; margin-bottom: 12px; }
.sh-filter input { flex: 1 1 220px; min-width: 0; }
.sh-filter select { flex: 0 0 auto; }
.sh-num { color: var(--muted); overflow-wrap: anywhere; }
.sh-tbl tr.sh-stuck td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.sh-tbl tr.sh-problem td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.sh-ev { max-width: 420px; }
.sh-ev details > summary { cursor: pointer; list-style: none; }
.sh-ev details > summary::-webkit-details-marker { display: none; }
.sh-ev details > summary::after { content: " ▾"; color: var(--muted); font-size: 11px; }
.sh-ev details[open] > summary::after { content: " ▴"; }
.sh-timeline { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); }
.sh-timeline li { position: relative; padding: 2px 0 6px 8px; font-size: 13px; }
.sh-timeline li::before { content: ""; position: absolute; left: -17px; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--line); }
.sh-timeline li:first-child::before { background: var(--brand); }
.badge.info { background: #eef0ff; color: var(--brand); }
.sh-scroll { overflow-x: auto; }
@media (max-width: 820px) { .sh-scroll { overflow-x: visible; } }

/* ===== Справка по снимка (22.10.2026) ===== */
.sp-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.sp-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sp-busy { display: none; color: var(--brand); font-weight: 600; }
.sp-form.busy .sp-busy { display: inline; }
.sp-form.busy .sp-hint { display: none; }
.sp-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 10px; background: #eef0ff;
  text-decoration: none; font-size: 12.5px; overflow-wrap: anywhere; }
.sp-why { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 6px; border-radius: 8px; background: #f1f5f9; font-size: 12px; }
.sp-ocr { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: #f8fafc; padding: 8px; border-radius: 8px; }
#sp-form .sp-btn { background: var(--brand); color: #fff; border: 0; border-radius: 12px; padding: 12px 18px;
  font-size: 15px; font-weight: 700; min-height: 46px; box-shadow: 0 4px 12px -6px rgba(67,56,202,.6); }
#sp-form .sp-btn:hover { filter: brightness(1.05); }
@media (max-width: 820px) { #sp-form .sp-btn { width: 100%; justify-content: center; } #sp-form .sp-hint { width: 100%; text-align: center; } }

/* Известия: schmaler Hinweis statt der ganzen Push-Karte (22.10.2026) */
.push-nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px;
  border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px; font-size: 13.5px; }
.push-nudge[hidden] { display: none; }
.push-nudge .pn-txt { flex: 1; min-width: 180px; }
.push-nudge .pn-x { background: none; border: 0; color: var(--muted); padding: 2px 6px; box-shadow: none; width: auto; min-width: 0; }

/* ===== Поръчки & Съобщения: Prüfung 22.10.2026 ===== */
/* Inbox-Tabelle passt in die Breite: Betreff schrumpft, Absender/Bestellnummer gekürzt */
@media (min-width: 821px) {
  .ib-tbl { width: 100%; }
  .ib-tbl td.ib-subj { width: 100%; max-width: 0; }
  .ib-tbl td.ib-sender { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ib-tbl .ib-ord { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
}
.ib-note { margin-bottom: 14px; }
.ib-note div { margin: 4px 0; white-space: pre-wrap; }
/* Bestellansicht: zwei Spalten schon ab 1100 px (Laptop 1366 px lief bisher einspaltig →
   Kunde/Notizen erst auf dem 2. Bildschirm) */
@media (min-width: 1101px) and (max-width: 1400px) {
  .od-cols { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
}
.ol-item { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) { .ol-item { max-width: none; white-space: normal; } }
@media (min-width: 1101px) { .od-actions .od-act-cust { display: none; } }

/* Anhänge in Kunden-Mails (22.10.2026) */
.mail-files { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mail-files-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-files-row img { max-width: 180px; max-height: 140px; border: 1px solid var(--line); border-radius: 8px; display: block; object-fit: cover; }

/* ===== Днес (Prüfung 22.10.2026) ===== */
.today-calm { margin: -4px 0 16px; font-size: 13px; color: var(--muted); }
.today-calm a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line); }
.today-calm a:hover { color: var(--brand); }
@media (max-width: 820px) {
  .today-tiles { gap: 8px; }
  .today-tiles .kpi { padding: 10px 12px; min-height: 0; }
  .today-tiles .kpi-label { font-size: 11px; }
  .today-tiles .kpi-value { font-size: 22px; margin-top: 2px; }
}

/* ===== Наличности (Prüfung 22.10.2026) ===== */
.inv-src { margin-bottom: 10px; }
.inv-own { white-space: nowrap; }
.inv-own .qty.ok { color: #15803d; font-weight: 700; }
.inv-sup { white-space: nowrap; }
/* Spalte „Menge für den Marktplatz“ bricht um statt die Tabelle zu verbreitern */
.inv-tbl td.actions .row-form { flex-wrap: wrap; gap: 4px; max-width: 250px; }
@media (max-width: 820px) {
  /* Handy = Nachschlagen: Name, SKU, unser Lager / Lieferant — Steuerung nur in der Produktseite */
  .inv-tbl td.actions, .inv-tbl .inv-chips, .inv-tbl td.inv-res0, .inv-tbl .wh-breakdown { display: none !important; }
}

.nav-search input[type="search"], .nav-search input { min-width: 0; }


/* ===== Връщания (Prüfung 22.10.2026) — nur Tokens ===== */
.ret-tbl .ret-item { max-width: 240px; }
.ret-tbl .ret-track { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1500px) and (min-width: 821px) { .ret-tbl .ret-by { display: none; } }
.ret-hist > summary { list-style: none; cursor: pointer; }
.ret-hist > summary::-webkit-details-marker { display: none; }
.ret-hist > summary h2::after { content: " ▾"; color: var(--muted); font-size: 12px; }
.ret-hist[open] > summary h2::after { content: " ▴"; }

/* ===== Наличност и срок (Prüfung 22.10.2026) — nur Tokens ===== */
/* Laptop: feste Spaltenbreiten, damit „Antwort an den Kunden“ nie abgeschnitten wird */
@media (min-width: 821px) {
  .lb-table { table-layout: fixed; width: 100%; }
  .lb-table th:nth-child(1) { width: 27%; }
  .lb-table th:nth-child(2) { width: 9%; }
  .lb-table th:nth-child(3) { width: 12%; }
  .lb-table th:nth-child(4) { width: 9%; }
  .lb-table th:nth-child(5) { width: 9%; }
  .lb-table th:nth-child(6) { width: 13%; }
  .lb-table th:nth-child(7) { width: 21%; }
  .lb-table td { overflow-wrap: anywhere; }
}
.lb-satz { width: 100%; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px; background: var(--card); color: var(--ink); resize: vertical; }
.lb-alts { margin-top: 5px; }
.lb-alts > summary { cursor: pointer; list-style: none; }
.lb-alts > summary::-webkit-details-marker { display: none; }

/* Seitenleiste + Preis-Wächter (Review 22.10.) */
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 16px; }
td.pg-neg { color: var(--err); font-weight: 600; }
.pg-why { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
@media (max-width: 820px) { .pg-why { max-width: none; white-space: normal; } }
@media (max-width: 820px) { table.m-cards td.pg-detail { display: none; } }

/* Profil + Team (Review 22.10.) */
.acc-profile label { display: block; font-weight: 600; margin-top: 10px; }
.acc-profile label input, .acc-profile label select { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
.acc-profile .acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acc-profile button[type=submit] { margin-top: 12px; }
@media (max-width: 520px) { .acc-profile .acc-row { grid-template-columns: 1fr; } }
details.acc-rights > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
details.acc-rights > summary h2 { margin: 0; }
details.acc-rights > summary::-webkit-details-marker, .team-settings > summary::-webkit-details-marker { display: none; }
.team-settings > summary { list-style: none; display: inline-flex; align-items: center; }

/* ===== Питай Kompass (22.10.2026) — nur Tokens ===== */
.ask-card { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
.ask-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 330px); min-height: 220px; overflow-y: auto; }
.ask-q { align-self: flex-end; max-width: 80%; background: var(--brand); color: var(--on-brand);
  border-radius: 12px 12px 2px 12px; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-a { align-self: flex-start; max-width: 92%; background: var(--sunken); border: 1px solid var(--line);
  border-radius: 12px 12px 12px 2px; padding: 10px 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ask-a .link { font-size: inherit; }
.ask-meta { margin-top: 6px; font-size: 11px; color: var(--muted); }
.ask-wait { color: var(--muted); font-style: italic; }
.ask-wait::before { content: "⏳ "; }
.ask-err { color: var(--err); background: var(--err-bg); border-color: var(--err-line); }
.ask-empty { color: var(--muted); }
.ask-empty ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ask-ex { background: var(--card); color: var(--brand); border: 1px solid var(--brand-line); font-weight: 500;
  padding: 7px 12px; border-radius: 999px; font-size: 13px; text-align: left; }
.ask-ex:hover { background: var(--brand-soft); filter: none; }
.ask-form { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.ask-form textarea { flex: 1; min-height: 46px; max-height: 180px; resize: vertical; }
.ask-form button { height: 46px; padding: 0 18px; }
.ask-hint { margin: 0; }
@media (max-width: 820px) {
  .ask-log { max-height: calc(100vh - 300px); }
  .ask-q, .ask-a { max-width: 96%; }
  .ask-form textarea { font-size: 16px; }
}
.ask-off { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

/* Bestellung an Lieferanten (22.10.) */
.so-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.so-text { white-space: pre-wrap; background: var(--sunken); border: 1px solid var(--line); border-radius: 8px;
           padding: 10px 12px; font-size: 13px; min-height: 120px; margin: 6px 0 10px; }
.so-warn { color: var(--warn); }
.so-problem { color: var(--err); }
@media (max-width: 820px) { .so-grid { grid-template-columns: 1fr; } }
.ask-esc { display: inline-block; margin-top: 8px; }

/* ===== Bestell-Liste lesbar (23.10.2026) — nur Tokens ===== */
.ol-prod { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 340px; }
.ol-thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--sunken); display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; }
.ol-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 2px; }
.ol-text { min-width: 0; flex: 1; }
.ol-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-qty { color: var(--brand); font-weight: 700; }
.ol-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-sub .mono { font-size: 12px; }
.ol-ch { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--sunken); font-weight: 600; font-size: 12.5px; color: var(--ink); }
.ol-mk { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.ol-when { font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .ol-prod { min-width: 0; max-width: none; width: 100%; }
  .tbl.cards td.ol-prod { display: flex; padding-right: 0; }
  .ol-title { white-space: normal; }
}
.ol-fba { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; background: var(--ink); color: var(--card); vertical-align: middle; }

/* Lager-Chat: Rückgabe mit Zustand (23.10.) */
.arr-ret { margin: 6px 0 0; }
.arr-ret-o { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.arr-ret-o input[type=radio] { margin-top: 3px; }
.arr-ret-no { padding: 3px 8px; font-size: 13px; width: 150px; margin-left: 4px; }

/* Inbox: Verlauf mit demselben Kunden (23.10.) */
details.ib-hist > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
details.ib-hist > summary::-webkit-details-marker { display: none; }
details.ib-hist > summary h2 { margin: 0; }
.ib-hist-item { border-top: 1px solid var(--line); padding: 10px 0; }
.ib-hist-q, .ib-hist-a { white-space: pre-wrap; font-size: 13px; }
.ib-hist-a { margin-top: 6px; padding: 8px 10px; background: var(--sunken); border-radius: 8px; }

/* Willkommen + Hilfe (24.10.) */
.wl-step { margin-bottom: 16px; }
.wl-links { margin: 0; padding-left: 18px; }
.wl-links li { margin: 6px 0; }
.wl-done { margin: 8px 0 24px; }
.wl-done button { font-size: 16px; padding: 12px 22px; }
.help-link { display: block; padding: 6px 14px; font-size: 13px; color: var(--sb-ink, inherit); opacity: .85; text-decoration: none; }
.help-link:hover { opacity: 1; }
.help-new { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--brand, #6d28d9); color: #fff; font-size: 11px; font-weight: 650; line-height: 17px; }

/* ---------- Chats wie Messenger: Sortierung, Vorschau, ⋯-Menü (25.10.2026) ---------- */
.team-sortbar { display: flex; gap: 4px; margin: 2px 0 6px; }
.team-sortbar a { padding: 3px 9px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line); text-decoration: none; }
.team-sortbar a.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); font-weight: 650; }
.team-list .tl-it { position: relative; }
.team-list .tl-it > a { justify-content: flex-start; align-items: flex-start; padding: 7px 30px 7px 9px; }
.tl-ic { flex: 0 0 auto; width: 18px; text-align: center; line-height: 1.35; }
.tl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tl-top, .tl-bot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.team-list a .tl-body span:first-child, .tl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-name { flex: 1 1 auto; min-width: 0; }
.tl-when { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-weight: 400; }
.tl-prev { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.has-unread .tl-name, .has-unread .tl-prev { font-weight: 700; color: var(--ink); }
.has-unread .tl-when { color: var(--brand); font-weight: 650; }
.is-muted .tl-name { color: var(--muted); }
.tl-more { position: absolute; right: 4px; top: 6px; }
.tl-more > summary { list-style: none; cursor: pointer; padding: 0 6px; border-radius: 6px; color: var(--muted); opacity: 0; font-weight: 700; }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-it:hover .tl-more > summary, .tl-more[open] > summary { opacity: 1; }
.tl-more > summary:hover { background: var(--hover); }
.tl-menu { position: absolute; right: 0; top: 22px; z-index: 30; min-width: 190px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 4px; }
.tl-menu form { margin: 0; }
.tl-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px;
  border-radius: 7px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.tl-menu button:hover { background: var(--hover); }
.team-hidden { margin-top: 8px; }
.team-hidden > summary { cursor: pointer; list-style: none; }
@media (hover: none) { .tl-more > summary { opacity: .7; } }

/* ---------- Mini-Chat unten rechts, nur Computer (25.10.2026) ---------- */
.dock { position: fixed; right: 16px; bottom: 0; z-index: 900; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.dock > * { pointer-events: auto; }
.dock-side { display: flex; flex-direction: column; align-items: stretch; width: 280px; }
.dock-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  padding: 9px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-pop); }
.dock-bar:hover { background: var(--hover); }
.dock-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--err); color: var(--on-brand);
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.dock-n[hidden] { display: none; }
.dock-list { background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-pop); max-height: 60vh; display: flex; flex-direction: column; overflow: hidden; }
.dock-list[hidden] { display: none; }
.dock-list + .dock-bar { border-radius: 0; }
.dock-list-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
.dock-list-body { overflow-y: auto; padding: 4px; }
.dock-it { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0;
  padding: 7px 8px; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; }
.dock-it:hover { background: var(--hover); }
.dock-wins { display: flex; align-items: flex-end; gap: 10px; }
.dock-w { width: 330px; height: 440px; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--shadow-pop); overflow: hidden; }
.dock-w.is-min { height: auto; }
.dock-w.is-min .dock-msgs, .dock-w.is-min .dock-comp, .dock-w.is-min .dock-err { display: none; }
.dock-w-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 12px; background: var(--brand); color: var(--on-brand);
  cursor: pointer; user-select: none; }
.dock-w-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-w-btn { background: none; border: 0; color: var(--on-brand); font: inherit; font-size: 14px; line-height: 1; padding: 4px 6px;
  border-radius: 6px; cursor: pointer; text-decoration: none; opacity: .85; }
.dock-w-btn:hover { opacity: 1; background: var(--ring); }
.dock-msgs { flex: 1 1 auto; padding: 10px; gap: 6px; background: var(--bg); font-size: 13.5px; }
.dock-msgs .msg { max-width: 88%; }
.dock-msgs .msg-files img { max-width: 200px; max-height: 160px; }
.dock-msgs .msg-reacts:empty, .dock-msgs .msg-del { display: none; }
.dock-msgs .dock-empty { align-self: center; margin-top: 20px; }
.dock-comp { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--line-soft); background: var(--card); }
.dock-comp textarea { flex: 1 1 auto; resize: none; min-height: 34px; max-height: 96px; padding: 7px 10px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--sunken); color: var(--ink); font: inherit; font-size: 13.5px; }
.dock-file { cursor: pointer; padding: 6px 4px; border-radius: 8px; opacity: .7; }
.dock-file.on { opacity: 1; background: var(--brand-soft); }
.dock-send { border: 0; background: var(--brand); color: var(--on-brand); border-radius: 50%; width: 34px; height: 34px;
  cursor: pointer; font-size: 14px; flex: 0 0 auto; }
.dock-send:disabled { opacity: .5; }
.dock-err { padding: 5px 10px; background: var(--err-bg); color: var(--err); }
@media (max-width: 1099px), (pointer: coarse) { .dock { display: none; } }
@media print { .dock { display: none; } }


/* Inbox-Detail (25.10.2026): ein Feld für neuen Entwurf/Anweisung, Schnellknöpfe, leise Nebenaktionen */
.rd-hint { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rd-hint-row { display: flex; gap: 8px; }
.rd-hint-row input { flex: 1; min-width: 0; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rd-chips .chip { cursor: pointer; font: inherit; font-size: 12px; }
.rd-chips .chip:hover { border-color: var(--accent); color: var(--accent); }
.ib-secondary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.ib-secondary .small-btn { margin-top: 0; }
.small-btn.danger-text { color: var(--err); }
.ib-head .head-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#ib-stock, .grid-2 > div > .ctx-card { margin-top: 16px; }

/* Inbox: bulgarische Übersetzung auf Abruf (25.10.2026) */
.ib-tr { margin-top: 10px; }
.ib-tr > summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.ib-tr-out { white-space: pre-wrap; margin-top: 8px; padding: 10px 12px; border-radius: 8px;
             background: var(--bg-soft, rgba(99,102,241,.06)); font-size: 13.5px; line-height: 1.5; }

/* ---------- F-Gas-Nachweise: Dokumente je Bestellung + Übersicht /fgas (25.10.2026) ---------- */
.fg-docs { margin: 4px 0 10px; }
.fg-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fg-file { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--sunken); color: var(--ink); text-decoration: none; }
.fg-file:hover { border-color: var(--brand-line); background: var(--hover); }
.fg-fn { font-weight: 600; word-break: break-all; }
.fg-note { margin: 2px 0 0 4px; }
.fg-up { margin-top: 8px; }
.fg-up-form { margin-top: 6px; max-width: 520px; }
.fg-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fg-filter label { display: inline-flex; align-items: center; gap: 6px; }
.fg-export { margin-left: auto; text-decoration: none; }
.fg-chip { display: inline-block; padding: 2px 8px; margin: 1px 2px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--sunken); color: var(--ink); text-decoration: none; font-size: 12px; white-space: nowrap; }
.fg-chip.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.fg-chip:hover { border-color: var(--brand-line); }
.fg-tbl .fg-note { max-width: 320px; }
@media (max-width: 700px) { .fg-export { margin-left: 0; width: 100%; text-align: center; } }

/* Inventur am Handy (25.10.2026) — große Ziele für den Daumen, oben fest */
.inv-whs { display: grid; gap: 12px; }
.inv-wh { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; font-size: 17px; }
.inv-top { position: sticky; top: 0; z-index: 5; background: var(--bg, #f6f7fb); padding: 8px 0 10px; }
.inv-top-row { display: flex; align-items: center; gap: 10px; }
.inv-top-row strong { flex: 1; }
.inv-prog { font-weight: 700; }
.inv-bar { height: 6px; background: var(--line); border-radius: 3px; margin: 8px 0; overflow: hidden; }
.inv-bar > div { height: 100%; background: var(--ok, #16a34a); transition: width .2s; }
.inv-tools { display: flex; gap: 8px; margin-bottom: 6px; }
.inv-tools input[type=search] { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; }
.inv-cam { display: inline-flex; align-items: center; cursor: pointer; margin-top: 0; white-space: nowrap; }
.inv-brand { font-weight: 700; margin: 14px 0 4px; color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.inv-row { display: grid; grid-template-columns: 48px 1fr 72px 40px; gap: 8px; align-items: center;
           background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 6px; }
.inv-row img, .inv-noimg { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: #fff;
           display: flex; align-items: center; justify-content: center; font-size: 22px; }
.inv-row .inv-t { min-width: 0; font-size: 14px; line-height: 1.3; }
.inv-row .inv-t > div:first-child { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inv-n { width: 72px; font-size: 18px; padding: 8px; text-align: center; }
.inv-eq { width: 40px; height: 40px; font-size: 18px; padding: 0; margin: 0; border-radius: 8px; }
.inv-row.done { border-color: #86efac; background: #f0fdf4; }
.inv-row.diff { border-color: #fdba74; background: #fff7ed; }
.inv-new { border-style: dashed; }

.inv-info { margin: 2px 0 6px; }
.inv-resume { width: 100%; margin: 4px 0 8px; font-size: 15px; padding: 10px; }
.inv-who { color: var(--ok, #16a34a); margin-top: 2px; }

/* ---------- „Моят ден“: nur eigene Zuständigkeiten auf „Heute“ (25.10.2026) ---------- */
.today-view { margin: 0; align-self: flex-start; }
.today-mine-hint { font-size: 12.5px; color: var(--brand); font-weight: 600; }
.today-others { margin: -4px 2px 14px; font-size: 13px; color: var(--muted); }
.today-others a { color: var(--muted); text-decoration: underline dotted; }
.today-others a:hover { color: var(--brand); }
.areas-tbl th.c, .areas-tbl td.c { text-align: center; }
.areas-tbl th.c { font-size: 12px; max-width: 110px; white-space: normal; line-height: 1.2; }
.areas-tbl input[type=checkbox] { width: 18px; height: 18px; }

/* ---------- Prüfung 25.10.2026: „Heute“ am Handy — rote Hinweise umbrechen statt abschneiden ---------- */
@media (max-width: 700px) {
  .tbl.cards td .badge { white-space: normal; display: inline-block; max-width: 100%; line-height: 1.3; }
  .tbl.cards td.nowrap { white-space: normal; }
}

/* ---------- Beta-Menü (K11, 26.10.2026) ---------- */
button.nav-search.cmdk-open { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 4px);
  margin: 0 2px 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--sb-line); background: var(--sb-field);
  color: var(--sb-ink); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
button.nav-search.cmdk-open kbd { font: 500 11px var(--mono); opacity: .7; }
button.nav-search.cmdk-open:hover { color: var(--sb-strong); }
.beta-try { font-size: 12.5px !important; opacity: .75; }
.beta-nav-gap { height: 1px; background: var(--sb-line); margin: 10px 8px; }
.sidebar nav .fav-dot { color: #f5c451; margin-right: 8px; font-size: 12px; }
.beta-tabs-row { display: flex; align-items: flex-end; gap: 8px; margin: -4px 0 18px; border-bottom: 1px solid var(--line); }
.beta-tabs-row .page-tabs { margin: 0; border-bottom: 0; flex: 1; min-width: 0; }
.beta-tabs-row .fav-star { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1; padding: 6px 8px 9px;
  color: var(--faint); cursor: pointer; }
.beta-tabs-row .fav-star.on { color: var(--amber); }
.beta-tabs-row .fav-star:hover { color: var(--amber); }
.cmdk-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(12, 18, 34, .45); display: flex; justify-content: center;
  align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk { width: 100%; max-width: 600px; background: var(--card); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow-pop);
  border: 1px solid var(--line); overflow: hidden; }
.cmdk-in { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font: inherit; font-size: 16px;
  background: transparent; color: var(--ink); outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-g { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 10px 4px; }
.cmdk-it { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.cmdk-it.on { background: var(--brand-soft); color: var(--brand); }
.cmdk-it.act { font-weight: 600; }
.cmdk-ic { width: 20px; text-align: center; }
.cmdk-none { padding: 18px; color: var(--muted); text-align: center; }
.cmdk-hint { border-top: 1px solid var(--line); padding: 8px 14px; font-size: 12px; color: var(--faint); }
/* Fußzeile: langer Rollenname schob 🔔/Abmelden aus der Leiste (26.10.2026) */
.sidebar-foot .user-chip, .sidebar-foot .user-meta { min-width: 0; }
.sidebar-foot .avatar, .sidebar-foot .bell, .sidebar-foot .logout { flex: none; }
.sidebar-foot .user-name, .sidebar-foot .user-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Beta: Name/Rolle volle Breite, darunter 💬 🔔 ⎋ in einer Reihe rechts */
.sidebar-foot.foot-beta { flex-wrap: wrap; row-gap: 2px; }
.sidebar-foot.foot-beta .user-chip { flex: 1 0 100%; }
.sidebar-foot.foot-beta .user-chip + .bell { margin-left: auto; }

/* ---------- Beta-Oberfläche: eine Schablone für alle Seiten (K11 Welle 2, 26.10.2026) ----------
   Vorbild Shopify Polaris / Linear: Titel + ein Satz, Aktionen rechts oben als Knöpfe, Schnellfilter als Chips,
   ruhige Tabellen mit festem Kopf, Karten ohne schwere Schatten, erklärende Leer-Zustände. Nur body.beta-ui. */
.beta-ui .page-head { align-items: flex-end; margin-bottom: 16px; }
.beta-ui .page-head h1 { font-size: 24px; letter-spacing: -.4px; }
.beta-ui .page-head .sub { font-size: 14px; max-width: 75ch; }
.beta-ui .head-badges { padding-top: 0; flex-wrap: wrap; justify-content: flex-end; }
.beta-ui .head-badges .seg, .beta-ui .head-badges .btn, .beta-ui .head-badges button {
  border-radius: 8px; padding: 7px 13px; font-size: 13px; font-weight: 600; }
.beta-ui .seg-tabs { gap: 6px; margin-bottom: 12px; align-items: center; }
.beta-ui .seg-tabs .seg { padding: 5px 12px; font-size: 13px; font-weight: 600; border-radius: 999px; }
.beta-ui .seg-tabs .seg.active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.beta-ui .filter-bar { gap: 8px; align-items: center; padding: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 14px; }
.beta-ui .filter-bar input:not([type=checkbox]):not([type=radio]), .beta-ui .filter-bar select {
  height: 36px; border-radius: 8px; font-size: 13.5px; }
.beta-ui .filter-bar input[type=search], .beta-ui .filter-bar input[name=q] { flex: 1 1 240px; min-width: 200px; }
.beta-ui .card { box-shadow: none; padding: 16px 18px; border-radius: 12px; }
.beta-ui .tbl th { position: sticky; top: 0; z-index: 1; background: var(--card); font-size: 11px; letter-spacing: .6px; }
.beta-ui .tbl td { padding: 9px 10px; border-bottom-color: var(--line-soft); }
.beta-ui .tbl tbody tr:hover td { background: var(--hover); }
.beta-ui .tbl .num, .beta-ui .tbl td.num { font-variant-numeric: tabular-nums; }
.beta-ui .empty, .beta-ui p.empty, .beta-ui .cq-empty { padding: 40px 20px !important; font-size: 14px; }
.beta-ui .empty::before, .beta-ui .cq-empty::before { content: "📭"; display: block; font-size: 26px; margin-bottom: 6px; opacity: .8; }
.beta-ui .flash { border-radius: 10px; }
/* Gespeicherte Ansichten */
.bv-views { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 8px; }
.bv-views > a, .bv-v > a { padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bv-views > a.on, .bv-v.on > a { background: var(--brand-soft); color: var(--brand); }
.bv-v { display: inline-flex; align-items: center; border-radius: 8px; }
.bv-v button { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 6px 0 0; font-size: 15px; line-height: 1; }
.bv-v button:hover { color: var(--err); }
.bv-save { border: 1px dashed var(--line); background: none; color: var(--brand); border-radius: 8px; padding: 4px 11px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.bv-new { display: inline-flex; gap: 4px; }
.bv-new input { height: 30px; border-radius: 8px; border: 1px solid var(--brand-line); padding: 0 8px; font: inherit; font-size: 13px; }
.bv-new button { border: 0; border-radius: 8px; background: var(--brand); color: var(--on-brand); padding: 0 10px; font: inherit; font-size: 13px; cursor: pointer; }
.bv-hint { font-size: 12.5px; color: var(--faint); padding-left: 6px; }
/* Auswahl + Sammelaktionen */
.tbl th.bv-c, .tbl td.bv-c { width: 30px; padding-right: 0 !important; }
.bv-bulk { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 900; display: flex; gap: 6px; align-items: center;
  background: #101828; color: #fff; border-radius: 12px; padding: 8px 10px 8px 16px; box-shadow: var(--shadow-pop); }
.bv-bulk b { font-size: 13.5px; margin-right: 6px; white-space: nowrap; }
.bv-bulk button { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: 8px;
  padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.bv-bulk button:hover { background: rgba(255,255,255,.14); }
.bv-bulk .bv-x { border: 0; background: none; opacity: .7; }
/* Inventur: unerkannte Fotos (26.10.) */
.inv-parked { display: inline-block; margin: 2px 0 4px; }
.inv-park { display: flex; gap: 10px; align-items: flex-start; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 6px 0; }
.inv-park[hidden] { display: none; }
.inv-park img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; }
.inv-park-f { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.inv-park-f input { font-size: 16px; padding: 8px 10px; }
.inv-ph { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.inv-ph img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; flex: none; }
.inv-ph-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.inv-ph-q { font-size: 16px; padding: 8px 10px; }
.inv-ph-res { display: flex; flex-direction: column; gap: 4px; }
.inv-ph-hit { text-align: left; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px; color: inherit; font-size: 14px; }
.inv-park-more { display: flex; align-items: center; gap: 8px; }
.inv-ph-imgs { display: flex; flex-direction: column; gap: 4px; flex: none; }
.inv-ph-imgs .inv-ph-x { width: 110px; height: 70px; }
.inv-retbar { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.inv-ret select { font-size: 16px; padding: 8px 10px; }
.inv-busy { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.inv-busy[hidden] { display: none; }
.inv-busy-box { background: var(--card, #fff); color: inherit; border-radius: 12px; padding: 18px 22px; display: flex; align-items: center; gap: 12px; font-size: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.inv-spin { width: 22px; height: 22px; border: 3px solid var(--line, #ddd); border-top-color: var(--ok, #16a34a); border-radius: 50%; animation: inv-spin .8s linear infinite; }
@keyframes inv-spin { to { transform: rotate(360deg); } }
.inv-newver { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 40; padding: 14px; font-size: 16px; border-radius: 10px; }
.inv-newver[hidden] { display: none; }
.inv-camui { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.inv-camui[hidden] { display: none; }
.inv-camui video { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.inv-cambar { display: flex; align-items: center; justify-content: space-around; padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); }
.inv-cam-b { background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 50%; width: 52px; height: 52px; font-size: 22px; margin: 0; }
.inv-cam-shot { width: 74px; height: 74px; border-radius: 50%; background: #fff; border: 5px solid rgba(255,255,255,.45); background-clip: padding-box; margin: 0; }
.inv-park-ret { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.inv-park-ret input { width: 22px; height: 22px; }
.inv-conds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-conds[hidden] { display: none; }
.inv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 16px; font-size: 14px; }
.inv-ph-sug { border-color: var(--ok, #16a34a); font-weight: 600; }
.inv-top.inv-top-open { position: static; }
.inv-conds .inv-chip { padding: 5px 9px; font-size: 13px; }
.inv-acts { display: flex; gap: 6px; margin-top: 4px; }
.inv-acts button { margin: 0; padding: 4px 10px; font-size: 13px; border-radius: 14px; background: transparent; color: inherit; border: 1px solid var(--line); min-height: 30px; }
.inv-acts .inv-plus { font-weight: 700; }
.inv-ph-edit summary { cursor: pointer; margin: 2px 0; }
.inv-ph-edit form { margin-top: 6px; }
.inv-reload { margin: 0; width: 36px; height: 36px; padding: 0; font-size: 20px; line-height: 1; border-radius: 8px; background: transparent; color: inherit; border: 1px solid var(--line); }
.inv-pick { border: 2px solid var(--accent, #4f46e5); border-radius: 10px; padding: 10px; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; background: var(--card, #fff); }
.inv-pick-hint { background: var(--warn-bg, #fff7ed); color: var(--warn, #c2410c); padding: 6px 8px; border-radius: 6px; font-weight: 600; font-size: 14px; }
.inv-pick-line { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.inv-pick-line .small-btn { margin: 0; padding: 10px 12px; font-size: 15px; }
.inv-tasks { margin: 8px 0 12px; padding: 10px 12px; border: 2px solid var(--warn, #f59e0b); }
.inv-tasks summary { cursor: pointer; font-size: 16px; }
.inv-task { border-top: 1px solid var(--line); padding: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.inv-task.done { opacity: .55; }
.inv-task-t { white-space: pre-line; font-size: 15px; }
.inv-task-ph { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-task-ph a { position: relative; display: block; }
.inv-task-ph img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.inv-task-ph span { position: absolute; left: 2px; bottom: 2px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 0 4px; border-radius: 4px; }
.inv-task-f, .inv-task-new { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-task-f input, .inv-task-new input { flex: 1; min-width: 120px; font-size: 16px; padding: 8px 10px; }
.inv-task-f button, .inv-task-new button { margin: 0; }
.inv-row { grid-template-columns: 48px 1fr 64px auto; }
.inv-n { width: 64px; }
.inv-eq { width: auto; min-width: 44px; padding: 0 8px; font-size: 15px; white-space: nowrap; }
.beta-banner { display: block; margin: 0 2px 12px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); text-decoration: none; }
.beta-banner:hover { filter: brightness(1.1); }
/* Aktiver Chip ist hell (Beta-Oberfläche) → Zähler dunkel/markenfarbig, sonst unlesbar (26.10.2026) */
.beta-ui .seg-tabs .seg.active .seg-count, .beta-ui .seg-tabs .seg.active .seg-count.hot { background: var(--brand); color: var(--on-brand); }
.bv-bulk[hidden] { display: none; }   /* Leiste nur bei Auswahl (26.10.2026: war immer sichtbar) */
.bv-views[hidden] { display: none; }
/* Dock: „—“ im Listenkopf (27.10.) */
.dock-list-act { display: flex; align-items: center; gap: 8px; }
.dock-list-min { color: var(--muted); }
/* Inventur „Neue Version“ am Handy über der unteren Leiste (27.10.) */
@media (max-width: 820px) {
  .inv-newver { bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 50; }
}
/* Neue Bestellung am Handy: Positionen als kompakte Blöcke statt 960px-Tabelle (27.10.) */
@media (max-width: 820px) {
  table.tbl.on-lines { min-width: 0; }
  table.tbl.on-lines thead { display: none; }
  table.tbl.on-lines, table.tbl.on-lines tbody { display: block; }
  table.tbl.on-lines tr { display: grid; grid-template-columns: 1fr 76px; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  table.tbl.on-lines td { display: block; padding: 0; border: 0; }
  table.tbl.on-lines td.on-n { display: none; }
  table.tbl.on-lines td.on-title, table.tbl.on-lines td.on-price { grid-column: 1 / -1; }
  table.tbl.on-lines td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
}

/* F-Gas-Versandsperre (29.10.2026) */
.fgas-stop { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err); font-weight: 600;
  border-radius: 10px; padding: 10px 12px; margin: 8px 0 0; font-size: 14px; }
.fgas-override { color: var(--err); font-weight: 600; }

/* Mini-Chat zugeklappt = kleiner Knopf statt 280-px-Leiste, damit er keine Knöpfe/Tabellen verdeckt (K13, 29.10.2026) */
.dock-side:has(> .dock-list[hidden]) { width: auto; align-items: flex-end; }
.dock-side:has(> .dock-list[hidden]) .dock-bar { width: auto; gap: 6px; padding: 7px 12px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
body:has(#dock) .content { padding-bottom: 110px; }   /* Seitenende lässt sich über den Knopf hinaus scrollen */
/* K13 Punkt 5: Wegweiser zwischen den Bestell-Ansichten */
.ow-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.ow-i { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; background: #fff; }
.ow-i:hover { color: var(--brand); border-color: var(--brand); }
.ow-i.on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
/* Inventur 31.10.: Doppel-Scan-Warnung + Zähl-Verlauf */
.inv-dup { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; border-radius: 6px; padding: 6px 8px; font-weight: 600; }
.inv-who { cursor: pointer; }
.inv-hist { margin-top: 4px; padding: 4px 6px; border-left: 3px solid var(--line); color: var(--muted); }

/* „Снимай отново“ (31.10.) */
.inv-reshoot { margin: 8px 0 12px; padding: 10px 12px; border: 2px solid var(--accent, #2563eb); }
.inv-rs { display: flex; gap: 10px; border-top: 1px solid var(--line); padding: 8px 0; }
.inv-rs.done { opacity: .6; }
.inv-rs a { position: relative; flex: none; }
.inv-rs img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; display: block; }
.inv-rs a span { position: absolute; left: 0; top: 0; background: #fde047; color: #000; font-weight: 700; font-size: 13px; padding: 1px 5px; border-radius: 6px 0 6px 0; }
.inv-rs-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.inv-rs-q { white-space: pre-line; font-size: 15px; }
#inv-ph-go { font-size: 16px; padding: 8px 10px; width: 100%; max-width: 260px; margin: 4px 0; }
.inv-ph-add { align-self: flex-start; }
.inv-rs-a { display: flex; gap: 6px; width: 100%; max-width: 520px; margin: 0; }
.inv-rs-a input { flex: 1; min-width: 0; font-size: 16px; padding: 7px 9px; }
.inv-rs-ans { white-space: pre-line; background: var(--soft, #f1f5f9); border-radius: 6px; padding: 4px 8px; }