/* ============================================================
   ReqCompass – Bootstrap-Theme-Schicht

   Warum diese Datei existiert
   ---------------------------
   Die Anwendung verwendet an rund 600 Stellen in über 60 Razor-Dateien direkt
   Bootstrap-Klassen (btn btn-primary, card, form-control, table, badge, alert).
   Die trugen bislang Bootstraps Standardfarben, -radien und -schatten, während
   Header, Sidebar und die Anmeldeseiten längst auf den Tokens aus app.css
   basieren. Genau daraus entstand der Bruch: außerhalb der Navigation sah die
   Anwendung aus wie ein anderes Produkt.

   Statt 60 Dateien umzuschreiben, biegt diese Schicht Bootstrap selbst auf die
   Marken-Tokens um. Bootstrap 5.3 stellt dafür je Komponente --bs-*-Variablen
   bereit, sodass fast alles ohne Selektor-Duell auskommt.

   Regeln für diese Datei
   ----------------------
   1. Muss NACH bootstrap.min.css geladen werden (siehe App.razor).
   2. Ändert Farben, Rahmen, Radien und Fokus – NICHT Größen, Abstände oder
      Zeilenhöhen. Damit verschiebt sich kein Layout und keine Tabelle bricht um.
   3. Rein additiv: Entfernt man den <link> in App.razor, ist der vorherige
      Zustand exakt wiederhergestellt.
   4. Kein !important außer dort, wo Bootstrap-Utilities selbst !important
      verwenden (.shadow-sm, .text-muted).
   ============================================================ */

:root {
    /* Bootstrap rechnet an vielen Stellen mit RGB-Tripeln (rgba(var(--bs-primary-rgb), .5)),
       die sich aus einem Hex-Token nicht per CSS ableiten lassen. Deshalb liegt die
       Markenfarbe hier zusätzlich als Tripel vor.

       Folge fürs White-Label: --clr-primary wird zur Laufzeit per setCssVar aus den
       Firmeneinstellungen überschrieben und greift überall dort, wo unten direkt
       var(--clr-primary) steht (Buttons, Felder, Fokus, Links, Tabellen-Hover).
       Die wenigen Bootstrap-Utilities, die zwingend das Tripel brauchen
       (.bg-primary, .text-primary, .border-primary), bleiben auf der Marken-Vorgabe
       stehen. Vorher waren sie Bootstrap-Blau – also in jedem Fall eine Verbesserung. */
    --accent-rgb: 53, 116, 230;   /* = #3574e6, identisch zu --accent */
    --ink-rgb:    20, 33, 47;     /* = #14212f, identisch zu --ink */

    /* Das Token-Set in app.css kennt Rot und Bernstein, aber kein Grün - Bootstrap
       braucht für Erfolgszustände aber eines. Der Wert ist bewusst dunkler als
       Bootstraps #198754: Weiß darauf erreicht 5.3:1 und damit AA, Bootstraps
       eigenes Grün bleibt mit 4.05:1 darunter. Dieselben Werte nutzt auth.css. */
    --green:      #14724a;
    --green-soft: #e6f5ed;
    --green-ink:  #10603e;

    /* Einheitlicher Fokus-Ring. Denselben Wert verwendet auth.css für die
       Anmeldeseiten – wird er hier geändert, dort mitziehen. */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 25%, transparent);

    /* --- Bootstrap-Grundwerte auf die Marke ---------------------------------

       Wichtig: app.css wird VOR bootstrap.min.css geladen. Dessen Regeln
       body { font-family: var(--font-body); color: var(--ink); } wurden deshalb
       bisher von Bootstrap überschrieben – die Anwendung lief also faktisch mit
       Bootstraps Systemschrift und #212529 statt mit der Markenschrift und --ink.
       Über die Variablen ist das hier mit erledigt. */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: var(--ink-rgb);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-soft);
    --bs-heading-color: var(--ink);

    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);

    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: 7px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: 18px;

    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-link-color: var(--clr-primary);
    --bs-link-color-rgb: var(--accent-rgb);
    --bs-link-hover-color: var(--accent-dark);
    --bs-link-hover-color-rgb: 34, 88, 196;   /* = #2258c4, identisch zu --accent-dark */

    --bs-focus-ring-color: color-mix(in srgb, var(--clr-primary) 25%, transparent);
    --bs-focus-ring-width: 3px;
}

