/* ===========================================================================
   Salonio, arkusz glowny.

   Mobile first: reguly podstawowe opisuja telefon, rozszerzenia siedza
   w min-width. Na telefonie nawigacja jest na dole ekranu, bo tam siega
   kciuk. Od 900 pikseli w gore wchodzi boczne menu.

   Paleta neutralna, zeby system pasowal i do gabinetu kosmetycznego,
   i do barbera. Kontrasty sprawdzone pod WCAG AA: tekst 16,2:1,
   tekst przygaszony 5,2:1, bialy na akcencie 5,5:1.
   =========================================================================== */

:root {
    /* powierzchnie */
    --bg: #f7f7f6;
    --surface: #ffffff;
    --surface-alt: #f1f1ef;
    --border: #e4e3e0;
    --border-strong: #d3d2ce;

    /* tekst */
    --text: #1b1a18;
    --muted: #6b6862;

    /* akcent */
    --accent: #0f766e;
    --accent-dark: #0b5b55;
    --accent-soft: #e6f4f2;

    /* slupki wykresu: ten sam odcien co akcent, ale nasycony na tyle,
       zeby dane nie czytaly sie jak szary element interfejsu */
    --chart-bar: #0e9186;

    /* menu boczne */
    --side-bg: #1b1a18;
    --side-text: #a8a49c;
    --side-head: #8c887f;
    --side-active: rgba(255, 255, 255, .09);

    /* stany */
    --ok: #2f7a4f;
    --ok-bg: #e8f3ec;
    --ok-text: #2a6647;
    --warn: #8a5d12;
    --warn-bg: #faf0da;
    --error: #b03a2e;
    --error-bg: #faeae7;
    --error-text: #8e2f25;

    /* ksztalty */
    --r-sm: 6px;
    --r: 10px;
    --r-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(27, 26, 24, .05);
    --shadow: 0 1px 3px rgba(27, 26, 24, .06), 0 8px 24px -12px rgba(27, 26, 24, .12);
    --side-w: 244px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Ikony rysujemy w SVG bez atrybutow width i height, zeby rozmiar szedl
   z arkusza. Bez tej reguly ikona w nowym miejscu rozciaga sie na cala
   wolna szerokosc: tak rozjechal sie ekran "Wiecej" na telefonie. */
svg { width: 20px; height: 20px; flex: none; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 10px; font-weight: 640; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ===========================================================================
   Szkielet panelu
   =========================================================================== */

.app { min-height: 100vh; }

.main {
    padding: 0 0 84px;               /* miejsce na dolna nawigacje */
    min-width: 0;
}

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.wrap--narrow { max-width: 560px; }
.wrap--mid { max-width: 820px; }

/* --- pasek gorny, telefon --------------------------------------------- */
.topbar {
    position: sticky; top: 0; z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-height: 56px; padding: 0 16px;
}
.topbar__title { font-weight: 620; font-size: 16px; }
.topbar__sub { color: var(--muted); font-size: 12px; }

/* --- menu boczne, komputer -------------------------------------------- */
.sidebar { display: none; }

/* --- dolna nawigacja, telefon ----------------------------------------- */
.bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: space-around;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottomnav a {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; color: var(--muted); font-size: 11px; text-decoration: none;
    border-radius: var(--r-sm);
}
.bottomnav a.is-active { color: var(--accent); }
.bottomnav a:hover { text-decoration: none; }
.bottomnav svg { width: 22px; height: 22px; }

/* Nowa wizyta: najczestsza czynnosc dnia, wiec ma wlasny przycisk posrodku. */
.bottomnav__add { flex: none; justify-content: center; }
.bottomnav__add span {
    width: 46px; height: 46px; margin-top: -14px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--accent); color: #fff; box-shadow: var(--shadow);
}
.bottomnav__add svg { width: 24px; height: 24px; }

/* ===========================================================================
   Naglowek strony
   =========================================================================== */

.page {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: 12px;
    padding: 20px 0 4px;
}
.page__title { margin: 0; }
.page__sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.page__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===========================================================================
   Karty i siatki
   =========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}
.card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 4px 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.card__head h2, .card__head h3 { margin: 0; }
.card__body { padding: 18px; }
.card__body > :last-child { margin-bottom: 0; }
.card--flush .card__body { padding: 0; }
.card--flush { overflow: hidden; }

/* Karta z trescia wprost w srodku, bez naglowka i bez card__body.
   Uzywana tam, gdzie karta jest calym ekranem: logowanie, instalator,
   aktualizacja, strony publiczne. */
.card--pad { padding: 18px; }
.card--pad > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 16px; }

/* Domyslne minimum elementu siatki to jego szerokosc min-content, wiec jedna
   linia bez zawijania, na przyklad tresc wiadomosci przyciete wielokropkiem,
   potrafi rozepchnac kolumne szerzej niz ekran i dolozyc stronie poziomy
   pasek przewijania. Zerowe minimum pozwala kolumnie zwezic sie do kontenera,
   a obcinanie tekstu dziala tak, jak mialo dzialac. */
