/* =============================================================================
   Theme authority. Relocated verbatim from assets/cms-theme.css 2026-09-07.
   Loaded LAST on every page. Still contains: the :root / [data-theme] palette
   (mirrored in tokens.css), ~3600 lines of light-mode fixups, and the ~390-line
   :not(#\9) KPI normaliser (-> components/kpi.css, step 10). Split pending.
   ========================================================================== */

/*
 * DYSPLAY shared application themes.
 *
 * This file is intentionally loaded after every page stylesheet. It is the
 * single authority for the CMS dark and light colour systems. Page styles
 * remain responsible for layout; colour, contrast and native form controls
 * are normalised here.
 */

:root {
  color-scheme: dark;

  /* The --theme-* palette (dark + html[data-theme="light"]) is now defined
     ONCE, in tokens.css. This file keeps only the legacy compat aliases below,
     which still have to sit in an UNLAYERED :root to win over ci.css's older
     literal --cms-*/--color-*/--shell-* values. Migrate call sites to --theme-*
     and this block can go too. */

  /* Compatibility aliases used across the existing pages. */
  --color-bg-app: var(--theme-bg);
  --color-bg-surface: var(--theme-surface);
  --color-bg-elevated: var(--theme-surface-raised);
  --color-bg-surface-strong: var(--theme-surface-strong);
  --color-text-primary: var(--theme-text);
  --color-text-secondary: var(--theme-text-muted);
  --color-text-tertiary: var(--theme-text-dim);
  --color-border-subtle: var(--theme-border);
  --color-border-strong: var(--theme-border-strong);
  --cms-bg: var(--theme-bg);
  --cms-bg-elevated: var(--theme-bg-soft);
  --cms-panel: var(--theme-surface);
  --cms-panel-2: var(--theme-surface-raised);
  --cms-panel-strong: var(--theme-surface-strong);
  --cms-surface: var(--theme-surface-raised);
  --cms-surface-2: var(--theme-surface-strong);
  --cms-surface-3: var(--theme-surface-hover);
  --cms-border: var(--theme-border);
  --cms-border-strong: var(--theme-border-strong);
  --cms-text: var(--theme-text);
  --cms-text-strong: var(--theme-text-strong);
  --cms-muted: var(--theme-text-muted);
  --cms-accent: var(--theme-accent);
  --cms-focus: var(--theme-accent);
  --shell-bg: var(--theme-bg);
  --shell-panel: var(--theme-surface);
  --shell-panel-strong: var(--theme-surface-raised);
  --shell-border: var(--theme-border);
  --shell-border-strong: var(--theme-border-strong);
  --shell-text: var(--theme-text);
  --shell-muted: var(--theme-text-muted);
}

html[data-theme="light"] {
  color-scheme: light;
  /* light --theme-* palette lives in tokens.css */
}

/* Native controls and shared interaction states. */
body.cmsApp :where(input, select, textarea),
body:has(.editorCommandBar) :where(input, select, textarea) {
  color-scheme: dark;
  caret-color: var(--theme-accent);
}

body.cmsApp :where(input, select, textarea)::placeholder,
body:has(.editorCommandBar) :where(input, select, textarea)::placeholder {
  color: var(--theme-placeholder);
  opacity: 1;
}

body.cmsApp :where(input, select, textarea):focus-visible,
body:has(.editorCommandBar) :where(input, select, textarea):focus-visible,
body.cmsApp :where(button, a, [tabindex]):focus-visible,
body:has(.editorCommandBar) :where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--theme-accent) !important;
  outline-offset: 2px !important;
}

