/* Shared TR/DE theme. Light mode keeps the existing page styles intact. */
.theme-toggle { flex: 0 0 auto; display: inline-grid !important; place-items: center; }
.theme-toggle:focus-visible { outline: 3px solid #52b6b0; outline-offset: 3px; }
/* Read final background colors while switching, not an in-flight light/dark fade. */
html.theme-changing *, html.theme-changing *::before, html.theme-changing *::after { transition: none !important; }
.login-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 10; width: 44px; height: 44px; border-radius: 14px; background: #fff; color: #19263a; border: 1px solid #cbd5e1; }
html[data-theme="dark"] {
    color-scheme: dark;
    --layout-bg: #101722;
    --layout-surface: #1a2432;
    --layout-surface-muted: #202e3e;
    --layout-border: #36475a;
    --layout-text: #e5edf5;
    --layout-muted: #acbed0;
    --layout-brand: #e6a184;
    --layout-brand-strong: #f3b99e;
    --layout-brand-soft: #3d302e;
    --wf-ink: #e5edf5;
    --wf-muted: #acbed0;
    --wf-line: #36475a;
    --wf-soft: #202e3e;
    --wf-danger: #ffb4ae;
    --ga4-white: #1a2432;
    --ga4-border: #36475a;
    --ga4-border-strong: #536b83;
    --ga4-text: #e5edf5;
    --ga4-text-soft: #acbed0;
    --ga4-title: #f1f5fa;
    --ga4-secondary-bg: #202e3e;
    --ga4-primary-soft: #193f3c;
    --ga4-danger-soft: #482b30;
    --ga4-success-soft: #193f34;
    --ga4-info-soft: #253b58;
    --bs-body-bg: #101722;
    --bs-body-color: #e5edf5;
    --bs-border-color: #36475a;
}
@media screen {
    /* Text paint is white even where old page rules/inline colors have higher
       specificity. No image/filter inversion: product photos and logos keep their colors. */
    html[data-theme="dark"] body,
    html[data-theme="dark"] body * {
        -webkit-text-fill-color: #fff !important;
        caret-color: #fff;
    }
    html[data-theme="dark"] body :is(input, textarea)::placeholder {
        color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: .8;
    }
    html[data-theme="dark"] body svg text { fill: #fff !important; }
    html[data-theme="dark"] body .theme-auto-surface { background-color: #1a2432 !important; }
    html[data-theme="dark"] body .theme-contrast-light,
    html[data-theme="dark"] body .theme-contrast-light * {
        color: #111 !important; -webkit-text-fill-color: #111 !important;
    }
    html[data-theme="dark"] body .theme-contrast-light .theme-auto-surface,
    html[data-theme="dark"] body .theme-contrast-light .theme-auto-surface * {
        color: #fff !important; -webkit-text-fill-color: #fff !important;
    }
    html[data-theme="dark"] body { background: var(--layout-bg) !important; color: var(--layout-text) !important; }
    html[data-theme="dark"] body :is(#page-topbar, .vertical-menu, .navbar-brand-box, .footer,
        .card, .card-header, .card-footer, .modal-content, .modal-header, .modal-footer,
        .dropdown-menu, .list-group-item, .accordion-item, .accordion-button,
        .offcanvas, .popover, .toast, .swal2-popup, .layout-footer-info,
        .wf-card, .wf-stat, .wf-step, .wf-dialog, .wf-dialog-foot, .wf-drawer, .wf-notice,
        .epr-card, .epr-tabs, .epr-record, .epr-summary > div, .pack-card, .weee-card,
        .weee-progress-card, .summary-card, .invoice-summary-card, .dashboard-sync-card, .dashboard-sync-banner,
        .login-card, .login-form-panel, .login-card-wrapper,
        [class$="-panel"], [class$="-card"], [class$="-toolbar"]) {
        background: var(--layout-surface) !important;
        color: var(--layout-text) !important;
        border-color: var(--layout-border) !important;
    }
    html[data-theme="dark"] body .dashboard-sync-banner {
        background: #1a2432 !important;
        border-color: #53677d !important;
    }
    html[data-theme="dark"] body :is(.main-content, .page-content, #layout-wrapper, .epr-page, .wf-page, .pack-shell, .weee-shell) {
        color: var(--layout-text) !important;
    }
    html[data-theme="dark"] body :is(.wf-hero, .pack-hero, .weee-hero, .epr-hero,
        .bg-white, .bg-light, .bg-soft-primary, .table-light, .wf-step-editor, .wf-user-results,
        .wf-wizard-tab, .wf-person, .wf-chip, .wf-notice.unread, .wf-badge, .epr-badge,
        .epr-streams b, .epr-owner, .badge-rule, .notice, .alert, .session-timer) {
        background: var(--layout-surface-muted) !important;
        color: var(--layout-text) !important;
        border-color: var(--layout-border) !important;
    }
    html[data-theme="dark"] body :is(h1, h2, h3, h4, h5, h6, label, legend,
        .card-title, .modal-title, .swal2-title, .swal2-html-container, .form-label,
        .pack-title, .weee-title, .epr-clamped, .invoice-summary-item, .invoice-summary-title,
        .summary-value, .summary-title, .wf-name, .wa-contact-name, .wa-conversation-name) { color: var(--layout-text) !important; }
    html[data-theme="dark"] body :is(.text-muted, .text-secondary, .form-text, .text-black-50,
        .epr-muted, .epr-date, .epr-next-meta, .pack-sub, .weee-sub, .wf-sub,
        .invoice-summary-meta, .swal2-content, .wa-message-meta) { color: var(--layout-muted) !important; }
    html[data-theme="dark"] body :is(.text-dark, .text-body, .text-black) { color: var(--layout-text) !important; }
    html[data-theme="dark"] body a:not(.btn):not(.wf-btn):not([class*="btn-"]) { color: #99caff; }
    html[data-theme="dark"] body :is(#sidebar-menu a, #sidebar-menu a i, .topbar-user-btn, .header-item, .version-notes-btn, .site-switch-btn) {
        color: var(--layout-text) !important;
        background-color: var(--layout-surface) !important;
        border-color: var(--layout-border) !important;
    }
    html[data-theme="dark"] body #sidebar-menu :is(a:hover, a.active, .mm-active > a) {
        color: #ffd2bd !important; background: #3c302f !important;
    }
    html[data-theme="dark"] body #sidebar-menu :is(.automail-menu-off > a, .automail-account-off, .automail-account-off i) {
        color: #ffb4ae !important; background: #482b30 !important;
    }
    html[data-theme="dark"] body #sidebar-menu a.automail-account-on { color: #8de0b6 !important; }
    html[data-theme="dark"] body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
        select, textarea, .form-control, .form-select, .input-group-text,
        .select2-selection, .select2-dropdown, .select2-search__field, .select2-results__option,
        .flatpickr-calendar, .flatpickr-months, .flatpickr-weekdays, .flatpickr-day, .ui-datepicker) {
        background-color: #152030 !important; color: var(--layout-text) !important; border-color: #53677d !important;
    }
    html[data-theme="dark"] body :is(input, textarea)::placeholder { color: #9db0c3 !important; opacity: 1; }
    html[data-theme="dark"] body :is(input, select, textarea):disabled { color: #b3bfcc !important; background: #293341 !important; }
    html[data-theme="dark"] body :is(input, select, textarea):focus { border-color: #60c3bb !important; }
    html[data-theme="dark"] body :is(.select2-results__option--highlighted, .flatpickr-day.selected, .page-item.active .page-link) {
        background: #237a77 !important; color: #fff !important;
    }
    html[data-theme="dark"] body :is(table, .table, td, th) {
        --bs-table-bg: transparent; --bs-table-color: #e5edf5; --bs-table-striped-color: #e5edf5;
        --bs-table-striped-bg: #202e3e; --bs-table-hover-bg: #293b4f; --bs-table-hover-color: #fff;
        color: var(--layout-text) !important; border-color: var(--layout-border) !important;
    }
    html[data-theme="dark"] body :is(table, .table, tbody, td) { background-color: var(--layout-surface) !important; }
    html[data-theme="dark"] body :is(thead, th, table tfoot td) { background: var(--layout-surface-muted) !important; }
    html[data-theme="dark"] body tbody tr:hover > td { background: #293b4f !important; }
    html[data-theme="dark"] body :is(.btn-light, .btn-white, .btn-soft, .btn-outline-secondary, .page-link,
        .wf-btn:not(.wf-btn-primary), .wf-step-toggle, .invoice-copy-btn, .invoice-refresh-btn,
        .wa-notification-toggle, .wa-icon-button, .dt-button, .dataTables_wrapper .paginate_button) {
        background: var(--layout-surface-muted) !important; color: var(--layout-text) !important; border-color: #53677d !important;
    }
    html[data-theme="dark"] body :is(.badge, .wf-badge, .epr-badge, .alert) { border: 1px solid var(--layout-border); }
    html[data-theme="dark"] body :is(.alert-danger, .notice-error, .wf-badge.cancelled, .wf-badge.overdue) { color: #ffb4ae !important; background: #482b30 !important; }
    html[data-theme="dark"] body :is(.alert-success, .notice-ok, .wf-badge.completed, .wf-badge.active) { color: #99e4bc !important; background: #193f34 !important; }
    html[data-theme="dark"] body :is(.alert-warning, .epr-warning, .wf-badge.waiting, .wf-badge.correction) { color: #ffda8c !important; background: #453920 !important; }
    html[data-theme="dark"] body :is(.progress, .wf-progress, .invoice-progress) { background: #36475a !important; }
    html[data-theme="dark"] body .btn-close { filter: invert(1) grayscale(1); }
    html[data-theme="dark"] body :is(.apexcharts-tooltip, .apexcharts-menu, .apexcharts-xaxistooltip) {
        background: #202e3e !important; color: #e5edf5 !important; border-color: #53677d !important;
    }
    html[data-theme="dark"] body :is(.apexcharts-text, .apexcharts-legend-text) { fill: #c9d6e3 !important; color: #c9d6e3 !important; }
    html[data-theme="dark"] body :is(.apexcharts-gridline, .apexcharts-xaxis line, .apexcharts-yaxis line) { stroke: #36475a !important; }
    /* WhatsApp keeps incoming/outgoing bubbles distinct without changing image/emoji assets. */
    html[data-theme="dark"] body :is(.wa-shell, .wa-sidebar, .wa-main, .wa-chat-header, .wa-composer, .wa-contact-panel,
        .wa-emoji-picker, .wa-inline-reaction-picker, .wa-message-menu, .wa-conversation, .wa-settings-card) {
        background: #1a2432 !important; color: #e5edf5 !important; border-color: #36475a !important;
    }
    html[data-theme="dark"] body :is(.wa-conversation:hover, .wa-conversation.active) { background: #24423f !important; }
    html[data-theme="dark"] body .wa-messages { background-color: #101c26 !important; background-blend-mode: multiply; }
    html[data-theme="dark"] body .wa-message-bubble { background: #263748 !important; color: #e5edf5 !important; }
    html[data-theme="dark"] body .wa-message.outbound .wa-message-bubble { background: #195148 !important; }
    html[data-theme="dark"] body :is(.wf-message-dialog p, .wf-dialog small, .epr-streams span) { color: #acbed0 !important; }
    html[data-theme="dark"] body :is(.wa-page, .wa-workspace, .wa-conversations, .wa-details,
        .wa-chat, .wa-chat-header, .wa-composer, .wa-message-action-menu, .wa-modal-content) {
        color: #e5edf5 !important; background-color: #1a2432 !important; border-color: #36475a !important;
    }
    html[data-theme="dark"] body .wa-active-chat { background-color: #101c26 !important; background-blend-mode: multiply; }
    html[data-theme="dark"] body :is(.wa-conversation-item:hover, .wa-conversation-item.active) { background: #24423f !important; }
    html[data-theme="dark"] body .wa-bubble { background: #263748 !important; }
    html[data-theme="dark"] body .wa-message-row.outbound .wa-bubble { background: #195148 !important; }
    html[data-theme="dark"] body :is(.wa-bubble-text, .wa-conversation-head strong) { color: #e5edf5 !important; }
    html[data-theme="dark"] body .wa-bubble-meta { color: #bbd1ce !important; }
    html[data-theme="dark"] body .login-theme-toggle { color: #ffe0a0 !important; background: #202e3e !important; }
    html[data-theme="dark"] body.layout-modern :is(.btn-primary, .btn-success, .wf-btn-primary) {
        background: #246f69 !important; color: #fff !important; border-color: #328c83 !important;
    }
    html[data-theme="dark"] body.layout-modern .btn-primary:hover { background: #205f5a !important; }
    html[data-theme="dark"] .tb-page { --ink: #e5edf5; --muted: #acbed0; --line: #36475a; }
}
@media print {
    html[data-theme] {
        color-scheme: light; --layout-bg: #fff; --layout-surface: #fff; --layout-surface-muted: #f4f6f8;
        --layout-text: #111; --layout-muted: #444; --layout-border: #ccc;
        --wf-ink: #111; --wf-muted: #444; --wf-line: #ccc; --wf-soft: #f4f6f8;
        --ga4-white: #fff; --ga4-text: #111; --ga4-title: #111; --ga4-text-soft: #444;
    }
    html[data-theme] body { background: #fff !important; color: #111 !important; }
    [data-theme-toggle] { display: none !important; }
}