/* =============================================================================
   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)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   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;
    --ui-danger-bg: #FFE2E5;
    --ui-danger-text: #F64E60;
    --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: inherit;
    cursor: pointer;
}
.ui-icon-button:hover {
    background: var(--ui-surface-subtle);
}
.ui-icon-button i {
    font-size: 1.2rem;
}
.ui-icon-button--outlined {
    margin-left: 0;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

/* 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); }
.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));
}
/* 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;
}
.ui-list-item[data-sunday] .ui-list-item-lead {
    color: var(--ui-danger-text);
}
.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);
}
.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-aside {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-text-hint);
}

/* 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;
}
/* 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;
}

/* 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;
    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: "✗  ";
}
.ui-password-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 20px;
}
.ui-password-notice > .ui-notice {
    flex: 1 1 320px;
    margin-top: 0;
}
.ui-password-notice-actions {
    display: flex;
    gap: 8px;
}