:root{
  --bg:#080a13;
  --bg2:#0d1020;
  --panel:#11162a;
  --panel2:#151a2f;
  --card:#191f39;
  --card2:#12172b;
  --line:rgba(255,255,255,.095);
  --line2:rgba(255,255,255,.14);
  --text:#eef3ff;
  --muted:#8f9bb7;
  --muted2:#b7c0d9;
  --brand:#8b5cf6;
  --brand2:#21d4a3;
  --brand3:#38bdf8;
  --danger:#ff6b6b;
  --warn:#fbbf24;
  --ok:#34d399;
  --info:#60a5fa;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --shadow2:0 26px 90px rgba(0,0,0,.45);
  --radius:22px;
  --radius2:16px;
  --sidebar:292px;

  /*
    Powierzchnie i pola formularzy.
    Wczesniej byly w drugim bloku :root w polowie pliku - zmienne
    w dwoch miejscach znaczyly, ze zmieniajac kolor trzeba bylo
    zgadnac, ktory blok wygrywa.
  */
  --soft:rgba(255,255,255,.045);
  --soft2:rgba(255,255,255,.065);
  --surface:rgba(255,255,255,.055);
  --surface2:rgba(255,255,255,.08);
  --input-bg:rgba(255,255,255,.07);
  --input-bg-focus:rgba(255,255,255,.10);
  --input-text:#eef3ff;
  --input-placeholder:rgba(183,192,217,.68);

  /*
    Najwazniejsza linia dla natywnych kontrolek.

    Mowi przegladarce, ze panel jest ciemny. Bez niej przegladarka
    rysuje SWOIM jasnym motywem wszystko, czego nie da sie ostylowac
    z CSS: ikone kalendarza przy dacie, strzalki przy liczbie,
    rozwiniete listy <select>, paski przewijania i okna wyboru pliku.

    Efekt bez tej linii: czarna ikona kalendarza na ciemnym polu -
    praktycznie niewidoczna.
  */
  color-scheme:dark;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:var(--bg);
  overscroll-behavior-y:none;
}

body{
  margin:0;
  overscroll-behavior-y:none;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%,rgba(139,92,246,.34) 0,rgba(139,92,246,.11) 18%,transparent 42%),
    radial-gradient(circle at 92% 8%,rgba(33,212,163,.22) 0,rgba(33,212,163,.08) 22%,transparent 42%),
    radial-gradient(circle at 55% 105%,rgba(56,189,248,.13),transparent 36%),
    linear-gradient(135deg,var(--bg2) 0%,#101426 42%,var(--bg) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 70%);
  opacity:.34;
}
button,input,select,textarea{font:inherit}
button{color:inherit}
a{color:inherit}
::selection{background:rgba(139,92,246,.45)}

.app-shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh;position:relative;z-index:1}
.sidebar{
  position:sticky;top:0;height:100vh;overflow:auto;
  padding:22px 18px 18px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(13,16,32,.86),rgba(8,10,19,.92));
  backdrop-filter:blur(18px);
  box-shadow:20px 0 80px rgba(0,0,0,.18);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
.brand{display:flex;align-items:center;gap:12px;padding:2px 6px 20px;margin-bottom:6px}
.brand-mark{
  width:46px;height:46px;min-width:46px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),#6d5dfc 43%,var(--brand2));
  font-weight:950;letter-spacing:-.04em;color:#fff;
  box-shadow:0 14px 34px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.34);
}
.brand h1{font-size:18px;line-height:1.05;margin:0;letter-spacing:-.03em}
.brand span,.muted{color:var(--muted);font-size:13px;line-height:1.45}
.nav{display:grid;gap:7px;padding:4px 0}
.nav button{
  width:100%;border:0;background:transparent;color:var(--muted2);
  text-align:left;padding:11px 12px;border-radius:15px;cursor:pointer;
  display:grid;grid-template-columns:32px 1fr 14px;align-items:center;gap:8px;
  position:relative;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.nav button span:first-child{
  width:30px;height:30px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);
  filter:saturate(1.08);font-size:15px;
}
.nav button small{opacity:.36;font-size:15px;transition:transform .18s ease,opacity .18s ease}
.nav button:hover{background:rgba(255,255,255,.055);color:#fff;transform:translateX(2px)}
.nav button:hover small{opacity:.7;transform:translateX(2px)}
.nav button.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(139,92,246,.23),rgba(33,212,163,.13));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 10px 28px rgba(0,0,0,.16);
}
.nav button.active:before{
  content:"";position:absolute;left:-18px;top:10px;bottom:10px;width:4px;border-radius:0 99px 99px 0;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  box-shadow:0 0 18px rgba(139,92,246,.55);
}
.nav button.active span:first-child{background:linear-gradient(135deg,rgba(139,92,246,.44),rgba(33,212,163,.18));border-color:rgba(255,255,255,.16)}
/*
  Byly tu styly `.sidebar-card` (razem z `.accent`) - dwoch kafelkow
  pod menu: "Nowa struktura" i "Bez backendu". Kafelki usuniete
  2026-09-21, styl zostal. Usuniety 2026-09-23 (dlug III.11).
*/

.main{min-width:0}
.topbar{
  position:sticky;top:0;z-index:5;
  display:flex;gap:12px;align-items:center;
  padding:16px 26px;
  border-bottom:1px solid var(--line);
  background:rgba(9,11,22,.72);
  backdrop-filter:blur(20px);
}
.searchbox{
  flex:1;min-width:220px;height:46px;display:flex;align-items:center;gap:12px;
  padding:0 15px;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.searchbox span{color:#b9c3df;font-size:18px}
.searchbox input{width:100%;border:0;background:transparent;color:#fff;outline:0;padding:13px 0}
.searchbox input::placeholder{color:rgba(183,192,217,.72)}
.topbar select,.input,textarea,select{
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:15px;
  color:#fff;padding:12px 13px;outline:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
textarea{resize:vertical}.topbar option,select option{background:var(--panel);color:#fff}
.page{padding:24px 28px 64px;animation:fade .22s ease both}
.subhead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin:0 0 18px}
.subhead h2{display:flex;align-items:center;margin:0 0 6px;font-size:30px;line-height:1.04;letter-spacing:-.045em}
.subhead p{margin:0;max-width:920px}
.page-icon{
  display:inline-grid;place-items:center;width:46px;height:46px;margin-right:12px;border-radius:16px;
  background:linear-gradient(135deg,rgba(139,92,246,.34),rgba(33,212,163,.13));
  border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 34px rgba(0,0,0,.18);
  font-size:21px;
}
.hero{display:grid;grid-template-columns:1.35fr .8fr;gap:18px;margin-bottom:18px}
.card{
  position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  box-shadow:var(--shadow);
}
.card:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);opacity:.9;
}
.card.pad{padding:20px}.pad{padding:20px}
.card h3{margin:0 0 12px;letter-spacing:-.025em;font-size:18px}.card p{line-height:1.5}
.headline{font-size:38px;line-height:1.02;letter-spacing:-.058em;margin:8px 0 13px;max-width:900px}
.grid{display:grid;gap:15px;margin-bottom:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}

.kpi{
  position:relative;padding:17px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(0,0,0,.12));
  box-shadow:0 12px 34px rgba(0,0,0,.16);overflow:hidden;
}
.kpi:after{
  content:"";position:absolute;right:-22px;top:-28px;width:92px;height:92px;border-radius:999px;
  background:radial-gradient(circle,rgba(139,92,246,.20),transparent 68%);pointer-events:none;
}
.kpi .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.095em;font-weight:750}
.kpi .value{font-size:28px;line-height:1.08;font-weight:950;letter-spacing:-.045em;margin:7px 0 5px;color:#fff}
.kpi .trend{font-size:12px;color:#a9b5d5}.kpi .trend:empty{display:none}
.kpi.bad{background:linear-gradient(180deg,rgba(255,107,107,.14),rgba(255,255,255,.03));border-color:rgba(255,107,107,.22)}
.kpi.warn{background:linear-gradient(180deg,rgba(251,191,36,.13),rgba(255,255,255,.03));border-color:rgba(251,191,36,.22)}
.kpi.info{background:linear-gradient(180deg,rgba(96,165,250,.14),rgba(255,255,255,.03));border-color:rgba(96,165,250,.22)}

.chips,.platforms,.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip,.status,.platform,.pill,.tab{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;
  font-size:12px;font-weight:700;letter-spacing:-.005em;
  border:1px solid var(--line);background:rgba(255,255,255,.065);color:#dce4ff;
  white-space:nowrap;
}
.status{font-weight:750}.chip:empty{display:none}
.ok{color:#8ff0be;background:rgba(52,211,153,.12)!important;border-color:rgba(52,211,153,.22)!important}.ok:before{content:"✓"}
.warn{color:#ffd772;background:rgba(251,191,36,.12)!important;border-color:rgba(251,191,36,.24)!important}.warn:before{content:"!"}
.bad{color:#ffafb5;background:rgba(255,107,107,.13)!important;border-color:rgba(255,107,107,.24)!important}.bad:before{content:"×"}
.info{color:#b8d8ff;background:rgba(96,165,250,.12)!important;border-color:rgba(96,165,250,.22)!important}.info:before{content:"i"}
.platform{font-weight:850}.platform:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 14px currentColor}
.platform.Uber{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.15)}
.platform.Bolt{color:#86efac;background:rgba(52,211,153,.10)}
.platform.FreeNow{color:#c4b5fd;background:rgba(139,92,246,.14)}
.platform.iTaxi{color:#93c5fd;background:rgba(96,165,250,.12)}

.btn,.icon-button,.primary,.ghost{
  border:1px solid var(--line);border-radius:15px;padding:11px 14px;
  color:#fff;background:rgba(255,255,255,.06);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover,.icon-button:hover,.ghost:hover{background:rgba(255,255,255,.105);border-color:var(--line2);transform:translateY(-1px)}
.btn:active,.icon-button:active{transform:translateY(0)}
.btn.primary,.primary{
  border-color:transparent;background:linear-gradient(135deg,var(--brand),#6d5dfc 48%,#22c7a7);
  font-weight:850;box-shadow:0 14px 34px rgba(139,92,246,.30),inset 0 1px 0 rgba(255,255,255,.23);
}
.btn.primary:hover,.primary:hover{box-shadow:0 18px 42px rgba(139,92,246,.38);filter:saturate(1.05)}
.btn.ghost,.ghost{background:rgba(255,255,255,.052)}
.btn.danger{background:rgba(255,107,107,.15);border-color:rgba(255,107,107,.28);color:#ffd0d4}
.icon-button{width:46px;height:46px;padding:0;border-radius:16px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.toolbar.wrap{flex-wrap:wrap}

.table-card{overflow:auto;padding:0!important}.table-card table{min-width:760px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:850;background:rgba(0,0,0,.08)}td{color:#ecf1ff}tr:last-child td{border-bottom:0}tr:hover td{background:rgba(255,255,255,.03)}
.driver-cell{display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;min-width:40px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(139,92,246,.9),rgba(33,212,163,.68));font-weight:950;box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.25)}
.timeline,.command-list{display:flex;flex-direction:column;gap:10px}.event,.command{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px;
  border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.045);
}
.event .muted{display:block;margin-top:3px}.command{display:flex;justify-content:space-between}
.mini-chart{height:220px;display:flex;align-items:flex-end;gap:14px;padding-top:14px}
.mini-bar{flex:1;min-height:32px;border-radius:16px 16px 9px 9px;background:linear-gradient(180deg,var(--brand),rgba(33,212,163,.82));display:flex;align-items:flex-end;justify-content:center;padding:10px;text-align:center;font-size:12px;font-weight:750;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.bar-wrap{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px;border:1px solid rgba(255,255,255,.045)}
.bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand2));box-shadow:0 0 22px rgba(33,212,163,.25)}
.summary-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.summary-row:last-child{border-bottom:0}.big-money{font-size:34px;font-weight:950;letter-spacing:-.05em}.money-bar{margin:10px 0}
.ai-box{padding:17px;border-radius:19px;background:linear-gradient(135deg,rgba(139,92,246,.20),rgba(33,212,163,.10));border:1px solid rgba(139,92,246,.25);box-shadow:0 14px 40px rgba(0,0,0,.15)}.ai-box p{margin:8px 0 13px;color:#d9e1fa}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid textarea{grid-column:1/-1;min-height:120px}
.dropzone{border:1px dashed rgba(255,255,255,.28);border-radius:20px;padding:26px;text-align:center;background:rgba(255,255,255,.04)}
.board{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:14px;overflow:auto;padding-bottom:6px}.column{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:19px;padding:13px;min-height:260px}.column h3{margin:2px 2px 12px}.task{padding:13px;border-radius:17px;background:rgba(255,255,255,.065);border:1px solid var(--line);margin:10px 0;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.66);display:none;align-items:center;justify-content:center;z-index:30;padding:20px;backdrop-filter:blur(8px)}.modal-backdrop.open{display:flex}.modal{width:min(980px,96vw);max-height:86vh;overflow:auto;background:linear-gradient(180deg,var(--panel2),#0f1325);border:1px solid var(--line2);border-radius:26px;box-shadow:var(--shadow2);padding:22px}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.modal-head h2{margin:0;letter-spacing:-.04em}
.toast{position:fixed;right:22px;bottom:22px;z-index:40;pointer-events:none;background:linear-gradient(135deg,var(--card),var(--panel));border:1px solid var(--line2);border-radius:17px;padding:14px 16px;opacity:0;transform:translateY(12px);transition:.22s ease;box-shadow:var(--shadow);max-width:360px}.toast.show{opacity:1;transform:translateY(0)}
.phone-frame{width:330px;max-width:100%;margin:auto;border:10px solid #050713;border-radius:38px;background:var(--panel);box-shadow:var(--shadow2);overflow:hidden}.phone-top{width:104px;height:18px;border-radius:0 0 16px 16px;background:#050713;margin:auto}.phone-body{padding:18px}
.map-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.map-canvas{min-height:430px;border-radius:26px;border:1px solid var(--line);background:radial-gradient(circle at 30% 35%,rgba(139,92,246,.36),transparent 18%),radial-gradient(circle at 70% 55%,rgba(33,212,163,.28),transparent 16%),linear-gradient(135deg,var(--panel2),var(--bg));position:relative;overflow:hidden;box-shadow:var(--shadow)}.map-canvas:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;opacity:.5}.pin{position:absolute;width:20px;height:20px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 12px rgba(52,211,153,.13),0 0 28px rgba(52,211,153,.44)}.pin.warn{background:var(--warn);box-shadow:0 0 0 12px rgba(251,191,36,.13),0 0 28px rgba(251,191,36,.36)}.pin.bad{background:var(--danger);box-shadow:0 0 0 12px rgba(255,107,107,.13),0 0 28px rgba(255,107,107,.36)}
.code-note,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c4b5fd}.empty-state{border:1px dashed var(--line2);border-radius:22px;padding:42px;text-align:center;color:var(--muted);background:rgba(255,255,255,.035)}
.section{display:none}.section.active{display:block}
@keyframes fade{from{opacity:.38;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:1180px){:root{--sidebar:276px}.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.hero,.split,.map-grid{grid-template-columns:1fr}.board{grid-template-columns:repeat(3,minmax(220px,1fr))}}
@media(max-width:768px){.app-shell,body.sidebar-collapsed .app-shell{grid-template-columns:1fr !important}body.sidebar-collapsed .sidebar{width:310px !important;min-width:310px !important;overflow:visible !important}body.sidebar-collapsed .nav button{justify-content:flex-start !important;padding:12px 14px !important}body.sidebar-collapsed .nav button span{display:inline !important}body.sidebar-collapsed .brand{justify-content:flex-start !important}.sidebar{position:fixed;z-index:20;left:0;transform:translateX(-105%);transition:transform .22s ease;width:310px;max-width:86vw}.sidebar.open{transform:none}.mobile-menu{display:inline-flex}.topbar{padding:14px 16px}.page{padding:18px 16px 50px}.subhead{display:block}.subhead .btn{margin-top:12px}}
@media(min-width:769px){.mobile-menu{display:none}}
@media(max-width:720px){.topbar{flex-wrap:wrap}.searchbox{order:3;flex-basis:100%}.topbar select{flex:1}.grid.four,.grid.three,.grid.two,.form-grid{grid-template-columns:1fr}.headline{font-size:30px}.subhead h2{font-size:25px}.page-icon{width:40px;height:40px;border-radius:14px}.board{grid-template-columns:1fr}.event{grid-template-columns:1fr}.command{align-items:flex-start;flex-direction:column}.modal{padding:16px}.card.pad,.pad{padding:16px}th,td{padding:12px 10px}.kpi .value{font-size:24px}.big-money{font-size:28px}}
/* =========================================================
   PARTNERHUB360 — MODUL FLOTY I NAJMU
   Style dla modułu: Flota i najem
   Doklejone na końcu pliku, bez usuwania starego CSS
========================================================= */

/* ---------- Page header ---------- */

.page-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin:0 0 22px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(139,92,246,.24),transparent 38%),
    radial-gradient(circle at 88% 10%,rgba(33,212,163,.18),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.page-header:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
}

.page-header h1{
  margin:8px 0 10px;
  font-size:34px;
  line-height:1.03;
  letter-spacing:-.055em;
  max-width:980px;
}

.page-header p{
  margin:0;
  max-width:980px;
  color:var(--muted2);
  line-height:1.55;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:7px 11px;
  border:1px solid rgba(139,92,246,.28);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(33,212,163,.08));
  color:#d8ccff;
  font-size:12px;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.page-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:max-content;
}

/* ---------- KPI grid for fleet ---------- */

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  margin:0 0 18px;
}

.kpi-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 95% 0%,rgba(139,92,246,.15),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.072),rgba(0,0,0,.13));
  box-shadow:0 14px 38px rgba(0,0,0,.17);
}

.kpi-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.065),transparent 40%);
  opacity:.8;
}

.kpi-card span{
  position:relative;
  z-index:1;
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.kpi-card strong{
  position:relative;
  z-index:1;
  display:block;
  margin:8px 0 5px;
  font-size:28px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.045em;
  color:#fff;
}

.kpi-card small{
  position:relative;
  z-index:1;
  color:#a8b3d1;
  font-size:12.5px;
  line-height:1.4;
}

.kpi-card.good{
  background:
    radial-gradient(circle at 95% 0%,rgba(52,211,153,.24),transparent 42%),
    linear-gradient(180deg,rgba(52,211,153,.12),rgba(255,255,255,.028));
  border-color:rgba(52,211,153,.23);
}

.kpi-card.bad{
  background:
    radial-gradient(circle at 95% 0%,rgba(255,107,107,.22),transparent 42%),
    linear-gradient(180deg,rgba(255,107,107,.13),rgba(255,255,255,.028));
  border-color:rgba(255,107,107,.25);
}

.kpi-card.warning{
  background:
    radial-gradient(circle at 95% 0%,rgba(251,191,36,.22),transparent 42%),
    linear-gradient(180deg,rgba(251,191,36,.12),rgba(255,255,255,.028));
  border-color:rgba(251,191,36,.25);
}

/* ---------- Panels ---------- */

.panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.032));
  box-shadow:var(--shadow);
  padding:18px;
}

.panel:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}

.panel-header{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin:0 0 16px;
}

.panel-header h2{
  margin:0 0 5px;
  font-size:20px;
  line-height:1.12;
  letter-spacing:-.035em;
}

.panel-header p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  max-width:760px;
}

/* ---------- Badge system ---------- */

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  border-radius:999px;
  padding:6px 10px;
  font-size:11.5px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
  border:1px solid var(--line);
  background:rgba(255,255,255,.065);
  color:#dce4ff;
}

.badge.success,
.badge.ok{
  color:#8ff0be;
  background:rgba(52,211,153,.12);
  border-color:rgba(52,211,153,.24);
}

.badge.warning{
  color:#ffd772;
  background:rgba(251,191,36,.13);
  border-color:rgba(251,191,36,.25);
}

.badge.danger{
  color:#ffb7bd;
  background:rgba(255,107,107,.14);
  border-color:rgba(255,107,107,.28);
}

.badge.info{
  color:#b8d8ff;
  background:rgba(96,165,250,.13);
  border-color:rgba(96,165,250,.25);
}

.badge.neutral{
  color:#cbd5e1;
  background:rgba(148,163,184,.10);
  border-color:rgba(148,163,184,.20);
}

.badge.status{
  color:#e7dcff;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(33,212,163,.08));
  border-color:rgba(139,92,246,.25);
}

/* ---------- Decision list ---------- */

.decision-list,
.alert-list,
.ranking-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.decision-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}

.decision-row:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.065);
  border-color:var(--line2);
}

.decision-row strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
  letter-spacing:-.015em;
}

.decision-row span{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.35;
}

.decision-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

/* ---------- Alerts ---------- */

.alert-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}

.alert-row strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
}

.alert-row span{
  display:block;
  color:var(--muted2);
  font-size:13px;
  line-height:1.4;
}

.alert-row.danger{
  background:linear-gradient(135deg,rgba(255,107,107,.14),rgba(255,255,255,.035));
  border-color:rgba(255,107,107,.25);
}

.alert-row.warning{
  background:linear-gradient(135deg,rgba(251,191,36,.13),rgba(255,255,255,.035));
  border-color:rgba(251,191,36,.24);
}

.alert-row.info{
  background:linear-gradient(135deg,rgba(96,165,250,.13),rgba(255,255,255,.035));
  border-color:rgba(96,165,250,.24);
}

.alert-row.ok{
  background:linear-gradient(135deg,rgba(52,211,153,.11),rgba(255,255,255,.035));
  border-color:rgba(52,211,153,.22);
}

/* ---------- Status mini cards ---------- */

.mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.mini-card{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:flex-start;
  min-height:106px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(139,92,246,.12),transparent 40%),
    rgba(255,255,255,.045);
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}

.mini-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.065);
  border-color:var(--line2);
}

.mini-card-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(33,212,163,.12));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  font-size:21px;
}

.mini-card strong{
  display:block;
  margin:2px 0 5px;
  font-size:15px;
  letter-spacing:-.015em;
}

.mini-card p{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
}

/* ---------- Pipeline ---------- */

.pipeline{
  display:grid;
  grid-template-columns:repeat(6,minmax(190px,1fr));
  gap:12px;
  overflow:auto;
  padding-bottom:4px;
}

.pipeline-column{
  min-height:250px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}

.pipeline-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:13px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.055);
}

.pipeline-head strong{
  font-size:13px;
  letter-spacing:-.015em;
}

.pipeline-head span{
  display:grid;
  place-items:center;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  background:linear-gradient(135deg,rgba(139,92,246,.34),rgba(33,212,163,.16));
  border:1px solid rgba(255,255,255,.10);
}

.pipeline-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
}

.pipeline-card{
  padding:13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}

.pipeline-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.075);
  border-color:var(--line2);
}

.pipeline-card strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font-size:15px;
}

.pipeline-card span{
  display:block;
  color:#dbe4ff;
  font-size:12.5px;
  line-height:1.35;
}

.pipeline-card small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}

/* ---------- Table polish ---------- */

.table-wrap{
  position:relative;
  z-index:1;
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(0,0,0,.08);
}

.table-wrap table{
  min-width:1120px;
}

.table-wrap td strong{
  display:block;
  margin-bottom:4px;
}

.table-wrap td small{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.positive{
  color:#86efac!important;
}

.negative{
  color:#ff9fa8!important;
}

/* ---------- Progress bar ---------- */

.progress{
  width:100%;
  height:9px;
  margin-top:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.045);
  overflow:hidden;
}

.progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  box-shadow:0 0 18px rgba(33,212,163,.24);
}

/* ---------- Ranking ---------- */

.ranking-row{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}

.ranking-row .rank{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(139,92,246,.32),rgba(33,212,163,.14));
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-weight:950;
}

.ranking-row strong{
  display:block;
}

.ranking-row small{
  display:block;
  color:var(--muted);
  margin-top:3px;
  font-size:12px;
}

/* ---------- Formula ---------- */

.formula-box{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border:1px solid rgba(139,92,246,.24);
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(33,212,163,.13),transparent 38%),
    linear-gradient(135deg,rgba(139,92,246,.16),rgba(255,255,255,.04));
}

.formula-box strong{
  color:#fff;
  font-size:17px;
  letter-spacing:-.02em;
}

.formula-box span{
  color:var(--muted2);
  font-size:13px;
  line-height:1.45;
}

/* ---------- Drawer / car 360 panel ---------- */

.drawer-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
}

.drawer-overlay.open{
  pointer-events:auto;
}

.drawer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity .22s ease;
}

.drawer-overlay.open .drawer-backdrop{
  opacity:1;
}

.drawer-panel{
  position:absolute;
  top:0;
  right:0;
  width:min(720px,94vw);
  height:100vh;
  overflow:auto;
  background:
    radial-gradient(circle at 10% 0%,rgba(139,92,246,.22),transparent 35%),
    linear-gradient(180deg,var(--panel2),var(--bg2) 62%,var(--bg));
  border-left:1px solid var(--line2);
  box-shadow:-26px 0 90px rgba(0,0,0,.48);
  transform:translateX(104%);
  transition:transform .24s ease;
}

.drawer-overlay.open .drawer-panel{
  transform:translateX(0);
}

.drawer-content{
  padding:22px;
}

.drawer-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}

.drawer-header h2{
  margin:9px 0 6px;
  font-size:30px;
  line-height:1.04;
  letter-spacing:-.05em;
}

.drawer-header p{
  margin:0;
  color:var(--muted);
}

.drawer-close{
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size:26px;
  line-height:1;
  transition:background .16s ease,transform .16s ease,border-color .16s ease;
}

.drawer-close:hover{
  background:rgba(255,255,255,.105);
  border-color:var(--line2);
  transform:translateY(-1px);
}

.drawer-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}

.drawer-card{
  padding:15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.05);
}

.drawer-card span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:7px;
}

.drawer-card strong{
  display:block;
  color:#fff;
  font-size:17px;
  line-height:1.18;
  letter-spacing:-.02em;
}

.drawer-section{
  margin-top:14px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:21px;
  background:rgba(255,255,255,.042);
}

.drawer-section h3{
  margin:0 0 13px;
  font-size:17px;
  letter-spacing:-.025em;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.detail-grid div{
  min-height:70px;
  padding:13px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}

.detail-grid span{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-weight:850;
}

.detail-grid strong{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.25;
  word-break:break-word;
}

.drawer-section .chips{
  margin-top:12px;
}

.timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.timeline-item{
  position:relative;
  padding:13px 13px 13px 42px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.045);
}

.timeline-item:before{
  content:"";
  position:absolute;
  left:17px;
  top:17px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 0 18px rgba(33,212,163,.35);
}

.timeline-item span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.timeline-item strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
}

.timeline-item p{
  margin:0;
  color:var(--muted2);
  line-height:1.45;
  font-size:13px;
}

.drawer-actions{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin:18px -22px -22px;
  padding:16px 22px;
  background:linear-gradient(180deg,rgba(13,16,32,.72),rgba(8,10,19,.96));
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
}


/* ---------- Fleet card actions and more menu ---------- */

.fleet-car-actions{
  align-items:center;
}

.fleet-actions-more{
  position:relative;
  flex:0 0 auto;
}

.fleet-actions-more-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.fleet-actions-more-trigger span{
  font-size:18px;
  line-height:1;
}

