/* ============================================================
   UrlopyApp - warstwa firmowa HERKULES S.A.
   Paleta wg identyfikacji: PANTONE Orange 021 CV + Process Black.
   ============================================================ */

:root {
    /* Kolory firmowe (z HERKULES_LOGO_kolory.pdf) */
    --hrk-orange: #F37835;        /* PANTONE Orange 021 CV, CMYK 0/68/100/0 */
    --hrk-orange-600: #DA6425;    /* hover/active */
    --hrk-orange-ink: #A8480F;    /* pomaranczowy do TEKSTU na bialym (kontrast 5,8:1) */
    --hrk-orange-soft: #FDF0E8;   /* delikatne tlo akcentu */
    --hrk-black: #000000;         /* PANTONE Process Black CV */
    --hrk-ink: #14181C;           /* grafit - tekst, sidebar */
    --hrk-ink-600: #2B3138;

    /* Nadpisania zmiennych Bootstrapa */
    --bs-link-color: var(--hrk-orange-ink);
    --bs-link-hover-color: var(--hrk-orange-600);
    --bs-body-color: #212529;
    --bs-border-radius: 0.4rem;
}

html, body {
    /* Stos systemowy - natywna czcionka kazdego systemu zamiast Helvetiki */
    font-family: 'Segoe UI', system-ui, -apple-system, 'Segoe UI Variable Text',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--bs-body-color);
}

/* ---- Linki ---- */
a, .btn-link {
    color: var(--hrk-orange-ink);
}

a:hover, .btn-link:hover {
    color: var(--hrk-orange-600);
}

