/*
 * NOX staff portal final theme audit.
 * This file must load after theme.css and the portal's inline legacy palette.
 */
html[data-theme] body.staff-portal-app {
  --portal-surface: #ffffff;
  --portal-surface-2: #edf4fb;
  --portal-control: #ffffff;
  --portal-text: #172033;
  --portal-muted: #526177;
  --portal-line: #7f93aa;
  --portal-calendar-grid: #7f93aa;
  --portal-icon: #244b8f;
  --portal-accent: #244b8f;
  --portal-action: #0f5fc5;
  --portal-action-2: #1f6fb8;
  --portal-action-text: #ffffff;
  --portal-today: #dcecff;
  --portal-one-shift: #fff0b8;
  --portal-one-shift-text: #554000;
  --portal-saturday: #1d4ed8;
  --portal-sunday: #b91c1c;
  --portal-danger: #b42348;
  --portal-danger-bg: #fff2f5;
  --portal-event-pink: #a82764;
  --portal-event-blue: #2858a6;
  --portal-event-green: #216749;
  --portal-event-gold: #f2c75c;
  --portal-event-gold-text: #3f2d06;
  --portal-shadow: rgba(20, 48, 78, 0.12);
  --ink: var(--portal-text);
  --muted: var(--portal-muted);
  --line: var(--portal-line);
  --soft: var(--portal-surface-2);
  --pink: var(--portal-action);
  --pink-2: var(--portal-action-2);
  --purple: var(--portal-accent);
  --theme-action: var(--portal-action);
  --theme-action-2: var(--portal-action-2);
  --theme-action-text: var(--portal-action-text);
  color: var(--portal-text) !important;
  background:
    radial-gradient(circle at 82% 0%, rgba(84, 151, 225, 0.2), transparent 30%),
    linear-gradient(180deg, #102d56 0 136px, #f3f7fc 136px 100%) !important;
}

html[data-theme="nox"] body.staff-portal-app {
  --portal-surface: #192633;
  --portal-surface-2: #233442;
  --portal-control: #101923;
  --portal-text: #f4f8fb;
  --portal-muted: #c2d0dc;
  --portal-line: #5c7488;
  --portal-calendar-grid: #718aa0;
  --portal-icon: #b9ddff;
  --portal-accent: #9ac8ea;
  --portal-action: #d8dde1;
  --portal-action-2: #8db9da;
  --portal-action-text: #101820;
  --portal-today: #294b66;
  --portal-one-shift: #4b3b1d;
  --portal-one-shift-text: #fff2c2;
  --portal-saturday: #9bc8ff;
  --portal-sunday: #ff9da8;
  --portal-danger: #ff9db0;
  --portal-danger-bg: #3a1d28;
  --portal-event-pink: #a93b74;
  --portal-event-blue: #3f6fb8;
  --portal-event-green: #2d7659;
  --portal-event-gold: #d5ad4b;
  --portal-event-gold-text: #171108;
  --portal-shadow: rgba(0, 0, 0, 0.34);
  background:
    radial-gradient(circle at 82% 0%, rgba(143, 197, 238, 0.16), transparent 30%),
    linear-gradient(180deg, #06090d 0 136px, #0e1720 136px 100%) !important;
}

html[data-theme="dark"] body.staff-portal-app {
  --portal-surface: #2b1b2a;
  --portal-surface-2: #382137;
  --portal-control: #1c111d;
  --portal-text: #fff7fb;
  --portal-muted: #e2c7d9;
  --portal-line: #8f6383;
  --portal-calendar-grid: #a3759a;
  --portal-icon: #ffc3e3;
  --portal-accent: #e5a4ff;
  --portal-action: #c92f83;
  --portal-action-2: #7f42b0;
  --portal-action-text: #ffffff;
  --portal-today: #5a2548;
  --portal-one-shift: #5c4420;
  --portal-one-shift-text: #fff0bd;
  --portal-saturday: #9ec5ff;
  --portal-sunday: #ff9caf;
  --portal-danger: #ff93ae;
  --portal-danger-bg: #4a1e30;
  --portal-event-pink: #bc377c;
  --portal-event-blue: #416fb9;
  --portal-event-green: #2f7b5b;
  --portal-event-gold: #d5aa45;
  --portal-event-gold-text: #211706;
  --portal-shadow: rgba(0, 0, 0, 0.38);
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 120, 189, 0.18), transparent 30%),
    linear-gradient(180deg, #160818 0 136px, #211221 136px 100%) !important;
}

html[data-theme="luxury"] body.staff-portal-app {
  --portal-surface: #2a2317;
  --portal-surface-2: #342c1d;
  --portal-control: #151109;
  --portal-text: #fff7e5;
  --portal-muted: #e0d1b0;
  --portal-line: #8a7343;
  --portal-calendar-grid: #9a8148;
  --portal-icon: #ffe2a0;
  --portal-accent: #f0d88f;
  --portal-action: #e1c77f;
  --portal-action-2: #b6873f;
  --portal-action-text: #171108;
  --portal-today: #44381b;
  --portal-one-shift: #4d3b18;
  --portal-one-shift-text: #fff0b3;
  --portal-saturday: #b7d7ff;
  --portal-sunday: #ffaaa0;
  --portal-danger: #ffb3a6;
  --portal-danger-bg: #48251d;
  --portal-event-pink: #a84e73;
  --portal-event-blue: #486b9b;
  --portal-event-green: #3f7258;
  --portal-event-gold: #e1c77f;
  --portal-event-gold-text: #171108;
  --portal-shadow: rgba(0, 0, 0, 0.42);
  background:
    radial-gradient(circle at 82% 0%, rgba(230, 196, 93, 0.16), transparent 30%),
    linear-gradient(180deg, #0d0a06 0 136px, #17130d 136px 100%) !important;
}

html[data-theme] body.staff-portal-app :where(.portal-title h1, .portal-title p, .portal-hero .theme-toggle, .status-pill) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme] body.staff-portal-app .portal-hero .theme-toggle {
  border-color: rgba(255, 255, 255, 0.46) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

html[data-theme] body.staff-portal-app .status-pill {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.24) !important;
}

html[data-theme] body.staff-portal-app :where(.card, .staff-card, .calendar-card, .payroll-day, .password-change, .notice) {
  color: var(--portal-text) !important;
  border-color: var(--portal-line) !important;
  background: var(--portal-surface) !important;
  background-image: none !important;
  box-shadow: 0 12px 30px var(--portal-shadow) !important;
}

html[data-theme] body.staff-portal-app .shift-form {
  color: var(--portal-text) !important;
  background: linear-gradient(180deg, var(--portal-surface-2), transparent) !important;
}

html[data-theme] body.staff-portal-app :where(.field input, .field select, .staff-name-display, .month-tools button, .secondary-btn) {
  color: var(--portal-text) !important;
  -webkit-text-fill-color: var(--portal-text) !important;
  border-color: var(--portal-line) !important;
  background: var(--portal-control) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme] body.staff-portal-app :where(.field input, .field select)::placeholder {
  color: var(--portal-muted) !important;
  -webkit-text-fill-color: var(--portal-muted) !important;
  opacity: 1 !important;
}

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

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

html[data-theme] body.staff-portal-app :where(.tabs button.active, .primary-btn, .shift-chip.mine, .today .day-button) {
  color: var(--portal-action-text) !important;
  -webkit-text-fill-color: var(--portal-action-text) !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--portal-action), var(--portal-action-2)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--portal-action) 25%, transparent) !important;
}

