/* =============================================================================
   PZSS — kolorystyka interfejsu (wariant jasny).
   JEDYNE źródło wartości kolorów. Wszędzie indziej używać wyłącznie tokenów.
   Ładowany PO motywie Hyper (app-saas) i po site.css — nadpisuje paletę.

   UWAGA: --pzss-red jest TYMCZASOWE (#C8102E) — do potwierdzenia z Księgą
   Znaku PZSS. Podmiana = jedna linia poniżej.
   ============================================================================= */

:root {
    /* marka */
    --pzss-red:        #C8102E;   /* TYMCZASOWE: do potwierdzenia z Księgą Znaku PZSS */
    --pzss-red-dark:   #9E0C24;
    --pzss-red-darker: #7A0A1C;
    --pzss-red-tint:   #FBE9EC;
    --pzss-red-rgb:        200, 16, 46;
    --pzss-red-dark-rgb:   158, 12, 36;

    /* tekst */
    --pzss-text:       #1A1A1A;
    --pzss-text-muted: #5B626D;

    /* powierzchnie i linie */
    --pzss-surface:    #FFFFFF;
    --pzss-bg:         #F4F5F7;
    --pzss-border:     #8A919C;
    --pzss-divider:    #D5D9DF;

    /* statusy */
    --pzss-success:      #1E7B45;
    --pzss-success-tint: #E6F2EA;
    --pzss-warning:      #9A5B00;
    --pzss-warning-tint: #FDF1DC;
    --pzss-info:         #1F5FA8;
    --pzss-info-tint:    #E7F0FA;
    --pzss-info-rgb:        31, 95, 168;
    --pzss-success-rgb:     30, 123, 69;
    --pzss-warning-rgb:     154, 91, 0;
    --pzss-text-rgb:        26, 26, 26;
    --pzss-text-muted-rgb:  91, 98, 109;

    /* tekst na czerwieni */
    --pzss-on-red:     #FFFFFF;
}

/* -----------------------------------------------------------------------------
   Mapowanie palety Hyper (--ct-*) → tokeny PZSS.
   To przemalowuje wszystko, co w Hyperze/Bootstrapie opiera się na var():
   utilities (.bg-primary, .text-primary, .link-primary, .*-subtle/-emphasis),
   alerty, body, linie.
   ----------------------------------------------------------------------------- */
:root {
    /* powierzchnia strony i tekst */
    --ct-body-bg:            var(--pzss-bg);
    --ct-body-color:         var(--pzss-text);
    --ct-secondary-color:    var(--pzss-text-muted);
    --ct-tertiary-color:     var(--pzss-text-muted);
    --ct-border-color:       var(--pzss-divider);

    /* primary = czerwień marki */
    --ct-primary:                var(--pzss-red);
    --ct-primary-rgb:            var(--pzss-red-rgb);
    --ct-primary-text-emphasis:  var(--pzss-red-darker);
    --ct-primary-bg-subtle:      var(--pzss-red-tint);
    --ct-primary-border-subtle:  var(--pzss-red-tint);

    /* danger = czerwień (ciemniejszy wariant, kontrast) */
    --ct-danger:                 var(--pzss-red-dark);
    --ct-danger-rgb:             var(--pzss-red-dark-rgb);
    --ct-danger-text-emphasis:   var(--pzss-red-dark);
    --ct-danger-bg-subtle:       var(--pzss-red-tint);
    --ct-danger-border-subtle:   var(--pzss-red-dark);

    /* linki = niebieski (nie mylić z marką ani błędem) */
    --ct-link-color:             var(--pzss-info);
    --ct-link-color-rgb:         var(--pzss-info-rgb);
    --ct-link-hover-color:       var(--pzss-info);
    --ct-link-hover-color-rgb:   var(--pzss-info-rgb);

    /* statusy: pełne kolory (.bg-success, .text-warning, .badge…) — bez jaskrawej mięty/żółci/cyjanu Hypera */
    --ct-success:                var(--pzss-success);
    --ct-success-rgb:            var(--pzss-success-rgb);
    --ct-warning:                var(--pzss-warning);
    --ct-warning-rgb:            var(--pzss-warning-rgb);
    --ct-info:                   var(--pzss-info);
    --ct-info-rgb:               var(--pzss-info-rgb);
    --ct-secondary:              var(--pzss-text-muted);
    --ct-secondary-rgb:          var(--pzss-text-muted-rgb);
    --ct-dark:                   var(--pzss-text);
    --ct-dark-rgb:               var(--pzss-text-rgb);

    /* statusy: komunikaty i znaczniki subtelne */
    --ct-success-text-emphasis:  var(--pzss-success);
    --ct-success-bg-subtle:      var(--pzss-success-tint);
    --ct-success-border-subtle:  var(--pzss-success);
    --ct-warning-text-emphasis:  var(--pzss-warning);
    --ct-warning-bg-subtle:      var(--pzss-warning-tint);
    --ct-warning-border-subtle:  var(--pzss-warning);
    --ct-info-text-emphasis:     var(--pzss-info);
    --ct-info-bg-subtle:         var(--pzss-info-tint);
    --ct-info-border-subtle:     var(--pzss-info);
}