.fleet-actions-menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  z-index:80;
  width:min(270px,calc(100vw - 34px));
  overflow:hidden;
  padding:7px;
  border:1px solid var(--line2);
  border-radius:17px;
  background:rgba(11,14,28,.98);
  box-shadow:0 20px 48px rgba(0,0,0,.38);
  backdrop-filter:blur(18px);
}

.fleet-actions-menu[hidden]{
  display:none;
}

.fleet-actions-menu button{
  display:flex;
  align-items:center;
  width:100%;
  min-height:40px;
  padding:9px 11px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:750;
  text-align:left;
}

.fleet-actions-menu button:hover,
.fleet-actions-menu button:focus-visible{
  outline:none;
  background:rgba(255,255,255,.08);
}

@media(max-width:760px){
  .fleet-car-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .fleet-car-actions > .btn,
  .fleet-car-actions > .fleet-actions-more{
    width:100%;
  }

  .fleet-actions-more-trigger{
    width:100%;
  }

  .fleet-actions-menu{
    right:auto;
    left:0;
    width:100%;
  }
}



/* ---------- Tabela rozliczen historycznych ---------- */

/*
  Dziewiec kolumn (prosba Oskara, 2026-08-31). Zeby zmiescily sie
  bez przewijania w bok, schodzimy z czcionki i odstepow, a szerokosci
  ustawiamy wprost: kwoty i daty maja stala szerokosc, nazwa bierze
  reszte.

  Przewijanie w poziomie zostaje jako ostatnia deska ratunku
  na bardzo waskich ekranach - lepsze niz sciecie kolumny z kwota.
*/
.history-table table{
  font-size:12.5px;
}

.history-table th,
.history-table td{
  padding:9px 8px;
  white-space:nowrap;
}

.history-table td:first-child{
  white-space:normal;
}

.history-table th:nth-child(1){ width:auto; min-width:150px; }
.history-table th:nth-child(2){ width:170px; }
.history-table th:nth-child(3),
.history-table th:nth-child(4){ width:120px; text-align:right; }
.history-table td:nth-child(3),
.history-table td:nth-child(4){ text-align:right; }
.history-table th:nth-child(5){ width:80px; text-align:center; }
.history-table td:nth-child(5){ text-align:center; }
.history-table th:nth-child(6){ width:110px; }
.history-table th:nth-child(7),
.history-table th:nth-child(8){ width:100px; }

.history-table td small{
  display:block;
  font-size:11px;
}

@media (max-width:1200px){
  .history-table table{
    font-size:11.5px;
  }

  .history-table th,
  .history-table td{
    padding:7px 6px;
  }
}

/* ---------- Pasek filtrow (wyplaty gotowkowe) ---------- */

/*
  Wyszukiwarka rosnie, listy wyboru zostaja przy swojej szerokosci.
  Na waskim ekranie wszystko zawija sie w kolumne - kasjer czesto
  patrzy na to na telefonie, stojac przy kierowcy.
*/
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.filter-bar .input{
  flex:1 1 260px;
  min-width:200px;
}

.filter-bar select{
  flex:0 1 auto;
  min-width:160px;
}

@media (max-width:640px){
  .filter-bar .input,
  .filter-bar select{
    flex:1 1 100%;
  }
}

/* ---------- Fleet task filters ---------- */

.fleet-task-filters{
  margin-top:18px;
}

.fleet-task-filter-grid{
  display:grid;
  grid-template-columns:
    minmax(280px,1.7fr)
    auto
    repeat(4,minmax(150px,.75fr));
  gap:12px;
  align-items:end;
  margin-top:14px;
}

.fleet-task-filter-grid label{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:7px;
}

.fleet-task-filter-grid label > span{
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.fleet-task-filter-grid .searchbox{
  width:100%;
  max-width:none;
}

.fleet-task-search-button{
  min-height:46px;
}

.fleet-task-filter-summary{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:13px;
}

@media(max-width:1260px){
  .fleet-task-filter-grid{
    grid-template-columns:
      minmax(280px,1fr)
      auto
      repeat(2,minmax(180px,1fr));
  }
}

@media(max-width:760px){
  .fleet-task-filter-grid{
    grid-template-columns:
      minmax(0,1fr);
  }

  .fleet-task-search-button{
    width:100%;
  }
}

/* ---------- Fleet tasks ---------- */

.fleet-task-list{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.fleet-task-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:19px;
  background:rgba(255,255,255,.043);
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.fleet-task-row:hover{
  transform:translateY(-1px);
  border-color:var(--line2);
  background:rgba(255,255,255,.062);
}

.fleet-task-row.is-completed{
  opacity:.66;
}

.fleet-task-main{
  min-width:0;
  flex:1;
}

.fleet-task-main > strong{
  display:block;
  margin-top:10px;
  color:#fff;
  font-size:15px;
  line-height:1.35;
}

.fleet-task-main > p{
  margin:6px 0 0;
  color:var(--muted2);
  font-size:12.5px;
  line-height:1.45;
}

.fleet-task-badges{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

.fleet-task-meta{
  display:flex;
  align-items:center;
  gap:8px 15px;
  flex-wrap:wrap;
  margin-top:10px;
}

.fleet-task-meta span{
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

.fleet-task-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;
}

@media(max-width:760px){
  .fleet-task-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .fleet-task-actions{
    width:100%;
    justify-content:flex-start;
  }

  .fleet-task-actions .btn{
    width:100%;
  }
}

/* ---------- Empty state small variant ---------- */

.empty-state.small{
  padding:16px;
  border-radius:16px;
  font-size:12.5px;
}

/* ---------- Fleet mobile ---------- */

@media(max-width:1180px){
  .kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pipeline{
    grid-template-columns:repeat(3,minmax(210px,1fr));
  }

  .drawer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .page-header{
    display:block;
    padding:19px;
  }

  .page-header h1{
    font-size:28px;
  }

  .page-actions{
    justify-content:flex-start;
    margin-top:15px;
  }

  .kpi-grid,
  .mini-grid,
  .drawer-grid,
  .detail-grid{
    grid-template-columns:1fr;
  }

  .decision-row,
  .alert-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .decision-meta{
    justify-content:flex-start;
  }

  .pipeline{
    grid-template-columns:repeat(1,minmax(240px,1fr));
  }

  .drawer-content{
    padding:17px;
  }

  .drawer-header h2{
    font-size:25px;
  }

  .drawer-actions{
    margin:18px -17px -17px;
    padding:14px 17px;
    justify-content:flex-start;
  }

  .drawer-actions .btn{
    width:100%;
  }
}

/* =========================================================
   FLEET CAR — nagłówek operacyjny karty pojazdu
========================================================= */

.fleet-car-hero{
  padding:22px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(
      circle at top right,
      rgba(101,92,255,.16),
      transparent 34%
    ),
    rgba(255,255,255,.045);
  box-shadow:
    0 18px 44px rgba(0,0,0,.16);
}

.fleet-car-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.fleet-car-identity{
  min-width:0;
  flex:1;
}

.fleet-car-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-top:9px;
}

.fleet-car-title-row h1{
  margin:0 0 9px;
  color:#fff;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.05em;
}

.fleet-car-plate{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.fleet-car-status-badge{
  flex:0 0 auto;
  padding:8px 11px;
  font-size:12px;
}

.fleet-car-identity-meta{
  margin:11px 0 0;
  color:var(--muted);
  font-size:13px;
}

.fleet-car-hero-grid{
  display:grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap:11px;
  margin-top:20px;
}

.fleet-car-hero-card{
  min-width:0;
  min-height:112px;
  padding:15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}

.fleet-car-hero-card > span{
  display:block;
  margin-bottom:9px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.fleet-car-hero-card strong{
  display:block;
  overflow-wrap:anywhere;
  color:#fff;
  font-size:16px;
  line-height:1.25;
  letter-spacing:-.025em;
}

.fleet-car-hero-card small{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

.fleet-car-primary-alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  background:rgba(255,255,255,.04);
}

.fleet-car-primary-alert.danger{
  border-color:rgba(255,91,111,.34);
  background:rgba(255,91,111,.09);
}

.fleet-car-primary-alert.warning{
  border-color:rgba(255,188,66,.32);
  background:rgba(255,188,66,.08);
}

.fleet-car-primary-alert.info{
  border-color:rgba(98,168,255,.28);
  background:rgba(98,168,255,.07);
}

.fleet-car-primary-alert > div{
  min-width:0;
}

.fleet-car-primary-alert span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.fleet-car-primary-alert strong{
  display:block;
  color:#fff;
  font-size:13px;
  line-height:1.45;
}

.fleet-car-primary-alert .btn{
  flex:0 0 auto;
}

.fleet-car-alerts-section{
  scroll-margin-top:20px;
}

@media (max-width:1180px){
  .fleet-car-hero-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }
}

@media (max-width:780px){
  .fleet-car-hero{
    padding:17px;
    border-radius:21px;
  }

  .fleet-car-title-row{
    display:block;
  }

  .fleet-car-title-row h1{
    font-size:27px;
  }

  .fleet-car-status-badge{
    display:inline-flex;
    margin-top:13px;
  }

  .fleet-car-hero-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .fleet-car-primary-alert{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (max-width:520px){
  .fleet-car-hero-grid{
    grid-template-columns:
      minmax(0,1fr);
  }

  .fleet-car-hero-card{
    min-height:auto;
  }

  .fleet-car-primary-alert .btn{
    width:100%;
  }
}

/* =========================================================
   FLEET FORMS — dodawanie auta i zmiana statusu
========================================================= */

.fleet-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.form-section{
  padding:17px;
  border:1px solid var(--line);
  border-radius:21px;
  background:rgba(255,255,255,.042);
}

.form-section h3{
  margin:0 0 14px;
  font-size:17px;
  letter-spacing:-.025em;
}

.form-section label{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.form-section label span{
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.075em;
}

.fleet-protocol-equipment-list{
  display:grid;
  gap:10px;
}

.fleet-protocol-equipment-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(150px,.65fr) minmax(220px,1.2fr);
  gap:12px;
  align-items:end;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.fleet-protocol-equipment-name{
  align-self:center;
}

.fleet-protocol-equipment-name strong{
  display:block;
  line-height:1.35;
}

.fleet-protocol-equipment-row{
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.fleet-protocol-equipment-row.is-present{
  border-color:rgba(34,197,94,.4);
  background:rgba(34,197,94,.09);
}

.fleet-protocol-equipment-row.is-warning{
  border-color:rgba(245,158,11,.48);
  background:rgba(245,158,11,.1);
}

.fleet-protocol-equipment-row.is-missing{
  border-color:rgba(239,68,68,.48);
  background:rgba(239,68,68,.1);
}

.fleet-protocol-equipment-row.is-neutral{
  border-color:var(--line);
  background:rgba(148,163,184,.055);
}

.fleet-protocol-equipment-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:5px 9px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:10px;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap;
}

.fleet-protocol-equipment-status.is-present{
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.14);
  color:#bbf7d0;
}

.fleet-protocol-equipment-status.is-warning{
  border-color:rgba(245,158,11,.4);
  background:rgba(245,158,11,.15);
  color:#fde68a;
}

.fleet-protocol-equipment-status.is-missing{
  border-color:rgba(239,68,68,.4);
  background:rgba(239,68,68,.15);
  color:#fecaca;
}

.fleet-protocol-equipment-status.is-neutral{
  border-color:rgba(148,163,184,.3);
  background:rgba(148,163,184,.12);
  color:var(--muted2);
}

@media(max-width:720px){
  .fleet-protocol-equipment-row{
    grid-template-columns:1fr;
  }
}


.fleet-protocol-photo-help{
  margin:10px 0 0;
}

.fleet-protocol-photo-group{
  margin-top:18px;
}

.fleet-protocol-photo-group-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.fleet-protocol-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.fleet-protocol-photo-card{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}

.fleet-protocol-photo-card img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:rgba(0,0,0,.2);
}

.fleet-protocol-photo-card figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px;
}

.fleet-protocol-photo-card figcaption span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:11px;
}

.fleet-protocol-empty{
  margin-top:14px;
  padding:18px;
  border:1px dashed var(--line);
  border-radius:16px;
  color:var(--muted);
  text-align:center;
}

.fleet-protocol-record-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.fleet-protocol-record{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding:13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.fleet-protocol-record-number{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  font-weight:850;
}

.fleet-protocol-record-content{
  min-width:0;
}

.fleet-protocol-record-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.fleet-protocol-record-content p{
  margin:7px 0 0;
  color:var(--muted);
  white-space:pre-wrap;
}

/* =========================================================
   REKLAMACJE I ZAPYTANIA

   Punkt II.8 planu (2026-09-23).
========================================================= */

/*
  Lista zamknietych zgloszen. Mniejsza przerwa niz przy otwartych -
  to sa wiersze, a nie karty.
*/
.claims-closed{
  gap:8px;
}

/*
  ZAMKNIETE ZGLOSZENIE - WIERSZ KOMPAKTOWY.

  Szesc rzeczy w jednym rzedzie, reszta po rozwinieciu. `details`
  robi rozwijanie samo - wlasne znaczyloby stan w pamieci ekranu
  i zwijanie sie wszystkiego przy pierwszym przerysowaniu.
*/
.claim-closed{
  padding:0;
}

.claim-closed-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none;
  flex-wrap:wrap;
}

.claim-closed-head::-webkit-details-marker{
  display:none;
}

.claim-closed-head:hover{
  background:rgba(255,255,255,.03);
}

.claim-closed-number{
  min-width:110px;
}

.claim-closed-driver{
  flex:1 1 160px;
  font-weight:600;
}

.claim-closed-phone,
.claim-closed-city{
  min-width:110px;
  font-size:12px;
}

.claim-closed-age{
  min-width:100px;
  font-size:12px;
}

.claim-closed-body{
  padding:0 14px 14px;
}

/*
  POLE ODPOWIEDZI.

  Napis NAD polem, nie obok - o to prosil Oskar. `display:block`
  na etykiecie jest cala roznica.
*/
.claim-reply{
  margin-top:14px;
}

.claim-reply-label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
}

.claim-reply-input{
  width:100%;
  min-height:120px;
  resize:vertical;
}

/*
  PRZYCISKI AKCJI - mniejsze i lekko odsuniete od siebie.
*/
.claim-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/*
  WYNIK ROZPATRZENIA - adnotacja biura, NIE wiadomosc do kierowcy.

  Wyglada inaczej niz watek, zeby nikt ich nie pomylil: to jest
  zapis wewnetrzny, a obok jest rozmowa z kierowca.
*/
.claim-notes{
  margin-top:14px;
  padding:12px 14px;
  border-left:3px solid var(--warn, #f59e0b);
  background:rgba(245,158,11,.06);
  border-radius:0 8px 8px 0;
}

.claim-notes-title{
  display:block;
  font-weight:600;
  margin-bottom:8px;
}

.claim-note{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:4px 0;
}

.claim-note-text{
  flex:1 1 260px;
}

.claim-notes-hint{
  display:block;
  margin-top:8px;
}

/*
  OKIENKO DECYZJI O REKLAMACJI

  Poprawione 2026-09-23. Wcześniej cały układ tego okienka stał
  na atrybutach `style="margin-top:12px"` wpisanych w HTML -
  osiem takich w jednym szablonie. Skutek: odstępy nie zgadzały
  się z resztą panelu, a zmiana jednego wymagała szukania go
  w środku szablonu tekstowego.
*/
.claim-decision-case{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.claim-decision-text{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.claim-decision-asked{
  display:block;
  margin-top:8px;
  font-size:13px;
}
.claim-decision-field{
  display:block;
  margin-top:14px;
}
.claim-decision-field > span{
  display:block;
  margin-bottom:6px;
  font-size:13px;
}
.claim-decision-field textarea.input{
  width:100%;
  resize:vertical;
}
.claim-decision-field small{
  display:block;
  margin-top:6px;
  line-height:1.45;
}
.claim-decision-actions{
  margin-top:18px;
}

/*
  AKCJE W TABELI INNYCH TRANSAKCJI

  Punkt II.4 planu (2026-09-23). Dziewięć kolumn mieści się tylko
  wtedy, gdy każda jest wąska - a akcje były najszersze.

  `flex-wrap: nowrap` jest tu istotne: zawinięcie przycisków
  w dwie linie podnosi wiersz i tabela znowu robi się za szeroka
  przez wysokość, a nie przez szerokość.
*/
.other-tx-actions{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  align-items:center;
}

.btn.small{
  min-height:32px;
  padding:7px 10px;
  font-size:11px;
}

@media(max-width:720px){
  .fleet-protocol-photo-grid{
    grid-template-columns:1fr 1fr;
  }

  .fleet-protocol-record{
    grid-template-columns:30px minmax(0,1fr);
  }

  .fleet-protocol-record > .btn{
    grid-column:1/-1;
    width:100%;
  }
}

@media(max-width:480px){
  .fleet-protocol-photo-grid{
    grid-template-columns:1fr;
  }
}


.fleet-protocol-comparison-metrics{
  margin-top:16px;
}

.fleet-protocol-comparison-resources{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.fleet-protocol-comparison-resources > div{
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.fleet-protocol-comparison-resources span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.fleet-protocol-comparison-section{
  margin-top:20px;
}

.fleet-protocol-comparison-section h4{
  margin:0 0 10px;
  font-size:14px;
}

.fleet-protocol-comparison-list{
  display:grid;
  gap:9px;
}

.fleet-protocol-comparison-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 12px;
  padding:12px;
  border:1px solid rgba(248,113,113,.2);
  border-radius:15px;
  background:rgba(248,113,113,.06);
}

.fleet-protocol-comparison-item p{
  grid-column:1/-1;
  margin:0;
  color:var(--muted);
  white-space:pre-wrap;
}

.fleet-protocol-comparison-ok{
  padding:13px;
  border:1px solid rgba(74,222,128,.2);
  border-radius:15px;
  background:rgba(74,222,128,.06);
  color:var(--muted);
}

@media(max-width:720px){
  .fleet-protocol-comparison-resources{
    grid-template-columns:1fr;
  }
}


.fleet-protocol-declarations{
  display:grid;
  gap:10px;
  margin-bottom:18px;
}

.fleet-protocol-declaration{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  gap:11px !important;
  align-items:start;
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.fleet-protocol-declaration input{
  width:18px;
  height:18px;
  margin:1px 0 0;
}

.fleet-protocol-declaration span{
  color:var(--text) !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.5;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.fleet-protocol-signature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
}

.fleet-protocol-signature-box{
  padding:13px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
  color:#111827;
}

.fleet-protocol-signature-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}

.fleet-protocol-signature-head strong,
.fleet-protocol-signature-head span{
  display:block;
}

.fleet-protocol-signature-canvas{
  display:block;
  width:100%;
  height:180px;
  border:1px dashed #94a3b8;
  border-radius:12px;
  background:#fff;
  cursor:crosshair;
  touch-action:none;
}

.fleet-protocol-archive-list{
  display:grid;
  gap:9px;
}

.fleet-protocol-archive-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.fleet-protocol-archive-row strong,
.fleet-protocol-archive-row span{
  display:block;
}

.fleet-protocol-archive-row span{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}

.fleet-protocol-document{
  display:grid;
  gap:0;
}

.fleet-protocol-document-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.04);
}

.fleet-protocol-document-header h2{
  margin:0 0 5px;
}

.fleet-protocol-document-header p{
  margin:0;
  color:var(--muted);
}

.fleet-protocol-document-status{
  text-align:right;
}

.fleet-protocol-document-status strong,
.fleet-protocol-document-status span{
  display:block;
}

.fleet-protocol-document-status span{
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
}

.fleet-protocol-document-section{
  margin-top:14px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.03);
}

.fleet-protocol-document-section h3{
  margin:0 0 14px;
}

.fleet-protocol-document
.fleet-protocol-equipment-status.is-present{
  color:#166534;
}

.fleet-protocol-document
.fleet-protocol-equipment-status.is-warning{
  color:#92400e;
}

.fleet-protocol-document
.fleet-protocol-equipment-status.is-missing{
  color:#991b1b;
}

.fleet-protocol-document
.fleet-protocol-equipment-status.is-neutral{
  color:#475569;
}

.fleet-protocol-document-table{
  width:100%;
}

.fleet-protocol-document-list{
  display:grid;
  gap:9px;
  margin-bottom:18px;
}

.fleet-protocol-document-list > div{
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
}

.fleet-protocol-document-list strong{
  margin-right:10px;
}

.fleet-protocol-document-list span{
  color:var(--muted);
  font-size:11px;
}

.fleet-protocol-document-list p{
  margin:7px 0 0;
  color:var(--muted);
  white-space:pre-wrap;
}

.fleet-protocol-document-photos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.fleet-protocol-document-photos figure{
  margin:0;
  overflow:hidden;
  break-inside:avoid;
  page-break-inside:avoid;
}

.fleet-protocol-document-photos img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  border-radius:12px;
  background:rgba(15,23,42,.08);
}

.fleet-protocol-document-photos figcaption{
  padding-top:6px;
  color:var(--muted);
  font-size:11px;
}

.fleet-protocol-document-signatures{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.fleet-protocol-document-signatures > div{
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  text-align:center;
  background:#fff;
  color:#111827;
}

.fleet-protocol-document-signatures img{
  display:block;
  width:100%;
  height:140px;
  margin:8px 0;
  object-fit:contain;
}

.fleet-protocol-document-signatures span{
  color:#64748b;
  font-size:11px;
}

.fleet-protocol-document-footer{
  margin-top:14px;
  padding:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  text-align:center;
}

@media(max-width:720px){
  .fleet-protocol-signature-grid,
  .fleet-protocol-document-signatures{
    grid-template-columns:1fr;
  }

  .fleet-protocol-document-header{
    display:block;
  }

  .fleet-protocol-document-status{
    margin-top:12px;
    text-align:left;
  }

  .fleet-protocol-document-photos{
    grid-template-columns:1fr 1fr;
  }

  .fleet-protocol-archive-row{
    align-items:stretch;
    flex-direction:column;
  }

  .fleet-protocol-archive-row .btn{
    width:100%;
  }
}

@media(max-width:480px){
  .fleet-protocol-document-photos{
    grid-template-columns:1fr;
  }
}


.fleet-protocol-confirmation-banner{
  margin-bottom:14px;
  padding:20px;
  border:1px solid rgba(96,165,250,.3);
  border-radius:21px;
  background:
    linear-gradient(
      135deg,
      rgba(59,130,246,.15),
      rgba(255,255,255,.04)
    );
}

.fleet-protocol-confirmation-banner h3{
  margin:4px 0 8px;
  font-size:19px;
}

.fleet-protocol-confirmation-banner p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.fleet-protocol-confirmation-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.fleet-protocol-confirmation-card{
  padding:15px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.035);
}

.fleet-protocol-confirmation-card > span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.fleet-protocol-confirmation-card strong{
  display:block;
  font-size:15px;
}

.fleet-protocol-confirmation-card p{
  margin:5px 0 0;
  color:var(--muted);
}

.fleet-protocol-confirmation-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.fleet-protocol-confirmation-columns h4{
  margin:0 0 9px;
}

.fleet-protocol-confirmation-list{
  display:grid;
  gap:9px;
}

.fleet-protocol-confirmation-list > div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.fleet-protocol-confirmation-list p{
  grid-column:1/-1;
  margin:0;
  color:var(--muted);
  white-space:pre-wrap;
}

.fleet-protocol-confirmation-photos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.fleet-protocol-confirmation-photos figure{
  margin:0;
  overflow:hidden;
}

.fleet-protocol-confirmation-photos img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  border-radius:12px;
  background:rgba(15,23,42,.08);
}

.fleet-protocol-confirmation-photos figcaption{
  padding-top:5px;
  color:var(--muted);
  font-size:10px;
}

.fleet-protocol-signature-box{
  border:2px solid rgba(148,163,184,.55);
  box-shadow:0 12px 28px rgba(15,23,42,.12);
}

.fleet-protocol-signature-head span{
  margin-top:4px;
  color:#475569;
  font-size:12px;
}

.fleet-protocol-signature-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
  color:#64748b;
  font-size:11px;
}

.fleet-protocol-signature-status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#94a3b8;
}

.fleet-protocol-signature-status.is-signed{
  color:#166534;
}

.fleet-protocol-signature-status.is-signed
.fleet-protocol-signature-status-dot{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.15);
}

.fleet-protocol-signature-surface{
  position:relative;
  overflow:hidden;
  border:2px solid #64748b;
  border-radius:14px;
  background:
    linear-gradient(
      180deg,
      #fff,
      #f8fafc
    );
}

.fleet-protocol-signature-surface > span{
  position:absolute;
  top:14px;
  left:0;
  right:0;
  z-index:1;
  color:#94a3b8;
  font-size:12px;
  font-weight:700;
  text-align:center;
  pointer-events:none;
}

.fleet-protocol-signature-canvas{
  position:relative;
  z-index:2;
  height:210px;
  border:0;
  border-radius:0;
  background:transparent;
}

.fleet-protocol-signature-line{
  position:absolute;
  right:28px;
  bottom:36px;
  left:28px;
  height:2px;
  background:#334155;
  pointer-events:none;
}

@media(max-width:720px){
  .fleet-protocol-confirmation-grid,
  .fleet-protocol-confirmation-columns{
    grid-template-columns:1fr;
  }

  .fleet-protocol-confirmation-photos{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:480px){
  .fleet-protocol-confirmation-photos{
    grid-template-columns:1fr;
  }
}


.fleet-protocol-correction-banner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:15px;
  padding:18px;
  border:1px solid rgba(251,191,36,.35);
  border-radius:20px;
  background:
    linear-gradient(
      135deg,
      rgba(251,191,36,.14),
      rgba(255,255,255,.035)
    );
}

.fleet-protocol-correction-banner h3{
  margin:7px 0;
}

.fleet-protocol-correction-banner p{
  margin:0;
  color:var(--muted2);
}

.fleet-protocol-correction-number{
  flex:0 0 auto;
  padding:8px 11px;
  border:1px solid rgba(251,191,36,.35);
  border-radius:999px;
  background:rgba(251,191,36,.12);
  color:#fde68a;
  font-size:11px;
  font-weight:850;
}

.fleet-protocol-correction-count{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(96,165,250,.13);
  color:#bfdbfe;
  font-size:11px;
}

.fleet-protocol-correction-list{
  display:grid;
  gap:9px;
}

