/* MAM ZAPISANE — arkusz stylów interfejsu panelu FIRMY (najemcy). */

:root {
    /* Design system PANELU FIRMY — premium/elegancki CRM dla branży ślubnej
       (2026-09-16, zastępuje dotychczasowy deepskyblue; superadmin ZOSTAJE
       przy swoim bordo, ta paleta dotyczy WYŁĄCZNIE panelu firmy). */
    --bg:        #f7f7f5;
    --surface:   #ffffff;
    --border:    #e6e7e4;
    --text:      #18211f;
    --muted:     #6d7673;

    --danger:    #c96b63;
    --danger-d:  #a8544d;
    --ok:        #4f8f6c;
    --warning:   #b98a4a;
    --info:      #4a7fa8;

    /* Kolor wiodący: ciepła róż-terakota (2026-09-17, zastępuje dawną zieloną
       szałwię — dopasowanie do referencyjnej grafiki "Zapisane Fotografia").
       Ta sama rodzina co --rose/--rose-light (już używane na aktywnej
       pozycji sidebaru i ikonach kart statystyk), tylko ciemniejszy/bardziej
       nasycony odcień bazowy — czytelny biały tekst na wypełnionych
       przyciskach. */
    --primary:       #b1665f;
    --primary-d:     #8f4f49;
    --accent:        #b1665f;
    --accent-d:      #8f4f49;
    --accent-border: #6f3c37;
    --accent-light:  #c88b84;
    --rose:          #d9a7a0;
    --rose-light:    #f1dedb;
    --beige:         #e8d3b5;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius:    var(--radius-md);

    --shadow-sm: 0 1px 2px rgba(17, 28, 26, .05);
    --shadow-md: 0 4px 16px rgba(17, 28, 26, .08);
    --shadow:    var(--shadow-md);

    --control-h: 34px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font: 15px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
}

a { color: var(--primary); transition: color .14s ease; }
a:hover { color: var(--primary-d); text-decoration-thickness: 1.5px; }
a:active { color: var(--accent-border); }
a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
    border-radius: 2px;
}

code {
    font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(15, 23, 42, .06);
    padding: 1px 5px;
    border-radius: 4px;
}

.muted { color: var(--muted); }
.pre-wrap { white-space: pre-wrap; }

/* Pola Zamawiającego 2 (moduł Klienci) — pokazane tylko gdy zaznaczony
   checkbox "drugi zamawiający"; czysty CSS (:has), działa też bez JS. */
.orderer2-fields { display: none; }
.form:has(#has-orderer2:checked) .orderer2-fields { display: flex; flex-direction: column; gap: 13px; }

/* Zlecenia — przełącznik "istniejący klient" / "nowy zamawiający" (moduł
   Zlecenia), tym samym czystym CSS (:has) co pola Zamawiającego 2. */
.existing-client-block, .new-orderer-block { display: none; }
.form:has(#order-mode-existing:checked) .existing-client-block { display: block; }
.form:has(#order-mode-new:checked) .new-orderer-block { display: flex; flex-direction: column; gap: 13px; }

/* Edycja zlecenia — bez przełącznika istniejący/nowy, pola zamawiającego
   zawsze widoczne (patrz .new-orderer-block powyżej, ten sam układ). */
.orderer-fields { display: flex; flex-direction: column; gap: 13px; }

/* Checkbox „Dane do zlecenia wypełni klient" (zakładanie zlecenia) — ten sam
   czysty CSS (:has) — chowa pola zamawiającego/„Zapisz w bazie klientów",
   pokazuje w zamian krótką notkę. Walidacja i tak już rozluźniona po stronie
   serwera (patrz OrderController::resolveInput()) — to czysto kosmetyczne. */
#client-fills-data-note { display: none; color: var(--muted); font-size: 13px; margin: -4px 0 4px; }
.form:has(#client-fills-data:checked) #client-fills-data-note { display: block; }
.orderer-input-fields { display: flex; flex-direction: column; gap: 13px; }
.form:has(#client-fills-data:checked) .orderer-input-fields { display: none; }

/* Combobox wyboru klienta z wyszukiwaniem (moduł Zlecenia) */
.client-picker { position: relative; display: block; }
.client-picker__results {
    position: absolute;
    z-index: 60;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
    max-height: 240px;
    overflow-y: auto;
}
.client-picker__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.client-picker__item:last-child { border-bottom: 0; }
.client-picker__item:hover { background: #f2ede6; }
.client-picker__empty { padding: 8px 12px; color: var(--muted); font-size: 13px; }

/* ---------- Ekran logowania -------------------------------------- */

body.auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.auth__card {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 26px 30px;
}

.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.auth__logo-img {
    display: block;
    max-width: 240px;
    max-height: 72px;
    width: auto;
    height: auto;
}

.auth__name { font-weight: 700; font-size: 17px; }
.auth__title { font-size: 16px; margin: 0 0 14px; }
.auth__foot { color: var(--muted); font-size: 13px; margin-top: 16px; }

/* ---------- Publiczny podgląd zlecenia dla klienta (moduł ClientPortal) -- */

body.client-portal { min-height: 100vh; padding: 24px 16px 40px; }

.client-portal__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.client-portal__logo-img { display: block; max-width: 220px; max-height: 64px; width: auto; height: auto; }
.client-portal__wrap { width: 100%; padding: 0 24px; box-sizing: border-box; }
.client-portal__foot { text-align: center; }

/* ---------- Układ aplikacji ------------------------------------- */

/* Baner na każdej stronie, gdy baza ma zaległe migracje (zapisy zablokowane
   przez Router — patrz WRITE_GUARD_EXEMPT). Nad całym .app__shell, nie tylko
   nad treścią, żeby było widać zawsze, nawet przy wąskim/schowanym menu. */
.update-banner {
    background: #fff4e0;
    color: #8a5a00;
    border-bottom: 1px solid #f0d9a8;
    padding: 10px 22px;
    font-size: 14px;
    text-align: center;
}
.update-banner a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Menu boczne i górny pasek mają zostawać na miejscu podczas przewijania
   treści — tylko .content przewija się niezależnie, reszta (body) nigdy. */
body.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.update-banner { flex-shrink: 0; }

.app__shell {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sidebar {
    width: 234px;
    flex-shrink: 0;
    background: #111c1a;
    color: #cdd7e4;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar__logo-img {
    display: block;
    max-width: 100%;
    max-height: 46px;
    width: auto;
    height: auto;
}

.sidebar__name { font-weight: 700; color: #fff; font-size: 15px; }

.sidebar__nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; }

.navitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #cdd7e4;
    text-decoration: none;
    font-size: 14px;
    transition: background .12s ease;
}

.navitem:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.navitem.is-active { background: var(--rose-light); color: var(--text); }
.navitem__icon {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
}
.navitem__icon svg { display: block; }
.navitem.is-active .navitem__icon { opacity: 1; }
.navitem--disabled { opacity: .5; cursor: default; }
.navitem__tag {
    margin-left: auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #a89f8f;
}

.app__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.topbar__toggle {
    display: none;
    border: 0;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text);
}

/* Wyszukiwarka — na razie WYŁĄCZNIE wizualna, bez podpiętej logiki
   przeszukiwania (patrz notatka nad polem w widoku). */
.topbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    max-width: 420px;
    padding: 8px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    transition: border-color .16s ease, background .16s ease;
}
.topbar__search:focus-within { border-color: var(--accent-light); background: var(--surface); }
.topbar__search svg { flex-shrink: 0; }
.topbar__search input {
    border: 0;
    outline: none;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    width: 100%;
}
.topbar__search input::placeholder { color: var(--muted); }

.topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar__bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.topbar__bell:hover { background: var(--bg); color: var(--text); }

/* Dropdown ogólny — menu użytkownika w pasku górnym (.user-menu) I menu ⋮
   wierszowe w tabelach (.dropdown-menu, np. lista Klientów) współdzielą
   panel/pozycje (`__panel`/`__item`); tylko wygląd PRZYCISKU otwierającego
   różni się (awatar+nazwa w topbarze vs. sama ikonka `.btn--icon` w
   wierszu). Otwieranie/zamykanie: [data-dropdown] w app.js (klik poza /
   ESC zamyka, tylko jeden otwarty naraz). */
.user-menu, .dropdown-menu { position: relative; display: inline-flex; }
.user-menu__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border: 0;
    background: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background .16s ease;
}
.user-menu__trigger:hover { background: var(--bg); }
.user-menu__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.user-menu__name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-menu__chevron { color: var(--muted); transition: transform .16s ease; }
.user-menu.is-open .user-menu__chevron { transform: rotate(180deg); }

.user-menu__panel, .dropdown-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 50;
    /* Zawsze w DOM (bez display:none) — tylko opacity/transform/visibility,
       żeby dało się animować pojawienie/zniknięcie czystym CSS. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.user-menu.is-open .user-menu__panel,
.dropdown-menu.is-open .dropdown-menu__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .15s ease, transform .15s ease;
}

.user-menu__item, .dropdown-menu__item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease;
}
.user-menu__item:hover, .dropdown-menu__item:hover { background: var(--bg); color: var(--text); }
.user-menu__item--danger, .dropdown-menu__item--danger { color: var(--danger-d); }
.user-menu__item--danger:hover, .dropdown-menu__item--danger:hover { color: var(--danger-d); }
.dropdown-menu__sep { height: 1px; background: var(--border); margin: 4px 2px; }
.dropdown-menu__label {
    padding: 6px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.dropdown-menu__item.is-active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-weight: 700;
}

/* Nowy, płaski pasek wyszukiwarki/filtrów list — zastępuje stary gradientowy
   .toolbar--card-top (styl SMOK/Przybył). Pierwsze użycie: lista Klientów;
   docelowo ten sam wzór dla pozostałych list. Bez osobnej "konsoli" — mieści
   się w zwykłym paddingu karty, tylko cienka linia oddziela od zawartości. */
.list-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
/* Reużyty jako nagłówek sekcji karty (tytuł + akcja), np. szczegóły zlecenia
   — .card__title ma domyślnie własny dolny margines, tu niepotrzebny. */
.list-toolbar .card__title { margin: 0; }
.list-toolbar__search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    max-width: 400px;
}
.list-toolbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    transition: border-color .16s ease, background .16s ease;
}
.list-toolbar__search:focus-within { border-color: var(--accent-light); background: var(--surface); }
.list-toolbar__search svg { flex-shrink: 0; }
.list-toolbar__search input {
    border: 0;
    outline: none;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    width: 100%;
}
.list-toolbar__search input::placeholder { color: var(--muted); }
.list-toolbar__search-btn { flex-shrink: 0; }
.list-toolbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.list-toolbar__actions .btn { font-weight: 400; }
.list-toolbar__actions .btn svg { stroke-width: 1.5; }
.list-toolbar__select { width: auto; min-width: 170px; height: 42px; cursor: pointer; }

/* Aktywny filtr listy (inny niż "Wszystkie...") — obwódka w kolorze wiodącym,
   żeby było widać z daleka, że lista jest zawężona. Wzorem SMOK-a
   (.toolbar__input--filter-active). */
.list-toolbar__select.is-filtered {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent);
}

.filter-btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 560px) {
    .user-menu__name { display: none; }
    .topbar__search { display: none; }
}

/* Pasek narzędzi zakładki — przyciski + pola wyszukiwania w jednym,
   segmentowym pasku u góry treści zakładki. */
.toolbar {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    min-height: 42px;
    background: #eae7e2;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 18px;
}

.toolbar--card-top {
    margin: -20px -22px 14px;
    border-radius: var(--radius) var(--radius) 0 0;
    border: none;
    border-bottom: 1px solid var(--border);
}

.toolbar__title {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
}

.toolbar__actions { display: flex; align-items: stretch; margin-left: auto; }
.toolbar__group { display: flex; align-items: stretch; }

