/*!
 * FireBot Design-Tokens — Fassung für Tabler
 *
 * Die Rollen (`--fb-*`) sind dieselben wie im Standard-Theme. Nur die Brücke
 * zielt woanders hin: Tabler benennt Bootstraps Variablen-Präfix von `--bs-`
 * auf `--tblr-` um und bringt rund 830 eigene mit.
 *
 * Genau deshalb ist die Brücke eine eigene Datei pro Theme — die Rollen bleiben
 * stabil, der Unterbau darf wechseln. Wer Farben ändern will, fasst nur
 * Abschnitt 1 an oder setzt die Werte über `theme.json` bzw. den Theme-Editor.
 *
 * @author FireDervil
 */

/* ==========================================================================
   1. ROLLEN — Standardwerte. theme.json und der Editor überschreiben sie.
   ========================================================================== */

:root {
    --fb-primary: #3498db;
    --fb-primary-rgb: 52, 152, 219;
    --fb-primary-hover: #2980b9;

    --fb-accent: #f39c12;
    --fb-accent-rgb: 243, 156, 18;

    --fb-link: #3498db;
    --fb-link-hover: #2980b9;

    --fb-body-bg: #f6f8fb;
    --fb-surface-bg: #ffffff;
    --fb-header-bg: #ffffff;
    --fb-sidebar-bg: #1d273b;

    --fb-text: #1e293b;
    --fb-text-muted: #667382;
    --fb-heading: #1e293b;

    --fb-sidebar-text: #adb5bd;
    --fb-sidebar-hover-bg: #2b3a55;
    --fb-sidebar-hover-text: #ffffff;
    --fb-sidebar-active-bg: #2b3a55;
    --fb-sidebar-active-text: #ffffff;

    --fb-success: #2fb344;
    --fb-warning: #f76707;
    --fb-danger: #d63939;
    --fb-info: #4299e1;

    --fb-border: #e6e7e9;
    --fb-radius: 4px;
}

/* ==========================================================================
   2. BRÜCKE — Rollen auf Tabler legen
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --tblr-primary: var(--fb-primary);
    --tblr-primary-rgb: var(--fb-primary-rgb);

    --tblr-body-bg: var(--fb-body-bg);
    --tblr-body-color: var(--fb-text);
    --tblr-muted: var(--fb-text-muted);
    --tblr-secondary: var(--fb-text-muted);

    --tblr-link-color: var(--fb-link);
    --tblr-link-hover-color: var(--fb-link-hover);

    --tblr-border-color: var(--fb-border);
    --tblr-border-radius: var(--fb-radius);

    --tblr-bg-surface: var(--fb-surface-bg);

    --tblr-success: var(--fb-success);
    --tblr-warning: var(--fb-warning);
    --tblr-danger: var(--fb-danger);
    --tblr-info: var(--fb-info);
}

/* --- Seitenrand ----------------------------------------------------------- */
/*
 * Tabler rechnet mit einem `.container-xl`: Der hat eine Höchstbreite und wird
 * zentriert, links und rechts bleibt von selbst Luft. Unser Layout nimmt
 * bewusst `.container-fluid` — volle Breite — und dort ist Tablers
 * `--tblr-page-padding` von 1rem der einzige Abstand zum Fensterrand. Das ist
 * auf einem breiten Bildschirm zu knapp: Der Inhalt klebt an der Seitenleiste.
 *
 * Aufgefallen ist es im Vergleich Dashboard ↔ Bug Report: Die alten Views
 * bringen ihren eigenen `.container-fluid` mit, verschachteln also zwei davon
 * und kommen so auf den doppelten Rand. Der sah richtig aus — nicht weil die
 * Verschachtelung richtig wäre, sondern weil 1rem zu wenig ist. Beim Entfernen
 * des alten Seitenrahmens (Stufe 5) verlöre sonst jede Seite der Reihe nach
 * ihren Rand.
 *
 * Die Mobil-Stufe hält Tablers eigenen Wert nach: Ohne sie würde die Regel hier
 * auch die Medienabfrage in `tabler.min.css` überschreiben, die den Rand auf
 * schmalen Geräten absichtlich kleiner hält.
 */
