/* style.css — ArtOn studio: fundament wspólny (tokeny, typografia, nagłówek, przyciski, pola, podzakładki,
   tabele, modale, toasty, badge, statusy, ruch globalny) + kalendarz panelu.
   Panele/karty/wiersze list w panelu: panel.css; portal i strony publiczne: rodzic.css / public.css. */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* =====================================================================
   0. TOKENY
   ===================================================================== */
:root {
  /* ===== MARKA: lawenda 50–900 (400 = kolor logo #a996cf — tylko dekoracja; 600 = #7d68a8 — akcje, biel 4,75:1; 700 — tekst akcentowy/linki 6,7:1) ===== */
  --lav-50:  #f7f4fc;
  --lav-100: #efeaf8;
  --lav-200: #ddd3ef;
  --lav-300: #c4b4e1;
  --lav-400: #a996cf;
  --lav-500: #927dbf;
  --lav-600: #7d68a8;
  --lav-700: #62509a;
  --lav-800: #4a3a73;
  --lav-900: #332a4e;
  --lav-rgb: 125, 104, 168;

  /* ===== NEUTRALE: chłodna szarość z nutą lawendy ===== */
  --n-0:   #ffffff;
  --n-50:  #faf9fc;   /* hover wierszy, tło th, wnętrza akordeonu */
  --n-100: #f3f1f7;   /* tło segmented control, tło czatu, inset */
  --n-200: #e6e2ee;   /* hairline: separatory, obramowania kart */
  --n-300: #d6d1df;   /* obramowania pól i przycisków, uchwyt arkusza */
  --n-400: #b4adc2;
  --n-500: #8d86a0;   /* placeholder, ikony nieaktywne (tylko elementy nietekstowe) */
  --n-600: #6b6479;   /* muted: 5,3:1 na białym, 4,8:1 na n-100 */
  --n-700: #4a4459;
  --n-800: #2b2637;   /* tekst główny 13,6:1 */
  --n-900: #1c1824;   /* toast */
  --ink: 43, 38, 55;  /* rgb() do cieni i przyciemnień */

  /* ===== POWIERZCHNIE / TEKST (semantyka) ===== */
  --bg: #f3effa;                /* tło strony (lawendowe) — białe karty unoszą się; muted 4,98:1, tekst 12,9:1 */
  --bg-inset: var(--lav-100);   /* segmenty, hover przycisków, pola wyłączone — lawenda zamiast szarości */
  --bg-hover: var(--n-50);
  --panel: #ffffff;
  --panel-tint: var(--n-50);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --border-hover: #c9c3d4;
  --line: var(--n-200);         /* .pay-due-btn używał niezdefiniowanej --line */
  --hairline: rgba(43, 38, 55, 0.08);
  --text: var(--n-800);
  --text-2: var(--n-700);
  --muted: var(--n-600);
  --text-faint: #716a85;        /* drugorzędny tekst: 5,1:1 na bieli, 4,5:1 na --bg (n-500 miało 3,5:1) */
  --header-bg: #a794c0;         /* kolor logo R167 G148 B192 (podany przez właściciela, 23.09) */
  /* nagłówek: jednolity fiolet z logo #a794c0 — biel 2,7:1 (świadoma decyzja właściciela: kolor jak w logo) */
  --header-grad: linear-gradient(180deg, #a794c0 0%, #a794c0 100%); /* jednolity kolor logo */
  --on-header: #ffffff;
  --on-header-2: rgba(255, 255, 255, 0.95);
  --heading: var(--lav-800);    /* nagłówki sekcji: fiolet 9,8:1 */
  --on-accent: #ffffff;

  /* ===== ALIASY ZGODNOŚCI — istniejące reguły style.css / rodzic.css działają bez przepisywania ===== */
  --accent: var(--lav-400);        /* UWAGA: nigdy pod biały tekst — miejsca z białym tekstem nadpisane w komponentach */
  --accent-dark: var(--lav-600);
  --accent-light: var(--lav-100);
  --accent-soft: var(--lav-50);

  /* ===== SKALE SEMANTYCZNE: 500 = kropka/pasek, 600 = tło pod biel (≥5,4:1), 700 = tekst na tincie (≥5,1:1), 50 = tinta, 200 = obwódka tinty ===== */
  --green-500: #3fa56f; --green-600: #25784d; --green-700: #1f6b43; --green-50: #e7f5ec; --green-200: #c9e7d5;
  --red-500:   #d94a6a; --red-600:   #b8304f; --red-700:   #a12744; --red-50:   #fdecf0; --red-200:   #f4c9d3;
  --amber-500: #e8a13c; --amber-700: #8a5a12; --amber-50:  #fdf3e3; --amber-200: #f3dfb8;
  --blue-500:  #4f93d8; --blue-700:  #245f9c; --blue-50:   #e8f1fb; --blue-200:  #c9ddf3;
  --gray-500:  #b0adb8; --gray-700:  #6b6875; --gray-50:   #efeef2;

  --ok: var(--green-600);        --ok-bg: var(--green-50);      --ok-fg: var(--green-700);     --ok-line: var(--green-200);
  --danger: var(--red-600);      --danger-bg: var(--red-50);    --danger-fg: var(--red-700);   --danger-line: var(--red-200);  --danger-strong: var(--red-600);
  --warn: var(--amber-500);      --warn-bg: var(--amber-50);    --warn-fg: var(--amber-700);   --warn-line: var(--amber-200);
  --info: var(--lav-400);        --info-bg: var(--lav-50);      --info-fg: var(--lav-700);     --info-line: var(--lav-200);
  --now: #ff453a;                /* linia „teraz” w kalendarzu — bez zmian */

  /* ===== STATUSY obecności (kropka / tinta / tekst / tło pod biel) — zastępują blok :root z rodzic.css ===== */
  --st-present:   var(--green-500); --st-present-bg:   var(--green-50); --st-present-fg:   var(--green-700); --st-present-strong: var(--green-600); --st-present-line: var(--green-200);
  --st-absent:    var(--red-500);   --st-absent-bg:    var(--red-50);   --st-absent-fg:    var(--red-700);   --st-absent-strong:  var(--red-600);   --st-absent-line:  var(--red-200);
  --st-reported:  var(--amber-500); --st-reported-bg:  var(--amber-50); --st-reported-fg:  var(--amber-700); --st-reported-line: var(--amber-200);
  --st-cancelled: var(--gray-500);  --st-cancelled-bg: var(--gray-50);  --st-cancelled-fg: var(--gray-700);
  --st-upcoming:  var(--lav-400);   --st-upcoming-bg:  var(--lav-100);  --st-upcoming-fg:  var(--lav-700);
  --st-guest:     var(--blue-500);  --st-guest-bg:     var(--blue-50);  --st-guest-fg:     var(--blue-700);  --st-guest-strong: #2f6aa8;
  --st-unmarked:  var(--n-300);     --st-unmarked-bg:  var(--n-100);    --st-unmarked-fg:  var(--n-600);

  /* ===== TYPOGRAFIA ===== */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-logo: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 11px;  /* overline, badge, pigułka */
  --fs-xs:  12px;  /* chip, chat-time, sms-counter */
  --fs-sm:  13px;  /* meta, label, small button, footnote */
  --fs-md:  14px;  /* wiersze list, tabele, banner, chat */
  --fs-base: 15px; /* body, h3, przyciski */
  --fs-lg:  17px;  /* h2 sekcji, CTA landing */
  --fs-xl:  20px;  /* modal h2, .sc-num */
  --fs-2xl: 22px;  /* title-1 (.cal-head h2 poza kalendarzem) */
  --fs-3xl: 28px;  /* display, .tile strong 24 px */
  --fs-4xl: 34px;  /* display ≥700 px */
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.47;
  --track-display: -0.025em; --track-tight: -0.02em; --track-snug: -0.012em; --track-caps: 0.08em;

  /* ===== PROMIENIE ===== */
  --r-xs: 6px;    /* kafelki kalendarza, chip-x */
  --r-sm: 8px;    /* button.small, pola kompaktowe, element segmentu */
  --r-md: 10px;   /* button, input, wiersz listy, banner, toast */
  --r-lg: 14px;   /* .panel, .tile, .session-card, .pay-month, fieldset, .table-wrap */
  --r-xl: 18px;   /* .modal, .cal-panel, karta logowania */
  --r-2xl: 22px;  /* arkusz mobilny */
  --r-pill: 999px;

  /* ===== CIENIE: 3 poziomy + akcent + segment + ring ===== */
  --sh-1: 0 0 0 1px rgba(var(--lav-rgb), .05), 0 1px 2px rgba(var(--lav-rgb), .08), 0 10px 26px -20px rgba(var(--lav-rgb), .45);                                                       /* spoczynek kart */
  --sh-2: 0 0 0 1px rgba(var(--ink), .05), 0 4px 12px -2px rgba(var(--ink), .06), 0 12px 32px -14px rgba(var(--lav-rgb), .28);     /* hover, popover, dropdown */
  --sh-3: 0 0 0 1px rgba(var(--ink), .06), 0 8px 20px -8px rgba(var(--ink), .10), 0 28px 64px -20px rgba(var(--ink), .35);         /* modal, toast */
  --sh-accent: 0 1px 2px rgba(var(--lav-rgb), .25), 0 8px 18px -8px rgba(var(--lav-rgb), .60);                                       /* primary, aktywna pigułka */
  --sh-accent-hover: 0 1px 2px rgba(var(--lav-rgb), .30), 0 10px 22px -8px rgba(var(--lav-rgb), .70);
  --sh-brand: 0 1px 2px rgba(var(--lav-rgb), .20), 0 16px 32px -12px rgba(var(--lav-rgb), .55);                                      /* kafelek logo */
  --sh-seg: 0 1px 3px rgba(var(--ink), .12), 0 0 0 1px rgba(var(--ink), .04);                                                        /* aktywny segment (jak .cal-seg) */
  --ring: 0 0 0 2px #fff, 0 0 0 4px var(--lav-500);   /* fokus widoczny także na lawendzie: 3,1–3,6:1 */
  --ring-inset: inset 0 0 0 2px var(--lav-500);
  --ring-danger: 0 0 0 4px rgba(217, 74, 106, .20);

  /* ===== ODSTĘPY (siatka 4 px) i WYMIARY ===== */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --gutter: 16px;
  --pad-panel: 16px;
  --gap-panel: 16px;
  --container: 1200px; --container-portal: 860px;
  --ctl-h: 40px;      /* button */
  --ctl-h-sm: 32px;   /* button.small (desktop), segment, chip */
  --ctl-h-lg: 48px;   /* CTA landing / logowanie */
  --field-h: 44px;    /* input/select */
  --nav-h: 44px;      /* pasek zakładek */
  --head-h: 56px;     /* nagłówek */
  --touch: 44px;
  --row-h: 44px; --row-h-mobile: 52px;

  /* ===== RUCH ===== */
  --t-micro: 90ms;    /* press */
  --t-fast: 140ms;    /* kolor, tło, obramowanie, focus */
  --t-base: 200ms;    /* transform, cień, podkreślenie zakładki, caret */
  --t-enter: 260ms;   /* wejście widoku, modal, toast, badge */
  --t-slow: 320ms;    /* arkusz mobilny, zmiana widoku portalu */
  --ease-out: cubic-bezier(.2, .8, .2, 1);        /* domyślna — identyczna z .cal-enter */
  --ease-standard: cubic-bezier(.25, .1, .25, 1); /* zmiany koloru */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);    /* obroty, przesunięcia */
  --ease-exit: cubic-bezier(.4, 0, 1, 1);         /* wyjścia (o ~30 % krótsze) */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);  /* TYLKO elementy < 40 px: badge, kropka, ikona nawigacji */
}
@media (min-width: 700px) {
  :root { --gutter: 24px; --pad-panel: 20px; --gap-panel: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-micro: 0ms; --t-fast: 0ms; --t-base: 0ms; --t-enter: 0ms; --t-slow: 0ms; }
}

