/* iOS-inspired design system for finCRM */

:root {
  /* Surfaces */
  --bg: #F2F2F7;             /* iOS systemGroupedBackground */
  --bg-elev: #FFFFFF;
  --bg-elev-2: #FAFAFB;
  --bg-tint: rgba(255,255,255,0.72);
  --glass: rgba(255,255,255,0.55);
  --soft-tint: rgba(0,0,0,0.025);
  --hover-tint: rgba(0,0,0,0.04);
  --border: rgba(60,60,67,0.12);
  --border-strong: rgba(60,60,67,0.20);
  --separator: rgba(60,60,67,0.10);

  /* Text */
  --label: #1C1C1E;
  --label-2: rgba(60,60,67,0.78);
  --label-3: rgba(60,60,67,0.55);
  --label-4: rgba(60,60,67,0.35);

  /* iOS palette */
  --blue: #007AFF;
  --green: #34C759;
  --indigo: #5856D6;
  --orange: #FF9500;
  --pink: #FF2D55;
  --purple: #AF52DE;
  --red: #FF3B30;
  --teal: #5AC8FA;
  --yellow: #FFCC00;
  --gray: #8E8E93;

  /* Status tones (kanban — used everywhere statuses appear) */
  --st-nowy: var(--gray);
  --st-kontakt: var(--blue);
  --st-wniosek: var(--indigo);
  --st-decyzja: var(--orange);
  --st-finalizacja: var(--pink);
  --st-sfinalizowany: var(--green);
  --st-przegrany: var(--red);

  /* Soft tints (8% bg of each status) */
  --st-nowy-bg: rgba(142,142,147,0.14);
  --st-kontakt-bg: rgba(0,122,255,0.10);
  --st-wniosek-bg: rgba(88,86,214,0.10);
  --st-decyzja-bg: rgba(255,149,0,0.12);
  --st-finalizacja-bg: rgba(255,45,85,0.10);
  --st-sfinalizowany-bg: rgba(52,199,89,0.13);
  --st-przegrany-bg: rgba(255,59,48,0.10);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --shadow-sm: 0 1px 0 rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.04);
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.05);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Manrope", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Dark mode — variable overrides */
:root.dark {
  --bg: #000000;
  --bg-elev: #1C1C1E;
  --bg-elev-2: #2C2C2E;
  --bg-tint: rgba(28,28,30,0.72);
  --glass: rgba(255,255,255,0.04);
  --soft-tint: rgba(255,255,255,0.04);
  --hover-tint: rgba(255,255,255,0.08);
  --border: rgba(120,120,128,0.30);
  --border-strong: rgba(120,120,128,0.45);
  --separator: rgba(120,120,128,0.22);

  --label: #FFFFFF;
  --label-2: rgba(235,235,245,0.78);
  --label-3: rgba(235,235,245,0.55);
  --label-4: rgba(235,235,245,0.35);

  --blue: #0A84FF;
  --green: #30D158;
  --indigo: #5E5CE6;
  --orange: #FF9F0A;
  --pink: #FF375F;
  --purple: #BF5AF2;
  --red: #FF453A;
  --teal: #64D2FF;
  --yellow: #FFD60A;
  --gray: #98989D;
}

/* Dark-mode adjustments for hardcoded surfaces and chip tints */
:root.dark .side {
  background: linear-gradient(180deg, rgba(28,28,30,0.85) 0%, rgba(22,22,24,0.85) 100%);
}
:root.dark .gsearch .input { background: var(--bg-elev-2); }
:root.dark .topbar .icon-btn { background: var(--bg-elev-2); }
:root.dark .btn { background: rgba(120,120,128,0.24); color: var(--label); }
:root.dark .btn:hover { background: rgba(120,120,128,0.32); }
:root.dark .btn.ghost { background: transparent; }
:root.dark .modal-bd { background: rgba(0,0,0,0.55); }
:root.dark .modal-h .close { background: rgba(255,255,255,0.08); color: var(--label-2); }
:root.dark .modal-h .close:hover { background: rgba(255,255,255,0.14); }
:root.dark .deal-card { background: var(--bg-elev); box-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 0 0 0.5px rgba(255,255,255,0.06); }
:root.dark .col-kan { background: rgba(255,255,255,0.02); border-color: var(--border); }
:root.dark .col-kan .col-h { background: var(--bg-elev); }
:root.dark .col-kan .col-h .count { background: rgba(120,120,128,0.30); color: var(--label-2); }
:root.dark .tbl thead th { background: var(--bg-elev-2); }
:root.dark .tbl tbody tr:hover { background: rgba(10,132,255,0.10); }
:root.dark .seg { background: rgba(120,120,128,0.24); }
:root.dark .seg button.active { background: var(--bg-elev-2); }
:root.dark .input-text, :root.dark .input-textarea, :root.dark .input-select {
  background: var(--bg-elev-2);
  color: var(--label);
  border-color: var(--border);
}
:root.dark .status-pick { background: var(--bg-elev-2); border-color: var(--border); color: var(--label-2); }
:root.dark .switch::after { box-shadow: 0 1px 2px rgba(0,0,0,0.30); }
:root.dark mark { background: rgba(255,204,10,0.45); color: var(--label); }

/* Hover backgrounds — flip to subtle white tints in dark */
:root.dark .side-item:hover { background: rgba(255,255,255,0.06); }
:root.dark .list .row { border-color: var(--separator); }

html, body, #root {
  height: 100%;
  margin: 0;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--label);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.4;
}

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* ===== App shell ===== */
.app {
  display: flex;
  height: 100%;
  width: 100%;
}

/* Sidebar */
.side {
  width: 232px;
  flex: 0 0 232px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(248,248,251,0.85) 100%);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 6px;
}
.side .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 14px;
}
.side .brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--indigo) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,122,255,0.30);
}
.side .brand-name {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.side-group {
  font-size: 11px;
  color: var(--label-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 12px 4px;
  font-weight: 600;
}

.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--label);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.side-item:hover { background: rgba(0,0,0,0.04); }
.side-item.active {
  background: rgba(0,122,255,0.10);
  color: var(--blue);
}
.side-item .ico {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--label-2);
}
.side-item.active .ico { color: var(--blue); }
.side-item .badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  height: 18px;
  border-radius: 10px;
  display: inline-flex; align-items: center;
  min-width: 18px; justify-content: center;
}