:root,
[data-bs-theme="light"] {
    --tblr-page-padding: var(--tblr-spacer-4);
}

@media (max-width: 991.98px) {
    :root,
    [data-bs-theme="light"] {
        --tblr-page-padding: var(--tblr-spacer-2);
    }
}

/* --- Karten und Tabellen -------------------------------------------------- */
.card {
    --tblr-card-bg: var(--fb-surface-bg);
    --tblr-card-border-color: var(--fb-border);
    --tblr-card-cap-bg: var(--fb-surface-bg);
    --tblr-card-color: var(--fb-text);
}

.table {
    --tblr-table-bg: var(--fb-surface-bg);
    --tblr-table-color: var(--fb-text);
    --tblr-table-border-color: var(--fb-border);
}

/* --- Abzeichen auf farbigem Grund ----------------------------------------- */
/*
 * Grauer Text auf grauem Grund — 2026-08-07 gefunden, Verhältnis 1:1.
 *
 * Tabler baut ein Abzeichen so:
 *
 *     .badge          { --tblr-badge-color: var(--tblr-secondary);
 *                       color: var(--tblr-badge-color); }
 *     .bg-secondary   { background-color: var(--tblr-secondary) !important; }
 *
 * Wer beides kombiniert — `class="badge bg-secondary"` — setzt Vorder- und
 * Hintergrund auf denselben Wert. Bei uns ist das `#667382`, also war der Text
 * schlicht unsichtbar, nicht bloß schwach. Betroffen waren rund 27 Stellen
 * quer durch alle Plugins ("Aus", "Deaktiviert", Zähler-Abzeichen).
 *
 * Die gemeinte Klasse heißt in Bootstrap 5.3 `text-bg-secondary` — die setzt
 * beides passend. Statt 27 Views nachzuziehen und beim nächsten `bg-secondary`
 * denselben Fehler zu bekommen, wird die Paarung hier einmal nachgereicht.
 *
 * Betroffen ist nicht nur Grau. Gemessen gegen unsere eigenen Markenfarben
 * (nicht Tablers Standardwerte!) war heute jede solide Variante unlesbar:
 *
 *     Variante   Grund      heute   weiß   dunkel   gewählt
 *     primary    #3498db     1,53   3,15    4,66    dunkel
 *     secondary  #667382     1,00   4,84    3,03    weiß
 *     success    #2fb344     1,76   2,74    5,35    dunkel
 *     danger     #d63939     1,04   4,66    3,15    weiß
 *     warning    #f76707     1,59   3,04    4,82    dunkel
 *     info       #4299e1     1,58   3,05    4,81    dunkel
 *     dark       #1e293b     3,02  14,63    1,00    weiß
 *     light      #f8fafc     4,63   1,05   14,03    dunkel
 *
 * Gewählt ist je Farbe der bessere der beiden Werte; alle acht liegen damit
 * über 4,5:1 und erfüllen WCAG AA für Fließtextgröße. Bei Grün, Orange und
 * Blau ist das ausdrücklich NICHT Tablers eigene Wahl — dessen `.text-bg-*`
 * setzt dort durchgängig fast-weiß und landet bei 2,7 bis 3,1:1.
 *
 * Die `-lt`-Varianten (`bg-secondary-lt` und Geschwister) sind nicht betroffen:
 * die bringen ihre Textfarbe selbst mit und bleiben unangetastet.
 */
.badge.bg-secondary,
.badge.bg-danger,
.badge.bg-dark {
    --tblr-badge-color: #ffffff;
}

.badge.bg-primary,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-info,
.badge.bg-light {
    --tblr-badge-color: #1f2937;
}

/*
 * Die Seitenleiste ist die einzige dunkle Insel im sonst hellen Dashboard
 * (`data-bs-theme="dark"` steht projektweit nur dort). Dort dreht Tabler
 * `--tblr-secondary` auf ein helles Grau — ein Abzeichen in der Seitenleiste
 * braucht deshalb den umgekehrten Kontrast.
 */
[data-bs-theme="dark"] .badge.bg-secondary {
    --tblr-badge-color: #1f2937;
}

