/* App-level Custom Styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--tnc-paper));
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--tnc-gold-600) / 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--tnc-brand-500));
}

/* Blazor validation classes styled with Tailwind aesthetics */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid #22c55e;
}

.invalid {
    outline: 2px solid #ef4444;
}

.validation-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}