/* ---- Naglowki ---- */
h1, h2, h3, h4, h5, h6 {
    color: var(--hrk-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

h1:focus {
    outline: none;
}

/* ---- Przyciski ----
   Pomaranczowy przycisk ma CZARNY tekst: kontrast 7,5:1 (bialy dalby tylko 2,8:1,
   ponizej progu WCAG AA). To tez uklad z samego logo - pomarancz obok czerni. */
.btn-primary {
    color: var(--hrk-black);
    background-color: var(--hrk-orange);
    border-color: var(--hrk-orange-600);
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: var(--hrk-black);
    background-color: var(--hrk-orange-600);
    border-color: var(--hrk-orange-600);
}

.btn-primary:disabled, .btn-primary.disabled {
    color: var(--hrk-black);
    background-color: var(--hrk-orange);
    border-color: var(--hrk-orange-600);
}

.btn-outline-primary {
    color: var(--hrk-orange-ink);
    border-color: var(--hrk-orange);
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    color: var(--hrk-black);
    background-color: var(--hrk-orange);
    border-color: var(--hrk-orange-600);
}

/* ---- Focus: widoczny obrys w kolorze firmowym ---- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--hrk-orange);
    box-shadow: 0 0 0 0.2rem rgba(243, 120, 53, 0.35);
}

.form-check-input:checked {
    background-color: var(--hrk-orange);
    border-color: var(--hrk-orange-600);
}

/* ---- Karty: delikatny cien zamiast plaskiej ramki ---- */
.card {
    border: 1px solid #E6E8EA;
    box-shadow: 0 1px 2px rgba(20, 24, 28, 0.04), 0 2px 8px rgba(20, 24, 28, 0.04);
}

.card-header {
    background-color: #FAFBFC;
    border-bottom: 1px solid #EDEFF1;
    font-weight: 600;
    color: var(--hrk-ink);
}

/* Karta edycji - akcent firmowy zamiast bootstrapowego niebieskiego */
.card.border-primary {
    border-color: var(--hrk-orange) !important;
}

.card.border-primary > .card-header.bg-primary {
    background-color: var(--hrk-orange) !important;
    color: var(--hrk-black) !important;
    border-bottom-color: var(--hrk-orange-600);
}

/* ---- Tabele: czytelniejszy naglowek ---- */
.table > thead {
    border-bottom: 2px solid #DEE2E6;
}

.table > thead th {
    font-weight: 600;
    color: var(--hrk-ink);
}

.table-light, .table > thead.table-light {
    --bs-table-bg: #FAFBFC;
}

/* ---- Alerty informacyjne w tonacji firmowej ---- */
.alert-info {
    background-color: var(--hrk-orange-soft);
    border-color: #F6D2BC;
    color: #6B2E08;
}

/* ============================================================
   Plakietki statusów wniosku.

   Zasada: CZERWIEN JEST ZAREZERWOWANA DLA ZWOLNIENIA LEKARSKIEGO.
   To utrwalona konwencja kadrowa, wiec tylko L4 dostaje pelne czerwone
   wypelnienie i tylko ono "krzyczy" na liscie. Pozostale statusy sa
   stonowane (jasne tlo + ciemny tekst + ramka), zeby nie konkurowaly
   ani z L4, ani z firmowym pomaranczem interfejsu.

   Wczesniej "Odrzucony" i "Zwolnienie" mialy identyczna czerwien
   (bg-danger) - decyzja odmowna wygladala jak choroba.
   ============================================================ */

.status-badge {
    display: inline-block;
    padding: 0.3em 0.65em;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}

/* Oczekujacy - bursztyn, spokojny; sprawa w toku. Kontrast 8,2:1 */
.status-oczekujacy {
    background-color: #FEF3C7;
    border-color: #FCD34D;
    color: #78350F;
}

/* Zaakceptowany - zielen stonowana; zamkniete pozytywnie. Kontrast 8,3:1 */
.status-zaakceptowany {
    background-color: #DCFCE7;
    border-color: #86EFAC;
    color: #14532D;
}

/* Odrzucony - ciezki grafit zamiast czerwieni; decyzja odmowna,
   wyrazna, ale odrozniona od zwolnienia. Kontrast 7,6:1 */
.status-odrzucony {
    background-color: #4B5563;
    border-color: #374151;
    color: #FFFFFF;
}

/* Anulowany - lekka szarosc; wycofane przez pracownika, nie decyzja. */
.status-anulowany {
    background-color: #F3F4F6;
    border-color: #D1D5DB;
    color: #4B5563;
}

/* Zwolnienie lekarskie - jedyny status z pelna czerwienia. Kontrast 4,8:1 */
.status-zwolnienie {
    background-color: #DC2626;
    border-color: #B91C1C;
    color: #FFFFFF;
}

/* ============================================================
   Kafle metryk (Pulpit).

   Zasada: nie wszystkie liczby sa rowne. Jeden kafel wiodacy -
   ten, po ktory uzytkownik wchodzi na pulpit - reszta cicha.
   Zamiast pieciu roznych tel Bootstrapa (niebieski/zielony/
   zolty/cyjan/szary) jedna biala karta, a kolor tylko tam,
   gdzie cos naprawde wymaga uwagi.
   ============================================================ */

.stat {
    position: relative;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E6E8EA;
    border-radius: var(--bs-border-radius);
    padding: 0.55rem 0.85rem 0.65rem;
    box-shadow: 0 1px 2px rgba(20, 24, 28, 0.04);
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7280;
}

.stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0.15rem 0 0.1rem;
    color: var(--hrk-ink);
    font-variant-numeric: tabular-nums;
}

.stat-note {
    font-size: 0.76rem;
    color: #6B7280;
}

/* Kafel wiodacy - kreska firmowa z lewej i wieksza liczba. */
.stat-lead {
    border-left: 3px solid var(--hrk-orange);
}

    .stat-lead .stat-value {
        font-size: 2.05rem;
    }

/* Kafel wymagajacy dzialania (wnioski czekajace na decyzje). */
.stat-action {
    border-left: 3px solid #D97706;
    background: #FFFBEB;
}

    .stat-action .stat-label {
        color: #92400E;
    }

    .stat-action .stat-value {
        color: #78350F;
    }

/* Zero to brak sprawy, nie alarm - liczba wyszarzona. */
.stat-zero .stat-value {
    color: #9CA3AF;
}

.stat a {
    color: var(--hrk-orange-ink);
    font-weight: 600;
    text-decoration: none;
}

/* ============================================================
   Harmonogram - najgestszy ekran w aplikacji.

   Zalozenie: siatka ma znikac, dane maja zostac. Cienkie linie
   wewnatrz tygodnia, mocniejsza kreska na granicy tygodni,
   kolumna "dzis" oznaczona pomaranczem firmowym, swieto
   ciemniejsze od weekendu (to dwie rozne rzeczy).

   Kolory nieobecnosci sa te same co w plakietkach statusow -
   pelna czerwien nadal wylacznie dla zwolnienia lekarskiego.
   ============================================================ */

.cal, .cal-year {
    width: 100%;
    background: #FFFFFF;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1rem;
}

/* Staly uklad kolumn: nazwisko i kolumna wykorzystania maja zadana
   szerokosc, a kolumny dni dziela cala reszte ekranu po rowno.
   Przy ukladzie automatycznym cala wolna szerokosc szla do kolumny
   z nazwiskiem (jedynej bez zadanej szerokosci) - zajmowala pol ekranu,
   a dni scisnely sie do 24 px przy prawej krawedzi. */
.cal {
    table-layout: fixed;
    min-width: 920px;
    font-size: 0.8rem;
}

.cal-year {
    table-layout: fixed;
    min-width: 720px;
    font-size: 0.875rem;
}

.cal th, .cal td,
.cal-year th, .cal-year td {
    padding: 0;
    border-bottom: 1px solid #EDEFF1;
    border-right: 1px solid #F4F5F6;
    vertical-align: middle;
}

.cal-year th, .cal-year td {
    padding: 0.35rem 0.5rem;
    text-align: center;
}

.cal thead th, .cal-year thead th {
    background: #FAFBFC;
    border-bottom: 2px solid #DEE2E6;
    font-weight: 600;
    color: var(--hrk-ink);
    text-align: center;
}

.cal tbody td {
    height: 1.5rem;
}

/* Kolumna z nazwiskiem zostaje na ekranie przy przewijaniu w bok. */
.cal .cal-name, .cal-year .cal-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #FFFFFF;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.2rem 0.45rem;
    border-right: 1px solid #DDE1E5;
}

