:root {
  --theme-surface: #ffffff;
  --theme-surface-2: #fff7fc;
  --theme-text: #181020;
  --theme-muted: #786b82;
  --theme-line: #eaddea;
  --theme-action: #c22f76;
  --theme-action-2: #76409d;
  --theme-action-text: #ffffff;
  --theme-button-bg: #ffffff;
  --theme-button-text: #633374;
}

html[data-theme="dark"] {
  --ink: #f7f1f8;
  --muted: #bbaebf;
  --line: #493b50;
  --soft: #2a202f;
  --deep: #100b15;
  --theme-surface: #231a29;
  --theme-surface-2: #2a202f;
  --theme-text: #f7f1f8;
  --theme-muted: #bbaebf;
  --theme-line: #493b50;
  --pink: #bd2f72;
  --pink-2: #d85d9a;
  --purple: #743b9f;
  --theme-action: #b52d70;
  --theme-action-2: #743b9f;
  --theme-action-text: #ffffff;
  --theme-button-bg: #302438;
  --theme-button-text: #f7f1f8;
}

html[data-theme="luxury"] {
  --ink: #fff5e3;
  --muted: #d3c3a7;
  --line: #6b5738;
  --soft: #241d15;
  --pink: #c9a45b !important;
  --pink-2: #e0c47f !important;
  --purple: #9b793f !important;
  --accent: #c9a45b !important;
  --deep: #0d0a07;
  --theme-surface: #1c1711;
  --theme-surface-2: #292117;
  --theme-text: #fff5e3;
  --theme-muted: #d3c3a7;
  --theme-line: #6b5738;
  --theme-action: #e1c77f;
  --theme-action-2: #a77d35;
  --theme-action-text: #181109;
  --theme-button-bg: #302619;
  --theme-button-text: #f9e7bd;
}

.theme-toggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(126, 76, 168, 0.25);
  border-radius: 999px;
  color: #633374;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 5px 16px rgba(49, 25, 57, 0.08);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--pink, #e64691);
  transform: translateY(-1px);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

html[data-theme="dark"] .theme-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

html[data-theme="luxury"] .theme-toggle {
  color: #f4dfaa;
  border-color: rgba(224, 196, 127, 0.48);
  background: linear-gradient(135deg, rgba(201, 164, 91, 0.18), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.2);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 82% 2%, rgba(201, 164, 91, 0.12), transparent 27%),
    linear-gradient(135deg, #0d0a07, #17120d 50%, #0b0907);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .sidebar {
  background:
    radial-gradient(circle at 50% 72%, rgba(201, 164, 91, 0.14), transparent 28%),
    linear-gradient(180deg, #120e0a, #090705);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .characters {
  filter: sepia(0.28) saturate(0.62) brightness(0.92);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .nav-item svg {
  color: #bca36a;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .nav-item.active svg {
  color: #181109;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .store-color-dot, .portfolio-rank-store i
) {
  background: #c9a45b !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .spark, .ornament, .eyebrow, .panel-title > span, .panel-title-split > span,
  .shift-focus-card span, .shift-focus-card strong, .stat-link, .delta a,
  .inventory-updated, .portfolio-ranking-title span, .portfolio-store-foot a,
  .receipt-preview-heading span, .sync-info strong
) {
  color: #d2b66d !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .stat-icon.pink, .stat-icon.purple
) {
  color: #e4ca83 !important;
  border: 1px solid #6d5731;
  background: linear-gradient(145deg, #352a1a, #211a12) !important;
  box-shadow: inset 0 1px rgba(255, 245, 213, 0.08);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .series-dot.total, .series-dot.card
) {
  background: #c9a45b !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .pink, .purple
) {
  color: #d2b66d !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .badge, .ticket-status-pill, .role
) {
  border-color: #66512c;
}

/* Luxury admin header account: keep the injected auth badge flush with the header. */
html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) #ark-auth-header-slot.role {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) #ark-auth-bar.in-header {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) #ark-auth-bar.in-header .ark-auth-user {
  padding: 3px 0 !important;
  color: #f7edd9 !important;
  background: transparent !important;
  line-height: 1.15;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) #ark-auth-bar.in-header .ark-auth-user small {
  margin-top: 3px;
  color: #b8a98f !important;
}

/* Luxury admin entry forms and empty rows. */
html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .admin-entry-form button {
  color: #181109 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #e1c77f, #a77d35) !important;
  box-shadow: 0 6px 16px rgba(126, 91, 30, 0.18);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .empty-table, td.empty-table, .empty-side
) {
  color: #c3b495 !important;
  border-color: #51432d !important;
  background: #211a12 !important;
}

