/* ============================================================ ESZ · Siatka zgłoszeń — komponenty wizualne (light/dark) ------------------------------------------------------------ Drop-in. Wymaga załadowanego tokens.css (tokeny --paper / --ink / --line / --accent / --ok / --warn / --danger itd.) oraz atrybutu [data-theme="light"|"dark"] na (z theme.js). Spis sekcji: §1 Checkboxy (custom, spójne L/D) §2 Scrollbary (Firefox + WebKit) §3 Wiersz tabeli — zmienna --row-bg dla pinów (anti-prześwit) §4 Date badge — .zg-date-badge + warianty stanu §5 Tag chip — .zg-tag, hue z atrybutu data-hue lub CSS var §6 Avatar + presence dot — .zg-avatar / .zg-presence ============================================================ */ /* ─── §1 Checkboxy ─────────────────────────────────────────── */ .zg-grid input[type="checkbox"], .zg-checkbox { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 3px; cursor: pointer; display: inline-grid; place-items: center; margin: 0; flex-shrink: 0; transition: background 0.12s, border-color 0.12s; position: relative; } .zg-grid input[type="checkbox"]:hover, .zg-checkbox:hover { border-color: color-mix(in oklab, var(--accent) 60%, var(--line-2)); } .zg-grid input[type="checkbox"]:focus-visible, .zg-checkbox:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 1px; } .zg-grid input[type="checkbox"]:checked, .zg-checkbox:checked { background: var(--accent); border-color: var(--accent); } .zg-grid input[type="checkbox"]:checked::after, .zg-checkbox:checked::after { content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(0, -1px); } [data-theme="dark"] .zg-grid input[type="checkbox"]:checked::after, [data-theme="dark"] .zg-checkbox:checked::after { border-color: #0F1226; } .zg-grid input[type="checkbox"]:indeterminate, .zg-checkbox:indeterminate { background: var(--accent); border-color: var(--accent); } .zg-grid input[type="checkbox"]:indeterminate::after, .zg-checkbox:indeterminate::after { content: ''; width: 7px; height: 1.5px; background: #fff; border-radius: 1px; } [data-theme="dark"] .zg-grid input[type="checkbox"]:indeterminate::after, [data-theme="dark"] .zg-checkbox:indeterminate::after { background: #0F1226; } .zg-grid input[type="checkbox"]:disabled, .zg-checkbox:disabled { opacity: 0.5; cursor: not-allowed; } /* ─── §2 Scrollbary ────────────────────────────────────────── */ /* ESZ adaptation: handoff stosuje selektor uniwersalny `*` globalnie, ale my ograniczamy do `.zg-grid` żeby nie zmieniać scrollbarów w pozostałej części appki (Dashboard, Calendar itd. mają swoje style). */ .zg-grid, .zg-grid * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .zg-grid ::-webkit-scrollbar, .zg-grid::-webkit-scrollbar { width: 10px; height: 10px; } .zg-grid ::-webkit-scrollbar-track, .zg-grid::-webkit-scrollbar-track { background: transparent; } .zg-grid ::-webkit-scrollbar-thumb, .zg-grid::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--paper); border-radius: 999px; background-clip: padding-box; } .zg-grid ::-webkit-scrollbar-thumb:hover, .zg-grid::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); border-color: var(--paper); background-clip: padding-box; } .zg-grid ::-webkit-scrollbar-corner, .zg-grid::-webkit-scrollbar-corner { background: transparent; } /* ─── §3 Pinięte kolumny — opaque tło z --row-bg ───────────── */ /* Na ustaw inline `--row-bg: var(--paper)` (lub `var(--accent-soft)` gdy zaznaczony, `var(--paper-2)` na hover). Pinięte komórki czytają tę zmienną zamiast `background: inherit` — eliminuje prześwit awatarów i innej treści podczas scrollu poziomego. */ .zg-row { --row-bg: var(--paper); background: var(--row-bg); transition: background 0.08s; } .zg-row:hover { --row-bg: var(--paper-2); } .zg-row.is-selected { --row-bg: var(--accent-soft); } .zg-cell-pin { position: sticky; z-index: 3; background: var(--row-bg); border-right: 1px solid var(--line-2); } .zg-cell-pin--left { left: 0; } .zg-cell-pin--right { right: 0; border-right: none; border-left: 1px solid var(--line-2); } /* Komórki niepinięte — z-index niski, paint kolejność DOM zarządza warstwami */ .zg-cell { z-index: 0; background: transparent; } /* ─── §4 Date badge ────────────────────────────────────────── */ /* Użycie: 2026-05-26 Warianty: .is-ok — zielony (w trakcie + przed terminem · LUB · zamknięte w terminie) .is-warn — pomarań. (w trakcie + po terminie) .is-danger — czerwony (zamknięte po terminie) .is-mute — białe (brak konsultanta lub brak daty) */ .zg-date-badge { display: inline-block; padding: 1px 7px; /* Czcionka jak reszta siatki (sans) zamiast mono — na życzenie. */ font-family: inherit; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--paper); color: var(--ink-mute); border: 1px solid var(--line-2); border-radius: 3px; white-space: nowrap; line-height: 1.5; text-align: center; } /* Light — używamy soft-tokenów */ .zg-date-badge.is-ok { background: var(--ok-soft); color: var(--ok-ink); border-color: color-mix(in oklab, var(--ok) 28%, transparent); } .zg-date-badge.is-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: color-mix(in oklab, var(--warn) 28%, transparent); } .zg-date-badge.is-danger { background: var(--danger-soft); color: var(--danger-ink); border-color: color-mix(in oklab, var(--danger) 30%, transparent); } .zg-date-badge.is-mute { background: var(--paper); color: var(--ink-mute); border-color: var(--line-2); } /* Dark — przygaszone, color-mix z --paper-2 (zamiast soft-tokenów które są zbyt nasycone) */ [data-theme="dark"] .zg-date-badge.is-ok { background: color-mix(in oklab, var(--ok) 10%, var(--paper-2)); color: color-mix(in oklab, var(--ok-ink) 85%, var(--ink-soft)); border-color: color-mix(in oklab, var(--ok) 18%, transparent); } [data-theme="dark"] .zg-date-badge.is-warn { background: color-mix(in oklab, var(--warn) 11%, var(--paper-2)); color: color-mix(in oklab, var(--warn-ink) 85%, var(--ink-soft)); border-color: color-mix(in oklab, var(--warn) 20%, transparent); } [data-theme="dark"] .zg-date-badge.is-danger { background: color-mix(in oklab, var(--danger) 12%, var(--paper-2)); color: color-mix(in oklab, var(--danger-ink) 85%, var(--ink-soft)); border-color: color-mix(in oklab, var(--danger) 22%, transparent); } [data-theme="dark"] .zg-date-badge.is-mute { background: var(--paper-2); color: var(--ink-mute); border-color: var(--line-2); } /* Komórka z date-badge — wycentruj pill w kolumnie (badge jest inline-block i ciasny, więc był wyrównany do lewej zostawiając pustą przestrzeń z prawej). */ .zg-grid td:has(.zg-date-badge) { text-align: center !important; } /* ─── §5 Tag chip ──────────────────────────────────────────── */ /* Użycie: #ERP --tag-h to hue (0–360) z konfiguracji tagu w bazie. */ .zg-tag { --tag-h: 255; display: inline-flex; align-items: center; gap: 5px; margin: 2px 4px 2px 0; padding: 1px 7px 1px 6px; /* Czcionka jak reszta siatki (sans) zamiast mono — na życzenie. */ font-family: inherit; font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; border-radius: 3px; text-decoration: none; /* w razie gdyby był zamiast */ background: color-mix(in oklab, oklch(60% 0.12 var(--tag-h)) 10%, var(--paper)); color: oklch(40% 0.13 var(--tag-h)); border: 1px solid color-mix(in oklab, oklch(60% 0.12 var(--tag-h)) 22%, transparent); } .zg-tag:hover { text-decoration: none; filter: brightness(1.05); } .zg-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(58% 0.13 var(--tag-h)); flex-shrink: 0; } [data-theme="dark"] .zg-tag { background: color-mix(in oklab, oklch(60% 0.12 var(--tag-h)) 12%, var(--paper-2)); color: color-mix(in oklab, oklch(72% 0.07 var(--tag-h)) 75%, var(--ink-soft)); border-color: color-mix(in oklab, oklch(60% 0.12 var(--tag-h)) 16%, transparent); } [data-theme="dark"] .zg-tag-dot { background: oklch(62% 0.10 var(--tag-h)); } /* ─── §6 Awatar + presence dot ─────────────────────────────── */ /* Użycie: JW .is-remote — niebieska kropka .is-absent — czerwona kropka Brak modyfikatora = w biurze (nie renderuj kropki). */ .zg-avatar { --av-h: 230; position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, oklch(72% 0.07 var(--av-h)), oklch(56% 0.10 calc(var(--av-h) + 40)) ); color: #fff; font-size: 11px; font-weight: 600; border: 1.5px solid var(--row-bg, var(--paper)); flex-shrink: 0; overflow: hidden; } /* Photo wariant — gdy renderowany jest z ACS zdjęciem, wypełnia okrąg i ukrywa inicjały leżące pod spodem (fallback gdy img onerror). */ .zg-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Stos awatarów (Konsultanci) — gap 3px zamiast overlap, żeby presence dots były dobrze widoczne (overlap zasłaniał kropkę następnego). */ .zg-avatar-stack { display: inline-flex; align-items: center; gap: 3px; } /* ─── Konsultanci: avatar-stack / rows ───────────────────────────── .zg-consultants--stack → tryb avatar-only: poziomy stos avatarów. .zg-consultants--rows → text-only lub avatar+text: konsultanci pod sobą. .zg-consultant-item → jeden konsultant (avatar + opcjonalny tekst inline). */ .zg-consultants { display: inline-flex; min-width: 0; } .zg-consultants--stack { flex-direction: row; align-items: center; gap: 3px; } .zg-consultants--rows { flex-direction: column; align-items: flex-start; gap: 2px; } .zg-consultant-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .zg-consultant-name { font-size: 11.5px; line-height: 1.35; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Manager text mode — ten sam wrapper kolumnowy. */ .zg-consultant-names { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; } .zg-presence { position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--row-bg, var(--paper)); box-sizing: content-box; } .zg-presence.is-remote { background: var(--accent); } .zg-presence.is-absent { background: var(--danger); } /* ─── §7 Mono helper — dla ID, dat, liczb ──────────────────── */ /* `class="grid-mono"` na kolumnach ID/dat/liczb. Czcionka jak reszta siatki (sans) zamiast mono — na życzenie; tabular-nums dalej wyrównuje cyfry. */ .grid-mono { font-family: inherit; font-size: 12px; color: var(--ink-soft); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } /* ─── §8 Compact look — header, filter row, data rows ────── Aplikacja stylu z handoff/devexpress-overrides.css ale zawężona do .zg-grid żeby nie wpływać na inne DxGridy w aplikacji. */ /* Header: uppercase mono-mute, paper-2 bg, accent border */ .zg-grid.dxbl-grid .dxbl-grid-header, .zg-grid .dxbl-grid-header-row, .zg-grid .dxbl-grid-header-row th { background: var(--paper-2) !important; color: var(--ink-mute) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-bottom: 1px solid var(--line-2) !important; } /* Filter row — bg na paper-2 (jak header) dla wizualnej spójności, inputy WEWNĄTRZ na paper (kontrast jest, w dark mode widoczne). Bez tego inputy zlewałyby się z bg filter-row w dark. */ .zg-grid .dxbl-grid-filter-row, .zg-grid .dxbl-grid-filter-row td { background: var(--paper-2) !important; border-bottom: 1px solid var(--line-2) !important; padding: 4px 8px !important; } .zg-grid .dxbl-grid-filter-row .dxbl-text-edit, .zg-grid .dxbl-grid-filter-row .dxbl-combobox, .zg-grid .dxbl-grid-filter-row .dxbl-date-edit { background: var(--paper) !important; border: 1px solid var(--line-2) !important; border-radius: 4px !important; font-size: 11.5px !important; min-height: 24px !important; } .zg-grid .dxbl-grid-filter-row .dxbl-text-edit:focus-within, .zg-grid .dxbl-grid-filter-row .dxbl-combobox:focus-within, .zg-grid .dxbl-grid-filter-row .dxbl-date-edit:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; } .zg-grid .dxbl-grid-filter-row input, .zg-grid .dxbl-grid-filter-row .dxbl-text-edit-input { font-size: 11.5px !important; color: var(--ink) !important; padding: 2px 6px !important; height: 22px !important; background: transparent !important; } .zg-grid .dxbl-grid-filter-row input::placeholder { color: var(--ink-faint) !important; } /* Dark mode override — Phase 1 DX rules forsują #262B43 (paper-2) na .dxbl-text-edit/.dxbl-date-edit z wyższą specyficznością (chained :is(body:has(...)) attrs). Wracamy do paper-3 (#2E334F) żeby inputy odstawały od filter row bg (paper-2 w obu motywach). */ [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-text-edit, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-date-edit, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-combobox { background: #2E334F !important; border-color: #3D4366 !important; } [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-text-edit input, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-date-edit input, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-combobox input, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-text-edit-input { background: transparent !important; color: #ECEEF8 !important; } [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-date-edit .dxbl-image, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-date-edit svg, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-filter-row .dxbl-date-edit button { color: #C8CBE0 !important; fill: #C8CBE0 !important; } /* W tej wersji DX filter editor to .dxbl-grid-editor-inplace-container (osobna struktura od .dxbl-text-edit/.dxbl-date-edit). Calendar button ma klasy .dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown. Mapujemy te klasy na tokens. */ .zg-grid .dxbl-grid-editor-inplace-container, .zg-grid tr.dxbl-grid-editor-inplace-container td, .zg-grid .dxbl-grid-editor-inplace-container td { background: var(--paper-2) !important; } .zg-grid .dxbl-grid-editor-inplace-container .dxbl-text-edit, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-edit { background: var(--paper) !important; border: 1px solid var(--line-2) !important; border-radius: 4px !important; } .zg-grid .dxbl-grid-editor-inplace-container .dxbl-text-edit:focus-within, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-edit:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; } .zg-grid .dxbl-grid-editor-inplace-container input, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-text-edit-input { background: transparent !important; color: var(--ink) !important; font-size: 11.5px !important; } .zg-grid .dxbl-grid-editor-inplace-container input::placeholder { color: var(--ink-faint) !important; } /* Calendar/dropdown button w filter editor */ .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn-outline-secondary, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-edit-btn-dropdown, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn.dxbl-btn-icon-only { background: transparent !important; border: none !important; color: var(--ink-mute) !important; padding: 2px !important; } .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn-outline-secondary:hover, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-edit-btn-dropdown:hover, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn.dxbl-btn-icon-only:hover { background: color-mix(in oklab, var(--accent) 12%, transparent) !important; color: var(--accent) !important; } .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn-outline-secondary svg, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-edit-btn-dropdown svg, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn svg, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-image { color: var(--ink-mute) !important; fill: var(--ink-mute) !important; } .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn:hover svg, .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn:hover .dxbl-image { color: var(--accent) !important; fill: var(--accent) !important; } /* Dark mode — Phase 1 forsuje #262B43 na .dxbl-text-edit, więc te reguły muszą mieć wyższą specyficzność (attrs + chain). */ [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-editor-inplace-container .dxbl-text-edit, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-editor-inplace-container .dxbl-edit { background: #2E334F !important; border-color: #3D4366 !important; } [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-editor-inplace-container input, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-editor-inplace-container .dxbl-text-edit-input { background: transparent !important; color: #ECEEF8 !important; } [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-editor-inplace-container svg, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-editor-inplace-container .dxbl-image, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-editor-inplace-container .dxbl-btn-outline-secondary, [data-theme="dark"]:not([data-chrome="classic"]) .zg-grid .dxbl-grid-editor-inplace-container .dxbl-edit-btn-dropdown { color: #C8CBE0 !important; fill: #C8CBE0 !important; } /* Data rows — kompaktowe paddingi, jasna typografia. (Density/wysokość wierszy sterowana w TicketsGrid.razor.scss — scoped, wygrywa specyfiką; tu zostawiamy bazowy compact look.) */ .zg-grid .dxbl-grid-data-row, .zg-grid .dxbl-grid-data-row td { border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; font-size: 12.5px !important; } .zg-grid .dxbl-grid-cell, .zg-grid .dxbl-grid-data-row td { padding: 8px 12px !important; vertical-align: middle !important; } /* Hover & selected — używamy tokenów żeby dark theme też działał */ .zg-grid .dxbl-grid-data-row:hover, .zg-grid .dxbl-grid-data-row:hover td { background: var(--paper-2) !important; } .zg-grid .dxbl-grid-data-row.dxbl-grid-focused-row, .zg-grid .dxbl-grid-data-row.dxbl-selected, .zg-grid .dxbl-grid-data-row.dxbl-grid-focused-row td, .zg-grid .dxbl-grid-data-row.dxbl-selected td { background: var(--accent-soft) !important; color: var(--accent-ink) !important; } /* Dark — accent-soft (oklch 32%) zlewa się z ciemnymi wierszami. Mocniejsze accent-tinted tło + lewy accent bar na pierwszej komórce dla wyraźnego wskazania zaznaczenia. */ [data-theme="dark"] .zg-grid .dxbl-grid-data-row.dxbl-grid-focused-row td, [data-theme="dark"] .zg-grid .dxbl-grid-data-row.dxbl-selected td { background: color-mix(in oklab, var(--accent) 26%, var(--paper)) !important; color: var(--ink) !important; } [data-theme="dark"] .zg-grid .dxbl-grid-data-row.dxbl-grid-focused-row td:first-child, [data-theme="dark"] .zg-grid .dxbl-grid-data-row.dxbl-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent) !important; } /* ─── §9 Header filter icons (lejek) + sort arrow + date pickery ─── Wszystkie ikony w nagłówkach + filter row biorą tokens. Full opacity bo w handoff mockupie ikony są wyraźne, nie wyciszone. */ .zg-grid .dxbl-grid-header, .zg-grid .dxbl-grid-header-cell, .zg-grid .dxbl-grid-header-row th, .zg-grid .dxbl-grid-header .dxbl-image, .zg-grid .dxbl-grid-header svg, .zg-grid .dxbl-grid-header-cell .dxbl-image, .zg-grid .dxbl-grid-header-cell svg, .zg-grid .dxbl-grid-header-cell button, .zg-grid .dxbl-grid-header-cell i { color: var(--ink-mute) !important; fill: var(--ink-mute) !important; } .zg-grid .dxbl-grid-header-cell button { background: transparent !important; border: none !important; } .zg-grid .dxbl-grid-header-cell button:hover, .zg-grid .dxbl-grid-header-cell button:hover .dxbl-image, .zg-grid .dxbl-grid-header-cell button:hover svg, .zg-grid .dxbl-grid-header-cell button:hover i { color: var(--accent) !important; fill: var(--accent) !important; background: color-mix(in oklab, var(--accent) 10%, transparent) !important; } /* Aktywny filtr (filter applied) — ikonka w accent kolorze */ .zg-grid .dxbl-grid-header-cell .dxbl-grid-header-filter-applied .dxbl-image, .zg-grid .dxbl-grid-header-cell .dxbl-grid-header-filter-applied svg, .zg-grid .dxbl-grid-header-cell .dxbl-grid-header-filter-active .dxbl-image, .zg-grid .dxbl-grid-header-cell .dxbl-grid-header-filter-active svg { color: var(--accent) !important; fill: var(--accent) !important; } /* Przycisk lejka w stanie wciśniętym/otwartym (dropdown filtra otwarty) — DX domyślnie daje jasne tło (biały kwadrat w dark). Token-based highlight spójny z hover, działa light i dark. */ .zg-grid .dxbl-grid-header-cell button:active, .zg-grid .dxbl-grid-header-cell button:focus, .zg-grid .dxbl-grid-header-cell button.dxbl-active, .zg-grid .dxbl-grid-header-cell button[aria-expanded="true"], .zg-grid .dxbl-grid-header-cell .dxbl-active, .zg-grid .dxbl-grid-header-cell [aria-expanded="true"] { background: color-mix(in oklab, var(--accent) 16%, transparent) !important; border: none !important; box-shadow: none !important; outline: none !important; } .zg-grid .dxbl-grid-header-cell button:active .dxbl-image, .zg-grid .dxbl-grid-header-cell button:active svg, .zg-grid .dxbl-grid-header-cell button[aria-expanded="true"] .dxbl-image, .zg-grid .dxbl-grid-header-cell button[aria-expanded="true"] svg, .zg-grid .dxbl-grid-header-cell button.dxbl-active .dxbl-image, .zg-grid .dxbl-grid-header-cell button.dxbl-active svg { color: var(--accent) !important; fill: var(--accent) !important; } /* Calendar / date picker icon w filter row */ .zg-grid .dxbl-grid-filter-row .dxbl-date-edit .dxbl-image, .zg-grid .dxbl-grid-filter-row .dxbl-date-edit svg, .zg-grid .dxbl-grid-filter-row .dxbl-date-edit button { color: var(--ink-mute) !important; fill: var(--ink-mute) !important; } .zg-grid .dxbl-grid-filter-row .dxbl-date-edit button:hover .dxbl-image, .zg-grid .dxbl-grid-filter-row .dxbl-date-edit button:hover svg { color: var(--accent) !important; fill: var(--accent) !important; } /* ─── §10 Pager — compact handoff styling ─── Tła paper-2 (zlewa się z header), buttony 24px małe, mono labels, accent na current page. Cała pasek wysokość ~40px. */ .zg-grid .dxbl-grid-pager-container, .zg-grid .dxbl-grid-bottom-panel, .zg-grid .dxbl-pager-container { background: var(--paper-2) !important; border-top: 1px solid var(--line-2) !important; padding: 6px 16px !important; min-height: 44px !important; color: var(--ink-mute) !important; font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace) !important; font-size: 12.5px !important; /* Pager nav wycentrowany; page-size combo idzie negative-margin overlay z .pager-container w TicketsGrid.razor.scss. */ display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; /* Przyklejony do dołu gridu (flex column) — gdy mało wierszy data area nie wypełnia, bez tego pasek (i combo) zjeżdżał mid-viewport. */ margin-top: auto !important; } /* Stara reguła: combo "rozmiar strony" jest teraz w .pager-container (sibling po DxGrid) z negative-margin overlay — patrz TicketsGrid.razor.scss. */ /* Page input wrapper (.dxbl-text-edit) — z borderem. Wewnętrzny bez borderu żeby uniknąć podwójnego. */ .zg-grid .dxbl-pager-container .dxbl-text-edit, .zg-grid .dxbl-grid-bottom-panel .dxbl-text-edit, .zg-grid .dxbl-pager .dxbl-text-edit { background: var(--paper) !important; border: 1px solid var(--line-2) !important; border-radius: 4px !important; height: 30px !important; min-height: 30px !important; min-width: 75px; } .zg-grid .dxbl-pager-container .dxbl-text-edit:focus-within, .zg-grid .dxbl-grid-bottom-panel .dxbl-text-edit:focus-within, .zg-grid .dxbl-pager .dxbl-text-edit:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; } .zg-grid .dxbl-pager-container input, .zg-grid .dxbl-grid-bottom-panel input, .zg-grid .dxbl-pager input { font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace) !important; color: var(--ink) !important; background: transparent !important; border: none !important; box-shadow: none !important; text-align: center !important; font-size: 12px !important; height: 28px !important; padding: 0 8px !important; outline: none !important; } /* Natywny selektor rozmiaru strony DX (combobox [N ▼]) — theme-aware. Tło comboboxa idzie z custom properties (cascade do shadow DOM) + jawne tło. */ .zg-grid .dxbl-pager-container .dxbl-combobox, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox, .zg-grid .dxbl-pager .dxbl-combobox { background: var(--paper) !important; border: 1px solid var(--line-2) !important; border-radius: 4px !important; height: 30px !important; min-height: 30px !important; min-width: 96px !important; width: 96px !important; --dxbl-text-edit-bg: var(--paper); --dxbl-text-edit-color: var(--ink); --dxbl-text-edit-border-color: var(--line-2); /* Tło grupy przycisku ze strzałką — domyślnie białe (--dxbl-text-edit-btn-bg). */ --dxbl-text-edit-btn-bg: transparent; --dxbl-text-edit-btn-hover-bg: var(--paper-2); } /* Input/text-edit w środku selektora — wypełnia szerokość, nie ścina wartości. */ .zg-grid .dxbl-pager-container .dxbl-combobox .dxbl-text-edit, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox .dxbl-text-edit, .zg-grid .dxbl-pager .dxbl-combobox .dxbl-text-edit { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; border: none !important; } .zg-grid .dxbl-pager-container .dxbl-combobox input, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox input, .zg-grid .dxbl-pager .dxbl-combobox input { width: 100% !important; min-width: 0 !important; text-align: left !important; } /* Grupa przycisku (strzałka) — bezpośrednio, bo custom prop bywa nadpisana. */ .zg-grid .dxbl-pager-container .dxbl-combobox .dxbl-btn-group, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox .dxbl-btn-group, .zg-grid .dxbl-pager .dxbl-combobox .dxbl-btn-group, .zg-grid .dxbl-pager-container .dxbl-text-edit > .dxbl-btn-group, .zg-grid .dxbl-grid-bottom-panel .dxbl-text-edit > .dxbl-btn-group, .zg-grid .dxbl-pager .dxbl-text-edit > .dxbl-btn-group { background-color: transparent !important; background: transparent !important; } .zg-grid .dxbl-pager-container .dxbl-combobox:focus-within, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox:focus-within, .zg-grid .dxbl-pager .dxbl-combobox:focus-within { border-color: var(--accent) !important; } .zg-grid .dxbl-pager-container .dxbl-combobox .dxbl-btn, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox .dxbl-btn, .zg-grid .dxbl-pager .dxbl-combobox .dxbl-btn, .zg-grid .dxbl-pager-container .dxbl-combobox .dxbl-edit-btn, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox .dxbl-edit-btn { background: transparent !important; border: none !important; color: var(--ink-mute) !important; } .zg-grid .dxbl-pager-container .dxbl-combobox svg, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox svg, .zg-grid .dxbl-pager .dxbl-combobox svg, .zg-grid .dxbl-pager-container .dxbl-combobox .dxbl-image, .zg-grid .dxbl-grid-bottom-panel .dxbl-combobox .dxbl-image { color: var(--ink-mute) !important; fill: var(--ink-mute) !important; } /* Buttony nawigacji — 30px kwadraciki z borderami */ .zg-grid .dxbl-pager-container button, .zg-grid .dxbl-grid-bottom-panel button, .zg-grid .dxbl-pager button { background: transparent !important; border: 1px solid var(--line-2) !important; color: var(--ink-mute) !important; border-radius: 4px !important; width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0 !important; margin: 0 3px !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .zg-grid .dxbl-pager-container button svg, .zg-grid .dxbl-grid-bottom-panel button svg, .zg-grid .dxbl-pager button svg, .zg-grid .dxbl-pager-container button .dxbl-image, .zg-grid .dxbl-grid-bottom-panel button .dxbl-image { color: var(--ink-mute) !important; fill: var(--ink-mute) !important; width: 14px !important; height: 14px !important; } .zg-grid .dxbl-pager-container button:hover, .zg-grid .dxbl-grid-bottom-panel button:hover, .zg-grid .dxbl-pager button:hover { background: var(--paper) !important; color: var(--accent) !important; border-color: var(--accent) !important; } .zg-grid .dxbl-pager-container button:hover svg, .zg-grid .dxbl-pager-container button:hover .dxbl-image, .zg-grid .dxbl-grid-bottom-panel button:hover svg, .zg-grid .dxbl-pager button:hover svg { color: var(--accent) !important; fill: var(--accent) !important; } .zg-grid .dxbl-pager-container button:disabled, .zg-grid .dxbl-grid-bottom-panel button:disabled, .zg-grid .dxbl-pager button:disabled { opacity: 0.3; cursor: not-allowed; background: transparent !important; border-color: var(--line-2) !important; } /* Current page (active) — lekki highlight token-driven: accent-soft tło + accent-ink tekst. Tokeny same przełączają L/D (light: jasne tło/ciemny tekst, dark: ciemne tło/jasny tekst), więc jeden zestaw reguł działa w obu motywach. */ .zg-grid .dxbl-pager-container button.dxbl-active, .zg-grid .dxbl-pager-container .dxbl-pager-current-page, .zg-grid .dxbl-grid-bottom-panel button.dxbl-active, .zg-grid .dxbl-pager .dxbl-active, .zg-grid .dxbl-pager .dxbl-pager-active-page-btn, .zg-grid .dxbl-grid-bottom-panel .dxbl-pager-active-page-btn { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-color: color-mix(in oklab, var(--accent) 40%, transparent) !important; font-weight: 600 !important; } /* "of X" label - mono mute, kompaktowe spacing */ .zg-grid .dxbl-pager-container .dxbl-pager-page-info, .zg-grid .dxbl-grid-bottom-panel .dxbl-pager-page-info, .zg-grid .dxbl-pager span { font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace) !important; color: var(--ink-mute) !important; font-size: 12px !important; margin: 0 8px; align-self: center; } /* ─── §11 Konsultanci filter-row blocker (disabled input) ─── Render w TicketsGrid.razor: wskazuje że trzeba kliknąć lejek na headerze. Stylowanie musi pasować do compact gridu w light i dark mode. */ .zg-grid .consultant-filter-row-disabled { background: var(--paper) !important; border: 1px dashed var(--line-2) !important; border-radius: 4px !important; color: var(--ink-faint) !important; font-size: 11px; height: 24px; padding: 2px 8px; cursor: not-allowed; width: 100%; }