/* VietPort navy and cyan sampled from logo.png: #01215c and #029eae.
 * Success, warning, danger and status colors retain their original values.
 * Theme colors for the entire application.
 * Edit :root for the default (light) theme and html[data-theme="dark"] for dark mode.
 * --av-* tokens control the administration UI; legacy and Radzen aliases follow them.
 * Shared palette entries below cover loaders, errors, login and live-view graphics.
 * Layout, spacing and typography remain in app.css.
 */

:root {
    /* Radio, checkbox and switch controls use the same brand accent. */
    --rz-radio-checked-background-color: var(--av-surface) !important;
    --rz-radio-checked-border: 1px solid var(--av-primary) !important;
    --rz-radio-circle-background-color: var(--av-primary) !important;
    --rz-radio-circle-hover-background-color: var(--av-primary-hover) !important;
    --rz-radio-checked-color: var(--av-on-primary) !important;
    --rz-switch-checked-background-color: var(--av-primary-soft) !important;
    --rz-switch-circle-background-color: var(--av-text-muted) !important;
    --rz-switch-checked-circle-background-color: var(--av-primary) !important;
    --rz-checkbox-checked-background-color: var(--av-primary) !important;
    --rz-on-primary-lighter: var(--av-primary) !important;
    --rz-checkbox-checked-hover-background-color: var(--av-primary-hover) !important;
    --rz-checkbox-checked-color: var(--av-on-primary) !important;
    /* Component aliases follow the selected brand theme. */
    --rz-secondary: var(--av-accent) !important;
    --rz-secondary-light: var(--av-primary-soft) !important;
    --rz-secondary-dark: var(--av-primary-hover) !important;
    --rz-secondary-darker: var(--av-primary-hover) !important;
    --rz-on-secondary: #001c26 !important;
    --rz-primary-lighter: var(--av-primary-soft) !important;
    --rz-primary-dark: var(--av-primary-hover) !important;
    --rz-primary-darker: var(--av-primary-hover) !important;
    --rz-on-primary: var(--av-on-primary) !important;
    --rz-link-color: var(--av-primary) !important;
    --rz-link-hover-color: var(--av-primary-hover) !important;
    --bs-primary: var(--av-primary);
    --bs-primary-rgb: 1, 33, 92;
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color-rgb: 10, 57, 120;
    --bs-link-color: var(--av-primary);
    --bs-link-hover-color: var(--av-primary-hover);

    --av-primary: #01215c;
    --av-primary-hover: #0a3978;
    --av-primary-soft: #e6f2f8;
    --av-on-primary: #fff;
    --av-accent: #029eae;
    --av-success: #10b981;
    --av-warning: #f59e0b;
    --av-danger: #ef4444;
    --av-canvas: #f2f6fb;
    --av-surface: #ffffff;
    --av-surface-raised: #ffffff;
    --av-surface-muted: #f5f8fc;
    --av-border: #dae5ef;
    --av-border-strong: #b9cddd;
    --av-text: #122743;
    --av-text-muted: #4f657c;
    --av-sidebar: #fff;
    --av-sidebar-text: #344c69;
    --av-sidebar-icon: #536e8a;
    --av-sidebar-title: #586d83;
    --av-sidebar-heading: var(--av-primary);
    --av-sidebar-border: var(--av-border);
    --av-sidebar-hover: var(--av-primary-soft);
    --av-sidebar-hover-text: var(--av-primary);
    --av-sidebar-control: #526d86;
    --av-sidebar-control-bg: #edf4fa;
    --av-sidebar-glow: rgba(2, 158, 174, .08);
    --av-shadow-sm: 0 1px 2px rgba(1, 33, 92, .04), 0 2px 8px rgba(1, 33, 92, .04);
    --av-shadow: 0 8px 24px rgba(1, 33, 92, .08);
    --av-shadow-lg: 0 20px 48px rgba(1, 33, 92, .14);
    --primary-color: var(--av-primary);
    --text-color: var(--av-text);
    --rz-primary: var(--av-primary) !important;
    --rz-primary-light: var(--av-primary-soft) !important;
    --rz-base-background-color: var(--av-surface) !important;
    --rz-text-color: var(--av-text) !important;
    --rz-text-title-color: var(--av-text) !important;
    --rz-text-secondary-color: var(--av-text-muted) !important;
    --rz-border-normal: var(--av-border) !important;
    --rz-panel-background-color: var(--av-surface) !important;
    --rz-panel-border: 1px solid var(--av-border) !important;
    --rz-panel-shadow: var(--av-shadow) !important;
}

