/* =====================================================================
   MIRAND-PLUS Platform — app.css
   CAŁA warstwa wizualna. Lifting = edycja tego pliku, moduły bez zmian.
   Sekcje: [tokens] zmienne · [base] · [buttons] · [forms] · [auth]
           [app] topbar/dashboard · [tables] · [badges] · [utils]
===================================================================== */

/* ---------------- [tokens] ----------------
   ŻELAZNA ZASADA NOWYCH MODUŁÓW: żadnych własnych kolorów, odstępów ani
   cieni — wyłącznie poniższe tokeny i komponenty z sekcji [components].
   Katalog na żywo: #styleguide (tylko admin). */
:root{
  /* kolory semantyczne — język całej aplikacji:
     ember = akcja/marka · ok = zielone "dobrze" · warn = czerwony "Twój ruch/błąd"
     amber = bursztynowa "uwaga zespołu" · muted = drugorzędne · line = obramowania */
  --coal:#1B1815; --coal-soft:#242019; --ember:#E4570F; --ember-dark:#C74A0B;
  --paper:#F4F2ED; --ink:#211D19; --line:#D8D3C8; --card:#FFFFFF;
  --muted:#7A736A; --soft:#F1EEE7; --ok:#2E7D32; --ok-bg:#E4F0E5;
  --warn:#B3261E; --warn-bg:#F6E4E2; --amber:#D97706;
  /* [F1 FROZEN 22.08.2026] tokeny semantyczne — nazwy od ROLI, nigdy od koloru.
     Zatwierdzone przez właściciela; zastępują literały rozsiane po arkuszu. */
  --surface-row-alt:#FAF8F4; --surface-row-hover:#F1EDE4; --surface-tab-active:#FFF4EC;
  --surface-input:#FDFCFA; --info:#20618F; --info-bg:#E3EDF6; --danger-hover:#9A1F18;
  /* skala odstępów (margines/padding zawsze z tej drabinki) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* promienie i cienie */
  --radius:10px; --radius-sm:6px;
  --sh-1:0 1px 3px rgba(0,0,0,.08); --sh-2:0 6px 18px rgba(0,0,0,.12);
  --shadow-auth:0 20px 60px rgba(0,0,0,.45);
  /* skala pisma: nagłówek strony 26 · sekcji 19 · treść 15 · drobne 13.5 · hint 12.5 · etykieta 11.5 */
  --fs-h1:26px; --fs-h2:19px; --fs-body:15px; --fs-small:13.5px; --fs-hint:12.5px; --fs-label:11.5px;
  --font-head:"Barlow Condensed",sans-serif;
  --font-body:Inter,system-ui,sans-serif;
}

/* ---------------- [base] ---------------- */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5;min-height:100vh}
h1,h2,h3{font-family:var(--font-head);letter-spacing:.02em}
.hint{font-size:13px;color:#68625A}   /* czytelność: ciut większe i ciemniejsze niż --muted */

/* ---------------- [buttons] ---------------- */
button{font-family:var(--font-body);font-weight:600;font-size:14.5px;border:none;border-radius:var(--radius-sm);padding:10px 16px;cursor:pointer}
.btn-main{background:var(--ember);color:#fff}
.btn-main:hover{background:var(--ember-dark)}
.btn-dark{background:var(--coal);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--coal);border:1px solid var(--line)}
.btn-danger{background:#fff;color:var(--warn);border:1px solid var(--warn)}
.btn-danger-solid{background:var(--warn);color:#fff;border:1px solid var(--warn)}
.btn-danger-solid:hover{background:var(--danger-hover)}
.btn-sm{padding:5px 10px;font-size:12.5px}

/* ---------------- [forms] ---------------- */
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:15px;background:var(--surface-input)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ember);border-color:var(--ember)}
label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin:10px 0 4px;text-transform:uppercase;letter-spacing:.06em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* ---------------- [messages] ---------------- */
.msg{padding:10px 14px;border-radius:var(--radius-sm);margin-top:14px;font-size:13.5px;display:none}
.msg-ok{background:var(--ok-bg);color:var(--ok);display:block}
.msg-err{background:var(--warn-bg);color:var(--warn);display:block}

/* ---------------- [components] kanon dla wszystkich modułów ----------------
   .act-panel — rozwijany panel akcji (przepięcie, kasowanie, import…)
   .btns-row  — wiersz przycisków/kontrolek (nigdy float!)
   .empty     — pusty stan listy/karty  */
.act-panel{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--sp-2) var(--sp-3);font-size:13px;margin:var(--sp-3) 0 var(--sp-2)}
.btns-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.btns-row.end{justify-content:flex-end}
.btns-row.mt{margin-top:var(--sp-2)}
.empty{color:var(--muted);font-size:var(--fs-small);text-align:center;padding:var(--sp-5) var(--sp-3)}
/* drobnica zamiast stylów inline (jedyne dozwolone "dopiski" do klas komponentów) */
.mt0{margin-top:0}.mt2{margin-top:var(--sp-2)}.mt3{margin-top:var(--sp-3)}.mt4{margin-top:var(--sp-4)}
.mb2{margin-bottom:var(--sp-2)}.ml2{margin-left:var(--sp-2)}.tc{text-align:center}
/* pulpit „Wymaga działania": pilność czytelna z krawędzi, bez wczytywania się */
tr.dr-hot{box-shadow:inset 3px 0 0 var(--warn)}
tr.dr-warm{box-shadow:inset 3px 0 0 var(--amber)}
tr.dr-cool{box-shadow:inset 3px 0 0 var(--line)}

/* pasek rodzeństwa na karcie kontenera: kontenery tego samego B/L jako kropki,
   przeskoki poprzedni/następny — uzupełnianie płynie z karty na kartę */
.sib-bar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--sh-1)}
.sib-dots{display:flex;gap:6px;align-items:center}
.sib-dot{width:13px;height:13px;border-radius:50%;border:2.5px solid var(--line);
  background:transparent;cursor:pointer;display:inline-block}
.sib-dot:hover{transform:scale(1.25)}
.sib-cur{outline:2px solid var(--ember);outline-offset:2px}
.nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,Consolas,monospace}
.up{text-transform:uppercase}
.w-sm{max-width:220px}.w-md{max-width:280px}
.c-warn{color:var(--warn)}.c-ok{color:var(--ok)}

/* ---------------- [auth] ekran logowania/setup ---------------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  position:relative;overflow:hidden;
  background:radial-gradient(900px 600px at 75% -10%, var(--coal-soft) 0%, var(--coal) 60%)}
/* wideo w tle: żar węgla, 1280x720, rozmycie ledwie muska — ma być widać, co się
   dzieje. transform:scale ukrywa krawędzie, które rozmycie wyciąga poza kadr.
   Gradient wyżej zostaje jako tło na czas, zanim wideo się wczyta. */
.auth-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(2px) saturate(1.08) brightness(.97);transform:scale(1.03);
  z-index:0;pointer-events:none}
/* przyciemnienie: karta jest nieprzezroczysta, więc chodzi nie o czytelność tekstu,
   tylko o to, żeby rozżarzony węgiel nie krzyczał spod niej i nie rozpraszał */
.auth-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(900px 600px at 75% -10%, rgba(20,22,26,.18) 0%, rgba(10,11,13,.52) 60%)}
.auth-card{position:relative;z-index:2;
  background:var(--card);border-radius:var(--radius);max-width:400px;width:100%;padding:34px 32px;box-shadow:var(--shadow-auth)}
