/* betterFiBu — wiederverwendbare UI-Bausteine auf Basis der CI-Tokens (tokens.css).
   Global geladen (App.razor). Zwei Ebenen: (1) explizite bp-*-Bausteine (Kacheln, Donut, .bp-card,
   .bp-surface) für Custom-Komposition; (2) automatisches Theming ALLER SfGrid/SfCard im eingeloggten
   App-Bereich (Selektoren unter `.body-container` — Auth-/Login-Flow nutzt ein anderes Layout und bleibt
   unberührt). Neue App-Seiten brauchen so i.d.R. KEINE Klassen mehr — Grid/Card werden automatisch gethemed. */

/* ============================================================
   Arbeitsfläche einer Seite (dunkles Navy)
   ============================================================ */
.bp-surface {
    background: var(--bp-surface);
    color: var(--bp-text);
}

/* ============================================================
   Card / Panel — logische Trennung von Inhaltsblöcken
   ============================================================ */
.bp-card {
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
    padding: var(--bp-space-3);
}

/* Sektions-Überschrift in Formular-/Verwaltungsseiten (gelber CI-Balken links).
   Ersetzt die frühere Bootstrap-Kombination border-start/border-3/ps-2/fw-semibold. */
.bp-section-title {
    margin: 0;
    font-family: var(--bp-font-head);
    font-size: 1rem;
    font-weight: 600;
    border-left: 3px solid var(--bp-yellow);
    padding-left: var(--bp-space-2);
}

/* ============================================================
   Statistik-Kacheln (KPI-Row über datenlastigen Listen)
   Spaltenzahl über --bp-stat-cols steuerbar (Default 6).
   ============================================================ */
.bp-stat-tiles {
    display: grid;
    grid-template-columns: repeat(var(--bp-stat-cols, 6), minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 1500px) {
    .bp-stat-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bp-stat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 120px;
    padding: 1rem 1.1rem;
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-left: 3px solid var(--bp-text-muted);
    border-radius: var(--bp-radius-lg);
}

/* Farbakzent je Kachel (linker Rand) — semantisch, nicht dekorativ */
.bp-stat-tile--credit { border-left-color: var(--bp-credit); }
.bp-stat-tile--debit { border-left-color: var(--bp-debit); }
.bp-stat-tile--saldo { border-left-color: var(--bp-saldo); }
.bp-stat-tile--success { border-left-color: var(--bp-success); }
.bp-stat-tile--accent { border-left-color: var(--bp-yellow); }

/* betterXRM-Modulthema: im XRM-Bereich ist der Marken-Akzent Lila statt CI-Gelb. Da alle
   Akzent-Regeln var(--bp-yellow) nutzen, biegt EIN Token-Override den kompletten XRM-Content
   (Kacheln, Grid-Pager, Suche, Pipeline-Highlights) auf Lila — ohne FiBu zu berühren.
   Wird über die Klasse .xrm-theme an den XRM-Seiten-Wurzeln aktiviert. */
.xrm-theme { --bp-yellow: var(--bp-purple); }

.bp-stat-tile__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bp-stat-tile__icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--bp-text-muted);
}

.bp-stat-tile__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
}

.bp-stat-tile__value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.bp-stat-tile--credit .bp-stat-tile__value,
.bp-stat-tile__value--credit { color: var(--bp-credit); }
.bp-stat-tile--debit .bp-stat-tile__value,
.bp-stat-tile__value--debit { color: var(--bp-debit); }

.bp-stat-tile__delta {
    font-size: 0.78rem;
    color: var(--bp-text-muted);
    margin-top: auto;
}

.bp-stat-tile__delta strong { color: var(--bp-text); }
.bp-stat-tile__delta .bp-accent { color: var(--bp-yellow); font-weight: 600; }

/* Mini-Balken (Sparkline) in Einnahmen/Ausgaben-Kacheln */
.bp-spark {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 34px;
    margin-top: auto;
}

.bp-spark__bar {
    flex: 1 1 0;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    opacity: 0.55;
    background: var(--bp-credit);
}

.bp-spark--debit .bp-spark__bar { background: var(--bp-debit); }
.bp-spark__bar:last-child { opacity: 1; }

/* Donut (Quote/Anteil) — reines CSS, kein Chart-Paket. Prozent über --bp-pct (0–100). */
.bp-donut {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(var(--bp-success) calc(var(--bp-pct, 0) * 1%), rgba(255, 255, 255, 0.08) 0);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.bp-donut::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--bp-surface);
}