html[data-theme="dark"] {
    --bs-primary-rgb: 108, 218, 229;
    --bs-link-hover-color-rgb: 157, 235, 243;
    --av-on-primary: #062337;
    --av-primary: #6cdae5;
    --av-primary-hover: #9debf3;
    --av-primary-soft: rgba(108, 218, 229, .16);
    --av-canvas: #091426;
    --av-surface: #111f35;
    --av-surface-raised: #182c45;
    --av-surface-muted: #0e1a2e;
    --av-border: #293e57;
    --av-border-strong: #3d5770;
    --av-text: #e8f2fc;
    --av-text-muted: #a6bacf;
    --av-sidebar: #081121;
    --av-sidebar-text: #bfd0e3;
    --av-sidebar-icon: #94adc7;
    --av-sidebar-title: #91a8be;
    --av-sidebar-heading: var(--av-text);
    --av-sidebar-border: rgba(108, 218, 229, .12);
    --av-sidebar-hover: rgba(108, 218, 229, .10);
    --av-sidebar-hover-text: var(--av-primary-hover);
    --av-sidebar-control: #acc5dc;
    --av-sidebar-control-bg: rgba(108, 218, 229, .07);
    --av-sidebar-glow: rgba(2, 158, 174, .18);
    --av-shadow-sm: 0 1px 2px rgba(0, 0, 0, .2), 0 2px 8px rgba(0, 0, 0, .16);
    --av-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    --av-shadow-lg: 0 22px 56px rgba(0, 0, 0, .38);
    --rz-base-100: var(--av-surface-raised) !important;
    --rz-base-200: var(--av-surface-muted) !important;
    --rz-datepicker-trigger-icon-color: var(--av-text-muted);
    --rz-datepicker-trigger-icon-hover-color: var(--av-primary);
    --rz-datepicker-calendar-color: var(--av-text);
    --rz-datepicker-calendar-hover-color: var(--av-on-primary);
    --rz-datepicker-calendar-hover-background-color: var(--av-primary);
    --rz-datepicker-calendar-selected-color: var(--av-on-primary);
    --rz-datepicker-calendar-selected-background-color: var(--av-primary);
    --rz-datepicker-calendar-selected-hover-color: var(--av-on-primary);
    --rz-datepicker-calendar-selected-hover-background-color: var(--av-primary-hover);
    --rz-datepicker-calendar-today-color: var(--av-text);
    --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--av-text-muted);
}

