/* ============================================ ABCare — editorial-utility design system (paleta AB + mockup-style components) ============================================ */ /* ── Reset bazowy — ZASTĘPUJE bootstrap.min.css ──────────────────────────────────────────────── Bootstrap ważył 227 KB, czyli 29% wszystkiego, co przeglądarka pobiera przy pierwszym wejściu, a ABCare używał z niego WYŁĄCZNIE reguł poniżej. Żadna klasa typowa dla Bootstrapa (container, d-flex, form-control, navbar, col-*) nie występuje w kodzie ani razu, a .btn-primary / .card-body / .modal / .table / .badge / .row ABCare definiuje samo niżej. ⚠ Zestaw NIE jest zgadywany — powstał z pomiaru: scenariusz `abcare-bootstrap-probe` porównuje położenie i styl KAŻDEGO elementu na 8 ekranach w dwóch szerokościach (~9 600 elementów) przed i po usunięciu Bootstrapa. Warunek stopu: ZERO różnic. Zmieniając cokolwiek tutaj, przepuść to przez `--compare-baseline`, bo te reguły dotykają każdego ekranu naraz. */ *, *::before, *::after { box-sizing: border-box; } /* ── Panele podniesione do warstwy nad stroną (top layer) ───────────────────────────────────── Rozwijany panel przycięty przodkiem z `overflow` nie da się uratować `z-index`-em: nożyczki działają przed układaniem warstw. Jedyne miejsce, którego żaden przodek nie dosięga, to warstwa nad stroną — atrybut `popover` nakłada Components/Shared/PodniesDoWarstwy.razor.js. ⚠ Przeglądarka dokłada elementom z `popover` własne style, w tym `color: CanvasText` — kolor z palety SYSTEMU, który nic nie wie o naszym trybie ciemnym. Zdejmujemy go tutaj RAZ, a nie w kilkunastu panelach. Reguła stoi na górze pliku celowo: ma tę samą wagę co `.snooze-list` czy `.ms-panel`, więc każdy panel, który sam ustawia kolor, wygrywa kolejnością. */ [popover] { color: inherit; } body { margin: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* ⚠ Było tu zaszyte #212529 — kolor tekstu, który dawał Bootstrap. Zostawiono go „1:1, żeby usunięcie Bootstrapa niczego nie przemalowało", z odłożoną na później decyzją o przejściu na paletę. Decyzję podjął pomiar (29.08.2026): w motywie ciemnym #212529 na tle karty rgb(26,29,35) daje 1,09 : 1 — tekst jest fizycznie nieczytelny, bo motyw ciemny nie ma jak podmienić wartości wpisanej na sztywno. Paleta ma obie wersje, hex nie ma żadnej. */ color: var(--text); line-height: 1.5; } /* Nagłówki: przeglądarka domyślnie daje im bold i duże marginesy — Bootstrap to normował. */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; } p { margin-top: 0; margin-bottom: 1rem; } ul, ol { padding-left: 2rem; margin-top: 0; margin-bottom: 1rem; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } dl, dd { margin-top: 0; margin-bottom: 0.5rem; } hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: 0.25; } /* Pola i przyciski dziedziczą typografię — bez tego przeglądarka wraca do własnych 13.3333px i formularze robią się mniejsze od reszty interfejsu. */ button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, select { text-transform: none; } button { border-radius: 0; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } [role="button"] { cursor: pointer; } textarea { resize: vertical; } label { display: inline-block; } legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } table { caption-side: bottom; border-collapse: collapse; } th { text-align: inherit; text-align: -webkit-match-parent; } thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; } img, svg { vertical-align: middle; } small { font-size: 0.875em; } strong, b { font-weight: bolder; } sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Stos DOKLADNIE jak w Bootstrapie — inna kolejnosc daje inna czcionke w blokach `code`. */ code, kbd, samp, pre { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: 0.875em; } /* `code` był stylowany przez Bootstrapa (mniejszy stopień + różowy) i tak wygląda dziś w Ustawieniach. */ /* Kolor przez zmienną, nie hexem: różowy #d63384 (domyślny Bootstrapa) na tle karty motywu ciemnego daje 3,72 : 1, a `` stoi na ekranach klienta (np. „Dodaj integrację"). */ code { font-size: 0.875em; color: var(--code-text); word-wrap: break-word; } a > code { color: inherit; } pre code { font-size: inherit; color: inherit; word-break: normal; } kbd { padding: 0.1875rem 0.375rem; font-size: 0.875em; color: var(--text-light); background-color: var(--global-palette3); border-radius: 0.25rem; } kbd kbd { padding: 0; font-size: 1em; } a { color: inherit; } summary { display: list-item; cursor: pointer; } [hidden] { display: none !important; } :root, [data-theme="light"] { /* AB brand colors — stałe (taki sam zielony i limonkowy w obu motywach) */ --global-palette1: #009244; --global-palette2: #c1d11c; --global-palette3: #111317; --global-palette4: #022c32; --global-palette5: #1e4c53; --global-palette6: #4a6a6e; --text-light: #ffffff; --p1: #009244; --p2: #c1d11c; --p3: #111317; --p4: #022c32; --p5: #1e4c53; --p6: #4a6a6e; /* Krój o stałej szerokości znaku — JEDNO miejsce. Stos był przepisany z palca w kilkunastu regułach i w sześciu z nich stało `var(--mono, …)`, czyli odwołanie do znacznika, którego paleta nie miała: numery zgłoszeń i adresy formularzy szły wtedy zapasowym `monospace` przeglądarki, a nie tym samym krojem, co reszta liczb w tabelach. */ --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; /* Channel marks — stałe per kanał */ --ch-allegro: #ff5a00; --ch-erli: #00a78e; --ch-amazon: #232f3e; --ch-email: #6b46c1; --ch-ebay: #e53238; /* Sizing — stałe */ --sidebar-w: 230px; --topbar-h: 3.5rem; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; /* === LIGHT MODE PALETA (default) === */ --cream: #faf9f5; --cream-2: #f4f2ea; --paper: #ffffff; --line: #e8e5db; --line-strong: #d3d0c4; /* TRZY POZIOMY TEKSTU — PRZELICZONE 07.09.2026 NA PROG AA (4,5:1). Stary `--text-faint` (#8b9099) nie przechodzil NIGDZIE: 3,04:1 na `--cream`, 2,86:1 na `--cream-2`, 3,21:1 na `--paper`. Samo przyciemnienie go nie ratowalo — przy 4,5:1 wchodzil na `--text-soft` (#5e6671) i z trzech poziomow robily sie dwa. Dlatego przesunieta jest CALA trojka naraz, zeby odstepy w jasnosci (CIE L*) zostaly te same, co dzisiaj: przed L* 5,8 / 42,9 / 59,6 (odstepy 37,0 i 16,8) po L* 5,8 / 29,5 / 45,5 (odstepy 23,6 i 16,1) Barwa i nasycenie kazdego poziomu zostaja bez zmian (chlodna szarosc H~215-220) — to nie jest przemalowanie, tylko zjazd po jasnosci. `--line-faint` to NOWA zmienna dla przygaszonej GRAFIKI (kropki stanu, ikony, suwak przewijania, obrys). Tam obowiazuje prog 3:1, nie 4,5:1, wiec zostaje jasna — ale i tak musiala drgnac, bo stara wartosc na `--cream-2` dawala 2,86:1, czyli nie przechodzila nawet progu dla grafiki. NIE UZYWAJ `--line-faint` do tekstu. */ --text: #111317; /* L* 5,8 — 17,65 / 16,59 / 18,59 : 1 */ --text-soft: #40464e; /* L* 29,5 — 9,04 / 8,50 / 9,53 : 1 */ --text-faint: #676c76; /* L* 45,5 — 5,00 / 4,70 / 5,27 : 1 */ --line-faint: #80858f; /* GRAFIKA, nie tekst — 3,52 / 3,30 / 3,70 : 1 */ --bg-light: #faf9f5; --border-color:#e8e5db; --danger: #c4392f; --danger-bg: #fbe9e6; /* TLO OSTRZEZENIA BYLO CIEPLYM KREMEM, CZYLI TYM SAMYM, CO TLO STRONY (02.09.2026). Plakietka "Doreczony" na zwrotach znikala, a spokojniejszy "Zwrot zgloszony" (niebieski) bylo widac dobrze — stan wymagajacy uwagi czytal sie slabiej niz stan neutralny. Pozostale trzy tla odcinaja sie od kremu barwa; ostrzezenie nie mialo czym, bo jest z tej samej rodziny. `--warn-mocny` to kolor NAPISU na tym tle: sam `--warn` dawal na nim kontrast 2,6:1, czyli ponizej progu czytelnosci. Grafika (paski SLA, kropki) zostaje przy jasniejszym `--warn` — tam kontrast liczy sie inaczej niz dla tekstu. */ --warn: #c98a14; --warn-bg: #f8e5b4; --warn-mocny: #7a5200; --info: #2563eb; --info-bg: #e2ebff; --ok: var(--p1); --ok-bg: #e3f4eb; --shadow-sm: 0 1px 2px rgba(17,19,23,0.04), 0 1px 3px rgba(17,19,23,0.06); --shadow-md: 0 4px 12px rgba(17,19,23,0.06), 0 2px 4px rgba(17,19,23,0.04); --shadow-lg: 0 12px 32px rgba(17,19,23,0.08), 0 4px 8px rgba(17,19,23,0.04); --shadow-inset: inset 0 0 0 1px var(--line); --card-shadow: 0 1px 2px rgba(17,19,23,0.04), 0 1px 3px rgba(17,19,23,0.06); --hover-shadow: 0 4px 12px rgba(17,19,23,0.06), 0 2px 4px rgba(17,19,23,0.04); --grad-brand: linear-gradient(95deg, #009244 0%, #c1d11c 100%); --grad-dark: linear-gradient(180deg, #022c32 0%, #1e4c53 100%); /* Grain overlay opacity — w dark mode wygaszony */ --grain-opacity: 1; /* ── Pozostałości po Bootstrapie ───────────────────────────────────────────────────────── Te trzy wartości stały w kodzie wpisane hexem (#f8f9fa, #495057, #d63384 — gray-100, gray-700 i różowy `code` Bootstrapa). Motyw ciemny nie ma jak podmienić liczby wpisanej na sztywno, więc jasnoszare tło zostawało jasnoszare także w ciemnym: tekst z palety (#e8e5db) na #f8f9fa to 1,2 : 1. ⚠ W motywie JASNYM zostają CO DO BAJTA — to nie jest przemalowanie, tylko dorobienie drugiej wersji tam, gdzie jej nigdy nie było. */ --surface-muted: #f8f9fa; --surface-muted-text: #495057; --code-text: #d63384; } /* === DARK MODE PALETA === */ [data-theme="dark"] { --cream: #0e1014; /* primary background */ --cream-2: #181b22; /* secondary background (table headers, alt rows) */ --paper: #1a1d23; /* card body */ --line: #2a2e35; --line-strong: #3a3e45; --text: #e8e5db; /* L* 90,9 — 15,11 / 13,67 / 13,39 : 1 */ --text-soft: #afb3b9; /* L* 72,8 — 9,04 / 8,18 / 8,02 : 1 */ --text-faint: #838892; /* L* 56,6 — 5,35 / 4,84 / 4,74 : 1 */ --line-faint: #6c707a; /* GRAFIKA, nie tekst — 3,84 / 3,48 / 3,41 : 1 */ --bg-light: #0e1014; --border-color:#2a2e35; --danger: #ef6055; --danger-bg: #3a1a17; --warn: #e0a13d; --warn-bg: #4a3813; --warn-mocny: #f0c778; --info: #5a8aff; --info-bg: #1a2440; --ok: #2eb068; --ok-bg: #142f1f; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4); --shadow-inset: inset 0 0 0 1px var(--line); --card-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5); --hover-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35); /* grain w dark mode rozpraszany — białe szumy na ciemnym tle nie wygladają dobrze */ --grain-opacity: 0.15; /* Ciemne odpowiedniki bootstrapowych resztek — patrz komentarz w bloku jasnym. */ --surface-muted: #181b22; --surface-muted-text: #a8acb3; --code-text: #f78fb3; } /* Auto-prefers (jeśli user NIE wybrał ręcznie, weź system preference) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --cream: #0e1014; --cream-2: #181b22; --paper: #1a1d23; --line: #2a2e35; --line-strong: #3a3e45; --text: #e8e5db; --text-soft: #afb3b9; --text-faint: #838892; --line-faint: #6c707a; /* GRAFIKA, nie tekst */ --bg-light: #0e1014; --border-color:#2a2e35; --danger: #ef6055; --danger-bg: #3a1a17; --warn: #e0a13d; --warn-bg: #4a3813; --warn-mocny: #f0c778; --info: #5a8aff; --info-bg: #1a2440; --ok: #2eb068; --ok-bg: #142f1f; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4); --card-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5); --hover-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35); --grain-opacity: 0.15; --surface-muted: #181b22; --surface-muted-text: #a8acb3; --code-text: #f78fb3; } } html, body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--cream); background-image: radial-gradient(at 0% 0%, rgba(193,209,28,0.045) 0px, transparent 40%), radial-gradient(at 100% 100%, color-mix(in srgb, var(--global-palette1) 4%, transparent) 0px, transparent 50%); background-attachment: fixed; color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Subtle grain overlay (mockup vibe) — w dark mode wygaszony przez var(--grain-opacity) */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: var(--grain-opacity, 1); mix-blend-mode: multiply; pointer-events: none; z-index: 9999; } /* Editorial / utility typography helpers */ .serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; } .mono { font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace; font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; } .italic { font-style: italic; } .uppercase { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500; } a, .btn-link { color: var(--global-palette1); } .btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem color-mix(in srgb, var(--global-palette1) 50%, transparent); } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--global-palette1); } .invalid { outline: 1px solid #e50000; } /* --danger, nie bootstrapowe #dc3545: to drugie na tle karty motywu ciemnego daje 3,70 : 1. */ .validation-message { color: var(--danger); font-size: 0.85rem; } /* Wiersz, który jeszcze jest, ale już nie obowiązuje — np. cofnięte połączenie zgłoszeń. ⚠ Znalezione przy okazji, tą samą sondą co `txt-danger` (09.09.2026): klasa stała w `PolaczoneZgloszenia.razor` przy warunku `p.Cofniete` i nie miała definicji w żadnym arkuszu, więc cofnięte połączenie wyglądało dokładnie tak samo jak obowiązujące. Napis „połączenie cofnięte" był jedyną różnicą i trzeba go było przeczytać. */ .is-muted { opacity: 0.6; } .is-muted a { color: var(--text-soft); } /* Liczba, która ma krzyczeć — pojedyncza wartość w tabeli, nie cały wiersz. ⚠ Ta klasa BYŁA UŻYWANA, ZANIM POWSTAŁA. Do 09.09.2026 stała w jednym miejscu (`ReturnsByProductReport`, kolumna „Zwroty 30d") i nie miała definicji w żadnym ze 180 arkuszy projektu — czyli liczba nie robiła się czerwona nigdy, a zdanie pod tabelą tłumaczyło człowiekowi, co znaczy jej czerwień. Nieistniejąca klasa wygląda w kodzie dokładnie jak istniejąca. */ .txt-danger { color: var(--danger); } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "Wystąpił błąd."; } /* Globalny default hide dla Blazor reconnect/error UI. Blazor JS wstrzykuje inline `style="display: block"` gdy realny circuit error, więc default hidden = bezpieczny stan. Bez tego scoped CSS layout-u nie matchuje #blazor-error-ui w innym layoucie (np. EditorialLayout) i UI pokazuje się stale. */ #blazor-error-ui { color-scheme: light only; background: #fff3cd; border-top: 1px solid #ffc107; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: #856404; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } #blazor-error-ui .reload { color: #009244; text-decoration: underline; margin: 0 0.25rem; } /* ---------- Layout helpers ---------- */ .modern-container { width: 100%; padding: 0.75rem; animation: fadeIn 0.4s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .hero-section { background: linear-gradient(135deg, var(--global-palette4) 0%, var(--global-palette5) 100%); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; box-shadow: var(--card-shadow); position: relative; overflow: hidden; color: white; } .hero-section::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: var(--global-palette1); opacity: 0.08; border-radius: 50%; } .hero-section h1 { color: white; margin: 0; } .hero-section p { color: rgba(255,255,255,0.85); margin: 0.5rem 0 0; } /* ---------- Cards ---------- */ .modern-card { background: var(--paper); color: var(--text); border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--card-shadow); border-left: 4px solid var(--global-palette1); transition: all 0.3s ease; } .modern-card:hover { box-shadow: var(--hover-shadow); } .card-header-modern { font-size: 1.2rem; font-weight: 600; color: var(--text); margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--global-palette2); display: flex; align-items: center; gap: 0.5rem; } /* ---------- Forms ---------- */ .modern-input, select.modern-input, textarea.modern-input { border: 1px solid var(--border-color); border-radius: 4px; padding: 0.7rem 0.9rem; font-size: 0.95rem; transition: all 0.3s ease; background: var(--paper); color: var(--text); width: 100%; font-family: inherit; } .modern-input:focus { border-color: var(--global-palette1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 10%, transparent); outline: none; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .form-field { display: flex; flex-direction: column; gap: 0.4rem; } .form-label-modern { font-weight: 600; color: var(--text); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } .label-badge { background: var(--global-palette1); color: white; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.7rem; font-weight: 600; } .toggle-switch { position: relative; display: inline-block; width: 56px; height: 28px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 28px; transition: 0.3s; } .toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } input:checked + .toggle-slider { background: var(--global-palette1); } input:checked + .toggle-slider:before { transform: translateX(28px); } .readonly-value { padding: 0.6rem 0.85rem; background: var(--surface-muted); border: 1px solid var(--border-color); border-radius: 6px; color: var(--surface-muted-text); min-height: 2.4rem; display: flex; align-items: center; word-break: break-word; } /* ---------- Buttons ---------- */ .modern-btn { padding: 0.7rem 1.25rem; border-radius: 4px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; } .modern-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .modern-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-gradient-success { background: var(--global-palette1); color: white; } .btn-gradient-success:hover { background: #007a38; color: white; } .btn-gradient-primary { background: var(--global-palette5); color: white; } .btn-gradient-primary:hover { background: var(--global-palette4); color: white; } .btn-gradient-info { background: var(--global-palette6); color: white; } .btn-gradient-info:hover { background: var(--global-palette5); color: white; } .btn-gradient-warning { background: #dc3545; color: white; } .btn-gradient-warning:hover { background: #c82333; color: white; } .btn-gradient-secondary { background: #6c757d; color: white; } .btn-gradient-secondary:hover { background: #5a6268; color: white; } /* ---------- Pasek alarmu (alert banner) ---------- ⚠ Te klasy stały do 29.08.2026 w Dashboard.razor.css, czyli w arkuszu ZAKRESOWYM. Zakresowy arkusz działa wyłącznie w swoim komponencie, a `.alert-banner` używają też ekran rozmowy, edycja skrzynki i podłączanie skrzynki — i tam pasek renderował się jako goły szary tekst, bez ramki i bez kolorowego paska z boku. Najbardziej bolało to przy „Sprawdź połączenie": odpowiedź na kliknięcie wyglądała jak przypadkowe zdanie wsunięte w formularz. Ten sam błąd i ta sama naprawa co wcześniej przy kafelkach KPI. */ .alert-banner { display: flex; align-items: stretch; border: 1px solid var(--danger); background: var(--danger-bg); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); animation: shake-in 0.6s ease-out forwards; color: var(--text); } @keyframes shake-in { 0% { transform: translateX(0); opacity: 0; } 25% { transform: translateX(-3px); opacity: 0.5; } 50% { transform: translateX(3px); opacity: 0.8; } 75% { transform: translateX(-1px); } 100% { transform: translateX(0); opacity: 1; } } .alert-bar { width: 5px; background: var(--danger); } .alert-icon { width: 56px; display: grid; place-items: center; background: rgba(196,57,47,0.08); color: var(--danger); } .alert-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .alert-content { flex: 1; padding: 0.85rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .alert-text { color: var(--text); } .alert-text strong { color: var(--danger); font-weight: 600; } .alert-text .alert-headline { font-size: 14px; font-weight: 500; margin-bottom: 2px; } .alert-text .alert-sub { font-size: 12px; color: var(--text-soft); } .alert-actions { display: flex; gap: 0.5rem; } /* ---------- Banners ---------- */ .warning-banner, .success-banner, .info-banner, .error-banner { border-radius: 4px; padding: 0.85rem 1.25rem; margin: 0.75rem 0; font-weight: 500; } .warning-banner { background: #fff3cd; border-left: 4px solid #ffc107; color: #856404; } .success-banner { background: #d4edda; border-left: 4px solid var(--global-palette1); color: #155724; } .info-banner { background: #f1f5f9; border-left: 4px solid #cbd5e1; color: #475569; } .error-banner { background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; } /* ---------- Toast ---------- */ .toast-notification { position: fixed; bottom: 2rem; right: 2rem; padding: 0; border-radius: 4px; color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; animation: slideInRight 0.4s ease-out; max-width: 500px; min-width: 280px; } @keyframes slideInRight { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast-success { background: var(--global-palette1); } .toast-error { background: #dc3545; } .toast-content { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 1.5rem; gap: 1rem; } .toast-content span { flex: 1; word-break: break-word; line-height: 1.5; } .toast-close-btn { background: none; border: none; color: white; font-size: 1.6rem; cursor: pointer; line-height: 1; opacity: 0.85; } .toast-close-btn:hover { opacity: 1; } /* ---------- Spinner ---------- */ .spinner-overlay { position: fixed; inset: 0; background: rgba(17, 19, 23, 0.85); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.3s ease; } /* `var(--paper)`, nie `white`: w ciemnym motywie biala plansza na ciemnym tle wyglada jak awaria interfejsu. `max-width` liczony z szerokoscia okna — na telefonie (<=768px) zaslona z dluzszym zdaniem wychodzila poza ekran i tekst dawalo sie przewijac w bok. */ .spinner-content { background: var(--paper); color: var(--text); padding: 2rem; border-radius: 8px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.2); max-width: min(24rem, calc(100vw - 2.5rem)); } .spinner { width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid var(--global-palette1); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 1rem; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Tables ---------- */ .modern-table { width: 100%; border-collapse: collapse; background: white; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); } .modern-table th { background: var(--global-palette4); color: white; text-align: left; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; } .modern-table td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border-color); font-size: 0.95rem; } .modern-table tr:last-child td { border-bottom: none; } .modern-table tr:hover td { background: color-mix(in srgb, var(--global-palette1) 5%, transparent); } .table-wrap { overflow-x: auto; } /* ---------- Worker checklist (rejestruj czas) ---------- */ .worker-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } .worker-row { display: flex; align-items: center; background: var(--surface-muted); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.6rem 0.75rem; gap: 0.6rem; transition: all 0.2s ease; } .worker-row.checked { background: color-mix(in srgb, var(--global-palette1) 8%, transparent); border-color: var(--global-palette1); } .worker-row label { flex: 1; cursor: pointer; font-weight: 500; user-select: none; display: flex; align-items: center; gap: 0.6rem; margin: 0; } .worker-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--global-palette1); cursor: pointer; flex-shrink: 0; } .worker-row .ot-input { width: 80px; padding: 0.4rem 0.6rem; border: 1px solid var(--border-color); border-radius: 4px; text-align: right; font-size: 0.95rem; } .worker-row .ot-input:disabled { background: #f1f1f1; opacity: 0.6; } .worker-row .ot-suffix { font-size: 0.8rem; color: var(--global-palette6); white-space: nowrap; } /* ---------- Button row ---------- */ .btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; } .btn-row .modern-btn { min-width: 160px; } /* ---------- Mobile tweaks ---------- */ @media (max-width: 640.98px) { .modern-container { padding: 0.5rem; } .modern-card { padding: 0.85rem; } .modern-btn { padding: 0.7rem 1rem; font-size: 0.85rem; } .toast-notification { right: 0.5rem; bottom: 0.5rem; left: 0.5rem; max-width: none; } .btn-row .modern-btn { flex: 1 1 100%; min-width: 0; } .form-grid { grid-template-columns: 1fr; } } /* ---------- Responsive toggles ---------- Bez bazowego `display`, bo wewnętrzne klasy (np. `.data-card-list { display: flex }`) ustawiają własny tryb i nie chcemy ich nadpisywać. Toggle wyłącznie w media query z !important — kontrola na poziomie bandwidth. */ @media (max-width: 768px) { .desktop-only { display: none !important; } } @media (min-width: 769px) { .mobile-only { display: none !important; } } /* ---------- Reconnect blocked overlay ---------- `body.abc-disconnected` ustawia JS reconnect handler gdy SignalR circuit jest down. Strona w tle przyciemniona + pointer-events: none — user widzi wyraźnie że nie może działać, NIE pisze w textarea „w pustkę" przez 30 sekund. Reconnect modal sam ma wyższy z-index i pointer-events: auto, więc „Połącz teraz" pozostaje klikalny. */ body.abc-disconnected main, body.abc-disconnected .sidebar, body.abc-disconnected .topbar { pointer-events: none; user-select: none; filter: grayscale(0.3) brightness(0.92); opacity: 0.65; transition: opacity 0.2s, filter 0.2s; } body.abc-disconnected input, body.abc-disconnected textarea, body.abc-disconnected select, body.abc-disconnected button:not(.abc-reconnect-btn) { pointer-events: none !important; } /* ---------- Key-value row (label + value) ---------- Default layout: label po lewej (uppercase), value po prawej. Value mozemy mieć dlugi (subject konwersacji, URL, long token) — musi sie zawijac, nie wystawac z karty. */ .kv-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.4rem 0; font-size: 13.5px; border-bottom: 1px solid var(--line); gap: 0.75rem; } .kv-row:last-child { border-bottom: none; } /* Zdanie pod wierszem „klucz : wartość", gdy sama wartość wprowadzałaby w błąd — np. zero, które mówi o tym, czego NIE POBRALIŚMY, a czyta się jak fakt o kliencie (09.09.2026, przegląd UX poz. 9). */ .kv-uwaga { margin: 0.15rem 0 0.6rem; font-size: 11.5px; line-height: 1.45; color: var(--text-soft); } .kv-label { color: var(--text-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; /* ⚠ Było `flex: 0 0 auto`, czyli „nigdy się nie kurcz". Etykieta nie mieszcząca się obok wartości nie zawijała się, tylko WYCHODZIŁA poza wiersz — złapane 13.08.2026, gdy „Konektor" i „External ID" zamieniły się na dłuższe polskie „Rodzaj integracji" i „Numer u dostawcy" (9 i 11 px poza kartą). Dłuższe tłumaczenie nie może rozwalać układu, więc etykieta ma prawo się zwęzić i złamać. */ flex: 0 1 auto; /* ⚠ Było `min-width: 0` — i TO ONO przecinało wyraz, nie sposób zawijania. `min-width: 0` znosi automatyczne minimum elementu elastycznego, czyli pozwala ścisnąć go PONIŻEJ jego najdłuższego wyrazu; wtedy przeglądarka nie ma wyjścia i wyraz tnie. Sama zmiana `anywhere` → `break-word` tego nie naprawiła: zmierzone po wydaniu, „Załączniki” nadal dostawało 46-51 px przy potrzebnych 66. `min-content` mówi dokładnie to, o co chodzi: kurcz się, ale nie poniżej jednego wyrazu. Karta i tak nie pęknie — wartość obok ma `flex: 1 1 auto` z `min-width: 0`, więc to ona oddaje miejsce. */ min-width: min-content; /* ⚠ Było `anywhere` — a ono dodatkowo obniża szerokość minimalną do JEDNEJ LITERY. Różnica między `anywhere` a `break-word` nie dotyczy tego, gdzie wolno złamać wyraz (oba pozwalają), tylko SZEROKOŚCI MINIMALNEJ elementu: przy `anywhere` spada ona do jednej litery, więc pojemnik elastyczny ma prawo ścisnąć etykietę poniżej jej najdłuższego wyrazu i wtedy go przecina. `break-word` zostawia minimum na najdłuższym wyrazie — etykieta nie zejdzie poniżej „ZAŁĄCZNIKI”, a intencja z 13.08.2026 (nie wychodzić poza kartę) zostaje. Widziane na `/integrations` na WSZYSTKICH czterech szerokościach; sonda tego nie łapała, bo reguła „tekst łamany” zaczyna od pominięcia tekstów bez spacji. */ overflow-wrap: break-word; } .kv-val { color: var(--text); text-align: right; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; /* dlugi GUID / subject się zawinie */ word-break: break-word; } .kv-val.mono { font-family: 'Geist Mono', monospace; font-size: 12px; } /* ---------- Form grid responsive (e.g. invite agent) ---------- Default 3 col na desktop (label-pair-pair-button). Mobile: 1 col stack — button na końcu pełnej szerokości. */ .agents-invite-grid { display: grid; /* Kolumna roli szersza niż 220 px od 09.09.2026: pozycja listy nie jest już samą nazwą, tylko nazwą i tym, co ta rola daje — a zwinięty `select` ucina bez ostrzeżenia. */ grid-template-columns: 1fr 270px auto; gap: 0.75rem; align-items: end; } @media (max-width: 768px) { .agents-invite-grid { grid-template-columns: 1fr; } .agents-invite-grid > button { width: 100%; justify-content: center; } } /* Opisy ról pod listą wyboru (09.09.2026, przegląd UX poz. 16). Ekran Agentów jest statyczny, więc opis wybranej roli nie ma jak pojawić się „po wybraniu" — stoją wszystkie naraz, drobnym drukiem, jako ściąga przy decyzji „Właściciel czy Administrator". */ .agents-role-opisy { margin: 0.9rem 0 0; display: grid; gap: 0.45rem; font-size: 12.5px; line-height: 1.45; } .agents-role-opis { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.6rem; align-items: baseline; } .agents-role-opis > dt { font-weight: 600; color: var(--text); margin: 0; } .agents-role-opis > dd { margin: 0; color: var(--text-soft); min-width: 0; } @media (max-width: 768px) { .agents-role-opis { grid-template-columns: 1fr; gap: 0.1rem; } } /* ---------- Outbox detail responsive grid ---------- Desktop: payload 2/3 + aside 1/3 obok siebie. Mobile (<880px): full-width stack — aside (Powiązanie/Timeline) WYŻEJ niż payload, bo „przejdź do dyskusji" + customer chip są ważniejsze dla agenta na mobile niż raw JSON payload. */ .outbox-detail-grid { display: grid; /* ⚠ `minmax(0, …)`, nie gole `2fr 1fr`. Sciezka `fr` ma AUTOMATYCZNE MINIMUM rowne szerokosci minimalnej tresci — wiec jedna dluga linia bez spacji (surowy ladunek operacji w bloku `
`) rozpycha pierwsza kolumne ponad jej udzial i sciska druga. Zmierzone 18.08.2026:
       CALY prawy panel („Powiazanie", „Przebieg", klient, konto) zostal wypchniety poza ekran,
       a jego wiersze mialy po 26 px szerokosci. Uzytkownik nie widzial, do ktorej rozmowy nalezy
       operacja — czyli tego, po co ten ekran istnieje. `minmax(0, 2fr)` znosi to minimum. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: flex-start;
}
@media (max-width: 880px) {
    .outbox-detail-grid {
        grid-template-columns: 1fr;
    }
    .outbox-detail-grid > aside {
        order: -1;  /* aside (powiązanie/timeline) pierwsze na mobile */
    }
}

/* ----------------------------------------------------------------------
   Theme toggle button — CSS-only icon visibility per active mode
   ----------------------------------------------------------------------
   Pokazuje TYLKO ikone aktualnego motywu (nie obu naraz). CSS reaguje na
    ustawiane przez SSR (App.razor z cookie).
   Gdy brak data-theme → follow prefers-color-scheme (auto effective).
   Zaden JS nie ustawia display - eliminuje race conditions po enhanced nav.
*/
.abc-theme-toggle .abc-theme-icon {
    line-height: 1;
    font-size: 16px;
    display: none;
}
/* Default (brak data-theme, system light) → slonce */
.abc-theme-toggle .abc-theme-icon-light { display: inline; }
/* System dark + brak override → ksiezyc */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .abc-theme-toggle .abc-theme-icon-light { display: none; }
    :root:not([data-theme="light"]) .abc-theme-toggle .abc-theme-icon-dark  { display: inline; }
}
/* Explicit data-theme override */
:root[data-theme="light"] .abc-theme-toggle .abc-theme-icon-light { display: inline; }
:root[data-theme="light"] .abc-theme-toggle .abc-theme-icon-dark  { display: none; }
:root[data-theme="dark"]  .abc-theme-toggle .abc-theme-icon-light { display: none; }
:root[data-theme="dark"]  .abc-theme-toggle .abc-theme-icon-dark  { display: inline; }

/* ---------- Mobile table safety net ----------
   Każda  bez explicit `.desktop-only` / `.mobile-only` strategy dostaje horizontal scroll
   na mobile zamiast wypchnięcia treści poza viewport. Strony które już mają card-list mobile
   fallback opakowują table w `.table-wrap.desktop-only` — ten reset ich nie dotyka (są ukryte). */
@media (max-width: 768px) {
    .card > table,
    .content > table,
    table:not(.table-wrap *):not(.no-mobile-scroll) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ---------- Conversation strip collapse (mobile) ----------
   Pasek statusu/agenta/tagów zajmuje dużo miejsca na mobile. Defaultnie chowamy go
   pod button "▼ Więcej", trigger pokazuje mini-podgląd Status + SLA + tag count. */
.conv-strip-toggle {
    /* Visibility kontrolowane przez klasę `mobile-only` na elemencie (display:none na desktop via media query). */
    display: flex;
    align-items: center; gap: 0.4rem;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text);
}
.conv-strip-toggle:hover { background: var(--cream-2); }
.conv-strip-toggle-more { margin-left: auto; color: var(--text-faint); font-weight: 600; }
.conv-strip-tags-count { color: var(--text-soft); font-size: 11px; }
@media (max-width: 768px) {
    .conv-strip { display: none !important; }
    .conv-strip.mobile-open {
        display: flex !important;
        flex-wrap: wrap; gap: 0.4rem 0.5rem;
        margin-top: 0.4rem; padding: 0.6rem; border-radius: 8px;
        background: var(--paper); border: 1px solid var(--line);
    }
}

/* ---------- Data cards (mobile alternative to tables) ---------- */
.data-card-list { display: flex; flex-direction: column; gap: 0.75rem; }
.data-card {
    background: var(--paper);
    color: var(--text);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    box-shadow: var(--card-shadow);
    border-left: 4px solid var(--global-palette1);
}
.data-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.data-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line);
    gap: 0.5rem;
}
.data-card-row:last-of-type { border-bottom: none; }
.data-card-row .label {
    color: var(--text-faint);
    font-weight: 500;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 0 0 auto;
}
.data-card-row .value {
    font-weight: 600;
    color: var(--text);
    text-align: right;
    word-break: break-word;
    flex: 1 1 auto;
}
.data-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.data-card-actions .modern-btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
}

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-badge.on  { background: color-mix(in srgb, var(--global-palette1) 15%, transparent); color: var(--global-palette1); }
.status-badge.off { background: rgba(220,53,69,0.12); color: #b91c1c; }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(17, 19, 23, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.25s ease;
    padding: 1rem;
    /* Overlay bez pointer-events (nie ma close-on-outside-click) — żeby buttony w dialogu
       były klikalne bez problemu „overlay intercepts pointer events". */
    pointer-events: none;
}
.modal-dialog {
    background: var(--paper);
    color: var(--text);
    border-radius: 10px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    /* Włącz interaktywność z powrotem dla samego dialogu i wszystkich jego dzieci. */
    pointer-events: auto;
}
@keyframes modalSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.modal-header {
    background: linear-gradient(135deg, var(--global-palette4) 0%, var(--global-palette5) 100%);
    color: white;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 2px solid var(--global-palette1);
}
.modal-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
    flex: 1;
    word-break: break-word;
}
.modal-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.modal-close:hover { background: rgba(255,255,255,0.25); }

/* Mały kółkowy "×" do usuwania rzędów w listach (warunki/akcje automation, taski, itp).
   Inny niż .modal-close (który jest w nagłówku, na ciemnym tle) — neutralny, hover czerwony. */
.btn-icon-close {
    width: 26px; height: 26px;
    display: inline-grid; place-items: center;
    background: transparent;
    border: 1px solid var(--line, #e8e5db);
    color: var(--text-faint, #676c76);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.btn-icon-close:hover {
    background: var(--danger-bg, #fbe9e6);
    border-color: var(--danger, #c4392f);
    color: var(--danger, #c4392f);
}
/* ⚠ Ten sam przycisk na CIEMNYM pasku okna. `--text-faint` jest dobrany pod jasne tło i na
   gradiencie nagłówka daje 1,80:1 przy progu 4,5:1 (zmierzone 21.09, wydanie 33) — krzyżyka
   praktycznie nie widać, a używa go 13 okien. Na pasku bierze biel, tak jak napis obok niego. */
.modal-header .btn-icon-close {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.modal-header .btn-icon-close:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}
.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    padding: 0.85rem 1.25rem;
    background: var(--surface-muted);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.modal-footer .modern-btn { min-width: 110px; }

@media (max-width: 640px) {
    /* Full-screen modal na mobile — nie sheet, lecz cała wysokość ekranu od topu.
       User feedback: bottom-sheet z 70% wysokości zostawia widoczny brzeg tła
       który myli (Image #17). Lepiej pełen ekran + duży obszar treści. */
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal-dialog {
        max-height: 100vh;
        height: 100vh;
        max-width: 100%;
        width: 100%;
        border-radius: 0;
    }
    .modal-footer { padding: 0.75rem 1rem; }
    .modal-footer .modern-btn { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
}

/* ============================================
   ABCare mockup components (editorial-utility)
   ============================================ */

/* Cards */
.card {
    /* display:flex + kierunek kolumnowy szły dotąd z Bootstrapa — bez nich karty rozjeżdżają się
       na całej aplikacji (pomiar: `abcare-bootstrap-probe`). */
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    /* ⚠ TU SIEDZIAŁA NIEWIDZIALNOŚĆ MOTYWU CIEMNEGO. Bootstrap ustawiał na .card jawny #212529
       i po jego usunięciu wartość została „1:1, żeby nic nie przemalować" — ale hex nie ma wersji
       ciemnej. Pomiar 29.08.2026: #212529 na tle karty rgb(26,29,35) to 1,09 : 1 przy wymaganych
       4,5 : 1, czyli tekst, którego fizycznie nie widać. Ginęły przez to całe akapity na
       /settings/storage (nazwy skrzynek, obie liczby zajętości), karta „Sprawdź, czy są nowe
       wiadomości" i etykiety na ekranie dodawania skrzynki — wszędzie tam, gdzie element nie
       miał własnego koloru i dziedziczył ten z karty.
       ⚠ Reguła ma wagę (0,1,0) i stoi PÓŹNIEJ niż `html, body`, więc bije paletę na całej
       zawartości karty — dlatego nie wystarczyło poprawić samego `body`. */
    color: var(--text);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-header {
    padding: 1.1rem 1.25rem 0.6rem;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem;
}
.card-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}
.card-title em { font-style: italic; color: var(--p1); }
.card-subtitle {
    color: var(--text-soft);
    font-size: 12.5px;
    margin-top: 0.35rem;
}
.card-body { padding: 0.5rem 1.25rem 1.25rem; }

/* ============================================
   Shared .data-table — globalna tabela ABCare (replace inline 
)
   Wszystkie strony settings/admin/raporty MUSZA uzywac tej klasy zamiast inline stylow.
   Dark mode dziala automatycznie przez tokens (var(--paper)/var(--line)/var(--text)).
   ============================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper);
    color: var(--text);
}
.data-table thead {
    background: var(--cream-2);
}
.data-table thead tr {
    text-align: left;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}
.data-table th {
    padding: 0.65rem 1rem;
    font-weight: 500;
}
.data-table th:first-child { padding-left: 1.25rem; }
.data-table th:last-child  { padding-right: 1.25rem; }
.data-table td {
    padding: 0.85rem 1rem;
    font-size: 13.5px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.data-table td:first-child { padding-left: 1.25rem; }
.data-table td:last-child  { padding-right: 1.25rem; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--cream-2); transition: background 0.12s; }
.data-table .row-actions { text-align: right; white-space: nowrap; }

/* ──────────────────────────────────────────────────────────────────────
   .data-table.responsive — CSS-only auto-cards na mobile (≤768px)
   ──────────────────────────────────────────────────────────────────────
   Usage:
       

           
EmailRola

           
               

                   anna@firma.pl
                   Admin
               

           
       


   - Każdy `` MUSI mieć `data-label` (tekst z ``).
   - Pierwszy `` (data-card-title) renderowany jako headline bez labela.
   - Eliminuje konieczność dual markup `desktop-only` + `mobile-only`.
   ────────────────────────────────────────────────────────────────────── */
/* ⚠ SIATKA BEZPIECZEŃSTWA dla tabel BEZ klasy `responsive`.
   Sam `data-label` nic nie daje — reguła kart niżej łapie wyłącznie `.data-table.responsive`.
   Tabela bez tej klasy była na telefonie PRZYCINANA na krawędzi karty razem z ostatnią kolumną,
   czyli zwykle z przyciskami „Edytuj"/„Usuń" — nie dało się ich ani zobaczyć, ani kliknąć
   (sprawdzone na /settings/brands i /settings/email-channels). Poziome przewijanie to nie jest
   docelowy wygląd (dom­yślnie chcemy kart), ale gwarantuje, że nic nie zniknie bezpowrotnie.
   Zamiana konkretnej tabeli na karty = dodanie `responsive` + `data-label` na każdym ``. */
@media (max-width: 768px) {
    .data-table:not(.responsive) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        /* ⚠ Samo przewijanie NIE wystarczy: obcieta kolumna wyglada jak koniec tabeli
           i nikt nie zgaduje, ze cos jest dalej. Cien przy prawej krawedzi pojawia sie
           tylko wtedy, gdy faktycznie jest co przewijac, i znika po dojechaniu do konca
           (`background-attachment: local` na warstwach tla — bez JS-a i bez nasluchow). */
        background:
            linear-gradient(to right, var(--paper) 30%, transparent) left center,
            linear-gradient(to left,  var(--paper) 30%, transparent) right center,
            radial-gradient(farthest-side at 0 50%,   rgba(17,19,23,.16), transparent) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(17,19,23,.16), transparent) right center;
        background-repeat: no-repeat;
        background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

@media (max-width: 768px) {
    .data-table.responsive {
        display: block;
        background: transparent;
        min-width: 0 !important;
    }
    .data-table.responsive thead { display: none; }
    .data-table.responsive tbody { display: block; }
    .data-table.responsive tr {
        display: block;
        background: var(--paper);
        color: var(--text);
        border: 1px solid var(--line);
        border-left: 4px solid var(--p1);
        border-radius: 6px;
        margin-bottom: 0.75rem;
        padding: 0.85rem 1rem;
        box-shadow: var(--shadow-sm);
    }
    .data-table.responsive tr:hover { background: var(--paper); }
    .data-table.responsive td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        padding: 0.4rem 0;
        border-bottom: 1px solid var(--line);
        font-size: 0.9rem;
        text-align: right;
    }
    .data-table.responsive td:first-child,
    .data-table.responsive td:last-child {
        padding-left: 0;
        padding-right: 0;
    }
    .data-table.responsive td:last-child { border-bottom: none; }

    /* ⚠ PUSTY WIERSZ ZNIKA Z KARTY, ale w tabeli ZOSTAJE (04.09.2026).
       W tabeli myslnik trzyma wyrownanie kolumn i czyta sie jako "nic tu nie ma".
       Na karcie kolumn nie ma, wiec ten sam myslnik kosztuje CALY wiersz z etykieta,
       ktory nie mowi nic. Na stanowisku karta kontrahenta "Delta" miala osiem wierszy,
       z czego CZTERY byly samym myslnikiem — polowa karty milczala, a czerwona
       plakietka zaleglosci u sasiada gubila sie w tym halasie.
       Komorka sama mowi o sobie, ze jest pusta (data-puste="1") — CSS nie umie
       wybierac po tresci, a zgadywanie po dlugosci tekstu bylo by loteria. */
    .data-table.responsive td[data-puste="1"] { display: none; }
    .data-table.responsive td::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--text-soft);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex: 0 0 auto;
        text-align: left;
    }
    /* Headline row (first td) — bez labela, full width, większy font */
    .data-table.responsive td.cell-title,
    .data-table.responsive td[data-cell-title] {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text);
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--line);
        justify-content: flex-start;
        text-align: left;
    }
    .data-table.responsive td.cell-title::before,
    .data-table.responsive td[data-cell-title]::before { display: none; }

    /* Komórka z BLOKIEM treści (kilka akapitów, podgląd wiadomości), a nie pojedynczą wartością.
       ⚠ Domyślny wiersz karty to `justify-content: space-between` — etykieta z lewej, wartość
       z prawej. Przy kilku elementach w komórce każdy z nich staje się osobnym elementem flex
       i walczą o tę samą szerokość: teksty nachodzą na siebie i są przycinane. Tutaj etykieta
       idzie NAD treść, a treść dostaje całą szerokość karty. */
    .data-table.responsive td.cell-block {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 0.3rem;
    }
    .data-table.responsive td.cell-block::before { text-align: left; }

    /* Komórka z PRZYCISKAMI. `.row-actions` ma na komputerze `white-space: nowrap` (żeby dwa
       przyciski nie łamały się w kolumnie) — w karcie na telefonie ten sam zapis wypycha trzeci
       przycisk poza krawędź. Tu podpis idzie nad przyciski, a przyciski wolno łamać. */
    .data-table.responsive td.row-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        white-space: normal;
        text-align: left;
        gap: 0.4rem;
        padding-top: 0.65rem;
    }
    .data-table.responsive td.row-actions::before {
        flex: 0 0 100%;
        margin-bottom: 0.15rem;
    }
}

/* Section headings */
.section { margin-top: 1.5rem; }
.section-title-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 0.85rem; gap: 1rem;
}
.section-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -0.005em;
    margin: 0;
}
.section-title em { font-style: italic; color: var(--p1); }

/* Buttons (mockup style — different namespace than .modern-btn) */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    /* vertical-align dawal Bootstrap (.btn) — bez tego przyciski osadzone w tekscie siadaja
       na linii bazowej zamiast na srodku (pomiar zlapal to jako przesuniecie o pol piksela). */
    vertical-align: middle;
    height: 36px; padding: 0 0.95rem;
    border-radius: var(--radius);
    font-weight: 500; font-size: 13px;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}
/* ⚠ WARIANTY GRADIENTOWE MAJĄ BIAŁY NAPIS — I MUSZĄ GO POWTÓRZYĆ TUTAJ.
   `.btn-gradient-success` i spółka deklarują `color: white` znacznie WYŻEJ w tym arkuszu,
   a `.btn { color: inherit }` tuż nad tym komentarzem ma tę samą wagę (0,1,0) i stoi później —
   więc przy równej wadze wygrywało `inherit` i napis brał kolor rodzica. Wewnątrz `.card` był
   to bootstrapowy #212529: ciemny tekst na zielonym, zmierzone 3,82 : 1, podczas gdy wszystkie
   pozostałe zielone przyciski (te bez klasy `.btn`, np. „Pobierz nowe teraz") mają biel i 4,04 : 1.
   Główne wezwanie do działania wyłamywało się przez to ze stylu CAŁEJ aplikacji.
   Waga (0,2,0) zamyka sprawę bez przestawiania bloków — a przestawienie ich byłoby groźniejsze:
   `.btn { color: inherit }` osłania też `a, .btn-link { color: var(--global-palette1) }`,
   więc jego usunięcie zazieleniłoby napisy na odnośnikach udających przyciski. */
.btn.btn-gradient-success,
.btn.btn-gradient-primary,
.btn.btn-gradient-info,
.btn.btn-gradient-warning,
.btn.btn-gradient-secondary { color: var(--text-light); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.btn-primary {
    background: var(--global-palette1);
    color: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--global-palette1) 25%, transparent);
}
.btn-primary:hover { background: #007a38; transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--global-palette1) 28%, transparent); color: #fff; }

.btn-secondary {
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--line-strong);
}
.btn-secondary:hover { background: var(--cream-2); border-color: var(--p3); color: var(--text); }

.btn-ghost { background: transparent; color: var(--text-soft); padding: 0 0.7rem; }
.btn-ghost:hover { background: var(--cream-2); color: var(--text); }
/* Skrót ustawiający wartość pola obok (np. progi dni przy automatycznym zamykaniu) — ten,
   który odpowiada bieżącej wartości, musi być widoczny, bo inaczej sześć przycisków wygląda
   identycznie i nie wiadomo, który jest teraz ustawiony. */
.btn-ghost.is-active {
    background: color-mix(in srgb, var(--p1) 14%, transparent);
    color: var(--p1);
    border-color: var(--p1);
}

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a3261d; color: #fff; }

/* Soft danger — subtle background z danger text + border (mniej krzyczący niż solid btn-danger).
   Używany dla destructive akcji w drugiej kolejności (np. "Ukryj" obok "Usuń trwale"). */
.btn-soft-danger {
    background: #fbe9e6;
    color: var(--danger);
    border: 1px solid #f1c5be;
}
.btn-soft-danger:hover { background: #f5d4ce; color: var(--danger); border-color: var(--danger); }

/* Kasowanie W WIERSZU LISTY — najcichszy z wariantów destrukcyjnych: wygląda jak przycisk poboczny,
   czerwień pokazuje dopiero pod kursorem i przy ognisku klawiatury.
   ⚠ POWSTAŁO Z POMIARU (obchód ekranów 30.08.2026). Na `/settings/tags` stało trzydzieści pełnych
   czerwonych „Usuń" i to one były pierwszym, co widać na ekranie — czerwień przestała znaczyć
   „uwaga" i zaczęła być tłem. Sama akcja nie znika, zmienia się jej głośność; potwierdzenie
   dostaje pełną czerwień, bo tam ostrzeżenie jest na miejscu.
   Stosuj RAZEM z `.btn-ghost` — ta klasa dokłada wyłącznie kolor. */
.btn-ghost-danger { color: var(--text-faint); }
.btn-ghost-danger:hover,
.btn-ghost-danger:focus-visible { background: var(--danger-bg); color: var(--danger); }
[data-theme="dark"] .btn-soft-danger { background: rgba(196,57,47,0.12); border-color: rgba(196,57,47,0.32); color: #f08a82; }
[data-theme="dark"] .btn-soft-danger:hover { background: rgba(196,57,47,0.22); color: #f5a8a1; }

.btn-sm { height: 28px; padding: 0 0.65rem; font-size: 12px; }
.btn-lg { height: 44px; padding: 0 1.4rem; font-size: 14px; }

/* Ekran dotykowy — 28 px to wysokość dobra pod kursor, nie pod palec. Przy przeglądzie interfejsu
   na telefonie wyszło ponad dwadzieścia ekranów, gdzie „Edytuj", „Usuń" czy „Zapisz" mają 28 px
   i trafienie w nie jest loterią. Podnosimy TYLKO na urządzeniach wskazujących niedokładnie
   (pointer: coarse) — na komputerze gęstość interfejsu zostaje bez zmian.
   Zostaje poniżej zalecanych 44 px, żeby nie rozepchnąć pasków akcji, ale 40 px to już palec,
   a nie szpilka.
   ⚠ 38 → 40 px (21.09.2026, paczka C). Agent J mierzył cele względem czterdziestu i połowa
   przycisków akcji przegrywała o DWA PIKSELE — czyli wynik „za mały" był prawdziwy, a różnica
   niewidoczna dla kogokolwiek poza sondą. Dwa piksele nie rozpychają pasków, a kończą spór
   o to, czy reguła domu jest dotrzymana. */
@media (pointer: coarse) {
    .btn-sm { height: 40px; padding: 0 0.85rem; }
    /* ⚠ Sam padding dawal 31 px — o jeden pod progiem i o siedem pod nasza wlasna regula.
       Chipy filtrow i pozycje list rozwijanych sa NAJCZESCIEJ klikanymi elementami na
       telefonie (kazdy filtr, kazdy status, kazdy tag), wiec `min-height` wprost. */
    .f-chip { padding: 0.55rem 0.85rem; min-height: 40px; display: inline-flex; flex-direction: row; align-items: center; }
    /* Przyciski z sama ikona (strzalki nawigacji, „+") maja dobra wysokosc, ale 28 px szerokosci.
       `min-width` dotyka wylacznie ich — przyciski z tekstem sa i tak szersze. */
    .btn { min-width: 40px; }
    .ms-option, .ms-group-head { min-height: 40px; }
    /* ⚠ `min-height` bez `min-width` zalatwia polowe sprawy. Zmierzone 18.08.2026 na ekranie
       terminow SLA: przycisk "Usun" mial 27x38 px — wysokosc juz naprawiona, szerokosc nie.
       Krotkie slowo zostaje waskie, a to wlasnie w te strone chybia palec, gdy akcje stoja
       w rzedzie obok siebie. */
    .btn-link-sm { display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
                   min-height: 40px; min-width: 40px; padding: 0 0.5rem; }
}

/* Chips / badges */
.chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    line-height: 1.5;
}
.chip-ok      { background: var(--ok-bg);     color: var(--ok); }
.chip-warn    { background: var(--warn-bg);   color: var(--warn-mocny); }
.chip-danger  { background: var(--danger-bg); color: var(--danger); }
.chip-info    { background: var(--info-bg);   color: var(--info); }
.chip-neutral { background: var(--cream-2);   color: var(--text-soft); }
.chip .dot-mini { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Plakietka, ktora jest przyciskiem (np. „239 nieudanych" nad kolejka wysylki).
   Przegladarka daje