/* app.css — shared structure for ALL component classes.
   Reads ONLY CSS custom properties from themes.css (with neutral
   fallbacks). NO hardcoded themed colors/fonts/radii — switching
   data-skin must recolor everything. Derived tints use color-mix()
   off the theme variables so they follow the skin. */

*{box-sizing:border-box;margin:0;padding:0}

html{ background:var(--bg,#0a0814); }

body{
  background:var(--bg,#0a0814);
  background-image:var(--bg-image,none);
  background-attachment:fixed;
  color:var(--ink,#f4f1fb);
  font-family:var(--font-body, system-ui, sans-serif);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ============================ SHELL ============================ */
/* The page body IS the app shell grid: sidebar (col 1, both rows) |
   topbar (col 2, row 1) over main (col 2, row 2). shell.js renders
   .side + .top into #shell (display:contents so they become grid
   items); #view is the page's own <main>. .shell kept as an optional
   alias for any wrapper that wants it. */
body{
  display:grid;
  grid-template-columns:214px 1fr;
  grid-template-rows:auto 1fr;
  min-height:100vh;
}
.shell{ display:contents; }
#shell{ display:contents; }
#view{ min-width:0; }
.main{ min-width:0; }

/* -------- sidebar -------- */
.side{
  grid-column:1;
  grid-row:1 / 3;
  border-right:1px solid var(--line,rgba(255,255,255,.11));
  background:color-mix(in srgb, var(--solid,#140f24) 55%, transparent);
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:sticky;
  top:0;
  height:100vh;
}
.logo{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;cursor:pointer}
.logo svg{width:34px;height:34px;flex:none}
.logo .wm{font-family:var(--font-display);font-size:20px;letter-spacing:.01em;line-height:1.05}
.logo .wm b{color:var(--acc2,#22d3ee)}
.logo .wm i{
  display:block;font-style:normal;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.30em;color:var(--muted);margin-top:4px;text-transform:uppercase;
}
.navlbl{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  color:var(--muted);padding:14px 10px 6px;text-transform:uppercase;
}
.nav{
  display:flex;align-items:center;gap:11px;font-size:13px;
  color:color-mix(in srgb, var(--ink) 78%, transparent);
  padding:9px 11px;border-radius:var(--radius-sm,9px);cursor:pointer;
  border-left:3px solid transparent;
  transition:background .15s,color .15s;
}
.nav:hover{ background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink); }
.nav.on{ background:var(--nav-active-bg); color:var(--nav-active-fg); box-shadow:var(--nav-active-mark); }
.nav .ic{width:17px;text-align:center;opacity:.9}
.nav .bdg, .bdg{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;
  background:color-mix(in srgb, var(--acc3) 18%, transparent);
  color:var(--acc3);padding:1px 7px;border-radius:var(--radius-pill,999px);
  border:1px solid color-mix(in srgb, var(--acc3) 36%, transparent);
}
.nav.on .bdg{ background:rgba(255,255,255,.22); color:var(--nav-active-fg); border-color:transparent; }
.me{
  margin-top:auto;display:flex;align-items:center;gap:9px;
  padding:12px 8px 4px;border-top:1px solid var(--line);
}
.ava{
  width:30px;height:30px;border-radius:var(--radius-sm,9px);
  background:linear-gradient(135deg, var(--acc1), var(--acc3));
  display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;flex:none;
}
.me .nm{font-size:12px;font-weight:600}
.me .rl{font-size:10px;color:var(--muted);font-family:var(--font-mono)}

/* ============================ TOPBAR ============================ */
.top{
  grid-column:2;grid-row:1;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;row-gap:9px;
  padding:15px 26px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:20;
}
/* global backstop: off-canvas drawers (translateX 100%) must never add a
   horizontal scrollbar at any width; desktop has no legit h-overflow */
html,body{overflow-x:hidden}
.top h1{font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:.01em}
.search{
  margin-left:6px;flex:1;max-width:390px;display:flex;align-items:center;gap:9px;
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  border:1px solid var(--line);border-radius:var(--radius-sm,10px);
  padding:9px 13px;color:var(--muted);font-size:13px;cursor:text;
}
.search kbd{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--faint);
}
.pill{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:var(--ok);display:flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:var(--radius-sm,8px);
  border:1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  background:color-mix(in srgb, var(--ok) 9%, transparent);
  text-transform:uppercase;white-space:nowrap;
}
.pill .p{
  width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 10px var(--ok);animation:pill-soft 2.6s infinite;
}
@keyframes pill-soft{50%{opacity:.4}}
.btn{
  font-weight:600;font-size:13px;color:#fff;
  background:linear-gradient(110deg, var(--acc2), var(--acc1));
  padding:9px 16px;border-radius:var(--radius-sm,9px);white-space:nowrap;
  box-shadow:var(--shadow);
}
.btn:hover{filter:brightness(1.06)}
.btn-ghost{
  background:none;color:var(--ink);
  border:1px solid var(--line2);box-shadow:none;
}
.btn-ghost:hover{border-color:var(--acc1);filter:none}

/* ============================ MAIN ============================ */
.main{
  grid-column:2;grid-row:2;
  padding:22px 26px 40px;
  display:flex;flex-direction:column;gap:20px;
}

/* ---- KPIs ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{
  background:var(--panel);
  backdrop-filter:blur(var(--panel-blur,0));
  border:1px solid var(--line);border-radius:var(--radius,14px);
  padding:17px 18px;position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.kpi .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
.kpi .v{font-family:var(--font-display);font-size:30px;line-height:1.05;margin-top:9px;letter-spacing:-.01em}
.kpi.c1 .v{color:var(--acc1)}
.kpi.c2 .v{color:var(--acc2)}
.kpi.c3 .v{color:var(--acc3)}
.kpi.c4 .v{color:var(--ink)}
.kpi .d{font-size:11px;margin-top:7px;color:var(--muted)}
.kpi .d b{color:var(--ok)}
.kpi .d b.dn{color:var(--due)}
.kpi .spark{position:absolute;right:16px;bottom:16px;display:flex;align-items:flex-end;gap:3px;height:28px;opacity:.9}
.kpi .spark span{width:5px;border-radius:2px 2px 0 0;background:linear-gradient(180deg, var(--acc2), var(--acc1))}

/* ---- row / card / header ---- */
.row{display:grid;grid-template-columns:1.55fr .95fr;gap:20px}
.card{
  background:var(--panel);
  backdrop-filter:blur(var(--panel-blur,0));
  border:1px solid var(--line);border-radius:var(--radius,15px);
  overflow:hidden;box-shadow:var(--shadow);
}
.ch{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ch h3{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:.01em}
.ch .sub{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.ch .more{margin-left:auto;font-size:12px;color:var(--acc2);font-weight:600;cursor:pointer}

/* ---- pipeline board ---- */
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
.col{background:color-mix(in srgb, var(--solid) 70%, transparent);padding:11px 9px 14px;min-height:230px}
.col h4{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:10px;text-transform:uppercase}
.col h4 .cd{width:8px;height:8px;border-radius:50%}
.col h4 b{margin-left:auto;color:var(--ink);font-weight:700}
.s1 .cd{background:var(--acc1)}
.s2 .cd{background:var(--acc2)}
.s3 .cd{background:var(--warn)}
.s4 .cd{background:var(--acc3)}
.s5 .cd{background:var(--ok)}
.deal{
  border:1px solid var(--line);border-left:3px solid var(--deal-acc, var(--acc1));
  border-radius:var(--radius-sm,8px);padding:9px 10px;margin-bottom:7px;
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  cursor:grab;transition:transform .12s,border-color .15s,box-shadow .15s;
}
.deal:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.deal.dragging{opacity:.4}
.s1 .deal{--deal-acc:var(--acc1)}
.s2 .deal{--deal-acc:var(--acc2)}
.s3 .deal{--deal-acc:var(--warn)}
.s4 .deal{--deal-acc:var(--acc3)}
.s5 .deal{--deal-acc:var(--ok)}
.deal .co{font-weight:600;font-size:12px;color:var(--ink);line-height:1.3}
.deal .val{font-family:var(--font-mono);font-size:11px;color:var(--acc2);margin-top:3px}
.deal .who{font-size:10px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:5px}
.dot{width:14px;height:14px;border-radius:5px;background:linear-gradient(135deg, var(--acc1), var(--acc3));font-size:8px;display:grid;place-items:center;color:#fff;font-weight:800;flex:none}

/* ---- table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;padding:12px 18px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 18px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:color-mix(in srgb, var(--ink) 3%, transparent)}
.tbl .co{font-weight:600;color:var(--ink)}
.tbl .num{font-family:var(--font-mono);color:var(--ink)}
.tag{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;
  padding:3px 8px;border-radius:var(--radius-pill,999px);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-transform:uppercase;
  border:1px solid transparent;
}
.t-ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 40%, transparent);background:color-mix(in srgb, var(--ok) 10%, transparent)}
.t-wait{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 40%, transparent);background:color-mix(in srgb, var(--warn) 10%, transparent)}
.t-due{color:var(--due);border-color:color-mix(in srgb, var(--due) 40%, transparent);background:color-mix(in srgb, var(--due) 10%, transparent)}
.tag.ksef{color:var(--ksef);border-color:color-mix(in srgb, var(--ksef) 40%, transparent);background:color-mix(in srgb, var(--ksef) 10%, transparent)}
.tag.draft{color:var(--muted);border-color:var(--line);background:transparent}

/* ---- ranking ---- */
.rk{padding:6px 6px}
.rkrow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-sm,10px)}
.rkrow:hover{background:color-mix(in srgb, var(--ink) 4%, transparent)}
.rkrow .pos{font-family:var(--font-display);font-weight:700;font-size:18px;width:26px;color:var(--muted)}
.rkrow.top .pos{color:var(--acc2)}
.rkrow .nm{font-size:13px;font-weight:600}
.rkrow .sub{font-size:10px;color:var(--muted);font-family:var(--font-mono);margin-top:2px}
.rkrow .bar{flex:1;height:7px;border-radius:var(--radius-pill,6px);background:color-mix(in srgb, var(--ink) 8%, transparent);overflow:hidden}
.rkrow .bar i{display:block;height:100%;border-radius:var(--radius-pill,6px);background:linear-gradient(90deg, var(--acc1), var(--acc2))}
.rkrow:nth-child(2) .bar i{background:var(--acc2)}
.rkrow:nth-child(3) .bar i{background:var(--acc3)}
.rkrow .amt{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}

/* ---- calendar ---- */
.cal{padding:14px 18px}
.calrow{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.calrow:last-child{border:0}
.calrow .ln{width:3px;border-radius:3px;background:var(--acc3)}
.calrow.b .ln{background:var(--ok)}
.calrow.c .ln{background:var(--warn)}
.calrow .when{font-family:var(--font-mono);font-size:11px;color:var(--acc2);width:54px;flex:none}
.calrow .ev{font-size:12.5px}
.calrow .ev .m{font-size:10px;color:var(--muted);margin-top:2px}

/* ============================ TABS ============================ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.tab{
  font-size:13px;font-weight:600;color:var(--muted);
  padding:11px 16px;cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .14s,border-color .14s;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--acc1);border-bottom-color:var(--acc1)}

/* ============================ DRAWER ============================ */
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(440px,92vw);z-index:80;
  background:var(--solid);border-left:1px solid var(--line2);
  box-shadow:-24px 0 60px rgba(0,0,0,.3);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;overflow:auto;
}
.drawer.open{transform:translateX(0)}

/* ============================ MODAL ============================ */
.modal{
  position:fixed;top:50%;left:50%;z-index:90;
  width:min(540px,92vw);max-height:86vh;overflow:auto;
  background:var(--solid);border:1px solid var(--line2);border-radius:var(--radius,15px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;
  transition:transform .2s,opacity .2s;
}
.modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}

/* ============================ OVERLAY ============================ */
.overlay{
  position:fixed;inset:0;z-index:70;
  background:color-mix(in srgb, var(--bg) 60%, rgba(0,0,0,.55));
  backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.overlay.open{opacity:1;pointer-events:auto}

/* ============================ PALETTE ============================ */
.palette{
  position:fixed;top:14vh;left:50%;transform:translateX(-50%) translateY(-12px);z-index:95;
  width:min(620px,92vw);
  background:var(--solid);border:1px solid var(--line2);border-radius:var(--radius,15px);
  box-shadow:0 40px 90px rgba(0,0,0,.5);overflow:hidden;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.palette.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.palette .field{border-bottom:1px solid var(--line)}
.palette .pal-result{
  display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer;font-size:13px;
  border-bottom:1px solid var(--line);
}
.palette .pal-result:last-child{border-bottom:0}
.palette .pal-result:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.palette .pal-result .ic{width:20px;text-align:center;opacity:.85}
.palette .pal-result .k{font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-left:auto;text-transform:uppercase;letter-spacing:.08em}

/* ============================ TOAST ============================ */
.toast{
  position:fixed;right:22px;bottom:22px;z-index:120;
  background:var(--solid);color:var(--ink);
  border:1px solid var(--line2);border-left:3px solid var(--acc1);
  border-radius:var(--radius-sm,10px);padding:12px 16px;font-size:13px;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
  transform:translateY(14px);opacity:0;transition:transform .22s,opacity .22s;pointer-events:none;
}
.toast.show{transform:translateY(0);opacity:1}

/* ============================ FORM BITS ============================ */
.field{padding:14px 16px}
.field label{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.input{
  width:100%;background:color-mix(in srgb, var(--ink) 4%, transparent);
  border:1px solid var(--line2);border-radius:var(--radius-sm,9px);
  padding:10px 13px;color:var(--ink);font:inherit;font-size:13.5px;outline:none;
}
.input:focus{border-color:var(--acc1)}
.input::placeholder{color:var(--faint)}
.toggle{
  position:relative;width:42px;height:24px;border-radius:var(--radius-pill,999px);
  background:color-mix(in srgb, var(--ink) 14%, transparent);
  border:1px solid var(--line2);cursor:pointer;transition:background .18s;flex:none;
}
.toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--ink);transition:transform .18s;
}
.toggle.on{background:var(--acc1)}
.toggle.on::after{transform:translateX(18px);background:#fff}
.btn-row{display:flex;gap:10px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}

/* ============================ SWITCHER ============================ */
.switcher{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px 5px 11px;border-radius:13px;
  border:1px solid color-mix(in srgb, var(--acc1) 40%, var(--line2));
  background:color-mix(in srgb, var(--acc1) 8%, transparent);
}
/* first-visit discovery nudge — JS adds .sw-hint until the switcher is used once */
.switcher.sw-hint{animation:sw-attn 1.6s ease-in-out 3}
@keyframes sw-attn{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--acc1) 24%, transparent)}
}
.switcher .sw-lbl{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:color-mix(in srgb, var(--acc1) 78%, var(--ink));margin-right:3px;
}
/* DEMO DOCK (bottom-right): "Zmień branżę" + "Chcę taki system". This is the
   demo WRAPPER's own navigation — site-level, NOT part of the simulated CRM.
   It deliberately ignores the active skin and keeps one fixed dark "chrome"
   look on every theme, so it reads as a layer ABOVE the product instead of
   dissolving into whatever palette is loaded. */
.corner-cta{
  position:fixed;right:18px;bottom:16px;z-index:60;
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  padding:9px 11px 11px;border-radius:16px;
  background:rgba(13,11,24,.86);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 36px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.04) inset;
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  /* gentle breathing glow — draws the eye to the dock as a separate object.
     Fixed cyan accent (NOT skin-derived) so colors stay consistent. */
  animation:dock-attn 3.8s ease-in-out infinite;
}
@keyframes dock-attn{
  0%,100%{box-shadow:0 12px 36px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 0 0 rgba(34,211,238,0)}
  50%{box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.11) inset, 0 0 24px 3px rgba(34,211,238,.32)}
}
/* eyebrow: names the dock so it's unmistakably the demo wrapper, not the app */
.corner-cta::before{
  content:"⌂ NAWIGACJA DEMO";
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;font-weight:700;
  color:rgba(255,255,255,.4);
  padding:1px 2px 8px;border-bottom:1px solid rgba(255,255,255,.08);
}
.branza-cta,.footer-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:11px 18px;border-radius:11px;white-space:nowrap;
  transition:transform .14s,color .15s,border-color .15s,background .15s,filter .15s;
}
/* secondary: quiet ghost link back to the vertical picker */
.branza-cta{color:rgba(255,255,255,.74);background:transparent;border:1px solid rgba(255,255,255,.14)}
.branza-cta:hover{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07)}
/* labeled square tiles — a named swatch per theme */
.swatch{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:auto;height:auto;min-width:54px;padding:7px 9px 6px;
  cursor:pointer;border:1px solid var(--line2);border-radius:10px;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  transition:transform .12s,border-color .12s,background .12s;
}
.swatch .sw-dot{
  width:100%;height:9px;border-radius:4px;background:var(--sw,#888);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
.swatch .sw-nm{
  font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.03em;
  line-height:1;white-space:nowrap;color:var(--muted);
}
.swatch:hover{border-color:var(--acc1);transform:translateY(-1px)}
.swatch.on{
  border-color:var(--acc1);
  background:color-mix(in srgb, var(--acc1) 12%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--acc1) 35%, transparent) inset;
}
.swatch.on .sw-nm{color:var(--ink)}
[data-skin="maszyna"] .swatch,[data-skin="maszyna"] .swatch .sw-dot{border-radius:0}
.swatch[data-skin-key="rave"]{--sw:linear-gradient(135deg,#9bf043,#22d3ee,#ff4fd8)}
.swatch[data-skin-key="maszyna"]{--sw:#ccff00}
.swatch[data-skin-key="dzien"]{--sw:#2540ec}
.swatch[data-skin-key="swit"]{--sw:linear-gradient(135deg,#0aa37c,#5b6cff)}
.swatch[data-skin-key="korpo"]{--sw:linear-gradient(135deg,#2563eb,#0891b2)}
.swatch[data-skin-key="kobalt"]{--sw:linear-gradient(135deg,#5b8cff,#38bdf8)}
.swatch[data-skin-key="fracht"]{--sw:linear-gradient(135deg,#1e6fd6,#15803d)}
.swatch[data-skin-key="dyzur"]{--sw:linear-gradient(135deg,#f59e0b,#ef4444)}
.swatch[data-skin-key="wieczor"]{--sw:linear-gradient(135deg,#c9a24a,#4a8a78)}
/* per-vertical signature skins — accents mirror their themes.css --acc1/--acc2 */
.swatch[data-skin-key="kancelaria"]{--sw:linear-gradient(135deg,#b08d3f,#cdab63)}
.swatch[data-skin-key="klasyczna"]{--sw:linear-gradient(135deg,#7c2d2d,#1f3a6b)}
.swatch[data-skin-key="nowoczesna"]{--sw:linear-gradient(135deg,#2f6f8f,#3a7d6e)}
.swatch[data-skin-key="grafit"]{--sw:linear-gradient(135deg,#c0a062,#7fa6a0)}
.swatch[data-skin-key="swieze"]{--sw:linear-gradient(135deg,#3f9142,#e2563b)}
.swatch[data-skin-key="spedycja"]{--sw:linear-gradient(135deg,#3b82f6,#f59e0b)}
.swatch[data-skin-key="polowy"]{--sw:linear-gradient(135deg,#ea7317,#2563eb)}
.swatch[data-skin-key="butik"]{--sw:linear-gradient(135deg,#b08a3e,#2f5d50)}

/* keep the topbar uncluttered on narrower viewports */
/* mid-width laptops: reclaim space (esp. for IT's 5 named swatches + the
   Branża link) so the topbar stays tidy instead of wrapping to 2-3 rows.
   The search is a desktop nicety — it shrinks first. */
@media(max-width:1480px){
  .search{max-width:200px}
}
@media(max-width:1240px){
  .top .pill{display:none}
  .switcher .sw-lbl{display:none}
  .search{max-width:130px}
  .switcher{padding:4px 7px 4px 8px;gap:5px}
  .swatch{min-width:46px;padding:6px 7px 5px}
}

/* ============================ DEMO BADGE ============================ */
.demo-badge{
  position:fixed;top:14px;right:-46px;z-index:130;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;font-weight:700;
  color:#0a0814;background:linear-gradient(110deg, var(--acc4), var(--acc2));
  padding:5px 56px;transform:rotate(45deg);box-shadow:0 4px 18px rgba(0,0,0,.4);
  text-transform:uppercase;pointer-events:none;
}

/* ============================ FOOTER CTA ============================ */
/* primary: the conversion goal — filled, FIXED gradient (green→cyan→magenta,
   the demo's own identity, NOT tied to the active skin). It pops as the one
   "live" action in the dock and periodically sheens to pull the eye. */
.footer-cta{
  position:relative;overflow:hidden;isolation:isolate;
  color:#0a0814;border:0;
  background:linear-gradient(110deg,#9bf043,#22d3ee 55%,#ff4fd8);
  box-shadow:0 4px 16px rgba(0,0,0,.32);
}
.footer-cta::after{
  content:"";position:absolute;top:0;left:-65%;width:42%;height:100%;z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg);
  animation:cta-sheen 3.8s ease-in-out infinite;
}
@keyframes cta-sheen{0%,68%{left:-65%}86%,100%{left:135%}}
.footer-cta:hover{transform:translateY(-1px);filter:brightness(1.07)}

/* respect reduced-motion: keep the dock distinct, just hold it still */
@media(prefers-reduced-motion:reduce){
  .corner-cta{animation:none}
  .footer-cta::after{display:none}
}

/* ============================ ENTRANCE ANIM ============================ */
[class*="stg"]{animation:stg-rise .55s cubic-bezier(.2,.7,.2,1) both}
.stg1{animation-delay:.02s}.stg2{animation-delay:.08s}.stg3{animation-delay:.14s}.stg4{animation-delay:.2s}
@keyframes stg-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================ DOC CHAIN STEPPER ============================ */
/* Oferta → Zamówienie → Faktura (+ KSeF). The signature of the real product. */
.doc-chain{
  display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;
  padding:14px 16px;
  background:var(--panel);backdrop-filter:blur(var(--panel-blur,0));
  border:1px solid var(--line);border-radius:var(--radius,14px);box-shadow:var(--shadow);
}
.dc-step{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 10px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--line2);
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  transition:border-color .15s,background .15s,transform .12s;min-width:0;
}
a.dc-step:hover{transform:translateY(-1px);border-color:color-mix(in srgb, var(--acc1) 55%, transparent)}
.dc-step .dc-ic{
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  border:1px solid var(--line2);color:var(--muted);
  background:color-mix(in srgb, var(--ink) 6%, transparent);
}
[data-skin="maszyna"] .dc-step .dc-ic{border-radius:0}
.dc-step .dc-lab{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2}
.dc-step .dc-no{display:block;font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:2px;letter-spacing:.02em}
.dc-step.todo{opacity:.55}
.dc-step.todo .dc-lab{color:var(--muted)}
.dc-step.done .dc-ic{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 45%, transparent);background:color-mix(in srgb, var(--ok) 12%, transparent)}
.dc-step.active{border-color:var(--acc1);background:color-mix(in srgb, var(--acc1) 10%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--acc1) 30%, transparent) inset}
.dc-step.active .dc-ic{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--acc2),var(--acc1))}
.dc-step.ksef.done .dc-ic{color:var(--ksef);border-color:color-mix(in srgb, var(--ksef) 45%, transparent);background:color-mix(in srgb, var(--ksef) 14%, transparent)}
.dc-arrow{display:flex;align-items:center;color:var(--faint);font-size:16px;opacity:.5}
.dc-arrow.lit{color:var(--acc1);opacity:.9}

/* ============================ FLOW BOARD (pulpit hero) ============================ */
/* The whole point of the product, made visible the moment you land:
   Oferta → Zamówienie → Faktura → KSeF, with live counts + recent docs. */
.flow-board{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;padding:16px}
.flow-col{
  display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line2);border-radius:var(--radius-sm,10px);
  background:color-mix(in srgb, var(--ink) 3%, transparent);overflow:hidden;
}
.flow-col.step-ksef{border-color:color-mix(in srgb, var(--ksef) 40%, transparent)}
.fc-head{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid var(--line)}
.fc-head .fc-ic{width:26px;height:26px;border-radius:var(--radius-sm,7px);flex:none;display:grid;place-items:center;font-size:14px;background:color-mix(in srgb, var(--acc1) 14%, transparent);border:1px solid color-mix(in srgb, var(--acc1) 28%, transparent)}
.flow-col.step-ksef .fc-ic{background:color-mix(in srgb, var(--ksef) 14%, transparent);border-color:color-mix(in srgb, var(--ksef) 30%, transparent)}
.fc-head .fc-lab{font-size:12.5px;font-weight:700;color:var(--ink)}
.fc-head .fc-cnt{margin-left:auto;font-family:var(--font-display);font-size:20px;line-height:1;color:var(--acc1)}
.flow-col.step-ksef .fc-head .fc-cnt{color:var(--ksef)}
.fc-list{flex:1;display:flex;flex-direction:column}
.fc-mini{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);cursor:pointer;transition:background .12s}
.fc-mini:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.fc-mini .fm-no{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.fc-mini .fm-co{font-size:11.5px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-mini .fm-tag{margin-left:auto;flex:none}
.fc-foot{padding:9px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--acc2);cursor:pointer;text-align:center;border-top:1px solid var(--line)}
.fc-foot:hover{color:var(--acc1)}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:18px;opacity:.6}
@media(max-width:1080px){
  .flow-board{grid-template-columns:1fr 1fr;gap:14px}
  .flow-arrow{display:none}
}
@media(max-width:620px){ .flow-board{grid-template-columns:1fr} }

/* ============================ DOC DETAIL LAYOUT ============================ */
.doc-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:20px;align-items:start}
@media(max-width:980px){.doc-grid{grid-template-columns:1fr}}
.doc-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.doc-title .dt-no{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.06em}
.doc-title h2{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:.01em}
.meta-list{display:flex;flex-direction:column;gap:0}
.meta-row{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);font-size:13px}
.meta-row:last-child{border-bottom:0}
.meta-row .ml-k{color:var(--muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.meta-row .ml-v{color:var(--ink);text-align:right}

/* call-to-action banner — the "next step" the real product nudges you to */
.action-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:14px 18px;border-radius:var(--radius,14px);
  border:1px solid color-mix(in srgb, var(--acc1) 38%, transparent);
  background:color-mix(in srgb, var(--acc1) 9%, transparent);
}
/* in narrow detail columns: text fills the first line, buttons wrap below */
.action-banner .ab-txt{flex:1 1 calc(100% - 40px)}
.action-banner .btn,.action-banner .kind-sel{flex:0 0 auto}
.action-banner.kse{border-color:color-mix(in srgb, var(--ksef) 40%, transparent);background:color-mix(in srgb, var(--ksef) 9%, transparent)}
.action-banner.acct{border-color:color-mix(in srgb, var(--acc3) 40%, transparent);background:color-mix(in srgb, var(--acc3) 9%, transparent)}
.action-banner.muted{border-color:var(--line2);background:color-mix(in srgb, var(--ink) 3%, transparent)}
.action-banner .ab-ic{font-size:22px;flex:none}
.action-banner .ab-txt{min-width:0}
.action-banner .ab-h{font-size:13.5px;font-weight:700;color:var(--ink)}
.action-banner .ab-s{font-size:11.5px;color:var(--muted);margin-top:2px}
.action-banner .btn{flex:none}

/* role tag inside banners / meta */
.role-tag{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--radius-pill,999px);
  border:1px solid color-mix(in srgb, var(--acc3) 40%, transparent);
  color:var(--acc3);background:color-mix(in srgb, var(--acc3) 10%, transparent);
}
.role-tag.handl{color:var(--acc2);border-color:color-mix(in srgb, var(--acc2) 40%, transparent);background:color-mix(in srgb, var(--acc2) 10%, transparent)}

/* ============================ NOTIFICATION BELL ============================ */
.bell{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-sm,9px);border:1px solid var(--line2);background:color-mix(in srgb, var(--ink) 3%, transparent);font-size:16px;cursor:pointer;flex:none;transition:border-color .15s}
.bell:hover{border-color:var(--acc1)}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--acc3);color:#fff;font-family:var(--font-mono);font-size:9px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.bell-badge[hidden]{display:none}
.notif-pop{
  position:absolute;top:60px;right:26px;z-index:100;width:min(360px,92vw);
  background:var(--solid);border:1px solid var(--line2);border-radius:var(--radius,14px);
  box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .16s,transform .16s;
}
.notif-pop.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.notif-head h4{font-family:var(--font-display);font-size:14px;font-weight:600}
.notif-head .nh-clear{font-family:var(--font-mono);font-size:10px;color:var(--acc2);cursor:pointer;letter-spacing:.03em}
.notif-list{max-height:60vh;overflow-y:auto}
.notif-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.notif-item.unread{background:color-mix(in srgb, var(--acc1) 6%, transparent)}
.notif-item .ni-ic{width:30px;height:30px;border-radius:var(--radius-sm,8px);flex:none;display:grid;place-items:center;font-size:14px;background:color-mix(in srgb, var(--ink) 6%, transparent);border:1px solid var(--line2)}
.notif-item .ni-b{flex:1;min-width:0}
.notif-item .ni-t{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35}
.notif-item .ni-m{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--font-mono)}
.notif-item .ni-w{font-family:var(--font-mono);font-size:9.5px;color:var(--faint);white-space:nowrap;padding-top:2px}
.notif-item .ni-role{display:inline-block;margin-top:5px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.notif-empty{padding:26px 16px;text-align:center;font-size:12px;color:var(--muted)}

/* ============================ ROLE SWITCHER ============================ */
.role-sw{display:inline-flex;border:1px solid var(--line2);border-radius:var(--radius-sm,9px);overflow:hidden;background:color-mix(in srgb, var(--ink) 3%, transparent);flex:none}
.role-sw button{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;padding:8px 11px;color:var(--muted);text-transform:uppercase;transition:background .15s,color .15s;border-right:1px solid var(--line2)}
.role-sw button:last-child{border-right:0}
.role-sw button.on{background:color-mix(in srgb, var(--acc1) 16%, transparent);color:var(--acc1);font-weight:700}
@media(max-width:1240px){.role-sw .rs-full{display:none}}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1080px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr}
}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .top{grid-column:1;flex-wrap:wrap;gap:10px;padding:12px 16px}
  .top h1{font-size:20px}
  .search{display:none}        /* wide; command palette is a desktop nicety */
  /* switcher stays visible on mobile — it's now the only place to discover
     the 4 skins (the chooser page is bypassed). Drop it onto its own row. */
  .switcher{order:6;flex-basis:100%;justify-content:center}
  .switcher .sw-lbl{display:inline}
  .swatch{min-width:0;flex:1;max-width:88px}
  .main{grid-column:1;min-width:0}
  .board{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr}
  /* wide tables/boards scroll inside their card instead of pushing the page.
     min-width:0 defeats the flex/grid item min-content trap so the card
     can shrink below the table width and the overflow scrolls locally. */
  .card{overflow-x:auto;min-width:0}
  .tbl{min-width:max-content}
  .tbl th,.tbl td{padding:10px 12px}
  /* inline SVG showpieces (route map, gantt) scale to the viewport */
  #view svg{max-width:100%;height:auto}
  /* backstop: keep every section within the viewport so bespoke page grids
     (KPI strips, toolbars, detail layouts) can't push a horizontal scrollbar */
  .main>*{min-width:0;max-width:100%}
}

/* ── topbar profile control (replaces the dead role switcher; both variants) ── */
.profile-wrap{position:relative;flex:none}
.profile{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);border-radius:var(--radius-pill,999px);padding:4px 12px 4px 4px;cursor:pointer;color:var(--ink);font-family:var(--font-body)}
.profile:hover{border-color:var(--line2,var(--line));background:color-mix(in srgb, var(--ink) 6%, transparent)}
.profile .ava{width:26px;height:26px;font-size:10.5px}
.profile .pf-nm{font-size:12.5px;font-weight:600;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.profile .pf-cv{font-size:9px;color:var(--muted)}
.profile-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:224px;background:var(--panel,var(--solid));backdrop-filter:blur(var(--panel-blur,0));-webkit-backdrop-filter:blur(var(--panel-blur,0));border:1px solid var(--line);border-radius:var(--radius,12px);box-shadow:var(--shadow);padding:6px;z-index:70;display:none}
.profile-menu.open{display:block}
.pm-head{display:flex;align-items:center;gap:10px;padding:8px 10px 11px;border-bottom:1px solid var(--line);margin-bottom:5px}
.pm-head .ava{width:32px;height:32px;font-size:12px}
.pm-nm{font-size:13px;font-weight:600;color:var(--ink)}
.pm-rl{font-size:10.5px;color:var(--muted);font-family:var(--font-mono)}
.pm-item{display:block;padding:9px 11px;border-radius:var(--radius-sm,8px);color:var(--ink);font-size:12.5px;text-decoration:none;transition:background .12s}
.pm-item:hover{background:color-mix(in srgb, var(--acc1) 13%, transparent)}
.pm-back{color:var(--acc2);border-top:1px solid var(--line);margin-top:4px;padding-top:11px}
@media(max-width:1100px){.profile .pf-nm{display:none}}