/* TODOM: arkusz aplikacji. Układ i jasny motyw wzorem portalu carIMMO, kolory marki TODOM.
   Marka:  --brand #F26522 (pomarańcz z logo), --ink #231F20 (czerń z logo).
   Przyciski główne: biały tekst na ciemniejszym pomarańczu --brand-btn #D0480E (4,55:1); #F26522 zostaje w logo i akcentach.
   Stany: zielony = dobrze, żółty = uwaga, czerwony = źle; gdy „dobrego” dużo → zwykły tekst (docs/MARKA.md).
   Żółty stanów celowo daleko od pomarańczu marki. Wszystkie kolory tylko przez tokeny. */
:root{
  --brand:#F26522; --brand-btn:#D0480E; --brand-btn-hover:#B83F0C; --brand-soft:#FDEEE5; --brand-ink:#9A3A0C;
  --ink:#231F20; --muted:#52525B; --faint:#8A8A93;
  --bg:#F8F8F7; --surface:#FFFFFF; --line:#E7E5E4; --line-strong:#D6D3D1; --hover:#F5F5F4;
  --ok:#15803D; --ok-soft:#E7F4EC; --warn:#8A6A00; --warn-soft:#FBF4D6;
  --err:#B91C1C; --err-soft:#FBE9E9;
  --r:10px; --r-card:16px;
  color-scheme: light;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);min-height:100dvh;display:flex;flex-direction:column;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--brand-ink)}
.ic{flex:none}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;min-height:64px;padding:0 24px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:30px;width:auto;display:block}
.tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:8px;padding:9px 14px;min-height:44px;border-radius:8px;color:var(--muted);
  font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.tab:hover{background:var(--hover);color:var(--ink)}
.tab.on{background:var(--brand-soft);color:var(--brand-ink)}
.who{display:flex;align-items:center;gap:10px;margin-left:auto;white-space:nowrap}
.who-name{font-size:13px;font-weight:600;color:var(--muted)}
.who form{margin:0}

/* Układ */
.wrap{flex:1;width:100%;padding:16px 20px 32px}
h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:16px;font-weight:700;margin:0 0 10px}
.sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card)}
.pad{padding:24px}
.empty{max-width:560px;margin:40px auto;padding:36px;text-align:center;color:var(--muted)}
.empty .ic{width:32px;height:32px;color:var(--faint)}
.empty h1{color:var(--ink);margin-top:10px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* Stopka: po prawej Powered by + wersja */
.foot{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:14px 26px;border-top:1px solid var(--line);
  background:var(--bg);color:var(--faint);font-size:12.5px}
.foot a{color:var(--faint);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}

/* Przyciski i formularze */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 16px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff}
.btn.primary:hover{background:var(--brand-btn-hover);border-color:var(--brand-btn-hover)}
.btn.danger{background:var(--err);border-color:var(--err);color:#fff}
.btn.small{min-height:36px;padding:6px 12px;font-size:13px}
.btn.wide{width:100%}
.btn:focus-visible,.tab:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font-weight:400;color:var(--ink)}
.form label.check{display:flex;align-items:center;gap:10px;font-weight:500}
.form label.check input{width:20px;min-height:20px;height:20px;accent-color:var(--brand)}
.form .hint{font-weight:400;color:var(--faint);font-size:12.5px}

/* Komunikaty i stany */
.alert{margin:0 0 14px;padding:12px 14px;border-radius:var(--r);font-size:14px}
.alert.err{background:var(--err-soft);color:var(--err)}
.alert.ok{background:var(--ok-soft);color:var(--ok)}
.alert.warn{background:var(--warn-soft);color:var(--warn)}
.status{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--hover);color:var(--muted)}
.status.ok{background:var(--ok-soft);color:var(--ok)}
.status.warn{background:var(--warn-soft);color:var(--warn)}
.status.err{background:var(--err-soft);color:var(--err)}

/* Tabele: na wąskim ekranie wiersze stają się kartami (etykiety z data-l) */
table.resp{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;font-size:14px}
table.resp th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);background:var(--bg);padding:8px 14px;border-bottom:1px solid var(--line)}
table.resp td{padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.resp tr:last-child td{border-bottom:0}
table.resp tr:hover td{background:var(--hover)}

/* Okienka (nasze, nie systemowe) */
dialog{border:1px solid var(--line);border-radius:var(--r-card);padding:0;max-width:480px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 20px 60px rgba(35,31,32,.25)}
dialog::backdrop{background:rgba(35,31,32,.45)}
.dlg{padding:24px}
.dlg p{color:var(--muted);margin:6px 0 20px}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px}

