/* ========================================================================
   Aubergine — Dark Visual Layer
   Layered AFTER app.css. Entsättigt und matt — Mauve statt Neon,
   Salbei statt Acid-Cyan, keine Shimmer/Glow/Noise-Effekte.
   Dark is the ONLY mode — kein Toggle.

   Die Design-Tokens (--hb-*) leben ausschließlich in app.css;
   diese Datei ist die Komponenten-Skin-Schicht darüber. Spec: docs/DESIGN.md.
   ======================================================================== */

html { color-scheme: dark; }

body {
    font-family: var(--hb-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
    color: var(--hb-text);
    /* Matt statt Seidenschleier: eine Fläche, kein Effekt */
    background: var(--hb-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hb-font-display);
    letter-spacing: -0.025em;
    color: var(--hb-text-strong);
}

/* Geld sitzt im Raster — tabular, mono */
.hb-stat-value,
.hb-table .text-end,
td[data-col="wert"],
td[data-col="bereinigt"],
td[data-col="anzahl"],
td[data-col="gebuehren"],
td[data-col="paarwert"],
td[data-col="rrr"],
td[data-col="stueck"],
td[data-col="betrag"],
.hb-amount,
.hb-num {
    font-family: var(--hb-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Beträge: Farbe ist die Aussage — kein +/- Prefix nötig */
.text-success { color: var(--hb-success) !important; }
.text-danger  { color: var(--hb-danger) !important; }
.text-warning { color: var(--hb-warning) !important; }
.text-muted   { color: var(--hb-text-muted) !important; }

/* (Der frühere .container-xxl-Breiten-Bump ist raus — alle Seiten nutzen
   jetzt die einheitliche .hb-shell aus app.css.) */

/* ---- Action column (Tabellen) --------------------------------------- */
.hb-col-actions { width: 1px; white-space: nowrap; }
.hb-table.hb-table-fixed .hb-col-actions { width: 116px; }
.hb-table td:last-child { white-space: nowrap; }
.hb-table th[data-col="name"],
.hb-table th[data-col="beschreibung"] { width: 100%; }
.hb-table td .btn-sm.border-0 {
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

/* ---- Cards: matte Flächen, klare Kanten ------------------------------ */
.hb-card {
    position: relative;
    background: var(--hb-surface);
    border: 1px solid var(--hb-border);
    box-shadow: var(--hb-shadow-sm);
}
.hb-card-header {
    background: rgba(44, 35, 56, 0.5);
    color: var(--hb-text-strong);
    border-bottom: 1px solid var(--hb-border);
}

/* ---- Stat-Cards: ruhig, Hover nur als leichte Hebung ----------------- */
.hb-stat {
    background: var(--hb-surface);
    border: 1px solid var(--hb-border);
    position: relative;
    overflow: hidden;
    transition: border-color var(--hb-transition), background-color var(--hb-transition);
}
.hb-stat:hover {
    border-color: rgba(199, 123, 168, 0.4);
    background-color: var(--hb-surface-alt);
}
/* (Die farbigen Akzentkanten der Stat-Karten sind raus — Dekoration ohne
   Aussage. Signalfarbe gehört den Beträgen, nicht den Rahmen.) */

.hb-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hb-text-muted);
}
.hb-stat-value {
    color: var(--hb-text-strong);
    font-weight: 600;
    font-size: 1.7rem;
}
.hb-stat-hint { color: var(--hb-text-muted); }

/* ---- Tabellen: kein Zebra, schlichtes Hover -------------------------- */
.hb-table { background: transparent; }
.hb-table thead th {
    background: rgba(44, 35, 56, 0.55);
    color: var(--hb-text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--hb-border);
}
.hb-table tbody td {
    color: var(--hb-text);
    border-bottom: 1px solid var(--hb-border-soft);
}
.hb-table tbody tr {
    transition: background-color var(--hb-transition);
}
.hb-table tbody tr:hover {
    background-color: var(--hb-surface-alt);
}
.hb-table .text-end { color: var(--hb-text-strong); }
/* Beträge brechen nie um. */
.hb-table td.text-end { white-space: nowrap; }
.hb-day-row { background: rgba(44, 35, 56, 0.55); font-weight: 600; }
.hb-day-row td {
    padding-top: var(--hb-space-3);
    padding-bottom: var(--hb-space-3);
    color: var(--hb-text);
}
.hb-day-row--over-limit td:first-child {
    box-shadow: inset 3px 0 0 var(--hb-danger);
}
.hb-limit-badge {
    display: inline-block;
    background: var(--hb-danger-soft);
    color: var(--hb-danger);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.5rem;
}

/* ---- Buttons: solide Flächen, kein Shimmer ---------------------------- */
.btn-primary {
    /* Bootstrap-Zustände (active/disabled) über die btn-Variablen abdecken —
       sonst blitzt das kompilierte Bootstrap-Blau durch. */
    --bs-btn-active-bg: var(--hb-primary-strong);
    --bs-btn-active-color: #F7F2F5;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--hb-primary);
    --bs-btn-disabled-color: #221520;
    --bs-btn-disabled-border-color: transparent;
    background: var(--hb-primary);
    border: 0;
    color: #221520;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background-color var(--hb-transition), box-shadow var(--hb-transition);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--hb-primary-strong);
    color: #F7F2F5;
    box-shadow: var(--hb-shadow-sm);
}
/* Drei Button-Varianten insgesamt (Konzept „Hauptbuch", E1):
   Primär (Mauve, oben), Leise (alle Outline-Varianten außer danger —
   bewusst identisch gestylt) und Gefahr (Altrosa, nur Destruktives). */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
    background: transparent;
    border: 1px solid var(--hb-text-muted);
    color: var(--hb-text);
    transition: var(--hb-transition);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-primary:hover,   .btn-outline-primary:focus,
.btn-outline-success:hover,   .btn-outline-success:focus,
.btn-outline-warning:hover,   .btn-outline-warning:focus,
.btn-outline-info:hover,      .btn-outline-info:focus,
.btn-outline-light:hover,     .btn-outline-light:focus,
.btn-outline-dark:hover,      .btn-outline-dark:focus {
    background: var(--hb-surface-alt);
    border-color: var(--hb-primary);
    color: var(--hb-text-strong);
}
.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--hb-danger);
    color: var(--hb-danger);
    transition: var(--hb-transition);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--hb-danger);
    color: #241014;
}
.btn-danger {
    --bs-btn-active-bg: #B96F7A;
    --bs-btn-active-color: #241014;
    --bs-btn-active-border-color: transparent;
    background: var(--hb-danger);
    border: 0;
    color: #241014;
    font-weight: 600;
    transition: background-color var(--hb-transition);
}
.btn-danger:hover,
.btn-danger:focus {
    background: #B96F7A;
    color: #241014;
}