/* tło strony (gdy Hyper trzyma je poza zmienną) */
body { background-color: var(--pzss-bg); color: var(--pzss-text); }

/* -----------------------------------------------------------------------------
   Przyciski — Hyper wtypuje kolor w lokalne --ct-btn-*; nadpisujemy je tokenami.
   ----------------------------------------------------------------------------- */

/* Przycisk główny = akcja główna (wypełniony czerwony) */
.btn-primary {
    --ct-btn-color:              var(--pzss-on-red);
    --ct-btn-bg:                 var(--pzss-red);
    --ct-btn-border-color:       var(--pzss-red);
    --ct-btn-hover-color:        var(--pzss-on-red);
    --ct-btn-hover-bg:           var(--pzss-red-dark);
    --ct-btn-hover-border-color: var(--pzss-red-dark);
    --ct-btn-active-color:       var(--pzss-on-red);
    --ct-btn-active-bg:          var(--pzss-red-darker);
    --ct-btn-active-border-color:var(--pzss-red-darker);
    --ct-btn-disabled-color:     var(--pzss-on-red);
    --ct-btn-disabled-bg:        var(--pzss-red);
    --ct-btn-disabled-border-color: var(--pzss-red);
    --ct-btn-focus-shadow-rgb:   var(--pzss-info-rgb);
}

/* Outline „primary" = akcent marki w wersji obrysowej */
.btn-outline-primary {
    --ct-btn-color:              var(--pzss-red);
    --ct-btn-border-color:       var(--pzss-red);
    --ct-btn-bg:                 transparent;
    --ct-btn-hover-color:        var(--pzss-on-red);
    --ct-btn-hover-bg:           var(--pzss-red);
    --ct-btn-hover-border-color: var(--pzss-red);
    --ct-btn-active-color:       var(--pzss-on-red);
    --ct-btn-active-bg:          var(--pzss-red-dark);
    --ct-btn-active-border-color:var(--pzss-red-dark);
    --ct-btn-focus-shadow-rgb:   var(--pzss-info-rgb);
}

/* Przycisk drugorzędny (outline neutralny) */
.btn-outline-secondary {
    --ct-btn-color:              var(--pzss-text);
    --ct-btn-border-color:       var(--pzss-border);
    --ct-btn-bg:                 var(--pzss-surface);
    --ct-btn-hover-color:        var(--pzss-text);
    --ct-btn-hover-bg:           var(--pzss-bg);
    --ct-btn-hover-border-color: var(--pzss-border);
    --ct-btn-active-color:       var(--pzss-text);
    --ct-btn-active-bg:          var(--pzss-bg);
    --ct-btn-active-border-color:var(--pzss-border);
    --ct-btn-focus-shadow-rgb:   var(--pzss-info-rgb);
}

/* Akcja destrukcyjna = obrys + ikona + tekst (NIGDY wypełniony czerwony) */
.btn-outline-danger,
.btn-danger {              /* .btn-danger sprowadzamy do wyglądu outline */
    --ct-btn-color:              var(--pzss-red-dark);
    --ct-btn-border-color:       var(--pzss-red-dark);
    --ct-btn-bg:                 var(--pzss-surface);
    --ct-btn-hover-color:        var(--pzss-red-dark);
    --ct-btn-hover-bg:           var(--pzss-red-tint);
    --ct-btn-hover-border-color: var(--pzss-red-dark);
    --ct-btn-active-color:       var(--pzss-red-dark);
    --ct-btn-active-bg:          var(--pzss-red-tint);
    --ct-btn-active-border-color:var(--pzss-red-dark);
    --ct-btn-disabled-color:     var(--pzss-text-muted);
    --ct-btn-disabled-bg:        var(--pzss-surface);
    --ct-btn-disabled-border-color: var(--pzss-border);
    --ct-btn-focus-shadow-rgb:   var(--pzss-red-dark-rgb);
}

