/* AUFTRAG-CI-ROLLOUT-CC.md Paket B: mappt die Kernklassen von Bootstrap 4 (und
   die sichtbaren Elemente von Alertify) auf die CI-Tokens aus
   ci.css - KEINE Konsolidierung der UI-Frameworks (das ist ein anderer,
   spaeterer Auftrag), nur Farb-/Typo-Theming. (Die Syncfusion-Regeln sind mit
   dem Paket-Ausbau entfallen, AUFTRAG-DEPENDENCY-DIAET Etappe 1.) Deshalb NACH allen
   Framework-Stylesheets eingebunden (index.html), damit diese Regeln ohne
   !important gewinnen. */

/* --- Bootstrap 4: Buttons --- */
.btn-primary {
    background-color: var(--tim-tomate);
    border-color: var(--tim-tomate);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--tim-tomate-tief) !important;
    border-color: var(--tim-tomate-tief) !important;
}

.btn-secondary {
    background-color: var(--tim-aubergine);
    border-color: var(--tim-aubergine);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--tim-aubergine-tief) !important;
    border-color: var(--tim-aubergine-tief) !important;
}

/* Bootstrap 4's eigene .btn-*:disabled-Regel hat hoehere Spezifitaet als eine
   einfache Klassen-Regel und gewinnt sonst trotz spaeterer Einbindung dieser
   Datei (Cascade: Spezifitaet vor Quellreihenfolge) - fiel sonst auf
   Bootstrap-Blau/Grau zurueck, sichtbar u.a. bei @if(...)-disabled Buttons. */
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--tim-tomate);
    border-color: var(--tim-tomate);
}

.btn-secondary:disabled, .btn-secondary.disabled {
    background-color: var(--tim-aubergine);
    border-color: var(--tim-aubergine);
}

.btn-success:disabled, .btn-success.disabled {
    background-color: var(--tim-minze);
    border-color: var(--tim-minze);
}

.btn-warning:disabled, .btn-warning.disabled {
    background-color: var(--tim-honig);
    border-color: var(--tim-honig);
}

.btn-danger:disabled, .btn-danger.disabled {
    background-color: var(--tim-fehler);
    border-color: var(--tim-fehler);
}

.btn-info:disabled, .btn-info.disabled {
    background-color: var(--tim-minze-tief);
    border-color: var(--tim-minze-tief);
}

/* --- Links --- */
a,
.btn-link {
    color: var(--tim-aubergine);
}

a:hover,
.btn-link:hover {
    color: var(--tim-aubergine-tief);
}

/* --- Fehler-/Erfolgs-/Warn-Zustaende --- */
.text-danger {
    color: var(--tim-fehler) !important;
}

.alert-danger {
    color: var(--tim-fehler);
    background-color: color-mix(in srgb, var(--tim-fehler) 12%, white);
    border-color: color-mix(in srgb, var(--tim-fehler) 30%, white);
}

.badge-danger {
    background-color: var(--tim-fehler);
}

.text-success {
    color: var(--tim-minze-tief) !important;
}

.alert-success {
    color: var(--tim-minze-tief);
    background-color: var(--tim-minze-flaeche);
    border-color: var(--tim-minze);
}

.badge-success {
    background-color: var(--tim-minze);
}

.text-warning {
    color: var(--tim-honig-tief) !important;
}

.alert-warning {
    color: var(--tim-honig-tief);
    background-color: var(--tim-honig-flaeche);
    border-color: var(--tim-honig);
}

.badge-warning {
    background-color: var(--tim-honig);
}

/* --- Formulare --- */
.form-control {
    border-color: var(--tim-aubergine-flaeche);
}

.form-control:focus {
    border-color: var(--tim-tomate);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--tim-tomate) 25%, transparent);
}

/* --- Fokus-Ringe app-weit --- */
:focus-visible {
    outline: 2px solid var(--tim-tomate);
    outline-offset: 1px;
}

/* --- Alertify --- */
.alertify .ajs-dialog {
    border-radius: var(--tim-radius-lg);
}

