/*!
 * ═══════════════════════════════════════════════════════════════════════════
 * DESIGN SYSTEM — Wspólnota Plus v1.0
 * ═══════════════════════════════════════════════════════════════════════════
 * Wersja:           1.0
 * Data ekstrakcji:  2026-05-16
 * Źródło:           design/DesignSystem.html (commit ffffbc2)
 * Konwencja:        BEM (block__element--modifier), prefiks .app-*
 * CSP:              safe (zero inline styles, zero inline JS)
 *
 * ⚠️  NIE WŁĄCZAJ w base.html dopóki nie posprzątasz konfliktu .app-sidebar
 *     w static/panel/global-redesign-v210.css (linie 64, 122).
 *     Szczegóły: docs/DESIGN_SYSTEM.md sekcja 9.
 *
 * Klasy pominięte (mockup-only, nie produkcyjne):
 *   - .app-doc__*        (layout dokumentu mockupu)
 *   - .app-tok-*         (token swatches/ladder/spacing preview)
 *   - .app-shell-preview (mini wrapper preview)
 *   - .app-cheatsheet    (tabela referencyjna w mockupie)
 *
 * Bezpieczne klasy (mogą być używane od razu po włączeniu DS):
 *   .app-card .app-field .app-table .app-pill .app-btn .app-modal
 *   .app-dropdown .app-tooltip .app-progress .app-toast .app-alert
 *   .app-matrix .app-empty .app-loading .app-error-state .app-no-permission
 *   .app-pagination .app-toggle .app-checkbox .app-radio .app-mono
 *   .app-sticky-save .app-page-tabs .app-page-tab .app-breadcrumb
 *   .app-page-head .app-page-title .app-badge
 *
 * Niebezpieczne (do unikania w pierwszej migracji — konflikt z legacy):
 *   .app-sidebar .app-shell .app-main .app-topbar .app-rail
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
 *  0. TOKENS — kolory, typografia, spacing, radii, shadows
 * ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Colors — base */
  --app-bg:#f3f5f8;
  --app-card:#ffffff;
  --app-ink:#0f172a;
  --app-ink-2:#1f2937;
  --app-muted:#64748b;
  --app-muted-2:#94a3b8;
  --app-line:#e6e9ef;
  --app-line-2:#eef1f5;

  /* Colors — semantic (12 par soft/ink + 4 dodatkowe soft/ink) */
  --app-blue:#1f2937;        --app-blue-soft:#eef2f7;   --app-blue-ink:#1f2937;
  --app-green:#16a34a;       --app-green-soft:#e6f7ec;  --app-green-ink:#15803d;
  --app-orange:#ea7a17;      --app-orange-soft:#fdecd6; --app-orange-ink:#b65a07;
  --app-red:#dc2626;         --app-red-soft:#fde2e2;    --app-red-ink:#b91c1c;
  --app-purple:#7c3aed;      --app-purple-soft:#efe7ff; --app-purple-ink:#6d28d9;
  --app-teal:#0d9488;        --app-teal-soft:#d6f1ee;   --app-teal-ink:#0f766e;
  --app-pink-soft:#ffe2ef;   --app-pink-ink:#be185d;
  --app-yellow-soft:#fff3c4; --app-yellow-ink:#a16207;
  --app-cyan-soft:#d8f0fa;   --app-cyan-ink:#0e7490;
  --app-slate-soft:#e7eaf0;  --app-slate-ink:#334155;

  /* Radii */
  --app-radius-sm:6px;
  --app-radius:10px;
  --app-radius-lg:14px;
  --app-radius-pill:999px;

  /* Shadows */
  --app-shadow-sm:0 1px 1px rgba(15,23,42,.04);
  --app-shadow:0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
  --app-shadow-lg:0 10px 25px rgba(15,23,42,.10), 0 4px 10px rgba(15,23,42,.05);

  /* Spacing scale */
  --app-sp-1:4px;
  --app-sp-2:8px;
  --app-sp-3:12px;
  --app-sp-4:16px;
  --app-sp-5:20px;
  --app-sp-6:24px;
  --app-sp-8:32px;
  --app-sp-10:40px;

  /* Typography sizes */
  --app-fs-11:11px;
  --app-fs-12:12px;
  --app-fs-13:13px;
  --app-fs-14:14px;
  --app-fs-16:16px;
  --app-fs-18:18px;
  --app-fs-22:22px;
  --app-fs-28:28px;

  /* ─────────────────────────────────────────────────────────────────────────
   * Dashboard v2 (feat/dashboard-redesign-v2) — semantic aliases + nowe tokeny.
   * Mockup z Claude Design uzywa innego nazewnictwa (--app-primary, --app-fg1,
   * --app-success, --app-radius-2xl). Zamiast hardcoda kolorów w
   * dashboard-v2.css mapujemy je tutaj jako globalne tokeny brandu.
   * ───────────────────────────────────────────────────────────────────────── */

  /* Semantic aliases (mapowanie na istniejace kolory bazowe) */
  --app-primary:#1f2937;        /* alias --app-blue */
  --app-primary-soft:#eef2f7;   /* alias --app-blue-soft */
  --app-success:#16a34a;        /* alias --app-green */
  --app-success-soft:#e6f7ec;
  --app-success-ink:#15803d;
  --app-warning:#ea7a17;        /* alias --app-orange. Wybor: --app-warning a NIE --app-warning-alt — konsekwentnie w komponentach */
  --app-warning-soft:#fdecd6;
  --app-warning-ink:#b65a07;
  --app-warning-alt:#f59e0b;    /* zarezerwowane do pillsow gradientowych */
  --app-danger:#dc2626;
  --app-danger-soft:#fde2e2;
  --app-danger-ink:#b91c1c;
  --app-info:#7c3aed;           /* alias --app-purple (dla powiadomien/info) */
  --app-info-soft:#efe7ff;
  --app-info-ink:#6d28d9;

  /* Base kolory ktorych nie bylo (tylko soft/ink istnialy) */
  --app-pink:#ec4899;
  --app-violet:#7c3aed;         /* alias --app-purple */
  --app-slate:#64748b;          /* alias --app-muted */

  /* Foreground levels (mockup naming) */
  --app-fg1:#0f172a;            /* alias --app-ink */
  --app-fg2:#1f2937;            /* alias --app-ink-2 */
  --app-fg3:#475569;            /* mid-grey, ciemniejszy niz --app-muted */
  --app-ink-soft:#1f2937;       /* alias --app-ink-2 */

  /* Powierzchnie tla */
  --app-surface-soft:#f8fafc;
  --app-surface-cool:#eef2f7;
  --app-surface-blue:#eef2f7;

  /* Krawedzie warianty */
  --app-line-blue:#eef2f7;
  --app-line-soft:#eef1f5;      /* alias --app-line-2 */
  --app-line-strong:#cbd5e1;

  /* Numerowane odcienie blue (kit.css uzywa --app-blue-50/300/600/800) */
  --app-blue-50:#eef2f7;
  --app-blue-300:#94a3b8;
  --app-blue-600:#1f2937;
  --app-blue-800:#0f172a;

  /* Dodatkowe radii */
  --app-radius-2xl:18px;

  /* Dodatkowe shadows */
  --app-shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --app-shadow-hover:0 8px 20px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.04);
  --app-shadow-blue:0 6px 16px rgba(31, 41, 55,.20);

  /* Easing + ring */
  --app-ease:cubic-bezier(.2,.7,.2,1);
  --app-ring-focus:0 0 0 4px rgba(31, 41, 55,.18);

  /* Czcionki (mockup uzywa Inter; fallback systemowy) */
  --app-font-sans:'Inter',system-ui,sans-serif;
  --app-font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Voting + source palette (PR feature/voting-colors-system, 2026-05-19).
     UWAGA decyzja PR5: MANUAL_ENTRY i MANUAL_AFTER_CLOSE z modelu Vote
     traktujemy jak PAPER (administracja wpisuje papier do systemu manualnie).
     Dlatego BRAK osobnego --source-manual-*. Patrz docs/backlog/
     APP_PILL_DISPLAY_STRING_ANTIPATTERN.md. */
  --vote-yes-fg:#15803d;     --vote-yes-bg:#dcfce7;     --vote-yes-dot:var(--app-green);
  --vote-no-fg:#b91c1c;      --vote-no-bg:#fee2e2;      --vote-no-dot:var(--app-red);
  --vote-abstain-fg:#854d0e; --vote-abstain-bg:#fef3c7; --vote-abstain-dot:#d97706;
  --vote-none-fg:#1f2937;    --vote-none-bg:#f3f4f6;    --vote-none-dot:#94a3b8;

  --source-online-fg:#0f172a;  --source-online-bg:#eef2f7;  --source-online-dot:var(--app-blue);
  --source-paper-fg:#6b21a8;   --source-paper-bg:#f3e8ff;   --source-paper-dot:#9333ea;
  --source-meeting-fg:#0e7490; --source-meeting-bg:#cffafe; --source-meeting-dot:#0891b2;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  RESET & BASE — celowo zakomentowany do czasu pełnej migracji.
 *  W mockupie body wymusza min-width:1440px + Inter — to zepsułoby istniejące
 *  widoki responsive. Aktywuj po migracji wszystkich widoków (usuwając legacy
 *  static/panel/app.css). Do tego czasu tylko utility .app-mono jest aktywne.
 * ═══════════════════════════════════════════════════════════════════════════ */
/*
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--app-bg);
  color:var(--app-ink);
  font-size:13px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
*/

/* Monospace utility (safe — wpływa tylko na elementy z klasą .app-mono) */
.app-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════════════════════
 *  1. APP SHELL — DEZAKTYWOWANE 2026-05-17 (round 8 - root cause sidebar wyciecia)
 *
 *  PROBLEM: <body class="app-shell ..."> w base.html dawalo body display:grid
 *  z 3 trackami 280px 1fr 320px. Track 3 (320px right rail) byl PUSTY ale
 *  rezerwowal miejsce po prawej. Plus .main.main-auth w track 2 z width:1074px
 *  (z v545:315 calc(100vw - 292px)) rozszerzal track 2 do 1074 intrinsic
 *  min-content. Suma 280+1074+320 = 1674px > viewport 1366px -> body OVERFLOWS
 *  308px po prawej. .wp-sidebar w .main jest umieszczony na pozycji ~1365-1610
 *  - widoczny tylko 1-2px lewej krawedzi, reszta ZA viewportem.
 *
 *  POMIAR (Playwright + Chrome, viewport 1366):
 *    body grid_cols: "280px 1366px 320px"  -> overflows 580px
 *    .main: left=572, right=1646, width=1074  -> 280px za viewportem
 *    .wp-sidebar: left=1365, right=1610  -> widoczny 1px
 *
 *  Konflikt z legacy: base.html ma <body class="app-shell ..."> - klasa
 *  .app-shell byla legacy z mockupow. Faktyczny layout (sidebar fixed + main
 *  margin-left) jest robiony przez v210/v211/v545.
 *
 *  Round 8 fix: usuwamy display:grid z .app-shell. Body wraca do display:block
 *  (default). Sidebar jest position:fixed (z v210), main ma margin-left:292
 *  (z v545). To dziala.
 *
 *  Bezpieczne: .app-shell nigdy nie bylo aktywne jako grid (z legacy v210
 *  styling override layout). Ta regula byla skopiowana z mockupu DesignSystem
 *  ale nigdy nie powinna byla trafic na body produkcyjne.
 * ═══════════════════════════════════════════════════════════════════════════ */
/*
.app-shell{
  display:grid;
  grid-template-columns:280px 1fr 320px;
  min-height:100vh;
  background:var(--app-bg);
}
.app-shell--no-rail{grid-template-columns:280px 1fr}
.app-shell--two-col{grid-template-columns:240px 1fr}
.app-shell--wide{grid-template-columns:280px 1fr 360px}
*/

