/* NOX CRM dark theme accessibility audit
 * Scope is intentionally limited to data-theme="dark" so NOX, light and
 * luxury keep their own visual identities. Text/background pairs are WCAG AA.
 */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #fff7ff;
  --muted: #d6bddc;
  --line: #6b4778;
  --soft: #2b1c39;
  --deep: #120d1b;
  --pink: #ff62b0;
  --pink-2: #ff9bd0;
  --purple: #a86cf5;
  --accent: #ff62b0;
  --theme-surface: #21162d;
  --theme-surface-2: #2b1c39;
  --theme-text: #fff7ff;
  --theme-muted: #d6bddc;
  --theme-line: #6b4778;
  --theme-border: #6b4778;
  --theme-input: #171020;
  --theme-action: #981052;
  --theme-action-2: #6d36a3;
  --theme-action-text: #ffffff;
  --theme-button-bg: #352146;
  --theme-button-text: #fff7ff;
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 98, 176, 0.12), transparent 31%),
    radial-gradient(circle at 16% 100%, rgba(168, 108, 245, 0.14), transparent 35%),
    linear-gradient(145deg, #120d1b 0%, #1b1026 52%, #100a18 100%);
}

/* Global chrome */
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .sidebar {
  border-right: 1px solid #713c71;
  background: linear-gradient(180deg, #22102d 0%, #130b1c 100%);
  box-shadow: 10px 0 32px rgba(3, 1, 8, 0.3);
}

html[data-theme="dark"] .topbar {
  color: #fff7ff;
  border-color: #5d3b69;
  background: rgba(27, 16, 38, 0.96);
}

html[data-theme="dark"] .nav-item {
  color: #ddc9e4;
  border: 1px solid transparent;
}

html[data-theme="dark"] .nav-item svg,
html[data-theme="dark"] button svg,
html[data-theme="dark"] a svg {
  color: currentColor;
  stroke: currentColor;
}

html[data-theme="dark"] .nav-item:hover {
  color: #ffffff;
  border-color: rgba(255, 98, 176, 0.35);
  background: rgba(255, 98, 176, 0.11);
}

html[data-theme="dark"] .nav-item.active {
  color: #ffffff;
  border-color: #d957a0;
  background: linear-gradient(100deg, #8f174f, #593080);
  box-shadow: inset 4px 0 #ff9bd0, 0 8px 22px rgba(94, 19, 78, 0.3);
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .app-link,
html[data-theme="dark"] #active-store-select {
  color: #fff7ff;
  border-color: #765184;
  background: #30203e;
}

/* Surfaces shared by all fourteen management pages */
html[data-theme="dark"] :is(.panel, .stat-card, .filters, .settings-subsection,
  .settings-list-heading, .settings-group, .settings-row, .cast-directory-item,
  .shift-focus-card, .dashboard-shift-overview, .history-summary, .history-row,
  .vault-history-detail, .vault-grand, .vault-count-row, .vault-shopping-row,
  .crm-integration-card, .payroll-layout-dialog, .salary-document-preview) {
  color: #fff7ff;
  border-color: #5e3f6b;
  background: #21162d;
  box-shadow: 0 10px 28px rgba(5, 2, 10, 0.22);
}

html[data-theme="dark"] :is(.panel, .stat-card, .settings-subsection, .settings-group):hover {
  border-color: #765184;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, strong, b, .panel-title, .stat-card h2,
  .settings-panel-heading h2, .settings-subsection-head strong,
  .cast-directory-item strong, .history-list b, .vault-grand strong) {
  color: #fffaff;
}

html[data-theme="dark"] :is(p, small, label > span, .muted, .delta,
  .settings-panel-heading p, .settings-subsection-head small,
  .cast-directory-item small, .table-footer, .history-list small,
  .vault-day-content small, .vault-grand span) {
  color: #d6bddc;
}

html[data-theme="dark"] .stat-icon {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, #a81861, #6d36a3);
}

html[data-theme="dark"] .stat-link,
html[data-theme="dark"] a:not(.nav-item):not(.app-link) {
  color: #ff9bd0;
  text-decoration-color: rgba(255, 155, 208, 0.55);
}

/* Forms: native controls were the largest source of dark-on-dark text. */
html[data-theme="dark"] :is(input, select, textarea) {
  color: #fff7ff;
  -webkit-text-fill-color: #fff7ff;
  caret-color: #ff9bd0;
  border-color: #765184;
  background: #171020;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: #bfa8ca;
  -webkit-text-fill-color: #bfa8ca;
  opacity: 1;
}

html[data-theme="dark"] :is(input, select, textarea):hover {
  border-color: #a46ab0;
}

html[data-theme="dark"] :is(input, select, textarea):focus-visible {
  border-color: #ff72b9;
  outline: 3px solid rgba(255, 98, 176, 0.32);
  outline-offset: 1px;
  box-shadow: none;
}

html[data-theme="dark"] :is(input, select, textarea):disabled,
html[data-theme="dark"] :is(input, select, textarea)[readonly] {
  color: #c9b6d0;
  -webkit-text-fill-color: #c9b6d0;
  border-color: #55405e;
  background: #261d2d;
  opacity: 1;
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  accent-color: #ff62b0;
}

/* Buttons and segmented controls */
html[data-theme="dark"] button,
html[data-theme="dark"] .detail {
  color: #fff7ff;
  border-color: #765184;
  background-color: #352146;
}

html[data-theme="dark"] button:hover:not(:disabled) {
  color: #ffffff;
  border-color: #ff72b9;
  background-color: #4a285c;
}

html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible {
  outline: 3px solid #ff88c6;
  outline-offset: 2px;
}

html[data-theme="dark"] :is(.search-btn, button.primary, .primary,
  .settings-panel-actions button, .payroll-layout-save,
  .salary-export-button, #add-shift, #add-shift-event) {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  border-color: #c33780;
  background: linear-gradient(135deg, #981052, #6d36a3);
  box-shadow: 0 7px 18px rgba(123, 12, 82, 0.3);
}

html[data-theme="dark"] :is(.selected, .active, [aria-pressed="true"]):is(button),
html[data-theme="dark"] :is(.settings-tab.active, .back-mode-switch button.active,
  .payroll-view-switch button.active) {
  color: #160c1a;
  -webkit-text-fill-color: #160c1a;
  border-color: #ffb4da;
  background: #ff72b9;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] button:disabled {
  color: #a995b2;
  border-color: #4d3955;
  background: #29202f;
  opacity: 0.78;
}

html[data-theme="dark"] :is(button.danger, .danger-button, .delete-button, [data-action="delete"]) {
  color: #fff5f7;
  -webkit-text-fill-color: #fff5f7;
  border-color: #b9526a;
  background: #6f2639;
}

html[data-theme="dark"] :is(button.danger, .danger-button, .delete-button, [data-action="delete"]):hover:not(:disabled) {
  border-color: #ff90a8;
  background: #8b3048;
}

html[data-theme="dark"] :is(.field, .select, .date, .search) > svg,
html[data-theme="dark"] :is(.field, .select, .date, .search) > i,
html[data-theme="dark"] :is(.panel-title, .settings-panel-heading, .settings-subsection-head) svg {
  color: #e7c9ed;
  stroke: currentColor;
}

/* Tables */
html[data-theme="dark"] table {
  color: #fff7ff;
  border-color: #5e3f6b;
  background: #21162d;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] th {
  color: #f4dcf8;
  border-color: #6b4778;
  background: #352146;
}

html[data-theme="dark"] td {
  color: #fff7ff;
  border-color: #50365b;
  background: #21162d;
}

html[data-theme="dark"] :is(td, th) :is(small, span:not(.badge):not(.status-badge)) {
  color: inherit;
}

html[data-theme="dark"] tbody tr:nth-child(even) td {
  background: #281a34;
}

html[data-theme="dark"] tbody tr:hover td {
  background: #3b2349;
}

/* Statuses retain meaning but use accessible text/background pairs. */
html[data-theme="dark"] :is(.badge, .status-badge, .status-pill) {
  color: #f9eaff;
  border-color: #895c98;
  background: #432650;
}

html[data-theme="dark"] :is(.badge.paid, .status-success, .is-success) {
  color: #d9ffed;
  border-color: #34735a;
  background: #173e31;
}

html[data-theme="dark"] :is(.badge.danger, .status-danger, .is-danger) {
  color: #ffe9ed;
  border-color: #a64c61;
  background: #5b2231;
}

html[data-theme="dark"] :is(.warning, .status-warning, .is-warning) {
  color: #fff1c9;
  border-color: #9e7432;
  background: #533b16;
}

html[data-theme="dark"] :is(.badge, .status-badge, .status-pill) svg {
  color: currentColor;
  stroke: currentColor;
}

/* Dialogs and modal overlays */
html[data-theme="dark"] dialog,
html[data-theme="dark"] :is(.active-ticket-detail-dialog, .cast-profile-dialog,
  .shift-detail-dialog, .shift-minimum-dialog, .confirm-dialog, .payment-dialog,
  .edit-dialog, .menu-staff-dialog, .complete-dialog, .alarm-dialog) {
  color: #fff7ff;
  border-color: #80568f;
  background: #21162d;
  box-shadow: 0 24px 80px rgba(2, 0, 7, 0.72);
}

html[data-theme="dark"] dialog::backdrop,
html[data-theme="dark"] :is(.payment-overlay, .edit-overlay, .menu-staff-overlay,
  .complete-overlay, .confirm-overlay, .alarm-overlay, .table-settings-overlay,
  .new-ticket-wizard-overlay) {
  background: rgba(7, 3, 11, 0.82);
}

html[data-theme="dark"] :is(.choice-grid button, .menu-staff-grid button,
  .staff-chips button, .payment-methods button, .payment-table-option) {
  color: #fbeeff;
  border-color: #684775;
  background: #2b1c39;
}

html[data-theme="dark"] :is(.choice-grid button.selected, .menu-staff-grid button.selected,
  .staff-chips button.selected, .payment-methods button.selected,
  .payment-table-option:has(input:checked)) {
  color: #160c1a;
  border-color: #ffb4da;
  background: #ff72b9;
}

html[data-theme="dark"] :is(.choice-grid button.selected, .menu-staff-grid button.selected,
  .staff-chips button.selected, .payment-methods button.selected,
  .payment-table-option:has(input:checked)) :is(span, small, strong, svg) {
  color: #160c1a;
  stroke: currentColor;
}

/* Calendars, charts and empty states */
html[data-theme="dark"] :is(.vault-calendar, .vault-day, .shift-calendar,
  .payroll-scroll, .empty-state, .empty-log) {
  color: #f8eafc;
  border-color: #5e3f6b;
  background: #1c1326;
}

html[data-theme="dark"] :is(.vault-day.has-record, .vault-day.selected) {
  color: #ffffff;
  border-color: #ff72b9;
  background: #4b2454;
}

html[data-theme="dark"] :is(.vault-day.is-saturday .vault-day-number, .text-blue) {
  color: #a9c7ff;
}

html[data-theme="dark"] :is(.vault-day.is-sunday .vault-day-number, .text-red) {
  color: #ff9aae;
}

/* Visible scrollbars make wide management tables easier to understand. */
html[data-theme="dark"] * {
  scrollbar-color: #8c568f #1a1123;
}

html[data-theme="dark"] ::selection {
  color: #160c1a;
  background: #ff9bd0;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] *,
  html[data-theme="dark"] *::before,
  html[data-theme="dark"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.stat-icon, .stat-icon.pink, .stat-icon.purple) {
  color: #ffffff !important;
  border-color: #ff8bc7 !important;
  background: linear-gradient(145deg, #b01964, #7039a8) !important;
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .stat-icon :where(svg, i, .yen-symbol) {
  color: #ffffff !important;
  stroke: currentColor !important;
}

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.shift-calendar, .shift-day) {
  border-color: #704b80 !important;
  background: #24172f !important;
}

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

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

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .shift-calendar .shift-day.has-one-shift {
  background: #3c2345 !important;
  box-shadow: inset 0 0 0 2px #c77af0 !important;
}

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

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.shift-day-total, .shift-day-more) { color: #eadcf0 !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .shift-day-warning { color: #ffdc8a !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .shift-day-number { color: #fffaff !important; border-color: #a87ab7 !important; background: #402a4d !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .shift-chip { color: #ffffff !important; border-color: #e38cbd !important; background: #8a2861 !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .shift-chip :where(strong, span) { color: #ffffff !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) .shift-chip em { color: #511438 !important; background: #ffe7f4 !important; }

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(
  .portfolio-hero, .customer-admin-head, .inventory-admin-head,
  .payroll-summary-hero, .report-hero
) {
  color: #fff7ff !important;
  border: 1px solid #a9568a !important;
  background: radial-gradient(circle at 84% 16%, rgba(255, 155, 208, .18), transparent 28%), linear-gradient(125deg, #1c0d27, #532044 58%, #8c2867) !important;
}
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.portfolio-hero, .customer-admin-head, .inventory-admin-head, .payroll-summary-hero, .report-hero) :where(h1,h2,h3,h4,strong,p,small,span,label,svg) { color: #fff7ff !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.eyebrow,.customer-eyebrow,.inventory-eyebrow,.payroll-summary-hero > div:first-child > span) { color: #ffc2df !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.customer-search,.inventory-search) { border-color: #c77ba7 !important; background: #160e1e !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.customer-search,.inventory-search) :where(input,svg) { color: #fff7ff !important; border: 0 !important; background: transparent !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.customer-search,.inventory-search) input::placeholder { color: #d8c4dd !important; }

html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.portfolio-kpis article,.inventory-summary-cards article,.customer-summary-cards article) { color: #fff7ff !important; border-color: #765184 !important; background: #2b1c39 !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.portfolio-kpis article,.inventory-summary-cards article,.customer-summary-cards article)::before { width: 5px !important; background: linear-gradient(180deg,#ff9bd0,#ff62b0 52%,#8c4bd4) !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.portfolio-kpis,.inventory-summary-cards,.customer-summary-cards) :where(span,small) { color: #d9c3df !important; }
html[data-theme="dark"] body:not(.ipad-app):not(.staff-portal-app) :where(.portfolio-kpis,.inventory-summary-cards,.customer-summary-cards) strong { color: #ffffff !important; }