/* ESConnect 2.2 — additive dark palette. The light styles remain authoritative
   until the root explicitly selects dark; load this file after page styles. */
html[data-theme="dark"] {
    color-scheme: dark;
    --theme-bg: #0b1220;
    --theme-surface: #111c2e;
    --theme-surface-raised: #18263b;
    --theme-border: #2c3d55;
    --theme-text: #e8f0fa;
    --theme-muted: #a6b5ca;
    --theme-accent: #83c9f4;
    --theme-accent-soft: #173750;
    --theme-action: #2572a4;
    --theme-action-hover: #1d608d;
    --theme-success: #74e0ae;
    --theme-success-soft: #103a2b;
    --theme-danger: #ffa8ae;
    --theme-danger-soft: #421f2c;
    --theme-warning: #ffd08a;
    --theme-warning-soft: #3c2d17;
    --theme-violet: #c4b3ff;
    --theme-violet-soft: #302746;
    --ticket-primary: var(--theme-accent);
    --ticket-primary-dark: var(--theme-accent);
    --ticket-primary-soft: var(--theme-accent-soft);
    --ticket-text: var(--theme-text);
    --ticket-muted: var(--theme-muted);
    --ticket-border: var(--theme-border);
    --ticket-surface: var(--theme-surface);
    --ticket-success: var(--theme-success);
    --ticket-success-soft: var(--theme-success-soft);
    --ticket-warning: var(--theme-warning);
    --ticket-warning-soft: var(--theme-warning-soft);
    --ticket-danger: var(--theme-danger);
    --ticket-danger-soft: var(--theme-danger-soft);
    --ticket-violet: var(--theme-violet);
    --ticket-violet-soft: var(--theme-violet-soft);
    --login-blue: var(--theme-accent);
    --login-blue-dark: var(--theme-accent);
    --login-navy: var(--theme-text);
    --login-text: var(--theme-text);
    --login-muted: var(--theme-muted);
    --login-border: var(--theme-border);
    --login-surface: var(--theme-surface);
    --login-background: var(--theme-bg);
    --es-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23e8f0fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background: var(--theme-bg);
    scrollbar-color: #536b88 var(--theme-surface);
}

html[data-theme="dark"] body {
    background: var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="dark"] ::selection {
    background: #336d99;
    color: #ffffff;
}

/* Shared chrome and elevated panels. Only palette properties are overridden. */
html[data-theme="dark"] :is(
    .sidebar, .sidebar .nav, .topbar, .account-button, .account-dropdown,
    .site-switcher-menu, .site-switcher-button, .notification-button, .refresh,
    .menu-toggle, .mobile-nav-toggle, .settings-link, .overview-card, .summary-card, .internet-box,
    .table-box, .notifications-box, .notification-filters, .notifications-modern-panel,
    .notification-stat-card, .notification-empty-card, .internet-modern-box,
    .internet-modern-summary-card, .internet-modern-card, .internet-dashboard-box,
    .dashboard-kpi-card, .dashboard-tickets-summary, .dashboard-side-card-link,
    .dashboard-side-card-header, .dashboard-ticket-overview,
    .dashboard-ap-view-all, .access-points-modern-box, .access-points-modern-box-header,
    .speedtest-modern-card, .speedtest-card, .speedtest-history-panel, .settings-card, .settings-tabs,
    .settings-bottom-actions, .settings-save-bar, .system-status-item,
    .monitoring-details > div, .users-table-wrap, .user-menu, .user-menu-redesign, .unifi-site-card,
    .user-sites-select-trigger, .user-sites-select-panel, .user-password-modal,
    .activation-code-modal, .password-modal, .tickets-card, .ticket-metric-card,
    .ticket-toolbar, .ticket-filter-bar, .ticket-toolbar-row, .ticket-refresh-button, .ticket-open-button,
    .internet-dashboard-item, .internet-modern-logo, .internet-dashboard-logo,
    .speedtest-provider-logo, .internet-modern-empty, .internet-dashboard-empty,
    .ticket-message, .ticket-upload-zone, .ticket-source-card, .ticket-claim-card,
    .help-summary, .help-section, .help-feature-grid article, .help-status-list > div,
    .card, .recovery-card, .login-layout, .login-access, .mfa-card
) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
}

html[data-theme="dark"] :is(
    .sidebar-footer, .account-dropdown-header, .account-dropdown-separator,
    .notifications-modern-panel-header, .notification-modern-item,
    .dashboard-side-card-header, .dashboard-side-card-link, .dashboard-ap-footer,
    .internet-modern-box-header, .internet-dashboard-item + .internet-dashboard-item,
    .settings-card-header, .settings-card-actions, .advanced-details,
    .ticket-meta-grid, .ticket-summary-back, .tickets-card-header, .ticket-filter-bar,
    .ticket-view-filters, .ticket-toolbar-row, .ticket-conversation,
    .ticket-form-actions, .ticket-reply-footer, .ticket-section-heading,
    .password-modal-header, .password-modal-actions, .login-security-note
) {
    border-color: var(--theme-border);
}