/* ═══════════════════════════════════════════════════════════════════════════
 *  2. SIDEBAR — lewa nawigacja z brandem, sekcjami, logoutem
 *  ⚠️ Kolizja z global-redesign-v210.css:64,122 (legacy ma !important).
 *     Patrz docs/DESIGN_SYSTEM.md sekcja 9.
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-sidebar{
  background:#fff;border-right:1px solid var(--app-line);
  padding:20px 18px;
  display:flex;flex-direction:column;gap:10px;
  position:sticky;top:0;height:100%;overflow:auto;
}
.app-sidebar__brand{
  display:flex;align-items:center;gap:12px;
  padding:4px 4px 18px;border-bottom:1px solid var(--app-line);margin-bottom:6px;
}
.app-sidebar__brand-mark{
  width:48px;height:48px;border-radius:12px;background:#fff;
  border:1.5px solid #eef2f7;display:grid;place-items:center;
  color:#1f2937;flex-shrink:0;
}
.app-sidebar__brand-title{font-weight:800;font-size:17px;letter-spacing:-.018em;line-height:1.05}
.app-sidebar__brand-sub{font-size:11px;color:var(--app-muted);margin-top:3px}
.app-sidebar__item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 18px;
  border:1.5px solid #eef2f7;border-radius:var(--app-radius-pill);
  font-weight:700;font-size:13px;color:var(--app-ink);background:#fff;
  width:100%;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.app-sidebar__item:hover{background:#f5f9ff;border-color:#94a3b8}
.app-sidebar__item-ico{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;min-width:0;position:relative}
.app-sidebar__item-ico svg{color:#1f2937;flex-shrink:0}
.app-sidebar__item-chev{color:#1f2937;transition:transform .2s}
.app-sidebar__item--open{
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(31, 41, 55,.08);
}
.app-sidebar__item--open .app-sidebar__item-chev{transform:rotate(90deg)}
.app-sidebar__sub{
  margin:-2px 6px 4px;padding:8px 0;
  border-radius:14px;background:#fff;border:1px solid var(--app-line);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.app-sidebar__sub-list{display:flex;flex-direction:column;gap:1px;padding:2px 8px}
.app-sidebar__sub-link{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--app-ink);white-space:nowrap;
}
.app-sidebar__sub-link svg{color:var(--app-muted);flex-shrink:0}
.app-sidebar__sub-link:hover{background:#f5f7fa}
.app-sidebar__sub-link--active{background:var(--app-blue-soft);color:var(--app-blue-ink)}
.app-sidebar__sub-link--active svg{color:var(--app-blue)}
.app-sidebar__divider{height:1px;background:var(--app-line);margin:8px 6px 4px}
.app-sidebar__logout{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border:1.5px solid #eef2f7;border-radius:var(--app-radius-pill);
  font-weight:700;font-size:13px;background:#fff;color:var(--app-ink);
}

/* warianty .app-sidebar__item (dodane 2026-05-17) */
.app-sidebar__item--primary{
  background:var(--app-blue);border-color:var(--app-blue);color:#fff;
}
.app-sidebar__item--primary:hover{background:var(--app-blue-ink);border-color:var(--app-blue-ink)}
.app-sidebar__item--primary .app-sidebar__item-ico svg,
.app-sidebar__item--primary .app-sidebar__item-chev{color:#fff}
.app-sidebar__item--active{
  background:var(--app-blue-soft);border-color:#94a3b8;color:var(--app-blue-ink);
}
.app-sidebar__item--active .app-sidebar__item-ico svg,
.app-sidebar__item--active .app-sidebar__item-chev{color:var(--app-blue)}
.app-sidebar__item--compact{padding:8px 14px;font-size:12px}
.app-sidebar__item__badge{
  position:absolute;top:-3px;right:-3px;
  min-width:16px;height:16px;padding:0 5px;border-radius:999px;
  background:var(--app-red);color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
  border:2px solid #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  3. MAIN + TOPBAR — obszar zawartości z górnymi tabami i kontekstem
 *  ⚠️ Kolizja .app-main z app.css:3601,3634 (constraint listowy — suma czysta).
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-main{
  padding:18px 22px 28px;
  display:flex;flex-direction:column;gap:18px;
  min-width:0;
}
.app-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.app-topbar__tabs{display:flex;flex-wrap:wrap;gap:8px}
.app-topbar__ctx{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--app-line);
  padding:9px 14px 9px 16px;border-radius:var(--app-radius-pill);
  font-size:12.5px;color:var(--app-muted);box-shadow:var(--app-shadow-sm);
}
.app-topbar__ctx b{color:var(--app-ink-2);font-weight:600}
.app-topbar__ctx svg{color:var(--app-muted-2);margin-left:4px}

/* ═══════════════════════════════════════════════════════════════════════════
 *  4. TAB (topbar) — kolorowane pigułki nawigacyjne (10 wariantów + active)
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-tab{
  padding:7px 14px;border-radius:var(--app-radius-pill);
  font-size:12.5px;font-weight:600;line-height:1;
  border:1px solid transparent;user-select:none;
  transition:filter .15s, box-shadow .15s;
}
.app-tab--blue   {background:var(--app-blue-soft);   color:var(--app-blue-ink)}
.app-tab--green  {background:var(--app-green-soft);  color:var(--app-green-ink)}
.app-tab--orange {background:var(--app-orange-soft); color:var(--app-orange-ink)}
.app-tab--red    {background:var(--app-red-soft);    color:var(--app-red-ink)}
.app-tab--purple {background:var(--app-purple-soft); color:var(--app-purple-ink)}
.app-tab--teal   {background:var(--app-teal-soft);   color:var(--app-teal-ink)}
.app-tab--pink   {background:var(--app-pink-soft);   color:var(--app-pink-ink)}
.app-tab--yellow {background:var(--app-yellow-soft); color:var(--app-yellow-ink)}
.app-tab--cyan   {background:var(--app-cyan-soft);   color:var(--app-cyan-ink)}
.app-tab--slate  {background:var(--app-slate-soft);  color:var(--app-slate-ink)}
.app-tab--active {outline:2px solid rgba(15,23,42,.10); outline-offset:1px}
.app-tab:hover{filter:brightness(.97)}

/* ═══════════════════════════════════════════════════════════════════════════
 *  5. PAGE HEAD — nagłówek strony z breadcrumb, tytułem, akcjami
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-page-head{padding:18px 20px}
.app-breadcrumb{font-size:12px;color:var(--app-muted);margin-bottom:6px}
.app-breadcrumb b{color:var(--app-ink-2);font-weight:600}
.app-page-head__row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
.app-page-title{
  font-size:22px;font-weight:700;letter-spacing:-.015em;margin:0 0 4px;
}
.app-page-sub{color:var(--app-muted);font-size:12.5px;margin:0}
.app-page-head__actions{display:flex;align-items:center;gap:9px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════════
 *  6. CARDS — uniwersalny kontener z head/body/foot, collapsible, badge
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-card{
  background:var(--app-card);
  border:1px solid var(--app-line);
  border-radius:var(--app-radius-lg);
  box-shadow:var(--app-shadow);
}
.app-card__head{
  padding:14px 18px;
  border-bottom:1px solid var(--app-line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.app-card__title{font-size:14px;font-weight:700;margin:0;letter-spacing:-.005em}
.app-card__sub{font-size:11.5px;color:var(--app-muted);margin:2px 0 0}
.app-card__body{padding:18px}
.app-card__foot{
  padding:12px 18px;border-top:1px solid var(--app-line);
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  background:#fbfcfd;border-radius:0 0 var(--app-radius-lg) var(--app-radius-lg);
}
.app-card--collapsed .app-card__body{display:none}
.app-card--collapsed .app-card__head{border-bottom:0}
.app-card__toggle{
  width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center;color:var(--app-muted);
  transition:transform .15s, background .15s;
}
.app-card__toggle:hover{background:#f1f3f6;color:var(--app-ink)}
.app-card__toggle--collapsed{transform:rotate(-90deg)}
.app-card__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;line-height:1;
  background:var(--app-red-soft);color:var(--app-red-ink);margin-left:8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  7. FORMS — pola, etykiety, hint/error, input, select, textarea,
 *             checkbox, radio, toggle switch, mic recording
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-field{display:flex;flex-direction:column;gap:6px}
.app-field__label{
  font-size:11.5px;color:var(--app-muted);font-weight:500;
}
.app-field__label--required::after{
  content:" *";color:var(--app-red);
}
.app-field__hint{font-size:11px;color:var(--app-muted);margin-top:2px}
.app-field__error{font-size:11.5px;color:var(--app-red-ink);margin-top:2px;display:flex;align-items:center;gap:4px}
.app-input, .app-select{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:9px 12px;
  border:1px solid var(--app-line);border-radius:8px;
  background:#fff;font-size:12.5px;color:var(--app-ink-2);
  font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.app-input:hover, .app-select:hover{border-color:#eef2f7}
.app-input:focus-within, .app-select:focus-within{
  border-color:var(--app-blue);
  box-shadow:0 0 0 3px rgba(31, 41, 55,.12);
}
.app-input--invalid, .app-select--invalid{
  border-color:var(--app-red);
  box-shadow:0 0 0 3px rgba(220,38,38,.10);
}
.app-input--disabled, .app-select--disabled{
  background:#f7f8fa;color:var(--app-muted-2);cursor:not-allowed;
}
.app-input input, .app-input textarea{
  border:0;outline:0;background:transparent;flex:1;font:inherit;color:inherit;min-width:0;width:100%;
}
.app-input input::placeholder, .app-input textarea::placeholder{color:var(--app-muted-2)}
.app-input__icon{color:var(--app-muted-2);flex-shrink:0}
.app-input__icon-btn{
  color:var(--app-muted);width:24px;height:24px;display:grid;place-items:center;border-radius:6px;
}
.app-input__icon-btn:hover{background:#f1f3f6;color:var(--app-ink-2)}
.app-input__icon-btn--mic.app-is-recording{color:var(--app-red);background:var(--app-red-soft)}
.app-textarea{
  align-items:flex-start;min-height:88px;
}
.app-textarea textarea{resize:vertical;min-height:64px}

.app-checkbox, .app-radio{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:12.5px;color:var(--app-ink-2);user-select:none;
}
.app-checkbox__box, .app-radio__box{
  width:16px;height:16px;border:1.5px solid #eef2f7;background:#fff;
  display:grid;place-items:center;color:#fff;flex-shrink:0;
  transition:border-color .15s, background .15s;
}
.app-checkbox__box{border-radius:4px}
.app-radio__box{border-radius:50%}
.app-checkbox--checked .app-checkbox__box,
.app-radio--checked .app-radio__box{
  background:var(--app-blue);border-color:var(--app-blue);
}
.app-radio--checked .app-radio__box::after{
  content:"";width:6px;height:6px;border-radius:50%;background:#fff;display:block;
}
.app-checkbox--checked .app-checkbox__box svg{display:block}
.app-checkbox__box svg{display:none}

.app-toggle{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  font-size:12.5px;color:var(--app-ink-2);
}
.app-toggle__track{
  width:34px;height:20px;border-radius:999px;background:#eef2f7;
  position:relative;transition:background .2s;flex-shrink:0;
}
.app-toggle__track::after{
  content:"";position:absolute;left:2px;top:2px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.15);transition:left .2s;
}
.app-toggle--on .app-toggle__track{background:var(--app-green)}
.app-toggle--on .app-toggle__track::after{left:16px}

/* ═══════════════════════════════════════════════════════════════════════════
 *  8. BUTTONS — primary/success/warning/danger/info/ghost/link/icon + rozmiary
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:9px;
  font-weight:600;font-size:12.5px;color:#fff;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 1px 2px rgba(0,0,0,.06);
  transition:filter .15s, transform .05s;
}
.app-btn:active{transform:translateY(1px)}
.app-btn:hover{filter:brightness(1.05)}
.app-btn--primary{background:var(--app-blue)}
.app-btn--success{background:var(--app-green)}
.app-btn--warning{background:var(--app-orange)}
.app-btn--danger {background:var(--app-red)}
.app-btn--info   {background:var(--app-purple)}
/* PR #262: app-btn--secondary - jasnoniebieskie tlo + ciemnoniebieski tekst,
   WCAG AA contrast 4.5:1+. Dla akcji secondary (np. legacy, alternatywne).
   Naprawia regresje po refactor CSS gdzie .app-btn bez modifier byl niewidoczny. */
.app-btn--secondary{background:var(--app-blue-soft);color:var(--app-blue-ink);border-color:var(--app-blue)}
.app-btn--secondary:hover{background:var(--app-blue);color:#fff}
.app-btn--ghost{
  background:#fff;color:var(--app-ink-2);
  border-color:var(--app-line);box-shadow:none;
}
.app-btn--ghost:hover{background:#fafbfc}
.app-btn--link{
  background:transparent;color:var(--app-blue-ink);box-shadow:none;padding:6px 8px;
}
.app-btn--link:hover{background:var(--app-blue-soft);filter:none}
.app-btn--icon{
  width:34px;height:34px;padding:0;display:inline-grid;place-items:center;
  background:#fff;border-color:var(--app-line);color:var(--app-muted);box-shadow:none;
}
.app-btn--icon:hover{background:#fafbfc;color:var(--app-ink-2)}
.app-btn--sm{padding:6px 10px;font-size:11.5px;border-radius:7px}
.app-btn--lg{padding:12px 18px;font-size:13.5px}
.app-btn--block{width:100%;justify-content:center}
.app-btn--disabled,.app-btn[disabled]{
  opacity:.55;cursor:not-allowed;filter:none;transform:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  9. PILLS — pigułki statusów (12 wariantów, z kropką-indicatorem)
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:600;line-height:1.5;
}
.app-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;
}
.app-pill--clean::before{display:none}
.app-pill--active   {background:var(--app-green-soft);  color:var(--app-green-ink)}
.app-pill--inactive {background:var(--app-slate-soft);  color:var(--app-slate-ink)}
.app-pill--progress {background:var(--app-blue-soft);   color:var(--app-blue-ink)}
.app-pill--done     {background:var(--app-green-soft);  color:var(--app-green-ink)}
.app-pill--pending  {background:var(--app-yellow-soft); color:var(--app-yellow-ink)}
.app-pill--warning  {background:var(--app-orange-soft); color:var(--app-orange-ink)}
.app-pill--error    {background:var(--app-red-soft);    color:var(--app-red-ink)}
.app-pill--draft    {background:var(--app-slate-soft);  color:var(--app-slate-ink)}
.app-pill--archived {background:#eef2f7;                color:#475569}
.app-pill--blocked  {background:var(--app-red-soft);    color:var(--app-red-ink)}
.app-pill--info     {background:var(--app-purple-soft); color:var(--app-purple-ink)}

/* ═══════════════════════════════════════════════════════════════════════════
 * 10. TABLES + PAGINATION — header/body/foot, expanded rows, selection bar
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-table{width:100%;border-collapse:collapse;font-size:12.5px}
.app-table thead th{
  text-align:left;font-size:10.5px;font-weight:600;color:var(--app-muted);
  text-transform:uppercase;letter-spacing:.06em;
  padding:12px 14px!important;border-bottom:1px solid var(--app-line)!important;
  background:#fbfcfd!important;
}
.app-table thead th:first-child{padding-left:20px!important}
.app-table thead th:last-child{padding-right:20px!important}
.app-table tbody td{
  padding:11px 14px!important;border-bottom:1px solid var(--app-line-2)!important;
  color:var(--app-ink-2)!important;vertical-align:middle;
}
.app-table tbody td:first-child{padding-left:20px!important}
.app-table tbody td:last-child{padding-right:20px!important}
.app-table tbody tr:hover{background:#fafbfc}
.app-table__cell--num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.app-table__cell--mono{font-family:'JetBrains Mono',monospace;font-size:12px}
.app-table__cell--actions{text-align:right;white-space:nowrap}
.app-table__row--selected td{background:#eef2f7}
.app-table__row--selected td:first-child{box-shadow:inset 3px 0 0 var(--app-blue)}
.app-table__row--expanded td{background:#fafbfc}
.app-table__row--child td{background:#fbfcfd}
.app-table__row--child td:first-child{padding-left:44px}
.app-table__expander{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;color:var(--app-muted);margin-right:6px;
  transition:transform .15s;cursor:pointer;vertical-align:middle;
}
.app-table__expander--open{transform:rotate(90deg)}
.app-table__row-actions{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;color:var(--app-muted);
}
.app-table__row-actions:hover{background:#f1f3f6;color:var(--app-ink)}
.app-table__foot{
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--app-line);background:#fbfcfd;
  border-radius:0 0 var(--app-radius-lg) var(--app-radius-lg);
}
.app-table__foot-info{font-size:11.5px;color:var(--app-muted)}
.app-pagination{display:inline-flex;align-items:center;gap:4px}
.app-pagination__btn{
  min-width:30px;height:30px;padding:0 10px;
  display:inline-grid;place-items:center;
  border:1px solid var(--app-line);border-radius:7px;background:#fff;
  font-size:12px;font-weight:600;color:var(--app-ink-2);
}
.app-pagination__btn:hover{background:#fafbfc}
.app-pagination__btn--active{background:var(--app-blue);color:#fff;border-color:var(--app-blue)}
.app-pagination__btn--disabled{opacity:.4;cursor:not-allowed}
.app-pagination__ellipsis{padding:0 6px;color:var(--app-muted)}
/* P18: pasek uniwersalnej paginacji — wyrównany do prawej (góra i dół listy). */
.app-pagination-bar{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px}
.app-pagination-bar__info{font-size:11.5px;color:var(--app-muted);margin-right:auto}
/* CEL 1 (2026-06-02): wybór liczby pozycji na stronę (25/50/100) w pasku paginacji. */
.app-page-size{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.app-page-size__label{font-size:11.5px;color:var(--app-muted)}

/* multi-select toolbar */
.app-table__selection-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 20px;background:var(--app-blue-soft);
  border-bottom:1px solid var(--app-line);
  font-size:12.5px;color:var(--app-blue-ink);font-weight:600;
}
.app-table__selection-bar .actions{display:flex;gap:8px}

/* ═══════════════════════════════════════════════════════════════════════════
 * 11. MATRIX — tabela kanał × kategoria (np. preferencje email właściciela)
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-matrix{width:100%;border-collapse:collapse;font-size:12.5px}
.app-matrix th, .app-matrix td{
  border:1px solid var(--app-line-2);padding:10px 12px;text-align:center;vertical-align:middle;
}
.app-matrix thead th{
  background:#fbfcfd;font-size:11px;font-weight:700;color:var(--app-ink-2);
  text-transform:uppercase;letter-spacing:.05em;
}
.app-matrix thead th:first-child{
  text-align:left;background:#fff;border-top:0;border-left:0;
}
.app-matrix tbody th{
  text-align:left;font-weight:600;color:var(--app-ink-2);background:#fff;
  width:180px;
}
.app-matrix tbody tr:hover td{background:#fafbfc}
.app-matrix__sub{font-size:10.5px;color:var(--app-muted);font-weight:500;margin-top:2px;display:block}
.app-matrix__legend{
  display:flex;gap:18px;font-size:11px;color:var(--app-muted);margin-top:12px;
  padding:8px 12px;background:#fafbfc;border-radius:8px;
}
.app-matrix__legend .app-checkbox{font-size:11px}

/* ═══════════════════════════════════════════════════════════════════════════
 * 12. ALERTS — info/success/warning/danger (z ikoną, treścią, close)
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-alert{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:var(--app-radius);
  border:1px solid transparent;
}
.app-alert__icon{flex-shrink:0;width:20px;height:20px;display:grid;place-items:center}
.app-alert__body{flex:1;min-width:0}
.app-alert__title{font-size:13px;font-weight:700;margin:0 0 2px}
.app-alert__text{font-size:12.5px;margin:0;line-height:1.5}
.app-alert__close{
  width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
  color:var(--app-muted);flex-shrink:0;
}
.app-alert__close:hover{background:rgba(15,23,42,.06);color:var(--app-ink)}
.app-alert--info   {background:var(--app-purple-soft); border-color:#eef2f7; color:var(--app-purple-ink)}
.app-alert--success{background:var(--app-green-soft);  border-color:#b7e4c7; color:var(--app-green-ink)}
.app-alert--warning{background:var(--app-orange-soft); border-color:#f5d6a8; color:var(--app-orange-ink)}
.app-alert--danger {background:var(--app-red-soft);    border-color:#f5b3b3; color:var(--app-red-ink)}

/* ═══════════════════════════════════════════════════════════════════════════
 * 13. TOASTS — auto-dismiss notifications, spawned by JS
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-toast-stack{
  position:relative;
  display:flex;flex-direction:column;gap:10px;
  min-height:60px;
}
.app-toast{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--app-line);
  box-shadow:var(--app-shadow-lg);
  max-width:380px;
  animation:appToastIn .25s ease-out;
}
@keyframes appToastIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.app-toast__icon{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;
}
.app-toast__body{flex:1;min-width:0}
.app-toast__title{font-size:12.5px;font-weight:700;margin:0 0 2px;color:var(--app-ink)}
.app-toast__text{font-size:11.5px;color:var(--app-muted);margin:0;line-height:1.4}
.app-toast__close{
  width:22px;height:22px;border-radius:5px;color:var(--app-muted-2);
  display:grid;place-items:center;flex-shrink:0;
}
.app-toast__close:hover{background:#f1f3f6;color:var(--app-ink)}
.app-toast--info    .app-toast__icon{background:var(--app-purple)}
.app-toast--success .app-toast__icon{background:var(--app-green)}
.app-toast--warning .app-toast__icon{background:var(--app-orange)}
.app-toast--danger  .app-toast__icon{background:var(--app-red)}

/* ═══════════════════════════════════════════════════════════════════════════
 * 14. RIGHT RAIL — prawa kolumna (cards, quick actions, status, list,
 *                  timeline, validation, badges)
 *  ⚠️ Brak twardej kolizji, ale .app-rail dotyka layoutu — patrz sekcja 9 docs.
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-rail{
  padding:18px 18px 28px;
  display:flex;flex-direction:column;gap:16px;
  border-left:1px solid var(--app-line);background:#fafbfc;
  position:sticky;top:0;height:100%;overflow:auto;
}
.app-rail__card{
  background:#fff;border:1px solid var(--app-line);
  border-radius:12px;padding:14px;
}
.app-rail__title{font-weight:700;font-size:13px;letter-spacing:-.005em;margin:0}
.app-rail__sub{color:var(--app-muted);font-size:11.5px;margin:3px 0 12px}
.app-rail__link{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--app-blue-ink);font-weight:600;font-size:12px;margin-top:12px;
}
.app-rail__link:hover{text-decoration:underline}

/* warianty .app-rail (dodane 2026-05-17) */
.app-rail--collapsed{width:60px;padding:18px 8px 28px}
.app-rail--collapsed .app-rail__title,
.app-rail--collapsed .app-rail__sub,
.app-rail--collapsed .app-rail-list,
.app-rail--collapsed .app-rail-status{display:none}
.app-rail--no-bg{background:transparent;border-left:0}

/* Quick actions */
.app-rail-qa{display:flex;flex-direction:column;gap:8px}
.app-rail-qa__btn{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:9px;
  font-weight:600;font-size:12.5px;color:#fff;
  width:100%;text-align:left;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 1px 1.5px rgba(0,0,0,.05);
}
.app-rail-qa__btn--success{background:var(--app-green)}
.app-rail-qa__btn--warning{background:var(--app-orange)}
.app-rail-qa__btn--primary{background:var(--app-blue)}
.app-rail-qa__btn--info   {background:var(--app-purple)}
.app-rail-qa__btn--ghost  {background:#fff;color:var(--app-ink-2);border:1px solid var(--app-line);box-shadow:none}

/* Status rows + badges */
.app-rail-status{display:flex;flex-direction:column}
.app-rail-status__row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 0;border-bottom:1px solid var(--app-line-2);
  font-size:12.5px;
}
.app-rail-status__row:last-child{border-bottom:0;padding-bottom:0}
.app-rail-status__row:first-child{padding-top:4px}
.app-rail-status__k{color:var(--app-ink-2)}
.app-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;padding:3px 8px;border-radius:999px;
  font-weight:700;font-size:11.5px;line-height:1;font-variant-numeric:tabular-nums;
}
.app-badge--red    {background:var(--app-red-soft);    color:var(--app-red-ink)}
.app-badge--orange {background:var(--app-orange-soft); color:var(--app-orange-ink)}
.app-badge--yellow {background:var(--app-yellow-soft); color:var(--app-yellow-ink)}
.app-badge--green  {background:var(--app-green-soft);  color:var(--app-green-ink)}
.app-badge--blue   {background:var(--app-blue-soft);   color:var(--app-blue-ink)}
.app-badge--slate  {background:var(--app-slate-soft);  color:var(--app-slate-ink)}

/* Generic list (history/recent) */
.app-rail-list{display:flex;flex-direction:column}
.app-rail-list__item{
  padding:10px 0;border-bottom:1px solid var(--app-line-2);
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.app-rail-list__item:first-child{padding-top:4px}
.app-rail-list__item:last-child{border-bottom:0;padding-bottom:0}
.app-rail-list__primary{font-size:12.5px;font-weight:600;color:var(--app-ink)}
.app-rail-list__secondary{font-size:11.5px;color:var(--app-muted);margin-top:2px}
.app-rail-list__meta{font-size:11px;color:var(--app-muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Timeline (audit log style) */
.app-rail-timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:18px}
.app-rail-timeline::before{
  content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--app-line);
}
.app-rail-timeline__item{position:relative;padding:6px 0 14px}
.app-rail-timeline__item::before{
  content:"";position:absolute;left:-15px;top:10px;
  width:8px;height:8px;border-radius:50%;background:var(--app-blue);
  box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--app-blue-soft);
}
.app-rail-timeline__item--success::before{background:var(--app-green);box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--app-green-soft)}
.app-rail-timeline__item--warning::before{background:var(--app-orange);box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--app-orange-soft)}
.app-rail-timeline__date{font-size:10.5px;color:var(--app-muted);font-variant-numeric:tabular-nums}
.app-rail-timeline__title{font-size:12px;font-weight:600;color:var(--app-ink);margin-top:2px}
.app-rail-timeline__text{font-size:11.5px;color:var(--app-muted);margin-top:2px}

/* Validation rows (ok/warn/err) */
.app-rail-valid{display:flex;flex-direction:column;gap:8px}
.app-rail-valid__row{
  display:flex;align-items:center;gap:8px;font-size:12px;
}
.app-rail-valid__row svg{flex-shrink:0}
.app-rail-valid__row--ok{color:var(--app-green-ink)}
.app-rail-valid__row--warn{color:var(--app-orange-ink)}
.app-rail-valid__row--err{color:var(--app-red-ink)}

/* ═══════════════════════════════════════════════════════════════════════════
 * 15. PAGE TABS — taby w obrębie strony (np. zakładki uchwały)
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-page-tabs{
  display:flex;align-items:center;gap:2px;
  border-bottom:1px solid var(--app-line);
  padding:0 4px;
}
.app-page-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 14px;
  font-size:12.5px;font-weight:600;color:var(--app-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  /* Naprawa 6 (regresja zakładek Czynsze): zakładka to <a>, więc bez jawnego
     resetu globalny styl linków podkreślał ją na części podstron (Dokumenty
     rozliczeniowe). Wymuszamy brak podkreślenia dla WSZYSTKICH zakładek —
     spójnie na każdej podstronie, niezależnie od stylów strony. */
  text-decoration:none;
}
.app-page-tab:hover{color:var(--app-ink-2);text-decoration:none}
.app-page-tab:focus,.app-page-tab:active{text-decoration:none}
.app-page-tab--active{
  color:var(--app-blue-ink);border-bottom-color:var(--app-blue);
}
.app-page-tab__badge{
  display:inline-grid;place-items:center;
  min-width:18px;height:18px;padding:0 6px;
  border-radius:999px;background:var(--app-slate-soft);color:var(--app-slate-ink);
  font-size:10.5px;font-weight:700;
}
.app-page-tab--active .app-page-tab__badge{background:var(--app-blue-soft);color:var(--app-blue-ink)}

