:root {
    --tblr-primary: var(--cp-color-primary);
    /*
     * Bootstraps/Tablers generische "secondary"-Hilfsklassen (.text-secondary,
     * .bg-secondary, .border-secondary) sind in der Praxis neutrale/gedaempfte
     * Standardfarben (Hinweistexte, Metadaten), keine Chor-Akzentfarbe. Sie
     * duerfen deshalb NICHT an --cp-color-secondary (Highlight sekundaer)
     * gekoppelt sein, sonst faerben Highlightfarben ungewollt in Tabellen,
     * Hinweistexten usw. durch. Buttons nutzen ohnehin eigene, direkt
     * ueberschriebene --cp-button-secondary-*-Tokens (siehe unten).
     */
    --tblr-secondary: var(--cp-color-muted);
    --tblr-body-bg: var(--cp-color-background);
    --tblr-body-color: var(--cp-color-text);
    --tblr-border-color: var(--cp-color-border);
    --tblr-font-sans-serif: var(--cp-font-family);
    --tblr-border-radius: var(--cp-border-radius);
    --tblr-success: var(--cp-color-status-success);
    --tblr-warning: var(--cp-color-status-warning);
    --tblr-danger: var(--cp-color-status-danger);
    --tblr-info: var(--cp-color-status-info);

    /*
     * Tabellen-Farbslots (Bootstrap-5.3-Theming-API, von Tabler mit
     * --tblr-Praefix uebernommen): bewusst nur aus --cp-table-bg/-text
     * abgeleitet (Hintergrund/Text gegenueber der Kachel vertauscht), NIE
     * aus den Highlightfarben, damit gestreifte/gehoverte Zeilen immer
     * lesbar bleiben.
     */
    --tblr-table-bg: var(--cp-table-bg);
    --tblr-table-color: var(--cp-table-text);
    --tblr-table-border-color: var(--cp-table-border);
    --tblr-table-striped-bg: var(--cp-table-stripe-bg);
    --tblr-table-striped-color: var(--cp-table-text);
    --tblr-table-hover-bg: var(--cp-table-hover-bg);
    --tblr-table-hover-color: var(--cp-table-text);
    --tblr-table-active-bg: var(--cp-table-hover-bg);
    --tblr-table-active-color: var(--cp-table-text);
}

/*
 * Surface-Komponenten: Kacheln/Karten/Listen/Menues sollen nie als feste
 * helle Flaeche auf einem dunklen Chor-Theme stehen bleiben. Direkte
 * Eigenschaften statt Tabler-interner Variablennamen, damit die Regel unab-
 * haengig von der genauen Tabler-Version robust ueber die Ladereihenfolge
 * (tabler.min.css vor tabler-adapter.css) gewinnt.
 */
.card {
    background-color: var(--cp-color-surface);
    color: var(--cp-color-surface-text);
    border-color: var(--cp-color-surface-border);
    border-radius: var(--cp-radius-md);
}

.card-body,
.card-header,
.card-footer {
    background-color: transparent;
    color: inherit;
    border-color: var(--cp-color-surface-border);
}

.table {
    background-color: var(--cp-table-bg);
    color: var(--cp-table-text);
    border-color: var(--cp-table-border);
}

.table > :not(caption) > * > * {
    background-color: var(--cp-table-bg);
    color: var(--cp-table-text);
    border-bottom-color: var(--cp-table-border);
}

/*
 * Direkte Ueberschreibung mit derselben strukturellen Spezifitaet wie
 * Bootstraps eigene .table-striped/.table-hover-Regeln (Klasse + Element +
 * Element/Pseudoklasse + Universalselektor). Bei gleicher Spezifitaet
 * gewinnt die spaeter geladene Regel, also diese hier - unabhaengig davon,
 * ob die --tblr-table-*-Variablen oben tatsaechlich exakt greifen.
 */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--cp-table-stripe-bg);
    color: var(--cp-table-text);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--cp-table-bg);
    color: var(--cp-table-text);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--cp-table-hover-bg);
    color: var(--cp-table-text);
}

/*
 * Tabellenkopf: bewusst keine Highlightfarbe als Flaeche - nur Typografie
 * (fett, Grossbuchstaben) hebt den Header hervor, Hintergrund bleibt
 * identisch zum Tabellenkoerper.
 */
.table > thead > tr > th {
    background-color: var(--cp-table-bg);
    color: var(--cp-table-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
    border-bottom-width: 2px;
    border-bottom-color: var(--cp-table-border);
}

/* Mobiloptimierung: kompaktere Zellen und lesbare Schriftgroesse auf kleinen Bildschirmen. */
@media (max-width: 575.98px) {
    .table > :not(caption) > * > * {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }

    .table > thead > tr > th {
        font-size: 0.68rem;
        letter-spacing: 0.03em;
    }
}

.list-group-item {
    background-color: var(--cp-color-surface);
    color: var(--cp-color-surface-text);
    border-color: var(--cp-color-surface-border);
    border-radius: var(--cp-radius-sm);
}

.dropdown-menu {
    background-color: var(--cp-color-surface);
    color: var(--cp-color-surface-text);
    border-color: var(--cp-color-surface-border);
    border-radius: var(--cp-radius-md);
}

.dropdown-item {
    color: var(--cp-color-surface-text);
}

.modal-content {
    background-color: var(--cp-color-surface);
    color: var(--cp-color-surface-text);
    border-color: var(--cp-color-surface-border);
    border-radius: var(--cp-radius-lg);
}

.text-muted {
    color: var(--cp-color-surface-muted) !important;
}

.badge {
    border-radius: var(--cp-radius-pill);
}

/*
 * Formularfelder: eigene Form-Tokens statt Surface-Tokens, damit Inputs
 * unabhaengig von der umgebenden Kachel immer lesbar bleiben (nie fest weiss).
 */
.form-control,
.form-select {
    background-color: var(--cp-form-bg);
    color: var(--cp-form-text);
    border-color: var(--cp-form-border);
    border-radius: var(--cp-radius-sm);
}

.form-control::placeholder {
    color: var(--cp-form-placeholder);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--cp-form-text);
    background-color: var(--cp-form-bg);
    border-color: var(--cp-form-focus-border);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--cp-form-focus-border) 35%, transparent);
}

