/* Apply active theme tokens consistently to dialogs and their nested data views. */
html[data-theme] {
  --ayec-slate-bg: var(--bg);
  --ayec-slate-panel: var(--surface);
  --ayec-slate-raised: var(--surface-2);
  --ayec-slate-line: var(--line);
  --ayec-slate-ink: var(--ink);
  --ayec-slate-muted: var(--muted);
  --surface-alt: var(--surface-2);
  --text-primary: var(--ink);
  --text-muted: var(--muted);
  --border-color: var(--line);
  --ayec-theme-bg: var(--bg);
  --ayec-theme-surface: var(--surface);
  --ayec-theme-surface-2: var(--surface-2);
  --ayec-theme-ink: var(--ink);
  --ayec-theme-muted: var(--muted);
  --ayec-theme-line: var(--line);
}

html[data-theme] .app-shell > .sidebar {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] .sidebar .brand,
html[data-theme] .sidebar .sidebar-bottom {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] .sidebar .nav-group-title {
  color: var(--muted) !important;
}

html[data-theme] .sidebar .nav-button,
html[data-theme] .sidebar .nav-parent,
html[data-theme] .sidebar .submenu .nav-button {
  color: var(--ink);
}

html[data-theme] .sidebar .nav-button:hover,
html[data-theme] .sidebar .nav-parent.open,
html[data-theme] .sidebar .nav-parent.active,
html[data-theme] .sidebar #nav > .nav-parent.open {
  border-color: var(--line) !important;
  background: var(--hover) !important;
  color: var(--ink) !important;
}

html[data-theme] .sidebar .nav-button.active,
html[data-theme] .sidebar .submenu .nav-button.active {
  background-color: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
}

html[data-theme] .sidebar .submenu {
  border-color: var(--line) !important;
  background: transparent !important;
}

html[data-theme] .sidebar .submenu .nav-button.active {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
  box-shadow: inset 3px 0 var(--brand-2) !important;
}

html[data-theme] dialog[open] {
  color-scheme: inherit;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  --surface-alt: var(--surface-2);
  --text-primary: var(--ink);
  --text-muted: var(--muted);
  --border-color: var(--line);
}

html[data-theme] dialog[open] > form,
html[data-theme] dialog[open] > form > header,
html[data-theme] dialog[open] > form > .dialog-body,
html[data-theme] dialog[open] > form > #dialogBody,
html[data-theme] dialog[open] > form > footer,
html[data-theme] dialog[open] > #dialogBody,
html[data-theme] dialog[open] > #dialogFooter {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog[open] :is(h1, h2, h3, h4, strong, label, legend, p, li, dt, dd) {
  color: inherit;
}

html[data-theme] dialog[open] :is(.card, .panel, .section-card, .form-card, .dialog-panel, .modal-panel, .service-form-card, .customer-editor-section, .settings-group, .settings-card) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog[open] :is(.card, .panel, .section-card, .form-card, .dialog-panel, .modal-panel, .service-form-card, .customer-editor-section, .settings-group, .settings-card) :is(h1, h2, h3, h4, strong, legend, label, p, li, dt, dd) {
  color: inherit;
}

html[data-theme] dialog[open] :is(.muted, small, .eyebrow, dt, .field > label) {
  color: var(--muted);
}

html[data-theme] dialog[open] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog[open] :is(.table-wrap, table, tbody tr, td) {
  border-color: var(--line);
  background-color: var(--surface);
  color: var(--ink);
}

html[data-theme] dialog[open] :is(th, thead th) {
  border-color: var(--line);
  background-color: var(--surface-2);
  color: var(--ink);
}

html[data-theme] dialog[open] tbody tr:nth-child(even) {
  background-color: var(--surface-2);
}

