/* =============================================================================
   InConvento — design system (arkusz źródłowy)

   Jedno źródło wyglądu elementów, które powstały na /days i w ekranie „Dostęp do rezerwacji”.
   Podgląd wszystkich elementów: /ds (administrator). Opis i mapa „co zmienić → gdzie”:
   docs/ui/02-design-system.md

   Arkusz stoi na Metronicu (style.bundle.css) i jest ładowany po nim w index.html.twig.
   Wszystkie klasy mają prefiks ui-, żeby nie kolidować z Metronikiem ani ze starymi widokami.
   Wartości odtwarzają wygląd /days (docs/ui/01-inwentarz-days.md); odchyłki zaokrąglone do skali.

   Struktura:
     1. Tokeny          — kolory, typografia, promienie, odstępy
     2. Typografia      — tytuł bloku, nadtytuł, podpowiedź
     3. Boksy           — boks sekcji, boks edytora (z akcentem), pusty stan
     4. Pigułki i odznaki — pill, tag, żeton usuwalny, licznik, pigułka statusu
     5. Przyciski       — przycisk ikonowy, akcja tekstowa
     6. Edytor          — nagłówek, pola, stepper, akcje
     7. Uwagi i wyniki  — notice (success / muted / warning / danger)
     8. Listy           — grupa zwijana, wiersz z etykietą
     9. Tabela rekordów — komórka rekordu, grupy w wierszu
    10. Układ           — obszar roboczy z panelem, pasek filtrów
    11. Dostęp          — stany dostępu (etykieta z ikoną)
    12. Macierz         — tabela osoby × zasoby z przewijaniem w poziomie
    13. Telefon         — elementy ekranów członka wspólnoty na telefonie (docs/ui/mobile.md); próg 991.98px
    14. Siatka rezerwacji — zasoby × dni / godziny (Start, resource_type/new_resource_type_list_double)
    15. Hasło           — moc nowego hasła
    16. Dymek wyboru    — okienko przy klikniętym elemencie, wybór mszy (Wyznaczanie oficjów: „Przypnij do mszy”)
    17. Wydruk          — kartka do druku (grafik do kuchni); @media print zostawia samą kartkę
    18. Stan dnia       — ikona stanu z liczbą, legenda, przycisk daty, kolory dni w kalendarzu, pole kalendarza,
                          tabela zatwierdzania (Zatwierdzenie dnia, manage/intends_list_table)
    19. Lista wyboru    — pionowa lista z jednym wybranym wierszem i akcjami ikonowymi (Konfiguruj kalendarz: typy dni)
    20. Wiersz oficjum  — oficjum w liście (nazwa, rodzaj, godziny, miejsce, akcje) i przeciąganie między listami
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOKENY
   Kolory to paleta Metronic (KTAppSettings w index.html.twig) nazwana rolami.
   ----------------------------------------------------------------------------- */
:root {
    --ui-text-strong: #181C32;
    --ui-text: #3F4254;
    --ui-text-muted: #7E8299;
    --ui-text-hint: #B5B5C3;
    --ui-text-disabled: #D6D6E0;

    --ui-surface: #FFFFFF;
    --ui-surface-subtle: #F3F6F9;
    --ui-surface-editor: #F8FAFC;
    --ui-surface-strong: #E4E6EF;

    --ui-border: #E4E6EF;
    --ui-border-subtle: #EBEDF3;
    --ui-border-empty: #B5B5C3;
    --ui-border-grid: #D1D3E0;          /* linie siatki rezerwacji — mocniejsze niż --ui-border-subtle */

    --ui-primary: #3699FF;
    --ui-type-row: #FFA800;             /* wiersz typu zasobu jak w siatce rezerwacji (bg-warning) */

    /* Kolory feedbacku — poza motywem */
    --ui-success-bg: #C9F7F5;
    --ui-success-text: #0B7A74;
    --ui-warning-bg: #FFF4DE;
    --ui-warning-text: #8A6100;
    --ui-warning-icon: #FFA800;
    /* „Trwa teraz” — ten sam kolor co pasek z boku wiersza (bg-success z Metronica) */
    --ui-ongoing: #1BC5BD;
    --ui-danger-bg: #FFE2E5;
    --ui-danger-text: #F64E60;
    --ui-danger-text-strong: #B5112E;   /* tekst na --ui-danger-bg w większej powierzchni (pasek komunikatu): 5,6:1 */
    --ui-info-bg: #EEE5FF;              /* czeka na zatwierdzenie (Metronic light-info) */
    --ui-info-text: #8950FC;

    /* Typografia (rem = 13px w Metronicu) */
    --ui-text-eyebrow: 0.75rem;
    --ui-text-sm: 0.85rem;
    --ui-text-md: 0.9rem;
    --ui-text-title: 1.1rem;
    --ui-text-value: 1.4rem;
    --ui-text-display: 1.6rem;
    --ui-weight-medium: 500;
    --ui-weight-semibold: 600;
    --ui-weight-bold: 700;
    --ui-tracking-eyebrow: 0.06em;

    /* Promienie */
    --ui-radius: 0.42rem;
    --ui-radius-full: 1rem;

    /* Odstępy i wymiary */
    --ui-box-padding: 12px 14px;
    --ui-pill-padding: 2px 8px;
    --ui-notice-padding: 6px 10px;
    --ui-icon-button: 32px;
    --ui-accent-width: 4px;
    --ui-record-col: 200px;
    --ui-panel-top: 80px;
    --ui-card-scroll-height: 480px;     /* karty obok siebie o równej wysokości (Start) */

    /* Telefon (sekcja 13) */
    --ui-touch: 44px;                                   /* minimalny cel dotyku */
    --ui-bottom-nav-height: 56px;                       /* dolna nawigacja */
    --ui-safe-bottom: env(safe-area-inset-bottom, 0px); /* pasek gestów iPhone; działa z viewport-fit=cover */
}


/* -----------------------------------------------------------------------------
   2. TYPOGRAFIA
   ----------------------------------------------------------------------------- */
.ui-block-title {
    margin-bottom: 8px;
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text-strong);
}
.ui-eyebrow {
    color: var(--ui-primary);
    font-size: var(--ui-text-eyebrow);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: var(--ui-tracking-eyebrow);
    text-transform: uppercase;
}
.ui-hint {
    color: var(--ui-text-hint);
    font-size: var(--ui-text-sm);
    line-height: 1.3;
}
.ui-muted {
    color: var(--ui-text-muted);
}


/* -----------------------------------------------------------------------------
   3. BOKSY — /days: „Wybrane daty” (.selected-days-box), „Edycja oficjum” (.days-work-edit)
   ----------------------------------------------------------------------------- */
.ui-box {
    padding: var(--ui-box-padding);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}
.ui-box--editor {
    border-left: var(--ui-accent-width) solid var(--ui-primary);
    background: var(--ui-surface-editor);
}
.ui-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ui-box-actions {
    display: flex;
    gap: 4px;
}
.ui-empty {
    color: var(--ui-text-hint);
    font-size: var(--ui-text-md);
}
.ui-empty .ui-block-title {
    margin-bottom: 4px;
}


/* -----------------------------------------------------------------------------
   4. PIGUŁKI I ODZNAKI
   ----------------------------------------------------------------------------- */
/* Pill — /days: oficjum w tabeli i na liście (.day-work, .work-pill). Kolor dają klasy
   Metronicu label-light-* / label-danger (wybrany) / label-outline-info (tylko do odczytu). */
.label.label-inline.label-lg.ui-pill {
    margin: 2px 4px 2px 0;
    height: auto;
    min-height: 24px;
    padding: var(--ui-pill-padding);
}
.ui-pill--interactive {
    cursor: pointer;
}
.ui-pill-meta {
    opacity: 0.7;
}
.ui-pill-place {
    margin-left: 4px;
    font-size: 0.85em;
    opacity: 0.6;
}

/* Tag — /days: typ dnia (.day-type-badge), legenda (.selected-day-legend). Kolor może przyjść z danych. */
.ui-tag {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 1px 8px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-medium);
    white-space: nowrap;
}
.ui-tag--empty {
    padding: 0 7px;
    border: 1px dashed var(--ui-border-empty);
    background: var(--ui-surface);
}
/* Żeton usuwalny — /days: numer wybranego dnia (.selected-day-chip); kliknięcie usuwa. */
.ui-tag--removable {
    min-width: 26px;
    font-weight: var(--ui-weight-semibold);
    text-align: center;
    cursor: pointer;
}
.ui-tag--removable:hover {
    background: var(--ui-danger-text) !important;
    color: #FFFFFF !important;
    text-decoration: line-through;
}

/* Licznik — /days: liczba wybranych dat, liczba oficjów w grupie */
.ui-counter {
    display: inline-block;
    min-width: 22px;
    padding: 0 6px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-surface-subtle);
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-semibold);
    text-align: center;
}
.ui-counter--strong {
    background: var(--ui-surface-strong);
    color: var(--ui-text);
}


/* -----------------------------------------------------------------------------
   5. PRZYCISKI — przyciski tonalne to Metronic (btn btn-light-*); tu tylko to, czego Metronic nie ma
   ----------------------------------------------------------------------------- */
/* Przycisk ikonowy — /days: zapis nazwy dni, strzałki limitu */
.ui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-icon-button);
    height: var(--ui-icon-button);
    margin-left: 4px;
    border: 0;
    border-radius: var(--ui-radius);
    background: none;
    color: var(--ui-text-hint);   /* jak domyślne ikony Metronica (#B5B5C3) — ikona poniżej dziedziczy ten kolor */
    cursor: pointer;
}
.ui-icon-button:hover {
    background: var(--ui-surface-subtle);
}
.ui-icon-button i {
    font-size: 1.2rem;
    color: inherit;          /* Metronic koloruje każde <i> na szaro — ikona ma brać kolor przycisku (tone, stan) */
}
.ui-icon-button--outlined {
    margin-left: 0;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
a.ui-icon-button,
a.ui-icon-button:hover {
    color: inherit;
    text-decoration: none;
}

/* Element klikalny, który nie jest przyciskiem ani linkiem (stare widoki: ikony i etykiety z handlerem JS) — kursor „rączka” */
.ui-clickable {
    cursor: pointer;
}

/* Drugi stan (components/icon_button: icon_active) — JS przełącza tylko klasę is-active.
   Domyślnie niebieski („✓ Zapisz” po ołówku), z --danger-active czerwony (kciuk w dół). */
.ui-icon-button .ui-icon-button-active-icon,
.ui-icon-button.is-active .ui-icon-button-icon {
    display: none;
}
.ui-icon-button.is-active .ui-icon-button-active-icon {
    display: inline-block;
}
.ui-icon-button.is-active {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: var(--ui-surface);
}
.ui-icon-button--danger-active.is-active {
    border-color: var(--ui-danger-bg);
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
}
/* Drugi stan z napisem (text_active, np. „✓ Zapisz”): przycisk rozszerza się do napisu. */
.ui-icon-button-active-text {
    display: none;
    font-size: var(--ui-text-md);       /* stały rozmiar — także w tabeli z dużym pismem */
    font-weight: var(--ui-weight-semibold);
    white-space: nowrap;
}
.ui-icon-button.is-active .ui-icon-button-active-text {
    display: inline;
}
.ui-icon-button-active-icon + .ui-icon-button-active-text {
    margin-left: 6px;
}
.ui-icon-button--text-active.is-active {
    width: auto;
    padding: 0 12px;
}

/* Akcja tekstowa — /days: „Nazwy dni”, „Wyczyść” w boksie wybranych dat */
.ui-text-action {
    padding: 3px 8px;
    border: 0;
    border-radius: var(--ui-radius);
    background: none;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-md);
    white-space: nowrap;
    cursor: pointer;
}
.ui-text-action i {
    color: inherit;
}
.ui-text-action:hover {
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
}
.ui-text-action--danger:hover {
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
}


