/**
 * LOYAL OS — alternatywny system wizualny zalogowanych aplikacji.
 *
 * Odpowiedzialność: definiuje wspólne tokeny marki, wariant dzień/noc,
 * spójne komponenty paneli klienta, firmy, obsługi, administratora i
 * personelu oraz bezpieczny układ responsywny od 320 px. Plik nie zmienia
 * zachowania biznesowego ani publicznych stron marketingowych.
 */

:root {
  --loyal-navy: #0f172a;
  --loyal-canvas: #ffffff;
  --loyal-canvas-subtle: #f8fafc;
  --loyal-text: #0f172a;
  --loyal-text-muted: #475569;
  --loyal-border: #e2e8f0;
  --loyal-accent: #2563eb;
  --loyal-success: #10b981;
  --loyal-warning: #d97706;
  --loyal-danger: #dc2626;
  --loyal-card-radius: 20px;
  --loyal-control-radius: 12px;
  --loyal-pill-radius: 999px;
  --loyal-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --loyal-container: 1280px;
  --loyal-surface: #ffffff;
  --loyal-surface-raised: #ffffff;
  --loyal-surface-soft: #f8fafc;
  --loyal-focus: rgba(37, 99, 235, 0.24);
}

html[data-loyal-theme="light"] {
  --loyal-surface: #ffffff;
  --loyal-surface-raised: #ffffff;
  --loyal-surface-soft: #f8fafc;
  --loyal-app-canvas: #f8fafc;
  --loyal-text: #0f172a;
  --loyal-text-muted: #475569;
  --loyal-border: #e2e8f0;
  --loyal-primary-button: #0f172a;
  --loyal-primary-button-hover: #1e293b;
  --loyal-on-primary: #ffffff;
  --loyal-overlay: rgba(15, 23, 42, 0.48);
  --loyal-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

html[data-loyal-theme="dark"] {
  --loyal-surface: #111c31;
  --loyal-surface-raised: #162238;
  --loyal-surface-soft: #0f1a2d;
  --loyal-app-canvas: #091120;
  --loyal-text: #f8fafc;
  --loyal-text-muted: #a8b6ca;
  --loyal-border: #2b3a52;
  --loyal-primary-button: #2563eb;
  --loyal-primary-button-hover: #3b82f6;
  --loyal-on-primary: #ffffff;
  --loyal-overlay: rgba(2, 6, 23, 0.72);
  --loyal-focus: rgba(96, 165, 250, 0.3);
  --loyal-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
}

/*
 * Setki reguł w style.css spoza tego pliku (karty klientów, wiersze list,
 * plakietki, tabele) nie znają tokenów --loyal-*, tylko oryginalne zmienne
 * globalne z :root (--text-main, --bg-card, --border-glass, ...), które są
 * na stałe dostrojone do ciemnego tła. Bez tego aliasu każdy taki element
 * zostaje z jasnym tekstem na jasnym tle w trybie dziennym. Nadpisujemy
 * oryginalne nazwy zmiennych, żeby cały istniejący CSS automatycznie
 * dziedziczył poprawne, jasne wartości w obrębie widoków zalogowanych —
 * zasięg ograniczony do tych czterech kontenerów, więc strona logowania i
 * marketing (które używają tych samych zmiennych z :root) pozostają bez
 * zmian.
 */
html[data-loyal-theme="light"] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view),
html[data-loyal-theme="light"] body:is(.client-dashboard-active, .tenant-owner-active, .super-active) .modal-overlay,
html[data-loyal-theme="light"] body:has(#personel-main-view:not(.hidden)) .modal-overlay {
  --bg-dark: var(--loyal-app-canvas);
  --bg-card: var(--loyal-surface);
  --border-glass: var(--loyal-border);
  --border-active: var(--loyal-accent);
  --primary: var(--loyal-accent);
  --primary-hover: var(--loyal-primary-button-hover);
  --accent: var(--loyal-accent);
  --accent-hover: var(--loyal-primary-button-hover);
  --text-main: var(--loyal-text);
  --text-muted: var(--loyal-text-muted);
  --text-dark: var(--loyal-text);
}

html[data-loyal-theme="light"] body:is(.client-dashboard-active, .tenant-owner-active, .super-active) .modal-overlay .modal-close:hover,
html[data-loyal-theme="light"] body:has(#personel-main-view:not(.hidden)) .modal-overlay .modal-close:hover {
  color: var(--loyal-text);
}

/*
 * Karta klienta ma WŁASNĄ, trzecią (obok --loyal-* tu i oryginalnych
 * --text-main/--bg-card z aliasu wyżej) rodzinę zmiennych: --client-* ,
 * ustawianą przez body.client-dashboard-active[data-client-theme] —
 * atrybut sterowany wyłącznie przez branding firmy (setClientTheme() w
 * app.js), nigdy przez ten przełącznik. 100 użyć w style.css (cała karta
 * klienta: nagłówek, historia, powiadomienia, PIN, polecenia...) zostawało
 * więc zawsze na ciemnych wartościach domyślnych niezależnie od wyboru
 * użytkownika — stąd np. niemal niewidoczny opis w historii operacji.
 */
html[data-loyal-theme="light"] body.client-dashboard-active {
  --client-page: var(--loyal-app-canvas);
  --client-surface: var(--loyal-surface);
  --client-surface-strong: var(--loyal-surface-raised);
  --client-border: var(--loyal-border);
  --client-text: var(--loyal-text);
  --client-muted: var(--loyal-text-muted);
  --client-primary: var(--loyal-accent);
  --client-primary-soft: color-mix(in srgb, var(--loyal-accent) 12%, transparent);
  --client-positive: var(--loyal-success);
  --client-shadow: var(--loyal-shadow);
}

