/* ================================================================
   TEAM · Stylesheet
   ================================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:       #f8f8f7;
  --surface:  #ffffff;
  --border:   #e8e8e6;
  --border2:  #d8d8d5;
  --text:     #1a1a18;
  --text2:    #6b6b65;
  --text3:    #a8a8a0;
  --accent:   #2D5016;
  --accent-s: #eef2e8;
  --gold:     #9eb88a;   /* war #C8A84B — jetzt gedämpftes Sage */
  --bar:      #1c1c1e;   /* war #1a2e0e — jetzt neutrales Dunkelgrau */
  --danger:   #cc3333;
}

body {
  font-family:-apple-system,'Segoe UI',BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--text);
  height:100vh; display:flex; flex-direction:column;
  overflow:hidden; font-size:13.5px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

/* ── Topbar ───────────────────────────────────────────────────── */
.topbar {
  height:46px; background:var(--bar);
  display:flex; align-items:center;
  padding:0 14px; gap:8px; flex-shrink:0;
}
.t-logo {
  font-size:13px; font-weight:600; color:rgba(255,255,255,0.38);
  letter-spacing:2.5px; text-transform:uppercase; margin-right:6px;
}
.t-div { width:1px; height:16px; background:rgba(255,255,255,0.1); margin:0 6px; }
.t-tool {
  padding:4px 11px; border-radius:5px; font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,0.45); cursor:pointer; transition:all 0.12s;
  display:flex; align-items:center; gap:5px; border:none;
  background:none; font-family:inherit;
}
.t-tool:hover { color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.05); }
.t-tool.on    { color:rgba(255,255,255,0.9);  background:rgba(255,255,255,0.08); }
.t-badge {
  background:var(--danger); color:white; font-size:9px; font-weight:700;
  border-radius:8px; padding:1px 5px; min-width:16px; text-align:center;
}
.t-search {
  flex:1; max-width:260px; margin:0 10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
  border-radius:6px; padding:5px 12px; color:rgba(255,255,255,0.7);
  font-size:12.5px; font-family:inherit; outline:none;
}
.t-search::placeholder { color:rgba(255,255,255,0.25); }
.t-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
.t-icon {
  width:30px; height:30px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.4); cursor:pointer; position:relative;
}
.t-icon:hover { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.7); }
.t-icon svg { width:15px; height:15px; }
.t-icon .dot {
  position:absolute; top:5px; right:5px;
  width:6px; height:6px; background:var(--danger);
  border-radius:50%; border:1.5px solid var(--bar);
}
.t-av {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.13); color:rgba(255,255,255,0.75);
  font-weight:600; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; border:1px solid rgba(255,255,255,0.1);
}
.t-av:hover { background:rgba(255,255,255,0.18); }