/* -----------------------------------------------------------------------------
   6. EDYTOR — /days: „Edycja oficjum” (calendar/edit_work.html.twig)
   ----------------------------------------------------------------------------- */
.ui-editor-head {
    position: relative;
    padding: 0 24px;
    text-align: center;
}
.ui-editor-title {
    font-size: var(--ui-text-display);
    font-weight: var(--ui-weight-bold);
    line-height: 1.2;
    color: var(--ui-text-strong);
    overflow-wrap: anywhere;
}
.ui-editor-meta {
    margin-top: 2px;
    color: var(--ui-text-muted);
}
.ui-editor-close {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--ui-text-hint);
    font-size: var(--ui-text-display);
    line-height: 1;
    cursor: pointer;
}
.ui-editor-close:hover {
    color: var(--ui-text);
}
.ui-editor-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ui-border);
}
.ui-field-label {
    margin-bottom: 4px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
}
.ui-stepper {
    display: inline-flex;
    align-items: center;
}
.ui-stepper-value {
    min-width: 44px;
    text-align: center;
    font-size: var(--ui-text-value);
}
.ui-editor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
}


/* -----------------------------------------------------------------------------
   7. UWAGI I WYNIKI — /days: podsumowanie zapisu (.work-change-line), „najpierw wybierz daty”
   (.work-edit-no-days), blokada kalendarza (.calendar-lock)
   ----------------------------------------------------------------------------- */
.ui-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    padding: var(--ui-notice-padding);
    border-radius: var(--ui-radius);
    font-size: var(--ui-text-md);
    line-height: 1.35;
}
.ui-notice > i {
    margin-top: 1px;
}
.ui-notice--success { background: var(--ui-success-bg); color: var(--ui-success-text); }
.ui-notice--muted   { background: var(--ui-surface-subtle); color: var(--ui-text-muted); }
.ui-notice--warning { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.ui-notice--warning > i { color: var(--ui-warning-icon); }
.ui-notice--danger  { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
/* „Trwa teraz” — przeszkoda albo życzenie w tej chwili (components/request_state); kolor jak pasek z boku. */
.ui-notice--ongoing { background: var(--ui-ongoing); color: #fff; }
.ui-notice--ongoing > i { color: inherit; }
/* Ważna zapowiedź na górze ekranu (np. manage/_prepare_day_retirement_notice): więcej miejsca niż zwykła uwaga. */
.ui-notice-roomy > .ui-notice { padding: 16px 20px; gap: 14px; margin-top: 0; }
/* Zatwierdzenie przeszkody jako sam znak (components/request_state): ✓ na zielonym, klepsydra na żółtym. */
.ui-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius);
    flex: none;
}
.ui-state-icon--accepted { background: var(--ui-success-bg); color: var(--ui-success-text); }
.ui-state-icon--pending  { background: var(--ui-warning-bg); color: var(--ui-warning-icon); }
.ui-state-icon > i { color: inherit; font-size: 14px; }
.ui-notice--inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding: 3px 10px;
}
.ui-notice-items {
    margin-top: 4px;
}
.ui-notice-item {
    display: inline-block;
    margin: 2px 4px 0 0;
    padding: 0 6px;
    border-radius: var(--ui-radius);
    background: rgba(255, 255, 255, 0.7);
    font-size: var(--ui-text-sm);
    white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   8. LISTY — /days: „Dostępne oficja” (.work-type-section), wiersze z etykietą
   (.day-works-row, .work-hour-row, .selected-days-month-row)
   ----------------------------------------------------------------------------- */
.ui-group + .ui-group {
    border-top: 1px solid var(--ui-border-subtle);
}
.ui-group-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 2px;
    border: 0;
    background: none;
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text-strong);
    text-align: left;
    cursor: pointer;
}
.ui-group-header:hover .ui-group-name {
    color: var(--ui-primary);
}
.ui-group-header:focus {
    outline: none;
}
.ui-group-header:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: -2px;
}
.ui-group-chevron {
    margin-right: 8px;
    color: var(--ui-text-hint);
    transition: transform 0.15s ease;
}
.ui-group-header .ui-counter {
    margin-left: auto;
}
.ui-group-body {
    padding-bottom: 8px;
}
.ui-group.is-collapsed .ui-group-body {
    display: none;
}
.ui-group.is-collapsed .ui-group-chevron {
    transform: rotate(-90deg);
}

.ui-labeled-row {
    display: flex;
    align-items: flex-start;
}
.ui-labeled-row + .ui-labeled-row {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid var(--ui-border-subtle);
}
.ui-labeled-row--dashed + .ui-labeled-row--dashed {
    border-top-style: dashed;
}
.ui-labeled-row-label {
    flex: 0 0 110px;
    padding-top: 5px;
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
    line-height: 1.2;
}
.ui-labeled-row--label-sm .ui-labeled-row-label { flex-basis: 44px; }
.ui-labeled-row--label-lg .ui-labeled-row-label { flex-basis: 120px; }
.ui-labeled-row--label-hint .ui-labeled-row-label {
    color: var(--ui-text-hint);
    font-size: var(--ui-text-md);
}
.ui-labeled-row-content {
    flex: 1;
    min-width: 0;
}


/* -----------------------------------------------------------------------------
   9. TABELA REKORDÓW — /days: tabela dni (#calendar, .day-cell)
   Tabela to Metronic: table table-head-custom table-head-bg table-bordered table-vertical-center.
   ----------------------------------------------------------------------------- */
.ui-record-table {
    table-layout: fixed;
}
.ui-record-table col.ui-record-col {
    width: var(--ui-record-col);
}
.ui-record-table .ui-record-row > td {
    vertical-align: top;
    padding-top: 12px;
    padding-bottom: 10px;
}
.ui-record-cell {
    text-align: center;
    overflow-wrap: break-word;
}
.ui-record-title {
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-semibold);
    white-space: nowrap;
}
.ui-record-subtitle {
    color: var(--ui-text-muted);
}
.ui-record-desc {
    margin-top: 4px;
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    line-height: 1.3;
}
.ui-record-meta {
    margin-top: 6px;
}


/* -----------------------------------------------------------------------------
   10. UKŁAD — /days: tabela + panel boczny (.days-side-panel), pasek filtrów (.days-filters)
   ----------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .ui-side-panel {
        position: sticky;
        top: var(--ui-panel-top);
        max-height: calc(100vh - 100px);
    }
    .ui-side-panel > .card-body {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 100px);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .ui-side-panel-top {
        flex: 0 0 auto;
    }
    .ui-side-panel-list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 300px;
    }
    .ui-side-panel-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
    }
}
/* Karta o stałej wysokości z przewijaną treścią — karty obok siebie (Start) są równe. Tylko komputer:
   na telefonie przewijanie w karcie walczyłoby z przewijaniem strony. Nagłówki dni (M2) przyklejają się w karcie. */
@media (min-width: 992px) {
    .card.card-custom.ui-card-scroll {
        height: var(--ui-card-scroll-height);
    }
    .ui-card-scroll > .card-body {
        min-height: 0;
        overflow-y: auto;
    }
}
.ui-side-panel .form-control::placeholder {
    color: var(--ui-text-hint) !important;
}

.ui-filter-bar {
    margin-left: -5px;
    margin-right: -5px;
}
.ui-filter-bar > .col,
.ui-filter-bar > .col-auto {
    padding-left: 5px;
    padding-right: 5px;
}
.ui-filter-bar > .col {
    min-width: 0;
}
.ui-filter-bar > .col > input.form-control,
.ui-filter-bar .bootstrap-select > .dropdown-toggle {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: var(--ui-text-md);
}
@media (max-width: 1439px) {
    .ui-filter-bar > .col {
        flex: 0 0 25%;
        max-width: 25%;
        margin-bottom: 10px;
    }
    .ui-filter-bar > .col-auto {
        margin-bottom: 10px;
    }
}


/* -----------------------------------------------------------------------------
   11. DOSTĘP — stany dostępu do zasobu. Wygląd to Metronic (label label-light-*),
   znaczenie i ikona pochodzą z makra templates/components/access_state.html.twig.
   ----------------------------------------------------------------------------- */
.ui-access-cell {
    text-align: center;
    white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   12. MACIERZ — tabela osoby × zasoby. Przewija się w poziomie i w pionie we własnym kontenerze;
   kolumna z nazwą osoby i dwa wiersze nagłówka stoją w miejscu.
   ----------------------------------------------------------------------------- */
.ui-matrix-scroll {
    max-height: calc(100vh - 220px);
    overflow: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}
.ui-matrix {
    width: max-content;
    min-width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.ui-matrix th,
.ui-matrix td {
    padding: 6px 8px;
    border-right: 1px solid var(--ui-border-subtle);
    border-bottom: 1px solid var(--ui-border-subtle);
    background: var(--ui-surface);
    text-align: center;
    white-space: nowrap;
}
.ui-matrix .ui-matrix-cell {
    min-width: 44px;
}
.ui-matrix thead th {
    position: sticky;
    z-index: 2;
}
.ui-matrix thead tr:first-child th {
    top: 0;
    background: var(--ui-type-row);
    color: var(--ui-text-strong);
}
.ui-matrix thead tr:nth-child(2) th {
    top: var(--ui-matrix-head, 33px);
    max-width: 110px;
    white-space: normal;
    line-height: 1.25;
    font-size: var(--ui-text-sm);
    vertical-align: bottom;
}
.ui-matrix .ui-matrix-person {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 170px;
    text-align: left;
}
.ui-matrix thead .ui-matrix-person {
    z-index: 3;
}
.ui-matrix .ui-matrix-group td {
    background: var(--ui-surface-subtle);
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
    text-align: left;
}
.ui-matrix .ui-matrix-group td:first-child {
    position: sticky;
    left: 0;
}


/* -----------------------------------------------------------------------------
   13. TELEFON — ekrany członka wspólnoty (docs/ui/mobile.md, makiety: docs/ui/makiety-b/)
   Telefon to szerokość do 991.98px — tam Metronic przełącza się na nagłówek mobilny.
   Elementy dochodzą tu dopiero po zatwierdzeniu (mobile.md §3). Tokeny: sekcja 1.
   ----------------------------------------------------------------------------- */

/* Wiersz listy (M1) — zastępuje wiersz tabeli na listach przeszkód, życzeń, intencji, zasobów.
   Kontener .ui-list, wiersz z components/list_item. Akcent: kolor z danych (kolor przeszkody, stan zasobu). */
.ui-list {
    background: var(--ui-surface);
}
.ui-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--ui-touch);
    padding: var(--ui-box-padding);
    border-bottom: 1px solid var(--ui-border-subtle);
    color: var(--ui-text);
}
.ui-list-item:last-child {
    border-bottom: 0;
}
a.ui-list-item:hover,
a.ui-list-item:focus {
    background: var(--ui-surface-editor);
    color: var(--ui-text);
    text-decoration: none;
}
.ui-list-item-accent {
    flex: none;
    align-self: stretch;
    width: var(--ui-accent-width);
    border-radius: 2px;
    /* Kolor z danych (np. typ przeszkody): style="--ui-accent-color: #…" na wierszu i accent: true. */
    background: var(--ui-accent-color, var(--ui-primary));
}
/* Tablica rezerwacji: licznik do odświeżenia z „+5 min” (resource_type/new_resource_type_list_double) — przyklejony
   w prawym dolnym rogu, widoczny także po przewinięciu siatki do typu (#typ-…); niebieski (białe tło zlewało się ze
   stroną), inny dzień niż dziś — na żółto. */
