/* ============================================================
   🎨 Bootstrap Theme Override
   Używa brandowych kolorów i działa z data-bs-theme="light"/"dark"
   ============================================================ */


[data-bs-theme="brand"] {
    /* ✅ Mapowanie brand -> Bootstrap */
    --bs-primary: var(--brand-colorPrimary);
    --bs-primary-rgb: 123, 175, 253; /* rgb(7b affd) */

    --bs-secondary: var(--brand-colorSecondary);
    --bs-secondary-rgb: 79, 126, 196;

    --bs-body-bg: var(--brand-colorOnBackground);
    --bs-body-color: var(--brand-colorBackground);
    --bs-border-color: var(--brand-onBackgroundStroke);

    --bs-link-color: var(--brand-colorPrimary);
    --bs-link-hover-color: color-mix(in srgb, var(--brand-colorPrimary) 80%, black);

    /* 🔹 Inne bootstrapowe kolory subtelne (opcjonalnie) */
    --bs-primary-bg-subtle: color-mix(in srgb, var(--brand-colorPrimary) 15%, white);
    --bs-primary-border-subtle: color-mix(in srgb, var(--brand-colorPrimary) 50%, white);

    --bs-focus-ring-color: color-mix(in srgb, var(--brand-colorPrimary) 50%, transparent);
}

/* 🌙 Tryb ciemny */
[data-bs-theme="dark"] {
    --bs-primary: var(--brand-colorPrimary);
    --bs-primary-rgb: 46, 62, 73;

    --bs-secondary: var(--brand-colorSecondary);
    --bs-secondary-rgb: 46, 62, 73;

    --bs-body-bg: var(--brand-colorOnBackground);
    --bs-body-color: var(--brand-colorBackground);
    --bs-border-color: var(--brand-onBackgroundStroke);

    --bs-link-color: var(--brand-colorOnPrimary);
    --bs-link-hover-color: color-mix(in srgb, var(--brand-colorOnPrimary) 80%, white);

    --bs-primary-bg-subtle: color-mix(in srgb, var(--brand-colorPrimary) 30%, black);
    --bs-primary-border-subtle: color-mix(in srgb, var(--brand-colorPrimary) 50%, black);

    --bs-focus-ring-color: color-mix(in srgb, var(--brand-colorPrimary) 50%, transparent);
}

