/* ONE - design system 0.22 (reskin na layout Portalu Klienta B2B).
Nazwy klas są STABILNE (pilnowane testami) - zmienia się wyłącznie wygląd.
Źródło wzorca: Portal_Klienta/app/static/style.css (tokeny :root, tryb
ciemny, komponenty .panel/.btn/.nav). Fonty lokalne: Outfit (tekst)
+ Space Grotesk (nagłówki, liczby) - zero CDN w runtime.
Tryb ciemny: klasa "ciemny" na (motyw.js, localStorage, bez
udziału backendu). Ciemne tło ROZJAŚNIONE względem Portalu (decyzja
Macieja): #0d2a46 zamiast #071e33, panel jaśniejszy od tła. */
@import url('/static/fonts/fonts.css');
:root {
--szer-sidebar: 216px; /* zwinięty: 64px (html.sidebar-zwiniety) */
--wys-paska: 58px; /* wysokość przyklejonego paska górnego */
/* --- skala odstępów (bez zmian) --- */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 40px; --s8: 48px;
/* --- tokeny Portalu (motyw jasny) --- */
--bg: #f4f6f8;
--panel: #ffffff;
--line: rgba(8, 41, 68, .09);
--line2: rgba(8, 41, 68, .055);
--ink: #082944;
--mut: #63788c;
--accent: #24BAEC;
--accent-h: #1ca6d4;
--accent-ink: #04283a;
--accent-txt: #0e7ba3;
--hot: #FF6C0F;
--tile: #eef2f6;
--ok: #12805c; --okbg: #e0f4ec;
--warn: #b45309; --warnbg: #fdf0e3;
--errc: #b3261e; --errbg: #fdeceb;
--glass: rgba(255, 255, 255, .72);
--navcur: rgba(36, 186, 236, .10);
--sh: 0 1px 2px rgba(8, 41, 68, .04), 0 10px 30px -12px rgba(8, 41, 68, .10);
--sh-h: 0 2px 6px rgba(8, 41, 68, .05), 0 24px 48px -16px rgba(8, 41, 68, .18);
--ease: cubic-bezier(.22, .68, .24, .99);
/* --- aliasy historyczne ONE -> nowe tokeny (szablony/skrypty ich używają) --- */
--tlo: var(--bg);
--tlo-2: var(--tile);
--karta: var(--panel);
--navy: var(--ink);
--navy-2: var(--tile);
--cyan: var(--accent);
--atrament: var(--ink);
--tekst: var(--ink);
--tekst-2: var(--mut);
--tekst-3: var(--mut);
--linia: var(--line2);
--linia-2: var(--line);
--akcent: var(--accent-txt);
--akcent-ciemny: #0b6588;
--akcent-jasny: var(--navcur);
/* statusy - jedna paleta (chipy + komunikaty + wykresy) */
--ok-tlo: var(--okbg); --ok-tekst: var(--ok); --ok-linia: rgba(18, 128, 92, .25);
--uwaga-tlo: var(--warnbg); --uwaga-tekst: var(--warn); --uwaga-linia: rgba(180, 83, 9, .25);
--blad-tlo: var(--errbg); --blad-tekst: var(--errc); --blad-linia: rgba(179, 38, 30, .25);
--info-tlo: rgba(36, 186, 236, .12); --info-tekst: var(--accent-txt); --info-linia: rgba(36, 186, 236, .3);
--neutral-tlo: var(--tile); --neutral-tekst: var(--mut); --neutral-linia: var(--line);
--cien-1: 0 1px 2px rgba(8, 41, 68, .05);
--cien-2: var(--sh);
--cien-3: var(--sh-h);
--promien: 20px;
--promien-2: 13px;
--promien-3: 9px;
}
/* --- motyw ciemny: rozjaśniony granat (nie "czarna dziura" Portalu) --- */
html.ciemny {
--bg: #0d2a46;
--panel: #123453;
--line: rgba(255, 255, 255, .12);
--line2: rgba(255, 255, 255, .07);
--ink: #f0f6fb;
--mut: #8fa9c2;
--accent: #24BAEC;
--accent-h: #5ecdf2;
--accent-ink: #04283a;
--accent-txt: #5ecdf2;
--hot: #FF8A42;
--tile: #0b2440;
--ok: #3ecf94; --okbg: rgba(62, 207, 148, .13);
--warn: #ffb26b; --warnbg: rgba(255, 138, 66, .14);
--errc: #ff9d94; --errbg: rgba(255, 90, 74, .15);
--glass: rgba(13, 42, 70, .74);
--navcur: rgba(36, 186, 236, .14);
--sh: 0 1px 2px rgba(0, 0, 0, .28), 0 14px 34px -14px rgba(0, 0, 0, .5);
--sh-h: 0 3px 8px rgba(0, 0, 0, .32), 0 28px 56px -18px rgba(0, 0, 0, .62);
--akcent-ciemny: #7fd9f6;
--ok-linia: rgba(62, 207, 148, .35);
--uwaga-linia: rgba(255, 178, 107, .35);
--blad-linia: rgba(255, 157, 148, .35);
--info-linia: rgba(94, 205, 242, .35);
--cien-1: 0 1px 2px rgba(0, 0, 0, .25);
}
/* Atrybut HTML hidden ma zawsze wygrywać z komponentami o własnym display. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* elementy doscrollowane (klawiatura, automaty) nie mogą wylądować
pod przyklejonym paskiem nawigacji ani sticky nagłówkiem tabeli */
a, button, input, select, textarea, tr, td { scroll-margin-top: 150px; }
body {
font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
margin: 0;
background: var(--bg);
color: var(--ink);
font-size: 14.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background .3s var(--ease);
}
/* --- typografia: nagłówki i duże liczby w Space Grotesk --- */
h1, h2, h3, .kafelek .liczba, .stat, .pr {
font-family: "Space Grotesk", "Outfit", sans-serif;
letter-spacing: -.02em;
}
h1 {
font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em;
margin: 0 0 var(--s2); color: var(--ink); line-height: 1.15;
}
h2 {
font-size: 1.18rem; font-weight: 700; letter-spacing: -.015em;
margin: var(--s6) 0 var(--s3); color: var(--ink);
}
h3 {
font-size: 0.98rem; font-weight: 700; letter-spacing: -.01em;
margin: var(--s5) 0 var(--s2); color: var(--ink);
}
p { margin: 0 0 var(--s3); }
main > p:first-of-type, h1 + p { color: var(--mut); }
small, .maly { font-size: 0.84rem; color: var(--mut); }
/* klasy narzędziowe kolorów (zamiast zaszytych hexów w szablonach -
dzięki temu tryb ciemny obejmuje też drobne opisy i kwoty) */
.przycmiony { color: var(--mut); }
.tekst-blad { color: var(--errc); }
.tekst-ok { color: var(--ok); }
.ramka-pola { border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem; margin: 0.5rem 0; }
pre.log-sync { max-height: 320px; }
a { color: var(--accent-txt); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: none;
box-shadow: 0 0 0 3.5px rgba(36, 186, 236, .35);
border-radius: 8px;
}
/* --- geometryczne tło (subtelny akcent jak w Portalu, statyczne prostokąty,
animacja tylko gdy użytkownik nie prosi o redukcję ruchu) --- */
.geo { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.geo i {
position: absolute; border: 1.5px solid var(--accent); opacity: .09;
border-radius: 22%; animation: geo-dryf 30s linear infinite;
}
.geo i:nth-child(1) { width: 220px; height: 220px; top: 7%; right: 7%; animation-duration: 34s; }
.geo i:nth-child(2) { width: 120px; height: 120px; top: 56%; right: 20%; animation-duration: 26s; animation-direction: reverse; }
.geo i:nth-child(3) { width: 70px; height: 70px; top: 26%; right: 36%; animation-duration: 21s; }
html.ciemny .geo i { opacity: .13; }
@keyframes geo-dryf { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* --- karta główna (kontener treści) - panel Portalu --- */
.kontener {
max-width: 1200px;
margin: var(--s5) auto var(--s8);
padding: var(--s6) var(--s6) var(--s7);
background: var(--panel);
border-radius: var(--promien);
border: 1px solid var(--line2);
box-shadow: var(--sh);
position: relative;
z-index: 1;
}
/* w układzie z sidebarem karta treści oddycha i nie klei się do krawędzi */
.glowna .kontener {
width: calc(100% - 2 * var(--s6));
margin: var(--s5) auto var(--s7);
}
/* karta szeroka (lista Kontrakty): pełna dostępna szerokość treści,
żeby tabela z kolumną Agent nie robiła się ciasna */
.kontener.szeroka { max-width: none; }
/* na węższych oknach (laptop) komórki ciaśniej - 10 kolumn z Agentem
ma się mieścić bez ucinania i bez poziomego przewijania */
@media (max-width: 1280px) {
.kontener.szeroka th, .kontener.szeroka td { padding: var(--s3) var(--s2); }
}
/* karta wąska (logowanie, rejestracja, reset hasła) - wyśrodkowana */
.kontener.waska {
max-width: 430px;
margin-top: var(--s8);
padding: var(--s7) var(--s6);
}
.kontener.waska h1 { font-size: 1.5rem; }
.kontener.waska .podtytul { color: var(--mut); margin-top: -0.2rem; }
.kontener.waska form { margin-top: var(--s4); }
.marka-logowanie { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); }
.marka-logowanie .logo-logowanie { width: 170px; max-width: 60%; height: auto; display: block; margin: calc(-1 * var(--s3)); object-fit: contain; }
.marka-logowanie .marka-znak {
font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: #fff;
background: linear-gradient(135deg, #24baec, #0e7ba3);
padding: var(--s1) var(--s2); border-radius: 6px;
box-shadow: 0 1px 4px rgba(36, 186, 236, 0.4);
}
.marka-logowanie .marka-nazwa { font-size: 1.25rem; font-weight: 800; color: var(--ink); letter-spacing: 0.01em; }
.linki-logowanie { margin-top: var(--s4); font-size: 0.9rem; }
.linki-logowanie span { color: var(--mut); margin: 0 var(--s1); }
/* --- układ z lewym sidebarem --- */
.uklad { display: flex; min-height: 100vh; align-items: stretch; }
.glowna { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; z-index: 1; }
/* sidebar: jasny panel jak w Portalu (aside), ikony + stan aktywny */
.pasek.sidebar {
flex: 0 0 var(--szer-sidebar);
width: var(--szer-sidebar);
transition: width 0.18s ease, flex-basis 0.18s ease, background .3s var(--ease);
background: var(--panel);
border-right: 1px solid var(--line2);
color: var(--ink);
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s5) var(--s3) var(--s4);
position: sticky;
top: 0;
align-self: flex-start;
height: 100vh;
/* przewija się LISTA pozycji (.sidebar-lista), stopka z ikonami jest
przyklejona na dole - na niskich ekranach menu nie znika pod krawędzią */
overflow: hidden;
z-index: 8;
}
.sidebar-lista {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
}
.pasek.sidebar a.pozycja {
display: flex;
align-items: center;
gap: var(--s3);
color: var(--mut);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
/* zwarte pionowo: 18 pozycji menu mieści się na ekranie 900px */
padding: 6px var(--s3);
border-radius: 11px;
line-height: 1.3;
transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.pasek.sidebar a.pozycja .ikona { flex: none; opacity: 0.9; }
.pasek.sidebar a.pozycja:hover { color: var(--ink); text-decoration: none; transform: translateX(2px); }
.pasek.sidebar a:focus-visible { box-shadow: 0 0 0 3px rgba(36, 186, 236, .3); }
/* aktywna sekcja: podświetlenie cyan + pogrubienie (jak .nav.on w Portalu) */
.pasek.sidebar a.pozycja.aktywne {
color: var(--ink);
background: var(--navcur);
font-weight: 700;
transform: none;
}
.pasek.sidebar a.pozycja.aktywne .ikona { opacity: 1; color: var(--accent); }
.pasek.sidebar a.logo {
display: inline-flex;
align-items: center;
gap: var(--s2);
margin: 0 var(--s2) var(--s5);
text-decoration: none;
}
.pasek.sidebar a.logo:hover { background: none; }
/* logo ONE: kolorowy znak na jasnym panelu, biały w trybie ciemnym
(dwa ![]()
, przełączane klasą motywu - zero logiki w backendzie) */
.pasek .logo-obraz {
height: 28px;
width: auto;
max-width: 133px;
min-width: 0;
flex-shrink: 0;
object-fit: contain;
display: block;
}
html.ciemny .logo-obraz.logo-jasny, html.ciemny .logo-logowanie.logo-jasny { display: none; }
html:not(.ciemny) .logo-obraz.logo-ciemny, html:not(.ciemny) .logo-logowanie.logo-ciemny { display: none; }
/* miniaturka w ciemnym logowaniu: przezroczysty znak, normalne proporcje */
.marka-logowanie .logo-logowanie.logo-ciemny { width: 170px; height: auto; margin: var(--s2) 0 var(--s3); }
/* górny pasek: glass jak header Portalu (blur + przezroczystość) */
.pasek-gorny {
display: flex;
align-items: center;
gap: var(--s1);
flex-wrap: wrap;
background: var(--glass);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
border-bottom: 1px solid var(--line2);
padding: var(--s2) var(--s5);
position: sticky;
top: 0;
z-index: 50;
min-height: var(--wys-paska);
}
.pasek-gorny a {
color: var(--mut);
text-decoration: none;
font-size: 0.865rem;
font-weight: 600;
padding: var(--s2) var(--s3);
border-radius: 10px;
line-height: 1;
transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.pasek-gorny a:hover { color: var(--ink); background: var(--tile); text-decoration: none; }
.pasek-gorny a.aktywne { color: var(--ink); background: var(--navcur); }
.pasek-gorny a.dzwonek { font-size: 1rem; }
/* stały przycisk "Zgłoś" (feedback zespołu) - widoczny na każdym ekranie */
.pasek-gorny a.przycisk-zglos {
border: 1px solid var(--line);
color: var(--ink);
font-weight: 700;
border-radius: 999px;
padding: 8px 14px;
}
.pasek-gorny a.przycisk-zglos:hover { border-color: var(--accent); color: var(--accent-txt); background: transparent; }
/* przełącznik motywu (jak .theme w Portalu) */
button.motyw {
border: 1px solid var(--line); background: transparent; color: var(--ink);
border-radius: 999px; padding: 8px 14px; font-size: 0.82rem; font-weight: 700;
cursor: pointer; font-family: inherit;
transition: all .25s var(--ease);
}
button.motyw:hover { border-color: var(--accent); color: var(--accent-txt); transform: rotate(-2deg); }
.rozpychacz { flex: 1 1 auto; }
.w-linii { display: inline; margin: 0; }
/* skip-link dla klawiatury/czytników ekranu (WCAG) */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--ink); color: var(--bg); padding: var(--s2) var(--s4);
border-radius: 0 0 var(--promien-3) 0; font-weight: 600;
}
.skip-link:focus { left: 0; text-decoration: none; }
button.link {
background: none; border: none; color: var(--mut);
cursor: pointer; font-size: 0.865rem; font-weight: 600; padding: var(--s2) var(--s3);
border-radius: 10px; font-family: inherit;
}
.pasek-gorny button.link:hover { color: var(--ink); background: var(--tile); }
main button.link { color: var(--accent-txt); padding: 0; }
main button.link:hover { text-decoration: underline; }
.pasek-gorny button.link.link-jasny { color: var(--mut); }
.pasek-gorny button.link.link-jasny:hover { color: var(--ink); }
/* ikony górnego paska (zębatka, żarówka, pomoc) i dzwonek */
.pasek-gorny a.ikona-gorna { display: inline-flex; align-items: center; }
.pasek-gorny button.ikona-gorna { display: inline-flex; align-items: center; }
.pasek-gorny button.zarowka.aktywne { color: #d97706; background: var(--warnbg); border-radius: 10px; }
html.ciemny .pasek-gorny button.zarowka.aktywne { color: #ffd166; }
/* dzwonek: kontur SVG + pomarańczowa kropka z liczbą */
.pasek-gorny a.dzwonek { position: relative; display: inline-flex; align-items: center; }
.dzwonek-kropka {
position: absolute; top: -2px; right: -4px;
background: var(--hot); color: #fff;
border-radius: 9999px; min-width: 16px; height: 16px;
font-size: 0.62rem; font-weight: 800; line-height: 16px;
text-align: center; padding: 0 3px;
border: 2px solid var(--panel);
}
/* --- wyszukiwarka globalna na górnym pasku (jak .search Portalu) --- */
.szukaj-gorny { margin: 0; flex: 0 1 420px; }
/* średnie okna: krótsza wyszukiwarka, żeby header mieścił się w jednym rzędzie */
@media (max-width: 1280px) { .szukaj-gorny { flex-basis: 280px; } }
.szukaj-atrapa {
display: flex; align-items: center; gap: var(--s2);
width: 100%; cursor: pointer;
background: var(--panel);
border: 1px solid var(--line);
color: var(--mut);
border-radius: 13px;
padding: 9px var(--s4);
font: inherit; font-size: 0.88rem;
transition: all .22s var(--ease);
}
.szukaj-atrapa:hover { border-color: var(--accent); color: var(--ink); }
.szukaj-atrapa span { flex: 1 1 auto; text-align: left; }
.szukaj-atrapa kbd {
font-family: inherit; font-size: 0.7rem; font-weight: 600;
border: 1px solid var(--line); border-radius: 5px;
padding: 1px 6px; opacity: 0.85;
}
/* --- formularze --- */
label {
display: block; margin: var(--s4) 0 0; font-size: 0.9rem;
font-weight: 600; color: var(--ink);
}
input, select, textarea {
display: block;
padding: var(--s2) var(--s3);
margin-top: var(--s2);
border: 1px solid var(--line);
border-radius: 11px;
min-width: 260px;
font-size: 0.92rem;
font-family: inherit;
background: var(--panel);
color: var(--ink);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--mut); }
input:hover, select:hover, textarea:hover { border-color: var(--line); }
input:focus, select:focus, textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3.5px rgba(36, 186, 236, .15);
outline: none;
}
input[type="checkbox"], input[type="radio"] {
accent-color: var(--accent); min-width: 0; width: auto; margin-top: 0;
}
input[disabled], select[disabled] { background: var(--tile); color: var(--mut); cursor: not-allowed; }
input[type=file]::file-selector-button {
font-family: inherit; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--line);
background: var(--tile); color: var(--ink); border-radius: 8px; padding: 6px 12px; margin-right: 10px;
cursor: pointer;
}
/* --- przyciski: główny (granat/cyan) / drugorzędny (obrys) / niebezpieczny ---
selektor główny wyklucza warianty, żeby button[type=submit] z klasą
.przycisk-drugi/-niebezpieczny nie dostał wypełnienia (specyficzność) */
button[type="submit"]:not(.link):not(.przycisk-drugi):not(.przycisk-niebezpieczny), .przycisk {
background: var(--ink);
color: var(--bg);
border: 1px solid transparent;
padding: var(--s2) var(--s4);
border-radius: var(--promien-2);
cursor: pointer;
margin-top: var(--s3);
text-decoration: none;
display: inline-block;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: .02em;
font-family: inherit;
line-height: 1.35;
box-shadow: var(--cien-1);
transition: all 0.22s var(--ease);
}
button[type="submit"]:not(.link):not(.przycisk-drugi):not(.przycisk-niebezpieczny):hover, .przycisk:hover {
text-decoration: none; transform: translateY(-2px); box-shadow: var(--sh);
}
button[type="submit"]:not(.link):not(.przycisk-drugi):not(.przycisk-niebezpieczny):active, .przycisk:active { transform: translateY(0); box-shadow: var(--cien-1); }
html.ciemny button[type="submit"]:not(.link):not(.przycisk-drugi):not(.przycisk-niebezpieczny),
html.ciemny .przycisk { background: var(--accent); color: var(--accent-ink); }
/* drugorzędny (obrys) - dla akcji pobocznych obok głównej */
.przycisk-drugi {
background: transparent;
color: var(--ink);
border: 1px solid var(--line);
padding: var(--s2) var(--s4);
border-radius: var(--promien-2);
cursor: pointer; margin-top: var(--s3);
text-decoration: none; display: inline-block;
font-size: 0.88rem; font-weight: 700; font-family: inherit; line-height: 1.35;
transition: all 0.22s var(--ease);
}
.przycisk-drugi:hover { border-color: var(--ink); text-decoration: none; }
html.ciemny .przycisk-drugi:hover { border-color: var(--accent); color: var(--accent-h); }
/* niebezpieczny (usuwanie, odrzucenie) */
.przycisk-niebezpieczny {
background: transparent;
color: var(--errc);
border: 1px solid var(--line);
padding: var(--s2) var(--s4);
border-radius: var(--promien-2);
cursor: pointer; margin-top: var(--s3);
text-decoration: none; display: inline-block;
font-size: 0.88rem; font-weight: 700; font-family: inherit; line-height: 1.35;
transition: all 0.22s var(--ease);
}
.przycisk-niebezpieczny:hover { background: var(--errbg); border-color: var(--errc); color: var(--errc); text-decoration: none; }
.przycisk-maly, .formularz-akcji button { padding: var(--s1) var(--s3); font-size: 0.82rem; }
/* rodzina .btn z Portalu (dla nowych/przepisywanych widoków) */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
font-family: inherit; font-size: 0.88rem; font-weight: 700; letter-spacing: .02em;
border: 1px solid transparent; border-radius: var(--promien-2); padding: 10px 18px;
min-height: 40px; cursor: pointer; transition: all .22s var(--ease);
text-decoration: none; white-space: nowrap;
}
a.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh); }
html.ciemny .btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
html.ciemny .btn-ghost:hover { border-color: var(--accent); color: var(--accent-h); }
.btn-sm { padding: 7px 13px; font-size: 0.82rem; min-height: 32px; border-radius: 10px; }
/* --- komunikaty --- */
.blad, .sukces, .info {
padding: var(--s3) var(--s4);
border-radius: var(--promien-2);
margin: var(--s3) 0;
font-size: 0.9rem;
font-weight: 600;
display: flex; align-items: flex-start; gap: var(--s2);
}
.blad { color: var(--errc); background: var(--errbg); border: 1px solid var(--line2); }
.sukces { color: var(--ok); background: var(--okbg); border: 1px solid var(--line2); }
.info { color: var(--accent-txt); background: var(--info-tlo); border: 1px solid var(--line2); font-weight: 500; }
.blad::before { content: "!"; font-weight: 800; }
.sukces::before { content: "\2713"; font-weight: 800; }
/* display:flex nie może wygrywać z atrybutem hidden (np. #m-bledy w modalu) */
.blad[hidden], .sukces[hidden], .info[hidden] { display: none; }
/* --- tabele (język Portalu: drobny uppercase nagłówek, hover kafelkowy) ---
.tabela-scroll: poziomy scroll TYLKO na wąskich ekranach. Na desktopie bez
overflow, bo scroll-container psuje position:sticky nagłówka tabeli. */
.tabela-scroll { border-radius: var(--promien-2); }
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin: var(--s4) 0 var(--s5);
border: none;
font-size: 0.9rem;
background: transparent;
}
th, td {
text-align: left;
padding: var(--s3) var(--s4);
border-bottom: 1px solid var(--line2);
vertical-align: middle;
}
/* długie ciągi w danych (adresy ekranów, opisy) łamią się zamiast rozpychać
tabelę poza kartę (zastany overflow skrzynki zgłoszeń na 1200px);
nagłówki NIE łamią się w środku wyrazu */
td { overflow-wrap: anywhere; }
/* tabele o wielu kolumnach (skrzynka zgłoszeń): przewijanie WEWNĄTRZ karty
+ gwarantowana szerokość, żeby kolumny nie były zmiażdżone; sticky thead
nie działa w scroll-kontenerze, więc tylko dla oznaczonych tabel */
.tabela-przewijana { overflow-x: auto; }
.tabela-przewijana > table { min-width: 1180px; }
/* w scroll-kontenerze sticky thead nachodzi na pierwszy wiersz - wyłącz;
szerokość zapewnia przewijanie, więc łamanie w środku ciągów niepotrzebne */
.tabela-przewijana thead th { position: static; }
.tabela-przewijana td { overflow-wrap: normal; }
thead th {
background: var(--panel);
color: var(--mut);
font-size: 0.69rem;
text-transform: uppercase;
letter-spacing: 0.13em;
font-weight: 700;
border-bottom: 1px solid var(--line);
position: sticky;
top: var(--wys-paska); /* pod przyklejonym paskiem górnym */
z-index: 5;
/* BEZ white-space:nowrap - nagłówki mogą się łamać, żeby tabela
mieściła się w karcie (zastany overflow na 1200px w Zamówieniach) */
}
tbody tr { transition: background 0.15s ease; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--tile); }
tbody tr:hover td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
tbody tr:hover td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
td .maly, td small { color: var(--mut); }
td.kwota, th.kwota { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* pusta tabela: komunikat "Brak X" wyśrodkowany i wyszarzony */
td[colspan] { color: var(--mut); font-style: normal; padding: var(--s5) var(--s4); text-align: center; }
/* --- puste stany (poza tabelą) --- */
.pusty-stan {
text-align: center;
color: var(--mut);
background: var(--tile);
border: 1px dashed var(--line);
border-radius: var(--promien-2);
padding: var(--s6) var(--s4);
margin: var(--s4) 0;
font-size: 0.92rem;
}
/* --- chipy / plakietki statusów (jedna paleta w całej aplikacji) --- */
.znacznik {
display: inline-flex;
align-items: center;
gap: var(--s1);
padding: 0.16rem 0.65rem;
border-radius: 9999px;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.5;
white-space: nowrap;
letter-spacing: .02em;
border: 1px solid transparent;
}
.znacznik::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: currentColor; flex: none;
}
.znacznik.bez-kropki::before { display: none; }
/* stany urządzeń / oznaczenia */
.znacznik.aktywne { background: var(--ok-tlo); color: var(--ok-tekst); border-color: var(--ok-linia); }
.znacznik.nieaktywne { background: var(--blad-tlo); color: var(--blad-tekst); border-color: var(--blad-linia); }
.znacznik.zapas { background: var(--info-tlo); color: var(--info-tekst); border-color: var(--info-linia); }
.znacznik.vip { background: var(--uwaga-tlo); color: var(--uwaga-tekst); border-color: var(--uwaga-linia); }
/* statusy procesów (zamówienia, serwis, reklamacje, rozliczenia) */
.znacznik.st-nowe { background: var(--info-tlo); color: var(--info-tekst); border-color: var(--info-linia); }
.znacznik.st-oczekuje { background: var(--uwaga-tlo); color: var(--uwaga-tekst); border-color: var(--uwaga-linia); }
.znacznik.st-realizacja { background: var(--navcur); color: var(--accent-txt); border-color: var(--info-linia); }
.znacznik.st-wyslane { background: var(--neutral-tlo); color: var(--neutral-tekst); border-color: var(--neutral-linia); }
.znacznik.st-zakonczone { background: var(--ok-tlo); color: var(--ok-tekst); border-color: var(--ok-linia); }
.znacznik.st-odrzucone { background: var(--blad-tlo); color: var(--blad-tekst); border-color: var(--blad-linia); }
.znacznik.st-neutral { background: var(--neutral-tlo); color: var(--neutral-tekst); border-color: var(--neutral-linia); }
/* --- dane zaciągane z Princity: tylko podgląd --- */
.info.z-princity { border-left: 4px solid var(--accent); }
/* --- błąd w logice: mocno widoczna opcja i znacznik --- */
.znacznik.logika-krytyczne {
background: var(--ink); color: var(--bg); border-color: var(--ink);
font-weight: 700; letter-spacing: 0.03em;
}
.znacznik.logika-krytyczne::before { background: var(--accent); }
html.ciemny .znacznik.logika-krytyczne { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html.ciemny .znacznik.logika-krytyczne::before { background: var(--accent-ink); }
/* --- formularz "Zgłoś": typ zgłoszenia jako trzy duże karty
(wzór: fb-types z Portalu Klienta; radio ukryte, klika się całą kartę) --- */
fieldset.typy-zgloszenia, fieldset.tagi-zgloszenia {
border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0;
}
fieldset.typy-zgloszenia legend, fieldset.tagi-zgloszenia legend {
padding: 0; margin-bottom: var(--s2);
font-size: 0.86rem; font-weight: 700; color: var(--ink);
}
fieldset.tagi-zgloszenia legend span { font-weight: 400; color: var(--mut); }
fieldset.typy-zgloszenia { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
fieldset.typy-zgloszenia legend { grid-column: 1 / -1; }
label.karta-typu {
position: relative; display: block; margin: 0; min-width: 0;
border: 1px solid var(--line); border-radius: var(--promien-2);
background: var(--tile); padding: var(--s3);
cursor: pointer;
transition: border-color .18s var(--ease), background .18s var(--ease),
box-shadow .18s var(--ease), transform .18s var(--ease);
}
/* radio rozciągnięte na całą kartę, niewidoczne (opacity, nie display -
klawiatura i automaty dalej je widzą i klikają) */
label.karta-typu input[type="radio"] {
appearance: none; -webkit-appearance: none;
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; padding: 0; min-width: 0; border: 0; border-radius: inherit;
background: transparent; opacity: 0; cursor: pointer;
}
label.karta-typu span { display: block; }
label.karta-typu b { display: block; font-size: 0.88rem; color: var(--ink); margin-bottom: var(--s1); }
label.karta-typu small { display: block; font-size: 0.76rem; line-height: 1.4; color: var(--mut); font-weight: 400; }
label.karta-typu i {
font-style: normal; font-size: 0.64rem; font-weight: 700; letter-spacing: .04em;
color: var(--bg); background: var(--ink); border-radius: 9999px;
padding: 2px 7px; margin-left: var(--s1); vertical-align: 1px;
}
html.ciemny label.karta-typu i { background: var(--accent); color: var(--accent-ink); }
label.karta-typu:hover { border-color: var(--accent); transform: translateY(-1px); }
label.karta-typu:has(input:focus-visible) {
outline: 3px solid rgba(36, 186, 236, .22); border-color: var(--accent);
}
label.karta-typu:has(input:checked) {
border-color: var(--accent); background: var(--navcur);
box-shadow: inset 0 0 0 1px var(--accent);
}
/* karta "Błąd w logice": wyróżniona, ale w palecie navy/cyan ONE (lewy pasek),
nie czerwony alert - pilnowane testem */
label.typ-logika {
border-left: 4px solid var(--cyan);
background: var(--navcur);
color: var(--navy);
}
label.typ-logika:has(input:checked) { border-left-color: var(--accent); }
/* --- szybkie tagi zgłoszeń (klikane chipy, wybór wielu) --- */
.chipy-tagow {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: var(--s2) 0 var(--s4);
}
.chip-tag {
position: relative;
display: inline-flex;
align-items: center;
padding: 0.3rem 0.75rem;
border-radius: 9999px;
border: 1px solid var(--line);
background: var(--panel);
color: var(--mut);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: all .16s var(--ease);
margin: 0;
}
/* checkbox rozciągnięty na cały chip, niewidoczny (jak radio w kartach typu) */
.chip-tag input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; padding: 0; min-width: 0; border: 0; border-radius: inherit;
background: transparent; opacity: 0; cursor: pointer;
}
.chip-tag:hover { border-color: var(--accent); color: var(--ink); }
.chip-tag:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-tag:has(input:checked) {
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
html.ciemny .chip-tag:has(input:checked) {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
/* --- blok "kontekst techniczny" zgłoszenia (wzór: fb-context Portalu) --- */
.kontekst-zgloszenia {
border: 1px solid var(--accent); background: var(--navcur);
border-radius: var(--promien-2); padding: var(--s3) var(--s4);
margin: var(--s4) 0 var(--s3);
}
.kontekst-zgloszenia h3 { margin: 0 0 2px; font-size: 0.88rem; }
.kontekst-zgloszenia > p { margin: 0 0 var(--s2); color: var(--mut); font-size: 0.78rem; }
.kontekst-zgloszenia dl { display: grid; gap: var(--s1); margin: 0; }
.kontekst-zgloszenia dl div {
display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s2);
font-size: 0.78rem; line-height: 1.4;
}
.kontekst-zgloszenia dt { font-weight: 700; color: var(--ink); }
.kontekst-zgloszenia dd { margin: 0; color: var(--mut); overflow-wrap: anywhere; }
/* formularz na stronie /zgloszenia/nowe: zwarta kolumna jak w modalu */
#formularz-zgloszenia { max-width: 760px; }
#formularz-zgloszenia textarea, #formularz-zgloszenia input[type="file"],
#formularz-zgloszenia input[type="text"] { width: 100%; }
@media (max-width: 640px) {
fieldset.typy-zgloszenia { grid-template-columns: 1fr; }
.kontekst-zgloszenia dl div { grid-template-columns: 1fr; gap: 0; }
}
/* --- "Wskaż element" (0.24, wzór: fb-pick z Portalu Klienta) --- */
.wskaz-wiersz {
display: flex; align-items: center; gap: var(--s3);
margin: 0 0 var(--s3); flex-wrap: wrap;
}
.wskaz-przycisk { flex-shrink: 0; }
.wskaz-info { flex: 1; min-width: 180px; font-size: 0.78rem; color: var(--mut); }
/* ramka podświetlająca element pod kursorem podczas wskazywania */
.wskaz-ramka {
display: none; position: fixed; z-index: 90; pointer-events: none;
border-radius: 8px; border: 2px solid var(--accent);
box-shadow: 0 0 0 4px rgba(36, 186, 236, .25);
}
.wskaz-pasek {
position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
z-index: 95; background: var(--ink); color: var(--bg);
border-radius: 9999px; padding: 10px 20px; font-size: 0.8rem;
font-weight: 700; box-shadow: var(--cien-2, 0 6px 24px rgba(0,0,0,.18));
pointer-events: none;
}
html.ciemny .wskaz-pasek { background: var(--accent); color: var(--accent-ink); }
/* tryb wskazywania: kursor celownika na całej stronie */
html.wskazywanie, html.wskazywanie body, html.wskazywanie * { cursor: crosshair !important; }
/* plakietka "Wskazano: [etykieta] ✓" - widoczna i usuwalna (X cofa wybór) */
.wskaz-plakietka {
display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
background: var(--navcur); border: 1px solid var(--accent);
border-radius: 9999px; padding: 6px 8px 6px 13px;
font-size: 0.78rem; color: var(--ink);
}
.wskaz-plakietka b { flex-shrink: 0; }
.wskaz-plakietka-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wskaz-plakietka-x {
flex-shrink: 0; border: 0; background: var(--ink); color: var(--bg);
width: 18px; height: 18px; border-radius: 50%; font-size: 0.8rem;
line-height: 1; cursor: pointer; padding: 0;
}
.wskaz-plakietka-x:hover { background: var(--accent); color: var(--accent-ink); }
/* --- zakładki --- */
.zakladki {
display: flex;
gap: var(--s1);
border-bottom: 1px solid var(--line);
margin: var(--s5) 0;
flex-wrap: wrap;
}
.zakladki a {
padding: var(--s3) var(--s4);
text-decoration: none;
color: var(--mut);
font-size: 0.9rem;
font-weight: 600;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.14s ease, border-color 0.14s ease;
}
.zakladki a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }
.zakladki a.aktywna { color: var(--accent-txt); border-bottom-color: var(--accent); }
/* --- segmenty (Aktywne/Nieaktywne jak w mockupie Portalu) --- */
.segmenty {
display: inline-flex; gap: 4px; padding: 4px;
background: var(--tile); border-radius: 999px; margin: var(--s3) 0 var(--s4);
}
.segmenty a, .segmenty label {
padding: 7px 18px; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
color: var(--mut); text-decoration: none; cursor: pointer; margin: 0;
transition: all .2s var(--ease);
}
.segmenty a:hover, .segmenty label:hover { color: var(--ink); text-decoration: none; }
.segmenty a.aktywny {
background: var(--panel); color: var(--ink); font-weight: 700; box-shadow: var(--cien-1);
}
/* przełącznik segmentów w czystym CSS (radio + :checked, bez JS i bez tras):
wszystkie sekcje są w DOM, widoczna jest ta wybrana; bez CSS widać wszystkie */
.segment-radio { position: absolute; opacity: 0; pointer-events: none; min-width: 0; }
#seg-a:checked ~ .segment-b, #seg-a:checked ~ .segment-c,
#seg-b:checked ~ .segment-a, #seg-b:checked ~ .segment-c,
#seg-c:checked ~ .segment-a, #seg-c:checked ~ .segment-b { display: none; }
/* .segmenty siedzi w .pasek-segmentow (zakładki + wyszukiwarka w jednym
wierszu), stąd kombinator potomka za ~ */
#seg-a:checked ~ .pasek-segmentow .segmenty label[for="seg-a"],
#seg-b:checked ~ .pasek-segmentow .segmenty label[for="seg-b"],
#seg-c:checked ~ .pasek-segmentow .segmenty label[for="seg-c"] {
background: var(--panel); color: var(--ink); font-weight: 700; box-shadow: var(--cien-1);
}
/* --- wyszukiwarka listy Kontraktów: pole obok zakładek + licznik --- */
.pasek-segmentow { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.pasek-segmentow .filtr-kontraktow {
margin-left: auto; min-width: 260px; margin-top: 0;
}
.filtr-licznik { color: var(--mut); font-size: 0.82rem; margin: 0 0 var(--s2); }
/* Stan lokalnej kopii faktur i prośba odbierana przez firmowy skrypt. */
.stan-danych-optima {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0 var(--s4);
padding: var(--s2) var(--s3); color: var(--mut);
background: var(--tile); border: 1px solid var(--line2);
border-radius: var(--promien-2); font-size: 0.86rem;
}
.stan-danych-optima p, .stan-danych-optima form { margin: 0; }
.stan-danych-optima strong { color: var(--ink); }
.stan-danych-optima button[type="submit"] { margin-top: 0; }
/* --- Magazyn urządzeń (migawka z Optimy) --- */
.pasek-filtrow-magazynu {
display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap;
margin-bottom: var(--s3);
}
.pasek-filtrow-magazynu label {
display: flex; flex-direction: column; gap: 4px;
color: var(--mut); font-size: 0.82rem;
}
.pasek-filtrow-magazynu select { min-width: 150px; margin-top: 0; }
.pasek-filtrow-magazynu .filtr-kontraktow {
margin-left: auto; min-width: 260px; margin-top: 0;
}
.migawka-info { color: var(--mut); font-size: 0.9rem; align-self: center; }
.migawka-info strong { color: var(--ink); }
/* wiersz z rezerwacją (kontraktową) = żółte podświetlenie - kod znany
zespołowi z Excela magazynowego; kolory wprost (nie --warnbg), bo mają
być jednoznacznie ŻÓŁTE w obu motywach, nie pomarańczowo-szare */
tr.wiersz-rezerwacja td { background: #fff3c2; }
html.ciemny tr.wiersz-rezerwacja td { background: rgba(255, 208, 60, .30); }
/* #TYLKO UŻYCZENIE: sprzęt widoczny, ale JAWNIE nie do sprzedaży */
.znacznik-uzyczenie {
background: var(--blad-tlo); color: var(--blad-tekst);
border-color: var(--blad-linia); margin-left: var(--s2);
}
.brak-statusu { color: var(--mut); font-style: italic; }
/* --- Magazyn urządzeń 0.28: podsumowanie PO MODELU + akordeon sztuk --- */
/* stały układ kolumn: bez tego komórka z akordeonem sztuk rozpycha kartę
w poziomie (overflow-x kontenera sztuk działa dopiero przy stałej
szerokości tabeli); na wąskich ekranach min-width + scroll karty */
.tabela-modeli { table-layout: fixed; min-width: 920px; }
.tabela-modeli thead th:nth-child(3) { width: 110px; } /* Marka */
.tabela-modeli thead th:nth-child(4) { width: 110px; } /* Łącznie sztuk */
.tabela-modeli thead th:nth-child(5) { width: 80px; } /* Wolne */
.tabela-modeli thead th:nth-child(6) { width: 130px; } /* Zarezerwowane */
.tabela-modeli thead th:nth-child(7) { width: 200px; } /* Cena zakupu netto */
.wiersz-modelu { cursor: pointer; }
.kol-strzalka { width: 26px; padding-right: 0; }
.strzalka-modelu { display: inline-block; color: var(--mut); transition: transform .15s ease; }
.grupa-modelu.otwarta .strzalka-modelu { transform: rotate(90deg); }
/* kontener rozwiniętych sztuk: wcięcie pod strzałką, bez kafelkowego hovera
(hover mają dopiero wiersze zagnieżdżonej tabeli) */
.wiersz-sztuk > td { padding: 0 var(--s4) var(--s4) 26px; }
.wiersz-sztuk:hover > td { background: transparent; }
.wiersz-sztuk:hover > td:first-child,
.wiersz-sztuk:hover > td:last-child { border-radius: 0; }
.tabela-sztuk { margin: 0; font-size: 0.88rem; }
/* sticky w zagnieżdżonej tabeli nachodziłby na wiersze modeli przy przewijaniu */
.tabela-sztuk thead th { position: static; }
/* sztuki BEZ zawijania: globalne overflow-wrap:anywhere łamało krótkie
identyfikatory ("FL- 105") i statusy ("Uszkod zona") w środku wyrazu;
za szeroka tabela przewija się poziomo wewnątrz akordeonu */
.przewijanie-sztuk { overflow-x: auto; }
.tabela-sztuk th, .tabela-sztuk td { white-space: nowrap; overflow-wrap: normal; }
/* STATUS (i inne krótkie kolumny) w JEDNEJ linii - koniec łamania w środku
wyrazu ("Uszkod zona") przez globalne overflow-wrap:anywhere; za długa
wartość jest ucinana wielokropkiem, pełna treść siedzi w title */
td.nie-lam {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
overflow-wrap: normal; max-width: 240px;
}
td.kom-status { max-width: 180px; }
/* nazwa modelu jest najważniejsza - dostaje najwięcej miejsca */
.tabela-modeli > tbody > .wiersz-modelu > td.nie-lam { max-width: 480px; }
/* --- kolumna "Agent" listy Kontraktów: status agenta monitorującego --- */
.agent-status-ok { background: var(--ok-tlo); color: var(--ok-tekst); border-color: var(--ok-linia); }
.agent-status-blad { background: var(--blad-tlo); color: var(--blad-tekst); border-color: var(--blad-linia); }
.agent-status-info { background: var(--info-tlo); color: var(--info-tekst); border-color: var(--info-linia); }
.agent-status-uwaga { background: var(--uwaga-tlo); color: var(--uwaga-tekst); border-color: var(--uwaga-linia); }
.agent-status-data { display: block; font-size: .78rem; color: var(--mut); margin-top: 2px; }
/* --- legenda typów kontraktów: rozwijana po kliknięciu, panel absolutny
(nie zabiera miejsca tabeli i nie przesuwa treści) --- */
.legenda { position: relative; display: inline-block; }
.legenda summary {
list-style: none; cursor: pointer; user-select: none;
background: transparent; color: var(--mut);
border: 1px solid var(--line); border-radius: var(--promien-2);
padding: var(--s2) var(--s4);
font-size: 0.88rem; font-weight: 700; line-height: 1.35;
transition: all .2s var(--ease);
}
.legenda summary::-webkit-details-marker { display: none; }
.legenda summary:hover, .legenda[open] summary { color: var(--ink); border-color: var(--accent); }
.legenda-panel {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
width: min(420px, 84vw);
background: var(--panel); color: var(--ink);
border: 1px solid var(--line2); border-radius: var(--promien-2);
box-shadow: var(--sh); padding: var(--s4) var(--s5);
text-align: left;
}
.legenda-panel h2 { font-size: 0.95rem; margin: 0 0 var(--s2); }
.legenda-panel p { font-size: 0.86rem; margin: 0 0 var(--s2); color: var(--mut); }
.legenda-panel p strong { color: var(--ink); }
.legenda-panel p:last-child { margin-bottom: 0; }
/* --- nagłówek strony: tytuł + akcje po prawej (jak page-head Portalu) --- */
.naglowek-strony {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4);
}
.naglowek-strony h1 { margin-bottom: 0; }
.akcje-naglowka { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.akcje-naglowka form { margin: 0; }
.akcje-naglowka .przycisk, .akcje-naglowka .przycisk-drugi,
.akcje-naglowka button[type="submit"] { margin-top: 0; }
/* --- układ --- */
.siatka { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
/* kolumny siatki nie mogą rozpychać strony (min-width:auto gridu);
szeroka zawartość (tabele, logi) przewija się wewnątrz kolumny */
.siatka > * { min-width: 0; overflow-x: auto; }
.filtry {
display: flex;
gap: var(--s4);
align-items: flex-end;
flex-wrap: wrap;
background: var(--tile);
border: 1px solid var(--line2);
border-radius: var(--promien-2);
padding: var(--s3) var(--s4);
margin: var(--s3) 0 var(--s5);
}
.filtry label { margin: 0; font-size: 0.72rem; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: 0.09em; }
.filtry input, .filtry select { min-width: 150px; margin-top: var(--s1); }
.filtry button { margin-top: 0; }
dl.dane { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin: var(--s3) 0; }
dl.dane dt { font-weight: 600; color: var(--mut); font-size: 0.85rem; }
dl.dane dd { margin: 0; font-size: 0.92rem; }
/* pasek akcji nad treścią (przyciski panelu) */
.akcje-pasek { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; align-items: center; }
.akcje-pasek form { margin: 0; }
.akcje-pasek .przycisk, .akcje-pasek .przycisk-drugi, .akcje-pasek .przycisk-niebezpieczny,
.akcje-pasek button[type="submit"] { margin-top: 0; }
/* zestaw akcji w wierszu tabeli (spójny, rozdzielony) */
.akcje-wiersz { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.akcje-wiersz a, .akcje-wiersz form { margin: 0; }
.akcje-wiersz .link-akcja { font-size: 0.86rem; font-weight: 600; }
/* akcje w wierszu jako miękkie pigułki (odnośniki nawigacyjne w tabelach) */
td.akcje-wiersza { white-space: nowrap; }
td.akcje-wiersza a, td.akcje-wiersza button.link {
display: inline-flex; align-items: center;
border: 1px solid var(--line); border-radius: 9999px;
padding: 3px 12px; margin: 1px 2px;
font-size: 0.8rem; font-weight: 600; text-decoration: none;
color: var(--mut); background: transparent;
transition: all .18s var(--ease);
}
td.akcje-wiersza a:hover, td.akcje-wiersza button.link:hover {
border-color: var(--accent); color: var(--accent-txt);
background: var(--navcur); text-decoration: none;
}
td.akcje-wiersza button.link.akcja-usun { color: var(--errc); }
td.akcje-wiersza button.link.akcja-usun:hover {
border-color: var(--errc); background: var(--errbg); color: var(--errc);
}
/* --- paginacja listy (Drukarki) --- */
.pager {
display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
flex-wrap: wrap; margin-top: var(--s3); padding: var(--s2) var(--s3);
background: var(--tile); border-radius: var(--promien-2);
font-size: 0.85rem; color: var(--mut); font-weight: 600;
}
.pager-przyciski { display: flex; gap: var(--s2); }
.pager .przycisk-drugi { margin-top: 0; padding: var(--s1) var(--s3); font-size: 0.82rem; }
.dane-z-dnia { margin-top: -0.3rem; }
/* --- pasek poziomu tonera --- */
.pasek-poziomu {
background: var(--tile);
border-radius: 999px;
height: 10px;
width: 130px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.pasek-poziomu > span { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width 0.3s ease; }
.pasek-poziomu > span.nisko { background: var(--hot); }
/* --- zamówienia (3 kolumny robocze) --- */
.kolumny-zamowien { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 1500px) { .kolumny-zamowien { grid-template-columns: 1fr 1fr 1fr; } }
.formularz-akcji { display: flex; gap: var(--s2); align-items: center; margin: var(--s2) 0; flex-wrap: wrap; }
.formularz-akcji input, .formularz-akcji select { margin-top: 0; min-width: 0; }
.formularz-akcji button { margin-top: 0; }
.dzwonek-licznik {
background: var(--hot);
color: #fff;
border-radius: 9999px;
padding: 0 0.4rem;
font-size: 0.68rem;
font-weight: 800;
vertical-align: top;
margin-left: 2px;
}
pre {
background: #071e33;
color: #d7e5f0;
padding: var(--s4);
border-radius: var(--promien-2);
font-size: 0.78rem;
overflow: auto;
line-height: 1.5;
}
html.ciemny pre { background: #081c30; border: 1px solid var(--line2); }
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
background: var(--tile); border-radius: 6px; padding: 2px 6px; word-break: break-all;
}
/* --- modal potwierdzenia (natywny