.login-logo { max-width: 220px; max-height: 60px; margin-bottom: 20px; }
.admin-logo { max-width: 200px; max-height: 50px; display: block; margin-bottom: 16px; }
.topbar-logo { height: 24px; margin-right: 12px; filter: brightness(0) invert(1); }
* { box-sizing: border-box; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #1f2430;
}
/* ---- Logowanie ---- */
.login-body {
background: var(--brand-login-bg);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-box {
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.login-box h1 { margin-bottom: 6px; color: var(--brand-dark); }
.subtitle { color: #6b7280; font-size: 13px; margin-bottom: 20px; }
.login-box input[type="text"],
.login-box input[type="password"] {
width: 100%; padding: 12px; font-size: 16px; text-align: center;
border: 1px solid #c9ccd1; border-radius: 8px; margin-bottom: 14px;
letter-spacing: 1px;
}
/* Szary napis-podpowiedz (placeholder) znika juz przy KLIKNIECIU w pole,
nie dopiero przy pierwszym wpisanym znaku - kliknales, to wiadomo, ze
zaraz piszesz, podpowiedz tylko przeszkadza. */
.login-box input:focus::placeholder { color: transparent; }
.login-box input:focus { border-color: var(--brand-color); outline: none; }
.login-box button, .admin-body button {
width: 100%; padding: 12px; font-size: 15px; font-weight: 600;
background: var(--brand-fill, var(--brand-color)); color: white; border: none; border-radius: 8px;
cursor: pointer;
}
.login-box button:hover { background: color-mix(in srgb, var(--brand-fill, var(--brand-color)) 86%, black); }
.error { color: #c0392b; font-size: 13px; margin-bottom: 10px; }
/* ---- Admin ---- */
.admin-body { background: #eef1f5; }
/* Szerszy kontener niz kiedys (1080px) - wieksze okna edycji (wnioski AI,
formularze) na typowych monitorach; na weszych ekranach i tak zwija sie
do szerokosci okna. */
.admin-wrap { max-width: 1320px; margin: 24px auto 40px; padding: 0 20px; }
/* Wspolny naglowek panelu (patrz templates/_admin_header.html): logo +
tytul po lewej, zakladki po prawej, wszystko w jednej bialej "karcie". */
.admin-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px 24px; flex-wrap: wrap;
background: white; border: 1px solid #e2e4e8; border-radius: 12px;
padding: 12px 20px; margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.admin-header-brand { display: flex; align-items: center; gap: 14px; }
.admin-header-brand .admin-logo { margin-bottom: 0; max-height: 34px; }
/* logo SVG bez wlasnego rozmiaru (patrz admin._logo_unsized) - stala wysokosc, zeby tytul nie wchodzil pod menu */
.admin-header-brand .admin-logo-fit { height: 34px; width: auto; flex-shrink: 0; }
.admin-header-title {
font-size: 13px; font-weight: 700; color: #6b7280;
text-transform: uppercase; letter-spacing: 0.05em;
border-left: 1px solid #e2e4e8; padding-left: 14px; white-space: nowrap;
}
.card {
background: white; border: 1px solid #e2e4e8; border-radius: 12px;
padding: 20px 22px; margin-bottom: 18px;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.card h2 {
font-size: 15px; margin: 0 0 14px; color: var(--brand-dark);
padding-bottom: 10px; border-bottom: 1px solid #eef0f3;
}
.card form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.card input[type="text"], .card select {
padding: 8px; border: 1px solid #c9ccd1; border-radius: 6px; font-size: 14px;
}
.card button {
padding: 8px 16px; background: var(--brand-dark); color: white; border: none;
border-radius: 6px; cursor: pointer; font-size: 14px;
}
.card button:disabled { opacity: 0.4; cursor: not-allowed; }
.card textarea {
padding: 8px; border: 1px solid #c9ccd1; border-radius: 6px; font-size: 14px;
font-family: inherit; resize: vertical; width: 100%;
}
.ai-analysis-form { flex-direction: column; align-items: stretch; }
.conclusions-include {
display: flex; align-items: center; gap: 8px; font-size: 13px;
color: #495057; font-weight: 600; margin: 4px 0 8px;
}
.conclusions-include input { width: auto; }
.ai-analysis-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #495057; }
/* ---- Nawigacja panelu admina (zakladki-pigulki w naglowku) ---- */
.admin-nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.admin-nav a {
padding: 8px 14px; text-decoration: none; color: #556070; font-size: 13.5px;
font-weight: 600; border-radius: 8px;
}
.admin-nav a.active { color: white; background: var(--brand-dark); }
.admin-nav a:hover:not(.active) { color: var(--brand-dark); background: #eef1f5; }
/* Wyloguj odsuwamy na prawy skraj paska - to akcja innej kategorii niz
nawigacja miedzy sekcjami, wiec nie powinno stac w jednym ciagu z nimi. */
.admin-nav-logout { margin-left: 14px; }
.admin-nav-logout:hover { color: #c0392b !important; background: #fdecea !important; }
/* ---- Podmenu (np. instrukcja: Mozaika / QGIS) ---- */
.sub-nav { display: flex; gap: 8px; margin-bottom: 20px; }
.sub-nav a {
padding: 6px 14px; text-decoration: none; color: #495057; font-size: 13px;
font-weight: 600; background: #eef0f3; border-radius: 20px;
}
.sub-nav a.active { background: var(--brand-dark); color: white; }
.sub-nav a:hover:not(.active) { background: #e2e4e8; }
/* ---- Formularz dodawania/edycji pojedynczej anomalii ---- */
.anomaly-form-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.anomaly-form-grid label {
display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #495057;
}
.anomaly-form-grid input {
padding: 8px; border: 1px solid #c9ccd1; border-radius: 6px; font-size: 14px;
}
.anomaly-form-wide { grid-column: 1 / -1; }
/* ---- Mapka w formularzu dodawania/edycji anomalii ---- */
.anomaly-map-wrap { position: relative; height: 420px; border-radius: 8px; overflow: hidden; }
.anomaly-map-wrap #anomaly-map { height: 100%; }
.anomaly-map-wrap .anomaly-map-controls {
position: absolute; bottom: 10px; left: 10px; z-index: 1000;
background: white; padding: 8px 10px; border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2); font-size: 12px; display: flex; gap: 10px; align-items: center;
}
.anomaly-map-wrap .anomaly-map-controls .control-row { margin-bottom: 0; }
.anomaly-map-wrap .anomaly-map-controls input[type="range"] { width: 90px; }
.anomaly-map-wrap .temp-toolbar { top: 10px; left: 10px; width: 116px; }
/* ---- Lupa na mapie formularza anomalii ---- */
.loupe-toggle-btn {
padding: 4px 10px !important; font-size: 12px !important;
background: #f8f9fa !important; color: var(--brand-dark) !important;
border: 1px solid #c9ccd1 !important; border-radius: 6px !important;
width: auto !important; cursor: pointer;
}
#anomaly-loupe {
position: absolute; top: 10px; right: 10px; z-index: 1001;
width: 220px; height: 220px; border-radius: 10px; overflow: hidden;
border: 2px solid white; box-shadow: 0 2px 12px rgba(0,0,0,0.35);
background: #1f2430;
}
#anomaly-loupe-map { width: 100%; height: 100%; }
/* Krzyzyk w srodku lupy = dokladnie miejsce pod kursorem glownej mapy. */
.loupe-crosshair {
position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
transform: translate(-50%, -50%); pointer-events: none; z-index: 1002;
}
.loupe-crosshair::before, .loupe-crosshair::after {
content: ""; position: absolute; background: rgba(255,255,255,0.95);
box-shadow: 0 0 2px rgba(0,0,0,0.8);
}
.loupe-crosshair::before { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.loupe-crosshair::after { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
/* ---- Znaczniki istniejacych anomalii na mapie formularza ---- */
/* Notatka robocza AI pod formularzem anomalii - wyraznie odrozniona od
tresci raportowych (te laduja w edytowalnych polach formularza). */
.ai-note { color: #6b7280; font-style: italic; }
/* Lista projektow klienta: kod pojedynczego projektu (widoczny tylko dla
posiadacza kodu master) i oznaczenie wygasnietego terminu dostepu. */
/* Wiersz "Obszar anomalii" na formularzu anomalii (anomalia obszarowa -
prostokat rysowany narzedziem "Obszar", naniesiony potem w raporcie). */
.anomaly-area-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anomaly-area-row .btn-secondary { padding: 4px 10px; font-size: 12.5px; }
/* Pasek postepu wgrywania plikow (upload_progress.js) - pod formularzem,
ktory wlasnie wysyla plik. */
.upload-progress { margin-top: 8px; width: 100%; }
.upload-progress-track {
height: 10px; background: #e9edf1; border-radius: 6px; overflow: hidden;
}
.upload-progress-fill {
height: 100%; width: 0; background: var(--brand-dark);
border-radius: 6px; transition: width 0.2s ease;
}
.upload-progress-label { font-size: 12px; color: #495057; margin-top: 4px; }
.upload-progress-error .upload-progress-fill { background: #c62828; }
.upload-progress-error .upload-progress-label { color: #c62828; font-weight: 600; }
/* Po przeslaniu calosci serwer jeszcze przetwarza (konwersja COG /
pakowanie) - pasek dostaje delikatna animacje "oddychania". */
.upload-progress-busy .upload-progress-fill { animation: upload-breathe 1.2s ease-in-out infinite; }
@keyframes upload-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* Legenda skali temperatur na mapie klienta - OPISUJE oryginalne kolory
kafelkow IR (kalibracja empiryczna, patrz viewer.js i thermal_scale.py).
Prawy dolny rog - z dala od okna przelacznika/przezroczystosci IR. */
.thermal-legend {
position: absolute; bottom: 16px; right: 12px; z-index: 900;
background: rgba(255, 255, 255, 0.92); padding: 8px 9px;
border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.thermal-legend-bar {
width: 14px; height: 110px;
border: 1px solid #cfd6df; border-radius: 3px;
}
.thermal-legend-label { font-size: 11px; font-weight: 700; color: #374151; }
/* Panel propozycji AI (formularz anomalii): edytowalna propozycja
Typ/Kategoria/CoA/Zalecenie, ktora inspektor akceptuje przyciskiem
"Zastosuj do formularza" - nic nie wskakuje do pol automatycznie. */
.ai-proposal {
margin-top: 10px; padding: 12px 14px; border: 1px solid #cfd6df;
border-left: 3px solid var(--brand-dark); border-radius: 8px;
background: #f8fafc; display: flex; flex-direction: column; gap: 8px;
}
.ai-proposal-title { font-weight: 700; font-size: 13px; color: #374151; }
.ai-proposal label {
display: flex; flex-direction: column; gap: 4px;
font-size: 12.5px; color: #495057; font-weight: 600;
}
.ai-proposal textarea, .ai-proposal input {
font-weight: 400; padding: 8px; border: 1px solid #c9ccd1;
border-radius: 6px; font-size: 13.5px; font-family: inherit;
}
.ai-proposal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-proposal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.existing-anomaly-marker {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: white; font-size: 11px; font-weight: 700;
border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
box-sizing: border-box;
}
.ai-describe-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ai-describe-row input[type="text"] {
flex: 1; min-width: 260px; padding: 8px; border: 1px solid #c9ccd1; border-radius: 6px; font-size: 13px;
}
.anomaly-form-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-secondary {
background: white; color: var(--brand-dark); border: 1px solid #c9ccd1 !important;
}
.btn-secondary:hover { background: #f8f9fa; }
.success-banner { padding: 10px 14px; margin-bottom: 16px;
}
.admin-comment { padding: 10px 0; border-bottom: 1px solid #f1f2f4; }
.admin-comment-meta { font-size: 13px; margin-bottom: 4px; }
.admin-comment-text { font-size: 13px; color: #374151; white-space: pre-wrap; margin: 0 0 6px; }
.ai-suggestion-thumb { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; display: block; }
.inline-email-form { display: flex; gap: 6px; min-width: 220px; }
.inline-email-form input {
padding: 5px 8px; border: 1px solid #c9ccd1; border-radius: 6px; font-size: 13px; flex: 1; min-width: 0;
}
.inline-email-form button { padding: 5px 10px; font-size: 12px; flex-shrink: 0; }
/* ---- Ramka z instrukcja (konwerter termiczny) ---- */
.callout { border: 1px solid #ffddb8; border-radius: 8px;
padding: 14px 16px; margin: 14px 0; font-size: 13px;
}
.callout strong { display: block; margin-bottom: 6px; color: var(--brand-dark); }
.callout ol { margin: 8px 0; padding-left: 20px; }
.callout li { margin-bottom: 4px; }
.projects-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.projects-table th, .projects-table td {
text-align: left; padding: 9px 10px; border-bottom: 1px solid #eef0f3; vertical-align: top;
}
.projects-table th { text-transform: uppercase; letter-spacing: 0.04em; background: #f8f9fb; border-bottom: 1px solid #e2e4e8;
}
.projects-table tbody tr:hover { background: #f8f9fb; }
.status { padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.status-ready { background: #d4edda; color: #155724; }
.status-processing { background: #fff3cd; color: #856404; }
.status-error { background: #f8d7da; color: #721c24; }
.status-empty { background: #e2e4e8; color: #555; }
.error-detail { color: #c0392b; font-size: 11px; margin-top: 4px; max-width: 300px; }
.upload-form { flex-direction: column; align-items: flex-start; gap: 6px; }
.upload-form label { font-size: 12px; }
.hint { font-size: 12px; color: #6b7280; }
/* ---- Viewer ---- */
.viewer-body { margin: 0; height: 100vh; overflow: hidden; }
#topbar {
position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
background: var(--brand-dark); color: white; padding: 10px 16px;
display: flex; justify-content: space-between; align-items: center;
font-size: 14px;
}
.logout-link { color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; }
#map { position: absolute; top: 42px; bottom: 0; left: 0; right: 0; }
.report-view-body { position: absolute; top: 42px; bottom: 0; left: 0; right: 0; background: #525659; }
/* Strona podgladu pliku (/preview) - licznik pozycji, wyszarzone strzalki
na koncach listy i wysrodkowany podglad obrazow. */
.preview-counter { color: rgba(255,255,255,0.85); font-size: 13px; padding: 0 4px; white-space: nowrap; }
.preview-nav-disabled { opacity: 0.4; cursor: default; }
.preview-image-wrap {
display: flex; align-items: center; justify-content: center;
height: 100%; overflow: auto; padding: 20px; box-sizing: border-box;
}
.preview-image-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.report-pdf-embed { width: 100%; height: 100%; border: none; }
.report-view-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; color: white; text-align: center; gap: 4px;
}
.report-view-empty .hint { color: #d0d0d0; }
.topbar-left { display: flex; align-items: center; }
.topbar-right { display: flex; align-items: center; gap: 4px; }
.project-date { font-weight: 400; color: rgba(255,255,255,.7); font-size: 12px; margin-left: 4px; }
.project-switcher {
padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.35);
background: var(--brand-dark); color: white; font-size: 13px; margin-right: 10px; max-width: 220px;
}
#controls {
position: absolute; bottom: 20px; left: 20px; z-index: 1000;
background: white; padding: 12px 16px; border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2); font-size: 13px;
}
.control-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.control-row input[type="range"] { width: 140px; }
/* Dyskretna adnotacja pod przelacznikiem warstw - male, szare, waskie. */
.layers-note {
margin: 6px 0 0; max-width: 230px; font-size: 10.5px; line-height: 1.45;
color: #9ca3af; border-top: 1px solid #eef0f3; padding-top: 6px;
}
/* ---- Menu pobierania ortomozaiki (w naglowku mapy) ---- */
.download-menu { position: relative; display: inline-block; }
.download-menu summary {
list-style: none; cursor: pointer; user-select: none;
}
.download-menu summary::-webkit-details-marker { display: none; }
.download-menu[open] summary { background: rgba(255,255,255,0.12); }
.download-menu-list {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 1002;
background: white; border-radius: 8px; min-width: 260px;
box-shadow: 0 4px 18px rgba(0,0,0,0.25); padding: 6px 0;
display: flex; flex-direction: column;
}
.download-menu-group {
padding: 8px 14px 4px; font-size: 11px; font-weight: 700; color: #6b7280;
text-transform: uppercase; letter-spacing: 0.03em;
}
.download-menu-list a {
padding: 8px 14px; color: #1f2430; text-decoration: none; font-size: 13px;
white-space: nowrap;
}
.download-menu-list a:hover { background: #f1f2f4; color: var(--brand-color); }
.download-menu-size { color: #6b7280; font-size: 12px; }
/* ---- Panel boczny z lista anomalii ---- */
.anomaly-toggle-btn {
position: absolute; top: 56px; right: 16px; z-index: 1000;
background: var(--brand-dark); color: white; border: none; padding: 8px 14px;
border-radius: 6px; font-size: 13px; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.anomaly-toggle-btn:hover { background: color-mix(in srgb, var(--brand-dark) 88%, white); }
.temp-toolbar {
position: absolute; top: 130px; left: 16px; z-index: 1000;
background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
padding: 8px; display: flex; flex-direction: column; gap: 6px; width: 132px;
}
.temp-toolbar-title {
font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase;
letter-spacing: 0.03em; padding: 2px 4px 4px;
}
.temp-tool-btn {
display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none;
border-radius: 6px; background: #f8f9fa; cursor: pointer; font-size: 13px;
color: var(--brand-dark); text-align: left; width: 100%;
}
.temp-tool-btn:hover { background: #eef0f3; }
.temp-tool-btn.active { background: var(--brand-accent); color: var(--brand-accent-text); }
.temp-tool-icon { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.temp-tool-clear { color: #c0392b; }
.temp-tool-clear:hover { background: #fdecea; }
/* ---- Podpowiedz przy aktywnym narzedziu temperatury ----
Pasek na dole ekranu, ktory mowi WPROST, co teraz zrobic - bez tego
uzytkownik musi zgadywac, ze prostokat rysuje sie przeciaganiem. */
.temp-hint {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
z-index: 1000; background: rgba(31, 36, 48, 0.92); color: white;
padding: 9px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
box-shadow: 0 2px 12px rgba(0,0,0,0.3); pointer-events: none;
max-width: calc(100vw - 32px); text-align: center;
}
/* ==========================================================================
Samouczek w trybie demonstracyjnym (patrz static/js/tour.js)
========================================================================== */
/* "Reflektor": przezroczysty prostokat nad omawianym elementem. Cala reszta
ekranu jest przyciemniona OGROMNYM cieniem dookola niego, wiec element
pozostaje widoczny, a my nie musimy w ogole ruszac jego stylow (dawna
wersja nadawala celowi position/z-index i psula uklad - patrz tour.js). */
.tour-overlay {
position: fixed; z-index: 2000; pointer-events: none;
border-radius: 8px;
box-shadow: 0 0 0 9999px rgba(15, 20, 30, 0.55);
transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tour-overlay-focused { outline: 3px solid var(--brand-color); }
.tour-bubble {
position: fixed; z-index: 2001; width: 340px; max-width: calc(100vw - 24px);
background: white; border-radius: 12px; padding: 18px 20px 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.tour-step-counter {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--brand-color); margin-bottom: 6px;
}
.tour-bubble h3 { margin: 0 0 8px; font-size: 16px; color: var(--brand-dark); }
.tour-bubble p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: #374151; }
.tour-close {
position: absolute; top: 8px; right: 10px; background: none; border: none;
font-size: 22px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 2px 6px;
}
.tour-close:hover { color: var(--brand-dark); }
.tour-buttons {
display: flex; justify-content: space-between; align-items: center;
gap: 10px; flex-wrap: wrap;
}
.tour-buttons-right { display: flex; gap: 8px; margin-left: auto; }
.tour-btn {
padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
cursor: pointer; border: none;
}
.tour-prev { background: #eef0f3; color: #374151; }
.tour-prev:hover { background: #e2e4e8; }
/* "Pomiń" celowo wyglada mniej wyraziscie niz "Dalej" - ma byc latwe do
znalezienia, ale nie przyciagac wzroku bardziej niz sciezka glowna. */
.tour-skip {
background: none; color: #6b7280; padding: 8px 4px; font-weight: 500;
text-decoration: underline;
}
.tour-skip:hover { color: var(--brand-dark); }
.tour-next { background: var(--brand-color); color: white; }
.tour-next:hover { background: color-mix(in srgb, var(--brand-color) 82%, black); }
.tour-replay-btn { cursor: pointer; font-family: inherit; border: 1px solid rgba(255,255,255,0.35); }
@media (max-width: 640px) {
.tour-bubble { width: calc(100vw - 24px); padding: 16px; }
}
/* ---- Znaczniki skrajnych temperatur w zaznaczonym obszarze ----
Trojkat w gore = najcieplejszy piksel, w dol = najzimniejszy. Rysowane
czystym CSS (bez plikow graficznych), kotwiczone srodkiem na pikselu. */
/* Kontener ma ZEROWY rozmiar i siedzi dokladnie na wskazanym pikselu
(divIcon: iconSize [0,0], iconAnchor [0,0]). Trojkat i etykieta sa
pozycjonowane wzgledem niego absolutnie.
Wczesniej byl to flexbox z transform: translate(-50%,-50%), ktory centrowal
CALY znacznik (trojkat + etykieta, ok. 70 px szerokosci) na punkcie - przez
co sam trojkat wypadal ~26 px w lewo od faktycznego piksela. Przy duzym
oddaleniu zaznaczony obszar ma na ekranie kilkadziesiat pikseli, wiec
trojkat potrafil wyladowac poza nim. Teraz na pikselu stoi WIERZCHOLEK
trojkata, a etykieta wisi obok i nie wplywa na jego pozycje. */
.extreme-marker { position: absolute; width: 0; height: 0; }
/* Trojkat jest SVG (patrz extremeArrowSvg w viewer.js) - czarny kontur
rysuje sam SVG atrybutem stroke, tutaj tylko cien pod niego. */
/* SVG ma 18x16, wierzcholek w punkcie (9,1) dla trojkata w gore i (9,15) dla
trojkata w dol - przesuwamy go tak, zeby ten wierzcholek wypadl w (0,0),
czyli dokladnie na wskazanym pikselu. */
.extreme-arrow {
position: absolute; left: -9px; display: block;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.extreme-marker-max .extreme-arrow { top: -1px; }
.extreme-marker-min .extreme-arrow { top: -15px; }
.extreme-label {
position: absolute; left: 13px; transform: translateY(-50%);
white-space: nowrap;
font-size: 11px; font-weight: 700; color: white; padding: 1px 6px;
border-radius: 10px; border: 1px solid rgba(0,0,0,0.85);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* Etykieta na wysokosci srodka trojkata (ten rozciaga sie w dol dla "max"
i w gore dla "min"), zeby nie zaslaniala samego wierzcholka. */
.extreme-marker-max .extreme-label { top: 7px; background: #c62828; }
.extreme-marker-min .extreme-label { top: -7px; background: #1565c0; }
.anomaly-panel {
position: absolute; top: 42px; bottom: 0; right: 0; width: 320px;
max-width: 90vw; background: white; z-index: 1001;
box-shadow: -2px 0 10px rgba(0,0,0,0.15);
transform: translateX(100%);
display: flex; flex-direction: column;
}
.anomaly-panel.open { transform: translateX(0); }
.anomaly-panel-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; border-bottom: 1px solid #e2e4e8; font-weight: 600;
color: var(--brand-dark); flex-shrink: 0;
}
.anomaly-panel-close-btn {
background: none; border: none; font-size: 22px; line-height: 1;
cursor: pointer; color: #6b7280;
}
.anomaly-panel-body { overflow-y: auto; flex: 1; padding: 8px 0; }
.anomaly-group-header {
padding: 8px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.03em; color: #495057; border-left: 4px solid; margin-top: 6px;
background: #f8f9fa;
}
.anomaly-item {
display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px;
cursor: pointer; border-bottom: 1px solid #f1f2f4; font-size: 13px;
}
.anomaly-item:hover { background: #f8f9fa; }
.anomaly-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.highlight-marker-pulse {
width: 20px; height: 20px; border-radius: 50%;
background: rgba(var(--brand-color-rgb), 0.5); border: 3px solid var(--brand-color);
animation: highlight-pulse 1.6s ease-out infinite;
}
@keyframes highlight-pulse {
0% { transform: scale(0.6); box-shadow: 0 0 0 0 rgba(var(--brand-color-rgb), 0.5); }
70% { transform: scale(1); box-shadow: 0 0 0 14px rgba(var(--brand-color-rgb), 0); }
100% { transform: scale(0.6); box-shadow: 0 0 0 0 rgba(var(--brand-color-rgb), 0); }
}
.anomaly-item-text strong { display: block; color: #1f2430; }
.anomaly-item-sub { color: #6b7280; font-size: 12px; margin-top: 2px; }
/* Znacznik rozpoznanego wzorca (patrz app/patterns.py + matchPattern() w
viewer.js) - kropkowane podkreslenie sygnalizuje "najedz, zeby zobaczyc
wyjasnienie", tresc dymka to natywny atrybut title przegladarki. */
.anomaly-pattern-tag { text-decoration: underline dotted; cursor: help; }
.anomaly-comments { margin-top: 8px; border-top: 1px solid #f1f2f4; padding-top: 8px; }
.anomaly-comment { margin-bottom: 8px; font-size: 12px; }
.anomaly-comment strong { color: #1f2430; }
.anomaly-comment-date { color: #9ca3af; font-size: 11px; margin-left: 6px; }
.anomaly-comment p { margin: 3px 0 0; color: #374151; white-space: pre-wrap; }
.anomaly-comment-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.anomaly-comment-form input, .anomaly-comment-form textarea {
padding: 6px 8px; border: 1px solid #d7dae0; border-radius: 6px; font-size: 12px; font-family: inherit;
}
.anomaly-comment-form textarea { resize: vertical; min-height: 50px; }
.anomaly-comment-form button {
align-self: flex-start; padding: 6px 12px; background: var(--brand-dark); color: white;
border: none; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.anomaly-comment-form button:hover { background: var(--brand-color); }
.anomaly-comment-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.comment-status { display: block; margin-top: 2px; }
/* ---- Pasek zajetosci dysku (zakladka Ustawienia) ---- */
.disk-bar {
height: 14px; background: #eef0f3; border-radius: 7px; overflow: hidden;
border: 1px solid #e2e4e8;
}
.disk-bar-fill { height: 100%; background: var(--brand-color); border-radius: 7px 0 0 7px; min-width: 2px; }
.disk-bar-warn { background: #c0392b; }
/* ---- Strona projektu: karty w siatce dwoch kolumn ----
Dawniej wszystkie karty staly jedna pod druga - strona byla bardzo
dluga. Male karty-ustawienia (samouczek, wygasniecie linku itd.) siedza
teraz parami obok siebie (klasa card-half), a karty z tabelami/duzymi
formularzami zajmuja domyslnie cala szerokosc. */
.project-cards {
display: grid; gap: 18px; align-items: start;
}
.project-cards .card { margin-bottom: 0; grid-column: 1 / -1; }
.project-cards .card-half { grid-column: auto / span 1; }
/* Naglowek grupy kart ("Ustawienia projektu", "Dane inspekcji"...) -
pelna szerokosc, maly kapitalikowy tytul z linia, oddziela sekcje. */
.cards-group-title {
grid-column: 1 / -1; margin: 10px 0 -6px; padding-bottom: 6px;
font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase;
border-bottom: 2px solid #dfe3e9;
}
.cards-group-title:first-child { margin-top: 0; }
@media (max-width: 900px) {
.project-cards .card-half { grid-column: 1 / -1; }
}
/* ---- Formularz danych inspekcji ---- */
.meta-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: end; }
.meta-form label {
display: flex; flex-direction: column; gap: 4px; font-size: 12px;
color: #495057; font-weight: 600;
}
.meta-form input[type="text"], .meta-form input[type="date"] {
padding: 8px; border: 1px solid #c9ccd1; border-radius: 6px;
font-size: 14px; font-weight: normal; color: #1f2430;
}
.meta-submit { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 720px) { .meta-form { grid-template-columns: 1fr; } }
/* ---- Przycisk raportu w widoku klienta ---- */
.report-link {
color: white; text-decoration: none; font-size: 13px;
background: var(--brand-color); padding: 6px 12px; border-radius: 6px; margin-right: 14px;
}
.report-link:hover { background: color-mix(in srgb, var(--brand-color) 80%, black); }
.projects-link {
color: white; text-decoration: none; font-size: 13px;
background: transparent; padding: 6px 12px; border-radius: 6px; margin-right: 10px;
border: 1px solid rgba(255,255,255,0.35);
}
.projects-link:hover { background: rgba(255,255,255,0.12); }
/* ---- Wyszukiwanie i sortowanie tabeli projektow ---- */
.projects-table th.sortable {
cursor: pointer; user-select: none; white-space: nowrap;
}
.projects-table th.sortable:hover { color: var(--brand-color); }
.projects-table th.sortable[data-sort-active="asc"]::after { content: " \25B2"; font-size: 10px; }
.projects-table th.sortable[data-sort-active="desc"]::after { content: " \25BC"; font-size: 10px; }
.delete-btn {
background: #c0392b; padding: 6px 12px; font-size: 13px; white-space: nowrap;
}
.delete-btn:hover { background: #96281b; }
/* ---- Zaznaczanie wielu projektow (operacje zbiorcze) ---- */
.check-col { width: 34px; text-align: center; }
.check-col input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.bulk-bar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid #f5c6bd; border-radius: 8px;
padding: 10px 14px; margin-bottom: 12px;
}
.bulk-bar #bulk-count { font-size: 13px; font-weight: 600; }
/* ---- Kody dostepu: wybor zasiegu ---- */
.grant-meta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.grant-meta-row label { flex: 1; min-width: 240px; }
.scope-columns { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.scope-box {
flex: 1; min-width: 260px; background: #f8f9fa;
border: 1px solid #e2e4e8; border-radius: 8px; padding: 12px 14px;
}
.scope-box h3 { font-size: 13px; margin: 0 0 4px; color: var(--brand-dark); }
.scope-list { max-height: 260px; overflow-y: auto; margin-top: 8px; }
.scope-item {
display: flex; align-items: flex-start; gap: 8px; padding: 5px 2px;
font-size: 13px; cursor: pointer; border-bottom: 1px solid #eef0f3;
}
.scope-item:last-child { border-bottom: none; }
.scope-item:hover { background: #eef0f3; }
.scope-item input { width: auto; margin-top: 2px; flex-shrink: 0; }
.scope-client { color: #6b7280; }
/* ---- Strona instrukcji ---- */
.steps-list { padding-left: 22px; line-height: 1.6; }
.steps-list li { margin-bottom: 10px; }
.steps-list pre {
background: #1f2430; color: #e2e4e8; padding: 12px 14px; border-radius: 6px;
overflow-x: auto; margin: 8px 0; font-size: 12px; line-height: 1.5;
}
.steps-list code, .card p code, .card h2 code {
background: #eef0f3; padding: 1px 5px; border-radius: 4px; font-size: 0.92em;
}
.steps-list pre code { background: none; padding: 0; }
/* ---- Galeria zdjec termowizyjnych falownikow ---- */
.photo-gallery {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px; margin-top: 14px;
}
.photo-gallery-item {
border: 1px solid #e2e4e8; border-radius: 8px; overflow: hidden;
background: #fff; display: flex; flex-direction: column;
}
.photo-gallery-item img {
width: 100%; height: 100px; object-fit: cover; display: block; background: #eef0f3;
}
.photo-gallery-name {
font-size: 11px; padding: 6px 8px; color: #495057; word-break: break-all; flex: 1;
}
.photo-gallery-item form { padding: 0 8px 8px; }
.photo-gallery-item .delete-btn { width: 100%; padding: 4px; font-size: 11px; }
.photo-gallery-temp-form { display: flex; gap: 4px; }
.photo-gallery-temp-form input {
width: 100%; padding: 4px 6px; font-size: 11px; border: 1px solid #c9ccd1;
border-radius: 4px; min-width: 0;
}
.photo-gallery-temp-form button {
padding: 4px 8px; font-size: 11px; flex-shrink: 0;
}
.actions-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.action-link {
display: inline-block; padding: 6px 12px; background: var(--brand-dark); color: white;
text-decoration: none; border-radius: 6px; font-size: 13px; white-space: nowrap;
}
.action-link:hover { background: color-mix(in srgb, var(--brand-dark) 88%, white); }
/* ==========================================================================
Responsywnosc mobilna (telefony, tablety w pionie)
==========================================================================
Cala reszta pliku byla pisana z myslą o desktopie - ta sekcja dopasowuje
WIDOK KLIENTA (mapa, panel anomalii, logowanie, galeria zdjec), bo to tam
ktos realnie uzyje telefonu w terenie. Panel admina zostaje bez zmian -
to gesty uklad formularzy/tabel, z ktorego korzysta sie z komputera. */
@media (max-width: 640px) {
/* --- Topbar: zawijanie zamiast wychodzenia poza ekran/nakladania sie --- */
#topbar { flex-wrap: wrap; padding: 8px 12px; row-gap: 6px; }
.topbar-left { width: 100%; }
.project-name { font-size: 13px; }
.topbar-right {
width: 100%; justify-content: flex-start; flex-wrap: nowrap;
overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.topbar-right > * { flex-shrink: 0; }
.project-switcher { max-width: 140px; }
/* Topbar zajmuje teraz ~2 linijki zamiast jednej (42px na desktopie) -
mapa i plywajace przyciski musza zejsc nizej, zeby nic nie chowalo sie
pod naglowkiem. Wartosci to bezpieczny margines - jesli na prawdziwym
telefonie topbar wyjdzie odrobine wyzszy/nizszy niz zakladam, to latwe
do doszlifowania o kilka px. */
#map { top: 78px; }
.report-view-body { top: 78px; }
.anomaly-toggle-btn { top: 86px; right: 10px; }
.temp-toolbar { top: 86px; left: 10px; }
/* --- Wieksze cele dotykowe - łatwiej trafic palcem --- */
.anomaly-toggle-btn { padding: 10px 14px; font-size: 14px; }
.control-row { min-height: 28px; }
.control-row input[type="range"] { width: 110px; }
/* --- Panel anomalii na cala szerokosc ekranu zamiast waskiej wstazki --- */
.anomaly-panel { width: 100%; max-width: 100%; }
/* --- Menu pobierania: topbar-right przewija sie w poziomie (overflow-x),
co przycieloby absolutnie pozycjonowana liste - na telefonie lista
jest wiec przypieta do okna (fixed), pod dwuliniowym topbarem. --- */
.download-menu-list { position: fixed; left: 10px; right: 10px; top: 84px; min-width: 0; }
/* --- Podpowiedz narzedzia: na waskim ekranie panel #controls (lewy dolny
rog) siegalby az pod srodek, wiec podnosimy podpowiedz ponad niego. --- */
.temp-hint { bottom: 132px; font-size: 12px; padding: 8px 14px; }
/* --- Pola formularzy min. 16px - ponizej tego iOS Safari automatycznie
dozoomowuje przy kliknieciu w pole, co jest irytujace i myli. --- */
.anomaly-comment-form input, .anomaly-comment-form textarea { font-size: 16px; }
.ai-describe-row input[type="text"] { font-size: 16px; }
/* --- Logowanie: bezpieczny margines na waskich ekranach (np. 320px) --- */
/* --- Zabezpieczenie: jakakolwiek tabela (np. lista projektow klienta z
kodem master) przewija sie w poziomie zamiast wychodzic poza ekran. --- */
.projects-table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 400px) {
/* Bardzo waskie telefony (np. iPhone SE) - jeszcze ciasniej */
.topbar-right a, .topbar-right .logout-link { font-size: 12px; padding: 6px 8px; }
.project-switcher { max-width: 100px; font-size: 12px; }
}
/* ============ Kalibracja RGB <-> IR (admin) ============ */
#calib-map { border-radius: 8px; margin-top: 12px; border: 1px solid #ddd; }
.calib-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.calib-view-group { display: flex; gap: 6px; align-items: center; margin-right: 10px; color: #555; }
.calib-view-btn { background: #f0f0f0; color: #333; border: 1px solid #ccc; }
.calib-view-btn.active { background: var(--brand-color); color: #fff; border-color: var(--brand-color); }
.calib-highlight { color: var(--brand-color); font-weight: 600; }
.calib-pt {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: #fff;
border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.calib-pt-ir { background: #d33; }
.calib-pt-rgb { background: #1565c0; }
.calib-pairs { margin-top: 12px; }
.calib-pairs-table { border-collapse: collapse; }
.calib-pairs-table th, .calib-pairs-table td { padding: 6px 12px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
/* ============ Inspekcja stacji falownikowych (admin) ============ */
.inv-progress { font-size: 15px; font-weight: 600; color: var(--brand-color); }
.inv-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; position: sticky; top: 0; z-index: 5; }
.inv-station-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px; }
.inv-station-name { font-size: 17px; font-weight: 700; }
.inv-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.inv-desc { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 10px; }
.inv-desc input { flex: 1; }
.inv-photo { border-top: 1px solid #e5e7eb; padding-top: 12px; margin-top: 12px; }
.inv-photo-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 8px; }
.inv-photo-body { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.inv-ir-wrap { position: relative; width: 560px; max-width: 100%; user-select: none; }
.inv-ir-wrap img { width: 100%; display: block; }
.inv-rgb { width: 420px; max-width: 100%; }
.inv-draw-rect { position: absolute; border: 2px dashed #ffd600; background: rgba(255, 214, 0, 0.12); pointer-events: none; }
.inv-zone-row.inv-drawing { outline: 2px solid #ffd600; }
.inv-zones { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 13px; }
.inv-zones th, .inv-zones td { padding: 5px 6px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.inv-label { width: 100%; min-width: 200px; }
.inv-ai-comment { max-width: 260px; font-size: 11.5px; }
.inv-coa { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #fff; }
.inv-coa-1 { background: #2e7d32; }
.inv-coa-2 { background: #e65100; }
.inv-coa-3 { background: #c62828; }
.inv-conclusions { width: 100%; font-family: inherit; font-size: 14px; }
.inv-actions button { width: auto; }
.inv-actions { padding-top: 10px; padding-bottom: 10px; }
.inv-zones-wrap { overflow-x: auto; }
.inv-box { white-space: nowrap; }
.inv-box input { width: 54px; padding: 3px 4px; }
.inv-box .inv-draw-btn { width: auto; padding: 3px 8px; margin-left: 4px; }
.inv-zones select, .inv-zones input[type=text] { padding: 3px 4px; }
.sg-ref-sel { min-width: 88px; }
/* ============ Termowizja rozdzielnic: przeglad (admin) ============ */
.sg-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 16px; }
.sg-meta label, .sg-wide { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.sg-wide { grid-column: 1 / -1; margin-top: 8px; }
.sg-wide textarea, .sg-photo-comment textarea { width: 100%; font-family: inherit; font-size: 14px; }
.sg-photo-comment { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-top: 8px; }
.sg-group { width: 170px; }
.sg-comment-input { width: 240px; font-family: inherit; font-size: 12.5px; }
.inv-zones tr.sg-anom td { background: #fdecea; }
.sg-prio { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 12px; text-align: center; }
.sg-prio-1 { background: #c62828; }
.sg-prio-2 { background: #ef6c00; }
.sg-prio-3 { background: #f9a825; color: #3b2f00; }
.sg-prio-4 { background: #2e7d32; }
.sg-prio-obs { background: #546e7a; }
.sg-comment { border-left: 3px solid #cbd5e1; padding: 4px 10px; margin: 6px 0; }
.sg-comment p { margin: 3px 0; white-space: pre-wrap; }
.sg-comment-admin { border-left-color: var(--brand-color); background: rgba(var(--brand-color-rgb), 0.06); }
.sg-comment-author { font-weight: 700; }
.sg-reply { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.sg-reply textarea { flex: 1; font-family: inherit; }
.sg-mini, .card .sg-mini { padding: 3px 10px; font-size: 12px; width: auto; }
/* ============ Termowizja rozdzielnic: widok klienta ============ */
.sg-client-body { overflow-y: auto; height: auto; background: #f3f4f6; }
.sg-client { max-width: 1120px; margin: 0 auto; padding: 18px 16px 60px; }
.sg-hero h1 { margin: 4px 0; font-size: 26px; color: var(--brand-dark); }
.sg-kicker { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 700; color: var(--brand-color); margin: 0; }
.sg-card { background: #fff; padding: 16px 18px; margin: 14px 0; }
.sg-card h2 { margin-top: 0; font-size: 18px; color: var(--brand-dark); }
.sg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.sg-stat { border-radius: 8px; padding: 10px 12px; background: #f6f7f9; border-top: 4px solid #cbd5e1; display: flex; flex-direction: column; gap: 2px; }
.sg-stat-n { font-size: 28px; font-weight: 800; line-height: 1; }
.sg-stat small { color: #6b7280; font-size: 11.5px; }
.sg-stat-1 { border-top-color: #c62828; } .sg-stat-2 { border-top-color: #ef6c00; }
.sg-stat-3 { border-top-color: #f9a825; } .sg-stat-4 { border-top-color: #2e7d32; } .sg-stat-obs { border-top-color: #546e7a; }
.sg-table-wrap { overflow-x: auto; }
.sg-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.sg-table th { text-align: left; background: var(--brand-dark); color: #fff; padding: 6px 8px; font-weight: 600; }
.sg-table td { padding: 6px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.sg-table tr.sg-anom td { background: #fdecea; }
.sg-toc ol { columns: 2; margin: 0; padding-left: 20px; }
.sg-board-title { margin: 28px 4px 4px; font-size: 20px; color: var(--brand-dark); border-bottom: 2px solid var(--brand-color); padding-bottom: 4px; }
.sg-board-loc { font-size: 15px; font-weight: normal; color: #555; }
.sg-thermo-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.sg-thermo-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.sg-thermo-imgs img { width: 100%; display: block; border-radius: 4px; }
.sg-thermo-imgs .sg-vis { margin-top: 8px; }
.sg-thermo-comment { font-weight: 600; margin-top: 0; }
.sg-meas { font-size: 12.5px; }
.sg-thread { margin-top: 12px; border-top: 1px solid #eee; padding-top: 8px; }
.sg-thread-form summary { cursor: pointer; color: var(--brand-color); font-weight: 600; font-size: 13.5px; }
.sg-thread-form input, .sg-thread-form textarea { display: block; width: 100%; margin: 6px 0; padding: 7px; border: 1px solid #c9ccd1; border-radius: 6px; font-family: inherit; font-size: 16px; box-sizing: border-box; }
.sg-thread-form button { padding: 7px 14px; background: var(--brand-dark); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
@media (max-width: 760px) {
.sg-thermo-body { grid-template-columns: 1fr; }
.sg-toc ol { columns: 1; }
.sg-hero h1 { font-size: 21px; }
}
.sg-cost { margin: 4px 0 10px; font-size: 14px; }
/* ============ Termowizja rozdzielnic: edytor pojedynczego termogramu ============ */
.sg-board-input { width: 100%; min-width: 220px; }
.sg-ed-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; position: sticky; }
.sg-ed-nav { display: flex; gap: 8px; align-items: center; }
.sg-ed-nav select { max-width: 380px; }
.sg-nav-btn { display: inline-block; padding: 7px 14px; border-radius: 6px; background: var(--brand-dark); color: #fff; text-decoration: none; font-weight: 600; }
.sg-nav-btn.sg-disabled { opacity: 0.35; }
.sg-status { font-size: 13px; padding: 4px 10px; border-radius: 10px; background: #e5e7eb; }
.sg-status.sg-ok { background: #dcfce7; color: #166534; }
.sg-status.sg-busy { background: #fef9c3; color: #854d0e; }
.sg-status.sg-err { background: #fee2e2; color: #991b1b; }
.sg-status.sg-dirty { background: #ffedd5; color: #9a3412; font-weight: 600; }
.sg-save-bar { display: flex; align-items: center; gap: 8px; }
.sg-save-bar button { padding: 7px 14px; }
.sg-save-bar button:disabled { opacity: 0.4; cursor: default; }
.sg-ed-head { display: flex; flex-wrap: wrap; align-items: baseline; }
.sg-ed-head h1 { margin: 0; }
.sg-ed-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 8px 0 12px; }
.sg-ed-tools { display: flex; flex-wrap: wrap; align-items: center; }
.sg-editor { position: relative; user-select: none; touch-action: none; line-height: 0; }
.sg-editor img { width: 100%; display: block; }
.sg-editor.sg-new-mode { cursor: crosshair; }
.sg-box { position: absolute; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.55); cursor: move; box-sizing: border-box; }
.sg-box-anom { border-color: #ff3b3b; }
.sg-box-obs { border-color: #7dd3fc; }
.sg-box-new { border-style: dashed; border-color: #ffd600; background: rgba(255, 214, 0, 0.15); }
.sg-box-label { position: absolute; left: -2px; top: -17px; background: #141414; color: #fff; font: 700 11px/15px sans-serif; padding: 0 4px; white-space: nowrap; pointer-events: none; }
.sg-box-del { position: absolute; right: -9px; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #141414; color: #fff; font: 700 12px/16px sans-serif; text-align: center; cursor: pointer; }
.sg-box-handle { position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; background: #fff; border: 1px solid #333; cursor: nwse-resize; }
/* Punkt Tmax obszaru: czerwony trojkat w cienkiej bialej obwodce - ten sam
znacznik co na obrazie termogramu w PDF i na liniach Lx. */
.sg-box-hot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; background: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.sg-ed-vis { width: 100%; border-radius: 4px; }
.sg-ai { margin-top: 12px; }
.sg-ai h2 { margin: 0 0 6px; }
.sg-ai textarea { width: 100%; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.sg-ai button { margin-top: 6px; }
.sg-download { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
border: 2px solid var(--brand-color); background: rgba(var(--brand-color-rgb), 0.05); }
.sg-download-text { flex: 1 1 420px; }
.sg-download-text h2 { margin-bottom: 6px; }
.sg-download-text p { margin: 4px 0; }
.sg-download-note { color: #374151; font-size: 14px; }
.sg-download-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 10px;
background: var(--brand-color); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none;
box-shadow: 0 3px 10px rgba(var(--brand-color-rgb), 0.35); white-space: nowrap; }
.sg-download-btn:hover { filter: brightness(1.08); }
.sg-download-icon { font-size: 20px; }
@media (max-width: 760px) { .sg-download-btn { width: 100%; justify-content: center; } }
/* Kolejnosc zalacznikow (strzalki w tabeli na stronie projektu) */
.att-order { white-space: nowrap; width: 1%; }
.att-move { display: inline-flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
.att-move .att-move-btn { width: auto; min-width: 0; margin: 0; padding: 2px 9px; font-size: 13px; line-height: 1.3; }
.att-move-btn:disabled { opacity: 0.3; cursor: default; }
.att-fixed td { background: #f8fafc; }
/* Tabele opisowe w instrukcjach - tekst ma sie zawijac */
.projects-table.instr-table { display: table; width: 100%; white-space: normal; }
.instr-table th, .instr-table td { white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
.instr-table td:first-child { width: 28%; }
/* Badanie budynku (elewacje): klasy istotnosci anomalii i obszar odniesienia */
.bd-cls { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 12px; text-align: center; }
.bd-cls-3 { background: #c62828; }
.bd-cls-2 { background: #ef6c00; }
.bd-cls-1 { background: #f9a825; color: #3b2f00; }
.sg-box-ref { border-style: dashed; border-color: #00e676; }
.sg-box-cls3 { border-color: #ff3b3b; }
.sg-box-cls2 { border-color: #ff9628; }
.sg-box-cls1 { border-color: #ffe13c; }
tr.bd-ref td { background: #e8f5e9; }
/* Linie pomiarowe Lx w edytorze termogramu (rozdzielnice): warstwa SVG nad
termogramem, konce przeciagalne, znaczniki Tmax (czerwony) i Tmin (niebieski). */
.sg-lines-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.sg-lines-svg .sg-line-hit { stroke: transparent; stroke-width: 14; cursor: move; }
.sg-lines-svg .sg-line-shadow { stroke: rgba(0,0,0,0.65); pointer-events: none; }
.sg-lines-svg .sg-line { stroke: #fff; pointer-events: none; } /* bialy, 2 px - jak ramka obszaru Bx */
/* UI linii = te same klasy co przy obszarach (etykieta, uchwyt, znacznik, x);
pozycja wprost w punkcie linii, wiec kasujemy przesuniecia rogu obszaru. */
.sg-line-tag { right: auto; transform: translate(-2px, -17px); }
.sg-line-tag-v { transform: translate(8px, 2px); } /* linia pionowa: obok gornego konca */
.sg-line-tag-vb { transform: translate(8px, -17px); } /* linia pionowa: obok dolnego konca */
.sg-line-end { right: auto; bottom: auto; transform: translate(-6px, -6px); cursor: crosshair; }
.sg-line-del { right: auto; transform: translate(6px, -8px); }
.sg-box-cold { background-image: url("data:image/svg+xml;utf8,"); }
.sg-editor.sg-new-line-mode { cursor: crosshair; }
.sg-editor.sg-new-line-mode .sg-box, .sg-editor.sg-new-line-mode .sg-line-ui, .sg-editor.sg-new-mode .sg-line-ui { pointer-events: none; }
tr.sg-line-row td { background: #fff8e1; }
/* Lista badan (generator rozdzielnic, badanie budynku): "Otworz" + "Usun" w jednym wierszu. */
/* "Usun" w tym samym rozmiarze co "Otworz" (.action-link: 6px 12px, 13 px) - jak na liscie projektow */
/* Lista "co ma zrobic AI" przy wgrywaniu zdjec (generator rozdzielnic). */
.sg-ai-opts { border: 1px solid #c9ccd1; border-radius: 6px; padding: 8px 12px; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 16px; }
.sg-ai-opts legend { font-weight: 600; padding: 0 4px; }
.sg-ai-opts label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.sg-ai-opts .hint { grid-column: 1 / -1; margin: 4px 0 0; }
.sg-final-missing { background: #fff8e1; border: 1px solid #f9a825; border-radius: 6px; padding: 8px 12px; margin: 6px 0; }
/* Dziennik pracy AI podczas analizy (strona zadania w stanie "processing"). */
.inv-log { max-height: 240px; overflow-y: auto; background: #141414; color: #d7f5dc; font: 12.5px/1.5 ui-monospace, Consolas, monospace; border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.inv-log:empty { display: none; }
.inv-log .inv-log-t { color: #8bb58f; margin-right: 6px; }
.sg-lines-svg .sg-line-anom { stroke: #ff3b3b; } /* linia Lx z priorytetem (kabel cieplejszy od reszty grupy) */
/* Edytor termogramu (rozdzielnice, budynki): pelna szerokosc ekranu -
po lewej tabele pomiarow (pola, linie, komentarz), po prawej obrazy IR
i RGB przyklejone do gory, zeby byly widoczne podczas przewijania tabel. */
.admin-wrap-wide { max-width: none; padding: 0 24px; }
.sg-ed-layout { display: grid; grid-template-columns: minmax(420px, 46%) minmax(0, 1fr); gap: 22px; align-items: start; }
.sg-ed-side { min-width: 0; }
.sg-ed-side .inv-zones-wrap { overflow-x: auto; }
.sg-ed-side .inv-zones td, .sg-ed-side .inv-zones th { font-size: 13px; vertical-align: middle; }
.sg-ed-side .inv-zones input.sg-group { width: 100%; box-sizing: border-box; }
.sg-ed-side .inv-zones tr.sg-comment-row td { padding-top: 0; }
.sg-ed-side .inv-zones tr.sg-comment-row textarea.sg-comment-input { width: 100%; min-width: 0; box-sizing: border-box; }
.sg-ed-side .inv-zones textarea.sg-comment-input { width: 100%; min-width: 180px; box-sizing: border-box; }
.sg-ed-side .sg-row-tools { white-space: nowrap; }
.sg-ed-side .sg-row-tools .sg-mini { padding: 2px 7px; }
.sg-ed-h + .inv-zones-wrap { margin-top: 0; }
.sg-ed-side .hint { margin: 4px 0 14px; }
.sg-ed-main { position: sticky; top: 62px; min-width: 0; }
.sg-ed-main .sg-editor { border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.sg-ed-help { margin: 6px 0 10px; }
.sg-ed-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr); gap: 16px; align-items: start; }
.sg-ed-bottom .sg-ed-vis { width: 100%; border-radius: 4px; }
.sg-ed-bottom .sg-ai { margin-top: 0; }
@media (max-width: 1100px) {
.sg-ed-layout { grid-template-columns: 1fr; }
.sg-ed-main { position: static; order: -1; }
.sg-ed-bottom { grid-template-columns: 1fr; }
}
.sg-ed-side .sg-num-stats, .sg-ed-side .sg-line-stats, .sg-ed-side .sg-num-dt, .sg-ed-side .sg-line-dt { white-space: nowrap; }
/* Podsumowanie po publikacji raportu (termogramy, czas pracy, czas AI, tokeny). */
.sg-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 8px 0 4px; }
.sg-summary-grid > div { background: #f6f7f9; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.sg-summary-n { font-size: 22px; font-weight: 700; color: var(--brand-dark); }
.sg-summary-grid small { color: #6b7280; font-size: 12px; margin-top: 4px; }
/* Linie Lx pogrupowane: jedna tabela na grupe kabli jednego obwodu. */
.sg-lgroup { border: 1px solid #dfe2e6; border-radius: 8px; padding: 8px 10px 4px; margin: 0 0 10px; background: #fafbfc; min-width: 0; overflow: hidden; }
.sg-line-groups { min-width: 0; }
.sg-ed-side .sg-lgroup input.sg-line-desc { min-width: 120px; width: 100%; }
.sg-ed-side .sg-lgroup .inv-zones td { white-space: nowrap; }
.sg-ed-side .sg-lgroup .inv-zones td:nth-child(2) { white-space: normal; min-width: 130px; }
.sg-lgroup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.sg-lgroup-title { font-weight: 600; font-size: 14px; padding: 4px 8px; border: 1px solid #c9ccd1; border-radius: 6px; background: #fff; }
.sg-lgroup .inv-zones { margin: 0; }
.sg-ed-side .sg-lgroup .inv-zones-wrap { overflow-x: auto; }
/* historia wyslanych maili (kafelek powiadomienia e-mail na stronie projektu) */
.mail-log-h { font-size: 14px; margin: 18px 0 6px; }
.mail-log td, .mail-log th { font-size: 13px; }
.mail-log-date { white-space: nowrap; }
.mail-ok { color: #2e7d32; font-weight: 600; }
.mail-err { color: #c62828; font-weight: 600; cursor: help; }
/* edytor rozdzielnic: pytanie "czy to ta sama anomalia" (kilka kadrow) */
.sg-dups { margin: 0 0 12px; }
.sg-dup { border-radius: 8px; padding: 10px 12px; margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.sg-dup-ask { background: #fff8e1; border: 1px solid #f3d27a; }
.sg-dup-linked { background: #eef6ee; border: 1px solid #b9dcb9; }
.sg-dup-q { margin-bottom: 8px; }
.sg-dup .sg-mini { margin: 2px 4px 2px 0; text-align: left; white-space: normal; }
.mail-send-form .mail-attach { display: block; font-size: 13px; margin: 8px 0 2px; }
.mail-send-form .mail-attach input[type=file] { display: block; margin-top: 4px; }
/* ---------------- kalendarz badan cyklicznych */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-head { display: flex; align-items: center; flex-wrap: wrap; }
.cal-title { margin: 0; text-align: center; text-transform: capitalize; border: 0 !important; padding: 0 !important; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; text-align: left; }
.cal-grid td { border: 1px solid #e5e7eb; vertical-align: top; padding: 4px 5px; background: #fff; overflow: hidden; }
.cal-grid td.cal-out .cal-day { color: #b0b5bc; }
.cal-day { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 3px; }
.cal-ev { font-size: 11.5px; line-height: 1.3; padding: 2px 5px; margin: 0 0 3px; border-radius: 4px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { filter: brightness(0.95); }
.cal-ev-done { background: #e8f5e9; color: #1b5e20; }
.cal-ev-planned { background: #fff3e0; color: #8a4b00; }
.cal-ev-overdue { background: #fdecea; color: #b71c1c; font-weight: 600; }
.cal-ev-mark { display: inline-block; width: 12px; font-weight: 700; }
.cal-ev-type { opacity: .75; }
.cal-legend .cal-ev { display: inline-block; margin-right: 6px; }
.cal-side h2 { margin-top: 0; }
.cal-form label { display: block; font-size: 13px; margin: 0 0 8px; }
.cal-form input, .cal-form select { width: 100%; box-sizing: border-box; }
/* ==========================================================================
UX panelu (tura 1): linki, lista projektow, kalendarz
========================================================================== */
/* Linki tekstowe w panelu: ciemne, bez domyslnego niebieskiego i podkreslenia;
:where() = zerowa specyficznosc, wiec przyciski-linki (.action-link itd.)
zachowuja swoje style. */
:where(.admin-body) a { color: var(--brand-dark); text-decoration: none; font-weight: 500; }
:where(.admin-body) a:hover { color: color-mix(in srgb, var(--brand-color) 82%, black); text-decoration: underline; text-underline-offset: 2px; }
:where(.admin-body) a:focus-visible, .admin-body button:focus-visible, .admin-body input:focus-visible,
.admin-body select:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------------- lista projektow */
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eef0f3; }
.pl-title { display: flex; align-items: center; gap: 10px; }
.pl-title h2 { margin: 0; padding: 0; border: 0; font-size: 18px; }
.pl-total { background: #eef0f3; color: #4b5563; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.card .pl-new-btn { background: var(--brand-color); color: #fff; font-weight: 600; padding: 9px 16px; border-radius: 8px; }
.card .pl-new-btn:hover { filter: brightness(0.95); }
.card .pl-new-btn[aria-expanded="true"] { border: 1px solid #c9ccd1; }
.pl-new { background: #f8f9fb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.card .pl-new-form { display: block; }
.pl-new-fields { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 2fr); gap: 12px; margin-bottom: 12px; }
.pl-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #4b5563; }
.card .pl-field select, .card .pl-field input { width: 100%; font-weight: 400; background: #fff; }
.pl-type-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pl-type { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 12px 11px 34px; background: #fff; border: 1px solid #d7dae0; border-radius: 9px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.pl-type:hover { border-color: #aeb3bb; }
.pl-type input { position: absolute; left: 12px; top: 13px; margin: 0; accent-color: var(--brand-color); }
.card .pl-field .pl-type input { width: auto; } /* ogolna regula .card .pl-field input (width:100%) stawiala kolko na srodku karty, na tekscie */
.pl-type:has(input:checked) { border-color: var(--brand-color); box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), .14); }
.pl-type-title { font-size: 13.5px; font-weight: 600; color: #1f2430; }
.pl-type-sub { font-size: 12px; color: #6b7280; }
.pl-new-actions { display: flex; gap: 8px; }
.pl-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pl-search { flex: 1 1 280px; max-width: 420px; position: relative; }
.pl-search input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid #c9ccd1; border-radius: 8px; font-size: 14px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ca3af' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }
.pl-filters { display: flex; gap: 6px; }
.card .pl-chip { background: #fff; color: #374151; border: 1px solid #d7dae0; border-radius: 999px; font-size: 13px; font-weight: 500; }
.card .pl-chip span { color: #9ca3af; font-weight: 600; margin-left: 3px; }
.card .pl-chip:hover { border-color: #aeb3bb; }
.card .pl-chip.is-active { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.card .pl-chip.is-active span { color: rgba(255,255,255,.7); }
.pl-table-wrap { overflow-x: auto; }
.pl-table td { vertical-align: middle; padding: 11px 10px; font-size: 13.5px; }
.pl-table th { white-space: nowrap; }
.pl-name { min-width: 220px; }
.pl-name-link { font-weight: 600; font-size: 14px; }
.pl-sub { display: block; font-size: 12px; color: #8a8f98; margin-top: 2px; }
.pl-hidden { color: #8a4b00; font-weight: 600; }
.pl-client { color: #374151; }
.pl-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-muted { color: #c0c4ca; }
.pl-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.pl-badge-sg { background: #fff1e8; color: #a33a10; }
.pl-badge-bd { background: #eaf1fb; color: #1e4f8f; }
.pl-badge-pv { background: #eaf6ec; color: #1f6b33; }
.pl-badge-files { background: #f1f2f4; color: #4b5563; }
.pl-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pl-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pl-status-ready { color: #1f7a3a; }
.pl-status-processing { color: #a15c00; }
.pl-status-error { color: #c0392b; }
.pl-status-empty { color: #8a8f98; }
.card .pl-code { background: #f6f7f9; color: #374151; border: 1px dashed #d1d5db; border-radius: 6px; padding: 3px 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .03em; cursor: copy; }
.card .pl-code:hover { border-color: var(--brand-color); color: var(--brand-dark); background: #fff; }
.pl-actions { white-space: nowrap; text-align: right; }
.pl-actions .action-link { padding: 6px 12px; font-size: 13px; font-weight: 600; }
.pl-act { display: inline-block; padding: 6px 9px; font-size: 13px; color: #374151 !important; border-radius: 6px; }
.pl-act:hover { background: #eef0f3; text-decoration: none !important; }
.card .pl-del { background: transparent; color: #a8b0ba; padding: 6px 8px; font-size: 13px; }
.card .pl-del:hover { background: #fdecea; color: #c0392b; }
.pl-table tbody tr:hover { background: #fafbfc; }
.pl-empty { text-align: center; color: #6b7280; padding: 26px 10px; font-size: 14px; }
.pl-foot { margin-top: 4px; }
.pl-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #1f2430; color: #fff; padding: 9px 16px;
border-radius: 8px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 50; }
.pl-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) {
.pl-new-fields { grid-template-columns: 1fr; }
.pl-head { flex-wrap: wrap; }
}
/* ---------------- kalendarz (tura 1) */
.cal-head .sg-nav-btn { min-width: 34px; text-align: center; }
.cal-today-btn { display: inline-block; padding: 5px 12px; border: 1px solid #c9ccd1; border-radius: 7px; font-size: 13px; color: var(--brand-dark) !important; background: #fff; }
.cal-today-btn:hover { background: #f3f4f6; text-decoration: none !important; }
.cal-ev { border-left: 3px solid transparent; }
.cal-ev-done { border-left-color: #43a047; }
.cal-ev-planned { border-left-color: #f59e0b; }
.cal-ev-overdue { border-left-color: #e53935; }
.cal-ev, .cal-ev:hover { text-decoration: none !important; }
.cal-side-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #eef0f3; }
.cal-side-title h2 { margin: 0; padding: 0; border: 0; }
.cal-pill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.cal-pill-overdue { background: #fdecea; color: #b71c1c; }
.cal-up-list { list-style: none; margin: 0; padding: 0; }
.cal-up-list + .cal-up-list { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e5e7eb; }
.cal-up { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 8px; text-decoration: none !important; color: inherit !important; font-weight: 400 !important; }
.cal-up:hover { background: #f6f7f9; }
.cal-up-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 46px; border-radius: 8px; background: #fff3e0; color: #8a4b00; line-height: 1; }
.cal-up-date b { font-size: 17px; }
.cal-up-date i { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.cal-up-date i.cal-up-year { font-size: 9.5px; opacity: .8; }
.cal-up-overdue .cal-up-date { background: #fdecea; color: #b71c1c; }
.cal-up-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cal-up-client { font-weight: 600; font-size: 14px; color: #1f2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-up-meta { font-size: 12px; color: #6b7280; display: flex; align-items: center; gap: 5px; }
.cal-up-when { font-size: 12px; color: #6b7280; white-space: nowrap; text-align: right; }
.cal-up-overdue .cal-up-when { color: #b71c1c; font-weight: 600; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #9ca3af; flex: 0 0 auto; }
.cal-dot-rozdzielnice { background: #e8692e; }
.cal-dot-budynek { background: #3b78c2; }
.cal-dot-pv_dron { background: #2e8b47; }
.cal-empty { color: #6b7280; font-size: 13px; padding: 10px 0; }
.card .cal-form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cal-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #4b5563; margin: 0 !important; }
.card .cal-f select, .card .cal-f input { width: 100%; font-weight: 400; font-size: 14px; padding: 8px; border: 1px solid #c9ccd1; border-radius: 7px; background: #fff; }
.cal-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cal-opt { font-weight: 400; color: #9ca3af; font-size: 11px; }
.card .cal-submit { width: 100%; padding: 10px; font-weight: 600; background: var(--brand-color); }
.card .cal-submit:hover { filter: brightness(.95); }
/* stara globalna regula ".admin-body button { width: 100% }" - nowe kontrolki maja wlasna szerokosc */
.card .pl-chip, .card .pl-code, .card .pl-del, .card .pl-new-btn, .pl-new-actions button { width: auto; }
.pl-filters { flex-wrap: wrap; }
@media (max-width: 760px) {
.pl-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; width: 100%; }
.card .pl-chip { flex: 0 0 auto; }
.pl-search { max-width: none; }
}
.card #bulk-form { display: block; }
/* ---------------- kalendarz (tura 2) */
.cal-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cal-kpi { background: #fff; border: 1px solid #e2e4e8; border-radius: 12px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(16,24,40,.05); display: flex; flex-direction: column; gap: 2px; }
.cal-kpi b { font-size: 24px; line-height: 1.1; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.cal-kpi span { font-size: 12.5px; color: #6b7280; }
.cal-kpi-alert { border-color: #f5c2c0; background: #fff7f6; }
.cal-kpi-alert b { color: #b71c1c; }
@media (max-width: 900px) { .cal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal-kpi:last-child { display: none; } }
.cal-head { gap: 12px; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #d7dae0; font-size: 18px; color: var(--brand-dark) !important; background: #fff; text-decoration: none !important; }
.cal-arrow:hover { background: #f3f4f6; }
.cal-title { min-width: 180px; font-size: 18px !important; }
.cal-legend { margin-left: auto; display: flex; gap: 14px; font-size: 12.5px; color: #4b5563; flex-wrap: wrap; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-lg-done { background: #c8e6c9; box-shadow: inset 3px 0 0 #43a047; }
.cal-lg-planned { background: #ffe0b2; box-shadow: inset 3px 0 0 #f59e0b; }
.cal-lg-overdue { background: #ffcdd2; box-shadow: inset 3px 0 0 #e53935; }
.cal-grid th.cal-we-h { color: #a0a6ae; }
.cal-grid td { height: 104px; cursor: pointer; transition: background .1s; }
.cal-grid td:hover { background: #fbfbfc; }
.cal-grid td.cal-we { background: #fcfcfd; }
.cal-grid td.cal-out { background: #f6f7f8; }
.cal-grid td.cal-today { box-shadow: none; background: rgba(var(--brand-color-rgb), .045); }
.cal-grid td.cal-today .cal-day span { background: var(--brand-color); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.cal-grid td.is-picked { box-shadow: inset 0 0 0 2px var(--brand-color); }
.cal-day { display: flex; align-items: center; justify-content: space-between; height: 22px; }
.card .cal-add { width: 22px; height: 22px; padding: 0; border-radius: 6px; background: transparent; color: #9ca3af; font-size: 16px; line-height: 1; opacity: 0; transition: opacity .12s; }
.cal-grid td:hover .cal-add, .card .cal-add:focus-visible { opacity: 1; }
.card .cal-add:hover { background: var(--brand-dark); color: #fff; }
.cal-ev { display: flex; align-items: center; gap: 5px; font-weight: 500 !important; }
.cal-ev .cal-dot { width: 7px; height: 7px; }
.cal-ev-extra { display: none; }
.cal-grid td.is-open .cal-ev-extra { display: flex; }
.card .cal-more { width: auto; background: transparent; color: #4b5563; font-size: 11.5px; font-weight: 600; padding: 1px 4px; }
.card .cal-more:hover { color: var(--brand-dark); text-decoration: underline; background: transparent; }
.cal-note { font-size: 12px; color: #8a8f98; margin: 12px 0 0; line-height: 1.6; }
.cal-note .cal-dot { margin-left: 4px; }
.cal-flash { box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), .35); transition: box-shadow .3s; }
@media (max-width: 760px) {
.cal-grid td { padding: 3px; }
.cal-ev { font-size: 0; padding: 3px; justify-content: center; }
.cal-ev .cal-dot { width: 8px; height: 8px; }
.cal-legend { margin-left: 0; width: 100%; }
.card .cal-add { display: none; }
}
/* ---------------- profil klienta w kalendarzu (tura 2) */
.cc-back { display: inline-block; margin: 0 0 10px; font-size: 13.5px; color: #4b5563 !important; }
.cc-hero { padding: 20px 22px; }
.cc-id { display: flex; align-items: center; gap: 14px; }
.cc-avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; letter-spacing: .02em; flex: 0 0 auto; }
.cc-name { margin: 0; font-size: 22px; }
.cc-meta { margin: 3px 0 0; font-size: 13.5px; color: #6b7280; }
.cc-add-btn { margin-left: auto; background: var(--brand-color); color: #fff !important; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
.cc-add-btn:hover { filter: brightness(.95); }
.cc-stats { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.cc-stat { background: #f8f9fb; border: 1px solid #eceef1; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.cc-stat b { font-size: 20px; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.cc-stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; }
.cc-stat-sub { font-size: 12.5px; color: #6b7280; }
.cc-stat-next { background: #fff7ed; border-color: #fde3c4; }
.cc-stat-next b { color: #8a4b00; }
.cc-stat-overdue { background: #fff5f4; border-color: #f5c2c0; }
.cc-stat-overdue b { color: #b71c1c; }
.cc-count { display: inline-block; background: #eef0f3; color: #4b5563; font-size: 12px; padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.cc-list { list-style: none; margin: 0; padding: 0; }
.cc-item { border-bottom: 1px solid #eef0f3; }
.cc-item:last-child { border-bottom: 0; }
.cc-item-main { display: flex; align-items: flex-start; gap: 14px; padding: 12px 2px; }
.cc-date { flex: 0 0 auto; width: 58px; height: 54px; border-radius: 10px; background: #fff3e0; color: #8a4b00; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cc-date b { font-size: 19px; }
.cc-date i { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }
.cc-date-done { background: #e8f5e9; color: #1b5e20; }
.cc-item-overdue .cc-date { background: #fdecea; color: #b71c1c; }
.cc-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.cc-item-title { font-weight: 600; font-size: 14.5px; color: #1f2430; }
.cc-item-meta { font-size: 12.5px; color: #6b7280; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.cc-notes { color: #4b5563; font-style: italic; }
.cc-overdue { color: #b71c1c; }
.cc-open { flex: 0 0 auto; align-self: center; font-size: 13px; padding: 6px 10px; border-radius: 7px; border: 1px solid #d7dae0; color: var(--brand-dark) !important; text-decoration: none !important; white-space: nowrap; }
.cc-open:hover { background: #f3f4f6; }
.cc-edit { flex: 0 0 auto; align-self: center; }
.cc-edit summary { list-style: none; cursor: pointer; font-size: 13px; padding: 6px 12px; border-radius: 7px; border: 1px solid #d7dae0; color: var(--brand-dark); user-select: none; }
.cc-edit summary::-webkit-details-marker { display: none; }
.cc-edit summary:hover { background: #f3f4f6; }
.cc-edit[open] summary { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.cc-item:has(.cc-edit[open]) .cc-item-main { flex-wrap: wrap; }
.cc-edit[open] { flex-basis: 100%; order: 3; }
.cc-edit[open] summary { display: inline-block; }
.cc-edit-panel { margin-top: 10px; background: #f8f9fb; border: 1px solid #eceef1; border-radius: 10px; padding: 14px; }
.card .cc-edit-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.card .cc-edit-form button { width: auto; justify-self: start; }
.cc-edit-more { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.card .cc-edit-more form { display: inline; }
.card .cc-link-btn { width: auto; background: transparent; color: #4b5563; padding: 2px 0; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.card .cc-link-btn:hover { background: transparent; color: var(--brand-dark); }
.card .cc-link-btn.cc-danger { color: #b42318; }
.card .cc-item-main > form { display: block; align-self: center; }
.cc-help { font-size: 13px; color: #6b7280; margin: -4px 0 12px; }
.card .cc-add-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cc-wide { grid-column: span 3; }
@media (min-width: 900px) { .cc-wide { grid-column: span 1; } .card .cc-add-form { grid-template-columns: 1fr 1fr 1fr 1.4fr 1.4fr auto; } }
.card .cc-submit { width: auto; padding: 9px 16px; font-weight: 600; background: var(--brand-color); }
.cc-projects { list-style: none; margin: 0; padding: 0; }
.cc-projects li { padding: 8px 0; border-bottom: 1px solid #eef0f3; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cc-projects li:last-child { border-bottom: 0; }
@media (max-width: 760px) {
.cc-id { flex-wrap: wrap; }
.cc-add-btn { margin-left: 0; }
.cc-stats { grid-template-columns: 1fr 1fr; }
.cc-stat-next { grid-column: span 2; }
.card .cc-add-form { grid-template-columns: 1fr; }
.cc-wide { grid-column: span 1; }
}
/* ---------------- telefon (tura 2): naglowek panelu i lista projektow jako karty */
@media (max-width: 640px) {
.admin-header-title { display: none; }
.admin-header-brand .admin-logo { max-width: 170px; }
.admin-nav { gap: 2px; }
.admin-wrap { padding: 0 12px; }
.pl-table-wrap { overflow: visible; }
.pl-table, .pl-table tbody { display: block; white-space: normal; }
.pl-table thead { display: none; }
.pl-table tr { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: center;
padding: 12px 4px; border-bottom: 1px solid #eef0f3; }
.pl-table td { display: block; padding: 0; border: 0; }
.pl-table td.check-col { grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
.pl-table td.pl-name { grid-column: 2 / span 2; min-width: 0; }
.pl-table td.pl-client { grid-column: 2; font-size: 13px; }
.pl-table td:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; }
.pl-table td.pl-date { grid-column: 2; font-size: 13px; color: #4b5563; }
.pl-table td.pl-date::before { content: "Badanie: "; color: #8a8f98; }
.pl-table td:nth-child(6) { grid-column: 3; justify-self: end; }
.pl-table td:nth-child(7) { grid-column: 2; }
.pl-table td.pl-actions { grid-column: 2 / span 2; text-align: left; white-space: normal; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-head .pl-new-btn { padding: 8px 12px; }
}
/* ==========================================================================
Widok klienta (tura 1): lista projektow + pasek gorny stron klienta
========================================================================== */
.cl-body { background: #eef1f5; min-height: 100vh; }
/* pasek gorny na przewijanych stronach klienta: w przeplywie strony (nie
absolute jak nad mapa), przyklejony do gory na desktopie */
.cl-body #topbar, .sg-client-body #topbar { position: sticky; top: 0; }
.cl-topbar { padding: 12px 20px; }
.cl-topbar .topbar-logo { height: 26px; }
:where(.cl-body) a { color: var(--brand-dark); }
.cl-body .logout-link, .sg-client-body .logout-link { color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 6px 12px; border-radius: 6px; }
.cl-body .logout-link:hover, .sg-client-body .logout-link:hover { background: rgba(255,255,255,.12); }
.cl-wrap { max-width: 1040px; margin: 0 auto; padding: 26px 20px 60px; }
.cl-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 22px; }
.cl-hero h1 { margin: 4px 0 4px; font-size: 28px; color: var(--brand-dark); line-height: 1.15; }
.cl-hero-sub { margin: 0; color: #6b7280; font-size: 14.5px; }
.cl-next { background: #fff; border: 1px solid #e2e4e8; border-radius: 12px; padding: 12px 16px; min-width: 300px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.cl-next-label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; margin-bottom: 6px; }
.cl-next ul { list-style: none; margin: 0; padding: 0; }
.cl-next li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.cl-next-type { color: #374151; }
.cl-next li b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--brand-dark); }
.cl-next-when { font-size: 12.5px; color: #6b7280; min-width: 78px; text-align: right; }
.cl-next-overdue b, .cl-next-overdue .cl-next-when { color: #b71c1c; }
.cl-next-cta { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand-color) !important; text-decoration: none; }
.cl-next-cta:hover { text-decoration: underline; }
.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cl-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
background: #fff; border: 1px solid #e2e4e8; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(16,24,40,.05);
transition: border-color .12s, box-shadow .12s; }
.cl-card:hover { border-color: #cfd3da; box-shadow: 0 4px 14px rgba(16,24,40,.07); }
.cl-card-off { background: #fafbfc; }
.cl-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; align-self: start; }
.cl-icon-sg { background: #fff1e8; color: #a33a10; }
.cl-icon-bd { background: #eaf1fb; color: #1e4f8f; }
.cl-icon-pv { background: #eaf6ec; color: #1f6b33; }
.cl-icon-files { background: #f1f2f4; color: #4b5563; }
.cl-main { min-width: 0; }
.cl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 5px; }
.cl-date { font-size: 13px; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-flag { font-size: 12px; font-weight: 600; color: #8a4b00; background: #fff3e0; padding: 2px 8px; border-radius: 6px; }
.cl-flag-off { color: #b71c1c; background: #fdecea; }
.cl-title { margin: 0; font-size: 17px; line-height: 1.3; }
.cl-title a { color: #1f2430 !important; text-decoration: none; }
.cl-title a:hover { color: var(--brand-dark) !important; text-decoration: underline; text-underline-offset: 3px; }
.cl-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cl-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: #f3f4f6; color: #374151; white-space: nowrap; }
.cl-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cl-pill b { font-variant-numeric: tabular-nums; }
.cl-pill-p1, .cl-pill-c3 { background: #fdecea; color: #b71c1c; }
.cl-pill-p2 { background: #fff0e0; color: #a84d08; }
.cl-pill-p3, .cl-pill-c2 { background: #fff8e1; color: #8a6100; }
.cl-pill-p4, .cl-pill-c1 { background: #ecf6ee; color: #1f6b33; }
.cl-pill-obs { background: #eef2f5; color: #455a64; }
.cl-pill-ok { background: #ecf6ee; color: #1f6b33; font-weight: 600; }
.cl-meta { margin: 8px 0 0; font-size: 13px; color: #6b7280; }
.cl-meta:empty { display: none; }
.cl-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 150px; }
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 9px;
font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap;
border: 1px solid #d7dae0; background: #fff; color: var(--brand-dark) !important; }
.cl-btn:hover { background: #f3f4f6; }
.cl-btn-primary { background: var(--brand-color); border-color: var(--brand-color); color: #fff !important; }
.cl-btn-primary:hover { background: color-mix(in srgb, var(--brand-color) 86%, black); }
.cl-off-note { font-size: 13px; color: #6b7280; max-width: 220px; text-align: right; }
.cl-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
border-top: 1px dashed #e5e7eb; font-size: 13px; color: #4b5563; }
.cl-code { width: auto; background: #f6f7f9; color: #1f2430; border: 1px dashed #c9ccd1; border-radius: 6px; padding: 3px 9px; cursor: copy;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .04em; }
.cl-code:hover { border-color: var(--brand-color); background: #fff; }
.cl-empty { background: #fff; border: 1px dashed #d1d5db; border-radius: 14px; padding: 30px 22px; text-align: center; color: #4b5563; }
.cl-help { margin-top: 22px; text-align: center; font-size: 13.5px; color: #6b7280; }
@media (max-width: 640px) {
.cl-body #topbar, .sg-client-body #topbar { position: relative; }
.cl-topbar { flex-wrap: nowrap !important; }
.cl-topbar .topbar-left { width: auto !important; }
.cl-topbar .topbar-right { width: auto !important; overflow: visible !important; }
.cl-wrap { padding: 18px 14px 40px; }
.cl-hero h1 { font-size: 23px; }
.cl-next { min-width: 0; width: 100%; }
.cl-card { grid-template-columns: 40px minmax(0, 1fr); padding: 15px 14px; gap: 4px 12px; }
.cl-icon { width: 40px; height: 40px; border-radius: 10px; }
.cl-actions { grid-column: 1 / -1; flex-direction: row; margin-top: 12px; min-width: 0; }
.cl-actions .cl-btn { flex: 1 1 0; padding: 10px 10px; }
.cl-off-note { text-align: left; max-width: none; }
}
/* ---------------- widok raportu klienta (tura 1): naglowek, nawigacja, spis */
.sg-hero { padding: 22px 4px 4px; }
.sg-hero-addr { margin: 0 0 4px; color: #4b5563; font-size: 15px; }
.sg-facts { display: grid; gap: 10px; margin: 16px 0 0; }
.sg-facts > div { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; min-width: 0; }
.sg-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; }
.sg-facts dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 600; color: #1f2430; overflow-wrap: anywhere; }
.sg-facts dd small { display: block; font-weight: 400; font-size: 12.5px; color: #6b7280; margin-top: 1px; }
.sg-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sg-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid #d7dae0;
color: var(--brand-dark); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sg-jump a:hover { border-color: var(--brand-dark); }
.sg-jump a span { background: #eef0f3; color: #4b5563; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.sg-stat-zero .sg-stat-n { color: #6b7280; }
.sg-h-count { display: inline-block; background: #eef0f3; color: #4b5563; font-size: 12px; padding: 1px 8px; border-radius: 999px; margin-left: 4px; vertical-align: 2px; font-weight: 600; }
.sg-toc ol.sg-units { columns: auto; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.sg-unit { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 9px; text-decoration: none; color: #1f2430; height: 100%; }
.sg-unit:hover { border-color: var(--brand-dark); background: #fafbfc; }
.sg-unit-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; }
.sg-unit-name small { display: block; font-weight: 400; color: #6b7280; font-size: 12px; }
.sg-unit-n { font-size: 12px; color: #6b7280; white-space: nowrap; }
.sg-unit-ok { color: #2e7d32; font-weight: 700; width: 22px; text-align: center; }
.sg-totop { position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-dark); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.2);
opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 900; }
.sg-totop.is-on { opacity: .9; pointer-events: auto; }
@media (max-width: 640px) {
.sg-client { padding: 10px 12px 50px; }
.sg-jump { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-right: -12px; }
.sg-card { padding: 14px 14px; }
/* wykaz anomalii jako karty zamiast tabeli przewijanej w poziomie */
.sg-table.sg-cards-m, .sg-cards-m tbody { display: block; }
.sg-cards-m tr:first-child { display: none; }
.sg-cards-m tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 2px; border-bottom: 1px solid #eef0f3; }
.sg-cards-m td { display: block; padding: 0; border: 0; font-size: 13.5px; }
.sg-cards-m td[data-label]::before { content: attr(data-label) " "; font-size: 12px; }
.sg-cards-m td[data-label]:empty { display: none; }
.sg-cards-m td.sg-c-loc { font-weight: 600; flex: 1 1 auto; }
.sg-cards-m td.sg-c-com { flex-basis: 100%; color: #374151; }
}
/* miejsce na obrazy przed ich (leniwym) wczytaniem - inaczej skok do
termogramu z wykazu anomalii laduje w zlym miejscu, bo obrazy nad nim
doczytuja sie i przesuwaja tresc */
.sg-thermo-imgs img { aspect-ratio: auto 16 / 10; height: auto; background: #e5e7eb; }
.sg-thermo-imgs img.sg-vis { aspect-ratio: auto 4 / 3; }
:where(.sg-client) a { color: var(--brand-dark); text-underline-offset: 2px; }
@media (max-width: 640px) {
.sg-cards-m td.sg-c-prio { order: 0; }
.sg-cards-m td.sg-c-loc { order: 1; }
.sg-cards-m td[data-label] { order: 2; }
.sg-cards-m td.sg-c-com { order: 3; }
}
/* ---------------- widok raportu klienta (tura 2) */
.sg-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* pasek sekcji przyklejony pod paskiem gornym, z podswietleniem biezacej sekcji */
.sg-jump { position: sticky; top: var(--tb-h, 0px); z-index: 950; margin: 14px -16px 0; padding: 8px 16px;
background: rgba(243, 244, 246, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
scrollbar-width: none; }
.sg-jump::-webkit-scrollbar { display: none; }
.sg-jump a.is-active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.sg-jump a.is-active span { background: rgba(255,255,255,.2); color: #fff; }
.sg-client [id] { scroll-margin-top: calc(var(--tb-h, 0px) + 62px); }
.sg-client-body .topbar-right { scrollbar-width: none; }
.sg-client-body .topbar-right::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .sg-facts > div:first-child { grid-column: auto; } }
@media (max-width: 640px) {
/* fakty: jedna zwarta karta 2 x N zamiast pieciu osobnych kafelkow */
.sg-facts { grid-template-columns: 1fr 1fr; gap: 10px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.sg-facts > div { background: none; border: 0; padding: 0; border-radius: 0; }
.sg-facts dd { font-size: 14px; }
.sg-jump { margin: 10px -12px 0; padding: 8px 12px; }
.sg-hero { padding-top: 12px; }
.sg-hero h1 { margin-bottom: 2px; }
}
.bd-cls, .sg-prio { white-space: nowrap; }
.cl-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 14px; }
.cl-toolbar input { flex: 1 1 260px; max-width: 380px; padding: 9px 12px 9px 34px; border: 1px solid #c9ccd1; border-radius: 9px; font-size: 15px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ca3af' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-chip { background: #fff; color: #374151; border: 1px solid #d7dae0; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.cl-chip:hover { border-color: #aeb3bb; }
.cl-chip.is-active { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.cl-card[hidden] { display: none; }
.cl-none { text-align: center; color: #6b7280; padding: 20px 0; }
@media (max-width: 640px) {
.cl-toolbar input { max-width: none; font-size: 16px; }
.cl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
.cl-chip { flex: 0 0 auto; }
}
.cl-info { font-size: 13px; color: #4b5563; background: #fff; border: 1px solid #e5e7eb; border-left: 3px solid var(--brand-dark); border-radius: 8px; padding: 9px 12px; margin: 0 0 14px; }
.cl-foot { margin-top: 10px; padding-top: 10px; }
/* ==========================================================================
Strona projektu w panelu (tura 1): naglowek, etapy, nawigacja, opisy
========================================================================== */
/* kolumny siatki nie rozpychaja sie szerokimi tabelami (telefon: poziomy scroll strony) */
.project-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.project-cards .card { min-width: 0; }
@media (max-width: 900px) {
.project-cards { grid-template-columns: minmax(0, 1fr); }
.project-cards .projects-table, .project-cards .inv-zones { display: block; overflow-x: auto; white-space: nowrap; }
}
.pd-hero { padding: 20px 22px 18px; }
.pd-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.pd-hero-id { min-width: 0; flex: 1 1 420px; }
.pd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pd-flag { font-size: 12px; font-weight: 600; color: #8a4b00; background: #fff3e0; padding: 2px 8px; border-radius: 6px; }
.pd-title { margin: 8px 0 4px; font-size: 24px; line-height: 1.2; color: #1f2430; overflow-wrap: anywhere; }
.pd-meta { margin: 0; font-size: 14px; color: #4b5563; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.card .pd-meta .pl-code { width: auto; padding: 2px 8px; }
.pd-layers { display: flex; gap: 6px; margin: 10px 0 0; }
.pd-layers span { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: #f1f2f4; text-decoration: line-through; }
.pd-layers span.is-on { background: #eaf6ec; color: #1f6b33; text-decoration: none; }
.pd-layers span.is-on::before { content: "✓ "; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-btn { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 8px; border: 1px solid #d7dae0; background: #fff;
color: var(--brand-dark) !important; font-size: 14px; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap; }
.pd-btn:hover { background: #f3f4f6; }
.pd-btn-primary { background: var(--brand-color); border-color: var(--brand-color); color: #fff !important; }
.pd-btn-primary:hover { background: color-mix(in srgb, var(--brand-color) 86%, black); }
.pd-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.pd-steps a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid #e5e7eb; background: #f8f9fb;
color: #4b5563 !important; text-decoration: none !important; font-weight: 400 !important; height: 100%; }
.pd-steps a:hover { border-color: #c9ccd1; }
.pd-steps b { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; background: #e5e7eb; color: #6b7280; }
.pd-steps span { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; color: #374151; min-width: 0; }
.pd-steps small { font-size: 12px; font-weight: 400; color: #6b7280; }
.pd-steps li.is-done a { background: #f2f9f3; border-color: #cfe8d4; }
.pd-steps li.is-done b { background: #2e7d32; color: #fff; font-size: 0; }
.pd-steps li.is-done b::before { content: "✓"; font-size: 14px; }
.pd-steps li.is-current a { background: #fff; box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), .12); }
.pd-steps li.is-current b { background: var(--brand-color); color: #fff; }
.pd-steps li.is-error a { background: #fff5f4; border-color: #f5c2c0; }
.pd-steps li.is-error b { background: #c0392b; color: #fff; }
.pd-alert { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; background: #fff7ed; border: 1px solid #fde3c4; font-size: 13.5px; color: #5b3a12; }
.pd-jump { position: sticky; top: 0; z-index: 40; display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; padding: 8px 0;
background: rgba(238, 241, 245, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); scrollbar-width: none; }
.pd-jump::-webkit-scrollbar { display: none; }
.pd-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid #d7dae0;
font-size: 13.5px; font-weight: 600; color: var(--brand-dark); text-decoration: none !important; white-space: nowrap; }
.pd-jump a:hover { border-color: var(--brand-dark); }
.pd-jump a span { background: #eef0f3; color: #4b5563; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.pd-jump a.is-active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.pd-jump a.is-active span { background: rgba(255,255,255,.2); color: #fff; }
.project-cards .cards-group-title { scroll-margin-top: 64px; }
.pd-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.pd-clamp.is-open { display: block; }
.card .pd-more { width: auto; background: transparent; padding: 0; margin: 0 0 12px; font-size: 12.5px; font-weight: 600; text-underline-offset: 2px; }
.card .pd-more:hover { background: transparent; }
.pd-muted-card { background: #fafbfc; }
@media (max-width: 760px) {
.pd-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pd-title { font-size: 20px; }
.pd-actions { width: 100%; }
.pd-actions .pd-btn { flex: 1 1 auto; justify-content: center; }
.pd-jump { flex-wrap: nowrap; overflow-x: auto; }
}
.pd-steps li.is-warn a { background: #fffaf0; border-color: #f5d9a8; }
.pd-steps li.is-warn b { background: #f59e0b; }
/* ==========================================================================
Edytor termogramu - weryfikacja anomalii (tura 1)
========================================================================== */
.sg-ed-top { background: rgba(238, 241, 245, .95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); margin: 0 -20px 10px; padding: 10px 20px;
border-bottom: 1px solid #e2e4e8; top: 0; z-index: 60; }
.sg-ed-top .sg-nav-link { font-size: 14px; color: #4b5563; }
.admin-body .sg-save-bar button, .admin-body .sg-ed-nav button { width: auto; }
.sg-save-bar #sg-save:not(:disabled) { box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), .2); }
.sg-ed-nav select { padding: 7px 8px; border: 1px solid #c9ccd1; border-radius: 7px; font-size: 13.5px; background: #fff; }
.sg-ed-head { position: relative; padding-bottom: 12px; gap: 6px 14px; }
.sg-ed-head h1 { font-size: 22px; }
.sg-ed-of { color: #9ca3af; font-weight: 500; font-size: 17px; }
.sg-ed-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.sg-ed-progress i { display: block; height: 100%; background: var(--brand-color); border-radius: 4px; }
.sg-ed-op { margin: 12px 0 4px; padding: 9px 12px; background: #f6f7f9; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #1f2430; }
.sg-ed-op span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; margin-bottom: 2px; }
.sg-ed-row { padding: 10px 0 4px; }
.card .sg-ed-row select { min-width: 260px; }
/* narzedzia nad termogramem: kompaktowe przyciski zamiast pelnej szerokosci */
.sg-ed-tools { gap: 8px 12px; margin-bottom: 8px; }
.card .sg-ed-tools button { width: auto; padding: 7px 13px; font-size: 13.5px; font-weight: 600; border-radius: 8px; }
.card .sg-ed-tools #sg-new-box { background: var(--brand-dark); color: #fff; }
.card .sg-ed-tools #sg-new-line { background: #fff; color: var(--brand-dark); border: 1px solid #c9ccd1; }
.card .sg-ed-tools button.is-active { background: #fff7d6 !important; color: #5b4500 !important; border: 1px dashed #d4a20a !important; }
.sg-ed-tools label.hint { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* tabele Bx/Lx: temperatury w dwoch liniach, waskie usun */
.sg-ed-side .inv-zones th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; background: #f8f9fb; white-space: nowrap; }
.sg-ed-side .inv-zones th small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sg-num-stats b, .sg-line-stats b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sg-num-stats small, .sg-line-stats small { display: block; font-size: 11px; color: #8a8f98; font-variant-numeric: tabular-nums; }
.sg-num-dt, .sg-line-dt { font-weight: 600; font-variant-numeric: tabular-nums; }
.card .sg-del-x { width: 26px; height: 26px; padding: 0; border-radius: 6px; background: transparent; color: #9ca3af; font-size: 17px; line-height: 1; border: 1px solid transparent; }
.card .sg-del-x:hover { background: #fdecea; color: #c0392b; border-color: #f5c2c0; }
.sg-ed-h { display: flex; align-items: center; gap: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #4b5563; margin: 6px 0 4px; }
/* objasnienia na zadanie */
.sg-help { margin: 4px 0 14px; }
.sg-help summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: #4b5563; list-style: none; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.sg-help summary::-webkit-details-marker { display: none; }
.sg-help summary::before { content: "?"; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #c9ccd1; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #6b7280; }
.sg-help summary:hover { color: var(--brand-dark); }
.sg-help[open] summary { color: var(--brand-dark); }
.sg-help p.hint { margin: 6px 0 0 !important; padding: 8px 10px; background: #f8f9fb; border-radius: 8px; line-height: 1.5; }
.sg-keys { margin: 6px 0 0; font-size: 12.5px; color: #4b5563; }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid #c9ccd1; border-bottom-width: 2px; border-radius: 4px; background: #fff;
font: 600 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; color: #374151; }
.sg-photo-comment { font-weight: 600; color: #4b5563; }
.sg-ai h2 { font-size: 14px; border: 0; padding: 0; }
.card .sg-ai button { width: auto; }
@media (max-width: 760px) {
.sg-ed-top { margin: 0 -12px 10px; padding: 8px 12px; }
.card .sg-ed-row select { max-width: 100%; }
}
/* ---------------- tura 2: strona projektu */
.project-cards .card button { width: auto; }
.pd-report-ok { margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; background: #f2f9f3; border: 1px solid #cfe8d4; font-size: 13.5px; color: #1f4d2a; }
.pd-manual { margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 14px; background: #fafbfc; }
.pd-manual summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: #4b5563; }
.pd-manual[open] summary { margin-bottom: 8px; color: var(--brand-dark); }
/* ---------------- tura 2: edytor termogramu */
.sg-ed-side .inv-zones input.sg-group { min-width: 130px; }
.sg-ed-side .inv-zones select { max-width: 104px; }
.sg-ed-side .inv-zones td, .sg-ed-side .inv-zones th { padding: 5px 5px; }
.sg-verdict { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eef0f3; color: #4b5563; white-space: nowrap; }
.sg-verdict:empty { display: none; }
.sg-verdict-p1, .sg-verdict-c3 { background: #fdecea; color: #b71c1c; }
.sg-verdict-p2 { background: #fff0e0; color: #a84d08; }
.sg-verdict-p3, .sg-verdict-c2 { background: #fff8e1; color: #8a6100; }
.sg-verdict-p4, .sg-verdict-c1 { background: #ecf6ee; color: #1f6b33; }
.sg-verdict-obs { background: #eef2f5; color: #455a64; }
.sg-verdict-ok { background: #ecf6ee; color: #1f6b33; }
.admin-body .sg-save-bar .sg-save-next { width: auto; background: var(--brand-color); color: #fff; font-weight: 700; }
.admin-body .sg-save-bar .sg-save-next:hover { background: color-mix(in srgb, var(--brand-color) 86%, black); }
.admin-body .sg-save-bar #sg-save { background: var(--brand-dark); }
/* ==========================================================================
Przeglad raportu w generatorze (rozdzielnice, budynek) - tura 1
========================================================================== */
.jb-stats { display: grid; grid-template-columns: 1fr 1fr 2fr 1fr; gap: 10px; margin-top: 16px; }
.jb-stats > div { background: #f8f9fb; border: 1px solid #eceef1; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jb-stats b { font-size: 22px; color: var(--brand-dark); font-variant-numeric: tabular-nums; line-height: 1.1; }
.jb-stats span { font-size: 12.5px; color: #6b7280; }
.jb-stats small { font-size: 12px; color: #8a8f98; }
.jb-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.jb-pills .cl-pill b { font-size: 12.5px; color: inherit; }
.jb-stat-alert { background: #fff7ed !important; border-color: #fde3c4 !important; }
.jb-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef0f3; font-size: 13.5px; }
.jb-check-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; margin-right: 4px; }
.jb-check .is-ok, .jb-check .is-bad { display: inline-flex; align-items: center; gap: 6px; color: #374151; }
.jb-check .is-ok::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; background: #2e7d32; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.jb-check .is-bad::before { content: "!"; width: 18px; height: 18px; border-radius: 50%; background: #c0392b; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.jb-check .is-bad { color: #9b1c1c; font-weight: 600; }
.jb-check .is-bad a { color: #9b1c1c !important; text-decoration: underline; }
.jb-jump { position: static; }
/* przyklejony pasek akcji formularza */
.card.jb-actions { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px;
box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.jb-actions-sp { flex: 1 1 auto; }
.card.jb-actions button { width: auto; padding: 9px 15px; font-size: 14px; font-weight: 600; border-radius: 8px; }
.card.jb-actions .jb-save { background: var(--brand-dark); }
.card.jb-actions .jb-publish { background: var(--brand-color); }
.card.jb-actions .jb-publish:hover { background: color-mix(in srgb, var(--brand-color) 86%, black); }
.jb-regen { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
/* siatka miniatur termogramow */
.jb-th-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef0f3; }
.jb-th-head h2 { margin: 0; padding: 0; border: 0; }
.card .jb-filter .cl-chip { width: auto; }
.cl-chip span { color: #9ca3af; font-weight: 600; margin-left: 2px; }
.cl-chip.is-active span { color: rgba(255,255,255,.7); }
.jb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.jb-unit { grid-column: 1 / -1; margin: 8px 0 -2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #4b5563; }
.jb-unit:first-child { margin-top: 0; }
.jb-unit[hidden], .jb-tile[hidden] { display: none; }
.jb-tile { display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
color: #1f2430 !important; text-decoration: none !important; font-weight: 400 !important; transition: border-color .12s, box-shadow .12s; }
.jb-tile:hover { border-color: var(--brand-dark); box-shadow: 0 3px 10px rgba(16,24,40,.08); }
.jb-thumb { display: block; aspect-ratio: 4 / 3; background: #1b1b1f; border-radius: 6px; overflow: hidden; }
.jb-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jb-tile-row { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.jb-tile-row b { font-size: 14px; font-variant-numeric: tabular-nums; margin-right: auto; }
.jb-tile small { font-size: 11.5px; color: #8a8f98; padding: 0 2px 2px; }
.jb-ok { font-size: 11.5px; font-weight: 700; color: #2e7d32; }
.jb-warn { font-size: 11px; font-weight: 600; color: #8a4b00; background: #fff3e0; padding: 0 5px; border-radius: 5px; }
.jb-com { font-size: 12px; font-weight: 700; color: #8a4b00; }
.jb-tile.is-out { background: #fafbfc; }
.jb-tile.is-out .jb-thumb { opacity: .45; }
/* koszty na dole, usuwanie raportu */
.jb-costs > summary { cursor: pointer; font-weight: 600; color: #4b5563; font-size: 14px; }
.jb-costs[open] > summary { margin-bottom: 12px; }
.jb-summary h2 { font-size: 14px; }
.jb-delete { margin-top: 8px; }
.admin-body .jb-delete button { width: auto; background: transparent; color: #b42318; border: 1px solid #f5c2c0; padding: 7px 14px; font-size: 13px; }
.admin-body .jb-delete button:hover { background: #fdecea; }
@media (max-width: 900px) { .jb-stats { grid-template-columns: 1fr 1fr; } .jb-stat-wide { grid-column: span 2; } }
@media (max-width: 640px) {
.card.jb-actions { position: static; }
.jb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.card .jb-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
.card .jb-filter .cl-chip { flex: 0 0 auto; }
}
.card .cl-chip { width: auto; background: #fff; color: #374151; border: 1px solid #d7dae0; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 500; }
.card .cl-chip:hover { border-color: #aeb3bb; }
.card .cl-chip.is-active { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
@media (max-width: 900px) {
#inv-form .inv-zones, #historia .inv-zones { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
.card.jb-actions { display: grid; grid-template-columns: 1fr 1fr; }
.card.jb-actions .jb-actions-sp, .card.jb-actions #inv-saving[hidden] { display: none; }
.card.jb-actions .pd-btn, .card.jb-actions button { justify-content: center; width: 100%; }
.card.jb-actions .jb-regen { grid-column: 1 / -1; order: 5; }
}
.jb-grid-sg .jb-thumb { aspect-ratio: 16 / 10; }
.jb-grid-bd .jb-thumb { aspect-ratio: 5 / 4; }
/* ---------------- logowanie klienta */
.login-box { width: 380px; text-align: left; padding: 36px 36px 28px; }
.login-box .login-logo { display: block; margin: 0 auto 22px; }
.login-box h1 { text-align: center; margin: 0 0 6px; font-size: 21px; }
.login-box .subtitle { text-align: center; font-size: 13.5px; line-height: 1.5; margin: 0 0 20px; }
.login-label { display: block; font-size: 12.5px; font-weight: 600; color: #4b5563; margin-bottom: 6px; }
.login-box input.login-code { margin-bottom: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 19px; letter-spacing: 2px; text-transform: uppercase; }
.login-box input.login-code::placeholder { letter-spacing: 2px; }
.login-box input.login-code.is-invalid { border-color: #c0392b; background: #fff8f7; }
.login-help { font-size: 12px; color: #8a8f98; margin: 0 0 14px; }
.login-box button:disabled { opacity: .7; cursor: progress; }
.login-error { background: #fdecea; border: 1px solid #f5c2c0; border-radius: 8px; padding: 9px 12px; font-size: 13px; line-height: 1.45; }
.login-active { background: #f2f9f3; border: 1px solid #cfe8d4; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: #1f4d2a; margin: 0 0 14px; }
.login-active a { color: #1f4d2a; font-weight: 700; }
.login-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #eef0f3; font-size: 12.5px; color: #6b7280; text-align: center; line-height: 1.5; }
.login-foot a { color: var(--brand-dark); font-weight: 600; }
@media (max-width: 640px) { .login-box { width: 100%; max-width: 380px; padding: 28px 22px 22px; } }
/* ---------------- mapa PV klienta (tura 1) */
#topbar .topbar-right { scrollbar-width: none; }
#topbar .topbar-right::-webkit-scrollbar { display: none; }
details.layers-note { max-width: 240px; }
details.layers-note summary { cursor: pointer; list-style: none; font-size: 11.5px; font-weight: 600; color: #6b7280; }
details.layers-note summary::-webkit-details-marker { display: none; }
details.layers-note summary::before { content: "ⓘ "; }
details.layers-note[open] summary { margin-bottom: 4px; color: #374151; }
.anomaly-toggle-btn.is-empty { background: #fff; color: #4b5563; cursor: default; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.anomaly-toggle-btn.is-empty::before { content: "✓ "; color: #2e7d32; font-weight: 700; }
@media (max-width: 640px) {
/* narzedzia temperatury jako jeden poziomy pasek ikon zamiast kolumny przyciskow */
.temp-toolbar { flex-direction: row; width: auto; padding: 5px; gap: 4px; }
.temp-toolbar-title { display: none; }
.temp-tool-btn { flex-direction: column; gap: 2px; padding: 7px 9px; font-size: 11px; width: auto; text-align: center; }
.temp-tool-icon { font-size: 16px; width: auto; }
#controls { left: 10px; bottom: 14px; padding: 8px 12px; }
.control-row { margin-bottom: 4px; font-size: 12.5px; }
}
@media (max-width: 640px) { #map .leaflet-top.leaflet-left { top: 64px; } }
/* ---------------- formularz anomalii PV (tura 1) */
.af-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 14px; }
.af-head h1 { margin: 0; font-size: 24px; }
.af-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.af-layout .card { margin-bottom: 0; }
@media (min-width: 1100px) {
.af-layout { grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr); }
.af-map-card .anomaly-map-wrap { height: max(440px, calc(100vh - 330px)); }
.af-form-card .anomaly-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.af-sub { margin: 6px 0 -4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.af-sub:first-child { margin-top: 0; }
.af-sub .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.af-help { margin: 0 0 10px; }
.af-coa-pick { display: inline-flex; gap: 4px; margin-top: 4px; }
.admin-body .af-coa { width: 34px; padding: 5px 0; font-size: 13px; font-weight: 700; border-radius: 6px; background: #fff; border: 1px solid #d7dae0; color: #374151; }
.admin-body .af-coa:hover { border-color: #9ca3af; }
.admin-body .af-coa-1.is-on { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.admin-body .af-coa-2.is-on { background: #e8622c; border-color: #e8622c; color: #fff; }
.admin-body .af-coa-3.is-on { background: #c0392b; border-color: #c0392b; color: #fff; }
.af-form-card .anomaly-form-buttons { position: sticky; bottom: 0; background: #fff; padding: 10px 0 2px; display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid #eef0f3; }
.af-form-card .anomaly-form-buttons button { width: auto; }
/* narzedzia temperatury w panelu: bez globalnego stylu przyciskow panelu */
.admin-body .temp-tool-btn { width: 100%; background: #f8f9fa; color: var(--brand-dark); font-weight: 500; padding: 8px 10px; font-size: 13px; border-radius: 6px; }
.admin-body .temp-tool-btn:hover { background: #eef0f3; }
.admin-body .temp-tool-btn.active { background: var(--brand-accent); color: var(--brand-accent-text); }
.admin-body .temp-tool-clear { color: #c0392b; }
@media (max-width: 640px) {
.admin-body .temp-tool-btn { width: auto; padding: 7px 9px; font-size: 11px; }
.anomaly-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.anomaly-map-wrap .leaflet-top.leaflet-left { left: 132px; }
@media (max-width: 640px) { .anomaly-map-wrap .leaflet-top.leaflet-left { left: 0; top: 60px; } }
/* ==========================================================================
Priorytet 2 (tura 1): klienci, kody dostepu, listy zadan, pliki klienta
========================================================================== */
/* wspolne drobne kontrolki w tabelach panelu */
.c-inline { display: inline; margin: 0; }
.card .c-inline { display: inline-flex; }
.card .c-link { width: auto; background: transparent; color: #4b5563; padding: 2px 4px; font-size: 12.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.card .c-link:hover { background: transparent; color: var(--brand-dark); }
.card .pl-del:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
.c-overdue { color: #b71c1c; font-weight: 600; }
.c-th-hint { cursor: help; color: #9ca3af; text-transform: none; }
/* klienci */
.card .c-new-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.3fr) auto; gap: 12px; align-items: end; }
.c-table td { vertical-align: middle; padding: 10px 10px; font-size: 13.5px; }
.c-name { min-width: 200px; }
.card .c-email-form { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.card .c-email-form input { width: 230px; padding: 6px 8px; font-size: 13.5px; border: 1px solid transparent; border-radius: 6px; }
.card .c-email-form input:hover { border-color: #d7dae0; background: #fff; }
.card .c-email-form input:focus { border-color: var(--brand-color); background: #fff; outline: none; }
.card .c-email-form input::placeholder { color: #9ca3af; font-style: italic; }
.card .c-save { width: auto; padding: 5px 10px; font-size: 12.5px; }
.c-insp span { display: block; font-size: 12.5px; color: #6b7280; white-space: nowrap; }
.c-insp b { color: #1f2430; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-insp .c-overdue b { color: #b71c1c; }
.c-code { white-space: nowrap; }
.c-actions { white-space: nowrap; }
@media (max-width: 760px) {
.card .c-new-form { grid-template-columns: 1fr; }
.c-table, .c-table tbody { display: block; white-space: normal; }
.c-table thead { display: none; }
.c-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 2px; border-bottom: 1px solid #eef0f3; }
.c-table td { display: block; padding: 0; border: 0; }
.c-table td.c-name { grid-column: 1 / -1; }
.c-table td.c-email { grid-column: 1 / -1; }
.card .c-email-form input { width: 100%; }
.c-table td.c-actions { grid-column: 1 / -1; text-align: left; }
}
/* kody dostepu */
.ac-intro { margin: -4px 0 12px; }
.ac-new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.card .ac-big, .ac-big { font-size: 16px; padding: 4px 12px; }
.ac-new-msg { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-new-msg textarea { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: 360px; max-width: 100%; border: 1px solid #cfe8d4; border-radius: 6px; padding: 6px 8px; background: #fff; resize: none; }
.success-banner .pl-new-btn { width: auto; padding: 8px 14px; font-size: 13px; }
.ac-form-card[hidden] { display: none; }
.ac-sel { font-size: 12px; font-weight: 500; color: #6b7280; text-transform: none; letter-spacing: 0; }
.ac-filter { width: 100%; padding: 6px 10px; border: 1px solid #d7dae0; border-radius: 7px; font-size: 13px; margin: 0 0 8px; }
.scope-item[hidden] { display: none; }
.ac-table td { vertical-align: middle; }
.ac-actions { white-space: nowrap; }
.ac-actions .action-link { padding: 5px 11px; font-size: 13px; }
.ac-form-card .anomaly-form-buttons { display: flex; gap: 8px; align-items: center; }
.ac-form-card .anomaly-form-buttons button { width: auto; }
/* listy zadan generatora */
.jl-list { list-style: none; margin: 0; padding: 0; }
.jl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center; padding: 12px 4px; border-bottom: 1px solid #eef0f3; }
.jl-item:last-child { border-bottom: 0; }
.jl-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jl-title { font-weight: 600; font-size: 15px; }
.jl-time { color: #9ca3af; font-weight: 400; font-size: 13px; }
.jl-meta { font-size: 12.5px; color: #6b7280; }
.jl-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.jl-live { font-size: 11.5px; font-weight: 700; color: #1f6b33; background: #ecf6ee; padding: 2px 8px; border-radius: 999px; }
.jl-actions { display: flex; align-items: center; gap: 6px; }
.jl-actions .action-link { padding: 6px 13px; font-size: 13px; font-weight: 600; }
.jl-new > summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; color: var(--brand-dark); display: flex; align-items: center; gap: 10px; }
.jl-new > summary::-webkit-details-marker { display: none; }
.jl-plus { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.jl-new[open] > summary { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef0f3; }
.card .jl-submit { width: auto; background: var(--brand-color); padding: 10px 18px; font-weight: 700; }
.jl-picked { margin: 4px 0; font-weight: 600; color: #374151; }
@media (max-width: 640px) {
.jl-item { grid-template-columns: 1fr auto; }
.jl-state { grid-column: 1 / -1; justify-content: flex-start; order: 3; }
}
/* pliki klienta */
.fv-hero { align-items: center; }
.fv-zip { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
.fv-zip .cl-btn { font-size: 15px; padding: 11px 20px; cursor: pointer; font-family: inherit; }
.fv-item { grid-template-columns: 46px minmax(0, 1fr) auto; }
.fv-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: #f1f2f4; color: #4b5563; align-self: center; }
.fv-icon-pdf { background: #fdecea; color: #b71c1c; }
.fv-icon-img { background: #eaf1fb; color: #1e4f8f; }
.fv-icon-zip { background: #fff3e0; color: #8a4b00; }
.fv-icon-doc { background: #e8f0fe; color: #1a56db; }
.fv-icon-xls { background: #ecf6ee; color: #1f6b33; }
.fv-item .cl-title { font-size: 15.5px; }
.fv-item .cl-meta { margin-top: 3px; }
.fv-fname { color: #9ca3af; overflow-wrap: anywhere; }
.fv-actions { flex-direction: row; min-width: 0; }
@media (max-width: 640px) {
.fv-zip { align-items: stretch; width: 100%; }
.fv-item { grid-template-columns: 40px minmax(0, 1fr); }
.fv-icon { width: 40px; height: 40px; font-size: 10px; }
}
/* podglad pliku */
.fp-topbar .topbar-left { min-width: 0; gap: 12px; }
.fp-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; font-weight: 600; }
.fp-back { margin-right: 0; }
.fp-nav { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; }
.fp-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; font-size: 19px; line-height: 1; }
.fp-arrow:hover { background: rgba(255,255,255,.12); }
.fp-size { opacity: .8; font-size: 12px; }
@media (max-width: 640px) { .fp-title { max-width: 60vw; } }
/* formularz kodu dostepu: siatka zamiast wysrodkowanego flexa */
.ac-form-card form.ai-analysis-form { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.ac-form-card .grant-meta-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: end; }
.ac-form-card .grant-meta-row label { min-width: 0; }
.ac-form-card label { text-align: left; font-weight: 600; font-size: 12.5px; color: #4b5563; }
.ac-form-card input[type="text"], .ac-form-card input[type="date"] { width: 100%; font-weight: 400; }
.ac-form-card label.demo-toggle { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; color: #374151; padding-bottom: 8px; }
.ac-form-card .scope-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ac-form-card .scope-box { min-width: 0; }
.ac-form-card label.scope-item { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 13.5px; color: #1f2430; padding: 6px 2px; cursor: pointer; }
.ac-form-card label.scope-item input { flex: 0 0 auto; margin: 0; width: auto; }
.ac-form-card .scope-client { color: #6b7280; }
.ac-form-card .anomaly-form-buttons { justify-content: flex-start; }
@media (max-width: 760px) { .ac-form-card .grant-meta-row, .ac-form-card .scope-columns { grid-template-columns: 1fr; } }
/* formularze wgrywania: do lewej, pole pliku jako strefa upuszczania */
.card form.upload-form { align-items: flex-start; }
.jl-new .upload-form { align-items: stretch !important; gap: 10px; }
.jl-new .upload-form > label:first-child { font-weight: 600; font-size: 13px; color: #4b5563; display: flex; flex-direction: column; gap: 6px; }
.jl-new input[type="file"] { width: 100%; padding: 22px 16px; border: 2px dashed #c9ccd1; border-radius: 10px; background: #fafbfc; cursor: pointer; font-size: 13.5px; }
.jl-new input[type="file"]:hover { border-color: var(--brand-color); background: #fff; }
.jl-new .sg-ai-opts { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 14px; }
.jl-new .sg-ai-opts legend { font-size: 12.5px; font-weight: 600; color: #4b5563; padding: 0 4px; }
.jl-new .sg-ai-opts label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.jl-new .jl-submit { align-self: flex-start; }
.cl-btn.fv-ghost { border-color: transparent; background: transparent; }
.cl-btn.fv-ghost:hover { background: #eef0f3; }
.card .pl-del:not(:disabled) { color: #8a8f98; }
/* ==========================================================================
Priorytet 3 (tura 1): logowanie admina, ustawienia, uzytkownicy,
falowniki, konwerter, kalibracja, instrukcje
========================================================================== */
/* logowanie admina */
.login-box input.login-field { text-align: left; letter-spacing: 0; font-size: 16px; margin-bottom: 14px; }
.login-pass { position: relative; }
.login-pass input.login-field { padding-right: 74px; }
.login-box .login-eye { position: absolute; right: 6px; top: 6px; width: auto; padding: 6px 10px; font-size: 12.5px; font-weight: 600;
background: #f3f4f6; color: #374151; border-radius: 6px; }
.login-box .login-eye:hover { background: #e5e7eb; }
/* ustawienia */
.st-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: #1f2430; margin-bottom: 8px; }
.st-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-switch-ui { width: 44px; height: 24px; border-radius: 999px; position: relative; transition: background .15s; flex: 0 0 auto; }
.st-switch-ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.st-switch input:checked + .st-switch-ui { background: #2e7d32; }
.st-switch input:checked + .st-switch-ui::after { transform: translateX(20px); }
.st-switch input:focus-visible + .st-switch-ui { outline: 2px solid var(--brand-color); outline-offset: 2px; }
.card .st-toggle-form { display: block; }
.st-warn { font-size: 12.5px; color: #8a4b00; background: #fff7ed; border: 1px solid #fde3c4; border-radius: 8px; padding: 8px 10px; }
.card .st-inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.card .st-inline-form button { width: auto; }
.st-unit { display: inline-flex; align-items: center; border: 1px solid #c9ccd1; border-radius: 7px; background: #fff; overflow: hidden; }
.card .st-unit input { width: 120px; font-weight: 400; }
.st-unit i { font-style: normal; font-size: 13px; color: #6b7280; padding: 0 10px; background: #f6f7f9; align-self: stretch; display: flex; align-items: center; border-left: 1px solid #e5e7eb; }
.st-disk { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13.5px; color: #4b5563; }
.st-disk b { font-size: 26px; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.card .st-settings { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 6px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid #eef0f3; }
.st-row-text b { display: block; font-size: 14px; color: #1f2430; }
.st-row-text span { display: block; font-size: 12.5px; color: #6b7280; margin-top: 2px; }
.card .st-row select { width: 100%; }
.st-danger-opt { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 10px 12px; border: 1px solid #f5c2c0; background: #fff8f7; border-radius: 8px; font-size: 13px; color: #5b1d1d; cursor: pointer; }
.st-danger-opt input { margin-top: 3px; }
.card .st-settings button { width: auto; }
.card .st-del { width: auto; background: transparent; color: #b42318; border: 1px solid #f5c2c0; padding: 5px 11px; font-size: 12.5px; }
.card .st-del:hover { background: #fdecea; }
.st-ok { color: #1f6b33; font-size: 13.5px; }
.st-table td { vertical-align: middle; }
@media (max-width: 640px) { .st-row { grid-template-columns: 1fr; } }
/* uzytkownicy */
.card .u-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
.u-wide { grid-column: 1 / -1; }
.u-pass { display: flex; gap: 6px; align-items: center; }
.card .u-pass input { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.u-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #374151; }
.u-table td { vertical-align: middle; }
.u-role { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: #f1f2f4; color: #4b5563; }
.u-role-full { background: #eaf1fb; color: #1e4f8f; }
.u-role-termowizja { background: #fff1e8; color: #a33a10; }
.u-role-pliki { background: #ecf6ee; color: #1f6b33; }
.u-actions { white-space: nowrap; }
.u-actions .cc-edit { display: inline-block; vertical-align: middle; }
.u-pw[open] { display: block; }
.card .u-pw-form { display: flex; gap: 6px; margin-top: 8px; }
.card .u-pw-form button { width: auto; }
@media (max-width: 640px) { .card .u-form { grid-template-columns: 1fr; } }
/* falowniki */
.ij-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2e7d32; margin-right: 2px; }
.ij-dot-2 { background: #e8622c; }
.ij-dot-3 { background: #c0392b; }
.pd-jump a.ij-off { opacity: .55; text-decoration: line-through; }
.jl-new .ij-title { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: #4b5563; }
.jl-new .ij-title input { width: 100%; font-weight: 400; }
/* zdjecia falownikow u klienta */
.ipc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ipc-item { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e4e8; border-radius: 12px; overflow: hidden; text-decoration: none; color: #1f2430; transition: box-shadow .12s, border-color .12s; }
.ipc-item:hover { border-color: #cfd3da; box-shadow: 0 4px 14px rgba(16,24,40,.08); }
.ipc-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #1b1b1f; }
.ipc-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; }
.ipc-name { font-size: 12px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipc-max { font-size: 13px; color: #b71c1c; white-space: nowrap; }
/* konwerter */
.cv-lead { font-size: 14px; color: #374151; margin: 0 0 12px; }
.card .cv-form { align-items: stretch; gap: 10px; }
.cv-form > label { font-weight: 600; font-size: 13px; color: #4b5563; display: flex; flex-direction: column; gap: 6px; }
.cv-form input[type="file"] { width: 100%; padding: 22px 16px; border: 2px dashed #c9ccd1; border-radius: 10px; background: #fafbfc; cursor: pointer; font-size: 13.5px; }
.cv-form input[type="file"]:hover { border-color: var(--brand-color); background: #fff; }
.cv-form .jl-submit { align-self: flex-start; }
.cv-guide > summary { cursor: pointer; list-style: none; }
.cv-guide > summary::-webkit-details-marker { display: none; }
.cv-guide > summary strong { display: inline; }
.cv-guide > summary::after { content: " ▾"; }
/* kalibracja */
.cb-steps { list-style: none; counter-reset: cb; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; }
.cb-steps li { counter-increment: cb; background: #f8f9fb; border: 1px solid #eceef1; border-radius: 10px; padding: 10px 12px 10px 44px; position: relative; }
.cb-steps li::before { content: counter(cb); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-dark); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cb-steps b { display: block; font-size: 13.5px; }
.cb-steps span { font-size: 12px; color: #6b7280; }
.cb-status { margin-top: 4px; }
.admin-body .calib-toolbar button { width: auto; }
#calib-map { height: max(480px, calc(100vh - 380px)); }
@media (max-width: 760px) { .cb-steps { grid-template-columns: 1fr 1fr; } }
/* instrukcje: spis tresci */
.in-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.in-main { min-width: 0; }
.in-toc details { background: #fff; border: 1px solid #e2e4e8; border-radius: 12px; padding: 12px 14px; }
.in-toc summary { cursor: pointer; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 700; }
.in-toc ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.in-toc a { display: block; padding: 6px 8px; border-radius: 7px; font-size: 13px; line-height: 1.35; color: #374151 !important; font-weight: 500 !important; text-decoration: none !important; }
.in-toc a:hover { background: #f3f4f6; }
.in-toc a.is-active { background: var(--brand-dark); color: #fff !important; }
.in-main .card { scroll-margin-top: 16px; }
@media (min-width: 1100px) {
.in-layout { grid-template-columns: 250px minmax(0, 1fr); }
.in-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
}
@media (max-width: 640px) {
.sub-nav { flex-wrap: wrap; row-gap: 6px; }
.projects-table.instr-table { table-layout: fixed; width: 100%; }
.instr-table code { word-break: break-all; }
.u-table, .u-table tbody { display: block; white-space: normal; }
.u-table thead { display: none; }
.u-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 2px; border-bottom: 1px solid #eef0f3; }
.u-table td { display: block; padding: 0; border: 0; }
.u-table td:first-child { grid-column: 1 / -1; }
.u-table td.u-actions { grid-column: 1 / -1; white-space: normal; text-align: left; }
}
/* ==========================================================================
Tura ekspertow 1: tokeny, ujednolicenie, dostepnosc (WCAG 2.2 AA)
========================================================================== */
:root {
--ink: #1f2430; --text-2: #4b5563; --text-3: #5f6672; --text-4: #6b7280;
--line: #e2e4e8; --line-soft: #eef0f3; --line-strong: #8f949c;
--surface: #fff; --surface-2: #f8f9fb; --page: #eef1f5;
--r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
--shadow-1: 0 1px 3px rgba(16,24,40,.06); --shadow-2: 0 4px 14px rgba(16,24,40,.08);
--ok-bg: #f2f9f3; --ok-line: #cfe8d4; --ok-fg: #1f6b33;
--warn-bg: #fff7ed; --warn-line: #fde3c4; --warn-fg: #8a4b00;
--err-bg: #fdecea; --err-line: #f5c2c0; --err-fg: #b71c1c;
--brand-ink: color-mix(in srgb, var(--brand-color) 78%, black);
--brand-tint: rgba(var(--brand-color-rgb), .07); --brand-tint-line: rgba(var(--brand-color-rgb), .28);
}
html { scroll-padding-top: 76px; scroll-padding-bottom: 64px; }
/* DS-1: kontrolki tym samym krojem co strona */
button, input, select, textarea { font-family: inherit; }
/* A11Y-1: przyciski i elementy w kolorze marki z bialym tekstem */
.cl-btn-primary, .pd-btn-primary { background: var(--brand-fill); border-color: var(--brand-fill); }
.report-link, .sg-download-btn, .cc-add-btn, .card .pl-new-btn, .card .jl-submit, .card .cal-submit, .card .cc-submit,
.card.jb-actions .jb-publish, .admin-body .sg-save-bar .sg-save-next, .pd-steps li.is-current b, .jl-plus,
.cal-grid td.cal-today .cal-day span, .admin-body .card .calib-view-btn.active, .tour-next { background: var(--brand-fill); }
.card .pl-new-btn[aria-expanded="true"] { background: #fff; color: var(--brand-dark); }
.temp-tool-btn.active, .admin-body .temp-tool-btn.active, .loupe-toggle-btn.active { background: var(--brand-fill); color: #fff; }
.sg-kicker, .cl-next-cta, .inv-progress, .tour-step-counter, .calib-highlight, .sg-thread-form summary,
.download-menu-list a:hover { color: var(--brand-ink) !important; }
/* A11Y-2 / A11Y-23: szary tekst z kontrastem >= 4,5:1 */
.hint, .pl-sub, .login-help, .cal-note, .jb-tile small, .sg-num-stats small, .sg-line-stats small,
.pl-status-empty, .admin-nav-logout, .layers-note, details.layers-note summary, .anomaly-comment-date, .pl-chip span, .cal-opt,
.sg-ed-of, .jl-time, .fv-fname, .c-th-hint, .tour-close, .cl-hero-sub, .cl-help, .cl-none, .cl-meta, .jl-meta, .cl-date,
.c-insp span, .pd-meta, .cc-item-meta, .cal-up-meta, .cal-up-when, .cal-kpi span, .jb-stats span, .jb-stats small,
.sg-unit-n, .sg-facts dt, .cl-next-label, .sg-help summary { color: var(--text-3); }
.pl-muted, .card .pl-del, .card .pl-del:not(:disabled), .card .sg-del-x { color: var(--text-4); }
.cal-out .cal-day, .cal-grid th.cal-we-h { color: #7b818b; }
.cards-group-title { color: var(--text-3); border-bottom-width: 1px; }
.sg-cards-m td[data-label]::before { color: var(--text-3); }
.sg-stat-zero { opacity: 1; }
.sg-stat-zero .sg-stat-n, .sg-stat-zero > span, .sg-stat-zero small { color: var(--text-3); }
.sg-stat-zero { border-top-color: #cfd3da !important; background: #f8f9fb; }
.cl-card-off .cl-title, .cl-card-off .cl-icon { opacity: 1; }
.cl-card-off .cl-title { color: var(--text-3); }
.pd-layers span { color: var(--text-3); }
input::placeholder, textarea::placeholder { color: var(--text-4); }
.login-box input.login-code::placeholder { color: #8f949c; }
/* A11Y-6 / DS-8: poziom 2 jednym, ciemniejszym pomaranczem (bialy tekst) */
.sg-prio-2, .inv-coa-2, .admin-body .af-coa-2.is-on, .ij-dot-2, .bd-cls-2 { background: var(--sev-2); border-color: var(--sev-2); }
.pd-steps li.is-warn b { color: #3b2f00; }
.jl-new[open] .jl-plus { background: var(--text-4); }
/* DS-5 + DS-7: pigulki stopni w kafelkach i spojna skala klas budynku */
.cl-pill-c2, .sg-verdict-c2 { background: #fff0e0; color: #a84d08; }
.cl-pill-c1, .sg-verdict-c1 { background: #fff8e1; color: #8a6100; }
.jb-stats span.cl-pill { color: #374151; }
.jb-stats span.cl-pill-p1, .jb-stats span.cl-pill-c3 { color: var(--err-fg); }
.jb-stats span.cl-pill-p2, .jb-stats span.cl-pill-c2 { color: #a84d08; }
.jb-stats span.cl-pill-p3, .jb-stats span.cl-pill-c1 { color: #8a6100; }
.jb-stats span.cl-pill-p4 { color: var(--ok-fg); }
.jb-stats span.cl-pill-obs { color: #455a64; }
/* A11Y-7 / DS-18: widoczny fokus na wszystkich stronach */
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.login-box input:focus, .card .c-email-form input:focus { box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), .35); }
.card .c-email-form input { border-color: #d7dae0; background: #fff; }
/* A11Y-22: obramowania pol formularzy z kontrastem >= 3:1 */
:is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden]), select, textarea):not(:focus):not(.is-invalid) { border-color: var(--line-strong); }
.card .st-unit input { border: 0 !important; }
.st-unit, .pl-search input, .cl-toolbar input, .ac-filter { border-color: var(--line-strong); }
.st-switch-ui { background: #8f949c; }
/* DS-2 / UX-3: przycisk drugorzedny wszedzie wyglada tak samo */
.admin-body button.btn-secondary, .card button.btn-secondary { width: auto; background: var(--surface); color: var(--brand-dark); border: 1px solid #c9ccd1 !important; }
.admin-body button.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
/* DS-3: przyciski usuwania - czerwony kontur */
.admin-body button.delete-btn, .admin-body .jb-delete button { width: auto; background: var(--surface); color: #b42318; border: 1px solid var(--err-line) !important; }
.admin-body button.delete-btn:hover, .admin-body .jb-delete button:hover { background: var(--err-bg); color: #96281b; }
/* DS-4: brak przypadkowych przyciskow na cala szerokosc w kartach */
.admin-body .card button:where(:not(.cal-submit, .temp-tool-btn, .photo-gallery-item button, .login-eye)) { width: auto; }
.card .ai-analysis-form > button, .card .ai-analysis-form .anomaly-form-buttons button { align-self: flex-start; }
/* DS-15: kalibracja - przelacznik widoku jako segmenty */
.admin-body .card .calib-view-btn:not(.active) { background: var(--surface); color: var(--brand-dark); border: 1px solid #c9ccd1; }
#calib-map { border-color: var(--line); }
/* DS-10: pozostale pola formularzy jak pola tekstowe */
:where(.card) input:is([type=date], [type=number], [type=email], [type=password], [type=time]) { padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 14px; background: #fff; color: var(--ink); }
:where(.card) input[type=file] { font-size: 13px; color: var(--text-2); }
:where(.card) input[type=file]::file-selector-button { font: inherit; font-weight: 600; padding: 6px 12px; margin-right: 10px; border: 1px solid #c9ccd1; border-radius: var(--r-sm); background: #fff; color: var(--brand-dark); cursor: pointer; }
/* DS-11: tabele stref/wykazow ze standardowym naglowkiem */
.inv-zones th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.inv-zones td { border-bottom-color: var(--line-soft); }
/* DS-9: odcienie marki zamiast zakodowanego koloru jednej marki */
.callout { background: var(--brand-tint); border-color: var(--brand-tint-line); color: var(--ink); }
.cv-guide > summary::after { color: var(--brand-dark); }
.bulk-bar { background: var(--brand-tint); border-color: var(--brand-tint-line); }
.bulk-bar #bulk-count { color: var(--brand-dark); }
.anomaly-item.active { background: var(--brand-tint); }
/* DS-13: komunikaty */
.success-banner { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-fg); border-radius: var(--r-md); font-size: 13.5px; }
.admin-wrap p.error { background: var(--err-bg); border: 1px solid var(--err-line); color: #9b1c1c; border-radius: var(--r-md); padding: 9px 12px; }
.jb-pub-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
/* DS-16 / DS-17: karty raportu klienta i wylogowanie na mapie */
.sg-card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.viewer-body #topbar .logout-link { color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 6px 12px; border-radius: var(--r-sm); }
.viewer-body #topbar .logout-link:hover { background: rgba(255,255,255,.12); }
/* DS-19 / DS-25 */
.card .pl-chip { padding: 6px 13px; }
.card .pd-more { color: var(--text-3); text-decoration: none; }
.card .pd-more:hover { color: var(--brand-dark); text-decoration: underline; }
/* A11Y-5: zamkniety panel anomalii poza kolejnoscia tabulacji */
.anomaly-panel { visibility: hidden; transition: transform .2s, visibility 0s .2s; }
.anomaly-panel.open { visibility: visible; transition: transform .2s; }
.anomaly-item-go { all: unset; cursor: pointer; display: block; font-weight: 700; }
.anomaly-item-go:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
/* A11Y-19 */
.sg-totop:not(.is-on) { visibility: hidden; }
/* A11Y-12: sortowane kolumny */
.th-sort { all: unset; cursor: pointer; }
.th-sort:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
/* A11Y-13: link "Przejdz do tresci" */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 3000; background: var(--brand-dark); color: #fff !important; padding: 8px 14px; border-radius: var(--r-md); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
/* A11Y-20: cele dotykowe */
.att-move-btn, .sg-mini, .card .c-link, .card .pl-code, .cl-code { min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
details.layers-note summary { min-height: 24px; display: flex; align-items: center; }
@media (max-width: 760px) {
.cal-ev { min-height: 24px; margin-bottom: 4px; }
.cl-code, details.layers-note summary { min-height: 32px; }
}
/* A11Y-21: zawijanie przy 320 px */
.ai-describe-row input { min-width: min(260px, 100%); }
.inv-station-name { min-width: min(280px, 100%); }
.sg-lgroup-title { min-width: min(220px, 100%); }
@media (max-width: 640px) { .anomaly-panel { top: 78px; } }
/* UX-10: edytor termogramu i naglowek panelu na telefonie */
@media (max-width: 760px) {
.sg-ed-row .inv-inline { display: flex; flex-wrap: wrap; max-width: 100%; gap: 4px; }
.card .sg-ed-row select { width: 100%; min-width: 0; }
.sg-ed-top { position: static; }
.sg-save-bar { flex-wrap: wrap; }
.sg-ed-nav .sg-nav-btn { white-space: nowrap; }
.admin-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.admin-nav a { flex: 0 0 auto; }
}
/* UX-22: przycisk raportu na telefonie zawsze widoczny w pasku */
@media (max-width: 640px) { .topbar-right .report-link { order: -1; } }
/* A11Y-17: ograniczony ruch */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ==========================================================================
Tura ekspertow 2: regresje i dalsze ujednolicenie
========================================================================== */
:root { --brand-fill: color-mix(in srgb, var(--brand-color) 85%, black); --sev-2: #ea7a0c; --sev-2-text: #2b1600; }
/* poziom 2: jasniejszy pomarancz z ciemnym tekstem (nie myli sie z przyciskiem glownym ani z poziomem 1) */
.sg-prio-2, .inv-coa-2, .bd-cls-2, .admin-body .af-coa-2.is-on { background: var(--sev-2); border-color: var(--sev-2); color: var(--sev-2-text); }
/* naglowki sortowania to tekst, nie przyciski */
.admin-body .card button.th-sort { all: unset; cursor: pointer; }
.admin-body .card button.th-sort:hover { color: var(--brand-ink); }
.admin-body .card button.th-sort:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; border-radius: 3px; }
/* przyciski o stalym rozmiarze */
.admin-body .card .af-coa { width: 34px; }
.admin-body .card .cal-add { width: 22px; }
.admin-body .card .sg-del-x { width: 26px; }
/* karta pobierania PDF w raporcie klienta zachowuje ramke */
.sg-card.sg-download { border: 2px solid var(--brand-fill); background: var(--surface); }
/* jeden, ciemniejszy hover dla przyciskow w kolorze marki */
:is(.cl-btn-primary, .pd-btn-primary, .report-link, .sg-download-btn, .card.jb-actions .jb-publish,
.admin-body .sg-save-bar .sg-save-next, .tour-next, .admin-body button.btn-primary, .card .pl-new-btn:not([aria-expanded="true"]), .card .jl-submit, .card .cal-submit, .card .cc-submit, .cc-add-btn):hover {
background: color-mix(in srgb, var(--brand-fill) 85%, black); border-color: color-mix(in srgb, var(--brand-fill) 85%, black); filter: none; }
/* fokus widoczny na ciemnym pasku gornym */
#topbar :focus-visible { outline-color: #fff; }
#tresc:focus { outline: none; }
/* resztki czystego koloru marki w komponentach z wypelnieniem */
.admin-body .card .calib-view-btn.active { border: 1px solid var(--brand-fill); }
.pd-steps li.is-current a { border-color: var(--brand-fill); }
/* jeden szary dla obramowan przyciskow obrysowanych i chipow */
.pd-btn:not(.pd-btn-primary), .cl-btn:not(.cl-btn-primary):not(.fv-ghost), .cc-open, .cc-edit summary,
.cal-arrow, .cal-today-btn, .card .pl-chip, .card .cl-chip, .cl-chip, .admin-body .af-coa, .sg-jump a, .pd-jump a { border-color: #c9ccd1; }
/* jawny przycisk glowny (utworz / zapisz i dalej) */
.admin-body button.btn-primary, .admin-body .card button.btn-primary { background: var(--brand-fill); color: #fff; border: 0; }
/* geometria przyciskow */
.card .jl-submit, .card .cal-submit, .card .cc-submit, .cl-btn, .report-link, .projects-link,
.viewer-body #topbar .logout-link, .cl-body .logout-link { border-radius: var(--r-md); }
.report-link, .projects-link, .viewer-body #topbar .logout-link, .cl-body .logout-link { font-weight: 600; }
.sg-thread-form button { font-size: 13.5px; font-weight: 600; }
/* naglowki tabel i chipy kodow */
.projects-table th { font-size: 11.5px; color: var(--text-3); }
.card .pl-code, .cl-code { border: 1px dashed #c9ccd1; background: #f6f7f9; color: var(--ink); font-size: 12.5px; }
/* kontrast: reguly, ktore wczesniej przegraly specyficznoscia */
.admin-nav-logout { color: var(--text-3) !important; }
.card .pl-chip span, .card .cl-chip span, .cl-chip span { color: var(--text-3); }
.card .pl-chip.is-active span, .card .cl-chip.is-active span, .cl-chip.is-active span { color: rgba(255,255,255,.8); }
.cal-grid td.cal-out .cal-day, .cal-grid th.cal-we-h { color: var(--text-4); }
.loupe-toggle-btn.active { background: var(--brand-fill) !important; color: #fff !important; }
.card .c-email-form input::placeholder, .login-box input.login-code::placeholder { color: var(--text-4); }
.pl-table td.pl-date::before, .card .cal-add { color: var(--text-3); }
/* kotwice: bez podwojnego odstepu od gory */
html:has(.sg-client-body) { scroll-padding-top: calc(var(--tb-h, 0px) + 62px); }
.sg-client [id], .project-cards .cards-group-title, .in-main .card { scroll-margin-top: 0; }
.inv-station { scroll-margin-top: 14px; }
/* kalendarz na telefonie: kilka wpisow w dniu nie jest ucinanych */
@media (max-width: 760px) {
.cal-grid td { height: auto; min-height: 64px; }
.cal-ev { display: inline-flex; min-width: 24px; margin: 0 2px 2px 0; }
}
/* komunikaty statusu: znikaja, gdy sa puste (bez przelaczania display w JS) */
.comment-status:empty { display: none; }
/* ---------------- tura 2 UX */
/* nastepny krok (weryfikacja) wyrazniejszy od zwyklych przyciskow, ale nie pomaranczowy (ten jest dla publikacji) */
.card.jb-actions .jb-verify { background: var(--brand-dark); color: #fff !important; border-color: var(--brand-dark); }
.card.jb-actions .jb-verify:hover { background: color-mix(in srgb, var(--brand-dark) 85%, black); }
.pl-com { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--warn-fg); white-space: nowrap; }
/* galeria zdjec falownikow: przycisk usuwania na cala szerokosc karty; jeden styl usuwania w edytorze */
.admin-body .photo-gallery-item button.delete-btn { width: 100%; }
/* PDF na telefonach: pasek "Otworz / Pobierz" (wbudowany podglad PDF czesto nie dziala) */
.pdf-mobile-bar { display: none; }
@media (max-width: 640px) {
.pdf-mobile-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; background: #fff; border-bottom: 1px solid var(--line); }
.pdf-mobile-bar a { flex: 1 1 auto; text-align: center; }
.pdf-mobile-bar + .report-pdf-embed { height: calc(100% - 64px); }
}
@media (max-width: 760px) {
.sg-ed-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; }
.sg-ed-nav select { max-width: none; width: 100%; min-width: 0; }
.card.jb-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card.jb-actions .pd-btn { white-space: normal; text-align: center; }
}
@media (max-width: 640px) {
.sg-thermo-body { grid-template-columns: minmax(0, 1fr); }
.sg-thermo-imgs img { max-width: 100%; }
}
/* teksty tylko dla czytnikow nie poszerzaja strony (np. w przewijanej tabeli) */
.sr-only { left: 0; top: 0; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); }
.pl-table-wrap, .inv-zones-wrap, .sg-table-wrap { position: relative; }
/* Ustawienia: podglad podpisu do raportow PDF (przezroczyste tlo na kratce) */
.sig-preview { margin: 4px 0 12px; padding: 10px; border: 1px solid var(--line, #d9dbe0); border-radius: 8px;
background: #fff repeating-conic-gradient(#f1f2f4 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; text-align: center; }
.sig-preview img { max-width: 100%; max-height: 90px; }
/* ---------------------------------------------------------------- powiadomienia (dzwonek) i akceptacje */
.notif { position: relative; display: inline-flex; margin-left: 8px; }
.admin-body .notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
padding: 0; border: 1px solid var(--line, #e2e4e8); border-radius: 50%; background: #fff; color: var(--brand-dark); cursor: pointer; }
.admin-body .notif-bell:hover { background: #eef1f5; }
.admin-body .notif-bell.has-unread { border-color: var(--brand-fill, var(--brand-color)); }
.notif-badge { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: #c62828; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000; width: min(380px, calc(100vw - 24px));
max-height: min(70vh, 520px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line, #e2e4e8);
border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft, #eef0f3); }
.admin-body .notif-allread { width: auto; font-weight: 500; border-radius: 4px; border: 0; background: none; color: var(--brand-dark); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 2px; }
.notif-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.admin-body .notif-item { border-radius: 0; font-weight: 400; display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; width: 100%; padding: 10px 12px; border: 0;
border-bottom: 1px solid var(--line-soft, #eef0f3); background: #fff; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.admin-body .notif-item:hover { background: #f6f7f9; }
.admin-body .notif-item.unread { background: #fff7e6; }
.admin-body .notif-item.unread:hover { background: #ffefcc; }
.notif-item > :not(.notif-dot) { grid-column: 2; }
.notif-dot { grid-column: 1; grid-row: 1; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #c62828; }
.notif-title { font-weight: 600; font-size: 13.5px; }
.notif-body { font-size: 13px; color: #4b5563; margin-top: 2px; }
.notif-time { font-size: 12px; color: #6b7280; margin-top: 3px; }
.notif-empty { padding: 14px 12px; color: #6b7280; font-size: 13px; }
.notif-foot { padding: 9px 12px; border-top: 1px solid var(--line-soft, #eef0f3); font-size: 13px; }
@media (max-width: 760px) {
.notif-panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; }
}
.appr-status { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
vertical-align: middle; background: #e9edf1; color: #3f4a54; }
.appr-pending { background: #fff4c2; color: #6b5300; }
.appr-approved { background: #e3f3e6; color: #1f5f2c; }
.appr-rejected, .appr-outdated { background: #fbe3e1; color: #9b1c1c; }
.appr-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 8px; }
.appr-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.appr-form .appr-note { flex: 1 1 260px; }
.appr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.appr-table th, .appr-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft, #eef0f3); text-align: left; vertical-align: top; }
.appr-row-pending td { background: #fffbea; }
.appr-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 6px 0 12px; font-size: 14px; }
.appr-dl dt { color: #5f6672; }
.appr-dl dd { margin: 0; }
.appr-text { white-space: pre-wrap; }
.appr-links { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 13.5px; }
.prof-form input[type=text], .prof-form textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .appr-table thead { display: none; } .appr-table td { display: block; border: 0; padding: 4px 0; }
.appr-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft, #eef0f3); }
.appr-table td[data-label]::before { content: attr(data-label) ": "; color: #6b7280; } }
.prof-form .prof-check { flex-direction: row; align-items: flex-start; gap: 8px; }
.prof-form .prof-check input { margin-top: 3px; }
/* ================= Porownanie z poprzednim badaniem ================= */
/* Tokeny: neutralne (bez kolorow marki), poziomy jak report_theme.SEVERITY. */
:root {
--chg-badge-bg: #1f2430; --chg-badge-fg: #fff; --chg-halo: #fff; --chg-ghost: #1f2430;
--sev-critical-fg: #9b1c1c; --sev-critical-bg: #fbe3e1;
--sev-major-fg: #8a3c00; --sev-major-bg: #ffe8d1;
--sev-minor-fg: #6b5300; --sev-minor-bg: #fff4c2;
--sev-low-fg: #2b4a6f; --sev-low-bg: #e5edf6;
--sev-ok-fg: #1f5f2c; --sev-ok-bg: #e3f3e6;
--sev-info-fg: #3f4a54; --sev-info-bg: #e9edf1;
}
/* CoA 1 (zielone tlo): ciemna cyfra - kontrast >= 4,5:1 */
.existing-anomaly-marker.coa-1 { color: #1f2430; }
.sev-chip-critical { color: var(--sev-critical-fg); background: var(--sev-critical-bg); }
.sev-chip-major { color: var(--sev-major-fg); background: var(--sev-major-bg); }
.sev-chip-minor { color: var(--sev-minor-fg); background: var(--sev-minor-bg); }
.sev-chip-low { color: var(--sev-low-fg); background: var(--sev-low-bg); }
.sev-chip-ok { color: var(--sev-ok-fg); background: var(--sev-ok-bg); }
.sev-chip-info { color: var(--sev-info-fg); background: var(--sev-info-bg); }
.cmp-st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; border-radius: 10px;
font-size: 12.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.cmp-st-nie_zweryfikowano { border: 1px dashed currentColor; }
/* ksztalty statusu (aria-hidden; slowo zawsze obok) */
.cmp-shape { display: inline-block; width: 12px; height: 12px; flex: none; position: relative; }
.cmp-shape-plus::before, .cmp-shape-plus-hollow::before { content: "+"; position: absolute; inset: -3px 0 0 0; font-weight: 800; font-size: 14px; line-height: 14px; text-align: center; }
.cmp-shape-up { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid currentColor; }
.cmp-shape-down { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 11px solid currentColor; }
.cmp-shape-eq::before { content: "="; position: absolute; inset: -3px 0 0 0; font-weight: 800; font-size: 14px; line-height: 14px; text-align: center; }
.cmp-shape-q::before { content: "?"; position: absolute; inset: -2px 0 0 0; font-weight: 800; font-size: 12px; line-height: 14px; text-align: center; }
.cmp-shape-warn::before { content: "!"; position: absolute; inset: -2px 0 0 0; font-weight: 800; font-size: 12px; line-height: 14px; text-align: center; }
.cmp-shape-check::before { content: "✓"; position: absolute; inset: -2px 0 0 0; font-weight: 800; font-size: 12px; line-height: 14px; text-align: center; }
.cmp-shape-none { width: 10px; height: 10px; border: 2px dashed currentColor; border-radius: 50%; box-sizing: border-box; }
.cmp-st-nie_zweryfikowano .cmp-shape-q { border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
/* znaczniki mapy: odznaka w prawym gornym rogu, wlasne halo (2 px bialy + 1 px ciemny) */
/* .leaflet-marker-icon jest position:absolute - nie nadpisywac (odznaka pozycjonuje sie wzgledem niego) */
.cmp-marker-wrap .existing-anomaly-marker { width: 24px; height: 24px; }
.cmp-badge { position: absolute; top: -7px; right: -8px; width: 14px; height: 14px; border-radius: 50%;
background: var(--chg-badge-bg); color: var(--chg-badge-fg);
box-shadow: 0 0 0 2px var(--chg-halo), 0 0 0 3px #1f2430; display: block; }
.cmp-badge::before { position: absolute; inset: 0; text-align: center; font: 800 11px/14px system-ui, sans-serif; }
.cmp-badge-plus::before { content: "+"; }
.cmp-badge-plus-hollow { background: #fff; color: #1f2430; box-shadow: 0 0 0 1.5px #1f2430, 0 0 0 3px #fff; }
.cmp-badge-plus-hollow::before { content: "+"; }
.cmp-badge-eq::before { content: "="; }
.cmp-badge-q::before { content: "?"; }
.cmp-badge-warn { background: var(--sev-minor-bg); color: var(--sev-minor-fg); }
.cmp-badge-warn::before { content: "!"; }
.cmp-badge-check::before { content: "✓"; }
.cmp-badge-up::before { content: ""; inset: 3px auto auto 3px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid currentColor; }
.cmp-badge-down::before { content: ""; inset: 4px auto auto 3px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid currentColor; }
.cmp-ghost { position: relative; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center; font: 700 11px/1 system-ui, sans-serif; color: #1f2430;
text-shadow: 0 0 2px #fff, 0 0 2px #fff; box-shadow: 0 0 0 2px var(--chg-halo); }
.cmp-ghost-dashed { border: 2px dashed var(--chg-ghost); }
.cmp-ghost-solid { border: 1.5px solid var(--chg-ghost); }
.leaflet-marker-icon.cmp-marker-wrap:focus-visible { outline: 2px solid #1f2430; outline-offset: 3px; }
.cmp-map { height: 460px; border-radius: 8px; margin: 10px 0; }
.cmp-legend-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); font-size: 13px; }
.cmp-legend-list li { display: flex; align-items: center; gap: 10px; }
.cmp-lg-marker { position: relative; display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #9ca3af; border: 2px solid #fff; box-shadow: 0 0 0 1px #9ca3af; }
.cmp-legend-list .cmp-ghost { display: inline-flex; }
/* panel */
.cmp-inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 8px 4px 0; }
.cmp-dec-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 6px; }
.cmp-dec-form select { max-width: 340px; }
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-table caption { text-align: left; font-weight: 600; padding: 4px 0 8px; }
.cmp-table th, .cmp-table td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; vertical-align: top; text-align: left; }
.cmp-table thead th { background: #f6f7f9; font-size: 12px; }
.cmp-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-table th.cmp-loc { font-weight: 500; }
.cmp-table tr.cmp-row-open { background: #fffbea; }
.cmp-table tr:focus { outline: 2px solid #1f2430; outline-offset: -2px; }
.cmp-table tbody th.cmp-grp { background: #f1f3f6; font-weight: 700; }
.cmp-thumbs { display: flex; gap: 4px; margin-top: 4px; }
.cmp-thumbs img { width: 120px; height: auto; border-radius: 4px; border: 1px solid #d1d5db; }
.cmp-urgent { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 6px; color: var(--sev-critical-fg); background: var(--sev-critical-bg); }
.cmp-pill { display: inline-block; font-weight: 600; padding: 3px 10px; border-radius: 12px; font-size: 13px; margin: 4px 0; }
.cmp-pill-minor { color: var(--sev-minor-fg); background: var(--sev-minor-bg); }
.cmp-pill-ok { color: var(--sev-ok-fg); background: var(--sev-ok-bg); }
.cmp-pill-info { color: var(--sev-info-fg); background: var(--sev-info-bg); }
.cmp-pill-critical { color: var(--sev-critical-fg); background: var(--sev-critical-bg); }
.cmp-alert-critical { background: var(--sev-critical-bg); border-color: #f3b4ae; color: var(--sev-critical-fg); }
.cmp-warn-list { margin: 8px 0; padding-left: 18px; font-size: 13px; }
.cmp-filters { border: 0; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-filters legend { font-weight: 600; font-size: 13px; padding: 0; margin-bottom: 4px; width: 100%; }
.cmp-chip { border: 1px solid #c9ccd1; background: #fff; border-radius: 14px; padding: 4px 12px; font-size: 13px; cursor: pointer; min-height: 28px; }
.cmp-chip[aria-pressed="true"] { background: #1f2430; color: #fff; border-color: #1f2430; }
.cmp-chip:focus-visible { outline: 2px solid #1f2430; outline-offset: 2px; }
.cmp-details { margin-top: 4px; font-size: 12.5px; }
.cmp-details summary { cursor: pointer; color: #1f4e8c; }
.cmp-repair { display: grid; gap: 4px; margin-top: 4px; max-width: 360px; }
.cmp-bulk { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 8px 0; }
.cmp-danger { color: var(--sev-critical-fg); }
/* klient */
.cmp-stats .sg-stat-nie_zweryfikowano { border-top-style: dashed; }
.cmp-stats .sg-stat { border-top-color: #cbd5e1; }
.cmp-stats .cmp-tile-pogorszenie { border-top-color: var(--sev-critical-fg); }
.cmp-stats .cmp-tile-nowa { border-top-color: var(--sev-major-fg); }
.cmp-stats .cmp-tile-poprawa, .cmp-stats .cmp-tile-nie_stwierdzono { border-top-color: var(--sev-low-fg); }
.cmp-stats .cmp-tile-nie_zweryfikowano { border-top: 4px dashed var(--sev-info-fg); }
.cmp-notes { font-size: 13px; color: #374151; }
.cmp-notes p { margin: 4px 0; }
.cmp-figs { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.cmp-figs figure { margin: 0; max-width: 320px; }
.cmp-figs img { width: 100%; border-radius: 6px; border: 1px solid #d1d5db; }
.cmp-figs figcaption { font-size: 12px; color: #4b5563; }
.cl-cmp-line { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 720px) {
.cmp-items thead { display: none; }
.cmp-items tr { display: block; border-bottom: 1px solid #e5e7eb; padding: 6px 0; }
.cmp-items td, .cmp-items th { display: block; border: 0; padding: 2px 4px; text-align: left !important; }
.cmp-items td[data-label]::before, .cmp-items th[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: #4b5563; }
.cmp-map { height: 50vh; }
}
@media (prefers-reduced-motion: reduce) { .cmp-table tr { scroll-behavior: auto; } }
.cmp-tabs { display: inline-flex; gap: 4px; }
.cmp-tabs [role="tab"] { border: 1px solid #c9ccd1; background: #fff; border-radius: 6px; padding: 3px 10px; font-weight: 600; cursor: pointer; }
.cmp-tabs [role="tab"][aria-selected="true"] { background: #1f2430; color: #fff; border-color: #1f2430; }
.cmp-tabs [role="tab"]:focus-visible { outline: 2px solid #1f2430; outline-offset: 2px; }
.cmp-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.cmp-go { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; }
.cmp-st-word { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.cmp-controls { border-top: 1px solid #e5e7eb; margin-top: 6px; padding-top: 6px; }
.cmp-controls .cmp-legend { font-size: 12.5px; }
.cmp-popup-line { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #e5e7eb; }
.cmp-lead { font-size: 13px; margin: 4px 0 8px; }
.report-view-cmp { max-width: 1100px; margin: 12px auto; padding: 0 12px; }
.cmp-rv-details > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.cmp-skip { position: absolute; }
/* przyciski