/* Define the color variable */
:root {
    --primary-blue: #004560;
    --primary-blue-rgb: 0, 69, 96;

    --alert-red: #FF1654;

    --battleship-grey: #808F87;
    --bs-nav-pills-link-active-color: #808F87;
    --nice-green: #6A8E7F;
    /* Status Created */
    --status-created-bg: #cce5ff;
    --status-created-color: #004085;

    /* Status Planning */
    --status-planning-bg: #d1ecf1;
    --status-planning-color: #0c5460;

    /* Status In Progress */
    --status-in-progress-bg: #fff3cd;
    --status-in-progress-color: #856404;

    /* Status Critical */
    --status-critical-bg: #f8d7da;
    --status-critical-color: var(--alert-red);

    /* Status Done */
    --status-done-bg: #d4edda;
    --status-done-color: #155724;

    /* Avatar palette */
    --avatar-1: #6366f1;  /* Indigo */
    --avatar-2: #ec4899;  /* Pink */
    --avatar-3: #f59e0b;  /* Amber */
    --avatar-4: #10b981;  /* Emerald */
    --avatar-5: #3b82f6;  /* Blue */
    --avatar-6: #8b5cf6;  /* Violet */
    --avatar-7: #ef4444;  /* Red */
    --avatar-8: #14b8a6;  /* Teal */

    --emphasis-red: #FE7F2D;
    --emphasis-red-light: #FE7F2DE5;
    --emphasis-orange: #FE7F2D;  /* Awerka orange - same as emphasis-red */
    --sidebar-text-color: #E8E8E8;
    --sidebar-hover-color: var(--emphasis-red);
    --bs-border-radius: 20px;
    --bs-border-radius-sm: 15px;

    /* ---- Markenfarben --------------------------------------------------
       Das Awerka-Orange liegt bei Farbton 23,5°. Die Gegenfarbe ist derselbe
       Ton plus 180°, bei gleicher Sättigung und Helligkeit: #2fadfe.

       Der Spiegel gilt auch für die Schrift. Wie das Orange trägt sie dunkle
       Schrift, nicht weiße — 8,53 gegen 2,46. Für Text und Links ist sie zu
       hell, dort steht die abgedunkelte Stufe.

         Fläche   #2fadfe + schwarze Schrift   8,53
         Rahmen   #0192ef auf Weiß             3,30  (UI braucht 3,0)
         Text     #0176c1 auf Weiß             4,81
         Akzent   #FE7F2D + schwarze Schrift   8,29  (--emphasis-orange)
    */
    --brand-primary: #2fadfe;
    --brand-primary-rgb: 47, 173, 254;
    --brand-primary-hover: #10a1fe;
    --brand-primary-active: #0192ef;
    --brand-on-primary: #000;
    --brand-outline: #0192ef;

    /*original*/
    --bs-primary: #0176c1;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 1, 118, 193;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;

    /*overwrites*/
    --bs-focus-ring-color: rgba(var(--brand-primary-rgb), 0.35);
    --bs-warning: var(--emphasis-orange);
    --bs-warning-rgb: 254, 127, 45;
    --bs-danger: var(--alert-red);
    --bs-danger-rgb: 255, 22, 84;
}

/*linear-gradient(135deg, #0d47a1, #1976d2);*/
/*better blue:*/
/*    --bs-tertiary-bg-rgb: 25, 118, 210;*/

/*yellows:*/
/*F5F5F5*/
[data-bs-theme=light] {
    /* Der Kopf muss dunkler sein als der Kartenkörper, also der tiefere Ton.
       Die helle Markenfläche bei gleicher Deckkraft ergibt über Weiß fast
       wieder Weiß — der Kopf hob sich nur noch mit 1,128 ab statt mit 1,305. */
    --card-header-tint-rgb: 1, 118, 193;
    /* 14 % statt 19 %: auf der nun flachen Seite wäre der Kopf sonst der
       kräftigste Wert überhaupt. Gegen den Kartenkörper bleiben 1,211. */
    --card-header-tint-a: 0.14;

    --bs-primary-text-emphasis: #01344f;
    --bs-primary-bg-subtle: #d5eeff;
    --bs-primary-border-subtle: #a3d8fe;
    --bs-tertiary-bg-rgb: 0, 69, 96;
    --bs-emphasis-color-rgb: 256, 256, 256;
    --bs-link-color-rgb: 0, 0, 0;

}

