/*
 * Theme tokens for light and dark mode.
 * The active theme is set as data-theme="light|dark" on <html> by js/theme.js.
 * App styles use the --tt-* tokens, Radzen is themed by overriding its --rz-* variables,
 * Syncfusion is switched to bootstrap5-dark.css by js/theme.js.
 */

:root {
    --tt-body-bg: #ffffff;
    --tt-body-color: #212529;
    --tt-link-color: #0071c1;
    --tt-topbar-bg: #f7f7f7;
    --tt-topbar-border: #d6d5d5;
    --tt-sidebar-bg: linear-gradient(180deg, rgb(67, 108, 180) 0%, #A2B8E0 70%);
    --tt-row-alt-bg: #f7f8fb;
    --tt-entry-draft-bg: rgba(209, 212, 217, 0.7);
    --tt-entry-draft-color: #000000;
    --tt-entry-draft-border: rgba(0, 0, 0, 0.35);
    --tt-cancelled-bg: #d3d3d3;
    --tt-cancelled-color: #212529;
    --tt-highlight-bg: #f39c12;
    --tt-highlight-color: #212529;
    --tt-error-ui-bg: lightyellow;
    --tt-error-ui-color: #212529;
    --tt-circle-bg: #bbbbbb;
    --tt-chart-text: #666666;
    --tt-chart-grid: rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] {
    --tt-body-bg: #1d2129;
    --tt-body-color: #e3e6ec;
    --tt-link-color: #7fb0ff;
    --tt-topbar-bg: #232833;
    --tt-topbar-border: #3d4452;
    --tt-sidebar-bg: linear-gradient(180deg, #1e3462 0%, #2c4a86 70%);
    --tt-row-alt-bg: #262b35;
    --tt-entry-draft-bg: rgba(120, 128, 142, 0.45);
    --tt-entry-draft-color: #f1f3f6;
    --tt-entry-draft-border: rgba(255, 255, 255, 0.45);
    --tt-cancelled-bg: #4a505c;
    --tt-cancelled-color: #e3e6ec;
    --tt-highlight-bg: #c47d0e;
    --tt-highlight-color: #ffffff;
    --tt-error-ui-bg: #5c4b14;
    --tt-error-ui-color: #fff7d6;
    --tt-circle-bg: #5c6475;
    --tt-chart-text: #c3c8d2;
    --tt-chart-grid: rgba(255, 255, 255, 0.12);

    /* Radzen: neutral palette (brand colors of the standard theme are kept) */
    --rz-base-50: #ffffff;
    --rz-base-100: #f1f3f6;
    --rz-base-200: #e3e6ec;
    --rz-base-300: #c3c8d2;
    --rz-base-400: #9aa3b2;
    --rz-base-500: #7a8394;
    --rz-base-600: #5c6475;
    --rz-base-700: #3d4452;
    --rz-base-800: #2b303b;
    --rz-base-900: #1d2129;

    /* Radzen: semantic variables taken from Radzen's own dark theme */
    --rz-body-background-color: var(--rz-base-900);
    --rz-text-title-color: var(--rz-base-50);
    --rz-text-color: var(--rz-base-100);
    --rz-text-secondary-color: var(--rz-base-300);
    --rz-text-tertiary-color: var(--rz-base-400);
    --rz-text-disabled-color: var(--rz-base-600);
    --rz-base-background-color: var(--rz-base-800);
    --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700);
    --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600);
    --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600);
    --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700);
    --rz-chip-background-color: var(--rz-base-700);
    --rz-input-background-color: var(--rz-base-900);
    --rz-input-disabled-background-color: var(--rz-base-800);
    --rz-input-focus-shadow: 0 0 0 1px var(--rz-base-900), 0 0 0 3px rgba(67, 108, 180, 0.45);
    --rz-header-border: var(--rz-border-base-700);
    --rz-footer-border: var(--rz-border-base-700);
    --rz-sidebar-background-color: var(--rz-base-background-color);
    --rz-card-flat-background-color: var(--rz-base-700);
    --rz-panel-toggle-icon-background-color: var(--rz-base-700);
    --rz-sidebar-toggle-border: var(--rz-border-base-700);
    --rz-sidebar-toggle-color: var(--rz-text-color);
    --rz-sidebar-toggle-background-color: var(--rz-base-background-color);
    --rz-profile-menu-border: var(--rz-border-base-900);
    --rz-steps-number-background-color: var(--rz-base-700);
    --rz-fieldset-border: var(--rz-border-base-700);
    --rz-fieldset-toggle-background-color: var(--rz-base-700);
    --rz-dropdown-filter-border: var(--rz-border-base-700);
    --rz-listbox-filter-border: var(--rz-border-base-700);
    --rz-switch-background-color: var(--rz-base-600);
    --rz-slider-background-color: var(--rz-base-900);
    --rz-slider-disabled-range-background-color: var(--rz-base-700);
    --rz-slider-disabled-range-border: var(--rz-border-base-700);
    --rz-slider-disabled-handle-background-color: var(--rz-base-700);
    --rz-datepicker-header-background-color: var(--rz-base-800);
    --rz-datepicker-calendar-border: var(--rz-border-base-700);
    --rz-timepicker-background-color: var(--rz-base-900);
    --rz-numeric-button-disabled-background-color: var(--rz-base-700);
    --rz-upload-button-bar-background-color: var(--rz-base-700);
    --rz-upload-files-remove-background-color: var(--rz-base-700);
    --rz-grid-header-background-color: var(--rz-base-900);
    --rz-grid-header-color: var(--rz-text-secondary-color);
    --rz-grid-header-sorted-background-color: var(--rz-base-800);
    --rz-grid-foot-background-color: var(--rz-base-900);
    --rz-grid-filter-background-color: var(--rz-base-800);
    --rz-grid-filter-buttons-background-color: var(--rz-base-900);
    --rz-grid-stripe-background-color: #262b35;
    --rz-grid-detail-template-background-color: var(--rz-base-900);
    --rz-grid-frozen-cell-background-color: var(--rz-base-900);
    --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-700), 0 -1px 0 0 var(--rz-base-700);
    --rz-column-drag-handle-color: var(--rz-text-secondary-color);
    --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color);
    --rz-paginator-numeric-button-background-color: var(--rz-base-700);
    --rz-paginator-numeric-button-hover-background-color: var(--rz-base-700);
    --rz-paginator-numeric-button-selected-background-color: var(--rz-base-900);
    --rz-paginator-numeric-button-selected-color: var(--rz-text-contrast-color);
    --rz-paginator-numeric-button-selected-border: var(--rz-border-base-900);
    --rz-paginator-back-button-background-color: var(--rz-base-700);
    --rz-paginator-back-button-hover-background-color: var(--rz-base-700);
    --rz-paginator-next-button-background-color: var(--rz-base-700);
    --rz-paginator-next-button-hover-background-color: var(--rz-base-700);
    --rz-overlay-background-color: var(--rz-base-background-color);
    --rz-datalist-border: var(--rz-border-base-700);
    --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22);
    --rz-datalist-item-border: none;
    --rz-scheduler-border-color: var(--rz-base-700);
    --rz-scheduler-minor-border-color: var(--rz-base-700);
    --rz-scheduler-toolbar-background-color: var(--rz-base-900);
    --rz-scheduler-header-background-color: var(--rz-base-800);
    --rz-scheduler-header-border: none;
    --rz-scheduler-weekend-color: var(--rz-text-tertiary-color);
    --rz-scheduler-weekend-background-color: #252a33;
    --rz-scheduler-other-month-background-color: var(--rz-base-900);
    --rz-tabs-border: none;
    --rz-tabs-tab-background-color: var(--rz-base-700);
    --rz-tabs-tab-color: var(--rz-text-secondary-color);
    --rz-tabs-tab-hover-background-color: var(--rz-base-800);
    --rz-tabs-tab-hover-color: var(--rz-text-color);
    --rz-tabs-tab-focus-color: var(--rz-text-color);
    --rz-editor-toolbar-background-color: var(--rz-base-800);
    --rz-scrollbar-color: var(--rz-base-600);
    --rz-login-register-background-color: var(--rz-base-700);
    --rz-progressbar-background-color: var(--rz-base-700);
    --rz-chart-axis-color: var(--rz-base-600);
    --rz-editor-separator-background-color: var(--rz-base-700);
    --rz-splitter-bar-background-color: var(--rz-base-700);
    --rz-splitter-bar-hover-opacity: 0.8;
    --rz-form-field-filled-background-color: var(--rz-base-700);
    --rz-form-field-filled-hover-background-color: var(--rz-base-700);
    --rz-timeline-point-background-color: var(--rz-base-600);
    --rz-timeline-line-color: var(--rz-base-600);
    --rz-button-base-background-color: var(--rz-base-700);
    --rz-button-base-color: var(--rz-base-100);
    --rz-scheduler-view-selected-background-color: rgba(67, 108, 180, 0.35);
    --rz-scheduler-view-selected-color: #cddcff;
    --rz-scheduler-prev-next-button-background-color: var(--rz-base-700);
    --rz-scheduler-prev-next-button-color: var(--rz-text-color);
    --rz-grid-clear-filter-button-background-color: var(--rz-base-700);
    --rz-alert-background-color: var(--rz-base-700);
    --rz-editor-button-background-color: var(--rz-base-700);
    --rz-upload-cancel-background-color: var(--rz-base-700);
    --rz-slider-border: var(--rz-border-base-600);
    --rz-dialog-mask-background-color: #000000;
}

