.light-mode {
    --section-bg-1: white;
    --section-bg-2: #e5e7eb;
    --section-bg-3: #EEEEEE;
    --section-bg-4: #CCCCCC;
    --section-bg-5: #F0F0F0;
    --font-accent: #2e2e2e; /* dark gray for light mode */
}

.dark-mode {
    --section-bg-1: #001a33;
    --section-bg-2: #002b4d;
    --section-bg-3: #003366;
    --section-bg-4: #000a14;
    --section-bg-5: #111426;
    --font-accent: #D3D3D3; /* D3D3D3   #DCDCDC light color for dark mode */
}

.bg-accent1 {
    background-color: var(--section-bg-1) !important;
}

.bg-accent2 {
    background-color: var(--section-bg-2) !important;
}

.bg-accent3 {
    background-color: var(--section-bg-3) !important;
}

.bg-accent4 {
    background-color: var(--section-bg-4) !important;
}

.bg-accent5 {
    background-color: var(--section-bg-5) !important;
}

.text-accent {
    color: var(--font-accent) !important;
}


.light-mode {
    /* === CORE BACKGROUNDS === */
    --bg-app: #FFFFFF;
    --bg-surface: #F9F9F9;
    --bg-elevated: #FFFFFF;
    /* === SECTION LAYERS (progressive depth) === */
    --section-bg-1: #FFFFFF;
    --section-bg-2: #F5F7FA;
    --section-bg-3: #EEF2F7;
    --section-bg-4: #E4EAF2;
    --section-bg-5: #1E2756;
    /* === BRAND COLORS === */
    --color-primary: #1e2756;
    --color-primary-light: #27306e;
    --color-primary-dark: #1a214b;
    --color-secondary: #ffd84d;
    --color-secondary-light: #ffe066;
    --color-secondary-dark: #e6c43a;
    --color-tertiary: #4a5d73;
    --color-tertiary-light: #5c6f85;
    --color-tertiary-dark: #3e4f62;
    /* === TEXT === */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --font-accent: #1e2756;
    /* === BORDERS / LINES === */
    --border-light: #E2E8F0;
    --border-default: #CBD5E1;
    /* === ACTION STATES === */
    --action-primary: #ffd84d;
    --action-primary-hover: #e6c43a;
    --action-secondary: #1e2756;
    --action-secondary-hover: #27306e;
    /* === SHADOW / DEPTH === */
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.05);
}

.dark-mode {
    /* === CORE BACKGROUNDS === */
    --bg-app: #0f172a;
    --bg-surface: #1a2238;
    --bg-elevated: #222c4a;
    /* === SECTION LAYERS === */
    --section-bg-1: #0f172a;
    --section-bg-2: #1a2238;
    --section-bg-3: #222c4a;
    --section-bg-4: #2a3655;
    --section-bg-5: #334155;
    /* === BRAND COLORS (same identity, tuned) === */
    --color-primary: #27306e;
    --color-primary-light: #3a4590;
    --color-primary-dark: #1e2756;
    --color-secondary: #ffd84d;
    --color-secondary-light: #ffe680;
    --color-secondary-dark: #e6c43a;
    --color-tertiary: #5c6f85;
    --color-tertiary-light: #7a8fa6;
    --color-tertiary-dark: #4a5d73;
    /* === TEXT === */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --font-accent: #ffd84d;
    /* === BORDERS / LINES === */
    --border-light: #2a344d;
    --border-default: #3b4663;
    /* === ACTION STATES === */
    --action-primary: #ffd84d;
    --action-primary-hover: #e6c43a;
    --action-secondary: #3a4590;
    --action-secondary-hover: #4c5bb0;
    /* === SHADOW / DEPTH === */
    --shadow-soft: 0 4px 16px rgba(0,0,0,0.4);
}

.text-white{
    color:white!important;
}



h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.min-vh-50 {
    min-height: 50vh;
}

.min-vh-75 {
    min-height: 75vh;
}

.min-vh-100 {
    min-height: 100vh;
}

/* Responsive typography mapped to your MudProvider */
.mud-typography-h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem); /* increased from 2rem to 2.25rem */
}
/* 36px → 56px (was 32px → 56px) */
.mud-typography-h2 {
    font-size: clamp(2rem, 4vw, 2.75rem); /* increased from 1.75rem to 2rem */
}
/* 32px → 44px (was 28px → 44px) */
.mud-typography-h3 {
    font-size: clamp(1.75rem, 3vw, 2.25rem); /* increased from 1.5rem to 1.75rem */
}
/* 28px → 36px (was 24px → 36px) */
.mud-typography-h4 {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem); /* increased from 1.25rem to 1.375rem */
}
/* 22px → 30px (was 20px → 30px) */
.mud-typography-h5 {
    font-size: clamp(1.25rem, 2vw, 1.5rem); /* increased from 1.125rem to 1.25rem */
}
/* 20px → 24px (was 18px → 24px) */
.mud-typography-h6 {
    font-size: clamp(1.125rem, 1.6vw, 1.25rem); /* increased from 1rem to 1.125rem */
}
/* 18px → 20px (was 16px → 20px) */

.mud-typography-body1 {
    font-size: clamp(1.125rem, 1.5vw, 1.2rem); /* increased from 1rem to 1.125rem */
}
/* 18px → 19.2px (was 16px → 19.2px) */
.mud-typography-body2 {
    font-size: clamp(1rem, 1.2vw, 1rem); /* increased from 0.875rem to 1rem */
}
/* 16px → 16px (was 14px → 16px) */

.mud-typography-subtitle1 {
    font-size: clamp(1.125rem, 1.4vw, 1.125rem); /* increased from 1rem to 1.125rem */
}
/* 18px → 18px (was 16px → 18px) */
.mud-typography-subtitle2 {
    font-size: clamp(1.125rem, 1.2vw, 1rem); /* increased from 1rem to 1.125rem */
}
/* 18px → 16px (was 16px → 16px) */

.mud-typography-button {
    font-size: clamp(1.125rem, 1.2vw, 1rem); /* increased from 1rem to 1.125rem */
}
/* fixed 16px */
.mud-typography-caption,
.mud-typography-overline {
    font-size: 0.875rem;
}
/* fixed 14px */