.login-bg {
    /* Futuristic, CSS-only animated background */
    position: absolute;
    color: white;
    width: 100%;
    height: 100dvh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* contain animated layers */
    /* Animation speed variables */
    --mesh-speed: 3s;
    --drift-speed: 5s;
    --grid-speed: 7s;
    /* Base layered gradients as a static fallback (dark blue mesh base) */
    background-color: #0b1120; /* deep blue base */
    background-image:
        radial-gradient(1200px 800px at 10% -20%, #ef4523 0%, #0b1120 60%),
        radial-gradient(900px 700px at 110% 120%, #0a1a33 0%, rgba(0, 0, 0, 0) 60%);
    background-repeat: no-repeat;
}

/* Subtle animated glow/blobs layer */
.login-bg::before {
    content: "";
    position: absolute;
    inset: -15% -15% -15% -15%;
    /* Mesh/lava-lamp blobs using multiple radial gradients */
    background-image:
        radial-gradient(circle, rgba(0, 145, 255, 0.35) 0%, rgba(0, 0, 0, 0) 60%),
        radial-gradient(circle, rgba(0, 230, 255, 0.28) 0%, rgba(0, 0, 0, 0) 60%),
        radial-gradient(circle, rgba(0, 185, 255, 0.28) 0%, rgba(0, 0, 0, 0) 60%),
        radial-gradient(circle, rgba(40, 255, 220, 0.22) 0%, rgba(0, 0, 0, 0) 60%);
    background-size: 55% 55%, 60% 60%, 50% 50%, 70% 70%;
    background-position: 8% 18%, 82% 22%, 28% 82%, 72% 78%;
    filter: blur(40px);
    will-change: background-position, transform;
    transform-origin: 50% 50%;
    /* Combine background-position animation with a subtle transform drift for clearer motion */
    animation: meshMove var(--mesh-speed) ease-in-out infinite alternate, blobDrift var(--drift-speed) ease-in-out infinite alternate;
    mix-blend-mode: screen;
    opacity: 1;
    pointer-events: none;
}

/* Subtle animated grid overlay */
.login-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
		linear-gradient(rgba(0, 210, 240, 0.14) 1px, rgba(0, 0, 0, 0) 1px),
		linear-gradient(90deg, rgba(0, 210, 240, 0.14) 1px, rgba(0, 0, 0, 0) 1px);
	background-size: 22px 22px, 22px 22px; /* grid spacing */
    background-position: 0 0, 0 0;
    animation: gridDrift var(--grid-speed) linear infinite;
    opacity: 0.15; /* tone down grid so mesh is visible */
    /* vignette mask to keep edges calm */
    -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 55%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(100% 100% at 50% 50%, #000 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Ensure foreground content sits above background layers */
.login-bg > * {
    position: relative;
    z-index: 1;
}

@keyframes gridDrift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0.001deg);
    }
    100% {
        transform: translate3d(-36px, -36px, 0) rotate(0.001deg);
    }
}

@keyframes aiGlowRotate {
    0% {
        transform: rotate(0deg) scale(1.01);
    }
    50% {
        transform: rotate(180deg) scale(1.06);
    }
    100% {
        transform: rotate(360deg) scale(1.01);
    }
}

/* Mesh blob positions animation */
@keyframes meshMove {
    0% {
        background-position:
            8% 18%,
            82% 22%,
            28% 82%,
            72% 78%;
        transform: rotate(0.0001deg) scale(1);
    }
    50% {
        background-position:
            18% 28%,
            72% 18%,
            20% 70%,
            82% 68%;
        transform: rotate(0.0001deg) scale(1.035);
    }
    100% {
        background-position:
            12% 32%,
            68% 26%,
            22% 88%,
            84% 74%;
        transform: rotate(0.0001deg) scale(1.06);
    }
}

/* Gentle drift/translate to amplify perceived motion */
@keyframes blobDrift {
    0% {
        transform: translate3d(0%, 0%, 0) scale(1);
    }
    50% {
        transform: translate3d(-2.5%, -1.5%, 0) scale(1.025);
    }
    100% {
        transform: translate3d(2%, 2.5%, 0) scale(1.04);
    }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .login-bg::before,
    .login-bg::after {
        animation: none !important;
    }
}

.login-form {
	padding: 30px 40px;
    position: relative;
    background: rgba(0, 0, 0, 0.36);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-radius: 1rem;
    width: 350px;
    margin-top: -100px;
    display: flex;  
    flex-direction: column;
    justify-content: space-around;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    @media (max-width: 768px)  {
        padding: 25px 10px;
        width: 85dvw;
        max-width: 350px;
    }
}