/* ---- Forms: elevated Surface, ruhiger Mauve-Focus --------------------- */
.form-control,
.form-select {
    background: var(--hb-surface);
    border: 1px solid var(--hb-text-muted);
    color: var(--hb-text-strong);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control::placeholder { color: var(--hb-text-muted); opacity: 0.8; }
.form-control:focus,
.form-select:focus {
    border-color: var(--hb-primary);
    box-shadow: 0 0 0 3px rgba(199, 123, 168, 0.22);
    background-color: var(--hb-surface);
    color: var(--hb-text-strong);
}
.form-select {
    /* Bootstrap-Pfeil auf Mauve-Grau umfärben. repeat/position/size explizit:
       der background-Shorthand von .hb-inline-select (app.css) resettet sie
       sonst auf repeat/0 0 — das Chevron würde über das Feld gekachelt. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C6BBD4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
/* Inline-Edit-Selects in Tabellen: unauffällig, ohne Pfeil (wie gehabt) */
.form-select.hb-inline-select {
    background-image: none;
}
/* Multi-Selects (z. B. Chart-Kategorien): Liste statt Pfeil */
select[multiple].form-select,
select[size]:not([size="1"]).form-select {
    background-image: none;
    background-color: var(--hb-surface);
    color: var(--hb-text);
    max-height: 140px;
}
select.form-select option,
select.form-select optgroup {
    background-color: var(--hb-surface);
    color: var(--hb-text);
}
/* Chrome ignoriert background-color auf option:checked (UA-Highlight,
   unfokussiert hellgrau) — akzeptiert aber ein background-image. */
select.form-select option:checked {
    background-image: linear-gradient(var(--hb-surface-alt), var(--hb-surface-alt));
    background-color: var(--hb-surface-alt);
    color: var(--hb-text-strong);
}
/* Versal-Labels nur für echte Feld-Beschriftungen — Button-Labels
   (btn-check-Gruppen) bleiben in normaler Schrift. */
label:not(.btn), .form-label {
    color: var(--hb-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.form-text { color: var(--hb-text-muted); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(0.15) saturate(1.6) hue-rotate(230deg); }

/* ---- Navbar: dunkel, aktives Item in Mauve ---------------------------- */
.hb-navbar {
    background: var(--hb-bg);
    border-bottom: 1px solid var(--hb-border);
    /* Stacking-Context beibehalten — ohne z-index würden positionierte
       Content-Elemente über den offenen Dropdowns landen. */
    position: relative;
    z-index: 1030;
    /* Bootstrap-Navbar-Farben explizit — unabhängig vom bs-theme. */
    --bs-navbar-color:              var(--hb-text);
    --bs-navbar-hover-color:        var(--hb-text-strong);
    --bs-navbar-active-color:       var(--hb-primary);
    --bs-navbar-brand-color:        var(--hb-text);
    --bs-navbar-brand-hover-color:  var(--hb-text-strong);
    --bs-navbar-toggler-border-color: var(--hb-border);
    --bs-emphasis-color:            var(--hb-text-strong);
    --bs-emphasis-color-rgb:        239, 234, 243;
}
/* Brand-Wortmarke: ALL CAPS Display-Sans (bleibt als Markenzeichen) */
.hb-navbar .hb-brand {
    font-family: var(--hb-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hb-text);
    transition: color var(--hb-transition);
}
.hb-navbar .hb-brand:hover {
    color: var(--hb-text-strong);
}

.hb-navbar .nav-link {
    color: var(--hb-text);
    font-weight: 500;
    transition: color var(--hb-transition);
}
.hb-navbar .nav-link:hover,
.hb-navbar .nav-link:focus { color: var(--hb-text-strong); text-decoration: none; }
.hb-navbar .nav-link.active,
.hb-navbar .nav-link.show {
    color: var(--hb-primary);
}
.hb-navbar .dropdown-item:hover,
.hb-navbar .dropdown-item:focus { text-decoration: none; }
.hb-navbar .navbar-toggler { border-color: var(--hb-border); }
.hb-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C6BBD4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdowns: matte, erhabene Fläche */
.hb-navbar .dropdown-menu,
.dropdown-menu {
    --bs-dropdown-bg: var(--hb-surface);
    --bs-dropdown-color: var(--hb-text);
    --bs-dropdown-link-color: var(--hb-text);
    --bs-dropdown-link-hover-bg: var(--hb-primary-soft);
    --bs-dropdown-link-hover-color: var(--hb-text-strong);
    --bs-dropdown-border-color: var(--hb-border);
    background-color: var(--hb-surface) !important;
    border: 1px solid var(--hb-border);
    box-shadow: var(--hb-shadow-lg);
    border-radius: var(--hb-radius);
    padding: 0.4rem;
    margin-top: 0.4rem;
    min-width: 12rem;
    position: absolute;
    z-index: 1080;
    isolation: isolate;
    overflow: hidden;
}
.hb-navbar .dropdown-item {
    color: var(--hb-text);
    padding: 0.45rem 0.7rem;
    border-radius: calc(var(--hb-radius) - 2px);
    font-weight: 500;
    transition: background var(--hb-transition), color var(--hb-transition);
}
.hb-navbar .dropdown-item:hover,
.hb-navbar .dropdown-item:focus {
    background: var(--hb-primary-soft);
    color: var(--hb-text-strong);
}

/* ---- Pills / Chips ----------------------------------------------------- */
.hb-chip {
    background: var(--hb-surface-alt);
    color: var(--hb-text);
    font-weight: 500;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.78rem;
}
.hb-chip--primary { background: var(--hb-primary); color: #221520; font-weight: 600; }
.hb-chip--success { background: rgba(147, 188, 164, 0.16); color: var(--hb-success); }
.hb-chip--danger  { background: rgba(208, 138, 148, 0.16); color: var(--hb-danger); }
.hb-chip--warning { background: rgba(217, 180, 126, 0.16); color: var(--hb-warning); }

/* (Bootstrap-.badge-Overrides sind raus — Status-Anzeigen laufen
   ausschließlich über das hb-chip-System.) */

/* ---- Hero-Stat: die große Zahl — einfarbig, ruhig ---------------------- */
.hb-hero-stat {
    padding: 2.4rem 0 1.6rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--hb-border);
    position: relative;
}
.hb-hero-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hb-text-muted);
    margin-bottom: 0.5rem;
}
.hb-hero-stat__value {
    font-family: var(--hb-font-display);
    font-weight: 600;
    /* Die Zahl bleibt die Bühne — nur ohne Kostüm */
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--hb-text-strong);
    margin-bottom: 0.5rem;
}
.hb-hero-stat--positive .hb-hero-stat__value { color: var(--hb-success); }
.hb-hero-stat--negative .hb-hero-stat__value { color: var(--hb-danger); }
.hb-hero-stat__hint {
    color: var(--hb-text-muted);
    font-size: 0.95rem;
}

/* ---- Login: ruhige, zentrierte Karte ----------------------------------- */
.hb-login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    font-family: var(--hb-font-body);
    color: var(--hb-text);
    background: var(--hb-bg);
}
.hb-login {
    width: 100%;
    max-width: 420px;
    /* app.css lässt <main> wachsen (flex: 1) — hier nicht: Card soll
       im Viewport zentriert schweben. */
    flex: 0 0 auto;
    padding-bottom: 0;
}
.hb-login-card {
    padding: 2.5rem 2rem;
    border-radius: var(--hb-radius-lg);
    box-shadow: var(--hb-shadow-lg);
    border: 1px solid var(--hb-border);
    background: var(--hb-surface);
}
.hb-login-brand { margin-bottom: 1.75rem; }
.hb-login-brand-label {
    font-family: var(--hb-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hb-primary);
    margin-bottom: 0.5rem;
}
.hb-login-title {
    font-family: var(--hb-font-display);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--hb-text-strong);
    margin: 0;
}
.hb-login-alert {
    padding: 0.7rem 0.9rem;
    border-radius: var(--hb-radius);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}
