@layer sh_ds{ /*! * ═══════════════════════════════════════════════════════════════════════════ * 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:#2563eb;--app-blue-soft:#e8effd;--app-blue-ink:#1d4ed8;--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:#2563eb;/* alias --app-blue */ --app-primary-soft:#e8effd;/* 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:#e8effd;/* Krawedzie warianty */ --app-line-blue:#e8effd;--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:#eff6ff;--app-blue-300:#93c5fd;--app-blue-600:#2563eb;--app-blue-800:#1e3a8a;/* 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; } :where(button){font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0} :where(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: 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 - 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 (dawniej: nadpisanie)). * 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, * 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__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-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{/* 2026-07-08: wcześniej background:#fff + border:var(--app-line) (bardzo jasny szary) na jasnym tle strony był praktycznie niewidoczny. Ciemniejszy border + ciemniejszy tekst + font-weight 600 dla wyraźnego kontrastu (WCAG AA). */ background:#fff;color:#0f172a;border:1.5px solid #94a3b8;box-shadow:none;font-weight:600;} .app-btn--ghost:hover{background:#f1f5f9;border-color:#475569;} .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:1;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__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__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__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 , 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;} /* ═══════════════════════════════════════════════════════════════════════════ * 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;} 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 (dawniej: nadpisanie) 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 - obcina poziome rozpychanie przez dzieci o intrinsic-width wiekszej niz parent (np. 11 tabow, wide actions). 2026-07-25: overflow-x:clip zamiast hidden. `hidden` na jednej osi wymusza `auto` na drugiej (spec CSS) -> wp-page stawal sie kontenerem scrolla i psul position:sticky (przyciski liczników nie przypinaly sie do gory). `clip` obcina tak samo, ale NIE tworzy kontenera scrolla -> overflow-y zostaje visible i sticky dziala wzgledem okna. */ .wp-page{width:100%;overflow-x:clip;} /* 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. */ /* 2026-07-09: wariant bez sidebara (Naliczenia) — jedna kolumna pełnej szerokości, żeby tabela paczki nie ściskała kwot. */ /* Pasek akcji naliczania przeniesiony z sidebara: przyciski w rzędzie, nie na całą szerokość. */ .wp-action-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;} .wp-action-bar .wp-sidebar-btn{width:auto;margin:0;} /* 2026-07-09: kwoty w tabeli pozycji paczki NIGDY się nie łamią (było „7893,8"+„2"). */ .rent-num{white-space:nowrap;font-variant-numeric:tabular-nums;} /* 2026-07-09: OKRES i przyciski akcji OBOK siebie w jednym rzędzie (nie pod). */ .wp-okres-row{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;} .wp-okres-row > .wp-filters{margin:0;flex:0 1 auto;} .wp-okres-row > .wp-action-bar{margin:0;flex:0 1 auto;} /* nie rozpychaj „Zastosuj" do prawej krawędzi — inaczej OKRES-box bierze pełną szerokość */ .wp-okres-row .wp-filter-actions{margin-left:0;} .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 (dawniej: nadpisanie) blokowalo v810 responsive (@media max-width:1100px{.wp-layout{1fr}}) */ /* 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{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 */ /* ═══════════════════════════════════════════════════════════════════════════ * 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
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
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
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%{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. w wrapper
* 3. community-combobox.css:17-22 wymusza: * .community-combobox{ min-width: min(100%, 480px) (dawniej: nadpisanie) } * 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. */ /* ═══════════════════════════════════════════════════════════════════════════ * 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-layout: GRID -> FLEX. Eliminuje grid track sizing problems. Sidebar dostaje explicit flex-basis clamp(220,18vw,280) jako flex-shrink:0, pierwsze dziecko = (w=0) ABSORBUJE flex:1 1 0 i nie zostawia regulu dla widzialnej kolumny tresci (drugi
). Selektor teraz dotyka kazde
/
/
ALE NIE /