:root {
      /* ===== Type scale =====
         Eight steps, and every font-size in this file is one of them. The demo this app mirrors uses 29
         distinct sizes — 0.55 through 1.6rem, often two values 0.02rem apart for the same kind of text —
         and copying them produced a stylesheet nobody could adjust: "make the small grey text bigger"
         meant finding six declarations and hoping none was missed.

         The steps sit where the sizes already clustered, so collapsing the rest onto them moves nothing
         by more than about a pixel. Markup refers to names, never to rem; an element that needs a size
         takes the nearest step rather than adding a twenty-ninth value.

           3xs  chip ids, badges         2xs  table headers, uppercase micro-labels
           xs   metric labels, pills     sm   subtitles, hints, secondary text
           md   body                     lg   card titles
           xl   headings, big names      2xl  metric values
      */
      --fs-3xs: 0.60rem;
      --fs-2xs: 0.66rem;
      --fs-xs:  0.72rem;
      --fs-sm:  0.78rem;
      --fs-md:  0.85rem;
      --fs-lg:  0.95rem;
      --fs-xl:  1.05rem;
      --fs-2xl: 1.60rem;

      --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 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.

         Two widths, because .drawer serves two kinds of panel. Three of them — the user, schedule and
         task editors — are single-column forms that 720px already fits with room to spare; wider only
         means covering more of the page behind them. The quote drawer holds a six-column product table,
         and 720px squeezed the product name into 136px so its cell grew to six lines. At 880px the name
         gets 294px and the row settles at three; past 900px the row stops improving. .drawer caps both
         at the viewport, so narrow screens are unaffected either way. */
      --drawer-width: 720px;
      --drawer-width-wide: 880px;
    }
    * { 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: var(--fs-xl); 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: var(--fs-2xs); font-weight: 700; letter-spacing: 0.04em; font-family: 'JetBrains Mono', monospace; }
    .brand-sub { font-size: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-lg); line-height: 1; }
    .module-btn .module-badge-soon { font-size: var(--fs-3xs); 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: var(--fs-xs); 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: var(--fs-2xl); font-weight: 700; color: var(--text); margin: 0 0 0.65rem; letter-spacing: 0.02em; }
    .module-empty-sub { font-size: var(--fs-lg); 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: var(--fs-sm); 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: var(--fs-xs); 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: var(--fs-md); }
    .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: var(--fs-xs); 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: var(--fs-md); 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: var(--fs-lg); 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: var(--fs-md); 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: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-md);
      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; }
    /* The product box shares the row with the customer box but does not split it evenly: article codes
       are short, client names are not. It keeps its own line when the row wraps on a narrow screen. */
    .input-product { flex: 0 1 280px; min-width: 200px; }

    /* ===== Shared bits the pages kept writing inline ===== */
    /* The small grey line under a card title or next to a filter row. Written as an inline style in
       about forty places before this existed; new markup uses these, and the old copies can move over
       without touching anything else. */
    /* The small grey line under a card title — and the same annotation wherever it appears next to one,
       such as a modal's footer note. */
    .card-subtitle { font-size: var(--fs-sm); color: var(--text-mute); }
    /* Secondary information inside a table cell — an id, a code, a method. Same size and colour as a
       card subtitle, but a cell is not a subtitle and the class name should not say it is. */
    .cell-meta { font-size: var(--fs-sm); color: var(--text-mute); }
    /* A denser annotation than a subtitle: the author-and-date line under a note, the hint under a
       field, the small print inside a form. One step smaller, same colour. */
    .text-note { font-size: var(--fs-xs); color: var(--text-mute); }
    /* What a form says when the server refused it. */
    .form-error { font-size: var(--fs-sm); color: var(--danger); }
    /* Chips and badges that sit inside a line of text rather than on a row of their own. */
    .chip-xs { font-size: var(--fs-3xs); padding: 0.02rem 0.3rem; }
    .badge-xs { font-size: var(--fs-3xs); padding: 0.1rem 0.4rem; }
    .filter-hint { font-size: var(--fs-sm); color: var(--text-mute); align-self: center; }
    /* Size only, for the few places where a named class would also impose a colour the element does not
       want. Prefer a named class — .card-subtitle, .text-note, .cell-meta — and reach for these when
       there is genuinely nothing to name. */
    .fs-3xs { font-size: var(--fs-3xs); }
    .fs-2xs { font-size: var(--fs-2xs); }
    .fs-xs  { font-size: var(--fs-xs); }
    .fs-sm  { font-size: var(--fs-sm); }
    .fs-md  { font-size: var(--fs-md); }
    .fs-lg  { font-size: var(--fs-lg); }
    .fs-xl  { font-size: var(--fs-xl); }
    .fs-2xl { font-size: var(--fs-2xl); }
    .control-label { font-size: var(--fs-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
    /* .metrics is five across; a strip of four needs only the column count changed. */
    .metrics-4 { grid-template-columns: repeat(4, 1fr); }

    /* A table with many narrow numeric columns — it runs tighter than the default, and its figures line
       up digit for digit. Used by the supplier/status matrix; nothing about it is supplier-specific. */
    .table-dense { font-size: var(--fs-md); }
    .table-dense th { font-size: var(--fs-2xs); padding: 0.55rem 0.7rem; white-space: nowrap; }
    .table-dense td { padding: 0.6rem 0.7rem; font-variant-numeric: tabular-nums; }
    .table-dense tfoot td { padding: 0.65rem 0.7rem; border-top: 2px solid var(--border-strong); font-weight: 700; background: var(--bg-elev-2); }
    .dot-label { display: inline-flex; align-items: center; gap: 0.35rem; }
    .dot-label-dot { width: 7px; height: 7px; border-radius: 50%; }

    /* A proportion as one bar instead of a row of numbers nobody would compare by eye. The segments'
       widths and colours come from the data, so they stay inline; everything else is here. */
    .share-bar { display: flex; height: 18px; min-width: 200px; border-radius: 4px; overflow: hidden; background: var(--bg-elev-3); border: 1px solid var(--border); }
    .share-seg { height: 100%; transition: opacity 0.15s; cursor: help; }
    .share-seg:hover { opacity: 0.7; }

    /* The date-range row that sits under the presets, on the dashboards that allow a custom period. */
    .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-row .input { flex: 0 1 auto; min-width: 0; padding: 0.45rem 0.6rem; }

    /* ===== 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: var(--fs-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 0.5rem; }
    .metric-value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.15; }
    .metric-delta { font-size: var(--fs-xs); margin-top: 0.35rem; font-weight: 600; }
    /* For a metric whose value is a name rather than a number — a supplier, an agent. At the full
       1.6rem a long name wraps the card and the strip stops lining up. */
    .metric-value-sm { font-size: var(--fs-xl); }
    .dash-delta { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.4rem; border-radius: 4px; font-size: var(--fs-xs); 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: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-md); 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: var(--fs-sm); border: 1px solid var(--border); }
    .task-file-item .file-icon { font-size: var(--fs-xl); 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: var(--fs-xs); }
    .task-file-item .file-remove { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: var(--fs-xl); 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: var(--fs-2xs); 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: var(--fs-2xs); 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: var(--fs-md); flex: 1; }
    .task-kanban-col-count { background: rgba(107, 120, 150, 0.18); padding: 0.05rem 0.45rem; border-radius: 8px; font-size: var(--fs-xs); 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: var(--fs-md); line-height: 1.35; }
    .task-kanban-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: var(--fs-2xs); color: var(--text-mute); align-items: center; }
    .task-kanban-card-meta .agent { font-size: var(--fs-2xs); }
    .task-kanban-card-meta .agent-avatar { width: 16px; height: 16px; font-size: var(--fs-3xs); }
    .task-kanban-card-customer { font-size: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-md); 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); }
    /* An amount must not break before its currency: "3 394.30" on one line and "zł" on the next stops
       reading as one figure, which is what happened once amounts carried two decimals. Tabular digits
       come with it, so the same magnitude occupies the same width down a column and two numbers can be
       compared by their length. If the row still does not fit, .tbl-wrap scrolls sideways — that is the
       drawer's rule for wide content, and it beats mangling the numbers. */
    td.text-right, th.text-right { white-space: nowrap; font-variant-numeric: tabular-nums; }
    .text-right { text-align: right; }
    .text-mute { color: var(--text-mute); }
    .text-dim { color: var(--text-dim); }

    /* Two figures in one cell: the one that carries the meaning and a smaller one qualifying it — a
       per-unit price under a line total, a percentage under an amount, a converted equivalent under a
       foreign-currency price. Stacked rather than joined by parentheses, so a column of amounts and a
       column of qualifiers each read down the page instead of being picked apart line by line.

       Which of the two comes first is the markup's business: the purchase cell leads with the unit price
       and the margin cell with the amount. This sets only the stacking and the relative size.

       Colour is not set here either. The same shape carries a muted cost, a green margin and a red loss,
       so it comes from the caller through .text-mute / .pos / .neg on the cell. */
    .val-stack { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.3; }
    .val-stack .val-main { font-weight: 600; }
    .val-stack .val-sub { font-size: var(--fs-xs); font-weight: 400; }

    /* ===== Badges ===== */
    .chip { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; font-size: var(--fs-xs); 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: var(--fs-xs); }
    /* Shop chips. XXLGASTRO keeps the base colour — it is most of the quotes, so the other two are
       what has to stand out. Replaced .chip-channel and its allegro/emag/shopify variants: those
       channels never appear in our feed, so all three chips were always the same blue. */
    .chip-shop { background: rgba(1, 151, 237, 0.13); color: var(--brand-blue); border: 1px solid rgba(1, 151, 237, 0.25); }
    .chip-shop.inox-pl { background: rgba(255, 124, 46, 0.13); color: var(--brand-orange); border-color: rgba(255, 124, 46, 0.25); }
    .chip-shop.inox-nl { 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: var(--fs-xs); 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: var(--fs-sm); }
    .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: var(--fs-3xs); 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: var(--fs-sm); 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: var(--fs-lg); 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); }
    /* For a panel whose content is a table rather than a form — see --drawer-width-wide. */
    .drawer.drawer-wide { width: var(--drawer-width-wide); }
    .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: var(--fs-xl); font-weight: 700; }
    .drawer-body { padding: 1.5rem; }
    .drawer-section { margin-bottom: 1.75rem; }
    .drawer-section h3 { font-size: var(--fs-xs); 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: var(--fs-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
    .info-value { font-size: var(--fs-lg); color: var(--text); font-weight: 500; }
    .info-value.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: var(--fs-md); }

    .items-table { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
    .items-table table { font-size: var(--fs-md); }
    .items-table th { background: var(--bg-elev-3); font-size: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-xs); }
    .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: var(--fs-xs); 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: var(--fs-sm); }
    .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: var(--fs-xs); 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: var(--fs-3xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
    .ift-value { font-size: var(--fs-md); font-weight: 600; color: var(--text); font-family: 'JetBrains Mono', monospace; }
    .ift-value.big { font-size: var(--fs-lg); 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: var(--fs-sm); font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
    .iss-sub { font-size: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-sm); }
    .summary-value { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
    .summary-value.big { font-size: var(--fs-xl); font-weight: 700; }

    /* ===== Chart container ===== */
    .chart-wrap { height: 280px; position: relative; }
    /* The taller variant the dashboards use — a series chart with a legend needs the extra room. Was an
       inline height on every such chart; only the per-agent bars still compute one, because their height
       depends on how many agents there are. */
    .chart-wrap-lg { height: 320px; }

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

    /* ===== Modal =====
       Above the drawer (1000) and below the toasts (2000): it covers the panel it was opened from, but a
       refused action still says so on top of it. The drawer stays mounted underneath, so closing the modal
       returns the reader to exactly the quote they were reading. */
    .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 1100; }
    .modal { position: fixed; z-index: 1101; top: 50%; left: 50%; transform: translate(-50%, -50%);
             width: min(1000px, calc(100vw - 2rem)); max-height: min(86vh, 900px);
             display: flex; flex-direction: column;
             background: var(--bg-elev-1); border: 1px solid var(--border-strong); border-radius: 14px;
             box-shadow: 0 24px 64px rgba(0,0,0,0.45); overflow: hidden; }
    .modal-header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
                    border-bottom: 1px solid var(--border); background: var(--bg-elev-2); }
    .modal-header h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
    .modal-body { padding: 1.25rem; overflow-y: auto; }
    .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                    padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); background: var(--bg-elev-2); }

    /* ===== Audit trail (the Historia modal) ===== */
    .audit-note { display: flex; gap: 0.6rem; padding: 0.7rem 0.9rem; margin-bottom: 1rem;
                  background: var(--bg-elev-2); border-left: 3px solid var(--brand-blue); border-radius: 8px;
                  font-size: var(--fs-sm); color: var(--text-dim); }
    .audit-op { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.5rem; overflow: hidden; }
    .audit-op-head { display: flex; align-items: baseline; gap: 0.75rem; width: 100%; padding: 0.65rem 0.85rem;
                     background: var(--bg-elev-2); border: none; color: var(--text); text-align: left;
                     cursor: pointer; font-size: var(--fs-md); }
    .audit-op-head:hover { background: var(--bg-elev-3); }
    .audit-op-when { color: var(--text-mute); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .audit-op-who { font-weight: 600; }
    .audit-op-what { color: var(--text-dim); }
    .audit-op-count { margin-left: auto; color: var(--text-mute); font-size: var(--fs-xs); white-space: nowrap; }
    .audit-changes { padding: 0.5rem 0.85rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
    .audit-change { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 0.5rem 0.9rem;
                    font-size: var(--fs-sm); align-items: baseline; }
    .audit-change-field { color: var(--text-mute); }
    .audit-change-values { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
    .audit-old { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--text-faint); }
    .audit-arrow { color: var(--text-faint); }
    .audit-new { font-weight: 600; }
    .audit-subject { color: var(--text-mute); font-size: var(--fs-xs); padding: 0 0.85rem 0.5rem; }
    /* A handler's sentence, above the fields it explains — the only text in the trail that was written by a
       person rather than derived from a row, so it reads as prose and not as a diff. */
    .audit-summary { padding: 0.6rem 0.85rem 0.2rem; font-size: var(--fs-md); color: var(--text); }

    /* ===== 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: var(--fs-md); 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); }
    /* A refusal stays until it is dismissed or the user navigates away: it explains why something did not
       happen, and a message that fades on its own can be missed by the person who needed to read it. */
    .toast { display: flex; align-items: flex-start; gap: 0.75rem; max-width: min(28rem, calc(100vw - 2rem)); }
    .toast-close { flex: none; background: none; border: none; padding: 0; color: var(--text-mute); cursor: pointer; font-size: var(--fs-sm); line-height: 1.45; }
    .toast-close:hover { color: var(--text); }

    /* ===== 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: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-xl); 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: var(--fs-xs); 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: var(--fs-md); font-weight: 600; color: var(--text); }
    .toggle-sub { font-size: var(--fs-sm); color: var(--text-mute); margin-top: 0.15rem; line-height: 1.4; }

    /* Explains a field whose value the form decided for you — e.g. permissions fixed by the role. */
    .form-hint { font-size: var(--fs-sm); color: var(--text-mute); margin-top: 0.3rem; line-height: 1.4; }

    /* A disabled toggle is not "broken", it is "decided elsewhere" — say so by dimming, not hiding. */
    .toggle-label input:disabled ~ .toggle-switch { opacity: 0.55; cursor: not-allowed; }
    .toggle-label input:disabled ~ div            { opacity: 0.75; }

    .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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-md); color: var(--text); }
    .scheme-supplier-meta { font-size: var(--fs-xs); 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: var(--fs-2xs); 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: var(--fs-md); 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: var(--fs-lg); }
    .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: var(--fs-md); 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: var(--fs-sm); 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: var(--fs-md); }
    .sch-tier-row .sch-tier-sep { color: var(--text-mute); font-size: var(--fs-xs); 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: var(--fs-md); }
    .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: var(--fs-md); color: var(--text-mute); }
    .sim-result.has { color: var(--text); border-color: var(--brand-orange); }
    .sim-result strong { color: var(--brand-orange); font-size: var(--fs-xl); font-weight: 800; }

    /* Grafik pracownikow */
    .sched-table { border-collapse: collapse; font-size: var(--fs-sm); }
    .sched-table th { font-size: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-3xs); 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: var(--fs-3xs); 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: var(--fs-3xs); 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: var(--fs-2xs); 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: var(--fs-xl); flex-shrink: 0; line-height: 1.3; }
    .conflict-body { flex: 1; font-size: var(--fs-md); line-height: 1.4; }
    .conflict-body strong { color: var(--text); }
    .conflict-empty { padding: 0.85rem; text-align: center; color: var(--success); font-size: var(--fs-md); }
    .conflict-meta { font-size: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-sm); }
    .holiday-dow { font-size: var(--fs-3xs); font-weight: 700; color: var(--text-mute); text-transform: uppercase; }
    .holiday-label { font-size: var(--fs-sm); color: var(--text-mute); flex: 1; }
    .holiday-tag { font-size: var(--fs-3xs); 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: var(--fs-lg); }
    .rev-card-date { font-size: var(--fs-xs); color: var(--text-mute); font-variant-numeric: tabular-nums; }
    .rev-stars { display: inline-flex; gap: 0.05rem; font-size: var(--fs-lg); 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: var(--fs-md); 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: var(--fs-sm); }
    .rev-card-meta .agent { font-size: var(--fs-xs); }
    .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: var(--fs-xs); 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: var(--fs-xs); border-radius: 4px; cursor: pointer; }
    .rev-card-del:hover { background: rgba(244, 63, 94, 0.12); }
    .rev-card-link { font-size: var(--fs-xs); 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: var(--fs-3xs); 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: var(--fs-2xl); 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: var(--fs-sm); 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: var(--fs-sm); }
    .file-upload-item .file-name { flex: 1; }
    .file-upload-item .file-size { color: var(--text-mute); font-size: var(--fs-xs); }
    .file-upload-item .file-remove { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: var(--fs-xl); 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: var(--fs-2xl); 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: var(--fs-md); }
    .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: var(--fs-md); 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: var(--fs-xs); 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: var(--fs-3xs); }
    .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: var(--fs-md); }
    .note-item-delete:hover { color: var(--danger); background: rgba(244, 63, 94, 0.08); }
    .note-item-text { font-size: var(--fs-md); 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: var(--fs-md); 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: var(--fs-xl); flex-shrink: 0; }
    .file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
    .file-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-meta { font-size: var(--fs-xs); 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: var(--fs-xs); }
    .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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-lg); color: var(--text); letter-spacing: 0.01em; }
    .wh-sup-source-badge {
      font-size: var(--fs-3xs); 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: var(--fs-xs); 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: var(--fs-sm); color: var(--text-mute); }
    .wh-sup-row strong { color: var(--text); font-size: var(--fs-lg); 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: var(--fs-md); }
    .wh-table th { font-size: var(--fs-2xs); 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: var(--fs-sm); 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: var(--fs-md); }
    .wh-edit-pencil:hover { opacity: 1; color: var(--brand-blue); }
    .wh-sup-name-cell { font-weight: 700; font-size: var(--fs-sm); }

    /* 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: var(--fs-md); 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: var(--fs-xs); 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: var(--fs-md); line-height: 1.35; color: var(--text); }
    .kanban-card-value { font-weight: 700; color: var(--text); font-size: var(--fs-md); white-space: nowrap; }
    .kanban-card-meta { display: flex; gap: 0.4rem; align-items: center; font-size: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-md); }
    .sup-status-table th { font-size: var(--fs-2xs); 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: var(--fs-sm); 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: var(--fs-3xs); 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: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; }
    .alt-tree-meta { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); 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: var(--fs-lg); font-variant-numeric: tabular-nums; }
    .alt-tree-current-marker { font-size: var(--fs-3xs); 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: var(--fs-md); 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: var(--fs-xs); color: var(--text-dim); font-weight: 700; }
    .alt-linked-meta { font-size: var(--fs-xs); color: var(--text-mute); display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.1rem; }
    .alt-linked-value { font-size: var(--fs-md); 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: var(--fs-3xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 0.3rem; }
    .quote-alt-link-icon { color: #c084fc; font-size: var(--fs-md); 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: var(--fs-sm); 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: var(--fs-md); 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: var(--fs-3xs); 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: var(--fs-3xs); 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: var(--fs-3xs); 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: var(--fs-lg); 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: var(--fs-2xs); 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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-md); }
    .status-history-item.initial { border-left-color: var(--text-mute); color: var(--text-mute); }
    .sh-arrow { color: var(--text-mute); font-size: var(--fs-xs); flex-shrink: 0; }
    .sh-time { font-size: var(--fs-xs); color: var(--text-mute); flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .sh-user { font-size: var(--fs-xs); color: var(--text-dim); flex-shrink: 0; }
    .sh-note { font-size: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-3xs); 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: var(--fs-lg); 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: var(--fs-sm); 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: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-xs); 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: var(--fs-xs); color: var(--brand-blue); font-weight: 700; }
    .qsr-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); flex: 1; }
    .qsr-row2 { display: flex; gap: 0.5rem; align-items: center; font-size: var(--fs-xs); 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: var(--fs-lg); 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: var(--fs-xs); 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: var(--fs-xs) !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: var(--fs-sm); }
    .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: var(--fs-xs); 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: var(--fs-2xs); 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: var(--fs-2xs); 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: var(--fs-md); 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: var(--fs-xs); font-weight: 700; flex-shrink: 0; }
    .kanban-col-sum { padding: 0.4rem 0.95rem; font-size: var(--fs-xs); 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: var(--fs-md); line-height: 1.35; color: var(--text); }
    .kanban-card-value { font-weight: 700; color: var(--text); font-size: var(--fs-md); white-space: nowrap; }
    .kanban-card-meta { display: flex; gap: 0.4rem; align-items: center; font-size: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-md); flex: 1; }
    .task-kanban-col-count { background: rgba(107, 120, 150, 0.18); padding: 0.05rem 0.45rem; border-radius: 8px; font-size: var(--fs-xs); 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: var(--fs-md); line-height: 1.35; }
    .task-kanban-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: var(--fs-2xs); color: var(--text-mute); align-items: center; }
    .task-kanban-card-meta .agent { font-size: var(--fs-2xs); }
    .task-kanban-card-meta .agent-avatar { width: 16px; height: 16px; font-size: var(--fs-3xs); }
    .task-kanban-card-customer { font-size: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-3xs); 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: var(--fs-lg); 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: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-3xs); 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: var(--fs-3xs); 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: var(--fs-xs); 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: var(--fs-xs); font-weight: 700; }
    .task-mini-body { flex: 1; min-width: 0; }
    .task-mini-title { font-weight: 600; font-size: var(--fs-md); color: var(--text); }
    .task-mini-meta { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 0.15rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
    .task-mini-note { font-size: var(--fs-sm); 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: var(--fs-md); 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: var(--fs-xs); 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: var(--fs-lg); color: var(--text); }
    .task-card-quote { font-size: var(--fs-sm); 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: var(--fs-md); 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: var(--fs-2xs); 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: var(--fs-md); 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: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-3xs); 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: var(--fs-xl); flex-shrink: 0; }
    .config-rule-body { flex: 1; }
    .config-rule-title { font-weight: 600; font-size: var(--fs-md); }
    .config-rule-desc { font-size: var(--fs-sm); color: var(--text-mute); margin-top: 0.2rem; }


    /* ===== MultiSelect =====
       A filter that takes several values. Sized to match .select exactly so a row mixing the two does
       not look like two different controls. The panel is absolutely positioned inside .ms, and .ms
       itself is the positioning context — which is why the backdrop is a sibling of .ms rather than a
       child: a child would sit inside the stacking context and cover the panel it is meant to sit under. */
    .ms { position: relative; display: inline-flex; }
    .ms-backdrop { position: fixed; inset: 0; z-index: 40; }
    .ms-button { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: space-between; padding: 0.55rem 0.85rem; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; font-size: var(--fs-md); min-width: 160px; font-family: inherit; cursor: pointer; text-align: left; }
    .ms-button:hover:not(:disabled) { border-color: var(--text-mute); }
    /* Same reading as the other disabled controls here (.toggle-label, .flag-chip): visibly there, visibly
       not available now. */
    .ms-button:disabled { opacity: 0.55; cursor: not-allowed; }
    .ms.open .ms-button { border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-glow); }
    /* The label is what gets clipped when a selection is long — never the caret, which is the only
       affordance saying this opens. */
    .ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ms-caret { color: var(--text-mute); font-size: var(--fs-xs); flex-shrink: 0; }
    .ms-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 41; min-width: 100%; width: max-content; max-width: 320px; max-height: 320px; overflow-y: auto; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 9px; padding: 0.3rem; box-shadow: 0 12px 28px rgba(0,0,0,0.45); }
    .ms-option { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.6rem; background: transparent; border: none; color: var(--text); font-size: var(--fs-md); font-family: inherit; text-align: left; border-radius: 6px; cursor: pointer; }
    .ms-option:hover { background: var(--bg-elev-3); }
    .ms-option.checked { color: var(--brand-blue); font-weight: 600; }
    /* Fixed width so the labels line up whether or not a row is ticked — a tick that shifts the text
       makes the list look like it is jumping as you click down it. */
    .ms-check { width: 0.9rem; flex-shrink: 0; font-size: var(--fs-sm); }
    .ms-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .ms-separator { height: 1px; background: var(--border); margin: 0.3rem 0; }