/*
 * input/select globalne w style.css mają background: rgba(0,0,0,.25) —
 * literał, nie zmienną, więc alias --bg-card/--text-main wyżej go nie
 * dotyka. Na ciemnej karcie modala to celowo subtelne wgłębienie; na
 * jasnej karcie modala (po tym pliku) to samo ciemne tło zostaje —
 * pole wygląda jak wyszarzone/wyłączone i tekst placeholdera ledwo widać
 * (np. "Dodaj Nowego Członka").
 */
html[data-loyal-theme="light"] body:is(.client-dashboard-active, .tenant-owner-active, .super-active) .modal-overlay :is(input, select, textarea),
html[data-loyal-theme="light"] body:has(#personel-main-view:not(.hidden)) .modal-overlay :is(input, select, textarea) {
  background: var(--loyal-surface);
  border-color: var(--loyal-border);
  color: var(--loyal-text);
  box-shadow: none;
}

html[data-loyal-theme="light"] body:is(.client-dashboard-active, .tenant-owner-active, .super-active) .modal-overlay :is(input, select, textarea):focus,
html[data-loyal-theme="light"] body:has(#personel-main-view:not(.hidden)) .modal-overlay :is(input, select, textarea):focus {
  background: var(--loyal-surface);
  border-color: var(--loyal-accent);
  box-shadow: 0 0 0 3px var(--loyal-focus);
}

/*
 * Widok personelu (token+PIN trenera/zasobu) nigdy nie dostaje klasy na
 * <body> — switchMode('personel') nie dodaje żadnej z klas tenant-*-active
 * (patrz app.js). Reguła .main-header niżej już to obchodzi przez
 * body:has(#personel-main-view:not(.hidden)); to samo trzeba zastosować
 * tutaj, inaczej tło strony zostaje ciemne, a nagłówek dostaje ciemny tekst
 * z reguł poniżej — ciemny na ciemnym.
 */
/* Fundament aplikacji po zalogowaniu */
html[data-loyal-theme] body.client-dashboard-active,
html[data-loyal-theme] body.tenant-owner-active,
html[data-loyal-theme] body.super-active,
html[data-loyal-theme] body:has(#personel-main-view:not(.hidden)) {
  min-width: 0;
  background: var(--loyal-app-canvas);
  color: var(--loyal-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-loyal-theme] body.client-dashboard-active .bg-glow,
html[data-loyal-theme] body.tenant-owner-active .bg-glow,
html[data-loyal-theme] body.super-active .bg-glow,
html[data-loyal-theme] body:has(#personel-main-view:not(.hidden)) .bg-glow {
  display: none;
}

html[data-loyal-theme] body.client-dashboard-active .main-header,
html[data-loyal-theme] body.tenant-owner-active .main-header,
html[data-loyal-theme] body.super-active .main-header,
html[data-loyal-theme] body:has(#personel-main-view:not(.hidden)) .main-header {
  display: none;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view),
html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) * {
  box-sizing: border-box;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) {
  min-width: 0;
  color: var(--loyal-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--loyal-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.025em;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(p, .subtitle, .helper-text, .input-tip, .empty-state, label) {
  color: var(--loyal-text-muted);
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(a, button, input, select, textarea) {
  font-family: inherit;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(input, select, textarea) {
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--loyal-border);
  border-radius: var(--loyal-control-radius);
  background: var(--loyal-surface);
  color: var(--loyal-text);
  box-shadow: none;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(input, select, textarea):focus {
  border-color: var(--loyal-accent);
  outline: 3px solid var(--loyal-focus);
  outline-offset: 0;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(input, textarea)::placeholder {
  color: var(--loyal-text-muted);
  opacity: 0.72;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) .btn {
  min-height: 44px;
  border-radius: var(--loyal-control-radius);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
  transform: none;
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) .btn-primary {
  border-color: var(--loyal-primary-button);
  background: var(--loyal-primary-button);
  color: var(--loyal-on-primary);
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) .btn-primary:hover {
  border-color: var(--loyal-primary-button-hover);
  background: var(--loyal-primary-button-hover);
  transform: translateY(-1px);
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) .btn-secondary {
  border: 1px solid var(--loyal-border);
  background: transparent;
  color: var(--loyal-text);
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) .btn-secondary:hover {
  border-color: var(--loyal-accent);
  background: var(--loyal-surface-soft);
  color: var(--loyal-accent);
}

html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(.glass-card, .client-surface, .action-card, .super-analytics-card) {
  min-width: 0;
  border: 1px solid var(--loyal-border);
  border-radius: var(--loyal-card-radius);
  background: var(--loyal-surface);
  color: var(--loyal-text);
  box-shadow: var(--loyal-shadow);
  backdrop-filter: none;
}

/*
 * Modale współdzielone (QR lokalu, powiększony QR klienta, dodawanie
 * klienta, itd.) są w index.html umieszczone poza czterema kontenerami
 * widoków (#owner-dashboard-view itp.) — osobne <div> tuż przed </body> —
 * więc reguła powyżej ich nie dotyka. Pokazują się wyłącznie po
 * zalogowaniu, stąd bezpieczne jest oprzeć zasięg o te same klasy body,
 * których używa "Fundament aplikacji po zalogowaniu" wyżej w tym pliku.
 */
html[data-loyal-theme] body:is(.client-dashboard-active, .tenant-owner-active, .super-active) .modal-overlay .glass-card,
html[data-loyal-theme] body:has(#personel-main-view:not(.hidden)) .modal-overlay .glass-card {
  border: 1px solid var(--loyal-border);
  background: var(--loyal-surface);
  color: var(--loyal-text);
  box-shadow: var(--loyal-shadow);
  backdrop-filter: none;
}

html[data-loyal-theme] body:is(.client-dashboard-active, .tenant-owner-active, .super-active) .modal-overlay code,
html[data-loyal-theme] body:has(#personel-main-view:not(.hidden)) .modal-overlay code {
  color: var(--loyal-text-muted);
}

/*
 * Wiersze list (klienci, zgłoszenia, akcje) mają w style.css własne, jawne
 * tło/ramkę typu "szkło" (rgba(255,255,255,.03..06)) dostrojone pod ciemne
 * tło — nie korzystają z var(--bg-card), więc alias zmiennych powyżej ich
 * nie naprawia. Bez tej reguły zostają niemal białe na białym tle.
 */
html[data-loyal-theme="light"] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(
  .service-client-row,
  .client-list-item,
  .action-editor-row,
  .service-adjust-section,
  .request-item,
  .service-request-item,
  .client-program-toggle,
  .terms-consent,
  .calendar-admin-item
) {
  background: var(--loyal-surface-soft);
  border-color: var(--loyal-border);
}

html[data-loyal-theme="light"] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(.client-list-item, .service-client-row):hover,
html[data-loyal-theme="light"] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(.client-list-item, .service-client-row).selected {
  background: color-mix(in srgb, var(--loyal-accent) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--loyal-accent) 42%, transparent);
}

html[data-loyal-theme="light"] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) .service-client-row.selected {
  box-shadow: inset 3px 0 0 var(--loyal-accent);
}

html[data-loyal-theme="light"] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(
  .client-item-stats .stat-badge,
  .action-editor-icon,
  .service-list-meta strong,
  .client-program-badge,
  .reward-action-btn,
  .service-empty-icon
) {
  background: color-mix(in srgb, var(--loyal-accent) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--loyal-accent) 22%, transparent);
  color: var(--loyal-accent);
}

/* .stat-badge strong ma w style.css jawne color:white (liczba wizyt/punktów
   na plakietce) — niewidoczne na jasnym tle plakietki powyżej. */
html[data-loyal-theme="light"] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) .client-item-stats .stat-badge strong {
  color: var(--loyal-text);
}

html[data-loyal-theme="light"] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) :is(
  .badge-token,
  .service-kicker,
  .service-client-row-program,
  .action-editor-slot-label,
  .notification-rule-status
) {
  color: var(--loyal-accent);
}

