:root {
    --blue: #0E2336;
    --pink: #E21859;
    --pink-light: #F6B6CB;
    --blue-300: #335777;
    --blue-400: #203D57;
    --blue-muted: #335777;
    --white: #F7FAFD;
    --white-pure: #FFFFFF;
    --black: #000000;
    --grey-300: #CCCCCC;

    --page-bg: #f7f7f7;
    --text-default: #0E2336;
    --border: #E6E6E6;
    --footer-bg: #E9ECEF;

    --warning-bg: #FEF5E8;
    --warning-border: #FAD5A1;
}

/* =====================================================
   APP LAYOUT – STICKY FOOTER
===================================================== */

.app-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* default button styles */
.mud-button {
    padding: 10px 16px;

    &.loading:disabled {
        border: 1px solid var(--border) !important;
        background-color: var(--white-pure) !important;
    }
}
.mud-button-text-size-small {
    padding: 0;
}
.mud-button-text-size-small.mud-button-text-primary:hover {
    background-color: transparent;
}
.mud-button .mud-button-label {
    font-weight: 700;
}

.mud-button-filled-primary {
    &:disabled {
        background-color: var(--pink-light) !important;
        color: var(--white) !important;
    }
}

.mud-button-outlined {
    border-width: 2px;
    border-color: var(--blue-400);

    &:hover {
        border-color: var(--blue-300);
    }
}

.header-container .mud-button-outlined {
    color: var(--white);
}

.header-container .mud-button-text {
    &:hover {
        background-color: var(--blue-400);
    }
}

.mud-checkbox .mud-button-root {
    padding: 0;
}
.mud-checkbox .mud-typography {
    padding-left: 8px;
    line-height: 1rem;
}

#dotnet-compile-error {
    display: none;
}

.switch .mud-switch-span {
    padding: 7px 9px;
}
.switch .mud-switch-span .mud-switch-track {
    opacity: 1;
    background-color: #DADADA;
    border-radius: 16px;
}
.switch:hover .mud-switch-span .mud-switch-track {
    background-color: rgba(14, 35, 54, 0.2);
}
.switch .mud-switch-base {
    padding: 9px 11px;
}
.switch .mud-switch-thumb-medium {
    background-color: var(--white);
}
.switch .mud-switch-base.mud-checked {
    transform: translateX(16px);
}


.mud-dialog .mud-dialog-actions {
    justify-content: flex-start;
    padding: 16px 24px;
}

.mud-data-grid thead .column-header {
    font-weight: 700 !important;
}

.mud-alert-text-warning {
    background-color: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--text-default);
}
.mud-alert-text-warning .mud-alert-icon {
    color: var(--text-default);
}