/* =====================================================================
   Kalendarz (moduł 10). Klasy z prefiksem .kal-, kolory i odstępy ze zmiennych tokens.css.
   ===================================================================== */
.kal { min-width: 0; }
.kal-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--o-5); align-items: start; }
.kal-glowna { min-width: 0; }
.kal-tresc { min-width: 0; outline: none; display: grid; gap: var(--o-4); align-content: start; }
.kal-tresc > * { min-width: 0; }
.kal-tresc h2 { margin-bottom: var(--o-3); outline: none; }
.kal-tresc h2.kal-sekcja { margin: var(--o-3) 0 0; font-size: var(--t-l); }
.kal-tresc h2:focus, .kal-tresc h3:focus { outline: none; }
.kal-panel .k-przycisk--duch { margin-left: -14px; }
.kal-glowna > .k-zakladki { margin-bottom: var(--o-4); }

/* ---------- panel stanu rangi ---------- */
.kal-panel-wrap { display: grid; gap: var(--o-4); position: sticky; top: calc(var(--wysokosc-naglowka) + var(--o-4)); }
.kal-panel { padding: var(--o-4) var(--o-5); }
.kal-panel__ranga { display: flex; align-items: center; justify-content: space-between; gap: var(--o-2); flex-wrap: wrap; font-size: var(--t-xl); margin-bottom: var(--o-2); }
.kal-panel__licznik { margin-bottom: var(--o-2); }
.kal-panel__zasady, .kal-panel__dostep { color: var(--tekst-2); font-size: var(--t-s); margin: var(--o-3) 0 0; }
.kal-panel__dostep strong { color: var(--tekst); }
.kal-panel .k-komunikat { margin: var(--o-3) 0 0; }
.kal-seg { display: flex; gap: 6px; }
.kal-seg__el { flex: 1; height: 10px; border-radius: var(--r-pelny); background: var(--ramka); }
.kal-seg__el.is-pelny { background: var(--akcent); }
.kal-lista-prosta { list-style: none; margin: 0 0 var(--o-3); padding: 0; display: grid; gap: var(--o-2); }
.kal-lista-prosta li { display: grid; gap: 2px; }
.kal-lista-prosta small { color: var(--tekst-2); }
.kal-lista-prosta--odstep { margin: var(--o-3) 0; }
.kal-lista-prosta--odstep li { display: block; }
.kal-pomoc { color: var(--tekst-2); font-size: var(--t-s); margin: 0 0 var(--o-3); }
.kal-link, .kal-link-przycisk { color: var(--akcent-tekst); font-weight: 700; text-underline-offset: 3px; }
.kal-link-przycisk { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* ---------- akcje i wspólne ---------- */
.kal-akcje { display: flex; gap: var(--o-2); flex-wrap: wrap; align-items: center; margin-top: var(--o-4); }
.kal-akcje--srodek { justify-content: center; }
.kal-odstep { margin-top: var(--o-4); }
.kal-wybrane { display: flex; align-items: center; gap: var(--o-2); flex-wrap: wrap; margin-bottom: var(--o-4); }
.kal-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--o-2) var(--o-4); margin: 0 0 var(--o-4); }
.kal-dl dt { color: var(--tekst-2); font-weight: 700; font-size: var(--t-s); }
.kal-dl dd { margin: 0; overflow-wrap: anywhere; }
.kal-filtry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--o-3); }
.kal-zgoda { display: flex; align-items: center; gap: var(--o-2); font-weight: 600; }
.kal-zgoda input { width: 20px; height: 20px; min-height: 0; accent-color: var(--akcent); }

/* ---------- wdrożenie ---------- */
.kal-kroki { list-style: none; margin: var(--o-4) 0 0; padding: 0; display: grid; gap: var(--o-2); }
.kal-krok { display: flex; align-items: center; gap: var(--o-3); padding: var(--o-3) var(--o-4); background: var(--karta-2); border: 1px solid var(--ramka); border-radius: var(--r-m); }
.kal-krok.is-gotowy { background: var(--ok-tlo); border-color: #b9dcc7; }
.kal-krok__znacznik { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ramka-mocna); background: var(--karta); color: var(--ok); font-weight: 800; cursor: pointer; display: grid; place-items: center; padding: 0; }
.kal-krok.is-gotowy .kal-krok__znacznik { border-color: var(--ok); }
.kal-krok__tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kal-krok__tekst span { color: var(--tekst-2); font-size: var(--t-s); }