/* Wordmark i przełącznik dzień/noc */
.loyal-dashboard-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.loyal-dashboard-wordmark {
  color: var(--loyal-text);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  white-space: nowrap;
}

.loyal-dashboard-context {
  color: var(--loyal-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.loyal-dashboard-brand-compact {
  margin-bottom: 0.7rem;
}

.loyal-theme-toggle {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid var(--loyal-border);
  border-radius: var(--loyal-control-radius);
  background: var(--loyal-surface);
  color: var(--loyal-text);
  cursor: pointer;
  box-shadow: none;
  overflow: hidden;
}

.loyal-theme-toggle:hover,
.loyal-theme-toggle:focus-visible {
  border-color: var(--loyal-accent);
  color: var(--loyal-accent);
  outline: 3px solid var(--loyal-focus);
}

.loyal-theme-icon {
  grid-area: 1 / 1;
  display: block;
  width: 21px !important;
  min-width: 0 !important;
  height: 21px !important;
  min-height: 0 !important;
  padding: 0 !important;
  font-size: 21px;
  line-height: 21px;
  overflow: hidden;
  transition: opacity 160ms ease, transform 160ms ease;
}

.loyal-theme-toggle .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-loyal-theme="light"] .loyal-theme-icon-sun,
html[data-loyal-theme="dark"] .loyal-theme-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

html[data-loyal-theme="light"] .loyal-theme-icon-moon,
html[data-loyal-theme="dark"] .loyal-theme-icon-sun {
  opacity: 0;
  transform: scale(0.65) rotate(25deg);
}

/* Karta klienta */
html[data-loyal-theme] body.client-dashboard-active .app-container {
  width: min(100%, calc(var(--loyal-container) + 48px));
  max-width: none;
  padding: 24px;
  box-sizing: border-box;
}

.loyal-client-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--loyal-border);
  border-radius: 16px;
  background: var(--loyal-surface);
}

html[data-loyal-theme] #client-dashboard-view {
  width: 100%;
  max-width: var(--loyal-container);
  margin: 0 auto;
}

html[data-loyal-theme] #client-dashboard-view .client-view-tabs {
  gap: 6px;
  margin-bottom: 24px;
  padding: 5px;
  border: 1px solid var(--loyal-border);
  border-radius: 14px;
  background: var(--loyal-surface);
}

html[data-loyal-theme] #client-dashboard-view .client-view-tab {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--loyal-text-muted);
  font-weight: 700;
}

html[data-loyal-theme] #client-dashboard-view .client-view-tab.active {
  background: var(--loyal-navy);
  color: #ffffff;
  box-shadow: none;
}

html[data-loyal-theme="dark"] #client-dashboard-view .client-view-tab.active {
  background: var(--loyal-accent);
}

html[data-loyal-theme] #client-dashboard-view .client-dashboard-shell {
  gap: 24px;
}

html[data-loyal-theme] #client-dashboard-view .client-summary-card {
  min-width: 0;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--loyal-border);
  border-radius: var(--loyal-card-radius);
  background: var(--loyal-surface);
  color: var(--loyal-text);
  box-shadow: var(--loyal-shadow);
}