.side-foot {
  margin-top: auto;
  padding: 10px;
  border-top: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.side-foot .av { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, #FFB199 0%, #FF0844 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.side-foot .who { flex: 1; min-width: 0; }
.side-foot .who .n { font-weight: 600; font-size: 13px; }
.side-foot .who .r { font-size: 11px; color: var(--label-3); }

/* Manager preview banner */
.preview-banner {
  background: var(--indigo);
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
  display: flex; align-items: center; gap: 8px;
}
.preview-banner button {
  margin-left: auto;
  background: rgba(255,255,255,0.20);
  border: 0;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

/* Main column */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  height: 76px;
  flex: 0 0 76px;
  background: var(--bg-tint);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: relative;
  z-index: 5;
}
.topbar h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; flex: 0 0 auto; }
.topbar .title-block { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.topbar .title-block .sub { font-size: 11.5px; color: var(--label-3); }

/* Global search — prominent, central */
.gsearch {
  flex: 1;
  max-width: 540px;
  position: relative;
  margin-left: 8px;
}
.gsearch .input {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elev);
  border-radius: 11px;
  height: 44px;
  padding: 0 14px;
  border: 0.5px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  cursor: text;
  font-size: 14px;
}
.gsearch .input:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.18);
}
.gsearch input {
  border: 0; outline: 0; background: transparent;
  flex: 1; font-size: 14px; color: var(--label);
  min-width: 0;
}
.gsearch input::placeholder { color: var(--label-3); }
.gsearch .kbd {
  padding: 2px 6px;
  border: 0.5px solid var(--border-strong);
  border-radius: 5px;
  font-size: 11px; color: var(--label-3);
  background: var(--bg-elev-2);
  font-family: var(--mono);
}
.gsearch .drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--bg-elev);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-height: 420px;
  overflow: auto;
  z-index: 10;
}
.gsearch .drop .group-h {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--label-3);
  padding: 10px 14px 4px; font-weight: 700;
}
.gsearch .drop .hit {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  border-top: 0.5px solid var(--separator);
}
.gsearch .drop .hit:hover { background: rgba(0,122,255,0.06); }
.gsearch .drop .hit .meta { color: var(--label-3); font-size: 12px; margin-left: auto; }
.gsearch .drop .empty { padding: 22px; text-align: center; color: var(--label-3); font-size: 13px; }
mark { background: rgba(255,204,0,0.4); color: inherit; border-radius: 2px; padding: 0 2px; }

.topbar .btn { margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.topbar .topbar-menu-btn { display: none; }
.topbar .add-btn {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  border: 0;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(0,122,255,0.30);
}
.topbar .add-btn:hover { background: #0070EA; }
.topbar .icon-btn {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--bg-elev);
  border: 0.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--label-2);
  position: relative;
}
.topbar .icon-btn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--bg);
}

/* ========= Modals ========= */
.modal-bd {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 24px;
  animation: fadeIn .15s ease-out;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px) scale(0.98) } to { opacity: 1; transform: none } }
.modal {
  background: var(--bg-elev);
  border-radius: 18px;
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  animation: slideUp .2s ease-out;
}
.modal.sz-sm { max-width: 480px; }
.modal.sz-md { max-width: 640px; }
.modal.sz-lg { max-width: 820px; }

.modal-h {
  padding: 22px 24px 12px;
  display: flex; align-items: flex-start; gap: 12px;
}
.modal-h h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.modal-h .sub { font-size: 13px; color: var(--label-3); margin-top: 2px; }
.modal-h .close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(0,0,0,0.04);
  border: 0;
  color: var(--label-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.modal-h .close:hover { background: rgba(0,0,0,0.08); }

.modal-b { padding: 6px 24px 4px; flex: 1; overflow-y: auto; }
.modal-f {
  padding: 16px 24px 22px;
  display: flex; gap: 10px; align-items: center;
  border-top: 0.5px solid var(--separator);
  background: var(--bg-elev-2);
  border-radius: 0 0 18px 18px;
}

/* Banners inside modals */
.banner-info {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: rgba(0,122,255,0.08);
  border: 0.5px solid rgba(0,122,255,0.20);
  border-radius: 10px;
  color: #0060CC;
  font-size: 13px;
  margin: 10px 0;
}
.banner-warn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: rgba(255,149,0,0.10);
  border: 0.5px solid rgba(255,149,0,0.25);
  border-radius: 10px;
  color: #C76A00;
  font-size: 13px;
  margin: 10px 0;
}

/* Form fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label, .field > .lbl {
  font-size: 11.5px;
  color: var(--label-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.field > label .req, .field > .lbl .req { color: var(--red); margin-left: 2px; }
.input-text, .input-textarea, .input-select {
  border: 0.5px solid var(--border);
  background: var(--bg-elev);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--label);
  font-family: inherit;
  width: 100%;
  outline: 0;
  transition: border-color .12s, box-shadow .12s;
}
.input-text:focus, .input-textarea:focus, .input-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.18);
}
.input-textarea { resize: vertical; min-height: 70px; font-family: inherit; }
.row-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-fields-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* iOS-style radio chips for status picker */
.status-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.status-pick {
  border: 1.2px solid var(--border);
  background: var(--bg-elev);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--label-2);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.status-pick .sw { width: 10px; height: 10px; border-radius: 50%; }
.status-pick.active {
  border-color: var(--blue);
  background: rgba(0,122,255,0.08);
  color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.10);
}

/* Toggle / iOS switch */
.switch {
  width: 38px; height: 22px;
  background: rgba(120,120,128,0.32);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  flex: 0 0 auto;
}
.switch::after {
  content: ""; position: absolute;
  top: 1px; left: 1px;
  width: 20px; height: 20px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.12);
  transition: transform 0.15s;
}
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(16px); }

/* Quick preview side panel */
.quickview {
  width: 380px;
  flex: 0 0 380px;
  background: var(--bg-elev);
  border-left: 0.5px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.quickview .qv-head {
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--separator);
}
.quickview .qv-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.quickview .qv-foot {
  padding: 12px 16px;
  border-top: 0.5px solid var(--separator);
  background: var(--bg-elev-2);
  display: flex; gap: 8px;
}