.ui-display-countdown {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 96;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--ui-primary);
    box-shadow: 0 6px 24px rgba(30, 30, 45, .25);
    color: #FFFFFF;
    font-size: 1.1rem;
}
.ui-display-countdown strong {
    color: inherit;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}
.ui-display-countdown.is-other-day {
    background: var(--ui-warning-icon);
    color: #1E1E2D;
}
/* Grafik do kuchni: pasek „są goście” w lewym marginesie wiersza — nie przesuwa dnia i liczb względem dni bez gości. */
.ui-list--kitchen .ui-list-item {
    position: relative;
}
.ui-list--kitchen .ui-list-item-accent {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 4px;
}
/* Numer dnia większy niż tekst wiersza; dzień tygodnia pod nim w rem, więc nie rośnie razem z numerem. */
.ui-list--kitchen .ui-list-item-lead {
    font-size: 1.3rem;
}
/* Dzień tygodnia pod numerem dnia większy niż zwykłe small (80%) — czytelny z daleka w kuchni. */
.ui-list--kitchen .ui-list-item-lead small {
    font-size: 1rem;
}
/* lead_note_long (components/list_item): na telefonie skrót, na komputerze pełna wersja — np. „poniedziałek” zamiast „po”. */
.ui-lead-note-long {
    display: none;
}
@media (min-width: 992px) {
    .ui-lead-note-short {
        display: none;
    }
    .ui-lead-note-long {
        display: inline;
    }
    /* stała szerokość kolumny dnia — „poniedziałek” i „wt” nie przesuwają liczb osób */
    .ui-list--kitchen .ui-list-item-lead {
        min-width: 100px;
    }
}
/* Grafik do kuchni (report/report_meals): rezerwacje dnia z liczbą osób; dziś i niedziela w kolumnie dnia. */
.ui-meal-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    color: var(--ui-text);
}
.ui-meal-count {
    flex: none;
    min-width: 28px;
    padding: 0 6px;
    border-radius: var(--ui-radius);
    background: var(--ui-warning-bg);
    color: var(--ui-warning-text);
    font-weight: var(--ui-weight-semibold);
    text-align: center;
}
/* Szczegóły dnia (administrator InConvento): liczba osób jest przyciskiem, pod nią kto jest, kogo nie ma i goście. */
.ui-kitchen-details > summary {
    cursor: pointer;
    list-style: none;
}
.ui-kitchen-details > summary::-webkit-details-marker {
    display: none;
}
.ui-kitchen-total,
.ui-kitchen-details > summary .ui-list-item-meta,
.ui-kitchen-dayname {
    display: block;
}
.ui-kitchen-details-body {
    margin-top: 8px;
    font-weight: normal;
    color: var(--ui-text);
}
.ui-kitchen-details-body > div + div {
    margin-top: 10px;
}
/* Obecni | nieobecni obok siebie; na wąskim ekranie jedno pod drugim. */
.ui-kitchen-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 24px;
}
.ui-kitchen-person {
    margin-top: 2px;
}
.ui-list-item[data-sunday] .ui-list-item-lead {
    color: var(--ui-danger-text);
}
/* Kolor typu dnia z kalendarza (style="--ui-day-color: …", grafik do kuchni) — wygrywa z dniem tygodnia, „Dziś” niżej wygrywa z nim. */
.ui-list-item[style*="--ui-day-color"] .ui-list-item-lead {
    color: var(--ui-day-color);
}
.ui-list-item[data-today] .ui-list-item-lead {
    color: var(--ui-primary);
}
/* Pole koloru (input type=color) w formularzach — próbka zamiast pola tekstowego na całą szerokość. */
.ui-color-input {
    flex: none;
    width: 72px;
    padding: 4px;
    cursor: pointer;
}
/* Szybkie „+ Nowa przeszkoda / + Nowe życzenie” w menu konta (partials/_account_menu) — w wąskim panelu jeden pod drugim. */
.ui-account-actions {
    gap: 8px;
}
.ui-account-actions .btn {
    min-width: 150px;
}
.ui-list-item-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ui-surface-subtle);
    color: var(--ui-primary);
    font-size: 1.1rem;
}
.ui-list-item-icon i {
    color: inherit;
    font-size: inherit;
}
.ui-list-item-lead {
    flex: none;
    min-width: 44px;
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
    line-height: 1.2;
    text-align: center;
}
.ui-list-item-lead small {
    display: block;
    color: var(--ui-text-muted);
    font-weight: var(--ui-weight-medium);
}
.ui-list-item-body {
    flex: 1;
    min-width: 0;
}
.ui-list-item-title {
    color: var(--ui-text-strong);
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-semibold);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.ui-list-item--muted .ui-list-item-title {
    color: var(--ui-text-muted);
}
/* Wiersz, do którego wrócono po edycji (public/js/ui-return-focus.js): tło przygasa w ciągu kilku sekund. */
.ui-list-item--focus {
    outline: 0;
    animation: ui-list-item-focus 3s ease-out;
}
@keyframes ui-list-item-focus {
    0%, 40% {
        background: rgba(54, 153, 255, 0.14); /* --ui-primary */
    }
}
@media (prefers-reduced-motion: reduce) {
    .ui-list-item--focus {
        animation: none;
        background: var(--ui-surface-editor);
    }
}
.ui-list-item--muted .ui-list-item-accent {
    background: var(--ui-text-hint);
}
.ui-list-item-meta {
    margin-top: 2px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-md);
}
.ui-list-item-extra {
    margin-top: 4px;
}
.ui-list-item-actions {
    margin-top: 4px;
}
.ui-list-item-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.ui-list-item-state:empty {
    display: none;
}
/* Przeszkody osoby — link na nazwisku w tytule (lista przełożonego). */
/* Link w tytule wiersza (osoba na liście przeszkód, liczba osób w grafiku do kuchni): kolor tekstu, szare podkreślenie,
   po najechaniu kolor główny. */
.ui-list-item-person,
.ui-kitchen-total {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ui-text-hint);
    text-underline-offset: 3px;
}
.ui-list-item-person:hover,
.ui-kitchen-details > summary:hover .ui-kitchen-total {
    color: var(--ui-primary);
    text-decoration-color: currentColor;
}
.ui-list-item-aside {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-text-hint);
}
/* Wiersz w jednej linii na komputerze (.ui-list--rows — listy przeszkód i życzeń osoby, postulate/_list_items):
   nazwa i termin | stan | akcje; opis pod terminem. Dzieci .ui-list-item-extra
   stają się komórkami siatki (display: contents). Akcje zostają tekstowe, obok stanu — nie przy prawym brzegu.
   Telefon: jak dotąd, wszystko pod nazwą. */
@media (min-width: 992px) {
    .ui-list--rows .ui-list-item-body {
        display: grid;
        /* nazwa do 34rem, stan stałej szerokości, akcje zaraz za nim — kolumny równe we wszystkich wierszach i blisko
           nazwy także na szerokim ekranie (2026-10-15) */
        grid-template-columns: minmax(0, 34rem) 15rem minmax(0, 1fr);
        column-gap: 24px;
        align-items: center;
    }
    .ui-list--rows .ui-list-item-extra {
        display: contents;
    }
    .ui-list--rows .ui-list-item-title,
    .ui-list--rows .ui-list-item-meta,
    .ui-list--rows .ui-list-item-extra > .ui-hint {
        grid-column: 1;
    }
    .ui-list--rows .ui-list-item-state {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: start;
    }
    .ui-list--rows .ui-list-item-actions {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* Podgląd terminów pod formularzem przeszkody i życzenia (public/js/request-terms-preview.js): wybrany termin albo terminy
   serii jeden pod drugim. */
.ui-terms-preview {
    margin: 12px 0;
    padding: var(--ui-notice-padding);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-subtle);
}
.ui-terms-preview-title {
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
}
.ui-terms-preview-list {
    margin-top: 6px;
    max-height: 320px;
    overflow-y: auto;
}
.ui-terms-preview-term {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}
/* Pominięty termin (wyjątek serii) — przekreślony, do przywrócenia. */
.ui-terms-preview-term.is-skipped .ui-terms-preview-term-text {
    color: var(--ui-text-hint);
    text-decoration: line-through;
}
.ui-terms-preview-month-title {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
    text-align: left;
}
.ui-terms-preview-month-title::after {
    content: ' ▾';
    color: var(--ui-text-hint);
}
.ui-terms-preview-month-title[aria-expanded="false"]::after {
    content: ' ▸';
}
.ui-terms-preview-add {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.ui-terms-preview-add input {
    max-width: 180px;
}

/* Nagłówek dnia lub sekcji (M2) — grupuje wiersze listy i pola formularza; przykleja się przy przewijaniu. */
.ui-day-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ui-surface-subtle);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-md);
    font-weight: var(--ui-weight-bold);
    letter-spacing: var(--ui-tracking-eyebrow);
    text-transform: uppercase;
}
.ui-day-header.is-today {
    color: var(--ui-primary);
}
.ui-day-header-title {
    flex: 1;
    min-width: 0;
}
.ui-day-header-note {
    color: var(--ui-text);
    font-weight: var(--ui-weight-medium);
    letter-spacing: 0;
    text-transform: none;
}
.ui-day-header--sunday .ui-day-header-title {
    color: var(--ui-danger-text);
}
/* Typ dnia po prawej (Tag z kolorem z DayTypeColors, jak na /days). */
.ui-day-header .ui-tag {
    flex: none;
    margin: 0;
    letter-spacing: 0;
    text-transform: none;
}

/* Pasek akcji formularza (M3). Komputer: stopka formularza. Telefon: przyklejony do dołu ekranu. */
.ui-action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 14px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.ui-action-bar .btn {
    min-width: 140px;
}

/* Przełącznik segmentowy (M4) — 2–3 widoki tej samej treści; elementy to linki (components/segmented). */
.ui-segmented {
    display: flex;
    padding: 3px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface-subtle);
}
.ui-segmented-item {
    flex: 1;
    padding: 7px 12px;
    border-radius: var(--ui-radius);
    color: var(--ui-text-muted);
    font-weight: var(--ui-weight-medium);
    text-align: center;
    white-space: nowrap;
}
.ui-segmented-item:hover {
    color: var(--ui-text);
    text-decoration: none;
}
/* Przełącznik jako przycisk (zmiana widoku AJAX-em, np. sortowanie na mszy zbiorowej) — bez ramki przeglądarki. */
button.ui-segmented-item {
    border: 0;
    background: none;
}
/* Wariant przewijany (wiele pozycji, np. typy zasobów): osobne „żetony” zamiast jednej belki, żeby nie mylił się
   z przełącznikiem; cieniowana krawędź pokazuje, że jest coś dalej (klasy has-more-* — public/js/ui-segmented.js). */
