/* ============================================================================
   TSL Tools - dodatki do wyglądu makiety (tsl-makieta-dodatki.css)
   Ładowany ZAWSZE PO tsl-makieta.css (kopia 1:1 pliku design\tsl-makieta.css z dokumentacji wdrożenia;
   jej suma SHA-256 jest zapisana w _PRACA\WYGLAD\H_WYGLAD_BAZOWY\WYNIK.md).
   Architektura: _PRACA\B1_WYGLAD_ARCHITEKTURA\WYNIK.md, rozdz. 1.6, 2.1 (N2), 3.5, 4.2.

   Zasady tego pliku:
   1) WSZYSTKIE klasy mają prefiks mx- (nie zderzają się z 214 klasami makiety ani ze starymi arkuszami aplikacji).
   2) Wartości (kolory, odstępy, promienie, czcionki) pochodzą z makiety. Żadnych nowych kolorów.
   3) Żadnych webfontów, obrazów ani adresów url() (CSP: style-src 'self', img-src 'self' data:).
   4) Kolejność bloków ma znaczenie: nawigacja jako linki - bloki mediów (1100, 750) po regule bazowej.
   ============================================================================ */

/* ============================================================================
   A. NAWIGACJA JAKO LINKI <a> (w makiecie pozycje menu to <button>, w aplikacji to linki)
      Każda reguła = odpowiednik 1:1 reguły ".nav button" z tsl-makieta.css (l.132-147, 407, 424), te same wartości,
      plus text-decoration:none, font:inherit, cursor:pointer (link nie ma ich z reguły "button").
   ============================================================================ */