.cal .cal-name {
    width: 168px;
}

.cal-year .cal-name {
    width: 200px;
}

.cal thead .cal-name, .cal-year thead .cal-name {
    z-index: 3;
    background: #FAFBFC;
}

.cal tbody tr:hover .cal-name,
.cal-year tbody tr:hover .cal-name {
    background: #FAFBFC;
}

/* ---- Kolumny dni: bez zadanej szerokosci, dziela wolne miejsce po rowno ---- */
.cal-day {
    text-align: center;
}

.cal thead .cal-day {
    padding: 2px 0;
}

/* Poniedzialek zaczyna tydzien - mocniejsza kreska pionowa. */
.cal-weekstart {
    border-left: 2px solid #DDE1E5;
}

/* Dzien wolny: weekend, swieto ustawowe i dzien firmowy to JEDNA kategoria
   i jeden kolor. Rozbicie na dwa odcienie szarosci bylo w praktyce
   nierozroznialne, a mnozylo pozycje w legendzie. Ktory z dni wolnych jest
   swietem, mowi pomaranczowy numer w naglowku kolumny i dymek z nazwa swieta.

   Wazniejsze jest to, co ten kolor odroznia: dzien wolny od pracujacego.
   Dlatego szarosc jest wyrazna, a nie ledwo widoczna. */
.cal-weekend,
.cal-holiday {
    background: #E5E7EB;
}

.cal thead .cal-holiday {
    color: var(--hrk-orange-ink);
    font-weight: 700;
}

/* ---- Nieobecnosci: te same barwy co plakietki statusow ---- */
.cal-approved {
    background: #BBF7D0;
    color: #14532D;
}

.cal-pending {
    background: #FDE68A;
    color: #78350F;
}