/* =====================================================================
   1. FUNDAMENT: body, typografia, linki, overline, liczby, focus
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
/* jedna rodzina w całym systemie (Playfair tylko w logo — patrz nagłówek) */
h1, h2, h3, h4, .tab-btn, .tile strong, .sc-num, .ann-head strong, .pm-head strong, .pay-upcoming h3, .pay-howto h3, .pay-section-h,
fieldset.fs legend, .cp-h, .free-day, .month-tile strong, .pay-day, .city-btn, .mode-switch .city-btn small, .cal-day-num, .cal-mnum,
.cal-chip strong, .cal-pop-head strong, .cal-empty strong, .cal-panel .cal-nav button, .portal-head .top-nav button, .arton-logo .al-sub, .brand span { font-family: var(--font-sans); }
h2, body.portal h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--track-snug); line-height: var(--lh-snug); color: var(--heading); margin-bottom: 12px; }
h3, body.portal h3, #inbox-thread h3, .pay-group h4, .pay-upcoming h3, .pay-howto h3, .pay-section-h, .pm-head strong, .ann-head strong, .cal-pop-head strong, fieldset.fs legend {
  font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.006em; line-height: 1.35; color: var(--text);
}
.cal-head h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: var(--track-tight); } /* .cal-panel .cal-toolbar h2 ma własną regułę */
h2 .muted, .col-toggle .muted { font-weight: 500; color: var(--muted); font-size: .9em; }
a, body.portal a, .signup-hint a, #cp-body a, .consent a { color: var(--lav-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
::selection { background: rgba(169, 150, 207, .35); }
/* overline — jedyne wersaliki w systemie */
th, .hours-table th, .month-h, .pay-city, .cp-h, .sc-day, .members-due-head, .cal-day-name, .cal-mhead {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--lav-700); line-height: 1.2;
}
.cp-h { margin: 20px 0 8px; }
.cp-h:first-child { margin-top: 0; }
.month-h { margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.kv dt { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.kv dd { font-size: var(--fs-md); }
/* liczby zawsze tabelaryczne */
table, .hours-table, .tile strong, .sc-date, .kv, .att-status, .pay-status, .pay-status2, .pay-due, .pm-due-date, .pay-amount, .fee-input, .member-due,
.free-seats, .sms-counter, .temp-pass code, .nav-badge, .badge-count, .cal-week, .cal-month, .cal-daystrip,
#children-count, #adults-count, #parents-count, #inbox-unread, #requests-count, #absences-count, #intents-count, #indiv-week-count, #tr-count, #instr-count, #allpay-month { font-variant-numeric: tabular-nums lining-nums; }
.muted, .small-text, .signup-hint, .deadline, .sc-meta, .note-meta, .thread-meta, .req-meta, .free-meta, .month-year, .month-meta, .pm-meta, .sms-meta { color: var(--muted); }
.signup-hint, .small-text, .consent, .deadline, .sc-meta, .pm-meta { font-size: var(--fs-sm); }
.deadline { font-style: normal; }
.sms-meta { font-size: var(--fs-md); line-height: 1.5; }
.mono, .temp-pass code, #reset-code { font-family: var(--font-mono); }
.mono { font-size: var(--fs-md); letter-spacing: .02em; }
main { max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter) 32px; }
body.portal main { max-width: var(--container-portal); padding: 16px var(--gutter) calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { body.portal main { padding: 20px var(--gutter) 32px; } }
/* focus jednolity (outline usuwamy tylko razem z ringiem) */
:where(a, button, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
* { scrollbar-width: thin; scrollbar-color: var(--lav-300) transparent; }
.hidden { display: none !important; }
.tab { display: none; }
.tab.active { display: block; }

/* =====================================================================
   2. NAGŁÓWEK I ZAKŁADKI GŁÓWNE (fioletowy gradient, białe logo, podkreślenie 3 px)
   ===================================================================== */
header, .portal-head {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg) var(--header-grad); /* pełny fiolet — bez rozmycia (szybciej na telefonach) */
  color: var(--on-header);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(var(--ink), .06), 0 10px 28px -18px rgba(var(--lav-rgb), .75);
  padding: 0 var(--gutter);
}
.header-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: var(--head-h); max-width: var(--container); margin: 0 auto; }
.portal-head .header-top { height: 52px; max-width: var(--container-portal); }
.brand, .portal-head .brand {
  font-family: var(--font-logo); /* logo: ArtOn krojem szeryfowym */
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff; /* logo: czysta biel R255 G255 B255 */
  letter-spacing: 0;
  line-height: 1;
  display: inline-block;
  text-align: center; /* studio wysrodkowane pod ArtOn */
}
.brand span, .portal-head .brand span {
  font-family: var(--font-sans);
  font-weight: 600;
  color: #ffffff; /* logo: czysta biel R255 G255 B255 */
  font-size: 0.36em; /* w em od ArtOn — proporcja stala na kazdym ekranie */
  letter-spacing: 0.313em; /* dobrane tak, by litera i ze studio byla w osi litery O z ArtOn */
  padding-left: 0.313em; /* rownowazy odstep po ostatniej literze — studio wysrodkowane */
  text-transform: lowercase;
  display: block;
  margin-top: -0.1rem;
  opacity: 1;
}
#ph-name, .portal-head #ph-name { color: var(--on-header-2); font-size: var(--fs-sm); font-weight: 600; }
.logout-link {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-pill); background: rgba(36, 28, 61, .2);
  color: var(--on-header); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.logout-link:hover { background: rgba(36, 28, 61, .3); border-color: rgba(255, 255, 255, .7); text-decoration: none; }
.logout-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
/* pasek zakładek panelu — selektor ZAWĘŻONY do header nav: .sub-tab/.rate-tab/.prate-tab/.pgroup-tab też mają klasę .tab-btn */
header nav {
  display: flex; align-items: stretch; gap: 4px; flex-wrap: nowrap;
  max-width: var(--container); margin: 0 auto; height: var(--nav-h);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
header nav::-webkit-scrollbar { display: none; }
header nav .tab-btn {
  position: relative; flex: 0 0 auto; height: var(--nav-h); padding: 0 12px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: var(--fs-base); font-weight: 500; letter-spacing: -0.006em; color: var(--on-header-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--t-fast) var(--ease-standard);
}
header nav .tab-btn:hover { background: none; color: var(--on-header); }
header nav .tab-btn:active { transform: none; }
header nav .tab-btn.active { background: none; color: var(--on-header); font-weight: 600; }
header nav .tab-btn::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--on-header); transform: scaleX(0); transition: transform var(--t-base) var(--ease-out);
}
header nav .tab-btn.active::after { transform: scaleX(1); }
header nav .tab-btn:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9); border-radius: var(--r-sm); }
/* portal ≥700 px: górna nawigacja = to samo podkreślenie */
@media (min-width: 700px) {
  .portal-head .top-nav { margin: 0 auto; height: var(--nav-h); gap: 4px; }
  .portal-head .top-nav button {
    position: relative; height: var(--nav-h); padding: 0 12px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    color: var(--on-header-2); font-size: var(--fs-base); font-weight: 500; gap: 8px; transition: color var(--t-fast);
  }
  .portal-head .top-nav button:hover { background: none; color: var(--on-header); }
  .portal-head .top-nav button.active { background: none; color: var(--on-header); font-weight: 600; }
  .portal-head .top-nav button::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--on-header); transform: scaleX(0); transition: transform var(--t-base) var(--ease-out);
  }
  .portal-head .top-nav button.active::after { transform: scaleX(1); }
  .portal-head .top-nav button .nav-ico { width: 18px; height: 18px; }
  .portal-head .top-nav button .nav-badge, .portal-head .top-nav button.active .nav-badge { background: #fff; color: var(--red-700); }
}
@media (max-width: 700px) {
  .portal-head { position: static; } /* portal ma dolną nawigację; fiolet jak na komputerze */
  .brand, .portal-head .brand { font-size: 1.3rem; }
  header nav {
    max-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent);
  }
  header nav .tab-btn { padding: 0 10px; font-size: var(--fs-md); scroll-snap-align: start; }
}
@supports not (backdrop-filter: blur(1px)) { #bottom-nav { background: rgba(255, 255, 255, .97); } }

/* =====================================================================
   3. PRZYCISKI
   ===================================================================== */
button, .import-label {
  font-family: inherit; height: var(--ctl-h); padding: 0 16px;
  border: 1px solid #d8cfea; border-radius: var(--r-md); background: #fff; color: var(--lav-800);
  font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.006em; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(var(--ink), .04);
  transition: background-color var(--t-fast) var(--ease-standard), border-color var(--t-fast) var(--ease-standard), color var(--t-fast),
    box-shadow var(--t-base) var(--ease-out), transform var(--t-micro) var(--ease-out);
}
.import-label { flex-direction: row; }
button:hover, .import-label:hover { background: var(--bg-inset); border-color: var(--lav-300); }
button:active { transform: scale(.97); }
button:focus-visible { outline: none; box-shadow: var(--ring); }
button:disabled { opacity: .45; pointer-events: none; }
/* PRIMARY — biel na lav-600 (4,75:1); #a996cf dawał 2,6:1 */
button.primary { background: var(--lav-600); border-color: transparent; color: #fff; box-shadow: var(--sh-accent), inset 0 1px 0 rgba(255, 255, 255, .14); }
button.primary:hover { background: var(--lav-700); box-shadow: var(--sh-accent-hover), inset 0 1px 0 rgba(255, 255, 255, .14); }
button.primary:active { background: var(--lav-800); }
button.primary:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lav-500); }
/* DANGER — obrys; pełny kolor tylko w stanach Obecny/Nieobecny */
button.danger { background: #fff; color: var(--danger-fg); border-color: rgba(184, 48, 79, .35); }
button.danger:hover { background: var(--danger-bg); border-color: var(--danger); }
button.danger:focus-visible { box-shadow: var(--ring-danger); }
/* SMALL */
button.small, .small { height: var(--ctl-h-sm); padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
body.portal button.small, body.portal .small { min-height: 40px; height: auto; padding: 0 14px; font-size: var(--fs-md); line-height: 1.2; }
/* GHOST */
.att-btns .small.ghost, .small.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.small.ghost:hover { background: var(--bg-inset); color: var(--text); }
/* stany Obecny / Nieobecny — biel na 600 (5,4:1 / 5,9:1) */
.att-btns .on-p { background: var(--st-present-strong); border-color: var(--st-present-strong); color: #fff; }
.att-btns .on-a { background: var(--st-absent-strong); border-color: var(--st-absent-strong); color: #fff; }
/* ikonowe X w chipach */
.chip-x, .att-x, .group-chip .chip-x {
  height: auto; min-height: 28px; min-width: 28px; padding: 0; border: 0; background: transparent; box-shadow: none;
  color: var(--muted); border-radius: var(--r-pill); font-size: var(--fs-sm);
}
.chip-x:hover, .att-x:hover { background: var(--danger-bg); color: var(--danger-fg); }
/* przyciski-karty (kilka linii treści): bez stałej wysokości i nowrap z reguły button */
.tile-btn, .month-tile, .free-tile, .note-item, .cal-chip, .city-btn, .pay-due-btn, .bottom-nav button {
  height: auto; white-space: normal; line-height: 1.35; font-weight: 400; letter-spacing: 0; box-shadow: none; justify-content: flex-start;
}
.note-item { align-items: stretch; }
/* linki-przyciski */
a.btn-link {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: var(--r-md);
  background: var(--lav-600); color: #fff; font-weight: 600; font-size: var(--fs-base); letter-spacing: -0.006em; box-shadow: var(--sh-accent); text-decoration: none;
  transition: background-color var(--t-fast), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
a.btn-link:hover { background: var(--lav-700); text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-accent-hover); }
body.portal a.btn-link, body.portal a.btn-link:hover { color: #fff; } /* ogólny kolor linków portalu (body.portal a) nie może przebić napisu na przycisku */
/* nawigatory miesiąca poza kalendarzem (Płatności, Płatności — wszyscy): pigułki */
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.cal-head h2 { margin: 0; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { height: var(--ctl-h-sm); padding: 0 12px; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; color: var(--lav-700); }
.cal-nav button:hover { background: var(--lav-50); border-color: var(--lav-300); }
/* wzorzec z kalendarza uogólniony: każdy <div class="cal-navgroup"> (także poza .cal-panel) */
.cal-navgroup button, .cal-navgroup button.small {
  border: none; background: transparent; border-radius: 9px; height: 32px; min-width: 32px; padding: 0 .85rem;
  font-weight: 600; font-size: var(--fs-sm); color: var(--lav-700); box-shadow: none;
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-micro);
}
.cal-navgroup button:hover { background: #fff; box-shadow: 0 1px 2px rgba(var(--ink), .08); }
.cal-navgroup button:active { transform: scale(.96); }
.cal-navgroup [data-icon] { padding: 0; width: 32px; }
.cal-navgroup .ci { width: 17px; height: 17px; }
/* wybór miasta / trybu (zapisy) */
.city-choice { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.9rem; }
.city-btn {
  flex: 1 1 200px; padding: 18px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff;
  font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--text); justify-content: center;
  box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast);
}
.city-btn:hover { background: #fff; border-color: var(--lav-300); transform: translateY(-1px); box-shadow: var(--sh-2); }
.city-btn:active { transform: scale(.98); }
.mode-switch .city-btn strong { color: var(--lav-700); }
.mode-switch .city-btn small { font-family: var(--font-sans); color: var(--muted); font-weight: 500; }
.form-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.form-actions .primary { min-width: 120px; }
.group-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
footer { max-width: var(--container); margin: 0 auto; padding: 8px var(--gutter) 40px; display: flex; gap: 8px; align-items: center; }
@media (max-width: 700px) {
  button { height: 40px; }
  button.small, .small, .group-actions .small, td.actions .small, .filters .small, .list-header .small, .group-members .small, .att-btns .small,
  .pay-row .small, .req-actions .small, .parent-row .small { min-height: 40px; height: auto; padding: 0 14px; font-size: var(--fs-md); }
  .cal-nav button { height: 36px; }
  footer { flex-wrap: wrap; }
}

/* =====================================================================
   4. POLA FORMULARZY (wyjątki: checkbox/radio/file/color/select[multiple])
   ===================================================================== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
label, .age-field, .color-field, .indiv-edit label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), select:not([multiple]), textarea {
  font-family: inherit; font-size: 16px; line-height: 1.3; min-height: var(--field-h); padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff; color: var(--text);
  box-shadow: inset 0 1px 2px rgba(var(--ink), .03);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-fast) var(--ease-standard), box-shadow var(--t-base) var(--ease-out), background-color var(--t-fast);
}
select[multiple] { font-family: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff; color: var(--text); }
textarea { padding: 10px 12px; min-height: 96px; line-height: var(--lh-body); resize: vertical; }
::placeholder { color: var(--text-faint); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lav-500); box-shadow: var(--ring); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--red-500); box-shadow: var(--ring-danger); }
input:disabled, select:disabled, textarea:disabled { background: var(--bg-inset); color: var(--muted); }
select:not([multiple]) {
  padding-right: 36px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%236b6479%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M4 6l4 4 4-4%22/></svg>');
  background-repeat: no-repeat; background-position: right 12px center;
}
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--lav-600); cursor: pointer; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 5px; }
input[type=file] { font-family: inherit; font-size: var(--fs-md); color: var(--muted); }
.inline-check, .child-group-check, .consent, .pay-select, .pay-amount-label, .fee-label { font-weight: 400; color: var(--text); font-size: var(--fs-md); gap: 8px; }
/* pola kompaktowe w wierszach i filtrach */
.row-group, .fee-input, .pay-row .pay-amount, .filters select, .season-head select, #season-select { min-height: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--fs-md); border-radius: var(--r-sm); }
.row-group, .filters select, .season-head select { padding-right: 30px; background-position: right 8px center; }
.fee-input, .pay-row .pay-amount { text-align: right; }
@media (max-width: 700px) { .row-group, .fee-input, .pay-row .pay-amount, .filters select, .season-head select, #amt-input { font-size: 16px; min-height: 40px; height: 40px; } }
/* fieldset zapisów */
fieldset.fs { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin: 0 0 16px; background: #fff; }
fieldset.fs legend { padding: 0 6px; }
.consent { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
/* komunikaty */
.sms-status { font-size: var(--fs-md); line-height: 1.43; padding: 10px 12px; border-radius: var(--r-md); background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-line); }
.sms-status.error { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-line); }
.sms-counter { font-size: var(--fs-xs); color: var(--muted); text-align: right; margin: 0; }
.sms-counter .over { color: var(--danger-fg); font-weight: 700; }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--lav-600); }
.swatch input:focus-visible + span { outline: none; box-shadow: var(--ring); }

/* =====================================================================
   5. PODZAKŁADKI = SEGMENTED CONTROL (wzorzec .cal-seg), wybór dziecka, panele zwijane
   ===================================================================== */
.subnav, .auth-tabs {
  display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--bg-inset); border: 1px solid var(--lav-200); border-radius: 12px; margin-bottom: 16px;
}
.subnav::-webkit-scrollbar, .auth-tabs::-webkit-scrollbar { display: none; }
.subnav .sub-tab, .subnav .rate-tab, .subnav .prate-tab, .subnav .pgroup-tab, .auth-tab {
  flex: 0 0 auto; height: var(--ctl-h-sm); padding: 0 14px; border: none; border-radius: 9px; background: transparent;
  color: var(--lav-700); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.003em; box-shadow: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-standard), color var(--t-fast), box-shadow var(--t-fast);
}
.subnav .sub-tab:hover, .subnav .rate-tab:hover, .subnav .prate-tab:hover, .subnav .pgroup-tab:hover, .auth-tab:hover { background: rgba(255, 255, 255, .55); color: var(--lav-800); }
.subnav .sub-tab.active, .subnav .rate-tab.active, .subnav .prate-tab.active, .subnav .pgroup-tab.active, .auth-tab.active { background: #fff; color: var(--lav-700); border-color: transparent; box-shadow: var(--sh-seg); }
.subnav .sub-tab:active, .subnav .rate-tab:active, .subnav .prate-tab:active, .subnav .pgroup-tab:active, .auth-tab:active { transform: none; }
.subnav button:focus-visible { box-shadow: var(--ring); }
.auth-tabs { display: flex; margin-bottom: 12px; }
.auth-tab { flex: 1 1 0; height: 36px; }
.subview.hidden { display: none; }
@media (max-width: 700px) {
  .subnav .sub-tab, .subnav .rate-tab, .subnav .prate-tab, .subnav .pgroup-tab { height: 36px; }
  #participants-subnav { display: flex; width: 100%; }
  #participants-subnav .sub-tab { flex: 1 1 0; padding: 0 6px; font-size: var(--fs-xs); }
}
/* wybór dziecka = pastylki konta (wyższy poziom niż segment) */
.child-tabs { gap: 6px; padding: 12px var(--gutter) 2px; }
.child-tab {
  height: 34px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: #fff; color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; box-shadow: var(--sh-1);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-base) var(--ease-out);
}
.child-tab:hover { border-color: var(--border-hover); color: var(--text); }
.child-tab.active { background: var(--lav-600); border-color: var(--lav-600); color: #fff; box-shadow: var(--sh-accent); }
/* panele zwijane: cały wiersz nagłówka klikalny, caret obraca się o 90° */
.collapsible .col-body { display: none; }
.collapsible.open .col-body { display: block; margin-top: 12px; }
.col-toggle { display: block; cursor: pointer; user-select: none; margin: -6px -8px 0; padding: 6px 8px; border-radius: var(--r-sm); color: var(--heading); transition: background-color var(--t-fast) var(--ease-standard); }
.col-toggle:hover { background: var(--bg-hover); color: var(--lav-700); }
.col-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.caret, .hours-row .caret, .group-caret { display: inline-block; color: var(--lav-500); font-size: .85em; transition: transform var(--t-base) var(--ease-in-out); }
.collapsible.open .caret, .hours-row.open .caret { transform: rotate(90deg); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.bulk-bar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; background: var(--accent-light); border-radius: var(--r-md); padding: 0.5rem 0.8rem; margin-bottom: 0.8rem; font-size: var(--fs-md); }
.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.list-header h2 { margin: 0; }
#child-search { min-width: 260px; }

/* =====================================================================
   7. TABELE
   ===================================================================== */
.table-wrap, .hours-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: auto; background: #fff; scrollbar-width: thin; }
table, .hours-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
th, .hours-table th { padding: 10px 12px; background: var(--lav-50); border-bottom: 1px solid var(--lav-200); text-align: left; white-space: nowrap; } /* krój z overline (1) */
td, .hours-table td { padding: 11px 12px; border-bottom: 1px solid var(--n-100); line-height: 1.4; vertical-align: middle; color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--t-fast); }
tr:hover td, .child-row:hover td { background: var(--bg-hover); }
td:first-child { font-weight: 600; }
td.actions { text-align: right; white-space: nowrap; }
td.actions .small { margin-left: 4px; }
.check-col { width: 36px; }
.empty, .empty-row td, .thread-empty, .cp-empty, .cal-empty-note, .free-empty { color: var(--muted); font-size: var(--fs-md); font-weight: 500; padding: 24px 16px; text-align: center; }
.thread-empty, .cp-empty { padding: 12px 0; }
@media (max-width: 700px) { th, td { padding: 9px 10px; } .table-wrap, .hours-wrap { border-radius: var(--r-md); } }

/* =====================================================================
   8. MODALE (≤700 px = arkusz od dołu z uchwytem; JS pokazuje/ukrywa przez .hidden — mechanizm bez zmian; animacje — motion.css)
   ===================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(28, 24, 36, .42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal {
  background: #fff; border-radius: var(--r-xl); padding: 24px; width: 100%; max-width: 520px;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--sh-3);
}
.modal h2 { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.016em; line-height: 1.2; color: var(--heading); }
.modal textarea { resize: vertical; }
.modal .sms-meta, .modal p, .modal p.muted { font-size: var(--fs-md); }
.modal .form-actions, body.portal .modal .form-actions { flex-direction: row-reverse; justify-content: flex-start; margin-top: 8px; gap: 8px; } /* DOM [główny, Anuluj, (danger)] → główny po prawej, Anuluj obok niego */
.modal .form-actions button.danger { margin-right: auto; } /* destrukcyjne osobno po lewej — kolejność DOM bez zmian */
#sms-recipient-list { margin: 0; padding-left: 1.3rem; font-size: var(--fs-sm); color: var(--muted); max-height: 8rem; overflow-y: auto; }
@media (max-width: 700px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .modal::before { content: ''; display: block; flex: 0 0 auto; width: 36px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: -8px auto 4px; }
  .modal .form-actions { flex-wrap: wrap; }
  .modal .form-actions button { flex: 1 1 calc(50% - 4px); min-height: 44px; }
  .modal .form-actions button.danger { margin-right: 0; flex-basis: 100%; }
}

/* =====================================================================
   9. TOASTY (wejście/wyjście — motion.css; translateX(-50%) MUSI zostać w keyframes toast-in)
   ===================================================================== */
.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 100; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: min(90vw, 440px); padding: 12px 16px; border-radius: var(--r-lg);
  background: rgba(51, 42, 78, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); /* lav-900 — biel 13:1 */
  color: #fff; font-size: var(--fs-md); font-weight: 500; line-height: 1.4; letter-spacing: 0;
  box-shadow: var(--sh-3);
}
.toast::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px rgba(63, 165, 111, .25); }
.toast.error { background: var(--red-600); } /* biel 5,9:1 */
.toast.error::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
body.portal .toast { bottom: calc(66px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { body.portal .toast { bottom: 20px; } }

/* =====================================================================
   10. BADGE, NAV-BADGE, CHIPY
   ===================================================================== */
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .01em; line-height: 1; background: var(--lav-100); color: var(--lav-700); white-space: nowrap; }
.badge-count { background: var(--lav-600); color: #fff; }
.badge-free, .badge.badge-multi { background: var(--ok-bg); color: var(--ok-fg); }
.badge-full { background: var(--danger-bg); color: var(--danger-fg); }
.badge-guest { background: var(--st-guest-bg); color: var(--st-guest-fg); }
.badge-reported, .badge-manual, .badge-enrolling, .badge.badge-enrolling { background: var(--warn-bg); color: var(--warn-fg); font-weight: 600; }
/* licznik przy zakładce / nagłówku — nie może być biały na białym pasku */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--lav-100); color: var(--lav-700); font-size: var(--fs-2xs); font-weight: 700; line-height: 1; vertical-align: middle; }
header nav .tab-btn .nav-badge, header nav .tab-btn.active .nav-badge { background: #fff; color: var(--lav-800); }
.col-toggle .nav-badge, .thread-row .thread-top .nav-badge { background: var(--lav-600); color: #fff; }
.bottom-nav .nav-badge { background: var(--red-600); color: #fff; box-shadow: 0 0 0 2px #fff; }
.portal-head .top-nav .nav-badge { background: #fff; color: var(--red-700); box-shadow: none; }
#bottom-nav button .nav-badge { top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.badge-new { background: var(--red-600); color: #fff; height: 18px; padding: 0 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 18px; }
/* chipy usuwalne */
.chip, .att-chip, .group-chip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 4px 0 10px; border: none; border-radius: var(--r-pill); background: var(--lav-100); color: var(--lav-700); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.chip { margin: 2px 4px 2px 0; }
.att-chip { background: var(--bg-inset); color: var(--text-2); border: 1px solid var(--border); max-width: 100%; }
.att-chip small { color: var(--muted); }
.group-chip .chip-x { color: var(--lav-600); }
.chip-x:hover, .group-chip .chip-x:hover { color: var(--danger-fg); }
.group-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.att-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* sposób płatności = anatomia pigułki statusu */
.pay-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
.pay-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pay-chip.online { background: var(--ok-bg); color: var(--ok-fg); }
.pay-chip.transfer { background: var(--st-guest-bg); color: var(--st-guest-fg); }
.pay-chip.cash { background: var(--lav-100); color: var(--lav-700); }
.pay-chip.declared { background: var(--warn-bg); color: var(--warn-fg); }

/* =====================================================================
   11. PIGUŁKI I PASKI STATUSÓW (panel + portal): kropka 6 px + tinta + tekst -fg
   ===================================================================== */
.st-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 9px 2px 7px; border-radius: var(--r-pill); background: var(--pill-bg, var(--n-100)); color: var(--pill-fg, var(--muted)); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; }
.st-pill::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--pill-dot, currentColor); }
.st-present   { --pill-dot: var(--st-present);   --pill-bg: var(--st-present-bg);   --pill-fg: var(--st-present-fg); }
.st-absent    { --pill-dot: var(--st-absent);    --pill-bg: var(--st-absent-bg);    --pill-fg: var(--st-absent-fg); }
.st-reported  { --pill-dot: var(--st-reported);  --pill-bg: var(--st-reported-bg);  --pill-fg: var(--st-reported-fg); }
.st-cancelled { --pill-dot: var(--st-cancelled); --pill-bg: var(--st-cancelled-bg); --pill-fg: var(--st-cancelled-fg); text-decoration: line-through; text-decoration-color: rgba(107, 104, 117, .55); }
.st-upcoming  { --pill-dot: var(--st-upcoming);  --pill-bg: var(--st-upcoming-bg);  --pill-fg: var(--st-upcoming-fg); }
.st-guest     { --pill-dot: var(--st-guest);     --pill-bg: var(--st-guest-bg);     --pill-fg: var(--st-guest-fg); }
.st-unmarked  { --pill-dot: var(--st-unmarked);  --pill-bg: var(--st-unmarked-bg);  --pill-fg: var(--st-unmarked-fg); }
body.portal .st-pill { white-space: normal; }
/* pasek 3 px na lewej krawędzi (klasy .st-b-* z rodzic.css zostają, kolory z tokenów) */
.session-card, .session-row, .pay-month, .ann-card, body.portal .ann-card, .free-tile { border-left-width: 3px; }
.st-b-cancelled { opacity: 1; }
.st-b-cancelled .sc-title { color: var(--muted); text-decoration: line-through; }
.cal-dot, .cal-chip-dot { box-shadow: 0 0 0 1.5px #fff; }

/* =====================================================================
   PANEL — sekcje dziedzinowe (karty, wiersze, listy: warstwa premium w panel.css)
   ===================================================================== */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.3rem;
}

/* ---------- grupy (akordeon) ---------- */
.group-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.55rem;
  overflow: hidden;
}
.group-card.open { border-color: var(--accent); }
.group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}
.group-head:hover { background: var(--accent-soft); }
.group-caret { margin-right: 0.2rem; }
.group-members { margin: 0; padding: 0.6rem 1rem 0.9rem 2.4rem; background: var(--accent-soft); }
.group-members li { margin-bottom: 0.2rem; font-size: 0.9rem; }
#groups-list { margin-top: 1.1rem; }

