/* PMS-only compatibility for legacy surfaces; canonical colors live in tokens.css.
   No filters/inversion, layout changes, provider image recoloring or public styling. */
@media screen {
:root[data-theme="dark"] {
    --bg: var(--ui-color-canvas);
    --surface: var(--ui-color-surface);
    --surface-soft: var(--ui-color-surface-subtle);
    --line: var(--ui-color-border);
    --text: var(--ui-color-text);
    --muted: var(--ui-color-text-muted);
    --blue: var(--ui-color-primary);
    --blue-soft: var(--ui-color-primary-soft);
    --green: var(--ui-color-success);
    --green-soft: var(--ui-color-success-soft);
    --orange: var(--ui-color-warning);
    --orange-soft: var(--ui-color-warning-soft);
    --color-surface: var(--ui-color-surface);
    --color-surface-soft: var(--ui-color-surface-subtle);
    --color-text: var(--ui-color-text);
    --color-text-muted: var(--ui-color-text-muted);
    --color-border: var(--ui-color-border);
    --shadow: var(--ui-shadow-dialog);
}
:root[data-theme="dark"],
:root[data-theme="dark"] body,
:root[data-theme="dark"] .main-content { background-color: var(--ui-color-canvas); color: var(--ui-color-text); }
:root[data-theme="dark"] :is(.crm-topbar, .topbar-user-dropdown, .unread-panel, .unread-item,
    .hero-panel, .page-header, .detail-card, .panel, .card, .table-wrap, .table-card,
    .inventory-card, .client-card, .template-card, .crm-note-item, .notification-card,
    .calendar-booking-drawer, .calendar-booking-drawer-head, .calendar-booking-drawer-footer,
    .booking-drawer-view, .booking-drawer-view-tabs, .booking-drawer-flow-editor,
    .booking-drawer-flow-editor-head, .booking-drawer-editor-actions,
    .document-modal-card, .inventory-dialog, .calendar-stay-dialog, .calendar-action-dialog,
    .calendar-date-range-dialog, .crm-notes-dialog, .pwa-install-dialog,
    .calendar-availability-dialog, .calendar-board, .calendar-scroll, .calendar-toolbar,
    .calendar-header, .bottom-nav, .mobile-bottom-nav, .booking-guest-card) {
    background-color: var(--ui-color-surface);
    background-image: none;
    color: var(--ui-color-text);
    border-color: var(--ui-color-border);
}
:root[data-theme="dark"] :is(dialog, .ui-dialog)::backdrop { background: var(--ui-color-overlay); }
:root[data-theme="dark"] :is(h1,h2,h3,h4, .section-head, .detail-card > strong,
    .topbar-user-copy strong, .booking-guest-name, .calendar-booking-drawer-person h2) { color: var(--ui-color-text); }
:root[data-theme="dark"] :is(.muted, .empty-note, .field-label, .detail-label, .topbar-user-copy small,
    .calendar-booking-drawer-person p, .calendar-booking-drawer-summary span,
    .booking-history-item > div > span, .calendar-day small, .calendar-room-label span) { color: var(--ui-color-text-muted); }
:root[data-theme="dark"] :is(.topbar-user-dropdown a, .topbar-logout-form button) { color: var(--ui-color-text); }
:root[data-theme="dark"] :is(.topbar-user-dropdown a, .topbar-logout-form button):hover { background: var(--ui-color-surface-muted); }
:root[data-theme="dark"] body.aplus-form-controls :is(input:not([type]),
    input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="search"],
    input[type="number"],input[type="url"],input[type="date"],input[type="time"],input[type="datetime-local"],select,textarea) {
    background-color: var(--ui-color-surface-subtle); color: var(--ui-color-text); border-color: var(--ui-color-border-strong);
}
:root[data-theme="dark"] body.aplus-form-controls :is(input,textarea)::placeholder { color: var(--ui-color-text-subtle); opacity: 1; }
:root[data-theme="dark"] body.aplus-form-controls :is(input,select,textarea):disabled { color: var(--ui-color-text-muted); }
:root[data-theme="dark"] :is(.icon-only,.icon-button,.topbar-menu-toggle,.notification-toggle,
    .topbar-user-button,.topbar-quick-link,.calendar-nav-button,.calendar-date-range-trigger,
    .row-link,.secondary-button,.calendar-action-icon,.menu-toggle) {
    background-color: var(--ui-color-surface); border-color: var(--ui-color-border); color: var(--ui-color-text);
}
:root[data-theme="dark"] :is(.row-link,.secondary-button,.icon-only,.icon-button):hover {
    background-color: var(--ui-color-surface-muted); color: var(--ui-color-text);
}
:root[data-theme="dark"] :is(.primary-button,.send-button,.ui-button--primary,.round-add-button,.ui-top-tabs > .is-active) {
    background-color: #2457d6; color: var(--ui-color-on-primary); border-color: #2457d6;
}
:root[data-theme="dark"] :is(.danger,.danger-link,.pms-destructive-action) { color: var(--ui-color-danger); }
:root[data-theme="dark"] :is(th, .table-head, .calendar-head-row, .calendar-day, .calendar-room-head,
    .calendar-room-label, .calendar-room-type-row, .calendar-stay-card,
    .booking-guest-form, .booking-guest-editor-card, .document-item) {
    background-color: var(--ui-color-surface-subtle); color: var(--ui-color-text); border-color: var(--ui-color-border);
}
:root[data-theme="dark"] :is(td,tr, .section-head, .booking-info-item, .booking-history-item,
    .calendar-slot, .calendar-room-row, .calendar-booking-drawer-tabs, .booking-drawer-view-tabs) { border-color: var(--ui-color-border); }
