/* Kolory i czcionki z brandbooka Best Group: bordo #2A100B, szarosc #C1C1C3,
   Clash Display (naglowki: Medium, wersaliki, tracking 200) i Inter (tekst). */
:root{
  --maroon:#2A100B;
  --felt:#ECEBEB; --felt-2:#E2E1E1; --ink:#22201F; --ink-2:#5E5B59;
  --line:#C1C1C3; --brass:#2A100B; --karmin:#7A2E2E; --white:#FAFAFA;
  --ok:#2F7D46; --bad:#A32B2B; --note:#E8B10A;
  /* status klienta: bez kontaktu / negocjacje / chce wspolpracowac / nie chce */
  --et-nowy:#A9A49D; --et-neg:#E2A400; --et-tak:#2E8B47; --et-nie:#C8372D;
  /* klient = pozyskany (wspolpracujemy) - zakladka Pozyskani */
  --et-klient:#2F5D9E;
  --font-display:"Clash Display","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
/* lista z dluga opcja nie moze rozpychac strony na telefonie */
input,select,textarea{min-width:0;max-width:100%}
html,body{margin:0;padding:0}
body{
  background:var(--felt);color:var(--ink);
  font:15px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--karmin);text-decoration:none;border-bottom:1px solid rgba(122,46,46,.3)}
a:hover{border-bottom-color:var(--karmin)}
:focus-visible{outline:2px solid var(--karmin);outline-offset:2px}
/* naglowki: Clash Display Medium, wersaliki, tracking 200 (0.2em) */
h1,h2{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.2em}
h1{font-size:21px;line-height:1.3;margin:8px 0 16px}
h2{font-size:14.5px;line-height:1.4;margin:30px 0 12px}
.mut{color:var(--ink-2)}
.small{font-size:12.5px}
.warn{color:var(--karmin)}
.grow{flex:1}