.ui-segmented--scroll {
    gap: 6px;
    padding: 2px 0;
    overflow-x: auto;
    background: none;
    scrollbar-width: none;
}
.ui-segmented--scroll::-webkit-scrollbar {
    display: none;
}
.ui-segmented--scroll .ui-segmented-item {
    flex: none;
    padding: 6px 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-full);
    background: var(--ui-surface);
    color: var(--ui-text);
}
.ui-segmented--scroll .ui-segmented-item.is-active {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: #FFFFFF;
    box-shadow: none;
}
.ui-segmented--scroll.has-more-right {
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
    mask-image: linear-gradient(to right, #000 80%, transparent);
}
.ui-segmented--scroll.has-more-left {
    -webkit-mask-image: linear-gradient(to left, #000 80%, transparent);
    mask-image: linear-gradient(to left, #000 80%, transparent);
}
.ui-segmented--scroll.has-more-left.has-more-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.ui-segmented-item.is-active {
    background: var(--ui-surface);
    color: var(--ui-text-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Wybór dni tygodnia (M5) — pola wyboru wyglądają jak przyciski; bez JS (components/weekday_picker). */
.ui-weekdays {
    display: flex;
    gap: 6px;
}
.ui-weekday {
    position: relative;
    flex: 1 1 0;
    max-width: 56px;
    margin: 0;
    cursor: pointer;
}
.ui-weekday input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.ui-weekday span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--ui-touch);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-weight: var(--ui-weight-semibold);
}
.ui-weekday input:checked + span {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: #FFFFFF;
}
.ui-weekday input:focus-visible + span {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

/* Dolna nawigacja (M6) — tylko telefon; chowa się przy przewijaniu w dół (public/js/ui-bottom-nav.js). */
.ui-bottom-nav {
    display: none;
}
.ui-bottom-nav-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-eyebrow);
    font-weight: var(--ui-weight-medium);
}
.ui-bottom-nav-item:hover {
    color: var(--ui-text);
    text-decoration: none;
}
.ui-bottom-nav-item i {
    color: inherit;
    font-size: 1.4rem;
}
.ui-bottom-nav-item.is-active {
    color: var(--ui-primary);
}
/* Główna akcja paska (np. „+ Przeszkoda”): ikona w kółku w kolorze akcentu. */
.ui-bottom-nav-item--primary i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ui-primary);
    color: #FFFFFF;
    font-size: 1rem;
}
.ui-bottom-nav-item .ui-counter {
    position: absolute;
    top: 4px;
    left: 52%;
    background: var(--ui-danger-text);
    color: #FFFFFF;
}

/* Element tylko w aplikacji przypiętej do ekranu (display-mode: standalone), np. „wstecz” bez paska przeglądarki. */
.ui-standalone-only {
    display: none !important;
}
@media (display-mode: standalone) {
    .ui-standalone-only {
        display: inline-flex !important;
    }
}
button.ui-mobile-back {
    border: 0;
    background: none;
    margin-left: -12px;
}

/* Górne menu na komputerze bez ikon przy pozycjach — ikony zostają tylko w wysuwanym menu ☰ (decyzja 2026-10-17). */
@media (min-width: 992px) {
    #kt_header_menu .menu-icon {
        display: none;
    }
}

/* Wysuwane menu (☰) na telefonie: pozycje z dolnego paska i „Ja” ukryte (ui-mobile-hide, public/js/ui-mobile-menu.js —
   pusty dział i pusty ☰ też znikają), reszta jak lista design systemu: działy jak nagłówek sekcji, pozycje jak wiersze
   (cel dotyku 44px). */
@media (max-width: 991.98px) {
    .ui-mobile-hide {
        display: none !important;
    }
    .header-menu-mobile .menu-nav {
        padding: 0;
    }
    .header-menu-mobile .menu-nav > .menu-item > .menu-link,
    .header-menu-mobile .menu-nav > .menu-item.menu-item-open > .menu-link,
    .header-menu-mobile .menu-nav > .menu-item > .menu-link:hover {
        min-height: 40px;
        padding: 8px 16px;
        background: var(--ui-surface-subtle);
    }
    .header-menu-mobile .menu-nav > .menu-item > .menu-link .menu-text {
        color: var(--ui-text-strong) !important;
        font-size: var(--ui-text-md);
        font-weight: var(--ui-weight-bold);
        letter-spacing: var(--ui-tracking-eyebrow);
        text-transform: uppercase;
    }
    .header-menu-mobile .menu-nav > .menu-item > .menu-link .menu-arrow {
        color: var(--ui-text-muted);
    }
    .header-menu-mobile .menu-nav .menu-submenu,
    .header-menu-mobile .menu-nav .menu-submenu .menu-subnav {
        padding: 0 !important;
    }
    .header-menu-mobile .menu-nav .menu-submenu .menu-item > .menu-link {
        min-height: var(--ui-touch);
        padding: 8px 16px !important;
        border-bottom: 1px solid var(--ui-border-subtle);
    }
    .header-menu-mobile .menu-nav .menu-submenu .menu-submenu .menu-item > .menu-link {
        padding-left: 32px !important;
    }
    .header-menu-mobile .menu-nav .menu-submenu .menu-item > .menu-link .menu-text {
        color: var(--ui-text-strong) !important;
        font-size: 1.08rem;
        font-weight: var(--ui-weight-medium);
    }
    /* Ta sama ikona przy każdej pozycji niczego nie mówi — na telefonie bez niej, tekst od lewej krawędzi. */
    .header-menu-mobile .menu-nav .menu-submenu .menu-item > .menu-link .menu-icon {
        display: none;
    }
}
/* Znak InConvento i nazwa wspólnoty w nagłówku mobilnym (partials/_header-mobile.html, ekrany bez tytułu):
   mały znak zamiast logo z napisem, nazwa w najwyżej dwóch wierszach, żeby zmieściło się menu. */
.ui-mobile-brand {
    flex: none;
    display: inline-flex;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
}
/* Ikona aplikacji (icons/icon-192.png) ma ciemne tło — przycinamy ją do samego złotego koła. */
.ui-mobile-brand img {
    width: 48px;
    max-width: none;
    height: 48px;
    margin: -9px;
}
.ui-mobile-convent {
    flex: 1;
    min-width: 0;
    margin: 0 12px;
    color: #FFFFFF;
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-semibold);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* Tytuł ekranu i „wstecz” w nagłówku mobilnym (M8) — partials/_header-mobile.html, components/mobile_title. */
.ui-mobile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #FFFFFF;
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-semibold);
}
.ui-mobile-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-touch);
    height: var(--ui-touch);
    margin-left: -12px;
    color: #FFFFFF;
}
.ui-mobile-back:hover {
    color: #FFFFFF;
}
.ui-mobile-back i {
    color: inherit;
}

@media (max-width: 991.98px) {
    .ui-action-bar {
        position: sticky;
        bottom: 0;
        z-index: 3;
        padding: 10px 14px calc(10px + var(--ui-safe-bottom));
    }
    .ui-action-bar .btn {
        flex: 1;
        min-width: 0;
        min-height: var(--ui-touch);
    }

    .ui-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        display: flex;
        height: calc(var(--ui-bottom-nav-height) + var(--ui-safe-bottom));
        padding-bottom: var(--ui-safe-bottom);
        border-top: 1px solid var(--ui-border);
        background: var(--ui-surface);
        transition: transform 0.2s ease;
    }
    .ui-bottom-nav.is-hidden {
        transform: translateY(100%);
    }
    body.ui-has-bottom-nav {
        padding-bottom: calc(var(--ui-bottom-nav-height) + var(--ui-safe-bottom));
    }
    /* Przycisk „do góry” Metronica (#kt_scrolltop) nad dolną nawigacją, a nie pod nią. */
    body.ui-has-bottom-nav .scrolltop {
        bottom: calc(var(--ui-bottom-nav-height) + var(--ui-safe-bottom) + 16px);
    }

    /* Karta na całą szerokość (M12): bez marginesów, zaokrągleń i nagłówka — tytuł jest w nagłówku mobilnym. */
    .card.card-custom.ui-card-mobile-flush {
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 0;
        box-shadow: none;
    }
    .card.card-custom.ui-card-mobile-flush > .card-header {
        display: none;
    }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .ui-bottom-nav {
        transition: none;
    }
}

/* Przewodniki po aplikacji (public/js/ui-tour.js, templates/tours/): podświetlony element (reszta ekranu
   przyciemniona cieniem wokół niego, a on w białej i niebieskiej obwódce — sama „dziura” ginie na ciemnym nagłówku
   i białym pasku) i karta z opisem; wstęp i zakończenie — karta na środku. Pod banerem cookies. */
.ui-tour {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    touch-action: none;
}
html.ui-tour-open {
    overflow: hidden;
}
.ui-tour-spot {
    position: fixed;
    border-radius: var(--ui-radius);
    box-shadow: 0 0 0 3px var(--ui-surface), 0 0 0 6px var(--ui-primary), 0 0 0 9999px rgba(24, 28, 50, 0.6);
    pointer-events: none;
    animation: ui-tour-pulse 1.6s ease-in-out infinite;
}
@keyframes ui-tour-pulse {
    50% {
        box-shadow: 0 0 0 3px var(--ui-surface), 0 0 0 9px var(--ui-primary), 0 0 0 9999px rgba(24, 28, 50, 0.6);
    }
}
.ui-tour--center {
    background: rgba(24, 28, 50, 0.6);
}
.ui-tour--center .ui-tour-spot {
    display: none;
}
.ui-tour-card {
    position: fixed;
    left: 16px;
    right: 16px;
    max-width: 420px;
    max-height: calc(100vh - 16px); /* ui-tour.js → MARGIN: karta wyższa niż ekran przewija się w środku */
    overflow-y: auto;
    margin: 0 auto;
    padding: 16px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-surface);
    box-shadow: 0 18px 50px rgba(24, 28, 50, 0.25);
}
.ui-tour--center .ui-tour-card {
    top: 50%;
    transform: translateY(-50%);
}
.ui-tour-step {
    margin-bottom: 4px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-eyebrow);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: var(--ui-tracking-eyebrow);
    text-transform: uppercase;
}
.ui-tour-title {
    margin-bottom: 4px;
    color: var(--ui-text-strong);
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-bold);
}
.ui-tour-text {
    margin: 0 0 14px;
    color: var(--ui-text);
    font-size: var(--ui-text-md);
}
.ui-tour-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.ui-tour-actions .btn {
    min-height: var(--ui-touch);
}
@media (prefers-reduced-motion: reduce) {
    .ui-tour-spot {
        animation: none;
    }
}
/* Lista „Przewodniki” (user/tours): przewodnik na telefon tylko na telefonie, na komputer — tylko na komputerze. */
@media (min-width: 992px) {
    [data-tour-device="mobile"] {
        display: none !important;
    }
}
@media (max-width: 991.98px) {
    [data-tour-device="desktop"] {
        display: none !important;
    }
}


/* -----------------------------------------------------------------------------
   14. SIATKA REZERWACJI — tabele typów zasobów jedna pod drugą (.resource-sections), widok dni (.resource-day-table).
   Przeniesione z bloków <style> w user/new_profile i resource_type/new_resource_type_list_double (te same wartości).
   ----------------------------------------------------------------------------- */
.resource-sections > .table {
    margin-bottom: 0 !important;
}
.resource-sections > .table + .table {
    margin-top: -1px;
}
.resource-day-table {
    table-layout: fixed;
}
.resource-day-table .resource-name-col,
.resource-day-table .resource-name-cell {
    width: 280px;
    min-width: 280px;
}
@media (max-width: 767.98px) {
    .resource-day-table {
        table-layout: auto;
    }
    .resource-section-table {
        min-width: 600px;
    }
    .resource-day-table .resource-name-col,
    .resource-day-table .resource-name-cell {
        width: 160px;
        min-width: 160px;
    }
    .resource-sections thead th {
        white-space: nowrap;
    }
}
/* Siatka rezerwacji na komputerze (tydzień i oś dnia, także na Starcie): większy tekst i mocniejsze linie
   między zasobami i dniami. Bazowy rozmiar Metronica to 13px — tu ok. 14px, podpowiedzi ok. 12px i ciemniejsze. */