:root[data-theme="dark"] tbody tr:hover { background-color: var(--ui-color-surface-muted); }
/* Calendar is a domain visualization: preserve each operational status. */
:root[data-theme="dark"] :is(.calendar-room-row, .calendar-room-row:nth-child(even)) { background: var(--ui-color-canvas); }
:root[data-theme="dark"] .calendar-room-row:nth-child(even) .calendar-room-label { background: var(--ui-color-surface-subtle); }
:root[data-theme="dark"] :is(.calendar-day.is-weekend,.calendar-slot.is-weekend) { background-color: #1c2b40; }
:root[data-theme="dark"] .calendar-property-row { background: #243b54; color: var(--ui-color-text); }
:root[data-theme="dark"] :is(.calendar-property-title,.calendar-room-type-title) { color: var(--ui-color-text); }
:root[data-theme="dark"] .calendar-booking { background: var(--ui-color-success-soft); color: var(--ui-color-success); border-color: #3d7863; }
:root[data-theme="dark"] .calendar-booking.arriving { background: var(--ui-color-primary-soft); color: #aac6ff; }
:root[data-theme="dark"] :is(.calendar-booking.staying,.calendar-booking.is-checked-in) { background: var(--ui-color-success-soft); color: var(--ui-color-success); border-color: #3d7863; }
:root[data-theme="dark"] .calendar-booking.checkout { background: var(--ui-color-warning-soft); color: var(--ui-color-warning); }
:root[data-theme="dark"] .calendar-booking.upcoming { background: #332c52; color: #c1b3ff; }
:root[data-theme="dark"] :is(.calendar-booking.completed,.calendar-booking.unknown) { background: var(--ui-color-surface-muted); color: var(--ui-color-text-muted); }
:root[data-theme="dark"] .calendar-booking-label :is(strong,span) { color: inherit; }
:root[data-theme="dark"] :is(.calendar-slot.is-selected,.calendar-slot.is-range-selected) { background-color: var(--ui-color-primary-soft); }
:root[data-theme="dark"] :is(.calendar-slot.is-closed,.sales-calendar-cell.is-closed) { background-color: var(--ui-color-surface-muted); color: var(--ui-color-text-muted); }
:root[data-theme="dark"] .calendar-booking-drawer { box-shadow: var(--ui-shadow-dialog); }
:root[data-theme="dark"] :is(.calendar-booking-drawer-tabs,.booking-drawer-view-tabs) button { color: var(--ui-color-text-muted); }
:root[data-theme="dark"] :is(.calendar-booking-drawer-tabs,.booking-drawer-view-tabs) button.is-active { color: #aac6ff; }
:root[data-theme="dark"] :is(.calendar-booking-drawer-balance strong,.balance-amount) { color: var(--ui-color-warning); }

:root[data-theme="dark"] .ui-button--danger { background-color: #b42318; color: #fff; }

/* Verified legacy compatibility: backgrounds and text not yet tokenized. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell { background: var(--ui-color-canvas); }
:root[data-theme="dark"] body.booking-drawer-embedded { background: var(--ui-color-surface) !important; }
:root[data-theme="dark"] :is(.calendar-booking-drawer-header,.calendar-booking-drawer-body,
    .booking-drawer-view-panel,.booking-section-body,.booking-section,
    .menu-settings-group,.toggle-pill,.profile-photo-panel,.profile-readonly-card,
    .unread-empty,.arrival-reminder-empty,.ui-top-tab:not(.is-active),.channel-icon-button,
    .cm-heading-icon,.kpi-category-icon) {
    background-color: var(--ui-color-surface-subtle); color: var(--ui-color-text); border-color: var(--ui-color-border);
}
:root[data-theme="dark"] :is(.crm-topbar-title strong,.crm-topbar-title h1,
    .booking-drawer-view-panel .section-head strong,.booking-detail-grid dd,
    .booking-drawer-view-panel h3,.booking-drawer-view-panel h4,
    .booking-primary-guest strong,.booking-primary-guest-name) { color: var(--ui-color-text); }
:root[data-theme="dark"] .booking-drawer-view-panel a { color: #aac7ff; }
:root[data-theme="dark"] .booking-detail-grid > div { border-color: var(--ui-color-border); }
:root[data-theme="dark"] :is(.calendar-booking-drawer-tabs,.booking-drawer-view-tabs) button[aria-selected="true"] { color: #aac7ff; }
:root[data-theme="dark"] :is(.status-pill,.mini-pill,.payment-status-pill) { background: var(--ui-color-surface-muted); color: var(--ui-color-text-muted); }
:root[data-theme="dark"] :is(.status-pill.arriving,.mini-pill.info,.calendar-booking-drawer-reference .mini-pill) { background: var(--ui-color-primary-soft); color: #aac7ff; }
:root[data-theme="dark"] :is(.status-pill.staying,.mini-pill.enabled,.channel-health-badge.is-ok) { background: var(--ui-color-success-soft); color: var(--ui-color-success); }
:root[data-theme="dark"] :is(.status-pill.checkout,.channel-health-badge.is-warning) { background: var(--ui-color-warning-soft); color: var(--ui-color-warning); }
:root[data-theme="dark"] .status-pill.upcoming { background: #332c52; color: #c1b3ff; }

:root[data-theme="dark"] :is(.booking-note-card > label,.booking-note-card > strong,
    .booking-note-card > span,.booking-note-head > span,.booking-readiness-title) { color: var(--ui-color-text); }

:root[data-theme="dark"] :is(.inventory-apartment-table-wrap,.hk-board-scroll,.hk-board th,.hk-board td,.summary-icon) {
    background: var(--ui-color-surface-subtle); color: var(--ui-color-text); border-color: var(--ui-color-border);
}
:root[data-theme="dark"] .hk-board td.is-weekend { background: var(--ui-color-surface-muted); }
:root[data-theme="dark"] :is(.hk-board td,.hk-board th).is-today { background: var(--ui-color-primary-soft); color: #aac7ff; }
:root[data-theme="dark"] :is(.summary-icon.turnover,.summary-icon.profit) { background: var(--ui-color-success-soft); color: var(--ui-color-success); }
:root[data-theme="dark"] .summary-icon.commission { background: var(--ui-color-warning-soft); color: var(--ui-color-warning); }
:root[data-theme="dark"] .summary-icon.expense { background: var(--ui-color-danger-soft); color: var(--ui-color-danger); }

:root[data-theme="dark"] .booking-drawer-view-tabs button:hover { background: var(--ui-color-surface-muted); color: var(--ui-color-text); }
@media (min-width: 999px) {
    :root[data-theme="dark"] body.booking-drawer-embedded .booking-drawer-view-tabs button[aria-selected="true"] {
        color: #fff; background: #2457d6;
    }
}

:root[data-theme="dark"] body.booking-drawer-embedded .booking-note-head > span:first-child { color: var(--ui-color-text); }
:root[data-theme="dark"] .hk-board tbody > tr:not(.hk-board-group):not(.hk-board-room-type) > :is(th,td) {
    background: var(--ui-color-surface-subtle); color: var(--ui-color-text);
}
:root[data-theme="dark"] .hk-board tbody > tr:not(.hk-board-group):not(.hk-board-room-type) > td.is-weekend,
:root[data-theme="dark"] .hk-board thead th.is-weekend { background: var(--ui-color-surface-muted); }
:root[data-theme="dark"] .hk-board tbody > tr:not(.hk-board-group):not(.hk-board-room-type) > td.is-today { background: var(--ui-color-primary-soft); }

:root[data-theme="dark"] [data-booking-drawer-order] { color: var(--ui-color-text-muted); }
:root[data-theme="dark"] [data-booking-editor-summary-amount] { color: var(--ui-color-warning); }

/* Screenshot audit: opaque calendar cells, legacy cards and masked glyphs. */
:root[data-theme="dark"] body.client-drawer-embedded { background: var(--ui-color-surface) !important; }
:root[data-theme="dark"] .calendar-slot { background: var(--ui-color-canvas); }
:root[data-theme="dark"] .calendar-slot.is-weekend { background: var(--ui-color-surface-subtle); }
:root[data-theme="dark"] .calendar-slot.is-bookable:hover,
:root[data-theme="dark"] .calendar-slot.is-selected-range,
:root[data-theme="dark"] .calendar-slot.is-selection-start,
:root[data-theme="dark"] .calendar-slot.is-selection-end { background: var(--ui-color-primary-soft); }
:root[data-theme="dark"] .calendar-slot.is-adjacent-day-blocked { color: var(--ui-color-text-muted); }
:root[data-theme="dark"] .calendar-slot.is-adjacent-day-blocked::after { opacity: .65; }
:root[data-theme="dark"] :is(.channel-connection-compact,.channel-automatic-horizon-item,
    .template-editor-item,.message-template-variables,.message-template-variable,
    .channel-sync-tabs > button:not(.is-active),.calendar-date-range-popover) {
    background: var(--ui-color-surface-subtle); color: var(--ui-color-text); border-color: var(--ui-color-border);
}
:root[data-theme="dark"] .message-template-variable:hover,
:root[data-theme="dark"] .message-template-variable:focus-visible,
:root[data-theme="dark"] .message-template-variable.is-copied { background: var(--ui-color-primary-soft); color: var(--ui-color-text); }
:root[data-theme="dark"] :is(.card-surface,.ui-card) { border-color: var(--ui-color-border); }
:root[data-theme="dark"] :is(.page-title-icon,.settings-tab-icon) {
    color: var(--ui-color-info); background: var(--ui-color-primary-soft); box-shadow: none;
}
:root[data-theme="dark"] .crm-page-settings .settings-tab.is-active { color: #fff; background: #2457d6; border-color: #2457d6; }
:root[data-theme="dark"] .crm-page-settings .settings-tab.is-active .settings-tab-icon { color: #fff; background: rgb(255 255 255 / 16%); }
:root[data-theme="dark"] .calendar-date-range-calendar-icon { fill: currentColor; }
:root[data-theme="dark"] :is(.channel-state.is-active,.channel-state.is-completed,.channel-state.is-succeeded) { color: var(--ui-color-success); background: var(--ui-color-success-soft); }
:root[data-theme="dark"] :is(.channel-state.is-failed,.channel-health-badge.is-error) { color: var(--ui-color-danger); background: var(--ui-color-danger-soft); }
:root[data-theme="dark"] :is(.channel-state.is-pending,.channel-state.is-authorizing,.channel-state.is-retry,.channel-state.is-queued,.channel-state.is-draft) { color: var(--ui-color-warning); background: var(--ui-color-warning-soft); }
:root[data-theme="dark"] :is(.channel-state.is-processing,.channel-state.is-accepted) { color: var(--ui-color-info); background: var(--ui-color-info-soft); }
:root[data-theme="dark"] :is(.channel-state.is-disabled,.channel-state.is-cancelled) { color: var(--ui-color-text-muted); background: var(--ui-color-surface-muted); }

:root[data-theme="dark"] .calendar-scroll.is-scrolling .calendar-slot.is-bookable:hover { background: var(--ui-color-canvas); }
:root[data-theme="dark"] .calendar-scroll.is-scrolling .calendar-slot.is-bookable.is-weekend:hover { background: var(--ui-color-surface-subtle); }
:root[data-theme="dark"] :is(.calendar-linen-marker,.calendar-linen-marker.is-cleaning) {
    background: var(--ui-color-info-soft); color: var(--ui-color-text); border-color: var(--ui-color-border); opacity: 1;
}

:root[data-theme="dark"] .message-template-variable span { color: var(--ui-color-text-muted); }
:root[data-theme="dark"] .calendar-room-row.is-inactive-room .calendar-slot { background: var(--ui-color-surface-muted); }

:root[data-theme="dark"] body.booking-drawer-embedded .main-panel,
:root[data-theme="dark"] .calendar-booking-drawer-frame { background: var(--ui-color-surface); }

/* Loading shares the drawer palette before its embedded document is ready. */
:root[data-theme="dark"] :is(.calendar-booking-drawer-loading-tabs,.calendar-booking-drawer-loading-preview) {
    background-color: var(--ui-color-surface); border-color: var(--ui-color-border);
}
:root[data-theme="dark"] :is(.calendar-booking-drawer-loading-tabs,.calendar-booking-drawer-loading-preview) span {
    background-image: linear-gradient(90deg, var(--ui-color-surface-muted) 20%, var(--ui-color-border) 50%, var(--ui-color-surface-muted) 80%);
}
:root[data-theme="dark"] :is(.calendar-booking-drawer-loading-label,.booking-drawer-editor-loading) { color: var(--ui-color-text-muted); }
:root[data-theme="dark"] :is(.calendar-property-row,.calendar-room-type-row,.calendar-head-row) { border-bottom-color: var(--ui-color-border); }

/* Profile subpanels and the shared calendar/list drawer action use the same palette. */
:root[data-theme="dark"] :is(.profile-passkey-list,.profile-session-item,.profile-delivery-item,.profile-setting-row) {
    background: var(--ui-color-surface-subtle); border-color: var(--ui-color-border); color: var(--ui-color-text);
}
:root[data-theme="dark"] .profile-passkey-item {
    background: var(--ui-color-surface); border-color: var(--ui-color-border);
}
:root[data-theme="dark"] :is(.profile-photo-copy strong,.profile-readonly-card strong,
    .profile-passkey-item strong,.profile-session-title strong,.profile-sessions-toolbar > strong,
    .profile-setting-row strong,.profile-password-reset-copy strong) { color: var(--ui-color-text); }
:root[data-theme="dark"] :is(.profile-passkey-icon,.profile-session-icon,.profile-avatar-preview) {
    background: var(--ui-color-primary-soft); color: var(--ui-color-info); border-color: var(--ui-color-border); box-shadow: none;
}
:root[data-theme="dark"] .profile-session-item.is-current {
    background: var(--ui-color-success-soft); border-color: var(--ui-color-success);
}
:root[data-theme="dark"] .profile-session-current { background: var(--ui-color-surface); color: var(--ui-color-success); }
:root[data-theme="dark"] :is(.profile-passkey-item small,.profile-setting-row small,.profile-delivery-item) { color: var(--ui-color-text-muted); }
:root[data-theme="dark"] :is(.profile-card-footer,.profile-delivery-section,.profile-notifications-option) { border-color: var(--ui-color-border); }
:root[data-theme="dark"] .calendar-booking-drawer-footer .calendar-booking-drawer-contact {
    background: var(--ui-color-surface-subtle); color: var(--ui-color-text); border-color: var(--ui-color-border-strong);
}
:root[data-theme="dark"] .calendar-booking-drawer-footer .calendar-booking-drawer-contact:is(:hover,:focus-visible) {
    background: var(--ui-color-surface-muted); color: var(--ui-color-text);
}

}