/* ============================================================
   BTS Signal CRM — Design System (REDESIGN 2026-06-19)
   Light canon + full dark parity ([data-theme="dark"]).
   Brand: Signal Blue #1B5DBB / #0B3388 · Signal Red #E31E24.
   Type: Barlow (display) · DM Sans (body/UI) · JetBrains Mono (numerals).
   To są makiety podglądowe — ten plik staje się docelowym design-system.css.
   ============================================================ */

@import url('/static/crm/fonts/fonts.css');

/* ---------- TOKENY ---------- */
:root{
  /* Brand */
  --primary:#1B5DBB;          /* Signal Blue */
  --primary-strong:#0B3388;
  --primary-weak:#EAF1FB;     /* tło info/akcent jasny */
  --danger:#E31E24;           /* Signal Red */
  --danger-weak:#FDECEC;
  --success:#1E9E63; --success-weak:#E6F6EE;
  --warning:#C9871A; --warning-weak:#FBF1DC;
  --info:#1B5DBB;  --info-weak:#EAF1FB;

  /* Powierzchnie / tekst (JASNY) */
  --bg:#EEF2F7;               /* tło aplikacji */
  --surface:#FFFFFF;          /* karta */
  --surface-2:#F8FAFC;        /* zebra/strefy */
  --text:#0D1E35;
  --text-muted:#566174;
  --text-faint:#6A7488;
  --border:#E2E8F0;
  --border-strong:#CBD5E1;

  /* Sidebar (stała kotwica navy w obu motywach) */
  --nav-bg1:#0B111F; --nav-bg2:#16233E;
  --nav-ink:#C7CFDF; --nav-dim:#7E8AA3; --nav-active:#1B5DBB;

  /* Skala promieni / cienie */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(13,30,53,.06), 0 1px 3px rgba(13,30,53,.04);
  --shadow-md:0 4px 14px rgba(13,30,53,.08), 0 1px 3px rgba(13,30,53,.05);
  --shadow-lg:0 14px 40px rgba(13,30,53,.16);

  /* Kolory etapów lejka (jeden system) */
  --st-new:#64748B;     --st-new-bg:#EFF2F6;
  --st-verify:#1B5DBB;  --st-verify-bg:#EAF1FB;
  --st-contract:#C9871A;--st-contract-bg:#FBF1DC;
  --st-human:#7C3AED;   --st-human-bg:#F1EBFE;
  --st-won:#1E9E63;     --st-won-bg:#E6F6EE;
  --st-lost:#E31E24;    --st-lost-bg:#FDECEC;

  --sidebar-w:248px;
  --maxw:1240px;

  /* Aliasy wstecznej zgodności (stare nazwy → nowe tokeny) */
  --bts-blue:var(--primary); --bts-blue-d:var(--primary-strong); --bts-red:var(--danger);
  --ink:var(--text); --muted:var(--text-muted); --line:var(--border);
  --card:var(--surface); --radius:var(--r-md); --r-md:12px;
}

