/* Attendance notes and checklist must retain readable colors in dark mode. */
.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) :is(
  .professional-my-day-card__hint,
  .professional-native-checklist-card__summary .MuiTypography-body2,
  .professional-native-checklist-card__counts,
  .professional-assistive-line__time,
  .professional-assistive-line__professional
) {
  color: var(--professional-muted);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) :is(
  .professional-assistive-line__time strong,
  .professional-native-checklist-card__summary h5
) {
  color: var(--professional-text);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) :is(
  .professional-assistive-line__card,
  .professional-native-checklist-card__counts
) {
  border-color: var(--professional-border);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-assistive-line {
  scrollbar-color: #94a3b8 transparent;
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-assistive-line::-webkit-scrollbar-thumb {
  background: #94a3b8;
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-assistive-line::before {
  background: var(--professional-border);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-assistive-line__item .professional-assistive-line__marker {
  box-shadow: 0 0 0 4px var(--professional-surface);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) :is(
  .professional-my-day-card__title > .MuiButton-root,
  .professional-native-checklist-card .professional-care-timeline__header .MuiButton-root,
  .professional-assistive-line__attachment
):not(.Mui-disabled) {
  color: #a7f3d0;
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-my-day-card__title > .MuiButton-outlined:not(.Mui-disabled) {
  background: #173d35;
  border-color: #46b68d;
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-my-day-card__title > .MuiButton-outlined:not(.Mui-disabled):hover {
  background: #225447;
  border-color: #6ee7b7;
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-my-day-card__title > .MuiButton-root svg {
  color: inherit;
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-native-checklist-card__ring {
  background: conic-gradient(var(--progress-color) 0 var(--progress), var(--professional-border) var(--progress) 100%);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-native-checklist-card__ring span {
  color: var(--professional-text);
  background: var(--professional-surface-soft);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-native-checklist__item {
  --checklist-status-color: #a7f3d0;
  --checklist-status-surface: #173d35;
  background: var(--professional-surface-soft);
  border-color: var(--professional-border);
  border-left-color: var(--checklist-status-color);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-native-checklist__item.status-late {
  --checklist-status-color: #fda4af;
  --checklist-status-surface: #4c2432;
  background: #2d1e2b;
  border-color: #774052;
  border-left-color: var(--checklist-status-color);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-native-checklist__item.status-skipped {
  --checklist-status-color: #cbd5e1;
  --checklist-status-surface: #334155;
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-native-checklist__item :is(p, strong) {
  color: var(--professional-text);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-native-checklist__item small {
  color: var(--checklist-status-color);
}

.professional-layout:is(.professional-theme-dark, [data-theme="dark"]) .professional-native-checklist__item > span {
  color: var(--checklist-status-color);
  background: var(--checklist-status-surface);
}