/* Theme overrides. Loaded after component styles so dark mode wins cleanly. */
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #111827;
  --theme-surface: #1f2937;
  --theme-surface-raised: #273449;
  --theme-input: #172033;
  --theme-border: #374151;
  --theme-border-soft: #303b4d;
  --theme-text: #f3f4f6;
  --theme-text-strong: #f9fafb;
  --theme-muted: #aab4c3;
  --theme-subtle: #8491a3;
  --theme-accent-soft: #25245a;
  --theme-accent-hover: #312e81;
}

html[data-theme="dark"] body { background: var(--theme-page); color: var(--theme-text); }
html[data-theme="dark"] .app-sidebar,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .calendar-shell,
html[data-theme="dark"] .hours-card,
html[data-theme="dark"] .holidays-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .services-list,
html[data-theme="dark"] .service-detail,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .appointment-modal__panel,
html[data-theme="dark"] .new-booking-modal__panel { background: var(--theme-surface); border-color: var(--theme-border); }

html[data-theme="dark"] .app-sidebar { border-right-color: var(--theme-border); }
html[data-theme="dark"] .app-header { border-bottom-color: var(--theme-border); }
html[data-theme="dark"] .app-sidebar__brand-name,
html[data-theme="dark"] #business-name,
html[data-theme="dark"] .today-summary__label,
html[data-theme="dark"] .today-summary__greeting,
html[data-theme="dark"] .today-summary__details strong,
html[data-theme="dark"] .settings-card__header h2,
html[data-theme="dark"] .services-page__header h2,
html[data-theme="dark"] .hours-card__heading h3,
html[data-theme="dark"] .holidays-card__heading h3,
html[data-theme="dark"] .service-row__name,
html[data-theme="dark"] .service-row__meta strong,
html[data-theme="dark"] .service-detail__heading h3,
html[data-theme="dark"] .appointment-modal__title,
html[data-theme="dark"] .appointment-details dd,
html[data-theme="dark"] .notification-panel__header strong,
html[data-theme="dark"] .notification-item__copy strong { color: var(--theme-text-strong); }

html[data-theme="dark"] .app-sidebar__link,
html[data-theme="dark"] .app-sidebar__preview,
html[data-theme="dark"] .app-sidebar__dev,
html[data-theme="dark"] .connection-status,
html[data-theme="dark"] .today-summary__details,
html[data-theme="dark"] .hours-card__heading p,
html[data-theme="dark"] .holidays-card__heading p,
html[data-theme="dark"] .service-row__meta,
html[data-theme="dark"] .service-detail__facts span,
html[data-theme="dark"] .appointment-modal__eyebrow,
html[data-theme="dark"] .appointment-details dt,
html[data-theme="dark"] .notification-item__copy span,
html[data-theme="dark"] .notification-panel__header span,
html[data-theme="dark"] .notification-list__empty { color: var(--theme-muted); }