html[data-loyal-theme] #client-dashboard-view .client-summary-card::before,
html[data-loyal-theme] #client-dashboard-view .client-summary-card::after {
  display: none;
}

html[data-loyal-theme] #client-dashboard-view :is(.client-summary-copy h1, .client-summary-copy p, .client-summary-copy strong, .client-card-heading h2, .client-summary-stat strong, .client-summary-stat span) {
  color: var(--loyal-text);
  -webkit-text-fill-color: currentColor;
}

html[data-loyal-theme] #client-dashboard-view :is(.client-eyebrow, .client-progress-value strong, .bonus-tag) {
  color: var(--loyal-accent);
}

html[data-loyal-theme] #client-dashboard-view .client-summary-copy h1 {
  font-size: clamp(1.85rem, 5vw, 3.25rem);
  font-weight: 750;
  line-height: 1.06;
}

html[data-loyal-theme] #client-dashboard-view .client-summary-stat {
  border: 1px solid var(--loyal-border);
  border-radius: 16px;
  background: var(--loyal-surface-soft);
}

html[data-loyal-theme] #client-dashboard-view .client-summary-stat > .material-symbols-outlined,
html[data-loyal-theme] #client-dashboard-view .client-card-heading > .material-symbols-outlined {
  color: var(--loyal-accent);
}

html[data-loyal-theme] #client-dashboard-view .client-progress-card {
  border: 1px solid var(--loyal-border);
  border-radius: 16px;
  background: var(--loyal-surface-soft);
}

html[data-loyal-theme] #client-dashboard-view .progress-bar-bg {
  background: var(--loyal-border);
}

html[data-loyal-theme] #client-dashboard-view .progress-bar-fill {
  background: var(--loyal-accent);
  box-shadow: none;
}

html[data-loyal-theme] #client-dashboard-view .stamp {
  border-color: var(--loyal-border);
  background: var(--loyal-surface);
  color: var(--loyal-text-muted);
}

html[data-loyal-theme] #client-dashboard-view .stamp.filled {
  border-color: var(--loyal-success);
  background: var(--loyal-success);
  color: #ffffff;
}

html[data-loyal-theme] #client-dashboard-view :is(.client-notification-item, .client-history-item, .client-referral-result, .terms-consent) {
  min-width: 0;
  border-color: var(--loyal-border);
  background: var(--loyal-surface-soft);
  color: var(--loyal-text);
  overflow-wrap: anywhere;
}

html[data-loyal-theme] #client-dashboard-view .client-nav-icon-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--loyal-border);
  border-radius: var(--loyal-control-radius);
  background: transparent;
  color: var(--loyal-text);
}

/* Panel firmy i obsługi */
html[data-loyal-theme] #owner-dashboard-view {
  width: 100%;
  min-height: 100vh;
  padding: 0 24px 32px;
  background: var(--loyal-app-canvas);
}

/*
 * Tryb obsługi (kiosk, pełny ekran) zeruje padding tego kontenera w
 * style.css, ale ta reguła ma identyczną specyficzność (1 ID + 1 atrybut/
 * klasa + 1 typ) i style.css ładuje się wcześniej w <head> — przy remisie
 * wygrywa reguła załadowana później, czyli ta powyżej, przywracając
 * 24px paddingu. .service-layout wewnątrz liczy width:100vw zakładając
 * zerowy padding przodków, więc te 24px z każdej strony dawały realny,
 * policzalny overflow poziomy (potwierdzone: prawa krawędź o 24px za
 * viewportem na 1200px). Ta reguła musi być bardziej specyficzna, żeby
 * wygrać niezależnie od kolejności plików.
 */
html[data-loyal-theme] body.owner-service-active #owner-dashboard-view {
  padding: 0;
}

html[data-loyal-theme] #owner-dashboard-view .owner-header-bar {
  position: relative;
  width: min(100%, var(--loyal-container));
  margin: 0 auto 24px;
  padding: 24px 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  border-bottom: 1px solid var(--loyal-border);
  background: transparent;
}

html[data-loyal-theme] #owner-dashboard-view .owner-header-bar > div:first-child {
  min-width: 210px;
}

html[data-loyal-theme] #owner-dashboard-view .owner-header-bar h2 {
  margin: 12px 0 4px;
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  font-weight: 750;
}

html[data-loyal-theme] #owner-dashboard-view .owner-header-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

html[data-loyal-theme] #owner-dashboard-view .owner-mode-tabs {
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--loyal-border);
  border-radius: 14px;
  background: var(--loyal-surface);
}

html[data-loyal-theme] #owner-dashboard-view .owner-mode-tab {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--loyal-text-muted);
  font-weight: 700;
}

html[data-loyal-theme] #owner-dashboard-view .owner-mode-tab.active {
  background: var(--loyal-navy);
  color: #ffffff;
}

html[data-loyal-theme="dark"] #owner-dashboard-view .owner-mode-tab.active {
  background: var(--loyal-accent);
}

/*
 * #owner-service-panel jest tu celowo pominięty: style.css robi go
 * pełnoekranowym (width:100vw) od 601px wzwyż — kiosk-owy, bez rozpraszania
 * tryb dla obsługi. Ten sam limit szerokości co reszta zakładek właściciela
 * przycinałby ten panel do 1280px, podczas gdy .service-layout w środku i
 * tak wymusza 100vw — dokładnie stąd realny overflow w "Nabijanie"
 * (siatka szybkich akcji wystająca poza prawą krawędź ekranu).
 */
