@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; }
body { font-family: 'Rubik', sans-serif; }

/* Blazor framework essentials */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #b32121;
    color: white;
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
    z-index: 1000;
}

#blazor-error-ui .reload { color: #ffd; text-decoration: underline; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* Custom Scrollbar styling */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(79, 70, 229, 0.3); /* indigo-500 with opacity */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 70, 229, 0.6);
}

#sidebar-collapse:checked ~ aside .sidebar-text {
    display: none;
}