/* Dialogs use paired theme colours, never a legacy gradient with a new
   foreground. Layout, selection states and white print previews stay intact. */
html[data-theme] body {
  --dialog-surface: var(--admin-surface, var(--portal-surface, var(--theme-surface, var(--surface, #fff))));
  --dialog-raised: var(--admin-raised, var(--portal-surface-2, var(--theme-surface-2, var(--surface-2, #edf3fa))));
  --dialog-text: var(--admin-text, var(--portal-text, var(--theme-text, var(--text, #172033))));
  --dialog-muted: var(--admin-muted, var(--portal-muted, var(--theme-muted, var(--muted, #596579))));
  --dialog-line: var(--admin-line, var(--portal-line, var(--theme-line, var(--line, #aebdd0))));
}

html[data-theme] body :is(
  #active-ticket-detail-dialog, dialog, [role="dialog"], .transport-master-dialog, .cast-profile-dialog,
  .shift-detail-dialog, .shift-minimum-dialog, .inventory-edit-dialog,
  .payroll-layout-dialog, .numeric-keypad-dialog, .table-settings-dialog,
  .new-ticket-wizard-dialog, .cast-info-dialog, .shift-day-detail-dialog,
  .ticket-preview-dialog, .payment-dialog, .edit-dialog, .menu-staff-dialog,
  .confirm-dialog, .alarm-dialog, .complete-dialog
) {
  color: var(--dialog-text) !important;
  background: var(--dialog-surface) !important;
  border-color: var(--dialog-line) !important;
}

/* The explicit header ID keeps this shared layer above old per-page rules. */
html[data-theme] body :is(
  #active-ticket-detail-head, .transport-master-dialog-head, .cast-profile-head,
  .shift-detail-head, .inventory-dialog-head, .payroll-layout-dialog > header,
  .numeric-keypad-head, .table-settings-dialog-head, .new-ticket-wizard-head,
  .cast-info-head, .shift-day-detail-head, .ticket-preview-head,
  .payment-dialog > .section-heading, .edit-dialog > .section-heading,
  .menu-staff-dialog > .section-heading, .confirm-dialog > .section-heading
) {
  color: var(--dialog-text) !important;
  background: var(--dialog-raised) !important;
  border-color: var(--dialog-line) !important;
}

html[data-theme] body :is(
  #active-ticket-detail-head, .transport-master-dialog-head, .cast-profile-head,
  .shift-detail-head, .inventory-dialog-head, .payroll-layout-dialog > header,
  .numeric-keypad-head, .table-settings-dialog-head, .new-ticket-wizard-head,
  .cast-info-head, .shift-day-detail-head, .ticket-preview-head,
  .payment-dialog > .section-heading, .edit-dialog > .section-heading,
  .menu-staff-dialog > .section-heading, .confirm-dialog > .section-heading
) :is(h2, h3, strong, b, p, small, span):not(.avatar-chip):not(.avatar) {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html[data-theme] body :is(
  #active-ticket-detail-head, .transport-master-dialog-head, .cast-profile-head,
  .shift-detail-head, .inventory-dialog-head, .payroll-layout-dialog > header,
  .numeric-keypad-head, .table-settings-dialog-head, .new-ticket-wizard-head,
  .cast-info-head, .shift-day-detail-head, .ticket-preview-head,
  .payment-dialog > .section-heading, .edit-dialog > .section-heading,
  .menu-staff-dialog > .section-heading, .confirm-dialog > .section-heading
) :is(p, small, div > span:not(.avatar-chip):not(.avatar):not(.ticket-preview-table)) {
  color: var(--dialog-muted) !important;
}

html[data-theme] body :is(
  #active-ticket-detail-head, .transport-master-dialog-head, .cast-profile-head,
  .shift-detail-head, .inventory-dialog-head, .payroll-layout-dialog > header,
  .numeric-keypad-head, .table-settings-dialog-head, .new-ticket-wizard-head,
  .cast-info-head, .shift-day-detail-head, .ticket-preview-head
) > button {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-surface) !important;
  border-color: var(--dialog-line) !important;
}

html[data-theme] body :is(#close-active-ticket-detail, .ticket-preview-close,
  .payroll-layout-close, .shift-day-detail-close, #close-transport-master,
  #close-cast-profile, #close-shift-detail, #close-shift-minimum,
  #inventory-dialog-close, #new-ticket-wizard-close, #cast-info-close,
  #table-settings-close, #admin-numeric-keypad-close, #numeric-keypad-close) :is(svg, i) {
  color: inherit !important;
  stroke: currentColor !important;
}

/* The reported summary cards were still pale pink even in dark modes. */
html[data-theme] body #active-ticket-detail-dialog :is(
  .active-ticket-detail-summary, .active-ticket-detail-items,
  .active-ticket-detail-items > div
) {
  color: var(--dialog-text) !important;
  background: var(--dialog-surface) !important;
  border-color: var(--dialog-line) !important;
}
html[data-theme] body #active-ticket-detail-dialog :is(
  .active-ticket-detail-summary > div, .active-ticket-detail-total
) {
  color: var(--dialog-text) !important;
  background: var(--dialog-raised) !important;
  border-color: var(--dialog-line) !important;
}
html[data-theme] body #active-ticket-detail-dialog :is(strong, b) {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme] body #active-ticket-detail-dialog :is(
  .active-ticket-detail-summary span, .active-ticket-detail-items small,
  .active-ticket-detail-empty, .active-ticket-detail-total span
) {
  color: var(--dialog-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme] body #ticket-preview-table {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-surface) !important;
  border-color: var(--dialog-line) !important;
}

html[data-theme="light"] { --dialog-action: #1463d6; --dialog-on-action: #ffffff; --dialog-danger: #a5203d; --dialog-overlay: rgba(12, 20, 32, .54); }
html[data-theme="nox"] { --dialog-action: #9bc0e2; --dialog-on-action: #101d2a; --dialog-danger: #ffc2c8; --dialog-overlay: rgba(4, 8, 14, .78); }
html[data-theme="dark"] { --dialog-action: #75419a; --dialog-on-action: #ffffff; --dialog-danger: #ffc1ca; --dialog-overlay: rgba(13, 7, 22, .78); }
html[data-theme="luxury"] { --dialog-action: #e8c56e; --dialog-on-action: #211a0c; --dialog-danger: #ffc4b3; --dialog-overlay: rgba(14, 12, 6, .78); }

/* Payment/held notifications are inserted after sync and use role=status,
   not role=dialog. Include them explicitly so legacy pink cannot leak in. */
html[data-theme] body #admin-center-notice .admin-center-notice-card {
  color: var(--dialog-text) !important;
  background: var(--dialog-surface) !important;
  border-color: var(--dialog-action) !important;
}
html[data-theme] body #admin-center-notice :is(strong, .admin-center-notice-main span) {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme] body #admin-center-notice .admin-center-notice-kicker {
  color: var(--dialog-on-action) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-action) !important;
}
html[data-theme] body #admin-center-notice :is(.admin-center-notice-main span, .admin-center-notice-close) {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-raised) !important;
  border-color: var(--dialog-line) !important;
}
html[data-theme] body #admin-center-notice small {
  color: var(--dialog-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme] body #admin-center-notice .admin-center-notice-main span {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-theme] body #admin-center-notice .admin-center-notice-close:focus-visible {
  outline: 3px solid var(--dialog-action) !important;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body #admin-center-notice .admin-center-notice-close:hover {
    color: var(--interaction-hover-text, var(--dialog-text)) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--interaction-hover-bg, var(--dialog-raised)) !important;
    border-color: var(--interaction-hover-border, var(--dialog-action)) !important;
  }
}

/* Auth injects its stylesheet after page CSS. Override its palette, not its
   login logic: login, password and account popups share the active theme. */
html[data-theme] body :is(#ark-auth-overlay, #ark-auth-panel, #ark-auth-bar) {
  --auth-surface: var(--dialog-surface) !important;
  --auth-surface-2: var(--dialog-raised) !important;
  --auth-text: var(--dialog-text) !important;
  --auth-muted: var(--dialog-muted) !important;
  --auth-line: var(--dialog-line) !important;
  --auth-action: var(--dialog-action) !important;
  --auth-action-2: var(--dialog-action) !important;
  --auth-action-text: var(--dialog-on-action) !important;
  --auth-button: var(--dialog-raised) !important;
  --auth-button-text: var(--dialog-text) !important;
  --auth-danger: var(--dialog-danger) !important;
  --auth-overlay: var(--dialog-overlay) !important;
  color-scheme: inherit;
}
html[data-theme] body #ark-auth-overlay .ark-auth-card {
  background: var(--dialog-surface) !important;
}
html[data-theme] body #ark-auth-panel .ark-auth-account-admin {
  --text: var(--dialog-text); --muted: var(--dialog-muted);
  --surface: var(--dialog-surface); --surface2: var(--dialog-raised);
  --line: var(--dialog-line); --action: var(--dialog-action);
  --action2: var(--dialog-action); --danger: var(--dialog-danger);
}
html[data-theme] body :is(#ark-auth-overlay, #ark-auth-panel) .ark-auth-error {
  color: var(--dialog-danger) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme] body #ark-auth-panel .ark-auth-account-avatar {
  color: var(--dialog-on-action) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-action) !important;
}
html[data-theme] body :is(#ark-auth-overlay, #ark-auth-panel) button {
  min-height: 44px;
}
html[data-theme] body :is(#ark-auth-overlay, #ark-auth-panel) :where(.ark-auth-card, .ark-auth-panel-card, button, input, select, span, strong, label, h1, p, small) {
  /* Change foreground/background together, including the portal's older
     transition: all rules. Never fade through an unreadable colour pair. */
  transition-property: box-shadow, outline-color !important;
}
html[data-theme] body :is(#ark-auth-overlay, #ark-auth-panel) :is(button, input, select):focus-visible {
  outline: 3px solid var(--dialog-action) !important;
  outline-offset: 2px;
}
html[data-theme] body :is(#ark-auth-overlay, #ark-auth-panel) button:is(
  [type="submit"], #ark-change-password, #ark-auth-test, #ark-add-account,
  [data-auth-add-account], [data-auth-save-account]
) {
  color: var(--dialog-on-action) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-action) !important;
  border-color: var(--dialog-action) !important;
}
html[data-theme] body :is(#ark-auth-overlay, #ark-auth-panel) button :is(span, strong, small, svg, i) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Idle controls need a complete pair too. Selected/hovered controls continue
   to use theme-interactions.css, including status and destructive actions. */
html[data-theme] body :is(
  #active-ticket-detail-dialog, dialog, [role="dialog"], .payment-dialog,
  .edit-dialog, .menu-staff-dialog, .confirm-dialog, .alarm-dialog,
  .complete-dialog, .table-settings-dialog, .new-ticket-wizard-dialog,
  .numeric-keypad-dialog, .shift-day-detail-dialog
) button:where(:not(:disabled):not(.active):not(.selected):not(.is-selected):not(.danger):not(.delete):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"])) {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-raised) !important;
  border-color: var(--dialog-line) !important;
}

html[data-theme] body :is(
  #active-ticket-detail-dialog, dialog, [role="dialog"], .payment-dialog,
  .edit-dialog, .menu-staff-dialog, .confirm-dialog, .alarm-dialog,
  .complete-dialog, .table-settings-dialog, .new-ticket-wizard-dialog,
  .numeric-keypad-dialog, .shift-day-detail-dialog
) button:where(:not(:disabled)):is(
  .primary, [type="submit"], #menu-staff-confirm, #manual-menu-confirm,
  #numeric-keypad-done, #admin-numeric-keypad-done, #alarm-close, #confirm-ok,
  #payroll-layout-save, #save-ticket-table-settings, #ticket-preview-edit
) {
  color: var(--dialog-on-action) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-action) !important;
  border-color: var(--dialog-action) !important;
}

html[data-theme] body :is(
  #active-ticket-detail-dialog, dialog, [role="dialog"], .payment-dialog,
  .edit-dialog, .menu-staff-dialog, .confirm-dialog, .alarm-dialog,
  .complete-dialog, .table-settings-dialog, .new-ticket-wizard-dialog,
  .numeric-keypad-dialog, .shift-day-detail-dialog
) button:where(:not(:disabled)) :is(span, strong, b, small, i, svg) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html[data-theme] body :is(#cast-profile-dialog .cast-profile-birthday, #payment-cash-tender) {
  color: var(--dialog-text) !important;
  background: var(--dialog-raised) !important;
  border-color: var(--dialog-line) !important;
}
html[data-theme] body :is(#cast-profile-dialog .cast-profile-birthday, #payment-cash-tender) :is(h3, label > span) {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme] body :is(#cast-profile-dialog .cast-profile-birthday, #payment-cash-tender) :is(small, p) {
  color: var(--dialog-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme] body #cast-profile-dialog :is(.cast-profile-transport-head, .cast-profile-birthday-head) > div > span {
  color: var(--dialog-muted) !important;
}
html[data-theme] body #cast-profile-dialog #cast-profile-birthday-state {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-surface) !important;
  border-color: var(--dialog-line) !important;
}
html[data-theme] body #inventory-edit-dialog .inventory-dialog-fields label > span {
  color: var(--dialog-text) !important;
}
html[data-theme] body #payroll-layout-modal :is(.payroll-layout-presets small, .payroll-layout-presets > div > span, .payroll-layout-list-head > span) {
  color: var(--dialog-muted) !important;
}
html[data-theme] body #complete-overlay .complete-mark {
  color: var(--dialog-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--dialog-raised) !important;
  box-shadow: none !important;
}
html[data-theme] body :is(#payment-overlay, #complete-overlay) {
  background: var(--dialog-overlay) !important;
}

/* Touch browsers can retain :hover after a tap. Only real mouse pointers get
   hover colours; touch idle and selected states must remain stable. */
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body :is(#ark-auth-overlay, #ark-auth-panel) :is(button, #ark-change-password, #ark-auth-test, #ark-add-account):not(:disabled):hover {
    color: var(--interaction-hover-text, var(--dialog-text)) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--interaction-hover-bg, var(--dialog-raised)) !important;
    border-color: var(--interaction-hover-border, var(--dialog-action)) !important;
  }
  html[data-theme] body :is(
    #active-ticket-detail-dialog, dialog, [role="dialog"], .payment-dialog,
    .edit-dialog, .menu-staff-dialog, .confirm-dialog, .alarm-dialog,
    .complete-dialog, .table-settings-dialog, .new-ticket-wizard-dialog,
    .numeric-keypad-dialog, .shift-day-detail-dialog
  ) :is(button, #numeric-keypad-done, #admin-numeric-keypad-done, #menu-staff-confirm,
    #manual-menu-confirm, #alarm-close, #confirm-ok, #payroll-layout-save,
    #save-ticket-table-settings, #ticket-preview-edit):not(:disabled):hover:where(:not(.active):not(.selected):not(.is-selected):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"])) {
    color: var(--interaction-hover-text) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--interaction-hover-bg) !important;
    border-color: var(--interaction-hover-border) !important;
  }
}