/* ============================================================
   Bazowy rozmiar czcionki
   ============================================================ */
:root {
  font-size: 14px;
}

/* ============================================================
   MOTYWY
   ============================================================ */
:root,
[data-theme="light"] {
  --bg:                #f4f5f7;
  --bg-card:           #ffffff;
  --bg-card-alt:       #f8f9fa;
  --text:              #212529;
  --text-muted:        #6c757d;
  --border:            #dee2e6;
  --table-head-bg:     #f1f3f5;
  --table-head-text:   #6c757d;
  --table-row-hover:   #f8f9fa;
  --table-stripe:      #fbfcfd;
  --input-bg:          #ffffff;
  --input-border:      #ced4da;
  --shadow:            rgba(0,0,0,.06);
  --bottom-bar-bg:     #ffffff;
  --bottom-bar-border: #dee2e6;
  --bottom-bar-color:  #6c757d;
  --badge-bg-status:   #e9ecef;
}

[data-theme="dark"] {
  /* Nasze zmienne */
  --bg:                #0d1117;
  --bg-card:           #161b22;
  --bg-card-alt:       #1c2128;
  --text:              #cdd9e5;
  --text-muted:        #768390;
  --border:            #2d333b;
  --table-head-bg:     #1c2128;
  --table-head-text:   #768390;
  --table-row-hover:   #1c2128;
  --table-stripe:      #161b22;
  --input-bg:          #1c2128;
  --input-border:      #2d333b;
  --shadow:            rgba(0,0,0,.4);
  --bottom-bar-bg:     #161b22;
  --bottom-bar-border: #2d333b;
  --bottom-bar-color:  #768390;
  --badge-bg-status:   #2d333b;

  /* Bootstrap CSS vars — synchronizacja z naszą paletą dark mode.
     Dzięki data-bs-theme="dark" Bootstrap sam ustawia swoje zmienne,
     ale nadpisujemy je naszymi wartościami żeby zachować spójność. */
  --bs-body-bg:           #0d1117;
  --bs-body-color:        #cdd9e5;
  --bs-secondary-bg:      #1c2128;
  --bs-secondary-color:   #768390;
  --bs-tertiary-bg:       #161b22;
  --bs-tertiary-color:    #5a6470;
  --bs-border-color:      #2d333b;
  --bs-border-color-translucent: rgba(45,51,59,.5);
  --bs-emphasis-color:    #e6edf3;
  --bs-card-bg:           #161b22;
  --bs-card-cap-bg:       #1c2128;
  --bs-modal-bg:          #161b22;
  --bs-offcanvas-bg:      #161b22;
  --bs-dropdown-bg:       #1c2128;
  --bs-input-bg:          #1c2128;
  --bs-table-bg:          #161b22;
  --bs-table-striped-bg:  #161b22;
  --bs-table-hover-bg:    #1c2128;
  --bs-table-border-color:#2d333b;
  --bs-list-group-bg:     #161b22;
  --bs-list-group-border-color: #2d333b;
}

/* ============================================================
   BODY
   ============================================================ */
body {
  background-color: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
}

/* ============================================================
   KARTY
   ============================================================ */
.card {
  background-color: var(--bg-card);
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 4px var(--shadow);
  color: var(--text);
}
.card-header {
  background-color: var(--bg-card-alt);
  border-bottom-color: var(--border);
  color: var(--text);
}
.card-footer {
  background-color: var(--bg-card-alt);
  border-top-color: var(--border);
}

/* ============================================================
   TABELE — pełna obsługa dark mode
   ============================================================ */
.table {
  color: var(--text);
  --bs-table-bg: var(--bg-card);
  --bs-table-striped-bg: var(--table-stripe);
  --bs-table-hover-bg: var(--table-row-hover);
  --bs-table-border-color: var(--border);
}
.table > thead > tr > th {
  background-color: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: 0.786rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom-color: var(--border);
}
.table > tbody > tr > td {
  font-size: 0.9rem;
  border-color: var(--border);
  color: var(--text);
  background-color: var(--bg-card);
}
.table > tbody > tr > th {
  border-color: var(--border);
  color: var(--text-muted);
  font-size: 0.786rem;
  font-weight: 600;
  text-transform: uppercase;
  background-color: var(--bg-card);
}
.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--text);
  background-color: var(--table-row-hover);
}
.table-bordered > :not(caption) > * > * { border-color: var(--border); }