html[data-loyal-theme] #owner-dashboard-view .owner-mode-panel:not(#owner-service-panel),
html[data-loyal-theme] #owner-dashboard-view #owner-billing-status-banner {
  width: min(100%, var(--loyal-container));
  margin-right: auto;
  margin-left: auto;
}

html[data-loyal-theme] #owner-dashboard-view :is(.owner-grid, .service-layout, .settings-sections-grid, .stats-charts-grid, .owner-stats-grid) {
  min-width: 0;
  gap: 24px;
}

html[data-loyal-theme] #owner-dashboard-view :is(.glass-card, .action-card) {
  padding: clamp(18px, 2.5vw, 28px);
}

html[data-loyal-theme] #owner-dashboard-view :is(.client-list-item, .request-item, .staff-item, .history-item, .service-client-item, .owner-stats-row) {
  min-width: 0;
  border: 1px solid var(--loyal-border);
  border-radius: 14px;
  background: var(--loyal-surface-soft);
  color: var(--loyal-text);
  overflow-wrap: anywhere;
}

html[data-loyal-theme] #owner-dashboard-view :is(.client-list-item.active, .service-client-item.active) {
  border-color: var(--loyal-accent);
  background: color-mix(in srgb, var(--loyal-accent) 9%, var(--loyal-surface));
}

html[data-loyal-theme] #owner-dashboard-view :is(.section-separator, hr) {
  border-color: var(--loyal-border);
  background: var(--loyal-border) !important;
}

html[data-loyal-theme] #owner-dashboard-view :is(.badge, .status-badge, .badge-token, .service-kicker) {
  border-color: var(--loyal-border);
  background: var(--loyal-surface-soft);
  color: var(--loyal-accent);
}

html[data-loyal-theme] #owner-dashboard-view .service-client-picker .widget-header {
  align-items: flex-start;
  gap: 16px;
}

html[data-loyal-theme] #owner-dashboard-view .service-header-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

/* 7 przycisków o różnej szerokości (w tym mały kwadratowy przełącznik
   motywu) zawijane przez flex-wrap dawały nierówne, "sierocze" rzędy
   (np. samotny "Import CSV" na końcu). flex-grow na realnych przyciskach
   akcji rozciąga je równo w dostępnej przestrzeni rzędu — przełącznik
   motywu zostaje przy swoim naturalnym, małym rozmiarze. */
html[data-loyal-theme] #owner-dashboard-view .service-header-actions > .btn {
  flex: 1 1 130px;
}

html[data-loyal-theme] #owner-dashboard-view .service-search-box {
  border-color: var(--loyal-border);
  background: var(--loyal-surface-soft);
}

html[data-loyal-theme] #owner-dashboard-view .service-workspace {
  min-width: 0;
  overflow: hidden;
}

html[data-loyal-theme] #owner-dashboard-view .service-empty-state {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

html[data-loyal-theme] #owner-dashboard-view .service-empty-icon {
  width: min(84px, 100%);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

html[data-loyal-theme] #owner-dashboard-view :is(.quick-action-btn, .service-action-button, .action-btn) {
  min-width: 0;
  border: 1px solid var(--loyal-border);
  border-radius: 14px;
  background: var(--loyal-surface);
  color: var(--loyal-text);
  box-shadow: none;
}

html[data-loyal-theme] #owner-dashboard-view :is(.stats-summary-card, .stat-card, .owner-stat-card) {
  min-width: 0;
  border: 1px solid var(--loyal-border);
  border-radius: 16px;
  background: var(--loyal-surface);
  color: var(--loyal-text);
  box-shadow: none;
}

html[data-loyal-theme] #owner-dashboard-view :is(.stats-bar-fill, .chart-bar-fill) {
  background: var(--loyal-accent);
}

/* Panel superadministratora */
html[data-loyal-theme] body.super-active .app-container,
html[data-loyal-theme] #super-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
  background: var(--loyal-app-canvas);
}

html[data-loyal-theme] #super-dashboard-view {
  width: 100%;
  min-height: 100vh;
  background: var(--loyal-app-canvas);
}

html[data-loyal-theme] #super-dashboard-view .super-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 76px;
  padding: 14px max(24px, calc((100vw - var(--loyal-container)) / 2));
  border-bottom: 1px solid var(--loyal-border);
  background: color-mix(in srgb, var(--loyal-surface) 94%, transparent);
  color: var(--loyal-text);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

html[data-loyal-theme] #super-dashboard-view .super-topbar-brand {
  min-width: 0;
}

html[data-loyal-theme] #super-dashboard-view .super-topbar-logo {
  display: none;
}

html[data-loyal-theme] #super-dashboard-view .super-topbar-title {
  margin: 0;
  color: var(--loyal-text);
  font-family: Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  -webkit-text-fill-color: currentColor;
}

html[data-loyal-theme] #super-dashboard-view .super-topbar-sub {
  color: var(--loyal-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

html[data-loyal-theme] #super-dashboard-view .super-topbar-actions {
  min-width: 0;
  gap: 8px;
}

html[data-loyal-theme] #super-dashboard-view .super-page-tabs {
  width: 100%;
  gap: 4px;
  padding: 8px max(24px, calc((100vw - var(--loyal-container)) / 2));
  border-bottom: 1px solid var(--loyal-border);
  background: var(--loyal-surface);
  overflow-x: auto;
}

html[data-loyal-theme] #super-dashboard-view .super-page-tab {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  color: var(--loyal-text-muted);
  white-space: nowrap;
}

