: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 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;
}
.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}
.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,.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}
.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}.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}.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)}
.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))}.split{grid-template-columns: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}.subhead h2{font-size:25px}.page-icon{width:40px;height:40px;border-radius:14px}.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}}
/* =========================================================
   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);
}

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

/* ---------- 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-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-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%;
  }
}

/* ---------- 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));
  }
}

@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,.detail-grid{
    grid-template-columns:1fr;
  }

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

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

  .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).
========================================================= */

/* =========================================================
  REKLAMACJE I ZAPYTANIA — JEDNA LISTA W RAMCE (V5, 2026-10-12)

  Oskar: „nowy wygląd, na pewno mniejszy, bo strasznie duże są
  zamknięte sprawy". Otwarte i zamknięte: ten sam wiersz (7 kolumn),
  wiersze rozdzielone kreską, jak „Flota → Przekazania aut".
  `details` przy zamkniętych robi rozwijanie samo.
========================================================= */

.claims-szukaj{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.claims-szukaj > .claims-kierowca{
  flex:0 0 240px;
  max-width:100%;
}

.claims-szukaj > :not(.claims-kierowca){
  flex:1 1 320px;
}

.claims-lista{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}

.claims-closed{
  gap:0;
}

.claim-row{
  display:grid;
  grid-template-columns:84px 92px minmax(140px,1.4fr) 132px minmax(90px,.8fr) 92px 118px;
  align-items:center;
  gap:12px;
  padding:9px 14px;
  font-size:13px;
}

.claim-row > .badge{
  justify-self:start;
}

.claim-row-glowka{
  padding-top:8px;
  padding-bottom:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(255,255,255,.02);
}

.claim-closed,
.claim-item{
  border-top:1px solid var(--line);
}

/*
  Ogólny wygląd `details` (ramka, tło, odstęp, „▸" przed napisem,
  gruby biały tekst) jest dla sekcji rozwijanych — tu `details` to
  wiersz listy. `:root .claims-lista >` podnosi wagę reguły ponad
  ogólne `details` i jego wersję w trybie jasnym (motyw-jasny.css).
*/
:root .claims-lista > details.claim-closed{
  margin:0;
  padding:0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
}

:root .claims-lista > details.claim-closed > summary{
  font-weight:400;
  color:inherit;
}

.claim-closed > .claim-closed-head::before{
  content:none;
}

.claim-closed-head{
  cursor:pointer;
  list-style:none;
}

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

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

.claim-closed[open] > .claim-closed-head{
  background:rgba(59,159,224,.08);
}

.claim-closed-number strong{
  font-weight:800;
}

.claim-closed-driver{
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.claim-row-kind,
.claim-closed-phone,
.claim-closed-city,
.claim-closed-age{
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

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

.claim-item-wnetrze{
  border-top:1px dashed var(--line);
}

.claim-row-otwarta{
  background:rgba(59,159,224,.05);
}

.claim-item-body{
  padding:4px 14px 14px;
}

.claim-item-meta{
  margin:8px 0 0;
  font-size:12px;
}

.claim-item-text{
  margin:8px 0 0;
  font-size:14px;
}

@media(max-width:900px){
  .claim-row{
    grid-template-columns:84px minmax(0,1fr) auto;
  }

  .claim-row-kind,
  .claim-closed-phone,
  .claim-closed-city,
  .claim-closed-age{
    display:none;
  }

  .claim-row-glowka span:nth-child(2),
  .claim-row-glowka span:nth-child(4),
  .claim-row-glowka span:nth-child(5),
  .claim-row-glowka span:nth-child(6){
    display:none;
  }
}

/*
  POLE ODPOWIEDZI.

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

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

.claim-reply-input{
  width:100%;
  min-height:96px;
  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-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 .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;
}

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

@media(max-width:900px){
  .settlement-rule-grid.two{
    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;
  }
}

/* =========================================================
   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:6px;
  margin-top:10px;
}

.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-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{
  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{
  color:var(--input-placeholder);
}

.settings-system-editor select option,.settlement-mapping-card select option,.control-formula-row 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-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{
  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{
  background:#ffffff;
  color:#111827;
  border:1px solid #d1d5db;
}

.settings-system-editor .control-formula-row 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ń.

   2026-10-13: ten komentarz NIE BYŁ ZAMKNIĘTY — połykał selektor
   `.settings-system-sidebar` i reguły aż do komentarza „Notice” niżej. Skutek:
   lista systemów i zasad rozliczeń zostawała jasnoszara (stare
   rgba(255,255,255,.7)) w ciemnym panelu. Pilnuje tests/css-komentarze.js.
========================================================= */

.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-system-item{
  color:var(--muted2);
}

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

.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,.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,.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,.fleet-form input::placeholder,.fleet-form textarea::placeholder{
  color:var(--input-placeholder) !important;
}

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

.settings-system-editor 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,.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{
  color:#fff !important;
}

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

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

.settlement-rule-fields input,.settlement-rule-fields select,.settlement-rule-fields 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,.settlement-rule-fields select option{
  background:var(--panel) !important;
  color:var(--text) !important;
}

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

.settings-system-editor .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,.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{
  background:rgba(0,0,0,.10);
  border:1px solid var(--line);
}

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

.settings-system-editor 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 */






@media (max-width: 720px) {

}
/* =========================================================
   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-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-history-panel
.timeline-item{
  padding:16px 16px 16px 46px;
}

@media(max-width:1180px){

  .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-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{
  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{
  display:block;
  margin-bottom:6px;
  color:#fff;
}

.status-info-box p{
  margin:0;
  color:var(--muted2);
}

/* ---------- 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,.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 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);
}

/* Czek BLIK na żądanie (M5, 2026-10-13) — karta na ekranie rozliczeń. */
.driver-blik{
  display:grid;
  gap:8px;
}

.driver-blik h3{
  margin-bottom:2px;
}

.driver-blik-pozycja{
  display:grid;
  gap:8px;
}

.driver-blik-pozycja > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  font-size:12.5px;
}

.driver-blik-pozycja small,
.driver-blik > small{
  color:var(--muted);
  font-size:11.5px;
}

.driver-blik .driver-blik-uwaga{
  font-size:11.5px;
}

.driver-blik-czeki{
  display:grid;
  gap:4px;
  padding-top:6px;
  border-top:1px solid var(--line);
}

.driver-blik-czeki > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}

.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;
}

