/* ==========================================================================
   panel.css — wygląd panelu GREMIX, motyw „Ocean Depths”
   Źródło wartości: docs/makieta-ocean-depths/ (blok <style> + Elementy.dc.html).
   Zasady: kolory tylko przez zmienne z :root / [data-theme="light"];
   style trafiają do prawdziwych elementów (button, a[role=button], input, select),
   a klasy z makiety (.btn, .btn2, .chip, .badge, .panel …) są ich odpowiednikami.
   ========================================================================== */

/* ---------- czcionka: DejaVu Sans z bot/fonts/ (trasa /fonts/<plik>) ---------- */
@font-face{
  font-family:'DejaVu Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:local('DejaVu Sans'), url('/fonts/DejaVuSans.ttf') format('truetype');
}
@font-face{
  font-family:'DejaVu Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:local('DejaVu Sans Bold'), url('/fonts/DejaVuSans-Bold.ttf') format('truetype');
}

/* ---------- tokeny: motyw ciemny (domyślny) ---------- */
:root{
  --bg:#1a2332;            /* tło strony */
  --side:#141c29;          /* pasek boczny / górny */
  --surface:#212c3d;       /* karta */
  --surface-2:#243246;     /* przycisk drugorzędny, pola wyboru */
  --surface-3:#29374b;     /* tor paska, ikona osi czasu */
  --card-line:#2f4057;     /* obrys karty */
  --field:#172030;         /* pole formularza */
  --line:#34465e;          /* linie mocniejsze */
  --line-2:#2a384c;        /* linie słabsze */
  --th-bg:#1e2a3a;         /* nagłówek tabeli */
  --row-hl:#26364b;        /* wiersz najechany */
  --nav-active:#22394a;    /* aktywna pozycja menu */
  --ink:#f1faee;           /* tekst */
  --ink-2:#d6e4e8;         /* tekst w chipach, podpisy słupków */
  --ink-soft:#a9bac6;      /* tekst drugorzędny */
  --ink-nav:#b9c8d2;       /* pozycje menu */
  --ink-faint:#71869a;     /* wyciszony: ikony, elementy dekoracyjne, tekst >= 18 px (3,7:1) */
  --ink-faint-text:#8a9db0;/* wyciszony do MAŁEGO tekstu (5,0:1) */
  --accent:#2d8b8b;        /* akcent: paski, obrysy, tło ikon */
  --accent-on:#257575;     /* tło aktywnego chipa / przełącznika (5,1:1 z tekstem) */
  --accent-soft:#1f4a55;   /* tło ikon skrótów, badge teal */
  --accent-2:#a8dadc;      /* jasny akcent: przycisk główny, linki, najlepszy słupek */
  --accent-2-hover:#c3e8e9;
  --on-accent-2:#0f1b26;   /* tekst na przycisku głównym */
  --link:#a8dadc;
  --alert:#f4a58a;         /* uwaga / flaga */
  --alert-line:#d97a5f;    /* obrys pola z błędem */
  --alert-glow:rgba(217,122,95,0.25);
  --focus-glow:rgba(45,139,139,0.35);
  --btn-line:#bfe6e7; --btn2-line:#3a4f69; --btn2-hover:#2c3d55; --btn2-hover-line:#4a6280;
  --btn-disabled:#3a5260; --btn-disabled-ink:#7f95a3;
  --chip-bg:#1d2839; --chip-line:#34465e; --count-bg:#2a384c;
  --chip-active-bg:#1f4a55; --chip-active-line:#2d8b8b; --chip-active-ink:#d6f0f0;
  --bar-status:#4a5d74;    /* słupek statusu (INNE/NIEOKREŚLONE …) */
  --grid-line:#27344a;
  --b-teal-bg:#1f4a55; --b-teal-ink:#a8dadc;
  --b-gray-bg:#2c3a4e; --b-gray-ink:#a9bac6;
  --b-coral-bg:#43302f; --b-coral-ink:#f4a58a;
  --b-green-bg:#20413a; --b-green-ink:#8fd3ad;
  --shadow:0 1px 2px rgba(5,10,20,0.35);
  --radius:8px; --radius-card:10px;
  --tap:44px;              /* minimalny cel dotykowy */
}