/* Zwolnienie lekarskie w SIATCE: czerwien zostaje jako sygnal, ale jako jasne
   tlo z mocnym czerwonym kodem, nie pelne wypelnienie. Plakietka statusu
   pojawia sie raz, a tu jeden L4 potrafi zajac 31 komorek z rzedu - pelna
   czerwien robila z calego wiersza czerwona sciane i zaglaszala wszystko inne.
   Barwa pozostaje zarezerwowana dla L4, wiec czytelnosc konwencji nie cierpi. */
.cal-l4 {
    background: #FEE2E2;
    color: #B91C1C;
}

    .cal-l4 .cal-code {
        font-weight: 700;
    }

.cal-planned {
    background: #E0F2FE;
    color: #075985;
}

/* ---- Dzis: pionowy pas w kolorze firmowym ---- */
.cal-today {
    box-shadow: inset 2px 0 0 var(--hrk-orange), inset -2px 0 0 var(--hrk-orange);
}

.cal thead .cal-today {
    background: var(--hrk-orange-soft);
    color: var(--hrk-black);
    box-shadow: inset 2px 0 0 var(--hrk-orange), inset -2px 0 0 var(--hrk-orange), inset 0 3px 0 var(--hrk-orange);
}

/* Kod rodzaju w komorce dziedziczy kolor tekstu z wypelnienia. */
.cal-code {
    display: block;
    min-height: 1.4rem;
    line-height: 1.4rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-align: center;
    color: inherit;
    text-decoration: none;
}

    .cal-code:hover {
        color: inherit;
        box-shadow: inset 0 0 0 2px rgba(20, 24, 28, 0.3);
    }

/* Pusta komorka do klikniecia - podpowiedz dopiero pod kursorem. */
.cal-add {
    min-height: 1.4rem;
    cursor: pointer;
}

    .cal-add:hover {
        background: var(--hrk-orange-soft);
        box-shadow: inset 0 0 0 1px var(--hrk-orange);
    }

/* Kolumna wykorzystania urlopu - oddzielona od siatki dni. */
.cal-total {
    width: 84px;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.2rem 0.3rem;
    border-left: 2px solid #DDE1E5;
}

/* ---- Widok roczny: te same barwy, spokojniejsze ---- */
.cal-y-approved {
    background: #DCFCE7;
    color: #14532D;
    font-weight: 600;
}

.cal-y-planned {
    background: #E0F2FE;
    color: #075985;
}

.cal-y-total {
    font-weight: 600;
    border-left: 2px solid #DDE1E5;
}

/* Legenda: te same probki co komorki, zamiast plakietek Bootstrapa. */
.cal-key {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.2rem;
    border: 1px solid rgba(20, 24, 28, 0.18);
    vertical-align: -2px;
    margin-right: 0.1rem;
}

/* ---- Walidacja ---- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ---- Blazor error boundary (po polsku) ---- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Wystąpił błąd."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.content {
    padding-top: 1.1rem;
}

/* ============================================================
   Motyw ciemny (Bootstrap 5.3, atrybut data-bs-theme na <html>).

   Bootstrap przestawia swoje zmienne sam. Tutaj domykamy warstwe
   firmowa: kolory HERKULES sa dobrane do bialego tla (ciemny
   pomarancz do tekstu, grafitowe naglowki) - na ciemnym tle
   zniknelyby albo spadly ponizej progu czytelnosci, wiec dostaja
   jasniejsze warianty tych samych barw.

   Wypelnienia statusow zostaja IDENTYCZNE w obu motywach - to
   konwencja kadrowa, a nie dekoracja: czerwony ma znaczyc L4
   niezaleznie od tego, jak uzytkownik ustawil sobie interfejs.
   ============================================================ */

/* Wartosci jasne powtorzone pod selektorem [data-bs-theme="light"], zeby dzialaly
   WYSPY jasnego motywu wewnatrz ciemnej strony (karta logowania). Zmienne firmowe
   dziedzicza sie z <html>, wiec samo data-bs-theme="light" na elemencie nie
   cofneloby ich - bez tego bloku naglowek na bialej karcie bylby prawie bialy. */
