/* ==========================================================================
   2Click Revenue · CRM · sekcje własne podstrony (prefiks .c-)
   Wspólne bloki podstron modułów (hero, panel Rynek dziś, oś dnia, stos kart,
   blok zwijany, integracje, kalkulator, rejestr ekosystemu, okno .b-win)
   są w css/b2b.css (scope body.page-module).
   Ekrany CRM nie mają eksportu z Figmy ani zrzutów produktu: hero i każda
   karta to edytowalne okno HTML (jak Raportowanie na podstronie B2B).
   ========================================================================== */

/* ---------- tekstury kart: ta sama sekwencja odcieni co na podstronie B2B ---------- */
#c01{--card-grad:url(../img/grad/cards/m01.webp)}
#c02{--card-grad:url(../img/grad/cards/m04.webp)}
#c03{--card-grad:url(../img/grad/cards/m07.webp)}
#c04{--card-grad:url(../img/grad/cards/m12.webp)}
#c05{--card-grad:url(../img/grad/cards/m11.webp)}
#c06{--card-grad:url(../img/grad/cards/m08.webp)}
#c07{--card-grad:url(../img/grad/cards/m09.webp)}
#c08{--card-grad:url(../img/grad/cards/m18.webp)}
#c09{--card-grad:url(../img/grad/cards/m02.webp)}
#c10{--card-grad:url(../img/grad/cards/m03.webp)}
#c11{--card-grad:url(../img/grad/cards/m05.webp)}
#c12{--card-grad:url(../img/grad/cards/m10.webp)}
#c13{--card-grad:url(../img/grad/cards/m19.webp)}
#c14{--card-grad:url(../img/grad/cards/m06.webp)}