.nav a{
  border:0;
  border-radius:0;
  background:transparent;
  color:#ddd;
  text-align:left;
  padding:15px 27px;
  min-height:54px;
  display:flex;
  gap:17px;
  align-items:center;
  font:inherit;
  font-size:16px;
  text-decoration:none;
  cursor:pointer;
}
.nav a:hover{background:#202326;color:white}
.nav a.active{background:var(--blue);color:#131f28}
@media(max-width:1100px){
  .nav a{padding:14px 18px;font-size:14px;gap:12px}
}
@media(max-width:750px){
  .nav a{flex:0 0 auto;padding:13px;font-size:12px;min-height:45px;gap:0}
}

/* Konto w pasku górnym jako link (makieta: button.topbar-account, l.526-528) */
a.topbar-account{display:flex;gap:10px;align-items:center;color:#6c7783;border:0;border-radius:4px;background:transparent;padding:0;min-height:39px;flex:0 0 auto;text-align:center;text-decoration:none;cursor:pointer}
a.topbar-account:hover{background:transparent;border:0}

/* ============================================================================
   B. SEKCJA "ADMINISTRACJA" W MENU (tylko administrator) - spoza makiety, z wartości makiety
      Struktura (baza_makieta.html): <nav class="nav mx-nav-admin" aria-labelledby="mx-nav-admin-naglowek">
        <p class="mx-nav-naglowek" id="mx-nav-admin-naglowek">...</p><a>...</a> ... </nav>  (linki bez ikon)
      Nagłówek jak .brand-caption (12px, #91999f, margines 0 28px 14px); linia nad sekcją w kolorze #282c30 (jak .user).
   ============================================================================ */
.mx-nav-admin{margin-top:22px;padding-top:18px;border-top:1px solid #282c30}
.mx-nav-naglowek{font-size:12px;color:#91999f;margin:0 28px 14px;text-transform:uppercase}
/* menu może być wyższe niż okno (6 pozycji + sekcja administratora): przewijanie zamiast ucięcia */
.sidebar{overflow-y:auto}
@media(max-width:750px){
  /* pasek poziomy: sekcja administratora jako drugi pasek pod głównym, bez nagłówka */
  .mx-nav-admin{margin-top:0;padding-top:0;border-top:1px solid #282c30}
  .mx-nav-naglowek{display:none}
}

/* ============================================================================
   C. WYLOGOWANIE (pasek górny): formularz POST z przyciskiem w rozmiarze ".top-tools button" (l.5: 12px, 5px 8px, 30px)
   ============================================================================ */
form.mx-wyloguj{margin:0;display:flex;align-items:center;flex:0 0 auto}
.mx-wyloguj-btn{font-size:12px;padding:5px 8px;min-height:30px}

/* ============================================================================
   D. ZAMIENNIKI ATRYBUTÓW style="..." Z MAKIETY (B1, pkt 3.5; CSP: style-src 'self' nie dopuszcza atrybutu style)
      !important odtwarza pierwszeństwo atrybutu style (wygrywa z każdą regułą bez !important, także o wyższej specyficzności).
      Źródło (M = TSL-makieta-interaktywna.html): linie w komentarzu przy regule.
   ============================================================================ */
.mx-fs-13{font-size:13px!important}                                           /* M:230  blok .user (ukryty przez CSS) */
.mx-p-22-24-0{padding:22px 24px 0!important}                                  /* M:411  nagłówek sekcji "Zapisani kontrahenci" */
.mx-p-0-24-15-mt-10{padding:0 24px 15px!important;margin:10px 0 0!important}  /* M:411  uwaga pod tabelą */
.mx-mt-24-mb-0{margin-top:24px!important;margin-bottom:0!important}           /* M:925  notice w Danych podstawowych */
.mx-m-0{margin:0!important}                                                   /* M:932  nagłówki h3 (kontakty) */
.mx-mw-600-mt-20{max-width:600px!important;margin-top:20px!important}         /* M:932 */
.mx-mt-25{margin-top:25px!important}                                          /* M:932, 1127, 1128, 1441 */
.mx-ta-left{text-align:left!important}                                        /* M:1360 okno przebiegu weryfikacji */
.mx-mt-22{margin-top:22px!important}                                          /* M:1437 Weryfikacja polisy */
.mx-mt-22-mb-0{margin-top:22px!important;margin-bottom:0!important}           /* M:1437 */
.mx-mt-10{margin-top:10px!important}                                          /* M:1444 Mój profil */
.mx-m-18-0-0{margin:18px 0 0!important}                                       /* M:1557 okno przykładowego wyniku zlecenia */

/* ============================================================================
   E. SZEROKOŚCI KOLUMN TABEL (M:415-421 TABLE_COLUMNS; w makiecie style="width:..." na <col>)
      Nazwa: mx-kol-<tabela>-<numer kolumny od 1>. Kolumna bez szerokości (reszta tabeli) nie ma klasy.
      Razem 35 klas (41 kolumn, 6 bez szerokości). Tabela "policies": kolumna 4 (suma ubezpieczenia) tylko dla super administratora.
   ============================================================================ */
/* companies: 7 kolumn */
.mx-kol-companies-1{width:5%}
.mx-kol-companies-2{width:24%}
.mx-kol-companies-3{width:12%}
.mx-kol-companies-4{width:13%}
.mx-kol-companies-5{width:17%}
.mx-kol-companies-6{width:13%}
/* home: 8 kolumn */
.mx-kol-home-1{width:5%}
.mx-kol-home-2{width:20%}
.mx-kol-home-3{width:11%}
.mx-kol-home-4{width:12%}
.mx-kol-home-5{width:15%}
.mx-kol-home-6{width:12%}
.mx-kol-home-8{width:140px}
/* licenses: 7 kolumn */
.mx-kol-licenses-1{width:48px}
.mx-kol-licenses-2{width:18%}
.mx-kol-licenses-3{width:19%}
.mx-kol-licenses-4{width:14%}
.mx-kol-licenses-6{width:17%}
.mx-kol-licenses-7{width:90px}
/* policies: 6 kolumn */
.mx-kol-policies-1{width:22%}
.mx-kol-policies-2{width:22%}
.mx-kol-policies-3{width:16%}
.mx-kol-policies-4{width:15%}
.mx-kol-policies-6{width:90px}
/* vehicles: 8 kolumn */
.mx-kol-vehicles-1{width:48px}
.mx-kol-vehicles-2{width:15%}
.mx-kol-vehicles-3{width:24%}
.mx-kol-vehicles-4{width:10%}
.mx-kol-vehicles-5{width:12%}
.mx-kol-vehicles-6{width:14%}
.mx-kol-vehicles-8{width:90px}
/* drivers: 5 kolumn */
.mx-kol-drivers-1{width:18%}
.mx-kol-drivers-2{width:20%}
.mx-kol-drivers-3{width:30%}
.mx-kol-drivers-5{width:90px}

/* ============================================================================
   E2. KAFLE OBSZARÓW JAKO LINKI (w makiecie button.home-area-card, l.149-150, 1041, 1049; w aplikacji <a>)
       Te same wartości co reguły "button.home-area-card" (poza dziedziczonymi z "button": font, cursor) plus text-decoration:none.
   ============================================================================ */
a.home-area-card{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  grid-template-rows:1fr auto;
  gap:15px 19px;
  align-content:stretch;
  text-align:left;
  border:1px solid #c6dff1;
  border-radius:5px;
  padding:25px;
  background:linear-gradient(120deg,#f4f9fd,#edf5fc);
  min-height:208px;
  color:#111;
  text-decoration:none;
  cursor:pointer;
}
a.home-area-card:hover{background:#e7f2fa;border-color:#98c2df}
@media(max-width:1100px){
  a.home-area-card{padding:19px;grid-template-columns:35px minmax(0,1fr);gap:12px;min-height:220px}
}
@media(max-width:850px){
  a.home-area-card{min-height:0;grid-template-columns:40px minmax(0,1fr)}
}

/* ============================================================================
   F. STRONA PRÓBNA /admin/galeria-wyglad (galeria_makieta.html) - tylko administrator
      Odpowiednik bloku g-* z design\galeria.html (ramki, podpisy, przeniesienie elementów fixed do zwykłego przepływu).
      Kolory ramek i podpisów (#9fb1bf, #44525e, #8a96a2) są WYŁĄCZNIE częścią galerii, nie produktu.
   ============================================================================ */
.mx-gal-wrap{max-width:1280px;margin:0 auto;padding:0 0 60px}
.mx-gal-lead{max-width:900px;color:#44525e;font-size:14px}
.mx-gal-toc{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;margin:14px 0 30px;padding:12px 14px;background:#fff;border:1px solid #dce2e7}
.mx-gal-toc a{color:#244f72}
.mx-gal-sek{margin:0 0 48px}
.mx-gal-sek>h2{font-size:21px;margin:0 0 4px;padding-top:6px;border-top:2px solid #244f72}
.mx-gal-sek>.mx-gal-opis{font-size:13px;color:#44525e;margin:0 0 12px;max-width:980px}
.mx-gal-ramka{border:1px dashed #9fb1bf;background:var(--canvas);margin:0 0 6px;position:relative;overflow:auto}
.mx-gal-bialy{background:#fff}
.mx-gal-ciemny{background:#08090a;color:#fff}
.mx-gal-pad{padding:18px}
.mx-gal-podpis{font:12px/1.5 Consolas,"Courier New",monospace;color:#44525e;margin:5px 0 18px;max-width:1100px}
.mx-gal-wiersz{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.mx-gal-wiersz-srodek{align-items:center}
.mx-gal-ikony{gap:26px;color:#17212b}
.mx-gal-w240{width:240px}
.mx-gal-w230{width:max-content;min-width:230px;max-width:100%}
.mx-gal-tlo-okien{background:#8a96a2}
.mx-gal-ramka .sidebar{position:relative;height:560px;z-index:0}
.mx-gal-ramka .toast{position:static;display:inline-block;margin:12px}
.mx-gal-ramka dialog{position:static;display:block;margin:0 auto 18px}
.mx-gal-ramka .content{margin:0 auto}
.mx-gal-ramka .topbar{width:100%}
.mx-gal-ramka .mx-gal-okno-520{width:520px}
.mx-gal-ramka .mx-gal-okno-530{width:530px}
.mx-gal-ramka .mx-gal-okno-540{width:540px}
.mx-gal-ramka .profile-window{min-height:0}
.mx-gal-ramka .mx-gal-bez-pad{padding:0}
.mx-gal-ramka .content.mx-gal-bez-pad-gora{padding-top:0}
.mx-gal-ramka .content.mx-gal-bez-pad-dol{padding-bottom:0}
.mx-gal-flagi{margin:14px 0 0}
.mx-gal-odstep-36{gap:36px}
.mx-gal-ikona-blad{color:#bd2828}
.mx-gal-ikona-wgraj{color:#176abc}

/* Dymek błędu zostaje do zamknięcia (decyzja właściciela 21.10, W5): przycisk × w kolorze dymku */
.toast .mx-toast-zamknij{margin-left:12px;padding:0 4px;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;line-height:1;cursor:pointer}

/* ===== CLAUDE DESIGN (21.10.2026): tsl-design-dodatki.css włączony 1:1 jako sekcja tsl-x-*; źródło
   PROMPTY/CLAUDE_DESIGN/wynik/tsl-design-dodatki.css; jedyna zmiana: selektor .registry-state-icon .loading-dot zawężony
   do .tsl-x-run. Nie edytować ręcznie — nowa wersja z Claude Design zastępuje całą sekcję. ===== */
/* TSL Tools: tsl-design-dodatki.css
   Nowe reguły do makiety. Ładować PO 03_tsl-makieta.css, którego nie zmieniamy.
   Każda nowa klasa ma przedrostek tsl-x-. Kolory, czcionki i odstępy pochodzą z 03_tsl-makieta.css.
   Wyjątki i uzasadnienia: RAPORT.md, część 3. Punkty łamania jak w makiecie (1100, 750, 600, 420).

   Klasy i elementy:
   tsl-x-nav-link, tsl-x-nav-group, tsl-x-nav-group-label, tsl-x-sidebar-scroll  S1, S2
   tsl-x-top-actions, tsl-x-account-link, tsl-x-logout ..................... S3
   tsl-x-footer .............................................................. S4
   tsl-x-auth, tsl-x-auth-card, tsl-x-auth-title, tsl-x-auth-lead,
   tsl-x-auth-field, tsl-x-auth-links, tsl-x-auth-foot ...................... P1, P2, P3
   tsl-x-notice-red .......................................................... P1, P3, P7, W3, W9
   tsl-x-empty-icon .......................................................... P5
   tsl-x-run, tsl-x-run-head, tsl-x-run-meta, tsl-x-run-actions,
   [data-tsl-x-p] (szerokość .progress-line), tsl-x-progress-label, tsl-x-registry-head,
   tsl-x-timed, tsl-x-source-row, tsl-x-source-time ........................ P6, W10
   tsl-x-section, tsl-x-relations, tsl-x-table ............................. P7, P8, P9, P10, W10
   tsl-x-report-actions, tsl-x-note, tsl-x-hash, tsl-x-file-links, tsl-x-link  P8
   tsl-x-form, tsl-x-form-actions, tsl-x-after-table ........................ P9, P10
   tsl-x-two-col, tsl-x-consent, tsl-x-has-error ............................ P10
   tsl-x-loading ............................................................. W1
   tsl-x-dialog-520, tsl-x-dialog-530, tsl-x-dialog-1100 ................... P9, W4, W6, W7, W9
   tsl-x-card-head, tsl-x-notice-action ...................................... W1, W2, W3
   tsl-x-toast-ok, tsl-x-toast-warn, tsl-x-toast-error, tsl-x-toast-icon .... W5
   tsl-x-upload-progress, tsl-x-file-error, tsl-x-file-done, tsl-x-file-actions  W8
   tsl-x-preview-bar, tsl-x-preview-stream .................................. W9
   tsl-x-col-* (szerokości kolumn zamiast style="width") ................... P7, P8, P9, P10, W10
*/

/* S1: pozycje menu jako linki; wygląd 1:1 z .nav button */
.nav a.tsl-x-nav-link{display:flex;gap:17px;align-items:center;min-height:54px;padding:15px 27px;border:0;border-radius:0;background:transparent;color:#ddd;font-size:16px;line-height:1.5;text-align:left;text-decoration:none}
.nav a.tsl-x-nav-link:hover{background:#202326;color:#fff}
.nav a.tsl-x-nav-link.active,.nav a.tsl-x-nav-link[aria-current="page"]{background:var(--blue);color:#131f28}

/* S2: grupa „Administracja” pod pozycjami użytkownika */
.tsl-x-nav-group{display:grid;gap:6px;margin-top:12px;padding-top:16px;border-top:1px solid #282c30}
.tsl-x-nav-group-label{margin:0 28px 2px;font-size:12px;color:#91999f;text-transform:uppercase}
/* Menu administratora ma 11 pozycji i na ekranie 1440×900 nie mieści się w pionie: przewijanie samego menu */
.sidebar.tsl-x-sidebar-scroll{overflow-y:auto;overscroll-behavior:contain}

/* S3: profil i wylogowanie w pasku górnym */
.tsl-x-top-actions{display:flex;align-items:center;gap:15px;flex:0 0 auto}
a.tsl-x-account-link{display:flex;gap:10px;align-items:center;flex:0 0 auto;min-height:39px;padding:0;color:#6c7783;text-decoration:none;border-radius:20px}
.tsl-x-logout{margin:0}
.tsl-x-logout button{font-size:12px;padding:5px 8px;min-height:30px}

/* S4: stopka produkcyjna; kolor ciemniejszy niż w makiecie (Z8) */
.footer.tsl-x-footer{color:#5c6c79}

/* P1–P3: logowanie, przypomnienie hasła, nowe hasło */
.tsl-x-auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;gap:22px;padding:72px 16px 32px;background:var(--canvas)}
.tsl-x-auth-card{width:460px;max-width:100%;background:#fff;border:1px solid #c8d4dd;border-radius:6px;box-shadow:0 20px 100px #12293c33;overflow:hidden}
.tsl-x-auth-card .brand{display:block;width:54px;margin:0 0 22px}
.tsl-x-auth-card .eyebrow{margin-bottom:6px}
.tsl-x-auth-title{font-size:23px;font-weight:500;line-height:1.25;letter-spacing:0;margin:0 0 20px}
.tsl-x-auth-lead{font-size:13px;color:var(--muted);margin:-8px 0 18px}
.tsl-x-auth-field{margin-bottom:16px}
.tsl-x-auth-field .error{margin:6px 0 0}
.tsl-x-auth-field .field-note,.tsl-x-form .field-note{margin-bottom:0}
.tsl-x-auth-card .check{font-size:13px;margin:-4px 0 16px}
.tsl-x-auth-card .notice{margin:0 0 18px}
.tsl-x-auth-card button.primary{width:100%;margin-top:4px}
.tsl-x-auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin:16px 0 0;font-size:13px}
.tsl-x-auth a{color:var(--blue-dark);text-underline-offset:2px}
.tsl-x-auth a:hover{color:#173b55}
.tsl-x-auth-card .dialog-footer{justify-content:flex-start;font-size:12px;color:#5c6c79}
.tsl-x-auth-card .dialog-footer p{margin:0}
.tsl-x-auth-foot{margin:0;font-size:11px;color:#5c6c79}

/* Komunikat błędu w kolorach podpowiedzi błędu pola z makiety */
.notice.tsl-x-notice-red{background:#fbecec;border-color:#e0aaaa;color:#952828}
.notice.tsl-x-notice-action{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.notice.tsl-x-notice-action button{min-height:34px;padding:6px 14px}

/* Odstęp nagłówka karty z tabelą: w makiecie zapisany atrybutem style="padding:22px 24px 0", którego CSP nie dopuszcza */
.section-head.tsl-x-card-head{padding:22px 24px 0}

/* P5: ikona nad pustym stanem */
.tsl-x-empty-icon{display:block;width:46px;height:46px;margin:0 auto 14px;color:#0d1923}

/* P6: przebieg weryfikacji na żywo */
.tsl-x-run{display:grid;gap:18px}
.tsl-x-run-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px 22px;flex-wrap:wrap}
.tsl-x-run-head h2{margin:0 0 6px;font-size:21px;font-weight:400}
.tsl-x-run-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:13px;color:var(--muted)}
.tsl-x-run-actions{display:grid;justify-items:end;gap:6px;max-width:320px}
.tsl-x-run-actions .tsl-x-note{text-align:right}
.tsl-x-note{margin:0;font-size:12px;color:var(--muted)}
/* Pasek postępu: .progress-line z makiety. Szerokość z atrybutu data-tsl-x-p (0–100) zamiast style="width" (CSP). */
.tsl-x-run .progress-line,.tsl-x-upload-progress .progress-line{margin:0}
.progress-line>span[data-tsl-x-p="0"]{width:0%}.progress-line>span[data-tsl-x-p="1"]{width:1%}.progress-line>span[data-tsl-x-p="2"]{width:2%}.progress-line>span[data-tsl-x-p="3"]{width:3%}.progress-line>span[data-tsl-x-p="4"]{width:4%}.progress-line>span[data-tsl-x-p="5"]{width:5%}.progress-line>span[data-tsl-x-p="6"]{width:6%}.progress-line>span[data-tsl-x-p="7"]{width:7%}.progress-line>span[data-tsl-x-p="8"]{width:8%}.progress-line>span[data-tsl-x-p="9"]{width:9%}.progress-line>span[data-tsl-x-p="10"]{width:10%}.progress-line>span[data-tsl-x-p="11"]{width:11%}.progress-line>span[data-tsl-x-p="12"]{width:12%}.progress-line>span[data-tsl-x-p="13"]{width:13%}.progress-line>span[data-tsl-x-p="14"]{width:14%}.progress-line>span[data-tsl-x-p="15"]{width:15%}.progress-line>span[data-tsl-x-p="16"]{width:16%}.progress-line>span[data-tsl-x-p="17"]{width:17%}.progress-line>span[data-tsl-x-p="18"]{width:18%}.progress-line>span[data-tsl-x-p="19"]{width:19%}.progress-line>span[data-tsl-x-p="20"]{width:20%}.progress-line>span[data-tsl-x-p="21"]{width:21%}.progress-line>span[data-tsl-x-p="22"]{width:22%}.progress-line>span[data-tsl-x-p="23"]{width:23%}.progress-line>span[data-tsl-x-p="24"]{width:24%}.progress-line>span[data-tsl-x-p="25"]{width:25%}.progress-line>span[data-tsl-x-p="26"]{width:26%}.progress-line>span[data-tsl-x-p="27"]{width:27%}.progress-line>span[data-tsl-x-p="28"]{width:28%}.progress-line>span[data-tsl-x-p="29"]{width:29%}.progress-line>span[data-tsl-x-p="30"]{width:30%}.progress-line>span[data-tsl-x-p="31"]{width:31%}.progress-line>span[data-tsl-x-p="32"]{width:32%}.progress-line>span[data-tsl-x-p="33"]{width:33%}.progress-line>span[data-tsl-x-p="34"]{width:34%}.progress-line>span[data-tsl-x-p="35"]{width:35%}.progress-line>span[data-tsl-x-p="36"]{width:36%}.progress-line>span[data-tsl-x-p="37"]{width:37%}.progress-line>span[data-tsl-x-p="38"]{width:38%}.progress-line>span[data-tsl-x-p="39"]{width:39%}.progress-line>span[data-tsl-x-p="40"]{width:40%}.progress-line>span[data-tsl-x-p="41"]{width:41%}.progress-line>span[data-tsl-x-p="42"]{width:42%}.progress-line>span[data-tsl-x-p="43"]{width:43%}.progress-line>span[data-tsl-x-p="44"]{width:44%}.progress-line>span[data-tsl-x-p="45"]{width:45%}.progress-line>span[data-tsl-x-p="46"]{width:46%}.progress-line>span[data-tsl-x-p="47"]{width:47%}.progress-line>span[data-tsl-x-p="48"]{width:48%}.progress-line>span[data-tsl-x-p="49"]{width:49%}.progress-line>span[data-tsl-x-p="50"]{width:50%}.progress-line>span[data-tsl-x-p="51"]{width:51%}.progress-line>span[data-tsl-x-p="52"]{width:52%}.progress-line>span[data-tsl-x-p="53"]{width:53%}.progress-line>span[data-tsl-x-p="54"]{width:54%}.progress-line>span[data-tsl-x-p="55"]{width:55%}.progress-line>span[data-tsl-x-p="56"]{width:56%}.progress-line>span[data-tsl-x-p="57"]{width:57%}.progress-line>span[data-tsl-x-p="58"]{width:58%}.progress-line>span[data-tsl-x-p="59"]{width:59%}.progress-line>span[data-tsl-x-p="60"]{width:60%}.progress-line>span[data-tsl-x-p="61"]{width:61%}.progress-line>span[data-tsl-x-p="62"]{width:62%}.progress-line>span[data-tsl-x-p="63"]{width:63%}.progress-line>span[data-tsl-x-p="64"]{width:64%}.progress-line>span[data-tsl-x-p="65"]{width:65%}.progress-line>span[data-tsl-x-p="66"]{width:66%}.progress-line>span[data-tsl-x-p="67"]{width:67%}.progress-line>span[data-tsl-x-p="68"]{width:68%}.progress-line>span[data-tsl-x-p="69"]{width:69%}.progress-line>span[data-tsl-x-p="70"]{width:70%}.progress-line>span[data-tsl-x-p="71"]{width:71%}.progress-line>span[data-tsl-x-p="72"]{width:72%}.progress-line>span[data-tsl-x-p="73"]{width:73%}.progress-line>span[data-tsl-x-p="74"]{width:74%}.progress-line>span[data-tsl-x-p="75"]{width:75%}.progress-line>span[data-tsl-x-p="76"]{width:76%}.progress-line>span[data-tsl-x-p="77"]{width:77%}.progress-line>span[data-tsl-x-p="78"]{width:78%}.progress-line>span[data-tsl-x-p="79"]{width:79%}.progress-line>span[data-tsl-x-p="80"]{width:80%}.progress-line>span[data-tsl-x-p="81"]{width:81%}.progress-line>span[data-tsl-x-p="82"]{width:82%}.progress-line>span[data-tsl-x-p="83"]{width:83%}.progress-line>span[data-tsl-x-p="84"]{width:84%}.progress-line>span[data-tsl-x-p="85"]{width:85%}.progress-line>span[data-tsl-x-p="86"]{width:86%}.progress-line>span[data-tsl-x-p="87"]{width:87%}.progress-line>span[data-tsl-x-p="88"]{width:88%}.progress-line>span[data-tsl-x-p="89"]{width:89%}.progress-line>span[data-tsl-x-p="90"]{width:90%}.progress-line>span[data-tsl-x-p="91"]{width:91%}.progress-line>span[data-tsl-x-p="92"]{width:92%}.progress-line>span[data-tsl-x-p="93"]{width:93%}.progress-line>span[data-tsl-x-p="94"]{width:94%}.progress-line>span[data-tsl-x-p="95"]{width:95%}.progress-line>span[data-tsl-x-p="96"]{width:96%}.progress-line>span[data-tsl-x-p="97"]{width:97%}.progress-line>span[data-tsl-x-p="98"]{width:98%}.progress-line>span[data-tsl-x-p="99"]{width:99%}.progress-line>span[data-tsl-x-p="100"]{width:100%}
.tsl-x-progress-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.tsl-x-registry-head{display:flex;align-items:center;gap:12px;margin:0;padding:15px 16px;border-bottom:1px solid #dce2e7;font-size:13px;font-weight:600}
.tsl-x-registry-head .badge{margin-left:auto;font-weight:400}
.tsl-x-run .registry-source-state.pending,.tsl-x-run .registry-source-state.not-applicable,.tsl-x-run .registry-state-icon.pending,.tsl-x-run .registry-state-icon.not-applicable{color:#5c6c79}
.registry-source.tsl-x-timed>summary{grid-template-columns:18px minmax(0,1fr) auto 56px auto}
.tsl-x-source-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto 56px;align-items:center;gap:12px;padding:13px 16px;min-height:44px}
.tsl-x-source-time{font-size:11px;color:#5c6c79;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tsl-x-run .registry-state-icon .loading-dot{vertical-align:-2px}

/* P7–P10: sekcje i tabele */
.tsl-x-section{margin-top:34px}
.tsl-x-section>.section-head{margin-bottom:16px}
.tsl-x-relations{display:grid;gap:24px}
.tsl-x-relations h3{margin:0 0 8px}
.tsl-x-relations .notice{margin:0}
.tsl-x-table th{color:#5c6c79}
.tsl-x-table td.tsl-x-empty-cell{padding:22px 10px;color:var(--muted);text-align:center}
.tsl-x-section .record-table{min-width:600px}
table.tsl-x-sessions{min-width:520px}
.tsl-x-report-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 18px}
.tsl-x-report-actions .tsl-x-note{flex:1 1 220px}
.tsl-x-hash{font-family:Consolas,"Courier New",monospace;font-size:12px;white-space:nowrap}
.tsl-x-file-links{display:flex;flex-wrap:wrap;gap:4px 14px}
a.tsl-x-link{color:var(--blue-dark);text-decoration:underline;text-underline-offset:2px}
a.tsl-x-link:hover{color:#173b55}
.tsl-x-form{display:grid;gap:16px;max-width:460px}
.tsl-x-form .notice{margin:0}
.tsl-x-form .error{margin:6px 0 0}
.tsl-x-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.tsl-x-after-table{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.tsl-x-two-col{display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,2fr);gap:23px;align-items:start}
.tsl-x-two-col>.card{margin-bottom:0}
.driver-consent.tsl-x-consent{margin:4px 0 0;font-size:14px}
.tsl-x-consent.tsl-x-has-error{outline:1px solid #c53838;outline-offset:6px;background:#fff5f5}
col.tsl-x-col-5{width:5%}
col.tsl-x-col-12{width:12%}
col.tsl-x-col-13{width:13%}
col.tsl-x-col-15{width:15%}
col.tsl-x-col-16{width:16%}
col.tsl-x-col-18{width:18%}
col.tsl-x-col-20{width:20%}
col.tsl-x-col-17{width:17%}
col.tsl-x-col-22{width:22%}
col.tsl-x-col-24{width:24%}
col.tsl-x-col-26{width:26%}
col.tsl-x-col-30{width:30%}
col.tsl-x-col-36{width:36%}
col.tsl-x-col-act{width:90px}

/* W1: wczytywanie */
.tsl-x-loading{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:40px 20px;color:var(--muted);font-size:13px}

/* W4, W6, W7, W9, P9: szerokości okien (makieta ustawia je atrybutem style, którego CSP nie dopuszcza) */
dialog.tsl-x-dialog-520{width:520px}
dialog.tsl-x-dialog-530{width:530px}
dialog.tsl-x-dialog-1100{width:1100px}

/* W5: odmiany komunikatu chwilowego (kolory z .notice.green, .notice.amber i podpowiedzi błędu) */
.toast.tsl-x-toast-ok{background:#eef8f1;color:#346648;border:1px solid #c8dfce}
.toast.tsl-x-toast-warn{background:#fff8e8;color:#745b22;border:1px solid #e7d7ac}
.toast.tsl-x-toast-error{background:#fbecec;color:#952828;border:1px solid #e0aaaa}
.tsl-x-toast-icon{display:inline-block;min-width:14px;margin-right:8px;font-weight:700}

/* W8: wysyłanie pliku */
.tsl-x-upload-progress{display:grid;gap:6px;margin-top:10px;font-size:12px;color:var(--muted)}
.file-chip.tsl-x-file-error{background:#fbecec;color:#952828}
.file-chip.tsl-x-file-done,.file-chip.tsl-x-file-error{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px}
.tsl-x-file-actions{display:flex;flex-wrap:wrap;gap:4px 14px}
.tsl-x-file-actions button{font-size:12px;min-height:24px}

/* W9: podgląd skanu na kanwie */
.tsl-x-preview-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 15px;padding:7px 10px;background:#f7f9fb;font-size:12px}
.tsl-x-preview-bar .row{gap:8px}
.tsl-x-preview-bar button{font-size:12px;min-height:30px;padding:5px 10px}
.license-document-stream.tsl-x-preview-stream{height:clamp(420px,62vh,760px)}

@media(max-width:1100px){
.nav a.tsl-x-nav-link{padding:14px 18px;font-size:14px;gap:12px}
.tsl-x-nav-group-label{margin:0 18px 2px}
.tsl-x-top-actions{gap:8px}
.tsl-x-two-col{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:750px){
.nav a.tsl-x-nav-link{flex:0 0 auto;padding:13px;font-size:12px;min-height:45px;gap:0}
.sidebar.tsl-x-sidebar-scroll{overflow:visible}
.tsl-x-nav-group{display:flex;flex:0 0 auto;gap:0;margin:0;padding:0;border-top:0;border-left:1px solid #677581}
.tsl-x-nav-group-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tsl-x-auth{padding:32px 12px 24px}
.tsl-x-run-actions{justify-items:start;max-width:none}
.tsl-x-run-actions .tsl-x-note{text-align:left}
.registry-source.tsl-x-timed>summary{grid-template-columns:16px minmax(0,1fr) auto auto;gap:8px}
.registry-source.tsl-x-timed .tsl-x-source-time{grid-column:3;grid-row:1}
.registry-source.tsl-x-timed .registry-toggle{grid-column:4;grid-row:1/3}
.tsl-x-source-row{grid-template-columns:16px minmax(0,1fr) auto;gap:8px}
.tsl-x-source-row .tsl-x-source-time{grid-column:3;grid-row:1/3}
.tsl-x-section{margin-top:28px}
}
@media(max-width:600px){
.tsl-x-form-actions>button,.tsl-x-after-table>button{flex:1 1 100%}
}
@media(max-width:420px){
.tsl-x-auth-title{font-size:21px}
.tsl-x-logout button{padding:5px 7px}
}
/* ===== KONIEC: CLAUDE DESIGN ===== */

/* ===== EKRAN: Pulpit i Kartoteka (agent S9) - tylko klasy mx-pulpit-*, mx-kartoteka-*; dopisywać wyłącznie między tymi znacznikami ===== */
/* Domyślny przycisk formularza wyszukiwania Pulpitu (Enter bez JS działa także przy wyłączonym „Poprzednia”): poza układem, bez napisu */
.mx-pulpit-ukryty{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Błąd frazy pod polem (Pulpit i Kartoteka): kolor --red i rozmiar jak .error makiety (l.274) */
.mx-pulpit-blad{color:var(--red);font-size:13px;margin:8px 0 0}
/* Podpowiedź „co najmniej 3 znaki”: jak .home-search-note makiety (l.1001) */
.mx-pulpit-podpowiedz{color:#75828c;font-size:12px;margin:9px 0 0}
/* Stany tabeli (pusto, wczytywanie, błąd połączenia; Claude Design W1-W3): tabela ma min-width 1080 px, więc komunikat wyśrodkowany
   w komórce colspan leżałby poza widocznym obszarem ramki na wąskim ekranie. Przyklejamy go do lewej krawędzi ramki i dajemy
   szerokość widocznej części ramki (cqw = szerokość kontenera). Przy 1440 px szerokość ramki = szerokość tabeli, bez zmiany wyglądu. */
.mx-pulpit-sekcja .table-scroll{container-type:inline-size}
.mx-pulpit-stan{position:sticky;left:0;width:100cqw}
/* ===== KONIEC: Pulpit i Kartoteka ===== */

/* ===== EKRAN: Weryfikacja kontrahenta (agent S10) - tylko klasy mx-kreator-*; dopisywać wyłącznie między tymi znacznikami ===== */
/* M-038: "Wróć do pulpitu" w nagłówku strony - odnośnik z wyglądem button.primary (l.100-103: ramka, tło, padding, min-height, hover);
   w makiecie tego przycisku nie ma w kodzie (rejestr zmian S-15). Na wąskim ekranie (do 750 px) menu jest poziomym paskiem z pozycją
   "Pulpit", więc przycisk znika - układ strony zostaje taki jak w makiecie (wzorce 750 i 390 px). */
a.mx-kreator-wroc{display:inline-flex;align-items:center;flex:0 0 auto;border:1px solid #bed1df;border-radius:4px;background:var(--blue);color:#173b55;padding:9px 16px;min-height:40px;font:inherit;text-decoration:none;cursor:pointer}
a.mx-kreator-wroc:hover{background:#cce2f2}
@media(max-width:750px){
  a.mx-kreator-wroc{display:none}
}
/* Odnośnik "Otwórz kartotekę" w komunikacie o duplikacie (czerwony tekst .error): ten sam kolor, podkreślony */
.mx-kreator-blad-link{color:inherit;text-decoration:underline}
/* Odnośnik tylko dla administratora (dotychczasowa zakładka "Osoba i prawo jazdy"): pod tabelą, bez własnego wyglądu spoza makiety */
.mx-kreator-admin{margin:16px 0 0}
/* ===== KONIEC: Weryfikacja kontrahenta ===== */

/* ===== EKRAN: Profil kontrahenta (agent S11) - tylko klasy mx-profil-*; dopisywać wyłącznie między tymi znacznikami ===== */
/* Jeden formularz obejmuje panele i stopkę profilu, a .profile-window jest kolumną flex (M:86): formularz nie tworzy własnego pudełka,
   więc panel (flex:1), stopka i reszta okna układają się jak w makiecie, gdzie panele i stopka są dziećmi okna. */
.mx-profil-formularz{display:contents}
/* Zestaw pól zakładki wyłączany poza trybem edycji (fieldset[disabled]): bez ramki, odstępów i minimalnej szerokości domyślnej */
.mx-profil-zestaw{border:0;padding:0;margin:0;min-width:0}
/* Komunikat o konflikcie wersji (409) nad zakładkami: odstępy jak pasek zakładek (.profile-window .tabs: margin 0 30px 33px) */
.mx-profil-konflikt{margin:0 30px 20px}
.mx-profil-przeladuj{color:#143b57;font-weight:600;text-decoration:underline}
/* ===== KONIEC: Profil kontrahenta ===== */

/* ===== EKRAN: Ekrany pomocnicze - polisa, zlecenie, Mój profil (agent S17) - tylko klasy mx-pomoc-*; dopisywać wyłącznie między tymi znacznikami ===== */
/* Odnośnik w stanie pustym "Brak kontrahentów" (E12): kolor jak button.link w makiecie (tsl-makieta.css l.105) */
a.mx-pomoc-link{color:var(--blue-dark)}
/* Lista sesji (Mój profil, wzorzec P9: table.tsl-x-sessions w .table-scroll). Ukryty dla wzroku nagłówek kolumny akcji (.visually-hidden jest position:absolute): bez kontekstu pozycjonowania wystawałby poza .table-scroll i poszerzał stronę */
.mx-pomoc-sesje th{position:relative}
/* ===== KONIEC: Ekrany pomocnicze ===== */

/* ===== EKRAN: Logowanie, hasła, strony błędów (agent S18) - tylko klasy mx-auth-*; dopisywać wyłącznie między tymi znacznikami ===== */
/* "Ustaw nowe hasło" bez kodu w linku (Claude Design P3, stan "brak kodu"): ekran pokazuje tylko komunikat i odnośniki, bez formularza.
   Skrypt ekranu (app.js) odkrywa blok #brak-tokenu dopiero, gdy w adresie nie ma tokenu; wtedy chowamy formularz i jego odnośnik powrotu
   (czysty CSS: nie dodajemy własnego skryptu, a logika tokenu zostaje w app.js bez zmian). */
.mx-auth-brak-tokenu:not([hidden])~.mx-auth-ustaw{display:none}
/* ===== KONIEC: Logowanie, hasła, strony błędów ===== */

/* ===== EKRAN: Wyniki weryfikacji w profilu (agent S13) - tylko klasy mx-wyniki-*; dopisywać wyłącznie między tymi znacznikami ===== */
/* ===== KONIEC: Wyniki weryfikacji ===== */

/* ===== EKRAN: Licencje, polisy, skany (agent S15) - tylko klasy mx-skan-*, mx-licencje-*, mx-polisy-*; dopisywać wyłącznie między tymi znacznikami ===== */
/* ===== KONIEC: Licencje, polisy, skany ===== */

/* ===== EKRAN: Pojazdy i kierowcy (agent S16) - tylko klasy mx-pojazdy-*, mx-kierowcy-*; dopisywać wyłącznie między tymi znacznikami ===== */
/* ===== KONIEC: Pojazdy i kierowcy ===== */