.signup-hint { margin-bottom: 12px; }

/* ---------- płatności ---------- */
.pay-city { margin: 1.2rem 0 0.5rem; }
.pay-group { margin-bottom: 0.6rem; }
.pay-group h4 { margin: 0.5rem 0 0.35rem; }
.pay-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-direction: row;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
}
.pay-row:hover { background: var(--accent-soft); }
.pay-row.paid { background: var(--st-present-bg); border-color: var(--st-present-line); }
.pay-name { font-weight: 600; }
.pay-status { margin-left: auto; font-size: 0.82rem; color: var(--muted); }
.pay-row.paid .pay-status { color: var(--ok-fg); font-weight: 600; }
.pay-summary { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }

/* ---------- obecność ---------- */
.att-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.35rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.att-row:hover { background: var(--accent-soft); }
.att-row.present { background: var(--st-present-bg); border-color: var(--st-present-line); }
.att-status { margin-left: auto; font-size: 0.82rem; color: var(--muted); }
.att-row.present .att-status { color: var(--ok-fg); font-weight: 600; }

/* ---------- wybór do SMS w płatnościach ---------- */
.pay-select { display: inline-flex; flex-direction: row; align-items: center; margin-left: 0.6rem; cursor: pointer; }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  .panel { padding: 1rem; border-radius: 12px; }
  .cal-head h2 { font-size: var(--fs-xl); }
  .grid { grid-template-columns: 1fr; }
  #child-search { min-width: 0; width: 100%; }
  .pay-status { display: none; }
}