html[data-theme] body.staff-portal-app :where(.tabs button.active, .primary-btn, .shift-chip.mine, .today .day-button) :where(span, strong, svg, [data-lucide]) {
  color: inherit !important;
  stroke: currentColor !important;
}

html[data-theme] body.staff-portal-app .tabs {
  color: var(--portal-text) !important;
  border-color: var(--portal-line) !important;
  background: color-mix(in srgb, var(--portal-surface-2) 94%, transparent) !important;
  box-shadow: 0 8px 24px var(--portal-shadow) !important;
}

html[data-theme] body.staff-portal-app .tabs button:not(.active) {
  color: var(--portal-accent) !important;
  -webkit-text-fill-color: var(--portal-accent) !important;
  border-color: var(--portal-line) !important;
  background: var(--portal-control) !important;
  box-shadow: none !important;
}

html[data-theme] body.staff-portal-app .calendar-grid {
  gap: 1px !important;
  border-color: var(--portal-calendar-grid) !important;
  background: var(--portal-calendar-grid) !important;
}

html[data-theme] body.staff-portal-app :where(button,a,[role="button"]) :where(svg,[data-lucide]) {
  color: inherit !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html[data-theme] body.staff-portal-app :where(.input-wrap,.month-controls,.toolbar) > :where(svg,[data-lucide]) {
  color: var(--portal-icon) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

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

html[data-theme] body.staff-portal-app .weekday {
  color: var(--portal-muted) !important;
  background: var(--portal-surface-2) !important;
}

html[data-theme] body.staff-portal-app .day.empty {
  background: color-mix(in srgb, var(--portal-surface-2) 72%, var(--portal-surface)) !important;
}

html[data-theme] body.staff-portal-app .day.one-shift {
  color: var(--portal-one-shift-text) !important;
  background: var(--portal-one-shift) !important;
}

html[data-theme] body.staff-portal-app .day.one-shift :where(.day-button, .shift-chip:not(.mine)) {
  color: var(--portal-one-shift-text) !important;
}

html[data-theme] body.staff-portal-app .day.today {
  color: var(--portal-text) !important;
  background: var(--portal-today) !important;
}

html[data-theme] body.staff-portal-app .day.selected {
  outline-color: var(--portal-action) !important;
  box-shadow: inset 0 0 0 1px var(--portal-action) !important;
}

html[data-theme] body.staff-portal-app .day.saturday .day-button { color: var(--portal-saturday) !important; }
html[data-theme] body.staff-portal-app .day.sunday .day-button,
html[data-theme] body.staff-portal-app .day.holiday .day-button { color: var(--portal-sunday) !important; }

html[data-theme] body.staff-portal-app .event-chip { color: #ffffff !important; }
html[data-theme] body.staff-portal-app .event-pink { background: var(--portal-event-pink) !important; }
html[data-theme] body.staff-portal-app .event-blue { background: var(--portal-event-blue) !important; }
html[data-theme] body.staff-portal-app .event-green { background: var(--portal-event-green) !important; }
html[data-theme] body.staff-portal-app .event-gold {
  color: var(--portal-event-gold-text) !important;
  background: var(--portal-event-gold) !important;
}

html[data-theme] body.staff-portal-app .shift-chip:not(.mine) {
  color: var(--portal-text) !important;
  border-color: var(--portal-line) !important;
  background: var(--portal-surface-2) !important;
}

html[data-theme] body.staff-portal-app .shift-delete-btn {
  color: var(--portal-danger) !important;
  -webkit-text-fill-color: var(--portal-danger) !important;
  border-color: color-mix(in srgb, var(--portal-danger) 62%, var(--portal-line)) !important;
  background: var(--portal-danger-bg) !important;
}

html[data-theme] body.staff-portal-app :where(.summary-box, .payroll-day-grid span) {
  color: var(--portal-muted) !important;
  border-color: var(--portal-line) !important;
  background: var(--portal-surface-2) !important;
}

html[data-theme] body.staff-portal-app :where(.summary-box strong, .payroll-day-grid b, .payroll-day-head strong, .panel-head h2, .password-change strong) {
  color: var(--portal-text) !important;
  -webkit-text-fill-color: var(--portal-text) !important;
}

html[data-theme] body.staff-portal-app :where(.panel-head span, .payroll-day-head b) {
  color: var(--portal-accent) !important;
  -webkit-text-fill-color: var(--portal-accent) !important;
}

html[data-theme] body.staff-portal-app :where(.field span, .password-change div span, .empty-state) {
  color: var(--portal-muted) !important;
  -webkit-text-fill-color: var(--portal-muted) !important;
}

html[data-theme] body.staff-portal-app .toast {
  color: var(--portal-action-text) !important;
  border: 1px solid color-mix(in srgb, var(--portal-action) 58%, var(--portal-line)) !important;
  background: linear-gradient(135deg, var(--portal-action), var(--portal-action-2)) !important;
  box-shadow: 0 12px 30px var(--portal-shadow) !important;
}

html[data-theme] body.staff-portal-app :where(svg, [data-lucide]) {
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html[data-theme] body.staff-portal-app :where(button, a, input, select):focus-visible {
  outline: 3px solid var(--portal-accent) !important;
  outline-offset: 2px !important;
}

html[data-theme] body.staff-portal-app :where(button, input, select):disabled {
  color: var(--portal-muted) !important;
  -webkit-text-fill-color: var(--portal-muted) !important;
  border: 1px dashed var(--portal-line) !important;
  background: var(--portal-surface-2) !important;
  background-image: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  filter: saturate(0.55) !important;
}

/* NOX authentication surfaces use the same silver-blue theme as the portal. */
html[data-theme="nox"] body.staff-portal-app :is(#ark-auth-bar, #ark-auth-panel, #ark-auth-overlay) {
  --auth-surface: #192633;
  --auth-surface-2: #233442;
  --auth-text: #f4f8fb;
  --auth-muted: #c2d0dc;
  --auth-line: #5c7488;
  --auth-action: #d8dde1;
  --auth-action-2: #8db9da;
  --auth-action-text: #101820;
  --auth-button: #101923;
  --auth-button-text: #f4f8fb;
  --auth-danger: #ff9db0;
  --auth-overlay: rgba(3, 6, 9, 0.84);
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  body.staff-portal-app :where(.card, .tabs, button, input, select, .day, .shift-chip, .notice) {
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
  }
}

/* Weekend colours must not override the selected/today action foreground. */
html[data-theme] body.staff-portal-app .day.today .day-button,
html[data-theme] body.staff-portal-app .day.selected .day-button {
  color: var(--portal-action-text) !important;
  -webkit-text-fill-color: var(--portal-action-text) !important;
}