/* The attendance hero must use the professional theme surface. */
.professional-layout .professional-shift-detail-hero {
  color: var(--professional-text, #0f172a);
  background: var(--professional-surface, #ffffff);
  border-color: var(--professional-border, #cbd5e1);
}

.professional-layout .professional-shift-detail-hero h2.MuiTypography-root {
  color: var(--professional-text, #0f172a);
}

.professional-layout .professional-shift-detail-hero p.MuiTypography-root {
  color: #475569;
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-shift-detail-hero p.MuiTypography-root {
  color: #b0bdd0;
}

/* MUI dialogs are portaled outside .professional-layout. Scope their theme
   to the professional preference, independently of the administrator theme. */
.professional-calendar-event-drawer.MuiPaper-root {
  --professional-surface: #ffffff;
  --professional-text: #0f172a;
  --professional-muted: #475569;
  --professional-border: #cbd5e1;
  --event-action: #17684c;
  --event-action-hover: #edf6f1;
  color: var(--professional-text);
  background: var(--professional-surface);
  color-scheme: light;
}

html[data-professional-theme="dark"] .professional-calendar-event-drawer.MuiPaper-root {
  --professional-surface: #172033;
  --professional-text: #e5e7eb;
  --professional-muted: #b0bdd0;
  --professional-border: #64748b;
  --event-action: #a7f3d0;
  --event-action-hover: #243149;
  color-scheme: dark;
}

.professional-calendar-event-drawer .professional-assistive-calendar__details {
  color: var(--professional-text);
  background: transparent;
}

.professional-calendar-event-drawer .MuiTypography-root {
  color: var(--professional-text);
}

.professional-calendar-event-drawer :is(.MuiTypography-caption, .MuiTypography-body2, .professional-assistive-calendar__facts span) {
  color: var(--professional-muted);
}

.professional-calendar-event-drawer .professional-assistive-calendar__facts svg {
  color: var(--professional-muted);
}

.professional-calendar-event-drawer .MuiButton-root:is(.MuiButton-outlined, .MuiButton-text):not(.Mui-disabled) {
  color: var(--event-action);
  background: transparent;
  border-color: var(--professional-border);
}

.professional-calendar-event-drawer .MuiButton-root:is(.MuiButton-outlined, .MuiButton-text):not(.Mui-disabled):hover {
  background: var(--event-action-hover);
}

.professional-calendar-event-drawer .MuiButton-root.MuiButton-contained:not(.Mui-disabled) {
  color: #ffffff;
  background: #17684c;
}

.professional-calendar-event-drawer .MuiButton-root.MuiButton-contained:not(.Mui-disabled):hover {
  background: #12543d;
}

.professional-calendar-event-drawer .MuiButton-root:focus-visible {
  outline: 2px solid var(--event-action);
  outline-offset: 3px;
}