.fleet-protocol-correction-row{
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.fleet-protocol-correction-label span,
.fleet-protocol-correction-before span,
.fleet-protocol-correction-after span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.fleet-protocol-correction-before,
.fleet-protocol-correction-after{
  min-width:0;
  padding:9px;
  border-radius:11px;
}

.fleet-protocol-correction-before{
  background:rgba(248,113,113,.08);
}

.fleet-protocol-correction-after{
  background:rgba(74,222,128,.08);
}

.fleet-protocol-correction-before strong,
.fleet-protocol-correction-after strong{
  display:block;
  overflow-wrap:anywhere;
}

.fleet-protocol-correction-arrow{
  color:var(--muted);
  font-size:20px;
  font-weight:900;
}

.fleet-protocol-document-correction-notice{
  margin-bottom:14px;
  padding:15px;
  border:1px solid rgba(251,191,36,.35);
  border-radius:17px;
  background:rgba(251,191,36,.1);
}

.fleet-protocol-document-correction-notice strong{
  display:block;
  margin-bottom:6px;
  color:#fde68a;
}

.fleet-protocol-document-correction-notice p{
  margin:4px 0 0;
  color:var(--muted2);
}

.fleet-protocol-inline-link{
  padding:0;
  border:0;
  background:transparent;
  color:#93c5fd;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}

.fleet-protocol-correction-badge{
  display:inline-flex !important;
  width:max-content;
  margin-top:5px !important;
  padding:4px 7px;
  border:1px solid rgba(251,191,36,.3);
  border-radius:999px;
  background:rgba(251,191,36,.1);
  color:#fde68a !important;
  font-size:9px !important;
  font-weight:850;
}

@media(max-width:820px){
  .fleet-protocol-correction-row{
    grid-template-columns:1fr;
  }

  .fleet-protocol-correction-arrow{
    transform:rotate(90deg);
    text-align:center;
  }
}

@media(max-width:600px){
  .fleet-protocol-correction-banner{
    display:block;
  }

  .fleet-protocol-correction-number{
    display:inline-flex;
    margin-top:12px;
  }
}


.fleet-protocol-quick-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

[data-fleet-resource][hidden]{
  display:none !important;
}

@media(max-width:720px){
  .fleet-protocol-quick-actions{
    width:100%;
    justify-content:flex-start;
  }

  .fleet-protocol-quick-actions .btn{
    flex:1 1 auto;
  }
}


.fleet-protocol-photo-checklist{
  margin-bottom:16px;
  padding:15px;
  border:1px solid rgba(248,113,113,.3);
  border-radius:18px;
  background:rgba(248,113,113,.07);
}

.fleet-protocol-photo-checklist.is-complete{
  border-color:rgba(74,222,128,.3);
  background:rgba(74,222,128,.07);
}

.fleet-protocol-photo-checklist-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}

.fleet-protocol-photo-checklist-head h4{
  margin:7px 0 0;
  font-size:17px;
}

.fleet-protocol-photo-checklist-head > strong{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(248,113,113,.13);
  color:#fecaca;
  font-size:10px;
}

.fleet-protocol-photo-checklist.is-complete
.fleet-protocol-photo-checklist-head > strong{
  background:rgba(74,222,128,.13);
  color:#bbf7d0;
}

.fleet-protocol-photo-checklist-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.fleet-protocol-photo-check-item{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:2px 9px;
  align-items:center;
  padding:11px;
  border:1px solid rgba(248,113,113,.22);
  border-radius:14px;
  background:rgba(0,0,0,.08);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.fleet-protocol-photo-check-item:hover{
  border-color:rgba(139,92,246,.45);
  transform:translateY(-1px);
}

.fleet-protocol-photo-check-item > span{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:9px;
  background:rgba(248,113,113,.16);
  color:#fecaca;
  font-weight:950;
}

.fleet-protocol-photo-check-item strong{
  min-width:0;
  font-size:12px;
}

.fleet-protocol-photo-check-item small{
  color:var(--muted);
  font-size:9px;
}

.fleet-protocol-photo-check-item.is-complete{
  border-color:rgba(74,222,128,.2);
}

.fleet-protocol-photo-check-item.is-complete > span{
  background:rgba(74,222,128,.15);
  color:#bbf7d0;
}

.fleet-protocol-photo-checklist-note{
  margin:12px 0 0;
  padding-top:11px;
  border-top:1px solid var(--line);
  color:var(--muted2);
  font-size:11px;
}

.fleet-protocol-photo-upload-grid{
  margin-top:16px;
}

.fleet-protocol-photo-source{
  display:grid;
  gap:9px;
}

.fleet-protocol-photo-source-label{
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.fleet-protocol-photo-source-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.fleet-protocol-photo-source-actions .btn{
  min-width:190px;
}

.fleet-protocol-photo-hidden-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media(max-width:820px){
  .fleet-protocol-photo-checklist-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:520px){
  .fleet-protocol-photo-source-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .fleet-protocol-photo-source-actions .btn{
    width:100%;
    min-width:0;
  }

  .fleet-protocol-photo-checklist-head{
    display:block;
  }

  .fleet-protocol-photo-checklist-head > strong{
    display:inline-flex;
    margin-top:10px;
  }

  .fleet-protocol-photo-checklist-grid{
    grid-template-columns:1fr;
  }
}


.form-section label.full{
  grid-column:1/-1;
}

.fleet-form textarea{
  min-height:120px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:15px;
  color:#fff;
  padding:12px 13px;
  outline:0;
}

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding-top:4px;
}

.status-warning-box{
  padding:16px;
  border:1px solid rgba(251,191,36,.24);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,255,255,.04));
}

.status-warning-box strong{
  display:block;
  margin-bottom:6px;
  color:#ffd772;
}

.status-warning-box p{
  margin:0;
  color:var(--muted2);
  line-height:1.5;
  font-size:13px;
}

@media(max-width:760px){
  .form-actions .btn{
    width:100%;
  }
}
.fleet-form .is-hidden{
  display:none!important;
}
.is-hidden{
  display:none!important;
}
.module-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:18px 0 0;
  padding:8px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(148,163,184,.25);
  border-radius:18px;
}

.module-tab{
  border:0;
  background:transparent;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  color:#64748b;
  cursor:pointer;
}

.module-tab.active{
  background:#111827;
  color:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.18);
}

.module-tab:hover{
  background:rgba(15,23,42,.08);
}

.module-tab.active:hover{
  background:#111827;
}
.settlement-file-inline{
  display:grid;
  grid-template-columns: 160px 160px minmax(220px,1fr) minmax(220px,1fr) auto;
  gap:10px;
  align-items:end;
}

.settlement-file-inline label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

@media(max-width:1100px){
  .settlement-file-inline{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:700px){
  .settlement-file-inline{
    grid-template-columns:1fr;
  }
}
.settlement-file-inline{
  display:grid;
  grid-template-columns: 160px 160px minmax(220px,1fr) minmax(220px,1fr) auto;
  gap:10px;
  align-items:end;
}

.settlement-file-inline label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

@media(max-width:1100px){
  .settlement-file-inline{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:700px){
  .settlement-file-inline{
    grid-template-columns:1fr;
  }
}
.settings-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin-top:18px;
}

.settings-menu{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid rgba(148,163,184,.25);
  border-radius:22px;
  background:rgba(255,255,255,.72);
  box-shadow:0 18px 50px rgba(15,23,42,.06);
  position:sticky;
  top:18px;
}

.settings-menu-item{
  border:0;
  background:transparent;
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  color:#64748b;
  font-weight:800;
}

.settings-menu-item:hover{
  background:rgba(15,23,42,.06);
  color:#0f172a;
}

.settings-menu-item.active{
  background:#111827;
  color:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.18);
}

.settings-content{
  min-width:0;
}

@media(max-width:900px){
  .settings-layout{
    grid-template-columns:1fr;
  }

  .settings-menu{
    position:static;
  }
}
.settings-checks{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.settings-checks label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:14px;
  background:rgba(255,255,255,.65);
  font-weight:700;
  color:#334155;
}

.settings-checks input{
  margin-top:2px;
}
.settings-system-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.settings-system-sidebar{
  border:1px solid rgba(148,163,184,.25);
  border-radius:20px;
  background:rgba(255,255,255,.7);
  padding:12px;
  position:sticky;
  top:18px;
}

.settings-system-sidebar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.settings-system-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.settings-system-item{
  width:100%;
  border:0;
  background:transparent;
  border-radius:16px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  text-align:left;
  cursor:pointer;
}

.settings-system-item:hover{
  background:rgba(15,23,42,.06);
}

.settings-system-item.active{
  background:#111827;
  color:#fff;
}

.settings-system-item span{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.settings-system-item small{
  opacity:.75;
}

.settings-system-editor{
  min-width:0;
}

@media(max-width:1000px){
  .settings-system-layout{
    grid-template-columns:1fr;
  }

  .settings-system-sidebar{
    position:static;
  }
}
.nav-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nav-group-toggle{
  width:100%;
}

.nav-submenu{
  display:none;
  flex-direction:column;
  gap:4px;
  margin-left:14px;
  padding-left:10px;
  border-left:1px solid rgba(148,163,184,.25);
}

.nav-group.open .nav-submenu{
  display:flex;
}

.nav-subitem{
  font-size:13px;
  opacity:.92;
  padding-left:12px !important;
}

.nav-subitem span{
  opacity:.9;
}

/*
  GRUPA, W KTOREJ SIEDZI BIEZACA ZAKLADKA

  Zglosenie Oskara z 2026-09-21: "w ustawieniach podswietlaja mi sie
  zakladki tak jakbym na nie najechal, a nie najechalem".

  Mial racje i przyczyna byla dokladnie taka. Grupa prowadzaca
  do biezacej strony dostawala tlo rgba(255,255,255,.08), a
  najechanie daje rgba(255,255,255,.055) - czyli JASNIEJSZE tlo
  niz hover. Kazdy przodek biezacej strony wygladal wiec jak
  element pod kursorem. W Ustawieniach, gdzie sa trzy poziomy,
  dotyczylo to dwoch pozycji naraz.

  Teraz grupa na sciezce do biezacej strony nie ma tla w ogole -
  ma jasniejszy tekst i podbarwiona ikone. Tlo zostaje wylacznie
  dla hovera, wiec znow znaczy "kursor jest tutaj".
*/
.nav-group.active > .nav-group-toggle,
.nav .nav-group-toggle.active{
  background:transparent;
  color:#fff;
  box-shadow:none;
  transform:none;
}

/*
  Bez paska z lewej. Ten nalezy do JEDNEJ, otwartej zakladki -
  gdy dostawala go jeszcze grupa, na ekranie bylo kilka
  "biezacych stron".
*/
.nav .nav-group-toggle.active:before{
  display:none;
}

.nav .nav-group-toggle.active span:first-child{
  background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(33,212,163,.12));
  border-color:rgba(255,255,255,.12);
}

/* Najechanie dziala normalnie takze na tych grupach. */
.nav-group.active > .nav-group-toggle:hover,
.nav .nav-group-toggle.active:hover{
  background:rgba(255,255,255,.055);
  transform:translateX(2px);
}
/*
  Ramka informacyjna.

  Wczesniej byla zdefiniowana DWA razy: tutaj z jasnym tlem
  (rgba(255,255,255,.72)) i drugi raz nizej z ciemnym. Wygrywala
  ta nizsza, wiec jasne wartosci byly martwe - ale kazdy, kto
  czytal plik od gory, dostawal zla odpowiedz. Teraz jest jedna
  definicja, z wartosciami, ktore faktycznie obowiazuja.
*/
.notice{
  border-radius:18px;
  padding:14px 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:var(--text);
}

.notice strong{
  display:block;
  margin-bottom:6px;
  color:#fff;
}

.notice p,
.notice li{
  margin:0;
  color:var(--muted2);
}

.notice ul{
  margin:8px 0 0;
  padding-left:20px;
}

.notice.ok{
  border-color:rgba(52,211,153,.25);
  background:rgba(52,211,153,.10);
}

.notice.warning{
  border-color:rgba(251,191,36,.25);
  background:rgba(251,191,36,.10);
}

.notice.danger{
  border-color:rgba(255,107,107,.26);
  background:rgba(255,107,107,.11);
}

.notice.neutral{
  border-color:var(--line);
  background:rgba(255,255,255,.055);
}
.settlement-mapping-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.settlement-mapping-card{
  border:1px solid rgba(15,23,42,.12);
  border-radius:24px;
  background:#f8fafc;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(15,23,42,.08);
}

.settlement-mapping-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  background:linear-gradient(135deg,#111827,#1e293b);
  color:#fff;
}

.settlement-mapping-card-head .eyebrow{
  color:rgba(255,255,255,.68);
}

.settlement-mapping-card-head h3{
  margin:4px 0 0;
  font-size:18px;
  color:#fff;
}

.settlement-mapping-card-head .btn.ghost{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.22);
}

.settlement-mapping-card-head .btn.ghost:hover{
  background:rgba(255,255,255,.2);
}

.settlement-mapping-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:18px;
}

.settlement-mapping-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:16px;
  background:#fff;
}

.settlement-mapping-grid label span{
  font-size:12px;
  font-weight:900;
  color:#475569;
}

.settlement-mapping-grid input,
.settlement-mapping-grid select,
.settlement-mapping-grid textarea{
  background:#f8fafc;
  border-color:rgba(148,163,184,.35);
}

.settlement-mapping-grid input:focus,
.settlement-mapping-grid select:focus,
.settlement-mapping-grid textarea:focus{
  background:#fff;
}

.settlement-mapping-aliases{
  grid-column:1 / -1;
}

.settlement-mapping-aliases textarea{
  min-height:84px;
}

.settlement-mapping-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 18px 18px;
  border-top:1px solid rgba(148,163,184,.24);
  background:#eef2f7;
}

.settlement-mapping-summary span{
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  color:#64748b;
}

.settlement-mapping-summary strong{
  color:#0f172a;
}

@media(max-width:1200px){
  .settlement-mapping-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .settlement-mapping-grid{
    grid-template-columns:1fr;
  }

  .settlement-mapping-card-head{
    flex-direction:column;
  }
}
.settlement-mapping-grid,
.settlement-mapping-grid label,
.settlement-mapping-grid label span,
.settlement-mapping-grid input,
.settlement-mapping-grid select,
.settlement-mapping-grid textarea,
.settlement-mapping-grid option{
  color:#0f172a;
}

.settlement-mapping-grid label span{
  color:#475569;
}

.settlement-mapping-grid input::placeholder,
.settlement-mapping-grid textarea::placeholder{
  color:#94a3b8;
}

.settlement-mapping-grid select{
  color:#0f172a;
  background:#f8fafc;
}

.settlement-mapping-grid textarea{
  color:#0f172a;
  background:#f8fafc;
}

.settlement-mapping-grid input{
  color:#0f172a;
  background:#f8fafc;
}

.settlement-mapping-grid input:focus,
.settlement-mapping-grid select:focus,
.settlement-mapping-grid textarea:focus{
  color:#0f172a;
  background:#fff;
}
.settlement-mapping-toolbar{
  border:1px solid rgba(148,163,184,.28);
  border-radius:22px;
  background:#eef2f7;
  padding:16px;
  margin-bottom:18px;
}

.settlement-mapping-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:14px;
  align-items:end;
}

.settlement-mapping-search label{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(148,163,184,.28);
}

.settlement-mapping-search label span{
  font-size:12px;
  font-weight:900;
  color:#475569 !important;
}

.settlement-mapping-search input,
.settlement-mapping-search select{
  color:#0f172a !important;
  background:#f8fafc !important;
  border-color:rgba(148,163,184,.38) !important;
}

.settlement-mapping-search input::placeholder{
  color:#94a3b8 !important;
}

.settlement-mapping-search option{
  color:#0f172a;
  background:#fff;
}

.settlement-mapping-counters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.settlement-filter-chip{
  border:1px solid rgba(148,163,184,.32);
  background:#fff;
  color:#334155 !important;
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.settlement-filter-chip strong{
  margin-left:6px;
  color:#0f172a !important;
}

.settlement-filter-chip.active{
  background:#111827;
  color:#fff !important;
  border-color:#111827;
}

.settlement-filter-chip.active strong{
  color:#fff !important;
}

.settlement-mapping-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.mapping-status{
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff !important;
}

.mapping-status.ok{
  background:rgba(34,197,94,.18);
  color:#bbf7d0 !important;
  border-color:rgba(34,197,94,.35);
}

.mapping-status.warning{
  background:rgba(245,158,11,.18);
  color:#fde68a !important;
  border-color:rgba(245,158,11,.35);
}

.mapping-status.danger{
  background:rgba(239,68,68,.18);
  color:#fecaca !important;
  border-color:rgba(239,68,68,.35);
}

.mapping-status.neutral{
  background:rgba(148,163,184,.18);
  color:#e2e8f0 !important;
  border-color:rgba(148,163,184,.35);
}

.settlement-mapping-card-head p{
  margin:6px 0 0;
  color:rgba(255,255,255,.72) !important;
  font-size:13px;
}

@media(max-width:900px){
  .settlement-mapping-search{
    grid-template-columns:1fr;
  }
}
.sidebar-collapse-btn{
  width:34px;
  height:34px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  font-weight:900;
  flex:0 0 auto;
}

.sidebar-collapse-btn:hover{
  background:rgba(255,255,255,.16);
}

@media(min-width:769px){
  body.sidebar-collapsed .app-shell{
    grid-template-columns:82px minmax(0,1fr);
  }

  body.sidebar-collapsed .sidebar{
    width:82px;
    min-width:82px;
    overflow:hidden;
  }

  body.sidebar-collapsed .brand{
    justify-content:center;
  }

  body.sidebar-collapsed .brand-mark{
    display:none;
  }

  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .brand-copy h1,
  body.sidebar-collapsed .brand-copy span{
    display:none;
  }

  body.sidebar-collapsed .sidebar-collapse-btn{
    transform:rotate(180deg);
  }

  body.sidebar-collapsed .nav button{
    justify-content:center;
    padding:12px 10px;
    position:relative;
  }

  body.sidebar-collapsed .nav-icon{
    font-size:20px;
    min-width:24px;
    text-align:center;
  }

  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .nav button small{
    display:none;
  }

  body.sidebar-collapsed .nav-submenu{
    display:none !important;
  }

  body.sidebar-collapsed .nav-group.open .nav-submenu{
    display:none !important;
  }

  body.sidebar-collapsed .nav button:hover::after{
    content:attr(title);
    position:absolute;
    left:72px;
    top:50%;
    transform:translateY(-50%);
    z-index:9999;
    white-space:nowrap;
    background:#111827;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    padding:8px 10px;
    font-size:12px;
    font-weight:800;
    box-shadow:0 18px 40px rgba(15,23,42,.22);
  }

  body.sidebar-collapsed .nav button:hover::before{
    content:'';
    position:absolute;
    left:64px;
    top:50%;
    transform:translateY(-50%);
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-right:7px solid #111827;
    z-index:9999;
  }

  /*
    `.sidebar-card`, `.sidebar-footer` i `.user-mini` wypadly
    z listy 2026-09-23 - takich elementow nie ma juz w menu.
  */
  body.sidebar-collapsed .sidebar .muted{
    display:none;
  }
}

@media(max-width:768px){
  .sidebar-collapse-btn{
    display:inline-flex !important;
  }
}
.settlement-rule-section{
  margin-top:24px !important;
}

.settlement-rule-grid{
  display:grid;
  gap:18px;
  align-items:stretch;
}

.settlement-rule-grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.settlement-rule-grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.settlement-rule-card{
  background:#fff;
  border:1px solid rgba(148,163,184,.28);
  border-radius:22px;
  padding:18px;
  box-shadow:0 16px 36px rgba(15,23,42,.06);
}

.settlement-rule-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(148,163,184,.22);
}

.settlement-rule-card-head h3{
  margin:4px 0 0;
  font-size:17px;
  line-height:1.25;
  color:#0f172a;
}

.settlement-rule-fields{
  display:grid;
  gap:14px;
}

.settlement-rule-fields label{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.settlement-rule-fields label span{
  font-size:12px;
  font-weight:900;
  color:#475569;
}

.settlement-rule-fields input,
.settlement-rule-fields select,
.settlement-rule-fields textarea{
  color:#0f172a !important;
  background:#f8fafc !important;
  border-color:rgba(148,163,184,.36) !important;
}

.switch-line{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
}

.switch-line input{
  width:auto;
}

.check-card{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.28);
}

.check-card input{
  width:auto;
  margin-top:2px;
}

.check-card span{
  font-size:13px !important;
  line-height:1.35;
  color:#334155 !important;
}

.settlement-rule-explain{
  background:#f8fafc;
}

.settlement-rule-explain h3{
  color:#0f172a;
}

.settlement-rule-explain p,
.settlement-rule-explain li{
  color:#334155;
  line-height:1.5;
}

.settlement-rule-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.settlement-rule-kpi{
  background:#fff;
  border:1px solid rgba(148,163,184,.28);
  border-radius:18px;
  padding:14px;
  min-width:0;
}

.settlement-rule-kpi span{
  display:block;
  font-size:11px;
  line-height:1.15;
  font-weight:900;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.settlement-rule-kpi strong{
  display:block;
  margin-top:8px;
  font-size:17px;
  line-height:1.15;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:1200px){
  .settlement-rule-grid.three{
    grid-template-columns:1fr;
  }

  .settlement-rule-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .settlement-rule-grid.two{
    grid-template-columns:1fr;
  }

  .settlement-rule-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  .settlement-rule-kpi-grid{
    grid-template-columns:1fr;
  }
}
.field-label{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:900;
  color:#475569;
}

.choice-grid{
  display:grid;
  gap:12px;
}

.choice-grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.choice-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.35);
  background:#f8fafc;
  cursor:pointer;
}

.choice-card input{
  width:auto;
}

.choice-card strong{
  color:#0f172a;
  font-size:14px;
}

.choice-card small{
  color:#64748b;
  line-height:1.35;
}

.choice-card.active{
  border-color:rgba(37,99,235,.55);
  background:#eff6ff;
}

.other-transaction-impact-preview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.other-transaction-impact-card{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.3);
  background:#f8fafc;
}

.other-transaction-impact-card strong{
  display:block;
  margin-bottom:4px;
  color:#0f172a;
}

.other-transaction-impact-card p{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.4;
}

@media(max-width:800px){
  .choice-grid.two,
  .other-transaction-impact-preview{
    grid-template-columns:1fr;
  }
}
.control-check-compact-grid{
  display:grid;
  grid-template-columns: 1.3fr 1.4fr .7fr .8fr;
  gap:12px;
  margin-top:12px;
}

/* =========================================================
   WĄTEK ZGŁOSZENIA KIEROWCY

   Rozmowa biura z kierowcą. Strony rozróżniamy wcięciem i tłem,
   nie podpisem — podpis też jest, ale przy dziesięciu wiadomościach
   nikt go nie czyta, a kształt widać od razu.
========================================================= */

.claim-thread{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.claim-message{
  display:block;
  max-width:82%;
  padding:9px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
}

.claim-message.office{
  align-self:flex-end;
  background:rgba(96,165,250,.13);
}

.claim-message small{
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:11px;
}

.claim-message span{
  display:block;
  font-size:13px;
  line-height:1.5;
}

@media(max-width:720px){
  .claim-message{
    max-width:100%;
  }
}

/* =========================================================
   WIDOCZNOŚĆ ROZLICZENIA — PRZEŁĄCZNIK TRZYSTANOWY

   Kto widzi wstępne rozliczenie: nikt poza modułem rozliczeń,
   biuro, albo także kierowca. Kolor niesie stan, więc da się go
   odczytać jednym rzutem oka po całej kolumnie.
========================================================= */

.settlement-visibility{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:inherit;
  cursor:pointer;
  font:inherit;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}

.settlement-visibility:hover{
  background:rgba(255,255,255,.09);
}

.settlement-visibility.hidden{
  color:var(--muted);
}

.settlement-visibility.office{
  border-color:rgba(96,165,250,.45);
  color:var(--info);
}

.settlement-visibility.driver{
  border-color:rgba(52,211,153,.45);
  color:var(--ok);
}

.settlement-visibility-bulk{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
}

/* =========================================================
   NALICZENIA ROZLICZENIA — PRZYCISKI ZE STANEM

   Układ ustalony z Oskarem 2026-09-03. Zamiast pięciu dużych kart
   opisowych, z których każda zajmowała ćwiartkę ekranu — lista
   wąskich przycisków z kolorową kropką.

   Kropka niesie cały stan:
     zielona      — naliczone
     czerwona     — jeszcze nie
     pomarańczowa — naliczone, ale dane zmieniły się później

   Przycisk naliczenia wygaszamy, gdy nie ma czego robić. Wraca
   do życia po usunięciu pliku.
========================================================= */

/*
  Trzy w rzędzie (prośba Oskara z 2026-09-04).

  Pionowa lista pięciu przycisków zajmowała pół ekranu, a każdy
  z nich niesie jedną linijkę treści. Przy trzech kolumnach cała
  sekcja mieści się w dwóch rzędach.
*/
.settlement-action-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:14px;
}

@media(max-width:1100px){
  .settlement-action-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:720px){
  .settlement-action-list{
    grid-template-columns:1fr;
  }
}

.settlement-action{
  display:flex;
  align-items:stretch;
  gap:8px;
}

.settlement-action-run{
  display:flex;
  align-items:center;
  gap:11px;
  flex:1;
  min-width:0;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:inherit;
  cursor:pointer;
  font:inherit;
  text-align:left;
}

.settlement-action-run:hover:not(:disabled){
  background:rgba(255,255,255,.07);
}

/*
  Naliczone i aktualne — nie ma po co klikać. Zostawiamy pełną
  czytelność tekstu, bo to nadal informacja; gasimy tylko sygnał,
  że to przycisk.
*/
.settlement-action-run:disabled{
  cursor:default;
  background:transparent;
}

.settlement-action-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:50%;
}

.settlement-action.done .settlement-action-dot{
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(52,211,153,.18);
}

.settlement-action.missing .settlement-action-dot{
  background:var(--danger);
  box-shadow:0 0 0 3px rgba(255,107,107,.18);
}

.settlement-action.stale .settlement-action-dot{
  background:var(--warn);
  box-shadow:0 0 0 3px rgba(251,191,36,.18);
}

.settlement-action-text{
  display:block;
  min-width:0;
  flex:1;
}

.settlement-action-text strong{
  display:block;
  font-size:13px;
}

/*
  W kolumnie jest ciasno, więc opis łamiemy zamiast ucinać - inaczej
  z „Naliczone: 12 pozycji." zostawałoby „Naliczo…".
*/
.settlement-action-text small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.4;
}

.settlement-action-amount{
  flex:0 0 auto;
  font-size:13px;
  white-space:nowrap;
}

/* =========================================================
   KROPKA STANU RÓL ROZLICZENIOWYCH

   Zastąpiła żółty baner, który pokazywał się także wtedy, gdy
   wszystko było w porządku — a żółty przy „wszystko dobrze"
   uczy, że żółty nic nie znaczy.
========================================================= */

.derived-roles-state{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:10px;
}

.derived-roles-state strong{
  display:block;
  font-size:12.5px;
}

.derived-roles-state small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.45;
}

.derived-roles-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  margin-top:4px;
  border-radius:50%;
}

.derived-roles-state.ok .derived-roles-dot{
  background:var(--ok, #3ecf8e);
  box-shadow:0 0 0 3px rgba(62,207,142,.18);
}

.derived-roles-state.missing .derived-roles-dot{
  background:var(--danger, #ff6b6b);
  box-shadow:0 0 0 3px rgba(255,107,107,.18);
}

/* =========================================================
   SUMA KONTROLNA — UKŁAD KARTY

   Ustalony z Oskarem 2026-08-31. Dwa rzędy zamiast jednego
   ciasnego czterokolumnowego:

     góra    — nazwa, status i opis na pełną szerokość
     dół     — kolumna kontrolowana i tolerancja

   Opis dostał osobny wiersz i cztery linijki wysokości, bo to
   w nim tłumaczy się, po co dana kontrola w ogóle istnieje.
   Wcześniej dzielił rząd z trzema polami i mieściła się w nim
   jedna linijka.
========================================================= */

.control-check-head-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:12px;
  margin-top:12px;
}

.control-check-head-grid .full{
  grid-column:1 / -1;
}

.control-check-head-grid textarea{
  min-height:92px;
  resize:vertical;
}

.control-check-settings-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:12px;
  margin-top:12px;
}

.control-formula-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.control-formula-row{
  display:grid;
  grid-template-columns: 90px minmax(220px, 1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--soft);
}

.btn.mini{
  padding:7px 10px;
  font-size:12px;
}