/* ---------- 00 hero: okno HTML 1438 × 666 skalowane do szerokości okna (jak obraz na B2B) ---------- */
.c-mockwrap{position:relative;overflow:hidden}
.c-mock{position:absolute;left:0;top:0;width:1438px;height:666px;transform-origin:0 0;display:grid;grid-template-columns:232px minmax(0,1fr) 332px;background:var(--paper-2);font-size:14px;line-height:20px;color:var(--ink);text-align:left}
.c-mock .meta{font-size:11px}
.c-mock__nav{display:flex;flex-direction:column;gap:4px;padding:22px 16px;background:#fff;border-right:1px solid var(--line)}
.c-mock__brand{margin-bottom:22px}
.c-mock__nav .meta{padding:0 10px 8px}
.c-mock__nav a{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:10px;color:var(--ink-2);font-size:14px;font-weight:500}
.c-mock__nav a .lucide{width:16px;height:16px;color:var(--muted)}
.c-mock__nav a.is-active{background:var(--ink);color:#fff}
.c-mock__nav a.is-active .lucide{color:#fff}
.c-mock__erp{margin-top:auto;display:inline-flex;align-items:center;gap:6px;padding:10px;border-radius:10px;border:1px dashed var(--line-strong);text-transform:uppercase;letter-spacing:.04em}
.c-mock__erp .lucide{width:14px;height:14px}
.c-mock__main{display:flex;flex-direction:column;gap:16px;padding:24px 28px;min-width:0}
.c-cust{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 16px;align-items:center}
.c-cust__av{grid-row:1 / span 2;width:52px;height:52px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;letter-spacing:.02em}
.c-cust__t{display:flex;flex-direction:column}
.c-cust__t b{font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.01em}
.c-cust__t span{font-size:13px;color:var(--muted)}
.c-cust__chips{display:flex;flex-wrap:wrap;gap:6px}
.xc--warn{background:#FBEFEA;color:#A6432F}
.c-mock__kpis > div{background:#fff}
.c-mock__tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.c-mock__tabs span{padding:8px 12px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.c-mock__tabs span.is-active{color:var(--ink);border-color:var(--ink)}
.c-mock__rail{display:flex;flex-direction:column;gap:10px;padding:24px 20px;background:#fff;border-left:1px solid var(--line)}
.c-mock__rail .meta{display:flex;align-items:center;gap:6px;margin-top:6px}
.c-mock__rail .meta .lucide{width:14px;height:14px;color:var(--accent-text)}
.c-sig{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:var(--paper-2);font-size:13px;line-height:18px}
.c-sig b{font-weight:500;color:var(--ink)}
.c-sig span{color:var(--muted)}
.c-sig__a{color:var(--accent-text)!important;font-weight:500}
.c-ct{display:flex;align-items:center;gap:10px;font-size:13px;line-height:17px}
.c-ct__av{width:32px;height:32px;border-radius:50%;background:var(--paper-3);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink-2)}
.c-ct div{display:flex;flex-direction:column}
.c-ct b{font-weight:500}
.c-ct span{color:var(--muted)}

/* ---------- okna kart: układ w stałej szerokości projektowej 760 px, dopasowane zoomem do ekranu karty
   (odpowiednik obrazu ekranu skalowanego do pola na podstronie B2B; zoom liczy js/crm.js) ---------- */
.page-winzoom .b-card__screen .b-win{width:760px;max-width:none;flex:none}
.page-winzoom .b-card__screen--phone .c-phone{justify-self:center}

/* ---------- chip „dane demonstracyjne” (wspólny dla podstron z oknami) ---------- */
.p-demo{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:rgba(30,38,46,.72);color:#fff;font-size:11px;line-height:1;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;backdrop-filter:blur(6px)}
.p-demo--bar{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:var(--paper-3);color:var(--muted);backdrop-filter:none}
.b-card__screen .p-demo{position:absolute;left:16px;bottom:14px;z-index:3}
.b-card__screen--phone .p-demo{left:auto;right:16px}

/* ---------- okna kart: wiersze osi czasu / listy ---------- */
.c-tl{display:flex;flex-direction:column;gap:6px}
.c-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--paper-2);font-size:13px;line-height:18px}
.c-row .sq{width:32px;height:32px;border-radius:9px;background:#fff;display:grid;place-items:center;color:var(--accent-text)}
.c-row .sq .lucide{width:15px;height:15px}
.c-row .sq--ink{background:var(--ink);color:#fff}
.c-row .t{display:flex;flex-direction:column;gap:1px;min-width:0}
.c-row .t b{font-weight:500;font-size:14px;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row .t span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row__m{white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.c-row .b-pill{height:28px;padding:0 10px;letter-spacing:.04em}
.c-row.is-done{opacity:.55}
.c-row .xc{height:24px}
/* wiersze z 4 kolumnami: ikona, treść, kwota, pigułka */
.c-row:has(> .c-row__m + .b-pill),.c-row:has(> .c-row__m + .xc){grid-template-columns:32px minmax(0,1fr) auto auto}
.c-tl--dates .c-row{grid-template-columns:56px 32px minmax(0,1fr) auto}
.c-row__d{font-size:11px;line-height:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.c-stat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.c-stat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.c-stat.is-ok{color:var(--accent-text)}
.c-stat.is-ok::before{background:var(--accent)}
.b-win__table .warn{color:#A6432F!important}

/* ---------- pipeline: cztery kolumny ---------- */
.c-kan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.c-kan__col{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;background:var(--paper-2);min-width:0}
.c-kan__h{display:flex;flex-direction:column;padding:4px 6px 8px}
.c-kan__h b{font-size:13px;font-weight:500}
.c-kan__h span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.c-kc{display:flex;flex-direction:column;gap:2px;padding:10px 10px;border-radius:9px;background:#fff;font-size:12px;line-height:16px;min-width:0}
.c-kc b{font-size:13px;line-height:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-kc .amt{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.c-kc > span:last-child{color:var(--muted);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-kc .lucide{width:12px;height:12px;color:var(--accent-text);flex:none}
.c-kc.is-hot{box-shadow:inset 0 0 0 1.5px var(--accent)}
.c-kc.is-won .amt{color:var(--accent-text)}

/* ---------- kalendarz: tydzień w pięciu kolumnach ---------- */
.c-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.c-cal__d{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;background:var(--paper-2);min-width:0}
.c-cal__d.is-today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.c-cal__h{display:flex;flex-direction:column;padding:2px 6px 6px}
.c-cal__h b{font-size:13px;font-weight:500}
.c-cal__h span{font-size:11px;color:var(--muted)}
.c-ev{display:flex;flex-direction:column;gap:1px;padding:8px 9px;border-radius:9px;background:#fff;font-size:12px;line-height:16px;min-width:0;border-left:3px solid var(--line-strong)}
.c-ev .tm{font-size:11px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.c-ev b{font-weight:500;font-size:12px;line-height:16px}
.c-ev > span:last-child{color:var(--muted);display:flex;align-items:center;gap:4px}
.c-ev .lucide{width:12px;height:12px;color:var(--accent-text);flex:none}
.c-ev--call{border-left-color:var(--ink)}
.c-ev--sig{border-left-color:var(--accent)}
.c-ev--free{border-left-style:dashed;background:transparent}

/* ---------- zespół: słupki realizacji planu ---------- */
.c-bars{display:flex;flex-direction:column;gap:8px}
.c-bar{display:grid;grid-template-columns:140px minmax(0,1fr) 200px;gap:14px;align-items:center;font-size:13px;line-height:18px}
.c-bar .n{font-weight:500;white-space:nowrap}
.c-bar .trk{height:10px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.c-bar .trk i{display:block;height:100%;border-radius:999px;background:var(--grad-brand)}
.c-bar .v{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- sekwencja follow-up ---------- */
.c-seq{display:flex;flex-direction:column;gap:6px}
.c-seq__s{display:grid;grid-template-columns:64px 32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--paper-2);font-size:13px;line-height:18px}
.c-seq__s .d{font-size:11px;line-height:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.c-seq__s .sq{width:32px;height:32px;border-radius:9px;background:#fff;display:grid;place-items:center;color:var(--accent-text)}
.c-seq__s .sq .lucide{width:15px;height:15px}
.c-seq__s .sq--ink{background:var(--ink);color:#fff}
.c-seq__s div{display:flex;flex-direction:column;gap:1px;min-width:0}
.c-seq__s b{font-weight:500;font-size:14px;line-height:19px}
.c-seq__s div span{color:var(--muted)}
.c-seq__s.is-done{opacity:.7}
.c-seq__s.is-now{box-shadow:inset 0 0 0 1.5px var(--accent)}
.c-seq__kpis > div{padding:10px 12px}
.c-seq__kpis b{font-size:18px;line-height:24px}

/* ---------- role: tabela uprawnień ---------- */
.c-roles .r > span:not(:first-child){font-size:13px}

/* ---------- telefon: trasa dnia (karta Sprzedaż terenowa) ---------- */
.c-phone{position:relative;z-index:2;flex:none;width:280px;height:536px;border-radius:36px;background:#fff;box-shadow:0 0 0 8px var(--ink),0 0 0 9px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:14px 14px 16px;font-size:12px;line-height:16px;color:var(--ink)}
.c-phone__bar{display:flex;justify-content:space-between;padding:4px 6px 0;font-size:11px;font-weight:500;color:var(--muted)}
.c-phone__h{display:flex;flex-direction:column;padding:8px 4px 4px}
.c-phone__h b{font-size:15px;line-height:20px;font-weight:500}
.c-phone__h span{color:var(--muted)}
.c-phone__v{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;padding:10px 10px;border-radius:12px;background:var(--paper-2)}
.c-phone__v .tm{font-size:12px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.c-phone__v div{display:flex;flex-direction:column;min-width:0}
.c-phone__v b{font-size:13px;line-height:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-phone__v span{color:var(--muted);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-phone__v .lucide{width:12px;height:12px;color:var(--accent-text);flex:none}
.c-phone__v.is-done{opacity:.55}
.c-phone__v.is-now{box-shadow:inset 0 0 0 1.5px var(--accent);background:#fff}
.c-phone__cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.c-phone__cta .lucide{width:15px;height:15px}
.c-phone__off{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:11px}
.c-phone__off .lucide{width:12px;height:12px}

/* ---------- responsywność ---------- */
@media (max-width:1100px){
  .c-bar{grid-template-columns:120px minmax(0,1fr) 170px}
}
@media (max-width:700px){
  .b-card__screen{flex-wrap:wrap;row-gap:8px}
  .b-card__screen .p-demo{position:static;flex:0 0 100%;height:auto;padding:0;background:none;color:var(--muted);backdrop-filter:none}
  .p-demo--bar{display:none}
  .page-winzoom .b-card__screen .b-win:not(.c-scene):not(.el){width:100%;zoom:1!important} /* .el = elementy z Figmy (docs/27), skalowane jak sceny */
  .c-row{grid-template-columns:28px minmax(0,1fr)}
  .c-row:has(> .c-row__m + .b-pill),.c-row:has(> .c-row__m + .xc){grid-template-columns:28px minmax(0,1fr)}
  .c-row .sq{width:28px;height:28px}
  .c-row__m,.c-row .b-pill,.c-row .xc{grid-column:2}
  .c-row .b-pill,.c-row .xc{justify-self:start}
  .c-row .t b,.c-row .t span{white-space:normal}
  .c-tl--dates .c-row{grid-template-columns:28px minmax(0,1fr)}
  .c-row__d{grid-column:2;order:-1}
  .c-kan{grid-template-columns:1fr 1fr}
  .c-cal{grid-template-columns:1fr 1fr}
  .c-cal__d:nth-child(n+3){display:none}
  .c-bar{grid-template-columns:1fr;gap:4px}
  .c-bar .v{text-align:left}
  .c-seq__s{grid-template-columns:28px minmax(0,1fr)}
  .c-seq__s .d,.c-seq__s .xc{grid-column:2}
  .c-seq__s .sq{width:28px;height:28px}
  .c-seq__kpis{grid-template-columns:1fr 1fr}
  .c-phone{width:240px;height:460px;gap:6px;padding:12px}
}