body.cmsApp :where(select) option,
body.cmsApp :where(select) optgroup,
body:has(.editorCommandBar) :where(select) option,
body:has(.editorCommandBar) :where(select) optgroup {
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

html:not([data-theme="light"]) body.cmsApp :where(input, select, textarea),
html:not([data-theme="light"]) body:has(.editorCommandBar) :where(input, select, textarea) {
  background: var(--theme-control) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
  color-scheme: dark !important;
}

html:not([data-theme="light"]) body.cmsApp :where(input, select, textarea):focus,
html:not([data-theme="light"]) body:has(.editorCommandBar) :where(input, select, textarea):focus {
  border-color: var(--theme-accent) !important;
  box-shadow: var(--theme-focus-ring) !important;
}

html:not([data-theme="light"]) body.cmsApp :where(table, thead, tbody, tr, th, td),
html:not([data-theme="light"]) body:has(.editorCommandBar) :where(table, thead, tbody, tr, th, td) {
  border-color: var(--theme-border) !important;
}

html:not([data-theme="light"]) body.cmsApp :where(table, tbody, tr, td),
html:not([data-theme="light"]) body:has(.editorCommandBar) :where(table, tbody, tr, td) {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp :where(thead, thead tr, th),
html:not([data-theme="light"]) body:has(.editorCommandBar) :where(thead, thead tr, th) {
  background: var(--theme-surface-strong) !important;
  color: #b5bdcb !important;
}

html[data-theme="light"] body.cmsApp :where(input, select, textarea),
html[data-theme="light"] body:has(.editorCommandBar) :where(input, select, textarea) {
  color-scheme: light;
  accent-color: var(--theme-accent);
}

html[data-theme="light"] body.cmsApp :where(input, select, textarea):disabled,
html[data-theme="light"] body:has(.editorCommandBar) :where(input, select, textarea):disabled {
  background: #eef1f5;
  border-color: #dfe5ee;
  color: #7b8799;
  opacity: 1;
}

/* Shared shell: stable and legible in both modes. */
body.cmsApp {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}

body.cmsApp :where(.appChrome, .shell, .app, .main) {
  color: inherit;
}

html:not([data-theme="light"]) body.cmsApp :where(
  .panel,
  .card,
  .surface,
  .liveCard,
  .kpi,
  .metric-card,
  .table-shell,
  .tableWrap,
  .notice,
  .empty,
  .modalCard,
  .modal-panel,
  .scheduleDialogShell,
  .dy-modal-card
) {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp :where(
  .cmsUserMenu,
  .searchDropdown,
  .locationMenu,
  .cardMenuPanel,
  .catalog-filter-popover,
  .dy-filter-popover
) {
  background: rgba(9, 11, 16, .98) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-raised) !important;
}

html:not([data-theme="light"]) body.cmsApp :where(
  .cmsUserMenuItem,
  .searchResult,
  .locationOption,
  .cardMenuPanel button,
  .menuAction,
  .btn.ghost,
  button.ghost
) {
  background: transparent !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp :where(.tag, .chip, .pill) {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.cmsApp,
html[data-theme="light"] body.cmsApp :where(.appChrome, .shell, .app, .main, .catalog-content, .catalog-workbench, .scheduleApp, .scheduleMain, .scheduleBody) {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.cmsApp .topBar {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom-color: var(--theme-border) !important;
  box-shadow: 0 8px 24px rgba(41, 55, 76, .07) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.cmsApp :where(.brandWord, .brandWordMark, .cmsUserName, .cmsUserChevron) {
  color: var(--theme-text-strong) !important;
}

html[data-theme="light"] body.cmsApp .brandLogo,
html[data-theme="light"] body.cmsApp .sidebarBrandWord,
html[data-theme="light"] body.cmsApp .cmsLegalFooterLogo {
  filter: invert(1) brightness(.26) contrast(1.08) !important;
}

html[data-theme="light"] body.cmsApp :where(.searchForm, .locationSelectWrap, .tenantPill, .avatarBubble, .menuButton) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.cmsApp .searchForm input {
  background: transparent !important;
  border: 0 !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.cmsApp :where(.searchForm input::placeholder, .searchIcon, .locationChevron) {
  color: var(--theme-text-dim) !important;
}

html[data-theme="light"] body.cmsApp :where(.sidebar, .scheduleSidebar) {
  background: #ffffff !important;
  border-right-color: var(--theme-border) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.cmsApp :where(.navList a, .sidebarFooter a, .sidebarFooter button) {
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.cmsApp .navList a:hover {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.cmsApp .navList a.active {
  background: #eef1f7 !important;
  border-color: transparent !important;
  color: var(--theme-text-strong) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.cmsApp .navList a.active::before {
  background: rgba(20, 24, 34, .55) !important;
}

html[data-theme="light"] body.cmsApp :where(.navIcon, .sidebarFooterActions > *, .themeIconButton, .sidebarCollapseButton, .sidebarProfileButton) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-muted) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.cmsApp :where(.mobileNavDockBar, .mobileNavPanel, .mobileSearchResults) {
  background: rgba(255, 255, 255, .98) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-raised) !important;
}

html[data-theme="light"] body.cmsApp :where(.mobileNavDockButton, .mobileSearchStatus) {
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.cmsApp :where(.cmsLegalFooter, .side-foot) {
  background: #ffffff !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.cmsApp .cmsLegalFooter a {
  color: var(--theme-text-muted) !important;
}

/* Global desktop navigation alignment. The sidebar surface and its first
   navigation item start directly below the fixed topbar on every CMS page. */
@media (min-width: 901px) {
  body.cmsApp {
    --cms-fixed-topbar-height: 60px !important;
  }

  body.cmsApp > .topBar.topBar--global + :is(.appChrome, .app, .app-shell, .scheduleApp) {
    margin-top: var(--cms-fixed-topbar-height) !important;
  }

  body.cmsApp .appChrome > .shell > aside.sidebar,
  body.cmsApp > .app > aside.sidebar,
  body.cmsApp > .app-shell > aside.sidebar,
  body.cmsApp.zeitplan-page > .scheduleApp > aside.scheduleSidebar {
    top: var(--cms-fixed-topbar-height, 66px) !important;
    padding-top: 0 !important;
  }

  /* schedule.css's base .scheduleSidebar also sets a fixed height:100vh —
     left in place, that over-constrains top+height+bottom and the box wins
     out at top:0 (browsers drop the "top" offset, not "bottom", once all
     three are set), silently undoing the fix above. Only the schedule shell
     needs this; shell.css's plain .sidebar never sets its own height. */
  body.cmsApp.zeitplan-page > .scheduleApp > aside.scheduleSidebar {
    height: calc(100vh - var(--cms-fixed-topbar-height, 60px)) !important;
  }

  body.cmsApp .appChrome > .shell > aside.sidebar > .navList,
  body.cmsApp > .app > aside.sidebar > .navList,
  body.cmsApp > .app-shell > aside.sidebar > .navList,
  body.cmsApp.zeitplan-page > .scheduleApp > aside.scheduleSidebar > .navList {
    /* Keep the sidebar surface flush with the topbar while protecting the
       focus/active outline of the first navigation item. */
    margin-top: 10px !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  body.cmsApp {
    --cms-fixed-topbar-height: 58px !important;
  }
}

/* Shared dropdowns, popovers and menus. */
html[data-theme="light"] body.cmsApp :where(
  .cmsUserMenu,
  .searchDropdown,
  .locationMenu,
  .cardMenuPanel,
  .catalog-filter-popover,
  .dy-filter-popover
) {
  background: #ffffff;
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-raised);
  backdrop-filter: blur(18px);
}

html[data-theme="light"] body.cmsApp :where(
  .cmsUserMenuItem,
  .searchResult,
  .locationOption,
  .cardMenuPanel button,
  .menuAction
) {
  background: transparent;
  border-color: transparent;
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp :where(
  .cmsUserMenuItem,
  .searchResult,
  .locationOption,
  .cardMenuPanel button,
  .menuAction
):hover {
  background: var(--theme-surface-strong);
  border-color: var(--theme-border);
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp :where(.locationOption.is-selected, .searchResult.is-active) {
  background: var(--theme-accent-soft);
  border-color: #c8d5fa;
  color: #1f49b6;
}

html[data-theme="light"] body.cmsApp :where(
  .cmsUserMenuDivider,
  .cardMenuDivider,
  .catalog-inspector-divider
) {
  background: var(--theme-divider);
  border-color: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp :where(
  .searchDropdownHead strong,
  .searchGroupHead span,
  .searchResultBody strong,
  .locationOptionText
) {
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp :where(
  .searchDropdownHead span,
  .searchGroupHead em,
  .searchResultBody span,
  .searchEmpty,
  .searchResultMeta
) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.dashboard-page main.dysplay-dashboard-v3 > footer.cmsLegalFooter {
  background: transparent;
  color: var(--theme-text-dim);
}

html[data-theme="light"] body.cmsApp.dashboard-page footer.cmsLegalFooter .cmsLegalFooterLogo {
  filter: invert(1) brightness(.26) contrast(1.08);
}

/* Dashboard overlays and detail panels. */
html[data-theme="light"] body.cmsApp.dashboard-page :where(.dashModalDialog, .dashModalHeader, .dashModalBody) {
  background: var(--theme-surface);
  background-image: none;
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.dashboard-page :where(.dashModalHeadCopy h3, .dashModalTitle, .dashModalStat strong, .activityModalCopy strong) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.dashboard-page :where(.dashModalKicker, .dashModalHeadCopy p, .dashModalSubtitle, .dashModalStat span, .activityModalCopy span, .activityModalTime, .activityModalTime strong) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.dashboard-page :where(.dashModalBack, .dashModalClose, .dashModalStat, .activityModalItem, .activityModalMark, .specCard, .playerMetricBar) {
  background: var(--theme-surface-raised);
  background-image: none;
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.dashboard-page .dashModalDialog,
html[data-theme="light"] body.cmsApp.dashboard-page .dashModalDialog .dashModalHeader,
html[data-theme="light"] body.cmsApp.dashboard-page .dashModalDialog .dashModalBody {
  background: var(--theme-surface);
  background-image: none;
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.dashboard-page .dashModalDialog :where(.dashModalHeadCopy h3, .dashModalTitle, .dashModalStat strong, .activityModalCopy strong, .specCard strong, .playerMetricTop strong) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.dashboard-page .dashModalDialog :where(.dashModalKicker, .dashModalHeadCopy p, .dashModalSubtitle, .dashModalStat span, .activityModalCopy span, .activityModalTime, .activityModalTime strong, .specCard span, .playerMetricTop span) {
  color: var(--theme-text-muted);
}

/* General content surfaces and typography. */
html[data-theme="light"] body.cmsApp :where(
  .panel,
  .card,
  .surface,
  .liveCard,
  .kpi,
  .metric-card,
  .table-shell,
  .tableWrap,
  .notice,
  .empty,
  .modalCard,
  .modal-panel,
  .scheduleDialogShell,
  .dy-modal-card
) {
  background: var(--theme-surface);
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow) !important;
}

html[data-theme="light"] body.cmsApp :where(
  h1, h2, h3,
  .title,
  .sectionTitle,
  .panel-title,
  .panelTitle,
  .cardTitle,
  .kpiVal,
  .metric-value
) {
  color: var(--theme-text-strong);
  text-shadow: none;
}

html[data-theme="light"] body.cmsApp :where(
  .muted,
  .sub,
  .sectionSub,
  .meta,
  .eyebrow,
  .kpiLabel,
  .kpiSub,
  .metric-label,
  .metric-note,
  .panel-sub,
  .page-kicker,
  .page-summary,
  .formHint,
  .helperText
) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp :where(table, thead, tbody, tr, th, td) {
  border-color: var(--theme-border);
}

html[data-theme="light"] body.cmsApp :where(table, tbody, tr, td) {
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp :where(thead, thead tr, th) {
  background: var(--theme-surface-strong);
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp :where(tbody tr:hover) {
  background: var(--theme-surface-hover);
}

html[data-theme="light"] body.cmsApp :where(.modal, .modalOverlay, .modal-backdrop, .dy-modal-backdrop, .dashModalBackdrop) {
  background: var(--theme-backdrop);
}

/* Inhalte / screens.php */
html[data-theme="light"] body.cmsApp.screens-page {
  color-scheme: light;
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.screens-page :where(.appChrome, .shell, .main) {
  background: transparent;
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.screens-page :where(
  .hero,
  .screenStatusSummaryCard,
  .card,
  .templateAccordion,
  .templateCard,
  .modalWizard,
  .assignGroup,
  .wizardSummaryItem
) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.screens-page :where(
  .screenStatusMetric,
  .screenOverviewTemplateRow,
  .screenOverviewLocationRow,
  .cardInfoRow,
  .templateGroup,
  .assignRow,
  .wizardStep
) {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.screens-page :where(
  .screenTopbar h1,
  .sectionTitle,
  .cardTitle,
  .templateTitle,
  .templateGroupTitle,
  .kpiVal,
  .screenStatusMetric strong,
  .assignTitle,
  .wizardSummaryTitle
) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.screens-page :where(
  .sub,
  .sectionSub,
  .kpiLabel,
  .kpiSub,
  .meta,
  .templateMeta,
  .templateHint,
  .cardInfoCopy span,
  .assignMeta,
  .assignSub,
  .wizardSummaryText
) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page :where(.input, .select, input, select, textarea) {
  background: var(--theme-control);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.screens-page :where(.cardMenuTrigger, .templateQuickBtn, .templateAccordionToggle, .modalClose, .ghost) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

/* Content previews represent the published canvas and must not inherit the UI theme. */
html[data-theme="light"] body.cmsApp.screens-page :where(.preview, .preview iframe, .preview img) {
  background-color: #05070a;
  color: #f4f6fb;
}

/*
 * Complete light-mode authority for screens.php.
 * screens_modern.css intentionally owns layout, but contains legacy dark
 * declarations with high specificity. Keep every application surface here so
 * the light theme remains deterministic as that page evolves.
 */
html[data-theme="light"] body.cmsApp.screens-page,
html[data-theme="light"] body.cmsApp.screens-page .appChrome,
html[data-theme="light"] body.cmsApp.screens-page .shell,
html[data-theme="light"] body.cmsApp.screens-page main.main,
html[data-theme="light"] body.cmsApp.screens-page main.dysplay-dashboard-v3,
html[data-theme="light"] body.cmsApp.screens-page main.dysplay-dashboard-v3 > .main,
html[data-theme="light"] body.cmsApp.screens-page .contentWorkbench {
  background-color: var(--theme-bg);
  background-image: none;
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.screens-page .screenTitleBlock h1,
html[data-theme="light"] body.cmsApp.screens-page .sectionTitle,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardHeader .cardTitle,
html[data-theme="light"] body.cmsApp.screens-page .templateGroupTitle,
html[data-theme="light"] body.cmsApp.screens-page .templateTitle,
html[data-theme="light"] body.cmsApp.screens-page .modalTitle,
html[data-theme="light"] body.cmsApp.screens-page .wizardSummaryTitle,
html[data-theme="light"] body.cmsApp.screens-page .assignTitle {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusSummaryCard {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusSummaryDivider {
  background: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusMetric {
  background: transparent;
  border-color: transparent;
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusMetric strong {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusMetric em,
html[data-theme="light"] body.cmsApp.screens-page .screenStatusMetric i {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusMetricIcon--total {
  border-color: rgba(49, 95, 223, .34);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusMetricIcon--live {
  border-color: rgba(25, 118, 58, .30);
  background: var(--theme-success-soft);
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusMetricIcon--warn {
  border-color: rgba(138, 98, 0, .28);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

html[data-theme="light"] body.cmsApp.screens-page .screenOverviewTemplateRow,
html[data-theme="light"] body.cmsApp.screens-page .screenOverviewLocationRow {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.screens-page .screenOverviewTemplateRow:hover,
html[data-theme="light"] body.cmsApp.screens-page .screenOverviewLocationRow:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-hover);
}

html[data-theme="light"] body.cmsApp.screens-page .screenOverviewTemplateIcon,
html[data-theme="light"] body.cmsApp.screens-page .screenOverviewLocationIcon {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page .screenOverviewTemplateIcon {
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.screens-page .screenOverviewLocationSelect,
html[data-theme="light"] body.cmsApp.screens-page .screenOverviewLocationSelect option {
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.screens-page .screenOverviewLocationArrow {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .card,
html[data-theme="light"] body.cmsApp.screens-page .templateAccordion,
html[data-theme="light"] body.cmsApp.screens-page .templateCard,
html[data-theme="light"] body.cmsApp.screens-page .empty {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .card:hover,
html[data-theme="light"] body.cmsApp.screens-page .templateCard:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-raised);
  box-shadow: var(--theme-shadow-raised);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .card:hover .cardTitle {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardInfo {
  border-top-color: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardInfoRow,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardInfoCopy small,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardCode,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .metaLine,
html[data-theme="light"] body.cmsApp.screens-page .templateMeta,
html[data-theme="light"] body.cmsApp.screens-page .templateGroupSub,
html[data-theme="light"] body.cmsApp.screens-page .templateHint,
html[data-theme="light"] body.cmsApp.screens-page .modalSub,
html[data-theme="light"] body.cmsApp.screens-page .formHint,
html[data-theme="light"] body.cmsApp.screens-page .assignSub,
html[data-theme="light"] body.cmsApp.screens-page .assignMeta,
html[data-theme="light"] body.cmsApp.screens-page .wizardSummaryText {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardInfoCopy strong,
html[data-theme="light"] body.cmsApp.screens-page .templateMeta strong {
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardInfoIcon,
html[data-theme="light"] body.cmsApp.screens-page .templateIcon {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenu--header .cardMenuTrigger,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardActions > .assignAction,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardActions > .editAction,
html[data-theme="light"] body.cmsApp.screens-page .templateUse,
html[data-theme="light"] body.cmsApp.screens-page .templateQuickBtn,
html[data-theme="light"] body.cmsApp.screens-page .btn.ghost,
html[data-theme="light"] body.cmsApp.screens-page .modalClose {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenu--header .cardMenuTrigger:hover,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardActions > .assignAction:hover,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardActions > .editAction:hover,
html[data-theme="light"] body.cmsApp.screens-page .templateUse:hover,
html[data-theme="light"] body.cmsApp.screens-page .templateQuickBtn:hover,
html[data-theme="light"] body.cmsApp.screens-page .btn.ghost:hover,
html[data-theme="light"] body.cmsApp.screens-page .modalClose:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-hover);
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenuPanel {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  background-image: none;
  box-shadow: var(--theme-shadow-raised);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenuPanel .menuAction {
  border-color: transparent;
  background: transparent;
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenuPanel .menuAction:hover,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenuPanel .menuAction:focus-visible {
  border-color: var(--theme-border);
  background: var(--theme-surface-hover);
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenuPanel .menuAction.danger {
  color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenuPanel .menuAction.danger:hover,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenuPanel .menuAction.danger:focus-visible {
  border-color: rgba(185, 45, 60, .22);
  background: var(--theme-danger-soft);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardLiveState,
html[data-theme="light"] body.cmsApp.screens-page .previewLivePill {
  border-color: rgba(185, 45, 60, .24);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardLiveState.is-idle,
html[data-theme="light"] body.cmsApp.screens-page .previewLivePill.is-idle,
html[data-theme="light"] body.cmsApp.screens-page .badge {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
  color: var(--theme-text-muted);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardLiveState > span {
  background: var(--theme-danger);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardLiveState.is-idle > span {
  background: var(--theme-text-dim);
}

html[data-theme="light"] body.cmsApp.screens-page .templateAccordionCount,
html[data-theme="light"] body.cmsApp.screens-page .templateAccordionToggle {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page .templateAccordionToggle {
  background: transparent;
}

html[data-theme="light"] body.cmsApp.screens-page .templatePreview {
  border-bottom-color: var(--theme-border);
  background: #05070a;
}

html[data-theme="light"] body.cmsApp.screens-page .templateFooter {
  border-top-color: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp.screens-page dialog::backdrop {
  background: var(--theme-backdrop);
}

html[data-theme="light"] body.cmsApp.screens-page dialog,
html[data-theme="light"] body.cmsApp.screens-page .modal,
html[data-theme="light"] body.cmsApp.screens-page .modalWizard,
html[data-theme="light"] body.cmsApp.screens-page .modalAssign {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-raised);
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.screens-page .field label,
html[data-theme="light"] body.cmsApp.screens-page .assignGroupTitle,
html[data-theme="light"] body.cmsApp.screens-page .wizardSummaryItem span {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page .field input,
html[data-theme="light"] body.cmsApp.screens-page .field select,
html[data-theme="light"] body.cmsApp.screens-page .field textarea,
html[data-theme="light"] body.cmsApp.screens-page #screenSearch,
html[data-theme="light"] body.cmsApp.screens-page .filters input,
html[data-theme="light"] body.cmsApp.screens-page .filters select {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.screens-page .wizardStepper,
html[data-theme="light"] body.cmsApp.screens-page .wizardSummary,
html[data-theme="light"] body.cmsApp.screens-page .wizardSummaryItem,
html[data-theme="light"] body.cmsApp.screens-page .assignRow {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.screens-page .wizardStepper span {
  background: transparent;
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page .wizardStepper span.is-active {
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.screens-page .wizardSummaryItem strong,
html[data-theme="light"] body.cmsApp.screens-page .assignTitle {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.screens-page .assignRow:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-hover);
}

html[data-theme="light"] body.cmsApp.screens-page .assignRow.is-selected {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  box-shadow: 0 0 0 1px rgba(49, 95, 223, .10);
}

html[data-theme="light"] body.cmsApp.screens-page .assignCheckBox {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
}

html[data-theme="light"] body.cmsApp.screens-page .assignState,
html[data-theme="light"] body.cmsApp.screens-page .assignCount {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusSummaryCard .screenOverviewTemplateRowIcon,
html[data-theme="light"] body.cmsApp.screens-page .screenStatusSummaryCard .screenOverviewLocationRowIcon {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text-muted);
  box-shadow: 0 4px 12px rgba(41, 55, 76, .07);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusSummaryCard .screenOverviewTemplateRowIcon {
  border-color: rgba(25, 118, 58, .22);
  background: var(--theme-success-soft);
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusSummaryCard .screenOverviewLocationRowIcon {
  border-color: rgba(49, 95, 223, .20);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusSummaryCard .screenOverviewLocationRowArrow {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page .screenStatusSummaryCard :is(
  .screenOverviewTemplateRowIcon,
  .screenOverviewLocationRowIcon,
  .screenOverviewLocationRowArrow
) svg,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid :is(
  .cardMenuTrigger,
  .cardInfoIcon,
  .assignAction,
  .editAction
) svg {
  fill: none;
  stroke: currentColor;
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenu--header .cardMenuTrigger {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardActions > .assignAction,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardActions > .editAction {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardActions > .assignAction:hover,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardActions > .editAction:hover,
html[data-theme="light"] body.cmsApp.screens-page #screenGrid .cardMenu--header .cardMenuTrigger:hover {
  border-color: rgba(49, 95, 223, .34);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

html[data-theme="light"] body.cmsApp.screens-page #screenGrid :is(
  .cardActions > .assignAction,
  .cardActions > .editAction,
  .cardMenu--header .cardMenuTrigger
):focus-visible,
html[data-theme="light"] body.cmsApp.screens-page :is(
  .screenOverviewTemplateRow,
  .screenOverviewLocationRow
):focus-within {
  outline: 0;
  box-shadow: var(--theme-focus-ring);
}

/* Speisekarte / catalog.php */
html[data-theme="light"] body.catalog-page {
  color-scheme: light;
  --cat-bg: var(--theme-bg);
  --cat-bg-2: var(--theme-bg-soft);
  --cat-surface: var(--theme-surface);
  --cat-surface-2: var(--theme-surface-raised);
  --cat-surface-3: var(--theme-surface-strong);
  --cat-input: var(--theme-control);
  --cat-line: var(--theme-border);
  --cat-line-soft: var(--theme-divider);
  --cat-line-strong: var(--theme-border-strong);
  --cat-text: var(--theme-text);
  --cat-muted: var(--theme-text-muted);
  --cat-dim: var(--theme-text-dim);
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="light"] body.catalog-page :where(.app, .catalog-content, .catalog-workbench, .main) {
  background: transparent;
  color: var(--theme-text);
}

html[data-theme="light"] body.catalog-page :where(
  .catalog-overview-card,
  .catalog-list-head,
  .product-list-panel,
  .row,
  .trow,
  .panel,
  .table-section,
  .catalog-inspector-panel,
  .catalog-category-panel,
  .modal-panel,
  .catalog-import-preview,
  .catalog-import-report
) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.catalog-page :where(
  .catalog-overview-stat,
  .catalog-overview-location-row,
  .catalog-list-tools,
  .catalog-list-filter,
  .table-toolbar,
  .category-chip,
  .variant-item,
  .coverage-item,
  .scope-mode-card,
  .catalog-import-drop,
  .catalog-import-stats > *,
  .catalog-import-table,
  .catalog-import-report-table-wrap
) {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="light"] body.catalog-page :where(
  .hero-title,
  .catalog-list-head strong,
  .prod-name,
  .catalog-inspector-title,
  .catalog-category-title-wrap,
  .catalog-import-title,
  .catalog-import-report-title,
  .coverage-name
) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.catalog-page :where(
  .muted,
  .prod-description,
  .prod-meta,
  .prod-id,
  .coverage-meta,
  .catalog-inspector-subhead,
  .catalog-import-kicker,
  .catalog-import-readonly-hint,
  .scope-explainer
) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.catalog-page .price-pill {
  background-color: #05070a;
  color: #eef2fa;
}

html[data-theme="light"] body.catalog-page :where(
  input,
  select,
  textarea,
  .search,
  .catalog-list-search,
  .catalog-list-sort,
  .catalog-location-select,
  .catalog-overview-location-select,
  .price-input,
  .catalog-base-price-input,
  .catalog-category-input-wrap
) {
  background: var(--theme-control);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.catalog-page :where(
  .btn:not(.danger):not(.is-danger),
  .ghost,
  .outline,
  .catalog-toolbar-button,
  .catalog-inspector-icon-action,
  .catalog-inspector-close,
  .catalog-category-close,
  .filter-reset
) {
  background: var(--theme-surface);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.catalog-page :where(.catalog-tabs, .catalog-inspector-tabs) {
  background: var(--theme-surface-strong);
  border-color: var(--theme-border);
}

html[data-theme="light"] body.catalog-page :where(.catalog-tabs .is-active, .catalog-inspector-tabs .is-active) {
  background: var(--theme-surface);
  color: var(--theme-accent-strong);
}

/* Complete light-mode authority for catalog.php. */
html[data-theme="light"] body.cmsApp.catalog-page,
html[data-theme="light"] body.cmsApp.catalog-page .appChrome,
html[data-theme="light"] body.cmsApp.catalog-page .shell,
html[data-theme="light"] body.cmsApp.catalog-page main.main,
html[data-theme="light"] body.cmsApp.catalog-page main.dysplay-dashboard-v3,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-content,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-workbench {
  background-color: var(--theme-bg);
  background-image: none;
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-page-head h1,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-section h2,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-stat-copy strong,
html[data-theme="light"] body.cmsApp.catalog-page .prod-name,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-title h2,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-category-head h2,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-import-title,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-import-report-title {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-card,
html[data-theme="light"] body.cmsApp.catalog-page .product-list-panel,
html[data-theme="light"] body.cmsApp.catalog-page .panel,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-rail,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-panel,
html[data-theme="light"] body.cmsApp.catalog-page .modal-panel,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-import-modal,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-category-panel,
html[data-theme="light"] body.cmsApp.catalog-page .empty-state {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-divider,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-divider,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-head,
html[data-theme="light"] body.cmsApp.catalog-page .table-toolbar,
html[data-theme="light"] body.cmsApp.catalog-page .thead.rowline,
html[data-theme="light"] body.cmsApp.catalog-page .trow > summary.rowline,
html[data-theme="light"] body.cmsApp.catalog-page .row-body.full {
  border-color: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-divider {
  background: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-card > .catalog-overview-section {
  border-left-color: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-stat-copy > span,
html[data-theme="light"] body.cmsApp.catalog-page .prod-description,
html[data-theme="light"] body.cmsApp.catalog-page .prod-meta,
html[data-theme="light"] body.cmsApp.catalog-page .prod-id,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-subhead,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-empty,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-import-kicker,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-import-readonly-hint,
html[data-theme="light"] body.cmsApp.catalog-page .scope-explainer,
html[data-theme="light"] body.cmsApp.catalog-page label {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-stat-icon {
  background: var(--theme-surface-raised);
  background-image: none;
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-stat-icon.is-blue {
  border-color: rgba(49, 95, 223, .28);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-stat-icon.is-green {
  border-color: rgba(25, 118, 58, .26);
  background: var(--theme-success-soft);
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-stat-icon.is-red {
  border-color: rgba(185, 45, 60, .24);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp.catalog-page .hero-mini-pill,
html[data-theme="light"] body.cmsApp.catalog-page .hero-add-category-button,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-location-row,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-search,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-toolbar-button,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-sort,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-filter-popover,
html[data-theme="light"] body.cmsApp.catalog-page .bulk-bar,
html[data-theme="light"] body.cmsApp.catalog-page .variant-item,
html[data-theme="light"] body.cmsApp.catalog-page .scope-choice,
html[data-theme="light"] body.cmsApp.catalog-page .location-choice,
html[data-theme="light"] body.cmsApp.catalog-page .row-body.full,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-location-select,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-import-drop {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.catalog-page .hero-mini-pill:hover,
html[data-theme="light"] body.cmsApp.catalog-page .hero-add-category-button:hover,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-toolbar-button:hover,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-sort:hover,
html[data-theme="light"] body.cmsApp.catalog-page .scope-choice:hover,
html[data-theme="light"] body.cmsApp.catalog-page .location-choice:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-hover);
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.catalog-page .hero-mini-pill.is-active,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-toolbar-button.is-active,
html[data-theme="light"] body.cmsApp.catalog-page .scope-choice.is-active,
html[data-theme="light"] body.cmsApp.catalog-page .location-choice.is-selected,
html[data-theme="light"] body.cmsApp.catalog-page details.trow[open] > summary,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-row-selected > summary {
  border-color: rgba(49, 95, 223, .32);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.catalog-page .hero-add-category-button em {
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-location-row-icon,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-toolbar-button-icon,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-sort-icon,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-category-hero-icon,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-category-input-icon {
  color: var(--theme-accent);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-location-row-icon {
  border-color: rgba(49, 95, 223, .20);
  background: var(--theme-accent-soft);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-location-row-arrow,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-search > svg {
  color: var(--theme-text-muted);
  stroke: currentColor;
}

html[data-theme="light"] body.cmsApp.catalog-page input,
html[data-theme="light"] body.cmsApp.catalog-page select,
html[data-theme="light"] body.cmsApp.catalog-page textarea,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-search input,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-location-select,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-location-select select {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-search input,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-location-select,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-location-select select {
  border: 0;
  background: transparent;
}

html[data-theme="light"] body.cmsApp.catalog-page input::placeholder,
html[data-theme="light"] body.cmsApp.catalog-page textarea::placeholder,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-search input::placeholder {
  color: var(--theme-placeholder);
  opacity: 1;
}

html[data-theme="light"] body.cmsApp.catalog-page input:focus,
html[data-theme="light"] body.cmsApp.catalog-page select:focus,
html[data-theme="light"] body.cmsApp.catalog-page textarea:focus,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-list-search:focus-within {
  border-color: var(--theme-accent);
  box-shadow: var(--theme-focus-ring);
}

html[data-theme="light"] body.cmsApp.catalog-page .pill,
html[data-theme="light"] body.cmsApp.catalog-page .subpill,
html[data-theme="light"] body.cmsApp.catalog-page .scope-mini,
html[data-theme="light"] body.cmsApp.catalog-page .table-section-count,
html[data-theme="light"] body.cmsApp.catalog-page .cat,
html[data-theme="light"] body.cmsApp.catalog-page .vchip,
html[data-theme="light"] body.cmsApp.catalog-page .location-pill,
html[data-theme="light"] body.cmsApp.catalog-page .player-pill,
html[data-theme="light"] body.cmsApp.catalog-page .scope-pill-global,
html[data-theme="light"] body.cmsApp.catalog-page .scope-pill-local,
html[data-theme="light"] body.cmsApp.catalog-page .price-pill,
html[data-theme="light"] body.cmsApp.catalog-page .price-variant-summary {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-strong) !important;
  background-image: none !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.cmsApp.catalog-page .badge.live,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-live-pill:not(.is-offline) {
  border-color: rgba(25, 118, 58, .24);
  background: var(--theme-success-soft);
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.catalog-page .badge.sold,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-live-pill.is-offline,
html[data-theme="light"] body.cmsApp.catalog-page .btn.is-danger,
html[data-theme="light"] body.cmsApp.catalog-page .btn[name="action"][value="delete"] {
  border-color: rgba(185, 45, 60, .24);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-icon-action,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-close,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-filter-actions a,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-filter-actions button,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-category-close,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-add-variant-button,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-row-action,


html[data-theme="light"] body.cmsApp.catalog-page .btn:not(.is-danger):not(.danger) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-surface) !important;
  background-image: none !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-icon-action:hover,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-filter-actions a:hover,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-filter-actions button:hover,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-add-variant-button:hover,


html[data-theme="light"] body.cmsApp.catalog-page .catalog-row-action:hover,


html[data-theme="light"] body.cmsApp.catalog-page .btn:not(.is-danger):not(.danger):hover {
  border-color: rgba(49, 95, 223, .34);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-tabs,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-tabs {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.catalog-page .catalog-inspector-tabs button.is-active,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-tabs .is-active {
  background: var(--theme-surface);
  color: var(--theme-accent-strong);
}

/* Playlisten / zeitplan.php */
html[data-theme="light"] body.cmsApp.zeitplan-page,
html[data-theme="light"] body.cmsApp.zeitplan-page.scheduleDark {
  color-scheme: light;
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(.scheduleApp, .scheduleMain, .scheduleBody, .scheduleWorkspace) {
  background: transparent;
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleOverviewCard,
  .schedulePanel,
  .scheduleScheduleShell,
  .scheduleDialogShell,
  .scheduleDraftDock
) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleOverviewSelectRow,
  .scheduleToolbar,
  .scheduleHeader,
  .scheduleHeadStatic,
  .scheduleHeadCell,
  .scheduleGrid,
  .scheduleField,
  .scheduleInlineForm
) {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .schedulePageHead h1,
  .scheduleWeekLabel,
  .scheduleHeadCell.day .date,
  .scheduleDialogTop h2,
  .scheduleDialogBody h3
) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleEyebrow,
  .scheduleOverviewSection h2,
  .scheduleHeadCell.day .weekday,
  .scheduleDraftDockMeta,
  .scheduleDraftDockLabel
) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(.scheduleInput, .scheduleSelect, input, select, textarea) {
  background: var(--theme-control);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewSelectRow .scheduleSelect {
  background: transparent;
  border-color: transparent;
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleHeadCell.day .date {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleHeadCell.day .weekday {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleIconBtn,
  .scheduleTodayBtn,
  .scheduleBtn--secondary,
  .scheduleOverviewIconAction,
  .scheduleDialogClose
) {
  background: var(--theme-surface);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleHeadCell.day.is-today {
  background: var(--theme-accent-soft);
}

/* Complete light-mode authority for zeitplan.php. */
html[data-theme="light"] body.cmsApp.zeitplan-page :where(.scheduleMain, .scheduleWorkspace) {
  background: var(--theme-bg);
  background-image: none;
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleOverviewCard,
  .schedulePanel,
  .scheduleScheduleShell,
  .scheduleDraftDock,
  .scheduleDialogShell,
  .scheduleCompactCard,
  .scheduleContextCard,
  .scheduleDeviceCard,
  .scheduleListItem,
  .scheduleEntryPreview,
  .schedulePlaylistEmptyState
) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStats {
  border-color: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStatCopy strong,
html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStatCopy strong.is-word,
html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStatCopy em {
  color: var(--theme-text-strong);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStatCopy em {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStatIcon.is-blue {
  border-color: rgba(49, 95, 223, .28);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStatIcon.is-green {
  border-color: rgba(25, 118, 58, .26);
  background: var(--theme-success-soft);
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStatIcon.is-red {
  border-color: rgba(185, 45, 60, .24);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .schedulePlaylistSelect,
  .schedulePlaylistLocationSelect,
  .scheduleOverviewSelectRow,
  .scheduleToolbar,
  .scheduleHeader,
  .scheduleHeadStatic,
  .scheduleHeadCell,
  .scheduleTimeColumn,
  .scheduleAllDay,
  .scheduleAllDayLabel,
  .scheduleAllDayCell,
  .scheduleEntryPalette,
  .scheduleEntryQuickRow,
  .scheduleStatusRow,
  .scheduleField,
  .scheduleInlineForm
) {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewSection:first-of-type .scheduleOverviewSelectRow {
  background: transparent;
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .schedulePlaylistSelect .scheduleSelect,
  .schedulePlaylistLocationSelect .scheduleSelect,
  .scheduleOverviewSection:first-of-type .scheduleOverviewSelectRow > .scheduleSelect,
  .scheduleSelect,
  .scheduleInput,
  .scheduleTextarea,
  input,
  select,
  textarea
) {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  background-image: none;
  color: var(--theme-text);
  -webkit-text-fill-color: currentColor;
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .schedulePlaylistSelect .scheduleSelect,
  .schedulePlaylistLocationSelect .scheduleSelect,
  .scheduleOverviewSelectRow .scheduleSelect
) {
  border-color: transparent;
  background: transparent;
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(select option, select optgroup) {
  background: var(--theme-control);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(input, textarea)::placeholder {
  color: var(--theme-placeholder);
  opacity: 1;
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .schedulePlaylistLocationSelect__icon,
  .schedulePlaylistSelect__arrow,
  .schedulePlaylistLocationSelect__arrow
) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .schedulePageHead h1,
  .scheduleWeekLabel,
  .scheduleHeadCell.day .date,
  .scheduleBlockTitle,
  .scheduleCompactSummary,
  .scheduleListTitle,
  .scheduleDialogTop h3,
  .scheduleDialogHeading,
  .scheduleFieldHead,
  .scheduleEntryPreviewTitle,
  .schedulePlaylistEmptyState__copy strong
) {
  color: var(--theme-text-strong);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleOverviewSection h2,
  .scheduleHeadCell.day .weekday,
  .scheduleTimeCell,
  .scheduleBlockMeta,
  .scheduleBlockSub,
  .scheduleCompactMeta,
  .scheduleListMeta,
  .scheduleListTime,
  .scheduleDialogTop p,
  .scheduleContextMeta,
  .scheduleEntryPreviewMeta,
  .scheduleEntryPreviewLabel,
  .scheduleSubtle,
  .schedulePlaylistEmptyState__eyebrow
) {
  color: var(--theme-text-muted);
  -webkit-text-fill-color: currentColor;
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleScheduleShell,
html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleBody,
html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleGrid {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  background-image: none;
  scrollbar-color: var(--theme-border-strong) var(--theme-surface-raised);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleDayColumn,
  .scheduleHourCell,
  .scheduleQuarterLine,
  .scheduleTimeCell
) {
  border-color: var(--theme-divider);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleDayColumn.is-current-day,
  .scheduleHeadCell.day.is-today
) {
  background: var(--theme-accent-soft);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleBlock,
html[data-theme="light"] body.cmsApp.zeitplan-page :where(.scheduleAllDayEvent, .scheduleAllDayGhost) {
  border-color: rgba(49, 95, 223, .30);
  background: linear-gradient(135deg, #f2f6ff, #e8efff);
  color: var(--theme-text);
  box-shadow: 0 8px 20px rgba(43, 73, 135, .12);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleBlock:hover {
  border-color: rgba(49, 95, 223, .50);
  background: var(--theme-accent-soft);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(.scheduleBlockTag, .scheduleBlockMeta span:last-child, .scheduleChip, .schedulePill) {
  border-color: rgba(49, 95, 223, .20);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleDraftDock {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleDraftDockMeta strong,
html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleDraftDockLabel {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleIconBtn,
  .scheduleTodayBtn,
  .scheduleBtn.ghost,
  .scheduleBtn--secondary,
  .scheduleOverviewIconAction,
  .scheduleDialogClose,
  .scheduleTinyBtn,
  .schedulePresetBtn,
  .scheduleViewSwitch button
) {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text);
  -webkit-text-fill-color: currentColor;
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(
  .scheduleIconBtn,
  .scheduleTodayBtn,
  .scheduleBtn.ghost,
  .scheduleBtn--secondary,
  .scheduleOverviewIconAction,
  .scheduleDialogClose,
  .scheduleTinyBtn,
  .schedulePresetBtn,
  .scheduleViewSwitch button
):hover:not(:disabled) {
  border-color: rgba(49, 95, 223, .36);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleBtn.primary {
  border-color: var(--theme-accent);
  background: linear-gradient(135deg, #416fe8, #315fdf);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(.scheduleOverviewIconAction.danger, .scheduleDangerBtn) {
  border-color: rgba(185, 45, 60, .26);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleDialog::backdrop {
  background: var(--theme-backdrop);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(.scheduleDialogTop, .scheduleDialogActions) {
  border-color: var(--theme-divider);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.zeitplan-page :where(.scheduleInlineNotice, .scheduleToast) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

@media (max-width: 1100px) {
  html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleOverviewStats {
    border-color: var(--theme-divider) !important;
  }
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePanel.is-empty {
  padding: 12px;
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: 0 12px 30px rgba(43, 55, 76, .07);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleScheduleShell.is-empty {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .scheduleBody.is-empty {
  background: var(--theme-surface);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptyState {
  gap: 14px;
  min-height: clamp(320px, 44vh, 500px);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptyState__icon {
  border-color: rgba(49, 95, 223, .18);
  background: var(--theme-accent-soft);
  background-image: none;
  color: var(--theme-accent);
  box-shadow: 0 12px 28px rgba(49, 95, 223, .10);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptyState strong {
  color: var(--theme-text-strong);
  -webkit-text-fill-color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptyState p {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptySelect {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-raised);
  background-image: none;
  color: var(--theme-text);
  box-shadow: 0 10px 24px rgba(43, 55, 76, .08);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptySelect:focus-within {
  border-color: var(--theme-accent);
  box-shadow: var(--theme-focus-ring);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptySelect__icon,
html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptySelect__arrow {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptySelect__icon {
  border-right-color: var(--theme-border);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptySelect select {
  border: 0;
  background: transparent;
  color: var(--theme-text);
  -webkit-text-fill-color: var(--theme-text);
  color-scheme: light;
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptySelect select option {
  background: var(--theme-control);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistEmptyCreate {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  color: var(--theme-text);
}

/* Benutzer and Besucher pages. */
html:not([data-theme="light"]) body.cmsApp.visitors-page,
html:not([data-theme="light"]) body.cmsApp:has(.app-shell .metrics) {
  color-scheme: dark !important;
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp.visitors-page :where(.app, .main),
html:not([data-theme="light"]) body.cmsApp:has(.app-shell .metrics) :where(.app-shell, .main) {
  background: transparent !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp.visitors-page :where(.card, .tenant, .locGroup, .locRow),
html:not([data-theme="light"]) body.cmsApp:has(.app-shell .metrics) :where(
  .surface,
  .metric-card,
  .summary-stat,
  .entry-card,
  .device-fold,
  .device-detail,
  .table-shell,
  .accordion
) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp.visitors-page :where(.title, h1, h2, h3, strong),
html:not([data-theme="light"]) body.cmsApp:has(.app-shell .metrics) :where(.page-title, .panel-title, .entry-title, .list-title, .metric-value) {
  color: var(--theme-text-strong) !important;
}

html:not([data-theme="light"]) body.cmsApp.visitors-page :where(.muted, label, td),
html:not([data-theme="light"]) body.cmsApp:has(.app-shell .metrics) :where(.muted, .page-kicker, .page-summary, .panel-sub, .metric-label, .metric-note, .summary-meta, .list-copy) {
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.cmsApp.visitors-page,
html[data-theme="light"] body.cmsApp:has(.app-shell .metrics) {
  color-scheme: light !important;
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.cmsApp.visitors-page :where(.app, .main),
html[data-theme="light"] body.cmsApp:has(.app-shell .metrics) :where(.app-shell, .main) {
  background: transparent !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.cmsApp.visitors-page :where(.card, .tenant, .locGroup, .locRow),
html[data-theme="light"] body.cmsApp:has(.app-shell .metrics) :where(
  .surface,
  .metric-card,
  .summary-stat,
  .entry-card,
  .device-fold,
  .device-detail,
  .table-shell,
  .accordion
) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow) !important;
}

html[data-theme="light"] body.cmsApp.visitors-page :where(.title, h1, h2, h3, strong),
html[data-theme="light"] body.cmsApp:has(.app-shell .metrics) :where(.page-title, .panel-title, .entry-title, .list-title, .metric-value) {
  color: var(--theme-text-strong) !important;
}

html[data-theme="light"] body.cmsApp.visitors-page :where(.muted, label, td),
html[data-theme="light"] body.cmsApp:has(.app-shell .metrics) :where(.muted, .page-kicker, .page-summary, .panel-sub, .metric-label, .metric-note, .summary-meta, .list-copy) {
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.cmsApp.visitors-page :where(input, select, textarea),
html[data-theme="light"] body.cmsApp:has(.app-shell .metrics) :where(input, select, textarea, .select) {
  background: var(--theme-control) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
  color-scheme: light !important;
}

/* Player / devices.php. Existing desktop light rules are completed here. */
html[data-theme="light"] body.dysplay-devices-page {
  --dy-bg: var(--theme-bg);
  --dy-bg-2: var(--theme-bg-soft);
  --dy-panel: var(--theme-surface);
  --dy-panel-2: var(--theme-surface-raised);
  --dy-line: var(--theme-border);
  --dy-line-strong: var(--theme-border-strong);
  --dy-text: var(--theme-text);
  --dy-muted: var(--theme-text-muted);
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="light"] body.dysplay-devices-page :where(
  .dy-kpis-modern,
  .dy-kpis-modern .dy-kpi,
  .dy-list-card,
  .dy-row:not(.dy-row-head),
  .dy-detail,
  .dy-card,
  .dy-diagnostics,
  .dy-history-card,
  .dy-log-card,
  .dy-monitor-summary-card
) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.dysplay-devices-page :where(
  .dy-list-head,
  .dy-row-head,
  .dy-tabs,
  .dy-info-grid,
  .dy-overview-grid,
  .dy-metric,
  .dy-diagnostics > div,
  .dy-card dl > div,
  .dy-kpi-location
) {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="light"] body.dysplay-devices-page :where(
  .dy-list-search,
  .dy-bulk select,
  .dy-inline-form input,
  .dy-inline-form select,
  .dy-inline-form textarea,
  .dy-claim-form input,
  .dy-claim-form select,
  .dy-filter-popover select,
  .dy-location-select-wrap select
) {
  background: var(--theme-control);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.dysplay-devices-page :where(
  .dy-player-copy strong,
  .dy-location-cell strong,
  .dy-detail-top h2,
  .dy-card dd,
  .dy-history-line strong
) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.dysplay-devices-page :where(
  .dy-player-copy small,
  .dy-player-copy em,
  .dy-location-cell small,
  .dy-last-cell,
  .dy-card dt,
  .dy-history-line small
) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :where(
  .dy-player-copy small,
  .dy-player-copy em,
  .dy-location-cell small,
  .dy-last-cell
) {
  color: #536176;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-player-copy small,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-player-copy small b,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-player-copy em,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-cell small,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-last-cell {
  color: #536176;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-title {
  color: #536176;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :where(
  .dy-row-shot,
  .dy-shot img,
  .dy-shot-placeholder
) {
  background: #05070a;
  border-color: #cbd4e1;
  color: #e7ecf5;
}

html[data-theme="light"] body.dysplay-devices-page :where(
  .dy-filter-btn,
  .dy-bulk button,
  .dy-actions-cell button,
  .dy-secondary,
  .dy-shot-foot button,
  .dy-modal-secondary,
  .dy-close-detail
) {
  background: var(--theme-surface);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
}

@media (max-width: 900px) {
  html[data-theme="light"] body.dysplay-devices-page .dy-row:not(.dy-row-head) {
    background: var(--theme-surface) !important;
  }

  html[data-theme="light"] body.dysplay-devices-page.dy-detail-open .dy-detail,
  html[data-theme="light"] body.dysplay-devices-page .dy-detail-top {
    background: #ffffff !important;
  }
}

/* Complete light-mode authority for devices.php. */
html[data-theme="light"] body.cmsApp.dysplay-devices-page,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .appChrome,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .shell,
html[data-theme="light"] body.cmsApp.dysplay-devices-page main.main,
html[data-theme="light"] body.cmsApp.dysplay-devices-page main.dysplay-dashboard-v3,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-main,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-workspace {
  /* why: BLE page reuses .dysplay-devices-page; theme.css general .main rule
     wins in light without this. */
  background-color: var(--theme-bg) !important;
  background-image: none !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-page-head h1,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-status-values strong,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-player-copy strong,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-status-cell strong,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-cell strong,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-detail-top h2,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-card h3,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-card dd,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-empty strong {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-page-head p,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-title,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-status-values em,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-player-copy small,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-player-copy small b,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-player-copy em,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-cell small,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-last-cell,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-card dt,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-empty,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-detail-empty {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpis-modern,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpis-modern .dy-kpi,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-list-card,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-detail,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-detail-top,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-card,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-diagnostics,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-history-card,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-log-card,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-monitor-summary-card,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-modal-card {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpis-modern .dy-kpi-status,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-list-head,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-row-head,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-tabs,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-overview-grid,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-info-grid,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-diagnostics > div,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-card dl > div,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-metric,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-pagination,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-location {
  border-color: var(--theme-divider);
  background: var(--theme-surface-raised);
  background-image: none;
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-row:not(.dy-row-head) {
  border-color: var(--theme-divider);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-row:not(.dy-row-head):hover {
  background: var(--theme-surface-hover);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-row.is-selected {
  border-color: rgba(49, 95, 223, .42);
  background: var(--theme-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(49, 95, 223, .10);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-round,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-mobile-metric-icon.is-total {
  border-color: rgba(49, 95, 223, .24);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-mobile-metric-icon.is-online {
  border-color: rgba(25, 118, 58, .24);
  background: var(--theme-success-soft);
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-mobile-metric-icon.is-offline {
  border-color: rgba(185, 45, 60, .24);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-activity-trigger,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-select-wrap,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-list-search,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-filter-popover,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-bulk,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-bulk-inline {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-activity-trigger:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-hover);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-activity-trigger-label {
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-round-activity,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-activity-trigger-chevron,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-chevron,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-list-search svg {
  color: var(--theme-text-muted);
  stroke: currentColor;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-select-wrap select,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-list-search input,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-bulk select,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-filter-popover select,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-inline-form input,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-inline-form select,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-inline-form textarea,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-claim-form input,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-claim-form select {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-select-wrap select,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-list-search input {
  border: 0;
  background: transparent;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :is(select option, select optgroup) {
  background: var(--theme-control);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :is(input, textarea)::placeholder {
  color: var(--theme-placeholder);
  opacity: 1;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :is(input, select, textarea):focus,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-list-search:focus-within,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-select-wrap:focus-within {
  border-color: var(--theme-accent);
  outline: 0;
  box-shadow: var(--theme-focus-ring);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-filter-btn,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-bulk button,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-list-menu-btn,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-actions-cell button,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-secondary,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-shot-foot button,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-inline-form button,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-modal-secondary,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-close-detail,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-pagination button,


html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-pagination strong {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  background-image: none;
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :is(
  .dy-filter-btn,
  .dy-bulk button,
  .dy-list-menu-btn,
  .dy-actions-cell button,
  .dy-secondary,
  .dy-shot-foot button,
  .dy-inline-form button,
  .dy-modal-secondary,
  .dy-close-detail
):hover {
  border-color: rgba(49, 95, 223, .34);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-status-cell {
  color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-row[data-status="online"] .dy-status-cell {
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-pill.is-online {
  border-color: rgba(25, 118, 58, .24);
  background: var(--theme-success-soft);
  color: var(--theme-success);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-pill.is-offline,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-danger-grid button,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-modal-warning {
  border-color: rgba(185, 45, 60, .24);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-row-shot,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-row-shot img,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-shot img,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-shot-placeholder {
  border-color: var(--theme-border-strong);
  background: #05070a;
  color: #eef2fa;
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-tabs button {
  background: transparent;
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-tabs button.is-active {
  background: var(--theme-surface);
  color: var(--theme-accent-strong);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-modal-backdrop {
  background: var(--theme-backdrop);
}

@media (max-width: 900px) {
  html[data-theme="light"] body.cmsApp.dysplay-devices-page,
  html[data-theme="light"] body.cmsApp.dysplay-devices-page .shell > .main,
  html[data-theme="light"] body.cmsApp.dysplay-devices-page .main.dysplay-devices-page {
    background: var(--theme-bg) !important;
  }

  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpis-modern {
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--theme-shadow) !important;
  }

  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpis-modern .dy-kpi-status {
    border-bottom-color: var(--theme-divider) !important;
  }

  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-status-values > div {
    border-left-color: var(--theme-divider) !important;
  }

  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-kpi-location,
  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-row:not(.dy-row-head) {
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
    background-image: none !important;
  }

  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-select-wrap select,
  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-select-wrap option {
    background: transparent !important;
    color: var(--theme-text) !important;
    color-scheme: light !important;
  }

  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-player-copy strong,
  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-cell strong,
  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-cell small,
  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-last-cell {
    color: var(--theme-text) !important;
  }

  html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-actions-cell .dy-details-button {
    color: var(--theme-text) !important;
  }
}

/* Profile / account.php. */
html:not([data-theme="light"]) body.cmsApp.account-page {
  color-scheme: dark !important;
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp.account-page :where(.app, .main, .wrap) {
  background: transparent !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp.account-page :where(
  .card,
  .premiumScheduleCard,
  .referencePanel,
  .referenceTeamPanel,
  .locationScheduleCard,
  .dayCard,
  .profileInfoTile,
  .teamCard,
  .teamRow
) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

html:not([data-theme="light"]) body.cmsApp.account-page :where(
  .title,
  .premiumTitle,
  .locationScheduleName,
  .dayName,
  .teamTitle,
  .referenceTeamUser,
  .referenceHeroIdentity h1,
  .profileIdentity h1
) {
  color: var(--theme-text-strong) !important;
}

html:not([data-theme="light"]) body.cmsApp.account-page :where(
  .muted,
  .premiumCopy,
  .locationScheduleHint,
  .helperText,
  .dayMeta,
  .dayHint,
  .referenceEyebrow,
  .teamEyebrow,
  label
) {
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.account-page {
  color-scheme: light !important;
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.account-page :where(.app, .main, .wrap) {
  background: transparent !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.account-page :where(
  .card,
  .premiumScheduleCard,
  .referencePanel,
  .referenceTeamPanel,
  .locationScheduleCard,
  .dayCard,
  .profileInfoTile,
  .teamCard,
  .teamRow
) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow) !important;
}

html[data-theme="light"] body.account-page :where(
  .title,
  .premiumTitle,
  .locationScheduleName,
  .dayName,
  .teamTitle,
  .referenceTeamUser,
  .referenceHeroIdentity h1,
  .profileIdentity h1
) {
  color: var(--theme-text-strong) !important;
}

html[data-theme="light"] body.account-page :where(
  .muted,
  .premiumCopy,
  .locationScheduleHint,
  .helperText,
  .dayMeta,
  .dayHint,
  .referenceEyebrow,
  .teamEyebrow,
  label
) {
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.account-page :where(input, select, textarea) {
  background: var(--theme-control) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
  color-scheme: light !important;
}

html[data-theme="light"] body.account-page :where(
  .tag,
  .premiumStatusTag,
  .dayState,
  .profileMetaChip,
  .subscriptionChip,
  .referenceRolePill,
  .teamRole
) {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.account-page :where(
  .scheduleModePills label,
  .addSlotButton,
  .referenceMore,
  .referenceEdit,
  .ghost
) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.account-page .scheduleModePills label.active {
  background: var(--theme-accent-soft) !important;
  border-color: #b9c9f7 !important;
  color: var(--theme-accent-strong) !important;
}

/* Internal administration and setup utilities. */
html[data-theme="light"] body.cmsApp.utility-page {
  color-scheme: light;
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp.utility-page :where(header, .card, code) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.utility-page :where(h1, h2, h3, .title, strong) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.utility-page :where(p, .muted) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.utility-page :where(input, select, textarea) {
  color-scheme: light;
  background: var(--theme-control);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.cmsApp.utility-page :where(.pill, a:not(.btn)) {
  color: var(--theme-accent-strong);
  border-color: var(--theme-border-strong);
}

html[data-theme="light"] body.cmsApp.utility-page .warn {
  color: var(--theme-warning);
}

/* Authentication / login.php. */
body.auth-page .auth-theme-toggle {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 20;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--theme-border-strong);
  border-radius: 13px;
  background: rgba(9, 11, 16, .82);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
  backdrop-filter: blur(18px);
  cursor: pointer;
}

body.auth-page .auth-theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.auth-page .auth-theme-toggle .auth-theme-sun,
html[data-theme="light"] body.auth-page .auth-theme-toggle .auth-theme-moon {
  display: none;
}

html[data-theme="light"] body.auth-page .auth-theme-toggle .auth-theme-sun {
  display: block;
}

html[data-theme="light"] body.auth-page {
  color-scheme: light;
  --txt-dark: var(--theme-text-strong);
  --txt-mid: var(--theme-text-muted);
  --focus: var(--theme-accent);
  --ring: rgba(49, 95, 223, .16);
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="light"] body.auth-page::before,
html[data-theme="light"] body.auth-page::after {
  opacity: .12;
  mix-blend-mode: multiply;
}

html[data-theme="light"] body.auth-page .video-shell img {
  filter: saturate(.55) contrast(.96) brightness(1.15) blur(2px);
  opacity: .11;
}

html[data-theme="light"] body.auth-page .video-shell::before {
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(255, 255, 255, .35), rgba(244, 246, 250, .82) 58%, rgba(244, 246, 250, .98) 100%),
    linear-gradient(180deg, rgba(244, 246, 250, .72), rgba(244, 246, 250, .98));
}

html[data-theme="light"] body.auth-page .video-shell::after {
  background-image: radial-gradient(rgba(40, 54, 76, .12) .7px, transparent .8px);
  opacity: .13;
  mix-blend-mode: multiply;
}

html[data-theme="light"] body.auth-page .top-logo {
  filter: none;
}

html[data-theme="light"] body.auth-page .top-logo img {
  filter: brightness(0) saturate(100%);
  opacity: .86;
}

html[data-theme="light"] body.auth-page :where(.top-logo__claim, .pane-subtitle, .help, .login-footer, .login-options) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.auth-page :where(.auth-face) {
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(49, 95, 223, .065), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 251, 253, .98));
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow-raised), inset 0 1px 0 rgba(255, 255, 255, .94);
}

html[data-theme="light"] body.auth-page :where(.pane-title, .label) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.auth-page :where(.field) {
  color-scheme: light;
  background: var(--theme-control);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body.auth-page select.field {
  color-scheme: light;
  background-image:
    linear-gradient(45deg, transparent 50%, #65738a 50%),
    linear-gradient(135deg, #65738a 50%, transparent 50%);
  background-position: calc(100% - 17px) 22px, calc(100% - 13px) 22px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

html[data-theme="light"] body.auth-page select.field option,
html[data-theme="light"] body.auth-page select.field optgroup {
  background: #ffffff;
  color: var(--theme-text);
}

html[data-theme="light"] body.auth-page select.field option:disabled {
  color: var(--theme-placeholder);
}

html[data-theme="light"] body.auth-page select.field option:checked,
html[data-theme="light"] body.auth-page select.field option:checked:disabled {
  background: #eaf0ff linear-gradient(0deg, #eaf0ff 0%, #eaf0ff 100%);
  color: var(--theme-text);
}

html[data-theme="light"] body.auth-page .field::placeholder {
  color: var(--theme-placeholder);
}

html[data-theme="light"] body.auth-page :where(.field-icon, .pw-toggle, .back-link) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.auth-page :where(.btn-secondary, .auth-theme-toggle) {
  background: rgba(255, 255, 255, .9);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.auth-page :where(.login-options a, .help a, .login-footer a) {
  color: var(--theme-accent-strong);
}

html[data-theme="light"] body.auth-page .demo-sep {
  color: var(--theme-text-dim);
}

html[data-theme="light"] body.auth-page .demo-sep::before,
html[data-theme="light"] body.auth-page .demo-sep::after {
  background: var(--theme-divider);
}

html[data-theme="light"] body.auth-page .msg.success {
  background: var(--theme-success-soft);
  border-color: #b9ddc4;
  color: var(--theme-success);
}

/* Editor chrome. The actual canvas content is deliberately not recoloured. */
html[data-theme="light"] body:has(.editorCommandBar) {
  color-scheme: light;
  --editor-bg: var(--theme-bg);
  --editor-surface: var(--theme-surface);
  --editor-surface-raised: var(--theme-surface-raised);
  --editor-border: var(--theme-border);
  --editor-border-highlight: var(--theme-border-strong);
  --editor-text: var(--theme-text);
  --editor-muted: var(--theme-text-muted);
  --sidebar-bg: var(--theme-surface);
  --sidebar-surface: var(--theme-surface-raised);
  --sidebar-control-bg: var(--theme-control);
  --sidebar-border: var(--theme-border);
  --sidebar-text: var(--theme-text);
  --sidebar-text-muted: var(--theme-text-muted);
  --sidebar-text-subtle: var(--theme-text-dim);
  --editor-inspector-control-bg: var(--theme-control);
  --editor-inspector-control-border: var(--theme-border-strong);
  --editor-inspector-text: var(--theme-text);
  --editor-inspector-muted: var(--theme-text-muted);
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="light"] body:has(.editorCommandBar) :where(
  .editorCommandBar,
  .editor-sidebar,
  .editor-sidebar__header,
  .editor-sidebar__content,
  .editor-sidebar__page,
  .propsPanel,
  .propsHeader,
  .propsBody,
  .panel,
  .group,
  .modalCard
) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body:has(.editorCommandBar) :where(
  .field,
  .row2,
  .segmented,
  .mediaDropZone,
  .imagePreview,
  .templatesList,
  .psPanelSection,
  .duoProductCard,
  .productListTypographySection
) {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="light"] body:has(.editorCommandBar) :where(
  .propsTitle,
  .groupTitle,
  .modalTitle,
  .mediaDropTitle,
  .propsElementGlyphLabel,
  .productDuoName
) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body:has(.editorCommandBar) :where(
  .label,
  .hint,
  .subline,
  .mediaDropHint,
  .editorWorkflowMeta,
  .editorSaveState
) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body:has(.editorCommandBar) :where(
  .input,
  .headlineInput,
  input,
  select,
  textarea
) {
  background: var(--theme-control);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
  color-scheme: light;
}

html[data-theme="light"] body:has(.editorCommandBar) :where(
  .btnSecondary,
  .ghost,
  .segBtn,
  .propsIconBtn,
  .editorPanelToggle,
  .editorLeaveButton
) {
  background: var(--theme-surface);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="light"] body:has(.editorCommandBar) :where(.segBtn.isActive, .segBtn.active, .editorPanelToggle.isActive) {
  background: var(--theme-accent-soft);
  border-color: #b9c9f7;
  color: var(--theme-accent-strong);
}

html[data-theme="light"] body:has(.editorCommandBar) :where(.modalOverlay) {
  background: var(--theme-backdrop);
}

/* Semantic states keep meaning and sufficient contrast in light mode. */
html[data-theme="light"] :where(.is-green, .status-active, .status-auto, .ok, .is-success, .is-online) {
  --state-color: var(--theme-success);
}

html[data-theme="light"] :where(.is-warn, .status-watch, .warn) {
  --state-color: var(--theme-warning);
}

html[data-theme="light"] :where(.is-red, .is-danger, .danger, .is-offline) {
  --state-color: var(--theme-danger);
}

html[data-theme="light"] body.cmsApp :where(.notice, .scheduleInlineNotice, .catalog-error-notice) {
  color: var(--theme-text);
}

html[data-theme="light"] body.cmsApp :where(.notice.ok, .scheduleInlineNotice--success) {
  background: var(--theme-success-soft);
  border-color: #b9dfc5;
  color: #155f30;
}

html[data-theme="light"] body.cmsApp :where(.notice.danger, .scheduleInlineNotice--error, .catalog-error-notice) {
  background: var(--theme-danger-soft);
  border-color: #efc3c9;
  color: #9c2634;
}

@media (prefers-contrast: more) {
  html[data-theme="light"] {
    --theme-border: #c7d0dc;
    --theme-border-strong: #aebac9;
    --theme-text-muted: #445268;
  }
}

/* Canonical location dropdown for every primary overview/stats bar.
   The outer control owns the complete visual surface; the native select is a
   transparent interaction layer. This keeps Inhalte, Speisekarte, Playlisten
   and Player visually identical in both themes. */
:root {
  --cms-overview-location-height: 56px;
  --cms-overview-location-radius: 14px;
  --cms-overview-location-gap: 12px;
  --cms-overview-location-padding: 14px;
  --cms-overview-location-icon-size: 30px;
  --cms-overview-location-arrow-size: 16px;
}

body.cmsApp.screens-page .screenOverviewLocationRow,
body.cmsApp.catalog-page .catalog-overview-location-row,
body.cmsApp.dysplay-devices-page .dy-location-select-wrap,
body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: var(--cms-overview-location-height) !important;
  height: var(--cms-overview-location-height) !important;
  max-height: var(--cms-overview-location-height) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: var(--cms-overview-location-radius) !important;
  background: linear-gradient(180deg, rgba(20, 22, 28, .96), rgba(12, 14, 19, .98)) !important;
  background-image: linear-gradient(180deg, rgba(20, 22, 28, .96), rgba(12, 14, 19, .98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  color: #f0f3fa !important;
  overflow: hidden !important;
}

body.cmsApp.screens-page .screenOverviewLocationRow,
body.cmsApp.catalog-page .catalog-overview-location-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--cms-overview-location-gap) !important;
  padding: 0 var(--cms-overview-location-padding) !important;
}

body.cmsApp.dysplay-devices-page .dy-location-select-wrap {
  gap: var(--cms-overview-location-gap);
  padding: 0 38px 0 var(--cms-overview-location-padding);
}

body.cmsApp.screens-page .screenOverviewLocationRowIcon,
body.cmsApp.catalog-page .catalog-overview-location-row-icon,
body.cmsApp.dysplay-devices-page .dy-location-select-wrap .dy-kpi-round,
body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect__icon {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 var(--cms-overview-location-icon-size) !important;
  width: var(--cms-overview-location-icon-size) !important;
  min-width: var(--cms-overview-location-icon-size) !important;
  height: var(--cms-overview-location-icon-size) !important;
  min-height: var(--cms-overview-location-icon-size) !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(20, 23, 28, .96), rgba(12, 14, 19, .98)) !important;
  color: rgba(234, 239, 247, .96) !important;
}

body.cmsApp.screens-page .screenOverviewLocationRowIcon svg,
body.cmsApp.catalog-page .catalog-overview-location-row-icon svg,
body.cmsApp.dysplay-devices-page .dy-location-select-wrap .dy-kpi-round svg,
body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect__icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

body.cmsApp.screens-page .screenOverviewLocationSelect,
body.cmsApp.catalog-page .catalog-overview-location-select,
body.cmsApp.dysplay-devices-page .dy-location-select-wrap select,
body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect .scheduleSelect,
body.cmsApp.screens-page .screenOverviewLocationSelect:is(:hover, :focus, :focus-visible, :active),
body.cmsApp.catalog-page .catalog-overview-location-select:is(:hover, :focus, :focus-visible, :active),
body.cmsApp.dysplay-devices-page .dy-location-select-wrap select:is(:hover, :focus, :focus-visible, :active),
body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect .scheduleSelect:is(:hover, :focus, :focus-visible, :active) {
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: calc(var(--cms-overview-location-height) - 2px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #f0f3fa !important;
  color-scheme: dark !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 520 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

body.cmsApp.screens-page .screenOverviewLocationRowArrow,
body.cmsApp.catalog-page .catalog-overview-location-row-arrow,
body.cmsApp.dysplay-devices-page .dy-location-chevron,
body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect__arrow {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 var(--cms-overview-location-arrow-size) !important;
  width: var(--cms-overview-location-arrow-size) !important;
  height: var(--cms-overview-location-arrow-size) !important;
  color: rgba(240, 243, 250, .9) !important;
  pointer-events: none !important;
}

body.cmsApp.screens-page .screenOverviewLocationRowArrow svg,
body.cmsApp.catalog-page .catalog-overview-location-row-arrow svg,
body.cmsApp.dysplay-devices-page .dy-location-chevron svg,
body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect__arrow svg {
  width: var(--cms-overview-location-arrow-size) !important;
  height: var(--cms-overview-location-arrow-size) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

body.cmsApp.screens-page .screenOverviewLocationSelect :is(option, optgroup),
body.cmsApp.catalog-page .catalog-overview-location-select :is(option, optgroup),
body.cmsApp.dysplay-devices-page .dy-location-select-wrap select :is(option, optgroup),
body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect .scheduleSelect :is(option, optgroup) {
  background: #10131a !important;
  color: #f0f3fa !important;
}

html[data-theme="light"] body.cmsApp.screens-page .screenOverviewLocationRow,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-location-row,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-select-wrap,
html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  background-image: none !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.cmsApp.screens-page .screenOverviewLocationSelect,
html[data-theme="light"] body.cmsApp.catalog-page .catalog-overview-location-select,
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-location-select-wrap select,
html[data-theme="light"] body.cmsApp.zeitplan-page .schedulePlaylistLocationSelect .scheduleSelect {
  background: transparent !important;
  color: var(--theme-text) !important;
  color-scheme: light !important;
}

/* BLE analytics: keep the visual hierarchy and chart legible in light mode. */
html[data-theme="light"] body.cmsApp.ble-page {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.cmsApp.ble-page :where(
  .ble-chart-card,
  .ble-side-card,
  .ble-summary-card,
  .ble-preview-card,
  .ble-detail-card,
  .ble-accordion-grid > .accordion
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  box-shadow: var(--theme-shadow) !important;
}

html[data-theme="light"] body.cmsApp.ble-page :where(.ble-section-head h2, .ble-chart-summary-copy strong, .ble-bar-value, .ble-ring-center strong) {
  color: var(--theme-text) !important;
}

html[data-theme="light"] body.cmsApp.ble-page :where(.ble-section-head p, .ble-chart-summary-copy span, .ble-equal-note, .ble-ring-center span) {
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-chart-summary-item {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-kpis > .dy-kpi {
  border-color: var(--theme-divider) !important;
  background: transparent !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-kpi-status .dy-kpi-status-values > div {
  border-color: var(--theme-divider) !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-chart-frame {
  border-color: var(--theme-border) !important;
  background: radial-gradient(circle at 50% 0%, rgba(91,112,225,.09), transparent 44%), var(--theme-surface-raised) !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-flow-grid line {
  stroke: rgba(31,42,68,.12) !important;
}

html[data-theme="light"] body.cmsApp.ble-page :where(.ble-flow-grid text, .ble-flow-axis text) {
  fill: #778198 !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-flow-average line {
  stroke: #66728a !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-flow-average text {
  fill: #59657c !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-bar-time {
  color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-bar-track {
  background: rgba(49,63,91,.09) !important;
}

html[data-theme="light"] body.cmsApp.ble-page .ble-ring::after {
  background: var(--theme-surface) !important;
  box-shadow: inset 0 0 0 1px var(--theme-border) !important;
}

/* Player detail: monthly operating history. */
html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-reachability-graph {
  border-color: var(--theme-border);
  background: radial-gradient(circle at 12% 0%, rgba(79,124,255,.07), transparent 34%), var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :where(.dy-reachability-stats > div, .dy-reachability-calendar, .dy-reachability-day, .dy-reachability-runtime) {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :where(.dy-reachability-head strong, .dy-reachability-stat-copy strong, .dy-reachability-month, .dy-reachability-date strong, .dy-reachability-runtime strong) {
  color: var(--theme-text-strong);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page :where(.dy-reachability-head span, .dy-reachability-stat-copy > span, .dy-reachability-weekdays span, .dy-reachability-legend, .dy-reachability-runtime small) {
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-reachability-runtime-toggle {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-text-muted);
}

html[data-theme="light"] body.cmsApp.dysplay-devices-page .dy-reachability-runtime > span {
  border-color: var(--theme-divider);
}

/* ==================================================================
   DYSPLAY - vereinheitlichte Sub-Page Statusleiste
   (Inhalte / Speisekarte / Playlisten / Player)
   design/cms-shell-polish (2026-09-06, rev. 2026-09-06b)

   Additiver Feinschliff, bewusst hier ans Ende von cms-theme.css
   (laedt auf allen Seiten zuletzt). Nur Desktop (>=1101px), damit die
   mobilen Layouts der Einzelseiten unangetastet bleiben. Ziel:
   - Karte, Innenabstand, Hoehe, Radius auf allen 4 Seiten identisch
   - Stat-Kacheln links, buendig ab gleicher x-Position
   - Mittel-Button (Vorlagen / Aktivitaet) exakt wie devices.php
     "Aktivitaeten oeffnen": Inhaltsbreite, 56px, radius 14, dezenter
     Rahmen, Icon-Chip 30x30 r10 -- statt auf 1fr gestreckt
   - Standort-/Auswahl-Control rechts, gleiche Rechtskante, 56px / r14
   - Trenner-Linien zwischen den Bloecken entfernt
   Die :not(#\9)-Ketten sind nur Spezifitaets-Anhebung, sie matchen nichts.
   Bei Problemen: diesen Block ersatzlos entfernen.
   ================================================================== */
@media (min-width:1101px){
  body :is(.screenStatusSummaryCard,.catalog-overview-card,.scheduleOverviewCard,.dy-kpis-modern):not(#\9):not(#\9):not(#\9){
    display:flex !important; grid-template-columns:none !important;
    align-items:center !important; gap:20px !important;
    padding:16px 18px !important; min-height:94px !important; border-radius:26px !important;
  }
  /* Stat-Kacheln fuellen die linke Haelfte, 3 Kacheln mit viel Abstand;
     dadurch rutscht die rechte Gruppe (Button + Dropdown) rechtsbuendig. */
  body :is(.screenStatusSummaryValues,.catalog-overview-stats,.scheduleOverviewStats,.dy-kpi-status):not(#\9):not(#\9):not(#\9){
    flex:1 1 auto !important; width:auto !important; max-width:none !important;
    display:flex !important; align-items:center !important; gap:24px !important;
    padding:0 48px 0 0 !important; border:0 !important; grid-template-columns:none !important;
    justify-content:space-between !important;
  }
  body :is(.screenStatusMetric,.catalog-overview-stat,.scheduleOverviewStat):not(#\9):not(#\9):not(#\9){
    min-height:0 !important; padding:0 !important; gap:10px !important; width:auto !important;
  }
  /* Trenner zwischen den Bloecken raus */
  body :is(.screenStatusSummaryDivider,.catalog-overview-divider):not(#\9):not(#\9):not(#\9){ display:none !important; }
  body :is(.catalog-overview-section,.scheduleOverviewSection):not(#\9):not(#\9):not(#\9){
    border-left:0 !important; padding-left:0 !important; padding-right:0 !important;
  }
  /* Mittel-Button = screens.php "Vorlagen oeffnen" (.dy-kpi-activity-trigger /
     devices.php + Standort-Klassen jetzt am shared .dyc-kpibar-trigger /
     .dyc-location-picker aus components/kpi.css -- aus den :is()-Gruppen hier
     entfernt, sonst gewinnt dieser !important-Block gegen die Komponente). */
  body .screenOverviewTemplateRow:not(#\9):not(#\9):not(#\9){
    flex:0 0 auto !important; width:auto !important; min-width:340px !important; max-width:none !important;
    margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
    grid-template-columns:none !important; gap:12px !important; padding:0 16px !important;
    min-height:56px !important; height:56px !important; border-radius:14px !important;
    background:rgba(255,255,255,.02) !important;
    border:1px solid rgba(255,255,255,.09) !important; box-shadow:none !important;
  }
  body .screenOverviewTemplateRowIcon:not(#\9):not(#\9):not(#\9){
    width:30px !important; height:30px !important; min-height:30px !important;
    border-radius:10px !important; background:rgba(255,255,255,.024) !important;
    background-image:none !important; border:1px solid rgba(255,255,255,.09) !important;
  }
  body .schedulePlaylistSelect:not(#\9):not(#\9):not(#\9){
    min-width:220px !important; min-height:56px !important; height:56px !important; border-radius:14px !important;
  }
  /* Rechtsbuendigkeit macht jetzt die wachsende Stat-Leiste (flex:1) --
     Button + Dropdown bleiben so als Gruppe direkt nebeneinander rechts. */

  /* catalog.php: Kategorie-Picker (Mitte) auf denselben Footprint wie der
     screens.php-Button -- Position + 56px Hoehe, aber ohne Pillen-Rahmen. */
  body .catalog-overview-card:not(#\9):not(#\9):not(#\9) > .catalog-overview-section:first-of-type{
    flex:0 0 auto !important; min-width:340px !important; width:340px !important;
    min-height:56px !important; height:56px !important;
    align-content:center !important; padding:0 !important; border-left:0 !important;
  }

  /* devices.php: State-Kacheln exakt wie screens.php (Icon-Chip + Wert + Label).
     Markup hat pro Kennzahl schon .dy-mobile-metric-icon/-copy -- nur Desktop-CSS. */
  body .dy-kpi-status:not(#\9):not(#\9):not(#\9) .dy-kpi-round-total,
  body .dy-kpi-status:not(#\9):not(#\9):not(#\9) .dy-kpi-title{ display:none !important; }
  body .dy-kpi-status:not(#\9):not(#\9):not(#\9) .dy-kpi-status-body{
    flex:1 1 auto !important; display:flex !important; align-items:center !important; min-width:0 !important;
  }
  body .dy-kpi-status:not(#\9):not(#\9):not(#\9) .dy-kpi-status-values{
    flex:1 1 auto !important; display:flex !important; align-items:center !important;
    justify-content:space-between !important; gap:24px !important; grid-template-columns:none !important;
  }
  body .dy-kpi-status-values:not(#\9):not(#\9):not(#\9) > div{
    display:grid !important; grid-template-columns:40px auto !important; gap:10px !important;
    align-items:center !important; padding:0 !important;
  }
  body .dy-mobile-metric-icon:not(#\9):not(#\9):not(#\9){
    display:grid !important; place-items:center !important;
    width:40px !important; height:40px !important; min-width:40px !important;
    border-radius:13px !important; border:0.8px solid rgba(255,255,255,.14) !important;
    background:linear-gradient(rgba(20,23,28,.96),rgba(12,14,19,.98)) !important;
  }
  body .dy-mobile-metric-icon:not(#\9):not(#\9):not(#\9) svg{
    width:19px !important; height:19px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.9 !important;
  }
  body .dy-mobile-metric-icon.is-total:not(#\9):not(#\9):not(#\9){ color:#66a8ff !important; border-color:rgba(84,158,255,.72) !important; }
  body .dy-mobile-metric-icon.is-online:not(#\9):not(#\9):not(#\9){ color:#63ef88 !important; border-color:rgba(67,240,120,.64) !important; }
  body .dy-mobile-metric-icon.is-offline:not(#\9):not(#\9):not(#\9){ color:#f16b75 !important; border-color:rgba(241,107,117,.6) !important; }
  body .dy-mobile-metric-copy:not(#\9):not(#\9):not(#\9) strong{
    font-size:24px !important; font-weight:700 !important; line-height:.96 !important; color:#f6f8fc !important;
    letter-spacing:-.06em !important; display:inline-flex !important; align-items:center !important; gap:5px !important;
  }
  body .dy-mobile-metric-copy:not(#\9):not(#\9):not(#\9) strong i{
    order:1 !important; width:8px !important; height:8px !important; border-radius:999px !important;
  }
  body .dy-mobile-metric-copy:not(#\9):not(#\9):not(#\9) em{
    font-size:11px !important; font-weight:380 !important; color:rgba(198,204,219,.72) !important;
    margin-top:2px !important; font-style:normal !important; text-transform:none !important; letter-spacing:-.02em !important; display:block !important;
  }
}

/* ---- Ab >=1500px: Stat-Icons pixelgenau ueber alle 4 Seiten ----
   Stat-Leiste waechst und fuellt die Breite (3 gleiche Spalten, kein
   Mittel-Loch). Damit die Spaltenbreite auf allen 4 Seiten gleich ist,
   reserviert die rechte Gruppe ueberall dieselbe Breite:
   Mittel-Element 340 + Dropdown 340 + Luecken; auf Playlisten haelt die
   Select-Section per min-width dieselbe Gesamtbreite. Ergebnis: Icon 1/2/3
   liegen auf Inhalte/Speisekarte/Playlisten/Player exakt uebereinander. */
@media (min-width:1500px){
  body :is(.screenStatusSummaryValues,.catalog-overview-stats,.scheduleOverviewStats):not(#\9):not(#\9):not(#\9){
    flex:1 1 auto !important; width:auto !important; min-width:0 !important; max-width:none !important;
    display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important; align-items:center !important; padding:0 !important;
  }
  body .dy-kpi-status:not(#\9):not(#\9):not(#\9) .dy-kpi-status-values{
    flex:1 1 auto !important; width:auto !important; min-width:0 !important;
    display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important; align-items:center !important; justify-content:stretch !important;
  }
  body .dy-kpi-status:not(#\9):not(#\9):not(#\9){ flex:1 1 auto !important; width:auto !important; min-width:0 !important; padding:0 !important; }
  body .dy-kpi-status:not(#\9):not(#\9):not(#\9) .dy-kpi-status-body{ display:contents !important; }
  body :is(.screenStatusMetric,.catalog-overview-stat,.scheduleOverviewStat):not(#\9):not(#\9):not(#\9){
    justify-self:start !important; min-width:0 !important; height:42px !important;
    align-items:center !important; border:0 !important; margin:0 !important;
  }
  body .dy-kpi-status-values:not(#\9):not(#\9):not(#\9) > div{
    justify-self:start !important; min-width:0 !important; height:42px !important;
    align-items:center !important; border:0 !important; margin:0 !important;
  }

  /* rechte Gruppe: feste Breite + KEIN margin, damit die Stat-Spalten
     auf allen 4 Seiten exakt gleich breit sind (screens hatte margin-left:18) */
  body .screenOverviewTemplateRow:not(#\9):not(#\9):not(#\9):not(#\9){ flex:0 0 auto !important; margin:0 !important; }
  body .catalog-overview-card:not(#\9):not(#\9):not(#\9) > .catalog-overview-section:not(#\9){ flex:0 0 auto !important; margin:0 !important; }
  body .scheduleOverviewCard:not(#\9):not(#\9):not(#\9) > .scheduleOverviewSection:not(#\9){
    flex:0 0 auto !important; min-width:700px !important; margin:0 !important; justify-content:flex-end !important;
  }

  /* Stat-Icons: einheitliche Groesse/Form/Hintergrund auf allen 4 Seiten.
     Viele :not(#\9) = hohe Spezifitaet, damit die tief verschachtelten
     Einzelseiten-Regeln (screens_modern/catalog/schedule) nicht gewinnen. */
  body :is(.screenStatusMetricIcon,.catalog-overview-stat-icon,.scheduleOverviewStatIcon,.dy-mobile-metric-icon):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9){
    width:40px !important; height:40px !important; min-width:40px !important; flex:0 0 auto !important;
    display:grid !important; place-items:center !important;
    border-radius:13px !important; border-width:1px !important; border-style:solid !important;
    background:linear-gradient(rgba(20,23,28,.96),rgba(12,14,19,.98)) !important;
  }
  /* kein margin-top-Versatz aus den Einzelseiten-CSS -> Icon+Copy exakt zentriert */
  body :is(.screenStatusMetricIcon,.catalog-overview-stat-icon,.scheduleOverviewStatIcon,.dy-mobile-metric-icon,.screenStatusMetricCopy,.catalog-overview-stat-copy,.scheduleOverviewStatCopy,.dy-mobile-metric-copy):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9){
    margin:0 !important; align-self:center !important;
  }
  body :is(.screenStatusMetricIcon,.catalog-overview-stat-icon,.scheduleOverviewStatIcon,.dy-mobile-metric-icon):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9) svg{
    width:19px !important; height:19px !important; stroke-width:1.9 !important; fill:none !important;
    display:block !important; margin:0 !important; position:static !important;
  }
  /* Wert einheitlich */
  body :is(.screenStatusMetric,.catalog-overview-stat,.scheduleOverviewStat):not(#\9):not(#\9):not(#\9) strong{
    font-size:24px !important; font-weight:700 !important; line-height:.96 !important; color:#f6f8fc !important;
    letter-spacing:-.06em !important; display:inline-flex !important; align-items:center !important; gap:5px !important;
  }
  /* Label einheitlich -- NUR das Label-Element treffen, nicht den Icon-<span> */
  body .screenStatusMetricCopy:not(#\9):not(#\9):not(#\9) em,
  body .scheduleOverviewStatCopy:not(#\9):not(#\9):not(#\9) em,
  body .dy-mobile-metric-copy:not(#\9):not(#\9):not(#\9) em,
  body .catalog-overview-stat-copy:not(#\9):not(#\9):not(#\9) > span{
    font-size:11px !important; font-weight:380 !important; color:rgba(198,204,219,.72) !important;
    margin-top:2px !important; font-style:normal !important; text-transform:none !important;
    letter-spacing:-.02em !important; display:block !important; white-space:nowrap !important;
  }
}

/* ---- devices.php: Standort-Zelle -- Ort + Unter-Ort stapeln statt
   zusammenkleben ("RaesfeldEingangsbereich"). Wie die Status-Zelle. ---- */
body .dy-location-cell:not(#\9):not(#\9) > span{ display:block !important; min-width:0 !important; }
body .dy-location-cell:not(#\9):not(#\9) strong{
  display:block !important; line-height:1.25 !important;
}
body .dy-location-cell:not(#\9):not(#\9) small{
  display:block !important; margin-top:1px !important; line-height:1.2 !important;
  color:var(--theme-text-muted, rgba(198,204,219,.72)) !important;
}

/* ---- Mittel-Button (Vorlagen / Aktivitaeten oeffnen) optisch wie das
   Standort-Dropdown: linksbuendiger Inhalt, gleicher Verlaufs-Hintergrund,
   Chevron rechts am Rand. ---- */
@media (min-width:1101px){
  body .screenOverviewTemplateRow:not(#\9):not(#\9):not(#\9){
    justify-content:flex-start !important; padding:0 14px !important;
    background:linear-gradient(rgba(20,22,28,.96),rgba(12,14,19,.98)) !important;
  }
  /* screens: Chevron als Pseudo-Element (nach unten, wie das Dropdown) */
  body .screenOverviewTemplateRow:not(#\9):not(#\9):not(#\9)::after{
    content:"" !important;
    width:6px !important; height:6px !important; margin-left:auto !important; margin-right:5px !important;
    border:solid rgba(226,233,248,.5) !important; border-width:0 1.6px 1.6px 0 !important;
    transform:translateY(-1px) rotate(45deg) !important; flex:0 0 auto !important; opacity:.9 !important;
  }
}

/* ==================================================================
   Radius-Skala fuer Inhalte / Speisekarte / Playlisten / Player
   sm=10 (Thumbs, kleine Buttons) | md=14 (Controls, kleine Panels)
   lg=20 (Karten, Panels, Tabellen) | Pills bleiben 999.
   Gezielt auf die Seiten-Klassen, nicht global .btn/.panel.
   ================================================================== */
/* -- sm = 10px -- */
body :is(.preview,.dy-row-shot,.hero-mini-pill,.catalog-category-input-icon,
  .menuAction,.dy-filter-btn,.dy-details-button,.dy-list-menu-btn,.cardMenuTrigger,
  .btn.ghost,.hero-add-category-button,.cat.cat-neutral):not(#\9):not(#\9){
  border-radius:10px !important;
}
/* -- md = 14px -- */
body :is(.cardMenuPanel,.dy-list-search,.dy-list-sort-btn,.catalog-list-search,
  .catalog-toolbar-button,.catalog-list-sort,.btn.screenAddBtn,.dy-add-btn,.btn.outline,
  .btn.cmsPrimaryAction,.scheduleBtn,.schedulePlaylistEmptySelect,.scheduleOverviewSelectRow,
  .catalog-category-submit,.variant-item,.catalog-add-variant-button,.dy-list-toolbar-btn,
  .scheduleScheduleShell,.schedulePlaylistEmptyState__icon):not(#\9):not(#\9){
  border-radius:14px !important;
}
/* -- lg = 20px -- */
body :is(.screenStatusSummaryCard,.catalog-overview-card,.scheduleOverviewCard,.dy-kpis-modern,
  .dy-list-card,.panel.product-list-panel,.catalog-workbench .table,.section.contentWorkbench,
  .screenGrid > .card,.grid > .card,#screenGrid > .card,.schedulePanel,.panel.filters):not(#\9):not(#\9){
  border-radius:20px !important;
}
/* -- Stat-Icons in die md-Familie ziehen (13 -> 14) -- */
body :is(.screenStatusMetricIcon,.catalog-overview-stat-icon,.scheduleOverviewStatIcon,.dy-mobile-metric-icon):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9){
  border-radius:14px !important;
}
/* -- klassenlose Toolbar-/Pagination-Buttons vereinheitlichen (sm=10) -- */
body :is(.dy-list-head,.dy-list-toolbar,.dy-pager,.catalog-list-tools,.scheduleToolbar) button:not(#\9):not(#\9){
  border-radius:10px !important;
}

/* ==================================================================
   Icon-Feinschliff -- einheitliche Icon-Chips ueber die Sub-Pages
   (Feinschliff 2026-09-06c). Bei Problemen: diesen Block entfernen.
   ================================================================== */
@media (min-width:1101px){
  /* #1 screens: Vorlagen-Button-Icon exakt wie das Standort-Dropdown-Icon
     (weiss statt gruen, dunkler Verlaufs-Hintergrund). Gilt auch fuer den
     devices-Aktivitaeten-Button, damit alles gleich aussieht. */
  body .screenOverviewTemplateRowIcon:not(#\9):not(#\9):not(#\9):not(#\9){
    background:linear-gradient(rgba(20,23,28,.96),rgba(12,14,19,.98)) !important;
    background-color:rgba(0,0,0,0) !important;
    border:.8px solid rgba(255,255,255,.1) !important;
    color:rgba(234,239,247,.96) !important;
  }
  body .screenOverviewTemplateRowIcon:not(#\9):not(#\9):not(#\9):not(#\9) svg{
    stroke:rgba(234,239,247,.96) !important; stroke-width:1.8 !important; fill:none !important;
  }

  /* #2a zeitplan: Playlist-Icon stylen (30x30 Chip, 14px Innenabstand links,
     weiss) -- Standort-Icon jetzt am shared .dyc-location-picker__icon. */
  body.zeitplan-page .schedulePlaylistSelect__icon:not(#\9):not(#\9):not(#\9):not(#\9){
    flex:0 0 30px !important; width:30px !important; height:30px !important;
    min-width:30px !important; min-height:30px !important;
    margin:0 0 0 14px !important; padding:0 !important;
    border-radius:10px !important; border:.8px solid rgba(255,255,255,.1) !important;
    background:linear-gradient(rgba(20,23,28,.96),rgba(12,14,19,.98)) !important;
    color:rgba(234,239,247,.96) !important;
    display:inline-grid !important; place-items:center !important;
  }
  body.zeitplan-page .schedulePlaylistSelect__icon:not(#\9):not(#\9):not(#\9):not(#\9) svg{
    width:15px !important; height:15px !important;
    stroke:rgba(234,239,247,.96) !important; stroke-width:1.8 !important; fill:none !important;
  }
  /* Select hat jetzt vorne ein Icon -> linken Textabstand kuerzen */
  body.zeitplan-page .schedulePlaylistSelect:not(#\9):not(#\9):not(#\9) .scheduleSelect{
    padding-left:12px !important;
  }

  /* #2c zeitplan: kein Fokus-Kontur am Playlist-Select -- exakt wie beim
     Standort-Select (schedule.css legt dort einen weissen Ring an). */
  body.zeitplan-page .schedulePlaylistSelect .scheduleSelect:is(:hover,:focus,:focus-visible,:active):not(#\9):not(#\9){
    border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
  }
}

/* ==================================================================
   White-Mode: Light-Overrides fuer den Feinschliff-Block oben
   (2026-09-06d). Alle dort fest kodierten Dark-Farben bekommen hier
   ein Light-Pendant. html[data-theme="light"] gibt die noetige
   Spezifitaet gegenueber den Dark-Regeln. Bei Problemen entfernen.
   ================================================================== */
@media (min-width:1101px){
  /* -- Stat-Icon-Chips: im Light-Mode transparent (farbiger Rand definiert sie) -- */
  html[data-theme="light"] body :is(.screenStatusMetricIcon,.catalog-overview-stat-icon,.scheduleOverviewStatIcon,.dy-mobile-metric-icon):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9):not(#\9){
    background:transparent !important; background-image:none !important;
  }
  html[data-theme="light"] body .dy-mobile-metric-icon.is-total:not(#\9):not(#\9):not(#\9){ color:#315fdf !important; border-color:rgba(49,95,223,.34) !important; }
  html[data-theme="light"] body .dy-mobile-metric-icon.is-online:not(#\9):not(#\9):not(#\9){ color:#19763a !important; border-color:rgba(25,118,58,.32) !important; }
  html[data-theme="light"] body .dy-mobile-metric-icon.is-offline:not(#\9):not(#\9):not(#\9){ color:#b92d3c !important; border-color:rgba(185,45,60,.32) !important; }

  /* -- Stat-Wert + Label -- */
  html[data-theme="light"] body :is(.screenStatusMetric,.catalog-overview-stat,.scheduleOverviewStat):not(#\9):not(#\9):not(#\9) strong,
  html[data-theme="light"] body .dy-mobile-metric-copy:not(#\9):not(#\9):not(#\9) strong{
    color:var(--theme-text,#182235) !important;
  }
  html[data-theme="light"] body .screenStatusMetricCopy:not(#\9):not(#\9):not(#\9) em,
  html[data-theme="light"] body .scheduleOverviewStatCopy:not(#\9):not(#\9):not(#\9) em,
  html[data-theme="light"] body .dy-mobile-metric-copy:not(#\9):not(#\9):not(#\9) em,
  html[data-theme="light"] body .catalog-overview-stat-copy:not(#\9):not(#\9):not(#\9) > span{
    color:var(--theme-text-muted,#58667b) !important;
  }

  /* -- Mittel-Button: weiss mit Rand, wie das Standort-Dropdown im Light-Mode -- */
  html[data-theme="light"] body .screenOverviewTemplateRow:not(#\9):not(#\9):not(#\9){
    background:var(--theme-control,#fff) !important; background-image:none !important;
    border-color:var(--theme-border-strong,#cbd4e1) !important;
    color:var(--theme-text,#182235) !important;
  }
  /* -- alle Icon-Chips der Bedienelemente: getoenter Light-Chip + Akzent-Icon -- */
  html[data-theme="light"] body .screenOverviewTemplateRowIcon:not(#\9):not(#\9):not(#\9):not(#\9),
  html[data-theme="light"] body.zeitplan-page .schedulePlaylistSelect__icon:not(#\9):not(#\9):not(#\9):not(#\9){
    background:var(--theme-accent-soft,#edf2ff) !important; background-image:none !important;
    border-color:rgba(49,95,223,.22) !important;
    color:var(--theme-accent,#315fdf) !important;
  }
  html[data-theme="light"] body .screenOverviewTemplateRowIcon:not(#\9):not(#\9):not(#\9):not(#\9) svg,
  html[data-theme="light"] body.zeitplan-page .schedulePlaylistSelect__icon:not(#\9):not(#\9):not(#\9):not(#\9) svg{
    stroke:var(--theme-accent,#315fdf) !important;
  }
  /* -- Chevron am Mittel-Button -- */
  html[data-theme="light"] body .screenOverviewTemplateRow:not(#\9):not(#\9):not(#\9)::after{
    border-color:var(--theme-text-muted,#58667b) !important;
  }
}

/* .dyc-kpibar-trigger / .dyc-location-picker (components/kpi.css) sit in the
   layered @layer components stack, so shell.css's unlayered
   `body.cmsApp button/select { font-size:inherit }` reset always beats their
   14px regardless of specificity — the button/select inherit whatever
   ambient font-size the page happens to have instead. BLE dodges this only
   by accident (.bleWrap sets font-size:14px on an ancestor these elements
   inherit through); Speisekarte/Inhalte/Playlisten/Player never set an
   equivalent, so they all render at the 16px body default. Fix once, here,
   unlayered, for every page instead of patching each page's own sheet. */
body.cmsApp .dyc-kpibar-trigger,
body.cmsApp .dyc-location-picker__frame select {
  font-size: 14px;
}

/* ---- White-Mode: bestehende CMS-Chrome-Luecken auf den 5 Unterseiten ----
   (Formfelder + dunkle Icon-Buttons, die im Light-Mode kein Pendant hatten)
   -- transition:none, weil die Seiten-CSS eine background-Transition an den
   Feldern hat, die beim Theme-Wechsel die Dark-Farbe "einfriert". -- */
html[data-theme="light"] body.cmsApp:is(.dashboard-page,.screens-page,.catalog-page,.zeitplan-page,.dysplay-devices-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select):not(#\9):not(#\9):not(#\9){
  -webkit-appearance:none !important; appearance:none !important;
  transition:none !important; color-scheme:light !important;
  background:var(--theme-control,#fff) !important; background-image:none !important;
  color:var(--theme-text,#182235) !important;
  border-color:var(--theme-border,#dfe5ee) !important;
}
html[data-theme="light"] body.cmsApp :is(.catalog-list-search,.catalog-list-sort,.catalog-list-sort-wrap,.vprice,.price-input,.catalog-import-drop,.catalog-import-file,.catalog-list-filter):not(#\9):not(#\9):not(#\9),
html[data-theme="light"] body.cmsApp .catalog-list-search :is(input,label):not(#\9):not(#\9):not(#\9){
  transition:none !important; color-scheme:light !important;
  background:var(--theme-control,#fff) !important; background-image:none !important;
  color:var(--theme-text,#182235) !important;
  border-color:var(--theme-border,#dfe5ee) !important;
}
html[data-theme="light"] body.cmsApp :is(.rowIconButton,.rowOpenButton,.contentPagerButton,.activityFooterLink,.subTabCount):not(#\9):not(#\9){
  background:var(--theme-surface-strong,#f1f4f8) !important;
  color:var(--theme-text,#182235) !important;
  border-color:var(--theme-border,#dfe5ee) !important;
}

/* ---- White-Mode: Topbar-Elemente ohne Light-Pendant ---- */
html[data-theme="light"] body.cmsApp .topBar .searchForm:not(#\9):not(#\9){
  background:var(--theme-control,#fff) !important; background-image:none !important;
  border-color:var(--theme-border,#dfe5ee) !important;
}
html[data-theme="light"] body.cmsApp .topBar :is(.avatarBubble,.cmsUserProfile):not(#\9):not(#\9){
  background:var(--theme-surface-strong,#f1f4f8) !important; background-image:none !important;
  color:var(--theme-text,#182235) !important;
  border-color:rgba(49,95,223,.32) !important;
}
/* devices: "N Ergebnisse"-Zaehler im Listenkopf (nur getoente Zaehler-Chips) */
html[data-theme="light"] body.cmsApp :is(.dy-list-count,.dy-results-count,.dy-list-head-count,.dy-list-total):not(#\9):not(#\9){
  background:var(--theme-surface-strong,#f1f4f8) !important;
  color:var(--theme-text-muted,#58667b) !important;
}

/* ---- Catalog toolbar: search + sort opt out of the global dark control fill
   (lines ~94-107 above) so they can sit seamless on the list panel. These
   need !important only to counter that blanket !important reset. ---- */
html:not([data-theme="light"]) body.catalog-page .catalog-list-search input,
html:not([data-theme="light"]) body.catalog-page .catalog-list-search input:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
html:not([data-theme="light"]) body.catalog-page .catalog-list-filter select.catalog-list-sort,
html:not([data-theme="light"]) body.catalog-page .catalog-list-filter select.catalog-list-sort:focus {
  background: linear-gradient(180deg, rgba(6, 7, 10, .99), rgba(3, 4, 6, .99));
  border-color: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 24px rgba(0, 0, 0, .16);
}