/* ============================================================================
   23-ustawienia.css — widok Ustawienia + działy w kartotece Użytkownicy
   ----------------------------------------------------------------------------
   Ustawienia to KOLUMNA składanych paneli, nie siatka kafli: każdy panel jest
   osobnym formularzem z własnym „Zapisz". Panel bierze wygląd z .panel
   (05-komponenty) — tu zostają tylko różnice: nagłówek jako <div>, akordeon,
   siatka pól, przełączniki, podglądy obrazów. Wartości = 00-tokens.css.
   ============================================================================ */
/* === 1. STRONA I KOLUMNA PANELI ============================================
   Wąska kolumna: pole tekstowe na całą szerokość ekranu jest nieczytelne.
   Szerokość to decyzja tego widoku — brak tokenu, więc zmienna lokalna
   (tak samo jak --okno-w w 05-komponenty). display:contents na .settings-column
   usuwa wrapper z układu, żeby panele były bezpośrednimi dziećmi siatki. */
.settings-page { --kolumna: 720px; width: 100%; max-width: var(--kolumna); }
.settings-header { margin-bottom: var(--s-2); }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.settings-column { display: contents; }
/* D2-13 (27.09.2026, pytanie 13): panele w 4 grupach — Moje konto · Firma i waluta · Wygląd prezentacji ·
   Pliki, integracje i kopia. Grupa to kolumna paneli z podpisem wersalikami (jak etykiety sekcji w oknach).
   Na komputerze (> 1180 px) dwie kolumny: lewa = konto i firma, prawa = prezentacja i pliki. Węższy ekran
   i telefon — jedna kolumna, grupy po kolei (kolumna znika z układu przez display: contents). */
.settings-grupa { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.settings-grupa-tytul { margin: var(--s-2) 0 0 var(--s-1); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
@media (min-width: 1181px) {
  .settings-page { max-width: calc(var(--kolumna) * 2 + var(--s-4)); }
  .settings-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .settings-column { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
}
/* === 2. NAGŁÓWEK PANELU ====================================================
   Panel składany trzyma nagłówek w <div class="panel-heading">, nie w <header>,
   więc reguła z 05-komponenty go nie łapie. Ta sama treść wizualna.
   <p> pod tytułem = podtytuł „po co ten panel jest"; nigdy nie krzyczy. */
/* font-weight 800 (--w-heavy) 1:1 z monolitem — zmierzone na 14 nagłówkach
   Ustawień: u nas dziedziczyły 400 i pasek tytułu był wyraźnie lżejszy. */
/* Ujednolicenie 11.08.2026 — wyściółka --s-2/--s-4 → --s-3/--s-4, czyli
   dokładnie tyle co `.panel > header` (05-komponenty:18). Komentarz wyżej
   mówi wprost „ta sama treść wizualna", a nagłówek składanego panelu miał
   pion 8 px zamiast 12 — przy samym tytule różnicy nie widać (pilnuje jej
   --h-row), ale gdy panel ma podtytuł <p>, pasek był o 8 px niższy
   niż nagłówek panelu w każdym innym widoku. */
.panel-heading { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-row); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); font-weight: var(--w-heavy); }
.panel-heading h2, .panel-heading h3 { font-size: var(--t-base); font-weight: var(--w-bold); line-height: var(--lh-tight); }
.panel-heading p { margin-top: 2px; color: var(--text-muted); font-size: var(--t-xs); line-height: var(--lh-tight); }
.panel-heading .spacer { margin-left: auto; }
/* === 3. AKORDEON ==========================================================
   Panele startują zwinięte (JS dokłada .is-collapsed) — inaczej strona ma
   kilkanaście ekranów wysokości i nie da się jej objąć wzrokiem.
   Znaczek rozwijania obraca się sam (maska z 07-ikony), nie jego ramka.
   Bez min-width:0 długi podtytuł rozpycha nagłówek zamiast się skrócić. */
.settings-panel { overflow: hidden; }
.settings-panel.is-collapsed > :not(.panel-heading) { display: none; }
.settings-accordion-heading { gap: var(--s-3); cursor: pointer; user-select: none; transition: background var(--szybko); }
/* Ujednolicenie 11.08.2026 — cały nagłówek panelu rozwija i zwija sekcję
   (`cursor: pointer`), ale nic tego nie pokazywało. Wykryte pomiarem na żywej
   stronie: jedyny klikalny element widoku Ustawień bez odzewu na kursor. */
.settings-accordion-heading:hover { background: var(--surface-2); }
.settings-accordion-heading:hover .settings-accordion-icon { border-color: var(--line-strong); }
.settings-accordion-heading > div { min-width: 0; }
/* BŁĄD (27.09.2026): przycisk w nagłówku panelu („Dodaj firmę” w Firmach zamawiających) ściskał się razem z długim
   opisem i na 1024 px ucinał napis („Dodaj firm”). Przycisk trzyma szerokość napisu, zawija się opis obok. */
.settings-accordion-heading > .button { flex: 0 0 auto; white-space: nowrap; }
.settings-accordion-icon { display: inline-grid; place-items: center; flex: 0 0 auto; margin-left: auto; color: var(--text-muted); width: var(--h-control-sm); height: var(--h-control-sm); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); transform: rotate(-90deg); transition: transform var(--szybko) ease; }
.settings-panel:not(.is-collapsed) .settings-accordion-icon { transform: rotate(0deg); }
/* === 4. TREŚĆ FORMULARZA ===================================================
   Siatka dwukolumnowa, bo pola ustawień chodzą parami (hasło + powtórz).
   .settings-note = wiersz „etykieta … wartość", .settings-help = zdanie
   o skutku ustawienia POD przyciskami. „Zapisz" zawsze w prawym dolnym rogu,
   a ptaszek „kursy automatycznie" odpycha go w prawo (margin-right: auto).
   Wygaszenie grupy zależnej od przełącznika niesie wspólna klasa .is-disabled. */