.resource-day-table,
.ui-timeline {
    font-size: 1.08rem;
}
.resource-day-table small {
    font-size: 92%;
}
.resource-day-table.table-bordered,
.resource-day-table.table-bordered th,
.resource-day-table.table-bordered td {
    border-color: var(--ui-border-grid);
}
.resource-day-table .ui-hint,
.ui-timeline-label .ui-hint {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-md);
}
/* Grafik wyjazdów (postulate/postulate_graphic_table — komputer): osoby × dni, przyklejona kolumna z osobami i wiersz dat,
   komórka w kolorze typu przeszkody; niedziele i dziś wyróżnione. Telefon: lista dni z components/list_item. */
.ui-graphic-scroll {
    max-height: 75vh;
    overflow: auto;
    border: 1px solid var(--ui-border-grid);
    border-radius: var(--ui-radius);
}
.ui-graphic {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1.08rem;
}
.ui-graphic th,
.ui-graphic td {
    border-right: 1px solid var(--ui-border-grid);
    border-bottom: 1px solid var(--ui-border-grid);
}
.ui-graphic thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ui-surface-subtle);
}
.ui-graphic-person {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 220px;
    max-width: 260px;
    padding: 6px 12px;
    background: var(--ui-surface);
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-graphic thead .ui-graphic-person {
    z-index: 3;
    color: var(--ui-text-muted);
    background: var(--ui-surface-subtle);
}
.ui-graphic tbody tr:hover .ui-graphic-person {
    background: var(--ui-surface-editor);
}
.ui-graphic-day {
    min-width: 40px;
    padding: 4px 2px;
    color: var(--ui-text-strong);
    font-size: var(--ui-text-md);
    font-weight: var(--ui-weight-semibold);
    text-align: center;
    line-height: 1.2;
}
.ui-graphic-day small {
    display: block;
    color: var(--ui-text-muted);
    font-weight: var(--ui-weight-medium);
}
.ui-graphic-day.is-sunday {
    color: var(--ui-danger-text);
}
.ui-graphic-cell {
    height: 34px;
}
.ui-graphic-cell.is-sunday:not(.is-busy) {
    background: var(--ui-surface-subtle);
}
.ui-graphic .is-today {
    box-shadow: inset 2px 0 0 var(--ui-primary), inset -2px 0 0 var(--ui-primary);
}
.ui-graphic-day.is-today {
    color: var(--ui-primary);
}
.ui-graphic-cell.is-busy {
    cursor: help;
}
.ui-graphic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 12px;
    color: var(--ui-text);
}
.ui-graphic-legend-item {
    display: inline-flex;
    align-items: center;
}
.ui-graphic-swatch {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border-radius: 3px;
}

/* Oś czasu dnia na komputerze (resource_type/_desktop_timeline, typy godzinowe): wiersz = zasób, kolumny = godziny
   (--hours z szablonu), rezerwacje to paski z pozycją i szerokością liczoną z minut. */
.ui-timeline {
    --ui-timeline-label: 240px;
}
.ui-timeline-row {
    display: flex;
    min-height: 56px;
    border-bottom: 1px solid var(--ui-border-grid);
}
.ui-timeline-row:last-child {
    border-bottom: 0;
}
.ui-timeline-label {
    flex: 0 0 var(--ui-timeline-label);
    min-width: 0;
    padding: 8px 12px;
    border-right: 1px solid var(--ui-border-grid);
}
.ui-timeline-track {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--hours), 1fr);
}
.ui-timeline-cell {
    border-left: 1px solid var(--ui-border-grid);
}
.ui-timeline-cell:first-child {
    border-left: 0;
}
/* Godzina, która minęła — ukośne kreski, żeby nie wyglądała jak „zajęta” czy „niedostępna”. */
.ui-timeline-cell.is-gone {
    background: repeating-linear-gradient(135deg, transparent 0 6px, var(--ui-border-subtle) 6px 7px);
}
.ui-timeline-now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--ui-danger-text);
    pointer-events: none;
    z-index: 1;
}
.ui-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 8px 16px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
    border-bottom: 1px solid var(--ui-border-subtle);
}
.ui-timeline-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 1px solid var(--ui-border);
    border-radius: 3px;
}
.ui-timeline-legend-swatch.is-gone {
    background: repeating-linear-gradient(135deg, transparent 0 3px, var(--ui-border) 3px 4px);
}
.ui-timeline-legend-swatch.is-now {
    width: 2px;
    border: 0;
    border-radius: 0;
    background: var(--ui-danger-text);
}
a.ui-timeline-cell--free {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-success-text);
    font-size: 1.25rem;
    font-weight: var(--ui-weight-semibold);
    text-decoration: none;
}
a.ui-timeline-cell--free:hover {
    background: var(--ui-success-bg);
    text-decoration: none;
}
a.ui-timeline-cell--free:hover::after {
    content: "+";
}
a.ui-timeline-cell--free.is-selected {
    background: var(--ui-success-bg);
}
a.ui-timeline-cell--free.is-selected::after {
    content: none;
}
.ui-timeline-track {
    user-select: none;
}
.ui-timeline-select {
    position: absolute;
    top: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ui-success-text);
    border-radius: var(--ui-radius);
    color: var(--ui-success-text);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}
.ui-timeline-scale {
    min-height: 0;
    background: var(--ui-surface-subtle);
}
.ui-timeline-scale .ui-timeline-cell {
    padding: 6px 4px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-md);
    font-weight: var(--ui-weight-semibold);
}
.ui-timeline-bar {
    position: absolute;
    top: 8px;
    bottom: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    border-radius: var(--ui-radius);
    background: var(--ui-primary);
    color: #FFFFFF;
    font-size: var(--ui-text-md);
    font-weight: var(--ui-weight-medium);
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Element, do którego prowadzi kotwica (#…) — nie chowa się pod przyklejonym nagłówkiem. */
.ui-anchor {
    scroll-margin-top: 90px;
}
/* Kto rezerwował — druga linia podpisu rezerwacji (resource_type/_booking_owner), pod „Dla kogo / cel”. */
.ui-booking-owner {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
    font-style: italic;
}
/* Pasek w dwóch liniach: godziny z „Dla kogo / cel”, pod spodem kto rezerwował; każda linia ucina się osobno. */
.ui-timeline-bar {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 1rem;
    line-height: 1.25;
}
.ui-timeline-bar-line {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-timeline-bar-owner {
    font-size: 0.92em;
    font-style: italic;
    font-weight: normal;
    opacity: 0.9;
}
a.ui-timeline-bar:hover {
    color: #FFFFFF;
    text-decoration: none;
    filter: brightness(0.95);
}
.ui-timeline-bar--pending,
a.ui-timeline-bar--pending:hover {
    border: 1px dashed var(--ui-warning-icon);
    background: var(--ui-warning-bg);
    color: var(--ui-warning-text);
}
.ui-timeline-bar i {
    margin-right: 4px;
    color: inherit;
}

/* Tydzień na komputerze (resource_type/_desktop_week, typy dzienne): mini-oś doby w każdej komórce. */
.ui-dayaxis {
    position: relative;
    height: 8px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-success-bg);
}
.ui-dayaxis-busy {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--ui-radius-full);
    background: var(--ui-danger-text);
}
.ui-dayaxis-busy--pending {
    background: var(--ui-warning-icon);
}
.ui-week-today {
    background: var(--ui-surface-editor);
}
/* „+” w komórce tygodnia: przycisk na całą szerokość, przerywana ramka — czytelny na każdym tle (także „dziś”). */
.ui-week-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 4px 8px;
    border: 1px dashed var(--ui-border);
    background: var(--ui-surface);
    text-decoration: none;
}
.ui-week-add:hover {
    border-color: var(--ui-success-text);
    background: var(--ui-success-bg);
    color: var(--ui-success-text);
    text-decoration: none;
}

/* Godziny zasobu na telefonie (resource_type/_mobile_day): pigułki w rzędach, wygodne do dotknięcia. */
.ui-hours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
}
.ui-hours .ui-pill {
    min-height: 32px;
    margin: 0;
    justify-content: center;
}
/* Przegląd tygodnia na telefonie (resource_type/_mobile_week): przy zasobie 7 kratek dni, kolor = zajętość. */
.ui-week-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.ui-week-strip-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    border: 2px solid transparent;
    border-radius: var(--ui-radius);
    font-size: var(--ui-text-sm);
    line-height: 1.2;
}
.ui-week-strip-day--success { background: var(--ui-success-bg); color: var(--ui-success-text); }
.ui-week-strip-day--warning { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.ui-week-strip-day--danger { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
.ui-week-strip-day--info { background: var(--ui-info-bg); color: var(--ui-info-text); }
.ui-week-strip-day.is-today {
    border-color: var(--ui-primary);
}
.ui-week-strip-day.is-past {
    opacity: 0.55;
}
/* Pasek filtrów nad siatką (typ, data, widok) — na telefonie pola jedno pod drugim, przyciski na całą szerokość. */
@media (max-width: 991.98px) {
    .resource-filter {
        width: 100%;
    }
    .resource-filter .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }
    .resource-filter a.btn {
        width: 100%;
    }
}

/* Formularz rezerwacji (resource/new_booking_create): lista „Dodane terminy” przewijana na komputerze,
   kosz w zielonym potwierdzeniu zapisu na czerwono. */
@media (min-width: 992px) {
    .ui-saved-bookings {
        max-height: 55vh;
        overflow-y: auto;
    }
}
.delete-saved-booking,
.delete-saved-booking i {
    color: var(--ui-danger-text) !important;
}

/* Kalendarze FullCalendar z Metronica (.ui-calendar: kalendarz zasobu resource/new_calendar i „Mój kalendarz”
   calendar/new_calendar; ustawienia: public/js/ui-calendar.js) w barwach DS (2026-10-01): jasne linie,
   pasek przycisków jak ui-icon-button, numery dni po lewej (dziś w kółku, niedziela na czerwono), niższe
   tygodnie, rezerwacje: zatwierdzona — kolor akcentu, czeka — przerywana ramka (klasy z kontrolera:
   ui-cal-event, ui-cal-event--pending; zapisane kolory rezerwacji nie są używane). Większe pismo niż w reszcie
   DS (numery dni ~17 px, dni tygodnia i lista ~14 px) — korzystają też osoby starsze. */
.ui-calendar .fc-unthemed th,
.ui-calendar .fc-unthemed td,
.ui-calendar .fc-unthemed thead,
.ui-calendar .fc-unthemed tbody,
.ui-calendar .fc-unthemed .fc-row,
.ui-calendar .fc-unthemed .fc-divider,
.ui-calendar .fc-unthemed .fc-content,
.ui-calendar .fc-unthemed .fc-list-view {
    border-color: var(--ui-border-subtle);
}
.ui-calendar .fc-toolbar h2 {
    font-size: var(--ui-text-display);
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text-strong);
    text-transform: none;
}
.ui-calendar .fc-toolbar h2::first-letter {
    text-transform: uppercase;
}
.ui-calendar .fc-unthemed .fc-toolbar .fc-button {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-text-md);
    font-weight: var(--ui-weight-medium);
    text-transform: none;
    box-shadow: none;
    opacity: 1;
}
.ui-calendar .fc-unthemed .fc-toolbar .fc-button:hover {
    background: var(--ui-surface-subtle);
    color: var(--ui-text-strong);
}
.ui-calendar .fc-unthemed .fc-toolbar .fc-button.fc-button-active,
.ui-calendar .fc-unthemed .fc-toolbar .fc-button.fc-button-active:hover {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: #fff;
}
.ui-calendar .fc-unthemed .fc-toolbar .fc-button:disabled {
    color: var(--ui-text-hint);
    background: var(--ui-surface);
}
.ui-calendar .fc-unthemed .fc-toolbar .fc-button .fc-icon {
    color: inherit;
}
.ui-calendar .fc-unthemed th.fc-day-header {
    padding: 10px 0;
    background: var(--ui-surface-subtle);
}
.ui-calendar .fc-unthemed th.fc-day-header > a,
.ui-calendar .fc-unthemed th.fc-day-header > span {
    color: var(--ui-text);
    font-size: 1.1rem;
    font-weight: var(--ui-weight-semibold);
    text-transform: none;
}
.ui-calendar .fc-unthemed th.fc-day-header.fc-sun > a,
.ui-calendar .fc-unthemed th.fc-day-header.fc-sun > span {
    color: var(--ui-danger-text);
}
.ui-calendar .fc-dayGrid-view .fc-body .fc-row {
    min-height: 96px;
}
.ui-calendar .fc-unthemed td.fc-today {
    background: var(--ui-surface-editor);
}
.ui-calendar .fc-dayGrid-view .fc-day-top .fc-day-number {
    float: left;
    width: 32px;
    height: 32px;
    margin: 6px 0 4px 6px;
    padding: 0;
    border-radius: 50%;
    color: var(--ui-text-strong);
    font-size: 1.3rem;
    font-weight: var(--ui-weight-semibold);
    line-height: 32px;
    text-align: center;
}
.ui-calendar .fc-dayGrid-view .fc-day-top.fc-sun .fc-day-number {
    color: var(--ui-danger-text);
}
.ui-calendar .fc-dayGrid-view .fc-day-top.fc-other-month {
    opacity: 1;
}
.ui-calendar .fc-dayGrid-view .fc-day-top.fc-other-month .fc-day-number {
    color: var(--ui-text-hint);
}
.ui-calendar .fc-dayGrid-view .fc-day-top.fc-today .fc-day-number {
    background: var(--ui-primary);
    color: #fff;
}
.ui-calendar .fc-dayGrid-view a.fc-day-number:hover {
    background: var(--ui-surface-subtle);
    text-decoration: none;
}
/* Zdarzenia z własnym kolorem z serwera („Mój kalendarz”: oficja, życzenia) — większe pismo; na pełnym kolorze
   tekst z Metronica (biały), na jasnym ciemny. */