.summary-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

@media (max-width: 980px){
  .control-check-compact-grid,
  .control-check-head-grid,
  .control-check-settings-grid{
    grid-template-columns:1fr;
  }

  .control-formula-row{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   USTAWIENIA I SUMY KONTROLNE — POLA FORMULARZY

   Ten blok nazywal sie kiedys "FIX: bialy tekst na bialym tle"
   i ustawial pola w ustawieniach na BIALE tlo z ciemnym tekstem.
   Byla to poprawka z czasow, gdy panel mial jasny motyw.

   Nizej w pliku doklejono druga warstwe, ktora te same pola
   wymusza z powrotem na ciemne — przez `!important`. Wiekszosc
   regul stad byla wiec martwa, ale nie wszystkie: czesc selektorow
   nie ma odpowiednika nizej i nadal dzialala, malujac jasnoszary
   tekst na ciemnym tle.

   Nie kasujemy tego bloku, bo nie da sie na sucho udowodnic, ktora
   dokladnie regula jest martwa. Zamiast tego wszystkie wartosci
   sa teraz CIEMNE, zgodne z reszta panelu. Reguly martwe nic nie
   zmieniaja, a te, ktore zyly, pokazuja wreszcie wlasciwy kolor.
========================================================= */

.settings-system-editor input,
.settings-system-editor select,
.settings-system-editor textarea,
.settlement-mapping-card input,
.settlement-mapping-card select,
.settlement-mapping-card textarea,
.control-formula-row input,
.control-formula-row select,
.control-formula-row textarea,
.control-check-compact-grid input,
.control-check-compact-grid select,
.control-check-compact-grid textarea{
  background:var(--input-bg);
  color:var(--input-text);
  border-color:var(--line);
}

.settings-system-editor input::placeholder,
.settings-system-editor textarea::placeholder,
.settlement-mapping-card input::placeholder,
.settlement-mapping-card textarea::placeholder,
.control-formula-row input::placeholder,
.control-formula-row textarea::placeholder,
.control-check-compact-grid input::placeholder,
.control-check-compact-grid textarea::placeholder{
  color:var(--input-placeholder);
}

.settings-system-editor select option,
.settlement-mapping-card select option,
.control-formula-row select option,
.control-check-compact-grid select option{
  background:var(--panel);
  color:var(--text);
}

.control-formula-row{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--line);
}

.control-formula-row span,
.control-formula-row strong,
.control-formula-row label,
.control-formula-row small{
  color:var(--text);
}

.control-check-compact-grid label span,
.control-formula-list label span,
.settings-system-editor label span,
.settlement-mapping-card label span{
  color:var(--muted);
}

.settings-system-editor .muted,
.settlement-mapping-card .muted,
.control-formula-row .muted{
  color:var(--muted);
}

.settings-system-editor .field-label,
.settlement-mapping-card .field-label{
  color:var(--muted2);
}
/* =========================================================
   FIX: Liczenie kontrolne — kontrast tekstu i przycisków
========================================================= */

.settings-system-editor .settlement-rule-card,
.settings-system-editor .control-formula-row,
.settings-system-editor .control-formula-list,
.settings-system-editor .control-check-compact-grid{
  color:#111827;
}

.settings-system-editor .settlement-rule-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
}

.settings-system-editor .settlement-rule-card h3,
.settings-system-editor .settlement-rule-card strong,
.settings-system-editor .settlement-rule-card span,
.settings-system-editor .settlement-rule-card label,
.settings-system-editor .settlement-rule-card p{
  color:#111827;
}

.settings-system-editor .settlement-rule-card .muted,
.settings-system-editor .settlement-rule-card small{
  color:#6b7280;
}

.settings-system-editor .settlement-rule-card .eyebrow{
  color:#6b7280;
}

.settings-system-editor .control-formula-row{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  color:#111827;
}

.settings-system-editor .control-formula-row select,
.settings-system-editor .control-formula-row input,
.settings-system-editor .control-check-compact-grid select,
.settings-system-editor .control-check-compact-grid input{
  background:#ffffff;
  color:#111827;
  border:1px solid #d1d5db;
}

.settings-system-editor .control-formula-row select option,
.settings-system-editor .control-check-compact-grid select option{
  background:#ffffff;
  color:#111827;
}

/* Przyciski typu Zwiń / Rozwiń / Usuń w sumach kontrolnych */
.settings-system-editor .summary-actions .btn,
.settings-system-editor .settlement-rule-card .btn,
.settings-system-editor .control-formula-row .btn{
  background:#ffffff;
  color:#111827;
  border:1px solid #d1d5db;
}

.settings-system-editor .summary-actions .btn:hover,
.settings-system-editor .settlement-rule-card .btn:hover,
.settings-system-editor .control-formula-row .btn:hover{
  background:#f3f4f6;
  color:#111827;
  border-color:#9ca3af;
}

/* Gdy .btn.ghost globalnie ma jasny/transparentny tekst */
.settings-system-editor .btn.ghost{
  color:#111827;
  background:#ffffff;
  border-color:#d1d5db;
}

.settings-system-editor .btn.ghost:hover{
  color:#111827;
  background:#f3f4f6;
  border-color:#9ca3af;
}

/* Badge w kontrolach */
.settings-system-editor .settlement-rule-card .badge{
  color:#111827;
  background:#f3f4f6;
  border:1px solid #d1d5db;
}

.settings-system-editor .settlement-rule-card .badge.success{
  color:#065f46;
  background:#d1fae5;
  border-color:#a7f3d0;
}

.settings-system-editor .settlement-rule-card .badge.warning{
  color:#92400e;
  background:#fef3c7;
  border-color:#fde68a;
}

.settings-system-editor .settlement-rule-card .badge.danger{
  color:#991b1b;
  background:#fee2e2;
  border-color:#fecaca;
}

.settings-system-editor .settlement-rule-card .badge.neutral{
  color:#374151;
  background:#f3f4f6;
  border-color:#d1d5db;
}
/* =========================================================
   PARTNERHUB360 — NORMALIZACJA MOTYWU
   Ujednolicenie ustawień, mapowań i sum kontrolnych do dark UI
========================================================= */

/* ---------- Ustawienia: layout i menu ---------- */

.settings-menu,
.settings-system-sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.032));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.settings-menu-item,
.settings-system-item{
  color:var(--muted2);
}

.settings-menu-item:hover,
.settings-system-item:hover{
  background:rgba(255,255,255,.075);
  color:#fff;
}

.settings-menu-item.active,
.settings-system-item.active{
  background:linear-gradient(90deg,rgba(139,92,246,.26),rgba(33,212,163,.13));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.18);
}

.settings-system-item strong,
.settings-system-sidebar-head strong{
  color:#fff;
}

.settings-system-item small{
  color:var(--muted);
}

/* ---------- Notice ---------- */

/* ---------- Formularze globalnie w panelach ustawień ---------- */

.settings-system-editor input,
.settings-system-editor select,
.settings-system-editor textarea,
.settings-content input,
.settings-content select,
.settings-content textarea,
.fleet-form input,
.fleet-form select,
.fleet-form textarea{
  background:var(--input-bg) !important;
  color:var(--input-text) !important;
  border:1px solid var(--line) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.settings-system-editor input:focus,
.settings-system-editor select:focus,
.settings-system-editor textarea:focus,
.settings-content input:focus,
.settings-content select:focus,
.settings-content textarea:focus,
.fleet-form input:focus,
.fleet-form select:focus,
.fleet-form textarea:focus{
  background:var(--input-bg-focus) !important;
  border-color:rgba(139,92,246,.42) !important;
  outline:0;
}

.settings-system-editor input::placeholder,
.settings-system-editor textarea::placeholder,
.settings-content input::placeholder,
.settings-content textarea::placeholder,
.fleet-form input::placeholder,
.fleet-form textarea::placeholder{
  color:var(--input-placeholder) !important;
}

.settings-system-editor select option,
.settings-content select option,
.fleet-form select option{
  background:var(--panel) !important;
  color:var(--text) !important;
}

.settings-system-editor label span,
.settings-content label span,
.fleet-form label span,
.field-label{
  color:var(--muted) !important;
}

/* ---------- Karty mapowania ---------- */

.settlement-mapping-toolbar{
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.032));
  border:1px solid var(--line);
}

.settlement-mapping-search label{
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
}

.settlement-mapping-search label span{
  color:var(--muted) !important;
}

.settlement-mapping-card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.settlement-mapping-card-head{
  background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(33,212,163,.10));
  border-bottom:1px solid var(--line);
}

.settlement-mapping-grid{
  background:transparent;
}

.settlement-mapping-grid label{
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
}

.settlement-mapping-grid label span{
  color:var(--muted) !important;
}

.settlement-mapping-grid input,
.settlement-mapping-grid select,
.settlement-mapping-grid textarea{
  background:var(--input-bg) !important;
  color:var(--input-text) !important;
  border-color:var(--line) !important;
}

.settlement-mapping-grid option{
  background:var(--panel) !important;
  color:var(--text) !important;
}

.settlement-mapping-summary{
  background:rgba(0,0,0,.12);
  border-top:1px solid var(--line);
}

.settlement-mapping-summary span{
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
  color:var(--muted2);
}

.settlement-mapping-summary strong{
  color:#fff;
}

/* ---------- Filtry mapowania ---------- */

.settlement-filter-chip{
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
  color:var(--muted2) !important;
}

.settlement-filter-chip strong{
  color:#fff !important;
}

.settlement-filter-chip:hover{
  background:rgba(255,255,255,.09);
  color:#fff !important;
}

.settlement-filter-chip.active{
  background:linear-gradient(135deg,var(--brand),#6d5dfc 48%,#22c7a7);
  border-color:transparent;
  color:#fff !important;
}

/* ---------- Zasady rozliczeń i sumy kontrolne ---------- */

.settlement-rule-card,
.choice-card,
.other-transaction-impact-card,
.settlement-rule-kpi,
.control-formula-row{
  background:rgba(255,255,255,.055) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}

.settlement-rule-card-head{
  border-bottom:1px solid var(--line);
}

.settlement-rule-card h3,
.settlement-rule-card strong,
.choice-card strong,
.other-transaction-impact-card strong,
.settlement-rule-kpi strong{
  color:#fff !important;
}

.settlement-rule-card p,
.settlement-rule-card small,
.choice-card small,
.other-transaction-impact-card p,
.settlement-rule-explain p,
.settlement-rule-explain li{
  color:var(--muted2) !important;
}

.settlement-rule-fields label span,
.control-check-compact-grid label span,
.control-formula-list label span{
  color:var(--muted) !important;
}

.settlement-rule-fields input,
.settlement-rule-fields select,
.settlement-rule-fields textarea,
.control-check-compact-grid input,
.control-check-compact-grid select,
.control-check-compact-grid textarea,
.control-formula-row input,
.control-formula-row select,
.control-formula-row textarea{
  background:var(--input-bg) !important;
  color:var(--input-text) !important;
  border:1px solid var(--line) !important;
}

.control-formula-row select option,
.control-check-compact-grid select option,
.settlement-rule-fields select option{
  background:var(--panel) !important;
  color:var(--text) !important;
}

/* ---------- Przyciski w ustawieniach ---------- */

.settings-system-editor .btn.ghost,
.settings-content .btn.ghost,
.settlement-rule-card .btn.ghost,
.control-formula-row .btn.ghost,
.summary-actions .btn.ghost{
  background:rgba(255,255,255,.06) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

.settings-system-editor .btn.ghost:hover,
.settings-content .btn.ghost:hover,
.settlement-rule-card .btn.ghost:hover,
.control-formula-row .btn.ghost:hover,
.summary-actions .btn.ghost:hover{
  background:rgba(255,255,255,.105) !important;
  color:#fff !important;
  border-color:var(--line2) !important;
}

/* ---------- Badge w ciemnym motywie ---------- */

.badge{
  background:rgba(255,255,255,.065);
  border:1px solid var(--line);
  color:#dce4ff;
}

.badge.success,
.badge.ok{
  color:#8ff0be !important;
  background:rgba(52,211,153,.12) !important;
  border-color:rgba(52,211,153,.24) !important;
}

.badge.warning{
  color:#ffd772 !important;
  background:rgba(251,191,36,.13) !important;
  border-color:rgba(251,191,36,.25) !important;
}

.badge.danger{
  color:#ffb7bd !important;
  background:rgba(255,107,107,.14) !important;
  border-color:rgba(255,107,107,.28) !important;
}

.badge.neutral{
  color:#cbd5e1 !important;
  background:rgba(148,163,184,.10) !important;
  border-color:rgba(148,163,184,.20) !important;
}

/* ---------- Check / choice cards ---------- */

.settings-checks label,
.check-card{
  background:rgba(255,255,255,.055) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}

.settings-checks label span,
.check-card span{
  color:var(--muted2) !important;
}

.switch-line{
  color:var(--text) !important;
}

/* ---------- Tabele w jasnych sekcjach ---------- */

.settings-system-editor .table-wrap,
.settings-content .table-wrap{
  background:rgba(0,0,0,.10);
  border:1px solid var(--line);
}

.settings-system-editor th,
.settings-content th{
  color:var(--muted);
  background:rgba(0,0,0,.16);
}

.settings-system-editor td,
.settings-content td{
  color:var(--text);
}

/* ---------- Empty state ---------- */

.empty-state{
  background:rgba(255,255,255,.035);
  border:1px dashed var(--line2);
  color:var(--muted);
}

/* ---------- Module tabs ---------- */

.module-tabs{
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
}

.module-tab{
  color:var(--muted2);
}

.module-tab:hover{
  background:rgba(255,255,255,.075);
  color:#fff;
}

.module-tab.active{
  background:linear-gradient(135deg,var(--brand),#6d5dfc 48%,#22c7a7);
  color:#fff;
}

/* ---------- Usuwa konflikt: jasne poprawki z końca pliku ---------- */

.settings-system-editor .settlement-rule-card .badge{
  color:inherit;
}

.settings-system-editor .settlement-rule-card span,
.settings-system-editor .settlement-rule-card label,
.settings-system-editor .settlement-rule-card p{
  color:inherit;
}
/* Settlement rules tabs */

.settlement-rules-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 22px;
  padding: 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}

.settlement-rules-tab {
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.settlement-rules-tab:hover {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.settlement-rules-tab.active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.settlement-rules-tab.active:hover {
  background: #020617;
  color: #ffffff;
  border-color: #020617;
}

@media (max-width: 720px) {
  .settlement-rules-tabs {
    flex-direction: column;
  }

  .settlement-rules-tab {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* =========================================================
   EKRAN LOGOWANIA

   Style logowania powstawaly warstwami i lezaly w SZESCIU
   osobnych miejscach pliku, rozdzielone stylami paska gornego.
   Zebrane w jedno miejsce 2026-08-28 - kolejnosc miedzy nimi
   zachowana co do znaku, wiec wyglad sie nie zmienil.

   Warstwy ida od ogolu do wyjatku i KAZDA NASTEPNA NADPISUJE
   POPRZEDNIA. Zanim cokolwiek tu zmienisz, sprawdz, czy nizej
   nie ma mocniejszej reguly na to samo:

     1. PANEL AUTHENTICATION      podstawa: tlo, karta, pola, przyciski
     2. AUTH VIEW SEPARATION      oddzielenie ekranu logowania od panelu
     3. AUTH SIMPLE CENTERED      wysrodkowanie karty
     4. AUTH POSITION HARD RESET  najmocniejsza warstwa. Uzywa selektora
                                  "html body.auth-visible #authScreen"
                                  i !important, wiec wygrywa z wszystkim
                                  powyzej
     5. PASSWORD RESET HELP       formularz zmiany hasla
     6. PASSWORD RESET FORM       poprawki do formularza zmiany hasla

   Warstwy 2 i 3 sa w duzej czesci martwe - warstwa 4 nadpisuje
   te same wlasciwosci mocniejszym selektorem. NIE usuwamy ich
   bez sprawdzenia w przegladarce: to jedyna droga do panelu,
   wiec zla zmiana tutaj oznacza, ze nikt sie nie zaloguje.
========================================================= */

[hidden]{
  display:none!important;
}


.auth-screen{
  place-items:center;
}

.auth-screen:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );
  background-size:64px 64px;
  opacity:.34;
}

.auth-background-orb{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:999px;
  filter:blur(70px);
  opacity:.22;
  pointer-events:none;
}

.auth-background-orb-one{
  left:-90px;
  top:-80px;
  background:var(--brand);
}

.auth-background-orb-two{
  right:-80px;
  bottom:-110px;
  background:var(--brand2);
}

.auth-card{
  z-index:1;
  backdrop-filter:blur(24px);
}


.auth-heading{
  margin-bottom:24px;
}


.auth-heading h1{
  font-size:31px;
  line-height:1.05;
  letter-spacing:-.045em;
}


.auth-screen[data-view="login"] .auth-form{
  display:block;
}

.auth-loading{
  display:none;
  flex-direction:column;
  text-align:center;
  gap:10px;
}

.auth-screen[data-view="loading"] .auth-loading{
  display:flex;
}


.auth-spinner{
  width:42px;
  height:42px;
  margin-bottom:10px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--brand2);
  animation:auth-spin .8s linear infinite;
}

@keyframes auth-spin{
  to{
    transform:rotate(360deg);
  }
}

.auth-field{
  gap:8px;
  margin-bottom:15px;
}

.auth-field span{
  color:var(--muted2);
  font-size:12px;
  font-weight:750;
}

.auth-field input{
  min-height:50px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  outline:0;
  color:var(--text);
  background:rgba(255,255,255,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.auth-field input:focus{
  border-color:rgba(139,92,246,.72);
  background:rgba(255,255,255,.09);
  box-shadow:
    0 0 0 4px rgba(139,92,246,.13),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-field input::placeholder{
  color:rgba(183,192,217,.5);
}

.auth-field input:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.auth-message{
  display:none;
  margin:5px 0 15px;
  padding:11px 12px;
  border:1px solid transparent;
  border-radius:14px;
  font-size:13px;
  line-height:1.45;
}

.auth-message.show{
  display:block;
}

.auth-message.error{
  color:#ffd0d4;
  border-color:rgba(255,107,107,.24);
  background:rgba(255,107,107,.12);
}

.auth-message.success{
  color:#aef2d1;
  border-color:rgba(52,211,153,.24);
  background:rgba(52,211,153,.11);
}

/*
  Komunikat "trwa wybudzanie bazy". Celowo NIE jest czerwony -
  to nie awaria, tylko czekanie. Czerwony kolor kazalby myslec,
  ze cos sie zepsulo.
*/
.auth-message.info{
  color:#cfe3ff;
  border-color:rgba(96,165,250,.26);
  background:rgba(96,165,250,.12);
}

.auth-submit{
  min-height:49px;
  margin-top:2px;
}

.auth-submit:disabled{
  cursor:not-allowed;
  opacity:.68;
  transform:none!important;
}

.auth-security-note{
  margin:17px 0 0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.5;
  text-align:center;
}

@media(max-width:720px){
  /* Wezszy ekran. Rozdzielone 2026-08-28 od regul paska gornego,
     ktore siedzialy w tym samym bloku @media. Dwa sasiadujace bloki
     z tym samym zapytaniem dzialaja tak samo jak jeden. */


  .auth-heading h1{
    font-size:27px;
  }
}


/* =========================================================
   AUTH VIEW SEPARATION
========================================================= */


body:not(.auth-visible) .auth-screen{
  display:none!important;
}


.auth-screen:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(139,92,246,.24),
      transparent 34%
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(33,212,163,.16),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      var(--bg) 0%,
      #101426 52%,
      var(--bg) 100%
    );
  opacity:1;
}

.auth-screen .auth-background-orb{
  display:none;
}

.auth-card{
  z-index:1;
}


.auth-heading{
  margin-bottom:24px;
}

.auth-heading h1{
  margin-bottom:10px;
}


.auth-submit{
  margin-top:4px;
}

.auth-security-note{
  max-width:340px;
  margin:18px auto 0;
}


@media(max-width:520px){
  .auth-heading h1{
    font-size:26px;
  }
}

/* =========================================================
   AUTH SIMPLE CENTERED LAYOUT
========================================================= */

.auth-screen{
  grid-template-columns:minmax(0,1fr);
  place-items:center!important;
  align-content:center!important;
}

.auth-card{
  justify-self:center;
  align-self:center;
}


.auth-heading h1{
  font-size:28px;
  line-height:1.1;
}


.auth-field{
  gap:8px;
}


.auth-security-note{
  display:none;
}

/* =========================================================
   AUTH POSITION HARD RESET
========================================================= */

html body.auth-visible{
  margin:0!important;
  width:100%!important;
  min-width:100%!important;
  min-height:100vh!important;
  overflow:hidden!important;
}

html body.auth-visible .app-shell{
  display:none!important;
  visibility:hidden!important;
}

html body.auth-visible #authScreen.auth-screen{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  inset:0!important;

  z-index:99999!important;

  width:100vw!important;
  max-width:none!important;
  height:100vh!important;
  min-height:100vh!important;

  margin:0!important;
  padding:20px!important;

  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;

  transform:none!important;
  float:none!important;

  overflow:auto!important;

  background:var(--bg)!important;
}

html body.auth-visible #authScreen.auth-screen .auth-card{
  position:relative!important;

  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  display:block!important;
  float:none!important;

  width:390px!important;
  max-width:calc(100vw - 40px)!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;

  margin:auto!important;
  padding:30px!important;

  transform:none!important;

  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:24px!important;

  background:var(--panel)!important;

  box-shadow:
    0 28px 90px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.05)!important;
}

html body.auth-visible #authScreen .auth-form{
  position:static!important;
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}

html body.auth-visible #authScreen[data-view="loading"] .auth-form{
  display:none!important;
}

html body.auth-visible #authScreen[data-view="login"] .auth-loading{
  display:none!important;
}

html body.auth-visible #authScreen .auth-heading{
  display:block!important;
  width:100%!important;
  margin:0 0 24px!important;
  padding:0!important;
  text-align:center!important;
}

html body.auth-visible #authScreen .auth-heading h1{
  display:block!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
}

html body.auth-visible #authScreen .auth-field{
  position:static!important;
  display:block!important;
  width:100%!important;
  margin:0 0 15px!important;
  padding:0!important;
  float:none!important;
}

html body.auth-visible #authScreen .auth-field span{
  display:block!important;
  margin:0 0 8px!important;
}

html body.auth-visible #authScreen .auth-field input{
  position:static!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  float:none!important;
  transform:none!important;
}

html body.auth-visible #authScreen #authSubmitButton{
  position:static!important;
  display:flex!important;
  width:100%!important;
  margin:4px 0 0!important;
  float:none!important;
  transform:none!important;
}

html body.auth-visible #authScreen .auth-loading{
  position:static!important;
  width:100%!important;
  min-height:120px!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
}

@media(max-width:520px){
  html body.auth-visible #authScreen.auth-screen{
    padding:14px!important;
  }

  html body.auth-visible #authScreen.auth-screen .auth-card{
    width:100%!important;
    max-width:390px!important;
    padding:24px 20px!important;
  }
}

/* =========================================================
   TEMPORARY PASSWORD RESET HELP
========================================================= */

.auth-forgot-button{
  display:block;
  width:100%;
  margin:15px 0 0;
  padding:4px;
  border:0;
  color:var(--muted2);
  background:transparent;
  cursor:pointer;
  font-size:13px;
  text-align:center;
}

.auth-forgot-button:hover{
  color:#fff;
  text-decoration:underline;
}

.auth-password-reset-help{
  width:100%;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.045);
  text-align:center;
}

.auth-password-reset-help strong{
  display:block;
  margin-bottom:10px;
  font-size:17px;
}

.auth-password-reset-help p{
  margin:0 0 10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.auth-reset-back{
  width:100%;
  margin-top:7px;
}

/* =========================================================
   PASSWORD RESET FORM
========================================================= */

.auth-password-reset-help{
  max-height:min(620px,calc(100vh - 100px));
  overflow-y:auto;
  text-align:left;
}

.auth-password-reset-help > strong{
  margin-bottom:18px;
  text-align:center;
}

.auth-password-reset-help .auth-field{
  margin-bottom:13px!important;
}

.auth-password-reset-help .auth-submit{
  margin-top:6px!important;
}

.auth-password-reset-help .auth-reset-back{
  margin-top:10px;
}


/* =========================================================
   PASEK GORNY PANELU
========================================================= */

.topbar-user{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:11px;
}

.topbar-user-copy{
  display:grid;
  justify-items:end;
  gap:2px;
}

.topbar-user-copy strong{
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

.topbar-user-copy span{
  color:var(--muted);
  font-size:11px;
}

/* =========================================================
   ALARM AWARII W NAGŁÓWKU
   =========================================================

   Dopisane 2026-10-02. Zapala się, gdy w ostatniej godzinie coś się nie
   udało, i prowadzi do Przeglądu w narzędziach technicznych.

   Czerwień bez migania: migający element w nagłówku widzi się cały
   dzień i po dniu przestaje się go widzieć zupełnie.
========================================================= */

.alarm-awarii{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(239,68,68,.14);
  border:1px solid rgba(239,68,68,.45);
  color:#fca5a5;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}

.alarm-awarii:hover{
  background:rgba(239,68,68,.22);
}

.alarm-awarii-kropka{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ef4444;
}

.topbar-user-avatar{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.95),
      rgba(33,212,163,.72)
    );
  color:#fff;
  font-size:12px;
  font-weight:900;
  box-shadow:
    0 9px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.topbar-logout{
  min-height:40px;
  padding:9px 12px;
  font-size:12px;
}

@media(max-width:720px){
  .topbar-user-copy{
    display:none;
  }

  .topbar-user{
    gap:8px;
  }

  .topbar-logout{
    padding:9px 10px;
  }
}
/* =========================================================
   DRIVERS IMPORT / EXPORT
========================================================= */

.drivers-list-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
}

.drivers-import-summary{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.drivers-import-errors{
  max-height:360px;
  overflow:auto;
  margin-bottom:18px;
}

@media(max-width:760px){
  .drivers-list-actions{
    width:100%;
    justify-content:flex-start;
  }

  .drivers-list-actions .btn{
    flex:1 1 150px;
  }

  .drivers-import-summary{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   DRIVER 360 NOTES
========================================================= */

.driver-notes-composer{
  width:100%;
}

.driver-notes-composer h3,
.driver-notes-list h3{
  margin:0 0 12px;
  font-size:18px;
  letter-spacing:-.025em;
}

.driver-notes-composer textarea{
  display:block;
  width:100%;
  min-height:130px;
  resize:vertical;
}

.driver-notes-composer-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

.driver-notes-list{
  margin-top:22px;
}

.driver-notes-list > .card:first-of-type{
  margin-top:0!important;
}

@media(max-width:720px){
  .driver-notes-composer-actions .btn{
    width:100%;
  }
}

.driver-note-card-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
}

.driver-note-card-content{
  min-width:0;
  width:100%;
  margin:0;
  padding:0;
}

.driver-note-card-text{
  width:100%;
  margin:0 0 6px;
  padding:0;
  white-space:pre-wrap;
  text-align:left;
}

@media(max-width:720px){
  .driver-note-card-layout{
    grid-template-columns:1fr;
  }

  .driver-note-card-layout .btn{
    justify-self:start;
  }
}

.driver-note-card{
  padding:
    20px
    20px
    20px
    0!important;
}

@media(max-width:720px){
  .driver-note-card{
    padding:
      16px
      16px
      16px
      0!important;
  }
}

/* Treść notatki od lewej, autor i data w standardowym wcięciu */

.driver-note-card{
  padding:20px!important;
}

.driver-note-card-text{
  width:calc(100% + 20px);
  margin:
    0
    0
    6px
    -20px;
  padding:0;
  white-space:pre-line;
  text-align:left;
}

@media(max-width:720px){
  .driver-note-card{
    padding:16px!important;
  }

  .driver-note-card-text{
    width:calc(100% + 16px);
    margin-left:-16px;
  }
}

/* Treść notatki, autor i data w jednej linii wcięcia */

.driver-note-card-text{
  width:100%;
  margin:0 0 6px;
  padding:0;
  white-space:pre-line;
  text-align:left;
}

@media(max-width:720px){
  .driver-note-card-text{
    width:100%;
    margin:0 0 6px;
  }
}


/* ---------- Fleet schedule ---------- */

.fleet-schedule-kpis
.fleet-schedule-soon{
  border-color:rgba(250,204,21,.32);
}

.fleet-schedule-kpis
.fleet-schedule-soon strong{
  color:#fde68a;
}

.fleet-schedule-toolbar{
  overflow:visible;
}

.fleet-schedule-filters{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto minmax(210px,.55fr) minmax(190px,.45fr) auto;
  gap:10px;
  align-items:end;
  margin-top:16px;
}

.fleet-schedule-filters label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.fleet-schedule-filters label > span{
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}

.fleet-schedule-search-field .searchbox{
  max-width:none;
}

.fleet-schedule-table td{
  transition:background .18s ease;
}

.fleet-schedule-row.is-danger td:first-child{
  box-shadow:inset 4px 0 0 var(--danger);
}

.fleet-schedule-row.is-warning td:first-child{
  box-shadow:inset 4px 0 0 var(--warn);
}

.fleet-schedule-row.is-soon td:first-child{
  box-shadow:inset 4px 0 0 #facc15;
}

.fleet-schedule-row.is-success td:first-child{
  box-shadow:inset 4px 0 0 var(--ok);
}

.fleet-schedule-row.is-neutral td:first-child{
  box-shadow:inset 4px 0 0 rgba(148,163,184,.65);
}

.fleet-schedule-badge.is-danger{
  background:rgba(255,107,107,.15);
  border-color:rgba(255,107,107,.3);
  color:#ffd0d4;
}

.fleet-schedule-badge.is-warning{
  background:rgba(251,191,36,.15);
  border-color:rgba(251,191,36,.3);
  color:#fde68a;
}

.fleet-schedule-badge.is-soon{
  background:rgba(250,204,21,.12);
  border-color:rgba(250,204,21,.28);
  color:#fef08a;
}

.fleet-schedule-badge.is-success{
  background:rgba(52,211,153,.14);
  border-color:rgba(52,211,153,.28);
  color:#a7f3d0;
}

.fleet-schedule-badge.is-neutral{
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.24);
  color:#cbd5e1;
}

.fleet-schedule-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width:1100px){
  .fleet-schedule-filters{
    grid-template-columns:1fr 1fr;
  }

  .fleet-schedule-search-field{
    grid-column:1 / -1;
  }
}

@media (max-width:680px){
  .fleet-schedule-filters{
    grid-template-columns:1fr;
  }

  .fleet-schedule-search-field{
    grid-column:auto;
  }

  .fleet-schedule-filters > .btn{
    width:100%;
  }
}


/* =========================================================
   FLEET DAMAGE CASE UI
========================================================= */

.fleet-damage-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.fleet-damage-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(255,107,107,.20),
      transparent 36%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(139,92,246,.18),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.085),
      rgba(255,255,255,.028)
    );
  box-shadow:var(--shadow);
}

