/*
 * Web dashboard light/dark theme (customers, merchants, agents).
 * Colors come from Settings > Theme & Colors through <x-role-branding-theme/> (--wg-* tokens).
 * [data-theme] on <html> is set before paint by frontend.layouts.partials._pwa_theme and switched
 * by the sun/moon button (backend/js/wongate-theme.js with data-attr="data-theme").
 */
:root,
html[data-theme="light"] {
    --front-on-accent: #fff;
    --wg-bg: var(--wg-light-bg, #f4f6fa);
    --wg-card: var(--wg-light-card, #fff);
    --wg-card-2: #f7f8fb;
    --wg-card-3: #eef1f6;
    --wg-border: var(--wg-light-border, #e6e8ee);
    --wg-text: #0f1115;
    --wg-text-2: #374151;
    --wg-muted: #6b7180;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --wg-bg: var(--wg-dark-bg, #0b0c0e);
    --wg-card: var(--wg-dark-card, #16171a);
    --wg-card-2: var(--wg-dark-card-2, #1b1c20);
    --wg-card-3: var(--wg-dark-card-3, #222327);
    --wg-border: var(--wg-dark-border, #26282d);
    --wg-text: #ecedef;
    --wg-text-2: #c4c8d0;
    --wg-muted: #8a8f99;

    /* Frontend semantic colors */
    --front-color-bg: var(--wg-bg);
    --front-color-card: var(--wg-card);
    --front-color-surface: var(--wg-card-2);
    --front-color-surface-soft: var(--wg-card-3);
    --front-color-heading: var(--wg-text);
    --front-color-text: var(--wg-text-2);
    --front-color-text-rgb: 196, 200, 208;
    --front-color-text-soft: #a9aeb8;
    --front-color-muted: var(--wg-muted);
    --front-color-muted-rgb: 138, 143, 153;
    --front-color-border: var(--wg-border);
    --front-color-border-soft: var(--wg-border);
    --front-color-white: var(--wg-card);
    --front-color-white-rgb: var(--wg-dark-card-rgb, 22, 23, 26);
    --background-color-rgb: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-color-agent-soft: rgba(var(--role-agent-primary-rgb), 0.16);
    --front-color-agent-soft-border: rgba(var(--role-agent-primary-rgb), 0.3);
    --ud-text: var(--wg-text);

    /* Fixed palette entries: light neutrals become surfaces, near-black text becomes light text */
    --front-palette-0b1220: var(--wg-text);
    --front-palette-0d1338: var(--wg-text);
    --front-palette-0f172a: var(--wg-text);
    --front-palette-101828: var(--wg-text);
    --front-palette-10203c: var(--wg-text);
    --front-palette-111827: var(--wg-text);
    --front-palette-11233f: var(--wg-text);
    --front-palette-172033: var(--wg-text);
    --front-palette-1b2551: var(--wg-text);
    --front-palette-1e2749: var(--wg-text);
    --front-palette-1e293b: var(--wg-text);
    --front-palette-1f2937: var(--wg-text);
    --front-palette-1f2a44: var(--wg-text);
    --front-palette-203050: var(--wg-text);
    --front-palette-203354: var(--wg-text);
    --front-palette-212529: var(--wg-text);
    --front-palette-23315b: var(--wg-text);
    --front-palette-243156: var(--wg-text);
    --front-palette-24325b: var(--wg-text);
    --front-palette-24365b: var(--wg-text-2);
    --front-palette-273256: var(--wg-text);
    --front-palette-28345a: var(--wg-text-2);
    --front-palette-2d3658: var(--wg-text-2);
    --front-palette-333: var(--wg-text-2);
    --front-palette-334155: var(--wg-text-2);
    --front-palette-3a4260: var(--wg-text-2);
    --front-palette-41506f: var(--wg-text-2);
    --front-palette-424242: var(--wg-text-2);
    --front-palette-444: var(--wg-text-2);
    --front-palette-475467: var(--wg-text-2);
    --front-palette-475569: var(--wg-text-2);
    --front-palette-49546d: var(--wg-text-2);
    --front-palette-4b5563: var(--wg-text-2);
    --front-palette-4f536c: var(--wg-text-2);
    --front-palette-555: var(--wg-text-2);
    --front-palette-ccead7: var(--wg-border);
    --front-palette-cfe8da: var(--wg-border);
    --front-palette-d2dcf8: var(--wg-border);
    --front-palette-d6deed: var(--wg-border);
    --front-palette-d7ddef: var(--wg-border);
    --front-palette-d7defe: var(--wg-border);
    --front-palette-d7dfef: var(--wg-border);
    --front-palette-d7e3ff: var(--wg-border);
    --front-palette-d8e0f3: var(--wg-border);
    --front-palette-d9dcff: var(--wg-card-3);
    --front-palette-d9dee7: var(--wg-card-3);
    --front-palette-d9deee: var(--wg-border);
    --front-palette-d9e0f4: var(--wg-border);
    --front-palette-d9e1ef: var(--wg-border);
    --front-palette-d9e1f0: var(--wg-border);
    --front-palette-d9e2f3: var(--wg-border);
    --front-palette-d9e3f8: var(--wg-border);
    --front-palette-dbe2f2: var(--wg-border);
    --front-palette-dbe2ff: var(--wg-border);
    --front-palette-dbe3f2: var(--wg-border);
    --front-palette-dbe3f3: var(--wg-border);
    --front-palette-dbe4f3: var(--wg-border);
    --front-palette-dbeafe: var(--wg-border);
    --front-palette-dce5f5: var(--wg-border);
    --front-palette-dce5f7: var(--wg-border);
    --front-palette-ddd: var(--wg-border);
    --front-palette-dde0f5: var(--wg-card-3);
    --front-palette-dde3f5: var(--wg-border);
    --front-palette-dde4f2: var(--wg-border);
    --front-palette-dde4f4: var(--wg-border);
    --front-palette-dee2e6: var(--wg-border);
    --front-palette-dfe4f2: var(--wg-border);
    --front-palette-dfe4f3: var(--wg-border);
    --front-palette-dfe7f5: var(--wg-border);
    --front-palette-dfe7f6: var(--wg-border);
    --front-palette-e0def8: var(--wg-border);
    --front-palette-e0e0e0: var(--wg-border);
    --front-palette-e0e4fc: var(--wg-card-3);
    --front-palette-e0e7ff: var(--wg-border);
    --front-palette-e1e6f3: var(--wg-border);
    --front-palette-e1e6f4: var(--wg-border);
    --front-palette-e1e8fa: var(--wg-border);
    --front-palette-e1ede6: var(--wg-card-3);
    --front-palette-e1f7fc: var(--wg-card-3);
    --front-palette-e2e2e2: var(--wg-border);
    --front-palette-e2e6f4: var(--wg-border);
    --front-palette-e2e7f4: var(--wg-border);
    --front-palette-e2e8f0: var(--wg-border);
    --front-palette-e3e7ff: var(--wg-border);
    --front-palette-e3e8ee: var(--wg-border);
    --front-palette-e3e8f4: var(--wg-border);
    --front-palette-e3e8fc: var(--wg-card-3);
    --front-palette-e3f2fd: var(--wg-card-3);
    --front-palette-e4e8f5: var(--wg-border);
    --front-palette-e4e8ff: var(--wg-border);
    --front-palette-e5e5e5: var(--wg-border);
    --front-palette-e5e6e7: var(--wg-card-3);
    --front-palette-e5e7eb: var(--wg-border);
    --front-palette-e5eaff: var(--wg-border);
    --front-palette-e6e9ef: var(--wg-card-3);
    --front-palette-e6e9f4: var(--wg-border);
    --front-palette-e6eafd: var(--wg-border);
    --front-palette-e6ebf7: var(--wg-border);
    --front-palette-e6ecff: var(--wg-card-3);
    --front-palette-e6eefb: var(--wg-card-3);
    --front-palette-e7ebf6: var(--wg-border);
    --front-palette-e7edf5: var(--wg-border);
    --front-palette-e7edf9: var(--wg-border);
    --front-palette-e7f1ff: var(--wg-card-3);
    --front-palette-e8eaf0: var(--wg-border);
    --front-palette-e9efff: var(--wg-card-3);
    --front-palette-e9f9ef: var(--wg-card-3);
    --front-palette-eaecf3: var(--wg-card-3);
    --front-palette-eaeeff: var(--wg-card-3);
    --front-palette-eaf5ff: var(--wg-card-3);
    --front-palette-ebf3ef: var(--wg-card-3);
    --front-palette-eceff1: var(--wg-border);
    --front-palette-ecfdf5: var(--wg-card);
    --front-palette-edf1f7: var(--wg-border);
    --front-palette-edf1fa: var(--wg-border);
    --front-palette-edf1fb: var(--wg-border);
    --front-palette-edf1ff: var(--wg-card-3);
    --front-palette-edf2f9: var(--wg-border);
    --front-palette-edf2ff: var(--wg-card-3);
    --front-palette-edf3ff: var(--wg-card-3);
    --front-palette-edf7ff: var(--wg-card);
    --front-palette-edf8ff: var(--wg-card);
    --front-palette-edf9f1: var(--wg-card);
    --front-palette-edfaf4: var(--wg-card);
    --front-palette-eee: var(--wg-border);
    --front-palette-eeeeee: var(--wg-border);
    --front-palette-eef0f7: var(--wg-border);
    --front-palette-eef1f5: var(--wg-card-3);
    --front-palette-eef2f7: var(--wg-card-3);
    --front-palette-eef2f8: var(--wg-card-3);
    --front-palette-eef2ff: var(--wg-card-3);
    --front-palette-eef3ff: var(--wg-card-3);
    --front-palette-eef4ff: var(--wg-card-3);
    --front-palette-eefaf3: var(--wg-card);
    --front-palette-eff0fd: var(--wg-card-3);
    --front-palette-eff6ff: var(--wg-card);
    --front-palette-f0f2f7: var(--wg-border);
    --front-palette-f0f3fc: var(--wg-card-3);
    --front-palette-f0f4f8: var(--wg-card-3);
    --front-palette-f0f4ff: var(--wg-card);
    --front-palette-f0f6ff: var(--wg-card);
    --front-palette-f0fdf4: var(--wg-card);
    --front-palette-f1f1f1: var(--wg-card-3);
    --front-palette-f1f3f5: var(--wg-card-3);
    --front-palette-f1f3ff: var(--wg-card);
    --front-palette-f1f4f9: var(--wg-card);
    --front-palette-f1f5f9: var(--wg-card);
    --front-palette-f2f5ff: var(--wg-card);
    --front-palette-f2fcf5: var(--wg-card);
    --front-palette-f3e5f5: var(--wg-card-3);
    --front-palette-f3f5ff: var(--wg-card);
    --front-palette-f3f6ff: var(--wg-card);
    --front-palette-f3f7fb: var(--wg-card);
    --front-palette-f4f6fc: var(--wg-card);
    --front-palette-f4f7fc: var(--wg-card);
    --front-palette-f4f7ff: var(--wg-card);
    --front-palette-f4f8ff: var(--wg-card);
    --front-palette-f5f3ff: var(--wg-card);
    --front-palette-f5f4ff: var(--wg-card);
    --front-palette-f5f5f5: var(--wg-card);
    --front-palette-f5f6f6: var(--wg-card);
    --front-palette-f5f6ff: var(--wg-card);
    --front-palette-f6f7fd: var(--wg-card);
    --front-palette-f6f8ff: var(--wg-card);
    --front-palette-f7f4ff: var(--wg-card);
    --front-palette-f7f8fe: var(--wg-card);
    --front-palette-f7f8ff: var(--wg-card);
    --front-palette-f7f9fb: var(--wg-card);
    --front-palette-f7f9fc: var(--wg-card);
    --front-palette-f7fafc: var(--wg-card);
    --front-palette-f7fafd: var(--wg-card);
    --front-palette-f7faff: var(--wg-card);
    --front-palette-f8f9fa: var(--wg-card);
    --front-palette-f8f9ff: var(--wg-card);
    --front-palette-f8fafc: var(--wg-card);
    --front-palette-f8faff: var(--wg-card);
    --front-palette-f8fbff: var(--wg-card);
    --front-palette-f9e0e3: var(--wg-card-3);
    --front-palette-f9f9f9: var(--wg-card);
    --front-palette-f9fafb: var(--wg-card);
    --front-palette-f9fafc: var(--wg-card);
    --front-palette-f9faff: var(--wg-card);
    --front-palette-faf3ff: var(--wg-card);
    --front-palette-fafbfd: var(--wg-card);
    --front-palette-fafbff: var(--wg-card);
    --front-palette-fafcff: var(--wg-card);
    --front-palette-fbeaec: var(--wg-card-3);
    --front-palette-fbfcfe: var(--wg-card);
    --front-palette-fbfcff: var(--wg-card);
    --front-palette-fbfdff: var(--wg-card);
    --front-palette-fcfdff: var(--wg-card);
    --front-palette-fcfffd: var(--wg-card);
    --front-palette-fdfbff: var(--wg-card);
    --front-palette-fdfdff: var(--wg-card);
    --front-palette-fdfefe: var(--wg-card);
    --front-palette-fee2e2: var(--wg-card-3);
    --front-palette-fef5f4: var(--wg-card);
    --front-palette-ffedf2: var(--wg-card-3);
    --front-palette-fff0f1: var(--wg-card);
    --front-palette-fff1f2: var(--wg-card);
    --front-palette-fff3da: var(--wg-card);
    --front-palette-fff3e6: var(--wg-card);
    --front-palette-fff4df: var(--wg-card);
    --front-palette-fff6e8: var(--wg-card);
    --front-palette-fff7e5: var(--wg-card);
    --front-palette-fff7e8: var(--wg-card);
    --front-palette-fff7e9: var(--wg-card);
    --front-palette-fff7eb: var(--wg-card);
    --front-palette-fff7ed: var(--wg-card);
    --front-palette-fff7f7: var(--wg-card);
    --front-palette-fff8e4: var(--wg-card);
    --front-palette-fff8e5: var(--wg-card);
    --front-palette-fff8eb: var(--wg-card);
    --front-palette-fffaeb: var(--wg-card);
    --front-palette-fffbeb: var(--wg-card);
    --front-palette-fffbf0: var(--wg-card);
    --front-palette-fffdf9: var(--wg-card);

    /* Light rgb triplets used in rgba() backgrounds */
    --front-rgb-217-226-241: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-221-230-243: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-223-230-243: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-223-236-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-224-245-229: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-226-232-240: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-229-229-229: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-229-235-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-230-234-245: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-231-238-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-232-238-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-235-243-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-239-242-253: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-239-243-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-239-246-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-242-246-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-244-246-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-247-250-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-247-251-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-248-250-252: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-248-250-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-248-251-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-250-251-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-250-253-251: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-251-229-233: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-251-252-255: var(--wg-dark-card-rgb, 22, 23, 26);
    --front-rgb-253-250-251: var(--wg-dark-card-rgb, 22, 23, 26);

    /* Bootstrap 5.3 */
    --bs-body-bg: var(--wg-bg);
    --bs-body-bg-rgb: var(--wg-dark-bg-rgb, 11, 12, 14);
    --bs-body-color: var(--wg-text-2);
    --bs-emphasis-color: #fff;
    --bs-heading-color: var(--wg-text);
    --bs-secondary-color: var(--wg-muted);
    --bs-tertiary-color: var(--wg-muted);
    --bs-secondary-bg: var(--wg-card-2);
    --bs-tertiary-bg: var(--wg-card-3);
    --bs-border-color: var(--wg-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-light: var(--wg-card-3);
    --bs-light-rgb: var(--wg-dark-card-rgb, 22, 23, 26);
    --bs-white-rgb: var(--wg-dark-card-rgb, 22, 23, 26);
    --bs-dark-rgb: 236, 237, 239;
    --bs-link-color: var(--front-color-primary);
    --bs-link-color-rgb: var(--role-user-primary-rgb);
}

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

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--wg-text); }

/* Surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .popover {
    background-color: var(--wg-card);
    border-color: var(--wg-border);
    color: var(--wg-text-2);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { background-color: transparent; border-color: var(--wg-border); }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body { background-color: var(--wg-card) !important; }
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-body-secondary { background-color: var(--wg-card-3) !important; }
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black { color: var(--wg-text) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--wg-muted) !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] hr { border-color: var(--wg-border) !important; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* Tables */
html[data-theme="dark"] .table {
    --bs-table-color: var(--wg-text-2);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wg-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--wg-text-2);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-color: var(--wg-text);
    color: var(--wg-text-2);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-light {
    --bs-table-bg: var(--wg-card-2);
    --bs-table-color: var(--wg-muted);
    background-color: var(--wg-card-2) !important;
    color: var(--wg-muted) !important;
    border-color: var(--wg-border) !important;
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"] {
    background-color: var(--wg-card-2);
    border-color: var(--wg-border);
    color: var(--wg-text);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder { color: #6b707a; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--wg-card-2);
    color: var(--wg-text);
    border-color: var(--front-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--front-color-primary-rgb), 0.18);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] { background-color: var(--wg-card-3); }
html[data-theme="dark"] .form-check-input { background-color: var(--wg-card-3); border-color: #3a3d44; }
html[data-theme="dark"] .form-check-input:checked { background-color: var(--front-color-primary); border-color: var(--front-color-primary); }

/* Buttons */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-light {
    background-color: var(--wg-card-2);
    border-color: var(--wg-border);
    color: var(--wg-text);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--wg-card-3); color: #fff; }

/* Alerts and badges as soft tints */
html[data-theme="dark"] .alert { border-color: var(--wg-border); }
html[data-theme="dark"] .alert-success { background: rgba(var(--wg-success-rgb), 0.12); color: #a7f3c0; }
html[data-theme="dark"] .alert-warning { background: rgba(var(--wg-warning-rgb), 0.12); color: #fcd9a0; }
html[data-theme="dark"] .alert-danger { background: rgba(var(--wg-danger-rgb), 0.12); color: #fecaca; }
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary { background: rgba(var(--wg-info-rgb), 0.12); color: #bae6fd; }
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light { background: var(--wg-card-3) !important; color: var(--wg-text) !important; }

/* Charts */
html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-legend-text { fill: var(--wg-muted) !important; color: var(--wg-muted) !important; }
html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-xaxis line,
html[data-theme="dark"] .apexcharts-grid-borders line { stroke: var(--wg-border) !important; }
html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-xaxistooltip { background: var(--wg-card-2) !important; border-color: var(--wg-border) !important; color: var(--wg-text) !important; }
html[data-theme="dark"] .apexcharts-tooltip-title { background: var(--wg-card-3) !important; border-color: var(--wg-border) !important; }

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c2e34; border-radius: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* Theme switch button (desktop header and mobile app header) */
.wg-theme-toggle { position: relative; }
.wg-theme-toggle .wg-icon-sun { display: none; }
html[data-theme="dark"] .wg-theme-toggle .wg-icon-sun { display: inline-block; }
html[data-theme="dark"] .wg-theme-toggle .wg-icon-moon { display: none; }

/* Tabs */
html[data-theme="dark"] .nav-tabs { border-color: var(--wg-border); }
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--wg-card);
    border-color: var(--wg-border) var(--wg-border) var(--wg-card);
    color: var(--wg-text);
}
html[data-theme="dark"] .nav-link.btn-link { background-color: transparent; }