/* Widok "Mój kalendarz" (sprzedawca). Wszystko pod .kal, żeby nie kolidować z ogólnymi klasami CRM. Kolory i odstępy z tokens.css. */
.kal { --kal-sp-1: var(--o-1); --kal-sp-2: var(--o-2); --kal-sp-3: var(--o-3); --kal-sp-4: var(--o-4); --kal-sp-5: var(--o-5); }
.kal [hidden] { display: none !important; }
.kal-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--o-4); margin-bottom: var(--o-3); }
.kal-naglowek h1 { font-size: var(--t-2xl); margin: 0; letter-spacing: -.02em; }
.kal-opis { color: var(--tekst-2); margin: 0; font-size: var(--t-s); flex: 1; min-width: 240px; }
.kal-karta { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-l); padding: var(--o-3); box-shadow: var(--cien-1); margin-bottom: var(--o-3); }
.kal .btn { padding: 6px 14px; transition: background var(--ruch), border-color var(--ruch); white-space: nowrap; }
.kal .btn--maly { padding: 2px 10px; font-size: var(--t-xs); }
.kal .btn:hover { border-color: var(--tekst-3); }
.kal .btn--glowny { box-shadow: var(--cien-akcent); }
.kal .btn--glowny:hover { border-color: var(--akcent-ciemny); }
.kal .btn:disabled, .kal .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.kal .pig { padding: 1px 8px; }
.kal-chipy { display: inline-flex; border: 1px solid var(--ramka-mocna); border-radius: 99px; overflow: hidden; background: #fff; }
.kal-chipy button { border: 0; background: transparent; padding: 6px 14px; font-weight: 700; font-size: var(--t-s); cursor: pointer; transition: background var(--ruch); font-family: inherit; color: inherit; }
.kal-chipy button:hover { background: var(--karta-2); }
.kal-chipy button[aria-pressed=true] { background: var(--akcent); color: var(--na-akcencie); }
.kal-got { display: inline-block; padding: 0 8px; border-radius: 99px; font-size: var(--t-xs); font-weight: 800; }
.kal-got--goracy { background: var(--blad-tlo); color: var(--blad); }
.kal-got--cieply { background: var(--akcent-tlo); color: var(--akcent-tekst); }
.kal-got--chlodny { background: var(--info-tlo); color: var(--info); }
.kal-kropka { width: 9px; height: 9px; border-radius: 50%; background: var(--ramka-mocna); display: inline-block; flex: none; }

/* wybór sprzedawcy (admin, dyrektor) */
.kal-wybor { display: flex; gap: var(--o-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--o-3); font-size: var(--t-s); }
.kal-wybor select { border: 1px solid var(--ramka-mocna); border-radius: 99px; padding: 5px 12px; background: #fff; font-weight: 700; font-size: var(--t-s); font-family: inherit; width: auto; }

/* belka Google (uczciwy stan: niepołączony) */
.kal-google { padding: 0; overflow: hidden; }
.kal-gbelka { display: flex; align-items: center; gap: var(--o-2) var(--o-3); flex-wrap: wrap; padding: 6px var(--o-3); font-size: var(--t-s); }
.kal-gbelka strong { font-weight: 800; }
.kal-gbelka__sp { flex: 1; }
.kal-gszcz { padding: var(--o-3); border-top: 1px dashed var(--ramka-mocna); font-size: var(--t-s); color: var(--tekst-2); }
.kal-gszcz p { margin: 0 0 var(--o-2); }
.kal-gszcz p:last-child { margin-bottom: 0; }

/* kafle */
.kal-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o-2); margin-bottom: var(--o-3); }
.kal-kafel { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-m); padding: var(--o-2) var(--o-3); box-shadow: var(--cien-1); min-width: 0; }
.kal-kafel__et { font-size: var(--t-xs); font-weight: 700; color: var(--tekst-2); display: flex; gap: var(--o-2); align-items: center; min-height: 22px; }
.kal-kafel__et .btn { margin-left: auto; }
.kal-kafel__w { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.kal-kafel__w small { font-size: var(--t-s); font-weight: 700; color: var(--tekst-2); letter-spacing: 0; }
.kal-kafel__op { font-size: var(--t-xs); color: var(--tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-kafel--ostrz { border-color: var(--blad-ramka); background: var(--blad-tlo); }
.kal-kafel--ostrz .kal-kafel__w { color: var(--blad); }

/* pasek narzędzi */
.kal-narz { display: flex; gap: var(--o-2) var(--o-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--o-2); }
.kal-narz__nawig { display: flex; gap: var(--o-1); align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; }
.kal-narz__tytul { font-size: var(--t-xl); font-weight: 800; margin: 0 var(--o-2); }
.kal-adnot { font-size: var(--t-xs); color: var(--tekst-2); margin: 0 0 var(--o-2); }
.kal-odswiez { font-size: var(--t-xs); color: var(--tekst-2); font-variant-numeric: tabular-nums; }

/* DZIEŃ: przewijana oś */
.kal-os-scroll { max-height: min(600px, calc(100vh - 160px)); overflow-y: auto; overflow-x: hidden; border: 1px solid var(--ramka); border-radius: var(--r-m); background: #fff; }
.kal-os { display: grid; grid-template-columns: 52px 1fr; position: relative; padding: 12px 0; }
.kal-os__godz { position: relative; }
.kal-os__godz span { position: absolute; right: 8px; transform: translateY(-50%); font-size: var(--t-xs); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.kal-os__tor { position: relative; border-left: 1px solid var(--ramka-mocna); }
.kal-os__linia { position: absolute; left: 0; right: 0; border-top: 1px solid var(--ramka); }
.kal-os__linia--pol { border-top-style: dashed; opacity: .5; }
.kal-teraz { position: absolute; left: -52px; right: 0; border-top: 2px solid var(--akcent); z-index: 5; pointer-events: none; }
.kal-teraz span { position: absolute; right: 6px; top: -11px; background: var(--akcent); color: var(--na-akcencie); font-size: var(--t-2xs); font-weight: 800; padding: 1px 7px; border-radius: 99px; box-shadow: var(--cien-akcent); }
.kal-teraz::after { content: ""; position: absolute; left: 52px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--akcent); }
.kal-teraz--tydz { left: 0; }
.kal-teraz--tydz::after { left: -1px; }

.kal-blok { position: absolute; left: 6px; right: 8px; border-radius: var(--r-s); padding: 4px 10px; overflow: hidden; border: 1px solid var(--akcent-ramka); background: var(--akcent-tlo); border-left: 4px solid var(--akcent); z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 1px; transition: box-shadow var(--ruch); cursor: pointer; }
.kal-blok:hover { box-shadow: var(--cien-2); z-index: 4; }
.kal-blok--po { background: #fff; border-color: var(--ramka-mocna); border-left-color: var(--ramka-mocna); }
.kal-blok--wynik { border: 2px solid var(--akcent); border-left-width: 4px; background: #fff; box-shadow: var(--cien-akcent); }
.kal-blok--trwa { background: #fff; border-color: var(--akcent); box-shadow: var(--cien-akcent); }
.kal-blok__r1 { display: flex; gap: var(--o-2); align-items: center; font-size: var(--t-s); min-width: 0; }
.kal-blok__godz { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kal-blok__imie { white-space: nowrap; }
.kal-blok__firma { color: var(--tekst-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-blok__akcje { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.kal-blok__r2 { display: flex; gap: var(--o-2); align-items: center; font-size: var(--t-xs); color: var(--tekst-2); min-width: 0; white-space: nowrap; overflow: hidden; }
.kal-blok--nowy { animation: kal-wejscie .9s ease; }
@keyframes kal-wejscie { 0% { transform: translateX(24px) scale(.96); opacity: 0; } 40% { opacity: 1; box-shadow: 0 0 0 8px rgba(255, 122, 0, .25); } 100% { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .kal-blok--nowy { animation: none; } }
.kal-zajete { position: absolute; left: 6px; right: 8px; border-radius: var(--r-s); padding: 4px 10px; z-index: 1; color: var(--tekst-3); font-size: var(--t-s); font-weight: 700;
  background: repeating-linear-gradient(135deg, var(--szary-1) 0 8px, var(--szary-2) 8px 16px); border: 1px dashed var(--szary-ramka); display: flex; align-items: center; gap: var(--o-2); overflow: hidden; white-space: nowrap; }
.kal-zajete small { font-weight: 600; font-size: var(--t-xs); }
.kal-klodka { width: 14px; height: 14px; flex: none; }

/* TYDZIEŃ */
.kal-tydz-wrap { overflow-x: auto; border: 1px solid var(--ramka); border-radius: var(--r-m); background: #fff; }
.kal-tydz { min-width: 640px; }
.kal-tydz__naglowki { display: grid; margin-left: 52px; border-bottom: 1px solid var(--ramka); }
.kal-tydz__nag { padding: 4px var(--o-2); text-align: center; cursor: pointer; border: 0; background: transparent; font: inherit; color: inherit; border-radius: var(--r-s) var(--r-s) 0 0; transition: background var(--ruch); }
.kal-tydz__nag:hover { background: var(--karta-2); }
.kal-tydz__nag strong { display: block; font-size: var(--t-s); }
.kal-tydz__nag small { color: var(--tekst-2); font-size: var(--t-xs); }
.kal-tydz__nag--dzis { background: var(--akcent-tlo); }
.kal-tydz__nag--dzis strong { color: var(--akcent-tekst); }
.kal-tydz__cialo { display: grid; grid-template-columns: 52px 1fr; padding: 12px 0; }
.kal-tydz__kol { display: grid; }
.kal-kol { position: relative; border-left: 1px solid var(--ramka); }
.kal-kol--dzis { background: rgba(255, 122, 0, .05); }
.kal-mblok { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 1px 6px; font-size: var(--t-2xs); line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; border: 1px solid var(--akcent-ramka); background: var(--akcent-tlo); border-left: 3px solid var(--akcent); z-index: 2; display: block; text-align: left; font-family: inherit; color: inherit; }
.kal-mblok:hover { box-shadow: var(--cien-2); z-index: 4; }
.kal-mblok--po { background: #fff; border-color: var(--ramka); border-left-color: var(--ramka-mocna); color: var(--tekst-2); }
.kal-mblok--wynik { border: 2px solid var(--akcent); background: #fff; }
.kal-mblok--g { background: repeating-linear-gradient(135deg, var(--szary-1) 0 6px, var(--szary-2) 6px 12px); border: 1px dashed var(--szary-ramka); color: var(--tekst-3); cursor: default; z-index: 1; }
.kal-sob { font-size: var(--t-s); display: inline-flex; gap: 6px; align-items: center; margin-top: var(--o-2); }

/* MIESIĄC */
.kal-mies { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kal-mies__nag { font-size: var(--t-xs); font-weight: 800; color: var(--tekst-2); text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 2px 0; }
.kal-dz { min-height: 76px; border: 1px solid var(--ramka); border-radius: var(--r-s); background: #fff; padding: 6px; cursor: pointer; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: var(--t-s); font-family: inherit; color: inherit; transition: background var(--ruch), border-color var(--ruch); }
.kal-dz:hover { background: var(--karta-2); border-color: var(--akcent); }
.kal-dz--inny { opacity: .5; }
.kal-dz--dzis { border: 2px solid var(--akcent); background: var(--akcent-tlo); }
.kal-dz__num { font-weight: 800; }
.kal-dz__g { font-size: var(--t-2xs); color: var(--tekst-3); font-weight: 700; }

/* LISTA (wąski ekran) */
.kal-lista { display: none; gap: var(--o-2); }
.kal-poz { display: grid; grid-template-columns: 48px 1fr; gap: var(--o-2); align-items: start; }
.kal-poz__godz { font-weight: 800; font-variant-numeric: tabular-nums; padding-top: 6px; font-size: var(--t-s); }
.kal-poz__godz small { display: block; color: var(--tekst-2); font-weight: 600; font-size: var(--t-xs); }
.kal-poz .kal-blok, .kal-poz .kal-zajete { position: static; min-width: 0; }
.kal-poz .kal-blok { padding: 6px 10px; gap: 4px; }
.kal-poz .kal-blok__r1 { flex-wrap: wrap; }
.kal-poz .kal-blok__firma { flex-basis: 100%; order: 3; white-space: normal; }
.kal-poz .kal-blok__r2 { flex-wrap: wrap; white-space: normal; }
.kal-poz .kal-zajete { min-height: 40px; }
.kal-teraz-lista { display: flex; align-items: center; gap: var(--o-2); color: var(--akcent-tekst); font-weight: 800; font-size: var(--t-xs); }
.kal-teraz-lista::before, .kal-teraz-lista::after { content: ""; flex: 1; border-top: 2px solid var(--akcent); }
.kal-pusto { color: var(--tekst-2); padding: var(--o-5); text-align: center; }
.kal-legenda { display: flex; gap: var(--o-2) var(--o-4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--tekst-2); margin-top: var(--o-3); }
.kal-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }

@media (max-width: 1100px) { .kal-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kal-gbelka__mail { display: none; } }
@media (max-width: 700px) {
  .kal-naglowek h1 { font-size: var(--t-xl); }
  .kal-os-scroll { display: none; }
  .kal-lista { display: grid; }
  .kal-narz__tytul { font-size: var(--t-m); flex-basis: 100%; margin: 0; }
  .kal-dz { min-height: 56px; padding: 4px; font-size: var(--t-xs); }
  .kal-dz .pig { font-size: var(--t-2xs); padding: 0 5px; }
  .kal-mies { gap: 3px; }
  .kal-kafel__w { font-size: var(--t-xl); }
}