/* ---------- kreator: krok 1 ---------- */
.kal-qa { display: flex; align-items: center; gap: var(--o-3); flex-wrap: wrap; background: var(--akcent-tlo); border: 1px solid #ffd2a3; border-radius: var(--r-m); padding: var(--o-3) var(--o-4); margin-bottom: var(--o-4); }
.kal-qa > div { flex: 1 1 220px; min-width: 0; }
.kal-qa p { margin: 2px 0 0; color: var(--tekst-2); font-size: var(--t-s); }
.kal-qa__ikona { font-size: 1.5rem; }
.kal-kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--o-3); }
.kal-kafel { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 4px; text-align: left; align-content: start; min-height: 84px; padding: var(--o-3) var(--o-4); background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-m); cursor: pointer; transition: border-color var(--ruch), background var(--ruch), box-shadow var(--ruch); }
.kal-kafel:hover { border-color: var(--ramka-mocna); box-shadow: var(--cien-1); }
.kal-kafel.is-wybrany { border-color: var(--akcent); background: var(--akcent-tlo); box-shadow: 0 0 0 1px var(--akcent); }
.kal-kafel__nazwa { font-weight: 700; }
.kal-kafel__opis { font-size: var(--t-s); color: var(--tekst-2); }
.kal-hint { margin-top: var(--o-4); }
.kal-hint:empty { display: none; }
.kal-hint__karta { background: var(--info-tlo); border: 1px solid #bcd5e8; border-radius: var(--r-m); padding: var(--o-3) var(--o-4); }
.kal-hint__karta p { margin: var(--o-1) 0 0; font-size: var(--t-s); }

/* ---------- kreator: krok 2 ---------- */
.kal-obszar { display: grid; gap: var(--o-3); min-width: 0; }
.kal-pasek-narzedzi { display: flex; align-items: center; justify-content: space-between; gap: var(--o-3); flex-wrap: wrap; }
.kal-nawigacja { display: flex; align-items: center; gap: var(--o-2); }
.kal-nawigacja .k-przycisk { min-width: 44px; padding: 8px 12px; font-size: var(--t-l); }
.kal-tytul { min-width: 11ch; text-align: center; }
.kal-widoki { display: flex; gap: var(--o-2); }
.kal-widoki .k-chip { min-height: 36px; padding: 6px 16px; font-size: var(--t-s); }
.kal-siatka-wrap { container-type: inline-size; min-width: 0; }

.kal-miesiac { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kal-miesiac__naglowek { text-align: center; font-size: var(--t-xs); font-weight: 800; color: var(--tekst-2); text-transform: uppercase; padding: 4px 0; }
.kal-dzien { position: relative; min-height: 52px; padding: 6px; border-radius: var(--r-m); border: 1px solid var(--ramka); background: var(--karta); display: grid; align-content: space-between; justify-items: start; text-align: left; cursor: default; color: var(--tekst-2); }
.kal-dzien__nr { font-weight: 700; font-size: var(--t-s); }
.kal-dzien__info { font-size: var(--t-xs); font-weight: 800; color: var(--akcent-tekst); align-self: end; justify-self: end; min-height: 1em; line-height: 1; }
.kal-dzien.ma-terminy { cursor: pointer; color: var(--tekst); border-color: var(--ramka-mocna); background: var(--karta); }
.kal-dzien.ma-terminy::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
.kal-dzien.ma-terminy:hover { border-color: var(--akcent); }
.kal-dzien.is-obcy { opacity: 0.45; }
.kal-dzien:not(.ma-terminy) { background: transparent; border-style: dashed; border-color: var(--ramka); }
.kal-dzien.is-dzis .kal-dzien__nr { color: var(--akcent-tekst); text-decoration: underline; text-underline-offset: 3px; }
.kal-dzien.is-wybrany { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); box-shadow: var(--cien-1); }
.kal-dzien.is-wybrany .kal-dzien__info { color: var(--na-akcencie); }
.kal-dzien.is-wybrany::after { background: var(--na-akcencie); }
.kal-dzien.is-limit:not(.is-wybrany) { background: var(--karta-2); }
.kal-dzien.is-limit:not(.is-wybrany) .kal-dzien__info { color: var(--tekst-2); }
.kal-dzien.is-limit::after { background: var(--ramka-mocna); }
.kal-legenda { color: var(--tekst-2); font-size: var(--t-xs); margin: var(--o-2) 0 0; }
.kal-legenda__kropka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); margin-right: 4px; }

.kal-godziny { min-height: 0; }
.kal-godziny__naglowek { font-size: var(--t-l); margin: var(--o-2) 0; text-transform: none; }
.kal-godziny__lista { display: flex; flex-wrap: wrap; gap: var(--o-2); }
.kal-godzina { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ramka-mocna); border-radius: var(--r-pelny); background: var(--karta); cursor: pointer; font-weight: 700; transition: background var(--ruch), border-color var(--ruch); }
.kal-godzina small { color: var(--tekst-2); font-weight: 500; font-size: var(--t-xs); }
.kal-godzina:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
.kal-godzina.is-wybrany { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); }
.kal-godzina.is-wybrany small { color: var(--na-akcencie); }
.kal-godzina.is-wylaczony { cursor: not-allowed; background: var(--karta-2); color: var(--tekst-2); border-style: dashed; }
.kal-godzina.is-wylaczony:hover { background: var(--karta-2); border-color: var(--ramka-mocna); }