html[data-theme="dark"] :is(h1, h2, h3, h4),
html[data-theme="dark"] :is(
    .logo-text, .sidebar-user-name, .account-button-name, .account-dropdown-header strong,
    .notification-device, .notification-empty-title, .notification-modern-title,
    .notification-stat-content strong, .summary-value, .overview-value,
    .internet-name, .internet-modern-provider-name, .internet-modern-summary-card strong,
    .internet-modern-card h3, .internet-modern-metric strong,
    .internet-modern-detail strong, .internet-modern-details strong,
    .internet-dashboard-provider strong, .internet-modern-empty strong,
    .speedtest-modern-provider-name, .speedtest-metrics strong,
    .speedtest-metric strong, .speedtest-value, .dashboard-kpi-value,
    .dashboard-side-card-header h2, .dashboard-ticket-overview strong,
    .ap-name-cell strong, .user-main strong, .user-identity-redesign strong,
    .user-sites-select-summary, .user-contact-summary a, .settings-bottom-message strong,
    .system-status-item strong, .monitoring-details strong, .unifi-site-card h3,
    .ticket-main-link strong, .ticket-subject-link, .ticket-cell-title, .ticket-description-text,
    .ticket-device-content dd,
    .ticket-meta-grid dd, .ticket-message-content header strong, .ticket-device-content > strong,
    .ticket-stage-card h3, .help-summary strong, .help-callout strong,
    .help-feature-grid h3, .help-status-list strong, .help-steps-list strong,
    .recovery-title, .activation-code-user, .activation-code-value
) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .sidebar .sidebar-brand-copy .logo-text,
html[data-theme="dark"] [data-section="bornes"] > .access-points-page-header :is(h1, h2) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] [data-section="bornes"] .clients-number,
html[data-theme="dark"] [data-section="bornes"] .ap-row-online .clients-number:not(.is-empty),
html[data-theme="dark"] [data-section="bornes"] .ap-ticket-link {
    color: var(--theme-accent);
    border-color: #355d7c;
}
html[data-theme="dark"] [data-section="bornes"] .clients-number.is-empty {
    color: var(--theme-muted);
}

html[data-theme="dark"] :is(
    .sidebar-user-role, .sidebar-brand-subtitle, .sidebar-version-info, .sidebar-footer-text,
    .account-button-role, .account-dropdown-header > div > span,
    .account-notification-sound-copy small, .topbar p, .summary-title,
    .notification-message, .notification-meta, .notification-empty-subtitle,
    .notification-modern-message, .notification-modern-meta, .notification-stat-label,
    .notification-stat-content small, .notifications-modern-subtitle,
    .notifications-modern-panel-header p, .overview-heading, .overview-heading span,
    .ap-search-count, .ap-duration, .ap-empty-subtitle,
    .internet-modern-subtitle, .internet-modern-summary-card span,
    .internet-modern-provider-copy p, .internet-modern-card p,
    .internet-modern-metric span, .internet-modern-detail span, .internet-modern-details span,
    .internet-modern-empty p, .internet-dashboard-empty, .internet-modern-provider p,
    .internet-modern-box-header p,
    .speedtest-modern-subtitle, .speedtest-modern-card p, .speedtest-metric span,
    .speedtest-history-header p, .speedtest-history-info, .speedtest-missing-value,
    .speedtest-metrics span, .speedtest-last-run,
    .speedtest-empty-row, .internet-missing-value, .internet-dashboard-subtitle,
    .dashboard-page-heading p, .dashboard-kpi-label, .dashboard-kpi-meta,
    .dashboard-side-card-header p, .dashboard-ticket-overview p,
    .dashboard-recent-ticket span, .dashboard-recent-tickets-empty,
    .dashboard-internet-subtitle, .internet-dashboard-provider-copy > span,
    .settings-card-header p, .settings-field > span, .settings-field small,
    .settings-site-field > span, .settings-version-label, .system-status-item span,
    .user-main span,
    .monitoring-details span, .toggle-label, .save-hint, .user-muted,
    .user-contact-summary, .user-password-help, .user-password-target,
    .user-sites-help, .user-sites-counter, .settings-bottom-message span,
    .unifi-site-card p, .unifi-empty, .tickets-muted, .tickets-card-header p,
    .tickets-page-heading p, .ticket-detail-page-heading p,
    .ticket-field > span, .ticket-field small, .ticket-meta-grid dt,
    .ticket-meta-grid small, .ticket-privacy-card p, .ticket-help-card li,
    .tickets-table td small,
    .ticket-message-content time, .ticket-no-messages, .ticket-archive-hint,
    .ticket-stage-card > p, .ticket-upload-zone span, .ticket-source-card div > span,
    .ticket-device-content p, .ticket-reply-locked p,
    .help-page-heading p, .help-section-heading p, .help-callout p,
    .help-feature-grid p, .help-status-list p, .help-steps-list li,
    .help-paragraph, .help-security-list li, .help-support-card p,
    .login-security-note, .login-footer, .login-footer-product,
    .recovery-description, .recovery-intro, .recovery-footer, .activation-code-modal-body p,
    .mfa-setup-steps, .mfa-qr-panel p, .ticket-sort-field, .ticket-priority-tabs > span
) {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .sidebar .sidebar-brand-subtitle,
html[data-theme="dark"] body.settings-page :is(
    .settings-field > span, .user-muted, .user-sites-counter, .settings-field small,
    .user-sites-title, .user-edit-field label, .user-sites-help
),
html[data-theme="dark"] body.settings-page .user-create-box :is(.user-sites-title, .user-sites-help, .user-sites-counter),
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] :is(
    .supervision-zone-title, .supervision-card-label, .supervision-edit-field small,
    .supervision-status-card small, .supervision-input-unit > span
) {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] body.settings-page .user-sites-summary {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] #user_create_close,
html[data-theme="dark"] #user_create_close:hover,
html[data-theme="dark"] #user_create_close:focus-visible {
    color: var(--theme-text);
    background: var(--theme-surface-raised);
}

/* Links and secondary actions retain a bright accent without lightening the
   primary action backgrounds (white text on #2572a4 remains readable). */
