/* POS-only color contracts. Screen scoping keeps receipts and print layouts independent. */
@media screen {
  html[data-pos-ui], html[data-pos-ui] body {
    --bs-main: var(--pos-primary);
    --bs-main-hover: var(--pos-primary-hover);
    --bs-main-50: var(--pos-main-50);
    --bs-main-100: var(--pos-main-100);
    --bs-main-200: var(--pos-main-200);
    --bs-main-300: var(--pos-main-300);
    --bs-main-400: var(--pos-main-400);
    --bs-main-500: var(--pos-main-500);
    --bs-main-600: var(--pos-main-600);
    --bs-main-700: var(--pos-main-700);
    --bs-main-800: var(--pos-main-800);
    --bs-main-900: var(--pos-main-900);
    --bs-main-950: var(--pos-main-950);
    --bs-main-light: var(--pos-primary-soft);
    --bs-main-border: var(--pos-border);
    --bs-main-o: color-mix(in srgb, var(--pos-primary) 12%, transparent);
    --bs-primary: var(--pos-primary);
    --bs-primary-rgb: var(--pos-primary-rgb);
    --bs-accent: var(--pos-accent);
    --bs-accent-hover: var(--pos-accent-hover);
    --bs-accent-subtle: var(--pos-accent-soft);
    --bs-body-bg: var(--pos-canvas);
    --bg-body-main: var(--pos-canvas);
    --bs-surface-bg: var(--pos-surface);
    --bs-surface-bg-o: var(--pos-canvas);
    --bs-surface-2-bg: var(--pos-surface2);
    --bs-muted-bg: var(--pos-canvas);
    --bs-body-color: var(--pos-text);
    --bs-text: var(--pos-text);
    --bs-heading-color: var(--pos-text);
    --bs-text-muted: var(--pos-muted);
    --bs-placeholder-color: var(--pos-muted);
    --bs-border-color: var(--pos-border);
    --bs-border-strong: var(--pos-border);
    --bs-divider-color: var(--pos-border);
    --bs-border-calendar: var(--pos-border);
    --bs-input-bg: var(--pos-surface);
    --bs-input-color: var(--pos-text);
    --bs-input-border-color: var(--pos-border);
    --bs-input-placeholder-color: var(--pos-muted);
    --bs-input-focus-border-color: var(--pos-primary);
    --bs-input-focus-ring-color: color-mix(in srgb, var(--pos-primary) 25%, transparent);
    --bs-link-color: var(--pos-primary-text);
    --bs-link-hover-color: var(--pos-primary-text);
    --color-item-menu: var(--pos-text);
    --theme-mode-text: var(--pos-text);
    --theme-mode-text-dark: var(--pos-text);
    --theme-mode-border: var(--pos-border);
    --theme-mode-bs-100: var(--pos-canvas);
    --bs-header-cart: var(--pos-surface2);
    --bs-btn-check: var(--pos-surface2);
    --bs-keyboard-bg: var(--pos-surface2);
    --bg-white: var(--pos-surface);
    --tix-confirm: var(--pos-confirmed-color);
    --tix-unConfirm: var(--pos-unconfirmed-color);
    --tix-checkin: var(--pos-checkedIn-color);
    --tix-inservice: var(--pos-inService-color);
    --tix-done: var(--pos-done-color);
    --tix-closed: var(--pos-closed-color);
    --tix-noshow: var(--pos-noShow-color);
    --tix-cancelled: var(--pos-cancelled-color);
    --tix-wait: var(--pos-waiting-color);
    --tix-pending: var(--pos-pending-color);
    --tix-appt: var(--pos-appointment-color);
    --tix-walkin: var(--pos-walkIn-color);
    --tix-confirm-r: var(--pos-confirmed-rgb);
    --tix-checkin-r: var(--pos-checkedIn-rgb);
    --tix-inservice-r: var(--pos-inService-rgb);
    --tix-done-r: var(--pos-done-rgb);
    --tix-closed-r: var(--pos-closed-rgb);
    --tix-noshow-r: var(--pos-noShow-rgb);
    --tix-cancelled-r: var(--pos-cancelled-rgb);
    --tix-wait-r: var(--pos-waiting-rgb);
    --card-bg: var(--pos-surface);
    --text-primary: var(--pos-text);
    --text-secondary: var(--pos-muted);
    --text-muted: var(--pos-muted);
    --primary-color: var(--pos-primary);
    --primary-hover: var(--pos-primary-hover);
    --primary-light: var(--pos-primary-soft);
    --text-main: var(--pos-text);
    --text-dark: var(--pos-text);
    --bg-app: var(--pos-canvas);
    --bg-card: var(--pos-surface);
    --bg: var(--pos-canvas);
    --surface: var(--pos-surface);
    --surface-2: var(--pos-surface2);
    --border: var(--pos-border);
    --border-2: var(--pos-border);
    --border-color: var(--pos-border);
    --text-sub: var(--pos-muted);
    --client-primary: var(--pos-primary);
    --client-primary-hover: var(--pos-primary-hover);
    --client-text-primary: var(--pos-text);
    --client-text-secondary: var(--pos-text);
    --client-text-muted: var(--pos-muted);
    --client-text-light: var(--pos-muted);
    --client-border: var(--pos-border);
    --client-border-light: var(--pos-border);
    --client-border-dark: var(--pos-border);
    --client-bg-primary: var(--pos-surface);
    --client-bg-secondary: var(--pos-canvas);
    --client-bg-muted: var(--pos-surface2);
    --client-bg-hover: var(--pos-surface2);
    --st-mem-brand: var(--pos-primary);
    --st-mem-brand-dark: var(--pos-primary-hover);
    --st-mem-brand-light: var(--pos-primary-soft);
    --st-mem-brand-text: var(--pos-primary-text);
    --st-mem-bg: var(--pos-canvas);
    --st-mem-surface: var(--pos-surface);
    --st-mem-ink: var(--pos-text);
    --st-mem-ink-secondary: var(--pos-text);
    --st-mem-muted: var(--pos-muted);
    --st-mem-border: var(--pos-border);
    --st-mem-border-soft: var(--pos-border);
    --color-slate-50: var(--pos-canvas);
    --color-slate-100: var(--pos-surface2);
    --color-slate-200: var(--pos-border);
    --color-slate-300: var(--pos-border);
    --color-slate-400: var(--pos-muted);
    --color-slate-500: var(--pos-muted);
    --color-slate-600: var(--pos-text);
    --color-slate-700: var(--pos-text);
    --color-slate-800: var(--pos-text);
    --color-slate-900: var(--pos-text);
    --color-gray-100: var(--pos-surface2);
    --color-gray-200: var(--pos-border);
    --color-gray-300: var(--pos-border);
    --color-gray-400: var(--pos-muted);
    --color-gray-500: var(--pos-muted);
    --color-gray-600: var(--pos-text);
    --color-gray-700: var(--pos-text);
    --color-gray-800: var(--pos-text);
    --color-gray-900: var(--pos-text);
    --perf-dash-white: var(--pos-surface);
    --perf-dash-gray-50: var(--pos-canvas);
    --perf-dash-gray-100: var(--pos-surface2);
    --perf-dash-gray-200: var(--pos-border);
    --perf-dash-gray-300: var(--pos-border);
    --perf-dash-gray-400: var(--pos-muted);
    --perf-dash-gray-500: var(--pos-muted);
    --perf-dash-gray-600: var(--pos-muted);
    --perf-dash-gray-700: var(--pos-text);
    --perf-dash-gray-800: var(--pos-text);
    --perf-dash-gray-900: var(--pos-text);
    background-color: var(--pos-canvas);
    color: var(--pos-text);
  }

  html[data-pos-ui] .admin-backoffice-container {
    --abo-bg-canvas: var(--pos-canvas);
    --abo-bg-surface: var(--pos-surface);
    --abo-border-line: var(--pos-border);
    --abo-text-ink: var(--pos-text);
    --abo-text-muted: var(--pos-muted);
    --abo-text-subtle: var(--pos-muted);
    --abo-brand: var(--pos-primary);
    --abo-brand-hover: var(--pos-primary-hover);
    --abo-brand-soft: var(--pos-primary-soft);
    --abo-brand-ink: var(--pos-primary-text);
  }
  html[data-pos-ui] :is(.sc2, [data-sc2-tech-view], .sc2-menu, .sc2-dropdown__menu, .sc2-ticket-tech-popup, .sc2-ticket-service-popup) {
    --sc2-bg-page: var(--pos-canvas);
    --sc2-frame-bg: var(--pos-surface);
    --sc2-frame-border: var(--pos-border);
    --sc2-header-bg: var(--pos-canvas);
    --sc2-header-fg: var(--pos-text);
    --sc2-text: var(--pos-text);
    --sc2-muted: var(--pos-muted);
    --sc2-primary: var(--pos-primary);
    --sc2-tix-walkin: var(--pos-walkIn-color);
    --sc2-tix-appt: var(--pos-appointment-color);
    --sc2-tix-wait: var(--pos-waiting-color);
    --sc2-tix-inservice: var(--pos-inService-color);
    --sc2-tix-done: var(--pos-pending-color);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) {
    --sc2-settings-accent: var(--pos-primary-text);
    --sc2-settings-soft: var(--pos-primary-soft);
    --sc2-settings-ink: var(--pos-text);
    --sc2-settings-muted: var(--pos-muted);
    --sc2-settings-line: var(--pos-border);
  }
  html[data-pos-ui] #team-settings-modal {
    --ts-accent: var(--pos-primary-text);
    --ts-accent-fill: var(--pos-primary-fill);
    --ts-accent-fill-hover: var(--pos-primary-fill-hover);
    --ts-accent-fill-ink: var(--pos-primary-fill-ink);
    --ts-accent-soft: var(--pos-primary-soft);
    --ts-surface: var(--pos-surface);
    --ts-surface-2: var(--pos-surface2);
    --ts-ink: var(--pos-text);
    --ts-muted: var(--pos-muted);
    --ts-line: var(--pos-border);
    --ts-sidebar: var(--pos-surface2);
  }
  html[data-pos-ui] .sc2 :is(
    .sc2-queue-empty__icon, .sc2-queue-empty__title, .sc2-queue-empty__description) {
    color: var(--bs-text-muted);
  }
  html[data-pos-ui] .sc2 .sc2-queue-empty__icon {
    background-color: var(--pos-surface2);
  }
  html[data-pos-ui] #sc2-root .sc2-checkin__list .list-view-row:hover {
    background-color: var(--pos-surface2);
  }
  html[data-pos-ui] .sc2 .sc2-ticket {
    --sc2-ticket-background: none;
  }
  html[data-pos-ui] #sc2-root .sc2-ticket__service,
  html[data-pos-ui] .sc2-ticket-service-popup .sc2-ticket__service {
    background-color: var(--pos-surface2);
    border-color: var(--pos-border);
    color: var(--pos-text);
  }
  html[data-pos-ui] .sc2 .sc2-ticket--list .sc2-ticket__tech-chip--none,
  html[data-pos-ui] .sc2-ticket-tech-popup--list .sc2-ticket__tech-chip--none {
    background-color: var(--pos-surface) !important;
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-ticket__name, .sc2-ticket__serv, .sc2-ticket__tech-add,
    .sc2-ticket__action, .sc2-ticket__service, .sc2-ticket__head-right,
    .sc2-dropdown__item, .sc2-checkin, .sc2-checkin__header h2,
    .sc2-checkin__calendar-head button, .sc2-checkin__days button) {
    color: var(--pos-text);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-ticket__time, .sc2-ticket__time-lbl, .sc2-ticket__when,
    .sc2-ticket__date, .sc2-ticket__type:not(.sc2-ticket__type--vip, .sc2-ticket__type--reward),
    .sc2-ticket__bar-labels, .sc2-ticket__tech-chip--none, .sc2-ticket__seat,
    .sc2-dropdown__section-head, .sc2-dropdown__item > i:first-child,
    .sc2-view-switch__normal, .sc2-combined-tab__split,
    .sc2-checkin__empty, .sc2-checkin__days button.is-other-month) {
    color: var(--pos-muted);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-ticket__waiting-time, .sc2-ticket__progress, .sc2-ticket__pay-row,
    .sc2-ticket__action, .sc2-ticket__tech-add, .sc2-ticket__tech-chip--none, .sc2-ticket__seat,
    .sc2-dropdown__menu, .sc2-dropdown__item[data-sc2-view],
    .sc2-checkin, .sc2-checkin-popup, .sc2-checkin__date,
    .sc2-checkin__retry, .sc2-checkin__calendar) {
    background-color: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-ticket__bar, .sc2-dropdown__divider, .sc2-team-display__options,
    .sc2-view-switch__track, .sc2-combined-header__children [role=tablist],
    .sc2-combined-tab__count, .sc2-checkin__close) {
    background-color: var(--pos-surface2);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-dropdown__item:hover, .sc2-dropdown__item[data-sc2-view]:hover,
    .sc2-ticket__action:hover, .sc2-team-display__options > button:hover,
    .sc2-combined-tab:hover) {
    background-color: var(--pos-surface2);
    color: var(--pos-text);
  }
  html[data-pos-ui] #sc2-root .sc2-dropdown .sc2-view-switch__thumb {
    background-color: var(--pos-surface);
  }
  html[data-pos-ui] #sc2-root .sc2-dropdown .sc2-view-switch input:checked + .sc2-view-switch__track {
    background-color: var(--pos-primary);
    border-color: var(--pos-primary);
  }
  html[data-pos-ui] #sc2-root .sc2-dropdown .sc2-view-switch input:checked + .sc2-view-switch__track .sc2-view-switch__compact {
    color: var(--pos-primary-ink);
  }
  html[data-pos-ui] #sc2-root .sc2-dropdown .sc2-view-switch input:checked + .sc2-view-switch__track .sc2-view-switch__thumb {
    background-color: var(--pos-primary-ink);
  }
  html[data-pos-ui] #sc2-root .sc2-dropdown .sc2-dropdown__reset:hover {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #sc2-root .sc2-dropdown__item.is-active .sc2-dropdown__dir {
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #sc2-root .sc2-ticket .sc2-ticket__seat.is-empty {
    background-color: #fff;
    color: #475569;
  }
  html[data-pos-ui] #sc2-root .sc2-ticket .sc2-ticket__seat:not(.is-empty):not(.is-history) {
    background-color: var(--pos-primary-soft);
    border-color: var(--pos-primary);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #sc2-root .sc2-ticket .sc2-ticket__seat.is-history {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #6b7280;
  }
  html[data-pos-ui] #sc2-root .sc2-ticket button.sc2-ticket__seat:not(.is-history):hover,
  html[data-pos-ui].sm-seat-on #sc2-root .sc2-ticket .sc2-ticket__seat[data-seat-open]:hover {
    background-color: color-mix(in srgb, var(--pos-primary) 18%, var(--pos-surface));
    border-color: var(--pos-primary);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-dropdown__item.is-active, .sc2-dropdown__item[data-sc2-view].is-active,
    .sc2-dropdown.is-open > [data-sc2-dropdown-toggle],
    .sc2-team-display__options > button.is-active,
    .sc2-combined-tab.is-active .sc2-combined-tab__count,
    .sc2-checkin__date[aria-expanded=true]) {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-combined-tab.is-active, .sc2-coming__header, .sc2-coming__tab.is-active,
    .sc2-dropdown__item.is-active > i:first-child, .sc2-dropdown__check,
    .sc2-ticket__timer, .sc2-ticket__tech-add:hover, .sc2-checkin__date,
    .sc2-checkin__retry) {
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #sc2-root .sc2-combined-header__children
    :is(.sc2-ticket-tab, .sc2-coming__tab).is-active {
    background-color: var(--pos-surface);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #sc2-root .sc2-combined-header__children
    :is(.sc2-ticket-tab__count, .sc2-coming__tab-count) {
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-checkin-launch,
    .sc2-checkin__days button.is-selected, .sc2-ticket__pay) {
    background-color: var(--pos-primary);
    color: var(--pos-primary-ink);
    border-color: var(--pos-primary);
  }
  html[data-pos-ui] #sc2-root :is(.sc2-checkin-launch:hover, .sc2-ticket__pay:hover) {
    background-color: var(--pos-primary-hover);
    color: var(--pos-primary-hover-ink);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-coming, .sc2-coming__state, .sc2-coming__tab-count,
    .sc2-dropdown__section-head > [data-sc2-ticket-scale-val],
    .sc2-dropdown__section-head > [data-sc2-tech-scale-val]) {
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-coming__late-label, .sc2-coming__late-text,
    .sc2-combined-tab__split.has-late, .sc2-dropdown__item--danger,
    .sc2-dropdown__item--danger > i:first-child) {
    color: var(--pos-noShow-ink);
  }
  html[data-pos-ui] #sc2-root :is(
    .sc2-coming__late, .sc2-combined-header__children .sc2-coming__tab.has-late .sc2-coming__tab-count,
    .sc2-dropdown__item--danger:hover) {
    color: var(--pos-noShow-ink);
    background-color: var(--pos-noShow-background);
  }
  /* Quick Sale staff-settings dropdown (QuickSale.staffToolsHtml) lives outside #sc2-root, so the
     dropdown theming above never reached it. Same declarations, scoped to the QS tools. */
  html[data-pos-ui] #quickSaleModal [data-sc2-tech-view] .sc2-dropdown__item { color: var(--pos-text); }
  html[data-pos-ui] #quickSaleModal [data-sc2-tech-view] :is(.sc2-dropdown__section-head, .sc2-dropdown__item > i:first-child,
    .sc2-view-switch__normal) { color: var(--pos-muted); }
  html[data-pos-ui] #quickSaleModal [data-sc2-tech-view] :is(.sc2-dropdown__menu, .sc2-dropdown__item[data-sc2-view]) {
    background-color: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #quickSaleModal [data-sc2-tech-view] :is(.sc2-dropdown__divider, .sc2-view-switch__track, .sc2-team-display__options) {
    background-color: var(--pos-surface2);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #quickSaleModal [data-sc2-tech-view] :is(.sc2-dropdown__item:hover, .sc2-dropdown__item[data-sc2-view]:hover,
    .sc2-team-display__options > button:hover) {
    background-color: var(--pos-surface2);
    color: var(--pos-text);
  }
  html[data-pos-ui] #quickSaleModal [data-sc2-tech-view] :is(.sc2-dropdown__item.is-active, .sc2-dropdown__item[data-sc2-view].is-active,
    .sc2-dropdown.is-open > [data-sc2-dropdown-toggle], .sc2-team-display__options > button.is-active) {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #quickSaleModal [data-sc2-tech-view] :is(.sc2-dropdown__section-head > [data-sc2-ticket-scale-val],
    .sc2-dropdown__section-head > [data-sc2-tech-scale-val]) {
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(
    .sc2-menu, .sc2-menu__item, .sc2-frame-tabs__menu, .sc2-ticket-tech-popup,
    .sc2-ticket-service-popup, .sc2-bottom-sheet__handle),
  html[data-pos-ui] .sc2-bottom-sheet.sc2-bottom-sheet--inline > .sc2-bottom-sheet__panel,
  html[data-pos-ui] .popup-container.sc2-bottom-sheet > .popup-content > .sc2-bottom-sheet__panel {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(
    .sc2-menu__item:hover, .sc2-menu__item:active,
    .sc2-frame-tabs__option:hover, .sc2-bottom-sheet__close) {
    background-color: var(--pos-surface2);
    color: var(--pos-text);
  }
  html[data-pos-ui] :is(.sc2-menu__item--danger, .sc2-menu__item--danger > i) {
    color: var(--pos-noShow-ink);
  }
  html[data-pos-ui] :is(.sc2-menu__item--danger:hover, .sc2-menu__item--danger:active) {
    background-color: var(--pos-noShow-background);
    color: var(--pos-noShow-ink);
  }
  html[data-pos-ui] :is(.sc2-bottom-sheet__handle > span, .sc2-touch-menu__separator) {
    background-color: var(--pos-border);
  }
  html[data-pos-ui] .sc2-ticket-action-popup--mobile :is(
    .sc2-ticket-action-sheet__header,
    .dropdown-salon-center .btn-action-dropdown-salon.remove-ticket) {
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(
    .sc2-frame-tabs__option[aria-selected=true], .sc2-frame-tabs__option-count) {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] :is(
    .sc2-tech-action-sheet__close, .sc2-tech-action-sheet__header,
    .sc2-ticket-action-sheet__close, .sc2-ticket-action-sheet__header,
    .sc2-touch-menu__label, .sc2-ticket-service-popup__title,
    .sc2-ticket-tech-popup__title) {
    color: var(--pos-text);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal)
    :is(.modal-content, .modal-header, .sc2-preferences__content,
      input[type=text], input[type=number], select,
      .sc2-preferences__cancel, .sc2-preferences__retry,
      .sc2-preferences__status-heading button, .sc2-preferences__status > button),
  html[data-pos-ui] #team-settings-modal
    :is(.ts-modal-content, .ts-modal-header, .ts-content,
      .ts-auto-columns input:not(:disabled), .ts-percent-input,
      .ts-modal-footer .btn-outline-secondary) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal)
    :is(.sc2-preferences__nav, .sc2-preferences__segments, .modal-footer),
  html[data-pos-ui] #team-settings-modal
    :is(.ts-sidebar, .ts-pill-group, .ts-key-chip, .ts-modal-footer) {
    background-color: var(--pos-surface2);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal)
    :is(.sc2-preferences__nav button, legend, .is-disabled),
  html[data-pos-ui] #team-settings-modal
    :is(.ts-nav-item:not(.active), .ts-nav-item:not(.active) .ts-nav-icon, .ts-card-label, .ts-pill:not(.active)) {
    color: var(--pos-muted);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal)
    :is(.sc2-preferences__nav button.is-active,
      .sc2-preferences__segments label:has(input:checked)),
  html[data-pos-ui] #team-settings-modal
    :is(.ts-nav-item.active, .ts-pill.active) {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #team-settings-modal .ts-nav-item.active {
    border-left-color: var(--pos-primary-text);
  }
  html[data-pos-ui] #team-settings-modal :is(.ts-nav-item.active .ts-nav-icon, .ts-nav-arrow) {
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) .sc2-preferences__cancel:hover:not(:disabled),
  html[data-pos-ui] #team-settings-modal .ts-modal-footer .btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--pos-surface2);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) .sc2-preferences__save,
  html[data-pos-ui] #team-settings-modal .ts-modal-footer .btn-success {
    background-color: var(--pos-primary-fill);
    border-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) .sc2-preferences__save:hover:not(:disabled),
  html[data-pos-ui] #team-settings-modal .ts-modal-footer .btn-success:hover:not(:disabled) {
    background-color: var(--pos-primary-fill-hover);
    border-color: var(--pos-primary-fill-hover);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) .sc2-preferences__save:disabled,
  html[data-pos-ui] #team-settings-modal .ts-modal-footer .btn-success:disabled {
    background-color: color-mix(in srgb, var(--pos-primary-fill) 14%, var(--pos-surface));
    border-color: color-mix(in srgb, var(--pos-primary-fill) 24%, var(--pos-border));
    color: color-mix(in srgb, var(--pos-primary-text) 55%, var(--pos-muted));
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal)
    :is(.sc2-preferences__message, .sc2-preferences__status > button) {
    color: var(--pos-noShow-ink);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) input[role=switch],
  html[data-pos-ui] #team-settings-modal .ts-switch-slider {
    background-color: var(--pos-border);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) input[role=switch]::before,
  html[data-pos-ui] #team-settings-modal .ts-switch-slider::before {
    background-color: var(--pos-text);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) input[role=switch]:checked,
  html[data-pos-ui] #team-settings-modal .ts-switch input:checked + .ts-switch-slider {
    background-color: var(--pos-primary);
  }
  html[data-pos-ui] :is(#sc2-settings-modal, #qs-settings-modal) input[role=switch]:checked::before,
  html[data-pos-ui] #team-settings-modal .ts-switch input:checked + .ts-switch-slider::before {
    background-color: var(--pos-primary-ink);
  }
  html[data-pos-ui] .catalog-container {
    --white: var(--pos-surface);
    --bg: var(--pos-canvas);
    --sidebar-bg: var(--pos-surface2);
    --border: var(--pos-border);
    --line: var(--pos-border);
    --canvas: var(--pos-canvas);
    --ink: var(--pos-text);
    --ink-muted: var(--pos-muted);
    --ink-faint: var(--pos-muted);
    --brand: var(--pos-primary);
    --bs-gray-text-600: var(--pos-muted);
    --text3: var(--pos-muted);
  }
  html[data-pos-ui] .tm-magic {
    --tm-brand: var(--pos-primary);
    --tm-dark: var(--pos-primary-hover);
    --tm-soft: var(--pos-primary-soft);
    --tm-ink: var(--pos-text);
    --tm-muted: var(--pos-muted);
    --tm-border: var(--pos-border);
  }
  html[data-pos-ui] .sm {
    --sm-brand: var(--pos-primary);
    --sm-brand-dark: var(--pos-primary-hover);
    --sm-brand-soft: var(--pos-primary-soft);
    --sm-ink: var(--pos-text);
    --sm-text: var(--pos-text);
    --sm-sub: var(--pos-muted);
    --sm-muted: var(--pos-muted);
    --sm-faint: var(--pos-muted);
    --sm-line: var(--pos-border);
    --sm-line-soft: var(--pos-border);
    --sm-line2: var(--pos-border);
    --sm-bg: var(--pos-canvas);
    --sm-surface: var(--pos-surface);
  }
  html[data-pos-ui] .sm .sm-btn--primary { background-color: var(--pos-primary-fill); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] .sm .sm-btn--primary:hover:not(:disabled) { background-color: var(--pos-primary-fill-hover); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] .sm :is(.sm-bubble, .sm-suggest__code, .sm-suggest__go, .sm-addchair__plus) {
    background-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] .sm :is(.sm-seg__btn.is-on, .sm-tab.is-on) { color: var(--pos-primary-text); }
  html[data-pos-ui] .dp-panel {
    --dp-ink: var(--pos-text);
    --dp-muted: var(--pos-muted);
    --dp-accent: var(--pos-primary);
    --dp-accent-hover: var(--pos-primary-hover);
    --dp-accent-soft: var(--pos-primary-soft);
    --dp-line: var(--pos-border);
    --dp-surface: var(--pos-surface);
    --dp-header-bg: var(--pos-surface2);
  }
  html[data-pos-ui] :is(.device-config-container, .rd-section) {
    --dc-ink: var(--pos-text);
    --dc-muted: var(--pos-muted);
    --dc-accent: var(--pos-primary);
    --dc-line: var(--pos-border);
    --rd-accent: var(--pos-primary);
    --rd-muted: var(--pos-muted);
    --rd-border: var(--pos-border);
    --rd-surface: var(--pos-surface);
  }
  html[data-pos-ui] #quickSaleDiscount.qs-bill-discount-modal {
    --bill-ink: var(--pos-text);
    --bill-muted: var(--pos-muted);
    --bill-ghost: var(--pos-muted);
    --bill-line: var(--pos-border);
    --bill-soft: var(--pos-surface2);
    --bill-green: var(--pos-primary);
  }
  html[data-pos-ui] #quickSaleDiscount .qs-bill-discount__presets button[aria-pressed="true"] { background-color: var(--pos-primary-soft); }
  html[data-pos-ui] #quickSaleDiscount .qs-bill-discount__presets button[aria-pressed="true"] small { color: var(--pos-primary-text); }
  html[data-pos-ui] #quickSaleDiscount .qs-bill-discount__apply:not(:disabled):hover { background-color: var(--pos-primary-fill-hover); }
  html[data-pos-ui] .cpn-success-icon { background: var(--pos-primary-fill); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] :is(#quickSaleModal, .cart-modal, .ticket-detail) .qs-assigned-cart {
    --qa-surface: var(--pos-surface);
    --qa-soft: var(--pos-surface2);
    --qa-key: var(--pos-canvas);
    --qa-ink: var(--pos-text);
    --qa-muted: var(--pos-muted);
    --qa-light: var(--pos-muted);
    --qa-line: var(--pos-border);
    --qa-green: var(--pos-primary);
    --qa-green-dark: var(--pos-primary-text);
    --qa-green-soft: var(--pos-primary-soft);
  }
  html[data-pos-ui] :is(._closed-ticket-container, ._todays-sales-container) {
    --bg: var(--pos-canvas);
    --border: var(--pos-border);
    --btn-primary: var(--pos-primary);
    --btn-primary-hover: var(--pos-primary-hover);
  }
  html[data-pos-ui] .tech-daily-report {
    --tdr-bg: var(--pos-canvas);
    --tdr-surface: var(--pos-surface);
    --tdr-surface-2: var(--pos-surface2);
    --tdr-ink: var(--pos-text);
    --tdr-ink-2: var(--pos-muted);
    --tdr-ink-3: var(--pos-muted);
    --tdr-line: var(--pos-border);
    --tdr-teal: var(--pos-primary-text);
    --tdr-teal-soft: var(--pos-primary-soft);
  }
  html[data-pos-ui=login] body {
    --card-bg: var(--pos-surface);
    --primary-glow: color-mix(in srgb, var(--pos-primary) 25%, transparent);
    --input-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-primary) 15%, transparent);
  }
  html[data-pos-ui=login] .btn-submit { background: var(--pos-primary-fill); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui=login] .btn-submit:hover { background: var(--pos-primary-fill-hover); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui=login] .input-wrap input:focus { background-color: var(--pos-surface); }
  html[data-pos-ui=login] .fp-toggle:hover { background-color: var(--pos-surface2); }
  html[data-pos-ui=login] .footer-powered-by span { color: var(--pos-muted); }
  html[data-pos-ui=login] .dp-glow {
    background: radial-gradient(circle, color-mix(in srgb, var(--pos-primary) 12%, transparent) 0%, transparent 70%);
  }
  html[data-pos-ui] .auth-pin-scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--pos-auth-top) 65%, transparent),
      color-mix(in srgb, var(--pos-auth-middle) 55%, transparent) 60%,
      color-mix(in srgb, var(--pos-auth-bottom) 45%, transparent));
  }
  html[data-pos-ui] #authorizationPinOverlay .auth-pin-text-input {
    background-color: rgb(255 255 255 / 10%);
    color: #FFFFFF;
    border-color: rgb(255 255 255 / 32%);
  }
  html[data-pos-ui] #authorizationPinOverlay .auth-pin-text-input:focus { border-color: rgb(255 255 255 / 85%); }
  html[data-pos-ui] #authorizationPinOverlay .auth-pin-text-input::placeholder { color: rgb(255 255 255 / 70%); }
  html[data-pos-ui] :is(.profile-dropdown, .profile-dropdown-arrow,
    .form-store-info .store-avatar-wrap, .form-store-info .line-bacsic-store) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(.profile-dd-name, .form-store-info .line-store-name .title,
    .form-store-info .store-info-text span) { color: var(--pos-text); }
  html[data-pos-ui] :is(.profile-dd-mail, .form-store-info .store-label,
    .form-store-info .store-info-text label) { color: var(--pos-muted); }
  html[data-pos-ui] .form-store-info .line-store-name {
    background: linear-gradient(180deg, var(--pos-surface2), var(--pos-surface));
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(.custom-profile-avatar, .profile-dd-avatar) {
    background: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] .profile-dd-divider { background-color: var(--pos-border); }
  html[data-pos-ui] .form-store-info .line-bacsic-store i {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] .settings-sidebar__menu-item--active {
    background-color: var(--pos-primary-soft);
  }
  html[data-pos-ui] .settings-sidebar__menu-item--active :is(.settings-sidebar__item-name, .settings-sidebar__item-desc) {
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] .settings-sidebar__menu-item--active .settings-sidebar__icon-wrap {
    background-color: var(--pos-primary-fill);
  }
  html[data-pos-ui] .settings-sidebar__menu-item--active .settings-sidebar__icon-wrap svg {
    color: var(--pos-primary-fill-ink);
  }

  html[data-pos-ui] :is(.custom-header, .footer, .qs-landing, .modal-content, .quicksale-modal-content,
    .rpt-sidebar, .rpt-main, .rpt-card, .rpt-toolbar, .rpt-table-container,
    .select2-dropdown, .select2-container--default .select2-selection--single,
    .daterangepicker, .swal2-popup, .frontdesk-modal-container,
    .team-settings-header, .team-settings-sidebar-inner, .team-settings-sidebar-tabs,
    .tm-filter-menu, .tm-table, .sc2-ticket, .sc2-ticket__inner,
    .sc2-ticket.is-group::before, .sc2-ticket.is-combine::before) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(.form-control, .form-select, .select2-search__field,
    #detail-modal .wallet-form-input, #detail-modal .wallet-form-select,
    #sc2-settings-modal input[type=text], #sc2-settings-modal input[type=number], #sc2-settings-modal select,
    #qs-settings-modal input[type=text], #qs-settings-modal input[type=number], #qs-settings-modal select,
    .tm-search, .tm-filter summary) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(.btn-primary, .tm-primary, .team-settings-add-member-btn) {
    background-color: var(--pos-primary-fill);
    border-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] :is(.btn-primary:hover, .tm-primary:hover, .team-settings-add-member-btn:hover) {
    background-color: var(--pos-primary-fill-hover);
    border-color: var(--pos-primary-fill-hover);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] :is(
    .cart-footer .continue-btn:not(:disabled),
    .cart-footer .payment-row .close-bill:not(:disabled),
    .payment-confirm-button--active:not(:disabled),
    .gc-modal-container .gc-continue-btn:not(:disabled),
    .gc-modal-container .gc-confirm-btn:not(:disabled)) {
    background: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] :is(
    .cart-footer .continue-btn:not(:disabled),
    .cart-footer .payment-row .close-bill:not(:disabled),
    .payment-confirm-button--active:not(:disabled),
    .gc-modal-container .gc-continue-btn:not(:disabled),
    .gc-modal-container .gc-confirm-btn:not(:disabled)):hover {
    background: var(--pos-primary-fill-hover);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] :is(.select2-results__option--highlighted[aria-selected],
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable) {
    background: var(--pos-primary-soft);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] :is(.swal2-title, .swal2-html-container, .daterangepicker .calendar-table,
    .daterangepicker .drp-buttons, .daterangepicker .calendar-table th,
    .daterangepicker .calendar-table td) {
    color: var(--pos-text);
    background-color: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] .daterangepicker td.active { background: var(--pos-primary-fill); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] .daterangepicker td.in-range:not(.active) { background: var(--pos-primary-soft); color: var(--pos-primary-text); }
  html[data-pos-ui] .catalog-container :is(.bg-canvas, .bg-line) { background-color: var(--pos-surface2); }
  html[data-pos-ui] .catalog-container :is(.text-ink, .text-ink-muted, .text-ink-faint) { color: var(--pos-text); }
  html[data-pos-ui] .catalog-container .bg-brand { background-color: var(--pos-primary-fill); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] .catalog-container .text-brand { color: var(--pos-primary-text); }

  /* Keep technician/service fold colors; only the neutral frame and status marks change. */
  html[data-pos-ui] .booking-page-body .box-tix-appt-book.tix-fold {
    --tix-text: var(--pos-text);
    --tix-muted: var(--pos-muted);
    --tix-border: var(--pos-calendar-ticket-border, var(--pos-border));
  }
  html[data-pos-ui] .booking-page-body .box-tix-appt-book.tix-fold::before { background: var(--pos-surface); }
  html[data-pos-ui] .booking-page-body .box-tix-appt-book.tix-fold :is(.tix-head-svc, .tix-svc) { color: var(--pos-muted); }
  html[data-pos-ui] .booking-page-body .box-tix-appt-book.tix-fold .tix-when { color: var(--pos-muted); }
  html[data-pos-ui] .booking-page-body .box-tix-appt-book.tix-fold :is(.tix-st, .tix-pill),
  html[data-pos-ui] .booking-page-body .tix-legend .tix-pill { color: var(--status-ink); background: var(--status-bg); }
  html[data-pos-ui] .booking-page-body .box-tix-appt-book.tix-fold .tix-dot { background: var(--status-color); }

  html[data-pos-ui] :is([data-pos-status=confirmed], .title-group.booked, .title-group.confirmed,
    .box-tix-appt-book[status="0"], .box-tix-appt-book[status="1"], .tix-pill-confirmed, .lvr-status.st-appt) {
    --status-color: var(--pos-confirmed-color); --status-bg: var(--pos-confirmed-background);
    --status-ink: var(--pos-confirmed-ink); --status-border: var(--pos-confirmed-border); --status-solid-ink: var(--pos-confirmed-onSolid);
  }
  html[data-pos-ui] :is([data-pos-status=unconfirmed], .title-group.unconfirmed,
    .box-tix-appt-book[status="1"][confob=false][bookonl=true]) {
    --status-color: var(--pos-unconfirmed-color); --status-bg: var(--pos-unconfirmed-background);
    --status-ink: var(--pos-unconfirmed-ink); --status-border: var(--pos-unconfirmed-border); --status-solid-ink: var(--pos-unconfirmed-onSolid);
  }
  html[data-pos-ui] :is([data-pos-status=checkedIn], .title-group.checked-in, .title-group.checkin,
    .box-tix-appt-book[status="2"], .tix-pill-checkin, .tix-st-checkin) {
    --status-color: var(--pos-checkedIn-color); --status-bg: var(--pos-checkedIn-background);
    --status-ink: var(--pos-checkedIn-ink); --status-border: var(--pos-checkedIn-border); --status-solid-ink: var(--pos-checkedIn-onSolid);
  }
  html[data-pos-ui] :is([data-pos-status=inService], .title-group.in-service, .title-group.inservice,
    .box-tix-appt-book[status="3"], .tix-pill-inservice, .tix-st-inservice, .sc2-ticket[data-status="3"],
    .lvr-status.st-inservice) {
    --status-color: var(--pos-inService-color); --status-bg: var(--pos-inService-background);
    --status-ink: var(--pos-inService-ink); --status-border: var(--pos-inService-border); --status-solid-ink: var(--pos-inService-onSolid);
    --status-solid-fill: var(--pos-inService-solid-fill); --status-solid-fill-ink: var(--pos-inService-solid-fill-ink);
  }
  html[data-pos-ui] :is([data-pos-status=done], .title-group.done, .box-tix-appt-book[status="8"],
    .tix-pill-done, .tix-st-done) {
    --status-color: var(--pos-done-color); --status-bg: var(--pos-done-background);
    --status-ink: var(--pos-done-ink); --status-border: var(--pos-done-border); --status-solid-ink: var(--pos-done-onSolid);
  }
  html[data-pos-ui] :is([data-pos-status=closed], .title-group.closed, .box-tix-appt-book[status="7"],
    .tix-dot.st-closed, .tix-state.st-closed, .lvr-status.st-closed) {
    --status-color: var(--pos-closed-color); --status-bg: var(--pos-closed-background);
    --status-ink: var(--pos-closed-ink); --status-border: var(--pos-closed-border); --status-solid-ink: var(--pos-closed-onSolid);
  }
  html[data-pos-ui] :is([data-pos-status=noShow], .title-group.noshow, .title-group.no-show, .box-tix-appt-book[status="4"],
    .tix-dot.st-noshow, .tix-state.st-noshow, .lvr-status.st-noshow) {
    --status-color: var(--pos-noShow-color); --status-bg: var(--pos-noShow-background);
    --status-ink: var(--pos-noShow-ink); --status-border: var(--pos-noShow-border); --status-solid-ink: var(--pos-noShow-onSolid);
  }
  html[data-pos-ui] :is([data-pos-status=cancelled], .title-group.cancelled, .title-group.declined,
    .title-group.decline, .title-group.expired, .title-group.expiration,
    .box-tix-appt-book[status="9"], .box-tix-appt-book[status="11"],
    .tix-dot.st-cancelled, .tix-state.st-cancelled, .lvr-status.st-cancelled) {
    --status-color: var(--pos-cancelled-color); --status-bg: var(--pos-cancelled-background);
    --status-ink: var(--pos-cancelled-ink); --status-border: var(--pos-cancelled-border); --status-solid-ink: var(--pos-cancelled-onSolid);
  }
  html[data-pos-ui] :is([data-pos-status=waiting], .tix-dot.st-wait, .lvr-status.st-wait) {
    --status-color: var(--pos-waiting-color); --status-bg: var(--pos-waiting-background);
    --status-ink: var(--pos-waiting-ink); --status-border: var(--pos-waiting-border); --status-solid-ink: var(--pos-waiting-onSolid);
  }
  html[data-pos-ui] :is([data-pos-status=pending], .title-group.pending, .tix-dot.st-pending,
    .sc2-ticket[data-status="7"], .sc2-ticket[data-status="8"], .lvr-status.st-pending) {
    --status-color: var(--pos-pending-color); --status-bg: var(--pos-pending-background);
    --status-ink: var(--pos-pending-ink); --status-border: var(--pos-pending-border); --status-solid-ink: var(--pos-pending-onSolid);
    --status-solid-fill: var(--pos-pending-solid-fill); --status-solid-fill-ink: var(--pos-pending-solid-fill-ink);
  }
  html[data-pos-ui] :is([data-pos-status=appointment], .sc2-ticket--appt) {
    --type-color: var(--pos-appointment-color); --type-bg: var(--pos-appointment-background);
    --type-ink: var(--pos-appointment-ink); --type-solid-ink: var(--pos-appointment-onSolid);
    --type-solid-fill: var(--pos-appointment-solid-fill); --type-solid-fill-ink: var(--pos-appointment-solid-fill-ink);
  }
  html[data-pos-ui] :is([data-pos-status=walkIn], .sc2-ticket--walkin) {
    --type-color: var(--pos-walkIn-color); --type-bg: var(--pos-walkIn-background);
    --type-ink: var(--pos-walkIn-ink); --type-solid-ink: var(--pos-walkIn-onSolid);
    --type-solid-fill: var(--pos-walkIn-solid-fill); --type-solid-fill-ink: var(--pos-walkIn-solid-fill-ink);
  }
  html[data-pos-ui] .preview-ticktet-group .title-group {
    --tg-status-color: var(--status-color, var(--pos-confirmed-color));
    --tg-status-bg: var(--status-bg, var(--pos-confirmed-background));
    --tg-status-border: var(--status-border, var(--pos-confirmed-border));
  }
  html[data-pos-ui] .preview-ticktet-group .title-group :is(.current-status, .status, .status-label, .ticket-status) {
    color: var(--status-ink); background-color: var(--status-bg);
  }
  html[data-pos-ui] .booking-page-body :is(.box-tix-appt-book.tix-fold, .tix-legend) .tix-state,
  html[data-pos-ui] .booking-page-body .lvr-status {
    color: var(--status-ink);
    background-color: var(--status-bg);
    border-color: var(--status-border);
  }
  html[data-pos-ui] .booking-page-body :is(.box-tix-appt-book.tix-fold, .tix-legend) .tix-chip-confirmed {
    --chip: var(--pos-confirmed-color);
    color: var(--pos-confirmed-ink);
    background-color: var(--pos-confirmed-background);
  }
  html[data-pos-ui] .booking-page-body .tix-legend-swatch {
    background-color: var(--pos-surface);
    border-color: var(--pos-unconfirmed-color);
  }
  html[data-pos-ui] .booking-page-body .box-tix-appt-book.tix-fold[status="1"][confob="false"][bookonl="true"]::before {
    border-color: var(--pos-unconfirmed-color);
  }
  html[data-pos-ui] .sc2-ticket,
  html[data-pos-ui] .sc2-ticket[data-appt-id],
  html[data-pos-ui] .sc2 article.sc2-ticket.has-status[data-appt-id],
  html[data-pos-ui] .sc2 article.sc2-ticket.has-status.is-status-warning[data-appt-id] {
    --sc2-ticket-color: var(--status-color, var(--type-color, var(--pos-waiting-color)));
    --sc2-status-accent: var(--status-solid-fill, var(--type-solid-fill, var(--pos-waiting-solid-fill)));
    --sc2-status-border: var(--status-border, var(--type-color));
    --sc2-status-ink: var(--status-solid-fill-ink, var(--type-solid-fill-ink, var(--pos-waiting-solid-fill-ink)));
    border-color: var(--sc2-ticket-color);
  }
  html[data-pos-ui] .sc2 article.sc2-ticket[data-appt-id] .sc2-ticket__index {
    background-color: var(--sc2-status-accent);
    color: var(--sc2-status-ink);
  }
  html[data-pos-ui] .sc2-ticket .sc2-ticket__badge {
    background-color: var(--type-bg);
    color: var(--type-ink);
  }
  html[data-pos-ui] .sc2 article.sc2-ticket[data-appt-id] > .sc2-ticket__inner,
  html[data-pos-ui] .sc2 article.sc2-ticket[data-appt-id]::before {
    background-color: var(--pos-surface);
    border-color: var(--sc2-ticket-color);
  }
  html[data-pos-ui] .sc2 article.sc2-ticket[data-appt-id] > .sc2-ticket__inner {
    background-image: var(--sc2-ticket-background);
  }
  html[data-pos-ui] .sc2-ticket:is([data-status="7"], [data-status="8"]) {
    --sc2-tix-done: var(--pos-pending-color);
    --sc2-ticket-color: var(--pos-pending-color);
    border-color: var(--pos-pending-color);
  }
  html[data-pos-ui] .sc2 article.sc2-ticket.has-status.is-passdate[data-appt-id] {
    --sc2-ticket-color: #6b7280;
    --sc2-status-accent: #6b7280;
    --sc2-status-border: #6b7280;
    --sc2-status-ink: #fff;
    border-color: var(--sc2-ticket-color);
  }
  html[data-pos-ui] .sc2 article.sc2-ticket.has-status:not(.is-status-warning)[data-appt-id] {
    --sc2-ticket-color: #03a2e2;
    --sc2-status-accent: #03a2e2;
    --sc2-status-border: #03a2e2;
    --sc2-status-ink: #fff;
    border-color: var(--sc2-ticket-color);
  }

  html[data-pos-ui] :is(.frontdesk-modal-header, .frontdesk-modal-content, .frontdesk-modal-footer,
    .frontdesk-accordion-section, .frontdesk-accordion-header, .frontdesk-confirm-content,
    .giftcardmanager-container, .gcm-toolbar, .gcm-date-nav-bar, .gcm-period-select,
    .gcm-filter-select-btn, .gcm-dropdown-menu, .gcm-footer-fixed-bar,
    .gcm-table tfoot tr, .gcm-table tfoot td, .gcm-footer-fixed-bar tfoot tr, .gcm-footer-fixed-bar tfoot td) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(.frontdesk-nav-item.active, .gcm-filter-select-btn.is-active, .gcm-gift-setup-header) {
    background: var(--pos-primary-soft);
    color: var(--pos-primary-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] :is(.frontdesk-modal-icon, .frontdesk-change-template-btn,
    .frontdesk-footer-btn-save:not(:disabled), .frontdesk-confirm-btn-confirm, .gcm-activate-btn) {
    background-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] :is(.frontdesk-change-template-btn, .frontdesk-footer-btn-save:not(:disabled),
    .frontdesk-confirm-btn-confirm, .gcm-activate-btn):hover {
    background-color: var(--pos-primary-fill-hover);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] .gcm-gift-setup-panel { background-color: var(--pos-canvas); border-color: var(--pos-border); }
  html[data-pos-ui] .gcm-gift-setup-title { color: var(--pos-primary-text); }
  html[data-pos-ui] :is(.gcm-today-btn, .gcm-icon-label, .gcm-date-nav-btn,
    .gcm-date-display, .gcm-dropdown-item) { color: var(--pos-text); }
  html[data-pos-ui] .frontdesk-modal-container :is(.text-gray-700, .text-gray-800, .text-gray-900) {
    color: var(--pos-text);
  }
  html[data-pos-ui] .frontdesk-modal-container :is(.text-gray-400, .text-gray-500, .text-gray-600,
    .frontdesk-footer-btn, .frontdesk-footer-btn-cancel) { color: var(--pos-muted); }
  html[data-pos-ui] .frontdesk-modal-container :is(.bg-white, .bg-gray-100, .bg-gray-200) {
    background-color: var(--pos-surface2) !important;
  }
  html[data-pos-ui] .frontdesk-layout-container :is(.text-blue-500, .text-amber-500) { color: var(--pos-text); }
  html[data-pos-ui] .frontdesk-layout-container [class~="bg-[#E8F2FF]"] {
    background-color: color-mix(in srgb, #3B82F6 12%, var(--pos-surface)) !important;
  }
  html[data-pos-ui] .frontdesk-layout-container [class~="bg-[#FFF8E6]"] {
    background-color: color-mix(in srgb, #F59E0B 12%, var(--pos-surface)) !important;
  }
  /* Tailwind and the template preview lock these existing colors with !important. */
  html[data-pos-ui] .frontdesk-change-template-btn {
    background-color: var(--pos-primary-fill) !important;
    color: var(--pos-primary-fill-ink) !important;
  }
  html[data-pos-ui] .frontdesk-change-template-btn:hover {
    background-color: var(--pos-primary-fill-hover) !important;
    color: var(--pos-primary-fill-ink) !important;
  }
  html[data-pos-ui] .frontdesk-modal-container [stroke="#27AE60" i] { stroke: var(--pos-primary); }
  html[data-pos-ui] .frontdesk-modal-container [fill="#EAF7F0" i] { fill: var(--pos-primary-soft); }
  html[data-pos-ui] .team-settings-sidebar-tab { color: var(--pos-muted); }
  html[data-pos-ui] .team-settings-sidebar-tab[aria-selected=true] { color: var(--pos-primary-text); }
  html[data-pos-ui] .tm-magic :is(.team-settings-sidebar-tab-active .tm-count,
    .tm-gallery-primary, .tm-filter-count, .sched-cal-cell-num.today,
    .tm-schedule-save, .services2-custom-duration-save) {
    background-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] .tm-magic .team-settings-save-btn {
    background: var(--pos-primary-fill) !important;
    color: var(--pos-primary-fill-ink) !important;
    border-color: var(--pos-primary-fill);
  }

  html[data-pos-ui] .catalog-container :is(
    .topbar, .topbar-design-wrap, .topbar-search-input, .topbar-view-group, .bsm,
    .sb-foot, .main, .cat-card, .open-item-card, .col-hadd, .oi-group-tech, .list-view,
    .ac-filter-btn, .ac-filter-drop, .ac-footer, .sp-footer, .sp-reset-btn,
    .sp-action-select-btn, .sp-action-drop, .sp-unit-btn:not(.active), .sp-search-wrap,
    .sp-pi, .sp-mode-sel, .sp-btn-group, .sp-btn-pct:not(.active), .sp-btn-pct-inner,
    .sp-btn-custom:not(.active), .confirm-box, .confirm-cancel, .cp-dropzone, .di-footer,
    .settings-dropdown, .ctx-menu, .modal-menu, .modal-head, .modal-foot, .grp-hd,
    .finput, .sel-btn, .sel-drop, .rpanel, .rpanel-tb, .ai-input, .ai-textarea,
    .up-btn, .staff-field, .ai-staff-search-wrap, .dur-select-btn, .dur-drop,
    .cat-field, .aicat-col-btn, .aicat-col-drop, .aiao-card, .cs-style-grid, .empty-box,
    .combo-col, .combo-item-card, .si-items-head, .cdel-cancel, .im-inp, .im-sel,
    .grid-card-item, .grid-card-addon-plus, .addon-plus-btn, .info-circle-btn,
    .grid-fab-btn.fab-refresh, .btn-sidebar-toggle, .list-view-group,
    .image-crop-modal, .image-crop-head, .image-crop-btn-ratio:not(.active),
    .image-crop-tool-btn, .image-crop-zoom-btn, .image-crop-foot) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] .catalog-container :is(.cat-tabs, .bg-canvas, .cat-tab-btn:not(.active)) {
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
  }
  html[data-pos-ui] .catalog-container :is(.text-ink, .text-ink-muted, .text-ink-faint) { color: var(--pos-text); }
  html[data-pos-ui] .catalog-container .text-brand { color: var(--pos-primary-text); }
  html[data-pos-ui] .catalog-container .topbar-design-wrap { background-color: var(--pos-surface) !important; }
  html[data-pos-ui] .catalog-container #rpanelSave { background-color: var(--pos-primary-fill); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] .catalog-container #rpanelSave:hover {
    background-color: var(--pos-primary-fill-hover);
    color: var(--pos-primary-fill-ink);
  }
  /* The original Catalog tabs and selected category names already use !important. */
  html[data-pos-ui] .catalog-container .cat-tab-btn.active {
    background-color: var(--pos-primary-soft) !important;
    color: var(--pos-primary-text) !important;
  }
  html[data-pos-ui] .catalog-container .topbar-view-btn.active { color: var(--pos-primary-fill-ink) !important; }
  html[data-pos-ui] .catalog-container .cat-li.active { background-color: var(--pos-primary-fill); }
  html[data-pos-ui] .catalog-container .cat-li.active .cat-li-name { color: var(--pos-primary-fill-ink) !important; }
  html[data-pos-ui] .catalog-container .cat-li.active .cat-li-ct { color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] .catalog-container :is(
    .btn-add-new-cat, .aim-save-btn, .bprimary, .ac-add-btn, .sp-apply-btn, .sp-preview-btn,
    .sp-unit-btn.active, .sp-btn-pct.active, .sp-btn-custom.active, .cp-export-btn,
    .di-recover, .empty-box-btn, .sync-confirm-btn, .grid-fab-btn.fab-add,
    .topbar-view-btn.active, .image-crop-btn-ratio.active, .image-crop-btn-apply,
    .pcharge-btn.active, .sbAmount-btn.active, .ec-pct-btn.active, .ec-custom-btn.active,
    .si-cat-row.active) {
    background-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] .catalog-container :is(.btn-add-new-cat, .aim-save-btn, .bprimary,
    .ac-add-btn, .sp-apply-btn, .sp-preview-btn, .cp-export-btn, .sync-confirm-btn,
    .empty-box-btn, .image-crop-btn-apply):hover {
    background-color: var(--pos-primary-fill-hover);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] .catalog-container .sp-btn-pct.active .sp-btn-pct-inner {
    background-color: var(--pos-primary-fill);
    border-color: var(--pos-primary-fill);
  }
  html[data-pos-ui] .catalog-container .sp-btn-pct.active :is(.sp-pct-text, .sp-pct-icon),
  html[data-pos-ui] .catalog-container .si-cat-row.active .si-cat-count { color: var(--pos-primary-fill-ink); }

  html[data-pos-ui] .closedtickets-container :is(.closedtickets-sidebar, .closedtickets-header,
    .closedtickets-content-wrapper, .date-navigation-bar, .period-select, .ticket-card,
    .ticket-load-more-btn, .ticket-action-btn, .ct-ticket-details-panel,
    .ct-ticket-details-header, .ct-ticket-section, .ct-tip-popup-inner,
    .ct-sms-popup, .ct-sms-change-panel, .ct-email-popup, .ct-email-change-panel) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] .closedtickets-container :is(.closedtickets-subtitle, .closedtickets-back-btn, .date-nav-btn,
    .date-today-btn, .date-preset-select) { color: var(--pos-muted); }
  html[data-pos-ui] .closedtickets-container .date-display { color: var(--pos-primary-text); }

  /* Closed Tickets redesign: the new markup reads these local variables, so
     remapping them is enough — no per-rule overrides needed. */
  html[data-pos-ui] .closedtickets-container {
    --ct-canvas: var(--pos-canvas);
    --ct-surface: var(--pos-surface);
    --ct-surface-2: var(--pos-surface2);
    --ct-track: var(--pos-surface2);
    --ct-border: var(--pos-border);
    --ct-border-soft: var(--pos-border);
    --ct-text: var(--pos-text);
    --ct-text-2: var(--pos-text);
    --ct-muted: var(--pos-muted);
    --ct-accent-soft: color-mix(in srgb, var(--pos-primary-fill) 24%, transparent);
    --ct-accent-ink: var(--pos-primary-text);
  }
  html[data-pos-ui] .closedtickets-container :is(.ct-period-btn, .ct-tab, .ct-view-btn, .ct-preset,
    .ct-btn-ghost, .ct-month-nav, .ct-details-btn, .ct-chevron, .ct-chip--pay, .ct-sum-row,
    .ct-row-no, .ct-tab-count, .ct-col-time, .ct-chip--photo, .ct-cg-sub, .ct-cg-names, .ct-card-split) { color: var(--pos-text); }
  html[data-pos-ui] .closedtickets-container :is(.ct-row-no, .ct-tab-count) { background-color: var(--pos-surface2); }
  /* Per-status tab badges keep their hue (beats the neutral rule above; same tints in light and dark, like the status pills). */
  html[data-pos-ui] .closedtickets-container .ct-tab--closed .ct-tab-count { background-color: #DCFCE7; color: #166534; }
  html[data-pos-ui] .closedtickets-container .ct-tab--cancelled .ct-tab-count { background-color: #FEE4E2; color: #B42318; }
  html[data-pos-ui] .closedtickets-container .ct-tab--voided .ct-tab-count { background-color: #E2E8F0; color: #334155; }
  html[data-pos-ui] .closedtickets-container .ct-tab--notpayment .ct-tab-count { background-color: #FEF3C7; color: #92400E; }
  html[data-pos-ui] .closedtickets-container :is(.ct-draft-value, .ct-btn-outline) { border-color: var(--pos-border); }
  html[data-pos-ui] .closedtickets-container .ct-period-sep { background-color: var(--pos-border); }
  html[data-pos-ui] .closedtickets-container :is(.ct-sum-row, .ct-tech-group) { border-bottom-color: var(--pos-border); }
  /* Status pills and the staff avatar keep their own hues: they carry meaning. */
  html[data-pos-ui] .closedtickets-container .ct-kpi-value { color: var(--pos-text); }

  html[data-pos-ui] .work-schedule-container,
  html[data-pos-ui] .work-schedule-container .work-schedule-page { background-color: var(--pos-canvas); }
  html[data-pos-ui] .work-schedule-container :is(
    .work-schedule-header, .work-schedule-top-nav, .work-schedule-panel-card,
    .work-schedule-stat-card, .schedule-stat-card, .schedule-hours-card, .schedule-timeoff-container,
    .schedule-blocked-container, .schedule-overview-card, .schedule-time-input,
    .schedule-add-shift-btn, .schedule-remove-shift-btn, .schedule-timeoff-header-card,
    .ws-leave-card, .schedule-timeoff-empty-state, .schedule-blocked-empty-state,
    .schedule-overview-layout, .schedule-overview-main, .schedule-tech-filter-trigger,
    .schedule-tech-modal, .schedule-tech-search, .schedule-tech-radio,
    .schedule-week-toolbar, .schedule-week-nav-btn, .schedule-today-btn,
    .schedule-week-picker-modal, .schedule-picker-month-btn, .schedule-picker-cancel-btn,
    .schedule-overview-table, .schedule-overview-staff-cell, .schedule-overview-cell,
    .repeat-selector-menu, .drop-selector-shift-time, .div-selector) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] .work-schedule-container :is(
    .work-schedule-tab-badge, .schedule-hours-header, .schedule-overview-header,
    .schedule-day-row.off-day, .ws-filter-chip, .schedule-tech-item:hover,
    .schedule-tech-item.selected, .schedule-overview-table-header, .schedule-overview-staff-header,
    .schedule-overview-cell-off) {
    background-color: var(--pos-surface2);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] .work-schedule-container :is(
    .team-settings-title, .work-schedule-stat-value, .schedule-stat-number.dark,
    .schedule-hours-text h3, .schedule-overview-text h3, .schedule-day-name.enabled,
    .schedule-breaks-info h4, .schedule-timeoff-header-title, .schedule-blocked-header-title,
    .ws-leave-name, .ws-leave-dates, .schedule-timeoff-empty-text, .schedule-blocked-empty-text,
    .schedule-tech-modal-title, .schedule-tech-name, .schedule-date-range,
    .schedule-picker-month-label, .schedule-picker-day, .schedule-overview-header-cell strong,
    .schedule-overview-staff-name, .schedule-overview-cell-on span) { color: var(--pos-text); }
  html[data-pos-ui] .work-schedule-container :is(
    .team-settings-back-btn, .team-settings-subtitle, .work-schedule-nav-tab,
    .work-schedule-tab-badge, .work-schedule-stat-label, .schedule-stat-label,
    .schedule-tab-btn.inactive, .schedule-hours-text p, .schedule-overview-text p,
    .schedule-day-name.disabled, .schedule-time-separator, .schedule-day-off-text,
    .schedule-breaks-info p, .schedule-timeoff-header-subtitle, .schedule-blocked-header-subtitle,
    .ws-leave-role, .ws-leave-meta, .ws-leave-note, .ws-leave-subtext,
    .schedule-tech-modal-close, .schedule-picker-weekdays span,
    .schedule-overview-header-cell, .schedule-overview-empty-cell,
    .schedule-overview-staff-hours) { color: var(--pos-muted); }
  html[data-pos-ui] .work-schedule-container :is(
    .schedule-tab-btn.active, .schedule-hours-icon-box, .schedule-overview-icon-box,
    .ws-filter-chip.active, .work-schedule-nav-tab.active .work-schedule-tab-badge) {
    background: var(--pos-primary-soft);
    color: var(--pos-primary-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] .work-schedule-container .work-schedule-nav-tab.active {
    color: var(--pos-primary-text);
    border-bottom-color: var(--pos-primary);
  }
  html[data-pos-ui] .work-schedule-container :is(
    .team-settings-save-btn, .schedule-timeoff-request-btn, .schedule-blocked-add-btn,
    .schedule-picker-day.is-selected, .schedule-picker-today-btn, .ws-leave-avatar,
    .schedule-day-toggle.enabled, .schedule-breaks-toggle.enabled) {
    background: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
    border-color: var(--pos-primary-fill);
  }
  html[data-pos-ui] .work-schedule-container :is(
    .team-settings-save-btn, .schedule-timeoff-request-btn, .schedule-blocked-add-btn,
    .schedule-picker-today-btn):hover:not(:disabled) {
    background: var(--pos-primary-fill-hover);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] :is(#div-edit-day-schedule-container, #div-edit-day-schedule-header,
    #div-edit-day-schedule-list-shift .shift, #div-edit-day-schedule-list-shift .shift-select) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #div-edit-day-schedule-header .title { color: var(--pos-text); }
  html[data-pos-ui] #div-edit-day-schedule-header .description { color: var(--pos-muted); }
  html[data-pos-ui] #turn-tracker-page-body-id {
    --bg-calendar: var(--pos-canvas);
    --bs-gray-400: var(--pos-muted);
    --bs-gray-500: var(--pos-muted);
    --bs-gray-600: var(--pos-muted);
    --bs-gray-700: var(--pos-text);
    --bs-gray-800: var(--pos-text);
    --tracker-frame-line: var(--pos-border);
    --tracker-frame-divider: var(--pos-border);
    --tracker-turn-open-color: var(--pos-waiting-color);
    --tracker-turn-in-service-color: var(--pos-inService-color);
    --tracker-turn-completed-color: var(--pos-done-color);
    --tracker-turn-adjust-border: color-mix(in srgb, var(--tracker-turn-adjust-color) 45%, var(--pos-surface));
    --tracker-turn-adjust-background: color-mix(in srgb, var(--tracker-turn-adjust-color) 10%, var(--pos-surface));
    --tracker-turn-bonus-color: #7c3aed;
    --tracker-turn-bonus-border: color-mix(in srgb, var(--tracker-turn-bonus-color) 45%, var(--pos-surface));
    --tracker-turn-bonus-background: color-mix(in srgb, var(--tracker-turn-bonus-color) 10%, var(--pos-surface));
    background-color: var(--pos-canvas);
    color: var(--pos-text);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-header-icon > i {
    background-color: var(--pos-surface2);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-dropdown .ct-turn-chip {
    background-color: var(--pos-primary-soft);
    border-color: var(--pos-border);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-dropdown .ct-turn-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-primary) 18%, transparent);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-dropdown .ct-badge-green {
    background-color: var(--pos-confirmed-background);
    border-color: var(--pos-confirmed-border);
    color: var(--pos-confirmed-ink);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-dropdown .ct-badge-amber {
    background-color: var(--pos-pending-background);
    border-color: var(--pos-pending-border);
    color: var(--pos-pending-ink);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-dropdown .ct-badge-slate {
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-dropdown .ct-reason-tag:hover {
    background-color: var(--pos-primary-soft);
    border-color: var(--pos-primary);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .header-form-page .right-header .option-more.active {
    color: var(--pos-primary-text) !important;
  }
  html[data-pos-ui] #turn-tracker-page-body-id .switch-toggle .slider-toggle::before {
    background-color: var(--pos-text);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .switch-toggle input:checked + .slider-toggle::before {
    background-color: var(--pos-primary-ink);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area.service span,
  html[data-pos-ui] #turn-tracker-page-body-id .row-end-tracker .ticket-view .ticket-line-2 .tracker-turn-amount {
    color: var(--pos-confirmed-ink);
  }
  html[data-pos-ui] #turn-tracker-page-body-id #append-turn-tracker-id > .row-tracker.default,
  html[data-pos-ui] #turn-tracker-page-body-id #append-turn-tracker-id > .row-tracker.default > :is(.row-start-tracker, .row-end-tracker) {
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
  }
  html[data-pos-ui] #turn-tracker-page-body-id #append-turn-tracker-id > .row-tracker.default .box-ticket--tracker {
    background-color: var(--pos-surface2) !important;
  }
  html[data-pos-ui] #turn-tracker-page-body-id #append-turn-tracker-id > .row-tracker.default .box-ticket--tracker p {
    color: var(--pos-muted);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-tracker:not(.default) .row-end-tracker {
    background-color: var(--pos-surface) !important;
    background-image: linear-gradient(90deg, var(--pos-border) 1px, transparent 1px) !important;
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker > .box-ticket--tracker:not(.index) {
    border-color: var(--pos-border);
    color: var(--pos-text);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker > .box-ticket--tracker:is(.ticket-view, .addMore) {
    background-color: var(--pos-surface);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker > .box-ticket--tracker:not(.index):hover {
    border-color: var(--pos-primary);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker > .box-ticket--tracker.isAdjust {
    border-color: var(--tracker-turn-adjust-border);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker > .box-ticket--tracker.isBonus {
    border-color: var(--tracker-turn-bonus-border);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-end-tracker .box-ticket--tracker .tracker-turn-note {
    color: var(--pos-muted);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-end-tracker .box-ticket--tracker .tracker-turn-tag span {
    color: inherit;
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-legend-bonus {
    background-color: var(--tracker-turn-bonus-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-tracker .tracker-tech-next {
    color: var(--pos-primary-ink);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-start-tracker .track-img-error-box {
    background-color: var(--pos-surface2) !important;
    color: var(--pos-text) !important;
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-start-tracker .busy-badge {
    background-color: var(--pos-inService-background);
    border-color: var(--pos-inService-border);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .busy-badge span {
    color: var(--pos-inService-ink);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .busy-badge .pulse-dot {
    background-color: var(--pos-inService-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore .box--addTicket {
    background-color: var(--pos-surface);
    color: var(--pos-muted);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore .box--addMore {
    background-color: var(--pos-surface2);
    border-color: var(--pos-border);
    color: var(--pos-muted);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore :is(.box--addTicket, .box--addMore) > i {
    color: inherit;
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore:is(:hover, .drop-target),
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore :is(.box--addTicket, .box--addMore):hover {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #turn-tracker-page-body-id > .modal-body-tracker > .header-form-page,
  html[data-pos-ui] #turn-tracker-page-body-id #append-turn-tracker-id,
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-tracker .row-start-tracker {
    background: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #turn-tracker-page-body-id :is(.tracker-legend, .tracker-tech-counts, .tracker-header-icon > i) {
    color: var(--pos-muted);
    border-color: var(--pos-border);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-tracker:not(.default) .row-start-tracker {
    --tracker-tech-soft-border: color-mix(in srgb, var(--tech-color) 56%, var(--pos-surface));
    background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--tech-color) 12%, var(--pos-surface)) 0%,
      color-mix(in srgb, var(--tech-color) 4%, var(--pos-surface)) 55%,
      var(--pos-surface) 100%);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .body-tracker .row-tracker.is-next .row-start-tracker {
    box-shadow: inset 4px 0 0 var(--tech-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-start-tracker .techs-photo {
    background: var(--tracker-tech-soft-border);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-start-tracker .techs-photo.has-progress {
    background: conic-gradient(
      var(--tech-color) 0 var(--tracker-tech-progress, 0%),
      var(--tracker-tech-soft-border) var(--tracker-tech-progress, 0%) 100%);
  }
  html[data-pos-ui] #turn-tracker-page-body-id #append-turn-tracker-id .row-start-tracker .techs-photo > :is(img, .track-img-error-box) {
    border-color: var(--pos-surface);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-legend-open {
    background-color: var(--pos-waiting-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-legend-in-service {
    background-color: var(--pos-inService-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-legend-pending {
    background-color: var(--pos-pending-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .tracker-legend-completed {
    background-color: var(--pos-done-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .box-ticket--tracker[data-turn-status="2"]:not(.isBonus, .isAdjust) {
    --tracker-status-color: var(--pos-waiting-color);
    --tracker-status-ink: var(--pos-waiting-onSolid);
    border-left-color: var(--pos-waiting-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .box-ticket--tracker[data-turn-status="3"]:not(.isBonus, .isAdjust) {
    --tracker-status-color: var(--pos-inService-color);
    --tracker-status-ink: var(--pos-inService-onSolid);
    border-left-color: var(--pos-inService-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .box-ticket--tracker[data-turn-status="8"]:not(.isBonus, .isAdjust) {
    --tracker-status-color: var(--pos-pending-color);
    --tracker-status-ink: var(--pos-pending-onSolid);
    border-left-color: var(--pos-pending-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .box-ticket--tracker[data-turn-status="7"]:not(.isBonus, .isAdjust) {
    --tracker-status-color: var(--pos-done-color);
    --tracker-status-ink: var(--pos-done-onSolid);
    border-left-color: var(--pos-done-color);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-end-tracker .ticket-view[data-turn-status] {
    background-color: var(--pos-surface);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-end-tracker .ticket-view
    :is(.ticket-line-1, .ticket-line-2) > p:not(.text-danger, .tracker-turn-amount) {
    color: var(--pos-text);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-end-tracker .ticket-view .ticket-line-2 { color: var(--pos-muted); }
  html[data-pos-ui] #turn-tracker-page-body-id .row-end-tracker
    .ticket-view:is([data-turn-status="2"], [data-turn-status="3"], [data-turn-status="7"], [data-turn-status="8"])
    .ticket-line-3 {
    background-color: var(--tracker-status-color);
    color: var(--tracker-status-ink);
  }
  html[data-pos-ui] #turn-tracker-page-body-id .row-end-tracker
    .ticket-view:is([data-turn-status="2"], [data-turn-status="3"], [data-turn-status="7"], [data-turn-status="8"])
    .ticket-line-3 > :is(p, span, i) { color: inherit; }

  html[data-pos-ui][data-pos-appearance=dark] :is(
    .team-settings-layout, .team-settings-sidebar, .tm-toolbar, .tm-filter-menu label:hover,
    .rpt-sidebar, .rpt-main, .rpt-content, .rpt-header,
    .catalog-container .bg-canvas, .sc2-frame__body,
    #detail-modal, ._client-container-redesign,
    #detail-modal .wallet-section-header, #sc2-settings-modal .modal-footer, #qs-settings-modal .modal-footer, #team-settings-modal .ts-modal-footer) {
    background-color: var(--pos-canvas);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(#sc2-settings-modal, #qs-settings-modal, #team-settings-modal) .btn-close {
    filter: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d1d5db'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3E%3C/svg%3E");
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(#sc2-settings-modal, #qs-settings-modal, #team-settings-modal) .btn-close:is(:hover, :focus-visible) {
    background-color: var(--pos-surface2);
    opacity: 1;
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(
    #detail-modal .wallet-section-header h3, #detail-modal .wallet-form-label,
    .team-settings-subtitle, .team-settings-sidebar-count,
    .tm-filter summary, .tm-clear-filters, .tm-count,
    .rpt-table th, .rpt-table td, .rpt-title, .rpt-stat-value,
    .sc2-frame__title, .sc2-ticket__name, .sc2-tech__name) { color: var(--pos-text); }
  html[data-pos-ui][data-pos-appearance=dark] :is(
    .tm-view-toggle, .tm-count, .tm-table thead th, .rpt-table thead th,
    .booking-page-body .box-tix-appt-book .tix-bar-resize-book i) {
    background-color: var(--pos-surface2);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .right-side-panel-action .group-btn-action {
    background-color: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .sc2 article.sc2-ticket.has-status[data-appt-id] {
    background-color: var(--pos-surface);
  }
  html[data-pos-ui][data-pos-appearance] .sc2 article.sc2-ticket[data-appt-id]:is(.is-group, .is-combine) {
    background: transparent;
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .booking-action-label {
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .booking-calendar-area .calendar-view-column-parent {
    --cal-off-bg: var(--pos-canvas);
    --cal-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-1 1l2-2M0 10L10 0M9 11l2-2' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar .working-slot {
    background: var(--pos-surface);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(
    .popup-container.time-slot-picker-popup, .popup-container.repeat-options-popup) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border: 1px solid var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] body .quick-book-picker-sheet {
    background: rgb(0 0 0 / 58%);
  }
  html[data-pos-ui][data-pos-appearance=dark] .flat-repeat-form-popup .option-list-item-check {
    border-color: var(--pos-muted);
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal .modal-content .header-form-booking .progress-step.progress-step {
    border: 1px solid var(--pos-border);
    border-radius: 999px;
    box-shadow: none;
    background: color-mix(in srgb, var(--bs-text) 12%, var(--bs-surface-bg));
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal .modal-content .header-form-booking .progress-step.progress-step .pgr-step {
    background: transparent !important;
    color: var(--pos-muted) !important;
    border-bottom: 0;
    box-shadow: none;
    padding: 2px;
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal .modal-content .header-form-booking .progress-step.progress-step .pgr-step
    :is(.icon-desc, .content-step, .content-step p) {
    background: transparent !important;
    color: inherit !important;
    border: 0;
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal .modal-content .header-form-booking .progress-step.progress-step
    :is(.pgr-step.active, .pgr-step.mobile-current) {
    background: var(--pos-surface) !important;
    color: var(--pos-text) !important;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal .modal-content .header-form-booking .progress-step.progress-step
    :is(.pgr-step.active, .pgr-step.mobile-current) .icon-desc {
    color: var(--pos-primary-fill) !important;
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block,
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block {
    background: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block {
    border: 1px solid var(--pos-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgb(0 0 0 / 42%);
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block {
    border-radius: 12px;
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block button {
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid transparent !important;
    border-radius: 8px;
    background: transparent !important;
    color: var(--pos-text) !important;
    font-weight: 600;
    opacity: 1;
    text-align: left;
    transition: background-color 140ms ease, border-color 140ms ease;
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block button:hover {
    border-color: var(--pos-border) !important;
    background: var(--pos-surface2) !important;
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block button i {
    border-radius: 6px;
    background: var(--pos-primary-soft);
    color: var(--pos-primary-text) !important;
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block button.add-appointment {
    border-color: transparent !important;
    background: var(--pos-primary-soft) !important;
    color: var(--pos-primary-text) !important;
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block button.add-appointment:hover {
    border-color: color-mix(in srgb, var(--pos-primary) 45%, var(--pos-border)) !important;
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block button.add-block-time i {
    background: color-mix(in srgb, var(--pos-accent) 18%, var(--pos-surface2));
    color: var(--pos-accent) !important;
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-container.option-book-or-block .form-option-book-or-block button p {
    color: inherit !important;
    font-weight: 600;
    line-height: 18px;
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .box-tix-appt-book .tix-status-book {
    background: var(--pos-surface);
    color: var(--pos-primary-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .popup-detail-ticket-book .body-popup .tech-service .action-operation-button-click {
    background: var(--pos-surface2);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] .confirmation-booking .btn-group-confirm .btn-confirm-review-booking-apt:is(.sms, .email, .both) {
    background: var(--pos-surface2);
    border: 1px solid var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .btn-accept-drag-appointment {
    background: var(--pos-surface2);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .box-tix-appt-book.tix-fold.appointment-preview::before {
    background: var(--pos-surface);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body
    .box-tix-appt-book.tix-fold.tix-inactive:not(:hover, :focus-visible, .is-popup, .ticket-is-showing, .tickets-is-showing, .group-is-showing)::before {
    border-color: var(--pos-border);
    background: color-mix(in srgb, var(--pos-surface) 72%, var(--pos-canvas));
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .box-tix-appt-book.tix-fold:is([status="7"], [status="9"], [status="11"]) .client {
    text-decoration-color: color-mix(in srgb, var(--pos-text) 55%, transparent);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .box-tix-appt-book.tix-fold.timeOff::before {
    border-color: var(--pos-border);
    background-color: var(--pos-surface2);
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pos-text) 10%, transparent) 0 1px, transparent 1px 7px);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .box-tix-appt-book.tix-fold:is(.is-popup, .ticket-is-showing, .tickets-is-showing, .group-is-showing)::before {
    box-shadow: 0 0 0 1px var(--pos-canvas), 0 0 0 3px var(--tix-accent, var(--pos-primary)), 0 12px 28px rgba(0, 0, 0, 0.35);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body .box-tix-appt-book.tix-fold:focus-visible::before {
    border-color: var(--pos-border);
    box-shadow: 0 0 0 1px var(--pos-canvas), 0 0 0 3px var(--pos-text), 0 8px 20px rgba(0, 0, 0, 0.35);
  }
  html[data-pos-ui][data-pos-appearance=dark] .booking-page-body :is(.box-tix-appt-book.tix-fold, .tix-legend) .tix-chip:not(.tix-chip-confirmed) {
    background: color-mix(in srgb, var(--chip) 18%, var(--pos-surface));
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal .modal-content .step-form-booking
    div.form-list-tech-append.minimize div.tech-detail {
    background: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal .modal-content .step-form-booking
    div.form-list-tech-append.minimize div.tech-detail :is(.background-rotate, .techs-photo) {
    background: var(--pos-surface2);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal :is(
    .form-select-service-append .categories-box-list .cate-name.active,
    .form-select-service-append .categories-box-list .cate-action .btn-add-a-new-category,
    .service-item-box.active .adjust-quantity,
    .service-item-box.active .adjust-quantity button) {
    background: var(--pos-surface2);
    border-color: var(--pos-border);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] #static-quick-booking-modal .add-new-client-form .form-card {
    background: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] #preview-ticktet-group.preview-ticket-shell {
    --preview-text: var(--pos-text);
    --preview-muted: var(--pos-muted);
    --preview-line: var(--pos-border);
    --preview-soft: var(--pos-surface2);
    background: var(--pos-surface);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] #preview-ticktet-group.preview-ticket-shell :is(
    .menu-shell-header, .body-group, .btn-bottom-popup-group, .services-duration-time,
    .preview-staff-header, .preview-staff-time, .preview-receipt-button, .add-client-ticket-popup,
    .preview-staff-action, .preview-payment-option:not(.is-selected), .preview-back-button,
    .preview-ticket-more button.dropdown-toggle, .btn-bottom-popup-group .action-operation-button-click) {
    background: var(--pos-surface2);
    border-color: var(--pos-border);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] #preview-ticktet-group.preview-ticket-shell
    .preview-payment-option.is-selected {
    background: var(--pos-primary-soft);
    border-color: var(--pos-primary);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] #preview-ticktet-group.preview-ticket-shell .preview-staff-avatar {
    background: color-mix(in srgb, var(--preview-tech-color, #F05A7E) 14%, var(--pos-surface2));
  }
  html[data-pos-ui][data-pos-appearance=dark] #preview-ticktet-group.preview-ticket-shell .preview-payment-saving {
    background: color-mix(in srgb, var(--preview-accent) 10%, var(--pos-surface));
  }
  html[data-pos-ui][data-pos-appearance=dark] .preview-ticktet-popup .services-duration-time .services button.startService {
    background: var(--pos-surface2);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(
    .settings-sidebar, .page-footer, .pagination-btn,
    .dashboard-layout .date-stepper, .dashboard-layout .date-display-btn,
    .dashboard-layout .date-stepper .btn-icon, .dashboard-layout .date-stepper .btn-text,
    .cart-footer:has(.continue-btn:not(.dis-none)), .cart-footer:has(.payment-row:not(.dis-none)),
    .cart-footer .ticket-action-grid,
    .tip-modal-footer-v2, .tip-toggle-btn.tip-toggle-active,
    .main-payment .payment-other-method-btn, .main-payment .payment-quick-amounts,
    .main-payment .payment-quick-amounts--other,
    .gc-modal-container .gc-mode-btn.gc-mode-active) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .sc2 article.sc2-ticket[data-appt-id]
    :is(.sc2-ticket__waiting-time, .sc2-ticket__progress, .sc2-ticket__pay-row) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] .sc2 article.sc2-ticket[data-appt-id]
    :is(.sc2-ticket__type:not(.sc2-ticket__type--vip, .sc2-ticket__type--reward),
      .sc2-ticket__time, .sc2-ticket__time-lbl, .sc2-ticket__serv) { color: var(--pos-muted); }
  html[data-pos-ui][data-pos-appearance=dark] :is(
    .page-footer .pf-info, .page-footer .pf-info strong,
    .page-footer .pf-info b,
    .main-payment .payment-summary-label, .main-payment .payment-summary-value,
    .main-payment .payment-section-title,
    .cart-footer .total-row > span:last-child, .qs-cart-summary-heading) { color: var(--pos-text); }
  html[data-pos-ui][data-pos-appearance=dark] .page-footer { background-image: none; }
  html[data-pos-ui][data-pos-appearance=dark] :is(
    .cart-footer .continue-btn:disabled,
    .cart-footer .payment-row .close-bill:disabled,
    .gc-modal-container .gc-continue-btn:disabled,
    .gc-modal-container .gc-confirm-btn:disabled) {
    background: var(--pos-surface2);
    color: var(--pos-muted);
  }
  html[data-pos-ui]
    :is(#sc2-tech-list, [data-sc2-tech-view-list], .sc2-tech-card-host) .sc2-tech.sc2-tech--profile {
    --sc2-tech-soft-border: color-mix(in srgb, var(--sc2-tech-color) 30%, var(--pos-surface));
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--sc2-tech-color) 12%, var(--pos-surface)) 0%,
      color-mix(in srgb, var(--sc2-tech-color) 4%, var(--pos-surface)) 55%,
      var(--pos-surface) 100%);
  }
  html[data-pos-ui]
    :is(#sc2-tech-list, [data-sc2-tech-view-list], .sc2-tech-card-host) .sc2-tech.sc2-tech--profile .sc2-tech__meta-item {
    background-color: var(--pos-surface);
    border-color: var(--pos-border);
    color: var(--pos-muted);
  }
  html[data-pos-ui]
    :is(#sc2-tech-list, [data-sc2-tech-view-list], .sc2-tech-card-host) .sc2-tech--profile
    :is(.sc2-tech__photo, .sc2-tech__initials, .sc2-tech__index, .sc2-tech__status) {
    border-color: var(--pos-surface);
  }
  html[data-pos-ui]
    :is(#sc2-tech-list, [data-sc2-tech-view-list], .sc2-tech-card-host) .sc2-tech.sc2-tech--profile .sc2-tech__initials {
    background: var(--pos-surface2);
    color: var(--pos-text);
  }
  html[data-pos-ui]
    :is(#sc2-tech-list, [data-sc2-tech-view-list], .sc2-tech-card-host) .sc2-tech.sc2-tech--profile .sc2-tech__index {
    color: var(--sc2-tech-ink, #fff);
  }
  html[data-pos-ui]
    :is(#sc2-tech-list, [data-sc2-tech-view-list], .sc2-tech-card-host) .sc2-tech--profile.sc2-tech--ready .sc2-tech__status {
    --sc2-tech-status-color: var(--pos-confirmed-solid-fill);
    background-color: var(--sc2-tech-status-color);
    color: var(--pos-confirmed-solid-fill-ink);
  }
  html[data-pos-ui]
    :is(#sc2-tech-list, [data-sc2-tech-view-list], .sc2-tech-card-host) .sc2-tech.sc2-tech--profile .sc2-tech__progress-bar {
    background: color-mix(in srgb, var(--sc2-tech-color) 18%, var(--pos-surface));
  }
  html[data-pos-ui]
    :is(#sc2-tech-list, [data-sc2-tech-view-list], .sc2-tech-card-host) .sc2-tech.sc2-tech--profile .sc2-tech__last-done {
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.sc2-menu, .sc2-menu__item, .sc2-dropdown__menu, .sc2-tech-search) {
    background-color: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(
    .sc2-tech__name, .sc2-menu__item:not(.sc2-menu__item--danger)) { color: var(--pos-text); }
  /* These legacy mobile search rules already use !important. Keep the override local. */
  html[data-pos-ui][data-pos-appearance=dark] :is(.mobile-modal, .pos-container-mobile)
    .search-filter .search-wrap :is(.search-input, input) {
    background-color: var(--pos-surface) !important;
    color: var(--pos-text);
    border-color: var(--pos-border) !important;
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(
    input:not([type=color], [type=checkbox], [type=radio], [type=range], [type=button], [type=submit], [type=hidden]),
    select, textarea) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] input::placeholder,
  html[data-pos-ui][data-pos-appearance=dark] textarea::placeholder { color: var(--pos-muted); opacity: 1; }
  html[data-pos-ui][data-pos-appearance=dark] :is(.select2-results__option, .swal2-input, .swal2-textarea) {
    background-color: var(--pos-surface); color: var(--pos-text);
  }
  /* Quick Sale (desktop + mobile cart) — components that hardcode light colors. */
  html[data-pos-ui][data-pos-appearance=dark] .qs-cart-payment-option {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-cart-payment-option[aria-pressed="true"] {
    background-color: var(--pos-surface2);
    border-color: var(--pos-primary);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-cart-card-note, .qs-client-phone-masked) { color: var(--pos-muted); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-customer-label { color: var(--pos-text); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-customer-visit {
    border-color: var(--pos-border);
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-customer-empty .client-card-container,
    .qs-customer-empty .client-card-container:hover, .clients-list-item:not(:hover, .clients-list-item--selected)) {
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.clients-list-item:hover, .clients-list-item--selected) {
    border-color: var(--pos-primary);
    background-color: var(--pos-primary-soft);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.clients-list-item:hover, .clients-list-item--selected) .clients-list-chevron {
    color: var(--pos-primary-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] .cart-sidebar.qs-seat-on .client-header { border-bottom-color: var(--pos-border); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-customer-empty .client-card-icon-wrapper {
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-customer-subtitle { color: var(--pos-muted); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-customer-empty .client-card-content .client-card-primary-btn,
  html[data-pos-ui][data-pos-appearance=dark] .client-inline-picker__add-card {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-chair-chip--empty, .qs-chair-chip--pending) {
    border-color: color-mix(in srgb, #C2570A 55%, var(--pos-surface));
    background-color: color-mix(in srgb, #C2570A 16%, var(--pos-surface));
    color: #FDBA74;
  }
  html[data-pos-ui] :is(
    .main-payment .payment-collect-btn, .service-card.has-qty .svc-qty__btn--plus, .service-card .svc-qty__btn:hover,
    #quickSaleTip .tip-split-btn.tip-split-active, #quickSaleTip .tip-toggle-btn.tip-toggle-active, #quickSaleTip .tip-v3-add-btn,
    #quickSaleDiscount .discount-toggle-btn.discount-toggle-active,
    #quickSaleDiscount .qs-bill-discount__type button[aria-checked="true"],
    #openItem .footer_open_item .btnCustomP_add, .qs-pick__chair.is-sel, .qs-pick__btn--primary,
    .mobile-modal .category-nav .tab-active,
    :is(#quickSaleModal, .cart-modal, .ticket-detail) .qs-assigned-cart .header-actions .clock-btn):not(:disabled) {
    background-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] .qs-pick__chair.is-sel small { color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] .qs-pick__chair.is-sel .qs-pick__chair-ico { color: var(--pos-primary-fill-ink); }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleModal #lst-services .has-qty .svc-qty__btn--plus,
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleModal #services-content .qs-book-service-card.has-qty
    :is(.svc-qty, .svc-qty__btn, .svc-qty__count, .svc-qty__btn:not(:disabled):hover) {
    background-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount :is(.qs-bill-discount, .modal-content) {
    background-color: var(--pos-surface);
  }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount .qs-bill-discount__segment button[aria-checked="true"],
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount .qs-bill-discount__presets button[aria-pressed="true"] {
    background-color: var(--pos-primary-soft);
    color: var(--pos-primary-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount .qs-bill-discount__presets button[aria-pressed="true"] small { color: var(--pos-primary-text); }
  html[data-pos-ui] #quickSaleDiscount .qs-bill-discount__apply:not(:disabled) { background-color: var(--pos-primary-fill); color: var(--pos-primary-fill-ink); }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount .qs-bill-discount__apply:disabled {
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
  }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount .qs-bill-discount__pad button { background-color: var(--pos-surface2); }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount .qs-bill-discount__pad button:hover {
    background-color: color-mix(in srgb, var(--pos-text) 8%, var(--pos-surface2));
  }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount .qs-bill-discount__pad button:active {
    background-color: color-mix(in srgb, var(--pos-text) 14%, var(--pos-surface2));
  }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleDiscount .qs-bill-discount__pad .qs-bill-discount__clear {
    background-color: color-mix(in srgb, #C2410C 18%, var(--pos-surface));
    color: #FDBA74;
  }
  html[data-pos-ui] .qs-custom-price-modal {
    --cp-green: var(--pos-primary);
    --cp-green-dark: var(--pos-primary-text);
    --cp-soft: var(--pos-primary-soft);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-custom-price-modal {
    --cp-surface: var(--pos-surface);
    --cp-surface-2: var(--pos-surface2);
    --cp-key: var(--pos-surface2);
    --cp-key-hover: color-mix(in srgb, var(--pos-text) 8%, var(--pos-surface2));
    --cp-key-pressed: color-mix(in srgb, var(--pos-text) 14%, var(--pos-surface2));
    --cp-ink: var(--pos-text);
    --cp-ink-2: var(--pos-muted);
    --cp-muted: var(--pos-muted);
    --cp-line: var(--pos-border);
    --cp-green: var(--pos-primary);
    --cp-green-dark: var(--pos-primary-text);
    --cp-soft: var(--pos-primary-soft);
    --cp-warn: #FDBA74;
    --cp-warn-soft: color-mix(in srgb, #C2410C 18%, var(--pos-surface));
    --cp-danger: #FF6B7A;
  }
  html[data-pos-ui] :is(.qs-custom-price .qs-custom-price__submit:not(:disabled),
    .qs-extra .qs-extra__submit:not(:disabled), .qs-extra__price[aria-pressed="true"] .qs-extra__tag) {
    background-color: var(--pos-primary-fill);
    color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui][data-pos-appearance=dark] .gcsell-code-row {
    background-color: var(--pos-surface);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .gcsell-code-row :is(.gc-code-input, .gcsell-code-input) { background-color: transparent; }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-pick, .qs-pick__chair, .qs-pick__none, .qs-pick__btn, .qs-pick__dot) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-pick__foot, .qs-pick__hidden, .qs-pick__x:hover, .qs-pick__btn:hover) {
    background-color: var(--pos-surface2);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-pick__search { border-color: var(--pos-border); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-pick__search input { background-color: transparent; color: var(--pos-text); }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-pick__sub, .qs-pick__x, .qs-pick__tab, .qs-pick__tab small,
    .qs-pick__chair small, .qs-pick__empty, .qs-pick__legend) { color: var(--pos-muted); }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-pick__chair.is-booked, .qs-pick__dot.is-booked) {
    border-color: color-mix(in srgb, #C2570A 55%, var(--pos-surface));
    background-color: color-mix(in srgb, #C2570A 16%, var(--pos-surface));
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-pick__chair.is-sel, .qs-pick__dot.is-sel, .qs-pick__btn--primary) {
    border-color: var(--pos-primary-fill);
    background-color: var(--pos-primary-fill);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-pick__btn--primary:disabled {
    border-color: var(--pos-border);
    background-color: var(--pos-surface2);
    color: var(--pos-muted);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-pick__none {
    border-color: color-mix(in srgb, #F04438 55%, var(--pos-surface));
    color: #FDA29B;
  }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-container .swal2-popup:is(.swal2-popup-remove-discount, .swal2-popup-remove-service) {
    --qs-remove-accent-soft: color-mix(in srgb, #EC526B 16%, var(--pos-surface));
    --qs-remove-ink: var(--pos-text);
    --qs-remove-muted: var(--pos-muted);
    /* sweetalert2.min.css forces .swal2-modal white with !important. */
    background: var(--pos-surface) !important;
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-remove-discount__copy h3 { color: var(--pos-text); }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-remove-discount__copy p, .qs-remove-discount__hint) { color: var(--pos-muted); }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-remove-svc__card, .qs-remove-discount__badge, .qs-remove-discount__icon) {
    border-color: var(--pos-border);
    background-color: var(--qs-remove-accent-soft);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-remove-svc__card { background-color: var(--pos-surface2); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-remove-discount__icon > i { border-color: var(--pos-surface); }
  html[data-pos-ui][data-pos-appearance=dark] .swal2-popup-remove-discount .qs-remove-discount__cancel {
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] .swal2-popup-remove-discount .qs-remove-discount__cancel:hover { background-color: var(--pos-surface2); }
  html[data-pos-ui][data-pos-appearance=dark] :is(.mobile-modal .modal-header, .qs-print-more-btn) {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark]
    :is(.sidebar-content, .pos-container-mobile .filter-tags, .mobile-modal .filter-tags) > .category-btn:is(.active, .tag-active) {
    background-color: var(--pos-primary-soft);
  }
  /* confirmDialog() popups (.sc-confirm, e.g. "Close ticket early?") — sweetalert-mobile.css paints a light
     shell and sweetalert2.min.css forces the modal white with !important. */
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) {
    --scc-tint: #30981C;
    background: var(--pos-surface) !important;
    color: var(--pos-text);
    border-color: var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup.sc-confirm--warning { --scc-tint: #E8A23B; }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup.sc-confirm--danger { --scc-tint: #E5484D; }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) :is(.swal2-title, .swal2-html-container) {
    background: transparent;
  }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) .swal2-title { color: var(--pos-text); }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) .swal2-html-container { color: var(--pos-muted); }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) .swal2-icon {
    background: color-mix(in srgb, var(--scc-tint) 18%, var(--pos-surface));
    color: color-mix(in srgb, var(--scc-tint) 70%, #FFFFFF);
  }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) .swal2-close { color: var(--pos-muted); }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) .swal2-close:hover {
    background: var(--pos-surface2) !important;
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) .swal2-actions {
    border-top-color: var(--pos-border);
    background: var(--pos-surface2);
  }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) .swal2-actions > .swal2-cancel {
    border-color: var(--pos-border);
    background: var(--pos-surface);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] body .swal2-popup:is(.sc-confirm, .sc-group-confirm) .swal2-actions > .swal2-cancel:hover {
    border-color: color-mix(in srgb, var(--pos-border) 60%, var(--pos-text));
    background: var(--pos-surface2);
  }
  /* Quick Sale client card — quickSale.css hardcodes #1a2328 / #334155 ink. */
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-client-full-name, .qs-client-phone-full, .qs-client-time-display,
    .qs-client-stat-value:not(.qs-client-stat-value--spend)) { color: var(--pos-text); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-client-stat-label { color: var(--pos-muted); }
  /* Loading overlays — QuickSale.showLoading ("Processing credit card payment...", "Initializing QuickSale...")
     and the other screens that paint a translucent white veil while they load. */
  html[data-pos-ui][data-pos-appearance=dark] .qs-loading-overlay { background: color-mix(in srgb, var(--pos-surface) 94%, transparent); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-inline-loading { background: color-mix(in srgb, var(--pos-surface) 92%, transparent); }
  html[data-pos-ui][data-pos-appearance=dark] .qs-loading-content .qs-card-cancel-btn {
    border-color: color-mix(in srgb, #E5484D 45%, var(--pos-surface));
    background: var(--pos-surface);
    color: #FF8A8E;
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-loading-content .qs-card-cancel-btn:hover {
    border-color: color-mix(in srgb, #E5484D 65%, var(--pos-surface));
    background: color-mix(in srgb, #E5484D 16%, var(--pos-surface));
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.modal-body.loading, .tab-panel.loading)::before,
  html[data-pos-ui][data-pos-appearance=dark] .modal-content-area-loading-overlay {
    background: color-mix(in srgb, var(--pos-surface) 75%, transparent);
  }
  html[data-pos-ui][data-pos-appearance=dark] .ct-receipt-loading { background: var(--pos-surface); color: var(--pos-muted); }
  /* Quick Sale Combine footer — _QuickSale.cshtml and _renderCombineFooter() set these colours inline. */
  html[data-pos-ui][data-pos-appearance=dark] .footer-ticket-combine {
    background-color: var(--pos-surface) !important;
    border-color: var(--pos-border) !important;
    box-shadow: 0 -2px 8px rgb(0 0 0 / 35%) !important;
  }
  html[data-pos-ui][data-pos-appearance=dark] .footer-ticket-combine .btn-combine-cancel {
    background: var(--pos-surface2) !important;
    color: var(--pos-text) !important;
    box-shadow: inset 0 0 0 1px var(--pos-border);
  }
  html[data-pos-ui][data-pos-appearance=dark] .footer-ticket-combine .btn-combine-execute:disabled {
    background: var(--pos-surface2) !important;
    color: var(--pos-muted) !important;
  }
  /* Ticket photos dialog — styles injected by CustomQuickSale.ticketPhotos._injectStyle(). */
  html[data-pos-ui][data-pos-appearance=dark] .qs-photos__cell {
    border-color: var(--pos-border);
    background: var(--pos-surface2);
  }
  html[data-pos-ui][data-pos-appearance=dark] .qs-photos__add {
    border-color: var(--pos-border);
    background: var(--pos-surface);
    color: var(--pos-text);
  }
  html[data-pos-ui][data-pos-appearance=dark] :is(.qs-photos__hint, .qs-photos__empty) { color: var(--pos-muted); }
  /* More menu (header grid button) — more-menu.css hardcodes a light shell and relies on shadows. */
  html[data-pos-ui][data-pos-appearance=dark] .more-menu-popup {
    --more-tone-configuration: #8C9AB0;
    --more-menu-surface-shadow: 0 0 0 1px color-mix(in srgb, var(--pos-border) 70%, var(--pos-surface));
    color-scheme: dark;
    background: var(--pos-canvas);
    color: var(--pos-text);
    border-color: var(--pos-border);
    box-shadow: 0 16px 48px rgb(0 0 0 / 55%), 0 2px 8px rgb(0 0 0 / 40%);
  }
  html[data-pos-ui][data-pos-appearance=dark] .more-menu-popup .more-menu-search { background: var(--pos-surface2); }
  html[data-pos-ui][data-pos-appearance=dark] .more-menu-popup .more-menu-search input {
    background: transparent;
    border: 0;
  }
  html[data-pos-ui][data-pos-appearance=dark] .more-menu-popup :is(
    .more-menu-row:hover, .more-menu-pinned-list .more-menu-action:hover,
    .more-menu-pin[aria-pressed="true"], .more-menu-pin:not(:disabled):hover) { background: var(--pos-surface2); }
  html[data-pos-ui][data-pos-appearance=dark] .more-menu-popup :is(
    .more-menu-account .more-menu-action:hover, .more-menu-close:hover) { background: var(--pos-surface); }
  html[data-pos-ui][data-pos-appearance=dark] .more-menu-popup .more-menu-action .setting-icon-container {
    background: var(--pos-surface2) !important;
  }
  /* Team (team.css + team.magic.css) — light colours are written as var(--tm-d-*, <light>);
     only Dark defines these, so Light keeps every original value. */
  html[data-pos-ui][data-pos-appearance=dark] {
    --tm-d-surface: var(--pos-surface);
    --tm-d-surface2: var(--pos-surface2);
    --tm-d-line: var(--pos-border);
    --tm-d-text: var(--pos-text);
    --tm-d-muted: var(--pos-muted);
    --tm-d-faint: color-mix(in srgb, var(--pos-muted) 78%, var(--pos-surface));
    --tm-d-green-soft: color-mix(in srgb, #4AB72E 16%, var(--pos-surface));
    --tm-d-green-line: color-mix(in srgb, #4AB72E 45%, var(--pos-surface));
    --tm-d-green-text: #7FD46A;
    --tm-d-teal-soft: color-mix(in srgb, #14B8C4 16%, var(--pos-surface));
    --tm-d-teal-text: #5FD4DE;
    --tm-d-blue-soft: color-mix(in srgb, #3B82F6 18%, var(--pos-surface));
    --tm-d-blue-line: color-mix(in srgb, #3B82F6 50%, var(--pos-surface));
    --tm-d-blue-text: #8DB8F5;
    --tm-d-amber-soft: color-mix(in srgb, #E8A23B 16%, var(--pos-surface));
    --tm-d-amber-line: color-mix(in srgb, #E8A23B 45%, var(--pos-surface));
    --tm-d-amber-text: #F2B866;
    --tm-d-orange-soft: color-mix(in srgb, #F38744 16%, var(--pos-surface));
    --tm-d-orange-line: color-mix(in srgb, #F38744 45%, var(--pos-surface));
    --tm-d-orange-text: #F7A26B;
    --tm-d-red-soft: color-mix(in srgb, #E5484D 16%, var(--pos-surface));
    --tm-d-red-line: color-mix(in srgb, #E5484D 45%, var(--pos-surface));
    --tm-d-red-text: #FF8A8E;
    --tm-d-purple-soft: color-mix(in srgb, #9789D4 18%, var(--pos-surface));
    --tm-d-on-brand: var(--pos-primary-ink);
  }
  /* Manage Tips (manageTips.css) — every colour is a token on .mt, so Dark only swaps tokens. */
  html[data-pos-ui][data-pos-appearance=dark] .mt {
    --mt-bg: var(--pos-surface);
    --mt-panel: var(--pos-canvas);
    --mt-seg: var(--pos-surface2);
    --mt-seg-2: var(--pos-surface2);
    --mt-line: var(--pos-border);
    --mt-line-2: var(--pos-border);
    --mt-hover-line: color-mix(in srgb, var(--pos-muted) 60%, var(--pos-border));
    --mt-text: var(--pos-text);
    --mt-muted: var(--pos-muted);
    --mt-faint: color-mix(in srgb, var(--pos-muted) 70%, var(--pos-surface));
    --mt-accent-ink: var(--pos-primary-ink);
    --mt-accent-soft: var(--pos-primary-soft);
    --mt-accent-text: var(--pos-primary-text);
    --mt-total-bg: var(--pos-canvas);
    --mt-total-ink: var(--pos-text);
    --mt-total-muted: var(--pos-muted);
    --mt-key: var(--pos-surface2);
    --mt-key-edge: color-mix(in srgb, #000 35%, var(--pos-surface2));
    --mt-danger: #FF8A8E;
    --mt-danger-soft: color-mix(in srgb, #E5484D 16%, var(--pos-surface));
    --mt-danger-edge: color-mix(in srgb, #E5484D 30%, var(--pos-surface));
    --mt-warn: #F2B866;
    --mt-warn-soft: color-mix(in srgb, #E8A23B 16%, var(--pos-surface));
    --mt-ok: #7FD46A;
    --mt-ok-soft: color-mix(in srgb, #4AB72E 16%, var(--pos-surface));
    --mt-foot: var(--pos-surface2);
    --mt-disabled-bg: var(--pos-surface2);
    --mt-disabled-ink: var(--pos-muted);
    --mt-shadow: none;
  }
  html[data-pos-ui][data-pos-appearance=dark] .mt-tone-0 { --tone: #7FD46A; --tone-bg: color-mix(in srgb, #4AB72E 20%, var(--pos-surface)); }
  html[data-pos-ui][data-pos-appearance=dark] .mt-tone-1 { --tone: #8DB8F5; --tone-bg: color-mix(in srgb, #3B82F6 22%, var(--pos-surface)); }
  html[data-pos-ui][data-pos-appearance=dark] .mt-tone-2 { --tone: #F7A26B; --tone-bg: color-mix(in srgb, #F38744 20%, var(--pos-surface)); }
  html[data-pos-ui][data-pos-appearance=dark] .mt-tone-3 { --tone: #B9AEF0; --tone-bg: color-mix(in srgb, #9789D4 22%, var(--pos-surface)); }
  html[data-pos-ui][data-pos-appearance=dark] .mt-tone-4 { --tone: #5FD4DE; --tone-bg: color-mix(in srgb, #14B8C4 20%, var(--pos-surface)); }
  html[data-pos-ui][data-pos-appearance=dark] .mt-tone-5 { --tone: #F08DB4; --tone-bg: color-mix(in srgb, #E5578F 20%, var(--pos-surface)); }
  html[data-pos-ui][data-pos-appearance=dark] .mt-staff-item:hover { border-color: var(--mt-hover-line); }
  html[data-pos-ui][data-pos-appearance=dark] .mt-seg-btn.is-on,
  html[data-pos-ui][data-pos-appearance=dark] .mt-unit button.is-on { box-shadow: none; }
  html[data-pos-ui][data-pos-appearance=dark] #quickSaleTip .modal-content:has(.mt) { box-shadow: 0 0 0 1px var(--pos-border); }
  /* Salon Map (.sm + Quick Sale chair field) — sm-*.css write their light colours as
     var(--sm-d-*, <light>), so only Dark defines these. Plan/tone colours are swapped in seatMap.js. */
  html[data-pos-ui][data-pos-appearance=dark] {
    --sm-d-surface: var(--pos-surface);
    --sm-d-surface2: var(--pos-surface2);
    --sm-d-canvas: var(--pos-canvas);
    --sm-d-line: var(--pos-border);
    --sm-d-text: var(--pos-text);
    --sm-d-muted: var(--pos-muted);
    --sm-d-faint: color-mix(in srgb, var(--pos-muted) 78%, var(--pos-surface));
    --sm-d-on-brand: var(--pos-primary-ink);
    --sm-d-green-soft: color-mix(in srgb, #4AB72E 16%, var(--pos-surface));
    --sm-d-green-line: color-mix(in srgb, #4AB72E 45%, var(--pos-surface));
    --sm-d-green-text: #7FD46A;
    --sm-d-amber-soft: color-mix(in srgb, #E8A23B 16%, var(--pos-surface));
    --sm-d-amber-line: color-mix(in srgb, #E8A23B 45%, var(--pos-surface));
    --sm-d-amber-text: #F2B866;
    --sm-d-red-soft: color-mix(in srgb, #E5484D 16%, var(--pos-surface));
    --sm-d-red-line: color-mix(in srgb, #E5484D 45%, var(--pos-surface));
    --sm-d-red-text: #FF8A8E;
    --sm-d-blue-soft: color-mix(in srgb, #2F6FB5 22%, var(--pos-surface));
    --sm-d-blue-line: color-mix(in srgb, #2F6FB5 50%, var(--pos-surface));
    --sm-d-blue-text: #8DB8EA;
    --sm-d-purple-soft: color-mix(in srgb, #9789D4 18%, var(--pos-surface));
    --sm-d-purple-text: #B9AEF0;
    --sm-d-orange-soft: color-mix(in srgb, #F38744 16%, var(--pos-surface));
    --sm-d-orange-line: color-mix(in srgb, #F38744 45%, var(--pos-surface));
    --sm-d-orange-text: #F7A26B;
  }
  html[data-pos-ui][data-pos-appearance=dark] .sm {
    --sm-brand: var(--pos-primary);
    --sm-brand-dark: var(--pos-primary-text);
    --sm-brand-soft: var(--pos-primary-soft);
    --sm-ink: var(--pos-text);
    --sm-text: var(--pos-text);
    --sm-sub: var(--pos-muted);
    --sm-muted: var(--pos-muted);
    --sm-faint: color-mix(in srgb, var(--pos-muted) 78%, var(--pos-surface));
    --sm-line: var(--pos-border);
    --sm-line2: var(--pos-border);
    --sm-line-soft: color-mix(in srgb, var(--pos-border) 55%, var(--pos-surface));
    --sm-bg: var(--pos-canvas);
    --sm-surface: var(--pos-surface);
    --sm-amber-text: #F2B866;
    color-scheme: dark;
  }
  html[data-pos-ui] .pos-theme-notice {
    position: fixed; left: 50%; bottom: 42px; z-index: 11000; transform: translateX(-50%);
    display: flex; align-items: center; gap: 16px; max-width: min(760px, calc(100vw - 24px));
    padding: 12px 16px; border: 1px solid var(--pos-border); border-radius: 8px;
    background: var(--pos-surface); color: var(--pos-text); font: 12px/1.6 "Sora", sans-serif;
    box-shadow: 0 4px 20px #00000024;
    display: none;
  }
  html[data-pos-ui] .pos-theme-notice button { border: 0; padding: 4px; background: transparent; color: var(--pos-primary-text); font: inherit; cursor: pointer; }
  /* Card On File (cardOnFile.css) — every colour is a token, so Dark only swaps tokens. */
  html[data-pos-ui][data-pos-appearance=dark] .cof-popup {
    --cof-border: var(--pos-border);
    --cof-surface: var(--pos-surface2);
    --cof-text: var(--pos-text);
    --cof-accent: var(--pos-primary-text);
    --cof-deposit-bg: color-mix(in srgb, #30A46C 22%, var(--pos-surface));
    --cof-deposit-text: #6FD3A2;
    --cof-default-bg: var(--pos-surface);
    --cof-default-text: var(--pos-muted);
  }
  /* Close Bill receipt (#closeTicket, quickSaleModal.css) — hardcodes a fixed green (#2f6b3a) and
     light neutrals, so neither the preset colour nor Dark reached it. Screen only (print keeps the
     paper look) and not the thermal preview, which is a black-on-white paper simulation. */
  html[data-pos-ui] #closeTicket .ticket-receipt-container { background: var(--pos-canvas) !important; }
  html[data-pos-ui] #closeTicket :is(.tr-receipt-view-bar, .tr-receipt-view-switch) {
    background: var(--pos-surface); border-color: var(--pos-border); color: var(--pos-muted);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-view-bar { background: var(--pos-canvas); }
  html[data-pos-ui] #closeTicket .tr-receipt-view-switch button { color: var(--pos-text); }
  html[data-pos-ui] #closeTicket .tr-receipt-view-switch button.is-active {
    background: var(--pos-primary-fill); color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-view-switch button:focus-visible { outline-color: var(--pos-primary); }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) {
    background: var(--pos-surface); color: var(--pos-text);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) :is(
    .tr-store-name, .tr-meta-value, .tr-item-name, .tr-summary-row, .tr-total-row > span:first-child,
    .tr-footer-box p, .tr-summary-outstanding span, .tr-paid-method strong, .tr-col-qty, .tr-col-amt) {
    color: var(--pos-text);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) :is(
    .tr-contact-line, .tr-meta-label, .tr-items-table-head, .tr-item-tech, .tr-section-title,
    .tr-summary-label small, .tr-summary-value s, .tr-price-note, .tr-footer-box small,
    .tr-paid-label, .tr-receipt-date) {
    color: var(--pos-muted);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) :is(
    .tr-paid-amount, .tr-points-earned, .tr-summary-discount .tr-summary-value, .tr-summary-tip .tr-summary-value,
    .tr-total-row > span:last-child, .tr-savings .tr-icon) {
    color: var(--pos-primary-text);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) :is(.tr-paid-summary, .tr-savings) {
    background: var(--pos-primary-soft);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) .tr-paid-badge {
    background: var(--pos-primary-fill); color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) .tr-summary-section {
    background: var(--pos-surface2);
  }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) :is(
    .tr-meta-grid, .tr-summary-services-total, .tr-summary-outstanding) { border-color: var(--pos-border); }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) :is(
    .tr-items-table-head, .tr-item-row, .tr-payment-section, .tr-total-row) { border-color: var(--pos-border); }
  html[data-pos-ui] #closeTicket .tr-receipt-redesign:not([data-receipt-view="thermal"]) .tr-summary-outstanding.is-due span {
    color: var(--pos-warn-ink, #b45309);
  }
  /* Floating action bar (Send Receipt / Print / Edit / Exit). Exit keeps its red. */
  html[data-pos-ui] #closeTicket.close-ticket-modal .group-btn-left-side-popup { background: color-mix(in srgb, var(--pos-surface) 96%, transparent); }
  html[data-pos-ui] #closeTicket.close-ticket-modal .group-btn-left-side-popup .btn-left-side {
    background: var(--pos-surface); color: var(--pos-primary-text);
  }
  html[data-pos-ui] #closeTicket.close-ticket-modal .group-btn-left-side-popup .btn-left-side p { color: var(--pos-muted); }
  html[data-pos-ui] #closeTicket.close-ticket-modal .group-btn-left-side-popup .btn-left-side:hover { background: var(--pos-primary-soft); }
  html[data-pos-ui] #closeTicket.close-ticket-modal .group-btn-left-side-popup .btn-left-side:hover p { color: var(--pos-primary-text); }
  /* Exit also carries .btn-left-side, so the surface rules above would paint it like the
     bar and merge it into the form: give it the theme's solid fill instead. */
  html[data-pos-ui] #closeTicket.close-ticket-modal .group-btn-left-side-popup .btn-close-popover {
    background: var(--pos-primary-fill); color: var(--pos-primary-fill-ink);
  }
  html[data-pos-ui] #closeTicket.close-ticket-modal .group-btn-left-side-popup .btn-close-popover .tr-icon-exit { color: var(--pos-primary-fill-ink); }
  html[data-pos-ui] #closeTicket.close-ticket-modal .group-btn-left-side-popup .btn-close-popover:hover { background: var(--pos-primary-fill-hover); }
}
@media print {
  html[data-pos-ui] { color-scheme: light !important; }
  .pos-theme-notice { display: none !important; }
}