@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg:       #f5f4f0;
  --surface:  #ffffff;
  --surface2: #f0efe9;
  --border:   #e2e0d8;
  --border2:  #ccc9bc;
  --text:     #1a1916;
  --text2:    #6b6860;
  --text3:    #9e9b91;
  --green:    #1a5c2a;
  --green-bg: #e8f4ec;
  --red:      #8c1f1f;
  --red-bg:   #faeaea;
  --amber:    #7a4a0a;
  --amber-bg: #fdf3e3;
  --blue:     #1a3d6b;
  --blue-bg:  #e8f0fb;
  --accent:   #2d5a1b;
}

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

body { font-family: 'IBM Plex Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; }

/* ── Header ── */
header { background: var(--text); color: #f5f4f0; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header h1 { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.header-right { display: flex; align-items: center; gap: 1rem; }
.month-badge { font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: rgba(255,255,255,0.1); color: #f5f4f0; padding: 3px 10px; border-radius: 100px; border: 0.5px solid rgba(255,255,255,0.2); }

/* ── Container ── */
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 2rem; }

/* ── Upload ── */
.dropzone { border: 1.5px dashed var(--border2); border-radius: 8px; padding: 1.5rem 2rem; text-align: center; cursor: pointer; transition: all 0.15s; background: var(--surface); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
.dropzone:hover, .dropzone.drag { background: var(--surface2); border-color: var(--accent); }
.dropzone input { display: none; }
.dropzone .icon { font-family: 'IBM Plex Mono', monospace; font-size: 22px; color: var(--text3); flex-shrink: 0; }
.dropzone-text h2 { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.dropzone-text p { font-size: 12px; color: var(--text2); }

/* ── Monatsliste ── */
.monatsliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
.jahr-gruppe { margin-bottom: 0.5rem; }
.jahr-heading { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.75rem 0 0.4rem; border-top: 1px solid var(--border); margin-bottom: 0.5rem; }
.monat-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 6px; }
.monat-card:hover { border-color: var(--accent); background: var(--green-bg); }
.monat-card-top { display: flex; justify-content: space-between; align-items: center; }
.monat-name { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; color: var(--accent); }
.monat-meta { font-size: 11px; color: var(--text3); display: flex; gap: 8px; }
.monat-tag { background: var(--surface2); border: 0.5px solid var(--border); border-radius: 4px; padding: 1px 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
.monat-tag.ok { background: var(--green-bg); border-color: #a3d4ac; color: var(--green); }
.monat-tag.warn { background: var(--amber-bg); border-color: #e8c97a; color: var(--amber); }
.monat-links { display: flex; gap: 6px; }
.monat-link { font-size: 11px; color: var(--blue); text-decoration: none; }
.monat-link:hover { text-decoration: underline; }

/* ── Jahresabschluss-Karte (pro Jahres-Gruppe in der Übersicht) ── */
.jahr-abschluss-card { grid-column: 1 / -1; background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 8px; margin-top: 0.25rem; }
.jahr-abschluss-card.abgeschlossen { border-color: #a3d4ac; background: var(--green-bg); }
.jahr-abschluss-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.jahr-abschluss-titel { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; color: var(--accent); }
.jahr-abschluss-sub { font-size: 11px; color: var(--text3); }
.jahr-abschluss-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; font-size: 12px; }
.jahr-abschluss-metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin-bottom: 2px; }
.jahr-abschluss-metric-wert { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--text); }
.jahr-abschluss-metric-wert.neutral { color: var(--text3); }
.jahr-abschluss-metric-wert.warn    { color: var(--red); }
.jahr-abschluss-metric-wert.ok      { color: var(--green); }
.jahr-abschluss-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jahr-abschluss-actions a { font-size: 11px; color: var(--blue); text-decoration: none; cursor: pointer; }
.jahr-abschluss-actions a:hover { text-decoration: underline; }
.jahr-abschluss-btn { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; padding: 5px 11px; border-radius: 6px; border: 0.5px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.jahr-abschluss-btn:hover { filter: brightness(1.1); }
.jahr-abschluss-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Inline-Details-Akkordion — wird unter der Jahres-Karte aufgeklappt und
   nutzt die volle Container-Breite (1100px), damit alle Zahlen-Spalten
   nebeneinander lesbar bleiben. Kein Modal-Overlay. */
.jahr-abschluss-details { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.jahr-abschluss-card.expanded { background: var(--surface); }
.ja-block { margin-bottom: 0.5rem; }
.ja-block-titel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin-bottom: 0.4rem; }
.ja-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ja-tbl th, .ja-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.ja-tbl th { font-weight: 500; color: var(--text2); font-size: 11px; }
.ja-tbl td.num { font-family: 'IBM Plex Mono', monospace; text-align: right; white-space: nowrap; }
.ja-tbl th { white-space: nowrap; }
.ja-tbl tr.offen td.status { color: var(--amber); }
.ja-tbl tr.bezahlt td.status { color: var(--green); }
.ja-tbl td.delta-neg { color: var(--red); font-family: 'IBM Plex Mono', monospace; text-align: right; white-space: nowrap; }
.ja-tbl td.delta-pos { color: var(--amber); font-family: 'IBM Plex Mono', monospace; text-align: right; white-space: nowrap; }
.ja-reco { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 10px; background: var(--surface2); border-radius: 6px; }
.ja-reco-wert { font-family: 'IBM Plex Mono', monospace; font-size: 16px; white-space: nowrap; }
.ja-kz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 12px; }
.ja-kz-grid .kz-label { color: var(--text2); }
.ja-kz-grid .kz-wert { font-family: 'IBM Plex Mono', monospace; text-align: right; }
.ja-snapshot-hint { font-size: 11px; color: var(--text3); margin-top: 0.4rem; font-style: italic; }
.ja-details-footer { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 0.5rem; border-top: 1px solid var(--border); }

/* ── Übersicht-Tabs ── */
.ueb-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.ueb-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; margin-bottom: -1px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color 0.15s, border-color 0.15s; }
.ueb-tab:hover { color: var(--text); }
.ueb-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.ueb-tab-badge { font-family: 'IBM Plex Mono', monospace; font-size: 10px; background: var(--amber-bg); color: var(--amber); border: 0.5px solid #e8c97a; border-radius: 100px; padding: 1px 7px; min-width: 20px; text-align: center; display: none; margin-left: 3px; }
.ueb-tab-badge.active { display: inline-block; }
/* Rote Variante für Steuertermine: überfällig oder ≤ 7 Tage bis Fälligkeit.
   Gelb (Default) = 8–14 Tage. */
.ueb-tab-badge.rot { background: var(--red-bg); color: var(--red); border-color: #e8a0a0; }
.ueb-back-bar { border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; padding: 8px 0; }
.ueb-back-bar a { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: var(--text2); text-decoration: none; padding: 4px 0; transition: color 0.15s; }
.ueb-back-bar a:hover { color: var(--accent); }

/* ── Offene Belege (Akkordeon) ── */
.ob-monat { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.ob-head { display: flex; align-items: center; gap: 12px; padding: 0.65rem 1rem; cursor: pointer; transition: background 0.1s; }
.ob-head:hover { background: var(--surface2); }
.ob-monat.open .ob-head { background: var(--surface2); border-bottom: 0.5px solid var(--border); }
.ob-chev { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text3); width: 10px; transition: transform 0.15s; flex-shrink: 0; }
.ob-monat.open .ob-chev { transform: rotate(90deg); }
.ob-name { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent); flex: 1; }
.ob-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: var(--amber-bg); color: var(--amber); border: 0.5px solid #e8c97a; border-radius: 100px; padding: 1px 8px; }
.ob-open-link { font-size: 11px; color: var(--blue); background: none; border: 0.5px solid var(--border2); border-radius: 4px; padding: 2px 8px; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; }
.ob-open-link:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.ob-body { display: none; }
.ob-monat.open .ob-body { display: block; }
.ob-loading { padding: 0.7rem 1rem; color: var(--text3); font-size: 12px; font-style: italic; }
.ob-empty { padding: 0.7rem 1rem; color: var(--text3); font-size: 12px; font-style: italic; }
.ob-table { width: 100%; table-layout: auto; }
.ob-table td { padding: 5px 1rem; border-bottom: 0.5px solid var(--border); font-size: 12px; vertical-align: middle; }
.ob-table tr:last-child td { border-bottom: none; }
.ob-date { color: var(--text2); font-family: 'IBM Plex Mono', monospace; width: 95px; white-space: nowrap; }
.ob-amount { text-align: right; font-family: 'IBM Plex Mono', monospace; color: var(--red); width: 105px; white-space: nowrap; }
.ob-cat-tag { background: var(--surface2); border: 0.5px solid var(--border); border-radius: 3px; padding: 0 5px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text2); margin-left: 4px; }

/* ── Skeleton / Loader ── */
.skeleton { background: var(--surface2); border-radius: 4px; animation: pulse 1.2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.loading-monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
.skel-card { height: 80px; border-radius: 8px; }

/* Spinner-Overlay — wird mit kurzer Verzögerung eingeblendet, damit Worker-
   Cache-HITs (~100 ms) nicht flackern und nur bei MISS / Apps-Script-Roundtrip
   sichtbar wird. */
.loading-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 4rem 1rem; color: var(--text3); font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.06em; }
.spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Detailansicht ── */
#detail { display: none; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; justify-content: space-between; align-items: center; }
.toolbar-left { display: flex; gap: 8px; }
.toolbar-right { display: flex; gap: 8px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0.5px solid var(--border2); border-radius: 6px; background: var(--surface); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; cursor: pointer; transition: background 0.1s; white-space: nowrap; }
.btn:hover { background: var(--surface2); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary:hover { background: #333; }
.btn.success { background: var(--green-bg); border-color: #a3d4ac; color: var(--green); }
#btnSheet.dirty { background: var(--red-bg); border-color: #e8a0a0; color: var(--red); font-weight: 600; }
#btnSheet.dirty:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn.sm { padding: 0 8px; font-size: 12px; height: 26px; line-height: 26px; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; }

/* ── Metriken ── */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.metric { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; }
.metric-label { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.metric-value { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 500; }
.metric-sub { font-size: 11px; color: var(--text3); margin-top: 4px; font-family: 'IBM Plex Mono', monospace; }
.metric.danger .metric-value { color: var(--red); }
.metric.success .metric-value { color: var(--green); }

/* ── Kunden ── */
.clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1.5rem; }
.client-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 0.875rem 1rem; }
.client-name { font-size: 11px; color: var(--text2); margin-bottom: 4px; }
.client-brutto { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 500; color: var(--green); }
.client-netto { font-size: 11px; color: var(--text3); font-family: 'IBM Plex Mono', monospace; margin-top: 2px; }

/* ── Tabelle ── */
.card { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; overflow: hidden; }
.section { margin-bottom: 1.5rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-title { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; }

table { width: 100%; border-collapse: collapse; table-layout: fixed; }
thead tr { background: var(--surface2); }
th { padding: 8px 10px; text-align: left; font-size: 10px; font-weight: 500; color: var(--text2); border-bottom: 0.5px solid var(--border); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.05em; }
td { padding: 6px 10px; border-bottom: 0.5px solid var(--border); font-size: 13px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }
td.num, th.num { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.manuell-row td { background: #f0f8ff !important; }
.warning-row td { background: #fffbf0 !important; }
/* Split-Parent-Zeile wird halbtransparent, damit man sie visuell von den
   Split-Teilen unterscheidet. Die Beleg-Spalte bleibt aber voll sichtbar —
   die Original-Rechnung deckt alle Split-Teile ab und gehört dort normal
   verwaltet (Upload, Eigenbeleg, Löschen). */
.split-row td { opacity: 0.45; }
.split-row td.tx-beleg { opacity: 1; }
.split-row .tx-detail-row td .beleg-btn,
.split-row + .tx-detail-row td .beleg-btn { opacity: 1; }

/* Drop-Feedback beim Drag eines PDFs über eine Upload-fähige Zeile.
   Der Copy-Cursor setzt sich beim Drag automatisch via dataTransfer.dropEffect;
   hier braucht's nur den visuellen Row-Highlight. */
tr[data-can-upload].row-drop-active td { background: var(--green-bg) !important; box-shadow: inset 0 0 0 1px var(--accent); opacity: 1; }
.split-icon { background:none; border:none; cursor:pointer; padding:2px 3px; color:var(--blue); margin-left:3px; vertical-align:middle; opacity:0.75; line-height:1; display:inline-flex; align-items:center; }
.split-icon:hover { opacity:1; }
td.tx-cat { white-space:nowrap; }
td.tx-cat select { max-width:128px; }
.tx-detail-row { display:none; }
.tx-detail-row > td { border-top:0 !important; padding:3px 10px 7px !important; background:var(--surface2) !important; }
.tx-detail-inner { display:flex; align-items:center; gap:6px; font-size:12px; }

select { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; padding: 0 5px; border: 0.5px solid var(--border2); border-radius: 4px; background: var(--surface); color: var(--text); cursor: pointer; height: 26px; line-height: 26px; box-sizing: border-box; vertical-align: middle; appearance: auto; }

/* ── Beleg-Button ── */
.beleg-btn { background: none; border: 0.5px solid var(--border2); border-radius: 4px; padding: 0 8px; font-size: 12px; font-family: 'IBM Plex Mono', monospace; cursor: pointer; color: var(--text2); transition: all 0.1s; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; height: 26px; line-height: 26px; box-sizing: border-box; vertical-align: middle; }
.beleg-btn:hover { background: var(--surface2); border-color: var(--accent); color: var(--accent); }
.beleg-btn.done { background: var(--green-bg); border-color: #a3d4ac; color: var(--green); }
.beleg-btn.loading { opacity: 0.5; pointer-events: none; }

/* ── Elster ── */
.elster-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 1.25rem; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.elster-row:last-child { border-bottom: none; }
.elster-row.total { background: var(--surface2); }
.kz { display: inline-block; background: var(--blue-bg); color: var(--blue); border-radius: 3px; padding: 1px 6px; font-size: 11px; font-weight: 500; font-family: 'IBM Plex Mono', monospace; margin-right: 8px; }
.zahllast { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 500; color: var(--red); }

/* ── Toast ── */
.toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--text); color: #f5f4f0; padding: 10px 20px; border-radius: 6px; font-size: 13px; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 200; white-space: nowrap; }
.toast.visible { opacity: 1; }
.toast.err { background: #8c1f1f; }

/* ── Hinweise ── */
.hint { border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 1rem; display: none; }
.hint.visible { display: block; }
.hint.warn { background: var(--amber-bg); border: 0.5px solid #e8c97a; color: var(--amber); }
.hint.info { background: var(--blue-bg); border: 0.5px solid #a3bcdf; color: var(--blue); }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; display: none; align-items: center; justify-content: center; }
.modal-overlay.visible { display: flex; }
.modal { background: var(--surface); border-radius: 10px; padding: 1.5rem; width: 420px; max-width: 95vw; border: 0.5px solid var(--border); }
.modal h2 { font-size: 15px; font-weight: 500; margin-bottom: 1.25rem; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.form-group input, .form-group select { width: 100%; padding: 6px 10px; border: 0.5px solid var(--border2); border-radius: 6px; background: var(--surface); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; }
/* Selects in Modal-Dialogen brauchen eine auto-Höhe — der globale kompakte
   Select-Style (26px, für die Transaktions-Tabelle) schneidet sonst den Text
   ab und macht das Dropdown kaum lesbar. */
.form-group select { height: auto; line-height: 1.4; }
.form-group input:focus, .form-group select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1.25rem; }

/* ── Override-Dialog ── */
.override-hint { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* ── UStVA Status-Bar ── */
.ustva-bar { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.25rem; display: none; gap: 12px; flex-wrap: wrap; align-items: center; }
.ustva-bar.visible { display: flex; }
.ustva-bar label { font-size: 12px; color: var(--text2); white-space: nowrap; }
.ustva-status-s { padding: 5px 10px; border: 0.5px solid var(--border2); border-radius: 6px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; background: var(--surface); color: var(--text); cursor: pointer; }
.ustva-notiz { flex: 1; min-width: 160px; padding: 5px 10px; border: 0.5px solid var(--border2); border-radius: 6px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; background: var(--surface); color: var(--text); }
.ustva-datum { padding: 5px 10px; border: 0.5px solid var(--border2); border-radius: 6px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; background: var(--surface); color: var(--text); }

/* ── Kategorie-Filter ── */
.cat-filter-wrap { position: relative; }
.cat-filter-popover { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 0.5px solid var(--border2); border-radius: 8px; padding: 6px 0; min-width: 190px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 50; display: none; }
.cat-filter-popover.open { display: block; }
.cat-filter-item { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 13px; cursor: pointer; user-select: none; }
.cat-filter-item:hover { background: var(--surface2); }
.cat-filter-item input[type=checkbox] { cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.cat-filter-sep { height: 0.5px; background: var(--border); margin: 4px 0; }
.cat-filter-actions { display: flex; gap: 6px; padding: 4px 10px 2px; }
.cat-filter-badge { font-family: 'IBM Plex Mono', monospace; font-size: 10px; background: var(--amber-bg); color: var(--amber); border: 0.5px solid #e8c97a; border-radius: 100px; padding: 1px 6px; display: none; }
.cat-filter-badge.active { display: inline; }

/* ── Netto/USt optionale Spalten ── */
th.tx-netto-col, td.tx-netto-col,
th.tx-ust-col,   td.tx-ust-col   { display: none; }
table.show-netto-ust th.tx-netto-col,
table.show-netto-ust td.tx-netto-col,
table.show-netto-ust th.tx-ust-col,
table.show-netto-ust td.tx-ust-col { display: table-cell; }
/* Etwas kleinere Schrift + nowrap, damit vierstellige EUR-Beträge wie
   "1.543,75 €" nicht zwischen Zahl und Euro-Zeichen umbrechen. */
table.show-netto-ust td.tx-netto-col,
table.show-netto-ust td.tx-ust-col  { font-size: 10px; white-space: nowrap; padding: 6px 6px; }
.col-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2); cursor: pointer; user-select: none; white-space: nowrap; }
.col-toggle input[type=checkbox] { cursor: pointer; accent-color: var(--accent); width: 13px; height: 13px; }

/* ── Hilfe-Panel ── */
.help-btn { background: none; border: 0.5px solid rgba(255,255,255,0.3); color: #f5f4f0; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.help-btn:hover { background: rgba(255,255,255,0.15); }
.help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 150; display: none; }
.help-overlay.open { display: block; }
.help-panel { position: fixed; top: 0; right: 0; height: 100dvh; width: 380px; max-width: 100vw; background: var(--surface); border-left: 0.5px solid var(--border2); box-shadow: -4px 0 32px rgba(0,0,0,0.12); z-index: 151; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); padding: 1.25rem 1.5rem 2rem; }
.help-panel.open { transform: translateX(0); }
.help-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.help-panel-header h3 { font-size: 14px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: var(--accent); }
.help-cat-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; table-layout: auto; }
.help-cat-table th { padding: 6px 8px; text-align: left; font-size: 10px; font-weight: 500; color: var(--text2); border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface2); }
.help-cat-table td { padding: 6px 8px; border-bottom: 0.5px solid var(--border); font-size: 12px; vertical-align: top; line-height: 1.4; }
.help-cat-table tr:last-child td { border-bottom: none; }
.help-cat-table code { font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: var(--blue-bg); color: var(--blue); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.help-section-title { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; font-family: 'IBM Plex Mono', monospace; }
.help-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.help-list li { font-size: 13px; line-height: 1.5; padding: 8px 10px; background: var(--surface2); border-radius: 6px; border: 0.5px solid var(--border); }

/* ── Einstellungen (Config-Tab) ── */
.set-section { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.set-section h3 { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'IBM Plex Mono', monospace; margin-bottom: 0.75rem; }
.set-global-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; }
.set-field { display: flex; flex-direction: column; gap: 4px; }
.set-field label { font-size: 11px; color: var(--text2); font-family: 'IBM Plex Mono', monospace; }
.set-field input, .set-field select { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; padding: 5px 7px; border: 0.5px solid var(--border2); border-radius: 4px; background: var(--surface); color: var(--text); }
.set-field input:focus, .set-field select:focus { outline: none; border-color: var(--accent); }
.set-field input:disabled, .set-field select:disabled { opacity: 0.5; cursor: wait; }

/* width: auto statt 100% → Tabelle ist so breit wie die Summe der Spalten-
   Breiten (~740px). Vorher streckte der Browser alle Spalten proportional
   auf 100% des Containers, was die Fälligkeits-Spalte unnötig breit machte. */
.set-jahre-table { width: auto; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.set-jahre-table th { text-align: left; padding: 6px 10px; font-size: 10px; font-weight: 500; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', monospace; background: var(--surface2); }
.set-jahre-table td { padding: 8px 10px; border-bottom: 0.5px solid var(--border); vertical-align: top; overflow: hidden; }
.set-jahre-table tr:last-child td { border-bottom: none; }
.set-jahre-table .set-col-jahr { font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: var(--accent); width: 56px; }
.set-jahre-table .set-col-modus { width: 100px; }
.set-jahre-table .set-col-check { text-align: center; width: 95px; }
.set-jahre-table .set-col-bank { width: 115px; }
.set-jahre-table .set-col-faellig { width: 280px; }

.set-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 1rem; }
.set-section-head h3 { margin-bottom: 0; }
.set-new-year-btn { background: var(--accent); color: #fff; border: 0.5px solid var(--accent); border-radius: 6px; padding: 5px 12px; font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; cursor: pointer; white-space: nowrap; }
.set-new-year-btn:hover { background: #244a15; }
.set-new-year-btn:disabled { opacity: 0.5; cursor: default; }
.set-jahre-table select, .set-jahre-table input[type="checkbox"] { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; padding: 3px 5px; border: 0.5px solid var(--border2); border-radius: 4px; background: var(--surface); color: var(--text); }
.set-jahre-table select:focus { outline: none; border-color: var(--accent); }
.set-jahre-table select:disabled, .set-jahre-table input[type="checkbox"]:disabled { opacity: 0.5; cursor: wait; }
.set-row-unvollstaendig { background: var(--amber-bg); border-left: 3px solid #e8c97a; }
.set-row-unvollstaendig .set-col-jahr { color: var(--amber); }
.set-preview-placeholder { color: var(--amber); font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-style: italic; }
.set-hinweis { font-size: 12px; color: var(--text2); margin-bottom: 0.75rem; line-height: 1.4; }
.set-save-note { font-size: 11px; color: var(--text3); font-style: italic; margin-top: 0.5rem; }
.set-faellig-vorschau { display: flex; flex-direction: column; gap: 2px; }
.set-faellig-zeile { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; line-height: 1.7; }
.set-faellig-zeile span:first-child { color: var(--text2); flex: 1; min-width: 0; }
.set-faellig-zeile span:last-child { color: var(--text); white-space: nowrap; }
.set-preview-loading { color: var(--text3); font-size: 11px; font-style: italic; }
.set-preview-error { color: var(--red); font-size: 11px; font-style: italic; }

/* ── Steuertermine-Reiter ── */
.termine-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 1rem; flex-wrap: wrap; }
.termine-filter { font-size: 12px; color: var(--text2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; }
.termine-filter input { cursor: pointer; }
.termine-buttons { display: inline-flex; gap: 8px; align-items: center; }

/* ── Kalender-Abo-Modal ── */
.kalender-abo-modal { width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
.kalender-abo-modal h2 { margin-bottom: 1rem; }
.kalender-abo-hint { font-size: 13px; color: var(--text2); line-height: 1.55; margin-bottom: 1rem; }
.kalender-abo-hint strong { color: var(--text); }
.kalender-abo-url-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 0.5rem; }
.kalender-abo-url { flex: 1; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 8px 10px; background: var(--surface2); border: 0.5px solid var(--border); border-radius: 4px; word-break: break-all; color: var(--text); user-select: all; }
.kalender-abo-subhint { font-size: 11px; color: var(--text3); margin: 0 0 0.75rem 0; line-height: 1.5; }
.kalender-abo-subhint strong { color: var(--text2); }
.kalender-abo-links { margin-bottom: 1rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kalender-abo-links a { text-decoration: none; }
.kalender-abo-details { margin-bottom: 0.5rem; }
.kalender-abo-details summary { font-size: 12px; color: var(--text2); cursor: pointer; padding: 4px 0; user-select: none; }
.kalender-abo-details summary:hover { color: var(--text); }
.kalender-abo-details ul { margin: 0.5rem 0 0.5rem 1.25rem; font-size: 12px; color: var(--text2); line-height: 1.6; }
.kalender-abo-details ul strong { color: var(--text); }

.termin-jahr-gruppe { margin-bottom: 1rem; }
.termin-jahr-heading { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.75rem 0 0.4rem; border-top: 1px solid var(--border); margin-bottom: 0.5rem; font-family: 'IBM Plex Mono', monospace; }

/* Card-Wrapper wie die Detail-Transaktions-Tabelle: ein umschließendes
   Rechteck mit abgerundeten Ecken, darin die einzelnen Zeilen durch simple
   Border-Bottoms getrennt. Verhindert den Layout-Shift zwischen Steuertermine-
   Reiter und Detail-Ansicht — beide haben jetzt dasselbe Außenmaß. */
.termin-gruppe-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; overflow: hidden; }
.termin-row { display: grid; grid-template-columns: 110px 1fr 90px 100px 88px; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; transition: background 0.1s; font-size: 13px; border-bottom: 0.5px solid var(--border); }
.termin-row:last-child { border-bottom: none; }
.termin-row:hover { background: var(--surface2); }
.termin-row-bezahlt { opacity: 0.65; }

.termin-kategorie { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; text-align: center; background: var(--surface2); color: var(--text2); border: 0.5px solid var(--border); white-space: nowrap; }
.termin-kategorie.kat-ustva             { background: #e8f0fb; color: var(--blue); border-color: #c6d8ef; }
.termin-kategorie.kat-est_vz            { background: #f3ebe2; color: #7a4a0a; border-color: #dcc9a8; }
.termin-kategorie.kat-est_vz_sonder     { background: #f3ebe2; color: #7a4a0a; border-color: #dcc9a8; }
.termin-kategorie.kat-dauerfrist        { background: #eee8f5; color: #553a72; border-color: #d4c8e2; }
.termin-kategorie.kat-dauerfrist_sonder { background: #eee8f5; color: #553a72; border-color: #d4c8e2; }
.termin-kategorie.kat-ust_jahr          { background: #e2efe6; color: var(--green); border-color: #b5cdba; }
.termin-kategorie.kat-est_jahr          { background: #e2efe6; color: var(--green); border-color: #b5cdba; }
.termin-kategorie.kat-nachzahlung       { background: var(--red-bg); color: var(--red); border-color: #e5b4b4; }
.termin-kategorie.kat-saumniszuschlag   { background: var(--red-bg); color: var(--red); border-color: #e5b4b4; }

.termin-beschreibung { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termin-faellig { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text2); }
.termin-betrag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text); text-align: right; }

.termin-pill { font-family: 'IBM Plex Mono', monospace; font-size: 10px; padding: 2px 8px; border-radius: 100px; text-align: center; }
.termin-pill.pill-bezahlt      { background: var(--green-bg); color: var(--green); }
.termin-pill.pill-ueberfaellig { background: var(--red-bg); color: var(--red); font-weight: 500; }
.termin-pill.pill-kritisch     { background: var(--red-bg); color: var(--red); }
.termin-pill.pill-bald         { background: var(--amber-bg); color: var(--amber); }
.termin-pill.pill-offen        { background: var(--surface2); color: var(--text3); }

/* Termin-Edit-Modal */
.termin-modal { width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
.termin-edit-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface2); border-radius: 6px; margin-bottom: 1rem; font-size: 12px; }
.termin-edit-besch { font-family: 'IBM Plex Mono', monospace; font-size: 13px; flex: 1; }
.termin-edit-faellig { font-family: 'IBM Plex Mono', monospace; color: var(--text3); font-size: 12px; }
.termin-edit-hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0 0.75rem; }
.termin-edit-bezahlt-row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.termin-ustva-hint { background: var(--blue-bg); color: var(--blue); border: 0.5px solid #c6d8ef; border-radius: 6px; padding: 8px 10px; font-size: 12px; margin: 0.5rem 0 1rem; line-height: 1.4; }

@media (max-width: 700px) {
  .termin-row { grid-template-columns: 1fr auto; gap: 6px; font-size: 12px; padding: 8px 10px; }
  .termin-row .termin-kategorie { grid-column: 1; grid-row: 1; justify-self: start; }
  .termin-row .termin-pill { grid-column: 2; grid-row: 1; justify-self: end; }
  .termin-row .termin-beschreibung { grid-column: 1 / 3; grid-row: 2; }
  .termin-row .termin-faellig { grid-column: 1; grid-row: 3; }
  .termin-row .termin-betrag { grid-column: 2; grid-row: 3; text-align: right; }
}

/* ── Wizard: Neues Jahr einrichten ── */
.wizard-modal { width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
.wizard-modal h2 { display: flex; align-items: baseline; gap: 0.75rem; }
.wiz-step { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text3); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
.wiz-hinweis { font-size: 12px; color: var(--text2); margin-bottom: 1rem; line-height: 1.5; }
.wiz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.75rem 1rem; margin-bottom: 0.5rem; }
.wiz-field { display: flex; flex-direction: column; gap: 4px; }
.wiz-field > label { font-size: 11px; color: var(--text2); font-family: 'IBM Plex Mono', monospace; }
.wiz-field select { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; padding: 5px 7px; border: 0.5px solid var(--border2); border-radius: 4px; background: var(--surface); color: var(--text); }
.wiz-field-check > label { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: var(--text); text-transform: none; letter-spacing: 0; }
.wiz-help { font-size: 11px; color: var(--text3); font-style: italic; }

.wiz-gruppe { border: 0.5px solid var(--border); border-radius: 6px; margin-bottom: 0.5rem; overflow: hidden; }
.wiz-gruppe-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface2); font-size: 13px; font-weight: 500; cursor: pointer; }
.wiz-gruppe-head input[type="checkbox"] { margin: 0; }
.wiz-gruppe-head span:nth-child(2) { flex: 1; }
.wiz-gruppe-n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text3); }
.wiz-gruppe-liste { list-style: none; padding: 0; margin: 0; }
.wiz-gruppe-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: 5px 10px 5px 32px; font-size: 12px; font-family: 'IBM Plex Mono', monospace; border-top: 0.5px solid var(--border); }
.wiz-gruppe-liste li span:first-child { color: var(--text2); }
.wiz-gruppe-liste li span:last-child { color: var(--text); white-space: nowrap; }
.wiz-gruppe-liste li.wiz-vorhanden span { color: var(--text3); text-decoration: line-through; }
.wiz-vorhanden-inline { color: var(--text3); text-decoration: line-through; }

.wiz-details { list-style: none; padding: 0; margin: 0.75rem 0; max-height: 320px; overflow-y: auto; }
.wiz-details li { display: flex; gap: 10px; padding: 4px 8px; font-size: 12px; font-family: 'IBM Plex Mono', monospace; }
.wiz-details li span:first-child { width: 14px; color: var(--text3); }
.wiz-det-angelegt span:first-child { color: var(--green); }
.wiz-det-fehler { color: var(--red); }
.wiz-det-fehler span:first-child { color: var(--red); }

@media (max-width: 700px) {
  .ob-head { gap: 8px; padding: 0.6rem 0.8rem; }
  .ob-name { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ob-count { padding: 1px 6px; }
  .ob-open-link { padding: 2px 6px; }
  .ob-table td { padding: 5px 0.8rem; }
  .ob-date { width: 78px; }
  .ob-amount { width: 88px; }
  .clients { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  header { flex-direction: column; align-items: flex-start; }
  th.tx-ref, th.tx-cat, th.tx-beleg,
  td.tx-ref, td.tx-cat, td.tx-beleg { display:none !important; }
  .tx-detail-row { display:table-row; }
  .container { padding:0.75rem; }
  .col-toggle { display: none !important; }
  th.tx-netto-col, td.tx-netto-col,
  th.tx-ust-col,   td.tx-ust-col   { display: none !important; }
  .set-jahre-table { font-size: 12px; display: block; }
  .set-jahre-table thead { display: none; }
  .set-jahre-table tbody, .set-jahre-table tr, .set-jahre-table td { display: block; }
  .set-jahre-table tr { border-bottom: 0.5px solid var(--border); padding: 0.5rem 0; }
  .set-jahre-table td { border: none; padding: 4px 0; }
  .set-jahre-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 110px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; }
  .set-jahre-table .set-col-check { text-align: left; }
}