/* Arkusz aplikacji. Kolejność sekcji = kolejność kaskady: tokeny, baza,
 * powłoka, komponenty, ekrany. Nadpisania Bootstrapa tylko w §1.
 * `!important`: 12 wystąpień wobec 66 w wersji poprzedniej, każde z powodem obok.
 * Nowe komponenty mają prefiks `tc-`; stare polskie nazwy zostały i dalej
 * znaczą to samo miejsce w hierarchii.
 *
 * Uzasadnienie palety, typografii, układu i każdej decyzji poniżej:
 * UI_REFRESH_DECISIONS.md. Plik wchodzi do budżetu zasobów
 * (PresentationRenderingTest), więc komentarze są tu krótkie z rozmysłem. */

/* 1. Tokeny */

:root {
    --tc-navy: #00296B; --tc-navy-deep: #011F51; --tc-navy-mid: #003F88;
    --tc-amber: #FDC500; --tc-amber-soft: #FFF6D6;
    /* neutralne podbite granatem, nie czyste */
    --tc-ink: #14213D; --tc-ink-soft: #5A6479; --tc-ink-faint: #6B7488;
    --tc-line: #DDE3ED; --tc-line-strong: #C3CDDF;
    --tc-field: #F4F6FA; --tc-surface: #fff; --tc-wash: #EEF2F8;
    --tc-red: #CB0000; --tc-red-soft: #FDEBEB;
    --tc-green: #43911D;      /* wypełnienie pod ciemnym tekstem */
    --tc-green-ink: #3A7D19;  /* to samo pod białym: 5,09:1 zamiast 3,96:1 */
    --tc-green-soft: #EDF5E7;
    --tc-radius: 10px; --tc-radius-sm: 7px; --tc-rail: 56px;
    --tc-gap: 20px; --tc-column: 1320px;
    --tc-shadow: 0 1px 2px rgba(20,33,61,.05), 0 6px 18px -12px rgba(20,33,61,.18);
    --tc-display: 'Nunito', system-ui, sans-serif;
    --tc-body: 'Roboto', system-ui, sans-serif;

    /* Bootstrap bierze kolory stąd — §2.1 */
    --bs-primary: #00296B; --bs-primary-rgb: 0,41,107;
    --bs-secondary: #5A6479; --bs-secondary-rgb: 90,100,121;
    --bs-danger: #CB0000; --bs-danger-rgb: 203,0,0;
    --bs-success: #3A7D19; --bs-success-rgb: 58,125,25;
    --bs-warning: #FDC500; --bs-warning-rgb: 253,197,0;
    --bs-body-color: #14213D; --bs-body-bg: #F4F6FA;
    --bs-body-font-family: 'Roboto', system-ui, sans-serif;
    --bs-body-font-size: .875rem; --bs-body-line-height: 1.55;
    --bs-border-color: #DDE3ED; --bs-border-radius: 7px;
    --bs-link-color: #003F88; --bs-link-hover-color: #00296B;
    --bs-table-striped-bg: rgba(0,41,107,.035);
    --bs-heading-color: #14213D;
}

/* 2. Baza i typografia */

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh; margin: 0;
    background-color: var(--tc-field); color: var(--tc-ink);
    font-family: var(--tc-body); font-size: .875rem; line-height: 1.55;
}

/* Nunito: nagłówki i duże liczby. Roboto: treść, tabele, formularze. */
h1, h2, h3, h4, h5, h6, .first-header, .dashboardHeader {
    margin: 0 0 .5rem; color: var(--tc-ink);
    font-family: var(--tc-display); font-weight: 700;
    letter-spacing: -.01em; line-height: 1.25;
}

h1 { font-size: 2.125rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }
p { margin: 0 0 .75rem; }

/* jedyna typografia wersalikowa w aplikacji = „nowa sekcja" */
.tc-eyebrow, .statystyka_naglowek,
.statisticBlock .dashboardHeader, .helloBlock .dashboardHeader {
    display: block; margin: 0 0 .4rem;
    color: var(--tc-ink-faint); font-family: var(--tc-body);
    font-size: .6875rem; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase;
}