/*
 * Bootstrap/Tabler geben .form-control:disabled und [readonly] eine eigene,
 * spezifischere Regel (Klasse + Pseudoklasse/Attribut) als die einfache
 * .form-control-Klasse oben. Ohne diese explizite Ueberschreibung wuerde
 * z. B. die deaktivierte Formularfeld-Vorschau auf der Owner-Designseite
 * wieder auf Tablers festen hellen Default zurueckfallen.
 */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--cp-form-bg);
    color: var(--cp-form-text);
    border-color: var(--cp-form-border);
    opacity: 1;
}

.form-label {
    color: var(--cp-color-surface-text);
}

.form-check-input {
    background-color: var(--cp-form-bg);
    border-color: var(--cp-form-border);
}

.form-check-input:checked {
    background-color: var(--cp-button-primary-bg);
    border-color: var(--cp-button-primary-bg);
}

.form-check-label {
    color: var(--cp-color-surface-text);
}

/*
 * Buttons (vereinfachtes Modell, Phase 6.2): Primaerbutton besteht aus genau
 * einer Farbflaeche, der Sekundaerbutton wird ausschliesslich aus der
 * Primaerbutton-Hintergrundfarbe als transparenter Outline-Button abgeleitet.
 */
.btn-primary,
.btn-dark {
    background-color: var(--cp-button-primary-bg);
    border-color: var(--cp-button-primary-bg);
    color: var(--cp-button-primary-text);
    border-radius: var(--cp-radius-sm);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: var(--cp-button-primary-hover-bg);
    border-color: var(--cp-button-primary-hover-bg);
    color: var(--cp-button-primary-text);
}

/*
 * Bootstrap/Tabler geben .btn:disabled/.btn.disabled eine Klasse+Pseudoklasse-
 * bzw. Doppelklassen-Regel (Spezifitaet 0,0,2,0), die die einfache
 * .btn-primary-Klasse (0,0,1,0) unabhaengig von der Ladereihenfolge
 * ueberschreibt. Ohne diese explizite Ueberschreibung faellt z. B. der
 * deaktivierte Vorschau-Button auf Tablers grauen Default zurueck.
 */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-dark:disabled,
.btn-dark.disabled {
    background-color: var(--cp-button-primary-bg);
    border-color: var(--cp-button-primary-bg);
    color: var(--cp-button-primary-text);
    opacity: 0.65;
}

.btn-outline-dark,
.btn-secondary {
    background-color: var(--cp-button-secondary-bg);
    border-color: var(--cp-button-secondary-border);
    color: var(--cp-button-secondary-text);
    border-radius: var(--cp-radius-sm);
}

.btn-outline-dark:disabled,
.btn-outline-dark.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: var(--cp-button-secondary-bg);
    border-color: var(--cp-button-secondary-border);
    color: var(--cp-button-secondary-text);
    opacity: 0.65;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--cp-button-secondary-hover-bg);
    border-color: var(--cp-button-secondary-border);
    color: var(--cp-button-secondary-text);
}

/*
 * Buttons innerhalb von Tabellenzeilen: Im Chorbereich hat die Tabelle
 * Hintergrund/Text gegenueber der Kachel vertauscht (--cp-table-bg/
 * --cp-table-text, siehe components/app/theme_style_override.html.twig); im
 * Ownerbereich entspricht --cp-table-bg/-text unveraendert der Kachel-Optik
 * (siehe tokens.css). In beiden Faellen koennte ein Button mit den normalen
 * --cp-button-*-Tokens auf der Tabellenflaeche zu wenig Kontrast haben (z. B.
 * Text/Rand in derselben Farbe wie der Tabellenhintergrund). Buttons in
 * Tabellenzeilen leiten ihre Farben daher immer aus den Tabellen-Tokens
 * (--cp-table-bg/--cp-table-text) statt aus den normalen Button-Tokens ab.
 */
.table .btn-primary,
.table .btn-dark {
    background-color: var(--cp-table-text);
    border-color: var(--cp-table-text);
    color: var(--cp-table-bg);
}

.table .btn-primary:hover,
.table .btn-primary:focus,
.table .btn-primary:active,
.table .btn-primary:disabled,
.table .btn-primary.disabled,
.table .btn-dark:hover,
.table .btn-dark:focus,
.table .btn-dark:active,
.table .btn-dark:disabled,
.table .btn-dark.disabled {
    background-color: color-mix(in srgb, var(--cp-table-text) 85%, black 15%);
    border-color: color-mix(in srgb, var(--cp-table-text) 85%, black 15%);
    color: var(--cp-table-bg);
}

.table .btn-outline-dark,
.table .btn-secondary {
    background-color: transparent;
    border-color: var(--cp-table-text);
    color: var(--cp-table-text);
}

.table .btn-outline-dark:hover,
.table .btn-outline-dark:focus,
.table .btn-outline-dark:active,
.table .btn-outline-dark:disabled,
.table .btn-outline-dark.disabled,
.table .btn-secondary:hover,
.table .btn-secondary:focus,
.table .btn-secondary:active,
.table .btn-secondary:disabled,
.table .btn-secondary.disabled {
    background-color: color-mix(in srgb, var(--cp-table-text) 12%, transparent);
    border-color: var(--cp-table-text);
    color: var(--cp-table-text);
}