/* Optional Control Center appearance. Public pages do not load this stylesheet.
 * Keep navigation dark, product media unchanged, and the existing dark theme intact.
 * Module-specific light rules below use semantic tokens rather than new palettes.
 */
/* Disabled device actions retain a quiet, readable light surface. */
@media screen {
  html[data-lobi-theme="light"] .control-center-ui .device-action-slots .icon-button:is(:disabled, .is-disabled, [aria-disabled="true"]) {
    background: var(--ui-surface-2);
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
    opacity: 1;
    box-shadow: none;
  }
  html[data-lobi-theme="light"] .control-center-ui .device-action-slots .icon-button:is(:disabled, .is-disabled, [aria-disabled="true"]) svg {
    color: inherit;
    opacity: 0.65;
  }
}
:is(.control-center-ui, .layout-editor-ui) .portal-theme-switch { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; padding: 0 2px; color: #91a3b1; }
:is(.control-center-ui, .layout-editor-ui) .portal-theme-switch__icon { width: 13px; height: 13px; flex: 0 0 13px; }
/* Keep the touch target generous while the visible track stays small. */
html :is(.control-center-ui, .layout-editor-ui) :is(.topbar, .sidebar) .portal-theme-switch button[data-lobi-theme-toggle] { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; box-shadow: none; transform: none; cursor: pointer; }
:is(.control-center-ui, .layout-editor-ui) .portal-theme-switch__track { display: block; position: relative; width: 36px; height: 20px; border: 1px solid #617481; border-radius: 999px; background: #1b2e3b; transition: background 160ms ease; }
:is(.control-center-ui, .layout-editor-ui) .portal-theme-switch__thumb { display: block; position: absolute; width: 14px; height: 14px; top: 2px; left: 2px; border-radius: 50%; background: #b3c0c9; transition: transform 160ms ease, background 160ms ease; }
:is(.control-center-ui, .layout-editor-ui) .portal-theme-switch button[aria-checked="true"] .portal-theme-switch__thumb { transform: translateX(16px); background: #f3eedf; }
:is(.control-center-ui, .layout-editor-ui) .portal-theme-switch button:hover .portal-theme-switch__track { border-color: #a4b5bf; }
:is(.control-center-ui, .layout-editor-ui) .portal-theme-switch button:focus-visible { outline: 2px solid #a4b5bf; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .portal-theme-switch__track, .portal-theme-switch__thumb { transition: none; } }
:is(.control-center-ui, .layout-editor-ui) .portal-theme-switch--mobile { display: none; }
@media (max-width: 1100px), (max-height: 500px) and (max-width: 1023px) {
  :is(.control-center-ui, .layout-editor-ui) .portal-theme-switch--desktop { display: none; }
  :is(.control-center-ui, .layout-editor-ui) .portal-theme-switch--mobile { display: inline-flex; align-self: flex-start; margin: 8px 0 16px; }
}

/* Printed documents keep their existing print styles and paper colours. */
@media screen {
html[data-lobi-theme="dark"] :is(.control-center-ui, .layout-editor-ui) .media-library label { color: #e6edf3; }
html[data-lobi-theme="light"] { color-scheme: light; background: #f3eedf; }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) {
  color-scheme: light;
  --ui-bg-canvas: #f3eedf;
  --ui-bg-shell: #eee7d7;
  --ui-surface-1: #fffcf5;
  --ui-surface-2: #eee7d7;
  --ui-surface-3: #e5dcc8;
  --ui-input: #fffef9;
  --ui-border: #d7ceba;
  --ui-border-subtle: #e4dccb;
  --ui-text: #203244;
  --ui-text-secondary: #43515d;
  --ui-text-muted: #625f55;
  --ui-text-disabled: #787267;
  --ui-brand: #076b7d;
  --ui-brand-strong: #055567;
  --ui-brand-soft: #e0efed;
  --ui-success: #226341;
  --ui-warning: #855008;
  --ui-danger: #a3333e;
  --ui-info: #275fa0;
  --ui-on-brand: #ffffff;
  --ui-brand-contrast: #ffffff;
  --ui-success-soft: #e6f0e5;
  --ui-warning-soft: #fff0cd;
  --ui-danger-soft: #fbe6e5;
  --ui-info-soft: #e6eef8;
  --ui-shadow-panel: 0 3px 14px rgb(64 49 23 / 5%);
  --ui-shadow-dialog: 0 24px 64px rgb(37 30 17 / 22%);
  --ui-focus-ring: 0 0 0 3px rgb(7 107 125 / 24%);
  /* Remaining legacy families which are not aliased in the core token file. */
  --cc-black: var(--ui-bg-shell);
  --cc-strip: var(--ui-surface-2);
  --lobi-bg: var(--ui-bg-canvas);
  --lobi-panel: var(--ui-surface-1);
  --lobi-panel-soft: var(--ui-surface-2);
  --lobi-panel-strong: var(--ui-surface-1);
  --lobi-bg-2: var(--ui-bg-shell);
  --lobi-primary: var(--ui-brand-strong);
  --lobi-accent: var(--ui-brand);
  --lobi-online: var(--ui-success);
  --lobi-warn: var(--ui-warning);
  --lobi-error: var(--ui-danger);
  --lobi-text: var(--ui-text);
  --lobi-muted: var(--ui-text-muted);
  --lobi-border: var(--ui-border);
  --lobi-border-hot: var(--ui-brand);
  --border-strong: var(--ui-brand);
  --border-active: var(--ui-brand);
  --bg-app: var(--ui-bg-canvas);
  --bg-shell: var(--ui-bg-shell);
  --bg-card: var(--ui-surface-1);
  --bg-card-soft: var(--ui-surface-2);
  --bg-card-hover: var(--ui-surface-2);
  --bg-input: var(--ui-input);
  --bg-main: var(--ui-bg-canvas);
  --bg-deep: var(--ui-bg-canvas);
  --bg-panel: var(--ui-surface-1);
  --bg-panel-soft: var(--ui-surface-2);
  --text-main: var(--ui-text);
  --text-muted: var(--ui-text-muted);
  --text-soft: var(--ui-text-muted);
  --shadow: var(--ui-shadow-panel);
  --cash-ink: var(--ui-text);
  --cash-muted: var(--ui-text-muted);
  --cash-line: var(--ui-border);
  --cash-surface: var(--ui-surface-1);
  --cash-soft: var(--ui-surface-2);
  --cash-green: var(--ui-brand);
  --cash-green-dark: var(--ui-brand-strong);
  --cash-green-soft: var(--ui-brand-soft);
  --cash-blue: var(--ui-brand);
  --cash-warn: var(--ui-warning);
  --cash-warn-soft: var(--ui-warning-soft);
  --cash-danger: var(--ui-danger);
  --cash-danger-soft: var(--ui-danger-soft);
  --cash-shadow: var(--ui-shadow-panel);
  background: var(--ui-bg-canvas);
  color: var(--ui-text);
}

/* Aliases are recomputed here: inherited aliases otherwise retain the light
 * values already resolved on body, even after overriding --ui-* in the nav. */
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) :is(.topbar, .sidebar) {
  color-scheme: dark;
  --ui-bg-canvas: #08131f;
  --ui-bg-shell: #07111b;
  --ui-surface-1: #102030;
  --ui-surface-2: #15283a;
  --ui-surface-3: #1b3144;
  --ui-input: #0c1926;
  --ui-border: #294052;
  --ui-border-subtle: #1b3040;
  --ui-text: #f5f8fb;
  --ui-text-secondary: #c4d0db;
  --ui-text-muted: #91a5b6;
  --ui-text-disabled: #64798b;
  --ui-brand: #59d0e4;
  --ui-brand-strong: #25a8c4;
  --ui-brand-soft: rgb(89 208 228 / 12%);
  --ui-success: #48df8b;
  --ui-warning: #ffb45e;
  --ui-danger: #ff6b72;
  --ui-info: #6caeff;
  --cc-black: var(--ui-bg-shell);
  --cc-page: var(--ui-bg-canvas);
  --cc-shell: var(--ui-bg-shell);
  --cc-nav: var(--ui-bg-shell);
  --cc-strip: var(--ui-surface-2);
  --cc-panel: var(--ui-surface-1);
  --cc-panel-2: var(--ui-surface-2);
  --cc-panel-3: var(--ui-surface-3);
  --cc-row: var(--ui-surface-1);
  --cc-row-hover: var(--ui-surface-2);
  --cc-input: var(--ui-input);
  --cc-line: var(--ui-border);
  --cc-line-soft: var(--ui-border-subtle);
  --cc-text: var(--ui-text);
  --cc-text-2: var(--ui-text-secondary);
  --cc-muted: var(--ui-text-muted);
  --cc-dim: var(--ui-text-disabled);
  --cc-accent: var(--ui-brand);
  --cc-accent-2: var(--ui-brand-strong);
  --cc-accent-soft: var(--ui-brand-soft);
  --cc-green: var(--ui-success);
  --cc-orange: var(--ui-warning);
  --cc-red: var(--ui-danger);
  --bg: var(--ui-bg-canvas);
  --panel: var(--ui-surface-1);
  --text: var(--ui-text);
  --muted: var(--ui-text-muted);
  --line: var(--ui-border);
  --accent: var(--ui-brand);
  --accent-strong: var(--ui-brand-strong);
  --accent-soft: var(--ui-brand-soft);
  --border-soft: var(--ui-border);
  --border-strong: var(--ui-brand);
  --bg-app: var(--ui-bg-canvas);
  --bg-shell: var(--ui-bg-shell);
  --bg-card: var(--ui-surface-1);
  --bg-card-soft: var(--ui-surface-2);
  --bg-input: var(--ui-input);
  --text-main: var(--ui-text);
  --text-muted: var(--ui-text-muted);
  --text-soft: var(--ui-text-muted);
  background: var(--ui-bg-shell);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .content { background: var(--ui-bg-canvas); color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.page-head, .dashboard-hero) h1 { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.page-head, .dashboard-hero) .muted { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.page-head, .dashboard-hero) .eyebrow { color: var(--ui-brand); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .admin-tenant-bar { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); border-left-color: var(--ui-brand); box-shadow: var(--ui-shadow-panel); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) :is(.admin-tenant-label, .admin-tenant-identity small) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .admin-tenant-role { color: var(--ui-brand); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .content .customer-picker-trigger { color: var(--ui-text); background: var(--ui-input); border-color: var(--ui-border); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .content .customer-picker-trigger small { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .content .customer-picker-trigger-copy strong { color: var(--ui-text); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .customer-picker-panel { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .customer-picker-panel button.customer-picker-option { background: var(--ui-surface-1) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; box-shadow: none !important; }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .customer-picker-panel button.customer-picker-option:is(:hover, :focus-visible, .is-selected) { background: var(--ui-brand-soft) !important; color: var(--ui-text) !important; border-color: var(--ui-brand) !important; }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .customer-picker-panel button.customer-picker-option:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: -2px; }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .customer-picker-option strong { color: var(--ui-text); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .customer-picker-option small { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .customer-picker-panel button.customer-picker-close { background: var(--ui-input) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; box-shadow: none !important; }
html[data-lobi-theme="light"] .control-center-ui .content .eyebrow { color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content .page-head { background: var(--ui-surface-1); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content .btn:not(.secondary):not(.danger):not(.icon-button),
html[data-lobi-theme="light"] .control-center-ui .content button:not(.secondary):not(.danger):not(.icon-button):not(.status-switch):not(.table-sort-button):not(.media-delete-icon):not(.presence-summary-button) {
  background: var(--ui-brand); border-color: var(--ui-brand-strong); color: var(--ui-on-brand); box-shadow: none;
}
html[data-lobi-theme="light"] .control-center-ui .content .btn:not(.secondary):not(.danger):not(.icon-button):hover,
html[data-lobi-theme="light"] .control-center-ui .content button:not(.secondary):not(.danger):not(.icon-button):not(.status-switch):not(.table-sort-button):not(.media-delete-icon):not(.presence-summary-button):hover {
  background: var(--ui-brand-strong); color: var(--ui-on-brand);
}
html[data-lobi-theme="light"] .control-center-ui .content :is(.panel, .card, .control-card, .entity-card, .display-section, .management-toolbar, .layout-scope-tabs, .media-tabs, .order-card, .groups-panel, .groups-form, .groups-actions-panel) {
  border-color: var(--ui-border);
  background: var(--ui-surface-1);
  color: var(--ui-text-secondary);
  box-shadow: var(--ui-shadow-panel);
}
html[data-lobi-theme="light"] .control-center-ui .content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]), select, textarea) {
  color-scheme: light;
  border-color: var(--ui-border);
  background-color: var(--ui-input);
  color: var(--ui-text);
}
html[data-lobi-theme="light"] .control-center-ui .content :is(input, textarea)::placeholder { color: var(--ui-text-muted); opacity: 1; }
html[data-lobi-theme="light"] .control-center-ui .content :is(input, select, textarea):focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
html[data-lobi-theme="light"] .control-center-ui .content fieldset { border-color: var(--ui-border); background: var(--ui-surface-1); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.table, table) { color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.table, table) :is(th, td) { border-color: var(--ui-border-subtle); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.table, table) thead th { background: var(--ui-surface-2); color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.table, table) tbody tr { background: var(--ui-surface-1); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.table, table) tbody tr:hover { background: var(--ui-surface-2); }

/* Match the shared default actions; component-specific states follow below. */
html[data-lobi-theme="light"] .control-center-ui .content :where(button:not(.status-switch):not(.table-sort-button):not(.media-delete-icon):not(.presence-summary-button), .btn) {
  color: var(--ui-on-brand);
}
html[data-lobi-theme="light"] .control-center-ui .content :where(button:not(.status-switch):not(.table-sort-button):not(.media-delete-icon):not(.presence-summary-button), .btn):hover {
  background: var(--ui-brand-strong);
  color: var(--ui-on-brand);
}
html[data-lobi-theme="light"] .control-center-ui .content :is(button, .btn).secondary {
  border-color: var(--ui-border);
  background: var(--ui-input);
  color: var(--ui-text);
  box-shadow: none;
}
html[data-lobi-theme="light"] .control-center-ui .content :is(button, .btn).secondary:hover { background: var(--ui-surface-2); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content :is(button, .btn).danger {
  border-color: var(--ui-danger);
  background: var(--ui-danger);
  color: #ffffff;
}
html[data-lobi-theme="light"] .control-center-ui :is(.status.ok, .status.online, .badge.success, .notice.success, .alert-success) { border-color: var(--ui-success); background: var(--ui-success-soft); color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui :is(.status.warning, .badge.warning, .notice.warning, .alert-warning) { border-color: var(--ui-warning); background: var(--ui-warning-soft); color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui .status.off { border-color: var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui :is(.status.error, .status.danger, .notice.error, .alert-danger) { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); }

/* Dashboard, shared filters, empty states, and data summaries. */
html[data-lobi-theme="light"] .control-center-ui :is(
  .metric-card, .portal-metric, .presence-summary-button, .customer-assignment-form,
  .customer-access-share, .empty-state, .empty-state-card, .portal-empty, .lobi-time-empty,
  .order-empty, .report-revenue-overview, .report-destination-card, .report-payment-card,
  .report-equation, .report-deposit-flow, .report-calculation-card
) { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); box-shadow: var(--ui-shadow-panel); }
html[data-lobi-theme="light"] .control-center-ui :is(.metric-card, .portal-metric, .presence-summary-button) :is(strong, .metric-value) { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui :is(.metric-card, .portal-metric, .presence-summary-button) :is(small, p, span) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui :is(.metric-online, .portal-metric.is-working) { border-top-color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui :is(.metric-offline, .portal-metric.is-open) { border-top-color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui :is(.device-legend a, .device-legend a:hover, .control-card-head h2, .control-card-head h3) { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui :is(.control-card-head p, .audit-item small, .audit-item time, .entity-subtitle, .presence-note) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.management-toolbar, .filter-bar, .filters, .order-filter-grid, .groups-filter-form, .office-filter-bar, .table-scroll, .compact-table-wrap) { background: var(--ui-surface-2); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.filter-pills, .groups-filter-pills, .presence-range-filter) :is(a, button) { background: var(--ui-input); border-color: var(--ui-border); color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.filter-pills, .groups-filter-pills, .presence-range-filter) :is(a, button).active { background: var(--ui-brand); border-color: var(--ui-brand); color: var(--ui-on-brand); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.icon-button, .table-sort-button, .ci-date-trigger) { color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.icon-button, .table-sort-button):hover { color: var(--ui-brand); background: var(--ui-brand-soft); }


/* Reports: keep all reading surfaces legible in the light theme, including mobile cards. */
html[data-lobi-theme="light"] .control-center-ui :is(.report-head-meta > span, .report-kpi-card, .report-ranking-grid article, .report-timeline-insights article, .report-timeline-visual, .report-filter-panel, .report-calculation-panel, .report-chart-card, .report-reset-target, .report-reset-group, .report-reset-modal-panel, .report-archive-form, .report-archive-list article) { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); box-shadow: var(--ui-shadow-panel); }
html[data-lobi-theme="light"] .control-center-ui :is(.report-head-meta strong, .report-kpi-card strong, .report-ranking-list span, .report-ranking-list strong, .report-ranking-grid h3, .report-timeline-insights strong, .report-time-column-value, .report-total-value) { color: var(--ui-text); text-shadow: none; }
html[data-lobi-theme="light"] .control-center-ui :is(.report-head-meta small, .report-kpi-card span, .report-kpi-card small, .report-timeline-insights small, .report-timeline-axis, .report-time-column small, .report-time-column-label) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui :is(.report-kpi-card.positive strong) { color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui :is(.report-kpi-card.negative strong, .report-danger-zone h2, .report-reset-modal-panel h2, .report-reset-preview-total strong) { color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui :is(.report-segmented, .report-timeline-metrics) { background: var(--ui-surface-2); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .report-timeline-metrics button { color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui :is(.report-segmented a.active, .report-segmented a:hover, .report-timeline-metrics button.is-active) { background: var(--ui-brand-soft); color: var(--ui-brand); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .report-danger-zone { background: var(--ui-danger-soft); border-color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui .report-reset-target:has(input:checked) { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .report-timeline-average span { background: var(--ui-surface-2); color: var(--ui-warning); }
/* Hour drill-down: summary, orders and expanded items belong to the light surface. */
html[data-lobi-theme="light"] .control-center-ui .report-timeline-detail-summary article { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .report-timeline-order { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .report-timeline-order summary:is(:hover, :focus-visible),
html[data-lobi-theme="light"] .control-center-ui .report-timeline-order[open] > summary { background: var(--ui-brand-soft); color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .report-timeline-order-items > article { background: var(--ui-surface-2); color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui :is(.report-timeline-detail-summary, .report-timeline-order) strong { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui :is(.report-timeline-detail-summary, .report-timeline-order) :is(small, ul) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .report-donut { box-shadow: inset 0 0 0 22px var(--ui-surface-2), var(--ui-shadow-panel); }
html[data-lobi-theme="light"] .control-center-ui .report-business-table tr { background: var(--ui-surface-1); border-color: var(--ui-border); }

/* Dashboard system details: legacy values and help bubbles need explicit theme colours. */
html[data-lobi-theme="light"] .control-center-ui .system-status-details > summary { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .system-status-details > summary:hover { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .system-status-details > summary:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
html[data-lobi-theme="light"] .control-center-ui .system-grid-detailed dd { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .system-grid-detailed dd.value-ok { color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui .system-grid-detailed dd.value-error { color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui .system-details strong { color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui .system-tip::after { background: var(--ui-text); color: var(--ui-surface-1); border-color: var(--ui-text); }

/* Dialogs and popovers may be attached directly to body, outside .content. */
html[data-lobi-theme="light"] .control-center-ui :is(.ci-datetime-dialog, .shift-dialog, .customer-picker-dialog, .modal-dialog, .modal-content) { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); box-shadow: var(--ui-shadow-dialog); }
html[data-lobi-theme="light"] .control-center-ui .ci-clock-face { background: var(--ui-surface-2); }
html[data-lobi-theme="light"] .control-center-ui .ci-datetime-dialog :is(button.ci-datetime-day, button.ci-clock-number, button.ci-picker-month).is-selected,
html[data-lobi-theme="light"] .control-center-ui .ci-datetime-dialog :is(button.ci-datetime-day, button.ci-clock-number, button.ci-picker-month).is-selected:hover,
html[data-lobi-theme="light"] .control-center-ui .ci-datetime-dialog .ci-datetime-actions button:not(.secondary) { color: var(--ui-on-brand); }
html[data-lobi-theme="light"] .control-center-ui .ci-picker-month.is-selected small { color: var(--ui-on-brand); }
html[data-lobi-theme="light"] .control-center-ui .ci-datetime-dialog .ci-datetime-actions button:not(.secondary):hover { background: var(--ui-brand-strong); border-color: var(--ui-brand-strong); color: var(--ui-on-brand); }
html[data-lobi-theme="light"] .control-center-ui :is(.shift-toast, .composer-toast) { background: var(--ui-text); color: var(--ui-surface-1); }

/* Time, Groups and staffing: preserve status meaning without dark gradients. */
html[data-lobi-theme="light"] .control-center-ui :is(
  .lobi-time-payroll-fields, .lobi-time-entry, .lobi-time-bulk-steps > div,
  .lobi-time-bulk-day.is-existing, .lobi-time-bulk-day.is-unselected,
  .lobi-time-bulk-submit, .lobi-time-device-login-info, .groups-order-list > article,
  .groups-order-list article > header, .groups-order-items, .groups-cancel-form,
  .groups-close-panel, .groups-close-panel li, .groups-period-shell .groups-actions-panel,
  .office-settings-save
) { background: var(--ui-surface-1); border-color: var(--ui-border); color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui :is(.lobi-time-delete-zone, .groups-danger-zone, .screen-danger-zone, .lobi-time-delete-warning) { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui :is(.lobi-time-delete-zone-counts strong, .lobi-time-delete-counts strong, .lobi-time-delete-zone h2) { color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui :is(.lobi-time-activation code, .cash-hash-box, .cash-opening-amount) { background: var(--ui-surface-2); color: var(--ui-text); }

/* Booking's administrative workspace only; its public templates are separate. */
html[data-lobi-theme="light"] .control-center-ui :is(
  .booking-module-nav, .booking-metrics article, .booking-location-summary article,
  .booking-location-card, .booking-inline-form, .booking-offer-grid article,
  .booking-weekdays label, .booking-note, .booking-customer-grid a, .booking-provider-note,
  .booking-setup-callout, .booking-wizard-progress a, .booking-wizard-help,
  .booking-publish-note, .booking-wizard-options, .booking-wizard-existing,
  .booking-wizard-check, .booking-choice-grid label > span
) { background: var(--ui-surface-1); border-color: var(--ui-border); color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-module-nav a, .booking-wizard-progress a span, .booking-setup-flow span) { color: var(--ui-text-secondary); background: var(--ui-surface-2); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-module-nav a.active, .booking-module-nav a:hover, .booking-wizard-progress a.current, .booking-choice-grid input:checked + span) { color: var(--ui-brand); background: var(--ui-brand-soft); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-status, .booking-availability-result) { background: var(--ui-surface-2); color: var(--ui-text-secondary); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-status.published, .booking-status.confirmed, .booking-status.checked_in, .booking-status.seated, .booking-status.completed, .booking-status.paid, .booking-status.active, .booking-availability-result.is-ok, .booking-setup-flow span.done) { background: var(--ui-success-soft); color: var(--ui-success); border-color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-wizard-warning, .booking-status.pending, .booking-status.unpaid) { background: var(--ui-warning-soft); color: var(--ui-warning); border-color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-status.cancelled, .booking-status.failed, .booking-availability-result.is-error) { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--ui-danger); }

/* Teams, Order, Park and Allergy administration. */
html[data-lobi-theme="light"] .control-center-ui :is(
  .teams-event-card, .teams-start-card, .teams-config-section, .teams-readiness,
  .teams-catalog-intro, .teams-public-release, .teams-credit-grid > .card,
  .teams-readiness li, .teams-add-panel, .teams-station-grid article,
  .teams-inline-empty, .teams-tablet-card, .teams-pairing-form, .teams-catalog-intro li,
  .teams-product-card, .teams-new-product-form, .teams-product-body,
  .teams-assistant, .teams-assistant-task, .teams-assistant-choices label,
  .teams-assistant-answer, .teams-advanced-settings > summary,
  .lobi-order-customer-search, .lobi-order-customer-card, .lobi-order-location-card,
  .park-capacity-summary article, .park-capacity-hero > div,
  .allergy-assessment-head, .allergy-metrics article, .allergy-product-hero > div
) { background: var(--ui-surface-1); color: var(--ui-text-secondary); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui :is(.teams-add-panel summary, .teams-tablet-card summary, .teams-product-card summary, .teams-station-checks label, .teams-activation-stations, .cash-count-sticky) { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui :is(.teams-activation-code, .teams-tablet-rule, .teams-entitlement, .screen-entitlement) { background: var(--ui-brand-soft); color: var(--ui-brand); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui :is(.allergy-safety-banner, .allergy-demo-hero, .allergy-metrics .is-open) { background: var(--ui-warning-soft); color: var(--ui-warning); border-color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui :is(.park-capacity-summary .is-available, .allergy-metrics .is-done) { background: var(--ui-success-soft); color: var(--ui-success); border-color: var(--ui-success); }

/* Screen tools adapt; the canvas, film images and display output retain their design. */
/* LOBI Display administration; customer-facing preview artwork keeps its colours. */
html[data-lobi-theme="light"] .control-center-ui .content .display-guide > div { background: var(--ui-surface-2); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.display-guide strong, .display-guest-note h2, .display-card-meta dd, .display-list-title) { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.display-guide span, .display-guest-note p, .display-card-meta dt, .display-card-summary) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.display-choice, .playlist-layout-list, .playlist-image-card, .playlist-assignment > .check-row) { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content .display-choice:is(.selected, :focus-within) { background: var(--ui-brand-soft); border-color: var(--ui-brand); box-shadow: var(--ui-focus-ring); }
html[data-lobi-theme="light"] .control-center-ui .content .display-choice span { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content .display-state { color: var(--ui-text-muted); background: var(--ui-surface-2); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content .display-state.is-ok { color: var(--ui-success); background: var(--ui-success-soft); border-color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui .content .display-state.is-missing { color: var(--ui-warning); background: var(--ui-warning-soft); border-color: var(--ui-warning); }

html[data-lobi-theme="light"] .control-center-ui :is(
  .screen-publish-bar, .screen-upload-card, .screen-composer-head, .screen-composer-lane,
  .screen-lane-head, .composer-playlist-settings, .composer-filmstrip,
  .composer-media-popover, .composer-media-popover > div
) { background: var(--ui-surface-1); color: var(--ui-text-secondary); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .screen-publish-bar.dirty { background: var(--ui-warning-soft); color: var(--ui-warning); border-color: var(--ui-warning); }

/* The editor's controls share the palette. Never target .layout-grid, .tile,
 * images, wallpaper previews, or inline customer-selected design colours. */
html[data-lobi-theme="light"] .layout-editor-ui :is(.editor-hero, .editor-layout-settings, .editor-tabs, .editor-board, .editor-asset-card, .layout-billing-status, .media-conflict-panel) { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui :is(.editor-action.primary, .editor-tab-add, .mobile-slot-done) { color: var(--ui-on-brand) !important; }

/* Legacy module typography: only administrative metadata, never media content. */
/* Editor dialogs contain legacy fixed colours outside the normal form panels. */
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library :is(.media-search-panel, .media-results-panel, .media-modal-panel, .upload-queue-row) { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); box-shadow: var(--ui-shadow-panel); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library .media-card { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); box-shadow: var(--ui-shadow-panel); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library .media-card:is(:hover, :focus-within) { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library :is(input, select, textarea) { background: var(--ui-input) !important; color: var(--ui-text) !important; -webkit-text-fill-color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library :is(input, select, textarea):focus { border-color: var(--ui-brand) !important; box-shadow: var(--ui-focus-ring); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library input::placeholder { color: var(--ui-text-muted); -webkit-text-fill-color: var(--ui-text-muted); opacity: 1; }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library :is(label, h2, h3) { color: var(--ui-text); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library :is(.muted, .media-empty, [data-media-load-state], [data-media-count]) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library button.media-delete-icon { background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; box-shadow: none; }
html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .media-library button.media-delete-icon:hover { background: var(--ui-danger) !important; color: var(--ui-on-brand) !important; }
html[data-lobi-theme="light"] .layout-editor-ui :is(.layout-bulk-edit-modal, .layout-color-picker, .layout-media-panel) { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui :is(.layout-bulk-edit-head, .layout-bulk-edit-actions, .layout-color-picker-head) { border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui :is(.layout-bulk-edit-summary, .layout-bulk-edit-actions) { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-row { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-row:not(.is-disabled):is(:hover, :focus-within),
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-row:has(input:checked) { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-row.is-disabled { background: var(--ui-surface-2); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui :is(.layout-bulk-edit-row strong, .layout-bulk-edit-summary strong, .layout-color-picker-head strong) { color: var(--ui-text); }
html[data-lobi-theme="light"] .layout-editor-ui :is(.layout-bulk-edit-row small, .layout-bulk-edit-hint, .layout-bulk-edit-target label, .layout-color-picker-head span, .layout-color-picker .native-color > span) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-target :is(input, select) { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-target input::placeholder { color: var(--ui-text-muted); opacity: 1; }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-error { color: var(--ui-danger); }
html[data-lobi-theme="light"] .layout-editor-ui :is(.layout-bulk-edit-head, .layout-bulk-edit-summary, .layout-bulk-edit-actions, .layout-color-picker-head, .layout-media-panel) button.secondary { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); box-shadow: none; }
html[data-lobi-theme="light"] .layout-editor-ui :is(.layout-bulk-edit-head, .layout-bulk-edit-summary, .layout-bulk-edit-actions, .layout-color-picker-head, .layout-media-panel) button.secondary:hover { background: var(--ui-brand-soft); color: var(--ui-brand); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-actions button[type="submit"]:not(:disabled) { background: var(--ui-brand) !important; color: var(--ui-on-brand) !important; border-color: var(--ui-brand) !important; box-shadow: none !important; }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-actions button[type="submit"]:not(:disabled):hover { background: var(--ui-brand-strong) !important; }
html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-actions button:disabled { background: var(--ui-surface-3) !important; color: var(--ui-text-muted) !important; border-color: var(--ui-border) !important; box-shadow: none !important; opacity: 1; }
@media (max-width: 760px) {
  html[data-lobi-theme="light"] .layout-editor-ui .layout-bulk-edit-summary strong { flex: 0 0 auto; }
}

html[data-lobi-theme="light"] .control-center-ui .content :is(
  .booking-metrics, .booking-location-summary, .booking-location-card,
  .booking-offer-grid, .booking-detail-grid, .booking-config-list, .booking-customer-grid,
  .teams-metrics, .teams-event-card, .teams-info, .teams-inline-empty,
  .teams-readiness, .teams-event-summary, .teams-station-grid, .teams-tablet-rule,
  .teams-catalog-intro, .teams-entitlement-toggle, .teams-assistant,
  .park-dashboard-metrics, .park-capacity-summary, .allergy-metrics, .shift-metrics
) :is(strong, b, dd, h2, h3) { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content :is(
  .booking-metrics, .booking-location-summary, .booking-location-card,
  .booking-offer-grid, .booking-detail-grid, .booking-config-list, .booking-customer-grid,
  .booking-next-list, .booking-table-card, .booking-history,
  .teams-metrics, .teams-event-card, .teams-info, .teams-inline-empty,
  .teams-readiness, .teams-form-heading, .teams-form-grid, .teams-event-summary,
  .teams-section-head, .teams-record-list, .teams-station-grid, .teams-tablet-rule,
  .teams-catalog-intro, .teams-entitlement-toggle, .teams-assistant,
  .park-dashboard-metrics, .park-capacity-summary, .allergy-metrics, .shift-metrics
) :is(small, p, dt) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-metrics, .booking-location-summary, .teams-metrics) > :is(span, small),
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-metrics, .booking-location-summary, .teams-metrics) article > span { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-form, .booking-inline-form, .booking-filter, .booking-entitlement, .booking-weekdays) :is(label, legend) { color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-status.paused, .booking-status.expired, .booking-status.archived, .booking-status.completed, .booking-status.refunded) { background: var(--ui-surface-2); color: var(--ui-text-muted); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-status.authorized, .booking-status.checked_in, .booking-status.seated) { background: var(--ui-info-soft); color: var(--ui-info); border-color: var(--ui-info); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-status.draft, .booking-status.pending_approval, .booking-status.pending_payment, .teams-status.setup, .teams-status.warning) { background: var(--ui-warning-soft); color: var(--ui-warning); border-color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui :is(.booking-status.cancelled_by_guest, .booking-status.cancelled_by_operator, .booking-status.rejected, .booking-status.no_show, .booking-status.blocked) { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui .teams-status.ready { background: var(--ui-success-soft); color: var(--ui-success); border-color: var(--ui-success); }

html[data-lobi-theme="light"] .control-center-ui :is(
  .park-lot-card, .park-dashboard-metrics article, .park-donut > span,
  .shift-metrics article, .shift-event-card, .shift-publication-bar,
  .shift-employee-alert-assignments article, .shift-problem-dialog-list blockquote,
  .shift-confirmation-list article, .shift-eligibility-message, .published-shift-header,
  .shift-selected-employee, .shift-pool-dialog, .shift-undo-panel,
  .layout-ai-shell, .layout-ai-api-state, .layout-ai-layout-card,
  .layout-ai-selection-summary, .layout-ai-upload, .layout-ai-file-list > div,
  .layout-ai-clarification-intro, .layout-ai-clarification-card, .layout-ai-clarification-option,
  .layout-ai-review-metrics > div, .layout-ai-interpretation, .layout-ai-decision,
  .layout-ai-review-toolbar, .layout-ai-change, .layout-ai-wait-card, .layout-list-panel
) { background: var(--ui-surface-1); border-color: var(--ui-border); color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .control-center-ui .park-lot-card:hover { background: var(--ui-surface-2); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .park-dashboard-metrics article.is-valid { background: var(--ui-success-soft); color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui .layout-ai-change.is-confirmation-required { background: var(--ui-warning-soft); border-color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui :is(.status.warn, .status.offline, .status.stale) { background: var(--ui-warning-soft); color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui :is(.alert.error, .alert.danger) { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.danger-text, .icon-button.danger, .icon-button.danger-text) { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui .report-payment-note strong { color: var(--ui-warning); }

html[data-lobi-theme="light"] .layout-editor-ui :is(.editor-settings-card, .layout-security-card, .layout-security-group, .editor-title-meta > span) { background: var(--ui-surface-2); color: var(--ui-text-secondary); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui .tab-chip.active { background: var(--ui-brand-soft); color: var(--ui-brand); }
html[data-lobi-theme="light"] .layout-editor-ui .security-status.is-configured strong { color: var(--ui-success); }
html[data-lobi-theme="light"] .layout-editor-ui .security-status.is-open strong { color: var(--ui-warning); }
html[data-lobi-theme="light"] .layout-editor-ui.mobile-slot-editor-open .mobile-slot-editor-head { background: var(--ui-surface-1); color: var(--ui-text); }
html[data-lobi-theme="light"] .layout-editor-ui :is(.editor-action.primary, .editor-tab-add, .mobile-slot-done):hover { background: var(--ui-brand-strong) !important; color: var(--ui-on-brand) !important; }

/* These older rules use !important themselves; match it only at their boundary. */
html[data-lobi-theme="light"] .control-center-ui .shift-employee strong { color: var(--ui-text) !important; }
html[data-lobi-theme="light"] .control-center-ui .shift-employee small { color: var(--ui-text-muted) !important; }
html[data-lobi-theme="light"] .control-center-ui .shift-employee > span { background: var(--ui-brand-soft) !important; color: var(--ui-brand) !important; }
html[data-lobi-theme="light"] .control-center-ui .content .shift-edit-action { color: var(--ui-brand) !important; }
html[data-lobi-theme="light"] .control-center-ui .content :is(.shift-delete-action, .shift-employee-cleanup-button) { color: var(--ui-danger) !important; }
html[data-lobi-theme="light"] .control-center-ui .content .shift-assignment [data-remove-assignment] { color: var(--ui-text) !important; }
html[data-lobi-theme="light"] .control-center-ui .content :is(.composer-media-thumb, .composer-slide) { background: var(--ui-surface-2) !important; border-color: var(--ui-border); color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.composer-media-thumb, .composer-slide):is(:hover, :focus-visible, .is-selected) { background: var(--ui-brand-soft) !important; border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .screen-module-page.control-center-ui .content button.composer-slide-select { color: var(--ui-text) !important; }
html[data-lobi-theme="light"] .screen-module-page :is(.screen-delete-link, .composer-slide-actions [data-slide-action="delete"]) { color: var(--ui-danger) !important; }
html[data-lobi-theme="light"] .screen-module-page .composer-slide-actions button:hover { background: var(--ui-brand-soft) !important; color: var(--ui-brand) !important; }
html[data-lobi-theme="light"] .control-center-ui :is(.allergy-status-published, .allergy-document-processed) { background: var(--ui-success-soft) !important; color: var(--ui-success) !important; }
html[data-lobi-theme="light"] .control-center-ui :is(.allergy-status-reviewed, .allergy-document-processing) { background: var(--ui-info-soft) !important; color: var(--ui-info) !important; }
html[data-lobi-theme="light"] .control-center-ui :is(.allergy-status-review_required, .allergy-document-review_required) { background: var(--ui-warning-soft) !important; color: var(--ui-warning) !important; }
html[data-lobi-theme="light"] .control-center-ui :is(.allergy-status-draft, .allergy-document-pending) { background: var(--ui-surface-2) !important; color: var(--ui-text-muted) !important; }
html[data-lobi-theme="light"] .control-center-ui .allergy-document-failed { background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; }
html[data-lobi-theme="light"] .control-center-ui .content .shift-plan-topbar { background: var(--ui-surface-1); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content .shift-form-section > span { background: var(--ui-brand-soft); color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.shift-employee-create-link, .shift-employee-pool > a) { color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.shift-publication-warning, .shift-fill-badge.is-open) { color: var(--ui-warning); background: var(--ui-warning-soft); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.cash-primary, a.cash-primary) { color: var(--ui-on-brand) !important; }
html[data-lobi-theme="light"] .control-center-ui .content :is(.cash-opening-amount, .cash-count-sticky, .cash-hash-box) { background: var(--ui-surface-2); color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .cash-hash-box code { color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .cash-calculation .result { color: var(--ui-on-brand); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.park-dashboard-metrics, .park-capacity-summary, .park-capacity-hero) span { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.screen-group-open, .screen-workflow-steps) { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content .screen-group-open :is(p, small) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content .screen-group-open > strong { color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content .screen-workflow-steps li > span { background: var(--ui-brand-soft); color: var(--ui-brand); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-entitlement, .booking-setup-callout, .booking-wizard-intro, .booking-wizard-help, .booking-publish-note, .booking-wizard-existing, .booking-wizard-warning, .booking-wizard-review) :is(p, small) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-entitlement, .booking-choice-grid, .booking-wizard-fields, .booking-wizard-existing, .booking-wizard-warning) :is(strong, legend, label, label > span) { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content .booking-entitlement :is(.booking-entitlement-toggle, .booking-entitlement-payment),
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-choice-grid label > span, .booking-wizard-options, .booking-wizard-progress a) { background: var(--ui-surface-2); color: var(--ui-text-secondary); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content .booking-wizard-progress a.current,
html[data-lobi-theme="light"] .control-center-ui .content .booking-choice-grid input:checked + span { background: var(--ui-brand-soft); border-color: var(--ui-brand); color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-wizard-progress a span, .booking-wizard-review article > span) { background: var(--ui-surface-3); color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.invoice-position-row, .office-provider-settings > summary, .form-action-bar) { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); box-shadow: none; }
html[data-lobi-theme="light"] .control-center-ui .content :is(.report-question-card, .park-section-head > a, .park-utilization-chart > strong) { color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .park-utilization-track { background: var(--ui-surface-3); }
html[data-lobi-theme="light"] .control-center-ui .content a:where(:not([class]), .text-link) { color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content form > :is(.actions, .form-actions) { background: var(--ui-surface-2); border-color: var(--ui-border); box-shadow: none; }
html[data-lobi-theme="light"] .control-center-ui .content :is(.allergy-required-badge, .allergy-review-intro) { background: var(--ui-warning-soft); color: var(--ui-warning); border-color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui .park-filter-bar { flex-wrap: wrap; }
html[data-lobi-theme="light"] .control-center-ui .park-filter-bar :is(input, select) { flex: 1 1 240px; width: auto; min-width: 0; }
html[data-lobi-theme="light"] .control-center-ui .content :is(.cash-autosave-state, .cash-count-sticky em) { color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui .cash-count-sticky em.saving { color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui .cash-count-sticky em.error { color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui .cash-stepper a:is(.active, .done) b { color: var(--ui-on-brand); }
html[data-lobi-theme="light"] .control-center-ui .content .lobi-time-export-button.is-pdf :is(strong, small, svg) { color: var(--ui-on-brand); opacity: 1; }
html[data-lobi-theme="light"] .control-center-ui .content .lobi-time-export-button.is-csv small { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content .teams-primary { background: var(--ui-brand) !important; border-color: var(--ui-brand) !important; color: var(--ui-on-brand) !important; }
html[data-lobi-theme="light"] .control-center-ui .content .teams-primary:hover { background: var(--ui-brand-strong) !important; }
html[data-lobi-theme="light"] .control-center-ui .teams-assistant-steps li > span { background: var(--ui-surface-2); color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .teams-assistant-steps li.current > span { background: var(--ui-brand); color: var(--ui-on-brand); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .teams-assistant-steps li.done > span { background: var(--ui-success-soft); color: var(--ui-success); border-color: var(--ui-success); }
html[data-lobi-theme="light"] .control-center-ui .content .view-toggle button:not(.secondary):not(.danger) { background: var(--ui-surface-1); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content .view-toggle button.active:not(.secondary):not(.danger) { background: var(--ui-brand); color: var(--ui-on-brand); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content button[data-area-color-preset] { background: var(--preset-color) !important; }
html[data-lobi-theme="light"] .control-center-ui .shift-publication-bar.needs-review b { color: var(--ui-warning); }
html[data-lobi-theme="light"] .control-center-ui .shift-publication-bar.blocked b { color: var(--ui-danger); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-logo-editor, .booking-wizard-photo-panel, .booking-wizard-photo-stage, .booking-template-choice, .booking-wizard-start-preview) { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-logo-editor, .booking-wizard-photo-panel, .booking-wizard-start-preview, .booking-design-editor, .booking-template-choice) :is(p, small) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-wizard-photo-stage > div, .booking-wizard-start-preview, .booking-template-choice) > strong,
html[data-lobi-theme="light"] .control-center-ui .content .booking-wizard-start-preview :is(h3, strong) { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.booking-wizard-fields, .booking-choice-grid) small { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content .booking-wizard-options > summary { color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content .booking-wizard-start-preview li > span { background: var(--ui-brand-soft); color: var(--ui-brand); }
html[data-lobi-theme="light"] .control-center-ui .content .teams-form-heading > span { color: var(--ui-on-brand); }
html[data-lobi-theme="light"] .control-center-ui .cash-form-section > span { color: var(--ui-on-brand); }
html[data-lobi-theme="light"] .control-center-ui .booking-danger-zone p { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .screen-module-page .content .composer-release { background: var(--ui-surface-2); border-color: var(--ui-border); color: var(--ui-text); }
html[data-lobi-theme="light"] .screen-module-page .content :is(.composer-release-heading p, .composer-strip-help, .composer-strip-heading small) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .screen-module-page .content .composer-default-settings > summary { color: var(--ui-brand); }
html[data-lobi-theme="light"] .layout-editor-ui .content > .editor-hero { min-height: 150px; }
html[data-lobi-theme="light"] .layout-editor-ui :is(.money-field > label, .tile-name-field > span) { color: var(--ui-text-muted); text-shadow: none; }
html[data-lobi-theme="light"] .layout-editor-ui .tab-name-input { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui #screens .composer-release { background: var(--ui-surface-2); border-color: var(--ui-border); color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui #screens :is(.composer-release-heading > span:last-child, .composer-strip-help, .composer-strip-heading span, .composer-release-status) { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content .groups-filter-form label span,
html[data-lobi-theme="light"] .control-center-ui .content .groups-close-panel p { color: var(--ui-text-muted); }
html[data-lobi-theme="light"] .control-center-ui .content .groups-close-panel li strong { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .office-status.is-draft { color: #634396; background: #efe7fa; border-color: #cdb9e5; }
html[data-lobi-theme="light"] .control-center-ui .content .view-toggle { background: var(--ui-surface-2); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .control-center-ui .content .view-toggle button { background: var(--ui-surface-1) !important; color: var(--ui-text) !important; }
html[data-lobi-theme="light"] .control-center-ui .content .view-toggle button.active { background: var(--ui-brand) !important; color: var(--ui-on-brand) !important; }
html[data-lobi-theme="light"] .layout-editor-ui .content .money-field > label { color: var(--ui-text-muted) !important; text-shadow: none !important; }
@media (max-width: 600px) {
  html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .content .admin-tenant-actions { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; min-width: 0; }
  html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .content .admin-tenant-actions > form { width: 100%; min-width: 0; }
  html[data-lobi-theme="light"] :is(.control-center-ui, .layout-editor-ui) .content .admin-tenant-actions button { width: 100%; min-width: 0; }
}
html[data-lobi-theme="light"] .control-center-ui .content .entity-title { color: var(--ui-text); }
html[data-lobi-theme="light"] .control-center-ui .content :is(.entity-subtitle, .entity-fields small) { color: var(--ui-text-muted); }
} /* screen */

/* Leave space for the preference at intermediate desktop widths. */
@media (min-width: 1101px) and (max-width: 1500px) {
  :is(.control-center-ui, .layout-editor-ui) .topbar .system-clock { display: none; }
}
@media (max-width: 1100px) {
  .control-center-ui.sidebar-collapsed .sidebar .portal-theme-switch--mobile { flex-direction: column; align-self: center; padding: 0; margin: 8px -2px 12px; }
  .control-center-ui.sidebar-collapsed .sidebar .portal-theme-switch--mobile button { min-width: 44px; width: 44px; padding-inline: 2px; font-size: 12px; }
}
/* Layout billing dialog: theme every control, including the optional note and free-service action. */
html[data-lobi-theme="light"] .layout-editor-ui .layout-billing-dialog > label { color: var(--ui-text-secondary); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-billing-dialog textarea { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-billing-dialog textarea::placeholder { color: var(--ui-text-muted); opacity: 1; }
html[data-lobi-theme="light"] .layout-editor-ui .layout-billing-dialog-actions button.secondary { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); box-shadow: none; }
html[data-lobi-theme="light"] .layout-editor-ui .layout-billing-dialog-actions button.secondary:hover { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
html[data-lobi-theme="light"] .layout-editor-ui .layout-billing-dialog [data-layout-billing-error] { color: var(--ui-danger); }