.ui-calendar .fc-unthemed .fc-event:not(.ui-cal-event) .fc-title,
.ui-calendar .fc-unthemed .fc-event:not(.ui-cal-event) .fc-time {
    font-size: 1rem;
}
.ui-calendar .fc-unthemed .fc-event.fc-event-solid-light .fc-title,
.ui-calendar .fc-unthemed .fc-event.fc-event-solid-light .fc-time {
    color: var(--ui-text-strong);
}
.ui-calendar .fc-unthemed .fc-event.ui-cal-event {
    margin: 1px 4px 2px;
    padding: 3px 8px;
    border: 1px solid var(--ui-primary);
    border-radius: var(--ui-radius);
    background: var(--ui-primary);
    box-shadow: none;
}
.ui-calendar .fc-unthemed .fc-event.ui-cal-event .fc-content {
    padding: 0;
}
.ui-calendar .fc-unthemed .fc-event.ui-cal-event .fc-content::before {
    display: none;
}
.ui-calendar .fc-unthemed .fc-event.ui-cal-event .fc-title,
.ui-calendar .fc-unthemed .fc-event.ui-cal-event .fc-time {
    color: #fff;
    font-size: 1rem;
}
.ui-calendar .fc-unthemed .fc-event.ui-cal-event .fc-time {
    font-weight: var(--ui-weight-semibold);
}
.ui-calendar .fc-unthemed .fc-event.ui-cal-event--pending {
    border: 1px dashed var(--ui-warning-icon);
    background: var(--ui-warning-bg);
}
.ui-calendar .fc-unthemed .fc-event.ui-cal-event--pending .fc-title,
.ui-calendar .fc-unthemed .fc-event.ui-cal-event--pending .fc-time {
    color: var(--ui-warning-text);
}
.ui-calendar .fc-unthemed .fc-list-item.ui-cal-event .fc-event-dot {
    background: var(--ui-primary);
}
.ui-calendar .fc-unthemed .fc-list-item.ui-cal-event--pending .fc-event-dot {
    background: var(--ui-warning-icon);
}
.ui-calendar .fc-unthemed .fc-list-item .fc-list-item-title,
.ui-calendar .fc-unthemed .fc-list-item .fc-list-item-title a {
    color: var(--ui-text-strong);
}
.ui-calendar .fc-unthemed .fc-more {
    margin-left: 8px;
    color: var(--ui-text);
    font-size: 1rem;
}
.ui-calendar .fc-unthemed .fc-axis,
.ui-calendar .fc-unthemed .fc-list-table td {
    font-size: 1.1rem;
}
.ui-calendar .fc-list-heading td {
    background: var(--ui-surface-subtle);
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
}
.ui-calendar .fc-description {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
}
@media (max-width: 991.98px) {
    .ui-calendar .fc-toolbar h2 {
        font-size: var(--ui-text-title);
    }
    .ui-calendar .fc-toolbar.fc-header-toolbar {
        margin-bottom: 12px;
    }
    .ui-calendar .fc-list-view {
        border: 0;
    }
}


/* -----------------------------------------------------------------------------
   15. HASŁO — moc nowego hasła (user/_password_fields: .ui-password-strength, public/js/ui-password-strength.js)
   i komunikat o słabym haśle po zalogowaniu (partials/_password_notice: .ui-password-notice).
   ----------------------------------------------------------------------------- */
.ui-password-strength {
    margin-top: -8px;
    font-size: var(--ui-text-md);
    color: var(--ui-text-muted);
}
.ui-password-strength-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ui-password-strength-bar {
    flex: 0 0 96px;
    height: 6px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-surface-strong);
    overflow: hidden;
}
.ui-password-strength-bar > span {
    display: block;
    width: 0;
    height: 100%;
    transition: width 0.2s;
}
.ui-password-strength--weak .ui-password-strength-bar > span   { width: 33%;  background: var(--ui-danger-text); }
.ui-password-strength--medium .ui-password-strength-bar > span { width: 66%;  background: var(--ui-warning-icon); }
.ui-password-strength--strong .ui-password-strength-bar > span { width: 100%; background: var(--ui-success-text); }
.ui-password-strength--weak .ui-password-strength-label   { color: var(--ui-danger-text); }
.ui-password-strength--medium .ui-password-strength-label { color: var(--ui-warning-text); }
.ui-password-strength--strong .ui-password-strength-label { color: var(--ui-success-text); }
.ui-password-strength-advice {
    margin-top: 4px;
    color: var(--ui-text);
}
.ui-password-strength-rules {
    margin: 6px 0 0;
    padding-left: 20px;
}
.ui-password-strength-rules > li.is-met {
    color: var(--ui-success-text);
    list-style-type: "✓  ";
}
.ui-password-strength-rules > li.is-missing {
    color: var(--ui-text);
    list-style-type: "✗  ";
}
/* Pasek komunikatu na górze ekranu — słabe hasło, a także partials/_terms_notice i inne komunikaty „zrób to albo
   Później”: kolor i odstęp na całym pasku (szerokość treści ekranu), przyciski w jego polu — po prawej, na wąskim
   ekranie pod tekstem. Uwaga w środku (components/notice) daje ikonę i kolor tekstu, bez własnego pola. Kolor paska
   jak ton uwagi: domyślnie ostrzeżenie, czerwony dla pilnych — modyfikator --danger w szablonie, a bez niego :has()
   po tonie uwagi. Na tablecie i telefonie przyciski mają cel dotyku, na telefonie wypełniają rząd. Przy wydruku
   pasek znika (sekcja 17). Test: tests/frontend/ui-notice-bar.test.html. */
.ui-password-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 20px;
    padding: 16px 20px;
    border-radius: var(--ui-radius);
    background: var(--ui-warning-bg);
}
.ui-password-notice--danger { background: var(--ui-danger-bg); }
/* osobna reguła: przeglądarka bez :has() pominie tylko ją, a modyfikator --danger działa dalej */
.ui-password-notice:has(> .ui-notice--danger) { background: var(--ui-danger-bg); }
.ui-password-notice > .ui-notice {
    flex: 1 1 360px;
    gap: 14px;
    margin-top: 0;
    padding: 0;
    background: none;
}
.ui-password-notice > .ui-notice--danger { color: var(--ui-danger-text-strong); }
.ui-password-notice > .ui-notice > i {
    font-size: 1.25rem;
    line-height: 1;                     /* ikona nie wyższa od linii tekstu — jedna linia na wysokości przycisków */
    margin-top: 0;
}
.ui-password-notice > .ui-notice--danger > i { color: inherit; }
.ui-password-notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ui-password-notice-actions .btn-light {
    background-color: var(--ui-surface);
    border-color: var(--ui-surface);
}
@media (max-width: 991.98px) {
    .ui-password-notice-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--ui-touch);
    }
}
@media (max-width: 575.98px) {
    .ui-password-notice { padding: 14px 16px; }
    .ui-password-notice-actions { flex: 1 1 100%; }
    .ui-password-notice-actions > :not(input) { flex: 1 1 auto; }
    .ui-password-notice-actions > form > .btn { width: 100%; }
    .ui-password-notice-actions .ui-choice { flex: 1 1 100%; }
}


/* -----------------------------------------------------------------------------
   16. DYMEK WYBORU — okienko przy klikniętym elemencie (public/js/prepare-week-glue-picker.js ustawia położenie).
   Pierwsze użycie: „Przypnij do mszy” w Wyznaczaniu oficjów (manage/glue_list.html.twig) — kafelki mszy dnia
   z kapłanami, bieżąca msza z akcentem. Kafelek to cel kliknięcia, a docelowo także upuszczenia (przeciąganie).
   ----------------------------------------------------------------------------- */