.fleet-damage-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.07),
      transparent 34%
    );
}

.fleet-damage-hero-main,
.fleet-damage-hero-side{
  position:relative;
  z-index:1;
}

.fleet-damage-hero-main{
  display:flex;
  align-items:flex-start;
  gap:17px;
  min-width:0;
}

.fleet-damage-hero-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:56px;
  height:56px;
  border:1px solid rgba(255,107,107,.30);
  border-radius:19px;
  background:
    linear-gradient(
      135deg,
      rgba(255,107,107,.25),
      rgba(139,92,246,.16)
    );
  box-shadow:
    0 16px 36px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.15);
  color:#ffd0d4;
  font-size:25px;
  font-weight:950;
}

.fleet-damage-hero-copy{
  min-width:0;
}

.fleet-damage-eyebrow{
  margin-bottom:7px;
  color:#ffb7bd;
  font-size:11px;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
}

.fleet-damage-hero h1{
  margin:0;
  max-width:850px;
  color:#fff;
  font-size:clamp(26px,3vw,38px);
  line-height:1.05;
  letter-spacing:-.05em;
  overflow-wrap:anywhere;
}

.fleet-damage-hero-meta{
  display:flex;
  align-items:center;
  gap:7px 16px;
  flex-wrap:wrap;
  margin-top:12px;
}

.fleet-damage-hero-meta span{
  position:relative;
  color:var(--muted2);
  font-size:13px;
  line-height:1.4;
}

.fleet-damage-hero-meta span:not(:last-child):after{
  content:"";
  position:absolute;
  top:50%;
  right:-9px;
  width:3px;
  height:3px;
  border-radius:99px;
  background:rgba(255,255,255,.32);
  transform:translateY(-50%);
}

.fleet-damage-hero-meta .is-warning{
  color:#fde68a;
}

.fleet-damage-hero-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
  min-width:240px;
}

.fleet-damage-statuses{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}

.fleet-damage-progress{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  padding:5px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.035);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

.fleet-damage-progress-step{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:54px;
  padding:10px 13px;
  color:var(--muted);
}

.fleet-damage-progress-step:not(:last-child):after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:1px;
  height:24px;
  background:var(--line);
  transform:translateY(-50%);
}

.fleet-damage-progress-number{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1px solid var(--line2);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#cbd5e1;
  font-size:11px;
  font-weight:950;
}

.fleet-damage-progress-label{
  font-size:11.5px;
  font-weight:850;
  letter-spacing:.01em;
}

.fleet-damage-progress-step.is-complete{
  color:#a7f3d0;
}

.fleet-damage-progress-step.is-complete
.fleet-damage-progress-number{
  border-color:rgba(52,211,153,.30);
  background:rgba(52,211,153,.15);
  color:#8ff0be;
  box-shadow:0 0 20px rgba(52,211,153,.13);
}

.fleet-damage-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(7,9,19,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 30px rgba(0,0,0,.12);
}

.fleet-damage-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:15px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font:inherit;
  font-size:12.5px;
  font-weight:800;
  transition:
    color .17s ease,
    background .17s ease,
    border-color .17s ease,
    transform .17s ease,
    box-shadow .17s ease;
}

.fleet-damage-tab:hover{
  color:#fff;
  background:rgba(255,255,255,.055);
}

.fleet-damage-tab.is-active{
  border-color:rgba(139,92,246,.30);
  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.22),
      rgba(33,212,163,.10)
    );
  color:#fff;
  box-shadow:
    0 10px 24px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.fleet-damage-tab-icon{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:9px;
  background:rgba(255,255,255,.065);
  color:#aeb9d6;
  font-size:9px;
  font-weight:950;
  letter-spacing:.05em;
}

.fleet-damage-tab.is-active
.fleet-damage-tab-icon{
  background:rgba(255,255,255,.13);
  color:#fff;
}

.fleet-damage-content{
  animation:fade .2s ease both;
}

.fleet-damage-section{
  overflow:visible;
  padding:22px;
}

.fleet-damage-section-header{
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.fleet-damage-section-header h2{
  font-size:22px;
}

.fleet-damage-form{
  margin-top:18px;
}

.fleet-damage-form-grid{
  gap:16px;
}

.fleet-damage-form-grid > label{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:17px;
  background:rgba(255,255,255,.025);
}

.fleet-damage-form-grid > label.full{
  grid-column:1 / -1;
}

.fleet-damage-form-grid > label > span{
  color:#aeb9d6;
  font-size:11px;
  font-weight:850;
  letter-spacing:.065em;
  text-transform:uppercase;
}

.fleet-damage-form-grid
> label.full
> span:has(input[type="checkbox"]),
.fleet-damage-form-grid
> label.full
> span:has(input[type="radio"]){
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#e7ecfb;
  font-size:12.5px;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
}

.fleet-damage-form-grid
> label.full:has(input[type="checkbox"]),
.fleet-damage-form-grid
> label.full:has(input[type="radio"]){
  padding:15px 16px;
  border-color:rgba(139,92,246,.18);
  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.085),
      rgba(33,212,163,.035)
    );
}

.fleet-damage-form-grid
> label.full:has(input[type="checkbox"]:checked){
  border-color:rgba(52,211,153,.28);
  background:
    linear-gradient(
      135deg,
      rgba(52,211,153,.11),
      rgba(33,212,163,.045)
    );
}

.fleet-damage-form-grid
> label.full
input[type="checkbox"]:focus-visible,
.fleet-damage-form-grid
> label.full
input[type="radio"]:focus-visible{
  outline:2px solid rgba(139,92,246,.72);
  outline-offset:3px;
}

.fleet-damage-form-grid input:not([type="checkbox"]):not([type="radio"]),
.fleet-damage-form-grid select,
.fleet-damage-form-grid textarea{
  width:100%;
}

.fleet-damage-form-grid input[type="checkbox"],
.fleet-damage-form-grid input[type="radio"]{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:1px 0 0;
  accent-color:var(--brand);
  cursor:pointer;
}

.fleet-damage-form-grid input[readonly]{
  border-color:rgba(96,165,250,.20);
  background:rgba(96,165,250,.075);
  color:#b8d8ff;
  font-weight:850;
}

.fleet-damage-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.fleet-damage-kpi-grid .kpi{
  min-height:125px;
}

.fleet-damage-kpi-grid .kpi:nth-child(1){
  border-color:rgba(255,107,107,.20);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,107,107,.18),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      rgba(255,107,107,.075),
      rgba(255,255,255,.025)
    );
}

.fleet-damage-kpi-grid .kpi:nth-child(2){
  border-color:rgba(96,165,250,.20);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(96,165,250,.18),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      rgba(96,165,250,.075),
      rgba(255,255,255,.025)
    );
}

.fleet-damage-kpi-grid .kpi:nth-child(3){
  border-color:rgba(251,191,36,.20);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(251,191,36,.17),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      rgba(251,191,36,.07),
      rgba(255,255,255,.025)
    );
}

.fleet-damage-kpi-grid .kpi:nth-child(4){
  border-color:rgba(52,211,153,.21);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(52,211,153,.18),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      rgba(52,211,153,.075),
      rgba(255,255,255,.025)
    );
}

.fleet-damage-file-list{
  display:grid;
  grid-template-columns:repeat(
    2,
    minmax(0,1fr)
  );
  gap:12px;
  margin-top:18px;
}

.fleet-damage-file-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  padding:15px;
  border:1px solid var(--line);
  border-radius:19px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.058),
      rgba(255,255,255,.025)
    );
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.fleet-damage-file-card:hover{
  transform:translateY(-1px);
  border-color:var(--line2);
  background:rgba(255,255,255,.065);
}

.fleet-damage-file-main{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

.fleet-damage-file-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(139,92,246,.24);
  border-radius:14px;
  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.20),
      rgba(96,165,250,.10)
    );
  color:#d8ccff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.07em;
}

.fleet-damage-file-content{
  min-width:0;
}

.fleet-damage-file-name{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:14px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.fleet-damage-file-meta{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.fleet-damage-file-description{
  margin:7px 0 0;
  color:var(--muted2);
  font-size:12px;
  line-height:1.4;
}

.fleet-damage-file-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.fleet-damage-file-actions .btn{
  min-height:36px;
  padding:8px 10px;
  font-size:11px;
}

.fleet-damage-settlement-panel{
  border-color:rgba(52,211,153,.18);
}

.fleet-damage-settlement-panel
.form-actions{
  padding-top:18px;
  border-top:1px solid var(--line);
}

.fleet-damage-settlement-panel
.form-actions
.btn.primary{
  min-height:48px;
  padding-inline:20px;
}

.fleet-damage-history-panel
.timeline-item{
  padding:16px 16px 16px 46px;
}

@media(max-width:1180px){
  .fleet-damage-kpi-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .fleet-damage-progress{
    grid-template-columns:
      repeat(5,minmax(145px,1fr));
    overflow-x:auto;
  }

  .fleet-damage-tabs{
    grid-template-columns:
      repeat(5,minmax(145px,1fr));
    overflow-x:auto;
  }
}

@media(max-width:840px){
  .fleet-damage-hero{
    flex-direction:column;
    padding:20px;
  }

  .fleet-damage-hero-side{
    align-items:flex-start;
    min-width:0;
    width:100%;
  }

  .fleet-damage-statuses{
    justify-content:flex-start;
  }

  .fleet-damage-file-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:680px){
  .fleet-damage-hero-main{
    flex-direction:column;
  }

  .fleet-damage-hero h1{
    font-size:27px;
  }

  .fleet-damage-progress{
    display:flex;
    overflow-x:auto;
  }

  .fleet-damage-progress-step{
    flex:0 0 160px;
  }

  .fleet-damage-tabs{
    display:flex;
    overflow-x:auto;
  }

  .fleet-damage-tab{
    flex:0 0 auto;
    min-width:145px;
  }

  .fleet-damage-kpi-grid{
    grid-template-columns:1fr;
  }

  .fleet-damage-section{
    padding:16px;
  }

  .fleet-damage-form-grid{
    grid-template-columns:1fr;
  }

  .fleet-damage-form-grid > label,
  .fleet-damage-form-grid > label.full{
    grid-column:auto;
  }

  .fleet-damage-file-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .fleet-damage-file-actions{
    justify-content:flex-start;
    width:100%;
  }

  .fleet-damage-file-actions .btn{
    flex:1;
  }

  .fleet-damage-back-button{
    width:100%;
  }
}

/* Modal transakcji dodatkowych inwestora */
.modal.investor-extra-modal{
  max-width:1020px;
  width:96vw;
}




/* PartnerHub360 - logo w sidebarze */
.brand-logo{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
}
.brand-logo svg{
  display:block;
  width:100%;
  max-width:186px;
  height:auto;
}

/* zwiniete menu - sam znak */
body.sidebar-collapsed .brand-logo svg{
  max-width:38px;
  overflow:hidden;
}
body.sidebar-collapsed .brand-logo svg text{
  display:none;
}


/* PartnerHub360 - podgrupy w menu

   WYROWNANIE (poprawka 2026-09-21)

   W Ustawieniach pozycje "Rozliczenia" i "Inwestorzy" sa podgrupami,
   a reszta ("Firmy / spolki", "Statusy kierowcow"...) to zwykle
   pozycje. Podgrupy mialy tu wciecie 26px, a zwykle pozycje maja 12px
   (.nav-subitem) - wygladalo to, jakby dwie z nich byly przesuniete
   w prawo bez powodu.

   Teraz wszystkie pozycje jednego poziomu zaczynaja sie w tym samym
   miejscu. Za pokazanie zagniezdzenia odpowiada samo .nav-submenu:
   dokłada 14px marginesu, 10px wypelnienia i pionowa kreske. Kazdy
   poziom w gląb to te same 24px - wciecie na przycisku robiloby to
   drugi raz. */
.nav-submenu .nav-group-nested{
  margin-left:0;
}
.nav-submenu .nav-group-nested > .nav-group-toggle{
  padding-left:12px;
  font-size:13px;
}
.nav-submenu .nav-group-nested .nav-submenu .nav-subitem{
  padding-left:12px;
}


/* PartnerHub360 - podgrupy zwijaja sie niezaleznie od rodzica */
.nav-submenu .nav-group > .nav-submenu{
  display:none !important;
  max-height:0 !important;
  overflow:hidden !important;
}
.nav-submenu .nav-group.open > .nav-submenu{
  display:flex !important;
  max-height:none !important;
  overflow:visible !important;
}

/* =========================================================
   BRAKUJACE KLASY

   Klasy uzywane w HTML, ktore nie mialy ZADNEJ definicji -
   ani tutaj, ani w stylach wstrzykiwanych z JS. Przegladarka
   je ignorowala, wiec elementy wygladaly jak zwykly tekst
   albo jak domyslny przycisk.

   To nie jest kolejna warstwa poprawek na wierzchu. Zadna
   z tych klas nie istniala wczesniej, wiec nic nie nadpisuja
   i kolejnosc w pliku nie ma dla nich znaczenia.
========================================================= */

/* ---------- Przycisk drugiego poziomu ----------
   Uzywany 26 razy w 16 plikach ("Duplikuj", "Edytuj", "Podglad")
   i renderowal sie identycznie jak zwykly przycisk. Ma byc
   miedzy .primary a .ghost: widoczny, ale nie krzyczacy.
*/
.btn.secondary,
.secondary{
  background:rgba(139,92,246,.14);
  border-color:rgba(139,92,246,.30);
  color:#e6dcff;
  font-weight:800;
}

.btn.secondary:hover,
.secondary:hover{
  background:rgba(139,92,246,.22);
  border-color:rgba(139,92,246,.44);
}

/* ---------- Ramki informacyjne ----------
   Bez definicji byly zwyklym akapitem bez tla i bez odstepu.
*/
.status-info-box,
.status-success-box{
  border-radius:var(--radius2);
  padding:13px 15px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:var(--text);
  margin:10px 0;
}

.status-info-box strong,
.status-success-box strong{
  display:block;
  margin-bottom:6px;
  color:#fff;
}

.status-info-box p,
.status-success-box p{
  margin:0;
  color:var(--muted2);
}

.status-success-box{
  background:rgba(52,211,153,.10);
  border-color:rgba(52,211,153,.25);
}

/* ---------- Siatki kart ----------
   Klasy ukladu, ktore nie ustawialy zadnego ukladu -
   karty ustawialy sie jedna pod druga zamiast obok siebie.
*/
.stats-grid,
.cards-grid{
  display:grid;
  gap:15px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:18px;
}

.stat-card{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  padding:15px 16px;
}

.stat-card strong,
.stat-card b{
  display:block;
  font-size:22px;
  font-weight:850;
  color:#fff;
  margin-top:4px;
}

.stat-card span,
.stat-card small{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
}

/* ---------- Drobiazgi ---------- */

.checkbox-line{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 0;
  cursor:pointer;
}

.checkbox-line input{
  width:auto;
  margin:0;
  flex:0 0 auto;
}

.link-btn{
  background:none;
  border:0;
  padding:0;
  color:var(--brand3);
  font-weight:800;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}

.link-btn:hover{
  color:#fff;
}

/* ---------- Elementy bez zadnego stylu ----------
   Kazdy z nich stal samodzielnie, bez zadnej klasy pomocniczej
   obok. Bez definicji przegladarka rysowala je swoim domyslnym
   wygladem - jasny przycisk systemowy na ciemnym tle albo
   pola ustawione jedno pod drugim zamiast w rzedzie.
*/

.seizures-alert-link{
  background:none;
  border:0;
  padding:0;
  color:var(--brand3);
  font-weight:800;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}

.seizures-alert-link:hover{
  color:#fff;
}

.seizures-alert-danger{
  color:#ffafb5;
  font-weight:800;
}

.recurring-filter-actions,
.retention-filter-actions,
.seizures-transfer-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.fleet-task-search-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
  flex:1 1 220px;
}

.settings-system-main{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}

/* =========================================================
   NATYWNE KONTROLKI PRZEGLADARKI

   Elementy, ktorych przegladarka nie rysuje wedlug CSS panelu,
   tylko wedlug wlasnego motywu systemowego. Na ciemnym tle
   wygladaly jak wklejone z innego programu.

   Ile ich jest w panelu:
     input type="number"   - 105 uzyc
     input type="checkbox" -  66
     input type="date"     -  30
     input type="file"     -  15
     <hr>                  -   8
     input type="time"     -   2
     input type="search"   -   2
     input type="radio"    -   2

   Czesc z tego zalatwia `color-scheme:dark` na :root (patrz gora
   pliku). Reszta wymaga jawnego stylu i jest ponizej.
========================================================= */

/* ---------- Wybor pliku ----------
   Najbardziej rzucal sie w oczy: szary systemowy przycisk
   "Choose File" na ciemnym tle, przy kazdym imporcie CSV,
   zdjeciu protokolu i dokumencie auta.
*/
input[type="file"]{
  padding:9px 11px;
  cursor:pointer;
  color:var(--muted2);
}

input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:8px 14px;
  border-radius:11px;
  border:1px solid rgba(139,92,246,.30);
  background:rgba(139,92,246,.14);
  color:#e6dcff;
  font-weight:800;
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}

input[type="file"]::file-selector-button:hover{
  background:rgba(139,92,246,.22);
  border-color:rgba(139,92,246,.44);
}

/* ---------- Data i godzina ----------
   Ikona kalendarza jest rysowana przez przegladarke i domyslnie
   jest czarna — na ciemnym polu praktycznie niewidoczna.
   `color-scheme:dark` rozjasnia ja, a to dokłada kontrast
   i powiekszony obszar klikniecia.
*/
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.55);
  cursor:pointer;
  padding:2px;
  border-radius:6px;
  transition:opacity .16s ease,background .16s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover{
  filter:invert(1) opacity(1);
  background:rgba(255,255,255,.10);
}

/* ---------- Liczby ----------
   Strzalki w gore/dol sa najczestszym zrodlem pomylki: latwo
   je trafic przy przewijaniu i zmienic kwote, nie zauwazajac.
   Chowamy je i zostawiamy samo pole — kwoty i tak wpisuje sie
   z klawiatury.
*/
input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

/* ---------- Pole wyszukiwania ---------- */

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  cursor:pointer;
  background:rgba(255,255,255,.22);
  border-radius:50%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat;
}

input[type="search"]::-webkit-search-cancel-button:hover{
  background:rgba(255,255,255,.45);
}

/* ---------- Pola wyboru ----------
   `accent-color` bylo ustawione tylko w jednym miejscu (formularz
   szkody). W reszcie panelu — 66 pol wyboru — zostawal domyslny
   systemowy niebieski, ktory nie pasuje do fioletu panelu.
*/
input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--brand);
  width:17px;
  height:17px;
  cursor:pointer;
  flex:0 0 auto;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled{
  cursor:not-allowed;
  opacity:.45;
}

/* ---------- Linia oddzielajaca ----------
   Domyslny <hr> to wytloczona szara kreska z czasow, gdy strony
   byly szare. Na ciemnym tle wyglada jak rysa.
*/
hr{
  border:0;
  height:1px;
  background:var(--line);
  margin:18px 0;
}

/* ---------- Sekcja rozwijana ---------- */

details{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.035);
  padding:12px 15px;
  margin:10px 0;
}

details > summary{
  cursor:pointer;
  font-weight:800;
  color:#fff;
  list-style:none;
  display:flex;
  align-items:center;
  gap:9px;
}

details > summary::-webkit-details-marker{
  display:none;
}

details > summary:before{
  content:"▸";
  color:var(--muted);
  transition:transform .16s ease;
}

details[open] > summary:before{
  transform:rotate(90deg);
}

/* Wybor kolumn tabeli floty. Zwiniety domyslnie, zeby nie zabieral
   miejsca komus, kto go nie potrzebuje. */
.fleet-column-picker{
  margin:0 0 12px;
}

.fleet-column-picker > summary{
  font-size:13px;
  color:var(--muted);
  font-weight:750;
}

/* ---------- Paski przewijania ----------
   Ostylowany byl tylko pasek menu bocznego. Kazda inna przewijana
   tabela i kazde okno modalne mialy systemowy jasny pasek.
*/
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.13);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:padding-box;
}

*::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.24);
  background-clip:padding-box;
}

*::-webkit-scrollbar-corner{
  background:transparent;
}

/* ---------- Obramowanie przy obsludze klawiatura ----------
   Domyslny outline przegladarki to cienka niebieska albo czarna
   ramka — na ciemnym tle prawie niewidoczna. Bez niej nie da sie
   przejsc po formularzu Tabem i wiedziec, gdzie sie jest.
*/
:focus-visible{
  outline:2px solid rgba(139,92,246,.75);
  outline-offset:2px;
  border-radius:6px;
}

/*
  Mysz nie potrzebuje obramowania — pokazujemy je tylko przy
  obsludze klawiatura. Przegladarka rozroznia to sama.
*/
:focus:not(:focus-visible){
  outline:none;
}

/* ---------- Wylaczone pola ---------- */

input:disabled,
select:disabled,
textarea:disabled,
.btn:disabled,
button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ---------- Automatyczne uzupelnianie ----------
   Chrome maluje pola uzupelnione zapamietanym haslem na jasnozolto,
   niezaleznie od CSS. Jedyny sposob to przykryc je wlasnym cieniem.
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--input-text);
  -webkit-box-shadow:0 0 0 1000px #1a2038 inset;
  caret-color:var(--input-text);
  transition:background-color 9999s ease-in-out 0s;
}


/* =========================================================
   APLIKACJA KIEROWCY - RAMKA TELEFONU

   Kierowca oglada to na telefonie. Podglad w panelu tez ma byc
   telefonem, zeby od razu bylo widac, co sie miesci, a co nie.

   Szerokosc 390 px to iPhone 14/15. Wysokosc 844 px to ten sam
   ekran - trzymamy proporcje, zeby przewijanie w podgladzie
   zachowywalo sie tak jak u kierowcy.
========================================================= */

.driver-app-stage{
  display:flex;
  justify-content:center;
  padding:20px 0 40px;
}

.driver-app-phone{
  position:relative;
  width:390px;
  max-width:100%;
  height:844px;
  max-height:80vh;

  border:12px solid #0b0f1c;
  border-radius:52px;

  background:var(--bg);

  box-shadow:
    0 40px 100px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.06);

  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Wciecie na gorze ekranu - to, co iPhone ma na kamere. */
.driver-app-notch{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:130px;
  height:26px;
  background:#0b0f1c;
  border-radius:0 0 18px 18px;
  z-index:5;
}

.driver-app-statusbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 22px 4px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  flex-shrink:0;
}

.driver-app-screen{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px 14px 14px;
}

.driver-app-screen::-webkit-scrollbar{
  width:0;
}

/* Dolny pasek zakladek. */
/* ---------- Kafelki startowe aplikacji kierowcy ---------- */

/*
  Dwie kolumny. Piaty kafelek zostaje sam w ostatnim rzedzie
  i rozciaga sie na cala szerokosc - inaczej wisialby po lewej
  z dziura obok.
*/
.driver-app-tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:14px;
}

.driver-app-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:12px 11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.driver-app-tile:hover{
  background:rgba(255,255,255,.07);
}

.driver-app-tile:nth-child(odd):last-child{
  grid-column:1 / -1;
}

.driver-app-tile-icon{
  font-size:20px;
  line-height:1.1;
  margin-bottom:3px;
}

.driver-app-tile strong{
  color:#fff;
  font-size:12.5px;
  font-weight:850;
}

.driver-app-tile small{
  color:var(--muted);
  font-size:10.5px;
  line-height:1.3;
}

/*
  Kropka przy sprawach - ten sam znak co na dolnym pasku.
*/
.driver-app-tile-dot{
  position:absolute;
  top:10px;
  right:10px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--danger, #e05c4b);
}

.driver-app-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  padding:8px 6px 14px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.03);
  flex-shrink:0;
}