/* ---------- widok instruktora (tylko odczyt) ---------- */
.role-instructor .group-actions,
.role-instructor td.actions,
.role-instructor #children-bulk,
.role-instructor .check-col input,
.role-instructor #children-tbody input[type="checkbox"] { display: none; }

/* ---------- kwoty wpłat ---------- */
.pay-amount-label { display: inline-flex; flex-direction: row; align-items: center; }
.pay-row .pay-amount { width: 5rem; }

/* ---------- profil dziecka ---------- */
.child-row { cursor: pointer; }
.pay-row { cursor: pointer; }
.pay-status2 { margin-left: auto; font-size: 0.85rem; color: var(--muted); }
.pay-status2.ok { color: var(--ok-fg); font-weight: 600; }

/* ---------- obecny / nieobecny ---------- */
.att-row.absent { background: var(--st-absent-bg); border-color: var(--st-absent-line); }
.att-btns { margin-left: auto; display: flex; gap: 0.3rem; flex-shrink: 0; }
/* Obecny / Nieobecny zawsze obok siebie w jednej linii (także na telefonie) — długie imię zawija się zamiast przycisków */
.att-main { display: inline-flex; flex-wrap: nowrap; gap: 0.3rem; flex-shrink: 0; }
.att-main .small { white-space: nowrap; }
.att-row > .att-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ---------- profil: miesiące obecności ---------- */
.att-row.absent .att-status { color: var(--danger-fg); font-weight: 600; }
.cp-month { cursor: pointer; background: var(--accent-soft); }
.cp-month:hover { filter: brightness(0.97); }
.cp-month-body { margin: 0 0 0.5rem 0.9rem; }
.enrolling-check { grid-column: 1 / -1; }
#att-actions { margin-bottom: 0.6rem; }