.hb-login-alert--error {
    background: var(--hb-danger-soft);
    color: var(--hb-danger);
    border: 1px solid rgba(208, 138, 148, 0.3);
}
.hb-login-field { margin-bottom: 1rem; }
.hb-login-form .form-label { margin-bottom: 0.35rem; }

/* ---- Alerts (Bootstrap) ------------------------------------------------ */
.alert-success { background: var(--hb-success-soft); color: var(--hb-success); border-color: rgba(147, 188, 164, 0.3); }
.alert-danger  { background: var(--hb-danger-soft); color: var(--hb-danger); border-color: rgba(208, 138, 148, 0.3); }
.alert-warning { background: var(--hb-warning-soft); color: var(--hb-warning); border-color: rgba(217, 180, 126, 0.3); }
.alert-info    { background: var(--hb-primary-soft); color: var(--hb-text); border-color: var(--hb-border); }

/* ---- Modal ------------------------------------------------------------- */
.modal-content {
    background: var(--hb-surface);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius-lg);
    box-shadow: var(--hb-shadow-lg);
    position: relative;
    overflow: hidden;
    color: var(--hb-text);
}
.modal-header { border-bottom: 1px solid var(--hb-border); color: var(--hb-text-strong); }
.modal-title { font-family: var(--hb-font-display); font-weight: 500; letter-spacing: -0.02em; }
.modal-footer { border-top: 1px solid var(--hb-border); }
.modal-backdrop.show { opacity: 0.7; background-color: #0B0810; }
.btn-close { filter: invert(0.8) sepia(0.1) saturate(1.5) hue-rotate(230deg); }

/* ---- Toasts: matte Fläche, Rahmen in Signalfarbe ------------------------ */
#hbToastContainer .hb-toast {
    background: var(--hb-surface);
    color: var(--hb-text);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-shadow-lg);
}
.hb-toast.hb-toast--success { border-color: rgba(147, 188, 164, 0.5); }
.hb-toast.hb-toast--warning { border-color: rgba(217, 180, 126, 0.5); }
.hb-toast.hb-toast--error   { border-color: rgba(208, 138, 148, 0.5); }
.hb-toast.hb-toast--info    { border-color: rgba(199, 123, 168, 0.5); }
.hb-toast-close { color: var(--hb-text-muted); }