/*
 * Weiß auf Weiß — derselbe Fehler in Tablers hellen Tönungen.
 *
 * Die `-lt`-Varianten setzen ihre Textfarbe zwar selbst, aber nach dem Muster
 * „Text = die kräftige Farbe, Grund = deren helle Tönung". Für `light` heißt
 * das:
 *
 *     .bg-light-lt { color:            #f9fafb !important;   ← fast weiß
 *                    background-color: rgb(254,254,255) !important; }
 *
 * Verhältnis 1,04:1, der Text ist unsichtbar. Bei allen anderen Farben geht
 * das Muster auf (grün auf hellgrün liest sich), nur `light` hat keine
 * kräftige Variante, gegen die es sich absetzen könnte.
 *
 * Im Projekt steckt das an 44 Stellen, meist als Platzhalter-Knopf
 * (`<code class="badge bg-light-lt border">{member:name}</code>`). An 27 davon
 * steht bereits ein handgeschriebenes `style="color: #000"` daneben — jemand
 * ist hier schon einmal gegen dieselbe Wand gelaufen und hat es örtlich
 * geflickt. Die übrigen 17 waren schlicht leer.
 *
 * Das `!important` ist hier nötig, weil Tabler die Farbe selbst mit
 * `!important` setzt. Die Inline-Notbehelfe in den Views bleiben wirksam
 * (Inline schlägt Stylesheet) und können nach und nach raus.
 *
 * Schließt Punkt 11.2 (Greeting: „Buttons sieht man, den Text darin nicht").
 */
.bg-light-lt {
    color: #1f2937 !important;
}

/* --- Obere Leiste --------------------------------------------------------- */
.navbar:not(.navbar-vertical) {
    --tblr-navbar-bg: var(--fb-header-bg);
    --tblr-navbar-border-color: var(--fb-border);
}

/* --- Seitenleiste --------------------------------------------------------- */
.navbar-vertical {
    --tblr-navbar-bg: var(--fb-sidebar-bg);
    --tblr-navbar-color: var(--fb-sidebar-text);
    --tblr-navbar-hover-color: var(--fb-sidebar-hover-text);
    --tblr-navbar-active-color: var(--fb-sidebar-active-text);
    --tblr-navbar-active-bg: var(--fb-sidebar-active-bg);
    --tblr-navbar-brand-color: var(--fb-sidebar-hover-text);
    --tblr-navbar-border-color: transparent;
}

.navbar-vertical .nav-link:hover {
    background-color: var(--fb-sidebar-hover-bg);
}

/* --- Schaltflächen -------------------------------------------------------- */
.btn-primary {
    --tblr-btn-bg: var(--fb-primary);
    --tblr-btn-border-color: var(--fb-primary);
    --tblr-btn-hover-bg: var(--fb-primary-hover);
    --tblr-btn-hover-border-color: var(--fb-primary-hover);
    --tblr-btn-active-bg: var(--fb-primary-hover);
    --tblr-btn-active-border-color: var(--fb-primary-hover);
    --tblr-btn-disabled-bg: var(--fb-primary);
    --tblr-btn-disabled-border-color: var(--fb-primary);
}

.btn-outline-primary {
    --tblr-btn-color: var(--fb-primary);
    --tblr-btn-border-color: var(--fb-primary);
    --tblr-btn-hover-bg: var(--fb-primary);
    --tblr-btn-hover-border-color: var(--fb-primary);
    --tblr-btn-active-bg: var(--fb-primary);
    --tblr-btn-active-border-color: var(--fb-primary);
}

.btn-warning { --tblr-btn-bg: var(--fb-accent); --tblr-btn-border-color: var(--fb-accent); }
.btn-success { --tblr-btn-bg: var(--fb-success); --tblr-btn-border-color: var(--fb-success); }
.btn-danger  { --tblr-btn-bg: var(--fb-danger);  --tblr-btn-border-color: var(--fb-danger); }
.btn-info    { --tblr-btn-bg: var(--fb-info);    --tblr-btn-border-color: var(--fb-info); }