html[data-theme] dialog.c360-dialog,
html[data-theme] dialog.c360-dialog > form,
html[data-theme] dialog.c360-dialog > form > header,
html[data-theme] dialog.c360-dialog .dialog-body,
html[data-theme] dialog.c360-dialog footer {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.c360-dialog :is(.c360-title-row h2, .c360-stat strong, .c360-currencies strong) {
  color: var(--ink) !important;
}

html[data-theme] dialog.c360-dialog :is(.c360-code, .c360-profile p, .c360-stat small, .c360-tabs .tab, .c360-panel th) {
  border-color: var(--line);
  color: var(--muted) !important;
}

html[data-theme] dialog.c360-dialog .c360-profile-state {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
}

html[data-theme] dialog.c360-dialog :is(.c360-stat, .c360-currencies > div, .c360-panel, .c360-panel .table-wrap, .c360-panel th, .c360-panel td, .c360-dialog .empty-state) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.c360-dialog .c360-panel tbody tr:nth-child(even) {
  background-color: var(--surface) !important;
}

html[data-theme] dialog.c360-dialog .c360-stat > span {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
}

html[data-theme] dialog.c360-dialog .c360-debt {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line)) !important;
  background: color-mix(in srgb, var(--warn) 8%, var(--surface)) !important;
}

html[data-theme] dialog.c360-dialog .c360-debt :is(small, strong),
html[data-theme] dialog.c360-dialog .c360-debt > span {
  color: var(--warn) !important;
}

html[data-theme] dialog.c360-dialog .c360-tabs .tab.active {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #fff !important;
}

html[data-theme] #appDialog.customer-editor-dialog .customer-editor-section {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.customer-editor-dialog .customer-editor-section h3 {
  color: var(--ink) !important;
}

/* Keep the service intake wizard readable when theme colors change. */
html[data-theme] #appDialog.service-accept-dialog #dialogTitle {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog #dialogEyebrow {
  color: var(--muted) !important;
}

html[data-theme] #appDialog.service-accept-dialog #dialogBody,
html[data-theme] #appDialog.service-accept-dialog .service-form-card {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(h1, h2, h3, h4, strong, legend, .field > label) {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(p, small, .muted, .service-form-card-head > span) {
  color: var(--muted) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface)) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(input, textarea)::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(button:not(.primary):not(.active), .service-pattern-box) {
  border-color: var(--line);
  color: var(--ink);
}

/* Normalize deeply nested dark-only widgets inside the service intake dialog. */
html[data-theme] #appDialog.service-accept-dialog :is(.service-form-security, .service-pattern-box, .service-password-fields .field, .service-accessories > label, .service-form-photo, .service-photo-drop, .service-extra-fields, .service-device-extra-fields) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-form-security, .service-pattern-box, .service-accessories, .service-form-photo, .service-extra-fields) :is(h1, h2, h3, h4, strong, label, span, small, p) {
  color: inherit;
}

/* Customer Notes was authored as a fixed midnight-only dialog. */
html[data-theme] dialog.customer-notes-dialog,
html[data-theme] dialog.customer-notes-dialog :is(form, header, .dialog-body, footer, .customer-notes-toolbar, .customer-notes-layout, .customer-notes-history, .customer-notes-history header, .customer-notes-editor, .customer-note-formatbar, .customer-note-card, .customer-note-rich, .customer-note-editor-foot) {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.customer-notes-dialog :is(.customer-note-formatbar, .customer-note-card, .customer-note-rich) {
  background-color: var(--surface-2) !important;
}

html[data-theme] dialog.customer-notes-dialog :is(.customer-note-formatbar select, .customer-note-formatbar [data-cnote-font], footer select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface-2)) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.customer-notes-dialog :is(.customer-note-category-label, #customerNoteUpdated, .customer-note-heading small, .customer-note-editor-foot, .customer-note-card span, .customer-note-card small, .customer-note-rich:empty)::before {
  color: var(--muted) !important;
}

