/* ============================================================================= Wspólne style siatek danych. Używają ich: rejestry wniosków (admin_application, admin_kp, admin_kp2), rejestr rozliczeń (admin_settlement) — prefiks .ag-, oraz ranking KP2 — prefiks .rk2-. Wcześniej te reguły były kopiowane inline w każdym widoku i miały wpisane na sztywno jasne kolory, przez co po przełączeniu motywu na ciemny zostawały białe nagłówki, linie i nieczytelny tekst. Teraz kolory idą przez zmienne, a tryb ciemny nadpisuje wyłącznie paletę — reszta reguł jest wspólna. Motyw ustawia Phoenix atrybutem data-bs-theme na . ============================================================================= */ :root { /* powierzchnie */ --grid-surface: #fff; --grid-panel-bg: #fff; --grid-head-bg: #f7f8fa; --grid-row-hover: #fafbfe; --grid-hover-strong: #f5f7fa; --grid-shadow: rgba(0, 0, 0, .04); /* linie */ --grid-border: #dee2e6; --grid-rule: #e9ecef; --grid-rule-soft: #f0f2f8; --grid-input-border: #ced4da; /* tekst */ --grid-text: #31374a; --grid-text-strong: #31374a; --grid-muted: #8a94ad; --grid-faint: #adb5bd; --grid-btn-text: #525b75; /* akcent */ --grid-accent: #0d6efd; --grid-accent-hover: #0b5ed7; --grid-focus: #7ab3fb; --grid-focus-ring: rgba(13, 110, 253, .12); /* chipsy filtrów */ --grid-chip-bg: #eef3ff; --grid-chip-border: #c5d8ff; --grid-chip-text: #2563eb; --grid-chip-strong: #1d4ed8; --grid-chip-x: #93aef0; /* akcja niszcząca (wyczyść filtry) */ --grid-danger: #c0392b; --grid-danger-bg: #fef2f2; --grid-danger-border: #fde8e8; /* obwódka plakietek — widoczna dopiero w trybie ciemnym */ --grid-badge-ring: transparent; /* plakietki statusów */ --grid-badge-R-bg: #f1f3f5; --grid-badge-R-fg: #64748b; --grid-badge-W-bg: #e0f2fe; --grid-badge-W-fg: #0369a1; --grid-badge-E-bg: #fef3c7; --grid-badge-E-fg: #92400e; --grid-badge-C-bg: #ffedd5; --grid-badge-C-fg: #9a3412; --grid-badge-Z-bg: #dcfce7; --grid-badge-Z-fg: #166534; --grid-badge-O-bg: #fee2e2; --grid-badge-O-fg: #991b1b; --grid-badge-D-bg: #f1f3f5; --grid-badge-D-fg: #94a3b8; /* plakietka modułu (rejestr rozliczeń) */ --grid-mod-bg: #f4f1fe; --grid-mod-fg: #6d4aca; --grid-mod-border: #e3dcfa; /* znacznik „osoba z niepełnosprawnością” */ --grid-on-bg: #dcfce7; --grid-on-fg: #166534; --grid-on-border: transparent; /* ranking — miejsca na podium */ --grid-rank: #c5cad6; --grid-rank-1: #b45309; --grid-rank-2: #78716c; --grid-rank-3: #92400e; /* ranking — pozostałe */ --grid-id-bg: #f1f3f9; --grid-id-border: #e3e6ed; --grid-fiszka-bg: #f8f9fb; --grid-fiszka-bar: #93c5fd; --grid-arrow: #c5cad6; --grid-warn: #dc3545; --grid-toggle: #c5cad6; --grid-rk-badge-A-bg: #d1fae5; --grid-rk-badge-A-fg: #065f46; --grid-rk-badge-R-bg: #fee2e2; --grid-rk-badge-R-fg: #7f1d1d; --grid-rk-badge-W-bg: #fef9c3; --grid-rk-badge-W-fg: #713f12; --grid-rk-badge-P-bg: #dbeafe; --grid-rk-badge-P-fg: #1e40af; --grid-rk-badge-x-bg: #f1f3f9; --grid-rk-badge-x-fg: #6b7280; } /* ----------------------------------------------------------------------------- Tryb ciemny — paleta dopasowana do Phoenixa (body #0f111a, border #373e53). Kolory statusów są mocniej nasycone niż w trybie jasnym: pastelowe tła z jasnego motywu na ciemnym tle traciły czytelność, więc plakietki dostają półprzezroczyste tło, jasny tekst i delikatną obwódkę. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --grid-surface: #222834; --grid-panel-bg: #1a1f2b; --grid-head-bg: #252b3a; --grid-row-hover: #232937; --grid-hover-strong: #2c3345; --grid-shadow: rgba(0, 0, 0, .35); --grid-border: #373e53; --grid-rule: #2b3143; --grid-rule-soft: #272d3c; --grid-input-border: #3d4459; --grid-text: #eff2f6; --grid-text-strong: #eff2f6; --grid-muted: #949db5; --grid-faint: #7a8299; --grid-btn-text: #c8cfe0; --grid-accent: #4c8dff; --grid-accent-hover: #3b7cf0; --grid-focus: #4c8dff; --grid-focus-ring: rgba(76, 141, 255, .25); --grid-chip-bg: rgba(76, 141, 255, .16); --grid-chip-border: rgba(76, 141, 255, .40); --grid-chip-text: #8ab4ff; --grid-chip-strong: #bcd4ff; --grid-chip-x: #6f86b5; --grid-danger: #f87171; --grid-danger-bg: rgba(248, 113, 113, .14); --grid-danger-border: rgba(248, 113, 113, .30); --grid-badge-ring: rgba(255, 255, 255, .10); --grid-badge-R-bg: rgba(148, 163, 184, .18); --grid-badge-R-fg: #cbd5e1; --grid-badge-W-bg: rgba(56, 132, 255, .22); --grid-badge-W-fg: #7cb0ff; --grid-badge-E-bg: rgba(245, 158, 11, .20); --grid-badge-E-fg: #fcd34d; --grid-badge-C-bg: rgba(249, 115, 22, .22); --grid-badge-C-fg: #fdba74; --grid-badge-Z-bg: rgba(34, 197, 94, .20); --grid-badge-Z-fg: #6ee7a8; --grid-badge-O-bg: rgba(239, 68, 68, .20); --grid-badge-O-fg: #fca5a5; --grid-badge-D-bg: rgba(100, 116, 139, .18); --grid-badge-D-fg: #94a3b8; --grid-mod-bg: rgba(139, 92, 246, .20); --grid-mod-fg: #c4b5fd; --grid-mod-border: rgba(196, 181, 253, .35); --grid-on-bg: rgba(34, 197, 94, .20); --grid-on-fg: #6ee7a8; --grid-on-border: rgba(110, 231, 168, .35); --grid-rank: #5b6478; --grid-rank-1: #fbbf24; --grid-rank-2: #cbd5e1; --grid-rank-3: #fb923c; --grid-id-bg: rgba(148, 163, 184, .12); --grid-id-border: #3a4257; --grid-fiszka-bg: #1a1f2b; --grid-fiszka-bar: #3b82f6; --grid-arrow: #5b6478; --grid-warn: #f87171; --grid-toggle: #6b7488; --grid-rk-badge-A-bg: rgba(34, 197, 94, .20); --grid-rk-badge-A-fg: #6ee7a8; --grid-rk-badge-R-bg: rgba(239, 68, 68, .20); --grid-rk-badge-R-fg: #fca5a5; --grid-rk-badge-W-bg: rgba(245, 158, 11, .20); --grid-rk-badge-W-fg: #fcd34d; --grid-rk-badge-P-bg: rgba(56, 132, 255, .22); --grid-rk-badge-P-fg: #7cb0ff; --grid-rk-badge-x-bg: rgba(148, 163, 184, .18); --grid-rk-badge-x-fg: #cbd5e1; } /* ============================================================================= Rejestry wniosków i rozliczeń (.ag-) ============================================================================= */ /* --- layout --- */ .ag-scroll { overflow-x: auto; } /* --- toolbar --- */ .ag-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--grid-rule); margin-bottom: 12px; } .ag-select-call { max-width: 220px; font-size: 0.8rem; padding: 5px 10px; border-color: var(--grid-input-border); border-radius: 6px; color: var(--grid-text); } .ag-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; font-size: 0.78rem; font-weight: 500; cursor: pointer; border: 1px solid; transition: background .13s, color .13s; text-decoration: none; white-space: nowrap; } .ag-btn-outline { background: var(--grid-surface); border-color: var(--grid-input-border); color: var(--grid-btn-text); } .ag-btn-outline:hover { background: var(--grid-hover-strong); color: var(--grid-text); } .ag-btn-primary { background: var(--grid-accent); border-color: var(--grid-accent); color: #fff; } .ag-btn-primary:hover { background: var(--grid-accent-hover); color: #fff; } .ag-btn-ghost { background: none; border-color: transparent; color: var(--grid-muted); } .ag-btn-ghost:hover { color: var(--grid-danger); background: var(--grid-danger-bg); border-color: var(--grid-danger-border); } .ag-badge-count { background: var(--grid-accent); color: #fff; border-radius: 10px; font-size: 0.62rem; font-weight: 700; padding: 1px 6px; line-height: 1.4; } .ag-total { margin-left: auto; font-size: 0.72rem; color: var(--grid-muted); white-space: nowrap; } .ag-divider { width: 1px; height: 22px; background: var(--grid-rule); } /* --- filter panel --- */ .ag-panel { background: var(--grid-panel-bg); border: 1px solid var(--grid-border); border-radius: 8px; padding: 16px 18px 12px; margin-bottom: 12px; box-shadow: 0 1px 4px var(--grid-shadow); } .ag-panel-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grid-muted); margin-bottom: 12px; } .ag-panel .form-label { font-size: 0.65rem; font-weight: 600; text-transform: none; letter-spacing: .05em; color: var(--grid-muted); margin-bottom: 3px; display: block; padding-left: 0; } .ag-panel .form-control, .ag-panel .form-select { font-size: 0.8rem; padding: 5px 9px; border-color: var(--grid-border); border-radius: 6px; color: var(--grid-text); } .ag-panel .form-control:focus, .ag-panel .form-select:focus { border-color: var(--grid-focus); box-shadow: 0 0 0 3px var(--grid-focus-ring); } .ag-panel-actions { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--grid-rule-soft); margin-top: 4px; } /* --- chips --- */ .ag-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .ag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--grid-chip-bg); border: 1px solid var(--grid-chip-border); border-radius: 4px; padding: 2px 8px 2px 9px; font-size: 0.7rem; color: var(--grid-chip-text); } .ag-chip strong { font-weight: 600; color: var(--grid-chip-strong); } .ag-chip-remove { color: var(--grid-chip-x); text-decoration: none; font-size: 0.9rem; line-height: 1; } .ag-chip-remove:hover { color: var(--grid-danger); } /* --- table --- */ table.ag { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; } table.ag thead th { background: var(--grid-head-bg); border-bottom: 1px solid var(--grid-border); border-top: 1px solid var(--grid-border); padding: 7px 10px; text-align: left; white-space: nowrap; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--grid-muted); } table.ag thead th a { color: inherit; text-decoration: none; } table.ag thead th a:hover { color: var(--grid-accent); } table.ag thead th a.asc::after { content: ' ▲'; font-size: 0.6rem; color: var(--grid-accent); } table.ag thead th a.desc::after { content: ' ▼'; font-size: 0.6rem; color: var(--grid-accent); } table.ag tbody td { padding: 8px 10px; border-bottom: 1px solid var(--grid-rule-soft); vertical-align: middle; } table.ag tbody tr:hover td { background: var(--grid-row-hover); } table.ag .center { text-align: center; } .ag-num { font-weight: 600; color: var(--grid-text-strong); } .ag-sub { font-size: 0.68rem; color: var(--grid-muted); margin-top: 1px; } .ag-name { font-weight: 600; color: var(--grid-text-strong); } .ag-muted { color: var(--grid-muted); } .ag-title { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- znacznik „osoba z niepełnosprawnością” (rejestr KP2) --- */ .ag-on-yes { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 4px; background: var(--grid-on-bg); color: var(--grid-on-fg); font-size: 0.68rem; font-weight: 700; box-shadow: inset 0 0 0 1px var(--grid-on-border); } /* --- plakietka modułu (rejestr rozliczeń) --- */ .ag-mod { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--grid-mod-bg); color: var(--grid-mod-fg); border: 1px solid var(--grid-mod-border); font-size: 0.68rem; font-weight: 700; letter-spacing: .03em; } /* --- status badges --- */ .ag-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--grid-badge-ring); } .ag-badge-R { background: var(--grid-badge-R-bg); color: var(--grid-badge-R-fg); } .ag-badge-W { background: var(--grid-badge-W-bg); color: var(--grid-badge-W-fg); } .ag-badge-E { background: var(--grid-badge-E-bg); color: var(--grid-badge-E-fg); } .ag-badge-C { background: var(--grid-badge-C-bg); color: var(--grid-badge-C-fg); } .ag-badge-Z { background: var(--grid-badge-Z-bg); color: var(--grid-badge-Z-fg); } .ag-badge-O { background: var(--grid-badge-O-bg); color: var(--grid-badge-O-fg); } .ag-badge-D { background: var(--grid-badge-D-bg); color: var(--grid-badge-D-fg); } /* Statusy użytkowników (A/N/P/D) korzystają z tej samej skali kolorów co statusy wniosków — literki się nie pokrywają poza D, które w obu znaczy „nieaktywne”. */ .ag-badge-A { background: var(--grid-badge-Z-bg); color: var(--grid-badge-Z-fg); } .ag-badge-P { background: var(--grid-badge-E-bg); color: var(--grid-badge-E-fg); } .ag-badge-N { background: var(--grid-badge-R-bg); color: var(--grid-badge-R-fg); } /* Warianty nazwane — dla list, gdzie litera statusu znaczy co innego niż w rejestrach wniosków (np. „P" to opublikowany nabór, a nie oczekujący użytkownik). Widok wybiera wtedy wariant wprost, zamiast składać klasę z litery. */ .ag-badge-ok { background: var(--grid-badge-Z-bg); color: var(--grid-badge-Z-fg); } .ag-badge-info { background: var(--grid-badge-W-bg); color: var(--grid-badge-W-fg); } .ag-badge-warn { background: var(--grid-badge-E-bg); color: var(--grid-badge-E-fg); } .ag-badge-danger { background: var(--grid-badge-O-bg); color: var(--grid-badge-O-fg); } .ag-badge-muted { background: var(--grid-badge-R-bg); color: var(--grid-badge-R-fg); } /* plakietka roli */ .ag-role { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--grid-mod-bg); color: var(--grid-mod-fg); border: 1px solid var(--grid-mod-border); font-size: 0.68rem; font-weight: 600; } .ag-role-user { background: none; border-color: transparent; color: var(--grid-muted); font-weight: 500; } /* --- pager / stan pusty --- */ .ag-pager { margin-top: 12px; display: flex; align-items: center; } .ag-empty { padding: 28px 12px; text-align: center; color: var(--grid-muted); font-size: 0.82rem; } /* ============================================================================= Ranking KP2 (.rk2-) ============================================================================= */ .rk2-scroll { overflow-x: auto; } /* --- toolbar --- */ .rk2-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 10px; border-bottom: 1px solid var(--grid-rule); margin-bottom: 12px; } .rk2-select-call { max-width: 200px; font-size: 0.8rem; padding: 5px 10px; border-color: var(--grid-input-border); border-radius: 6px; color: var(--grid-text); } .rk2-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; font-size: 0.78rem; font-weight: 500; cursor: pointer; border: 1px solid; transition: background .13s, color .13s; text-decoration: none; white-space: nowrap; } .rk2-btn-outline { background: var(--grid-surface); border-color: var(--grid-input-border); color: var(--grid-btn-text); } .rk2-btn-outline:hover { background: var(--grid-hover-strong); color: var(--grid-text); } .rk2-btn-primary { background: var(--grid-accent); border-color: var(--grid-accent); color: #fff; } .rk2-btn-primary:hover { background: var(--grid-accent-hover); } .rk2-btn-ghost { background: none; border-color: transparent; color: var(--grid-muted); } .rk2-btn-ghost:hover { color: var(--grid-danger); background: var(--grid-danger-bg); border-color: var(--grid-danger-border); } .rk2-badge-count { background: var(--grid-accent); color: #fff; border-radius: 10px; font-size: 0.62rem; font-weight: 700; padding: 1px 6px; line-height: 1.4; } .rk2-total { margin-left: auto; font-size: 0.72rem; color: var(--grid-muted); white-space: nowrap; } /* --- filter panel --- */ .rk2-panel { background: var(--grid-panel-bg); border: 1px solid var(--grid-border); border-radius: 8px; padding: 16px 18px 12px; margin-bottom: 12px; box-shadow: 0 1px 4px var(--grid-shadow); } .rk2-panel-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grid-muted); margin-bottom: 12px; } .rk2-panel .form-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--grid-muted); margin-bottom: 3px; display: block; } .rk2-panel .form-control, .rk2-panel .form-select { font-size: 0.8rem; padding: 5px 9px; border-color: var(--grid-border); border-radius: 6px; color: var(--grid-text); } .rk2-panel .form-control:focus, .rk2-panel .form-select:focus { border-color: var(--grid-focus); box-shadow: 0 0 0 3px var(--grid-focus-ring); } .rk2-panel-actions { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--grid-rule-soft); margin-top: 4px; } .rk2-panel-divider { width: 1px; height: 22px; background: var(--grid-rule); } /* --- chips --- */ .rk2-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .rk2-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--grid-chip-bg); border: 1px solid var(--grid-chip-border); border-radius: 4px; padding: 2px 8px 2px 9px; font-size: 0.7rem; color: var(--grid-chip-text); } .rk2-chip strong { font-weight: 600; color: var(--grid-chip-strong); } .rk2-chip-remove { color: var(--grid-chip-x); text-decoration: none; font-size: 0.9rem; line-height: 1; display: inline-flex; align-items: center; margin-left: 1px; transition: color .12s; } .rk2-chip-remove:hover { color: var(--grid-danger); } /* --- table --- */ table.rk2 { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.79rem; font-variant-numeric: tabular-nums; } table.rk2 thead th { position: sticky; top: 0; z-index: 2; background: var(--grid-head-bg); padding: 8px 10px; font-size: 0.63rem; font-weight: 700; color: var(--grid-muted); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid var(--grid-border); border-top: 1px solid var(--grid-border); text-align: left; } table.rk2 thead th.center { text-align: center; } table.rk2 thead th a { color: var(--grid-muted); text-decoration: none; } table.rk2 thead th a:hover { color: var(--grid-accent); } table.rk2 thead th a.asc::after { content: ' ↑'; color: var(--grid-accent); font-size: .75em; } table.rk2 thead th a.desc::after { content: ' ↓'; color: var(--grid-accent); font-size: .75em; } table.rk2 tbody tr.rk2-main:hover td { background: var(--grid-row-hover); } table.rk2 td { padding: 9px 10px; vertical-align: middle; border-bottom: 1px solid var(--grid-rule-soft); } table.rk2 td.center { text-align: center; } /* --- rank cell --- */ .rk2-rank { font-size: 0.9rem; font-weight: 700; text-align: center; color: var(--grid-rank); font-variant-numeric: tabular-nums; min-width: 28px; } .rk2-rank-1 { color: var(--grid-rank-1); } .rk2-rank-2 { color: var(--grid-rank-2); } .rk2-rank-3 { color: var(--grid-rank-3); } /* --- applicant cell --- */ .rk2-name { font-weight: 600; color: var(--grid-text-strong); line-height: 1.3; } .rk2-sub { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; } .rk2-num { font-size: 0.72rem; color: var(--grid-accent); font-weight: 500; } .rk2-id { font-size: 0.63rem; color: var(--grid-muted); background: var(--grid-id-bg); border: 1px solid var(--grid-id-border); border-radius: 3px; padding: 1px 5px; font-family: ui-monospace, monospace; } /* --- service cell --- */ .rk2-svc-title { font-weight: 500; color: var(--grid-text-strong); line-height: 1.35; max-width: 260px; } .rk2-svc-company { font-size: 0.71rem; color: var(--grid-muted); margin-top: 2px; max-width: 260px; } /* --- points cell --- */ .rk2-pts { text-align: center; } .rk2-pts-num { font-size: 1.05rem; font-weight: 700; color: var(--grid-text-strong); line-height: 1.1; } .rk2-pts-label { font-size: 0.6rem; color: var(--grid-faint); text-transform: uppercase; letter-spacing: .05em; } /* --- status badges --- */ .rk2-badge { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 0.68rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--grid-badge-ring); } .rk2-badge-A { background: var(--grid-rk-badge-A-bg); color: var(--grid-rk-badge-A-fg); } .rk2-badge-R { background: var(--grid-rk-badge-R-bg); color: var(--grid-rk-badge-R-fg); } .rk2-badge-W { background: var(--grid-rk-badge-W-bg); color: var(--grid-rk-badge-W-fg); } .rk2-badge-P { background: var(--grid-rk-badge-P-bg); color: var(--grid-rk-badge-P-fg); } .rk2-badge-\? { background: var(--grid-rk-badge-x-bg); color: var(--grid-rk-badge-x-fg); } /* --- dates cell --- */ .rk2-dates { white-space: nowrap; font-size: 0.76rem; color: var(--grid-text-strong); } .rk2-dates .arr { color: var(--grid-arrow); margin: 0 3px; font-size: .7em; } .rk2-bur-warn { font-size: 0.67rem; color: var(--grid-warn); margin-top: 2px; display: flex; align-items: center; gap: 3px; } /* --- ON badge --- */ .rk2-on-yes { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--grid-rk-badge-P-bg); color: var(--grid-rk-badge-P-fg); font-size: 0.6rem; font-weight: 800; border: 1.5px solid var(--grid-rk-badge-P-fg); } .rk2-on-no { color: var(--grid-rank); } /* --- date/time cell --- */ .rk2-dt { font-size: 0.76rem; white-space: nowrap; color: var(--grid-text-strong); } .rk2-time { font-size: 0.67rem; color: var(--grid-faint); } /* --- toggle button --- */ .rk2-toggle { background: none; border: none; cursor: pointer; padding: 4px 5px; color: var(--grid-toggle); border-radius: 4px; display: inline-flex; align-items: center; transition: color .12s, background .12s; } .rk2-toggle:hover { color: var(--grid-accent); background: var(--grid-chip-bg); } .rk2-toggle svg { transition: transform .18s cubic-bezier(.4, 0, .2, 1); } .rk2-toggle.is-open svg { transform: rotate(90deg); } /* --- fiszka --- */ tr.rk2-fiszka td { padding: 0; background: var(--grid-fiszka-bg); border-bottom: 1px solid var(--grid-border); } .rk2-fiszka-inner { padding: 10px 14px; border-left: 2px solid var(--grid-fiszka-bar); margin: 0 10px; display: flex; gap: 28px; flex-wrap: wrap; } .rk2-fiszka-item label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--grid-muted); display: block; margin-bottom: 2px; } .rk2-fiszka-item span { font-size: 0.78rem; color: var(--grid-text); font-family: ui-monospace, monospace; } .rk2-fiszka-item a { font-size: 0.78rem; } /* --- empty / alert --- */ .rk2-empty { padding: 32px 16px; text-align: center; color: var(--grid-muted); font-size: 0.82rem; border: 1px dashed var(--grid-border); border-radius: 8px; } /* --- pager --- */ .rk2-pager { margin-top: 12px; display: flex; align-items: center; }