/* Admin workspace palette. Scoped to the staff body so the public booking keeps
   its studio identity. This layer changes paint only, never layout or sizing. */
/* Short login screens also paint the root canvas behind the staff body. */
html:has(> body.staff-page) { background: #111a26; }
.staff-page {
  color-scheme: dark;
  --paper: #111a26;
  --white: #1b2939;
  --surface: #1b2939;
  --surface-raised: #28394c;
  --surface-inset: #0b1420;
  --soft: #28394c;
  --ink: #f2f6fc;
  --muted: #c1cedf;
  --subtle: #a7b8cc;
  --line: #43576e;
  --control-border: #8398b1;
  --accent: #86c9ff;
  --on-accent: #09263e;
  --selected: #203e5b;
  --focus: #a8ddff;
  --pending-bg: #49351c;
  --pending-text: #ffda91;
  --pending-edge: #e9b65e;
  --confirmed-bg: #163f39;
  --confirmed-text: #a0ead8;
  --confirmed-edge: #60c6ad;
  /* Booking-load ramp: empty grid, then four steps toward the confirmed teal. */
  --load-0: #1d2b3b;
  --load-1: #1f4c45;
  --load-2: #2a7a6b;
  --load-3: #3fa791;
  --load-4: #6fdcc0;
  --blocked-bg: #2b3450;
  --blocked-stripe: #343e5c;
  --blocked-text: #d1d9ff;
  --blocked-edge: #a2b2ed;
  --danger-bg: #4a2732;
  --danger: #ffc1ce;
  --danger-edge: #ef92a5;
  --admin-accent-hover: #b4dfff;
  --admin-hover: #304860;
  --admin-cancelled-bg: #313b4a;
  --admin-cancelled-text: #c3cedd;
  background: var(--paper);
  color: var(--ink);
}

/* Selection and explicit focus remain visible on cards, fields, and buttons. */
.staff-page ::selection { background: var(--accent); color: var(--on-accent); }
.staff-page :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.staff-page .calendar-event:focus-visible {
  outline-color: var(--ink);
  outline-offset: -4px;
}
.staff-page .skip-link { color: var(--on-accent); }
.staff-page :is(input,select,textarea) { caret-color: var(--accent); }
.staff-page :is(input,textarea)::placeholder { color: var(--subtle); opacity: 1; }
.staff-page :is(input[type=checkbox],input[type=radio]) { accent-color: var(--accent); }
.staff-page :is(input,select,textarea)[aria-invalid=true] {
  border-color: var(--danger-edge);
  outline-color: var(--danger-edge);
}
.staff-page :is(.field-error,.form-status,.settings-error) { color: var(--danger); }

/* Blue is reserved for actions and the current workspace/selection; booking
   outcomes retain their labels and symbols as well as their semantic colors. */
.staff-page .primary { background: var(--accent); color: var(--on-accent); }
.staff-page .primary:hover:not(:disabled) {
  background: var(--admin-accent-hover);
  color: var(--on-accent);
}
.staff-page .primary:active:not(:disabled) { background: var(--focus); }
.staff-page .secondary:hover:not(:disabled) {
  background: var(--admin-hover);
  color: var(--ink);
  border-color: var(--control-border);
}
.staff-page .staff-sidebar nav button:hover:not([aria-current=page]) {
  background: var(--surface);
  color: var(--ink);
}
.staff-page .staff-sidebar nav button[aria-current=page] {
  background: var(--selected);
  color: var(--accent);
}
.staff-page .sidebar-bottom :is(a,button):hover { color: var(--accent); }
.staff-page :is(.customer-profile-tabs,.settings-mobile-nav)>button[aria-selected=true],
.staff-page :is(.customer-profile-tabs,.settings-mobile-nav)>button[aria-selected=true]:hover:not(:disabled),
.staff-page :is(.desktop-calendar-modes,.mobile-schedule-mode) button[aria-pressed=true],
.staff-page :is(.desktop-calendar-modes,.mobile-schedule-mode) button[aria-pressed=true]:hover:not(:disabled) {
  background: var(--selected);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.staff-page :is(.mobile-room-tab,.settings-space-choice) { border-color: var(--control-border); }
.staff-page .mobile-room-tab[aria-pressed=true],
.staff-page .mobile-room-tab[aria-pressed=true]:hover:not(:disabled) {
  background: var(--selected);
  color: var(--accent);
  border-color: var(--accent);
}
.staff-page .mobile-room-tab small { opacity: 1; }
.staff-page .settings-space-choice[aria-pressed=true] {
  background: var(--selected);
  border-color: var(--accent);
}
.staff-page .calendar-jumps>[data-calendar-jump] { border-color: var(--control-border); }
.staff-page .picker-day:hover:not(:disabled):not([aria-pressed=true]) {
  box-shadow: inset 0 0 0 1px var(--focus);
}
.staff-page .picker-day[aria-pressed=true],
.staff-page .picker-day[aria-pressed=true]:hover:not(:disabled) {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.staff-page #mobileFilterBody #applyFilters:hover:not(:disabled) {
  background: var(--admin-accent-hover);
  color: var(--on-accent);
}
.staff-page .dialog-top>button:hover:not(:disabled) {
  background: var(--admin-hover);
  color: var(--ink);
  border-color: var(--control-border);
}

/* Past booking rows recede without dimming status labels or available actions. */
.staff-page .booking-table tbody tr.is-past {
  background: var(--paper);
  color: var(--subtle);
}

/* Cancelled is a neutral historic state, distinct from a destructive action. */
.staff-page .status-pill.cancelled {
  background: var(--admin-cancelled-bg);
  color: var(--admin-cancelled-text);
}
.staff-page .customer-flags { color: var(--pending-text); }
.staff-page .positive-button,
.staff-page .positive-button:hover:not(:disabled),
.staff-page .positive-button:active:not(:disabled) {
  background: var(--confirmed-bg);
  color: var(--confirmed-text);
  border-color: var(--confirmed-edge);
}
.staff-page .danger-button,
.staff-page .danger-button:hover:not(:disabled),
.staff-page .danger-button:active:not(:disabled) {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-edge);
}
.staff-page :is(.primary,.secondary,.positive-button,.danger-button):disabled {
  background: var(--surface-raised);
  color: var(--subtle);
  border-color: var(--line);
  box-shadow: none;
  opacity: 1;
}
.staff-page :is(input,select,textarea):disabled {
  background: var(--surface-raised);
  color: var(--subtle);
  border-color: var(--line);
  opacity: 1;
}

@media (hover:hover) {
  .staff-page :is(.customer-list-row,.booking-table tbody tr):hover,
  .staff-page .mobile-calendar-event:hover,
  .staff-page #desktopAgenda .mobile-calendar-event:hover {
    background: var(--admin-hover);
  }
  .staff-page :is(.settings-space-choice,.mobile-room-tab):hover:not([aria-pressed=true]),
  .staff-page :is(.customer-profile-tabs,.settings-mobile-nav)>button:hover:not([aria-selected=true]) {
    background: var(--admin-hover);
    color: var(--ink);
  }
}
@media (max-width:760px) {
  .staff-page #calendarDateButton { box-shadow: inset 0 0 0 1px var(--control-border); }
}

/* Let Windows/system high-contrast colors take precedence over the theme. */
@media (forced-colors:active) {
  .staff-page :is(button,a,input,select,textarea,summary):focus-visible { outline-color: Highlight; }
  .staff-page :is(input,select,textarea)[aria-invalid=true] { border-color: LinkText; }
  .staff-page :is(.mobile-room-tab,.settings-space-choice)[aria-pressed=true],
  .staff-page :is(.customer-profile-tabs,.settings-mobile-nav)>button[aria-selected=true],
  .staff-page :is(.desktop-calendar-modes,.mobile-schedule-mode) button[aria-pressed=true] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}