html[data-loyal-theme] #super-dashboard-view .super-page-tab:hover {
  background: var(--loyal-surface-soft);
  color: var(--loyal-text);
}

html[data-loyal-theme] #super-dashboard-view .super-page-tab.active {
  border: 1px solid var(--loyal-border);
  background: var(--loyal-navy);
  color: #ffffff;
}

html[data-loyal-theme="dark"] #super-dashboard-view .super-page-tab.active {
  border-color: var(--loyal-accent);
  background: var(--loyal-accent);
}

html[data-loyal-theme] #super-dashboard-view :is(.super-stats-bar, .super-companies-main, .super-analytics-page, .super-admin-security, .super-legal-reports) {
  width: min(calc(100% - 48px), var(--loyal-container));
  max-width: var(--loyal-container);
  margin-right: auto;
  margin-left: auto;
}

html[data-loyal-theme] #super-dashboard-view .super-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}

html[data-loyal-theme] #super-dashboard-view .super-stat-item {
  min-width: 0;
  padding: 18px;
  align-items: flex-start;
  border: 1px solid var(--loyal-border);
  border-radius: 16px;
  background: var(--loyal-surface);
}

html[data-loyal-theme] #super-dashboard-view .super-stat-item:hover {
  background: var(--loyal-surface);
}

html[data-loyal-theme] #super-dashboard-view .super-stat-num {
  color: var(--loyal-text);
  font-family: Inter, sans-serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

html[data-loyal-theme] #super-dashboard-view .super-stat-lbl {
  color: var(--loyal-text-muted);
  font-size: 0.7rem;
  text-align: left;
}

html[data-loyal-theme] #super-dashboard-view .super-admin-security {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.65fr);
  align-items: start;
  gap: 24px;
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--loyal-card-radius);
}

html[data-loyal-theme] #super-dashboard-view .super-admin-security > * {
  min-width: 0;
}

html[data-loyal-theme] #super-dashboard-view .super-admin-security-copy h2,
html[data-loyal-theme] #super-dashboard-view :is(.super-legal-reports-header h2, .super-analytics-header h2, .super-analytics-card h3, .super-section-title) {
  color: var(--loyal-text);
}

html[data-loyal-theme] #super-dashboard-view .super-security-kicker {
  color: var(--loyal-accent);
}

html[data-loyal-theme] #super-dashboard-view .super-admin-password-form {
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

html[data-loyal-theme] #super-dashboard-view .super-admin-password-form .btn {
  align-self: end;
}

html[data-loyal-theme] #super-dashboard-view .mfa-security-inline {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--loyal-border);
  background: var(--loyal-surface-soft);
}

html[data-loyal-theme] #super-dashboard-view .super-legal-reports {
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--loyal-card-radius);
}

html[data-loyal-theme] #super-dashboard-view :is(.super-legal-reports-header, .super-legal-report-meta, .super-legal-report-actions) {
  min-width: 0;
}

html[data-loyal-theme] #super-dashboard-view .super-legal-reports-header > * {
  min-width: 0;
}

html[data-loyal-theme] #super-dashboard-view :is(.super-legal-report, .system-error-card, .super-signup-card, .monitoring-summary) {
  min-width: 0;
  max-width: 100%;
  padding: 18px;
  border: 1px solid var(--loyal-border);
  border-radius: 16px;
  background: var(--loyal-surface-soft);
  color: var(--loyal-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

html[data-loyal-theme] #super-dashboard-view :is(.super-legal-report, .system-error-card, .super-signup-card) :is(p, label, strong, span, code) {
  max-width: 100%;
  color: inherit;
  overflow-wrap: anywhere;
}

html[data-loyal-theme] #super-dashboard-view .super-companies-main,
html[data-loyal-theme] #super-dashboard-view .super-analytics-page {
  padding: 24px 0 32px;
}

html[data-loyal-theme] #super-dashboard-view :is(.super-search, .super-filter-select) {
  border: 1px solid var(--loyal-border);
  border-radius: var(--loyal-control-radius);
  background: var(--loyal-surface);
  color: var(--loyal-text);
}

html[data-loyal-theme] #super-dashboard-view .super-filter-select option {
  background: var(--loyal-surface);
  color: var(--loyal-text);
}

html[data-loyal-theme] #super-dashboard-view .super-companies-grid {
  gap: 16px;
}

html[data-loyal-theme] #super-dashboard-view .super-company-card {
  min-width: 0;
  border: 1px solid var(--loyal-border);
  border-radius: var(--loyal-card-radius);
  background: var(--loyal-surface);
  color: var(--loyal-text);
  box-shadow: var(--loyal-shadow);
}

html[data-loyal-theme] #super-dashboard-view .super-company-card::before {
  display: none;
}

html[data-loyal-theme] #super-dashboard-view :is(.company-card-name, .meta-val) {
  color: var(--loyal-text);
}

html[data-loyal-theme] #super-dashboard-view :is(.company-card-id, .meta-label) {
  color: var(--loyal-text-muted);
}

html[data-loyal-theme] #super-dashboard-view .company-card-avatar {
  background: var(--loyal-navy);
  color: #ffffff;
}

html[data-loyal-theme] #super-dashboard-view .company-card-meta-item {
  background: var(--loyal-surface-soft);
}

html[data-loyal-theme] #super-dashboard-view .company-action-btn {
  color: var(--loyal-text-muted);
  background: var(--loyal-surface-soft);
  border-color: var(--loyal-border);
}

html[data-loyal-theme] #super-dashboard-view .company-action-btn:hover {
  color: var(--loyal-text);
  background: var(--loyal-surface);
  border-color: var(--loyal-accent);
}