[data-bs-theme="light"] {
    /* Sam kolor tekstu trzeba przywrocic JAWNIE: 'color' dziedziczy sie jako
       wartosc wyliczona przy <body>, wiec przedefiniowanie zmiennej glebiej
       w drzewie nie cofa jasnej barwy odziedziczonej z motywu ciemnego.
       Bez tej linii etykiety na bialej karcie logowania byly ledwo widoczne. */
    color: var(--bs-body-color);
    /* To samo dotyczy kontrolek malowanych przez przegladarke (autofill, paski
       przewijania) - one ida za color-scheme, nie za zmiennymi Bootstrapa. */
    color-scheme: light;
    --hrk-orange-ink: #A8480F;
    --hrk-orange-soft: #FDF0E8;
    --hrk-ink: #14181C;
    --bs-body-color: #212529;
    --bs-link-color: var(--hrk-orange-ink);
    --bs-link-hover-color: var(--hrk-orange-600);
    --hrk-surface: #FFFFFF;
    --hrk-surface-2: #FAFBFC;
    --hrk-line: #E6E8EA;
}

[data-bs-theme="dark"] {
    --hrk-orange-ink: #F59B6B;    /* pomaranczowy do TEKSTU na ciemnym tle */
    --hrk-orange-soft: #3A2417;   /* delikatne tlo akcentu */
    --hrk-ink: #E9ECEF;           /* naglowki - odwrocone wzgledem motywu jasnego */
    --bs-body-color: #DEE2E6;
    --bs-link-color: var(--hrk-orange-ink);
    --bs-link-hover-color: #FFB68A;
    /* Powierzchnie: karta jasniejsza od tla strony, naglowek jeszcze jasniejszy. */
    --hrk-surface: #272C31;
    --hrk-surface-2: #30363D;
    --hrk-line: #3A4149;
}

/* ---- Karty i listy ---- */
[data-bs-theme="dark"] .card {
    background-color: var(--hrk-surface);
    border-color: var(--hrk-line);
    box-shadow: none;
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--hrk-surface-2);
    border-bottom-color: var(--hrk-line);
    color: var(--hrk-ink);
}

[data-bs-theme="dark"] .list-group-item {
    background-color: var(--hrk-surface);
    border-color: var(--hrk-line);
}

/* ---- Kafle metryk ---- */
[data-bs-theme="dark"] .stat {
    background: var(--hrk-surface);
    border-color: var(--hrk-line);
    box-shadow: none;
}

[data-bs-theme="dark"] .stat-label,
[data-bs-theme="dark"] .stat-note {
    color: #9AA4AE;
}

[data-bs-theme="dark"] .stat-action {
    background: #33260F;
    border-left-color: #D97706;
}

    [data-bs-theme="dark"] .stat-action .stat-label {
        color: #EFC272;
    }

    [data-bs-theme="dark"] .stat-action .stat-value {
        color: #FBD38D;
    }

/* ---- Tabele i alerty ---- */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table > thead.table-light {
    --bs-table-bg: var(--hrk-surface-2);
}

[data-bs-theme="dark"] .table > thead {
    border-bottom-color: var(--hrk-line);
}

[data-bs-theme="dark"] .alert-info {
    background-color: #3A2417;
    border-color: #6B3D1F;
    color: #F6C9A8;
}

/* ---- Harmonogram ---- */
[data-bs-theme="dark"] .cal,
[data-bs-theme="dark"] .cal-year {
    background: var(--hrk-surface);
}

[data-bs-theme="dark"] .cal th,
[data-bs-theme="dark"] .cal td,
[data-bs-theme="dark"] .cal-year th,
[data-bs-theme="dark"] .cal-year td {
    border-bottom-color: #313841;
    border-right-color: #2C333A;
}

[data-bs-theme="dark"] .cal thead th,
[data-bs-theme="dark"] .cal-year thead th {
    background: var(--hrk-surface-2);
    border-bottom-color: var(--hrk-line);
    color: var(--hrk-ink);
}

