:root {
    --ao-page-bg: #f5f6f8;
    --ao-card-bg: #ffffff;
    --ao-text: #111827;
    --ao-muted: #6b7280;
    --ao-border: #e2e8f0;
    --ao-topbar-bg: #ffffff;
    --ao-sidebar-bg: #ffffff;
    --ao-sidebar-text: #111827;
    --ao-sidebar-muted: #6b7280;
    --ao-sidebar-hover-bg: #eef2f7;
    --ao-sidebar-active-bg: #e0edff;
    --ao-sidebar-active-text: #1d4ed8;
    --bs-body-bg: var(--ao-page-bg);
    --bs-body-color: var(--ao-text);
    --bs-border-color: var(--ao-border);
}

[data-bs-theme="dark"] {
    --ao-page-bg: #0b1220;
    --ao-card-bg: #111827;
    --ao-text: #e5e7eb;
    --ao-muted: #9ca3af;
    --ao-border: #1f2937;
    --ao-topbar-bg: #111827;
    --ao-sidebar-bg: #0f172a;
    --ao-sidebar-text: #e5e7eb;
    --ao-sidebar-muted: #9ca3af;
    --ao-sidebar-hover-bg: #1f2937;
    --ao-sidebar-active-bg: #1e3a8a;
    --ao-sidebar-active-text: #e0e7ff;
    --bs-body-bg: var(--ao-page-bg);
    --bs-body-color: var(--ao-text);
    --bs-border-color: var(--ao-border);
}

html,
body {
    background-color: var(--ao-page-bg);
    color: var(--ao-text);
}

body.ao-theme-dark {
    background-color: var(--ao-page-bg);
}

.text-muted {
    color: var(--ao-muted) !important;
}

.card,
.grid-toolbar-card {
    background-color: var(--ao-card-bg);
    color: var(--ao-text);
    border-color: var(--ao-border);
}

[data-bs-theme="dark"] .dxbs-grid,
[data-bs-theme="dark"] .dxbs-grid .dxbs-table,
[data-bs-theme="dark"] .dxbl-grid-table {
    background-color: var(--ao-card-bg);
    color: var(--ao-text);
}

[data-bs-theme="dark"] .dxbs-grid .dxbs-table > thead > tr > th,
[data-bs-theme="dark"] .dxbl-grid-table > thead > tr > th {
    background-color: #1f2937;
    color: var(--ao-text);
    border-color: var(--ao-border);
}

[data-bs-theme="dark"] .dxbs-grid .dxbs-table > tbody > tr > td,
[data-bs-theme="dark"] .dxbl-grid-table > tbody > tr > td {
    background-color: var(--ao-card-bg);
    color: var(--ao-text);
    border-color: var(--ao-border);
}