/* =====================================================================
   Kwiatek CRM — system wyglądu v2 (przebudowa 10.2026)
   Jasny motyw domyślny: chłodne jasne tło, białe karty, granatowy tekst,
   stonowany niebieski akcent. Pomarańcz KWIATEKmedia zostaje jako znak
   marki (logo, drobne wyróżnienia). Czerwony = wyłącznie realny problem.
   Kontrast: tekst podstawowy ≥ 12:1, pomocniczy ≥ 5,9:1 na białym.
   Arkusz ładuje się PO app.css i nadpisuje jego tokeny, więc stare
   widoki dostają nowy wygląd bez przepisywania.
   ===================================================================== */
:root, html[data-theme="light"]{
  --bg:#F3F6FB; --bg-glow:rgba(47,111,224,.07);
  --surface:#FFFFFF; --surface-2:#F6F8FC; --surface-3:#EDF1F7;
  --ink:#0F1B2D; --ink-2:#2A3950; --muted:#56637A;
  --line:#E2E8F1; --line-2:#C8D2E0;
  --mint:#1F63D1; --mint-deep:#174FAE; --mint-ink:#FFFFFF; --mint-soft:rgba(31,99,209,.09);
  --brand:#E8641C; --brand-soft:rgba(232,100,28,.10);
  --ok:#17804A; --ok-soft:rgba(23,128,74,.10);
  --amber:#946100; --amber-soft:rgba(229,164,23,.14);
  --red:#C0362B; --red-soft:rgba(192,54,43,.09);
  --violet:#5B55E0;
  --glow:0 0 0 1px rgba(31,99,209,.18), 0 8px 26px -12px rgba(31,99,209,.35);
  --shadow:0 1px 2px rgba(15,27,45,.05), 0 10px 28px -16px rgba(15,27,45,.22);
  --shadow-s:0 1px 2px rgba(15,27,45,.06), 0 3px 10px -6px rgba(15,27,45,.16);
  --shadow-l:0 2px 6px rgba(15,27,45,.06), 0 24px 56px -24px rgba(15,27,45,.30);
  --r:14px; --r-s:10px; --r-l:20px;
  --font:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --nav-w:236px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0C121C; --bg-glow:rgba(77,140,255,.06);
  --surface:#131B28; --surface-2:#182233; --surface-3:#1F2B3F;
  --ink:#EEF3FB; --ink-2:#D2DCEB; --muted:#9CABC2;
  --line:#26344A; --line-2:#36475F;
  --mint:#6EA3FF; --mint-deep:#4D8CFF; --mint-ink:#081325; --mint-soft:rgba(110,163,255,.14);
  --brand:#FF8A47; --brand-soft:rgba(255,138,71,.14);
  --ok:#4FD08A; --ok-soft:rgba(79,208,138,.13);
  --amber:#F2C14E; --amber-soft:rgba(242,193,78,.14);
  --red:#FF8C82; --red-soft:rgba(255,140,130,.14);
  --glow:0 0 0 1px rgba(110,163,255,.25), 0 8px 30px -10px rgba(110,163,255,.35);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px -16px rgba(0,0,0,.8);
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-l:0 2px 6px rgba(0,0,0,.4), 0 24px 56px -24px rgba(0,0,0,.9);
  color-scheme:dark;
}

body.v2{font-family:var(--font); font-size:15px; line-height:1.55; letter-spacing:-.003em;
  background:var(--bg) radial-gradient(1200px 520px at 70% -220px, var(--bg-glow), transparent 70%) no-repeat fixed}