.login-logo-container {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    padding-bottom: 20px;
    height: 80px;
    @media (max-width: 768px)  {
        height: 60px;
    }
}

.login-logo {
    max-width: 200px;
    height: auto;
    @media (max-width: 768px)  {
        max-width: 200px;
    }
}

.login-form-fieldset {
    border: 1px solid #646464;
    border-radius: 0.2rem;
}

.errors {
    color: red;
    font-size: 13px;
}

.registration__form__p {
    margin-bottom: 16px;
    box-sizing: border-box;
}

.registration__form__label {
    opacity: 0.85;
    color: #ffffff;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    padding-bottom: 5px;
}

.generic_text {
    opacity: 0.85;
    color: #ffffff;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    text-align: center;
}

.generic_text a:link {
  color: #ffffff;
}

.generic_text a:visited {
  color: #ffffff;
}

.generic_subtext {
    opacity: 0.85;
    color: #ffffff;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    text-align: center;
}

.registration__flash {
    color: #f94012;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 5px;
}

.registration__input {
    width: 100%;
    display: block;
    padding: 8px 8px;
    border: none;
    border-radius: 0px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    padding-bottom: 3px;
    margin-top: 1px;
    opacity: 0.9;
    box-sizing: border-box;
    border-radius: 0.2rem;
}

.registration__forgot {
    color: #81c3f8;
    float: right;
    margin-top: -12px;
    margin-bottom: 1px;
    text-decoration: none;
    background-color: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: 0.9em;
}

.registration__forgot:hover {
    color: #da5b34;
}

.generic_page_link {
    color: #81c3f8;
    text-decoration: none;
    background-color: transparent;
}

.generic_page_link:hover {
    color: #f94012;
}

.buttonlikelink {
    background-color: rgb(233, 132, 49);
    color: white;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding: 1em 1.5em;
}

.login-button {
    font-size: 16px;
    padding: 10px;
    color: white;
    text-align: center;
    font-weight: 400;
    background: #39bf6e;
    border-bottom: 2px solid #227041;
    clear: both;
    margin-top: 15px;
    cursor: pointer;
    border-radius: 0.2rem;
    width: 99%;
    margin-right: auto;
    margin-left: auto;
}

.login-button:hover {
    background: #2b9556;
}

#icon {
    border-radius: 50%;
    height: 30px;
}

body {
    margin: 0px;
    overflow: hidden;
    font-family: 'Manrope', sans-serif;
}

.App {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 15vw;
}


.jss53 .MuiDialog-container .MuiPaper-root{
  width: 100%;
}

.refresh-icon {
    display: none !important;
}

li.selected:hover .refresh-icon {
    display: block !important;
}

.header-bar {
    position: static;
    margin: 0;
    justify-content: space-between;
    background-color: rgba(10, 6, 28, 0.5);
    background-image:
        radial-gradient(160px 120px at 8% 50%, rgba(0, 140, 255, 0.20) 0%, rgba(0, 0, 0, 0) 60%),
        radial-gradient(220px 160px at 85% 30%, rgba(0, 210, 255, 0.16) 0%, rgba(0, 0, 0, 0) 60%),
        radial-gradient(180px 140px at 35% 120%, rgba(0, 170, 255, 0.14) 0%, rgba(0, 0, 0, 0) 60%),
        radial-gradient(240px 180px at 95% 110%, rgba(220, 48, 1, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
    background-repeat: no-repeat;
    background-position: 0 0, 0 0, 0 0, 0 0;
    background-size: auto, auto, auto, auto;
}

.header-bar .MuiToolbar-root {
    display: flex;
    justify-content: space-between;
}

.header-logo-container {
    cursor: pointer;
    width: 150px !important;
    height: 40px !important; 
    object-fit: contain !important;
    background-color: transparent;
}

.logo-mobile {
    height: 36px !important;
    width: 36px !important;
}

.header-logo-container .MuiAvatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
}

/* Fallbacks for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .header-bar {
        background-color: #0a061c;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    }
    .login-form {
        background: rgba(0, 0, 0, 0.7);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
}

/* Button Loading Spinner Styles */
.button-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Prevent button color change on hover when disabled, including loading state */
.login-button:disabled,
.login-button:disabled:hover,
.login-button:disabled:focus,
.login-button.loading:disabled,
.login-button.loading:disabled:hover,
.login-button.loading:disabled:focus {
    background-color: #3b82f6 !important; /* Orange for loading, or normal if not loading */
    color: #fff !important;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
    border-color: #3b82f6 !important;
}

/* Loading state: change button color when spinner is active */
.login-button.loading {
    background-color: rgb(245, 221, 66) !important; /* Orange for loading */
    color: #fff !important;
    border-color: #f59e42 !important;
}