/* Shared colors and translucent effects. Palette names identify their original color, before brand recoloring. */
:root {
    --palette-f6f6f8: var(--av-canvas);
    --color-error-banner-background: lightyellow;
    --palette-rgba-0-0-0-0-2: rgba(0, 0, 0, 0.2);
    --color-error-boundary-background: #b32121;
    --color-white: white;
    --palette-e0e0e0: #e0e0e0;
    --palette-1b6ec2: var(--av-primary-hover);
    --color-slate-900: #0f203a;
    --palette-e9eef6: #e9eef6;
    --palette-rgba-0-0-0-0-04: rgba(0,0,0,0.04);
    --palette-2b7fff: var(--av-primary);
    --color-slate-600: #425a74;
    --color-code: #0b6378;
    --palette-71717b: #67788a;
    --palette-rgba-19-91-236-0-1: rgba(1, 33, 92, 0.1);
    --palette-eeefff: var(--av-primary-soft);
    --palette-cccccc54: #cccccc54;
    --palette-777: #777;
    --palette-6d6d6d: #6d6d6d;
    --color-slate-500: #536f8c;
    --palette-ddd: #ddd;
    --palette-rgba-0-0-0-0-5: rgba(0,0,0,0.5);
    --palette-rgba-255-255-255-0-3: rgba(255, 255, 255, 0.3);
    --palette-rgba-0-0-0-0-3: rgba(0, 0, 0, 0.3);
    --palette-rgba-0-0-0-0-4: rgba(0, 0, 0, 0.4);
    --palette-6b9ed2: #6b9ed2;
    --palette-3b6ea2: #3b6ea2;
    --palette-0087ff: var(--av-primary);
    --color-slate-100: #eef4fa;
    --palette-rgba-19-91-236-0-05: rgba(1, 33, 92, 0.05);
    --color-slate-50: #f7fafd;
    --palette-rgba-255-255-255-0-5: rgba(255, 255, 255, 0.5);
    --palette-rgba-19-91-236-0-2: rgba(1, 33, 92, 0.2);
    --palette-rgba-0-0-0-0-05: rgba(0, 0, 0, 0.05);
    --palette-e2e2e2: #e2e2e2;
    --palette-rgba-15-23-42-08: rgba(15, 32, 58, .08);
    --av-logo-background: rgba(255, 255, 255, .94);
    --palette-rgba-0-0-0-16: rgba(0, 0, 0, .16);
    --av-active-gradient-start: #086978;
    --av-active-gradient-end: #01215c;
    --av-active-shadow-color: rgba(1, 33, 92, .28);
    --palette-rgba-16-24-40-015: rgba(16, 24, 40, .015);
    --av-canvas-glow: rgba(2, 158, 174, .045);
    --palette-rgba-15-23-42-13: rgba(15, 32, 58, .13);
    --av-dialog-backdrop: rgba(9, 20, 38, .40);
    --palette-rgba-8-15-36-94: rgba(1, 33, 92, .94);
    --palette-rgba-30-41-85-72: rgba(10, 57, 120, .72);
    --palette-rgba-6-182-212-3: rgba(2, 158, 174, .3);
    --palette-rgba-255-255-255-3: rgba(255, 255, 255, .3);
    --palette-rgba-2-6-23-32: rgba(2, 6, 23, .32);
    --palette-rgba-15-23-42-15: rgba(15, 32, 58, .15);
    --palette-rgba-79-70-229-2: rgba(2, 158, 174, .2);
    --palette-rgba-2-6-23-3: rgba(2, 6, 23, .3);
    --palette-rgba-8-15-31-54: rgba(8, 15, 31, .54);
    --palette-dcecf7: #dcecf7;
    --palette-dff5ff: #dff5ff;
    --palette-87ceeb: #87ceeb;
    --palette-39d6b5: #39d6b5;
    --palette-10283b: #10283b;
    --palette-60778a: #60778a;
    --palette-rgba-22-140-120-0-25: rgba(22, 140, 120, 0.25);
    --palette-rgba-22-140-120-0-08: rgba(22, 140, 120, 0.08);
    --palette-177a69: #177a69;
    --palette-20c997: #20c997;
    --palette-rgba-32-201-151-0-14: rgba(32, 201, 151, 0.14);
    --palette-rgba-71-116-145-0-25: rgba(71, 116, 145, 0.25);
    --palette-rgba-8-28-43-0-12: rgba(8, 28, 43, 0.12);
    --palette-rgba-151-188-211-0-18: rgba(151, 188, 211, 0.18);
    --palette-rgba-3-14-23-0-72: rgba(3, 14, 23, 0.72);
    --palette-a9c3d4: #a9c3d4;
    --palette-rgba-34-197-94-0-96: rgba(34, 197, 94, 0.96);
    --palette-rgba-34-197-94-0-18: rgba(34, 197, 94, 0.18);
    --palette-rgba-34-197-94-0-16: rgba(34, 197, 94, 0.16);
    --palette-rgba-34-197-94-0-8: rgba(34, 197, 94, 0.8);
    --palette-ecfccb: #ecfccb;
    --palette-a3e635: #a3e635;
    --palette-365314: #365314;
    --palette-4d7c0f: #4d7c0f;
    --palette-65a30d: #65a30d;
    --palette-rgba-255-255-255-0-2: rgba(255, 255, 255, 0.2);
    --palette-rgba-3-14-23-0-76: rgba(3, 14, 23, 0.76);
    --palette-25394c: #25394c;
    --palette-60778b: #60778b;
    --palette-075985: #075985;
    --palette-7dd3fc: #7dd3fc;
    --palette-facc15: #facc15;
    --palette-172638ed: #172638ed;
    --color-slate-400: #94a9bf;
    --palette-142033f5: #142033f5;
    --palette-0006: #0006;
    --color-slate-700: #30465e;
    --color-slate-200: #e2edf6;
    --palette-bae6fd: #bae6fd;
    --color-slate-800: #1a2e46;
    --palette-cbd5e1: #cbd5e1;
    --palette-rgba-15-23-42-91: rgba(15, 32, 58, .91);
    --palette-e0f2fe: #e0f2fe;
    --palette-fbbf24: #fbbf24;
    --palette-92400e: #92400e;
    --palette-38bdf8: #38bdf8;
    --palette-38bdf844: #38bdf844;
    --palette-0284c7: #0284c7;
    --palette-0c4a6e: #0c4a6e;
    --palette-rgba-255-255-255-0-16: rgba(255, 255, 255, 0.16);
    --palette-rgba-255-255-255-0-07: rgba(255, 255, 255, 0.07);
    --palette-rgba-255-255-255-0-82: rgba(255, 255, 255, 0.82);
    --palette-rgba-14-165-233-0-3: rgba(14, 165, 233, 0.3);
    --palette-rgba-255-255-255-0-18: rgba(255, 255, 255, 0.18);
    --palette-rgba-255-255-255-0-92: rgba(255, 255, 255, 0.92);
    --palette-rgba-255-255-255-0-55: rgba(255, 255, 255, 0.55);
    --palette-6b7280: #6b7280;
    --palette-4ade80: #4ade80;
    --palette-fdba74: #fdba74;
    --palette-a16207: #a16207;
    --palette-fff59d: #fff59d;
    --palette-f472b6: #f472b6;
    --palette-fb7185: #fb7185;
    --palette-rgba-239-68-68-0-15: rgba(239, 68, 68, 0.15);
    --color-error: #ef4444;
    --palette-rgba-0-0-0-0-7: rgba(0, 0, 0, 0.7);
    --palette-rgba-0-0-0-0-22: rgba(0, 0, 0, 0.22);
    --palette-rgba-255-255-255-0-68: rgba(255, 255, 255, 0.68);
    --palette-172033f2: #172033f2;
    --palette-0005: #0005;
    --palette-172033: #172033;
    --palette-172033ef: #172033ef;
    --palette-15803d: #15803d;
    --palette-rgb-5-39-103: rgb(5, 39, 103);
    --palette-3a0647: #3a0647;
    --palette-f7f7f7: #f7f7f7;
    --palette-d6d5d5: #d6d5d5;
}