:root[data-theme="dark"]{
  --bg:#0B1322;
  --surface:#15203A;
  --surface-2:#1B2742;
  --text:#E7EDF8;
  --text-muted:#9FACC4;
  --text-faint:#93A1B9;
  --border:#27344E;
  --border-strong:#34466A;

  --primary:#5A8FE0; --primary-strong:#1B5DBB; --primary-weak:#16294A;
  --danger:#F2565B;  --danger-weak:#3A1B1E;
  --success:#34C281; --success-weak:#143226;
  --warning:#E0A53A; --warning-weak:#352a12;
  --info:#5A8FE0;    --info-weak:#16294A;

  --st-new:#94A3B8;     --st-new-bg:#1E293B;
  --st-verify:#5A8FE0;  --st-verify-bg:#16294A;
  --st-contract:#E0A53A;--st-contract-bg:#33280F;
  --st-human:#A78BFA;   --st-human-bg:#241B3D;
  --st-won:#34C281;     --st-won-bg:#143226;
  --st-lost:#F2565B;    --st-lost-bg:#3A1B1E;

  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 16px 44px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-head{font-family:'Barlow',sans-serif;color:var(--text);margin:0}
a{color:var(--primary);text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- SHELL ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--nav-bg1),var(--nav-bg2));
  color:var(--nav-ink);position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:0 0 24px;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.brand .logo{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#1B5DBB,#5A8FE0);display:grid;place-items:center;color:#fff;font-family:'Barlow';font-weight:800;font-size:15px}
/* L2 fix: legacy .sidebar .logo{background:#fff} (dla logo-obrazka) nadpisywał znaczek „B" na biało→niewidoczny. Wyższa specyficzność przywraca gradient. */
.sidebar .brand .logo{background:linear-gradient(135deg,#1B5DBB,#5A8FE0)}
.brand .bt{font-family:'Barlow';font-weight:800;letter-spacing:.02em;color:#fff;font-size:16px;line-height:1}
.brand .bt small{display:block;font-weight:500;font-size:10px;letter-spacing:.18em;color:var(--nav-dim)}
.usercard{display:flex;gap:10px;align-items:center;margin:4px 12px 14px;padding:10px;border-radius:10px;background:rgba(255,255,255,.04)}
.usercard .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#1B5DBB,#5A8FE0);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.usercard .nm{font-weight:600;color:#fff;font-size:13px;line-height:1.2}
.usercard .rl{font-size:11px;color:var(--nav-dim)}
.navsec{padding:8px 12px 0}
.navsec>.lbl{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--nav-dim);padding:8px 10px 6px;font-weight:600}
.navitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--nav-ink);font-size:13.5px;font-weight:500;cursor:pointer;position:relative;transition:background .14s}
.navitem svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.navitem:hover{background:rgba(255,255,255,.06)}
.navitem.active{background:rgba(27,93,187,.20);color:#fff}
.navitem.active::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
.navitem .cnt{margin-left:auto;font-size:11px;font-weight:700;background:var(--primary);color:#fff;border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;height:58px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border)}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}
.crumb b{color:var(--text);font-weight:600}
.crumb .sep{color:var(--text-faint)}
.appbar .spacer{flex:1}
.searchbox{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:7px 11px;color:var(--text-faint);font-size:13px;min-width:230px}
.iconbtn{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--text-muted);cursor:pointer}
.iconbtn:hover{color:var(--text);border-color:var(--border-strong)}
.content{padding:24px;max-width:var(--maxw);width:100%;margin:0 auto}

/* ---------- PRZYCISKI ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;border-radius:var(--r-sm);
  font-family:'Barlow';font-weight:600;font-size:13.5px;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .12s, border-color .12s, color .12s}
.btn svg{width:16px;height:16px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(11,51,136,.35)}
.btn-primary:hover{background:var(--primary-strong);box-shadow:0 4px 12px rgba(27,93,187,.32)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{background:var(--surface);color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{height:32px;padding:0 11px;font-size:12.5px}
.btn-icon{width:38px;padding:0}

/* pasek akcji: 1 primary + reszta wtórna + overflow */
.actionbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.actionbar .spacer{flex:1}

/* ---------- BADGE / PILL ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-new{background:var(--st-new-bg);color:var(--st-new)}
.pill-verify{background:var(--st-verify-bg);color:var(--st-verify)}
.pill-contract{background:var(--st-contract-bg);color:var(--st-contract)}
.pill-human{background:var(--st-human-bg);color:var(--st-human)}
.pill-won{background:var(--st-won-bg);color:var(--st-won)}
.pill-lost{background:var(--st-lost-bg);color:var(--st-lost)}
.pill-info{background:var(--info-weak);color:var(--info)}
.pill-ok{background:var(--success-weak);color:var(--success)}
.pill-warn{background:var(--warning-weak);color:var(--warning)}
.pill-neutral{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}

/* ---------- KARTY ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow)}
.card+.card{margin-top:16px}
.card-h{display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-h .ttl{font-family:'Barlow';font-weight:700;font-size:14.5px}
.card-h svg{width:17px;height:17px;color:var(--text-muted)}
.card-h .spacer{flex:1}
.card-b{padding:18px}
.grid2{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}

.h1{font-family:'Barlow';font-weight:800;font-size:24px;letter-spacing:-.01em}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}

/* dane klucz-wartość */
.kv{display:grid;grid-template-columns:1fr;gap:13px}
.kv .row{display:flex;flex-direction:column;gap:2px}
.kv .k{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.kv .v{font-size:14px;color:var(--text);font-weight:500}
.kv-2{display:grid;grid-template-columns:1fr 1fr;gap:13px 22px}

/* ---------- STEPPER ETAPÓW ---------- */
.stepper{display:flex;align-items:center;gap:0;overflow-x:auto;padding:2px}
.step{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:0 14px 0 0}
.step .bub{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;border:2px solid var(--border);color:var(--text-faint);background:var(--surface);font-variant-numeric:tabular-nums}
.step .nm{font-size:12.5px;color:var(--text-faint);font-weight:600;white-space:nowrap}
.step .ln{width:26px;height:2px;background:var(--border);margin:0 4px}
.step.done .bub{background:var(--success);border-color:var(--success);color:#fff}
.step.done .nm{color:var(--text-muted)}
.step.cur .bub{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-weak)}
.step.cur .nm{color:var(--primary)}

/* ---------- TABELA ---------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-md)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl thead th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);font-weight:600;
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;white-space:nowrap}
.tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:nth-child(even){background:var(--surface-2)}
.tbl tbody tr:hover{background:var(--primary-weak)}
.tbl .name{font-weight:700;color:var(--text)}
.tbl .sub{font-size:12px;color:var(--text-faint)}
.tbl .id{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.tbl .phone{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.celluser{display:flex;align-items:center;gap:9px}
.av-sm{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex:0 0 28px}
.checkbox{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border-strong);display:inline-block;vertical-align:middle}

/* ---------- KANBAN ---------- */
.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.kcol{flex:0 0 268px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);display:flex;flex-direction:column;max-height:78vh}
.kcol-h{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--border);position:sticky;top:0;border-radius:var(--r-md) var(--r-md) 0 0;background:var(--surface-2)}
.kcol-h .bar{width:4px;height:16px;border-radius:3px}
.kcol-h .nm{font-family:'Barlow';font-weight:700;font-size:12.5px;letter-spacing:.02em}
.kcol-h .cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.kcol-b{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 12px;box-shadow:var(--shadow);cursor:grab;transition:transform .14s, box-shadow .14s;border-left:3px solid transparent}
.kcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kcard .nm{font-weight:700;font-size:13.5px;color:var(--text);margin-bottom:5px}
.kcard .meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-bottom:3px}
.kcard .meta svg{width:13px;height:13px;flex:0 0 13px;color:var(--text-faint)}
.kcard .foot{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.kcard .val{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:12.5px;color:var(--text)}
.kcard .ph{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted)}