/* List inside quickview */
.kv { display: flex; flex-direction: column; gap: 12px; }
.kv-row { display: flex; align-items: flex-start; gap: 10px; }
.kv-row .ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: center;
  color: var(--label-2);
  flex: 0 0 30px;
}
.kv-row .v .l { font-size: 11px; color: var(--label-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.kv-row .v .t { font-size: 13.5px; color: var(--label); font-weight: 600; }
.kv-row .v .t.tabular { font-variant-numeric: tabular-nums; }

/* Deal history row in quickview / client card */
.deal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0.5px solid var(--border);
  background: var(--bg-elev-2);
  cursor: pointer;
}
.deal-row:hover { background: rgba(0,122,255,0.05); }
.deal-row .swatch { width: 4px; height: 36px; border-radius: 999px; flex: 0 0 4px; }

.content {
  flex: 1;
  overflow: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.content.pad-0 { padding: 0; }
.content.pad-sm { padding: 16px 24px; }

/* ===== Buttons ===== */
.btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  background: rgba(118,118,128,0.12);
  color: var(--label);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: rgba(118,118,128,0.18); }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: #0070EA; }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(255,59,48,0.12); color: var(--red); }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn.lg { height: 38px; padding: 0 16px; font-size: 14px; }

/* ===== Cards ===== */
.card {
  background: var(--bg-elev);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex-shrink: 0;
}
.card .ch {
  padding: 14px 16px 6px;
  display: flex; align-items: center; gap: 10px;
}
.card .ch h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card .ch .sub {
  color: var(--label-3);
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
}
.card .cb { padding: 14px 16px; }
.card .cb-flush { padding: 0; }

/* Hide card-mode button label on desktop (icon-only) */
.tbl-cards-btnlbl { display: none; }

/* ===== Konfiguracja skrzynki ===== */
.mailcfg-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 9px;
  background: var(--bg-elev-2); border: 0.5px solid var(--border);
  font-size: 12.5px; color: var(--label-2); line-height: 1.45;
}
.mailcfg-note svg { flex: 0 0 14px; margin-top: 2px; color: var(--label-3); }
.mailtest { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; }
.mailtest.ok { color: #1E8A38; }
.mailtest.fail { color: var(--red); }

/* ===== Zadania ===== */
.task-card { transition: box-shadow .14s, transform .1s; }
.task-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.task-card:active { transform: scale(0.997); }
.task-newdot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: 0 0 8px; }
.task-clock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.task-clock.ok { background: rgba(52,199,89,0.12); color: #1E8A38; }
.task-clock.warn { background: rgba(255,149,0,0.14); color: var(--orange); }
.task-clock.danger { background: rgba(255,59,48,0.12); color: var(--red); }
.task-clock.done { background: rgba(120,120,128,0.12); color: var(--label-3); }
.task-meta-i { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--label-3); }
.task-assignees { display: flex; align-items: center; flex: 0 0 auto; }
.task-detail { display: flex; flex-direction: column; gap: 14px; }
.task-detail-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.task-detail-right { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 961px) {
  .task-detail {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px; align-items: start;
  }
  /* Prawa kolumna (komentarze) przykleja się i wypełnia wysokość widoku */
  .task-detail-right { position: sticky; top: 12px; }
  .task-comments-card { display: flex; flex-direction: column; max-height: calc(100vh - 150px); }
  .task-comments-card .cb { flex: 1; max-height: none !important; }
}
.task-check {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 22px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg-elev);
  display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s;
}
.task-check.on { background: #34C759; border-color: #34C759; }
.task-check:disabled { opacity: 0.5; cursor: default; }
.task-goal:hover { background: var(--hover-tint); }
.task-goal-del { background: none; border: 0; color: var(--label-4); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.task-goal-del:hover { color: var(--red); }
.task-resp { font-size: 11px; color: var(--orange); background: rgba(255,149,0,0.10); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.task-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-elev-2); border-radius: 8px; font-size: 12.5px; color: var(--label); }
.task-mention { color: var(--blue); font-weight: 700; margin-right: 5px; }
.task-file-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--bg-elev-2); border-radius: 10px; }
.task-file-ic { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; background: rgba(0,122,255,0.10); color: var(--blue); }
.task-sys-comment {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--label-3);
  padding: 5px 10px; background: var(--bg-elev-2); border-radius: 8px;
}
.task-sys-comment b { color: var(--label-2); font-weight: 600; }
.task-sys-time { margin-left: auto; flex: 0 0 auto; opacity: 0.7; }
.task-assignee-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.task-pick {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-elev); cursor: pointer; text-align: left;
  transition: background .12s, border-color .12s;
}
.task-pick:hover { background: var(--hover-tint); }
.task-pick.on { background: rgba(0,122,255,0.08); border-color: var(--blue); color: var(--blue); }
.task-banner {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: rgba(0,122,255,0.06); border: 0.5px solid rgba(0,122,255,0.22); border-radius: 12px;
  cursor: pointer; transition: background .12s;
}
.task-banner:hover { background: rgba(0,122,255,0.10); }
@media (max-width: 860px) {
  .task-assignee-pick { grid-template-columns: 1fr; }
}

/* ===== Podgląd leada (LeadFullCard) — mobile ===== */
@media (max-width: 860px) {
  .leadfull-head { flex-wrap: wrap; gap: 10px !important; padding: 14px !important; }
  /* Avatar + company name on first line; everything below stacks full-width */
  .leadfull-av { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  /* Chips row: clean wrap, no stretched meta, chips keep natural width */
  .leadfull-chips { gap: 6px !important; row-gap: 6px !important; }
  .leadfull-chips > .chip { height: 22px !important; padding: 0 9px !important; font-size: 11px !important; }
  .leadfull-co { flex: 1 1 100%; font-size: 15px !important; }
  /* "Utworzono / id" meta drops to its own full-width line, left-aligned */
  .leadfull-meta { margin-left: 0 !important; flex: 1 1 100%; white-space: normal !important; order: 99; margin-top: 2px; }

  /* Stats: inline "·"-separated → symmetric 2-col grid */
  .leadfull-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .leadfull-stats > .bold:first-child { grid-column: 1 / -1; font-size: 14px !important; }
  .leadfull-stats > .muted { grid-column: 1 / -1; margin-top: -4px; }
  .leadfull-stats > span[style*="flex: 1"] { display: none; }
  .compact-sep { display: none !important; }
  .compact-stat {
    flex-direction: column; align-items: flex-start !important; gap: 2px !important;
    padding: 8px 10px; background: var(--bg-elev-2); border-radius: 9px;
  }
  .compact-stat-v { font-size: 13.5px !important; }
  .leadfull-stats > span:last-child {
    grid-column: 1 / -1; justify-content: space-between;
    padding: 8px 10px; background: var(--bg-elev-2); border-radius: 9px;
  }
  .leadfull-contact { gap: 8px !important; }
  .leadfull-contact > span { flex: 1 1 100%; }
  .leadfull-actions {
    flex-direction: row !important; flex: 1 1 100% !important; margin-left: 0 !important;
    gap: 8px !important; order: 5;
  }
  .leadfull-actions > * { flex: 1; }
  .leadfull-actions .btn { width: 100%; justify-content: center; min-height: 40px; }
}

/* ===== Edytor uprawnień ról (RolesTab) ===== */
.perm-row:hover { background: var(--hover-tint); }
.perm-toggle {
  width: 42px; height: 25px; border-radius: 999px; border: 0;
  padding: 0; cursor: pointer; position: relative; flex: 0 0 42px;
  transition: background .16s;
}
.perm-knob {
  position: absolute; top: 2.5px; left: 2.5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform .16s;
}
.perm-toggle.on .perm-knob { transform: translateX(17px); }
@media (max-width: 860px) {
  .roles-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ===== Banery informacyjne na stronie głównej ===== */
.home-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  border: 0.5px solid var(--border);
}
.home-banner-ic {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
}
.home-banner-title { font-weight: 700; font-size: 14.5px; color: var(--label); letter-spacing: -0.01em; }
.home-banner-body { font-size: 13px; color: var(--label-2); margin-top: 3px; line-height: 1.45; }
.home-banner-meta { font-size: 11.5px; color: var(--label-3); margin-top: 6px; }
.banner-survey { margin-top: 10px; }
.banner-survey-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-vote-btn {
  padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-elev);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform .1s, background .12s;
}
.banner-vote-btn:hover { background: var(--bg-elev-2); }
.banner-vote-btn:active { transform: scale(0.96); }
.banner-survey-voted {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--label-2);
  background: rgba(52,199,89,0.10); border: 0.5px solid rgba(52,199,89,0.28);
  padding: 7px 12px; border-radius: 9px;
}
.home-banner-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.publish-banner-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,122,255,0.08);
  border: 0.5px solid rgba(0,122,255,0.30);
  color: var(--blue); font-weight: 600;
}
.publish-banner-btn:hover { background: rgba(0,122,255,0.14); }
.publish-banner-btn svg { color: var(--blue); }
@media (max-width: 860px) {
  .home-banner { flex-wrap: wrap; }
  .home-banner-actions { flex: 1 1 100%; }
  .home-banner-actions .btn { flex: 1; justify-content: center; }
}