/* ---------- wybór grupy w wierszu listy dzieci ---------- */
.row-group { max-width: 16rem; /* etykieta grupy: dzień · nazwa · wiek */ }

/* ---------- płatności na telefonie: czytelniejszy układ ---------- */
@media (max-width: 700px) {
  #p-pay .cal-head { flex-wrap: wrap; gap: 0.5rem; }
  .pay-city { margin: 1rem 0 0.4rem; }
  .pay-group h4 { margin: 0.9rem 0 0.4rem; }
  .pay-row {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 0.5rem;
    padding: 0.75rem 0.8rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
  }
  .pay-name { flex: 1 1 100%; font-size: 1.02rem; line-height: 1.25; }
  .pay-row .pay-status2 { margin-left: 0; margin-right: auto; font-size: 0.9rem; }
  /* obecność na telefonie: przyciski Obecny/Nieobecny zawijają się pod imieniem */
  .att-btns { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.3rem; }
  .att-row { gap: 0.45rem; padding: 0.5rem 0.55rem; }
  .att-btns { flex-shrink: 1; max-width: 100%; }
  .pay-summary { font-size: 0.95rem; }
  #pay-bulk { flex-wrap: wrap; row-gap: 0.5rem; }
}

/* ===== Notatki (jak w iPhonie) ===== */
.notes-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.notes-head h2 { margin-bottom: 0; }
.notes-layout { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 1rem; align-items: start; }
.notes-list-wrap { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
#notes-list { display: flex; flex-direction: column; gap: .35rem; max-height: 60vh; overflow-y: auto; }
.note-item { text-align: left; display: flex; flex-direction: column; gap: .15rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); cursor: pointer; color: var(--text); min-width: 0; }
.note-item:hover { background: var(--accent-soft); }
.note-item strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item .note-meta { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item .note-from { font-size: .72rem; color: var(--accent-dark); }
.note-item.active { background: var(--lav-50); border-color: var(--lav-200); } /* koniec żółtego */
.note-item.unread strong::before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); margin-right: .35rem; vertical-align: middle; }
.notes-editor { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.notes-editor-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 2rem; }
.notes-spacer { flex: 1; }
/* edytor notatek — biały, nie kremowy */
#note-text { width: 100%; min-height: 55vh; resize: vertical; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; font-size: 16px; line-height: 1.6; box-shadow: var(--sh-1); font-family: inherit; color: var(--text); box-sizing: border-box; }
#note-text:focus { border-color: var(--lav-500); box-shadow: var(--ring); }
#note-text:disabled { background: var(--bg); box-shadow: none; }
#note-send-list { display: flex; flex-direction: column; gap: .45rem; margin: .6rem 0 1rem; }
@media (max-width: 700px) {
  .notes-layout { grid-template-columns: 1fr; }
  #notes-list { max-height: 30vh; }
  #note-text { min-height: 40vh; }
}
.att-row.reported { border-left: 3px solid var(--st-reported); }
.att-row .att-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }

/* ---------- wolne miejsca: tydzień z kafelkami grup ---------- */
.free-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.free-col { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.free-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--lav-400);
  border-radius: 10px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.free-tile:hover { background: var(--accent-soft); }
.free-tile strong { font-size: 0.9rem; color: var(--text); }
.free-name { font-size: 0.85rem; font-weight: 600; color: var(--accent-dark); overflow-wrap: anywhere; }
.free-meta { font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }
.free-seats { font-size: 0.78rem; font-weight: 700; color: var(--ok-fg); }
.free-seats.few { color: var(--danger-fg); }
.free-empty { margin: 0; font-size: 0.8rem; color: var(--muted); }

.season-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.season-head h2 { margin: 0; }

/* kafelki miesięcy sezonu w zakładce Płatności */
.month-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.month-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}
.month-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.month-tile strong { font-weight: 600; color: var(--text); }
.month-tile .month-year { font-size: 0.8rem; color: var(--muted); }
.month-tile .month-meta { font-size: 0.78rem; color: var(--muted); }
.month-tile.active { background: var(--lav-600); border-color: var(--lav-600); box-shadow: var(--sh-accent); }
.month-tile.active strong, .month-tile.active .month-year, .month-tile.active .month-meta { color: #fff; }

.rate-row { cursor: default; flex-wrap: wrap; }
.rate-row .pay-name { min-width: 16rem; }
.rate-row .fee-label { margin-left: auto; }
.pay-day { margin: 1.2rem 0 0.4rem; font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--track-snug); color: var(--text); }
.pay-day:first-child { margin-top: 0; }

/* ---------- przedział wiekowy (formularz grupy) ---------- */
.age-range { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; }
.age-range input { width: 100%; min-width: 0; }

