/* Szpurt Panel — paleta (Auto/Jasny/Ciemny), ramka aplikacji i dopasowanie paneli do telefonu.
   Kolory paneli GlamLamy podmienia szpurt-motyw.js na tokeny poniżej; tu tylko układ i ramka.
   Układ: grafit z lekkim błękitem, jeden akcent (indygo), kolory stanu osobno — akcept makiet 22.10.2026. */
:root{
  --sz-bg:#eef0f4; --sz-surface:#ffffff; --sz-surface-2:#f5f6f9; --sz-ink:#15181e; --sz-ink-2:#2e333c; --sz-muted:#5b6270;
  --sz-line:#e1e4ea; --sz-line-2:#cfd4dc;
  --sz-accent:#3d3fd1; --sz-accent-soft:#e8e8fb; --sz-na-kolorze:#ffffff;
  --sz-ok:#14804a; --sz-ok-soft:#e3f4ea; --sz-warn:#b45c00; --sz-warn-soft:#fdf0de; --sz-bad:#c42b2b; --sz-bad-soft:#fbe6e6;
  --sz-info:#1f5fbf; --sz-info-soft:#e4eefb; --sz-violet:#6b3fc4; --sz-violet-soft:#efe8fb;
  --sz-gl:#c8326f; --sz-rc:#b07d00;
  --sz-font:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sz-nav-h:62px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sz-bg:#0f1115; --sz-surface:#1a1d23; --sz-surface-2:#22262d; --sz-ink:#eceef2; --sz-ink-2:#d2d6de; --sz-muted:#a3a9b5;
  --sz-line:#2a2f37; --sz-line-2:#383e48;
  --sz-accent:#8b8dff; --sz-accent-soft:#25264a; --sz-na-kolorze:#ffffff;
  --sz-ok:#4cc883; --sz-ok-soft:#163323; --sz-warn:#f0a443; --sz-warn-soft:#3a2a14; --sz-bad:#ff7b7b; --sz-bad-soft:#3c1c1e;
  --sz-info:#7fb2ff; --sz-info-soft:#18294a; --sz-violet:#b597ff; --sz-violet-soft:#2a2142;
  --sz-gl:#ff6fa8; --sz-rc:#f2c14e; color-scheme:dark}}
:root[data-theme="dark"]{
  --sz-bg:#0f1115; --sz-surface:#1a1d23; --sz-surface-2:#22262d; --sz-ink:#eceef2; --sz-ink-2:#d2d6de; --sz-muted:#a3a9b5;
  --sz-line:#2a2f37; --sz-line-2:#383e48;
  --sz-accent:#8b8dff; --sz-accent-soft:#25264a; --sz-na-kolorze:#ffffff;
  --sz-ok:#4cc883; --sz-ok-soft:#163323; --sz-warn:#f0a443; --sz-warn-soft:#3a2a14; --sz-bad:#ff7b7b; --sz-bad-soft:#3c1c1e;
  --sz-info:#7fb2ff; --sz-info-soft:#18294a; --sz-violet:#b597ff; --sz-violet-soft:#2a2142;
  --sz-gl:#ff6fa8; --sz-rc:#f2c14e; color-scheme:dark}
/* Akcent w trybie ciemnym jest jasny — tekst na nim ciemny, żeby był czytelny. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sz-na-kolorze:#11121a}}
:root[data-theme="dark"]{--sz-na-kolorze:#11121a}

/* ================= RAMKA ================= */
html{background:var(--sz-bg)}
body.sz{margin:0;background:var(--sz-bg);color:var(--sz-ink);font-family:var(--sz-font);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
body.sz *{font-family:var(--sz-font)}
html:not(.sz-gotowe) .sz-tresc{visibility:hidden}

.sz-top{position:sticky;top:0;z-index:50;background:var(--sz-surface);border-bottom:1px solid var(--sz-line);padding-top:env(safe-area-inset-top,0px)}
.sz-top__in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sz-org{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sz-muted)}
.sz-tytul{margin:0;font-size:19px;line-height:1.15;font-weight:800;color:var(--sz-ink)}
.sz-kto{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sz-muted);min-width:0}
.sz-kto[hidden]{display:none}
.sz-kto b{color:var(--sz-ink);font-weight:700}
.sz-avatar{width:34px;height:34px;flex:none;border-radius:50%;background:var(--sz-accent-soft);color:var(--sz-accent);display:grid;place-items:center;font-weight:800;font-size:14px}
.sz-avatar--duzy{width:52px;height:52px;font-size:20px}

.sz-tresc{max-width:1100px;margin:0 auto;padding:14px 12px 24px;box-sizing:border-box}
body.sz-zalogowany .sz-tresc{padding-bottom:calc(var(--sz-nav-h) + 28px + env(safe-area-inset-bottom,0px))}

.sz-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--sz-surface);border-top:1px solid var(--sz-line);display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.sz-nav[hidden]{display:none}
.sz-nav a{display:grid;justify-items:center;gap:3px;padding:4px 0;font-size:11px;font-weight:600;color:var(--sz-muted);text-decoration:none;-webkit-tap-highlight-color:transparent}
.sz-nav a.on{color:var(--sz-accent)}
.sz-nav svg{width:23px;height:23px}
@media (min-width:900px){.sz-nav{max-width:560px;margin:0 auto 12px;border:1px solid var(--sz-line);border-radius:18px;box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}}