.kal-tydzien { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.kal-tydzien__dzien { display: grid; gap: 6px; align-content: start; padding: var(--o-2); border: 1px solid var(--ramka); border-radius: var(--r-m); background: var(--karta); }
.kal-tydzien__dzien.jest-pusty { background: transparent; border-style: dashed; }
.kal-tydzien__dzien.is-dzis { border-color: var(--akcent); }
.kal-tydzien__nazwa { display: flex; flex-direction: column; font-size: var(--t-s); margin: 0 0 4px; text-transform: none; letter-spacing: 0; }
.kal-tydzien__nazwa small { color: var(--tekst-2); font-weight: 600; font-size: var(--t-xs); }
.kal-tydzien__brak { margin: 0; font-size: var(--t-xs); color: var(--tekst-2); }
.kal-tydzien__limit { margin: 0; font-size: var(--t-xs); font-weight: 700; color: var(--tekst-2); }
.kal-tydzien .kal-godzina { flex-direction: column; align-items: center; gap: 0; padding: 6px 4px; border-radius: var(--r-m); justify-content: center; }
@container (max-width: 560px) {
  .kal-tydzien { grid-template-columns: minmax(0, 1fr); }
  .kal-tydzien__dzien { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
  .kal-tydzien__nazwa { grid-row: 1 / span 20; }
  .kal-tydzien__dzien > :not(.kal-tydzien__nazwa) { grid-column: 2; }
  .kal-tydzien .kal-godzina { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 8px 14px; border-radius: var(--r-pelny); }
}

.kal-podsumowanie:empty { display: none; }
.kal-podsumowanie__karta { border-color: var(--akcent); background: var(--karta); }
.kal-podsumowanie__karta .k-komunikat { margin-bottom: var(--o-3); }

/* ---------- potwierdzenie ---------- */
.kal-sukces { display: flex; align-items: center; gap: var(--o-4); margin-bottom: var(--o-4); }
.kal-sukces__ikona { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ok-tlo); color: var(--ok); border: 2px solid var(--ok); display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; }
.kal-sukces h2 { margin: 0; }

/* ---------- karty rezerwacji i wydarzeń ---------- */
.kal-karty { display: grid; gap: var(--o-4); }
.kal-karty--wydarzenia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.kal-rez__glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--o-3); flex-wrap: wrap; margin-bottom: var(--o-3); }
.kal-rez__glowa h3 { margin-bottom: 2px; font-size: var(--t-l); }
.kal-rez__glowa p { margin: 0; }
.kal-rez { border-left: 4px solid var(--akcent); }
.kal-rez.is-spokojna { border-left-color: var(--ramka-mocna); background: var(--karta-2); }
.kal-rez--odwolana h3 { text-decoration: line-through; text-decoration-color: var(--tekst-3); }
.kal-rez__opis { font-size: var(--t-s); color: var(--tekst-2); overflow-wrap: anywhere; }
.kal-rez__notatka { background: var(--info-tlo); border: 1px solid #bcd5e8; border-radius: var(--r-m); padding: var(--o-3) var(--o-4); margin-bottom: var(--o-3); }
.kal-rez__notatka p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kal-link-spotkania { overflow-wrap: anywhere; }
.kal-wyd { display: flex; flex-direction: column; }
.kal-wyd .kal-akcje { margin-top: auto; padding-top: var(--o-3); }
.kal-wyd__opis { color: var(--tekst-2); overflow-wrap: anywhere; }
.kal-miejsca { margin-bottom: var(--o-3); }
.kal-miejsca__tekst { margin: 0 0 6px; font-size: var(--t-s); }

/* ---------- zarządzanie ---------- */
.kal-dni { border: 1px solid var(--ramka); border-radius: var(--r-m); padding: var(--o-2) var(--o-3); margin: 0 0 var(--o-4); display: flex; flex-wrap: wrap; gap: var(--o-2) var(--o-4); }
.kal-dni legend { font-weight: 700; font-size: var(--t-s); padding: 0 6px; }
.kal-dni__el { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; }
.kal-dni__el input { width: 20px; height: 20px; accent-color: var(--akcent); }

/* ---------- responsywność ---------- */
@media (max-width: 900px) {
  .kal-uklad { display: flex; flex-direction: column; align-items: stretch; gap: var(--o-4); }
  .kal-uklad > * { min-width: 0; max-width: 100%; }
  .kal-panel-wrap { display: contents; }
  .kal-panel-wrap > .kal-panel:first-child { order: -1; }
  .kal-uklad > .kal-glowna { order: 0; }
  .kal-uklad .kal-panel-wrap > .kal-panel:not(:first-child) { order: 1; }
  .kal-panel { padding: var(--o-4); }
}
@media (max-width: 560px) {
  .kal-miesiac { gap: 4px; }
  .kal-dzien { min-height: 46px; padding: 4px 5px; }
  .kal-dzien.ma-terminy::after { top: 5px; right: 5px; width: 6px; height: 6px; }
  .kal-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kal-dl dd { margin-bottom: var(--o-2); }
  .kal-akcje > * { flex: 1 1 100%; }
  .kal-pasek-narzedzi { justify-content: center; }
  .kal-krok { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .kal-kafel, .kal-godzina { transition: none; }
}