/* P51: zakładki sekcji Czynsze jako PRZYCISKI (tło + ramka). Aktywna wyróżniona (ciemny grafit,
   biały tekst), nieaktywne stonowane z hover. Bez podkreśleń. Paleta grafit/slate — bez niebieskiego.
   Scoped modyfikatorem, by nie zmieniać zakładek innych sekcji (mailingi/konserwacja/uchwały). */
.app-page-tabs--buttons{
  border-bottom:none;
  flex-wrap:wrap;
  gap:6px;
  padding:0;
}
.app-page-tabs--buttons .app-page-tab{
  border:1px solid var(--app-line);
  border-radius:8px;
  background:var(--app-surface-soft);
  color:var(--app-muted);
  margin-bottom:0;
  padding:8px 14px;
}
.app-page-tabs--buttons .app-page-tab:hover{
  background:var(--app-surface-cool);
  color:var(--app-ink-2);
  border-color:var(--app-line-strong);
}
.app-page-tabs--buttons .app-page-tab--active{
  background:var(--app-ink);
  color:#ffffff;
  border-color:var(--app-ink);
}
.app-page-tabs--buttons .app-page-tab--active:hover{
  background:var(--app-ink);
  color:#ffffff;
}

/* Naprawa (2026-05-28): kolorowe nieaktywne zakładki w sekcji Czynsze (paleta app-*).
   Aktywna zakładka pozostaje grafit (--app-ink) — reguły --active mają wyższą specyficzność,
   więc kolor app-page-tab--color-X obowiązuje tylko gdy nie jest aktywna.
   Hover dodaje ciemniejszą ramkę (-ink) bez zmiany tła — zachowanie spójne z palety. */
