/* ═══════════════════════════════════════════════════════════
   vanss-skin.css — Racing-Ledger-Skin fuer die portierten
   vanss-Finanzmodule (Bank, Rechnungen, RG, Liquiditaet, GF)
   office.early911s.de — v1 (Shim-Agent)
   Struktur/Abstaende aus vanss dev/css/base.css, Farben/Radien/
   Schriften auf Racing-Ledger-Tokens (racing_ledger.css).
   ═══════════════════════════════════════════════════════════ */
/* Token-Bruecke: vanss-Variablen → Racing-Ledger */
:root,body.light{--ci-gruen:var(--sage);--ci-akzent:var(--sage);--bg-2:var(--bg-alt);--bg-base:var(--bg-alt);--bg-card:var(--surface);--bg-card-hover:var(--surface-hi);--bg-input:var(--bg-alt);--bg-hover:var(--surface-hi);--border:var(--rule);--border-strong:var(--rule-hi);--text:var(--ink);--text-primary:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-3);--accent:var(--racing);--accent-blue:var(--racing);--accent-green:var(--sage);--accent-orange:var(--amber);--accent-yellow:var(--amber);--accent-red:var(--red);--accent-purple:var(--racing);--accent-cyan:var(--racing);--prio-hoch:var(--red);--prio-mittel:var(--amber);--prio-niedrig:var(--sage)}
/* Buttons (.btn-Familie; .btn.btn-primary schlaegt .btn-primary aus racing_ledger) */
.btn{padding:8px 16px;border-radius:0;font-size:12px;font-family:'Bebas Neue',sans-serif;letter-spacing:.18em;cursor:pointer;border:1px solid var(--rule-hi);background:transparent;color:var(--ink-2);transition:all .15s;line-height:1.2}
.btn:hover{color:var(--ink);border-color:var(--red)}
.btn:disabled{opacity:.4;cursor:default}
.btn.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.btn-primary:hover{background:var(--red-dim);border-color:var(--red-dim);color:#fff}
.btn.btn-secondary{background:transparent;color:var(--ink-2);border:1px solid var(--rule-hi)}
.btn.btn-secondary:hover{background:var(--surface-hi);color:var(--ink)}
.btn.btn-sm{padding:5px 10px;font-size:11px}
.back-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;margin-bottom:20px;background:transparent;border:1px solid var(--rule-hi);color:var(--ink-2);border-radius:0;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.2em;cursor:pointer;transition:all .15s}
.back-btn:hover{color:var(--ink);border-color:var(--red)}
/* Formularfelder */
.field-group{margin-bottom:14px}
.field-label{display:block;margin-bottom:6px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-4)}
.field-input,.field-textarea,select.field-input{width:100%;box-sizing:border-box;background:var(--bg-alt);border:1px solid var(--rule-hi);border-radius:0;padding:9px 12px;color:var(--ink);font-family:'Space Grotesk',-apple-system,sans-serif;font-size:13px;transition:border-color .15s;outline:none}
.field-input:focus,.field-textarea:focus{border-color:var(--red)}
.field-input::placeholder,.field-textarea::placeholder{color:var(--ink-4)}
.field-input[type=number],.field-input.num{font-family:'JetBrains Mono',monospace;text-align:right}
.field-textarea{resize:vertical;min-height:100px;line-height:1.5}
select.field-input option{background:var(--surface);color:var(--ink)}
/* Panels */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:0;overflow:hidden;display:flex;flex-direction:column;margin-bottom:18px}
.panel-header{padding:14px 20px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--bg-alt)}
.panel-header.clickable{cursor:pointer;user-select:none}
.panel-header.clickable:hover{background:var(--surface-hi)}
.panel-title{display:flex;align-items:center;gap:10px;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.14em;color:var(--ink)}
.panel-title-icon{width:8px;height:8px;border-radius:0;background:var(--red)}
.panel-count{font-family:'JetBrains Mono',monospace;color:var(--ink-3);font-size:11px;letter-spacing:.1em}
.panel-body{max-height:none;min-height:0;overflow-y:auto}
.panel-body.tall{min-height:420px}
.panel-body::-webkit-scrollbar{width:6px}
.panel-body::-webkit-scrollbar-thumb{background:var(--rule-hi)}
.panel-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:4px;transition:transform .2s;color:var(--ink-3)}
.panel.collapsed .panel-toggle{transform:rotate(-90deg)}
.panel.collapsed .panel-body{display:none}
/* Tabs (.panel-tabs / .gp-tabs) — eckige Segmentleiste */
.panel-tabs,.gp-tabs{display:inline-flex;gap:0;max-width:100%;overflow-x:auto;flex-wrap:nowrap;border:1px solid var(--rule-hi);border-radius:0;padding:0;background:transparent;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.panel-tab,.gp-tab{flex:none;padding:8px 18px;border-radius:0;white-space:nowrap;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:.18em;color:var(--ink-3);cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px;transition:all .15s}
.panel-tab + .panel-tab,.gp-tab + .gp-tab{border-left:1px solid var(--rule-hi)}
.panel-tab:hover:not(.active),.gp-tab:hover:not(.active){color:var(--ink)}
.panel-tab.active,.gp-tab.active{background:var(--surface-hi);color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.panel-tab .tab-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-4);letter-spacing:.05em}
.panel-tab.active .tab-count{color:var(--red)}
.gp-tab.hat-notiz{color:var(--amber)}
/* Zustaende */
.loading-state,.empty-state{padding:50px 20px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-4)}
.empty-state{padding:40px 20px}
/* Kunden-/Listen-Tabelle */
.kunden-table-wrap{flex:1;overflow:auto}
.kunden-table{width:100%;border-collapse:collapse;font-size:13px}
.kunden-table thead{position:sticky;top:0;background:var(--bg-alt);z-index:1}
.kunden-table th{text-align:left;padding:10px 14px;user-select:none;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--rule-hi);background:var(--bg-alt)}
.kunden-table th.sortable{cursor:pointer}
.kunden-table th.sortable:hover{color:var(--ink)}
.kunden-table th.num,.kunden-table td.num{text-align:right}
.kunden-table th .sort-indicator{display:inline-block;width:10px;font-size:9px;color:var(--red);margin-left:2px}
.kunden-table td{padding:10px 14px;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:middle;background:var(--surface)}
.kunden-table td.num,.kunden-table td.mono{font-family:'JetBrains Mono',monospace;font-size:12px}
.kunden-table td strong{color:var(--ink);font-weight:600}
.kunden-table tbody tr{cursor:pointer;transition:background .1s}
.kunden-table tbody tr:hover td{background:var(--surface-hi)}
.kunden-table tbody tr.selected td{background:var(--surface-hi);color:var(--ink);box-shadow:inset 3px 0 0 var(--red)}
.kunden-table .mail-sm{color:var(--racing);text-decoration:none;font-size:12px}
.kunden-table .mail-sm:hover{text-decoration:underline}
/* Modal */
.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease-out}
.modal{background:var(--surface);border:1px solid var(--rule-hi);border-top:3px solid var(--red);border-radius:0;width:90%;max-width:780px;max-height:94vh;box-shadow:0 24px 70px rgba(0,0,0,.6);color:var(--ink);display:flex;flex-direction:column;overflow:hidden}
.modal > *{flex:0 0 auto}
.modal > .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto}
.modal.modal-fest{height:min(880px,88vh)}
.modal-header{padding:16px 24px;border-bottom:1px solid var(--rule);background:var(--bg-alt);display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal-title{display:flex;align-items:center;gap:10px;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.08em;color:var(--ink);line-height:1}
.modal-close{background:transparent;border:1px solid transparent;color:var(--ink-3);cursor:pointer;font-size:20px;line-height:1;padding:4px 8px;border-radius:0;font-family:inherit}
.modal-close:hover{color:var(--ink);border-color:var(--rule-hi)}
.modal-body{padding:20px 24px}
.modal-footer{padding:14px 24px;border-top:1px solid var(--rule);background:var(--bg-alt);display:flex;gap:8px;justify-content:flex-end}
/* Dropdown-Optionen */
.dd-opt{padding:8px 12px;border-radius:0;font-size:12px;cursor:pointer;color:var(--ink-2);transition:all .1s;border-left:2px solid transparent}
.dd-opt:hover{background:var(--surface-hi);color:var(--ink)}
.dd-opt.active{background:var(--surface-hi);color:var(--ink);border-left-color:var(--red);font-weight:600}
/* Status-Badges (vanss) */
.status-badge{display:inline-block;padding:3px 8px;border-radius:0;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-hi);background:transparent}
.status-badge.offen,.status-badge.neu{color:var(--racing);border-color:rgba(74,107,138,.45)}
.status-badge.bearbeitung,.status-badge.gesichtet{color:var(--amber);border-color:rgba(232,184,78,.45)}
.status-badge.wartet{color:var(--amber);border-color:rgba(232,184,78,.45)}
.status-badge.geloest,.status-badge.bezahlt,.status-badge.ok{color:var(--sage);border-color:rgba(107,133,99,.5)}
.status-badge.geschlossen{color:var(--ink-4);border-color:var(--rule-hi)}
.status-badge.gesperrt,.status-badge.ueberfaellig,.status-badge.crit{color:var(--red);border-color:rgba(212,85,0,.5)}
/* Ledger-Badges / KPIs (Racing-Ledger-Neudefinition) */
.lg-badge{display:inline-block;padding:3px 8px;white-space:nowrap;vertical-align:middle;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-hi);background:transparent}
.lg-badge.ok,.lg-badge.green{color:var(--sage);border-color:rgba(107,133,99,.5)}
.lg-badge.warn,.lg-badge.amber{color:var(--amber);border-color:rgba(232,184,78,.45)}
.lg-badge.alert,.lg-badge.red{color:var(--red);border-color:rgba(212,85,0,.5)}
.lg-badge.info,.lg-badge.blue{color:var(--racing);border-color:rgba(74,107,138,.45)}
.lg-badge.solid{background:var(--red);border-color:var(--red);color:#fff}
.lg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:18px}
.lg-kpi{background:var(--surface);padding:18px 22px;min-width:0}
.lg-kpi .k,.lg-kpi .lb{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.lg-kpi .v,.lg-kpi .vl{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.04em;color:var(--ink);line-height:1;white-space:nowrap}
.lg-kpi .sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--ink-3);margin-top:6px}
.lg-kpi .v.pos,.lg-kpi .vl.pos,.lg-pos{color:var(--sage)}
.lg-kpi .v.neg,.lg-kpi .vl.neg,.lg-neg{color:var(--red)}
.lg-kpi .v.warn,.lg-kpi .vl.warn{color:var(--amber)}
/* Kleinkram, den vanss-Module voraussetzen */
.fade-in{animation:fadeIn .3s ease-out}
#fzMount .num,#fzMount .mono,.modal .num,.modal .mono{font-family:'JetBrains Mono',monospace}
#fzMount a{color:var(--racing)}
#fzMount hr{border:0;border-top:1px solid var(--rule)}
@media (max-width:760px){.modal{width:96%;max-height:96vh}
.modal-header,.modal-body,.modal-footer{padding-left:14px;padding-right:14px}
.kunden-table th,.kunden-table td{padding:7px 8px;white-space:nowrap}
.lg-kpi .v,.lg-kpi .vl{font-size:24px}
}