/* ---- Floating Bulk-Action-Bar -------------------------------------------- */
.hb-action-float {
    background: var(--hb-surface);
    border: 1px solid var(--hb-border);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    box-shadow: var(--hb-shadow-lg);
    position: fixed;
    bottom: var(--hb-space-6);
    left: 50%;
    transform: translateX(-50%);
    color: var(--hb-text);
}

/* ---- Footer: schlicht ----------------------------------------------------- */
.hb-footer {
    border-top: 1px solid var(--hb-border);
    background: var(--hb-bg);
    position: relative;
    overflow: hidden;
    color: var(--hb-text-muted);
}

/* ---- Empty States: die Bühne für Persönlichkeit -------------------------- */
.hb-empty {
    text-align: center;
    padding: var(--hb-space-8) var(--hb-space-4);
    color: var(--hb-text-muted);
}
.hb-empty .hb-empty-icon {
    color: var(--hb-text-muted);
    font-size: 2.2rem;
    opacity: 0.6;
    margin-bottom: var(--hb-space-3);
}
.hb-empty .hb-empty-title {
    font-family: var(--hb-font-display);
    color: var(--hb-text);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: var(--hb-space-2);
}
.hb-empty .hb-empty-message {
    color: var(--hb-text-muted);
    font-size: 0.95rem;
    max-width: 32rem;
    margin: 0 auto;
}