/* ---------- gorny pasek ---------- */
nav.top{
  display:flex;align-items:center;gap:10px 14px;position:relative;
  padding:calc(8px + env(safe-area-inset-top)) 18px 8px;min-height:50px;
  background:var(--maroon);color:#F2F0EF;font-size:14px;
}
nav.top a{color:#F2F0EF;border:0;opacity:.8}
nav.top .linki{display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap}
nav.top .linki a{padding:6px 2px}
nav.top .linki a:hover,nav.top .linki a.on{opacity:1;box-shadow:inset 0 -2px 0 #C1C1C3}
nav.top .linki a.adm{font-size:13px}
nav.top .brand{display:flex;align-items:center;gap:10px;opacity:1;margin-right:10px;white-space:nowrap}
nav.top .brand img{display:block;height:13px;width:auto}
nav.top .brand span{font:500 11px/1 var(--font-display);letter-spacing:.2em;padding-left:10px;border-left:1px solid rgba(242,240,239,.35)}
nav.top form{margin:0}
#menu{padding:6px 12px;border:1px solid rgba(242,240,239,.4);background:transparent;
  color:#F2F0EF;border-radius:2px;font:500 13.5px var(--font-body);cursor:pointer}

/* menu konta: imie -> konto, jezyk, wyloguj */
details.konto{position:relative}
details.konto > summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:4px 6px 4px 4px;border-radius:18px;user-select:none}
details.konto > summary::-webkit-details-marker{display:none}
details.konto > summary:hover,details.konto[open] > summary{background:rgba(242,240,239,.12)}
details.konto .inicjaly{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:#C1C1C3;color:var(--maroon);font:600 12px var(--font-body);letter-spacing:.04em}
details.konto .imie{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.konto .imie:after{content:" ▾";opacity:.6;font-size:11px}
.menu-konto{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--white);
  color:var(--ink);border:1px solid var(--line);border-radius:3px;box-shadow:0 8px 24px rgba(43,38,32,.25);
  padding:6px 0;z-index:1200}
.menu-konto .kto{padding:8px 16px 10px;border-bottom:1px solid var(--line);font-weight:600}
.menu-konto .kto small{display:block;font-weight:400;color:var(--ink-2);font-size:12px}
.menu-konto a{display:block;padding:9px 16px;color:var(--ink);opacity:1}
.menu-konto a:hover{background:var(--felt)}
.menu-konto .lang{padding:8px 16px;border-top:1px solid var(--line)}
.menu-konto .lang select{margin-top:4px}
.menu-konto .wyloguj{display:block;width:100%;text-align:left;padding:10px 16px;border:0;border-top:1px solid var(--line);
  background:none;cursor:pointer;font:500 14px var(--font-body);color:var(--karmin)}
.menu-konto .wyloguj:hover{background:var(--felt)}
.tylko-tel{display:none}

/* dolny pasek - tylko telefon */
nav.dolny{display:none}
.sync{font-size:12.5px;line-height:18px;padding:2px 9px;border-radius:9px;background:#45403E;color:#F2F0EF;white-space:nowrap}
.sync .krotko{display:none}
.sync.off{background:#A32B2B;color:#fff}
.sync.wait{background:#C9A227;color:#2B2620}

/* ---------- strony zwykle ---------- */
.page{padding:18px 22px 50px;max-width:1880px}
.page.sredni{max-width:980px}
/* dwie kolumny na szerokim ekranie (formularze obok tabel) - bez pustych pol */
.kolumny-2{display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px;align-items:start}
.kolumny-2 > *{min-width:0}
@media(min-width:1400px){.kolumny-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kolumny-2 > * > .pierwszy{margin-top:0}}
.page.narrow,.card.narrow{max-width:520px}
body.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.card{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:26px 26px 20px;width:100%}
.logo-login{display:block;width:100%;max-width:340px;height:auto;margin:4px 0 14px}
.brand-big{font:500 13px/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;color:var(--ink-2)}
.lang-login{margin-top:18px;text-align:right}
.lang-login select{width:auto}

.stack{display:flex;flex-direction:column;gap:12px;max-width:460px}
.stack.pelny{max-width:none}
.stack > .btn,.stack > button{align-self:flex-start;min-width:140px}
.row{display:flex;gap:10px 14px;align-items:flex-end;flex-wrap:wrap}
.row > *{min-width:0;max-width:100%}   /* dluga opcja listy nie rozpycha wiersza */
.row.between{justify-content:space-between;align-items:center}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2);font-weight:500}
input[type=text],input[type=password],input:not([type]),input[type=search],input[type=file],
input[type=url],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);background:#fff;border-radius:2px;
  color:var(--ink);font:400 14px var(--font-body);
}
.row select{width:auto;min-width:150px}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:400;cursor:pointer}
label.check input{width:auto}
fieldset{border:1px solid var(--line);border-radius:3px;padding:10px 14px 12px;margin:0}
legend{font-size:13px;color:var(--ink-2);font-weight:600;padding:0 4px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px}
.checks label.check{font-size:13.5px;padding:3px 0}
.checks label.check.has span{font-weight:600}

