/* ==========================================================================
   Mała Chmurka — wspólny arkusz stylów podstron zapisów i panelu.
   Paleta, fonty, nagłówek i stopka przeniesione 1:1 z malachmurkaleszno.pl
   ========================================================================== */

:root{
  --cream:#FBF7F1; --cream-deep:#F3EBE0; --sand:#E8DCCB;
  --wood:#C9A87C; --wood-dark:#A9834F;
  --brand:#93C7CF; --brand-deep:#3E7C89; --brand-pale:#E4F1F4;
  --navy:#3D5A78; --navy-deep:#2A4159; --navy-soft:#566F8A;
  --sky:#A9C6DD; --sky-pale:#DCEAF4;
  --ink:#2C3540; --muted:#6B7885; --line:#E3D9CB; --white:#fff;
  --ok:#2F8F5B; --ok-pale:#E4F3EA;
  --warn:#B4761C; --warn-pale:#FBF0DC;
  --bad:#B5443C; --bad-pale:#FBE7E5;
  /* Śliwkowy — przycisk „Wyklucz dzień" w panelu. W menu nie występuje:
     obsługa ma tam trzy pozycje i trzy kolory (czerwony, brązowy, morski). */
  --plum:#7E5A8C; --plum-dark:#6A4A77;
  /* Pastelowa zieleń — druga rodzina zakładek w panelu (sprawy zajęć).
     Para dla --sky-pale, które niesie pierwszą (sprawy bawialni). */
  --mint-pale:#E3F1E6;
  --font-head:'Quicksand','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Nunito','Segoe UI',system-ui,sans-serif;
  --radius:18px; --radius-lg:28px; --radius-xl:44px;
  --shadow-sm:0 2px 10px rgba(44,53,64,.06);
  --shadow:0 10px 30px rgba(44,53,64,.09);
  --shadow-lg:0 22px 55px rgba(44,53,64,.14);
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy-deep);line-height:1.22;margin:0 0 .5em}
h1{font-size:clamp(1.65rem,3.4vw,2.35rem);font-weight:700}
h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700}
h3{font-size:1.12rem;font-weight:600}
p{margin:0 0 1em}
a{color:var(--brand-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- NAGŁÓWEK */
/* Nagłówek i pasek powrotu przyklejają się do góry RAZEM, jako jeden blok
   (`.mc-chrome`, tworzony w mc-common.js). Wcześniej każdy przyklejał się
   osobno, a pasek powrotu musiał znać wysokość nagłówka, żeby się pod nim nie
   schować — przy każdej zmianie tej wysokości (inny ekran, inny font, dłuższa
   nazwa podstrony) przycisk „Powrót do…" wjeżdżał pod nagłówek. Teraz nie ma
   czego dopasowywać: oba leżą jeden pod drugim w normalnym przepływie i nie
   mają jak na siebie nachodzić.

   Reguły niżej działają w obu układach: z opakowaniem i bez niego (gdyby
   przeglądarka miała jeszcze stary, zapamiętany mc-common.js — arkusz ma
   wersję w adresie, skrypt nie). */
.mc-chrome{position:sticky;top:0;z-index:100}
.mc-chrome .site-header,
.mc-chrome .backbar{position:relative;top:auto;z-index:auto}
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,247,241,.95);backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);padding:10px 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center}
.logo-mark{
  display:block;width:108px;aspect-ratio:2.401;flex:none;
  background-color:var(--brand-deep);
  -webkit-mask:var(--logo-src) center/contain no-repeat;
          mask:var(--logo-src) center/contain no-repeat;
}
/* Menu klienta zostaje w jednym rzędzie — tak jak było. Przy `nowrap` pozycje
   ściskają się i mieszczą; gdyby zawijały się zawsze, każdy klient dostałby
   dwupiętrowy nagłówek za darmo.
   Dopiero trzy przyciski obsługi rozpychają menu ponad szerokość strony
   (na 1440 px chciałoby 1754 px), więc zawijanie włączamy wyłącznie wtedy, gdy
   te przyciski są widoczne. Klasę ustawia updateNavAdmin() w mc-common.js. */