/* ===== Mailbox (podgląd korespondencji na kliencie/leadzie) ===== */
.mailbox-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 0.5px solid var(--separator);
  background: var(--bg-elev-2);
}
.mailbox-count { font-size: 12.5px; font-weight: 600; color: var(--label-3); }
.mailbox-sync {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--label-3); margin-left: 10px;
}
.mailbox-sync.done { color: #1E8A38; }
.mailbox-spinner {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.6px solid var(--label-4); border-top-color: var(--blue);
  animation: mbspin 0.7s linear infinite;
}
@keyframes mbspin { to { transform: rotate(360deg); } }
.mail-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  border-bottom: 0.5px solid var(--separator);
  border-left: 3px solid transparent;
  transition: background .12s;
}
.mail-row:last-child { border-bottom: 0; }
.mail-row:hover { background: var(--hover-tint); }
/* Odebrane — lewy niebieski akcent + delikatne tło; Wysłane — zielony, wyrównane */
.mail-row.in { border-left-color: var(--blue); }
.mail-row.in.unread { background: rgba(0,122,255,0.05); }
.mail-row.out { border-left-color: #34C759; background: rgba(52,199,89,0.035); }
.mail-dirbadge { padding-top: 2px; }
.mail-dir {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px;
}
.mail-dir-in { background: rgba(0,122,255,0.12); color: var(--blue); }
.mail-dir-out { background: rgba(52,199,89,0.14); color: #1E8A38; }
.mail-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px;
}
.mail-row.in .mail-tag { background: rgba(0,122,255,0.12); color: var(--blue); }
.mail-row.out .mail-tag { background: rgba(52,199,89,0.14); color: #1E8A38; }
.mail-thread-tag {
  font-size: 10px; font-weight: 600; color: var(--label-3);
  padding: 1px 6px; border-radius: 5px; background: var(--bg-elev-2);
}
/* Pełny podgląd wiadomości (z zakodowaną stopką HTML) */
.mail-full { margin-top: 8px; }
.mail-html {
  font-size: 13.5px; line-height: 1.55; color: var(--label);
  background: var(--bg); border: 0.5px solid var(--separator);
  border-radius: 8px; padding: 14px 16px;
}
.mail-html img { max-width: 200px; height: auto; }
.mail-html a { color: var(--blue); }
.mail-sig {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--separator);
}
.mail-sig img { max-width: 180px; height: auto; }
/* Nagłówek meta pełnego maila (Od/Do/Data) */
.mail-meta {
  background: var(--bg-elev-2); border: 0.5px solid var(--separator);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
  font-size: 12.5px; display: flex; flex-direction: column; gap: 3px;
}
.mail-meta-k { color: var(--label-3); display: inline-block; width: 42px; font-weight: 500; }
.mail-meta-v { color: var(--label); font-weight: 500; }

/* ===== Compose mail ===== */
.compose-field {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 0.5px solid var(--separator); padding: 8px 0;
}
.compose-lbl { font-size: 13px; color: var(--label-3); width: 52px; flex: 0 0 52px; font-weight: 500; }
.compose-input { flex: 1; border: 0; background: none; outline: none; font-size: 14px; color: var(--label); padding: 4px 0; }
.compose-body {
  border: 0; background: none; outline: none; resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.55; color: var(--label);
  padding: 12px 0; min-height: 140px;
}
/* ===== WYSIWYG (RichTextEditor) ===== */
.rte { border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-elev); }
.rte-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 0.5px solid var(--separator);
  background: var(--bg-elev-2);
}
.rte-btn {
  min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: 7px;
  background: transparent; color: var(--label-2); cursor: pointer;
  font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.rte-btn:hover { background: var(--hover-tint); color: var(--label); }
.rte-btn.on { background: rgba(0,122,255,0.14); color: var(--blue); }
.rte-sep { width: 1px; height: 18px; background: var(--separator); margin: 0 4px; }
.rte-body {
  min-height: 150px; max-height: 320px; overflow-y: auto;
  padding: 12px 14px; outline: none;
  font-size: 14px; line-height: 1.6; color: var(--label);
}
.rte-body:empty::before { content: attr(data-placeholder); color: var(--label-4); pointer-events: none; }
.rte-body a { color: var(--blue); }
.rte-body ul, .rte-body ol { margin: 6px 0; padding-left: 22px; }
.compose-tpl {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding: 8px 0;
  border-top: 0.5px solid var(--separator);
}
.compose-tpl-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--label-3); white-space: nowrap;
}
.compose-tpl-select {
  flex: 1; height: 34px; padding: 0 30px 0 10px;
  border: 0.5px solid var(--border); border-radius: 8px; background: var(--bg-elev-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 22 22' fill='none' stroke='%238A8A8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  font-size: 13px; color: var(--label); cursor: pointer; -webkit-appearance: none; appearance: none;
}

/* ===== Edytor sygnatury maila ===== */
.sig-editor {
  border: 0.5px solid var(--border); border-radius: 12px;
  overflow: hidden; background: var(--bg-elev);
}
.sig-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; background: var(--bg-elev-2);
  border-bottom: 0.5px solid var(--separator);
  flex-wrap: wrap;
}
.sig-mode { flex: 0 0 auto; }
.sig-tools { display: flex; align-items: center; gap: 4px; }
.sig-tool {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; min-width: 30px; padding: 0 8px;
  border: 0.5px solid var(--border); border-radius: 8px;
  background: var(--bg-elev); color: var(--label);
  font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s;
}
.sig-tool:hover { background: var(--hover-tint); border-color: var(--label-4); }
.sig-tool:active { transform: scale(0.95); }
.sig-sep { width: 1px; height: 20px; background: var(--separator); margin: 0 3px; }
.sig-canvas {
  min-height: 120px; padding: 14px 16px;
  font-size: 14px; line-height: 1.5; color: var(--label);
  outline: none; overflow-y: auto; max-height: 280px;
}
.sig-canvas:focus { box-shadow: inset 0 0 0 2px rgba(0,122,255,0.18); }
.sig-canvas img { max-width: 100%; }
.sig-canvas a { color: var(--blue); }
.sig-html {
  border: 0 !important; border-radius: 0 !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  line-height: 1.5; resize: vertical; min-height: 130px;
}
.sig-html:focus { box-shadow: inset 0 0 0 2px rgba(0,122,255,0.18); }
.sig-preview-wrap { border-top: 0.5px solid var(--separator); background: var(--bg); }
.sig-preview-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--label-4); padding: 8px 16px 0;
}
.sig-preview { padding: 10px 16px 16px; }
.sig-preview img { max-width: 180px; height: auto; }

/* ===== Wyniki — nowoczesny pasek filtrów ===== */
.results-filter {
  background: var(--bg-elev);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex: 0 0 auto;
}
.rf-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.rf-row::-webkit-scrollbar { display: none; }
.rf-group { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 0 0 auto; }
.rf-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--label-3);
  white-space: nowrap;
}
.rf-seg { flex: 0 0 auto; }
.rf-select {
  height: 36px; padding: 0 32px 0 12px;
  border: 0.5px solid var(--border); border-radius: 9px;
  background: var(--bg-elev-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 22 22' fill='none' stroke='%238A8A8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  font-size: 13.5px; font-weight: 600; color: var(--label);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  width: auto; min-width: 130px; max-width: 220px;
  transition: border-color .12s, box-shadow .12s;
}
.rf-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,122,255,0.16); }
.rf-select:hover { border-color: var(--label-4); }
input.rf-select { min-width: 0; width: 150px; padding-right: 10px; }
.rf-daterange { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rf-arrow { color: var(--label-3); font-size: 14px; }
.rf-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-left: 6px; }
.rf-actions .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rf-plan-btn { color: var(--blue); }

