/* Dateipfad: assets/css/bi-budget.css
   Budget (assets/js/bi-budget.js) – Event-Management, «Budget & Kosten» ohne Event, Lese-Link und Beispiele.
   Baut auf bi-zusatz.css auf (ko-kpis, ko-tabs, ko-list, ko-exp, zm-note …). Farben über die Variablen der Seite (hell & dunkel). */

.bu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bu-kpi { background: var(--bg-body, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.bu-kpi span { display: block; font-size: 0.7rem; font-weight: 700; color: var(--text-muted, #64748b); }
.bu-kpi b { display: block; font-size: 1.08rem; font-weight: 800; color: var(--text-main, #0f172a); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bu-kpi small { display: block; font-size: 0.68rem; color: var(--text-muted, #64748b); margin-top: 2px; }
.bu-kpi.is-paid b { color: #059669; }
.bu-kpi.is-open b { color: #b45309; }
.bu-kpi.is-over { border-color: rgba(225, 29, 72, 0.4); background: rgba(225, 29, 72, 0.06); }
.bu-kpi.is-over b { color: #e11d48; }
.bu-kpi.is-ok b { color: #059669; }
body.dark-mode .bu-kpi.is-paid b, body.dark-mode .bu-kpi.is-ok b { color: #34d399; }
body.dark-mode .bu-kpi.is-open b { color: #fbbf24; }
body.dark-mode .bu-kpi.is-over b { color: #fb7185; }

/* Balken: geplant (blau, hell) und bezahlt (grün) übereinander */
.bu-meter { position: relative; height: 12px; border-radius: 8px; background: var(--bg-body, #f1f5f9); border: 1px solid var(--border-color, #e2e8f0); overflow: hidden; margin: 2px 0 6px; }
.bu-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; }
.bu-meter-plan { background: var(--primary-color, #2771c8); opacity: 0.35; }
.bu-meter-paid { background: #10b981; }
.bu-meter.is-over .bu-meter-plan { background: #e11d48; opacity: 0.45; }
.bu-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.72rem; color: var(--text-muted, #64748b); margin: 0 0 12px; }
.bu-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bu-legend i.is-paid { background: #10b981; }
.bu-legend i.is-plan { background: var(--primary-color, #2771c8); opacity: 0.35; }
.bu-legend i.is-free { background: var(--bg-body, #f1f5f9); border: 1px solid var(--border-color, #e2e8f0); }
.bu-legend i.is-mark { width: 3px; background: var(--text-main, #0f172a); }
.bu-warn { margin-bottom: 10px; }

/* Werkzeuge: Einstellungen, Lese-Link, Export */
.bu-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.bu-tool { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #ffffff); color: var(--text-main, #0f172a);
           border-radius: 14px; padding: 10px 12px; font: inherit; cursor: pointer; min-width: 0; }
.bu-tool:hover { border-color: var(--primary-color, #2771c8); }
.bu-tool > i { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.bu-tool span { min-width: 0; flex: 1; }
.bu-tool b { display: block; font-size: 0.86rem; }
.bu-tool small { display: block; font-size: 0.72rem; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bu-tabs { flex-wrap: wrap; }
.bu-tabs button { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) { .bu-tabs button { flex: 1 1 30%; font-size: 0.76rem; padding: 8px 4px; } }
.bu-seg { margin-bottom: 0; }
.bu-pane { min-width: 0; }

/* Je Bereich */
.bu-cats { display: flex; flex-direction: column; gap: 9px; }
.bu-catrow { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.84rem; color: var(--text-main, #0f172a); }
.bu-catrow[data-catgo] { cursor: pointer; }
.bu-catlab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-catlab i { color: var(--text-muted, #94a3b8); width: 16px; text-align: center; }
.bu-catrow b { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.84rem; white-space: nowrap; }
.bu-catrow b small { display: block; font-size: 0.68rem; font-weight: 600; color: var(--text-muted, #64748b); }
.bu-catrow.is-over b, .bu-catrow.is-over .bu-catlab { color: #e11d48; }
.bu-bar { position: relative; display: block; height: 10px; border-radius: 6px; background: var(--bg-body, #f1f5f9); overflow: hidden; }
.bu-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.bu-bar-plan { background: var(--primary-color, #2771c8); opacity: 0.35; }
.bu-bar-paid { background: #10b981; }
.bu-catrow.is-over .bu-bar-plan { background: #e11d48; opacity: 0.5; }
.bu-bar i.bu-bar-mark { width: 2px; border-radius: 0; background: var(--text-main, #0f172a); opacity: 0.7; }
@media (max-width: 520px) {
    .bu-catrow { grid-template-columns: minmax(0, 1fr) auto; }
    .bu-catrow .bu-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Bald fällig */
.bu-due { display: flex; gap: 10px; align-items: center; padding: 8px 10px 8px 12px; border-radius: 14px; background: var(--bg-card, #ffffff); border: 1px solid var(--border-color, #e2e8f0); }
.bu-due.is-soon { border-color: rgba(245, 158, 11, 0.5); }
.bu-due.is-late { border-color: rgba(225, 29, 72, 0.45); background: rgba(225, 29, 72, 0.04); }
.bu-due-main { flex: 1; min-width: 0; text-align: left; border: none; background: none; padding: 2px 0; font: inherit; color: var(--text-main, #0f172a); cursor: pointer; }
.bu-due-main b { display: block; font-size: 0.86rem; overflow-wrap: anywhere; }
.bu-due-main small { display: block; font-size: 0.74rem; color: var(--text-muted, #64748b); }
.bu-due.is-late .bu-due-main small { color: #e11d48; font-weight: 700; }
.bu-due.is-soon .bu-due-main small { color: #b45309; font-weight: 700; }
.bu-due .btn { padding: 7px 11px; font-size: 0.78rem; flex-shrink: 0; }
.bu-late { color: #e11d48; font-weight: 700; }
.bu-soon { color: #b45309; font-weight: 700; }
body.dark-mode .bu-late, body.dark-mode .bu-due.is-late .bu-due-main small { color: #fb7185; }
body.dark-mode .bu-soon, body.dark-mode .bu-due.is-soon .bu-due-main small { color: #fbbf24; }

.bu-linkbtn { border: none; background: none; padding: 0; font: inherit; color: var(--primary-color, #2771c8); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* Start mit Vorlage */
.bu-start { border: 1.5px dashed var(--border-color, #cbd5e1); border-radius: 16px; padding: 14px; margin-bottom: 14px; background: var(--bg-body, #f8fafc); }
.bu-start h4 { margin: 0 0 4px; font-size: 0.98rem; display: flex; gap: 8px; align-items: center; color: var(--text-main, #0f172a); }
.bu-start h4 i { color: #16a34a; }
.bu-start p { margin: 0 0 10px; }
.bu-start-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.bu-start-row .zm-field { flex: 1 1 180px; }
.bu-start-row .btn { flex: 0 0 auto; justify-content: center; }
@media (max-width: 480px) { .bu-start-row .btn { flex: 1 1 100%; } }
.bu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bu-chip { border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #ffffff); color: var(--text-main, #0f172a); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.bu-chip i { color: var(--text-muted, #94a3b8); margin-right: 3px; }
.bu-chip.is-on { border-color: #16a34a; background: rgba(22, 163, 74, 0.1); color: #15803d; }
.bu-chip.is-on i { color: #16a34a; }
body.dark-mode .bu-chip.is-on { color: #4ade80; }

/* Ausgaben */
.bu-add { width: 100%; justify-content: center; margin-bottom: 6px; }
.bu-add + .bu-exp, .bu-add + .ko-list { margin-top: 6px; }
.bu-group { margin: 12px 0 0; }
.bu-group-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 0.8rem; font-weight: 800; color: var(--text-muted, #64748b); margin: 0 2px 6px; }
.bu-group-head span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main, #0f172a); }
.bu-group-head i { color: var(--text-muted, #94a3b8); margin-right: 3px; }
.bu-group-head span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bu-exp .ko-exp-sub { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.bu-exp.is-static { cursor: default; }
.bu-exp .ko-exp-title { overflow-wrap: anywhere; }
.bu-exp > span:nth-child(2) { min-width: 0; }
.bu-exp[disabled] { cursor: default; opacity: 1; }
.bu-st { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.bu-st.is-plan { background: rgba(39, 113, 200, 0.1); color: var(--primary-color, #2771c8); }
.bu-st.is-part { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.bu-st.is-paid { background: rgba(16, 185, 129, 0.14); color: #047857; }
.bu-st.is-off { background: var(--bg-body, #f1f5f9); color: var(--text-muted, #64748b); border-color: var(--border-color, #e2e8f0); }
.bu-st.is-low { background: rgba(124, 58, 237, 0.1); color: #6d28d9; }
body.dark-mode .bu-st.is-part { color: #fbbf24; }
body.dark-mode .bu-st.is-paid { color: #34d399; }
body.dark-mode .bu-st.is-low { color: #c4b5fd; }

/* Bereiche */
.bu-cat { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--bg-body, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 9px 10px 9px 12px; }
.bu-cat-main { min-width: 0; }
.bu-cat-main b { display: block; font-size: 0.9rem; color: var(--text-main, #0f172a); overflow-wrap: anywhere; }
.bu-cat-main small { display: block; font-size: 0.74rem; color: var(--text-muted, #64748b); }
.bu-cat-acts { display: flex; gap: 2px; }
.bu-ic { width: 34px; height: 34px; border: none; background: none; border-radius: 10px; color: var(--text-muted, #64748b); cursor: pointer; font-size: 0.85rem; }
.bu-ic:hover:not([disabled]) { background: var(--bg-card, #ffffff); color: var(--primary-color, #2771c8); }
.bu-ic[disabled] { opacity: 0.3; cursor: default; }
@media (max-width: 420px) {
    .bu-cat { grid-template-columns: 34px minmax(0, 1fr); }
    .bu-cat .ko-exp-icon { width: 34px; height: 34px; }
    .bu-cat-acts { grid-column: 1 / -1; justify-content: flex-end; margin-top: -4px; }
}

/* Offerten */
.bu-offer { background: var(--bg-card, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 10px 12px; }
.bu-offer.is-chosen { border-color: rgba(16, 185, 129, 0.55); background: rgba(16, 185, 129, 0.05); }
.bu-offer.is-off { opacity: 0.65; }
.bu-offer-top { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.bu-offer-top b { font-size: 0.9rem; color: var(--text-main, #0f172a); overflow-wrap: anywhere; }
.bu-offer-price { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-main, #0f172a); }
.bu-offer-meta { margin-top: 4px; overflow-wrap: anywhere; }
.bu-offer-meta a { color: var(--primary-color, #2771c8); }
.bu-offer-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bu-offer-acts .btn { padding: 7px 11px; font-size: 0.78rem; }

/* Formulare */
.bu-box { border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 12px; margin: 0 0 12px; background: var(--bg-body, #f8fafc); }
.bu-box .zm-label i { color: #16a34a; }
.bu-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.bu-iconbtn { height: 40px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #ffffff); color: var(--text-muted, #64748b); border-radius: 10px; cursor: pointer; font-size: 0.95rem; }
.bu-iconbtn.is-on { border-color: #16a34a; color: #16a34a; background: rgba(22, 163, 74, 0.1); }
.bu-share { display: flex; gap: 6px; }
.bu-share input { flex: 1; min-width: 0; font-size: 16px; }
/* Lese-Links (mehrere, je Person) */
.bu-links { display: flex; flex-direction: column; gap: 10px; }
.bu-link { border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 12px; background: var(--bg-body, #f8fafc); display: flex; flex-direction: column; gap: 8px; }
.bu-link.is-new { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12); }
.bu-link-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bu-link-top b { font-size: 0.9rem; }
.bu-link-top b i { color: #16a34a; margin-right: 4px; }
.bu-link-seen i { margin-right: 4px; }
.bu-link-hist summary { cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--primary-color, #2771c8); }
.bu-link-hist ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.8rem; color: var(--text-muted, #64748b); max-height: 160px; overflow-y: auto; }
.bu-link-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.bu-link-acts .btn { padding: 7px 11px; font-size: 0.78rem; }
.bu-link-acts .bu-link-del { color: #e11d48; }
.bu-link-new { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-color, #e2e8f0); }
.bu-link-new input { margin-top: 8px; font-size: 16px; }
.bu-exp-btns { display: flex; flex-direction: column; gap: 8px; }
.bu-expbtn { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #ffffff); color: var(--text-main, #0f172a); text-decoration: none; }
.bu-expbtn:hover { border-color: var(--primary-color, #2771c8); }
.bu-expbtn > i { font-size: 1.4rem; width: 28px; text-align: center; }
.bu-expbtn b { display: block; font-size: 0.9rem; }
.bu-expbtn small { display: block; font-size: 0.76rem; color: var(--text-muted, #64748b); }
.zm-check.is-locked { opacity: 0.6; }