/* Shared interaction states. Keep background and foreground in the same rule:
   fading the whole control also fades its label and is unreadable on light UI.
   The named export IDs give this final layer precedence over legacy ID rules. */
html[data-theme="light"] {
  --interaction-hover-bg: #e9f3ff;
  --interaction-hover-text: #172f50;
  --interaction-hover-border: #5588c6;
  --interaction-danger-bg: #ffedf0;
  --interaction-danger-text: #8f1732;
}
html[data-theme="nox"] {
  --interaction-hover-bg: #40566c;
  --interaction-hover-text: #ffffff;
  --interaction-hover-border: #9bc0e2;
  --interaction-danger-bg: #542b37;
  --interaction-danger-text: #ffe0e5;
}
html[data-theme="dark"] {
  --interaction-hover-bg: #553e67;
  --interaction-hover-text: #ffffff;
  --interaction-hover-border: #c8a8ff;
  --interaction-danger-bg: #542b37;
  --interaction-danger-text: #ffe0e5;
}
html[data-theme="luxury"] {
  --interaction-hover-bg: #51442b;
  --interaction-hover-text: #fff8e8;
  --interaction-hover-border: #dfc477;
  --interaction-danger-bg: #542b27;
  --interaction-danger-text: #ffe1da;
}
html[data-theme] body:not(.ipad-app) {
  --interaction-selected-bg: var(--admin-accent);
  --interaction-selected-image: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-strong));
  --interaction-selected-text: var(--admin-on-accent);
  --interaction-selected-border: var(--admin-focus);
}
html[data-theme] body.ipad-app {
  --interaction-selected-bg: var(--theme-selected-bg);
  --interaction-selected-image: none;
  --interaction-selected-text: var(--theme-selected-text);
  --interaction-selected-border: var(--theme-selected-border);
}

/* Colour changes are atomic so a white label cannot linger on a pale surface
   halfway through the old transition: all animation. */
html[data-theme] body :is(#payroll-pdf-export, #salary-export-send, button, a[href], [role="button"], summary) {
  transition-property: box-shadow, outline-color !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme] body :is(#payroll-pdf-export, #salary-export-send, button, a[href], [role="button"], summary):not(:disabled):not([aria-disabled="true"]):where(:not(.avatar-chip)):hover {
    color: var(--interaction-hover-text) !important;
    -webkit-text-fill-color: var(--interaction-hover-text) !important;
    background: var(--interaction-hover-bg) !important;
    border-color: var(--interaction-hover-border) !important;
    opacity: 1 !important;
    filter: none !important;
  }
  html[data-theme] body :is(#payroll-pdf-export, #salary-export-send, button, a[href], [role="button"], summary):not(:disabled):not([aria-disabled="true"]):where(:not(.avatar-chip)):hover :is(span, strong, small, b, em, i, svg) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
  }
  html[data-theme] body :is(button, a[href], [role="button"]):is(.agency-delete-button, .delete, .danger, .danger-btn, [data-action="delete"]):not(:disabled):hover {
    --interaction-hover-bg: var(--interaction-danger-bg);
    --interaction-hover-text: var(--interaction-danger-text);
    --interaction-hover-border: var(--interaction-danger-text);
  }
}

/* Selection is persistent application state, including while the pointer is
   over the selected item. Do not use :active (pointer-down) as selection. */
html[data-theme] body :is(#payroll-pdf-export, #salary-export-send, button, a[href], [role="button"]):is(.selected, .active, [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [aria-current="page"], [data-active="true"]):not(:disabled):not([aria-disabled="true"]) {
  color: var(--interaction-selected-text) !important;
  -webkit-text-fill-color: var(--interaction-selected-text) !important;
  background-color: var(--interaction-selected-bg) !important;
  background-image: var(--interaction-selected-image) !important;
  border: 2px solid var(--interaction-selected-border) !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-theme] body :is(#payroll-pdf-export, #salary-export-send, button, a[href], [role="button"]):is(.selected, .active, [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [aria-current="page"], [data-active="true"]):not(:disabled):not([aria-disabled="true"]) :is(span, strong, small, b, em, i, svg) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
html[data-theme] body :is(#payroll-pdf-export, #salary-export-send, button, a[href], [role="button"], summary):focus-visible {
  outline: 3px solid var(--interaction-hover-border) !important;
  outline-offset: 3px;
}

/* A VIP badge has its own gold surface; it must not inherit a white label
   from the surrounding selected or hovered ticket. */
html[data-theme] body :is(#payroll-pdf-export, #salary-export-send, button):not(:disabled):not([aria-disabled="true"]) span.table-vip-label,
html[data-theme] body .table-button-grid :is(#payroll-pdf-export, #salary-export-send, button):not(:disabled):not([aria-disabled="true"]) > em {
  color: #302407 !important;
  -webkit-text-fill-color: #302407 !important;
  background: #f5d981 !important;
}