html[data-theme="dark"] .app-sidebar__link:hover,
html[data-theme="dark"] .app-sidebar__link.is-active { background: var(--theme-accent-soft); color: #c7d2fe; }
html[data-theme="dark"] .app-sidebar__toggle:hover,
html[data-theme="dark"] .hours-add:hover,
html[data-theme="dark"] .hours-remove:hover,
html[data-theme="dark"] .service-row:hover { background: var(--theme-accent-soft); }
html[data-theme="dark"] .app-sidebar__dev { border-top-color: var(--theme-border); }
html[data-theme="dark"] .app-sidebar__profile-switcher { color: var(--theme-text); }
html[data-theme="dark"] .app-sidebar__profile-select,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .settings-secondary,
html[data-theme="dark"] .hours-time-select__button,
html[data-theme="dark"] .new-booking-select__button,
html[data-theme="dark"] .new-booking-date__button { background: var(--theme-input); border-color: var(--theme-border); color: var(--theme-text); }

html[data-theme="dark"] .calendar-shell { box-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
html[data-theme="dark"] #person-switcher { border-bottom-color: var(--theme-border); }
html[data-theme="dark"] .person-tab { color: var(--theme-muted); }
html[data-theme="dark"] .person-tab.active { color: var(--theme-text-strong); border-bottom-color: #a5b4fc; }
html[data-theme="dark"] .fc {
  --fc-page-bg-color: var(--theme-surface);
  --fc-neutral-bg-color: #172033;
  --fc-border-color: var(--theme-border);
  --fc-neutral-text-color: var(--theme-muted);
  --fc-today-bg-color: #25245a;
  --fc-list-event-hover-bg-color: #303b4d;
}
html[data-theme="dark"] .fc .fc-day-today,
html[data-theme="dark"] .fc .fc-timegrid-col.fc-day-today,
html[data-theme="dark"] .fc .fc-timegrid-col-bg .fc-day-today,
html[data-theme="dark"] .fc .fc-timegrid-col.fc-day-today .fc-timegrid-slot-lane,
html[data-theme="dark"] .fc .fc-timegrid-col-bg .fc-day-today .fc-timegrid-slot-lane { background-color: #25245a !important; }
html[data-theme="dark"] .fc .fc-col-header-cell.fc-day-today,
html[data-theme="dark"] .fc .fc-list-day.fc-list-day-today > th { background-color: #373477; color: #ddd6fe; }
html[data-theme="dark"] .fc .fc-daygrid-day-number,
html[data-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-toolbar-title,
html[data-theme="dark"] .fc .fc-list-event-title,
html[data-theme="dark"] .fc .fc-list-event-time { color: var(--theme-text); }
html[data-theme="dark"] .fc .fc-button,
html[data-theme="dark"] .fc .fc-button-primary:not(:disabled) { background: var(--theme-input); border-color: var(--theme-border); color: var(--theme-text); }
html[data-theme="dark"] .fc .fc-button:hover:not(:disabled) { background: var(--theme-accent-hover); border-color: #6366f1; color: #fff; }
html[data-theme="dark"] .fc .fc-daygrid-event { border-bottom-color: var(--theme-border); color: var(--theme-text); }
html[data-theme="dark"] .fc .fc-daygrid-event:hover .month-event { background: #303b4d; }
html[data-theme="dark"] .fc .fc-timegrid-slot-lane.calendar-slot--today { background: #25245a !important; }
html[data-theme="dark"] .fc .calendar-day--nonworking { background-color: #182130 !important; }
html[data-theme="dark"] .fc .fc-theme-standard .fc-scrollgrid,
html[data-theme="dark"] .fc-theme-standard td,
html[data-theme="dark"] .fc-theme-standard th { border-color: var(--theme-border); }

html[data-theme="dark"] .notification-button,
html[data-theme="dark"] .appointment-modal__navigation,
html[data-theme="dark"] .notification-panel__footer,
html[data-theme="dark"] .hours-coming-soon,
html[data-theme="dark"] .holiday-row__status { background: var(--theme-input); border-color: var(--theme-border); color: var(--theme-muted); }
html[data-theme="dark"] .notification-button:hover,
html[data-theme="dark"] .notification-button[aria-expanded="true"] { background: var(--theme-accent-soft); border-color: #6366f1; color: #c7d2fe; }
html[data-theme="dark"] .notification-panel__header,
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .appointment-modal__header,
html[data-theme="dark"] .appointment-modal__footer,
html[data-theme="dark"] .appointment-details__row,
html[data-theme="dark"] .new-booking-form__footer,
html[data-theme="dark"] .manual-block-form__footer,
html[data-theme="dark"] .holiday-form__footer { border-color: var(--theme-border-soft); }
html[data-theme="dark"] .notification-item { background: var(--theme-surface); }
html[data-theme="dark"] .notification-item.is-unread { background: #25245a; }
html[data-theme="dark"] .notification-item__actions button:hover,
html[data-theme="dark"] .customer-suggestions button:hover,
html[data-theme="dark"] .new-booking-select__menu button:hover,
html[data-theme="dark"] .new-booking-date__days button:hover,
html[data-theme="dark"] .hours-time-select__menu button:hover { background: var(--theme-accent-soft); color: #ddd6fe; }
html[data-theme="dark"] .notification-panel__header button,
html[data-theme="dark"] .notification-panel__footer button,
html[data-theme="dark"] .hours-add,
html[data-theme="dark"] .hours-remove,
html[data-theme="dark"] .hours-save,
html[data-theme="dark"] .service-row__actions button,
html[data-theme="dark"] .service-detail__add { color: #a5b4fc; }
html[data-theme="dark"] .notification-item__copy small,
html[data-theme="dark"] .notification-item__actions button,
html[data-theme="dark"] .services-empty,
html[data-theme="dark"] .hours-demo-note,
html[data-theme="dark"] .hours-override span,
html[data-theme="dark"] .appointment-modal__navigation span { color: var(--theme-subtle); }

html[data-theme="dark"] .notification-panel__footer,
html[data-theme="dark"] .service-row.is-disabled,
html[data-theme="dark"] .service-row__actions button,
html[data-theme="dark"] .service-detail__close,
html[data-theme="dark"] .hours-override__value,
html[data-theme="dark"] .hours-override__value--closed { background: #252d3a; }
html[data-theme="dark"] .notification-item__main:hover .notification-item__copy strong { color: #c7d2fe; }
html[data-theme="dark"] .new-booking-select__menu,
html[data-theme="dark"] .new-booking-date__popover,
html[data-theme="dark"] .hours-time-select__menu,
html[data-theme="dark"] .customer-suggestions { background: var(--theme-surface-raised); border-color: var(--theme-border); box-shadow: 0 12px 25px rgba(0,0,0,.35); }
html[data-theme="dark"] .new-booking-select__menu button,
html[data-theme="dark"] .new-booking-date__days button,
html[data-theme="dark"] .hours-time-select__menu button,
html[data-theme="dark"] .customer-suggestions button { color: var(--theme-text); }
html[data-theme="dark"] .new-booking-date__header button { background: var(--theme-accent-soft); color: #c7d2fe; }
html[data-theme="dark"] .new-booking-date__header strong,
html[data-theme="dark"] .new-booking-date__time { color: var(--theme-text); }
html[data-theme="dark"] .new-booking-date__time { border-top-color: var(--theme-border); }
html[data-theme="dark"] .new-booking-date__weekdays { color: var(--theme-subtle); }
html[data-theme="dark"] .new-booking-date__time select { background: var(--theme-input); border-color: var(--theme-border); color: var(--theme-text); }

html[data-theme="dark"] .appointment-modal__backdrop { background: rgba(2, 6, 23, .72); }
html[data-theme="dark"] .appointment-modal__close:hover,
html[data-theme="dark"] .manual-block-input-clear:hover { background: var(--theme-accent-soft); color: var(--theme-text); }
html[data-theme="dark"] .appointment-note textarea { background: var(--theme-input); border-color: var(--theme-border); color: var(--theme-text); }
html[data-theme="dark"] .appointment-details__row--selection-end { border-bottom-color: var(--theme-border); }
html[data-theme="dark"] .appointment-modal__footer { background: #182130; }
html[data-theme="dark"] .services-primary-button,
html[data-theme="dark"] .new-booking-button,
html[data-theme="dark"] .new-booking-submit { box-shadow: 0 2px 7px rgba(0,0,0,.3); }

html[data-theme="dark"] .hours-day,
html[data-theme="dark"] .hours-override,
html[data-theme="dark"] .holiday-row,
html[data-theme="dark"] .service-row,
html[data-theme="dark"] .service-detail__facts,
html[data-theme="dark"] .service-detail__group li { border-bottom-color: var(--theme-border-soft); }
html[data-theme="dark"] .hours-day__name,
html[data-theme="dark"] .hours-window > span,
html[data-theme="dark"] .holiday-row strong,
html[data-theme="dark"] .settings-profile > div:last-child,
html[data-theme="dark"] .settings-form label,
html[data-theme="dark"] .service-detail__group h4 { color: var(--theme-text); }
html[data-theme="dark"] .hours-override strong { color: var(--theme-text); }
html[data-theme="dark"] .hours-override span { color: var(--theme-muted); }
html[data-theme="dark"] .hours-override__value { background: #312e5f; color: #ddd6fe !important; }
html[data-theme="dark"] .hours-override__value--closed { background: #303b4d; color: #cbd5e1 !important; }
html[data-theme="dark"] .hours-add-override { color: #a5b4fc; }
html[data-theme="dark"] .hours-time-select__menu button,
html[data-theme="dark"] .service-row__actions button { border-color: var(--theme-border); }
html[data-theme="dark"] .settings-form input:disabled { background: #252d3a; color: var(--theme-subtle); }
html[data-theme="dark"] .settings-avatar { background: #374151; border-color: var(--theme-border); }
html[data-theme="dark"] .service-detail__radio.is-selected { box-shadow: inset 0 0 0 3px var(--theme-surface); }

.theme-toggle { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #475569; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; }
.theme-toggle:hover { border-color: #c7d2fe; background: #f5f3ff; color: #4338ca; }
.theme-toggle:focus-visible { outline: 3px solid rgba(99,102,241,.2); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__sun, .theme-toggle__moon, .theme-toggle__system { display: none; }
html[data-theme-choice="light"] .theme-toggle__sun { display: block; }
html[data-theme-choice="dark"] .theme-toggle__moon { display: block; }
html[data-theme-choice="system"] .theme-toggle__system { display: block; }
html[data-theme="dark"] .theme-toggle { background: var(--theme-input); border-color: var(--theme-border); color: #fbbf24; }
html[data-theme="dark"] .theme-toggle:hover { background: var(--theme-accent-soft); border-color: #6366f1; color: #fde68a; }

html[data-theme="dark"] .connection-label--connected { color: #86efac; }
html[data-theme="dark"] #connection-dot.connection-dot--connected { background: #4ade80; }

html[data-theme="dark"] .services-primary-button,
html[data-theme="dark"] .new-booking-button,
html[data-theme="dark"] .new-booking-submit,
html[data-theme="dark"] .new-booking-form.is-preview-submitted .new-booking-submit {
  background: #818cf8;
  color: #111827;
}
html[data-theme="dark"] .services-primary-button:hover,
html[data-theme="dark"] .new-booking-button:hover,
html[data-theme="dark"] .new-booking-submit:hover { background: #a5b4fc; color: #111827; }

html[data-theme="dark"] .hours-toggle { background: #4b5563; }
html[data-theme="dark"] .hours-toggle span { background: #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
html[data-theme="dark"] .hours-toggle.is-on { background: #818cf8; }
html[data-theme="dark"] .hours-toggle.is-on span { background: #111827; }

html[data-theme="dark"] .service-secondary-button,
html[data-theme="dark"] .settings-secondary,
html[data-theme="dark"] .hours-save,
html[data-theme="dark"] .hours-time-select__button,
html[data-theme="dark"] .service-row__actions button,
html[data-theme="dark"] .appointment-modal__actions button,
html[data-theme="dark"] .appointment-modal__quick-actions button {
  background: var(--theme-input);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .hours-save:hover,
html[data-theme="dark"] .service-secondary-button:hover,
html[data-theme="dark"] .settings-secondary:hover,
html[data-theme="dark"] .hours-time-select__button:hover,
html[data-theme="dark"] .appointment-modal__actions button:hover { background: var(--theme-accent-soft); border-color: #6366f1; color: #ddd6fe; }
html[data-theme="dark"] .appointment-modal__quick-actions button { border-color: #155e75; background: #123043; color: #7dd3fc; }
html[data-theme="dark"] .appointment-modal__quick-actions button.is-whatsapp:hover { border-color: #22c55e; background: #123b2b; color: #86efac; }
html[data-theme="dark"] .appointment-modal__actions button.is-danger:hover { border-color: #f87171; background: #431b24; color: #fca5a5; }
html[data-theme="dark"] .service-row__actions .service-toggle.is-enabled { border-color: #22c55e; background: #14532d; color: #bbf7d0; }
html[data-theme="dark"] .service-row__actions .service-toggle.is-enabled:hover { border-color: #4ade80; background: #166534; color: #dcfce7; }

@media (max-width: 639px) {
  .theme-toggle { width: 34px; height: 34px; }
}