* { box-sizing: border-box; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
body { margin:0; }
/* Nawigacja */
.nav { display:flex; gap:6px; padding:8px 20px; background:var(--surface); border-bottom:1px solid var(--border); }
.nav button { border:0; background:transparent; color:var(--text); padding:6px 14px; border-radius:var(--radius); cursor:pointer; }
.nav button.active { background:var(--primary); color:var(--primary-fg); }
/* Edytor workflow */
.wf { display:flex; gap:12px; padding:16px; align-items:flex-start; }
.wf-side { width:290px; flex:0 0 290px; display:flex; flex-direction:column; gap:10px; }
.wf-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px; }
.wf-panel h4 { margin:0 0 6px; font-size:13px; text-transform:uppercase; color:var(--text-muted); }
.wf-list-item { padding:6px 8px; border-radius:var(--radius); cursor:pointer; display:flex; justify-content:space-between; }
.wf-list-item:hover { background:var(--bg); }
.wf-list-item.sel { background:var(--primary); color:var(--primary-fg); }
.wf-canvas { position:relative; flex:1; height:560px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background-image:radial-gradient(var(--border) 1px, transparent 1px); background-size:22px 22px; }
.wf-edges { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.wf-node { position:absolute; width:160px; padding:8px 10px; background:var(--bg); border:2px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); cursor:grab; user-select:none; }
.wf-node.sel { border-color:var(--primary); }
.wf-node-type { font-weight:700; font-size:12px; text-transform:uppercase; color:var(--primary); }
.wf-node-id { font-size:11px; color:var(--text-muted); }
.wf-palette button, .wf-actions button { margin:2px; border:1px solid var(--border); background:var(--bg);
  color:var(--text); border-radius:var(--radius); padding:5px 9px; cursor:pointer; font-size:12px; }
