/* 1) Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2) CSS variables */
:root {
    /* Brand colors */
    --primary: #6D8FC2;
    --primaryHover: #4B6DA0;
    --secondary: #A5D5EC;
    --white: #ffffff;
    --black: #000000;
    --danger: #EC221F;
    --light: #f8f9fa;
    --outlineMain: #02542D;
    --outlineSecondary: #63AD13;
    --outlineSecondaryHover: #63AD13;

    /* Sidebar */
    --kt-sidebar-bg: var(--primary);
    --kt-sidebar-fg: #ffffff;
    --kt-radius: 14px;
    --kt-shadow: 0 10px 30px rgba(2,6,23,.35);
    --menuActive: #4B6DA0;
    --menuActiveText: #000000;
    /* Headings on home */
    --bigHome: 3rem;
    --mediumHome: 2rem;
    --smallHome: 1.375rem;
    /* Font sizes */
    --largeText: 2rem;
    --bigText: 1.5rem;
    --mediumText: 1.25rem;
    --smallText: 1rem;
    --extraSmallText: 0.9375rem;
    --tinyText: 0.8125rem;
    /* Top bar (TopMenu) height */
    --header-h: 57px;
}

.btn {
    border-radius: 15px;
    font-size: var(--smallText);
}

.btn-xl {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 3rem;
    --bs-btn-font-size: var(--regularText);
}

.btn-lg {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-font-size: var(--middleText);
}

.btn-md {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: var(--smallText);
}

.btn-sm {
    --bs-btn-padding-y: 0.10rem !important;
    --bs-btn-padding-x: 0.50rem !important;
    --bs-btn-font-size: var(--smallText);
}

/* outline buttons */
.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:active {
    border-color: transparent !important;
    color: var(--primary) !important;
    font-weight: 700;
    padding: 5px;
}

    .btn-outline-primary:hover, .btn-outline-primary:active {
        background-color: transparent !important;
        text-decoration: underline !important;
    }

.btn-outline-info, .btn-outline-info:hover, .btn-outline-info:active {
    border-color: transparent !important;
    color: var(--info) !important;
}

    .btn-outline-info:hover, .btn-outline-info:active {
        background-color: transparent !important;
    }

.btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger:hover {
    border-color: transparent !important;
    color: var(--danger) !important;
}

    .btn-outline-danger:active, .btn-outline-danger:hover {
        background-color: transparent !important;
    }

.btn-outline-secondary,
.btn-outline-secondary i {
    color: var(--outlineSecondaryText) !important;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active,
    .btn-outline-secondary:focus:active {
        color: var(--outlineSecondaryText) !important;
        background-color: transparent !important;
    }

/* 3) Base elements */
html, body {
    font-family: "Mulish", Helvetica, Arial, sans-serif;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* 4) Typography */
h1 { font-size: var(--largeText); }

h2 { font-size: var(--bigText); }

p  { font-size: var(--smallText); }

/* 5) Bootstrap overrides (buttons) */
.btn-primary {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    color: var(--white);
    background-color: var(--primaryHover);
    border-color: var(--primaryHover);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus:active {
    color: var(--white);
    background-color: var(--primaryHover);
    border-color: var(--primaryHover);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--primary);
}

/* 6) Layout helpers */
.content { padding-top: 1.1rem; }

h1:focus { outline: none; }

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

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

.validation-message { color: #e50000; }

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

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

/* 9) Forms */
.darker-border-checkbox.form-check-input { border-color: #929292; }

/* Floating labels */
.form-floating > label {
    color: rgba(var(--bs-body-color-rgb), .6);
    font-size: var(--extraSmallText);
    padding: 1.1rem .75rem;
}

.form-floating, .form-check { margin-bottom: 1rem; }

.input-group > .form-floating { margin-bottom: 0; }

.form-check-input, .form-select, .form-control {
    border-radius: 15px;
    border: 1px solid var(--primary);
    background-color: transparent;
    font-size: var(--tinyText) !important;
}

.form-check-input:checked { background-color: var(--primary); }

.form-control, .form-select { width: 100%; border-radius: 15px; }

.form-control:focus,
.form-control:active,
.form-select:focus,
.form-check-input:focus {
    border: 1px solid var(--primary);
    box-shadow: 0 0 0 0rem white, 0 0 0 0.1rem var(--primary);
}

/* Switch */
.form-switch .form-check-input,
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2363AD13'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
}

.form-select { width: 100%; min-width: 300px; }

/* 10) Responsive */
@media only screen and (max-width: 600px) {
    :root {
        --largeText: 1.5rem;
        --bigText: 1.25rem;
        --mediumText: 1.125rem;
        --smallText: 0.875rem;
        --extraSmallText: 0.82rem;
    }
}