/* Summary strip — gradient accent, modern stat row */
.rf-summary {
  display: flex; align-items: center; gap: 0;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(0,122,255,0.05) 0%, rgba(0,122,255,0.01) 100%);
  border-top: 0.5px solid var(--separator);
  font-size: 13px; color: var(--label-2);
  flex-wrap: wrap; row-gap: 4px;
}
.rf-summary > span { display: inline-flex; align-items: center; gap: 6px; }
.rf-summary > span:not(:last-child)::after {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--label-4); margin: 0 12px;
}
.rf-summary-period { font-weight: 700; color: var(--label); }
.rf-summary-period svg { color: var(--blue); }
.rf-summary-scope { color: var(--label-3); font-weight: 500; }
.rf-summary-stat b { font-weight: 700; }

@media (max-width: 860px) {
  /* Mobilnie: pasek filtrów układa się pionowo w czytelne, pełnej szerokości rzędy */
  .rf-row {
    flex-wrap: wrap; overflow-x: visible;
    gap: 12px; padding: 14px;
  }
  .rf-group {
    flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 8px;
  }
  .rf-label { font-size: 10.5px; }
  .rf-seg { flex: 1 1 auto; width: 100%; }
  .rf-seg button { flex: 1; }
  .rf-select { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; height: 42px; }
  input.rf-select { width: 100%; height: 42px; }
  .rf-daterange { flex: 1 1 100%; }
  .rf-daterange input { flex: 1; }
  .rf-actions {
    margin-left: 0; flex: 1 1 100%; padding-left: 0;
    border-top: 0.5px solid var(--separator); padding-top: 12px;
  }
  .rf-actions .btn { flex: 1; justify-content: center; min-height: 42px; }
  .rf-summary { font-size: 12px; row-gap: 6px; }
  .rf-summary > span:not(:last-child)::after { margin: 0 8px; }
}
/* Leads header button: full label on desktop */
.leads-ch-btn-short { display: none; }
.leads-ch-btn-full { display: inline; }
/* Add-client button: plus on desktop, user-plus on mobile */
.add-btn-ico-mobile { display: none; }
.add-btn-ico-full { display: inline-flex; }

/* Tappable list (iOS-style inset grouped) */
.list { background: var(--bg-elev); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.list .row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--separator);
  font-size: 14px;
}
.list .row:last-child { border-bottom: 0; }
.list .row .lead { flex: 0 0 auto; }
.list .row .body { flex: 1; min-width: 0; }
.list .row .body .t1 { font-weight: 600; font-size: 14px; }
.list .row .body .t2 { color: var(--label-3); font-size: 12px; margin-top: 2px; }
.list .row .trail { color: var(--label-3); font-size: 13px; }
.list .row .chev { color: var(--label-4); flex: 0 0 auto; }