.wf-actions button.primary { background:var(--primary); color:var(--primary-fg); border:0; }
.wf-actions button.on { background:var(--success, #1e9e57); color:#fff; }
.wf textarea { width:100%; min-height:120px; font-family:ui-monospace,monospace; font-size:12px;
  border:1px solid var(--border); border-radius:var(--radius); padding:6px; }
.wf input[type=text] { width:100%; padding:5px 8px; border:1px solid var(--border); border-radius:var(--radius); }
.wf-edge-row { display:flex; gap:4px; align-items:center; font-size:12px; margin:3px 0; }
.wf-edge-row input { width:56px; }
.wf-runs { font-size:12px; max-height:150px; overflow:auto; }
.wf-runs .lg { color:var(--text-muted); }
/* Panel admina (F3) */
.adm { padding:16px; }
.adm-cols { display:flex; gap:12px; align-items:flex-start; }
.adm-cols .wf-panel { width:220px; flex:0 0 220px; }
.adm-detail { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.adm-row { display:flex; gap:6px; margin:8px 0; flex-wrap:wrap; }
.adm-row input { padding:6px 9px; border:1px solid var(--border); border-radius:var(--radius); }
.adm-row button { padding:6px 12px; border:0; border-radius:var(--radius); cursor:pointer; }
.adm-row button.primary { background:var(--primary); color:var(--primary-fg); }
.adm-row button.danger { background:var(--danger); color:#fff; }
.adm-matrix { border-collapse:collapse; width:100%; }
.adm-matrix th, .adm-matrix td { border:1px solid var(--border); padding:4px 6px; text-align:center; font-size:12px; }
.adm-matrix .adm-ent { text-align:left; font-weight:600; }
.adm-matrix select { padding:3px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:12px; }
.adm-users { margin-top:14px; }
/* Oś czasu (F4) */
.tl { margin-top:14px; border-top:1px solid var(--border); padding-top:10px; }
.tl h4 { margin:0 0 6px; font-size:12px; text-transform:uppercase; color:var(--text-muted); }
.tl-add { display:flex; gap:6px; margin-bottom:8px; }
.tl-add select { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); }
.tl-add input { flex:1; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius); }
.tl-add button { padding:6px 12px; border:0; border-radius:var(--radius); background:var(--primary); color:var(--primary-fg); cursor:pointer; }
.tl-act { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px dashed var(--border); font-size:13px; }
.tl-act.done .tl-subj { text-decoration:line-through; color:var(--text-muted); }
.tl-kind { font-size:11px; text-transform:uppercase; color:var(--primary); flex:0 0 72px; }
.tl-subj { flex:1; }
.tl-act .tl-ok { cursor:pointer; color:var(--success,#1e9e57); } .tl-act .tl-x { cursor:pointer; color:var(--danger); }
.tl-hist { margin-top:8px; font-size:12px; color:var(--text-muted); max-height:140px; overflow:auto; }
.tl-hrow { padding:2px 0; }
/* Powiązania (A3) */
.rel-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.rel-chip { background:var(--primary); color:#fff; border-radius:12px; padding:3px 10px; font-size:13px; }
.rel-chip, .rel-chip i, .rel-chip b { color:#fff; }
.rel-chip b { cursor:pointer; opacity:.85; font-weight:400; }
.rel-chip i { cursor:pointer; font-style:normal; text-decoration:underline dotted; }
.rel-add { display:flex; gap:6px; margin-top:4px; }
.rel-add select { flex:1; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); }
.rel-add button { padding:6px 12px; border:0; border-radius:var(--radius); background:var(--primary); color:var(--primary-fg); cursor:pointer; }
.rel-hint { color:var(--text-muted); font-size:13px; font-style:italic; }
.rel-list { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.rel-link { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:4px 10px; font-size:13px; cursor:pointer; }
.rel-link:hover { border-color:var(--primary); }
/* Zarządzanie lejkami (overlay) */
.pm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:50; overflow:auto; }
.pm { background:var(--bg); border-radius:var(--radius); box-shadow:var(--shadow); width:100%; max-width:820px; }
.pm-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border); }
.pm-head button { padding:6px 12px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:var(--radius); cursor:pointer; }
.pm-body { display:flex; gap:14px; padding:16px; }
.pm-list { width:220px; flex:0 0 220px; display:flex; flex-direction:column; gap:4px; }
.pm-list-item { padding:7px 10px; border-radius:var(--radius); cursor:pointer; background:var(--surface); border:1px solid var(--border); }
.pm-list-item:hover { background:var(--border); }
.pm-list-item.sel { background:var(--primary); color:var(--primary-fg); border:0; }
.pm-list button { margin-top:6px; padding:7px; border:0; border-radius:var(--radius); background:var(--primary); color:var(--primary-fg); cursor:pointer; }
.pm-detail { flex:1; }
.pm-stage { display:flex; gap:6px; align-items:center; margin:5px 0; }
.pm-stage .pm-code { font-family:ui-monospace,monospace; font-size:11px; color:var(--text-muted); width:80px; overflow:hidden; }
.pm-stage input { flex:1; padding:5px 8px; border:1px solid var(--border); border-radius:var(--radius); }
.pm-stage .pm-color { flex:0 0 70px; } .pm-stage .pm-sort { flex:0 0 54px; }
.pm-stage select { padding:5px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); }
.pm-stage button { padding:5px 9px; border:0; border-radius:var(--radius); cursor:pointer; }
.pm-stage button.primary { background:var(--primary); color:var(--primary-fg); }
.pm-stage button.danger { background:var(--danger); color:#fff; }
/* Pasek Kanbana (lejek + dodaj) */
.kanban-bar { display:flex; gap:8px; align-items:center; padding:12px 20px 0; }
.kanban-bar select { padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); }
.kanban-bar button { padding:6px 14px; }
.ent-fld select { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; background:var(--surface); color:var(--text); }
/* Przełącznik Kanban/Lista */
.tab-toggle { padding:10px 16px 0; display:flex; gap:6px; }
.tab-toggle button { padding:5px 12px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:var(--radius); cursor:pointer; }
.tab-toggle button.active { background:var(--primary); color:var(--primary-fg); border:0; }
/* CRUD encji (F1) */
.ent { padding:16px; }
.ent-list-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ent-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.ent-table th, .ent-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); font-size:13px; }
.ent-table th { background:var(--bg); color:var(--text-muted); text-transform:uppercase; font-size:11px; }
.ent-row { cursor:pointer; } .ent-row:hover { background:var(--bg); }
.ent-del { color:var(--danger); text-align:center; width:34px; }
.ent-form { max-width:520px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.ent-fld { display:block; margin:8px 0; }
.ent-fld span { display:block; font-size:12px; color:var(--text-muted); margin-bottom:3px; }
.ent-fld input, .ent-fld textarea { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; }
.ent-form-actions { display:flex; gap:8px; margin-top:12px; }
.ent-form-actions button, .ent-list-head button { padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); cursor:pointer; }
.ent-form-actions button.primary, .ent-list-head button.primary { background:var(--primary); color:var(--primary-fg); border:0; }
.ent-form-actions button.danger { background:var(--danger); color:#fff; border:0; }
.ent-form-actions button.convert { background:var(--accent); color:var(--text-inverse); border:0; margin-left:auto; }
.ent-form-actions button.convert:hover { background:var(--accent-hover); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 20px;
  background:var(--primary); color:var(--primary-fg); }
.brand { font-weight:700; font-size:18px; letter-spacing:.3px; }
.themes button { margin-left:8px; border:0; border-radius:var(--radius); padding:6px 12px; cursor:pointer;
  background:var(--surface); color:var(--text); }
.themes .bar-sep { display:inline-block; width:1px; height:16px; background:var(--primary-fg); opacity:.4; margin:0 4px 0 12px; vertical-align:middle; }
.shell { padding:24px; color:var(--text-muted); }
/* Kanban (E3.2b) */
.columns { display:flex; gap:14px; padding:20px; overflow-x:auto; }
.col { min-width:260px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.col-head { padding:10px 12px; font-weight:600; border-bottom:2px solid var(--border); }
.card { margin:8px; padding:10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); }
.card-title { font-weight:600; } .card-opp { color:var(--text-muted); font-size:13px; }
.login-card { max-width:320px; margin:60px auto; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.login-card input { display:block; width:100%; margin:8px 0; padding:9px 12px; border:2px solid var(--border); border-radius:var(--radius); }
.login-card button { width:100%; padding:10px; border:0; border-radius:var(--radius); background:var(--primary); color:var(--primary-fg); cursor:pointer; }
.err { color:var(--danger); font-size:13px; }

/* ========== SZKIELET APLIKACJI (pełny template) ========== */
.app { display:flex; min-height:100vh; }
.sidebar { width:212px; flex:0 0 212px; background:var(--primary); color:var(--primary-fg); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side-brand { font-weight:700; font-size:20px; padding:18px 20px; letter-spacing:.4px; border-bottom:1px solid rgba(255,255,255,.15); }
.side-nav { display:flex; flex-direction:column; padding:10px 0; }
.side-nav button { text-align:left; border:0; background:transparent; color:var(--primary-fg); opacity:.82; padding:11px 20px; cursor:pointer; font-size:14px; }
.side-nav button:hover { background:rgba(255,255,255,.12); opacity:1; }
.side-nav button.active { background:rgba(255,255,255,.2); opacity:1; font-weight:600; box-shadow:inset 3px 0 0 #fff; }
.mainwrap { flex:1; display:flex; flex-direction:column; min-width:0; }
.content { flex:1; overflow:auto; }
/* topbar (override: jasny pasek nad treścią) */
.topbar { background:var(--surface) !important; color:var(--text) !important; border-bottom:1px solid var(--border); }
.brand { color:var(--text); }
.page-title { font-weight:600; font-size:18px; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.topbar-right .themes button { background:var(--bg); border:1px solid var(--border); color:var(--text); padding:5px 9px; }
.user { font-size:13px; color:var(--text-muted); font-weight:600; }
.logout { border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:var(--radius); padding:6px 12px; cursor:pointer; }
.logout:hover { border-color:var(--danger); color:var(--danger); }
/* pulpit */
.dash { padding:24px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border-left:4px solid var(--primary); }
.kpi-val { font-size:30px; font-weight:700; color:var(--text); }
.kpi-lbl { color:var(--text-muted); font-size:13px; margin-top:6px; }
.kpi.k2 { border-left-color:#c9820a; } .kpi.k3 { border-left-color:#1f9e8f; }
.kpi.k4 { border-left-color:#1e9e57; } .kpi.k5 { border-left-color:#c0392b; } .kpi.k6 { border-left-color:#7a3ff2; }

/* Zadania — priorytet karty */
.card.prio-high { border-left:4px solid var(--danger); }
.card.prio-normal { border-left:4px solid var(--primary); }
.card.prio-low { border-left:4px solid var(--text-muted); }

/* ===== KOREKTY UI (2026-07-05) ===== */
/* #1 poziome przewijanie Kanbana */
.content { min-width:0; }
.board { min-width:0; }
.columns { flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:visible; align-items:flex-start; }
.col { flex:0 0 280px !important; min-width:280px; }
/* #3 slide-over (panel nad bieżącym widokiem) */
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.38); z-index:60; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:560px; max-width:94vw; background:var(--bg);
  border-left:4px solid var(--primary); box-shadow:-6px 0 28px rgba(0,0,0,.25); z-index:61; overflow-y:auto; padding:22px; animation:slidein .16s ease-out; }
@keyframes slidein { from { transform:translateX(30px); opacity:.6; } to { transform:none; opacity:1; } }
.drawer .ent-form { border:0; box-shadow:none; max-width:none; padding:0; background:transparent; }

/* ===== KOREKTY UI v2 (2026-07-05) ===== */
/* Definitywny scroll Kanbana: .board scrolluje w poziomie, .columns rozciaga sie do tresci */
.content { overflow-x:hidden !important; overflow-y:auto; }
.board { overflow-x:auto !important; overflow-y:hidden; padding-bottom:6px; }
.columns { width:max-content !important; min-width:100%; }
/* Manager lejków/kolumn — przewijalny gdy dużo etapów */
.pm { max-height:92vh; overflow:auto; }

/* ===== KANBAN v3 — pełna wysokość + motyw kolumn + widoczne scrollbary ===== */
.content { display:flex; flex-direction:column; min-height:0; }
.kanban-page { flex:1; display:flex; flex-direction:column; min-height:0; }
.board { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:hidden; padding-bottom:0; }
.columns { flex:1 !important; min-height:0; align-items:stretch !important; overflow-x:auto !important; overflow-y:hidden;
  padding:16px 20px 14px; gap:16px; }
.col { flex:0 0 288px !important; min-width:288px; height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--primary);
  border-radius:10px; box-shadow:var(--shadow); }
.col-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; font-weight:700; font-size:14px; background:var(--surface); border-bottom:1px solid var(--border); }
.col-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.col-count { flex:0 0 auto; background:var(--border); color:var(--text); border-radius:20px; padding:2px 10px; font-size:12px; }
.col-sum { padding:6px 14px; font-size:12px; color:var(--text-muted); border-bottom:1px dashed var(--border); }
.col-body { flex:1; min-height:0; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:9px; }
.col-body .card { margin:0; transition:transform .08s, box-shadow .08s; }
.col-body .card:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
/* widoczne, ładne scrollbary */
.board::-webkit-scrollbar { height:14px; }
.board::-webkit-scrollbar-thumb { background:var(--text-muted); border-radius:8px; border:4px solid var(--bg); background-clip:content-box; }
.board::-webkit-scrollbar-track { background:transparent; }
.board { scrollbar-width:thin; scrollbar-color:var(--text-muted) transparent; }
.col-body::-webkit-scrollbar { width:9px; }
.col-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:5px; }

/* ===== DASHBOARD wg demo (Front_ClaudeCode_Review) ===== */
/* ─── Dashboard 1:1 (demo) ─── */
.dash-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.dash-title { font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0; }
.dash-sub { color:var(--text-muted); font-size:14px; margin:4px 0 0; }
.dash-head-acts { display:flex; gap:10px; flex:0 0 auto; }
.btn-pri, .btn-sec, .btn-ghost { font-size:13px; font-weight:600; border-radius:var(--radius); padding:9px 15px; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
.btn-pri { background:var(--primary); color:#fff; }
.btn-pri:hover { background:var(--primary-hover); }
.btn-sec { background:var(--surface-2); color:var(--text); border-color:var(--border); }
.btn-sec:hover { background:var(--surface); }
.btn-ghost { background:transparent; color:var(--text-muted); padding:6px 10px; }
.btn-ghost:hover { color:var(--primary); background:var(--primary-soft); }

/* KPI cards */
.kpi { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border-left:4px solid var(--primary); cursor:pointer; transition:box-shadow .15s, transform .15s; }
.kpi:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.kpi.k-primary { border-left-color:var(--primary); }
.kpi.k-accent  { border-left-color:var(--accent); }
.kpi.k-info    { border-left-color:var(--info); }
.kpi.k-success { border-left-color:var(--success); }
.kpi-lbl { color:var(--text-muted); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.kpi-val { font-size:26px; font-weight:700; font-family:var(--font-display); line-height:1.1; margin-top:6px; letter-spacing:-.02em; }
.kpi-trend { display:flex; align-items:center; gap:6px; font-size:12px; margin-top:8px; }
.kpi-delta { font-weight:600; }
.kpi-delta.up { color:var(--success); }
.kpi-delta.down { color:var(--danger); }
.kpi-vs { color:var(--text-muted); }
.kpi-icon { width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto; }
.ic-primary { background:var(--primary-soft); } .ic-accent { background:var(--accent-soft); }
.ic-info { background:var(--info-soft); } .ic-success { background:var(--success-soft); }

/* layout rows + panels */
.dash-row { display:grid; gap:20px; margin-top:20px; }
.dash-row.r-2-1 { grid-template-columns:2fr 1fr; }
.dash-row.r-1-1 { grid-template-columns:1fr 1fr; }
.dash-panel { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px 22px; }
.dash-panel h4 { margin:0; font-size:14px; font-weight:600; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.panel-sub { display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }

/* revenue chart */
.rev-chart { display:flex; align-items:flex-end; gap:8px; height:200px; }
.rev-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.rev-bar { width:100%; border-radius:6px 6px 0 0; min-height:6px; background:linear-gradient(180deg,var(--primary),var(--primary-hover)); animation:barGrow .5s ease; }
.rev-bar.accent { background:linear-gradient(180deg,var(--accent),var(--accent-hover)); }
.rev-m { font-size:11px; color:var(--text-muted); }
@keyframes barGrow { from { height:0 !important; } }

/* pipeline overview */
.pipe-stack { display:flex; height:8px; border-radius:999px; overflow:hidden; margin-bottom:16px; }
.pipe-seg { min-width:2px; }
.pipe-legend { display:flex; flex-direction:column; gap:10px; }
.leg-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.leg-l { display:flex; align-items:center; gap:10px; min-width:0; }
.leg-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.leg-name { font-size:13px; font-weight:500; }
.leg-cnt { font-size:11px; color:var(--text-muted); }
.leg-val { font-size:13px; font-weight:600; font-family:var(--font-display); }

/* activity feed */
.feed { display:flex; flex-direction:column; gap:14px; }
.feed-item { display:flex; align-items:flex-start; gap:12px; }
.feed-ic { width:32px; height:32px; border-radius:var(--radius); background:var(--primary-soft); display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; }
.feed-body { flex:1; min-width:0; }
.feed-text { font-size:13px; line-height:1.4; }
.feed-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* today tasks */
.today-tasks { display:flex; flex-direction:column; gap:8px; }
.today-task { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--surface-2); border-radius:var(--radius); cursor:pointer; }
.today-task:hover { background:var(--primary-soft); }
.today-task input { accent-color:var(--primary); }
.tt-body { flex:1; min-width:0; }
.tt-title { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }

@media (max-width:900px){ .dash-row.r-2-1, .dash-row.r-1-1 { grid-template-columns:1fr; } }
/* ===== PIGUŁKI (Pill) wg demo ===== */
.pill { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; }
.pill-info{ background:var(--info-soft); color:var(--info);} .pill-primary{ background:var(--primary-soft); color:var(--primary);}
.pill-success{ background:var(--success-soft); color:var(--success);} .pill-warning{ background:var(--warning-soft); color:var(--warning);}
.pill-danger{ background:var(--danger-soft); color:var(--danger);} .pill-accent{ background:var(--accent-soft); color:var(--accent);}
.pill-muted{ background:var(--surface-2); color:var(--text-muted);}

/* ===== Stopka sidebara: rozwijane menu jezyka + motywu ===== */
.side-foot { margin-top:auto; padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:8px; }
.side-sel { display:flex; align-items:center; gap:8px; }
.side-sel > span { font-size:15px; opacity:.9; width:18px; text-align:center; }
.side-sel select { flex:1; padding:7px 9px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12); color:var(--primary-fg); font-size:12px; cursor:pointer; }
.side-sel select option { color:#1A2332; }

/* ===== Deal: formularz + historia po prawej (jak Bitrix) ===== */
.drawer-wide { width:1180px; max-width:97vw; }
.form-2col { display:flex; gap:20px; align-items:flex-start; }
.form-main { flex:1; min-width:0; }
.form-side { flex:0 0 300px; border-left:1px solid var(--border); padding-left:18px; }
.form-side .tl { margin-top:0; border-top:0; padding-top:0; }
.form-side .tl h4 { margin-top:0; }
@media (max-width:820px){ .form-2col{ flex-direction:column; } .form-side{ flex:auto; border-left:0; padding-left:0; border-top:1px solid var(--border); padding-top:12px; width:100%; } }

/* ===== Dysk ===== */
.disk-up { display:flex; gap:8px; align-items:center; }
.disk-up input[type=file] { font-size:12px; }
.disk-link { color:var(--primary); text-decoration:none; font-weight:600; }
.disk-link:hover { text-decoration:underline; }

/* Dysk: foldery/breadcrumb/share */
.disk-crumbs { font-size:14px; font-weight:600; }
.disk-crumbs a { color:var(--primary); cursor:pointer; }
.disk-crumbs a:hover { text-decoration:underline; }
.disk-up input[type=text] { padding:6px 9px; border:1px solid var(--border); border-radius:var(--radius); font-size:12px; }
.disk-up button { padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); cursor:pointer; }
.disk-up button.primary { background:var(--primary); color:var(--primary-fg); border:0; }
.disk-actions { display:flex; gap:10px; justify-content:flex-end; }
.disk-sh { cursor:pointer; } .disk-actions .ent-del { cursor:pointer; color:var(--danger); }
.disk-share { background:var(--info-soft); border:1px solid var(--info); border-radius:var(--radius); padding:8px 12px; margin:8px 0; font-size:12px; }
.disk-share input { width:70%; padding:5px 8px; border:1px solid var(--border); border-radius:var(--radius); margin-left:6px; }

/* ─── Poczta ─── */
.mail-nav { display:flex; gap:6px; }
.mail-nav button { padding:7px 14px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); cursor:pointer; font-size:13px; color:var(--text); }
.mail-nav button.active { background:var(--primary); color:var(--primary-fg); border-color:var(--primary); }
.mail-tools { display:flex; align-items:center; gap:10px; }
.mail-syncmsg { font-size:12px; color:var(--text-muted); }
.mail-inbox .mail-when { color:var(--text-muted); font-size:12px; white-space:nowrap; }
.mail-settings { display:flex; flex-direction:column; gap:20px; max-width:760px; }
.mail-acc { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:18px 20px; }
.mail-acc h4 { margin:0 0 4px; font-size:15px; }
.mail-acc-hint { margin:0 0 12px; font-size:12px; color:var(--text-muted); }
.mail-acc-grid { display:grid; grid-template-columns:2fr 1fr 2fr; gap:10px; }
.mail-savemsg { font-size:12px; color:var(--success); align-self:center; }
/* wątek przy kliencie */
.mail-thread { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
.mail-thread-head { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:8px; }
.mail-compose { display:flex; flex-direction:column; gap:6px; background:var(--surface-2); padding:10px; border-radius:var(--radius); margin-bottom:10px; }
.mail-compose input, .mail-compose textarea { padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font-size:13px; }
.mail-compose textarea { min-height:80px; resize:vertical; }
.mail-msgs { display:flex; flex-direction:column; gap:8px; }
.mail-empty { color:var(--text-muted); font-size:12px; }
.mail-msg { border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; font-size:13px; }
.mail-msg.in { background:var(--surface-2); }
.mail-msg.out { background:var(--primary-soft); border-color:var(--primary-soft); }
.mail-msg-h { display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; }
.mail-msg-b { color:var(--text-muted); white-space:pre-wrap; font-size:12px; }
.mail-msg .mail-when { color:var(--text-muted); font-size:11px; white-space:nowrap; }

/* ─── Skrzynka: lista + podgląd ─── */
.mail-layout { display:flex; gap:16px; height:calc(100vh - 150px); }
.mail-list { flex:0 0 340px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
.mail-row { border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--radius); padding:9px 12px; cursor:pointer; background:var(--surface); }
.mail-row:hover { border-left-color:var(--primary); }
.mail-row.active { border-left-color:var(--primary); background:var(--primary-soft); }
.mail-row-top { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); }
.mail-dir { flex:0 0 auto; }
.mail-party { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:600; }
.mail-row .mail-when { flex:0 0 auto; }
.mail-row-subj { font-size:13px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-view { flex:1; min-width:0; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px 22px; overflow-y:auto; }
.mail-view-head { border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:12px; }
.mail-view-head h3 { margin:0 0 8px; font-size:18px; }
.mail-view-meta { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--text-muted); }
.mail-linked { cursor:pointer; margin-top:8px; display:inline-block; }
.mail-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.mail-actions button { padding:7px 13px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer; font-size:13px; }
.mail-actions button.primary { background:var(--primary); color:#fff; border:0; }
.mail-view-body { white-space:pre-wrap; font-size:14px; line-height:1.55; color:var(--text); }
.mail-compose-pane { display:flex; flex-direction:column; gap:8px; }
.mail-compose-pane h4 { margin:0 0 4px; }
.mail-compose-pane input, .mail-compose-pane textarea { padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); font-size:13px; }
.mail-compose-pane textarea { min-height:220px; resize:vertical; }

/* filtr historii (Timeline) + rozwijane maile */
.tl-filter { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.tl-filter button { padding:4px 11px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:999px; cursor:pointer; font-size:12px; }
.tl-filter button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.mail-thread .mail-msg-h { cursor:pointer; display:flex; align-items:center; gap:8px; }
.mail-thread .mail-msg-subj { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-thread .mail-msg-b { margin-top:6px; padding-top:6px; border-top:1px dashed var(--border); }

/* unified timeline: ukrycie compose + e-maile w osi czasu */
.tl-hidden { display:none !important; }
.tl-add { flex-wrap:wrap; }
.tl-mail { border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:var(--radius-sm); margin:5px 0; }
.tl-mail.in { border-left-color:var(--info); }
.tl-mail-h { display:flex; align-items:center; gap:8px; padding:6px 9px; cursor:pointer; font-size:13px; }
.tl-mail-h .tl-subj { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-mail-h .tl-when { color:var(--text-muted); font-size:11px; white-space:nowrap; }
.tl-mail-b { padding:8px 10px; border-top:1px dashed var(--border); white-space:pre-wrap; font-size:12px; color:var(--text-muted); }

/* ─── Edytor układu karty (deal) ─── */
.card-head { display:flex; align-items:center; justify-content:space-between; }
.card-edit-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--surface-2); border-radius:var(--radius); padding:8px 10px; margin-bottom:10px; }
.card-edit-bar button { padding:6px 11px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer; font-size:13px; }
.card-edit-bar button.primary { background:var(--primary); color:#fff; border:0; }
.card-cols { display:flex; gap:16px; align-items:flex-start; }
.card-col { flex:1 1 0; min-width:210px; display:flex; flex-direction:column; gap:12px; }
@media (max-width:760px){ .card-cols { flex-wrap:wrap; } }
.card-sec { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.card-sec-h { font-weight:600; font-size:13px; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--surface-2); border-radius:var(--radius) var(--radius) 0 0; }
.card-sec-body { padding:10px 12px; display:flex; flex-direction:column; gap:8px; min-height:24px; }
.fld-wrap { position:relative; }
.fld-wrap.draggable { cursor:grab; border:1px dashed transparent; border-radius:var(--radius-sm); }
.fld-wrap.draggable:hover { border-color:var(--primary); background:var(--primary-soft); }
.fld-grip { position:absolute; right:2px; top:2px; color:var(--text-muted); font-size:12px; }
.card-tray { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding:8px 10px; background:var(--surface-2); border-radius:var(--radius); }
.card-tray-t { font-size:12px; color:var(--text-muted); }
.card-chip { background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius); padding:4px 10px; font-size:12px; cursor:grab; }

/* ─── Struktura firmy (org) ─── */
.org { padding:4px 2px; }
.org-tree { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.org-node { border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius); background:var(--surface); padding:8px 12px; }
.org-node-main { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.org-name { font-weight:600; padding:5px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); min-width:160px; }
.org-lbl { font-size:12px; color:var(--text-muted); }
.org-node-main select, .org-members select { padding:5px 7px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font-size:13px; }
.org-node-main button { padding:5px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); cursor:pointer; font-size:12px; }
.org-node-main button.danger { background:var(--danger); color:#fff; border:0; }
.org-members { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }

/* ─── 2FA login ─── */
.tfa-box { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.tfa-box b { font-size:14px; }
.tfa-hint { font-size:13px; color:var(--text-muted); margin:0; }
.tfa-qr { width:180px; height:180px; align-self:center; border:1px solid var(--border); border-radius:var(--radius); background:#fff; }
.tfa-manual { font-size:11px; color:var(--text-muted); word-break:break-all; }
.tfa-manual code { background:var(--surface-2); padding:2px 5px; border-radius:4px; }
.tfa-code { letter-spacing:4px; text-align:center; font-size:18px; }
.tfa-back { background:transparent !important; color:var(--text-muted) !important; border:0 !important; }

/* ─── Profil użytkownika ─── */
.prof { padding:8px 4px; }
.prof-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.prof-card { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px 20px; }
.prof-card h4 { margin:0 0 12px; font-size:15px; }
.prof-chk { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:14px; }
.prof-chk input { accent-color:var(--primary); }

/* ─── Import CSV ─── */
.imp { padding:6px 2px; max-width:720px; }
.imp-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0; }
.imp-row select, .imp-row input[type=file] { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); }
.imp-map { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:16px 18px; margin-top:8px; }
.imp-map h4 { margin:0 0 10px; }
.imp-map-row { display:flex; align-items:center; gap:12px; margin:6px 0; }
.imp-fld { flex:0 0 130px; font-size:13px; font-weight:600; }
.imp-map-row select { flex:1; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); }
.imp-result { margin-top:14px; padding:12px 14px; background:var(--success-soft); border-radius:var(--radius); }
.imp-errors { margin-top:8px; color:var(--danger); font-size:12px; }
.imp-err { padding:2px 0; }
.imp-enc-note { font-size:12px; color:var(--text-muted); background:var(--info-soft); border-radius:var(--radius); padding:6px 10px; }
.imp-tmpl { font-size:13px; color:var(--primary); text-decoration:none; border:1px solid var(--primary); border-radius:var(--radius); padding:6px 11px; }
.imp-tmpl:hover { background:var(--primary-soft); }

/* ─── SPA: karty elementów + pozycje procesów w menu ─── */
.card-title { font-weight:600; font-size:13px; }
.card-meta { font-size:12px; color:var(--text-muted); margin-top:3px; }
.side-proc { font-style:normal; } .side-proc::before { content:"⚙ "; opacity:.6; }

/* pole adresowe (uproszczone) */
.addr-grid { display:grid; grid-template-columns:1fr 90px 1fr 1fr; gap:6px; }
.addr-grid .addr-street { grid-column:1 / -1; }
.addr-grid input { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); }

/* ─── Produkty ─── */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; padding:4px 2px; }
.prod-card { position:relative; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:14px 16px; cursor:pointer; }
.prod-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); transition:.15s; }
.prod-name { font-weight:600; }
.prod-price { color:var(--text-muted); font-size:13px; margin-top:4px; }
.prod-pub { position:absolute; top:8px; right:8px; }
.form-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.prod-gallery { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.prod-img { position:relative; width:88px; height:88px; }
.prod-img img { width:88px; height:88px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--border); }
.prod-img-x { position:absolute; top:-6px; right:-6px; background:var(--danger); color:#fff; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; }

/* ─── HR / Urlopy ─── */
.hr-list { display:flex; flex-direction:column; gap:8px; padding:6px 2px; }
.hr-form { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius); padding:12px 14px; }
.hr-form-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.hr-form-row select, .hr-form-row input { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); }
.hr-range { display:flex; gap:8px; margin-bottom:6px; }
.hr-range input { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); }
.hr-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; }
.hr-who { font-weight:600; min-width:140px; }
.hr-type { color:var(--text-muted); }
.hr-dates { font-size:13px; }
.hr-row button { padding:5px 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); cursor:pointer; font-size:12px; }
.hr-row button.primary { background:var(--success); color:#fff; border:0; }
.hr-row button.danger { background:var(--danger); color:#fff; border:0; }

/* ─── Kalendarz ─── */
.cal { padding:4px 2px 12px; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.cal-nav { display:flex; align-items:center; gap:6px; }
.cal-nav button { padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer; font-weight:600; transition:background .12s,border-color .12s; }
.cal-nav button:hover { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }
.cal-title { font-weight:700; font-size:17px; min-width:170px; text-align:center; text-transform:capitalize; }
.cal-legend { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; font-size:12px; color:var(--text-muted); }
.cal-legend span { display:inline-flex; align-items:center; gap:6px; }
.cal-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }

/* siatka */
.cal-cal { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06)); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-wd { background:var(--surface-2); border-bottom:1px solid var(--border); }
.cal-wdh { font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--text-muted); text-align:center; padding:9px 0; text-transform:uppercase; }
.cal-body { }