/* ---------- tokeny: motyw jasny (ta sama paleta, kontrast >= 4,5:1) ---------- */
html[data-theme="light"]{
  --bg:#f1faee; --side:#e4ecea; --surface:#ffffff; --surface-2:#e9f1f0; --surface-3:#dde7e6;
  --card-line:#d5dfe3; --field:#f6faf9; --line:#d5dfe3; --line-2:#e3eaec;
  --th-bg:#eef4f2; --row-hl:#e6f2f1; --nav-active:#d2eeee;
  --ink:#1a2332; --ink-2:#2a3a4c; --ink-soft:#4a5d74; --ink-nav:#2a3a4c;
  --ink-faint:#71869a; --ink-faint-text:#5f7386;
  --accent:#2d8b8b; --accent-on:#257575; --accent-soft:#d2eeee; --accent-2:#a8dadc;
  --accent-2-hover:#8fd0d2; --on-accent-2:#0f1b26; --link:#1f6f6f;
  --alert:#b5472b; --alert-line:#b5472b; --alert-glow:rgba(181,71,43,0.2);
  --focus-glow:rgba(45,139,139,0.3);
  --btn-line:#8fd0d2; --btn2-line:#c5d3d6; --btn2-hover:#dde9e8; --btn2-hover-line:#a9bcc0;
  --btn-disabled:#cfdada; --btn-disabled-ink:#7f8f95;
  --chip-bg:#ffffff; --chip-line:#c5d3d6; --count-bg:#e3eaec;
  --chip-active-bg:#d2eeee; --chip-active-line:#2d8b8b; --chip-active-ink:#1a2332;
  --bar-status:#9fb0bf; --grid-line:#e3eaec;
  --b-teal-bg:#d2eeee; --b-teal-ink:#1f4a55;
  --b-gray-bg:#e3e8ee; --b-gray-ink:#3a4a5e;
  --b-coral-bg:#fbe1d7; --b-coral-ink:#8f3a22;
  --b-green-bg:#d6eee0; --b-green-ink:#245c40;
  --shadow:0 1px 2px rgba(20,40,50,0.08);
}

/* ---------- baza ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'DejaVu Sans', Verdana, Geneva, sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--ink); text-decoration:underline; }
h1, h2, h3, h4{ margin:0; color:var(--ink); }
h1{ font-size:24px; font-weight:700; letter-spacing:-0.01em; }
h2{ font-size:24px; font-weight:700; letter-spacing:-0.01em; margin-bottom:18px; }
h4{ font-size:13px; font-weight:700; margin-bottom:12px; }
p{ margin:0 0 0.8em; }
.num, .mono{ font-family:'DejaVu Sans Mono', Menlo, Consolas, monospace; font-variant-numeric:tabular-nums; }
.muted{ color:var(--ink-soft); font-size:13px; }
.faint{ color:var(--ink-faint-text); }
.lbl{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em; }
.ptitle{ margin:0; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:0.01em; }
.psub{ margin:2px 0 0; font-size:12px; color:var(--ink-soft); }
.right{ text-align:right; }
.nowrap{ white-space:nowrap; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.stack{ display:flex; flex-direction:column; gap:4px; }
.grow{ flex-grow:1; min-width:0; }
svg.ikona{ width:18px; height:18px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- karty ---------- */
.panel, article{
  background:var(--surface); border:1px solid var(--card-line); border-radius:var(--radius-card);
  padding:20px 22px; box-shadow:var(--shadow); margin:0 0 14px;
}
.panel > :last-child, article > :last-child{ margin-bottom:0; }
.card{
  background:var(--surface); border:1px solid var(--card-line); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; margin-bottom:14px; }
.grid > .panel, .grid > article{ margin-bottom:0; }
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:36px 20px; border:1px dashed var(--line); border-radius:6px; text-align:center;
}
.empty .ikona{ width:28px; height:28px; color:var(--ink-faint); }
.empty strong{ font-weight:700; }
.empty .muted{ max-width:380px; }

/* ---------- KPI (kafelki) ---------- */
.kpi{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px; margin-bottom:14px; }
.kpi-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.kpi .panel, .spec{ display:flex; flex-direction:column; gap:8px; padding:18px 20px; margin:0; }
.kpi .lbl{ display:flex; align-items:center; gap:6px; }
.kpi .val, .spec .num{
  font-family:'DejaVu Sans Mono', Menlo, Consolas, monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(19px, 1.55vw, 26px); font-weight:700; color:var(--ink); letter-spacing:-0.02em; line-height:1.15;
  overflow-wrap:anywhere; white-space:nowrap;
}
.kpi .val.alert, .spec .num.alert{ color:var(--alert); }
.kpi .val.accent{ color:var(--accent-2); }
.kpi a.panel{ color:inherit; text-decoration:none; }
.kpi a.panel:hover{ background:var(--row-hl); }
/* zgodność ze starymi szablonami (.spec-strip / .spec / .spec .lbl) */
.spec-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); gap:14px; margin-bottom:14px; }
.spec{ background:var(--surface); border:1px solid var(--card-line); border-radius:var(--radius-card); box-shadow:var(--shadow); color:inherit; text-decoration:none; min-width:0; }
a.spec:hover{ background:var(--row-hl); text-decoration:none; }
.spec .lbl{ display:block; margin-top:2px; }