:focus-visible{outline:2px solid var(--sz-accent)!important;outline-offset:2px}

/* ================= WIĘCEJ ================= */
.sz-wiecej{max-width:560px;margin:0 auto;display:grid;gap:12px}
.sz-karta{background:var(--sz-surface);border:1px solid var(--sz-line);border-radius:14px;padding:16px;display:grid;gap:10px}
.sz-karta[hidden]{display:none}
.sz-karta__tytul{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sz-muted)}
.sz-konto{grid-template-columns:auto 1fr;align-items:center;gap:14px}
.sz-konto__imie{font-size:18px;font-weight:800}
.sz-konto__info{font-size:13px;color:var(--sz-muted)}
.sz-segment{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--sz-surface-2);border:1px solid var(--sz-line);border-radius:12px;padding:4px}
.sz-segment button{font:inherit;font-weight:700;font-size:14px;border:0;border-radius:9px;padding:10px 6px;background:transparent;color:var(--sz-muted);cursor:pointer}
.sz-segment button[aria-pressed="true"]{background:var(--sz-surface);color:var(--sz-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sz-przycisk{font:inherit;font-weight:700;font-size:15px;border:1px solid var(--sz-line-2);background:var(--sz-surface);color:var(--sz-ink);border-radius:12px;padding:13px 14px;cursor:pointer;width:100%;text-align:center}
.sz-przycisk--zle{color:var(--sz-bad);border-color:color-mix(in srgb,var(--sz-bad) 45%,var(--sz-line))}
.sz-pomoc{margin:0;font-size:13px;color:var(--sz-muted)}
.sz-pomoc:empty{display:none}

/* ================= PANELE — wspólne ================= */
/* Logowanie wyłącznie w HUB-ie: ekrany logowania modułów i ich nagłówki (← HUB, Wyloguj) chowamy —
   to robi ramka (górny pasek, „Więcej”). Strażnik w szpurt-ramka.js odsyła bez sesji do HUB-a. */
body.sz:not(.sz-ekran-start) #sp-login,
body.sz:not(.sz-ekran-start) #gr-login,
body.sz:not(.sz-ekran-start) #glmag-screen-login{display:none!important}
body.sz .sp-header,
body.sz .gr-header{display:none!important}
body.sz #glmag-root .glmag-header h2,
body.sz #glmag-root .glmag-h-info a,
body.sz #glmag-root #glmag-logout,
body.sz #glmag-root .glmag-h-info > span:first-child{display:none!important}
body.sz #glmag-root .glmag-header{justify-content:flex-end;border-bottom:0!important;padding-bottom:0!important;margin-bottom:10px!important}
body.sz #glw-root{padding-top:0!important;max-width:900px}
body.sz #glw-banner .glw-hub-btn{display:none!important}

/* Pola: 16 px, żeby iPhone nie powiększał ekranu przy wpisywaniu. */
body.sz input,body.sz select,body.sz textarea{font-size:16px!important}

/* Zakładki modułów: jeden rząd przewijany palcem, przyklejony pod górnym paskiem. */
body.sz .sp-tabs,
body.sz #glgr-root .gr-tabs{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  position:sticky;top:calc(61px + env(safe-area-inset-top,0px));z-index:40;background:var(--sz-bg);margin:-14px -12px 12px!important;padding:10px 12px!important;border-bottom:1px solid var(--sz-line)}
body.sz .sp-tabs::-webkit-scrollbar,body.sz #glgr-root .gr-tabs::-webkit-scrollbar{display:none}
body.sz .sp-tab,
body.sz #glgr-root .gr-tabs > *{flex:none;white-space:nowrap;border-radius:999px!important;padding:8px 13px!important;font-size:14px!important;font-weight:600!important;
  background:var(--sz-surface)!important;border:1px solid var(--sz-line)!important;color:var(--sz-ink)!important;-webkit-text-fill-color:var(--sz-ink)!important;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important}
body.sz .sp-tab.active,
body.sz #glgr-root .gr-tabs > .active{background:var(--sz-ink)!important;border-color:var(--sz-ink)!important;color:var(--sz-surface)!important;-webkit-text-fill-color:var(--sz-surface)!important}

/* Przyciski pod kciuk; bez wielkich liter i neonów starego motywu. */
body.sz button,body.sz .sp-btn,body.sz .gr-btn,body.sz .glmag-btn,body.sz .gh-btn{min-height:40px;text-transform:none!important;letter-spacing:0!important;border-radius:10px!important}
body.sz h1,body.sz h2,body.sz h3,body.sz h4{text-transform:none!important;letter-spacing:0!important}

/* ================= REZERWACJE ================= */
body.sz .sp{max-width:900px}
body.sz .sp-day-nav{display:grid!important;grid-template-columns:auto 1fr auto auto;gap:6px!important;align-items:center}
body.sz .sp-day-nav span#sp-day-label{min-width:0!important;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px dashed var(--sz-line-2)!important}
body.sz .sp-day-nav button{min-height:40px;font-weight:700}
body.sz .sp-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px!important}
body.sz .sp-stat{min-width:0!important;padding:8px 9px!important;text-align:left!important;border-radius:10px!important}
body.sz .sp-stat-val{font-size:17px!important;font-variant-numeric:tabular-nums;white-space:nowrap}
body.sz .sp-stat-label{font-size:10.5px!important;text-transform:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sz .sp-res-card{border-radius:14px!important;padding:13px!important}
body.sz .sp-res-actions{gap:6px!important}
body.sz .sp-res-actions > *{flex:1 1 auto}
body.sz .sp-res-hour-tag{font-family:inherit!important}
@media (max-width:600px){
  body.sz .sp-day-nav{grid-template-columns:auto 1fr auto!important}
  body.sz .sp-day-nav #sp-day-label{grid-column:1/-1;order:-1}
}

/* ================= GRAFIK / MAGAZYN / WIEDZA ================= */
body.sz #glgr-root,body.sz #glmag-root{max-width:960px}
body.sz #glmag-root .glmag-card,body.sz #glmag-hub .gh-tile{border-radius:14px!important}
body.sz #glmag-root .glmag-card-title{text-transform:none!important;letter-spacing:0!important}

/* ================= START (logowanie) ================= */
body.sz-ekran-start #glmag-hub .gh-login{margin-top:28px}
body.sz-ekran-start #glmag-hub .gh-login h1{font-size:26px!important;letter-spacing:0!important;text-transform:none!important}
body.sz-ekran-start #glmag-hub .gh-login-form{border-radius:16px!important}
body.sz-ekran-start #glmag-hub .gh-btn{border-radius:12px!important}

/* ================= GRAFIK na telefonie (Konrad 22.10): siatka zostaje, kliknięty dzień rozsuwa się pod swoim tygodniem ================= */
body.sz #glgr-root .gr-sb{color:var(--sz-gl)!important;-webkit-text-fill-color:var(--sz-gl)!important;background:color-mix(in srgb,var(--sz-gl) 12%,transparent)!important;border-color:color-mix(in srgb,var(--sz-gl) 30%,transparent)!important}
body.sz #glgr-root .gr-dw,body.sz #glgr-root .gr-dw *{color:var(--sz-gl)!important;-webkit-text-fill-color:var(--sz-gl)!important}
body.sz .sz-ukryty{display:none!important}
@media (max-width:820px){
  body.sz #glgr-root #sc-calendar .gr-cal,body.sz #glgr-root #sc-edit-calendar .gr-cal,body.sz #glgr-root #sz-ogon .gr-cal{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-bottom:0}
  body.sz #glgr-root #sz-ogon .gr-cal{margin-top:3px}
  body.sz #glgr-root :is(#sc-calendar,#sc-edit-calendar,#sz-ogon) :is(.gr-ch,.gr-cd-e){display:block!important;padding:3px 0!important;font-size:10.5px!important;background:none!important}
  body.sz #glgr-root :is(#sc-calendar,#sc-edit-calendar,#sz-ogon) :is(.gr-cd,.gr-cd-t,.gr-cd-empty){display:block!important;width:auto!important;min-height:62px!important;padding:3px!important;margin:0!important;border-radius:8px!important;cursor:pointer;overflow:hidden}
  body.sz #glgr-root :is(#sc-calendar,#sc-edit-calendar,#sz-ogon) .gr-cd-t{border:2px solid var(--sz-accent)!important}
  body.sz #glgr-root :is(#sc-calendar,#sc-edit-calendar) :is(.sz-wybrany,.gr-ed-sel){background:var(--sz-accent-soft)!important;border-color:var(--sz-accent)!important;box-shadow:none!important}
  body.sz #glgr-root :is(#sc-calendar,#sc-edit-calendar,#sz-ogon) .gr-dow{display:none!important}
  body.sz #glgr-root :is(#sc-calendar,#sc-edit-calendar,#sz-ogon) :is(.gr-dn,.gr-dw){font-size:11px!important;margin:0 0 1px!important;padding:0!important;border:0!important}
  body.sz #glgr-root :is(#sc-calendar,#sc-edit-calendar,#sz-ogon) :is(.gr-sr,.gr-sp,.gr-sg){display:block!important;white-space:nowrap!important;overflow:hidden;text-overflow:clip;font-size:9.5px!important;padding:1px 3px!important;margin:1px 0!important;border-radius:4px!important;border:0!important}
  body.sz #glgr-root #sc-calendar :is(.gr-sb,.gr-grp){display:inline-block!important;width:1.4em;overflow:hidden;white-space:nowrap!important;padding:0!important;margin:0!important;border:0!important;background:none!important;font-size:10px!important;vertical-align:top}
  body.sz #glgr-root #sc-calendar .gr-se{font-size:0!important;height:4px;padding:0!important;margin:1px 0 2px!important;border-radius:2px!important;background:var(--sz-warn)!important}
  /* edytor dnia (Układanie zmian) jako wstawka między tygodniami */
  body.sz #glgr-root #sc-edit-day{margin:8px 0!important;border:2px solid var(--sz-accent)!important;border-radius:14px!important;padding:12px!important}
  body.sz #glgr-root #sc-edit-day .gr-table th,body.sz #glgr-root #sc-edit-day .gr-table td{padding:7px 4px!important;font-size:13px!important}
  body.sz #glgr-root #sc-edit-day .gr-ed-cell{min-width:44px;min-height:40px}
  /* Wypłaty / Archiwum: tabele jako karty */
  body.sz #glgr-root table.sz-karty,body.sz #glgr-root table.sz-karty tbody,body.sz #glgr-root table.sz-karty tfoot,body.sz #glgr-root table.sz-karty tr,body.sz #glgr-root table.sz-karty td{display:block!important;width:100%!important}
  body.sz #glgr-root table.sz-karty thead{display:none!important}
  body.sz #glgr-root table.sz-karty tr{background:var(--sz-surface)!important;border:1px solid var(--sz-line)!important;border-radius:12px!important;margin-bottom:8px;padding:2px 4px;overflow:hidden}
  body.sz #glgr-root table.sz-karty td{display:flex!important;justify-content:space-between;align-items:center;gap:12px;text-align:right!important;white-space:normal!important;border:0!important;border-bottom:1px solid var(--sz-line)!important;padding:8px!important;font-size:13.5px!important}
  body.sz #glgr-root table.sz-karty td:last-child{border-bottom:0!important}
  body.sz #glgr-root table.sz-karty td::before{content:attr(data-sz);flex:0 0 auto;text-align:left;font-size:11.5px;font-weight:700;color:var(--sz-muted)}
  body.sz #glgr-root table.sz-karty td[data-sz=""]::before{display:none}
  body.sz #glgr-root table.sz-karty td:first-child{font-weight:700;font-size:14.5px!important}
  body.sz #glgr-root table.sz-karty td:empty{display:none!important}
  /* Formularze (Dodaj wypłatę, Moje godziny): jedna kolumna, pola na całą szerokość */
  body.sz #glgr-root .gr-fg{grid-template-columns:1fr!important;padding:12px!important}
  body.sz #glgr-root .gr-fg input,body.sz #glgr-root .gr-fg select{width:100%!important;text-align:left!important;padding:11px 12px!important;box-sizing:border-box}
  body.sz #glgr-root .gr-card{padding:12px!important;overflow:hidden}
  body.sz #glgr-root .gr-stats{display:grid!important;grid-template-columns:1fr 1fr;gap:6px}
}
.sz-dzien{grid-column:1/-1;margin:4px 0 8px;background:var(--sz-surface);border:2px solid var(--sz-accent);border-radius:14px;padding:12px;display:grid;gap:8px;cursor:default}
.sz-dzien__tytul{margin:0;font-size:15px;font-weight:800;color:var(--sz-ink)}
.sz-dzien .gr-se,.sz-dzien .gr-sb,.sz-dzien .gr-grp,.sz-dzien .gr-sr,.sz-dzien .gr-sp,.sz-dzien .gr-sg{display:block!important;white-space:normal!important;overflow:visible!important;width:auto!important;font-size:13px!important;padding:7px 10px!important;margin:0!important;border-radius:9px!important;height:auto!important}
.sz-dzien small{display:block;font-weight:500;font-size:12px;opacity:.85;margin-top:2px}
.sz-dzien__pusto{color:var(--sz-muted);font-size:13px}

/* Układanie zmian: V / X i przypisanie kolorem (Konrad 22.10) */
body.sz #glgr-root #sc-edit-day .gr-ed-cell[data-on]{font-weight:800!important;font-size:15px!important}
body.sz #glgr-root #sc-edit-day .gr-ed-cell.sz-dost:not(.on){color:var(--sz-ok)!important;-webkit-text-fill-color:var(--sz-ok)!important;border-color:color-mix(in srgb,var(--sz-ok) 45%,var(--sz-line))!important;background:var(--sz-surface)!important}
body.sz #glgr-root #sc-edit-day .gr-ed-cell.sz-brak:not(.on){color:var(--sz-muted)!important;-webkit-text-fill-color:var(--sz-muted)!important;border-color:var(--sz-line)!important;background:var(--sz-surface)!important}
body.sz #glgr-root #sc-edit-day .gr-ed-cell.on{background:var(--sz-accent)!important;border-color:var(--sz-accent)!important;color:var(--sz-na-kolorze)!important;-webkit-text-fill-color:var(--sz-na-kolorze)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--sz-accent) 25%,transparent)!important}

/* ================= REZERWACJE — karty pod kciuk (makieta 22.10) ================= */
/* Płatność: kwota na całą szerokość, pod nią 💳 / 💵 / 🎁 / ✂ jako siatka 2×2. */
body.sz .sp div:has(> .sp-pay-btn){display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;align-items:stretch}
body.sz .sp div:has(> .sp-pay-btn) > div:first-child{grid-column:1/-1}
body.sz .sp div:has(> .sp-pay-btn) > div:first-child input{flex:1;width:100%!important;font-weight:700}
body.sz .sp .sp-pay-btn,body.sz .sp .sp-pay-split-toggle,body.sz .sp .sp-pay-split-save{min-height:46px;width:100%;font-size:15px!important;border-radius:10px!important}
body.sz .sp .sp-pay-split > div{flex-wrap:wrap}
/* Akcje karty: większe, równe przyciski; „Usuń” na koniec. */
body.sz .sp .sp-res-actions{display:flex!important;flex-wrap:wrap}
body.sz .sp .sp-res-actions .sp-btn-sm{min-height:42px;padding:9px 12px!important;font-size:14px!important;flex:1 1 calc(50% - 6px);text-align:center;margin:0!important}
body.sz .sp .sp-res-note textarea,body.sz .sp .sp-res-note input{border-radius:10px!important;padding:10px 12px!important}
/* Godzina na karcie wyraźniej (to „kiedy” jest najważniejsze przy przewijaniu dnia). */
body.sz .sp .sp-res-hour-tag{font-size:14px!important;padding:5px 10px!important;border-radius:8px!important;background:var(--sz-accent-soft)!important;border-color:transparent!important;color:var(--sz-accent)!important;-webkit-text-fill-color:var(--sz-accent)!important}
body.sz .sp .sp-res-slot{border-radius:7px!important;font-weight:700}
body.sz .sp .sp-res-name{font-size:16px!important;line-height:1.25}
/* Liczniki osób (− 0 +) i rozliczenia: większe pola dotyku. */
body.sz .sp .sp-pm-btn,body.sz .sp .sp-gs-minus,body.sz .sp .sp-gs-plus{min-width:44px;min-height:44px}
/* Formularze (+ Dodaj, Urodziny, Grupy, Voucher): jedna kolumna na telefonie. */
@media (max-width:600px){
  body.sz .sp .sp-add-row{grid-template-columns:1fr!important}
  body.sz .sp .sp-add-form{padding:14px!important;border-radius:14px!important}
}