.settings-form-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); } /* E3: kolumna nie rośnie za szeroką tabelą kopii (Kopia zapasowa wychodziła za prawą krawędź panelu). */
/* Panel dostępu (klasa także `.compact-list`) ma odstęp listy 8 px, nie formularza 12 px — tak było zawsze: ogólna
   reguła listy stała w arkuszu ładowanym później (27) i wygrywała kolejnością. K16a (v14) zapisuje to wprost. */
.settings-form-body.compact-list { gap: var(--s-2); }
.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
/* D2-24: trzy liczby firmy (projekty · kraje · lata) w jednym rzędzie; telefon — jedna kolumna (§ 11 niżej). */
.settings-liczby-firmy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* L (tor H): start licznika obok listy „Kraje już policzone” — pole daty u góry wiersza, nie rozciągnięte do wysokości listy. */
.settings-liczby-firmy-licznik { align-items: start; }
.settings-control-group { display: grid; gap: var(--s-2); }
/* Wyściółkę notatki daje `.list-row` (każda `.settings-note` jest też `.list-row`): własne `padding: 8px 12px`
   nigdy nie działało — przegrywało kolejnością z arkuszem 27 — więc usunięte (K16a, v14). */
.settings-note { min-height: var(--h-row); }
.settings-note strong { overflow-wrap: anywhere; text-align: right; }
.settings-note span { min-width: 0; }
/* ERG5-10: wiersz z kontrolką (tryb kursu NBP) — lista i pole dni obok siebie, zawijają się, gdy brak miejsca
   (było: styl wpisany w kodzie, lista ucinana „Automatycznie (przy st…"). */
.settings-note-kontrolka { align-items: center; }
.settings-kurs-tryb { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); min-width: 0; }
.settings-kurs-dni { width: 72px; }
.settings-kurs-tryb .combo { width: 230px; max-width: 100%; }
/* Klucz usługi zamaskowany + przycisk „Pokaż" w jednej linii. */
.pole-klucza { display: flex; align-items: center; gap: var(--s-2); }
.pole-klucza input { flex: 1 1 auto; min-width: 0; }
.settings-help { color: var(--text-muted); font-size: var(--t-xs); line-height: var(--lh-base); }
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); padding-top: var(--s-1); }
.settings-auto-fx { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: auto; color: var(--text-muted); font-size: var(--t-sm); }
/* Wyciete 11.08.2026 — martwe reguly, zero wystapien w public/js. Szczegoly: AUDYT-CSS-2026-08-11.md B9. */
/* === 5. PRZEŁĄCZNIK (role=switch) ==========================================
   Natywny checkbox rozciągnięty do prostokąta wygląda na zepsuty — rysujemy
   suwak: tor 36×24, gałka 16 przy marginesie 4, przesuw 12 (36−24). */