/* Logowanie */
.login-body{background:var(--bg)}
.login-box{max-width:420px;width:calc(100% - 32px);margin:8vh auto auto;padding:32px;background:var(--surface)}
.login-logo{display:block;height:44px;width:auto;margin:0 0 22px}

@media (max-width:880px){
  .topbar{padding:8px 12px;gap:8px;flex-wrap:wrap}
  .who-name{display:none}
  .tabs{order:3;flex-basis:100%}
  .wrap{padding:16px 12px 40px}
  .foot{justify-content:center;padding:14px 12px}
  table.resp thead{display:none}
  table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%}
  table.resp tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.resp td{border:0;padding:6px 14px}
  table.resp td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
}

/* Pomocnicze (CSP blokuje style inline) */
.narrow{max-width:640px}
.gap-top{margin-top:24px}
.muted{color:var(--muted)}
.back{display:inline-flex;margin-bottom:12px;color:var(--muted);text-decoration:none;font-size:14px}
.back:hover{color:var(--ink)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.sep{border:0;border-top:1px solid var(--line);margin:20px 0}

/* Listy: wyszukiwarka i filtry nad tabelą, sortowanie kliknięciem w nagłówek */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.filters input,.filters select{min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}
.filters input{flex:1;min-width:200px;max-width:360px}
table.resp th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
table.resp th[data-sort]::after{content:" ↕";color:var(--line-strong)}
table.resp th[aria-sort=ascending]::after{content:" ↑";color:var(--ink)}
table.resp th[aria-sort=descending]::after{content:" ↓";color:var(--ink)}
/* Pigułki filtra (do 5 opcji): wszystkie widoczne, licznik przy każdej */
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--muted);font-weight:600;font-size:14px;cursor:pointer}
.pill:hover{background:var(--hover);color:var(--ink)}
.pill.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
.pill [data-licznik]{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--hover);color:var(--muted);font-size:12.5px;text-align:center}
.pill.on [data-licznik]{background:var(--surface);color:var(--brand-ink)}
/* Pasek listy w jednej linii: tytuł · szukaj · pigułki · (odstęp) · przyciski. Oszczędnie z miejscem. */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.toolbar h1{margin:0 8px 0 0}
.toolbar input[type=search]{min-height:40px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);width:220px}
.toolbar .pill,.toolbar .btn{min-height:40px;padding:6px 12px}
@media (max-width:880px){.toolbar input[type=search]{width:100%}.toolbar .spacer{display:none}}
.ico-txt{display:inline-flex;align-items:center;gap:6px}
.ico-txt .ic{width:16px;height:16px;color:var(--muted)}
.brak{color:var(--faint)}
.btn .ic{width:16px;height:16px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media (max-width:600px){.pair{grid-template-columns:1fr}}
.pin-val{font-size:18px;font-weight:700;letter-spacing:.15em;min-width:70px}
.form .lbl .hint{font-size:12.5px}
.dane{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;font:14px/1.6 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;margin:0 0 14px}
.check-inline{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 6px;font-size:14px;color:var(--muted);cursor:pointer}
.check-inline input{width:18px;height:18px;accent-color:var(--brand-btn)}
.narrow-wide{max-width:820px}
.pin-box{display:grid;gap:8px}
.pin-val.brak-pin{font-size:14px;font-weight:400;letter-spacing:0;color:var(--faint)}
/* Pola w parach: ta sama wysokość i ta sama linia (etykieta jednowierszowa, pole 46 px) */
.pair>label{align-self:end}
.form input,.form select{height:46px}
.form textarea{height:auto}
.form input[type=checkbox]{height:18px;width:18px;min-height:0}
/* Formularz na całą szerokość: pola w kolumnach (4 na szerokim ekranie, 1 na telefonie), równe wysokości */
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 16px;align-items:end}
/* Zakładki wewnątrz sekcji (Administracja: Konta · Ekipy · Historia) */
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 14px}
.subtab{padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;color:var(--muted);font-weight:600;font-size:14px;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtab:hover{color:var(--ink)}
.subtab.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
.order{gap:4px;flex-wrap:nowrap}
.order .btn{min-height:32px;padding:4px 8px}
.toolbar select,.toolbar input[type=date]{min-height:40px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}
.inline-date{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
/* Kalendarz: siatka ekipy × dni × połówki. Luki wyraźne: przerywana ramka + „wolne” (spec 3.2). */
.week{font-size:15px;margin-left:6px}
.kal-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
table.kal{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:13px;table-layout:fixed}
.kal th,.kal td{border-bottom:1px solid var(--line);padding:4px}
.kal thead th{background:var(--bg);color:var(--muted);font-weight:600;text-align:center}
.kal th.day{font-size:13px;color:var(--ink);border-left:1px solid var(--line)}
.kal th.half{font-size:11.5px;font-weight:500}
.kal th.half:nth-child(odd){border-left:1px solid var(--line)}
.kal th.today{background:var(--brand-soft);color:var(--brand-ink)}
.kal .crew-h,.kal th.crew{width:130px;text-align:left;padding-left:12px;position:sticky;left:0;background:var(--surface);z-index:1}
.kal th.crew{font-weight:700;color:var(--ink);font-size:14px}
.kal td.slot{height:58px;vertical-align:top}
.kal td.slot:not(.pm){border-left:1px solid var(--line)}
.kal td.today{background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
.kal td.free span{display:flex;align-items:center;justify-content:center;height:100%;min-height:48px;border:1.5px dashed var(--line-strong);border-radius:8px;color:var(--faint);font-size:12px}
.qr{margin-top:16px;max-width:260px}
.qr svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.qr h3{font-size:14px;margin:0 0 8px}
.link-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.link-row .dane{flex:1;min-width:260px;margin:0}
.pin-obok{font-size:15px;white-space:nowrap}
.pin-input{font-size:28px!important;letter-spacing:.4em;text-align:center}
/* Kalendarz: wolne pole jako link (edycja), zajęte z nazwiskiem */
.kal .free-link{display:block;height:100%;text-decoration:none}
.kal .free-link:hover span{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.kal td.busy .m{height:100%;min-height:48px;padding:5px 7px;border-radius:8px;background:var(--surface);border:1px solid var(--line-strong);display:flex;flex-direction:column;gap:1px;overflow:hidden}
.kal td.busy .m strong{font-size:13px}
.kal td.busy .m span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.form textarea{width:100%;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font-weight:400;color:var(--ink)}
/* Kalendarz v2 (Karol): wyraźny podział dni, równe kolumny i równa wysokość wierszy */
.kal col.c-crew{width:130px}
.kal th.half:nth-child(odd){border-left:none}
.kal th.day,.kal th.half:not(.pm),.kal td.slot:not(.pm){border-left:2px solid var(--line-strong)}
.kal th.odd,.kal td.odd{background:#FAFAF9}
.kal th.today,.kal td.today{background:color-mix(in srgb,var(--brand-soft) 60%,transparent)}
.kal td.slot{height:72px;max-height:72px;padding:4px;overflow:hidden}
.kal td.slot>*{height:62px}
.kal td.free span{min-height:0;height:100%}
.kal td.busy .m{min-height:0;height:62px}
.kal td.busy .m .m-co{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:normal}
.kal th.crew{vertical-align:middle;line-height:1.3}
.kal th.crew strong{display:block;font-size:14px}
.kal th.crew span,.kal th.crew a{display:block;font-size:11.5px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal col.c-crew{width:150px}
/* Wybór daty (nasz, duży): przycisk z datą + kalendarz miesiąca */
.dp-wrap{position:relative;display:block}
.dp-btn{width:100%;height:46px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);text-align:left;font-weight:500;cursor:pointer}
.toolbar .dp-btn{height:40px;width:auto;min-width:190px}
.dp-btn:hover{border-color:var(--brand)}
.dp{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:320px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 12px 40px rgba(35,31,32,.18)}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-head strong{font-size:15px;text-transform:capitalize}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dp-dn{font-size:11.5px;color:var(--faint);text-align:center;padding:4px 0}
.dp-d{height:40px;border:0;border-radius:8px;background:transparent;font-size:14px;cursor:pointer}
.dp-d:hover{background:var(--hover)}
.dp-d.nd{color:var(--faint)}
.dp-d.dzis{outline:2px solid var(--brand);outline-offset:-2px}
.dp-d.on{background:var(--brand-btn);color:#fff;font-weight:700}
.dp-foot{display:flex;justify-content:flex-end;margin-top:8px}
.hint-bar{font-size:13px;color:var(--muted);background:var(--brand-soft);padding:6px 12px;border-radius:999px}
.views{display:flex;gap:4px}
.views .pill{text-decoration:none}
td.clip{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Widok miesiąca: ekipy × dni, każdy dzień = 2 kafelki (rano | popołudnie) */
table.mies{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;table-layout:fixed;min-width:980px}
.mies th,.mies td{border-bottom:1px solid var(--line);padding:3px 2px;text-align:center}
.mies thead th{background:var(--bg);font-weight:600}
.mies thead th a{display:block;color:var(--ink);text-decoration:none;line-height:1.2}
.mies thead th small{display:block;font-size:10px;color:var(--faint);font-weight:500}
.mies th.crew-h,.mies th.crew{width:140px;text-align:left;padding-left:10px;position:sticky;left:0;background:var(--surface);z-index:1}
.mies th.crew strong{display:block;font-size:13px}
.mies th.crew span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mies .mon{border-left:2px solid var(--line-strong)}
.mies .today{background:var(--brand-soft)}
.mies td{white-space:nowrap}
.h{display:inline-block;width:calc(50% - 2px);height:26px;margin:0 1px;border-radius:4px;vertical-align:middle}
.h.busy{background:var(--ink);opacity:.78}
.h.free{border:1.5px dashed var(--line-strong);background:var(--surface)}
a.h.free:hover{border-color:var(--brand);background:var(--brand-soft)}
.legend{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.legend .h{width:18px;height:14px}
/* Pasek: grupy z podpisem (Widok | Filtry | nawigacja), odstęp między grupami, żeby było wiadomo co jest czym */
.tb-group{display:inline-flex;align-items:center;gap:6px}
.tb-group+.tb-group{margin-left:22px}
.tb-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-right:2px}
.toolbar{gap:12px}
/* Minione dni wyszarzone (Karol); wolne pola w przeszłości nieaktywne */
.kal th.past,.kal td.past,.mies th.past,.mies td.past{background:#EFEFEE}
.kal td.past .m{opacity:.6}
.kal td.free.past span{border-color:var(--line);color:var(--line-strong);background:transparent}
.mies td.past .h{opacity:.45}
/* Wolne pole do kliknięcia: wyraźne (pomarańczowa przerywana ramka, „+ wolne / kliknij, dodaj”) */
.kal .free-link span{flex-direction:column;gap:1px;border:2px dashed color-mix(in srgb,var(--brand) 55%,var(--line-strong));background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface));color:var(--brand-ink)}
.kal .free-link b{display:inline-flex;align-items:center;gap:3px;font-size:12.5px}
.kal .free-link b .ic{width:13px;height:13px}
.kal .free-link small{font-size:10.5px;color:var(--muted)}
.kal .free-link:hover span{background:var(--brand-soft);border-color:var(--brand);border-style:solid}
a.h.free{border-color:color-mix(in srgb,var(--brand) 55%,var(--line-strong));background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface))}
/* Wolne = luka do zapełnienia → żółty (uwaga) z wykrzyknikiem (Karol) */
.kal .free-link span{border:2px dashed #D9A900;background:var(--warn-soft);color:var(--warn)}
.kal .free-link b{font-weight:800}
.kal .free-link b .ic{color:#D9A900;width:15px;height:15px}
.kal .free-link small{color:var(--warn)}
.kal .free-link:hover span{background:#F7E7A6;border-color:#B88F00;border-style:solid}
a.h.free{border:1.5px dashed #D9A900;background:var(--warn-soft)}
a.h.free:hover{background:#F7E7A6;border-color:#B88F00}
a.h.free{color:#B88F00;font-weight:800;font-size:15px;line-height:23px;text-decoration:none;text-align:center}
/* Miesiąc: wyraźny podział dni (linia między każdym dniem) i tygodni (gruba linia w poniedziałek) */
.mies thead th,.mies td{border-left:1px solid var(--line-strong)}
.mies .mon{border-left:3px solid var(--muted)!important}
.mies td{padding:4px 3px}
.mies tbody tr:nth-child(even) td{background:#FBFBFA}
.mies tbody tr:nth-child(even) td.past{background:#EFEFEE}
.mies tbody tr:nth-child(even) td.today{background:var(--brand-soft)}
.legend .h.free{border:1.5px dashed #D9A900;background:var(--warn-soft)}
/* Zajęty montaż jako link do karty; zaznaczenie „Pokaż w tygodniu” */
.kal td.busy a.m{text-decoration:none;color:inherit;cursor:pointer}
.kal td.busy a.m:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(35,31,32,.12)}
.kal td.focus a.m{border:2px solid var(--brand);background:var(--brand-soft);animation:focusPulse 1.2s ease-in-out 3}
@keyframes focusPulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 35%,transparent)}}
@media (prefers-reduced-motion:reduce){.kal td.focus a.m{animation:none}}
/* Miesiąc: odcienie jednego koloru: cały dzień = ciemny pasek przez obie połówki, rano = średni, popołudnie = jaśniejszy */
.h.busy{opacity:1}
.h.busy.caly{width:calc(100% - 2px);background:#231F20}
.h.busy.rano{background:#5C5557}
.h.busy.popoludnie{background:#9A9395}
.legend .h.busy.caly.lg{width:28px}
.day-nav{display:flex;gap:6px;align-items:center}
.day-nav .dp-btn{flex:1}
.wolne-dnia{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 12px;border:1px dashed #D9A900;border-radius:var(--r);background:var(--warn-soft)}
.wolne-dnia [data-wolne-lista]{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--warn)}
.wolne-dnia .pill{min-height:36px;padding:4px 12px;background:var(--surface)}
.dp-btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Pasek niezapisanych zmian: przyklejony do dołu ekranu, widoczny dopiero po zmianie */
.dirty-bar{position:sticky;bottom:12px;z-index:40;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;margin-top:6px;
  background:var(--ink);color:#fff;border-radius:var(--r-card);box-shadow:0 10px 30px rgba(35,31,32,.3)}
.dirty-bar strong{margin-right:auto}
.dirty-bar .btn:not(.primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.form label.changed input,.form label.changed select,.form label.changed textarea,.form label.changed .dp-btn{background:var(--warn-soft);border-color:#D9A900}
.wolne-dnia>.tb-label{text-transform:none;letter-spacing:0;font-size:13px;color:var(--warn);font-weight:700}
.dp-d.off{color:var(--line-strong);cursor:not-allowed;background:transparent}
.dp-btn:disabled{background:var(--bg);color:var(--muted);cursor:default}
/* Nasza podpowiedź po najechaniu */
.tip{position:fixed;z-index:80;min-width:240px;max-width:380px;padding:14px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-left:5px solid var(--brand);border-radius:12px;font-size:14.5px;line-height:1.45;pointer-events:none;box-shadow:0 14px 40px rgba(35,31,32,.22)}
.tip-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;margin-bottom:8px}
.tip-row{display:flex;align-items:flex-start;gap:8px;padding:3px 0;color:var(--muted)}
.tip-row span{color:var(--ink)}
.tip .ic{flex:none;margin-top:2px;color:var(--brand-btn)}
a.h.busy{cursor:pointer}
a.h.busy:hover{outline:2px solid var(--brand);outline-offset:1px}
.refresh{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.refresh .btn .ic{width:14px;height:14px}
.form label.invalid input{border-color:var(--err);background:var(--err-soft)}
.field-err{color:var(--err);font-size:12.5px;font-weight:600}
.fields{align-items:start}
.who .refresh{margin-right:6px;padding-right:12px;border-right:1px solid var(--line)}
@media (max-width:880px){.who .refresh [data-odswiez-info]{display:none}}
.btn.icon-only{padding:6px 10px}
.btn.icon-only .ic{width:16px;height:16px}
.spin .ic{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.who .refresh{border-right:0;padding-right:0}
/* Pasek zapisu: zawsze widoczny na dole okna dodawania i edycji (Karol) */
.save-bar{position:sticky;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px -24px -24px;padding:12px 24px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(6px);border-top:1px solid var(--line);border-radius:0 0 var(--r-card) var(--r-card)}
.save-state{font-weight:700;color:var(--warn);background:var(--warn-soft);padding:6px 12px;border-radius:999px}
@media (max-width:880px){.save-bar{margin:6px -18px -18px;padding:12px 18px}}
/* Elementy montażu */
.elementy{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0;background:var(--surface)}
.elementy legend{font-size:13px;font-weight:700;color:var(--muted);padding:0 6px}
.el-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:8px 0;border-bottom:1px dashed var(--line)}
.el-row:last-child{border-bottom:0}
.el-f{display:grid;gap:4px;min-width:140px;flex:1}
.el-f[data-el-pole=typ]{flex:0 0 150px}
.el-ilosc{flex:0 0 150px}
.el-ilosc .il{display:flex;align-items:center;gap:6px}
.el-ilosc em{font-style:normal;color:var(--muted);min-width:28px}
.el-x{min-height:46px}
/* Przyciski (Karol): zapisujące = zielony, usuwające = czerwony, zwykłe = białe; pomarańcz TODOM zostaje w logo, zakładkach, zaznaczeniach */
:root{--save:#15803D;--save-hover:#166534}
.btn.primary{background:var(--save);border-color:var(--save);color:#fff}
.btn.primary:hover{background:var(--save-hover);border-color:var(--save-hover)}
.foot .powered{display:inline-flex;align-items:center;gap:8px}
.foot .powered img{height:26px;width:auto;display:block;opacity:.85}
.foot .powered:hover img{opacity:1}
/* Przeciąganie montaży */
[draggable=true]{cursor:grab}
body.dragging [data-drop].drop-ok span,body.dragging a.h.free.drop-ok{outline:3px solid var(--save);outline-offset:-2px;background:var(--ok-soft)}
body.dragging [data-drop].drop-no span,body.dragging a.h.free.drop-no{outline:3px solid var(--err);outline-offset:-2px}
.drag-hint{position:fixed;z-index:90;pointer-events:none;padding:6px 10px;border-radius:8px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;box-shadow:0 6px 18px rgba(35,31,32,.25)}
/* Elementy: czytelniejszy układ (Karol) */
.elementy{padding:14px 16px}
.el-row{display:grid;grid-template-columns:200px repeat(3,minmax(140px,1fr)) 150px 46px;gap:10px;align-items:end;padding:10px 0}
.el-row>[hidden]{display:none!important}
.el-f[data-el-pole=typ]{flex:none}
.el-x{min-height:46px;width:46px;padding:0;color:var(--muted)}
.el-x:hover{color:var(--err);border-color:var(--err)}
.req{color:var(--err)}
[data-el-dodaj]{margin-top:6px}
@media (max-width:880px){.el-row{grid-template-columns:1fr 1fr}.el-f[data-el-pole=typ]{grid-column:1/-1}}
/* stałe kolumny: Ilość i ✕ zawsze w tym samym miejscu, niezależnie od elementu */
.el-row>[data-el-pole=typ]{grid-column:1}
.el-row>[data-el-pole=rodzaj],.el-row>[data-el-pole=drzwi],.el-row>[data-el-pole=listwa],.el-row>[data-el-pole=inne]{grid-column:2}
.el-row>[data-el-pole=uklad]{grid-column:3}
.el-row>[data-el-pole=montaz]{grid-column:4}
.el-row>.el-ilosc{grid-column:5}
.el-row>.el-x{grid-column:6}
@media (max-width:880px){.el-row>*{grid-column:auto!important}.el-row>[data-el-pole=typ]{grid-column:1/-1!important}}
.btn.nowe{border-color:var(--brand);color:var(--brand-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}
/* Stary montaż bez wymaganych danych: pola do uzupełnienia w kolorze ostrzeżenia */
.fields input[aria-invalid="true"]{border-color:var(--warn);background:var(--warn-soft)}
fieldset.elementy.uzupelnij{border-color:var(--warn);background:var(--warn-soft)}
/* Miesiąc: zajęte zielone, jak na telefonie ekipy (Karol 29.09: czarny i szary gasiły żółte wolne).
   Cały dzień ciemnozielony; pół dnia jasnozielony (rano z lewej, popołudnie z prawej). */
.h.busy.caly{background:var(--ok)}
.h.busy.rano,.h.busy.popoludnie{background:#BFE6CB;box-shadow:inset 0 0 0 1px #8FCFA4}
/* Wolne jeszcze wyraźniej (Karol 29.09): pełniejszy żółty i ciemniejsza ramka; tydzień, miesiąc, legenda */
.kal .free-link span,a.h.free,.legend .h.free{background:#FDE68A;border:2px dashed #A77F00;color:#6B5200}
.kal .free-link b .ic{color:#6B5200}
.kal .free-link small{color:#6B5200}
a.h.free:hover,.kal .free-link:hover span{background:#FCD34D;border-style:solid;border-color:#8A6A00}
/* Cały dzień łagodniej (Karol 29.09: ciemny zielony za mocny obok jasnego): średnia zieleń */
.h.busy.caly,.legend .h.busy.caly{background:#6DC28A;box-shadow:inset 0 0 0 1px #4FA86F}