/* ---------- skróty (3 kafelki z ikoną) ---------- */
.skroty-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-bottom:14px; }
.skrot{ display:flex; align-items:center; gap:14px; padding:16px 18px; margin:0; color:inherit; text-decoration:none; }
.skrot:hover{ background:var(--row-hl); text-decoration:none; color:inherit; }
.skrot .ico{ width:38px; height:38px; border-radius:8px; background:var(--accent-soft); color:var(--b-teal-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.skrot .val{ font-size:18px; font-weight:700; white-space:nowrap; }
.skrot strong{ font-size:13px; }

/* ---------- przyciski ---------- */
button, a[role=button], input[type=submit], .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border-radius:var(--radius);
  background:var(--accent-2); color:var(--on-accent-2); font-family:inherit; font-size:13px; font-weight:700;
  letter-spacing:0.01em; border:1px solid var(--btn-line); cursor:pointer; white-space:nowrap; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.35);
}
button:hover, a[role=button]:hover, input[type=submit]:hover, .btn:hover{ background:var(--accent-2-hover); color:var(--on-accent-2); text-decoration:none; }
button:disabled, .btn:disabled, .btn[aria-disabled=true]{
  background:var(--btn-disabled); color:var(--btn-disabled-ink); border-color:var(--btn-disabled); box-shadow:none; cursor:not-allowed;
}
.btn2, button.secondary, a[role=button].secondary, button.btn2, a[role=button].btn2{
  background:var(--surface-2); color:var(--ink); font-weight:600; border:1px solid var(--btn2-line); padding:0 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.25);
}
.btn2:hover, button.secondary:hover, a[role=button].secondary:hover, button.btn2:hover, a[role=button].btn2:hover{ background:var(--btn2-hover); border-color:var(--btn2-hover-line); color:var(--ink); }
.btn-danger, button.btn-danger, a[role=button].btn-danger{ background:var(--surface-2); color:var(--alert); border-color:#6b4038; font-weight:600; }
.btn-danger:hover, button.btn-danger:hover, a[role=button].btn-danger:hover{ background:var(--b-coral-bg); border-color:var(--alert); color:var(--alert); }
.btn-ghost, button.btn-ghost, a[role=button].btn-ghost, a.btn-ghost{
  background:transparent; border-color:transparent; box-shadow:none; color:var(--link); font-weight:600; padding:0 10px; gap:6px;
}
.btn-ghost:hover, button.btn-ghost:hover, a[role=button].btn-ghost:hover, a.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.iconbtn, button.iconbtn, a.iconbtn, a[role=button].iconbtn{
  width:40px; height:40px; padding:0; border-radius:var(--radius); background:var(--surface-2); color:var(--link);
  border:1px solid var(--btn2-line); display:inline-flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; box-shadow:none;
}
.iconbtn:hover, button.iconbtn:hover, a.iconbtn:hover{ background:var(--btn2-hover); border-color:var(--btn2-hover-line); color:var(--link); }
.iconbtn .kropka{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--accent-2); color:var(--on-accent-2); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.btn .ikona, .btn2 .ikona, button .ikona, a[role=button] .ikona{ width:16px; height:16px; }
.btn-lg{ height:48px; font-size:14px; }

/* ---------- pola formularza ---------- */
label{ display:block; font-size:11px; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.08em; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field > label{ margin:0; }
input[type=text], input[type=number], input[type=month], input[type=password], input[type=search], input[type=email],
select, textarea, .input{
  width:100%; height:40px; border-radius:var(--radius); border:1px solid var(--line); background:var(--field); color:var(--ink);
  font-family:inherit; font-size:13px; padding:0 12px; box-shadow:inset 0 1px 2px rgba(0,0,0,0.25);
}
textarea{ height:auto; min-height:80px; padding:10px 12px; line-height:1.4; }
.input{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
select{
  -webkit-appearance:none; appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9bac6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
}
input::placeholder, textarea::placeholder{ color:var(--ink-faint-text); }
input:focus, select:focus, textarea:focus, .input-focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-glow); }
input:disabled, select:disabled{ opacity:0.55; cursor:not-allowed; }
input.is-error, select.is-error, .input.is-error{ border-color:var(--alert-line); box-shadow:0 0 0 3px var(--alert-glow); }
.field-error{ font-size:11px; color:var(--alert); }
input[type=checkbox], input[type=radio]{ width:16px; height:16px; accent-color:var(--accent); margin:0; flex-shrink:0; cursor:pointer; }
label.check{ display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--ink); margin:0; min-height:24px; cursor:pointer; }
datalist{ display:none; }
progress{ width:100%; height:8px; accent-color:var(--accent); border:none; border-radius:2px; background:var(--surface-3); }
progress::-webkit-progress-bar{ background:var(--surface-3); border-radius:2px; }
progress::-webkit-progress-value{ background:var(--accent); border-radius:2px; }
/* zgodność: stary układ filtrów */
.filters{ display:flex; gap:14px; flex-wrap:wrap; align-items:end; margin-bottom:14px; }
.filters > div{ flex:1; min-width:150px; }
.filters label label{ margin-top:0; }
.filters label input, .filters label select{ margin-top:6px; }
.filter-grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px; align-items:end; }
.filter-grid .span2{ grid-column:span 2; }
details summary{ cursor:pointer; color:var(--link); font-weight:600; list-style:none; }
details summary::-webkit-details-marker{ display:none; }
details summary::before{ content:'▸ '; color:var(--ink-faint); }
details[open] > summary::before{ content:'▾ '; }
details.wybor summary::before{ content:none; }