.ui-popover {
    z-index: 1060;                      /* nad kartami i lepkim nagłówkiem Metronica, pod modalami SweetAlert */
    width: 320px;
    max-width: calc(100vw - 16px);
    padding: var(--ui-box-padding);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: 0 8px 24px rgba(24, 28, 50, 0.12);
}
.ui-popover-head {
    position: relative;
    padding-right: 24px;
    margin-bottom: 10px;
}
.ui-popover-title {
    font-size: var(--ui-text-md);
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text-strong);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.ui-popover-close {
    position: absolute;
    top: -4px;
    right: -6px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--ui-text-hint);
    font-size: var(--ui-text-value);
    line-height: 1;
    cursor: pointer;
}
.ui-popover-close:hover {
    color: var(--ui-text);
}
/* Lista osób w okienku (tryb kontekstowy Wyznaczania oficjów — manage/new_users_list_for_context): wiersz to cel kliknięcia. */
.ui-popover-item {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: var(--ui-radius);
    font-size: var(--ui-text-md);
    cursor: pointer;
}
.ui-popover-item:hover {
    background: var(--ui-surface-subtle);
}
.ui-popover-foot {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--ui-border-subtle);
    text-align: right;
}
.ui-mass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 6px;
}
.ui-mass-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-subtle);
    text-align: left;
    cursor: pointer;
}
/* Msza, na którą kapłana intencji nie da się przypiąć (przeszkoda, inne oficjum) — nieaktywna, powód w title. */
.ui-mass-option--blocked,
.ui-mass-option--blocked:hover {
    opacity: .55;
    cursor: not-allowed;
}
.ui-mass-option:hover,
.ui-mass-option:focus-visible {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    outline: none;
}
.ui-mass-option--current {
    border-color: var(--ui-primary);
    box-shadow: inset var(--ui-accent-width) 0 0 var(--ui-primary);
    background: var(--ui-surface);
}
.ui-mass-option-name {
    max-width: 100%;
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-bold);
    line-height: 1.2;
    color: var(--ui-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-mass-option-tag {
    font-size: var(--ui-text-eyebrow);
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text-muted);
}
.ui-mass-option-meta {
    max-width: 100%;
    font-size: var(--ui-text-sm);
    color: var(--ui-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* -----------------------------------------------------------------------------
   17. WYDRUK — kartka do druku (grafik do kuchni: report/_kitchen_print_sheet, report/report_meals_print).
   Na ekranie kartka jak papier A4 pod wyborem opcji; przy druku zostaje sama kartka — bez nagłówka, menu, dolnego
   paska, banera cookies i wyboru opcji (.ui-print-controls). Przycisk „Drukuj”: public/js/ui-print.js.
   ----------------------------------------------------------------------------- */
.ui-print-sheet {
    max-width: 794px;                   /* A4 przy 96 dpi */
    margin: 0 auto;
    padding: 48px 44px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text-strong);
    box-shadow: 0 0 30px rgba(82, 63, 105, 0.05);
}
.ui-print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ui-text-strong);
}
.ui-print-eyebrow {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: var(--ui-tracking-eyebrow);
    text-transform: uppercase;
}
.ui-print-title {
    margin: 2px 0 0;
    color: var(--ui-text-strong);
    font-size: 1.8rem;
    font-weight: var(--ui-weight-bold);
}
.ui-print-stamp {
    color: var(--ui-text-muted);
    line-height: 1.35;
    text-align: right;
}
.ui-print-stamp b {
    color: var(--ui-text-strong);
}
.ui-print-table {
    width: 100%;
    margin-top: 18px;
    border-collapse: collapse;
}
.ui-print-table th {
    padding: 7px 10px;
    border: 1px solid var(--ui-text-hint);
    background: var(--ui-surface-subtle);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: var(--ui-tracking-eyebrow);
    text-align: left;
    text-transform: uppercase;
}
.ui-print-table td {
    padding: 10px;
    border: 1px solid var(--ui-text-hint);
    vertical-align: middle;
}
.ui-print-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ui-print-table td.num {
    font-size: var(--ui-text-value);
    font-weight: var(--ui-weight-medium);
}
.ui-print-table td.total {
    font-size: 2.2rem;
    font-weight: var(--ui-weight-bold);
}
.ui-print-day td {
    height: 84px;
}
.ui-print-date b {
    display: block;
    font-size: var(--ui-text-title);
}
.ui-print-date small {
    display: block;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
    line-height: 1.3;
}
.ui-print-day.is-sunday .ui-print-date b {
    color: var(--ui-danger-text);
}
.ui-print-guests span {
    display: block;
    font-size: var(--ui-text-md);
    line-height: 1.4;
}
.ui-print-foot {
    margin: 14px 0 0;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
}
@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }
    #kt_header,
    #kt_header_mobile,
    #kt_scrolltop,
    .ui-bottom-nav,
    .ui-print-controls,
    .ui-impersonation-bar,
    .ui-password-notice,
    .cc-banner,
    .cc-opener {
        display: none !important;
    }
    body,
    #kt_wrapper,
    #kt_content {
        padding: 0 !important;
        background: #FFFFFF !important;
    }
    .ui-print-sheet {
        max-width: none;
        padding: 0;
        box-shadow: none;
    }
    .ui-print-table tr {
        break-inside: avoid;
    }
}


/* -----------------------------------------------------------------------------
   18. STAN DNIA — Zatwierdzenie dnia (manage/new_confirm_day, manage/intends_list_table)
   Stany z App\Service\ConfirmDayStatus (Day::getConfirmStatus): brak klasy — w porządku, --celebrated — odprawione,
   --missing — brakuje intencji, --too-many — za dużo. Ta sama klasa koloruje ikonę dnia (components/day_status)
   i dzień w kalendarzu (public/js/confirm-day-calendar.js).
   -------------------------------------------------------------------------- */
.ui-day-status {
    position: relative;
    display: inline-block;
    line-height: 1;
    color: var(--ui-text-strong);
}
.ui-day-status > span:first-child {
    font-size: 1.25rem;
}
/* Kropka legendy (components/day_status_legend) — kolor z tej samej klasy stanu co ikona. Przed regułami stanów. */
.ui-day-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border-radius: var(--ui-radius-full);
    color: var(--ui-text-strong);
    background: currentColor;
}
.ui-day-status--celebrated { color: var(--ui-success-text); }
.ui-day-status--missing { color: var(--ui-warning-icon); }
.ui-day-status--too-many { color: var(--ui-danger-text); }
/* Czerwona ramka (ConfirmDayStatus::OVERDUE): dzień minął, a ma nieodprawione intencje — w legendzie pusty kwadrat w ramce. */
.ui-day-status-dot.ui-day-status--overdue {
    background: transparent;
    border: 2px solid var(--ui-danger-text);
    border-radius: 3px;
}
/* Kółko z liczbą: ile brakuje albo ile za dużo — duże i kontrastowe, ma być czytelne bez okularów. */
.ui-day-status-count {
    position: absolute;
    top: -8px;
    right: -11px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--ui-radius-full);
    color: var(--ui-surface);
    font-size: 11px;
    font-weight: var(--ui-weight-bold);
    line-height: 18px;
    text-align: center;
}
.ui-day-status--missing .ui-day-status-count { background: var(--ui-warning-icon); }
.ui-day-status--too-many .ui-day-status-count { background: var(--ui-danger-text); }

/* Legenda stanów (components/day_status_legend) — rząd kolorowych kropek pod kalendarzem, pismo większe niż podpowiedź. */
.ui-day-status-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 8px;
    font-size: var(--ui-text-md);
    color: var(--ui-text);
}
.ui-day-status-legend > span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Przycisk daty (Metronic btn btn-secondary + ui-date-button): stan dnia z boku, data w dwóch liniach,
   pod spodem nazwa dnia tygodnia. Wszystkie przyciski w rzędzie mają tę samą wysokość. */
.ui-date-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    white-space: nowrap;
}
.ui-date-button-main {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ui-date-button .ui-day-status {
    margin-right: 18px;
}
.ui-date-button-text {
    line-height: 1.35;
}
.ui-date-button-weekday {
    margin-top: 2px;
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-semibold);
}
/* Oglądany dzień w rzędzie dni (Zatwierdzenie dnia): ramka w kolorze boksu „Oglądany dzień” u góry. */
.ui-date-button.ui-date-button--active {
    border: 2px solid;
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    box-shadow: 0 0 0 3px rgba(54, 153, 255, 0.15);
}
/* Dzień minął z nieodprawionymi intencjami — czerwona ramka (także przy oglądanym dniu: ramka czerwona, poświata niebieska). */
.ui-date-button.ui-date-button--overdue {
    border: 2px solid;
    border-color: var(--ui-danger-text);
}
/* Węższy ekran: kolumna nie mieści ikony obok daty — ikona nad datą. */
@media (max-width: 1399.98px) {
    .ui-date-button-main { flex-direction: column; }
    .ui-date-button .ui-day-status { margin: 0 0 4px; }
}

/* Legenda chowana na telefonie (DayStatusLegend collapsible): widać ją po kliknięciu „i” obok kalendarza (is-open). */
@media (max-width: 991.98px) {
    .ui-day-status-legend--collapsible:not(.is-open) { display: none; }
}

/* Oglądany dzień ze strzałkami do dnia wcześniej i później (strzałki tylko na telefonie — tam nie ma rzędu dni). */
.ui-day-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;     /* odstęp od przycisków dnia — strzałki są wyższe niż data */
}
.ui-day-nav .ui-icon-button {
    width: var(--ui-touch);
    height: var(--ui-touch);
    margin-left: 0;
}

/* Działania dla oglądanego dnia („Uzupełnij z SID”, „Za dużo”, „Wyznacz brakujące intencje”) — odstęp także po zawinięciu. */
.ui-day-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Rząd przycisków daty (row ui-date-strip, kolumny col-3 col-md-2 col-lg-1): na telefonie 4 w rzędzie z mniejszym odstępem. */
@media (max-width: 991.98px) {
    .ui-date-strip { margin-left: -4px; margin-right: -4px; }
    .ui-date-strip > [class*="col-"] { padding-left: 4px; padding-right: 4px; }
    .ui-date-button { font-size: var(--ui-text-sm); }
    .ui-date-button-weekday { font-size: var(--ui-text-eyebrow); }
}

/* Wyznaczanie oficjów: wolne miejsce kapłana mszy bez intencji (limit 0) — fioletowa kulka bez wypełnienia (PrepareWeekGrid). */
.check-work.ui-slot-no-intend {
    background: transparent;
    border: 2px solid var(--ui-info-text);
}
/* Okienko „z SID” w Zatwierdzeniu dnia (manage/new_confirm_day, public/js/confirm-day-sid.js): przyciemnione tło,
   panel na środku, lista przewijana w panelu. */
.ui-sid-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.35);
}
.ui-sid-modal[hidden] {
    display: none;
}
.ui-sid-modal-panel {
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}
.ui-sid-modal-list {
    overflow-y: auto;
}
/* Wiersz mszy bez intencji w tabeli zatwierdzania (manage/_confirm_row_mass): szare tło odróżnia go od intencji. */
.ui-confirm-row--mass > td {
    background: var(--ui-surface-subtle);
}
/* Tabela zatwierdzania (Metronic table … + ui-confirm-table): duże pismo na komputerze, na telefonie zwykłe i ciaśniej —
   kolumny ołówków i kciuków mają się zmieścić bez przewijania w bok. */
.ui-confirm-table {
    font-size: 1.5rem;
}
/* Komputer: imię i nazwisko kapłana w jednej linii — kolumna kapłana rośnie, długa intencja się zawija. */
@media (min-width: 992px) {
    .ui-confirm-table .ui-confirm-cell-priest,
    .ui-confirm-table .ui-confirm-cell-celebrant {
        white-space: nowrap;
    }
}
.ui-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.ui-confirm-actions .btn {
    padding: 1.25rem 3rem;
    font-size: 1.5rem;
}
/* Telefon: każdy wiersz to karta — msza i intencja z kciukiem u góry, pod spodem kapłan mszy i (przy osobnym kapłanie
   intencji) kapłan intencji, każdy z ołówkiem po prawej. Etykiety z data-label komórek. Bez nagłówka tabeli. */
@media (max-width: 991.98px) {
    .ui-confirm-table {
        font-size: var(--ui-text-md);
        border: 0;
    }
    .ui-confirm-table thead {
        display: none;
    }
    .ui-confirm-table,
    .ui-confirm-table tbody {
        display: block;
    }
    .ui-confirm-table tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "mass intend celebrated"
            "priest priest priest-edit"
            "celebrant celebrant celebrant-edit";
        align-items: center;
        gap: 4px 10px;
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius);
    }
    .ui-confirm-table tr > td {
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }
    .ui-confirm-table .ui-confirm-cell-mass { grid-area: mass; font-weight: var(--ui-weight-bold); }
    .ui-confirm-table .ui-confirm-cell-intend { grid-area: intend; font-weight: var(--ui-weight-semibold); }
    .ui-confirm-table .ui-confirm-cell-celebrated { grid-area: celebrated; }
    .ui-confirm-table .ui-confirm-cell-priest { grid-area: priest; }
    .ui-confirm-table .ui-confirm-cell-priest-edit { grid-area: priest-edit; }
    .ui-confirm-table .ui-confirm-cell-celebrant { grid-area: celebrant; }
    .ui-confirm-table .ui-confirm-cell-celebrant-edit { grid-area: celebrant-edit; }
    .ui-confirm-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--ui-text-muted);
        font-size: var(--ui-text-eyebrow);
        text-transform: uppercase;
        letter-spacing: var(--ui-tracking-eyebrow);
    }
    .ui-confirm-table .ui-confirm-cell-priest,
    .ui-confirm-table .ui-confirm-cell-celebrant {
        margin-top: 6px;
    }
    .ui-confirm-table .ui-icon-button {
        width: auto;
        min-width: var(--ui-touch);
        height: var(--ui-touch);
        margin-left: 0;
    }
    .ui-confirm-actions .btn {
        flex: 1 1 100%;
        padding: 0.85rem 1rem;
        font-size: var(--ui-text-title);
    }
}

