html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

a, .btn-link { color: #2563eb; }
.btn-primary { background-color: #2563eb; border-color: #1d4ed8; }
.btn-primary:hover { background-color: #1d4ed8; border-color: #1d4ed8; }

.form-control:focus, .form-check-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.2);
}

.validation-message { color: #dc2626; font-size: 0.85rem; }
.invalid { outline: 1px solid #dc2626; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Đã xảy ra lỗi." }

/* MudBlazor popover fix when in our layout */
.mud-popover-provider > div { position: fixed; }

/* ── MudBlazor x Bootstrap compatibility ──────────────────────────────────────
   Bootstrap's reset + our gray page background can cause the "shrunk" floating
   label on outlined inputs to overlap the input border or value. Force the
   label to have a solid surface background when shrunk so it masks the border
   line correctly, and add small horizontal padding so it visually clears the
   border ticks. */
.mud-input.mud-input-outlined .mud-input-label-animated.mud-input-label-shrink {
    background-color: var(--mud-palette-surface, #ffffff);
    padding-left: 4px;
    padding-right: 4px;
    z-index: 1;
}

/* Same fix inside MudPaper which usually sits on white — keep label background
   matching the paper's surface so transparent gaps don't show. */
.mud-paper .mud-input.mud-input-outlined .mud-input-label-animated.mud-input-label-shrink {
    background-color: var(--mud-palette-surface, #ffffff);
}

/* MudSelect outlined uses the same label mechanism */
.mud-select.mud-input-outlined .mud-input-label-animated.mud-input-label-shrink {
    background-color: var(--mud-palette-surface, #ffffff);
    padding-left: 4px;
    padding-right: 4px;
    z-index: 1;
}

/* Numeric field: same */
.mud-input-numeric.mud-input-outlined .mud-input-label-animated.mud-input-label-shrink {
    background-color: var(--mud-palette-surface, #ffffff);
    padding-left: 4px;
    padding-right: 4px;
    z-index: 1;
}

/* MudInputLabel for Text-variant: when input has content, keep the label small
   and above so it doesn't overlap the typed text. Mud sets the shrink class
   based on Value not null; we just stop browser-default vertical-align from
   pulling it down. */
.mud-input-label-animated {
    line-height: 1.15;
}

/* Slightly higher z-index than the input border so the label "cuts" through */
.mud-input-control {
    --label-z: 2;
}