/* ===================================================================== grafiki.css — moduł „Grafiki obiektów” (REJESTR_SYSTEM) Wygląd = „Nowy wygląd” modułu Wyceny (styl_nowy.css). Tylko jasny motyw. Wszystko jest zamknięte w klasie .gr (na albo na kontenerze modułu), żeby nie gryzło się z bazowym CSS aplikacji. Nazwy tokenów takie same jak w styl_nowy.css. ===================================================================== */ .gr{ --bg:#EFEBE5; --panel:#FFFFFF; --line:#E6E1D9; --line2:#F0ECE6; --fg:#2B2A28; --dim:#8A857E; --faint:#9A958E; --inv-bg:#2B2A28; --inv-fg:#FFFFFF; --pos:#1F8A5B; --warn:#9A5B12; --neg:#C0392B; --akcent:#2F5E99; --pole:#FAF8F5; /* plakietki */ --pl-ziel-bg:#E3F2EA; --pl-ziel:#1F6B47; --pl-burs-bg:#FBEEDD; --pl-burs:#9A5B12; --pl-czer-bg:#FBE7E4; --pl-czer:#A3281B; --pl-szar-bg:#EDEAE4; --pl-szar:#5F5B55; --pl-fiol-bg:#EEE7F7; --pl-fiol:#6B45A0; --font:'Manrope','Segoe UI',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Consolas,'Courier New',monospace; color-scheme:light; font-family:var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased; margin:0;min-height:100vh; } .gr *{box-sizing:border-box} .gr input,.gr select,.gr textarea,.gr button{font-family:inherit;color:inherit} .gr a{color:var(--akcent)} .gr a:hover{color:var(--fg)} .gr .mono{font-family:var(--mono)} .gr .dim{color:var(--dim)} .gr [hidden]{display:none!important} /* ---------- pasek górny ---------- */ .gr .topbar{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:1px solid var(--line); padding:12px 32px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .gr .topbar .wroc{font-size:12px;color:var(--dim);text-decoration:none;white-space:nowrap} .gr .topbar .wroc:hover{color:var(--fg)} .gr .tytul-blok .nadtytul{font-size:11.5px;color:var(--dim)} .gr .tytul-blok .tytul{font-size:20px;font-weight:500;letter-spacing:-.01em;white-space:nowrap} .gr .miesiac-nav{display:flex;align-items:center;gap:6px;margin-left:10px} .gr .miesiac-nav .nazwa{font-size:15px;font-weight:600;min-width:128px;text-align:center} .gr .odstep{flex-grow:1} /* ---------- przyciski ---------- */ .gr .btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px; font-size:12.5px;font-weight:500;padding:9px 13px;border:1px solid var(--line);background:var(--panel); color:var(--fg);white-space:nowrap;text-decoration:none;transition:.15s} .gr .btn:hover{border-color:var(--dim)} .gr .btn-glowny{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg);font-size:13px;font-weight:600;padding:10px 18px} .gr .btn-glowny:hover{opacity:.86;color:var(--inv-fg)} .gr .btn-ikona{padding:7px 10px;font-family:var(--mono)} .gr .btn-czerwony{border:none;background:none;color:var(--neg);font-size:12px} .gr .btn:disabled{opacity:.45;cursor:not-allowed} .gr .dodaj{margin-top:12px;background:transparent;border:1px dashed var(--line);border-radius:8px;color:var(--dim); width:100%;padding:9px;font-size:12.5px;cursor:pointer} .gr .dodaj:hover{border-color:var(--pos);color:var(--pos)} .gr .przelacznik{display:inline-flex;background:var(--pole);border:1px solid var(--line);border-radius:8px;padding:2px} .gr .przelacznik button{border:none;background:none;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:6px;color:var(--dim);cursor:pointer} .gr .przelacznik button.on{background:var(--panel);color:var(--fg);box-shadow:0 1px 2px rgba(43,42,40,.08)} /* ---------- plakietki ---------- */ .gr .plak{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:3px 9px;font-size:11px;font-weight:600;white-space:nowrap} .gr .plak.duza{font-size:12px;padding:4px 11px} .gr .pl-ziel{background:var(--pl-ziel-bg);color:var(--pl-ziel)} .gr .pl-burs{background:var(--pl-burs-bg);color:var(--pl-burs)} .gr .pl-czer{background:var(--pl-czer-bg);color:var(--pl-czer)} .gr .pl-szar{background:var(--pl-szar-bg);color:var(--pl-szar)} .gr .pl-fiol{background:var(--pl-fiol-bg);color:var(--pl-fiol)} .gr .pl-ciemna{background:var(--inv-bg);color:var(--inv-fg)} /* status miesiąca: Szkic / Plan zatwierdzony / W trakcie / Zamknięty */ .gr .status-szkic{background:var(--pl-burs-bg);color:var(--pl-burs)} .gr .status-plan{background:var(--pl-fiol-bg);color:var(--pl-fiol)} .gr .status-trakcie{background:var(--pl-ziel-bg);color:var(--pl-ziel)} .gr .status-zamkniety{background:var(--pl-szar-bg);color:var(--pl-szar)} /* ---------- układ, karty, sekcje ---------- */ .gr .strona{padding:18px 32px 48px;display:flex;flex-direction:column;gap:14px;max-width:1600px;margin:0 auto} .gr .dwie-kol{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;align-items:start} .gr .dwie-rowne{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} @media(max-width:1100px){.gr .dwie-kol,.gr .dwie-rowne{grid-template-columns:1fr}} .gr .karta{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px} .gr h2.sekcja{display:flex;align-items:baseline;gap:15px;padding-bottom:12px;font-size:15px;font-weight:600;margin:0} .gr h2.sekcja .nr{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--pos);flex:none} .gr h2.sekcja .licznik{font-family:var(--mono);font-size:10px;font-weight:400;background:var(--pl-szar-bg);color:var(--pl-szar);border-radius:6px;padding:2px 8px} .gr h2.sekcja .kreska{flex:1;height:1px;background:var(--line2)} .gr h2.sekcja .dopisek{font-size:11.5px;font-weight:400;color:var(--dim);text-align:right} .gr .opis{font-size:12px;color:var(--dim);line-height:1.55} /* ---------- liczniki (jak „Godziny do wypracowania” w Wycenach) ---------- */ .gr .liczniki{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch} .gr .licz{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 14px;min-width:126px} .gr .licz.na-bialym{background:var(--pole);border-color:var(--pole)} .gr .licz .et{font-size:11.5px;font-weight:500;color:var(--dim)} .gr .licz .kw{font-family:var(--mono);font-size:18px;margin-top:4px} .gr .licz .pod{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:2px} .gr .licz.mocny .kw{color:var(--pos)} .gr .licz.uwaga .kw{color:var(--warn)} .gr .licz.zle .kw{color:var(--neg)} .gr .licz.zmiany .kw{color:var(--pl-fiol)} .gr .licz.alarm{background:var(--pl-czer-bg);border-color:var(--pl-czer-bg);text-decoration:none;color:var(--pl-czer)} .gr .licz.alarm .et,.gr .licz.alarm .pod{color:var(--pl-czer)} .gr .licz.alarm .kw{color:var(--neg)} /* ---------- komunikaty ---------- */ .gr .baner{display:flex;align-items:center;gap:14px;border-radius:10px;padding:12px 18px;font-size:13px;flex-wrap:wrap} .gr .baner.zamkniety{background:var(--pl-szar-bg);color:var(--pl-szar)} .gr .baner.ostrzezenie{background:var(--pl-burs-bg);color:var(--pl-burs);border-radius:8px} .gr .baner.ok{background:var(--pl-ziel-bg);color:var(--pl-ziel);border-radius:8px} .gr .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--inv-bg);color:var(--inv-fg); border-radius:8px;padding:11px 18px;font-size:13px;z-index:200;box-shadow:0 10px 28px rgba(43,42,40,.25)} /* ---------- pola ---------- */ .gr .pole{display:flex;flex-direction:column;gap:6px} .gr .pole label,.gr .etykieta{font-size:11.5px;font-weight:500;color:var(--dim)} .gr .in{background:var(--pole);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12.5px;outline:none;width:100%} .gr .in:focus{border-color:var(--akcent);box-shadow:0 0 0 3px rgba(47,94,153,.12)} .gr .in.num{font-family:var(--mono);text-align:right;padding-right:14px} .gr .in.godz{font-family:var(--mono);font-size:12px} .gr .in:disabled{opacity:.55;cursor:not-allowed} .gr input[type=checkbox]{accent-color:var(--pos)} .gr .siatka-pol{display:grid;grid-template-columns:2fr 2fr 1fr;gap:14px 18px} /* ---------- zwykłe tabele (jak table.tab w Wycenach) ---------- */ .gr table.tab{width:100%;border-collapse:collapse;font-size:13px} .gr table.tab th{font-size:11.5px;font-weight:500;color:var(--dim);text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)} .gr table.tab td{padding:8px 6px;border-bottom:1px solid var(--line2);vertical-align:middle} .gr table.tab th:first-child,.gr table.tab td:first-child{padding-left:0} .gr table.tab th:last-child,.gr table.tab td:last-child{padding-right:0} .gr table.tab .liczba{font-family:var(--mono);font-size:12.5px;text-align:right;white-space:nowrap} .gr table.tab th.liczba{font-family:var(--font);font-size:11.5px} .gr table.tab td.wynik{font-family:var(--mono);font-size:12.5px;text-align:right;white-space:nowrap} .gr table.tab td.wynik small{display:block;font-size:10px;color:var(--faint)} .gr table.tab tr.suma td{border-top:1px solid var(--line);border-bottom:none;font-weight:600} .gr table.tab tr.uwaga td{background:var(--pole)} .gr table.tab tr.dzien-log td{background:var(--pole);font-size:11.5px;font-weight:600;color:var(--dim);padding:6px} .gr .plus{color:var(--pos)} .gr .minus{color:var(--neg)} .gr .usun{border:none;background:none;color:var(--faint);font-size:15px;cursor:pointer;padding:2px 6px} .gr .usun:hover{color:var(--neg)} .gr .uchwyt{color:var(--faint);cursor:grab;width:24px} /* dni posterunku (element z Wycen) */ .gr .dni-post{display:flex;gap:2px} .gr .dni-post label{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--mono);font-size:9px; letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:3px 4px;border:1px solid var(--line2);border-radius:4px;cursor:pointer} .gr .dni-post label.swieto{color:var(--neg);border-color:var(--line)} .gr .dni-post input{width:14px;height:14px;margin:0} /* ===================================================================== GRAFIK — siatka ludzie × dni (A1) — prawdziwa tabela; 31 dni mieści się od 1366 px. ===================================================================== */ .gr .pasek-sluzb{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--pole);border-radius:8px;margin-bottom:12px;flex-wrap:wrap} .gr .pasek-sluzb .etykieta{margin-right:2px} .gr .sl-btn{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 10px; display:inline-flex;align-items:baseline;gap:7px;font-size:12px} .gr .sl-btn b{font-family:var(--mono);font-size:14px;font-weight:600} .gr .sl-btn span{font-family:var(--mono);font-size:10.5px;color:var(--dim)} .gr .sl-btn.n{background:var(--pl-szar-bg)} .gr .sl-btn.czysc{color:var(--neg)} .gr .sl-btn:hover{border-color:var(--dim)} .gr .sep{width:1px;height:24px;background:var(--line)} .gr .kbd{font-family:var(--mono);font-size:10.5px;color:var(--dim)} .gr .grafik-wrap{overflow-x:auto;position:relative} .gr table.grafik{width:100%;min-width:1060px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12px} .gr table.grafik col.k-os{width:176px} .gr table.grafik col.k-sum{width:52px} .gr table.grafik th,.gr table.grafik td{border-bottom:1px solid var(--line2);border-left:1px solid var(--line2);padding:0;text-align:center} .gr table.grafik .os{position:sticky;left:0;z-index:2;background:var(--panel);border-left:none;text-align:left;padding-right:8px} .gr table.grafik .os .n{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gr table.grafik .os .p{font-family:var(--mono);font-size:10px;color:var(--faint)} .gr table.grafik .sum{font-family:var(--mono);font-size:12px;text-align:right;padding-right:6px} .gr table.grafik thead th{font-weight:500} .gr table.grafik thead .os,.gr table.grafik thead .sum{font-size:11.5px;color:var(--dim);font-family:var(--font)} /* nagłówek dnia: .dz (+ .we weekend, .sw święto, .dzis, .brak) */ .gr .dz{height:50px;border-bottom:1px solid var(--line)!important;vertical-align:middle} .gr .dz .nr{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:20px;min-width:22px;border-radius:6px} .gr .dz .dn{display:block;font-size:10px;color:var(--dim)} .gr .dz .sw-z{display:block;font-family:var(--mono);font-size:9px;font-weight:600;color:var(--neg);line-height:10px;height:10px} .gr .we{background:var(--pole)} .gr .dz.sw .nr{color:var(--pl-czer)} .gr .dz.sw .dn{color:var(--neg)} .gr .dz.dzis .nr{background:var(--akcent);color:#fff} .gr .dz.brak .nr{background:var(--neg);color:#fff} /* wiersz obsady z paskami doby */ .gr tr.obsada td{height:66px;vertical-align:middle} .gr .ob-lab{display:block;font-family:var(--mono);font-size:9px;font-weight:600;line-height:10px;height:10px;margin-top:3px} .gr .ob-lab.brak{color:var(--neg)} .gr .ob-lab.nad{color:var(--warn)} /* pasek doby: 24 x — .doba (pionowy) / .doba.poziom */ .gr .doba{display:inline-flex;flex-direction:column;width:12px;height:48px;border-radius:3px;overflow:hidden;vertical-align:middle} .gr .doba.poziom{flex-direction:row;width:100%;max-width:220px;height:6px} .gr .doba i{flex:1;display:block} .gr .h-ok{background:var(--pl-ziel-bg)} .gr .doba.mocna .h-ok{background:var(--pos)} .gr .h-brak{background:var(--neg)} .gr .h-nad{background:var(--warn)} .gr .h-nie{background:var(--line2)} .gr .h-1{background:#D9D3C9} .gr .h-2{background:var(--pl-szar)} /* KRATKA grafiku: td.kr + stany (łączą się) */ .gr td.kr{height:36px;position:relative;font-family:var(--mono);font-size:13px;font-weight:500;cursor:cell;user-select:none;outline:none} .gr td.kr.n{background:var(--pl-szar-bg)} /* nocka */ .gr td.kr.r{font-size:10px;letter-spacing:-.03em} /* ręczne godziny */ .gr td.kr.d2{font-size:9px;line-height:10px;white-space:pre-line;letter-spacing:-.03em} /* dwie służby */ .gr td.kr.not-txt{font-family:var(--font);font-size:9.5px;font-style:italic;color:var(--dim)} /* sama notatka */ .gr td.kr.no::after{content:'';position:absolute;top:0;right:0;border-left:7px solid transparent;border-top:7px solid var(--dim)} /* notatka */ .gr td.kr.zm::before{content:'';position:absolute;top:3px;left:3px;width:6px;height:6px;background:var(--pl-fiol);border-radius:1px} /* zmiana po planie */ .gr td.kr.kol{background:var(--pl-czer-bg);color:var(--pl-czer);box-shadow:inset 0 0 0 1.5px var(--neg)} /* kolizja */ .gr td.kr.prz{background:var(--pl-burs-bg);color:var(--pl-burs);outline:1.5px dashed var(--warn);outline-offset:-3px} /* za krótka przerwa */ .gr td.kr.sel{box-shadow:inset 0 0 0 2px var(--akcent),inset 0 0 0 5px rgba(47,94,153,.12);z-index:3} /* zaznaczona */ .gr td.kr.sel.kol{box-shadow:inset 0 0 0 2px var(--akcent),inset 0 0 0 4px var(--neg)} .gr .zamkniety td.kr{cursor:default;color:var(--pl-szar)} .gr tr.suma-dnia td{height:38px;border-bottom:none;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px} .gr tr.dodaj-osobe td{border-left:none;text-align:left;padding:8px 0} .gr .wybor-osoby{background:var(--pole);border:1px dashed #D9D3C9;border-radius:6px;padding:7px 10px;font-size:12.5px;width:176px;color:var(--dim)} /* dymek (historia kratki, notatka, kolizja) */ .gr .dymek{position:absolute;z-index:60;width:292px;background:var(--panel);border:1px solid var(--line);border-radius:12px; box-shadow:0 12px 32px rgba(43,42,40,.16);padding:14px 16px;font-size:12px;line-height:1.45;text-align:left;font-family:var(--font);font-style:normal;color:var(--fg)} .gr .dymek .w{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line2)} .gr .dymek .w:last-of-type{border-bottom:none} .gr .dymek .w span{color:var(--dim)} .gr .dymek .w b{font-family:var(--mono);font-weight:500} .gr .dymek .alarm{margin-top:8px;padding:8px 10px;background:var(--pl-czer-bg);color:var(--pl-czer);border-radius:8px;font-size:11.5px} /* lista „Do poprawy” */ .gr .problem{display:grid;grid-template-columns:118px 1fr auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line2)} .gr .problem:last-child{border-bottom:none} .gr .problem .plak{justify-content:center} .gr .problem .tresc{font-size:13px;line-height:1.45} .gr .problem small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:2px} .gr .legenda{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px} .gr .legenda .poz{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;font-size:12px} .gr .legenda .probka{height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:4px;position:relative;font-family:var(--mono);font-size:13px;font-weight:500} /* zakładki posterunków */ .gr .posterunki{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .gr .posterunki a{text-decoration:none;font-size:12px;padding:5px 12px} /* ===================================================================== TELEFON (A2) — osoba z obiektu. Duże pola, min. 44 px. ===================================================================== */ .gr.tel{max-width:480px;margin:0 auto;padding-bottom:96px} .gr .tel-nag{background:var(--panel);border-bottom:1px solid var(--line);padding:14px 16px 12px} .gr .tel-nag .nad{font-size:12px;color:var(--dim)} .gr .tel-nag .tyt{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-top:2px} .gr .tel-nag .wiersz{display:flex;align-items:center;justify-content:space-between;margin-top:8px} .gr .tel-strzalka{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:var(--fg);text-decoration:none} .gr .tel-dni{display:flex;gap:6px;padding:12px 16px;overflow-x:auto;scroll-snap-type:x mandatory} .gr .tel-dzien{flex:none;width:46px;height:58px;border-radius:10px;border:1px solid var(--line);background:var(--panel); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;text-decoration:none;color:var(--fg);scroll-snap-align:start} .gr .tel-dzien .dn{font-size:11px;color:var(--dim)} .gr .tel-dzien .nr{font-family:var(--mono);font-size:16px;font-weight:500} .gr .tel-dzien.on{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg)} .gr .tel-dzien.on .dn{color:#D9D3C9} .gr .tel-dzien.sw .nr{color:var(--neg)} .gr .tel-dzien .kropka{position:absolute;bottom:5px;width:6px;height:6px;border-radius:50%;background:var(--neg)} .gr .tel-lista{display:flex;flex-direction:column;gap:12px;padding:0 16px} .gr .tel-karta{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden} .gr .tel-karta .k-nag{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line2)} .gr .tel-karta .k-nag b{font-size:15px;font-weight:700} .gr .tel-sl{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;border-bottom:1px solid var(--line2);color:var(--fg);text-decoration:none} .gr .tel-sl .g{font-family:var(--mono);font-size:14px;font-weight:500;width:108px;flex:none;line-height:1.25} .gr .tel-sl .g small{display:block;font-family:var(--font);font-size:11.5px;font-weight:500;color:var(--dim)} .gr .tel-sl .kto{flex-grow:1;font-size:15px;font-weight:600;line-height:1.3} .gr .tel-sl .kto small{display:block;font-size:11.5px;font-weight:500;color:var(--pl-fiol)} .gr .tel-sl .str{color:var(--faint);font-size:18px} .gr .tel-sl.brak{background:var(--neg);color:#fff;border-bottom:none} .gr .tel-sl.brak .g small,.gr .tel-sl.brak .str,.gr .tel-sl.brak .kto small{color:var(--pl-czer-bg)} .gr .tel-sl.brak .kto{font-size:16px;font-weight:700;letter-spacing:.02em} .gr .tel-notatki{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px} .gr .tel-stopka{position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:12px 16px 20px} .gr .tel-stopka .srodek{max-width:448px;margin:0 auto;display:flex;gap:10px} .gr .tel-btn{flex:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:15px;font-weight:600;min-height:52px; border:1px solid var(--line);background:var(--panel);color:var(--fg);text-decoration:none;cursor:pointer} .gr .tel-btn.glowny{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg);font-size:16px} /* arkusz „Kto idzie?” */ .gr .tel-tlo{position:fixed;inset:0;background:rgba(43,42,40,.55);z-index:90} .gr .tel-arkusz{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;max-height:92vh;overflow:auto;background:var(--panel); border-radius:16px 16px 0 0;padding:10px 16px 20px;z-index:91;display:flex;flex-direction:column} .gr .tel-arkusz .uchwyt-ark{width:40px;height:5px;border-radius:3px;background:#D9D3C9;margin:0 auto 14px} .gr .osoba-wyb{display:flex;align-items:center;gap:12px;min-height:62px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;width:100%;text-align:left} .gr .osoba-wyb .kolko{width:24px;height:24px;border-radius:50%;border:2px solid #D9D3C9;flex:none;display:flex;align-items:center;justify-content:center} .gr .osoba-wyb .t{flex-grow:1;font-size:16px;font-weight:600;line-height:1.3} .gr .osoba-wyb .t small{display:block;font-size:12.5px;font-weight:500;color:var(--dim)} .gr .osoba-wyb.on{border:2px solid var(--akcent);box-shadow:0 0 0 4px rgba(47,94,153,.12);padding:8px 13px} .gr .osoba-wyb.on .kolko{border-color:var(--akcent);background:var(--akcent)} .gr .osoba-wyb.uw .t small{color:var(--warn)} .gr .osoba-wyb.off{background:var(--pole)} .gr .osoba-wyb.off .t{color:var(--dim)} .gr .osoba-wyb.off .kolko{border-style:dashed} /* kalendarz miesiąca (telefon, ustawienia) */ .gr .kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} .gr .kal .dn{font-size:11px;font-weight:500;color:var(--dim);text-align:center} .gr .kd{height:50px;border-radius:8px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px} .gr .kd .nr{font-family:var(--mono);font-size:14px;font-weight:500} .gr .kd.pusty{background:transparent;border:none} .gr .kd.we{background:var(--pole)} .gr .kd.sw{background:var(--pl-czer-bg);border-color:var(--pl-czer-bg)} .gr .kd.sw .nr{color:var(--pl-czer);font-weight:600} .gr .kd.dzis{border:2px solid var(--akcent)} .gr .kd .doba.poziom{width:32px;height:5px} /* ===================================================================== PODGLĄD DO WYSŁANIA (B5) — ok. 800 px, czytelny jako zdjęcie i czarno-biało ===================================================================== */ .gr.druk{background:#fff;max-width:800px;margin:0 auto;padding:28px 24px} .gr .druk-nag{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--fg);padding-bottom:10px;margin-bottom:18px} .gr .druk-nag .tyt{font-size:26px;font-weight:700;letter-spacing:-.01em} .gr table.druk-tab{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:18px} .gr table.druk-tab col.k-os{width:150px} .gr table.druk-tab col.k-sum{width:46px} .gr table.druk-tab th,.gr table.druk-tab td{border:1px solid #D9D3C9;height:34px;text-align:center;font-family:var(--mono);font-size:15px;font-weight:600;padding:0} .gr table.druk-tab th{border-bottom:2px solid var(--fg);height:44px;font-size:14px} .gr table.druk-tab th small{display:block;font-family:var(--font);font-size:10px;font-weight:500;color:var(--pl-szar)} .gr table.druk-tab th.sw{background:var(--fg);color:#fff} .gr table.druk-tab th.sw small{color:#fff} .gr table.druk-tab .os{text-align:left;font-family:var(--font);font-size:13px;padding-left:2px;border-left:none} .gr table.druk-tab .sum{font-size:12px;font-weight:500;text-align:right;padding-right:4px} .gr table.druk-tab .we{background:var(--line2)} .gr table.druk-tab .n{background:#D9D3C9} .gr table.druk-tab .r{font-size:10px;letter-spacing:-.04em} .gr table.druk-tab .d2{font-size:8.5px;line-height:9px;white-space:pre-line} .gr table.druk-tab .nt{font-family:var(--font);font-size:10px;font-weight:500;font-style:italic} .gr table.druk-tab tr.brak td{height:30px;font-size:10px} .gr table.druk-tab tr.brak td.x{color:var(--neg);font-weight:700;box-shadow:inset 0 0 0 2px var(--neg)} .gr .druk-legenda{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;border-top:1px solid #D9D3C9;padding-top:12px} /* ---------- okienko (B4) ---------- */ .gr .okno-tlo{position:fixed;inset:0;background:rgba(43,42,40,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:56px} .gr .okno{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(860px,94vw);max-height:88vh;overflow:auto;padding:24px 26px;box-shadow:0 24px 60px rgba(43,42,40,.3)} .gr .okno h3{font-size:17px;font-weight:600;margin:0} .gr .okno .akcje{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} .gr .opcja{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;flex:1;background:var(--panel);text-align:left} .gr .opcja input{margin-top:3px} .gr .opcja b{font-size:13.5px;display:block} .gr .opcja small{font-size:12px;color:var(--dim);line-height:1.45;display:block;margin-top:2px} .gr .opcja:has(input:checked){border-color:var(--akcent);box-shadow:0 0 0 3px rgba(47,94,153,.12)} /* ---------- lista obiektów (B1) ---------- */ .gr .obiekt-n{font-weight:600} .gr .obiekt-n small{display:block;font-weight:400;font-size:12px;color:var(--dim)} .gr .pas-mies{display:flex;width:120px;height:6px;border-radius:3px;overflow:hidden;background:var(--line2)} .gr .pas-mies i{flex:1} .gr .grupa-nag{display:flex;align-items:baseline;gap:15px;padding:0 0 10px;font-size:15px;font-weight:600} .gr .grupa-nag .kreska{flex:1;height:1px;background:var(--line2)} .gr .grupa-nag .dop{font-size:11.5px;font-weight:400;color:var(--dim)} .gr .szukaj{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 12px;height:38px;width:320px} .gr .szukaj input{border:none;background:transparent;outline:none;font-size:13px;flex:1} /* ---------- ściąga ---------- */ .gr .probki{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 14px} .gr .probki .pr{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12px;line-height:1.35} .gr .probki code{font-family:var(--mono);font-size:10px;color:var(--dim)} .gr .probki table.grafik{width:auto;min-width:0;table-layout:auto} .gr .probki table.grafik td.kr{width:42px;border:1px solid var(--line2)} /* ---------- telefon: grafik i tabele na wąskich ekranach ---------- */ @media(max-width:700px){ .gr .topbar{padding:10px 16px} .gr .strona{padding:14px 16px 40px} .gr .siatka-pol{grid-template-columns:1fr} .gr table.tab.karty-na-tel thead{display:none} .gr table.tab.karty-na-tel tr{display:block;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px} .gr table.tab.karty-na-tel td{display:flex;justify-content:space-between;gap:10px;border:none;padding:4px 0} .gr table.tab.karty-na-tel td::before{content:attr(data-et);font-size:11.5px;color:var(--dim)} } /* ---------- wydruk ---------- */ @media print{ .gr{background:#fff} .gr .topbar,.gr .pasek-sluzb,.gr .tel-stopka,.gr .nie-drukuj{display:none!important} .gr .karta{border:none;padding:0} } /* mini-legenda pod kalendarzem */ .gr .legenda-mini .doba{width:14px!important} /* ===================================================================== ROZSZERZENIA WDROŻENIOWE (nie było ich w makietach) — tylko istniejące tokeny ===================================================================== */ /* wybór posterunku przez osobę z obiektu (kilka obiektów / posterunków) */ .gr .wybor-post{display:flex;flex-direction:column;gap:8px;margin-top:4px} .gr .wybor-post a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 16px; border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);text-decoration:none;font-size:15px;font-weight:600} .gr .wybor-post a:hover{border-color:var(--akcent)} .gr .wybor-post a small{font-size:12px;font-weight:400;color:var(--dim)} /* ustawienia: wyszukiwarka ludzi (lista podpowiedzi) */ .gr .podpowiedzi{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:8px; box-shadow:0 10px 28px rgba(43,42,40,.14);max-height:280px;overflow:auto;z-index:30} .gr .podpowiedzi button{display:flex;justify-content:space-between;gap:10px;width:100%;border:none;background:none;text-align:left; padding:9px 12px;font-size:13px;cursor:pointer} .gr .podpowiedzi button:hover,.gr .podpowiedzi button.on{background:var(--pole)} .gr .podpowiedzi button small{color:var(--dim);font-family:var(--mono);font-size:11.5px} .gr tr.przeciagany td{opacity:.45} .gr .in.blad{border-color:var(--neg)} /* telefon: szerokie tabele ustawień przewijają się w swojej karcie, strona nie jeździ na boki */ @media(max-width:700px){ .gr .karta{min-width:0} .gr table.tab:not(.karty-na-tel){display:block;overflow-x:auto;white-space:nowrap} .gr table.tab:not(.karty-na-tel) .in{min-width:70px} .gr .topbar .dim{display:none} .gr .szukaj{width:100%} .gr h2.sekcja .dopisek{display:none} } /* makieta daje .dwie-rowne proporcje w style="" - na węższych ekranach i tak jedna kolumna */ @media(max-width:1100px){.gr .dwie-rowne{grid-template-columns:1fr!important}} /* doby poza okresem ochrony (przed startem obiektu / po końcu umowy) */ .gr .dz.poza .nr,.gr .dz.poza .dn{color:var(--faint)} .gr tr.obsada td.poza .doba{opacity:.35} .gr .kd.poza{opacity:.4} /* nazwisko w grafiku - klik otwiera poprawę telefonu */ .gr table.grafik .os .n.klik{cursor:pointer} .gr table.grafik .os .n.klik:hover{color:var(--akcent);text-decoration:underline} /* × przy nazwisku w grafiku (kierownik): usunięcie pustego wiersza z miesiąca */ .gr table.grafik .os .usun-wiersz{position:absolute;right:2px;top:50%;transform:translateY(-50%);opacity:0;padding:2px 5px} .gr table.grafik tr.osoba:hover .usun-wiersz,.gr table.grafik .usun-wiersz:focus{opacity:1}