/* Kolory dni w kalendarzu (bootstrap-datepicker, beforeShowDay → klasa ui-day-status--*). Wybrany dzień zostaje niebieski. */
.datepicker table tr td.day.ui-day-status--celebrated:not(.active) { background: var(--ui-success-bg); color: var(--ui-success-text); }
.datepicker table tr td.day.ui-day-status--missing:not(.active) { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.datepicker table tr td.day.ui-day-status--too-many:not(.active) { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
/* Dzień minął z nieodprawionymi intencjami — czerwona ramka obok koloru stanu. */
.datepicker table tr td.day.ui-day-status--overdue { box-shadow: inset 0 0 0 2px var(--ui-danger-text); }

/* Pole kalendarza (Metronic input-icon + form-control-solid, readonly): otwiera kalendarz, bez migającego kursora. */
.ui-date-field {
    max-width: 200px;
}
.ui-date-field .form-control {
    cursor: pointer;
    caret-color: transparent;
}


/* -----------------------------------------------------------------------------
   19. LISTA WYBORU — pionowa lista, w której klik w nazwę wybiera wiersz (drugi klik odznacza), a z prawej
   są akcje ikonowe (IconButton). Konfiguruj kalendarz: typy dni (calendar/_day_types_list.html.twig,
   zachowanie: public/js/calendar-configure.js).
   ----------------------------------------------------------------------------- */
.ui-pick-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ui-pick-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    border-radius: var(--ui-radius);
}
.ui-pick-item:hover {
    background: var(--ui-surface-subtle);
}
.ui-pick-item.is-active {
    background: var(--ui-primary);
}
.ui-pick-label {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--ui-text);
    font-size: var(--ui-text-md);
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.ui-pick-item.is-active .ui-pick-label,
.ui-pick-item.is-active .ui-pick-actions {
    color: var(--ui-surface);
    font-weight: var(--ui-weight-bold);
}
.ui-pick-actions {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--ui-text-muted);
}
.ui-pick-actions .ui-icon-button {
    margin-left: 0;
}
.ui-pick-item.is-active .ui-icon-button:hover {
    background: rgba(255, 255, 255, 0.2);
}


/* -----------------------------------------------------------------------------
   20. WIERSZ OFICJUM — Konfiguruj kalendarz, kolumna „Oficja” (calendar/_work_row.html.twig):
   liczba osób w kółku (etykieta Metronic w kolorze rodzaju, na wysokość dwóch wierszy), nazwa, rodzaj; pod spodem
   godziny, rezerwacja, miejsce; z prawej akcje (IconButton). W typie dnia wiersz zwarty: liczba, nazwa, miejsce,
   godziny w dymku (title). W typie dnia wiersze przeciąga się między kolumnami „wybrane” i „dostępne”
   (public/js/calendar-configure.js: is-dragging na wierszu, is-drop-target na kolumnie docelowej). Celem jest cała
   kolumna — na wysokość wiersza siatki, więc także pod krótką listą — a długa lista ma własny suwak.
   ----------------------------------------------------------------------------- */
.ui-work-list {
    min-height: 48px;
    border-radius: var(--ui-radius);
}
.ui-work-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 4px;
    border-radius: var(--ui-radius);
}
.ui-work-column .ui-work-list {
    flex: 1 1 auto;
    max-height: 65vh;
    overflow-y: auto;
}
.ui-work-column.is-drop-target {
    outline: 2px dashed var(--ui-primary);
    outline-offset: 2px;
    background: var(--ui-surface-editor);
}
.ui-work-row {
    display: flex;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid var(--ui-border-subtle);
}
.ui-work-row:last-child {
    border-bottom: 0;
}
.ui-work-row[draggable="true"] {
    cursor: grab;
}
.ui-work-row:hover {
    background: var(--ui-surface-subtle);
}
.ui-work-row.is-dragging {
    opacity: 0.5;
}
.ui-work-row-main {
    flex: 1 1 auto;
    min-width: 0;
}
.ui-work-row-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.ui-work-row-name {
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-bold);
}
/* liczba osób (kapłanów, oficjalistów) — kółko Metronic w kolorze rodzaju, na wysokość dwóch wierszy */
.ui-work-row .ui-work-row-limit {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 10px;
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-bold);
}
.ui-work-row-place {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
}
/* oficjum zarchiwizowane, które zostało w typie dnia (dni, które je mają) */
.ui-work-row-archived {
    color: var(--ui-text-hint);
    font-size: var(--ui-text-sm);
    font-style: italic;
}
.ui-work-row-meta {
    margin-top: 2px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
}
.ui-work-row-actions {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--ui-text-muted);
}

/* Legenda rodzajów oficjów nad listą — Tagi w kolorach z wierszy, wyrównane do prawej */
.ui-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 10px;
}
/* Legenda jako filtr (calendar/_work_type_legend): przyciski większe, zaznaczony pełnym kolorem (styl w widoku) */
.ui-legend-item {
    padding: 5px 12px;
    border: 0;
    font-size: var(--ui-text-md);
    cursor: pointer;
}
.ui-legend-item[aria-pressed="true"] {
    font-weight: var(--ui-weight-bold);
}
.ui-legend-item[aria-pressed="true"]::before {
    content: "✓ ";
}
/* Filtr miejsc — bez kolorów rodzajów: szary, zaznaczony w kolorze akcentu */
.ui-legend--places .ui-legend-item {
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
}
.ui-legend--places .ui-legend-item[aria-pressed="true"] {
    background: var(--ui-primary);
    color: var(--ui-surface);
}

/* Wiersz, który właśnie trafił na listę (dodany do typu dnia albo z niego zdjęty): tło znika po chwili */
.ui-work-row.is-new {
    animation: ui-flash 2.5s ease-out;
}
@keyframes ui-flash {
    from { background: var(--ui-warning-bg); }
    to { background: transparent; }
}

/* „Dni miesiąca” bez wybranego typu (calendar/_month_days.html.twig): data i dzień tygodnia, typ dnia większym pismem */
.ui-month-day td {
    font-size: var(--ui-text-title);
    vertical-align: top;
}
.ui-month-day-type {
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
}


/* -----------------------------------------------------------------------------
   13. TELEFON (cd.) — kalendarz dat (bootstrap-datepicker) na urządzeniu dotykowym: public/js/ui-datepicker-touch.js
   blokuje klawiaturę (readonly), tu: pole nie wygląda na wyłączone, okienko na szerokość ekranu, dni pod palec.
   ----------------------------------------------------------------------------- */
input.ui-date-touch[readonly] {
    background-color: var(--ui-surface);
    cursor: pointer;
}
@media (max-width: 991.98px) {
    .datepicker.datepicker-dropdown {
        left: 16px !important;
        right: 16px;
        width: auto;
        padding: 8px;
    }
    .datepicker.datepicker-dropdown table {
        width: 100%;
    }
    .datepicker td,
    .datepicker th {
        height: var(--ui-touch);
        min-width: var(--ui-touch);
        font-size: 1rem;
    }
    .datepicker table tr td span {
        height: var(--ui-touch);
        line-height: var(--ui-touch);
    }
}

/* -----------------------------------------------------------------------------
   21. MSZA ZBIOROWA — intend/new_collective_intend, intend/collective_intend_table, intend/_collective_export
   (public/js/collective-intends.js). Wiersz intencji: znak, treść, „za żywych”/„za zmarłych” i ołówek; edycja treści
   w wierszu (ui-collective-editor). Telefon: wiersz jak karta — treść na całą szerokość, przyciski pod nią.
   ----------------------------------------------------------------------------- */
.ui-collective-export {
    margin-bottom: 20px;
}
.ui-collective-export-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ui-collective-export-buttons {
    display: flex;
    gap: 8px;
}
.ui-collective-hint,
.ui-collective-legend {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
}
.ui-collective-hint {
    margin-top: 8px;
}
.collective-export-status {
    margin-top: 12px;
}
.ui-collective-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.ui-collective-section + .ui-collective-section {
    margin-top: 24px;
}
.ui-collective-section-title {
    padding: 8px 0;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: var(--ui-tracking-eyebrow);
    text-transform: uppercase;
    font-size: var(--ui-text-sm);
}
.ui-collective-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--ui-border-subtle);
}
.ui-collective-mark {
    flex: 0 0 auto;
    width: 18px;
    color: var(--ui-text-hint);
    font-size: var(--ui-text-title);
    line-height: 1.45;
}
.ui-collective-row.is-dead .ui-collective-mark {
    color: var(--ui-text-strong);
}
.ui-collective-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ui-text-strong);
    font-size: var(--ui-text-title);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.ui-collective-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}
/* „za żywych” / „za zmarłych” — przełącznik z napisem zamiast samej ikony płomienia */
.ui-collective-kind {
    min-width: 128px;
    padding: 5px 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-full);
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-medium);
    white-space: nowrap;
}
.ui-collective-kind:hover {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}
.ui-collective-kind[aria-pressed="true"] {
    border-color: var(--ui-text-strong);
    background: var(--ui-text-strong);
    color: var(--ui-surface);
}
.ui-collective-kind.is-static {
    cursor: default;
}
.ui-collective-kind.is-static:hover {
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
}
.ui-collective-kind:disabled {
    opacity: .6;
}
.ui-collective-empty {
    padding: 16px 4px;
    color: var(--ui-text-hint);
}
/* edycja treści w wierszu */
.ui-collective-editor {
    flex: 1 1 auto;
    min-width: 0;
}
.ui-collective-editor textarea {
    width: 100%;
    font-size: var(--ui-text-title);
    resize: vertical;
}
.ui-collective-editor-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.ui-collective-editor-hint {
    margin-right: auto;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
}
.ui-collective-editor-error {
    width: 100%;
    color: var(--ui-danger-text);
    font-size: var(--ui-text-sm);
}
.ui-collective-row.is-editing .ui-collective-actions {
    display: none;
}
@media (max-width: 767.98px) {
    .ui-collective-row {
        flex-wrap: wrap;
        padding: 14px 0;
    }
    .ui-collective-text,
    .ui-collective-editor {
        flex-basis: calc(100% - 30px);
    }
    .ui-collective-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .ui-collective-kind {
        min-height: var(--ui-touch);
    }
    .ui-collective-actions .ui-icon-button {
        width: var(--ui-touch);
        height: var(--ui-touch);
    }
    .ui-collective-export-buttons,
    .ui-collective-export-buttons .btn {
        flex: 1 1 auto;
    }
    .ui-collective-toolbar .ui-segmented {
        width: 100%;
    }
    .ui-collective-toolbar .ui-segmented-item {
        white-space: normal;
    }
    .ui-collective-editor-hint {
        display: none;
    }
    .ui-collective-editor-bar .btn {
        flex: 1 1 auto;
        min-height: var(--ui-touch);
    }
}