/* Global overrides on top of Tailwind. Most styling is in component markup. */

html, body { height: 100%; }
html { scroll-behavior: smooth; }

/* Material Symbols sizing helpers. */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
.material-symbols-outlined.text-sm { font-size: 18px; }
.material-symbols-outlined.text-md { font-size: 20px; }
.material-symbols-outlined.text-lg { font-size: 24px; }
.material-symbols-outlined.text-xl { font-size: 32px; }

/* Hide scrollbars on horizontally scrolling chip rails. */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Default focus ring matches the brand. */
:focus-visible {
    outline: 2px solid #00bfa5;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Blazor error UI restyled. */
#blazor-error-ui {
    background: #ba1a1a;
    color: #ffffff;
    bottom: 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 0.8rem 1.2rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1.2rem;
    top: 0.8rem;
}
.blazor-error-boundary {
    background: #ba1a1a;
    color: #ffffff;
    padding: 1rem;
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* Validation styling for forms. */
.valid.modified:not([type=checkbox]) { outline: 1px solid #00bfa5; }
.invalid { outline: 1px solid #ba1a1a; }
.validation-message { color: #ba1a1a; font-size: 12px; font-family: 'Inter', system-ui, sans-serif; }