/* 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
========================================================= */





/* Wybor roli - piec kafelkow. */

















/*
  Poziom dostepu. Kolor mowi, co jest ustawione - przy piecdziesieciu
  wierszach czytanie samych napisow zajmuje za dlugo.
*/





@media(max-width:700px){

}

/* 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-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".
*/
/*
  Kółko z liczbą (N2, Oskar 2026-10-12: „zmień wygląd kółka z liczbą").
  Pełniejsze, z gradientem i cieniem, tak samo jak licznik w aplikacji
  kierowcy — jeden znak „coś na ciebie czeka" w obu aplikacjach.
*/
.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  margin-left:auto;
  border-radius:999px;
  background:linear-gradient(180deg,#ff6b6b,#e0453a);
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(224,69,58,.45), inset 0 1px 0 rgba(255,255,255,.25);
  animation:navBadgeWejscie .35s ease-out;
}

@keyframes navBadgeWejscie{
  from{transform:scale(.4);opacity:0}
  to{transform:scale(1);opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .nav-badge{animation:none}
}

/* =========================================================
   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);
}

/*
  Stan CZEKANIA zasłony (2026-10-12). W panelu zostaje z napisami;
  aplikacja kierowcy pokazuje w nim samo kółko (kierowca.css, M4).
*/
/* Odpowiedź „tak" w danych ZUS na karcie kierowcy (P3, 2026-10-12). */
.zus-tak {
  color: var(--warning, #f0b429);
  font-weight: 800;
}

/* Oczko podglądu hasła (R1, 2026-10-12) — doklejane do każdego pola hasła w utils.js. */
.oczko-pole {
  position: relative;
  display: block;
}

.oczko-pole input {
  width: 100%;
  padding-right: 46px;
}

.oczko-przycisk {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.oczko-przycisk:hover,
.oczko-przycisk[aria-pressed="true"] {
  color: var(--text);
}

/* =========================================================
   FLOTA → PRZEKAZANIA AUT (przebudowa T6, 2026-10-12)
========================================================= */

.przekazanie-akcje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.przekazanie-akcja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(59,159,224,.10), rgba(59,159,224,0) 60%), var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}

.przekazanie-akcja:hover {
  border-color: var(--acc, #3b9fe0);
  transform: translateY(-1px);
}

.przekazanie-akcja strong {
  font-size: 16px;
}

.przekazanie-akcja span {
  color: var(--muted);
  font-size: 13px;
}

.przekazanie-akcja b {
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(59,159,224,.14);
  color: var(--acc, #3b9fe0);
  font-size: 12px;
}

.przekazanie-problemy {
  border-color: rgba(255,107,107,.45);
}

.przekazanie-lista {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.przekazanie-wiersz {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.przekazanie-wiersz-problem {
  border-color: rgba(255,107,107,.45);
}

.przekazanie-wiersz-glowa {
  display: grid;
  grid-template-columns: 110px 150px 1fr auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.przekazanie-wiersz-glowa:hover {
  background: rgba(255,255,255,.03);
}

.przekazanie-auto {
  font-weight: 800;
}

.przekazanie-rodzaj {
  color: var(--muted);
  font-size: 13px;
}

.przekazanie-wiersz-tresc {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--line);
}

.przekazanie-protokol {
  margin-top: 8px;
}

.przekazanie-paliwo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.przekazanie-kreska {
  width: 26px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}

.przekazanie-kreska.przekazanie-kreska-pelna {
  border-color: transparent;
  background: var(--acc, #3b9fe0);
}

.przekazanie-zdjecie-slot {
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  border-style: dashed;
  background: rgba(255,255,255,.03);
}

.przekazanie-zdjecie-slot.przekazanie-zdjecie-gotowe {
  border-style: solid;
  border-color: rgba(64,192,128,.6);
}

@media (max-width: 700px) {
  .przekazanie-wiersz-glowa {
    grid-template-columns: 1fr auto;
  }
}

/* Zdjęcia protokołu przekazania auta (R3, 2026-10-12). */
.przekazanie-zdjecia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.przekazanie-zdjecie {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.przekazanie-zdjecie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.przekazanie-zdjecie span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #fff;
  font-size: 11px;
}

.sp-wysylka-czekanie {
  cursor: progress;
}

.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;
}

/* =========================================================
   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;
}

/* Pilny kontakt — kierowcy bez obrotu (2026-10-14). */
.ret-pilne {
  border-color: var(--danger);
}

.ret-pilny {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.ret-pilny p {
  margin: 4px 0 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 --- */

/* =========================================================
   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;
}

/* (2026-10-13) Tu stały .cost-invoice-hint i .cost-invoice-weak — od dawna nieużywane;
   porządki z c1c5570 rozcięły ich komentarze i zostawiły osierocone reguły. Usunięte. */

/* =========================================================
   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;
  }
}

/* (2026-10-13) Tu stały style panelu administratora (.admin-katalog, .admin-moduly…) —
   przeniesione do admin.css przy rozdzieleniu narzędzi; porządki z c1c5570 rozcięły
   ich komentarze i zostawiły osierocone reguły. Usunięte. */

/* =========================================================
   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;
}

/* 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);
}

.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-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;
}

@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;
}

/* =========================================================
   KÓŁKO OCZEKIWANIA APLIKACJI KIEROWCY (2026-10-12)

   Tutaj, a nie w kierowca.css, bo te same ekrany rysuje podgląd
   aplikacji w panelu. Oskar: „nie ma być »wczytuję Twoje dane«,
   tylko kółeczko oczekiwania".
========================================================= */

.kierowca-kolko{
  display:inline-block;
  width:36px;
  height:36px;
  border:3px solid var(--line, rgba(0,0,0,.12));
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spLadowanieObrot .9s linear infinite;
}

.kierowca-kolko-male{
  width:16px;
  height:16px;
  border-width:2px;
  vertical-align:middle;
  border-color:rgba(255,255,255,.4);
  border-top-color:#fff;
}

@media (prefers-reduced-motion: reduce){
  .kierowca-kolko{ animation-duration:2.5s; }
}

/* =========================================================
   KOMUNIKACJA — KROKI, SZUKAJKA, KANAŁY (U2/U3, 2026-10-12)
========================================================= */

.kom-sekcja {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.kom-sekcja:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.kom-krok {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kom-krok h4 {
  margin: 2px 0 2px;
  font-size: 15px;
}

.kom-krok p {
  margin: 0;
  font-size: 13px;
}

.kom-krok-nr {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(59,159,224,.14);
  color: var(--acc, #3b9fe0);
  font-weight: 800;
  font-size: 13px;
}

.kom-lista {
  display: grid;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.kom-kierowca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.kom-kierowca:hover {
  background: rgba(255,255,255,.04);
}

.kom-kierowca-wybrany {
  background: rgba(59,159,224,.10);
}

.kom-kierowca-nazwa {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kom-pusto {
  padding: 10px;
}

.kom-wybrani {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kom-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  background: rgba(59,159,224,.14);
  font-size: 13px;
  font-weight: 600;
}

.kom-chip button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.kom-chip button:hover {
  background: rgba(255,255,255,.08);
  color: inherit;
}

.kom-kanaly {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.kom-kanal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.kom-kanal:hover:not(:disabled) {
  border-color: var(--acc, #3b9fe0);
}

.kom-kanal:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.kom-kanal-wybrany {
  border-color: var(--acc, #3b9fe0);
  background: rgba(59,159,224,.12);
}

.kom-kanal-znacznik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

.kom-kanal-wybrany .kom-kanal-znacznik {
  border-color: var(--acc, #3b9fe0);
  background: rgba(59,159,224,.18);
  color: var(--acc, #3b9fe0);
}

.kom-temat {
  max-width: 320px;
}

.kom-podglad-tresc {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* Komunikacja: duże pole treści (V2). */
/* Waga 0,3,2 — reguła motywu dla pól (0,3,0) ustawiała niską wysokość. */
:root body textarea.input.kom-tresc {
  min-height: 380px;
  resize: vertical;
  line-height: 1.5;
}

/* =========================================================
   FAKTURY — OKIENKO (V6, 2026-10-12)
========================================================= */

/*
  Większe okienko. `motyw.css` ustawia każdemu okienku 860 px
  regułą nowego motywu dla `.modal` (waga 0,3,0) — przebijała dotychczasowe
  1520 px dla faktury i okienko było wąskie. `:root body` daje 0,3,1.
*/
:root body .modal.faktura-modal {
  width: min(1680px, 97vw);
  max-height: 95vh;
  min-height: min(880px, 92vh);
}

.faktura-nawigacja {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.faktura-nawigacja .muted {
  min-width: 56px;
  text-align: center;
  font-size: 12px;
}

/* Zaakceptuj — zielony, Odrzuć — czerwony (V6). */
.btn.btn-akceptuj {
  background: #1f9d55;
  border-color: #1f9d55;
  color: #ffffff;
}

.btn.btn-akceptuj:hover {
  background: #23b061;
  border-color: #23b061;
}

.btn.btn-odrzuc {
  background: #d64545;
  border-color: #d64545;
  color: #ffffff;
}

.btn.btn-odrzuc:hover {
  background: #e05252;
  border-color: #e05252;
}

.faktura-do-folderu-akceptuj {
  border-color: rgba(31,157,85,.55);
}

.faktura-do-folderu-odrzuc {
  border-color: rgba(214,69,69,.55);
}

.faktura-decyzje-prawe {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
}

/* Pasek „Jest nowa wersja panelu" (nowa-wersja.js, 2026-10-12). */
.nowa-wersja-pasek {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(720px, 94vw);
  padding: 12px 16px;
  border: 1px solid var(--line2);
  border-radius: 14px;
  background: var(--panel2);
  box-shadow: var(--shadow2);
  font-size: 13px;
}

/* Komunikat „DUPLIKAT" w okienku faktury (2026-10-12). */
.faktura-duplikat {
  margin-top: 10px;
  border: 1px solid rgba(214,69,69,.75);
  background: rgba(214,69,69,.16);
}

.faktura-duplikat strong {
  color: #ff8a8a;
}

.faktura-duplikat-lista {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.faktura-duplikat-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Faktury: formularz nowego folderu osobno od tabeli (X2). */
.faktury-nowy-folder {
  display: flex;
  justify-content: flex-end;
}

.faktury-nowy-folder .input {
  min-width: 260px;
}

.btn.btn-usun {
  color: #ff8a8a;
}

/* Komunikacja: grupy po mieście i systemie prowizji (X5). */
.kom-grupy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.kom-grupy > select {
  flex: 0 1 260px;
}

/* =========================================================
   USTAWIENIA → E-MAIL → WZORY WIADOMOŚCI (X6, 2026-10-12)
========================================================= */

.wzory-maili{margin-top:18px}
.wzory-maili-zakladki{margin:0 0 12px;flex-wrap:wrap}
.wzory-maili-zakladki .tab{display:inline-flex;align-items:center;gap:8px}
.wzory-maili-zakladki .status{font-size:11px}
.wzory-maili-wlacz{margin:6px 0 14px}
.wzory-maili-edycja{min-width:0}
.wzory-maili-edycja .form-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wzory-maili-edycja .form-grid .input{width:100%}
.wzory-maili-uklad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.wzory-maili-html{width:100%;min-height:320px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5;resize:vertical}
.wzory-maili-zmienne{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wzory-maili-zmienne .chip{cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wzory-maili-podglad{display:flex;flex-direction:column;gap:8px;position:sticky;top:12px}
.wzory-maili-naglowek{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:13px;overflow-wrap:anywhere}
.wzory-maili-ramka{width:100%;height:520px;border:1px solid var(--line);border-radius:12px;background:#ffffff}
.wzory-maili-akcje{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wzory-maili-akcje .input{max-width:280px}
.wzory-maili-odstep{flex:1}
@media (max-width:1100px){
  .wzory-maili-uklad{grid-template-columns:minmax(0,1fr)}
  .wzory-maili-podglad{position:static}
}

/* =========================================================
   USTAWIENIA — PORZĄDKI X7 (2026-10-12)

   1. Pola w sekcjach zasad (Parametry operacyjne) układały się
      W LINII: etykieta, pole i podpowiedź obok siebie, podpowiedź
      łamana w pół. Etykieta nad polem, podpowiedź pod nim.
   2. `.notice strong` jest blokiem (nagłówek komunikatu) — ale
      pogrubienie W ŚRODKU zdania rozbijało je na trzy linie.
========================================================= */

.settlement-rule-section .form-grid > label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.settlement-rule-section .form-grid > label > .input{
  width:100%;
}

.notice p strong,
.notice li strong{
  display:inline;
  margin:0;
}

/* =========================================================
   KRZYWE POLA W OKIENKACH — JEDNA REGUŁA (A8, 2026-10-12)

   134 miejsca `.form-grid` w 46 plikach. Etykieta, pole i podpowiedź
   stały W LINII, więc pole zaczynało się tam, gdzie skończył się napis,
   i miało domyślną szerokość przeglądarki. Ta sama poprawka działa od
   2026-09-28 w oknie faktury (`.faktura-pola`) i we flocie.

   Pola wyboru (checkbox, radio) zostają w linii — napis obok kwadratu.
========================================================= */

.form-grid > label:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])){
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.form-grid > label:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) > :is(.input, input, select, textarea){
  width:100%;
  box-sizing:border-box;
}

/* Pole wyboru OBOK napisu, nie nad nim (A8, Ustawienia floty).
   `.fleet-form label` stawiało każdą etykietę w kolumnie — także tę
   z kwadratem. */
.settings-checks > label:has(> input[type="checkbox"]),
.settings-checks > label:has(> input[type="radio"]){
  flex-direction:row;
  align-items:center;
  gap:10px;
}

/* =========================================================
   USTAWIENIA → HISTORIA ZMIAN (D2, 2026-10-12)
========================================================= */

.historia-ustawien{display:flex;flex-direction:column;gap:8px}
.historia-ustawien-wpis{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.historia-ustawien-naglowek{width:100%;display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 14px;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer}
.historia-ustawien-naglowek:hover{background:var(--soft,rgba(255,255,255,.04))}
.historia-ustawien-strzalka{margin-left:auto}
.historia-ustawien-tresc{padding:0 14px 14px}
.historia-ustawien-roznice td{vertical-align:top;overflow-wrap:anywhere}

/* =========================================================
   KAMPANIE W APLIKACJI KIEROWCY — KARUZELA (punkt 1, 2026-10-12)

   Tu, a nie w kierowca.css: ten sam ekran rysuje podgląd aplikacji
   w panelu. Przewijanie natywne (scroll-snap), sąsiednie karty
   wystają z boków, aktywna pełna, pozostałe pomniejszone i odchylone.
========================================================= */

.mkt-karuzela{
  margin:var(--o-4,16px) calc(-1 * var(--o-3,12px)) 0;
  perspective:900px;
}

.mkt-tor{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 7%;
  padding:6px 7% 10px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.mkt-tor::-webkit-scrollbar{display:none}

.mkt-karta{
  --mkt-strona:0;
  position:relative;
  flex:0 0 86%;
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(59,159,224,.22), rgba(255,255,255,.04));
  border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  transform:scale(.92) rotateY(calc(var(--mkt-strona) * -6deg));
  opacity:.82;
  transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease;
  cursor:pointer;
}

.mkt-karta.aktywna{
  transform:scale(1) rotateY(0deg);
  opacity:1;
  box-shadow:0 18px 44px rgba(0,0,0,.36);
}

.mkt-jedna .mkt-tor{padding:6px 0 10px; scroll-padding:0}
.mkt-jedna .mkt-karta{flex-basis:100%; transform:none; opacity:1}

.mkt-grafika{
  width:100%;
  aspect-ratio:16 / 8;
  object-fit:cover;
  display:block;
}

.mkt-tresc{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 18px 18px;
}

.mkt-naglowek{
  font-size:18px;
  line-height:1.25;
  color:var(--text);
}

.mkt-opis{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:var(--muted2, var(--muted));
}

.mkt-akcje{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.mkt-cta,
.mkt-potwierdz{
  border:0;
  border-radius:12px;
  padding:11px 16px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
}

.mkt-cta{
  background:var(--brand, #3B9FE0);
  color:var(--tekst-na-akcencie);
}

.mkt-potwierdz{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line2, var(--line));
}

.mkt-cta:disabled,
.mkt-potwierdz:disabled{opacity:.6; cursor:default}

.mkt-zrobione{
  align-self:center;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}

.mkt-rodzaj-wazny{border-color:rgba(255,107,107,.55)}
.mkt-rodzaj-bonus{background:linear-gradient(160deg, rgba(56,214,155,.22), rgba(255,255,255,.04))}

.mkt-kropki{
  display:flex;
  justify-content:center;
  gap:6px;
  padding-bottom:4px;
}

.mkt-kropka{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--line2, rgba(255,255,255,.25));
  transition:width .25s ease, background .25s ease;
  cursor:pointer;
}

.mkt-kropka.aktywna{
  width:20px;
  background:var(--brand, #3B9FE0);
}

@media (prefers-reduced-motion: reduce){
  .mkt-karta{transition:none}
}

/* =========================================================
   MARKETING — PANEL (punkt 1, 2026-10-12)
========================================================= */

.mkt-kroki{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.mkt-kroki button{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:999px;
  padding:6px 12px;
  font-weight:700;
  cursor:pointer;
}

.mkt-kroki li.aktywny button{
  background:var(--brand, #3B9FE0);
  border-color:var(--brand, #3B9FE0);
  color:var(--tekst-na-akcencie);
}

.mkt-kroki li.zrobiony button{color:var(--text)}

.mkt-drzewo{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
}

.mkt-drzewo-naglowek{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.mkt-grupa{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-left:12px;
}

.mkt-grupa > .mkt-drzewo{align-self:stretch}

.mkt-warunek{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr) auto;
  gap:8px;
  align-items:center;
}

.mkt-kierowcy{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:6px;
  max-height:260px;
  overflow:auto;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
}

.mkt-kierowcy label{display:flex; gap:8px; align-items:center}

.mkt-grafika-podglad{
  max-width:420px;
  width:100%;
  border-radius:14px;
  display:block;
}

.mkt-podglad-uklad{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.mkt-podglad-telefon{
  padding:16px;
  border-radius:24px;
  background:var(--panel, #0b1a2c);
  border:1px solid var(--line);
}

@media (max-width:900px){
  .mkt-podglad-uklad{grid-template-columns:minmax(0,1fr)}
  .mkt-warunek{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   NAGŁÓWEK APLIKACJI KIEROWCY — LOGO MARKI (punkt 2, 2026-10-12)
========================================================= */

.driver-app-naglowek{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 2px 14px;
}

.driver-app-logo-przycisk{
  display:flex;
  align-items:center;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.driver-app-logo{
  height:34px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  display:block;
}

/* =========================================================
   USTAWIENIA → BRANDING APLIKACJI (punkt 2, 2026-10-12)
   Podgląd logo na obu tłach aplikacji — logo musi być czytelne
   w jasnym i w ciemnym wyglądzie.
========================================================= */

.branding-podglady{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}

.branding-podglad{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
}

.branding-podglad-ciemne{background:#0b1726; color:#c7d3e3}
.branding-podglad-jasne{background:#f4f7fb; color:#43546b}

.branding-naglowek{
  display:flex;
  align-items:center;
  min-height:48px;
}

.branding-naglowek img{
  height:40px;
  width:auto;
  max-width:220px;
  object-fit:contain;
}

/* =========================================================
   APLIKACJA KIEROWCY — USTAWIENIA (punkt 3, 2026-10-12)
========================================================= */

.driver-app-ikona-przycisk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}

.driver-app-tytul{
  margin:12px 0 14px;
  font-size:22px;
  color:var(--text);
}

.driver-app-karta-ustawien{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
}

.driver-app-karta-ustawien h3{margin:0; font-size:16px; color:var(--text)}

/* Kod polecający w profilu aplikacji kierowcy (2026-10-14). */
.driver-app-kod-polecajacy{
  margin:6px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:26px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--text);
}

.driver-app-karta-ustawien + .driver-app-karta-ustawien{margin-top:14px}

.driver-app-wybor{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.driver-app-opcja{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.driver-app-opcja small{color:var(--muted)}

.driver-app-opcja.wybrana{
  border-color:var(--brand, #3B9FE0);
  box-shadow:inset 0 0 0 1px var(--brand, #3B9FE0);
}

/* =========================================================
   MENU ZWINIĘTE — JEDEN ZESTAW IKON (punkt 4, 2026-10-12)

   Oskar: „po zwinięciu menu pojawiają się ikony starego motywu (…)
   napisy wychodzą poza obszar (…) ujednolić zestaw ikon, rozmiary,
   grubość linii, odstępy".

   Ikony to liniowe SVG z `assets/js/ikony.js` (kolor `currentColor`),
   więc biorą kolor napisu menu — w jasnym, ciemnym i w stanie aktywnym.

   Napisy wychodziły, bo reguła kropki przeglądu (`.nav-item[data-przeglad]
   .nav-label { display:inline-flex }` w motyw.css) ma większą wagę niż
   `display:none` wyżej w tym pliku. Tu chowamy napis selektorem o większej
   wadze (bez `!important`) — w zwiniętym menu NIC poza ikoną nie zostaje.

   Kropka przeglądu przy zwiniętym menu siedzi na rogu ikony.
========================================================= */

.nav button .nav-icon .ikona {
  display:block;
  width:18px;
  height:18px;
  flex:none;
}

@media(min-width:769px) {
  body.sidebar-collapsed .nav {
    justify-items:center;
    gap:4px;
  }

  body.sidebar-collapsed .nav button {
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:38px;
    padding:0;
    border-radius:11px;
    color:var(--muted2);
    transform:none;
    transition:background .16s ease,color .16s ease;
  }

  body.sidebar-collapsed .nav button > .nav-icon {
    display:grid;
    place-items:center;
    position:relative;
    width:auto;
    height:auto;
    min-width:0;
    background:transparent;
    border:0;
  }

  /* Mniejsze ikony w zwiniętym menu (Oskar, 2026-10-13): 22 → 18 px, przycisk 48×44 → 42×38. */
  body.sidebar-collapsed .nav button > .nav-icon .ikona {
    width:18px;
    height:18px;
  }

  body.sidebar-collapsed .nav .nav-label,
  body.sidebar-collapsed .nav-item[data-przeglad="wymaga"] .nav-label,
  body.sidebar-collapsed .nav button > small,
  body.sidebar-collapsed .nav button > .nav-badge {
    display:none;
  }

  body.sidebar-collapsed .nav button:hover {
    background:rgba(127,140,160,.16);
    color:var(--text);
  }

  body.sidebar-collapsed .nav button.active {
    background:rgba(59,159,224,.18);
    color:var(--brand2);
    box-shadow:inset 0 0 0 1px rgba(59,159,224,.32);
  }

  body.sidebar-collapsed .nav button.active:before {
    display:none;
  }

  body.sidebar-collapsed .nav-item[data-przeglad="wymaga"] > .nav-icon::after {
    content:"";
    position:absolute;
    top:-3px;
    right:-5px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#FF6B6B;
  }

  .sidebar,
  .app-shell {
    transition:width .2s ease,min-width .2s ease,grid-template-columns .2s ease;
  }
}



/* Przycisk „Odśwież" w nagłówku aplikacji kierowcy (2026-10-13) — obok koła zębatego. */
.driver-app-naglowek .driver-app-odswiez{
  margin-left:auto;
}

.driver-app-naglowek .driver-app-odswiez + .driver-app-ikona-przycisk{
  margin-left:0;
}

/* Dokumentacja API — części numerowane (2026-10-13). */
.api-doc .api-doc-tytul{
  margin:18px 0 8px;
  font-size:14px;
  font-weight:800;
}

.api-doc .api-doc-tytul:first-child{
  margin-top:0;
}

.api-doc .api-doc-kroki{
  margin:0 0 10px;
  padding-left:20px;
  display:grid;
  gap:6px;
}

.api-key-akcje{
  white-space:nowrap;
}

/* White label — ekran Branding (2026-10-13). */
.branding-wybor{
  display:flex;
  align-items:center;
  gap:10px;
}

.branding-kolor{
  display:flex;
  align-items:center;
  gap:8px;
}

.branding-kolor input[type="color"]{
  width:44px;
  height:38px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}

.branding-probka{
  display:flex;
  align-items:center;
  gap:12px;
}

.branding-probka img{
  border-radius:10px;
}

.branding-probka-przycisk{
  display:inline-flex;
  padding:9px 16px;
  border-radius:12px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,var(--probka,var(--brand)),var(--probka2,var(--brand2)));
}

/* Podgląd marki na żywo (rozbudowa white label, 2026-10-13). */
.branding-telefon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.branding-telefon-pole{
  width:100%;
  max-width:240px;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#9fb0c6;
  font-size:13px;
}

.branding-ikona-telefonu{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin:12px 0;
  font-size:12px;
}

.branding-ikona-telefonu img{
  border-radius:14px;
}

.branding-mail{
  width:100%;
  height:440px;
  border:0;
  border-radius:12px;
  background:#fff;
}

.sidebar .brand-logo .brand-logo-obraz{
  max-width:100%;
  height:auto;
  max-height:52px;
  object-fit:contain;
}

/* =========================================================
   PODPOWIEDŹ ZWINIĘTEGO MENU (2026-10-13) — assets/js/menu-podpowiedz.js
   position:fixed: zwinięty pasek ma overflow:hidden i obcinał
   podpowiedź z ::after (ta jest wyłączona niżej — jedna, nie dwie).
========================================================= */
.menu-podpowiedz{
  position:fixed;
  z-index:10000;
  transform:translateY(-50%);
  padding:7px 11px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel, #111827);
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}

body.sidebar-collapsed .nav button:hover::after,
body.sidebar-collapsed .nav button:hover::before{
  content:none;
  display:none;
}

/* =========================================================
   KOMUNIKACJA: TREŚĆ TEKST ALBO HTML (2026-10-13)
========================================================= */
.kom-format{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}



/* HTML wiadomości (podgląd w panelu i aplikacja kierowcy) — tylko dozwolone znaczniki. */
.driver-app-tresc-html{
  line-height:1.55;
  overflow-wrap:anywhere;
}

.driver-app-tresc-html p,
.driver-app-tresc-html ul,
.driver-app-tresc-html ol,
.driver-app-tresc-html blockquote{
  margin:0 0 8px;
}

.driver-app-tresc-html ul,
.driver-app-tresc-html ol{
  padding-left:20px;
}

.driver-app-tresc-html h2,
.driver-app-tresc-html h3{
  margin:4px 0 8px;
  font-size:15px;
}

.driver-app-tresc-html a{
  color:var(--brand2);
  text-decoration:underline;
}

.driver-app-tresc-html blockquote{
  padding-left:10px;
  border-left:3px solid var(--line);
  color:var(--muted);
}

/* =========================================================
   MARKETING: BANER NA DOLE — WZÓR ETERNIS (2026-10-13)
   Duża karta nad menu: hasło z lewej, grafika z prawej,
   zaokrąglone rogi, cała karta klikalna. Kolor z marki (white label).
========================================================= */
.mkt-banery{
  display:grid;
  gap:12px;
  margin:16px 0 4px;
}

.mkt-baner{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:112px;
  padding:16px 18px;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg, var(--brand, #3B9FE0), var(--brand2, #7FC4EE));
  box-shadow:0 14px 34px rgba(var(--brand-rgb, 59,159,224), .28);
  transition:transform .14s ease;
}

.mkt-baner:active{
  transform:scale(.985);
}

.mkt-baner-tresc{
  position:relative;
  z-index:1;
  display:grid;
  gap:4px;
  flex:1 1 auto;
  min-width:0;
}

.mkt-baner-tresc strong{
  font-size:18px;
  font-weight:900;
  line-height:1.15;
}

.mkt-baner-tresc span{
  font-size:12.5px;
  opacity:.92;
  line-height:1.4;
}

.mkt-baner-tresc em{
  justify-self:start;
  margin-top:6px;
  padding:5px 11px;
  border-radius:99px;
  background:rgba(255,255,255,.2);
  font-style:normal;
  font-size:12px;
  font-weight:800;
}

.mkt-baner.z-grafika .mkt-baner-tresc{
  max-width:58%;
}

.mkt-baner-grafika{
  position:absolute;
  right:-6px;
  bottom:0;
  width:46%;
  height:100%;
  object-fit:contain;
  object-position:right bottom;
}

/* Kreator: wybór wyglądu kampanii. */
.mkt-wyglady{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

.mkt-wyglad{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.mkt-wyglad small{
  color:var(--muted);
}

.mkt-wyglad.wybrany{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand);
}


/* Przełączniki „można nadpisać przy aucie": dwie kolumny, zwykłe litery (2026-10-13). */
.fleet-form .settings-checks{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:8px;
}

.fleet-form .settings-checks label{
  margin:0;
}

.fleet-form .settings-checks label span{
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
  font-size:13px;
}

/* Spis sekcji długich edytorów (2026-10-13) — assets/js/spis-sekcji.js. */
.spis-sekcji{
  position:sticky;
  top:8px;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel, #11162a);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.spis-sekcji-link{
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:99px;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.spis-sekcji-link:hover{
  border-color:var(--brand);
  color:var(--brand2);
}


/* =========================================================
   EDYTOR HTML (2026-10-13) — assets/js/edytor-html.js
========================================================= */
.edytor-html{
  margin-top:6px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--input-bg, rgba(255,255,255,.04));
}

.edytor-html-pasek{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  padding:6px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.edytor-html-przycisk{
  min-width:32px;
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}

.edytor-html-przycisk:hover,
.edytor-html-przycisk.aktywny{
  border-color:var(--line);
  background:rgba(var(--brand-rgb, 59,159,224), .14);
}

.edytor-html-przycisk:disabled{
  opacity:.4;
  cursor:default;
}

.edytor-html-odstep{
  flex:1 1 auto;
}

.edytor-html-pole{
  min-height:180px;
  max-height:480px;
  overflow:auto;
  padding:14px 16px;
  outline:none;
  line-height:1.55;
  color:var(--text);
}

.edytor-html-pole:empty::before{
  content:attr(data-pusty);
  color:var(--muted);
}

.edytor-html-pole a{
  color:var(--brand2);
  text-decoration:underline;
}

.edytor-html-pole blockquote{
  margin:0 0 8px;
  padding-left:10px;
  border-left:3px solid var(--line);
  color:var(--muted);
}

.edytor-html .edytor-html-kod.input{
  width:100%;
  border:0;
  border-radius:0;
  min-height:180px;
}

/* Miniatura tła logowania w Brandingu (2026-10-13). */
.branding-tlo-miniatura{
  width:120px;
  height:72px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
}

/* Pasek zapisu Brandingu — zawsze widoczny u góry zakładki (2026-10-13). */
.branding-pasek-zapisu{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel, var(--bg));
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}