.bp-donut__label {
    position: relative;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bp-legend {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--bp-text-muted);
}

.bp-legend__item { display: flex; align-items: center; gap: 0.4rem; }

.bp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bp-dot--success { background: var(--bp-success); }
.bp-dot--debit { background: var(--bp-debit); }
.bp-dot--warn { background: var(--bp-warn); }

/* Ampel-Punkt (Zuordnungsstatus in Grid-Zellen) */
.bp-status-light {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.bp-status-light--full { background: var(--bp-success); }
.bp-status-light--partial { background: var(--bp-warn); }
.bp-status-light--none { background: var(--bp-debit); }

/* Betrag: Gutschrift grün, Ausgabe rot */
.bp-amount--credit { color: var(--bp-credit); font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-amount--debit { color: var(--bp-debit); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Navigations-Link in Zellen (betterprojects-Akzent) */
.bp-cell-link { color: var(--bp-yellow); cursor: pointer; }
.bp-cell-link:hover { text-decoration: underline; }

/* Ellipsis für lange Zelltexte (voller Text per title-Tooltip) */
.bp-ellipsis {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ============================================================
   Suchfeld (Syncfusion e-input-group) — opt-in via .bp-search
   (Wrapper der geteilten GridSearchBox-Komponente)
   ============================================================ */
/* Default-Breite, damit die Suche in Toolbars/Dialogen nicht kollabiert; Seiten dürfen breiter stylen. */
.bp-search {
    min-width: 280px;
}

.bp-search .e-input-group,
.bp-search .e-input-group.e-control-wrapper {
    background: var(--bp-panel-hover) !important;
    border: 1px solid var(--bp-panel-border) !important;
    border-radius: 8px !important;
    padding: 0.1rem 0.6rem !important;
}

.bp-search .e-input-group input.e-input,
.bp-search input.e-searchinput {
    color: var(--bp-text) !important;
    background: transparent !important;
}

.bp-search .e-input-group input.e-input::placeholder { color: var(--bp-text-muted) !important; }

.bp-search .e-input-group .e-input-group-icon,
.bp-search .e-input-group .e-search {
    color: var(--bp-text-muted) !important;
    background: transparent !important;
}

/* ============================================================
   Toolbar-Buttons über Grids — opt-in via .bp-tool-btn (SfButton/SfDropDownButton).
   Ruhige Outline-Buttons mit Icon + Label; das kräftige Primär-Blau bleibt den
   Dock-CTAs vorbehalten. --danger = destruktive Aktion (rot erst beim Hover),
   --active = gesetzter Filter (CI-Gelb).
   ============================================================ */
.bp-tool-btn.e-btn,
.bp-tool-btn.e-dropdown-btn {
    background: transparent;
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl, 8px);
    box-shadow: none;
    color: var(--bp-text-muted);
    font-weight: 500;
}

.bp-tool-btn.e-btn:hover:not(:disabled),
.bp-tool-btn.e-btn:focus:not(:disabled),
.bp-tool-btn.e-btn.e-active,
.bp-tool-btn.e-dropdown-btn:hover:not(:disabled),
.bp-tool-btn.e-dropdown-btn:focus:not(:disabled),
.bp-tool-btn.e-dropdown-btn.e-active {
    background: var(--bp-panel-hover);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--bp-text);
    box-shadow: none;
}

.bp-tool-btn.e-btn .e-btn-icon,
.bp-tool-btn.e-dropdown-btn .e-btn-icon,
.bp-tool-btn.e-dropdown-btn .e-caret { color: inherit; }

.bp-tool-btn.e-btn:disabled {
    background: transparent;
    border-color: var(--bp-panel-border);
    color: var(--bp-text-faint, #5E7183);
}

/* Destruktiv: bleibt ruhig, zeigt erst bei Interaktion Rot. */
.bp-tool-btn--danger.e-btn:hover:not(:disabled),
.bp-tool-btn--danger.e-btn:focus:not(:disabled) {
    border-color: var(--bp-debit);
    color: var(--bp-debit);
    background: color-mix(in srgb, var(--bp-debit) 10%, transparent);
}

/* Aktiver Filter: CI-Gelb signalisiert „hier greift gerade eine Einschränkung". */
.bp-tool-btn--active.e-btn,
.bp-tool-btn--active.e-btn:hover:not(:disabled),
.bp-tool-btn--active.e-btn:focus:not(:disabled),
.bp-tool-btn--active.e-dropdown-btn,
.bp-tool-btn--active.e-dropdown-btn:hover:not(:disabled),
.bp-tool-btn--active.e-dropdown-btn:focus:not(:disabled) {
    border-color: rgba(230, 255, 3, 0.45);
    color: var(--bp-yellow);
}

/* ============================================================
   SfCard als Panel + Grid-Theme — AUTOMATISCH für den App-Bereich (.body-container).
   Legt Grids transparent über das Card-/Navy-Panel, gedämpfte Header, dünne Trenner,
   ruhiger Hover, Akzent-Pager. Auth-Flow (anderes Layout) bleibt unberührt.
   ============================================================ */

/* SfCard = Panel (logische Trennung). Auth-Cards (.bp-auth-card .e-card) sind spezifischer und bleiben. */
.body-container .e-card {
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
}

.body-container .e-grid,
.body-container .e-grid .e-gridcontent,
.body-container .e-grid .e-content,
.body-container .e-grid .e-table,
.body-container .e-grid .e-gridheader,
.body-container .e-grid .e-headercontent {
    background: transparent;
    border-color: var(--bp-panel-border);
}

.body-container .e-grid {
    border: none;
    color: var(--bp-text);
}

.body-container .e-grid .e-headercell {
    background: transparent;
    border-bottom: 1px solid var(--bp-panel-border);
}

.body-container .e-grid .e-headercelldiv {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
}

.body-container .e-grid td.e-rowcell {
    background: transparent;
    border-color: var(--bp-panel-border);
    color: var(--bp-text);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.body-container .e-grid .e-altrow td.e-rowcell { background: transparent; }

/* Hover + Auswahl: ruhiger heller Ton / leichter Akzent statt Syncfusion-Blau */
.body-container .e-grid tr.e-row:hover td.e-rowcell {
    background: var(--bp-panel-hover) !important;
}

.body-container .e-grid td.e-rowcell.e-selectionbackground,
.body-container .e-grid tr.e-row.e-active td.e-rowcell {
    background: rgba(230, 255, 3, 0.10) !important;
    color: var(--bp-text) !important;
}

.body-container .e-grid .e-detailrowcollapse,
.body-container .e-grid .e-detailrowexpand,
.body-container .e-grid .e-detailindentcell {
    background: transparent;
}

/* Pager */
.body-container .e-grid .e-gridpager,
.body-container .e-grid .e-gridpager .e-pagercontainer {
    background: transparent !important;
    border-color: var(--bp-panel-border);
    color: var(--bp-text-muted) !important;
}

.body-container .e-grid .e-gridpager .e-numericitem,
.body-container .e-grid .e-gridpager .e-link,
.body-container .e-grid .e-gridpager .e-pagesizes,
.body-container .e-grid .e-gridpager .e-pagerconstant {
    background: transparent !important;
    color: var(--bp-text-muted) !important;
    border-color: var(--bp-panel-border) !important;
}

.body-container .e-grid .e-gridpager .e-numericitem.e-currentitem,
.body-container .e-grid .e-gridpager .e-currentitem {
    background: var(--bp-yellow) !important;
    color: var(--bp-black) !important;
    border-radius: 6px !important;
}

.body-container .e-grid .e-gridpager .e-icons { color: var(--bp-text-muted) !important; }

/* Grid-Toolbar + eingebaute Suche (Toolbar="Search") ans dunkle Design angleichen */
.body-container .e-grid .e-toolbar,
.body-container .e-grid .e-toolbar .e-toolbar-items,
.body-container .e-grid .e-toolbar .e-toolbar-item {
    background: transparent !important;
    border-color: var(--bp-panel-border) !important;
}

.body-container .e-grid .e-toolbar .e-input-group {
    background: var(--bp-panel-hover) !important;
    border: 1px solid var(--bp-panel-border) !important;
    border-radius: 8px !important;
}

.body-container .e-grid .e-toolbar .e-input-group input.e-input {
    color: var(--bp-text) !important;
    background: transparent !important;
}

.body-container .e-grid .e-toolbar .e-input-group input.e-input::placeholder { color: var(--bp-text-muted) !important; }

.body-container .e-grid .e-toolbar .e-input-group .e-search-icon,
.body-container .e-grid .e-toolbar .e-input-group .e-clear-icon {
    color: var(--bp-text-muted) !important;
}