.app-page-tabs--buttons .app-page-tab--color-blue:not(.app-page-tab--active){
  background:var(--app-blue-soft);   color:var(--app-blue-ink);   border-color:var(--app-blue-soft);
}
.app-page-tabs--buttons .app-page-tab--color-blue:not(.app-page-tab--active):hover{
  background:var(--app-blue-soft);   color:var(--app-blue-ink);   border-color:var(--app-blue-ink);
}
.app-page-tabs--buttons .app-page-tab--color-purple:not(.app-page-tab--active){
  background:var(--app-purple-soft); color:var(--app-purple-ink); border-color:var(--app-purple-soft);
}
.app-page-tabs--buttons .app-page-tab--color-purple:not(.app-page-tab--active):hover{
  background:var(--app-purple-soft); color:var(--app-purple-ink); border-color:var(--app-purple-ink);
}
.app-page-tabs--buttons .app-page-tab--color-orange:not(.app-page-tab--active){
  background:var(--app-orange-soft); color:var(--app-orange-ink); border-color:var(--app-orange-soft);
}
.app-page-tabs--buttons .app-page-tab--color-orange:not(.app-page-tab--active):hover{
  background:var(--app-orange-soft); color:var(--app-orange-ink); border-color:var(--app-orange-ink);
}
.app-page-tabs--buttons .app-page-tab--color-green:not(.app-page-tab--active){
  background:var(--app-green-soft);  color:var(--app-green-ink);  border-color:var(--app-green-soft);
}
.app-page-tabs--buttons .app-page-tab--color-green:not(.app-page-tab--active):hover{
  background:var(--app-green-soft);  color:var(--app-green-ink);  border-color:var(--app-green-ink);
}
.app-page-tabs--buttons .app-page-tab--color-teal:not(.app-page-tab--active){
  background:var(--app-teal-soft);   color:var(--app-teal-ink);   border-color:var(--app-teal-soft);
}
.app-page-tabs--buttons .app-page-tab--color-teal:not(.app-page-tab--active):hover{
  background:var(--app-teal-soft);   color:var(--app-teal-ink);   border-color:var(--app-teal-ink);
}
.app-page-tabs--buttons .app-page-tab--color-cyan:not(.app-page-tab--active){
  background:var(--app-cyan-soft);   color:var(--app-cyan-ink);   border-color:var(--app-cyan-soft);
}
.app-page-tabs--buttons .app-page-tab--color-cyan:not(.app-page-tab--active):hover{
  background:var(--app-cyan-soft);   color:var(--app-cyan-ink);   border-color:var(--app-cyan-ink);
}
.app-page-tabs--buttons .app-page-tab--color-red:not(.app-page-tab--active){
  background:var(--app-red-soft);    color:var(--app-red-ink);    border-color:var(--app-red-soft);
}
.app-page-tabs--buttons .app-page-tab--color-red:not(.app-page-tab--active):hover{
  background:var(--app-red-soft);    color:var(--app-red-ink);    border-color:var(--app-red-ink);
}
.app-page-tabs--buttons .app-page-tab--color-yellow:not(.app-page-tab--active){
  background:var(--app-yellow-soft); color:var(--app-yellow-ink); border-color:var(--app-yellow-soft);
}
.app-page-tabs--buttons .app-page-tab--color-yellow:not(.app-page-tab--active):hover{
  background:var(--app-yellow-soft); color:var(--app-yellow-ink); border-color:var(--app-yellow-ink);
}
.app-page-tabs--buttons .app-page-tab--color-pink:not(.app-page-tab--active){
  background:var(--app-pink-soft);   color:var(--app-pink-ink);   border-color:var(--app-pink-soft);
}
.app-page-tabs--buttons .app-page-tab--color-pink:not(.app-page-tab--active):hover{
  background:var(--app-pink-soft);   color:var(--app-pink-ink);   border-color:var(--app-pink-ink);
}
.app-page-tabs--buttons .app-page-tab--color-slate:not(.app-page-tab--active){
  background:var(--app-slate-soft);  color:var(--app-slate-ink);  border-color:var(--app-slate-soft);
}
.app-page-tabs--buttons .app-page-tab--color-slate:not(.app-page-tab--active):hover{
  background:var(--app-slate-soft);  color:var(--app-slate-ink);  border-color:var(--app-slate-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 16. STICKY SAVE BAR — przyklejony na dole formularzy z dirty state
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-sticky-save{
  position:sticky;bottom:0;
  margin:0 -20px -18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 20px;
  background:#fff;border-top:1px solid var(--app-line);
  box-shadow:0 -4px 12px rgba(15,23,42,.05);
  z-index:5;
}
.app-sticky-save__msg{font-size:12.5px;color:var(--app-muted);display:flex;align-items:center;gap:8px}
.app-sticky-save__msg b{color:var(--app-ink-2);font-weight:600}
.app-sticky-save__msg--dirty b{color:var(--app-orange-ink)}
.app-sticky-save__actions{display:flex;gap:9px}

/* ═══════════════════════════════════════════════════════════════════════════
 * 17. EDGE CASES — empty/loading/error/no-permission states
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-empty, .app-loading, .app-error-state, .app-no-permission{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;text-align:center;gap:8px;
}
.app-empty__icon, .app-loading__icon, .app-error-state__icon, .app-no-permission__icon{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px;
}
.app-empty__icon{background:var(--app-slate-soft);color:var(--app-slate-ink)}
.app-loading__icon{background:var(--app-blue-soft);color:var(--app-blue-ink)}
.app-error-state__icon{background:var(--app-red-soft);color:var(--app-red-ink)}
.app-no-permission__icon{background:var(--app-orange-soft);color:var(--app-orange-ink)}
.app-empty__title, .app-loading__title, .app-error-state__title, .app-no-permission__title{
  font-size:14px;font-weight:700;margin:0;color:var(--app-ink);
}
.app-empty__text, .app-loading__text, .app-error-state__text, .app-no-permission__text{
  font-size:12.5px;color:var(--app-muted);margin:0;max-width:380px;line-height:1.5;
}
.app-empty__actions{display:flex;gap:9px;margin-top:8px}
.app-loading__spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--app-blue-soft);border-top-color:var(--app-blue);
  animation:appSpin .8s linear infinite;
}
@keyframes appSpin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════════════════
 * 18. MODAL — fixed overlay + dialog, Escape closes (JS), animated in
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-modal{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:flex-start;justify-content:center;
  padding:60px 20px;
}
.app-modal--open{display:flex}
.app-modal__overlay{
  position:absolute;inset:0;background:rgba(15,23,42,.45);
  backdrop-filter:blur(2px);
}
.app-modal__dialog{
  position:relative;background:#fff;border-radius:14px;
  box-shadow:var(--app-shadow-lg);
  max-width:520px;width:100%;overflow:hidden;
  animation:appModalIn .2s ease-out;
}
@keyframes appModalIn{
  from{opacity:0;transform:translateY(-12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.app-modal__head{
  padding:16px 20px;border-bottom:1px solid var(--app-line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.app-modal__title{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em}
.app-modal__body{padding:18px 20px;font-size:13px;color:var(--app-ink-2);line-height:1.55}
.app-modal__foot{
  padding:12px 20px;border-top:1px solid var(--app-line);background:#fbfcfd;
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
}
/* Static preview wrapper (modal embedded inline, not fixed) */
.app-modal-static .app-modal__dialog{margin:0 auto;max-width:520px}

/* ═══════════════════════════════════════════════════════════════════════════
 * 19. DROPDOWN — click-to-open menu, click-outside closes (JS)
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-dropdown{position:relative;display:inline-block}
.app-dropdown__menu{
  position:absolute;top:calc(100% + 6px);left:0;
  background:#fff;border:1px solid var(--app-line);border-radius:10px;
  box-shadow:var(--app-shadow-lg);
  min-width:200px;padding:6px;z-index:10;
  display:none;
}
.app-dropdown--open .app-dropdown__menu{display:block}
.app-dropdown__item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:7px;
  font-size:12.5px;color:var(--app-ink-2);font-weight:500;
  text-align:left;
}
.app-dropdown__item:hover{background:#f5f7fa}
.app-dropdown__item--danger{color:var(--app-red-ink)}
.app-dropdown__item--danger:hover{background:var(--app-red-soft)}
.app-dropdown__divider{height:1px;background:var(--app-line);margin:4px 0}
.app-dropdown__section{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--app-muted);padding:6px 10px 4px;
}
/* Static wrapper (always-open variant for documentation/embedded) */
.app-dropdown--static .app-dropdown__menu{
  position:static;display:block;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 20. TOOLTIP — hover/focus, opcjonalnie .app-tooltip--visible (kontrolowany)
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-tooltip{position:relative;display:inline-block}
.app-tooltip__content{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--app-ink);color:#fff;
  padding:6px 10px;border-radius:6px;
  font-size:11.5px;font-weight:500;white-space:nowrap;
  box-shadow:var(--app-shadow);
  opacity:0;pointer-events:none;transition:opacity .15s;
  z-index:20;
}
.app-tooltip__content::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--app-ink);
}
.app-tooltip:hover .app-tooltip__content,
.app-tooltip:focus-within .app-tooltip__content,
.app-tooltip--visible .app-tooltip__content{opacity:1}