.grid > *, .split > * { min-width: 0; }

.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 15px 16px;
}
.stat__label { color: var(--muted); font-size: 12px; font-weight: 500; }
.stat__value {
    font-size: 25px; font-weight: 660; margin-top: 3px;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat__hint { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ===========================================================================
   Formularze
   =========================================================================== */

.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }

label { display: block; font-size: 13px; font-weight: 520; color: var(--text); margin-bottom: 5px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=date], input[type=time],
input[type=search], select, textarea {
    width: 100%; padding: 10px 12px; font-size: 15px; font-family: inherit;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--r);
    min-height: 42px; transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}
input::placeholder, textarea::placeholder { color: #9d9a94; }
input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-alt); color: var(--muted); cursor: not-allowed;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6862' stroke-width='2' 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;
    padding-right: 34px;
}

.field--error input, .field--error select, .field--error textarea { border-color: var(--error); }
.field__error { color: var(--error-text); font-size: 12.5px; margin-top: 5px; }
.field__hint { color: var(--muted); font-size: 12.5px; margin-top: 5px; }

.field-row { display: grid; gap: 14px; grid-template-columns: 1fr; }

/* przelacznik */
.switch { display: flex; align-items: center; gap: 11px; cursor: pointer; margin: 0; font-weight: 400; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
    width: 40px; height: 23px; border-radius: 999px; background: var(--border-strong);
    position: relative; flex: none; transition: background .15s;
}
.switch__track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 19px; height: 19px; border-radius: 50%; background: #fff;
    box-shadow: var(--shadow-sm); transition: transform .15s;
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch__label { font-size: 14px; }
.switch__label small { display: block; color: var(--muted); font-size: 12.5px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }

/* ===========================================================================
   Przyciski
   =========================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px; padding: 10px 16px;
    border: 1px solid transparent; border-radius: var(--r);
    background: var(--accent); color: #fff;
    font-size: 14.5px; font-weight: 550; font-family: inherit;
    cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--accent-dark); text-decoration: none; color: #fff; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-alt); color: var(--text); }
.btn--quiet { background: transparent; color: var(--muted); border-color: transparent; }
.btn--quiet:hover { background: var(--surface-alt); color: var(--text); }
.btn--danger { background: var(--surface); color: var(--error-text); border-color: #e8c9c4; }
.btn--danger:hover { background: var(--error-bg); color: var(--error-text); }
.btn--sm { min-height: 34px; padding: 6px 11px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ===========================================================================
   Komunikaty, odznaki
   =========================================================================== */

.alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--r); margin-bottom: 16px;
    border: 1px solid; font-size: 14px;
}
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert--info { background: var(--accent-soft); border-color: #c5e4df; color: #0b4f4a; }
.alert--ok { background: var(--ok-bg); border-color: #cbe4d5; color: var(--ok-text); }
.alert--warn { background: var(--warn-bg); border-color: #ecd9ae; color: var(--warn); }
.alert--error { background: var(--error-bg); border-color: #ecccc6; color: var(--error-text); }
.alert strong { font-weight: 620; }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 560; border: 1px solid; white-space: nowrap;
}
.badge--ok { background: var(--ok-bg); border-color: #cbe4d5; color: var(--ok-text); }
.badge--warn { background: var(--warn-bg); border-color: #ecd9ae; color: var(--warn); }
.badge--error { background: var(--error-bg); border-color: #ecccc6; color: var(--error-text); }
.badge--muted { background: var(--surface-alt); border-color: var(--border); color: var(--muted); }
.badge--accent { background: var(--accent-soft); border-color: #c5e4df; color: #0b4f4a; }
.badge--count { background: var(--error); border-color: var(--error); color: #fff; font-variant-numeric: tabular-nums; }

.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

/* ===========================================================================
   Tabele
   =========================================================================== */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th {
    color: var(--muted); font-size: 12px; font-weight: 580;
    text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
    background: var(--surface-alt);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafaf9; }

/* Wiersz podsumowania to nie naglowek kolumny: kwoty i czasy maja tam byc
   czytane normalnie, a nie wersalikami. */
tfoot th {
    text-transform: none; letter-spacing: 0; font-size: 14px;
    font-weight: 620; color: var(--text); border-bottom: none;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.tight, th.tight { width: 1%; white-space: nowrap; }
.table--rows tbody tr { cursor: pointer; }

/* ===========================================================================
   Pusty stan
   =========================================================================== */

.empty { text-align: center; padding: 44px 24px; }
.empty__icon {
    width: 46px; height: 46px; margin: 0 auto 14px;
    display: grid; place-items: center;
    background: var(--surface-alt); border-radius: 50%; color: var(--muted);
}
.empty__icon svg { width: 22px; height: 22px; }
.empty h3 { margin-bottom: 5px; }
.empty p { color: var(--muted); font-size: 14px; max-width: 420px; margin: 0 auto 16px; }

/* ===========================================================================
   Drobiazgi
   =========================================================================== */

.avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 620; color: #fff; letter-spacing: .02em;
}
.avatar--lg { width: 52px; height: 52px; font-size: 18px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.nums { font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: 13px; }
.row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.row--tight { gap: 6px; }
.spacer { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hide-sm { display: none; }

/* Odwrotnosc hide-sm: tresc, ktora ma sens tylko na waskim ekranie, na
   przyklad tresc wiadomosci wciagnieta do kolumny z nazwiskiem, gdy osobna
   kolumna na nia nie ma miejsca. */
.only-sm { display: revert; }

.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tabs a {
    padding: 9px 13px; color: var(--muted); font-size: 14px; font-weight: 520;
    white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.toolbar {
    display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
    padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.toolbar input[type=search], .toolbar input[type=text] { max-width: 280px; }
.toolbar select { max-width: 190px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px; font-size: 13px;
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted);
}
.chip:hover { background: var(--surface-alt); text-decoration: none; color: var(--text); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip svg { width: 14px; height: 14px; }

.divider { height: 1px; background: var(--border); border: 0; margin: 18px 0; }

.list { list-style: none; padding: 0; margin: 0; }
.list li {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.list li:last-child { border-bottom: none; }

/* Wiersz grafiku: dzien tygodnia i dwie godziny. Na telefonie godziny
   schodza pod nazwe dnia, zamiast wypychac cala strone w bok. */
.workday { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.workday .switch { flex: 1 0 150px; }
.workday input[type=time] { width: 116px; flex: none; }

/* Wiersz listy wlasnie zmieniany w formularzu ponizej. */
.list li.is-editing { background: var(--accent-soft); }

/* Lista cech planu: siedzi juz w karcie, wiec bez ramek i bez wciec. */
.list--plain li { padding: 5px 0; border-bottom: none; gap: 8px; }
.list--plain svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ===========================================================================
   Menu przejsc, czyli ekran "Wiecej" na telefonie

   Caly wiersz jest odnosnikiem, bo na telefonie w sam tekst trudno trafic.
   =========================================================================== */

/* Na telefonie ekran zaczyna sie wprost od karty, bo nazwa ekranu zostaje
   w pasku gornym. Karta potrzebuje wtedy wlasnego odstepu od tego paska. */
.card--top { margin-top: 14px; }

.menu { list-style: none; padding: 0; margin: 0; }
.menu li { border-bottom: 1px solid var(--border); }
.menu li:last-child { border-bottom: none; }

.menu__link {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; color: var(--text); min-height: 60px;
}
.menu__link:hover { background: var(--surface-alt); text-decoration: none; }
.menu__link:active { background: var(--surface-alt); }
.menu__link:hover .menu__icon { background: var(--surface); }

.menu__icon {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--surface-alt); color: var(--muted);
}
.menu__icon svg { width: 19px; height: 19px; }

.menu__text { flex: 1; min-width: 0; }
.menu__label { display: block; font-weight: 560; }
.menu__hint { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.menu__link > svg:last-child { width: 16px; height: 16px; color: var(--border-strong); }

/* pasek postepu, np. przy imporcie */
.meter { height: 6px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.meter__fill { height: 100%; background: var(--accent); border-radius: 999px; }

/* ===========================================================================
   Ekrany bez panelu: logowanie, instalator, aktualizacja
   =========================================================================== */

.centered { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.centered .wrap { padding: 0; }
.brandmark {
    text-align: center; margin-bottom: 20px;
    font-size: 21px; font-weight: 680; letter-spacing: -.02em;
}
.brandmark span { color: var(--accent); }

.steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; padding: 0; }
.steps li {
    list-style: none; padding: 5px 11px; border-radius: 999px; font-size: 12.5px;
    background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border);
}
.steps li.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.steps li.is-done { background: var(--ok-bg); color: var(--ok-text); border-color: #cbe4d5; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
    display: flex; gap: 11px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.checklist li:last-child { border-bottom: none; }
.checklist .mark {
    width: 21px; height: 21px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 11px;
}
.checklist .mark--done { background: var(--ok-bg); color: var(--ok-text); }
.checklist .mark--todo { background: var(--surface-alt); color: var(--muted); }

.footnote { padding: 22px 0 32px; color: var(--muted); font-size: 12.5px; }
.footnote a { color: var(--muted); }

/* ===========================================================================
   Od 720 pikseli: dwie kolumny w formularzach i siatkach
   =========================================================================== */

@media (min-width: 720px) {
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row--3 { grid-template-columns: repeat(3, 1fr); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .hide-sm { display: revert; }
    .only-sm { display: none; }
    h1 { font-size: 27px; }
}

/* ===========================================================================
   Od 900 pikseli: menu boczne zamiast dolnej nawigacji
   =========================================================================== */

@media (min-width: 900px) {
    .app { display: grid; grid-template-columns: var(--side-w) 1fr; }

    .sidebar {
        display: flex; flex-direction: column;
        position: sticky; top: 0; height: 100vh;
        background: var(--side-bg); color: var(--side-text);
        padding: 18px 12px 14px;
    }
    .sidebar__brand {
        display: flex; align-items: center; gap: 9px;
        padding: 4px 10px 18px; color: #fff; font-size: 18px; font-weight: 680;
        letter-spacing: -.02em; text-decoration: none;
    }
    .sidebar__brand:hover { text-decoration: none; }
    .sidebar__brand span { color: #5eccc0; }

    .sidebar__section {
        padding: 16px 10px 6px; font-size: 11px; font-weight: 620;
        text-transform: uppercase; letter-spacing: .06em; color: var(--side-head);
    }
    .sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
    .sidebar__link {
        display: flex; align-items: center; gap: 11px;
        padding: 9px 10px; border-radius: var(--r);
        color: var(--side-text); font-size: 14.5px; text-decoration: none;
    }
    .sidebar__link:hover { background: var(--side-active); color: #fff; text-decoration: none; }
    .sidebar__link.is-active { background: var(--side-active); color: #fff; font-weight: 550; }
    .sidebar__link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
    .sidebar__link.is-active svg { opacity: 1; }
    .sidebar__link .badge { margin-left: auto; }

    .sidebar__foot {
        margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255, 255, 255, .09);
        font-size: 12.5px;
    }
    .sidebar__foot a { color: var(--side-text); }
    .sidebar__user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #fff; }
    .sidebar__user small { display: block; color: var(--side-text); font-weight: 400; }

    .topbar { display: none; }
    .bottomnav { display: none; }
    .main { padding-bottom: 0; }
    .wrap { padding: 0 28px; }
    .page { padding: 26px 0 6px; }
    .card--top { margin-top: 0; }
}

@media (min-width: 1200px) {
    .wrap { padding: 0 36px; }
}

/* ===========================================================================
   Kalendarz

   Siatka liczona jest w minutach, a na piksele przelicza ja zmienna
   --cal-hour. Zmiana jednej liczby zmienia gestosc calego kalendarza,
   bo bloki wizyt, pasy urlopow i linie godzin korzystaja z tej samej skali.
   =========================================================================== */

.calbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    justify-content: space-between; margin: 0 0 12px;
}
.calbar__dates { display: flex; align-items: center; gap: 6px; }
.calbar__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calbar__title { display: flex; align-items: center; gap: 8px; margin-left: 4px; min-width: 0; }
.calbar__title strong {
    font-size: 16px; font-weight: 620; letter-spacing: -.01em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

.calbar__arrow {
    width: 34px; height: 34px; display: grid; place-items: center; flex: none;
    border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text);
}
.calbar__arrow:hover { background: var(--surface-alt); text-decoration: none; }
.calbar__arrow svg { width: 17px; height: 17px; }
.calbar__arrow--next svg { transform: rotate(180deg); }

/* Pole daty ukryte pod ikona. Przegladarka rysuje wlasne pole daty inaczej
   na kazdym systemie, wiec zamiast walczyc z jego wygladem, lezy ono
   przezroczyste na ikonie kalendarza. Klikniecie otwiera wybor daty. */
.calbar__picker { position: relative; overflow: hidden; cursor: pointer; }
.calbar__picker input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    min-height: 0; padding: 0; margin: 0; border: 0; opacity: 0; cursor: pointer;
}
.calbar__people { margin-bottom: 12px; }

/* Na telefonie nowa wizyta ma przycisk w dolnym pasku, wiec tutaj znika. */
.calbar__add { display: none; }

.switcher {
    display: inline-flex; background: var(--surface-alt); border-radius: var(--r-sm);
    padding: 3px; border: 1px solid var(--border);
}
.switcher a {
    padding: 5px 12px; border-radius: 5px; font-size: 13.5px; font-weight: 520;
    color: var(--muted);
}
.switcher a:hover { color: var(--text); text-decoration: none; }
.switcher a.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.cal { --cal-hour: 52px; --cal-gutter: 46px; --cal-col: 132px; margin-bottom: 14px; }
.cal__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cal__head {
    display: grid; grid-template-columns: var(--cal-gutter) repeat(var(--cal-cols), minmax(var(--cal-col), 1fr));
    position: sticky; top: 0; z-index: 3; background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.cal__corner { border-right: 1px solid var(--border); }
.cal__colhead {
    padding: 9px 8px; text-align: center; font-size: 13px; font-weight: 560;
    border-left: 1px solid var(--border); display: flex; flex-direction: column;
    align-items: center; gap: 2px; min-width: 0;
}
.cal__colhead small { font-size: 11.5px; font-weight: 400; }
.cal__colhead--link { color: var(--text); }
.cal__colhead--link:hover { background: var(--surface-alt); text-decoration: none; }
.cal__colhead--link strong { font-size: 15px; }
.cal__colhead.is-today { color: var(--accent); background: var(--accent-soft); }

.cal__body {
    display: grid; grid-template-columns: var(--cal-gutter) repeat(var(--cal-cols), minmax(var(--cal-col), 1fr));
    position: relative;
}
.cal__hours { position: relative; border-right: 1px solid var(--border); }
.cal__hour { height: var(--cal-hour); position: relative; }
.cal__hour span {
    position: absolute; top: -7px; right: 7px; font-size: 11.5px; color: var(--muted);
    font-variant-numeric: tabular-nums; background: var(--surface); padding: 0 1px;
}
.cal__hour:first-child span { top: 2px; }

.cal__col { position: relative; border-left: 1px solid var(--border); min-width: 0; }
.cal__line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
/* Godziny poza praca. Ton ciemniejszy niz reszta powierzchni przygaszonych,
   bo na siatce kalendarza roznica pieciu procent jasnosci jest niewidoczna. */
.cal__closed { position: absolute; left: 0; right: 0; background: #edebe6; }
.cal__off {
    position: absolute; left: 2px; right: 2px; border-radius: var(--r-sm);
    background: repeating-linear-gradient(135deg, #ece9e3 0 7px, #f4f2ee 7px 14px);
    border: 1px solid var(--border-strong); display: flex; align-items: flex-start;
    justify-content: center; overflow: hidden;
}
.cal__off span { font-size: 11px; color: var(--muted); padding: 3px; }
.cal__now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--error); z-index: 2; }
.cal__now::before {
    content: ''; position: absolute; left: -1px; top: -5px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--error);
}
.cal__hint { margin: 0 0 18px; }

.appt {
    position: absolute; overflow: hidden; z-index: 2;
    padding: 3px 6px; border-radius: var(--r-sm);
    border: 1px solid var(--appt-color, var(--accent));
    border-left: 3px solid var(--appt-color, var(--accent));
    background: var(--surface); color: var(--text);
    font-size: 12px; line-height: 1.3; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; text-decoration: none;
}
.appt:hover { text-decoration: none; z-index: 4; box-shadow: var(--shadow); }
.appt__time { font-weight: 620; font-variant-numeric: tabular-nums; }
/* Jedna linia na pozycje, ucinana wielokropkiem. Przyciety w polowie wiersz
   tekstu wyglada jak blad, a i tak nic nie mowi. */
.appt__name, .appt__service { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt__name { font-weight: 520; }
.appt__service { color: var(--muted); font-size: 11px; }
/* Krotka wizyta: godzina i nazwisko obok siebie, bo na dwa wiersze nie ma miejsca. */
.appt--tight { flex-direction: row; gap: 5px; padding: 1px 6px; font-size: 11.5px; align-items: baseline; }
.appt--tight .appt__name { min-width: 0; }
.appt--narrow { padding: 3px 4px; font-size: 11px; }
.appt--narrow .appt__name { color: var(--muted); }
.appt--confirmed { background: color-mix(in srgb, var(--appt-color) 12%, var(--surface)); }
.appt--completed { opacity: .72; }
.appt--cancelled { opacity: .55; border-style: dashed; }
.appt--cancelled .appt__name { text-decoration: line-through; }
.appt--no_show { border-color: var(--error); border-left-color: var(--error); background: var(--error-bg); }

/* Wizyta z rezerwacji online. Kropka w rogu zamiast innego koloru bloku:
   kolor nalezy do pracownika i ma zostac czytelny. */
.appt--online::after {
    content: ""; position: absolute; top: 4px; right: 4px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--appt-color, var(--accent));
}
/* Wizyta z internetu czekajaca na potwierdzenie: przerywana ramka mowi,
   ze termin jest zajety warunkowo. */
.appt--online.appt--scheduled { border-style: dashed; }
.appt.is-dragging { opacity: .82; cursor: grabbing; z-index: 6; box-shadow: var(--shadow); }
.appt[data-draggable] { cursor: grab; touch-action: pan-y; }

.appt-buffer {
    position: absolute; z-index: 1; border-radius: 0 0 var(--r-sm) var(--r-sm);
    background: repeating-linear-gradient(135deg, #e7e5e0 0 5px, #f2f1ed 5px 10px);
}

/* Miesiac */
.month { display: grid; grid-template-columns: repeat(7, 1fr); }
.month__name {
    padding: 8px 4px; text-align: center; font-size: 11.5px; color: var(--muted);
    border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .03em;
}
.month__cell {
    min-height: 74px; padding: 6px; border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border); color: var(--text);
    display: flex; flex-direction: column; gap: 2px;
}
.month__cell:nth-child(7n + 1) { border-left: none; }
.month__cell:hover { background: var(--surface-alt); text-decoration: none; }
.month__cell.is-outside { background: var(--bg); color: var(--muted); }
.month__cell.is-closed .month__day { color: var(--muted); }
.month__cell.is-today .month__day {
    background: var(--accent); color: #fff; border-radius: 50%;
    width: 22px; height: 22px; display: grid; place-items: center;
}
.month__day { font-size: 13px; font-weight: 560; font-variant-numeric: tabular-nums; }
.month__count {
    align-self: flex-start; font-size: 12px; font-weight: 620; color: var(--accent);
    background: var(--accent-soft); border-radius: 999px; padding: 1px 8px;
}
.month__first, .month__closed { font-size: 11px; color: var(--muted); }

/* Formularz wizyty */
.apptform { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.apptform__side { position: relative; }

.picker { position: relative; }
.picker__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; max-height: 260px; overflow-y: auto;
}
.picker__item {
    display: flex; justify-content: space-between; gap: 10px; width: 100%;
    padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--border);
    text-align: left; font: inherit; color: var(--text); cursor: pointer;
}
.picker__item:last-child { border-bottom: none; }
.picker__item:hover, .picker__item.is-active { background: var(--accent-soft); }
.picker__item small { color: var(--muted); }

.picklist { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.picklist__group {
    padding: 7px 12px; background: var(--surface-alt); font-size: 12px;
    color: var(--muted); font-weight: 560; text-transform: uppercase; letter-spacing: .03em;
}
.picklist__item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-top: 1px solid var(--border); cursor: pointer; font-weight: 400; margin: 0;
}
.picklist__item:hover { background: var(--surface-alt); }
.picklist__item.is-chosen { background: var(--accent-soft); }
.picklist__item input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.picklist__name { flex: 1; min-width: 0; font-size: 14px; }
.picklist__name small { display: block; font-size: 12px; }
.picklist__price { font-size: 13.5px; white-space: nowrap; }

.slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.slot {
    padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--surface); font-size: 13px; font-variant-numeric: tabular-nums;
    cursor: pointer; font-family: inherit; color: var(--text);
}
.slot:hover { background: var(--accent-soft); border-color: var(--accent); }
.slot.is-chosen { background: var(--accent); border-color: var(--accent); color: #fff; }

.sum { border-top: 1px solid var(--border); }
.sum__row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.sum__row span { color: var(--muted); }

.split { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }

.drop summary { list-style: none; cursor: pointer; }
.drop summary::-webkit-details-marker { display: none; }

.avatar--sm { width: 24px; height: 24px; font-size: 10px; }

/* Krotki komunikat po przeciagnieciu wizyty. Nad dolna nawigacja, zeby
   nie zaslanial przyciskow na telefonie. */
.toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60;
    max-width: calc(100% - 32px);
    background: var(--text); color: #fff;
    padding: 11px 16px; border-radius: var(--r); font-size: 14px;
    box-shadow: var(--shadow); animation: toast-in .18s ease-out;
}
.toast--warn { background: var(--warn); }
.toast.is-leaving { opacity: 0; transition: opacity .3s; }

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (min-width: 720px) {
    .cal { --cal-hour: 56px; --cal-gutter: 54px; --cal-col: 104px; }
    .calbar__add { display: inline-flex; }
    .apptform { grid-template-columns: minmax(0, 1fr) 320px; }
    .split { grid-template-columns: minmax(0, 1fr) 320px; }
    .month__cell { min-height: 96px; padding: 8px; }
}

@media (min-width: 900px) {
    .cal { --cal-hour: 58px; }
    .toast { bottom: 24px; }
}

/* ===========================================================================
   Wykres przychodu

   Slupki sa z HTML i CSS, bez biblioteki i bez obrazka: polityka
   bezpieczenstwa nie dopuszcza skryptow z zewnatrz, a tekst ma byc czytelny
   na telefonie tak samo jak na monitorze. Pod wykresem jest ta sama tresc
   w tabeli, dla czytnikow ekranu i do druku.
   =========================================================================== */

.chart { display: flex; gap: 10px; }

.chart__axis {
    display: flex; flex-direction: column; justify-content: space-between;
    height: 190px; font-size: 11px; color: var(--muted);
    font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
    padding-bottom: 18px;    /* miejsce na podpisy osi poziomej */
}

.chart__plot { position: relative; flex: 1; min-width: 0; height: 190px; }
.chart__line {
    position: absolute; left: 0; right: 0; height: 1px;
    background: var(--border); pointer-events: none;
}

.chart__bars {
    display: flex; align-items: flex-end; gap: 2px;
    height: 100%; padding-bottom: 18px;
    border-bottom: 1px solid var(--border-strong);
}

.chart__col {
    flex: 1; min-width: 0; height: 100%; position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.chart__col:hover .chart__fill { background: var(--accent); }

.chart__fill {
    width: 100%; background: var(--chart-bar);
    border-radius: 4px 4px 0 0; min-height: 2px;
}
.chart__fill.is-empty { background: var(--surface-alt); min-height: 2px; }

.chart__value {
    position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    font-size: 11px; font-weight: 620; color: var(--text);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}

.chart__tick {
    position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Zmiana wzgledem poprzedniego okresu pod liczba na kafelku. */
.stat__hint--ok { color: var(--ok-text); }
.stat__hint--warn { color: var(--warn); }
.stat__hint--muted { color: var(--muted); }

/* Licznik znakow SMS: druga czesc wiadomosci to drugi kredyt, wiec przejscie
   przez granice ma byc widoczne, a nie tylko policzone. */
.field__hint--warn { color: var(--warn); font-weight: 560; }

@media (min-width: 720px) {
    .chart__axis, .chart__plot { height: 230px; }
}

/* ===========================================================================
   Druk: bez nawigacji, bez cieni
   =========================================================================== */

@media print {
    .sidebar, .bottomnav, .topbar, .page__actions, .toolbar { display: none !important; }
    .app { display: block; }
    .card { box-shadow: none; break-inside: avoid; }
}

/* ===========================================================================
   Panel operatora
   ===========================================================================
   Celowo wyglada inaczej niz panel salonu: ciemny pasek zamiast menu bocznego.
   Dwie otwarte zakladki, w jednej wlasny salon, w drugiej cudzy, to sytuacja,
   w ktorej pomylka kosztuje najwiecej, wiec roznica ma byc widoczna katem oka.
   =========================================================================== */

.opbody { background: var(--bg); }

/* Etykieta nad grupa przyciskow, tam gdzie nie ma pola formularza. */
.field__inline { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 560; }

.opbar { background: var(--side-bg); color: #f3f1ee; }
.opbar__inner { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.opbar__brand { color: #fff; font-weight: 680; text-decoration: none; letter-spacing: -.01em; }
.opbar__brand span { color: var(--accent); }
.opbar__brand small {
    display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
    background: rgba(255, 255, 255, .12); color: #e8e6e1;
    font-size: 11px; font-weight: 560; text-transform: uppercase; letter-spacing: .06em;
}
.opbar__nav { display: flex; gap: 4px; flex-wrap: wrap; }
.opbar__nav a {
    color: var(--side-text); text-decoration: none; font-size: 14px; font-weight: 520;
    padding: 7px 11px; border-radius: var(--r-sm);
}
.opbar__nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.opbar__nav a.is-active { background: rgba(255, 255, 255, .14); color: #fff; }
.opbar__who { color: var(--side-text); font-size: 13px; }

/* Pasek pracy w cudzym salonie. Zolty, bo to stan wyjatkowy, a nie tryb pracy. */
.opnotice { background: var(--warn-bg); border-bottom: 1px solid #ecd9ae; color: var(--warn); }
.opnotice__inner { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.opnotice svg { width: 18px; height: 18px; flex: none; }
.opnotice strong { font-weight: 620; }

@media (max-width: 720px) {
    .opbar__inner { flex-wrap: wrap; gap: 10px; }
    .opnotice__inner { flex-wrap: wrap; }
}


/* ===========================================================================
   Abonament
   ===========================================================================
   Ekran, na ktorym salon wydaje pieniadze, ma wygladac na policzony, a nie
   na formularz. Stad kafelki z jedna duza liczba i jednym przyciskiem,
   zamiast tabeli z cenami.

   Przelacznik miesiac/rok dziala bez skryptu: dwa pola wyboru schowane nad
   siatka i regula CSS na rodzenstwie. CSP nie dopuszcza skryptow w tresci
   strony, a to i tak jest szybsze.
   =========================================================================== */

/* Pasek o abonamencie w panelu. Trzy kolory, bo trzy rozne wiadomosci:
   informacja o konczacym sie okresie probnym, ostrzezenie i blokada. */
.billnotice { border-bottom: 1px solid var(--border); }
.billnotice__inner { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.billnotice svg { width: 18px; height: 18px; flex: none; }
.billnotice--info { background: var(--accent-soft); border-bottom-color: #c5e4df; color: #0b4f4a; }
.billnotice--warn { background: var(--warn-bg); border-bottom-color: #ecd9ae; color: var(--warn); }
.billnotice--error { background: var(--error-bg); border-bottom-color: #ecccc6; color: var(--error-text); }

/* --- stan konta ---------------------------------------------------------- */

.hero {
    display: grid; gap: 18px; margin-bottom: 18px; padding: 20px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.hero__label { color: var(--muted); font-size: 12px; font-weight: 500; }
.hero__plan { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.hero__name { font-size: 27px; font-weight: 680; letter-spacing: -.02em; }
.hero__note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.hero__note strong { color: var(--text); font-weight: 600; }
.hero__meter { margin-top: 12px; max-width: 420px; }
.hero__side { display: flex; gap: 26px; }
.hero__stat { min-width: 0; }
.hero__value {
    font-size: 23px; font-weight: 660; margin-top: 2px;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.hero__hint { color: var(--muted); font-size: 12px; }

@media (min-width: 760px) {
    .hero { grid-template-columns: 1fr auto; align-items: center; }
    .hero__side { justify-content: flex-end; text-align: right; }
}

/* --- plany --------------------------------------------------------------- */

.plans { position: relative; margin-bottom: 18px; }
.plans__radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.plans__head {
    display: flex; gap: 14px; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; margin-bottom: 14px;
}
.plans__title { margin: 0; font-size: 20px; font-weight: 660; letter-spacing: -.01em; }
.plans__sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

.plans__switch {
    display: inline-flex; gap: 3px; padding: 3px;
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px;
}
.plans__switch label {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 14px; border-radius: 999px;
    font-size: 13.5px; font-weight: 560; color: var(--muted);
    transition: background .12s ease, color .12s ease;
}
.plans__switch label span {
    font-size: 11px; font-weight: 620; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ok-text); background: var(--ok-bg); border-radius: 999px; padding: 2px 6px;
}
#okres-month:checked ~ .plans__head .plans__switch label[for="okres-month"],
#okres-year:checked ~ .plans__head .plans__switch label[for="okres-year"] {
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
}
#okres-month:focus-visible ~ .plans__head .plans__switch label[for="okres-month"],
#okres-year:focus-visible ~ .plans__head .plans__switch label[for="okres-year"] {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
#okres-month:checked ~ .plans__grid .is-year { display: none; }
#okres-year:checked ~ .plans__grid .is-month { display: none; }

.plans__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) {
    .plans__grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}

.plan {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm);
}
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow); }
.plan--current { border-color: var(--accent); }
.plan__ribbon {
    position: absolute; top: -11px; left: 22px; padding: 3px 10px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 620;
    letter-spacing: .02em;
}
.plan__head { display: flex; align-items: center; gap: 10px; }
.plan__name { margin: 0; font-size: 18px; font-weight: 660; }
.plan__price {
    margin-top: 14px; font-size: 34px; font-weight: 680; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.plan__price span { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.plan__note { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.plan__features { list-style: none; margin: 18px 0 0; padding: 0; }
.plan__features li { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; font-size: 14px; }
.plan__features svg { width: 17px; height: 17px; flex: none; color: var(--accent); margin-top: 1px; }

.plan__warn {
    display: flex; gap: 9px; margin: 16px 0 0; padding: 10px 12px;
    background: var(--warn-bg); border-radius: var(--r); color: var(--warn); font-size: 13px;
}
.plan__warn svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

.plan__action { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }

/* --- pakiety SMS --------------------------------------------------------- */

.pkg {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 18px; text-align: center; box-shadow: var(--shadow-sm);
}
.pkg--best { border-color: var(--accent); }
.pkg__badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 620;
}
.pkg__name { color: var(--muted); font-size: 12.5px; font-weight: 560; }
.pkg__credits {
    font-size: 31px; font-weight: 680; letter-spacing: -.03em; margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.pkg__unit { color: var(--muted); font-size: 12px; }
.pkg__price { margin-top: 12px; font-size: 19px; font-weight: 640; }
.pkg__rate { color: var(--muted); font-size: 12.5px; }

/* ===========================================================================
   Etap 8: powiadomienia i klienci do odzyskania
   =========================================================================== */

/* --- dzwonek w pasku gornym -------------------------------------------- */
.bell {
    position: relative; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%;
    color: var(--muted); text-decoration: none;
}
.bell:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.bell svg { width: 21px; height: 21px; }
.bell.is-active { color: var(--accent); }
.bell__count {
    position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--error); color: #fff; border: 2px solid var(--surface);
    font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* --- lista powiadomien -------------------------------------------------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed__item { border-top: 1px solid var(--border); }
.feed__item:first-child { border-top: 0; }
.feed__link {
    display: flex; gap: 13px; align-items: flex-start; padding: 14px 18px;
    color: inherit; text-decoration: none;
}
a.feed__link:hover { background: var(--surface-alt); text-decoration: none; }
.feed__icon {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: var(--surface-alt); color: var(--muted);
}
.feed__icon svg { width: 17px; height: 17px; }
.feed__main { flex: 1; min-width: 0; }
.feed__title { font-weight: 600; font-size: 14.5px; }
.feed__body { color: var(--muted); font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
.feed__when { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.feed__item.is-new { background: var(--accent-soft); }
.feed__item.is-new .feed__icon { background: #fff; color: var(--accent); }
.feed__item.is-new .feed__title::before {
    content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); margin-right: 7px; vertical-align: 2px;
}

/* --- klienci do odzyskania ---------------------------------------------- */
.wb { list-style: none; margin: 0; padding: 0; }
.wb__item {
    display: grid; gap: 10px; padding: 15px 18px; border-top: 1px solid var(--border);
    grid-template-columns: 1fr;
}
.wb__item:first-child { border-top: 0; }
.wb__name { font-weight: 620; }
.wb__reason { font-size: 14px; margin-top: 2px; }
.wb__meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.wb__actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.wb__actions form { margin: 0; }
@media (min-width: 720px) {
    .wb__item { grid-template-columns: 1fr auto; align-items: center; }
    .wb__actions { justify-content: flex-end; }
}

/* --- podglad SMS: dymek jak w telefonie -------------------------------- */
.sms-preview {
    position: relative; max-width: 360px; padding: 10px 13px;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 14px 14px 14px 4px; font-size: 14px; line-height: 1.45;
    overflow-wrap: anywhere;
}

/* --- male listy na pulpicie ---------------------------------------------- */
.mini-list { list-style: none; margin: 0; padding: 4px 18px 12px; }
.mini-list li {
    display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
    border-top: 1px solid var(--border); font-size: 14px;
}
.mini-list li:first-child { border-top: 0; }
.mini-list .spacer { min-width: 0; }