/* Bootstrap 5 utility-class CSS variables. Pages still use Bootstrap utility
   classes (row, col-md-*, d-flex, card, mb-3 ...) so we keep these tokens.
   Brand colors are mirrored in BlazorApp/Theme/AppTheme.cs (MudTheme); keep
   palette here in sync if you tweak the MudTheme. */

:root {
    --bs-blue: #126996;
    --bs-indigo: #6610f2;
    --bs-purple: #a663c0;
    --bs-pink: #d63384;
    --bs-red: #bf1920;
    --bs-orange: #f4592f;
    --bs-yellow: #ffed00;
    --bs-green: #209d50;
    --bs-teal: #20c997;
    --bs-cyan: #0078d7;
    --bs-black: #000;
    --bs-white: #ffffff;
    --bs-gray: #d3d3d3;
    --bs-gray-dark: #222222;
    --bs-gray-100: #f7f8f9;
    --bs-gray-200: #f2f2f2;
    --bs-gray-300: #e5e5e5;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #a1a1a1;
    --bs-gray-700: #495057;
    --bs-gray-800: #222222;
    --bs-gray-900: #212529;
    --bs-primary: #063340;
    --bs-secondary: #126996;
    --bs-tertiary: #9abddf;
    --bs-success: #10893e;
    --bs-info: #0078d7;
    --bs-warning: #ff9c00;
    --bs-danger: #e81123;
    --bs-light: #d3d3d3;
    --bs-dark: #212529;
    --bs-primary-rgb: 18, 105, 150;
    --bs-secondary-rgb: 255, 255, 255;
    --bs-success-rgb: 16, 137, 62;
    --bs-info-rgb: 0, 120, 215;
    --bs-warning-rgb: 255, 156, 0;
    --bs-danger-rgb: 232, 17, 35;
    --bs-light-rgb: 211, 211, 211;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: "Open Sans", "Poppins", "Segoe UI", "Roboto",
        "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.88rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #ffffff;
    --bs-border-color: #e5e5e5;
    --bs-border-radius: 0.375rem;
    --bs-link-color: #126996;
    --bs-link-hover-color: #063340;
    --bs-form-valid-color: #10893e;
    --bs-form-valid-border-color: #10893e;
    --bs-form-invalid-color: #e81123;
    --bs-form-invalid-border-color: #e81123;
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Minimal .alert styling for the account pages' server-rendered status and
   validation boxes (Bootstrap itself is not loaded). */
.alert {
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
}

.alert-danger {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.08);
    border-color: rgba(var(--bs-danger-rgb), 0.25);
}

/* Minimal form-control / form-select / form-check-input styling
   so account pages (server-rendered, plain HTML inputs) look correct. */
.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid var(--bs-gray-400);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(18, 105, 150, 0.25);
    outline: 0;
}
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    appearance: none;
}
.form-label {
    margin-bottom: 0.25rem;
    font-weight: 500;
}
/* Required-field indicator — red asterisk on the label.
   - Custom <label class="form-label"> fields add an explicit .required-asterisk span.
   - MudBlazor inputs with Required="true" render the asterisk via .mud-input-label::after
     (it otherwise inherits the muted label color); recolor it to match. */
.required-asterisk {
    color: var(--bs-danger);
    margin-left: 0.15rem;
}
.mud-input-required .mud-input-label::after {
    color: var(--bs-danger);
}
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    margin-left: -1.5rem;
    vertical-align: top;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-500);
    border-radius: 0.25rem;
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-label { cursor: pointer; }

.btn-primary {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-white);
}
.btn-primary:disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.65;
}
.btn-secondary {
    color: var(--bs-white);
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
.btn-danger {
    color: var(--bs-white);
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

/* Mobile touch targets for auth pages (phones ≤480px) */
@media (max-width: 480px) {
    .block-content .btn {
        min-height: 3.5rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 1.125rem;
        font-weight: 600;
    }
    .block-content .form-control {
        min-height: 3rem;
        font-size: 1rem;
    }
}