/* Nadpisz Bootstrap's .table-light który jest zawsze biały */
.table-light {
  --bs-table-bg: var(--table-head-bg);
  color: var(--table-head-text);
}

/* ============================================================
   FORMULARZE
   ============================================================ */
.form-control, .form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
  font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: #4a9eff;
  box-shadow: 0 0 0 2px rgba(74,158,255,.2);
}
.form-control::placeholder { color: var(--text-muted); opacity: .7; }
.form-label  { font-size: 0.857rem; font-weight: 500; color: var(--text-muted); }
.form-text   { font-size: 0.786rem; color: var(--text-muted); }
.input-group-text {
  background-color: var(--bg-card-alt);
  border-color: var(--input-border);
  color: var(--text-muted);
}

/* ============================================================
   PRZYCISKI
   ============================================================ */
.btn       { font-size: 0.9rem; }
.btn-sm    { font-size: 0.8rem; }
.btn-outline-secondary {
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-outline-secondary:hover {
  background-color: var(--bg-card-alt);
  border-color: var(--border);
  color: var(--text);
}

/* ============================================================
   ODZNAKI, ALERTY
   ============================================================ */
.badge { font-weight: 500; font-size: 0.75rem; }
.alert { font-size: 0.9rem; }


/* Odznaki typów wysyłek — gwarantowane kolory niezależnie od motywu */
.badge.bg-danger   { background-color: #dc3545 !important; color: #fff !important; }
.badge.bg-primary  { background-color: #0d6efd !important; color: #fff !important; }
.badge.bg-success  { background-color: #198754 !important; color: #fff !important; }
.badge.bg-warning  { background-color: #ffc107 !important; color: #212529 !important; }
.badge.bg-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge.bg-info     { background-color: #0dcaf0 !important; color: #212529 !important; }

/* ============================================================
   NAGŁÓWKI
   ============================================================ */
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: 0.95rem; }
h6, .h6 { font-size: 0.9rem; }

/* ============================================================
   MODALE, OFFCANVAS, DROPDOWN
   ============================================================ */
.modal-content {
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
.modal-header, .modal-footer { border-color: var(--border); }
.modal-header .btn-close,
.offcanvas-header .btn-close {
  filter: var(--bs-btn-close-filter, none);
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

.offcanvas {
  background-color: var(--bg-card);
  color: var(--text);
}

.dropdown-menu {
  background-color: var(--bg-card);
  border-color: var(--border);
  font-size: 0.9rem;
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background-color: var(--bg-card-alt); color: var(--text); }
.dropdown-divider { border-color: var(--border); }

hr { border-color: var(--border); opacity: 1; }

/* ============================================================
   LISTY, BREADCRUMBY
   ============================================================ */
.list-group-item {
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
.list-group-item:hover { background-color: var(--bg-card-alt); }

/* ============================================================
   BOTTOM BAR
   ============================================================ */
#bottom-bar {
  background: var(--bottom-bar-bg) !important;
  border-top-color: var(--bottom-bar-border) !important;
}
.bb-item { color: var(--bottom-bar-color) !important; }
.bb-item.active { color: #4a9eff !important; }

/* ============================================================
   PRZYCISK MOTYWU W SIDEBARZE
   ============================================================ */
#theme-toggle {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  width: 100%;
  white-space: nowrap; overflow: hidden;
  transition: background .15s, color .15s;
}
#theme-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
#theme-toggle i { font-size: 16px; flex-shrink: 0; }

@media (max-width: 991.98px) and (min-width: 576px) {
  #theme-toggle { justify-content: center; padding: 9px 0; }
  #theme-toggle span { display: none; }
}

/* ============================================================
   DARK MODE — Bootstrap utility overrides
   Bootstrap używa stałych wartości dla .bg-light, .table-secondary itp.
   Nadpisujemy je dla motywu ciemnego.
   ============================================================ */
[data-theme="dark"] .bg-light {
  background-color: var(--bg-card-alt) !important;
  color: var(--text) !important;
}
/* BUG znaleziony 2026-08-07 (zgłoszenie usera — nieczytelne podświetlenia/odznaki w dark
   mode): ta reguła nadpisywała .text-dark na jasny kolor WSZĘDZIE, w tym na .badge.bg-warning
   / .badge.bg-info i innych utility'ach z celowo JASNYM, stałym tłem (patrz .badge.bg-warning
   wyżej — background zawsze #ffc107 niezależnie od motywu). Efekt: jasny tekst na jasnym tle
   ("2" na żółtej odznace stawał się prawie niewidoczny). .text-dark ma dwa różne zastosowania
   które NIE mogą dzielić tej samej reguły: (1) zwykły tekst na tle karty/strony — MA się
   dostosować do motywu, (2) tekst na kolorowej, stałej-niezależnie-od-motywu plamie (odznaka,
   alert) — MUSI zostać ciemny, bo tło koło niego też się nie zmienia. Rozdzielone niżej. */
[data-theme="dark"] .text-dark {
  color: var(--text) !important;
}
[data-theme="dark"] .text-dark.bg-warning,
[data-theme="dark"] .text-dark.bg-info {
  color: #212529 !important;
}
/* BUG #2 znaleziony 2026-08-07 (sama sesja, zgłoszenie usera — "brak czytelności" na
   badge "nie" w kolumnie Odhaczona, wysylki/szczegoly.html): pierwsza wersja fixu wyżej
   miała `.badge.text-dark`/`.text-dark.bg-light` w tej samej regule co bg-warning/bg-info
   — ale .bg-light NIE ma stałego tła (patrz regułą [data-theme=dark] .bg-light wyżej,
   linia ~294, która w dark mode zamienia .bg-light na CIEMNE tło + jasny tekst). Efekt:
   `.badge.bg-light.text-dark` dostawało ciemne tło (z .bg-light) I wymuszony ciemny tekst
   (z tej reguły) — ciemny na ciemnym, jeszcze gorzej niż przed pierwszym fixem. .bg-light
   ma WŁASNĄ, już poprawną obsługę koloru tekstu wyżej — nie dotykać jej tutaj. */
[data-theme="dark"] .table-secondary > * > tr > * {
  --bs-table-color: var(--text);
  --bs-table-bg: var(--bg-card-alt);
  color: var(--text);
  background-color: var(--bg-card-alt);
  border-color: var(--border);
}
[data-theme="dark"] .table-success > * > tr > * {
  --bs-table-color: var(--text);
  background-color: rgba(25, 135, 84, .15);
  color: var(--text);
}
/* table-warning/table-danger/table-info — dopisane 2026-08-07, ten sam bug co wyżej: bez
   jawnego nadpisania Bootstrap liczy kolor tekstu z --bs-warning-text-emphasis/itp., które
   w tej appce nigdy nie są ustawiane dla dark mode (uzywamy wlasnego atrybutu data-theme,
   nie natywnego data-bs-theme Bootstrapa) — tekst zostawał w losowym, nieczytelnym kolorze
   na jasnym (żółtym/czerwonym/niebieskim) tle wiersza. Kolory tła stonowane (.15 alpha) tak
   jak istniejące .table-success wyżej, tekst zawsze jasny (--text) bo tło jest przyciemnione,
   nie pełną jasną plamą jak w trybie jasnym. */
[data-theme="dark"] .table-warning > * > tr > *,
[data-theme="dark"] tr.table-warning > * {
  --bs-table-color: var(--text);
  background-color: rgba(255, 193, 7, .18);
  color: var(--text);
}
[data-theme="dark"] .table-danger > * > tr > *,
[data-theme="dark"] tr.table-danger > * {
  --bs-table-color: var(--text);
  background-color: rgba(220, 53, 69, .18);
  color: var(--text);
}
[data-theme="dark"] .table-info > * > tr > *,
[data-theme="dark"] tr.table-info > * {
  --bs-table-color: var(--text);
  background-color: rgba(13, 202, 240, .15);
  color: var(--text);
}
/* LIGHT mode — ten sam bug jak wyżej, tylko odwrotny kierunek (zgłoszenie usera
   2026-08-07: "na jasnym motywie nie widać żadnego podświetlonego wiersza"). Reguła
   `.table > tbody > tr > td` (linia ~127, potrzebna dla dark mode) ma WYŻSZĄ
   specyficzność CSS (.table + tbody + tr + td = 1 klasa + 3 selektory typu) niż domyślne
   klasy Bootstrapa .table-warning/.table-danger/itp. (1 klasa + 1 selektor typu) — więc w
   light mode bezwarunkowo przykrywała je białym tłem `var(--bg-card)`. Dark mode działał,
   bo dopisane wyżej reguły `[data-theme=dark] .table-warning...` mają dodatkowy atrybutowy
   selektor, więc wygrywają specyficznością — light mode nigdy takiego odpowiednika nie
   dostał. Selektor `.table > tbody > tr.table-KOLOR > td` (zamiast `.table-KOLOR > * > tr > *`)
   dobrany świadomie żeby MIEĆ specyficzność >= bazowej reguły `.table > tbody > tr > td`,
   ale scoped pod [data-theme="light"] żeby nie kolidować z regułami dark mode wyżej.
   Kolory 1:1 z domyślnej palety subtle-bg/emphasis-color Bootstrap 5.3 dla light mode. */
[data-theme="light"] .table > tbody > tr.table-warning > td,
[data-theme="light"] .table > tbody > tr.table-warning > th {
  background-color: #fff3cd;
  color: #664d03;
}
[data-theme="light"] .table > tbody > tr.table-danger > td,
[data-theme="light"] .table > tbody > tr.table-danger > th {
  background-color: #f8d7da;
  color: #58151c;
}
[data-theme="light"] .table > tbody > tr.table-info > td,
[data-theme="light"] .table > tbody > tr.table-info > th {
  background-color: #cff4fc;
  color: #055160;
}
[data-theme="light"] .table > tbody > tr.table-success > td,
[data-theme="light"] .table > tbody > tr.table-success > th {
  background-color: #d1e7dd;
  color: #0a3622;
}
[data-theme="light"] .table > tbody > tr.table-secondary > td,
[data-theme="light"] .table > tbody > tr.table-secondary > th {
  background-color: #e2e3e5;
  color: #41464b;
}
[data-theme="dark"] .list-group-item-action {
  color: var(--text);
}
[data-theme="dark"] .list-group-item-action:hover {
  background-color: var(--bg-card-alt);
  color: var(--text);
}

/* Checkboxy/radio — zgłoszenie usera: w dark mode prawie niewidoczne. Przyczyna: obramowanie
   niezaznaczonego pola liczone z --bs-border-color, które w dark mode jest ustawione na
   #2d333b — niemal ten sam odcień co tło karty (#161b22/#1c2128), więc kwadrat checkboxa
   praktycznie znika dopóki nie jest zaznaczony. Jawne, wyraźnie jaśniejsze obramowanie. */
[data-theme="dark"] .form-check-input {
  background-color: var(--input-bg);
  border-color: #6e7681;
}
[data-theme="dark"] .form-check-input:checked {
  background-color: #4a9eff;
  border-color: #4a9eff;
}
[data-theme="dark"] .form-check-input:focus {
  border-color: #4a9eff;
  box-shadow: 0 0 0 2px rgba(74,158,255,.25);
}

/* ============================================================
   MISC
   ============================================================ */
.progress { border-radius: 4px; }
.font-monospace { font-size: 0.857rem; }
code {
  color: #4a9eff;
  background-color: var(--bg-card-alt);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.857rem;
}

@media (max-width: 768px) {
  body { font-size: 0.857rem; }
  .table > tbody > tr > td { font-size: 0.857rem; }
  h1.h4 { font-size: 1rem; }
}