.btn{display:inline-block;padding:9px 16px;border:1px solid var(--brass);background:var(--brass);
  color:#fff;border-radius:2px;cursor:pointer;font:500 14px var(--font-body);text-align:center}
.btn:hover{opacity:.9;border-bottom-color:var(--brass)}
.btn.sec{background:none;color:var(--ink);border-color:var(--line)}
.btn.maly{padding:5px 11px;font-size:12.5px}
.usun-w-wierszu{display:inline;margin:0}
.box{background:var(--felt-2);border:1px solid var(--line);border-radius:3px;padding:16px;max-width:none}

.flash-box{padding:10px 22px 0}
.flash{padding:9px 13px;border-radius:2px;margin:0 0 8px;font-size:14px;border-left:4px solid}
.flash.ok{background:#E3EFE4;border-color:var(--ok)}
.flash.error{background:#F4E1DE;border-color:var(--bad)}
.flash.uwaga{background:#FBF1D6;border-color:var(--note);color:#4A3600}
.result{background:#E3EFE4;border-left:4px solid var(--ok);padding:12px 16px;margin:0 0 18px;border-radius:2px}
.result ul{margin:6px 0 10px;padding-left:20px}
.tag{display:inline-block;padding:1px 7px;border-radius:9px;background:var(--felt-2);
  border:1px solid var(--line);font-size:12px;margin:1px 0}

/* ---------- tabele administracyjne ---------- */
.tscroll{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:14px;background:var(--white)}
table.grid th{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);
  background:var(--felt-2);font-size:12.5px;color:var(--ink-2);font-weight:600;white-space:nowrap}
table.grid td{padding:8px 11px;border-bottom:1px solid rgba(193,193,195,.5);vertical-align:top}
table.grid.small{font-size:13px}
table.grid tr.off{opacity:.55}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.ok{color:var(--ok);font-weight:600}
td.bad{color:var(--bad);font-weight:600}
.ev{display:inline-block;padding:1px 7px;border-radius:2px;font-size:12px;font-weight:600;
  background:var(--felt-2);color:var(--ink)}
.ev.s1{background:var(--ok);color:#fff}
.ev.s2{background:var(--bad);color:#fff}
.ev.note{background:#FFF3C4;color:#4A3D10}
.ev.offer{background:var(--maroon);color:#fff}
.ev.usun{background:#45403E;color:#fff}
.ev.et-neg{background:var(--et-neg);color:#2B2100}
.ev.et-tak{background:var(--et-tak);color:#fff}
.ev.et-nie{background:var(--et-nie);color:#fff}
.ev.et-nowy{background:var(--felt-2);color:var(--ink)}
.et-kropka{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
.et-kropka.et-nowy{background:var(--et-nowy)}.et-kropka.et-neg{background:var(--et-neg)}
.et-kropka.et-tak{background:var(--et-tak)}.et-kropka.et-nie{background:var(--et-nie)}
.et-kropka.et-klient{background:var(--et-klient)}
.ev.et-klient{background:var(--et-klient);color:#fff}
.ev.tm{background:#FBF1D6;color:#6B4E00}
.rabat-tag{background:#F1E6E3;color:#5A1F15;border-color:#D9C3BD}
.notetext{white-space:pre-wrap}
.filters label{min-width:160px}

@media(min-width:821px){ #menu{display:none} }
@media(max-width:820px){
  h1{font-size:17px;letter-spacing:.16em}
  h2{font-size:13.5px;letter-spacing:.16em}
  nav.top{padding-left:12px;padding-right:12px;gap:8px 10px;min-height:48px}
  nav.top .linki,details.konto .imie{display:none}
  /* znacznik wysylki: ikona i liczba w jednej linii - pasek nie zmienia wysokosci */
  .sync{padding:3px 10px;font-weight:600;font-size:13px}
  .sync .pelny{display:none}
  .sync .krotko{display:inline}
  /* wieksze pola wyboru - wygodniej palcem */
  input[type=checkbox],input[type=radio],label.check input[type=checkbox],label.check input[type=radio]{
    width:20px;height:20px;flex:none;accent-color:var(--maroon)}
  .tylko-tel{display:block;border-top:1px solid var(--line)}
  nav.dolny{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1030;background:var(--maroon);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(43,38,32,.25)}
  nav.dolny a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;
    color:#F2F0EF;opacity:.7;border:0;font:500 11px/1.2 var(--font-body);text-align:center}
  nav.dolny a.on{opacity:1;color:#fff}
  nav.dolny svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body.center{padding-bottom:16px}
  .page{padding:14px 12px 40px}
  table.grid thead{display:none}
  table.grid,table.grid tbody,table.grid tr,table.grid td{display:block;width:100%}
  table.grid tr{border:1px solid var(--line);border-radius:3px;margin:0 0 10px;background:var(--white)}
  table.grid td{border:0;padding:3px 12px;text-align:left;display:flex;gap:10px}
  table.grid td[data-l]:before{content:attr(data-l);flex:0 0 110px;color:var(--ink-2);font-size:12.5px}
}
.kontakt-konta a{display:block;white-space:nowrap}