/* PR G — ikonka "i" z multi-line podpowiedzia kontekstowa */
.app-info-icon{
  display:inline-grid;place-items:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--app-line-blue);color:var(--app-blue-ink);
  font-size:11px;font-weight:800;font-style:italic;
  cursor:help;vertical-align:middle;margin-left:6px;
  text-decoration:none;line-height:1;
}
.app-info-icon::before{content:"i"}
.app-tooltip:hover .app-info-icon,
.app-tooltip:focus-within .app-info-icon{background:var(--app-blue);color:#fff}
.app-tooltip:focus-visible,
.app-tooltip:focus-within{outline:none}
.app-tooltip:focus-visible .app-info-icon,
.app-tooltip:focus-within .app-info-icon{box-shadow:0 0 0 2px var(--app-blue),0 0 0 4px rgba(31, 41, 55,.25)}
.app-tooltip__content--help{
  /* PR #0f172a: width:max-content + min-width zapobiega kompresji do 1 litera/linia.
     Bez width:max-content elementu absolute z left:50%;translateX(-50%), gdy parent
     .app-tooltip jest display:inline-block o szerokosci ikonki (~18px), browser stosuje
     shrink-to-fit do najwezszego mozliwego boxa. */
  white-space:normal;max-width:280px;
  width:max-content;min-width:220px;
  padding:10px 12px;line-height:1.4;text-align:left;
  font-weight:400;font-size:12px;
}
/* PR kosmetyka: flip tooltip POD ikonke gdy ikonka jest blisko gory strony
   (default .app-tooltip__content ma bottom:calc(100%+8px) -- wychodzi POWYZEJ
   parenta; dla naglowkow blisko viewport top tooltip wystaje poza viewport
   i browser go nie renderuje). Modyfikator dla scenariuszy "header tuz pod naviem".
*/
.app-tooltip__content--help-below{
  top:calc(100% + 8px);
  bottom:auto;
}
.app-tooltip__content--help-below::after{
  /* Strzalka ARROW skierowana W GORE (bo tooltip jest PONIZEJ ikonki). */
  top:auto;
  bottom:100%;
  border-top-color:transparent;
  border-bottom-color:var(--app-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 20b. ATTENTION WIDGET — PR F MVP
 *   .attention-widget: card na pulpicie glownym (nad strefa B "Wymaga uwagi dzis")
 *   5 sekcji operacyjnych: anomalia/draft/email/zombie/failed_notif
 *   Sekcje puste UKRYTE w template. Collapse przez localStorage (per-browser).
 * ═══════════════════════════════════════════════════════════════════════════ */
.attention-widget{
  background:#f5f9ff;border:1px solid #eef2f7;border-radius:10px;
  padding:14px 18px;margin-bottom:18px;
}
.attention-widget__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;
}
.attention-widget__title{
  margin:0;font-size:15px;font-weight:700;color:var(--app-ink);display:flex;align-items:center;gap:8px;
}
.attention-widget__count{
  background:var(--app-blue);color:#fff;border-radius:999px;
  padding:2px 9px;font-size:12px;font-weight:700;
}
.attention-widget__toggle{
  background:transparent;border:1px solid #eef2f7;color:var(--app-blue-ink);
  padding:4px 12px;border-radius:6px;font-size:12px;cursor:pointer;
}
.attention-widget__toggle:hover{background:#eef2f7}
.attention-widget__body{display:flex;flex-direction:column;gap:12px}
.attention-widget--collapsed .attention-widget__body{display:none}
.attention-empty{
  display:flex;align-items:center;gap:10px;
  background:#e7f7ec;border:1px solid #a4d8b6;color:#1f6f3a;
  padding:8px 12px;border-radius:6px;font-size:13px;
}
.attention-empty__icon{font-weight:700;font-size:16px}
.attention-section{background:#fff;border:1px solid var(--app-line);border-radius:8px;padding:10px 12px}
.attention-section__head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 6px;font-size:13px;font-weight:700;color:var(--app-ink);
}
.attention-section__count{
  background:#eef1f5;color:var(--app-ink);border-radius:999px;
  padding:2px 8px;font-size:11px;font-weight:700;
}
.attention-severity-low{background:#fff7e6;color:#7d4a00}
.attention-severity-medium{background:#ffe6cc;color:#9c4a00}
.attention-severity-high{background:#fde8e8;color:#921313}
.attention-section__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.attention-item a{
  display:block;padding:8px 10px;border-radius:6px;
  text-decoration:none;color:var(--app-ink);background:#fafbfd;
  border-left:3px solid #eef2f7;transition:background .12s;
}
.attention-item a:hover{background:#eef2f7}
.attention-item--low a{border-left-color:#f5b66b}
.attention-item--medium a{border-left-color:#ee8a3a}
.attention-item--high a{border-left-color:#d83a3a}
.attention-item__title{display:block;font-size:13px;font-weight:600;color:var(--app-ink);margin-bottom:2px}
.attention-item__sub{display:block;font-size:11.5px;color:var(--app-muted);line-height:1.4}

/* ═══════════════════════════════════════════════════════════════════════════
 * 20d. HISTORIA PACZEK — PR I
 *   .charges-history-stats: grid 4 cards z agregami
 *   #charges-history-chart: SVG (natywny, bez Chart.js)
 *   .charges-history-table: tabela z kolorowaniem cancelled + anomalia
 * ═══════════════════════════════════════════════════════════════════════════ */
.charges-history-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;margin-bottom:16px;
}
@media(max-width:900px){.charges-history-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.charges-history-stat{
  background:#fff;border:1px solid var(--app-line);border-radius:8px;
  padding:14px 16px;
}
.charges-history-stat__value{font-size:20px;font-weight:700;color:var(--app-ink);line-height:1.2}
.charges-history-stat__label{font-size:11.5px;color:var(--app-muted);margin-top:4px}
.charges-history-stat--max .charges-history-stat__value{color:#0e7f33}
.charges-history-stat--min .charges-history-stat__value{color:#94a3b8}
.charges-history-chart-wrap{padding:10px 16px}
#charges-history-chart{width:100%;height:auto;max-height:280px;display:block}
.charges-history-row--cancelled{background:#f8fafc;color:#94a3b8}
.charges-history-row--cancelled a{color:#94a3b8}
.anomaly-indicator{cursor:help;font-size:14px}

/* ═══════════════════════════════════════════════════════════════════════════
 * 20c. PDF ZAWIADOMIENIA — PR G
 *   .charge-pdf-link: mała ikonka 📄 obok statusu pozycji, link inline preview
 * ═══════════════════════════════════════════════════════════════════════════ */
.charge-pdf-link{
  display:inline-block;margin-left:6px;text-decoration:none;
  font-size:14px;line-height:1;opacity:.7;transition:opacity .12s;
}
.charge-pdf-link:hover{opacity:1;text-decoration:none}

/* ═══════════════════════════════════════════════════════════════════════════
 * 20a. ANOMALIE NALICZEN — PR E
 *   .anomaly-alert: zolty pasek nad tabela pozycji paczki DRAFT
 *   .rent-row-anomaly: jasny czerwony wiersz, tooltip uzywa .app-tooltip
 * ═══════════════════════════════════════════════════════════════════════════ */
.anomaly-alert{
  background:#fff7e6;border:1px solid #f5b66b;color:#7d4a00;
  padding:10px 14px;border-radius:6px;font-size:13px;
  margin-bottom:14px;line-height:1.4;
}
.rent-row-anomaly{background:#fde8e8}
.rent-row-anomaly:hover{background:#fbd4d4}
.rent-row-anomaly td{position:relative}

/* ═══════════════════════════════════════════════════════════════════════════
 * 21. PROGRESS — pasek postępu z wariantami kolorów i striped animation
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-progress{
  width:100%;height:8px;background:#eef1f5;border-radius:999px;overflow:hidden;
}
.app-progress__bar{
  height:100%;background:var(--app-blue);border-radius:999px;
  transition:width .3s ease;
}
.app-progress--success .app-progress__bar{background:var(--app-green)}
.app-progress--warning .app-progress__bar{background:var(--app-orange)}
.app-progress--danger  .app-progress__bar{background:var(--app-red)}
.app-progress--striped .app-progress__bar{
  background-image:linear-gradient(45deg,
    rgba(255,255,255,.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.15) 75%, transparent 75%);
  background-size:16px 16px;
}
.app-progress-row{display:flex;align-items:center;gap:12px;font-size:12px}
.app-progress-row__label{min-width:120px;color:var(--app-ink-2);font-weight:500}
.app-progress-row__value{font-variant-numeric:tabular-nums;color:var(--app-muted);min-width:50px;text-align:right}

/* ═══════════════════════════════════════════════════════════════════════════
 * 22. KPI — karty z liczbami u góry widoków (dodane 2026-05-17)
 *     Wzorzec z dashboard-kpi-v543.css (.kpi-grid + .kpi-card-link).
 *     Grid auto-fit 220px, hover effect z translateY i blue shadow.
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:14px;
  align-items:stretch;
}
.app-kpi{
  display:flex;align-items:center;gap:14px;
  background:var(--app-card);
  border:1px solid var(--app-line);
  border-radius:var(--app-radius-lg);
  box-shadow:var(--app-shadow);
  padding:16px;min-width:0;height:100%;
  color:inherit;text-decoration:none;
}
.app-kpi__icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--app-slate-soft);color:var(--app-slate-ink);
  flex-shrink:0;
}
.app-kpi__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.app-kpi__value{
  font-size:var(--app-fs-22);font-weight:700;line-height:1.05;
  color:var(--app-ink);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.app-kpi__label{
  font-size:11.5px;color:var(--app-muted);font-weight:500;
  overflow-wrap:anywhere;
}
.app-kpi__trend{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px;
}
.app-kpi__trend--up{color:var(--app-green-ink)}
.app-kpi__trend--down{color:var(--app-red-ink)}
.app-kpi__trend--flat{color:var(--app-muted)}
.app-kpi--blue   .app-kpi__icon{background:var(--app-blue-soft);   color:var(--app-blue-ink)}
.app-kpi--green  .app-kpi__icon{background:var(--app-green-soft);  color:var(--app-green-ink)}
.app-kpi--orange .app-kpi__icon{background:var(--app-orange-soft); color:var(--app-orange-ink)}
.app-kpi--red    .app-kpi__icon{background:var(--app-red-soft);    color:var(--app-red-ink)}
.app-kpi--purple .app-kpi__icon{background:var(--app-purple-soft); color:var(--app-purple-ink)}
.app-kpi--teal   .app-kpi__icon{background:var(--app-teal-soft);   color:var(--app-teal-ink)}
.app-kpi--link{transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
.app-kpi--link:hover{
  border-color:#94a3b8;
  box-shadow:var(--app-shadow-lg);
  transform:translateY(-1px);
}
.app-kpi--link:focus-visible{
  outline:3px solid rgba(31, 41, 55,.24);outline-offset:2px;
}
@media (max-width:760px){
  .app-kpi-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 23. FILTERS — pasek filtrów nad tabelami (dodane 2026-05-17)
 *     Wzorzec z table-filter-v541.css (.filters form grid auto-fit 190px).
 *     Wewnetrznie uzywa .app-field z sekcji 7 (label + input).
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-filters{
  background:var(--app-card);
  border:1px solid var(--app-line);
  border-radius:var(--app-radius-lg);
  box-shadow:var(--app-shadow-sm);
  padding:14px;
  margin-bottom:var(--app-sp-4);
  min-width:0;max-width:100%;
}
.app-filters__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:var(--app-sp-3);
  align-items:end;
  min-width:0;
}
.app-filters__actions{
  display:flex;align-items:center;gap:var(--app-sp-2);
  flex-wrap:wrap;justify-content:flex-end;
  margin-top:var(--app-sp-3);
  padding-top:var(--app-sp-3);border-top:1px solid var(--app-line-2);
}
.app-filters--inline{
  background:transparent;border:0;box-shadow:none;padding:0;
}
.app-filters--inline .app-filters__actions{border-top:0;padding-top:0;margin-top:var(--app-sp-2)}

/* ═══════════════════════════════════════════════════════════════════════════
 * 24. COMBOBOX — wyszukiwalna lista (dodane 2026-05-17)
 *     Wzorzec z community-combobox.css (input + dropdown z opcjami, chevron).
 *     Hybrid .app-input + .app-dropdown z opcjami przewijalnymi.
 * ═══════════════════════════════════════════════════════════════════════════ */
.app-combobox{position:relative;display:block;width:100%;min-width:0}
.app-combobox__input{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:9px 36px 9px 12px;
  border:1px solid var(--app-line);border-radius:8px;
  background:#fff;font-size:12.5px;color:var(--app-ink-2);font-family:inherit;
  min-height:38px;
  transition:border-color .15s, box-shadow .15s;
}
.app-combobox__input:hover{border-color:#eef2f7}
.app-combobox__input:focus{
  outline:0;border-color:var(--app-blue);
  box-shadow:0 0 0 3px rgba(31, 41, 55,.12);
}
.app-combobox__chev{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--app-muted-2);pointer-events:none;font-size:11px;
}
.app-combobox--open .app-combobox__chev{transform:translateY(-50%) rotate(180deg)}
.app-combobox__menu{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:#fff;border:1px solid var(--app-line);border-radius:10px;
  box-shadow:var(--app-shadow-lg);
  max-height:320px;overflow-y:auto;overscroll-behavior:contain;
  padding:4px;z-index:20;
  display:none;
}
.app-combobox--open .app-combobox__menu{display:block}
.app-combobox__option{
  display:block;width:100%;
  padding:8px 10px;border-radius:7px;
  background:transparent;border:0;text-align:left;cursor:pointer;
  font-size:12.5px;color:var(--app-ink-2);font-weight:500;line-height:1.3;
  overflow-wrap:anywhere;
}
.app-combobox__option:hover,
.app-combobox__option--active{background:var(--app-blue-soft);color:var(--app-blue-ink)}
.app-combobox__option--selected{
  background:var(--app-slate-soft);color:var(--app-ink);font-weight:700;
}
.app-combobox__option--selected.app-combobox__option--active{
  background:var(--app-blue-soft);color:var(--app-blue-ink);
}
.app-combobox__empty{
  padding:12px 10px;color:var(--app-muted);font-size:12px;text-align:center;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 25. GLOBAL OVERFLOW FIX + DEFENSIVE BUTTON OVERRIDES (dodane 2026-05-17)
 *
 *     PROBLEM 1: w widokach DS (Naliczania/Rozliczenia) tabela i prawy rail
 *     byly wycinane poza prawa krawedz .main.main-auth.
 *     Root cause: .wp-layout ma grid-template-columns: 1fr 280px (wspolnota-
 *     plus-v810.css:113) bez minmax(0, 1fr). Kolumna 1fr nie kurczy sie pod
 *     tabele z min-width:720px (z table-filter-v541.css:36), wiec sidebar
 *     wystaje poza container. .main.main-auth ma overflow-x:hidden (v210:52),
 *     wiec treść jest wycieta.
 *
 *     PROBLEM 2: .app-btn--icon (three-dots akcji w tabelach) dostawal
 *     niebieskie tlo z nieustalonego selektora globalnego (komentarz w
 *     fik-accounting-chart-v700.css:301 mowi ze taki istnial historycznie:
 *     ".app-shell-unified-v211 button { background: linear-gradient(...) }").
 *     Strategia: defensive !important w DS (na koncu cascade) zeby przebic
 *     cokolwiek z legacy. Nie ruszamy plikow legacy.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Containers — nigdy nie wychodzic poza rodzica */
.wp-page,
.app-page-head,
.app-card,
.app-filters,
.app-kpi-grid{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* wp-page hard container - overflow-x:hidden zatrzymuje rozpychanie przez
   dzieci ktore maja intrinsic-width wieksza niz parent (np. 11 tabow,
   wide actions) */
.wp-page{
  width:100%;
  overflow-x:hidden;
}

/* Grid layout dwukolumnowy - 1fr column MUSI miec min-width:0 zeby kurczyc
   sie pod tresc z min-width (tabela z min-width:720px).

   Round 5 (2026-05-17): kolumna 2 ze stalej 280px na clamp(220,18vw,280).
   Powod: na 1366px viewport main.main-auth = 1074, padding ~70 = content 1004,
   a grid 1fr+280+20gap potrzebuje min 300 -> 1fr=704. Powinno fit, ale user
   widzi sidebar wyciety po prawej (Widać tylko "Szybkie a"). Hipoteza: na
   wezszych ekranach (1200-1300px) lub przy zoomie >100%, sumaryczna szerokosc
   grid track przekracza parent z powodu dodatkowych paddingow/scrollbara
   ktore zjadaja viewport. Stala 280px nie kurczy sie, wiec sidebar wycieka.

   clamp(220,18vw,280) skaluje sidebar:
   - 1920px viewport: 18vw=346 -> clamp do 280px (maksymalny)
   - 1500px viewport: 18vw=270 -> 270px (zmienna)
   - 1280px viewport: 18vw=230 -> 230px (zmienna)
   - 1100px viewport: hit responsive @media -> 1fr (single col)

   Suma minimow grid = 0 + 220 = 220px, parent zawsze ma wiecej -> brak overflow. */
.wp-layout{
  grid-template-columns:minmax(0,1fr) clamp(220px,18vw,280px)!important;
}
.wp-layout > *{
  min-width:0;
  max-width:100%;
}
/* Sidebar wewnatrz .wp-layout musi pozwolic zawartosci sie skurczyc gdy
   kolumna < 280px (clamp moze dac 220-280). overflow-wrap:anywhere lamie
   dlugie slowa (np. emaile, URL-e) zamiast rozpychac. */
.wp-page .wp-sidebar,
.wp-page .wp-sidebar-card,
.wp-page .wp-sidebar-btn{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:anywhere;
}
.wp-page .wp-sidebar-btn{
  white-space:normal;
}
/* Responsive uzupelnienie - bez tego nasze !important blokowalo
   v810 responsive (@media max-width:1100px {.wp-layout{1fr}}) */
@media (max-width:1100px){
  .wp-layout{
    grid-template-columns:1fr!important;
  }
}

/* app-page-tabs - 11 tabow w widokach rents moze przepelniac flex container.
   overflow-x:auto daje horizontal scroll zamiast rozpychania rodzica */
.app-page-tabs{
  overflow-x:auto;
  max-width:100%;
  scrollbar-width:thin;
}
.app-page-tab{
  flex-shrink:0;
}

/* app-page-head__row + __actions - flex-wrap zeby 3+ przyciski akcji
   nie rozpychaly headera na waskich ekranach */
.app-page-head__row{
  flex-wrap:wrap;
  min-width:0;
}
.app-page-head__actions{
  flex-shrink:1;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
}

/* app-card__head - flex-wrap dla title + search/akcje (search 220px + button
   + tytul moga lacznie przekraczac szerokosc karty) */
.app-card__head{
  flex-wrap:wrap;
}
.app-card__head > *{
  min-width:0;
  max-width:100%;
}

/* Tabele wewnatrz kart - nie wychodza poza container, ale moga miec
   poziomy scroll w wrapper */
.app-card .app-table,
.app-card table{
  min-width:0;
  max-width:100%;
}
.app-card .wp-table-wrap,
.wp-page .wp-table-wrap{
  max-width:100%;
  overflow-x:auto;
  min-width:0;
}

/* Defensive override dla .app-btn--icon - przebij niebieski gradient z legacy */
.app-btn--icon,
button.app-btn--icon,
a.app-btn--icon{
  background:#fff!important;
  color:var(--app-muted)!important;
  border:1px solid var(--app-line)!important;
  box-shadow:none!important;
  background-image:none!important;
}
.app-btn--icon:hover,
button.app-btn--icon:hover,
a.app-btn--icon:hover{
  background:#fafbfc!important;
  color:var(--app-ink-2)!important;
  border-color:var(--app-line)!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ROUND 4 (2026-05-17) — targeted wp-page overflow fix po revertcie round 3
 *
 *  Round 3 (commit 9a706ba12, ZREVERTOWANY) skopiowal wzor z FIK 1:1:
 *  table-layout:fixed + duplicate width/margin/padding na .main.main-auth.
 *  To bylo blad: FIK ma WLASNY inner <main class="fkv700-main"> wewnatrz
 *  .main.main-auth z wlasnymi width/padding, a rents NIE MA tej warstwy —
 *  uzywa .wp-page bezposrednio. Plus table-layout:fixed na 9-kolumnowej tabeli
 *  zgnata cells zamiast naprawiac overflow.
 *
 *  Round 4 podchodzi inaczej: zero kopiowania FIK, zero override .main.main-auth
 *  (juz ma poprawne width: calc(100vw - 292px) z sidebar-icons-v545.css:312-317),
 *  tylko zalatanie konkretnej dziury w lancuchu min-width:0:
 *
 *    .wp-page (✓ linia 1067)
 *    └─ .wp-layout > * (✓ linia 1085) — pusty <div> wrapper kolumny grid 1fr
 *       └─ .app-card (✓ linia 1067)
 *          └─ .app-card__body (✗ BRAK) ← TUTAJ jest dziura
 *             └─ .wp-table-wrap (✓ linia 1142)
 *                └─ table.app-table (width:100% z linii 459)
 *
 *  Bez min-width:0 na .app-card__body, intrinsic min-content moze wyciec
 *  pod elementami z explicit width (np. flex-shrink:0 buttons) i rozpychac
 *  .app-card poza dostepna szerokosc kolumny grid 1fr.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Latanie dziury w lancuchu min-width:0 — .app-card__body byl jedyna
   warstwa bez explicit min-width:0 miedzy .wp-layout a .wp-table-wrap */
.wp-page .app-card__body{
  min-width:0;
  max-width:100%;
}

/* Defensywne min-width:0 + overflow-x:clip na pustym <div> wrapper kolumny
   grid 1fr (.wp-layout > div). .wp-layout > * juz to robi (linia 1085) ale
   wymuszamy explicit overflow-x:clip jako safety net na wypadek gdyby
   intrinsic content z table cells (np. button szerokosci 28px z flex-shrink:0)
   wyciekal pomimo min-width:0. */
.wp-page .wp-layout > div{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}

/* Tabela explicit width:100% + max-width:100% — DS:459 juz ma width:100%,
   ale wymuszamy defensive na wypadek gdyby table-filter-v541.css:25-39
   rozszerzylo selektor list o .wp-table-wrap w przyszlosci. */
.wp-page .wp-table-wrap > table{
  width:100%;
  max-width:100%;
  min-width:0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ROUND 6 (2026-05-17) — REALNY ROOT CAUSE: community-combobox rozpycha
 *  .app-filters__grid w widokach .wp-page przez min-width:480px.
 *
 *  Round 4 (min-width:0 chain) i Round 5 (clamp sidebar 220-280px) nie
 *  zadzialaly bo problem nie byl w grid track sidebara - byl w grid track
 *  PIERWSZEGO FILTRU "Wspolnota" w .app-filters__grid.
 *
 *  Sekwencja zdarzen:
 *  1. <select name="community"> w app-filters jest auto-enhanced przez
 *     community-combobox.js:18-44 (matche name === "community")
 *  2. JS oborazuje <select> w wrapper <div class="community-combobox">
 *  3. community-combobox.css:17-22 wymusza:
 *     .community-combobox { min-width: min(100%, 480px) !important }
 *  4. .app-filters__grid uzywa repeat(auto-fit, minmax(min(100%, 190px), 1fr))
 *     auto-fit liczy track minimum = max(190, intrinsic_min_content_of_items)
 *  5. intrinsic min-content of .app-field zawierajacego combobox = 480px
 *  6. Wszystkie track w grid musza miec ten sam minimum -> 480px each
 *  7. 4 tracks * 480px + 3 * 14gap = 1962px (wymagane minimum)
 *  8. Na 1366px laptop content area .wp-page = ~1004px << 1962px
 *  9. Grid wraps do 2 rzedow x 2 kolumn (~482px each) ale i tak rozpycha
 *     .app-filters do ~1000px
 *  10. .wp-page ma overflow-x:hidden (linia 1077) -> obcina prawa krawedz
 *  11. .wp-layout w .wp-page ma 1fr + sidebar - prawa kolumna .wp-sidebar
 *      odpychana ZA prawa krawedz .wp-page (matematyka grid track)
 *
 *  Wizualnie: lewa kolumna (.app-card z tabela) wyglada OK, prawa (.wp-sidebar)
 *  wycieta po prawej (uzytkownik widzi tylko "Szybkie a").
 *
 *  Fix: scope override min-width comboboxa do 0 W KONTEKSCIE .wp-page.
 *  Inne widoki (FIK accounting, dashboards, owner portal) NIE sa dotkniete
 *  - tam community-combobox dalej ma min-width:480px (potrzebne dla UX
 *  szerokich dropdown z dlugimi nazwami wspolnot).
 *
 *  Zaden inny fix (table-layout:fixed, sidebar width, padding override)
 *  nie tknal tego problemu bo szukalismy zlej przyczyny - tabela byla
 *  ofiara, nie sprawca. Sprawca: combobox w filtrach.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Override min-width:min(100%,480px) z community-combobox.css:20 w .wp-page.
   Combobox w widokach rents (Naliczanie, Rozliczenia) ma width:100% kolumny
   grid filtru, bez wymuszania 480px ktore rozpycha .app-filters__grid. */
.wp-page .community-combobox{
  min-width:0!important;
  max-width:100%!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ROUND 7 (2026-05-17) — RADYKALNA ZMIANA: GRID -> FLEX dla .wp-layout
 *
 *  Round 4-6 nie zadzialaly mimo poprawnej matematyki (na 1366px viewport
 *  content area .wp-page = 1003px, grid 1fr+clamp(220-280)+gap powinno fit
 *  luzem). Sprawca nieznany - moze grid auto-fit + minmax + clamp ma jakis
 *  edge case w przeglądarce, moze inny element rozpycha .wp-page i jego
 *  child .wp-layout overflows.
 *
 *  Decyzja: zostawic detective work, isc na rozwiazanie bezpieczne i
 *  deterministyczne. Zmienic .wp-layout z grid na flex:
 *  - flex jest bardziej przewidywalne niz grid w przypadku intrinsic content
 *  - sidebar dostaje EXPLICIT width (clamp 220-280) jako flex-basis
 *  - pierwsza kolumna flex:1 1 0 z min-width:0 - kurczy sie elastycznie
 *  - overflow-x:hidden na .wp-layout HARD CAP - cokolwiek wystaje znika
 *
 *  To eliminuje calkowicie problem grid track sizing/auto-fit/minmax interactions.
 *  Sidebar ZAWSZE ma swoja explicit szerokosc, nigdy nie wycieka.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* HARD CAP na .wp-page - sztywne max-width zeby zadne child nie rozpychalo.
   contain: layout izoluje layout od rodzica/dziatek - intrinsic content
   tabeli czy filtrow nie eskaluje poza .wp-page granice. */
.wp-page{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
  contain:layout!important;
}

/* .wp-layout: GRID -> FLEX. Eliminuje grid track sizing problems.
   Sidebar dostaje explicit flex-basis clamp(220,18vw,280) jako flex-shrink:0,
   pierwsza kolumna flex:1 1 0 z min-width:0 - kurczy sie pod intrinsic content. */
.wp-page .wp-layout{
  display:flex!important;
  flex-direction:row!important;
  gap:20px!important;
  align-items:flex-start!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  /* fix/wp-layout-wide: overflow-x:clip zamiast hidden — clip NIE tworzy
     scroll containera, dzieki czemu position:sticky na .wp-sidebar
     dziala (overflow:hidden na flex parent blokuje sticky w Chrome/Safari). */
  overflow-x:clip!important;
  box-sizing:border-box!important;
}

/* fix/wp-layout-wide: usunieto :first-child bo gdy .wp-layout to <form>,
   pierwsze dziecko = <input csrf hidden> (w=0) ABSORBUJE flex:1 1 0 i nie
   zostawia regulu dla widzialnej kolumny tresci (drugi <div>). Selektor
   teraz dotyka kazde <div>/<main>/<section> ALE NIE <input>/<script>/
   <template>/<noscript>. Bezpieczne dla widokow gdzie .wp-layout to <div>
   (rent_dashboard, manager_dashboard) bo tam pierwszy <div> nadal dostaje
   flex:1 1 0 jak wczesniej. Naprawia /korespondencja-email/nowa/, /edytuj/
   oraz /konserwacja/materialy/zamowienia/ gdzie <form class="wp-layout">. */
.wp-page .wp-layout > div,
.wp-page .wp-layout > main,
.wp-page .wp-layout > section,
.wp-page .wp-layout > *:not(aside):not(.wp-sidebar):not(input):not(script):not(template):not(noscript){
  flex:1 1 0!important;
  min-width:0!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}

/* Sidebar - EXPLICIT width clamp(220,18vw,280) jako flex-basis.
   flex:0 0 X = nie kurczy sie, nie rosnie, zawsze X szerokosci.
   Plus max-width na ten sam clamp - belt & suspenders.
   fix/wp-layout-wide: position:sticky top:80px (= wysokosc app-page-head)
   zeby Podglad zostawal widoczny przy scrollu formularza ~2000px. */
.wp-page .wp-layout > aside,
.wp-page .wp-layout .wp-sidebar,
.wp-page .wp-layout > .wp-sidebar{
  flex:0 0 clamp(220px,18vw,280px)!important;
  width:clamp(220px,18vw,280px)!important;
  max-width:clamp(220px,18vw,280px)!important;
  min-width:0!important;
  box-sizing:border-box!important;
  position:sticky!important;
  top:80px!important;
  align-self:flex-start!important;
  max-height:calc(100vh - 100px)!important;
  overflow-y:auto!important;
}

/* Responsive: pod 1100px single column, sidebar pod tabela */
@media (max-width:1100px){
  .wp-page .wp-layout{
    flex-direction:column!important;
  }
  .wp-page .wp-layout > *,
  .wp-page .wp-layout > aside,
  .wp-page .wp-layout > .wp-sidebar{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
  }
}

/* End of Design System v1.9 - section 27 removed 2026-05-18 (root cause fixed
   przez button:not(.app-btn) w data-forms-standard-v213.css, redesign-regression-v215.css,
   forms-messages-v542.css; <button class="app-btn"> nie potrzebuje juz wlasnego override). */


/* ═════════════════════════════════════════════════════════════════════════════
 * Header components (Wspolnota_Plus_DS_v3 mockup, ui_kits/manager-panel/Header.jsx)
 * Dodane 2026-05-19 PR fix/header-community-dropdown-card.
 * Zrodlo: docs/Wspolnota_Plus_DS_v3.zip -> ui_kits/manager-panel/kit.css 120-191, 758-772.
 * Mapowanie hex -> var:
 *   #eef2f7 -> var(--app-line-blue), #475569 -> var(--app-fg3),
 *   #0f172a -> var(--app-fg1), --app-blue-300/--app-shadow/--app-surface-soft uzyte 1:1.
 *   #ef4444 (mockup badge) zachowany jako hex - rozni sie od --app-red:#dc2626.
 * Po PR3: main_dashboard_v2.html uzywa <header class="app-header dashv2-head"> z
 * dual-class - app-header* daje strukture, dashv2-* legacy specyfika.
 * ═════════════════════════════════════════════════════════════════════════════ */

.app-header{
  /* grid 1fr auto: lewa kolumna (tytul) shrinkuje, prawa (actions) intrinsic.
     Mockup uzywa flex space-between, ale przy viewport 1073px (1440 minus sidebar)
     i karcie min-width:480 + Audyt + bell, flex shrinkowal actions ponizej intrinsic
     i wymuszal flex-wrap (Audyt+bell pod karta). Grid auto kolumna nie shrinkuje. */
  display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:20px;
  align-items:flex-start;
  margin-bottom:22px;
}
.app-header__eyebrow{font-size:13px;font-weight:900;color:var(--app-muted);margin-bottom:6px;}
.app-header__title{
  font-size:clamp(26px,2vw,32px);font-weight:950;letter-spacing:-.035em;
  line-height:1.1;color:var(--app-fg1);margin:0;white-space:nowrap;
}
.app-header__subrow{
  display:flex;align-items:center;gap:12px;margin-top:10px;
  color:var(--app-muted);font-size:15px;font-weight:700;flex-wrap:wrap;
}
.app-header__actions{
  display:flex;align-items:center;gap:12px;
  justify-content:flex-end;
  flex-wrap:nowrap;   /* zapobiega wrap karty+Audyt+bell - grid auto-track potrzebuje full intrinsic */
}

form.app-context-form{
  /* form.* zamiast .app-context-form: zrownuje specifity z forms-messages-v542.css:3
     .app-shell-unified-v211 form{min-width:0} (0,1,1 vs 0,1,1, cascade decyduje). */
  padding:14px 16px;
  border:1px solid var(--app-line-blue);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--app-shadow);
  min-width:480px;max-width:100%;   /* mockup mial min(100%, 480px) ale w intrinsic context Chrome resolved 100% jako 0px */
}
.app-context-form label{
  display:block;margin-bottom:8px;
  color:var(--app-fg3);font-size:12px;font-weight:900;
}
.app-context-form__control{display:block;}
.app-context-form__control select{
  width:100%;
  height:46px;border-radius:12px;
  font-weight:800;font-size:14px;
  border:1px solid var(--app-line-blue);
  padding:0 38px 0 14px;
  background:#fff;color:var(--app-fg1);
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  cursor:pointer;
}
.app-context-form__control select:hover{border-color:var(--app-blue-300);}

.app-bell{
  position:relative;
  width:54px;height:54px;border-radius:16px;
  border:1px solid var(--app-line-blue);background:#fff;
  display:grid;place-items:center;
  text-decoration:none;color:var(--app-fg1);
  box-shadow:var(--app-shadow);
  cursor:pointer;
}
.app-bell > span{font-size:22px;}
.app-bell > strong{
  position:absolute;top:-6px;right:-4px;
  min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:#ef4444;color:#fff;
  font-size:11px;font-weight:900;
  display:grid;place-items:center;
}

.app-header-icon-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:54px;padding:0 16px;
  border-radius:16px;
  border:1px solid var(--app-line-blue);
  background:#fff;color:var(--app-fg1);
  font-size:14px;font-weight:900;
  cursor:pointer;text-decoration:none;
  box-shadow:var(--app-shadow);
  letter-spacing:-.005em;
}
.app-header-icon-btn:hover{
  background:var(--app-surface-soft);
  border-color:var(--app-line-strong);
}
/* CEL 2 (2026-06-02): „Zadania w tle" na pulpicie to teraz <button> — reset wyglądu przycisku. */
button.app-header-icon-btn{font-family:inherit;appearance:none;}
.app-header-icon-btn__glyph{font-size:16px;}


/* ═════════════════════════════════════════════════════════════════════════════
 * Vote + Source badges (PR feature/voting-colors-system, 2026-05-19)
 * Uzycie w manager_resolution_detail.html (lista oddanych glosow) +
 * manager_resolution_list.html (litery Z·K·O·R).
 * Decyzja PR5: MANUAL_ENTRY/MANUAL_AFTER_CLOSE traktujemy jak PAPER, dlatego
 * brak osobnego --source-manual-* i .source-badge--manual.
 * ═════════════════════════════════════════════════════════════════════════════ */

.vote-badge,
.source-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:13px;font-weight:500;
  line-height:1.2;white-space:nowrap;
}
.vote-badge__dot,
.source-badge__dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 8px;
}

.vote-badge--yes    { background:var(--vote-yes-bg) !important;    color:var(--vote-yes-fg) !important;    }
.vote-badge--yes     .vote-badge__dot   { background:var(--vote-yes-dot) !important;    }
.vote-badge--no     { background:var(--vote-no-bg) !important;     color:var(--vote-no-fg) !important;     }
.vote-badge--no      .vote-badge__dot   { background:var(--vote-no-dot) !important;     }
.vote-badge--abstain{ background:var(--vote-abstain-bg) !important;color:var(--vote-abstain-fg) !important;}
.vote-badge--abstain .vote-badge__dot   { background:var(--vote-abstain-dot) !important;}
.vote-badge--none   { background:var(--vote-none-bg) !important;   color:var(--vote-none-fg) !important;   }
.vote-badge--none    .vote-badge__dot   { background:var(--vote-none-dot) !important;   }

.source-badge--online { background:var(--source-online-bg) !important; color:var(--source-online-fg) !important; }
.source-badge--online  .source-badge__dot { background:var(--source-online-dot) !important; }
.source-badge--paper  { background:var(--source-paper-bg) !important;  color:var(--source-paper-fg) !important;  }
.source-badge--paper   .source-badge__dot { background:var(--source-paper-dot) !important;  }
.source-badge--meeting{ background:var(--source-meeting-bg) !important;color:var(--source-meeting-fg) !important;}
.source-badge--meeting .source-badge__dot { background:var(--source-meeting-dot) !important;}
.source-badge--none   { background:var(--vote-none-bg) !important;    color:var(--vote-none-fg) !important;     }
.source-badge--none    .source-badge__dot { background:var(--vote-none-dot) !important;    }

/* Pionowy stos Z·K·O·R w liscie uchwal: kazda litera w kolorowym wypelnionym kolku,
   biala litera w srodku; cyfra i opis CZARNE. Slowa nie lamia sie. */
.source-stack{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  white-space:nowrap;min-width:140px;
}
.source-row{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;line-height:1.2;
  color:var(--app-fg1) !important;
  white-space:nowrap;
}
.source-row__circle{
  width:22px;height:22px;border-radius:50%;
  display:inline-grid;place-items:center;flex:0 0 22px;
  color:#fff !important;font-weight:800;font-size:12px;letter-spacing:.01em;
  background:var(--vote-none-dot);
  box-shadow:0 1px 2px rgba(15,23,42,.18);
}
.source-row__count{font-variant-numeric:tabular-nums;min-width:22px;text-align:right;font-weight:800;color:var(--app-fg1);}
.source-row__label{font-weight:500;color:var(--app-fg1);white-space:nowrap;}
.source-row--meeting .source-row__circle{background:#0891b2;}
.source-row--paper   .source-row__circle{background:#9333ea;}
.source-row--online  .source-row__circle{background:#1f2937;}
.source-row--total   .source-row__circle{background:#0f172a;}
.source-row--empty   .source-row__circle{background:#cbd5e1;}
.source-row--empty .source-row__count,
.source-row--empty .source-row__label{color:var(--app-muted);}

/* Stary inline .source-letter zachowany jako fallback dla istniejacych szablonow. */
.source-letter{
  display:inline-block;font-weight:500;font-size:11.5px;
  letter-spacing:.01em;
}
.source-letter--meeting{color:var(--source-meeting-dot);}
.source-letter--paper  {color:var(--source-paper-dot);}
.source-letter--online {color:var(--source-online-dot);}
.source-letter--total  {color:var(--app-fg1);font-weight:700;}
.source-letter--empty  {color:var(--vote-none-dot);}

/* ═══════════════════════════════════════════════════════════════════════════
 *  PAKIET UJEDNOLICENIA FORMULARZY (v900, 2026-05-28)
 *  Powód: manager — „pola zlewają się z tłem". Reguły ładowane PO data-forms-
 *  standard-v213.css, więc nadpisują słabe ramki 1px. Checkboxy/radio celowo
 *  pominięte (bez min-height/padding). Mocny kontrast pól = uniwersalny dla
 *  całej aplikacji; warianty kolorowe sekcji = opt-in (zero ryzyka dla
 *  istniejących kart bez tych klas).
 * ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --app-teal:#0d9488; --app-teal-soft:#d6f1ee; --app-teal-ink:#0f766e;
  --app-cyan:#0e7490; --app-cyan-soft:#d8f0fa; --app-cyan-ink:#0e7490;
}
/* 1. POLA — mocny kontrast (surowe widgety Django w shellu aplikacji) */
.app-shell-unified-v211 input[type="text"],
.app-shell-unified-v211 input[type="email"],
.app-shell-unified-v211 input[type="password"],
.app-shell-unified-v211 input[type="number"],
.app-shell-unified-v211 input[type="date"],
.app-shell-unified-v211 input[type="datetime-local"],
.app-shell-unified-v211 input[type="time"],
.app-shell-unified-v211 input[type="month"],
.app-shell-unified-v211 input[type="tel"],
.app-shell-unified-v211 input[type="url"],
.app-shell-unified-v211 input[type="search"],
.app-shell-unified-v211 input:not([type]),
.app-shell-unified-v211 textarea,
.app-shell-unified-v211 select{
  border:1.5px solid #cbd5e1 !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04) !important;
  min-height:42px !important;
  padding:10px 12px !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:#0f172a !important;
}
.app-shell-unified-v211 textarea{ min-height:96px !important; line-height:1.5 !important; }
.app-shell-unified-v211 input[type="file"]{
  border:1.5px dashed #cbd5e1 !important; background:#fff !important;
  padding:9px 12px !important; border-radius:10px !important; min-height:42px !important;
}
.app-shell-unified-v211 input:focus,
.app-shell-unified-v211 textarea:focus,
.app-shell-unified-v211 select:focus{
  border-color:#0f172a !important;
  box-shadow:0 0 0 3px rgba(15,23,42,.10) !important;
  outline:none !important;
}
/* nie podwajaj ramki na inpucie WEWNĄTRZ wrappera .app-input/.app-select */
.app-shell-unified-v211 .app-input input,
.app-shell-unified-v211 .app-input textarea,
.app-shell-unified-v211 .app-select select{
  border:0 !important; box-shadow:none !important; min-height:0 !important;
  padding:0 !important; background:transparent !important;
}
.app-input, .app-select{
  border:1.5px solid #cbd5e1 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.06) !important;
  min-height:42px;
}

/* 2. ETYKIETY — czytelne nad polami */
.app-field__label{ font-size:11.5px !important; color:#475569 !important; font-weight:600 !important; }

/* 3. KARTA SEKCJI — ikona w kwadracie + szare tło body sekcji formularza */
.app-card__head-main{ display:flex; align-items:center; gap:10px; min-width:0; }
.app-card__icon{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:inline-grid; place-items:center; font-size:15px; line-height:1;
  background:#eef2f7; color:#1f2937;
}
.app-card--section > .app-card__body{ background:#f8fafc; }
/* siatka pól wewnątrz sekcji */
.app-card__body .app-form-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; align-items:start;
}
.app-form-grid .app-grid-full{ grid-column:1 / -1; }

/* 4. WARIANTY KOLOROWE SEKCJI (lewa krawędź 3px + nagłówek soft + ink + ikona) */
.app-card--violet{ border-left:3px solid var(--app-purple); }
.app-card--violet > .app-card__head{ background:var(--app-purple-soft); }
.app-card--violet .app-card__title{ color:var(--app-purple-ink); }
.app-card--violet .app-card__icon{ background:var(--app-purple-soft); color:var(--app-purple-ink); }
.app-card--teal{ border-left:3px solid var(--app-teal); }
.app-card--teal > .app-card__head{ background:var(--app-teal-soft); }
.app-card--teal .app-card__title{ color:var(--app-teal-ink); }
.app-card--teal .app-card__icon{ background:var(--app-teal-soft); color:var(--app-teal-ink); }
.app-card--warning{ border-left:3px solid var(--app-orange); }
.app-card--warning > .app-card__head{ background:var(--app-orange-soft); }
.app-card--warning .app-card__title{ color:var(--app-orange-ink); }
.app-card--warning .app-card__icon{ background:var(--app-orange-soft); color:var(--app-orange-ink); }
.app-card--success{ border-left:3px solid var(--app-green); }
.app-card--success > .app-card__head{ background:var(--app-green-soft); }
.app-card--success .app-card__title{ color:var(--app-green-ink); }
.app-card--success .app-card__icon{ background:var(--app-green-soft); color:var(--app-green-ink); }
.app-card--info{ border-left:3px solid var(--app-blue); }
.app-card--info > .app-card__head{ background:var(--app-blue-soft); }
.app-card--info .app-card__title{ color:var(--app-blue-ink); }
.app-card--info .app-card__icon{ background:var(--app-blue-soft); color:var(--app-blue-ink); }
.app-card--cyan{ border-left:3px solid var(--app-cyan); }
.app-card--cyan > .app-card__head{ background:var(--app-cyan-soft); }
.app-card--cyan .app-card__title{ color:var(--app-cyan-ink); }
.app-card--cyan .app-card__icon{ background:var(--app-cyan-soft); color:var(--app-cyan-ink); }
.app-card--danger{ border-left:3px solid var(--app-red); }
.app-card--danger > .app-card__head{ background:var(--app-red-soft); }
.app-card--danger .app-card__title{ color:var(--app-red-ink); }
.app-card--danger .app-card__icon{ background:var(--app-red-soft); color:var(--app-red-ink); }
/* szare tło body dla każdej sekcji kolorowej (pola „wystrzelone" z podkładki) */
.app-card--violet > .app-card__body,
.app-card--teal > .app-card__body,
.app-card--warning > .app-card__body,
.app-card--success > .app-card__body,
.app-card--info > .app-card__body,
.app-card--cyan > .app-card__body,
.app-card--danger > .app-card__body{ background:#f8fafc; }

/* 5. STOPKA PRZYCISKÓW formularza */
.app-form-footer, .form-footer{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px;
}
.app-form-footer__note, .form-footer__note{ margin-left:auto; font-size:11.5px; color:#64748b; }

/* 6. PRZYCISKI — „Zapisz" grafit (NIE niebieski, PR #274), „Anuluj" biały */
.app-btn--primary{ background:#0f172a !important; color:#fff !important; font-weight:700 !important; border-color:#0f172a !important; }
.app-btn--secondary{ background:#fff !important; color:#0f172a !important; border:1.5px solid #cbd5e1 !important; }
.app-btn--secondary:hover{ background:#f8fafc !important; color:#0f172a !important; }

/* v901 (2026-05-28) — pola w sekcjach formularza nie rozciągają się na całą
   szerokość: auto-fill zamiast auto-fit (puste tory zostają, pola ~240-300px).
   Pola pełnoszerokie (adres/textarea) z rozsądnym max-width. */
.app-card--section .app-filters__grid,
.app-card--section .app-form-grid,
.app-card--section form .grid{
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;
  align-items:start!important; gap:14px!important;
}
.app-card--section .u-grid-full,
.app-card--section .app-grid-full{ grid-column:1 / -1!important; max-width:760px; }
.app-field--checkbox{ flex-direction:row!important; align-items:center; gap:8px; }