:root {
      --brand-blue: #0197ed;
      --brand-blue-dark: #0277bd;
      --brand-blue-glow: rgba(1, 151, 237, 0.18);
      --brand-orange: #ff7c2e;
      --brand-orange-dark: #e65f12;
      --brand-orange-glow: rgba(255, 124, 46, 0.16);

      --bg: #0b1220;
      --bg-elev-1: #111a2c;
      --bg-elev-2: #16213a;
      --bg-elev-3: #1c2a47;
      --border: #1f2d4a;
      --border-strong: #2a3a5c;

      --text: #e6edf7;
      --text-dim: #9aa6bd;
      --text-mute: #6b7896;
      --text-faint: #4d5872;

      --success: #22c55e;
      --success-dim: rgba(34, 197, 94, 0.14);
      --danger: #f43f5e;
      --warning: #f59e0b;

      /* Width of the right-hand detail drawer — the app's single detail pattern, so the width belongs
         here and not on a page. A page that sets its own ends up narrower than its own form and
         pushes the whole document into horizontal scrolling. */
      --drawer-width: 720px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 14px; line-height: 1.5; }

    /* ===== Layout ===== */
    .app { min-height: 100vh; display: flex; flex-direction: column; }
    .topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.75rem 1.5rem;
      background: linear-gradient(180deg, #0d1729 0%, #0b1220 100%);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(20px);
    }
    .brand { display: flex; align-items: center; gap: 0.75rem; }
    .brand-logo { height: 28px; width: auto; }
    .brand-title { font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; }
    .brand-version { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; margin-left: 0.5rem; background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); border: 1px solid rgba(1, 151, 237, 0.3); border-radius: 999px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; font-family: 'JetBrains Mono', monospace; }
    .brand-sub { font-size: 0.75rem; color: var(--text-mute); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--border-strong); }
    /* ===== Module switcher (top-level navigation between Sales / OMS / CS / SIP / Grafik) ===== */
    .module-switcher { display: flex; gap: 0.3rem; margin-left: 1rem; padding-left: 1rem; border-left: 1px solid var(--border-strong); flex-wrap: wrap; }
    .module-btn { padding: 0.5rem 0.95rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mute); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.4rem; }
    .module-btn:hover { color: var(--text); background: var(--bg-elev-2); }
    .module-btn.active { color: white; background: linear-gradient(135deg, var(--brand-blue) 0%, #0277bd 100%); border-color: rgba(1, 151, 237, 0.6); box-shadow: 0 0 0 1px rgba(1, 151, 237, 0.2), 0 2px 8px rgba(1, 151, 237, 0.18); }
    .module-btn .module-ico { font-size: 0.95rem; line-height: 1; }
    .module-btn .module-badge-soon { font-size: 0.55rem; padding: 0.05rem 0.3rem; background: rgba(245, 158, 11, 0.15); color: var(--warning); border-radius: 999px; letter-spacing: 0.05em; }
    .module-btn .module-badge-ext { font-size: 0.7rem; color: var(--brand-blue); font-weight: 800; opacity: 0.85; }
    .module-btn:hover .module-badge-ext { opacity: 1; transform: translateY(-1px); }

    /* ===== Module placeholder (OMS / CS / SIP - coming soon) ===== */
    .module-placeholder { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
    .module-empty { max-width: 640px; text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, var(--bg-elev-1) 0%, var(--bg-elev-2) 100%); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.18); }
    .module-empty-icon { font-size: 3.5rem; line-height: 1; margin-bottom: 1rem; filter: drop-shadow(0 4px 12px rgba(1, 151, 237, 0.25)); }
    .module-empty-title { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 0.65rem; letter-spacing: 0.02em; }
    .module-empty-sub { font-size: 0.92rem; color: var(--text-mute); line-height: 1.5; margin: 0 0 1.5rem; }
    .module-empty-features { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; }
    .module-empty-feature { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; font-size: 0.78rem; color: var(--text-dim); }
    .module-empty-badge { display: inline-block; padding: 0.5rem 1.2rem; background: linear-gradient(135deg, var(--brand-orange) 0%, #c2410c 100%); color: white; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 2px 8px rgba(255, 124, 46, 0.3); }
    .topbar-right { display: flex; align-items: center; gap: 0.75rem; }
    .user-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; font-size: 0.82rem; }
    .user-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue), var(--brand-orange)); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }

    .nav-tabs { display: flex; padding: 0 1.5rem; background: #0d1729; border-bottom: 1px solid var(--border); gap: 0.25rem; }
    .nav-tab { padding: 0.85rem 1.1rem; font-size: 0.85rem; font-weight: 500; color: var(--text-mute); background: transparent; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
    .nav-tab:hover { color: var(--text-dim); }
    .nav-tab.active { color: var(--text); border-bottom-color: var(--brand-blue); }
    .nav-tab[disabled] { cursor: default; }

    .main { padding: 1.5rem; max-width: 1500px; margin: 0 auto; width: 100%; }

    /* ===== Cards ===== */
    .card { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; margin-bottom: 1.25rem; }
    .card-flat { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 14px; }
    .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
    .card-title { font-size: 0.95rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }

    /* ===== Controls bar ===== */
    .control-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
    .subtabs { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; }
    .subtab { padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); background: transparent; border: none; border-radius: 7px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 0.45rem; }
    .subtab:hover { color: var(--text); background: var(--bg-elev-3); }
    .subtab.active { background: var(--brand-blue); color: white; box-shadow: 0 4px 12px var(--brand-blue-glow); }
    .subtab-badge { background: rgba(255,255,255,0.18); padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
    .subtab:not(.active) .subtab-badge { background: var(--border-strong); color: var(--text-dim); }

    .date-pills { display: flex; gap: 0.4rem; }
    .pill { padding: 0.45rem 0.85rem; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all 0.15s; }
    .pill:hover { color: var(--text); border-color: var(--border-strong); }
    .pill.active { background: var(--bg-elev-3); color: var(--text); border-color: var(--brand-blue); }

    .filter-row { display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; align-items: center; }
    .select, .input {
      padding: 0.55rem 0.85rem;
      background: var(--bg-elev-2);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 9px;
      font-size: 0.85rem;
      min-width: 160px;
      font-family: inherit;
    }
    .select:focus, .input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-glow); }
    .input { flex: 1; min-width: 240px; }

    /* ===== Metrics ===== */
    .metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
    .metric { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.25rem; position: relative; overflow: hidden; transition: all 0.2s; }
    .metric:hover { border-color: var(--border-strong); transform: translateY(-1px); }
    .metric::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand-blue); opacity: 0.7; }
    .metric.accent::before { background: var(--brand-orange); }
    .metric-label { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 0.5rem; }
    .metric-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.15; }
    .metric-delta { font-size: 0.72rem; margin-top: 0.35rem; font-weight: 600; }
    .dash-delta { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.4rem; border-radius: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; }
    .dash-delta.pos { background: rgba(34, 197, 94, 0.18); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.35); }
    .dash-delta.neg { background: rgba(244, 63, 94, 0.18); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.4); }
    .dash-delta.neutral { background: rgba(107, 120, 150, 0.18); color: #a8b3cf; border: 1px solid rgba(107, 120, 150, 0.4); }
    .dash-cmp-mute { color: var(--text-mute); font-weight: 500; margin-left: 0.25rem; }
    /* Tworca zadania (gdy rozny od handlowca) */
    .task-creator { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.35rem; background: rgba(168, 85, 247, 0.13); color: #c084fc; border-radius: 3px; font-size: 0.66rem; font-weight: 700; }
    .task-creator-pill { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.45rem; background: rgba(168, 85, 247, 0.13); color: #c084fc; border-radius: 4px; font-size: 0.72rem; font-weight: 600; border: 1px solid rgba(168, 85, 247, 0.25); }
    .task-view-badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.45rem; background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); border-radius: 4px; font-size: 0.72rem; font-weight: 700; border: 1px solid rgba(1, 151, 237, 0.25); }
    .lang-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid transparent; }
    .lang-badge.lang-pl { background: rgba(34, 197, 94, 0.13); color: var(--success); border-color: rgba(34, 197, 94, 0.28); }
    .lang-badge.lang-en { background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); border-color: rgba(1, 151, 237, 0.28); }

    /* ===== Config edit modal - conditional rows ===== */
    #cfg-edit-modal[data-kind="status"] .cfg-edit-tasktype-only { display: none; }
    #cfg-edit-modal[data-kind="loss"] .cfg-edit-status-only,
    #cfg-edit-modal[data-kind="loss"] .cfg-edit-tasktype-only { display: none; }
    #cfg-edit-modal[data-kind="tasktype"] .cfg-edit-status-only { display: none; }
    .config-list-item-name-en { color: var(--text-mute); font-size: 0.78rem; font-style: italic; margin-left: 0.3rem; }
    /* Task file upload (modal) */
    .task-file-drop { border: 1.5px dashed rgba(107, 120, 150, 0.4); border-radius: 8px; padding: 0.85rem; background: var(--bg-elev-2); transition: border-color 0.15s, background 0.15s; cursor: pointer; }
    .task-file-drop:hover { border-color: var(--brand-blue); }
    .task-file-drop.drag-over { border-color: var(--brand-blue); border-style: solid; background: rgba(1, 151, 237, 0.08); }
    .task-file-drop-hint { display: flex; align-items: center; gap: 0.7rem; font-size: 0.82rem; color: var(--text-mute); }
    .task-file-drop-hint a:hover { opacity: 0.85; }
    .task-file-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; background: var(--bg-elev-3); border-radius: 6px; margin-bottom: 0.3rem; font-size: 0.78rem; border: 1px solid var(--border); }
    .task-file-item .file-icon { font-size: 1rem; flex-shrink: 0; }
    .task-file-item .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .task-file-item .file-size { color: var(--text-mute); font-size: 0.7rem; }
    .task-file-item .file-remove { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: 1rem; padding: 0 0.3rem; opacity: 0.7; }
    .task-file-item .file-remove:hover { opacity: 1; }
    /* Task files display (small pills) - on cards/kanban/drawer */
    .task-files-pills { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
    .task-file-pill { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.4rem; background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); border-radius: 4px; font-size: 0.66rem; font-weight: 600; border: 1px solid rgba(1, 151, 237, 0.25); cursor: pointer; max-width: 100%; overflow: hidden; }
    .task-file-pill:hover { background: rgba(1, 151, 237, 0.22); }
    .task-file-pill .pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
    .task-file-count-badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.35rem; background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); border-radius: 3px; font-size: 0.66rem; font-weight: 700; }
    /* ===== TASKS KANBAN VIEW ===== */
    .task-kanban-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
    .task-kanban-col { background: var(--bg-elev-1); border-radius: 10px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 280px; border: 1px solid var(--border); }
    .task-kanban-col.drag-over { background: rgba(1, 151, 237, 0.08); border-color: var(--brand-blue); }
    .task-kanban-col-head { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px dashed var(--border); margin-bottom: 0.2rem; }
    .task-kanban-col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .task-kanban-col-name { font-weight: 700; font-size: 0.85rem; flex: 1; }
    .task-kanban-col-count { background: rgba(107, 120, 150, 0.18); padding: 0.05rem 0.45rem; border-radius: 8px; font-size: 0.72rem; font-weight: 700; color: var(--text-mute); }
    .task-kanban-col.overdue .task-kanban-col-dot { background: var(--danger); }
    .task-kanban-col.overdue { border-left: 3px solid var(--danger); }
    .task-kanban-col.today .task-kanban-col-dot { background: var(--warning); }
    .task-kanban-col.today { border-left: 3px solid var(--warning); }
    .task-kanban-col.future .task-kanban-col-dot { background: var(--brand-blue); }
    .task-kanban-col.future { border-left: 3px solid var(--brand-blue); }
    .task-kanban-col.done .task-kanban-col-dot { background: var(--success); }
    .task-kanban-col.done { border-left: 3px solid var(--success); opacity: 0.92; }
    .task-kanban-card { background: var(--bg-elev-2); border-radius: 8px; padding: 0.65rem 0.8rem; cursor: grab; display: flex; flex-direction: column; gap: 0.35rem; border: 1px solid transparent; transition: background 0.12s; position: relative; }
    .task-kanban-card:hover { background: var(--bg-elev-3); border-color: var(--brand-blue); }
    .task-kanban-card.dragging { opacity: 0.4; cursor: grabbing; }
    .task-kanban-card.done .task-kanban-card-title { text-decoration: line-through; opacity: 0.6; }
    .task-kanban-card-title { font-weight: 600; font-size: 0.85rem; line-height: 1.35; }
    .task-kanban-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.66rem; color: var(--text-mute); align-items: center; }
    .task-kanban-card-meta .agent { font-size: 0.66rem; }
    .task-kanban-card-meta .agent-avatar { width: 16px; height: 16px; font-size: 0.55rem; }
    .task-kanban-card-customer { font-size: 0.72rem; color: var(--text); padding: 0.15rem 0.4rem; background: rgba(1, 151, 237, 0.1); border-radius: 4px; display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
    .task-kanban-card-customer:hover { background: rgba(1, 151, 237, 0.2); }
    .task-kanban-empty { padding: 1rem; text-align: center; color: var(--text-mute); font-size: 0.78rem; font-style: italic; border: 1px dashed var(--border); border-radius: 6px; }
    .task-kanban-card-actions { position: absolute; top: 0.3rem; right: 0.3rem; display: none; gap: 0.2rem; }
    .task-kanban-card:hover .task-kanban-card-actions { display: flex; }
    .task-kanban-card-actions button { background: var(--bg-elev-3); border: 1px solid var(--border); color: var(--text-mute); font-size: 0.66rem; padding: 0.1rem 0.35rem; border-radius: 3px; cursor: pointer; }
    .task-kanban-card-actions button:hover { color: var(--text); background: var(--bg-elev-2); }
    @media (max-width: 1200px) {
      .task-kanban-board { grid-template-columns: repeat(2, 1fr); }
    }
    .delta-up { color: var(--success); }
    .delta-down { color: var(--danger); }
    @media (max-width: 1100px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 640px)  { .metrics { grid-template-columns: repeat(2, 1fr); } }

    /* ===== Table ===== */
    .tbl-wrap { overflow-x: auto; border-radius: 14px; }
    table { width: 100%; border-collapse: collapse; }
    th { text-align: left; font-size: 0.7rem; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.75rem 0.9rem; background: var(--bg-elev-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
    td { padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--border); font-size: 0.86rem; vertical-align: middle; }
    tr.quote-row { cursor: pointer; transition: background 0.12s; }
    tr.quote-row:hover { background: var(--bg-elev-2); }
    tr.quote-row.selected { background: var(--bg-elev-3); }
    tr.quote-row.selected td:first-child { border-left: 3px solid var(--brand-blue); padding-left: calc(0.9rem - 3px); }
    .text-right { text-align: right; }
    .text-mute { color: var(--text-mute); }
    .text-dim { color: var(--text-dim); }

    /* ===== Badges ===== */
    .chip { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; font-size: 0.7rem; font-weight: 600; border-radius: 6px; letter-spacing: 0.02em; }
    .chip-id { background: var(--bg-elev-3); color: var(--text-dim); font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.74rem; }
    .chip-channel { background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); border: 1px solid rgba(1, 151, 237, 0.25); }
    .chip-channel.allegro { background: rgba(255, 124, 46, 0.13); color: var(--brand-orange); border-color: rgba(255, 124, 46, 0.25); }
    .chip-channel.emag { background: rgba(168, 85, 247, 0.13); color: #c084fc; border-color: rgba(168, 85, 247, 0.25); }
    .chip-channel.shopify { background: rgba(34, 197, 94, 0.13); color: #4ade80; border-color: rgba(34, 197, 94, 0.25); }
    .status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; font-size: 0.7rem; font-weight: 700; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
    .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .status-open { background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); }
    .status-converted { background: rgba(34, 197, 94, 0.15); color: var(--success); }
    .status-stale { background: rgba(245, 158, 11, 0.13); color: var(--warning); }

    .agent { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem 0.2rem 0.25rem; background: var(--bg-elev-3); border-radius: 999px; font-size: 0.76rem; }
    .agent-avatar { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue), var(--brand-orange)); display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: white; }
    .agent.me { background: rgba(255, 124, 46, 0.13); color: var(--brand-orange); border: 1px solid rgba(255, 124, 46, 0.25); }

    .pos { color: var(--success); font-weight: 600; }
    .neg { color: var(--danger); font-weight: 600; }

    /* ===== Buttons ===== */
    .btn { padding: 0.45rem 0.85rem; font-size: 0.78rem; font-weight: 600; border-radius: 8px; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: all 0.12s; }
    .btn-primary { background: var(--brand-blue); color: white; }
    .btn-primary:hover { background: var(--brand-blue-dark); }
    .btn-accent { background: var(--brand-orange); color: white; }
    .btn-accent:hover { background: var(--brand-orange-dark); }
    .btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
    .btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }
    .btn-icon { padding: 0.35rem 0.55rem; font-size: 0.9rem; line-height: 1; }

    /* ===== Reports grid ===== */
    .reports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    @media (max-width: 1100px) { .reports { grid-template-columns: 1fr; } }

    /* ===== Drawer (quote details) ===== */
    .drawer-backdrop {
      position: fixed; inset: 0; background: rgba(5, 10, 22, 0.55);
      backdrop-filter: blur(2px); z-index: 999;
      opacity: 0; pointer-events: none; transition: opacity 0.2s;
    }
    .drawer-backdrop.open { opacity: 1; pointer-events: all; }
    .drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: var(--drawer-width); max-width: calc(100vw - 1rem);
      background: var(--bg-elev-1);
      border-left: 1px solid var(--border);
      box-shadow: -20px 0 50px rgba(0,0,0,0.4);
      z-index: 1000;
      /* Vertical scrolling yes, horizontal never: the drawer is a fixed-width panel, so anything wide
         must scroll inside its own container (.tbl-wrap, pre) rather than widen the panel and drag the
         page sideways with it. */
      overflow-y: auto; overflow-x: hidden;
      transform: translateX(100%); transition: transform 0.25s ease;
      display: flex; flex-direction: column;
    }
    .drawer.open { transform: translateX(0); }
    .drawer-header {
      position: sticky; top: 0; z-index: 5;
      padding: 1rem 1.5rem;
      background: linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg-elev-1) 100%);
      border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    }
    .drawer-title { display: flex; align-items: center; gap: 0.75rem; }
    .drawer-title h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
    .drawer-body { padding: 1.5rem; }
    .drawer-section { margin-bottom: 1.75rem; }
    .drawer-section h3 { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin: 0 0 0.75rem; }

    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; padding: 1rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; }
    .info-item { display: flex; flex-direction: column; gap: 0.15rem; }
    .info-label { font-size: 0.7rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
    .info-value { font-size: 0.92rem; color: var(--text); font-weight: 500; }
    .info-value.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.85rem; }

    .items-table { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
    .items-table table { font-size: 0.82rem; }
    .items-table th { background: var(--bg-elev-3); font-size: 0.66rem; padding: 0.6rem 0.7rem; }
    .items-table td { padding: 0.7rem; }
    .product-cell { display: flex; flex-direction: column; gap: 0.15rem; }
    .product-name { color: var(--text); font-weight: 500; }
    .product-sub { font-size: 0.72rem; color: var(--text-mute); display: flex; gap: 0.4rem; align-items: center; }
    .brand-tag { padding: 0.1rem 0.4rem; background: rgba(1, 151, 237, 0.1); color: var(--brand-blue); border-radius: 4px; font-weight: 600; font-size: 0.7rem; }
    .supplier-code { padding: 0.1rem 0.4rem; background: rgba(255, 124, 46, 0.1); color: var(--brand-orange); border-radius: 4px; font-weight: 600; font-size: 0.7rem; font-family: 'JetBrains Mono', monospace; }

    /* ===== Items filter row (drawer pozycji) ===== */
    .items-filter-row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 0.6rem; }
    .items-filter-row .select-sm, .items-filter-row .input-sm { padding: 0.35rem 0.55rem; font-size: 0.78rem; }
    .items-filter-row .select-sm { min-width: 170px; max-width: 240px; flex: 0 0 auto; }
    .items-filter-row .input-sm { flex: 1 1 180px; min-width: 160px; max-width: 320px; }
    .items-filter-status { font-size: 0.72rem; color: var(--text-mute); margin-left: auto; }
    .items-filter-status.active { color: var(--brand-orange); font-weight: 600; }
    .items-row-dim { opacity: 0.32; }

    /* ===== Items filter totals (pod tabela) ===== */
    .items-filter-totals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-top: 0.6rem; padding: 0.7rem 0.85rem; background: linear-gradient(135deg, rgba(1, 151, 237, 0.06), rgba(255, 124, 46, 0.04)); border: 1px solid var(--border); border-radius: 8px; }
    .ift-cell { display: flex; flex-direction: column; gap: 0.1rem; }
    .ift-label { font-size: 0.62rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
    .ift-value { font-size: 0.85rem; font-weight: 600; color: var(--text); font-family: 'JetBrains Mono', monospace; }
    .ift-value.big { font-size: 0.95rem; font-weight: 700; color: var(--brand-blue); }
    .ift-value.pos { color: var(--success); }
    .ift-value.neg { color: var(--danger); }
    @media (max-width: 640px) { .items-filter-totals { grid-template-columns: repeat(2, 1fr); } }

    /* ===== Supplier share doughnut ===== */
    .items-supplier-share { margin-top: 0.85rem; padding: 0.85rem 0.95rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; }
    .iss-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
    .iss-title { font-size: 0.78rem; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
    .iss-sub { font-size: 0.7rem; color: var(--text-mute); }
    .iss-chart-wrap { position: relative; height: 220px; }
    .iss-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; margin-top: 0.55rem; }
    .iss-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: var(--text); padding: 0.15rem 0.45rem; background: var(--bg-elev-3); border-radius: 999px; border: 1px solid var(--border); }
    .iss-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
    .iss-legend-pct { color: var(--text-mute); font-weight: 600; margin-left: 0.15rem; }
    .iss-empty { font-size: 0.75rem; color: var(--text-mute); text-align: center; padding: 1.5rem 0.5rem; }

    .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; padding: 1rem; background: linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg-elev-3) 100%); border: 1px solid var(--border); border-radius: 10px; }
    .summary-row { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
    .summary-row:nth-last-child(-n+2) { border-bottom: none; }
    .summary-row.highlight { border-bottom: none; padding-top: 0.65rem; }
    .summary-label { color: var(--text-mute); font-size: 0.8rem; }
    .summary-value { font-size: 0.9rem; font-weight: 600; color: var(--text); }
    .summary-value.big { font-size: 1.05rem; font-weight: 700; }

    /* ===== Chart container ===== */
    .chart-wrap { height: 280px; position: relative; }

    /* ===== Empty / loader ===== */
    .empty { text-align: center; padding: 3rem 1rem; color: var(--text-mute); font-size: 0.85rem; }
    .hidden { display: none !important; }

    /* ===== Toast ===== */
    .toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.5rem; }
    .toast { padding: 0.75rem 1.1rem; background: var(--bg-elev-3); border: 1px solid var(--border-strong); border-left: 3px solid var(--brand-blue); border-radius: 10px; font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
    .toast.success { border-left-color: var(--success); }
    .toast.error { border-left-color: var(--danger); }

    /* ===== Assign modal ===== */
    .assign-list { display: flex; flex-direction: column; gap: 0.4rem; }
    .assign-option { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: all 0.12s; }
    .assign-option:hover { background: var(--bg-elev-3); border-color: var(--brand-blue); }
    .assign-option.self { border-color: rgba(255, 124, 46, 0.3); background: rgba(255, 124, 46, 0.05); }
    .self-tag { margin-left: auto; padding: 0.15rem 0.5rem; background: var(--brand-orange); color: white; border-radius: 999px; font-size: 0.65rem; font-weight: 700; }

    /* ===== Tab sections ===== */
    .tab-section.hidden { display: none; }

    /* ===== Topbar 'view as' toggle ===== */
    .topbar-toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.75rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; }
    .topbar-toggle-label { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
    .lang-switcher { display: inline-flex; padding: 0.15rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; gap: 0.1rem; }
    .lang-btn { background: transparent; border: none; color: var(--text-mute); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; transition: all 0.12s; min-width: 36px; }
    .lang-btn:hover { color: var(--text); }
    .lang-btn.active { background: var(--brand-blue); color: white; box-shadow: 0 1px 3px rgba(1, 151, 237, 0.4); }
    .select-sm { min-width: 0; padding: 0.3rem 0.6rem; font-size: 0.78rem; border-radius: 999px; background: var(--bg-elev-3); border-color: transparent; }

    /* ===== Margin columns hidden mode ===== */
    body.no-margin .margin-col,
    body.no-margin .margin-cell,
    body.no-margin .margin-block { display: none !important; }
    body.no-margin .margin-replace-grid { grid-template-columns: repeat(4, 1fr) !important; }

    /* ===== Mega button (calls) ===== */
    .btn-mega {
      padding: 2rem 3rem;
      background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-orange) 100%);
      border: none; border-radius: 18px;
      color: white; font-size: 1.15rem; font-weight: 700;
      cursor: pointer; transition: transform 0.15s;
      box-shadow: 0 12px 32px rgba(1, 151, 237, 0.3);
      letter-spacing: 0.01em;
    }
    .btn-mega:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(1, 151, 237, 0.4); }
    .btn-mega:active { transform: translateY(0); }

    /* ===== Form ===== */
    .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
    .form-field { display: flex; flex-direction: column; gap: 0.4rem; }
    .form-field label { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
    .form-field.form-field-toggle, .form-field.form-actions { grid-column: 1 / -1; }

    /* Toggle switch (margin permission) */
    .toggle-label { display: flex; gap: 0.85rem; align-items: flex-start; cursor: pointer; padding: 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; transition: border 0.15s; }
    .toggle-label:hover { border-color: var(--border-strong); }
    .toggle-label input[type="checkbox"] { display: none; }
    .toggle-switch { position: relative; flex-shrink: 0; width: 38px; height: 22px; background: var(--bg-elev-3); border-radius: 999px; transition: background 0.2s; margin-top: 2px; }
    .toggle-slider { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--text-mute); border-radius: 50%; transition: all 0.2s; }
    .toggle-label input:checked ~ .toggle-switch { background: var(--brand-blue); }
    .toggle-label input:checked ~ .toggle-switch .toggle-slider { transform: translateX(16px); background: white; }
    .toggle-title { font-size: 0.88rem; font-weight: 600; color: var(--text); }
    .toggle-sub { font-size: 0.76rem; color: var(--text-mute); margin-top: 0.15rem; line-height: 1.4; }

    .form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding-top: 0.5rem; border-top: 1px solid var(--border); }

    /* User role badges */
    .role { display: inline-flex; padding: 0.2rem 0.55rem; font-size: 0.7rem; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
    .role-admin { background: rgba(255, 124, 46, 0.13); color: var(--brand-orange); border: 1px solid rgba(255, 124, 46, 0.25); }
    .role-agent { background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); border: 1px solid rgba(1, 151, 237, 0.25); }
    .perm-yes { color: var(--success); font-weight: 700; }
    .perm-no { color: var(--text-mute); font-weight: 700; }
    .user-type-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

    /* Schemat sprzedazy */
    .scheme-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
    @media (max-width: 1000px) { .scheme-layout { grid-template-columns: 1fr; } }
    .scheme-sidebar { padding: 0.85rem; }
    .scheme-supplier-item { padding: 0.7rem 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-left: 3px solid var(--text-mute); border-radius: 9px; margin-bottom: 0.45rem; cursor: pointer; transition: all 0.12s; }
    .scheme-supplier-item:hover { border-color: var(--border-strong); transform: translateY(-1px); }
    .scheme-supplier-item.active { background: var(--bg-elev-3); border-left-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue); }
    .scheme-supplier-name { font-weight: 700; font-size: 0.88rem; color: var(--text); }
    .scheme-supplier-meta { font-size: 0.7rem; color: var(--text-mute); margin-top: 0.25rem; display: flex; gap: 0.35rem; align-items: center; }
    .scheme-supplier-badge { padding: 0.05rem 0.4rem; background: var(--bg-elev-3); color: var(--text-dim); border-radius: 999px; font-weight: 700; }
    .scheme-supplier-badge.has { background: rgba(34, 197, 94, 0.18); color: var(--success); }
    .scheme-supplier-badge.empty { color: var(--text-mute); }
    .scheme-main { display: flex; flex-direction: column; gap: 1rem; }
    .scheme-item { padding: 1rem 1.1rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 11px; margin-bottom: 0.7rem; }
    .scheme-item.active { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); }
    .scheme-item.future { border-style: dashed; opacity: 0.85; }
    .scheme-item.past { opacity: 0.62; }
    .scheme-item-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.65rem; flex-wrap: wrap; }
    .scheme-status-pill { padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
    .scheme-status-active { background: rgba(34, 197, 94, 0.18); color: var(--success); }
    .scheme-status-future { background: rgba(1, 151, 237, 0.15); color: var(--brand-blue); }
    .scheme-status-past { background: var(--bg-elev-3); color: var(--text-mute); }
    .scheme-period { font-weight: 700; font-size: 0.88rem; color: var(--text); }
    .scheme-max-disc { margin-left: auto; padding: 0.3rem 0.7rem; background: rgba(255, 124, 46, 0.13); color: var(--brand-orange); border-radius: 8px; font-weight: 800; font-size: 0.95rem; }
    .scheme-tiers { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.65rem; padding: 0.55rem 0.7rem; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 8px; }
    .scheme-tier { display: flex; gap: 0.5rem; font-size: 0.82rem; font-variant-numeric: tabular-nums; align-items: center; padding: 0.18rem 0; }
    .scheme-tier-range { color: var(--text-dim); flex: 1; }
    .scheme-tier-disc { padding: 0.1rem 0.55rem; background: var(--brand-blue); color: white; border-radius: 5px; font-weight: 700; min-width: 50px; text-align: center; }
    .scheme-note { font-size: 0.78rem; color: var(--text-dim); font-style: italic; padding: 0.45rem 0.6rem; background: var(--bg-elev-1); border: 1px solid var(--border); border-left: 3px solid var(--brand-blue); border-radius: 6px; margin-bottom: 0.55rem; }
    .scheme-actions { display: flex; gap: 0.4rem; }
    .sch-tiers-list { display: flex; flex-direction: column; gap: 0.4rem; }
    .sch-tier-row { display: flex; gap: 0.35rem; align-items: center; padding: 0.4rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 7px; }
    .sch-tier-row .input { padding: 0.35rem 0.55rem; font-size: 0.82rem; }
    .sch-tier-row .sch-tier-sep { color: var(--text-mute); font-size: 0.72rem; padding: 0 0.2rem; }
    .sch-tier-remove { background: none; border: 1px solid var(--border); color: var(--text-mute); cursor: pointer; padding: 0.35rem 0.55rem; border-radius: 5px; font-size: 0.85rem; }
    .sch-tier-remove:hover { color: var(--danger); border-color: var(--danger); }
    .sim-result { flex: 1; padding: 0.55rem 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 9px; font-size: 0.82rem; color: var(--text-mute); }
    .sim-result.has { color: var(--text); border-color: var(--brand-orange); }
    .sim-result strong { color: var(--brand-orange); font-size: 1.05rem; font-weight: 800; }

    /* Grafik pracownikow */
    .sched-table { border-collapse: collapse; font-size: 0.76rem; }
    .sched-table th { font-size: 0.66rem; padding: 0.5rem 0.45rem; text-align: center; white-space: nowrap; position: sticky; top: 0; background: var(--bg-elev-2); z-index: 5; }
    .sched-table th.sched-user-col { text-align: left; min-width: 180px; left: 0; z-index: 6; }
    .sched-table th.weekend { background: rgba(244, 63, 94, 0.08); color: var(--danger); }
    .sched-table th.today { background: rgba(1, 151, 237, 0.15); color: var(--brand-blue); }
    .sched-table td { padding: 0.4rem 0.45rem; text-align: center; border: 1px solid var(--border); }
    .sched-table td.sched-user-cell { text-align: left; padding: 0.5rem 0.7rem; position: sticky; left: 0; background: var(--bg-elev-1); z-index: 2; min-width: 180px; }
    .sched-cell { cursor: pointer; transition: background 0.12s; font-variant-numeric: tabular-nums; }
    /* Default work fallback */
    .sched-cell.work { background: rgba(34, 197, 94, 0.07); color: var(--success); font-weight: 600; }
    /* Standardowe shifty - kolor wg pory startu zmiany */
    .sched-cell.shift-morning { background: rgba(34, 197, 94, 0.14); color: #4ade80; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35); }
    .sched-cell.shift-day     { background: rgba(1, 151, 237, 0.14); color: #60a5fa; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(1, 151, 237, 0.35); }
    .sched-cell.shift-other   { background: rgba(255, 124, 46, 0.14); color: #fbbf24; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 124, 46, 0.35); }
    .sched-cell.off  { background: var(--bg-elev-2); color: var(--text-mute); }
    .sched-cell.vacation { background: rgba(245, 158, 11, 0.12); color: var(--warning); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .sched-cell.short { background: rgba(244, 63, 94, 0.18) !important; box-shadow: inset 0 0 0 2px var(--danger) !important; color: #fda4af !important; }
    .sched-cell-short { font-size: 0.62rem; font-weight: 800; color: var(--danger); margin-top: 0.1rem; line-height: 1; }
    .sched-cell.overtime { background: rgba(132, 204, 22, 0.22) !important; box-shadow: inset 0 0 0 2px #65a30d !important; color: #d9f99d !important; }
    .sched-cell-over { font-size: 0.62rem; font-weight: 800; color: #84cc16; margin-top: 0.1rem; line-height: 1; }
    .sched-cell.remote { background: rgba(168, 85, 247, 0.13); color: #c084fc; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.4); }
    .sched-cell.remote.shift-morning { background: rgba(168, 85, 247, 0.18); }
    .sched-cell.remote.shift-day     { background: rgba(168, 85, 247, 0.22); }
    .sched-cell.remote.shift-other   { background: rgba(168, 85, 247, 0.26); }
    .sched-cell.remote.short    { background: rgba(168, 85, 247, 0.25) !important; box-shadow: inset 0 0 0 2px var(--danger) !important; }
    .sched-cell.remote.overtime { background: rgba(168, 85, 247, 0.32) !important; box-shadow: inset 0 0 0 2px #65a30d !important; }
    .sched-cell-remote-tag { font-size: 0.58rem; font-weight: 800; color: #c084fc; margin-top: 0.1rem; line-height: 1; letter-spacing: 0.04em; }
    .sched-cell.holiday { background: rgba(245, 158, 11, 0.08); color: var(--warning); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
    .quick-remote { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
    .quick-remote:hover { background: rgba(168, 85, 247, 0.25); }
    .conflict-list { list-style: none; margin: 0; padding: 0; }
    .conflict-item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.65rem 0.85rem; border-radius: 8px; margin-bottom: 0.45rem; background: rgba(244, 63, 94, 0.07); border-left: 3px solid var(--danger); }
    .conflict-item.warn { background: rgba(245, 158, 11, 0.08); border-left-color: var(--warning); }
    .conflict-item.info { background: rgba(1, 151, 237, 0.08); border-left-color: var(--brand-blue); }
    .conflict-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.3; }
    .conflict-body { flex: 1; font-size: 0.82rem; line-height: 1.4; }
    .conflict-body strong { color: var(--text); }
    .conflict-empty { padding: 0.85rem; text-align: center; color: var(--success); font-size: 0.82rem; }
    .conflict-meta { font-size: 0.7rem; color: var(--text-mute); margin-top: 0.15rem; }
    /* Legenda kolorow shiftow */
    .legend-chip { display: inline-flex; align-items: center; padding: 0.25rem 0.55rem; border-radius: 5px; font-size: 0.7rem; font-weight: 700; border: 1px solid transparent; }
    .legend-chip.shift-morning { background: rgba(34, 197, 94, 0.14); color: #4ade80; border-color: rgba(34, 197, 94, 0.35); }
    .legend-chip.shift-day     { background: rgba(1, 151, 237, 0.14); color: #60a5fa; border-color: rgba(1, 151, 237, 0.35); }
    .legend-chip.shift-other   { background: rgba(255, 124, 46, 0.14); color: #fbbf24; border-color: rgba(255, 124, 46, 0.35); }
    .legend-chip.short    { background: rgba(244, 63, 94, 0.18); color: #fda4af; border-color: var(--danger); }
    .legend-chip.overtime { background: rgba(132, 204, 22, 0.22); color: #d9f99d; border-color: #65a30d; }
    .legend-chip.remote   { background: rgba(168, 85, 247, 0.18); color: #c084fc; border-color: rgba(168, 85, 247, 0.4); }
    .legend-chip.vacation { background: rgba(245, 158, 11, 0.12); color: var(--warning); border-color: rgba(245, 158, 11, 0.35); }
    .legend-chip.holiday  { background: rgba(255, 124, 46, 0.10); color: #ff9d5c; border-color: rgba(255, 124, 46, 0.30); }
    /* Lista swiat */
    .holidays-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
    .holiday-item { display: flex; gap: 0.6rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: 7px; background: rgba(255, 124, 46, 0.07); border-left: 3px solid var(--brand-orange); }
    .holiday-item.custom { background: rgba(245, 158, 11, 0.07); border-left-color: var(--warning); }
    .holiday-date { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); font-size: 0.78rem; }
    .holiday-dow { font-size: 0.62rem; font-weight: 700; color: var(--text-mute); text-transform: uppercase; }
    .holiday-label { font-size: 0.78rem; color: var(--text-mute); flex: 1; }
    .holiday-tag { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 3px; font-weight: 800; text-transform: uppercase; }
    .holiday-tag.gov { background: rgba(255, 124, 46, 0.2); color: var(--brand-orange); }
    .holiday-tag.firm { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
    .holiday-tag.ustawowe { background: rgba(1, 151, 237, 0.2); color: var(--brand-blue); }
    .holiday-item.ustawowe { background: rgba(1, 151, 237, 0.07); border-left-color: var(--brand-blue); }
    /* ===== OPINIE GOOGLE ===== */
    .rev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0.85rem; }
    .rev-card { background: var(--bg-elev-2); border-radius: 10px; padding: 0.9rem 1rem; border-left: 4px solid var(--brand-orange); display: flex; flex-direction: column; gap: 0.5rem; position: relative; transition: background 0.12s; }
    .rev-card:hover { background: var(--bg-elev-3); }
    .rev-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .rev-card-customer { font-weight: 700; color: var(--text); font-size: 0.92rem; }
    .rev-card-date { font-size: 0.7rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
    .rev-stars { display: inline-flex; gap: 0.05rem; font-size: 0.9rem; line-height: 1; letter-spacing: 0.05em; }
    .rev-stars .star-on { color: #fbbf24; }
    .rev-stars .star-off { color: rgba(107, 120, 150, 0.35); }
    .rev-card-text { font-size: 0.85rem; line-height: 1.45; color: var(--text); font-style: italic; padding: 0.4rem 0; border-top: 1px dashed rgba(107, 120, 150, 0.18); border-bottom: 1px dashed rgba(107, 120, 150, 0.18); }
    .rev-card-meta { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; font-size: 0.75rem; }
    .rev-card-meta .agent { font-size: 0.72rem; }
    .rev-card-attachments { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.2rem; }
    .rev-card-file { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; background: rgba(1, 151, 237, 0.12); color: var(--brand-blue); border-radius: 4px; font-size: 0.7rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(1, 151, 237, 0.25); }
    .rev-card-file:hover { background: rgba(1, 151, 237, 0.22); }
    .rev-card-actions { display: flex; gap: 0.3rem; margin-left: auto; }
    .rev-card-del { background: transparent; border: 1px solid rgba(244, 63, 94, 0.3); color: var(--danger); padding: 0.15rem 0.45rem; font-size: 0.7rem; border-radius: 4px; cursor: pointer; }
    .rev-card-del:hover { background: rgba(244, 63, 94, 0.12); }
    .rev-card-link { font-size: 0.7rem; color: var(--brand-blue); text-decoration: none; }
    .rev-card-link:hover { text-decoration: underline; }
    .rev-card-quote { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.4rem; background: rgba(168, 85, 247, 0.13); color: #c084fc; border-radius: 3px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; }
    /* Rating input in modal */
    .rating-input { display: inline-flex; gap: 0.15rem; align-items: center; padding: 0.4rem 0.6rem; background: var(--bg-elev-2); border-radius: 8px; border: 1px solid var(--border); }
    .rating-star { background: transparent; border: none; font-size: 1.6rem; cursor: pointer; color: rgba(107, 120, 150, 0.35); transition: color 0.12s, transform 0.08s; padding: 0 0.1rem; line-height: 1; }
    .rating-star:hover { color: #fbbf24; transform: scale(1.15); }
    .rating-star.on { color: #fbbf24; }
    .rating-label { margin-left: 0.6rem; font-size: 0.78rem; color: var(--text-mute); }
    /* File upload area */
    .file-upload-area { border: 1.5px dashed rgba(107, 120, 150, 0.4); border-radius: 8px; padding: 0.7rem; background: var(--bg-elev-2); }
    .file-upload-area:hover { border-color: var(--brand-blue); }
    .file-upload-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--bg-elev-3); border-radius: 6px; margin-bottom: 0.3rem; font-size: 0.78rem; }
    .file-upload-item .file-name { flex: 1; }
    .file-upload-item .file-size { color: var(--text-mute); font-size: 0.7rem; }
    .file-upload-item .file-remove { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: 1rem; padding: 0 0.3rem; }
    /* Image preview modal (lightbox) */
    .image-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 2rem; cursor: pointer; }
    .image-lightbox.open { display: flex; }
    .image-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
    .image-lightbox-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; font-size: 1.5rem; padding: 0.4rem 0.8rem; border-radius: 6px; cursor: pointer; }
    /* Konfiguracja dni wolnych */
    .vac-list-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; background: var(--bg-elev-2); border-radius: 7px; margin-bottom: 0.4rem; }
    .vac-list-item .vac-date { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 110px; }
    .vac-list-item .vac-label { flex: 1; color: var(--text-mute); }
    .vac-empty { padding: 0.85rem; text-align: center; color: var(--text-mute); font-size: 0.82rem; }
    .sched-quick-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
    .sched-quick-vacation { background: rgba(245, 158, 11, 0.15); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.35); }
    .sched-quick-vacation:hover { background: rgba(245, 158, 11, 0.25); }
    .sched-current-state { padding: 0.55rem 0.7rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; font-size: 0.82rem; color: var(--text-dim); }
    .sched-current-state strong { color: var(--text); }
    .sched-cell.weekend { background: rgba(244, 63, 94, 0.06); }
    .sched-cell.today { box-shadow: inset 0 0 0 2px var(--brand-blue); }
    .sched-cell.editable:hover { background: var(--bg-elev-3); border-color: var(--brand-blue); }
    .sched-cell.readonly { cursor: not-allowed; opacity: 0.55; }
    .sched-day-num { font-size: 1.1em; font-weight: 700; }
    .sched-day-name { display: block; font-size: 0.72em; color: var(--text-mute); margin-top: 0.1rem; }

    /* Notes list (na dole drawera) */
    .drawer-section-notes { background: var(--bg-elev-2); border-radius: 12px; padding: 1rem 1.1rem; margin: 1.5rem -0.25rem 0; border: 1px solid var(--border); }
    .drawer-section-notes h3 { margin-top: 0; }
    .notes-list { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 0.85rem; }
    .note-item { padding: 0.7rem 0.85rem; background: var(--bg-elev-1); border: 1px solid var(--border); border-left: 3px solid var(--brand-blue); border-radius: 8px; }
    .note-item-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; font-size: 0.72rem; color: var(--text-mute); }
    .note-item-author { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--text-dim); }
    .note-item-author .agent-avatar { width: 16px; height: 16px; font-size: 0.55rem; }
    .note-item-time { color: var(--text-mute); }
    .note-item-delete { background: none; border: none; color: var(--text-mute); cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.85rem; }
    .note-item-delete:hover { color: var(--danger); background: rgba(244, 63, 94, 0.08); }
    .note-item-text { font-size: 0.86rem; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
    .notes-empty { padding: 0.85rem; text-align: center; color: var(--text-mute); font-size: 0.82rem; background: var(--bg-elev-1); border: 1px dashed var(--border); border-radius: 8px; margin-bottom: 0.85rem; }
    .add-note-form { padding-top: 0.85rem; border-top: 1px solid var(--border); }

    /* Files (drop + list) */
    .files-drop { padding: 1.1rem; background: var(--bg-elev-2); border: 2px dashed var(--border-strong); border-radius: 10px; text-align: center; margin-bottom: 0.75rem; transition: all 0.15s; }
    .files-drop.drag-over { border-color: var(--brand-blue); background: rgba(1, 151, 237, 0.06); }
    .files-list { display: flex; flex-direction: column; gap: 0.4rem; }
    .file-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; }
    .file-icon { font-size: 1.15rem; flex-shrink: 0; }
    .file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
    .file-name { font-size: 0.86rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-meta { font-size: 0.72rem; color: var(--text-mute); display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .file-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
    .file-actions button { background: none; border: 1px solid var(--border); color: var(--text-mute); cursor: pointer; padding: 0.3rem 0.55rem; border-radius: 6px; font-size: 0.72rem; }
    .file-actions button:hover { color: var(--text); border-color: var(--border-strong); }
    .file-actions button.danger:hover { color: var(--danger); border-color: var(--danger); }

    /* Contact method badges in main table */
    .ts-phone { display: inline-flex; gap: 0.2rem; align-items: center; padding: 0.1rem 0.42rem; background: rgba(34, 197, 94, 0.12); color: #4ade80; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
    .ts-email { display: inline-flex; gap: 0.2rem; align-items: center; padding: 0.1rem 0.42rem; background: rgba(168, 85, 247, 0.12); color: #c084fc; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }

    /* Warehouse: kafelki dostawcow (filtry) */
    .wh-suppliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; margin-top: 0.85rem; }
    .wh-supplier {
      background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 11px;
      padding: 0.85rem 1rem; cursor: pointer; transition: all 0.12s;
      position: relative; overflow: hidden;
    }
    .wh-supplier::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: currentColor; }
    .wh-supplier:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
    .wh-supplier.active { border-color: currentColor; box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 6px 20px rgba(0,0,0,0.35); }
    .wh-sup-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
    .wh-sup-name { font-weight: 800; font-size: 0.95rem; color: var(--text); letter-spacing: 0.01em; }
    .wh-sup-source-badge {
      font-size: 0.62rem; padding: 0.18rem 0.5rem; border-radius: 999px; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .wh-sup-source-xml { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
    .wh-sup-source-api { background: rgba(1, 151, 237, 0.2); color: var(--brand-blue); }
    .wh-sup-source-ftp { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
    .wh-sup-source-web { background: rgba(245, 158, 11, 0.18); color: var(--warning); }
    .wh-sup-meta { display: flex; gap: 0.35rem; flex-wrap: wrap; font-size: 0.7rem; color: var(--text-mute); margin-bottom: 0.55rem; }
    .wh-sup-meta span { padding: 0.05rem 0.4rem; background: var(--bg-elev-1); border-radius: 4px; }
    .wh-sup-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-mute); }
    .wh-sup-row strong { color: var(--text); font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }

    /* Generic sortable column header (warehouse + quotes) */
    th.sortable { cursor: pointer; user-select: none; transition: background 0.12s, color 0.12s; }
    th.sortable:hover { color: var(--text); background: var(--bg-elev-3); }
    th.sortable::after { content: ' \2195'; opacity: 0.25; margin-left: 0.25rem; font-size: 0.85em; }
    th.sortable.sort-asc::after { content: ' \25B2'; opacity: 1; color: var(--brand-blue); }
    th.sortable.sort-desc::after { content: ' \25BC'; opacity: 1; color: var(--brand-blue); }
    th.sortable.sort-asc, th.sortable.sort-desc { color: var(--text); }

    /* Warehouse: kompaktowa tabela magazynu */
    .wh-table { font-size: 0.82rem; }
    .wh-table th { font-size: 0.66rem; padding: 0.55rem 0.65rem; white-space: nowrap; }
    .wh-table td { padding: 0.55rem 0.65rem; vertical-align: middle; }
    .wh-table td.num, .wh-table th.text-right { text-align: right; font-variant-numeric: tabular-nums; }
    .wh-name { max-width: 280px; }
    .wh-mono { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.78rem; color: var(--text-dim); }
    .wh-edit-pencil { display: inline-block; margin-left: 0.35rem; color: var(--text-mute); cursor: pointer; opacity: 0.5; transition: opacity 0.15s; font-size: 0.85rem; }
    .wh-edit-pencil:hover { opacity: 1; color: var(--brand-blue); }
    .wh-sup-name-cell { font-weight: 700; font-size: 0.78rem; }

    /* Kanban board */
    .kanban-board {
      display: flex; gap: 0.85rem;
      overflow-x: auto; overflow-y: visible;
      padding: 0.25rem 0.25rem 1rem;
      min-height: 540px;
      align-items: flex-start;
    }
    .kanban-col {
      flex-shrink: 0;
      width: 310px;
      background: var(--bg-elev-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex; flex-direction: column;
      max-height: calc(100vh - 240px);
      transition: all 0.15s;
    }
    .kanban-col.drag-over { border-color: var(--brand-blue); box-shadow: 0 0 0 2px var(--brand-blue-glow); background: var(--bg-elev-2); }
    .kanban-col-head {
      padding: 0.8rem 0.95rem 0.7rem;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 0.6rem;
      border-top: 3px solid currentColor;
      border-radius: 12px 12px 0 0;
    }
    .kanban-col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .kanban-col-name { flex: 1; font-weight: 700; font-size: 0.85rem; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
    .kanban-col-count { background: var(--bg-elev-3); color: var(--text-dim); padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; }
    .kanban-col-list {
      padding: 0.55rem;
      display: flex; flex-direction: column; gap: 0.5rem;
      overflow-y: auto;
      flex: 1;
      min-height: 80px;
    }
    .kanban-card {
      background: var(--bg-elev-2);
      border: 1px solid var(--border);
      border-left: 3px solid currentColor;
      border-radius: 9px;
      padding: 0.65rem 0.75rem;
      cursor: grab;
      transition: transform 0.12s, box-shadow 0.12s, border 0.12s;
    }
    .kanban-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
    .kanban-card:active { cursor: grabbing; }
    .kanban-card.dragging { opacity: 0.4; transform: rotate(2deg); }
    .kanban-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; }
    .kanban-card-customer { font-weight: 600; font-size: 0.86rem; line-height: 1.35; color: var(--text); }
    .kanban-card-value { font-weight: 700; color: var(--text); font-size: 0.82rem; white-space: nowrap; }
    .kanban-card-meta { display: flex; gap: 0.4rem; align-items: center; font-size: 0.7rem; color: var(--text-mute); margin-top: 0.5rem; flex-wrap: wrap; }
    .kanban-card-stats { display: flex; gap: 0.45rem; margin-left: auto; }
    .kanban-card-stats span { display: inline-flex; gap: 0.2rem; align-items: center; padding: 0.05rem 0.4rem; background: var(--bg-elev-3); border-radius: 4px; font-weight: 600; color: var(--text-dim); }
    .kanban-empty { padding: 1.5rem 0.5rem; text-align: center; color: var(--text-mute); font-size: 0.78rem; font-style: italic; border: 1px dashed var(--border); border-radius: 8px; }
    .kanban-col-list.drag-over { background: rgba(1, 151, 237, 0.05); border-radius: 6px; }

    /* Tabela: wartosc per dostawca x status */
    .sup-status-table { font-size: 0.86rem; }
    .sup-status-table th { font-size: 0.66rem; padding: 0.55rem 0.7rem; white-space: nowrap; }
    .sup-status-table td { padding: 0.6rem 0.7rem; }
    .sup-status-table tfoot td { padding: 0.65rem 0.7rem; border-top: 2px solid var(--border-strong); font-weight: 700; background: var(--bg-elev-2); }
    .sup-status-header-col { display: inline-flex; align-items: center; gap: 0.35rem; }
    .sup-status-header-dot { width: 7px; height: 7px; border-radius: 50%; }
    .sup-status-cell { font-variant-numeric: tabular-nums; }
    .sup-status-cell.zero { color: var(--text-mute); opacity: 0.55; }
    .sup-status-cell.has-value { color: var(--text); font-weight: 600; }

    /* Alt block (drawer): grupa ofert / oznaczenie alternatywnej */
    .alt-block { padding: 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; }
    .alt-empty { display: flex; gap: 0.65rem; align-items: center; }
    .alt-empty button { white-space: nowrap; }
    .alt-state { display: flex; flex-direction: column; gap: 0.7rem; }
    .alt-state-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
    .alt-tag-big { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
    .alt-tag-alternative { background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); }
    .alt-tag-primary { background: rgba(34, 197, 94, 0.13); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.3); }
    .alt-linked-list { display: flex; flex-direction: column; gap: 0.4rem; }
    .alt-linked-item { display: flex; gap: 0.6rem; align-items: center; padding: 0.55rem 0.7rem; background: var(--bg-elev-1); border: 1px solid var(--border); border-left: 3px solid #c084fc; border-radius: 8px; cursor: pointer; transition: border 0.15s, background 0.15s; }
    .alt-linked-item.primary { border-left-color: var(--success); }
    .alt-linked-item:hover { background: var(--bg-elev-3); border-color: var(--border-strong); }
    /* ===== TREE LAYOUT dla grupy ofert alternatywnych ===== */
    .alt-tree { display: flex; flex-direction: column; margin-top: 0.4rem; }
    .alt-tree-primary {
      display: flex; gap: 0.7rem; align-items: center;
      padding: 0.8rem 0.9rem;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.02));
      border: 1.5px solid rgba(34, 197, 94, 0.4);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s;
      position: relative;
      z-index: 1;
    }
    .alt-tree-primary:hover { background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.05)); border-color: var(--success); transform: translateX(2px); }
    .alt-tree-primary.is-current { box-shadow: 0 0 0 2px var(--success), 0 0 14px rgba(34, 197, 94, 0.25); }
    .alt-tree-children { position: relative; padding-left: 1.75rem; margin-top: 0; }
    /* Pionowa kreska lacznika */
    .alt-tree-children::before {
      content: '';
      position: absolute;
      left: 0.7rem;
      top: -0.4rem;
      bottom: 1.5rem;
      width: 2px;
      background: linear-gradient(to bottom, rgba(168, 85, 247, 0.5), rgba(168, 85, 247, 0.15));
    }
    .alt-tree-child {
      position: relative;
      margin-top: 0.5rem;
    }
    /* Pozioma kreska (├─ lub └─) */
    .alt-tree-child::before {
      content: '';
      position: absolute;
      left: -1.05rem;
      top: 1.4rem;
      width: 0.95rem;
      height: 2px;
      background: rgba(168, 85, 247, 0.5);
    }
    .alt-tree-child:last-child::after {
      /* Maskuje kawalek pionowej kreski ponizej ostatniego dziecka (└─ zamiast ├─) */
      content: '';
      position: absolute;
      left: -1.05rem;
      top: 1.42rem;
      bottom: -0.5rem;
      width: 2px;
      background: var(--bg-elev-2);
    }
    .alt-tree-child-card {
      display: flex; gap: 0.6rem; align-items: center;
      padding: 0.65rem 0.85rem;
      background: var(--bg-elev-1);
      border: 1px solid rgba(168, 85, 247, 0.25);
      border-left: 3px solid #c084fc;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .alt-tree-child-card:hover { background: var(--bg-elev-3); border-color: #c084fc; transform: translateX(2px); }
    .alt-tree-child-card.is-current { box-shadow: 0 0 0 2px #c084fc, 0 0 14px rgba(168, 85, 247, 0.25); }
    .alt-tree-badge { padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
    .alt-tree-badge.primary { background: rgba(34, 197, 94, 0.22); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.4); }
    .alt-tree-badge.alt { background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
    .alt-tree-badge.winner { background: rgba(251, 191, 36, 0.22); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); margin-left: 0.25rem; }
    .alt-tree-info { flex: 1; min-width: 0; }
    .alt-tree-customer { font-weight: 700; color: var(--text); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; }
    .alt-tree-meta { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; font-size: 0.7rem; color: var(--text-mute); margin-top: 0.2rem; }
    .alt-tree-meta .alt-linked-id { background: var(--bg-elev-3); padding: 0.1rem 0.4rem; border-radius: 3px; font-family: ui-monospace, monospace; }
    .alt-tree-value { font-weight: 700; color: var(--text); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
    .alt-tree-current-marker { font-size: 0.6rem; font-weight: 800; color: var(--brand-blue); letter-spacing: 0.05em; }
    .alt-tree-promote-btn { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); color: #4ade80; font-size: 0.85rem; padding: 0.3rem 0.5rem; border-radius: 6px; cursor: pointer; opacity: 0.7; transition: all 0.12s; flex-shrink: 0; }
    .alt-tree-child:hover .alt-tree-promote-btn { opacity: 1; }
    .alt-tree-promote-btn:hover { background: rgba(34, 197, 94, 0.25); border-color: var(--success); transform: scale(1.1); }
    .alt-linked-info { flex: 1; min-width: 0; }
    .alt-linked-id { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--text-dim); font-weight: 700; }
    .alt-linked-meta { font-size: 0.72rem; color: var(--text-mute); display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.1rem; }
    .alt-linked-value { font-size: 0.86rem; font-weight: 700; color: var(--text); white-space: nowrap; }

    /* Inline search dropdown - reuse z quote search */
    .alt-search-wrap { position: relative; flex: 1; }
    .alt-search-results { position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--bg-elev-1); border: 1px solid var(--border-strong); border-radius: 9px; z-index: 50; box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
    .alt-search-results.hidden { display: none; }

    /* Tag w tabeli / kanbanie */
    .quote-alt-tag { display: inline-flex; padding: 0.05rem 0.4rem; background: rgba(168, 85, 247, 0.18); color: #c084fc; border-radius: 4px; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 0.3rem; }
    .quote-alt-link-icon { color: #c084fc; font-size: 0.85rem; cursor: help; margin-left: 0.25rem; }
    .alt-inherit-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.78rem; flex-wrap: wrap; }
    .alt-inherit-banner.inherited { background: rgba(1, 151, 237, 0.08); border-left: 3px solid var(--brand-blue); color: var(--text); }
    .alt-inherit-banner.broken { background: rgba(245, 158, 11, 0.10); border-left: 3px solid var(--warning); color: var(--text); }
    .alt-winner-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 6px; font-size: 0.82rem; font-weight: 600; flex-wrap: wrap; }
    .alt-winner-banner.self { background: rgba(34, 197, 94, 0.13); border-left: 3px solid var(--success); color: #86efac; }
    .alt-winner-banner.other { background: rgba(132, 204, 22, 0.10); border-left: 3px solid #65a30d; color: #bef264; }
    .alt-winner-banner a { color: inherit; text-decoration: underline; }
    .order-id-row { display: inline-flex; align-items: center; gap: 0.4rem; }
    .order-id-text { font-weight: 700; color: var(--text); }
    .order-id-badge { display: inline-flex; padding: 0.05rem 0.35rem; border-radius: 3px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; }
    .order-id-badge.system { background: rgba(1, 151, 237, 0.18); color: var(--brand-blue); border: 1px solid rgba(1, 151, 237, 0.35); }
    .order-id-badge.manual { background: rgba(245, 158, 11, 0.18); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.4); }
    .group-won-badge { display: inline-flex; align-items: center; padding: 0.05rem 0.4rem; background: rgba(34, 197, 94, 0.18); color: #86efac; border-radius: 3px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; margin-left: 0.3rem; }
    .group-won-badge.winner { background: rgba(34, 197, 94, 0.35); color: #d9f99d; }
    .alt-expand-btn { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.45rem; background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 4px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; margin-left: 0.3rem; transition: background 0.12s; }
    .alt-expand-btn:hover { background: rgba(168, 85, 247, 0.22); }
    .alt-expand-btn.open { background: rgba(168, 85, 247, 0.28); }
    .alt-row-indent { color: #c084fc; font-size: 0.95rem; margin-right: 0.25rem; display: inline-block; transform: translateY(-1px); }
    tr.quote-row.is-alternative { background: rgba(168, 85, 247, 0.04); }
    tr.quote-row.is-alternative td:first-child { padding-left: 1.4rem; }
    /* Alternatywne wiersze - lekko stonowane */
    tr.quote-row.is-alternative td:nth-child(5),
    tr.quote-row.is-alternative td:nth-child(6),
    tr.quote-row.is-alternative td:nth-child(7) { opacity: 0.55; }
    tr.quote-row.has-overdue td:first-child { border-left: 3px solid var(--danger); padding-left: calc(0.9rem - 3px); }
    tr.quote-row.has-overdue { background: rgba(244, 63, 94, 0.04); }
    tr.quote-row.has-overdue:hover { background: rgba(244, 63, 94, 0.09); }
    .kanban-card.is-alternative { background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), var(--bg-elev-2) 60%); border-left-style: dashed; }
    .kanban-card.is-alternative .kanban-card-value { opacity: 0.55; }
    /* Kanban tree grouping (primary + nested alts) */
    .kanban-alt-group { display: flex; flex-direction: column; margin-bottom: 0.5rem; }
    .kanban-alt-children { position: relative; padding-left: 1.3rem; margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
    .kanban-alt-children::before {
      content: '';
      position: absolute;
      left: 0.45rem;
      top: -0.3rem;
      bottom: 1.6rem;
      width: 2px;
      background: linear-gradient(to bottom, rgba(168, 85, 247, 0.6), rgba(168, 85, 247, 0.2));
    }
    .kanban-alt-child { position: relative; }
    .kanban-alt-child::before {
      content: '';
      position: absolute;
      left: -0.85rem;
      top: 1.2rem;
      width: 0.85rem;
      height: 2px;
      background: rgba(168, 85, 247, 0.55);
    }
    .kanban-alt-child:last-child::after {
      content: '';
      position: absolute;
      left: -0.85rem;
      top: 1.25rem;
      bottom: -0.5rem;
      width: 2px;
      background: var(--bg-elev-1);
    }

    /* Audit log badges */
    .log-type-badge { display: inline-flex; padding: 0.18rem 0.55rem; border-radius: 5px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
    .log-type-quote_created { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
    .log-type-status_changed { background: rgba(1, 151, 237, 0.15); color: var(--brand-blue); }
    .log-type-flag_set, .log-type-flag_cleared { background: rgba(244, 63, 94, 0.13); color: var(--danger); }
    .log-type-task_created { background: rgba(34, 197, 94, 0.13); color: #4ade80; }
    .log-type-task_completed { background: rgba(34, 197, 94, 0.2); color: var(--success); }
    .log-type-task_uncompleted { background: rgba(245, 158, 11, 0.13); color: var(--warning); }
    .log-type-task_edited { background: rgba(168, 85, 247, 0.13); color: #c084fc; }
    .log-type-task_deleted { background: rgba(244, 63, 94, 0.2); color: var(--danger); }
    .log-type-alternative_linked, .log-type-alternative_unlinked { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
    .log-details { font-size: 0.78rem; color: var(--text-dim); max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .log-time-cell { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.78rem; white-space: nowrap; }

    /* Status history list (drawer) */
    .status-history-list { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; }
    .status-history-item { display: flex; gap: 0.75rem; align-items: center; padding: 0.55rem 0.7rem; background: var(--bg-elev-1); border: 1px solid var(--border); border-left: 3px solid currentColor; border-radius: 8px; font-size: 0.82rem; }
    .status-history-item.initial { border-left-color: var(--text-mute); color: var(--text-mute); }
    .sh-arrow { color: var(--text-mute); font-size: 0.7rem; flex-shrink: 0; }
    .sh-time { font-size: 0.72rem; color: var(--text-mute); flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .sh-user { font-size: 0.74rem; color: var(--text-dim); flex-shrink: 0; }
    .sh-note { font-size: 0.74rem; color: var(--text-dim); font-style: italic; flex: 1; min-width: 0; }
    .sh-status-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

    /* Deleted task w mini-liscie */
    .task-mini.deleted { opacity: 0.5; border-left-color: var(--text-mute); }
    .task-mini.deleted .task-mini-title { text-decoration: line-through; }
    .task-deleted-tag { font-size: 0.6rem; padding: 0.05rem 0.4rem; background: rgba(244, 63, 94, 0.13); color: var(--danger); border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

    /* Drawer: przycisk flagi w naglowku */
    .d-flag-btn.flagged {
      background: rgba(244, 63, 94, 0.15);
      color: var(--danger);
      border-color: var(--danger);
    }
    .d-flag-btn.flagged:hover { background: rgba(244, 63, 94, 0.25); }

    /* Kanban: flaga w karcie */
    .kanban-card-flag {
      background: none; border: none; cursor: pointer; padding: 0.1rem 0.25rem;
      font-size: 0.9rem; opacity: 0.25; transition: opacity 0.15s, transform 0.15s;
      color: var(--text-mute); line-height: 1;
    }
    .kanban-card-flag:hover { opacity: 0.85; transform: scale(1.15); }
    .kanban-card-flag.active { opacity: 1; color: var(--danger); }
    .kanban-card.flagged {
      border: 1px solid var(--danger);
      box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.15), 0 4px 12px rgba(0,0,0,0.3);
      background: linear-gradient(135deg, rgba(244, 63, 94, 0.06), var(--bg-elev-2) 60%);
    }
    .kanban-card.flagged .kanban-card-customer { color: var(--text); }

    /* Kanban: toggle filtry (zaległe, oflagowane) */
    .kanban-toggle.active {
      background: rgba(244, 63, 94, 0.15);
      color: var(--danger);
      border-color: var(--danger);
    }
    .kanban-toggle#kanban-toggle-overdue.active {
      background: rgba(245, 158, 11, 0.15);
      color: var(--warning);
      border-color: var(--warning);
    }
    .kanban-toggle .subtab-badge {
      margin-left: 0.4rem; background: rgba(255,255,255,0.12); color: inherit; font-weight: 700; padding: 0.05rem 0.4rem;
    }
    .kanban-card-overdue-dot {
      display: inline-flex; gap: 0.2rem; align-items: center;
      padding: 0.05rem 0.4rem; background: rgba(245, 158, 11, 0.15); color: var(--warning);
      border-radius: 4px; font-weight: 700;
    }

    /* Loss reasons table - mini horizontal bar */
    .loss-bar { width: 100%; height: 10px; background: var(--bg-elev-3); border-radius: 5px; overflow: hidden; min-width: 80px; }
    .loss-bar-fill { height: 100%; background: linear-gradient(90deg, var(--danger), #fb7185); border-radius: 5px; transition: width 0.25s; }

    /* View toggle (kafelki / lista) */
    .view-toggle { display: inline-flex; padding: 0.2rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; gap: 0.2rem; }
    .view-toggle-btn { padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 600; color: var(--text-dim); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: all 0.12s; font-family: inherit; }
    .view-toggle-btn:hover { color: var(--text); }
    .view-toggle-btn.active { background: var(--brand-blue); color: white; box-shadow: 0 2px 8px var(--brand-blue-glow); }

    /* Task table - status pill kropki w komorce */
    .task-row-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; font-size: 0.7rem; font-weight: 700; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
    .task-row-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .task-row-note-cell { max-width: 260px; font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Custom date range row (Dostawcy tab) */
    .custom-range-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.75rem; padding: 0.75rem; background: var(--bg-elev-2); border: 1px solid var(--brand-blue); border-radius: 10px; flex-wrap: wrap; }
    .custom-range-label { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
    .custom-range-row .input { min-width: 0; padding: 0.45rem 0.6rem; }

    /* Supplier status mini-bar (rozklad statusow w tabeli) */
    .sup-status-bar { display: flex; height: 18px; min-width: 200px; border-radius: 4px; overflow: hidden; background: var(--bg-elev-3); border: 1px solid var(--border); }
    .sup-status-seg { height: 100%; transition: opacity 0.15s; cursor: help; }
    .sup-status-seg:hover { opacity: 0.7; }

    /* Quote searchable dropdown */
    .quote-search-wrap { position: relative; }
    .quote-search-results {
      position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0;
      max-height: 280px; overflow-y: auto;
      background: var(--bg-elev-2);
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      z-index: 50;
      box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    }
    .quote-search-result {
      padding: 0.6rem 0.8rem;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.1s;
    }
    .quote-search-result:last-child { border-bottom: none; }
    .quote-search-result:hover, .quote-search-result.active { background: var(--bg-elev-3); }
    .quote-search-result.empty { cursor: default; color: var(--text-mute); font-style: italic; }
    .qsr-row1 { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.2rem; }
    .qsr-id { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--brand-blue); font-weight: 700; }
    .qsr-name { font-size: 0.88rem; font-weight: 600; color: var(--text); flex: 1; }
    .qsr-row2 { display: flex; gap: 0.5rem; align-items: center; font-size: 0.74rem; color: var(--text-mute); flex-wrap: wrap; }
    .qsr-email { color: var(--text-dim); }
    .qsr-match { background: rgba(255, 124, 46, 0.25); color: var(--brand-orange); padding: 0 2px; border-radius: 2px; font-weight: 700; }

    .quote-search-selected {
      margin-top: 0.5rem;
      padding: 0.7rem 0.9rem;
      background: rgba(1, 151, 237, 0.08);
      border: 1px solid var(--brand-blue);
      border-radius: 10px;
      display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    }
    .qss-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
    .qss-clear { background: none; border: 1px solid var(--border); color: var(--text-mute); cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.9rem; flex-shrink: 0; }
    .qss-clear:hover { color: var(--danger); border-color: var(--danger); }

    /* Add task form */
    .task-form { display: flex; flex-direction: column; gap: 1rem; }
    .task-form .form-field { display: flex; flex-direction: column; gap: 0.4rem; }
    .task-form label { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
    /* Wraps instead of overflowing, and the children may shrink: a row of fields inside a fixed-width
       drawer must never be the thing that decides the drawer is too narrow. */
    .form-field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
    .form-field-row > .form-field { min-width: 0; }
    .btn-sm-compact { font-size: 0.72rem !important; padding: 0.3rem 0.7rem !important; font-weight: 600; }
    .drawer-section h3.drawer-section-with-action { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
    .drawer-section h3.drawer-section-with-action span { font-size: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }

    /* Tasks summary cell in quotes table */
    .tasks-summary { display: inline-flex; gap: 0.45rem; align-items: center; padding: 0.22rem 0.55rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; font-size: 0.78rem; }
    .tasks-summary.has-overdue { border-color: rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.08); }
    .ts-total { color: var(--text); font-weight: 600; }
    .ts-total .ts-of { color: var(--text-mute); font-weight: 500; }
    .tasks-summary.has-overdue .ts-total strong { color: var(--danger); }
    .ts-contact { display: inline-flex; gap: 0.2rem; align-items: center; padding: 0.1rem 0.42rem; background: rgba(255, 124, 46, 0.13); color: var(--brand-orange); border-radius: 999px; font-size: 0.7rem; font-weight: 700; }

    /* Task type chip (in drawer + cards) */
    .task-type-tag { padding: 0.1rem 0.45rem; background: var(--bg-elev-3); color: var(--text-dim); border-radius: 5px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
    .task-type-tag.contact { background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); }

    /* Nav badge */
    .nav-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; background: var(--brand-orange); color: white; border-radius: 999px; font-size: 0.68rem; font-weight: 700; }
    .nav-tab:not(.active) .nav-badge { background: var(--bg-elev-3); color: var(--text-dim); }

    /* ===== Kanban board (quotes by status) ===== */
    .kanban-board { display: flex; gap: 0.85rem; overflow-x: auto; overflow-y: visible; padding: 0.25rem 0.25rem 1rem; min-height: 540px; align-items: flex-start; }
    .kanban-col { flex-shrink: 0; width: 310px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 260px); transition: all 0.15s; }
    .kanban-col.drag-over { border-color: var(--brand-blue); box-shadow: 0 0 0 2px var(--brand-blue-glow); background: var(--bg-elev-2); }
    .kanban-col-head { padding: 0.8rem 0.95rem 0.7rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.6rem; border-top: 3px solid currentColor; border-radius: 12px 12px 0 0; }
    .kanban-col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .kanban-col-name { flex: 1; font-weight: 700; font-size: 0.85rem; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
    .kanban-col-count { background: var(--bg-elev-3); color: var(--text-dim); padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; }
    .kanban-col-sum { padding: 0.4rem 0.95rem; font-size: 0.72rem; color: var(--text-mute); border-bottom: 1px solid var(--border); }
    .kanban-col-sum strong { color: var(--text); }
    .kanban-col-list { padding: 0.55rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; flex: 1; min-height: 80px; }
    .kanban-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-left: 3px solid currentColor; border-radius: 9px; padding: 0.65rem 0.75rem; cursor: grab; transition: transform 0.12s, box-shadow 0.12s, border 0.12s; }
    .kanban-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
    .kanban-card:active { cursor: grabbing; }
    .kanban-card.dragging { opacity: 0.4; transform: rotate(2deg); }
    .kanban-card.is-alternative { background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), var(--bg-elev-2) 60%); border-left-style: dashed; }
    .kanban-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; }
    .kanban-card-customer { font-weight: 600; font-size: 0.86rem; line-height: 1.35; color: var(--text); }
    .kanban-card-value { font-weight: 700; color: var(--text); font-size: 0.82rem; white-space: nowrap; }
    .kanban-card-meta { display: flex; gap: 0.4rem; align-items: center; font-size: 0.7rem; color: var(--text-mute); margin-top: 0.5rem; flex-wrap: wrap; }
    .kanban-card-stats { display: flex; gap: 0.45rem; margin-left: auto; }
    .kanban-card-stats span { display: inline-flex; gap: 0.2rem; align-items: center; padding: 0.05rem 0.4rem; background: var(--bg-elev-3); border-radius: 4px; font-weight: 600; color: var(--text-dim); }
    .kanban-card-stats span.overdue { color: var(--danger); background: rgba(244, 63, 94, 0.13); }
    .kanban-empty { padding: 1.5rem 0.5rem; text-align: center; color: var(--text-mute); font-size: 0.78rem; font-style: italic; border: 1px dashed var(--border); border-radius: 8px; }
    @media (max-width: 900px) { .kanban-col { width: 82vw; } }

    /* ===== Tasks board (kanban by due bucket) ===== */
    .task-kanban-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
    .task-kanban-col { background: var(--bg-elev-1); border-radius: 10px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 280px; border: 1px solid var(--border); }
    .task-kanban-col.drag-over { background: rgba(1, 151, 237, 0.08); border-color: var(--brand-blue); }
    .task-kanban-col-head { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px dashed var(--border); margin-bottom: 0.2rem; }
    .task-kanban-col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .task-kanban-col-name { font-weight: 700; font-size: 0.85rem; flex: 1; }
    .task-kanban-col-count { background: rgba(107, 120, 150, 0.18); padding: 0.05rem 0.45rem; border-radius: 8px; font-size: 0.72rem; font-weight: 700; color: var(--text-mute); }
    .task-kanban-col.overdue .task-kanban-col-dot { background: var(--danger); }
    .task-kanban-col.overdue { border-left: 3px solid var(--danger); }
    .task-kanban-col.today .task-kanban-col-dot { background: var(--warning); }
    .task-kanban-col.today { border-left: 3px solid var(--warning); }
    .task-kanban-col.future .task-kanban-col-dot { background: var(--brand-blue); }
    .task-kanban-col.future { border-left: 3px solid var(--brand-blue); }
    .task-kanban-col.done .task-kanban-col-dot { background: var(--success); }
    .task-kanban-col.done { border-left: 3px solid var(--success); opacity: 0.92; }
    .task-kanban-card { background: var(--bg-elev-2); border-radius: 8px; padding: 0.65rem 0.8rem; cursor: grab; display: flex; flex-direction: column; gap: 0.35rem; border: 1px solid transparent; transition: background 0.12s; position: relative; }
    .task-kanban-card:hover { background: var(--bg-elev-3); border-color: var(--brand-blue); }
    .task-kanban-card.dragging { opacity: 0.4; cursor: grabbing; }
    .task-kanban-card.done .task-kanban-card-title { text-decoration: line-through; opacity: 0.6; }
    .task-kanban-card-title { font-weight: 600; font-size: 0.85rem; line-height: 1.35; }
    .task-kanban-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.66rem; color: var(--text-mute); align-items: center; }
    .task-kanban-card-meta .agent { font-size: 0.66rem; }
    .task-kanban-card-meta .agent-avatar { width: 16px; height: 16px; font-size: 0.55rem; }
    .task-kanban-card-customer { font-size: 0.72rem; color: var(--text); padding: 0.15rem 0.4rem; background: rgba(1, 151, 237, 0.1); border-radius: 4px; display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
    .task-kanban-card-customer:hover { background: rgba(1, 151, 237, 0.2); }
    .task-kanban-empty { padding: 1rem; text-align: center; color: var(--text-mute); font-size: 0.78rem; font-style: italic; border: 1px dashed var(--border); border-radius: 6px; }
    .task-auto-tag { padding: 0.02rem 0.35rem; background: rgba(107,120,150,0.18); color: var(--text-mute); border-radius: 4px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; }
    @media (max-width: 1200px) { .task-kanban-board { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .task-kanban-board { grid-template-columns: 1fr; } }

    /* Tasks: tiles (kafelki) view + shared status badge */
    .task-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
    @media (max-width: 1200px) { .task-tiles { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 720px) { .task-tiles { grid-template-columns: 1fr; } }
    .task-tile { background: var(--bg-elev-2); border: 1px solid var(--border); border-left: 3px solid currentColor; border-radius: 10px; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
    .task-tile.done { opacity: 0.85; }
    .task-tile.done .task-tile-title { text-decoration: line-through; opacity: 0.7; }
    .task-tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
    .task-tile-title { font-weight: 600; font-size: 0.9rem; line-height: 1.35; color: var(--text); }
    .task-tile-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
    .task-status-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

    /* Flag chips — toggle in the drawer + read-only display on rows/cards */
    .flag-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; background: var(--bg-elev-3); color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: all 0.12s; }
    .flag-chip:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
    .flag-chip:disabled { opacity: 0.6; cursor: default; }
    .quote-flag-tag { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.03rem 0.4rem; border-radius: 999px; font-size: 0.62rem; font-weight: 700; border: 1px solid transparent; }

    /* Kanban: alternative group (expand a primary to show its alternatives nested) */
    .kanban-card-alts-toggle { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.3rem; padding: 0.05rem 0.4rem; background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); border-radius: 5px; font-size: 0.62rem; font-weight: 700; cursor: pointer; }
    .kanban-card-alts-toggle:hover { background: rgba(168, 85, 247, 0.28); }
    .kanban-card-alts-toggle.open { background: rgba(168, 85, 247, 0.32); }
    .kanban-alt-group { display: flex; flex-direction: column; }
    .kanban-alt-children { position: relative; padding-left: 1.3rem; margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
    .kanban-alt-children::before { content: ''; position: absolute; left: 0.45rem; top: -0.3rem; bottom: 1.6rem; width: 2px; background: linear-gradient(to bottom, rgba(168, 85, 247, 0.6), rgba(168, 85, 247, 0.2)); }
    .kanban-alt-child { position: relative; }
    .kanban-alt-child::before { content: ''; position: absolute; left: -0.85rem; top: 1.2rem; width: 0.85rem; height: 2px; background: rgba(168, 85, 247, 0.55); }
    .kanban-alt-child:last-child::after { content: ''; position: absolute; left: -0.85rem; top: 1.25rem; bottom: -0.5rem; width: 2px; background: var(--bg-elev-1); }

    /* Dynamic status pill */
    .status-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem; font-size: 0.7rem; font-weight: 700; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid transparent; white-space: nowrap; }
    .status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

    /* Status edit block in drawer */
    .status-edit-block { padding: 1rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; }
    .status-edit-row { display: flex; gap: 0.5rem; align-items: center; }

    /* Next-contact block */
    .next-contact-block { padding: 1rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; }
    .next-contact-row { display: flex; gap: 0.75rem; align-items: stretch; }
    .next-contact-row .info-label { display: block; margin-bottom: 0.3rem; }
    input[type="date"].input { color-scheme: dark; min-width: 0; }
    textarea.input { font-family: inherit; line-height: 1.5; }

    /* Mini tasks list in drawer */
    .tasks-mini-list { display: flex; flex-direction: column; gap: 0.55rem; }
    .task-mini { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-left: 3px solid var(--brand-blue); border-radius: 8px; }
    .task-mini.overdue { border-left-color: var(--danger); }
    .task-mini.today { border-left-color: var(--warning); }
    .task-mini.done { opacity: 0.55; border-left-color: var(--success); }
    .task-mini.done .task-mini-title { text-decoration: line-through; }
    .task-mini-check { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--border-strong); border-radius: 4px; cursor: pointer; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
    .task-mini-check:hover { border-color: var(--brand-blue); }
    .task-mini.done .task-mini-check { background: var(--success); border-color: var(--success); }
    .task-mini.done .task-mini-check::before { content: '\2713'; color: white; font-size: 0.7rem; font-weight: 700; }
    .task-mini-body { flex: 1; min-width: 0; }
    .task-mini-title { font-weight: 600; font-size: 0.88rem; color: var(--text); }
    .task-mini-meta { font-size: 0.74rem; color: var(--text-mute); margin-top: 0.15rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
    .task-mini-note { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.4rem; padding: 0.4rem 0.55rem; background: var(--bg-elev-3); border-radius: 6px; }
    .task-empty { padding: 1.25rem; text-align: center; color: var(--text-mute); font-size: 0.85rem; background: var(--bg-elev-2); border: 1px dashed var(--border); border-radius: 10px; }

    /* Full tasks grid (Zadania tab) */
    .tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
    .task-card { background: var(--bg-elev-1); border: 1px solid var(--border); border-left: 4px solid var(--brand-blue); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; transition: transform 0.12s; }
    .task-card.overdue { border-left-color: var(--danger); }
    .task-card.today { border-left-color: var(--warning); }
    .task-card.done { opacity: 0.55; }
    .task-card.done .task-card-title { text-decoration: line-through; }
    .task-card:hover { transform: translateY(-1px); }
    .task-card-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
    .task-card-due { display: inline-flex; gap: 0.35rem; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
    .due-overdue { background: rgba(244, 63, 94, 0.13); color: var(--danger); }
    .due-today { background: rgba(245, 158, 11, 0.13); color: var(--warning); }
    .due-future { background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); }
    .due-done { background: rgba(34, 197, 94, 0.13); color: var(--success); }
    .task-card-title { font-weight: 600; font-size: 0.95rem; color: var(--text); }
    .task-card-quote { font-size: 0.78rem; color: var(--text-dim); display: flex; gap: 0.4rem; align-items: center; cursor: pointer; }
    .task-card-quote:hover { color: var(--brand-blue); }
    .task-card-note { font-size: 0.82rem; color: var(--text-dim); padding: 0.55rem 0.7rem; background: var(--bg-elev-2); border-radius: 8px; }
    .task-card-actions { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
    .auto-tag { padding: 0.1rem 0.45rem; background: rgba(255, 124, 46, 0.13); color: var(--brand-orange); border-radius: 5px; font-size: 0.65rem; font-weight: 700; }

    /* Configuration tab */
    .config-add-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
    .config-color { width: 46px; height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev-2); cursor: pointer; padding: 2px; }
    .config-checkbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-dim); padding: 0.35rem 0.7rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
    .config-checkbox input { accent-color: var(--brand-orange); }
    .config-list { display: flex; flex-direction: column; gap: 0.4rem; }
    .config-list-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; }
    .config-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--bg-elev-3); }
    .config-list-item-name { font-weight: 600; flex: 1; }
    .config-list-item-tag { font-size: 0.68rem; padding: 0.1rem 0.45rem; background: rgba(244, 63, 94, 0.13); color: var(--danger); border-radius: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
    .config-order-num { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-mute); min-width: 1.5rem; text-align: right; font-weight: 700; }
    .reorder-arrows { display: inline-flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
    .btn-icon-reorder { background: var(--bg-elev-3); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; padding: 0.1rem 0.35rem; font-size: 0.6rem; line-height: 1; border-radius: 3px; transition: all 0.12s; }
    .btn-icon-reorder:hover:not([disabled]) { background: var(--brand-blue); color: white; border-color: var(--brand-blue); }
    .btn-icon-reorder[disabled] { opacity: 0.25; cursor: not-allowed; }
    .config-rule-item { padding: 0.85rem 1rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; display: flex; gap: 0.85rem; align-items: flex-start; }
    .config-rule-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,124,46,0.15); color: var(--brand-orange); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
    .config-rule-body { flex: 1; }
    .config-rule-title { font-weight: 600; font-size: 0.88rem; }
    .config-rule-desc { font-size: 0.78rem; color: var(--text-mute); margin-top: 0.2rem; }