/* ============================================================
CMMS - wygląd: układ Material 3, kolory i cienie ze Stitch (styl minimalistyczny)
============================================================ */
/* Czcionka Roboto wgrana do aplikacji (folder czcionki/) - działa bez internetu, jak ikony.
Jeden plik obejmuje wszystkie grubości; „latin-ext” ma polskie litery (ą, ę, ł...). Licencja OFL obok plików. */
@font-face {
font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("czcionki/roboto-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("czcionki/roboto-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Paleta ze Stitch (projekt „Apple Style Minimalist CMMS”, decyzja 2026-11-12):
jasnoszare tło, białe karty z bardzo delikatnym cieniem, niebieski akcent. */
--bg: #F9F9FB;
--surface: #FFFFFF;
--surface-2: #F3F3F5;
--surface-3: #EDEEF0;
--dialog-bg: #FFFFFF;
--text: #1A1C1D;
--muted: #414753;
--outline: #717785;
--outline-var: #C1C6D6;
--divider: #EDEEF0;
--primary: #0059B5;
--on-primary: #FFFFFF;
--primary-cont: #D7E2FF;
--on-primary-cont: #001B3F;
--secondary-cont: #D7E2FF;
--on-secondary-cont: #001B3F;
--error: #BA1A1A;
--error-cont: #FFDAD6;
--on-error-cont: #93000A;
--inverse-surface: #2F3132;
--inverse-on: #F0F0F2;
--inverse-primary: #ABC7FF;
--hover: rgba(26, 28, 29, .06);
--pressed: rgba(26, 28, 29, .12);
--scrim: rgba(26, 28, 29, .28);
/* Kolory statusów maszyn: tło etykiety / tekst i kropka */
--st-zielony-bg: #D1FAE5; --st-zielony-fg: #065F46;
--st-niebieski-bg: #D7E2FF; --st-niebieski-fg: #00458F;
--st-zolty-bg: #FEF3C7; --st-zolty-fg: #92400E;
--st-pomaranczowy-bg: #FFEDD5; --st-pomaranczowy-fg: #9A3412;
--st-czerwony-bg: #FFDAD6; --st-czerwony-fg: #93000A;
--st-fioletowy-bg: #EDE9FE; --st-fioletowy-fg: #5B21B6;
--st-szary-bg: #E8E8EA; --st-szary-fg: #414753;
/* Cienie miękkie, „unoszące” karty – bez ciemnej obwódki */
--shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
--shadow-2: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05); /* karty i kafelki */
--shadow-3: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
--grupa: #F3F3F5; /* tło grupy pól w szczegółach (szara „lista” w oknie) */
--karta: #FFFFFF; /* tło karty / kafelka (na białej treści wyróżnia ją cień) */
/* Tło pól formularzy (szare, bez ramki – styl Stitch) */
--pole-tlo: #EDEEF0;
--pole-tlo-hover: #E5E6E9;
--pole-tlo-fokus: #FFFFFF;
--segment-wybrany: #FFFFFF; /* wybrany segment przełącznika (płytka na szarej szynie) */
--font: "Roboto", "Segoe UI", system-ui, sans-serif;
/* Zaokrąglenia – w stylach używaj tych zmiennych, nie liczb */
--r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 28px; --r-pelny: 999px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111214;
--surface: #1C1D1F;
--surface-2: #242528;
--surface-3: #2E2F33;
--dialog-bg: #242528;
--text: #E3E2E6;
--muted: #C1C6D6;
--outline: #8B909F;
--outline-var: #414753;
--divider: #2E2F33;
--primary: #ABC7FF;
--on-primary: #002F66;
--primary-cont: #00458F;
--on-primary-cont: #D7E2FF;
--secondary-cont: #00458F;
--on-secondary-cont: #D7E2FF;
--error: #FFB4AB;
--error-cont: #93000A;
--on-error-cont: #FFDAD6;
--inverse-surface: #E3E2E6;
--inverse-on: #2F3132;
--inverse-primary: #0059B5;
--hover: rgba(227, 226, 230, .08);
--pressed: rgba(227, 226, 230, .14);
--scrim: rgba(0, 0, 0, .5);
--shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
--shadow-2: 0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
--shadow-3: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
--grupa: #2E2F33;
--karta: #26272A; /* w ciemnym cień słabo widać – karta jest jaśniejsza od tła treści */
--pole-tlo: #34353A;
--pole-tlo-hover: #3C3D42;
--pole-tlo-fokus: #242528;
--segment-wybrany: #4A4B50;
--st-zielony-bg: #064E3B; --st-zielony-fg: #D1FAE5;
--st-niebieski-bg: #00458F; --st-niebieski-fg: #D7E2FF;
--st-zolty-bg: #78350F; --st-zolty-fg: #FEF3C7;
--st-pomaranczowy-bg: #7C2D12; --st-pomaranczowy-fg: #FFEDD5;
--st-czerwony-bg: #93000A; --st-czerwony-fg: #FFDAD6;
--st-fioletowy-bg: #4C1D95; --st-fioletowy-fg: #EDE9FE;
--st-szary-bg: #414753; --st-szary-fg: #E3E2E6;
}
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* atrybut hidden zawsze ukrywa, nawet gdy klasa ustawia display */
html, body { margin: 0; }
body {
font: 14px/20px var(--font);
letter-spacing: .1px;
background: var(--bg);
color: var(--text);
}
button { font: inherit; color: inherit; }
.ik { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* ---------- Przyciski ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 24px; border-radius: var(--r-m); border: none;
font-weight: 500; font-size: 14px; letter-spacing: .1px; cursor: pointer;
background: none; position: relative; white-space: nowrap;
transition: box-shadow .15s, background-color .15s;
}
.btn .ik { width: 18px; height: 18px; margin-left: -8px; }
.btn.filled { background: var(--primary); color: var(--on-primary); }
.btn.filled:hover { box-shadow: var(--shadow-1); background: color-mix(in srgb, var(--primary) 92%, var(--on-primary)); }
.btn.tonal { background: var(--secondary-cont); color: var(--on-secondary-cont); }
.btn.tonal:hover { box-shadow: var(--shadow-1); }
.btn.text { color: var(--primary); padding: 0 12px; }
.btn.text:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.btn.text.niebezpieczny { color: var(--error); }
.btn.text.niebezpieczny:hover { background: color-mix(in srgb, var(--error) 8%, transparent); }
.btn:disabled { opacity: .38; cursor: default; box-shadow: none !important; }
.btn.male { height: 32px; padding: 0 16px; border-radius: var(--r-s); }
.btn.male .ik { margin-left: -6px; }
.ikbtn {
width: 40px; height: 40px; border-radius: 50%; border: none; background: none;
display: inline-grid; place-items: center; cursor: pointer; color: var(--muted);
}
.ikbtn:hover { background: var(--hover); }
.ikbtn .ik { width: 20px; height: 20px; }
.ikbtn.male { width: 32px; height: 32px; }
.ikbtn.niebezpieczny:hover { color: var(--error); }
/* ---------- Górny pasek ---------- */
.appbar {
height: 64px; display: flex; align-items: center; gap: 16px;
padding: 8px 16px;
}
.marka { display: flex; align-items: center; gap: 12px; width: 240px; flex-shrink: 0; padding-left: 8px; text-decoration: none; color: inherit; }
.marka:hover .logo { box-shadow: var(--shadow-1); }
.marka:focus-visible { outline-offset: 4px; border-radius: var(--r-m); }
.logo {
width: 40px; height: 40px; border-radius: var(--r-m); display: grid; place-items: center;
background: var(--primary); color: var(--on-primary);
}
.logo .ik { width: 22px; height: 22px; }
.nazwa-app { font-size: 22px; line-height: 28px; color: var(--text); font-weight: 600; letter-spacing: -.02em; }
.wyszukiwarka {
min-width: 0; /* może się zwężać, gdy w pasku jest więcej elementów */
flex: 1; max-width: 720px; height: 48px; border-radius: var(--r-pelny);
background: var(--surface-3); display: flex; align-items: center; gap: 12px; padding: 0 20px;
color: var(--muted); cursor: text; transition: background-color .15s, box-shadow .15s;
}
.wyszukiwarka:focus-within { background: var(--surface); box-shadow: var(--shadow-1); }
.wyszukiwarka input {
flex: 1; border: none; background: none; outline: none; font: 16px var(--font); color: var(--text); min-width: 0;
}
.wyszukiwarka input::placeholder { color: var(--muted); }
/* ---------- Szkielet: nawigacja + treść ---------- */
.szkielet { display: grid; grid-template-columns: 88px 1fr; }
.rail { display: flex; flex-direction: column; align-items: center; padding-top: 4px; gap: 12px; }
.rail-poz {
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 500;
}
.rail-ikona { width: 56px; height: 32px; border-radius: var(--r-l); display: grid; place-items: center; }
.rail-poz:hover .rail-ikona { background: var(--hover); }
.rail-poz[aria-current="page"] { color: var(--text); }
.rail-poz[aria-current="page"] .rail-ikona { background: var(--secondary-cont); color: var(--on-secondary-cont); }
.rail-ikona .ik { width: 22px; height: 22px; }
.tresc {
background: var(--surface); border-radius: var(--r-l); margin: 0 16px 16px 0; box-shadow: var(--shadow-1);
height: calc(100vh - 80px); display: grid; grid-template-columns: minmax(280px, 360px) 1fr;
overflow: hidden;
}
.panel { min-width: 0; overflow-y: auto; }
.panel-hierarchia { border-right: 1px solid var(--divider); padding: 8px 8px 16px; }
.panel-lista { padding: 8px 0 16px; display: flex; flex-direction: column; }
/* Dzieci panelu nie mogą się ściskać – przy długiej liście przewija się cały panel */
.panel-lista > * { flex-shrink: 0; }
.panel-naglowek {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 56px; padding: 4px 8px 4px 16px; flex-wrap: wrap;
}
.panel-lista .panel-naglowek { padding: 8px 24px; min-height: 64px; }
.panel-naglowek h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.panel-przyciski { display: flex; align-items: center; gap: 2px; }
.panel-przyciski .btn { margin-left: 6px; }
.panel-lista .panel-przyciski { gap: 6px; }
.panel-lista .panel-przyciski .btn { margin-left: 0; }
/* ---------- Ścieżka nad listą (jak foldery na Dysku) ---------- */
.okruszki.okruszki {
display: flex; align-items: center; flex-wrap: wrap; gap: 0; flex: 1 1 auto;
font-size: 18px; line-height: 24px; font-weight: 400; min-width: 0; margin-left: -10px;
}
.okruszek {
border: none; background: none; cursor: pointer; padding: 6px 10px;
border-radius: var(--r-pelny); font-size: 18px; line-height: 24px; color: var(--muted);
}
.okruszek:hover { background: var(--hover); color: var(--text); }
.okruszek.biezacy { cursor: default; color: var(--text); font-weight: 600; letter-spacing: -.015em; }
.okruszek.biezacy:hover { background: none; }
.okruszki .separator { width: 20px; height: 20px; color: var(--muted); }
/* ---------- Hierarchia ---------- */
.drzewo, .drzewo ul { list-style: none; margin: 0; padding: 0; }
.drzewo ul { padding-left: 16px; }
.wezel {
position: relative; display: flex; align-items: center; gap: 6px;
height: 36px; padding: 0 12px 0 4px; border-radius: var(--r-s); color: var(--text);
}
.wezel:hover { background: var(--surface-3); }
.wezel .przelacznik {
width: 24px; height: 24px; border: none; background: none; padding: 0; flex-shrink: 0;
border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted);
}
.wezel .przelacznik:hover { background: var(--hover); }
.wezel .przelacznik .ik { width: 20px; height: 20px; transition: transform .15s ease; }
.wezel .przelacznik.otwarty .ik { transform: rotate(90deg); }
.wezel .przelacznik.pusty { visibility: hidden; }
.wezel .ikona { width: 20px; height: 20px; color: var(--muted); }
.wezel .nazwa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.licznik-maszyn { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.licznik-maszyn:empty { display: none; }
.wezel.lok, .wezel.wszystkie, .wezel.naglowek { cursor: pointer; }
.wezel.wszystkie { margin-bottom: 4px; }
.wezel.wybrany, .wezel.wybrany:hover { background: var(--secondary-cont); color: var(--on-secondary-cont); font-weight: 500; }
.wezel.wybrany .ikona, .wezel.wybrany .licznik-maszyn { color: var(--on-secondary-cont); }
.wezel:focus-visible { outline-offset: -2px; }
/* Przyciski w wierszu: pojawiają się po najechaniu, na miejscu licznika */
.wezel .akcje {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
display: flex; padding-left: 16px; border-radius: 0 var(--r-pelny) var(--r-pelny) 0;
background: linear-gradient(to right, transparent, var(--surface-3) 16px);
opacity: 0; pointer-events: none;
}
.wezel.wybrany .akcje { background: linear-gradient(to right, transparent, var(--secondary-cont) 16px); }
.wezel:hover .akcje, .wezel:focus-within .akcje { opacity: 1; pointer-events: auto; }
.wezel .akcje .ikbtn { width: 32px; height: 32px; color: inherit; }
.wezel .akcje .ikbtn .ik { width: 18px; height: 18px; }
.bez-lokalizacji { margin-top: 8px; border-top: 1px solid var(--divider); padding-top: 8px; }
.bez-lokalizacji > ul { padding-left: 0; }
.wezel.naglowek .nazwa { color: var(--muted); font-weight: 500; padding-left: 12px; }
.wezel.naglowek.wybrany .nazwa { color: var(--on-secondary-cont); }
.wskazowka { color: var(--muted); font-size: 12px; line-height: 16px; padding: 12px 16px 0; margin: 0; }
.pusto { text-align: center; color: var(--muted); padding: 40px 24px; margin: 0; }
/* ---------- Tabela maszyn ---------- */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0 16px; height: 52px; border-bottom: 1px solid var(--divider); }
th:first-child, td:first-child { padding-left: 24px; }
th:last-child, td:last-child { padding-right: 16px; }
th { color: var(--muted); font-size: 12px; font-weight: 600; height: 40px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; } /* ostatni wiersz bez kreski – kartę zamyka zaokrąglenie */
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: var(--surface-2); }
td.liczbowa { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.brak { color: var(--outline); }
td.sciezka { color: var(--muted); font-size: 13px; }
/* Nazwa maszyny jako link otwierający szczegóły */
.link-nazwa {
border: none; background: none; padding: 4px 0; margin: 0; cursor: pointer; text-align: left;
font: inherit; font-weight: 500; color: var(--text);
}
.link-nazwa:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
/* Zgłoszenie otwiera klik w cały wiersz - tytuł nie udaje linku */
.link-nazwa.nazwa-zgloszenia:hover { color: inherit; text-decoration: none; }
.link-nazwa.sciezka { font-weight: 400; color: var(--text); }
.wezel.masz.klikalny { cursor: pointer; }
/* Okno szczegółów maszyny */
.szczegoly { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.sz-naglowek { display: flex; align-items: center; gap: 16px; margin-right: -8px; }
.sz-naglowek h2 { flex: 1; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sz-ikona {
width: 48px; height: 48px; border-radius: var(--r-l); flex-shrink: 0; display: grid; place-items: center;
background: var(--primary-cont); color: var(--on-primary-cont);
}
/* Pola szczegółów jako „grupa” w stylu iPhone/Stitch: szare pole z zaokrągleniem, wiersze oddzielone cienką kreską */
.sz-pola {
display: grid; grid-template-columns: max-content 1fr; gap: 0 24px; margin: 0; align-items: center;
background: var(--grupa); border-radius: var(--r-m); padding: 2px 16px;
}
.sz-pola dt, .sz-pola dd { padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--outline-var) 55%, transparent); }
.sz-pola dt:last-of-type, .sz-pola dd:last-of-type { border-bottom: none; }
.sz-pola dt { color: var(--muted); font-size: 13px; align-self: stretch; display: flex; align-items: center; }
.sz-pola dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sz-pola dd.liczbowa { font-variant-numeric: tabular-nums; }
.sz-pola .brak { color: var(--outline); }
.sz-pola:empty { display: none; }
@media (max-width: 480px) {
.sz-pola { grid-template-columns: 1fr; }
.sz-pola dt { border-bottom: none; padding: 10px 0 0; }
.sz-pola dd { padding: 2px 0 10px; }
}
.licznik { color: var(--muted); font-size: 12px; padding: 12px 24px 0; margin: 0; }
/* ---------- Statusy maszyn ---------- */
[data-kolor="zielony"] { --st-bg: var(--st-zielony-bg); --st-fg: var(--st-zielony-fg); }
[data-kolor="niebieski"] { --st-bg: var(--st-niebieski-bg); --st-fg: var(--st-niebieski-fg); }
[data-kolor="zolty"] { --st-bg: var(--st-zolty-bg); --st-fg: var(--st-zolty-fg); }
[data-kolor="pomaranczowy"] { --st-bg: var(--st-pomaranczowy-bg); --st-fg: var(--st-pomaranczowy-fg); }
[data-kolor="czerwony"] { --st-bg: var(--st-czerwony-bg); --st-fg: var(--st-czerwony-fg); }
[data-kolor="fioletowy"] { --st-bg: var(--st-fioletowy-bg); --st-fg: var(--st-fioletowy-fg); }
[data-kolor="szary"] { --st-bg: var(--st-szary-bg); --st-fg: var(--st-szary-fg); }
/* Etykieta statusu, np. [● Eksploatacja] */
.chip {
display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px;
border-radius: var(--r-m); font-size: 12px; font-weight: 500; white-space: nowrap;
background: var(--st-bg); color: var(--st-fg);
}
.kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--st-fg); flex-shrink: 0; }
/* Sama kropka bez etykiety: kolor tekstu etykiety jest prawie czarny (jasny motyw) albo blady (ciemny) -
kropka bierze środek między tłem a tekstem, czyli wyraźny odcień koloru w obu motywach */
.kropka.kropka-statusu { display: inline-block; width: 12px; height: 12px; vertical-align: middle;
background: color-mix(in srgb, var(--st-bg) 45%, var(--st-fg)); }
/* Pozycja słownika bez koloru (MPK): numer wyróżniony, potem nazwa */
.pozycja-tekst .kod { font-weight: 500; font-variant-numeric: tabular-nums; }
/* Wskaźnik słupków (krytyczność) - jak zasięg w telefonie; kolor z pozycji słownika */
.kryt { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--st-fg); font-weight: 500; }
.slupki { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.slupki span { width: 4px; border-radius: 1px; background: var(--outline-var); }
.slupki span.pelny { background: var(--st-fg); }
/* Wybór liczby słupków w oknie edycji krytyczności */
.wybor-slupkow { gap: 8px; }
.opcja-slupki {
position: relative; width: 52px; height: 40px; border-radius: var(--r-m); cursor: pointer;
display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--outline-var);
}
.opcja-slupki:hover { background: var(--hover); }
.opcja-slupki input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcja-slupki:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primary); background: var(--st-bg); }
.opcja-slupki:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Okno z listą statusów */
.statusy-lista { list-style: none; margin: 0 -8px; padding: 0; }
/* ---------- Moduł Konfiguracja ---------- */
.panel-slowniki { border-right: 1px solid var(--divider); padding: 8px 8px 16px; }
.panel-slownik { padding: 8px 0 16px; }
.panel-slownik .panel-naglowek { padding: 8px 24px; min-height: 64px; }
.wskazowka.gora { padding: 0 16px 12px; }
.lista-slownikow { list-style: none; margin: 0; padding: 0; }
.wezel.slownik-poz {
width: 100%; border: none; background: none; font: inherit; color: inherit;
text-align: left; cursor: pointer; padding-left: 12px; gap: 12px;
}
.wezel.slownik-poz:hover { background: var(--surface-3); }
.wezel.slownik-poz.wybrany { background: var(--secondary-cont); }
.tytul-duzy.tytul-duzy { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.017em; }
.opis-slownika { color: var(--muted); margin: 0; padding: 0 24px 16px; max-width: 72ch; }
.pozycje-slownika { margin: 0 16px; }
.pozycje-slownika li { min-height: 56px; padding-left: 16px; border-bottom: 1px solid var(--divider); border-radius: 0; }
.pozycje-slownika li:last-child { border-bottom: none; }
/* ---------- Moduł Ludzie ---------- */
.tresc.jeden-panel { grid-template-columns: 1fr; }
.link-nazwa.osoba { display: inline-flex; align-items: center; gap: 12px; }
.awatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center;
background: var(--st-bg); color: var(--st-fg); font-size: 13px; font-weight: 500; text-decoration: none;
}
.awatar.duzy { width: 48px; height: 48px; font-size: 18px; }
td.email { color: var(--muted); }
.link-email { color: var(--primary); text-decoration: none; }
.link-email:hover { text-decoration: underline; }
/* Podzakładki (np. Pracownicy | Firmy zewnętrzne) - zakładki Material z podkreśleniem */
.podzakladki { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--divider); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.podzakladka {
display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px;
color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap;
border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: var(--r-xs) var(--r-xs) 0 0;
}
.podzakladka .ik { width: 20px; height: 20px; }
.podzakladka:hover { background: var(--hover); color: var(--text); }
.podzakladka[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.ile-pod { font-size: 12px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.ile-pod:empty { display: none; }
/* Filtry-pigułki nad listą firm i wybór rodzajów w formularzu */
.filtry { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px; }
.wybor-rodzajow .filtry { padding: 0; }
.filtr-chip {
display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-pelny);
border: 1px solid transparent; background: var(--surface-3); color: var(--muted);
font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.filtr-chip:hover { background: color-mix(in srgb, var(--surface-3) 80%, var(--text)); color: var(--text); }
/* Wybrana pigułka (bez koloru słownika) – wypełniona akcentem, jak w Stitch */
.filtr-chip.wybrany { background: var(--primary); color: var(--on-primary); font-weight: 600; box-shadow: var(--shadow-1); }
.filtr-chip[data-kolor].wybrany { background: var(--st-bg); color: var(--st-fg); }
/* „Zmień status”: pigułki zawsze w kolorze statusu, wybrana - z ptaszkiem i obwódką */
#zs-statusy .filtr-chip[data-kolor] { background: var(--st-bg); color: var(--st-fg); }
#zs-statusy .filtr-chip[data-kolor]:hover { background: color-mix(in srgb, var(--st-bg) 86%, var(--st-fg)); }
#zs-statusy .filtr-chip.wybrany { box-shadow: 0 0 0 2px var(--st-fg, var(--primary)); }
.filtr-chip .ik { width: 18px; height: 18px; margin-left: -4px; }
.ile-chip { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
td.chipy .chip + .chip { margin-left: 6px; }
.awatar.firma { background: var(--surface-3); color: var(--muted); }
.awatar.firma .ik { width: 18px; height: 18px; }
/* Szczegóły i formularz firmy */
.rodzaje-chipy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
.kontakt-blok h3 { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.kontakt-blok { border-top: 1px solid var(--divider); padding-top: 16px; }
.uwagi-tekst, .wiele-linii { white-space: pre-line; color: var(--text) !important; margin: 0; }
/* ---- Dokumentacja maszyny (szczegóły maszyny): wyróżniona strategia UR + lista plików ---- */
.dokumentacja { border-top: 1px solid var(--divider); padding-top: 12px; }
.dok-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dok-naglowek h3 { margin: 0; font-size: 14px; font-weight: 500; color: var(--muted); }
.dok-strategia { background: var(--primary-cont); color: var(--on-primary-cont); border-radius: var(--r-m); padding: 10px 12px 6px; margin-bottom: 8px; }
.dok-strategia h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.dok-strategia .dok-opis, .dok-strategia .dok-pusto { color: inherit; opacity: .8; }
.dok-lista { list-style: none; margin: 0; padding: 0; }
.dokument { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.dokument:last-child { border-bottom: none; }
.dok-strategia .dokument { border-bottom-color: color-mix(in srgb, var(--on-primary-cont) 12%, transparent); }
.dok-ikona { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--muted); }
.dok-strategia .dok-ikona { color: var(--primary); }
.dok-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dok-nazwa { color: var(--primary); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.dok-nazwa:hover { text-decoration: underline; }
.dok-opis { font-size: 12px; color: var(--muted); }
.dok-znaczniki { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.dok-ostrzezenie { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; padding: 6px 8px; border-radius: var(--r-s);
background: var(--st-zolty-bg); color: var(--st-zolty-fg); font-size: 12px; line-height: 16px; }
.dok-ostrzezenie .ik { width: 16px; height: 16px; flex: none; }
.dokument.ukryty .dok-tresc { opacity: .55; }
.dokument.ukryty .dok-nazwa { text-decoration: line-through; }
.dok-pusto { margin: 4px 0 8px; font-size: 13px; color: var(--muted); }
.dokument .ikbtn { flex: none; }
/* Okno „Dodaj dokument”: wybór pliku */
.wybor-pliku { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.wybor-pliku span { overflow-wrap: anywhere; }
.wybor-pliku .brak { color: var(--outline); }
#widok-dokumenty { margin-top: 24px; }
#widok-dokumenty h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.tel-producenta { margin-left: 12px; font-size: 13px; }
.pola-obok { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .pola-obok { grid-template-columns: 1fr; gap: 20px; } }
.sekcja-formularza { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sekcja-formularza legend, .wybor-rodzajow legend { font-size: 12px; color: var(--muted); padding: 0 0 8px; font-weight: 500; }
.wybor-rodzajow { border: none; margin: 0; padding: 0; }
.pole textarea {
width: 100%; padding: 26px 16px 10px; font: 16px var(--font); color: var(--text); resize: vertical;
background: var(--pole-tlo); border: none; border-radius: var(--r-m);
transition: background-color .15s, box-shadow .15s;
}
.pole textarea:hover { background: var(--pole-tlo-hover); }
.pole textarea:focus { outline: none; background: var(--pole-tlo-fokus); box-shadow: inset 0 0 0 2px var(--primary); }
.pole textarea:focus + label, .pole textarea:not(:placeholder-shown) + label { top: 14px; font-size: 12px; line-height: 16px; }
.pole textarea:focus + label { color: var(--primary); }
dialog.przewijane { max-height: calc(100vh - 48px); }
dialog.przewijane form { max-height: calc(100vh - 48px); overflow-y: auto; }
/* Przełącznik tak/nie w oknie pozycji słownika + znacznik na liście */
.przelacznik-flaga { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; cursor: pointer; line-height: 20px; }
/* Wygląd: suwak Material (tor 52×32, gałka rośnie i przesuwa się po włączeniu) - w HTML to nadal zwykłe pole wyboru */
.przelacznik-flaga { align-items: center; min-height: 48px; }
.przelacznik-flaga input {
appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; cursor: pointer; margin: 0;
width: 52px; height: 32px; border-radius: var(--r-pelny); border: 2px solid var(--outline); background: var(--surface-3);
transition: background-color .2s, border-color .2s;
}
.przelacznik-flaga input::before {
content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%;
background: var(--outline); transform: translateY(-50%);
transition: left .2s cubic-bezier(.2, 0, 0, 1), width .2s, height .2s, background-color .2s;
}
.przelacznik-flaga input:checked { background: var(--primary); border-color: var(--primary); }
.przelacznik-flaga input:checked::before { left: 22px; width: 24px; height: 24px; background: var(--on-primary); }
.przelacznik-flaga input:disabled { opacity: .38; cursor: default; }
.znacznik {
font-size: 12px; color: var(--on-secondary-cont); background: var(--secondary-cont);
padding: 2px 8px; border-radius: var(--r-s); white-space: nowrap;
}
/* ---------- Moduł Niezawodność (RCM2, niezawodnosc.js) ---------- */
.rcm-widok { padding: 16px 24px 8px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.rcm-wstep { margin: 0; color: var(--muted); max-width: 900px; }
.rcm-pasek { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rcm-pasek .podpowiedz { margin: 0; flex: 1 1 360px; }
.rcm-pasek .przyciski { margin: 0; }
.rcm-karty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.rcm-karta { background: var(--karta); box-shadow: var(--shadow-2); border-radius: var(--r-l); padding: 14px 16px 8px;
display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rcm-karta.wylaczony { opacity: .6; }
.rcm-karta .przyciski { margin-top: auto; padding-top: 4px; gap: 4px; }
.rcm-karta-glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rcm-karta-tytul { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rcm-alias { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; font-weight: 600; color: var(--primary); }
.rcm-tytul { font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.rcm-stan { flex: none; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: var(--r-pelny); }
.rcm-stan.pelny { background: var(--st-zielony-bg); color: var(--st-zielony-fg); }
.rcm-stan.pusty { background: var(--st-szary-bg); color: var(--st-szary-fg); }
.rcm-rola { margin: 0; font-size: 13px; color: var(--muted); }
.rcm-plik { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rcm-brak { font-size: 13px; color: var(--muted); }
.rcm-brak.wazny { color: var(--error); }
.znacznik.wazny { background: var(--primary); color: var(--on-primary); }
.rcm-wersje { list-style: none; margin: 0; padding: 0; }
.rcm-wersja { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--divider); }
.rcm-wersja:last-child { border-bottom: none; }
.rcm-wersja.wybrana { background: var(--surface-2); border-radius: var(--r-s); }
.rcm-wersja-przycisk { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
background: none; border: none; padding: 4px 8px; border-radius: var(--r-s); cursor: pointer; color: inherit; font: inherit; }
.rcm-wersja-przycisk:hover { background: var(--hover); }
.rcm-instrukcja-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.rcm-historia h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.pole textarea.rcm-tekst { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; line-height: 1.5; }
.zgoda { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; font-size: 14px; cursor: pointer; }
.zgoda input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
/* Etap 3: progi gotowości + lista maszyn RCM2 */
.segmenty.rcm-zakladki { grid-template-columns: repeat(4, 1fr); max-width: 720px; }
.rcm-progi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; max-width: 520px; }
#rcm-gotowosc { display: flex; flex-direction: column; gap: 12px; }
#rcm-gotowosc[hidden] { display: none; }
#rcm-gotowosc .podpowiedz { margin: 0; max-width: 900px; }
.tabela-rcm td.rcm-maszyna { white-space: normal; min-width: 160px; }
.tabela-rcm th { white-space: normal; }
.tabela-rcm td.rcm-maszyna .link-nazwa { display: block; text-align: left; }
.tabela-rcm td.rcm-maszyna .dok-opis { display: block; }
.tabela-rcm td.rcm-status { white-space: nowrap; }
.tabela-rcm td.rcm-braki { white-space: normal; min-width: 200px; }
.tabela-rcm td.rcm-braki ul { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.rcm-brak-link { background: none; border: none; padding: 2px 6px; margin: 0 -6px; border-radius: var(--r-xs); font: inherit; font-size: 13px;
text-align: left; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--outline); text-underline-offset: 3px; }
.rcm-brak-link.wazny { color: var(--error); text-decoration-color: currentColor; }
.rcm-brak-link:hover { background: var(--hover); }
.tabela-rcm td.data { white-space: nowrap; color: var(--muted); }
.tabela-rcm td.brak { color: var(--outline); }
/* Etap 4: paczka */
.tabela-rcm td.rcm-status .rcm-utworz { display: flex; margin-top: 6px; }
.rcm-podtytul { margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
.rcm-ostrzezenie { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-s); background: var(--st-zolty-bg); color: var(--st-zolty-fg); font-size: 13px; }
.rcm-blad-paczki { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-m); background: var(--st-czerwony-bg); color: var(--st-czerwony-fg); font-size: 14px; }
.rcm-blad-paczki p { margin: 0; font-weight: 600; }
.rcm-blad-paczki ul { margin: 6px 0 0; padding-left: 20px; }
.rcm-akcje-paczki { margin: 16px 0 8px; flex-wrap: wrap; }
#rpk-strategia { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; text-align: left; }
.rcm-kroki { margin: 8px 0; padding: 12px 16px 12px 36px; background: var(--grupa); border-radius: var(--r-m); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.rcm-pliki-paczki { list-style: none; margin: 0; padding: 0; }
.rcm-pliki-paczki li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--divider); }
.rcm-pliki-paczki li:last-child { border-bottom: none; }
.rcm-pliki-paczki .dok-nazwa { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.rcm-pliki-paczki li.pominiety .dok-ikona { color: var(--st-zolty-fg); }
@media (max-width: 900px) { .rcm-instrukcja-uklad { grid-template-columns: 1fr; } }
/* Węższy ekran: daty paczki i strategii schowane w tabeli (na telefonie wracają w karcie, z podpisem) */
@media (max-width: 900px) { .tabela-rcm :is(th, td):is(:nth-child(5), :nth-child(6)) { display: none; } }
@media (max-width: 600px) {
.rcm-widok { padding: 12px 16px 8px; }
.segmenty.rcm-zakladki { grid-template-columns: repeat(2, 1fr); }
/* Telefon: każda maszyna = karta (jak lista zgłoszeń): nazwa, pod nią gotowość i liczba zgłoszeń, potem braki */
.tabela-rcm, .tabela-rcm tbody { display: block; }
.tabela-rcm thead { display: none; }
.tabela-rcm tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
padding: 12px 16px; margin-bottom: 10px; border-radius: var(--r-l); background: var(--karta); box-shadow: var(--shadow-2); }
.tabela-rcm td, .tabela-rcm td:first-child, .tabela-rcm td:last-child { height: auto; padding: 0; border: none; }
.tabela-rcm td.rcm-maszyna, .tabela-rcm td.rcm-braki { grid-column: 1 / -1; min-width: 0; }
.tabela-rcm td.rcm-status { grid-row: 2; }
.tabela-rcm td.rcm-zgl { grid-row: 2; grid-column: 2; justify-self: end; }
.tabela-rcm td:is(:nth-child(5), :nth-child(6)) { display: block; grid-column: 1 / -1; font-size: 12px; }
.tabela-rcm td:is(:nth-child(5), :nth-child(6))::before { content: attr(data-etykieta) ": "; }
}
/* ---------- Moduł Prewencja (prewencja.js) ---------- */
.prew-widok { padding: 16px 24px 8px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.prew-widok[hidden] { display: none; }
.prew-wstep { margin: 0; color: var(--muted); max-width: 900px; }
.prew-widok .tabela-wrap { padding: 0; }
.prew-widok .licznik, .prew-widok .filtry { padding: 0; }
.tabela-prew tbody tr.wiersz-klikalny { cursor: pointer; }
.tabela-prew td.prew-nazwa { white-space: normal; min-width: 200px; }
.tabela-prew td.prew-nazwa .link-nazwa { display: block; text-align: left; }
.tabela-prew td.prew-nazwa .dok-opis, .tabela-prew td.prew-czest .dok-opis { display: block; }
.tabela-prew td.prew-stan { white-space: normal; min-width: 150px; }
.tabela-prew td.data { white-space: nowrap; }
.tabela-prew td.brak { color: var(--outline); }
.prew-ostrzezenie { display: block; margin-top: 4px; font-size: 12px; color: var(--st-pomaranczowy-fg); max-width: 240px; }
.segmenty.prew-tryb { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
/* Okno listy zadań: wiersz = uchwyt, numer, treść + uwagi, strzałki i usuń */
.prew-zadania { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prew-zadanie { display: flex; align-items: flex-start; gap: 6px; padding: 6px 4px 6px 0; border-radius: var(--r-m); background: var(--grupa); }
.prew-zadanie.przeciagany { opacity: .5; }
.prew-zadanie.cel { box-shadow: inset 0 2px 0 var(--primary); }
.prew-uchwyt { display: flex; align-items: center; height: 40px; padding-left: 4px; color: var(--muted); cursor: grab; touch-action: none; }
.prew-uchwyt .ik { width: 20px; height: 20px; }
.prew-nr { min-width: 24px; height: 40px; display: flex; align-items: center; justify-content: flex-end; color: var(--muted);
font-size: 13px; font-variant-numeric: tabular-nums; padding-left: 8px; }
.prew-zadanie-pola { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.prew-zadanie-pola input { width: 100%; box-sizing: border-box; border: none; border-radius: var(--r-s); background: var(--pole-tlo);
color: var(--text); font: inherit; padding: 9px 12px; }
.prew-zadanie-pola input.prew-uwagi { font-size: 13px; padding: 6px 12px; }
.prew-zadanie-pola input:hover { background: var(--pole-tlo-hover); }
.prew-zadanie-pola input:focus { outline: none; background: var(--pole-tlo-fokus); box-shadow: inset 0 0 0 2px var(--primary); }
.prew-zadanie-pola input:disabled { background: transparent; padding-left: 4px; }
.prew-zadanie-akcje { display: flex; align-items: center; height: 40px; }
.prew-zadanie-akcje .ikbtn { width: 32px; height: 32px; }
.prew-zadanie-akcje .ikbtn .ik { width: 18px; height: 18px; }
.prew-zadanie-akcje .ikbtn:disabled { opacity: .35; cursor: default; }
.prew-zadanie-akcje .w-dol .ik { transform: rotate(180deg); }
.prew-dodaj-zadanie { align-self: flex-start; margin-top: 8px; }
.prew-brak-statusu { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: var(--r-m);
background: var(--st-zolty-bg); color: var(--st-zolty-fg); font-size: 14px; max-width: 900px; }
.prew-brak-statusu[hidden] { display: none; }
.prew-brak-statusu .ik { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.prew-brak-statusu a { color: inherit; font-weight: 600; }
/* Etap 4: okno „Według strategii” */
#okno-prew-strategia .szczegoly { display: flex; flex-direction: column; gap: 12px; }
#okno-prew-strategia .sz-naglowek h2 { flex: 1; min-width: 0; }
#ps-opis { margin: 0; }
.ps-maszyny { list-style: none; margin: 0; padding: 0; border-radius: var(--r-m); background: var(--grupa); }
.ps-maszyny li { border-bottom: 1px solid var(--divider); }
.ps-maszyny li:last-child { border-bottom: none; }
.ps-maszyna { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; background: none; border: none;
color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-m); }
.ps-maszyna:hover { background: var(--hover); }
.ps-maszyna-opis { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-maszyna-nazwa { font-weight: 600; }
.ps-maszyna .dok-opis { overflow-wrap: anywhere; }
.ps-strzalka { width: 20px; height: 20px; color: var(--muted); flex: none; }
.ps-grupa { border-radius: var(--r-l); background: var(--karta); box-shadow: var(--shadow-2); padding: 4px 12px 12px; }
.ps-grupa-glowa { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 4px; background: none; border: none;
color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-s); }
.ps-grupa-glowa:hover { background: var(--hover); }
.ps-grupa-tytul { font-weight: 600; letter-spacing: -.01em; flex: 1; }
.ps-rozwin { width: 20px; height: 20px; transition: transform .15s ease; }
.ps-rozwin.otwarty { transform: rotate(90deg); }
.ps-pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.ps-pola .pole, .ps-odstep .pole { margin-bottom: 4px; }
.ps-zadania { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-zadanie { display: flex; align-items: flex-start; gap: 10px; }
.ps-zadanie input[type=checkbox] { width: 18px; height: 18px; margin: 11px 0 0; flex: none; accent-color: var(--primary); cursor: pointer; }
.ps-zadanie.wylaczone .prew-zadanie-pola { opacity: .5; }
.ps-nieodczytane h3 { margin: 4px 0 2px; font-size: 15px; }
.ps-nieodczytane > .podpowiedz { margin: 0 0 8px; }
.ps-odstep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-odstep .pole { width: 130px; }
.ps-nieodczytany.pominiete .prew-odpowiedz-tresc { opacity: .5; text-decoration: line-through; }
@media (max-width: 600px) { .ps-pola { grid-template-columns: 1fr; } .ps-odstep .pole { width: 110px; } }
/* Przełączniki pakietów w oknie pozycji słownika - jak zwykłe pola formularza (każdy w osobnym wierszu) */
.pola-flag-pakietu { display: contents; }
/* Etap 2: znaczek „2/4” przeglądu na liście zgłoszeń */
.prew-znaczek { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 8px 1px 6px; border-radius: var(--r-pelny);
background: var(--st-szary-bg); color: var(--st-szary-fg); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }
.prew-znaczek .ik { width: 14px; height: 14px; }
.prew-znaczek.gotowe { background: var(--st-zielony-bg); color: var(--st-zielony-fg); }
.prew-znaczek.przeterminowany { background: var(--st-czerwony-bg); color: var(--st-czerwony-fg); }
/* Etap 3: przegląd przeterminowany - informacja w bloku „Lista zadań” */
.prew-przeterminowany { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-m);
background: var(--st-czerwony-bg); color: var(--st-czerwony-fg); font-size: 14px; }
.prew-przeterminowany .ik { width: 20px; height: 20px; flex: none; }
/* Etap 3: Najbliższe przeglądy - zakres + eksport nad tabelą */
.prew-pasek { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.segmenty.prew-zakres { grid-template-columns: repeat(3, 1fr); width: 300px; max-width: 100%; }
.tabela-najblizsze td.prew-termin { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.tabela-najblizsze td.prew-termin.zalegly { color: var(--error); }
.tabela-najblizsze td.prew-harm, .tabela-najblizsze td.prew-lista { white-space: normal; }
.link-nazwa + .prew-znaczek { margin-left: 0; margin-top: 2px; }
/* Blok „Lista zadań” w szczegółach zgłoszenia przeglądu */
.prew-blok h3 { margin: 0 0 2px; }
.prew-blok > .podpowiedz { margin: 0 0 8px; }
.prew-odpowiedzi { list-style: none; margin: 0; padding: 0; border-radius: var(--r-m); background: var(--grupa); }
.prew-odpowiedz { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--divider); }
.prew-odpowiedz:last-child { border-bottom: none; }
.prew-wynik { flex: none; width: 24px; height: 24px; border-radius: var(--r-pelny); display: flex; align-items: center; justify-content: center;
background: var(--st-szary-bg); color: var(--st-szary-fg); }
.prew-wynik .ik { width: 16px; height: 16px; }
.prew-odpowiedz.wykonane .prew-wynik { background: var(--st-zielony-bg); color: var(--st-zielony-fg); }
.prew-odpowiedz.niewykonane .prew-wynik { background: var(--st-czerwony-bg); color: var(--st-czerwony-fg); }
.prew-odpowiedz-tresc { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prew-zadanie-nazwa { font-weight: 500; overflow-wrap: anywhere; }
.prew-komentarz { font-size: 13px; color: var(--st-czerwony-fg); overflow-wrap: anywhere; }
.prew-odpowiedz-przyciski { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.prew-odpowiedz-przyciski .filtr-chip { height: 32px; font-size: 13px; }
.prew-odpowiedz-przyciski .filtr-chip:not(.wybrany) { background: var(--karta); box-shadow: inset 0 0 0 1px var(--outline); }
.prew-odpowiedz:not(.wykonane):not(.niewykonane) .prew-wynik { background: transparent; box-shadow: inset 0 0 0 2px var(--outline); }
.prew-komentarz-form { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; padding-left: 34px; }
.prew-komentarz-form .pole { margin: 0; }
.prew-komentarz-form .przyciski { margin: 0; justify-content: flex-end; }
@media (max-width: 600px) {
.prew-komentarz-form { padding-left: 0; }
.prew-odpowiedz-przyciski { margin-left: 34px; }
}
@media (max-width: 900px) { .tabela-prew:not(.tabela-najblizsze) :is(th, td):nth-child(2) { display: none; } }
@media (max-width: 900px) { .tabela-najblizsze :is(th, td):nth-child(4) { display: none; } }
@media (max-width: 600px) {
/* Najbliższe na telefonie: termin u góry, pod nim maszyna, harmonogram i częstotliwość */
.tabela-najblizsze td.prew-termin { grid-column: 1 / -1; font-size: 14px; }
.tabela-najblizsze td.prew-harm { grid-column: 1; }
.tabela-najblizsze td.prew-czest { grid-column: 2; text-align: right; }
}
@media (max-width: 600px) {
.prew-widok { padding: 12px 16px 8px; }
/* Telefon: każdy harmonogram / lista = karta */
.tabela-prew, .tabela-prew tbody { display: block; }
.tabela-prew thead { display: none; }
.tabela-prew tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
padding: 12px 16px; margin-bottom: 10px; border-radius: var(--r-l); background: var(--karta); box-shadow: var(--shadow-2); }
.tabela-prew td, .tabela-prew td:first-child, .tabela-prew td:last-child { height: auto; padding: 0; border: none; }
.tabela-prew td.prew-nazwa { grid-column: 1 / -1; min-width: 0; }
.tabela-prew td { font-size: 13px; }
.tabela-prew td.data::before, .tabela-prew td.prew-masz::before { content: attr(data-etykieta) ": "; color: var(--muted); }
.tabela-prew td.prew-stan { grid-column: 1 / -1; }
/* zadanie w oknie: strzałki i usuń pod polami */
.prew-zadanie { flex-wrap: wrap; }
.prew-uchwyt { display: none; }
.prew-zadanie-akcje { width: 100%; justify-content: flex-end; height: auto; }
}
/* ---------- Edytor reguły numeru ewidencyjnego ---------- */
.edytor-numeru { padding: 0 24px 16px; display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.podglad-numeru {
display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: var(--r-l);
background: var(--primary-cont); color: var(--on-primary-cont);
}
.etykieta-podgladu { font-size: 12px; font-weight: 500; }
.przyklad-numeru { font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: .5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.opis-przykladu { font-size: 13px; }
.opis-przykladu.ostrzezenie { font-weight: 500; }
.pola-numeru { display: flex; flex-direction: column; gap: 16px; }
/* ---------- Start: powitanie i kafelki ---------- */
.ekran-start { padding: 32px; overflow-y: auto; }
.powitanie { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
.podtytul-start { margin: 4px 0 24px; color: var(--muted); font-size: 16px; }
.kafelki { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; max-width: 900px; }
.kafelek {
display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-l); text-decoration: none;
background: var(--karta); color: var(--text); box-shadow: var(--shadow-2); transition: box-shadow .15s, background-color .15s, transform .15s;
}
.kafelek:hover { box-shadow: var(--shadow-3); transform: translateY(-1px); }
.kafelek:focus-visible { outline-offset: 2px; }
.kafelek-glowny { background: var(--error-cont); color: var(--on-error-cont); min-height: 180px; }
.kafelek-ikona {
width: 56px; height: 56px; border-radius: var(--r-l); display: grid; place-items: center;
background: var(--karta); color: var(--error); box-shadow: var(--shadow-1);
}
.kafelek-ikona .ik { width: 32px; height: 32px; }
.kafelek:not(.kafelek-glowny) .kafelek-ikona { color: var(--primary); background: var(--primary-cont); box-shadow: none; }
/* Kafelek „Moje zgłoszenia”: liczby zgłoszeń według statusu */
.kafelek-opis .liczby-statusow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Pionowa kreska między pigułką „Moje” a filtrami statusu */
.filtr-separator { width: 1px; align-self: stretch; margin: 4px; background: var(--outline-var); }
.kafelek-tytul { font-size: 22px; line-height: 28px; margin-top: 8px; font-weight: 600; letter-spacing: -.017em; }
.kafelek-opis { font-size: 14px; line-height: 20px; opacity: .85; }
@media (max-width: 600px) {
.ekran-start { padding: 20px 16px; }
.powitanie { font-size: 24px; line-height: 32px; }
}
/* ---------- Nowe zgłoszenie na pełnym ekranie (#zglos) ---------- */
.strona-formularza { padding: 16px 24px 24px; overflow-y: auto; }
.naglowek-strony { display: flex; align-items: center; gap: 8px; margin: 0 0 16px -8px; }
.naglowek-strony h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.017em; }
#zglos-miejsce { max-width: 640px; }
#zglos-miejsce form { display: flex; flex-direction: column; gap: 20px; }
#zglos-miejsce .tytul { display: none; } /* tytuł jest w nagłówku strony */
#zglos-miejsce .panel-wyboru { background: var(--surface); }
@media (max-width: 600px) { .strona-formularza { padding: 12px 16px 20px; } }
/* ---------- Zgłoszenia ---------- */
.podglad-nazwy {
display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-m);
background: var(--surface-2); color: var(--text);
}
#zg-nazwa-podglad { font-weight: 500; overflow-wrap: anywhere; }
/* Pole-przycisk otwierające drzewko wyboru maszyny (wygląda jak zwykłe pole formularza) */
.pole-przycisk {
width: 100%; min-height: 56px; padding: 26px 44px 8px 16px; position: relative;
display: flex; flex-direction: column; justify-content: center; text-align: left;
border: none; border-radius: var(--r-m); background: var(--pole-tlo); color: var(--text);
font: 16px var(--font); cursor: pointer; transition: background-color .15s, box-shadow .15s;
}
.pole-przycisk:hover:not(:disabled) { background: var(--pole-tlo-hover); }
.pole-przycisk:focus-visible, .pole-przycisk[aria-expanded="true"] { outline: none; background: var(--pole-tlo-fokus); box-shadow: inset 0 0 0 2px var(--primary); }
.pole-przycisk:disabled { cursor: default; color: var(--muted); }
.pole-przycisk > .ik { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--muted); transition: transform .15s; }
.pole-przycisk[aria-expanded="true"] > .ik { transform: translateY(-50%) rotate(-90deg); }
.pole-przycisk:disabled > .ik { display: none; }
.tekst-wyboru { display: flex; flex-direction: column; min-width: 0; }
.tekst-wyboru .sciezka-wyboru { font-size: 12px; line-height: 16px; color: var(--muted); }
.tekst-wyboru .brak-wyboru { color: var(--muted); }
.pole .etykieta-stala { top: 14px; font-size: 12px; line-height: 16px; }
.pole-przycisk[aria-expanded="true"] + .etykieta-stala { color: var(--primary); }
/* Panel z drzewkiem lokalizacji i maszyn */
.panel-wyboru {
margin-top: 4px; padding: 8px; border: 1px solid var(--outline-var); border-radius: var(--r-m);
max-height: min(360px, 50vh); overflow-y: auto; background: var(--dialog-bg);
}
.szukaj-wybor {
position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; gap: 8px;
height: 40px; padding: 0 12px; margin: -8px -8px 6px; border-radius: var(--r-m) var(--r-m) 0 0;
background: var(--surface-3); color: var(--muted); cursor: text;
}
.szukaj-wybor .ik { width: 20px; height: 20px; }
.szukaj-wybor input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: 14px var(--font); color: var(--text); }
.panel-wyboru .wezel.masz { cursor: pointer; }
.panel-wyboru .wezel .numer { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel-wyboru .wezel.wybrany .numer { color: var(--on-secondary-cont); }
.panel-wyboru .wezel.naglowek { cursor: default; color: var(--muted); }
.panel-wyboru .pusto { margin: 8px; }
#eks-drzewo .wezel { cursor: pointer; } /* okno eksportu: lokalizację też się wybiera */
/* Kalendarz pola daty w kolorach trybu (jasny / ciemny) */
.pole input[type="date"] { color-scheme: light; }
@media (prefers-color-scheme: dark) { .pole input[type="date"] { color-scheme: dark; } }
/* Telefon: pełne nazwy zamiast numerów (szukanie po numerze nadal działa), mniejsze wcięcia */
@media (max-width: 600px) {
.panel-wyboru .wezel .numer { display: none; }
.panel-wyboru .wezel .nazwa { white-space: normal; overflow: visible; }
.panel-wyboru .drzewo ul { padding-left: 10px; }
}
.tabela-zgloszen .nazwa-zgloszenia { text-align: left; overflow-wrap: break-word; white-space: normal; }
.tabela-zgloszen td.data { white-space: nowrap; color: var(--muted); }
.tabela-zgloszen td.realizuje { white-space: nowrap; }
.tabela-zgloszen td.brak { color: var(--outline); }
.realizuje-mob { display: none; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Na telefonie i tablecie (do 900 px) nazwa zgłoszenia potrzebuje miejsca - numer i datę widać w szczegółach */
@media (max-width: 900px) {
.tabela-zgloszen :is(th, td):is(:nth-child(1), :nth-child(5), :nth-child(6)) { display: none; }
.tabela-zgloszen .realizuje-mob { display: block; }
/* Telefon: zamiast tabeli lista - nazwa na całą szerokość, pod nią krytyczność (lewo) i status (prawo),
żeby status był widoczny bez przewijania w bok */
.tabela-zgloszen, .tabela-zgloszen tbody { display: block; }
.tabela-zgloszen tbody { padding: 4px 12px 8px; }
.tabela-zgloszen thead { display: none; }
.tabela-zgloszen tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
padding: 10px 16px 12px; margin-bottom: 10px; border-radius: var(--r-l);
background: var(--karta); box-shadow: var(--shadow-2); /* telefon: każde zgłoszenie = karta, jak w Stitch */
}
.tabela-zgloszen td { height: auto; padding: 0; border: none; }
.tabela-zgloszen td:first-child, .tabela-zgloszen td:last-child { padding: 0; }
.tabela-zgloszen td:nth-child(2) { grid-column: 1 / -1; }
.tabela-zgloszen td:nth-child(4) { justify-self: end; }
.tabela-zgloszen .nazwa-zgloszenia { display: block; width: 100%; padding: 8px 0; }
}
#okno-szczegoly .przyciski { flex-wrap: wrap; }
/* ---------- Dziennik zmian / historia rekordu ---------- */
.audyt { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.audyt:empty { display: none; }
.przyciski .historia-btn { margin-right: auto; }
dialog.okno-szerokie { width: min(720px, calc(100% - 32px)); }
.opis-historii { margin: -8px 0 0; color: var(--muted); }
.widok-dziennika { padding: 0 24px 16px; display: flex; flex-direction: column; gap: 16px; }
.filtry-dziennika { display: grid; grid-template-columns: minmax(180px, 240px) 1fr auto; gap: 12px; max-width: 880px; align-items: start; }
.filtry-dziennika > .btn { height: 56px; }
/* Węższy ekran: przycisk eksportu w osobnym wierszu, żeby pole „Szukaj” nie było ściśnięte */
@media (max-width: 1200px) {
.filtry-dziennika { grid-template-columns: minmax(180px, 240px) 1fr; }
.filtry-dziennika > .btn { grid-column: 1 / -1; justify-self: start; height: 40px; }
}
@media (max-width: 600px) { .filtry-dziennika { grid-template-columns: 1fr; } }
/* Logi techniczne: zakres dni do eksportu + przycisk */
.eksport-logow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; max-width: 880px; margin-top: 12px; }
.eksport-logow .pole { flex: 1 1 180px; max-width: 240px; margin: 0; }
@media (max-width: 600px) { .eksport-logow .pole { max-width: none; } }
.lista-zmian { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.widok-dziennika .lista-zmian { max-height: none; overflow: visible; }
.zmiana { border: 1px solid var(--divider); border-radius: var(--r-m); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.zmiana-naglowek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.zmiana-naglowek .kto { color: var(--text); font-weight: 500; }
.zmiana-tytul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; overflow-wrap: anywhere; }
.akcja-zmiany { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: var(--r-s); }
.akcja-zmiany[data-akcja="dodanie"] { background: var(--st-zielony-bg); color: var(--st-zielony-fg); }
.akcja-zmiany[data-akcja="zmiana"] { background: var(--st-niebieski-bg); color: var(--st-niebieski-fg); }
.akcja-zmiany[data-akcja="usuniecie"] { background: var(--st-czerwony-bg); color: var(--st-czerwony-fg); }
.akcja-zmiany[data-akcja="przywrocenie"] { background: var(--st-pomaranczowy-bg); color: var(--st-pomaranczowy-fg); }
.zmiana-pola { margin: 4px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 13px; }
.zmiana-pola dt { color: var(--muted); }
.zmiana-pola dd { margin: 0; overflow-wrap: anywhere; }
.zmiana-pola .przed { color: var(--muted); text-decoration: line-through; }
.zmiana-pola .brak { color: var(--muted); font-style: italic; }
@media (max-width: 600px) { .zmiana-pola { grid-template-columns: 1fr; gap: 0; } .zmiana-pola dd { margin-bottom: 6px; } }
.metoda-karta { color: var(--st-pomaranczowy-fg); }
/* ---------- Kopia zapasowa (Konfiguracja) ---------- */
.naglowek-sekcji { margin: 8px 0 0; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.lista-kopii { margin: 0 -8px; }
.lista-kopii li { gap: 12px; padding-right: 4px; }
.lista-kopii .ik { color: var(--muted); }
.lista-kopii .kopia-opis { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lista-kopii .kopia-data { font-variant-numeric: tabular-nums; }
.lista-kopii .kopia-szczegoly { font-size: 12px; color: var(--muted); }
.lista-kopii .btn { flex-shrink: 0; }
/* Pole folderu kopii z przyciskiem „Wybierz…” obok */
.pole-z-przyciskiem { display: flex; gap: 8px; align-items: flex-start; }
.pole-z-przyciskiem .pole { flex: 1; min-width: 0; }
.pole-z-przyciskiem > .btn { flex-shrink: 0; height: 56px; }
/* Okno wyboru folderu */
.foldery-sciezka { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 500; overflow-wrap: anywhere; }
.lista-folderow { max-height: min(50vh, 420px); overflow-y: auto; margin: 0 -8px; }
.lista-folderow li { gap: 12px; cursor: pointer; border-radius: var(--r-s); }
.lista-folderow li:hover { background: var(--surface-3); }
.lista-folderow .ik { color: var(--primary); flex-shrink: 0; }
.pole-numeru { display: grid; grid-template-columns: 64px 1fr 120px; gap: 12px; align-items: center; }
.pole-numeru .nr-pola { color: var(--muted); font-weight: 500; }
@media (max-width: 600px) {
.pole-numeru { grid-template-columns: 1fr 96px; }
.pole-numeru .nr-pola { grid-column: 1 / -1; }
}
.przyciski.lewo { justify-content: flex-start; flex-wrap: wrap; }
.stan-reguly { padding: 0; }
.podpowiedz.ostrzezenie { color: var(--error); font-weight: 500; }
/* Okno podglądu przenumerowania */
dialog.szerokie { width: min(720px, calc(100% - 32px)); }
.przen-tabela { max-height: 50vh; overflow: auto; border: 1px solid var(--divider); border-radius: var(--r-m); }
.przen-tabela th, .przen-tabela td { height: 40px; }
.przen-nowy { font-weight: 500; color: var(--primary); }
.przen-problem { color: var(--error); font-size: 13px; }
.statusy-lista li {
display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 0 0 8px;
border-radius: var(--r-m);
}
.statusy-lista li:hover { background: var(--surface-2); }
.statusy-lista .ile { margin-left: auto; color: var(--muted); font-size: 13px; margin-right: 8px; }
/* Wybór koloru statusu */
.kolory { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kolory legend { font-size: 12px; color: var(--muted); padding: 0 0 8px; }
.probka {
width: 36px; height: 36px; border-radius: 50%; cursor: pointer; position: relative;
background: var(--st-bg); box-shadow: inset 0 0 0 1px var(--outline-var);
display: grid; place-items: center;
}
.probka::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--st-fg); }
.probka input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.probka:has(input:checked) { box-shadow: 0 0 0 2px var(--dialog-bg), 0 0 0 4px var(--primary); }
.probka:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 4px; }
.podglad { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
/* ---------- Przeciąganie ---------- */
.wezel[draggable="true"], tbody tr[draggable="true"] { cursor: grab; }
.przeciagany { opacity: .38; }
.wezel.cel, .wezel.cel:hover { background: var(--primary-cont); color: var(--on-primary-cont); box-shadow: inset 0 0 0 2px var(--primary); }
body.przeciaganie .akcje { display: none !important; }
body.przeciaganie .wezel:not(.cel):not(.wybrany):hover { background: none; }
.strefa-glowna {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10;
width: min(480px, calc(100% - 32px)); padding: 20px; text-align: center; font-weight: 500;
border-radius: var(--r-l); border: 2px dashed var(--outline);
background: var(--surface-2); color: var(--muted); box-shadow: var(--shadow-3);
}
.strefa-glowna.cel { border-color: var(--primary); background: var(--primary-cont); color: var(--on-primary-cont); }
/* ---------- Okna dialogowe ---------- */
dialog {
border: none; border-radius: var(--r-xl); padding: 0; width: min(560px, calc(100% - 32px));
background: var(--dialog-bg); color: var(--text); box-shadow: var(--shadow-3);
}
dialog::backdrop { background: var(--scrim); }
dialog form, .usun-tresc { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
dialog h2 { margin: 0 0 4px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; }
/* Nazwa zgłoszenia jest długa ([Typ][Lokalizacja]Maszyna) - mniejszy tytuł */
dialog h2#zs-nazwa { font-size: 18px; line-height: 24px; letter-spacing: -.01em; }
dialog p { margin: 0; color: var(--muted); }
dialog strong { color: var(--text); font-weight: 500; }
.przyciski { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* Formularze w oknach: na szerokim ekranie dwie kolumny (klasa "siatka" na