.alertify .ajs-header {
    background-color: var(--tim-aubergine);
    color: var(--tim-sand);
}

.alertify .ajs-footer .ajs-button.ajs-ok {
    color: var(--tim-tomate);
}

.alertify .ajs-footer .ajs-button.ajs-cancel {
    color: var(--tim-aubergine);
}

/* --- AUFTRAG-CI-ROLLOUT-CC.md Paket D: die restlichen Bootstrap-Kontext-
   klassen (ButtonStyle/BorderStyle/BackgroundStyle-Enums in Client/Shared
   nutzen sie app-weit, u.a. InfoBox) durchgaengig auf die CI-Familien. --- */
.btn-success {
    background-color: var(--tim-minze);
    border-color: var(--tim-minze);
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--tim-minze-tief) !important;
    border-color: var(--tim-minze-tief) !important;
}

.btn-warning {
    background-color: var(--tim-honig);
    border-color: var(--tim-honig);
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: var(--tim-honig-tief) !important;
    border-color: var(--tim-honig-tief) !important;
}

.btn-danger {
    background-color: var(--tim-fehler);
    border-color: var(--tim-fehler);
}

.btn-info {
    background-color: var(--tim-minze-tief);
    border-color: var(--tim-minze-tief);
}

.border-primary { border-color: var(--tim-tomate) !important; }
.border-secondary { border-color: var(--tim-aubergine) !important; }
.border-success { border-color: var(--tim-minze) !important; }
.border-warning { border-color: var(--tim-honig) !important; }
.border-danger { border-color: var(--tim-fehler) !important; }

.bg-primary { background-color: var(--tim-tomate) !important; }
.bg-secondary { background-color: var(--tim-aubergine) !important; }
.bg-success { background-color: var(--tim-minze) !important; }
.bg-warning { background-color: var(--tim-honig) !important; }
.bg-danger { background-color: var(--tim-fehler) !important; }

/* --- Pagination.razor (Bootstrap .pagination) --- */
.page-item.active .page-link {
    background-color: var(--tim-tomate);
    border-color: var(--tim-tomate);
}

.page-link {
    color: var(--tim-aubergine);
}

.page-link:hover {
    color: var(--tim-tomate-tief);
}

/* --- Modal (Client/Components/Modal.razor) - Header Aubergine, Radien vereinheitlicht --- */
.modal-content {
    border-radius: var(--tim-radius-lg);
}

.modal-header {
    background: var(--tim-aubergine);
    color: var(--tim-sand);
    border-top-left-radius: var(--tim-radius-lg);
    border-top-right-radius: var(--tim-radius-lg);
}

.modal-header .close {
    color: var(--tim-sand);
    text-shadow: none;
}

/* --- MudTable (SItemListStart/SICatListPage - Tabellenkopf/Zebra/Hover) --- */
.mud-table-head {
    background-color: var(--tim-aubergine-flaeche);
}

.mud-table-head .mud-table-cell {
    color: var(--tim-aubergine-tief);
    font-weight: 700;
}

.mud-table-row:hover {
    background-color: var(--tim-tomate-flaeche) !important;
}

/* --- AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket E.3: die Naht zwischen dem
   Ablauf-Outliner / dem Bestuhlungs-Bauteil und dem Backoffice-Rahmen ---

   Beide rechnen mit den --pos-*-Tokens der Kassen-Palette. Die sind aber
   ausschliesslich auf `.pos-shell` definiert (pos-theme.css), und `.pos-shell`
   liegt nur auf Sidebar und Kopfleiste - NICHT auf `.content`, wo die
   Editor-Seiten leben. Eingebettet fielen die Tokens dort also samt und
   sonders aus: die Flaechen erbten irgendetwas, die Hairlines verschwanden.

   Die Bruecke gehoert laut Auftrag hierher und NICHT in die Bauteile: sie
   werden ausdruecklich nicht umgeschrieben (Leitplanke). Gemappt wird auf die
   Backoffice-Seite der CI (Sand/Weiss/Aubergine, Doc 20 Kap. 4) - der
   eingebettete Outliner laeuft ohnehin fest im Hell-Modus
   (EventPlanGraphEditor.ThemeAttribute: Embedded => "light"). Der VOLLBILD-Weg
   und die Kasse bleiben unberuehrt, weil die Regel an `.eo-embedded` bzw. an
   den Backoffice-Rahmen gebunden ist und `.pos-shell` weiterhin gewinnt, wo es
   gesetzt ist. */