/* kto w systemie wyłączył animacje, dostaje zatrzymany kadr zamiast ruchu */
@media (prefers-reduced-motion: reduce){ .auth-video{display:none} }
.auth-brand{display:block;width:130px;height:130px;object-fit:contain;margin:0 auto 8px}
.auth-logo{font-family:var(--font-head);font-weight:700;font-size:30px;letter-spacing:.04em;text-align:center}
.auth-logo b{color:var(--ember)}
.auth-sub{text-align:center;font-family:var(--font-head);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--ember);margin:2px 0 18px}
.auth-en{text-align:center;font-size:12px;color:var(--muted);margin-top:16px}
/* branding ze strony firmowej (mirand-plus.pl): Montserrat ExtraBold Italic, M+P w czerwieni */
.auth-logo.brand-site{font-family:'Montserrat',var(--font-head);font-weight:800;font-style:italic;
  font-size:33px;letter-spacing:-.015em;color:#23211E;line-height:1.05}
.auth-logo.brand-site .br{color:#E30613}
.auth-logo.brand-site .brand-c{font-style:normal}
.auth-sub.brand-site-sub{font-family:'Montserrat',var(--font-head);font-weight:800;font-style:italic;
  font-size:16.5px;letter-spacing:-.01em;color:#23211E;margin:1px 0 20px}
.auth-sub.brand-site-sub .brand-c{font-style:normal}
/* plakietka portalu partnera — wyłącznie tam, panel zespołu zostaje bez oznaczenia.
   Węglowa czerń zamiast marki: ma mówić „inne drzwi", a nie konkurować z logotypem. */
.auth-partner{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  width:fit-content;margin:0 auto;padding:9px 22px;border-radius:var(--radius);
  background:var(--coal);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:.10em}
.auth-sep{height:1px;background:var(--line);margin:20px 0 4px}
/* to samo po zalogowaniu, w stopce menu — dyskretnie, bez tła */
.sb-partner{display:flex;align-items:center;gap:6px;margin-bottom:6px;
  font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.10em;color:#C9C2B6}

/* ---------------- [app] layout: sidebar + topbar ---------------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:232px;flex-shrink:0;background:var(--coal);color:var(--paper);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-logo{font-family:var(--font-head);font-weight:700;font-size:19px;letter-spacing:.04em;padding:16px 16px 12px;cursor:pointer;display:flex;align-items:center;gap:10px}
.sb-logo b{color:var(--ember)}
.sb-brand{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.brand-c{font-size:.55em;vertical-align:super;opacity:.7;letter-spacing:0}
.sb-sub{font-family:var(--font-head);font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:none;color:#8E867B;margin-top:1px}
.sb-nav{flex:1;padding:8px 10px;overflow-y:auto}
/* [F0] nagłówki sekcji menu — domeny biznesowe (architektura FROZEN 21.08.2026) */
.sb-sec{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.34);padding:14px 12px 4px;user-select:none}
.sb-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:#C9C2B6;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:2px;border-left:3px solid transparent}
.sb-item .ic{flex-shrink:0;opacity:.85}
.sb-item:hover{background:var(--coal-soft);color:var(--paper)}
.sb-item.active{background:rgba(228,87,15,.16);color:#FF8A4C;border-left-color:var(--ember)}
.sb-item.disabled{opacity:.45;cursor:default}
.sb-item.disabled:hover{background:transparent;color:#C9C2B6}
.sb-soon{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#3A342C;color:#A79E90;border-radius:8px;padding:2px 7px}
.sb-set-toggle{margin-top:10px;border-top:1px solid #2E2922;border-radius:0;padding-top:12px}
.sb-caret{margin-left:auto;font-style:normal;display:flex;transition:transform .15s}
.sb-caret.open{transform:rotate(180deg)}
.sb-set{overflow:hidden;max-height:0;transition:max-height .25s}
.sb-set.open{max-height:600px}   /* z zapasem na kolejne moduły — nic się nie utnie */
.sb-set .sb-item{padding-left:26px;font-size:13.5px}
.sb-foot{padding:14px 20px;font-size:11px;color:#8E867B;border-top:1px solid #2E2922;line-height:1.6}
.sb-scrim{display:none}
.sb-burger{display:none;background:transparent;border:none;color:var(--ink);padding:6px;cursor:pointer}

.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:10px 22px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh-1)}
.tb-search{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--muted);position:relative}
.tb-search input{border:none;background:transparent;padding:9px 0;font-size:14px;flex:1;min-width:0}
.tb-search input:focus{outline:none}
.tb-search:focus-within{border-color:var(--ember);outline:1px solid var(--ember)}
.tb-search-spacer{flex:1}
/* W2 — zdanie otwierające kartę: co tu się właściwie dzieje, po ludzku */
.says{background:var(--soft);border-left:3px solid var(--ember);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:11px 14px;margin:12px 0 2px;font-size:14.5px}
.says-ok{background:var(--ok-bg);border-left-color:var(--ok)}
.says-warn{background:var(--warn-bg);border-left-color:var(--warn)}
.says-am{background:#FBF0DC;border-left-color:var(--amber)}
.says .lnk{font-weight:600}
/* podpowiedzi szukajki — jedna lista dla wszystkich typów rekordów */
.tb-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-2);
  overflow:hidden auto;max-height:70vh;z-index:60;color:var(--ink)}
.tb-drop.open{display:block}
.tb-grp{font-family:var(--font-head);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:var(--soft);padding:5px 13px}
.tb-hit{display:flex;align-items:center;gap:11px;padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--soft)}
.tb-hit:last-child{border-bottom:none}
.tb-hit.sel,.tb-hit:hover{background:#FFF4EC}
.tb-ic{font-size:16px;width:20px;text-align:center;flex:none}
.tb-main{flex:1;min-width:0}
.tb-t{display:block;font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:600}
.tb-s{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-r{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-empty{padding:16px 14px;text-align:center;color:var(--muted);font-size:13.5px}
@media(max-width:640px){ .tb-drop{position:fixed;left:8px;right:8px;top:56px;max-height:74vh} }
.tb-user{margin-left:auto;font-size:13.5px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-name{font-weight:600}
.rolebadge{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--ember);color:#fff;border-radius:10px;padding:2px 9px}
.wrap{max-width:none;margin:0;padding:22px 26px;width:100%}
.page-title{font-size:30px;margin-top:6px}
.crumb{font-size:13px;color:var(--muted);margin-top:14px}
.crumb a{color:var(--ember);cursor:pointer;text-decoration:none;font-weight:600}

/* nagłówek pulpitu */
.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dash-refresh{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer;padding:4px 0}
.dash-refresh:hover{color:var(--ember)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.kpi-alarm{border-color:#F3C1AC;background:#FDF6F2}
.kpi-ic{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ki-blue{background:var(--info-bg);color:var(--info)}
.ki-amber{background:#FBF0DC;color:var(--amber)}
.ki-warn{background:#FBF0DC;color:var(--amber)}
.ki-red{background:#F9E2D3;color:var(--ember)}
.kpi-label{font-size:12.5px;font-weight:600;color:var(--muted)}
.kpi-num{font-family:var(--font-head);font-weight:700;font-size:30px;line-height:1.15}
.kpi-num-red{color:var(--ember);font-size:24px}
.kpi-sub{font-size:12px;color:var(--muted)}
.cost-red{color:var(--warn)}

/* wymaga działania */
.dc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dc-head h2{margin-bottom:0}
.st{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:10px;white-space:nowrap}
.st .port-dot{margin:0 5px 0 0}
.st-urgent{background:var(--warn-bg);color:var(--warn)}
.st-todo{background:#FBF0DC;color:var(--amber)}
.st-ok{background:var(--ok-bg);color:var(--ok)}
.st-muted{background:var(--soft);color:var(--muted)}
.th-act,.td-act{text-align:right}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:16px}
.card h2{font-size:21px;margin-bottom:12px}

/* ---------------- [filters] ---------------- */
/* pasek filtrów: zwarty, trzyma się lewej — bez rozciągania na pół ekranu */
.ct-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ct-filters input{flex:0 1 320px;min-width:200px}
.ct-filters select{flex:0 1 auto;width:auto;max-width:230px}
.ct-filters .f-clear{white-space:nowrap}
@media(max-width:640px){
  .ct-filters input{flex-basis:100%}
  .ct-filters select{flex:1 1 40%;max-width:none}
}

/* ---------------- [filterbar] belka filtrowania (lifting 2026-08) ----------------
   Kanon: etapy jako ZAKŁADKI gridu (ten sam klocek co .cc-tab na kartach),
   pod nimi JEDNA belka pól z prawdziwymi etykietami, a pod belką pasek
   aktywnych filtrów. Powód: dziesięć luźnych pigułek + goły rząd pól to język
   sklepu internetowego, a włączonego filtra nie było widać ("gdzie mi zniknął
   ten kontener?"). */
.fbar{display:flex;align-items:flex-end;gap:10px;padding:12px 14px;flex-wrap:wrap;
  background:var(--soft);border-bottom:1px solid var(--line);margin:0 -26px}
.fld{display:flex;flex-direction:column;gap:3px}
.fld>label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0;display:block}
.fld input,.fld select{padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:13px;background:var(--card);color:var(--ink);height:34px;width:auto}
/* szukajka: główne narzędzie, nie czwarty prostokąt z rzędu */
.fld-search{position:relative;flex:0 1 320px;min-width:200px}
.fld-search input{width:100%;padding-left:31px;border-color:#B9B2A5}
.fld-search .ic{position:absolute;left:9px;top:26px;color:var(--muted);pointer-events:none}
/* własny chevron zamiast systemowego — pole wygląda tak samo w każdej przeglądarce */
.fbar select{appearance:none;-webkit-appearance:none;padding-right:26px;max-width:230px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A736A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
/* WŁĄCZONY filtr widać z drugiego końca pokoju */
.fld.on select,.fld.on input{border-color:var(--ember);background:#FFF7F2;font-weight:600;
  box-shadow:0 0 0 2px rgba(228,87,15,.13)}
.fld.on>label{color:var(--ember-dark)}
.fbar input:focus,.fbar select:focus{outline:2px solid var(--ember);border-color:var(--ember)}
.fspring{flex:1}
/* prawa strona belki: przełącznik i licznik to JEDEN blok — przy wąskim oknie
   zawijają się razem i dalej trzymają prawą krawędź, zamiast rozjeżdżać się
   po dwóch wierszach (licznik uciekał wtedy pod szukajkę) */
.fside{display:flex;align-items:flex-end;gap:10px;margin-left:auto}
/* PRZEŁĄCZNIK w belce (np. „ukryj anulowane"): to nie jest pole z listą wyboru,
   tylko jedno pytanie tak/nie — stoi z boku, przy liczniku, na który wpływa.
   Włączony ma ten sam pomarańcz co włączone pole: filtr widać z drugiego końca pokoju. */
.fchk{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);
  font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;user-select:none}
.fchk:hover{border-color:#B9B2A5}
.fchk input{width:15px;height:15px;accent-color:var(--ember);margin:0;cursor:pointer}
.fchk.on{border-color:var(--ember);background:#FFF7F2;color:var(--ember-dark);
  box-shadow:0 0 0 2px rgba(228,87,15,.13)}
.fcount{font-size:12.5px;color:var(--muted);white-space:nowrap;padding-bottom:8px}
.fcount b{color:var(--ink);font-size:15px}
/* dopisek przy liczniku: „· ukryto 3 anulowane" — nic nie znika po cichu */
.fcount-sub{font-size:12px;color:var(--muted);white-space:nowrap;padding-bottom:8px;margin-left:5px}

/* pasek aktywnych filtrów: co zawęża listę i jak to zdjąć pojedynczo */
.fact{display:flex;align-items:center;gap:7px;padding:8px 14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:var(--card);margin:0 -26px}
.fact:empty{display:none}
.fact-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ftag{display:inline-flex;align-items:center;gap:6px;background:#FFF4EC;border:1px solid #F2C3A3;
  border-radius:var(--radius-sm);padding:3px 5px 3px 9px;font-size:12px;font-weight:600;color:var(--ember-dark)}
.ftag span{color:var(--muted);font-weight:500}
.ftag u{text-decoration:none;cursor:pointer;background:#F2C3A3;color:#7A3B12;border-radius:4px;
  width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.ftag u:hover{background:var(--warn);color:#fff}
.fall{background:transparent;border:none;color:var(--warn);font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);text-decoration:underline;padding:2px 4px}

.page-head > .fbar:last-child,.page-head > .fact:last-child{border-bottom:none;margin-bottom:-1px}
@media(max-width:640px){
  .fbar,.fact{margin:0 -14px}
  .fbar{padding:10px}
  .fld-search{flex:1 1 100%}
  .fld{flex:1 1 44%}
  .fbar select{max-width:none;width:100%}
  .fcount{padding-bottom:0;width:100%}
  /* na telefonie przełącznik i licznik biorą cały ostatni wiersz:
     przełącznik z lewej pod kciukiem, licznik dosunięty do prawej */
  .fside{flex:1 1 100%;justify-content:space-between}
  .fside .fcount{width:auto}
  .fld input,.fld select{font-size:16px}   /* blokuje auto-zoom iOS */
}

/* ---------------- [tables] ---------------- */
.tbl-scroll{overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 230px)}
.tbl-scroll table.lst{min-width:560px}
table.lst{width:100%;border-collapse:collapse;font-size:13.5px}
/* przyklejony nagłówek: zostaje na ekranie przy przewijaniu długiej listy */
table.lst th{font-family:var(--font-head);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:9px 8px;border-bottom:2px solid var(--coal);
  position:sticky;top:0;background:var(--card);z-index:2}
table.lst td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle;
  font-variant-numeric:tabular-nums}   /* cyfry równej szerokości = wagi w słupku */
/* zebra + podświetlenie wiersza: oko nie gubi linii przy 30+ pozycjach */
table.lst tbody tr:nth-child(even){background:var(--surface-row-alt)}
table.lst tbody tr:hover{background:var(--surface-row-hover)}

/* ---------------- [grouped] tabela z grupowaniem (lifting 2026-08) ----------------
   JEDNA tabela zamiast wielu małych: nagłówek kolumn raz, kwoty w jednym słupku
   przez cały ekran. Grupa (np. teczka B/L) to pasek-wiersz z podsumowaniem.
   Powód: cztery osobne tabelki liczyły szerokości osobno i kolumny się rozjeżdżały. */
table.lst tr.grp td{background:var(--soft);border-top:2px solid var(--coal);
  border-bottom:1px solid var(--line);padding:7px 8px}
table.lst tbody tr.grp:first-child td{border-top:none}
.grp-bl{font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.03em}
.grp-meta{color:var(--muted);font-size:12px;margin-left:8px}
.grp-right{float:right}
/* plakietka „są tu noty" — widać ją, zanim ktokolwiek przeczyta wiersze */
.grp-note{background:var(--warn);color:#fff;border-radius:10px;padding:1px 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;margin-left:8px;white-space:nowrap}
/* wiersz dokumentu: wcięcie pokazuje przynależność do grupy */
table.lst td.doc{padding-left:26px}
/* nota obciążeniowa odcina się od faktur krawędzią i tłem */
table.lst tr.is-note td{background:#FDF7F5}
table.lst tr.is-note td.doc{box-shadow:inset 3px 0 0 var(--warn)}
@media(max-width:640px){
  table.lst td.doc{padding-left:14px}
  .grp-meta{display:none}          /* na telefonie liczy się numer i status, nie rozpiska */
  .grp-right{float:none;display:block;margin-top:4px}
}

/* ---------------- [badges] ---------------- */
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-off{background:var(--warn-bg);color:var(--warn)}
.b-role{background:var(--soft);color:var(--ink)}

/* ---------------- [dashboard] ---------------- */
.dash-card{margin-top:14px}
.dash-card h2{display:flex;align-items:center;gap:8px}
.dash-week{font-family:var(--font-head);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--soft);padding:5px 8px !important}
.dash-issues{list-style:none;margin-top:4px}
.dash-issues li{padding:5px 0;border-bottom:1px solid var(--soft);font-size:13.5px}
.dash-link{color:var(--ember);cursor:pointer;font-weight:600;text-decoration:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chip{border:1px solid var(--line);background:#fff;border-radius:16px;padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.chip.active{background:var(--coal);color:var(--paper);border-color:var(--coal)}
.chip b{color:var(--ember)} .chip.active b{color:var(--ember)}
.sums{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:2px solid var(--coal);font-size:13px}
.sums b{font-size:14.5px}
.timeline{list-style:none;margin-top:6px}
.timeline li{position:relative;padding:6px 0 6px 18px;border-left:2px solid var(--line);margin-left:6px;font-size:13px}
.timeline li:before{content:"";position:absolute;left:-5px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--ember)}
.notelog{list-style:none;margin-top:6px}
.notelog li{background:var(--soft);border-radius:6px;padding:8px 10px;margin-bottom:6px;font-size:13.5px}
.notelog .hint{display:block;margin-bottom:2px}

/* ---------------- [lifecycle] cykl życia 2.0 ---------------- */
.sg{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:10px;white-space:nowrap}
.sg-gray{background:var(--soft);color:var(--muted)}
.sg-amber{background:#FBF0DC;color:var(--amber)}
.sg-ok{background:var(--ok-bg);color:var(--ok)}
.sg-blue{background:var(--info-bg);color:var(--info)}
.sg-warn{background:var(--warn-bg);color:var(--warn)}
.sg-dark{background:var(--coal);color:var(--paper)}
.sg-close{background:var(--warn);color:#fff}
.lc-card{border-left:4px solid var(--ember);border-radius:0 var(--radius) var(--radius) 0}
.stp{display:flex;align-items:flex-start;margin:16px 0 6px}
.stp-node{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:86px;flex:0 0 auto}
.stp-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--soft);border:2px solid var(--line)}
.stp-done .stp-ic{background:var(--ok-bg);border-color:var(--ok)}
.stp-cur .stp-ic{background:#FBF0DC;border-color:var(--ember);box-shadow:0 0 0 4px rgba(228,87,15,.15)}
.stp-todo{opacity:.45}
.stp-lbl{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.stp-cur .stp-lbl{color:var(--ember)}
.stp-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.stp-line{flex:1;height:3px;background:var(--line);margin-top:21px;min-width:14px;border-radius:2px}
.stp-line.on{background:var(--ok)}
.tx-chip{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:10px;white-space:nowrap}
.tx-chip-ok{background:var(--ok-bg);color:var(--ok)}
.tx-chip-bad{background:var(--warn-bg);color:var(--warn)}
.tx-chip-mut{background:var(--soft);color:var(--muted)}
.lc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:12px}
.lc-f{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px}
.lc-f span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lc-f b{font-size:17px;font-family:var(--font-head)}
.lc-more{margin-top:10px}
/* zwijane sekcje karty: przycisk-nagłówek z obracaną strzałką */
.dt-sum{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:.02em;padding:10px 14px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);user-select:none}
.dt-sum::-webkit-details-marker{display:none}
.dt-sum:hover{border-color:var(--ember);color:var(--ember)}
.dt-caret{margin-left:auto;font-style:normal;transition:transform .15s;color:var(--muted)}
details[open]>.dt-sum .dt-caret{transform:rotate(180deg)}
details[open]>.dt-sum{border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-bottom-color:var(--ember)}
/* sekcje zdjęć: załadunek (pomarańcz) vs rozładunek (węgiel) */
.ph-sec{border-left:4px solid var(--line);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--soft);padding:10px 12px;margin-top:10px}
.ph-sec-sup{border-left-color:var(--ember)}
.ph-sec-mp{border-left-color:var(--coal)}
.ph-sec-h{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.05em;margin-bottom:6px}
.ph-sec-sup .ph-sec-h{color:var(--ember)}
.ph-sec-mp .ph-sec-h{color:var(--coal)}
/* checklista wymaganych zdjęć załadunku — wytyczne, nie blokada */
.ph-chk{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px 14px}
.ph-chk li{font-size:13.5px;padding:3px 0}
.ph-chk li.ph-chk-no{color:var(--muted)}
.ph-chk-cnt{margin-left:auto;font-family:var(--font-head);font-size:13px;color:var(--muted)}
.ph-chk-full{color:var(--ok)}
/* pasek zaznaczenia na liście kontenerów (dostawca zgłasza załadunek hurtem) */
.sel-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;margin-top:10px}
.fsec{font-family:var(--font-head);font-weight:700;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ember);margin:18px 0 2px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:0 14px}   /* gęściej: karta o połowę krótsza */
.f-auto{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
/* sekcje formularza w ramkach + checklista postępu */
.f-box{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin-top:12px}
.f-hd{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ember);margin:0 0 6px}
.f-num{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--ember);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none;letter-spacing:0}
.f-hd-act{margin-left:auto;text-transform:none;letter-spacing:0;font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:12px;cursor:pointer;color:var(--ember)}
button.f-hd-act{padding:5px 10px}
.f-manual{background:#FBF0DC;color:var(--amber);border-radius:8px;padding:2px 8px;font-size:11px;letter-spacing:.03em}
input.f-miss,select.f-miss,textarea.f-miss{background:#FBF0DC;border-color:var(--amber)}
/* postęp kontenera: pionowy stepper (własna zakładka ✅ Postęp) —
   kropki połączone linią, zaliczone zielone, przyszłe wyszarzone */
.ck-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;max-width:680px}
.ck-list{list-style:none;margin:6px 0 0;display:block}
.ck{position:relative;display:flex;align-items:flex-start;gap:12px;padding:8px 0}
.ck::before{content:'';position:absolute;left:11px;top:0;bottom:0;border-left:2px dotted var(--line);z-index:0}
.ck:first-child::before{top:16px}
.ck:last-child::before{height:16px;bottom:auto}
.ck-dot{position:relative;z-index:1;font-style:normal;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:transparent;background:var(--card)}
.ck-on .ck-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.ck-body{min-width:0;padding-top:1px}
.ck-t{font-size:14px;font-weight:600;display:block;color:var(--muted)}
.ck-on .ck-t{color:var(--ink)}
.ck-s{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.f-actions{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.f-more{position:relative;margin-left:auto}
.f-menu{display:none;position:absolute;right:0;bottom:110%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:10}
.f-menu.open{display:block}
.f-menu a{display:block;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:4px;color:var(--ink)}
.f-menu a:hover{background:var(--soft)}
.f-menu a.f-danger{color:var(--warn)}
@media(max-width:640px){
  .stp{overflow-x:auto;padding-bottom:6px}
  .stp-node{min-width:72px}
}
.lc-list{list-style:none;margin:4px 0 12px;font-size:13.5px}
.lc-list li{padding:3px 0}
.lc-ok{color:var(--ok)}
.lc-todo{color:var(--muted)}
.ph-side{position:absolute;top:4px;left:4px;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.05em;border-radius:4px;padding:1px 5px}
.ph-side-sup{background:var(--ember);color:#fff}
.ph-side-mp{background:var(--coal);color:var(--paper)}
.chip-arch{border-style:dashed}
.chip-zero{opacity:.55}
/* pulpit: klikalne kafle i wiersze alarmów */
.kpi[data-kstage]{cursor:pointer}
.kpi[data-kstage]:hover{border-color:var(--ember)}
tr.dash-row{cursor:pointer}
#ct_list tbody tr{cursor:pointer}
#bl_list tbody tr{cursor:pointer}
/* wersja mobilna list: karty zamiast tabeli (desktop bez zmian) */
.m-cards{display:none}
.m-card{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:10px 12px;margin-top:10px;cursor:pointer}
.m-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.m-card-no{font-family:ui-monospace,Consolas,monospace;font-weight:700;font-size:15px}
.m-card-l{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.m-card-l b{color:var(--ink)}
@media(max-width:640px){
  #ct_list .tbl-scroll,#bl_list .tbl-scroll{display:none}
  .m-cards{display:block}
}
/* akordeony kontenerów na karcie B/L: nagłówek i treść w jednej ramce,
   lewa krawędź w kolorze etapu (2026-07-26) */
.bl-acc{margin-top:14px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.bl-acc>.dt-sum{border:none;border-radius:0;background:var(--soft)}
.bl-acc>.dt-sum:hover{background:#EDE9E0}
/* akordeon: jawne zaproszenie zamiast samego caretu */
.acc-more{margin-left:auto;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--muted);white-space:nowrap}
.dt-sum:hover .acc-more{color:var(--ember)}
.bl-acc>.dt-sum .acc-hide{display:none}
.bl-acc[open]>.dt-sum .acc-show{display:none}
.bl-acc[open]>.dt-sum .acc-hide{display:inline}
/* pigułka stanu śledzenia w nagłówku karty B/L */
.trk-pill{display:inline-flex;align-items:center;gap:7px;background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.trk-pill i{font-style:normal;font-size:11px;line-height:1}
.trk-on i{color:var(--ok)}
.trk-off i{color:var(--muted)}
.bl-acc[open]>.dt-sum{border-bottom:1px solid var(--line);border-radius:0}
.bl-acc-body{padding:10px 14px 12px}
.bl-acc .vm{margin:0}
.bl-acc table.vt{max-width:none}
.bl-acc .vm-big{margin-top:10px}
.tx{font-size:11.5px;font-weight:700;white-space:nowrap}
.txc{font-size:16px;font-weight:700}
.txc-ok{color:var(--ok)}
.txc-bad{color:var(--warn)}
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--ember)}
.tx-ok{color:var(--ok)}
.tx-bad{color:var(--warn)}
.jb{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.jb-seg{width:14px;height:7px;border-radius:2px;background:var(--soft);border:1px solid var(--line)}
.jb-on{border-color:transparent}
.jb-on.sg-gray{background:#B4B2A9}
.jb-on.sg-amber{background:var(--amber)}
.jb-on.sg-ok{background:var(--ok)}
.jb-on.sg-blue{background:var(--info)}
.jb-on.sg-warn{background:var(--warn)}
.jb-on.sg-dark{background:var(--coal)}
.jb-lbl{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-left:6px}

/* ---------------- [field] tryby terenowe + zdjęcia ---------------- */
/* lifting 2026-07-27: sekcje, karty, wielki CTA, pełnoekranowe potwierdzenie */
.fld-sec{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:18px 0 4px}
.fld-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin-top:10px;cursor:pointer}
.fld-card:hover{border-color:var(--ember);border-left-color:inherit}
.fld-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fld-no{font-family:ui-monospace,Consolas,monospace;font-weight:700;font-size:17px}
.fld-card-sub{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.fld-dim{opacity:.6}
.fld-done{margin-top:18px}
.fld-cta{position:sticky;bottom:10px;margin-top:16px}
.btn-ok-big{width:100%;padding:17px;font-size:16px;font-weight:700;background:var(--ok);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.btn-ok-big:disabled{background:var(--line);color:var(--muted);box-shadow:none;cursor:default}
.fld-ov{position:fixed;inset:0;background:rgba(20,17,14,.78);z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.fld-ov-card{background:var(--card);border-radius:var(--radius);padding:24px 22px;max-width:420px;width:100%;text-align:center}
.fld-ov-card h2{font-size:22px;margin-bottom:8px;font-family:ui-monospace,Consolas,monospace}
.btn-cam-big{width:100%;padding:22px;font-size:18px;font-weight:700;background:var(--ember);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;margin-top:10px}
.btn-cam-big:active{transform:scale(.99)}
.btn-gal-small{width:100%;margin-top:8px;padding:11px;font-size:13.5px}
.ph-h{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
#fld_cats .chip b{margin-left:2px}
.fld-tile{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:10px;cursor:pointer;font-size:16px}
.fld-tile:hover{border-color:var(--ember)}
.fld-queue{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;margin-bottom:10px}
.fld-qerr{color:var(--warn);margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:8px}
.ph-thumb{position:relative;aspect-ratio:1;background:var(--soft) center/cover no-repeat;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:flex-end;font-size:18px}
.ph-thumb span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(27,24,21,.75);color:#F4F2ED;border-radius:0 4px 0 4px;padding:2px 6px;width:100%;text-align:center}
.ph-thumb.ph-pending{align-items:center;justify-content:center;flex-direction:column;color:var(--muted)}
.ph-del{position:absolute;top:4px;right:4px;font-style:normal;background:var(--warn);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px}
.tb-queue{align-items:center;font-size:12.5px;font-weight:700;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:3px 9px;cursor:pointer;white-space:nowrap}
label.chk{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--ink);margin-top:12px}
label.chk input{width:auto}

/* ---------------- [add containers] formularz dodawania ---------------- */
tr.ad-bad td{background:var(--warn-bg)}
tr.ad-bad td b{color:var(--warn)}
.ad-err{font-size:11.5px;color:var(--warn);font-weight:600}

/* ---------------- [charge bars] symulator demurrage/storage ---------------- */
.cb-wrap{margin:10px 0}
.cb-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;margin-bottom:4px}
.cb-amount{font-size:13.5px}
.cb-bar{position:relative;height:16px;border-radius:8px;overflow:hidden;display:flex;border:1px solid var(--line)}
.cb-seg{height:100%}
.cb-marker{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--coal);box-shadow:0 0 0 1.5px #fff}
.cb-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:4px}
.cb-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:baseline}
.cb-total{font-size:15px;margin-top:8px}
.port-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 3px 0 6px;vertical-align:middle}

/* ---------------- [voyage] rejs jako oś czasu (v4: kafelki SVG + kropkowana linia) ---------------- */
.vm{margin:12px 0 4px}
table.vt{width:100%;border-collapse:collapse;font-size:13.5px;max-width:840px}
.vt th{text-align:left;padding:5px 8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line)}
.vt td{padding:10px 8px;border-bottom:1px solid var(--soft);vertical-align:middle}
.vt-st{width:34px;position:relative;text-align:center;padding-left:0;padding-right:0}
.vt-st::before{content:'';position:absolute;left:50%;top:0;bottom:0;margin-left:-1px;border-left:2px dotted var(--line)}
tr.vt-first .vt-st::before{top:50%}
tr.vt-last .vt-st::before{bottom:50%}
.vt-dot2{position:relative;z-index:1;font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--card);border:2px solid var(--line);color:transparent;font-size:14px;font-weight:700}
.vt-done .vt-dot2{background:var(--ok);border-color:var(--ok);color:#fff}
.vt-cur .vt-dot2{background:var(--ember);border-color:var(--ember);color:#fff}
.vt-icn{width:54px}
.vt-tile{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px}
.vt-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-t-load{background:var(--info-bg);color:var(--info)}
.vt-t-tranship{background:var(--info-bg);color:var(--info)}
.vt-t-ship{background:var(--ok-bg);color:var(--ok)}
.vt-t-truck{background:#ECEAF9;color:#5B50C0}
.vt-t-home{background:#DFF2EF;color:#0E7568}
.vt-lbl b{font-size:14px}
.vt-port{display:block;font-size:12px;color:var(--muted);letter-spacing:.03em;margin-top:1px}
.vt-ves{color:var(--muted);font-size:12.5px;letter-spacing:.03em;white-space:nowrap}
.vt-dts b{font-weight:700}
.vt tbody tr:not(.vt-done):not(.vt-cur){opacity:.6}
tr.vt-cur{background:#FBEFE7;box-shadow:inset 3px 0 0 var(--ember)}   /* bieżący etap: krawędź + tło */
.vt-cur .vt-lbl b,.vt-cur .vt-dts{color:var(--ember)}
/* pasek statusu rejsu: informacyjny niebieski (w toku); .vm-alert nadpisuje na czerwono */
.vm-big{font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:.02em;margin-top:12px;padding:10px 14px;background:#EAF2F9;color:#1D4E75;border-left:4px solid var(--info);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.vm-act{background:#FBF0DC;color:#7A4E04;border-left-color:var(--amber)}     /* wezwanie: zorganizuj odbiór/rozładunek */
.vm-ok{background:var(--ok-bg);color:var(--ok);border-left-color:var(--ok)}  /* rozładowany */
.vm-dark{background:var(--soft);color:var(--ink);border-left-color:var(--coal)} /* zamknięty */
.vm-alert{background:var(--warn-bg);border-left-color:var(--warn);color:var(--warn)}
/* tabela etapów w lewej kolumnie karty kontenera — luźniej i czytelniej */
.cc-main .vm{margin:0}
.cc-main table.vt{max-width:none;font-size:13.5px}
.cc-main .vt td{padding:9px 8px}
@media(max-width:640px){
  .vm-big{font-size:15.5px}
  table.vt{font-size:12px}
  .vt-ves{white-space:normal}
}

/* ---------------- [gallery] lightbox zdjęć ---------------- */
.gal-ov{position:fixed;inset:0;background:rgba(20,17,14,.93);z-index:100;display:flex;align-items:center;justify-content:center}
.gal-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:#F4F2ED;font-size:13px;font-weight:600;background:linear-gradient(rgba(0,0,0,.5),transparent)}
.gal-x{background:transparent;border:none;color:#F4F2ED;font-size:22px;cursor:pointer;padding:4px 10px}
.gal-x:hover{color:var(--ember)}
.gal-img{max-width:92vw;max-height:86vh;border-radius:6px;transition:opacity .15s;user-select:none}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:none;color:#F4F2ED;font-size:40px;line-height:1;padding:14px 12px;cursor:pointer;border-radius:8px;z-index:101}
.gal-nav:hover{background:var(--ember)}
.gal-prev{left:10px}
.gal-next{right:10px}
@media(max-width:640px){.gal-nav{font-size:30px;padding:10px 8px}}

/* ---------------- [cc] karta kontenera: nagłówek, kolumny, zakładki ---------------- */
.cc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card h2.cc-no{font-family:var(--font-head);font-weight:800;font-size:30px;letter-spacing:.02em;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-sub{font-size:13.5px;color:var(--muted);margin:4px 0 0}
.cc-sub b{color:var(--ink)}
.cc-chips{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cc-copy{background:transparent;border:none;cursor:pointer;font-size:14px;padding:2px 4px;line-height:1;opacity:.55;vertical-align:middle}
.cc-copy:hover{opacity:1}
.cc-cols{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--soft)}
.cc-main{min-width:0}
.cc-side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;align-self:start;box-shadow:var(--sh-1)}
.cc-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--soft);font-size:13px}
.cc-row:last-child{border-bottom:none}
.cc-row span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.cc-row b{text-align:right;word-break:break-word}
.cc-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:14px}
/* [F1 FROZEN] nieaktywna 600, aktywna 700 — pogrubienie NIESIE wybór.
   Wcześniej obie były 700 i wybór dźwigał sam kolor. */
.cc-tab{background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:8px 8px 0 0;padding:9px 14px;font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--muted);cursor:pointer;white-space:nowrap}
.cc-tab:hover{color:var(--ember);background:var(--soft)}
.cc-tab.active{color:var(--ember);border-bottom-color:var(--ember);background:var(--surface-tab-active);font-weight:700}
.cc-tab:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
.cc-tab span{font-weight:600;font-size:12px;color:var(--muted)}
.cc-pane{display:none}
.cc-pane.active{display:block}
@media(max-width:760px){
  .cc-cols{grid-template-columns:1fr}
  .card h2.cc-no{font-size:23px}
  .cc-chips{flex-direction:row;align-items:center;flex-wrap:wrap}
  .cc-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:0}
  .cc-tab{padding:9px 10px;font-size:13px}
}

/* ---------------- [utils] ---------------- */
.lnk{color:var(--ember);cursor:pointer}
.lnk b{color:inherit}
.lnk:hover{text-decoration:underline}
.footer-note{font-size:11.5px;color:var(--muted);text-align:center;padding:26px 0 20px}

/* ---------------- [responsive] ---------------- */
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .2s;height:100%}
  .sidebar.open{transform:translateX(0)}
  .sb-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}
  .sb-scrim.show{opacity:1;pointer-events:auto}
  .sb-burger{display:block}
}
@media(max-width:640px){
  .grid2{grid-template-columns:1fr}
  .wrap{padding:14px}
  input,select,textarea{font-size:16px}          /* blokuje auto-zoom iOS */
  .topbar{padding:8px 12px;gap:8px}
  .tb-search{max-width:none}
  .tb-name{display:none}
  .page-title{font-size:24px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:12px 14px;gap:10px}
  .kpi-ic{width:36px;height:36px}
  .kpi-num{font-size:24px}
  table.lst{font-size:12.5px}
  table.lst td,table.lst th{padding:6px}
  .card{padding:14px}
  button{padding:11px 14px}
}

/* ---------------- [erp] nagłówek strony + wstęga akcji (lifting 2026-08) ----------------
   Kanon ERP (decyzja Kamila 16.08.2026): WSZYSTKIE akcje ekranu w JEDNEJ wstędze
   pod nagłówkiem strony — wariant A: ikona nad podpisem, grupy z podpisami,
   primary pomarańczowy zawsze pierwszy z lewej, kasowanie na końcu na czerwono.
   Na telefonie wstęga przykleja się do dołu ekranu (nad dolną nawigacją). */
.page-head{background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--sh-1);
  margin:-22px -26px 18px;padding:12px 26px 0}
@media(min-width:641px){
  .page-head{position:sticky;top:0;z-index:25}
  /* panele rozwijane we wstedze nie moga wyrosnac ponad ekran — przewijaja sie w srodku */
  .page-head .act-panel{max-height:45vh;overflow:auto}
}
.page-head .crumb{margin-top:0;font-size:12px}
.ph-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.ph-row h1{font-size:26px;font-weight:700;letter-spacing:.02em;margin:0}
.ph-row h2.cc-no{font-size:26px}   /* [F1 FROZEN] --fs-h1 */
.ph-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.ribbon{display:flex;flex-wrap:wrap;align-items:stretch;row-gap:6px;padding:10px 0 2px}
.rb-grp{display:flex;flex-direction:column;padding:0 9px;border-right:1px solid var(--line)}
.rb-grp:first-child{padding-left:0}
.rb-grp:last-child{border-right:none}
.rb-row{display:flex;gap:2px;flex:1;align-items:stretch}
.rb-cap{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding:4px 0 7px;white-space:nowrap}
.rb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:60px;
  padding:6px 8px;border:none;border-radius:8px;background:transparent;font-family:var(--font-body);
  font-size:11px;font-weight:600;color:var(--ink);cursor:pointer;line-height:1.15;text-align:center}
.rb .ic{width:18px;height:18px;opacity:1;flex-shrink:0}
.rb:hover{background:var(--soft)}
.rb:disabled{opacity:.45;cursor:default;pointer-events:none}
.rb:disabled:hover{background:transparent}
.rb-primary{background:var(--ember);color:#fff}
.rb-primary:hover{background:var(--ember-dark)}
/* ZAPISZ (2026-08-19): zielony = „utrwal zmiany", ale tylko gdy jest co zapisywać.
   Szary i nieklikalny, dopóki nic nie ruszono — kolor niesie informację, nie ozdobę.
   Pomarańcz zostaje dla „zacznij coś nowego" (Dodaj, Załóż, Utwórz). */
.rb-why{position:fixed;z-index:99;background:var(--coal);color:#fff;padding:8px 12px;border-radius:8px;
  font-size:12.5px;line-height:1.35;max-width:280px;box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0;transition:opacity .15s;pointer-events:none}
.rb-why.on{opacity:1}
.rb-save{background:var(--ok);color:#fff}
.rb-save:hover:not(:disabled){background:#24632A}
.rb-save:disabled{background:transparent;color:var(--muted);opacity:.45}
/* następny krok cyklu: węglowa czerń — wyraźny, ale nie konkuruje z „Zapisz" */
.rb-cta{background:var(--coal);color:var(--paper)}
.rb-cta:hover{background:var(--coal-soft)}
.rb-danger{color:var(--warn)}
.rb-danger:hover{background:var(--warn-bg)}
/* zamknięcie rekordu: czerwień pełna — jak dawny btn-danger-solid */
.rb-close{background:var(--warn);color:#fff}
.rb-close:hover{background:var(--danger-hover)}
/* linijka podpowiedzi cyklu pod wstęgą (dawne hinty przy przyciskach) */
.rb-hint{font-size:12.5px;color:var(--muted);padding:4px 0 10px}
.rb-hint:empty{display:none}
.rb-hint b{color:var(--ink)}
.page-head .msg{margin:0 0 10px}
/* karta rekordu: dane + boczne podsumowanie widoczne przy każdej zakładce */
.erp-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.erp-cols .card{margin-top:0}
.erp-cols .card+.card{margin-top:16px}
.erp-cols .cc-side{position:sticky;top:12px}

/* dolna nawigacja (telefon): najczęstsze moduły pod kciukiem */
.m-nav{display:none}
@media(max-width:900px){
  .m-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:36;background:var(--coal);
    height:calc(54px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
    border-top:1px solid #2E2922}
  .m-navi{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:#8E867B;font-size:9.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;
    border:none;background:transparent;border-radius:0;padding:0}
  .m-navi .ic{width:20px;height:20px}
  .m-navi.active{color:#FF8A4C}
  .wrap{padding-bottom:80px}
  .footer-note{padding-bottom:70px}
}
@media(max-width:640px){
  .page-head{margin:-14px -14px 14px;padding:10px 14px 0}
  .ph-row h1{font-size:22px}
  /* wstęga → stały dolny pasek akcji, nad dolną nawigacją; podpisy grup znikają */
  .ribbon{position:fixed;left:0;right:0;bottom:calc(54px + env(safe-area-inset-bottom,0px));z-index:35;
    background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.09);
    padding:6px 8px;margin:0}
  /* grupy przestają być sztywnymi klockami — guziki płyną i ŁAMIĄ się swobodnie,
     inaczej szeroka grupa (Teczka = 6 guzików) wypychała resztę poza ekran */
  .rb-grp{display:contents}
  .rb-row{display:contents}
  .rb-cap{display:none}
  .rb{min-width:54px;font-size:10px;padding:4px 6px;gap:3px}
  .ribbon{gap:2px;row-gap:4px;max-height:236px;overflow-y:auto}
  /* wysokość dolnego paska zgłasza JS (--rb-pad) — treść nigdy nie chowa się pod nim */
  .wrap{padding-bottom:var(--rb-pad, 250px)}
  .erp-cols{grid-template-columns:1fr}
  .erp-cols .cc-side{position:static;order:-1}   /* podsumowanie najpierw — najważniejsze liczby od razu */
}

/* [F1 FROZEN 22.08.2026] Ściskanie zakładek huba USUNIĘTE.
   Pomiar na zamrożonej referencji: 9 zakładek w kanonie (14px, padding 9/14,
   gap 4) = 972 px. Pasek wystawiony na pełną szerokość encji ma 1156 px —
   zapas 184 px. Ciasnota brała się wyłącznie stąd, że pasek siedział
   w kolumnie 708 px razem z treścią. Kanon kart zostaje bez wyjątków. */

/* ---------------- [F1] Supplier Hub: POWIĄZANE (wzorzec referencyjny) ---------------- */
.related-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;box-shadow:var(--sh-1)}
.rel-row{display:flex;align-items:center;gap:7px;padding:6px 4px;border-radius:6px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.rel-row:hover{background:var(--soft)}
.rel-row b{color:var(--ember-dark);font-weight:700}
.rel-arr{margin-left:auto;color:var(--muted)}
.rel-dim{opacity:.5}

/* ---------------- [BETA + oświadczenie + samouczek] ---------------- */
.beta-chip{display:inline-block;background:var(--ember);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.08em;padding:2px 7px;border-radius:99px;vertical-align:2px}

/* ---------------- [beta] oznaczenie środowiska testowego (/beta/) ---------------- */
.auth-wrap.is-beta{flex-direction:column}
.beta-banner{position:relative;z-index:2;      /* nad wideo tła, tak jak karta */
  max-width:400px;width:100%;margin-bottom:16px;background:#FFD54D;color:#1B1815;
  border:3px dashed #1B1815;border-radius:var(--radius);padding:14px 18px;text-align:center;
  box-shadow:var(--shadow-auth)}
.beta-banner .bb-t{display:block;font-family:var(--font-head);font-weight:700;font-size:23px;
  letter-spacing:.06em;margin-bottom:4px}
.beta-banner span{display:block;font-size:12.5px;font-weight:600;line-height:1.45}
.beta-bar{background:#FFD54D;color:#1B1815;text-align:center;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;padding:6px 12px;border-bottom:2px solid #1B1815}
.portal-move{background:#DCEBFF;color:#123;text-align:center;font-size:12.5px;font-weight:600;
  padding:6px 12px;border-bottom:1px solid #9CC0EE}
.portal-move a{font-weight:700;text-decoration:underline;color:inherit}
.gate-text p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.sb-help{margin:6px 12px 4px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;
  background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.sb-help:hover{color:var(--ink);border-color:var(--ember)}

#tour_ov{position:fixed;inset:0;z-index:3000}
#tour_ov .tour-spot{position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(20,16,12,.62);border:2px solid var(--ember);
  transition:top .25s,left .25s,width .25s,height .25s}
#tour_ov .tour-bubble{position:fixed;max-width:440px;width:calc(100vw - 28px);
  background:var(--card,#fff);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
#tour_ov .tour-center{top:50%;left:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 9999px rgba(20,16,12,.62),0 18px 50px rgba(0,0,0,.35)}
#tour_ov .tour-prog{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ember);
  text-transform:uppercase;margin-bottom:4px}
#tour_ov .tour-title{font-size:17px;font-weight:700;margin-bottom:6px}
#tour_ov .tour-text{font-size:13.5px;line-height:1.55;color:var(--ink)}
#tour_ov .tour-btns{display:flex;gap:8px;align-items:center;margin-top:14px}
@media(max-width:640px){
  #tour_ov .tour-bubble{max-width:none;left:14px !important;right:14px}
}

/* ================= [F1] IMPLEMENTACJA ZAMROŻONEGO KIERUNKU (22.08.2026) =================
   Źródło: claude-memory/F1_VISUAL_REFERENCE_FREEZE.md + MIRAND-PLUS UI SYSTEM.
   Zasada: poprawiamy WSPÓLNY prymityw, nie dorabiamy lokalnego duplikatu dla huba. */

/* --- Level 1: pasek zakładek encji na PEŁNĄ szerokość (nie w kolumnie treści) --- */
.kh-tabbar{position:relative;margin-top:16px}
.kh-tabbar .cc-tabs{margin-bottom:0}
.kh-tabbar + .erp-cols{margin-top:14px}
/* wygaszenie krawędzi — sygnał „są dalsze zakładki”; zapala je JS, gdy pasek faktycznie się przewija */
.kh-tabbar::after{content:'';position:absolute;right:0;top:0;bottom:2px;width:38px;pointer-events:none;
  background:linear-gradient(to right,rgba(244,242,237,0),var(--paper));opacity:0;transition:opacity .15s}
.kh-tabbar.is-scroll::after{opacity:1}

/* --- Level 2: zakładki modułu zagnieżdżonego — CICHSZE od rodzica --- */
.cc-pane .cc-tabs{border-bottom-width:2px}
.cc-pane .cc-tab{font-size:12.5px;padding:7px 12px;border-bottom-width:2px;margin-bottom:-2px}
.cc-pane .cc-tab.active{color:var(--ink);border-bottom-color:var(--ink);background:transparent}
.cc-pane .cc-tab:hover{color:var(--ember);background:var(--soft)}

/* --- Status / Compact Text: status w GĘSTYM rejestrze (bez tła, kolor niesie znaczenie) --- */
.stx{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.stx-ok{color:var(--ok)}
.stx-warn{color:var(--amber)}
.stx-danger{color:var(--warn)}
.stx-info{color:var(--info)}
.stx-mut{color:var(--muted)}

/* --- wiersz gęsty: długie rejestry --- */
table.lst.lst-dense td{padding:6px 8px}

/* --- kafle KPI karty encji: 3 x 2 desktop, równa wysokość --- */
.kh-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.kh-facts .lc-f{min-height:64px;display:flex;flex-direction:column;justify-content:center}

/* --- POWIĄZANE na wąskim: jeden wiersz zamiast pełnej listy nad treścią --- */
.rel-strip{display:none}

/* --- wstęga: pierścień skupienia (klawiatura) --- */
.rb:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.rb-primary:focus-visible,.rb-close:focus-visible{outline-color:var(--coal)}

/* ================= TABLET: COMPACT APP SHELL =================
   Globalny wzorzec chrome dla tabletu, nie atrapa na jednym ekranie.
   Szyna 64 px zamiast sidebara 232 px = +168 px obszaru roboczego.
   Tożsamość, komplet domen (ikony + tooltip), stan aktywny — zostają. */
@media(min-width:901px) and (max-width:1279px){
  .sidebar{width:64px}
  .sb-logo{padding:12px 0 10px;justify-content:center;gap:0;font-size:0}
  .sb-logo .sb-brand{width:36px;height:36px}
  .sb-sub{display:none}
  .sb-nav{padding:6px 8px}
  /* nagłówek domeny nie znika — staje się cienkim separatorem, żeby grupowanie
     domen (art. 11 konstytucji) zostało czytelne także w szynie */
  .sb-sec{height:1px;padding:0;margin:10px 6px;background:#2E2922;font-size:0;overflow:hidden}
  .sb-sec:first-child{margin-top:4px}
  .sb-item{justify-content:center;gap:0;padding:10px 0;font-size:0;border-left:none}
  .sb-item .ic{width:20px;height:20px;opacity:.9}
  .sb-item.active{background:var(--ember);color:#fff;border-left-color:transparent}
  .sb-item.active .ic{opacity:1}
  .sb-soon,.sb-caret{display:none}
  .sb-set-toggle{margin-top:8px;padding-top:8px}
  .sb-set .sb-item{padding-left:0}
  .sb-foot{display:none}
  .topbar{padding:8px 16px}
  .wrap{padding:18px 20px}
  .page-head{margin:-18px -20px 16px;padding:10px 20px 0}
}

/* --- TABLET: wstęga świadomie skondensowana do JEDNEGO rzędu ---
   Nadmiar akcji NIE przewija się w poziomie — schodzi do menu „Więcej”
   (patrz ribbonOverflow w core.js). Dlatego overflow:visible, nie auto:
   panel menu jest pozycjonowany absolutnie i nie wolno go przyciąć. */
@media(min-width:641px) and (max-width:1279px){
  .ribbon{flex-wrap:nowrap;overflow:visible;align-items:center;row-gap:0;padding:8px 0 6px}
  .rb-grp{flex-direction:row;align-items:center;padding:0 8px}
  .rb-cap{display:none}
  .rb-row{gap:4px;align-items:center}
  .rb{flex-direction:row;gap:6px;min-width:0;padding:7px 10px;font-size:12px;white-space:nowrap}
  .rb br{display:none}
  .rb .ic{width:16px;height:16px}
  /* zakładki: jeden przewijany pas, NIGDY dwa rzędy */
  .cc-tabs{flex-wrap:nowrap;overflow-x:auto}
  .ph-row h2.cc-no{font-size:22px}
}

/* ================= MOBILE: graceful degradation ================= */
@media(max-width:900px){
  /* POWIĄZANE → jednowierszowy pasek; pełna lista schodzi POD treść, nic nie ginie */
  .rel-strip{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
    border-radius:8px;padding:9px 12px;margin-top:12px;overflow:hidden}
  .rel-strip .rs-cap{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);flex:none}
  .rel-strip .rs-body{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .rel-strip .rs-arr{color:var(--muted);flex:none}
  .erp-cols .cc-side{position:static;order:1}
  .erp-cols .cc-side .related-box:not(.mt2){display:none}
}
@media(max-width:640px){
  .ph-row h2.cc-no{font-size:20px}
  /* jeden czytelny pasek akcji zamiast bloku na 236 px */
  .ribbon{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;align-items:center;
    row-gap:0;padding:7px 8px}
  .rb-grp{display:flex;flex-direction:row;align-items:center;padding:0 4px}
  .rb-row{display:flex;gap:4px}
  .rb{flex-direction:row;gap:5px;min-width:0;padding:6px 9px;font-size:11px;white-space:nowrap}
  .rb br{display:none}
  .rb .ic{width:15px;height:15px}
  .kh-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kh-tabbar{margin-top:12px}
}

/* --- [F1] menu „Więcej” wstęgi (tablet) — istniejący język .f-menu,
   te same guziki .rb w środku, żadnego drugiego systemu przycisków --- */
.rb-more-wrap{position:relative}
.rb-more-menu{top:calc(100% + 6px);bottom:auto;right:0;left:auto;padding:6px;min-width:210px}
.rb-more-menu .rb{display:flex;width:100%;justify-content:flex-start;text-align:left;
  padding:8px 10px;border-radius:6px;font-size:12.5px}
.rb-more-menu .rb:hover:not(:disabled){background:var(--soft)}
.rb-more-menu .rb br{display:none}
.rb-more-menu .rb-primary{background:var(--ember);color:#fff}

/* --- [F1] Przegląd huba: rozdzielenie warstw informacji ---
   Kafle KPI to jedna warstwa (fakty), komunikat operacyjny to druga (stan).
   Bez odstępu alert czyta się jak dalszy ciąg siatki. Odstęp bierze się
   z drabinki --sp-*, nie z przypadkowej liczby, i NIE z paddingu alertu.
   Dlaczego reguła jest potrzebna: alert jest kartą zagnieżdżoną, więc łapie
   go .erp-cols .card{margin-top:0}, a .card+.card nie działa — poprzednikiem
   jest siatka .kh-facts, nie karta. Zakres: wyłącznie Przegląd Supplier Huba. */
#kp_przeglad .kh-facts + .card{margin-top:var(--sp-5)}
@media(max-width:640px){
  #kp_przeglad .kh-facts + .card{margin-top:var(--sp-4)}
}

/* ===== USER GUIDE CORE (UG4) — renderer bazowy ==========================
   To NIE jest finalny język wizualny — minimum na tokenach F1, do wymiany
   w UG8 bez dotykania modelu treści. Bez zależności od hoveru, działa na
   wąskim ekranie (UG12). */
#guide_ov{position:fixed;inset:0;z-index:80;background:rgba(27,24,21,.55);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4)}
#guide_ov .guide-box{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--sh-2);max-width:520px;width:100%;
  max-height:80vh;display:flex;flex-direction:column}
#guide_ov .guide-head{display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-2);border-bottom:1px solid var(--line)}
#guide_ov .guide-title{font-size:17px;font-weight:700;flex:1;line-height:1.3}
#guide_ov .guide-x{background:none;border:0;font-size:24px;line-height:1;
  color:var(--muted);cursor:pointer;padding:0 var(--sp-1);min-width:32px;min-height:32px}
#guide_ov .guide-body{padding:var(--sp-4);font-size:13.5px;line-height:1.55;
  color:var(--ink);overflow:auto}
#guide_ov .guide-steps{margin:0;padding:0 var(--sp-4) var(--sp-4) var(--sp-6);
  font-size:13.5px;line-height:1.55}
#guide_ov .guide-steps li{margin-bottom:var(--sp-2)}
.guide-note{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  background:var(--info-bg);border-left:3px solid var(--info);
  border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5;color:var(--ink)}
@media(max-width:640px){
  #guide_ov{align-items:flex-end;padding:0}
  #guide_ov .guide-box{max-width:none;max-height:88vh;
    border-radius:var(--radius) var(--radius) 0 0}
}


/* ================= USER GUIDE — ARKUSZ POMOCY (UG8) =================
   Wyłącznie istniejące tokeny F1. Ember pozostaje JEDYNYM akcentem pomocy.
   Nic nie zależy od :hover — hover może co najwyżej podkreślić to, co i tak
   widać. Desktop: bez przyciemnienia, bo arkusz stoi OBOK pracy. */

/* punkt wejścia „?" — jeden na ekran, zawsze w tym samym miejscu */
.ph-help{width:28px;height:28px;flex:0 0 28px;border-radius:50%;padding:0;box-sizing:border-box;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font:700 15px/1 var(--font-body);cursor:pointer;position:relative;
  display:inline-flex;align-items:center;justify-content:center}
/* cel dotyku 40px bez rozpychania nagłówka */
.ph-help::after{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px}
.ph-help:hover{color:var(--ember);border-color:var(--ember)}
.ph-help:focus-visible{outline:2px solid var(--ember);outline-offset:2px;color:var(--ember)}

.gs{position:fixed;top:0;right:0;bottom:0;width:400px;z-index:2600;
  background:var(--card);border-left:1px solid var(--line);box-shadow:var(--sh-2);
  display:flex;flex-direction:column;overflow:hidden}
@media(min-width:641px) and (max-width:1279px){ .gs{width:360px} }

.gs-head{position:relative;padding:16px 46px 12px 18px;border-bottom:1px solid var(--line)}
.gs-kicker{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ember);margin-bottom:3px}
.gs-title{font-size:20px;font-weight:700;margin:0;letter-spacing:.01em}
.gs-title:focus{outline:none}
.gs-title:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.gs-sub{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.gs-place{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;margin-top:8px}
.gs-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:none;color:var(--muted);font-size:22px;line-height:1;
  cursor:pointer}
.gs-x:hover{color:var(--ink);border-color:var(--line)}
.gs-x:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.gs-back{background:none;border:none;padding:0;margin-bottom:6px;cursor:pointer;
  font:600 12px/1 var(--font-body);color:var(--ember)}
.gs-back:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

.gs-body{flex:1;overflow-y:auto;padding:4px 0 24px}
.gs-sec{padding:14px 18px 6px;border-bottom:1px solid var(--line)}
.gs-sec:last-child{border-bottom:none}
.gs-cap{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}

.gs-row{display:flex;width:100%;align-items:center;gap:10px;text-align:left;
  background:none;border:none;border-radius:var(--radius-sm);padding:9px 8px;cursor:pointer;
  font:600 13.5px/1.4 var(--font-body);color:var(--ink)}
.gs-row:hover{background:var(--surface-row-hover)}
.gs-row:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
.gs-row-t{flex:1}
.gs-row-c{color:var(--muted);font-size:16px}
.gs-row[aria-expanded="true"]{color:var(--ember)}
.gs-row[aria-expanded="true"] .gs-row-c{transform:rotate(90deg)}
.gs-row-b{font-size:13px;line-height:1.6;color:var(--ink);padding:2px 8px 12px}

.gs-lead{font-size:13.5px;line-height:1.6;color:var(--muted);padding:14px 18px 0}
.gs-steps{margin:0;padding:14px 18px 6px 36px}
.gs-steps li{font-size:13px;line-height:1.6;margin-bottom:12px}
.gs-go{background:none;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:3px 9px;margin-left:2px;cursor:pointer;font:600 11.5px/1.3 var(--font-body);
  color:var(--ember);white-space:nowrap}
.gs-go:hover{border-color:var(--ember)}
.gs-go:focus-visible{outline:2px solid var(--ember);outline-offset:1px}

.gs-tour{display:block;width:100%;text-align:left;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;cursor:pointer;
  font:700 13px/1.3 var(--font-body);color:var(--ink)}
.gs-tour:hover{border-color:var(--ember);color:var(--ember)}
.gs-tour:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.gs-meta{font-size:11.5px;color:var(--muted);margin-top:6px}
.gs-swap{padding:12px 18px 0;border-top:1px solid var(--line);margin-top:8px}
.gs-swap .gs-meta{margin:0 0 8px}
.gs-empty{font-size:13px;line-height:1.6;color:var(--muted);padding:2px 0 8px}

/* ZAPROSZENIE — nie blokuje, nie zasłania pracy, znika na ✕ */
#gs_invite{position:fixed;right:20px;bottom:20px;width:320px;z-index:2500;
  background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--ember);border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--sh-2);padding:14px 40px 14px 16px}
.gs-inv-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;background:none;
  color:var(--muted);font-size:20px;line-height:1;cursor:pointer;border-radius:var(--radius-sm)}
.gs-inv-x:hover{color:var(--ink)}
.gs-inv-x:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.gs-inv-t{font-size:14.5px;font-weight:700;margin-bottom:4px}
.gs-inv-b{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:11px}
.gs-inv-f{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.45}

/* linia miejsca w dymku samouczka */
#tour_ov .tour-place{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--muted);
  text-transform:uppercase;margin-bottom:3px}
#tour_ov .tour-bubble:focus{outline:none}


/* ---- UG8C: wiedza o procesie + stan tej sprawy ---- */
.gs-proc{margin:10px 0 4px;padding:9px 11px;border-left:2px solid var(--line);
  background:var(--soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.gs-proc-con{border-left-color:var(--amber)}
.gs-proc-next{border-left-color:var(--ember)}
.gs-proc-cap{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.gs-proc-list{margin:0;padding-left:16px}
.gs-proc-list li{font-size:12.5px;line-height:1.55;margin-bottom:5px}
.gs-proc-list li:last-child{margin-bottom:0}

.gs-ready{list-style:none;margin:0;padding:0}
.gs-ready li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.55;
  padding:5px 0}
.gs-ready-m{flex:0 0 16px;font-weight:700;text-align:center}
.gs-ready-ok .gs-ready-m{color:var(--ok)}
.gs-ready-todo .gs-ready-m{color:var(--amber)}
.gs-ready-unknown .gs-ready-m{color:var(--muted)}
.gs-ready-next{margin-top:8px;padding-top:9px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55}

/* --- MAŁY EKRAN: arkusz dolny + dymek dokowany --- */
@media(max-width:640px){
  #gs_scrim{position:fixed;inset:0;z-index:2590;background:rgba(20,16,12,.35)}
  .gs{top:auto;left:0;right:0;bottom:0;width:auto;max-height:88vh;
    border-left:none;border-top:1px solid var(--line);
    border-radius:var(--radius) var(--radius) 0 0}
  .gs-head{padding:14px 44px 10px 14px}
  .gs-sec{padding:12px 14px 6px}
  .gs-row{padding:11px 8px}          /* cel dotyku >= 40px */
  /* odsylacze [Pokaz →] siedza w zdaniu, wiec nie wolno ich rozpychac paddingiem —
     powiekszamy sam OBSZAR dotyku, nie wyglad (23px -> 41px) */
  .gs-go{position:relative}
  .gs-go::after{content:"";position:absolute;top:-9px;left:-4px;right:-4px;bottom:-9px}
  .gs-steps{padding:12px 14px 6px 32px}
  .gs-lead{padding:12px 14px 0}
  #gs_invite{right:10px;left:10px;bottom:10px;width:auto;
    border-radius:0 var(--radius) var(--radius) 0}
  /* width:auto jest konieczne — bazowa regula ustawia width:calc(100vw - 28px),
     ktora przebilaby pare left/right i zostawila 28px szpary z jednej strony */
  #tour_ov .tour-bubble{top:auto !important;bottom:0;left:0 !important;right:0;
    width:auto;max-width:none;border-radius:var(--radius) var(--radius) 0 0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  #tour_ov .tour-bubble.tour-center{transform:none;top:auto;left:0 !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   [MIRAND-PLUS BUTTON LANGUAGE v1 — OWNER APPROVED · FROZEN 24.08.2026]
   GLOBALNY język komponentów całej platformy, nie F2.
   Wzorzec: Figma `01 — UI Components` / `BUTTONS / D — MIRAND RECOMMENDED MIX`.
   Decyzja: claude-memory/MIRAND_BUTTON_LANGUAGE_V1_FREEZE.md

   ⛔ LEGACY NIETKNIĘTE: button{}, .btn-main, .btn-sm, .btn-ghost, .btn-danger,
      .btn-dark i reszta zostają bez zmian. Żadnego globalnego restyle — nowe
      klasy adoptują na razie WYŁĄCZNIE przebudowywane ekrany F2.

   Dwa języki, ta sama paleta:
     JĘZYK AKCJI       .mp-btn*      40 / 28 px · radius 8
     JĘZYK STEROWANIA  .mp-control*  28 px · radius 3 · zero cienia · segmenty
   Przyciemnienia bez nowych kolorów: ember-dark i danger-hover tam, gdzie token
   istnieje; nakładka coal (27,24,21) tam, gdzie nie istnieje (ok).
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- ścieżka kontekstu (breadcrumb) — para do MP.crumb() ----
   Wygląd wg Concept 02 (Figma 76:22): pasek z obramowaniem, ogniwa ember,
   bieżący obiekt jako chip na tle surface-tab-active. */
.mp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:10px 14px;margin-bottom:var(--sp-3);font-size:14px;line-height:1.2}
.mp-crumb-a{color:var(--ember);font-weight:600;cursor:pointer;border-radius:3px}
.mp-crumb-a:hover{text-decoration:underline}
.mp-crumb-a:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.mp-crumb-sep{color:var(--muted);font-weight:400}
.mp-crumb-cur{background:var(--surface-tab-active);border-radius:6px;padding:4px 10px;
  color:var(--ember);font-weight:700}
@media(max-width:520px){.mp-crumb{font-size:12.5px;padding:8px 10px;gap:6px}}

/* ---- JĘZYK AKCJI ---- */
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:40px;padding:0 20px;border:1px solid transparent;border-radius:8px;
  font-family:var(--font-body);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  line-height:1;white-space:nowrap;cursor:pointer;background:transparent;color:var(--ink);
  transition:background .12s ease,border-color .12s ease}
.mp-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.mp-btn:disabled,.mp-btn[disabled]{opacity:.42;cursor:default;pointer-events:none}
.mp-btn-compact{height:28px;padding:0 12px;font-size:12.5px;gap:7px}

.mp-btn-primary{background:var(--ember);color:#fff;border-color:var(--ember);
  box-shadow:0 2px 5px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.22)}
.mp-btn-primary:hover{background:var(--ember-dark);border-color:var(--ember-dark)}
.mp-btn-primary:active{background:var(--ember-dark);box-shadow:inset 0 2px 3px rgba(0,0,0,.30)}
.mp-btn-primary:focus-visible{outline-color:var(--coal)}

.mp-btn-secondary{background:var(--card);color:var(--coal);border-color:var(--line)}
.mp-btn-secondary:hover{background:var(--surface-row-hover)}
.mp-btn-secondary:active{background:var(--soft);box-shadow:inset 0 2px 3px rgba(0,0,0,.16)}

/* zielony nie ma ciemniejszego tokenu — przyciemniamy nakładką coal */
.mp-btn-confirm{background:var(--ok);color:#fff;border-color:var(--ok);
  box-shadow:0 2px 5px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.22)}
.mp-btn-confirm:hover{background-image:linear-gradient(rgba(27,24,21,.12),rgba(27,24,21,.12))}
.mp-btn-confirm:active{background-image:linear-gradient(rgba(27,24,21,.20),rgba(27,24,21,.20));
  box-shadow:inset 0 2px 3px rgba(0,0,0,.28)}
.mp-btn-confirm:focus-visible{outline-color:var(--coal)}

.mp-btn-danger{background:var(--card);color:var(--warn);border-color:var(--warn)}
.mp-btn-danger:hover{background:var(--warn-bg)}
.mp-btn-danger:active{background:var(--warn-bg);box-shadow:inset 0 2px 3px rgba(0,0,0,.18)}
.mp-btn-danger-solid{background:var(--warn);color:#fff;border-color:var(--warn)}
.mp-btn-danger-solid:hover{background:var(--danger-hover);border-color:var(--danger-hover)}

.mp-btn-text{height:auto;padding:0;border:none;background:none;color:var(--coal);
  font-size:13.5px;gap:7px}
.mp-btn-text:hover{color:var(--ember);text-decoration:underline}
.mp-btn-text:focus-visible{outline-offset:3px}

.mp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}

/* ---- JĘZYK STEROWANIA TECHNICZNEGO ---- */
.mp-control{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:3px;
  background:var(--card);color:var(--coal);font-size:13px;font-weight:600;line-height:1;cursor:pointer}
.mp-control:hover{background:var(--surface-row-hover)}
.mp-control:active{background:var(--soft)}
.mp-control:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.mp-control:disabled,.mp-control[disabled]{opacity:.42;cursor:default;pointer-events:none}

.mp-control-group{display:inline-flex;border:1px solid var(--line);border-radius:3px;
  background:var(--card);overflow:hidden}
.mp-control-group-v{flex-direction:column}
.mp-control-group .mp-control{border:none;border-radius:0}
.mp-control-group .mp-control+.mp-control{border-left:1px solid var(--line)}
.mp-control-group-v .mp-control+.mp-control{border-left:none;border-top:1px solid var(--line)}

/* Brakująca odmiana komunikatu. Kod ją wołał od Slice 1 (MP.show z 'msg-warn'),
   ale reguły nie było, więc .msg{display:none} zjadało komunikat w ciszy.
   Dokładane, nie przestylowywane — nic wcześniej tej klasy nie używało. */
.msg-warn{background:var(--soft);color:var(--amber);border-left:3px solid var(--amber);display:block}

/* ═══════ [F2 · Slice 1.5] układ ekranu — Concept 02 Operational Workspace ═══════
   FIGMA FIDELITY PASS 24.08.2026 — wzorzec: node 76:22 na stronie „F2 — Slice 1.5 UX".
   Wymiary przepisane z makiety: belka obiektu 64 px, nawigacja 26 px, panel 378 px,
   pasek mapy 39 px, stopka mapy 35 px, kadr mapy 520 px, pasek historii 46 px.
   Kompozycja konkretnego archetypu, NIE komponent — dlatego f2-*, nie mp-*. */

/* ---- 1 · COMPACT OBJECT BAR (Figma: 1200×64, padding 12/12/12/16, gap 20) ---- */
/* ⛔ TOŻSAMOŚCI SIĘ NIE UCINA. Etykieta działki, nazwa źródła i nazwa dostawcy
   NIGDY nie zamieniają się w „OYO-…" — to jedyne rzeczy, po których człowiek
   poznaje, na co patrzy. Gdy brakuje miejsca, belka ZAWIJA SIĘ na kolejny wiersz.
   Zawijanie steruje się szerokością KONTENERA (flex-wrap), a nie zapytaniem
   o viewport — bo realny obszar roboczy zmniejsza jeszcze szyna nawigacji. */
.f2-bar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:12px 12px 12px 16px;margin-bottom:var(--sp-3)}
.f2-bar-id{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.f2-bar-top{display:flex;align-items:center;gap:10px;min-width:0}
.f2-kind{display:inline-block;background:var(--soft);border-radius:4px;padding:2px 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.f2-title{font-family:var(--font-body);font-size:20px;font-weight:700;color:var(--ink);
  line-height:1.2;margin:0;white-space:nowrap}
.f2-desc{font-size:12.5px;color:var(--muted);line-height:1.2}
.f2-bar-sep{width:1px;align-self:stretch;background:var(--line);flex:0 0 1px;margin:3px 0}
.f2-bar-ctx{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.f2-ctx-r{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13px}
.f2-ctx-k{font-size:11.5px;font-weight:600;color:var(--muted);flex:0 0 auto}
.f2-ctx-v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.f2-ctx-a{font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:2px;white-space:nowrap}
.f2-ctx-a:hover{color:var(--ember);text-decoration-color:var(--ember)}
.f2-ctx-dot{color:var(--muted);font-size:11.5px}
.f2-ctx-loc{font-size:12.5px;color:var(--muted);line-height:1.2}
.f2-bar-gap{flex:1 1 0;min-width:0}
.f2-bar-state{flex:0 0 auto}
/* Gdy akcje nie mieszczą się w wierszu, schodzą w całości niżej i trzymają się
   prawej krawędzi — zamiast zabierać miejsce tożsamości. */
.f2-bar-acts{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;margin-left:auto}

/* ---- 2 · SECTION NAV (Figma: 26 px, gap 22, podkreślenie 2 px) ---- */
.f2-nav{display:flex;align-items:flex-end;gap:22px;padding-left:4px;flex-wrap:wrap}
.f2-nav-i{background:none;border:none;padding:0 0 7px;margin:0;cursor:pointer;
  font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;line-height:1.2}
.f2-nav-i:hover{color:var(--coal)}
.f2-nav-i.active{color:var(--ember);font-weight:700;border-bottom-color:var(--ember)}
.f2-nav-i:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
.f2-nav-line{height:1px;background:var(--line);margin:0 0 var(--sp-3)}

/* ---- 3 · WORKSPACE (Figma: mapa 810 / panel 378, gap 12) ---- */
.f2-ws{display:grid;grid-template-columns:minmax(0,1fr) 378px;gap:var(--sp-3);align-items:start}
@media(max-width:1100px){.f2-ws{grid-template-columns:1fr}}

/* ---- 4 · MAP SHELL — gotowa skorupa, Leaflet wchodzi do środka ---- */
.f2-map{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.f2-map-bar{display:flex;align-items:center;gap:10px;background:var(--soft);
  padding:12px 16px;border-bottom:1px solid var(--line)}
.f2-map-t{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.02em;line-height:15px}
.f2-map-v{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--muted);line-height:15px}
/* Kadr mapy. Wysokość i tło są DOCELOWE — w kroku 2 Leaflet montuje się w to
   samo miejsce, bez przebudowy układu. */
.f2-map-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface-row-alt);border-top:1px solid var(--line);padding:10px 16px;
  font-size:12.5px;line-height:15px;color:var(--muted)}
.f2-map-foot .f2-link{margin-left:auto}
.f2-link{background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-body);
  font-size:12.5px;font-weight:600;color:var(--ember)}
.f2-link:hover{text-decoration:underline}
.f2-link:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:2px}

/* ---- 5 · PANEL OPERACYJNY (Figma: 378 px, sekcje 39/56/122/184/215) ---- */
.f2-op{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.f2-op-bar{background:var(--soft);padding:12px 16px;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.02em;line-height:15px}
.f2-op-state{display:flex;align-items:center;gap:10px;padding:16px}
.f2-op-state b{font-size:16px;font-weight:700;line-height:1.2}
.f2-op-state i{font-style:normal;font-size:20px;line-height:1}
.f2-st-amber{background:#FBF0DC}            /* tło ostrzeżenia — to samo, co .sg-amber */
.f2-st-amber b,.f2-st-amber i{color:var(--amber)}
.f2-st-ok{background:var(--ok-bg)}
.f2-st-ok b,.f2-st-ok i{color:var(--ok)}
.f2-st-gray{background:var(--soft)}
.f2-st-gray b,.f2-st-gray i{color:var(--muted)}
.f2-op-sec{padding:16px;display:flex;flex-direction:column;gap:6px}
.f2-op-sec+.f2-op-sec{border-top:1px solid var(--line)}
.f2-op-k{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.f2-op-main{font-size:14px;font-weight:600;color:var(--ink);line-height:1.45}
.f2-op-sub{font-size:12.5px;color:var(--muted);line-height:1.5}
.f2-op-cta{margin-top:4px}
.f2-op-cta .mp-btn{width:100%}
.f2-op-data{background:var(--surface-row-alt);border-top:1px solid var(--line);
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.f2-row{display:flex;align-items:baseline;gap:10px;font-size:12.5px}
.f2-row dt{color:var(--muted);flex:0 0 auto}
.f2-row dd{margin:0 0 0 auto;font-size:13px;font-weight:600;color:var(--ink);text-align:right}
.f2-row dd.f2-mut{color:var(--muted);font-weight:600}
.f2-op-foot{display:flex;gap:8px;align-items:center;padding-top:4px}

/* ---- 6 · PASEK HISTORII (Figma: 46 px, padding 10/16, gap 10) ---- */
.f2-hist{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:var(--sp-3);
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 16px}
.f2-hist-k{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;
  text-transform:uppercase;line-height:14px}
.f2-hist-sep{width:1px;height:22px;background:var(--line);flex:0 0 1px}
.f2-hist-v{display:flex;align-items:center;gap:6px;background:var(--surface-row-alt);
  border-radius:6px;padding:5px 10px;font-size:12.5px;line-height:16px;color:var(--muted);white-space:nowrap}
.f2-hist-v.cur{background:var(--surface-tab-active)}
.f2-hist-v.cur .f2-hist-no{color:var(--ember)}
.f2-hist-v.cur em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ember)}
.f2-hist-no{font-size:13.5px;font-weight:700;color:var(--ink)}
.f2-hist-val{font-size:12.5px;font-weight:600;color:var(--ink)}
.f2-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}
.f2-dot-ok{background:var(--ok)} .f2-dot-amber{background:var(--amber)}
.f2-dot-warn{background:var(--warn)} .f2-dot-gray{background:var(--muted)}
.f2-hist-note{font-size:12px;color:var(--muted)}
.f2-hist .f2-link{margin-left:auto;font-size:13px}

/* ---- 7 · zwężenia ---- */
@media(max-width:900px){
  .f2-bar{gap:var(--sp-3)}
  .f2-bar-sep{display:none}
  .f2-bar-acts{width:100%;margin-left:0}
  .f2-bar-acts .mp-btn{flex:1 1 auto}
}
@media(max-width:520px){
  .f2-title{font-size:18px}
  .f2-bar-acts{flex-wrap:wrap}
  .f2-hist{gap:8px}
  .f2-hist-sep,.f2-hist-note{display:none}
  .f2-hist .f2-link{margin-left:0}
}

/* ═══════ [F2 · Checkpoint B] podgląd geometrii — skorupa mapy ═══════
   Leaflet 1.9.4 wendorowany lokalnie, BEZ podkładu i BEZ żądań sieciowych.
   Tło kadru to neutralna powierzchnia MIRAND z delikatną siatką — nie mapa. */

/* strefa stanu INFO w panelu (punkt lokalizacji) — istniejące tokeny --info */
.f2-st-info{background:var(--info-bg)}
.f2-st-info b,.f2-st-info i{color:var(--info)}

.f2-map-wrap{position:relative}
.f2-map-ctrl{position:absolute;top:12px;right:12px;z-index:500}

/* Kadr: dopóki nie ma mapy — komunikat wyśrodkowany; gdy mapa działa,
   `.is-map` zdejmuje układ komunikatu i oddaje pole Leafletowi. */
.f2-map-view{height:520px;background:var(--soft);position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);text-align:center;padding:var(--sp-5);
  background-image:linear-gradient(rgba(216,211,200,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(216,211,200,.35) 1px,transparent 1px);
  background-size:40px 40px}
.f2-map-view.is-map{display:block;padding:0;text-align:left}
.f2-map-view b{font-size:14px;font-weight:600;color:var(--coal)}
.f2-map-view span{font-size:12.5px;color:var(--muted);max-width:46ch;line-height:1.5}
@media(max-width:1100px){.f2-map-view{height:380px}}
@media(max-width:520px){.f2-map-view{height:300px}}

/* Leaflet w barwach MIRAND — tło kadru i atrybucja. */
.leaflet-container{background:transparent;font-family:var(--font-body);
  outline-offset:2px}
.leaflet-container a{color:var(--ember)}
.leaflet-control-attribution{background:rgba(255,255,255,.86);color:var(--muted);
  font-size:10.5px;padding:2px 7px;border-top-left-radius:4px}
.leaflet-control-attribution a{color:var(--muted);text-decoration:underline}


/* =====================================================================
   F3 — DDS (EUDR) · RUN 2
   ⛔ Wyłącznie prezentacja. Zero reguł, zero decyzji, zero nowych tokenów:
   wszystko stoi na zatwierdzonej palecie i drabince odstępów z :root.
   ===================================================================== */

/* liczniki stanów — filtr listy jednym kliknięciem */
.f3-counts{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.f3-cnt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:var(--sp-2) var(--sp-4);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer;min-width:112px;transition:border-color .12s,background .12s}
.f3-cnt:hover{background:var(--surface-row-hover)}
.f3-cnt-on{border-color:var(--ember);background:var(--surface-tab-active)}
.f3-cnt-n{font-family:var(--font-head);font-size:22px;line-height:1;color:var(--ink)}
.f3-cnt-l{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* trzy liczby, które w DDS znaczą wszystko */
.f3-pool{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.f3-num{display:flex;flex-direction:column;gap:2px;min-width:150px}
.f3-num b{font-family:var(--font-head);font-size:24px;line-height:1.1;color:var(--ink)}
.f3-num-hi b{color:var(--ember)}
.f3-num-l{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.f3-refs{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-4);
  padding-top:var(--sp-3);border-top:1px solid var(--line)}
.f3-refs>div{display:flex;flex-direction:column;gap:2px;min-width:200px}

/* zakładki karty DDS */
.f3-tabs{display:flex;gap:var(--sp-1);margin-top:var(--sp-4);border-bottom:1px solid var(--line)}
.f3-tab{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-small);color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent;cursor:pointer}
.f3-tab:hover{color:var(--ink)}
.f3-tab-on{color:var(--ink);border-bottom-color:var(--ember);font-weight:600}

/* pigułki i blokery */
.f3-pill-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.f3-pill{font-size:var(--fs-hint);color:var(--muted);background:var(--soft);
  border-radius:999px;padding:3px var(--sp-3)}
.f3-pill b{color:var(--ink)}
.f3-blk{margin-top:var(--sp-3)}
.f3-blk-l{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);font-size:var(--fs-small)}
.f3-blk-l li{margin-bottom:var(--sp-2)}
.f3-ok{color:var(--ok);font-weight:600}
.f3-bad{color:var(--warn);font-weight:600}

/* przegląd wymuszony materialną zmianą — spokojnie, nie czerwona ściana */
.f3-review{border-left:3px solid var(--amber)}
.f3-review-h{font-weight:600;color:var(--amber);margin:0}

/* wybór źródeł */
.f3-srcs{display:flex;flex-direction:column;gap:var(--sp-2)}
.f3-src{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-input);cursor:pointer}
/* ⚠ Bez tego pole wyboru rozpychało się na całą szerokość i etykieta lądowała
   w następnej linii — zauważone w przeglądzie wizualnym RUN 2. */
.f3-src input{flex:0 0 auto;width:auto;margin:0}
.f3-src:hover{background:var(--surface-row-hover)}
.f3-src .hint{margin-left:auto}

/* pokrycie importu — happy path */
.f3-mass{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.f3-mass-n{display:flex;flex-direction:column;gap:2px}
.f3-mass-n b{font-family:var(--font-head);font-size:26px;line-height:1.1}
.f3-diff{margin-top:var(--sp-3);padding:var(--sp-3);border:1px solid var(--amber);
  border-radius:var(--radius-sm);background:#FBF0DC}
.f3-diff-r{display:flex;justify-content:space-between;gap:var(--sp-4);font-size:var(--fs-small);margin-top:var(--sp-1)}
.f3-hit{border-left:3px solid var(--ok)}
.f3-hit-top{display:flex;align-items:baseline;gap:var(--sp-3);justify-content:space-between;flex-wrap:wrap}
.f3-hit-top b{font-size:var(--fs-h2)}
.f3-hit-row{display:flex;justify-content:space-between;gap:var(--sp-4);
  font-size:var(--fs-small);padding:var(--sp-1) 0;border-bottom:1px dashed var(--line)}

/* kroki ręcznego złożenia */
.f3-steps{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);font-size:var(--fs-small)}
.f3-steps li{margin-bottom:var(--sp-1)}

/* tabela klucz–wartość (podstawa, raport) */
.f3-kv td,.f3-kv th{vertical-align:top}
.f3-kv-k{width:34%;text-align:left;color:var(--muted);font-weight:500;font-size:var(--fs-small)}
.f3-fp{font-size:var(--fs-hint);word-break:break-all;color:var(--muted)}
.f3-rep .fsec{margin-top:var(--sp-4)}
.f3-rev td{opacity:.55;text-decoration:line-through}

/* projekcja dla placu — mobile-first, duże liczby, zero teczki */
.f3-ops-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.f3-wh-state{margin-bottom:var(--sp-3)}
.f3-wh-state .sg{font-size:var(--fs-h2);padding:var(--sp-2) var(--sp-4)}
.f3-wh-row{display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--line);font-size:var(--fs-body)}

/* stany puste i szkielet ładowania */
.f3-empty{text-align:center;padding:var(--sp-5) 0}
.f3-sk{height:14px;border-radius:var(--radius-sm);margin:var(--sp-2) 0;
  background:linear-gradient(90deg,var(--soft) 25%,var(--surface-row-alt) 50%,var(--soft) 75%);
  background-size:400% 100%;animation:f3sk 1.1s ease-in-out infinite}
@keyframes f3sk{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.f3-sk{animation:none}}

@media(max-width:720px){
  .f3-pool{gap:var(--sp-4)}
  .f3-num b{font-size:20px}
  .f3-kv-k{width:44%}
  .f3-cnt{min-width:96px}
}

/* F3 RUN 2A — wskazanie zakresu: wiele źródeł, działki podrzędne */
.f3-scope{display:flex;flex-direction:column;gap:var(--sp-2)}
.f3-scope-grp{display:flex;flex-direction:column;gap:var(--sp-1)}
.f3-scope-sub{margin-left:var(--sp-5);padding-left:var(--sp-3);
  border-left:2px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-1)}
/* ⛔ `display` z klasy BIJE domyślne `[hidden]{display:none}` przeglądarki —
   bez tej reguły działki byłyby widoczne, zanim ktokolwiek zaznaczy źródło.
   ⚠ Wyłapane w przeglądzie wizualnym RUN 2A. */
.f3-scope-sub[hidden]{display:none}
.f3-scope-sub>.hint{margin:0 0 var(--sp-1)}
.f3-src-sm{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-small);background:var(--card)}