/* ---------- chipy, przełączniki, znaczniki ---------- */
.chip, a.chip{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:var(--radius);
  background:var(--chip-bg); color:var(--ink-2); font-size:12px; border:1px solid var(--chip-line); white-space:nowrap; text-decoration:none;
}
a.chip:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none; }
.chip-on, a.chip-on{ background:var(--accent-on); color:var(--ink); border-color:var(--accent); }
.chip-on .count{ background:rgba(0,0,0,0.25); color:var(--ink); }
html[data-theme="light"] .chip-on, html[data-theme="light"] a.chip-on{ color:#f1faee; }
html[data-theme="light"] .chip-on .count{ color:#f1faee; }
.chip-active, a.chip-active{ background:var(--chip-active-bg); border-color:var(--chip-active-line); color:var(--chip-active-ink); }
.chip-active .ikona{ width:12px; height:12px; color:var(--link); }
.count{ display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:5px; background:var(--count-bg); font-size:11px; color:var(--ink-2); }
.seg{ display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:var(--field); border:1px solid var(--line); }
.seg > span, .seg > button, .seg > a{
  display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:6px; font-size:12px; color:var(--ink-soft);
  background:transparent; border:none; box-shadow:none; font-weight:400; cursor:pointer; text-decoration:none;
}
.seg > .on, .seg > [aria-pressed=true]{ background:var(--accent-on); color:#f1faee; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,0.3); }
.seg > span:hover, .seg > button:hover{ color:var(--ink); background:var(--surface-2); }
.seg > .on:hover, .seg > [aria-pressed=true]:hover{ background:var(--accent-on); color:#f1faee; }
.badge{
  display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:0.02em; white-space:nowrap;
  background:var(--b-gray-bg); color:var(--b-gray-ink);
}
.b-teal{ background:var(--b-teal-bg); color:var(--b-teal-ink); }
.b-gray{ background:var(--b-gray-bg); color:var(--b-gray-ink); }
.b-coral{ background:var(--b-coral-bg); color:var(--b-coral-ink); }
.b-green{ background:var(--b-green-bg); color:var(--b-green-ink); }
/* typy notatek (stare klasy) i segmenty */
.badge-sprzedaz, .badge-seg-VIP{ background:var(--b-teal-bg); color:var(--b-teal-ink); }
.badge-propozycja, .badge-telefon, .badge-seg-Regularny{ background:var(--b-green-bg); color:var(--b-green-ink); }
.badge-brak, .badge-zamkniete, .badge-seg-Uśpiony{ background:var(--b-coral-bg); color:var(--b-coral-ink); }
.badge-inne, .badge-seg-Nowy, .badge-seg-Nigdy{ background:var(--b-gray-bg); color:var(--b-gray-ink); }
.flag{ display:inline-flex; align-items:center; gap:6px; color:var(--alert); font-weight:700; white-space:nowrap; }
.flag .ikona{ width:14px; height:14px; }
.flaga{ color:var(--alert); font-weight:700; white-space:nowrap; }

/* ---------- tabele ---------- */
table{ width:100%; border-collapse:collapse; }
th{ text-align:left; font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.07em; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--th-bg); white-space:nowrap; }
td{ padding:12px; border-bottom:1px solid var(--line-2); font-size:13px; color:var(--ink); vertical-align:middle; }
tbody tr:hover td, tr.hl td{ background:var(--row-hl); }
th a{ color:inherit; text-decoration:none; }
th a:hover{ color:var(--link); }
td a{ color:var(--ink); font-weight:700; }
td a:hover{ color:var(--link); }
td.num, th.num{ font-family:'DejaVu Sans Mono', Menlo, Consolas, monospace; font-variant-numeric:tabular-nums; }
td.dni{ white-space:nowrap; }
table.compact th, table.compact td{ padding:10px 12px; }
.panel.tabela, article.tabela{ padding:6px 10px 12px; }
.panel.tabela > .between, .panel.tabela > h4{ padding:12px 12px 8px; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.table-scroll > table{ min-width:640px; }

/* ---------- paski i wykresy (HTML/CSS) ---------- */
.bar-track{ height:10px; background:var(--surface-3); border-radius:2px; flex-grow:1; display:flex; overflow:hidden; }
.bar-track > span{ display:block; height:100%; background:var(--accent); border-radius:0 3px 3px 0; }
.bar-track > span.status{ background:var(--bar-status); }
.bar-row{ display:flex; align-items:center; gap:12px; }
.bar-row .name{ width:150px; flex-shrink:0; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row .name.w120{ width:120px; }
.bar-row .val{ width:44px; text-align:right; font-size:12px; color:var(--ink); }
.bar-list{ display:flex; flex-direction:column; gap:9px; }
.wykres{ position:relative; height:236px; display:flex; padding-left:52px; margin-top:16px; }
.wykres.h280{ height:280px; }
.wykres .obszar{ position:absolute; left:52px; right:0; top:0; bottom:26px; pointer-events:none; }
.wykres .siatka{ position:absolute; left:0; right:0; border-top:1px solid var(--grid-line); }
.wykres .siatka.os{ border-top-color:var(--line); }
.wykres .os-y{ position:absolute; left:-52px; width:46px; text-align:right; font-size:10px; color:var(--ink-faint-text); transform:translateY(50%); white-space:nowrap; }
.wykres .slupek{ flex-grow:1; flex-basis:0; display:flex; flex-direction:column; align-items:center; padding:0 5px; position:relative; z-index:1; min-width:0; height:100%; }
.wykres .slupek .bars{ flex-grow:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:0; }
.wykres .slupek .bar{ width:100%; max-width:44px; background:var(--accent); border-radius:4px 4px 0 0; min-height:2px; flex-shrink:0; }
.wykres .slupek.max .bar{ background:var(--accent-2); }
.wykres .slupek.biezacy .bar{ background:repeating-linear-gradient(135deg, var(--accent) 0 3px, #1f5f63 3px 6px); }
html[data-theme="light"] .wykres .slupek.biezacy .bar{ background:repeating-linear-gradient(135deg, var(--accent) 0 3px, #8fc9c9 3px 6px); }
.wykres .slupek .pod{ height:26px; flex-shrink:0; display:flex; align-items:center; font-size:11px; color:var(--ink-soft); white-space:nowrap; }
.wykres .slupek.biezacy .pod{ color:var(--ink); }
.wykres .slupek .nad{ font-size:10px; color:var(--ink-2); margin-bottom:4px; flex-shrink:0; }
.udzialy{ display:flex; height:14px; gap:2px; }
.udzialy > span{ display:block; height:100%; border-radius:3px; min-width:2px; }
.legenda-kropka{ display:inline-block; width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ---------- oś czasu ---------- */
.os-czasu{ display:flex; flex-direction:column; }
.os-wpis{ display:flex; gap:14px; }
.os-wpis .kolumna{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.os-wpis .ico{ width:34px; height:34px; border-radius:17px; background:var(--surface-3); border:1px solid #3d5570; color:var(--link); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.os-wpis .ico .ikona{ width:16px; height:16px; }
.os-wpis .kreska{ width:1px; flex-grow:1; background:var(--line); }
.os-wpis:last-child .kreska{ display:none; }
.os-wpis .tresc{ display:flex; flex-direction:column; gap:3px; padding-bottom:18px; flex-grow:1; min-width:0; }
.os-wpis .tresc .tytul{ display:flex; justify-content:space-between; gap:10px; font-weight:700; font-size:13px; }
.os-wpis .tresc .tytul .num{ font-weight:400; }
.os-wpis .badge{ align-self:flex-start; margin-top:2px; }
.os-wpis[hidden]{ display:none; }

/* ---------- lista danych (karta klienta) ---------- */
.dane-lista > div{ display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid var(--line-2); font-size:13px; }
.dane-lista > div:last-child{ border-bottom:none; }

/* ---------- komunikaty ---------- */
.flash, .callout{
  background:var(--b-coral-bg); border-left:3px solid var(--alert); color:var(--ink);
  padding:12px 16px; margin-bottom:14px; font-size:13px; border-radius:6px;
}
.callout-info{ background:var(--accent-soft); border-left-color:var(--accent); }
.err{ color:var(--alert); font-size:13px; margin-bottom:12px; }

/* ---------- logowanie ---------- */
body.login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login-box{ width:100%; max-width:380px; padding:32px 30px; display:flex; flex-direction:column; gap:6px; }
.login-box .logo{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.login-box input{ margin-bottom:14px; height:44px; }
.login-box button{ width:100%; height:44px; }
.logo-g{ width:34px; height:34px; border-radius:8px; background:var(--accent); color:#f1faee; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; }
.logo-nazwa{ font-weight:700; font-size:15px; letter-spacing:0.06em; color:var(--ink); }
.logo-sub{ font-size:11px; color:var(--ink-soft); }

/* ==========================================================================
   UKŁAD: komputer (>= 1200) menu boczne · tablet (768–1199) pasek ikon · telefon (< 768) górny pasek + dolne zakładki
   ========================================================================== */
.app{ display:flex; min-height:100vh; }
.sidenav{
  width:236px; flex-shrink:0; background:var(--side); border-right:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:18px; padding:22px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidenav .logo{ display:flex; align-items:center; gap:10px; padding:0 8px 6px; color:inherit; text-decoration:none; }
.sidenav .menu{ display:flex; flex-direction:column; gap:18px; }
.menu .grupa{ display:flex; flex-direction:column; gap:2px; }
.menu .grupa-nazwa{ padding:0 10px 6px; font-size:10px; color:var(--ink-faint-text); }
.menu a, .menu-btn{
  display:flex; align-items:center; gap:11px; height:36px; padding:0 10px; border-radius:6px;
  font-size:13px; color:var(--ink-nav); text-decoration:none; white-space:nowrap;
  background:transparent; border:none; box-shadow:none; font-weight:400; width:100%; justify-content:flex-start; cursor:pointer; font-family:inherit;
}
.menu a .ikona, .menu-btn .ikona{ color:var(--ink-faint); }
.menu a:hover, .menu-btn:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none; }
.menu a.active{ background:var(--nav-active); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent); }
.menu a.active .ikona{ color:var(--link); }
.sidenav-dol{ margin-top:auto; border-top:1px solid var(--line-2); padding-top:12px; display:flex; flex-direction:column; gap:2px; }
.sidenav-dol .menu-btn{ height:34px; }
.ikona-motyw-ciemny{ display:none; }
html[data-theme="light"] .ikona-motyw-ciemny{ display:inline-flex; }
html[data-theme="light"] .ikona-motyw-jasny{ display:none; }
.content{ flex-grow:1; min-width:0; padding:28px 36px 40px; display:flex; flex-direction:column; }
.content > .panel:last-child, .content > article:last-child{ margin-bottom:0; }
.naglowek{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.naglowek .akcje{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.okruszki{ display:flex; gap:8px; align-items:center; font-size:12px; margin-bottom:4px; }
.topbar, .tabbar{ display:none; }
.arkusz[hidden]{ display:none; }
.arkusz{ position:fixed; inset:0; z-index:50; }
.arkusz-tlo{ position:absolute; inset:0; background:rgba(8,12,20,0.72); }
.arkusz-panel{
  position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow-y:auto;
  background:var(--surface); border-radius:18px 18px 0 0; border-top:1px solid var(--line);
  padding:10px 18px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:16px;
}
.arkusz-uchwyt{ width:40px; height:5px; border-radius:3px; background:var(--btn2-line); align-self:center; }
.arkusz .menu a, .arkusz .menu-btn{ height:44px; }
body.arkusz-otwarty{ overflow:hidden; }

/* ---------- siatki stron (Przegląd, Karta, Sprzedaż) ---------- */
.siatka-5{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; margin-bottom:14px; }
.siatka-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-bottom:14px; align-items:start; }
.siatka-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-bottom:14px; align-items:start; }
.siatka-5 > .panel, .siatka-3 > .panel, .siatka-2 > .panel{ margin:0; min-width:0; }
.span-2{ grid-column:span 2; } .span-3{ grid-column:span 3; }
.tylko-telefon{ display:none !important; }
.alert-ink{ color:var(--alert); }
.iconbtn-on{ background:var(--accent-soft); border-color:var(--accent); }
details.zwijany{ padding:14px 22px; }
details.zwijany > summary{ font-size:13px; color:var(--ink); }
details.zwijany[open] > summary{ margin-bottom:4px; }
.top-lista{ display:flex; flex-direction:column; gap:12px; }
.top-wiersz{ display:flex; align-items:center; gap:12px; }
.gotowe{ margin-bottom:16px; }
.pole-ikona{ position:relative; }
.pole-ikona .ikona{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--link); pointer-events:none; }
.pole-ikona input{ padding-left:36px; }
/* wybór wielokrotny (województwa, marki) */
details.wybor{ position:relative; }
details.wybor > summary.input{ cursor:pointer; color:var(--ink); font-weight:400; }
details.wybor > summary.input > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
details.wybor[open] > summary.input{ border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-glow); }
details.wybor .opcje{
  position:absolute; z-index:15; top:calc(100% + 4px); left:0; min-width:100%; max-height:22rem; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
details.wybor .opcje .check{ white-space:nowrap; min-height:28px; }
details.wybor .opcje .lbl{ margin:4px 0; }
.filtry{ margin-bottom:14px; }
.filtry .filtry-dol{ margin-top:16px; }
.filtry .aktywne{ min-height:32px; }
.filtry-opcje{ gap:14px; }
.filtry-arkusz.arkusz-statyczny{ position:static; inset:auto; z-index:auto; }
.filtry-arkusz.arkusz-statyczny .arkusz-tlo, .filtry-arkusz.arkusz-statyczny .arkusz-uchwyt{ display:none; }
.filtry-arkusz.arkusz-statyczny .arkusz-panel{ position:static; max-height:none; overflow:visible; background:transparent; border:none; border-radius:0; padding:0; }
.lista-kart{ display:flex; flex-direction:column; gap:10px; }
.karta-akcje{ flex-wrap:nowrap; }
.os-czasu .os-wpis.os-dalej{ display:flex; }

/* ---------- tablet ---------- */
@media (max-width:1199px){
  .sidenav{ width:76px; padding:18px 0; align-items:center; gap:8px; }
  .sidenav .logo{ padding:0; margin-bottom:10px; }
  .sidenav .logo-tekst, .sidenav .podpis, .sidenav .grupa-nazwa{ display:none; }
  .sidenav .menu, .sidenav .menu .grupa{ align-items:center; gap:8px; }
  .sidenav .menu a, .sidenav .menu-btn{ width:48px; height:48px; padding:0; justify-content:center; border-radius:10px; }
  .sidenav .menu a .ikona, .sidenav .menu-btn .ikona{ width:22px; height:22px; }
  .sidenav-dol{ width:100%; align-items:center; }
  .content{ padding:24px; }
  .kpi{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  .skroty-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .filter-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .filter-grid .span2{ grid-column:span 3; }
  .bar-row .name{ width:110px; }
  .siatka-5{ grid-template-columns:1fr; }
  .siatka-5 > .span-2, .siatka-5 > .span-3, .siatka-3 > .span-2{ grid-column:span 1; }
  .siatka-3{ grid-template-columns:1fr; }
  .siatka-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---------- telefon ---------- */
@media (max-width:767px){
  body{ overflow-x:hidden; }
  .app{ flex-direction:column; }
  .sidenav{ display:none; }
  .topbar{
    display:flex; align-items:center; gap:12px; padding:10px 16px; min-height:56px; background:var(--side);
    border-bottom:1px solid var(--line-2); position:sticky; top:0; z-index:20;
  }
  .topbar .logo-g{ width:32px; height:32px; font-size:15px; text-decoration:none; }
  .topbar-tytul{ margin:0; font-size:18px; font-weight:700; flex-grow:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-akcje{ display:flex; gap:8px; }
  .content{ padding:16px 16px calc(84px + env(safe-area-inset-bottom)); }
  .naglowek{ margin-bottom:14px; }
  .naglowek h1{ font-size:20px; }
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--side); border-top:1px solid var(--line-2);
    padding:4px 6px calc(10px + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar button{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:64px; min-width:0;
    background:transparent; border:none; box-shadow:none; padding:0; border-radius:0; color:var(--ink-soft); font-size:11px; font-weight:400; text-decoration:none; font-family:inherit;
  }
  .tabbar a .ikona, .tabbar button .ikona{ color:var(--ink-faint); width:20px; height:20px; padding:5px 18px; box-sizing:content-box; border-radius:15px; }
  .tabbar a.active{ color:var(--ink); font-weight:700; }
  .tabbar a.active .ikona{ background:var(--accent-soft); color:var(--link); }
  .tabbar a:hover, .tabbar button:hover{ background:transparent; color:var(--ink); }
  .kpi, .kpi-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .kpi .panel{ padding:12px 14px; gap:4px; border-radius:12px; }
  .kpi .val{ font-size:22px; }
  .kpi .lbl{ font-size:10px; }
  .skroty-grid{ grid-template-columns:1fr; gap:8px; }
  .grid{ grid-template-columns:1fr; }
  .panel, article{ padding:14px 16px; border-radius:12px; }
  .filters{ flex-direction:column; align-items:stretch; }
  .filter-grid{ grid-template-columns:1fr; }
  .filter-grid .span2{ grid-column:span 1; }
  button, a[role=button], input[type=submit], .btn, .btn2, .iconbtn, input[type=text], input[type=number], input[type=month], input[type=password], input[type=search], select, .input{ min-height:var(--tap); height:var(--tap); }
  textarea{ height:auto; }
  .seg > span, .seg > button, .seg > a{ height:36px; }
  .chip, a.chip{ height:36px; }
  .wykres{ height:170px; padding-left:44px; }
  .wykres .os-y{ width:38px; }
  .wykres .slupek{ padding:0 2px; }
  .wykres .slupek .pod{ font-size:10px; height:22px; }
  .wykres .slupek .nad{ display:none; }
  .bar-row .name{ width:96px; }
  .table-scroll > table{ min-width:560px; }
  th, td{ padding:10px 8px; }
  h2{ font-size:20px; }
  .naglowek.ukryj-telefon{ display:none; }
  .naglowek:not(.karta-naglowek) > .stack > h1{ display:none; }  /* tytuł jest już w górnym pasku */
  .gotowe{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; -webkit-overflow-scrolling:touch; }
  .gotowe > .muted{ display:none; }
  .tylko-telefon{ display:flex !important; }
  a.tylko-telefon, button.tylko-telefon, .btn.tylko-telefon{ display:inline-flex !important; }
  span.tylko-telefon{ display:inline !important; }
  .bez-telefonu{ display:none !important; }
  .siatka-5, .siatka-3, .siatka-2{ grid-template-columns:1fr; gap:10px; }
  .siatka-5 > .span-2, .siatka-5 > .span-3, .siatka-3 > .span-2{ grid-column:span 1; }
  .naglowek .akcje.karta-akcje{ width:100%; }
  .karta-akcje > *{ height:48px; }
  .karta-akcje .grow{ flex-grow:1; }
  .filtry-arkusz .arkusz-panel .panel.filtry{ background:transparent; border:none; box-shadow:none; padding:0; margin:0; }
  .filtry-arkusz .filter-grid{ gap:12px; }
  .filtry-arkusz .filtry-dol{ flex-direction:column; align-items:stretch; }
  .filtry-arkusz .filtry-opcje{ flex-direction:column; align-items:stretch; gap:0; }
  .filtry-arkusz .filtry-opcje .check{ justify-content:space-between; flex-direction:row-reverse; min-height:48px; border-bottom:1px solid var(--line-2); font-size:14px; }
  .filtry-arkusz .filtry-opcje .check input{ width:20px; height:20px; }
  .filtry-arkusz button.btn-lg-telefon{ height:50px; font-size:15px; margin-top:12px; }
  details.wybor .opcje{ position:static; max-height:14rem; box-shadow:none; margin-top:6px; }
  .panel.tabela{ padding:10px 12px; }
  .panel.tabela > .between{ padding:4px 4px 10px; }
  .os-czasu .os-wpis.os-dalej{ display:none; }
  .os-czasu.os-pelna .os-wpis.os-dalej{ display:flex; }
  .os-czasu .os-wpis .tresc{ padding-bottom:12px; }
  details.zwijany{ padding:12px 16px; }
  .kpi .val{ font-size:22px; }
}

/* Kafelki mapy (OpenStreetMap) w motywie ciemnym: odwrócenie kolorów zamiast osobnej warstwy.
   Znaczniki i popupy są w innych warstwach Leafleta, więc filtr ich nie dotyka. */
.leaflet-tile-pane{ filter:invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.6); }
html[data-theme="light"] .leaflet-tile-pane{ filter:none; }