/* ---- Form-Switch / Checkbox: Mauve wenn an -------------------------------- */
.form-check-input {
    border-color: var(--hb-text-muted);
    background-color: var(--hb-surface-alt);
}
.form-check-input:checked {
    background-color: var(--hb-primary);
    border-color: var(--hb-primary);
}
.form-check-input:focus {
    border-color: var(--hb-primary);
    box-shadow: 0 0 0 0.2rem rgba(199, 123, 168, 0.22);
}
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239C8FAD'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23221520'/%3e%3c/svg%3e");
}

/* ---- Inline-Code (IBANs, IDs) ---------------------------------------------- */
code, .text-monospace {
    font-family: var(--hb-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--hb-text);
    background: var(--hb-surface-alt);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.92em;
}

/* ---- Fixed-Layout-Tabellen --------------------------------------------------- */
.hb-table.hb-table-fixed { table-layout: fixed; }
.hb-table .hb-beschreibung-cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hb-table .hb-beschreibung-text { display: inline; vertical-align: middle; }
.hb-table.hb-table-fixed td .form-select,
.hb-table.hb-table-fixed td .form-control,
.hb-table.hb-table-fixed td .hb-inline-input,
.hb-table.hb-table-fixed td .hb-inline-select { width: 100%; }

/* ---- Inline-Edit-Felder -------------------------------------------------------- */
.hb-inline-input,
.hb-inline-select {
    color: var(--hb-text);
    /* Ruhezustand liest sich als Text — Rahmen erst bei Hover/Fokus.
       (Ohne dieses Reset gewinnt die .form-select-Border der Skin-Schicht
       und jede Tabellenzeile sieht nach Formular aus.) */
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}
.hb-inline-input:hover,
.hb-inline-input:focus,
.hb-inline-select:hover,
.hb-inline-select:focus {
    border-color: var(--hb-primary);
    background: var(--hb-surface-alt);
    color: var(--hb-text-strong);
}
.hb-save-indicator { color: var(--hb-success); }