.driver-app-tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:5px 2px;
  border:0;
  background:none;
  color:var(--muted);
  font:inherit;
  font-size:9.5px;
  font-weight:750;
  cursor:pointer;
  border-radius:12px;
  line-height:1.2;
  text-align:center;
}

.driver-app-tab span{
  font-size:19px;
  line-height:1;
}

.driver-app-tab.active{
  color:var(--acc,#3b9fe0);
  background:rgba(59,159,224,.12);
}

.driver-app-tab .driver-app-tab-dot{
  position:absolute;
  margin:-4px 0 0 14px;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff6b6b;
}

/* ---------- Kafelki wewnatrz telefonu ---------- */

.driver-app-hero{
  margin:10px 0 12px;
  padding:18px 16px;
  border-radius:20px;
  background:linear-gradient(160deg,rgba(59,159,224,.2),rgba(255,255,255,.03));
  border:1px solid rgba(59,159,224,.25);
  text-align:center;
}

.driver-app-hero span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:800;
}

.driver-app-hero strong{
  display:block;
  margin:6px 0 4px;
  font-size:32px;
  font-weight:950;
  letter-spacing:-.03em;
  color:#fff;
}

.driver-app-hero small{
  display:block;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.45;
}

.driver-app-card{
  margin-bottom:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.028);
}

.driver-app-card h3{
  margin:0 0 8px;
  font-size:13.5px;
  font-weight:850;
  color:#fff;
}

.driver-app-card p{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}

.driver-app-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:12.5px;
}

.driver-app-row:last-child{
  border-bottom:0;
}

.driver-app-row span{
  color:var(--muted);
}

.driver-app-row b{
  color:#fff;
  font-weight:800;
  white-space:nowrap;
}

.driver-app-row.total{
  margin-top:4px;
  padding-top:10px;
  border-top:1px solid var(--line);
  border-bottom:0;
  font-size:14px;
}

.driver-app-plus{ color:#21d4a3; }
.driver-app-minus{ color:#ff8f8f; }

.driver-app-btn{
  display:block;
  width:100%;
  margin-top:8px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font:inherit;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  text-align:center;
}

.driver-app-btn.primary{
  border-color:transparent;
  background:var(--acc,#3b9fe0);
}

.driver-app-btn.ghost{
  background:none;
  color:var(--muted);
  font-weight:750;
}

.driver-app-chip{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:850;
}

.driver-app-chip.ok{ background:rgba(33,212,163,.16); color:#21d4a3; }
.driver-app-chip.wait{ background:rgba(251,191,36,.16); color:#fbbf24; }
.driver-app-chip.bad{ background:rgba(255,107,107,.16); color:#ff8f8f; }
.driver-app-chip.info{ background:rgba(59,159,224,.16); color:#7fc4ee; }

.driver-app-empty{
  padding:26px 16px;
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55;
}

.driver-app-empty strong{
  display:block;
  margin-bottom:6px;
  color:#fff;
  font-size:13.5px;
}

.driver-app-back{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:6px 0 4px;
  padding:0;
  border:0;
  background:none;
  color:var(--acc,#3b9fe0);
  font:inherit;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
}

.driver-app-thread{
  margin-top:10px;
}

.driver-app-msg{
  margin-bottom:8px;
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  line-height:1.5;
}

.driver-app-msg.from-driver{
  background:rgba(59,159,224,.14);
  margin-left:22px;
}

.driver-app-msg.from-office{
  background:rgba(255,255,255,.05);
  margin-right:22px;
}

.driver-app-msg small{
  display:block;
  margin-top:5px;
  font-size:10px;
  color:var(--muted);
}

.driver-app-textarea{
  width:100%;
  min-height:84px;
  margin-top:8px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.2);
  color:#fff;
  font:inherit;
  font-size:12.5px;
  resize:vertical;
}

/* Panel Oskara nad telefonem - to NIE jest czesc aplikacji. */
.driver-app-controls{
  max-width:560px;
  margin:0 auto;
}

/* Znak systemu przewozowego w aplikacji kierowcy.
   Logo wgrane w Ustawieniach -> Systemy rozliczen, albo emoji. */
.driver-app-system-logo{
  width:20px;
  height:20px;
  object-fit:contain;
  border-radius:5px;
  flex-shrink:0;
}

.driver-app-system-icon{
  font-size:16px;
  line-height:1;
  flex-shrink:0;
}

/* =========================================================
   CENTRUM DOWODZENIA

   Pierwszy ekran po zalogowaniu. Do 2026-09-21 byl ekranem
   demo: kwoty wpisane w kod, plakietki, ktore nic nie liczyly.
   Teraz pokazuje prawdziwe liczby - i wyglad ma to wspierac,
   a nie przykrywac.

   DWIE ZASADY TEJ SEKCJI

   1. Kolor niesie znaczenie, nie dekoracje. Zloty/srebrny/brazowy
      w rankingu to miejsca na podium. Czerwony przy zadaniu to
      "po terminie". Nie malujemy niczego "dla ozdoby" - inaczej
      przestaje byc jasne, kiedy kolor cos mowi.

   2. Zadnych stylow w atrybucie style= w dashboard.js. Wszystko,
      co tutaj jest, ma nazwe klasy - inaczej zmiana wygladu
      wymaga grzebania w kodzie, ktory sklada HTML.
========================================================= */

/* ---------- 1. POWITANIE ---------- */

.dash-hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:26px 28px;
  background:
    radial-gradient(900px 300px at 8% -40%,rgba(139,92,246,.30),transparent 62%),
    radial-gradient(700px 280px at 92% 140%,rgba(33,212,163,.20),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.14));
  box-shadow:var(--shadow);
}

/*
  Cienka swietlna kreska u gory. Jedyny czysto ozdobny element
  na tym ekranie - trzyma powitanie wizualnie osobno od kafelkow
  z liczbami pod spodem.
*/
.dash-hero:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}

.dash-hero-title{
  margin:0;
  font-size:31px;
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:950;
  color:#fff;
}

.dash-hero-sub{
  margin:9px 0 0;
  font-size:13.5px;
  color:var(--muted2);
  max-width:60ch;
}

.dash-hero-date{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 12px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.06);
  font-size:11.5px;
  font-weight:750;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--muted2);
}

/* ---------- 2. PRZYCHODY ---------- */

.dash-week{
  max-width:300px;
  flex:0 1 300px;
}

/*
  Podpis okresu pod naglowkiem. Daty i liczba kierowcow -
  czyli czego dokladnie dotycza kafelki pod spodem.
*/
.dash-period{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin:0 0 14px;
  font-size:12.5px;
  color:var(--muted);
}

.dash-period b{
  color:var(--muted2);
  font-weight:800;
  letter-spacing:-.01em;
}

.dash-period-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--line2);
  flex-shrink:0;
}

/*
  Dwa kafelki, ktore NIE dotycza wybranego tygodnia albo nie maja
  jeszcze danych. Sa przyciemnione, zeby nie czytalo sie ich
  na rowni z kwotami okresu.
*/
.kpi.dash-kpi-aside{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.10));
  border-style:dashed;
}

.kpi.dash-kpi-aside .value{
  color:var(--muted2);
}

/* Wyjasnienie pod kafelkami - np. brak zmapowanej kolumny kursow. */
.dash-note{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin:13px 0 0;
  padding:11px 13px;
  border-radius:14px;
  border:1px dashed rgba(251,191,36,.28);
  background:rgba(251,191,36,.075);
  font-size:12px;
  line-height:1.5;
  color:var(--muted2);
}

.dash-note b{color:#ffd77a;font-weight:850}

/* ---------- 3. RANKING ---------- */

.dash-rank-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:13px;
  overflow:hidden;
}

.dash-rank-row + .dash-rank-row{margin-top:4px}

/*
  PASEK UDZIALU

  Tlo wiersza wypelnione proporcjonalnie do wyniku lidera. Szerokosc
  ustawia kod (--dash-share), bo to jedyna liczba, ktorej CSS znac
  nie moze. Pasek jest TLEM, nie osobnym elementem - dzieki temu
  nie przesuwa tekstu i nie zmienia wysokosci wiersza.
*/
.dash-rank-bar{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--dash-share,0%);
  background:linear-gradient(90deg,rgba(139,92,246,.30),rgba(56,189,248,.10));
  border-radius:13px;
  pointer-events:none;
}

.dash-rank-place{
  position:relative;
  flex-shrink:0;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  font-size:12px;
  font-weight:900;
  color:var(--muted2);
  font-variant-numeric:tabular-nums;
}

/* Podium. Kolor mowi "pierwsze/drugie/trzecie miejsce". */
.dash-rank-row.gold .dash-rank-place{
  background:linear-gradient(180deg,rgba(251,191,36,.34),rgba(251,191,36,.12));
  border-color:rgba(251,191,36,.45);
  color:#ffe6a3;
}

.dash-rank-row.silver .dash-rank-place{
  background:linear-gradient(180deg,rgba(203,213,225,.26),rgba(203,213,225,.09));
  border-color:rgba(203,213,225,.38);
  color:#e8eefc;
}

.dash-rank-row.bronze .dash-rank-place{
  background:linear-gradient(180deg,rgba(217,138,84,.30),rgba(217,138,84,.10));
  border-color:rgba(217,138,84,.42);
  color:#ffd2ae;
}

.dash-rank-name{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  font-size:13.5px;
  font-weight:750;
  letter-spacing:-.012em;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dash-rank-value{
  position:relative;
  flex-shrink:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.03em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

.dash-rank-row.gold .dash-rank-value{color:#ffe6a3}

/* ---------- 4. ZADANIA NA DZIS ---------- */

.dash-task{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border-radius:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);

  /*
    Kolorowa krecha z lewej. Czerwona = po terminie, zolta = na dzis.
    Przy dziesieciu zadaniach widac to szybciej niz plakietke z prawej.
  */
  border-left:3px solid var(--warn);
}

.dash-task + .dash-task{margin-top:7px}

.dash-task.overdue{
  border-left-color:var(--danger);
  background:rgba(255,107,107,.065);
}

.dash-task-title{
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.012em;
  color:var(--text);
}

.dash-task-meta{
  display:block;
  margin-top:3px;
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
}

.dash-task-plate{
  display:inline-block;
  margin-left:7px;
  padding:1px 7px;
  border-radius:6px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.06);
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  color:var(--muted2);
  vertical-align:1px;
}

/* ---------- 5. MOJE ZADANIA ---------- */

.dash-todo-form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.dash-todo-form .input{flex:1 1 220px;min-width:0}

.dash-todo{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid transparent;
  transition:background .14s ease,border-color .14s ease;
}

.dash-todo + .dash-todo{margin-top:3px}

.dash-todo:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}

.dash-todo input[type=checkbox]{
  flex-shrink:0;
  width:17px;
  height:17px;
  accent-color:var(--brand2);
  cursor:pointer;
}

.dash-todo-text{
  flex:1 1 auto;
  min-width:0;
  font-size:13.5px;
  line-height:1.45;
  color:var(--text);
  overflow-wrap:anywhere;
}

.dash-todo.done .dash-todo-text{
  text-decoration:line-through;
  color:var(--muted);
}

/*
  Kosz pokazuje sie dopiero po najechaniu na wiersz. Dziesiec
  zadan to dziesiec przyciskow "Usun" - lista zaczyna wygladac
  jak panel sterowania zamiast jak notatka.
*/
.dash-todo-del{
  flex-shrink:0;
  opacity:0;
  padding:3px 8px;
  font-size:11px;
  transition:opacity .14s ease;
}

.dash-todo:hover .dash-todo-del,
.dash-todo-del:focus-visible{opacity:1}

/*
  Na dotyku nie ma "najechania" - kosz zostalby niewidoczny
  i zadania nie daloby sie usunac.
*/
@media (hover:none){
  .dash-todo-del{opacity:1}
}

.dash-todo-done-head{
  margin:16px 0 7px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- WASKIE EKRANY ---------- */

@media (max-width:1100px){
  .dash-hero{padding:22px}
  .dash-hero-title{font-size:26px}
  .dash-week{max-width:none;flex:1 1 100%}
}

/*
  Odstep miedzy powitaniem a pierwszym blokiem z liczbami.
  Osobna klasa, zeby w dashboard.js nie zostalo ani jedno style=.
*/
.grid.dash-top{margin-top:15px}

/* =========================================================
   USTAWIENIA -> UZYTKOWNICY
========================================================= */

.settings-user-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/*
  Wybor roli wprost w tabeli. Wezsze niz zwykly <select>, zeby
  kolumna nie rozpychala tabeli - nazwy rol sa krotkie.
*/
.settings-user-role{
  max-width:210px;
  min-width:150px;
}

/*
  Wlasne konto: zamiast listy do wyboru sama nazwa roli.

  Rola zalogowanej osoby jest tu do PRZECZYTANIA, nie do zmiany -
  panel nie rysuje przy niej narzedzi, ktore backend i tak
  odrzuci. Stad wyglad bez ramki i bez strzalki.
*/
.settings-user-role-own{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.3;
}

.settings-user-role-own small{
  color:var(--muted);
  font-size:11px;
}

.settings-user-form{
  margin-top:18px;
}

.settings-user-hint{
  margin:0 0 14px;
  font-size:12px;
}

.settings-user-roles-panel{
  margin-top:16px;
}

.settings-user-roles-note{
  margin-top:16px;
}

/* =========================================================
   USTAWIENIA -> KOMUNIKACJA
========================================================= */

/* Ostrzezenie o sekretach - mocniejsze niz zwykla notka. */
.dash-note.comm-warning{
  border-color:rgba(255,107,107,.30);
  background:rgba(255,107,107,.075);
}

.dash-note.comm-warning b{color:#ffb4b4}

.comm-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 4px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
}

.comm-toggle-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:13.5px;
  font-weight:750;
  color:var(--text);
}

.comm-toggle-label input[type=checkbox]{
  width:17px;
  height:17px;
  accent-color:var(--brand2);
  cursor:pointer;
}

/*
  Pole na sekret. Wyzsze od zwyklego, bo miesci jeszcze plakietke
  "zapisany", wyjasnienie i przycisk kasowania.
*/
.comm-secret{
  position:relative;
}

.comm-secret-badge{
  margin-left:8px;
  vertical-align:1px;
}

.comm-secret-clear{
  margin-top:8px;
  align-self:flex-start;
  padding:5px 10px;
  font-size:11.5px;
}

.comm-footer{
  min-height:84px;
  resize:vertical;
  font-family:inherit;
}

/* =========================================================
   USTAWIENIA -> DOKUMENTY
========================================================= */

.doc-add{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

/* Znacznik do wstawienia. Klikalny, wiec wyglada na klikalny. */
.doc-chip{
  cursor:pointer;
  border:1px solid var(--line);
  font:inherit;
  font-size:12px;
  font-weight:700;
  transition:background .14s ease,border-color .14s ease;
}

.doc-chip:hover{
  background:rgba(139,92,246,.20);
  border-color:rgba(139,92,246,.40);
}

/*
  Znacznik pola, ktorego system nie ma. Zolty, zeby bylo widac
  ROZNICE zanim ktos go wstawi - a nie dopiero w podgladzie.
*/
.doc-chip-missing{
  background:rgba(251,191,36,.12);
  border-color:rgba(251,191,36,.32);
  color:#ffd77a;
}

.doc-chip-missing:hover{
  background:rgba(251,191,36,.20);
  border-color:rgba(251,191,36,.45);
}

.doc-placeholder-group{
  margin-bottom:14px;
}

.doc-placeholder-group strong{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

.doc-hint{
  margin:0 0 14px;
  font-size:12px;
}

.doc-missing-note,
.doc-problems{
  margin-top:14px;
}

.doc-problem{
  display:flex;
  gap:9px;
  align-items:baseline;
  flex-wrap:wrap;
  margin-top:7px;
  font-size:12px;
}

.doc-problem code{
  flex-shrink:0;
  padding:2px 7px;
  border-radius:6px;
  background:rgba(0,0,0,.28);
  border:1px solid var(--line);
  font-size:11.5px;
  color:#ffd77a;
}

.doc-checkbox{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  cursor:pointer;
  font-size:13.5px;
  color:var(--text);
}

.doc-checkbox input[type=checkbox]{
  width:17px;
  height:17px;
  accent-color:var(--brand2);
  cursor:pointer;
}

/*
  POLE TRESCI

  Od 2026-09-21 to juz nie <textarea>, tylko obszar edytowalny
  z formatowaniem (Oskar: "ma to dzialac jak edytor HTML").
  Dostal tez duzo wiecej miejsca - poprzednie bylo za male.

  Krój szeryfowy, bo tak wyglada gotowy dokument. Wczesniej bylo
  monospace pod surowe znaczniki; teraz znaczniki sa wstawiane
  przyciskami, a czyta sie przede wszystkim tresc umowy.
*/
.doc-content{
  min-height:520px;
  max-height:70vh;
  overflow-y:auto;
  padding:22px 24px;
  border-radius:14px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.045);
  color:var(--text);
  font-family:Georgia,'Times New Roman',serif;
  font-size:14px;
  line-height:1.75;
  outline:none;
}

.doc-content:focus{
  border-color:rgba(139,92,246,.45);
  background:rgba(255,255,255,.06);
}

/*
  Podpowiedz w pustym polu. Pole edytowalne nie obsluguje
  atrybutu placeholder - trzeba ja dorysowac.
*/
.doc-content:empty:before{
  content:attr(data-placeholder);
  color:var(--muted);
  font-style:italic;
}

/* Formatowanie wewnatrz edytora i podgladu. */
.doc-content h1,.doc-content h2,.doc-content h3,.doc-content h4{
  margin:18px 0 8px;
  line-height:1.3;
  font-weight:800;
}

.doc-content h2{font-size:18px}
.doc-content h3{font-size:16px}

.doc-content p{margin:0 0 10px}
.doc-content ul,.doc-content ol{margin:0 0 10px;padding-left:24px}
.doc-content li{margin:3px 0}
.doc-content a{color:var(--brand3);text-decoration:underline}

/*
  PASEK FORMATOWANIA
*/
.doc-toolbar{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 10px;
  padding:8px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
}

.doc-tool{
  padding:6px 11px;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--muted2);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .14s ease,color .14s ease;
}

.doc-tool:hover{
  background:rgba(139,92,246,.22);
  border-color:rgba(139,92,246,.40);
  color:#fff;
}

.doc-tool-bold{font-weight:900}
.doc-tool-italic{font-style:italic}
.doc-tool-underline{text-decoration:underline}

/*
  PASEK NA GORZE: wybor dokumentu i dodawanie.

  Zastapil liste w bocznej kolumnie - Oskar: "dodaj dokument musi
  byc na gorze przyciskiem, a nie menu bocznym, bo zabiera to
  miejsce". Edytor ma teraz cala szerokosc.
*/
.doc-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
}

.doc-bar-left{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.doc-bar-picker{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:260px;
}

.doc-bar-picker span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Znaczniki i podglad pod edytorem, obok siebie na szerokim ekranie. */
.doc-lower{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:15px;
  margin-top:15px;
  align-items:start;
}

.doc-placeholders-panel{margin:0}

@media(max-width:1100px){
  .doc-lower{grid-template-columns:1fr}
}

.doc-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:16px;
}

.doc-preview-panel{
  margin:0;
}

/*
  Podglad. Bialy papier na ciemnym panelu - dokument ma wygladac
  jak dokument, a nie jak kolejne pole formularza.
*/
.doc-preview{
  padding:26px 30px;
  border-radius:12px;
  background:#fbfaf7;
  color:#1b1b1f;
  font-family:Georgia,'Times New Roman',serif;
  font-size:13.5px;
  line-height:1.75;
  overflow-wrap:anywhere;
  box-shadow:0 14px 40px rgba(0,0,0,.30);
}

/*
  Formatowanie w podgladzie.

  Wczesniej podglad mial white-space:pre-wrap, bo tresc byla
  zwyklym tekstem i same przejscia do nowej linii budowaly uklad.
  Teraz tresc jest HTML-em, wiec akapity robia <p> - pre-wrap
  dokladalby do tego puste linie ze zrodla i wszystko sie
  rozjezdzalo.
*/
.doc-preview h1,.doc-preview h2,.doc-preview h3,.doc-preview h4{
  margin:18px 0 8px;
  line-height:1.3;
  font-weight:700;
  color:#111114;
}

.doc-preview h2{font-size:19px}
.doc-preview h3{font-size:16px}

.doc-preview p{margin:0 0 11px}
.doc-preview ul,.doc-preview ol{margin:0 0 11px;padding-left:26px}
.doc-preview li{margin:3px 0}
.doc-preview a{color:#1a4fa0}
.doc-preview hr{border:0;border-top:1px solid rgba(0,0,0,.18);margin:16px 0}

.doc-preview table{border-collapse:collapse;width:100%;margin:0 0 12px}
.doc-preview td,.doc-preview th{
  border:1px solid rgba(0,0,0,.22);
  padding:6px 9px;
  text-align:left;
}

.doc-signature{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  margin-top:18px;
  padding-left:30px;
}

.doc-signature-line{
  display:block;
  width:220px;
  height:1px;
  background:var(--line2);
}

/* =========================================================
   ZAKRES DOSTEPU ROL
========================================================= */

.perm-panel{margin-top:16px}

.perm-warning{
  border-color:rgba(96,165,250,.28);
  background:rgba(96,165,250,.07);
}

.perm-warning b{color:#a9cdff}

.perm-admin-note{margin:14px 0 0}

/* Wybor roli - piec kafelkow. */
.perm-roles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:9px;
  margin:16px 0 0;
}

.perm-role{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--muted2);
  cursor:pointer;
  text-align:left;
  font:inherit;
  transition:background .14s ease,border-color .14s ease;
}

.perm-role:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--line2);
}

.perm-role.active{
  background:linear-gradient(180deg,rgba(139,92,246,.22),rgba(255,255,255,.03));
  border-color:rgba(139,92,246,.40);
  color:#fff;
}

.perm-role strong{
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.015em;
}

.perm-role small{
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}

.perm-role.active small{color:var(--muted2)}

.perm-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:16px 0 0;
  font-size:12.5px;
}

.perm-actions b{color:var(--text)}

.perm-sections{margin-top:18px}

.perm-section{
  margin-bottom:16px;
  padding:14px 15px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.028);
}

.perm-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.perm-section-head strong{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:850;
  letter-spacing:-.01em;
  color:var(--text);
}

.perm-bulk{
  max-width:200px;
  font-size:12px;
}

.perm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
}

.perm-row + .perm-row{border-top:1px solid rgba(255,255,255,.04)}