body.v2 h1, body.v2 h2, body.v2 h3{font-family:var(--font); letter-spacing:-.018em; color:var(--ink)}
body.v2 input, body.v2 textarea, body.v2 select, body.v2 button{font-family:var(--font)}
:where(body.v2) a{color:var(--mint)}
body.v2 :focus-visible{outline:3px solid var(--mint); outline-offset:2px; border-radius:8px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; z-index:200; background:var(--mint); color:#fff!important; padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none}
.skip:focus{top:12px}
.ik{stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle}

/* Stare elementy, które w v2 dostają kolor „OK” zamiast akcentu. */
.v2 .werdykt.ton-mint{color:var(--ok)}
.v2 .jakosc.ton-mint{background:var(--ok-soft); color:var(--ok)}
.v2 .kropka-jakosc.ton-mint{background:var(--ok)}
.v2 .p-ok{background:var(--ok-soft); color:var(--ok)}
.v2 .badge.alarm{background:var(--red); color:#fff}
.v2 .badge.uwaga{background:#E5A417; color:#2A1D00}

/* ================= ikony 3D ================= */
/* Kafelek: gradient od jasnego (światło z góry) do ciemnego, połysk u góry,
   wewnętrzny cień u dołu i miękki cień rzucany. Znak biały z lekkim cieniem. */
.ik3d{
  --ik-s:40px;
  width:var(--ik-s); height:var(--ik-s); flex:none; position:relative; display:inline-grid; place-items:center;
  border-radius:calc(var(--ik-s) * .3);
  background:linear-gradient(160deg, var(--ik-j) 0%, var(--ik-b) 52%, var(--ik-c) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 5px rgba(0,0,0,.18),
    0 calc(var(--ik-s) * .12) calc(var(--ik-s) * .3) calc(var(--ik-s) * -.12) var(--ik-c),
    0 1px 2px rgba(15,27,45,.12);
  overflow:hidden;
}
.ik3d::before{ /* połysk */
  content:""; position:absolute; left:8%; right:8%; top:5%; height:46%;
  border-radius:calc(var(--ik-s) * .24) calc(var(--ik-s) * .24) 50% 50% / calc(var(--ik-s) * .24) calc(var(--ik-s) * .24) 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}
.ik3d svg{width:58%; height:58%; position:relative; stroke:#fff; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
html[data-theme="dark"] .ik3d{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 5px rgba(0,0,0,.3), 0 4px 12px -6px rgba(0,0,0,.8)}

/* ================= szkielet v2 ================= */
.v2 .app2{display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); min-height:100vh}
.nav{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px;
  padding:18px 14px 14px; background:var(--surface); border-right:1px solid var(--line); z-index:40; overflow-y:auto}
.nav-marka{display:flex; align-items:center; gap:11px; padding:4px 6px 14px; text-decoration:none; color:var(--ink)}
.nav-znak{width:38px; height:38px; border-radius:11px; background:#fff; display:grid; place-items:center; padding:4px;
  box-shadow:0 0 0 1px var(--line), 0 6px 16px -10px rgba(232,100,28,.7); flex:none}
.nav-znak img{width:100%; height:100%; object-fit:contain}
.nav-marka-t{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.nav-marka-t b{font-size:15px; font-weight:800; letter-spacing:-.02em}
.nav-marka-t small{font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-lista{display:flex; flex-direction:column; gap:3px}
.nav-poz{display:flex; align-items:center; gap:12px; padding:7px 10px 7px 7px; border-radius:12px; text-decoration:none;
  color:var(--ink-2); font-weight:600; font-size:14.5px; position:relative; transition:background .15s, color .15s, transform .15s}
.nav-poz:hover{background:var(--surface-2); color:var(--ink)}
.nav-poz:active{transform:scale(.985)}
.nav-poz.on{background:var(--mint-soft); color:var(--ink); font-weight:700}
.nav-poz.on::before{content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:var(--mint)}
.nav-poz .ik3d{transition:transform .2s}
.nav-poz:hover .ik3d{transform:translateY(-1px) scale(1.04)}
.nav-t{flex:1; min-width:0}
.nav-licz{min-width:22px; height:22px; padding:0 7px; border-radius:11px; display:grid; place-items:center;
  font-size:12px; font-weight:800; background:var(--surface-3); color:var(--ink-2); font-variant-numeric:tabular-nums}
.nav-licz.alarm{background:var(--red); color:#fff}
.nav-licz.uwaga{background:#FFE7B3; color:#6B4500}
html[data-theme="dark"] .nav-licz.uwaga{background:#5B4510; color:#FFE3A1}
.nav-dol{margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--line)}
.nav-user{display:flex; align-items:center; gap:10px; padding:6px 6px 2px}
.nav-awatar{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px;
  background:linear-gradient(160deg,#FFC08A,#E8641C); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px -6px #C4561A}
.nav-user-t{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.nav-user-t b{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-user-t small{font-size:12px; color:var(--muted)}
.nav-wyloguj{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--muted)}
.nav-wyloguj:hover{background:var(--surface-2); color:var(--red)}

.glowna{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; padding:12px 26px;
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent}
.topbar-menu{display:none; width:40px; height:40px; border-radius:11px; place-items:center; color:var(--ink-2); background:var(--surface); border:1px solid var(--line)}
.topbar-szukaj{flex:1; max-width:520px; display:flex; align-items:center; gap:10px; height:42px; padding:0 12px 0 14px;
  border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-size:14px; box-shadow:var(--shadow-s);
  transition:border-color .15s, box-shadow .15s}
.topbar-szukaj:hover{border-color:var(--line-2)}
.topbar-szukaj span{flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-szukaj kbd{font:600 12px var(--font); padding:2px 7px; border-radius:6px; border:1px solid var(--line-2); color:var(--muted); background:var(--surface-2)}
.topbar-akcje{margin-left:auto; display:flex; align-items:center; gap:8px}
.topbar-ico{position:relative; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); text-decoration:none}
.topbar-ico:hover{border-color:var(--line-2); color:var(--ink)}
.topbar-ico .kropka{position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--surface)}
.menu-dodaj{position:relative}
.menu-lista{position:absolute; right:0; top:calc(100% + 8px); min-width:250px; padding:6px; border-radius:14px; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-l); display:flex; flex-direction:column; z-index:60; animation:wjazd .16s ease-out}
.menu-lista[hidden]{display:none}
.menu-lista button, .menu-lista a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600;
  color:var(--ink-2); text-align:left; text-decoration:none}
.menu-lista button:hover, .menu-lista a:hover{background:var(--surface-2); color:var(--ink)}
.v2 main{min-width:0; display:block; padding:8px 26px 120px; outline:none}
.v2 .screen{width:100%; max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
.v2 .screen.waski{max-width:820px}
.v2 .kal-screen{max-width:1400px}

.org-pasek{margin:0 26px 10px; padding:10px 14px; border-radius:12px; background:var(--amber-soft); color:var(--ink); font-size:14px; font-weight:600; display:flex; gap:8px; align-items:center}
.v2 .demo-pasek{margin:0 26px 10px; border-radius:14px; position:static; background:linear-gradient(90deg,#FFF1E6,#FFF8F1); border:1px solid #F6C9A6; color:#5A2A06}
html[data-theme="dark"] .v2 .demo-pasek{background:#2A1A0E; border-color:#5A3415; color:#FFD9BD}

/* Nawigacja na telefonie */
.nav-mob{display:none}
.nav-tlo{position:fixed; inset:0; background:rgba(10,18,32,.38); z-index:39; backdrop-filter:blur(2px)}

@media (max-width:1060px){
  :root{--nav-w:96px}
  .nav{padding:14px 8px; align-items:stretch}
  .nav-marka-t, .nav-user-t, .nav-wyloguj{display:none}
  .nav-marka{padding:2px 0 10px; justify-content:center}
  /* Ikona z podpisem pod spodem — menu nigdy nie jest samymi ikonami bez nazw. */
  .nav-poz{flex-direction:column; gap:4px; padding:7px 4px; text-align:center; font-size:11.5px; font-weight:650}
  .nav-poz .nav-t{flex:none; line-height:1.15}
  .nav-poz.on::before{left:-8px}
  .nav-licz{position:absolute; top:2px; right:10px; min-width:19px; height:19px; font-size:11px; padding:0 5px}
  .nav-user{justify-content:center; padding:4px 0}
}
@media (max-width:760px){
  .v2 .app2{display:block}
  .nav{position:fixed; left:0; top:0; bottom:0; width:272px; transform:translateX(-102%); transition:transform .22s ease; align-items:stretch; box-shadow:var(--shadow-l)}
  .nav.otwarta{transform:none}
  .nav-marka-t, .nav-t, .nav-user-t, .nav-wyloguj{display:flex}
  .nav-poz{justify-content:flex-start; padding:7px 10px 7px 7px}
  .nav-licz{position:static}
  .topbar{padding:10px 14px}
  .topbar-menu{display:grid}
  .topbar-szukaj kbd, .ukryj-mob{display:none}
  .v2 main{padding:6px 14px 110px}
  .org-pasek, .v2 .demo-pasek{margin:0 14px 10px}
  .nav-mob{position:fixed; left:0; right:0; bottom:0; z-index:35; display:grid; grid-template-columns:repeat(5,1fr);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter:blur(12px); border-top:1px solid var(--line)}
  .nav-mob a, .nav-mob button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 2px; border-radius:10px;
    font-size:11.5px; font-weight:700; color:var(--muted); text-decoration:none}
  .nav-mob a.on{color:var(--ink); background:var(--mint-soft)}
  .v2 .talk-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ================= przyciski i pola ================= */
.v2 .btn{border-radius:11px; font-weight:650; font-size:14px; padding:10px 16px; transition:transform .12s, box-shadow .15s, background .15s, filter .15s; cursor:pointer}
.v2 .btn:active{transform:translateY(1px) scale(.99)}
.v2 .btn-primary{background:linear-gradient(180deg,#2E74E6,var(--mint-deep)); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -8px rgba(23,79,174,.7)}
html[data-theme="dark"] .v2 .btn-primary{background:linear-gradient(180deg,#5C98FF,#3D7BF0); color:#06132A}
.v2 .btn-primary:hover{filter:brightness(1.06); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 22px -10px rgba(23,79,174,.8)}
.v2 .btn-ghost{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-2); box-shadow:var(--shadow-s)}
.v2 .btn-ghost:hover{background:var(--surface-2); border-color:var(--muted)}
.v2 .btn-s{padding:7px 11px; font-size:13px; border-radius:9px}
.v2 .btn-l{padding:13px 20px; font-size:15px; width:100%}
.v2 .btn-niebezp{background:var(--surface); color:var(--red); border:1px solid color-mix(in srgb, var(--red) 40%, transparent)}
.v2 .btn-niebezp:hover{background:var(--red-soft)}
.v2 .btn[aria-busy="true"]{opacity:.7; pointer-events:none}
.v2 .btn[aria-busy="true"]::after{content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:obrot .7s linear infinite}
.v2 .inp{background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; font-size:14.5px; color:var(--ink);
  transition:border-color .15s, box-shadow .15s}
.v2 .inp:hover{border-color:var(--muted)}
.v2 .inp:focus{border-color:var(--mint); box-shadow:0 0 0 4px var(--mint-soft); outline:none}
.v2 .inp[aria-invalid="true"]{border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft)}
.v2 textarea.inp{min-height:96px; resize:vertical; line-height:1.5}
.v2 .field label, .v2 .pole > span{font-size:13px; font-weight:650; color:var(--ink-2)}
.v2 .field small, .pole-pomoc{font-size:12.5px; color:var(--muted)}
.pole-blad{font-size:12.5px; color:var(--red); font-weight:600}
.form2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 14px}
.form2 .cala{grid-column:1/-1}
.form3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 14px}
@media (max-width:620px){ .form2, .form3{grid-template-columns:1fr} }
.v2 .pole{display:flex; flex-direction:column; gap:6px; min-width:0}
.przelacznik{display:flex; align-items:flex-start; gap:10px; font-size:14px; cursor:pointer}
.przelacznik input{width:18px; height:18px; margin-top:2px; accent-color:var(--mint)}

/* ================= nagłówek modułu ================= */
.mod-head{display:flex; align-items:center; gap:16px; padding:10px 0 4px; flex-wrap:wrap}
.mod-head-t{flex:1; min-width:220px}
.mod-head-t h1{margin:0; font-size:26px; font-weight:800; line-height:1.15}
.mod-head-t p{margin:4px 0 0; color:var(--muted); font-size:14.5px}
.mod-head-a{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ================= karty ================= */
.karta2{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow); padding:18px 20px;
  display:flex; flex-direction:column; gap:12px; min-width:0}
.karta2-h{display:flex; align-items:center; gap:12px; justify-content:space-between}
.karta2-h h2, .karta2-h h3{margin:0; font-size:16.5px; font-weight:750}
.karta2-h .ik3d{--ik-s:34px}
.karta2-h-l{display:flex; align-items:center; gap:11px; min-width:0}
.karta2-opis{font-size:13.5px; color:var(--muted); margin:-4px 0 0}
.siatka{display:grid; gap:16px}
.siatka-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.siatka-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.siatka-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.siatka-boczna{grid-template-columns:minmax(0,1fr) 340px; align-items:start}
@media (max-width:1100px){ .siatka-4{grid-template-columns:repeat(2, minmax(0,1fr))} .siatka-boczna{grid-template-columns:1fr} }
@media (max-width:820px){ .siatka-3, .siatka-2{grid-template-columns:1fr} }
@media (max-width:520px){ .siatka-4{grid-template-columns:1fr 1fr; gap:10px} }

/* kafle liczb */
.kafel-liczba{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:16px 16px 14px; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--ink); transition:transform .15s, box-shadow .15s, border-color .15s; min-width:0}
a.kafel-liczba:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-2)}
.kafel-liczba .ik3d{--ik-s:36px}
.kafel-liczba-w{font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.kafel-liczba-t{font-size:13.5px; color:var(--ink-2); font-weight:600}
.kafel-liczba-o{font-size:12.5px; color:var(--muted)}
.kafel-liczba.alarm .kafel-liczba-w{color:var(--red)}
.kafel-liczba.uwaga .kafel-liczba-w{color:var(--amber)}

/* ================= lista czynności (Dzisiaj) ================= */
.lista2{display:flex; flex-direction:column}
.poz2{display:flex; align-items:center; gap:12px; padding:11px 4px; border-top:1px solid var(--line); min-width:0}
.poz2:first-child{border-top:none}
.poz2-ik{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-2); flex:none}
.poz2-ik.alarm{background:var(--red-soft); color:var(--red)}
.poz2-ik.uwaga{background:var(--amber-soft); color:var(--amber)}
.poz2-ik.ok{background:var(--ok-soft); color:var(--ok)}
.poz2-ik.info{background:var(--mint-soft); color:var(--mint)}
.poz2-t{flex:1; min-width:0}
.poz2-t b, .poz2-t a.poz2-nazwa{display:block; font-size:14.5px; font-weight:650; color:var(--ink); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.poz2-t a.poz2-nazwa:hover{color:var(--mint); text-decoration:underline}
.poz2-t span{display:block; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.poz2-a{display:flex; gap:6px; flex:none; align-items:center}
.poz2-czas{font-size:13px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; width:52px; flex:none}
.poz2-czas.alarm{color:var(--red)}
.poz2.zrobione{opacity:.55}
.wiecej-link{font-size:13.5px; font-weight:650; text-decoration:none; padding-top:8px}

/* ================= plakietki statusów ================= */
.plak{display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 8px; border-radius:999px; font-size:12.5px; font-weight:650;
  white-space:nowrap; background:var(--surface-3); color:var(--ink-2); line-height:1.5; max-width:100%; overflow:hidden; text-overflow:ellipsis}
.plak-k{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.plak-info{background:var(--mint-soft); color:var(--mint-deep)}
.plak-ok{background:var(--ok-soft); color:var(--ok)}
.plak-uwaga{background:var(--amber-soft); color:var(--amber)}
.plak-alarm{background:var(--red-soft); color:var(--red)}
.plak-cichy{background:var(--surface-3); color:var(--muted)}
.plak-brand{background:rgba(91,85,224,.10); color:#4640C4}
html[data-theme="dark"] .plak-info{color:var(--mint)}
html[data-theme="dark"] .plak-brand{color:#B9B5FF}
.plak .ik{width:13px; height:13px}

/* ================= zakładki i filtry ================= */
.zakladki{display:flex; gap:4px; padding:4px; border-radius:13px; background:var(--surface-3); overflow-x:auto; scrollbar-width:none; max-width:100%}
.zakladki::-webkit-scrollbar{display:none}
.zakladki a, .zakladki button{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px; font-size:13.5px; font-weight:650;
  color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:background .15s, color .15s}
.zakladki a:hover, .zakladki button:hover{color:var(--ink); background:color-mix(in srgb, var(--surface) 60%, transparent)}
.zakladki .on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s)}
.zakladki .licz{font-size:12px; font-weight:800; padding:0 7px; border-radius:9px; background:var(--surface-3); color:var(--ink-2); font-variant-numeric:tabular-nums}
.zakladki .on .licz{background:var(--mint-soft); color:var(--mint-deep)}
.pasek-filtrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pasek-filtrow .inp{width:auto; min-width:0}
.szukaj-pole{position:relative; flex:1; min-width:200px; max-width:420px}
.szukaj-pole .ik{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted)}
.szukaj-pole .inp{padding-left:38px; width:100%}

/* ================= tabele ================= */
.tab2-owijka{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow); overflow:hidden}
.tab2-przewijanie{overflow-x:auto}
.tab2{width:100%; border-collapse:collapse; font-size:14px}
.tab2 th{position:sticky; top:0; text-align:left; font-size:12.5px; font-weight:700; color:var(--muted); padding:11px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap}
.tab2 td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink-2)}
.tab2 tr:last-child td{border-bottom:none}
.tab2 tbody tr{transition:background .12s}
.tab2 tbody tr:hover{background:var(--surface-2)}
.tab2 .glowny{font-weight:650; color:var(--ink); text-decoration:none; display:block; max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tab2 a.glowny:hover{color:var(--mint); text-decoration:underline}
.tab2 .pod{display:block; font-size:12.5px; color:var(--muted); max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tab2 .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tab2 .wiersz-arch td{color:var(--muted)}
.th-sort{color:inherit; text-decoration:none}
.th-sort:hover, .th-sort.on{color:var(--ink)}
.rodzaj-ik{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none}
.rodzaj-ik.firma{background:rgba(91,85,224,.10); color:#4640C4}
.rodzaj-ik.osoba{background:var(--mint-soft); color:var(--mint)}
.komorka-nazwa{display:flex; align-items:center; gap:11px; min-width:0}
@media (max-width:760px){
  .tab2.karty-mob thead{display:none}
  .tab2.karty-mob, .tab2.karty-mob tbody, .tab2.karty-mob tr, .tab2.karty-mob td{display:block; width:100%}
  .tab2.karty-mob tr{padding:10px 12px; border-bottom:1px solid var(--line)}
  .tab2.karty-mob td{border:none; padding:3px 0}
  .tab2.karty-mob td[data-l]::before{content:attr(data-l) ": "; font-size:12px; color:var(--muted); font-weight:650}
  .tab2.karty-mob td.num{text-align:left}
}
.strony{display:flex; align-items:center; gap:10px; justify-content:flex-end; padding:12px 14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
.strony-info{margin-right:auto}
.strony-nr{font-weight:650; color:var(--ink-2)}

/* ================= puste stany i szkielety ================= */
.pusty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:36px 18px}
.pusty .ik3d{margin-bottom:6px; animation:unoszenie 3.6s ease-in-out infinite}
.pusty-t{font-size:16px; font-weight:750; color:var(--ink)}
.pusty-o{margin:0; max-width:420px; color:var(--muted); font-size:14px}
.pusty .btn{margin-top:8px}
.szkielet{border-radius:10px; background:linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size:200% 100%;
  animation:polysk 1.2s ease-in-out infinite; min-height:14px}
.szkielet-panel{display:flex; flex-direction:column; gap:12px; padding:22px}
.szkielet-panel .szkielet:nth-child(1){height:28px; width:60%}
.szkielet-panel .szkielet:nth-child(2){height:14px; width:40%}
.szkielet-panel .szkielet:nth-child(n+3){height:58px}

/* ================= tablica etapów (kanban) ================= */
.tablica{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(262px, 1fr); gap:14px; overflow-x:auto; padding:2px 2px 14px; scroll-snap-type:x proximity}
.kolumna{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-l); display:flex; flex-direction:column; min-height:220px; scroll-snap-align:start}
.kolumna-h{display:flex; align-items:center; gap:8px; padding:12px 14px 8px}
.kolumna-h b{font-size:14px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kolumna-h .licz{font-size:12px; font-weight:800; padding:1px 8px; border-radius:9px; background:var(--surface); color:var(--ink-2); border:1px solid var(--line)}
.kolumna-suma{padding:0 14px 8px; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.kolumna-lista{flex:1; display:flex; flex-direction:column; gap:9px; padding:4px 10px 12px; min-height:80px; border-radius:0 0 var(--r-l) var(--r-l); transition:background .15s}
.kolumna-lista.nad{background:var(--mint-soft); box-shadow:inset 0 0 0 2px var(--mint)}
.kolumna.wygrana .kolumna-h b{color:var(--ok)}
.kolumna.przegrana .kolumna-h b{color:var(--muted)}
.kolumna.poza{opacity:.85; border-style:dashed}
.kartka{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:11px 12px; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; gap:6px; cursor:grab; transition:transform .15s, box-shadow .15s, opacity .15s; text-align:left; position:relative}
.kartka:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
.kartka:focus-visible{outline:3px solid var(--mint)}
.kartka.ciagnieta{opacity:.45; transform:rotate(1.5deg)}
.kartka.zapis{opacity:.6}
.kartka-t{font-size:14px; font-weight:650; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.kartka-kto{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kartka-d{display:flex; align-items:center; gap:8px; justify-content:space-between; font-size:12.5px}
.kartka-wart{font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums}
.kartka-krok{font-size:12.5px; color:var(--ink-2); display:flex; gap:6px; align-items:center}
.kartka-krok.brak{color:var(--amber); font-weight:650}
.kartka-krok.po{color:var(--red); font-weight:650}
.kartka-menu{position:absolute; top:6px; right:6px; opacity:0; transition:opacity .15s}
.kartka:hover .kartka-menu, .kartka:focus-within .kartka-menu{opacity:1}

/* ================= oś historii ================= */
.os2{display:flex; flex-direction:column; gap:0}
.os2-poz{display:grid; grid-template-columns:28px 1fr; gap:10px; padding:8px 0; position:relative}
.os2-poz::before{content:""; position:absolute; left:13px; top:34px; bottom:-8px; width:2px; background:var(--line)}
.os2-poz:last-child::before{display:none}
.os2-k{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-2)}
.os2-k .ik{width:14px; height:14px}
.os2-t{font-size:14px; color:var(--ink-2); white-space:pre-line; word-break:break-word}
.os2-m{font-size:12.5px; color:var(--muted)}

/* ================= okno i panel boczny ================= */
.v2 .okno{border-radius:var(--r-l); background:var(--surface); box-shadow:var(--shadow-l); border:1px solid var(--line); animation:wjazd .18s ease-out; max-height:min(88vh, 860px); overflow:auto}
.v2 .okno-back{background:rgba(10,18,32,.42); backdrop-filter:blur(3px)}
.v2 .okno-head h2{font-size:18px; font-weight:750}
.v2 .panel-boczny{background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--shadow-l)}
.panel2{display:flex; flex-direction:column; gap:14px; padding:20px}
.panel2-h{display:flex; gap:12px; align-items:flex-start}
.panel2-h h2{margin:0; font-size:20px; line-height:1.25; word-break:break-word}
.panel2-h .pod{color:var(--muted); font-size:13.5px}
.panel2-x{margin-left:auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--muted); background:var(--surface); border:1px solid var(--line); flex:none}
.panel2-x:hover{color:var(--ink)}
.etapy-pasek{display:flex; gap:4px; flex-wrap:wrap}
.etapy-pasek button{flex:1 1 auto; padding:8px 10px; border-radius:9px; font-size:12.5px; font-weight:650; background:var(--surface-3); color:var(--ink-2);
  border:1px solid transparent; min-width:84px; transition:background .15s}
.etapy-pasek button:hover{border-color:var(--line-2)}
.etapy-pasek button.minione{background:var(--mint-soft); color:var(--mint-deep)}
.etapy-pasek button.obecny{background:var(--mint); color:#fff}
.etapy-pasek button.wygrana{background:var(--ok-soft); color:var(--ok)}
.etapy-pasek button.przegrana{background:var(--surface-3); color:var(--muted)}

/* definicje (etykieta : wartość) */
.dl2{display:grid; grid-template-columns:minmax(120px, 38%) 1fr; gap:7px 14px; font-size:14px; margin:0}
.dl2 dt{color:var(--muted); font-weight:600}
.dl2 dd{margin:0; color:var(--ink); word-break:break-word; min-width:0}

/* komunikaty w treści */
.info2{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; font-size:14px; background:var(--mint-soft); color:var(--ink)}
.info2.uwaga{background:var(--amber-soft)}
.info2.alarm{background:var(--red-soft)}
.info2.ok{background:var(--ok-soft)}
.info2 .ik{margin-top:2px}
.ok-box{padding:12px 14px; border-radius:12px; background:var(--ok-soft); color:var(--ok); font-weight:650}

/* AI */
.ai-poz{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.ai-poz input[type=checkbox]{width:18px; height:18px; margin-top:2px; accent-color:var(--mint); flex:none}
.ai-poz-t{flex:1; min-width:0; font-size:14px}
.ai-cytat{display:block; margin-top:4px; padding-left:10px; border-left:3px solid var(--line-2); color:var(--muted); font-size:13px; font-style:italic}
.ai-poz.niepewne{border-color:#F0C46B; background:color-mix(in srgb, var(--amber-soft) 60%, var(--surface))}
.ai-poz.zastosowane{opacity:.6}

/* ================= toast ================= */
.v2 .toast{border-radius:13px; box-shadow:var(--shadow-l); font-weight:600; background:#13213A; color:#fff; border:none}
.v2 .toast.err{background:#7A1E16; color:#fff}

/* ================= logowanie ================= */
body.publiczna{background:radial-gradient(900px 500px at 15% -10%, rgba(47,111,224,.13), transparent 60%), radial-gradient(700px 420px at 100% 110%, rgba(232,100,28,.12), transparent 60%), var(--bg)}
.publiczna .login-box{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-l); border-radius:24px; padding:30px 28px; gap:14px; max-width:400px}
.login-podtytul{margin:-4px 0 4px; text-align:center; color:var(--muted); font-size:14px}
.publiczna .login-tab.is-wybrany{background:var(--mint); color:#fff}

/* ================= ruch ================= */
@keyframes wjazd{from{opacity:0; transform:translateY(6px) scale(.985)} to{opacity:1; transform:none}}
@keyframes polysk{0%{background-position:100% 0} 100%{background-position:-100% 0}}
@keyframes obrot{to{transform:rotate(360deg)}}
@keyframes unoszenie{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
.wjedz{animation:wjazd .22s ease-out both}
details.rozwin > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; font-weight:650}
details.rozwin > summary::-webkit-details-marker{display:none}
details.rozwin > summary::after{content:""; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); margin-left:auto; transition:transform .2s}
details.rozwin[open] > summary::after{transform:rotate(-135deg)}
details.rozwin[open] > :not(summary){animation:wjazd .2s ease-out}
@media (prefers-reduced-motion: reduce){
  .ik3d, .pusty .ik3d, .kartka, .nav-poz, .wjedz, .menu-lista{animation:none!important; transition:none!important}
}

/* drobne */
.cichy{color:var(--muted)}
.mocno{font-weight:750; color:var(--ink)}
.liczby{font-variant-numeric:tabular-nums}
.wiersz{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.wiersz-k{display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap}
.odstep{height:4px}
.kod{font-family:ui-monospace,Consolas,monospace; font-size:13px; background:var(--surface-3); padding:2px 6px; border-radius:6px; word-break:break-all}
.tagi{display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:12.5px; font-weight:650; padding:2px 9px; border-radius:999px; background:var(--surface-3); color:var(--ink-2)}
.ustaw-nawi{display:flex; flex-direction:column; gap:2px; position:sticky; top:84px}
.ustaw-nawi a{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; text-decoration:none; color:var(--ink-2); font-weight:600; font-size:14px}
.ustaw-nawi a:hover{background:var(--surface)}
.ustaw-nawi a.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s)}
.ustaw-uklad{display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; align-items:start}
@media (max-width:900px){ .ustaw-uklad{grid-template-columns:1fr} .ustaw-nawi{position:static; flex-direction:row; overflow-x:auto} .ustaw-nawi a{white-space:nowrap} }
.przewin-x{overflow-x:auto}

/* kreator importu */
.kroki{display:flex; gap:6px; list-style:none; padding:0; margin:0 0 14px; counter-reset:k; flex-wrap:wrap}
.kroki li{counter-increment:k; display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:13px; font-weight:650}
.kroki li::before{content:counter(k); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:800}
.kroki li.on{background:var(--mint-soft); color:var(--ink)}
.kroki li.on::before{background:var(--mint); color:#fff}
/* podpowiedzi wyboru osoby */
.wybor-lista{display:flex; flex-direction:column; border-radius:10px; overflow:hidden; max-height:220px; overflow-y:auto}
.wybor-lista:not(:empty){border:1px solid var(--line); margin-top:4px; background:var(--surface); box-shadow:var(--shadow-s)}
.wybor-lista button{display:flex; justify-content:space-between; gap:10px; padding:9px 12px; text-align:left; font-size:14px; border-bottom:1px solid var(--line)}
.wybor-lista button:hover, .wybor-lista button:focus-visible{background:var(--surface-2)}
.wybor-lista small{color:var(--muted)}
.lista-krokow{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; font-size:14px; color:var(--ink-2)}
.v2 .okno-btns{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:4px}
.v2 .okno-body{display:flex; flex-direction:column; gap:12px}
.v2 .pole > span{display:block}
.v2 .karta .blok, .v2 .karta .przed-tel{border-radius:16px}
.v2 .zwiniete > summary{cursor:pointer; font-weight:650}

/* Telefon: wiersze z akcjami zawijają się, nazwa nigdy nie znika */
@media (max-width:560px){
  .poz2{flex-wrap:wrap; row-gap:8px}
  .poz2-t{flex:1 1 55%}
  .poz2-a{flex:1 1 100%; justify-content:flex-end; flex-wrap:wrap}
  .poz2-czas{width:auto; min-width:44px}
  .mod-head-t h1{font-size:22px}
  .mod-head .ik3d{--ik-s:42px!important}
  .topbar [data-motyw]{display:none}
  .wiersz-k > .zakladki{max-width:100%}
}
.glowna{overflow-x:clip}