/* ===================== DESIGN TOKENS =====================
   Hero:  #20957C (Tanne)  — primär, Aktionen, positive Werte
   Rot:   #CF1259 (Beere)  — Warnung, Budgetüberschreitung, negative Deltas
   Basis: Schwarz/Weiß, seriöses Ledger-Layout, tabellarische Zahlen
   ============================================================ */
:root{
  --hero:#20957C;
  --hero-dark:#15705B;
  --hero-tint:#E7F5F1;
  --hero-tint-2:#CFEBE4;
  --red:#CF1259;
  --red-tint:#FBE6EE;
  --red-tint-2:#F6C7D8;
  --ink:#0B0B0C;
  --ink-2:#1C1C1E;
  --muted:#6B6B70;
  --muted-2:#9A9AA0;
  --line:#E3E3E5;
  --line-strong:#C9C9CC;
  --bg:#FFFFFF;
  --bg-alt:#F7F7F8;
  --bg-sunken:#F1F1F2;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "Cascadia Mono", "Consolas", ui-monospace, "Roboto Mono", monospace;
  --radius: 3px;
  --shadow-pop: 0 8px 28px rgba(11,11,12,0.14), 0 2px 6px rgba(11,11,12,0.08);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font-ui); color:var(--ink); background:var(--bg-alt);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
::selection{ background: var(--hero-tint-2); }
a{color:var(--hero-dark);}
button{font-family:inherit;}
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }

/* ===================== APP SHELL ===================== */
#app{ display:grid; grid-template-columns:224px 1fr; grid-template-rows:48px 1fr; height:100vh; }
.topbar{
  grid-column:1/3; grid-row:1; display:flex; align-items:center; gap:14px;
  padding:0 16px; background:var(--ink); color:#fff; border-bottom:1px solid #000;
}
.topbar .brand{ font-weight:700; letter-spacing:0.02em; font-size:14px; display:flex; align-items:center; gap:8px;}
.brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--hero); box-shadow:0 0 0 3px rgba(32,149,124,0.35); }
.topbar .spacer{flex:1;}
.fs-status{ font-size:12px; color:#C9C9CC; display:flex; align-items:center; gap:8px; }
.fs-status .pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:20px; background:#232325; border:1px solid #343436;}
.fs-status .pill.ok{ color:var(--hero-tint-2); border-color:rgba(32,149,124,0.5); }
.fs-status .pill.bad{ color:var(--red-tint-2); border-color:rgba(207,18,89,0.5); }
.fs-status button, .btn-topbar{
  background:transparent; border:1px solid #3A3A3C; color:#fff; padding:5px 10px; border-radius:var(--radius);
  cursor:pointer; font-size:12px;
}
.fs-status button:hover, .btn-topbar:hover{ background:#232325; }

.sidebar{
  grid-column:1; grid-row:2; background:var(--ink); color:#D5D5D7; padding:14px 8px; overflow-y:auto;
  border-right:1px solid #000;
}
.side-group{ margin-bottom:18px; }
.side-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color:#7A7A7E; padding:0 10px; margin-bottom:6px; }
.side-link{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--radius); cursor:pointer;
  font-size:13px; color:#D5D5D7; text-decoration:none; margin-bottom:2px;
}
.side-link svg{ width:15px; height:15px; flex:none; opacity:0.85;}
.side-link:hover{ background:#1F1F21; color:#fff; }
.side-link.active{ background:var(--hero); color:#fff; font-weight:600; }
.side-link.active svg{ opacity:1; }
.side-proj{ font-size:12.5px; padding:6px 10px 6px 22px; color:#B7B7BA; border-radius:var(--radius); cursor:pointer; display:flex; justify-content:space-between; gap:6px;}
.side-proj:hover{ background:#1F1F21; color:#fff;}
.side-proj.active{ background:#2A2A2C; color:#fff; }
.side-proj .st{ width:6px; height:6px; border-radius:50%; flex:none; margin-top:5px; }

.main{ grid-column:2; grid-row:2; overflow-y:auto; padding:22px 26px 60px; }
.view-header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; gap:14px; flex-wrap:wrap;}
.view-header h1{ font-size:20px; margin:0 0 2px; font-weight:700; letter-spacing:-0.01em;}
.view-header .sub{ color:var(--muted); font-size:12.5px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ===================== BUTTONS ===================== */
.btn{
  border:1px solid var(--line-strong); background:#fff; color:var(--ink); padding:7px 13px; border-radius:var(--radius);
  cursor:pointer; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{ border-color:var(--ink); }
.btn.primary{ background:var(--hero); border-color:var(--hero); color:#fff; }
.btn.primary:hover{ background:var(--hero-dark); border-color:var(--hero-dark); }
.btn.danger{ background:#fff; border-color:var(--red-tint-2); color:var(--red); }
.btn.danger:hover{ background:var(--red-tint); border-color:var(--red); }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.btn.ghost:hover{ background:var(--bg-sunken); color:var(--ink); }
.btn.small{ padding:4px 9px; font-size:11.5px; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }
.icon-btn{ border:none; background:transparent; cursor:pointer; color:var(--muted); padding:4px 6px; border-radius:var(--radius); }
.icon-btn:hover{ background:var(--bg-sunken); color:var(--ink); }

/* ===================== CARDS / PANELS ===================== */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.card + .card{ margin-top:14px; }
.grid{ display:grid; gap:14px; }
.grid.cols-2{ grid-template-columns:1fr 1fr; }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }

/* KPI ledger strip */
.kpi-row{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; }
.kpi{ padding:13px 16px; border-right:1px solid var(--line); }
.kpi:last-child{ border-right:none; }
.kpi .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); margin-bottom:6px; }
.kpi .value{ font-size:21px; font-weight:700; font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.kpi .delta{ font-size:11.5px; margin-top:4px; font-family:var(--font-num); }
.kpi .delta.pos{ color:var(--hero-dark); }
.kpi .delta.neg{ color:var(--red); }
.kpi .delta.neu{ color:var(--muted); }

/* Progress bars */
.pbar{ height:7px; background:var(--bg-sunken); border-radius:20px; overflow:hidden; position:relative; }
.pbar > div{ height:100%; background:var(--hero); border-radius:20px; }
.pbar.over > div{ background:var(--red); }
.pbar-row{ display:flex; align-items:center; gap:10px; }
.pbar-row .pbar{ flex:1; }
.pbar-row .pct{ font-family:var(--font-num); font-size:12px; width:40px; text-align:right; flex:none; }

/* Tables */
table.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.tbl th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
  border-bottom:1px solid var(--line-strong); padding:8px 10px; font-weight:600; white-space:nowrap; cursor:pointer; user-select:none;
}
table.tbl th.sorted::after{ content:" ▾"; color:var(--hero); }
table.tbl td{ padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl tbody tr:hover{ background:var(--bg-alt); }
table.tbl td.num, table.tbl th.num{ text-align:right; font-family:var(--font-num); }
table.tbl tfoot td{ font-weight:700; border-top:2px solid var(--ink); border-bottom:none; }
.table-wrap{ overflow-x:auto; }

/* Badges / status */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap;}
.badge.st-akquise{ background:#EFEFF0; color:#55555A; }
.badge.st-vorbereitung{ background:#EAF0FE; color:#2452C4; }
.badge.st-laufend{ background:var(--hero-tint); color:var(--hero-dark); }
.badge.st-onhold{ background:#FDF3D9; color:#8A6A00; }
.badge.st-abgeschlossen{ background:#EDEDED; color:#3A3A3C; }
.badge.type-auftrag{ background:var(--hero-tint); color:var(--hero-dark); }
.badge.type-nachtrag{ background:#EAF0FE; color:#2452C4; }
.badge.budget-pauschal{ background:#F1EAFE; color:#6B2FC4; }
.badge.budget-stunden{ background:var(--bg-sunken); color:var(--ink-2); }
.badge.dup{ background:var(--red-tint); color:var(--red); }
.badge.new{ background:var(--hero-tint); color:var(--hero-dark); }

.tag-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.tag-dot.st-akquise{ background:#9A9AA0; }
.tag-dot.st-vorbereitung{ background:#2452C4; }
.tag-dot.st-laufend{ background:var(--hero); }
.tag-dot.st-onhold{ background:#C8960A; }
.tag-dot.st-abgeschlossen{ background:#8A8A8E; }

/* Tabs */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tab{ padding:9px 14px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--ink); border-bottom-color:var(--hero); }

/* Forms */
.field{ margin-bottom:12px; display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:11.5px; font-weight:600; color:var(--ink-2); }
.field .hint{ font-size:11px; color:var(--muted); font-weight:400; }
.field input[type=text], .field input[type=number], .field input[type=date], .field select, .field textarea, .field input[type=file]{
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:7px 9px; font-size:13px; font-family:inherit; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--hero-tint-2); border-color:var(--hero); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field-row.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.checkline{ display:flex; align-items:center; gap:7px; font-size:12.5px; }
fieldset{ border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin:0 0 12px; }
legend{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); padding:0 4px; }
.role-budget-row{ display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr auto; gap:8px; align-items:center; margin-bottom:6px; font-size:12.5px; }
.repeat-row{ display:flex; gap:8px; align-items:flex-end; margin-bottom:8px; }
.repeat-row .field{ flex:1; margin-bottom:0; }

/* Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(11,11,12,0.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:100; }
.modal{ background:#fff; border-radius:6px; width:560px; max-width:100%; box-shadow:var(--shadow-pop); }
.modal.wide{ width:820px; }
.modal-head{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-head h3{ margin:0; font-size:15px; }
.modal-body{ padding:18px 20px; max-height:70vh; overflow-y:auto; }
.modal-foot{ padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }

/* Toast */
#toast-host{ position:fixed; bottom:18px; right:18px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.toast{ background:var(--ink); color:#fff; padding:10px 14px; border-radius:var(--radius); font-size:12.5px; box-shadow:var(--shadow-pop); border-left:3px solid var(--hero); }
.toast.err{ border-left-color:var(--red); }

/* Empty state */
.empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.empty .icon{ font-size:28px; margin-bottom:8px; }
.empty .title{ font-weight:700; color:var(--ink); font-size:13.5px; margin-bottom:4px; }

/* Charts */
.chart-legend{ display:flex; gap:16px; font-size:11.5px; color:var(--muted); margin-bottom:6px; }
.chart-legend span{ display:inline-flex; align-items:center; gap:5px; }
.chart-legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; }
.seg-toggle{ display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; }
.seg-toggle button{ border:none; background:#fff; padding:6px 12px; font-size:12px; cursor:pointer; color:var(--muted); }
.seg-toggle button.active{ background:var(--ink); color:#fff; }
.seg-toggle button + button{ border-left:1px solid var(--line-strong); }

.helpbox{ background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; font-size:11.5px; color:var(--muted); margin-bottom:14px; }
.helpbox b{ color:var(--ink-2); }

.import-row.excluded{ opacity:0.42; }
.import-row td{ font-size:12px; }
.small-muted{ color:var(--muted); font-size:11.5px; }

@media (max-width: 900px){
  #app{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
}

/* ===================== PRINT REPORT (A4) ===================== */
#printReport{ display:none; }
.rpt-page{ width:190mm; margin:0 auto; font-family:var(--font-ui); color:var(--ink); }
.rpt-head{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:14px; }
.rpt-head h1{ font-size:19px; margin:0 0 2px; }
.rpt-head .sub{ font-size:11px; color:var(--muted); }
.rpt-head .meta{ text-align:right; font-size:11px; color:var(--muted); }
.rpt-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); margin-bottom:14px; }
.rpt-kpis .k{ padding:8px 10px; border-right:1px solid var(--line); }
.rpt-kpis .k:last-child{ border-right:none; }
.rpt-kpis .k .l{ font-size:8.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:4px; }
.rpt-kpis .k .v{ font-size:15px; font-weight:700; font-family:var(--font-num); }
.rpt-section{ margin-bottom:14px; }
.rpt-section h2{ font-size:12px; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--line-strong); padding-bottom:4px; margin:0 0 8px; }
.rpt-table{ width:100%; border-collapse:collapse; font-size:10px; }
.rpt-table th{ text-align:left; font-size:8.5px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--ink); padding:4px 6px; }
.rpt-table td{ padding:4px 6px; border-bottom:1px solid var(--line); }
.rpt-table td.num, .rpt-table th.num{ text-align:right; font-family:var(--font-num); }
.rpt-bar{ height:5px; background:var(--bg-sunken); border-radius:10px; overflow:hidden; }
.rpt-bar > div{ height:100%; background:var(--hero); }
.rpt-bar.over > div{ background:var(--red); }
.rpt-foot{ margin-top:10px; font-size:9px; color:var(--muted); text-align:right; }

@media print{
  @page{ size: A4; margin: 12mm; }
  body *{ visibility:hidden; }
  #printReport, #printReport *{ visibility:visible; }
  #printReport{ display:block; position:absolute; top:0; left:0; width:100%; }
}