.settings-switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.settings-switch-row span { display: grid; gap: 2px; min-width: 0; }
.settings-switch-row strong { font-size: var(--t-base); font-weight: var(--w-bold); }
.settings-switch-row small { color: var(--text-muted); font-size: var(--t-xs); line-height: var(--lh-base); }
.settings-switch-row input[type="checkbox"] { position: relative; flex: none; appearance: none; cursor: pointer; background: var(--surface-3); width: calc(var(--s-6) + var(--s-1)); height: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-pill); transition: background var(--szybko) ease, border-color var(--szybko) ease; }
.settings-switch-row input[type="checkbox"]::after { content: ""; position: absolute; top: var(--s-1); left: var(--s-1); width: var(--s-4); height: var(--s-4); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--cien-1); transition: transform var(--szybko) ease; }
.settings-switch-row input[type="checkbox"]:checked { border-color: var(--accent-strong); background: var(--accent); }
.settings-switch-row input[type="checkbox"]:checked::after { transform: translateX(var(--s-3)); }
/* === 6. SEGMENTY W PANELU ==================================================
   Jeden panel, kilka rodzajów zdjęć (Rendery / Materiały) — dzieli je linia,
   nie osobne pudełko. */
.settings-segment { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.settings-segment:first-of-type { padding-top: var(--s-1); border-top: 0; }
.settings-segment-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--t-base); font-weight: var(--w-bold); }
.settings-segment-hint { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-regular); }
/* Kopia zapasowa (26.09.2026): lista kopii to `.dash-table` z Pulpitu. Kolumna „Wynik” niesie powód
   nieudanej kopii — ona jedna musi się łamać, reszta zostaje w jednej linii jak na Pulpicie. */
.settings-backup-panel .dash-table td.backup-wynik { white-space: normal; min-width: 12rem; }
/* === 7. OBRAZY (logo, zdjęcie profilowe) ===================================
   Szachownica = przezroczystość PNG, rysowana z tonu linii (przygasa w ciemnym).
   Obraz na `contain` — logo całe, nie przycięte. Zdjęcie osoby dostaje kółko.
   Nazwa i e-mail biorą CAŁĄ szerokość (flex-basis 100%), guziki idą pod nie —
   inaczej długi e-mail wypycha przyciski poza kartę. */
.settings-image-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3); }
/* NAPRAWA 11.08.2026 — przycisk "Usun logo" (.logo-preview-remove, position:absolute)
   jest RODZENSTWEM podgladu, a nie jego dzieckiem. Zaden kontener nie mial
   position, wiec kotwiczyl sie do initial containing block — ladowal w prawym
   gornym rogu EKRANU zamiast na miniaturze. Dotyczylo 6 miejsc w Ustawieniach. */
.settings-image-preview { position: relative; --podglad-w: 104px; --podglad-h: 76px; --kratka: color-mix(in srgb, var(--line-strong) 55%, transparent); display: grid; place-items: center; box-sizing: border-box; overflow: hidden; text-align: center; width: var(--podglad-w); height: var(--podglad-h); padding: var(--s-1); background-size: var(--s-4) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background-image: linear-gradient(45deg, var(--kratka) 25%, transparent 25%), linear-gradient(-45deg, var(--kratka) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--kratka) 75%), linear-gradient(-45deg, transparent 75%, var(--kratka) 75%); background-position: 0 0, 0 var(--s-2), var(--s-2) calc(var(--s-2) * -1), calc(var(--s-2) * -1) 0; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.settings-image-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.settings-image-preview.user-photo-preview-small { --podglad-w: 64px; --podglad-h: 64px; padding: 0; border-radius: var(--r-pill); }
/* ERG5-10: konto bez zdjęcia (albo z plikiem, którego nie ma) — kółko z inicjałami w kolorze działu,
   jak awatar w całym programie. Szachownica zostaje tylko pod prawdziwym obrazem (przezroczystość). */
