:root,
:root[data-theme="light"] {
    color-scheme: light;
    --gt-page: #f4f7fb;
    --gt-surface: #ffffff;
    --gt-surface-soft: #f7f9fc;
    --gt-surface-raised: #ffffff;
    --gt-border: #e2e9f1;
    --gt-border-strong: #cbd7e4;
    --gt-text: #102a43;
    --gt-text-secondary: #52667a;
    --gt-text-muted: #829ab1;
    --gt-primary: #087f67;
    --gt-primary-hover: #066c58;
    --gt-primary-soft: #d9f5ed;
    --gt-danger: #b42318;
    --gt-danger-soft: #fff0ef;
    --gt-danger-border: #fecdca;
    --gt-header: rgba(255, 255, 255, .96);
    --gt-sidebar-start: #102a43;
    --gt-sidebar-end: #0b1f33;
    --gt-sidebar-text: #f7fbff;
    --gt-sidebar-muted: #9fb3c8;
    --gt-overlay: rgba(10, 31, 51, .5);
    --gt-shadow: 0 14px 38px rgba(15, 42, 67, .09);
    --gt-card-shadow: 0 8px 28px rgba(15, 42, 67, .045);
    --gt-sidebar-shadow: 8px 0 32px rgba(15, 42, 67, .12);
    --gt-welcome-gradient: linear-gradient(125deg, #ffffff 0%, #f5fffc 100%);

    /* Radzen consumes these variables when its Material theme is active. */
    --rz-body-background-color: var(--gt-page);
    --rz-base-background-color: var(--gt-surface);
    --rz-text-color: var(--gt-text);
    --rz-text-secondary-color: var(--gt-text-secondary);
    --rz-border-color: var(--gt-border);
    --rz-panel-background-color: var(--gt-surface);
    --rz-grid-background-color: var(--gt-surface);
    --rz-input-background-color: var(--gt-surface);
    --rz-input-border: 1px solid var(--gt-border-strong);
    --rz-input-color: var(--gt-text);
    --rz-primary: #0c9476;
    --rz-primary-light: #17b890;
    --rz-primary-lighter: rgba(23, 184, 144, .14);
    --rz-primary-dark: #087f67;
    --rz-primary-darker: #066c58;
    --rz-on-primary-lighter: #087f67;
    --rz-dialog-mask-zindex: 2000;
    --rz-dialog-zindex: 2001;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --gt-page: #0c1622;
    --gt-surface: #152536;
    --gt-surface-soft: #192c3f;
    --gt-surface-raised: #1d3044;
    --gt-border: #2b4157;
    --gt-border-strong: #3a536b;
    --gt-text: #edf4fa;
    --gt-text-secondary: #b5c4d3;
    --gt-text-muted: #8fa4b8;
    --gt-primary: #31d6a8;
    --gt-primary-hover: #60e0bd;
    --gt-primary-soft: rgba(49, 214, 168, .14);
    --gt-danger: #ff8b83;
    --gt-danger-soft: rgba(255, 107, 97, .12);
    --gt-danger-border: rgba(255, 139, 131, .34);
    --gt-header: rgba(21, 37, 54, .94);
    --gt-sidebar-start: #0a1928;
    --gt-sidebar-end: #07121d;
    --gt-sidebar-text: #f4f9fd;
    --gt-sidebar-muted: #96abc0;
    --gt-overlay: rgba(1, 7, 13, .72);
    --gt-shadow: 0 16px 42px rgba(0, 0, 0, .28);
    --gt-card-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    --gt-sidebar-shadow: 8px 0 34px rgba(0, 0, 0, .24);
    --gt-welcome-gradient: linear-gradient(125deg, #152536 0%, #142c35 100%);

    --rz-base: #263d55;
    --rz-base-50: #101e2c;
    --rz-base-100: #152536;
    --rz-base-200: #1d3044;
    --rz-base-300: #2b4157;
    --rz-base-400: #3a536b;
    --rz-base-500: #647b90;
    --rz-base-600: #8fa4b8;
    --rz-base-700: #b5c4d3;
    --rz-base-800: #d4e0ea;
    --rz-base-900: #edf4fa;
    --rz-base-light: #1d3044;
    --rz-base-lighter: #263d55;
    --rz-base-dark: #8fa4b8;
    --rz-base-darker: #edf4fa;
    --rz-on-base: #edf4fa;
    --rz-on-base-light: #edf4fa;
    --rz-on-base-lighter: #edf4fa;
    --rz-on-base-dark: #0c1622;
    --rz-on-base-darker: #0c1622;
    --rz-primary: #31d6a8;
    --rz-primary-light: #60e0bd;
    --rz-primary-lighter: rgba(49, 214, 168, .16);
    --rz-primary-dark: #17b890;
    --rz-primary-darker: #0c9476;
    --rz-on-primary: #071a16;
    --rz-on-primary-light: #071a16;
    --rz-on-primary-lighter: #60e0bd;
    --rz-on-primary-dark: #071a16;
    --rz-on-primary-darker: #edf4fa;
    --rz-body-background-color: var(--gt-page);
    --rz-base-background-color: var(--gt-surface);
    --rz-text-color: var(--gt-text);
    --rz-text-secondary-color: var(--gt-text-secondary);
    --rz-border-color: var(--gt-border);
    --rz-panel-background-color: var(--gt-surface);
    --rz-grid-background-color: var(--gt-surface);
    --rz-input-background-color: var(--gt-surface-raised);
    --rz-input-border: 1px solid var(--gt-border-strong);
    --rz-input-color: var(--gt-text);
    --rz-input-value-color: var(--gt-text);
    --rz-input-placeholder-color: var(--gt-text-muted);
    --rz-input-disabled-background-color: var(--gt-surface-soft);
    --rz-input-disabled-color: var(--gt-text-muted);
    --rz-dialog-background-color: var(--gt-surface-raised);
    --rz-dialog-title-background-color: var(--gt-surface-raised);
    --rz-dialog-mask-background-color: rgba(1, 7, 13, .74);
    --rz-dropdown-open-background-color: var(--gt-surface-raised);
    --rz-notification-container-background-color: var(--gt-surface-raised);
}

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

body,
.app-shell,
.app-header,
.app-sidebar,
.rz-dialog,
.rz-card,
.rz-data-grid,
.rz-datatable,
.rz-dropdown,
.rz-textbox,
.form-control {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.app-shell {
    color: var(--gt-text);
    background: var(--gt-page);
}

.app-sidebar {
    color: var(--gt-sidebar-text);
    background: linear-gradient(180deg, var(--gt-sidebar-start) 0%, var(--gt-sidebar-end) 100%);
}

.brand small {
    color: var(--gt-sidebar-muted);
}

.app-header {
    color: var(--gt-text);
    background: var(--gt-header);
    border-bottom-color: var(--gt-border);
}

.header-copy > span,
.user-copy strong {
    color: var(--gt-text);
}

.header-copy small,
.user-copy small {
    color: var(--gt-text-muted);
}

.menu-button {
    color: var(--gt-text);
    background: var(--gt-surface-soft);
}

.user-avatar {
    color: var(--gt-primary);
    background: var(--gt-primary-soft);
}

.logout-button {
    color: var(--gt-text-secondary);
}

.logout-button:hover {
    color: var(--gt-danger);
    background: var(--gt-danger-soft);
}

.sidebar-overlay {
    background: var(--gt-overlay);
}

.rz-card,
.rz-dialog,
.rz-dialog-titlebar,
.rz-dialog-content,
.rz-data-grid,
.rz-datatable,
.rz-panel,
.rz-fieldset,
.modal-content,
.card {
    color: var(--gt-text);
    border-color: var(--gt-border);
    background: var(--gt-surface);
    box-shadow: var(--gt-shadow);
}

.rz-dialog-titlebar,
.rz-dialog-content {
    color: var(--gt-text);
    background: var(--gt-surface-raised);
}

.rz-dialog-title,
.rz-dialog-titlebar .rz-dialog-title,
.rz-dialog-content .rz-label,
.rz-label,
.rz-text-h1,
.rz-text-h2,
.rz-text-h3,
.rz-text-h4,
.rz-text-h5,
.rz-text-h6 {
    color: var(--gt-text);
}

.rz-grid-table,
.rz-grid-table td,
.rz-grid-table th,
.rz-datatable-data td,
.rz-datatable-thead th,
.table,
.table > :not(caption) > * > * {
    color: var(--gt-text);
    border-color: var(--gt-border);
    background-color: transparent;
}

.rz-grid-table tbody tr:hover,
.rz-datatable-data tr:hover,
.table-hover > tbody > tr:hover > * {
    color: var(--gt-text);
    background: var(--gt-surface-soft);
}

.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-numeric,
.rz-spinner,
.rz-datepicker,
.rz-multiselect,
.rz-calendar,
.form-control,
.form-select {
    color: var(--gt-text);
    border-color: var(--gt-border-strong);
    background: var(--gt-surface-raised);
}

.rz-textbox::placeholder,
.rz-inputtext::placeholder,
.form-control::placeholder,
.login-input::placeholder {
    color: var(--gt-text-muted);
    opacity: 1;
}

.rz-inputtext,
.rz-dropdown-label,
.rz-multiselect-label,
.rz-numeric input,
.rz-datepicker input {
    color: var(--gt-text);
}

.rz-dropdown-panel,
.rz-popup,
.rz-menu,
.rz-context-menu,
.rz-datepicker-calendar,
.dropdown-menu {
    color: var(--gt-text);
    border-color: var(--gt-border);
    background: var(--gt-surface-raised);
    box-shadow: var(--gt-shadow);
}

:root[data-theme="dark"] .green .metric-icon {
    color: #60e0bd;
    background: rgba(49, 214, 168, .14);
}

:root[data-theme="dark"] .blue .metric-icon {
    color: #75bfff;
    background: rgba(61, 155, 233, .14);
}

:root[data-theme="dark"] .purple .metric-icon {
    color: #c0a1ee;
    background: rgba(151, 103, 216, .14);
}

:root[data-theme="dark"] .orange .metric-icon {
    color: #ffbd73;
    background: rgba(255, 152, 43, .14);
}

:root[data-theme="dark"] .teal .metric-icon {
    color: #73d9de;
    background: rgba(45, 188, 194, .14);
}

:root[data-theme="dark"] .indigo .metric-icon {
    color: #aeb8ff;
    background: rgba(106, 122, 235, .14);
}

:root[data-theme="dark"] .rose .metric-icon {
    color: #ff9cba;
    background: rgba(224, 80, 124, .14);
}

:root[data-theme="dark"] .status-pill.active,
:root[data-theme="dark"] .status-badge {
    color: #60e0bd;
    background: rgba(49, 214, 168, .14);
}

:root[data-theme="dark"] .status-pill.inactive {
    color: var(--gt-text-muted);
    background: var(--gt-surface-soft);
}

.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-highlight,
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--gt-text);
    background: var(--gt-primary-soft);
}

.text-muted,
.rz-helper-text {
    color: var(--gt-text-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
    body,
    .app-shell,
    .app-header,
    .app-sidebar,
    .rz-dialog,
    .rz-card,
    .rz-data-grid,
    .rz-datatable,
    .rz-dropdown,
    .rz-textbox,
    .form-control {
        transition: none;
    }
}