/* ==========================================================================
   3. ÜBERGANGSHILFE — AdminLTE-Bauteile, solange sie noch in Views stehen
   --------------------------------------------------------------------------
   `info-box`, `small-box` und `callout` kommen an rund 180 Stellen vor. Bis sie
   auf Tabler-Bauteile gezogen sind, bekommen sie hier ein Minimum an Form,
   damit die Seiten nicht auseinanderfallen. Dieser Abschnitt ist zum Löschen
   gedacht, nicht zum Ausbauen.
   ========================================================================== */

.info-box,
.small-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--fb-surface-bg);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
}

.info-box .info-box-icon,
.small-box .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--fb-radius);
    background: var(--fb-primary);
    color: #fff;
    flex: 0 0 auto;
}

.info-box-text,
.small-box p {
    color: var(--fb-text-muted);
    font-size: .875rem;
    margin: 0;
}

.info-box-number,
.small-box h3 {
    color: var(--fb-text);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.callout {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    background: var(--fb-surface-bg);
    border: 1px solid var(--fb-border);
    border-left: 3px solid var(--fb-primary);
    border-radius: var(--fb-radius);
}

.content-header {
    padding: 0 0 1rem;
}
/* ==========================================================================
   4. ANORDNEN-MODUS — nur aktiv, solange im Dashboard sortiert wird
   ========================================================================== */

.widget-arrange-tools {
    position: absolute;
    top: .5rem;
    right: 1.25rem;
    z-index: 5;
    display: flex;
    gap: .25rem;
}

.widget-arrange-active [data-widget-id] {
    outline: 1px dashed var(--fb-border);
    outline-offset: 4px;
    border-radius: var(--fb-radius);
}

.widget-arrange-active [data-widget-area] {
    background: color-mix(in srgb, var(--fb-primary) 4%, transparent);
    border-radius: var(--fb-radius);
}

.widget-arrange-griff { cursor: grab; }
.widget-arrange-griff:active { cursor: grabbing; }

.widget-arrange-ghost { opacity: .35; }

/* ── Hinweiskästen aus der Zeit vor Tabler ───────────────────────────────────
 *
 * Tabler legt `.alert` als Flex-Zeile an (display:flex; flex-direction:row;
 * gap:1rem). Das passt zu SEINEM Aufbau, bei dem der Inhalt in genau einem
 * Kindelement steckt.
 *
 * Unsere 172 Hinweiskästen stammen aus der AdminLTE-Zeit und schreiben Text
 * direkt in den Kasten, mit <strong>, <a> und <br> dazwischen. Jedes dieser
 * Stücke — auch die blanken Textabschnitte — wird dadurch zu einer eigenen
 * Spalte. Aus einem Satz werden acht nebeneinanderstehende Fetzen; auf der
 * Egg-Import-Seite war der Hinweis dadurch unlesbar.
 *
 * Deshalb hier zurück auf Blocksatz. Wer Tablers Zeilenaufbau will, setzt
 * innen ein `.d-flex` — das ist ohnehin Tablers eigenes Muster und bleibt
 * davon unberührt.
 *
 * Das Schließkreuz braucht dabei nichts: Tabler stellt es ohnehin absolut und
 * hält mit `.alert-dismissible { padding-right: 3rem }` den Platz frei.
 */
.alert {
    display: block;
}

/* ── Die obere Leiste laeuft mit ─────────────────────────────────────────────
 *
 * Das Kleben selbst macht `sticky-lg-top` am <header> (siehe `guild/topbar`).
 * Hier steht nur, was daraus folgt: Ein Sprungziel landet sonst UNTER der
 * Leiste.
 *
 * Betroffen ist zuerst der Sprunglink „Zum Inhalt springen" — er ist fuer
 * Menschen da, die mit der Tastatur navigieren, und ein Sprung, der die ersten
 * Zeilen hinter der Leiste versteckt, verfehlt genau seinen Zweck. Dieselbe
 * Rechnung gilt fuer jeden Anker in einer Seite.
 *
 * `3.5rem` ist Tablers `--tblr-navbar-height` (`.navbar { min-height: 3.5rem }`),
 * ein halbes rem Luft dazu. Unter 992px klebt nichts, also ist auch nichts
 * abzuziehen — `scroll-margin-top` schadet dort aber nicht.
 */
#content,
.page-body [id]:target {
    scroll-margin-top: 4rem;
}