.settings-image-preview.user-photo-preview-small.bez-zdjecia { border-color: var(--line-strong); background: var(--avatar-bg, var(--accent)); color: var(--avatar-tekst, var(--surface)); font-size: var(--t-md); font-weight: var(--w-bold); }
.settings-image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.settings-image-actions strong, .settings-image-actions span { flex: 0 0 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-image-actions strong { color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); }
.settings-image-actions span { color: var(--text-muted); font-size: var(--t-xs); }
/* === 8. PODGLĄD LOGO Z WGRYWANIEM (dostawcy, ekipy, firma) =================
   Pusty = ramka przerywana: „tu czegoś brakuje, kliknij", nie „to jest puste".
   Kasowanie w rogu podglądu jest czerwone, bo kasuje bez pytania. */
.logo-preview-click { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.logo-preview-click img { display: block; width: 100%; height: 100%; padding: var(--s-3); object-fit: contain; }
.logo-preview-click.is-empty { align-content: center; gap: var(--s-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); text-align: center; }
.logo-preview-plus { display: inline-grid; place-items: center; width: var(--s-7); height: var(--s-7); border-radius: var(--r-pill); background: var(--accent); color: var(--text-invert); }
.logo-preview-empty-text { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.logo-preview-initials { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
.logo-preview-remove { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 3; padding: 0; cursor: pointer; display: grid; place-items: center; width: var(--s-5); height: var(--s-5); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: var(--r-sm); background: var(--danger-soft); }
/* === 9. DZIAŁY ============================================================
   Osobna tabela działów przestała istnieć 04.08.2026 — działy są teraz wierszami
   grupującymi w tabeli Użytkownicy. Style próbnika koloru i wiersza grupy stoją
   przy tamtej tabeli, w 12-uzytkownicy.css. */
/* === 10. WYBÓR OSÓB — ptaszek, awatar, opis; nazwiska w jednej pionowej linii */
.user-select-option { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s-2); min-width: 0; min-height: var(--h-control-sm); padding: var(--s-1) var(--s-2); cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-sm); }
.user-select-option:hover { border-color: var(--accent-strong); background: var(--surface-2); }
.user-option-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--s-1); min-width: 0; }
/* === 11. WĄSKI EKRAN — para pól nie mieści się na telefonie ================ */
:where(:root[data-ui="mobile"]) .settings-form-grid, :where(:root[data-ui="mobile"]) .settings-image-row { grid-template-columns: minmax(0, 1fr); }
:where(:root[data-ui="mobile"]) .settings-auto-fx { margin-right: 0; }
/* --- Panel zwinięty (z dawnego 28, K17) --- */
.settings-panel.settings-collapsible.is-collapsed > :not(.panel-heading) { display: none; }
/* G3: „Aplikacja na tym urządzeniu” (Moje konto) — przyciski „Włącz powiadomienia” i „Zainstaluj aplikację” zawijają się
   na wąskim ekranie zamiast wychodzić poza panel. */
.settings-panel [data-pole-aplikacji-telefonu] .inline-actions { flex-wrap: wrap; }

/* n39c/n39d (b42): „Zaawansowane” w panelu Folder plików (rozwijane) i panel przeniesienia plików — długie ścieżki łamią się, przyciski w wierszu. */
.settings-zaawansowane > summary { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; list-style: none; }
.settings-zaawansowane > summary::-webkit-details-marker { display: none; }
.settings-zaawansowane > summary .icon { transition: transform var(--szybko); }
.settings-zaawansowane[open] > summary .icon { transform: rotate(180deg); }
.settings-zaawansowane[open] > summary { margin-bottom: var(--s-3); }
.settings-note.migracja-wiersz { grid-template-columns: auto minmax(0, 1fr); }
.migracja-sciezka { min-width: 0; overflow-wrap: anywhere; }
.migracja-akcje { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* BEZPIECZEŃSTWO LOGOWANIA (24.10.2026): podpis „= 1 godz. 15 min” pod polem czasu — czerwony, gdy wpis jest nie do przyjęcia. */
.settings-podglad-czasu { color: var(--text); font-size: var(--t-sm); font-weight: var(--w-medium); line-height: var(--lh-base); }
.settings-podglad-czasu.is-blad { color: var(--danger); }
/* Klucze usług: pod polem „wpisz nowy klucz” stoją przyciski „Pokaż” (pobiera wartość na żądanie) i „Usuń klucz”. */
.settings-klucz-akcje { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Zmiana hasła: pod „Nowe hasło” stoi lista wymagań — pole „Aktualne hasło” obok nie może się od niej rozciągać. */
.haslo-siatka { align-items: start; }