/* bars per grupa etapów */
.bar-new{background:var(--st-new)} .bar-verify{background:var(--st-verify)}
.bar-contract{background:var(--st-contract)} .bar-human{background:var(--st-human)}
.bar-won{background:var(--st-won)} .bar-lost{background:var(--st-lost)}
.kl-verify{border-left-color:var(--st-verify)} .kl-contract{border-left-color:var(--st-contract)}
.kl-human{border-left-color:var(--st-human)} .kl-new{border-left-color:var(--st-new)}

/* ---------- KPI / PULPIT ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:12px;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:7px}
.kpi .lbl .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center}
.kpi .val{font-family:'Barlow';font-weight:800;font-size:30px;line-height:1.1;margin-top:10px;font-variant-numeric:tabular-nums}
.kpi .delta{font-size:12px;font-weight:600;margin-top:3px}
.up{color:var(--success)} .down{color:var(--danger)}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:8px}
.fbar{display:flex;align-items:center;gap:12px}
.fbar .fl{width:150px;font-size:13px;color:var(--text-muted);font-weight:500;flex:0 0 150px}
.fbar .ft{flex:1;height:30px;border-radius:7px;background:var(--surface-2);overflow:hidden;position:relative}
.fbar .fi{height:100%;border-radius:7px;display:flex;align-items:center;padding:0 11px;color:#fff;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- EMPTY STATE ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--text-muted)}
.empty .ic{width:54px;height:54px;border-radius:14px;background:var(--primary-weak);color:var(--primary);display:grid;place-items:center;margin:0 auto 14px}
.empty h3{font-family:'Barlow';font-size:17px;margin-bottom:6px;color:var(--text)}
.empty p{margin:0 auto 16px;max-width:340px;font-size:13.5px}

.note{display:flex;gap:10px;align-items:flex-start;background:var(--warning-weak);border:1px solid var(--warning);color:var(--warning);border-radius:10px;padding:12px 14px;font-size:13px;font-weight:500}
.note svg{flex:0 0 17px;margin-top:1px}

/* ---------- MOBILE TOPBAR + RESPONSYWNOŚĆ ---------- */
.mobilebar{display:none}
@media(max-width:900px){
  .sidebar{position:fixed;z-index:60;height:100vh;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:translateX(0)}
  .appbar{display:none}
  .mobilebar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;height:54px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--border)}
  .mobilebar .ham{width:40px;height:40px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center;color:var(--text);background:var(--surface)}
  .mobilebar .mb-brand{font-family:'Barlow';font-weight:800;font-size:15px;letter-spacing:.02em}
  .mobilebar .spacer{flex:1}
  .content{padding:14px;max-width:none}
  .grid2{grid-template-columns:1fr}
  .h1{font-size:21px}
  /* tabele danych: poziomy scroll z cieniem-wskazówką zamiast ucinania */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(90deg,var(--surface) 30%,transparent),linear-gradient(90deg,transparent,var(--surface) 70%) 100% 0;
    background-repeat:no-repeat;background-size:24px 100%,24px 100%;background-attachment:local,local}
  .tbl{min-width:720px}
  /* touch targety */
  .btn,.navitem,.iconbtn{min-height:42px}
  .actionbar{width:100%}
  .actionbar .btn{flex:1}
}
@media(max-width:560px){ .content{padding:12px} .kpis{grid-template-columns:1fr 1fr} }