html[data-loyal-theme] #super-dashboard-view .super-analytics-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-loyal-theme] #super-dashboard-view .super-analytics-kpi {
  min-width: 0;
  border: 1px solid var(--loyal-border);
  border-radius: 16px;
  background: var(--loyal-surface);
}

html[data-loyal-theme] #super-dashboard-view :is(.super-analytics-kpi-label, .super-analytics-kpi-detail, .super-analytics-actions label, .super-chart-legend, .super-analytics-status) {
  color: var(--loyal-text-muted);
}

html[data-loyal-theme] #super-dashboard-view .super-analytics-kpi-value {
  color: var(--loyal-text);
  font-family: Inter, sans-serif;
}

html[data-loyal-theme] #super-dashboard-view .super-analytics-definition strong {
  color: var(--loyal-accent);
}

html[data-loyal-theme] #super-dashboard-view .super-analytics-table-wrap {
  max-width: 100%;
  border: 1px solid var(--loyal-border);
  border-radius: 14px;
  overflow-x: auto;
}

html[data-loyal-theme] #super-dashboard-view .super-analytics-table :is(th, td) {
  border-color: var(--loyal-border);
}

/* .super-analytics-table th ma zawsze ciemne tło (#151825, niezależne od
   motywu) z jasnym tekstem — nadpisanie koloru tylko dla td, żeby nie
   zamienić tego w ciemny tekst na ciemnym tle. */
html[data-loyal-theme] #super-dashboard-view .super-analytics-table td {
  color: var(--loyal-text);
}

html[data-loyal-theme="light"] #super-dashboard-view .analytics-company-name {
  color: var(--loyal-text);
}

html[data-loyal-theme="light"] #super-dashboard-view :is(.analytics-company-id, .analytics-cell-detail) {
  color: var(--loyal-text-muted);
}

html[data-loyal-theme="light"] #super-dashboard-view .analytics-usage-badge.inactive {
  color: var(--loyal-text-muted);
  background: color-mix(in srgb, var(--loyal-text-muted) 14%, transparent);
}

/*
 * Kolejna grupa komponentów panelu super admina z jawnymi, dostrojonymi pod
 * ciemne tło kolorami w style.css (#e2e8f0, #f8fafc, #c7d2fe, rgba(15,23,42,
 * ...) itd.) spoza zasięgu ogólnych reguł wyżej — bez tego dają matowy,
 * szary wygląd zamiast czytelnej jasnej karty.
 */
html[data-loyal-theme="light"] #super-dashboard-view .super-analytics-signal {
  background: var(--loyal-surface-soft);
  border-color: var(--loyal-border);
}

html[data-loyal-theme="light"] #super-dashboard-view .super-analytics-signal-icon {
  background: color-mix(in srgb, var(--loyal-accent) 14%, #ffffff);
  color: var(--loyal-accent);
}

html[data-loyal-theme="light"] #super-dashboard-view .super-analytics-signal strong {
  color: var(--loyal-text);
}

html[data-loyal-theme="light"] #super-dashboard-view .super-analytics-signal span {
  color: var(--loyal-text-muted);
}

html[data-loyal-theme="light"] #super-dashboard-view :is(.super-topbar-sub, .super-stat-lbl, .super-page-tab, .super-analytics-actions label, .super-analytics-definition, .super-analytics-status, .super-chart-legend, .super-month-label) {
  color: var(--loyal-text-muted);
}

html[data-loyal-theme="light"] #super-dashboard-view .super-page-tab.active {
  color: var(--loyal-accent);
}

html[data-loyal-theme="light"] #super-dashboard-view :is(.super-admin-security-copy h2, .super-legal-reports-header h2, .super-analytics-card h3, .super-section-title, .super-legal-report label) {
  color: var(--loyal-text);
}

html[data-loyal-theme="light"] #super-dashboard-view .super-analytics-definition strong {
  color: var(--loyal-accent);
}

html[data-loyal-theme="light"] #super-dashboard-view .super-legal-report {
  background: var(--loyal-surface-soft);
  border-color: var(--loyal-border);
}

html[data-loyal-theme="light"] #super-dashboard-view .super-legal-report p {
  color: var(--loyal-text);
}

html[data-loyal-theme="light"] #super-dashboard-view :is(.super-stats-bar, .super-stat-item) {
  background: var(--loyal-surface-soft);
}

html[data-loyal-theme="light"] #super-dashboard-view .super-filter-select {
  background: var(--loyal-surface);
  border-color: var(--loyal-border);
  color: var(--loyal-text);
}

html[data-loyal-theme] #super-dashboard-view .super-drawer {
  background: var(--loyal-overlay);
}

html[data-loyal-theme] #super-dashboard-view .super-drawer-inner {
  max-width: 600px;
  height: 100dvh;
  border: 0;
  border-left: 1px solid var(--loyal-border);
  border-radius: 0;
  background: var(--loyal-surface);
}

html[data-loyal-theme] #super-dashboard-view .super-drawer-header {
  border-color: var(--loyal-border);
  background: var(--loyal-surface);
}

html[data-loyal-theme] #super-dashboard-view .super-drawer-header h3 {
  color: var(--loyal-text);
}

/* Widok personelu */
html[data-loyal-theme] #personel-main-view {
  width: min(100%, var(--loyal-container));
  margin: 0 auto;
  padding: 24px;
}

html[data-loyal-theme] #personel-main-view .personel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--loyal-border);
}

html[data-loyal-theme] #personel-main-view .personel-header > div {
  min-width: 0;
}