[data-bs-theme="dark"] .cal .cal-name,
[data-bs-theme="dark"] .cal-year .cal-name {
    background: var(--hrk-surface);
    border-right-color: var(--hrk-line);
}

[data-bs-theme="dark"] .cal thead .cal-name,
[data-bs-theme="dark"] .cal-year thead .cal-name {
    background: var(--hrk-surface-2);
}

[data-bs-theme="dark"] .cal tbody tr:hover .cal-name,
[data-bs-theme="dark"] .cal-year tbody tr:hover .cal-name {
    background: #333A42;
}

[data-bs-theme="dark"] .cal-weekstart,
[data-bs-theme="dark"] .cal-total,
[data-bs-theme="dark"] .cal-y-total {
    border-color: var(--hrk-line);
}

/* Dzien wolny w motywie ciemnym musi byc WYRAZNIE ciemniejszy od dnia
   pracujacego (tlo tabeli). Poprzednio weekend byl ciemniejszy, a swieto
   JASNIEJSZE od dnia pracujacego - dzien roboczy wypadal pomiedzy nimi
   i skala przestawala cokolwiek znaczyc. */
[data-bs-theme="dark"] .cal-weekend,
[data-bs-theme="dark"] .cal-holiday {
    background: #14181C;
}

/* Wypelnienia nieobecnosci powtorzone w ciemnym motywie CELOWO: selektor
   [data-bs-theme] jest mocniejszy niz sama klasa, wiec bez tego tlo weekendu
   przykrywaloby urlop wypadajacy w sobote. Kolory te same co w motywie jasnym. */
[data-bs-theme="dark"] .cal-approved {
    background: #BBF7D0;
    color: #14532D;
}

[data-bs-theme="dark"] .cal-pending {
    background: #FDE68A;
    color: #78350F;
}

[data-bs-theme="dark"] .cal-l4 {
    background: #4C1D1D;
    color: #FCA5A5;
}

[data-bs-theme="dark"] .cal-planned {
    background: #E0F2FE;
    color: #075985;
}

[data-bs-theme="dark"] .cal-key {
    border-color: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   Ekran "O aplikacji"
   ============================================================ */

/* Dwa warianty logo: ciemny znak na jasnym motywie, jasny na ciemnym. */
.about-logo {
    max-height: 56px;
    max-width: 100%;
}

.about-logo-dark {
    display: none;
}

[data-bs-theme="dark"] .about-logo-light {
    display: none;
}

[data-bs-theme="dark"] .about-logo-dark {
    display: inline-block;
}

.about-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    font-size: 0.95rem;
}

.about-grid dt {
    font-weight: 600;
    color: #6B7280;
}

[data-bs-theme="dark"] .about-grid dt {
    color: #9AA4AE;
}

.about-grid dd {
    margin: 0;
}

@media (max-width: 575.98px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .about-grid dd {
        margin-bottom: 0.6rem;
    }
}

/* ---- Pigulki nawigacji (Zarzadzanie kontem) ----
   Bootstrap domyslnie maluje aktywna piguke na --bs-primary (blekit), ktorego
   ten motyw nie nadpisuje - stad niebieski blok gryzacy sie z pomaranczem.
   Ujednolicamy do palety firmowej i nadajemy proporcje spojne z menu glownym:
   rowna wysokosc, zaokraglenie, hover w delikatnym pomaranczu, lekki cien pod
   aktywna pozycja (zeby nie byla plaskim slabem). nav-pills wystepuje wylacznie
   w menu zarzadzania kontem, wiec regula jest bezpiecznie globalna. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--hrk-orange);
    --bs-nav-pills-link-active-color: var(--hrk-black);
    gap: 0.15rem;
}

.nav-pills .nav-link {
    display: flex;
    align-items: center;
    min-height: 2.6rem;
    padding: 0.4rem 0.85rem;
    color: var(--bs-body-color);
    border-radius: var(--bs-border-radius);
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--hrk-orange-soft);
    color: var(--hrk-orange-ink);
}

.nav-pills .nav-link.active {
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(243, 120, 53, 0.35);
}