.perm-row-name{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-size:13px;
  color:var(--muted2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.perm-row-icon{
  flex-shrink:0;
  font-size:14px;
  line-height:1;
}

/*
  Poziom dostepu. Kolor mowi, co jest ustawione - przy piecdziesieciu
  wierszach czytanie samych napisow zajmuje za dlugo.
*/
.perm-level{
  flex-shrink:0;
  max-width:170px;
  min-width:140px;
  font-size:12px;
}

.perm-level-brak{
  border-color:rgba(255,107,107,.30);
  background:rgba(255,107,107,.10);
}

.perm-level-podglad{
  border-color:rgba(251,191,36,.30);
  background:rgba(251,191,36,.10);
}

.perm-level-pelny{
  border-color:rgba(52,211,153,.30);
  background:rgba(52,211,153,.10);
}

.perm-level:disabled{
  opacity:.55;
  cursor:not-allowed;
}

@media(max-width:700px){
  .perm-row{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .perm-level{max-width:none;width:100%}
}

/* Wskazowka przy wybranym dostawcy poczty. */
.dash-note.comm-provider-note{
  margin:0 0 14px;
  border-color:rgba(96,165,250,.26);
  background:rgba(96,165,250,.065);
}

/* =========================================================
   SKLEP
========================================================= */

.shop-tabs{margin:0 0 16px}

.shop-search{margin:0 0 14px}

/* Stan magazynowy - minus, liczba, plus. */
.shop-stock{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.shop-stock-btn{
  padding:4px 10px;
  font-size:14px;
  line-height:1;
  font-weight:800;
}

.shop-stock-input{
  width:74px;
  text-align:center;
  font-weight:800;
}

.shop-order-cancelled{opacity:.5}

.shop-inline-input{width:62px;text-align:center}
.shop-inline-price{width:110px}
.shop-inline-desc{margin-top:6px;font-size:12px}

.shop-rules-panel{margin-top:16px}

/* Wciecie pokazuje, ze ta zasada dziala tylko przy wlaczonej wyzej. */
.shop-rule-nested{
  margin-left:18px;
  margin-top:8px;
  border-left:2px solid rgba(139,92,246,.35);
}

/* =========================================================
   SKLEP W APLIKACJI KIEROWCY
========================================================= */

.driver-shop-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  cursor:pointer;
  border:1px solid var(--line);
  font:inherit;
  color:inherit;
}

.driver-shop-item.out{opacity:.5;cursor:not-allowed}

/*
  Zdjecie produktu w aplikacji kierowcy. Zastapilo ikonke
  2026-09-21 - Oskar: "jako wizualizacja produktu ma byc
  wykorzystywane jego zdjecie".
*/
.driver-shop-photo{
  flex-shrink:0;
  width:54px;
  height:54px;
  border-radius:12px;
  object-fit:cover;
  background:rgba(255,255,255,.07);
}

.driver-shop-photo-empty{
  display:grid;
  place-items:center;
  font-size:9px;
  line-height:1.2;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line2);
}

.driver-shop-photo-big{
  display:block;
  width:100%;
  max-height:190px;
  object-fit:cover;
  border-radius:12px;
  margin:0 0 10px;
  background:rgba(255,255,255,.05);
}

.driver-shop-info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.driver-shop-info small{font-size:11.5px;color:var(--muted)}
.driver-shop-stock{font-weight:700}

.driver-shop-price{
  flex-shrink:0;
  font-weight:900;
  letter-spacing:-.03em;
}

.driver-shop-form{
  border-color:rgba(139,92,246,.40);
  background:linear-gradient(180deg,rgba(139,92,246,.14),rgba(255,255,255,.03));
}

.driver-shop-form-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.driver-shop-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}

.driver-shop-total{font-size:18px;letter-spacing:-.03em}

.driver-shop-qty{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.driver-shop-qty button{
  width:30px;
  height:30px;
  border-radius:9px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.07);
  color:var(--text);
  font-size:16px;
  font-weight:800;
  cursor:pointer;
}

/* Dwa sposoby zaplaty - obok siebie, zeby widac bylo wybor. */
.driver-shop-payments{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:12px 0;
}

.driver-shop-payment{
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-start;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted2);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.driver-shop-payment strong{font-size:12.5px;font-weight:800}
.driver-shop-payment small{font-size:10.5px;line-height:1.35;color:var(--muted)}

.driver-shop-payment.active{
  border-color:rgba(33,212,163,.50);
  background:rgba(33,212,163,.14);
  color:#fff;
}

.driver-shop-payment.blocked{
  opacity:.45;
  cursor:not-allowed;
}

/*
  Powod blokady. Kierowca, ktory widzi sam szary przycisk,
  dzwoni do biura - i ma racje.
*/
.driver-shop-blocked{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:11px;
  border:1px solid rgba(251,191,36,.30);
  background:rgba(251,191,36,.10);
  font-size:11.5px;
  line-height:1.5;
  color:#ffd77a;
}

.driver-shop-status{
  display:block;
  font-size:10.5px;
  font-weight:700;
  color:var(--muted);
}

/* Opis produktu w formularzu zamowienia. */
.driver-shop-desc{
  margin:0 0 10px;
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
}

/* Sekcja w zakladce sklepu - karta z naglowkiem i lista. */
.driver-shop-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.driver-shop-cancel{
  width:auto;
  padding:5px 11px;
  font-size:11px;
}

/* =========================================================
   DOKUMENTY PODPISANE
========================================================= */

.signed-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.signed-filters .input{flex:1 1 320px}
.signed-filters select{flex:0 1 240px}

.signed-preview-panel{margin-top:16px}

.signed-frozen-note{margin:0 0 16px}

/* Podpis pod dokumentem. */
.signed-signature{
  align-items:flex-start;
  gap:4px;
}

.signed-signature-image{
  max-width:240px;
  max-height:90px;
  object-fit:contain;
  background:#fbfaf7;
  border-radius:8px;
  padding:6px;
}

/*
  Podpis wpisany, a nie narysowany. Krój odreczny, zeby nie mylil
  sie z reszta interfejsu.
*/
.signed-signature-text{
  font-family:'Segoe Script','Bradley Hand',cursive,Georgia,serif;
  font-size:22px;
  line-height:1.2;
  color:var(--text);
}

.signed-empty-status{
  margin:12px 0 16px;
  font-size:12.5px;
  color:var(--muted2);
}

/* =========================================================
   SKLEP — ZDJĘCIA PRODUKTÓW I PLAKIETKA W MENU
========================================================= */

.shop-photo{
  display:block;
  border-radius:10px;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  flex-shrink:0;
}

/*
  Ramka zamiast zdjecia. Pusta dziura nie mowi, czy zdjecie sie
  nie wczytalo, czy go nie dodano.
*/
.shop-photo-empty{
  display:grid;
  place-items:center;
  border:1px dashed var(--line2);
  font-size:9px;
  line-height:1.2;
  text-align:center;
  color:var(--muted);
}

.shop-photo-tiny{width:34px;height:34px}
.shop-photo-small{width:46px;height:46px}
.shop-photo-medium{width:72px;height:72px}

.shop-product-cell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.shop-product-cell span{min-width:0}

.shop-photo-editor{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.shop-new-photo{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

/*
  Przycisk wgrywania to <label> z ukrytym polem pliku - przegladarka
  nie pozwala ostylowac samego pola wyboru.
*/
.shop-photo-button{
  padding:5px 10px;
  font-size:11.5px;
  cursor:pointer;
}

.shop-cell-number{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.shop-order-number{
  font-size:11.5px;
  padding:2px 7px;
  border-radius:6px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  white-space:nowrap;
}

/* Licznik nowych zamowien na zakladce w module. */
.shop-tab-count{
  display:inline-grid;
  place-items:center;
  min-width:19px;
  height:19px;
  margin-left:7px;
  padding:0 5px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
}

/*
  PLAKIETKA W MENU BOCZNYM

  Zastepuje strzalke ">" przy pozycji, ktora czeka na uwage.
  Czerwony jest tu uzasadniony: to jedyne miejsce w menu, gdzie
  kolor znaczy "zrob z tym cos", a nie "tu jestes".
*/
.nav-badge{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 0 2px rgba(255,107,107,.22);
}

/* =========================================================
   BAZA WIEDZY

   Przebudowana 2026-09-21. Boczne drzewo zniknelo - na glownym
   ekranie sa duze kafle folderow na calej szerokosci, a poziomy
   przechodzi sie po kolei: foldery -> tematy -> tresc.

   PUNKT 10 OSKARA: "zawartosc ma byc czytelna i przeznaczona
   do odczytu, a nie wygladac jak panel administracyjny".

   Stad w tym pliku jedna zasada przewodnia: narzedzia
   administracyjne sa MALE i SZARE, a tresc duza i kontrastowa.
   Kolor dostaje to, co sie czyta - nie to, czym sie zarzadza.
========================================================= */

.kb-top-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.kb-search-card{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:15px;
}

.kb-search-card .input{flex:1 1 320px}

.kb-counts{font-size:12px;white-space:nowrap}

/* ---------- SCIEZKA ---------- */

.kb-crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 15px;
  font-size:13px;
  color:var(--muted);
}

.kb-crumbs button{
  border:0;
  background:transparent;
  color:var(--brand3);
  font:inherit;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px;
}

.kb-crumbs button:hover{color:#fff}

.kb-crumbs b{color:var(--text);font-weight:800}

/* ---------- POZIOM 1: KAFLE FOLDEROW ---------- */

.kb-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:15px;
}

.kb-tile{
  position:relative;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.10));
  box-shadow:0 12px 34px rgba(0,0,0,.16);
  overflow:hidden;
  transition:border-color .16s ease,transform .16s ease;
}

.kb-tile:hover{
  border-color:rgba(139,92,246,.42);
  transform:translateY(-2px);
}

/* Folder chroniony - delikatny akcent, bez krzyku. */
.kb-tile.protected{
  border-color:rgba(56,189,248,.28);
}

.kb-tile-open{
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:flex-start;
  width:100%;
  padding:22px 20px 20px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.kb-tile-icon{
  font-size:34px;
  line-height:1;
  margin-bottom:4px;
}

.kb-tile-open strong{
  font-size:16px;
  font-weight:850;
  letter-spacing:-.02em;
  color:var(--text);
}

.kb-tile-open small{
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}

.kb-tile-count{
  margin-top:6px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:800;
  color:var(--muted2);
}

/*
  Narzedzia administracyjne. Male, szare, w rogu i widoczne
  dopiero po najechaniu - punkt 10: nie moga dominowac nad
  sama Baza wiedzy.
*/
.kb-tile-tools{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:4px;
  opacity:0;
  transition:opacity .16s ease;
}

.kb-tile:hover .kb-tile-tools,
.kb-article-row:hover .kb-tile-tools,
.kb-tile-tools:focus-within{opacity:1}

.kb-tool{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.35);
  color:var(--muted2);
  font-size:12px;
  cursor:pointer;
}

.kb-tool:hover{background:rgba(0,0,0,.55);border-color:var(--line2)}

.kb-tool-lock{cursor:default;opacity:.7}

/*
  Klodka przy folderze chronionym jest widoczna zawsze - to
  informacja, a nie narzedzie.
*/
.kb-tile.protected .kb-tile-tools{opacity:1}

/* ---------- POZIOM 2: TEMATY ---------- */

.kb-articles{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.kb-article-row{
  position:relative;
  display:flex;
  align-items:center;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  transition:background .14s ease,border-color .14s ease;
}

.kb-article-row:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--line2);
}

.kb-article-open{
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-start;
  flex:1 1 auto;
  min-width:0;
  padding:14px 16px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.kb-article-open strong{
  font-size:14px;
  font-weight:750;
  letter-spacing:-.012em;
  color:var(--text);
}

.kb-article-open small{font-size:11.5px;color:var(--muted)}

.kb-article-row .kb-tile-tools{
  position:static;
  margin-right:12px;
  flex-shrink:0;
}

/* ---------- POZIOM 3: TRESC ---------- */

.kb-read{
  padding:26px 28px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow);
}

.kb-read-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.kb-read-head h2{
  margin:0;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.03em;
}

.kb-read-head p{margin:5px 0 0;font-size:12px}

.kb-read-tools{
  display:flex;
  gap:7px;
  flex-shrink:0;
}

.kb-tool-button{
  padding:6px 12px;
  font-size:12px;
}

/*
  TRESC DO CZYTANIA

  Szersze wiersze, wieksza interlinia i ograniczona dlugosc
  linii. Tekst instrukcji czyta sie inaczej niz tabele - dlatego
  nie wyglada jak reszta panelu.
*/
.kb-read-body{
  max-width:74ch;
  font-size:15px;
  line-height:1.8;
  color:var(--muted2);
}

.kb-read-body h1,.kb-read-body h2,.kb-read-body h3,.kb-read-body h4{
  margin:24px 0 10px;
  line-height:1.3;
  color:var(--text);
  font-weight:800;
}

.kb-read-body h2{font-size:19px}
.kb-read-body h3{font-size:16px}

.kb-read-body p{margin:0 0 14px}
.kb-read-body ul,.kb-read-body ol{margin:0 0 14px;padding-left:26px}
.kb-read-body li{margin:6px 0}
.kb-read-body b,.kb-read-body strong{color:var(--text)}
.kb-read-body a{color:var(--brand3);text-decoration:underline}

.kb-read-empty{margin:0}

.kb-content{min-height:320px}

/* ---------- MATERIALY ---------- */

.kb-media-section{margin-top:22px}

.kb-media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}

.kb-media{
  position:relative;
  margin:0;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  overflow:hidden;
}

.kb-media img{
  display:block;
  width:100%;
  max-height:320px;
  object-fit:contain;
  background:#0c0e18;
}

/*
  Film ma zawsze pelna szerokosc kafla, takze gdy siatka daje mu
  waska kolumne - obcieta ramka filmu nie nadaje sie do ogladania.
*/
.kb-media-video{grid-column:1 / -1;max-width:720px}

.kb-media iframe{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
  background:#000;
}

.kb-media figcaption{
  padding:9px 12px;
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
}

.kb-media-link{padding:16px}

.kb-media-link a{
  color:var(--brand3);
  font-size:13.5px;
  font-weight:700;
  text-decoration:underline;
  overflow-wrap:anywhere;
}

.kb-media-remove{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.kb-media-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.kb-media-button{
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
}

.kb-video-note{margin-top:14px}

/* ---------- WYNIKI SZUKANIA ---------- */

.kb-result-row{
  border-radius:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
}

.kb-result-row:hover{background:rgba(255,255,255,.06)}

.kb-result-folder{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand3);
}

.kb-result-excerpt{
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
}

@media(max-width:700px){
  .kb-read{padding:20px 18px}
  .kb-read-head h2{font-size:20px}
  .kb-tiles{grid-template-columns:1fr}
}

/* =========================================================
   POLE WYSZUKIWANIA

   Wspolne dla bazy wiedzy, dokumentow podpisanych i zamowien
   w sklepie. Pole plus przycisk "Szukaj" - pisanie nie odswieza
   listy, zeby kursor nie uciekal z pola.
========================================================= */

.search-box{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  flex:1 1 320px;
}

.search-box-input{
  flex:1 1 260px;
  min-width:0;
}

/*
  EKRAN ŁADOWANIA — WSPÓLNY DLA CAŁEGO PANELU

  Dopisane 2026-09-24. Dane przychodzą teraz z bazy, a ta usypia
  i wybudza się nawet minutę. Przez ten czas pusta lista wyglądała
  jak odpowiedź „nic tu nie ma" — i człowiek zakładał drugie
  rozliczenie, bo pierwszego nie widział.

  Moduł kierowców miał własny taki ekran, ze stylami wpisanymi
  wprost w HTML. Ten jest jeden i w stylach — patrz dług III.11,
  gdzie style zostały po usuniętych kafelkach.
*/
.sp-ladowanie{
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:32px 20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  text-align:center;
}
.sp-ladowanie-kolo{
  width:38px;
  height:38px;
  border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--accent, #8b5cf6);
  animation:spLadowanieObrot .9s linear infinite;
}
.sp-ladowanie-tekst{
  margin:0;
  font-weight:600;
}
.sp-ladowanie-uwaga{
  margin:0;
  max-width:420px;
  font-size:12.5px;
  line-height:1.5;
}
@keyframes spLadowanieObrot{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/*
  Kto nie chce ruchu na ekranie, ten go nie dostaje. Kółko nadal
  jest widoczne — samo przestaje się kręcić.
*/
@media (prefers-reduced-motion: reduce){
  .sp-ladowanie-kolo{ animation:none; }
}

/* =========================================================
   WYSYŁKA DO BAZY — ZASŁONA NA CAŁY EKRAN

   Celowo zasłania wszystko. Drugi plik dorzucony w trakcie
   wysyłki pierwszego to dwie paczki transakcji w locie —
   a tak powstawały podwójne kwoty (II.32).

   To nie jest ozdoba, tylko zabezpieczenie.
========================================================= */

.sp-wysylka {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Przyciemnienie całego ekranu. */
  background: rgba(10, 12, 16, 0.62);

  /* Niewidoczna i NIEDOTYKALNA, dopóki nie trzeba. */
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.18s ease;

  z-index: 10000;
}

.sp-wysylka-widoczny {
  opacity: 1;

  /*
    SEDNO: gdy jest widoczna, ŁAPIE KLIKNIĘCIA. Nic pod nią
    nie da się kliknąć, dopóki wysyłka trwa.
  */
  pointer-events: auto;
}

.sp-wysylka-okno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 28px 32px;

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(20, 23, 30, 0.97);
  color: #f4f6f9;

  text-align: center;

  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.sp-wysylka-tytul {
  font-size: 17px;
  line-height: 1.3;
}

.sp-wysylka-opis {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(244, 246, 249, 0.86);
}

.sp-wysylka-uwaga {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(244, 246, 249, 0.62);
}

.sp-wysylka-kolo {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;

  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: #ffffff;
  border-radius: 50%;

  animation: spWysylkaObrot 0.7s linear infinite;
}

@keyframes spWysylkaObrot {
  to { transform: rotate(360deg); }
}

/*
  Kółko się nie kręci u kogoś, kto wyłączył ruch na ekranie.
  Zasłona zostaje — to ona jest zabezpieczeniem, nie animacja.
*/
@media (prefers-reduced-motion: reduce) {
  .sp-wysylka-kolo { animation: none; }
  .sp-wysylka { transition: none; }
}

/* =========================================================
   STRONICOWANIE — PASEK POD TABELĄ
========================================================= */

.sp-strony {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 12px;
  padding-top: 12px;

  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));

  font-size: 13px;
}

.sp-strony-ile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-strony-ile select { min-width: 72px; }