.content .eo-embedded,
.content .eo-shell[data-theme="light"],
.content .event-bestuhlung,
.content .plan-panel {
    --pos-canvas: transparent;
    --pos-panel: #FFFFFF;
    --pos-surface: #FFFFFF;
    --pos-text: var(--tim-aubergine);
    --pos-muted: color-mix(in srgb, var(--tim-aubergine) 62%, transparent);
    --pos-faint: color-mix(in srgb, var(--tim-aubergine) 40%, transparent);
    --pos-hairline: var(--tim-aubergine-flaeche);
    /* Tomate auf hellem Grund leicht abgedunkelt - dieselbe Staffelung wie im
       Hell-Modus der Kasse (pos-theme.css). */
    --pos-accent: var(--tim-tomate-tief);
    --pos-go: var(--tim-minze-tief);
    --pos-on-go: #FFFFFF;
    --pos-mulde-bg: color-mix(in srgb, var(--tim-sand) 70%, transparent);
    --pos-shadow-rest: 0 2px 4px rgba(59, 44, 53, .12);
    --pos-shadow-pressed: 0 1px 2px rgba(59, 44, 53, .09);
    --pos-radius-btn: var(--tim-radius);
    --pos-radius-tile: var(--tim-radius);
    --pos-radius-sheet: var(--tim-radius-lg);
    --pos-radius-mulde: var(--tim-radius-lg);
    --pos-tile-default: var(--tim-aubergine-flaeche);
}

/* Die VOLLBILD-Route des Outliners (/events/plan/{Id}) folgt weiterhin der
   Hell/Dunkel-Wahl des Nutzers - und stand im Dunkelmodus vor derselben Luecke
   (kein .pos-shell-Vorfahr im Inhaltsbereich, also gar keine Tokens). Werte
   1:1 aus pos-theme.css, damit Kasse und Vollbild-Outliner denselben Ton
   tragen. Der EINGEBETTETE Outliner ist davon nicht betroffen: er laeuft fest
   im Hellmodus (EventPlanGraphEditor.ThemeAttribute) und wird oben bedient. */
.content .eo-shell:not([data-theme="light"]) {
    --pos-canvas: #120D10;
    --pos-panel: #1C151A;
    --pos-surface: #271E24;
    --pos-text: #F7F1EA;
    --pos-muted: #9C8D93;
    --pos-faint: #6B5D62;
    --pos-hairline: #3B2C35;
    --pos-accent: var(--tim-tomate);
    --pos-go: var(--tim-minze);
    --pos-on-go: #FFFFFF;
    --pos-mulde-bg: rgba(247, 241, 234, .05);
    --pos-shadow-rest: 0 2px 4px rgba(0, 0, 0, .4);
    --pos-shadow-pressed: 0 1px 2px rgba(0, 0, 0, .3);
    --pos-radius-btn: var(--tim-radius);
    --pos-radius-tile: var(--tim-radius);
    --pos-radius-sheet: var(--tim-radius-lg);
    --pos-radius-mulde: var(--tim-radius-lg);
    --pos-tile-default: #5C6470;
    color-scheme: dark;
}

/* --- Blazor-Fehlerleiste (Doc 20-konform statt Bootstrap-Default) --- */
#blazor-error-ui {
    background: var(--tim-sand);
    color: var(--tim-aubergine);
    border-top: 1px solid var(--tim-aubergine-flaeche);
}

#blazor-error-ui .reload {
    color: var(--tim-tomate);
    font-weight: 600;
}