[data-bs-theme=dark] {

    /*--bs-tertiary-bg-rgb: 43, 48, 53;*/
    --bs-link-color-rgb: 255, 255, 255;

    /* Umgekehrt: auf dunklem Grund muss der Kopf heller sein als die Karte. */
    --card-header-tint-rgb: 126, 203, 255;
    --card-header-tint-a: 0.10;

    /* Auf dunklem Grund trägt die Gegenfarbe auch als Textfarbe. */
    --bs-primary: #7ecbff;
    --bs-primary-rgb: 126, 203, 255;
    --brand-outline: #2fadfe;
    --bs-primary-text-emphasis: #7ecbff;
    --bs-primary-bg-subtle: #0b2334;
    --bs-primary-border-subtle: #17506f;

    /* Card/table surface — darker than the body so content reads better */
    --surface-card-bg: #16191c;

    /* Override bg-light for dark mode (badges, cards, etc.) */
    --bs-light: #2b3035;
    --bs-light-rgb: 43, 48, 53;

    /* Dark mode status badge colors */
    --status-created-bg: rgba(0, 64, 133, 0.3);
    --status-created-color: #8cb4e0;
    --status-planning-bg: rgba(12, 84, 96, 0.3);
    --status-planning-color: #7ec8d4;
    --status-in-progress-bg: rgba(133, 100, 4, 0.3);
    --status-in-progress-color: #f0d77a;
    --status-critical-bg: rgba(255, 22, 84, 0.2);
    --status-critical-color: #ff6b8a;
    --status-done-bg: rgba(21, 87, 36, 0.3);
    --status-done-color: #7ec89a;
}


[data-bs-theme=light] .sidebar a,
[data-bs-theme=light] .sidebar button,
[data-bs-theme=light] .sidebar li,
[data-bs-theme=dark] .sidebar a,
[data-bs-theme=dark] .sidebar button,
[data-bs-theme=dark] .sidebar li {
    color: var(--sidebar-text-color);
}

[data-bs-theme=light] .sidebar a:hover,
[data-bs-theme=light] .sidebar button:hover,
[data-bs-theme=light] .sidebar li:hover,
[data-bs-theme=dark] .sidebar a:hover,
[data-bs-theme=dark] .sidebar button:hover,
[data-bs-theme=dark] .sidebar li:hover {
    color: var(--sidebar-hover-color);
}

/* Buttons inside sidebar alerts (e.g. impersonation banner) keep Bootstrap
   button colors — the sidebar-wide rules above would wash them out on the
   light alert background */
[data-bs-theme=light] .sidebar .alert .btn,
[data-bs-theme=dark] .sidebar .alert .btn {
    color: var(--bs-btn-color);
}

[data-bs-theme=light] .sidebar .alert .btn:hover,
[data-bs-theme=dark] .sidebar .alert .btn:hover {
    color: var(--bs-btn-hover-color);
}

/* Plan indicator in sidebar bottom */
.sidebar-plan-card {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

a.sidebar-plan-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(254, 127, 45, 0.3);
}

.sidebar-plan-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sidebar-text-color);
    letter-spacing: 0.02em;
}

.sidebar-plan-upgrade {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--emphasis-orange);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

a.sidebar-plan-card:hover .sidebar-plan-upgrade {
    opacity: 1;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: var(--brand-on-primary);
    --bs-nav-pills-link-active-bg: var(--brand-primary);
}

/* In der Seitenleiste steht genau ein Modul auf aktiv. Das ist die eine
   Stelle pro Bildschirm, an der das Orange als Marke auftreten darf, ohne
   sich abzunutzen — und es bindet die Leiste an das Logo darüber. */
.sidebar .nav-pills {
    --bs-nav-pills-link-active-bg: var(--emphasis-orange);
    --bs-nav-pills-link-active-color: #000;
}

/* Override Bootstrap's alert red color */
.alert-danger {
    background-color: var(--alert-red) !important;
    border-color: var(--alert-red) !important;
    color: #fff !important;
}

[data-bs-theme=light] .card {
    --bs-card-border-color: "";
    --bs-card-background: #fff;


}

[data-bs-theme=light] .card {
    --bs-card-bg: #fff;

}