/* ---- Source-Chip (EB/B4) ---------------------------------------------------------- */
.hb-source {
    display: inline-block;
    font-family: var(--hb-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.08rem 0.32rem;
    border-radius: 4px;
    margin-right: 0.4rem;
    vertical-align: 1px;
    line-height: 1.2;
    text-transform: uppercase;
}
/* Beide Quellen gleich leise — Salbei ist für Beträge reserviert. */
.hb-source-eb,
.hb-source-b4 { background: rgba(156, 143, 173, 0.18); color: var(--hb-text-muted); }

/* ---- AI-Match-Button: erscheint erst bei Absicht (Hover auf der Tageszeile) ---------- */
.hb-ai-match {
    color: var(--hb-primary);
    opacity: 0;
    transition: color var(--hb-transition), opacity var(--hb-transition);
}
.hb-day-row:hover .hb-ai-match,
.hb-ai-match:focus-visible { opacity: 1; }
.hb-ai-match:hover { color: var(--hb-text-strong); }
.hb-ai-match:disabled { color: var(--hb-text-muted); }

/* Zahlen-Inline-Felder sitzen im Geld-Raster wie alle Beträge. */
.hb-inline-input[type="number"] {
    font-family: var(--hb-font-mono);
    font-variant-numeric: tabular-nums;
}
/* Leere Datums-Inline-Felder zeigen keinen mm/tt/jjjj-Geistertext —
   app.js setzt .hb-date-empty, solange kein Wert gesetzt ist. */
.hb-inline-input[type="date"].hb-date-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
.hb-inline-input[type="date"].hb-date-empty:not(:focus) { color: transparent; }

/* ---- Zeilen-Aktionen (Stift/Papierkorb): unsichtbar bis zur Absicht ------------------ */
.hb-table tbody td .btn.border-0 {
    color: var(--hb-text-muted);
    opacity: 0.35;
    transition: opacity var(--hb-transition), color var(--hb-transition);
}
.hb-table tbody tr:hover td .btn.border-0,
.hb-table tbody td .btn.border-0:focus-visible { opacity: 1; }
.hb-table tbody td .btn.border-0:hover {
    background: transparent;
    color: var(--hb-text-strong);
}
.hb-table tbody td .btn-outline-danger.border-0:hover { color: var(--hb-danger); }

/* ---- Filter-Bar ------------------------------------------------------------------------ */
.hb-filter-bar {
    background: var(--hb-surface);
    border: 1px solid var(--hb-border);
    box-shadow: var(--hb-shadow-sm);
}
.hb-filter-bar .form-control,
.hb-filter-bar .form-select {
    background-color: var(--hb-bg);
    border-color: var(--hb-border);
}
.hb-filter-bar .form-control:focus,
.hb-filter-bar .form-select:focus {
    background-color: var(--hb-surface);
}
.hb-filter-bar label { color: var(--hb-text-muted); }

/* ---- Dropzone ----------------------------------------------------------------------------- */
.hb-dropzone {
    border: 2px dashed var(--hb-text-muted);
    background: var(--hb-surface);
    color: var(--hb-text-muted);
}
.hb-dropzone--active {
    border-color: var(--hb-primary);
    background: var(--hb-primary-soft);
    color: var(--hb-text-strong);
}

/* ---- Button-Group-Pills (Schnellfilter / What-if) -------------------------------------------- */
.btn-group .btn,
.btn-group-sm .btn { border-radius: 0; }
.btn-group .btn:first-child,
.btn-group-sm .btn:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.btn-group .btn:last-child,
.btn-group-sm .btn:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }

/* Gewählter Zustand einheitlich in Mauve — die Bedeutung trägt das Label,
   nicht die Farbe (Salbei-Regel: Grün nur an Schlüsselmomenten). */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-success,
.btn-check:checked + .btn-outline-warning,
.btn-check:checked + .btn-outline-info {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #221520;
}

/* ---- Info-Card (What-if-Block etc.) ------------------------------------------------------------ */
.hb-card .hb-card-body strong {
    color: var(--hb-text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hb-card .hb-card-body strong + span#wbSum,
.hb-card .hb-card-body span.fs-5 {
    font-family: var(--hb-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--hb-text-strong);
    letter-spacing: -0.01em;
}

/* ---- Action-Bar: ruhiger Masthead ---------------------------------------------------------------- */
.hb-action-bar {
    align-items: flex-end;
    padding-bottom: 0.9rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--hb-border);
    position: relative;
}
.hb-action-bar h1,
.hb-action-bar h2 {
    font-family: var(--hb-font-display);
    color: var(--hb-text-strong);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.hb-action-bar .hb-count {
    font-family: var(--hb-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--hb-primary);
    background: transparent;
    border: 0;
    padding: 0;
    letter-spacing: 0;
    vertical-align: baseline;
    transform: none;
    position: relative;
    top: -0.2em;
}
.hb-action-bar .hb-count::before {
    content: '·';
    color: var(--hb-text-muted);
    margin-right: 0.5em;
    font-family: var(--hb-font-display);
    font-weight: 400;
}

/* ---- Charts: dunkle Canvas-Karten ------------------------------------------------------------------ */
.hb-chart-card {
    background: var(--hb-surface);
    border: 1px solid var(--hb-border);
    position: relative;
    overflow: hidden;
}

/* ---- Start: Begrüßung + Karten-Zeilen (E2) --------------------------------------------------------- */
.hb-start-greet {
    font-family: var(--hb-font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--hb-text-strong);
    margin: 0 0 1.25rem;
}
.hb-start-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.3rem 0;
    font-size: 0.92rem;
}
.hb-start-row > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hb-start-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--hb-text-muted);
}
.hb-start-link::after { content: ' →'; }
.hb-start-link:hover { color: var(--hb-primary); text-decoration: none; }

/* ---- Verwaltung: Link-Karten (E2) ------------------------------------------------------------------ */
.hb-link-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    background: var(--hb-surface);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    padding: 0.9rem 1rem;
    color: var(--hb-text);
    font-weight: 500;
    line-height: 1.3;
    transition: border-color var(--hb-transition), background-color var(--hb-transition);
}
.hb-link-card:hover {
    border-color: var(--hb-primary);
    background: var(--hb-surface-alt);
    color: var(--hb-text-strong);
    text-decoration: none;
}
.hb-link-card i { color: var(--hb-text-muted); width: 1.2rem; text-align: center; flex-shrink: 0; }
.hb-link-card:hover i { color: var(--hb-primary); }
.hb-link-card .small { color: var(--hb-text-muted); font-weight: 400; }

/* ---- Motion: nur Zustands-Feedback, keine Choreografie ---------------------------------------------- */
/* Bewusst entfernt gegenüber Confessions: Puls-Atmen der Zahlen,
   Bass-Drop-Entrances, Silk-Sweep, Acid-Flash. Übergänge bleiben
   funktional (Hover, Focus) über --hb-transition (180 ms). */

/* Reduced Motion: Übergänge fast aus */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 60ms !important; animation: none !important; }
}