/* Przyciski statusowe: success / warning / info na tokenach (jak outline-primary: obrys → wypełnienie na hover) */
.btn-success, .btn-warning, .btn-info {
    --ct-btn-color:              #FFFFFF;
    --ct-btn-hover-color:        #FFFFFF;
    --ct-btn-active-color:       #FFFFFF;
    --ct-btn-disabled-color:     #FFFFFF;
}
.btn-success {
    --ct-btn-bg: var(--pzss-success);  --ct-btn-border-color: var(--pzss-success);
    --ct-btn-hover-bg: #17633a;        --ct-btn-hover-border-color: #17633a;
    --ct-btn-active-bg: #124f2e;       --ct-btn-active-border-color: #124f2e;
    --ct-btn-disabled-bg: var(--pzss-success); --ct-btn-disabled-border-color: var(--pzss-success);
    --ct-btn-focus-shadow-rgb: var(--pzss-info-rgb);
}
.btn-warning {
    --ct-btn-bg: var(--pzss-warning);  --ct-btn-border-color: var(--pzss-warning);
    --ct-btn-hover-bg: #7d4a00;        --ct-btn-hover-border-color: #7d4a00;
    --ct-btn-active-bg: #663d00;       --ct-btn-active-border-color: #663d00;
    --ct-btn-disabled-bg: var(--pzss-warning); --ct-btn-disabled-border-color: var(--pzss-warning);
    --ct-btn-focus-shadow-rgb: var(--pzss-info-rgb);
}
.btn-info {
    --ct-btn-bg: var(--pzss-info);     --ct-btn-border-color: var(--pzss-info);
    --ct-btn-hover-bg: #184c88;        --ct-btn-hover-border-color: #184c88;
    --ct-btn-active-bg: #123c6c;       --ct-btn-active-border-color: #123c6c;
    --ct-btn-disabled-bg: var(--pzss-info); --ct-btn-disabled-border-color: var(--pzss-info);
    --ct-btn-focus-shadow-rgb: var(--pzss-info-rgb);
}
.btn-outline-success, .btn-outline-warning, .btn-outline-info {
    --ct-btn-bg: var(--pzss-surface);
    --ct-btn-hover-color: #FFFFFF;  --ct-btn-active-color: #FFFFFF;
    --ct-btn-disabled-color: var(--pzss-text-muted); --ct-btn-disabled-bg: var(--pzss-surface);
    --ct-btn-disabled-border-color: var(--pzss-border);
    --ct-btn-focus-shadow-rgb: var(--pzss-info-rgb);
}
.btn-outline-success { --ct-btn-color: var(--pzss-success); --ct-btn-border-color: var(--pzss-success); --ct-btn-hover-bg: var(--pzss-success); --ct-btn-hover-border-color: var(--pzss-success); --ct-btn-active-bg: #17633a; --ct-btn-active-border-color: #17633a; }
.btn-outline-warning { --ct-btn-color: var(--pzss-warning); --ct-btn-border-color: var(--pzss-warning); --ct-btn-hover-bg: var(--pzss-warning); --ct-btn-hover-border-color: var(--pzss-warning); --ct-btn-active-bg: #7d4a00; --ct-btn-active-border-color: #7d4a00; }
.btn-outline-info    { --ct-btn-color: var(--pzss-info);    --ct-btn-border-color: var(--pzss-info);    --ct-btn-hover-bg: var(--pzss-info);    --ct-btn-hover-border-color: var(--pzss-info);    --ct-btn-active-bg: #184c88; --ct-btn-active-border-color: #184c88; }

/* Znaczniki statusowe pełne: biały tekst na tokenach (zamiast text-dark na jaskrawym tle) */
.badge.bg-warning, .badge.bg-info { color: #FFFFFF !important; }

/* Link-button (btn-link) = niebieski jak link */
.btn-link {
    --ct-btn-color:        var(--pzss-info);
    --ct-btn-hover-color:  var(--pzss-info);
}

/* Stan wyłączony (ogólnie) — bez czerwieni */
.btn:disabled, .btn.disabled { opacity: .65; }

/* -----------------------------------------------------------------------------
   Linki treściowe — niebieskie, podkreślenie na hover (nie dotyczy nav/przyciski)
   ----------------------------------------------------------------------------- */
a:not(.nav-link):not(.navbar-brand):not(.btn):not(.dropdown-item):not(.page-link):not(.badge):hover {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Nagłówek aplikacji — biały z dolnym paskiem 3px czerwieni
   ----------------------------------------------------------------------------- */
.app-topbar {
    background-color: var(--pzss-surface) !important;
    border-bottom: 3px solid var(--pzss-red) !important;
}
.navbar-brand .fw-bold { color: var(--pzss-text); }

/* Menu: pozycja zwykła / hover / aktywna */
.app-topbar .navbar-nav .nav-link { color: var(--pzss-text-muted); }
.app-topbar .navbar-nav .nav-link:hover { color: var(--pzss-text); }
.app-topbar .navbar-nav .nav-link.active { color: var(--pzss-red-dark) !important; }
.app-topbar .navbar-nav .nav-link.active::after { background: var(--pzss-red) !important; }

/* Pozycja aktywna w rozwijanym menu */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--pzss-red-tint);
    color: var(--pzss-red-dark);
}

/* -----------------------------------------------------------------------------
   Formularze — pola na powierzchni, obrys --pzss-border, błąd czerwony
   ----------------------------------------------------------------------------- */
.form-control, .form-select {
    background-color: var(--pzss-surface);
    border-color: var(--pzss-border);
    color: var(--pzss-text);
}
.form-control::placeholder { color: var(--pzss-text-muted); }
.form-control.is-invalid, .form-select.is-invalid,
.was-validated .form-control:invalid, .was-validated .form-select:invalid {
    border-color: var(--pzss-red-dark);
}
.form-check-input:checked {
    background-color: var(--pzss-red);
    border-color: var(--pzss-red);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--pzss-bg);
    color: var(--pzss-text-muted);
}

/* -----------------------------------------------------------------------------
   Focus — widoczny pierścień 2px niebieski z odstępem 2px na elementach akcji
   ----------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-link:focus-visible, .dropdown-item:focus-visible, .page-link:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--pzss-info);
    outline-offset: 2px;
}
/* pola: dodatkowo niebieskie obramowanie na focus, bez indygo poświaty */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--pzss-info);
    box-shadow: 0 0 0 .2rem rgba(var(--pzss-info-rgb), .25);
}