[data-bs-theme=light] main,
[data-bs-theme=light] .header-bar,
[data-bs-theme=light] .table {
    /* Der Grund ist bewusst fast weiß. Auf einer Seite mit vielen Karten
       erzeugt ein kräftig getönter Grund lauter helle Flecken und wird
       unruhig; die Trennung übernimmt stattdessen die Haarlinie der Karte.

       Der Dunkelmodus macht das längst so: dort liegen Karte und Körper nur
       1,019 auseinander, getrennt wird praktisch allein durch den Rahmen.
       Hier sind es 1,051 — dieselbe Idee, nur seitenverkehrt. */
    background-color: #f5fafd !important;
    /*--bs-table-bg: #f1f1f1 !important;*/
}

[data-bs-theme=dark] .card .table {
    --bs-table-bg: var(--surface-card-bg);
    --bs-table-color: var(--bs-body-color);
    background-color: var(--surface-card-bg);
}



/* ============================================================================
   Bootstrap 5.3 kompiliert #0d6efd an 14 Stellen als festes Hex — Buttons,
   Pagination, Progress, Dropdown, List-Group, Form-Focus, Range-Thumb.
   --bs-primary allein erreicht nur .bg-primary und .text-primary, die
   Komponenten-Variablen müssen einzeln nachgesetzt werden.

   Die Fläche trägt die helle Gegenfarbe mit dunkler Schrift, Text und Rahmen
   die abgedunkelte Stufe.
   ============================================================================ */

.bg-primary {
    background-color: rgba(var(--brand-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-primary {
    color: var(--brand-on-primary) !important;
    background-color: rgba(var(--brand-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.btn-primary {
    --bs-btn-color: var(--brand-on-primary);
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-outline);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-outline);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-color: var(--brand-on-primary);
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    --bs-btn-disabled-color: var(--brand-on-primary);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-outline);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--brand-outline);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-outline);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-color: var(--brand-on-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-outline);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--brand-outline);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-outline);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.3);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--brand-primary);
    border-color: var(--brand-outline);
}

.form-check-input:focus {
    border-color: var(--brand-outline);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.3);
}

/* Helle Fläche heißt dunkler Haken. Bootstraps weißer schafft auf #2fadfe
   nur 2,46 und verschwindet. */
.form-check-input:checked {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Weiß auf dem hellen Band schafft nur 2,46 und verschwindet. Schwarz läge
   bei 8,53, liest sich aber als Loch. Das dunkle Petrol trifft 5,31 und bleibt
   in der Farbfamilie. */
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2301344f'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230192ef'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb { background-color: var(--brand-primary); }
.form-range::-moz-range-thumb { background-color: var(--brand-primary); }

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.3);
    --bs-pagination-active-color: var(--brand-on-primary);
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-outline);
}

.dropdown-menu {
    --bs-dropdown-link-active-color: var(--brand-on-primary);
    --bs-dropdown-link-active-bg: var(--brand-primary);
}

.list-group {
    --bs-list-group-active-color: var(--brand-on-primary);
    --bs-list-group-active-bg: var(--brand-primary);
    --bs-list-group-active-border-color: var(--brand-outline);
}

.progress,
.progress-stacked {
    --bs-progress-bar-color: var(--brand-on-primary);
    --bs-progress-bar-bg: var(--brand-primary);
}

/* ----------------------------------------------------------------------------
   Select2 bringt sein eigenes Bootstrap-Theme als minifizierte Fremddatei mit
   und hat #0d6efd fest eingebacken. Die Datei bleibt unangetastet, die paar
   Stellen werden hier überschrieben — Select2 steckt in fast jedem Formular,
   ein blau bleibender Fokusring würde sofort auffallen.
   ---------------------------------------------------------------------------- */

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--brand-outline);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.3);
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--brand-outline);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* ----------------------------------------------------------------------------
   Akzent-Knopf in Awerka-Orange. Gleiche Werte wie .btn-awerka auf der
   Marketingseite, aber als reguläre Bootstrap-Knopfvariante — damit Zustände,
   Größen und die Haptik aus haptics.css automatisch mitkommen.

   Schwarze Schrift, nicht weiße: 8,29 gegen 2,53.
   ---------------------------------------------------------------------------- */

.btn-accent {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--emphasis-orange);
    --bs-btn-border-color: #e56a1a;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fb8636;
    --bs-btn-hover-border-color: #d96716;
    --bs-btn-focus-shadow-rgb: 254, 127, 45;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ef6f1b;
    --bs-btn-active-border-color: #cf6014;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--emphasis-orange);
    --bs-btn-disabled-border-color: #e56a1a;
}