html[data-bs-theme="brand"] *,
html[data-bs-theme="dark"] * {

    /* ============================================================
       🟦 Gradient i komponenty
       ============================================================ */

    /* Gradient Bootstrapa */
    .bg-gradient-primary {
        background-color: var(--brand-colorPrimary) !important;
        background-image: linear-gradient(
            180deg,
            var(--brand-colorPrimary) 10%,
            var(--brand-colorSecondary) 100%
        ) !important;
        background-size: cover;
    }

    /* Klasy kolorów */
    .bg-primary {
        background-color: var(--brand-colorPrimary) !important;
    }

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

    .border-primary {
        border-color: var(--brand-colorPrimary) !important;
    }

    /* Przycisk */
    .btn-primary {
        color: var(--brand-colorOnPrimary) !important;
        background-color: var(--brand-colorPrimary) !important;
        border-color: var(--brand-colorSecondary) !important;
    }

    .btn-primary:hover {
        background-color: color-mix(in srgb, var(--brand-colorPrimary) 85%, black) !important;
    }

    /* Navbar */
    .navbar,
    .navbar-dark {
        background-color: var(--brand-colorPrimary) !important;
        color: var(--brand-colorOnPrimary) !important;
    }

    .navbar-dark .navbar-nav .nav-link {
        color: var(--brand-colorOnPrimary) !important;
    }

    .navbar-dark .navbar-nav .nav-link:hover {
        color: color-mix(in srgb, var(--brand-colorOnPrimary) 80%, white) !important;
    }

    /* Sidebar (opcjonalny) */
    .sidebar {
        background-color: var(--brand-colorPrimary) !important;
        color: var(--brand-colorOnPrimary) !important;
    }

    .sidebar .nav-link {
        color: var(--brand-colorOnPrimary) !important;
    }

    .sidebar .nav-link:hover {
        background-color: color-mix(in srgb, var(--brand-colorPrimary) 85%, black);
    }

    .flyout-menu {
        background-color: var(--brand-colorSecondary) !important;
    }

    /* ============================================================
       💡 Ogólne poprawki i body
       ============================================================ */

    body {
        background-color: var(--brand-colorBackground) !important;
        color: var(--brand-colorOnBackground) !important;
    }

    hr {
        border-color: var(--brand-onBackgroundStroke) !important;
    }

    /* ============================================================
       🌓 Animowana zmiana motywu (opcjonalnie)
       ============================================================ */


    /* ============================================================
       TopBar nav
       ============================================================ */
    .navbar-top,
    .navbar:not(.sidebar),
    .sticky-footer {
        background-color: var(--brand-colorBackgroundSecondary) !important;
        color: var(--brand-colorPrimary) !important;
    }

    /*.topbar {
        background-color: #ffffff;
        box-shadow: 0 0.15rem 1.75rem rgba(58, 59, 69, 0.15);
    }*/

    .topbar .navbar-brand {
        color: #4e73df;
    }

    .topbar .navbar-brand:hover {
        color: #2e59d9;
    }

    .topbar .nav-link {
        color: #858796;
    }

    .topbar .nav-link:hover {
        color: #4e73df;
    }

    .topbar .dropdown-item:hover {
        background-color: #f8f9fc;
        color: #2e59d9;
    }

    /* ============================================================
       Transaction status cards
       ============================================================ */

    .container-fluid h4.text-dark {
        color: var(--brand-colorOnSecondary2) !important;
    }

    .container-main {
        background-color: var(--brand-colorBackground);
    }
    .container-main h3.text-dark {
        color: var(--brand-colorOnSecondary2) !important;
    }

    .card {
        background-color: var(--brand-colorTransactionCard) !important;
        border: var(--brand-colorOnSecondary2) !important;
    }
    .card.selected {
        background-color: var(--brand-colorSelectedTransactionCard) !important;
    }

    .card .text-primary,
    .card .text-dark,
    .card .text-lg,
    .card .h4,
    .card .h6,
    .card p {
        color: var(--brand-colorCardText) !important;
    }

    .rolesTables_info,
    .usersTable_info,
    .dataTables_info
    .dataTable_info {
        color: var(--brand-colorCardTextVariant) !important;
    }

    .card input,
    .card select {
        background-color: var(--brand-colorInputBackground2) !important;
    }

    .card .nav-link.active {
        background-color: var(--brand-colorSelectedTransactionCard) !important;
    }

    .card a,
    .card label,
    .card accordion-item{
        color: var(--brand-colorCardText) !important;
    }

    .card h6,
    .card label.d-block {
        color: var(--brand-colorCardText) !important;
        font-weight: 600 !important;
    }

    /* ✅ Ogólny wygląd list w kartach */
    .card .list-group-item {
        background-color: var(--brand-colorPrimaryVariant) !important;
        color: var(--brand-colorCardText) !important;
        border-color: var(--brand-onBackgroundStroke);
    }

    /* 🧭 Jeśli chcesz efekt hovera dla każdego wiersza */
    .card .list-group-item:hover {
        background-color: color-mix(in srgb, var(--brand-colorPrimary) 10%, var(--brand-colorSurface)) !important;
        cursor: pointer;
    }

    /* ============================================================
       Equipment & Product cards
       ============================================================ */

    #content {
        background-color: var(--brand-onBackgroundStroke);
        color: var(--brand-colorOnSecondary2);
    }

    #content h3 {
        color: var(--brand-colorOnSecondary2) !important;
    }

    .card-header {
        background-color: var(--brand-cardHeaderBackground);
        color: var(--brand-colorOnSurfaceVariant);
    }

    .card-header span {
        color: var(--brand-colorInputText);
        font-weight: 600;
    }

    /* ============================================================
       Chart card
       ============================================================ */

    /* --- Styl dedykowany dla kart z wykresami --- */
    .card.card-chart {
        background: var(--brand-colorBackgroundSecondary); /* 🔹 tło karty */
        border: 1px solid var(--brand-colorPrimary, #e3e6f0); /* 🔹 obramowanie karty */
        border-radius: 0.5rem; /* 🔹 zaokrąglenie rogów */
        box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05); /* 🔹 delikatny cień */
        transition: box-shadow 0.2s ease, transform 0.2s ease; /* 🔹 animacja hover */
        overflow: hidden; /* 🔹 zapobiega „wylewaniu się” płótna wykresu */
    }

    /* Efekt przy najechaniu kursorem */
    .card.card-chart:hover {
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); /* 🔹 mocniejszy cień */
        transform: translateY(-2px); /* 🔹 lekki efekt unoszenia */
    }

    /* Nagłówek wykresu */
    .card.card-chart .card-header {
        background: var(--brand-colorHeader, #f8f9fc); /* 🔹 lekko jaśniejsze tło */
        border-bottom: 1px solid var(--brand-colorBorder, #e3e6f0); /* 🔹 linia oddzielająca */
        padding: 0.75rem 1rem;
    }

    .card.card-chart .card-header h6, text-primary {
        color: var(--brand-colorOnHeader) !important; /* główny kolor tekstu */
        font-weight: 600;
    }

    /* Obszar wykresu */
    .card.card-chart .card-body {
        background: var(--brand-colorOnBackground); /* tło sekcji wykresu */
        padding: 1rem 1.5rem;
    }

    /* Samo płótno Chart.js */
    .card.card-chart canvas {
        width: 100% !important;
        height: 280px !important;
        max-height: 320px;
    }

    /* ============================================================
       Settings card
       ============================================================ */



    /* ============================================================
       Inne pola tekstowe, spinnery
       ============================================================ */
    .form-select,
    .form-label {
        color: var(--brand-colorOnSecondary2);
    }

    .form-control {
        background-color: var(--brand-colorInputBackground);
        color: var(--brand-colorInputText) !important;
    }

    .form-control:focus {
        background-color: var(--brand-colorInputBackgroundOnFocus);
        color: var(--brand-colorInputText) !important;
    }

    #documentPreviewContainer {
        background-color: var(--brand-colorInputBackground) !important;
    }

    .input-group-text {
        background-color: var(--brand-colorInputBackground) !important;
        color: var(--brand-colorPrimary) !important;
        transition: background-color 0.2s ease;
    }

    /* ============================================================
       Tabele
       ============================================================ */

    .table td,
    .table th {
        border-right: 1px solid color-mix(in srgb, transparent 70%, var(--brand-TableBorder) 15%) !important;
        border-bottom: 1px solid color-mix(in srgb, transparent 50%, var(--brand-TableBorder) 40%) !important;
    }

    .table .equipment-list {
        background-color: var(--brand-colorOnBackground);
    }

    /* ============================================================
       Modale global
       ============================================================ */

    .modal-content {
        background-color: var(--brand-colorModalBackground);
        color: var(--brand-colorOnSecondary2) !important;
    }

    /* ============================================================
       Modal CountryPrefixes
       ============================================================ */

    .accordion-item {
        background-color: var(--brand-colorPrimaryVariant);
        border: 1px solid var(--brand-onBackgroundStroke);
    }

    .accordion-button {
        background-color: var(--brand-colorSurfaceVariant);
        color: var(--brand-colorCardText);
        font-weight: 700;
    }

    .accordion-button:hover {
        background-color: color-mix(in srgb, var(--brand-colorPrimary) 10%, var(--brand-colorSurfaceVariant));
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--brand-colorPrimary);
        color: var(--brand-colorOnPrimary);
    }

    .accordion-body {
        background-color: var(--brand-colorSurface);
        color: var(--brand-colorCardText);
    }

    /*  ---------------- */

    .modal-content {
        background-color: var(--brand-colorModalBackground);
        color: var(--brand-colorOnSecondary2) !important;
    }

    /* ============================================================
       Ikony
       ============================================================ */

    /* Globalnie */
    .modal-content .fa {
        color: var(--brand-colorIcon) !important;
    }

    /* Globalnie najechanie */
    .modal-content .fa:hover {
        color: var(--brand-colorIconFocus) !important;
        transform: scale(1.2);
        cursor: pointer;
    }

    /* Globalnie dla przycisków */
    .btn .fa {
        color: var(--brand-colorOnSecondary2) !important;
    }

    /* Globalnie dla przycisków najechanie */
    .btn .fa:hover {
        color: var(--brand-colorOnSecondary2) !important;
        transform: scale(1.2);
        cursor: pointer;
    }


    .active-status {
        color: var(--brand-colorActiveTariff);
    }
    .inactive-status {
        color: var(--brand-colorNotActiveTariff);
    }

    /* ============================================================
       User menu
       ============================================================ */

    .dropdown-menu .dropdown-item {
        color: var(--brand-colorInputText);
    }

    /* ================================================
       CHECKBOX
       ================================================ */

    .form-check-input {
        border-color: var(--brand-colorPrimary);
        background-color: transparent;
        cursor: pointer;
        transition: all 0.2s ease;
    }

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

    .form-check-input:focus {
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-colorPrimary) 30%, transparent);
    }

    .form-check-label {
        color: var(--brand-colorInputText);
    }

    .country-checkbox-label small.text-muted {
        color: color-mix(in srgb, var(--brand-colorInputText) 50%, transparent) !important;
    }

    .card .form-control-user {
        background-color: var(--brand-colorInputBackground) !important;
    }

    /* ================================================
       SWITCH / TOGGLE
       ================================================ */

    /* ogólny wygląd (light & dark) */
    .form-check-input[type="checkbox"] {
        background-color: var(--brand-colorSwitchBackground)  !important;
        border: 1px solid var(--brand-onBackgroundStroke);
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* 🔹 po zaznaczeniu */
    .form-check-input:checked {
        background-color: var(--brand-colorSwitchBackgroundChecked) !important;
        border-color: var(--brand-colorPrimary);
    }

    /* 🔹 animacja "kulki" (Bootstrapowy pseudo-element) */
    .form-switch .form-check-input:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

    /* 🔸 hover / focus */
    .form-check-input:hover {
        border-color: color-mix(in srgb, var(--brand-colorPrimary) 40%, var(--brand-onBackgroundStroke));
    }
    .form-check-input:focus {
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-colorPrimary) 30%, transparent);
    }

    /* 🔸 disabled */
    .form-check-input:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .nav-item a {
        color: var(--brand-colorInputText);
        font-weight: 600;
    }
}