/* ---------- paleta kolorów grupy (formularz grupy) ---------- */
.color-palette { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.3rem 0; }
.swatch { position: relative; display: inline-flex; flex-direction: row; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.swatch span {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
  transition: transform 0.12s;
}
.swatch:hover span { transform: scale(1.1); }
.swatch-none span {
  background: #fff linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%);
}
.swatch.hidden { display: none; }
/* dowolny kolor RGB: natywny wybór koloru ukryty nad tęczowym kółkiem */
.swatch-custom span { background: conic-gradient(#f44, #fc0, #4c4, #0cc, #44f, #f4f, #f44); }
.swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
/* należności na rozwiniętej karcie grupy (tylko administrator; trener widzi zwykłą listę z punktorami) */
.members-due-head { margin: 0; padding: 0.55rem 1rem 0; background: var(--accent-soft); }
.group-members.with-dues { list-style: none; padding-left: 1rem; }
.group-members li.member-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.group-members li.member-row > span:first-child { min-width: 10rem; }
.group-members li.member-row .row-group { margin-left: auto; }
.member-due { font-size: 0.85rem; }
/* pełna edycja grupy w rozwiniętej karcie: formularz #group-form-wrap jest tu przenoszony z góry panelu */
.group-edit-slot:not(:empty) { padding: 0.5rem 0.9rem 1rem; border-top: 1px dashed var(--border); background: #fff; }
.group-edit-slot .cp-h { margin-top: 0.5rem; }

.fee-input { width: 4.5rem; }
.fee-label { display: inline-flex; flex-direction: row; align-items: center; margin-left: 0.3rem; }
.inbox-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; align-items: start; }
#inbox-threads { max-height: 32rem; overflow-y: auto; }
.thread-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.35rem;
  cursor: pointer;
  font-size: 0.88rem;
}
.thread-row:hover { background: var(--accent-soft); }
.thread-row.active { border-color: var(--accent); background: var(--accent-soft); }
.thread-row.unread strong { color: var(--accent-dark); }
.thread-row .thread-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.thread-row .thread-meta { color: var(--muted); font-size: 0.78rem; }
.thread-row .thread-last { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inbox-thread h3 { margin-bottom: 0.2rem; }
.chat {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--accent-soft);
  max-height: 24rem;
  overflow-y: auto;
  margin: 0.6rem 0;
}
.chat-msg {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fff;
  border: 1px solid var(--border);
  align-self: flex-start;
}
.chat-msg.me { align-self: flex-end; background: var(--lav-200); border-color: var(--lav-300); }
.chat-msg.admin { align-self: flex-start; }
.chat-msg .chat-time { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; white-space: nowrap; }
.inbox-actions { align-items: center; justify-content: space-between; flex-wrap: wrap; }
/* załączniki wiadomości */
.inbox-attach { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
.chat-atts { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; }
.chat-att { display: inline-block; font-size: 0.82rem; word-break: break-word; }
.chat-att small { color: var(--muted); }
.inline-check { display: inline-flex; flex-direction: row; align-items: center; }
.req-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.req-card.pending { border-color: var(--warn-line); background: var(--warn-bg); }
.req-card .req-note { white-space: pre-wrap; color: var(--muted); font-size: 0.85rem; }
.req-card .req-meta { color: var(--muted); font-size: 0.8rem; }
.req-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.3rem; }
.parent-row { flex-wrap: wrap; cursor: default; align-items: flex-start; }
.parent-row:hover { background: #fff; }
.parent-row .parent-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 0.25rem; }
.parent-row .parent-main .muted { font-size: 0.82rem; }
.parent-row .req-actions { margin-top: 0; }
.pay-due { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.pay-row.unpaid { background: var(--st-absent-bg); border-color: var(--st-absent-line); }
.ann-photo { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; margin: 0.5rem 0; object-fit: cover; }
.ann-preview { margin: 0.4rem 0; display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; }
.ann-preview img { max-width: 220px; max-height: 160px; border-radius: 12px; }
.pay-status2.bad { color: var(--danger-fg); font-weight: 600; }
.pay-due-btn { font-size: 0.8rem; color: var(--muted); white-space: nowrap; background: #fff;
  border: 1px dashed var(--line); border-radius: 8px; padding: 0.2rem 0.5rem; cursor: pointer; font-family: inherit; }
.pay-due-btn:hover { background: var(--lav-50); border-color: var(--lav-400); color: var(--lav-700); }
.pay-status2.partial { color: var(--warn-fg); font-weight: 600; }
.temp-pass { text-align: center; }
.temp-pass code {
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  padding: 0.5rem 1rem;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  user-select: all;
}
.ann-card { border-left: 3px solid var(--accent); }
.ann-card.pinned { border-left-color: var(--amber-500); background: var(--amber-50); }
.ann-card .ann-text { white-space: pre-wrap; }
.cp-list { margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; font-size: 0.9rem; }
.cp-list li { margin-bottom: 0.2rem; }
@media (max-width: 700px) {
  .inbox-layout { grid-template-columns: 1fr; }
  #inbox-threads { max-height: 16rem; }
  .chat { max-height: 18rem; }
}

/* uczestnik w kilku grupach */
.child-groups-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.child-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: max-content; gap: 4px 12px; max-height: 240px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-hover); }
.child-group-check { display: flex; flex-direction: row; align-items: flex-start; cursor: pointer; } /* label ma domyślnie kolumnę — pole wyboru obok tekstu */
.child-group-check input { flex: none; width: 18px; margin-top: 3px; }
.pay-row.pay-dup { opacity: .7; font-size: 13px; }
/* ---------- logo ArtOn studio (odtworzone: fioletowy kafelek, „ArtOn” szeryfowo, „studio” rozstrzelone) ---------- */
.arton-logo {
  width: 124px; height: 124px; margin: 0 auto 1rem; border-radius: 26px; color: #fff;
  background: linear-gradient(160deg, #b7a6da 0%, #a996cf 55%, #927dbf 100%); /* jedyny gradient w systemie */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .06);
}
.arton-logo .al-name { font-family: var(--font-logo); font-weight: 700; font-size: 2.2rem; line-height: 1; }
.arton-logo .al-sub { font-family: var(--font-sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.447em; padding-left: 0.447em; margin-top: 0; /* i pod O */ }
.arton-logo.arton-logo-lg { width: 170px; height: 170px; border-radius: 34px; }
.arton-logo.arton-logo-lg .al-name { font-size: 3rem; }
.arton-logo.arton-logo-lg .al-sub { font-size: 0.9rem; letter-spacing: 0.475em; padding-left: 0.475em; }
/* bardzo wąski telefon: imię w pierwszej linii, Obecny / Nieobecny razem w drugiej */
@media (max-width: 420px) {
  .att-row { flex-wrap: wrap; row-gap: 0.4rem; }
  .att-row > .att-name { flex: 1 1 100%; overflow-wrap: normal; }
  .att-btns { margin-left: auto; }
}
/* ---------- zajęcia indywidualne ---------- */
.indiv-who { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.4rem; }
.indiv-mode { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.indiv-mode .inline-check { font-weight: normal; }
#indiv-account-box { display: flex; flex-direction: column; gap: 0.35rem; }
#indiv-child { min-height: 7.5rem; }
.indiv-edit { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: flex-end; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); }
.req-card.indiv-cancelled { opacity: 0.75; }
.req-card.indiv-cancelled strong { text-decoration: line-through; }
/* godziny pracy trenerów (krój/odstępy tabeli: sekcja 7) */
.hours-table th:not(:first-child), .hours-table td:not(:first-child) { text-align: right; }
.hours-row { cursor: pointer; }
.hours-row:hover { background: var(--accent-soft); }
.hours-none td:first-child { color: var(--text-faint); font-style: normal; }
.hours-table tfoot td { font-weight: 700; border-top: 1px solid var(--border-strong); border-bottom: 0; background: var(--n-50); }
.hours-detail td { text-align: left; white-space: normal; background: var(--n-50); }
.hours-item { display: grid; grid-template-columns: 7.5rem 7rem 1fr auto; gap: 0.2rem 0.7rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); align-items: center; }
.hours-item:last-child { border-bottom: 0; }
.hours-item.planned { color: var(--muted); }
.hours-mins { text-align: right; white-space: nowrap; font-weight: 600; }
@media (max-width: 640px) {
  .hours-item { grid-template-columns: 1fr auto; }
  .hours-label { grid-column: 1 / -1; }
}
.indiv-quick { width: 100%; }

/* =====================================================================
   KALENDARZ — widok tygodnia / dnia / miesiąca (styl natywnego kalendarza Apple)
   Skala: --hh = wysokość godziny (px), ustawiana z JS tak, żeby zakres godzin mieścił się w oknie.
   Kolory kafelka: --ev-bg / --ev-bar / --ev-fg wyliczane z koloru grupy (tło, pasek, tekst).
   ===================================================================== */
.cal-panel {
  /* kalendarz wychodzi poza szerokość reszty panelu — jak aplikacja, korzysta z całego okna */
  --calw: min(calc(100vw - 3rem), 1680px);
  width: var(--calw);
  margin-left: calc((100% - var(--calw)) / 2);
  padding: 1.1rem 1.2rem 1rem;
}
.cal-head { margin-bottom: 0.7rem; }
.cal-nav button { padding: 0 0.85rem; }
#calendar { display: block; overflow: visible; border: none; }
#calendar:has(.cal-week), #calendar:has(.cal-month) { display: block; overflow: visible; }

/* ---------- siatka tygodnia ---------- */
.cal-week {
  --hh: 56px;
  display: flex;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  user-select: none;
}
.cal-gutter { flex: 0 0 3.1rem; position: relative; z-index: 1; background: #fff; }
.cal-gutter-head { height: 44px; border-bottom: 1px solid var(--border); }
.cal-hour-label { position: relative; }
.cal-hour-label span {
  position: absolute; right: 0.4rem; top: 0; transform: translateY(-55%);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cal-gutter .cal-hour-label:first-child span { transform: translateY(-20%); }
.cal-colx { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--border); position: relative; }
.cal-colx.cal-weekend .cal-day-body { background-color: #fbfaff; }
.cal-colx .cal-day-head {
  height: 44px; box-sizing: border-box; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0;
  background: #fff;
}
.cal-day-name { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cal-day-num {
  font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; color: var(--text);
  min-width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px;
}
.cal-colx.cal-today .cal-day-name { color: var(--accent-dark); }
.cal-colx.cal-today .cal-day-num { background: var(--accent-dark); color: #fff; }
.cal-day-body {
  position: relative;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent var(--hh)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hh) / 2 - 1px), #f2eff7 calc(var(--hh) / 2 - 1px), #f2eff7 calc(var(--hh) / 2), transparent calc(var(--hh) / 2), transparent var(--hh));
}
.cal-colx.cal-today .cal-day-body { background-color: #f8f5fd; }

/* linia bieżącej godziny */
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: #e5484d; z-index: 3; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }

/* ---------- kafelek zajęć ---------- */
.cal-event {
  --ev-bg: var(--accent-light); --ev-bar: var(--accent); --ev-fg: #4a3a73;
  position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden;
  margin: 0 0 0 1px; padding: 3px 5px 3px 7px;
  border-radius: 6px;
  background: var(--ev-bg);
  color: var(--ev-fg);
  box-shadow: inset 3px 0 0 var(--ev-bar), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  font-size: 0.74rem; line-height: 1.22;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s, box-shadow 0.12s;
  display: flex; flex-direction: column; gap: 1px;
}
.cal-event:hover { filter: brightness(0.97); box-shadow: inset 3px 0 0 var(--ev-bar), 0 2px 10px rgba(46, 40, 57, 0.14); z-index: 4; }
.cal-event-tag { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cal-event-name { font-weight: 700; color: var(--ev-fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: var(--name-lines, 2); -webkit-box-orient: vertical; overflow-wrap: anywhere; flex: 0 0 auto; }
.cal-event-time { font-weight: 700; color: var(--accent-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-event-meta, .cal-event-count { font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event-count { margin-top: auto; }
/* nasycony kolor grupy → ciemne tło → jasny tekst */
.ev-dark, .ev-dark .cal-event-name { color: #fff; }
.ev-dark .cal-event-time { color: #fff; }
.ev-dark .cal-event-meta, .ev-dark .cal-event-count, .ev-dark .cal-event-tag { color: rgba(255, 255, 255, 0.85); }
.ev-dark.evt-cancelled .cal-event-count { color: #ffd9d3; }
.cal-mevt.ev-dark, .cal-mevt.ev-dark b { color: #fff; }
.cal-event.h-m .cal-event-count { display: none; }
.cal-event.h-s .cal-event-count, .cal-event.h-s .cal-event-meta, .cal-event.h-s .cal-event-tag { display: none; }
.cal-event.h-xs { padding-top: 1px; padding-bottom: 1px; flex-direction: row; align-items: center; gap: 0.35rem; }
.cal-event.h-xs .cal-event-count, .cal-event.h-xs .cal-event-meta, .cal-event.h-xs .cal-event-time, .cal-event.h-xs .cal-event-tag { display: none; }
.cal-event.h-xs .cal-event-name { -webkit-line-clamp: 1; }
.cal-event .cal-event-time { flex: 0 0 auto; }
/* gęściej, gdy kolumny dnia są wąskie */
.cal-dense .cal-event { font-size: 0.7rem; padding: 2px 4px 2px 6px; }
.cal-dense .cal-event-meta, .cal-dense .cal-event-count { font-size: 0.64rem; }
.cal-xdense .cal-event { font-size: 0.66rem; padding: 2px 3px 2px 5px; }
.cal-xdense .cal-event-meta { display: none; }
.cal-xdense .cal-event-count { font-size: 0.6rem; }
/* zdarzenia jednorazowe i stany */
/* odwołane: szare, przekreślone, tło w ukośne paski */
.cal-event.evt-cancelled { background: repeating-linear-gradient(135deg, #e4e1df 0 6px, #f4f2f1 6px 12px); color: #6f6a66; }
.cal-event.evt-cancelled .cal-event-name, .cal-event.evt-cancelled .cal-event-time { text-decoration: line-through; color: #6f6a66; }
.cal-event.evt-cancelled .cal-event-count { color: #b3372c; font-weight: 700; opacity: 1; }
/* trwają zapisy: pełny kolor grupy, obwódka w kolorze paska (bez kreskowania) */
.cal-event.evt-enrolling { box-shadow: inset 3px 0 0 var(--ev-bar), inset 0 0 0 1px var(--ev-bar); }
.cal-event.evt-enrolling .cal-event-name { letter-spacing: -0.01em; }
.cal-event.cal-clash { box-shadow: inset 3px 0 0 var(--ev-bar), inset 0 0 0 2px #d64545; }
.cal-event.cal-clash .cal-event-meta { color: #b42318; font-weight: 700; opacity: 1; }

/* ---------- podgląd po najechaniu (komputer) ---------- */
.cal-pop {
  position: fixed; z-index: 60; width: 20rem; max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid rgba(46, 40, 57, 0.1); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(46, 40, 57, 0.18), 0 2px 6px rgba(46, 40, 57, 0.08);
  padding: 0.75rem 0.85rem 0.6rem; font-size: 0.82rem; color: var(--text); pointer-events: none;
  animation: cal-pop-in 0.14s ease-out;
}
@keyframes cal-pop-in { from { opacity: 0; transform: translateY(3px) scale(0.985); } to { opacity: 1; transform: none; } }
.cal-pop-head { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.45rem; }
.cal-pop-bar { flex: 0 0 4px; align-self: stretch; border-radius: 2px; background: var(--ev-bar, var(--accent)); }
.cal-pop-head strong { font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.2; display: block; }
.cal-pop-when { color: var(--muted); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.cal-pop-row { margin: 0.2rem 0; }
.cal-pop-row i { font-style: normal; color: var(--border); }
.cal-pop-row.muted { color: var(--muted); font-size: 0.78rem; }
.cal-pop-row.warn { color: #b42318; font-weight: 600; }
.cal-pop-hint { margin-top: 0.5rem; font-size: 0.7rem; color: var(--muted); }
.cal-empty-note { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 0.6rem 0 0; }

/* ---------- widok miesiąca ---------- */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  user-select: none;
}
.cal-mhead {
  padding: 0.45rem 0.4rem; text-align: center;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); background: #fff;
}
.cal-mcell {
  min-width: 0; min-height: 5.5rem; padding: 0.3rem 0.3rem 0.35rem;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.cal-mcell:nth-child(7n + 7) { border-right: none; }
.cal-mcell:nth-last-child(-n + 7) { border-bottom: none; }
.cal-mcell:hover { background: var(--accent-soft); }
.cal-mcell.other { color: var(--muted); }
.cal-mcell.other .cal-mevt, .cal-mcell.other .cal-dot { opacity: 0.45; }
.cal-mcell.cal-weekend { background: #fbfaff; }
.cal-mcell.cal-today { background: #f8f5fd; }
.cal-mnum { font-family: var(--font-sans); font-weight: 700; font-size: 0.82rem; display: flex; justify-content: flex-end; }
.cal-mnum span { min-width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; }
.cal-mcell.cal-today .cal-mnum span { background: var(--accent-dark); color: #fff; }
.cal-mevt {
  --ev-bg: var(--accent-light); --ev-bar: var(--accent); --ev-fg: #4a3a73;
  font-size: 0.68rem; line-height: 1.25; padding: 1px 5px 1px 7px; border-radius: 4px;
  background: var(--ev-bg); color: var(--ev-fg); box-shadow: inset 3px 0 0 var(--ev-bar);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-mevt b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-mevt:hover { filter: brightness(0.96); }
.cal-mevt.evt-cancelled { text-decoration: line-through; }
.cal-more { font-size: 0.66rem; color: var(--muted); padding-left: 4px; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev-bar, var(--accent)); }

/* ---------- widok dnia (telefon) ---------- */
.cal-daystrip { display: flex; gap: 0.3rem; padding: 0 0 0.6rem; }
.cal-chip {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 0.4rem 0 0.35rem; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  cursor: pointer; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); position: relative;
}
.cal-chip strong { font-family: var(--font-sans); font-size: 1.05rem; color: var(--text); line-height: 1.2; }
.cal-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 2px; }
.cal-chip.today { border-color: var(--accent-dark); }
.cal-chip.today strong { color: var(--accent-dark); }
.cal-chip.active { background: var(--accent-dark); border-color: var(--accent-dark); }
.cal-chip.active span, .cal-chip.active strong { color: #fff; }
.cal-chip.active .cal-chip-dot { background: #fff; }
.cal-week.cal-dayview .cal-gutter { flex-basis: 2.9rem; }
.cal-dayfull { min-width: 0; flex: 1 1 auto; }
.cal-dayview .cal-event { font-size: 0.8rem; padding: 4px 6px 4px 8px; }
.cal-dayview .cal-event-meta, .cal-dayview .cal-event-count { font-size: 0.72rem; }

@media (max-width: 700px) {
  .cal-panel { --calw: auto; width: auto; margin-left: 0; padding: 0.9rem 0.7rem 0.8rem; }
  .cal-head { gap: 0.5rem; margin-bottom: 0.5rem; }
  .cal-nav button { padding: 0 0.7rem; font-size: 0.85rem; }
  .cal-mcell { min-height: 3.4rem; padding: 0.25rem 0.2rem; }
  .cal-mnum { font-size: 0.78rem; justify-content: center; }
  .cal-mhead { padding: 0.35rem 0.1rem; font-size: 0.6rem; letter-spacing: 0.06em; }
}

/* ---------- klik w puste miejsce / przeciąganie zajęć ---------- */
.role-admin .cal-event[draggable="true"] { cursor: grab; }
.role-admin .cal-event.dragging { opacity: 0.4; cursor: grabbing; }
.cal-day-body.cal-drop { background-color: #f3eefb; }
.cal-ghost {
  position: absolute; left: 2px; right: 2px; z-index: 6; pointer-events: none;
  border: 2px dashed var(--accent-dark); border-radius: 6px; background: rgba(169, 150, 207, 0.22);
  padding: 2px 6px; font-size: 0.7rem; font-weight: 700; color: var(--accent-dark); font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Kalendarz — warstwa wizualna (inspiracja: Fantastical). Działanie i opcje bez zmian.
   ===================================================================== */
.cal-panel { border-radius: 18px; box-shadow: 0 1px 2px rgba(var(--lav-rgb), .08), 0 16px 36px -22px rgba(var(--lav-rgb), .5); padding: 1.15rem 1.25rem 1rem; }
.cal-panel .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem 1.2rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.cal-panel .cal-toolbar h2 {
  margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--heading);
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; cursor: default;
}
.cal-panel .cal-toolbar h2 .t-sub { font-size: 1.05rem; font-weight: 600; color: var(--lav-600); letter-spacing: 0; }
.cal-panel .cal-nav { display: flex; align-items: center; gap: 0.6rem; }
.cal-navgroup, .cal-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--bg-inset); border: 1px solid var(--lav-200); border-radius: 12px;
}
.cal-panel .cal-nav button {
  border: none; background: transparent; border-radius: 9px; height: 32px; min-width: 32px; padding: 0 0.85rem;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.86rem; color: var(--accent-dark); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s, transform 0.08s;
}
.cal-panel .cal-nav button:hover { background: #fff; box-shadow: 0 1px 2px rgba(46, 40, 57, 0.08); }
.cal-panel .cal-nav button:active { transform: scale(0.96); }
.cal-panel .cal-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-panel .cal-nav button .ci { width: 17px; height: 17px; }
#cal-prev, #cal-next { padding: 0; width: 32px; }
.cal-seg button:not(.active) { color: var(--muted); }
.cal-seg button.active { background: #fff; color: var(--accent-dark); box-shadow: 0 1px 3px rgba(46, 40, 57, 0.12), 0 0 0 1px rgba(46, 40, 57, 0.04); }
.cal-seg button.active:hover { background: #fff; }

/* legenda (te same solidy co statusy) */
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.95rem; margin: 0.75rem 0.15rem 0; font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.cl { display: inline-flex; align-items: center; gap: 0.38rem; }
.cl i { width: 13px; height: 13px; border-radius: 4px; background: var(--g, var(--accent-light)); box-shadow: inset 2.5px 0 0 var(--b, var(--accent)); flex: 0 0 auto; }
.cl-group { --b: var(--accent); --g: rgba(169, 150, 207, 0.55); }
.cl-zast { --b: var(--st-reported); --g: var(--st-reported-bg); }
.cl-odr { --b: var(--st-present); --g: var(--st-present-bg); }
.cl-ind { --b: var(--st-guest); --g: var(--st-guest-bg); }
.cl-canc i { background: repeating-linear-gradient(135deg, #e4e1df 0 3px, #f4f2f1 3px 6px); box-shadow: inset 2.5px 0 0 #9b9b9b; }
.cl-enr i { background: rgba(169, 150, 207, 0.55); box-shadow: inset 2.5px 0 0 var(--accent), inset 0 0 0 1.5px var(--accent-dark); }
.cl-now i { width: 13px; height: 2px; border-radius: 2px; background: var(--now); box-shadow: none; position: relative; }
.cl-now i::before { content: ''; position: absolute; left: -1px; top: -2.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--now); }

/* siatka tygodnia */
.cal-week { border-color: var(--border); border-radius: 14px; }
.cal-gutter-head, .cal-colx .cal-day-head { height: 54px; }
.cal-colx .cal-day-head { flex-direction: column; gap: 1px; border-bottom-color: var(--border); }
.cal-colx { border-left-color: var(--n-100); }
.cal-day-name { font-size: 0.6rem; letter-spacing: 0.14em; }
.cal-day-num { font-size: 1.2rem; min-width: 1.9rem; height: 1.9rem; transition: background 0.15s; }
.cal-colx.cal-today .cal-day-num { box-shadow: 0 5px 12px -5px rgba(125, 104, 168, 0.8); }
.cal-colx.cal-weekend .cal-day-name { color: #b3accb; }
.cal-hour-label span { font-size: 0.64rem; color: #9b94a8; right: 0.5rem; }
.cal-day-body {
  background-image:
    repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent var(--hh)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hh) / 2 - 1px), #f5f2f9 calc(var(--hh) / 2 - 1px), #f5f2f9 calc(var(--hh) / 2), transparent calc(var(--hh) / 2), transparent var(--hh));
}
.cal-colx.cal-today .cal-day-body { background-color: #faf8fe; }

/* linia „teraz” z godziną */
.cal-now { height: 1.5px; background: var(--now); }
.cal-now::before { background: var(--now); width: 8px; height: 8px; top: -3.5px; left: -4px; box-shadow: 0 0 0 2px #fff; }
.cal-now span {
  position: absolute; left: 8px; top: -8px; padding: 0 5px; line-height: 15px; border-radius: 5px;
  background: var(--now); color: #fff; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(255, 69, 58, 0.35);
}

/* kafelki */
.cal-event {
  border-radius: 8px; padding: 4px 6px 4px 8px;
  box-shadow: inset 3px 0 0 var(--ev-bar), inset 0 0 0 1px rgba(46, 40, 57, 0.05);
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.14s, filter 0.14s;
}
.cal-event:hover {
  filter: none; transform: translateY(-1px);
  box-shadow: inset 3px 0 0 var(--ev-bar), 0 10px 20px -10px rgba(46, 40, 57, 0.4), 0 0 0 1px rgba(46, 40, 57, 0.07);
}
.cal-event-time { font-weight: 600; opacity: 0.92; }
.cal-event-tag { letter-spacing: 0.1em; }
.cal-dayview .cal-event { border-radius: 10px; }

/* podgląd po najechaniu */
.cal-pop { border-radius: 14px; padding: 0.8rem 0.9rem 0.65rem; box-shadow: 0 18px 50px -12px rgba(46, 40, 57, 0.3), 0 2px 6px rgba(46, 40, 57, 0.06); }
.cal-pop-bar { flex-basis: 5px; border-radius: 3px; }
.cal-pop-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; }
.cal-pop-row .ci { width: 15px; height: 15px; color: var(--accent-dark); flex: 0 0 auto; opacity: 0.85; }
.cal-pop-row.warn .ci { color: #b42318; }
.cal-pop-row.muted .ci { color: var(--muted); }
.cal-pop-hint { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px solid var(--n-100); }
.cal-pop-hint .ci { width: 12px; height: 12px; }

/* pusty stan */
.cal-empty { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 1.4rem 0 0.6rem; text-align: center; color: var(--muted); font-size: 0.85rem; }
.cal-empty svg { width: 72px; height: 72px; margin-bottom: 0.4rem; }
.cal-empty strong { font-family: var(--font-sans); color: var(--text); font-size: 0.95rem; }

/* widok miesiąca */
.cal-month { border-color: var(--border); border-radius: 14px; }
.cal-mhead { padding: 0.55rem 0.4rem; font-size: 0.6rem; letter-spacing: 0.14em; background: #fbfaff; border-bottom-color: var(--border); }
.cal-mcell { border-color: var(--n-100); padding: 0.35rem 0.35rem 0.4rem; transition: background 0.12s; }
.cal-mnum { justify-content: flex-start; }
.cal-mnum span { min-width: 1.6rem; height: 1.6rem; }
.cal-mcell.cal-today .cal-mnum span { box-shadow: 0 4px 10px -4px rgba(125, 104, 168, 0.8); }
.cal-mcell.cal-weekend .cal-mnum { color: #8d86a0; }
.cal-mevt { border-radius: 6px; padding: 2px 6px 2px 8px; margin-top: 1px; transition: transform 0.12s, box-shadow 0.12s; }
.cal-mevt:hover { filter: none; transform: translateX(1px); box-shadow: inset 3px 0 0 var(--ev-bar), 0 4px 10px -6px rgba(46, 40, 57, 0.5); }

/* widok dnia (telefon): pasek tygodnia jak w aplikacji */
.cal-daystrip { gap: 0.15rem; padding: 0.1rem 0 0.75rem; }
.cal-chip { border: none; background: transparent; padding: 0.25rem 0 0.2rem; gap: 0.15rem; }
.cal-chip strong { width: 2.15rem; height: 2.15rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: background 0.15s, color 0.15s; }
.cal-chip.today strong { color: var(--accent-dark); box-shadow: inset 0 0 0 1.5px var(--accent-dark); }
.cal-chip.active { background: transparent; border: none; }
.cal-chip.active span { color: var(--accent-dark); }
.cal-chip.active strong { background: var(--accent-dark); color: #fff; box-shadow: 0 5px 12px -5px rgba(125, 104, 168, 0.9); }
.cal-chip.active .cal-chip-dot { background: var(--accent-dark); }

/* animacja wejścia widoku */
@keyframes cal-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cal-enter { animation: cal-enter 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) { .cal-enter, .cal-pop,  .cal-event, .cal-mevt { transition: none; } }

@media (max-width: 700px) {
  .cal-panel { border-radius: 14px; padding: 0.9rem 0.7rem 0.8rem; }
  .cal-panel .cal-toolbar { margin-bottom: 0.55rem; }
  .cal-panel .cal-toolbar h2 { font-size: 1.3rem; }
  .cal-panel .cal-toolbar h2 .t-sub { font-size: 0.9rem; }
  .cal-panel .cal-nav { width: 100%; justify-content: space-between; }
  .cal-panel .cal-nav button { height: 34px; font-size: 0.84rem; padding: 0 0.7rem; }
  #cal-prev, #cal-next { width: 34px; }
  .cal-legend { gap: 0.3rem 0.7rem; font-size: 0.66rem; }
  .cal-now span { display: none; }
}

/* =====================================================================
   14. SKELETON, PUSTE STANY, REDUKCJA RUCHU
   (ruch — keyframes, wejścia widoków/list, modale, toasty, badge — WYŁĄCZNIE motion.css; tu tylko stany statyczne;
   jedyne keyframes w tym pliku: cal-enter / cal-pop-in kalendarza)
   ===================================================================== */
.skeleton { min-height: 52px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 50%, var(--n-100) 75%); background-size: 200% 100%; }
.cal-empty, .empty, .thread-empty, .cp-empty, .free-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cal-empty strong, .empty strong { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
/* redukcja ruchu — obowiązkowa; po wyłączeniu ruchu nic nie znika ani nie stoi przesunięte */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .skeleton { animation: none; background: var(--n-100); }
  header, .portal-head, #bottom-nav, .modal-backdrop, .toast { -webkit-backdrop-filter: none; backdrop-filter: none; }
  #bottom-nav { background: #fff; }
  header, .portal-head { background: var(--header-bg) var(--header-grad); }
  .modal-backdrop { background: rgba(var(--ink), .45); }
  .toast { background: var(--lav-900); }
}

/* =====================================================================
   MOTYW FIOLETOWY — poprawki czytelności po weryfikacji (23.09.2026)
   Więcej fioletu przy zachowaniu kontrastu ≥ 4,5:1 dla tekstu i ≥ 3:1 dla obrysów.
   ===================================================================== */
/* kalendarz: nawigacja tygodnia i widoki */
.cal-panel .cal-nav button { color: var(--lav-700); }                           /* 5,7:1 na lav-100 */
.cal-panel .cal-nav button:focus-visible { outline: 2px solid var(--lav-600); outline-offset: 1px; box-shadow: none; }
.cal-seg button:not(.active) { color: var(--lav-700); }
.cal-seg button.active { color: var(--lav-800); box-shadow: 0 0 0 1px var(--lav-300), 0 1px 3px rgba(var(--lav-rgb), .35); }
.cal-seg button:not(.active):hover { background: var(--lav-200); box-shadow: none; }
.cal-day-name { color: var(--lav-600); }                                          /* 4,75:1 */
.cal-colx.cal-weekend .cal-day-name { color: var(--muted); }
.cal-colx.cal-today .cal-day-name { color: var(--lav-800); }
.cal-hour-label span { color: var(--muted); }
.cal-event-time { color: var(--ev-fg); opacity: 1; }
.cal-mhead { color: var(--lav-700); }
.cal-mcell.cal-weekend .cal-mnum { color: var(--muted); }
.cal-colx.cal-weekend .cal-day-body, .cal-mcell.cal-weekend { background-color: var(--n-50); }
.cal-colx.cal-today .cal-day-body, .cal-mcell.cal-today { background-color: var(--lav-50); }
.cal-mcell:hover { background: var(--lav-100); }
.cal-chip:hover { background: transparent; }
.cal-chip:not(.active):hover strong { background: var(--lav-100); }
/* podzakładki (segmenty): hover ciemniejszy od toru, aktywny żeton wyraźnie jaśniejszy */
.subnav .sub-tab:hover, .subnav .rate-tab:hover, .subnav .prate-tab:hover, .subnav .pgroup-tab:hover, .auth-tab:hover { background: var(--lav-200); color: var(--lav-800); }
.subnav .sub-tab.active, .subnav .rate-tab.active, .subnav .prate-tab.active, .subnav .pgroup-tab.active, .auth-tab.active,
.subnav .sub-tab.active:hover, .subnav .rate-tab.active:hover, .subnav .prate-tab.active:hover, .subnav .pgroup-tab.active:hover, .auth-tab.active:hover {
  background: #fff; color: var(--lav-800); box-shadow: 0 0 0 1px var(--lav-300), 0 1px 3px rgba(var(--lav-rgb), .35);
}
#participants-subnav { background: var(--lav-200); border-color: var(--lav-300); }  /* segment leży na tle strony — tor musi się od niego odciąć */
#participants-subnav .sub-tab:not(.active):hover { background: rgba(255, 255, 255, .5); }
/* pola wyłączone = neutralne (lawenda oznacza hover/wybór) */
input:disabled, select:disabled, textarea:disabled { background: var(--n-100); border-color: transparent; color: var(--muted); }
.att-chip { background: var(--n-100); }
/* hover przycisków na lawendowych kontenerach */
:is(.pay-upcoming, .pay-month.pm-upcoming, .indiv-edit, .bulk-bar) button:not(.primary):not(.danger):hover { background: var(--lav-200); border-color: var(--lav-300); }
/* druk: fiolet znika z tła, więc nagłówek na papierze w ciemnej lawendzie */
@media print {
  header, .portal-head { position: static; background: none; box-shadow: none; color: var(--text); }
  .brand, .brand span, #ph-name { color: var(--lav-800); }
  header nav, .portal-head .top-nav, .logout-link, #bottom-nav { display: none; }
}