.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
body.has-admin-nav .nav ul{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
/* „Wyloguj się" jest przyciskiem, nie linkiem — nigdzie nie prowadzi, tylko
   wykonuje akcję. Wygląd musi mieć identyczny jak pozostałe pozycje, więc
   obie reguły opisują jedno i drugie naraz. */
.nav a,
.nav .nav-btn{
  display:block;font-family:var(--font-head);font-weight:600;font-size:.9rem;
  color:var(--navy-deep);padding:.5em .58em;border-radius:999px;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.nav a:hover,.nav a.is-current,
.nav .nav-btn:hover{background:var(--sky-pale);color:var(--navy-deep);text-decoration:none}
.nav .nav-cta{background:var(--wood);color:#fff;margin-left:8px;padding-inline:1.3em}
.nav .nav-cta:hover{background:var(--wood-dark);color:#fff}
/* Wariant dla „Nowego wejścia" — ten sam przycisk, tylko czerwony, żeby przy
   ladzie rzucał się w oczy. Ceglasty, nie sygnalizacyjny: obok stoją kolejne
   przyciski i dwa krzyczące kolory zaczęłyby ze sobą walczyć. */
.nav .nav-cta-red{background:var(--bad)}
.nav .nav-cta-red:hover{background:#9C3A33;color:#fff}
/* Trzy przyciski obsługi, trzy kolory — czerwony (nowe wejście), brązowy
   (panel admina), morski (nowe zajęcia). */
.nav .nav-cta-teal{background:var(--brand-deep)}
.nav .nav-cta-teal:hover{background:#33636D;color:#fff}
/* Przyciski obsługi stoją obok siebie — bez własnego odstępu skleiłyby się
   w jeden pasek. `.nav-cta` ma margines tylko z lewej, więc dokładamy go
   również wtedy, gdy przyciski zawijają się do drugiego rzędu. */
.nav .nav-cta + .nav-cta,
.nav li + li > .nav-cta{margin-left:6px}

/* Plakietka z liczbą spraw czekających na obsługę — przy zakładce w panelu
   i przy pozycji w menu. Czerwone kółko, bo to jedyne miejsce w panelu,
   które ma prawo dopominać się uwagi. */
/* Przełącznik widoku kalendarza (Dzień / Tydzień / Miesiąc). Mieszkał
   w kalendarz-zajec.html; od kiedy używa go też panel, stoi tu — jeden
   wygląd zamiast dwóch kopii, które i tak zaczęłyby się rozjeżdżać. */
.view-switch{display:flex;gap:4px;background:var(--cream-deep);padding:4px;border-radius:999px}
.view-switch button{padding:.38em .95em;border-radius:999px;font-family:var(--font-head);
  font-weight:600;font-size:.86rem;color:var(--navy-deep);white-space:nowrap}
.view-switch button.is-on{background:var(--white);box-shadow:var(--shadow-sm);color:var(--brand-deep)}

/* Przełącznik widoku kalendarza (Dzień / Tydzień / Miesiąc). Mieszkał
   w kalendarz-zajec.html; od kiedy używa go też panel, stoi tu — jeden
   wygląd zamiast dwóch kopii, które i tak zaczęłyby się rozjeżdżać. */
.view-switch{display:flex;gap:4px;background:var(--cream-deep);padding:4px;border-radius:999px}
.view-switch button{padding:.38em .95em;border-radius:999px;font-family:var(--font-head);
  font-weight:600;font-size:.88rem;color:var(--navy-deep);white-space:nowrap}
.view-switch button.is-on{background:var(--white);box-shadow:var(--shadow-sm);color:var(--brand-deep)}

.tab-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  margin-left:6px;border-radius:999px;background:var(--bad);color:#fff;
  font-family:var(--font-head);font-size:.75rem;font-weight:700;line-height:1;
  vertical-align:middle}
/* W menu plakietka siedzi na kolorowym tle przycisku — biały krążek czyta się
   tam lepiej niż czerwony na czerwonym. */
.nav-cta .tab-badge{background:#fff;color:var(--bad)}

.nav-toggle{display:none;width:46px;height:40px;padding:9px 8px;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:3px;width:100%;background:var(--navy-deep);border-radius:3px;
  transition:transform .3s var(--ease),opacity .25s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* ------------------------------------- PASEK „POWRÓT DO STRONY GŁÓWNEJ" --- */
.backbar{
  /* Przyklejaniem zajmuje sie `.mc-chrome`. To `sticky` zostaje wylacznie jako
     zapas na wypadek braku opakowania — patrz komentarz przy `.mc-chrome`. */
  position:sticky;top:var(--mc-header-h,65px);z-index:90;
  background:var(--cream);border-bottom:1px solid var(--line);
  padding:8px 0;
}
.backbar .container{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.back-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:600;font-size:.9rem;
  color:var(--navy-deep);background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:.5em 1.15em .5em .9em;
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),background-color .2s var(--ease);
}
.back-btn:hover{background:var(--sky-pale);transform:translateX(-2px);text-decoration:none}
.back-btn svg{width:16px;height:16px;flex:none}
.backbar .crumb{color:var(--muted);font-size:.88rem}

/* ----------------------------------------------------------------- LAYOUT */
.page{padding:28px 0 64px;min-height:52vh}
.page-narrow{max-width:560px;margin-inline:auto}
.lead{color:var(--muted);font-size:1.02rem;margin-top:-.4em}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(18px,3vw,28px);
}
.card + .card{margin-top:20px}
.card-tight{padding:16px 18px;border-radius:var(--radius)}

/* --------------------------------------------------------------- PRZYCISKI */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:600;font-size:1rem;
  padding:.8em 1.7em;border-radius:999px;text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--wood);color:#fff;box-shadow:0 8px 22px rgba(169,131,79,.34)}
.btn-primary:hover{background:var(--wood-dark);color:#fff;transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(61,90,120,.28)}
.btn-navy:hover{background:var(--navy-deep);color:#fff;transform:translateY(-2px)}
.btn-outline{background:var(--white);border:2px solid var(--navy);color:var(--navy-deep)}
.btn-outline:hover{background:var(--sky-pale)}
.btn-soft{background:var(--brand-pale);color:var(--brand-deep)}
.btn-soft:hover{background:var(--sky-pale)}
.btn-danger{background:var(--bad-pale);color:var(--bad);border:1px solid rgba(181,68,60,.25)}
.btn-danger:hover{background:#f7d8d5}
/* Pełny czerwony przycisk — „+ Nowe wejście" w panelu. `btn-danger` to wersja
   blada, do akcji, które kasują; ta jest do akcji wykonywanej najczęściej. */
.btn-red{background:var(--bad);color:#fff}
.btn-red:hover{background:#9C3A33;color:#fff}
/* Śliwkowy — wykluczenia rezerwacji. Osobny kolor, bo to jedyna akcja
   w panelu, która ZABIERA coś klientowi; nie powinna wyglądać jak reszta. */
.btn-plum{background:var(--plum);color:#fff}
.btn-plum:hover{background:var(--plum-dark);color:#fff}
/* Morski — zajęcia. Ten sam kolor, co przycisk „Nowe zajęcia" w menu, żeby
   ta sama akcja wyglądała tak samo wszędzie. */
.btn-teal{background:var(--brand-deep);color:#fff}
.btn-teal:hover{background:#33636D;color:#fff}
.btn-sm{font-size:.86rem;padding:.5em 1.05em}
.btn-block{width:100%}
.btn:disabled{background:#DED7CC;color:#8D8579;box-shadow:none;cursor:not-allowed;transform:none}

/* ------------------------------------------------------------- FORMULARZE */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label,.lbl{font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--navy-deep)}
.hint{font-size:.83rem;color:var(--muted)}
.control{
  width:100%;min-height:44px;padding:9px 13px;
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:12px;outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.control:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(147,199,207,.3)}
.control::placeholder{color:#A9AFB7}
textarea.control{min-height:104px;resize:vertical;line-height:1.55}
select.control{
  appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7885' stroke-width='1.8' stroke-linecap='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
.control[type=color]{padding:4px;height:44px}

/* Pola daty i godziny.
   Safari na iPhonie daje im własną, sztywną szerokość i wyśrodkowuje wartość —
   przez to napis wychodził poza ramkę i nie trzymał się lewej krawędzi jak
   reszta formularza. `appearance:none` zdejmuje natywny wygląd, `min-width:0`
   pozwala polu skurczyć się w siatce, a reguły na ::-webkit-date-and-time-value
   przywracają wyrównanie do lewej i pełną wysokość. */
.control[type=date],
.control[type=time],
.control[type=datetime-local]{
  -webkit-appearance:none;appearance:none;
  min-width:0;max-width:100%;
  text-align:left;
}
.control[type=date]::-webkit-date-and-time-value,
.control[type=time]::-webkit-date-and-time-value,
.control[type=datetime-local]::-webkit-date-and-time-value{
  text-align:left;min-height:1.4em;margin:0;
}
.control[type=date]::-webkit-datetime-edit,
.control[type=time]::-webkit-datetime-edit{padding:0}
.control[type=date]::-webkit-calendar-picker-indicator,
.control[type=time]::-webkit-calendar-picker-indicator{opacity:.55;margin-left:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
fieldset{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 16px}
legend{font-family:var(--font-head);font-weight:600;font-size:.92rem;padding:0 6px;color:var(--navy-deep)}
.check{display:flex;align-items:flex-start;gap:10px;margin:6px 0;font-size:.96rem;cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--brand-deep);cursor:pointer}

.alert{border-radius:14px;padding:12px 15px;font-size:.94rem;margin-bottom:16px;border:1px solid}
.alert-bad{background:var(--bad-pale);border-color:rgba(181,68,60,.28);color:var(--bad)}
.alert-ok{background:var(--ok-pale);border-color:rgba(47,143,91,.28);color:var(--ok)}
.alert-info{background:var(--brand-pale);border-color:rgba(62,124,137,.25);color:var(--brand-deep)}
.alert-warn{background:var(--warn-pale);border-color:rgba(180,118,28,.3);color:var(--warn)}

.badge{display:inline-block;padding:.22em .7em;border-radius:999px;font-size:.78rem;font-weight:700;font-family:var(--font-head)}
.badge-ok{background:var(--ok-pale);color:var(--ok)}
.badge-warn{background:var(--warn-pale);color:var(--warn)}
.badge-bad{background:var(--bad-pale);color:var(--bad)}
.badge-info{background:var(--brand-pale);color:var(--brand-deep)}

/* ------------------------------------------------------------------ STOPKA */
.site-footer{background:var(--navy-deep);color:rgba(233,240,246,.82);padding:clamp(44px,5vw,66px) 0 0;margin-top:40px}
.site-footer h4{color:#fff;margin-bottom:1em;font-size:.95rem;letter-spacing:.06em}
.site-footer a{color:rgba(233,240,246,.82)}
.site-footer a:hover{color:var(--sky)}
.footer-inner{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:40px;padding-bottom:40px}
.footer-inner ul{list-style:none;margin:0;padding:0}
.footer-brand .footer-logo{width:168px;background-color:#fff;margin-bottom:18px}
.footer-tagline{font-family:var(--font-head);font-size:1.02rem;line-height:1.6;margin:0}
.footer-nav li{margin-bottom:.5em}
.footer-contact p{margin-bottom:.8em;font-size:.96rem}
.footer-social{display:flex;gap:12px;margin-top:4px}
.social-link{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(169,198,221,.16);color:rgba(233,240,246,.82);
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.social-link svg{width:21px;height:21px;fill:currentColor;display:block}
.social-link:hover{background:var(--sky);color:var(--navy-deep);transform:translateY(-2px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:20px}
.footer-bottom p{margin:0;font-size:.88rem;color:rgba(233,240,246,.6);text-align:center}

/* =================================================== KALENDARZ TYGODNIOWY */
.cal-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cal-nav{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:var(--white);border:1px solid var(--line);color:var(--navy-deep);font-size:20px;line-height:1}
.cal-nav:hover{background:var(--sky-pale)}
.cal-range{font-family:var(--font-head);font-weight:700;font-size:1.12rem;color:var(--navy-deep);margin-right:auto}
.cal-today{font-size:.86rem;padding:.5em 1.05em}

.cal{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden}
.cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cal-inner{min-width:860px}
.cal-head,.cal-body{display:grid;grid-template-columns:56px repeat(7,minmax(0,1fr))}
.cal-head{border-bottom:1px solid var(--line);background:var(--cream-deep)}
.cal-head .gut{border-right:1px solid var(--line)}
.day-head{padding:9px 4px 11px;text-align:center;border-right:1px solid var(--line);min-width:0}
.day-head:last-child{border-right:0}
.day-num{font-family:var(--font-head);font-size:1.22rem;font-weight:700;color:var(--navy-deep);line-height:1.2}
.day-name{font-size:.82rem;color:var(--muted)}
.day-head.is-weekend .day-num{color:var(--brand-deep)}
.day-head.is-today{background:var(--sky-pale)}
.day-head.is-today .day-num{color:var(--wood-dark)}

.cal-body{position:relative}
.gut-col{border-right:1px solid var(--line);background:var(--cream)}
.hour{height:34px;position:relative;font-size:.72rem;color:var(--muted);text-align:right;padding-right:7px}
.hour span{position:relative;top:-8px}
.day-col{position:relative;border-right:1px solid #F1EAE0;min-width:0}
.day-col:last-child{border-right:0}
.slot{height:34px;border-bottom:1px solid #F5EFE6}
.slot.hour-line{border-bottom-color:var(--line)}
.slot.clickable{cursor:pointer}
.slot.clickable:hover{background:var(--brand-pale)}

.ev{
  position:absolute;overflow:hidden;color:#fff;border-radius:9px;
  padding:4px 7px;font-size:.75rem;line-height:1.25;cursor:pointer;
  box-shadow:0 2px 6px rgba(44,53,64,.18);text-align:left;width:calc(100% - 6px);left:3px;
  transition:filter .14s var(--ease),transform .14s var(--ease);
}
.ev:hover{filter:brightness(1.07);transform:translateY(-1px)}
.ev-title{font-family:var(--font-head);font-weight:700;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ev-sub{opacity:.94;font-size:.7rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.is-short{padding:2px 6px}
.ev.is-short .ev-sub{display:none}
.ev.is-full{opacity:.62}

/* --- agenda mobilna --- */
.cal-agenda{display:none}
/* Widok dnia: siatka godzinowa nie ma sensu dla jednego dnia, więc pokazujemy
   listę — i to na KAŻDEJ szerokości, nie tylko na telefonie. Bez tego na
   komputerze zostawał pusty ekran, mimo że zajęcia tego dnia były. */
.cal.is-day .cal-scroll{display:none}
.cal.is-day .cal-agenda{display:block}
.agenda-day{border-bottom:1px solid var(--line)}
.agenda-day:last-child{border-bottom:0}
.agenda-head{display:flex;align-items:baseline;gap:8px;padding:12px 16px 6px;background:var(--cream-deep)}
.agenda-head .d{font-family:var(--font-head);font-weight:700;color:var(--navy-deep)}
.agenda-head .n{color:var(--muted);font-size:.87rem}
/* „Dziś" ma być widoczne także na telefonie — tak samo jak w siatce na desktopie. */
.agenda-day.is-today .agenda-head{background:var(--brand-pale)}
.agenda-day.is-today .agenda-head .d{color:var(--brand-deep)}
.agenda-day.is-today .agenda-head .n{color:var(--brand-deep);font-weight:700}
.agenda-list{padding:8px 12px 14px;display:flex;flex-direction:column;gap:8px}
.agenda-item{
  display:flex;gap:12px;align-items:stretch;text-align:left;width:100%;
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
  box-shadow:var(--shadow-sm);
}
.agenda-item:active{transform:scale(.995)}
.agenda-bar{width:6px;border-radius:6px;flex:none}
.agenda-time{display:block;font-family:var(--font-head);font-weight:700;font-size:.88rem;
  color:var(--brand-deep);white-space:nowrap}
.agenda-title{display:block;font-weight:700;font-size:.98rem;color:var(--ink);margin:1px 0 2px}
.agenda-meta{display:block;font-size:.83rem;color:var(--muted)}
.agenda-empty{padding:6px 4px 2px;color:var(--muted);font-size:.9rem}

.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:.85rem;color:var(--muted)}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* ------------------------------------------------------------------ TABELE */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
table.tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:720px}
table.tbl th,table.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid #F1EAE0;vertical-align:middle}
table.tbl th{font-family:var(--font-head);font-weight:700;color:var(--navy-deep);background:var(--cream-deep);
  position:sticky;top:0;z-index:1;white-space:nowrap}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--cream)}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ MODAL */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding:24px 14px;overflow-y:auto;background:rgba(42,65,89,.45);backdrop-filter:blur(3px)}
.modal.is-open{display:flex}
.modal-box{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:680px;padding:22px;margin:auto}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.modal-head h2{margin:0}
.modal-close{width:38px;height:38px;border-radius:50%;background:var(--cream-deep);color:var(--navy-deep);
  font-size:20px;line-height:1;display:grid;place-items:center;flex:none}
.modal-close:hover{background:var(--sand)}
.modal-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px;
  border-top:1px solid var(--line);padding-top:16px}
.modal-foot .spacer{margin-right:auto}

/* ------------------------------------------------------------------ TOAST */
/* Wyzej niz .modal (200) i niz toast (300) - to okienko zawsze jest na wierzchu,
   bo pyta o los tego, co jest pod nim. */
.ask-back{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;
  background:rgba(44,53,64,.5);opacity:0;transition:opacity .16s var(--ease)}
.ask-back.is-on{opacity:1}
.ask{width:100%;max-width:400px;background:var(--white);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-lg);transform:translateY(10px);
  transition:transform .16s var(--ease)}
.ask-back.is-on .ask{transform:none}
/* Okienko z wyborem dni tygodnia potrzebuje wiecej miejsca niz zwykle pytanie. */
.ask-wide{max-width:470px}

/* ---- wybor dni tygodnia i konca serii (okno zajec oraz okienko „Powiel") ---- */
.rep-days{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}
.rep-days button{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--white);font-family:var(--font-head);font-weight:700;color:var(--navy-deep)}
.rep-days button[aria-pressed="true"]{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.rep-days button:hover{border-color:var(--brand)}
.rep-end{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center;margin-top:8px}
.rep-end .check{margin:0}
@media (max-width:560px){ .rep-end{grid-template-columns:1fr} }
.ask h2{font-size:1.15rem;margin:0 0 6px}
.ask p{margin:0 0 18px;color:var(--muted);font-size:.94rem;line-height:1.55}
.ask-changes{background:var(--warn-pale);border-radius:12px;padding:11px 14px;margin:0 0 18px}
.ask-changes strong{display:block;font-family:var(--font-head);font-size:.76rem;color:var(--warn);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.ask-changes ul{margin:0;padding-left:18px;color:var(--ink);font-size:.9rem;line-height:1.5}
.ask .field{margin-bottom:18px;text-align:left}
.ask-acts{display:flex;flex-direction:column;gap:8px}
.ask-acts .btn{margin:0}
@media (prefers-reduced-motion:reduce){
  .ask-back,.ask-back .ask{transition:none}
}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:300;
  background:var(--navy-deep);color:#fff;padding:12px 20px;border-radius:999px;
  box-shadow:var(--shadow-lg);font-size:.94rem;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);max-width:92vw;text-align:center}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------- ŁADOWANIE */
.loading{display:flex;align-items:center;gap:10px;color:var(--muted);padding:24px 0;justify-content:center}
.spin{width:20px;height:20px;border:3px solid var(--sand);border-top-color:var(--brand-deep);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;color:var(--muted);padding:34px 16px}

/* -------------------------------------------------------------- RESPONSYW */
@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:860px){
  /* Przycisk musi zostać NAD rozwiniętym menu — inaczej menu zasłania własny
     przycisk zamykania (krzyżyk) i jedynym wyjściem jest kliknięcie w link. */
  .nav-toggle{display:flex;position:relative;z-index:3}
  .nav{position:fixed;inset:0 0 auto 0;background:var(--cream);box-shadow:var(--shadow-lg);
    padding:76px 20px 26px;transform:translateY(-104%);transition:transform .38s var(--ease);
    /* `dvh`, nie `vh`: na telefonie `100vh` liczy się razem z paskiem adresu,
       więc dolne pozycje menu potrafiły wylądować pod krawędzią ekranu. */
    max-height:100dvh;overflow-y:auto;z-index:-1;
    -webkit-overflow-scrolling:touch;
    /* Bez tego przewijanie wewnatrz menu przelewa sie na strone pod spodem
       i po dojechaniu do konca listy widok odbija w gore. */
    overscroll-behavior:contain;
    border-radius:0 0 var(--radius-lg) var(--radius-lg)}
  .nav.is-open{transform:translateY(0);z-index:2}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a,
  .nav .nav-btn{padding:.85em 1em;font-size:1.05rem;border-radius:var(--radius)}
  /* Przycisk domyślnie centruje tekst i zwęża się do napisu — sąsiednie
     pozycje są do lewej i na całą szerokość, więc dorównujemy. */
  .nav .nav-btn{width:100%;text-align:left}
  .nav .nav-cta{margin:10px 0 0;text-align:center}
  /* Przyciemnienie pod menu. Bez niego nie było wiadomo, że wystarczy
     dotknąć obok, żeby zamknąć — a samo menu wisiało nad przewijającą się
     stroną i wyglądało, jakby panel się zaciął. */
  .nav-backdrop{position:fixed;inset:0;z-index:250;background:rgba(42,65,89,.38);
    backdrop-filter:blur(2px);opacity:0;transition:opacity .3s var(--ease)}
  body.nav-open .nav-backdrop{opacity:1}
  /* Rozwiniete menu przechodzi nad wszystko — ta sama zasada, co na stronie
     glownej, gdzie nad naglowkiem stoi jeszcze baner ciasteczek. */
  /* Rozwiniete menu nad wszystkim. Podnosimy caly przyklejony blok, bo to on
     tworzy kontekst ukladania — podniesienie samego naglowka zostawiloby menu
     pod przyciemnieniem. */
  body.nav-open .mc-chrome{z-index:300}
  /* NAJWAZNIEJSZA REGULA W TYM BLOKU.
     Naglowek ma `backdrop-filter`, a kazdy filtr tworzy BLOK ZAWIERAJACY dla
     potomkow `position:fixed`. Menu jest dzieckiem naglowka, wiec bylo
     przypiete do paska naglowka zamiast do okna — otwarte w polowie strony
     potrafilo wyladowac poza ekranem. Na czas otwarcia zdejmujemy filtr:
     menu wraca do okna i zachowuje sie tak samo przy kazdym przewinieciu. */
  body.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Krzyzyk dostaje na czas otwarcia wlasne tlo w kolorze menu. Tla naglowka
     uzyc sie nie da: menu jest jego dzieckiem, wiec maluje sie NAD nim —
     bez tej podkladki przewijane pozycje przejezdzalyby tuz przy przycisku. */
  body.nav-open .nav-toggle{background:var(--cream);border-radius:12px;
    box-shadow:0 0 0 8px var(--cream)}
  /* Blokada przewijania przy otwartym menu. Samo `body` nie wystarczało:
     elementem przewijanym jest `html`, więc strona jechała pod menu i wtedy
     naprawdę trudno było trafić z powrotem na dół. */
  /* Blokade przewijania robi JavaScript (unieruchomienie <body> z zapamietana
     pozycja) — `overflow:hidden` na <html> bywalo na telefonach nieskuteczne
     i przesuwalo menu poza ekran. Tu zostaje samo wyciszenie odbicia. */
  html.nav-open,body.nav-open{overscroll-behavior:none}
  .container{padding-inline:16px}

  /* kalendarz: siatka znika, pokazujemy czytelną agendę */
  .cal-scroll{display:none}
  .cal-agenda{display:block}
  .cal-range{font-size:1rem;width:100%;order:-1;margin:0 0 4px}
}
@media (max-width:560px){
  .row2,.row3{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .page{padding:20px 0 44px}
  .modal{padding:12px 8px}
  .modal-box{padding:16px}
  .btn{width:100%}
  .btn.btn-auto{width:auto}
  .modal-foot .btn{width:100%}
}

/* ==========================================================================
   GALERIA ZDJĘĆ ZAJĘĆ (panel administratora)
   ========================================================================== */
.gal{display:block}

/* pole na upuszczanie plików */
.gal-drop{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:22px 16px;border:2px dashed rgba(62,124,137,.45);border-radius:var(--radius);
  background:var(--brand-pale);color:var(--brand-deep);cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.gal-drop:hover{background:var(--sky-pale);border-color:var(--brand-deep)}
.gal-drop b{font-family:var(--font-head);font-size:1rem;color:var(--navy-deep)}
.gal-drop span{font-size:.84rem;color:var(--muted);line-height:1.45}
/* podświetlenie na czas trzymania plików nad galerią */
.gal.is-over .gal-drop{background:var(--ok-pale);border-color:var(--ok);border-style:solid}

.gal-msg:not(:empty){margin-top:10px}
.gal-msg .alert{margin:0}

/* siatka miniatur */
.gal-grid{list-style:none;margin:12px 0 0;padding:0;
  display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.gal-item{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:8px;cursor:grab;
  box-shadow:var(--shadow-sm);transition:box-shadow .16s var(--ease),transform .16s var(--ease);
}
.gal-item:hover{box-shadow:var(--shadow)}
.gal-item.is-dragging{opacity:.45;cursor:grabbing}
/* miejsce, w które spadnie przeciągane zdjęcie */
.gal-item.is-target{border-color:var(--brand-deep);transform:translateY(-3px);
  box-shadow:0 0 0 3px rgba(147,199,207,.45)}
.gal-item.is-new{border-color:rgba(47,143,91,.45)}

.gal-thumb{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--cream-deep)}
.gal-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}

.gal-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;min-height:19px}
.gal-tag{font-family:var(--font-head);font-size:.66rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.15em .5em;border-radius:999px;
  background:var(--cream-deep);color:var(--muted)}
.gal-tag-cover{background:var(--wood);color:#fff}
.gal-tag-new{background:var(--ok-pale);color:var(--ok)}

.gal-name{margin-top:4px;font-size:.78rem;font-weight:600;color:var(--navy-deep);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-size{font-size:.72rem;color:var(--muted);min-height:1em}

.gal-acts{display:flex;gap:4px;margin-top:7px}
.gal-acts button{
  flex:none;width:30px;height:30px;border-radius:9px;font-size:.9rem;line-height:1;
  background:var(--brand-pale);color:var(--brand-deep);
}
.gal-acts button:hover:not(:disabled){background:var(--sky-pale)}
.gal-acts button:disabled{opacity:.35;cursor:not-allowed}
.gal-acts .gal-del{flex:1;width:auto;font-size:.76rem;font-weight:600;
  background:var(--bad-pale);color:var(--bad)}
.gal-acts .gal-del:hover{background:#f7d8d5}

.gal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:10px}
.gal-count{font-size:.82rem;color:var(--muted)}

/* na telefonie zdjęcia układamy w dwóch kolumnach — miniatura zostaje czytelna */
@media (max-width:520px){
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .gal-drop{padding:18px 12px}
  /* palcem trafia się gorzej niż myszką — przyciski dostają więcej wysokości */
  .gal-acts button{width:36px;height:38px}
  .gal-acts .gal-del{width:auto}
}

/* ==========================================================================
   POWIĘKSZONE ZDJĘCIE (podgląd na całym ekranie)
   z-index 350: nad kartami (200) i powiadomieniami (300), ale POD okienkiem
   z pytaniem (400) — żeby pytanie nigdy nie schowało się za podglądem.
   ========================================================================== */
.lbox{
  --lb-pad:clamp(12px,3vw,28px);
  --lb-bottom:0px;                 /* miejsce na strzalki, gdy sa pod zdjeciem */
  position:fixed;inset:0;z-index:350;display:grid;place-items:center;
  background:rgba(20,28,38,.92);
  opacity:0;transition:opacity .18s var(--ease);
  padding:var(--lb-pad);
}
.lbox.is-on{opacity:1}

.lbox-stage{display:grid;place-items:center;max-width:100%;max-height:100%}

/* Wymiary liczone wprost z okna, a nie przez `height:100%`: element siatki
   wysrodkowany przez `place-items` nie jest rozciagany, wiec procent nie ma
   sie do czego odniesc i wysokie zdjecie wychodzilo poza ekran.
   `dvh` (drugie, nadpisujace) uwzglednia pasek adresu na telefonie. */
.lbox-img{
  width:auto;height:auto;object-fit:contain;
  max-width:min(1200px,calc(100vw - var(--lb-pad) * 2));
  max-height:calc(100vh - var(--lb-pad) * 2 - var(--lb-bottom));
  max-height:calc(100dvh - var(--lb-pad) * 2 - var(--lb-bottom));
  border-radius:10px;background:#0d1319;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  transform:scale(.97);transition:transform .18s var(--ease);
}
.lbox.is-on .lbox-img{transform:none}

/* krzyżyk i strzałki: jasne kółka, czytelne na każdym zdjęciu */
.lbox-close,.lbox-nav{
  position:absolute;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy-deep);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.lbox-close:hover,.lbox-nav:hover{background:#fff;transform:scale(1.06)}
.lbox-close{top:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px)}
.lbox-prev{left:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lbox-next{right:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lbox-prev:hover,.lbox-next:hover{transform:translateY(-50%) scale(1.06)}

.lbox-count{
  position:absolute;bottom:clamp(10px,2.5vw,22px);left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.92);color:var(--navy-deep);
  font-family:var(--font-head);font-weight:700;font-size:.86rem;
  border-radius:999px;padding:.3em 1em;
}

@media (max-width:560px){
  /* Na telefonie strzałki schodzą na dół, żeby nie leżały na zdjęciu —
     przewijanie palcem w bok i tak działa. */
  .lbox-close,.lbox-nav{width:42px;height:42px}
  .lbox-prev{left:calc(50% - 96px);top:auto;bottom:14px;transform:none}
  .lbox-next{right:calc(50% - 96px);top:auto;bottom:14px;transform:none}
  .lbox-prev:hover,.lbox-next:hover{transform:scale(1.06)}
  .lbox-count{bottom:22px}
  .lbox{--lb-bottom:64px}
}

@media (prefers-reduced-motion:reduce){
  .lbox,.lbox-img{transition:none}
}