.cal-cell { min-height:116px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:5px 6px 6px; display:flex; flex-direction:column; cursor:pointer; position:relative; transition:background .1s; background:var(--surface); }
.cal-cell:nth-child(7n) { border-right:0; }
.cal-body > .cal-cell:hover { background:var(--primary-soft); }
.cal-weekend { background:color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.cal-empty { background:color-mix(in srgb, var(--surface-2) 40%, transparent); cursor:default; }
.cal-empty:hover { background:color-mix(in srgb, var(--surface-2) 40%, transparent); }

.cal-cell-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.cal-daynum { font-size:13px; font-weight:600; color:var(--text); width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.cal-add { opacity:0; font-size:15px; font-weight:700; color:var(--primary); width:20px; height:20px; line-height:18px; text-align:center; border-radius:5px; transition:opacity .1s,background .1s; }
.cal-cell:hover .cal-add { opacity:1; }
.cal-add:hover { background:var(--primary); color:#fff; }
.cal-today .cal-daynum { background:var(--primary); color:#fff; }
.cal-today { box-shadow:inset 0 0 0 2px var(--primary); }

.cal-events { display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.cal-ev { display:flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 6px; background:var(--surface-2); border-radius:5px; cursor:pointer; overflow:hidden; white-space:nowrap; transition:filter .1s,transform .05s; }
.cal-ev:hover { filter:brightness(.96); transform:translateY(-1px); }
.cal-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.cal-time { font-variant-numeric:tabular-nums; color:var(--text-muted); font-weight:600; flex:0 0 auto; }
.cal-ev-t { overflow:hidden; text-overflow:ellipsis; }
.cal-more { font-size:11px; color:var(--text-muted); font-weight:600; padding:1px 6px; cursor:pointer; }
.cal-more:hover { color:var(--primary); }

@media (max-width:760px){ .cal-cell{ min-height:78px; } .cal-time,.cal-legend{ display:none; } .cal-ev-t{ font-size:10px; } }

/* ─── Kalendarz: przełącznik trybów ─── */
.cal-modes { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.cal-modes button { padding:6px 14px; border:0; border-right:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-weight:600; font-size:13px; }
.cal-modes button:last-child { border-right:0; }
.cal-modes button.active { background:var(--primary); color:#fff; }
.cal-modes button:not(.active):hover { background:var(--primary-soft); color:var(--primary); }
.cal-today-btn { margin-left:4px; }

/* ─── Widok TYDZIEŃ / DZIEŃ (siatka godzinowa) ─── */
.tg { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto 1fr; box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06)); }
.tg-corner { border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface-2); }
.tg-heads { display:grid; border-bottom:1px solid var(--border); background:var(--surface-2); }
.tg-head { border-right:1px solid var(--border); padding:6px 4px; min-height:44px; }
.tg-head:last-child { border-right:0; }
.tg-head-day { display:flex; align-items:baseline; gap:6px; justify-content:center; }
.tg-wd { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted); }
.tg-num { font-size:16px; font-weight:700; }
.tg-today .tg-num { background:var(--primary); color:#fff; border-radius:50%; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.tg-allday { display:flex; flex-direction:column; gap:2px; margin-top:3px; }
.tg-scroll { grid-column:1 / 3; display:grid; grid-template-columns:56px 1fr; max-height:62vh; overflow-y:auto; }
.tg-hours { border-right:1px solid var(--border); }
.tg-hour { height:46px; position:relative; }
.tg-hour span { position:absolute; top:-7px; right:6px; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.tg-hour:first-child span { top:2px; }
.tg-grid { display:grid; }
.tg-col { position:relative; border-right:1px solid var(--border); }
.tg-col:last-child { border-right:0; }
.tg-slot { height:46px; border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent); cursor:pointer; }
.tg-slot:hover { background:var(--primary-soft); }
.tg-ev { position:absolute; left:3px; right:3px; border-left:3px solid #888; border-radius:5px; padding:2px 6px; font-size:11.5px; overflow:hidden; cursor:pointer; z-index:2; }
.tg-ev:hover { filter:brightness(.96); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.tg-ev-time { font-weight:700; font-variant-numeric:tabular-nums; }
.tg-ev-t { }

/* ─── Widok LISTA / AGENDA ─── */
.cal-agenda { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.ag-day { display:grid; grid-template-columns:180px 1fr; border-bottom:1px solid var(--border); }
.ag-day:last-child { border-bottom:0; }
.ag-date { padding:12px 14px; font-weight:700; color:var(--text); background:var(--surface-2); border-right:1px solid var(--border); text-transform:capitalize; }
.ag-items { display:flex; flex-direction:column; }
.ag-row { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent); cursor:pointer; }
.ag-row:last-child { border-bottom:0; }
.ag-row:hover { background:var(--primary-soft); }
.ag-time { font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-muted); min-width:64px; }
.ag-title { flex:1; }

/* ─── Kalendarz: proporcjonalne nakładanie (siatka godzinowa) ─── */
.tg-ev { right:auto; }  /* left+width sterują szerokością przy nakładaniu */

/* ─── Kalendarz: okno PODGLĄDU rekordu (nakładka) ─── */
.peek { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1001;
    width:min(460px,92vw); max-height:80vh; overflow:auto; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 12px 40px rgba(0,0,0,.28); }
.peek-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); }
.peek-badge { color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:20px; }
.peek-x { border:0; background:transparent; font-size:16px; cursor:pointer; color:var(--text-muted); padding:2px 6px; border-radius:6px; }
.peek-x:hover { background:var(--surface-2); color:var(--text); }
.peek-body { padding:14px 16px 18px; }
.peek-body h3 { margin:0 0 12px; font-size:17px; }
.peek-row { font-size:13px; margin-bottom:6px; color:var(--text); }
.peek-row b { color:var(--text-muted); font-weight:600; margin-right:4px; }
.peek-detail { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.peek-desc { margin-top:8px; font-size:13px; color:var(--text); white-space:pre-wrap; background:var(--surface-2); padding:10px 12px; border-radius:8px; }

/* ─── IM / czat: DOK po prawej (jak Bitrix messenger) ─── */
.chat-fab { position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%; border:0;
    background:var(--primary); color:#fff; font-size:24px; cursor:pointer; z-index:1200;
    box-shadow:0 6px 20px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; transition:transform .12s; }
.chat-fab:hover { transform:scale(1.06); }
.chat-fab.hide { display:none; }
.chat-fab-badge { position:absolute; top:-2px; right:-2px; background:#e11d48; color:#fff; font-size:11px; font-weight:700;
    min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--surface); }

.chat-dock { position:fixed; top:0; right:0; bottom:0; width:min(400px,100vw); z-index:1210;
    background:var(--surface); border-left:1px solid var(--border); box-shadow:-8px 0 30px rgba(0,0,0,.18);
    display:flex; flex-direction:column; transform:translateX(105%); transition:transform .22s ease; }
.chat-dock.open { transform:translateX(0); }
.chat-dock-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); }
.chat-dock-title { flex:1; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-back { border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--text); padding:0 4px; }
.chat-newbtn { border:1px solid var(--primary); color:var(--primary); background:transparent; border-radius:var(--radius); padding:4px 10px; font-size:13px; font-weight:600; cursor:pointer; }
.chat-newbtn:hover { background:var(--primary); color:#fff; }
.chat-dock-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

.im-convs { overflow-y:auto; flex:1; }
.im-conv { display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent); }
.im-conv:hover { background:var(--surface-2); }
.im-avatar { width:36px; height:36px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto; }
.im-conv-main { flex:1; min-width:0; }
.im-conv-title { font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.im-conv-last { font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.im-badge { background:var(--primary); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 6px; }

.im-thread { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.im-msg { display:flex; }
.im-msg.mine { justify-content:flex-end; }
.im-bubble { max-width:78%; background:var(--surface-2); border-radius:12px; padding:7px 12px; display:flex; flex-direction:column; gap:2px; }
.im-msg.mine .im-bubble { background:var(--primary); color:var(--primary-fg,#fff); }
.im-sender { font-size:11px; font-weight:700; color:var(--primary); }
.im-msg.mine .im-sender { color:#fff; }
.im-body { font-size:14px; white-space:pre-wrap; word-break:break-word; }
.im-ts { font-size:10px; opacity:.65; align-self:flex-end; }
.im-composer { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); }
.im-composer input { flex:1; padding:9px 12px; border:1px solid var(--border); border-radius:20px; background:var(--surface); color:var(--text); }

.chat-picker-back { position:absolute; inset:0; background:rgba(0,0,0,.12); }
.chat-picker { position:absolute; inset:0; background:var(--surface); display:flex; flex-direction:column; }
.im-picker { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding:6px; }
.im-pick-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.im-pick-row:hover { background:var(--surface-2); }

/* ─── Czat sprawy (osadzony w karcie) ─── */
.case-chat { margin-top:14px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; background:var(--surface); }
.case-chat-h { font-size:13px; font-weight:700; padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.case-thread { max-height:300px; min-height:120px; }
.case-chat .im-composer { padding:10px 12px; }

/* ─── Dzwonek powiadomień ─── */
.notif { position:relative; }
.notif-btn { position:relative; border:0; background:transparent; font-size:19px; cursor:pointer; padding:4px 6px; border-radius:8px; }
.notif-btn:hover { background:var(--surface-2); }
.notif-badge { position:absolute; top:-1px; right:-3px; background:#e11d48; color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.notif-back { position:fixed; inset:0; z-index:1300; }
.notif-pop { position:absolute; top:38px; right:0; width:340px; max-height:60vh; overflow:auto; z-index:1301; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.22); }
.notif-pop-h { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
.notif-pop-h button { border:0; background:transparent; color:var(--primary); font-size:12px; cursor:pointer; }
.notif-list { display:flex; flex-direction:column; }
.notif-item { display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent); cursor:pointer; }
.notif-item:hover { background:var(--surface-2); }
.notif-item.unread { background:var(--primary-soft); }
.notif-item.unread .notif-text { font-weight:600; }
.notif-text { font-size:13px; }
.notif-at { font-size:11px; color:var(--text-muted); }

/* ─── Workflow: pomoc + podpowiedzi ─── */
.wf-help details { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--primary-soft); }
.wf-help summary { cursor:pointer; padding:8px 10px; font-weight:600; font-size:13px; color:var(--primary); }
.wf-help-list { margin:4px 0 10px; padding:0 14px 0 26px; display:flex; flex-direction:column; gap:6px; }
.wf-help-list li { font-size:12.5px; line-height:1.4; color:var(--text); }
.wf-hint { font-size:11px; color:var(--text-muted); margin:4px 0 0; line-height:1.35; font-family:var(--mono,monospace); }

/* ─── Workflow: liniowy kreator ─── */
.wf-flow { flex:1; min-width:0; overflow-y:auto; padding:16px 20px; }
.flow-empty { color:var(--text-muted); padding:40px; text-align:center; }
.flow-cfg { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:18px; }
.flow-name { width:100%; font-size:16px; font-weight:600; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); margin-bottom:10px; }
.flow-cfg-row { display:flex; gap:12px; flex-wrap:wrap; }
.flow-cfg-row label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-muted); }
.flow-cfg-row select { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); min-width:150px; }
.flow-cfg-actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.flow-active { display:flex; align-items:center; gap:6px; font-size:13px; }

.flow-chain { display:flex; flex-direction:column; align-items:center; }
.flow-node { width:min(420px,100%); box-sizing:border-box; }
.flow-start, .flow-end { text-align:center; font-weight:700; font-size:13px; padding:10px; border-radius:20px; background:var(--surface-2); color:var(--text-muted); }
.flow-start { background:var(--primary-soft); color:var(--primary); }

.flow-plus-wrap { display:flex; flex-direction:column; align-items:center; position:relative; }
.flow-line { width:2px; height:14px; background:var(--border); }
.flow-plus { width:30px; height:30px; border-radius:50%; border:2px dashed var(--border); background:var(--surface); color:var(--primary); font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.flow-plus:hover, .flow-plus.on { border-color:var(--primary); background:var(--primary-soft); }
.flow-menu-back { position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.14); }
.flow-menu { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1301; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 16px 44px rgba(0,0,0,.3); padding:16px; width:min(380px,92vw); }
.flow-menu-h { font-size:14px; font-weight:600; color:var(--text); margin:0 2px 12px; }
.flow-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.flow-menu-grid button { padding:8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); cursor:pointer; font-size:13px; }
.flow-menu-grid button:hover { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }

.flow-step { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06)); }
.flow-step.exp { border-color:var(--primary); }
.flow-step-head { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; }
.flow-step-head:hover { background:var(--surface-2); }
.flow-step-badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#fff; background:var(--primary); padding:3px 8px; border-radius:12px; flex:0 0 auto; }
.flow-step-sum { flex:1; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flow-step-tools { display:flex; gap:2px; }
.flow-step-tools button { border:0; background:transparent; cursor:pointer; font-size:13px; padding:3px 6px; border-radius:6px; color:var(--text-muted); }
.flow-step-tools button:hover { background:var(--surface-2); color:var(--text); }
.flow-step-tools .flow-del:hover { color:#e11d48; }
.flow-edit { padding:10px 14px 14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.flow-f { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-muted); }
.flow-f input, .flow-f select { padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font-size:13px; }

/* ─── Workflow: tablica automatyzacji per etap (jak Bitrix) ─── */
.auto-board { display:flex; flex-direction:column; height:100%; }
.auto-top { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.auto-title { font-size:16px; font-weight:700; }
.auto-top label { font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.auto-top select { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); }
.auto-cols { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
.auto-col { flex:0 0 240px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; max-height:100%; }
.auto-col-other { background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
.auto-col-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--text-muted); padding:10px 12px; border-bottom:1px solid var(--border); }
.auto-col-body { display:flex; flex-direction:column; gap:6px; padding:8px; min-height:40px; overflow-y:auto; }
.auto-rule { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; cursor:pointer; }
.auto-rule:hover { border-color:var(--primary); background:var(--primary-soft); }
.auto-rule-dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted); flex:0 0 auto; opacity:.4; }
.auto-rule-dot.on { background:#1e9e57; opacity:1; }
.auto-empty { font-size:12px; color:var(--text-muted); padding:6px 4px; text-align:center; }
.auto-add { margin:8px; padding:7px; border:1px dashed var(--border); border-radius:var(--radius-sm); background:transparent; color:var(--primary); cursor:pointer; font-size:13px; font-weight:600; }
.auto-add:hover { border-color:var(--primary); background:var(--primary-soft); }
.flow-back { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:var(--radius-sm); padding:5px 10px; cursor:pointer; }
.flow-back:hover { background:var(--surface-2); }

/* ─── tablica: sekcja wyzwalaczy w kolumnie ─── */
.auto-sub { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding:2px 2px 4px; }
.auto-trig { display:flex; flex-direction:column; gap:6px; padding:8px; border-bottom:1px dashed var(--border); background:color-mix(in srgb, var(--primary-soft) 40%, transparent); }
.auto-add-t { margin:2px 0 0; border-style:dashed; }

/* ─── tablica: kolejność reguł (strzałki) ─── */
.auto-rule-nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auto-rule-ord { display:flex; gap:1px; flex:0 0 auto; }
.auto-rule-ord button { border:0; background:transparent; cursor:pointer; font-size:12px; color:var(--text-muted); padding:1px 4px; border-radius:4px; line-height:1; }
.auto-rule-ord button:hover { background:var(--surface-2); color:var(--primary); }