.tc-muted { color: var(--tc-ink-soft); }
.tc-caption { font-size: .78125rem; color: var(--tc-ink-soft); }
a { text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* żółty na granacie: 8,6:1, więc jeden pierścień działa też na pasku */
:focus-visible { outline: 2px solid var(--tc-amber); outline-offset: 2px; border-radius: 3px; }

.hidden { display: none !important; }   /* stan wygrywa z układem */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 3. Powłoka */

.navigation {
    min-height: var(--tc-rail); padding: 0;
    background-color: var(--tc-navy);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}

.navbar { padding: 0; }
.navigation .navbar-nav { align-items: stretch; gap: 2px; width: 100%; padding: 0 8px; }
.navigation form { display: flex; }

nav .nav-item {
    display: flex; align-items: center;
    border-bottom: 2px solid transparent; color: #fff; line-height: 1.2;
}

.navigation a, .navigation button {
    display: flex; gap: .35rem; align-items: center;
    height: calc(var(--tc-rail) - 2px); padding: 0 .7rem;
    border: 0; background: transparent; cursor: pointer;
    color: rgba(255,255,255,.88);
    font-family: var(--tc-display); font-size: .8125rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

.navigation a:hover, .navigation button:hover {
    background-color: rgba(255,255,255,.07); color: #fff; text-decoration: none;
}

/* aktywna pozycja: żółte podkreślenie, jak zakładka ustawień */
nav .nav-item:hover { border-bottom-color: rgba(253,197,0,.45); }
.nav-item-active { border-bottom-color: var(--tc-amber); }
.nav-item-active > a { color: #fff; }
.nav-off-border:hover { border-bottom-color: transparent; }
.nav-special-border-red:hover { border-bottom-color: var(--tc-red); }
.navbar-logo { width: auto; padding: 0 .6rem 0 .4rem; }
.navbar-logo img { height: 26px; width: auto; }
.navigation .navbar-toggler { margin: .55rem .75rem; padding: .3rem .55rem; border-color: rgba(255,255,255,.3); }

/* stoper: pastylka, nie pole z obwódką */
.navbar-timer {
    gap: .4rem; width: auto; margin: .6rem .5rem .6rem 0;
    padding: 0 .5rem 0 .65rem; border: 0; border-radius: 999px;
    background-color: rgba(255,255,255,.1);
}

#timer {
    display: inline-block; color: #fff; font-family: var(--tc-display);
    font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

#timerInfo { color: rgba(255,255,255,.6); font-size: .625rem; line-height: 1; }
#timerButtons { display: inline-flex; align-items: center; font-size: 1.375rem; }
#timerButtons i { padding: .1rem; color: var(--tc-amber); cursor: pointer; transition: transform .12s ease; }
#timerButtons i:hover { transform: scale(1.12); }

/* kolumna treści — bez niej raport rozciągał się na całą szerokość ekranu */
.app-main { display: block; max-width: var(--tc-column); margin: 0 auto; padding: var(--tc-gap) var(--tc-gap) 3rem; }

/* 4. Karta */

/* Jeden komponent nośny; dawne granatowe płyty są jego wariantami. §2.3 */
.tc-card, .rejestracja_main, .dane_edycji, .settingsWindow, .profile,
.historia_belka, .blok_dni, .settings_info, .button_menu, .dashboardMessage,
.tc-sheet {
    display: block; position: static; width: auto;
    margin: 0 0 var(--tc-gap); padding: 1.125rem 1.25rem;
    border: 1px solid var(--tc-line); border-radius: var(--tc-radius);
    background-color: var(--tc-surface); color: var(--tc-ink);
    box-shadow: var(--tc-shadow); text-align: left; overflow: visible;
}

/* nagłówek karty; granatowa kreska po lewej to cały granat na karcie */
.tc-card-head, .settingsWindowHeader {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    align-items: baseline; justify-content: space-between;
    width: auto; margin: -1.125rem -1.25rem 1rem; padding: .875rem 1.25rem;
    border: 0; border-bottom: 1px solid var(--tc-line);
    background-color: transparent; color: var(--tc-ink); overflow: visible;
    box-shadow: inset 3px 0 0 var(--tc-navy);
}

.tc-card-head > *, .settingsWindowHeader > * { margin: 0; }

/* Nagłówek i treść są **rodzeństwem** w `.settingsWindow`, więc kartą jest
   wrapper — inaczej nagłówek z ujemnym marginesem wychodził poza ramkę. */
.settingsWindow { padding: 0; }
.settingsWindow > .settingsWindowHeader { margin: 0; }
.settingsWindowBody { display: block; padding: 1.125rem 1.25rem; }
.settingsWindowBody > h5 { margin-top: 1.5rem; }
.settingsWindowBody > h5:first-child { margin-top: 0; }
.settingsWindow > .settingsWindowBody > .table:last-child { margin-bottom: 0; }

.tc-card-foot {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin: 1rem -1.25rem -1.125rem; padding: .875rem 1.25rem;
    border-top: 1px solid var(--tc-line);
}

/* Blok, nie flex: ekran licencji wkładał do środka cały formularz,
   a flex robił z niego kolumny na jedno słowo i wypychał treść za ramkę. */
.settings_info {
    display: block; position: relative;
    max-width: 72ch; padding-left: 3.1rem;
    box-shadow: inset 3px 0 0 var(--tc-amber);
}

.settings_info .infoIcon {
    position: absolute; left: 1.25rem; top: 1.05rem;
    color: var(--tc-amber); font-size: 1.375rem;
}

.settingsHint { display: block; max-width: 68ch; color: var(--tc-ink-soft); font-size: .8125rem; }
.settings_info .form-control, .settings_info .form-select { max-width: 26rem; }
.settings_info > form { margin: .75rem 0; }
.dashboardMessage { max-width: 68ch; box-shadow: inset 3px 0 0 var(--tc-red); }
.settingsWindow, .tlo_edycji { display: block; width: auto; margin: 0; padding: 0; text-align: left; }

.settingsWindowOptions {
    display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end;
    margin-bottom: 1rem; padding: 0; text-align: left;
}

.settingsWindowOptions form { display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-end; }
.settingsWindowOptions br { display: none; }
.settingsWindowOptions .form-control { max-width: 18rem; }
.dane_edycji { max-width: 60rem; }
.dane_edycji > h5 { margin-top: 1.25rem; }
.dane_edycji > h5:first-of-type { margin-top: 0; }

/* 5. Zakładki ustawień */

.setting_shortcuts {
    display: block; width: auto; margin: 0 0 var(--tc-gap); padding: 0;
    border-bottom: 1px solid var(--tc-line); background-color: transparent; text-align: left;
}

.tc-tabs-list { display: flex; flex-wrap: wrap; gap: .125rem; margin: 0; padding: 0; list-style: none; }

.tc-tab {
    display: block; padding: .55rem .8rem;
    border: 0; border-bottom: 2px solid transparent; background: none;
    color: var(--tc-ink-soft); font-family: var(--tc-display);
    font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}

.tc-tab:hover { border-bottom-color: var(--tc-line-strong); color: var(--tc-ink); text-decoration: none; }
.tc-tab[aria-current="page"] { border-bottom-color: var(--tc-amber); color: var(--tc-navy); }

/* 6. Tabele */

/* Tabela czyta się wierszami: bez pionowych linii, nagłówek na kresce. §4 */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 1rem; color: var(--tc-ink); font-size: .8125rem; vertical-align: middle;
}

.table > :not(caption) > * > * { padding: .5rem .6rem; border-bottom: 1px solid var(--tc-line); box-shadow: none; }

.table > thead > tr > th {
    border-bottom: 2px solid var(--tc-line-strong); background-color: transparent;
    color: var(--tc-ink-faint); font-family: var(--tc-body);
    font-size: .6875rem; font-weight: 500; letter-spacing: .05em;
    text-transform: uppercase; white-space: nowrap;
}

.table > tbody > tr:last-child > * { border-bottom-color: transparent; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
.table td, .table th { font-variant-numeric: tabular-nums; }

/* liczby na prawo, opis na lewo — ta sama reguła co w druku */
.statystyka td + td, .statystyka th + th,
.tc-sheet .table td + td, .tc-sheet .table th + th { text-align: right; }

.statystyka td:first-child, .statystyka th:first-child,
.tc-sheet .table td:first-child, .tc-sheet .table th:first-child { text-align: left; }

/* Kolumna akcji nigdy nie jest liczbą. */
.table .akcja, .table td:has(> .editLink), .table td:has(> form) { text-align: left !important; }

.table-summary-row td {
    border-top: 1px solid var(--tc-line-strong);
    background-color: var(--tc-wash); color: var(--tc-ink); font-weight: 700;
}

/* nagłówki grupujące; dawniej `#022760` i `#dddddd` wklejone w szablonach */
.tc-group-head th, .tc-group-head td {
    background-color: var(--tc-navy); color: #fff;
    font-family: var(--tc-display); font-size: .8125rem; font-weight: 700;
    letter-spacing: 0; text-align: left; text-transform: none;
}

.tc-subgroup-head th, .tc-subgroup-head td {
    background-color: var(--tc-wash); color: var(--tc-ink);
    font-weight: 600; letter-spacing: 0; text-transform: none;
}

/* `auto`, nie `scroll`: martwe paski przewijania w dwunastu miejscach */
.table-responsive, .statystyka { overflow-x: auto; overflow-y: visible; }
.statystyka { display: block; width: 100%; max-height: none; margin: 0 0 1.5rem; }
.statystyka table { width: 100%; }
.statystyka:last-child { margin-bottom: 0; }
#okresy_rozliczeniowe { max-height: 420px; overflow: auto; font-size: .78125rem; }

#okresy_rozliczeniowe th {
    border-bottom: 1px solid var(--tc-line-strong); color: var(--tc-ink-faint);
    font-size: .6875rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}

#okresy_rozliczeniowe th[colspan] { color: var(--tc-ink); letter-spacing: .04em; }

/* strzałki sortowania: trójkąty w kolorze marki zamiast dwóch GIF-ów */
thead th.up, thead th.down {
    padding-right: 1.2rem; background-repeat: no-repeat;
    background-position: right .35rem center; background-size: 8px;
    color: var(--tc-navy); cursor: pointer;
}

thead th.up { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 0l4 5H0z' fill='%2300296B'/%3E%3C/svg%3E"); }
thead th.down { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 5L0 0h8z' fill='%2300296B'/%3E%3C/svg%3E"); }
.tablesorter th { cursor: pointer; }

.td_komentarz { padding: .35rem .5rem !important; text-align: left !important; }   /* gęściej niż reszta tabeli */
.komentarz { max-width: 22ch; max-height: 2.6em; overflow: hidden; color: var(--tc-ink-soft); font-size: .6875rem; line-height: 1.3; }

/* 7. Formularze */

/* `.mb-3` to utility Bootstrapa (`1rem !important`), więc zerowanie odstępu
   w rzędzie pól też musi krzyczeć — inaczej przycisk obok pól zjeżdża
   o 16 px w dół. Odstęp pionowy poza rzędami zostaje bootstrapowy. */
label, .form-label, .col-form-label { margin-bottom: .2rem; color: var(--tc-ink-soft); font-size: .75rem; font-weight: 500; }

.form-control, .form-select {
    padding: .4rem .6rem;
    border: 1px solid var(--tc-line-strong); border-radius: var(--tc-radius-sm);
    background-color: var(--tc-surface); color: var(--tc-ink);
    font-family: var(--tc-body); font-size: .8125rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover, .form-select:hover { border-color: var(--tc-ink-faint); }

.form-control:focus, .form-select:focus {
    border-color: var(--tc-navy-mid); box-shadow: 0 0 0 3px rgba(0,63,136,.14); outline: none;
}

.form-control::placeholder { color: var(--tc-ink-faint); }

/* Szablony wieszają `.form-control` na `<select>`, a strzałkę Bootstrap rysuje
   tylko dla `.form-select` — listy wyboru wyglądały więc jak pola tekstowe
   i nie było po czym poznać, że coś się rozwija. */
select.form-control {
    padding-right: 1.9rem; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6479' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center; background-size: 11px 7px;
}

select.form-control[multiple] { padding-right: .6rem; background-image: none; }
.form-control[readonly] { background-color: var(--tc-field); color: var(--tc-ink-soft); }
.form-check-input:checked { background-color: var(--tc-navy); border-color: var(--tc-navy); }
.form-check-input:focus { border-color: var(--tc-navy-mid); box-shadow: 0 0 0 3px rgba(0,63,136,.14); }
.invalid-feedback { color: var(--tc-red); font-size: .75rem; }
input[type="number"].form-control { font-variant-numeric: tabular-nums; }

/* rząd pól obok siebie */
.tc-fieldrow, .profile form {
    display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
}

.tc-fieldrow > *, .profile form > * { margin-bottom: 0; }
.tc-fieldrow--divided { margin-top: 1rem; padding-top: .875rem; border-top: 1px dashed var(--tc-line); }
.tc-fieldrow .mb-3, .settingsWindowOptions .mb-3 { margin-bottom: 0 !important; min-width: 9rem; }

/* Akcja rzędu idzie do prawej krawędzi, tak jak w pasku roboczym raportu:
   po lewej to, czym się steruje, po prawej to, co się klika. Bez tego przycisk
   lądował tuż obok ostatniego pola, w połowie szerokości karty. */
.tc-fieldrow > .tc-fieldrow-end { margin-left: auto; }

/* 8. Przyciski i linki akcji */

.btn {
    --bs-btn-border-radius: var(--tc-radius-sm);
    padding: .42rem .85rem; border-radius: var(--tc-radius-sm);
    font-family: var(--tc-display); font-size: .8125rem; font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}

.btn:active { transform: translateY(1px); }
.btn-primary { background-color: var(--tc-navy); border-color: var(--tc-navy); color: #fff; }
.btn-primary:hover { background-color: var(--tc-navy-deep); border-color: var(--tc-navy-deep); }

/* Zapis zostaje zielony (nauczony odruch); zmienia się odcień — §2.1 */
.btn-confirm, input.btn-confirm, .btn-success {
    padding: .42rem .85rem;
    border: 1px solid var(--tc-green-ink); border-radius: var(--tc-radius-sm);
    background-color: var(--tc-green-ink); color: #fff;
    font-family: var(--tc-display); font-size: .8125rem; font-weight: 700; cursor: pointer;
}

.btn-confirm:hover, .btn-success:hover { background-color: #2F6714; border-color: #2F6714; color: #fff; }
.btn-confirm:disabled { opacity: .6; cursor: progress; }
.btn-confirm-fullwidth { display: block; width: 100%; margin-top: 1rem; padding: .7rem 1rem; font-size: 1rem; }

.btn-cancel, .btn-danger {
    background-color: var(--tc-surface); border: 1px solid var(--tc-line-strong); color: var(--tc-red);
}

.btn-cancel:hover, .btn-danger:hover { background-color: var(--tc-red-soft); border-color: var(--tc-red); color: var(--tc-red); }

.btn-light, .btn-white {
    background-color: var(--tc-surface); border: 1px solid var(--tc-line-strong); color: var(--tc-ink);
}

.btn-light:hover, .btn-white:hover { background-color: var(--tc-field); border-color: var(--tc-ink-faint); color: var(--tc-navy); }
.btn-yellow { background-color: var(--tc-amber); border: 1px solid var(--tc-amber); color: var(--tc-navy); }
.btn-yellow:hover { background-color: #FFD633; border-color: #FFD633; color: var(--tc-navy); }

.editLink, .deleteLink, .restoreLink, .printButton {
    display: inline-flex; gap: .15rem; align-items: center;
    font-size: .78125rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}

.editLink { color: var(--tc-navy-mid); }
.editLink:hover { color: var(--tc-navy); text-decoration: underline; }
.deleteLink { color: var(--tc-red); }
.deleteLink:hover { color: #9E0000; text-decoration: underline; }
.restoreLink { color: var(--tc-green-ink); }
.restoreLink:hover { color: #2F6714; text-decoration: underline; }
.icon { font-size: 1.125rem !important; vertical-align: middle; }   /* wygrywa z .material-icons */
.podswietl { color: var(--tc-navy-mid); cursor: pointer; transition: color .15s ease; }
.podswietl:hover { color: var(--tc-amber); }

/* „Dodaj wiersz" to pusty ślad, nie kolejny pełny wiersz */
.additionalRow td {
    border: 1px dashed var(--tc-line-strong) !important;   /* wygrywa z .table-bordered */
    background-color: transparent; color: var(--tc-navy-mid);
    font-weight: 600; text-align: center; cursor: pointer;
    transition: background-color .15s ease;
}

.additionalRow:hover td { border-color: var(--tc-navy-mid) !important; background-color: rgba(0,63,136,.05); }
.plus { color: var(--tc-green-ink); font-size: 1.25rem; text-decoration: none; }

/* Dwie kolumny w karcie: formularz obok danych do przepisania. */
.tc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem 2rem; align-items: start; }

/* Lista „nazwa → wartość"; numer konta ma zostać w jednej linii. */
.tc-datalist { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.25rem; margin: 0; align-items: baseline; }
.tc-datalist dt { color: var(--tc-ink-faint); font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tc-datalist dd { margin: 0; color: var(--tc-ink); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* `<button>` z klasą linku — bez tego przeglądarka rysuje mu ramkę. */
button.editLink, button.deleteLink, button.restoreLink, button.welcome-choice {
    border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer;
}

/* 9. Rejestracja czasu */

.rejestracja_czasu { display: block; width: 100%; margin: 0; }
.rejestracja_main { padding-bottom: 1.25rem; }

.record_base {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem 1rem; min-width: 0; max-width: 46rem;
}

.record_base .mb-3 { margin-bottom: 0 !important; }
#insertionTable, #editionTable { display: block; }

/* odczyt ze stopera, więc żółty ślad */
.naglowek_tabeli_rejestracji {
    margin: 0 0 .75rem; padding: .5rem .75rem;
    border-radius: var(--tc-radius-sm); background-color: var(--tc-amber-soft);
    color: var(--tc-ink); font-size: .8125rem;
}

.naglowek_tabeli_rejestracji h5 { margin: 0; font-size: .875rem; }
#recordTable td { vertical-align: top; }

/* Nagłówki tej jednej tabeli wolno łamać. Globalne `white-space: nowrap`
   z §6 trzymało kolumnę parametru na szerokość całej jego nazwy, więc przy
   dłuższych nazwach i kilku parametrach komentarz wyjeżdżał poza ekran —
   na mniejszym laptopie dało się go wypełnić dopiero po przewinięciu tabeli
   w bok. Zgłoszenie z 22.09.2026. */
#recordTable > thead > tr > th { white-space: normal; }

/* Kolumny biorą szerokość z dolnych granic, nie z treści: listy wyboru zwężają
   się do czytelnego minimum, a komentarz dostaje resztę miejsca. Gdy parametrów
   jest tyle, że minima się nie mieszczą, poziome przewijanie wraca — ale pole
   komentarza zostaje szerokie. */
#recordTable select.form-control { min-width: 7rem; }
#recordTable > thead > tr > th:last-child, #recordTable td:last-child:not([colspan]) { width: 22%; }

/* Dwa wiersze zamiast jednego: komentarz ma `maxlength="80"`, a w jednej
   linii widać z tego jakąś połowę. `field-sizing` dokłada resztę tam, gdzie
   przeglądarka je zna — pole rośnie do wpisanego tekstu; gdzie nie zna,
   zostają te dwa wiersze i zwykłe przewijanie w pionie. */
#recordTable textarea.form-control {
    min-height: 3.4rem; min-width: 10rem; font-size: .75rem;
    field-sizing: content;
}
.lista_czynnosci { font-size: .78125rem; }

/* historia wpisów: siatka zamiast tabel na floatach */
.tc-record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--tc-gap); align-items: start; }

.tabelka_historia, .tabelka_historia_2 {
    display: table; float: none;
    width: 100%;
    margin: 0; border: 1px solid var(--tc-line); border-radius: var(--tc-radius);
    border-collapse: separate; border-spacing: 0;
    background-color: var(--tc-surface); box-shadow: var(--tc-shadow);
    font-size: .78125rem; text-align: left; overflow: hidden;
}

.blok_dni { overflow-x: auto; }
.nonWorkingDaysTable { margin: 0; font-size: .8125rem; }
.nonWorkingDaysTable .mb-3 { margin: 0 !important; }
.nonWorkingDaysTable td { padding: 0 !important; vertical-align: middle; }   /* cel kliknięcia robi etykieta, nie komórka */
.nonWorkingDaysTable th { text-align: center; }
.nonWorkingDaysTable th:first-child, .nonWorkingDaysTable th:nth-child(5) { text-align: left; padding-left: .6rem; }

/* Nazwa dnia to pole `readonly` — ma wyglądać jak tekst. */
.nonWorkingDaysTable input[type="text"] {
    width: 100%; height: auto; padding: .45rem .6rem;
    border: 0; background: transparent; font: inherit; color: var(--tc-ink);
}

/* Etykieta bez treści zostawiała cel kliknięcia 17 px. Rozciąga się teraz
   na całą komórkę, a wybór widać kolorem tła. */
.nonWorkingDaysTable td:has(.form-check) { position: relative; }
.nonWorkingDaysTable .form-check { display: block; min-height: 0; margin: 0; padding: .45rem 0; text-align: center; }

.nonWorkingDaysTable .form-check-input {
    float: none; margin: 0; width: 1.05rem; height: 1.05rem; cursor: pointer;
}

.nonWorkingDaysTable .form-check-label { position: absolute; inset: 0; margin: 0; cursor: pointer; }
.nonWorkingDaysTable td:has(.form-check):hover { background-color: rgba(0, 63, 136, .1); }
.nonWorkingDaysTable td:has(input[value="u"]:checked) { background-color: var(--tc-green-soft); }
.nonWorkingDaysTable td:has(input[value="ch"]:checked) { background-color: var(--tc-red-soft); }

/* Weekend czyta się od razu, bo to ekran o dniach wolnych. */
.nonWorkingDaysTable td:has(input[value*="Sobota"]) input,
.nonWorkingDaysTable td:has(input[value*="Niedziela"]) input { color: var(--tc-ink-faint); }

/* 12. Komunikaty i okna */

/* toast; dawniej `absolute` z `right:-450px`, więc rozciągał dokument */
.komunikat {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1080;
    max-width: min(24rem, calc(100vw - 2rem)); padding: .75rem 1rem;
    border-radius: var(--tc-radius); background-color: var(--tc-green-ink);
    box-shadow: 0 8px 24px -8px rgba(20,33,61,.4); color: #fff;
    font-family: var(--tc-display); font-size: .875rem; font-weight: 600;
    cursor: pointer; opacity: 0; transform: translateX(1.5rem);
    transition: opacity .25s ease, transform .25s ease;
}

.komunikat-content { display: block; }
.komunikat-open { opacity: 1; transform: none; }
.error_color { background-color: var(--tc-red); }
.alert { border-radius: var(--tc-radius-sm); font-size: .8125rem; }
.modal-content { border: 0; border-radius: var(--tc-radius); }
.modal-header { border-bottom: 1px solid var(--tc-line); }
.modal-footer { border-top: 1px solid var(--tc-line); }
.modal-title { font-family: var(--tc-display); font-size: 1rem; }

.detailsPopUp {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1070;
    min-width: 18rem; max-width: min(26rem, calc(100vw - 2rem));
    border: 1px solid var(--tc-line); border-radius: var(--tc-radius);
    background-color: var(--tc-surface); box-shadow: 0 12px 32px -12px rgba(20,33,61,.35);
    color: var(--tc-ink);
}

.detailsPopUpHeader {
    padding: .6rem .875rem; border-radius: var(--tc-radius) var(--tc-radius) 0 0;
    background-color: var(--tc-navy); color: #fff;
    font-family: var(--tc-display); font-size: .8125rem; font-weight: 600; text-align: left;
}

.detailsPopUpContent { padding: .75rem .875rem; font-size: .8125rem; }
.detailsPopUpContent ul { margin: 0 0 .75rem; padding-left: 1.1rem; }

/* 13. Ekrany bez logowania */

/* Jedyne miejsce, gdzie granatowa płyta zostaje — §2.4 */
.tc-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--tc-gap); }

.blok_logowania {
    width: 100%; max-width: 26rem; padding: 2rem 2rem 1.75rem;
    border: 0; border-radius: 14px;
    background: linear-gradient(180deg, var(--tc-navy) 0%, var(--tc-navy-deep) 100%);
    box-shadow: 0 20px 50px -20px rgba(1,31,81,.55); color: #fff; text-align: left;
}

.blok_logowania h1, .blok_logowania h3, .blok_logowania h5 { color: #fff; }
.blok_logowania h1 { font-size: 1.5rem; }
.blok_logowania label { color: rgba(255,255,255,.72); }

.blok_logowania .form-control {
    border-color: rgba(255,255,255,.22); background-color: rgba(255,255,255,.08); color: #fff;
}

.blok_logowania .form-control:focus {
    border-color: var(--tc-amber); background-color: rgba(255,255,255,.14);
    box-shadow: 0 0 0 3px rgba(253,197,0,.2); color: #fff;
}

.blok_logowania .btn-light, .blok_logowania .btn-primary, .blok_logowania [type="submit"] {
    width: 100%; margin-top: .35rem;
    background-color: var(--tc-amber); border-color: var(--tc-amber); color: var(--tc-navy);
}

.blok_logowania .btn-light:hover, .blok_logowania .btn-primary:hover, .blok_logowania [type="submit"]:hover { background-color: #FFD633; border-color: #FFD633; }
.blok_logowania a { color: var(--tc-amber); }
.blok_logowania hr { border-color: rgba(255,255,255,.18); opacity: 1; }
.blok_logowania .alert-danger { border: 0; background-color: rgba(255,255,255,.95); color: #7A0000; }
.timecycle { margin-bottom: 1.25rem; }
.timecycle img { height: 34px; width: auto; }
.registration_box, .formularz_reset { width: 100%; max-width: none; text-align: left; }

.registration_info {
    display: block; max-width: none; margin-top: 1.25rem; padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.7); font-size: .6875rem; line-height: 1.6;
}

/* 14. Drobne */

.tc-center { text-align: center; }
.tc-stack > * + * { margin-top: var(--tc-gap); }
.emptyDay { width: 8rem; max-width: 50%; opacity: .9; }
.hello { width: 100%; }
.logo { max-width: 260px; }

.colorPicker {
    display: inline-block; width: 1.1rem; height: 1.1rem; min-width: 1.1rem; min-height: 1.1rem;
    border: 1px solid var(--tc-line-strong); border-radius: 4px; vertical-align: middle;
}

.teamSelectInContext { margin: 0 0 .75rem; padding: .75rem; border: 1px solid var(--tc-line); border-radius: var(--tc-radius-sm); text-align: left; }
.reportPickButton { width: 100%; max-width: 13rem; }

/* 15. Responsywność */

@media (max-width: 991.98px) {
    .navigation .navbar-collapse { padding-bottom: .5rem; background-color: var(--tc-navy); }
    .navigation .navbar-nav { flex-direction: column; align-items: stretch; padding: 0; }
    nav .nav-item { border-bottom: 0; border-left: 2px solid transparent; }
    nav .nav-item:hover { border-left-color: rgba(253,197,0,.45); border-bottom-color: transparent; }
    .nav-item-active { border-left-color: var(--tc-amber); border-bottom-color: transparent; }
    .navigation a, .navigation button { height: auto; padding: .7rem 1rem; }
    .navbar-logo { padding: .5rem 1rem; }
    .navbar-timer { margin: .5rem 1rem; justify-content: flex-start; }
}

@media (max-width: 767.98px) {
    :root { --tc-gap: 14px; }
    .app-main { padding: var(--tc-gap) var(--tc-gap) 2rem; }

    .tc-card, .rejestracja_main, .dane_edycji, .settingsWindowBody, .profile,
    .historia_belka, .blok_dni, .settings_info, .button_menu, .dashboardMessage { padding: 1rem; }
    .tc-card-head, .settingsWindowHeader { margin: -1rem -1rem .875rem; padding: .75rem 1rem; }
    .tc-sheet { padding: 1.125rem 1rem; }
    .tc-masthead, .printCompanyHeader { flex-direction: column; }
    .printCompanyInfo { text-align: left; }
    .tc-figures { grid-template-columns: repeat(2, 1fr); }
    .tc-figure-value { font-size: 1.375rem; }
    .setting_shortcuts { overflow-x: auto; }
    .tc-tabs-list { flex-wrap: nowrap; }
    h1 { font-size: 1.625rem; }
    h2 { font-size: 1.375rem; }
}

/* 16. Awaryjne Ctrl+P na ekranie */

/* Awaryjne Ctrl+P. Projektem wydruku jest `print.css`, nie te reguły. */
@media print {
    .navigation, .tc-toolbar, .printButton, .tc-back,
    .setting_shortcuts, .komunikat { display: none; }
    body { background: #fff; }
    .app-main { max-width: none; padding: 0; }
    .tc-card, .tc-sheet { padding: 0; border: 0; box-shadow: none; }
}