/* ============================================================
   LEGACY-COMPAT — klasy z dawnego design-system.css (PART 1)
   używane w markupie szablonów, których BRAK w ds.css.
   Skopiowane 1:1. Tokeny istnieją w ds.css (m.in. aliasy) → dark-safe.
   Retire klasa-po-klasie w miarę przepisywania szablonów na komponenty ds.
   ============================================================ */
@keyframes toastin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes pagein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---- Topbar (legacy _crm_top.html) ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border-bottom:1px solid var(--line);padding:14px 24px}
.topbar .brand{display:flex;align-items:center;gap:12px}
.topbar img{height:34px;display:block}
.topbar .who{color:var(--muted);font-size:14px}

/* ---- Nagłówek / kontener / typografia pomocnicza ---- */
.h-page{margin:0;font-size:22px}
.container{max-width:1180px;margin:0 auto;padding:28px 24px;width:100%}
.muted{color:var(--muted)}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.row-actions{display:flex;align-items:center;gap:8px}

/* ---- Metryki / kafle pulpitu ---- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:24px}
.metric{padding:18px 20px}
.metric .label{color:var(--muted);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.03em}
.metric .value{font-family:'Barlow',sans-serif;font-weight:700;font-size:34px;line-height:1.1;margin-top:6px;color:var(--ink)}
.metric.accent .value{color:var(--bts-blue)}
.metric.warn .value{color:var(--warning)}

/* ---- Badge ---- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:#EFF5FB;color:var(--bts-blue)}

/* ---- Alerty ---- */
.alert{padding:12px 16px;border-radius:9px;font-size:14px;margin-bottom:16px}
.alert-error{background:#FDECEC;color:#9B2C2A;border:1px solid #F5C2C0}
.alert-info{background:#EFF5FB;color:#124B82;border:1px solid #CFE0F0}

/* ---- Pille warianty spoza ds.css ---- */
.pill-red{background:#FCE8E8;color:#B42318}
.pill-grey{background:#EEF1F5;color:#475569}

/* ---- Pola formularzy (auth + ogólne) ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:400px;padding:32px}
.auth-card .logo{text-align:center;margin-bottom:8px}
.auth-card .logo img{height:42px}
.auth-card h1{font-size:20px;text-align:center;margin:8px 0 22px}

/* ---- App shell: sidebar (legacy _sidebar.html) ---- */
.sidebar .logo{background:#fff;margin:14px 14px 6px;border-radius:10px;padding:12px;text-align:center}
.sidebar .logo img{height:32px;max-width:100%;display:inline-block}
.sidebar .me{display:flex;align-items:center;gap:10px;padding:12px 18px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar .me .av{width:36px;height:36px;border-radius:50%;background:var(--nav-active);flex:0 0 36px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Barlow',sans-serif}
.sidebar .me .nm{font-size:13.5px;font-weight:600;color:#fff;line-height:1.25}
.sidebar .me .ro{font-size:11.5px;color:var(--nav-dim)}
.nav-sec .h{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--nav-dim);padding:14px 20px 5px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 20px;color:var(--nav-ink);font-size:14px;text-decoration:none;border-left:3px solid transparent}
.nav-item:hover{background:var(--nav-bg2);text-decoration:none;color:#fff}
.nav-item.active{background:var(--nav-bg2);color:#fff;border-left-color:var(--nav-active);font-weight:600}
.nav-item .ic{width:18px;height:18px;flex:0 0 18px;opacity:.75;transition:opacity .12s}
.nav-item:hover .ic,.nav-item.active .ic{opacity:1}
.ic{width:18px;height:18px;vertical-align:-3px;flex-shrink:0}
.ic-sm{width:15px;height:15px;vertical-align:-2px}
.sidebar .foot{margin-top:auto;padding:12px 20px;border-top:1px solid rgba(255,255,255,.07)}

/* ---- App shell: appbar (legacy _app.html) ---- */
.appbar .burger{background:none;border:none;font-size:21px;cursor:pointer;color:var(--muted);padding:2px 4px;display:none}
.appbar .crumb{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:7px}
.appbar .crumb b{color:var(--ink);font-weight:600}
.appbar .sp{flex:1}
.appbar .act{display:flex;align-items:center;gap:14px}
.appbar .bell{position:relative;color:var(--muted);font-size:17px;text-decoration:none}
.appbar .bell .ic{width:19px;height:19px}
.imp-strip{background:var(--warning);color:#3a2900;padding:7px 16px;text-align:center;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.imp-strip a,.imp-strip .imp-stop-btn{color:#3a2900;text-decoration:underline;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.imp-strip form{display:inline-flex;margin:0}
.imp-strip .imp-stop-btn{background:none;border:0;padding:0;font:inherit;font-size:13px;cursor:pointer}
@media(max-width:900px){ .appbar .burger{display:block} }

/* ---- User menu (topbar, legacy _app.html) ---- */
.umenu{position:relative}
.umenu-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:10px;padding:5px 8px 5px 5px;cursor:pointer;color:var(--ink);font-family:inherit}
.umenu-btn:hover{background:#F1F5FA;border-color:var(--line)}
.umenu-btn .ic-sm{color:var(--muted)}
.umenu .av-sm{width:30px;height:30px;border-radius:50%;background:var(--nav-active);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Barlow',sans-serif;font-size:13px;flex:0 0 30px}
.umenu-nm{font-size:13.5px;font-weight:600}
.umenu-pop{position:absolute;right:0;top:46px;min-width:206px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:50}
.umenu-pop.open{display:block;animation:toastin .15s ease}
.umenu-hd{padding:9px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}
.umenu-hd strong{font-size:13.5px} .umenu-hd span{font-size:11.5px;color:var(--muted)}
.umenu-pop a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px}
.umenu-pop a:hover{background:#F1F5FA;text-decoration:none}
.umenu-pop a .ic,.umenu-act .ic{width:16px;height:16px;color:var(--muted)}
.umenu-act{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border:none;background:none;border-radius:8px;color:var(--ink);font-size:13.5px;font-family:inherit;cursor:pointer;text-align:left}
.umenu-act:hover{background:#F1F5FA}
@media(max-width:560px){ .umenu-nm{display:none} }

/* ---- Segmented control (ph_wgraj_umowe.html) ---- */
.seg{display:inline-flex;background:#EDF1F6;border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{padding:8px 18px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--muted);transition:.12s}
.seg input:checked + label{background:#fff;color:var(--bts-blue);box-shadow:var(--shadow)}
.seg label:hover{color:var(--ink)}

/* ---- Toasty (wstrzykiwane JS w _base.html) ---- */
#toasts{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{background:#fff;border:1px solid var(--line);border-left:4px solid var(--bts-blue);border-radius:10px;box-shadow:var(--shadow-lg);padding:12px 16px;font-size:13.5px;color:var(--ink);display:flex;align-items:flex-start;gap:10px;animation:toastin .22s ease}
.toast.ok{border-left-color:var(--success)} .toast.err,.toast.red{border-left-color:var(--bts-red)} .toast.warn{border-left-color:var(--warning)}
.toast .tc{flex:1} .toast .tx{cursor:pointer;color:var(--muted);font-weight:700}

/* ---- Auth premium (split-screen: login / 2fa / change_password / _auth_hero) ---- */
.asplit{display:flex;min-height:100vh}
.ahero{flex:1.15;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:54px 60px;color:#EAF1FB;background:radial-gradient(120% 120% at 15% 10%,#1C3B6E 0%,#142C56 38%,#0C1A33 100%)}
.ahero::before{content:"";position:absolute;width:620px;height:620px;right:-160px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(43,111,184,.5),transparent 60%);filter:blur(10px)}
.ahero::after{content:"";position:absolute;inset:0;opacity:.10;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:46px 46px;-webkit-mask:linear-gradient(to top,#000,transparent 70%);mask:linear-gradient(to top,#000,transparent 70%)}
.ahero>*{position:relative;z-index:2}
.ahero .wm{display:flex;align-items:center;gap:12px}
.ahero .wm .bars{display:flex;align-items:flex-end;gap:3px;height:30px}
.ahero .wm .bars i{width:6px;border-radius:2px;background:#4D8FD6}
.ahero .wm .bars i:nth-child(1){height:12px}.ahero .wm .bars i:nth-child(2){height:20px}.ahero .wm .bars i:nth-child(3){height:30px;background:#E24B4A}
.ahero .wm .t{font-family:'Barlow';font-weight:800;font-size:23px;letter-spacing:.04em;color:#fff}
.ahero .wm .t span{color:#E24B4A}
.ahero .mast{filter:drop-shadow(0 0 24px rgba(77,143,214,.45));margin-bottom:26px}
.ahero h1{font-size:42px;font-weight:800;line-height:1.08;color:#fff;max-width:14ch;font-family:'Barlow'}
.ahero h1 em{font-style:normal;color:#5FA0E0}
.ahero .fh{font-size:12.5px;color:#7C93B8}
.apanel{flex:.85;background:#F4F7FC;display:flex;align-items:center;justify-content:center;padding:32px}
.acard{width:100%;max-width:392px;background:#fff;border:1px solid #E7EDF5;border-radius:18px;box-shadow:0 24px 60px rgba(13,30,53,.12),0 2px 8px rgba(13,30,53,.05);padding:42px 40px}
.acard h2{font-size:23px;font-weight:700;margin-bottom:4px;font-family:'Barlow'}
.acard .lead{color:#64748B;font-size:14px;margin-bottom:24px}
.acard .fld{position:relative;margin-bottom:18px}
.acard .fld label{display:block;font-size:12.5px;font-weight:600;color:#475569;margin-bottom:7px}
.acard .fld input{width:100%;padding:13px 14px;font-size:15px;border:1.5px solid #E2E8F0;border-radius:11px;background:#FAFCFE;font-family:inherit}
.acard .fld.ic-in input{padding-left:42px}
.acard .fld .fi{position:absolute;left:14px;top:34px;color:#94A3B8;width:18px;height:18px}
.acard .arow{display:flex;justify-content:space-between;align-items:center;margin:2px 0 22px;font-size:13px}
.acard .arow a{color:#185FA5;text-decoration:none;font-weight:600}
.acard .arow label{display:flex;align-items:center;gap:7px;color:#64748B;font-size:13px}
/* zakresowane wyłącznie do ekranu logowania */
.login-card .arow{font-size:11.5px;margin-bottom:20px}
.login-card .arow a{font-weight:500;font-size:11.5px}
.login-card .arow label{gap:6px;color:#94A3B8;font-size:11.5px}
.acard .abtn{width:100%;padding:14px;border:none;border-radius:11px;font-family:'Barlow';font-weight:700;font-size:15.5px;color:#fff;background:linear-gradient(135deg,#2168B5,#154C86);cursor:pointer;box-shadow:0 6px 18px rgba(24,95,165,.3);display:flex;align-items:center;justify-content:center;gap:8px}
.acard .abtn:hover{filter:brightness(1.06)} .acard .abtn .fi{width:18px;height:18px;color:#fff;position:static}
.acard .legal{text-align:center;margin-top:20px;font-size:12px;color:#94A3B8}
@media(max-width:860px){ .ahero{display:none} .apanel{flex:1} }

/* ---- Feed / tablica (ph_moje, tablica, deal_card, ph_lead_card) ---- */
.feed{display:flex;flex-direction:column}
.feed-item{display:flex;gap:13px;padding:15px 16px;border-bottom:1px solid var(--line);position:relative;animation:pagein .35s ease both}
.feed-item:last-child{border-bottom:none}
.feed-item.pinned{background:linear-gradient(90deg,rgba(24,95,165,.07),transparent 70%)}
.feed-item.pinned::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bts-blue);border-radius:0 3px 3px 0}
.fi-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.fi-ic .ic{width:19px;height:19px}
.fi-info{background:#EAF2FB;color:#185FA5} .fi-ok{background:#E7F6EE;color:#15803D} .fi-red{background:#FDECEC;color:#C0362F}
.fi-warn{background:#FEF4DC;color:#B8860B} .fi-grey{background:#EEF1F5;color:#475569}
.fi-main{min-width:0;flex:1}
.fi-top{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.fi-when{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.fi-title{font-family:'Barlow',sans-serif;font-weight:600;font-size:15px;color:var(--ink);line-height:1.35}
.fi-title a{color:inherit} .fi-title a:hover{color:var(--bts-blue);text-decoration:none}
.fi-body{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.45}
.fi-meta{color:var(--muted);font-size:12px;margin-top:5px;display:flex;align-items:center;gap:6px}
.fi-pin{font-size:11px;font-weight:700;color:var(--bts-blue);text-transform:uppercase;letter-spacing:.03em;display:inline-flex;align-items:center;gap:4px}
.fi-pin .ic{width:12px;height:12px}

/* ---- Dark-mode overrides przeniesionych rodzin (1:1 z PART 1) ---- */
[data-theme="dark"] .umenu-btn:hover,[data-theme="dark"] .umenu-pop a:hover,[data-theme="dark"] .umenu-act:hover{background:#1C2942}
[data-theme="dark"] .umenu-pop{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .badge{background:rgba(95,160,224,.16);color:#8FBDEC}
[data-theme="dark"] .pill-red{background:rgba(229,90,88,.18);color:#F08D8B}
[data-theme="dark"] .pill-grey{background:rgba(148,163,184,.16);color:#AEBBD0}
[data-theme="dark"] .alert-info{background:#14233C;border-color:#27406A;color:#A9C7EC}
[data-theme="dark"] .alert-error{background:#2C1718;border-color:#5A2B2C;color:#F2B6B5}
[data-theme="dark"] .fi-info{background:rgba(95,160,224,.16);color:#8FBDEC} [data-theme="dark"] .fi-ok{background:rgba(52,176,122,.16);color:#5DD79E}
[data-theme="dark"] .fi-red{background:rgba(229,90,88,.16);color:#F08D8B} [data-theme="dark"] .fi-warn{background:rgba(214,153,0,.16);color:#E6BD63} [data-theme="dark"] .fi-grey{background:rgba(148,163,184,.14);color:#AEBBD0}
[data-theme="dark"] .feed-item.pinned{background:linear-gradient(90deg,rgba(95,160,224,.1),transparent 70%)}
[data-theme="dark"] .seg{background:#1C2942} [data-theme="dark"] .seg input:checked + label{background:#0E1626}
[data-theme="dark"] .toast,[data-theme="dark"] .umenu-pop{background:var(--surface);color:var(--text)}

/* ---- LEGACY-COMPAT: domyślne style ELEMENTOWE (gołe table/input/select) ----
   ds.css styluje tylko .tbl/.acard input (klasy). 62 szablony używają gołych
   <table>/<input>/<select> → bez tego straciłyby styl. Tokeny nowe → dark-safe. */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--text-muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody tr:hover td{background:var(--primary-weak)}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=search],input:not([type]),textarea{font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;width:100%;background:var(--surface);color:var(--text)}
select{font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent);outline-offset:0;border-color:var(--primary)}
label{color:var(--text)}

/* ════════════════ POCZTA — UX/design 2026-06-26 ════════════════ */
.pcz-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pcz-head .h1{margin:0}
.pcz-search{display:flex;align-items:center;gap:8px;flex:1;min-width:200px;max-width:420px;margin-left:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0 12px;height:38px;color:var(--text-faint)}
.pcz-search:focus-within{border-color:var(--primary)}
.pcz-search .ic{flex:0 0 16px}
.pcz-search input{border:0;background:transparent;outline:0;padding:0;width:100%;font-size:13.5px;color:var(--text)}
.pcz-search input::placeholder{color:var(--text-faint)}

/* foldery jako zakładki-pille */
.pcz-tabs{display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.pcz-tab{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--text-muted);background:var(--surface-2);border:1px solid transparent;
  text-decoration:none;transition:background .12s,color .12s}
.pcz-tab:hover{color:var(--text);background:var(--primary-weak)}
.pcz-tab.active{background:var(--primary);color:#fff}
.pcz-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  font-size:11px;font-weight:700;background:var(--danger);color:#fff;line-height:1}
.pcz-tab.active .pcz-badge{background:rgba(255,255,255,.25)}
.pcz-addr{margin-left:auto;align-self:center;font-size:12.5px;color:var(--text-faint);font-family:'JetBrains Mono',monospace}

.pcz-searchbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:9px 14px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border);font-size:13px;color:var(--text-muted)}
.pcz-searchbar .ic{flex:0 0 16px;color:var(--text-faint)}

/* lista wiadomości */
.pcz-table{width:100%}
.pcz-col-date{white-space:nowrap}
.pcz-col-act{width:1%;white-space:nowrap;text-align:right}
.pcz-row td{vertical-align:middle}
.pcz-sender{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcz-subject a{color:var(--text);text-decoration:none;font-weight:500}
.pcz-subject a:hover{color:var(--primary);text-decoration:underline}
.pcz-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex:0 0 8px;display:inline-block}
/* przeczytane: kropka niewidoczna, ale miejsce zarezerwowane → awatary się nie rozjeżdżają */
.pcz-row:not(.unread) .pcz-dot{visibility:hidden}
/* nieprzeczytane — wyraźnie */
.pcz-row.unread td{background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.pcz-row.unread .pcz-sender{font-weight:700;color:var(--text)}
.pcz-row.unread .pcz-subject a{font-weight:700;color:var(--text)}
.pcz-row:hover td{background:var(--primary-weak)}

/* akcje per-wiersz — ujawniane na hover (desktop) */
.pcz-actions{display:flex;gap:6px;justify-content:flex-end;opacity:0;transition:opacity .12s}
.pcz-row:hover .pcz-actions,.pcz-row:focus-within .pcz-actions{opacity:1}
.pcz-actions form{display:inline;margin:0}
.iconbtn-sm{width:30px;height:30px;border-radius:8px}
.iconbtn-sm .ic{width:15px;height:15px}
.iconbtn-danger:hover{color:var(--danger);border-color:var(--danger)}

.pcz-pager{display:flex;gap:8px;margin-top:14px;align-items:center}

/* placeholder pustej treści wiadomości */
.pcz-nobody{display:flex;align-items:center;gap:10px;padding:28px 16px;color:var(--text-faint);font-size:13.5px;
  background:var(--surface-2);border-radius:var(--r-sm);border:1px dashed var(--border)}
.pcz-nobody .ic{width:22px;height:22px;flex:0 0 22px}

/* ostylowany input plików */
.pcz-file{padding:0!important;border:1px dashed var(--border)!important;background:var(--surface-2)!important;
  border-radius:9px!important;font-size:13px;color:var(--text-muted)}
.pcz-file::file-selector-button{font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-right:12px;
  padding:9px 14px;border:0;border-radius:9px 0 0 9px;background:var(--primary);color:#fff}
.pcz-file::file-selector-button:hover{filter:brightness(.95)}
.pcz-filelist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pcz-filelist li{font-size:12.5px;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);
  border-radius:7px;padding:5px 10px}

/* ───── MOBILE: lista wiadomości jako karty (zamiast poziomego scrolla) ───── */
@media(max-width:640px){
  .pcz-search{max-width:none;order:3;width:100%;margin-left:0}
  .pcz-addr{display:none}
  .pcz-table{min-width:0;display:block}
  .pcz-table thead{display:none}
  .pcz-table tbody,.pcz-table tr,.pcz-table td{display:block;width:auto}
  .pcz-table tr.pcz-row{position:relative;padding:12px 44px 12px 14px;border-bottom:1px solid var(--border)}
  .pcz-table tr.pcz-row td{border:0;padding:2px 0;background:transparent!important}
  .pcz-row.unread{background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
  .pcz-subject a{font-size:14.5px}
  .pcz-col-date{font-size:12px;color:var(--text-faint)}
  /* akcje zawsze widoczne na dotyku, w prawym górnym rogu karty */
  .pcz-col-act{position:absolute;top:8px;right:8px;width:auto}
  .pcz-actions{opacity:1;gap:4px}
  .iconbtn-sm{width:42px;height:42px}  /* cel dotykowy WCAG ≥44px (z paddingiem wiersza) */
  .pcz-table tr.pcz-row{padding-right:96px}  /* miejsce na 2 przyciski 42px */
}
/* ════════════════ /POCZTA ════════════════ */