.sp-strony-opis { color: var(--muted, #6b7280); }

.sp-strony-ruch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-strony-numer {
  min-width: 64px;
  text-align: center;
  color: var(--muted, #6b7280);
}

/* Na wąskim ekranie pasek układa się w kolumnę, a nie wychodzi za brzeg. */
@media (max-width: 640px) {
  .sp-strony { justify-content: center; }
}

/* =========================================================
   EDYCJA NAZWY I OKRESU ROZLICZENIA (V.2)

   Trzy pola w jednym wierszu, a na wąskim ekranie w kolumnie.
========================================================= */

.sp-rozliczenie-edycja {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;

  margin: 4px 0 12px;
}

.sp-rozliczenie-edycja label {
  display: flex;
  flex-direction: column;
  gap: 4px;

  font-size: 13px;
}

.sp-rozliczenie-edycja label span {
  color: var(--muted, #6b7280);
}

@media (max-width: 720px) {
  .sp-rozliczenie-edycja { grid-template-columns: 1fr; }
}

/* =========================================================
   ROZLICZENIE W PODGLĄDZIE KIEROWCY (V.4)

   Ta sama treść, co w aplikacji kierowcy — więc i te same style.
   Ramka jest tylko po to, żeby oddzielić „to widzi kierowca"
   od reszty okienka, która jest wewnętrzna.
========================================================= */

.sp-podglad-rozliczenie {
  margin-top: 16px;
  padding: 12px;

  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;

  /* Tło aplikacji kierowcy, żeby było widać, że to JEJ widok. */
  background: var(--bg-soft, rgba(0, 0, 0, 0.02));
}

/*
  Aplikacja kierowcy jest projektowana na telefon i ma swoje
  szerokości. W okienku panelu nie może wychodzić za brzeg.
*/
.sp-podglad-rozliczenie .driver-app-hero,
.sp-podglad-rozliczenie .driver-app-card {
  max-width: 100%;
}

/* =========================================================
   POWIADOMIENIA ZWARTE (punkt V.3)

   Prośba Oskara 2026-09-24: „oba komunikaty powinny być wizualnie
   mniejsze i zajmować mniej miejsca".

   =========================================================
   DLACZEGO OSOBNA KLASA, A NIE ZMIANA `.alert-row`
   =========================================================

   Tych wierszy używa też pulpit, flota i windykacja. Zmniejszenie
   ich wszędzie znaczyłoby zmianę w miejscach, o których Oskar nie
   mówił — a tam mniejszy tekst może przeszkadzać.

   Zmniejszamy tam, gdzie tego chciał: przy zatwierdzaniu
   rozliczenia, gdzie tych wierszy bywa kilkanaście naraz
   i wypychają przycisk „Zatwierdź" poza ekran.
========================================================= */

.alert-list.kompaktowa { gap: 6px; }

.alert-list.kompaktowa .alert-row {
  padding: 8px 12px;
  border-radius: 12px;
  gap: 10px;
}

.alert-list.kompaktowa .alert-row strong {
  margin-bottom: 1px;
  font-size: 13px;
  line-height: 1.35;
}

.alert-list.kompaktowa .alert-row span {
  font-size: 12px;
  line-height: 1.3;
}

/* Przycisk w wierszu też mniejszy — inaczej on wyznacza wysokość. */
.alert-list.kompaktowa .alert-row .btn {
  padding: 5px 10px;
  font-size: 12px;
}

/* =========================================================
   CZYSZCZENIE BAZY (punkt II.18)

   Ekran ma WYGLADAC na niebezpieczny. To nie ozdoba: przy
   siedmiu modulach i dwoch przyciskach roznica miedzy „wyczysc
   zaznaczone" a „wyczysc cala baze" musi byc widoczna z drugiego
   konca biurka.
========================================================= */

.db-clean-modules {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.db-clean-module {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.db-clean-module:hover {
  border-color: var(--accent);
}

.db-clean-module.is-selected {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}

.db-clean-module-icon {
  font-size: 18px;
  line-height: 1.2;
}

.db-clean-module-text {
  display: grid;
  gap: 3px;
}

.db-clean-module-text .muted {
  font-size: 12px;
  line-height: 1.5;
}

.db-clean-confirm {
  display: grid;
  gap: 8px;
  max-width: 460px;
  margin-top: 14px;
}

.db-clean-confirm input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.db-clean-confirm input:focus {
  outline: none;
  border-color: #dc2626;
}

.db-clean-warning {
  padding: 10px 12px;
  border-left: 3px solid #dc2626;
  background: rgba(220, 38, 38, 0.06);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
}

.card.db-clean-danger {
  border-color: rgba(220, 38, 38, 0.45);
}

/* =========================================================
   UTRZYMANIE KLIENTA (punkt II.10)

   Ekran ma pokazywac DWIE rzeczy naraz: komu wypada kontakt
   i co ustalono poprzednio. Dlatego lista u gory, historia pod nia -
   a nie w bocznej szufladzie, ktorej nikt nie otwiera.
========================================================= */

/*
  KARTY ZAMIAST TABELI - 2026-09-25, prosba Oskara.

  Tabela z szescioma kolumnami wymagala czytania wiersz po wierszu,
  zeby znalezc zaleglosc. Karta pokazuje jedno pytanie na raz:
  KIEDY WYPADA KONTAKT - duza data, z kolorem, ktory mowi to samo
  bez czytania.
*/
.ret-filtry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.ret-filtry-szukaj {
  flex: 1 1 260px;
  min-width: 220px;
}

.ret-wybor {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg, #fff);
  font-size: 14px;
}

.ret-karty {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px;
}

.ret-karta {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg, #fff);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.ret-karta:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.ret-karta.is-wybrana {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* Zaleglosc widac z drugiego konca biurka - to jest cala rzecz. */
.ret-karta.is-zalegla {
  border-left: 4px solid #dc2626;
}

.ret-karta-glowa {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.ret-karta-nazwa {
  font-weight: 650;
  font-size: 15px;
}

.ret-karta-miasto {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.ret-karta-termin {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

.ret-karta-etap {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.ret-karta-termin strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.ret-termin-zalegly {
  color: #b91c1c;
}

.ret-karta-stopka {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.ret-plakietka {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ret-plakietka-w_toku { background: rgba(37, 99, 235, 0.12); }
.ret-plakietka-utrzymany { background: rgba(22, 163, 74, 0.14); }
.ret-plakietka-odszedl { background: rgba(220, 38, 38, 0.12); }
.ret-plakietka-brak_kontaktu { background: rgba(120, 113, 108, 0.14); }

/* Panel historii - oddzielony od listy, zeby bylo widac, ze to inna warstwa. */
.ret-panel {
  border-top: 3px solid var(--accent);
}

.ret-panel-glowa {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ret-panel-glowa h2 {
  margin: 2px 0 4px;
  font-size: 19px;
}

.ret-panel-glowa p {
  margin: 0;
  font-size: 13px;
}

.retention-formularz {
  border-color: var(--accent);
}

.retention-daty {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.retention-pole {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.retention-pole > span {
  font-size: 13px;
  font-weight: 600;
}

/*
  Jedna regula na wszystkie pola formularza kontaktu.

  Bez dzielenia na „grupa + wyjatek dla textarea": ten sam selektor
  wypisany w dwoch miejscach liczy sie jako definicja podwojna
  (pilnuje tego `spojnosc-css.js`), a przy stu regulach takie pary
  robia sie nie do utrzymania.
*/
.retention-pole input,
.retention-pole select {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.retention-pole textarea {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 62px;
}

.retention-przyciski {
  display: flex;
  gap: 10px;
}

.retention-historia {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.retention-kontakt {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.retention-kontakt p {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.6;
}

.retention-kontakt-glowa {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

/* Efekt kontaktu - kolor niesie te sama informacje, co slowo. */
.retention-wynik {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.retention-wynik-w_toku { background: rgba(37, 99, 235, 0.12); }
.retention-wynik-utrzymany { background: rgba(22, 163, 74, 0.14); }
.retention-wynik-odszedl { background: rgba(220, 38, 38, 0.12); }
.retention-wynik-brak_kontaktu { background: rgba(120, 113, 108, 0.14); }

/* --- USTAWIENIA: PROGI KONTAKTU --- */

.retention-prog {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.retention-prog-nazwa {
  font-weight: 600;
}

.retention-prog-pole {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.retention-prog-pole input {
  width: 110px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* =========================================================
   OŚWIADCZENIE ZUS I PODATKOWE (punkt II.13, 2026-09-26)

   Czternaście pytań, z których połowa odsłania kolejne pola.
   Dwie klasy, obie po to, żeby widać było, gdzie kończy się
   jedno pytanie, a zaczyna następne — bez tego formularz czyta
   się jak jedna długa lista pól bez związku.
========================================================= */

.zus-karta .form-section{
  margin-top:18px;
}

.zus-pytanie{
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.zus-pytanie:last-child{
  border-bottom:0;
}

/* Pola dodatkowe cofnięte w prawo — widać, że należą do pytania. */
.zus-dodatkowe{
  margin:10px 0 4px 18px;
  padding-left:14px;
  border-left:2px solid rgba(96,165,250,.28);
}

/* =========================================================
   APLIKACJA KIEROWCY — PROFIL (punkt II.14, 2026-09-26)

   Cztery pola do zmiany i lista do wglądu. Wszystko na szerokość
   telefonu, bo to jest podglądem telefonu — pola obok siebie
   byłyby tu nie do trafienia palcem.
========================================================= */

.driver-app-section{
  margin-top:14px;
}

.driver-app-section h3{
  margin:0 0 4px;
  font-size:15px;
}

.driver-app-hint{
  margin:0 0 10px;
  color:var(--muted2);
  font-size:12px;
  line-height:1.45;
}

.driver-app-field{
  display:block;
  margin-bottom:10px;
}

.driver-app-field span{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  color:var(--muted2);
}

.driver-app-field .input{
  width:100%;
}

.driver-app-field small{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.4;
}

.driver-app-save{
  width:100%;
  margin-top:4px;
}

/* =========================================================
   APLIKACJA KIEROWCY — DOKUMENTY DO PODPISU
   (domknięcie punktu II.14, 2026-09-27)

   Treść dokumentu przewija się we własnym oknie, nie razem
   z ekranem — bo od przewinięcia jej do końca zależy, czy podpis
   jest w ogóle możliwy.
========================================================= */

.driver-app-doc{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin-bottom:8px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  text-align:left;
  color:inherit;
}

.driver-app-doc-todo{
  border-color:rgba(251,191,36,.3);
  background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(255,255,255,.03));
  cursor:pointer;
}

.driver-app-doc-icon{
  font-size:18px;
  line-height:1;
}

.driver-app-doc-body{
  flex:1;
  min-width:0;
}

.driver-app-doc-body strong{
  display:block;
  font-size:13px;
  overflow-wrap:anywhere;
}

.driver-app-doc-body small{
  display:block;
  margin-top:2px;
  color:var(--muted2);
  font-size:11px;
  line-height:1.4;
}

.driver-app-doc-arrow{
  color:var(--muted2);
  font-size:18px;
}

.driver-app-doc-content{
  max-height:220px;
  overflow-y:auto;
  margin:10px 0 6px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.14);
  font-size:12px;
  line-height:1.55;
}

.driver-app-doc-hint{
  display:block;
  margin-bottom:10px;
  font-size:11px;
}

/* =========================================================
   APLIKACJA KIEROWCY — FAKTURY KOSZTOWE (punkt II.15, 2026-09-27)

   Dwa przyciski na całą szerokość: aparat i galeria. Pole wyboru
   pliku jest schowane, a klikalną częścią jest etykieta — tak
   wygląda to jak przycisk, a działa jak wybór pliku.
========================================================= */

.driver-app-invoice-buttons{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.driver-app-photo{
  display:block;
  width:100%;
  text-align:center;
  cursor:pointer;
}

/* Powód odrzucenia — to najważniejsze zdanie na liście faktur. */
.driver-app-reject{
  display:block;
  margin-top:6px;
  padding:7px 9px;
  border-left:2px solid rgba(255,107,107,.5);
  border-radius:0 8px 8px 0;
  background:rgba(255,107,107,.1);
  color:#ffb4b4;
  font-size:11px;
  line-height:1.45;
}

/* =========================================================
   PANEL — KARTA FAKTURY KOSZTOWEJ
========================================================= */

.cost-invoice-card{
  margin-top:12px;
}

.cost-invoice-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

/* Podpowiedź maszyny STOI OBOK pola, nie w polu. */
.cost-invoice-hint{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:4px;
  font-size:11px;
}

/* Odczyt poniżej 80% pewności — nie „źle", ale „spójrz uważnie". */
.cost-invoice-weak{
  color:#ffd772;
}

/* =========================================================
   USTAWIENIA → KLUCZE API (punkt II.16, 2026-09-27)

   Klucz widać raz, więc okienko z nim musi być nie do przeoczenia
   — stąd ramka i tło inne niż reszta ekranu.
========================================================= */

.api-key-new{
  border-color:rgba(52,211,153,.35);
  background:linear-gradient(135deg,rgba(52,211,153,.1),rgba(255,255,255,.03));
}

.api-key-value{
  margin:10px 0;
  padding:14px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.22);
  font-family:monospace;
  font-size:13px;
  overflow-wrap:anywhere;
  user-select:all;
}

.api-key-scopes{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:12px 0;
}

.api-key-scope{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
}

.api-key-scope small{
  display:block;
  margin-top:2px;
  color:var(--muted2);
  font-size:12px;
}

.api-key-note{
  margin-top:10px;
}

.note-warning{
  padding:11px 13px;
  border:1px solid rgba(251,191,36,.24);
  border-left-width:3px;
  border-radius:12px;
  background:rgba(251,191,36,.08);
  font-size:12px;
  line-height:1.5;
}

.api-doc p{
  margin:10px 0 6px;
  font-size:13px;
}

.api-doc-code{
  margin:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.22);
  font-family:monospace;
  font-size:12px;
  line-height:1.6;
  overflow-x:auto;
  white-space:pre;
}

/* =========================================================
   KOD QR KIEROWCY (punkt II.20, 2026-09-27)

   Biały kwadrat na ciemnym tle — czytniki potrzebują kontrastu,
   a ekran panelu jest ciemny. Kod na ciemnym tle się nie skanuje.
========================================================= */

.qr-karta{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:10px;
}

.qr-obrazek{
  padding:10px;
  border-radius:14px;
  background:#ffffff;
  line-height:0;
}

.qr-opis{
  flex:1;
  min-width:180px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}

.qr-licznik{
  font-family:monospace;
  font-size:13px;
  color:var(--muted2);
}

/* Poniżej minuty — żeby nie zaczynać skanowania na ostatnią chwilę. */
.qr-licznik-konczy{
  color:#ffd772;
}

.qr-czekanie{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px;
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--muted2);
  font-size:13px;
}

.qr-czekanie-ikona{
  font-size:22px;
}

/* =========================================================
   OKNO FAKTURY: DOKUMENT OBOK PÓL
   (punkt II.15, przebudowa 2026-09-28)

   Oskar: „otwiera mi się okno gdzie od razu widzę zdjęcie i wpisane
   dane które mogę poprawić".

   Dwie kolumny na szerokim ekranie, jedna pod drugą na wąskim —
   na telefonie dokument nad polami, bo najpierw się patrzy,
   potem poprawia.
========================================================= */

/*
  Dokument dostaje mniej miejsca niż pola — i to jest świadome.

  Zgłosił Oskar 2026-09-28: „dalej są za małe pola: dostawca, chyba
  NIP, numer faktury".

  Po połowie brzmi sprawiedliwie, ale te dwie połowy służą do czego
  innego. Dokument ma teraz LUPĘ i przycisk „Otwórz w nowej karcie",
  więc jego ciasnota da się naprawić jednym kliknięciem. Ciasnoty
  pola z nazwą firmy nie da się naprawić niczym — napis albo się
  mieści, albo wychodzi za krawędź.
*/
.faktura-okno{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:16px;
  margin-top:12px;
}

@media (max-width:900px){
  .faktura-okno{
    grid-template-columns:minmax(0,1fr);
  }
}

.faktura-dokument{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  min-width:0;
}

/* =========================================================
   KARTA KIEROWCY — SEKCJE (2026-09-30)
   =========================================================

   Karta ma trzynascie sekcji w kolejnosci ustalonej przez Oskara.
   Tytul sekcji jest mniejszy od naglowka strony, bo to podzial
   wewnatrz jednego ekranu, a nie trzynascie osobnych ekranow.
========================================================= */
.karta-sekcja{
  margin-top:14px;
}

.karta-sekcja-tytul{
  margin:0 0 2px;
  font-size:15px;
  font-weight:850;
  letter-spacing:-.01em;
}

.karta-sekcja > .muted,
.karta-sekcja-tresc > .muted{
  margin:0 0 10px;
  font-size:12px;
}

/* Wartosci, ktore sie czyta znak po znaku: konta, PESEL, VIN, NIP. */
.monospace-wartosc{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}

.karta-sekcja-podgrupa{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.karta-sekcja-podgrupa > span{
  display:block;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:6px;
}

.lista-wyjatkow{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.6;
}

.lista-wyjatkow small{
  display:block;
  font-size:11.5px;
}

/* Pasek akcji karty — na gorze, bo dawniej byl i na gorze, i na dole. */
.karta-pasek-akcji{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:14px;
}

/* =========================================================
   SEKCJA ZWIJANA I LOGI
   =========================================================

   `<details>` przegladarki, bez wlasnego przelacznika w SP.state.
   Strzalke rysujemy sami, bo domyslny trojkat wyglada inaczej
   w kazdej przegladarce.
========================================================= */
.karta-sekcja-zwijana > summary{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  list-style:none;
}

.karta-sekcja-zwijana > summary::-webkit-details-marker{
  display:none;
}

.karta-sekcja-zwijana > summary::before{
  content:'▸';
  color:var(--muted);
  font-size:12px;
  transition:transform .12s ease;
}

.karta-sekcja-zwijana[open] > summary::before{
  transform:rotate(90deg);
}

.karta-sekcja-tresc{
  margin-top:12px;
}

/*
  LOGI: jeden wiersz na wpis. Poprzednia wersja rysowala kazdy
  rozwiniety, ze zmianami w ramkach — przy kierowcy z rocznym stazem
  byl to ekran dluzszy niz cala reszta karty razem.
*/
.log-lista{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

.log-wpis{
  border-bottom:1px solid var(--line);
  font-size:12px;
}

.log-lista > .log-wpis:last-child{
  border-bottom:0;
}

/*
  Uklad wiersza loga powtarzam w dwoch regulach, zamiast zbierac je
  w jeden selektor z przecinkiem.

  Powod jest konkretny: przy wersji z przecinkiem `.log-wpis-plaski`
  bylby zdefiniowany DWA RAZY (raz uklad, raz przezroczystosc), a test
  spojnosc-css.js trzyma zapadke na liczbie takich selektorow i ta
  zapadka ma tylko schodzic w dol. Piec powtorzonych linii jest tansze
  niz podnoszenie zapadki, ktora pilnuje calego pliku.
*/
.log-wpis > summary{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:7px 12px;
  list-style:none;
  cursor:pointer;
}

.log-wpis > summary::-webkit-details-marker{
  display:none;
}

.log-wpis > summary:hover{
  background:rgba(255,255,255,.04);
}

/* Wpis bez szczegolow nie udaje, ze da sie go rozwinac. */
.log-wpis-plaski{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:7px 12px;
  opacity:.75;
}

.log-data{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  color:var(--muted);
  flex:0 0 auto;
}

.log-akcja{
  font-weight:750;
}

.log-kto{
  margin-left:auto;
  font-size:11px;
}

.log-szczegoly{
  padding:2px 12px 10px 12px;
  background:rgba(0,0,0,.18);
}

.log-szczegoly > p{
  margin:0 0 8px;
  font-size:12px;
}

.log-zmiana{
  display:grid;
  grid-template-columns:minmax(120px,180px) minmax(0,1fr);
  gap:4px 12px;
  padding:4px 0;
}

.log-zmiana > span{
  font-size:11px;
  color:var(--muted);
}

.log-zmiana > div{
  font-size:12px;
  overflow-wrap:anywhere;
}

.log-zmiana s{
  color:var(--muted);
}

@media (max-width:640px){
  .log-zmiana{
    grid-template-columns:minmax(0,1fr);
  }

  .log-kto{
    margin-left:0;
  }
}

/* =========================================================
   PANEL ADMINISTRATORA: TESTY I KATALOG (2026-09-30)
   =========================================================

   Katalog i dokumentacja to dlugie listy zwijanych kart — jedna
   kolumna, nie siatka. Dwie kolumny zwijanych sekcji skacza w gore
   i w dol przy kazdym otwarciu i nie da sie ich czytac.
========================================================= */
.admin-katalog{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.admin-test{
  border-top:1px solid var(--line);
  font-size:12.5px;
}

.admin-modul > .admin-test:first-of-type{
  border-top:0;
}

.admin-test > summary{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:7px 0;
  cursor:pointer;
  list-style:none;
}

.admin-test > summary::-webkit-details-marker{
  display:none;
}

.admin-test-nazwa{
  font-weight:700;
}

.admin-test-tresc{
  padding:0 0 10px;
}

.admin-test-tresc > .muted{
  margin:0 0 8px;
  font-size:12px;
  line-height:1.55;
}

/* =========================================================
   PANEL ADMINISTRATORA (2026-09-30)
   =========================================================

   Dokumentacja i sprawdzenie systemu. Kazdy modul to karta
   z czterema wierszami: gdzie trzyma dane, koncowki, czego pilnuje
   baza i CZEGO SWIADOMIE NIE MA.

   Ostatni wiersz jest wyrozniony, bo to najwazniejsza informacja
   w calej dokumentacji: brak funkcji wyglada jak niedokonczona
   robota, dopoki nie jest napisane, ze to decyzja.
========================================================= */
.admin-moduly{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
  gap:12px;
  margin-top:10px;
}

@media (max-width:1000px){
  .admin-moduly{
    grid-template-columns:minmax(0,1fr);
  }
}

.admin-modul{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.03);
}

.admin-modul-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.admin-modul-head h3{
  margin:0;
  font-size:16px;
  letter-spacing:-.02em;
}

.admin-modul-wiersz{
  padding:8px 0;
  border-top:1px solid var(--line);
}

.admin-modul-wiersz > span{
  display:block;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:3px;
}

.admin-modul-wiersz > p{
  margin:0;
  font-size:12.5px;
  line-height:1.5;
}

.admin-modul-wiersz code{
  display:inline-block;
  font-size:11px;
  padding:1px 5px;
  margin:1px 2px 1px 0;
  border-radius:6px;
  background:rgba(255,255,255,.06);
}

/* „Czego swiadomie nie ma" — wyrozniony, bo to nie brak, a decyzja. */
.admin-modul-wiersz.wazne{
  background:rgba(251,191,36,.07);
  border-radius:10px;
  padding:8px 10px;
  margin-top:4px;
}

.admin-komenda{
  margin:0 0 10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.28);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  color:#c4b5fd;
  overflow-x:auto;
}

/* =========================================================
   OSOBNY WIDOK APLIKACJI KIEROWCY (2026-09-30)
   =========================================================

   `index.html?widok=kierowca` — ta sama strona bez ramy panelu.
   Ukrywamy MENU I PASEK GORNY, a nie usuwamy ich z drzewa: powrot
   do panelu ma byc jednym klikniecieem, nie przeladowaniem.

   To jeszcze nie osobna aplikacja i tak jest napisane na pasku
   u gory. Kierowcy nie maja wlasnego logowania, wiec ten widok
   otwiera osoba z biura — udawanie czegos innego skonczyloby sie
   przekonaniem, ze kierowca to juz widzi.
========================================================= */
body.widok-kierowcy .sidebar,
body.widok-kierowcy .topbar{
  display:none;
}

body.widok-kierowcy .main{
  margin:0;
  padding:0;
}

body.widok-kierowcy .page{
  padding:0;
}

/*
  Telefon na srodku i z zapasem u gory. W panelu stoi pod naglowkiem,
  tu nie ma nad nim nic poza paskiem powrotu.
*/
body.widok-kierowcy .driver-app-stage{
  padding:14px 12px 28px;
}

.widok-kierowcy-pasek{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:12px;
  color:var(--muted);
}

/* =========================================================
   TYTUL KARTY — TO NIE TO SAMO CO NAGLOWEK STRONY
   =========================================================

   Naglowki stron znikly 2026-09-29. Zostaly TRZY tytuly, ktore
   naglowkami stron nie sa i niosa informacje:

     - formularz kontaktu: z KIM rozmawiamy i ktory to kontakt,
     - dwie karty czyszczenia bazy: ktora kasuje moduly, a ktora
       cala baze.

   Bez nich pierwszy formularz jest anonimowy, a na drugim ekranie
   stoja dwa przyciski kasujace dane i nie wiadomo, ktory jest ktory.
========================================================= */
.karta-tytul{
  margin:0 0 14px;
}

.karta-tytul h2{
  margin:0 0 4px;
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.03em;
}

.karta-tytul p{
  margin:0;
  font-size:12.5px;
  line-height:1.45;
}

/*
  Zasada, po ktorej modul uklada dane — na przyklad progi kontaktu
  w Utrzymaniu klienta. Nie opis modulu (ten znikl), a informacja,
  bez ktorej nie wiadomo, skad wziely sie terminy na liscie.
*/
.zasada-modulu{
  margin:0 0 12px;
  font-size:12.5px;
}

/*
  Pasek z samymi przyciskami — to, co zostalo z naglowka strony
  (2026-09-29). Bez tytulu nie ma czego wyrownywac do lewej, wiec
  przyciski ida do prawej i pasek jest niski.
*/
.subhead.subhead-akcje{
  margin:0 0 12px;
  align-items:center;
}

.subhead.subhead-akcje > div:first-child{
  flex:1 1 auto;
  min-width:0;
}

/* =========================================================
   GRAFIK W APLIKACJI KIEROWCY (II.19 etap 4 — 2026-09-29)
   =========================================================

   Kierowca oglada to na telefonie, wiec zmiany sa listą, nie
   tabelką: siedem dni po dwie zmiany nie zmiesci sie w szerokosci
   telefonu, a jego i tak dotyczy tylko kilka z nich.
========================================================= */
.driver-app-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.driver-app-note{
  margin:6px 0 10px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.driver-app-badge{
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  white-space:nowrap;
}

/*
  „Propozycja" i „obowiazuje" MUSZA sie roznic kolorem, nie tylko
  slowem. Plan ostrzega: kierowca planujacy zycie wokol propozycji,
  ktora sie zmieni, to gotowa skarga.
*/
.driver-app-badge.ok{
  border-color:rgba(52,211,153,.35);
  background:rgba(52,211,153,.12);
  color:#a7f3d0;
}

.driver-app-badge.warn{
  border-color:rgba(251,191,36,.38);
  background:rgba(251,191,36,.12);
  color:#fde68a;
}

.driver-app-shifts{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.driver-app-shift{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.04);
  font-size:12.5px;
}

.driver-app-shift-data{
  display:block;
  font-size:11px;
  color:var(--muted);
}

.driver-app-shift-prawa{
  display:flex;
  align-items:center;
  gap:8px;
  text-align:right;
}

.driver-app-shift-zmiana{
  font-weight:800;
  white-space:nowrap;
}

.driver-app-shift-zmiana.noc{
  color:#c4b5fd;
}

.driver-app-shift-auto{
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* =========================================================
   GRAFIK 50/50 (punkt II.19, etap 2 — 2026-09-28)
   =========================================================

   Auta w wierszach, dni w kolumnach, w każdej komórce dwie obsady:
   dzienna i nocna. Jedno auto obsługuje dwóch kierowców na dobę —
   tak ustalono (decyzja 16).
========================================================= */
.grafik-pasek{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

/*
  Siedem dni po dwie obsady nie zmieści się na żadnym ekranie bez
  przewijania. Przewija się TABELA, nie strona — inaczej przy
  przewijaniu w prawo ucieka menu i nagłówek.
*/
.grafik-panel table{
  min-width:1100px;
}

.grafik-panel .table-wrap,
.grafik-panel > div:last-child{
  overflow-x:auto;
}

.grafik-auto{
  white-space:nowrap;
  vertical-align:top;
}

.grafik-dzien{
  vertical-align:top;
  min-width:150px;
}

.grafik-slot{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:6px;
}

.grafik-slot:last-child{
  margin-bottom:0;
}

.grafik-slot > span{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}

.grafik-slot select{
  width:100%;
  min-height:34px;
  font-size:12.5px;
  padding:5px 7px;
}

/*
  Dziura w grafiku musi KŁUĆ W OCZY. Auto bez obsady nie zarabia,
  a przy siedmiu dniach i dwóch zmianach pusta lista wygląda tak
  samo jak wypełniona, jeśli nic jej nie wyróżnia.
*/
.grafik-slot.dziura select{
  border-color:rgba(251,191,36,.45);
  background:rgba(251,191,36,.10);
}

/*
  Licznik zmian jest NA GÓRZE, nie w raporcie. Plan ostrzega: „kto
  dostanie więcej zmian, ten więcej zarobi (...) reguła musi być
  widoczna, inaczej pierwszy spór o grafik będzie sporem o zaufanie".
*/
.grafik-licznik{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:6px 12px;
  margin-top:8px;
}

.grafik-licznik-wpis{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  font-size:13px;
}

.grafik-licznik-wpis b{
  font-variant-numeric:tabular-nums;
}

.grafik-licznik-wpis.brakuje{
  border-color:rgba(251,191,36,.40);
  background:rgba(251,191,36,.10);
}

/* =========================================================
   MNIEJSZE KAFELKI Z LICZBAMI
   =========================================================

   Oskar 2026-09-28: „zmniejsz rozmiar KPI".

   Trzy kafelki zajmowały górę ekranu i spychały listę faktur
   poniżej krawędzi. Liczba „2" nie potrzebuje tyle miejsca co
   tabela, na którą się przyszło popatrzeć.

   Zmniejszamy TYLKO tam, gdzie dopiszemy klasę `kpi-male` —
   tych samych kafelków używa pulpit, flota i windykacja,
   a o nich nie było mowy.
========================================================= */
/*
  Węższe, a nie tylko niższe.

  Oskar 2026-09-28, po pierwszym podejściu: „zmniejsz szerokość
  KPI". Siatka nad tabelą miała dwie kolumny po pół ekranu, więc
  kafelek z liczbą „2" ciągnął się przez siedemset punktów.

  `auto-fit` z górną granicą 190 px daje kafelki tak szerokie, jak
  potrzebują, i dosuwa je do lewej. Przy trzech kafelkach zajmują
  teraz mniej więcej jedną trzecią tego, co przedtem.
*/
.kpi-male{
  grid-template-columns:repeat(auto-fit,minmax(0,190px));
  justify-content:start;
  gap:10px;
}

.kpi-male .kpi-card{
  padding:10px 12px;
  border-radius:14px;
}

.kpi-male .kpi-card strong{
  font-size:20px;
  line-height:1.1;
}

.kpi-male .kpi-card span{
  font-size:11px;
}

.kpi-male .kpi-card small{
  font-size:11px;
}

.faktury-pasek-gorny{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:8px;
}

/* Wybór kolumn: dwie kolumny pól, żeby jedenaście pozycji
   mieściło się bez przewijania. */
.wybor-kolumn{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:6px 16px;
  margin:8px 0 4px;
}

.wybor-kolumny{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
}

.wybor-kolumny:hover{
  background:rgba(255,255,255,.04);
}

/* =========================================================
   OPIS, KATEGORIA I ROZLICZENIE POD PRZYCISKAMI
   =========================================================

   Oskar 2026-09-28: „opis przenieś na dół pod przyciski i powiększ
   pole, tak samo kategoria kosztu i rozliczenie".
========================================================= */
.faktura-opis{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.faktura-opis-pole{
  width:100%;
  min-height:76px;
  resize:vertical;
  font-size:14px;
  line-height:1.45;
}

.faktura-opis-dwa{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}

@media (max-width:760px){
  .faktura-opis-dwa{
    grid-template-columns:minmax(0,1fr);
  }
}

.faktura-pole-duze{
  width:100%;
  min-height:42px;
  font-size:14px;
}

/* Kwoty w tabeli czyta się pionowo, wiec do prawej i cyframi
   o równej szerokości — inaczej setki i tysiące nie stoją w słupku. */
td.kwota{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* =========================================================
   OKNO FAKTURY JEST SZERSZE NIŻ POZOSTAŁE
   =========================================================

   Oskar 2026-09-28: „powiększ okno podglądu faktury".

   Zwykłe okienko ma 980 px. Tutaj obok siebie stoją DWIE rzeczy,
   z których każda chce całej szerokości: dokument do przeczytania
   i dziesięć pól do poprawienia. Przy 980 px dokument dostawał
   niecałe 480 px, czyli mniej niż połowę kartki A4 — i trzeba było
   go otwierać w nowej karcie, żeby cokolwiek zobaczyć.
========================================================= */
.modal.faktura-modal{
  width:min(1520px,97vw);
  max-height:94vh;
}

/* =========================================================
   LUPA
   =========================================================

   Oskar 2026-09-28: „dodaj możliwość lupy tak, aby podejrzeć
   dokument".

   Powiększenie robimy `transform: scale()` na samym podglądzie,
   a przewijanie bierze na siebie ramka wokół. To działa tak samo
   dla zdjęcia i dla PDF-a w ramce — a powiększanie przez zmianę
   szerokości działałoby tylko dla zdjęcia.

   `transform-origin` w lewym górnym rogu, żeby powiększenie
   rozwijało dokument w dół i w prawo, a nie uciekało spod kursora.
========================================================= */
.faktura-podglad-ramka{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#ffffff;
}

/* Zawartość rośnie NAPRAWDĘ (szerokością), więc ramka ma czym
   przewijać. Transformacji tu nie ma — patrz komentarz przy
   SP_zmienPowiekszenie. */
.faktura-podglad-ramka > *{
  display:block;
  max-width:none;
}

.faktura-lupa{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.faktura-lupa .btn{
  min-height:30px;
  padding:4px 10px;
  font-size:12px;
}

.faktura-lupa-ile{
  min-width:52px;
  text-align:center;
  font-size:12px;
  color:var(--muted2);
  font-variant-numeric:tabular-nums;
}

/* =========================================================
   PRZYCISKI DECYZJI
   =========================================================

   Oskar 2026-09-28: „zmniejsz przyciski odrzuć, zapisz dane,
   zatwierdź, odrzuć ma być czerwony i obok zatwierdź, a zapisz
   dane ma być po lewej stronie".

   Zapis danych to nie jest decyzja — to zapamiętanie poprawek.
   Stoi osobno, po lewej. Po prawej stoją dwie decyzje, obok siebie,
   bo wybiera się jedną z nich.
========================================================= */
.faktura-decyzje,
.okno-stopka{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding-top:14px;
  margin-top:14px;
  border-top:1px solid var(--line);
}

.faktura-decyzje-prawa,
.okno-stopka-prawa{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.faktura-decyzje .btn,
.okno-stopka .btn{
  min-height:34px;
  padding:6px 14px;
  font-size:13px;
}

/* Podglądowi dajemy tło i wysokość — pusta ramka wygląda jak błąd. */
.faktura-podglad{
  display:block;
  width:100%;
  background:#ffffff;
  object-fit:contain;
}

/*
  Zdjęcie: wysokość z proporcji, a kursor mówi, że da się kliknąć
  i powiększyć. Ramka PDF-a proporcji nie ma, więc dostaje wysokość
  wprost — i nie zmieniamy przy niej kursora, bo kliknięcie w PDF
  należy do przeglądarki.
*/
img.faktura-podglad{
  height:auto;
  cursor:zoom-in;
}

iframe.faktura-podglad{
  height:68vh;
  border:0;
}

.faktura-dokument-czeka{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:60vh;
  min-height:320px;
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--muted2);
  font-size:13px;
}

.faktura-nowa-karta{
  align-self:flex-start;
}

.faktura-pola{
  min-width:0;
}

/* =========================================================
   POLA NA DANE SZERSZE, BO DANE BYWAJĄ DŁUGIE
   =========================================================

   Oskar 2026-09-28: „powiększ pola na dane, ponieważ niektóre dane
   są większe i się chowają".

   Siatka miała sztywno dwie kolumny. W oknie faktury każda z nich
   wychodziła na jakieś 350 punktów — dość na datę i na kwotę, za
   mało na „CASTORAMA POLSKA SPÓŁKA Z OGRANICZONĄ
   ODPOWIEDZIALNOŚCIĄ". Nazwa nie znikała, tylko chowała się poza
   krawędź pola i trzeba było w nie kliknąć i przewinąć, żeby
   sprawdzić, czy odczytała się w całości.

   `auto-fit` z minimum 240 px sam decyduje, ile kolumn się zmieści:
   na szerokim ekranie dwie, na wąskim jedna. A pola, w których
   z natury stoją długie napisy, dostają całą szerokość.
========================================================= */
/*
  Trzy kolumny NA STAŁE, a nie „ile się zmieści".

  `auto-fit` wyglądał rozsądnie, ale liczba kolumn zmieniała się
  z szerokością okna — a pola zajmujące całą szerokość rozsypywały
  wtedy resztę. NIP zostawał sam w wierszu, z dwoma pustymi
  miejscami obok, i to właśnie widział Oskar jako „rozrzucone
  nierównomiernie".

  Przy trzech kolumnach wiersz wypełnia się dokładnie: napis długi
  zajmuje dwie kolumny, krótki jedną.
*/
.faktura-pola .form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

/*
  Dostawca i numer faktury zajmują DWIE kolumny z trzech — tam
  stoją najdłuższe napisy na całym dokumencie. Obok nich mieści się
  NIP i data, więc wiersz jest pełny.
*/
.faktura-pola .form-grid .pole-dwa{
  grid-column:span 2;
}

.faktura-pola .form-grid .pole-szerokie{
  grid-column:1/-1;
}

@media (max-width:1100px){
  .faktura-pola .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .faktura-pola .form-grid .pole-dwa{
    grid-column:1/-1;
  }
}

/*
  =========================================================
  KWOTY: CZTERY RÓWNE KOLUMNY, ZAWSZE W JEDNYM WIERSZU
  =========================================================

  Te cztery liczby czyta się RAZEM: netto plus VAT musi dać brutto,
  a stawka musi się z nimi zgadzać. Rozdzielone między wiersze każą
  sprawdzać to oczami w dwóch miejscach.
*/
.faktura-kwoty{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

@media (max-width:1100px){
  .faktura-kwoty{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.faktura-kwoty .input{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Wyższe i odrobinę większym pismem — te pola się CZYTA, porównując
   z dokumentem obok, a nie tylko wypełnia. */
/* =========================================================
   ETYKIETA NAD POLEM, NIE OBOK NIEGO
   =========================================================

   TO BYŁA PRAWDZIWA PRZYCZYNA „rozjechanych pól".

   Oskar zgłaszał to trzy razy, a ja za każdym razem poprawiałem
   SIATKĘ — liczbę kolumn, szerokości, co gdzie się rozciąga.
   Siatka była w porządku. Problem siedział WEWNĄTRZ komórki.

   Każde pole to `<label><span>Nazwa</span><input></label>`.
   A `label` jest domyślnie elementem liniowym: napis i pole
   ustawiają się OBOK SIEBIE, jak dwa wyrazy w zdaniu.

   Napisy mają różną długość — „NIP dostawcy" kontra „Data
   wystawienia" — więc każde pole zaczynało się w innym miejscu
   i miało inną szerokość. Tak właśnie wygląda „rozjechane".

   W całym panelu nie ma na to reguły. Moduł floty trafił na to
   samo i dopisał ją TYLKO DLA SIEBIE
   (`.fleet-damage-form-grid > label`, linia ~6597) — co znaczy,
   że pozostałe okienka mają ten sam problem do dziś. Napisałem
   o tym Oskarowi; tutaj naprawiam okno faktury.
========================================================= */
.faktura-pola label,
.faktura-kwoty label,
.faktura-opis label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

/*
  Pole wypełnia szerokość komórki. Bez tego `input` bierze swoją
  domyślną szerokość z przeglądarki (jakieś 170 punktów) i kolumny
  wyglądają na puste w połowie.
*/
.faktura-pola .input,
.faktura-pola select,
.faktura-pola textarea,
.faktura-kwoty .input,
.faktura-kwoty select,
.faktura-opis .input,
.faktura-opis select,
.faktura-opis textarea{
  width:100%;
  min-height:44px;
  font-size:14.5px;
  box-sizing:border-box;
}

/* Napis nad polem: mały, spokojny, jednej wysokości wszędzie —
   inaczej pola w jednym wierszu zaczynałyby się na różnym poziomie. */
.faktura-pola label > span,
.faktura-kwoty label > span,
.faktura-opis label > span{
  display:block;
  min-height:14px;
  line-height:1.25;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.065em;
  font-weight:850;
}

/* Dolne krawędzie pól w jednym wierszu muszą się zgadzać także
   wtedy, gdy jeden napis złamie się na dwie linie. */
.faktura-pola .form-grid > label,
.faktura-kwoty > label{
  justify-content:flex-end;
}