html[data-loyal-theme] #personel-main-view .personel-section {
  margin-bottom: 24px;
  padding: clamp(18px, 3vw, 28px);
}

html[data-loyal-theme] #personel-main-view :is(.personel-roster-item, .personel-window-item) {
  min-width: 0;
  border: 1px solid var(--loyal-border);
  border-radius: 14px;
  background: var(--loyal-surface-soft);
  color: var(--loyal-text);
  overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 1024px) {
  html[data-loyal-theme] #owner-dashboard-view .owner-header-bar {
    flex-direction: column;
  }

  html[data-loyal-theme] #owner-dashboard-view .owner-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  html[data-loyal-theme] #owner-dashboard-view .owner-mode-tabs {
    order: 10;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  html[data-loyal-theme] #super-dashboard-view .super-stats-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-loyal-theme] #super-dashboard-view .super-admin-security,
  html[data-loyal-theme] #super-dashboard-view .super-analytics-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-loyal-theme] #super-dashboard-view .super-analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-loyal-theme] #super-dashboard-view .super-topbar {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* Telefon i mały tablet */
@media (max-width: 820px) {
  html[data-loyal-theme] body.client-dashboard-active .app-container {
    padding: 16px;
  }

  html[data-loyal-theme] #owner-dashboard-view {
    padding: 0 16px 24px;
  }

  html[data-loyal-theme] #owner-dashboard-view .owner-header-bar {
    padding-top: 16px;
  }

  html[data-loyal-theme] #owner-dashboard-view .owner-header-actions > :is(.btn, a.btn) {
    min-height: 44px;
  }

  html[data-loyal-theme] #owner-dashboard-view :is(.owner-grid, .service-layout, .settings-sections-grid, .stats-charts-grid, .owner-stats-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-loyal-theme] #owner-dashboard-view .service-client-picker .widget-header,
  html[data-loyal-theme] #owner-dashboard-view .service-client-summary,
  html[data-loyal-theme] #super-dashboard-view :is(.super-topbar, .super-companies-header, .super-analytics-header, .super-analytics-card-header, .super-legal-reports-header) {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-loyal-theme] #owner-dashboard-view .service-header-actions,
  html[data-loyal-theme] #super-dashboard-view :is(.super-topbar-actions, .super-filter-bar, .super-analytics-actions) {
    width: 100%;
    justify-content: flex-start;
  }

  html[data-loyal-theme] #super-dashboard-view .super-topbar {
    position: relative;
    padding: 16px;
  }

  html[data-loyal-theme] #super-dashboard-view :is(.super-stats-bar, .super-companies-main, .super-analytics-page, .super-admin-security, .super-legal-reports) {
    width: calc(100% - 32px);
  }

  html[data-loyal-theme] #super-dashboard-view .super-page-tabs {
    padding-right: 16px;
    padding-left: 16px;
  }

  html[data-loyal-theme] #super-dashboard-view .super-admin-password-form {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-loyal-theme] #super-dashboard-view .super-admin-password-form .btn {
    grid-column: auto;
    width: 100%;
  }

  html[data-loyal-theme] #personel-main-view {
    padding: 16px;
  }
}

@media (max-width: 600px) {
  .loyal-dashboard-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .loyal-dashboard-context {
    white-space: normal;
  }

  .loyal-client-topbar {
    margin-bottom: 12px;
  }

  html[data-loyal-theme] #client-dashboard-view .client-view-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-loyal-theme] #client-dashboard-view .client-view-tab {
    min-width: 0;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 0.75rem;
  }

  html[data-loyal-theme] #client-dashboard-view :is(.client-summary-top, .client-summary-stats, .client-card-heading, .client-section-heading) {
    min-width: 0;
  }

  html[data-loyal-theme] #client-dashboard-view .client-summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-loyal-theme] #owner-dashboard-view .owner-header-actions > :is(.btn, a.btn):not(.loyal-theme-toggle),
  html[data-loyal-theme] #owner-dashboard-view .service-header-actions > :is(.btn, a.btn):not(.loyal-theme-toggle),
  html[data-loyal-theme] #super-dashboard-view .super-topbar-actions > :is(.btn, a.btn):not(.loyal-theme-toggle) {
    flex: 1 1 calc(50% - 8px);
    width: auto;
  }

  html[data-loyal-theme] #owner-dashboard-view :is(.glass-card, .action-card),
  html[data-loyal-theme] #super-dashboard-view :is(.super-admin-security, .super-legal-reports, .super-analytics-card) {
    padding: 16px;
  }

  html[data-loyal-theme] #super-dashboard-view .super-stats-bar,
  html[data-loyal-theme] #super-dashboard-view .super-analytics-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-loyal-theme] #super-dashboard-view :is(.super-legal-report-actions, .super-legal-report-meta, .btn-group-row) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  html[data-loyal-theme] #super-dashboard-view :is(.super-legal-report-actions, .super-legal-report-meta, .btn-group-row) .btn {
    width: 100%;
  }

  html[data-loyal-theme] #super-dashboard-view :is(.super-search, .super-filter-select) {
    width: 100%;
    min-width: 0;
  }

  html[data-loyal-theme] #personel-main-view .personel-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html[data-loyal-theme] #personel-main-view .personel-header #btn-personel-logout {
    grid-column: 1 / -1;
    width: 100%;
  }

  html[data-loyal-theme] #personel-main-view .personel-window-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loyal-theme-icon,
  .loyal-theme-toggle,
  html[data-loyal-theme] :is(#client-dashboard-view, #owner-dashboard-view, #super-dashboard-view, #personel-main-view) .btn {
    transition: none;
  }
}