html[data-theme] dialog.customer-notes-dialog .customer-note-formatbar button:not(:hover) {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-sidebar,
html[data-theme] body[data-page="settings"] .settings-content,
html[data-theme] body[data-page="settings"] .settings-unsupported-card,
html[data-theme] body[data-page="settings"] .settings-unsupported-list > div {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-unsupported-card :is(h2, h3, strong) { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"] .settings-unsupported-card :is(p, span) { color: var(--muted) !important; }

/* Theme-sensitive settings modules have their own legacy midnight surfaces. */
html[data-theme] body[data-page="settings"] .settings-content:has(.autonomous-reference),
html[data-theme] body[data-page="settings"] .settings-content:has(.messaging-reference),
html[data-theme] body[data-page="settings"] .settings-content:has(.p9-sms-provider),
html[data-theme] body[data-page="settings"] .settings-content:has(.p9-telegram),
html[data-theme] body[data-page="settings"] .settings-content:has(.p9-smtp) {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content :is(.autonomous-card, .autonomous-runtime-states article, .autonomous-rule, .autonomous-fields .field, .messaging-ref-card, .messaging-ref-status-strip article, .messaging-ref-notice, .messaging-ref-policy, .messaging-ref-mode-tabs, .messaging-ref-fields .field, .messaging-ref-switch .setting, .p9-sms-card, .p9-sms-loop-section, .p9-sms-metrics article, .p9-telegram-card, .p9-smtp-card, .voice-reference-card, .identity-section, .identity-toggle, .tax-exchange-card) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface-2)) !important;
  color: var(--ink) !important;
}

/* Common custom dialog panels use fixed dark backgrounds in older modules. */
html[data-theme] dialog[open] :is([class*="-card"], [class*="-panel"], [class*="-section"], [class*="-editor"], [class*="-history"], [class*="-toolbar"]) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] .service-board-kanban {
  grid-template-columns: repeat(7, minmax(190px, 1fr));
  overflow-x: auto;
}

html[data-theme] #content :is(.service-board-lane, .service-board-card, .service-board-summary article) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] .service-board-card[draggable="true"] { cursor: grab; }
html[data-theme] .service-board-card.is-dragging { opacity: .45; cursor: grabbing; }
html[data-theme] .service-board-lane.is-drop-target {
  outline: 2px dashed var(--brand);
  outline-offset: -3px;
  background-color: color-mix(in srgb, var(--brand) 10%, var(--surface)) !important;
}
html[data-theme] .service-board-card.is-moving { opacity: .55; pointer-events: none; }

/* Apply theme surfaces to custom page panels across the complete web app. */
html[data-theme] #content :is([class*="-card"], [class*="-panel"], [class*="-section"]):not([class*="status"]):not([class*="badge"]):not([class*="alert"]):not([class*="metric"]):not(button) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #content :is(.card, .panel, .section-card, .form-card, .settings-card) {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] #content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface)) !important;
  color: var(--ink) !important;
}

html[data-theme] #content :is([class*="-card"], [class*="-panel"], [class*="-section"]):not([class*="status"]):not([class*="badge"]):not([class*="metric"]) :is(h1, h2, h3, h4, label, legend, dt, dd) {
  color: var(--ink) !important;
}

html[data-theme] #content :is([class*="-card"], [class*="-panel"], [class*="-section"]):not([class*="status"]):not([class*="badge"]):not([class*="metric"]) :is(small, .muted, .eyebrow) {
  color: var(--muted) !important;
}

html[data-theme] body[data-page="partners"] {
  --bg: var(--ayec-theme-bg) !important;
  --surface: var(--ayec-theme-surface) !important;
  --surface-2: var(--ayec-theme-surface-2) !important;
  --ink: var(--ayec-theme-ink) !important;
  --muted: var(--ayec-theme-muted) !important;
  --line: var(--ayec-theme-line) !important;
  background-color: var(--ayec-theme-bg) !important;
  color: var(--ayec-theme-ink) !important;
}

html[data-theme] .service-list-ref {
  --sl-bg: var(--ayec-theme-bg) !important;
  --sl-panel: var(--ayec-theme-surface) !important;
  --sl-panel-2: var(--ayec-theme-surface-2) !important;
  --sl-line: var(--ayec-theme-line) !important;
  --sl-ink: var(--ayec-theme-ink) !important;
  --sl-muted: var(--ayec-theme-muted) !important;
  color: var(--ayec-theme-ink) !important;
}