/* Luxury shift calendar: visible grid, dates and non-purple shift cards. */
html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-calendar {
  gap: 1px;
  border-color: #705a34 !important;
  background: #705a34 !important;
  box-shadow: 0 0 0 1px rgba(225, 199, 127, 0.08);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-weekday {
  color: #efe2c3 !important;
  background: #2c2318 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-day {
  color: #f7edd9 !important;
  background: #17120d !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-day.is-empty {
  background: #110d09 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-day.is-today {
  background: #241c12 !important;
  box-shadow: inset 0 0 0 2px #c9a45b !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-calendar .shift-day.has-one-shift {
  background: #332816 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-calendar .shift-day.is-understaffed {
  background: #493617 !important;
  box-shadow: inset 0 0 0 2px #c9a45b !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-day-number {
  color: #efd994 !important;
  border-color: #6d5731 !important;
  background: #2b2217 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-day.is-saturday .shift-day-number {
  color: #91baff !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-day.is-sunday .shift-day-number, .shift-day.is-holiday .shift-day-number
) {
  color: #ff9aa6 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-chip {
  color: #f8edcf !important;
  border: 1px solid #806632 !important;
  background: linear-gradient(135deg, #6a5227, #46351d) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.16);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-day-total, .shift-day-more
) {
  color: #ead9b7 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-day-more {
  border-color: #705a34 !important;
  background: #2a2115 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-day-warning {
  color: #f1cd75 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-chip span {
  color: #f0dfb7 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-chip em {
  color: #2b2113 !important;
  background: #dfc67f !important;
}

/* Luxury active-ticket cards: readable metadata and totals. */
html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .dashboard-active-ticket-card {
  color: #f7edd9 !important;
  border-color: #66512c !important;
  background: linear-gradient(145deg, #211a12, #17120d) !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .dashboard-active-ticket-table strong {
  color: #f7edd9 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .dashboard-active-ticket-table em {
  color: #bfead7 !important;
  background: #173c2d !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .dashboard-active-ticket-meta {
  color: #c8b894 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .dashboard-active-ticket-card > b {
  color: #e1c77f !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .customer-summary-cards article::before, .inventory-summary-cards article::before
) {
  background: linear-gradient(#e1c77f, #8d682e);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .nav-item.active, .settings-tab.active, .segmented-control button.selected,
  .receipt-kind-switch button.active
) {
  color: #181109 !important;
  background: linear-gradient(135deg, #e1c77f, #a77d35) !important;
  box-shadow: 0 8px 18px rgba(126, 91, 30, 0.2);
}

html[data-theme="luxury"] body.ipad-app :where(
  .ipad-tab.active, .stock-mode-tabs button.active, .category-row button.selected,
  .manual-category-button, .table-button-grid button.selected,
  .staff-add-grid button.selected, .payment-methods button.selected,
  .choice-grid button.selected, .vault-heading-actions button.selected
) {
  color: #181109 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #e1c77f, #a77d35) !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  .ipad-tab:not(.active) svg, .section-heading > span, .heading-actions > span,
  .vault-heading-actions > span, .open-ticket-heading > span,
  .stock-row-label, .customer-app-summary strong
) {
  color: #d2b66d !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  .ticket-status-pill, .shift-chip, .badge
) {
  border-color: #66512c;
}

html[data-theme="luxury"] body.ipad-app .vault-day.selected .vault-day-number {
  color: #181109 !important;
  border-color: #c9a45b !important;
  background: #c9a45b !important;
}

html[data-theme="luxury"] body.ipad-app .vault-collected-mark {
  color: #f7edd9;
  background: #2f6d52;
}

html[data-theme="luxury"] body.staff-portal-app :where(
  .tabs button.active, .primary-btn, .today .day-button, .shift-chip.mine
) {
  color: #181109 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #e1c77f, #a77d35) !important;
}

html[data-theme="luxury"] body.staff-portal-app :where(
  .portal-title p, .panel-head span, .payroll-day-head b
) {
  color: #d2b66d;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .app, .topbar, .stat-card, .filters, .panel, .portfolio-panel,
  .portfolio-kpis article, .portfolio-store-card, .ranking-board, .ranking-card,
  .dashboard-active-tickets, .dashboard-active-ticket-card, .settings-card,
  .settings-section, .receipt-settings-panel, .modal-card, dialog,
  .shift-focus-card, .sales-chart-panel, .sales-chart-empty,
  .sales-summary-card, .segmented-control, .sales-series-controls button
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface);
  background-image: none;
  box-shadow: inset 0 1px rgba(244, 223, 170, 0.035);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  h1, h2, h3, h4, strong, label, .welcome, .role, .panel-title, .page-title,
  .shift-focus-card small, .sales-chart-head strong, .sales-summary-card strong,
  .day-summary-head span, .segmented-control button, .sales-series-controls button
) {
  color: var(--theme-text);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  p, small, .muted, .field-note, .day-summary-grid span,
  .sales-summary-card small, .customer-history-date
) {
  color: var(--theme-muted);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(input, select, textarea) {
  color: var(--theme-text);
  background: #100d09;
  border-color: var(--theme-line);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(th, .table-head) {
  color: #f3dfad;
  background: #2a2117;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .nav-item.active, .segmented-control button.selected, .row-action:not(.ghost)
) {
  color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 82% 4%, rgba(230, 70, 145, 0.12), transparent 28%),
    linear-gradient(135deg, #151019, #1c1521 48%, #120e16);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .app,
  .topbar,
  .stat-card,
  .filters,
  .panel,
  .portfolio-panel,
  .portfolio-kpis article,
  .portfolio-store-card,
  .ranking-board,
  .ranking-card,
  .dashboard-active-tickets,
  .dashboard-active-ticket-card,
  .settings-card,
  .settings-section,
  .receipt-settings-panel,
  .modal-card,
  dialog,
  table,
  thead,
  tbody,
  tr,
  th,
  td
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .app,
  .topbar,
  .stat-card,
  .filters,
  .panel,
  .portfolio-panel,
  .portfolio-kpis article,
  .portfolio-store-card,
  .ranking-board,
  .ranking-card,
  .dashboard-active-tickets,
  .dashboard-active-ticket-card,
  .settings-card,
  .settings-section,
  .receipt-settings-panel,
  .modal-card,
  dialog
) {
  background-color: var(--theme-surface);
  background-image: none;
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-focus-card,
  .sales-chart-panel,
  .sales-chart-empty,
  .sales-summary-card,
  .segmented-control,
  .sales-series-controls button
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface-2);
  background-image: none;
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-focus-card small,
  .sales-chart-head strong,
  .sales-summary-card strong,
  .day-summary-head span,
  .segmented-control button,
  .sales-series-controls button
) {
  color: var(--theme-text);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .day-summary-grid span,
  .sales-summary-card small,
  .customer-history-date
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  h1, h2, h3, h4, strong, label, .welcome, .role, .panel-title, .page-title
) {
  color: var(--theme-text);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  p, small, .muted, .field-note, .dashboard-active-tickets-title small
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(input, select, textarea) {
  color: var(--theme-text);
  background: #17121b;
  border-color: var(--theme-line);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(th, .table-head) {
  background: #2d2233;
}

html[data-theme="light"] body.ipad-app {
  color: #241a2a;
  background:
    radial-gradient(circle at 84% 0%, rgba(230, 70, 145, 0.12), transparent 28%),
    linear-gradient(180deg, #f8f2f8, #fff 55%, #f6f0f7);
}

html[data-theme="light"] body.ipad-app .theme-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

html[data-theme="dark"] body.ipad-app {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 84% 0%, rgba(230, 70, 145, 0.12), transparent 30%),
    linear-gradient(180deg, #100c14, #19121e);
}

html[data-theme="luxury"] body.ipad-app {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 84% 0%, rgba(201, 164, 91, 0.12), transparent 30%),
    linear-gradient(180deg, #0c0906, #17120d);
}

html[data-theme="luxury"] body.ipad-app .ipad-brandbar {
  border-color: rgba(224, 196, 127, 0.28);
  background: linear-gradient(135deg, #17110c, #261d13);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .ipad-syncbar button:not(.theme-toggle) {
  color: var(--theme-button-text);
  border-color: var(--theme-line);
  background: var(--theme-button-bg);
  box-shadow: none;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app #reload-shared-config {
  color: var(--theme-action-text);
  border-color: transparent;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2));
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app #store-open-button {
  color: #eafff6;
  border-color: #287a57;
  background: #1f6d4b;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app #store-close-button {
  color: #ffd7df;
  border-color: #873a4d;
  background: #5b2232;
}

html[data-theme="luxury"] body.ipad-app :where(
  .ipad-tabs, .ipad-card, .open-ticket-card, .dashboard-active-ticket-card,
  .stock-row, .stock-editor, .stock-empty, .customer-card, .history-card,
  .timecard-card, .vault-card, .order-card, .menu-card, .staff-card, dialog,
  .payment-dialog, .edit-dialog, .menu-staff-dialog, .complete-dialog, .confirm-dialog
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface);
  background-image: none;
}

html[data-theme="luxury"] body.ipad-app :where(h1, h2, h3, h4, strong, label, .ipad-tab, .section-heading) {
  color: var(--theme-text);
}

html[data-theme="luxury"] body.ipad-app :where(p, small, .muted, .stock-editor label, .open-ticket-empty) {
  color: var(--theme-muted);
}

html[data-theme="luxury"] body.ipad-app :where(input, select, textarea, option) {
  color: var(--theme-text);
  background: #100d09;
  border-color: var(--theme-line);
}

html[data-theme="luxury"] body.ipad-app :where(.ipad-tab.active, .stock-mode-tabs button.active) {
  color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35);
}

html[data-theme="dark"] body.ipad-app :where(
  .ipad-tabs,
  .ipad-card,
  .open-ticket-card,
  .dashboard-active-ticket-card,
  .stock-row,
  .stock-editor,
  .stock-empty,
  .customer-card,
  .history-card,
  .timecard-card,
  .vault-card,
  .order-card,
  .menu-card,
  .staff-card,
  dialog,
  .payment-dialog,
  .edit-dialog,
  .menu-staff-dialog,
  .complete-dialog,
  .confirm-dialog
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface);
  background-image: none;
}

html[data-theme="dark"] body.ipad-app :where(h1, h2, h3, h4, strong, label, .ipad-tab, .section-heading) {
  color: var(--theme-text);
}

html[data-theme="dark"] body.ipad-app :where(p, small, .muted, .stock-editor label, .open-ticket-empty) {
  color: var(--theme-muted);
}

html[data-theme="dark"] body.ipad-app :where(input, select, textarea, option) {
  color: var(--theme-text);
  background: #17121b;
  border-color: var(--theme-line);
}

html[data-theme="dark"] body.ipad-app :where(
  .receipt-action-row button,
  .history-print-actions button,
  .month-head button,
  .stock-mode-tabs button,
  .stock-toolbar button,
  .stock-form-actions button,
  .stock-row-actions button,
  .stock-quantity button
) {
  color: var(--theme-text);
  background: #302438;
  border-color: var(--theme-line);
}

.portal-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

html[data-theme="dark"] body.staff-portal-app {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 82% 0%, rgba(230, 70, 145, 0.16), transparent 28%),
    linear-gradient(180deg, #100b15 0 136px, #18121c 136px 100%);
}

html[data-theme="luxury"] body.staff-portal-app {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 82% 0%, rgba(201, 164, 91, 0.14), transparent 28%),
    linear-gradient(180deg, #0b0806 0 136px, #15100c 136px 100%);
}

html[data-theme="luxury"] body.staff-portal-app :where(
  .card, .staff-card, .tabs, .panel, .calendar, .calendar-day,
  .shift-card, .payroll-card, .payroll-day-card, .weekday, .day
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface);
  background-image: none;
}

html[data-theme="luxury"] body.staff-portal-app .shift-form {
  background: #211a12;
}

html[data-theme="luxury"] body.staff-portal-app .calendar-grid {
  background: var(--theme-line);
  border-color: var(--theme-line);
}

html[data-theme="luxury"] body.staff-portal-app .day.empty {
  background: #15100c;
}

html[data-theme="luxury"] body.staff-portal-app .day.today {
  background: #3b2d18;
}

html[data-theme="luxury"] body.staff-portal-app .day.one-shift {
  background: #4a3a1e;
}

html[data-theme="luxury"] body.staff-portal-app :where(h1, h2, h3, strong, label, .field span, .day-button) {
  color: var(--theme-text);
}

html[data-theme="luxury"] body.staff-portal-app :where(p, small, .muted) {
  color: var(--theme-muted);
}

html[data-theme="luxury"] body.staff-portal-app :where(input, select, textarea, option) {
  color: var(--theme-text);
  background: #100d09;
  border-color: var(--theme-line);
}

html[data-theme="luxury"] body.staff-portal-app :where(
  .tabs button.active, .primary-btn
) {
  color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35);
}

html[data-theme="dark"] body.staff-portal-app :where(
  .card,
  .staff-card,
  .tabs,
  .panel,
  .calendar,
  .calendar-day,
  .shift-card,
  .payroll-card,
  .payroll-day-card
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface);
  background-image: none;
}

html[data-theme="dark"] body.staff-portal-app .shift-form {
  background: #211826;
}

html[data-theme="dark"] body.staff-portal-app .calendar-grid {
  background: var(--theme-line);
  border-color: var(--theme-line);
}

html[data-theme="dark"] body.staff-portal-app :where(.weekday, .day) {
  color: var(--theme-text);
  background: var(--theme-surface);
}

html[data-theme="dark"] body.staff-portal-app .day.empty {
  background: #1b141f;
}

html[data-theme="dark"] body.staff-portal-app .day.today {
  background: #3a2031;
}

html[data-theme="dark"] body.staff-portal-app .day.one-shift {
  background: #4a3e24;
}

html[data-theme="dark"] body.staff-portal-app .day-button {
  color: var(--theme-text);
}

html[data-theme="dark"] body.staff-portal-app :where(.month-tools button, .secondary-btn, .tabs button:not(.active)) {
  color: #d9b9ed;
  background: #2c2133;
  border-color: var(--theme-line);
}

html[data-theme="dark"] body.staff-portal-app :where(h1, h2, h3, strong, label, .field span) {
  color: var(--theme-text);
}

html[data-theme="dark"] body.staff-portal-app :where(p, small, .muted) {
  color: var(--theme-muted);
}

html[data-theme="dark"] body.staff-portal-app :where(input, select, textarea, option) {
  color: var(--theme-text);
  background: #17121b;
  border-color: var(--theme-line);
}

@media (max-width: 760px) {
  .theme-toggle span {
    display: none;
  }

  .theme-toggle {
    width: 42px;
    min-width: 42px;
    padding-inline: 0;
  }

  .portal-hero-actions {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body,
  .app,
  .topbar,
  .panel,
  .card,
  .ipad-card,
  .ipad-tabs,
  input,
  select,
  textarea {
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  }
}

/* Shared themed controls and focus treatment */
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--theme-action);
  outline-offset: 2px;
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .app-link, .role, .outline, .clear, .detail, .pagination button,
  .row-action.ghost, .secondary-settings-button, .payroll-manual-toggle,
  .shift-toolbar button, .inventory-row-actions button, .inventory-dialog-head button,
  .store-detail-heading button, .wizard-close, .settings-tab:not(.active)
) {
  color: var(--theme-button-text);
  border-color: var(--theme-line);
  background: var(--theme-button-bg);
  box-shadow: none;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .field, .admin-center-notice-card, .admin-center-notice-main span,
  .customer-search, .inventory-search, .customer-search-results > button,
  .customer-empty-state, .customer-summary-cards article, .customer-history-record summary,
  .customer-history-items, .customer-avatar, .inventory-summary-cards article,
  .inventory-list-panel, .inventory-edit-dialog form, .inventory-admin-table,
  .portfolio-ranking-section, .portfolio-ranking-card, .portfolio-ranking-title,
  .portfolio-ranking-row, .portfolio-store-sales, .portfolio-empty,
  .store-detail-form fieldset, .store-detail-form .feature-flags label,
  .setup-wizard-dialog, .wizard-step, .wizard-feature-grid label, .wizard-review div,
  .settings-tabs, .receipt-settings-form fieldset, .receipt-settings-form .receipt-toggle,
  .receipt-kind-switch, .receipt-preview-heading, .sync-info, .settings-group,
  .settings-row, .menu-settings-head, .portal-settings-head, .ticket-summary-card,
  .ticket-edit-card, .ticket-order-detail, .ticket-order-meta div,
  .ticket-order-totals span, .sales-ticket-detail-card, .shift-next-event-card,
  .shift-summary div, .shift-calendar, .shift-weekday, .shift-day,
  .salary-builder, .salary-builder-bar, .salary-summary-card, .salary-staff-card,
  .active-ticket-detail-summary, .active-ticket-detail-items, .active-ticket-detail-total
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface);
  background-image: none;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .customer-search-results > button, .customer-history-items, .inventory-admin-table thead,
  .portfolio-ranking-row, .portfolio-store-sales, .wizard-review div, .settings-row,
  .ticket-order-meta div, .ticket-order-totals span, .shift-weekday,
  .salary-builder-bar, .active-ticket-detail-summary, .active-ticket-detail-total
) {
  background-color: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  table:not(.payroll-table), table:not(.payroll-table) tbody,
  table:not(.payroll-table) tr, table:not(.payroll-table) td
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  table:not(.payroll-table) thead, table:not(.payroll-table) th
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-scroll {
  overflow-x: auto;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table {
  color: var(--theme-text);
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table :where(th, td) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table thead th {
  color: var(--theme-text);
  background: var(--theme-surface-2);
  border-bottom-width: 2px;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table .payroll-name-row th {
  color: var(--theme-text);
  background: var(--theme-surface-2);
  border-top-color: var(--theme-action);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table tbody tr:nth-child(even) :where(th, td) {
  background: color-mix(in srgb, var(--theme-surface-2) 64%, var(--theme-surface));
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table tbody th {
  color: var(--theme-text);
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table .zero {
  color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table .payroll-input {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-surface) 82%, #000);
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table .payroll-input:focus {
  border-color: var(--theme-action);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-action) 30%, transparent);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table tfoot :where(th, td) {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-action) 18%, var(--theme-surface-2));
  border-color: var(--theme-action-2);
  font-weight: 900;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .payroll-table thead th {
  color: #f7e8bf;
  background: #342817;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .payroll-table tbody th {
  color: #f1d995;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-view-switch, .payroll-summary-metrics article, .payroll-summary-columns article, .payroll-summary-days) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-view-switch button {
  color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-view-switch button.active {
  color: var(--theme-action-text);
  background: var(--theme-action);
  box-shadow: none;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-button {
  color: var(--theme-action-2);
  border-color: var(--theme-line);
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-summary-metrics span, .payroll-summary-columns span, .payroll-summary-metrics p, .payroll-summary-columns small, .payroll-summary-day-list div span) {
  color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-summary-metrics strong, .payroll-summary-columns strong, .payroll-summary-days h4, .payroll-summary-day-list time, .payroll-summary-day-list div strong) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-summary-days > header, .payroll-summary-day-list article) {
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-summary-metrics article.deduct {
  background: color-mix(in srgb, var(--theme-surface) 88%, #9f4038);
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-dialog {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-dialog > header {
  background: var(--theme-surface-2);
  border-bottom: 1px solid var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-layout-list-head, .payroll-layout-check) {
  color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-row {
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-layout-row input[type="text"], .payroll-layout-row select, .payroll-layout-order button, .payroll-layout-reset, .payroll-layout-cancel) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-dialog > footer {
  border-color: var(--theme-line);
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-presets {
  border-color: var(--theme-line);
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-layout-presets > div strong, .payroll-layout-presets button b) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-layout-presets > div span, .payroll-layout-presets button small) {
  color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-presets button {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-presets button.active {
  color: var(--theme-action-2);
  border-color: var(--theme-action-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-action-2) 18%, transparent);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .payroll-summary-hero {
  color: #fff8e5;
  border: 1px solid #765c2b;
  background: linear-gradient(135deg, #120f0a, #2b2314 58%, #4a391a);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(.payroll-summary-hero span, .payroll-summary-days header span) {
  color: #dfbd68;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .payroll-summary-day-list div.total strong {
  color: #e2bf67;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .payroll-layout-save {
  color: #171109;
  background: linear-gradient(135deg, #e8ce8b, #b38a35);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-designer {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.salary-document-designer-head, .salary-document-actions) {
  border-color: var(--theme-line);
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.salary-document-designer-head h3, .salary-document-workspace h4, .salary-document-field-list strong) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.salary-document-designer-head p, .salary-document-templates > small, .salary-document-editor-head small, .salary-document-templates button span, .salary-document-field-list small, .salary-document-preview-label span, .salary-document-actions > span) {
  color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.salary-document-templates, .salary-document-editor, .salary-document-editor-head) {
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(.salary-document-templates button, .salary-document-field-list > label, .salary-document-title-field input) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-tax-field {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-tax-field :where(strong, small, label > span) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-tax-field input {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-preview-pane {
  background: color-mix(in srgb, var(--theme-surface-2) 86%, #000);
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .salary-document-templates button[aria-pressed="true"] {
  color: #f4dfaa;
  border-color: #b28b3e;
  background: #2c2415;
  box-shadow: inset 3px 0 0 #d4b467;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .salary-document-field-list input:checked {
  background: #c49a43;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .salary-document-actions button {
  color: #171109;
  background: linear-gradient(135deg, #e7cf92, #ad8434);
}

@media print {
  html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-scroll {
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: #fff;
  }

  html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table,
  html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table :where(th, td),
  html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .payroll-table :where(thead, tbody, tfoot) :where(th, td) {
    color: #111 !important;
    background: #fff !important;
    border-color: #252525 !important;
  }
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .customer-summary-cards strong, .inventory-summary-cards strong,
  .inventory-admin-table td:first-child strong, .inventory-dialog-head h2,
  .portfolio-ranking-card strong, .ticket-summary-card strong, .ticket-edit-card strong,
  .salary-builder-control strong, .salary-builder-period strong, .salary-summary-card strong,
  .shift-day-number
) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .inventory-note, .inventory-updated, .portfolio-ranking-empty,
  .customer-history-items small, .ticket-order-meta small
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .search-btn, .settings-form button:not(.secondary-settings-button),
  .receipt-settings-actions button, .customer-profile-actions button,
  .inventory-dialog-actions .primary, .shift-entry-form button, .shift-event-form button,
  .payroll-pdf-button, .salary-export-button,
  .setup-wizard-dialog footer button:not(.secondary-settings-button),
  .portfolio-actions button:not(.secondary-settings-button), .store-detail-actions button,
  .row-action:not(.ghost):not(.delete), .settings-tab.active, .receipt-kind-switch button.active
) {
  color: var(--theme-action-text);
  border-color: transparent;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2));
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .search-btn, .settings-form button:not(.secondary-settings-button):not(.delete-category-button),
  .receipt-settings-actions button, .customer-profile-actions button,
  .inventory-dialog-actions .primary, .shift-entry-form button, .shift-event-form button,
  .payroll-pdf-button, .salary-export-button,
  .setup-wizard-dialog footer button:not(.secondary-settings-button),
  .portfolio-actions button:not(.secondary-settings-button), .store-detail-actions button,
  .row-action:not(.ghost):not(.delete), .settings-tab.active, .receipt-kind-switch button.active
) {
  color: var(--theme-action-text);
  border-color: transparent;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2));
  box-shadow: 0 6px 18px rgba(126, 91, 30, 0.2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .shift-day.has-one-shift {
  background: #4a3e24;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .shift-day.is-understaffed {
  background: #493617;
  box-shadow: inset 0 0 0 2px #d1a64a;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .shift-day.has-one-shift {
  background: #3b2d18;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-day.saturday .shift-day-number
) {
  color: #7eb6ff;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-day.sunday .shift-day-number, .shift-day.holiday .shift-day-number
) {
  color: #ff8798;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-detail-dialog, .shift-minimum-dialog, .shift-detail-head, .shift-detail-footer,
  .shift-minimum-actions, .shift-detail-row, .shift-minimum-body fieldset
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-detail-head, .shift-detail-footer, .shift-minimum-actions, .shift-detail-row
) {
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-detail-head h2, .shift-detail-row strong
) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-detail-head small, .shift-detail-footer span, .shift-detail-row span,
  .shift-detail-row em, .shift-detail-empty, .shift-minimum-weekdays label,
  .shift-minimum-date-row label, .shift-minimum-body legend, .shift-minimum-body fieldset > small
) {
  color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .shift-detail-head > button, .shift-detail-row button, .shift-detail-footer button,
  .shift-minimum-actions button, .shift-minimum-weekdays input, .shift-minimum-date-row input
) {
  color: var(--theme-button-text);
  border-color: var(--theme-line);
  background: var(--theme-button-bg);
}

/* Field app: all inner controls and sub-surfaces follow the selected mode. */
html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .ipad-view :where(
  button:not(.theme-toggle), .empty-order, .payment-state, .held-list button,
  .history-summary div, .history-list .history-row, .history-detail-button,
  .ticket-detail-toggle button, .vault-history-head, .vault-day,
  .vault-history-detail div, .vault-summary div, .vault-fixed-change,
  .vault-collection-list-row, .vault-count-row, .vault-shopping,
  .vault-shopping-row, .timecard-row, .complete-receipt div, .payment-summary div
) {
  color: var(--theme-button-text);
  border-color: var(--theme-line);
  background-color: var(--theme-button-bg);
  background-image: none;
  box-shadow: none;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .assigned-staff, .order-note, .ticket-detail-row, .customer-app-result,
  .customer-app-summary > div, .customer-app-profile, .customer-app-history details,
  .stock-editor, .vault-calendar, .vault-weekday, .vault-day.is-empty,
  .vault-day.has-record, .vault-day.is-today, .vault-day.selected, .ticket-total-bar
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface-2);
  background-image: none;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .section-heading h2, .open-ticket-heading h3, .stock-row strong,
  .customer-app-summary strong, .customer-app-profile label,
  .customer-app-history summary strong, .customer-app-item, .order-item b,
  .payment-state strong, .ticket-total-bar strong, .history-summary strong,
  .ticket-detail-row b, .vault-history-head strong, .vault-day-number,
  .vault-history-detail strong, .vault-summary strong, .vault-fixed-change strong,
  .vault-collection-list-row strong, .vault-count-row span, .vault-shopping-row,
  .confirm-dialog p, .complete-dialog h2, .complete-receipt strong,
  .payment-summary strong, .staff-picker h2, .month-head h2, .current-time
) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .stock-row-note, .ticket-detail-row small, .history-summary small,
  .vault-history-detail small, .customer-app-item small
) {
  color: var(--theme-muted);
}

html[data-theme="luxury"] body.ipad-app :where(
  .section-heading > span, .heading-actions > span, .vault-heading-actions > span,
  .open-ticket-heading > span, .stock-row-label
) {
  color: #d8b965;
}

html[data-theme="dark"] body.ipad-app .ipad-view :where(
  .sync-action, .paid-action, .stock-add-button, .stock-save-button,
  .customer-app-profile-actions button, .category-row button.selected,
  .manual-category-button, .vault-heading-actions button.selected,
  .vault-collect-actions button, .vault-shopping-form button,
  .choice-grid button.selected, #complete-new, #payment-confirm, #edit-save,
  .punch-in, .punch-out:not(:disabled), .payment-methods button.selected,
  .staff-add-grid button.selected, .table-button-grid button.selected
) {
  color: var(--theme-action-text);
  border-color: transparent;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2));
}

html[data-theme="luxury"] body.ipad-app .ipad-view :where(
  .sync-action, .paid-action, .stock-add-button, .stock-save-button,
  .customer-app-profile-actions button, .category-row button.selected,
  .manual-category-button, .vault-heading-actions button.selected,
  .vault-collect-actions button, .vault-shopping-form button,
  .choice-grid button.selected, #complete-new, #payment-confirm, #edit-save,
  .punch-in, .punch-out:not(:disabled), .payment-methods button.selected,
  .staff-add-grid button.selected, .table-button-grid button.selected
) {
  color: var(--theme-action-text);
  border-color: transparent;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2));
  box-shadow: 0 6px 16px rgba(126, 91, 30, 0.2);
}

/* Staff portal: complete cards, forms and button states. */
html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app :where(
  .staff-name-display, .notice, .summary-box, .password-change,
  .payroll-day, .shift-chip:not(.mine)
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface-2);
  background-image: none;
}

/* Luxury contrast pass: newer screens must not inherit light-theme gray/purple text. */
html[data-theme="luxury"] {
  color-scheme: dark;
}

html[data-theme="luxury"] :where(input, select, textarea, button) {
  caret-color: var(--theme-action);
}

html[data-theme="luxury"] :where(input, textarea)::placeholder {
  color: #bcae95 !important;
  opacity: 1;
}

html[data-theme="luxury"] :where(input, select, textarea):disabled {
  color: #c7b99f !important;
  -webkit-text-fill-color: #c7b99f;
  opacity: 0.72;
}

html[data-theme="luxury"] :where(input[type="date"], input[type="month"], input[type="time"]) {
  color-scheme: dark;
}

/* Admin: cards, detail views, forms, tables and helper copy. */
html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .app, .content, .topbar, .filters, .panel, .stat-card, .modal-card, dialog,
  .settings-card, .settings-section, .settings-group, .settings-row,
  .customer-search-results, .customer-profile-panel, .customer-history-record,
  .inventory-list-panel, .inventory-admin-table, .receipt-settings-panel,
  .receipt-preview, .sales-chart-panel, .sales-summary-card, .salary-builder,
  .salary-summary-card, .salary-staff-card, .ticket-edit-card,
  .ticket-order-detail, .active-ticket-detail-items
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .panel, .stat-card, .filters, .modal-card, dialog, .settings-card,
  .settings-section, .settings-group, .customer-search-results,
  .customer-profile-panel, .customer-history-record, .inventory-list-panel,
  .receipt-settings-panel, .receipt-preview, .sales-chart-panel,
  .sales-summary-card, .salary-builder, .salary-summary-card,
  .salary-staff-card, .ticket-edit-card, .ticket-order-detail
) {
  background-color: var(--theme-surface) !important;
  background-image: none !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .panel, .stat-card, .filters, .modal-card, dialog, .settings-card,
  .settings-section, .settings-group, .customer-profile-panel,
  .customer-history-record, .inventory-list-panel, .receipt-settings-panel,
  .sales-chart-panel, .salary-builder, .ticket-edit-card
) :where(p, small, em, dt, .muted, .hint, .field-note, .empty-state, .status-text) {
  color: var(--theme-muted) !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .panel, .stat-card, .filters, .modal-card, dialog, .settings-card,
  .settings-section, .settings-group, .customer-profile-panel,
  .customer-history-record, .inventory-list-panel, .receipt-settings-panel,
  .sales-chart-panel, .salary-builder, .ticket-edit-card
) :where(h1, h2, h3, h4, strong, b, label, legend, dd, summary) {
  color: var(--theme-text) !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  td, .table-cell, .ticket-order-item, .ticket-order-totals,
  .sales-ticket-detail-card, .customer-history-item, .salary-staff-card dd,
  .receipt-preview-body, .wizard-review
) {
  color: #f5e9d2 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .field, input, select, textarea, .customer-search, .inventory-search,
  .editable-table-input, .payroll-input
) {
  color: #fff7e8 !important;
  -webkit-text-fill-color: #fff7e8;
  background-color: #100d09 !important;
  border-color: #705b3b !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .settings-row, .menu-settings-head, .portal-settings-head,
  .customer-search-results > button, .customer-history-items,
  .ticket-order-meta div, .ticket-order-totals span, .salary-builder-bar,
  .active-ticket-detail-summary, .active-ticket-detail-total,
  table:not(.payroll-table) thead, table:not(.payroll-table) th
) {
  color: #f8e9c4 !important;
  background-color: var(--theme-surface-2) !important;
  border-color: var(--theme-line) !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  button:not(.theme-toggle):not(.active):not(.selected):not(.primary),
  .app-link, .outline, .clear, .detail, .secondary-settings-button,
  .row-action.ghost, .settings-tab:not(.active), .segmented-control button:not(.selected)
) {
  color: var(--theme-button-text) !important;
  background-color: var(--theme-button-bg) !important;
  border-color: var(--theme-line) !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  a:not(.nav-item), .stat-link, .delta a, .inventory-updated,
  .customer-history-record summary::marker
) {
  color: #e7ca82 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .search-btn, .settings-form button:not(.secondary-settings-button):not(.delete-category-button),
  .receipt-settings-actions button, .customer-profile-actions button,
  .inventory-dialog-actions .primary, .shift-entry-form button, .shift-event-form button,
  .payroll-pdf-button, .salary-export-button,
  .setup-wizard-dialog footer button:not(.secondary-settings-button),
  .portfolio-actions button:not(.secondary-settings-button), .store-detail-actions button,
  .row-action:not(.ghost):not(.delete), .settings-tab.active,
  .receipt-kind-switch button.active, .back-mode-switch button.active
) {
  color: #181109 !important;
  background: linear-gradient(135deg, #e1c77f, #a77d35) !important;
  border-color: #d5b96d !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .delete, .delete-category-button, [data-delete-menu], [data-delete-staff],
  [data-delete-menu-category]
) {
  color: #ff9aaa !important;
  background: #32171a !important;
  border-color: #7d3944 !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .badge, .role, .ticket-status-pill, .shift-summary div,
  .customer-summary-cards article, .inventory-summary-cards article
) {
  color: #f4e6ca !important;
  border-color: #705b3b !important;
}

/* Ticket/iPad app: every panel, popup, row and secondary button stays legible. */
html[data-theme="luxury"] body.ipad-app :where(
  .ipad-view, .ipad-card, .open-ticket-card, .dashboard-active-ticket-card,
  .table-timer-card, .ticket-staff-card, .order-card, .menu-card, .staff-card,
  .stock-row, .stock-editor, .customer-card, .history-card, .timecard-card,
  .vault-card, .ticket-detail-row, .assigned-staff, .order-note,
  .customer-app-result, .customer-app-profile, .customer-app-history details,
  .vault-calendar, .vault-day, .ticket-total-bar, dialog,
  .payment-dialog, .edit-dialog, .menu-staff-dialog, .complete-dialog,
  .confirm-dialog, .table-settings-dialog, .ticket-config-panel,
  .new-ticket-wizard-dialog, .ticket-preview-dialog
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  .ipad-card, .open-ticket-card, .dashboard-active-ticket-card,
  .table-timer-card, .ticket-staff-card, .order-card, .menu-card, .staff-card,
  .stock-row, .stock-editor, .customer-card, .history-card, .timecard-card,
  .vault-card, dialog, .payment-dialog, .edit-dialog, .menu-staff-dialog,
  .complete-dialog, .confirm-dialog, .table-settings-dialog,
  .new-ticket-wizard-dialog, .ticket-preview-dialog
) {
  background-color: var(--theme-surface) !important;
  background-image: none !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  .ipad-view, .ipad-card, .open-ticket-card, .order-card, .menu-card,
  .stock-row, .stock-editor, .customer-card, .history-card, .timecard-card,
  .vault-card, dialog, .table-settings-dialog, .new-ticket-wizard-dialog,
  .ticket-preview-dialog
) :where(p, small, em, .muted, .hint, .open-ticket-empty, .stock-row-note) {
  color: var(--theme-muted) !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  .ipad-view, .ipad-card, .open-ticket-card, .order-card, .menu-card,
  .stock-row, .stock-editor, .customer-card, .history-card, .timecard-card,
  .vault-card, dialog, .table-settings-dialog, .new-ticket-wizard-dialog,
  .ticket-preview-dialog
) :where(h1, h2, h3, h4, strong, b, label, legend, summary) {
  color: var(--theme-text) !important;
}

html[data-theme="luxury"] body.ipad-app :where(input, select, textarea, option) {
  color: #fff7e8 !important;
  -webkit-text-fill-color: #fff7e8;
  background-color: #100d09 !important;
  border-color: #705b3b !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  button:not(.theme-toggle):not(.selected):not(.active):not(.primary),
  .category-row button:not(.selected), .payment-methods button:not(.selected),
  .choice-grid button:not(.selected), .stock-mode-tabs button:not(.active),
  .vault-heading-actions button:not(.selected)
) {
  color: var(--theme-button-text) !important;
  background-color: var(--theme-button-bg) !important;
  border-color: var(--theme-line) !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  .ticket-detail-row, .assigned-staff, .order-note, .customer-app-result,
  .customer-app-summary > div, .customer-app-profile,
  .customer-app-history details, .vault-calendar, .vault-weekday,
  .vault-day, .ticket-total-bar, .timer-floor-group,
  .ticket-menu-editor-row, .set-plan-setting-row, .agency-setting-row
) {
  color: var(--theme-text) !important;
  background-color: var(--theme-surface-2) !important;
  border-color: var(--theme-line) !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  .ipad-tab.active, .stock-mode-tabs button.active, .category-row button.selected,
  .payment-methods button.selected, .choice-grid button.selected,
  .staff-add-grid button.selected, .table-button-grid button.selected,
  .primary, .sync-action, .paid-action, #payment-confirm, #edit-save,
  #complete-new, .wizard-next, .wizard-confirm
) {
  color: #181109 !important;
  -webkit-text-fill-color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35) !important;
  border-color: #d5b96d !important;
}

html[data-theme="luxury"] body.ipad-app :where(
  [data-remove-item], [data-preview-remove], [data-delete-edit-menu],
  [data-delete-edit-menu-category], [data-remove-edit-plan],
  [data-remove-edit-agency], .stock-delete-button
) {
  color: #ff9aaa !important;
  background: #32171a !important;
  border-color: #7d3944 !important;
}

/* Staff portal: calendar, payroll details and form controls. */
html[data-theme="luxury"] body.staff-portal-app :where(
  .card, .staff-card, .tabs, .panel, .calendar, .calendar-day,
  .shift-card, .payroll-card, .payroll-day-card, .notice,
  .summary-box, .password-change, .staff-name-display
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background-color: var(--theme-surface) !important;
  background-image: none !important;
}

html[data-theme="luxury"] body.staff-portal-app :where(
  .card, .staff-card, .panel, .calendar, .calendar-day,
  .shift-card, .payroll-card, .payroll-day-card, .notice,
  .summary-box, .password-change
) :where(p, small, em, .muted, dt) {
  color: var(--theme-muted) !important;
}

html[data-theme="luxury"] body.staff-portal-app :where(
  h1, h2, h3, h4, strong, b, label, .field span, .day-button, dd
) {
  color: var(--theme-text) !important;
}

html[data-theme="luxury"] body.staff-portal-app :where(input, select, textarea, option) {
  color: #fff7e8 !important;
  -webkit-text-fill-color: #fff7e8;
  background-color: #100d09 !important;
  border-color: #705b3b !important;
}

html[data-theme="luxury"] body.staff-portal-app :where(
  .month-tools button, .secondary-btn, .tabs button:not(.active)
) {
  color: var(--theme-button-text) !important;
  background-color: var(--theme-button-bg) !important;
  border-color: var(--theme-line) !important;
}

html[data-theme="luxury"] body.staff-portal-app :where(
  .tabs button.active, .primary-btn, .today .day-button, .shift-chip.mine
) {
  color: #181109 !important;
  -webkit-text-fill-color: #181109;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app :where(
  .summary-box strong, .payroll-day-grid b, .payroll-day-head strong
) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app :where(
  input[type="date"], input[type="month"], input[type="time"]
) {
  color-scheme: dark;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app :where(
  .day.saturday .day-button
) {
  color: #7db2ff;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app :where(
  .day.sunday .day-button, .day.holiday .day-button
) {
  color: #ff8795;
}

html[data-theme="dark"] body.staff-portal-app :where(
  .month-tools button, .secondary-btn, .tabs button:not(.active)
) {
  color: var(--theme-button-text);
  border-color: var(--theme-line);
  background: var(--theme-button-bg);
}

html[data-theme="luxury"] body.staff-portal-app :where(
  .month-tools button, .secondary-btn, .tabs button:not(.active)
) {
  color: var(--theme-button-text);
  border-color: var(--theme-line);
  background: var(--theme-button-bg);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app .shift-delete-btn {
  color: #ffd7df;
  border-color: #873a4d;
  background: #5b2232;
}

/* Final contrast isolation: printable white surfaces must not inherit dark-theme text. */
html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-sheet {
  color: #171717 !important;
  color-scheme: light;
  background: #ffffff !important;
  border-color: #bdb6ae !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-sheet :where(h1, h2, h3, h4, strong, b, span, small) {
  color: #171717 !important;
  -webkit-text-fill-color: #171717;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-sheet .salary-document-sheet-brand {
  color: #6b521f !important;
  -webkit-text-fill-color: #6b521f;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-sheet .salary-document-person small {
  color: #4f4943 !important;
  -webkit-text-fill-color: #4f4943;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .salary-document-designer-head > strong {
  color: #35260b !important;
  -webkit-text-fill-color: #35260b;
  background: #f2dfaa !important;
  border-color: #b99445 !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .receipt-preview-heading {
  color: var(--theme-text) !important;
  background: var(--theme-surface-2) !important;
  border-color: var(--theme-line) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .receipt-preview-heading strong {
  color: var(--theme-text) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .receipt-preview-heading > span {
  color: var(--theme-button-text) !important;
  background: var(--theme-button-bg) !important;
  border: 1px solid var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .complete-receipt div {
  color: var(--theme-text) !important;
  background: var(--theme-surface-2) !important;
  border-color: var(--theme-line) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .complete-receipt span {
  color: var(--theme-muted) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .complete-receipt strong {
  color: var(--theme-text) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .complete-receipt .complete-total strong {
  color: var(--theme-action) !important;
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: #c8bccb !important;
  opacity: 1;
}

/* Final iPad contrast guard: modal children must follow the selected theme too. */
html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .payment-summary div,
  .ticket-detail-panel,
  .payment-table-detail,
  .complete-receipt div,
  .choice-grid button,
  .payment-methods button,
  .manual-menu-type-row button,
  .menu-staff-grid button,
  .manual-menu-form input,
  .manual-back-list input,
  .edit-field input,
  #payment-cancel,
  #edit-cancel,
  #complete-close
) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text);
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
  background-image: none !important;
  box-shadow: none;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .payment-summary span,
  .complete-receipt span,
  .payment-methods button span,
  .menu-staff-dialog p,
  .manual-menu-form label,
  .manual-back-list label,
  .edit-field span
) {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .payment-summary strong,
  .complete-receipt strong,
  .confirm-dialog p,
  .complete-dialog h2,
  .staff-picker h2,
  .month-head h2
) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .payment-summary .payment-grand,
html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .complete-receipt .complete-total {
  color: var(--theme-text) !important;
  border-color: var(--theme-action-2) !important;
  background: color-mix(in srgb, var(--theme-action) 13%, var(--theme-surface-2)) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .payment-summary .payment-grand strong,
html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .complete-receipt .complete-total strong {
  color: var(--theme-action) !important;
  -webkit-text-fill-color: var(--theme-action);
}

html[data-theme="dark"] body.ipad-app .payment-summary .payment-grand strong,
html[data-theme="dark"] body.ipad-app .complete-receipt .complete-total strong {
  color: #ff8fc4 !important;
  -webkit-text-fill-color: #ff8fc4;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .payment-methods button.selected,
  .manual-menu-type-row button.selected,
  .menu-staff-grid button.selected,
  .choice-grid button.selected,
  #payment-confirm,
  #edit-save,
  #complete-new
) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text);
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .payment-methods button.selected span,
  .payment-methods button.selected strong,
  .payment-methods button.selected svg,
  .manual-menu-type-row button.selected,
  .menu-staff-grid button.selected strong,
  .menu-staff-grid button.selected small,
  .choice-grid button.selected
) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text);
}

html[data-theme="luxury"] body.ipad-app :where(input, textarea)::placeholder {
  color: #c9b999 !important;
  opacity: 1;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .ticket-detail-toggle button,
  #menu-staff-cancel,
  #manual-menu-cancel
) {
  color: var(--theme-button-text) !important;
  -webkit-text-fill-color: var(--theme-button-text);
  border-color: var(--theme-line) !important;
  background: var(--theme-button-bg) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  #menu-staff-confirm,
  #manual-menu-confirm
) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text);
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .staff-chips button.selected,
html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .customer-app-result.active {
  color: var(--theme-text) !important;
  border-color: var(--theme-action) !important;
  background: color-mix(in srgb, var(--theme-action) 18%, var(--theme-surface-2)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-action) 22%, transparent);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .open-ticket-table em {
  color: #bfead7 !important;
  -webkit-text-fill-color: #bfead7;
  background: #173c2d !important;
}

/* Active ticket cards: keep operational details readable on dark surfaces. */
html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .open-ticket-meta span {
  color: #d8cddd !important;
  -webkit-text-fill-color: #d8cddd;
  font-size: 11px;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .open-ticket-amount {
  color: #fff7ff !important;
  -webkit-text-fill-color: #fff7ff;
  font-size: 18px;
}

html[data-theme="luxury"] body.ipad-app .avatar-chip.coral { background: linear-gradient(135deg, #8d5637, #5a3022) !important; }
html[data-theme="luxury"] body.ipad-app .avatar-chip.blue { background: linear-gradient(135deg, #425873, #26384d) !important; }
html[data-theme="luxury"] body.ipad-app .avatar-chip.amber { background: linear-gradient(135deg, #c09a4b, #785b24) !important; }
html[data-theme="luxury"] body.ipad-app .avatar-chip.mint { background: linear-gradient(135deg, #61745b, #354535) !important; }
html[data-theme="luxury"] body.ipad-app .avatar-chip.free { background: linear-gradient(135deg, #d3b86c, #8f6d2f) !important; }

/* Staff portal colored controls keep their own readable foregrounds. */
html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app :where(
  .tabs button.active,
  .primary-btn,
  .today .day-button,
  .shift-chip.mine
) :where(span, strong, small, b, svg) {
  color: inherit !important;
  -webkit-text-fill-color: inherit;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app .shift-chip.mine small {
  color: inherit !important;
  -webkit-text-fill-color: inherit;
  opacity: .9;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app .day:not(.today).saturday .day-button {
  color: #7db2ff;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app :where(.day:not(.today).sunday, .day:not(.today).holiday) .day-button {
  color: #ff8795;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.staff-portal-app .day.today .day-button {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text);
}

html[data-theme="luxury"] body.staff-portal-app .status-pill {
  color: #f4dfaa !important;
  border-color: rgba(224, 196, 127, .46) !important;
  background: rgba(201, 164, 91, .15) !important;
}

html[data-theme="luxury"] body.staff-portal-app .event-pink { background: #713a4b !important; }
html[data-theme="luxury"] body.staff-portal-app .event-blue { background: #3f536e !important; }
html[data-theme="luxury"] body.staff-portal-app .event-green { background: #405d49 !important; }
html[data-theme="luxury"] body.staff-portal-app .event-gold { color: #181109 !important; background: #d5b967 !important; }

/* Admin pages: newly added components share the same dark/luxury surfaces. */
html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .sales-chart-mobile-card,
  #sales .table-footer
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  background-image: none !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .sales-chart-mobile-head strong,
  .sales-chart-mobile-card strong
) {
  color: var(--theme-text) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .sales-chart-mobile-head span,
  .sales-chart-mobile-card p
) {
  color: var(--theme-muted) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .settings-row button,
  .menu-row-actions button
) {
  color: var(--theme-button-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-button-bg) !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .portfolio-hero {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: radial-gradient(circle at 80% 10%, rgba(201, 164, 91, .18), transparent 32%), linear-gradient(135deg, #17110c, #2a2014) !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .store-detail-shell {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: linear-gradient(135deg, #17110c, #2a2014) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .staff-type-badge,
  .ticket-status-pill,
  .ticket-escort-pill,
  .store-health,
  .crm-connection-status
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: color-mix(in srgb, var(--theme-action) 14%, var(--theme-surface-2)) !important;
  background-image: none !important;
}

/* Admin contrast audit 2: ranking, attendance and legacy light-only rows. */
html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .cast-row,
  .empty-side,
  .news li,
  .portal-settings-head,
  .admin-entry-form,
  .ticket-entry-form,
  .attendance-entry-form,
  .sales-chart-mobile-head span,
  .sales-chart-mobile-breakdown,
  .table-footer
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .cast-row strong,
  .news li strong,
  .sales-chart-mobile-breakdown strong
) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .cast-row small,
  .news li p,
  .sales-chart-mobile-breakdown span,
  .table-footer > span
) {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted);
}

/* Status colors use dark semantic surfaces instead of pale light-theme fills. */
html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .badge.danger {
  color: #c8f5dc !important;
  -webkit-text-fill-color: #c8f5dc;
  border-color: #397356 !important;
  background: #173b2c !important;
  background-image: none !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) .badge.paid {
  color: #f4e6ca !important;
  -webkit-text-fill-color: #f4e6ca;
  border-color: #705b3b !important;
  background: #302619 !important;
  background-image: none !important;
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .badge.paid {
  color: #e8dff0 !important;
  -webkit-text-fill-color: #e8dff0;
  border-color: #66556f !important;
  background: #35293c !important;
}

html[data-theme="luxury"] body:not(.ipad-app):not(.staff-portal-app) .rank {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text);
  border: 1px solid #e5cd8a !important;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
}

/* Legacy controls that still declare white backgrounds in component CSS. */
html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .admin-center-notice-close,
  .detail,
  .clear,
  .pagination button,
  .inventory-row-actions button,
  .menu-row-actions button,
  .shift-toolbar button,
  .payroll-manual-toggle
) {
  color: var(--theme-button-text) !important;
  -webkit-text-fill-color: var(--theme-button-text);
  border-color: var(--theme-line) !important;
  background: var(--theme-button-bg) !important;
  background-image: none !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .editable-table-input,
  .editable-table-select,
  .payroll-input
) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text);
  border-color: var(--theme-line) !important;
  background: var(--deep) !important;
  color-scheme: dark;
}

/* Remaining legacy admin cards found by the fixed-light-background audit. */
html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .cast-select,
  .time-status div,
  .live-grid div,
  .order-head,
  .ticket-total,
  .link-card,
  .crm-integration-card,
  .active-ticket-detail-dialog
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
  background-image: none !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .cast-select strong,
  .time-status strong,
  .live-grid strong,
  .link-card strong,
  .ticket-total strong,
  .crm-integration-card strong
) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body:not(.ipad-app):not(.staff-portal-app) :where(
  .stat-escort-badge,
  .ticket-escort-pill
) {
  color: #ffd7df !important;
  -webkit-text-fill-color: #ffd7df;
  border-color: #84414e !important;
  background: #401c24 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* iPad controls missed by earlier panel-level theme rules. */
html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .ticket-subgrid button,
  .qty-controls,
  .qty-controls button,
  .qty-controls b,
  .ghost-action,
  .vault-cash-base-input,
  .table-editor-badge,
  .table-editor-badge.other
) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text);
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
  background-image: none !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .danger-action {
  color: #ffb8c3 !important;
  -webkit-text-fill-color: #ffb8c3;
  border-color: #81404c !important;
  background: #38191f !important;
}

/* Admin cast directory avatars: keep every saved color visible in all themes. */
html body .admin-cast-directory-item .avatar-chip.coral {
  background: linear-gradient(135deg, #f48ac2, #df3f8c) !important;
  background-image: linear-gradient(135deg, #f48ac2, #df3f8c) !important;
}

html body .admin-cast-directory-item .avatar-chip.blue {
  background: linear-gradient(135deg, #8c56b8, #6e3d93) !important;
  background-image: linear-gradient(135deg, #8c56b8, #6e3d93) !important;
}

html body .admin-cast-directory-item .avatar-chip.amber {
  background: linear-gradient(135deg, #d985bf, #8053a6) !important;
  background-image: linear-gradient(135deg, #d985bf, #8053a6) !important;
}

html body .admin-cast-directory-item .avatar-chip.mint {
  background: linear-gradient(135deg, #86709b, #503d61) !important;
  background-image: linear-gradient(135deg, #86709b, #503d61) !important;
}

html[data-theme="luxury"] body .admin-cast-directory-item .avatar-chip.coral {
  background: linear-gradient(135deg, #9a6040, #633725) !important;
  background-image: linear-gradient(135deg, #9a6040, #633725) !important;
}

html[data-theme="luxury"] body .admin-cast-directory-item .avatar-chip.blue {
  background: linear-gradient(135deg, #526a82, #2f4255) !important;
  background-image: linear-gradient(135deg, #526a82, #2f4255) !important;
}

html[data-theme="luxury"] body .admin-cast-directory-item .avatar-chip.amber {
  background: linear-gradient(135deg, #c7a45d, #806228) !important;
  background-image: linear-gradient(135deg, #c7a45d, #806228) !important;
}

html[data-theme="luxury"] body .admin-cast-directory-item .avatar-chip.mint {
  background: linear-gradient(135deg, #718069, #3f513e) !important;
  background-image: linear-gradient(135deg, #718069, #3f513e) !important;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body .cast-profile-dialog {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  background-image: none !important;
  color-scheme: dark;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body .cast-profile-head,
html:is([data-theme="dark"], [data-theme="luxury"]) body .cast-profile-head :where(h2, small, span, button, svg) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
}

html[data-theme="luxury"] body .cast-profile-identity .avatar-chip.coral {
  background: linear-gradient(135deg, #9a6040, #633725) !important;
}

html[data-theme="luxury"] body .cast-profile-identity .avatar-chip.blue {
  background: linear-gradient(135deg, #526a82, #2f4255) !important;
}

html[data-theme="luxury"] body .cast-profile-identity .avatar-chip.amber {
  background: linear-gradient(135deg, #c7a45d, #806228) !important;
}

html[data-theme="luxury"] body .cast-profile-identity .avatar-chip.mint {
  background: linear-gradient(135deg, #718069, #3f513e) !important;
}