/* Bootstrap setzt die Schrift auf <body>; app.css käme wegen der Ladereihenfolge
   nicht dagegen an. Hier nochmals explizit, damit die Markenschrift auch dann
   greift, wenn Bootstrap künftig die Variable umbenennt. */
body {
    font-family: var(--font-body);
    color: var(--ink);
}


/* ============================================================
   Buttons
   ============================================================ */

.btn {
    --bs-btn-border-radius: var(--radius);
    --bs-btn-font-family: var(--font-display);
    --bs-btn-font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}

/* Textlinks als Buttons sollen nicht wie Aktionsschaltflächen wirken. */
.btn-link {
    --bs-btn-font-family: var(--font-body);
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--clr-primary);
    --bs-btn-hover-color: var(--accent-dark);
}

.btn-primary {
    --bs-btn-bg: var(--clr-primary);
    --bs-btn-border-color: var(--clr-primary);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
    --bs-btn-disabled-bg: var(--clr-primary);
    --bs-btn-disabled-border-color: var(--clr-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--clr-primary);
    --bs-btn-border-color: var(--clr-primary);
    --bs-btn-hover-bg: var(--clr-primary);
    --bs-btn-hover-border-color: var(--clr-primary);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
    --bs-btn-disabled-color: var(--clr-primary);
    --bs-btn-disabled-border-color: var(--clr-primary);
}

/* Bootstraps Grau (#6c757d) war der auffälligste Fremdkörper neben der
   Markenpalette. Stattdessen die dezente Variante der Anmeldeseite:
   heller Rahmen, Markentext-Farbe, Flächen-Hover. */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--paper);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--tint);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ink-soft) 30%, var(--line));
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--ink-soft) 12%, var(--tint));
    --bs-btn-active-border-color: color-mix(in srgb, var(--ink-soft) 35%, var(--line));
    --bs-btn-disabled-color: var(--ink-soft);
    --bs-btn-disabled-bg: var(--paper);
    --bs-btn-disabled-border-color: var(--line);
}

.btn-danger {
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-bg: color-mix(in srgb, var(--red) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--red) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--red) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--red) 78%, black);
    --bs-btn-disabled-bg: var(--red);
    --bs-btn-disabled-border-color: var(--red);
}

.btn-outline-danger {
    --bs-btn-color: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-bg: var(--red);
    --bs-btn-hover-border-color: var(--red);
    --bs-btn-active-bg: var(--red);
    --bs-btn-active-border-color: var(--red);
    --bs-btn-disabled-color: var(--red);
    --bs-btn-disabled-border-color: var(--red);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--amber);
    --bs-btn-border-color: var(--amber);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--amber) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--amber) 85%, black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--amber) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--amber) 78%, black);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--amber);
    --bs-btn-disabled-border-color: var(--amber);
}

.btn-success {
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-bg: var(--green-ink);
    --bs-btn-hover-border-color: var(--green-ink);
    --bs-btn-active-bg: var(--green-ink);
    --bs-btn-active-border-color: var(--green-ink);
    --bs-btn-disabled-bg: var(--green);
    --bs-btn-disabled-border-color: var(--green);
}

/* Einheitlicher Fokus-Ring statt Bootstraps .25rem-Schatten in Bootstrap-Blau.
   Der globale :focus-visible-Outline aus app.css würde hier zusätzlich zeichnen –
   für Buttons und Felder übernimmt der Ring, überall sonst (Links, summary)
   bleibt der kräftige Outline erhalten. */
.btn:focus,
.btn:focus-visible,
.btn.focus {
    outline: none;
    box-shadow: var(--focus-ring);
}


/* ============================================================
   Formularfelder
   Dieselbe Anmutung wie .auth-input auf den Anmeldeseiten.
   ============================================================ */

.form-control,
.form-select {
    border-color: var(--line);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder {
    color: color-mix(in srgb, var(--ink-soft) 55%, transparent);
}

.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--clr-primary) 35%, var(--line));
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: var(--focus-ring);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--tint);
    color: var(--ink-soft);
}