/* Bootstrap 5.1 has no color modes, so the few parts used here are adjusted manually */
html[data-theme="dark"] body {
    background-color: var(--tt-body-bg);
    background-image: none; /* Radzen's decorative light background graphic */
    color: var(--tt-body-color);
}

html[data-theme="dark"] .table {
    color: var(--tt-body-color);
    border-color: var(--rz-base-700);
}

html[data-theme="dark"] .text-muted {
    color: var(--rz-base-400) !important;
}

html[data-theme="dark"] hr {
    color: var(--rz-base-600);
}

/* Radzen rules that use the light --rz-base-200 directly (values from Radzen's dark theme) */
html[data-theme="dark"] .rz-button.rz-base,
html[data-theme="dark"] .rz-button.rz-light,
html[data-theme="dark"] .rz-alert.rz-base,
html[data-theme="dark"] .rz-alert.rz-light,
html[data-theme="dark"] .rz-timeline-point-base,
html[data-theme="dark"] .rz-timeline-point-light {
    background-color: var(--rz-base-700);
    color: var(--rz-text-color);
}

/* Syncfusion cards keep a light background in some states */
html[data-theme="dark"] .e-card {
    background-color: var(--rz-base-800);
    color: var(--tt-body-color);
    border-color: var(--rz-base-700);
}

/* Scrollbars in Chromium/Edge/Firefox */
html[data-theme="dark"] {
    scrollbar-color: var(--rz-base-600) var(--rz-base-900);
}