/* -----------------------------------------------------------------------------
   Tabele — nagłówek na --pzss-bg, hover i zaznaczenie
   ----------------------------------------------------------------------------- */
.table {
    --ct-table-hover-bg:  var(--pzss-bg);
    --ct-table-active-bg: var(--pzss-red-tint);
    --ct-table-border-color: var(--pzss-divider);
}
.table > thead th, .table > thead td {
    background-color: var(--pzss-bg);
    color: var(--pzss-text-muted);
    border-bottom: 1px solid var(--pzss-divider);
}
.table-active, .table-active > * { background-color: var(--pzss-red-tint) !important; }

/* -----------------------------------------------------------------------------
   Karty / panele / modale — powierzchnia + linia działowa
   ----------------------------------------------------------------------------- */
.card, .modal-content, .list-group-item, .dropdown-menu {
    background-color: var(--pzss-surface);
    color: var(--pzss-text);
}
.card { border-color: var(--pzss-divider); }
.card-header { border-bottom-color: var(--pzss-divider); }
hr { border-top-color: var(--pzss-divider); color: var(--pzss-divider); }

/* -----------------------------------------------------------------------------
   Pozostałe komponenty, które Hyper koloruje wtypanym indygo → tokeny PZSS
   (paginacja DataTables, nav-pills, list-group, progress, suwaki)
   ----------------------------------------------------------------------------- */
.pagination {
    --ct-pagination-active-bg:            var(--pzss-red);
    --ct-pagination-active-border-color:  var(--pzss-red);
    --ct-pagination-color:                var(--pzss-info);
    --ct-pagination-hover-color:          var(--pzss-info);
    --ct-pagination-focus-color:          var(--pzss-info);
    --ct-pagination-focus-box-shadow:     0 0 0 .2rem rgba(var(--pzss-info-rgb), .25);
}
.nav-pills {
    --ct-nav-pills-link-active-bg: var(--pzss-red);
}
.list-group {
    --ct-list-group-active-bg:           var(--pzss-red);
    --ct-list-group-active-border-color: var(--pzss-red);
}
.list-group-item.active {
    background-color: var(--pzss-red);
    border-color: var(--pzss-red);
}
.progress { --ct-progress-bar-bg: var(--pzss-red); }
.form-range::-webkit-slider-thumb { background-color: var(--pzss-red); }
.form-range::-moz-range-thumb { background-color: var(--pzss-red); }