/* Bootstrap färbt ungültige Felder rot ein; ohne Angleichung stünde dort ein
   anderes Rot als in --red. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--red);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}

.invalid-feedback,
.validation-message {
    color: var(--red);
}

.form-label {
    color: var(--ink);
    font-weight: 500;
}

.form-text {
    color: var(--ink-soft);
}

/* Checkboxen und Radios */
.form-check-input {
    border-color: color-mix(in srgb, var(--ink-soft) 45%, var(--line));
}

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

.form-check-input:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: var(--focus-ring);
}

.form-switch .form-check-input:focus {
    border-color: var(--clr-primary);
}

/* Eingabegruppen (Präfix-/Suffix-Kästen) */
.input-group-text {
    background-color: var(--tint);
    border-color: var(--line);
    color: var(--ink-soft);
}


/* ------------------------------------------------------------
   Nebenwirkung des globalen Fokus-Rings aus app.css

   Dort steht:
       input:focus-visible, button:focus-visible, select:focus-visible, ...
       { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

   Der border-radius war für schmucklose Elemente gedacht, traf aber jedes
   Bootstrap-Feld und jeden Button mit: beim Fokussieren sprang die Ecke von
   10px auf 3px und beim Verlassen zurück. Da der Ring oben den Outline für
   diese Komponenten bereits ersetzt, wird hier auch der Radius zurückgeholt.

   Die Reihenfolge -sm/-lg nach der Grundregel ist beabsichtigt: gleiche
   Spezifität, die spätere Regel gewinnt. .rounded-circle bleibt unberührt,
   weil die Utility !important trägt.
   ------------------------------------------------------------ */

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    border-radius: var(--bs-border-radius);
}

.btn-sm:focus-visible,
.btn-group-sm > .btn:focus-visible,
.form-control-sm:focus-visible,
.form-select-sm:focus-visible {
    border-radius: var(--bs-border-radius-sm);
}

.btn-lg:focus-visible,
.btn-group-lg > .btn:focus-visible,
.form-control-lg:focus-visible,
.form-select-lg:focus-visible {
    border-radius: var(--bs-border-radius-lg);
}

.form-check-input:focus-visible {
    border-radius: .25em;
}

.form-check-input[type="radio"]:focus-visible {
    border-radius: 50%;
}


/* ============================================================
   Cards
   ============================================================ */

.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: var(--tint);
    --bs-card-cap-color: var(--ink);
    --bs-card-color: var(--ink);
}

/* Bootstraps .shadow-sm ist ein harter, grauer Schatten. Weicher und leicht
   ins Markenblau gezogen wirkt er deutlich ruhiger. Die Utility selbst setzt
   !important, deshalb hier ebenfalls. */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(var(--ink-rgb), .06),
                0 2px 6px rgba(var(--ink-rgb), .05) !important;
}

.shadow {
    box-shadow: 0 2px 6px rgba(var(--ink-rgb), .07),
                0 8px 24px rgba(var(--ink-rgb), .07) !important;
}


/* ============================================================
   Meldungen
   Bootstrap-Alerts tragen ein eigenes Rot/Grün/Gelb. Hier auf die
   *-soft-Tokens umgestellt, identisch zu den Anmeldeseiten.
   ============================================================ */

.alert {
    --bs-alert-border-radius: var(--radius);
}

.alert-danger {
    --bs-alert-color: var(--red);
    --bs-alert-bg: var(--red-soft);
    --bs-alert-border-color: color-mix(in srgb, var(--red) 22%, transparent);
}

.alert-warning {
    --bs-alert-color: var(--amber);
    --bs-alert-bg: var(--amber-soft);
    --bs-alert-border-color: color-mix(in srgb, var(--amber) 25%, transparent);
}

.alert-success {
    --bs-alert-color: var(--green-ink);
    --bs-alert-bg: var(--green-soft);
    --bs-alert-border-color: color-mix(in srgb, var(--green) 25%, transparent);
}

.alert-info,
.alert-primary {
    --bs-alert-color: var(--accent-dark);
    --bs-alert-bg: var(--accent-soft);
    --bs-alert-border-color: color-mix(in srgb, var(--clr-primary) 22%, transparent);
}