/* ===== Status chips ===== */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(120,120,128,0.16);
  color: var(--label-2);
  white-space: nowrap;
}
.chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.chip.nowy { background: var(--st-nowy-bg); color: #5B5B60; }
.chip.kontakt { background: var(--st-kontakt-bg); color: #0060CC; }
.chip.wniosek { background: var(--st-wniosek-bg); color: #4845B8; }
.chip.decyzja { background: var(--st-decyzja-bg); color: #C76A00; }
.chip.finalizacja { background: var(--st-finalizacja-bg); color: #D40C3D; }
.chip.sfinalizowany { background: var(--st-sfinalizowany-bg); color: #1E8A38; }
.chip.przegrany { background: var(--st-przegrany-bg); color: #C71E15; }
.chip.aktywny { background: rgba(52,199,89,0.16); color: #1E8A38; }
.chip.nieaktywny { background: rgba(142,142,147,0.18); color: #5B5B60; }

/* ===== KPI ===== */
.kpi {
  background: var(--bg-elev);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.kpi .l { font-size: 13px; color: var(--label-3); font-weight: 600; }
.kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.kpi .v .u { font-size: 14px; color: var(--label-3); font-weight: 600; letter-spacing: 0; }
.kpi .d { font-size: 12px; color: var(--label-3); }
.kpi .d.up { color: #1E8A38; }
.kpi .d.down { color: var(--red); }

/* ===== Avatar ===== */
.av {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  flex: 0 0 auto;
}
.av.s { width: 22px; height: 22px; font-size: 10px; }
.av.l { width: 40px; height: 40px; font-size: 14px; }
.av.xl { width: 56px; height: 56px; font-size: 18px; }
.av-mk { background: linear-gradient(135deg, #FFB199 0%, #FF0844 100%); }
.av-pb { background: linear-gradient(135deg, #84FAB0 0%, #8FD3F4 100%); color: #003a4d; }
.av-kl { background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%); color: #2a1a4a; }
.av-jr { background: linear-gradient(135deg, #FAD961 0%, #F76B1C 100%); color: #4d1a00; }
.av-an { background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%); color: #00355c; }
.av-tk { background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%); }
.av-co { background: rgba(118,118,128,0.18); color: #5B5B60; }
.av-default { background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%); color: #fff; }

/* ===== Table ===== */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th {
  text-align: left;
  font-weight: 600;
  color: var(--label-3);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--separator);
  background: var(--bg-elev-2);
  position: sticky; top: 0;
  white-space: nowrap;
}
.tbl tbody td {
  padding: 13px 14px;
  border-bottom: 0.5px solid var(--separator);
  vertical-align: middle;
  white-space: nowrap;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(0,122,255,0.04); cursor: pointer; }
.tbl .strong { font-weight: 600; }
.tbl .muted { color: var(--label-3); }

/* ===== Segmented (iOS) ===== */
.seg {
  display: inline-flex;
  background: rgba(118,118,128,0.12);
  padding: 2px;
  border-radius: 9px;
  gap: 0;
}
.seg button {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--label-2);
  border-radius: 7px;
  position: relative;
}
.seg button.active {
  background: var(--bg-elev);
  color: var(--label);
  box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.04);
}

/* ===== Kanban ===== */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
}
.col-kan {
  background: var(--bg);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  min-height: 0;
  border: 0.5px solid var(--border);
  overflow: hidden;
}
.col-kan .col-h {
  padding: 12px 14px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev);
  border-bottom: 0.5px solid var(--separator);
}
.col-kan .col-h .swatch {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.col-kan .col-h .name { font-weight: 700; font-size: 14px; }
.col-kan .col-h .count {
  margin-left: auto;
  background: rgba(118,118,128,0.16);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--label-2);
}
.col-kan .col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
}

.deal-card {
  background: var(--bg-elev);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.05);
  border-left: 3px solid var(--gray);
  cursor: grab;
  display: flex; flex-direction: column; gap: 8px;
}
.deal-card.s-nowy { border-left-color: var(--st-nowy); }
.deal-card.s-kontakt { border-left-color: var(--st-kontakt); }
.deal-card.s-wniosek { border-left-color: var(--st-wniosek); }
.deal-card.s-decyzja { border-left-color: var(--st-decyzja); }
.deal-card.s-finalizacja { border-left-color: var(--st-finalizacja); }
.deal-card.s-sfinalizowany { border-left-color: var(--st-sfinalizowany); }
.deal-card.s-przegrany { border-left-color: var(--st-przegrany); }
.deal-card .co { font-weight: 600; font-size: 13.5px; letter-spacing: -0.005em; }
.deal-card .val { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.deal-card .meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--label-3); }
.deal-card .row-foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--label-3); }
.deal-card.hot { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--orange); }

/* ===== Calendar ===== */
.cal {
  flex: 1;
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-radius: var(--r);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 0;
}
.cal-head { background: var(--bg-elev-2); padding: 10px 8px; text-align: center; border-bottom: 0.5px solid var(--separator); border-right: 0.5px solid var(--separator); }
.cal-head:last-child { border-right: 0; }
.cal-head .d { font-size: 10.5px; color: var(--label-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.cal-head .n { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.cal-head.today .n { color: var(--blue); }
.cal-grid { display: contents; }
.cal-cell {
  border-right: 0.5px solid var(--separator);
  border-bottom: 0.5px solid var(--separator);
  padding: 2px;
  font-size: 10px;
  color: var(--label-3);
  position: relative;
}
.cal-cell.hr { padding: 4px 8px 0 0; text-align: right; border-right: 0.5px solid var(--separator); }
.cal-cell.hr.cal-hr-now { color: var(--red); font-weight: 700; }
.cal-event {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  padding: 4px 7px;
  background: var(--st-kontakt-bg);
  color: #0060CC;
  border-left: 2px solid var(--blue);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  cursor: pointer;
}
.cal-event .e-t { font-weight: 700; font-size: 10.5px; opacity: 0.85; }
.cal-event .e-n { font-weight: 600; font-size: 11.5px; }
.cal-event.s-nowy { background: var(--st-nowy-bg); color: #5B5B60; border-left-color: var(--st-nowy); }
.cal-event.s-kontakt { background: var(--st-kontakt-bg); color: #0060CC; border-left-color: var(--st-kontakt); }
.cal-event.s-wniosek { background: var(--st-wniosek-bg); color: #4845B8; border-left-color: var(--st-wniosek); }
.cal-event.s-decyzja { background: var(--st-decyzja-bg); color: #C76A00; border-left-color: var(--st-decyzja); }
.cal-event.s-finalizacja { background: var(--st-finalizacja-bg); color: #D40C3D; border-left-color: var(--st-finalizacja); }
.cal-event.s-sfinalizowany { background: var(--st-sfinalizowany-bg); color: #1E8A38; border-left-color: var(--st-sfinalizowany); }

/* ===== Helpers ===== */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.f1 { flex: 1; min-width: 0; min-height: 0; }
.f2 { flex: 2; min-width: 0; min-height: 0; }
.aic { align-items: center; }
.ais { align-items: stretch; }
.jcsb { justify-content: space-between; }
.jce { justify-content: flex-end; }
.tc { text-align: center; }
.tr { text-align: right; }
.mta { margin-top: auto; }
.muted { color: var(--label-3); }
.muted-2 { color: var(--label-4); }
.bold { font-weight: 600; }
.h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.tiny { font-size: 11.5px; }
.mono { font-family: var(--mono); }
.tabular { font-variant-numeric: tabular-nums; }
.fade { opacity: 0.5; }

.scroll-y { overflow-y: auto; }
.scroll-y::-webkit-scrollbar { width: 10px; }
.scroll-y::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border-radius: 999px; border: 3px solid var(--bg); }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* ===== Th filter menu ===== */
.th-menu-wrap {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  z-index: 50;
  background: var(--bg-elev);
  border: 0.5px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(0,0,0,0.04);
  padding: 4px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
.th-menu {
  list-style: none;
  margin: 0; padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.th-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--label);
  cursor: pointer;
  border-radius: 6px;
  font-weight: 500;
}
.th-menu li:hover { background: var(--hover-tint); }
.th-menu li.active { background: rgba(0,122,255,0.10); color: var(--blue); font-weight: 600; }
.th-menu li.divider { height: 1px; padding: 0; margin: 4px 6px; background: var(--separator); pointer-events: none; }

/* ===== Toast system ===== */
.toast-host {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: 520px;
  background: var(--bg-elev);
  border: 0.5px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.04);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  animation: toastIn .22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast.leaving { animation: toastOut .2s ease-in forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(8px) scale(0.98); } }

.toast .toast-ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px;
}
.toast.t-info .toast-ic    { background: rgba(0,122,255,0.12); color: var(--blue); }
.toast.t-success .toast-ic { background: rgba(52,199,89,0.14); color: #1E8A38; }
.toast.t-warn .toast-ic    { background: rgba(255,149,0,0.14); color: #C76A00; }
.toast.t-danger .toast-ic  { background: rgba(255,59,48,0.12); color: var(--red); }

:root.dark .toast.t-success .toast-ic { color: var(--green); }
:root.dark .toast.t-warn .toast-ic    { color: var(--orange); }

.toast .toast-body { flex: 1; min-width: 0; }
.toast .toast-title { font-weight: 700; color: var(--label); }
.toast .toast-msg { color: var(--label-2); margin-top: 2px; font-size: 12.5px; }

.toast .toast-action {
  background: var(--bg-elev-2);
  border: 0.5px solid var(--border-strong);
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
}
.toast .toast-action:hover { background: rgba(0,122,255,0.08); border-color: var(--blue); }

.toast .toast-close {
  width: 26px; height: 26px;
  background: transparent;
  border: 0;
  color: var(--label-3);
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 26px;
}
.toast .toast-close:hover { background: var(--hover-tint); color: var(--label); }

/* ===== Notification bell + panel ===== */
.notif-wrap { position: relative; }
.notif-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border: 1.5px solid var(--bg);
}
.notif-scrim { position: fixed; inset: 0; z-index: 90; }
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 91;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--bg-elev); border: 0.5px solid var(--border);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.20);
  overflow: hidden; animation: slideUp .16s ease-out;
}
.notif-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 0.5px solid var(--separator);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
}
.notif-head-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 99px; background: var(--bg-elev-2); color: var(--label-2);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.notif-list { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.notif-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; background: none; border: 0; cursor: pointer;
  border-bottom: 0.5px solid var(--separator); text-align: left;
  transition: background .12s;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--hover-tint); }
.notif-item:active { transform: scale(0.99); }
.notif-ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title { font-weight: 650; font-size: 13.5px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-sub { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-chev { color: var(--label-4); flex: 0 0 auto; }
.notif-empty { padding: 36px 20px; text-align: center; }
.notif-empty-ic {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 12px;
  background: rgba(52,199,89,0.14); color: #1E8A38;
  display: flex; align-items: center; justify-content: center;
}

/* Calendar backdrop — widoczny tylko na mobile via media query */
.cal-side-backdrop { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Calendar side panel close (mobile only) */
.cal-side-close {
  display: none; position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-elev-2); border: 0.5px solid var(--border);
  color: var(--label-2); align-items: center; justify-content: center;
  cursor: pointer;
}

/* ===== Agenda (calendar list) view ===== */
.cal-agenda-btn { display: none; }
.agenda-daydiv {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 8px; position: sticky; top: 0; z-index: 2;
  background: var(--bg-elev); backdrop-filter: blur(10px);
  font-weight: 700; font-size: 13px; letter-spacing: -0.01em;
  border-bottom: 0.5px solid var(--separator);
}
.agenda-daycount {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  background: var(--bg-elev-2); color: var(--label-3);
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.agenda-item {
  display: flex; align-items: stretch; gap: 12px; width: 100%;
  padding: 13px 16px; background: none; border: 0;
  border-left: 3px solid var(--blue);
  border-bottom: 0.5px solid var(--separator);
  cursor: pointer; text-align: left; transition: background .12s;
}
.agenda-item:hover { background: var(--hover-tint); }
.agenda-item.active { background: rgba(0,122,255,0.07); }
.agenda-item:active { transform: scale(0.995); }
.agenda-time { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 0 52px; }
.agenda-hh { font-weight: 700; font-size: 15px; color: var(--label); }
.agenda-dur { color: var(--label-4); }
.agenda-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.agenda-co { font-weight: 650; font-size: 14.5px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-meta { font-size: 12.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-status {
  align-self: flex-start; margin-top: 2px;
  padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
}
.agenda-chev { color: var(--label-4); display: flex; align-items: center; flex: 0 0 auto; }

/* ===== Mobile chrome (hidden on desktop) ===== */
.mobile-hamburger { display: none; }
.side-scrim { display: none; }
.mtabbar { display: none; }

/* ===== Responsive / Native mobile app (≤860px) ===== */
/* ===== Tablet range (861–1180px): collapse 2-column home/calendar so right
   column wraps below instead of overflowing the content area ===== */
@media (min-width: 861px) and (max-width: 1180px) {
  [style*="2fr 1fr"],
  [style*="1fr 340px"],
  [style*="1fr 320px"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 860px) {
  /* Lock the app to the viewport like a native shell; only .content scrolls */
  html, body, #root { height: 100%; overflow: hidden; overflow-x: hidden; max-width: 100vw; }
  .app { height: 100%; height: 100dvh; max-width: 100vw; overflow-x: hidden; }
  .main { height: 100%; min-height: 0; max-width: 100vw; overflow-x: hidden; }
  /* Page itself NEVER pans horizontally — inner scrollers capture the gesture */
  .content { overflow-x: hidden !important; overflow-y: auto; }

  /* Hamburger lives in the topbar but we lean on the bottom bar instead */
  .mobile-hamburger { display: none; }

  /* Sidebar = left drawer opened from the "Więcej" tab */
  .side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 0 0 60px rgba(0,0,0,0.28);
    width: min(82vw, 300px); flex-basis: auto;
    padding-top: env(safe-area-inset-top);
  }
  .side.open { transform: translateX(0); }
  .side-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,0.42);
    animation: fadeIn .22s ease;
    backdrop-filter: blur(2px);
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* ===== Native top bar: compact, sticky, safe-area aware ===== */
  .topbar {
    height: auto; min-height: 52px; flex: none;
    flex-wrap: wrap; gap: 10px;
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
    position: sticky; top: 0; z-index: 20;
    background: var(--bg);
    border-bottom: 0.5px solid var(--separator);
  }
  .topbar h1 { font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .title-block { flex: 1 1 auto; min-width: 0; }
  .topbar .title-block .sub { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Action buttons stay top-right on row 1 */
  .topbar-actions { flex: 0 0 auto; gap: 8px; order: 2; }
  .topbar .topbar-menu-btn { display: inline-flex; }
  .topbar .icon-btn { width: 40px; height: 40px; }
  /* Global search collapses to its own full-width row below */
  .gsearch { order: 5; flex: 1 1 100%; max-width: none; margin: 0; }
  .gsearch .input { border-radius: 12px; height: 42px; }
  .gsearch .drop { max-height: 52vh; }

  /* ===== Scroll region above the tab bar ===== */
  .content {
    padding: 16px 16px calc(86px + env(safe-area-inset-bottom));
    gap: 14px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .content.pad-0 { padding: 0 0 calc(72px + env(safe-area-inset-bottom)); }

  /* Stack multi-column grids */
  .row-fields, .row-fields-3 { grid-template-columns: 1fr; }
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Home page main layout (2fr 1fr) → single stacked column */
  [style*="2fr 1fr"],
  [style*="1fr 340px"],
  [style*="1fr 320px"],
  [style*="320px"],
  [style*="340px"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards get a touch more breathing room + rounder corners (native sheet feel) */
  .card { border-radius: 16px; }

  /* Wide data tables → stacked cards (no horizontal scroll) */
  table.tbl.tbl-cards { min-width: 0; width: 100%; display: block; }
  table.tbl.tbl-cards thead { display: none; }
  table.tbl.tbl-cards tbody { display: block; }
  table.tbl.tbl-cards tr {
    display: block; padding: 14px 16px;
    border-top: 0.5px solid var(--separator);
  }
  table.tbl.tbl-cards tr:first-child { border-top: 0; }
  /* Default cell = labeled key/value row */
  table.tbl.tbl-cards td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 4px 0; border: 0; text-align: left !important;
    min-width: 0;
  }
  table.tbl.tbl-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto; color: var(--label-3); font-size: 12.5px; font-weight: 500;
  }
  /* Identity cells (no data-label) = full-width title block at top of card */
  table.tbl.tbl-cards td:not([data-label]) { display: block; }
  /* Divider between identity block and the first labeled stat */
  table.tbl.tbl-cards td:not([data-label]) + td[data-label] {
    margin-top: 8px; padding-top: 10px; border-top: 0.5px solid var(--separator);
  }
  /* Rank number → small inline badge, not a big title */
  table.tbl.tbl-cards td.tbl-rank {
    display: inline-block; width: auto; color: var(--label-3);
    font-size: 12px !important; margin-bottom: 2px;
  }
  table.tbl.tbl-cards td > * { min-width: 0; }
  /* Progress / udział bar keeps room */
  table.tbl.tbl-cards td[data-label="Udział"] > div { flex: 1; max-width: 62%; }
  /* Action button cell → full-width button with text label */
  table.tbl.tbl-cards td:last-child:not([data-label]) { margin-top: 10px; }
  table.tbl.tbl-cards td:last-child .btn { width: 100%; justify-content: center; }
  .tbl-cards-btnlbl { display: inline; }

  /* Other (non-card) tables still scroll horizontally inside their card */
  .card .cb-flush, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tbl:not(.tbl-cards) { min-width: 560px; }

  /* Touch targets */
  .btn { min-height: 42px; border-radius: 12px; }
  .btn.sm { min-height: 34px; }
  .side-item { padding-top: 12px; padding-bottom: 12px; }

  /* Quick-view → full-screen sheet that slides up */
  .quickview {
    position: fixed; inset: 0; z-index: 50;
    width: 100% !important; max-width: none !important;
    border-radius: 0; padding-bottom: env(safe-area-inset-bottom);
    animation: sheetUp .3s cubic-bezier(0.32,0.72,0,1);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Kanban → horizontal snap scroller (flex so columns keep fixed width, no overlap) */
  .kanban {
    display: flex !important;
    grid-auto-columns: unset !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    height: auto; flex: none;
  }
  .kanban > * {
    scroll-snap-align: start;
    flex: 0 0 80vw; width: 80vw; max-width: 320px;
    min-width: 0;
  }
  .col-kan { max-height: 70vh; }
  .col-kan .col-body { max-height: 60vh; }

  /* Modals → bottom sheets */
  .modal {
    width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    margin-top: auto !important;
    max-height: 92dvh; overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    animation: sheetUp .3s cubic-bezier(0.32,0.72,0,1);
  }
  .modal-bd { align-items: flex-end !important; padding: 0 !important; }
  /* Grabber handle on sheets */
  .modal::before {
    content: ""; display: block;
    width: 38px; height: 4px; border-radius: 99px;
    background: var(--label-4); opacity: 0.4;
    margin: 8px auto 2px;
  }

  /* ===== Bottom tab bar ===== */
  .mtabbar {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--separator);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mtab {
    flex: 1; background: none; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 6px;
    color: var(--label-3); font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
  }
  .mtab.active { color: var(--blue); }
  .mtab:active { transform: scale(0.94); }
  .mtab-ico { position: relative; display: flex; align-items: center; justify-content: center; height: 24px; }
  .mtab-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; }
  .mtab-badge {
    position: absolute; top: -5px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 99px; background: var(--red); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    border: 1.5px solid var(--bg);
  }
  .mtab-dot {
    position: absolute; top: -3px; right: -4px;
    width: 9px; height: 9px; border-radius: 99px;
    background: var(--red); border: 1.5px solid var(--bg);
  }

  /* Hide the desktop sidebar footer logout duplication is fine; drawer still shows it */
  .banner { font-size: 12px; }

  /* Top bar: "Dodaj klienta" → compact icon, but clearly a "+add" affordance */
  .add-btn {
    gap: 0; padding: 0; width: 40px; height: 40px;
    justify-content: center; flex: 0 0 40px; border-radius: 12px;
    position: relative;
  }
  .add-btn-lbl { display: none; }
  .add-btn-ico-full { display: none; }
  .add-btn-ico-mobile { display: inline-flex; align-items: center; justify-content: center; }

  /* Notification panel → bottom sheet */
  .notif-panel {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 80dvh;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheetUp .3s cubic-bezier(0.32,0.72,0,1);
  }
  .notif-panel::before {
    content: ""; display: block; width: 38px; height: 4px; border-radius: 99px;
    background: var(--label-4); opacity: 0.4; margin: 8px auto 0;
  }
  .notif-scrim { background: rgba(0,0,0,0.4); z-index: 90; }
  .notif-list { max-height: 70dvh; }

  /* Genuine horizontal scrollers capture the side-swipe (page stays put) */
  .kanban, .filter-row, .cal-controls, .cb-flush, table.tbl,
  [style*="overflowX"], [style*="overflow-x"] {
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }
  .kanban { touch-action: pan-x; }

  /* Card headers wrap so toggles/actions never get clipped off-screen */
  .card .ch { flex-wrap: wrap; row-gap: 6px; }
  .card .ch h3 { flex: 0 1 auto; }
  .card .ch > div { min-width: 0; }
  .card .ch .sub { margin-left: 8px; }
  .card .ch .seg { margin-left: auto !important; }
  .card .ch .seg { flex: 0 0 auto; }
  .card .ch .btn { margin-left: auto; }

  /* Leady do przydzielenia: keep header on ONE compact line */
  .card .ch.leads-ch { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .leads-ch h3 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .leads-ch-sub { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 0 !important; }
  .leads-ch-btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
  .leads-ch-btn-full { display: none; }
  .leads-ch-btn-short { display: inline; }

  /* Cards / rows must shrink + truncate, never force the page wider */
  .deal-card { min-width: 0; }
  .deal-card .co { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .deal-card .meta { min-width: 0; flex-wrap: wrap; }
  .deal-card .meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .deal-card .row-foot { flex-wrap: wrap; row-gap: 6px; }
  .card .row.aic { min-width: 0; }
  .card .row.aic > div { min-width: 0; }

  /* Lead rows: compact card with accent as a LEFT stripe (not an orphaned line) */
  .lead-row { position: relative; flex-wrap: wrap; align-items: flex-start !important; padding: 11px 16px 11px 18px !important; gap: 8px !important; }
  .lead-row-bar { position: absolute !important; left: 0; top: 10px; bottom: 10px; width: 4px; height: auto !important; min-height: 0 !important; }
  .lead-row-main { flex: 1 1 100% !important; order: 0; min-width: 0; }
  .lead-row-action { flex: 1 1 100%; order: 2; margin-top: 8px; }
  .lead-row-action .btn { width: 100%; justify-content: center; }
  .lead-row-action > div { width: 100%; }
  .lead-row-action > div > button { width: 100%; justify-content: center; }

  /* Every module list: show ~3 items, then scroll vertically inside the module */
  .card .cb-flush, .card .scroll-y {
    max-height: 340px !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  /* tbl-cards are taller — allow a little more so ~3 cards show */
  .card .cb-flush:has(table.tbl-cards) { max-height: 420px !important; }

  /* Compact card variant (leasing breakdown): tighter rows + scroll after ~1 firm */
  .leasing-flush { max-height: 280px !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  table.tbl.tbl-compact tr { padding: 10px 16px; }
  table.tbl.tbl-compact td { padding: 2px 0; font-size: 13px; }
  table.tbl.tbl-compact td[data-label]::before { font-size: 12px; }
  /* Keep the firm title + its turnover on the SAME first line (compress) */
  table.tbl.tbl-compact td:not([data-label]) + td[data-label="Transakcje"] {
    margin-top: 6px; padding-top: 8px; border-top: 0.5px solid var(--separator);
  }
  /* Pilne kontakty card-grid → single column + scroll after ~3 (same rule as list view) */
  .hot-grid {
    grid-template-columns: 1fr !important;
    max-height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* ===== Calendar mobile ===== */
  /* Natural document-flow layout on mobile (no nested flex:1 scroll that collapses on iOS) */
  .cal-layout { flex: none !important; min-height: 0 !important; display: block !important; }
  .cal-gridcard { overflow: visible !important; display: block !important; }
  .agenda-scroll { overflow: visible !important; flex: none !important; min-height: 0 !important; }
  .cal-monthgrid { min-width: 0 !important; }
  /* Controls row: wrap into tidy rows + stick to top so always reachable */
  .cal-controls {
    flex-wrap: wrap; overflow: visible;
    gap: 8px !important; padding: 8px 0;
    position: sticky; top: 0; z-index: 15;
    background: var(--bg);
  }
  .cal-controls .seg { margin-left: 0 !important; flex: 0 0 auto; }
  .cal-controls > .btn { flex: 0 0 auto; }
  .cal-controls h2 { min-width: auto !important; font-size: 15px !important; flex: 1 1 auto; text-align: center; }
  .cal-controls .input-select { flex: 1 1 100%; }
  .cal-controls .seg button { padding-left: 12px; padding-right: 12px; }
  .cal-week-btn { display: none !important; }
  .cal-agenda-btn { display: inline-flex !important; }
  /* Calendar body: stack grid + side panel */
  .cal-layout { grid-template-columns: 1fr !important; }
  /* Backdrop widoczny tylko na mobile */
  .cal-side-backdrop.visible {
    display: block;
    position: fixed; inset: 0; z-index: 49;
    background: rgba(0,0,0,.35);
    animation: fadeIn .2s ease;
  }
  /* Calendar quick-view panel on calendar → bottom sheet (only when an event is picked) */
  .cal-side { display: none !important; }
  .cal-side.open {
    display: flex !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 50;
    width: 100% !important;
    max-width: none !important;
    border-radius: 20px 20px 0 0;
    max-height: 72dvh !important;
    height: auto !important;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheetUp .3s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 0 -4px 32px rgba(0,0,0,.18);
  }
  .cal-side.open::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    background: var(--sep, #d1d1d6);
    border-radius: 99px;
    margin: 10px auto 0;
    flex-shrink: 0;
    order: -1;
    align-self: center;
  }
  .cal-side-close { display: flex !important; }
  /* Week/day time grid scrolls horizontally; month cells get a min height */
  .cal-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-monthgrid { min-width: 0 !important; }

  /* ===== Pipeline / generic filter rows ===== */
  /* Any toolbar row of seg + filter buttons → horizontal scroll, no wrap */
  .filter-row {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px !important; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
    scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row > * { flex: 0 0 auto; }
  .filter-row .seg { margin-left: 0 !important; }
}
/* ===== Very small phones (≤430px) ===== */
@media (max-width: 430px) {
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .topbar h1 { font-size: 17px; }
  .content { padding-left: 12px; padding-right: 12px; }
  .seg { flex-wrap: wrap; }
}