html[data-theme="dark"] :is(
    .nav-item, .account-dropdown-item, .site-switcher-option, .site-switcher-title,
    .refresh, .menu-toggle, .notification-button, .settings-link,
    .secondary-button, .settings-secondary-button, .settings-cancel-button,
    .password-secondary-button, .tickets-secondary-button, .ticket-row-action,
    .ticket-back-row a, .ticket-summary-back a, .ticket-attachment-button,
    .ticket-attachment-list a, .ticket-reference-large, .ticket-main-link,
    .ticket-tab, .priority-tab, .ticket-priority-tab, .ticket-ownership-tab, .ticket-filter-reset,
    .ap-ticket-link, .clients-number, .dashboard-recent-ticket strong,
    .dashboard-side-card-link, .dashboard-ap-view-all, .settings-version-badge,
    .help-summary a, .help-feature-grid a, .help-support-card a,
    .login-support-direct a, .activation-back-link, .forgot-password-link,
    .back-link, .recovery-link, .login-eyebrow, .tickets-eyebrow, .help-eyebrow,
    .user-menu-item, .user-more-button, .user-edit-account-button,
    .user-action-button.edit, .user-action-button.activate, .user-action-button.danger,
    .user-edit-button, .unifi-test-button,
    .notifications-filter-main-button, .notifications-action-button,
    .notifications-modern-footer button, .notification-duration,
    .ticket-message-avatar, .ticket-source-logo
) {
    color: var(--theme-accent);
}

html[data-theme="dark"] :is(
    .nav-item:hover, .nav-item.active, .settings-link-active,
    .settings-tab:hover, .settings-tab.active, .site-switcher-option:hover,
    .site-switcher-option.active, .account-dropdown-item:hover,
    .account-menu.is-open .account-button, .notification-stat-card.active,
    .notification-filter.active, .notification-filter:hover,
    .ticket-tab.is-active, .ticket-tab:hover, .priority-tab.is-active, .priority-tab:hover,
    .ticket-priority-tab.is-active,
    .ticket-priority-tab:hover, .ticket-ownership-tab.is-active,
    .ticket-ownership-tab:hover, .ticket-mobile-filter-toggle,
    .help-summary a:hover, .help-summary a:focus-visible
) {
    background: var(--theme-accent-soft);
    border-color: #3e7499;
    color: var(--theme-accent);
}

html[data-theme="dark"] :is(
    .refresh:hover, .notification-button:hover, .secondary-button:hover,
    .settings-secondary-button:hover, .password-secondary-button:hover,
    .tickets-secondary-button:hover, .ticket-row-action:hover, .ticket-summary-back a:hover,
    .user-sites-select-trigger:hover, .user-more-button:hover,
    .user-menu-item:hover, .user-edit-account-button:hover,
    .notifications-action-button:hover, .ap-ticket-link:hover,
    .dashboard-side-card-link:hover, .dashboard-ap-view-all:hover,
    .dashboard-recent-ticket:hover
) {
    background: var(--theme-surface-raised);
    border-color: #537497;
    color: var(--theme-accent);
}

html[data-theme="dark"] :is(
    .secondary-button, .settings-secondary-button, .settings-cancel-button,
    .password-secondary-button, .tickets-secondary-button,
    .user-more-button, .user-menu-item, .user-edit-account-button,
    .user-action-button.edit, .user-action-button.activate, .user-action-button.danger,
    .user-edit-button, .unifi-test-button,
    .notification-delete, .notification-modern-delete, .notifications-action-button,
    .notifications-filter-main-button, .ap-ticket-link, .ap-search-clear,
    .ticket-search-clear, .ticket-stage-actions .ticket-archive-button,
    .password-modal-close, .user-create-modal-close
) {
    background: var(--theme-surface-raised);
    border-color: var(--theme-border);
}

/* Native controls, selection, focus, placeholders and browser autofill. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
    caret-color: var(--theme-accent);
}

html[data-theme="dark"] :is(.ticket-field select, .ticket-sort-field select) {
    background-image: var(--es-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    appearance: none;
    padding-right: 40px;
}

html[data-theme="dark"] body.settings-page select,
html[data-theme="dark"] #settings_form select,
html[data-theme="dark"] .user-edit-form select {
    background-image: var(--es-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 16px 16px !important;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: var(--theme-muted) !important;
    opacity: 0.8;
}

html[data-theme="dark"] :is(input, select, textarea):focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 3px rgba(131, 201, 244, 0.18) !important;
}

html[data-theme="dark"] :is(input, textarea):-webkit-autofill,
html[data-theme="dark"] :is(input, textarea):-webkit-autofill:hover,
html[data-theme="dark"] :is(input, textarea):-webkit-autofill:focus {
    -webkit-text-fill-color: var(--theme-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface-raised) inset !important;
    caret-color: var(--theme-text);
}

html[data-theme="dark"] :is(input, textarea)[readonly],
html[data-theme="dark"] :is(input, select, textarea):disabled {
    background-color: #131f31 !important;
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--theme-action);
}

html[data-theme="dark"] :is(a, button, [tabindex]):focus-visible {
    outline-color: var(--theme-accent);
}

/* Tables: the transparent mobile cells must remain transparent. */
html[data-theme="dark"] :is(table, td, th, .tickets-table, .users-table, .access-points-table) {
    border-color: var(--theme-border) !important;
    color: var(--theme-text);
}

html[data-theme="dark"] :is(th, .users-table th, .tickets-table th, .speedtest-table th),
html[data-theme="dark"] [data-section="bornes"] .access-points-table th {
    background: var(--theme-surface-raised);
    color: var(--theme-muted);
}

html[data-theme="dark"] :is(td, .users-table td),
html[data-theme="dark"] [data-section="bornes"] .access-points-table td {
    background-color: var(--theme-surface);
}