html[data-theme] .service-list-ref :is(.service-list-heading, .service-list-filters, .service-list-quick-actions, .service-list-table-wrap, .service-list-metric, .service-list-tab, .service-list-metric-icon, .service-list-tab b, .service-list-table th) {
  border-color: var(--ayec-theme-line) !important;
  background-color: var(--ayec-theme-surface-2) !important;
  color: var(--ayec-theme-ink) !important;
}

html[data-theme] .field-map-canvas,
html[data-theme] .field-map-queue,
html[data-theme] .field-map-metrics article,
html[data-theme] .field-map-canvas > header,
html[data-theme] .field-map-canvas > footer,
html[data-theme] .field-map-empty {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] .p9-transaction-detail header {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
}

html[data-theme] .p9-transaction-detail header span,
html[data-theme] .p9-transaction-detail dt {
  color: var(--muted) !important;
}

html[data-theme] .p9-transaction-detail header strong {
  color: var(--success) !important;
}

html[data-theme] .p9-transaction-detail dd {
  color: var(--ink) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] dialog[open],
  html[data-theme] dialog[open] :is(header, .dialog-body, #dialogBody, footer, .table-wrap, tbody tr) {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
}

/* Theme-aware neutral controls and the company-settings preview surfaces. */
html[data-theme] :is(#app button:not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"]):not([data-kind]), button.secondary, button.ghost, button.icon-btn, .settings-content button:not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"]), #appDialog button:not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"])) {
  color: var(--ink) !important;
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] :is(#app button:not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"]):not([data-kind]), button.secondary, button.ghost, button.icon-btn, .settings-content button:not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"]), #appDialog button:not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"])):hover {
  color: var(--ink) !important;
  background-color: var(--hover) !important;
  border-color: var(--brand) !important;
}

html[data-theme] #app button.active:not(.primary):not(.danger):not(.success):not(.warning):not([class*="status"]) {
  color: var(--brand) !important;
  background-color: color-mix(in srgb, var(--brand) 13%, var(--surface)) !important;
  border-color: var(--brand) !important;
}

html[data-theme] :is(.company-reference-profile, .company-reference-summary, .company-reference-section, .company-reference-visual-card, .company-reference-fields .setting, .company-reference-map, .company-reference-map-marker b, .company-reference-wallpaper-setting input) {
  color: var(--ink) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
}

html[data-theme] :is(.company-reference-logo, .company-reference-visual-preview, .company-reference-wallpaper-preview) {
  color: var(--brand) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .company-reference-wallpaper-preview {
  background: linear-gradient(140deg, var(--surface-2), var(--surface), var(--hover)) !important;
}

html[data-theme] :is(.company-reference-label, .company-reference-profile > strong, .company-reference-summary h2, .company-reference-visual-heading, .company-reference-section > header h3, .company-reference-fields .field label, .company-reference-visual-copy strong) {
  color: var(--ink) !important;
}

html[data-theme] :is(.company-reference-summary p, .company-reference-visual-heading small, .company-reference-visual-heading span, .company-reference-section > header small, .company-reference-visual-copy small, .company-reference-visual-copy span) {
  color: var(--muted) !important;
}

html[data-theme] .company-reference-section > header {
  border-color: var(--line) !important;
}

html[data-theme] .company-reference-map {
  background-image: linear-gradient(35deg, transparent 47%, color-mix(in srgb, var(--brand-2) 22%, transparent) 48%, color-mix(in srgb, var(--brand-2) 22%, transparent) 49%, transparent 50%), linear-gradient(165deg, transparent 47%, color-mix(in srgb, var(--brand) 20%, transparent) 48%, color-mix(in srgb, var(--brand) 20%, transparent) 49%, transparent 50%), linear-gradient(color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px !important;
}

html[data-theme] :is(.company-reference-wallpaper-setting input, .company-reference-fields .field input, .company-reference-fields .field textarea, .company-reference-fields .field select) {
  color: var(--ink) !important;
  background-color: var(--input-bg) !important;
  border-color: var(--line) !important;
}

html[data-theme] :is(.company-reference-map-status, .company-reference-profile > small, .company-reference-status b) {
  color: var(--success) !important;
}