.alert-secondary,
.alert-light {
    --bs-alert-color: var(--ink);
    --bs-alert-bg: var(--tint);
    --bs-alert-border-color: var(--line);
}


/* ============================================================
   Badges
   ============================================================ */

.badge {
    --bs-badge-border-radius: 999px;
    --bs-badge-font-weight: 600;
    letter-spacing: .01em;
}

/* Die .bg-*-Utilities gelten auch außerhalb von Badges, deshalb bewusst nur
   innerhalb von .badge umgefärbt – sonst würde jede Fläche mit .bg-warning
   mitziehen. */
.badge.bg-primary   { background-color: var(--clr-primary) !important; }
.badge.bg-danger    { background-color: var(--red) !important; }
.badge.bg-success   { background-color: var(--green) !important; }
.badge.bg-info      { background-color: var(--accent-dark) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--ink-soft) !important; }

/* Setzt bewusst auch dort Weiß, wo im Markup "bg-warning text-dark" steht
   (z.B. ProjectDetail.GetBadgeColor). Bootstraps Warnton #ffc107 trägt dunkle
   Schrift gut, das Marken-Bernstein --amber (#b06f00) ist dafür zu dunkel:
   dunkle Schrift käme auf 2.6:1, Weiß erreicht 4.9:1. */
.badge.bg-warning {
    background-color: var(--amber) !important;
    color: #fff !important;
}

.badge.bg-light {
    background-color: var(--tint) !important;
    color: var(--ink) !important;
}


/* ============================================================
   Tabellen
   ============================================================ */

.table {
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-color: var(--ink);
    --bs-table-striped-bg: color-mix(in srgb, var(--tint) 60%, transparent);
    --bs-table-hover-color: var(--ink);
    --bs-table-hover-bg: color-mix(in srgb, var(--clr-primary) 6%, transparent);
    --bs-table-active-color: var(--ink);
    --bs-table-active-bg: color-mix(in srgb, var(--clr-primary) 10%, transparent);
}

.table > thead {
    color: var(--ink);
}

.table > thead th {
    font-weight: 600;
    border-bottom-color: var(--line);
}

/* Der klebende Tabellenkopf steht in app.css auf #f8f9fa. Gleiche Spezifität,
   diese Datei lädt später und gewinnt damit. */
.table-responsive thead th {
    background: var(--tint);
    color: var(--ink);
}

.table-light > :not(caption) > * > * {
    background-color: var(--tint);
    color: var(--ink);
}


/* ============================================================
   Kleinteile, die sonst als einzige in Bootstrap-Grau stehen blieben
   ============================================================ */

.text-muted {
    color: var(--ink-soft) !important;
}

.text-primary {
    color: var(--clr-primary) !important;
}

.text-danger {
    color: var(--red) !important;
}

.text-success {
    color: var(--green) !important;
}

.text-warning {
    color: var(--amber) !important;
}

hr,
.dropdown-divider {
    border-color: var(--line);
    color: var(--line);
    opacity: 1;
}

.list-group {
    --bs-list-group-border-color: var(--line);
    --bs-list-group-border-radius: var(--radius);
    --bs-list-group-color: var(--ink);
    --bs-list-group-action-hover-bg: var(--tint);
    --bs-list-group-active-bg: var(--clr-primary);
    --bs-list-group-active-border-color: var(--clr-primary);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--line);
    --bs-nav-tabs-link-active-color: var(--clr-primary);
    --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--paper);
    --bs-nav-link-color: var(--ink-soft);
    --bs-nav-link-hover-color: var(--clr-primary);
}

.progress {
    --bs-progress-bg: var(--tint);
    --bs-progress-border-radius: 999px;
    --bs-progress-bar-bg: var(--clr-primary);
}

.spinner-border,
.spinner-grow {
    color: var(--clr-primary);
}

/* Das Schließen-Kreuz in Alerts und Dialogen ist ein schwarzes SVG mit fester
   Deckkraft – über einen Filter an die Textfarbe angenähert. */
.btn-close {
    border-radius: 6px;
    transition: opacity .15s ease, background-color .15s ease;
}

.btn-close:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}


@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .form-select,
    .btn-close {
        transition: none;
    }
}