html[data-theme="dark"] :is(tr:hover td, .users-table tbody tr:hover td),
html[data-theme="dark"] [data-section="bornes"] .ap-row:hover td {
    background-color: var(--theme-surface-raised);
}

html[data-theme="dark"] :is(.users-table td::before, .tickets-table td::before,
    .ticket-list-updated, .ticket-list-device::before, .ticket-list-updated::before,
    .ticket-list-assignee::before, .ap-cell-duration::before, .ap-cell-clients::before) {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] :is(.tickets-table-modern tbody tr, .users-table tbody tr,
    .access-points-table .ap-row) {
    border-color: var(--theme-border);
}

html[data-theme="dark"] [data-section="bornes"] .ap-row-offline td,
html[data-theme="dark"] [data-section="bornes"] .ap-row-offline:hover td {
    background-color: var(--theme-danger-soft);
}

/* Icons are monochrome UI assets only. Brand marks, provider logos, colored
   network-state assets, loading frames and attachments keep their artwork. */
html[data-theme="dark"] img[src*="/static/icons/"]:not([src*="logo-"]):not([src*="wan-orange"]):not([src*="loading/"]):not([src*="access-point-online"]):not([src*="access-point-offline"]):not([src*="warning"]):not([src*="check-circle"]):not([src*="check.svg"]):not([src*="exclamation"]) {
    filter: brightness(0) saturate(100%) invert(88%) sepia(11%) saturate(432%) hue-rotate(176deg) brightness(101%) contrast(96%);
}