/* ── Layout ───────────────────────────────────────────────────── */
.body  { display:flex; flex:1; overflow:hidden; }
.main  { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.view  { display:none; flex:1; flex-direction:row; overflow:hidden; min-width:0; }
.view.on { display:flex; }

/* ── Icon Bar ─────────────────────────────────────────────────── */
.bar {
  width:64px; background:var(--bar);
  display:flex; flex-direction:column;
  align-items:center; padding:10px 0; flex-shrink:0;
}
.flora-btn {
  width:48px; background:rgba(255,255,255,0.07); border-radius:12px;
  padding:9px 0 7px; display:flex; flex-direction:column;
  align-items:center; gap:3px; cursor:pointer;
  margin-bottom:12px; position:relative; transition:all 0.15s;
  border:1px solid rgba(255,255,255,0.1);
}
.flora-btn:hover { background:rgba(255,255,255,0.11); }
.flora-btn.on { background:rgba(255,255,255,0.11); box-shadow:0 0 0 1.5px rgba(255,255,255,0.18); }
.flora-btn .ficon  { font-size:20px; line-height:1; }
.flora-btn .flabel { font-size:8.5px; font-weight:600; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.5px; }
.flora-btn .fpulse {
  position:absolute; top:6px; right:7px;
  width:6px; height:6px; background:#5cb85c;
  border-radius:50%; border:1.5px solid var(--bar);
}
.bar-sep { width:28px; height:1px; background:rgba(255,255,255,0.06); margin:4px auto; }
.bicon {
  width:46px; height:44px; border-radius:8px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; cursor:pointer;
  color:rgba(255,255,255,0.35); transition:all 0.12s;
  position:relative; margin-bottom:1px;
}
.bicon svg { width:17px; height:17px; display:block; }
.bicon .lbl { font-size:8.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.2px; }
.bicon:hover { color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.05); }
.bicon.on    { color:rgba(255,255,255,0.88); }
.bicon.on::before {
  content:''; position:absolute; left:-1px; top:8px; bottom:8px;
  width:2px; background:#6aad50; border-radius:0 2px 2px 0;
}
.bicon .bb {
  position:absolute; top:4px; right:4px;
  background:var(--danger); color:white; font-size:8.5px; font-weight:700;
  border-radius:8px; padding:1px 4px;
}
.bar-bottom { margin-top:auto; padding:6px 0; }

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  width:240px; background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0;
}
.sb-top {
  padding:13px 15px 10px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.sb-top h2 { font-size:14px; font-weight:600; }
.sb-new {
  font-size:11.5px; font-weight:600; color:var(--accent);
  background:none; border:none; cursor:pointer;
  font-family:inherit; padding:0;
}
.sb-new:hover { opacity:0.7; }
.sb-search { padding:8px 12px; border-bottom:1px solid var(--border); }
.sb-search input {
  width:100%; border:1px solid var(--border); border-radius:6px;
  padding:5px 10px; font-size:12.5px; outline:none;
  font-family:inherit; background:var(--bg); color:var(--text);
}
.sb-search input:focus { border-color:var(--accent); }
.sb-body  { flex:1; overflow-y:auto; padding:4px 0; }
.sb-sec   { font-size:10px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:0.7px; padding:10px 14px 3px; }
.sb-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 14px; cursor:pointer; transition:background 0.1s; position:relative;
}
.sb-row:hover { background:var(--bg); }
.sb-row.on    { background:var(--accent-s); }
.sb-row.on::before { content:''; position:absolute; left:0; top:5px; bottom:5px; width:2px; background:var(--accent); border-radius:0 2px 2px 0; }
.sb-row .sn   { flex:1; font-size:13px; color:var(--text); }
.sb-row.on .sn { font-weight:600; color:var(--accent); }
.sb-row .sbadge { font-size:10px; font-weight:700; border-radius:8px; padding:1px 6px; background:var(--danger); color:white; }
.ci {
  display:flex; gap:9px; padding:9px 13px;
  cursor:pointer; transition:background 0.1s;
  border-bottom:1px solid var(--border);
}
.ci:hover { background:var(--bg); }
.ci.on    { background:var(--accent-s); }
.ci-av {
  width:34px; height:34px; border-radius:50%;
  color:white; font-weight:600; font-size:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ci-info { flex:1; min-width:0; }
.ci-name { font-size:13px; font-weight:600; }
.ci-prev { font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.ci-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.ci-time   { font-size:11px; color:var(--text3); }
.ci-unread { background:var(--accent); color:white; font-size:10px; font-weight:700; border-radius:8px; padding:1px 6px; }

/* ── Chat ─────────────────────────────────────────────────────── */
.area-head {
  height:46px; flex-shrink:0; padding:0 16px;
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.area-head .ah-av   { width:30px; height:30px; border-radius:50%; color:white; font-weight:600; font-size:11px; display:flex; align-items:center; justify-content:center; }
.area-head .ah-name { font-size:14px; font-weight:600; }
.area-head .ah-sub  { font-size:11.5px; color:var(--text2); margin-top:1px; }
.area-head .ah-btns { margin-left:auto; display:flex; gap:5px; }
.ah-btn { padding:4px 11px; border-radius:5px; border:1px solid var(--border); background:var(--bg); cursor:pointer; font-size:12px; font-family:inherit; color:var(--text2); }
.ah-btn:hover { border-color:var(--border2); color:var(--text); }

.chat-msgs { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
.date-line { text-align:center; font-size:11px; color:var(--text3); position:relative; margin:4px 0; }
.date-line::before,.date-line::after { content:''; position:absolute; top:50%; width:44%; height:1px; background:var(--border); }
.date-line::before { left:0; } .date-line::after { right:0; }

.msg { display:flex; gap:10px; align-items:flex-start; }
.msg.me { flex-direction:row-reverse; }
.msg-av {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:11px; color:white;
}
.msg-body { max-width:62%; }
.msg-meta { font-size:11px; color:var(--text3); margin-bottom:3px; }
.msg.me .msg-meta { text-align:right; }
.bubble {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:9px 13px;
  font-size:13.5px; line-height:1.55; color:var(--text);
}
.msg.me .bubble { background:var(--accent); color:white; border-color:transparent; }
.bubble .mention { color:var(--accent); font-weight:600; }
.msg.me .bubble .mention { color:var(--gold); }

.msg-reactions { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; }
.reaction-pill {
  display:flex; align-items:center; gap:3px;
  padding:2px 7px; border-radius:10px;
  background:var(--bg); border:1px solid var(--border);
  font-size:12px; cursor:pointer; transition:all 0.1s;
}
.reaction-pill:hover { border-color:var(--accent); background:var(--accent-s); }

.input-area { padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0; background:var(--surface); }
.input-box { border:1px solid var(--border); border-radius:9px; overflow:hidden; transition:border-color 0.15s; }
.input-box:focus-within { border-color:var(--accent); }
.input-box textarea {
  width:100%; border:none; padding:9px 14px;
  font-size:13.5px; font-family:inherit; resize:none;
  outline:none; min-height:38px; max-height:100px;
  background:var(--surface); color:var(--text);
}
.input-tools { display:flex; align-items:center; gap:5px; padding:6px 10px; border-top:1px solid var(--border); background:var(--bg); }
.itool { width:26px; height:26px; border-radius:5px; border:none; background:none; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; color:var(--text3); }
.itool:hover { background:var(--border); color:var(--text2); }
.itool svg { width:14px; height:14px; }
.hint-txt { font-size:11px; color:var(--text3); margin-left:2px; }
.send { margin-left:auto; background:var(--accent); color:white; border:none; border-radius:6px; padding:5px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.send:hover   { opacity:0.88; }
.send:disabled{ opacity:0.4; cursor:not-allowed; }

/* ── Status-Punkte ────────────────────────────────────────────── */
.status-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.status-dot.online  { background:#4a9e4a; }
.status-dot.away    { background:#c8a84b; }
.status-dot.busy    { background:#cc3333; }
.status-dot.offline { background:var(--text3); }

/* ── Avatar-Farben ────────────────────────────────────────────── */
.av-green { background:#2D5016; }
.av-teal  { background:#1a7888; }
.av-olive { background:#5c7a1a; }
.av-blue  { background:#2a449a; }
.av-rose  { background:#8a2a50; }
.av-amber { background:#8a5a14; }
.av-gold  { background:var(--gold); color:var(--accent) !important; }

/* ── Toast-Nachrichten ────────────────────────────────────────── */
.toast-wrap { position:fixed; bottom:20px; right:20px; z-index:999; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--bar); color:white; padding:10px 16px;
  border-radius:8px; font-size:13px; box-shadow:0 4px 16px rgba(0,0,0,0.3);
  animation:slideIn 0.2s ease; max-width:300px;
}
.toast.error { background:#991111; }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ── Loading-Spinner ──────────────────────────────────────────── */
.spinner {
  width:20px; height:20px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-center { flex:1; display:flex; align-items:center; justify-content:center; }

/* ── Empty State ──────────────────────────────────────────────── */
.empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text3); gap:8px; }
.empty-state .ei { font-size:36px; }
.empty-state .et { font-size:14px; font-weight:500; color:var(--text2); }
.empty-state .es { font-size:12.5px; }

/* ── App Shell (Vollbild-Modus) ───────────────────────────────── */
.app-shell { display:none; position:fixed; inset:0; z-index:100; background:var(--bg); flex-direction:column; }
body.app-mode .app-shell { display:flex; }
body.app-mode .topbar, body.app-mode .body { display:none; }
.app-bar { height:46px; background:var(--bar); display:flex; align-items:center; padding:0 14px; gap:10px; flex-shrink:0; }
.app-back { display:flex; align-items:center; gap:5px; color:rgba(255,255,255,0.5); font-size:12.5px; cursor:pointer; padding:4px 10px; border-radius:5px; border:none; background:none; font-family:inherit; transition:all 0.12s; }
.app-back:hover { color:rgba(255,255,255,0.82); background:rgba(255,255,255,0.07); }
.app-back svg { width:13px; height:13px; }
.app-bar-title { font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.88); }
.app-nav { display:flex; gap:2px; }
.app-nav-item { padding:4px 11px; border-radius:5px; font-size:12.5px; color:rgba(255,255,255,0.45); cursor:pointer; transition:all 0.12s; border:none; background:none; font-family:inherit; }
.app-nav-item:hover { color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.05); }
.app-nav-item.on   { color:rgba(255,255,255,0.9);  background:rgba(255,255,255,0.08); }
.app-body { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.app-sub-nav { display:flex; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; padding:0 16px; }
.app-sub-item { padding:10px 14px; font-size:13px; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.12s; border:none; border-bottom:2px solid transparent; background:none; font-family:inherit; margin-bottom:-1px; }
.app-sub-item:hover { color:var(--text); }
.app-sub-item.on   { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.app-content { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; }
.app-placeholder { text-align:center; }
.app-placeholder-icon { font-size:40px; margin-bottom:12px; }
.app-placeholder-name { font-size:17px; font-weight:600; color:var(--text); margin-bottom:6px; }
.app-placeholder-desc { font-size:13px; color:var(--text3); }

/* ════════════════════════════════════════════════════════════
   BACKOFFICE
   ════════════════════════════════════════════════════════════ */

/* Layout */
.app-body { flex:1; overflow:hidden; display:flex; flex-direction:column; }
#bo-shell { overflow:hidden; flex:1; flex-direction:row; }
.bo-sidebar {
  width:218px; background:var(--surface); border-right:1px solid var(--border);
  flex-shrink:0; display:flex; flex-direction:column;
}
.bo-sb-top { padding:14px 15px 10px; border-bottom:1px solid var(--border); }
.bo-sb-top h2 { font-size:14px; font-weight:600; }
.bo-sb-top p  { font-size:11.5px; color:var(--text3); margin-top:1px; }
.bo-sb-body  { flex:1; overflow-y:auto; padding:4px 0; }
.bo-sb-sec   { font-size:10px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:0.7px; padding:10px 14px 3px; }
.bo-sb-item  { display:flex; align-items:center; gap:8px; padding:7px 14px; cursor:pointer; transition:background 0.1s; position:relative; }
.bo-sb-item:hover { background:var(--bg); }
.bo-sb-item.on    { background:var(--accent-s); }
.bo-sb-item.on::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:2px; background:var(--accent); border-radius:0 2px 2px 0; }
.bo-sb-item svg  { width:15px; height:15px; flex-shrink:0; color:var(--text3); }
.bo-sb-item.on svg { color:var(--accent); }
.bo-sb-item .sn  { flex:1; font-size:13px; color:var(--text); }
.bo-sb-item.on .sn { font-weight:600; color:var(--accent); }
.bo-sb-item .badge { font-size:10px; font-weight:700; border-radius:8px; padding:1px 6px; background:var(--danger); color:white; }
.bo-sb-item .badge.warn { background:#fff4e6; color:#c07828; border:1px solid #efd0a0; }

.bo-main { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.bv      { display:none; flex:1; flex-direction:column; overflow:hidden; }
.bv.on   { display:flex; }

/* Firma Switcher */
.bo-firma-sw {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09);
  border-radius:6px; padding:4px 10px; cursor:pointer; transition:all 0.12s;
}
.bo-firma-sw:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.14); }
.bo-firma-dot   { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.bo-firma-sw span { font-size:12.5px; color:rgba(255,255,255,0.75); font-weight:500; }
.bo-firma-arrow { font-size:10px; color:rgba(255,255,255,0.28) !important; font-weight:400 !important; margin-left:2px; }

/* Page Header */
.bo-page-head {
  padding:16px 20px 12px; border-bottom:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
  display:flex; align-items:center; gap:12px;
}
.bo-page-head h1 { font-size:16px; font-weight:600; }
.bo-page-head p  { font-size:12.5px; color:var(--text2); margin-top:1px; }
.bo-page-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }

/* Scroll */
.bo-scroll { flex:1; overflow-y:auto; padding:20px; }

/* KPI Cards */
.bo-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.bo-kpi-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px; }
.bo-kpi-label { font-size:11.5px; color:var(--text3); font-weight:500; text-transform:uppercase; letter-spacing:0.4px; }
.bo-kpi-val   { font-size:22px; font-weight:700; margin:6px 0 2px; }
.bo-kpi-sub   { font-size:11.5px; color:var(--text2); }
.bo-kpi-card.warn  .bo-kpi-val { color:#c07828; }
.bo-kpi-card.ok    .bo-kpi-val { color:#2a7a2a; }
.bo-kpi-card.alert .bo-kpi-val { color:var(--danger); }

/* Buttons */
.bo-btn {
  padding:6px 14px; border-radius:6px; font-size:12.5px; font-weight:500;
  cursor:pointer; font-family:inherit; border:1px solid var(--border);
  background:var(--bg); color:var(--text2); transition:all 0.12s; white-space:nowrap;
}
.bo-btn:hover   { border-color:var(--border2); color:var(--text); }
.bo-btn.primary { background:var(--accent); color:white; border-color:var(--accent); }
.bo-btn.primary:hover { opacity:0.88; }
.bo-btn.ok      { background:#2a7a2a; color:white; border-color:#2a7a2a; }
.bo-btn.ok:hover { opacity:0.88; }
.bo-btn.danger  { background:var(--danger); color:white; border-color:var(--danger); }
.bo-btn:disabled { opacity:0.4; cursor:not-allowed; }
.bo-btn.sm { padding:4px 10px; font-size:12px; }

/* Filter Bar */
.bo-filter-bar {
  display:flex; gap:8px; padding:10px 16px;
  border-bottom:1px solid var(--border); background:var(--surface);
  flex-shrink:0; align-items:center; flex-wrap:wrap;
}
.bo-filter-tabs { display:flex; gap:1px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:2px; }
.bo-filter-tab  {
  padding:4px 11px; border-radius:4px; font-size:12px; cursor:pointer;
  border:none; background:none; font-family:inherit; color:var(--text2); transition:all 0.1s;
}
.bo-filter-tab:hover { color:var(--text); }
.bo-filter-tab.on { background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.bo-search {
  border:1px solid var(--border); border-radius:6px; padding:5px 10px;
  font-size:12.5px; font-family:inherit; outline:none; background:var(--bg);
  width:200px; color:var(--text); margin-left:auto;
}
.bo-search:focus { border-color:var(--accent); }

/* Data Table */
.bo-table-wrap { flex:1; overflow-y:auto; }
.bo-table { width:100%; border-collapse:collapse; font-size:13px; }
.bo-table th {
  text-align:left; font-size:11px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.5px; padding:8px 14px;
  border-bottom:2px solid var(--border); background:var(--bg);
  position:sticky; top:0; white-space:nowrap;
}
.bo-table td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.bo-table tr:hover td { background:#fafaf9; cursor:pointer; }
.bo-table tr.sel td { background:var(--accent-s) !important; }
.bo-table tr:last-child td { border-bottom:none; }

/* Status Badges */
.st {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:3px 8px;
  border-radius:10px; white-space:nowrap;
}
.st::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.st.offen       { background:#fff4e6; color:#c07828; border:1px solid #efd0a0; }
.st.offen::before    { background:#c07828; }
.st.bezahlt     { background:#eef7ee; color:#2a7a2a; border:1px solid #b4d8b4; }
.st.bezahlt::before  { background:#2a7a2a; }
.st.ueberfaellig{ background:#fef0f0; color:var(--danger); border:1px solid #f5c0c0; }
.st.ueberfaellig::before { background:var(--danger); }
.st.entwurf     { background:var(--bg); color:var(--text3); border:1px solid var(--border); }
.st.entwurf::before  { background:var(--text3); }
.st.gebucht     { background:var(--accent-s); color:var(--accent); border:1px solid #b4d0a0; }
.st.gebucht::before  { background:var(--accent); }

/* Direction Badge */
.dir { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:4px; }
.dir.in  { background:#eef2ff; color:#3a48aa; border:1px solid #b4c0e8; }
.dir.out { background:var(--accent-s); color:var(--accent); border:1px solid #b4d0a0; }

/* Amount */
.amt { font-weight:600; font-variant-numeric:tabular-nums; }
.amt.pos { color:#2a7a2a; }
.amt.neg { color:var(--danger); }

/* Modal */
.bo-modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:500; align-items:center; justify-content:center; }
.bo-modal-bg.on { display:flex; }
.bo-modal {
  background:var(--surface); border-radius:12px; padding:24px;
  max-width:95vw; max-height:88vh; overflow-y:auto;
  box-shadow:0 8px 40px rgba(0,0,0,0.25);
}
.bo-modal-head { display:flex; align-items:center; margin-bottom:20px; }
.bo-modal-head h2 { font-size:15px; font-weight:700; flex:1; }
.bo-modal-close { width:28px; height:28px; border-radius:6px; border:none; background:var(--bg); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; color:var(--text2); }
.bo-modal-close:hover { background:var(--border); }
.bo-modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }

/* Form */
.bo-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bo-fg { display:flex; flex-direction:column; gap:4px; }
.bo-fg.full { grid-column:1/-1; }
.bo-fg label { font-size:12px; font-weight:500; color:var(--text2); }
.bo-fg input, .bo-fg select, .bo-fg textarea {
  border:1px solid var(--border); border-radius:6px; padding:7px 10px;
  font-size:13px; font-family:inherit; outline:none;
  background:var(--bg); color:var(--text); transition:border-color 0.15s;
}
.bo-fg input:focus, .bo-fg select:focus, .bo-fg textarea:focus { border-color:var(--accent); background:var(--surface); }
.bo-form-sec {
  font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase;
  letter-spacing:0.6px; margin-top:8px; padding-bottom:6px;
  border-bottom:1px solid var(--border); grid-column:1/-1;
}

/* Firma Cards */
.bo-firma-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.bo-firma-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:18px; cursor:pointer; transition:all 0.15s;
}
.bo-firma-card:hover { border-color:var(--accent); box-shadow:0 2px 10px rgba(0,0,0,0.07); }
.bo-firma-card.active { border-color:var(--accent); background:var(--accent-s); }
.bo-firma-card-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.bo-firma-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:white; flex-shrink:0; }
.bo-firma-card-name  { font-size:14px; font-weight:600; }
.bo-firma-card-short { font-size:12px; color:var(--text3); margin-top:1px; }
.bo-firma-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:2px; }
.bo-firma-meta-label { font-size:11px; color:var(--text3); }
.bo-firma-meta-val   { font-size:12px; color:var(--text); }
.bo-firma-actions { display:flex; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }

/* Employee Cards */
.bo-emp-card {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:8px;
  cursor:pointer; transition:all 0.12s; margin-bottom:6px;
}
.bo-emp-card:hover { border-color:var(--border2); box-shadow:0 1px 6px rgba(0,0,0,0.06); }
.bo-emp-av { width:38px; height:38px; border-radius:50%; color:white; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bo-emp-info { flex:1; min-width:0; }
.bo-emp-name { font-size:13.5px; font-weight:600; }
.bo-emp-role { font-size:12px; color:var(--text2); margin-top:1px; }
.bo-emp-firmen { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.bo-emp-chip { font-size:10.5px; padding:1px 7px; border-radius:10px; font-weight:500; color:white; }
.bo-emp-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.bo-emp-rate { font-size:13px; font-weight:600; color:var(--accent); }
.bo-emp-type { font-size:11px; color:var(--text3); }

/* USt / Steuerberater */
.bo-ust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.bo-ust-box { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px; }
.bo-ust-label { font-size:11px; color:var(--text3); font-weight:500; text-transform:uppercase; letter-spacing:0.4px; }
.bo-ust-val   { font-size:20px; font-weight:700; margin:5px 0 2px; }
.bo-ust-sub   { font-size:11.5px; color:var(--text2); }
.bo-ust-box.zahllast  .bo-ust-val { color:var(--danger); }
.bo-ust-box.gutschrift .bo-ust-val { color:#2a7a2a; }

/* Period picker */
.bo-period-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.bo-period-bar label { font-size:12.5px; font-weight:500; color:var(--text2); }
.bo-period-sel {
  border:1px solid var(--border); border-radius:6px; padding:5px 10px;
  font-size:13px; font-family:inherit; background:var(--surface); outline:none; cursor:pointer;
}
.bo-period-sel:focus { border-color:var(--accent); }

/* Bar Charts */
.bo-bar-chart { display:flex; flex-direction:column; gap:8px; }
.bo-bar-row { display:flex; align-items:center; gap:10px; }
.bo-bar-label { width:120px; font-size:12px; color:var(--text2); text-align:right; flex-shrink:0; }
.bo-bar-track { flex:1; height:22px; background:var(--bg); border-radius:4px; overflow:hidden; position:relative; border:1px solid var(--border); }
.bo-bar-fill { height:100%; border-radius:3px; display:flex; align-items:center; padding-left:8px; font-size:11px; font-weight:600; color:white; transition:width 0.5s ease; min-width:0; }
.bo-bar-fill.ausgang { background:var(--accent); }
.bo-bar-fill.eingang { background:#cc6644; }
.bo-bar-fill.db      { background:#4a9e4a; }
.bo-bar-val { width:90px; font-size:12.5px; font-weight:600; color:var(--text); text-align:right; flex-shrink:0; }

/* Section Title */
.bo-section-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--border); }

/* Abrechnung form */
.bo-abr-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:16px; }
.bo-pos-row { display:grid; grid-template-columns:1fr 80px 80px 90px 30px; gap:8px; align-items:center; margin-bottom:6px; }
.bo-pos-row input { border:1px solid var(--border); border-radius:5px; padding:5px 8px; font-size:13px; font-family:inherit; outline:none; background:var(--bg); }
.bo-pos-row input:focus { border-color:var(--accent); }
.bo-pos-head { display:grid; grid-template-columns:1fr 80px 80px 90px 30px; gap:8px; font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:8px; }
.bo-pos-del { width:26px; height:26px; border-radius:4px; border:none; background:none; cursor:pointer; color:var(--text3); font-size:15px; display:flex; align-items:center; justify-content:center; }
.bo-pos-del:hover { background:var(--bg); color:var(--danger); }
.bo-inv-total { display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-top:16px; padding-top:12px; border-top:2px solid var(--border); }
.bo-inv-total-row { display:flex; gap:60px; font-size:12.5px; color:var(--text2); }
.bo-inv-total-row.gross { font-size:15px; font-weight:700; color:var(--text); }

/* USt Table */
.bo-ust-section { font-size:12px; font-weight:700; color:var(--text); padding:10px 0 6px; border-bottom:2px solid var(--border); margin-bottom:0; }
tr.bo-ust-total td { font-weight:700 !important; background:var(--accent-s) !important; color:var(--accent) !important; font-size:13.5px; }
tr.bo-ust-zahllast td { font-weight:700 !important; background:#fef0f0 !important; color:var(--danger) !important; font-size:13.5px; }