.toolbar__input {
    margin: 6px 4px;
    padding: 0 10px;
    border: none;
    border-left: 1px solid #d4cfc4;
    border-right: 1px solid #d4cfc4;
    border-radius: 5px;
    background: #fff;
    font: inherit;
    color: var(--text);
    width: 86px;
}
.toolbar__input:focus { outline: none; background: #eef4ff; }
.toolbar__input--wide { width: 200px; }

.toolbar__btn {
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 16px;
    border: none;
    border-left: 1px solid #d4cfc4;
    border-right: 1px solid #d4cfc4;
    background: linear-gradient(to bottom, #f0ede6, #e3ddd2);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .16s ease;
}
.toolbar__btn:hover { background: linear-gradient(to bottom, #c2bba9, #d8d1c2); }
.toolbar__btn:active { background: linear-gradient(to bottom, #ada395, #cdc4b2); }
.toolbar__btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Filtr aktywny (np. Wszyscy/Firmy/Osoby prywatne na liście Klientów). */
.toolbar__btn.is-active {
    background: var(--accent);
    color: #fff;
    border-left-color: var(--accent-border);
    border-right-color: var(--accent-border);
}

/* Klawisze funkcyjne (prowadzące do edycji/zapisu) — kolor wiodący. */
.toolbar__btn--accent {
    color: #fff;
    border-left: 1px solid var(--accent-border);
    border-right: 1px solid var(--accent-border);
    background: linear-gradient(to bottom, var(--accent-light), var(--accent));
}
.toolbar__btn--accent:hover { background: linear-gradient(to bottom, #c17972, #9c5951); }
.toolbar__btn--accent:active { background: linear-gradient(to bottom, #9c5951, var(--accent-d)); }

@media (max-width: 720px) {
    .toolbar,
    .toolbar__actions,
    .toolbar__group {
        flex-direction: column;
        align-items: stretch;
    }
    .toolbar__actions { margin-left: 0; width: 100%; }
    .toolbar__title { padding: 10px 16px; }

    .toolbar__input {
        width: auto;
        margin: 8px 10px;
        padding: 12px 10px;
        border: 1px solid #d4cfc4;
    }

    .toolbar__btn {
        width: 100%;
        justify-content: center;
        margin: 0;
        padding: 16px 20px; /* wysokość jak .btn--tall */
        font-size: 15px;
        border-left: none;
        border-right: none;
        border-top: 1px solid #d4cfc4;
    }
    .toolbar__btn--accent { border-top-color: var(--accent-border); }

    /* Wyjątek: grupa nawigacji „‹ nazwa ›" (miesiąc w kalendarzu) zostaje
       w jednej linii — strzałki po bokach, nazwa pośrodku. */
    .toolbar__group--inline {
        flex-direction: row;
        align-items: stretch;
    }
    .toolbar__group--inline .toolbar__btn {
        width: auto;
        flex: 0 0 auto;
        padding: 12px 26px;
        font-size: 24px; /* strzałki ‹ › — większy cel dotyku */
    }
    .toolbar__group--inline .toolbar__title {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 8px;
        font-size: 16px;
    }
}

/* Zawartość modułu wypełnia całą dostępną szerokość; węższe bloki (np.
   formularze) ograniczamy klasą .card--narrow. Jedyny element, który się
   przewija — sidebar/topbar zostają na miejscu (patrz body.app wyżej). */
.content { padding: 22px; width: 100%; flex: 1; overflow-y: auto; }

/* ---------- Karty --------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin-bottom: 18px;
}

.card--narrow { max-width: 480px; }

/* Dwie powiązane karty obok siebie (np. dane zlecenia + zamawiający),
   zwijane w jedną kolumnę na wąskim ekranie. */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
    align-items: stretch;
}
.detail-grid > .card { margin-bottom: 0; min-width: 0; }
@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; }
}

/* Wariant 40/60 (np. dane zlecenia węższe, zamawiający szerszy) */
.detail-grid--40-60 { grid-template-columns: 2fr 3fr; }
@media (max-width: 900px) {
    .detail-grid--40-60 { grid-template-columns: 1fr; }
}

/* Szczegóły zlecenia: Zamawiający szeroko, Notatki wąsko — szerokość karty
   Notatek dobrana tak, by wizualnie odpowiadała szerokości kafelka "Pakiet"
   w .stat-grid--order nad nią (spójna kolumna w pionie). */
.detail-grid--order { grid-template-columns: 2.1fr 1fr; }
@media (max-width: 900px) {
    .detail-grid--order { grid-template-columns: 1fr; }
}

/* Wariant bez rozciągania kart do równej wysokości (np. Pakiet usług + Finanse —
   karty mają różną ilość treści i nie powinny sztucznie dorównywać wysokością). */
.detail-grid--top { align-items: start; }

/* Pion dwóch kart jako JEDNA kolumna .detail-grid (np. Lokalizacja + Pakiet
   usług po lewej, Finanse po prawej na całą wysokość obu) — odstęp między
   kartami bierze się z ich własnego .card{margin-bottom}, bez dodatkowego gap. */
.detail-grid__stack { display: flex; flex-direction: column; min-width: 0; }

/* Karta na połowę szerokości ekranu (np. szczegóły pakietu pod danymi zlecenia) */
.card--half { max-width: 50%; }
@media (max-width: 900px) {
    .card--half { max-width: 100%; }
}
/* Kafelek w kolorze wiodącym (np. „dostępna aktualizacja bazy" na pulpicie) */
.card--accent-work { border-left: 4px solid var(--accent); background: var(--rose-light); }
.card__title { font-size: 16px; margin: 0 0 12px; }
.card__lead { color: var(--muted); margin: 0 0 16px; }

/* ---------- Formularze ---------------------------------------- */

.form { display: flex; flex-direction: column; gap: 13px; }
.form__row { display: flex; flex-direction: column; gap: 5px; }
/* Jak przy .form__group[hidden] wyżej — display:flex jako reguła autora inaczej
   nadpisałoby wbudowaną [hidden]{display:none}, np. wiersz ceny pakietu ręcznego
   albo nazwy lokalizacji ręcznej zostałby zawsze widoczny mimo atrybutu hidden. */
.form__row[hidden] { display: none; }
.form__label { font-size: 13px; font-weight: 600; }
.form__hint { font-weight: 400; color: var(--muted); }

/* Edytor Quill (modal wysyłki potwierdzenia wpłaty, edycja komunikatów
   i szablonów umów w Ustawienia → Konfiguracja/Umowy) — port z panelu
   superadmina. */
#payment-confirm-editor,
#message-body-editor,
#contract-body-editor { background: #fff; border-radius: 7px; }
#payment-confirm-editor .ql-toolbar.ql-snow,
#message-body-editor .ql-toolbar.ql-snow,
#contract-body-editor .ql-toolbar.ql-snow { border-color: #dad2c4; border-radius: 7px 7px 0 0; }
#payment-confirm-editor .ql-container.ql-snow,
#message-body-editor .ql-container.ql-snow,
#contract-body-editor .ql-container.ql-snow,
#order-remarks-editor .ql-container.ql-snow { border-color: #dad2c4; border-radius: 0 0 7px 7px; }
#payment-confirm-editor .ql-editor,
#message-body-editor .ql-editor,
#contract-body-editor .ql-editor,
#order-remarks-editor .ql-editor { min-height: 220px; font-size: 15px; }
/* Treść umowy jest zwykle znacznie dłuższa niż komunikat e-mail — więcej
   miejsca od razu, żeby nie przewijać przy każdej linijce. Górny limit +
   własne przewijanie (zamiast rosnąć bez końca) — inaczej przy dłuższej
   umowie przewijał się CAŁY modal razem z paskiem narzędzi (znikał z
   widoku), a klik w treść przesuwał okno z powrotem do góry. Dzięki temu
   pasek narzędzi zawsze zostaje widoczny, a przewijanie dzieje się TYLKO
   wewnątrz treści. */
#contract-body-editor .ql-editor { min-height: 420px; max-height: 55vh; overflow-y: auto; }

/* Podgląd treści e-maila (HTML z edytora WYSIWYG) w trybie widoku. Świadomie
   ZERO marginesu na akapicie — dokładnie jak .ql-editor p w quill.snow.css
   (edytor) — żeby liczba pustych linii w podglądzie 1:1 zgadzała się z tym,
   co widać podczas edycji (a nie dodatkowo "na oko" powiększała się o
   osobny odstęp między-akapitowy doklejany tutaj). Odstęp między akapitami
   bierze się WYŁĄCZNIE z wysokości linii, tak samo jak w edytorze. */
.email-preview { border: 1px solid var(--border); border-radius: 7px; padding: 14px 16px; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
/* Długie linki / obrazy / tabele z wklejonej treści nie wychodzą poza kartę. */
.email-preview a { overflow-wrap: anywhere; word-break: break-all; }
.email-preview img, .email-preview table { max-width: 100%; height: auto; }
.email-preview p { margin: 0; }

.form__input {
    font: inherit;
    line-height: 1.4;
    padding: 8px 10px;
    border: 1px solid #dad2c4;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    width: 100%;
    min-height: 39px;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.form__input:hover:not(:focus):not(:disabled) { border-color: #c2b8a4; }
textarea.form__input { resize: vertical; }

.form__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.form__input.is-invalid,
.form__input:user-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.form__input:disabled {
    background: var(--bg);
    color: var(--muted);
    opacity: .7;
    cursor: not-allowed;
}

.form__check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.form__check.is-invalid { color: var(--danger-d); }
.form__check.is-invalid input { outline: 2px solid var(--danger); outline-offset: 2px; }

/* Checkboxy i radio (checkboxy/"opcje" wyboru) w kolorze wiodącym wszędzie,
   2x większe niż domyślny rozmiar przeglądarki. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.form__color-wrap { margin-top: 4px; }
.form__color-wrap[hidden] { display: none; }
.form__color {
    width: 58px;
    height: 34px;
    padding: 2px;
    background: #fff;
    border: 1px solid #dad2c4;
    border-radius: 7px;
    cursor: pointer;
    vertical-align: middle;
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.form__actions--confirm { justify-content: flex-start; }
.form__actions--confirm .btn { flex: 1 1 0; padding-top: 16px; padding-bottom: 16px; }

/* Treść modala potwierdzenia — nagłówek-pytanie, opis, pogrubiona nazwa
   rekordu i ostrzeżenie o nieodwracalności, każde w osobnej linii, do lewej
   (patrz app.js — ikona kosza siedzi w nagłówku modala, nie tutaj). */
.confirm-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.confirm-text { margin: 0; color: var(--muted); }
.confirm-name { margin: 4px 0 0; font-weight: 700; color: var(--text); }
.confirm-warning {
    margin: 24px 0 0;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--danger-d);
}

.btn--right { margin-left: auto; }

/* Formularz w jednej linii (np. NIP + „Pobierz dane") */
.form-inline { display: flex; gap: 6px; align-items: center; }
.form__input--inline { width: auto; flex: 1 1 auto; min-width: 0; }

/* Pole + przycisk zrośnięte w jedną kontrolkę (np. NIP + „Pobierz dane") —
   bez odstępu, wspólna wysokość (align-items: stretch rozciąga przycisk do
   wysokości pola), zewnętrzne rogi zaokrąglone, wewnętrzne płaskie. */
.input-group { display: flex; align-items: stretch; }
.input-group .form__input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .btn {
    flex: 0 0 auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

/* Śródtytuł sekcji w dłuższym formularzu */
.form__subhead {
    margin: 6px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}

/* Wydzielony blok formularza (np. wszystko dot. pakietu przy zakładaniu
   zlecenia) — odróżniony od reszty pól tłem, żeby było widać na pierwszy
   rzut oka, że dotyczą jednej rzeczy, bez ciężaru pełnej .card (ten blok
   siedzi już wewnątrz modala/formularza). */
.form__group {
    display: flex;
    flex-direction: column;
    gap: 13px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
/* Bez tego reguła display:flex wyżej (jako reguła autora) nadpisałaby
   wbudowaną [hidden]{display:none} przeglądarki niezależnie od specyficzności
   — karta zostałaby zawsze widoczna mimo atrybutu hidden (patrz ta sama
   pułapka przy podglądzie podpisu, .signature-preview[hidden]). */
.form__group[hidden] { display: none; }
.form__group .form__subhead:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form__group__title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}

/* Dwie kolumny w formularzu (np. kod pocztowy + miasto) */
.form__grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form__grid2 > .form__row { margin: 0; }

@media (max-width: 520px) {
    .form__grid2 { grid-template-columns: 1fr; gap: 13px; }
}

/* Siatka pól formularza na pełnej szerokości karty — tyle kolumn po ~220px,
   ile się zmieści (zwykle 3-4 na desktopie), bez zmiany szerokości/wyglądu
   pojedynczego pola. Pole, które ma zająć cały wiersz mimo siatki (np. duży
   textarea) dostaje `.form__row--full` (grid-column: 1 / -1). */
.form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 13px 16px;
}
.form__grid > .form__row,
.form__grid > .form__check { margin: 0; }
.form__row--full { grid-column: 1 / -1; }

/* ---------- Listy definicji -------------------------------- */

.deflist { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.deflist > div { display: flex; gap: 10px; font-size: 14px; }
.deflist dt { color: var(--muted); min-width: 90px; }
.deflist dd { margin: 0; font-weight: 600; }

.name { font-weight: 700; }
a.name { color: var(--text); text-decoration: none; }
a.name:hover { color: var(--primary); }

/* ---------- Przyciski ---------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, transform .08s ease, opacity .14s ease;
}
.btn > svg:first-child { margin-right: 8px; }
.btn--icon > svg:first-child { margin-right: 0; }
/* Przycisk z SAMĄ ikoną, ale NIE .btn--icon (np. Informacja o zleceniu —
   ma być wielkości .btn--ghost.btn--tall) — usuwa odstęp myślany na tekst,
   który by tu i tak nie nastąpił. Celowo osobna klasa zamiast selektora
   :only-child na wszystkich .btn, żeby nie ruszać przycisków gdzie indziej. */
.btn--icon-solo > svg:first-child { margin-right: 0; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn:disabled, .btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Stan "loading" — tekst niewidoczny (ale zajmuje miejsce, więc przycisk NIE
   zmienia rozmiaru), na środku subtelny spinner. Dodawana/usuwana w JS razem
   z `disabled` przy operacjach AJAX (modal formularza, potwierdzenie usuń). */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    opacity: 1;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}
.btn--ghost.is-loading::after,
.btn--icon.is-loading::after {
    border-color: color-mix(in srgb, var(--text) 25%, transparent);
    border-top-color: var(--text);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn.is-loading::after { animation-duration: 1.5s; }
}

/* Primary/Accent (to samo w tej apce — --primary i --accent mają tę samą
   wartość): hover JAŚNIEJSZY/bardziej nasycony (--accent-light), active
   CIEMNIEJSZY — dokładnie odwrotne kierunki, zgodnie z briefem ("hover:
   nieco jaśniejsza zieleń, active: delikatnie ciemniejsza"). */
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--accent-light); color: #fff; }
.btn--primary:active { background: var(--accent-border); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-light); color: #fff; }
.btn--accent:active { background: var(--accent-border); }

/* "Secondary" z briefu — jasne tło + border, przyciemnia się na hover/active.
   Zostaje pod nazwą --ghost (już tak się zachowuje i jest wszędzie używana —
   zmiana nazwy klasy byłaby przebudową 18+ widoków bez żadnej zmiany wyglądu). */
.btn--ghost { background: #fff; border-color: #dad2c4; color: var(--text); }
.btn--ghost:hover { background: #f2ede6; color: var(--text); }
.btn--ghost:active { background: #e9e3d8; }

/* "Soft" z briefu — bardzo jasne tło w kolorze akcentu, tekst w kolorze
   akcentu, delikatne podświetlenie na hover. Nowy wariant (wcześniej nie
   było odpowiednika) — do akcji pomocniczych, mniej ważnych niż Primary,
   ale bardziej wyróżnionych niż Ghost. */
.btn--soft { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-border); border-color: transparent; }
.btn--soft:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); color: var(--accent-border); }
.btn--soft:active { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger-d); color: #fff; }
.btn--danger:active { background: #8a3f3a; }

/* Wyjątek od głównego koloru wiodącego (róż/terakota) — przyciski "+ Dodaj..."
   i awatary zostają w dawnej zieleni na wyraźną prośbę (2026-09-17). */
.btn--add { background: #486f67; color: #fff; }
.btn--add:hover { background: #71958b; color: #fff; }
.btn--add:active { background: #33534c; }
.btn--sm { padding: 5px 10px; font-size: 13px; }
.btn--block { width: 100%; text-align: center; margin-top: 4px; }

/* Icon button — akcje wierszowe w tabelach (podgląd/edycja/duplikuj/usuń),
   ikona zamiast tekstu. Domyślnie "ghost" (przezroczysty), subtelne tło na
   hover. Destrukcyjne akcje (--danger) dostają delikatny czerwony akcent
   TYLKO na hover/focus, nie pełne czerwone tło. */
.btn--icon {
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
}
.btn--icon svg { display: block; }
.btn--icon:hover { background: var(--bg); border-color: var(--border); color: var(--text); }
.btn--icon:active { background: #ece7de; }
.btn--icon--danger:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger-d);
}
/* .btn--icon samo w sobie nadpisuje tło/kolor na neutralne (bo w arkuszu jest
   NIŻEJ niż .btn--accent) — ten wariant przywraca akcent tam, gdzie ikonka ma
   sygnalizować akcję główną/pilną (np. „Podpisz" przy niepodpisanej umowie),
   a nie zwykłą, drugorzędną (edytuj/pobierz). */
.btn--icon.btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--icon.btn--accent:hover { background: var(--accent-light); color: #fff; border-color: var(--accent-light); }
/* Zielony wariant — odróżnia wizualnie podpis wykonawcy (firmy) od podpisu
   zamawiającego (ten zostaje na kolorze akcentu wyżej), przy dwóch osobnych
   przyciskach „Podpisz" obok siebie w karcie Umowa. */
.btn--icon.btn--ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn--icon.btn--ok:hover { background: color-mix(in srgb, var(--ok) 85%, #fff); color: #fff; border-color: var(--ok); }

/* ---------- Tabele ----------------------------------------- */

.table-wrap { overflow-x: auto; }
.table__addrow { margin-top: 10px; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th, .table td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f0ede8;
    color: var(--text);
    font-weight: 700;
    padding: 16px 12px;
}

/* Sortowalny nagłówek kolumny — wygląda jak zwykły nagłówek (nie link),
   strzałka pokazuje aktualny kierunek; neutralna/przygaszona gdy kolumna nie
   jest aktywnym sortowaniem. */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    text-decoration: none;
}
.th-sort:hover { color: var(--text); }
.th-sort__icon { font-size: 11px; color: var(--muted); }

/* Podświetlenie dopasowanej frazy wyszukiwania w wynikach (patrz helpers.php highlight()). */
mark {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    color: var(--accent);
    font-weight: 700;
    padding: 0 2px;
    border-radius: 3px;
}

.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: #faf8f4; }
.table tbody tr[data-href] { cursor: pointer; }

/* Tabela klucz-wartość (np. szczegóły zlecenia) — jak .table, ale bez
   nagłówka (nie dołączany <thead>) i bez podświetlenia wiersza, bo wiersze
   nie są klikalne. Pierwsza kolumna = etykieta (wąska, wyszarzona), druga =
   wartość (pogrubiona) — ten sam układ co .deflist, tylko jako tabela. */
.table--kv tbody tr:hover { background: transparent; }
.table--kv td:first-child { width: 1%; padding-right: 28px; white-space: nowrap; color: var(--muted); }
.table--kv td:not(:first-child) { font-weight: 600; }

/* Wariant bez żadnych linii między wierszami — wygląda jak zwykły wpis
   danych, nie jak tabela (np. Dane zlecenia, Zamawiający), przy zachowanym
   układzie kolumn etykieta/wartość. Nieco mniejszy padding niż zwykła
   .table. Wybrane wartości (nazwisko, data zlecenia) wyróżnione większą
   czcionką (.val-lg), adres celowo bez pogrubienia (.val-normal). */
.table--kv--plain td { border-bottom: none; padding: 6px 10px; }
.table--kv--plain td.val-lg { font-size: 1.2em; }
.table--kv--plain td.val-normal { font-weight: 400; }

/* Klikalny e-mail/telefon w tabelach szczegółów (np. Zamawiający w
   zleceniu) — wygląda jak zwykły tekst, kolor wiodący dopiero po
   najechaniu, żeby nie zaburzać czarno-szarej tabeli danych. */
.value-link { color: inherit; text-decoration: none; }
.value-link:hover { color: var(--accent); text-decoration: underline; }

/* Nazwa + mały przycisk-ikona w tej samej komórce tabeli (np. "otwórz mapę"
   przy pozycji lokalizacji). */
.name-with-action { display: inline-flex; align-items: center; gap: 4px; }

.table th.col-actions,
.table td.col-actions {
    width: 1px;
    white-space: nowrap;
    text-align: right;
}

.table th.col-realization,
.table td.col-realization {
    width: 1px;
    white-space: nowrap;
}

/* Uchwyt przeciągania wiersza (zmiana kolejności pozycji pakietu) —
   patrz [data-sortable-rows] w app.js. */
.table th.col-drag,
.table td.table__drag { width: 1px; white-space: nowrap; }
.table td.table__drag {
    color: var(--muted);
    cursor: grab;
    text-align: center;
    vertical-align: middle;
}
.table td.table__drag svg { display: block; margin: 0 auto; }
tbody[data-sortable-rows] > tr.is-dragging { opacity: .4; }
tbody[data-sortable-rows] > tr { cursor: default; }

.table__actions { white-space: nowrap; }
.table__actions .btn + .btn,
.table__actions .inline-form + .btn { margin-left: 6px; }
.table__actions .inline-form { margin-left: 6px; }

/* Ikony akcji wierszowych zawsze w pełni widoczne (bez przygaszania domyślnie
   — użytkownik uznał to za mylące/nieczytelne). */
.table tbody tr .table__actions .btn--icon { opacity: 1; }
.inline-form { display: inline; }

/* Etykieta statusu (pill) — wypełnione tło, biała czcionka. */
.tag {
    display: inline-block;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    color: var(--muted);
    white-space: nowrap;
}

.tag--aktywny    { background: var(--ok); color: #fff; }
.tag--nieaktywny { background: var(--danger-d); color: #fff; }
.tag--warning    { background: var(--warning); color: #fff; }
.tag--danger     { background: var(--danger); color: #fff; }

/* Kropka koloru przed nazwą (rodzaje zleceń itd.) */
.color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Awatar — inicjały na kolorowym tle (listy/karty klientów, drawer szczegółów). */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #486f67;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}
.avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.avatar--lg { width: 64px; height: 64px; font-size: 22px; }

.drawer-profile { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }

/* Imię/nazwa Zamawiającego w drawerze szczegółów klienta — wyśrodkowane,
   pogrubione (patrz Clients/Views/drawer.php). */
.drawer-person { margin-bottom: 4px; text-align: center; }
.drawer-person--left { text-align: left; }
.drawer-person__name { font-size: 18px; font-weight: 700; color: var(--text); }

.drawer-divider { border-top: 1px solid var(--border); margin: 14px 0; }

.drawer-tag-row {
    margin: 10px 0 18px;
    text-align: center;
}
.drawer-tag-row .tag { font-size: 14px; }

/* Wiersz danych z ikoną (E-mail/Telefon/Firma/NIP/Adres/Aktywność) — ikona
   w zaokrąglonym polu z lewej, etykieta nad wartością z prawej. */
.drawer-field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.drawer-field__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--text);
    flex-shrink: 0;
}
.drawer-field__icon svg { width: 19px; height: 19px; }
.drawer-field__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    line-height: 1.2;
}
.drawer-field__value { font-size: 14px; color: var(--text); font-weight: 500; margin-top: 0; line-height: 1.2; }
.drawer-field__value .value-link { color: var(--text); }
.drawer-field__value .value-link:hover { color: var(--accent); }

/* Lista pozycji w drawerze (np. zawartość lokalizacji) — karty zamiast
   wąskiej dwukolumnowej tabeli, bo panel z prawej jest za wąski na tabelę. */
.drawer-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.drawer-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.drawer-item__name { font-size: 14px; font-weight: 600; color: var(--text); }
.drawer-item__text { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

.btn--tall { padding: 16px 20px; font-size: 15px; }

/* ---------- Statystyki pulpitu ---------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

/* Szczegóły zlecenia: 4 znane z góry karty (Klient/Data/Rodzaj/Pakiet) —
   węższa Data, szerszy Pakiet (dłuższa nazwa+cena), zamiast równych kolumn. */
.stat-grid--order { grid-template-columns: 1fr .7fr 1fr 1.3fr; }
@media (max-width: 900px) {
    .stat-grid--order { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #fff;
    margin-bottom: 2px;
}

/* Kolory kółek ikon — dobrane wg referencyjnego mockupu (przygaszona,
   stonowana paleta), NIEZALEŻNE od --accent (osobna, celowo szersza paleta). */
.stat-card__icon--terracotta { background: #b8825a; }
.stat-card__icon--rose       { background: #b97c82; }
.stat-card__icon--teal       { background: #3f6b5c; }
.stat-card__icon--gold       { background: #c9a866; }
.stat-card__icon--slate      { background: #6b7f99; }
/* Dopisek obok wartości (np. „· ofert wysłanych: 3") — mniejszy, stonowany. */
.stat-card__sub { font-size: 13px; font-weight: 400; color: var(--muted); }

.stat-card__label { font-size: 13px; color: var(--muted); }
.stat-card__value { font-size: 26px; font-weight: 700; }
/* Wariant na tekstowe (nie liczbowe) wartości kart — nazwa klienta/pakietu
   bywa długa, 26px jak dla liczb by się nie mieściło (np. szczegóły zlecenia). */
.stat-card__value--text { font-size: 16px; font-weight: 600; line-height: 1.3; }

/* Wariant kart bez etykiety — ikona i wartość obok siebie w jednej linii
   (zamiast ikony nad opisaną etykietą), np. szczegóły zlecenia. */
.stat-card--inline { flex-direction: row; align-items: center; gap: 14px; }
.stat-card--inline .stat-card__icon { margin-bottom: 0; flex-shrink: 0; }

/* Kafelki pulpitu (ikona nad etykietą/wartością/deltą) — ikona z lewej, reszta
   tekstu obok niej (jak .stat-card--inline w szczegółach zlecenia), zamiast
   ikony nad tekstem. Zawsze, na każdej szerokości ekranu. Bez zmiany HTML:
   ikona rozciąga się na 3 wiersze siatki (label/value/delta), a te trzy
   automatycznie trafiają w drugą kolumnę — CSS Grid sam pomija komórki
   zajęte przez ikonę. */
.stat-grid:not(.stat-grid--order) .stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
}
.stat-grid:not(.stat-grid--order) .stat-card__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin-bottom: 0;
}

/* Zamawiający 1/2 obok siebie na szerokim ekranie (szczegóły zlecenia) —
   jedna kolumna, gdy jest tylko jeden zamawiający. */
.orderer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

/* Nazwa i cena pakietu nad tabelą jego zawartości (szczegóły zlecenia). */
.package-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.package-summary__name { font-size: 15px; font-weight: 600; }
.package-summary__price { font-size: 20px; font-weight: 700; color: var(--text); }
.package-summary__hours { font-size: 13px; margin-top: 2px; }

/* Załączniki zlecenia (karta „Pliki", szczegóły zlecenia) — port z SMOK-a. */
.filelist { list-style: none; margin: 0; padding: 0; }
.filelist__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.filelist__item:last-child { border-bottom: 0; }
.filelist__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 600;
}
.filelist__meta { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Klawisz „Wgraj pliki" — <input type="file"> niewidoczny, ale naciągnięty
   na cały przycisk (opacity:0), żeby cały jego obszar był klikalny. */
.filepicker { position: relative; overflow: hidden; }
.filepicker__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}
.filepicker__name {
    font-size: 13px;
    color: var(--muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filepicker__error { flex-basis: 100%; color: var(--danger-d); font-size: 13px; }
.filepicker__error:empty { display: none; }

/* Notatki do zlecenia — lista wpisów (karta "Notatki", szczegóły zlecenia).
   Wysokość ograniczona do ok. 2 wpisów — po przekroczeniu włącza się
   przewijanie zamiast rozciągania całej karty. */
.order-notes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 190px;
    overflow-y: auto;
    padding-right: 4px;
}
/* Dwie kolumny: treść (tag/opis/meta) z lewej, akcje z prawej — wąska,
   dokładnie na szerokość jednego przycisku ikonowego, Edytuj/Usuń pod sobą. */
.order-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.order-note:last-child { padding-bottom: 0; border-bottom: none; }
.order-note__main { flex: 1 1 auto; min-width: 0; }
.order-note__actions { flex-direction: column; flex-shrink: 0; gap: 4px; }
.order-note__content { margin: 6px 0 0; font-size: 13px; color: var(--text); }
.order-note__meta { margin-top: 6px; font-size: 11px; color: var(--muted); }

/* Karta "Finanse" (szczegóły zlecenia) — wartość/wpłacono/pozostało + pasek
   postępu. Kolorystyka celowo stonowana (kolor wiodący appki), bez
   agresywnej zieleni/czerwieni. */
.finance-summary { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 16px; }
.finance-summary__item { display: flex; flex-direction: column; gap: 4px; }
.finance-summary__label { font-size: 12px; color: var(--muted); }
.finance-summary__value { font-size: 20px; font-weight: 700; color: var(--text); }
.finance-summary__value--warning { color: var(--warning); }
.finance-summary__value--ok { color: var(--ok); }

.finance-progress { display: flex; align-items: center; gap: 12px; }
.finance-progress__bar {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: var(--bg);
    overflow: hidden;
}
.finance-progress__fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.finance-progress__fill--over { background: var(--warning); }
/* Karta „Realizacja" (moduł fotografia) — termin minął, nie tylko "za dużo
   wpłacone" jak --over, stąd mocniejszy czerwony zamiast pomarańczowego. */
.finance-progress__fill--danger { background: var(--danger); }
/* Zlecenie zakończone — pasek zawsze pełny i zielony, niezależnie od
   faktycznego terminu (patrz Order::realizationInfo() isCompleted). */
.finance-progress__fill--ok { background: var(--ok); }
.finance-progress__label { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.finance-progress__label--danger { color: var(--danger-d); }
.finance-progress__label--ok { color: var(--ok); }

/* Widok komórkowy (karta „Realizacja"/„Finanse" w szczegółach zlecenia) —
   dłuższy napis (np. "zrealizowano w X z Y dni") obok wąskiego paska ściskał
   go do minimum albo wychodził poza kartę; na wąskim ekranie napis schodzi
   pod pasek, na pełną szerokość. */
@media (max-width: 560px) {
    .finance-progress { flex-wrap: wrap; }
    .finance-progress__bar { flex-basis: 100%; }
    .finance-progress__label { flex-basis: 100%; }
}

/* Lista zleceń — mini wykres kołowy „ile dni zostało do realizacji" (moduł
   fotografia, patrz Order::realizationInfo()). Pierścień malowany przez
   conic-gradient (bez SVG), środek wybity kolorem tła karty. Zanim
   wydarzenie nadejdzie, realizacja jeszcze się nie zaczęła — zamiast
   wykresu pokazujemy szarą ikonę zegara. */
.realization-donut {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), var(--border) 0);
}
.realization-donut--overdue { background: conic-gradient(var(--danger-d) calc(var(--pct, 0) * 1%), var(--border) 0); }
.realization-donut::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--surface);
}
.realization-donut__value { position: relative; font-size: 10px; font-weight: 700; color: var(--text); line-height: 1; }
.realization-donut--overdue .realization-donut__value { color: var(--danger-d); }
/* Po terminie — ikona ostrzeżenia zamiast liczby dni (zawsze i tak "0"). */
.realization-donut__warn { position: relative; color: var(--danger-d); }
.realization-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--muted);
}
/* Zlecenie zrealizowane — w tym samym miejscu co wykres kołowy, zamiast
   dawnej osobnej kolumny statusu (patrz Orders::index). */
.realization-done {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--ok);
}

/* Znacznik „najbliższe zlecenie" (Order::nextUpcoming()) — dostawiany OBOK
   ikony/wykresu realizacji w tej samej komórce, ma się rzucać w oczy na
   liście, stąd nasz czerwony (ten sam co przeterminowana realizacja). */
.realization-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.next-order-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--danger-d);
}

/* Lista zleceń — kompaktowy pasek „% opłacone" (celowo bez kwot, tylko
   procent — patrz Order::financeSummary()). Węższy wariant .finance-progress
   dopasowany do komórki tabeli/karty zamiast pełnej szerokości karty. */
.list-progress { display: flex; align-items: center; gap: 6px; width: 90px; }
.list-progress__bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.list-progress__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.list-progress__fill--over { background: var(--warning); }
.list-progress__fill--ok { background: var(--ok); }
.list-progress__label { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--muted); }

/* Tabela wpłat — wysokość ograniczona do ok. 3 wierszy (+ nagłówek), dalej
   przewijanie zamiast rozciągania całej karty. */
.payments-table-wrap,
.extras-table-wrap { max-height: 220px; overflow-y: auto; }
.stat-card__delta { font-size: 12px; font-weight: 600; color: var(--muted); }
.stat-card__delta--up { color: var(--ok); }
.stat-card__delta--down { color: var(--danger-d); }

/* ---------- Szybkie akcje (pulpit) ------------------------ */

.quick-actions { display: flex; flex-direction: column; gap: 8px; }
.quick-actions__btn { justify-content: flex-start; gap: 10px; width: 100%; padding: 10px 14px; }
.quick-actions__btn svg { flex-shrink: 0; }

/* ---------- Mini-kalendarz (pulpit) ----------------------- */

.mini-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.mini-cal__dow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    padding: 4px 0 6px;
}
.mini-cal__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding-bottom: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    transition: background .14s ease;
}
.mini-cal__day:hover { background: var(--bg); }
/* Dni spoza bieżącego miesiąca — puste miejsce w siatce (bez numeru, bez
   ramki), żeby nie mylić z faktycznymi dniami miesiąca (patrz Dashboard/index.php). */
.mini-cal__day.is-out { border-color: transparent; }
/* Niedziele/soboty i święta (App\Models\Holiday::isWorkingDay()) — ten sam
   czerwony odcień co pełny moduł Kalendarz (.cal__day.is-off). */
.mini-cal__day.is-off { background: #f7e9e7; color: var(--danger-d); }
/* Sobota bez święta — jasnoniebieski, odróżnia od świąt/niedziel (patrz
   .cal__day.is-saturday); jeśli w sobotę wypada święto, wygrywa .is-off. */
.mini-cal__day.is-saturday { background: #e7f0f7; color: var(--info); }
.mini-cal__day.is-today { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
/* Pasek (nie kropka) — dużo lepiej widoczny "na pierwszy rzut oka" niż mała
   kropka, szczególnie na tle .is-off (czerwone) albo .is-today (kolor
   akcentu), gdzie kropka ginęła. Leży NA WIERZCHU tła komórki (osobna
   warstwa), więc działa niezależnie od stanu dnia (weekend/święto/dziś). */
.mini-cal__day { padding-bottom: 5px; }
.mini-cal__dot {
    position: absolute;
    bottom: 3px;
    left: 15%;
    right: 15%;
    height: 4px;
    border-radius: 3px;
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.mini-cal__day.is-today .mini-cal__dot { background: #fff; box-shadow: 0 0 0 1px var(--accent); }

/* ---------- Wykres 6-miesięczny (pulpit) ------------------ */

.mini-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    height: 140px;
    margin-top: 8px;
}
.mini-chart__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    height: 100%;
}
.mini-chart__bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
}
.mini-chart__bar {
    width: 9px;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    transition: height .2s ease;
}
.mini-chart__bar--orders { background: var(--accent-light); }
.mini-chart__bar--revenue { background: var(--rose); }
.mini-chart__bar--inquiries { background: #6b7f99; }
.mini-chart__label { font-size: 11px; color: var(--muted); }

.mini-chart__legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
}
.mini-chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.mini-chart__swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mini-chart__swatch--orders { background: var(--accent-light); }
.mini-chart__swatch--revenue { background: var(--rose); }
.mini-chart__swatch--inquiries { background: #6b7f99; }

/* ---------- Najpopularniejsze usługi (pulpit) ------------- */

.top-services { display: flex; flex-direction: column; gap: 14px; }
.top-services__head {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}
.top-services__track {
    height: 7px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
}
.top-services__fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .2s ease;
}

/* ---------- Komunikaty ---------------------------------- */

.alert {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.alert--success { background: #e9f3ec; color: var(--ok); border-color: #c3ddc9; }
.alert--info { background: #e8f1f6; color: var(--info); border-color: #c3d9e6; }
.alert--error { background: #f7e9e7; color: var(--danger-d); border-color: #e3c3bf; }
.alert--muted { background: #f0ede8; color: var(--muted); border-color: #ded8ca; }
.alert--warning { background: #f7f0e3; color: var(--warning); border-color: #e6d6b3; }

/* Toast — komunikaty jednorazowe, same znikają (patrz flash.php i
   showToast() w app.js). Stos w prawym dolnym rogu, ponad wszystkim
   (wyżej niż modal — user musi widzieć potwierdzenie nawet z otwartym
   modalem, np. po usunięciu). */
.toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 200;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-width: min(360px, calc(100vw - 36px));
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--ok);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 14px;
    animation: toast-in .18s ease;
}
.toast--info { border-left-color: var(--info); }
.toast--error { border-left-color: var(--danger); }
.toast.is-leaving { animation: toast-out .18s ease forwards; }
.toast__msg { flex: 1 1 auto; }
.toast__close {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.toast__close:hover { color: var(--text); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .toast.is-leaving { animation: none; opacity: 0; }
}

/* ---------- Zakładki (np. Ustawienia) ------------------ */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.tab {
    padding: 9px 14px;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.tab:hover { color: var(--accent); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Przełącznik „widok → Edytuj" (data-edit-toggle) ---------- */
/* Domyślnie: widok tylko do odczytu (.js-view) widoczny, formularz (.js-edit)
   ukryty. Klik przycisku [data-edit-toggle] dodaje .is-editing na wskazanym
   zasięgu (jego JS-owa obsługa jest generyczna, patrz app.js) — wtedy się
   zamieniają. Ten sam wzorzec co w Przybył 2026 (tam po tabelach ustawień,
   tu też po całych sekcjach/formularzach jednego rekordu). */
.js-edit { display: none; }
.is-editing .js-view { display: none; }
.is-editing div.js-edit,
.is-editing section.js-edit { display: block; }
.is-editing form.js-edit,
.is-editing div.js-edit.form { display: flex; }
/* Warianty per-komórka tabeli (np. Ustawienia → Dni wolne — każdy wiersz
   swobodnie przełącza podgląd nazwy na pole edycji, bez zagnieżdżonego
   <form> w <table>, patrz komentarz w holidays/index.php). */
.is-editing input.js-edit,
.is-editing span.js-edit { display: inline-block; }
.is-editing td.js-edit,
.is-editing th.js-edit { display: table-cell; }
.is-editing tr.js-edit { display: table-row; }
.is-editing label.js-edit { display: inline-flex; }
.is-editing div.form__actions.js-edit { display: flex; }

/* ---------- Paginacja ---------------------------------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 13px;
    flex-wrap: wrap;
}

.pager__info { color: var(--muted); }
.pager__links { display: flex; gap: 4px; }
.pager__perpage { display: flex; align-items: center; gap: 4px; }

.pager__link {
    display: inline-block;
    min-width: 30px;
    text-align: center;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.pager__link:not(.is-active):hover { background: #f2ede6; color: var(--text); border-color: #dad2c4; }
.pager__link.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pager__gap { padding: 5px 4px; color: var(--muted); }

/* ---------- Modal ------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7vh 16px 16px;
}

.modal[hidden] { display: none; }

/* Płynne pojawianie/znikanie (~180ms) — .is-visible dodawana/usuwana w JS
   (openModal()/closeModal() w app.js), NIE samym [hidden] (na display:none
   nie da się animować przejścia). */
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity .18s ease;
}
.modal.is-visible .modal__backdrop { opacity: 1; }

.modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    transition: max-width .15s ease;
    max-height: 86vh;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 12px 44px rgba(15, 23, 42, .28);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}
.modal.is-visible .modal__dialog { opacity: 1; transform: none; }

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
}

/* Wyższy nagłówek niż domyślny — więcej oddechu wokół ikony+tytułu. Dotyczy
   WSZYSTKICH modali z ikoną w tytule (usuwanie, ale też zwykłe dodawanie/
   edycja formularzy — patrz app.js, wariant "confirm" ustawiany w obu
   miejscach dla spójności wysokości). */
.modal--confirm .modal__head { padding: 26px 18px; }

.modal__head-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.modal__title { margin: 0; font-size: 16px; font-weight: 600; }
.modal__title-icon { display: flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; }
.modal__title-icon svg { display: block; width: 18px; height: 18px; }
.modal__title-icon--danger { color: var(--danger-d); }

/* Ten sam wzorzec co ikonowe przyciski akcji w tabelach (.btn--icon) —
   kwadrat, ramka i tło dopiero na hover, zamiast gołego znaku "×". */
.modal__x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 20px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: var(--muted);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.modal__x:hover { background: var(--bg); border-color: var(--border); color: var(--text); }

/* Okno w kolorze wiodącym — nagłówek na --accent, biały tytuł/X.
   Domyślne dla wszystkich okien modalnych (edycja/zapis/usuwanie). */
.modal--accent .modal__head { background: var(--accent); border-bottom-color: var(--accent-d); }
.modal--accent .modal__title { color: #fff; }
.modal--accent .modal__x { color: rgba(255, 255, 255, .8); }
.modal--accent .modal__x:hover { color: #fff; }

/* Szerszy wariant — formularze z kilkoma polami w jednej linii (np. dodawanie/
   edycja klienta), żeby krótkie pola (kod pocztowy, miasto...) nie musiały
   rozciągać się na całą szerokość ekranu. Włączany przez [data-modal-wide]
   na linku otwierającym formularz. */
.modal--wide .modal__dialog { max-width: 720px; }

/* Jeszcze szerszy wariant — formularze z tabelą wielu kolumn (np. zawartość
   lokalizacji: uchwyt+godzina+nazwa+adres+link+usuń), gdzie nawet .modal--wide
   ciasno ściska pola. Włączany przez [data-modal-xwide]. */
.modal--xwide .modal__dialog { max-width: 1040px; }

.modal__body { padding: 18px; overflow-y: auto; }
.modal__body > .card,
.modal__body > .card--narrow { border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; }

body.modal-open { overflow: hidden; }

/* ---------- Panel wysuwany z prawej (drawer) ---------- */

.drawer { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }
.drawer[hidden] { display: none; }

.drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity .2s ease;
}
.drawer.is-visible .drawer__backdrop { opacity: 1; }

.drawer__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: var(--surface);
    box-shadow: -12px 0 44px rgba(15, 23, 42, .16);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
}
.drawer.is-visible .drawer__panel { transform: translateX(0); }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.drawer__title { margin: 0; font-size: 16px; font-weight: 600; }
.drawer__x { border: 0; background: none; font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; color: var(--muted); }
.drawer__x:hover { color: var(--text); }

.drawer__body { padding: 20px; flex: 1 1 auto; overflow-y: auto; }

@media (max-width: 560px) {
    .drawer__panel { max-width: 100%; }
}

/* ---------- Nakładka „przetwarzanie" ------------------ */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .38);
}

.overlay[hidden] { display: none; }

.overlay__spinner {
    width: 46px;
    height: 46px;
    border: 4px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: overlay-spin .75s linear infinite;
}

@keyframes overlay-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .overlay__spinner { animation-duration: 2s; }
}

/* ---------- Kalendarz (widok miesięczny) ----------------------- */

.cal__month { min-width: 170px; text-align: center; font-size: 16px; }

.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cal__dow {
    background: var(--bg);
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    text-align: center;
}
.cal__day {
    background: #fff;
    min-height: 108px;
    /* Bez tego siatka i tak rozciągała kolumnę do szerokości najdłuższego
       nieprzełamywalnego napisu wydarzenia (domyślne min-width:auto elementu
       siatki) — .cal__event ma już text-overflow:ellipsis, ale nie miał jak
       zadziałać, skoro sama komórka rosła zamiast obcinać. */
    min-width: 0;
    padding: 4px 5px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cal__day.is-out { background: var(--bg); }
.cal__day.is-off { background: #f7e9e7; }
/* Sobota bez święta — jasnoniebieski, żeby odróżnić od świąt/niedziel
   (czerwone .is-off); jeśli w sobotę wypada święto, kontroler w ogóle nie
   ustawia isSaturday (patrz CalendarController), więc tu zawsze wygrywa
   .is-off. */
.cal__day.is-saturday { background: #e7f0f7; }
.cal__day.is-saturday .cal__daynum { color: var(--info); }
.cal__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

.cal__daynum {
    align-self: flex-start;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    border-radius: 50%;
}
.cal__day.is-out .cal__daynum { color: var(--muted); }
.cal__day.is-off .cal__daynum { color: var(--danger-d); }
.cal__daynum:hover { background: var(--accent); color: #fff; }

.cal__events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cal__event {
    display: block;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1.35;
    border-radius: 4px;
    border: 1px solid var(--accent-light);
    background: var(--rose-light);
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal__event:hover { filter: brightness(0.96); }
.cal__event.is-multi { border-radius: 3px; }
.cal__time { font-weight: 700; margin-right: 4px; }
/* Prefiks statusu „Rezerwacja" na zleceniu w kalendarzu (patrz
   CalendarController::orderEvents()) — mały kolorowy chip PRZED nazwą,
   niezależny od tła całego wydarzenia (kolor rodzaju zlecenia). */
.cal__event-status {
    display: inline-block;
    padding: 0 4px;
    margin-right: 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(15, 23, 42, .08);
    color: var(--muted);
}

.cal__wd { display: none; } /* nazwa dnia tygodnia przy numerze — widoczna tylko w widoku listy (telefon) */

/* Miesiąc na telefonie (jak w Przybyle): siatka 7×6 jest za ciasna — zamiast niej
   pionowa lista, jeden dzień pod drugim, na pełną szerokość. Dni spoza miesiąca
   ukryte; nazwa dnia tygodnia (.cal__wd) przy dacie, bo nagłówek pn–nd znika. */
@media (max-width: 720px) {
    .cal__grid {
        display: block;
        background: none;
        border: none;
        border-radius: 0;
    }
    .cal__dow { display: none; }
    .cal__day.is-out { display: none; }

    .cal__day {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        min-height: 0;
        padding: 10px 6px;
        border-bottom: 1px solid var(--border);
    }
    .cal__day.is-today { box-shadow: inset 3px 0 0 var(--accent); }

    .cal__daynum {
        flex: 0 0 auto;
        align-self: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 38px;
        min-width: 38px;
        height: auto;
        line-height: 1.2;
        padding: 4px 0;
        font-size: 15px;
        border-radius: 8px;
    }
    .cal__wd {
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    .cal__daynum:hover { background: none; color: inherit; }
    .cal__day.is-today .cal__daynum { background: var(--accent); color: #fff; }

    .cal__events { flex: 1 1 auto; min-height: 22px; justify-content: center; }
    .cal__event {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 12px;
        padding: 3px 8px;
    }
}

/* ---------- Kalendarz (widok roczny) — 12 mini-kalendarzy, 3 w linii --- */

.ycal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
}
@media (max-width: 900px) {
    .ycal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ycal { grid-template-columns: 1fr; }
}

.mcal__month { font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.mcal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.mcal__dow {
    background: var(--bg);
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    padding: 3px 0;
}
.mcal__day {
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 30px;
    padding: 3px 0 6px;
    text-decoration: none;
    cursor: pointer;
}
.mcal__day.is-out { background: var(--bg); }
.mcal__day.is-off { background: #f7e9e7; }
.mcal__day.is-saturday { background: #e7f0f7; }
.mcal__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.mcal__day:hover { box-shadow: inset 0 0 0 1px var(--accent); }

.mcal__num { font-size: 10px; font-weight: 700; color: var(--text); }
.mcal__day.is-out .mcal__num { color: var(--muted); }
.mcal__day.is-off .mcal__num { color: var(--danger-d); }
.mcal__day.is-saturday .mcal__num { color: var(--info); }

/* Pasek zajętości pod numerem dnia — ten sam wzorzec co mini-kalendarz na
   pulpicie (.mini-cal__dot), zamiast małej, słabo widocznej kropki. */
.ycal__dot {
    position: absolute;
    bottom: 2px;
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
}
.mcal__day.is-today .ycal__dot { background: #fff; box-shadow: 0 0 0 1px var(--accent); }

/* ---------- Lista wydarzeń dnia (szczegóły dnia w kalendarzu) ---- */

.daylist { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.daylist__item { display: flex; gap: 10px; }
.daylist__dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.daylist__body { min-width: 0; }
.daylist__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.daylist__when { font-weight: 700; font-size: 13px; white-space: nowrap; color: var(--muted); }
.daylist__title { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; }
.daylist__title:hover { text-decoration: underline; }
.daylist__desc { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Wąskie ekrany ----------------------------- */

@media (max-width: 820px) {
    .topbar__toggle { display: block; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

    .sidebar.is-open { transform: translateX(0); }
}

/* Link "powrót" nad nagłówkiem strony (np. szczegóły zlecenia) — zwykły,
   dyskretny tekst, nie przycisk. */
.back-link {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.back-link:hover { color: var(--accent); }

/* ---------- Nagłówek strony (np. Klienci) ----------------- */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-head__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head__title { margin: 0; font-size: 19px; }
.page-head__subtitle { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- Lista Klientów: komórka "Klient" + widok kart --- */

/* Kolumny mieszczą się bez przewijania, a poniżej 720px tabela i tak znika
   na rzecz .client-cards — poziomy scroll z .table-wrap tu niepotrzebny. */
.client-table-wrap { overflow: visible; }

/* Wyjątek: tabela Umowa (Nr umowy + Szablon + Status obu stron + do 4 ikon
   akcji) bywa szersza niż karta zlecenia — bez poziomego scrolla wiersz
   wychodził poza kontener karty zamiast się zawinąć/przewinąć. */
.contracts-table-wrap { overflow-x: auto; }

/* Te same tabele (Lokalizacji: Godzina/Nazwa/Adres i Pakietu usług:
   Usługa/Opis) w szczegółach zlecenia (panel) i publicznym podglądzie
   klienta (ClientPortal) — karty siedzą w węższej kolumnie .detail-grid__stack,
   więc długi adres/opis bywa szerszy niż karta. Zamiast poziomego scrolla
   (jak przy Umowie wyżej) komórki się zawijają — adres/opis to zwykle jedna
   dłuższa fraza, czytelniej ją zawinąć niż przewijać całą tabelę. Komórka
   mobilna zostaje bez zmian (.client-cards poniżej 720px, jak wszędzie indziej). */
.locations-table-wrap .table td,
.package-items-table-wrap .table td { white-space: normal; }

.client-cell { display: flex; align-items: center; gap: 10px; }

/* Druga, dyskretna linia pod główną wartością komórki (np. data + "X dni
   temu" w kolumnie Ostatnia aktywność) — generyczne, wielokrotnego użytku. */
.cell-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Grupa akcji Edytuj/Usuń (lista Klientów, tabela i karty mobilne) — stały
   odstęp między ikonami niezależny od gapu rodzica. */
.row-actions { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Karta „Umowa" w szczegółach zlecenia (widok mobilny) potrafi mieć 4-5
   ikon na wiersz (wypowiedzenie/podpisy/wyślij/pobierz/usuń) — za dużo na
   wąski ekran obok nazwy w .client-card__top. Zamiast wypychać poza kartę,
   ten wariant stoi jako WŁASNY, pełnej szerokości wiersz POD nazwą (patrz
   Orders/show.php) i swobodnie zawija się na kolejne linie. */
.row-actions--wrap { flex-wrap: wrap; width: 100%; flex-shrink: 1; gap: 8px; margin-top: 2px; }
.client-cell__name { font-weight: 600; }
.client-cell__email { font-size: 12px; color: var(--muted); }

.client-cards { display: none; flex-direction: column; gap: 10px; }

.client-card {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--surface);
    transition: background .14s ease;
}
.client-card[data-href], .client-card[data-drawer-row] { cursor: pointer; }
.client-card[data-href]:hover, .client-card[data-drawer-row]:hover { background: var(--bg); }
.client-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
/* Nazwa/e-mail w nagłówku karty mogą się zwężać i zawijać (min-width:0 —
   domyślnie flex-item nie schodzi poniżej szerokości treści), żeby długi
   e-mail nie wypychał ikon akcji (.row-actions) poza kartę. */
.client-card__top > .client-cell { flex: 1 1 auto; min-width: 0; }
.client-card__top > .client-cell > div { min-width: 0; }
.client-card__top .client-cell__name,
.client-card__top .client-cell__email { overflow-wrap: anywhere; }
.client-card__meta { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.client-card__meta > div { display: flex; justify-content: space-between; gap: 10px; }
.client-card__meta dt { color: var(--muted); font-weight: 400; }
.client-card__meta dd { margin: 0; font-weight: 500; }

@media (max-width: 720px) {
    .client-table-wrap { display: none; }
    .client-cards { display: flex; }
    .list-toolbar__actions { width: 100%; margin-left: 0; }
    .list-toolbar__select { width: 100%; }

    /* Telefon: przyciski nagłówka strony i sekcji kart (Edytuj, Dodaj…,
       Wgraj pliki…) na całą szerokość, każdy w swojej linii. Wyjątek:
       „Wyślij link podglądu" + „Informacja o zleceniu" dzielą jedną linię
       ~80/20 (szczegóły zlecenia). */
    .page-head__actions { width: 100%; }
    .list-toolbar__actions { flex-wrap: wrap; }
    .page-head__actions > .btn,
    .page-head__actions > form,
    .list-toolbar__actions > .btn,
    .list-toolbar__actions > form { flex: 1 1 100%; }
    .page-head__actions > form .btn,
    .list-toolbar__actions > form .btn { width: 100%; }
    /* Wszystkie przyciski nagłówka strony (Dodaj rezerwację/zlecenie/
       klienta…) i sekcji (Kartoteka klienta, Dodaj notatkę/koszt, Edytuj
       lokalizację…) tej samej wysokości co .btn--tall. */
    .page-head__actions > .btn,
    .page-head__actions > form .btn,
    .list-toolbar__actions > .btn,
    .list-toolbar__actions > form .btn { padding: 16px 20px; font-size: 15px; }
    /* Przyciski pod formularzami (Zapisz/Anuluj/Usuń — strony i modale)
       i szybkie akcje pulpitu — analogicznie: pełna szerokość, wysokość
       .btn--tall. Modal potwierdzenia (.form__actions--confirm) zostaje
       z dwoma przyciskami obok siebie. */
    .form__actions:not(.form__actions--confirm) > .btn,
    .form__actions:not(.form__actions--confirm) > form { flex: 1 1 100%; margin-left: 0; }
    .form__actions:not(.form__actions--confirm) > form .btn { width: 100%; }
    .form__actions .btn,
    .quick-actions__btn { padding: 16px 20px; font-size: 15px; }
    /* Przycisk wstawiony wprost w .page-head (bez .page-head__actions —
       Użytkownicy, Klienci, Kalendarz, podglądy w Ustawieniach) i przyciski
       pustego stanu listy („Dodaj pierwszego…") — tak samo. */
    .page-head > .btn,
    .empty-state .btn { width: 100%; padding: 16px 20px; font-size: 15px; }
    .page-head__actions > .page-head__share { flex: 4 1 0; min-width: 0; }
    .page-head__actions > .page-head__info { flex: 1 1 0; min-width: 0; }
}

/* ---------- Pusty stan (np. brak klientów / brak wyników) --- */

.empty-state {
    text-align: center;
    padding: 48px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.empty-state__title { margin: 0; font-size: 16px; font-weight: 600; }
.empty-state__text { margin: 0 0 10px; color: var(--muted); font-size: 14px; }

/* ---------- Datepicker (dd.mm.rrrr) — port z SMOK-a/Przybył 2026 ---- */

.dp-field { position: relative; display: block; }
.dp-field .dp__input { padding-right: 36px; }

.dp__toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 0 6px 6px 0;
}

.dp__toggle:hover { color: var(--accent); }
.dp__toggle svg { width: 16px; height: 16px; }

.dp {
    position: absolute;
    z-index: 150;
    width: 250px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    user-select: none;
}

.dp__head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }

.dp__title {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    text-transform: capitalize;
}

.dp__nav {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--muted);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.dp__nav:hover { background: var(--bg); color: var(--text); }

.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }

.dp__dow {
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 2px 0 4px;
}

.dp__day {
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.dp__day:hover:not(:disabled) { background: var(--bg); }
.dp__day.is-out { color: #b7bec8; }
.dp__day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.dp__day.is-sel { background: var(--accent); color: #fff; }
.dp__day:disabled { color: #cfd4dc; cursor: default; }

/* ---------- Podpowiedź tagów w edytorze Quill (np. szablon wiadomości
   potwierdzenia wpłaty) — wpisanie "{{" otwiera listę pasujących tagów. --- */
.tag-suggest {
    position: absolute;
    z-index: 150;
    width: 280px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.tag-suggest__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
}
.tag-suggest__item:hover,
.tag-suggest__item.is-active { background: var(--bg); }
.tag-suggest__key { font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent); font-weight: 600; }
.tag-suggest__label { font-size: 12px; color: var(--muted); }

/* ---------- Pole podpisu (canvas) — podpisywanie umowy na miejscu ---- */
.signature-pad-wrap {
    position: relative;
    border: 1px solid #dad2c4;
    border-radius: var(--radius-sm);
    background: #fff;
    /* max-width (nie max-height na samym canvasie) — ogranicza szerokość,
       więc aspect-ratio niżej trzyma się cały czas TYCH SAMYCH proporcji;
       ograniczanie tylko wysokości złamałoby proporcje na szerokich
       ekranach (szerokość zostałaby 100%, wysokość ucięta osobno). */
    max-width: 700px;
    /* Przy szybkim przesuwaniu palcem podczas rysowania podpisu przeglądarka
       potrafiła "złapać" to jako zaznaczanie tekstu (niebieskie podświetlenie)
       — user-select:none to wyłącza, -webkit-touch-callout:none dodatkowo
       blokuje menu kontekstowe z długiego przytrzymania na iOS. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
/* Stałe proporcje (nie sztywna wysokość w px) — inaczej canvas wychodził
   szeroki i niski na komputerze, ale prawie kwadratowy na telefonie
   w pionie (bo szerokość jest elastyczna, a wysokość była na sztywno
   220px). Podpis narysowany w takim "kwadratowym" polu, po wstawieniu do
   PDF w stałej szerokości (App\Core\Pdf\ContractRenderer::renderSignatures,
   które zachowuje oryginalne proporcje obrazka), wychodził nienaturalnie
   wysoki/ściśnięty względem typowego, szerokiego pola podpisu. */
.signature-pad { display: block; width: 100%; aspect-ratio: 3 / 1; }

/* "Pełny ekran" TYLKO samego pola podpisu (nie całej karty) — głównie CSS
   (position:fixed), plus PRÓBA natywnego Fullscreen API (JS w
   contract_sign.php — działa na Androidzie, chowa pasek adresu; Safari na
   iPhonie go nie wspiera dla zwykłych elementów, więc tam liczy się
   wyłącznie ten CSS). Bez osobnego przycisku: na telefonie (≤720px) obrót
   ekranu w poziom SAM włącza ten tryb (nasłuch na matchMedia orientation/
   resize), obrót z powrotem w pion go wyłącza — w pionie pole jest wręcz
   ukryte (patrz #signature-rotate-hint). Na komputerze/tablecie ta klasa
   nigdy się nie włącza, pole zostaje zwykłe, inline. W trybie
   pełnoekranowym wrap wypełnia cały ekran z zapasem (padding), a canvas
   jest wycentrowany i ograniczony przez min(92vw, 264vh) — przy
   aspect-ratio 3:1 to daje maks. ok. 88vh wysokości. */
body.signature-fullscreen-lock { overflow: hidden; }
.signature-pad-wrap.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 500;
    max-width: none;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
/* Telefon poziomo — pole na prawie cały ekran (bez stałych proporcji 3:1); obrazek do PDF i tak
   wychodzi 3:1 — exportSignature() w contract_sign.php wycina sam podpis i centruje go. */
.signature-pad-wrap.is-fullscreen .signature-pad {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    aspect-ratio: auto;
}
/* Na pełnym ekranie białe pole na białym tle nie miało widocznej granicy —
   szare tło wokół + wyraźna ramka samego canvasu. Tło canvasu jest tylko
   CSS-owe, toDataURL() dalej daje przezroczysty PNG (PDF bez zmian).
   outline, nie border — border zmniejszyłby obszar rysowania względem
   getBoundingClientRect() i przesunął kreskę względem palca. */
.signature-pad-wrap.is-fullscreen { background: #e9edf0; }
.signature-pad-wrap.is-fullscreen .signature-pad {
    background: #fff;
    outline: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* "Tu się podpisz" — znika po pierwszym dotknięciu/kliku w pole (JS).
   pointer-events:none, żeby sam napis nie przechwytywał dotyku/kliknięcia
   przeznaczonego dla canvasu pod spodem. */
.signature-pad__placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--muted);
    font-size: 14px;
    pointer-events: none;
}

/* Klawisz czyszczenia podpisu W ROGU pola — widoczny TYLKO na pełnym
   ekranie (telefon w poziomie), żeby nie trzeba było obracać telefonu
   z powrotem do pionu tylko po to, żeby dotrzeć do zwykłego przycisku
   "Wyczyść podpis" pod polem (ten w normalnym widoku zostaje zakryty przez
   pełnoekranowe pole). W zwykłym, niepełnoekranowym widoku ukryty — tam
   zwykły przycisk pod polem jest i tak od razu dostępny. */
.signature-pad__clear { display: none; }
.signature-pad-wrap.is-fullscreen .signature-pad__clear {
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: 16px;
    background: #fff;
    border-color: #dad2c4;
}

/* Podgląd podpisu — zastępuje (wtedy ukryte) pole na telefonie w pionie, pod
   podpowiedzią "obróć telefon". Stały kadr, tych samych proporcji co pole
   podpisu — czy to gotowy podpis, czy (jeszcze) pusty kadr z "Brak podpisu"
   (wyśrodkowane w obu osiach), żeby po powrocie z pełnoekranowego rysowania
   w poziomie coś zawsze było widać zamiast pustki. */
.signature-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    aspect-ratio: 3 / 1;
    border: 1px solid #dad2c4;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--muted);
    font-size: 14px;
}
.signature-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Reguły autora ("display: flex"/"display: block" wyżej) nadpisują wbudowane
   [hidden]{display:none} przeglądarki, niezależnie od specyficzności (reguły
   autora zawsze biją reguły przeglądarki, nawet przy tej samej lub niższej
   specyficzności) — bez tych dwóch linii JS ustawiał hidden poprawnie na obu
   elementach, ale i kontener podglądu, i sam obrazek były i tak zawsze
   widoczne, więc "Wyczyść podpis" (i przełączanie orientacji) wizualnie nic
   nie zmieniało. */
.signature-preview[hidden] { display: none; }
.signature-preview img[hidden] { display: none; }

/* Wyśrodkowane "Wyczyść podpis"/"Zatwierdź podpis" na wąskim telefonie
   w pionie — na szerszych ekranach (i w poziomie) zostają jak wszędzie
   indziej w panelu (Wyczyść po lewej, Zatwierdź przez .btn--right po prawej). */
@media (max-width: 720px) and (orientation: portrait) {
    #signature-actions { justify-content: center; }
    #signature-actions .btn--right { margin-left: 0; }
}

/* ---------- Ustawienia → Kalendarz Google: instrukcja krok po kroku ---- */
.gcal-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.gcal-steps a { color: var(--accent); }

/* ---------- Oferty: formularz nowej oferty ---------------------------- */
/* Sekcja wysyłki (e-mail + pliki) rozwija się po zaznaczeniu „Wyślij ofertę" —
   czysty CSS (:has), jak „Drugi zamawiający" w Klientach. */
.offer-send-fields { display: none; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.offer-form:has(#offer-send:checked) .offer-send-fields { display: flex; }
.offer-files { display: flex; flex-direction: column; gap: 6px; }
.offer-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.offer-file:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.offer-file input { flex-shrink: 0; width: 18px; height: 18px; }
.offer-file__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.offer-file__size { flex-shrink: 0; color: var(--muted); font-size: 13px; }
.offer-size { font-size: 13px; color: var(--muted); }
.offer-size.is-over { color: var(--danger-d); }
.offer-availability { margin: 0; }
.offer-availability ul { margin: 6px 0; padding-left: 20px; }
.offer-availability a { color: inherit; }
.offer-sent-list { margin: 0 0 10px; padding-left: 20px; font-size: 14px; }
/* Wybór pliku w formularzu (np. PDF oferty) — przycisk + nazwa wybranego pliku obok. */
.filepicker-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }

/* ---------- Szczegóły zlecenia: karta „Wiadomości" (historia wysłanych) ---- */
.order-messages { display: flex; flex-direction: column; gap: 8px; }
.order-message { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.order-message[open] { border-color: var(--accent-light); }
.order-message__head { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; cursor: pointer; list-style: none; }
.order-message__head::-webkit-details-marker { display: none; }
.order-message__subject { font-weight: 600; }
.order-message__meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.order-message__failed { color: var(--danger-d); }
.order-message .email-preview { margin: 0 14px 14px; }
.order-messages-card, .order-messages, .order-message { min-width: 0; max-width: 100%; }
.message-recipients { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Podgląd pliku na pełnym ekranie (aplikacja z ekranu głównego, app.js) ---- */
body.file-viewer-open { overflow: hidden; }
.file-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #111c1a; }
.file-viewer__bar {
    display: flex; align-items: center; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.file-viewer__title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-viewer__close { flex-shrink: 0; padding: 12px 20px; font-size: 15px; }
.file-viewer__body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; -webkit-overflow-scrolling: touch; }
.file-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.file-viewer__frame { width: 100%; height: 100%; border: 0; background: #fff; }
.file-viewer__loading { color: #cdd7e4; }
/* PDF rysowany przez PDF.js — strony jedna pod drugą, przewijane. */
.file-viewer__body--pages { display: block; padding: 8px; background: #3a4442; }
.file-viewer__page { display: block; margin: 0 auto 8px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.file-viewer__print { flex-shrink: 0; padding: 12px 16px; font-size: 15px; }
/* Druk z podglądu (gdy nie ma systemowego udostępniania pliku) — tylko strony
   dokumentu, każda na osobnej kartce, bez paska i reszty aplikacji. */
@media print {
    body.file-viewer-open > *:not(.file-viewer) { display: none !important; }
    body.file-viewer-open { overflow: visible; background: #fff; }
    .file-viewer { position: static; display: block; background: #fff; }
    .file-viewer__bar { display: none; }
    .file-viewer__body, .file-viewer__body--pages { display: block; overflow: visible; padding: 0; background: #fff; }
    .file-viewer__page { width: 100% !important; height: auto !important; margin: 0; box-shadow: none; page-break-after: always; break-after: page; }
    .file-viewer__img { max-width: 100%; max-height: none; }
}

/* ---------- Ustawienia → Powiadomienia (wybór zdarzeń push) ---- */
.push-prefs { display: flex; flex-direction: column; gap: 8px; }
.push-pref { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.push-pref:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.push-pref input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.push-pref__label { display: block; font-weight: 600; }
.push-pref__hint { display: block; font-size: 13px; color: var(--muted); }

/* ---------- Pulpit: karta „Wymaga uwagi" (App\Models\Attention) ---------- */
.attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px 24px; }
.attention__group { min-width: 0; }
.attention__title { margin: 0 0 8px; font-size: 14px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.attention__hint { font-size: 12px; font-weight: 400; color: var(--muted); }
.attention__count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--rose-light); color: var(--text); font-size: 12px; text-align: center; }
.attention__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.attention__list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; }
.attention__list li.attention__more { border: 0; padding: 0 10px; font-size: 13px; }
.attention__list a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.attention__list a:hover { color: var(--accent); }
.attention__meta { font-size: 13px; color: var(--muted); }
.attention__meta a { font-weight: 400; color: var(--accent); }
.attention__meta--warn { color: var(--warning); }
.attention__meta--bad { color: var(--danger-d); }
.attention__ok { margin: 0; color: var(--muted); }

/* Moduł „Pracownicy i urlopy" (port z SMOK) — kalendarz „Kto ma wolne w tym terminie", separator formularza. */
.form__sep { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.term-cal { max-width: none; }
.modal__dialog:has(.term-cal) { max-width: 760px; }

.mcal { margin-bottom: 16px; }
.mcal__month { font-weight: 700; font-size: 14px; margin: 0 0 6px; }

.mcal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
}

.mcal__dow {
    background: var(--bg);
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    padding: 3px 0;
}

.mcal__day {
    background: var(--surface);
    min-height: 56px;
    min-width: 0;
    padding: 2px 3px 3px;
}

.mcal__day.is-out { background: var(--bg); }
.mcal__day.is-off { background: #fdecec; }
/* Ramka = dni objęte urlopem/L4, dla którego otworzono ten podgląd. */
.mcal__day.in-req { box-shadow: inset 0 0 0 2px var(--accent); }

.mcal__num { font-size: 10px; font-weight: 700; color: var(--muted); }
.mcal__day.is-out .mcal__num { color: #b7bec8; }
.mcal__day.is-off .mcal__num { color: var(--danger-d); }

.mcal__names { display: flex; flex-direction: column; gap: 1px; margin-top: 1px; }

.mcal__name {
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcal__name--urlop { color: var(--primary); }
.mcal__name--l4    { color: var(--danger-d); }
.mcal__name--self  { font-weight: 700; text-decoration: underline; }


/* Tabela z zawijaniem tekstu (np. urlop dodatkowy w oknie „Pula") — długie
   opisy łamią się w komórce zamiast rozpychać okno; kolumna akcji bez łamania. */
.table--wrap td { white-space: normal; overflow-wrap: anywhere; }
.table--wrap th { white-space: nowrap; }
.table--wrap td.col-actions, .table--wrap th.col-actions { white-space: nowrap; overflow-wrap: normal; }
.table--wrap .col-nowrap { white-space: nowrap; overflow-wrap: normal; }
.col-nowrap-inline { white-space: nowrap; }

/* Formularz urlopu — wybór dni urlopu dodatkowego (checkboxy) */
.bonus-pick[hidden] { display: none; }
.bonus-pick__list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bonus-pick__item { align-items: flex-start; }
.bonus-pick__item input:disabled + span { opacity: .55; }
.bonus-pick__item[hidden] { display: none; }
/* Dzień z puli wykorzystany w całości — na szaro, bez możliwości zaznaczenia */
.bonus-pick__item.is-used { color: var(--muted); cursor: default; opacity: .6; }

/* Okno „Pula / urlop dodatkowy" — dzień wykorzystany w całości: wiersz na szaro */
.tag--used { background: var(--border); color: var(--muted); }
.table tr.is-used-row td { color: var(--muted); }
.table tr.is-used-row td:not(.col-actions) { opacity: .7; }

/* Finanse w szczegółach zlecenia (wpłaty / dodatkowe koszty) — nazwa i notatka
   zawijają się, żeby ikony akcji (potwierdź / edytuj / usuń) nie wychodziły
   poza kartę; data, kwota i ikony zostają w jednej linii. */
.payments-table-wrap .table td,
.extras-table-wrap .table td { white-space: normal; overflow-wrap: anywhere; }
.payments-table-wrap .table td:nth-child(2),
.payments-table-wrap .table td:nth-child(3),
.extras-table-wrap .table td:nth-child(2),
.extras-table-wrap .table td:nth-child(3),
.payments-table-wrap .table td.col-actions,
.extras-table-wrap .table td.col-actions { white-space: nowrap; overflow-wrap: normal; }
.payments-table-wrap .table td.col-actions .row-actions,
.extras-table-wrap .table td.col-actions .row-actions { gap: 6px; }
/* Widok kart (telefon): blok z nazwą obok ikon może się zwężać i zawijać. */
.client-card__top > div:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Karta pracownika — klawisze urlopów (Pula / urlop dodatkowy, + L4, + Urlop).
   Na telefonie: każdy na całą szerokość i wysoki jak Edytuj / Usuń (.btn--tall). */
.staff-leave-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) {
    .staff-leave-actions { flex-direction: column; }
    .staff-leave-actions > .btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 15px; }
    /* Strzałki roku urlopu (‹ ›) obok siebie po 50%, „Kalendarz PDF" pod nimi na całą
       szerokość (ogólna reguła .list-toolbar__actions > .btn dawałaby każdej osobny wiersz). */
    .list-toolbar__actions > .btn.staff-year-btn { flex: 1 1 40%; justify-content: center; padding: 16px 20px; font-size: 18px; }
}

/* =========================================================================
   TRYB CIEMNY (dark mode) — <html data-theme="dark">, wybór per użytkownik
   (menu użytkownika „Tryb ciemny" → POST /profile/wyglad; users.theme).
   Najpierw zmienne palety (terakota rozjaśniona, żeby była czytelna na ciemnym),
   potem elementy z jasnymi kolorami wpisanymi na sztywno.
   ========================================================================= */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:        #141312;
    --surface:   #1e1c1b;
    --border:    #34302d;
    --text:      #ece7e3;
    --muted:     #a59d97;

    --danger:    #e07a70;
    --danger-d:  #f09a91;
    --ok:        #6fb58d;
    --warning:   #d6a765;
    --info:      #7fb0d6;

    --primary:       #d98f87;   /* linki i akcenty tekstowe — jaśniejsza terakota */
    --primary-d:     #e8aaa3;
    --accent:        #b1665f;   /* wypełnione klawisze zostają w kolorze marki */
    --accent-d:      #9a564f;
    --accent-border: #c88b84;
    --accent-light:  #c88b84;
    --rose:          #6f3f3a;
    --rose-light:    #3a2724;
    --beige:         #3a3128;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
}
[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Pola formularzy, listy wyboru, wyszukiwarki */
[data-theme="dark"] .form__input,
[data-theme="dark"] .toolbar__input,
[data-theme="dark"] .combo__toggle,
[data-theme="dark"] .combo__panel,
[data-theme="dark"] .client-picker__results,
[data-theme="dark"] .pattern-panel,
[data-theme="dark"] .list-toolbar__search,
[data-theme="dark"] .topbar__search { background: #171514; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .form__input::placeholder,
[data-theme="dark"] .list-toolbar__search input::placeholder,
[data-theme="dark"] .topbar__search input::placeholder { color: #7d756f; }
[data-theme="dark"] .list-toolbar__search input,
[data-theme="dark"] .topbar__search input { background: transparent; color: var(--text); }
[data-theme="dark"] .form__input:disabled { background: #242120; color: var(--muted); }
[data-theme="dark"] .toolbar__input:focus { background: #1c1a19; }
[data-theme="dark"] .client-picker__item:hover { background: #2a2624; }
[data-theme="dark"] .rich-editor,
[data-theme="dark"] .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-container.ql-snow { background: #171514; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--text); }
[data-theme="dark"] .ql-snow .ql-fill { fill: var(--text); }
[data-theme="dark"] .ql-snow .ql-picker { color: var(--text); }

/* Tabele */
[data-theme="dark"] .table th { background: #262321; color: var(--text); }
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] .table tbody tr[data-href]:hover { background: #262321; }
[data-theme="dark"] mark { background: #4a3025; color: #f4d6c8; }

/* Paski narzędzi (segmentowe) */
[data-theme="dark"] .toolbar { background: #242120; border-color: var(--border); }
[data-theme="dark"] .toolbar__btn { background: linear-gradient(to bottom, #302c2a, #272422); color: var(--text); border-color: #3d3835; }
[data-theme="dark"] .toolbar__btn:hover { background: linear-gradient(to bottom, #3a3532, #302c2a); }
[data-theme="dark"] .toolbar__btn:active { background: linear-gradient(to bottom, #272422, #201d1c); }

/* Klawisze jasne (białe) */
[data-theme="dark"] .btn--ghost { background: #272422; border-color: #3d3835; color: var(--text); }
[data-theme="dark"] .btn--ghost:hover,
[data-theme="dark"] a.btn--ghost:hover { background: #302c2a; border-color: #4a4440; color: var(--text); }
[data-theme="dark"] .btn--ghost:active { background: #201d1c; }
[data-theme="dark"] .btn--icon:hover { background: #2c2826; border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn--icon:active { background: #242120; }
[data-theme="dark"] .pager__link:not(.is-active):hover { background: #2c2826; color: var(--text); border-color: var(--border); }

/* Alerty i baner aktualizacji */
[data-theme="dark"] .alert--success { background: #182b21; color: #9fd3b4; border-color: #2a4a38; }
[data-theme="dark"] .alert--info    { background: #172633; color: #a7cbe6; border-color: #27415a; }
[data-theme="dark"] .alert--error   { background: #3a201e; color: #f3aaa3; border-color: #5c302c; }
[data-theme="dark"] .alert--muted   { background: #242120; color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .alert--warning { background: #33291a; color: #e6c38f; border-color: #54432a; }
[data-theme="dark"] .update-banner  { background: #33291a; color: #e6c38f; }

/* Kalendarz (miesiąc, mini, roczny, podgląd terminu) */
[data-theme="dark"] .cal__day,
[data-theme="dark"] .mcal__day,
[data-theme="dark"] .mini-cal__day { background: var(--surface); }
[data-theme="dark"] .cal__day.is-out { background: #181615; }
[data-theme="dark"] .cal__day.is-off,
[data-theme="dark"] .mcal__day.is-off,
[data-theme="dark"] .mini-cal__day.is-off { background: #3a201e; }
[data-theme="dark"] .cal__day.is-saturday,
[data-theme="dark"] .mcal__day.is-saturday,
[data-theme="dark"] .mini-cal__day.is-saturday { background: #172633; }

/* Okna, menu, panel boczny (drawer), górny pasek */
[data-theme="dark"] .user-menu__panel,
[data-theme="dark"] .dropdown-menu__panel,
[data-theme="dark"] .modal__dialog,
[data-theme="dark"] .modal__head,
[data-theme="dark"] .drawer__panel,
[data-theme="dark"] .topbar { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .modal__backdrop,
[data-theme="dark"] .drawer__backdrop { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] .dp { background: var(--surface); border-color: var(--border); color: var(--text); }

/* Karty zleceń, podsumowania, plakietki */
[data-theme="dark"] .client-card[data-href]:hover,
[data-theme="dark"] .client-card[data-drawer-row]:hover { background: #242120; }
[data-theme="dark"] .finance-summary__item { background: #242120; border-color: var(--border); }
[data-theme="dark"] .tag--used { background: #2c2826; color: var(--muted); }
[data-theme="dark"] .avatar--logo { background: #fff; }
[data-theme="dark"] code { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .tab:hover,
[data-theme="dark"] .tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
/* Podgląd plików i dokumentów zostaje na białym (PDF, podpis, podgląd e-maila). */
[data-theme="dark"] .file-viewer__frame,
[data-theme="dark"] .file-viewer__page,
[data-theme="dark"] .signature-pad,
[data-theme="dark"] .signature-preview,
[data-theme="dark"] .email-preview { background: #fff; color: #18211f; }
/* Uwagi i historia wiadomości w zleceniu — w trybie ciemnym na ciemnym tle (kolory z edytora wyrównane do motywu, linki widoczne). */
[data-theme="dark"] .email-preview--themed { background: var(--surface); color: var(--text); }
[data-theme="dark"] .email-preview--themed *:not(a) { color: inherit !important; background-color: transparent !important; }
[data-theme="dark"] .email-preview--themed a, [data-theme="dark"] .email-preview--themed a * { color: var(--primary) !important; }

/* Karta pracownika — kafelki pul (Pula roczna, Urlop dodatkowy, Nadgodziny): każdy
   w ramce; „Pozostało" na ciemnozielonym tle z białym tekstem. Komputer: w jednym
   rzędzie; telefon: po dwa w rzędzie (pierwsze 2, pod spodem kolejne 2). */
.finance-summary--tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.finance-summary--tiles .finance-summary__item {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    min-width: 0;
}
.finance-summary--tiles .finance-summary__item--remaining { background: #1f5c3a; border-color: #1f5c3a; }
.finance-summary--tiles .finance-summary__item--remaining .finance-summary__label { color: rgba(255, 255, 255, .8); }
.finance-summary--tiles .finance-summary__item--remaining .finance-summary__value { color: #fff; }
/* Wartość ujemna (przekroczona pula) — pomarańczowe tło zamiast zielonego. */
.finance-summary--tiles .finance-summary__item--remaining:has(.finance-summary__value--warning) { background: #9a5a12; border-color: #9a5a12; }
@media (max-width: 720px) {
    .finance-summary--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-theme="dark"] .finance-summary--tiles .finance-summary__item--remaining { background: #1f5c3a; border-color: #2b7a4e; }
.finance-summary__sub { font-weight: 400; opacity: .85; }
/* Stronicowanie tabeli w przeglądarce (<tbody data-paginate="5">, app.js) — ukryte wiersze i pasek pod tabelą. */
.table tr[hidden] { display: none; }
.pager--local { margin-top: 10px; }
/* Stronicowanie kart (lista na telefon) — ukryte karty naprawdę znikają (styl .client-card
   ma display:block, który nadpisałby atrybut hidden); pasek kart tylko na telefonie,
   pasek tabeli z kartami obok (.client-table-wrap) — tylko na komputerze. */
.client-card[hidden] { display: none; }
.pager--cards { display: none; }
@media (max-width: 720px) {
    .client-table-wrap + .pager--local { display: none; }
    .pager.pager--cards { display: flex; }
}
/* Karta pracownika — lista urlopów przewijana: widać ok. 5 wpisów, dalsze w obrębie
   listy (nagłówek tabeli zostaje u góry). Komputer: tabela; telefon: karty. */
.table-wrap.leave-scroll { max-height: 340px; overflow-y: auto; }
.leave-scroll .table thead th { position: sticky; top: 0; z-index: 1; }
.client-cards.leave-scroll { max-height: 560px; overflow-y: auto; padding-right: 2px; }
/* Karty zamiast tabeli (widok na telefon, wszystkie listy) — wartości wyrównane do prawej
   krawędzi, także gdy zawijają się na kilka linii albo mają drugi, szary wiersz. */
.client-card__meta > div { align-items: baseline; }
.client-card__meta dt { flex-shrink: 0; }
.client-card__meta dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.client-card__meta dd .cell-sub { display: block; }
/* Lista zleceń, karta (telefon) — pasek realizacji pod nazwiskiem, jak pasek wpłat. */
.card-realization { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.card-realization__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card-realization .list-progress__bar { height: 6px; }
.card-realization__label { font-size: 11px; color: var(--muted); }
.card-realization .next-order-badge { flex-shrink: 0; }
.client-card__top > .client-cell > div { flex: 1 1 auto; } /* blok nazwy + pasek realizacji na całą szerokość */
/* Pasek realizacji pod całym wierszem karty zlecenia (pełna szerokość, nad danymi). */
.client-card > .card-realization { margin: -4px 0 12px; }
/* Karta (telefon) z akcjami na dole — np. Klienci: Edytuj / Usuń pod danymi, do prawej. */
.client-card__actions { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ===== Branża „Lokal" — sale i goście (formularz i szczegóły zlecenia) ===== */
.venue-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); }
.venue-rooms .form__check .color-dot { margin-right: 4px; }
.venue-conflicts { margin: 6px 0 8px; padding-left: 18px; }
.venue-conflicts li { margin: 2px 0; }
.venue-room-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== Ustawienia: zakładki ogólne / branżowe (firma z ≥ 2 branżami, Settings/_tabs.php) ===== */
.tabs-groups { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.tabs-groups .tabs { margin-bottom: 0; }
.tabs-group { padding: 8px 12px 0; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface); }
.tabs-group--industry { border-style: dashed; background: var(--bg); }
.tabs-group__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tabs-group__hint { font-weight: 500; text-transform: none; letter-spacing: 0; }
.tabs-group .tabs { border-bottom: 0; }
.tab__industry { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

/* ===== Ikona branży zlecenia (firma z ≥ 2 branżami — lista zleceń) ===== */
.col-industry { width: 44px; padding-right: 0 !important; text-align: center; }
.industry-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); vertical-align: middle; }
.client-card__meta .industry-icon { margin-right: 4px; }

/* ===== Branża „Lokal" — menu (Ustawienia → Dania / Menu, karta „Menu" zlecenia) ===== */
.dish-group__title { margin-top: 14px; }
.menu-sections td { vertical-align: top; }
.menu-section__head { display: flex; gap: 10px; align-items: flex-end; }
.menu-section__head > .form__input { flex: 1 1 auto; }
.menu-section__choose { display: flex; flex-direction: column; gap: 2px; width: 96px; flex: 0 0 96px; }
.menu-section__dishes { margin-top: 8px; }
.menu-section__dishes summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.menu-section__group { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin: 6px 0; }
.menu-section__cat { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 4px; }
.menu-list { display: flex; flex-direction: column; gap: 10px; }
.menu-list__item { border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 12px 14px; }
.menu-list__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.menu-list__sections { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.menu-pick { display: flex; flex-direction: column; gap: 8px; }
.menu-pick__item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); cursor: pointer; }
.menu-pick__item span { display: flex; flex-direction: column; gap: 2px; }
.menu-choice { border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 10px 12px; margin-bottom: 10px; }
.menu-choice__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.menu-choice__dish { padding: 2px 0; }
.menu-choice__dish.is-included { color: var(--muted); }
.menu-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }
.menu-summary__name { font-weight: 700; }
.diet-list { margin: 0; padding-left: 18px; }
.diet-portions { width: 90px; }

/* ===== Branża „Lokal" — harmonogram i podwykonawcy (karta zlecenia, modale) ===== */
.schedule-time { width: 120px; }
.schedule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.schedule-list li { display: flex; gap: 12px; }
.schedule-list__time { flex: 0 0 48px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vendor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vendor-list .tag { margin-right: 6px; }

/* ===== Branża „Lokal" — cennik sezonowy menu (Ustawienia → Menu) ===== */
.menu-price__grid { display: grid; grid-template-columns: 2fr repeat(2, 1fr) repeat(2, 90px); gap: 8px; align-items: end; }
.menu-price__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-price__days { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.menu-list__prices { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .menu-price__grid { grid-template-columns: 1fr 1fr; } .menu-price__grid > .form__input { grid-column: 1 / -1; } }

/* ===== Branża „Lokal" — organizacja imprezy: plan stołów, obsługa, noclegi ===== */
.table-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.table-plan__item { border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 8px 10px; }
.table-plan__item.is-over { border-color: var(--danger); }
.table-plan__name { font-weight: 700; }
.table-plan__head { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 6px; }
.table-plan__head > .form__input { flex: 1 1 auto; }
.table-plan__seats { display: flex; flex-direction: column; gap: 2px; width: 90px; flex: 0 0 90px; }
.table-plan__guests { width: 100%; resize: vertical; font-size: 13px; }

/* ===== Modal na pełną szerokość obok menu bocznego ([data-modal-full], np. harmonogram imprezy) =====
   Okno zaczyna się za menu (234px) — nie nachodzi na nie; na telefonie (menu wysuwane) cała szerokość. */
.modal--full { padding-left: calc(234px + 16px); padding-right: 16px; }
.modal--full .modal__dialog { max-width: none; }
@media (max-width: 820px) { .modal--full { padding-left: 16px; } }

/* ===== Umowy — branże szablonu (Ustawienia → Umowy, firmy z ≥ 2 branżami) ===== */
.contract-industries { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.contract-industries .industry-icon { vertical-align: -3px; }
.contract-industry-icons { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }

/* Ustawienia → Dania: ostatni wiersz kategorii bez dolnej linii — inaczej z górną linią nagłówka
   następnej kategorii (.form__subhead) dawał podwójną kreskę. */
.dish-group__table tbody tr:last-child td { border-bottom: 0; }

/* ===== Lokal — tabele wierszy w modalach (obsługa, noclegi, harmonogram, podwykonawcy) =====
   Stałe szerokości kolumn i pola, które mogą się zwężać — bez tego pola (zwłaszcza godziny)
   wychodziły poza swoją kolumnę i nachodziły na sąsiednie. */
.event-rows { table-layout: fixed; width: 100%; }
.event-rows th, .event-rows td { white-space: normal; padding-left: 6px; padding-right: 6px; vertical-align: top; }
.event-rows .form__input { min-width: 0; width: 100%; }
.event-rows th.col-drag, .event-rows td.table__drag { width: 30px; }
.event-rows th.col-actions, .event-rows td.col-actions { width: 50px; }
.event-rows .schedule-time { width: 120px; }
.event-rows .diet-portions { width: 80px; }
.event-rows--staff th:nth-child(2) { width: 28%; }
.event-rows--staff th:nth-child(3) { width: 16%; }
.event-rows--lodging th:nth-child(2) { width: 15%; }
.event-rows--lodging th:nth-child(4) { width: 22%; }
.event-rows--lodging th:nth-child(5), .event-rows--lodging th:nth-child(6) { width: 150px; }
.event-rows--schedule th:nth-child(3) { width: 40%; }
.event-rows--vendors th:nth-child(2) { width: 13%; }
.event-rows--vendors th:nth-child(3) { width: 20%; }
.event-rows--vendors th:nth-child(4) { width: 14%; }
.event-rows--vendors th:nth-child(5) { width: 18%; }
@media (max-width: 820px) {
    /* Telefon: tabela przewija się w poziomie zamiast ściskać pola. */
    .event-rows { min-width: 760px; }
}
/* …oraz pierwszy nagłówek kategorii zaraz pod paskiem „Dania / Dodaj danie" (pasek ma już dolną linię). */
.list-toolbar + .dish-group__title { border-top: 0; padding-top: 4px; }


/* Podpowiedzi rozwijane z pola (.ac) — np. kategoria dania w Ustawienia → Dania. */
.ac { position: relative; }
.ac__list { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20; max-height: 220px; overflow-y: auto;
            background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); padding: 4px 0; }
.ac__item { padding: 7px 12px; cursor: pointer; font-size: 14px; }
.ac__item:hover, .ac__item.is-active { background: var(--bg); color: var(--accent); }

/* Ustawienia → Menu: blok kategorii dań (zaznacz dania do menu + ile wybiera klient). */
.menu-cat__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.menu-cat__choose { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.menu-cat__choose .form__input { width: 76px; min-height: 34px; padding: 5px 8px; }
.menu-cat.is-empty td { opacity: .55; }
.menu-cat.is-empty .menu-cat__choose { visibility: hidden; }

/* Ustawienia → Menu: grupa dań w części menu z „klient wybiera" (np. Mięso 2 z 3, Warzywa — wszystkie). */
.menu-group { border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 6px; }
.menu-group:first-of-type { border-top: 0; }
.menu-group__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.menu-group__choose { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.menu-group__choose .form__input { width: 70px; min-height: 32px; padding: 4px 8px; }
.menu-group.is-empty .menu-group__choose { visibility: hidden; }
.menu-group.is-empty .menu-section__cat { opacity: .6; }

/* Menu na zleceniu / w portalu: część („Obiad") z grupami (Mięso, Warzywa…) — każda grupa z własnym „wybierz N". */
.menu-choice-section { margin-bottom: 14px; }
.menu-choice-section__name { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.menu-choice-section .menu-choice { margin-left: 10px; }
.menu-summary__group { font-size: 13.5px; margin-top: 2px; }

/* ===== Listy wyboru (select) — jednakowa wysokość we wszystkich przeglądarkach =====
   Safari rysuje natywny <select> po swojemu (niski, ignoruje padding/min-height) — wyłączamy
   wygląd natywny i dorysowujemy własną strzałkę; wysokość jak pozostałe pola (.form__input). */
select.form__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 39px;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2367707b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px 14px;
    cursor: pointer;
}
select.form__input[multiple], select.form__input[size]:not([size="1"]) { background-image: none; padding-right: 10px; }
select.form__input::-ms-expand { display: none; }
[data-theme="dark"] select.form__input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a39a92' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px 14px;
}

/* ---------- Pulpit — lista startowa „Pierwsze kroki" (Onboarding) ---------- */
.onb, .onb-mini { --onb-ok: var(--ok); }
.onb .btn--sm, .onb-mini .btn--sm { min-height: 30px; padding: 4px 12px; font-size: 13px; }
.onb {
    position: relative; overflow: hidden; margin-bottom: 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.onb::before { /* delikatna poświata w kolorach marki */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; pointer-events: none;
    background: radial-gradient(120% 140% at 0% 0%, var(--rose-light) 0%, transparent 60%),
                radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--beige) 55%, transparent) 0%, transparent 65%);
}
.onb__head { position: relative; display: flex; gap: 18px; align-items: center; padding: 22px 22px 16px; }
.onb__ring { position: relative; flex: 0 0 64px; width: 64px; height: 64px; }
.onb__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.onb__ring circle { fill: none; stroke-width: 6; }
.onb__ring-bg { stroke: color-mix(in srgb, var(--border) 80%, transparent); }
.onb__ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .7, .2, 1); }
.onb__ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.onb__intro { flex: 1 1 auto; min-width: 0; }
.onb__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.onb__title { margin: 2px 0 4px; font-size: 19px; line-height: 1.25; }
.onb__lead { margin: 0; color: var(--muted); font-size: 13.5px; }
.onb__hide { align-self: flex-start; margin: 0; }

.onb__steps { position: relative; list-style: none; margin: 0; padding: 4px 14px 10px; display: grid; gap: 6px; }
.onb-step {
    display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center;
    padding: 12px 12px; border-radius: var(--radius-md); border: 1px solid transparent;
    transition: background .2s, border-color .2s, transform .2s;
}
.onb-step:hover { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.onb-step.is-next { background: color-mix(in srgb, var(--rose-light) 45%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.onb-step__mark {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-size: 13px; font-weight: 700; color: var(--muted);
    border: 2px solid var(--border); background: var(--surface);
}
.onb-step.is-next .onb-step__mark { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.onb-step.is-done .onb-step__mark { color: #fff; background: var(--onb-ok); border-color: var(--onb-ok); animation: onb-pop .35s ease-out; }
.onb-step__mark svg { width: 16px; height: 16px; }
.onb-step__title { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.onb-step.is-done .onb-step__title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.onb-step__text { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.onb-step.is-done .onb-step__text { display: none; }
.onb-step__level { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; text-decoration: none; }
.onb-step__level--required    { color: var(--accent-d); background: var(--rose-light); }
.onb-step__level--recommended { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.onb-step__level--optional    { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.onb-step__state { font-size: 12.5px; font-weight: 600; color: var(--onb-ok); }
.onb-step__cta { white-space: nowrap; }

.onb__foot {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 22px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 60%, var(--surface));
    font-size: 13px; color: var(--muted);
}
.onb__foot.is-ready { color: var(--text); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.onb__foot .btn[disabled] { opacity: .45; cursor: not-allowed; }

.onb-mini {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.onb-mini__bar { flex: 0 0 120px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.onb-mini__bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.onb-mini__text { flex: 1 1 auto; font-size: 13px; color: var(--muted); }

@keyframes onb-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .onb-step__mark, .onb__ring-fg { animation: none; transition: none; } }
@media (max-width: 640px) {
    .onb__head { flex-wrap: wrap; padding: 18px 16px 12px; }
    .onb__hide { order: -1; margin-left: auto; }
    .onb__title { font-size: 17px; }
    .onb__steps { padding: 4px 8px 8px; }
    .onb-step { grid-template-columns: 28px 1fr; gap: 10px; }
    .onb-step__mark { width: 28px; height: 28px; }
    .onb-step__cta, .onb-step__state { grid-column: 2; justify-self: start; }
    .onb__foot { padding: 12px 16px; }
    .onb__foot .btn { width: 100%; justify-content: center; }
    .onb-mini__bar { flex-basis: 70px; }
}
.onb-modal-hint { margin-bottom: 14px; }
/* Pierwsze kroki — „Wszystko gotowe" (zostały tylko kroki opcjonalne) */
.onb-finish { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 4px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--ok) 35%, var(--border)); }
.onb-finish__check { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); font-size: 13.5px; }
.onb-finish__check input { width: 18px; height: 18px; accent-color: var(--ok); flex: 0 0 auto; }
.onb-finish__check small { color: var(--muted); }
.onb-finish:has(input:not(:checked)) .btn { opacity: .55; }
@media (max-width: 640px) { .onb-finish .btn { width: 100%; justify-content: center; } }

/* ===================== Pracownia cukiernicza (branża „cukiernia") ===================== */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.segmented label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--muted); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix .form__input { padding-right: 34px; width: 100%; }
.input-suffix em { position: absolute; right: 10px; font-style: normal; font-size: 12px; color: var(--muted); pointer-events: none; }
.allergen-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
    color: #9a4f22; background: color-mix(in srgb, #e8a26b 22%, transparent); }
.chip { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text); text-decoration: none; background: var(--surface); }
.chip:hover { border-color: var(--accent-light); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag--info { background: var(--info); color: #fff; }

/* Ustawienia → Pracownia */
.bakery-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.bakery-fact { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: linear-gradient(135deg, color-mix(in srgb, var(--rose-light) 55%, var(--surface)), var(--surface)); }
.bakery-fact__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bakery-fact__value { font-size: 20px; font-weight: 700; }
.bakery-fact__value small { font-size: 13px; font-weight: 500; color: var(--muted); }
.bakery-fact__sub { font-size: 12px; color: var(--muted); }
.bakery-pricelists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bakery-pricelist { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.bakery-pricelist__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bakery-pricelist__head h3 { margin: 0; font-size: 14px; }
.bakery-pricelist__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.bakery-pricelist__items li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.bakery-pricelist__items li:last-child { border-bottom: 0; }
.bakery-pricelist__price { white-space: nowrap; font-weight: 600; }
.bakery-pricelist__empty { font-size: 13px; margin: 4px 0 8px; }

/* Kreator tortu */
.cake-builder__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.cake-builder__side { position: sticky; top: 0; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--rose-light) 40%, var(--surface)), var(--surface) 55%); }
.cake-suggest { display: flex; gap: 8px; align-items: center; }
.cake-suggest .input-suffix { flex: 0 0 120px; }
.cake-tiers { display: grid; gap: 8px; margin-bottom: 8px; }
.cake-tier { display: grid; grid-template-columns: 30px 110px 90px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cake-tier__num { width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--accent-light); }
.cake-tier__field { display: grid; gap: 3px; margin: 0; }
.cake-tier__field > span:first-child { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cake-tier__del { margin-bottom: 2px; }
.cake-decors { display: grid; gap: 6px; margin: 4px 0 8px; }
.cake-decor { display: grid; grid-template-columns: minmax(0, 1fr) 120px 100px auto; gap: 8px; align-items: center; }
.cake-preview { min-height: 150px; display: flex; align-items: flex-end; justify-content: center; padding: 8px 0; }
.cake-preview__stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cake-preview__tier { height: 34px; border-radius: 6px 6px 3px 3px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: var(--accent-d);
    background: linear-gradient(180deg, #fff8f2 0%, #f6e4d6 100%); border: 1px solid color-mix(in srgb, var(--accent-light) 60%, transparent);
    box-shadow: inset 0 6px 0 -2px color-mix(in srgb, #fff 80%, transparent), 0 2px 4px rgba(0,0,0,.06); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.cake-preview__tier span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.cake-preview__stand { width: 110%; height: 6px; margin-top: 2px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 35%, transparent); }
.cake-sum { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.cake-sum > div { display: flex; justify-content: space-between; gap: 8px; }
.cake-sum dt { color: var(--muted); }
.cake-sum dd { margin: 0; font-weight: 600; }
.cake-sum__total { padding-top: 8px; border-top: 1px solid var(--border); font-size: 16px; }
.cake-sum__total dd { color: var(--accent-d); font-weight: 800; }
.cake-sum__total s { color: var(--muted); font-weight: 400; font-size: 12px; }
.cake-sum__guests { font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-sm); }
.cake-sum__guests.is-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.cake-sum__guests.is-short { color: var(--danger-d); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.cake-sum__allergens { font-size: 12px; font-weight: 600; color: #9a4f22; }
.cake-sum__manual { margin: 0; }

/* Karty zlecenia cukierni */
.production-steps { display: flex; gap: 0; margin: 0 0 14px; padding: 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.production-step { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 0; border-radius: 999px;
    background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: background .2s, color .2s; }
.production-step:hover { color: var(--text); }
.production-step__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.production-step.is-reached .production-step__dot { background: var(--accent-light); }
.production-step.is-current { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: var(--shadow-sm); }
.production-step.is-current .production-step__dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.bakery-equipment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bakery-equipment .inline-form { display: inline-flex; align-items: center; gap: 6px; }
.cake-list { display: grid; gap: 10px; }
.cake-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.cake-item--portal { grid-template-columns: 56px minmax(0, 1fr); margin-top: 10px; }
.cake-item__mini { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 64px; }
.cake-item__mini span { height: 12px; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, #fff6ee, #f0d9c8); border: 1px solid color-mix(in srgb, var(--accent-light) 55%, transparent); }
.cake-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cake-item__tiers { margin: 4px 0; padding: 0; list-style: none; font-size: 13px; display: grid; gap: 2px; }
.cake-item__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.cake-item__meta .allergen-chip { margin-left: 0; }
.cake-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cake-item__price { font-weight: 800; font-size: 15px; white-space: nowrap; }
.empty-state--compact { padding: 18px 12px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.photo-grid--large { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.photo-grid__item { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg); font-size: 11px; text-align: center; color: var(--muted); text-decoration: none; }
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.photo-grid__item:hover img { transform: scale(1.05); }
.design-status--brak { background: var(--border); color: var(--muted); }
.design-status--do_akceptacji { background: var(--warning); color: #fff; }
.design-status--zaakceptowany { background: var(--ok); color: #fff; }
.design-status--poprawki { background: var(--danger); color: #fff; }
.design-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.design-upload__pick { cursor: pointer; }
.design-manual { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }

/* Portal — projekt i inspiracje */
.design-decision { display: grid; gap: 8px; margin-top: 8px; }
.design-decision__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inspiration-upload__drop { display: grid; place-items: center; gap: 4px; padding: 18px; text-align: center; cursor: pointer;
    border: 2px dashed color-mix(in srgb, var(--accent-light) 60%, var(--border)); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--rose-light) 30%, var(--surface)); transition: background .2s, border-color .2s; }
.inspiration-upload__drop:hover { background: color-mix(in srgb, var(--rose-light) 55%, var(--surface)); border-color: var(--accent); }
.inspiration-upload__drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Produkcja */
.prod-toolbar { flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.prod-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-range { display: flex; align-items: center; gap: 6px; }
.prod-range .form__input { width: 150px; }
.prod-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.prod-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 22px; }
.prod-summary__wide { grid-column: 1 / -1; }
.prod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.prod-list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.prod-summary__wide .prod-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 22px; }
.prod-orders { display: grid; gap: 8px; }
.prod-order { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px;
    border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius-md); }
.prod-order--w_produkcji { border-left-color: var(--warning); }
.prod-order--gotowe { border-left-color: var(--info); }
.prod-order--wydane { border-left-color: var(--ok); opacity: .7; }
.prod-order__time { display: flex; flex-direction: column; }
.prod-order__time strong { font-size: 17px; }
.prod-order__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-order__cake { font-size: 13px; }
.prod-order__status { display: flex; align-items: center; gap: 6px; margin: 0; }
.prod-order__status .form__input { width: 140px; }

@media (max-width: 900px) {
    .cake-builder__grid { grid-template-columns: 1fr; }
    .cake-builder__side { position: static; order: -1; }
    .cake-tier { grid-template-columns: 28px 1fr 1fr auto; }
    .cake-tier__field:nth-of-type(3), .cake-tier__field:nth-of-type(4) { grid-column: 2 / -1; }
}
@media (max-width: 640px) {
    .cake-decor { grid-template-columns: 1fr 1fr auto; }
    .cake-decor > input:first-child { grid-column: 1 / -1; }
    .cake-item { grid-template-columns: 48px minmax(0, 1fr); }
    .cake-item__side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .production-step { font-size: 11.5px; padding: 6px 4px; }
    .prod-order { grid-template-columns: 60px minmax(0, 1fr); }
    .prod-order__status { grid-column: 1 / -1; }
    .prod-range .form__input { width: 130px; }
}

/* HelpDesk — pomysły na rozwój programu (SU: wszystkie firmy; panel firmy: własne). */
.idea-list { display: flex; flex-direction: column; }
.idea { display: flex; align-items: flex-start; gap: 14px; padding: 14px 2px; border-top: 1px solid var(--border); }
.idea:first-child { border-top: 0; }
.idea__body { flex: 1 1 auto; min-width: 0; }
.idea__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.idea__company { font-weight: 700; color: var(--text); text-decoration: none; }
.idea__company:hover { text-decoration: underline; }
.idea__text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.idea__reply { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--primary); background: var(--bg); border-radius: 0 8px 8px 0; font-size: 13px; overflow-wrap: anywhere; }
.idea__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.idea--odrzucony .idea__text, .idea--zrealizowany .idea__text { color: var(--muted); }
.idea__preview { padding: 10px 12px; background: var(--bg); border-radius: 10px; margin-bottom: 14px; }
.tab__count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 11px; font-weight: 700; text-align: center; }
.tag--idea-nowy          { background: #fff4e0; color: #8a5a00; }
.tag--idea-zaakceptowany { background: #e3eefb; color: #1c4e80; }
.tag--idea-zrealizowany  { background: #1f7a44; color: #fff; }
.tag--idea-odrzucony     { background: #eceff3; color: #67707b; }
@media (max-width: 640px) {
    .idea { flex-direction: column; }
    .idea__actions { justify-content: flex-start; }
}

/* DJ / Zespół — harmonogram imprezy, muzyka (panel i portal klienta). */
.dj-table td { vertical-align: top; }
.dj-row__time { width: 110px; }
.dj-row__moment { width: 30%; }
.dj-row__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.dj-row__song { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dj-row__link { margin-top: 6px; }
.dj-songs + .dj-songs { margin-top: 10px; }
.dj-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dj-timeline__item { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); }
.dj-timeline__item:first-child { border-top: 0; }
.dj-timeline__time { flex: 0 0 52px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary); }
.dj-timeline__body { min-width: 0; }
.dj-timeline__song { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.dj-song-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.dj-song-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.dj-song-group__title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.dj-song-group ul { margin: 0; padding-left: 18px; font-size: 13px; }
.dj-song-group li { margin: 3px 0; overflow-wrap: anywhere; }
.dj-song-group__moment { font-weight: 600; }
.dj-song-group--dont { background: #fdf2f1; border-color: #f0d2cf; }
.dj-template { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
@media (max-width: 640px) {
    .dj-row__sub, .dj-row__song { grid-template-columns: 1fr; }
    .dj-row__time { width: 92px; }
}

/* DJ — przełączniki „co klient widzi w portalu" w karcie Muzyka (on / off). */
.dj-portal-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 10px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.dj-portal-toggles__label { font-size: 12px; font-weight: 600; color: var(--muted); }
.dj-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.dj-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dj-toggle__track { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; background: #c6ccd4; transition: background .15s; }
.dj-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.dj-toggle input:checked + .dj-toggle__track { background: var(--ok); }
.dj-toggle input:checked + .dj-toggle__track::after { transform: translateX(16px); }
.dj-toggle input:focus-visible + .dj-toggle__track { outline: 2px solid var(--primary); outline-offset: 2px; }
.dj-toggle:has(input:not(:checked)) > span:last-child { color: var(--muted); }

/* Fotografia — status „Czeka na odbiór" gotowych materiałów. */
.tag--pickup { background: #e3eefb; color: #1c4e80; font-weight: 700; }
/* Przycisk „Odebrano" (Fotografia) — nasz zielony. */
.btn--ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn--ok:hover { background: color-mix(in srgb, var(--ok) 85%, #fff); color: #fff; border-color: var(--ok); }

/* Okno „Status" zlecenia — statusy jako przyciski jeden pod drugim (kolor statusu z Ustawień). */
.status-pick { display: flex; flex-direction: column; gap: 8px; }
.status-pick__btn { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start; text-align: left; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.status-pick__btn:hover { border-color: var(--status-fg, var(--primary)); }
.status-pick__dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--status-bg, #c6ccd4); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.status-pick__name { flex: 1 1 auto; font-weight: 600; }
.status-pick__btn.is-current { border-color: var(--status-fg, var(--primary)); box-shadow: 0 0 0 1px var(--status-fg, var(--primary)); background: var(--status-bg, var(--bg)); color: var(--status-fg, var(--text)); }
.status-pick__current { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.status-pick__btn--none { color: var(--muted); }
.status-pick__btn--none .status-pick__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.status-pick__btn--none.is-current { color: var(--text); }

/* Ustawienia → Kalendarz Google — długie identyfikatory, adresy e-mail i linki zawijane także bez spacji (telefon). */
.gcal-card, .gcal-card * { overflow-wrap: anywhere; word-break: break-word; }
.gcal-card .deflist > div { flex-wrap: wrap; min-width: 0; }
.gcal-card .deflist dd { min-width: 0; }
.gcal-card code { white-space: normal; }
.gcal-card textarea.form__input { word-break: break-all; }

/* Kalendarz — wydarzenia z Kalendarza Google (tylko podgląd). */
.cal__event.is-google { border-style: dashed; }
.cal__google { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-right: 3px; border-radius: 3px; background: rgba(255,255,255,.9); color: #4285f4; font-size: 9px; font-weight: 800; line-height: 1; vertical-align: 1px; }
.tag--google { background: #e8f0fe; color: #1a56c4; }

/* Sekcje w zleceniu (formularz) i domyślne sekcje (Ustawienia). */
.order-sections__group { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.order-sections-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.order-sections-settings .form__group__title { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; }
.order-sections__group[hidden], .order-sections[hidden] { display: none; }
.order-industry-locked { display: flex; align-items: center; gap: 6px; font-weight: 600; padding: 6px 0; }
.order-sections-switch { margin-bottom: 6px; font-size: 15px; }

/* Cukiernia — liczba porcji w karcie „Słodki stół". */
.bakery-guests-form { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.bakery-guests-form .plan-farm-form__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.bakery-guests-form .form__input { width: 110px; }

/* Podwójna linia: podtytuł sekcji (.form__subhead, z górną kreską) tuż pod paskiem karty
   (.list-toolbar, z dolną kreską) albo w nim — zostaje jedna kreska (np. „Projekt i inspiracje”). */
.list-toolbar + .form__subhead { border-top: 0; padding-top: 0; margin-top: 0; }
.list-toolbar .form__subhead { border-top: 0; padding-top: 0; }

/* Cukiernia — wyroby w zleceniu. */
.order-products .text-right, .text-right { text-align: right; }
.order-products .nowrap { white-space: nowrap; }

/* =====================================================================
   Tabela „wiersze-paski" (styl z Dęciaka, kolorystyka MZ) — na razie lista
   zleceń: <section class="card card--soft"> + <table class="table table--rows">.
   Wiersze jako zaokrąglone paski z odstępem, większe odstępy, lekki nagłówek,
   hover w różu z paskiem w kolorze wiodącym; karta i pasek narzędzi lżejsze.
   ===================================================================== */
.card--soft { border-radius: 18px; padding: 24px 26px; box-shadow: 0 2px 10px rgba(17, 28, 26, .045); }
.card--soft .toolbar { background: #fff; min-height: 54px; }
.card--soft .toolbar--card-top { margin: -24px -26px 18px; border-radius: 18px 18px 0 0; }
.card--soft .toolbar__title { font-size: 17px; font-weight: 800; }
.card--soft .toolbar__btn,
.card--soft .toolbar__btn:hover,
.card--soft .toolbar__btn:active { background: #fff; border-left: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 700; }
.card--soft .toolbar__btn:hover { background: var(--rose-light); }
.card--soft .list-toolbar { margin-bottom: 14px; }
.card--soft .list-toolbar__search { height: 46px; border-radius: 12px; background: #fff; }
.card--soft .list-toolbar__search input { font-size: 15px; }
.card--soft .list-toolbar__select { min-height: 46px; border-radius: 12px; }

.table--rows { border-collapse: separate; border-spacing: 0 8px; margin-top: -8px; font-size: 14.5px; }
.table--rows th {
    background: transparent; border-bottom: 0; padding: 6px 16px 2px;
    font-size: 11.5px; font-weight: 750; letter-spacing: .06em; color: var(--muted);
}
.table--rows th .th-sort { color: var(--muted); }
.table--rows td {
    padding: 14px 16px; background: #fbfaf8; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    vertical-align: middle; transition: background .15s ease, border-color .15s ease;
}
.table--rows td:first-child { border-left: 1px solid var(--border); border-radius: 12px 0 0 12px; }
.table--rows td:last-child  { border-right: 1px solid var(--border); border-radius: 0 12px 12px 0; }
.table--rows td:only-child  { border-radius: 12px; }
.table--rows tbody tr:hover { background: transparent; }
.table--rows tbody tr:hover td { background: #fbf2f0; border-color: #ecd3cf; }
.table--rows tbody tr[data-href]:hover td:first-child,
.table--rows tbody tr[data-drawer-row]:hover td:first-child { box-shadow: inset 4px 0 0 var(--primary); }
.table--rows .name { font-size: 15.5px; font-weight: 700; }
.table--rows .client-cell { gap: 12px; }
.table--rows .client-cell__name { font-size: 15px; font-weight: 700; }
.table--rows .cell-sub { font-size: 12.5px; margin-top: 3px; }
.table--rows .avatar--sm { width: 40px; height: 40px; }

/* Karty zamiast tabeli (telefon) w tej samej sekcji */
.card--soft .client-cards { gap: 12px; }
.card--soft .client-card { border-radius: 16px; padding: 16px 18px; background: #fbfaf8; }
.card--soft .client-card[data-href]:hover { background: #fbf2f0; border-color: #ecd3cf; }
.card--soft .client-card__meta { padding-top: 12px; border-top: 1px solid var(--border); gap: 9px; font-size: 13.5px; }
@media (max-width: 720px) {
    .card--soft { padding: 18px 16px; }
    .card--soft .toolbar--card-top { margin: -18px -16px 16px; }
}

/* .table--rows — mieści się w szerokości ekranu: teksty się zawijają (e-mail łamany w dowolnym
   miejscu), mniejsze odstępy na średnich ekranach; awaryjnie przewijanie poziome w sekcji. */
.card--soft .client-table-wrap { overflow-x: auto; overflow-y: visible; }
.table--rows { table-layout: auto; width: 100%; }
.table--rows td { white-space: normal; }
.table--rows td.col-actions, .table--rows th.col-actions, .table--rows td.col-industry { white-space: nowrap; width: 1%; }
.table--rows td .tag { white-space: nowrap; }
.table--rows td:nth-last-child(2), .table--rows td:nth-last-child(3) { overflow-wrap: anywhere; min-width: 110px; }
@media (max-width: 1400px) {
    .table--rows th { padding: 6px 10px 2px; }
    .table--rows td { padding: 12px 10px; }
    .table--rows .avatar--sm { width: 36px; height: 36px; }
}

/* =====================================================================
   Wyższe klawisze jak w Dęciaku (2026-10-07): pozycje menu bocznego 56 px,
   główne przyciski stron i list (Dodaj zlecenie, Finanse, filtry) 48 px.
   Przyciski-ikony (.btn--icon) bez zmian.
   ===================================================================== */
.sidebar__nav { gap: 6px; }
.navitem { min-height: 56px; padding: 0 18px; gap: 14px; border-radius: 13px; font-size: 15.5px; font-weight: 600; }
.navitem__icon { width: 24px; }

.page-head__actions .btn:not(.btn--icon),
.list-toolbar__actions .btn:not(.btn--icon),
.form__actions .btn:not(.btn--icon) {
    min-height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 700;
}
.page-head__actions .btn.btn--tall:not(.btn--icon),
.form__actions .btn.btn--tall:not(.btn--icon) { min-height: 52px; }
.page-head__actions .btn > svg:first-child { width: 18px; height: 18px; }

/* =====================================================================
   WSZYSTKIE TABELE I SEKCJE panelu firmy w nowym wzorze (2026-10-07, prośba usera
   po akceptacji listy zleceń): to samo co .card--soft / .table--rows, ale globalnie
   — każda .card i każda .table (poza .table--kv). Kolorystyka MZ bez zmian.
   ===================================================================== */
.card { border-radius: 18px; padding: 24px 26px; box-shadow: 0 2px 10px rgba(17, 28, 26, .045); }
.card--narrow { max-width: 520px; }
.toolbar { background: #fff; min-height: 54px; }
.toolbar--card-top { margin: -24px -26px 18px; border-radius: 18px 18px 0 0; }
.toolbar__title { font-size: 17px; font-weight: 800; }
.toolbar__btn,
.toolbar__btn:hover,
.toolbar__btn:active { background: #fff; border-left: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 700; }
.toolbar__btn:hover { background: var(--rose-light); }
.toolbar__btn.is-active { background: var(--rose-light); color: var(--text); }
.toolbar__btn--accent, .toolbar__btn--accent:hover { background: var(--accent); color: #fff; border-color: var(--accent-border); }
.list-toolbar__search { height: 46px; border-radius: 12px; background: #fff; }
.list-toolbar__search input { font-size: 15px; }
.list-toolbar__select { min-height: 46px; border-radius: 12px; }

.table-wrap, .client-table-wrap { overflow-x: auto; overflow-y: visible; }
.table:not(.table--kv) { border-collapse: separate; border-spacing: 0 8px; margin-top: -8px; font-size: 14.5px; width: 100%; }
.table:not(.table--kv) th {
    background: transparent; border-bottom: 0; padding: 6px 16px 2px;
    font-size: 11.5px; font-weight: 750; letter-spacing: .06em; color: var(--muted);
}
.table:not(.table--kv) th .th-sort { color: var(--muted); }
.table:not(.table--kv) td {
    padding: 14px 16px; background: #fbfaf8; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    vertical-align: middle; white-space: normal; transition: background .15s ease, border-color .15s ease;
}
.table:not(.table--kv) td:first-child { border-left: 1px solid var(--border); border-radius: 12px 0 0 12px; }
.table:not(.table--kv) td:last-child  { border-right: 1px solid var(--border); border-radius: 0 12px 12px 0; }
.table:not(.table--kv) td:only-child  { border-radius: 12px; }
.table:not(.table--kv) td .tag, .table:not(.table--kv) td.col-actions, .table:not(.table--kv) th.col-actions { white-space: nowrap; }
.table:not(.table--kv) tbody tr:hover { background: transparent; }
.table:not(.table--kv) tbody tr:hover td { background: #fbf2f0; border-color: #ecd3cf; }
.table:not(.table--kv) tbody tr[data-href]:hover td:first-child,
.table:not(.table--kv) tbody tr[data-drawer-row]:hover td:first-child { box-shadow: inset 4px 0 0 var(--primary); }
.table:not(.table--kv) tbody tr.is-dragging td { background: #fbf2f0; }
.table .name { font-size: 15.5px; font-weight: 700; }
.table .client-cell { gap: 12px; }
.table .client-cell__name { font-size: 15px; font-weight: 700; }
.table .cell-sub { font-size: 12.5px; margin-top: 3px; }
.table .avatar--sm { width: 40px; height: 40px; }
.table td.muted { background: #fbfaf8; }
@media (max-width: 1400px) {
    .table:not(.table--kv) th { padding: 6px 10px 2px; }
    .table:not(.table--kv) td { padding: 12px 10px; }
    .table .avatar--sm { width: 36px; height: 36px; }
}

.client-cards { gap: 12px; }
.client-card { border-radius: 16px; padding: 16px 18px; background: #fbfaf8; }
.client-card[data-href]:hover, .client-card[data-drawer-row]:hover { background: #fbf2f0; border-color: #ecd3cf; }
.client-card__meta { padding-top: 12px; border-top: 1px solid var(--border); gap: 9px; font-size: 13.5px; }
@media (max-width: 720px) {
    .card { padding: 18px 16px; }
    .toolbar--card-top { margin: -18px -16px 16px; }
}

/* Wszystkie zwykłe przyciski panelu firmy wyższe — 48 px jak w Dęciaku (małe .btn--sm 40 px,
   przyciski-ikony bez zmian). */
.btn:not(.btn--icon):not(.btn--icon-solo):not(.btn--sm) { min-height: 48px; padding-top: 0; padding-bottom: 0; padding-left: 20px; padding-right: 20px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.btn.btn--tall:not(.btn--icon):not(.btn--icon-solo) { min-height: 52px; }
.btn.btn--sm:not(.btn--icon) { min-height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 700; }
.btn.btn--icon-solo { min-height: 48px; min-width: 48px; border-radius: 12px; }
.btn > svg:first-child { flex-shrink: 0; }

/* =====================================================================
   Wgrywanie plików (upload_dropzone()) — „Kliknij albo przeciągnij" + pasek postępu.
   ===================================================================== */
.upload-form { margin: 4px 0 14px; }
.dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 140px; padding: 20px; border: 2px dashed #d9cfc7; border-radius: 16px; background: #fbfaf8;
    text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dropzone--compact { min-height: 96px; padding: 14px 16px; }
.dropzone:hover, .dropzone:focus-within, .dropzone.is-over { border-color: var(--primary); background: #fbf2f0; }
.dropzone.is-over { border-style: solid; }
.dropzone.is-busy { pointer-events: none; opacity: .75; }
.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__icon { display: flex; color: var(--primary); }
.dropzone__text { font-weight: 700; font-size: 15.5px; color: var(--text); overflow-wrap: anywhere; }
.dropzone__hint { font-size: 13px; color: var(--muted); max-width: 520px; }
.upload-progress { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.upload-progress[hidden] { display: none; }
.upload-progress__bar { flex: 1; height: 10px; border-radius: 10px; background: #efe9e4; overflow: hidden; }
.upload-progress__bar span { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 10px; transition: width .2s ease; }
.upload-progress__pct { min-width: 92px; text-align: right; font-weight: 800; font-size: 14px; }

/* Szerokie ekrany (ultrawide): treść wyśrodkowana, max 1280 px jak w Hecy (2026-11-09; wcześniej 1440) — boczne odstępy rosną,
   dzieci .content nie są ruszane (żadne marginesy w widokach nie psują wyśrodkowania). */
@media (min-width: 900px) {
    .content { padding-left: max(22px, calc((100% - 1280px) / 2)); padding-right: max(22px, calc((100% - 1280px) / 2)); }
}

/* Wyszukiwarka (górny pasek + strona /szukaj) */
.topbar__search { position: relative; margin: 0; }
.gsearch--drop { position: absolute; top: calc(100% + 8px); left: 0; width: min(560px, 90vw); max-height: 70vh; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); padding: 6px; z-index: 300; }
.gsearch--drop[hidden] { display: none; }
.gsearch__group + .gsearch__group { margin-top: 4px; border-top: 1px solid var(--border, #eee); padding-top: 4px; }
.gsearch__head { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b7280); display: flex; align-items: center; gap: 6px; }
.gsearch__n { font-size: 11px; background: var(--border, #eee); border-radius: 999px; padding: 0 7px; letter-spacing: 0; }
.gsearch__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; border-left: 4px solid var(--c, transparent); }
.gsearch__item:hover, .gsearch__item.is-active, .gsearch__all.is-active, .gsearch__all:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.gsearch__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gsearch__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch__sub { font-size: 12.5px; color: var(--muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch__date { flex: none; font-size: 13px; font-weight: 600; color: var(--muted, #6b7280); }
.gsearch__all { display: block; margin-top: 4px; padding: 10px; border-radius: 10px; text-align: center; font-weight: 600; font-size: 13.5px; color: var(--accent, #1d4ed8); text-decoration: none; }
.gsearch__empty { padding: 14px 12px; color: var(--muted, #6b7280); font-size: 14px; }
.gsearch__form { display: flex; gap: 10px; margin-bottom: 16px; }
.gsearch__form .form__input { flex: 1; min-width: 0; }
.gsearch--page .gsearch__title, .gsearch--page .gsearch__sub { white-space: normal; }
.gsearch--page .gsearch__group + .gsearch__group { margin-top: 14px; padding-top: 10px; }

/* Lista „etykieta — wartość” tuż pod nagłówkiem karty (np. Informacje dodatkowe w zleceniu):
   nagłówek ma już dolną kreskę — bez drugiej nad listą. */
.list-toolbar + .client-card__meta { border-top: 0; padding-top: 0; }

/* Mini-kalendarz na pulpicie: kilka rodzajów wpisów w dniu → pasek podzielony na kolory (do 3). */
.mini-cal__dot--multi { display: flex; gap: 2px; background: none !important; box-shadow: none !important; }
.mini-cal__dot--multi > span { flex: 1; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.mini-cal__day.is-today .mini-cal__dot--multi > span { box-shadow: 0 0 0 1.5px #fff; }

/* Kalendarz — klik w całe pole dnia otwiera szczegóły (numer dnia nie jest już linkiem). */
.cal__day[data-day] { cursor: pointer; transition: background .12s ease; }
.cal__day[data-day]:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.cal__day[data-day]:hover .cal__daynum { background: var(--accent); color: #fff; }
.cal__dayopen { display: none; }

/* Przełącznik widoków kalendarza */
.cal-views { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Kalendarz — widok tygodnia / dnia (siatka godzin) */
.tg { display: grid; grid-template-columns: 56px repeat(var(--tg-cols), minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.tg__head, .tg__allday, .tg__body { display: contents; }
.tg__corner { border-bottom: 1px solid var(--border); background: var(--surface); }
.tg__corner--label { font-size: 10.5px; color: var(--muted); text-align: right; padding: 6px 6px 0 0; }
.tg__dayhead { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.tg__dayhead:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tg__dow { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tg__num { font-size: 20px; font-weight: 700; line-height: 1.1; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.tg__dayhead.is-today .tg__num { background: var(--accent); color: #fff; }
.tg__dayhead.is-off .tg__dow, .tg__dayhead.is-off .tg__num { color: #b42318; }
.tg__dayhead.is-today.is-off .tg__num { color: #fff; }
.tg__dayhead.is-saturday .tg__dow, .tg__dayhead.is-saturday .tg__num { color: #2563eb; }
.tg__dayhead.is-today.is-saturday .tg__num { color: #fff; }
.tg__holiday { font-size: 11px; color: #b42318; text-align: center; line-height: 1.2; }
.tg__allcell { display: flex; flex-direction: column; gap: 3px; padding: 4px; min-height: 30px; border-left: 1px solid var(--border); border-bottom: 2px solid var(--border); min-width: 0; }
.tg__allcell .cal__event { white-space: normal; }
.tg__allcell.is-today, .tg__col.is-today { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.tg__hours { position: relative; }
.tg__hour { height: var(--tg-hour); position: relative; border-top: 1px solid transparent; }
.tg__hour span { position: absolute; top: -8px; right: 6px; font-size: 11px; color: var(--muted); background: var(--surface); padding: 0 2px; }
.tg__hour:first-child span { top: 2px; }
.tg__col { position: relative; border-left: 1px solid var(--border); min-width: 0; }
.tg__col.is-off { background: color-mix(in srgb, #b42318 3%, var(--surface)); }
.tg__slot { display: block; height: var(--tg-hour); border-top: 1px solid var(--border); }
.tg__slot:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tg__event { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; border-radius: 8px; overflow: hidden; font-size: 12.5px; line-height: 1.25; text-decoration: none; background: var(--accent); color: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.tg__event:hover { z-index: 3; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.tg__event-time { font-size: 11px; font-weight: 700; opacity: .85; }
.tg__event-title { font-weight: 600; overflow-wrap: anywhere; }
.tg__event-desc { font-size: 12px; opacity: .85; white-space: pre-line; }
.tg__now { position: absolute; left: 0; right: 0; height: 2px; background: #e11d48; z-index: 4; pointer-events: none; }
.tg__now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e11d48; }
.tg__now[hidden] { display: none; }
@media (max-width: 720px) {
    .tg { grid-template-columns: 40px repeat(var(--tg-cols), minmax(0, 1fr)); }
    .cal--tydzien .tg__dow { font-size: 10px; }
    .cal--tydzien .tg__num { font-size: 15px; width: 26px; height: 26px; }
    .cal--tydzien .tg__event { padding: 2px 3px; font-size: 10.5px; }
    .cal--tydzien .tg__event-time { display: none; }
    .cal--tydzien .tg__allcell .cal__event { font-size: 10.5px; padding: 1px 3px; }
    .tg__hour span { font-size: 10px; right: 3px; }
    .tg__holiday { display: none; }
}

/* Nagłówki dni tygodnia w kalendarzach — kolor paska menu (#111c1a), biała czcionka. */
.cal__dow, .mcal__dow, .mini-cal__dow,
[data-theme="dark"] .cal__dow, [data-theme="dark"] .mcal__dow, [data-theme="dark"] .mini-cal__dow { background: #111c1a; color: #fff; }
.mini-cal__dow { border-radius: 6px; padding: 5px 0; }
.mcal__dow { border-radius: 4px; }
.tg__dayhead, [data-theme="dark"] .tg__dayhead { background: #111c1a; color: #fff; border-left-color: rgba(255, 255, 255, .12); }
.tg__dayhead:hover { background: #1d2c29; }
.tg__dayhead .tg__dow { color: rgba(255, 255, 255, .75); }
.tg__dayhead.is-off .tg__dow, .tg__dayhead.is-off .tg__num { color: #ff9b8f; }
.tg__dayhead.is-saturday .tg__dow, .tg__dayhead.is-saturday .tg__num { color: #9cc3ff; }
.tg__dayhead.is-today .tg__num { color: #fff; }
.tg__dayhead .tg__holiday { color: #ff9b8f; }
.tg__head > .tg__corner { background: #111c1a; }

/* Odśwież przeciągnięciem w dół (telefon) — kółko pod górnym paskiem, patrz app.js. */
.ptr {
    position: fixed; top: 64px; left: 50%; z-index: 80;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--muted);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transform: translate(-50%, -50px); opacity: 0; pointer-events: none;
}
.ptr.is-anim { transition: transform .2s ease, opacity .2s ease; }
.ptr.is-ready { color: var(--accent); }
.ptr.is-loading .ptr__icon { animation: ptr-spin .8s linear infinite; }
.ptr__icon { display: flex; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ===== Telefon: bez powiększania strony (iPhone) i bez wystawania poza ekran — wspólne dla aplikacji ZS =====
   iPhone przybliża stronę przy wejściu w pole z czcionką < 16 px i NIE oddala po zapisie
   („ekran się powiększył") — na telefonach / ekranach dotykowych wszystkie pola mają 16 px. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 820px), (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select, textarea,
    .form__input, .list-toolbar__search input { font-size: 16px; }
}
/* Elementy flex / grid domyślnie nie zwężają się poniżej treści — długi tekst wypychał kolumny. */
.app__main, .content, .card, .detail-grid > *, .detail-grid__stack, .client-cell, .client-cell > div { min-width: 0; }
.form__grid > *, .form__grid2 > *, .form__grid3 > * { min-width: 0; }
.content { overflow-x: hidden; }
.modal__body, .drawer__body { overflow-x: hidden; }
.content img, .modal__body img, .drawer__body img { max-width: 100%; }
/* Pola daty / godziny na iOS mają własną minimalną szerokość i wychodziły poza kartę. */
input[type="date"].form__input, input[type="time"].form__input, input[type="datetime-local"].form__input { min-width: 0; max-width: 100%; }
.client-card .client-cell__name, .client-card .client-cell__email, .card__title, .page-head__title { overflow-wrap: anywhere; }
/* Telefon w poziomie (szeroki, ale niski ekran dotykowy) — karty zamiast tabeli, jak w pionie. */
@media (pointer: coarse) and (max-height: 520px) {
    .client-table-wrap { display: none; }
    .client-cards { display: flex; }
}
/* Średnie ekrany (tablet, małe okno) — tabela przewija się w bok zamiast wychodzić poza ekran. */
@media (max-width: 1100px) {
    .client-table-wrap { overflow-x: auto; }
}
/* Rzędy przycisków zawijają się na wąskim ekranie zamiast wychodzić poza kartę. */
.btn-row, .form__actions, .page-head__actions, .list-toolbar__actions { flex-wrap: wrap; }

/* Pasek z nawigacją „‹ miesiąc / rok ›" (Kalendarz, Tankowanie, Czas pracy, Urlopy…) na telefonie — jeden
   zwarty rząd: strzałki z nazwą + małe „Dziś" / „Rok" obok, zamiast trzech wysokich rzędów
   (domyślnie na ≤720 px klawisze paska układają się jeden pod drugim na całą szerokość). */
@media (max-width: 720px) {
    .toolbar:has(> .toolbar__group--inline) { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
    .toolbar:has(> .toolbar__group--inline) > .toolbar__group--inline { flex: 1 1 220px; min-width: 0; }
    .toolbar:has(> .toolbar__group--inline) .toolbar__group--inline .toolbar__btn { padding: 8px 14px; font-size: 22px; }
    .toolbar:has(> .toolbar__group--inline) .toolbar__group--inline .toolbar__title { min-width: 0; padding: 8px 4px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .toolbar:has(> .toolbar__group--inline) > .toolbar__actions { flex-direction: row; width: auto; flex: 0 0 auto; margin-left: 0; }
    .toolbar:has(> .toolbar__group--inline) > .toolbar__actions .toolbar__btn { width: auto; padding: 8px 12px; font-size: 13px; border-top: 0; border-left: 1px solid var(--border); }
    .cal__month { min-width: 0; }
}

/* Górny pasek: ☰, dzwonek i menu konta ZAWSZE w jednej linii. Tytuł (na stronach z nagłówkiem
   niewidoczny, ale zajmujący miejsce) zwęża się do zera zamiast wypychać dzwonek i menu do drugiej
   linii (pasek ma flex-wrap — np. przełącznik zespołów w Hecy idzie do własnej linii). */
.topbar__title { flex: 1 1 0; min-width: 0; }
.topbar__actions { flex-shrink: 0; }
.topbar__toggle { flex-shrink: 0; }

/* Tabele z polami do edycji (np. Zawartość lokalizacji) na telefonie — wiersz jako karta:
   u góry uchwyt przeciągania i Usuń, pod spodem każde pole w osobnej linii z etykietą (data-label). */
@media (max-width: 720px) {
    .table.table--stack-mobile thead { display: none; }
    .table.table--stack-mobile,
    .table.table--stack-mobile tbody { display: block; margin-top: 0; }
    .table.table--stack-mobile tbody tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
        margin-bottom: 10px; padding: 10px 12px 14px;
        background: #fbfaf8; border: 1px solid var(--border); border-radius: 12px;
    }
    .table.table--stack-mobile:not(.table--kv) td,
    .table.table--stack-mobile:not(.table--kv) tbody tr:hover td {
        display: block; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
    }
    .table.table--stack-mobile td.table__drag { order: -2; width: auto; padding: 6px 4px; }
    .table.table--stack-mobile td.col-actions { order: -1; width: auto; margin-left: auto; }
    .table.table--stack-mobile td[data-label] { flex: 1 1 100%; min-width: 0; }
    .table.table--stack-mobile td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 4px;
        font-size: 12px; font-weight: 700; color: var(--muted);
    }
    .table.table--stack-mobile td[data-label] .form__input { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    /* iOS: pole godziny ma własną szerokość i wystawało poza kartę — bez natywnego wyglądu się mieści. */
    .table.table--stack-mobile td[data-label] input[type="time"].form__input { -webkit-appearance: none; appearance: none; text-align: left; }
    .table.table--stack-mobile td[data-label] input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}

/* --- Notatnik usług (moduł dodatkowy 'notatnik') ------------------- */
.table th.num, .table td.num { text-align: right; white-space: nowrap; }
.tab-owed { color: var(--danger); }
.tab-over { color: var(--ok); }
.tab-history__payment td { background: color-mix(in srgb, var(--ok) 6%, transparent); }
.tab-client-existing, .tab-client-new { display: none; }
.tab-form:has(#tab-client-existing:checked) .tab-client-existing { display: block; }
.tab-form:has(#tab-client-new:checked) .tab-client-new { display: flex; flex-direction: column; gap: 13px; }
.tab-form:has(#tab-kind-payment:checked) .tab-form__charge-only { display: none; }
.tab-form__payment-only { display: none; }
.tab-form:has(#tab-kind-payment:checked) .tab-form__payment-only { display: inline; }
/* Notatnik — rozliczenie kwotą albo roboczogodzinami (tylko usługa; wpłata zawsze kwotą). */
.tab-bill-hours { display: none; }
.tab-form:has(#tab-kind-charge:checked):has(#tab-bill-hours:checked) .tab-bill-hours { display: flex; flex-direction: column; gap: 13px; }
.tab-form:has(#tab-kind-charge:checked):has(#tab-bill-hours:checked) .tab-bill-amount { display: none; }

/* Szczegóły zlecenia na telefonie: najpierw „Powrót do listy" jako przycisk na całą szerokość,
   potem jeden kafelek (Klient, Data, Rodzaj, Pakiet — wiersze jeden pod drugim), dopiero dalej nagłówek
   ze statusem i akcjami — bez nazwy zamawiającego i rodzaju zlecenia (są w kafelkach). */
@media (max-width: 720px) {
    .order-top { display: flex; flex-direction: column; }
    .order-top > * { order: 3; }
    .order-top__back { order: 0; }
    .order-top > .stat-grid--order { order: 1; }
    .order-top__head { order: 2; }
    .order-top__back {
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 12px; padding: 14px 20px;
        background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
        font-size: 15px; color: var(--text);
    }
    .order-top__head .page-head__title,
    .order-top__head .page-head__subtitle { display: none; }
    .order-top__head .page-head__title-row:not(:has(.tag)) { display: none; }
    /* Portal klienta — nagłówek bez przycisków i bez plakietki byłby pustym blokiem. */
    .order-top__head:not(:has(.tag)):not(:has(.page-head__actions)) { display: none; }

    /* Jeden kafelek: Klient, Data, Rodzaj, Pakiet jako wiersze z ikonami, oddzielone kreską. */
    .stat-grid--order {
        grid-template-columns: 1fr; gap: 0; margin-bottom: 14px; padding: 4px 12px;
        background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
        box-shadow: 0 2px 10px rgba(17, 28, 26, .045);
    }
    .stat-grid--order .stat-card { padding: 8px 0; gap: 10px; min-width: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
    .stat-grid--order .stat-card + .stat-card { border-top: 1px solid var(--border); }
    .stat-grid--order .stat-card__icon { width: 34px; height: 34px; }
    .stat-grid--order .stat-card__icon svg { width: 17px; height: 17px; }
    .stat-grid--order .stat-card__value--text { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
}

/* Karty zbite w pionie na telefonie (szczegóły zlecenia: Realizacja, Notatki) — mniejszy
   padding, tytuł i mały przycisk akcji w jednej linii zamiast przycisku na całą szerokość. */
@media (max-width: 720px) {
    .card--tight { padding: 10px 12px 12px; }
    /* Tytuł i przyciski w jednej linii, a gdy się nie mieszczą (kilka przycisków) — przyciski
       przechodzą do drugiej linii, wyrównane do prawej (zamiast wychodzić poza ekran). */
    .card--tight .list-toolbar { flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 8px; gap: 6px 8px; }
    .card--tight .card__title { font-size: 15px; margin-bottom: 0; }
    .card--tight > .card__title { margin-bottom: 8px; }
    .card--tight .list-toolbar__actions { width: auto; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .card--tight .list-toolbar__actions > form { flex: 0 0 auto; }
    .card.card--tight .list-toolbar__actions > .btn.btn:not(.btn--icon),
    .card.card--tight .list-toolbar__actions > form .btn.btn:not(.btn--icon) { flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
    .card--tight .list-toolbar__actions > .btn--icon { flex: 0 0 auto; padding: 0; }
    .card--tight > p.muted, .card--tight > .alert { margin-top: 0; margin-bottom: 6px; font-size: 13px; }
    /* Dodatkowe przyciski z napisem w <span class="btn__label"> (np. Zablokuj dla klienta) — sama ikona. */
    .card--tight .list-toolbar__actions .btn__label { display: none; }
    .card--tight .list-toolbar__actions .btn:has(.btn__label) > svg:first-child { margin-right: 0; }
}

/* Realizacja i Finanse — trzy pozycje (Start / Termin / Pozostało, Wartość / Wpłacono / Pozostało)
   w jednym rzędzie, mniejsze czcionki. */
.finance-gap { margin-top: 14px; }
.finance-subhead { margin-top: 18px; }
@media (max-width: 720px) {
    .card--realization .finance-summary,
    .card--finance .finance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
    .card--realization .finance-summary__item,
    .card--finance .finance-summary__item { gap: 1px; min-width: 0; }
    .card--realization .finance-summary__label,
    .card--finance .finance-summary__label { font-size: 11px; line-height: 1.2; }
    .card--realization .finance-summary__value,
    .card--finance .finance-summary__value { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
    .card--realization .finance-progress,
    .card--finance .finance-progress { gap: 4px; }
    .card--realization .finance-progress__label,
    .card--finance .finance-progress__label { font-size: 11px; line-height: 1.2; }
    .card--finance .alert { margin-bottom: 8px; padding: 8px 10px; font-size: 13px; }
    .card--finance > p.muted { margin: 0 0 4px; font-size: 13px; }
    .card--finance .finance-gap { margin-top: 10px; }
    .card--finance .finance-subhead { margin-top: 10px; padding-top: 8px; }
    /* „Dodaj koszt" / „Dodaj wpłatę" → „Koszt" / „Wpłata", żeby zmieściły się obok tytułu. */
    .card--tight .btn__long { display: none; }
    .card--tight .btn__short { display: inline; }
}
.btn__short { display: none; }

/* Karty z listą pozycji (Umowa, Finanse — wpłaty i koszty) na telefonie: zamiast osobnych
   kart zwarte wiersze oddzielone kreską; Data i Kwota w jednej linii.
   ZASADA: przyciski wpisu zawsze POD nim (nazwa → dane → przyciski), nigdy obok nazwy —
   dłuższa nazwa nie rozjeżdża wtedy wiersza. .client-card__top znika jako pudełko
   (display: contents), a jego dzieci układa kolejność w kolumnie karty. */
@media (max-width: 720px) {
    .card--rows .client-cards { gap: 0; }
    .card--rows .client-card { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 7px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
    .card--rows .client-card + .client-card { border-top: 1px solid var(--border); }
    .card--rows .client-card__top { display: contents; }
    .card--rows .client-card__top > :first-child { order: 0; min-width: 0; overflow-wrap: anywhere; }
    .card--rows .client-card__meta { order: 1; }
    .card--rows .client-card__top > .row-actions,
    .card--rows .client-card__top > .tag,
    .card--rows .client-card > .row-actions { order: 2; align-self: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
    .card--rows .client-card__top .client-cell__name { font-size: 14px; }
    .card--rows .client-card__top .cell-sub { font-size: 12px; line-height: 1.3; }
    .card--rows .client-card__meta { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; padding-top: 0; border-top: 0; font-size: 12.5px; }
    .card--rows .client-card__meta > div { justify-content: flex-start; gap: 4px; }
    .card--rows .client-card__meta dd { text-align: left; font-weight: 600; }
    .card--rows > .alert { margin: 0 0 8px; padding: 8px 10px; font-size: 13px; }
}

/* Notatki — ciaśniejsze wpisy, Edytuj/Usuń obok siebie zamiast pod sobą (niższy wiersz). */
@media (max-width: 720px) {
    .card--notes .order-notes { gap: 8px; }
    .card--notes .order-note { padding-bottom: 8px; align-items: center; }
    .card--notes .order-note__actions { flex-direction: row; }
    .card--notes .order-note__content { margin-top: 3px; line-height: 1.35; }
    .card--notes .order-note__meta { margin-top: 3px; }
    .card--notes > .muted { margin: 0; }
}

/* Lokalizacja i Pakiet usług w szczegółach zlecenia — na telefonie zamiast kart pozycji zwarte
   wiersze (godzina + nazwa, pod spodem adres/opis, pinezka mapy z prawej; --plain bez godziny);
   na komputerze tabela. */
.loc-list { display: none; }
@media (max-width: 720px) {
    .loc-list { display: flex; flex-direction: column; }
    .loc-list__row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
    .loc-list__row + .loc-list__row { border-top: 1px solid var(--border); }
    .loc-list__main { flex: 1 1 auto; min-width: 0; }
    .loc-list__head { display: flex; align-items: baseline; gap: 8px; }
    .loc-list__time { flex-shrink: 0; min-width: 40px; font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
    .loc-list__name { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
    .loc-list__addr { margin: 1px 0 0 48px; font-size: 12.5px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
    .loc-list__row > .btn--icon { flex-shrink: 0; }
    .loc-list--plain .loc-list__addr { margin-left: 0; }
    .card--location .package-summary,
    .card--package .package-summary { margin-bottom: 4px; }
    .card--location .package-summary__name,
    .card--package .package-summary__name { font-size: 14px; }
    .card--package .package-summary { flex-direction: column; align-items: flex-start; gap: 0; }
    .card--package .package-summary__price { font-size: 17px; }
    .card--package > p.muted { margin: 0 0 6px; font-size: 13px; line-height: 1.35; }
}

/* Pliki w szczegółach zlecenia — na komputerze pole „Kliknij albo przeciągnij", na telefonie
   przycisk „Dodaj" w nagłówku sekcji. Dropzone tylko ukryty wizualnie (nie display:none),
   żeby <label for> nadal otwierał wybór plików, a pasek postępu i błędy były widoczne. */
.files-add { display: none; }
@media (max-width: 720px) {
    .card--files .files-add { display: flex; }
    .card--files .dropzone {
        position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); border: 0;
    }
    .card--files .upload-form { margin: 0; }
}

/* Pulpit na telefonie — zbity jak szczegóły zlecenia (karty .card--tight):
   kafelki statystyk jako wiersze jednej karty „Witaj", ciaśniejsze „Wymaga uwagi",
   szybkie akcje i listy. */
@media (max-width: 720px) {
    .card--tight .toolbar--card-top { margin: -10px -12px 8px; min-height: 44px; }
    .card--tight .toolbar__title { font-size: 15px; }
    .card--tight .card__lead { margin-bottom: 8px; font-size: 13px; }

    .dash-welcome .card__title { margin-bottom: 2px; }
    .dash-welcome .stat-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
    .dash-welcome .stat-grid .stat-card { padding: 7px 0; column-gap: 10px; row-gap: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
    .dash-welcome .stat-grid .stat-card + .stat-card { border-top: 1px solid var(--border); }
    .dash-welcome .stat-card__icon { width: 32px; height: 32px; }
    .dash-welcome .stat-card__icon svg { width: 16px; height: 16px; }
    .dash-welcome .stat-card__label { font-size: 12px; line-height: 1.25; }
    .dash-welcome .stat-card__value { font-size: 17px; line-height: 1.25; }
    .dash-welcome .stat-card__delta { font-size: 11px; line-height: 1.25; }

    .card--attention .attention { grid-template-columns: 1fr; gap: 12px; }
    .card--attention .attention__title { margin-bottom: 5px; font-size: 13px; }
    .card--attention .attention__list { gap: 4px; }
    .card--attention .attention__list li { padding: 6px 8px; font-size: 13.5px; gap: 1px; }
    .card--attention .attention__meta { font-size: 12px; line-height: 1.3; }

    .card--tight .quick-actions { gap: 6px; }
    .card--tight .quick-actions__btn.btn { min-height: 42px; padding: 0 14px; font-size: 14px; }
    .card--tight .top-services { gap: 8px; }
}

/* Lista zleceń na telefonie — karty zostają, ale ciaśniej: mniejszy padding, mniejsze
   odstępy między wierszami Rodzaj / Data / Status / Wpłata i niższa interlinia. */
@media (max-width: 720px) {
    .client-cards--compact { gap: 8px; }
    .client-cards--compact .client-card { padding: 10px 12px; }
    .client-cards--compact .client-card__top { margin-bottom: 6px; align-items: center; }
    .client-cards--compact .client-cell__name { line-height: 1.25; }
    .client-cards--compact .client-card > .card-realization { margin: -2px 0 6px; }
    .client-cards--compact .client-card__meta { padding-top: 6px; gap: 3px; font-size: 13px; line-height: 1.3; }
    .client-cards--compact .client-card__meta .tag { padding-top: 1px; padding-bottom: 1px; font-size: 11.5px; }
}

/* --- Moduł dodatkowy „SMS" (SMSAPI) ---------------------------------- */
.sms-pick { display: flex; flex-direction: column; gap: 8px; }
.sms-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sms-log__item { padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.sms-log__item + .sms-log__item { border-top: 1px solid var(--border); }
.sms-log__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sms-log__to { font-weight: 600; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.sms-log__msg { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.sms-log__meta { font-size: 12px; color: var(--muted); }
.sms-log__error { color: var(--danger-d); }
.order-sms { margin-top: 12px; }
@media (max-width: 720px) {
    .sms-log__item { padding: 7px 0; gap: 2px; }
}
/* Okna wysyłki do zamawiającego (link podglądu, potwierdzenie wpłaty) — część e-mail / SMS
   przełączana wg pola „Do" (_send_to.php, app.js). */
.send-part { display: flex; flex-direction: column; gap: 13px; }
.send-part[hidden] { display: none; }
.sms-tags summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.sms-tags ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }

/* Pulpit na komputerze — kafelki w karcie „Witaj": z lewej ikona, obok nazwa, a pod nią status
   (porównanie z poprzednim miesiącem itp.), z prawej wartość (liczba / kwota). Równa siatka 3 / 2 w rzędzie.
   (Telefon — osobny układ wierszy wyżej, @media max-width 720px.) */
.stat-card--link { color: inherit; text-decoration: none; transition: border-color .14s ease, box-shadow .14s ease; }
.stat-card--link:hover { border-color: var(--accent-light); box-shadow: 0 4px 14px rgba(17, 28, 26, .07); }
@media (min-width: 721px) {
    .dash-welcome .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 0; }
    .dash-welcome .stat-grid .stat-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon label value" "icon delta value";
        column-gap: 12px; row-gap: 3px; align-items: center;
        padding: 14px 16px; border-radius: 14px; background: var(--bg);
    }
    .dash-welcome .stat-grid .stat-card__icon { grid-area: icon; width: 40px; height: 40px; margin: 0; }
    .dash-welcome .stat-grid .stat-card__label { grid-area: label; align-self: end; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
    .dash-welcome .stat-grid .stat-card__delta { grid-area: delta; align-self: start; font-size: 12px; line-height: 1.3; }
    .dash-welcome .stat-grid .stat-card__value { grid-area: value; text-align: right; font-size: 24px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .dash-welcome .stat-grid .stat-card__sub { display: block; margin-top: 2px; font-size: 12px; white-space: nowrap; }
}
@media (min-width: 721px) and (max-width: 1100px) {
    .dash-welcome .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Okno „Projekt umowy" — przyciski przy szablonie. */
.contract-draft__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.contract-draft__actions .btn { flex: 0 1 auto; }
@media (max-width: 720px) {
    .contract-draft__actions > .btn, .contract-draft__actions > form { flex: 1 1 100%; }
    .contract-draft__actions > form .btn { width: 100%; }
}

/* =====================================================================
   ALERTY „ŚWIECĄCE" (2026-10-20, styl kafelków lampasiak-group.eu) — wszystkie żółte (warning),
   zielone (success) i czerwone (error): jaskrawy kolor, poświata z rogu, kolorowa obwódka i światło
   wokół, ikona w kolorowym kwadracie (rysowana w CSS — ::before, bez zmian w HTML).
   Szare (muted) i niebieskie objaśnienia (info) — bez zmian. Żółte pulsują (wymagają uwagi).
   ===================================================================== */
.alert.alert--warning,
.alert.alert--success,
.alert.alert--error {
    --c: #f2b705;
    position: relative;
    padding: 12px 16px 12px 60px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--c) 65%, transparent);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 58%),
        color-mix(in srgb, var(--c) 8%, #fff);
    color: #1d2333;
    line-height: 1.45;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent),
        0 10px 28px color-mix(in srgb, var(--c) 28%, transparent);
}
.alert.alert--warning { --c: #f2b705; }
.alert.alert--success { --c: #2fbf5b; }
.alert.alert--error   { --c: #e84a4a; }
.alert.alert--warning::before,
.alert.alert--success::before,
.alert.alert--error::before {
    content: "";
    position: absolute; left: 12px; top: 50%;
    width: 36px; height: 36px; margin-top: -18px;
    border-radius: 11px;
    background: var(--c) center / 20px 20px no-repeat;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 45%, transparent);
}
.alert.alert--warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.alert.alert--success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.alert.alert--error::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); }
.alert.alert--warning a, .alert.alert--success a, .alert.alert--error a { color: inherit; font-weight: 700; text-decoration: underline; }
/* Żółte — wymagają reakcji, światło wokół lekko „oddycha". */
.alert.alert--warning { animation: alert-glow 2.6s ease-in-out infinite alternate; }
@keyframes alert-glow {
    from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent), 0 8px 22px color-mix(in srgb, var(--c) 24%, transparent); }
    to   { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent), 0 12px 34px color-mix(in srgb, var(--c) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .alert.alert--warning { animation: none; } }
/* Wbudowane w formularz (alert--inline) — mniejsze, bez pulsowania. */
.alert.alert--inline.alert--warning,
.alert.alert--inline.alert--success,
.alert.alert--inline.alert--error {
    padding: 9px 12px 9px 48px; border-radius: 12px; font-size: 13px; animation: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 14%, transparent), 0 6px 16px color-mix(in srgb, var(--c) 20%, transparent);
}
.alert.alert--inline.alert--warning::before,
.alert.alert--inline.alert--success::before,
.alert.alert--inline.alert--error::before { left: 9px; width: 28px; height: 28px; margin-top: -14px; border-radius: 9px; background-size: 16px 16px; }
@media (max-width: 720px) {
    .alert.alert--warning, .alert.alert--success, .alert.alert--error { padding: 10px 12px 10px 54px; font-size: 13.5px; }
    .alert.alert--warning::before, .alert.alert--success::before, .alert.alert--error::before { left: 10px; width: 32px; height: 32px; margin-top: -16px; background-size: 18px 18px; }
}
[data-theme="dark"] .alert.alert--warning,
[data-theme="dark"] .alert.alert--success,
[data-theme="dark"] .alert.alert--error {
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 58%),
        color-mix(in srgb, var(--c) 10%, var(--surface));
    color: var(--text);
    border-color: color-mix(in srgb, var(--c) 60%, transparent);
}
}

/* Klienci na telefonie — sama ikona + nazwa w zwartym wierszu, strzałka „›" = dotknij, żeby otworzyć
   panel boczny (dane, Edytuj, Usuń). */
.client-cards--names { gap: 6px; }
.client-cards--names .client-card { display: flex; align-items: center; gap: 8px; padding: 9px 12px; }
.client-cards--names .client-cell { flex: 1 1 auto; min-width: 0; gap: 10px; }
.client-cards--names .client-cell__name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.client-cards--names .client-card::after { content: "›"; flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--muted); }

/* Karta Umowa — rząd podpisów pod numerem umowy: Podpis wykonawcy (zielony), Podpis klienta
   (czerwony), Umowa podpisana ręcznie; po podpisie szare „Podpisane przez…" (bez akcji). */
.contract-sign-row { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 8px; max-width: 100%; }
/* Jedna linia, ale nigdy poza kartę — przyciski dzielą szerokość po równo, napis łamie się w środku. */
.contract-sign-row > .btn, .contract-sign-row > .inline-form { flex: 1 1 0; min-width: 0; }
.contract-sign-row > .inline-form .btn { width: 100%; }
.contract-sign-row .btn.btn--sm { justify-content: center; text-align: center; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
.contract-sign-row .inline-form { display: inline-flex; }
.contract-sign-row .btn > svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn.btn--signed, .btn.btn--signed:hover {
    background: var(--bg); color: var(--muted); border: 1px solid var(--border); cursor: default; box-shadow: none;
}
/* Lista umów (karta Umowa): każda umowa — u góry numer + szablon (lewo) i ikony (prawo),
   pod spodem rząd podpisów na całą szerokość. Wiersze oddzielone kreską. */
.contract-list { display: flex; flex-direction: column; }
.contract-item { padding: 10px 0; }
.contract-item + .contract-item { border-top: 1px solid var(--border); }
.contract-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.contract-item__label { flex: 1 1 160px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.contract-item__label .cell-sub { font-weight: 400; }
.contract-item__actions { flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.contract-item > .contract-sign-row { margin-top: 8px; }
@media (max-width: 720px) {
    .contract-sign-row { margin: 6px 0 2px; }
    /* Telefon — trzy po równo na całą szerokość, mniejszy napis (łamie się w dwie linijki). */
    .contract-item { padding: 8px 0; }
    /* Podpis wykonawcy + Podpis klienta obok siebie, „Umowa podpisana ręcznie" pod nimi na całą szerokość. */
    .contract-sign-row { flex-wrap: wrap; }
    .contract-sign-row > .btn { flex: 1 1 calc(50% - 6px); }
    .contract-sign-row > .contract-sign-row__manual { flex: 1 1 100%; }
    .contract-sign-row .btn.btn--sm { min-height: 44px; padding: 4px 6px; font-size: 12px; gap: 4px; }
    .contract-sign-row .btn > svg { width: 13px; height: 13px; }
}

/* Lista zleceń na telefonie — pasek roku: w pierwszej linii ‹ rok ›, pod nim „Finanse" na całą
   szerokość; gdy jest też „Bieżący rok" (inny rok niż bieżący) — oba obok siebie, po połowie. */
@media (max-width: 720px) {
    .toolbar.toolbar--year { flex-wrap: wrap; }
    .toolbar.toolbar--year > .toolbar__group--inline { flex: 1 1 100%; }
    .toolbar.toolbar--year > .toolbar__group--inline .toolbar__title { flex: 1 1 auto; text-align: center; }
    .toolbar.toolbar--year > .toolbar__actions { flex: 1 1 100%; width: 100%; flex-direction: row; border-top: 1px solid var(--border); }
    .toolbar.toolbar--year > .toolbar__actions .toolbar__btn { flex: 1 1 0; width: auto; padding: 12px 10px; font-size: 14px; text-align: center; justify-content: center; border-top: 0; border-left: 0; }
    .toolbar.toolbar--year > .toolbar__actions .toolbar__btn + .toolbar__btn { border-left: 1px solid var(--border); }
}

/* =====================================================================
   TRYB CIEMNY — uzupełnienie (2026-10-21). Reguły „wiersze-paski / miękkie karty" (2026-10-07)
   i późniejsze mają na sztywno jasne tła (#fff, #fbfaf8, #fbf2f0) — leżą w arkuszu ZA blokiem
   trybu ciemnego, więc go przykrywały (lista zleceń, paski narzędzi, karty, tabele).
   ===================================================================== */
[data-theme="dark"] .toolbar,
[data-theme="dark"] .card--soft .toolbar { background: var(--surface); }
[data-theme="dark"] .toolbar__btn,
[data-theme="dark"] .toolbar__btn:active,
[data-theme="dark"] .card--soft .toolbar__btn,
[data-theme="dark"] .card--soft .toolbar__btn:active { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .toolbar__btn:hover,
[data-theme="dark"] .toolbar__btn.is-active,
[data-theme="dark"] .card--soft .toolbar__btn:hover { background: var(--rose-light); color: var(--text); }
[data-theme="dark"] .toolbar__btn--accent,
[data-theme="dark"] .toolbar__btn--accent:hover { background: var(--accent); color: #fff; border-color: var(--accent-border); }
[data-theme="dark"] .list-toolbar__search,
[data-theme="dark"] .card--soft .list-toolbar__search { background: #242120; border-color: var(--border); }
[data-theme="dark"] .list-toolbar__search input { color: var(--text); }

/* Wiersze tabel (paski) i karty list */
[data-theme="dark"] .table:not(.table--kv) td,
[data-theme="dark"] .table--rows td,
[data-theme="dark"] .table td.muted { background: #242120; border-color: var(--border); }
[data-theme="dark"] .table:not(.table--kv) tbody tr:hover td,
[data-theme="dark"] .table--rows tbody tr:hover td,
[data-theme="dark"] .table:not(.table--kv) tbody tr.is-dragging td { background: var(--rose-light); border-color: #5a3d39; }
[data-theme="dark"] .client-card,
[data-theme="dark"] .card--soft .client-card { background: #242120; border-color: var(--border); }
[data-theme="dark"] .client-card[data-href]:hover,
[data-theme="dark"] .client-card[data-drawer-row]:hover,
[data-theme="dark"] .card--soft .client-card[data-href]:hover { background: var(--rose-light); border-color: #5a3d39; }
[data-theme="dark"] .table.table--stack-mobile tbody tr { background: #242120; border-color: var(--border); }

/* Wgrywanie plików, tagi na jasnym tle */
[data-theme="dark"] .dropzone { background: #242120; border-color: #4a4440; }
[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone:focus-within,
[data-theme="dark"] .dropzone.is-over { background: var(--rose-light); border-color: var(--primary); }
[data-theme="dark"] .upload-progress__bar { background: #34302d; }
[data-theme="dark"] .tag--pickup { background: #1f3346; color: #a9cdf0; }
[data-theme="dark"] .tag--google { background: #1f2f46; color: #a9c4f0; }

/* Kafelki i dodatki z ostatnich zmian — tła na zmiennych, tu tylko cienie i obramowania */
[data-theme="dark"] .card,
[data-theme="dark"] .card--soft { box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
[data-theme="dark"] .stat-card--link:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
[data-theme="dark"] #payment-confirm-editor,
[data-theme="dark"] #message-body-editor,
[data-theme="dark"] #contract-body-editor { background: #171514; }
[data-theme="dark"] .dj-song-group--dont { background: #3a2220; border-color: #5c302c; }
[data-theme="dark"] .tag--idea-nowy { background: #3a2f1a; color: #e6c38f; }
[data-theme="dark"] .tag--idea-zaakceptowany { background: #1f3346; color: #a9cdf0; }
[data-theme="dark"] .tag--idea-odrzucony { background: #2c2826; color: var(--muted); }

/* Wersja programu (pulpit) i historia zmian (/historia-zmian). */
.dash-version { display: inline-block; margin-left: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dash-version a { color: var(--primary); font-weight: 600; }
.changelog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.changelog__version { padding: 12px 0; }
.changelog__version + .changelog__version { border-top: 1px solid var(--border); }
.changelog__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.changelog__items { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }

/* Pula urlopu → urlop dodatkowy, telefon (leave/allowance_form.php): nazwa w jednym wierszu z liczbą dni, niżej stan i daty. */
.bonus-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bonus-card__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bonus-card__days { flex-shrink: 0; font-weight: 700; white-space: nowrap; }
.bonus-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }
.bonus-cards .is-used-row { opacity: .65; }
.leave-card__type { white-space: nowrap; }

/* --- Podwykonawcy (migr. 093) --- */
.topbar__search--none { visibility: hidden; }
.sub-list { display: flex; flex-direction: column; gap: 10px; }
.sub-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--surface); }
.sub-item.is-off { opacity: .6; }
.sub-item__main { min-width: 0; flex: 1 1 260px; }
.sub-item__name { font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sub-item__actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sub-acc { font-size: 12px; font-weight: 600; color: var(--danger-d, #b42318); }
.sub-acc--on { color: var(--ok, #1e8a55); }
.sub-pick { display: flex; flex-direction: column; gap: 8px; }
.sub-pick--inline { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
.sub-busy { display: block; color: #b45309; font-size: 13px; font-weight: 600; }
.sub-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sub-order__note { margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; }
.sp-list { display: flex; flex-direction: column; gap: 8px; }
.sp-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); text-decoration: none; color: inherit; background: var(--surface); }
.sp-item:hover { border-color: var(--accent); }
.sp-item__date { min-width: 96px; font-weight: 700; }
.sp-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-person { margin: 4px 0; overflow-wrap: anywhere; }
.sp-loc__name { font-weight: 700; margin: 6px 0 4px; }
.sp-rows { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-rows li { display: flex; gap: 10px; overflow-wrap: anywhere; }
.sp-rows__time { min-width: 46px; font-weight: 700; color: var(--accent); }
@media (max-width: 600px) { .sp-item { flex-direction: column; align-items: flex-start; gap: 4px; } }


/* ===== Lista zleceń: rezerwacja wstępna — cały wiersz / karta wyróżnione (2026-10-30) ===== */
.table:not(.table--kv) tbody tr.is-reservation td {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--res) 2%, #fff) 0 12px, color-mix(in srgb, var(--res) 5%, #fff) 12px 24px);
    border-top: 1.5px dashed color-mix(in srgb, var(--res) 60%, transparent);
    border-bottom: 1.5px dashed color-mix(in srgb, var(--res) 60%, transparent);
}
.table:not(.table--kv) tbody tr.is-reservation td:first-child { border-left: 1.5px dashed color-mix(in srgb, var(--res) 60%, transparent); box-shadow: inset 6px 0 0 var(--res); }
.table:not(.table--kv) tbody tr.is-reservation td:last-child { border-right: 1.5px dashed color-mix(in srgb, var(--res) 60%, transparent); }
.table:not(.table--kv) tbody tr.is-reservation:hover td {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--res) 4%, #fff) 0 12px, color-mix(in srgb, var(--res) 8%, #fff) 12px 24px);
    border-color: var(--res);
}
.table:not(.table--kv) tbody tr.is-reservation[data-href]:hover td:first-child { box-shadow: inset 6px 0 0 var(--res); }
.client-card.is-reservation {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--res) 2%, #fff) 0 12px, color-mix(in srgb, var(--res) 5%, #fff) 12px 24px);
    border: 1.5px dashed color-mix(in srgb, var(--res) 60%, transparent);
    box-shadow: inset 6px 0 0 var(--res);
}
.client-card.is-reservation[data-href]:hover { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--res) 4%, #fff) 0 12px, color-mix(in srgb, var(--res) 8%, #fff) 12px 24px); border-color: var(--res); }
[data-theme="dark"] .table:not(.table--kv) tbody tr.is-reservation td,
[data-theme="dark"] .client-card.is-reservation,
[data-theme="dark"] [data-theme="dark"] .table:not(.table--kv) tbody tr.is-reservation:hover td,
[data-theme="dark"] .client-card.is-reservation[data-href]:hover {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--res) 6%, #242120) 0 12px, color-mix(in srgb, var(--res) 11%, #242120) 12px 24px);
    border-color: var(--res);
}

/* Rezerwacja: pasek u góry wiersza / karty z napisem (kolor statusu „Rezerwacja”) */
.table:not(.table--kv) tbody tr.is-reservation td { box-shadow: inset 0 4px 0 var(--res); }
.table:not(.table--kv) tbody tr.is-reservation td:first-child,
.table:not(.table--kv) tbody tr.is-reservation[data-href]:hover td:first-child { box-shadow: inset 6px 0 0 var(--res), inset 0 4px 0 var(--res); }
.client-card.is-reservation { box-shadow: inset 6px 0 0 var(--res), inset 0 4px 0 var(--res); }
.resv-flag {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 7px; padding: 3px 10px 3px 8px; border-radius: 6px;
    background: var(--res, #1d2b4f); color: var(--res-fg, #fff); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
}
.resv-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.client-card.is-reservation .resv-flag { margin-bottom: 10px; }

/* =========================================================================
   TELEFON: OKNA JAK W APLIKACJI (2026-11-03) — body.mz-app (mz_app_ui()), ≤ 720 px.
   Okno (modal) i panel szczegółów (drawer) wysuwają się od dołu jako arkusz ze sprężystą
   animacją, tło przyciemnia się z rozmyciem; uchwyt u góry — przeciągnięcie w dół zamyka (app.js).
   ========================================================================= */
@media (max-width: 720px) {
    body.mz-app .modal { align-items: flex-end; padding: 0; }
    body.mz-app .modal--full { padding: 0; }
    body.mz-app .modal__backdrop {
        background: rgba(10, 12, 16, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
        transition: opacity .32s ease;
    }
    body.mz-app .modal__dialog,
    body.mz-app .modal--wide .modal__dialog,
    body.mz-app .modal--xwide .modal__dialog,
    body.mz-app .modal__dialog:has(.term-cal) {
        max-width: none; width: 100%; max-height: 94vh; max-height: 94dvh;
        border-radius: 24px 24px 0 0; opacity: 1;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.4, 0, 1, 1);                 /* zamykanie: szybko w dół */
        box-shadow: 0 -16px 50px rgba(0, 0, 0, .25);
        padding-bottom: env(safe-area-inset-bottom);
    }
    body.mz-app .modal.is-visible .modal__dialog {
        transform: translateY(var(--sheet-y, 0));
        transition: transform .52s cubic-bezier(.22, 1, .36, 1);              /* otwieranie: sprężyście */
    }
    body.mz-app .modal__dialog.is-drag { transition: none !important; }
    body.mz-app .modal__head { position: relative; padding-top: 22px; touch-action: none; }
    body.mz-app .modal--confirm .modal__head { padding-top: 26px; }
    body.mz-app .modal__head::before {
        content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px;
        background: currentColor; opacity: .22;
    }
    body.mz-app .modal__x { width: 32px; height: 32px; border-radius: 50%; background: rgba(127, 127, 127, .14); border-color: transparent; }
    body.mz-app .modal__body { overscroll-behavior: contain; }
    /* treść wjeżdża delikatnie po wczytaniu */
    body.mz-app .modal.is-visible .modal__body > * { animation: mz-sheet-in .45s cubic-bezier(.22, 1, .36, 1) both; }
    body.mz-app .modal.is-visible .modal__body > *:nth-child(2) { animation-delay: .04s; }
    body.mz-app .modal.is-visible .modal__body > *:nth-child(3) { animation-delay: .08s; }
    body.mz-app .modal.is-visible .modal__body > *:nth-child(n+4) { animation-delay: .12s; }
    /* przyciski w oknie — pełna szerokość, „wciśnięcie” */
    body.mz-app .modal .btn { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .15s ease; }
    body.mz-app .modal .btn:active { transform: scale(.96); }

    /* panel szczegółów (drawer) na wszystkich stronach — też od dołu */
    body.mz-app .drawer { align-items: flex-end; justify-content: center; }
    body.mz-app .drawer__backdrop { background: rgba(10, 12, 16, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .35s ease; }
    body.mz-app .drawer__panel {
        max-width: none; height: auto; max-height: 92vh; max-height: 92dvh; border-radius: 24px 24px 0 0;
        transform: translateY(105%); transition: transform .3s cubic-bezier(.4, 0, 1, 1);
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .22); padding-bottom: env(safe-area-inset-bottom);
    }
    body.mz-app .drawer.is-visible .drawer__panel { transform: translateY(var(--sheet-y, 0)); transition: transform .52s cubic-bezier(.22, 1, .36, 1); }
    body.mz-app .drawer__panel.is-drag { transition: none !important; }
    body.mz-app .drawer__head { position: relative; justify-content: center; border-bottom: 0; padding-top: 22px; touch-action: none; }
    body.mz-app .drawer__head::before {
        content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px;
        background: var(--text); opacity: .22;
    }
    body.mz-app .drawer__title { font-size: 15px; color: var(--muted); font-weight: 600; }
    body.mz-app .drawer__x { position: absolute; right: 14px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(127, 127, 127, .14); display: grid; place-items: center; font-size: 20px; line-height: 1; }
    body.mz-app .drawer__body { overscroll-behavior: contain; }

    @keyframes mz-sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    body.mz-app .modal__dialog, body.mz-app .drawer__panel, body.mz-app .modal__body > * { transition-duration: .01ms !important; animation: none !important; }
}

/* Oferty jako pakiety (migr. 094): wybór oferty przy wysyłce + rodzaje zleceń w formularzu oferty */
.offer-packs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.offer-pack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 14px; font: inherit; color: var(--text); background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.offer-pack strong { font-size: 14px; font-weight: 700; }
.offer-pack small { font-size: 11.5px; color: var(--muted); }
.offer-pack:hover { transform: translateY(-1px); border-color: var(--accent); }
.offer-pack.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.offer-files[hidden] { display: none !important; }
.mzpk-types { display: flex; flex-wrap: wrap; gap: 8px; }
.mzpk-type { position: relative; cursor: pointer; }
.mzpk-type input { position: absolute; opacity: 0; pointer-events: none; }
.mzpk-type span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--surface); transition: background .2s, border-color .2s, box-shadow .2s; }
.mzpk-type span i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.mzpk-type input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); }
.mzpk-type input:checked + span::after { content: "✓"; font-weight: 800; color: var(--c); }
.mzpk-type input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Przełącznik roku ‹ 2026 › (mz_year_nav, 2026-11-03) — wspólny w całym panelu */
.mz-yearnav { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.mz-yearnav a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text) !important; text-decoration: none !important; transition: background .2s, transform .2s; }
.mz-yearnav a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.mz-yearnav a:active { transform: scale(.9); }
.mz-yearnav strong { min-width: 52px; text-align: center; font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.mz-yearnav--sm { padding: 3px; }
.mz-yearnav--sm a { width: 30px; height: 30px; }
.mz-yearnav--sm strong { min-width: 44px; font-size: 15px; }

/* Karta Umowa: „Zlecenie bez umowy” (migr. 095) */
.no-contract { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.no-contract.is-on { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.no-contract__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.no-contract__txt strong { font-size: 14px; color: var(--text); }
.no-contract__txt small { font-size: 12.5px; color: var(--muted); }
.no-contract .btn { flex: 0 0 auto; }


/* Odśwież przeciągnięciem — stylowe kółko jak w Hecy (2026-11-04): biała pigułka z pierścieniem w gradiencie (słońce → czerwień),
   rysuje się w trakcie przeciągania, strzałka obraca się przy „gotowe”, potem kręcący się łuk. */
.ptr { width: 48px !important; height: 48px !important; color: var(--ptr-b) !important; background: var(--surface) !important; box-shadow: 0 10px 26px -10px rgba(20, 30, 40, .45), 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent) !important; top: calc(56px + env(safe-area-inset-top, 0px)) !important; }
.ptr__icon { display: none !important; }
.ptr__ring { position: absolute; inset: 2px; width: 44px; height: 44px; transform: rotate(-90deg); }
.ptr__track { fill: none; stroke: color-mix(in srgb, var(--text) 8%, transparent); stroke-width: 3.5; }
.ptr__arc { fill: none; stroke: url(#ptrGrad); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: calc(var(--p, 0) * 1) 100; transition: stroke-dasharray .08s linear; }
.ptr__arrow { position: relative; display: grid; place-items: center; color: var(--text-secondary, var(--muted)); transition: transform .3s var(--hc-spring, ease), color .2s ease; }
.ptr.is-ready .ptr__arrow { transform: rotate(180deg) scale(1.1); color: var(--ptr-b); }
.ptr.is-ready { transform-origin: center; }
.ptr.is-loading .ptr__arrow { opacity: 0; transform: scale(.4); }
.ptr.is-loading .ptr__ring { animation: ptr-ring 0.9s linear infinite; }
.ptr.is-loading .ptr__arc { stroke-dasharray: 28 100; transition: none; animation: ptr-arc 1.4s ease-in-out infinite; }
@keyframes ptr-ring { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes ptr-arc { 0%, 100% { stroke-dasharray: 18 100; } 50% { stroke-dasharray: 62 100; } }
.ptr-toast { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 90; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 16px; font-size: 14px; font-weight: 700; color: #fff; background: rgba(20, 30, 40, .92); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); transform: translate(-50%, -16px); opacity: 0; pointer-events: none; transition: transform .35s var(--hc-spring, ease), opacity .25s ease; }
.ptr-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.ptr { --ptr-a: #c88b84; --ptr-b: #8f4f49; }

/* =====================================================================
   SZCZEGÓŁY ZLECENIA — UKŁAD KART (2026-11-08, Orders/Views/show.php, .ocd)
   Komputer: kolumna główna | boczna 360 px. ≤ 1100 px: jedna kolumna, kolejność kart z --o
   (style="--o: N" na karcie; karty branżowe bez --o = 40). Kolor sekcji: --c na karcie.
   ===================================================================== */
.ocd {
    --ocd-gap: 20px;
    --ocd-soft: color-mix(in srgb, var(--text) 4%, var(--surface));
    --ocd-line: color-mix(in srgb, var(--border) 85%, transparent);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: var(--ocd-gap); align-items: start; margin-top: 18px;
}
.ocd-main, .ocd-side { display: flex; flex-direction: column; gap: var(--ocd-gap); min-width: 0; }
.ocd section.card { --c: var(--accent); margin: 0 !important; min-width: 0; }
.ocd section.card > :last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
    .ocd { display: flex; flex-direction: column; align-items: stretch; --ocd-gap: 16px; }
    .ocd section.card { width: 100%; }
    .ocd-main, .ocd-side { display: contents; }
    .ocd section.card { order: var(--o, 40); }
}
@media (max-width: 720px) {
    .ocd { --ocd-gap: 12px; margin-top: 12px; }
}

/* --- nagłówek karty --------------------------------------------------------------------- */
.ocd-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
    margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ocd-line);
}
.ocd-head .card__title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.ocd-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
    color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface));
}
.ocd-count {
    min-width: 22px; padding: 2px 8px; border-radius: 999px; text-align: center;
    font-size: 12px; font-weight: 800; color: var(--muted); background: var(--ocd-soft);
}
.ocd-acts { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.ocd-acts > form { display: inline-flex; }
.ocd .ocd-acts .btn:not(.btn--icon),
.ocd .list-toolbar__actions .btn:not(.btn--icon) {
    min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700; gap: 0;
}
.ocd .ocd-acts .btn:not(.btn--icon) > svg:first-child { width: 16px; height: 16px; margin-right: 6px; }
.ocd .ocd-acts .btn--icon { width: 34px; height: 34px; border-radius: 10px; }

/* karty bez nowego nagłówka (branże Cukiernia / DJ — własne partiale) — ten sam rytm */
.ocd section.card > .list-toolbar:first-child { padding-bottom: 14px; margin-bottom: 16px; border-bottom-color: var(--ocd-line); }
.ocd section.card > .list-toolbar:first-child .card__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }

/* podsekcja w karcie (Wpłaty, Dodatkowe koszty, Diety, Obsługa…) */
.ocd-subbar { display: flex; align-items: center; gap: 8px; margin: 20px 0 6px; }
.ocd-subbar .ocd-acts .btn--icon { width: 30px; height: 30px; }
.ocd-sub {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.ocd-sub b { padding: 1px 7px; border-radius: 999px; font-size: 11px; letter-spacing: 0; color: var(--text); background: var(--ocd-soft); }
.ocd-sub .muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ocd-subsum { margin-left: auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.order-sms .ocd-sub { margin: 18px 0 8px; }

/* --- puste stany, tekst -------------------------------------------------------------------- */
.ocd-empty {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--border);
    border-radius: 14px; color: var(--muted); font-size: 13.5px; line-height: 1.45;
}
.ocd-empty > svg { flex: 0 0 auto; color: var(--c); opacity: .8; }
.ocd-none { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.ocd-lead { font-size: 16px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ocd-text { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ocd section.card > .alert { margin: 0 0 12px; }

/* --- wiersze list ----------------------------------------------------------------------------- */
.ocd-list { display: flex; flex-direction: column; }
.ocd-row {
    position: relative; display: flex; align-items: center; gap: 12px;
    margin: 0 -10px; padding: 10px; border-radius: 12px; transition: background .15s ease;
}
.ocd-row + .ocd-row::before { content: ""; position: absolute; top: 0; left: 56px; right: 10px; height: 1px; background: var(--ocd-line); }
.ocd-row:hover { background: var(--ocd-soft); }
.ocd-row:hover::before, .ocd-row:hover + .ocd-row::before { opacity: 0; }
.ocd-row--top { align-items: flex-start; }
.ocd-row__main { flex: 1 1 auto; min-width: 0; }
.ocd-row__title { display: block; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
a.ocd-row__link { text-decoration: none; }
a.ocd-row__link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ocd-row__sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.ocd-row__sub a { color: inherit; }
.ocd-row__end { flex: 0 0 auto; font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ocd-row__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.ocd-row__acts .btn--icon { width: 32px; height: 32px; border-radius: 9px; }
.ocd-row__acts .btn--icon svg { width: 16px; height: 16px; }
@media (hover: hover) and (min-width: 721px) {
    .ocd-row .ocd-row__acts, .ocd-note .ocd-row__acts { opacity: 0; transition: opacity .15s ease; }
    .ocd-row:hover .ocd-row__acts, .ocd-row:focus-within .ocd-row__acts,
    .ocd-note:hover .ocd-row__acts, .ocd-note:focus-within .ocd-row__acts { opacity: 1; }
}
.ocd-badge {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface));
}
.ocd-badge--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.ocd-badge--warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.ocd-pill, .ocd-state {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted);
}
.ocd-pill { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--ocd-soft); }

/* --- liczby: finanse, realizacja --------------------------------------------------------------- */
.ocd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ocd-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--ocd-soft); }
.ocd-stat__label { font-size: 12px; font-weight: 700; color: var(--muted); }
.ocd-stat__value { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ocd-stat__sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ocd-stat--ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.ocd-stat--ok .ocd-stat__value { color: var(--ok); }
.ocd-stat--warn { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); }
.ocd-stat--warn .ocd-stat__value { color: var(--warning); }
.ocd-stat--accent { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
.ocd-stat--accent .ocd-stat__value { color: var(--accent); }

.ocd-bar { height: 8px; margin-top: 14px; border-radius: 999px; overflow: hidden; background: var(--ocd-soft); }
.ocd-bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--accent); transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.ocd-bar--ok > span { background: var(--ok); }
.ocd-bar--warn > span { background: var(--warning); }
.ocd-bar--bad > span { background: var(--danger); }
.ocd-barlabel { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }

.ocd-real { display: flex; align-items: center; gap: 22px; }
.ocd-real__big { flex: 0 0 auto; display: flex; flex-direction: column; padding: 12px 18px; border-radius: 16px; background: var(--ocd-soft); }
.ocd-real__big span { font-size: 12px; font-weight: 700; color: var(--muted); }
.ocd-real__big strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ocd-real__big small { font-size: 14px; font-weight: 700; letter-spacing: 0; }
.ocd-tone--ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); } .ocd-tone--ok strong { color: var(--ok); }
.ocd-tone--warn { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); } .ocd-tone--warn strong { color: var(--warning); }
.ocd-tone--bad { background: color-mix(in srgb, var(--danger) 13%, var(--surface)); } .ocd-tone--bad strong { color: var(--danger); }
.ocd-tone--accent { background: color-mix(in srgb, var(--c) 12%, var(--surface)); } .ocd-tone--accent strong { color: var(--c); }
.ocd-real__info { flex: 1 1 auto; min-width: 0; }
.ocd-real__info .ocd-bar { margin-top: 10px; }
.ocd-real__info .ocd-bar--accent > span { background: var(--c); }
.ocd-real__dates { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.ocd-real__dates b { color: var(--text); font-weight: 700; }
.ocd-real__arrow { opacity: .5; }

/* --- lokalizacja: oś czasu ----------------------------------------------------------------------- */
.ocd-timeline { list-style: none; margin: 12px 0 0; padding: 0; }
.ocd-tl { display: flex; align-items: flex-start; gap: 12px; padding: 0; }
.ocd-tl__time {
    flex: 0 0 56px; margin-top: 1px; padding: 3px 0; border-radius: 8px; text-align: center;
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c);
    background: color-mix(in srgb, var(--c) 11%, var(--surface));
}
.ocd-tl__main { position: relative; flex: 1 1 auto; min-width: 0; padding: 2px 0 18px 22px; }
.ocd-tl__main::before {
    content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--surface); box-shadow: inset 0 0 0 3px var(--c);
}
.ocd-tl__main::after { content: ""; position: absolute; left: 4.5px; top: 21px; bottom: 2px; width: 1px; background: var(--border); }
.ocd-tl:last-child .ocd-tl__main { padding-bottom: 2px; }
.ocd-tl:last-child .ocd-tl__main::after { display: none; }
.ocd-map { width: 34px !important; height: 34px !important; margin-top: -4px; color: var(--c) !important; }

/* --- pakiet ---------------------------------------------------------------------------------- */
.ocd-pack { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ocd-pack__main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ocd-pack__price { flex: 0 0 auto; font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ocd-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface));
}
.ocd-chip--muted { color: var(--muted); background: var(--ocd-soft); }
.ocd-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 18px; }
.ocd-checks li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.ocd-checks__ico {
    flex: 0 0 auto; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; display: grid; place-items: center;
    color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface));
}

/* --- zamawiający -------------------------------------------------------------------------------- */
.ocd-person + .ocd-person { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ocd-line); }
.ocd-person__head { display: flex; align-items: center; gap: 12px; }
.ocd-person__who { min-width: 0; }
.ocd-person__name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ocd-avatar {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font-size: 15px; font-weight: 800; color: #fff;
    background: linear-gradient(145deg, hsl(var(--h, 10) 55% 62%), hsl(calc(var(--h, 10) + 25) 50% 46%));
}
.ocd-avatar--sm { width: 34px; height: 34px; font-size: 12.5px; }
.ocd-contacts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ocd-contacts a {
    display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 10px;
    color: var(--text); text-decoration: none; font-size: 13.5px; overflow-wrap: anywhere; transition: background .15s ease;
}
.ocd-contacts a:hover { background: var(--ocd-soft); color: var(--accent); }
.ocd-contacts__ico {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface));
}
.ocd-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 10px 12px;
    border-radius: 12px; background: var(--ocd-soft);
}
.ocd-foot .ocd-state { font-weight: 600; line-height: 1.35; }
.ocd-foot .btn--sm { flex: 0 0 auto; min-height: 30px; border-radius: 9px; }

/* --- notatki -------------------------------------------------------------------------------------- */
.ocd-notes { display: flex; flex-direction: column; gap: 10px; }
.ocd-note { padding: 10px 12px 12px; border-radius: 14px; background: var(--ocd-soft); box-shadow: inset 3px 0 0 var(--c); }
.ocd-note__top { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.ocd-note__meta { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); }
.ocd-note__text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }

/* --- pliki ----------------------------------------------------------------------------------------- */
.ocd-files .dropzone { min-height: 0; flex-direction: row; gap: 12px; justify-content: flex-start; padding: 12px 14px; border-radius: 14px; text-align: left; }
.ocd-files .dropzone__icon svg { width: 26px; height: 26px; }
.ocd-files .dropzone__text { font-size: 14px; }
.ocd-files .dropzone__hint { font-size: 12px; }
.ocd-files .upload-form { margin-bottom: 10px; }
.ocd-ext {
    flex: 0 0 auto; width: 38px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--muted); background: var(--ocd-soft);
}
.ocd-ext--pdf { color: #c4473f; background: color-mix(in srgb, #c4473f 13%, var(--surface)); }
.ocd-ext--img { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.ocd-ext--doc { color: var(--info); background: color-mix(in srgb, var(--info) 14%, var(--surface)); }
.ocd-files .ocd-row + .ocd-row::before { left: 60px; }
@media (max-width: 720px), (hover: none) {
    .ocd-files .upload-form .dropzone { display: none; }
}
@media (min-width: 721px) and (hover: hover) {
    .ocd-files .files-add { display: none; }
}

/* --- pozostałe ----------------------------------------------------------------------------------- */
.ocd-kv { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ocd-kv > div { padding: 10px 14px; border-radius: 12px; background: var(--ocd-soft); min-width: 0; }
.ocd-kv dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.ocd-kv dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ocd-quote { margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: var(--ocd-soft); overflow-wrap: anywhere; }
.ocd-remarks { border: 0; background: var(--ocd-soft); border-radius: 14px; }
.ocd .order-message { border-radius: 12px; border-color: var(--ocd-line); }
.ocd .order-message__head { padding: 11px 14px; }
.ocd .deflist > div { padding: 8px 0; }
.ocd .deflist > div + div { border-top: 1px solid var(--ocd-line); }

/* umowa — każda umowa jako miękki blok */
.ocd-contract .contract-list { display: flex; flex-direction: column; gap: 10px; }
.ocd-contract .contract-item { padding: 12px 14px; border-radius: 14px; background: var(--ocd-soft); }
.ocd-contract .contract-item + .contract-item { border-top: 0; }
.ocd-contract .contract-item__label { font-size: 15px; font-weight: 800; }
.ocd-contract .contract-item__actions .btn--icon { width: 32px; height: 32px; border-radius: 9px; }
.ocd-contract .contract-item__actions .btn--icon svg { width: 16px; height: 16px; }
.ocd-contract .contract-sign-row { margin-top: 10px; }
.ocd-contract .contract-sign-row .btn--sm { min-height: 34px; border-radius: 10px; }
.ocd-contract .no-contract { margin-top: 12px; }
.ocd-contract > p.muted { margin: 0; font-size: 13.5px; }

/* --- telefon ------------------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .ocd-head { margin-bottom: 12px; padding-bottom: 12px; }
    .ocd-head .card__title { font-size: 17px; }
    .ocd-ico { width: 30px; height: 30px; border-radius: 10px; }
    .ocd-ico svg { width: 16px; height: 16px; }
    .ocd .ocd-acts .btn:not(.btn--icon) { min-height: 34px; padding: 0 10px; }
    .ocd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .ocd-stat { padding: 10px; border-radius: 12px; }
    .ocd-stat__label { font-size: 11px; }
    .ocd-stat__value { font-size: 15px; }
    .ocd-stat__sub { display: none; }
    .ocd-row { gap: 10px; margin: 0 -6px; padding: 9px 6px; }
    .ocd-row + .ocd-row::before { left: 50px; right: 6px; }
    .ocd-row__acts .btn--icon { width: 34px; height: 34px; }
    .ocd-real { gap: 14px; }
    .ocd-real__big { padding: 10px 14px; }
    .ocd-real__big strong { font-size: 24px; }
    .ocd-pack__price { font-size: 18px; }
    .ocd-checks { grid-template-columns: 1fr; }
    .ocd-kv { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ocd-tl__time { flex-basis: 50px; }
}
@media (max-width: 420px) {
    .ocd-row { flex-wrap: wrap; }
    .ocd-row__main { flex-basis: calc(100% - 60px); }
    .ocd-row__end { margin-left: 44px; }
    .ocd-row__acts { margin-left: auto; }
    .ocd-real { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .ocd-bar > span { transition: none; }
}

/* ============ ASYSTENT AI (moduł „asystent”, 2026-11-14, port z Hecy) ============ */
.ai-dock { --ai: var(--primary); --ai-2: #c98a6a; max-width: 980px; margin: 0 0 18px; }
.ai-cmd { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 6px 6px 14px; background: var(--surface); border: 2px solid transparent;
    border-radius: 999px; box-shadow: 0 6px 22px rgba(143, 79, 73, .14);
    background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(120deg, var(--primary), #c98a6a, #e2b07a);
    background-origin: border-box; background-clip: padding-box, border-box; }
.ai-cmd__ico { display: grid; place-items: center; flex: none; color: var(--primary); }
.ai-cmd__input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.ai-cmd__input::placeholder { color: var(--muted); }
.ai-cmd__mic, .ai-cmd__go { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; }
.ai-cmd__mic[hidden] { display: none !important; }
.ai-cmd__mic { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.ai-cmd__mic.is-kb { background: #E3F5EA; color: #1E9E5A; }
.ai-cmd__mic.is-on { background: #D7263D; color: #fff; animation: ai-pulse 1.1s ease-in-out infinite; }
.ai-cmd__go { background: linear-gradient(135deg, var(--primary), #c98a6a); color: #fff; }
.ai-cmd__go:hover { filter: brightness(1.08); }
.ai-cmd__hint { margin: 0 4px 18px; font-size: 12.5px; color: var(--muted); }
@keyframes ai-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 38, 61, .45); } 50% { box-shadow: 0 0 0 8px rgba(215, 38, 61, 0); } }

.ai-card { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, #c98a6a 6%, var(--surface))); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); }
.ai-card__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ai-card__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #c98a6a); color: #fff; }
.ai-card__head strong { display: block; font-size: 15px; color: var(--text); }
.ai-card__head small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.ai-card__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.ai-card__list li { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.ai-card__list span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.ai-card__list strong { font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.ai-card .alert { margin: 6px 0 0; }
.ai-card__foot { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 720px) {
    .ai-card__list { grid-template-columns: 1fr 1fr; }
    .ai-cmd__hint { font-size: 12px; }
}
.ai-cmd__clr { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--muted) 14%, var(--surface)); color: var(--muted); cursor: pointer; }
.ai-cmd__clr[hidden] { display: none !important; }
.ai-cmd__clr:hover { background: color-mix(in srgb, var(--muted) 24%, var(--surface)); color: var(--text); }

/* Ustawienia → Asystent AI: odstępy między alertami, polami, zaznaczeniami i klawiszami (2026-11-13) */
.hcai > * + * { margin-top: 16px; }
.hcai .hcmail-card > .alert { margin: 12px 0; }
.hcai .hcmail-card > .alert:first-of-type { margin-top: 6px; }
.hcai .hcmail-card > .hcmail-grid { margin: 14px 0; }
.hcai .hcmail-card > .form__check { display: flex; margin: 12px 0; }
.hcai .hcmail-card > .hcmail-h { margin-top: 24px; }
.hcai .hcmail-save { margin-top: 20px; }
.hcai .hcmail-save + .alert { margin-top: 14px; margin-bottom: 0; }
.hcai .hcmail-test .hcmail-lbl { margin-bottom: 12px; }
.hcai .hcmail-test__btn { display: inline-flex; align-items: center; gap: 8px; }
.hcai .hcmail-test__btn svg { width: 18px; height: 18px; }
.hcai .hcmail-pass { display: flex; gap: 8px; }
.hcai .hcmail-pass .form__input { flex: 1 1 auto; min-width: 0; }

/* Okno: długie wczytywanie (asystent AI) — licznik, Przerwij, Spróbuj ponownie (2026-11-13) */
.mwait { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px 18px; text-align: center; }
.mwait__spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--primary) 20%, transparent); border-top-color: var(--primary); animation: mwait-spin .9s linear infinite; }
@keyframes mwait-spin { to { transform: rotate(360deg); } }
.mwait__txt { font-size: 15px; color: var(--text); }
.mwait__sec { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mwait__stop { margin-top: 6px; border-radius: 14px; min-width: 140px; }
.mwait--end { align-items: stretch; padding: 8px 0 4px; text-align: left; }
.mwait__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.mwait__acts .btn { flex: 1 1 160px; border-radius: 14px; justify-content: center; text-align: center; }
@media (prefers-reduced-motion: reduce) { .mwait__spin { animation-duration: 2.5s; } }
/* klawisze pod kartą asystenta */
.ai-card__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ai-card__btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ai-card__btn:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }

.ai-dock .ai-cmd__hint { margin-bottom: 0; }
body.mza-dash .ai-dock { margin: 4px 0 14px; }

/* Ustawienia → Wpisy kalendarza + lista nazw w formularzu wpisu (2026-11-14) */
.cal-title-pick { margin-bottom: 8px; }
.mzkt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; }
.mzkt-tags__lbl { width: 100%; font-size: 13px; color: var(--muted); }
.mzkt-tag { padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); color: var(--primary); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mzkt-tag:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.mzkt .mzkt-name { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.mzkt .mzkt-name .mzcm-tag, .mzkt td .mzcm-tag { font-size: .82em; }
.mzkt .mzkt-ex { white-space: normal; overflow-wrap: anywhere; }
.mzkt .mzot-tile__badge svg, .mzf-typecard__badge svg { width: 20px; height: 20px; }
[data-mzkt-form] .mzkt-tags { margin: 2px 0 0; }
.mzkt .mzkt-body { display: block; margin: 4px 0 6px; font-size: 13px; line-height: 1.4; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.mzkt .mzkt-body .mzcm-tag { font-size: .82em; }
.mzkt-card { align-items: flex-start; }
.mzkt-card__body { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.mzkt-card__body:empty { display: none; }

/* =====================================================================================
   ABONAMENT (2026-11-14): baner terminu w panelu + zakładka Abonament (Billing/Views/index.php, .mzb)
   ===================================================================================== */
.bill-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; text-decoration: none !important; color: #6b4300 !important; background: linear-gradient(135deg, #fff1d6, #ffe2a8); box-shadow: 0 10px 22px -16px #c97a24, inset 0 0 0 1px #f1c773; }
.bill-banner.is-bad { color: #fff !important; background: linear-gradient(135deg, #e8817a, #b8433b); box-shadow: 0 12px 24px -16px #b8433b; }
.bill-banner__ico { font-size: 20px; }
.bill-banner__txt { flex: 1; font-size: 14px; font-weight: 700; }
.bill-banner__go { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: rgba(255, 255, 255, .7); color: inherit; }
.bill-banner.is-bad .bill-banner__go { background: #fff; color: #b8433b; }
.mzb { max-width: 900px; }
.mzb-head { margin: 4px 0 16px; }
.mzb-head__title { margin: 0; font-size: clamp(26px, 4vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.mzb-head__sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.mzb-hero { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 20px; border-radius: 24px; color: #fff;
    background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(140deg, var(--accent-light), var(--accent) 55%, var(--accent-d)); box-shadow: 0 22px 40px -24px var(--accent-d); }
.mzb-hero.is-free { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(140deg, #5cc4a8, #217a68); box-shadow: 0 22px 40px -24px #217a68; }
.mzb-hero.is-trial { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(140deg, #6f9de0, #3a66b0); }
.mzb-hero.is-grace { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(140deg, #f0b65a, #c97a24); }
.mzb-hero.is-readonly { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .2) 0%, transparent 55%), linear-gradient(140deg, #e8817a, #b8433b); }
.mzb-hero.is-test { background: linear-gradient(140deg, #8d97a5, #5f6b7a); }
.mzb-hero__ico { flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; font-weight: 800; background: rgba(255, 255, 255, .2); }
.mzb-hero__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mzb-hero__txt small { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .9; }
.mzb-hero__txt strong { font-size: 22px; font-weight: 800; line-height: 1.2; }
.mzb-hero__txt span { font-size: 14px; opacity: .92; }
.mzb-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 10px; }
.mzb-plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 30px -24px rgba(0, 0, 0, .5), inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); }
.mzb-plan.is-best { box-shadow: 0 18px 34px -22px var(--accent), inset 0 0 0 2px var(--accent); }
.mzb-plan__badge { position: absolute; top: -11px; right: 16px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #5cc4a8, #2f9c85); box-shadow: 0 8px 16px -10px #2f9c85; }
.mzb-plan__name { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mzb-plan__price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.mzb-plan__meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.mzb-plan .btn { margin-top: auto; justify-content: center; border-radius: 14px; }
.mzb-note { font-size: 13px; color: var(--muted); margin: 6px 2px 16px; }
.mzb-card { margin-top: 14px; }
.mzb-lines, .mzb-pays { list-style: none; margin: 0; padding: 0; }
.mzb-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size: 14px; }
.mzb-lines li:first-child { border-top: 0; }
.mzb-lines small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.mzb-lines .is-sum { font-weight: 800; }
.mzb-pays li { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.mzb-pays li:first-child { border-top: 0; }
.mzb-pays__ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; background: #8a94a3; }
.mzb-pays .is-paid .mzb-pays__ico, .mzb-pays .is-manual .mzb-pays__ico { background: linear-gradient(145deg, #5cc4a8, #2f9c85); }
.mzb-pays .is-pending .mzb-pays__ico { background: linear-gradient(145deg, #f0b65a, #d98a1f); }
.mzb-pays__txt { display: flex; flex-direction: column; font-size: 14px; }
.mzb-pays__txt small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 720px) { .mzb-plans { grid-template-columns: 1fr; } .mzb-hero { padding: 16px; } .mzb-hero__ico { width: 52px; height: 52px; font-size: 26px; } }
.um-ico--card { background: linear-gradient(145deg, #a37ce0, #7b4fc0); }