html[data-theme="dark"] :is(
    .primary-button, .settings-save-button, .user-edit-save, .password-primary-button,
    .tickets-primary-button, .ticket-resolve-button, .dashboard-create-ticket,
    .help-support-button, .unifi-add-button, .users-create-toggle, .login-submit,
    .login-button, .submit-button, .recovery-button, .speedtest-run-button
) {
    border-color: var(--theme-action) !important;
    background: var(--theme-action) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :is(
    .primary-button, .settings-save-button, .user-edit-save, .password-primary-button,
    .tickets-primary-button, .ticket-resolve-button, .dashboard-create-ticket,
    .help-support-button, .unifi-add-button, .users-create-toggle, .login-submit,
    .login-button, .submit-button, .recovery-button, .speedtest-run-button
):hover:not(:disabled) {
    border-color: var(--theme-action-hover) !important;
    background: var(--theme-action-hover) !important;
}

html[data-theme="dark"] :is(
    .primary-button, .settings-save-button, .user-edit-save, .password-primary-button,
    .tickets-primary-button, .ticket-resolve-button, .dashboard-create-ticket,
    .help-support-button, .unifi-add-button, .users-create-toggle, .login-submit,
    .login-button, .submit-button, .recovery-button, .speedtest-run-button
) img,
html[data-theme="dark"] :is(.internet-health-check, .dashboard-health-title, .notification-status-icon,
    .supervision-status-icon, .ticket-message-requester .ticket-message-avatar) img {
    filter: brightness(0) invert(1) !important;
}

html[data-theme="dark"] :is(.account-avatar, .account-avatar-large,
    .ticket-message-requester .ticket-message-avatar) {
    background: var(--theme-action);
    color: #ffffff !important;
}

html[data-theme="dark"] :is(
    .summary-icon-box, .overview-heading-icon, .dashboard-kpi-icon,
    .dashboard-side-card-icon, .notification-empty-icon, .ap-empty-icon,
    .internet-modern-summary-icon, .system-status-icon, .user-sites-select-trigger-icon,
    .ticket-metric-icon, .tickets-empty-icon, .ticket-context-icon,
    .ticket-device-icon, .ticket-source-logo, .help-feature-icon, .help-step,
    .ticket-tab b, .ticket-priority-tab b, .ticket-ownership-tab b,
    .user-role-badge-redesign, .user-avatar-redesign, .unifi-site-chip,
    .settings-version-badge, .ticket-assignee-badge
) {
    background: var(--theme-accent-soft);
    border-color: var(--theme-border);
    color: var(--theme-accent);
}

/* Semantic colors: status never depends on luminosity alone. */
html[data-theme="dark"] :is(
    .status-ok, .online, .ap-row-online .ap-status-label, .internet-dashboard-operational.online,
    .internet-modern-operational.online, .system-badge.ok,
    .supervision-card-topline, .internet-health-heading, .internet-health-copy > b
) { color: var(--theme-success); }

html[data-theme="dark"] :is(
    .offline, .ap-row-offline .ap-status-label, .internet-dashboard-operational.offline,
    .internet-modern-operational.offline, .dashboard-kpi-meta.is-urgent,
    .user-action-button.danger, .user-edit-account-button.delete, .account-dropdown-danger,
    .notifications-action-danger
) { color: var(--theme-danger) !important; }

html[data-theme="dark"] :is(
    .warning, .ap-row-warning .ap-status-label, .internet-dashboard-operational.warning,
    .internet-modern-operational.warning
) { color: var(--theme-warning); }

html[data-theme="dark"] :is(
    .status-pill-ok, .user-status-pill.active, .notification-state.resolved,
    .notification-modern-badge.resolved, .status-resolved, .system-badge.ok,
    .settings-message.success, .unifi-inline-message.success, .unifi-site-chip.ok,
    .password-message.success, .message-success, .ticket-alert-success,
    .tickets-alert-success, .ticket-device-state.online,
    .ticket-assignee-open, .internet-modern-state.online, .speedtest-state.online,
    .internet-modern-status.online, .speedtest-link-status.online, .speedtest-role.primary,
    .site-switcher-current
) {
    background: var(--theme-success-soft);
    border-color: #2d6e52;
    color: var(--theme-success);
}

html[data-theme="dark"] :is(
    .notification-state.active, .notification-modern-badge.active,
    .priority-3, .system-badge.error, .settings-message.error,
    .unifi-inline-message.error, .unifi-site-chip.error, .password-message.error,
    .message-error, .tickets-alert-error, .ticket-selected-files span.is-invalid,
    .ticket-device-state.offline, .internet-modern-state.offline,
    .speedtest-state.offline, .dashboard-load-message, .internet-modern-status.offline,
    .speedtest-link-status.offline
) {
    background: var(--theme-danger-soft);
    border-color: #874552;
    color: var(--theme-danger);
}

html[data-theme="dark"] :is(
    .priority-1, .priority-2, .status-waiting, .system-badge.warning,
    .user-status-pill.pending, .tickets-alert-warning, .internet-modern-state.warning,
    .speedtest-state.warning, .internet-modern-status.warning, .speedtest-link-status.warning
) {
    background: var(--theme-warning-soft);
    border-color: #806130;
    color: var(--theme-warning);
}

html[data-theme="dark"] :is(.status-progress, .notification-stat-icon-orange) {
    background: var(--theme-violet-soft);
    color: var(--theme-violet);
}

html[data-theme="dark"] :is(.status-new, .notification-modern-badge.ticket.active) {
    background: var(--theme-accent-soft);
    color: var(--theme-accent);
}

html[data-theme="dark"] .speedtest-role.backup { background: var(--theme-accent-soft); color: var(--theme-accent); }
html[data-theme="dark"] .speedtest-role.neutral { background: var(--theme-surface-raised); color: var(--theme-muted); }
html[data-theme="dark"] .ticket-open-button:hover { background: var(--theme-action); border-color: var(--theme-action); color: #ffffff; }

html[data-theme="dark"] :is(.status-closed, .priority-0, .user-status-pill.inactive,
    .user-role-badge-redesign.reader, .user-avatar-redesign.reader,
    .user-role-badge-redesign.technician, .user-avatar-redesign.technician) {
    background: var(--theme-surface-raised);
    color: var(--theme-muted);
}

html[data-theme="dark"] :is(.speedtest-link-status.primary, .internet-modern-status.primary,
    .internet-dashboard-status.primary, .internet-dashboard-item:first-child .internet-dashboard-status) {
    background: var(--theme-success-soft) !important;
    color: var(--theme-success) !important;
}

html[data-theme="dark"] :is(.speedtest-link-status.backup, .internet-modern-status.backup,
    .internet-dashboard-status.backup, .internet-dashboard-item:nth-child(2) .internet-dashboard-status) {
    background: var(--theme-accent-soft) !important;
    color: var(--theme-accent) !important;
}

html[data-theme="dark"] :is(.speedtest-link-status.neutral, .internet-modern-status.neutral,
    .internet-dashboard-status.neutral, .speedtest-auto-badge, .speedtest-history-info) {
    background: var(--theme-surface-raised) !important;
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] :is(.notifications-action-button:disabled,
    .notifications-action-button[aria-disabled="true"],
    .notifications-action-button:disabled:hover,
    .notifications-action-button[aria-disabled="true"]:hover) {
    background: var(--theme-surface-raised) !important;
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] :is(.notification-delete:hover, .notification-modern-delete:hover,
    .account-dropdown-danger:hover, .user-edit-account-button.delete:hover,
    .notifications-action-danger:hover, .logout-link) {
    background: var(--theme-danger-soft);
    border-color: #874552;
}

html[data-theme="dark"] :is(.notification-stat-icon-red, .notification-modern-icon.active) {
    background: var(--theme-danger-soft);
}
html[data-theme="dark"] :is(.notification-stat-icon-green, .notification-modern-icon.resolved) {
    background: var(--theme-success-soft);
}
html[data-theme="dark"] :is(.notification-stat-icon-blue, .notification-modern-icon.ticket) {
    background: var(--theme-accent-soft);
}

/* Health cards and circular meters retain their live numerical variables. */
html[data-theme="dark"] .dashboard-health-card {
    background: linear-gradient(135deg, #103a2b, #112c27);
    border-color: #2d6e52;
}
html[data-theme="dark"] .dashboard-health-card :is(.dashboard-health-title, .dashboard-health-copy > strong, .availability-ring span) {
    color: var(--theme-success);
}
html[data-theme="dark"] .dashboard-health-copy > span:last-child {
    color: #a9cfbe;
}
html[data-theme="dark"] .availability-ring {
    background: conic-gradient(#41ce95 calc(var(--availability) * 1%), #29443d 0);
}
html[data-theme="dark"] .availability-ring::before { background: #112c27; }
html[data-theme="dark"] .dashboard-health-card.is-alert {
    background: linear-gradient(135deg, #3c2d17, #30251b);
    border-color: #806130;
}
html[data-theme="dark"] .dashboard-health-card.is-alert :is(.dashboard-health-title, .dashboard-health-copy > strong, .availability-ring span) {
    color: var(--theme-warning);
}
html[data-theme="dark"] .dashboard-health-card.is-alert .dashboard-health-copy > span:last-child {
    color: #dbc39c;
}
html[data-theme="dark"] .dashboard-health-card.is-alert .availability-ring {
    background: conic-gradient(#f8b849 calc(var(--availability) * 1%), #53422d 0);
}
html[data-theme="dark"] .dashboard-health-card.is-alert .availability-ring::before { background: #30251b; }

html[data-theme="dark"] .internet-health-card {
    --internet-health-active: #41ce95;
    --internet-health-track: #29443d;
    --internet-health-center: #112c27;
    background: #112c27;
    border-color: #2d6e52;
}
html[data-theme="dark"] .internet-health-card[data-state="offline"] {
    --internet-health-active: #ff8793;
    --internet-health-track: #563342;
    --internet-health-center: #351f2b;
    background: #351f2b;
    border-color: #874552;
}
html[data-theme="dark"] .internet-health-card[data-state="warning"] {
    --internet-health-active: #f8b849;
    --internet-health-track: #53422d;
    --internet-health-center: #30251b;
    background: #30251b;
    border-color: #806130;
}
html[data-theme="dark"] .internet-health-card[data-state="empty"] {
    --internet-health-active: #83c9f4;
    --internet-health-track: #2c3d55;
    --internet-health-center: #18263b;
    background: var(--theme-surface);
    border-color: var(--theme-border);
}
html[data-theme="dark"] .internet-health-ring span { color: var(--theme-success); }
html[data-theme="dark"] .internet-health-copy > p { color: #a9cfbe; }
html[data-theme="dark"] .internet-health-card[data-state="offline"] :is(.internet-health-heading, .internet-health-copy > b, .internet-health-ring span) { color: var(--theme-danger); }
html[data-theme="dark"] .internet-health-card[data-state="warning"] :is(.internet-health-heading, .internet-health-copy > b, .internet-health-ring span) { color: var(--theme-warning); }
html[data-theme="dark"] .internet-health-card[data-state="empty"] :is(.internet-health-heading, .internet-health-copy > b, .internet-health-ring span, .internet-health-copy > p) { color: var(--theme-muted); }
html[data-theme="dark"] .internet-health-card[data-state="offline"] .internet-health-copy > p { color: #e4bac5; }
html[data-theme="dark"] .internet-health-card[data-state="warning"] .internet-health-copy > p { color: #dbc39c; }
html[data-theme="dark"] .internet-modern-card.offline { background: linear-gradient(180deg, var(--theme-surface), #2d1e2d); }
html[data-theme="dark"] .internet-modern-card.online { border-color: #2d6e52; }
html[data-theme="dark"] .internet-modern-card.offline { border-color: #874552; }
html[data-theme="dark"] .internet-modern-card.warning { border-color: #806130; }
html[data-theme="dark"] .internet-dashboard-item.is-offline {
    background: var(--theme-danger-soft);
    border-color: #874552;
}
html[data-theme="dark"] .internet-dashboard-item.is-warning {
    background: var(--theme-warning-soft);
    border-color: #806130;
}

html[data-theme="dark"] :is(.dashboard-data-loading, .site-loading-active) [data-section="summary"] .dashboard-health-card {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] :is(.dashboard-data-loading, .site-loading-active) [data-section="summary"] :is(.dashboard-health-title, .dashboard-health-copy > strong, .dashboard-health-copy > span:last-child, .availability-ring span) {
    color: var(--theme-muted) !important;
}
html[data-theme="dark"] :is(.dashboard-data-loading, .site-loading-active) [data-section="summary"] .availability-ring {
    background: var(--theme-border) !important;
}
html[data-theme="dark"] :is(.dashboard-data-loading, .site-loading-active) .availability-ring::before { background: var(--theme-surface); }

/* Conversation bubbles and attachment chips remain distinct from the page. */
html[data-theme="dark"] .ticket-conversation .ticket-message { background: transparent; }
html[data-theme="dark"] .ticket-description-text {
    background: var(--theme-surface-raised);
    color: var(--theme-text);
}
html[data-theme="dark"] .ticket-conversation .ticket-message-content {
    background: var(--theme-surface-raised);
    border-color: var(--theme-border);
}
html[data-theme="dark"] .ticket-conversation .ticket-message-requester .ticket-message-content {
    background: #17344b;
    border-color: #355d7c;
}
html[data-theme="dark"] .ticket-conversation .ticket-message-content p { color: var(--theme-text); }
html[data-theme="dark"] .ticket-conversation .ticket-attachment-list a,
html[data-theme="dark"] .ticket-conversation .ticket-message-requester .ticket-attachment-list a {
    background: var(--theme-surface);
    border-color: #355d7c;
    color: var(--theme-accent);
}
html[data-theme="dark"] :is(.ticket-message-avatar, .ticket-selected-files > span) {
    background: var(--theme-accent-soft);
    border-color: #355d7c;
    color: var(--theme-accent);
}
html[data-theme="dark"] .ticket-selected-files span.is-invalid {
    background: var(--theme-danger-soft);
    color: var(--theme-danger);
}

/* Keep inactive navigation readable and soften legacy light panel dividers. */
html[data-theme="dark"] body.settings-page .settings-tab:not(.active) {
    color: var(--theme-muted);
}
html[data-theme="dark"] body.settings-page :is(.settings-card, .settings-card-header) {
    border-color: var(--theme-border) !important;
}

/* Legacy settings modals use !important declarations with specific selectors. */
html[data-theme="dark"] body.settings-page :is(.user-create-box, .user-edit-modal, .user-edit-form),
html[data-theme="dark"] :is(.user-edit-modal, .user-edit-form) {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] :is(.user-edit-modal-header, .user-edit-actions,
    .user-create-modal-header, .user-create-box > .settings-card-actions) {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .user-edit-modal-header h2 { color: var(--theme-text) !important; }
html[data-theme="dark"] :is(.user-edit-modal-header p, .user-edit-field label, .user-sites-title,
    .user-sites-help, .user-sites-counter) { color: var(--theme-muted) !important; }
html[data-theme="dark"] :is(.user-edit-modal-close, .user-edit-modal-close:hover) {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
html[data-theme="dark"] :is(.user-site-option, .user-sites-select-panel .user-site-option),
html[data-theme="dark"] body.settings-page .user-create-box .user-sites-create-grid .user-site-option {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
html[data-theme="dark"] :is(.user-site-option:hover, .user-sites-select-panel .user-site-option:hover),
html[data-theme="dark"] body.settings-page .user-create-box .user-sites-create-grid .user-site-option:hover {
    background: #20324a !important;
    border-color: #537497 !important;
}
html[data-theme="dark"] :is(.user-site-option.is-selected, .user-sites-select-panel .user-site-option.is-selected),
html[data-theme="dark"] body.settings-page .user-create-box .user-sites-create-grid .user-site-option.is-selected {
    background: var(--theme-accent-soft) !important;
    border-color: #68add9 !important;
    box-shadow: 0 0 0 3px rgba(131, 201, 244, 0.12) !important;
}
html[data-theme="dark"] :is(.user-site-name, .user-site-option.is-selected .user-site-name),
html[data-theme="dark"] body.settings-page .user-create-box .user-sites-create-grid .user-site-name,
html[data-theme="dark"] body.settings-page .user-create-box .user-sites-create-grid .user-site-option.is-selected .user-site-name {
    color: var(--theme-text) !important;
}
html[data-theme="dark"] .user-site-check {
    background: var(--theme-surface) !important;
    border-color: #7b93ad !important;
    color: transparent !important;
}
html[data-theme="dark"] .user-site-option.is-selected .user-site-check {
    background: var(--theme-action) !important;
    border-color: var(--theme-accent) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] :is(.user-site-icon, .user-site-option.is-selected .user-site-icon) {
    /* Filters recolor an img's background too; leave it transparent so the
       dark tile remains distinct from its light monochrome glyph. */
    background: transparent !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .user-edit-message.visible {
    background: var(--theme-success-soft) !important;
    border-color: #2d6e52 !important;
    color: var(--theme-success) !important;
}
html[data-theme="dark"] .user-edit-message.visible.error {
    background: var(--theme-danger-soft) !important;
    border-color: #874552 !important;
    color: var(--theme-danger) !important;
}
html[data-theme="dark"] #user_edit_modal .user-sites-select-trigger,
html[data-theme="dark"] body.settings-page .user-create-box .user-sites-select-trigger {
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] :is(.supervision-edit-field, .supervision-status-card) {
    background: var(--theme-surface-raised);
    border-color: var(--theme-border);
    box-shadow: inset 0 0 0 1px var(--theme-border);
}
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] :is(.supervision-edit-field > span, .supervision-status-card strong) { color: var(--theme-text); }
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] .supervision-health-card.is-success {
    background: var(--theme-success-soft);
    box-shadow: inset 0 0 0 1px #2d6e52;
}
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] .supervision-health-card.is-error {
    background: var(--theme-danger-soft);
    box-shadow: inset 0 0 0 1px #874552;
}
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] .supervision-health-card.is-disabled {
    background: var(--theme-surface-raised);
    box-shadow: inset 0 0 0 1px var(--theme-border);
}
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] .supervision-card-topline { color: var(--theme-success); }
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] .is-error .supervision-card-topline { color: var(--theme-danger); }
html[data-theme="dark"] body.settings-page .settings-panel[data-panel="monitoring"] .is-disabled .supervision-card-topline { color: var(--theme-muted); }
html[data-theme="dark"] :is(.toggle-slider, .account-notification-sound-switch) { background: #415775; }
html[data-theme="dark"] .settings-bottom-icon { background: var(--theme-accent-soft); }
html[data-theme="dark"] .activation-code-value { background: var(--theme-surface-raised); border-color: var(--theme-border); }

/* Login, account activation, recovery and MFA share a calm blue-night shell. */
html[data-theme="dark"] .login-wrapper {
    background:
        radial-gradient(circle at 84% 22%, rgba(67, 136, 187, 0.13), transparent 28%),
        radial-gradient(circle at 30% 92%, rgba(67, 136, 187, 0.08), transparent 30%),
        linear-gradient(140deg, #0b1220, #101c2d 58%, #0e1a2a);
}
html[data-theme="dark"] .login-card {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
}
html[data-theme="dark"] :is(.login-presentation, .login-mobile-brand) {
    background:
        radial-gradient(circle at 105% 5%, rgba(131, 201, 244, 0.1), transparent 40%),
        linear-gradient(150deg, #174568, #112f4b);
}
html[data-theme="dark"] :is(.login-presentation, .login-mobile-brand) .login-brand-copy strong { color: #ffffff !important; }
html[data-theme="dark"] :is(.login-presentation, .login-mobile-brand) .login-brand-copy span { color: #d0e5f5; }
html[data-theme="dark"] .login-benefits li { color: #e8f0fa; }
html[data-theme="dark"] .login-security-note { border-color: var(--theme-border); }
html[data-theme="dark"] :is(.login-card label, .recovery-card label, .activation-header h1) { color: var(--theme-text); }
html[data-theme="dark"] :is(.mfa-code, .mfa-secret, .recovery-codes, .recovery-code,
    .mfa-recovery-codes code, .mfa-manual-secret, .mfa-secret-key) {
    background: var(--theme-surface-raised);
    border-color: var(--theme-border);
    color: var(--theme-text);
}
html[data-theme="dark"] .mfa-qr,
html[data-theme="dark"] img[alt*="QR"] { background: #ffffff; }
html[data-theme="dark"] .login-button-secondary,
html[data-theme="dark"] .login-button-secondary:hover:not(:disabled) {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-accent) !important;
}
html[data-theme="dark"] .recovery-card .error { background: var(--theme-danger-soft); border-color: #874552; color: var(--theme-danger); }
html[data-theme="dark"] .recovery-card .success { background: var(--theme-success-soft); border-color: #2d6e52; color: var(--theme-success); }

/* Help callouts preserve their type as well as the hierarchy of surfaces. */
html[data-theme="dark"] :is(.help-callout-info, .help-support-card) { background: var(--theme-accent-soft); border-color: #4d9acb; }
html[data-theme="dark"] .help-callout-success { background: var(--theme-success-soft); border-color: #41ce95; }
html[data-theme="dark"] .help-callout-warning { background: var(--theme-warning-soft); border-color: #f8b849; }

/* Modals, changing-site overlay and scroll affordances. */
html[data-theme="dark"] :is(.password-modal-backdrop, .user-create-modal-backdrop,
    .user-edit-modal-backdrop, .mobile-nav-backdrop) {
    background: rgba(2, 7, 16, 0.74) !important;
}
html[data-theme="dark"] .site-loading-overlay { background: rgba(7, 14, 25, 0.88); }
html[data-theme="dark"] .site-loading-panel {
    background: rgba(17, 28, 46, 0.97);
    border-color: var(--theme-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .site-loading-panel strong { color: var(--theme-text); }
html[data-theme="dark"] .ap-custom-scrollbar { background: var(--theme-border); }
html[data-theme="dark"] .ap-custom-scrollbar-thumb { background: #7b93ad; }
html[data-theme="dark"] .ap-quick-scroll-button {
    background: var(--theme-surface-raised);
    border-color: #537497;
}
html[data-theme="dark"] .notification-badge { border-color: var(--theme-bg); }
html[data-theme="dark"] .mobile-nav-toggle span { background: var(--theme-text); }
html[data-theme="dark"] .mobile-nav-toggle,
html[data-theme="dark"] .mobile-nav-toggle:hover {
    background: var(--theme-surface-raised);
    border-color: #536b88;
    color: var(--theme-text);
}

@media (max-width: 1100px) {
    html[data-theme="dark"] body.settings-page .users-table tbody tr,
    html[data-theme="dark"] .tickets-main .tickets-table-modern tbody tr {
        background: var(--theme-surface);
        border-color: var(--theme-border);
    }
}

@media (max-width: 750px) {
    html[data-theme="dark"] .ticket-mobile-filter-panel.is-open {
        background: var(--theme-surface);
        border-color: var(--theme-border);
    }
    html[data-theme="dark"] .ticket-filter-section-label {
        color: var(--theme-muted);
    }
    html[data-theme="dark"] .ticket-filter-priority {
        border-color: var(--theme-border);
    }
    html[data-theme="dark"] .ticket-view-filters :is(.ticket-ownership-tab, .ticket-tab),
    html[data-theme="dark"] .tickets-main .ticket-filter-bar .priority-tab {
        background: var(--theme-surface-raised);
        border-color: var(--theme-border);
        color: var(--theme-accent);
    }
    html[data-theme="dark"] .ticket-view-filters :is(.ticket-ownership-tab, .ticket-tab):is(.is-active, :hover),
    html[data-theme="dark"] .tickets-main .ticket-filter-bar .priority-tab:is(.is-active, :hover) {
        background: var(--theme-accent-soft);
        border-color: #3e7499;
    }
    html[data-theme="dark"] .sidebar .sidebar-brand-row.logo,
    html[data-theme="dark"] .app.sidebar-closed .sidebar .sidebar-brand-row.logo {
        background: var(--theme-surface);
    }
    html[data-theme="dark"] .sidebar .nav,
    html[data-theme="dark"] .app.sidebar-closed .sidebar .nav {
        background: var(--theme-surface);
        border-color: var(--theme-border);
    }
    html[data-theme="dark"] [data-section="bornes"] .access-points-table .ap-row {
        background: var(--theme-surface);
        border-color: var(--theme-border);
    }
    html[data-theme="dark"] [data-section="bornes"] .access-points-table .ap-row-offline {
        background: var(--theme-danger-soft);
        border-color: #874552;
    }
    html[data-theme="dark"] [data-section="bornes"] .access-points-modern-box-header,
    html[data-theme="dark"] [data-section="bornes"] .ap-cell-action,
    html[data-theme="dark"] .ticket-list-subject,
    html[data-theme="dark"] .ticket-list-action {
        border-color: var(--theme-border) !important;
    }
}

/* Même niveau de contraste pour les sous-titres de supervision. */
html[data-theme="dark"] :is(.access-points-page-subtitle, .dashboard-internet-subtitle, .internet-modern-subtitle) {
    color: var(--theme-muted) !important;
}
html[data-theme="dark"] #global_status_details {
    color: #b9dccb !important;
}
html[data-theme="dark"] .dashboard-health-card.is-alert #global_status_details {
    color: #ffe0ad !important;
}
html[data-theme="dark"] [data-section="bornes"] .ap-row-offline .ap-status-label {
    color: #ffa8ae !important;
}
html[data-theme="dark"] [data-section="bornes"] .ap-row-online .ap-ticket-link {
    background: transparent !important;
    color: var(--theme-accent) !important;
    box-shadow: none;
}
html[data-theme="dark"] [data-section="bornes"] :is(.ap-row-offline, .ap-row-warning) .ap-ticket-link {
    color: #fff !important;
    background: #2572a4 !important;
    border-color: #2572a4 !important;
}
html[data-theme="dark"] [data-section="bornes"] :is(.ap-row-offline, .ap-row-warning) .ap-ticket-link:hover {
    background: #1c5d88 !important;
}
html[data-theme="dark"] .dashboard-empty-check {
    color: var(--theme-success);
    background: var(--theme-success-soft);
}
html[data-theme="dark"] .dashboard-recent-tickets-empty > span:not(.dashboard-empty-check) {
    color: var(--theme-muted) !important;
}